diff --git a/frontend-web/.env.development b/frontend-web/.env.development
index 0d15230d..41decf09 100644
--- a/frontend-web/.env.development
+++ b/frontend-web/.env.development
@@ -7,6 +7,20 @@ VITE_LANGGRAPH_BASE_URL=http://127.0.0.1:8001/api
 
 # 轻应用「新建笔记」系列接口
 VITE_NOTE_API_BASE_URL=http://47.88.25.99:8000
-
+# CMZS后端接口
+VITE_API_BASE_URL=https://ch1.b.uat.4.cn/zncm
+# 佳来模型对话接口
+VITE_AIPI_CHAT_URL=https://ch1.b.uat.4.cn/gpt
+# 多轮检索接口
+VITE_AIPI_GENERATE_CHAT_URL=https://ch1.b.uat.4.cn/jialai_b1_chat
+VITE_AIPI_TASK_CHAT_URL=https://ch1.b.uat.4.cn/qq_b1_chat
+VITE_AIPI_KNOWLEDGE_URL=https://chlib.b.uat.4.cn/knowlibrary
+VITE_AIPI_B1COH_URL=https://ch1.b.uat.4.cn/web
+VITE_AIPI_B2ACTOR_URL=htttps://ty.b.uat.4.cn
+VITE_AIPI_MOPECHAT_URL=https://ch1.b.uat.4.cn/likun_b1_mope
+VITE_AIPI_BACKENP_URL=https://knowledgetoolserver.b.uat.4.cn
+VITE_AIPI_CONSUMER_URL=https://ch1.b.uat.4.cn/consumer
+VITE_AIPI_PGLINKTO_URL=https://pg.b.uat.4.cn
+VITE_AIPI_XKLINKTO_URL=https://kz.b.uat.4.cn
 # 可选：Canvas 独立 LangGraph 地址（不设则回退到 VITE_LANGGRAPH_BASE_URL）
 # VITE_CANVAS_LANGGRAPH_BASE_URL=
diff --git a/frontend-web/.env.development.local.example b/frontend-web/.env.development.local.example
index 3f551f71..471b2649 100644
--- a/frontend-web/.env.development.local.example
+++ b/frontend-web/.env.development.local.example
@@ -3,5 +3,18 @@
 
 VITE_BACKEND_BASE_URL=http://127.0.0.1:8001
 VITE_LANGGRAPH_BASE_URL=http://127.0.0.1:8001/api
+# 佳来模型对话接口
+VITE_AIPI_CHAT_URL=https://ch1.b.uat.4.cn/gpt
+# 多轮检索接口
+VITE_AIPI_GENERATE_CHAT_URL=https://ch1.b.uat.4.cn/jialai_b1_chat
+VITE_AIPI_TASK_CHAT_URL=https://ch1.b.uat.4.cn/qq_b1_chat
+VITE_AIPI_KNOWLEDGE_URL=https://chlib.b.uat.4.cn/knowlibrary
+VITE_AIPI_B1COH_URL=https://ch1.b.uat.4.cn/web
+VITE_AIPI_B2ACTOR_URL=htttps://ty.b.uat.4.cn
+VITE_AIPI_MOPECHAT_URL=https://ch1.b.uat.4.cn/likun_b1_mope
+VITE_AIPI_BACKENP_URL=https://knowledgetoolserver.b.uat.4.cn
+VITE_AIPI_CONSUMER_URL=https://ch1.b.uat.4.cn/consumer
+VITE_AIPI_PGLINKTO_URL=https://pg.b.uat.4.cn
+VITE_AIPI_XKLINKTO_URL=https://kz.b.uat.4.cn
 
 # VITE_NOTE_API_BASE_URL=http://127.0.0.1:8000
diff --git a/frontend-web/.env.production b/frontend-web/.env.production
index 1d13e37e..0e94e082 100644
--- a/frontend-web/.env.production
+++ b/frontend-web/.env.production
@@ -7,6 +7,19 @@ VITE_LANGGRAPH_BASE_URL=https://ch1.b.uat.4.cn/deerflow/api
 
 # 轻应用「新建笔记」系列接口
 VITE_NOTE_API_BASE_URL=https://your-intranet-host/note-api
+# 佳来模型对话接口
+VITE_AIPI_CHAT_URL=https://ch1.b.uat.4.cn/gpt
+# 多轮检索接口
+VITE_AIPI_GENERATE_CHAT_URL=https://ch1.b.uat.4.cn/jialai_b1_chat
+VITE_AIPI_TASK_CHAT_URL=https://ch1.b.uat.4.cn/qq_b1_chat
+VITE_AIPI_KNOWLEDGE_URL=https://chlib.b.uat.4.cn/knowlibrary
+VITE_AIPI_B1COH_URL=https://ch1.b.uat.4.cn/web
+VITE_AIPI_B2ACTOR_URL=htttps://ty.b.uat.4.cn
+VITE_AIPI_MOPECHAT_URL=https://ch1.b.uat.4.cn/likun_b1_mope
+VITE_AIPI_BACKENP_URL=https://knowledgetoolserver.b.uat.4.cn
+VITE_AIPI_CONSUMER_URL=https://ch1.b.uat.4.cn/consumer
+VITE_AIPI_PGLINKTO_URL=https://pg.b.uat.4.cn
+VITE_AIPI_XKLINKTO_URL=https://kz.b.uat.4.cn
 
 # 可选：Canvas 独立 LangGraph 地址
 # VITE_CANVAS_LANGGRAPH_BASE_URL=
diff --git a/frontend-web/src/components/page-sdebar.css b/frontend-web/src/components/page-sdebar.css
new file mode 100644
index 00000000..61890fb3
--- /dev/null
+++ b/frontend-web/src/components/page-sdebar.css
@@ -0,0 +1,24 @@
+.sidebar-contents{
+    width:98px;
+    height:986px;
+    background:rgba(3, 38, 80, 0.8);
+    border:1px solid;
+    border-color:rgba(43, 143, 254, 0.6);
+    border-radius:4px;
+    backdrop-filter:blur(2px);
+}
+
+.item-nav{
+    width:78px;
+    height:70px;
+    background:rgba(0, 12, 28, 0.15);
+    border:1px solid;
+    border-color:rgba(85, 166, 254, 0.2);
+    line-height:8px;
+    font-family:Noto Sans S Chinese;
+    font-weight:500;
+    color:rgba(255, 255, 255, 0.8);
+    font-size:20px;
+    padding-bottom:18px;
+    text-align:center;
+}
\ No newline at end of file
diff --git a/frontend-web/src/components/page-sidebar-dark.tsx b/frontend-web/src/components/page-sidebar-dark.tsx
new file mode 100644
index 00000000..251e1d82
--- /dev/null
+++ b/frontend-web/src/components/page-sidebar-dark.tsx
@@ -0,0 +1,311 @@
+import { useEffect, useState } from "react";
+import type { ElementType } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import {
+  Bell,
+  Bot,
+  Brain,
+  CalendarClock,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsUpDown,
+  CircleHelp,
+  Database,
+  FileBox,
+  FileText,
+  Folder,
+  FolderOpen,
+  Gauge,
+  Grid3X3,
+  HelpCircle,
+  History,
+  Layout,
+  Library,
+  List,
+  ListChecks,
+  ListTodo,
+  MessageSquareCode,
+  MessageSquarePlus,
+  Network,
+  NotebookPen,
+  Plus,
+  Settings,
+  Sparkles,
+  Target,
+  User,
+  Users,
+  Wrench,
+} from "lucide-react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { NotificationDialog } from "@/components/workspace/notification-dialog";
+import { SettingsDialog } from "@/components/workspace/settings";
+import { useTheme } from "@/contexts/ThemeContext";
+import { getStoredAuth } from "@/core/auth";
+import { useI18n } from "@/core/i18n/hooks";
+import { useUnreadCount } from "@/core/notifications";
+import './page-sdebar.css'
+
+type MenuItem = {
+  id: string;
+  label: string;
+  icon: ElementType;
+  path?: string;
+  adminOnly?: boolean;
+  children?: MenuItem[];
+};
+
+type PageSidebarDarkProps = {
+  collapsed: boolean;
+  onToggleCollapsed: () => void;
+};
+
+type SettingsSection = "account" | "appearance" | "memory" | "tools" | "about";
+
+const menuItems: MenuItem[] = [
+  {
+    id: "qa-center",
+    label: "问答中心",
+    icon: HelpCircle,
+    children: [
+      { id: "general-qa", label: "通用问答", icon: CircleHelp, path: "/page/workspace/chats/new" },
+      { id: "qa-zzjc", label: "zzjc支持", icon: Bot },
+      { id: "qa-zzxd", label: "zzXD应用", icon: Layout },
+      { id: "qa-research", label: "课题研究", icon: FileText, path: "/page/canvas/ai-writing" },
+    ],
+  },
+  {
+    id: "light-app-center",
+    label: "轻应用",
+    icon: Grid3X3,
+    children: [
+      {
+        id: "light-app-note-management",
+        label: "笔记管理",
+        icon: NotebookPen,
+        children: [
+          {
+            id: "light-app-new-note",
+            label: "新建笔记",
+            icon: Plus,
+            path: "/page/strategy/light-app/new-note",
+          },
+          {
+            id: "light-app-note-list",
+            label: "笔记列表",
+            icon: List,
+            path: "/page/strategy/light-app/notes",
+          },
+          {
+            id: "light-app-note-qa",
+            label: "笔记问答",
+            icon: MessageSquareCode,
+            path: "/page/strategy/light-app/note-qa",
+          },
+        ],
+      },
+      { id: "light-app-square", label: "应用广场", icon: Layout },
+      { id: "light-app-records", label: "运行记录", icon: History },
+    ],
+  },
+  {
+    id: "task-management",
+    label: "任务管理",
+    icon: Target,
+    children: [
+      {
+        id: "xk-center-task",
+        label: "XK中任务",
+        icon: Folder,
+        children: [
+          { id: "xk-task-jc", label: "任务JC", icon: ListTodo, path: "/page/strategy/task-management/xk-task-jc" },
+          { id: "xk-task-dispatch", label: "任务调度", icon: ListTodo, path: "/page/strategy/task-management/xk-task-dispatch" },
+        ],
+      },
+      {
+        id: "coh-center-task",
+        label: "COH中任务",
+        icon: Folder,
+        children: [
+          { id: "coh-task-3qfx", label: "3QFX", icon: ListTodo },
+          { id: "coh-task-fx", label: "任务FX", icon: ListTodo },
+          { id: "coh-task-xdfx", label: "XDFX", icon: ListTodo },
+        ],
+      },
+      {
+        id: "pg-center-task",
+        label: "PG中任务",
+        icon: Folder,
+        children: [
+          { id: "pg-task-pg", label: "任务PG", icon: ListTodo },
+          { id: "pg-task-xdpg", label: "XDPG", icon: ListTodo },
+          { id: "pg-task-info-pg", label: "信息PG", icon: ListTodo },
+        ],
+      },
+      {
+        id: "ty-center-task",
+        label: "TY中任务",
+        icon: Folder,
+        children: [
+          { id: "ty-task-xdty", label: "XDTY任务", icon: ListTodo },
+          { id: "ty-task-plan", label: "方案TY任务", icon: ListTodo },
+          { id: "ty-task-xxty", label: "XXTY任务", icon: ListTodo },
+        ],
+      },
+    ],
+  },
+  {
+    id: "comprehensive-management",
+    label: "综合管理",
+    icon: Settings,
+    children: [
+      { id: "mgmt-agents", label: "智能体管理", icon: Bot, path: "/page/strategy/agents" },
+      { id: "mgmt-skills", label: "技能管理", icon: Sparkles, path: "/page/strategy/skills" },
+      { id: "mgmt-memory", label: "记忆管理", icon: Brain, path: "/page/strategy/memory" },
+      {
+        id: "mgmt-tasks",
+        label: "任务管理",
+        icon: ListChecks,
+        path: "/page/strategy/scheduled/tasks",
+      },
+      {
+        id: "mgmt-recommended-questions",
+        label: "推荐问题配置",
+        icon: MessageSquarePlus,
+        path: "/page/strategy/settings/recommended-questions",
+        adminOnly: true,
+      },
+      {
+        id: "mgmt-prompt-prefix",
+        label: "问答前缀配置",
+        icon: MessageSquareCode,
+        path: "/page/strategy/settings/prompt-prefix",
+        adminOnly: true,
+      },
+      {
+        id: "mgmt-llm-metrics",
+        label: "大模型调用统计",
+        icon: Gauge,
+        path: "/page/strategy/settings/llm-metrics",
+        adminOnly: true,
+      },
+      {
+        id: "mgmt-users",
+        label: "用户管理",
+        icon: Users,
+        path: "/page/strategy/admin/users",
+        adminOnly: true,
+      },
+      {
+        id: "mgmt-admin-scheduled-tasks",
+        label: "定时任务管理",
+        icon: CalendarClock,
+        path: "/page/strategy/admin/scheduled-tasks",
+        adminOnly: true,
+      },
+      {
+        id: "mgmt-user-activity",
+        label: "用户活动审计",
+        icon: History,
+        path: "/page/strategy/admin/user-activity",
+        adminOnly: true,
+      },
+    ],
+  },
+  {
+    id: "resource-management",
+    label: "资源管理",
+    icon: Database,
+    children: [
+      { id: "resource-network-xwt", label: "网络xwt资源管理", icon: Network },
+      { id: "resource-knowledge-base", label: "知识库资源管理", icon: Library },
+      { id: "resource-zz", label: "ZZ资源管理", icon: FileBox },
+    ],
+  },
+];
+
+const defaultExpandedIds = new Set([
+  "qa-center",
+  "light-app-center",
+  "light-app-note-management",
+  "task-management",
+  "xk-center-task",
+]);
+
+function filterMenuItemsByRole(items: MenuItem[], isAdmin: boolean): MenuItem[] {
+  return items
+    .filter((item) => !item.adminOnly || isAdmin)
+    .map((item) =>
+      item.children
+        ? { ...item, children: filterMenuItemsByRole(item.children, isAdmin) }
+        : item,
+    );
+}
+
+export function PageSidebarDark({
+  collapsed,
+  onToggleCollapsed,
+}: PageSidebarDarkProps) {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+  const isAdmin = getStoredAuth()?.system_role === "admin";
+  const visibleMenuItems = filterMenuItemsByRole(menuItems, !!isAdmin);
+  const { t } = useI18n();
+  const { data: unreadCount = 0 } = useUnreadCount();
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(defaultExpandedIds);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [settingsDefaultSection, setSettingsDefaultSection] =
+    useState<SettingsSection>("appearance");
+  const [notificationOpen, setNotificationOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const openSettings = (section: SettingsSection) => {
+    setSettingsDefaultSection(section);
+    setSettingsOpen(true);
+  };
+
+  const toggleExpanded = (id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <>
+      <SettingsDialog
+        open={settingsOpen}
+        onOpenChange={setSettingsOpen}
+        defaultSection={settingsDefaultSection}
+      />
+      <NotificationDialog
+        open={notificationOpen}
+        onOpenChange={setNotificationOpen}
+      />
+      {/* TODO: 在这里编写深色主题的侧边栏 HTML 结构 */}
+      <div className="sidebar-contnet">
+        <div className="sidebar-contents">
+          <div className="item-nav">
+            问答管理
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/frontend-web/src/components/workspace/agents/agent-card.tsx b/frontend-web/src/components/workspace/agents/agent-card.tsx
index f00ccdc2..9d4d7d1a 100644
--- a/frontend-web/src/components/workspace/agents/agent-card.tsx
+++ b/frontend-web/src/components/workspace/agents/agent-card.tsx
@@ -42,6 +42,7 @@ import { SkillDetailDialog } from "@/components/workspace/skills/skill-detail-di
 import { TagChipList } from "@/components/workspace/tags/tag-chip";
 import { TagPickerDialog } from "@/components/workspace/tags/tag-picker-dialog";
 import {
+  useAgent,
   useDeleteAgent,
   useSetAgentFeatured,
   useSetAgentPrivate,
@@ -81,6 +82,13 @@ export function AgentCard({ agent }: AgentCardProps) {
   );
   const [detailSkillName, setDetailSkillName] = useState<string | null>(null);
 
+  // The /api/agents list response intentionally omits `soul` (perf optimization
+  // — SOUL.md is only read on demand). Fetch the detail row when the edit
+  // dialog opens so the SOUL textarea can be hydrated.
+  const { agent: agentDetail, isLoading: isAgentDetailLoading } = useAgent(
+    editOpen ? agent.id : null,
+  );
+
   const storedAuth = useMemo(() => getStoredAuth(), []);
   const currentUserId = storedAuth?.user_id ?? null;
   const isAdmin = storedAuth?.system_role === "admin";
@@ -105,7 +113,6 @@ export function AgentCard({ agent }: AgentCardProps) {
     }
     setEditName(agent.name);
     setEditDescription(agent.description ?? "");
-    setEditSoul(agent.soul ?? "");
     setEditPublished(agent.published);
     setEditIsPrivate(agent.is_private);
     setSelectedSkills(agent.skills ?? []);
@@ -115,10 +122,23 @@ export function AgentCard({ agent }: AgentCardProps) {
     agent.name,
     agent.published,
     agent.skills,
-    agent.soul,
     editOpen,
   ]);
 
+  useEffect(() => {
+    if (!editOpen) {
+      return;
+    }
+    // SOUL.md only ships on the detail endpoint; fall back to whatever the list
+    // happened to carry so older deployments (or cached objects that still
+    // include `soul`) keep working.
+    if (agentDetail) {
+      setEditSoul(agentDetail.soul ?? "");
+    } else {
+      setEditSoul(agent.soul ?? "");
+    }
+  }, [agent.soul, agentDetail, editOpen]);
+
   function handleChat() {
     router.push(`/page/workspace/agents/${agent.id}/chats/new`);
   }
@@ -563,7 +583,11 @@ export function AgentCard({ agent }: AgentCardProps) {
               <Textarea
                 value={editSoul ?? ""}
                 onChange={(e) => setEditSoul(e.target.value)}
-                placeholder="输入 SOUL.md 内容"
+                placeholder={
+                  isAgentDetailLoading && !agentDetail
+                    ? "正在加载 SOUL.md..."
+                    : "输入 SOUL.md 内容"
+                }
                 className="min-h-40 font-mono text-xs"
               />
             </div>
diff --git a/frontend-web/src/components/workspace/artifacts/context.tsx b/frontend-web/src/components/workspace/artifacts/context.tsx
index e15481af..f864d965 100644
--- a/frontend-web/src/components/workspace/artifacts/context.tsx
+++ b/frontend-web/src/components/workspace/artifacts/context.tsx
@@ -32,7 +32,10 @@ interface ArtifactsProviderProps {
 }
 
 export function ArtifactsProvider({ children }: ArtifactsProviderProps) {
-  const [artifacts, setArtifacts] = useState<string[]>([]);
+  const [artifacts, setArtifactsState] = useState<string[]>([]);
+  const setArtifacts = useCallback((next: string[]) => {
+    setArtifactsState(Array.isArray(next) ? next : []);
+  }, []);
   const [selectedArtifact, setSelectedArtifact] = useState<string | null>(null);
   const [autoSelect, setAutoSelect] = useState(true);
   const [open, setOpen] = useState(
diff --git a/frontend-web/src/components/workspace/recent-chat-list.tsx b/frontend-web/src/components/workspace/recent-chat-list.tsx
index 9624b7f4..e496da2c 100644
--- a/frontend-web/src/components/workspace/recent-chat-list.tsx
+++ b/frontend-web/src/components/workspace/recent-chat-list.tsx
@@ -163,7 +163,8 @@ export function RecentChatList() {
   const visibleThreads = threads.filter(
     (thread) =>
       thread.metadata?.thread_type !== "scheduler" &&
-      thread.metadata?.thread_type !== "bootstrap",
+      thread.metadata?.thread_type !== "bootstrap" &&
+      thread.metadata?.thread_type !== "roundtable",
   );
 
   if (visibleThreads.length === 0) {
diff --git a/frontend-web/src/pages/ChatsPage.tsx b/frontend-web/src/pages/ChatsPage.tsx
index 9be1f716..a6885c1b 100644
--- a/frontend-web/src/pages/ChatsPage.tsx
+++ b/frontend-web/src/pages/ChatsPage.tsx
@@ -34,6 +34,7 @@ export default function ChatsPage() {
     return threads?.filter((thread) => {
       return (
         thread.metadata?.thread_type !== "scheduler" &&
+        thread.metadata?.thread_type !== "roundtable" &&
         titleOfThread(thread).toLowerCase().includes(search.toLowerCase())
       );
     });
diff --git a/frontend-web/src/pages/PageRoutes.tsx b/frontend-web/src/pages/PageRoutes.tsx
index 02579600..c748e18f 100644
--- a/frontend-web/src/pages/PageRoutes.tsx
+++ b/frontend-web/src/pages/PageRoutes.tsx
@@ -2,7 +2,9 @@ import { useMemo, useState } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 
 import { PageSidebar } from "@/components/page-sidebar";
+import { PageSidebarDark } from "@/components/page-sidebar-dark";
 import { readSidebarEnabled } from "@/core/page-layout/sidebar-enabled";
+import { useTheme } from "@/contexts/ThemeContext";
 
 import WorkspaceRoutes from "./WorkspaceRoutes";
 import StrategyRoutes from "./StrategyRoutes";
@@ -13,16 +15,25 @@ import RoundtableRoutes from "./RoundtableRoutes";
 function PageLayout() {
   const [collapsed, setCollapsed] = useState(false);
   const sidebarEnabled = useMemo(() => readSidebarEnabled(), []);
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
 
   return (
     <div className="h-screen flex flex-col bg-muted/20">
       {sidebarEnabled && <Header collapsed={collapsed} />}
       <div className="flex flex-1 overflow-hidden">
         {sidebarEnabled && (
-          <PageSidebar
-            collapsed={collapsed}
-            onToggleCollapsed={() => setCollapsed((prev) => !prev)}
-          />
+          isDark ? (
+            <PageSidebarDark
+              collapsed={collapsed}
+              onToggleCollapsed={() => setCollapsed((prev) => !prev)}
+            />
+          ) : (
+            <PageSidebar
+              collapsed={collapsed}
+              onToggleCollapsed={() => setCollapsed((prev) => !prev)}
+            />
+          )
         )}
         <main
           className={`flex-1 overflow-hidden transition-[padding] duration-300 ${
diff --git a/frontend-web/src/pages/StrategyRoutes.tsx b/frontend-web/src/pages/StrategyRoutes.tsx
index a8c3ff85..d6f3be0c 100644
--- a/frontend-web/src/pages/StrategyRoutes.tsx
+++ b/frontend-web/src/pages/StrategyRoutes.tsx
@@ -28,151 +28,172 @@ import TagsPage from "./TagsPage";
 import LightAppNewNotePage from "./LightAppNewNotePage";
 import LightAppNoteListPage from "./LightAppNoteListPage";
 import LightAppNoteQAPage from "./LightAppNoteQAPage";
+import TaskXkFrom from "@/strategy-components/components/task-components/TaskXkFrom";
+import TaskManagement from "@/strategy-components/components/task-components/TaskManagement";
 
 export default function StrategyRoutes() {
   return (
     <RouteBaseProvider value="/page/strategy">
-    <SidebarProvider>
-    <div className="h-full w-full overflow-hidden">
-      <Routes>
-        <Route index element={<Navigate to="qa/general" replace />} />
+      <SidebarProvider>
+        <div className="h-full w-full overflow-hidden">
+          <Routes>
+            <Route index element={<Navigate to="qa/general" replace />} />
 
-        {/* 问答中心 */}
-        <Route path="qa/general" element={<GeneralQA />} />
+            {/* 问答中心 */}
+            <Route path="qa/general" element={<GeneralQA />} />
+            {/* 任务管理 */}
+            <Route path="task-management" element={<TaskManagement />}>
+              {/* XK任务 */}
+              <Route
+                path="xk-task-jc"
+                element={
+                  <TaskXkFrom
+                    gopath={'#/pageIndie/pageHome/pageSwrw'}
+                  />
+                }
+              />
+              <Route
+                path="xk-task-dispatch"
+                element={
+                  <TaskXkFrom
+                    gopath={'#/pageIndie/pageJczl'}
+                  />
+                }
+              />
+            </Route>
+            {/* 轻应用 */}
+            <Route path="light-app/new-note" element={<LightAppNewNotePage />} />
+            <Route path="light-app/notes" element={<LightAppNoteListPage />} />
+            <Route path="light-app/note-qa" element={<LightAppNoteQAPage />} />
 
-        {/* 轻应用 */}
-        <Route path="light-app/new-note" element={<LightAppNewNotePage />} />
-        <Route path="light-app/notes" element={<LightAppNoteListPage />} />
-        <Route path="light-app/note-qa" element={<LightAppNoteQAPage />} />
+            {/* 对话 */}
+            <Route path="chats" element={<ChatsPage />} />
+            <Route
+              path="chats/:thread_id"
+              element={
+                <ChatRuntime>
+                  <ChatPage />
+                </ChatRuntime>
+              }
+            />
 
-        {/* 对话 */}
-        <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="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="skills" element={<SkillsPage />} />
+            <Route path="skills/evolution" element={<SkillEvolutionPage />} />
+            <Route path="memory" element={<MemoryPage />} />
 
-        {/* 技能 / 记忆 */}
-        <Route path="skills" element={<SkillsPage />} />
-        <Route path="skills/evolution" element={<SkillEvolutionPage />} />
-        <Route path="memory" element={<MemoryPage />} />
+            {/* 定时任务 */}
+            <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="scheduled"
-          element={<Navigate to="/page/strategy/scheduled/tasks" replace />}
-        />
-        <Route path="scheduled/tasks" element={<ScheduledTasksPage />} />
-        <Route
-          path="scheduled/runs/:run_id"
-          element={<ScheduledTaskRunDetailPage />}
-        />
-
-        {/* 设置 / 管理 — 权限与 workspace 侧一致，非 admin 重定向到 chats/new */}
-        <Route
-          path="settings/recommended-questions"
-          element={
-            getStoredAuth()?.system_role === "admin" ? (
-              <RecommendedQuestionsPage />
-            ) : (
-              <Navigate to="/page/workspace/chats/new" replace />
-            )
-          }
-        />
-        <Route
-          path="settings/prompt-prefix"
-          element={
-            getStoredAuth()?.system_role === "admin" ? (
-              <PromptPrefixSettingsPage />
-            ) : (
-              <Navigate to="/page/workspace/chats/new" replace />
-            )
-          }
-        />
-        <Route
-          path="settings/private-square"
-          element={
-            getStoredAuth()?.system_role === "admin" ? (
-              <PrivateSquareSettingsPage />
-            ) : (
-              <Navigate to="/page/workspace/chats/new" replace />
-            )
-          }
-        />
-        <Route
-          path="settings/llm-metrics"
-          element={
-            getStoredAuth()?.system_role === "admin" ? (
-              <LlmMetricsPage />
-            ) : (
-              <Navigate to="/page/workspace/chats/new" replace />
-            )
-          }
-        />
-        <Route
-          path="admin/users"
-          element={
-            getStoredAuth()?.system_role === "admin" ? (
-              <UsersPage />
-            ) : (
-              <Navigate to="/page/workspace/chats/new" replace />
-            )
-          }
-        />
-        <Route
-          path="admin/scheduled-tasks"
-          element={
-            getStoredAuth()?.system_role === "admin" ? (
-              <AdminScheduledTasksPage />
-            ) : (
-              <Navigate to="/page/workspace/chats/new" replace />
-            )
-          }
-        />
-        <Route
-          path="admin/user-activity"
-          element={
-            getStoredAuth()?.system_role === "admin" ? (
-              <AdminUserActivityPage />
-            ) : (
-              <Navigate to="/page/workspace/chats/new" replace />
-            )
-          }
-        />
-        <Route
-          path="admin/tags"
-          element={
-            getStoredAuth()?.system_role === "admin" ? (
-              <TagsPage />
-            ) : (
-              <Navigate to="/page/workspace/chats/new" replace />
-            )
-          }
-        />
-      </Routes>
-    </div>
-    </SidebarProvider>
-    <Toaster position="top-center" />
+            {/* 设置 / 管理 — 权限与 workspace 侧一致，非 admin 重定向到 chats/new */}
+            <Route
+              path="settings/recommended-questions"
+              element={
+                getStoredAuth()?.system_role === "admin" ? (
+                  <RecommendedQuestionsPage />
+                ) : (
+                  <Navigate to="/page/workspace/chats/new" replace />
+                )
+              }
+            />
+            <Route
+              path="settings/prompt-prefix"
+              element={
+                getStoredAuth()?.system_role === "admin" ? (
+                  <PromptPrefixSettingsPage />
+                ) : (
+                  <Navigate to="/page/workspace/chats/new" replace />
+                )
+              }
+            />
+            <Route
+              path="settings/private-square"
+              element={
+                getStoredAuth()?.system_role === "admin" ? (
+                  <PrivateSquareSettingsPage />
+                ) : (
+                  <Navigate to="/page/workspace/chats/new" replace />
+                )
+              }
+            />
+            <Route
+              path="settings/llm-metrics"
+              element={
+                getStoredAuth()?.system_role === "admin" ? (
+                  <LlmMetricsPage />
+                ) : (
+                  <Navigate to="/page/workspace/chats/new" replace />
+                )
+              }
+            />
+            <Route
+              path="admin/users"
+              element={
+                getStoredAuth()?.system_role === "admin" ? (
+                  <UsersPage />
+                ) : (
+                  <Navigate to="/page/workspace/chats/new" replace />
+                )
+              }
+            />
+            <Route
+              path="admin/scheduled-tasks"
+              element={
+                getStoredAuth()?.system_role === "admin" ? (
+                  <AdminScheduledTasksPage />
+                ) : (
+                  <Navigate to="/page/workspace/chats/new" replace />
+                )
+              }
+            />
+            <Route
+              path="admin/user-activity"
+              element={
+                getStoredAuth()?.system_role === "admin" ? (
+                  <AdminUserActivityPage />
+                ) : (
+                  <Navigate to="/page/workspace/chats/new" replace />
+                )
+              }
+            />
+            <Route
+              path="admin/tags"
+              element={
+                getStoredAuth()?.system_role === "admin" ? (
+                  <TagsPage />
+                ) : (
+                  <Navigate to="/page/workspace/chats/new" replace />
+                )
+              }
+            />
+          </Routes>
+        </div>
+      </SidebarProvider>
+      <Toaster position="top-center" />
     </RouteBaseProvider>
   );
 }
diff --git a/frontend-web/src/roundtable-planning/api/recommend.ts b/frontend-web/src/roundtable-planning/api/recommend.ts
index 4ccf96bd..db73b4ed 100644
--- a/frontend-web/src/roundtable-planning/api/recommend.ts
+++ b/frontend-web/src/roundtable-planning/api/recommend.ts
@@ -27,7 +27,7 @@ export interface StreamRecommendResult {
    * `done` → picks parsed and validated, ready to populate the dialog as
    * default-checked selections.
    * `asking` → recommender failed to emit a usable [RECOMMEND_READY] block,
-   * caller should pick from the live candidate pool as fallback.
+   * caller should apply its fallback list (typically the 6 roundtable-* seats).
    * `error` → upstream / network failure.
    */
   status: "done" | "asking" | "error";
diff --git a/frontend-web/src/roundtable-planning/components/MessageBubble.tsx b/frontend-web/src/roundtable-planning/components/MessageBubble.tsx
index 92476072..6f83fc62 100644
--- a/frontend-web/src/roundtable-planning/components/MessageBubble.tsx
+++ b/frontend-web/src/roundtable-planning/components/MessageBubble.tsx
@@ -202,6 +202,8 @@ export interface ReasoningBlockProps {
   /** 用于显示「思考用时」的可选时长(秒)。流式期间不显示。 */
   durationSec?: number;
   className?: string;
+  /** 展开内容区额外 class,例如 max-h + overflow-y-auto。 */
+  contentClassName?: string;
 }
 
 const REASONING_AUTO_CLOSE_DELAY_MS = 1000;
@@ -211,6 +213,7 @@ export function ReasoningBlock({
   streaming = false,
   durationSec,
   className,
+  contentClassName,
 }: ReasoningBlockProps) {
   // open 初始值跟 streaming 同步:流式中默认展开方便观察思考过程,完成后会自动收起一次。
   const [open, setOpen] = useState<boolean>(streaming);
@@ -260,7 +263,12 @@ export function ReasoningBlock({
         />
       </button>
       {open && (
-        <div className="rounded-md border border-slate-200 bg-slate-50/60 px-3 py-2 text-[11.5px] text-slate-600 leading-relaxed">
+        <div
+          className={cn(
+            "rounded-md border border-slate-200 bg-slate-50/60 px-3 py-2 text-[11.5px] text-slate-600 leading-relaxed",
+            contentClassName,
+          )}
+        >
           <MarkdownContent>{children}</MarkdownContent>
         </div>
       )}
diff --git a/frontend-web/src/roundtable-planning/components/MessageStepsCard.tsx b/frontend-web/src/roundtable-planning/components/MessageStepsCard.tsx
index faffcc91..87f14416 100644
--- a/frontend-web/src/roundtable-planning/components/MessageStepsCard.tsx
+++ b/frontend-web/src/roundtable-planning/components/MessageStepsCard.tsx
@@ -46,6 +46,8 @@ export interface MessageStepsCardProps {
   className?: string;
   /** 点击 write_file / present_files 等产物相关步骤时打开沙箱。 */
   onArtifactStepClick?: (step: BubbleStep) => void;
+  /** 把 agent_orchestration 派活的 agent id 解析成中文席位名(用于 chip 显示)。 */
+  resolveAgentName?: (idOrName: string) => string;
 }
 
 /** 工具调用阶段的 step 才进入折叠卡;非工具步骤(connecting/streaming/tool_result)归到「思考」段。 */
@@ -58,6 +60,7 @@ export function MessageStepsCard({
   streaming,
   className,
   onArtifactStepClick,
+  resolveAgentName,
 }: MessageStepsCardProps) {
   // 把步骤拆成「工具调用」与「思考过程」两类 —— 与主聊天 MessageGroup 的 `lastToolCallStep` /
   // `lastReasoningStep` 划分对齐。
@@ -131,12 +134,14 @@ export function MessageStepsCard({
                 step={s}
                 status="complete"
                 onArtifactStepClick={onArtifactStepClick}
+                resolveAgentName={resolveAgentName}
               />
             ))}
           <ToolStep
             step={lastToolStep}
             status={streaming && trailingReasoning.length === 0 ? "active" : "complete"}
             onArtifactStepClick={onArtifactStepClick}
+            resolveAgentName={resolveAgentName}
           />
         </ChainOfThoughtContent>
       )}
@@ -155,18 +160,23 @@ function ToolStep({
   step,
   status,
   onArtifactStepClick,
+  resolveAgentName,
 }: {
   step: BubbleStep;
   status: "complete" | "active";
   onArtifactStepClick?: (step: BubbleStep) => void;
+  resolveAgentName?: (idOrName: string) => string;
 }) {
   const display = getStepDisplay(step.key, step.label, step.args);
-  const argNode = renderStepArgs(step.key, step.args);
+  const argNode = renderStepArgs(step.key, step.args, resolveAgentName);
   const [, toolName] = step.key.split(":");
+  // read_file 也可点 —— 验证类「查看文件…」步骤常出现在最后一条,点击后在沙箱里
+  // 查看该文件内容(走虚拟预览或 outputs HTTP)。主聊天只让 write 类可点,这里增强。
   const isArtifactStep =
     toolName === "write_file" ||
     toolName === "str_replace" ||
-    toolName === "present_files";
+    toolName === "present_files" ||
+    toolName === "read_file";
 
   return (
     <ChainOfThoughtStep
diff --git a/frontend-web/src/roundtable-planning/components/RecommendAgentsDialog.tsx b/frontend-web/src/roundtable-planning/components/RecommendAgentsDialog.tsx
index 73ec432a..415b48a2 100644
--- a/frontend-web/src/roundtable-planning/components/RecommendAgentsDialog.tsx
+++ b/frontend-web/src/roundtable-planning/components/RecommendAgentsDialog.tsx
@@ -62,6 +62,20 @@ export interface RecommendAgentsDialogProps {
 const MIN_SELECTED = 2;
 const MAX_SELECTED = 8;
 
+/**
+ * Default selection when the recommender fails or returns < 2 valid picks.
+ * Intersected with the live candidate pool at runtime so missing built-ins
+ * don't break the dialog.
+ */
+const FALLBACK_AGENT_IDS = [
+  "roundtable-intelligence",
+  "roundtable-environment",
+  "roundtable-solution-design",
+  "roundtable-risk-review",
+  "roundtable-execution-plan",
+  "roundtable-summary",
+];
+
 type DialogPhase =
   | "idle"
   | "loading_agents"
@@ -305,17 +319,12 @@ export function RecommendAgentsDialog({
         return;
       }
 
-      // Fallback: status === "asking" or picks too few — pick from live pool.
-      const seed = candidates.slice(0, MIN_SELECTED).map((c) => c.agent_id);
-      if (seed.length < MIN_SELECTED) {
-        setState((prev) => ({
-          ...prev,
-          phase: "error",
-          streamPhase: null,
-          errorMessage: `候选智能体不足 ${MIN_SELECTED} 个,无法进入圆桌研讨。请先发布更多智能体。`,
-        }));
-        return;
-      }
+      // Fallback: status === "asking" or picks too few. Use the 6 built-in
+      // roundtable seats, intersected against the live pool.
+      const fallback = intersectInOrder(FALLBACK_AGENT_IDS, candidates);
+      const seed = fallback.length >= MIN_SELECTED
+        ? fallback
+        : candidates.slice(0, MIN_SELECTED).map((c) => c.agent_id);
       setSelectedIds(new Set(seed));
       const { rationale } = parseRecommendStreamContent(result.content || "");
       setState((prev) => ({
@@ -325,7 +334,7 @@ export function RecommendAgentsDialog({
         recommendedIds: seed,
         reasons,
         streamPhase: null,
-        warning: "智能推荐未生成有效结果,已为你勾选候选池中的前几位智能体,可手动调整。",
+        warning: "智能推荐未生成有效结果,已为你勾选默认的圆桌席位,可手动调整。",
       }));
     } catch (err) {
       if (myGen !== generationRef.current) return;
@@ -421,8 +430,8 @@ export function RecommendAgentsDialog({
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="sm:max-w-3xl max-h-[85vh] flex flex-col">
-        <DialogHeader>
+      <DialogContent className="sm:max-w-3xl max-h-[85vh] flex flex-col overflow-hidden gap-3">
+        <DialogHeader className="shrink-0">
           <DialogTitle className="flex items-center gap-2">
             <SparklesIcon className="size-5 text-purple-500" />
             选择参会智能体
@@ -457,7 +466,7 @@ export function RecommendAgentsDialog({
             <CheckIcon className="size-3 text-emerald-500" />
             推荐参会智能体
           </div>
-          <div className="flex-1 min-h-0 overflow-y-auto pr-1 -mr-1 space-y-4">
+          <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar pr-1 -mr-1 space-y-4">
           {state.phase === "error" ? (
             <div className="text-sm text-destructive p-4 border border-destructive/30 rounded-md bg-destructive/5">
               {state.errorMessage ?? "未知错误"}
@@ -527,7 +536,7 @@ export function RecommendAgentsDialog({
           </div>
         </section>
 
-        <DialogFooter className="flex-row sm:justify-between items-center gap-2 flex-wrap">
+        <DialogFooter className="shrink-0 flex-row sm:justify-between items-center gap-2 flex-wrap border-t pt-3 mt-1">
           <div className="flex items-center gap-3 text-xs">
             <span
               className={cn(
@@ -635,14 +644,14 @@ function CollapsibleModelOutput({
   })();
 
   return (
-    <section className="border rounded-md bg-muted/20 shrink-0">
+    <section className="border rounded-md bg-muted/20 shrink-0 max-h-[38vh] flex flex-col min-h-0 overflow-hidden">
       <button
         type="button"
         onClick={() => {
           userTouchedRef.current = true;
           setOpen((v) => !v);
         }}
-        className="w-full flex items-center gap-2 px-3 py-2 text-[10px] font-bold text-slate-500 uppercase tracking-wider hover:bg-muted/40 transition-colors cursor-pointer"
+        className="w-full shrink-0 flex items-center gap-2 px-3 py-2 text-[10px] font-bold text-slate-500 uppercase tracking-wider hover:bg-muted/40 transition-colors cursor-pointer"
       >
         {isLoading ? (
           <Loader2Icon className="size-3 text-purple-500 shrink-0 animate-spin" />
@@ -667,7 +676,11 @@ function CollapsibleModelOutput({
           )}
         />
       </button>
-      {open && <div className="px-3 pb-3">{children}</div>}
+      {open && (
+        <div className="px-3 pb-3 min-h-0 flex-1 overflow-y-auto custom-scrollbar">
+          {children}
+        </div>
+      )}
     </section>
   );
 }
@@ -736,7 +749,12 @@ function RecommenderOutput({ state }: { state: InternalState }) {
       )}
 
       {hasReasoning && (
-        <ReasoningBlock streaming={isStreaming}>{reasoning!}</ReasoningBlock>
+        <ReasoningBlock
+          streaming={isStreaming}
+          contentClassName="max-h-48 overflow-y-auto custom-scrollbar"
+        >
+          {reasoning!}
+        </ReasoningBlock>
       )}
 
       {!hasRationale && !hasReasoning && isStreaming && (
@@ -744,7 +762,7 @@ function RecommenderOutput({ state }: { state: InternalState }) {
       )}
 
       {hasRationale && (
-        <div className="max-h-72 overflow-y-auto rounded-md border border-slate-200 bg-white px-3 py-2.5 text-sm text-slate-700 leading-relaxed">
+        <div className="max-h-40 overflow-y-auto custom-scrollbar rounded-md border border-slate-200 bg-white px-3 py-2.5 text-sm text-slate-700 leading-relaxed">
           <MarkdownContent>{cleanedRationale}</MarkdownContent>
           {isStreaming && <StreamingCursor />}
         </div>
diff --git a/frontend-web/src/roundtable-planning/components/Step1Panel.tsx b/frontend-web/src/roundtable-planning/components/Step1Panel.tsx
index 3dd6f1de..6184e20d 100644
--- a/frontend-web/src/roundtable-planning/components/Step1Panel.tsx
+++ b/frontend-web/src/roundtable-planning/components/Step1Panel.tsx
@@ -353,7 +353,13 @@ function Step1Message({
         <div className="text-xs text-slate-700 leading-relaxed font-medium break-words space-y-2 roundtable-md">
           {introText && <MarkdownContent>{introText}</MarkdownContent>}
           {parts.summary && <IntentReadySummaryCard summary={parts.summary} />}
-          {parts.after && <MarkdownContent>{parts.after}</MarkdownContent>}
+          {/*
+            parts.after 是模型违反 SOUL §0「硬规则 3」在 [INTENT_READY] 块后
+            继续输出的内容(典型:"那么我先帮你列一下大纲……")。后端 intent.py
+            的终态帧已经把 content 截断到 marker 结尾,但流式期间 LangGraph
+            messages-tuple 还是会把那段废话逐 token 推过来——故意在 UI 层
+            把它丢弃,让用户看到的就是"复述 + 摘要卡",干净结束。
+          */}
           {isStreaming && <StreamingCursor />}
           {isPendingClarification && clarification && (
             <IntentClarificationCard
diff --git a/frontend-web/src/roundtable-planning/components/Step2Panel.tsx b/frontend-web/src/roundtable-planning/components/Step2Panel.tsx
index b534d929..697dd732 100644
--- a/frontend-web/src/roundtable-planning/components/Step2Panel.tsx
+++ b/frontend-web/src/roundtable-planning/components/Step2Panel.tsx
@@ -15,7 +15,7 @@
  *
  * 状态全部来自 `useStep2Orchestration` —— 本组件不调任何后端、不持久化。
  */
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import {
   Cpu,
   FileIcon,
@@ -67,6 +67,11 @@ export interface Step2PanelProps {
   agentConfigs: Record<number, AgentConfig>;
   selectedAgentId: number | null;
   roles: RoleEntry[];
+  /** agent id(小写)→ 席位元数据,用于把派活 chip 的 id 显示成中文席位名。 */
+  agentNameToRole: Record<
+    string,
+    { speakerId: number; avatarType: string; displayName: string }
+  >;
   selectedModel: string;
   availableModels: ModelOption[];
   modelsLoading: boolean;
@@ -89,7 +94,7 @@ export interface Step2PanelProps {
   // ─── Handlers ─────────────────────────────────────────────────
   onPauseRoundtable: () => void;
   onResumeRoundtable: () => void;
-  onRecordInjectMessage: () => void;
+  onHandleInjectToRoundtable: () => void;
   onSubmitClarification: (answer: string) => void;
   onSavePersona: (id: number) => void;
   onProceedToStep3: () => void;
@@ -109,6 +114,7 @@ export function Step2Panel(props: Step2PanelProps) {
     agentConfigs,
     selectedAgentId,
     roles,
+    agentNameToRole,
     selectedModel,
     availableModels,
     modelsLoading,
@@ -123,7 +129,7 @@ export function Step2Panel(props: Step2PanelProps) {
     setSelectedAgentId,
     onPauseRoundtable,
     onResumeRoundtable,
-    onRecordInjectMessage,
+    onHandleInjectToRoundtable,
     onSubmitClarification,
     onSavePersona,
     onProceedToStep3,
@@ -134,24 +140,20 @@ export function Step2Panel(props: Step2PanelProps) {
   const { atBottom: step2AtBottom, scrollToBottom: scrollStep2ToBottom } =
     useAutoScroll(step2ScrollRef, [step2RoundtableDialogues]);
 
-  // 干预研审 → 暂停会商:与右上角按钮共用 onPauseRoundtable;乐观 UI 避免等父 state 刷新。
-  const [pauseFlash, setPauseFlash] = useState(false);
-  const [optimisticPaused, setOptimisticPaused] = useState(false);
-  const showPausedUi = !isRoundTableRunning || optimisticPaused;
+  const resolveAgentName = useCallback(
+    (idOrName: string) =>
+      agentNameToRole[idOrName.toLowerCase()]?.displayName ?? idOrName,
+    [agentNameToRole],
+  );
 
-  useEffect(() => {
-    if (!isRoundTableRunning) {
-      setOptimisticPaused(false);
-    }
-  }, [isRoundTableRunning]);
+  // 干预研审:记录指令并自动恢复会商,右上角按钮状态由 isRoundTableRunning 驱动
+  const [pauseFlash, setPauseFlash] = useState(false);
 
   const handleInject = useCallback(() => {
-    setOptimisticPaused(true);
-    onPauseRoundtable();
-    onRecordInjectMessage();
+    onHandleInjectToRoundtable();
     setPauseFlash(true);
     window.setTimeout(() => setPauseFlash(false), 1600);
-  }, [onPauseRoundtable, onRecordInjectMessage]);
+  }, [onHandleInjectToRoundtable]);
 
   const isSandboxStreaming =
     isOrchestrating ||
@@ -196,7 +198,7 @@ export function Step2Panel(props: Step2PanelProps) {
               </option>
             ))}
           </select>
-          {showPausedUi ? (
+          {!isRoundTableRunning ? (
             <button
               type="button"
               onClick={onResumeRoundtable}
@@ -255,6 +257,7 @@ export function Step2Panel(props: Step2PanelProps) {
             <Step2Message
               key={msg.id}
               msg={msg}
+              resolveAgentName={resolveAgentName}
               onArtifactStepClick={(step) => openArtifactFromStep(msg, step)}
               onFileCardClick={(path) => {
                 if (msg.agentThreadId) {
@@ -354,10 +357,10 @@ export function Step2Panel(props: Step2PanelProps) {
         <button
           type="button"
           onClick={handleInject}
-          title="暂停会商并记录干预指令;点击右上角「恢复会商」继续执行"
+          title="记录干预指令并立即恢复会商执行"
           className="bg-primary hover:bg-[var(--brand-900)] text-white text-xs font-bold px-4 py-2.5 rounded-xl transition shrink-0 cursor-pointer active:scale-95 shadow-md shadow-primary/10"
         >
-          干预研审
+          干预并发送
         </button>
 
         <div className="h-6 w-[1px] bg-slate-200 shrink-0" />
@@ -406,6 +409,8 @@ export function Step2Panel(props: Step2PanelProps) {
  */
 interface Step2MessageProps {
   msg: Step2Dialogue;
+  /** 把派活 chip 的 agent id 解析成中文席位名。 */
+  resolveAgentName?: (idOrName: string) => string;
   onArtifactStepClick?: (
     step: NonNullable<Step2Dialogue["steps"]>[number],
   ) => void;
@@ -415,6 +420,7 @@ interface Step2MessageProps {
 
 function Step2Message({
   msg,
+  resolveAgentName,
   onArtifactStepClick,
   onFileCardClick,
 }: Step2MessageProps) {
@@ -445,6 +451,7 @@ function Step2Message({
           steps={msg.steps}
           streaming={isStreaming}
           onArtifactStepClick={onArtifactStepClick}
+          resolveAgentName={resolveAgentName}
         />
       )}
       {reasoning && (
@@ -469,8 +476,13 @@ function Step2Message({
 }
 
 /**
- * 扫描所有 `tool_calling:present_files` 步骤里的 `filepaths`,按出现顺序去重。
- * 同一气泡可能多次 present_files(总控分批交付),都聚合到一行卡片里。
+ * 收集气泡里所有"写了文件"的产出路径,按出现顺序去重,聚合到一行文件卡片。
+ *
+ * 三类来源都算:
+ *  - `present_files`:总控呈现文件,args.filepaths 是数组(可一次多个);
+ *  - `write_file` / `str_replace`:子智能体被后端 excluded_tools 禁用了 present_files,
+ *    只能 write_file 写文件,单文件 path 在 args.path —— 也聚合进卡片,保证"凡是写了
+ *    文件就出可点的卡片",而不是只有 present_files 才出。
  */
 function collectPresentedFiles(
   steps: Step2Dialogue["steps"],
@@ -478,14 +490,22 @@ function collectPresentedFiles(
   if (!Array.isArray(steps) || steps.length === 0) return [];
   const out: string[] = [];
   const seen = new Set<string>();
+  const add = (fp: unknown) => {
+    if (typeof fp !== "string" || !fp || seen.has(fp)) return;
+    seen.add(fp);
+    out.push(fp);
+  };
   for (const step of steps) {
-    if (step.key !== "tool_calling:present_files") continue;
-    const fps = step.args?.filepaths;
-    if (!Array.isArray(fps)) continue;
-    for (const fp of fps) {
-      if (typeof fp !== "string" || !fp || seen.has(fp)) continue;
-      seen.add(fp);
-      out.push(fp);
+    if (step.key === "tool_calling:present_files") {
+      const fps = step.args?.filepaths;
+      if (Array.isArray(fps)) fps.forEach(add);
+      continue;
+    }
+    if (
+      step.key === "tool_calling:write_file" ||
+      step.key === "tool_calling:str_replace"
+    ) {
+      add(step.args?.path);
     }
   }
   return out;
diff --git a/frontend-web/src/roundtable-planning/components/Step2SandboxLayout.tsx b/frontend-web/src/roundtable-planning/components/Step2SandboxLayout.tsx
index 5998cbf6..3b33d59e 100644
--- a/frontend-web/src/roundtable-planning/components/Step2SandboxLayout.tsx
+++ b/frontend-web/src/roundtable-planning/components/Step2SandboxLayout.tsx
@@ -50,11 +50,12 @@ export function Step2SandboxLayout({
 }: Step2SandboxLayoutProps) {
   const layoutRef = useRef<GroupImperativeHandle>(null);
   const {
-    artifacts,
+    artifacts: rawArtifacts,
     open: artifactsOpen,
     setOpen: setArtifactsOpen,
     selectedArtifact,
   } = useArtifacts();
+  const artifacts = rawArtifacts ?? [];
 
   const artifactPanelOpen = artifactsOpen;
 
diff --git a/frontend-web/src/roundtable-planning/hooks/useStep2Orchestration.ts b/frontend-web/src/roundtable-planning/hooks/useStep2Orchestration.ts
index dcc0b717..0a20610d 100644
--- a/frontend-web/src/roundtable-planning/hooks/useStep2Orchestration.ts
+++ b/frontend-web/src/roundtable-planning/hooks/useStep2Orchestration.ts
@@ -26,6 +26,7 @@ import {
   type ThreadIdMap,
 } from "@/roundtable-planning/api/multi-agent";
 import {
+  DEFAULT_SELECTED_AGENTS,
   MAX_CYCLES,
   buildAgentNameToRole,
   buildRoleTemplates,
@@ -98,8 +99,18 @@ export type Step2Snapshot = {
   seatStubMessages: Record<string, StubAiMessage[]>;
 };
 
-/** 席位 Persona 配置;初始为空,用户在 Persona 抽屉保存后写入。 */
-const DEFAULT_AGENT_CONFIGS: Record<number, AgentConfig> = {};
+/**
+ * 6 个默认席位的初始 Persona 配置。model 留空 → 运行时 `agentConfigs[seat]?.model
+ * || selectedModel || undefined`,即「席位覆盖优先,否则跟随全局模型」。
+ */
+const DEFAULT_AGENT_CONFIGS: Record<number, AgentConfig> = {
+  2: { model: "", weight: 90, temp: 0.2, prompt: "你负责解析核心任务、资源极限和用户目标偏好，监督全局研商收敛。" },
+  3: { model: "", weight: 85, temp: 0.3, prompt: "你负责搜集电力、通信系统、历史极端部署条件情报，支持备灾架构体系。" },
+  4: { model: "", weight: 88, temp: 0.1, prompt: "你评估服务器机房热载荷、算力并发承载极限，预报运行瓶颈与风险时钟。" },
+  5: { model: "", weight: 92, temp: 0.4, prompt: "你负责双全栈主备建模设计，高内聚低耦合，规避不可预知停机崩溃。" },
+  6: { model: "", weight: 95, temp: 0.1, prompt: "你作为安全主管，严厉把控预算开销与合规通过率防线，识别计划漏洞。" },
+  7: { model: "", weight: 80, temp: 0.4, prompt: "你负责对72小时里程碑执行路径规划、重排和资源调配演练序列。" },
+};
 
 export interface UseStep2OrchestrationOptions {
   /** 当前页面 currentStep,===2 触发自动 init。 */
@@ -164,11 +175,11 @@ export interface UseStep2OrchestrationReturn {
   pauseRoundtable: () => void;
   /** 与 Step2Panel「恢复会商」按钮相同 —— 恢复自动研讨(含待处理的干预指令)。 */
   resumeRoundtable: () => void;
-  /** 记录干预指令(不暂停);通常由 Step2Panel 在 pauseRoundtable 之后调用。 */
+  /** 记录干预指令(不暂停不恢复);通常由 Step2Panel 在 pauseRoundtable 之后调用。 */
   recordInjectMessage: () => void;
   /** 中断所有 in-flight SSE(给新建任务 / 加载草稿用)。 */
   abortAllInFlight: () => void;
-  /** @deprecated 请用 pauseRoundtable + recordInjectMessage;保留兼容组合调用。 */
+  /** 一键干预:记录指令 + 自动恢复会商 + 触发新一轮编排(替代 pause + record + resume 组合)。 */
   handleInjectToRoundtable: () => void;
   /** 总控澄清回复 —— 把回答拼到 prompt 里再起一轮编排。 */
   submitClarification: (rawAnswer: string) => void;
@@ -223,7 +234,7 @@ export function useStep2Orchestration(
   } = useArtifacts();
   const artifactPathsRef = useRef<string[]>([]);
   useEffect(() => {
-    artifactPathsRef.current = artifacts;
+    artifactPathsRef.current = artifacts ?? [];
   }, [artifacts]);
   // 用户手动关掉沙箱后,autoOpen 会被 ArtifactsProvider 置 false —— 把它们打到 ref
   // 上,让 openSeatVirtualArtifact 不用进 useCallback deps,避免每次 toggle 重建函数。
@@ -242,7 +253,9 @@ export function useStep2Orchestration(
     Record<string, StubAiMessage[]>
   >({});
   const seatStubMessagesRef = useRef<Record<string, StubAiMessage[]>>({});
-  const [selectedAgents, setSelectedAgents] = useState<SelectedAgent[]>([]);
+  const [selectedAgents, setSelectedAgents] = useState<SelectedAgent[]>(
+    DEFAULT_SELECTED_AGENTS,
+  );
   const [threadIds, setThreadIds] = useState<ThreadIdMap | null>(null);
   const [coordinatorName, setCoordinatorName] = useState<string | null>(null);
   const [isInitializing, setIsInitializing] = useState<boolean>(false);
@@ -421,6 +434,51 @@ export function useStep2Orchestration(
     [],
   );
 
+  /**
+   * 反查某个产出文件是由哪个席位 thread 写入的。
+   *
+   * 总控(coordinator)常用 `present_files` 呈现「子智能体写的文件」,但文件物理上落在
+   * 子席位 thread 的 outputs 里,coordinator thread 并没有 —— 直接拿总控气泡的
+   * `agentThreadId`(=coordinator thread)走 HTTP 拉会 404(`Thread ... not found`)。
+   * 流式期间子席位 write_file 时,内容已缓存进 seatStubMessages(key=真实写入 thread)。
+   * 这里按 path 反查那条 stub,让关闭沙箱后再点文件卡也能复用虚拟预览(内存内容,
+   * 与流式期间体验一致,且不依赖后端 thread 是否仍可访问)。
+   */
+  const findSeatArtifactSource = useCallback(
+    (
+      rawPath: string,
+    ): { seatThreadId: string; messageId: string; toolCallId: string } | null => {
+      const target = rawPath.trim();
+      if (!target) return null;
+      const targetBase = target.split("/").pop() ?? target;
+      let basenameMatch:
+        | { seatThreadId: string; messageId: string; toolCallId: string }
+        | null = null;
+      for (const [seatThreadId, msgs] of Object.entries(
+        seatStubMessagesRef.current,
+      )) {
+        const msg = msgs?.[0];
+        if (!msg) continue;
+        for (const tc of msg.tool_calls) {
+          if (tc.name !== "write_file" && tc.name !== "str_replace") continue;
+          const p =
+            typeof (tc.args as { path?: unknown })?.path === "string"
+              ? ((tc.args as { path?: string }).path as string)
+              : "";
+          if (!p) continue;
+          if (p === target) {
+            return { seatThreadId, messageId: msg.id, toolCallId: tc.id };
+          }
+          if (!basenameMatch && (p.split("/").pop() ?? p) === targetBase) {
+            basenameMatch = { seatThreadId, messageId: msg.id, toolCallId: tc.id };
+          }
+        }
+      }
+      return basenameMatch;
+    },
+    [],
+  );
+
   /**
    * `openArtifactPreview` —— 走真实路径(present_files 等已落盘场景),走 HTTP API 加载。
    * 沙箱 write_file 实时预览请用 `openSeatVirtualArtifact`。
@@ -428,7 +486,27 @@ export function useStep2Orchestration(
   const openArtifactPreview = useCallback(
     (threadId: string, path: string, options?: { auto?: boolean }) => {
       const normalized = path.trim();
-      if (!normalized || !threadId) return;
+      if (!normalized) return;
+
+      // present_files 呈现的文件多半是子智能体 write_file 写入的:真实内容/thread 在 stub 里。
+      // 先反查 stub 走虚拟预览(内存内容)—— 关闭沙箱后再点文件卡也能显示,且不受
+      // 总控 coordinator thread 在后端 artifacts 路由下 not found 的影响。
+      const seatSource = findSeatArtifactSource(normalized);
+      if (seatSource) {
+        const virtualUrl = buildWriteFileVirtualUrl(
+          normalized,
+          seatSource.messageId,
+          seatSource.toolCallId,
+        );
+        openSeatVirtualArtifact(
+          seatSource.seatThreadId,
+          virtualUrl,
+          options?.auto ?? false,
+        );
+        return;
+      }
+
+      if (!threadId) return;
 
       setActiveArtifactThreadId(threadId);
       const prev = artifactPathsRef.current;
@@ -449,7 +527,14 @@ export function useStep2Orchestration(
         openPanel();
       }
     },
-    [selectArtifact, setArtifacts, setArtifactsOpen],
+    [
+      findSeatArtifactSource,
+      buildWriteFileVirtualUrl,
+      openSeatVirtualArtifact,
+      selectArtifact,
+      setArtifacts,
+      setArtifactsOpen,
+    ],
   );
 
   const openArtifactFromStep = useCallback(
@@ -472,6 +557,16 @@ export function useStep2Orchestration(
         openSeatVirtualArtifact(seatThreadId, virtualUrl, false);
         return;
       }
+      if (toolName === "read_file") {
+        // 验证类「查看文件…」步骤:用 args.path 在沙箱预览该文件。
+        // openArtifactPreview 内部 findSeatArtifactSource 优先按 path 命中流式期间
+        // write_file 缓存的内容(虚拟预览);未命中再走 seat thread 的 outputs HTTP。
+        const path = step.args?.path;
+        if (typeof path === "string" && path) {
+          openArtifactPreview(seatThreadId, path);
+        }
+        return;
+      }
       if (toolName === "present_files") {
         const filepaths = step.args?.filepaths;
         if (Array.isArray(filepaths)) {
@@ -1166,13 +1261,41 @@ export function useStep2Orchestration(
       confidence: "最高指令",
     });
     pendingInjectPromptRef.current = `用户人工干预新指令:${userText}\n\n请结合当前讨论状态,决定是否继续派活或直接给出更新后的结论。`;
-    triggerToast("干预指令已记录,点击「恢复会商」后执行");
+    triggerToast("干预指令已记录,会商已自动恢复执行");
   }, [appendDialogue, customAgentInput, triggerToast]);
 
   const handleInjectToRoundtable = useCallback(() => {
-    pauseRoundtable();
-    recordInjectMessage();
-  }, [pauseRoundtable, recordInjectMessage]);
+    const userText = customAgentInput.trim();
+    if (!userText) return;
+    if (!threadIdsRef.current || !coordinatorNameRef.current) {
+      triggerToast("⚠️ 圆桌尚未就绪,无法记录干预指令");
+      return;
+    }
+
+    // 中止当前编排（如有）
+    orchestrationCancelRef.current = true;
+    abortAllInFlight();
+    // 强制标记非编排中,使后续 runOrchestration 可立即启动
+    isOrchestratingRef.current = false;
+    setIsOrchestrating(false);
+
+    setCustomAgentInput("");
+    appendDialogue({
+      sender: "用户 (插话干预)",
+      avatarType: "human",
+      content: `💡 (人工指令介入) ${userText}`,
+      confidence: "最高指令",
+    });
+
+    const prompt = `用户人工干预新指令:${userText}\n\n请结合当前讨论状态,决定是否继续派活或直接给出更新后的结论。`;
+
+    // 确保处于运行状态（同步更新按钮 UI）
+    setIsRoundTableRunning(true);
+    triggerToast("干预指令已发送,会商继续执行");
+
+    // 直接启动新一轮编排
+    void runOrchestration(prompt, threadIdsRef.current, coordinatorNameRef.current);
+  }, [customAgentInput, appendDialogue, abortAllInFlight, runOrchestration, triggerToast]);
 
   const submitClarification = useCallback(
     (rawAnswer: string) => {
diff --git a/frontend-web/src/roundtable-planning/lib/roundtable-constants.ts b/frontend-web/src/roundtable-planning/lib/roundtable-constants.ts
index 7d860806..1b5d76f4 100644
--- a/frontend-web/src/roundtable-planning/lib/roundtable-constants.ts
+++ b/frontend-web/src/roundtable-planning/lib/roundtable-constants.ts
@@ -24,7 +24,23 @@ export type RoleEntry = {
 /** 用户在推荐弹窗选定的一个研讨席位。 */
 export type SelectedAgent = { agent_id: string; name: string };
 
-/** 研讨席位的头像配色轮换池。 */
+/**
+ * 6 个内置 roundtable 席位的展示元数据。用户保留默认席位时,
+ * 头像 / 配色 / 中文显示名都按这里走;非内置（用户自建）走 FALLBACK_AVATAR_TYPES。
+ */
+export const BUILTIN_AGENT_META: Record<
+  string,
+  { avatarType: string; displayName: string }
+> = {
+  "roundtable-intelligence": { avatarType: "purple", displayName: "情报收集" },
+  "roundtable-environment": { avatarType: "emerald", displayName: "环境评估" },
+  "roundtable-solution-design": { avatarType: "human", displayName: "方案设计" },
+  "roundtable-risk-review": { avatarType: "amber", displayName: "风险审查" },
+  "roundtable-execution-plan": { avatarType: "pink", displayName: "执行规划" },
+  "roundtable-summary": { avatarType: "blue", displayName: "总结陈述" },
+};
+
+/** 非内置 agent 的头像配色轮换池。 */
 export const FALLBACK_AVATAR_TYPES = [
   "blue",
   "purple",
@@ -33,12 +49,28 @@ export const FALLBACK_AVATAR_TYPES = [
   "pink",
 ] as const;
 
-export function getAvatarTypeFor(_agentId: string, index: number): string {
-  return FALLBACK_AVATAR_TYPES[index % FALLBACK_AVATAR_TYPES.length];
+/**
+ * 用户未确认推荐弹窗时,Step 2 默认使用的 6 个内置席位。
+ * 保留默认时页面与原硬编码行为完全一致。
+ */
+export const DEFAULT_SELECTED_AGENTS: SelectedAgent[] = [
+  { agent_id: "roundtable-summary", name: "总结陈述" },
+  { agent_id: "roundtable-intelligence", name: "情报收集" },
+  { agent_id: "roundtable-environment", name: "环境评估" },
+  { agent_id: "roundtable-solution-design", name: "方案设计" },
+  { agent_id: "roundtable-risk-review", name: "风险审查" },
+  { agent_id: "roundtable-execution-plan", name: "执行规划" },
+];
+
+export function getAvatarTypeFor(agentId: string, index: number): string {
+  return (
+    BUILTIN_AGENT_META[agentId]?.avatarType ??
+    FALLBACK_AVATAR_TYPES[index % FALLBACK_AVATAR_TYPES.length]
+  );
 }
 
 export function getDisplayNameFor(agent: SelectedAgent): string {
-  return agent.name;
+  return BUILTIN_AGENT_META[agent.agent_id]?.displayName ?? agent.name;
 }
 
 /**
@@ -103,14 +135,187 @@ export function newCoordinatorName(): string {
 }
 
 /**
- * 后端 intent agent 输出的 `[INTENT_READY]\n\`\`\`json {...}\`\`\`` 块。
- * 前端用同样形状的正则把摘要从对话气泡里抽出来,渲染成绿色摘要卡片。
+ * 后端 intent agent 输出的**标准** `[INTENT_READY]\n\`\`\`json {...}\`\`\`` 块形状。
+ * 仅作格式参考 / 快速匹配用;实际从气泡正文里抽摘要走 `splitIntentReadyBlock` 的
+ * 容错提取(marker 定位 + 括号配对 + 多级降级 parse),不再依赖这条严格正则。
  */
 export const INTENT_READY_RE = /\[INTENT_READY\]\s*```json\s*(\{[\s\S]*?\})\s*```/;
 
+/**
+ * 把 JSON 文本里**字符串值内部**的字面控制字符(换行 / 回车 / 制表符)转义成合法的
+ * `\n` / `\r` / `\t`。模型偶尔会在 summary 的字符串值里直接敲换行,产出的 JSON 不合法,
+ * `JSON.parse` 会抛 `Bad control character in string literal`。这里只在字符串内替换,
+ * 不动结构性空白,避免破坏本来就合法的 JSON。
+ */
+function sanitizeJsonControlChars(raw: string): string {
+  let out = "";
+  let inString = false;
+  let escaped = false;
+  for (const ch of raw) {
+    if (escaped) {
+      out += ch;
+      escaped = false;
+      continue;
+    }
+    if (ch === "\\") {
+      out += ch;
+      escaped = true;
+      continue;
+    }
+    if (ch === '"') {
+      inString = !inString;
+      out += ch;
+      continue;
+    }
+    if (inString) {
+      if (ch === "\n") {
+        out += "\\n";
+        continue;
+      }
+      if (ch === "\r") {
+        out += "\\r";
+        continue;
+      }
+      if (ch === "\t") {
+        out += "\\t";
+        continue;
+      }
+    }
+    out += ch;
+  }
+  return out;
+}
+
+/**
+ * 从 `fromIndex` 起找第一个 `{`,按花括号配对(跳过字符串内部的括号)找到匹配的 `}`,
+ * 返回 JSON 子串及其在原文里的起止下标。
+ *
+ * 比 `\{[\s\S]*?\}` 这种正则更抗模型跑偏:容忍 JSON 内嵌套对象、字符串里的裸换行 /
+ * 花括号,以及模型漏写 ```json 代码围栏(直接 `[INTENT_READY] {...}`)的情况。
+ */
+function extractBalancedJson(
+  text: string,
+  fromIndex: number,
+): { json: string; end: number } | null {
+  const start = text.indexOf("{", fromIndex);
+  if (start < 0) return null;
+  let depth = 0;
+  let inString = false;
+  let escaped = false;
+  for (let i = start; i < text.length; i += 1) {
+    const ch = text[i];
+    if (escaped) {
+      escaped = false;
+      continue;
+    }
+    if (ch === "\\") {
+      escaped = true;
+      continue;
+    }
+    if (ch === '"') {
+      inString = !inString;
+      continue;
+    }
+    if (inString) continue;
+    if (ch === "{") depth += 1;
+    else if (ch === "}") {
+      depth -= 1;
+      if (depth === 0) return { json: text.slice(start, i + 1), end: i + 1 };
+    }
+  }
+  return null; // 括号未闭合(流式中段 / 模型截断)
+}
+
+/** 去掉对象 / 数组里 `}` `]` 之前的尾随逗号(只在字符串外处理)。 */
+function stripTrailingCommas(raw: string): string {
+  let out = "";
+  let inString = false;
+  let escaped = false;
+  for (let i = 0; i < raw.length; i += 1) {
+    const ch = raw[i];
+    if (escaped) {
+      out += ch;
+      escaped = false;
+      continue;
+    }
+    if (ch === "\\") {
+      out += ch;
+      escaped = true;
+      continue;
+    }
+    if (ch === '"') {
+      inString = !inString;
+      out += ch;
+      continue;
+    }
+    if (!inString && ch === ",") {
+      let j = i + 1;
+      while (j < raw.length && /\s/.test(raw[j])) j += 1;
+      if (raw[j] === "}" || raw[j] === "]") continue; // 丢弃尾随逗号
+    }
+    out += ch;
+  }
+  return out;
+}
+
+/** 把任意值归一成 string[]:数组逐项转字符串、单个字符串包成单元素、其它视为空。 */
+function toStringArray(value: unknown): string[] {
+  if (Array.isArray(value)) {
+    return value
+      .map((x) => (typeof x === "string" ? x : x == null ? "" : String(x)))
+      .filter((x) => x.trim().length > 0);
+  }
+  if (typeof value === "string" && value.trim().length > 0) return [value];
+  return [];
+}
+
+/**
+ * 把解析出的对象归一成 IntentSummary。只要 `objective` 是非空字符串就认。
+ * constraints / assumptions 容忍模型写成字符串 / null / 缺失,统一归到 string[]。
+ */
+function normalizeIntentSummary(parsed: unknown): IntentSummary | null {
+  if (!parsed || typeof parsed !== "object") return null;
+  const obj = parsed as Record<string, unknown>;
+  const objective =
+    typeof obj.objective === "string" ? obj.objective.trim() : "";
+  if (!objective) return null;
+  return {
+    objective,
+    constraints: toStringArray(obj.constraints),
+    assumptions: toStringArray(obj.assumptions),
+  };
+}
+
+/**
+ * 解析 INTENT_READY 的 JSON 块。内网模型输出不可控,这里逐级降级重试:
+ *   1) 原文直接 parse
+ *   2) 转义字符串内的裸控制字符(换行 / 制表符)后再 parse
+ *   3) 再去掉尾随逗号后 parse
+ * 三次都失败才放弃。任一成功都过 `normalizeIntentSummary` 兜字段类型。
+ */
+function parseIntentSummary(raw: string): IntentSummary | null {
+  const sanitized = sanitizeJsonControlChars(raw);
+  const candidates = [raw, sanitized, stripTrailingCommas(sanitized)];
+  for (const candidate of candidates) {
+    try {
+      const summary = normalizeIntentSummary(JSON.parse(candidate));
+      if (summary) return summary;
+    } catch {
+      // 下一个候选
+    }
+  }
+  return null;
+}
+
+const INTENT_READY_MARKER_RE = /\[INTENT_READY\]/i;
+
 /**
  * 把含 [INTENT_READY] 标记的气泡正文拆成前 / 摘要 / 后三段。
  * 摘要 JSON 格式异常时整体保留在 `before`,用户仍能看到原文。
+ *
+ * 提取不再依赖严格的 ```json 围栏正则:先定位 [INTENT_READY](大小写不敏感),
+ * 再用括号配对抓出后面的第一个完整 JSON 对象,最后多级降级 parse。这样模型漏写
+ * 代码围栏、JSON 里有裸换行 / 尾随逗号、字段类型写偏等情况都能尽量恢复。
  */
 export function splitIntentReadyBlock(text: string): {
   before: string;
@@ -118,20 +323,16 @@ export function splitIntentReadyBlock(text: string): {
   after: string;
 } {
   if (!text) return { before: text, summary: null, after: "" };
-  const m = INTENT_READY_RE.exec(text);
-  if (!m) return { before: text, summary: null, after: "" };
-  let summary: IntentSummary | null = null;
-  try {
-    const parsed = JSON.parse(m[1]);
-    if (parsed && typeof parsed === "object" && typeof parsed.objective === "string") {
-      summary = parsed as IntentSummary;
-    }
-  } catch {
-    return { before: text, summary: null, after: "" };
-  }
+  const marker = INTENT_READY_MARKER_RE.exec(text);
+  if (!marker) return { before: text, summary: null, after: "" };
+  const block = extractBalancedJson(text, marker.index + marker[0].length);
+  if (!block) return { before: text, summary: null, after: "" };
+  const summary = parseIntentSummary(block.json);
+  if (!summary) return { before: text, summary: null, after: "" };
   return {
-    before: text.slice(0, m.index).trimEnd(),
+    before: text.slice(0, marker.index).trimEnd(),
     summary,
-    after: text.slice(m.index + m[0].length).trimStart(),
+    // 丢掉 JSON 块之后残留的代码围栏 ``` 与模型多说的话(SOUL 要求 READY 后即停)。
+    after: text.slice(block.end).replace(/^\s*```+/, "").trimStart(),
   };
 }
diff --git a/frontend-web/src/roundtable-planning/lib/step-display.tsx b/frontend-web/src/roundtable-planning/lib/step-display.tsx
index 87e7dabf..6f197cd9 100644
--- a/frontend-web/src/roundtable-planning/lib/step-display.tsx
+++ b/frontend-web/src/roundtable-planning/lib/step-display.tsx
@@ -23,6 +23,8 @@ import {
 } from "lucide-react";
 
 import { ChainOfThoughtSearchResult } from "@/components/ai-elements/chain-of-thought";
+import { CodeBlock } from "@/components/ai-elements/code-block";
+import { MarkdownContent } from "@/roundtable-planning/components/MessageBubble";
 
 /**
  * 根据工具名 + args 渲染 ChainOfThoughtStep 的子节点(路径 chip / 命令代码块等)。
@@ -34,6 +36,7 @@ import { ChainOfThoughtSearchResult } from "@/components/ai-elements/chain-of-th
 export function renderStepArgs(
   key: string,
   args?: Record<string, unknown>,
+  resolveAgentName?: (idOrName: string) => string,
 ): React.ReactNode {
   if (!args) return null;
   const [, toolName] = key.split(":");
@@ -43,15 +46,18 @@ export function renderStepArgs(
       const agentName = typeof args.agent_name === "string" ? args.agent_name : "";
       const task = typeof args.task === "string" ? args.task : "";
       if (!agentName && !task) return null;
+      // 派活 chip 显示中文席位名而非 agent id(客户自建 agent 的 id 常是一串 hex)。
+      const displayName =
+        agentName && resolveAgentName ? resolveAgentName(agentName) : agentName;
       return (
         <>
-          {agentName && (
-            <ChainOfThoughtSearchResult>{agentName}</ChainOfThoughtSearchResult>
+          {displayName && (
+            <ChainOfThoughtSearchResult>{displayName}</ChainOfThoughtSearchResult>
           )}
           {task && (
-            <span className="block text-[11px] text-slate-600 line-clamp-3 mt-0.5">
-              {task}
-            </span>
+            <div className="mt-1 max-h-64 overflow-y-auto rounded-md border border-slate-200 bg-white px-2.5 py-1 text-[11px] text-slate-600 leading-relaxed">
+              <MarkdownContent>{task}</MarkdownContent>
+            </div>
           )}
         </>
       );
@@ -75,9 +81,14 @@ export function renderStepArgs(
     case "bash": {
       const command = typeof args.command === "string" ? args.command : "";
       return command ? (
-        <code className="block bg-slate-100 rounded px-2 py-1 text-[11px] font-mono text-slate-800 mt-0.5 line-clamp-2 break-all">
-          {command}
-        </code>
+        <div className="mt-1 max-h-60 overflow-auto rounded-md border border-slate-200 [&_pre]:px-2.5! [&_pre]:py-1.5!">
+          <CodeBlock
+            className="rounded-none border-none"
+            showLineNumbers={false}
+            language="bash"
+            code={command}
+          />
+        </div>
       ) : null;
     }
     case "write_todos": {
diff --git a/frontend-web/src/roundtable-planning/pages/RoundtablePlanningPage.tsx b/frontend-web/src/roundtable-planning/pages/RoundtablePlanningPage.tsx
index ad72b49b..5195efce 100644
--- a/frontend-web/src/roundtable-planning/pages/RoundtablePlanningPage.tsx
+++ b/frontend-web/src/roundtable-planning/pages/RoundtablePlanningPage.tsx
@@ -62,6 +62,7 @@ import {
 import { useStep2Orchestration } from "@/roundtable-planning/hooks/useStep2Orchestration";
 import { useDraftPersistence } from "@/roundtable-planning/hooks/useDraftPersistence";
 import {
+  BUILTIN_AGENT_META,
   getAvatarTypeFor,
   getDisplayNameFor,
   makeRolesFromTemplates,
@@ -259,7 +260,8 @@ export default function RoundtablePlanningPage() {
     (agents: Array<{ agent_id: string; name: string }>) => {
       const normalized: SelectedAgent[] = agents.map(({ agent_id, name }) => ({
         agent_id,
-        name: name ?? agent_id,
+        // 内置 agent 走 BUILTIN_AGENT_META;非内置用候选池传过来的 name。
+        name: BUILTIN_AGENT_META[agent_id]?.displayName ?? name ?? agent_id,
       }));
       step2.setSelectedAgents(normalized);
       step2.resetInitGate();
@@ -486,6 +488,7 @@ export default function RoundtablePlanningPage() {
               agentConfigs={step2.agentConfigs}
               selectedAgentId={step2.selectedAgentId}
               roles={roles}
+              agentNameToRole={step2.agentNameToRole}
               selectedModel={selectedModel}
               availableModels={availableModels}
               modelsLoading={modelsLoading}
@@ -496,7 +499,7 @@ export default function RoundtablePlanningPage() {
               openArtifactPreview={step2.openArtifactPreview}
               onPauseRoundtable={step2.pauseRoundtable}
               onResumeRoundtable={step2.resumeRoundtable}
-              onRecordInjectMessage={step2.recordInjectMessage}
+              onHandleInjectToRoundtable={step2.handleInjectToRoundtable}
               setClarificationDraft={step2.setClarificationDraft}
               setCustomAgentInput={step2.setCustomAgentInput}
               setAgentConfigs={step2.setAgentConfigs}
@@ -893,7 +896,9 @@ function LeftSidebar({
                 ...selectedAgents.map((agent, i) => ({
                   id: agent.agent_id,
                   name: getDisplayNameFor(agent),
-                  role: "圆桌席位",
+                  role: BUILTIN_AGENT_META[agent.agent_id]
+                    ? `${BUILTIN_AGENT_META[agent.agent_id].displayName} 席位`
+                    : "圆桌席位",
                   icon: getAvatar(getAvatarTypeFor(agent.agent_id, i), "h-7 w-7"),
                 })),
               ].map((contrib, idx) => (
diff --git a/frontend-web/src/strategy-components/components/task-components/TaskManagement.tsx b/frontend-web/src/strategy-components/components/task-components/TaskManagement.tsx
new file mode 100644
index 00000000..588e6b45
--- /dev/null
+++ b/frontend-web/src/strategy-components/components/task-components/TaskManagement.tsx
@@ -0,0 +1,166 @@
+import { Outlet } from 'react-router-dom';
+export interface SceneInfo {
+  applicableTask: string;
+  createTime: string;
+  deleted: number;
+  id: number;
+  relatedAgent: string;
+  sceneCode: string;
+  sceneIntro: string;
+  sceneName: string;
+  sceneType: string;
+  status: number;
+  updateTime: string;
+  version: string;
+}
+
+export interface TaskListItem {
+  createBy: number;
+  createTime: string;
+  deptId: null;
+  id: number;
+  isTop: number;
+  issuingDept: string;
+  keywords: null;
+  overview: string;
+  planTaskTop: number;
+  platform: null;
+  ptaskId: null;
+  recommendedBasis: null;
+  scene: string; // 或 SceneInfo，如果你已经解析
+  sourceType: number;
+  step: null;
+  taskContent: string;
+  taskDirection: string;
+  taskEndDate: string;
+  taskLevel: number;
+  taskName: string;
+  taskNo: string;
+  taskStartDate: string;
+  taskStatus: number;
+  taskSuperiorFlag: number;
+  taskTimeLimit: null;
+  taskType: number;
+  column: string;
+  updateBy: number;
+  updateTime: string;
+  endCount: number;
+  sumAll: number;
+  progress: number;
+  taskStatusData: any;
+}
+
+export interface ActionListItem {
+  actionDay: number;
+  actionEndDate: string;
+  actionManager: number;
+  actionName: string;
+  actionNo: any;
+  actionStartDate: string;
+  actionStatus: number;
+  actionTerm: number;
+  actionTitle: any;
+  actorName: any;
+  audienceGroup: any
+  audienceGroupId: any;
+  audienceRecReason: any
+  behavior: any
+  createBy: number
+  createTime: string;
+  deleteFlag: number;
+  deptId: any;
+  deptName: string;
+  drivingFactor: any;
+  expectedBehaviorId: any;
+  id: number
+  keywords: string
+  level: number
+  scene: string
+  sourceType: number
+  step: null
+  taskId: number
+  updateBy: number
+  updateTime: number
+  useActionId: null
+}
+
+export interface actionColumnItem {
+  icon: string;
+  columnName: string;
+  actionList: ActionListItem[]
+}
+
+export const taskStatusList = {
+  '0': {
+    label: '待签收',
+    color: '#0062d9',
+    icon: '待签收.svg'
+  },
+  '10': {
+    label: '待分析',
+    color: '#2f9acc',
+    icon: '待CEH.svg'
+  },
+  '20': {
+    label: '分析中',
+    color: '#d97b00',
+    icon: '进行中.svg'
+  },
+  '25': {
+    label: '分析完成已提交',
+    color: '#1eb07f',
+    icon: '完成.svg'
+  },
+  '30': {
+    label: '已分析待审核',
+    color: '#1eb07f',
+    icon: '完成.svg'
+  },
+  '40': {
+    label: '分析审核通过',
+    color: '#1eb07f',
+    icon: '完成.svg'
+  },
+  '50': {
+    label: '分析审核未通过',
+    color: '#cf1322',
+    icon: '未通过.svg'
+  },
+  '60': {
+    label: '行动已下发待签收',
+    color: '#1eb07f',
+    icon: '完成.svg'
+  },
+  '70': {
+    label: '行动已签收待策划',
+    color: '#1eb07f',
+    icon: '完成.svg'
+  },
+  '80': {
+    label: '行动策划已提交',
+    color: '#1eb07f',
+    icon: '完成.svg'
+  },
+  '100': {
+    label: '作战方案待审核',
+    color: '#1eb07f',
+    icon: '完成.svg'
+  },
+  '110': {
+    label: '作战方案审核通过',
+    color: '#1eb07f',
+    icon: '完成.svg'
+  },
+  '120': {
+    label: '作战方案未通过',
+    color: '#cf1322',
+    icon: '未通过.svg'
+  }
+};
+export default function TaskManagement() {
+  return (
+    <div className="h-full flex flex-col">
+      <Outlet />
+    </div>
+  );
+}
diff --git a/frontend-web/src/strategy-components/components/task-components/TaskXkFrom.tsx b/frontend-web/src/strategy-components/components/task-components/TaskXkFrom.tsx
new file mode 100644
index 00000000..832dffa5
--- /dev/null
+++ b/frontend-web/src/strategy-components/components/task-components/TaskXkFrom.tsx
@@ -0,0 +1,23 @@
+import { Outlet, useNavigate } from 'react-router-dom';
+import React, { useState, useEffect, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+const userInfo = localStorage.getItem('userInfo');
+const xkLinkUrl = import.meta.env.VITE_AIPI_XKLINKTO_URL;
+interface TaskPgFromProps {
+  gopath: string
+}
+const TaskXkFrom: React.FC<TaskPgFromProps> = ({gopath}) => {
+const [xkUrl, setXkUrl] = useState(xkLinkUrl);
+  useEffect(() => {
+    if(userInfo) {
+      const userData: any = JSON.parse(userInfo);
+      setXkUrl(`${xkLinkUrl}${gopath}?accessToken=${userData.accessToken}`);
+    }
+  }, [gopath]);
+  return (
+    <div className="h-full flex flex-col">
+      <iframe className="h-[calc(100vh-92px)]" src={xkUrl}></iframe>
+    </div>
+  );
+}
+export default TaskXkFrom
diff --git a/offline-backend-20260512/backend/app/gateway/app.py b/offline-backend-20260512/backend/app/gateway/app.py
index 49ac2bc9..a993f732 100644
--- a/offline-backend-20260512/backend/app/gateway/app.py
+++ b/offline-backend-20260512/backend/app/gateway/app.py
@@ -503,6 +503,24 @@ async def lifespan(app: FastAPI) -> AsyncGenerator[None, None]:
         except Exception:
             logger.exception("Skill ownership migration failed (non-fatal)")
 
+        # 一次性把 .deer-flow/agents/{id}/ 目录里历史遗留的 agent 导入 agents 表。
+        # 路由层原本每次请求都跑一遍这个 sync(扫文件系统 + N 个 agent 各一次 DB
+        # SELECT/UPDATE),把它挪到启动期 + 路由层只保留 TTL 兜底,显著降低
+        # /api/agents 列表延迟。
+        try:
+            from app.gateway.routers.agents import (
+                _mark_legacy_sync_fresh,
+                _sync_legacy_agents,
+            )
+
+            agent_store = getattr(app.state, "agent_store", None)
+            if agent_store is not None:
+                await _sync_legacy_agents(agent_store)
+                _mark_legacy_sync_fresh()
+                logger.info("Legacy folder-backed agents synced at startup")
+        except Exception:
+            logger.exception("Legacy agent sync failed at startup (non-fatal)")
+
         # 启动 skill curator 调度器:常驻后台任务,每小时检查一次需不需要进化
         # (per-user interval_hours 仍是真正决定要不要跑进化的闸)。
         try:
diff --git a/offline-backend-20260512/backend/app/gateway/routers/_roundtable_seed.py b/offline-backend-20260512/backend/app/gateway/routers/_roundtable_seed.py
index 96e81628..f4bd40df 100644
--- a/offline-backend-20260512/backend/app/gateway/routers/_roundtable_seed.py
+++ b/offline-backend-20260512/backend/app/gateway/routers/_roundtable_seed.py
@@ -406,7 +406,7 @@ RECOMMENDER_AGENT_SOUL = """# 智能体推荐专员
 
 > 以下两个示例覆盖**不同任务类型**,目的是教你「思路要呼应任务本身」,**不要**把任何一个示例的具体职能链当模板。
 
-### 示例 A:合规改造任务(领域候选池)
+### 示例 A:合规改造任务(职能型候选池)
 
 **用户输入**:
 ```
@@ -415,11 +415,12 @@ RECOMMENDER_AGENT_SOUL = """# 智能体推荐专员
 关键假设:现有系统具备基础数字化能力;允许预定窗口停机
 
 候选智能体池:
-- compliance-research (合规调研):检索同类历史案例、行业最佳实践与监管口径
-- infra-capacity (基础设施评估):评估硬件容量与系统量化承载力
-- solution-architect (方案架构):产出主备方案与关键路径
-- risk-auditor (风险审查):合规红线检查与收敛建议
-- execution-planner (执行规划):里程碑与资源排布
+- roundtable-intelligence (情报收集):检索同类历史案例、行业最佳实践与外部情报
+- roundtable-environment (环境评估):评估硬件容量与系统量化承载力
+- roundtable-solution-design (方案设计):产出主备方案与关键路径
+- roundtable-risk-review (风险审查):合规红线检查与收敛建议
+- roundtable-execution-plan (执行规划):里程碑与资源排布
+- roundtable-summary (总结陈述):归纳冲突标记与盖印
 - my-cost-calc (成本测算):基于预算和资源单价计算总成本
 ```
 
@@ -430,10 +431,10 @@ RECOMMENDER_AGENT_SOUL = """# 智能体推荐专员
 ```json
 {
   "picks": [
-    {"agent_id": "compliance-research", "reason": "检索同类等保 2.0 改造案例与监管口径,直接支撑本次合规对标"},
-    {"agent_id": "solution-architect", "reason": "在 6 个月工期约束下产出主备改造方案与关键路径"},
-    {"agent_id": "risk-auditor", "reason": "对照等保 2.0 合规红线审查方案,避免后期返工"},
-    {"agent_id": "execution-planner", "reason": "把改造拆成可在 6 个月内交付的里程碑与资源排布"},
+    {"agent_id": "roundtable-intelligence", "reason": "检索同类等保 2.0 改造案例与监管口径,直接支撑本次合规对标"},
+    {"agent_id": "roundtable-solution-design", "reason": "在 6 个月工期约束下产出主备改造方案与关键路径"},
+    {"agent_id": "roundtable-risk-review", "reason": "对照等保 2.0 合规红线审查方案,避免后期返工"},
+    {"agent_id": "roundtable-execution-plan", "reason": "把改造拆成可在 6 个月内交付的里程碑与资源排布"},
     {"agent_id": "my-cost-calc", "reason": "校验整体方案落在 500 万元预算硬约束内"}
   ]
 }
@@ -452,7 +453,7 @@ RECOMMENDER_AGENT_SOUL = """# 智能体推荐专员
 - channel-planner (渠道规划师):按预算和受众设计跨平台投放组合
 - audience-insight (受众洞察):画像、关键词、情绪点研究
 - creative-copy (创意文案):产出落地页与社媒文案变体
-- ad-compliance (广告合规):审查文案与素材合规风险
+- roundtable-risk-review (风险审查):合规红线检查与收敛建议
 ```
 
 **你的输出**:
@@ -470,8 +471,8 @@ RECOMMENDER_AGENT_SOUL = """# 智能体推荐专员
 }
 ```
 
-> **关键观察**:两个示例都从候选池里按任务语义挑选,**不要**套用固定职能链(如"调研→设计→风险→执行")。
-> 候选池里的智能体能不能匹配任务,只看 description 和任务的实际语义。如果候选池里有"广告设计智能体"且任务是广告设计,**你必须挑它**,而不是机械复制示例 A 的链路。
+> **关键观察**:示例 A 选了 `roundtable-intelligence / solution-design / execution-plan` 等"职能型"智能体,示例 B **完全没用任何 `roundtable-*` 内置**,而是从用户自建的领域智能体里挑。
+> 这是因为:**候选池里的智能体能不能匹配任务,只看 description 和任务的实际语义,不看 id 是不是 `roundtable-` 开头**。如果候选池里有"广告设计智能体"且任务是广告设计,**你必须挑它**,而不是套用示例 A 的职能链。
 """
 
 
diff --git a/offline-backend-20260512/backend/app/gateway/routers/agents.py b/offline-backend-20260512/backend/app/gateway/routers/agents.py
index 8889783d..512dcb7a 100644
--- a/offline-backend-20260512/backend/app/gateway/routers/agents.py
+++ b/offline-backend-20260512/backend/app/gateway/routers/agents.py
@@ -5,6 +5,7 @@ from __future__ import annotations
 import asyncio
 import logging
 import shutil
+import time
 from datetime import datetime
 from typing import Any
 from uuid import uuid4
@@ -207,6 +208,11 @@ async def _sync_legacy_agents(store: AgentStore) -> None:
 
     This preserves old deployments where agents already existed under
     ``.deer-flow/agents/{name}`` before the agents table was introduced.
+
+    Heavy: scans the agents directory + parses each ``config.yaml`` + issues a
+    SELECT-then-INSERT/UPDATE per agent. Call once at startup via the lifespan,
+    and rely on :func:`_maybe_sync_legacy_agents` (TTL-gated) inside request
+    handlers as a safety net for environments that bypassed the lifespan hook.
     """
     try:
         for agent_cfg in list_custom_agents():
@@ -225,6 +231,44 @@ async def _sync_legacy_agents(store: AgentStore) -> None:
         logger.exception("Failed to sync legacy folder-backed agents")
 
 
+# Throttle the per-request legacy-sync fallback. The real sync runs once at
+# startup (lifespan); request handlers used to call ``_sync_legacy_agents`` on
+# every hit, which scanned the filesystem + did N DB upserts per agent each
+# time. After the first successful sync we skip the work for ``_LEGACY_SYNC_TTL_SECONDS``
+# — long enough to be effectively "startup-only" in steady state, short enough
+# that a freshly dropped agent directory gets picked up on the next bucket.
+_LEGACY_SYNC_TTL_SECONDS = 3600.0
+_legacy_sync_state: dict[str, Any] = {"last_at": 0.0, "lock": None}
+
+
+async def _maybe_sync_legacy_agents(store: AgentStore) -> None:
+    """TTL-gated wrapper around :func:`_sync_legacy_agents`.
+
+    Becomes a no-op in steady state — the heavy lifting happens in the lifespan
+    hook. Inside the TTL window we don't even take the lock; outside it we
+    serialize callers so a thundering herd doesn't fan out into N filesystem
+    scans + N*M DB queries.
+    """
+    now = time.monotonic()
+    if now - float(_legacy_sync_state["last_at"]) < _LEGACY_SYNC_TTL_SECONDS:
+        return
+    lock = _legacy_sync_state["lock"]
+    if lock is None:
+        lock = asyncio.Lock()
+        _legacy_sync_state["lock"] = lock
+    async with lock:
+        # Re-check under the lock — a sibling coroutine may have just refreshed.
+        if time.monotonic() - float(_legacy_sync_state["last_at"]) < _LEGACY_SYNC_TTL_SECONDS:
+            return
+        await _sync_legacy_agents(store)
+        _legacy_sync_state["last_at"] = time.monotonic()
+
+
+def _mark_legacy_sync_fresh() -> None:
+    """Called by the lifespan hook after running :func:`_sync_legacy_agents`."""
+    _legacy_sync_state["last_at"] = time.monotonic()
+
+
 def _ensure_agent_dir_from_record(record: dict[str, Any]) -> None:
     """Lazily restore an agent's on-disk artifacts from its DB record.
 
@@ -262,14 +306,29 @@ def _record_to_response(
     record: dict[str, Any],
     *,
     include_soul: bool = False,
+    include_extras: bool = True,
 ) -> AgentResponse:
-    _ensure_agent_dir_from_record(record)
+    """Convert a DB row to an API response.
+
+    Args:
+        include_soul: Read SOUL.md from disk and embed in ``soul``. Set False
+            in list endpoints — the frontend (gallery / recommend / selector)
+            never reads ``soul``, only the edit dialog does. Skipping this
+            avoids one synchronous file read per agent.
+        include_extras: Self-heal a missing agent dir and read deprecated
+            ``model`` / ``tool_groups`` / ``skills`` from ``config.yaml``. Set
+            False in list endpoints to skip a stat + yaml parse per agent —
+            those fields are unused by current frontends and the dir restore
+            can happen lazily when the agent is actually opened.
+    """
     soul: str | None = None
+    extras: dict[str, Any] = {"skills": None, "model": None, "tool_groups": None}
+    if include_extras:
+        _ensure_agent_dir_from_record(record)
+        extras = _load_config_extras(record["id"])
     if include_soul:
         soul = load_agent_soul(record["id"]) or ""
 
-    extras = _load_config_extras(record["id"])
-
     return AgentResponse(
         id=record["id"],
         name=record["name"],
@@ -288,6 +347,25 @@ def _record_to_response(
     )
 
 
+async def _record_to_response_async(
+    record: dict[str, Any],
+    *,
+    include_soul: bool = False,
+    include_extras: bool = True,
+) -> AgentResponse:
+    """Async wrapper: when we actually touch disk, hop to a worker thread so
+    we don't block the asyncio loop. List endpoints (no soul, no extras) skip
+    this overhead and stay on the calling task."""
+    if not include_soul and not include_extras:
+        return _record_to_response(record, include_soul=False, include_extras=False)
+    return await asyncio.to_thread(
+        _record_to_response,
+        record,
+        include_soul=include_soul,
+        include_extras=include_extras,
+    )
+
+
 async def _get_owned_or_raise(store: AgentStore, agent_id: str, user_id: str) -> dict[str, Any]:
     owned = await store.get_owned(agent_id, user_id)
     if owned is not None:
@@ -349,7 +427,7 @@ async def list_agents(
     try:
         store = get_agent_store(request)
         tag_store: TagStore = get_tag_store(request)
-        await _sync_legacy_agents(store)
+        await _maybe_sync_legacy_agents(store)
         user_id = _current_user_id(request)
         if admin:
             if not _is_admin_user(request):
@@ -357,7 +435,14 @@ async def list_agents(
             agents = await store.list_all()
         else:
             agents = await store.list_visible(user_id)
-        responses = [_record_to_response(a, include_soul=True) for a in agents]
+        # List endpoint stays lean: skip per-agent SOUL.md read, config.yaml
+        # parse, and dir self-heal — none of those feed UI fields the gallery /
+        # recommend dialog / selector actually render. Detail endpoints (single
+        # agent + create/update responses) still load them.
+        responses = [
+            _record_to_response(a, include_soul=False, include_extras=False)
+            for a in agents
+        ]
 
         assignments = await tag_store.list_assignments("agent", [r.id for r in responses])
         favorite_ids = await store.list_favorite_ids(user_id)
@@ -403,11 +488,18 @@ async def get_agent_selector(request: Request) -> AgentSelectorResponse:
     _require_agents_api_enabled()
     try:
         store = get_agent_store(request)
-        await _sync_legacy_agents(store)
+        await _maybe_sync_legacy_agents(store)
 
         user_id = _current_user_id(request)
         records = await store.list_featured(user_id)
-        return AgentSelectorResponse(agents=[_record_to_response(r) for r in records])
+        # Selector dropdown only renders name/description/featured_order — same
+        # rationale as list_agents: skip soul + extras + self-heal.
+        return AgentSelectorResponse(
+            agents=[
+                _record_to_response(r, include_soul=False, include_extras=False)
+                for r in records
+            ]
+        )
     except HTTPException:
         raise
     except Exception as e:
@@ -427,12 +519,15 @@ async def get_agent(agent_id: str, request: Request) -> AgentResponse:
 
     try:
         store = get_agent_store(request)
-        await _sync_legacy_agents(store)
+        await _maybe_sync_legacy_agents(store)
         user_id = _current_user_id(request)
         record = await store.get_visible(agent_id, user_id)
         if record is None:
             raise HTTPException(status_code=404, detail=f"Agent '{agent_id}' not found")
-        response = _record_to_response(record, include_soul=True)
+        # Detail view legitimately reads SOUL.md + config.yaml — hop to a
+        # worker thread so the asyncio loop stays responsive under concurrent
+        # detail fetches.
+        response = await _record_to_response_async(record, include_soul=True, include_extras=True)
         favorite_ids = await store.list_favorite_ids(user_id)
         response.is_favorite = agent_id in favorite_ids
         return response
@@ -488,7 +583,7 @@ async def create_agent_endpoint(request: AgentCreateRequest, http_request: Reque
             }
         )
         logger.info("Created agent '%s' (%s) at %s", name, agent_id, agent_dir)
-        return _record_to_response(record, include_soul=True)
+        return await _record_to_response_async(record, include_soul=True, include_extras=True)
 
     except HTTPException:
         raise
@@ -569,7 +664,7 @@ async def update_agent(agent_id: str, request: AgentUpdateRequest, http_request:
             raise HTTPException(status_code=404, detail=f"Agent '{agent_id}' not found")
 
         logger.info("Updated agent '%s' (%s)", record["name"], agent_id)
-        return _record_to_response(record, include_soul=True)
+        return await _record_to_response_async(record, include_soul=True, include_extras=True)
 
     except HTTPException:
         raise
@@ -744,7 +839,7 @@ async def set_agent_featured(
 
     try:
         store = get_agent_store(request)
-        await _sync_legacy_agents(store)
+        await _maybe_sync_legacy_agents(store)
         record = await store.get_any(agent_id)
         if record is None:
             raise HTTPException(status_code=404, detail=f"Agent '{agent_id}' not found")
@@ -756,7 +851,7 @@ async def set_agent_featured(
         if updated is None:
             raise HTTPException(status_code=404, detail=f"Agent '{agent_id}' not found")
         logger.info("Set agent '%s' featured_order=%s by admin", agent_id, body.order)
-        return _record_to_response(updated, include_soul=True)
+        return await _record_to_response_async(updated, include_soul=True, include_extras=True)
     except HTTPException:
         raise
     except Exception as e:
diff --git a/offline-backend-20260512/backend/app/gateway/routers/intent.py b/offline-backend-20260512/backend/app/gateway/routers/intent.py
index f53ed6bd..249c4a1b 100644
--- a/offline-backend-20260512/backend/app/gateway/routers/intent.py
+++ b/offline-backend-20260512/backend/app/gateway/routers/intent.py
@@ -65,6 +65,7 @@ from fastapi.responses import StreamingResponse
 # identical in connection handling, payload shape, and error mapping.
 from app.gateway.routers._roundtable_seed import ensure_roundtable_functional_agents
 from app.gateway.routers.multi_agent import (
+    _ROUNDTABLE_THREAD_METADATA,
     _auth_headers,
     _create_thread,
     _diagnose_exception,
@@ -133,6 +134,70 @@ def _normalize_options(raw: object) -> tuple[str, ...]:
     return tuple(sorted(o for o in out if o))
 
 
+def _count_past_clarifications(messages: list[dict[str, Any]]) -> int:
+    """统计当前 thread 内已经发出过的 ``ask_clarification`` 次数。
+
+    用来给 ``stream_intent`` 做"3 轮硬上限"兜底:
+      - 0-1 次:正常流程,模型自行决定继续问还是收敛
+      - 2 次(即将进入第 3 轮):prompt 追加系统提示,要求本轮必须 INTENT_READY
+      - ≥3 次:工具白名单移除 ``ask_clarification``,模型物理上无法再问
+
+    只数"已经成型"的 tool_call,不区分用户是否回答过——LangGraph 把 ask
+    工具的调用永久记录在 AIMessage.tool_calls 里,数它即可。
+    """
+    if not isinstance(messages, list):
+        return 0
+    count = 0
+    for msg in messages:
+        if not isinstance(msg, dict):
+            continue
+        if (msg.get("type") or "").lower() not in ("ai", "aimessage", "aimessagechunk"):
+            continue
+        for tc in msg.get("tool_calls") or []:
+            if (tc.get("name") or "").lower() == "ask_clarification":
+                count += 1
+    return count
+
+
+async def _fetch_thread_messages(
+    client: httpx.AsyncClient,
+    base: str,
+    headers: dict[str, str],
+    thread_id: str,
+) -> list[dict[str, Any]]:
+    """读取当前 thread checkpoint 的 messages 列表(best-effort)。
+
+    用 ASGITransport loopback 调 ``GET /api/threads/{tid}/state``,失败时返回
+    空列表——计数兜底是个"刹车",失败时退化成原有的纯 SOUL 自律行为,不阻断主流程。
+    """
+    try:
+        resp = await client.get(f"{base}/api/threads/{thread_id}/state", headers=headers)
+    except Exception as exc:
+        logger.warning("intent: get thread state failed (%s) — falling back to soul-only flow", exc)
+        return []
+    if resp.status_code != 200:
+        logger.warning(
+            "intent: get thread state %s returned %s — falling back to soul-only flow",
+            thread_id,
+            resp.status_code,
+        )
+        return []
+    try:
+        payload = resp.json()
+    except Exception:
+        return []
+    values = payload.get("values") if isinstance(payload, dict) else None
+    if not isinstance(values, dict):
+        return []
+    messages = values.get("messages")
+    return messages if isinstance(messages, list) else []
+
+
+# 硬上限:超过这个轮数,无论模型怎么想,都强制移除 ask_clarification 工具。
+# 与 SOUL.md §0 「硬规则 2」对齐——"绝不存在第 4 轮"。
+_MAX_CLARIFICATION_ROUNDS = 3
+
+
 def _is_repeated_clarification(
     messages: list[dict[str, Any]],
     *,
@@ -222,7 +287,7 @@ async def init_intent(request: Request, payload: dict = Body(...)) -> dict[str,
     # 看不到逐 token 增量。
     try:
         async with _make_loopback_client(request) as client:
-            thread_id = await _create_thread(client, base, headers)
+            thread_id = await _create_thread(client, base, headers, metadata=_ROUNDTABLE_THREAD_METADATA)
     except HTTPException:
         # 上游已用结构化方式失败,原样传给前端不需要二次包装。
         raise
@@ -279,33 +344,70 @@ async def stream_intent(request: Request, payload: dict = Body(...)) -> Streamin
         # 因此既无须 trust_env=False 防代理，也不存在 loopback 40s 超时这种坑。
         async with _make_loopback_client(request) as client:
             try:
+                # —— 3 轮硬上限兜底 ——
+                # 在发起 run 之前先读一次 thread state,数当前 ask_clarification 已发出次数:
+                #   past=0/1 → 正常,不动 message,不动工具白名单
+                #   past=2(本轮即将变成第 3 轮)→ 给消息加前缀,强提示"必须 INTENT_READY"
+                #   past≥3 → 直接把 ask_clarification 也加进 excluded_tools,工具物理消失
+                # 这一步是个"刹车":SOUL 让模型自律,这里让系统兜底。
+                past_clarifications = _count_past_clarifications(
+                    await _fetch_thread_messages(client, base, headers, thread_id)
+                )
+
+                # 1. ask_clarification 的工具白名单——超过硬上限就移除。
+                base_excluded_tools = [
+                    "web_search",
+                    "present_files",
+                    "view_image",
+                    "agent_orchestration",
+                    "bash",
+                    "ls",
+                    "read_file",
+                    "write_file",
+                    "str_replace",
+                    "memory",
+                    "hindsight_recall",
+                    "hindsight_reflect",
+                    "hindsight_retain",
+                    "task",
+                    "write_todos",
+                ]
+                if past_clarifications >= _MAX_CLARIFICATION_ROUNDS:
+                    base_excluded_tools.append("ask_clarification")
+                    logger.info(
+                        "intent stream: past_clarifications=%d >= %d, force-disabling "
+                        "ask_clarification to break the loop",
+                        past_clarifications,
+                        _MAX_CLARIFICATION_ROUNDS,
+                    )
+
+                # 2. message 前缀——给模型一个明确的"本轮必须收敛"信号。
+                effective_message = message
+                if past_clarifications >= _MAX_CLARIFICATION_ROUNDS:
+                    effective_message = (
+                        f"[系统强制] 已澄清 {past_clarifications} 轮,触发硬上限。"
+                        f"本轮请直接输出 [INTENT_READY],缺的字段用 assumptions 兜底,"
+                        f"绝对不要再调任何工具,也不要再询问任何问题。\n\n"
+                        f"用户最新输入:{message}"
+                    )
+                elif past_clarifications >= _MAX_CLARIFICATION_ROUNDS - 1:
+                    effective_message = (
+                        f"[系统提示] 已澄清 {past_clarifications} 轮,这是最后一轮。"
+                        f"本轮请直接输出 [INTENT_READY],未明确的字段用 assumptions 兜底。\n\n"
+                        f"用户最新输入:{message}"
+                    )
+
                 body = _run_payload(
                     agent_name=INTENT_AGENT_ID,
                     model_name=model_name,
                     thread_id=thread_id,
-                    new_message=message,
-                    # Intent agent only ever needs ask_clarification. Block
+                    new_message=effective_message,
+                    # Intent agent only ever needs ask_clarification (and even that
+                    # is yanked once past_clarifications hits the cap above). Block
                     # everything else so the model can't drift into solutioning
-                    # (e.g. saving a design doc with write_file) — the model
-                    # tends to ignore SOUL prose, hard exclusion is reliable.
-                    # 仅保留 ask_clarification；其余工具见模块 docstring「工具白名单」。
-                    excluded_tools=[
-                        "web_search",
-                        "present_files",
-                        "view_image",
-                        "agent_orchestration",
-                        "bash",
-                        "ls",
-                        "read_file",
-                        "write_file",
-                        "str_replace",
-                        "memory",
-                        "hindsight_recall",
-                        "hindsight_reflect",
-                        "hindsight_retain",
-                        "task",
-                        "write_todos",
-                    ],
+                    # (e.g. saving a design doc with write_file) — SOUL prose is
+                    # not reliable on its own, hard exclusion is.
+                    excluded_tools=base_excluded_tools,
                     skill_stop_names=[],
                 )
 
@@ -338,7 +440,13 @@ async def stream_intent(request: Request, payload: dict = Body(...)) -> Streamin
                         except json.JSONDecodeError as exc:
                             logger.warning("intent summary JSON parse failed: %s", exc)
                             summary = None
-                        ready_text = msg_text
+                        # SOUL §0 硬规则 3 要求 ```json``` 反引号闭合后不得再输出任何字符,
+                        # 但模型仍偶尔会在后面接 "那么我帮你列一下大纲……" 之类的尾巴。
+                        # 终态帧只回到 marker 块结尾 + 一个换行,把废话从 content 里裁掉——
+                        # 草稿持久化 / 跨设备重放 / 前端 splitIntentReadyBlock 的 after
+                        # 段都因此干净。流式期间用户仍会逐 token 看到那段废话,前端
+                        # Step1Panel 已经把 `parts.after` 隐藏掉,体验闭环。
+                        ready_text = msg_text[: m.end()].rstrip() + "\n"
                         break
                 if summary and ready_text:
                     final_frame = {
diff --git a/offline-backend-20260512/backend/app/gateway/routers/multi_agent.py b/offline-backend-20260512/backend/app/gateway/routers/multi_agent.py
index bcf6bb01..57114fb8 100644
--- a/offline-backend-20260512/backend/app/gateway/routers/multi_agent.py
+++ b/offline-backend-20260512/backend/app/gateway/routers/multi_agent.py
@@ -53,18 +53,28 @@ import os
 import re
 import time
 import traceback
+import uuid
 from typing import Any, AsyncIterator
 
 import httpx
 from deerflow.config import get_app_config
 from deerflow.tools.builtins.clarification_utils import resolve_allow_multiple
+from deerflow.runtime.user_context import get_effective_user_id
+from deerflow.utils.time import now_iso
 from fastapi import APIRouter, Body, HTTPException, Request
 from fastapi.responses import StreamingResponse
+from langgraph.checkpoint.base import empty_checkpoint
 
 logger = logging.getLogger(__name__)
 router = APIRouter(prefix="/api/multi-agent", tags=["multi-agent"])
 
 
+# 圆桌（intent / recommend / 席位 / 协调）创建的 thread 都是功能型内部线程,
+# 不是用户的普通对话。打上这个 metadata,前端「最近的对话」列表(recent-chat-list.tsx)
+# 据 `metadata.thread_type` 过滤掉,与 scheduler / bootstrap 系统会话同一套机制。
+_ROUNDTABLE_THREAD_METADATA: dict[str, Any] = {"thread_type": "roundtable", "system": True}
+
+
 # ---------------------------------------------------------------------------
 # 共享:异常诊断器(intent/recommend/multi-agent 共用)
 # ---------------------------------------------------------------------------
@@ -285,9 +295,22 @@ def _auth_headers(request: Request) -> dict[str, str]:
     return {"Authorization": token, "Content-Type": "application/json"}
 
 
-async def _create_thread(client: httpx.AsyncClient, base: str, headers: dict[str, str]) -> str:
-    """``POST /api/threads`` → 新 thread_id（intent/recommend/init 席位均用）。"""
-    resp = await client.post(f"{base}/api/threads", json={}, headers=headers)
+async def _create_thread(
+    client: httpx.AsyncClient,
+    base: str,
+    headers: dict[str, str],
+    *,
+    metadata: dict[str, Any] | None = None,
+) -> str:
+    """``POST /api/threads`` → 新 thread_id（intent/recommend/init 席位均用）。
+
+    ``metadata`` 写入 thread 元数据,圆桌调用方传 ``_ROUNDTABLE_THREAD_METADATA``
+    把这些功能型线程标记成可被前端「最近的对话」过滤掉的系统会话。
+    """
+    body: dict[str, Any] = {}
+    if metadata:
+        body["metadata"] = metadata
+    resp = await client.post(f"{base}/api/threads", json=body, headers=headers)
     resp.raise_for_status()
     return resp.json()["thread_id"]
 
@@ -323,6 +346,181 @@ async def _create_agent(
     return False, resp.text
 
 
+# ---------------------------------------------------------------------------
+# 同进程直调 helpers(仅供 init_multi_agent 用,不要扩散到其它地方)
+#
+# init 阶段串了 N+1 个 thread create + N 个 GET /api/agents + 1 个 POST /api/agents,
+# 用 HTTP loopback 串走每次都得 TCP + 鉴权中间件 + Pydantic 反序列化一遍。每个
+# 调用 10-30ms,加起来对前端就是「点进 Step 2 后席位灯一颗一颗亮」的卡顿来源。
+#
+# 这里把这三个调用改成直接吃 app.state 里的 store/checkpointer —— 跑在同一个事
+# 件循环里,省掉 TCP + 序列化 + 中间件链。鉴权 / 校验 / 文件副作用按需在直调
+# helper 里显式做掉,不要"绕过"任何一项。
+#
+# 设计边界:这里只覆盖 init 阶段。SSE 长连接(/runs/stream / state)留在 HTTP
+# loopback,因为它们本就是别的进程模型(LangGraph 子树),抽出来风险大收益小。
+# ---------------------------------------------------------------------------
+
+
+def _resolve_user_id(request: Request) -> str:
+    """与 routers/agents._current_user_id 完全等价,直调路径里用。"""
+    user = getattr(request.state, "user", None)
+    if user is not None:
+        return str(user.id)
+    return get_effective_user_id()
+
+
+async def _create_thread_direct(request: Request, *, metadata: dict[str, Any] | None = None) -> str:
+    """同进程版的 ``POST /api/threads``。
+
+    完全镜像 ``routers/threads.create_thread`` 的写盘动作(thread_meta +
+    空 checkpoint),但跳过 TCP + Pydantic 反序列化。仅供 init 阶段批量建席位
+    线程用,失败时抛 HTTPException 由 SSE 帧上报。
+
+    ``metadata`` 写入 thread 元数据;init 传 ``_ROUNDTABLE_THREAD_METADATA`` 把
+    席位 / 协调线程标记成系统会话,从前端「最近的对话」里隐藏。
+    """
+    from app.gateway.deps import get_checkpointer, get_thread_store
+
+    checkpointer = get_checkpointer(request)
+    thread_store = get_thread_store(request)
+    thread_id = str(uuid.uuid4())
+    now = now_iso()
+
+    try:
+        await thread_store.create(thread_id, assistant_id=None, metadata=metadata or {})
+    except Exception:
+        logger.exception("[init-direct] thread_meta create failed for %s", thread_id)
+        raise HTTPException(status_code=500, detail="Failed to create thread")
+
+    config = {"configurable": {"thread_id": thread_id, "checkpoint_ns": ""}}
+    ckpt_metadata = {
+        "step": -1,
+        "source": "input",
+        "writes": None,
+        "parents": {},
+        "created_at": now,
+    }
+    try:
+        await checkpointer.aput(config, empty_checkpoint(), ckpt_metadata, {})
+    except Exception:
+        logger.exception("[init-direct] checkpoint create failed for %s", thread_id)
+        raise HTTPException(status_code=500, detail="Failed to create thread")
+    return thread_id
+
+
+async def _get_agents_batch_direct(
+    request: Request,
+    agent_ids: list[str],
+) -> dict[str, dict[str, Any]]:
+    """同进程版的 N 个并行 ``GET /api/agents/{id}`` 合并为 1 次 DB 查询。
+
+    返回 ``{agent_id: {id, name, description}}``。**严格模式**:任一席位对当前
+    用户不可见就抛 404 —— 与原 HTTP loopback 的 ``_get_agent`` 行为一致(原路径
+    单查 404 会 raise,在外层被 except 捕获并 yield error 帧),不要悄悄回退。
+    """
+    from app.gateway.deps import get_agent_store
+
+    store = get_agent_store(request)
+    user_id = _resolve_user_id(request)
+    records = await store.list_by_ids(agent_ids, user_id)
+    out: dict[str, dict[str, Any]] = {}
+    for r in records:
+        rid = str(r.get("id") or "").lower()
+        if not rid:
+            continue
+        out[rid] = {
+            "id": rid,
+            "name": str(r.get("name") or rid),
+            "description": str(r.get("description") or ""),
+        }
+    missing = [sid for sid in agent_ids if sid.lower() not in out]
+    if missing:
+        raise HTTPException(
+            status_code=404,
+            detail=f"Agent(s) not visible to current user: {', '.join(missing)}",
+        )
+    return out
+
+
+async def _create_coordinator_direct(
+    request: Request,
+    *,
+    agent_id: str,
+    name: str,
+    description: str,
+    soul: str,
+    model: str | None,
+    skills: list[str] | None,
+) -> tuple[bool, dict[str, Any] | str]:
+    """同进程版的协调 agent 创建。
+
+    完整复刻 ``routers/agents.create_agent_endpoint`` 的关键副作用:
+      - ``agents_api.enabled`` master switch
+      - 显示名校验(空白则 422 → 这里转 (False, msg))
+      - 重复 id 检查(409 → (False, msg))
+      - 写 ``config.yaml`` + ``SOUL.md``(用 ``asyncio.to_thread`` 防同步 IO 阻塞)
+      - ``agent_store.create`` 入表
+
+    返回 ``(True, record)`` 或 ``(False, error_text)``;调用方决定要不要发 SSE error 帧。
+    """
+    from app.gateway.deps import get_agent_store
+    from app.gateway.routers.agents import (
+        _require_agents_api_enabled,
+        _write_agent_config,
+        _write_agent_soul,
+    )
+    from deerflow.config.paths import get_paths
+
+    _require_agents_api_enabled()
+    normalized_name = (name or "").strip()
+    if not normalized_name:
+        return False, "Agent name cannot be empty"
+
+    store = get_agent_store(request)
+    if await store.get_any(agent_id) is not None:
+        return False, f"Agent id '{agent_id}' already exists"
+
+    agent_dir = get_paths().agent_dir(agent_id)
+    if agent_dir.exists():
+        return False, f"Agent id '{agent_id}' already exists"
+
+    try:
+        # config.yaml / SOUL.md 是同步 IO —— 全部丢线程池,不阻塞 init SSE 的发帧节奏。
+        await asyncio.to_thread(
+            _write_agent_config,
+            agent_id,
+            name=normalized_name,
+            description=description or "",
+            skills=skills,
+            model=model,
+            tool_groups=None,
+        )
+        await asyncio.to_thread(_write_agent_soul, agent_id, soul)
+        record = await store.create(
+            {
+                "id": agent_id,
+                "name": normalized_name,
+                "description": description or "",
+                "user_id": _resolve_user_id(request),
+                "published": False,
+            }
+        )
+        return True, record
+    except Exception as exc:
+        # 与 routers/agents 失败回滚一致 —— 文件已写出但 DB 失败时清掉 dir,避免下次
+        # `agent_dir.exists()` 误判为"已存在"导致后续 init 永远 409。
+        try:
+            if agent_dir.exists():
+                import shutil
+
+                await asyncio.to_thread(shutil.rmtree, agent_dir)
+        except Exception:
+            logger.exception("[init-direct] cleanup after coordinator create failure")
+        logger.exception("[init-direct] coordinator create failed")
+        return False, str(exc)
+
+
 async def _append_thread_message(
     client: httpx.AsyncClient,
     base: str,
@@ -456,6 +654,8 @@ def _run_payload(
     new_message: str,
     excluded_tools: list[str],
     skill_stop_names: list[str],
+    thinking_enabled: bool = True,
+    reasoning_effort: str = "medium",
 ) -> dict[str, Any]:
     """构造 ``POST /api/threads/{thread_id}/runs/stream`` 的请求体。
 
@@ -463,6 +663,10 @@ def _run_payload(
     - ``excluded_tools``：按路由裁剪工具面（intent 仅澄清、special 禁派活等）。
     - ``skill_stop_names``：leader 侧配合 SkillStopMiddleware 在 ``agent_orchestration``
       调用后截断图，以便网关从 AIMessage.tool_calls 解析派活列表。
+    - ``thinking_enabled`` / ``reasoning_effort``：默认开 CoT + medium，适合 Step 1 澄清
+      与子智能体交付这类需要推理的场景。**推荐弹窗与总控派活**是短决策任务，调用方
+      应传 ``thinking_enabled=False`` + ``reasoning_effort="low"``，省掉模型先吐
+      reasoning tokens 才开口的时间，显著降低前端"调度中"首字节延迟。
     """
     return {
         "input": {
@@ -479,11 +683,17 @@ def _run_payload(
             "agent_name": agent_name,
             "model_name": model_name,
             "mode": "pro",
-            "reasoning_effort": "medium",
-            "thinking_enabled": True,
+            "reasoning_effort": reasoning_effort,
+            "thinking_enabled": thinking_enabled,
             "is_plan_mode": False,
             "subagent_enabled": False,
             "thread_id": thread_id,
+            # 圆桌四个 router(intent / recommend / leader / special)都是临时任务,
+            # 用户个人记忆与本次研讨无关。MemoryMiddleware 的 Hindsight recall 是
+            # 同步阻塞 HTTP 调用(单次 timeout 15s),如果记忆服务慢/不通会让前端
+            # "调度中"卡很久;这里默认跳过,builtin USER.md/MEMORY.md 仍通过系统
+            # 提示注入不受影响。
+            "memory_recall_disabled": True,
         },
         "stream_mode": ["messages-tuple", "values"],
         "stream_subgraphs": True,
@@ -534,111 +744,132 @@ async def init_multi_agent(request: Request, payload: dict = Body(...)) -> Strea
         _validate_agent_id(name, "agent_names entry")
     _validate_agent_id(main_agent_name, "main_agent_name")
 
-    base = _loopback_base(request)
-    headers = _auth_headers(request)
-
     def _frame(payload: dict[str, Any]) -> str:
         return f"data: {json.dumps(payload, ensure_ascii=False)}\n\n"
 
     async def stream_generator() -> AsyncIterator[str]:
-        # TCP loopback 到 127.0.0.1:<gateway port>。client 配置见 _make_loopback_client：
-        # trust_env=False 防 HTTP_PROXY 拦截,timeout=None 容纳 SSE 长连接。
-        async with _make_loopback_client(request) as client:
-            try:
-                # Per-seat prepare task — same body as before, but we no longer
-                # await them with asyncio.gather. Instead, asyncio.as_completed
-                # surfaces them in REAL completion order so we can emit a
-                # seat_ready frame the moment each finishes.
-                async def _prepare_sub_agent(sub_id: str) -> tuple[str, str, str, str]:
-                    info = await _get_agent(client, base, headers, sub_id)
-                    display_name = str(info.get("name") or sub_id)
-                    description = info.get("description", "") or ""
-                    thread_id = await _create_thread(client, base, headers)
-                    return sub_id.lower(), thread_id, display_name, description
+        # init 阶段 fast path:全部走同进程直调(_create_thread_direct /
+        # _get_agents_batch_direct / _create_coordinator_direct),不再走 HTTP
+        # loopback —— TCP + 鉴权中间件 + Pydantic 反序列化每次 10-30ms,N+1 个席位
+        # 累计就是"点进 Step 2 后席位一颗颗亮"的卡顿来源。
+        try:
+            t_init_start = time.perf_counter()
+            # 1) 一次 DB 查询拿到所有席位的 name/description,替代之前的 N 个并行
+            #    GET /api/agents/{id}。SOUL 拼接需要描述,这里一次性拿齐。
+            agent_meta = await _get_agents_batch_direct(request, agent_names)
+            t_meta_done = time.perf_counter()
 
-                tasks = [asyncio.create_task(_prepare_sub_agent(sid)) for sid in agent_names]
-                prepared: list[tuple[str, str, str, str]] = []
-                try:
-                    for fut in asyncio.as_completed(tasks):
-                        sid, thread_id, display_name, description = await fut
-                        prepared.append((sid, thread_id, display_name, description))
-                        yield _frame({
-                            "event": "seat_ready",
-                            "agent_name": sid,
-                            "thread_id": thread_id,
-                            "display_name": display_name,
-                            "description": description,
-                        })
-                except Exception:
-                    # Cancel any still-pending sibling so we don't leak tasks
-                    # past the AsyncClient close.
-                    for t in tasks:
-                        if not t.done():
-                            t.cancel()
-                    raise
-
-                agent_threads: dict[str, str] = {sid: thread_id for sid, thread_id, _, _ in prepared}
-                descriptions: list[str] = [
-                    f"- agent_name: {sid}（{display_name}）：{description}"
-                    for sid, _, display_name, description in prepared
-                ]
-
-                # 动态 SOUL：把本次 init 的席位列表写进总控 prompt，供 agent_orchestration 派活。
-                soul = (
-                    "#核心定位：\n"
-                    "用途：根据用户的任务目标,调用其他智能体干活,只负责协调汇总,"
-                    "当你觉得已有信息支持回答用户问题时候,停止调度,并输出最后的结果\n"
-                    "#调度方法：\n"
-                    "通过使用agent_orchestration技能调用其他智能体干活,使用技能时传入agent_name和需要做的活。"
-                    "注意：agent_name 必须严格使用下方列出的英文 id（例如 roundtable-intelligence,"
-                    "或形如 02714cbe6e64406a8a4659f0e3d9c0b8 这样的 UUID）,"
-                    "不要把括号里的中文显示名拼进 agent_name 里。\n"
-                    "#关键约束(必读)：\n"
-                    "1. **不要对同一子智能体重复派同样的活**：每次派活前回顾对话历史,"
-                    "如果某个子智能体已经针对你正要派的任务完成过交付("
-                    "看到形如\"子智能体[名称]完成XX工作,交付内容为:...\"的 human 消息),"
-                    "就直接基于已有交付推进,**不要重复派活**,除非你确实有**具体的、不一样的**补充问题。\n"
-                    "2. **看到交付要会用**：子智能体的交付内容会作为 human 消息追加到你的对话历史里,"
-                    "你能完整看见。当各方信息已足够形成结论时,**直接综合输出最终方案**(此时不再调用任何工具),"
-                    "让讨论收敛。\n"
-                    "3. **避免无意义循环**：如果连续两轮都没有新信息流入,立刻停止派活并基于现有素材给出最终结论。\n"
-                    "#可调度智能体：\n"
-                    + "\n".join(descriptions)
+            # 2) 每个席位 thread 并行创建(直调 thread_store + checkpointer),
+            #    用 asyncio.as_completed 保持"先完先发 seat_ready"的体验。
+            async def _prepare_sub_agent(sub_id: str) -> tuple[str, str, str, str]:
+                thread_id = await _create_thread_direct(request, metadata=_ROUNDTABLE_THREAD_METADATA)
+                meta = agent_meta.get(sub_id.lower(), {})
+                return (
+                    sub_id.lower(),
+                    thread_id,
+                    str(meta.get("name") or sub_id),
+                    str(meta.get("description") or ""),
                 )
 
-                coord_thread = await _create_thread(client, base, headers)
-                agent_threads[main_agent_name] = coord_thread
-                ok, result = await _create_agent(
-                    client,
-                    base,
-                    headers,
+            tasks = [asyncio.create_task(_prepare_sub_agent(sid)) for sid in agent_names]
+            prepared: list[tuple[str, str, str, str]] = []
+            try:
+                for fut in asyncio.as_completed(tasks):
+                    sid, thread_id, display_name, description = await fut
+                    prepared.append((sid, thread_id, display_name, description))
+                    yield _frame({
+                        "event": "seat_ready",
+                        "agent_name": sid,
+                        "thread_id": thread_id,
+                        "display_name": display_name,
+                        "description": description,
+                    })
+            except Exception:
+                # Cancel any still-pending sibling so partially-prepared seats
+                # don't keep running past the stream close.
+                for t in tasks:
+                    if not t.done():
+                        t.cancel()
+                raise
+            t_seats_done = time.perf_counter()
+
+            agent_threads: dict[str, str] = {sid: thread_id for sid, thread_id, _, _ in prepared}
+            descriptions: list[str] = [
+                f"- agent_name: {sid}（{display_name}）：{description}"
+                for sid, _, display_name, description in prepared
+            ]
+
+            # 动态 SOUL：把本次 init 的席位列表写进总控 prompt，供 agent_orchestration 派活。
+            soul = (
+                "#核心定位：\n"
+                "用途：根据用户的任务目标,调用其他智能体干活,只负责协调汇总,"
+                "当你觉得已有信息支持回答用户问题时候,停止调度,并输出最后的结果\n"
+                "#调度方法：\n"
+                "通过使用agent_orchestration技能调用其他智能体干活,使用技能时传入agent_name和需要做的活。"
+                "注意：agent_name 必须严格使用下方列出的英文 id（例如 roundtable-intelligence,"
+                "或形如 02714cbe6e64406a8a4659f0e3d9c0b8 这样的 UUID）,"
+                "不要把括号里的中文显示名拼进 agent_name 里。\n"
+                "#关键约束(必读)：\n"
+                "1. **不要对同一子智能体重复派同样的活**：每次派活前回顾对话历史,"
+                "如果某个子智能体已经针对你正要派的任务完成过交付("
+                "看到形如\"子智能体[名称]完成XX工作,交付内容为:...\"的 human 消息),"
+                "就直接基于已有交付推进,**不要重复派活**,除非你确实有**具体的、不一样的**补充问题。\n"
+                "2. **看到交付要会用**：子智能体的交付内容会作为 human 消息追加到你的对话历史里,"
+                "你能完整看见。当各方信息已足够形成结论时,**直接综合输出最终方案**(此时不再调用任何工具),"
+                "让讨论收敛。\n"
+                "3. **避免无意义循环**：如果连续两轮都没有新信息流入,立刻停止派活并基于现有素材给出最终结论。\n"
+                "#可调度智能体：\n"
+                + "\n".join(descriptions)
+            )
+
+            # 3) coordinator thread + agent 并行创建。thread 与 agent 之间无依赖,
+            #    asyncio.gather 比串行省一个直调往返的开销。
+            coord_thread_task = asyncio.create_task(
+                _create_thread_direct(request, metadata=_ROUNDTABLE_THREAD_METADATA)
+            )
+            coord_agent_task = asyncio.create_task(
+                _create_coordinator_direct(
+                    request,
+                    agent_id=main_agent_name,
                     name=main_agent_name,
                     description="你是总控控制协调智能体,负责协调其他智能体干活",
+                    soul=soul,
                     model=model,
                     skills=["agent_orchestration"],
-                    soul=soul,
-                    agent_id=main_agent_name,
                 )
-                if not ok and isinstance(result, str) and "exists" not in result:
-                    yield _frame({"event": "error", "detail": f"create coordinator agent failed: {result}"})
-                    return
+            )
+            coord_thread = await coord_thread_task
+            agent_threads[main_agent_name] = coord_thread
+            ok, result = await coord_agent_task
+            if not ok and isinstance(result, str) and "exists" not in result:
+                yield _frame({"event": "error", "detail": f"create coordinator agent failed: {result}"})
+                return
+            t_coord_done = time.perf_counter()
+            logger.info(
+                "[init-direct] meta=%.3fs seats=%.3fs coord=%.3fs total=%.3fs seats_count=%d",
+                t_meta_done - t_init_start,
+                t_seats_done - t_meta_done,
+                t_coord_done - t_seats_done,
+                t_coord_done - t_init_start,
+                len(prepared),
+            )
 
-                yield _frame({
-                    "event": "coordinator_ready",
-                    "main_agent_name": main_agent_name,
-                    "thread_id": coord_thread,
-                })
-                yield _frame({
-                    "event": "init_done",
-                    "main_agent_name": main_agent_name,
-                    "thread_ids": agent_threads,
-                })
-            except HTTPException as exc:
-                logger.warning("multi-agent init HTTPException: %s %s", exc.status_code, exc.detail)
-                yield _frame({"event": "error", "detail": f"[{exc.status_code}] {exc.detail}"})
-            except Exception as exc:
-                logger.exception("multi-agent init unexpected failure")
-                yield _frame({"event": "error", "detail": f"unexpected: {exc!r}"})
+            yield _frame({
+                "event": "coordinator_ready",
+                "main_agent_name": main_agent_name,
+                "thread_id": coord_thread,
+            })
+            yield _frame({
+                "event": "init_done",
+                "main_agent_name": main_agent_name,
+                "thread_ids": agent_threads,
+            })
+        except HTTPException as exc:
+            logger.warning("multi-agent init HTTPException: %s %s", exc.status_code, exc.detail)
+            yield _frame({"event": "error", "detail": f"[{exc.status_code}] {exc.detail}"})
+        except Exception as exc:
+            logger.exception("multi-agent init unexpected failure")
+            yield _frame({"event": "error", "detail": f"unexpected: {exc!r}"})
 
     return StreamingResponse(
         stream_generator(),
@@ -825,6 +1056,11 @@ async def _leader_run(
         new_message=new_message,
         excluded_tools=["web_search"],
         skill_stop_names=effective_stop_names,
+        # 总控派活是"下一步派谁、什么任务"的短决策，不需要 CoT。
+        # 关掉 thinking + low reasoning 让"调度中"几乎瞬间转入"正在派活"，
+        # 子智能体仍保留 thinking（在 _special_run 里默认 True），保证交付质量。
+        thinking_enabled=False,
+        reasoning_effort="low",
     )
     t_payload_built = time.perf_counter()
     logger.info(
diff --git a/offline-backend-20260512/backend/app/gateway/routers/recommend.py b/offline-backend-20260512/backend/app/gateway/routers/recommend.py
index 6ff43224..7f666e66 100644
--- a/offline-backend-20260512/backend/app/gateway/routers/recommend.py
+++ b/offline-backend-20260512/backend/app/gateway/routers/recommend.py
@@ -49,6 +49,7 @@ from fastapi.responses import StreamingResponse
 
 from app.gateway.routers._roundtable_seed import ensure_roundtable_functional_agents
 from app.gateway.routers.multi_agent import (
+    _ROUNDTABLE_THREAD_METADATA,
     _auth_headers,
     _create_thread,
     _flatten_content,
@@ -237,7 +238,7 @@ async def stream_recommend(request: Request, payload: dict = Body(...)) -> Strea
         async with _make_loopback_client(request) as client:
             try:
                 # 每次推荐独立 thread；prompt 已包含完整 intent + 候选列表，无需多轮。
-                thread_id = await _create_thread(client, base, headers)
+                thread_id = await _create_thread(client, base, headers, metadata=_ROUNDTABLE_THREAD_METADATA)
 
                 body = _run_payload(
                     agent_name=RECOMMENDER_AGENT_ID,
@@ -253,6 +254,12 @@ async def stream_recommend(request: Request, payload: dict = Body(...)) -> Strea
                         "ask_clarification",
                     ],
                     skill_stop_names=[],
+                    # 推荐是"从候选池挑 2-6 个"的短分类任务，不需要 CoT。
+                    # 关掉 thinking + 用 low reasoning，避免模型先吐数千 reasoning
+                    # tokens 才开始输出 [RECOMMEND_READY]，前端"等待推荐结果..."
+                    # 从 10-30s 降到 2-5s。
+                    thinking_enabled=False,
+                    reasoning_effort="low",
                 )
 
                 captured: list[str] = []
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/agents/middlewares/memory_middleware.py b/offline-backend-20260512/backend/packages/harness/deerflow/agents/middlewares/memory_middleware.py
index 6a067ef0..b48c06be 100644
--- a/offline-backend-20260512/backend/packages/harness/deerflow/agents/middlewares/memory_middleware.py
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/agents/middlewares/memory_middleware.py
@@ -137,7 +137,17 @@ class MemoryMiddleware(AgentMiddleware[MemoryMiddlewareState]):
 
         召回结果包在 ``<memory-context>`` 标签里并带系统提示,告诉模型这是
         背景信息而非用户的新输入。
+
+        **跳过开关**:若 ``runtime.context.memory_recall_disabled`` 为真,直接
+        返回 None。圆桌规划等临时性任务(intent / recommend / leader / special)
+        不需要从用户个人记忆里召回,Hindsight HTTP 同步阻塞会显著增加 LLM 首
+        字节延迟(前端"调度中"卡顿);由路由层通过 ``_run_payload`` 的 context
+        字段统一关闭。
         """
+        runtime = getattr(request, "runtime", None)
+        if runtime is not None and getattr(runtime, "context", None):
+            if runtime.context.get("memory_recall_disabled"):
+                return None
         if not self._injection_enabled:
             return None
         config = self._memory_config or get_memory_config()
diff --git a/offline-backend-20260512/backend/packages/harness/deerflow/config/agents_config.py b/offline-backend-20260512/backend/packages/harness/deerflow/config/agents_config.py
index 63358dd7..3fddcd22 100644
--- a/offline-backend-20260512/backend/packages/harness/deerflow/config/agents_config.py
+++ b/offline-backend-20260512/backend/packages/harness/deerflow/config/agents_config.py
@@ -1,7 +1,9 @@
 """Configuration and loaders for custom agents."""
 
 import logging
+import os
 import re
+import threading
 from typing import Any
 
 import yaml
@@ -13,6 +15,25 @@ logger = logging.getLogger(__name__)
 
 SOUL_FILENAME = "SOUL.md"
 AGENT_ID_PATTERN = re.compile(r"^[A-Za-z0-9_-]+$")
+
+# Per-file mtime caches. These are read on every /api/agents list/detail request
+# (one read per agent) — caching keyed by (path, mtime_ns, size) is correct
+# because any edit to the file updates mtime, and an external tool re-writing
+# the same bytes doesn't actually change the result we'd return. Cache size is
+# unbounded but lookup is O(1) and entries are tiny (one parsed dict / string
+# per agent file); for the order of N≤10⁴ agents the memory cost is negligible.
+_config_cache: dict[str, tuple[tuple[int, int], "AgentConfig | None"]] = {}
+_soul_cache: dict[str, tuple[tuple[int, int], str | None]] = {}
+_cache_lock = threading.Lock()
+
+
+def _file_stat_key(path) -> tuple[int, int] | None:
+    """Return (mtime_ns, size) for cache invalidation, or None when missing."""
+    try:
+        st = os.stat(path)
+    except OSError:
+        return None
+    return (st.st_mtime_ns, st.st_size)
 # Backward-compatible alias. Historically this validated the display name;
 # after the DB-backed agent table, display names can be Chinese and duplicated.
 # The pattern now applies only to storage/runtime ids.
@@ -94,6 +115,18 @@ def load_agent_config(agent_id: str | None) -> AgentConfig | None:
         )
         return None
 
+    # mtime-based cache. The config file is rewritten every time the agent is
+    # edited via PUT /api/agents/{id}, which bumps mtime — so the next read
+    # picks up the change automatically. Missing config_file = key None below,
+    # bypassing the cache (cheap path: just return AgentConfig with id/name).
+    cache_path_key = str(config_file)
+    stat_key = _file_stat_key(config_file) if config_file.exists() else None
+    if stat_key is not None:
+        with _cache_lock:
+            cached = _config_cache.get(cache_path_key)
+        if cached is not None and cached[0] == stat_key:
+            return cached[1]
+
     data: dict[str, Any] = {}
     if config_file.exists():
         try:
@@ -112,7 +145,11 @@ def load_agent_config(agent_id: str | None) -> AgentConfig | None:
     known_fields = set(AgentConfig.model_fields.keys())
     data = {k: v for k, v in data.items() if k in known_fields}
 
-    return AgentConfig(**data)
+    result = AgentConfig(**data)
+    if stat_key is not None:
+        with _cache_lock:
+            _config_cache[cache_path_key] = (stat_key, result)
+    return result
 
 
 def load_agent_soul(agent_id: str | None) -> str | None:
@@ -131,8 +168,21 @@ def load_agent_soul(agent_id: str | None) -> str | None:
     soul_path = agent_dir / SOUL_FILENAME
     if not soul_path.exists():
         return None
+    # mtime-based cache, same rationale as load_agent_config: SOUL.md is
+    # rewritten on edit (PUT /api/agents/{id}), which bumps mtime.
+    cache_path_key = str(soul_path)
+    stat_key = _file_stat_key(soul_path)
+    if stat_key is not None:
+        with _cache_lock:
+            cached = _soul_cache.get(cache_path_key)
+        if cached is not None and cached[0] == stat_key:
+            return cached[1]
     content = soul_path.read_text(encoding="utf-8").strip()
-    return content or None
+    result = content or None
+    if stat_key is not None:
+        with _cache_lock:
+            _soul_cache[cache_path_key] = (stat_key, result)
+    return result
 
 
 def list_custom_agents() -> list[AgentConfig]:
diff --git a/web-code/App.css b/web-code/App.css
new file mode 100644
index 00000000..a7b94ee4
--- /dev/null
+++ b/web-code/App.css
@@ -0,0 +1,383 @@
+#root {
+  margin: 0 auto;
+}
+
+:root {
+  /* 深色主题（默认） */
+  --bg: #0f1117;
+  --surface: #161b22;
+  --card: #1c2128;
+  --border: #30363d;
+  --text: #e6edf3;
+  --text-muted: #8b949e;
+  --accent: #58a6ff;
+  --green: #3fb950;
+  --yellow: #d29922;
+  --red: #f85149;
+  --purple: #8957e5;
+
+  --phase-starting: var(--accent);
+  --phase-diverging: var(--yellow);
+  --phase-closing: var(--green);
+  --phase-done: var(--purple);
+
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  /* font-size: 14px; */
+  line-height: 1.6;
+  color: var(--text);
+  background: var(--bg);
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+
+/* 多智能体检索 */
+/* 浅色主题 */
+[data-theme="light"] {
+  --bg: #f5f7fa;
+  --surface: #ffffff;
+  --card: #f0f2f5;
+  --border: #e2e8f0;
+  --text: #1a202c;
+  --text-muted: #718096;
+  --accent: #3182ce;
+  --green: #38a169;
+  --yellow: #d69e2e;
+  --red: #e53e3e;
+  --purple: #805ad5;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+}
+
+#root {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* App layout */
+.app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+/* Idle: centered form */
+.app-idle {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 24px;
+  background: var(--bg);
+}
+
+.app-idle-header {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+}
+
+.app-idle-scroll {
+  align-items: flex-start;
+  overflow-y: auto;
+}
+
+/* Running / done: two-column */
+.app-running {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.app-header {
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  padding: 10px 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.app-header-logo {
+  font-weight: 700;
+  /* font-size: 15px; */
+  color: var(--accent);
+  letter-spacing: 0.5px;
+}
+
+.app-header-task {
+  flex: 1;
+  color: var(--text-muted);
+  /* font-size: 13px; */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-header-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+/* 主题切换按钮 */
+.theme-toggle {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  padding: 4px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  /* font-size: 12px; */
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  transition: all 0.2s;
+}
+
+.theme-toggle:hover {
+  color: var(--text);
+  border-color: var(--text-muted);
+  background: var(--card);
+}
+
+.app-body {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.app-sidebar {
+  width: 240px;
+  flex-shrink: 0;
+  overflow-y: auto;
+  border-right: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.app-main {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+.app-progress-sidebar {
+  width: 300px;
+  flex-shrink: 0;
+  overflow-y: auto;
+  border-left: 1px solid var(--border);
+  background: var(--surface);
+}
+
+/* Buttons */
+button {
+  cursor: pointer;
+  border: none;
+  border-radius: 6px;
+  padding: 7px 16px;
+  /* font-size: 13px; */
+  font-family: inherit;
+  transition: opacity 0.15s, background 0.15s;
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: var(--accent);
+  color: #000;
+  font-weight: 600;
+}
+
+.btn-primary:hover:not(:disabled) {
+  opacity: 0.85;
+}
+
+.btn-danger {
+  background: transparent;
+  color: var(--red);
+  border: 1px solid var(--red);
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: rgba(248, 81, 73, 0.1);
+}
+
+.btn-secondary {
+  background: transparent;
+  color: var(--text-muted);
+  border: 1px solid var(--border);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  color: var(--text);
+  border-color: var(--text-muted);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--text-muted);
+  padding: 4px 8px;
+  /* font-size: 12px; */
+}
+
+.btn-ghost:hover {
+  color: var(--text);
+}
+
+/* Badges */
+.badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 12px;
+  /* font-size: 11px; */
+  font-weight: 600;
+  letter-spacing: 0.3px;
+}
+
+.badge-starting { background: rgba(88, 166, 255, 0.15); color: var(--accent); }
+.badge-diverging { background: rgba(210, 153, 34, 0.15); color: var(--yellow); }
+.badge-closing { background: rgba(63, 185, 80, 0.15); color: var(--green); }
+.badge-done { background: rgba(137, 87, 229, 0.15); color: var(--purple); }
+.badge-default { background: rgba(139, 148, 158, 0.15); color: var(--text-muted); }
+
+/* Spinner */
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.spinner {
+  display: inline-block;
+  animation: spin 1s linear infinite;
+}
+
+/* Reference cite */
+.ref-cite {
+  display: inline-block;
+  background: rgba(88, 166, 255, 0.2);
+  color: var(--accent);
+  border-radius: 4px;
+  padding: 0 3px;
+  font-family: 'SFMono-Regular', Consolas, monospace;
+  /* font-size: 11px; */
+  cursor: pointer;
+  position: relative;
+}
+
+.ref-cite:hover::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--card);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 4px 8px;
+  border-radius: 4px;
+  /* font-size: 11px; */
+  white-space: nowrap;
+  z-index: 100;
+  font-family: inherit;
+  pointer-events: none;
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Error banner */
+.error-banner {
+  background: rgba(248, 81, 73, 0.1);
+  border: 1px solid var(--red);
+  border-radius: 6px;
+  padding: 8px 12px;
+  color: var(--red);
+  /* font-size: 13px; */
+  margin-bottom: 12px;
+}
+
+@media (max-width: 1200px) {
+  .app-progress-sidebar {
+    width: 260px;
+  }
+}
+
+@media (max-width: 960px) {
+  .app-body {
+    flex-direction: column;
+  }
+
+  .app-sidebar,
+  .app-progress-sidebar {
+    width: 100%;
+    border-right: none;
+    border-left: none;
+    border-bottom: 1px solid var(--border);
+    max-height: 260px;
+  }
+
+  .app-main {
+    padding: 14px;
+  }
+}
+
+
+@keyframes qa-typing-dot {
+  0%, 80%, 100% {
+    transform: translateY(0);
+    opacity: 0.35;
+  }
+
+  40% {
+    transform: translateY(-5px);
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/web-code/App.tsx b/web-code/App.tsx
new file mode 100644
index 00000000..91feb81f
--- /dev/null
+++ b/web-code/App.tsx
@@ -0,0 +1,798 @@
+import {
+  Routes,
+  Route,
+  useLocation,
+  useParams,
+  Navigate,
+  useNavigate,
+  useSearchParams,
+} from "react-router-dom";
+import "./App.css";
+import { ThemeProvider } from "./contexts/ThemeContext";
+import { ChatProvider } from "./contexts/ChatContext";
+import Sidebar, { PageType } from "./components/Sidebar";
+import Header from "./components/Header";
+import SceneList from "./pages/SceneList";
+import SceneDetail from "./pages/SceneDetail";
+import AgentList from "./pages/AgentList";
+import AgentDetail from "./pages/AgentDetail";
+import AgentTrial from "./pages/AgentTrial";
+import TaskList from "./components/taskManagement/TaskList";
+import TaskCreate from "./components/taskManagement/TaskCreate";
+import TaskSingle from "./components/taskManagement/TaskSingle";
+import TaskWorkspace from "./components/taskManagement/TaskWorkspace";
+import TaskConsultCreate from "./components/taskManagement/TaskConsultCreate";
+import TaskConsult from "./components/taskManagement/TaskConsult";
+import TaskConsultResult from "./components/taskManagement/TaskConsultResult";
+import StrategyResult from "./pages/StrategyResult";
+import FinalPlan from "./pages/FinalPlan";
+import SystemSettings from "./pages/SystemSettings";
+import TaskDashboard from "./components/taskManagement/TaskDashboard";
+import TaskListPage from "./components/taskManagement/TaskListPage";
+import QA from "./pages/QA";
+import QARecords from "./pages/QARecords";
+import ResultManagement from "./pages/ResultManagement";
+import ResultDetail from "./pages/ResultDetail";
+import ZZResourceManagement from "./pages/ZZResourceManagement";
+import NetworkActorResourceManagement from "./pages/NetworkActorResourceManagement";
+import KnowledgeBaseResourceManagement from "./pages/KnowledgeBaseResourceManagement";
+import EvaluationIndexResourceManagement from "./pages/EvaluationIndexResourceManagement";
+import LightAppSquare from "./pages/LightAppSquare";
+import LightAppRun from "./pages/LightAppRun";
+import LightAppRecords from "./pages/LightAppRecords";
+import { LightAppType } from "./pages/LightAppSquare";
+import { MessagePlugin, Button, Space } from "tdesign-react";
+import { useState, useEffect } from "react";
+import TaskManagement from "./pages/TaskManagement";
+import TaskAnalyzes from "./components/taskManagement/TaskAnalyzes";
+import SentimentAnalyzes from "./components/taskManagement/SentimentAnalyzes";
+import { ActionAnalyzes } from "./components/taskManagement/ActionAnalyzes";
+import MopeChat from "./components/qa/MopeChat";
+
+import QACenterPage from "./components/qa/QACenterPage";
+import GeneralQA from "./components/qa/GeneralQa";
+import AgentQA from "./components/qa/AgentQA";
+import CollaborativeQA from "./components/qa/CollaborativeQA";
+import ResultManagementLayout from "./components/result/ResultManagementLayout";
+import ResultPlanning from "./components/result/ResultPlanning";
+import ResultMnty from "./components/result/ResultMnty";
+import ResultEffectPg from "./components/result/ResultEffectPg";
+import ResultXk from "./components/result/ResultXk";
+import ResultDq from "./components/result/ResultDq";
+import ResultOther from "./components/result/ResultOther";
+import ExpertsAgentsPage from "./pages/AgentListExperts";
+import AgentExpertCenterPage from "./components/agent/AgentExpertCenterPage";
+import AgentExpertEditPage from "./components/agent/AgentExpertEditPage";
+import AgentChatPage from "./components/agent/AgentChatPage";
+import SkillsWorkshop from "./components/agent/SkillsWorkshop";
+import SkillCreatorPage from "./components/agent/SkillCreatorPage";
+import TemplateEditor from "./components/qa/TemplateEditor";
+import Template6BEditor from "./components/qa/Template6BEditor";
+import SixStepChatPage from "./components/angentchat/SixStepChatPage";
+import TopicResearch from "./components/qa/TopicResearch";
+// import Login from './pages/Login';
+import TaskChat from "./components/qa/TaskChat";
+import ActionChat from "./components/qa/ActionChat";
+import GAFromQA from "./components/qa/GAFrom";
+import XingdongTyPage from "./components/taskManagement/XingdongTy";
+import FanganTyPage from "./components/taskManagement/FanganTy";
+import XXTyPage from "./components/taskManagement/XxTy";
+import ObservabilityPage from './pages/ObservabilityPage';
+import AgentCardList from './components/angentchat/AgentCardList';
+import AgentEditPage from './components/angentchat/AgentEditPage';
+import FileSkillsWorkshop from './components/agent/FileSkillsWorkshop';
+import TaskPgFrom from './components/taskManagement/TaskPgFrom';
+import Login from './pages/Login';
+import TaskXkFrom from "./components/taskManagement/TaskXkFrom";
+import GAFromNewQA from "./components/qa/GAFromNew";
+
+function AppContent() {
+  const location = useLocation();
+  const params = useParams();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  // 从查询参数中获取appId
+  const appIdFromQuery = searchParams.get("appId");
+
+  // 页面初始化时打印params
+  useEffect(() => {
+    console.log("页面初始化，当前params:", params);
+    console.log("查询参数appId:", appIdFromQuery);
+  }, []);
+
+  // 从路径中提取当前页面ID，忽略层级结构
+  const getCurrentPageFromPath = (path: string): PageType => {
+    console.log(path, "path");
+    const parts = path.split("/").filter(Boolean);
+    if (parts.length === 0) return "dashboard";
+
+    // 提取最后一个部分作为页面ID
+    let pageId = parts[parts.length - 1];
+
+    // 处理特殊情况
+    if (pageId === "index") {
+      pageId = parts[parts.length - 2] || "dashboard";
+    }
+
+    return pageId as PageType;
+  };
+
+  const currentPage = getCurrentPageFromPath(location.pathname);
+
+  const getTaskMenuConfig = (page: PageType) => {
+    const configs: Record<
+      string,
+      { title: string; category: string; subCategory: string }
+    > = {
+      "xk-task-jc": {
+        title: "任务JC",
+        category: "XK任务",
+        subCategory: "XK任务",
+      },
+      "xk-task-dispatch": {
+        title: "任务调度",
+        category: "XK任务",
+        subCategory: "XK任务",
+      },
+      "plan-task-fx": {
+        title: "任务FX",
+        category: "规划任务",
+        subCategory: "规划任务",
+      },
+      "plan-task-action": {
+        title: "行动CE",
+        category: "规划任务",
+        subCategory: "规划任务",
+      },
+      "mnty-task-mechanism": {
+        title: "XDTY任务",
+        category: "MNTY任务",
+        subCategory: "MNTY任务",
+      },
+      "mnty-task-plan": {
+        title: "方案TY任务",
+        category: "MNTY任务",
+        subCategory: "MNTY任务",
+      },
+      "mnty-task-zsty": {
+        title: "XXTY任务",
+        category: "MNTY任务",
+        subCategory: "MNTY任务",
+      },
+      "effect-task-pg": {
+        title: "任务PG",
+        category: "效果PG任务",
+        subCategory: "效果PG任务",
+      },
+      "effect-action-pg": {
+        title: "行动PG",
+        category: "效果PG任务",
+        subCategory: "效果PG任务",
+      },
+      "effect-info-pg": {
+        title: "信息PG",
+        category: "效果PG任务",
+        subCategory: "效果PG任务",
+      },
+      "effect-account-pg": {
+        title: "账号PG",
+        category: "效果PG任务",
+        subCategory: "效果PG任务",
+      },
+    };
+    return (
+      configs[page] || { title: "任务管理", category: "", subCategory: "" }
+    );
+  };
+
+  const isTaskSubMenuPage = (page: PageType): boolean => {
+    return [
+      "xk-task-jc",
+      "xk-task-dispatch",
+      "plan-task-fx",
+      "plan-task-action",
+      "mnty-task-mechanism",
+      "mnty-task-plan",
+      "mnty-task-zsty",
+      "effect-task-pg",
+      "effect-action-pg",
+      "effect-info-pg",
+      "effect-account-pg",
+    ].includes(page);
+  };
+
+  const handleNavigate = (page: PageType, appId?: string) => {
+    console.log("导航到:", page, appId);
+
+    // 根据页面ID构建正确的导航路径
+    let path = `/${page}`;
+
+    // 任务管理下的子页面
+    if (
+      page.startsWith("xk-task") ||
+      page.startsWith("plan-task") ||
+      page.startsWith("mnty-task") ||
+      page.startsWith("effect-task")
+    ) {
+      const taskType = page.split("-")[0] + "-" + page.split("-")[1];
+      path = `/task-management/${taskType}/${page}`;
+    }
+    // 任务管理下的其他页面
+    else if (
+      [
+        "dashboard",
+        "task-create",
+        "task-single",
+        "task-scene",
+        "task-consult-create",
+        "task-consult",
+        "task-consult-result",
+        "task-list",
+      ].includes(page)
+    ) {
+      path = `/task-management/${page}`;
+    }
+    // 问答中心下的子页面
+    else if (
+      [
+        "new-qa",
+        "general-qa",
+        "agent-qa",
+        "multi-agent-qa",
+        "qa-records",
+      ].includes(page)
+    ) {
+      path = `/qa-center/${page}`;
+    }
+    // 轻应用中心下的子页面
+    else if (
+      ["light-app-square", "light-app-records", "light-app-run"].includes(page)
+    ) {
+      path = `/light-app-center/${page}`;
+      // 如果是light-app-run且有appId，添加到路径
+      if (page === "light-app-run" && appId) {
+        path = `/light-app-center/light-app-run?appId=${appId}`;
+      }
+    }
+    // 智能体管理下的子页面
+    else if (["agent-trial"].includes(page)) {
+      path = `/agent-list/${page}`;
+    }
+    // 结果管理下的子页面
+    else if (
+      [
+        "result-planning",
+        "result-mnty",
+        "result-effect-pg",
+        "result-xk",
+        "result-dq",
+        "result-other",
+        "result-detail",
+      ].includes(page)
+    ) {
+      path = `/result-management/${page}`;
+    }
+    // 资源管理下的子页面
+    else if (
+      [
+        "resource-zz",
+        "resource-network-actor",
+        "resource-knowledge-base",
+        "resource-evaluation-index",
+      ].includes(page)
+    ) {
+      path = `/resource-management/${page}`;
+    }
+
+    navigate(path);
+  };
+
+  return (
+    <div className="min-h-screen theme-bg theme-transition">
+      <Sidebar currentPage={currentPage} />
+      <div className="ml-64">
+        <Header />
+        <main className="p-6 theme-transition">
+          {appIdFromQuery}
+          <Routes>
+            <Route path="/" element={<Navigate to="/dashboard" replace />} />
+
+            {/* 问答中心 */}
+            {/* <Route path="/qa-center" element={<QA onNavigate={handleNavigate} initialMode="new" />} />
+            <Route path="/qa-center/new-qa" element={<QA onNavigate={handleNavigate} initialMode="new" />} />
+            <Route path="/qa-center/general-qa" element={<QA onNavigate={handleNavigate} />} />
+            <Route path="/qa-center/agent-qa" element={<QA onNavigate={handleNavigate} />} />
+            <Route path="/qa-center/multi-agent-qa" element={<QA onNavigate={handleNavigate} initialMode="multi-agent" />} />
+            <Route path="/qa-center/qa-records" element={<QARecords onNavigate={handleNavigate} />} /> */}
+            {/* 问答中心 - 嵌套路由 */}
+            <Route path="/qa-center" element={<QACenterPage />}>
+              {/* 默认重定向到通用问答页面 */}
+              <Route
+                index
+                element={<Navigate to="/qa-center/general-qa" replace />}
+              />
+              {/* 新建问答页面 - 初始化模式为新建 */}
+              <Route
+                path="new-qa"
+                element={
+                  <GeneralQA onNavigate={handleNavigate} initialMode="new" />
+                }
+              />
+              {/* 通用问答页面 - 初始化模式为通用 */}
+              <Route
+                path="general-qa"
+                element={
+                  <GeneralQA
+                    onNavigate={handleNavigate}
+                    initialMode="general"
+                  />
+                }
+              />
+              {/* 智能体问答页面 - 基于AI智能体的问答功能 */}
+              <Route
+                path="agent-qa"
+                element={<AgentQA onNavigate={handleNavigate} />}
+              />
+              {/* 多智能体协作问答页面 - 多个AI智能体协同回答问题 */}
+              <Route
+                path="multi-agent-qa"
+                element={<CollaborativeQA onNavigate={handleNavigate} />}
+              />
+              {/* 问答记录 */}
+              <Route
+                path="qa-records"
+                element={<QARecords onNavigate={handleNavigate} />}
+              />
+              <Route path="mope-chat" element={<MopeChat />} />
+              <Route path="template-editor" element={<TemplateEditor />} />
+              <Route path="template-6b-editor" element={<Template6BEditor />} />
+              <Route path="sixstep-chat" element={<SixStepChatPage />} />
+              {/* <Route
+                path="topic-research"
+                element={
+                  <TopicResearch
+                    onNavigate={handleNavigate}
+                    initialMode="new"
+                  />
+                }
+              /> */}
+               <Route
+                path="topic-research"
+                element={
+                  <GAFromNewQA gopath="/page/canvas"/>
+                }
+              />
+              <Route
+                path="task-chat"
+                element={
+                  <TaskChat onNavigate={handleNavigate} initialMode="new" />
+                }
+              />
+              <Route
+                path="action-chat"
+                element={
+                  <ActionChat onNavigate={handleNavigate} initialMode="new" />
+                }
+              />
+              <Route path="sixstep-chat" element={<SixStepChatPage />} />
+              <Route path="qa-from" element={<GAFromQA gopath="/page/workspace/chats/new"/>} />
+              <Route path="qa-from-6bf" element={<GAFromQA gopath="/page/strategy/agents/6bf/chats/new"/>} />
+              <Route path="skills-workshop" element={<SkillsWorkshop/>} />
+              <Route path="skill-creator" element={<SkillCreatorPage />} /> 
+            </Route>
+            {/* 轻应用中心 */}
+            <Route
+              path="/light-app-center"
+              element={<LightAppSquare onNavigate={handleNavigate} />}
+            />
+            <Route
+              path="/light-app-center/light-app-square"
+              element={<LightAppSquare onNavigate={handleNavigate} />}
+            />
+            <Route
+              path="/light-app-center/light-app-records"
+              element={<LightAppRecords onNavigate={handleNavigate} />}
+            />
+
+            <Route
+              path="/light-app-center/light-app-run"
+              element={
+                <LightAppRun
+                  onNavigate={handleNavigate}
+                  appId={appIdFromQuery as any}
+                />
+              }
+            />
+            {/* 任务管理 */}
+            <Route path="/task-management" element={<TaskManagement />}>
+              <Route
+                path="dashboard"
+                element={<TaskDashboard onNavigate={handleNavigate} />}
+              />
+              <Route
+                path="task-create"
+                element={<TaskCreate onNavigate={handleNavigate} />}
+              />
+              <Route
+                path="task-single"
+                element={<TaskSingle onNavigate={handleNavigate} />}
+              />
+              <Route
+                path="task-scene/:taskId"
+                element={<TaskWorkspace onNavigate={handleNavigate} />}
+              />
+              <Route
+                path="task-scene"
+                element={<TaskWorkspace onNavigate={handleNavigate} />}
+              />
+              <Route
+                path="task-consult-create"
+                element={<TaskConsultCreate onNavigate={handleNavigate} />}
+              />
+              <Route
+                path="task-consult"
+                element={<TaskConsult onNavigate={handleNavigate} />}
+              />
+              <Route
+                path="task-consult-result"
+                element={<TaskConsultResult onNavigate={handleNavigate} />}
+              />
+              <Route
+                path="task-list"
+                element={
+                  <TaskList
+                    onViewWorkspace={(id) =>
+                      navigate(`/task-management/task-scene/${id}`)
+                    }
+                    onNavigate={handleNavigate}
+                  />
+                }
+              />
+
+              {/* XK任务 */}
+              <Route
+                path="xk-task/xk-task-jc"
+                element={
+                  <TaskXkFrom
+                    gopath={'#/pageIndie/pageHome/pageSwrw'}
+                  />
+                }
+              />
+              <Route
+                path="xk-task/xk-task-dispatch"
+                element={
+                  <TaskXkFrom
+                    gopath={'#/pageIndie/pageJczl'}
+                  />
+                }
+              />
+
+              {/* 规划任务 */}
+              <Route
+                path="plan-task/plan-task-fx"
+                element={
+                  <TaskAnalyzes
+                    title="任务FX"
+                    category="规划任务"
+                    subCategory="规划任务"
+                    onNavigate={handleNavigate}
+                  />
+                }
+              />
+              <Route
+                path="plan-task/plan-task-sentiment"
+                element={
+                  <SentimentAnalyzes
+                    title="任务FX"
+                    category="规划任务"
+                    subCategory="规划任务"
+                    onNavigate={handleNavigate}
+                  />
+                }
+              />
+              <Route
+                path="plan-task/plan-task-action"
+                element={
+                  <ActionAnalyzes
+                    title="行动CE"
+                    category="规划任务"
+                    subCategory="规划任务"
+                    onNavigate={handleNavigate}
+                  />
+                }
+              />
+
+              {/* MNTY任务 */}
+              <Route
+                path="mnty-task/mnty-task-mechanism"
+                element={
+                  <XingdongTyPage
+                    title="XDTY任务"
+                    category="MNTY任务"
+                    subCategory="MNTY任务"
+                    onNavigate={handleNavigate}
+                  />
+                }
+              />
+              <Route
+                path="mnty-task/mnty-task-plan"
+                element={
+                  <FanganTyPage
+                    title="方案TY任务"
+                    category="MNTY任务"
+                    subCategory="MNTY任务"
+                    onNavigate={handleNavigate}
+                  />
+                }
+              />
+              <Route
+                path="mnty-task/mnty-task-zsty"
+                element={
+                  <XXTyPage
+                    title="XXTY任务"
+                    category="MNTY任务"
+                    subCategory="MNTY任务"
+                    onNavigate={handleNavigate}
+                  />
+                }
+              />
+
+              {/* 效果PG任务 */}
+              <Route
+                path="effect-task/effect-task-pg"
+                element={
+                  <TaskPgFrom
+                    gopath="task"
+                  />
+                }
+              />
+              <Route
+                path="effect-task/effect-action-pg"
+                element={
+                  <TaskPgFrom
+                    gopath="xd"
+                  />
+                }
+              />
+              <Route
+                path="effect-task/effect-info-pg"
+                element={
+                  <TaskPgFrom
+                    gopath="info"
+                  />
+                }
+              />
+              <Route
+                path="effect-task/effect-account-pg"
+                element={
+                  <TaskListPage
+                    title="账号PG"
+                    category="效果PG任务"
+                    subCategory="效果PG任务"
+                    onNavigate={handleNavigate}
+                  />
+                }
+              />
+            </Route>
+
+            {/* 场景管理 */}
+            <Route
+              path="/scene-list"
+              element={
+                <SceneList
+                  onViewDetail={(id) => navigate(`/scene-detail/${id}`)}
+                  onNavigate={handleNavigate}
+                />
+              }
+            />
+            <Route
+              path="/scene-detail/:sceneId"
+              element={
+                <SceneDetail
+                  sceneId={params.sceneId || null}
+                  onBack={() => navigate("/scene-list")}
+                />
+              }
+            />
+
+            {/* 智能体管理 */}
+            <Route
+              path="/agent-list"
+              element={
+                <AgentList
+                  onViewDetail={(id) => navigate(`/agent-detail/${id}`)}
+                  onNavigate={handleNavigate}
+                />
+              }
+            />
+            <Route
+              path="/agent-list/agent-trial"
+              element={<AgentTrial onNavigate={handleNavigate} />}
+            />
+            <Route
+              path="/agent-detail/:agentId"
+              element={
+                <AgentDetail
+                  agentId={params.agentId || null}
+                  onBack={() => navigate("/agent-list")}
+                />
+              }
+            />
+            <Route
+              path="/agent-list/agent-experts"
+              element={<ExpertsAgentsPage />}
+            ></Route>
+            {/* <GAFromQA gopath="/page/strategy/agents/6bf/chats/new"/> */}
+            {/* <Route
+              path="/agent-expert-center"
+              element={<AgentExpertCenterPage />}
+            /> */}
+            <Route
+              path="/agent-expert-center"
+              element={<GAFromQA gopath="/page/strategy/agents"/>}
+            />
+            <Route
+              path="/agent-expert-edit"
+              element={<AgentExpertEditPage agentId={searchParams.get("id")} />}
+            />
+            <Route path="/agent-chat" element={<AgentChatPage />} />
+            <Route path="/skills-workshop" element={<SkillsWorkshop />} />
+            <Route path="/skill-creator" element={<SkillCreatorPage />} />
+            <Route
+                path="sixstep-agents"
+                element={<AgentCardList onEdit={(key) => navigate(`/sixstep-agent-edit?key=${key}`)} />}
+              />
+              <Route
+                path="sixstep-agent-edit"
+                element={
+                  <AgentEditPage
+                    agentKey={searchParams.get('key') || 'purpose'}
+                    onBack={() => navigate('/sixstep-agents')}
+                  />
+                }
+              />
+            <Route path="file-skills" element={<FileSkillsWorkshop />} />
+            {/* 结果管理 */}
+            {/* <Route path="/result-management" element={<ResultManagement onNavigate={handleNavigate} initialCategory="planning" />} />
+            <Route path="/result-management/result-planning" element={<ResultManagement onNavigate={handleNavigate} initialCategory="planning" />} />
+            <Route path="/result-management/result-mnty" element={<ResultManagement onNavigate={handleNavigate} initialCategory="mnty" />} />
+            <Route path="/result-management/result-effect-pg" element={<ResultManagement onNavigate={handleNavigate} initialCategory="effect-pg" />} />
+            <Route path="/result-management/result-xk" element={<ResultManagement onNavigate={handleNavigate} initialCategory="xk" />} />
+            <Route path="/result-management/result-dq" element={<ResultManagement onNavigate={handleNavigate} initialCategory="dq-research" />} />
+            <Route path="/result-management/result-other" element={<ResultManagement onNavigate={handleNavigate} initialCategory="other" />} />
+            <Route path="/result-management/result-detail/:taskId" element={<ResultDetail taskId={params.taskId} onNavigate={handleNavigate} onBack={() => navigate('/result-management')} />} />
+            <Route path="/result-management/result-detail" element={<ResultDetail taskId={undefined} onNavigate={handleNavigate} onBack={() => navigate('/result-management')} />} /> */}
+            {/* 结果管理 - 嵌套路由 */}
+            <Route
+              path="/result-management"
+              element={<ResultManagementLayout />}
+            >
+              <Route
+                index
+                element={
+                  <Navigate to="/result-management/result-planning" replace />
+                }
+              />
+              <Route
+                path="result-planning"
+                element={<ResultPlanning onNavigate={handleNavigate} />}
+              />
+              <Route
+                path="result-mnty"
+                element={<ResultMnty onNavigate={handleNavigate} />}
+              />
+              <Route
+                path="result-effect-pg"
+                element={<ResultEffectPg onNavigate={handleNavigate} />}
+              />
+              <Route
+                path="result-xk"
+                element={<ResultXk onNavigate={handleNavigate} />}
+              />
+              <Route
+                path="result-dq"
+                element={<ResultDq onNavigate={handleNavigate} />}
+              />
+              <Route
+                path="result-other"
+                element={<ResultOther onNavigate={handleNavigate} />}
+              />
+              <Route
+                path="result-detail"
+                element={
+                  <ResultDetail
+                    taskId={undefined}
+                    onNavigate={handleNavigate}
+                    onBack={() => navigate("/result-management")}
+                  />
+                }
+              />
+              <Route
+                path="result-detail/:taskId"
+                element={
+                  <ResultDetail
+                    taskId={params.taskId}
+                    onNavigate={handleNavigate}
+                    onBack={() => navigate("/result-management")}
+                  />
+                }
+              />
+            </Route>
+
+            {/* 资源管理 */}
+            <Route
+              path="/resource-management"
+              element={<ZZResourceManagement onNavigate={handleNavigate} />}
+            />
+            <Route
+              path="/resource-management/resource-zz"
+              element={<ZZResourceManagement onNavigate={handleNavigate} />}
+            />
+            <Route
+              path="/resource-management/resource-network-actor"
+              element={
+                <NetworkActorResourceManagement onNavigate={handleNavigate} />
+              }
+            />
+            <Route
+              path="/resource-management/resource-knowledge-base"
+              element={
+                <KnowledgeBaseResourceManagement onNavigate={handleNavigate} />
+              }
+            />
+            {/* <Route
+              path="/resource-management/resource-evaluation-index"
+              element={
+                <EvaluationIndexResourceManagement
+                  onNavigate={handleNavigate}
+                />
+              }
+            /> */}
+            <Route
+              path="/resource-management/resource-evaluation-index"
+              element={
+                <TaskXkFrom
+                    gopath={'#/pageIndie/pageZyjc/pageZyzl'}
+                  />
+              }
+            />
+
+            {/* 其他路由 */}
+            <Route
+              path="/dashboard"
+              element={<TaskDashboard onNavigate={handleNavigate} />}
+            />
+            <Route
+              path="/strategy-result"
+              element={<StrategyResult onNavigate={handleNavigate} />}
+            />
+            <Route
+              path="/final-plan"
+              element={<FinalPlan onNavigate={handleNavigate} />}
+            />
+            <Route
+              path="/system-settings"
+              element={<SystemSettings onNavigate={handleNavigate} />}
+            />
+            <Route path="/observability" element={<ObservabilityPage />} />
+            <Route path="/login" element={<Login/>}/>
+            <Route path="*" element={<Navigate to="/dashboard" replace />} />
+          </Routes>
+        </main>
+      </div>
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <ThemeProvider>
+      <ChatProvider>
+        <AppContent />
+      </ChatProvider>
+    </ThemeProvider>
+  );
+}
+
+export default App;
diff --git a/web-code/assets/icon/default-icon.svg b/web-code/assets/icon/default-icon.svg
new file mode 100644
index 00000000..746c61e4
--- /dev/null
+++ b/web-code/assets/icon/default-icon.svg
@@ -0,0 +1,17 @@
+<svg id="轻应用logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40">
+  <defs>
+    <linearGradient id="linear-gradient" x1="-0.025" x2="1" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#006fea"/>
+      <stop offset="1" stop-color="#004ebd"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x2="1" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#00c7ff"/>
+      <stop offset="1" stop-color="#92eeff"/>
+    </linearGradient>
+  </defs>
+  <rect id="矩形_152188" data-name="矩形 152188" width="40" height="40" rx="8" fill="url(#linear-gradient)"/>
+  <g id="应用_application-one" transform="translate(8 8)">
+    <rect id="矩形_153908" data-name="矩形 153908" width="24" height="24" fill="#fff" opacity="0"/>
+    <path id="联合_1324" data-name="联合 1324" d="M-8800,20219.859l-8.5-5a.994.994,0,0,1-.5-.863v-10a.994.994,0,0,1,.5-.863l8.5-5a.988.988,0,0,1,.5-.143,1.008,1.008,0,0,1,.508.143l8.5,5a.989.989,0,0,1,.492.863v10a.989.989,0,0,1-.492.863l-8.5,5a.977.977,0,0,1-.506.141A.976.976,0,0,1-8800,20219.859Zm-7-15.285v8.855l7.5,4.41,7.5-4.41v-8.855l-7.5-4.414Zm6.5,8.926v-3.945l-3.526-2.209a1,1,0,0,1-.32-1.381,1,1,0,0,1,1.381-.314l3.466,2.172,3.471-2.172a1,1,0,0,1,1.375.314,1,1,0,0,1-.314,1.381l-3.531,2.207v3.947a1,1,0,0,1-1,1A1,1,0,0,1-8800.5,20213.5Z" transform="translate(8811.5 -20197)" fill="url(#linear-gradient-2)"/>
+  </g>
+</svg>
diff --git a/web-code/assets/icon/information-logo.png b/web-code/assets/icon/information-logo.png
new file mode 100644
index 00000000..6a393438
Binary files /dev/null and b/web-code/assets/icon/information-logo.png differ
diff --git a/web-code/assets/icon/轻应用logo-DB.svg b/web-code/assets/icon/轻应用logo-DB.svg
new file mode 100644
index 00000000..5df2b308
--- /dev/null
+++ b/web-code/assets/icon/轻应用logo-DB.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40"><defs><style>.a{fill:url(#a);}.b{fill:#fff;opacity:0;}.c{fill:url(#b);}</style><linearGradient id="a" x1="-0.025" x2="1" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#006fea"/><stop offset="1" stop-color="#004ebd"/></linearGradient><linearGradient id="b" x2="1" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#00c7ff"/><stop offset="1" stop-color="#92eeff"/></linearGradient></defs><rect class="a" width="40" height="40" rx="8"/><g transform="translate(8 8)"><rect class="b" width="24" height="24"/><path class="c" d="M-8800,20219.859l-8.5-5a.994.994,0,0,1-.5-.863v-10a.994.994,0,0,1,.5-.863l8.5-5a.988.988,0,0,1,.5-.143,1.008,1.008,0,0,1,.508.143l8.5,5a.989.989,0,0,1,.492.863v10a.989.989,0,0,1-.492.863l-8.5,5a.977.977,0,0,1-.506.141A.976.976,0,0,1-8800,20219.859Zm-7-15.285v8.855l7.5,4.41,7.5-4.41v-8.855l-7.5-4.414Zm6.5,8.926v-3.945l-3.526-2.209a1,1,0,0,1-.32-1.381,1,1,0,0,1,1.381-.314l3.466,2.172,3.471-2.172a1,1,0,0,1,1.375.314,1,1,0,0,1-.314,1.381l-3.531,2.207v3.947a1,1,0,0,1-1,1A1,1,0,0,1-8800.5,20213.5Z" transform="translate(8811.5 -20197)"/></g></svg>
\ No newline at end of file
diff --git a/web-code/components/CreateTaskModal.tsx b/web-code/components/CreateTaskModal.tsx
new file mode 100644
index 00000000..f5a6883f
--- /dev/null
+++ b/web-code/components/CreateTaskModal.tsx
@@ -0,0 +1,175 @@
+import React, { useState } from 'react';
+import { X, Upload, FileText, Calendar, Users, AlertTriangle } from 'lucide-react';
+
+interface CreateTaskModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onCreate: (taskData: any) => void;
+}
+
+const CreateTaskModal: React.FC<CreateTaskModalProps> = ({ isOpen, onClose, onCreate }) => {
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    scene: '宣传策略生成',
+    deadline: '',
+    resources: '',
+    constraints: '',
+  });
+
+  const handleSubmit = () => {
+    if (!formData.name || !formData.scene) {
+      alert('请填写必填项');
+      return;
+    }
+    onCreate(formData);
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <div className="relative bg-slate-800/95 backdrop-blur-xl border border-blue-800/30 rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden shadow-2xl">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-blue-800/30">
+          <div>
+            <h2 className="text-xl font-bold text-white">新建任务</h2>
+            <p className="text-slate-400 text-sm mt-1">创建一个新的宣传策略分析任务</p>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-slate-700/50 rounded-lg transition-colors"
+          >
+            <X className="w-5 h-5 text-slate-400" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 space-y-5 max-h-[60vh] overflow-y-auto">
+          {/* Task Name */}
+          <div>
+            <label className="block text-slate-300 text-sm font-medium mb-2">
+              任务名称 <span className="text-red-400">*</span>
+            </label>
+            <input
+              type="text"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              placeholder="例如：五四青年节宣传活动策略"
+              className="w-full px-4 py-3 bg-slate-900/50 border border-blue-800/30 rounded-lg text-white placeholder-slate-500 text-sm focus:outline-none focus:border-blue-500/50 transition-colors"
+            />
+          </div>
+
+          {/* Task Description */}
+          <div>
+            <label className="block text-slate-300 text-sm font-medium mb-2">
+              任务描述
+            </label>
+            <textarea
+              rows={3}
+              value={formData.description}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              placeholder="详细描述任务目标和背景..."
+              className="w-full px-4 py-3 bg-slate-900/50 border border-blue-800/30 rounded-lg text-white placeholder-slate-500 text-sm focus:outline-none focus:border-blue-500/50 transition-colors resize-none"
+            />
+          </div>
+
+          {/* Scene Selection */}
+          <div>
+            <label className="block text-slate-300 text-sm font-medium mb-2">
+              选择场景 <span className="text-red-400">*</span>
+            </label>
+            <select
+              value={formData.scene}
+              onChange={(e) => setFormData({ ...formData, scene: e.target.value })}
+              className="w-full px-4 py-3 bg-slate-900/50 border border-blue-800/30 rounded-lg text-white text-sm focus:outline-none focus:border-blue-500/50 transition-colors"
+            >
+              <option value="宣传策略生成">宣传策略生成</option>
+              <option value="宣传方案推演">宣传方案推演</option>
+              <option value="宣传活动复盘">宣传活动复盘</option>
+              <option value="舆情应对策略">舆情应对策略</option>
+              <option value="多版本策略比较">多版本策略比较</option>
+            </select>
+          </div>
+
+          {/* Deadline */}
+          <div>
+            <label className="block text-slate-300 text-sm font-medium mb-2 flex items-center gap-2">
+              <Calendar className="w-4 h-4" />
+              时间要求
+            </label>
+            <input
+              type="date"
+              value={formData.deadline}
+              onChange={(e) => setFormData({ ...formData, deadline: e.target.value })}
+              className="w-full px-4 py-3 bg-slate-900/50 border border-blue-800/30 rounded-lg text-white text-sm focus:outline-none focus:border-blue-500/50 transition-colors"
+            />
+          </div>
+
+          {/* Resources */}
+          <div>
+            <label className="block text-slate-300 text-sm font-medium mb-2 flex items-center gap-2">
+              <Users className="w-4 h-4" />
+              资源条件
+            </label>
+            <input
+              type="text"
+              value={formData.resources}
+              onChange={(e) => setFormData({ ...formData, resources: e.target.value })}
+              placeholder="例如：预算10万，运营团队3人..."
+              className="w-full px-4 py-3 bg-slate-900/50 border border-blue-800/30 rounded-lg text-white placeholder-slate-500 text-sm focus:outline-none focus:border-blue-500/50 transition-colors"
+            />
+          </div>
+
+          {/* Constraints */}
+          <div>
+            <label className="block text-slate-300 text-sm font-medium mb-2 flex items-center gap-2">
+              <AlertTriangle className="w-4 h-4" />
+              风险约束
+            </label>
+            <textarea
+              rows={2}
+              value={formData.constraints}
+              onChange={(e) => setFormData({ ...formData, constraints: e.target.value })}
+              placeholder="描述任务的限制条件和风险边界..."
+              className="w-full px-4 py-3 bg-slate-900/50 border border-blue-800/30 rounded-lg text-white placeholder-slate-500 text-sm focus:outline-none focus:border-blue-500/50 transition-colors resize-none"
+            />
+          </div>
+
+          {/* File Upload */}
+          <div>
+            <label className="block text-slate-300 text-sm font-medium mb-2 flex items-center gap-2">
+              <FileText className="w-4 h-4" />
+              附件/参考资料
+            </label>
+            <div className="border-2 border-dashed border-blue-800/30 rounded-lg p-6 text-center hover:border-blue-500/50 transition-colors cursor-pointer">
+              <Upload className="w-8 h-8 text-slate-500 mx-auto mb-2" />
+              <p className="text-slate-400 text-sm">点击或拖拽文件到此处上传</p>
+              <p className="text-slate-500 text-xs mt-1">支持 PDF、Word、图片等格式</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-blue-800/30 bg-slate-900/30">
+          <button
+            onClick={onClose}
+            className="px-5 py-2.5 bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300 rounded-lg transition-colors"
+          >
+            取消
+          </button>
+          <button
+            onClick={handleSubmit}
+            className="px-5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-colors font-medium"
+          >
+            开始分析
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateTaskModal;
diff --git a/web-code/components/ErrorBoundary.tsx b/web-code/components/ErrorBoundary.tsx
new file mode 100644
index 00000000..b98b4145
--- /dev/null
+++ b/web-code/components/ErrorBoundary.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+const searilizeError = (error: any) => {
+  if (error instanceof Error) {
+    return error.message + '\n' + error.stack;
+  }
+  return JSON.stringify(error, null, 2);
+};
+
+export class ErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  { hasError: boolean; error: any }
+> {
+  constructor(props: { children: React.ReactNode }) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: any) {
+    return { hasError: true, error };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="p-4 border border-red-500 rounded">
+          <h2 className="text-red-500">Something went wrong.</h2>
+          <pre className="mt-2 text-sm">{searilizeError(this.state.error)}</pre>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
diff --git a/web-code/components/Header.tsx b/web-code/components/Header.tsx
new file mode 100644
index 00000000..ae0f670d
--- /dev/null
+++ b/web-code/components/Header.tsx
@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react';
+import { Bell, Search, User, ChevronDown, Moon, Sun, Palette } from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+
+export interface userData {
+  userName: string;
+  typeName: string;
+}
+
+const Header: React.FC = () => {
+  const { theme, toggleTheme } = useTheme();
+  const isDark = theme === 'dark';
+  const [userData, setUserData] = useState<userData>({
+    userName: '',
+    typeName: ''
+  });
+
+  useEffect(() => {
+    let userInfo: any = localStorage.getItem('userInfo');
+    if (userInfo) {
+      userInfo = JSON.parse(userInfo);
+      setUserData(userInfo);
+    }
+  }, []);
+  return (
+    <header className={`h-16 flex items-center justify-between px-6 theme-transition ${
+      isDark
+        ? 'bg-slate-900/50 backdrop-blur-xl border-b border-blue-800/30'
+        : 'bg-red-600 border-b border-red-700'
+    }`}>
+      {/* 左侧 - 搜索框 */}
+      <div className="flex items-center gap-4">
+        {/* <div className="relative">
+          <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${isDark ? 'text-slate-500' : 'text-red-200'}`} />
+          <input
+            type="text"
+            placeholder="搜索场景、智能体、任务..."
+            className={`w-80 pl-10 pr-4 py-2 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-white/20 transition-all duration-200 theme-transition ${
+              isDark
+                ? 'bg-slate-800/50 border border-blue-800/30 text-white placeholder-slate-500'
+                : 'bg-red-700 border border-red-800 text-white placeholder-red-200'
+            }`}
+          />
+        </div> */}
+      </div>
+
+      {/* 右侧 - 用户信息和通知 */}
+      <div className="flex items-center gap-4">
+        {/* 主题切换按钮 */}
+        <button
+          onClick={toggleTheme}
+          className={`p-2 rounded-lg transition-all duration-200 ${
+            isDark
+              ? 'hover:bg-slate-800/50 text-slate-400 hover:text-white'
+              : 'hover:bg-red-500 text-white'
+          }`}
+          title={isDark ? '切换到红白主题' : '切换到深色主题'}
+        >
+          {isDark ? (
+            <Palette className="w-5 h-5" />
+          ) : (
+            <Moon className="w-5 h-5" />
+          )}
+        </button>
+
+        {/* 通知 */}
+        {/* <button className={`relative p-2 rounded-lg transition-colors ${
+          isDark ? 'hover:bg-slate-800/50' : 'hover:bg-red-500'
+        }`}>
+          <Bell className={`w-5 h-5 ${isDark ? 'text-slate-400' : 'text-white'}`} />
+          <span className={`absolute top-1 right-1 w-2 h-2 rounded-full ${isDark ? 'bg-cyan-500' : 'bg-white'}`} />
+        </button> */}
+
+        {/* 分隔线 */}
+        <div className={`w-px h-8 ${isDark ? 'bg-blue-800/30' : 'bg-red-500'}`} />
+
+        {/* 用户信息 */}
+        <button className={`flex items-center gap-3 px-3 py-1.5 rounded-lg transition-colors ${
+          isDark ? 'hover:bg-slate-800/50' : 'hover:bg-red-500'
+        }`}>
+          <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
+            isDark
+              ? 'bg-gradient-to-br from-blue-500 to-cyan-400'
+              : 'bg-white'
+          }`}>
+            <User className={`w-4 h-4 ${isDark ? 'text-white' : 'text-red-600'}`} />
+          </div>
+          <div className="text-left">
+            <p className={`text-sm font-medium ${isDark ? 'text-white' : 'text-white'}`}>{userData.userName}</p>
+            <p className={`text-xs ${isDark ? 'text-blue-400/60' : 'text-red-200'}`}>{userData.typeName}</p>
+          </div>
+          {/* <ChevronDown className={`w-4 h-4 ${isDark ? 'text-slate-500' : 'text-white'}`} /> */}
+        </button>
+      </div>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/web-code/components/MarkdownRenderer.tsx b/web-code/components/MarkdownRenderer.tsx
new file mode 100644
index 00000000..49ace999
--- /dev/null
+++ b/web-code/components/MarkdownRenderer.tsx
@@ -0,0 +1,127 @@
+import React, { useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+
+interface MarkdownRendererProps {
+  content: string;
+  className?: string;
+  onCitationClick?: (index: number) => void;
+}
+
+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 CodeBlock: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className = '' }) => {
+  const [copied, setCopied] = useState(false);
+  const codeText = extractTextFromNode(children).replace(/\n$/, '');
+  const language = className?.match(/language-(\w+)/)?.[1];
+
+  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-gray-200 bg-gray-50 shadow-sm dark:border-slate-700 dark:bg-slate-900">
+      <div className="flex items-center justify-between border-b border-gray-200 bg-gray-100 px-3 py-2 text-xs text-gray-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400">
+        <span>{language || 'code'}</span>
+        <button
+          type="button"
+          onClick={handleCopy}
+          className="rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-600 transition-colors hover:bg-gray-50 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600"
+        >
+          {copied ? '已复制' : '复制'}
+        </button>
+      </div>
+      <pre className="m-0 overflow-x-auto p-4 text-sm leading-relaxed text-gray-800 dark:text-slate-100">
+        <code className={className}>{children}</code>
+      </pre>
+    </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="text-2xl font-bold mb-4" {...props} />,
+          h2: ({ node, ...props }) => <h2 className="text-xl font-bold mb-3" {...props} />,
+          h3: ({ node, ...props }) => <h3 className="text-lg font-bold mb-2" {...props} />,
+          h4: ({ node, ...props }) => <h4 className="text-base font-bold mb-2" {...props} />,
+          h5: ({ node, ...props }) => <h5 className="text-sm font-bold mb-2" {...props} />,
+          h6: ({ node, ...props }) => <h6 className="text-xs font-bold mb-2" {...props} />,
+          p: ({ node, ...props }) => <p className="mb-4 leading-relaxed" {...props} />,
+          ul: ({ node, ...props }) => <ul className="list-disc list-inside mb-4 ml-4" {...props} />,
+          ol: ({ node, ...props }) => <ol className="list-decimal list-inside mb-4 ml-4" {...props} />,
+          li: ({ node, ...props }) => <li className="mb-1" {...props} />,
+          // code: ({ node, inline, className, children, ...props }: any) => {
+          //   if (inline) {
+          //     return (
+          //       <code
+          //         className={`rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800 dark:bg-slate-800 dark:text-slate-100 ${className || ''}`}
+          //         {...props}
+          //       >
+          //         {children}
+          //       </code>
+          //     );
+          //   }
+          //   return <CodeBlock className={className}>{children}</CodeBlock>;
+          // },
+          // pre: ({ node, children }) => <>{children}</>,
+          blockquote: ({ node, ...props }) => (
+            <blockquote className="border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic my-4" {...props} />
+          ),
+          a: ({ node, ...props }) => (
+            <a className="text-blue-600 dark:text-blue-400 hover:underline" {...props} />
+          ),
+          table: ({ node, ...props }) => (
+            <div className="overflow-x-auto mb-4">
+              <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;
\ No newline at end of file
diff --git a/web-code/components/Sidebar.tsx b/web-code/components/Sidebar.tsx
new file mode 100644
index 00000000..528d6c7e
--- /dev/null
+++ b/web-code/components/Sidebar.tsx
@@ -0,0 +1,572 @@
+import React, { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import {
+  BarChart3,
+  Bot,
+  Brain,
+  ChevronLeft,
+  ChevronRight,
+  CircleHelp,
+  Compass,
+  Database,
+  FileBox,
+  FileOutput,
+  FileText,
+  Folder,
+  FolderOpen,
+  Grid3X3,
+  HelpCircle,
+  History,
+  Layers,
+  Layout,
+  Library,
+  ListTodo,
+  MessageSquare,
+  MoreHorizontal,
+  Network,
+  PlayCircle,
+  Plus,
+  Scale,
+  Target,
+  TrendingUp,
+  Users,
+  Workflow,
+} from "lucide-react";
+import { useTheme } from "../contexts/ThemeContext";
+
+export type PageType = string;
+
+type MenuItem = {
+  id: PageType;
+  label: string;
+  icon: React.ElementType;
+  children?: MenuItem[];
+  path?: string;
+  activePath?: string;
+};
+type Props = {
+  currentPage: PageType;
+  isCollapsed?: boolean;
+  onToggleCollapse?: () => void;
+};
+type Level1MenuId =
+  | "qa-center"
+  | "light-app-center"
+  | "task-management"
+  | "agent-list"
+  | "result-management"
+  | "resource-management";
+type TaskGroupId = string;
+
+const taskGroups: TaskGroupId[] = [
+  "xk-task",
+  "plan-task",
+  "mnty-task",
+  "effect-task",
+];
+const collapsibleMenus = new Set<PageType>([
+  "qa-center",
+  "light-app-center",
+  "task-management",
+  "agent-list",
+  "result-management",
+  "resource-management",
+]);
+const taskPages = new Set([
+  "dashboard",
+  "task-create",
+  "task-single",
+  "task-scene",
+  "task-consult-create",
+  "task-consult",
+  "task-consult-result",
+  "task-list",
+]);
+const qaPages = new Set([
+  "new-qa",
+  "general-qa",
+  "agent-qa",
+  "multi-agent-qa",
+  "qa-records",
+  "sixstep-chat",
+  "topic-research",
+  "task-chat",
+  "action-chat",
+  "qa-from",
+  "qa-from-6bf"
+]);
+const lightAppPages = new Set([
+  "light-app-square",
+  "light-app-records",
+  "light-app-run",
+]);
+const agentPages = new Set(["agent-trial"]);
+const resultPages = new Set([
+  "result-planning",
+  "result-mnty",
+  "result-effect-pg",
+  "result-xk",
+  "result-dq",
+  "result-other",
+  "result-detail",
+]);
+const resourcePages = new Set([
+  "resource-zz",
+  "resource-network-actor",
+  "resource-knowledge-base",
+  "resource-evaluation-index",
+]);
+
+const menuItems: MenuItem[] = [
+  {
+    id: "qa-center",
+    label: "问答管理",
+    icon: HelpCircle,
+    children: [
+      { id: "qa-from", label: "通用问答", icon: Bot }, // general-qa
+      // { id: 'sixstep-chat', label: 'zz决策支持', icon: Layers },
+      { id: "qa-from-6bf", label: "zz决策支持", icon: Layers },
+      { id: "action-chat", label: "zzXD应用", icon: History },
+      { id: "topic-research", label: "课题研究", icon: CircleHelp },
+      //  { id: 'agent-qa', label: '智能体问答', icon: Bot },
+      //  { id: 'multi-agent-qa', label: '多智能体协同', icon: Layers },
+      //  { id: 'qa-records', label: '问答记录', icon: History },
+    ],
+  },
+  {
+    id: "task-management",
+    label: "任务管理",
+    icon: Target,
+    children: [
+      // { id: "dashboard", label: "任务统计", icon: BarChart3 },
+      {
+        id: "xk-task",
+        label: "XK中任务",
+        icon: Folder,
+        children: [
+          { id: "xk-task-jc", label: "任务JC", icon: ListTodo },
+          { id: "xk-task-dispatch", label: "任务调度", icon: ListTodo },
+        ],
+      },
+      {
+        id: "plan-task",
+        label: "COH中任务",
+        icon: Folder,
+        children: [
+          { id: "plan-task-sentiment", label: "三情FX", icon: ListTodo },
+          { id: "plan-task-fx", label: "任务FX", icon: ListTodo },
+          { id: "plan-task-action", label: "行动CE", icon: ListTodo },
+        ],
+      },
+      {
+        id: "effect-task",
+        label: "PG中任务",
+        icon: Folder,
+        children: [
+          { id: "effect-task-pg", label: "任务PG", icon: ListTodo },
+          { id: "effect-action-pg", label: "行动PG", icon: ListTodo },
+          { id: "effect-info-pg", label: "信息PG", icon: ListTodo },
+          // { id: "effect-account-pg", label: "账号PG", icon: ListTodo },
+        ],
+      },
+      {
+        id: "mnty-task",
+        label: "TY中任务",
+        icon: Folder,
+        children: [
+          { id: "mnty-task-mechanism", label: "XDTY任务", icon: ListTodo },
+          { id: "mnty-task-plan", label: "方案TY任务", icon: ListTodo },
+          { id: "mnty-task-zsty", label: "XXTY任务", icon: ListTodo },
+        ],
+      },
+    ],
+  },
+  // {
+  //   id: 'light-app-center', label: '工具管理', icon: Grid3X3,
+  //   children: [
+  //     { id: 'light-app-square', label: '应用广场', icon: Layout },
+  //     { id: 'light-app-records', label: '运行记录', icon: History },
+  //     { id: 'scene-list', label: '场景管理', icon: Layers },
+  //   ]
+  // },
+  {
+    id: "agent-list",
+    label: " 综合管理",
+    icon: Bot,
+    children: [
+      //  { id: 'agent-list', label: '业务链条管理', icon: Users },
+      // { id: 'agent-list', label: '智能体管理', icon: Users },
+      { id: "agent-expert-center", label: "智能体管理", icon: Users },
+       { id: 'scene-list', label: '业务链条管理', icon: Layers },
+      // { id: "skills-workshop", label: "技能列表", icon: Users },
+      // { id: "sixstep-agents", label: "mcp管理", icon: Layers },
+      // { id: "file-skills", label: "skills管理", icon: Layers },
+      // { id: 'agent-trial', label: '单智能体试用', icon: PlayCircle }
+    ],
+  },
+  // { id: 'result-management', label: '结果管理', icon: BarChart3, children: [
+  //   { id: 'result-planning', label: '规划任务', icon: Target, children: [
+  //     { id: 'result-planning-all', label: '全部', icon: BarChart3, path: '/result-management/result-planning', activePath: '/result-management/result-planning' },
+  //     { id: 'result-planning-goal', label: '目标分析', icon: Target, path: '/result-management/result-planning?subCategory=目标分析' },
+  //     { id: 'result-planning-brand', label: '品牌策略', icon: Target, path: '/result-management/result-planning?subCategory=品牌策略' },
+  //     { id: 'result-planning-content', label: '内容规划', icon: Target, path: '/result-management/result-planning?subCategory=内容规划' },
+  //     { id: 'result-planning-channel', label: '渠道规划', icon: Target, path: '/result-management/result-planning?subCategory=渠道规划' },
+  //     { id: 'result-planning-narrative', label: '叙事策略', icon: Target, path: '/result-management/result-planning?subCategory=叙事策略' },
+  //   ] },
+  //   { id: 'result-mnty', label: 'MNTY任务', icon: Brain, children: [
+  //     { id: 'result-mnty-all', label: '全部', icon: BarChart3, path: '/result-management/result-mnty', activePath: '/result-management/result-mnty' },
+  //     { id: 'result-mnty-mechanism', label: '机制研究', icon: Brain, path: '/result-management/result-mnty?subCategory=机制研究' },
+  //     { id: 'result-mnty-plan', label: '方案设计', icon: Brain, path: '/result-management/result-mnty?subCategory=方案设计' },
+  //     { id: 'result-mnty-zsty', label: 'ZSTY分析', icon: Brain, path: '/result-management/result-mnty?subCategory=ZSTY分析' },
+  //   ] },
+  //   { id: 'result-effect-pg', label: '效果PG任务', icon: TrendingUp, children: [
+  //     { id: 'result-effect-pg-all', label: '全部', icon: BarChart3, path: '/result-management/result-effect-pg', activePath: '/result-management/result-effect-pg' },
+  //     { id: 'result-effect-pg-behavior', label: '行为PG', icon: TrendingUp, path: '/result-management/result-effect-pg?subCategory=行为PG' },
+  //     { id: 'result-effect-pg-evaluation', label: '效果评估', icon: TrendingUp, path: '/result-management/result-effect-pg?subCategory=效果评估' },
+  //     { id: 'result-effect-pg-info', label: '信息PG', icon: TrendingUp, path: '/result-management/result-effect-pg?subCategory=信息PG' },
+  //     { id: 'result-effect-pg-account', label: '账号PG', icon: TrendingUp, path: '/result-management/result-effect-pg?subCategory=账号PG' },
+  //   ] },
+  //   { id: 'result-xk', label: 'XK任务', icon: Compass, children: [
+  //     { id: 'result-xk-all', label: '全部', icon: BarChart3, path: '/result-management/result-xk', activePath: '/result-management/result-xk' },
+  //     { id: 'result-xk-jc', label: '任务JC', icon: Compass, path: '/result-management/result-xk?subCategory=任务JC' },
+  //     { id: 'result-xk-dispatch', label: '任务调度', icon: Compass, path: '/result-management/result-xk?subCategory=任务调度' },
+  //   ] },
+  //   { id: 'result-dq', label: 'DQ研究类任务', icon: Database, children: [
+  //     { id: 'result-dq-all', label: '全部', icon: BarChart3, path: '/result-management/result-dq', activePath: '/result-management/result-dq' },
+  //     { id: 'result-dq-audience', label: '受众分析', icon: Database, path: '/result-management/result-dq?subCategory=受众分析' },
+  //     { id: 'result-dq-kb', label: '知识库研究', icon: Database, path: '/result-management/result-dq?subCategory=知识库研究' },
+  //     { id: 'result-dq-trend', label: '趋势研究', icon: Database, path: '/result-management/result-dq?subCategory=趋势研究' },
+  //   ] },
+  //   { id: 'result-other', label: '其他类任务', icon: MoreHorizontal, children: [
+  //     { id: 'result-other-all', label: '全部', icon: BarChart3, path: '/result-management/result-other', activePath: '/result-management/result-other' },
+  //     { id: 'result-other-general', label: '通用分析', icon: MoreHorizontal, path: '/result-management/result-other?subCategory=通用分析' },
+  //     { id: 'result-other-temp', label: '临时任务', icon: MoreHorizontal, path: '/result-management/result-other?subCategory=临时任务' },
+  //     { id: 'result-other-other', label: '其他', icon: MoreHorizontal, path: '/result-management/result-other?subCategory=其他' },
+  //   ] },
+  // ] },
+  {
+    id: "resource-management",
+    label: "资源管理",
+    icon: Database,
+    children: [
+      // { id: "resource-zz", label: "ZZ资源管理", icon: FileBox },
+      {
+        id: "resource-network-actor",
+        label: "网络行为体资源管理",
+        icon: Network,
+      },
+      { id: "resource-knowledge-base", label: "知识库资源管理", icon: Library },
+      { id: "resource-evaluation-index", label: "作战资源管理", icon: Library },
+      // {
+      //   id: "resource-evaluation-index",
+      //   label: "评估指标体系资源管理",
+      //   icon: Scale,
+      // },
+    ],
+  },
+];
+
+const subEntries = [
+  // { id: 'task-create', label: '新建任务', icon: ListTodo, parent: 'task-management' },
+  // { id: 'task-single', label: '单智能体任务', icon: Bot, parent: 'task-management' },
+  // { id: 'task-scene', label: '场景任务', icon: Workflow, parent: 'task-management' },
+  // { id: 'task-consult-create', label: '多智能体会商', icon: MessageSquare, parent: 'task-management' },
+  // { id: 'final-plan', label: '方案输出', icon: FileOutput, parent: 'strategy-result' },
+];
+
+const getPath = (id: PageType) => {
+  if (taskGroups.includes(id as TaskGroupId)) {
+    console.log('----task-management', id);
+    return `/task-management/${id}`;
+  }
+  if (taskGroups.some((group) => id.startsWith(group))) {
+      return `/task-management/${id.split("-").slice(0, 2).join("-")}/${id}`;
+  }
+  // 特殊处理 effect-task 下的子菜单项（effect-action-pg, effect-info-pg, effect-account-pg）
+  if (id.startsWith("effect-") && !id.startsWith("effect-task")) {
+    return `/task-management/effect-task/${id}`;
+  }
+  if (taskPages.has(id)) return `/task-management/${id}`;
+  if (qaPages.has(id)) return `/qa-center/${id}`;
+  if (id === "qa-center") return "/qa-center";
+  if (lightAppPages.has(id)) return `/light-app-center/${id}`;
+  if (agentPages.has(id)) return `/agent-list/${id}`;
+  if (resultPages.has(id)) return `/result-management/${id}`;
+  if (resourcePages.has(id)) return `/resource-management/${id}`;
+
+  return `/${id}`;
+};
+
+const toggleSet = <T,>(set: Set<T>, item: T) => {
+  const next = new Set(set);
+  next.has(item) ? next.delete(item) : next.add(item);
+  return next;
+};
+
+export default function Sidebar({
+  currentPage,
+  isCollapsed = false,
+  onToggleCollapse,
+}: Props) {
+  const { theme } = useTheme();
+  const location = useLocation();
+  const isDark = theme === "dark";
+  const [collapsedMenus, setCollapsedMenus] = useState<Set<Level1MenuId>>(
+    new Set()
+  );
+  const [expandedTaskGroups, setExpandedTaskGroups] = useState<Set<string>>(
+    () =>
+      new Set([
+        ...taskGroups.filter((group) => currentPage.startsWith(group)),
+        ...(currentPage.startsWith("result-") ? [currentPage] : []),
+      ])
+  );
+
+  const panel = `ml-4 pl-4 border-l space-y-1 theme-transition ${
+    isDark ? "border-blue-800/30" : "border-red-100"
+  }`;
+  const iconBtn = `rounded-lg transition-all duration-200 ${
+    isDark
+      ? "text-slate-400 hover:text-white hover:bg-slate-800/50"
+      : "text-gray-500 hover:text-red-600 hover:bg-red-50"
+  }`;
+  const itemClass = (active: boolean) =>
+    `rounded-lg transition-all duration-200 theme-transition ${
+      active
+        ? isDark
+          ? "bg-blue-600/20 text-blue-400 border border-blue-500/30"
+          : "bg-red-50 text-red-600 border border-red-200"
+        : isDark
+        ? "text-slate-400 hover:text-white hover:bg-slate-800/50"
+        : "text-gray-600 hover:text-red-600 hover:bg-red-50"
+    }`;
+
+  const isTopActive = (id: PageType) => {
+    if (id === "qa-center") return qaPages.has(currentPage);
+    if (id === "light-app-center") return currentPage.startsWith("light-app");
+    if (id === "task-management")
+      return (
+        currentPage === "dashboard" ||
+        taskPages.has(currentPage) ||
+        taskGroups.some((group) => currentPage.startsWith(group))
+      );
+    if (id === "scene-list") return currentPage.startsWith("scene");
+    if (id === "agent-list") return currentPage.startsWith("agent");
+    if (id === "result-management") return currentPage.startsWith("result");
+    if (id === "resource-management") return currentPage.startsWith("resource");
+    return currentPage === id;
+  };
+  const hasActiveChild = (item: MenuItem): boolean =>
+    currentPage === item.id || Boolean(item.children?.some(hasActiveChild));
+
+  const renderLink = (item: MenuItem, top = false) => {
+    const Icon = item.icon;
+    const activePath = decodeURI(`${location.pathname}${location.search}`);
+    const active = top
+      ? isTopActive(item.id)
+      : item.path
+      ? activePath === (item.activePath ?? item.path)
+      : currentPage === item.id;
+    return (
+      <Link
+        key={item.id}
+        to={item.path ?? getPath(item.id)}
+        onClick={() =>
+          top &&
+          item.id === "task-management" &&
+          expandedTaskGroups.size === 0 &&
+          setExpandedTaskGroups(new Set(["xk-task"]))
+        }
+        title={isCollapsed ? item.label : undefined}
+        className={`${top ? "flex-1" : "w-full"} flex items-center ${
+          isCollapsed && top ? "justify-center gap-0 px-2" : "gap-2 px-3"
+        } py-2 ${itemClass(active)}`}
+      >
+        <Icon
+          className={`${top ? "w-5 h-5" : "w-4 h-4"} flex-shrink-0 ${
+            active ? (isDark ? "text-blue-400" : "text-red-500") : ""
+          }`}
+        />
+        {(!isCollapsed || !top) && (
+          <span
+            className={`${
+              top ? "text-sm" : "text-xs"
+            } font-medium flex-1 text-left`}
+          >
+            {item.label}
+          </span>
+        )}
+      </Link>
+    );
+  };
+
+  const renderTaskGroup = (item: MenuItem) => {
+    const expanded = expandedTaskGroups.has(item.id);
+    const active = hasActiveChild(item);
+    const Icon = expanded ? FolderOpen : Folder;
+    return (
+      <div key={item.id} className="space-y-1">
+        <button
+          type="button"
+          onClick={() =>
+            setExpandedTaskGroups((prev) => toggleSet(prev, item.id))
+          }
+          className={`w-full flex items-center gap-2 px-3 py-2 ${itemClass(
+            active
+          )}`}
+        >
+          <Icon
+            className={`w-4 h-4 flex-shrink-0 ${
+              active ? (isDark ? "text-blue-400" : "text-red-500") : ""
+            }`}
+          />
+          <span className="text-xs font-medium flex-1 text-left">
+            {item.label}
+          </span>
+          <ChevronRight
+            className={`w-4 h-4 transition-transform duration-200 ${
+              expanded ? "rotate-90" : ""
+            }`}
+          />
+        </button>
+        {expanded && item.children && (
+          <div className={panel}>
+            {item.children.map((child) => renderLink(child))}
+          </div>
+        )}
+      </div>
+    );
+  };
+  const renderChildren = (item: MenuItem) =>
+    item.children ? (
+      <div className={panel}>
+        {item.children.map((child) =>
+          child.children ? renderTaskGroup(child) : renderLink(child)
+        )}
+      </div>
+    ) : null;
+  const renderSubEntries = (item: MenuItem) => {
+    const entries = subEntries.filter((entry) => entry.parent === item.id);
+    return entries.length && isTopActive(item.id) ? (
+      <div className={panel}>{entries.map((entry) => renderLink(entry))}</div>
+    ) : null;
+  };
+
+  return (
+    <aside
+      className={`fixed left-0 top-0 h-screen ${
+        isCollapsed ? "w-16" : "w-64"
+      } z-50 theme-transition overflow-y-auto ${
+        isDark
+          ? "bg-slate-900/80 backdrop-blur-xl border-r border-blue-800/30"
+          : "bg-white border-r border-red-100 shadow-sm"
+      }`}
+    >
+      <div
+        className={`h-16 flex items-center ${
+          isCollapsed ? "justify-center px-2" : "justify-between px-6"
+        } border-b theme-transition flex-shrink-0 ${
+          isDark ? "border-blue-800/30" : "border-red-100"
+        }`}
+      >
+        <div className="flex items-center gap-3 min-w-0">
+          <div
+            className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
+              isDark
+                ? "bg-gradient-to-br from-blue-500 to-cyan-400"
+                : "bg-gradient-to-br from-red-500 to-red-400"
+            }`}
+          >
+            <FileText className="w-4 h-4 text-white" />
+          </div>
+          {!isCollapsed && (
+            <div>
+              <h1
+                className={`font-semibold text-sm ${
+                  isDark ? "text-white" : "text-gray-900"
+                }`}
+              >
+                智能CM系统
+              </h1>
+              <p
+                className={`text-xs ${
+                  isDark ? "text-blue-400/60" : "text-red-400/80"
+                }`}
+              >
+                Smart CM Platform
+              </p>
+            </div>
+          )}
+        </div>
+        {!isCollapsed && (
+          <button
+            type="button"
+            onClick={onToggleCollapse}
+            className={`p-2 ${iconBtn}`}
+            title="收起侧边栏"
+          >
+            <ChevronLeft className="w-4 h-4" />
+          </button>
+        )}
+      </div>
+      <nav className={`${isCollapsed ? "p-2" : "p-4"} space-y-2`}>
+        {isCollapsed && (
+          <button
+            type="button"
+            onClick={onToggleCollapse}
+            className={`w-full flex items-center justify-center p-2.5 ${iconBtn}`}
+            title="展开侧边栏"
+          >
+            <ChevronRight className="w-5 h-5" />
+          </button>
+        )}
+        {menuItems.map((item) => {
+          const canCollapse = collapsibleMenus.has(item.id);
+          const childrenCollapsed =
+            canCollapse && collapsedMenus.has(item.id as Level1MenuId);
+          return (
+            <div key={item.id} className="space-y-1">
+              <div className="flex items-center gap-2">
+                {renderLink(item, true)}
+                {!isCollapsed && item.children && canCollapse && (
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setCollapsedMenus((prev) =>
+                        toggleSet(prev, item.id as Level1MenuId)
+                      )
+                    }
+                    className={`p-1.5 ${iconBtn}`}
+                    title={childrenCollapsed ? "展开菜单" : "折叠菜单"}
+                  >
+                    <ChevronRight
+                      className={`w-4 h-4 transition-transform duration-200 ${
+                        childrenCollapsed ? "" : "rotate-90"
+                      }`}
+                    />
+                  </button>
+                )}
+              </div>
+              {!isCollapsed &&
+                item.children &&
+                !childrenCollapsed &&
+                renderChildren(item)}
+              {!isCollapsed && !childrenCollapsed && renderSubEntries(item)}
+            </div>
+          );
+        })}
+      </nav>
+      {isDark ? (
+        <>
+          <div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/10 rounded-full blur-3xl pointer-events-none" />
+          <div className="absolute bottom-20 right-0 w-24 h-24 bg-cyan-500/10 rounded-full blur-3xl pointer-events-none" />
+        </>
+      ) : (
+        <>
+          <div className="absolute top-0 right-0 w-32 h-32 bg-red-500/5 rounded-full blur-3xl pointer-events-none" />
+          <div className="absolute bottom-20 right-0 w-24 h-24 bg-red-400/5 rounded-full blur-3xl pointer-events-none" />
+        </>
+      )}
+    </aside>
+  );
+}
diff --git a/web-code/components/agent/AgentChatPage.css b/web-code/components/agent/AgentChatPage.css
new file mode 100644
index 00000000..671306c1
--- /dev/null
+++ b/web-code/components/agent/AgentChatPage.css
@@ -0,0 +1,70 @@
+@keyframes breathing {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes breathingGlow {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
+  }
+}
+
+.animate-breathing {
+  animation: breathing 1.5s ease-in-out infinite, breathingGlow 1.5s ease-in-out infinite;
+}
+
+.agent-resizing {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+
+.agent-file-tree-scroll,
+.agent-file-preview-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
+}
+
+.agent-file-tree-scroll::-webkit-scrollbar,
+.agent-file-preview-scroll::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.agent-file-tree-scroll::-webkit-scrollbar-track,
+.agent-file-preview-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.agent-file-tree-scroll::-webkit-scrollbar-thumb,
+.agent-file-preview-scroll::-webkit-scrollbar-thumb {
+  background: rgba(148, 163, 184, 0.38);
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+.agent-file-tree-scroll::-webkit-scrollbar-thumb:hover,
+.agent-file-preview-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(96, 165, 250, 0.58);
+  background-clip: content-box;
+}
+
+.agent-file-markdown-preview > :first-child {
+  margin-top: 0;
+}
+
+.agent-file-markdown-preview > :last-child {
+  margin-bottom: 0;
+}
+
+.agent-file-markdown-preview img {
+  max-width: 100%;
+  border-radius: 12px;
+}
diff --git a/web-code/components/agent/AgentChatPage.tsx b/web-code/components/agent/AgentChatPage.tsx
new file mode 100644
index 00000000..7aaeaf29
--- /dev/null
+++ b/web-code/components/agent/AgentChatPage.tsx
@@ -0,0 +1,1048 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { AlertCircle, ArrowLeft, ChevronDown, ChevronRight, FileText, FolderOpen, Loader2, MessageSquareText, X, Zap } from 'lucide-react';
+import './AgentChatPage.css';
+import { useTheme } from '../../contexts/ThemeContext';
+import { useExpertAuthBootstrap } from '../../hooks';
+import MarkdownRenderer from '../MarkdownRenderer';
+import AgentConversationList, { type ConversationMessage, type ConversationStep } from './AgentConversationList';
+import ChatInputComposer from './ChatInputComposer';
+import SkillCreatorThreadSidebar from './SkillCreatorThreadSidebar';
+import { knowledgetoolUrl } from '@/hooks/useExpertAuthBootstrap';
+
+interface FileNode {
+  name: string;
+  path: string;
+  type: 'file' | 'directory';
+  size: number | null;
+  extension: string | null;
+  children: FileNode[] | null;
+}
+
+interface Agent {
+  id: string;
+  name: string;
+  description: string;
+  status: string;
+  icon?: string;
+  capabilities?: string[];
+}
+
+interface HistoryMessageApiItem {
+  created_at: string;
+  id: number;
+  role: 'user' | 'assistant';
+  content: unknown;
+  thread_id: number;
+}
+
+const defaultAgent: Agent = {
+  id: '1',
+  name: '测试1',
+  description: '描述01',
+  status: '随时准备为您服务',
+  capabilities: ['告诉我的能力', '给我一些建议', '帮我分析问题'],
+};
+
+const MIN_CHAT_WIDTH = 360;
+const MIN_FILE_SIDEBAR_WIDTH = 420;
+const DEFAULT_FILE_SIDEBAR_WIDTH = 560;
+
+const formatFileSize = (size: number | null) => {
+  if (!size) return '';
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+  return `${(size / 1024 / 1024).toFixed(1)} MB`;
+};
+
+const getFileLanguage = (extension: string | null) => {
+  const normalized = extension?.replace('.', '').toLowerCase();
+  if (!normalized) return 'TEXT';
+  return normalized.toUpperCase();
+};
+
+const isRecord = (value: unknown): value is Record<string, unknown> => typeof value === 'object' && value !== null;
+
+const normalizeHistoryContent = (content: unknown) => {
+  const steps: ConversationStep[] = [];
+  const thinkings: Array<{ duration: number; content: string }> = [];
+  const texts: string[] = [];
+
+  const visit = (value: unknown) => {
+    if (typeof value === 'string') {
+      if (value.trim()) texts.push(value);
+      return;
+    }
+
+    if (Array.isArray(value)) {
+      value.forEach(visit);
+      return;
+    }
+
+    if (!isRecord(value)) return;
+
+    const type = typeof value.type === 'string' ? value.type : '';
+    const text = typeof value.text === 'string' ? value.text : '';
+
+    if (type === 'thinking-steps' && Array.isArray(value.steps)) {
+      value.steps.forEach((stepItem) => {
+        if (!isRecord(stepItem)) return;
+        const title = typeof stepItem.title === 'string' ? stepItem.title : '处理中';
+        const status = stepItem.status === 'completed' ? 'done' : 'processing';
+        const items = Array.isArray(stepItem.items) ? stepItem.items.filter((item): item is string => typeof item === 'string') : [];
+        steps.push({
+          text: title,
+          subText: items[0]?.replace('正在处理: ', ''),
+          status,
+        });
+      });
+      return;
+    }
+
+    if (type === 'reasoning' && text) {
+      const duration = typeof value.duration === 'number' ? value.duration / 1000 : 0;
+      thinkings.push({ duration, content: text });
+      return;
+    }
+
+    if (text) {
+      texts.push(text);
+      return;
+    }
+
+    if ('content' in value) {
+      visit(value.content);
+    }
+  };
+
+  visit(content);
+
+  return {
+    content: texts.join('\n\n').trim(),
+    steps,
+    thinkings,
+  };
+};
+
+const toConversationMessage = (message: HistoryMessageApiItem): ConversationMessage => {
+  const normalized = normalizeHistoryContent(message.content);
+
+  return {
+    id: String(message.id),
+    role: message.role,
+    content: normalized.content,
+    steps: normalized.steps,
+    thinkings: normalized.thinkings,
+    toolCalls: [],
+  };
+};
+
+interface FileTreeItemProps {
+  node: FileNode;
+  depth?: number;
+  isDark: boolean;
+  expandedPaths: Set<string>;
+  selectedPath: string | null;
+  onToggle: (path: string) => void;
+  onSelect: (node: FileNode) => void;
+}
+
+function FileTreeItem({
+  node,
+  depth = 0,
+  isDark,
+  expandedPaths,
+  selectedPath,
+  onToggle,
+  onSelect,
+}: FileTreeItemProps) {
+  const isFolder = node.extension === null;
+  const isExpanded = expandedPaths.has(node.path);
+  const isSelected = selectedPath === node.path;
+  const hasChildren = Boolean(node.children?.length);
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => (isFolder ? onToggle(node.path) : onSelect(node))}
+        className={`group flex w-full items-center gap-2 rounded-xl px-2.5 py-2 text-left text-sm transition-all duration-200 ${isSelected
+            ? isDark
+              ? 'bg-blue-500/20 text-blue-200 ring-1 ring-blue-400/40 shadow-sm'
+              : 'bg-blue-50 text-blue-700 ring-1 ring-blue-200 shadow-sm'
+            : isDark
+              ? 'text-slate-300 hover:bg-slate-800 hover:text-slate-100'
+              : 'text-gray-700 hover:bg-gray-100 hover:text-gray-950'
+          }`}
+        style={{ paddingLeft: `${10 + depth * 18}px` }}
+        title={node.path}
+      >
+        <span className="flex w-4 shrink-0 justify-center">
+          {isFolder && hasChildren ? (
+            isExpanded ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />
+          ) : null}
+        </span>
+        <span
+          className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-lg ${isFolder
+              ? isDark ? 'bg-amber-500/15 text-amber-300' : 'bg-amber-100 text-amber-600'
+              : isDark ? 'bg-slate-700 text-slate-300' : 'bg-white text-gray-500 shadow-sm ring-1 ring-gray-200'
+            }`}
+        >
+          {isFolder ? <FolderOpen className="h-4 w-4" /> : <FileText className="h-4 w-4" />}
+        </span>
+        <span className="min-w-0 flex-1 truncate font-medium">{node.name}</span>
+        {!isFolder && node.size !== null && (
+          <span className={`shrink-0 text-[11px] ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{formatFileSize(node.size)}</span>
+        )}
+      </button>
+      {isFolder && isExpanded && hasChildren && (
+        <div className="mt-1 space-y-1">
+          {node.children!.map((child) => (
+            <FileTreeItem
+              key={child.path}
+              node={child}
+              depth={depth + 1}
+              isDark={isDark}
+              expandedPaths={expandedPaths}
+              selectedPath={selectedPath}
+              onToggle={onToggle}
+              onSelect={onSelect}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface AgentChatPageProps {
+  agent?: Agent;
+}
+
+export default function AgentChatPage({ agent: propAgent }: AgentChatPageProps) {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const { authedFetch } = useExpertAuthBootstrap();
+  const [searchParams] = useSearchParams();
+  const agentId = searchParams.get('id');
+  const threadStorageKey = `agent_chat_thread_id_${agentId ?? 'default'}`;
+
+  const [agent, setAgent] = useState<Agent>(propAgent || defaultAgent);
+  const [currentThreadId, setCurrentThreadId] = useState(() => localStorage.getItem(threadStorageKey) || '');
+  const [inputValue, setInputValue] = useState('');
+  const [messages, setMessages] = useState<ConversationMessage[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [isThreadSidebarOpen, setIsThreadSidebarOpen] = useState(false);
+  const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
+  const [showScrollButton, setShowScrollButton] = useState(false);
+  const [fileList, setFileList] = useState<FileNode[]>([]);
+  const [fileListThreadId, setFileListThreadId] = useState<number | null>(null);
+  const [isFileSidebarOpen, setIsFileSidebarOpen] = useState(false);
+  const [fileSidebarWidth, setFileSidebarWidth] = useState(DEFAULT_FILE_SIDEBAR_WIDTH);
+  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => new Set());
+  const [selectedFile, setSelectedFile] = useState<FileNode | null>(null);
+  const [filePreviewContent, setFilePreviewContent] = useState('');
+  const [isFilePreviewLoading, setIsFilePreviewLoading] = useState(false);
+  const [filePreviewError, setFilePreviewError] = useState('');
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const thinkingStartRef = useRef<number>(0);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    setCurrentThreadId(localStorage.getItem(threadStorageKey) || '');
+  }, [threadStorageKey]);
+
+  useEffect(() => {
+    const fetchAgentDetail = async () => {
+      if (!agentId) return;
+
+      setIsLoading(true);
+      try {
+        const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}`, {
+          method: 'GET',
+        });
+
+        if (!res.ok) {
+          console.error('获取专家信息失败:', res.status, res.statusText);
+          return;
+        }
+
+        const data: unknown = await res.json();
+        const agentDetail = data as {
+          id: number;
+          name?: string;
+          description?: string | null;
+        };
+
+        const agentName = agentDetail.name || '未命名专家';
+        setAgent({
+          id: String(agentDetail.id),
+          name: agentName,
+          description: agentDetail.description || '暂无描述',
+          status: '随时准备为您服务',
+          capabilities: ['告诉我的能力', '给我一些建议', '帮我分析问题'],
+        });
+      } catch (error) {
+        console.error('初始化专家信息异常:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    void fetchAgentDetail();
+  }, [agentId, authedFetch]);
+
+  useEffect(() => {
+    if (!fileList.length) return;
+
+    setExpandedPaths((prev) => {
+      if (prev.size > 0) return prev;
+      const firstLevelFolders = fileList.filter((node) => node.extension === null).map((node) => node.path);
+      return new Set(firstLevelFolders);
+    });
+  }, [fileList]);
+
+  const clearLoadingStates = () => {
+    setMessages((prev) =>
+      prev.map((msg) => {
+        if (msg.role === 'assistant') {
+          return {
+            ...msg,
+            steps: [],
+            thinkings: [],
+            toolCalls: [],
+          };
+        }
+        return msg;
+      }),
+    );
+  };
+
+  const syncThreadId = (nextThreadId: string) => {
+    setCurrentThreadId(nextThreadId);
+    if (nextThreadId) {
+      localStorage.setItem(threadStorageKey, nextThreadId);
+    } else {
+      localStorage.removeItem(threadStorageKey);
+    }
+  };
+
+  const fetchThreadFiles = async (id: number) => {
+    if (!id) {
+      setFileList([]);
+      setFileListThreadId(null);
+      return;
+    }
+
+    try {
+      const filesRes = await authedFetch(
+        `${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/${id}/files/all`,
+        { method: 'GET' },
+      );
+      if (filesRes.ok) {
+        const filesData: unknown = await filesRes.json();
+        setFileList(Array.isArray(filesData) ? (filesData as FileNode[]) : []);
+        setFileListThreadId(id);
+      } else {
+        setFileList([]);
+        setFileListThreadId(null);
+      }
+    } catch (e) {
+      console.error('获取文件列表失败:', e);
+      setFileList([]);
+      setFileListThreadId(null);
+    }
+  };
+
+  const fetchThreadMessages = async (id: number) => {
+    setIsLoading(true);
+    try {
+      const response = await authedFetch(
+        `${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/${id}/messages`,
+        { method: 'GET' },
+      );
+
+      if (!response.ok) {
+        throw new Error(`获取会话消息失败: ${response.status}`);
+      }
+
+      const data = (await response.json()) as HistoryMessageApiItem[];
+      const nextMessages = Array.isArray(data) ? data.map(toConversationMessage) : [];
+      setMessages(nextMessages);
+    } catch (error) {
+      console.error('获取聊天记录消息失败:', error);
+      setMessages([]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const id = Number(currentThreadId);
+
+    setSelectedFile(null);
+    setFilePreviewContent('');
+    setFilePreviewError('');
+    setExpandedPaths(new Set());
+
+    if (!id) {
+      setMessages([]);
+      setFileList([]);
+      setFileListThreadId(null);
+      return;
+    }
+
+    void fetchThreadMessages(id);
+    void fetchThreadFiles(id);
+  }, [currentThreadId]);
+
+  const handleStopStream = () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+      setIsStreaming(false);
+      clearLoadingStates();
+    }
+  };
+
+  const handleUploadFile = async (file: File) => {
+    if (!currentThreadId) return;
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const response = await authedFetch(
+        `${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/${currentThreadId}/files/upload`,
+        {
+          method: 'POST',
+          body: formData,
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error(`上传失败: ${response.status} ${response.statusText}`);
+      }
+
+      await fetchThreadFiles(Number(currentThreadId));
+    } catch (error) {
+      console.error('上传专家会话文件失败:', error);
+    }
+  };
+
+  const handleSendMessage = async () => {
+    const text = inputValue.trim();
+    const numericThreadId = Number(currentThreadId);
+    if (!text || !numericThreadId || isStreaming) return;
+    const assistantId = `assistant-${Date.now()}`;
+
+    setInputValue('');
+    setIsStreaming(true);
+    setAutoScrollEnabled(true);
+    abortControllerRef.current = new AbortController();
+
+    try {
+      const userMsg: ConversationMessage = {
+        id: `user-${Date.now()}`,
+        role: 'user',
+        content: text,
+      };
+      setMessages((prev) => [
+        ...prev,
+        userMsg,
+        { id: assistantId, role: 'assistant', content: '', steps: [], thinkings: [], toolCalls: [] },
+      ]);
+
+      const msgRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/messages`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          thread_id: numericThreadId,
+          role: 'user',
+          content: { type: 'text', text },
+        }),
+      });
+
+      if (!msgRes.ok) {
+        console.error('发送消息失败:', msgRes.status, msgRes.statusText);
+        setMessages((prev) => prev.filter((msg) => msg.id !== assistantId));
+        return;
+      }
+
+      const streamRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/run/stream`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          chat_id: numericThreadId,
+          expert_agent_id: Number(agentId),
+          user_query: text,
+          messages: [{ role: 'user', content: text }],
+        }),
+        signal: abortControllerRef.current.signal,
+      });
+
+      if (!streamRes.ok || !streamRes.body) {
+        console.error('流式接口失败:', streamRes.status);
+        setMessages((prev) => prev.filter((msg) => msg.id !== assistantId));
+        return;
+      }
+
+      const reader = streamRes.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      const thinkingStepsAcc: Array<{ id: string; title: string; status: string; items: string[] }> = [];
+      const reasoningsAcc: Array<{ text: string; duration: number }> = [];
+      let assistantTextAcc = '';
+      let reasoningStartAt = 0;
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() ?? '';
+
+        for (const line of lines) {
+          if (!line.startsWith('data: ')) continue;
+          const raw = line.slice(6).trim();
+          if (raw === '[DONE]') break;
+
+          let event: {
+            type: string;
+            data?: { id: string; title: string; status: string; items?: string[] };
+            delta?: string;
+            toolCallId?: string;
+            toolName?: string;
+            input?: Record<string, unknown>;
+            output?: { result?: string } | unknown;
+          } | null = null;
+
+          try {
+            event = JSON.parse(raw);
+          } catch {
+            continue;
+          }
+
+          if (!event) continue;
+
+          switch (event.type) {
+            case 'data-thinking-step': {
+              const step = event.data!;
+              const stepData = {
+                id: step.id,
+                title: step.title,
+                status: step.status,
+                items: step.items ?? [],
+              };
+              const existingIdx = thinkingStepsAcc.findIndex((s) => s.id === step.id);
+              if (existingIdx >= 0) thinkingStepsAcc[existingIdx] = stepData;
+              else thinkingStepsAcc.push(stepData);
+              break;
+            }
+            case 'reasoning-start': {
+              reasoningStartAt = Date.now();
+              reasoningsAcc.push({ text: '', duration: 0 });
+              break;
+            }
+            case 'reasoning-delta': {
+              if (reasoningsAcc.length === 0) {
+                reasoningsAcc.push({ text: event.delta ?? '', duration: 0 });
+              } else {
+                reasoningsAcc[reasoningsAcc.length - 1].text += event.delta ?? '';
+              }
+              break;
+            }
+            case 'reasoning-end': {
+              if (reasoningsAcc.length > 0) {
+                reasoningsAcc[reasoningsAcc.length - 1].duration = Date.now() - reasoningStartAt;
+              }
+              break;
+            }
+            case 'text-delta': {
+              assistantTextAcc += event.delta ?? '';
+              break;
+            }
+          }
+
+          setMessages((prev) =>
+            prev.map((msg) => {
+              if (msg.id !== assistantId) return msg;
+
+              switch (event!.type) {
+                case 'data-thinking-step': {
+                  const step = event!.data!;
+                  const newStep = {
+                    text: step.title,
+                    subText: step.items?.[0]?.replace('正在处理: ', '') ?? undefined,
+                    status: (step.status === 'completed' ? 'done' : 'processing') as 'done' | 'processing',
+                  };
+                  const steps = [...(msg.steps ?? [])];
+                  const stepIdx = steps.findIndex((s) => s.text === step.title);
+                  if (stepIdx >= 0) steps[stepIdx] = newStep;
+                  else steps.push(newStep);
+                  return { ...msg, steps };
+                }
+                case 'reasoning-start': {
+                  thinkingStartRef.current = Date.now();
+                  return { ...msg, thinkings: [...(msg.thinkings ?? []), { duration: 0, content: '' }] };
+                }
+                case 'reasoning-delta': {
+                  const thinkings = [...(msg.thinkings ?? [])];
+                  if (thinkings.length === 0) {
+                    thinkings.push({ duration: 0, content: event!.delta ?? '' });
+                  } else {
+                    const last = thinkings[thinkings.length - 1];
+                    thinkings[thinkings.length - 1] = { ...last, content: last.content + (event!.delta ?? '') };
+                  }
+                  return { ...msg, thinkings };
+                }
+                case 'reasoning-end': {
+                  const duration = (Date.now() - thinkingStartRef.current) / 1000;
+                  const thinkings = [...(msg.thinkings ?? [])];
+                  if (thinkings.length > 0) {
+                    thinkings[thinkings.length - 1] = { ...thinkings[thinkings.length - 1], duration };
+                  }
+                  return { ...msg, thinkings };
+                }
+                case 'tool-input-available': {
+                  const toolCalls = [...(msg.toolCalls ?? [])];
+                  const tcIdx = toolCalls.findIndex((t) => t.id === event!.toolCallId);
+                  const newTc = { id: event!.toolCallId!, name: event!.toolName!, input: event!.input };
+                  if (tcIdx >= 0) toolCalls[tcIdx] = { ...toolCalls[tcIdx], ...newTc };
+                  else toolCalls.push(newTc);
+                  return { ...msg, toolCalls };
+                }
+                case 'tool-output-available': {
+                  const toolCalls = [...(msg.toolCalls ?? [])];
+                  const tcIdx = toolCalls.findIndex((t) => t.id === event!.toolCallId);
+                  if (tcIdx >= 0) {
+                    const rawOutput = event!.output;
+                    const outputStr =
+                      typeof rawOutput === 'object' && rawOutput !== null && 'result' in rawOutput
+                        ? String((rawOutput as { result: unknown }).result)
+                        : JSON.stringify(rawOutput);
+                    toolCalls[tcIdx] = { ...toolCalls[tcIdx], output: outputStr };
+                  }
+                  return { ...msg, toolCalls };
+                }
+                case 'text-delta': {
+                  return { ...msg, content: msg.content + (event!.delta ?? '') };
+                }
+                default:
+                  return msg;
+              }
+            }),
+          );
+        }
+      }
+
+      const persistedContent: Array<Record<string, unknown>> = [];
+      if (thinkingStepsAcc.length > 0) {
+        persistedContent.push({ type: 'thinking-steps', steps: thinkingStepsAcc });
+      }
+      for (const reasoning of reasoningsAcc) {
+        if (reasoning.text) {
+          persistedContent.push({ type: 'reasoning', text: reasoning.text, duration: reasoning.duration });
+        }
+      }
+      if (assistantTextAcc) {
+        persistedContent.push({ type: 'text', text: assistantTextAcc });
+      }
+
+      if (persistedContent.length > 0) {
+        const persistRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/messages`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            thread_id: numericThreadId,
+            role: 'assistant',
+            content: persistedContent,
+          }),
+        });
+        if (!persistRes.ok) {
+          console.error('保存助手消息失败:', persistRes.status, persistRes.statusText);
+        }
+      }
+
+      await fetchThreadFiles(numericThreadId);
+    } catch (error) {
+      if (error instanceof Error && error.name === 'AbortError') {
+        console.log('流已被取消');
+      } else {
+        console.error('对话异常:', error);
+      }
+    } finally {
+      setIsStreaming(false);
+      abortControllerRef.current = null;
+    }
+  };
+
+  const handleCapabilityClick = (capability: string) => {
+    setInputValue(capability);
+  };
+
+  const handleToggleFolder = (path: string) => {
+    setExpandedPaths((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) next.delete(path);
+      else next.add(path);
+      return next;
+    });
+  };
+
+  const handleSelectFile = async (file: FileNode) => {
+    if (!fileListThreadId) {
+      setFilePreviewError('当前文件列表还没有关联到可预览的会话');
+      return;
+    }
+
+    setSelectedFile(file);
+    setFilePreviewContent('');
+    setFilePreviewError('');
+    setIsFilePreviewLoading(true);
+
+    try {
+      const previewRes = await authedFetch(
+        `${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/${fileListThreadId}/files/preview?path=${encodeURIComponent(file.path)}`,
+        { method: 'GET' },
+      );
+
+      if (!previewRes.ok) {
+        setFilePreviewError(`文件预览获取失败，状态码 ${previewRes.status}`);
+        return;
+      }
+
+      const contentType = previewRes.headers.get('content-type') ?? '';
+      if (contentType.includes('application/json')) {
+        const data: unknown = await previewRes.json();
+        if (typeof data === 'string') {
+          setFilePreviewContent(data);
+        } else if (data && typeof data === 'object' && 'content' in data) {
+          setFilePreviewContent(String((data as { content: unknown }).content ?? ''));
+        } else {
+          setFilePreviewContent(JSON.stringify(data, null, 2));
+        }
+      } else {
+        setFilePreviewContent(await previewRes.text());
+      }
+    } catch (error) {
+      console.error('获取文件预览失败:', error);
+      setFilePreviewError('文件预览获取失败，请稍后重试');
+    } finally {
+      setIsFilePreviewLoading(false);
+    }
+  };
+
+  const handleResizeStart = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const startX = event.clientX;
+    const startWidth = fileSidebarWidth;
+
+    const handleMouseMove = (moveEvent: MouseEvent) => {
+      const containerWidth = window.innerWidth - 160;
+      const maxWidth = Math.max(MIN_FILE_SIDEBAR_WIDTH, containerWidth - MIN_CHAT_WIDTH);
+      const nextWidth = Math.min(Math.max(startWidth - (moveEvent.clientX - startX), MIN_FILE_SIDEBAR_WIDTH), maxWidth);
+      setFileSidebarWidth(nextWidth);
+    };
+
+    const handleMouseUp = () => {
+      document.body.classList.remove('agent-resizing');
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    document.body.classList.add('agent-resizing');
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+  };
+
+  const scrollToBottom = (smooth = true) => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTo({
+        top: scrollContainerRef.current.scrollHeight,
+        behavior: smooth ? 'smooth' : 'auto',
+      });
+    }
+  };
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const container = e.currentTarget;
+    const isAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 50;
+    setShowScrollButton(!isAtBottom && messages.length > 0);
+    if (!isAtBottom) {
+      setAutoScrollEnabled(false);
+    }
+  };
+
+  useEffect(() => {
+    if (autoScrollEnabled && messages.length > 0) {
+      const timer = setTimeout(() => scrollToBottom(false), 100);
+      return () => clearTimeout(timer);
+    }
+  }, [messages, autoScrollEnabled]);
+
+  const handleThreadSelect = (nextThreadId: string) => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+      setIsStreaming(false);
+      clearLoadingStates();
+    }
+    syncThreadId(nextThreadId);
+  };
+
+  return (
+    <div className={`flex h-[calc(100vh-80px)] w-full flex-col ${isDark ? 'bg-slate-900' : 'bg-white'}`}>
+      <div className={`border-b px-6 py-4 ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => navigate('/agent-expert-center')}
+              className={`p-1.5 rounded-md ${isDark ? 'hover:bg-slate-800 text-slate-300' : 'hover:bg-gray-100 text-gray-600'}`}
+            >
+              <ArrowLeft className="w-4 h-4" />
+            </button>
+            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-violet-500 to-purple-600 text-sm font-semibold text-white">
+              {agent.name.charAt(0)}
+            </div>
+            <div>
+              <h2 className={`text-base font-semibold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>
+                {agent.name}
+              </h2>
+              <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{agent.description}</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => setIsThreadSidebarOpen((prev) => !prev)}
+              className={`inline-flex h-9 items-center gap-2 rounded-lg border px-3 text-sm font-medium transition ${isDark
+                  ? 'border-slate-700 bg-slate-800 text-slate-100 hover:bg-slate-700'
+                  : 'border-gray-200 bg-gray-50 text-gray-700 hover:border-red-200 hover:bg-red-50 hover:text-red-600'
+                }`}
+              title="打开聊天记录"
+            >
+              <MessageSquareText className="h-4 w-4" />
+              聊天记录
+            </button>
+            <button
+              onClick={() => setIsFileSidebarOpen(true)}
+              className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-cyan-400 via-blue-500 to-purple-600 text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-blue-500/50"
+              title="文件"
+            >
+              <FolderOpen className="h-5 w-5" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex min-h-0 flex-1 overflow-hidden">
+        <SkillCreatorThreadSidebar
+          authedFetch={authedFetch}
+          currentThreadId={currentThreadId}
+          isDarkMode={isDark}
+          isOpen={isThreadSidebarOpen}
+          isBusy={isStreaming}
+          createButtonText="新建聊天"
+          emptyText="当前专家暂无聊天记录"
+          subtitle="仅展示当前专家的聊天记录"
+          createThreadPayload={{
+            title: `与 ${agent.name} 的对话`,
+            expert_agent_id: agentId ? Number(agentId) : null,
+          }}
+          threadFilter={(thread) => String(thread.expert_agent_id ?? '') === String(agentId ?? '')}
+          onClose={() => setIsThreadSidebarOpen(false)}
+          onThreadSelect={handleThreadSelect}
+        />
+
+        <div className="flex min-w-0 flex-1 flex-col">
+          <div
+            ref={scrollContainerRef}
+            onScroll={handleScroll}
+            className="relative flex min-h-0 flex-1 flex-col overflow-y-auto px-6 py-8"
+          >
+            {isLoading ? (
+              <div className="flex h-full items-center justify-center">
+                <div className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>加载对话中...</div>
+              </div>
+            ) : messages.length === 0 ? (
+              <div className="flex flex-1 flex-col items-center justify-center">
+                <div className="mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-violet-500 to-purple-600 text-white shadow-lg shadow-violet-300/30">
+                  <Zap className="h-10 w-10" />
+                </div>
+
+                <h3 className={`mb-2 text-2xl font-bold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>
+                  你好，我是 {agent.name}
+                </h3>
+                <p className={`mb-6 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{agent.description}</p>
+
+                <div className={`mb-8 inline-flex items-center gap-2 rounded-full border px-4 py-2 ${isDark ? 'border-emerald-800 bg-emerald-950/50 text-emerald-300' : 'border-emerald-200 bg-emerald-50 text-emerald-700'}`}>
+                  <span className="h-2 w-2 rounded-full bg-emerald-500" />
+                  <span className="text-xs font-medium">{agent.status}</span>
+                </div>
+
+                <div className="flex flex-wrap justify-center gap-3">
+                  {agent.capabilities?.map((capability, idx) => (
+                    <button
+                      key={idx}
+                      onClick={() => handleCapabilityClick(capability)}
+                      className={`rounded-lg px-4 py-2 text-xs font-medium transition ${isDark
+                          ? 'bg-slate-800 text-slate-300 hover:bg-slate-700'
+                          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                        }`}
+                    >
+                      {capability}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <div className="flex flex-col gap-4">
+                <AgentConversationList messages={messages} isConnecting={isStreaming} />
+              </div>
+            )}
+
+            {/* {showScrollButton && (
+              <button
+                onClick={() => {
+                  setAutoScrollEnabled(true);
+                  scrollToBottom(true);
+                }}
+                className={`absolute bottom-20 left-1/2 flex h-10 w-10 -translate-x-1/2 items-center justify-center rounded-full border text-xs font-medium transition ${
+                  isDark
+                    ? 'border-slate-200/25 bg-slate-300/25 text-slate-100 hover:bg-slate-300/35'
+                    : 'border-gray-200/70 bg-gray-300/45 text-gray-700 hover:bg-gray-300/60'
+                }`}
+                aria-label="自动下滑"
+                title="自动下滑"
+              >
+                <ChevronDown className="h-4 w-4" />
+              </button>
+            )} */}
+          </div>
+
+          <ChatInputComposer
+            value={inputValue}
+            onChange={setInputValue}
+            onSend={() => void handleSendMessage()}
+            onStop={handleStopStream}
+            onUploadFile={(file) => void handleUploadFile(file)}
+            isSending={isStreaming}
+            isDarkMode={isDark}
+            showBorderTop
+            placeholder="输入你的问题..."
+          />
+        </div>
+
+        {isFileSidebarOpen && (
+          <aside
+            className={`relative flex min-h-0 shrink-0 border-l shadow-2xl ${isDark ? 'border-slate-700 bg-slate-950 text-slate-100 shadow-black/30' : 'border-gray-200 bg-white text-gray-900 shadow-gray-200/70'
+              }`}
+            style={{ width: fileSidebarWidth }}
+          >
+            <div
+              onMouseDown={handleResizeStart}
+              className={`absolute left-0 top-0 z-20 h-full w-2 -translate-x-1/2 cursor-col-resize transition-colors ${isDark ? 'hover:bg-blue-400/40' : 'hover:bg-blue-500/25'
+                }`}
+              title="拖拽调整文件侧边栏宽度"
+            />
+
+            <div className={`flex w-[46%] min-w-[220px] flex-col border-r ${isDark ? 'border-slate-800' : 'border-gray-200'}`}>
+              <div className={`border-b px-4 py-3 ${isDark ? 'border-slate-800 bg-slate-900/70' : 'border-gray-200 bg-gray-50/80'}`}>
+                <div>
+                  <h3 className="text-sm font-semibold">文件</h3>
+                  <p className={`mt-0.5 text-xs ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>{fileList.length} 个根节点</p>
+                </div>
+              </div>
+
+              <div className="agent-file-tree-scroll min-h-0 flex-1 overflow-y-auto p-3">
+                {fileList.length > 0 ? (
+                  <div className="space-y-1">
+                    {fileList.map((node) => (
+                      <FileTreeItem
+                        key={node.path}
+                        node={node}
+                        isDark={isDark}
+                        expandedPaths={expandedPaths}
+                        selectedPath={selectedFile?.path ?? null}
+                        onToggle={handleToggleFolder}
+                        onSelect={(file) => void handleSelectFile(file)}
+                      />
+                    ))}
+                  </div>
+                ) : (
+                  <div className={`rounded-2xl border border-dashed px-4 py-8 text-center text-sm ${isDark ? 'border-slate-700 text-slate-500' : 'border-gray-200 text-gray-400'}`}>
+                    暂无文件
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className="flex min-w-0 flex-1 flex-col">
+              <div className={`flex items-center justify-between gap-3 border-b px-5 py-3 ${isDark ? 'border-slate-800 bg-slate-900/70' : 'border-gray-200 bg-gray-50/80'}`}>
+                <div className="min-w-0">
+                  <h3 className="truncate text-sm font-semibold">{selectedFile?.name ?? '文件预览'}</h3>
+                  <p className={`mt-0.5 truncate text-xs ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>
+                    {selectedFile ? selectedFile.path : '选择左侧文件查看内容'}
+                  </p>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => setIsFileSidebarOpen(false)}
+                  className={`flex shrink-0 items-center justify-center rounded-lg transition ${isDark ? 'text-slate-400 hover:bg-slate-800 hover:text-slate-100' : 'text-gray-500 hover:bg-gray-200 hover:text-gray-900'
+                    }`}
+                  title="关闭文件侧边栏"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              </div>
+
+              <div className="agent-file-preview-scroll min-h-0 flex-1 overflow-auto p-5">
+                {!selectedFile ? (
+                  <div className={`flex h-full flex-col items-center justify-center rounded-3xl border border-dashed text-center ${isDark ? 'border-slate-800 bg-slate-900/40 text-slate-500' : 'border-gray-200 bg-gray-50 text-gray-400'}`}>
+                    <FileText className="mb-3 h-10 w-10 opacity-60" />
+                    <p className="text-sm font-medium">请选择一个文件</p>
+                    <p className="mt-1 text-xs">文件内容会显示在这里</p>
+                  </div>
+                ) : isFilePreviewLoading ? (
+                  <div className={`flex h-full items-center justify-center gap-2 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    加载文件内容中...
+                  </div>
+                ) : filePreviewError ? (
+                  <div className={`flex h-full flex-col items-center justify-center gap-2 text-sm ${isDark ? 'text-red-300' : 'text-red-500'}`}>
+                    <AlertCircle className="h-8 w-8" />
+                    {filePreviewError}
+                  </div>
+                ) : (
+                  <div className={`overflow-hidden rounded-2xl border ${isDark ? 'border-slate-800 bg-slate-900' : 'border-gray-200 bg-white'}`}>
+                    <div className={`flex items-center justify-between border-b px-4 py-2.5 ${isDark ? 'border-slate-800 bg-slate-950/70' : 'border-gray-100 bg-gray-50'}`}>
+                      <span className={`text-xs font-semibold tracking-wide ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{getFileLanguage(selectedFile.extension)}</span>
+                      <span className={`text-xs ${isDark ? 'text-slate-600' : 'text-gray-400'}`}>{formatFileSize(selectedFile.size)}</span>
+                    </div>
+                    <div className={`p-5 text-sm leading-7 ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+                      <MarkdownRenderer
+                        content={filePreviewContent || '文件内容为空'}
+                        className="agent-file-markdown-preview"
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </aside>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/web-code/components/agent/AgentConversationList.tsx b/web-code/components/agent/AgentConversationList.tsx
new file mode 100644
index 00000000..4fa1d2b1
--- /dev/null
+++ b/web-code/components/agent/AgentConversationList.tsx
@@ -0,0 +1,55 @@
+import SkillCreatorConversationItem from './SkillCreatorConversationItem';
+
+export interface ToolCall {
+  id: string;
+  name: string;
+  input?: Record<string, unknown>;
+  output?: string;
+}
+
+export interface ConversationStep {
+  text: string;
+  subText?: string;
+  status: 'done' | 'processing';
+}
+
+export interface ConversationMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  steps?: ConversationStep[];
+  thinkings?: Array<{ duration: number; content: string }>;
+  toolCalls?: ToolCall[];
+}
+
+interface AgentConversationListProps {
+  messages: ConversationMessage[];
+  isConnecting?: boolean;
+  className?: string;
+}
+
+export default function AgentConversationList({ messages, isConnecting = false, className = '' }: AgentConversationListProps) {
+  return (
+    <div className={`w-full max-w-4xl mx-auto space-y-5 pb-6 ${className}`}>
+      {messages.map((message, index) => {
+        // 仅在最后一条 assistant 且尚未收到任何生成内容时显示“连接中”态
+        // 一旦出现 steps/thinkings/toolCalls/content，就切回正常渲染
+        const hasStartedGenerating =
+          Boolean(message.content) ||
+          Boolean(message.steps?.length) ||
+          Boolean(message.thinkings?.length) ||
+          Boolean(message.toolCalls?.length);
+        const shouldShowConnecting =
+          isConnecting && index === messages.length - 1 && message.role === 'assistant' && !hasStartedGenerating;
+
+        return (
+          <SkillCreatorConversationItem
+            key={message.id}
+            message={message}
+            isConnecting={shouldShowConnecting}
+          />
+        );
+      })}
+    </div>
+  );
+}
diff --git a/web-code/components/agent/AgentExpertCenterPage.tsx b/web-code/components/agent/AgentExpertCenterPage.tsx
new file mode 100644
index 00000000..51ede3f1
--- /dev/null
+++ b/web-code/components/agent/AgentExpertCenterPage.tsx
@@ -0,0 +1,364 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Plus, Sparkles, ArrowRight, MessageCircle, Bot, BriefcaseBusiness, Info, Pencil, Trash2, Eye, EyeOff, MessageCircleMore, InfoIcon, Edit } from 'lucide-react';
+import { Dialog, Loading, MessagePlugin, Popconfirm, Switch } from 'tdesign-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import { useExpertAuthBootstrap } from '../../hooks';
+import { knowledgetoolUrl } from '@/hooks/useExpertAuthBootstrap';
+
+interface ExpertAgentItem {
+  id: number;
+  name: string;
+  avatar_url: string | null;
+  description: string | null;
+  model_name: string;
+  is_draft: boolean;
+  user_id: string;
+  created_at: string;
+}
+
+type ExpertTab = 'mine' | 'published';
+
+export default function AgentExpertCenterPage() {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const { llmList, currentUser, authedFetch } = useExpertAuthBootstrap();
+  const navigate = useNavigate();
+
+  const [activeTab, setActiveTab] = useState<ExpertTab>('mine');
+  const [agentList, setAgentList] = useState<ExpertAgentItem[]>([]);
+  const [isListLoading, setIsListLoading] = useState(false);
+  const [isStatusUpdating, setIsStatusUpdating] = useState(false);
+  const [detailVisible, setDetailVisible] = useState(false);
+  const [selectedAgent, setSelectedAgent] = useState<ExpertAgentItem | null>(null);
+
+  const fetchExpertList = useCallback(async () => {
+    setIsListLoading(true);
+    try {
+      const isDraft = activeTab === 'mine';
+      const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/list`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ is_draft: isDraft }),
+      });
+
+      if (!res.ok) {
+        console.error('expert-agents/list接口调用失败:', res.status, res.statusText);
+        setAgentList([]);
+        return;
+      }
+
+      const data: unknown = await res.json();
+      const rawList = Array.isArray(data) ? (data as ExpertAgentItem[]) : [];
+
+      if (isDraft) {
+        const mineFromList = currentUser ? rawList.filter((item) => item.user_id === currentUser.id) : [];
+
+        const allRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents`, {
+          method: 'GET',
+        });
+
+        let mineFromAll: ExpertAgentItem[] = [];
+        if (allRes.ok) {
+          const allData: unknown = await allRes.json();
+          const allList = Array.isArray(allData) ? (allData as ExpertAgentItem[]) : [];
+          mineFromAll = currentUser ? allList.filter((item) => item.user_id === currentUser.id) : [];
+        } else {
+          console.error('expert-agents接口调用失败:', allRes.status, allRes.statusText);
+        }
+
+        const mergedMap = new Map<number, ExpertAgentItem>();
+        [...mineFromList, ...mineFromAll].forEach((item) => mergedMap.set(item.id, item));
+        setAgentList(Array.from(mergedMap.values()));
+        return;
+      }
+
+      setAgentList(rawList);
+    } catch (error) {
+      console.error('expert-agents/list接口异常:', error);
+      setAgentList([]);
+    } finally {
+      setIsListLoading(false);
+    }
+  }, [activeTab, authedFetch, currentUser]);
+
+  useEffect(() => {
+    if (activeTab === 'mine' && !currentUser) return;
+    void fetchExpertList();
+  }, [activeTab, currentUser, fetchExpertList]);
+
+  const handleStatusToggle = async (nextPublished: boolean) => {
+    if (!selectedAgent) return;
+
+    const nextIsDraft = !nextPublished;
+    setIsStatusUpdating(true);
+    try {
+      const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${selectedAgent.id}`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ is_draft: nextIsDraft }),
+      });
+
+      if (!res.ok) {
+        console.error('更新专家状态失败:', res.status, res.statusText);
+        return;
+      }
+
+      setSelectedAgent({ ...selectedAgent, is_draft: nextIsDraft });
+      await fetchExpertList();
+    } catch (error) {
+      console.error('更新专家状态异常:', error);
+    } finally {
+      setIsStatusUpdating(false);
+    }
+  };
+
+  const addAgentSearch = async () => {
+    const parmy = {
+      model_name: 'Qwen3.5-27B',
+      name: '未命名专家',
+      system_prompt: '你是一个专业的助手，能够回答用户的问题。'
+    }
+    const res: any = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(parmy),
+    });
+    console.log('创建专家', res);
+    const data: any = await res.json()
+    navigate(`/agent-expert-edit?id=${data.id}`)
+  }
+
+  const delAgentSearch = async (id) => {
+    const res: any = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${id}`, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    MessagePlugin.success('操作成功')
+    await fetchExpertList();
+  }
+
+  const cards = useMemo(
+    () =>
+      agentList.map((item) => ({
+        id: String(item.id),
+        title: item.name || '未命名专家',
+        desc: item.description || '暂无描述',
+        status: item.is_draft ? '草稿' : '已发布',
+        avatarSvg: item.avatar_url,
+        raw: item,
+      })),
+    [agentList],
+  );
+
+  return (
+    <div className={`w-full min-h-[calc(100vh-140px)] ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>
+      <div className="max-w-[1100px] mx-auto">
+        <section className={`rounded-2xl border px-6 py-6 ${isDark ? 'bg-slate-900/60 border-slate-700' : 'bg-white border-gray-200'}`}>
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <div className="flex items-center gap-3">
+                <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-fuchsia-500 to-violet-600 flex items-center justify-center text-white shadow">
+                  <Sparkles className="w-5 h-5" />
+                </div>
+                <h1 className="text-3xl font-bold tracking-tight">我的智能体</h1>
+              </div>
+              <p className={`mt-2 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>管理你的专属 AI 专家助手</p>
+              <p className={`mt-1 text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>已加载模型：{llmList.length}</p>
+
+              <div className="mt-4 inline-flex items-center rounded-lg border overflow-hidden">
+                <button
+                  onClick={() => setActiveTab('mine')}
+                  className={`px-3 py-1.5 text-xs ${activeTab === 'mine' ? 'bg-slate-900 text-white' : isDark ? 'bg-slate-800/60 text-slate-300' : 'bg-gray-50 text-gray-600'}`}
+                >
+                  我的智能体
+                </button>
+                <button
+                  onClick={() => setActiveTab('published')}
+                  className={`px-3 py-1.5 text-xs ${activeTab === 'published' ? 'bg-slate-900 text-white' : isDark ? 'bg-slate-800/60 text-slate-300' : 'bg-gray-50 text-gray-600'}`}
+                >
+                  发布的智能体
+                </button>
+              </div>
+            </div>
+
+            <button className="inline-flex items-center gap-2 h-10 px-4 rounded-full bg-slate-900 text-white hover:bg-slate-800 transition" onClick={addAgentSearch}>
+              <Plus className="w-4 h-4" /> 创建智能体
+            </button>
+          </div>
+        </section>
+
+        <section className="mt-6">
+          {isListLoading ? (
+            <div className={`min-h-[280px] rounded-2xl border flex items-center justify-center ${isDark ? 'bg-slate-900/40 border-slate-700' : 'bg-white border-gray-200'}`}>
+              <Loading loading text="加载专家列表中..." />
+            </div>
+          ) : cards.length === 0 ? (
+            <div className={`min-h-[280px] rounded-2xl border flex flex-col items-center justify-center text-center px-4 ${isDark ? 'bg-slate-900/40 border-slate-700' : 'bg-white border-gray-200'}`}>
+              <div className={`w-14 h-14 rounded-2xl flex items-center justify-center mb-3 ${isDark ? 'bg-slate-800 text-slate-300' : 'bg-gray-100 text-gray-500'}`}>
+                <BriefcaseBusiness className="w-6 h-6" />
+              </div>
+              <h3 className={`text-base font-semibold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>
+                {activeTab === 'mine' ? '暂无我的专家' : '暂无发布的专家'}
+              </h3>
+              <p className={`mt-2 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                创建你的第一个专家助手，开始高效工作
+              </p>
+              <button className="mt-4 inline-flex items-center gap-2 h-10 px-4 rounded-xl bg-slate-900 text-white hover:bg-slate-800 transition">
+                <Plus className="w-4 h-4" /> 创建第一个专家
+              </button>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {cards.map((item, idx) => (
+                <article
+                  key={item.id}
+                  className={`rounded-2xl border p-5 transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 ${isDark ? 'bg-slate-900/60 border-slate-700 hover:border-slate-500' : 'bg-white border-gray-200 hover:border-gray-300'}`}
+                >
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="flex items-center gap-3 min-w-0 flex-1">
+                      {item.avatarSvg ? (
+                        <img
+                          src={`data:image/svg+xml;utf8,${encodeURIComponent(item.avatarSvg)}`}
+                          alt={item.title}
+                          className="w-10 h-10 rounded-xl object-cover flex-shrink-0"
+                        />
+                      ) : (
+                        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center text-white shadow-sm flex-shrink-0">
+                          {idx % 2 === 0 ? <MessageCircle className="w-5 h-5" /> : <Bot className="w-5 h-5" />}
+                        </div>
+                      )}
+                      <div className="min-w-0">
+                        <h3 className="font-semibold text-[15px] leading-6 truncate">{item.title}</h3>
+                        <p className={`text-xs mt-1 line-clamp-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{item.desc}</p>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center gap-2 flex-shrink-0">
+                      {activeTab === 'mine' && (
+                        <>
+                          <button
+                            type="button"
+                            title="查看详情"
+                            className={`inline-flex items-center justify-center w-7 h-7 rounded-md border transition ${isDark ? 'border-slate-600 text-slate-300 hover:bg-slate-700/60' : 'border-gray-200 text-gray-500 hover:bg-gray-100'}`}
+                            onClick={() => {
+                              setSelectedAgent(item.raw);
+                              setDetailVisible(true);
+                            }}
+                          >
+                            <Info className="w-4 h-4 shrink-0" />
+                          </button>
+                          <button
+                            type="button"
+                            title="编辑"
+                            className={`inline-flex items-center justify-center w-7 h-7 rounded-md border transition ${isDark ? 'border-slate-600 text-slate-300 hover:bg-slate-700/60' : 'border-gray-200 text-gray-500 hover:bg-gray-100'}`}
+                            onClick={() => {
+                              navigate(`/agent-expert-edit?id=${item.id}`);
+                            }}
+                          >
+                            <Edit className="w-4 h-4 shrink-0" />
+                          </button>
+                          <Popconfirm
+                            content="确认删除该条数据吗？"
+                            onConfirm={() => delAgentSearch(item.id)}
+                          >
+                            <button
+                              type="button"
+                              title="删除"
+                              className={`inline-flex items-center justify-center w-7 h-7 rounded-md border transition ${isDark ? 'border-slate-600 text-slate-300 hover:bg-rose-900/20 hover:text-rose-300' : 'border-gray-200 text-gray-500 hover:bg-rose-50 hover:text-rose-500'}`}
+                            >
+                              <Trash2 className="w-4 h-4 shrink-0" />
+                            </button>
+                          </Popconfirm>
+                        </>
+                      )}
+
+                      <span className={`inline-flex items-center gap-1.5 text-xs px-2 py-1 rounded-full border ${isDark ? 'bg-emerald-950/50 border-emerald-800 text-emerald-300' : 'bg-emerald-50 border-emerald-200 text-emerald-700'}`}>
+                        <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
+                        {item.status}
+                      </span>
+                    </div>
+                  </div>
+
+                  <button
+                    onClick={() => navigate(`/agent-chat?id=${item.id}`)}
+                    className={`mt-6 inline-flex items-center gap-1 text-sm ${isDark ? 'text-slate-300 hover:text-white' : 'text-gray-700 hover:text-gray-900'}`}
+                  >
+                    进行对话
+                    <ArrowRight className="w-4 h-4" />
+                  </button>
+                </article>
+              ))}
+            </div>
+          )}
+        </section>
+
+        <section className={`mt-6 rounded-2xl border px-6 py-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4 ${isDark ? 'bg-violet-950/30 border-violet-800/50' : 'bg-violet-50 border-violet-100'}`}>
+          <div>
+            <h3 className="text-xl font-semibold">不确定从哪个开始？</h3>
+            <p className={`mt-2 text-sm ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>直接开始对话，AI 会自动匹配最合适的专家助手</p>
+          </div>
+
+          <button className="inline-flex items-center justify-center gap-2 h-11 px-6 rounded-xl bg-gradient-to-r from-fuchsia-500 to-violet-600 text-white font-medium hover:opacity-95 transition">
+            开始对话
+            <ArrowRight className="w-4 h-4" />
+          </button>
+        </section>
+
+        <Dialog
+          visible={detailVisible}
+          onClose={() => setDetailVisible(false)}
+          confirmBtn={null}
+          cancelBtn={null}
+          header="专家详情"
+          width={520}
+        >
+          <div className="py-2">
+            <div className="flex flex-col items-center text-center">
+              {selectedAgent?.avatar_url ? (
+                <img
+                  src={`data:image/svg+xml;utf8,${encodeURIComponent(selectedAgent.avatar_url)}`}
+                  alt={selectedAgent?.name || '专家头像'}
+                  className="w-20 h-20 rounded-2xl object-cover"
+                />
+              ) : (
+                <div className="w-20 h-20 rounded-2xl bg-gray-100" />
+              )}
+
+              <h4 className="mt-4 text-2xl font-semibold text-gray-900">{selectedAgent?.name || '未命名专家'}</h4>
+              <p className="mt-2 text-sm text-gray-400">{selectedAgent?.description || '暂无描述'}</p>
+            </div>
+
+            <div className="mt-5 rounded-xl bg-gray-50 px-3 py-3 flex items-center justify-between">
+              <div className="inline-flex items-center gap-2 text-sm text-gray-500">
+                {selectedAgent?.is_draft ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                {selectedAgent?.is_draft ? '草稿状态' : '已发布'}
+              </div>
+              <Switch
+                value={!selectedAgent?.is_draft}
+                loading={isStatusUpdating}
+                disabled={isStatusUpdating}
+                onChange={(value) => {
+                  void handleStatusToggle(value as boolean);
+                }}
+              />
+            </div>
+
+            <button className="mt-4 w-full h-10 rounded-lg bg-gradient-to-r from-fuchsia-500 to-violet-600 text-white inline-flex items-center justify-center gap-2">
+              <MessageCircleMore className="w-4 h-4" />
+              开始聊天
+            </button>
+          </div>
+        </Dialog>
+      </div>
+    </div>
+  );
+}
diff --git a/web-code/components/agent/AgentExpertEditPage.tsx b/web-code/components/agent/AgentExpertEditPage.tsx
new file mode 100644
index 00000000..da5184f9
--- /dev/null
+++ b/web-code/components/agent/AgentExpertEditPage.tsx
@@ -0,0 +1,1101 @@
+import { useEffect, useRef, useState } from 'react';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import {
+  ArrowLeft,
+  Bot,
+  Copy,
+  Download,
+  ImagePlus,
+  Paperclip,
+  Pencil,
+  Save,
+  Sparkles,
+  Wrench,
+  Flower2,
+  CheckCircle2,
+  X,
+  ChevronDown,
+  Edit,
+} from 'lucide-react';
+import AgentConversationList, { type ConversationMessage } from './AgentConversationList';
+import ChatInputComposer from './ChatInputComposer';
+import { Input, Select, Tabs, Textarea, Dialog, MessagePlugin } from 'tdesign-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import { useExpertAuthBootstrap } from '../../hooks';
+import { knowledgetoolUrl } from '@/hooks/useExpertAuthBootstrap';
+
+interface AgentExpertEditPageProps {
+  agentId?: string | null;
+}
+
+export default function AgentExpertEditPage({ agentId: propAgentId }: AgentExpertEditPageProps) {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const { llmList, authedFetch } = useExpertAuthBootstrap();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const agentId = propAgentId || searchParams.get('id') || '12';
+  const [tab, setTab] = useState('edit');
+  const [toolDialogVisible, setToolDialogVisible] = useState(false);
+  const [skillDialogVisible, setSkillDialogVisible] = useState(false);
+  const [selectedTools, setSelectedTools] = useState<string[]>([]);
+  const [pendingTools, setPendingTools] = useState<string[]>([]);
+  const [boundToolIdMap, setBoundToolIdMap] = useState<Record<string, string>>({});
+  const [selectedSkills, setSelectedSkills] = useState<string[]>([]);
+  const [skillKeyword, setSkillKeyword] = useState('');
+  const [skillOptions, setSkillOptions] = useState<{ id: string; name: string; desc: string }[]>([]);
+  const [boundSkillMap, setBoundSkillMap] = useState<Record<string, { name: string; desc: string }>>({});
+  const [isSkillLoading, setIsSkillLoading] = useState(false);
+  const [bindingSkillIds, setBindingSkillIds] = useState<string[]>([]);
+  const [unbindingSkillIds, setUnbindingSkillIds] = useState<string[]>([]);
+  const [isToolSubmitting, setIsToolSubmitting] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [toolOptions, setToolOptions] = useState<{ id: string; name: string; desc: string }[]>([]);
+  const [messages, setMessages] = useState<ConversationMessage[]>([]);
+  const [inputValue, setInputValue] = useState('');
+  const [threadId, setThreadId] = useState<number | null>(null);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const thinkingStartRef = useRef<number>(0);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
+  const [showScrollButton, setShowScrollButton] = useState(false);
+  const router = useNavigate();
+
+  const scrollToBottom = (smooth = true) => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTo({
+        top: scrollContainerRef.current.scrollHeight,
+        behavior: smooth ? 'smooth' : 'auto',
+      });
+    }
+  };
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const container = e.currentTarget;
+    const isAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 50;
+    setShowScrollButton(!isAtBottom && messages.length > 0);
+    if (!isAtBottom) {
+      setAutoScrollEnabled(false);
+    }
+  };
+
+  useEffect(() => {
+    if (autoScrollEnabled && messages.length > 0) {
+      const timer = setTimeout(() => scrollToBottom(false), 100);
+      return () => clearTimeout(timer);
+    }
+  }, [messages, autoScrollEnabled]);
+
+  const ensureThreadId = async () => {
+    if (threadId) return threadId;
+
+    const threadRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/no_real/${agentId}`, {
+      method: 'GET',
+    });
+    if (!threadRes.ok) {
+      throw new Error(`获取会话失败: ${threadRes.status}`);
+    }
+
+    const threadData = (await threadRes.json()) as { id: number };
+    setThreadId(threadData.id);
+    return threadData.id;
+  };
+
+  const sendMessage = async () => {
+    const text = inputValue.trim();
+    if (!text || isStreaming) return;
+    setInputValue('');
+    setIsStreaming(true);
+
+    const userMsg: ConversationMessage = {
+      id: `user-${Date.now()}`,
+      role: 'user',
+      content: text,
+    };
+    setMessages((prev) => [...prev, userMsg]);
+
+    try {
+      // 1. GET or reuse thread
+      let tid = threadId;
+      if (!tid) {
+        const threadRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/no_real/${agentId}`, {
+          method: 'GET',
+        });
+        if (!threadRes.ok) {
+          console.error('创建会话失败:', threadRes.status);
+          return;
+        }
+        const threadData = (await threadRes.json()) as { id: number };
+        tid = threadData.id;
+        setThreadId(tid);
+      }
+
+      // 2. POST user message
+      const msgRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/messages`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ thread_id: tid, role: 'user', content: { type: 'text', text } }),
+      });
+      if (!msgRes.ok) {
+        console.error('发送消息失败:', msgRes.status);
+        return;
+      }
+
+      // 3. Stream assistant response
+      const assistantId = `assistant-${Date.now()}`;
+      setMessages((prev) => [
+        ...prev,
+        { id: assistantId, role: 'assistant', content: '', steps: [], thinkings: [], toolCalls: [] },
+      ]);
+
+      const streamRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/run/stream/help_expert`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ chat_id: tid, expert_agent_id: Number(agentId), user_query: text, messages: [] }),
+      });
+      if (!streamRes.ok || !streamRes.body) {
+        console.error('流式接口失败:', streamRes.status);
+        return;
+      }
+
+      const reader = streamRes.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() ?? '';
+
+        for (const line of lines) {
+          if (!line.startsWith('data: ')) continue;
+          const raw = line.slice(6).trim();
+          if (raw === '[DONE]') break;
+
+          let event: { type: string; data?: { id: string; title: string; status: string; items?: string[] }; id?: string; delta?: string } | null = null;
+          try { event = JSON.parse(raw) as typeof event; } catch { continue; }
+          if (!event) continue;
+
+          setMessages((prev) =>
+            prev.map((msg) => {
+              if (msg.id !== assistantId) return msg;
+              switch (event!.type) {
+                case 'data-thinking-step': {
+                  const step = event!.data!;
+                  const newStep = {
+                    text: step.title,
+                    subText: step.items?.[0]?.replace('正在处理: ', '') ?? undefined,
+                    status: (step.status === 'completed' ? 'done' : 'processing') as 'done' | 'processing',
+                  };
+                  const steps = [...(msg.steps ?? [])];
+                  const idx = steps.findIndex((s) => s.text === step.title);
+                  if (idx >= 0) steps[idx] = newStep; else steps.push(newStep);
+                  return { ...msg, steps };
+                }
+                case 'reasoning-start': {
+                  thinkingStartRef.current = Date.now();
+                  return { ...msg, thinkings: [...(msg.thinkings ?? []), { duration: 0, content: '' }] };
+                }
+                case 'reasoning-delta': {
+                  const thinkings = [...(msg.thinkings ?? [])];
+                  if (thinkings.length === 0) {
+                    thinkings.push({ duration: 0, content: event!.delta ?? '' });
+                  } else {
+                    const last = thinkings[thinkings.length - 1];
+                    thinkings[thinkings.length - 1] = { ...last, content: last.content + (event!.delta ?? '') };
+                  }
+                  return { ...msg, thinkings };
+                }
+                case 'reasoning-end': {
+                  const duration = (Date.now() - thinkingStartRef.current) / 1000;
+                  const thinkings = [...(msg.thinkings ?? [])];
+                  if (thinkings.length > 0) {
+                    thinkings[thinkings.length - 1] = { ...thinkings[thinkings.length - 1], duration };
+                  }
+                  return { ...msg, thinkings };
+                }
+                case 'text-delta': {
+                  return { ...msg, content: msg.content + (event!.delta ?? '') };
+                }
+                default:
+                  return msg;
+              }
+            }),
+          );
+        }
+      }
+    } catch (error) {
+      console.error('对话异常:', error);
+    } finally {
+      setIsStreaming(false);
+    }
+  };
+
+  const handleUploadFile = async (file: File) => {
+    try {
+      const tid = await ensureThreadId();
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const response = await authedFetch(
+        `${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/${tid}/files/upload`,
+        {
+          method: 'POST',
+          body: formData,
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error(`上传失败: ${response.status} ${response.statusText}`);
+      }
+    } catch (error) {
+      console.error('上传专家编辑文件失败:', error);
+    }
+  };
+
+
+  const [formValues, setFormValues] = useState({
+    name: '未命名专家',
+    modelName: 'Qwen3.5-plus',
+    description: '',
+    systemPrompt: '你是一个专业的助手，能够回答用户的问题。',
+  });
+
+  const modelOptions = llmList.map((item) => ({ label: item.name, value: item.id }));
+
+  useEffect(() => {
+    const fetchExpertDetail = async () => {
+      try {
+        const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}`, {
+          method: 'GET',
+        });
+
+        if (!res.ok) {
+          console.error('查询专家详情失败:', res.status, res.statusText);
+          return;
+        }
+
+        const data: unknown = await res.json();
+        const detail = data as {
+          name?: string;
+          description?: string | null;
+          system_prompt?: string | null;
+          model_name?: string | null;
+        };
+
+        setFormValues((prev) => ({
+          ...prev,
+          name: detail.name || '',
+          description: detail.description || '',
+          systemPrompt: detail.system_prompt || '',
+          modelName: detail.model_name || prev.modelName,
+        }));
+      } catch (error) {
+        console.error('查询专家详情异常:', error);
+      }
+    };
+
+    void fetchExpertDetail();
+  }, [authedFetch, agentId]);
+
+  useEffect(() => {
+    const fetchBuiltinTools = async () => {
+      try {
+        const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/tools/builtin`, {
+          method: 'GET',
+        });
+
+        if (!res.ok) {
+          console.error('builtin tools接口调用失败:', res.status, res.statusText);
+          setToolOptions([]);
+          return;
+        }
+
+        const data: unknown = await res.json();
+        const list = Array.isArray(data)
+          ? (data as { name: string; description: string }[]).map((item) => ({
+              id: item.name,
+              name: item.name,
+              desc: item.description,
+            }))
+          : [];
+
+        setToolOptions(list);
+      } catch (error) {
+        console.error('builtin tools接口异常:', error);
+        setToolOptions([]);
+      }
+    };
+
+    void fetchBuiltinTools();
+  }, [authedFetch]);
+
+  useEffect(() => {
+    const fetchSkills = async () => {
+      setIsSkillLoading(true);
+      try {
+        const keyword = encodeURIComponent(skillKeyword.trim());
+        const res = await authedFetch(`${knowledgetoolUrl}/api/v1/skills?type=all&keyword=${keyword}&page=1&page_size=100`, {
+          method: 'GET',
+        });
+
+        if (!res.ok) {
+          console.error('skills接口调用失败:', res.status, res.statusText);
+          setSkillOptions([]);
+          return;
+        }
+
+        const data: unknown = await res.json();
+        const items =
+          data && typeof data === 'object' && Array.isArray((data as { items?: unknown[] }).items)
+            ? ((data as { items: Array<{ id: number; name: string; description: string }> }).items || [])
+            : [];
+
+        setSkillOptions(
+          items.map((item) => ({
+            id: String(item.id),
+            name: item.name,
+            desc: item.description,
+          })),
+        );
+      } catch (error) {
+        console.error('skills接口异常:', error);
+        setSkillOptions([]);
+      } finally {
+        setIsSkillLoading(false);
+      }
+    };
+
+    void fetchSkills();
+  }, [authedFetch, skillKeyword]);
+
+  useEffect(() => {
+    const fetchBoundSkills = async () => {
+      try {
+        const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}/skills`, {
+          method: 'GET',
+        });
+
+        if (!res.ok) {
+          console.error('查询已绑定技能失败:', res.status, res.statusText);
+          return;
+        }
+
+        const data: unknown = await res.json();
+        const list = Array.isArray(data)
+          ? (data as Array<{ id: number; name: string; description: string }>).map((item) => ({
+              id: String(item.id),
+              name: item.name,
+              desc: item.description,
+            }))
+          : [];
+
+        setSelectedSkills(list.map((item) => item.id));
+        setBoundSkillMap(
+          list.reduce<Record<string, { name: string; desc: string }>>((acc, item) => {
+            acc[item.id] = { name: item.name, desc: item.desc };
+            return acc;
+          }, {}),
+        );
+      } catch (error) {
+        console.error('查询已绑定技能异常:', error);
+      }
+    };
+
+    void fetchBoundSkills();
+  }, [authedFetch, agentId]);
+
+  useEffect(() => {
+    const fetchBoundTools = async () => {
+      try {
+        const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}/tools`, {
+          method: 'GET',
+        });
+
+        if (!res.ok) {
+          console.error('查询已绑定内置工具失败:', res.status, res.statusText);
+          return;
+        }
+
+        const data: unknown = await res.json();
+        const list = Array.isArray(data)
+          ? (data as Array<{ id: number; name: string }>).map((item) => ({
+              id: String(item.id),
+              name: item.name,
+            }))
+          : [];
+
+        setSelectedTools(list.map((item) => item.name));
+        setBoundToolIdMap(
+          list.reduce<Record<string, string>>((acc, item) => {
+            acc[item.name] = item.id;
+            return acc;
+          }, {}),
+        );
+      } catch (error) {
+        console.error('查询已绑定内置工具异常:', error);
+      }
+    };
+
+    void fetchBoundTools();
+  }, [authedFetch, agentId]);
+
+  const refreshBoundTools = async () => {
+    try {
+      const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}/tools`, {
+        method: 'GET',
+      });
+
+      if (!res.ok) {
+        console.error('刷新已绑定内置工具失败:', res.status, res.statusText);
+        return;
+      }
+
+      const data: unknown = await res.json();
+      const list = Array.isArray(data)
+        ? (data as Array<{ id: number; name: string }>).map((item) => ({ id: String(item.id), name: item.name }))
+        : [];
+
+      setSelectedTools(list.map((item) => item.name));
+      setBoundToolIdMap(
+        list.reduce<Record<string, string>>((acc, item) => {
+          acc[item.name] = item.id;
+          return acc;
+        }, {}),
+      );
+    } catch (error) {
+      console.error('刷新已绑定内置工具异常:', error);
+    }
+  };
+
+  const unbindTool = async (toolName: string) => {
+    const toolId = boundToolIdMap[toolName];
+    if (!toolId) return;
+
+    try {
+      const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}/tools/${toolId}`, {
+        method: 'DELETE',
+      });
+
+      if (!res.ok) {
+        console.error('删除内置工具失败:', res.status, res.statusText);
+        return;
+      }
+
+      await refreshBoundTools();
+    } catch (error) {
+      console.error('删除内置工具异常:', error);
+    }
+  };
+
+  const bindSelectedTools = async () => {
+    setIsToolSubmitting(true);
+    try {
+      const toAdd = pendingTools.filter((name) => !selectedTools.includes(name));
+      for (const toolName of toAdd) {
+        const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}/tools`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ tool_name: toolName }),
+        });
+
+        if (!res.ok) {
+          console.error('绑定内置工具失败:', res.status, res.statusText);
+          return;
+        }
+      }
+
+      await refreshBoundTools();
+      setToolDialogVisible(false);
+    } catch (error) {
+      console.error('绑定内置工具异常:', error);
+    } finally {
+      setIsToolSubmitting(false);
+    }
+  };
+
+  const bindSkill = async (skillId: string) => {
+    if (bindingSkillIds.includes(skillId)) return;
+
+    setBindingSkillIds((prev) => [...prev, skillId]);
+    try {
+      const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}/skills`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ skill_id: Number(skillId) }),
+      });
+
+      if (!res.ok) {
+        console.error('绑定技能失败:', res.status, res.statusText);
+        return;
+      }
+
+      const refreshRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}/skills`, {
+        method: 'GET',
+      });
+
+      if (!refreshRes.ok) {
+        console.error('刷新已绑定技能失败:', refreshRes.status, refreshRes.statusText);
+        return;
+      }
+
+      const refreshData: unknown = await refreshRes.json();
+      const refreshList = Array.isArray(refreshData)
+        ? (refreshData as Array<{ id: number; name: string; description: string }>).map((item) => ({
+            id: String(item.id),
+            name: item.name,
+            desc: item.description,
+          }))
+        : [];
+
+      setSelectedSkills(refreshList.map((item) => item.id));
+      setBoundSkillMap(
+        refreshList.reduce<Record<string, { name: string; desc: string }>>((acc, item) => {
+          acc[item.id] = { name: item.name, desc: item.desc };
+          return acc;
+        }, {}),
+      );
+    } catch (error) {
+      console.error('绑定技能异常:', error);
+    } finally {
+      setBindingSkillIds((prev) => prev.filter((id) => id !== skillId));
+    }
+  };
+
+  const unbindSkill = async (skillId: string) => {
+    if (unbindingSkillIds.includes(skillId)) return;
+
+    setUnbindingSkillIds((prev) => [...prev, skillId]);
+    try {
+      const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}/skills/${skillId}`, {
+        method: 'DELETE',
+      });
+
+      if (!res.ok) {
+        console.error('解除绑定技能失败:', res.status, res.statusText);
+        return;
+      }
+
+      const refreshRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}/skills`, {
+        method: 'GET',
+      });
+
+      if (!refreshRes.ok) {
+        console.error('刷新已绑定技能失败:', refreshRes.status, refreshRes.statusText);
+        return;
+      }
+
+      const refreshData: unknown = await refreshRes.json();
+      const refreshList = Array.isArray(refreshData)
+        ? (refreshData as Array<{ id: number; name: string; description: string }>).map((item) => ({
+            id: String(item.id),
+            name: item.name,
+            desc: item.description,
+          }))
+        : [];
+
+      setSelectedSkills(refreshList.map((item) => item.id));
+      setBoundSkillMap(
+        refreshList.reduce<Record<string, { name: string; desc: string }>>((acc, item) => {
+          acc[item.id] = { name: item.name, desc: item.desc };
+          return acc;
+        }, {}),
+      );
+    } catch (error) {
+      console.error('解除绑定技能异常:', error);
+    } finally {
+      setUnbindingSkillIds((prev) => prev.filter((id) => id !== skillId));
+    }
+  };
+
+  const saveExpert = async () => {
+    setIsSaving(true);
+    try {
+      const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name: formValues.name,
+          avatar_url: null,
+          description: formValues.description,
+          system_prompt: formValues.systemPrompt,
+          model_name: formValues.modelName,
+        }),
+      });
+
+      if (!res.ok) {
+        console.error('保存专家失败:', res.status, res.statusText);
+        return;
+      }
+      MessagePlugin.success('保存成功');
+      console.log('保存专家成功');
+    } catch (error) {
+      console.error('保存专家异常:', error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+
+  return (
+    <>
+      <style>{`
+        @keyframes marquee {
+          0% { background-position: 0% center; }
+          100% { background-position: 200% center; }
+        }
+        .animate-marquee {
+          background-size: 200% 100%;
+          animation: marquee 2s linear infinite;
+        }
+        @keyframes text-marquee {
+          0% { transform: translateX(100%); }
+          100% { transform: translateX(-100%); }
+        }
+        .animate-text-marquee {
+          display: inline-block;
+          animation: text-marquee 3s linear infinite;
+          white-space: nowrap;
+        }
+      `}</style>
+      <div className={`h-[calc(100vh-120px)] rounded-2xl border overflow-hidden ${isDark ? 'border-slate-700 bg-slate-900/40' : 'border-gray-200 bg-white'}`}>
+      <div className={`h-14 px-4 border-b flex items-center justify-between ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => router('/agent-expert-center')}
+            className={`p-1.5 rounded-md ${isDark ? 'hover:bg-slate-800 text-slate-300' : 'hover:bg-gray-100 text-gray-600'}`}
+          >
+            <ArrowLeft className="w-4 h-4" />
+          </button>
+          <div className="w-8 h-8 rounded-xl bg-gradient-to-br from-fuchsia-500 to-violet-600 text-white flex items-center justify-center">
+            <Edit className="w-4 h-4" />
+          </div>
+          <div>
+            <h2 className={`text-base font-semibold leading-5 ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>编辑专家</h2>
+            <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>修改 未命名专家 的配置</p>
+          </div>
+        </div>
+
+        <button
+          onClick={() => {
+            void saveExpert();
+          }}
+          disabled={isSaving}
+          className="inline-flex items-center gap-1.5 h-9 px-3 rounded-lg bg-slate-900 text-white text-sm hover:bg-slate-800 disabled:opacity-60"
+        >
+          <Save className="w-4 h-4" /> 保存修改
+        </button>
+      </div>
+
+      <div className="grid grid-cols-2 h-[calc(100%-56px)]">
+        <section className={`border-r flex flex-col h-full min-h-0 relative ${isDark ? 'border-slate-700 bg-slate-900/20' : 'border-gray-200 bg-white'}`}>
+          <div
+            ref={scrollContainerRef}
+            onScroll={handleScroll}
+            className={`flex-1 ${ messages.length === 0 && 'flex items-center'} min-h-0 overflow-y-auto px-4 py-4`}
+          >
+            {messages.length === 0 ? (
+               <div className="flex-1 flex items-center justify-center">
+                <div className="text-center">
+                  <div className="mx-auto w-16 h-16 rounded-2xl bg-gradient-to-br from-fuchsia-500 to-violet-600 text-white flex items-center justify-center shadow-lg shadow-violet-300/30">
+                    <Bot className="w-7 h-7" />
+                  </div>
+                  <h3 className={`mt-6 text-3xl font-bold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>你好，我是 {formValues.name || '未命名专家'}</h3>
+                  <p className={`mt-3 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>创建你的专属 AI 助手</p>
+
+                  <div className={`mt-4 inline-flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs ${isDark ? 'border-slate-700 bg-slate-800/60 text-slate-300' : 'border-gray-200 bg-white text-gray-500'}`}>
+                    <Sparkles className="w-3.5 h-3.5 text-emerald-400" /> 想和你聊些什么呀
+                  </div>
+
+                  <div className={`mt-7 flex items-center gap-8 text-xs ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>
+                    <span>告诉我你的想法</span>
+                    <span>给我一些建议</span>
+                    <span>帮我分析问题</span>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <>
+                <AgentConversationList messages={messages} />
+              </>
+            )}
+          </div>
+
+          {showScrollButton && (
+            <button
+              onClick={() => {
+                setAutoScrollEnabled(true);
+                scrollToBottom(true);
+              }}
+              className={`absolute bottom-20 left-1/2 -translate-x-1/2 w-10 h-10 rounded-full flex items-center justify-center backdrop-blur-sm text-xs font-medium transition ${
+                isDark
+                  ? 'bg-slate-300/25 hover:bg-slate-300/35 text-slate-100 border border-slate-200/25'
+                  : 'bg-gray-300/45 hover:bg-gray-300/60 text-gray-700 border border-gray-200/70'
+              }`}
+              aria-label="自动下滑"
+              title="自动下滑"
+            >
+              <ChevronDown className="w-4 h-4" />
+            </button>
+          )}
+
+          <ChatInputComposer
+            value={inputValue}
+            onChange={setInputValue}
+            onSend={() => void sendMessage()}
+            onUploadFile={(file) => void handleUploadFile(file)}
+            isSending={isStreaming}
+            isDarkMode={isDark}
+            showBorderTop
+            placeholder={isStreaming ? '正在思考中...' : '输入你的问题...'}
+            trailingActions={
+              <Paperclip className={`h-4 w-4 ${isDark ? 'text-slate-500' : 'text-[#8a94a6]'}`} />
+            }
+            className={isStreaming ? 'ring-1 ring-violet-300/40' : ''}
+          />
+        </section>
+
+        <section className={`${isDark ? 'bg-slate-900/10' : 'bg-white'} flex flex-col h-full min-h-0`}>
+          {/* <div className={`h-14 border-b px-4 flex items-center ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
+            <Tabs value={tab} onChange={(v) => setTab(String(v))} size="medium" className="w-full">
+              <Tabs.TabPanel value="preview" label="对话" />
+              <Tabs.TabPanel value="config" label="配置" />
+            </Tabs>
+          </div> */}
+
+          {tab === 'preview' ? (
+            <>
+              <div className="flex-1 flex items-center justify-center">
+                <div className="text-center">
+                  <div className="mx-auto w-16 h-16 rounded-2xl bg-gradient-to-br from-fuchsia-500 to-violet-600 text-white flex items-center justify-center shadow-lg shadow-violet-300/30">
+                    <Bot className="w-7 h-7" />
+                  </div>
+                  <h3 className={`mt-6 text-3xl font-bold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>你好，我是 {formValues.name || '未命名专家'}</h3>
+                  <p className={`mt-3 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>创建你的专属 AI 助手</p>
+
+                  <div className={`mt-4 inline-flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs ${isDark ? 'border-slate-700 bg-slate-800/60 text-slate-300' : 'border-gray-200 bg-white text-gray-500'}`}>
+                    <Sparkles className="w-3.5 h-3.5 text-emerald-400" /> 想和你聊些什么呀
+                  </div>
+
+                  <div className={`mt-7 flex items-center gap-8 text-xs ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>
+                    <span>告诉我你的想法</span>
+                    <span>给我一些建议</span>
+                    <span>帮我分析问题</span>
+                  </div>
+                </div>
+              </div>
+
+              <ChatInputComposer
+                value=""
+                isDarkMode={isDark}
+                placeholder="输入你的问题..."
+                readOnly
+                disabled
+                showUpload={false}
+                showBorderTop
+                trailingActions={
+                  <>
+                    <ImagePlus className={`h-4 w-4 ${isDark ? 'text-slate-500' : 'text-[#8a94a6]'}`} />
+                    <Paperclip className={`h-4 w-4 ${isDark ? 'text-slate-500' : 'text-[#8a94a6]'}`} />
+                  </>
+                }
+              />
+            </>
+          ) : (
+            <div className="flex-1 min-h-0 overflow-y-auto px-6 py-5 space-y-6">
+              <div>
+                <h3 className={`text-sm font-semibold mb-3 ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>基本信息</h3>
+                <div className="grid grid-cols-[1fr_auto] gap-4 items-start">
+                  <div>
+                    <label className={`text-xs mb-1 block ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>专家名称 *</label>
+                    <Input
+                      value={formValues.name}
+                      onChange={(value) => setFormValues((prev) => ({ ...prev, name: String(value) }))}
+                    />
+                  </div>
+                  <div>
+                    <label className={`text-xs mb-1 block ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>头像 URL</label>
+                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-fuchsia-500 to-violet-600 text-white flex items-center justify-center mt-1">
+                      <Bot className="w-4 h-4" />
+                    </div>
+                  </div>
+                </div>
+
+                <div className="mt-3">
+                  <label className={`text-xs mb-1 block ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>LLM 模型</label>
+                  <Select
+                    value={formValues.modelName}
+                    options={modelOptions}
+                    placeholder="选择用于该专家的 LLM 模型"
+                    onChange={(value) => setFormValues((prev) => ({ ...prev, modelName: String(value) }))}
+                  />
+                </div>
+
+                <div className="mt-3">
+                  <label className={`text-xs mb-1 block ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>描述</label>
+                  <Textarea
+                    autosize={{ minRows: 3, maxRows: 3 }}
+                    placeholder="简单描述这个专家的能力和场景..."
+                    value={formValues.description}
+                    onChange={(value) => setFormValues((prev) => ({ ...prev, description: String(value) }))}
+                  />
+                </div>
+
+                <div className="mt-3">
+                  <label className={`text-xs mb-1 block ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>系统提示词</label>
+                  <div className={`rounded-lg border ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
+                    <div className={`h-8 border-b px-3 flex items-center justify-end gap-2 ${isDark ? 'border-slate-700' : 'border-gray-100'}`}>
+                      <Copy className="w-3.5 h-3.5 text-gray-400" />
+                      <Download className="w-3.5 h-3.5 text-gray-400" />
+                    </div>
+                    <div className="p-3">
+                      <Textarea
+                        autosize={{ minRows: 6, maxRows: 10 }}
+                        value={formValues.systemPrompt}
+                        onChange={(value) => setFormValues((prev) => ({ ...prev, systemPrompt: String(value) }))}
+                        placeholder="请输入系统提示词"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <h3 className={`text-sm font-semibold mb-3 ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>内置工具</h3>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => {
+                    setPendingTools(selectedTools);
+                    setToolDialogVisible(true);
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      setPendingTools(selectedTools);
+                      setToolDialogVisible(true);
+                    }
+                  }}
+                  className={`w-full min-h-[170px] rounded-xl border px-3 py-3 text-left cursor-pointer ${isDark ? 'border-slate-700 hover:border-slate-500' : 'border-gray-200 hover:border-gray-300'}`}
+                >
+                  <div className="flex flex-wrap gap-2">
+                    {selectedTools.map((toolName) => (
+                      <span
+                        key={toolName}
+                        className="inline-flex items-center gap-2 h-10 pl-2 pr-3 rounded-full border border-sky-200 bg-sky-50 text-[#0F2B6B] text-sm"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <span className="w-5 h-5 rounded-full bg-sky-500 text-white flex items-center justify-center">
+                          <Wrench className="w-3 h-3" />
+                        </span>
+                        <span className="text-sm leading-none">{toolName}</span>
+                        <button
+                          type="button"
+                          className="text-slate-500 hover:text-slate-700"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            void unbindTool(toolName);
+                          }}
+                        >
+                          <X className="w-3.5 h-3.5" />
+                        </button>
+                      </span>
+                    ))}
+                  </div>
+
+                  <div className="mt-4 h-[90px] flex items-end justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                      已选择 {selectedTools.length} 个工具
+                    </span>
+                    <Wrench className="w-5 h-5 text-[#2B78FF]" />
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <h3 className={`text-sm font-semibold mb-1 ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>绑定的技能</h3>
+                <p className={`text-xs mb-3 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>为专家添加技能，增强其专业能力</p>
+                <div className={`min-h-[120px] rounded-lg border p-3 ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
+                  <div className="flex flex-wrap gap-2">
+                    {selectedSkills.map((skillId) => {
+                      const skillName = boundSkillMap[skillId]?.name || skillOptions.find((item) => item.id === skillId)?.name || skillId;
+                      return (
+                        <span key={skillId} className="inline-flex items-center gap-2 h-8 px-3 rounded-full border border-emerald-200 bg-emerald-50 text-emerald-700 text-xs">
+                          <span className="w-4 h-4 rounded-full bg-emerald-500 text-white flex items-center justify-center">✓</span>
+                          {skillName}
+                          <button
+                            type="button"
+                            className="text-emerald-600 hover:text-emerald-800"
+                            onClick={() => {
+                              void unbindSkill(skillId);
+                            }}
+                          >
+                            <X className="w-3.5 h-3.5" />
+                          </button>
+                        </span>
+                      );
+                    })}
+                  </div>
+                  <div className="h-[70px] flex items-end justify-end text-emerald-500">
+                    <button type="button" onClick={() => setSkillDialogVisible(true)}>
+                      <Sparkles className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex justify-end pt-2">
+                <button className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>取消</button>
+              </div>
+            </div>
+          )}
+        </section>
+      </div>
+
+      <Dialog
+        visible={toolDialogVisible}
+        onClose={() => {
+          setPendingTools(selectedTools);
+          setToolDialogVisible(false);
+        }}
+        header="添加工具"
+        width={720}
+        confirmBtn={null}
+        cancelBtn={null}
+      >
+        <div className="-mt-1">
+          <p className="text-xs text-gray-500 mb-4">选择要为专家启用的工具</p>
+
+          <div className="grid grid-cols-2 gap-3">
+            {toolOptions.map((tool) => {
+              const checked = pendingTools.includes(tool.id);
+              return (
+                <button
+                  key={tool.id}
+                  type="button"
+                  onClick={() => {
+                    setPendingTools((prev) =>
+                      prev.includes(tool.id) ? prev.filter((id) => id !== tool.id) : [...prev, tool.id],
+                    );
+                  }}
+                  className={`rounded-lg border p-3 text-left transition ${checked ? 'border-sky-400 bg-sky-50' : 'border-gray-200 hover:border-gray-300'}`}
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <div>
+                      <div className="text-sm font-semibold text-gray-900">{tool.name}</div>
+                      <div className="text-xs text-gray-500 mt-1 line-clamp-2">{tool.desc}</div>
+                    </div>
+                    <div className="mt-0.5">
+                      {checked ? (
+                        <CheckCircle2 className="w-4 h-4 text-sky-500" />
+                      ) : (
+                        <div className="w-4 h-4 rounded-full border border-gray-300" />
+                      )}
+                    </div>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+
+          <div className="mt-5 flex items-center justify-between border-t pt-3">
+            <div className="text-xs text-gray-500">已选择 {pendingTools.length} 个工具</div>
+            <button
+              type="button"
+              onClick={() => {
+                void bindSelectedTools();
+              }}
+              disabled={isToolSubmitting}
+              className="h-8 px-4 rounded-lg bg-sky-500 text-white text-sm hover:bg-sky-600 disabled:opacity-60"
+            >
+              确认添加
+            </button>
+          </div>
+        </div>
+      </Dialog>
+
+      <Dialog
+        visible={skillDialogVisible}
+        onClose={() => setSkillDialogVisible(false)}
+        header="绑定技能"
+        width={560}
+        confirmBtn={null}
+        cancelBtn={null}
+      >
+        <div className="-mt-1">
+          <div className="flex items-center gap-2 mb-3">
+            <Input
+              value={skillKeyword}
+              onChange={(value) => setSkillKeyword(String(value))}
+              placeholder="搜索技能"
+              className="flex-1"
+            />
+            <button
+              type="button"
+              onClick={async () => {
+                for (const item of skillOptions) {
+                  if (!selectedSkills.includes(item.id)) {
+                    await bindSkill(item.id);
+                  }
+                }
+              }}
+              className="h-9 px-4 rounded-lg bg-emerald-500 text-white text-sm hover:bg-emerald-600"
+            >
+              一键绑定全部
+            </button>
+          </div>
+
+          <div className="rounded-lg border border-gray-200 overflow-hidden max-h-[260px] overflow-y-auto">
+            {isSkillLoading ? (
+              <div className="px-3 py-6 text-sm text-gray-500">加载技能中...</div>
+            ) : skillOptions.length === 0 ? (
+              <div className="px-3 py-6 text-sm text-gray-500">暂无技能</div>
+            ) : (
+              skillOptions.map((skill) => {
+                const checked = selectedSkills.includes(skill.id);
+                return (
+                  <button
+                    key={skill.id}
+                    type="button"
+                    onClick={async () => {
+                      if (checked) {
+                        await unbindSkill(skill.id);
+                        return;
+                      }
+                      await bindSkill(skill.id);
+                    }}
+                    className={`w-full px-3 py-2.5 text-left border-b last:border-b-0 transition ${checked ? 'bg-emerald-50' : 'bg-white hover:bg-gray-50'}`}
+                  >
+                    <div className="flex items-start justify-between gap-3">
+                      <div>
+                        <div className="text-sm font-semibold text-gray-900">{skill.name}</div>
+                        <div className="text-xs text-gray-500 mt-1 line-clamp-2">{skill.desc}</div>
+                      </div>
+                      <div className="mt-0.5">
+                        {bindingSkillIds.includes(skill.id) || unbindingSkillIds.includes(skill.id) ? (
+                          <div className="w-4 h-4 rounded-full border-2 border-emerald-400 border-t-transparent animate-spin" />
+                        ) : checked ? (
+                          <CheckCircle2 className="w-4 h-4 text-emerald-500" />
+                        ) : (
+                          <div className="w-4 h-4 rounded-full border border-gray-300" />
+                        )}
+                      </div>
+                    </div>
+                  </button>
+                );
+              })
+            )}
+          </div>
+        </div>
+      </Dialog>
+    </div>
+    </>
+  );
+}
diff --git a/web-code/components/agent/ChatInputComposer.tsx b/web-code/components/agent/ChatInputComposer.tsx
new file mode 100644
index 00000000..ae72ac07
--- /dev/null
+++ b/web-code/components/agent/ChatInputComposer.tsx
@@ -0,0 +1,130 @@
+import type { KeyboardEvent, ReactNode } from 'react';
+import { Send, Square, Upload } from 'lucide-react';
+import { Textarea } from 'tdesign-react';
+import { useRef } from 'react';
+
+interface ChatInputComposerProps {
+  value: string;
+  onChange?: (value: string) => void;
+  onSend?: () => void;
+  onStop?: () => void;
+  onKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  isSending?: boolean;
+  isDarkMode: boolean;
+  trailingActions?: ReactNode;
+  readOnly?: boolean;
+  className?: string;
+  showBorderTop?: boolean;
+  showUpload?: boolean;
+  onUploadFile?: (file: File) => void | Promise<void>;
+}
+
+export default function ChatInputComposer({
+  value,
+  onChange,
+  onSend,
+  onStop,
+  onKeyDown,
+  placeholder = '输入你的问题...',
+  disabled = false,
+  isSending = false,
+  isDarkMode,
+  trailingActions,
+  readOnly = false,
+  className = '',
+  showBorderTop = false,
+  showUpload = true,
+  onUploadFile,
+}: ChatInputComposerProps) {
+  const submitEnabled = Boolean(value.trim()) && !disabled && !readOnly && Boolean(onSend);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const iconButtonClass = `rounded-lg p-2 transition-colors ${
+    isDarkMode ? 'text-slate-400 hover:bg-slate-600 hover:text-slate-200' : 'text-gray-500 hover:bg-gray-200 hover:text-gray-700'
+  }`;
+
+  const handleKeyDown = (val, context) => {
+    if (context?.e?.key === 'Enter') {
+      // 阻止默认的换行行为（如果是 Textarea）
+      context.e.preventDefault();
+
+      // 模拟发送请求
+      onSend()
+    }
+  };
+
+  return (
+    <div className={`${showBorderTop ? (isDarkMode ? 'border-t border-slate-700/50' : 'border-t border-red-100') : ''} p-4 ${className}`}>
+      <div className={`flex items-end gap-3 rounded-2xl p-3 shadow-inner ${isDarkMode ? 'bg-slate-700/50' : 'bg-gray-100'}`}>
+        <Textarea
+          value={value}
+          onChange={(nextValue) => onChange?.(String(nextValue))}
+          onKeydown={handleKeyDown}
+          placeholder={placeholder}
+          autosize={{ minRows: 1, maxRows: 8 }}
+          disabled={disabled}
+          readonly={readOnly}
+          className={`flex-1 !bg-transparent !border-0 !shadow-none qa-composer-textarea [&]:!border-0 [&]:!shadow-none [&]:!outline-none [&]:focus:!border-0 [&]:focus:!shadow-none [&]:focus:!outline-none [&_.t-textarea]:!border-0 [&_.t-textarea]:!shadow-none [&_.t-textarea]:!outline-none [&_.t-textarea:hover]:!border-0 [&_.t-textarea:hover]:!shadow-none [&_.t-textarea--focused]:!border-0 [&_.t-textarea--focused]:!shadow-none [&_.t-is-focused]:!border-0 [&_.t-is-focused]:!shadow-none [&_.t-textarea__inner]:!min-h-[40px] [&_.t-textarea__inner]:!resize-none [&_.t-textarea__inner]:!bg-transparent [&_.t-textarea__inner]:!border-0 [&_.t-textarea__inner]:!p-0 [&_.t-textarea__inner]:!shadow-none [&_.t-textarea__inner]:!outline-none [&_.t-textarea__inner:hover]:!border-0 [&_.t-textarea__inner:hover]:!shadow-none [&_.t-textarea__inner:focus]:!border-0 [&_.t-textarea__inner:focus]:!shadow-none [&_.t-textarea__inner:focus]:!outline-none [&_.t-textarea__inner]:disabled:!cursor-not-allowed ${
+            isDarkMode
+              ? '[&_.t-textarea__inner]:!text-white [&_.t-textarea__inner]:placeholder:!text-slate-500'
+              : '[&_.t-textarea__inner]:!text-gray-800 [&_.t-textarea__inner]:placeholder:!text-gray-400'
+          }`}
+        />
+
+        <div className="flex items-center gap-2">
+          {showUpload && (
+            <>
+              <input
+                ref={inputRef}
+                type="file"
+                className="hidden"
+                onChange={(event) => {
+                  const file = event.target.files?.[0];
+                  if (file) {
+                    void onUploadFile?.(file);
+                  }
+                  event.target.value = '';
+                }}
+              />
+              <button
+                type="button"
+                onClick={() => inputRef.current?.click()}
+                disabled={disabled || !onUploadFile}
+                className={`${iconButtonClass} ${(disabled || !onUploadFile) ? 'cursor-not-allowed opacity-50 hover:bg-transparent hover:text-inherit' : ''}`}
+                title="上传文件"
+              >
+                <Upload className="h-5 w-5" />
+              </button>
+            </>
+          )}
+
+          {trailingActions && <div className="flex items-center gap-2">{trailingActions}</div>}
+
+          <button
+            onClick={isSending ? onStop : onSend}
+            disabled={!isSending && !submitEnabled}
+            className={`flex items-center gap-2 rounded-xl px-4 py-2 font-medium shadow-sm transition-all ${
+              isSending
+                ? isDarkMode
+                  ? 'bg-rose-600 text-white'
+                  : 'bg-red-600 text-white'
+                : submitEnabled
+                  ? isDarkMode
+                    ? 'bg-blue-600 text-white hover:bg-blue-700'
+                    : 'bg-red-500 text-white hover:bg-red-600'
+                  : isDarkMode
+                    ? 'cursor-not-allowed bg-slate-600 text-slate-400'
+                    : 'cursor-not-allowed bg-gray-300 text-gray-500'
+            }`}
+            type="button"
+            title={isSending ? '停止' : '发送'}
+          >
+            {isSending ? <Square className="h-4 w-4 fill-current" /> : <Send className="h-4 w-4" />}
+            {isSending ? '停止' : '发送'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web-code/components/agent/FileSkillsWorkshop.tsx b/web-code/components/agent/FileSkillsWorkshop.tsx
new file mode 100644
index 00000000..cb68f386
--- /dev/null
+++ b/web-code/components/agent/FileSkillsWorkshop.tsx
@@ -0,0 +1,770 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  FileCode2,
+  FileText,
+  MoreVertical,
+  Pencil,
+  Plus,
+  Search,
+  Sparkles,
+  Trash2,
+  Upload,
+  X,
+} from 'lucide-react';
+import { useTheme } from '../../contexts/ThemeContext';
+
+interface FileSkill {
+  id: string;
+  folder: string;
+  name: string;
+  description: string;
+  kind: 'md' | 'py';
+  filename: string;
+  created_at: number;
+  updated_at: number;
+}
+
+const API_BASE = 'https://ch1.b.uat.4.cn/zncmback/api/skills/files';
+
+export default function FileSkillsWorkshop() {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  const [skills, setSkills] = useState<FileSkill[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const [createOpen, setCreateOpen] = useState(false);
+  const [editing, setEditing] = useState<FileSkill | null>(null);
+  const [openCardMenuId, setOpenCardMenuId] = useState<string | null>(null);
+
+  const cardMenuRef = useRef<HTMLDivElement | null>(null);
+
+  const reload = async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const res = await fetch(API_BASE);
+      if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+      const data = (await res.json()) as FileSkill[];
+      setSkills(data);
+    } catch (err) {
+      console.error('加载技能失败', err);
+      setError('加载技能失败，请稍后重试');
+      setSkills([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    void reload();
+  }, []);
+
+  useEffect(() => {
+    const handle = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (cardMenuRef.current && !cardMenuRef.current.contains(target)) {
+        setOpenCardMenuId(null);
+      }
+    };
+    document.addEventListener('mousedown', handle);
+    return () => document.removeEventListener('mousedown', handle);
+  }, []);
+
+  const filtered = useMemo(() => {
+    const keyword = searchTerm.trim().toLowerCase();
+    if (!keyword) return skills;
+    return skills.filter((s) =>
+      `${s.name} ${s.description} ${s.filename}`.toLowerCase().includes(keyword),
+    );
+  }, [searchTerm, skills]);
+
+  const handleDelete = async (skill: FileSkill) => {
+    setOpenCardMenuId(null);
+    if (!window.confirm(`确认删除技能「${skill.name}」？`)) return;
+    try {
+      const res = await fetch(`${API_BASE}/${encodeURIComponent(skill.folder)}`, {
+        method: 'DELETE',
+      });
+      if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+      setSkills((prev) => prev.filter((s) => s.folder !== skill.folder));
+    } catch (err) {
+      console.error('删除技能失败', err);
+      setError('删除技能失败');
+    }
+  };
+
+  return (
+    <div
+      className={`w-full min-h-[calc(100vh-140px)] ${
+        isDark ? 'bg-slate-950 text-slate-100' : 'bg-[#fcfcfd] text-[#101828]'
+      }`}
+    >
+      {createOpen && (
+        <CreateSkillModal
+          isDark={isDark}
+          onClose={() => setCreateOpen(false)}
+          onCreated={() => {
+            setCreateOpen(false);
+            void reload();
+          }}
+        />
+      )}
+
+      {editing && (
+        <EditSkillModal
+          isDark={isDark}
+          skill={editing}
+          onClose={() => setEditing(null)}
+          onSaved={() => {
+            setEditing(null);
+            void reload();
+          }}
+        />
+      )}
+
+      <div className="mx-auto max-w-[1360px] px-6 py-8">
+        <section className="mb-7 flex items-start justify-between gap-5">
+          <div>
+            <h1
+              className={`text-[22px] font-bold tracking-tight ${
+                isDark ? 'text-slate-100' : 'text-[#111827]'
+              }`}
+            >
+              技能管理
+            </h1>
+            <p className={`mt-2 text-sm ${isDark ? 'text-slate-400' : 'text-[#667085]'}`}>
+              上传 Markdown 提示词或 Python 脚本作为技能，供 MCP 与模型调用。
+            </p>
+          </div>
+
+          <button
+            type="button"
+            onClick={() => setCreateOpen(true)}
+            className="inline-flex h-11 items-center gap-2 rounded-xl bg-[#ea2d2d] px-5 text-sm font-medium text-white shadow-[0_10px_20px_-12px_rgba(234,45,45,0.7)] transition hover:bg-[#d92626]"
+          >
+            <Plus className="h-4 w-4" />
+            新建技能
+          </button>
+        </section>
+
+        <section
+          className={`mb-8 rounded-[28px] border px-6 py-5 ${
+            isDark ? 'border-slate-800 bg-slate-900/65' : 'border-[#f5d4d4] bg-white'
+          }`}
+        >
+          <div
+            className={`flex items-center gap-3 rounded-2xl border px-4 py-3 ${
+              isDark ? 'border-slate-700 bg-slate-950/50' : 'border-[#f3b6b6] bg-white'
+            }`}
+          >
+            <Search className={`h-4 w-4 ${isDark ? 'text-slate-400' : 'text-[#ff6b6b]'}`} />
+            <input
+              type="text"
+              placeholder="搜索技能名称 / 描述..."
+              value={searchTerm}
+              onChange={(event) => setSearchTerm(event.target.value)}
+              className={`min-w-0 flex-1 bg-transparent text-sm outline-none ${
+                isDark
+                  ? 'text-slate-100 placeholder:text-slate-500'
+                  : 'text-gray-800 placeholder:text-[#9ca3af]'
+              }`}
+            />
+          </div>
+        </section>
+
+        <section>
+          {loading ? (
+            <div
+              className={`flex items-center justify-center rounded-[28px] border py-20 text-sm ${
+                isDark
+                  ? 'border-slate-800 bg-slate-900/60 text-slate-300'
+                  : 'border-[#f5d4d4] bg-white text-[#667085]'
+              }`}
+            >
+              正在加载技能...
+            </div>
+          ) : error ? (
+            <div
+              className={`flex flex-col items-center justify-center rounded-[28px] border px-4 py-20 text-center ${
+                isDark ? 'border-slate-800 bg-slate-900/60' : 'border-[#f5d4d4] bg-white'
+              }`}
+            >
+              <h3
+                className={`mb-2 text-lg font-semibold ${
+                  isDark ? 'text-slate-100' : 'text-gray-900'
+                }`}
+              >
+                加载失败
+              </h3>
+              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-[#667085]'}`}>{error}</p>
+            </div>
+          ) : filtered.length === 0 ? (
+            <div
+              className={`flex flex-col items-center justify-center rounded-[28px] border px-4 py-20 text-center ${
+                isDark ? 'border-slate-800 bg-slate-900/60' : 'border-[#f5d4d4] bg-white'
+              }`}
+            >
+              <div
+                className={`mb-4 flex h-12 w-12 items-center justify-center rounded-2xl ${
+                  isDark ? 'bg-slate-800 text-slate-400' : 'bg-[#fff1f1] text-[#ff6b6b]'
+                }`}
+              >
+                <Sparkles className="h-6 w-6" />
+              </div>
+              <h3
+                className={`mb-2 text-lg font-semibold ${
+                  isDark ? 'text-slate-100' : 'text-gray-900'
+                }`}
+              >
+                暂无技能
+              </h3>
+              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-[#667085]'}`}>
+                点击右上角「新建技能」上传你的第一个技能。
+              </p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+              {filtered.map((skill) => {
+                const isPy = skill.kind === 'py';
+                const Icon = isPy ? FileCode2 : FileText;
+                return (
+                  <article
+                    key={skill.folder}
+                    className={`group relative overflow-hidden rounded-[22px] border px-5 py-5 transition-all duration-200 ${
+                      isDark
+                        ? 'border-slate-800 bg-slate-900/65 hover:border-slate-700 hover:shadow-xl hover:shadow-black/20'
+                        : 'border-[#f5d4d4] bg-white hover:border-[#ffbdbd] hover:shadow-[0_16px_40px_-26px_rgba(239,68,68,0.35)]'
+                    }`}
+                  >
+                    <div
+                      className={`pointer-events-none absolute inset-x-0 top-0 h-1 ${
+                        isDark
+                          ? 'bg-gradient-to-r from-slate-700 via-slate-500 to-slate-700'
+                          : 'bg-gradient-to-r from-[#ffd4d4] via-[#ff8c8c] to-[#ffd4d4]'
+                      }`}
+                    />
+
+                    <div
+                      className="absolute right-4 top-4 z-20"
+                      ref={openCardMenuId === skill.folder ? cardMenuRef : null}
+                    >
+                      <button
+                        type="button"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          setOpenCardMenuId((prev) =>
+                            prev === skill.folder ? null : skill.folder,
+                          );
+                        }}
+                        className={`flex h-8 w-8 items-center justify-center rounded-lg transition ${
+                          isDark
+                            ? 'text-slate-400 hover:bg-slate-800 hover:text-slate-100'
+                            : 'text-gray-400 hover:bg-gray-100 hover:text-gray-700'
+                        }`}
+                      >
+                        <MoreVertical className="h-4 w-4" />
+                      </button>
+
+                      {openCardMenuId === skill.folder && (
+                        <div
+                          className={`absolute right-0 top-[calc(100%+6px)] z-30 w-36 rounded-2xl border py-1 shadow-xl ${
+                            isDark ? 'border-slate-700 bg-slate-900' : 'border-[#f0d6d6] bg-white'
+                          }`}
+                        >
+                          <button
+                            type="button"
+                            onClick={(event) => {
+                              event.stopPropagation();
+                              setOpenCardMenuId(null);
+                              setEditing(skill);
+                            }}
+                            className={`flex w-full items-center gap-2 px-3 py-2 text-sm transition ${
+                              isDark
+                                ? 'text-slate-300 hover:bg-slate-800'
+                                : 'text-gray-700 hover:bg-[#fff6f6]'
+                            }`}
+                          >
+                            <Pencil className="h-4 w-4 shrink-0" />
+                            编辑
+                          </button>
+                          <button
+                            type="button"
+                            onClick={(event) => {
+                              event.stopPropagation();
+                              void handleDelete(skill);
+                            }}
+                            className={`flex w-full items-center gap-2 px-3 py-2 text-sm transition ${
+                              isDark
+                                ? 'text-rose-400 hover:bg-slate-800'
+                                : 'text-rose-500 hover:bg-[#fff6f6]'
+                            }`}
+                          >
+                            <Trash2 className="h-4 w-4 shrink-0" />
+                            删除
+                          </button>
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="flex items-start gap-3 pr-8">
+                      <div
+                        className={`relative flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br shadow-[0_18px_32px_-22px_rgba(15,23,42,0.35)] ring-1 ${
+                          isPy
+                            ? 'from-indigo-100 via-blue-50 to-white text-indigo-500 shadow-indigo-100/80 ring-indigo-100'
+                            : 'from-rose-100 via-red-50 to-white text-red-500 shadow-red-100/80 ring-red-100'
+                        }`}
+                      >
+                        <Icon className="relative z-10 h-5 w-5" />
+                      </div>
+
+                      <div className="min-w-0 flex-1">
+                        <h3
+                          className={`truncate text-[17px] font-semibold ${
+                            isDark ? 'text-slate-100' : 'text-[#111827]'
+                          }`}
+                          title={skill.name}
+                        >
+                          {skill.name}
+                        </h3>
+                        <p
+                          className={`mt-1 line-clamp-3 min-h-[3.6em] text-sm ${
+                            isDark ? 'text-slate-400' : 'text-[#667085]'
+                          }`}
+                        >
+                          {skill.description || '暂无描述'}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div
+                      className={`mt-4 flex items-center justify-between text-xs ${
+                        isDark ? 'text-slate-500' : 'text-[#98a2b3]'
+                      }`}
+                    >
+                      <span
+                        className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 font-medium ${
+                          isPy
+                            ? 'bg-indigo-50 text-indigo-600'
+                            : 'bg-[#fff2f2] text-[#ef4444]'
+                        }`}
+                      >
+                        {isPy ? 'Python' : 'Markdown'}
+                      </span>
+                      <span>{new Date(skill.updated_at * 1000).toLocaleString()}</span>
+                    </div>
+                  </article>
+                );
+              })}
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Create modal
+// ---------------------------------------------------------------------------
+
+interface CreateModalProps {
+  isDark: boolean;
+  onClose: () => void;
+  onCreated: () => void;
+}
+
+function CreateSkillModal({ isDark, onClose, onCreated }: CreateModalProps) {
+  const [file, setFile] = useState<File | null>(null);
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [errMsg, setErrMsg] = useState('');
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleFileChange = (next: File | null) => {
+    setFile(next);
+    if (next && !name.trim()) {
+      const stem = next.name.replace(/\.[^.]+$/, '');
+      setName(stem);
+    }
+  };
+
+  const submit = async () => {
+    if (!file) {
+      setErrMsg('请上传 .md 或 .py 文件');
+      return;
+    }
+    setErrMsg('');
+    setSubmitting(true);
+    try {
+      const fd = new FormData();
+      fd.append('file', file);
+      if (name.trim()) fd.append('name', name.trim());
+      if (description.trim()) fd.append('description', description.trim());
+      const res = await fetch(API_BASE, { method: 'POST', body: fd });
+      if (!res.ok) {
+        const text = await res.text();
+        throw new Error(text || `${res.status} ${res.statusText}`);
+      }
+      onCreated();
+    } catch (err) {
+      console.error('新建技能失败', err);
+      setErrMsg(err instanceof Error ? err.message : '新建技能失败');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) onClose();
+      }}
+    >
+      <div
+        className={`relative w-[480px] overflow-hidden rounded-[28px] border shadow-2xl ${
+          isDark
+            ? 'border-slate-700 bg-slate-900 text-slate-100'
+            : 'border-[#f3d6d6] bg-white text-gray-900'
+        }`}
+      >
+        <div
+          className={`h-1 w-full ${
+            isDark
+              ? 'bg-gradient-to-r from-slate-700 via-slate-500 to-slate-700'
+              : 'bg-gradient-to-r from-[#ffd4d4] via-[#ff8c8c] to-[#ffd4d4]'
+          }`}
+        />
+
+        <div className="flex items-center justify-between px-6 pb-3 pt-5">
+          <h2 className="text-base font-semibold">新建技能</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className={`flex h-9 w-9 items-center justify-center rounded-xl transition ${
+              isDark
+                ? 'text-slate-400 hover:bg-slate-700 hover:text-slate-100'
+                : 'text-gray-400 hover:bg-[#fff3f3] hover:text-[#ef4444]'
+            }`}
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="space-y-4 px-6 pb-2 pt-2">
+          <div>
+            <label
+              className={`mb-1 block text-xs font-medium ${
+                isDark ? 'text-slate-400' : 'text-[#667085]'
+              }`}
+            >
+              技能文件（.md 或 .py）
+            </label>
+            <input
+              ref={inputRef}
+              type="file"
+              accept=".md,.py"
+              className="hidden"
+              onChange={(event) => handleFileChange(event.target.files?.[0] ?? null)}
+            />
+            <button
+              type="button"
+              onClick={() => inputRef.current?.click()}
+              className={`flex w-full items-center gap-3 rounded-2xl border px-4 py-3 text-left transition ${
+                isDark
+                  ? 'border-slate-700 bg-slate-950/40 hover:bg-slate-800'
+                  : 'border-[#f5d4d4] bg-[#fffafa] hover:border-[#ffbdbd] hover:bg-[#fff5f5]'
+              }`}
+            >
+              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow ring-1 ring-white/20">
+                <Upload className="h-4 w-4" />
+              </div>
+              <div className="min-w-0 flex-1">
+                <p
+                  className={`truncate text-sm font-medium ${
+                    isDark ? 'text-slate-100' : 'text-gray-900'
+                  }`}
+                >
+                  {file ? file.name : '选择文件'}
+                </p>
+                <p className={`mt-0.5 text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                  支持 .md 提示词 或 .py 可执行脚本
+                </p>
+              </div>
+            </button>
+          </div>
+
+          <div>
+            <label
+              className={`mb-1 block text-xs font-medium ${
+                isDark ? 'text-slate-400' : 'text-[#667085]'
+              }`}
+            >
+              技能名称
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              placeholder="默认使用上传文件名"
+              className={`w-full rounded-2xl border px-4 py-2.5 text-sm outline-none transition ${
+                isDark
+                  ? 'border-slate-700 bg-slate-950/40 text-slate-100 placeholder:text-slate-500 focus:border-slate-500'
+                  : 'border-[#f5d4d4] bg-white text-gray-900 placeholder:text-gray-400 focus:border-[#ffbdbd]'
+              }`}
+            />
+          </div>
+
+          <div>
+            <label
+              className={`mb-1 block text-xs font-medium ${
+                isDark ? 'text-slate-400' : 'text-[#667085]'
+              }`}
+            >
+              描述（可选）
+            </label>
+            <textarea
+              rows={3}
+              value={description}
+              onChange={(event) => setDescription(event.target.value)}
+              placeholder="技能用途、输入输出说明等"
+              className={`w-full resize-none rounded-2xl border px-4 py-2.5 text-sm outline-none transition ${
+                isDark
+                  ? 'border-slate-700 bg-slate-950/40 text-slate-100 placeholder:text-slate-500 focus:border-slate-500'
+                  : 'border-[#f5d4d4] bg-white text-gray-900 placeholder:text-gray-400 focus:border-[#ffbdbd]'
+              }`}
+            />
+          </div>
+
+          {errMsg && (
+            <p className="text-xs text-rose-500">{errMsg}</p>
+          )}
+        </div>
+
+        <div className="flex items-center justify-end gap-3 px-6 pb-5 pt-4">
+          <button
+            type="button"
+            onClick={onClose}
+            className={`rounded-xl px-4 py-2 text-sm transition ${
+              isDark
+                ? 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
+                : 'text-[#667085] hover:bg-[#fff3f3] hover:text-[#ef4444]'
+            }`}
+          >
+            取消
+          </button>
+          <button
+            type="button"
+            disabled={submitting}
+            onClick={() => void submit()}
+            className={`rounded-xl bg-[#ea2d2d] px-4 py-2 text-sm font-medium text-white shadow transition hover:bg-[#d92626] ${
+              submitting ? 'cursor-not-allowed opacity-60' : ''
+            }`}
+          >
+            {submitting ? '提交中...' : '创建'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Edit modal
+// ---------------------------------------------------------------------------
+
+interface EditModalProps {
+  isDark: boolean;
+  skill: FileSkill;
+  onClose: () => void;
+  onSaved: () => void;
+}
+
+function EditSkillModal({ isDark, skill, onClose, onSaved }: EditModalProps) {
+  const [name, setName] = useState(skill.name);
+  const [description, setDescription] = useState(skill.description ?? '');
+  const [file, setFile] = useState<File | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [errMsg, setErrMsg] = useState('');
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const submit = async () => {
+    setErrMsg('');
+    setSubmitting(true);
+    try {
+      const fd = new FormData();
+      if (file) fd.append('file', file);
+      if (name.trim() !== skill.name) fd.append('name', name.trim());
+      if (description !== (skill.description ?? '')) fd.append('description', description);
+
+      const res = await fetch(`${API_BASE}/${encodeURIComponent(skill.folder)}`, {
+        method: 'PUT',
+        body: fd,
+      });
+      if (!res.ok) {
+        const text = await res.text();
+        throw new Error(text || `${res.status} ${res.statusText}`);
+      }
+      onSaved();
+    } catch (err) {
+      console.error('保存技能失败', err);
+      setErrMsg(err instanceof Error ? err.message : '保存技能失败');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) onClose();
+      }}
+    >
+      <div
+        className={`relative w-[480px] overflow-hidden rounded-[28px] border shadow-2xl ${
+          isDark
+            ? 'border-slate-700 bg-slate-900 text-slate-100'
+            : 'border-[#f3d6d6] bg-white text-gray-900'
+        }`}
+      >
+        <div
+          className={`h-1 w-full ${
+            isDark
+              ? 'bg-gradient-to-r from-slate-700 via-slate-500 to-slate-700'
+              : 'bg-gradient-to-r from-[#ffd4d4] via-[#ff8c8c] to-[#ffd4d4]'
+          }`}
+        />
+
+        <div className="flex items-center justify-between px-6 pb-3 pt-5">
+          <h2 className="text-base font-semibold">编辑技能</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className={`flex h-9 w-9 items-center justify-center rounded-xl transition ${
+              isDark
+                ? 'text-slate-400 hover:bg-slate-700 hover:text-slate-100'
+                : 'text-gray-400 hover:bg-[#fff3f3] hover:text-[#ef4444]'
+            }`}
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="space-y-4 px-6 pb-2 pt-2">
+          <div>
+            <label
+              className={`mb-1 block text-xs font-medium ${
+                isDark ? 'text-slate-400' : 'text-[#667085]'
+              }`}
+            >
+              技能名称
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              className={`w-full rounded-2xl border px-4 py-2.5 text-sm outline-none transition ${
+                isDark
+                  ? 'border-slate-700 bg-slate-950/40 text-slate-100 placeholder:text-slate-500 focus:border-slate-500'
+                  : 'border-[#f5d4d4] bg-white text-gray-900 placeholder:text-gray-400 focus:border-[#ffbdbd]'
+              }`}
+            />
+          </div>
+
+          <div>
+            <label
+              className={`mb-1 block text-xs font-medium ${
+                isDark ? 'text-slate-400' : 'text-[#667085]'
+              }`}
+            >
+              描述
+            </label>
+            <textarea
+              rows={3}
+              value={description}
+              onChange={(event) => setDescription(event.target.value)}
+              className={`w-full resize-none rounded-2xl border px-4 py-2.5 text-sm outline-none transition ${
+                isDark
+                  ? 'border-slate-700 bg-slate-950/40 text-slate-100 placeholder:text-slate-500 focus:border-slate-500'
+                  : 'border-[#f5d4d4] bg-white text-gray-900 placeholder:text-gray-400 focus:border-[#ffbdbd]'
+              }`}
+            />
+          </div>
+
+          <div>
+            <label
+              className={`mb-1 block text-xs font-medium ${
+                isDark ? 'text-slate-400' : 'text-[#667085]'
+              }`}
+            >
+              覆盖文件（可选，选择后将替换原有内容）
+            </label>
+            <input
+              ref={inputRef}
+              type="file"
+              accept=".md,.py"
+              className="hidden"
+              onChange={(event) => setFile(event.target.files?.[0] ?? null)}
+            />
+            <button
+              type="button"
+              onClick={() => inputRef.current?.click()}
+              className={`flex w-full items-center gap-3 rounded-2xl border px-4 py-3 text-left transition ${
+                isDark
+                  ? 'border-slate-700 bg-slate-950/40 hover:bg-slate-800'
+                  : 'border-[#f5d4d4] bg-[#fffafa] hover:border-[#ffbdbd] hover:bg-[#fff5f5]'
+              }`}
+            >
+              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow ring-1 ring-white/20">
+                <Upload className="h-4 w-4" />
+              </div>
+              <div className="min-w-0 flex-1">
+                <p
+                  className={`truncate text-sm font-medium ${
+                    isDark ? 'text-slate-100' : 'text-gray-900'
+                  }`}
+                >
+                  {file ? file.name : `当前文件：${skill.filename}`}
+                </p>
+                <p className={`mt-0.5 text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                  仅支持 .md 或 .py
+                </p>
+              </div>
+            </button>
+          </div>
+
+          {errMsg && <p className="text-xs text-rose-500">{errMsg}</p>}
+        </div>
+
+        <div className="flex items-center justify-end gap-3 px-6 pb-5 pt-4">
+          <button
+            type="button"
+            onClick={onClose}
+            className={`rounded-xl px-4 py-2 text-sm transition ${
+              isDark
+                ? 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
+                : 'text-[#667085] hover:bg-[#fff3f3] hover:text-[#ef4444]'
+            }`}
+          >
+            取消
+          </button>
+          <button
+            type="button"
+            disabled={submitting}
+            onClick={() => void submit()}
+            className={`rounded-xl bg-[#ea2d2d] px-4 py-2 text-sm font-medium text-white shadow transition hover:bg-[#d92626] ${
+              submitting ? 'cursor-not-allowed opacity-60' : ''
+            }`}
+          >
+            {submitting ? '保存中...' : '保存'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web-code/components/agent/SkillCreatorConversationItem.tsx b/web-code/components/agent/SkillCreatorConversationItem.tsx
new file mode 100644
index 00000000..c8fb7554
--- /dev/null
+++ b/web-code/components/agent/SkillCreatorConversationItem.tsx
@@ -0,0 +1,246 @@
+import { useEffect, useState } from 'react';
+import { Bot, CheckCircle2, ChevronDown, Info, Sparkles, UserRound, Wrench } from 'lucide-react';
+import MarkdownRenderer from '../MarkdownRenderer';
+import { useTheme } from '../../contexts/ThemeContext';
+
+interface ConversationStep {
+  text: string;
+  subText?: string;
+  status: 'done' | 'processing';
+}
+
+interface ToolCall {
+  id: string;
+  name: string;
+  input?: Record<string, unknown>;
+  output?: string;
+}
+
+interface ConversationMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  steps?: ConversationStep[];
+  thinkings?: Array<{ duration: number; content: string }>;
+  toolCalls?: ToolCall[];
+}
+
+interface SkillCreatorConversationItemProps {
+  message: ConversationMessage;
+  isConnecting?: boolean;
+}
+
+function MessageAvatar({ role, active = false }: { role: 'user' | 'assistant'; active?: boolean }) {
+  const { theme } = useTheme();
+  const isDarkMode = theme === 'dark';
+  const Icon = role === 'assistant' ? Bot : UserRound;
+
+  return (
+    <div
+      className={`relative w-9 h-9 rounded-2xl flex items-center justify-center flex-shrink-0 shadow-sm ${
+        role === 'assistant'
+          ? isDarkMode
+            ? 'bg-gradient-to-br from-slate-700 to-slate-900 text-sky-200 ring-1 ring-slate-600'
+            : 'bg-gradient-to-br from-red-50 to-rose-100 text-red-500 ring-1 ring-red-100'
+          : isDarkMode
+            ? 'bg-gradient-to-br from-blue-500 to-indigo-600 text-white'
+            : 'bg-gradient-to-br from-red-500 to-rose-500 text-white'
+      }`}
+    >
+      <Icon className="w-4 h-4" />
+      {role === 'assistant' && active && (
+        <Sparkles className={`absolute -right-0.5 -top-0.5 w-3.5 h-3.5 ${isDarkMode ? 'text-sky-200' : 'text-amber-400'}`} />
+      )}
+    </div>
+  );
+}
+
+function StepsSummary({ steps }: { steps: ConversationStep[] }) {
+  const { theme } = useTheme();
+  const isDarkMode = theme === 'dark';
+  const [open, setOpen] = useState(true);
+  const doneCount = steps.filter((step) => step.status === 'done').length;
+
+  return (
+    <div
+      className={`mb-3 overflow-hidden rounded-2xl border shadow-sm ${
+        isDarkMode ? 'border-slate-700 bg-slate-900/60 text-slate-300' : 'border-red-100 bg-white text-gray-600'
+      }`}
+    >
+      <button
+        type="button"
+        onClick={() => setOpen((prev) => !prev)}
+        className={`w-full h-10 px-3.5 flex items-center gap-2 text-xs transition ${
+          isDarkMode ? 'bg-slate-800/70 hover:bg-slate-800' : 'bg-red-50/60 hover:bg-red-50'
+        }`}
+      >
+        <CheckCircle2 className={`w-3.5 h-3.5 ${isDarkMode ? 'text-emerald-400' : 'text-red-500'}`} />
+        <span className="font-medium">执行步骤</span>
+        <span className={isDarkMode ? 'text-slate-500' : 'text-gray-400'}>已完成 {doneCount} / {steps.length}</span>
+        <ChevronDown className={`w-3.5 h-3.5 ml-auto transition-transform ${open ? '' : '-rotate-90'}`} />
+      </button>
+      <div className={`overflow-hidden transition-all duration-300 ease-in-out ${open ? 'max-h-[640px] opacity-100' : 'max-h-0 opacity-0'}`}>
+        <div className={`border-t px-4 py-3 space-y-3 ${isDarkMode ? 'border-slate-700' : 'border-red-50'}`}>
+          {steps.map((step, index) => {
+            const done = step.status === 'done';
+
+            return (
+              <div key={`${step.text}-${index}`} className="flex gap-3">
+                <div className="pt-0.5">
+                  {done ? (
+                    <CheckCircle2 className={`w-4 h-4 ${isDarkMode ? 'text-emerald-400' : 'text-red-500'}`} />
+                  ) : (
+                    <span className={`block w-4 h-4 rounded-full border-2 ${isDarkMode ? 'border-sky-300 border-t-transparent' : 'border-red-400 border-t-transparent'} animate-spin`} />
+                  )}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className={`text-xs font-medium ${isDarkMode ? 'text-slate-200' : 'text-gray-800'}`}>
+                    第 {index + 1} 步：{step.text}
+                  </div>
+                  {step.subText && (
+                    <div className={`mt-1 rounded-xl px-3 py-2 text-xs leading-5 ${isDarkMode ? 'bg-slate-950/50 text-slate-400' : 'bg-gray-50 text-gray-600'}`}>
+                      {step.subText}
+                    </div>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ThinkingPanel({ duration, content }: { duration: number; content: string }) {
+  const { theme } = useTheme();
+  const isDarkMode = theme === 'dark';
+  const [open, setOpen] = useState(true);
+
+  useEffect(() => {
+    if (duration > 0) setOpen(false);
+  }, [duration]);
+
+  return (
+    <div className={`mb-3 rounded-2xl border overflow-hidden shadow-sm ${isDarkMode ? 'border-slate-700 bg-slate-900/60' : 'border-red-100 bg-white'}`}>
+      <button
+        type="button"
+        onClick={() => setOpen((prev) => !prev)}
+        className={`w-full h-10 px-3.5 flex items-center gap-2 text-xs transition ${
+          isDarkMode ? 'text-slate-300 bg-slate-800/70 hover:bg-slate-800' : 'text-gray-600 bg-red-50/60 hover:bg-red-50'
+        }`}
+      >
+        <Info className={`w-3.5 h-3.5 ${isDarkMode ? 'text-sky-300' : 'text-red-500'}`} />
+        <span className="font-medium">思考过程</span>
+        <ChevronDown className={`w-3.5 h-3.5 ml-auto transition-transform ${open ? '' : '-rotate-90'}`} />
+      </button>
+      <div className={`overflow-hidden transition-all duration-300 ease-in-out ${open ? 'opacity-100' : 'max-h-0 opacity-0'}`}>
+        <div className={`px-4 py-3 text-xs leading-6 whitespace-pre-wrap border-t ${isDarkMode ? 'border-slate-700 text-slate-300' : 'border-red-50 text-gray-600'}`}>
+          {content}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ToolCallPanel({ toolCall }: { toolCall: ToolCall }) {
+  const { theme } = useTheme();
+  const isDarkMode = theme === 'dark';
+  const [open, setOpen] = useState(false);
+
+  const details = {
+    input: toolCall.input && Object.keys(toolCall.input).length > 0 ? JSON.stringify(toolCall.input, null, 2) : '',
+    output: toolCall.output ?? '',
+  };
+  const hasDetails = Boolean(details.input || details.output);
+
+  return (
+    <div className={`mb-3 rounded-2xl border overflow-hidden shadow-sm ${isDarkMode ? 'border-slate-700 bg-slate-900/60' : 'border-red-100 bg-white'}`}>
+      <button
+        type="button"
+        onClick={() => setOpen((prev) => !prev)}
+        className={`w-full h-10 px-3.5 flex items-center gap-2 text-xs transition ${
+          isDarkMode ? 'text-slate-300 bg-slate-800/70 hover:bg-slate-800' : 'text-gray-600 bg-red-50/60 hover:bg-red-50'
+        }`}
+      >
+        <Wrench className={`w-3.5 h-3.5 ${isDarkMode ? 'text-amber-300' : 'text-red-500'}`} />
+        <span className="font-medium">{toolCall.name}</span>
+        {hasDetails && <ChevronDown className={`w-3.5 h-3.5 ml-auto transition-transform ${open ? '' : '-rotate-90'}`} />}
+      </button>
+      {hasDetails && (
+        <div className={`overflow-hidden transition-all duration-300 ease-in-out ${open ? 'max-h-[520px] opacity-100' : 'max-h-0 opacity-0'}`}>
+          <div className={`border-t px-4 py-3 space-y-3 ${isDarkMode ? 'border-slate-700' : 'border-red-50'}`}>
+            {details.input && (
+              <div>
+                <p className={`text-[11px] mb-1 ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>请求参数</p>
+                <pre className={`rounded-xl px-3 py-2 text-[11px] leading-5 overflow-x-auto ${isDarkMode ? 'bg-slate-950/60 text-slate-300' : 'bg-gray-50 text-gray-700'}`}>{details.input}</pre>
+              </div>
+            )}
+            {details.output && (
+              <div>
+                <p className={`text-[11px] mb-1 ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>返回结果</p>
+                <pre className={`rounded-xl px-3 py-2 text-[11px] leading-5 overflow-x-auto ${isDarkMode ? 'bg-slate-950/60 text-slate-300' : 'bg-gray-50 text-gray-700'}`}>{details.output}</pre>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function SkillCreatorConversationItem({ message, isConnecting = false }: SkillCreatorConversationItemProps) {
+  const { theme } = useTheme();
+  const isDarkMode = theme === 'dark';
+
+  if (message.role === 'user') {
+    return (
+      <div className="flex justify-end gap-3">
+        <div className={`max-w-[72%] rounded-2xl rounded-tr-md px-4 py-3 text-sm leading-relaxed shadow-sm ${
+          isDarkMode ? 'bg-blue-600/80 text-white shadow-blue-950/20' : 'bg-gradient-to-r from-red-500 to-rose-500 text-white shadow-red-200/70'
+        }`}>
+          {message.content}
+        </div>
+        <MessageAvatar role="user" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex gap-3">
+      <MessageAvatar role="assistant" active={!message.content} />
+      <div
+        className={`max-w-[86%] flex-1 rounded-3xl border px-4 py-3.5 text-sm shadow-sm ${
+          isDarkMode ? 'border-slate-700 bg-slate-800/45 text-slate-200 shadow-black/10' : 'border-red-100 bg-white text-[#2a2f3f] shadow-red-100/60'
+        }`}
+      >
+        {message.steps && message.steps.length > 0 && <StepsSummary steps={message.steps} />}
+        {message.thinkings?.map((thinking, index) => (
+          <ThinkingPanel key={`${message.id}-thinking-${index}`} duration={thinking.duration} content={thinking.content} />
+        ))}
+        {message.toolCalls?.map((toolCall) => (
+          <ToolCallPanel key={toolCall.id} toolCall={toolCall} />
+        ))}
+        {isConnecting && (
+          <div className={`flex items-center gap-2 text-sm ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>
+            <span className="skill-creator-dot" />
+            <span className="skill-creator-dot" />
+            <span className="skill-creator-dot" />
+            <span
+              data-text="正在连接技能服务..."
+              className={`ml-1 skill-creator-shimmer-text ${isDarkMode ? 'skill-creator-shimmer-dark' : 'skill-creator-shimmer-light'}`}
+            >
+              正在连接技能服务...
+            </span>
+          </div>
+        )}
+        {message.content && (
+          <MarkdownRenderer
+            content={message.content}
+            className={isDarkMode ? '[&_p]:text-slate-200 [&_li]:text-slate-200' : '[&_p]:text-[#2a2f3f] [&_li]:text-[#2a2f3f]'}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/web-code/components/agent/SkillCreatorPage.tsx b/web-code/components/agent/SkillCreatorPage.tsx
new file mode 100644
index 00000000..26379e4f
--- /dev/null
+++ b/web-code/components/agent/SkillCreatorPage.tsx
@@ -0,0 +1,1085 @@
+import { useEffect, useRef, useState } from 'react';
+import { AlertCircle, ChevronDown, ChevronRight, FileText, FolderOpen, Loader2, MessageSquareText, PackagePlus, Save, Wrench, X, Zap } from 'lucide-react';
+import { useSearchParams } from 'react-router-dom';
+import { useTheme } from '../../contexts/ThemeContext';
+import { useExpertAuthBootstrap } from '../../hooks';
+import MarkdownRenderer from '../MarkdownRenderer';
+import AgentConversationList, { type ConversationMessage, type ConversationStep } from './AgentConversationList';
+import ChatInputComposer from './ChatInputComposer';
+import SkillCreatorThreadSidebar from './SkillCreatorThreadSidebar';
+import { useNavigate } from 'react-router-dom';
+import { knowledgetoolUrl } from '@/hooks/useExpertAuthBootstrap';
+
+const MOCK_CONVERSATION_MESSAGES: ConversationMessage[] = [];
+const MIN_CHAT_WIDTH = 360;
+const MIN_FILE_SIDEBAR_WIDTH = 420;
+const DEFAULT_FILE_SIDEBAR_WIDTH = 560;
+const THREAD_STORAGE_KEY = 'skill_creator_thread_id';
+
+interface FileNode {
+  name: string;
+  path: string;
+  type: 'file' | 'directory';
+  size: number | null;
+  extension: string | null;
+  children: FileNode[] | null;
+}
+
+interface HistoryMessageApiItem {
+  created_at: string;
+  id: number;
+  role: 'user' | 'assistant';
+  content: unknown;
+  thread_id: number;
+}
+
+const formatFileSize = (size: number | null) => {
+  if (!size) return '';
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+  return `${(size / 1024 / 1024).toFixed(1)} MB`;
+};
+
+const getFileLanguage = (extension: string | null) => {
+  const normalized = extension?.replace('.', '').toLowerCase();
+  if (!normalized) return 'TEXT';
+  return normalized.toUpperCase();
+};
+
+const isRecord = (value: unknown): value is Record<string, unknown> => typeof value === 'object' && value !== null;
+
+const normalizeHistoryContent = (content: unknown) => {
+  const steps: ConversationStep[] = [];
+  const thinkings: Array<{ duration: number; content: string }> = [];
+  const texts: string[] = [];
+
+  const visit = (value: unknown) => {
+    if (typeof value === 'string') {
+      if (value.trim()) texts.push(value);
+      return;
+    }
+
+    if (Array.isArray(value)) {
+      value.forEach(visit);
+      return;
+    }
+
+    if (!isRecord(value)) return;
+
+    const type = typeof value.type === 'string' ? value.type : '';
+    const text = typeof value.text === 'string' ? value.text : '';
+
+    if (type === 'thinking-steps' && Array.isArray(value.steps)) {
+      value.steps.forEach((stepItem) => {
+        if (!isRecord(stepItem)) return;
+        const title = typeof stepItem.title === 'string' ? stepItem.title : '处理中';
+        const status = stepItem.status === 'completed' ? 'done' : 'processing';
+        const items = Array.isArray(stepItem.items) ? stepItem.items.filter((item): item is string => typeof item === 'string') : [];
+        steps.push({
+          text: title,
+          subText: items[0]?.replace('正在处理: ', ''),
+          status,
+        });
+      });
+      return;
+    }
+
+    if (type === 'reasoning' && text) {
+      const duration = typeof value.duration === 'number' ? value.duration / 1000 : 0;
+      thinkings.push({ duration, content: text });
+      return;
+    }
+
+    if (text) {
+      texts.push(text);
+      return;
+    }
+
+    if ('content' in value) {
+      visit(value.content);
+    }
+  };
+
+  visit(content);
+
+  return {
+    content: texts.join('\n\n').trim(),
+    steps,
+    thinkings,
+  };
+};
+
+const toConversationMessage = (message: HistoryMessageApiItem): ConversationMessage => {
+  const normalized = normalizeHistoryContent(message.content);
+
+  return {
+    id: String(message.id),
+    role: message.role,
+    content: normalized.content,
+    steps: normalized.steps,
+    thinkings: normalized.thinkings,
+    toolCalls: [],
+  };
+};
+
+interface FileTreeItemProps {
+  node: FileNode;
+  depth?: number;
+  isDarkMode: boolean;
+  expandedPaths: Set<string>;
+  selectedPath: string | null;
+  onToggle: (path: string) => void;
+  onSelect: (node: FileNode) => void;
+}
+
+function FileTreeItem({
+  node,
+  depth = 0,
+  isDarkMode,
+  expandedPaths,
+  selectedPath,
+  onToggle,
+  onSelect,
+}: FileTreeItemProps) {
+  const isFolder = node.extension === null;
+  const isExpanded = expandedPaths.has(node.path);
+  const isSelected = selectedPath === node.path;
+  const hasChildren = Boolean(node.children?.length);
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => (isFolder ? onToggle(node.path) : onSelect(node))}
+        className={`group flex w-full items-center gap-2 rounded-xl px-2.5 py-2 text-left text-sm transition-all duration-200 ${
+          isSelected
+            ? isDarkMode
+              ? 'bg-blue-500/20 text-blue-200 ring-1 ring-blue-400/40 shadow-sm'
+              : 'bg-blue-50 text-blue-700 ring-1 ring-blue-200 shadow-sm'
+            : isDarkMode
+              ? 'text-slate-300 hover:bg-slate-800 hover:text-slate-100'
+              : 'text-gray-700 hover:bg-gray-100 hover:text-gray-950'
+        }`}
+        style={{ paddingLeft: `${10 + depth * 18}px` }}
+        title={node.path}
+      >
+        <span className="flex w-4 shrink-0 justify-center">
+          {isFolder && hasChildren ? (
+            isExpanded ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />
+          ) : null}
+        </span>
+        <span
+          className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-lg ${
+            isFolder
+              ? isDarkMode ? 'bg-amber-500/15 text-amber-300' : 'bg-amber-100 text-amber-600'
+              : isDarkMode ? 'bg-slate-700 text-slate-300' : 'bg-white text-gray-500 shadow-sm ring-1 ring-gray-200'
+          }`}
+        >
+          {isFolder ? <FolderOpen className="h-4 w-4" /> : <FileText className="h-4 w-4" />}
+        </span>
+        <span className="min-w-0 flex-1 truncate font-medium">{node.name}</span>
+        {!isFolder && node.size !== null && (
+          <span className={`shrink-0 text-[11px] ${isDarkMode ? 'text-slate-500' : 'text-gray-400'}`}>{formatFileSize(node.size)}</span>
+        )}
+      </button>
+      {isFolder && isExpanded && hasChildren && (
+        <div className="mt-1 space-y-1">
+          {node.children!.map((child) => (
+            <FileTreeItem
+              key={child.path}
+              node={child}
+              depth={depth + 1}
+              isDarkMode={isDarkMode}
+              expandedPaths={expandedPaths}
+              selectedPath={selectedPath}
+              onToggle={onToggle}
+              onSelect={onSelect}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function SkillCreatorPage() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { theme } = useTheme();
+  const { authedFetch } = useExpertAuthBootstrap();
+  const isDarkMode = theme === 'dark';
+  const queryThreadId = searchParams.get('id');
+  const [currentThreadId, setCurrentThreadId] = useState(() => queryThreadId || localStorage.getItem(THREAD_STORAGE_KEY) || '');
+  const [messages, setMessages] = useState<ConversationMessage[]>(MOCK_CONVERSATION_MESSAGES);
+  const [inputValue, setInputValue] = useState('');
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [isThreadSidebarOpen, setIsThreadSidebarOpen] = useState(false);
+  const [fileList, setFileList] = useState<FileNode[]>([]);
+  const [fileListThreadId, setFileListThreadId] = useState<number | null>(null);
+  const [isFileSidebarOpen, setIsFileSidebarOpen] = useState(false);
+  const [fileSidebarWidth, setFileSidebarWidth] = useState(DEFAULT_FILE_SIDEBAR_WIDTH);
+  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => new Set());
+  const [selectedFile, setSelectedFile] = useState<FileNode | null>(null);
+  const [filePreviewContent, setFilePreviewContent] = useState('');
+  const [isFilePreviewLoading, setIsFilePreviewLoading] = useState(false);
+  const [filePreviewError, setFilePreviewError] = useState('');
+  const [isSaveModalOpen, setIsSaveModalOpen] = useState(false);
+  const [skillName, setSkillName] = useState('');
+  const [skillDesc, setSkillDesc] = useState('');
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
+  const thinkingStartRef = useRef<number>(0);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const navigate = useNavigate();
+  useEffect(() => {
+    const nextThreadId = queryThreadId || localStorage.getItem(THREAD_STORAGE_KEY) || '';
+    setCurrentThreadId((prev) => (prev === nextThreadId ? prev : nextThreadId));
+  }, [queryThreadId]);
+
+  useEffect(() => {
+    if (!scrollContainerRef.current) return;
+    scrollContainerRef.current.scrollTo({
+      top: scrollContainerRef.current.scrollHeight,
+      behavior: 'smooth',
+    });
+  }, [messages]);
+
+  const syncThreadId = (nextThreadId: string) => {
+    setCurrentThreadId(nextThreadId);
+    setSearchParams((prev) => {
+      const nextParams = new URLSearchParams(prev);
+      if (nextThreadId) nextParams.set('id', nextThreadId);
+      else nextParams.delete('id');
+      return nextParams;
+    });
+
+    if (nextThreadId) {
+      localStorage.setItem(THREAD_STORAGE_KEY, nextThreadId);
+    } else {
+      localStorage.removeItem(THREAD_STORAGE_KEY);
+    }
+  };
+
+  const fetchThreadFiles = async (id: number) => {
+    if (!id) {
+      setFileList([]);
+      setFileListThreadId(null);
+      return;
+    }
+
+    try {
+      const filesRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/${id}/files/all`, {
+        method: 'GET',
+      });
+
+      if (!filesRes.ok) {
+        setFileList([]);
+        setFileListThreadId(null);
+        return;
+      }
+
+      const filesData: unknown = await filesRes.json();
+      setFileList(Array.isArray(filesData) ? (filesData as FileNode[]) : []);
+      setFileListThreadId(id);
+    } catch (error) {
+      console.error('获取技能文件列表失败', error);
+      setFileList([]);
+      setFileListThreadId(null);
+    }
+  };
+
+  const fetchThreadMessages = async (id: number) => {
+    setIsConnecting(true);
+    try {
+      const response = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/${id}/messages`, {
+        method: 'GET',
+      });
+
+      if (!response.ok) {
+        throw new Error(`获取会话消息失败: ${response.status}`);
+      }
+
+      const data = (await response.json()) as HistoryMessageApiItem[];
+      const nextMessages = Array.isArray(data) ? data.map(toConversationMessage) : [];
+      setMessages(nextMessages);
+    } catch (error) {
+      console.error('获取技能创建会话消息失败', error);
+      setMessages([]);
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
+  useEffect(() => {
+    const id = Number(currentThreadId);
+
+    setSelectedFile(null);
+    setFilePreviewContent('');
+    setFilePreviewError('');
+    setExpandedPaths(new Set());
+
+    if (!id) {
+      setMessages([]);
+      setFileList([]);
+      setFileListThreadId(null);
+      return;
+    }
+
+    void fetchThreadMessages(id);
+    void fetchThreadFiles(id);
+  }, [currentThreadId]);
+
+  const emptyChange = () => {
+    navigate('/skills-workshop')
+  }
+
+  useEffect(() => {
+    if (!fileList.length) return;
+    setExpandedPaths((prev) => {
+      if (prev.size > 0) return prev;
+      const firstLevelFolders = fileList.filter((node) => node.extension === null).map((node) => node.path);
+      return new Set(firstLevelFolders);
+    });
+  }, [fileList]);
+
+  const clearLoadingStates = () => {
+    setMessages((prev) =>
+      prev.map((msg) => {
+        if (msg.role === 'assistant') {
+          return {
+            ...msg,
+            steps: [],
+            thinkings: [],
+            toolCalls: [],
+          };
+        }
+        return msg;
+      }),
+    );
+  };
+
+  const handleToggleFolder = (path: string) => {
+    setExpandedPaths((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) next.delete(path);
+      else next.add(path);
+      return next;
+    });
+  };
+
+  const handleSelectFile = async (file: FileNode) => {
+    if (!fileListThreadId) {
+      setFilePreviewError('当前文件列表还没有关联到可预览的会话');
+      return;
+    }
+
+    setSelectedFile(file);
+    setFilePreviewContent('');
+    setFilePreviewError('');
+    setIsFilePreviewLoading(true);
+
+    try {
+      const previewRes = await authedFetch(
+        `${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/${fileListThreadId}/files/preview?path=${encodeURIComponent(file.path)}`,
+        { method: 'GET' },
+      );
+
+      if (!previewRes.ok) {
+        setFilePreviewError(`文件预览获取失败，状态码 ${previewRes.status}`);
+        return;
+      }
+
+      const contentType = previewRes.headers.get('content-type') ?? '';
+      if (contentType.includes('application/json')) {
+        const data: unknown = await previewRes.json();
+        if (typeof data === 'string') {
+          setFilePreviewContent(data);
+        } else if (data && typeof data === 'object' && 'content' in data) {
+          setFilePreviewContent(String((data as { content: unknown }).content ?? ''));
+        } else {
+          setFilePreviewContent(JSON.stringify(data, null, 2));
+        }
+      } else {
+        setFilePreviewContent(await previewRes.text());
+      }
+    } catch (error) {
+      console.error('获取技能文件预览失败', error);
+      setFilePreviewError('文件预览获取失败，请稍后重试');
+    } finally {
+      setIsFilePreviewLoading(false);
+    }
+  };
+
+  const handleResizeStart = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const startX = event.clientX;
+    const startWidth = fileSidebarWidth;
+
+    const handleMouseMove = (moveEvent: MouseEvent) => {
+      const containerWidth = window.innerWidth - 160;
+      const maxWidth = Math.max(MIN_FILE_SIDEBAR_WIDTH, containerWidth - MIN_CHAT_WIDTH);
+      const nextWidth = Math.min(Math.max(startWidth - (moveEvent.clientX - startX), MIN_FILE_SIDEBAR_WIDTH), maxWidth);
+      setFileSidebarWidth(nextWidth);
+    };
+
+    const handleMouseUp = () => {
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+  };
+
+  const handleSendMessage = async () => {
+    const userQuery = inputValue.trim();
+    if (!userQuery || !currentThreadId || isStreaming) return;
+
+    setInputValue('');
+    setIsStreaming(true);
+    setIsConnecting(true);
+    abortControllerRef.current = new AbortController();
+
+    const userMessage: ConversationMessage = {
+      id: `user-${Date.now()}`,
+      role: 'user',
+      content: userQuery,
+    };
+
+    const assistantId = `assistant-${Date.now()}`;
+    setMessages((prev) => [
+      ...prev,
+      userMessage,
+      { id: assistantId, role: 'assistant', content: '', steps: [], thinkings: [], toolCalls: [] },
+    ]);
+
+    try {
+      const streamRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/skills-agent`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          chat_id: Number(currentThreadId),
+          user_query: userQuery,
+        }),
+        signal: abortControllerRef.current.signal,
+      });
+
+      if (!streamRes.ok || !streamRes.body) {
+        console.error('技能对话流式接口失败', streamRes.status, streamRes.statusText);
+        return;
+      }
+
+      const reader = streamRes.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      const thinkingStepsAcc: Array<{ id: string; title: string; status: string; items: string[] }> = [];
+      const reasoningsAcc: Array<{ text: string; duration: number }> = [];
+      let assistantTextAcc = '';
+      let reasoningStartAt = 0;
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        setIsConnecting(false);
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() ?? '';
+
+        for (const line of lines) {
+          if (!line.startsWith('data: ')) continue;
+          const raw = line.slice(6).trim();
+          if (raw === '[DONE]') break;
+          if (!raw) continue;
+
+          let event: {
+            type: string;
+            data?: { id: string; title: string; status: string; items?: string[] };
+            id?: string;
+            delta?: string;
+            toolCallId?: string;
+            toolName?: string;
+            input?: Record<string, unknown>;
+            output?: { result?: string } | unknown;
+          } | null = null;
+
+          try {
+            event = JSON.parse(raw) as typeof event;
+          } catch {
+            continue;
+          }
+
+          if (!event) continue;
+
+          switch (event.type) {
+            case 'data-thinking-step': {
+              const step = event.data!;
+              const stepData = {
+                id: step.id,
+                title: step.title,
+                status: step.status,
+                items: step.items ?? [],
+              };
+              const existingIdx = thinkingStepsAcc.findIndex((s) => s.id === step.id);
+              if (existingIdx >= 0) thinkingStepsAcc[existingIdx] = stepData;
+              else thinkingStepsAcc.push(stepData);
+              break;
+            }
+            case 'reasoning-start': {
+              reasoningStartAt = Date.now();
+              reasoningsAcc.push({ text: '', duration: 0 });
+              break;
+            }
+            case 'reasoning-delta': {
+              if (reasoningsAcc.length === 0) {
+                reasoningsAcc.push({ text: event.delta ?? '', duration: 0 });
+              } else {
+                reasoningsAcc[reasoningsAcc.length - 1].text += event.delta ?? '';
+              }
+              break;
+            }
+            case 'reasoning-end': {
+              if (reasoningsAcc.length > 0) {
+                reasoningsAcc[reasoningsAcc.length - 1].duration = Date.now() - reasoningStartAt;
+              }
+              break;
+            }
+            case 'text-delta': {
+              assistantTextAcc += event.delta ?? '';
+              break;
+            }
+          }
+
+          setMessages((prev) =>
+            prev.map((msg) => {
+              if (msg.id !== assistantId) return msg;
+
+              switch (event!.type) {
+                case 'data-thinking-step': {
+                  const step = event!.data!;
+                  const newStep = {
+                    text: step.title,
+                    subText: step.items?.[0]?.replace('正在处理: ', '') ?? undefined,
+                    status: (step.status === 'completed' ? 'done' : 'processing') as 'done' | 'processing',
+                  };
+                  const steps = [...(msg.steps ?? [])];
+                  const stepIdx = steps.findIndex((item) => item.text === step.title);
+                  if (stepIdx >= 0) steps[stepIdx] = newStep;
+                  else steps.push(newStep);
+                  return { ...msg, steps };
+                }
+                case 'reasoning-start': {
+                  thinkingStartRef.current = Date.now();
+                  return { ...msg, thinkings: [...(msg.thinkings ?? []), { duration: 0, content: '' }] };
+                }
+                case 'reasoning-delta': {
+                  const thinkings = [...(msg.thinkings ?? [])];
+                  if (thinkings.length === 0) {
+                    thinkings.push({ duration: 0, content: event!.delta ?? '' });
+                  } else {
+                    const last = thinkings[thinkings.length - 1];
+                    thinkings[thinkings.length - 1] = { ...last, content: last.content + (event!.delta ?? '') };
+                  }
+                  return { ...msg, thinkings };
+                }
+                case 'reasoning-end': {
+                  const duration = (Date.now() - thinkingStartRef.current) / 1000;
+                  const thinkings = [...(msg.thinkings ?? [])];
+                  if (thinkings.length > 0) {
+                    thinkings[thinkings.length - 1] = { ...thinkings[thinkings.length - 1], duration };
+                  }
+                  return { ...msg, thinkings };
+                }
+                case 'tool-input-available': {
+                  const toolCalls = [...(msg.toolCalls ?? [])];
+                  const tcIdx = toolCalls.findIndex((toolCall) => toolCall.id === event!.toolCallId);
+                  const newToolCall = { id: event!.toolCallId!, name: event!.toolName!, input: event!.input };
+                  if (tcIdx >= 0) toolCalls[tcIdx] = { ...toolCalls[tcIdx], ...newToolCall };
+                  else toolCalls.push(newToolCall);
+                  return { ...msg, toolCalls };
+                }
+                case 'tool-output-available': {
+                  const toolCalls = [...(msg.toolCalls ?? [])];
+                  const tcIdx = toolCalls.findIndex((toolCall) => toolCall.id === event!.toolCallId);
+                  if (tcIdx >= 0) {
+                    const rawOutput = event!.output;
+                    const outputStr =
+                      typeof rawOutput === 'object' && rawOutput !== null && 'result' in rawOutput
+                        ? String((rawOutput as { result: unknown }).result)
+                        : JSON.stringify(rawOutput);
+                    toolCalls[tcIdx] = { ...toolCalls[tcIdx], output: outputStr };
+                  }
+                  return { ...msg, toolCalls };
+                }
+                case 'text-delta': {
+                  return { ...msg, content: msg.content + (event!.delta ?? '') };
+                }
+                default:
+                  return msg;
+              }
+            }),
+          );
+        }
+      }
+
+      const persistedContent: Array<Record<string, unknown>> = [];
+      if (thinkingStepsAcc.length > 0) {
+        persistedContent.push({ type: 'thinking-steps', steps: thinkingStepsAcc });
+      }
+      for (const reasoning of reasoningsAcc) {
+        if (reasoning.text) {
+          persistedContent.push({ type: 'reasoning', text: reasoning.text, duration: reasoning.duration });
+        }
+      }
+      if (assistantTextAcc) {
+        persistedContent.push({ type: 'text', text: assistantTextAcc });
+      }
+
+      if (persistedContent.length > 0) {
+        const persistRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/messages`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            thread_id: Number(currentThreadId),
+            role: 'assistant',
+            content: persistedContent,
+          }),
+        });
+        if (!persistRes.ok) {
+          console.error('保存助手消息失败:', persistRes.status, persistRes.statusText);
+        }
+      }
+
+      await fetchThreadFiles(Number(currentThreadId));
+    } catch (streamError) {
+      if (streamError instanceof Error && streamError.name === 'AbortError') {
+        console.log('技能对话已手动停止');
+      } else {
+        console.error('技能对话异常', streamError);
+      }
+    } finally {
+      setIsStreaming(false);
+      setIsConnecting(false);
+      abortControllerRef.current = null;
+    }
+  };
+
+  const handleStopStream = () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+      setIsStreaming(false);
+      setIsConnecting(false);
+      clearLoadingStates();
+    }
+  };
+
+  const handleUploadFile = async (file: File) => {
+    if (!currentThreadId) return;
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const response = await authedFetch(
+        `${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/${currentThreadId}/files/upload`,
+        {
+          method: 'POST',
+          body: formData,
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error(`上传失败: ${response.status} ${response.statusText}`);
+      }
+
+      await fetchThreadFiles(Number(currentThreadId));
+    } catch (error) {
+      console.error('上传技能会话文件失败', error);
+    }
+  };
+
+  const handleThreadSelect = (threadId: string) => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+      setIsStreaming(false);
+      setIsConnecting(false);
+      clearLoadingStates();
+    }
+
+    syncThreadId(threadId);
+  };
+
+  return (
+    <>
+      <style>{`
+        @keyframes skillCreatorBreathing {
+          0%, 100% {
+            opacity: 1;
+          }
+          50% {
+            opacity: 0.55;
+          }
+        }
+        @keyframes skillCreatorBreathingGlow {
+          0%, 100% {
+            box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.35);
+          }
+          50% {
+            box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
+          }
+        }
+        .skill-creator-breathing {
+          animation: skillCreatorBreathing 1.5s ease-in-out infinite, skillCreatorBreathingGlow 1.5s ease-in-out infinite;
+        }
+        @keyframes skillCreatorDotBounce {
+          0%, 80%, 100% {
+            transform: translateY(0);
+            opacity: 0.4;
+          }
+          40% {
+            transform: translateY(-4px);
+            opacity: 1;
+          }
+        }
+        .skill-creator-dot {
+          width: 6px;
+          height: 6px;
+          border-radius: 9999px;
+          background-color: currentColor;
+          display: inline-block;
+          animation: skillCreatorDotBounce 1.2s ease-in-out infinite;
+        }
+        .skill-creator-dot:nth-child(2) {
+          animation-delay: 0.15s;
+        }
+        .skill-creator-dot:nth-child(3) {
+          animation-delay: 0.3s;
+        }
+        @keyframes skillCreatorMarquee {
+          0% {
+            background-position: 200% 0;
+          }
+          100% {
+            background-position: -200% 0;
+          }
+        }
+        .skill-creator-shimmer-text {
+          position: relative;
+          display: inline-block;
+          color: var(--marquee-base);
+        }
+        .skill-creator-shimmer-text::after {
+          content: attr(data-text);
+          position: absolute;
+          inset: 0;
+          pointer-events: none;
+          background-image: linear-gradient(
+            100deg,
+            transparent 0%,
+            transparent 42%,
+            var(--marquee-highlight) 50%,
+            transparent 58%,
+            transparent 100%
+          );
+          background-size: 220% 100%;
+          background-repeat: no-repeat;
+          -webkit-background-clip: text;
+          background-clip: text;
+          -webkit-text-fill-color: transparent;
+          animation: skillCreatorMarquee 2.8s linear infinite;
+        }
+        .skill-creator-shimmer-light {
+          --marquee-base: #6b7280;
+          --marquee-highlight: #111827;
+        }
+        .skill-creator-shimmer-dark {
+          --marquee-base: #94a3b8;
+          --marquee-highlight: #f8fafc;
+        }
+      `}</style>
+      <div className={`h-[calc(100vh-120px)] overflow-hidden rounded-2xl border ${isDarkMode ? 'border-slate-700 bg-slate-900/40' : 'border-gray-200 bg-white'}`}>
+        <div className={`flex h-14 items-center justify-between border-b px-5 ${isDarkMode ? 'border-slate-700' : 'border-gray-200'}`}>
+          {/* <div>
+            <div className={`text-sm font-medium ${isDarkMode ? 'text-slate-100' : 'text-gray-900'}`}>skill creator</div>
+            {currentThreadId && (
+              <div className={`text-xs ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>会话 ID: {currentThreadId}</div>
+            )}
+          </div> */}
+          <button
+              type="button"
+              onClick={emptyChange}
+              className={`inline-flex h-9 items-center gap-2 rounded-lg border px-3 text-sm font-medium transition ${
+                isDarkMode
+                  ? 'border-slate-700 bg-slate-800 text-slate-100 hover:bg-slate-700'
+                  : 'border-gray-200 bg-gray-50 text-gray-700 hover:border-red-200 hover:bg-red-50 hover:text-red-600'
+              }`}
+              title="打开聊天记录"
+            >
+              返回
+            </button>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => setIsThreadSidebarOpen((prev) => !prev)}
+              className={`inline-flex h-9 items-center gap-2 rounded-lg border px-3 text-sm font-medium transition ${
+                isDarkMode
+                  ? 'border-slate-700 bg-slate-800 text-slate-100 hover:bg-slate-700'
+                  : 'border-gray-200 bg-gray-50 text-gray-700 hover:border-red-200 hover:bg-red-50 hover:text-red-600'
+              }`}
+              title="打开聊天记录"
+            >
+              <MessageSquareText className="h-4 w-4" />
+              聊天记录
+            </button>
+            <button
+              type="button"
+              onClick={() => setIsFileSidebarOpen(true)}
+              className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-cyan-400 via-blue-500 to-purple-600 text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-blue-500/50"
+              title="文件"
+            >
+              <FolderOpen className="h-4 w-4 shrink-0" />
+            </button>
+            <button
+              type="button"
+              onClick={() => setIsSaveModalOpen(true)}
+              className="inline-flex h-9 items-center gap-1.5 rounded-lg bg-emerald-500 px-3 text-sm text-white transition hover:bg-emerald-600"
+            >
+              <Save className="h-4 w-4" />
+              保存技能
+            </button>
+          </div>
+        </div>
+
+        <div className="flex h-[calc(100%-56px)] min-h-0 overflow-hidden">
+          <SkillCreatorThreadSidebar
+            authedFetch={authedFetch}
+            currentThreadId={currentThreadId}
+            isDarkMode={isDarkMode}
+            isOpen={isThreadSidebarOpen}
+            isBusy={isStreaming}
+            onClose={() => setIsThreadSidebarOpen(false)}
+            onThreadSelect={handleThreadSelect}
+          />
+
+          <div className="flex min-w-0 flex-1 flex-col">
+            <div ref={scrollContainerRef} className="flex-1 overflow-y-auto px-6 py-5">
+              {messages.length === 0 && !isConnecting ? (
+                <div className="flex h-full flex-col items-center justify-center px-4">
+                  <div className="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-violet-500 via-purple-500 to-indigo-600 shadow-lg shadow-violet-500/30 ring-1 ring-white/20">
+                    <Zap className="h-7 w-7 text-white" />
+                  </div>
+                  <h2 className={`mb-3 text-xl font-bold tracking-tight ${isDarkMode ? 'text-slate-100' : 'text-gray-900'}`}>
+                    skill-creator
+                  </h2>
+                  <p className={`mb-8 max-w-[480px] text-center text-sm leading-relaxed ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>
+                    专注于 Agent Skills 的创建、重构和生产化落地的专家代理，适合用来创建新技能、优化 SKILL.md、补充脚本素材，或整理技能交付流程。
+                  </p>
+                  <div className="grid w-full max-w-[560px] grid-cols-2 gap-3">
+                    {[
+                      { icon: <PackagePlus className="h-4 w-4 shrink-0" />, label: '创建一个新技能', prompt: '我想创建一个新技能，请帮我开始。' },
+                      { icon: <FileText className="h-4 w-4 shrink-0" />, label: '优化 SKILL.md 文档', prompt: '请帮我优化当前技能的 SKILL.md 文档质量。' },
+                      { icon: <Wrench className="h-4 w-4 shrink-0" />, label: '添加可复用脚本', prompt: '请帮我为当前技能添加可复用的脚本或参考资源。' },
+                      { icon: <Save className="h-4 w-4 shrink-0" />, label: '打包并发布技能', prompt: '请帮我配置验证和打包流程，准备发布 .skill 产物。' },
+                    ].map(({ icon, label, prompt }) => (
+                      <button
+                        key={label}
+                        type="button"
+                        disabled={!currentThreadId}
+                        onClick={() => setInputValue(prompt)}
+                        className={`group flex items-center gap-3 rounded-xl border px-4 py-3.5 text-left text-sm font-medium transition-all duration-200 ${
+                          isDarkMode
+                            ? 'border-slate-700 bg-slate-900/60 text-slate-300 hover:border-violet-500/60 hover:bg-slate-800 hover:text-slate-100 disabled:cursor-not-allowed disabled:opacity-40'
+                            : 'border-gray-200 bg-gray-50 text-gray-700 hover:border-violet-400 hover:bg-violet-50 hover:text-violet-700 disabled:cursor-not-allowed disabled:opacity-40'
+                        }`}
+                      >
+                        <span className={`transition-colors ${isDarkMode ? 'text-violet-400 group-hover:text-violet-300' : 'text-violet-500 group-hover:text-violet-600'}`}>
+                          {icon}
+                        </span>
+                        {label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              ) : (
+                <AgentConversationList messages={messages} isConnecting={isConnecting} />
+              )}
+            </div>
+            <ChatInputComposer
+              value={inputValue}
+              onChange={setInputValue}
+              onSend={() => void handleSendMessage()}
+              onStop={handleStopStream}
+              onUploadFile={(file) => void handleUploadFile(file)}
+              disabled={!currentThreadId}
+              isSending={isStreaming}
+              isDarkMode={isDarkMode}
+              showBorderTop
+              placeholder={!currentThreadId ? '请先从聊天记录中选择或新建一个会话' : isStreaming ? '正在生成中...' : '输入你的问题...'}
+            />
+          </div>
+
+          {isFileSidebarOpen && (
+            <aside
+              className={`relative flex min-h-0 shrink-0 border-l shadow-2xl ${
+                isDarkMode ? 'border-slate-700 bg-slate-950 text-slate-100 shadow-black/30' : 'border-gray-200 bg-white text-gray-900 shadow-gray-200/70'
+              }`}
+              style={{ width: fileSidebarWidth }}
+            >
+              <div
+                onMouseDown={handleResizeStart}
+                className={`absolute left-0 top-0 z-20 h-full w-2 -translate-x-1/2 cursor-col-resize transition-colors ${
+                  isDarkMode ? 'hover:bg-blue-400/40' : 'hover:bg-blue-500/25'
+                }`}
+                title="拖拽调整文件侧边栏宽度"
+              />
+
+              <div className={`flex w-[46%] min-w-[220px] flex-col border-r ${isDarkMode ? 'border-slate-800' : 'border-gray-200'}`}>
+                <div className={`flex items-center justify-between border-b px-4 py-3 ${isDarkMode ? 'border-slate-800 bg-slate-900/70' : 'border-gray-200 bg-gray-50/80'}`}>
+                  <div>
+                    <h3 className="text-sm font-semibold">文件</h3>
+                    <p className={`mt-0.5 text-xs ${isDarkMode ? 'text-slate-500' : 'text-gray-500'}`}>{fileList.length} 个根节点</p>
+                  </div>
+                </div>
+
+                <div className="min-h-0 flex-1 overflow-y-auto p-3">
+                  {fileList.length > 0 ? (
+                    <div className="space-y-1">
+                      {fileList.map((node) => (
+                        <FileTreeItem
+                          key={node.path}
+                          node={node}
+                          isDarkMode={isDarkMode}
+                          expandedPaths={expandedPaths}
+                          selectedPath={selectedFile?.path ?? null}
+                          onToggle={handleToggleFolder}
+                          onSelect={(file) => void handleSelectFile(file)}
+                        />
+                      ))}
+                    </div>
+                  ) : (
+                    <div className={`rounded-2xl border border-dashed px-4 py-8 text-center text-sm ${isDarkMode ? 'border-slate-700 text-slate-500' : 'border-gray-200 text-gray-400'}`}>
+                      暂无文件
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div className="flex min-w-0 flex-1 flex-col">
+                <div className={`flex items-center justify-between gap-3 border-b px-5 py-3 ${isDarkMode ? 'border-slate-800 bg-slate-900/70' : 'border-gray-200 bg-gray-50/80'}`}>
+                  <div className="min-w-0">
+                    <h3 className="truncate text-sm font-semibold">{selectedFile?.name ?? '文件预览'}</h3>
+                    <p className={`mt-0.5 truncate text-xs ${isDarkMode ? 'text-slate-500' : 'text-gray-500'}`}>
+                      {selectedFile ? selectedFile.path : '选择左侧文件查看内容'}
+                    </p>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => setIsFileSidebarOpen(false)}
+                    className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition ${
+                      isDarkMode ? 'text-slate-400 hover:bg-slate-800 hover:text-slate-100' : 'text-gray-500 hover:bg-gray-200 hover:text-gray-900'
+                    }`}
+                    title="关闭文件侧边栏"
+                  >
+                    <X className="h-4 w-4" />
+                  </button>
+                </div>
+
+                <div className="min-h-0 flex-1 overflow-auto p-5">
+                  {!selectedFile ? (
+                    <div className={`flex h-full flex-col items-center justify-center rounded-3xl border border-dashed text-center ${isDarkMode ? 'border-slate-800 bg-slate-900/40 text-slate-500' : 'border-gray-200 bg-gray-50 text-gray-400'}`}>
+                      <FileText className="mb-3 h-10 w-10 opacity-60" />
+                      <p className="text-sm font-medium">请选择一个文件</p>
+                      <p className="mt-1 text-xs">文件内容会显示在这里</p>
+                    </div>
+                  ) : isFilePreviewLoading ? (
+                    <div className={`flex h-full items-center justify-center gap-2 text-sm ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      正在加载文件内容...
+                    </div>
+                  ) : filePreviewError ? (
+                    <div className={`flex h-full flex-col items-center justify-center gap-2 text-sm ${isDarkMode ? 'text-red-300' : 'text-red-500'}`}>
+                      <AlertCircle className="h-8 w-8" />
+                      {filePreviewError}
+                    </div>
+                  ) : (
+                    <div className={`overflow-hidden rounded-2xl border ${isDarkMode ? 'border-slate-800 bg-slate-900' : 'border-gray-200 bg-white'}`}>
+                      <div className={`flex items-center justify-between border-b px-4 py-2.5 ${isDarkMode ? 'border-slate-800 bg-slate-950/70' : 'border-gray-100 bg-gray-50'}`}>
+                        <span className={`text-xs font-semibold tracking-wide ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>{getFileLanguage(selectedFile.extension)}</span>
+                        <span className={`text-xs ${isDarkMode ? 'text-slate-600' : 'text-gray-400'}`}>{formatFileSize(selectedFile.size)}</span>
+                      </div>
+                      <div className={`p-5 text-sm leading-7 ${isDarkMode ? 'text-slate-200' : 'text-gray-700'}`}>
+                        <MarkdownRenderer content={filePreviewContent || '文件内容为空'} />
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </aside>
+          )}
+        </div>
+      </div>
+
+      {/* <DraggableModal
+        open={isSaveModalOpen}
+        onClose={() => setIsSaveModalOpen(false)}
+        title="保存技能"
+        width={520}
+        body={
+          <div className="flex flex-col gap-4">
+            <div>
+              <label className={`mb-1.5 block text-xs font-medium ${isDarkMode ? 'text-slate-300' : 'text-gray-600'}`}>
+                技能名称
+              </label>
+              <input
+                type="text"
+                value={skillName}
+                onChange={(e) => setSkillName(e.target.value)}
+                placeholder="例如：自动写周报"
+                className={`h-9 w-full rounded-lg border px-3 text-sm outline-none transition ${
+                  isDarkMode
+                    ? 'border-slate-700 bg-slate-900 text-slate-100 placeholder:text-slate-500 focus:border-blue-500'
+                    : 'border-gray-300 bg-white text-gray-800 placeholder:text-gray-400 focus:border-blue-500'
+                }`}
+              />
+            </div>
+            <div>
+              <label className={`mb-1.5 block text-xs font-medium ${isDarkMode ? 'text-slate-300' : 'text-gray-600'}`}>
+                描述
+              </label>
+              <textarea
+                value={skillDesc}
+                onChange={(e) => setSkillDesc(e.target.value)}
+                placeholder="简单描述一下这个技能的用途..."
+                rows={4}
+                className={`w-full resize-none rounded-lg border px-3 py-2 text-sm outline-none transition ${
+                  isDarkMode
+                    ? 'border-slate-700 bg-slate-900 text-slate-100 placeholder:text-slate-500 focus:border-blue-500'
+                    : 'border-gray-300 bg-white text-gray-800 placeholder:text-gray-400 focus:border-blue-500'
+                }`}
+              />
+            </div>
+            <p className={`text-xs ${isDarkMode ? 'text-slate-500' : 'text-gray-500'}`}>
+              提示：按住顶部标题栏可拖动弹窗，按 ESC 或点击遮罩关闭。
+            </p>
+          </div>
+        }
+        confirmText="保存"
+        cancelText="取消"
+        onConfirm={() => {
+          console.log('保存技能：', { skillName, skillDesc });
+          setIsSaveModalOpen(false);
+        }}
+      /> */}
+    </>
+  );
+}
diff --git a/web-code/components/agent/SkillCreatorThreadSidebar.tsx b/web-code/components/agent/SkillCreatorThreadSidebar.tsx
new file mode 100644
index 00000000..e95fdf72
--- /dev/null
+++ b/web-code/components/agent/SkillCreatorThreadSidebar.tsx
@@ -0,0 +1,337 @@
+import { knowledgetoolUrl } from '@/hooks/useExpertAuthBootstrap';
+import { Archive, Loader2, MessageSquareText, Plus, RefreshCw, Trash2, X } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+export interface SkillCreatorThread {
+  id: number;
+  title: string;
+  archived: boolean;
+  expert_agent_id: number | null;
+  created_at: string;
+  updated_at: string;
+}
+
+interface ThreadListResponse {
+  threads?: SkillCreatorThread[];
+  archived_threads?: SkillCreatorThread[];
+}
+
+interface SkillCreatorThreadSidebarProps {
+  authedFetch: (input: Parameters<typeof fetch>[0], init?: Parameters<typeof fetch>[1]) => Promise<Response>;
+  currentThreadId: string;
+  isDarkMode: boolean;
+  isOpen: boolean;
+  isBusy?: boolean;
+  createThreadPayload?: Record<string, unknown>;
+  createButtonText?: string;
+  emptyText?: string;
+  subtitle?: string;
+  threadFilter?: (thread: SkillCreatorThread) => boolean;
+  onClose: () => void;
+  onThreadSelect: (threadId: string) => void;
+}
+
+const THREADS_API_URL = `${knowledgetoolUrl}/api/v1/expert-agent-chat/threads`;
+
+const sortThreads = (threads: SkillCreatorThread[]) =>
+  [...threads].sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime());
+
+export default function SkillCreatorThreadSidebar({
+  authedFetch,
+  currentThreadId,
+  isDarkMode,
+  isOpen,
+  isBusy = false,
+  createThreadPayload,
+  createButtonText = '新建聊天',
+  emptyText = '暂无记录',
+  subtitle = '切换或管理当前会话',
+  threadFilter,
+  onClose,
+  onThreadSelect,
+}: SkillCreatorThreadSidebarProps) {
+  const [threads, setThreads] = useState<SkillCreatorThread[]>([]);
+  const [archivedThreads, setArchivedThreads] = useState<SkillCreatorThread[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const [deletingThreadId, setDeletingThreadId] = useState<number | null>(null);
+  const [error, setError] = useState('');
+
+  const applyFilter = useCallback(
+    (items: SkillCreatorThread[]) => (threadFilter ? items.filter(threadFilter) : items),
+    [threadFilter],
+  );
+
+  const refreshThreads = useCallback(async () => {
+    setIsLoading(true);
+    setError('');
+
+    try {
+      const response = await authedFetch(THREADS_API_URL, { method: 'GET' });
+      if (!response.ok) {
+        throw new Error(`获取会话列表失败: ${response.status}`);
+      }
+
+      const data = (await response.json()) as ThreadListResponse;
+      const nextThreads = Array.isArray(data.threads) ? data.threads : [];
+      const nextArchivedThreads = Array.isArray(data.archived_threads) ? data.archived_threads : [];
+
+      setThreads(sortThreads(applyFilter(nextThreads)));
+      setArchivedThreads(sortThreads(applyFilter(nextArchivedThreads)));
+    } catch (fetchError) {
+      console.error('获取会话列表失败', fetchError);
+      setError('会话列表加载失败，请稍后重试');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [applyFilter, authedFetch]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    void refreshThreads();
+  }, [isOpen, refreshThreads]);
+
+  const allThreads = useMemo(() => [...threads, ...archivedThreads], [archivedThreads, threads]);
+
+  const handleCreateThread = async () => {
+    if (isBusy || isCreating) return;
+
+    setIsCreating(true);
+    setError('');
+
+    try {
+      const response = await authedFetch(THREADS_API_URL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          title: '新建技能',
+          archived: false,
+          is_real_chat: true,
+          ...createThreadPayload,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`创建会话失败: ${response.status}`);
+      }
+
+      const newThread = (await response.json()) as SkillCreatorThread;
+      if (!threadFilter || threadFilter(newThread)) {
+        setThreads((prev) => sortThreads([newThread, ...prev]));
+      }
+      onThreadSelect(String(newThread.id));
+    } catch (createError) {
+      console.error('创建会话失败', createError);
+      setError('新建会话失败，请稍后重试');
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const handleDeleteThread = async (thread: SkillCreatorThread) => {
+    if (isBusy || deletingThreadId === thread.id) return;
+
+    const confirmed = window.confirm(`确认删除会话“${thread.title || `会话 ${thread.id}`}”吗？`);
+    if (!confirmed) return;
+
+    setDeletingThreadId(thread.id);
+    setError('');
+
+    try {
+      const response = await authedFetch(`${THREADS_API_URL}/${thread.id}`, {
+        method: 'DELETE',
+      });
+
+      if (!response.ok) {
+        throw new Error(`删除会话失败: ${response.status}`);
+      }
+
+      const nextThreads = threads.filter((item) => item.id !== thread.id);
+      const nextArchivedThreads = archivedThreads.filter((item) => item.id !== thread.id);
+      setThreads(nextThreads);
+      setArchivedThreads(nextArchivedThreads);
+
+      if (currentThreadId === String(thread.id)) {
+        const fallbackThread = [...nextThreads, ...nextArchivedThreads][0];
+        onThreadSelect(fallbackThread ? String(fallbackThread.id) : '');
+      }
+    } catch (deleteError) {
+      console.error('删除会话失败', deleteError);
+      setError('删除会话失败，请稍后重试');
+    } finally {
+      setDeletingThreadId(null);
+    }
+  };
+
+  const renderThreadSection = (title: string, items: SkillCreatorThread[], archived = false) => (
+    <div className="space-y-2.5">
+      <div className="flex items-center justify-between px-1">
+        <div className="flex items-center gap-1.5">
+          {archived ? <Archive className="h-3.5 w-3.5" /> : <MessageSquareText className="h-3.5 w-3.5" />}
+          <span className="text-[11px] font-semibold tracking-[0.14em]">{title}</span>
+        </div>
+        <span className={`text-[11px] ${isDarkMode ? 'text-slate-500' : 'text-gray-400'}`}>{items.length}</span>
+      </div>
+
+      {items.length === 0 ? (
+        <div
+          className={`rounded-xl border border-dashed px-3 py-4 text-center text-xs ${
+            isDarkMode ? 'border-slate-700 text-slate-500' : 'border-gray-200 text-gray-400'
+          }`}
+        >
+          {emptyText}
+        </div>
+      ) : (
+        <div className="space-y-1">
+          {items.map((thread) => {
+            const isActive = currentThreadId === String(thread.id);
+            const isDeleting = deletingThreadId === thread.id;
+
+            return (
+              <button
+                key={thread.id}
+                type="button"
+                disabled={isBusy}
+                onClick={() => onThreadSelect(String(thread.id))}
+                className={`group flex w-full items-center gap-3 rounded-xl border px-3 py-2.5 text-left transition-all duration-200 ${
+                  isActive
+                    ? isDarkMode
+                      ? 'border-slate-600 bg-slate-800/90 text-slate-50 shadow-sm'
+                      : 'border-red-200 bg-red-50/80 text-gray-900 shadow-sm'
+                    : isDarkMode
+                      ? 'border-transparent text-slate-300 hover:border-slate-700 hover:bg-slate-800/60 hover:text-slate-100'
+                      : 'border-transparent text-gray-700 hover:border-gray-200 hover:bg-gray-50 hover:text-gray-900'
+                } ${isBusy ? 'cursor-not-allowed opacity-70' : ''}`}
+              >
+                <span
+                  className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${
+                    isActive
+                      ? isDarkMode
+                        ? 'bg-slate-700 text-slate-200'
+                        : 'bg-white text-red-500 ring-1 ring-red-100'
+                      : isDarkMode
+                        ? 'bg-slate-800 text-slate-400'
+                        : 'bg-gray-100 text-gray-500'
+                  }`}
+                >
+                  {archived ? <Archive className="h-4 w-4" /> : <MessageSquareText className="h-4 w-4" />}
+                </span>
+
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate text-sm font-medium">{thread.title || `会话 ${thread.id}`}</span>
+                </span>
+
+                <span
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    void handleDeleteThread(thread);
+                  }}
+                  className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-lg transition ${
+                    isActive ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'
+                  } ${
+                    isDarkMode
+                      ? 'text-slate-400 hover:bg-rose-500/15 hover:text-rose-300'
+                      : 'text-gray-400 hover:bg-rose-50 hover:text-rose-500'
+                  }`}
+                  role="button"
+                  aria-label={`删除会话 ${thread.title || thread.id}`}
+                  tabIndex={0}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      void handleDeleteThread(thread);
+                    }
+                  }}
+                >
+                  {isDeleting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <aside
+      className={`flex h-full shrink-0 flex-col overflow-hidden border-r transition-[width,opacity,transform,border-color] duration-300 ease-out ${
+        isOpen ? 'w-[286px] translate-x-0 opacity-100' : 'w-0 -translate-x-3 opacity-0 pointer-events-none'
+      } ${
+        isDarkMode ? 'border-slate-700 bg-slate-950/90 text-slate-100' : 'border-gray-200 bg-[#fafafa] text-gray-900'
+      }`}
+    >
+      <div className={`border-b px-4 py-4 ${isDarkMode ? 'border-slate-800 bg-slate-900/70' : 'border-gray-200 bg-white'}`}>
+        <div className="flex items-center justify-between gap-3">
+          <div className="min-w-0">
+            <h3 className="text-sm font-semibold">聊天记录</h3>
+            <p className={`mt-1 text-xs ${isDarkMode ? 'text-slate-500' : 'text-gray-500'}`}>{subtitle}</p>
+          </div>
+
+          <button
+            type="button"
+            onClick={onClose}
+            className={`flex h-8 w-8 items-center justify-center rounded-lg transition ${
+              isDarkMode ? 'text-slate-400 hover:bg-slate-800 hover:text-slate-100' : 'text-gray-400 hover:bg-gray-100 hover:text-gray-700'
+            }`}
+            title="关闭聊天记录"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="mt-4 flex items-center gap-2">
+          <button
+            type="button"
+            disabled={isBusy || isCreating}
+            onClick={() => void handleCreateThread()}
+            className={`inline-flex h-9 flex-1 items-center justify-center gap-2 rounded-lg border px-3 text-sm font-medium transition ${
+              isDarkMode
+                ? 'border-slate-700 bg-slate-800 text-slate-100 hover:bg-slate-700'
+                : 'border-gray-200 bg-white text-gray-700 hover:border-red-200 hover:bg-red-50 hover:text-red-600'
+            } disabled:cursor-not-allowed disabled:opacity-70`}
+          >
+            {isCreating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
+            {createButtonText}
+          </button>
+          <button
+            type="button"
+            disabled={isLoading}
+            onClick={() => void refreshThreads()}
+            className={`flex h-9 w-9 items-center justify-center rounded-lg border transition ${
+              isDarkMode
+                ? 'border-slate-700 bg-slate-800 text-slate-300 hover:bg-slate-700'
+                : 'border-gray-200 bg-white text-gray-500 hover:border-gray-300 hover:text-gray-700'
+            } ${isLoading ? 'cursor-not-allowed opacity-70' : ''}`}
+            title="刷新会话列表"
+          >
+            <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+          </button>
+        </div>
+
+        {error && (
+          <div className={`mt-3 rounded-lg px-3 py-2 text-xs ${isDarkMode ? 'bg-rose-500/10 text-rose-300' : 'bg-rose-50 text-rose-500'}`}>
+            {error}
+          </div>
+        )}
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto px-3 py-3">
+        {isLoading && allThreads.length === 0 ? (
+          <div className={`flex h-full items-center justify-center gap-2 text-sm ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>
+            <Loader2 className="h-4 w-4 animate-spin" />
+            正在加载聊天记录...
+          </div>
+        ) : (
+          <div className="space-y-5">
+            {renderThreadSection('进行中', threads)}
+            {renderThreadSection('已归档', archivedThreads, true)}
+          </div>
+        )}
+      </div>
+    </aside>
+  );
+}
diff --git a/web-code/components/agent/SkillsWorkshop.tsx b/web-code/components/agent/SkillsWorkshop.tsx
new file mode 100644
index 00000000..f7c5d4d6
--- /dev/null
+++ b/web-code/components/agent/SkillsWorkshop.tsx
@@ -0,0 +1,811 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Bot,
+  Boxes,
+  Braces,
+  ChevronDown,
+  ChevronRight,
+  Compass,
+  Crown,
+  Edit,
+  FileCode2,
+  Globe,
+  LineChart,
+  MoreVertical,
+  PenTool,
+  Pencil,
+  PencilIcon,
+  Plus,
+  Search,
+  ShieldCheck,
+  Sparkles,
+  Target,
+  Trash2,
+  Upload,
+  Wand2,
+  Workflow,
+  X,
+} from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { useTheme } from '../../contexts/ThemeContext';
+import { useExpertAuthBootstrap } from '../../hooks';
+import { knowledgetoolUrl } from '@/hooks/useExpertAuthBootstrap';
+import { MessagePlugin } from 'tdesign-react';
+
+interface Skill {
+  id: string;
+  name: string;
+  description: string;
+  category: string;
+  highlight: string;
+  relatedCount: number;
+  version: string;
+  inputCount: number;
+  outputCount: number;
+  isNew?: boolean;
+  isMine: boolean;
+  source?: string;
+}
+
+interface ApiSkill {
+  id: number;
+  name: string;
+  description: string;
+  source?: string;
+}
+
+interface SkillsResponse {
+  items: ApiSkill[];
+  total: number;
+  page: number;
+  page_size: number;
+}
+
+interface CreateSkillThreadResponse {
+  id: number;
+  title: string;
+  archived: boolean;
+  expert_agent_id: number | null;
+  user_id: string;
+  created_at: string;
+  updated_at: string;
+}
+
+type CategoryKey = 'all' | 'writing' | 'analysis' | 'decision' | 'validation' | 'workflow';
+
+const CATEGORY_LABELS: Record<CategoryKey, string> = {
+  all: '全部类型',
+  writing: '编辑类',
+  analysis: '分析类',
+  decision: '决策类',
+  validation: '校验类',
+  workflow: '流程类',
+};
+
+const categoryOrder: CategoryKey[] = ['all', 'writing', 'analysis', 'decision', 'validation', 'workflow'];
+
+const AVATAR_STYLES = [
+  {
+    Icon: Bot,
+    wrapper: 'from-rose-100 via-red-50 to-white text-red-500',
+    glow: 'shadow-red-100/80',
+    ring: 'ring-red-100',
+    orb: 'bg-red-500/10',
+  },
+  {
+    Icon: Wand2,
+    wrapper: 'from-violet-100 via-fuchsia-50 to-white text-violet-500',
+    glow: 'shadow-violet-100/80',
+    ring: 'ring-violet-100',
+    orb: 'bg-violet-500/10',
+  },
+  {
+    Icon: LineChart,
+    wrapper: 'from-cyan-100 via-sky-50 to-white text-sky-500',
+    glow: 'shadow-sky-100/80',
+    ring: 'ring-sky-100',
+    orb: 'bg-sky-500/10',
+  },
+  {
+    Icon: ShieldCheck,
+    wrapper: 'from-emerald-100 via-green-50 to-white text-emerald-500',
+    glow: 'shadow-emerald-100/80',
+    ring: 'ring-emerald-100',
+    orb: 'bg-emerald-500/10',
+  },
+  {
+    Icon: Workflow,
+    wrapper: 'from-amber-100 via-yellow-50 to-white text-amber-500',
+    glow: 'shadow-amber-100/80',
+    ring: 'ring-amber-100',
+    orb: 'bg-amber-500/10',
+  },
+  {
+    Icon: FileCode2,
+    wrapper: 'from-indigo-100 via-blue-50 to-white text-indigo-500',
+    glow: 'shadow-indigo-100/80',
+    ring: 'ring-indigo-100',
+    orb: 'bg-indigo-500/10',
+  },
+  {
+    Icon: Target,
+    wrapper: 'from-pink-100 via-rose-50 to-white text-pink-500',
+    glow: 'shadow-pink-100/80',
+    ring: 'ring-pink-100',
+    orb: 'bg-pink-500/10',
+  },
+  {
+    Icon: Compass,
+    wrapper: 'from-orange-100 via-amber-50 to-white text-orange-500',
+    glow: 'shadow-orange-100/80',
+    ring: 'ring-orange-100',
+    orb: 'bg-orange-500/10',
+  },
+];
+
+const hashString = (value: string) =>
+  value.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
+
+const inferCategory = (skill: ApiSkill): CategoryKey => {
+  const text = `${skill.name} ${skill.description}`.toLowerCase();
+
+  if (/(summary|readme|writer|copy|frontend|narrative|edit|document)/.test(text)) return 'writing';
+  if (/(analysis|audience|risk|search|insight|research|data)/.test(text)) return 'analysis';
+  if (/(plan|decision|goal|strategy|logic|outreach)/.test(text)) return 'decision';
+  if (/(check|validate|review|guard|test|lint)/.test(text)) return 'validation';
+  return 'workflow';
+};
+
+const buildVersion = (id: number) => `v${1 + (id % 3)}.${(id % 8) + 1}`;
+const buildCount = (id: number, offset: number) => 2 + ((id + offset) % 4);
+const buildRelatedCount = (id: number) => 3 + (id % 4);
+
+const mapApiSkillToUiSkill = (skill: ApiSkill, type: 'official' | 'mine'): Skill => ({
+  id: String(skill.id),
+  name: skill.name,
+  description: skill.description,
+  category: inferCategory(skill),
+  highlight: type === 'mine' ? '已接入' : '可添加',
+  relatedCount: buildRelatedCount(skill.id),
+  version: buildVersion(skill.id),
+  inputCount: buildCount(skill.id, 1),
+  outputCount: buildCount(skill.id, 2),
+  isNew: skill.id % 3 === 0,
+  isMine: type === 'mine',
+});
+
+const getAvatarStyle = (skillId: string) => AVATAR_STYLES[hashString(skillId) % AVATAR_STYLES.length];
+
+export default function SkillsWorkshop() {
+  const navigate = useNavigate();
+  const { authedFetch } = useExpertAuthBootstrap();
+  const { theme } = useTheme();
+  const isDarkMode = theme === 'dark';
+
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedFilter, setSelectedFilter] = useState<'all' | 'mine'>('all');
+  const [selectedCategory, setSelectedCategory] = useState<CategoryKey>('all');
+  const [skills, setSkills] = useState<Skill[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [isCreateMenuOpen, setIsCreateMenuOpen] = useState(false);
+  const [isCreatingSkillThread, setIsCreatingSkillThread] = useState(false);
+  const [openCardMenuId, setOpenCardMenuId] = useState<string | null>(null);
+  const [editingSkill, setEditingSkill] = useState<Skill | null>(null);
+  const [addingSkillId, setAddingSkillId] = useState<string | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isCreatingByUpload, setIsCreatingByUpload] = useState(false);
+  const [isAiEditing, setIsAiEditing] = useState(false);
+
+  const createMenuRef = useRef<HTMLDivElement | null>(null);
+  const cardMenuRef = useRef<HTMLDivElement | null>(null);
+  const uploadInputRef = useRef<HTMLInputElement | null>(null);
+  const createUploadInputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    let canceled = false;
+
+    const fetchByType = async (type: 'official' | 'mine') => {
+      const params = new URLSearchParams({
+        type,
+        keyword: searchTerm.trim(),
+        page: '1',
+        page_size: '100',
+      });
+      const res = await authedFetch(`${knowledgetoolUrl}/api/v1/skills?${params.toString()}`, {
+        method: 'GET',
+      });
+      if (!res.ok) {
+        throw new Error(`加载技能失败: ${res.status} ${res.statusText}`);
+      }
+      const data = (await res.json()) as SkillsResponse;
+      return data.items.map((item) => mapApiSkillToUiSkill(item, type));
+    };
+
+    const loadSkills = async () => {
+      setLoading(true);
+      setError('');
+      try {
+        const list =
+          selectedFilter === 'all'
+            ? await Promise.all([fetchByType('official'), fetchByType('mine')])
+            : [await fetchByType('mine')];
+
+        if (canceled) return;
+
+        const merged = selectedFilter === 'all' ? [...list[0], ...list[1]] : list[0];
+        const deduped = Array.from(new Map(merged.map((item) => [item.id, item])).values());
+        setSkills(deduped);
+      } catch {
+        if (canceled) return;
+        setError('加载技能失败，请稍后重试');
+        setSkills([]);
+      } finally {
+        if (!canceled) setLoading(false);
+      }
+    };
+
+    void loadSkills();
+
+    return () => {
+      canceled = true;
+    };
+  }, [searchTerm, selectedFilter, authedFetch]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (createMenuRef.current && !createMenuRef.current.contains(target)) {
+        setIsCreateMenuOpen(false);
+      }
+      if (cardMenuRef.current && !cardMenuRef.current.contains(target)) {
+        setOpenCardMenuId(null);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const filteredSkills = useMemo(
+    () => skills.filter((skill) => selectedCategory === 'all' || skill.category === selectedCategory),
+    [selectedCategory, skills],
+  );
+
+  const categoryCounts = useMemo(
+    () =>
+      categoryOrder.reduce<Record<CategoryKey, number>>((acc, category) => {
+        acc[category] = category === 'all' ? skills.length : skills.filter((skill) => skill.category === category).length;
+        return acc;
+      }, {} as Record<CategoryKey, number>),
+    [skills],
+  );
+
+  const mySkillCount = skills.filter((skill) => skill.isMine).length;
+  const officialSkillCount = skills.filter((skill) => !skill.isMine).length;
+
+  const handlePublishSkill = async (skillId: string) => {
+    setOpenCardMenuId(null);
+    try {
+      const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/skills/publish`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          skill_id: parseInt(skillId, 10),
+        }),
+      });
+
+      if (!res.ok) {
+        throw new Error(`发布失败: ${res.status} ${res.statusText}`);
+      }
+    } catch (err) {
+      console.error('发布技能失败', err);
+      setError('发布技能失败，请稍后重试');
+    }
+  };
+
+  const handleEditSkill = (skillId: string) => {
+    setOpenCardMenuId(null);
+    const skill = skills.find((item) => item.id === skillId) ?? null;
+    setEditingSkill(skill);
+  };
+
+  const handleDeleteSkill = async (skillId: string) => {
+    setOpenCardMenuId(null);
+    try {
+      const res = await authedFetch(`${knowledgetoolUrl}/api/v1/skills/mine/${skillId}`, {
+        method: 'DELETE',
+      });
+      if (!res.ok) {
+        throw new Error(`删除失败: ${res.status} ${res.statusText}`);
+      }
+      setSkills((prev) => prev.filter((item) => item.id !== skillId));
+      MessagePlugin.success('操作成功');
+    } catch (err) {
+      console.error('删除技能失败', err);
+      setError('删除技能失败，请稍后重试');
+    }
+  };
+
+  const handleUploadSkillFile = async (file: File, skillId: string) => {
+    setIsUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      const res = await authedFetch(`${knowledgetoolUrl}/api/v1/skills/${skillId}/upload`, {
+        method: 'PUT',
+        body: formData,
+      });
+      if (!res.ok) {
+        throw new Error(`上传失败: ${res.status} ${res.statusText}`);
+      }
+      setEditingSkill(null);
+    } catch (err) {
+      console.error('上传技能失败', err);
+      setError('上传技能失败，请稍后重试');
+    } finally {
+      setIsUploading(false);
+      if (uploadInputRef.current) uploadInputRef.current.value = '';
+    }
+  };
+
+  const handleAddOfficialSkill = async (skillId: string) => {
+    if (addingSkillId) return;
+    setAddingSkillId(skillId);
+    try {
+      const res = await authedFetch(`${knowledgetoolUrl}/api/v1/skills/mine/add`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ official_skill_id: parseInt(skillId, 10) }),
+      });
+      if (!res.ok) {
+        throw new Error(`添加失败: ${res.status} ${res.statusText}`);
+      }
+      setSkills((prev) => prev.map((item) => (item.id === skillId ? { ...item, isMine: true, highlight: '已接入' } : item)));
+      MessagePlugin.success('添加成功');
+    } catch (err) {
+      console.error('添加技能失败', err);
+      setError('添加技能失败，请稍后重试');
+    } finally {
+      setAddingSkillId(null);
+    }
+  };
+
+  const handleAiEditSkill = async (skill: Skill) => {
+    if (isAiEditing) return;
+    setIsAiEditing(true);
+    try {
+      const threadRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/threads`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: `编辑技能：${skill.name}`,
+          archived: true,
+          is_real_chat: true,
+        }),
+      });
+      if (!threadRes.ok) {
+        throw new Error(`创建会话失败: ${threadRes.status} ${threadRes.statusText}`);
+      }
+      const threadData = (await threadRes.json()) as CreateSkillThreadResponse;
+      const threadId = threadData?.id;
+      if (!threadId) throw new Error('创建会话成功，但未返回会话 id');
+
+      const copyRes = await authedFetch(
+        `${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/${threadId}/copy-skill/${skill.id}`,
+        { method: 'POST' },
+      );
+      if (!copyRes.ok) {
+        throw new Error(`复制技能失败: ${copyRes.status} ${copyRes.statusText}`);
+      }
+
+      setEditingSkill(null);
+      localStorage.setItem('skill_creator_thread_id', String(threadId));
+      navigate(`/skill-creator?id=${threadId}`);
+    } catch (err) {
+      console.error('AI 辅助编辑失败', err);
+      setError('AI 辅助编辑失败，请稍后重试');
+    } finally {
+      setIsAiEditing(false);
+    }
+  };
+
+  const handleCreateSkillByUpload = async (file: File) => {
+    setIsCreatingByUpload(true);
+    setIsCreateMenuOpen(false);
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      const res = await authedFetch(`${knowledgetoolUrl}/api/v1/skills/upload`, {
+        method: 'POST',
+        body: formData,
+      });
+      if (!res.ok) {
+        throw new Error(`上传失败: ${res.status} ${res.statusText}`);
+      }
+    } catch (err) {
+      console.error('上传技能失败', err);
+      setError('上传技能失败，请稍后重试');
+    } finally {
+      setIsCreatingByUpload(false);
+      if (createUploadInputRef.current) createUploadInputRef.current.value = '';
+    }
+  };
+
+  const handleCreateSkillByAgent = async () => {
+    if (isCreatingSkillThread) return;
+    setIsCreatingSkillThread(true);
+    setIsCreateMenuOpen(false);
+    try {
+      const threadRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/threads`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          title: '新建技能',
+          archived: true,
+          is_real_chat: true,
+        }),
+      });
+
+      if (!threadRes.ok) {
+        throw new Error(`创建技能会话失败: ${threadRes.status} ${threadRes.statusText}`);
+      }
+
+      const threadData = (await threadRes.json()) as CreateSkillThreadResponse;
+      const threadId = threadData?.id;
+      if (!threadId) {
+        throw new Error('创建技能会话成功，但未返回会话 id');
+      }
+
+      localStorage.setItem('skill_creator_thread_id', String(threadId));
+      navigate(`/qa-center/skill-creator?id=${threadId}`);
+    } catch (createError) {
+      console.error('创建技能会话失败', createError);
+      setError('创建技能会话失败，请稍后重试');
+    } finally {
+      setIsCreatingSkillThread(false);
+    }
+  };
+
+  return (
+    <div className={`w-full min-h-[calc(100vh-140px)] ${isDarkMode ? 'bg-slate-950 text-slate-100' : 'bg-[#fcfcfd] text-[#101828]'}`}>
+      {editingSkill && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
+          onMouseDown={(event) => {
+            if (event.target === event.currentTarget) setEditingSkill(null);
+          }}
+        >
+          <div className={`relative w-[440px] overflow-hidden rounded-[28px] border shadow-2xl ${isDarkMode ? 'border-slate-700 bg-slate-900 text-slate-100' : 'border-[#f3d6d6] bg-white text-gray-900'}`}>
+            <div className="flex items-center justify-between px-6 pb-4 pt-5">
+              <h2 className="text-base font-semibold">编辑技能</h2>
+              <button
+                type="button"
+                onClick={() => setEditingSkill(null)}
+                className={`flex h-9 w-9 items-center justify-center rounded-xl transition ${isDarkMode ? 'text-slate-400 hover:bg-slate-700 hover:text-slate-100' : 'text-gray-400 hover:bg-[#fff3f3] hover:text-[#ef4444]'}`}
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+
+            <p className={`px-6 pb-4 text-sm ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>
+              选择编辑方式：<span className={`font-medium ${isDarkMode ? 'text-slate-200' : 'text-gray-800'}`}>{editingSkill.name}</span>
+            </p>
+
+            <div className={`mx-6 border-t ${isDarkMode ? 'border-slate-700' : 'border-[#f4e4e4]'}`} />
+
+            <div className="flex flex-col gap-3 p-4">
+              <button
+                type="button"
+                disabled={isAiEditing}
+                onClick={() => void handleAiEditSkill(editingSkill)}
+                className={`group/opt flex w-full items-center gap-4 rounded-[22px] border px-4 py-4 text-left transition ${isDarkMode ? 'border-slate-700 bg-slate-800/60 hover:bg-slate-800' : 'border-[#f5d4d4] bg-[#fffafa] hover:border-[#ffbdbd] hover:bg-[#fff5f5]'} ${isAiEditing ? 'cursor-not-allowed opacity-50' : ''}`}
+              >
+                <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-violet-500 to-indigo-600 text-white shadow-lg shadow-violet-500/30 ring-1 ring-white/20">
+                  <Bot className="h-5 w-5" />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <p className={`text-sm font-medium ${isDarkMode ? 'text-slate-100' : 'text-gray-900'}`}>
+                    {isAiEditing ? '处理中...' : 'AI 辅助编辑'}
+                  </p>
+                  <p className={`mt-0.5 text-xs ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>通过对话开启 AI 帮助您优化技能内容</p>
+                </div>
+                <ChevronRight className={`h-4 w-4 shrink-0 transition ${isDarkMode ? 'text-slate-500 group-hover/opt:text-slate-300' : 'text-gray-300 group-hover/opt:text-gray-500'}`} />
+              </button>
+
+              <input
+                ref={uploadInputRef}
+                type="file"
+                accept=".md,.zip"
+                className="hidden"
+                onChange={(event) => {
+                  const file = event.target.files?.[0];
+                  if (file && editingSkill) {
+                    void handleUploadSkillFile(file, editingSkill.id);
+                  }
+                }}
+              />
+              <button
+                type="button"
+                disabled={isUploading}
+                onClick={() => uploadInputRef.current?.click()}
+                className={`group/opt flex w-full items-center gap-4 rounded-[22px] border px-4 py-4 text-left transition ${isDarkMode ? 'border-slate-700 bg-slate-800/60 hover:bg-slate-800' : 'border-[#f5d4d4] bg-[#fffafa] hover:border-[#ffbdbd] hover:bg-[#fff5f5]'} ${isUploading ? 'cursor-not-allowed opacity-50' : ''}`}
+              >
+                <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow-lg shadow-orange-400/30 ring-1 ring-white/20">
+                  <Upload className="h-5 w-5" />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <p className={`text-sm font-medium ${isDarkMode ? 'text-slate-100' : 'text-gray-900'}`}>
+                    {isUploading ? '上传中...' : '上传新版覆盖'}
+                  </p>
+                  <p className={`mt-0.5 text-xs ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>上传 `.md` 或 `.zip` 文件替换当前内容</p>
+                </div>
+                <ChevronRight className={`h-4 w-4 shrink-0 transition ${isDarkMode ? 'text-slate-500 group-hover/opt:text-slate-300' : 'text-gray-300 group-hover/opt:text-gray-500'}`} />
+              </button>
+            </div>
+
+            <div className={`flex items-center justify-end gap-3 px-6 pb-5 pt-1 ${isDarkMode ? 'text-slate-400' : 'text-[#667085]'}`}>
+              <button
+                type="button"
+                onClick={() => setEditingSkill(null)}
+                className={`rounded-xl px-4 py-2 text-sm transition ${isDarkMode ? 'hover:bg-slate-800 hover:text-slate-200' : 'hover:bg-[#fff3f3] hover:text-[#ef4444]'}`}
+              >
+                取消
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="mx-auto max-w-[1360px] px-6 py-8">
+        <section className={`mb-7 ${isDarkMode ? '' : ''}`}>
+          <div className="flex items-start justify-between gap-5">
+            <div>
+              <h1 className={`text-[22px] font-bold tracking-tight ${isDarkMode ? 'text-slate-100' : 'text-[#111827]'}`}>技能工坊</h1>
+              <p className={`mt-2 text-sm ${isDarkMode ? 'text-slate-400' : 'text-[#667085]'}`}>统一管理系统中的技能资产，支持发现、接入、发布与编辑。</p>
+            </div>
+
+            <div className="relative" ref={createMenuRef}>
+              <button
+                type="button"
+                onClick={() => setIsCreateMenuOpen((prev) => !prev)}
+                className="inline-flex h-11 items-center gap-2 rounded-xl bg-[#ea2d2d] px-5 text-sm font-medium text-white shadow-[0_10px_20px_-12px_rgba(234,45,45,0.7)] transition hover:bg-[#d92626]"
+              >
+                <Plus className="h-4 w-4" />
+                新建技能体
+              </button>
+
+              {isCreateMenuOpen && (
+                <div className={`absolute right-0 top-[calc(100%+10px)] z-20 w-60 rounded-2xl border py-2 shadow-xl ${isDarkMode ? 'border-slate-700 bg-slate-900' : 'border-[#f0d6d6] bg-white'}`}>
+                  <button
+                    type="button"
+                    disabled={isCreatingSkillThread}
+                    onClick={() => void handleCreateSkillByAgent()}
+                    className={`w-full px-4 py-3 text-left transition ${isDarkMode ? 'hover:bg-slate-800' : 'hover:bg-[#fff6f6]'} ${isCreatingSkillThread ? 'cursor-not-allowed opacity-50' : ''}`}
+                  >
+                    <p className={`text-sm font-medium ${isDarkMode ? 'text-slate-100' : 'text-gray-900'}`}>{isCreatingSkillThread ? '创建中...' : '通过 Agent 构建'}</p>
+                    <p className={`mt-1 text-xs ${isDarkMode ? 'text-slate-400' : 'text-[#667085]'}`}>通过对话构建和训练 AI 技能</p>
+                  </button>
+
+                  <input
+                    ref={createUploadInputRef}
+                    type="file"
+                    accept=".md,.zip"
+                    className="hidden"
+                    onChange={(event) => {
+                      const file = event.target.files?.[0];
+                      if (file) void handleCreateSkillByUpload(file);
+                    }}
+                  />
+                  <button
+                    type="button"
+                    disabled={isCreatingByUpload}
+                    onClick={() => createUploadInputRef.current?.click()}
+                    className={`w-full px-4 py-3 text-left transition ${isDarkMode ? 'hover:bg-slate-800' : 'hover:bg-[#fff6f6]'} ${isCreatingByUpload ? 'cursor-not-allowed opacity-50' : ''}`}
+                  >
+                    <p className={`text-sm font-medium ${isDarkMode ? 'text-slate-100' : 'text-gray-900'}`}>{isCreatingByUpload ? '上传中...' : '上传技能文件'}</p>
+                    <p className={`mt-1 text-xs ${isDarkMode ? 'text-slate-400' : 'text-[#667085]'}`}>导入 `.md` 或 `.zip` 文件</p>
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        </section>
+
+        <section className={`mb-8 rounded-[28px] border px-6 py-6 ${isDarkMode ? 'border-slate-800 bg-slate-900/65' : 'border-[#f5d4d4] bg-white'}`}>
+          <div className="flex flex-col gap-5">
+            <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
+              <div className={`flex min-w-0 flex-1 items-center gap-3 rounded-2xl border px-4 py-3 ${isDarkMode ? 'border-slate-700 bg-slate-950/50' : 'border-[#f3b6b6] bg-white'}`}>
+                <Search className={`h-4 w-4 ${isDarkMode ? 'text-slate-400' : 'text-[#ff6b6b]'}`} />
+                <input
+                  type="text"
+                  placeholder="搜索技能名称..."
+                  value={searchTerm}
+                  onChange={(event) => setSearchTerm(event.target.value)}
+                  className={`min-w-0 flex-1 bg-transparent text-sm outline-none ${isDarkMode ? 'text-slate-100 placeholder:text-slate-500' : 'text-gray-800 placeholder:text-[#9ca3af]'}`}
+                />
+              </div>
+
+              <div className="flex items-center gap-3">
+                <div className={`inline-flex rounded-2xl border p-1 ${isDarkMode ? 'border-slate-700 bg-slate-950/50' : 'border-[#f3b6b6] bg-white'}`}>
+                  <button
+                    type="button"
+                    onClick={() => setSelectedFilter('all')}
+                    className={`rounded-xl px-4 py-2 text-sm font-medium transition ${selectedFilter === 'all' ? 'bg-[#fff1f1] text-[#ef4444]' : isDarkMode ? 'text-slate-300 hover:bg-slate-800' : 'text-[#475467] hover:bg-[#f9fafb]'}`}
+                  >
+                    全部类型
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setSelectedFilter('mine')}
+                    className={`rounded-xl px-4 py-2 text-sm font-medium transition ${selectedFilter === 'mine' ? 'bg-[#fff1f1] text-[#ef4444]' : isDarkMode ? 'text-slate-300 hover:bg-slate-800' : 'text-[#475467] hover:bg-[#f9fafb]'}`}
+                  >
+                    我的技能
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {/* <div className="flex flex-wrap items-center gap-3">
+              <span className={`text-sm ${isDarkMode ? 'text-slate-400' : 'text-[#475467]'}`}>按类型筛选：</span>
+              {categoryOrder.slice(1).map((category) => {
+                const active = selectedCategory === category;
+                return (
+                  <button
+                    key={category}
+                    type="button"
+                    onClick={() => setSelectedCategory(active ? 'all' : category)}
+                    className={`rounded-full border px-4 py-2 text-sm transition ${
+                      active
+                        ? 'border-[#ffb5b5] bg-[#fff5f5] text-[#ef4444]'
+                        : isDarkMode
+                          ? 'border-slate-700 bg-slate-900/40 text-slate-300 hover:border-slate-600'
+                          : 'border-[#f3d0d0] bg-white text-[#667085] hover:border-[#ffcccc] hover:text-[#ef4444]'
+                    }`}
+                  >
+                    {CATEGORY_LABELS[category]}
+                  </button>
+                );
+              })}
+            </div> */}
+          </div>
+        </section>
+
+        <section>
+          {loading ? (
+            <div className={`flex items-center justify-center rounded-[28px] border py-20 text-sm ${isDarkMode ? 'border-slate-800 bg-slate-900/60 text-slate-300' : 'border-[#f5d4d4] bg-white text-[#667085]'}`}>
+              正在加载技能...
+            </div>
+          ) : error ? (
+            <div className={`flex flex-col items-center justify-center rounded-[28px] border px-4 py-20 text-center ${isDarkMode ? 'border-slate-800 bg-slate-900/60' : 'border-[#f5d4d4] bg-white'}`}>
+              <h3 className={`mb-2 text-lg font-semibold ${isDarkMode ? 'text-slate-100' : 'text-gray-900'}`}>加载失败</h3>
+              <p className={`text-sm ${isDarkMode ? 'text-slate-400' : 'text-[#667085]'}`}>{error}</p>
+            </div>
+          ) : filteredSkills.length === 0 ? (
+            <div className={`flex flex-col items-center justify-center rounded-[28px] border px-4 py-20 text-center ${isDarkMode ? 'border-slate-800 bg-slate-900/60' : 'border-[#f5d4d4] bg-white'}`}>
+              <div className={`mb-4 flex h-12 w-12 items-center justify-center rounded-2xl ${isDarkMode ? 'bg-slate-800 text-slate-400' : 'bg-[#fff1f1] text-[#ff6b6b]'}`}>
+                <Search className="h-6 w-6" />
+              </div>
+              <h3 className={`mb-2 text-lg font-semibold ${isDarkMode ? 'text-slate-100' : 'text-gray-900'}`}>未找到匹配的技能</h3>
+              <p className={`text-sm ${isDarkMode ? 'text-slate-400' : 'text-[#667085]'}`}>尝试调整搜索词或切换筛选条件。</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+              {filteredSkills.map((skill) => {
+                const avatar = getAvatarStyle(skill.id);
+                const AvatarIcon = avatar.Icon;
+                const categoryLabel = CATEGORY_LABELS[skill.category as CategoryKey] ?? '流程类';
+
+                return (
+                  <article
+                    key={skill.id}
+                    className={`group relative rounded-[22px] border px-5 py-5 transition-all duration-200 ${
+                      isDarkMode
+                        ? 'border-slate-800 bg-slate-900/65 hover:border-slate-700 hover:shadow-xl hover:shadow-black/20'
+                        : 'border-[#f5d4d4] bg-white hover:border-[#ffbdbd] hover:shadow-[0_16px_40px_-26px_rgba(239,68,68,0.35)]'
+                    }`}
+                  >
+
+                    {!skill.isMine && selectedFilter === 'all' && (
+                      <div className="absolute right-4 top-4 z-20 opacity-0 transition-opacity group-hover:opacity-100">
+                        <button
+                          type="button"
+                          disabled={addingSkillId === skill.id}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            void handleAddOfficialSkill(skill.id);
+                          }}
+                          className={`flex items-center justify-center rounded-lg bg-emerald-500 text-white shadow-sm transition hover:bg-emerald-600 ${addingSkillId === skill.id ? 'cursor-not-allowed opacity-50' : ''}`}
+                        >
+                          <Plus className="h-4 w-4" />
+                        </button>
+                      </div>
+                    )}
+
+                    {skill.isMine && (
+                      <div className="absolute right-4 top-4 z-20" ref={openCardMenuId === skill.id ? cardMenuRef : null}>
+                        <button
+                          type="button"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            setOpenCardMenuId((prev) => (prev === skill.id ? null : skill.id));
+                          }}
+                          className={`flex items-center justify-center rounded-lg transition ${isDarkMode ? 'text-slate-400 hover:bg-slate-800 hover:text-slate-100' : 'text-gray-400 hover:bg-gray-100 hover:text-gray-700'}`}
+                        >
+                          <MoreVertical className="h-4 w-4" />
+                        </button>
+
+                        {openCardMenuId === skill.id && (
+                          <div className={`absolute right-0 top-[calc(100%+6px)] z-30 w-40 rounded-2xl border py-1 shadow-xl ${isDarkMode ? 'border-slate-700 bg-slate-900' : 'border-[#f0d6d6] bg-white'}`}>
+                            <button
+                              type="button"
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                void handlePublishSkill(skill.id);
+                              }}
+                              className={`flex w-full items-center gap-2 px-3 py-2 text-sm transition ${isDarkMode ? 'text-emerald-400 hover:bg-slate-800' : 'text-emerald-600 hover:bg-[#fff6f6]'}`}
+                            >
+                              <Globe className="h-4 w-4 shrink-0" />
+                              发布到全部
+                            </button>
+                            <button
+                              type="button"
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                handleEditSkill(skill.id);
+                              }}
+                              className={`flex w-full items-center gap-2 px-3 py-2 text-sm transition ${isDarkMode ? 'text-slate-300 hover:bg-slate-800' : 'text-amber-600 hover:bg-[#fff6f6]'}`}
+                            >
+                              <Edit className="h-4 w-4 shrink-0" />
+                              编辑
+                            </button>
+                            <button
+                              type="button"
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                void handleDeleteSkill(skill.id);
+                              }}
+                              className={`flex w-full items-center gap-2 px-3 py-2 text-sm transition ${isDarkMode ? 'text-rose-400 hover:bg-slate-800' : 'text-rose-500 hover:bg-[#fff6f6]'}`}
+                            >
+                              <Trash2 className="h-4 w-4 shrink-0" />
+                              删除
+                            </button>
+                          </div>
+                        )}
+                      </div>
+                    )}
+
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="flex min-w-0 items-start gap-3">
+                        <div className={`relative flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br ${avatar.wrapper} shadow-[0_18px_32px_-22px_rgba(15,23,42,0.35)] ${avatar.glow} ring-1 ${avatar.ring}`}>
+                          <div className={`absolute inset-0 rounded-2xl ${avatar.orb}`} />
+                          <AvatarIcon className="relative z-10 h-5 w-5" />
+                        </div>
+
+                        <div className="min-w-0">
+                          <div className="flex flex-wrap items-center gap-2">
+                            <h3 className={`text-[17px] font-semibold ${skill.isMine ? 'text-[#111827]' : isDarkMode ? 'text-slate-100' : 'text-[#111827]'}`}>{skill.name}</h3>
+                            <span className="inline-flex items-center rounded-full bg-[#fff2f2] px-2.5 py-1 text-xs font-medium text-[#ef4444]">
+                              { skill.isMine ? '我的' : '官方' }
+                            </span>
+                          </div>
+                          <p className={`mt-1 line-clamp-3 text-sm ${isDarkMode ? 'text-slate-400' : 'text-[#667085]'}`}>{skill.description}</p>
+                        </div>
+                      </div>
+                    </div>
+                  </article>
+                );
+              })}
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/web-code/components/agent/agentResponseParser.ts b/web-code/components/agent/agentResponseParser.ts
new file mode 100644
index 00000000..bb1a5088
--- /dev/null
+++ b/web-code/components/agent/agentResponseParser.ts
@@ -0,0 +1,322 @@
+export interface AgentStepItem {
+  title: string;
+  content: string;
+}
+
+export interface AgentParsed {
+  steps: AgentStepItem[];
+  thinkingMarkdown: string;
+  answerMarkdown: string;
+  thinkingComplete: boolean;
+}
+
+const STEP_RE = /<step\s+title="([^"]+)">([\s\S]*?)<\/step>/g;
+const ANSWER_RE = /<answer>([\s\S]*?)<\/answer>/;
+const THINKING_COMMENT_RE = /<!--\s*thinking:\s*([\s\S]*?)\s*-->/i;
+const WAITING_PREFIX = '仍在等待模型首个 token...';
+
+const stripCodeFence = (raw: string): string => {
+  const trimmed = raw.trim();
+  const match = /```(?:json)?\s*([\s\S]*?)```/i.exec(trimmed);
+  if (match) return match[1].trim();
+  return trimmed.replace(/^```(?:json)?\s*/i, '').trim();
+};
+
+const stripThinkTags = (
+  text: string,
+): { remainder: string; thinkBlock: string; closed: boolean } => {
+  const start = text.indexOf('<think>');
+  if (start === -1) return { remainder: text, thinkBlock: '', closed: false };
+  const after = text.slice(start + '<think>'.length);
+  const endIdx = after.indexOf('</think>');
+  if (endIdx === -1) {
+    return {
+      remainder: text.slice(0, start),
+      thinkBlock: after,
+      closed: false,
+    };
+  }
+  return {
+    remainder: text.slice(0, start) + after.slice(endIdx + '</think>'.length),
+    thinkBlock: after.slice(0, endIdx),
+    closed: true,
+  };
+};
+
+const mergeStep = (steps: AgentStepItem[], nextStep: AgentStepItem) => {
+  const existingIndex = steps.findIndex((step) => step.title === nextStep.title);
+  if (existingIndex === -1) {
+    steps.push(nextStep);
+    return;
+  }
+
+  const existing = steps[existingIndex];
+  const nextIsWaiting = nextStep.content.startsWith(WAITING_PREFIX);
+  const existingLines = existing.content
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+  const stableLines = existingLines.filter((line) => !line.startsWith(WAITING_PREFIX));
+
+  if (nextIsWaiting) {
+    const mergedLines = stableLines.length > 0 ? [...stableLines, nextStep.content] : [nextStep.content];
+    steps[existingIndex] = {
+      ...existing,
+      content: mergedLines.join('\n'),
+    };
+    return;
+  }
+
+  const normalizedLines = stableLines.includes(nextStep.content)
+    ? stableLines
+    : [...stableLines, nextStep.content];
+  steps[existingIndex] = {
+    ...existing,
+    content: normalizedLines.join('\n'),
+  };
+};
+
+const extractSteps = (text: string): { steps: AgentStepItem[]; remainder: string } => {
+  const steps: AgentStepItem[] = [];
+  const remainder = text.replace(STEP_RE, (_, title: string, content: string) => {
+    mergeStep(steps, { title: title.trim(), content: content.trim() });
+    return '';
+  });
+  return { steps, remainder };
+};
+
+const extractTaggedSection = (
+  text: string,
+  re: RegExp,
+): { value: string; remainder: string } => {
+  const match = re.exec(text);
+  if (!match) return { value: '', remainder: text };
+  return {
+    value: match[1].trim(),
+    remainder: text.replace(match[0], '').trim(),
+  };
+};
+
+const extractJsonStringField = (
+  text: string,
+  field: string,
+): { value: string; complete: boolean; matched: boolean } => {
+  const re = new RegExp(`"${field}"\\s*:\\s*"`);
+  const match = re.exec(text);
+  if (!match) return { value: '', complete: false, matched: false };
+  let i = match.index + match[0].length;
+  let value = '';
+  while (i < text.length) {
+    const ch = text[i];
+    if (ch === '\\') {
+      if (i + 1 >= text.length) return { value, complete: false, matched: true };
+      const next = text[i + 1];
+      switch (next) {
+        case 'n':
+          value += '\n';
+          break;
+        case 't':
+          value += '\t';
+          break;
+        case 'r':
+          value += '\r';
+          break;
+        case '"':
+          value += '"';
+          break;
+        case '\\':
+          value += '\\';
+          break;
+        case '/':
+          value += '/';
+          break;
+        case 'b':
+          value += '\b';
+          break;
+        case 'f':
+          value += '\f';
+          break;
+        case 'u':
+          if (i + 5 < text.length) {
+            const hex = text.slice(i + 2, i + 6);
+            value += String.fromCharCode(parseInt(hex, 16));
+            i += 6;
+            continue;
+          }
+          return { value, complete: false, matched: true };
+        default:
+          value += next;
+      }
+      i += 2;
+    } else if (ch === '"') {
+      return { value, complete: true, matched: true };
+    } else {
+      value += ch;
+      i++;
+    }
+  }
+  return { value, complete: false, matched: true };
+};
+
+const extractItems = (text: string): unknown[] => {
+  const re = /"items"\s*:\s*\[/;
+  const match = re.exec(text);
+  if (!match) return [];
+  let i = match.index + match[0].length;
+  const out: unknown[] = [];
+  while (i < text.length) {
+    while (i < text.length && /[\s,]/.test(text[i])) i++;
+    if (i >= text.length) break;
+    if (text[i] === ']') break;
+    if (text[i] !== '{') {
+      i++;
+      continue;
+    }
+    let depth = 0;
+    let inStr = false;
+    let escape = false;
+    let j = i;
+    for (; j < text.length; j++) {
+      const c = text[j];
+      if (escape) {
+        escape = false;
+        continue;
+      }
+      if (inStr) {
+        if (c === '\\') escape = true;
+        else if (c === '"') inStr = false;
+      } else if (c === '"') inStr = true;
+      else if (c === '{') depth++;
+      else if (c === '}') {
+        depth--;
+        if (depth === 0) {
+          j++;
+          break;
+        }
+      }
+    }
+    if (depth !== 0) break;
+    try {
+      out.push(JSON.parse(text.slice(i, j)));
+    } catch {
+      // ignore partial item
+    }
+    i = j;
+  }
+  return out;
+};
+
+const itemToMarkdown = (item: unknown, idx: number): string => {
+  if (item == null) return `${idx + 1}.`;
+  if (typeof item !== 'object') return `${idx + 1}. ${String(item)}`;
+  const o = item as Record<string, unknown>;
+  const title =
+    (typeof o.title === 'string' && o.title) ||
+    (typeof o.expected_behavior === 'string' && o.expected_behavior) ||
+    (typeof o.name === 'string' && o.name) ||
+    `条目 ${idx + 1}`;
+  const body =
+    (typeof o.content === 'string' && o.content) ||
+    (typeof o.reason === 'string' && o.reason) ||
+    '';
+
+  const lines: string[] = [`**${idx + 1}. ${title}**`];
+  if (body) lines.push(body);
+
+  if (typeof o.expected_behavior === 'string' && typeof o.driving_factor === 'string') {
+    if (!o.title) {
+      lines.length = 0;
+      lines.push(`**${idx + 1}. ${o.expected_behavior}**`);
+    }
+    lines.push(`_驱动因素_：${o.driving_factor}`);
+  }
+
+  if (Array.isArray(o.references) && o.references.length > 0) {
+    const refs = (o.references as unknown[])
+      .filter((x) => typeof x === 'string' || typeof x === 'number')
+      .map((x) => `\`${String(x)}\``)
+      .join(' ');
+    if (refs) lines.push(`引用：${refs}`);
+  }
+
+  return lines.join('\n\n');
+};
+
+const itemsToMarkdown = (items: unknown[]): string =>
+  items.map((item, idx) => itemToMarkdown(item, idx)).join('\n\n---\n\n');
+
+export const parseAgentResponse = (raw: string): AgentParsed => {
+  if (!raw) {
+    return {
+      steps: [],
+      thinkingMarkdown: '',
+      answerMarkdown: '',
+      thinkingComplete: false,
+    };
+  }
+
+  const stripped = stripThinkTags(raw);
+  const stepsResult = extractSteps(stripped.remainder);
+  let body = stripCodeFence(stepsResult.remainder);
+  const extraThinking = stripped.thinkBlock;
+  let thinkingComplete = stripped.closed;
+
+  const answerSection = extractTaggedSection(body, ANSWER_RE);
+  body = answerSection.remainder;
+  const thinkingCommentSection = extractTaggedSection(body, THINKING_COMMENT_RE);
+  body = thinkingCommentSection.remainder;
+
+  if (body) {
+    const start = body.indexOf('{');
+    if (start !== -1) body = body.slice(start);
+  }
+
+  if (body) {
+    try {
+      const obj = JSON.parse(body) as Record<string, unknown>;
+      if (obj && typeof obj === 'object') {
+        const thinking = typeof obj.thinking === 'string' ? obj.thinking : '';
+        const items = Array.isArray(obj.items) ? (obj.items as unknown[]) : [];
+        const answerMarkdown = items.length > 0 ? itemsToMarkdown(items) : answerSection.value;
+        return {
+          steps: stepsResult.steps,
+          thinkingMarkdown: [extraThinking, thinking, thinkingCommentSection.value]
+            .filter(Boolean)
+            .join('\n\n'),
+          answerMarkdown,
+          thinkingComplete: true,
+        };
+      }
+    } catch {
+      // fall through
+    }
+  }
+
+  const thinkingField = extractJsonStringField(body, 'thinking');
+  const items = extractItems(body);
+
+  if (thinkingField.complete) thinkingComplete = true;
+
+  let fallbackAnswer = answerSection.value || body.trim();
+  if (items.length > 0) {
+    fallbackAnswer = itemsToMarkdown(items);
+  }
+
+  if (!thinkingField.matched && items.length === 0 && !extraThinking) {
+    return {
+      steps: stepsResult.steps,
+      thinkingMarkdown: '',
+      answerMarkdown: fallbackAnswer,
+      thinkingComplete: false,
+    };
+  }
+
+  return {
+    steps: stepsResult.steps,
+    thinkingMarkdown: [extraThinking, thinkingField.value, thinkingCommentSection.value]
+      .filter(Boolean)
+      .join('\n\n'),
+    answerMarkdown: fallbackAnswer,
+    thinkingComplete,
+  };
+};
diff --git a/web-code/components/agent/doc.md b/web-code/components/agent/doc.md
new file mode 100644
index 00000000..d0eb626c
--- /dev/null
+++ b/web-code/components/agent/doc.md
@@ -0,0 +1,736 @@
+# Agent 组件开发问答（Q&A）
+
+> 目录范围：`src/components/agent`
+>
+> 涵盖文件：
+> - `AgentExpertCenterPage.tsx`
+> - `AgentExpertEditPage.tsx`
+> - `AgentChatPage.tsx`
+> - `SkillCreatorPage.tsx`
+> - `SkillsWorkshop.tsx`
+> - `SkillCreatorThreadSidebar.tsx`
+> - `AgentConversationList.tsx`
+> - `SkillCreatorConversationItem.tsx`
+> - `ChatInputComposer.tsx`
+> - `AgentChatPage.css`
+
+---
+
+## Q1：这个目录整体是干什么的？
+
+**A：这是“专家 Agent + 技能工坊 + 技能创建对话”的前端 UI 组件集合。**
+
+- `AgentExpertCenterPage`：专家列表入口（我的专家/发布专家）。
+- `AgentExpertEditPage`：专家配置编辑页（左侧对话预览 + 右侧配置）。
+- `AgentChatPage`：某个专家的真实聊天页（含线程、文件上传、流式回答）。
+- `SkillsWorkshop`：技能资产中心（搜索/筛选/接入/发布/删除/编辑）。
+- `SkillCreatorPage`：技能创建/改写专用对话页（支持文件树预览和保存弹窗）。
+- `SkillCreatorThreadSidebar`：复用的会话侧边栏（获取线程、新建、删除、切换）。
+- `AgentConversationList` + `SkillCreatorConversationItem`：统一消息列表与消息卡片渲染。
+- `ChatInputComposer`：统一输入框（发送/停止/上传）。
+- `AgentChatPage.css`：`AgentChatPage` 专用动画和滚动条样式。
+
+---
+
+## Q2：核心共享数据模型有哪些？
+
+**A：对话层主要围绕 `ConversationMessage`。**
+
+- 定义位置：`AgentConversationList.tsx`
+- 字段：
+  - `id`: 消息唯一标识。
+  - `role`: `'user' | 'assistant'`
+  - `content`: 文本内容（markdown 渲染）。
+  - `steps`: 思考步骤列表（数据来自 `data-thinking-step`）。
+  - `thinkings`: 推理内容列表（来自 `reasoning-*` 事件）。
+  - `toolCalls`: 工具调用（输入输出）列表。
+
+**A：文件树使用 `FileNode`。**
+
+- 在 `AgentChatPage`、`SkillCreatorPage` 内部定义并使用。
+- 字段：`name/path/type/size/extension/children`。
+
+**A：线程侧边栏使用 `SkillCreatorThread`。**
+
+- 定义位置：`SkillCreatorThreadSidebar.tsx`
+- 字段：`id/title/archived/expert_agent_id/created_at/updated_at`。
+
+---
+
+## Q3：整个目录的“数据流主干”怎么走？
+
+**A：可以看成 3 条主链路。**
+
+### 1) 专家链路（Center -> Edit -> Chat）
+
+1. `AgentExpertCenterPage` 拉专家列表（我的/发布）。
+2. 点击“编辑”跳 `AgentExpertEditPage`，加载专家详情 + 工具 + 技能绑定状态。
+3. 点击“进行对话”跳 `AgentChatPage`，加载该专家详情和对应会话消息。
+
+### 2) 技能链路（Workshop -> SkillCreator）
+
+1. `SkillsWorkshop` 拉技能列表（official/mine），本地映射成 UI `Skill`。
+2. 新建技能：创建会话后跳 `SkillCreatorPage?id=threadId`。
+3. AI 辅助编辑已有技能：先创建线程，再 copy skill 到线程，再跳转 `SkillCreatorPage`。
+
+### 3) 对话链路（输入 -> SSE -> UI -> 持久化）
+
+1. `ChatInputComposer` 触发 `onSend`。
+2. 页面组件（`AgentChatPage` 或 `SkillCreatorPage`）执行 `handleSendMessage`。
+3. 先写入用户消息 + assistant 占位消息。
+4. 调流式接口读取 SSE：
+   - `data-thinking-step` -> 更新 `steps`
+   - `reasoning-start/delta/end` -> 更新 `thinkings`
+   - `tool-input-available/tool-output-available` -> 更新 `toolCalls`
+   - `text-delta` -> 追加 `content`
+5. 完成后将 assistant 结果再次 POST 到消息接口持久化。
+
+---
+
+## Q4：`AgentExpertCenterPage` 组件是干什么的？
+
+**A：专家资产“总览入口”，负责展示列表和基础操作入口。**
+
+### 组件职责
+
+- 展示“我的专家”和“发布专家”两种视图。
+- 打开专家详情弹窗（支持发布状态切换）。
+- 提供“编辑”和“进行对话”跳转入口。
+
+### 数据来源与接口
+
+- 列表查询：
+  - `POST /api/v1/expert-agents/list`（按 `is_draft`）
+  - 我的专家场景还会额外 `GET /api/v1/expert-agents` 做合并去重。
+- 状态切换：
+  - `PATCH /api/v1/expert-agents/{id}`（更新 `is_draft`）
+
+### 数据流
+
+- `activeTab` 改变 -> `fetchExpertList` 触发 -> 更新 `agentList`。
+- `agentList` -> `cards(useMemo)` -> 渲染卡片。
+- 卡片按钮：
+  - 编辑 -> `navigate('/qa-center/agent-expert-edit?id=...')`
+  - 对话 -> `navigate('/qa-center/agent-chat?id=...')`
+
+### 维护注意
+
+- “创建专家”按钮目前是 UI 壳子，未接创建接口。
+- “删除”按钮当前仅 `console.log`，未接真实删除逻辑。
+
+---
+
+## Q5：`AgentExpertEditPage` 组件是干什么的？
+
+**A：专家配置编辑工作台，同时内置一个“测试对话区”。**
+
+### 组件职责
+
+- 左侧：和该专家进行流式对话（非真实聊天线程，使用 no_real 线程）。
+- 右侧：编辑专家基础配置（名称、模型、描述、系统提示词）。
+- 管理工具绑定、技能绑定（弹窗操作）。
+
+### 关键状态
+
+- 对话相关：`messages/inputValue/threadId/isStreaming`
+- 配置相关：`formValues`
+- 工具相关：`toolOptions/selectedTools/pendingTools/boundToolIdMap`
+- 技能相关：`skillOptions/selectedSkills/boundSkillMap/skillKeyword`
+
+### 主要接口
+
+- 专家详情：`GET /api/v1/expert-agents/{agentId}`
+- 保存专家：`PUT /api/v1/expert-agents/{agentId}`
+- 绑定工具：
+  - 查询：`GET /api/v1/expert-agents/{agentId}/tools`
+  - 添加：`POST /api/v1/expert-agents/{agentId}/tools`
+  - 删除：`DELETE /api/v1/expert-agents/{agentId}/tools/{toolId}`
+- 绑定技能：
+  - 查询：`GET /api/v1/expert-agents/{agentId}/skills`
+  - 添加：`POST /api/v1/expert-agents/{agentId}/skills`
+  - 删除：`DELETE /api/v1/expert-agents/{agentId}/skills/{skillId}`
+- 测试对话：
+  - 线程：`GET /api/v1/expert-agent-chat/threads/no_real/{agentId}`
+  - 用户消息：`POST /api/v1/expert-agent-chat/messages`
+  - SSE：`POST /api/v1/expert-agent-chat/run/stream/help_expert`
+
+### 数据流（对话）
+
+- 用户发送 -> append user msg -> 保证 threadId -> 保存用户消息 -> append assistant 占位 -> SSE 增量更新。
+
+### 维护注意
+
+- 右侧 `preview` 区底部 `ChatInputComposer` 是只读展示，不参与真实请求。
+- 工具与技能弹窗是“前端状态 + 后端同步”双层状态，调试时优先检查 refresh 查询是否成功。
+
+---
+
+## Q6：`AgentChatPage` 组件是干什么的？
+
+**A：专家“真实聊天页”，并带线程管理、文件上传和文件预览。**
+
+### 组件职责
+
+- 根据 URL `id` 读取专家详情。
+- 管理当前线程（localStorage 持久化）。
+- 获取历史消息并转换为统一消息结构。
+- 流式发送消息并渲染思考过程。
+- 管理会话文件（上传、树形结构、预览、侧栏缩放）。
+
+### 关键状态
+
+- 会话：`currentThreadId/messages/inputValue/isStreaming/isLoading`
+- UI：`isThreadSidebarOpen/autoScrollEnabled/showScrollButton`
+- 文件：`fileList/fileListThreadId/isFileSidebarOpen/expandedPaths/selectedFile/filePreview*`
+
+### 主要接口
+
+- 专家详情：`GET /api/v1/expert-agents/{agentId}`
+- 会话消息：
+  - 历史：`GET /api/v1/expert-agent-chat/threads/{id}/messages`
+  - 保存用户：`POST /api/v1/expert-agent-chat/messages`
+  - SSE：`POST /api/v1/expert-agent-chat/run/stream`
+  - 保存助手：`POST /api/v1/expert-agent-chat/messages`
+- 文件：
+  - 列表：`GET /api/v1/expert-agent-chat/threads/{id}/files/all`
+  - 上传：`POST /api/v1/expert-agent-chat/threads/{id}/files/upload`
+  - 预览：`GET /api/v1/expert-agent-chat/threads/{id}/files/preview?path=...`
+
+### 关键行为细节
+
+- **发送即出现 assistant 占位**：点击发送后立即插入 assistant 空消息，保证用户立刻看到“连接中”态。
+- **连接中显示规则**：由 `AgentConversationList` 判断“最后一条 assistant 且还没有任何生成内容”才显示连接状态。
+- **失败回滚**：发送或流式失败时移除该 assistant 占位，避免残留空卡片。
+- **停止流式**：`AbortController` 中断请求，并清理 loading 态字段。
+
+### 维护注意
+
+- `threadStorageKey` 与 `agentId` 强绑定，切换专家会切换独立 thread 记忆。
+- `normalizeHistoryContent` 是历史消息兼容核心，后端 content 结构变更时先改这里。
+
+---
+
+## Q7：`SkillCreatorPage` 组件是干什么的？
+
+**A：技能创建/重构专用对话页，结构上是 `AgentChatPage` 的“技能场景定制版”。**
+
+### 组件职责
+
+- 从 query/localStorage 同步当前线程 ID。
+- 加载技能会话历史与会话文件。
+- 走技能专属流式接口输出思考步骤/推理/tool call/文本。
+- 提供“保存技能”弹窗（当前主要是 UI + 本地状态）。
+
+### 与 `AgentChatPage` 的主要差异
+
+- 线程 ID 同步到 URL（`useSearchParams`）。
+- 有独立 `isConnecting` 状态，用于连接中阶段展示。
+- 流式接口是：`POST /api/v1/expert-agent-chat/skills-agent`
+- 页面内注入了 dot/shimmer 动画样式（供消息连接中态使用）。
+
+### 主要接口
+
+- 会话消息：`GET /threads/{id}/messages`
+- 流式：`POST /skills-agent`
+- 保存 assistant：`POST /messages`
+- 文件：`GET all` / `POST upload` / `GET preview`
+
+### 数据流
+
+- 发消息 -> append 用户 + assistant 占位 -> `isConnecting=true` -> 收到首个流块后 `isConnecting=false` -> 增量刷新 assistant -> 持久化。
+
+### 维护注意
+
+- 保存技能按钮目前仅 `console.log` 输出技能名和描述，未接正式后端保存接口。
+
+---
+
+## Q8：`SkillsWorkshop` 组件是干什么的？
+
+**A：技能资产管理页（发现、筛选、接入、发布、删除、进入编辑）。**
+
+### 组件职责
+
+- 拉取 `official` 与 `mine` 技能，映射成统一 UI 结构。
+- 支持搜索、类型筛选、分类筛选。
+- 支持官方技能接入到“我的技能”。
+- 支持发布、删除、编辑（编辑弹窗支持 AI 编辑和上传覆盖）。
+- 支持“新建技能体”：Agent 对话创建 / 上传文件创建。
+
+### 主要接口
+
+- 列表：`GET /api/v1/skills?type=official|mine`
+- 发布：`POST /api/v1/expert-agents/skills/publish`
+- 删除我的技能：`DELETE /api/v1/skills/mine/{skillId}`
+- 上传覆盖：`PUT /api/v1/skills/{skillId}/upload`
+- 接入官方技能：`POST /api/v1/skills/mine/add`
+- 上传创建：`POST /api/v1/skills/upload`
+- Agent 创建线程：`POST /api/v1/expert-agent-chat/threads`
+- AI 编辑复制技能：`POST /threads/{threadId}/copy-skill/{skillId}`
+
+### 数据流
+
+- filter/search 改变 -> `useEffect` 重新拉取技能 -> 本地去重并缓存到 `skills`。
+- 卡片编辑 -> `editingSkill` 打开弹窗 -> 选择 AI 编辑时创建线程后跳 `SkillCreatorPage`。
+
+### 维护注意
+
+- `inferCategory` 是关键词规则映射，新增技能类型时可优先扩展该规则。
+- “进入”按钮目前使用 `skill.id` 跳 `skill-creator`，若后端语义改成 threadId 需调整。
+
+---
+
+## Q9：`SkillCreatorThreadSidebar` 组件是干什么的？
+
+**A：会话线程管理的复用侧边栏。**
+
+### 组件职责
+
+- 打开时加载会话列表。
+- 新建会话并自动选中。
+- 删除会话并在当前会话被删时自动回退到其它会话。
+- 支持线程过滤（如仅展示当前专家线程）。
+
+### 输入输出（Props 视角）
+
+- 输入：`authedFetch/currentThreadId/isOpen/isBusy/threadFilter/createThreadPayload...`
+- 输出：
+  - `onThreadSelect(threadId)`
+  - `onClose()`
+
+### 数据流
+
+- `isOpen` 从 false -> true：触发 `refreshThreads`。
+- 新建成功：更新本地列表并触发 `onThreadSelect`。
+- 删除成功：本地移除；若删的是当前线程，自动选择 fallback。
+
+### 维护注意
+
+- `createThreadPayload` 是高复用扩展点，场景页可注入 `expert_agent_id/title` 等字段。
+
+---
+
+## Q10：`AgentConversationList` 组件是干什么的？
+
+**A：统一遍历消息并决定“连接中状态”是否显示。**
+
+### 核心逻辑
+
+- 逐条渲染 `SkillCreatorConversationItem`。
+- 只在以下条件满足时给最后一条 assistant 传 `isConnecting=true`：
+  - 页面处于连接/流式阶段；
+  - 当前消息是最后一条 assistant；
+  - 且还没有任何实际生成内容（`content/steps/thinkings/toolCalls` 都为空）。
+
+### 价值
+
+- 将“连接中占位显示时机”从页面组件抽离，统一控制，减少重复判断代码。
+
+---
+
+## Q11：`SkillCreatorConversationItem` 组件是干什么的？
+
+**A：单条消息卡片渲染器（用户消息 + 助手多面板消息）。**
+
+### 渲染结构
+
+- 用户消息：右侧气泡 + user avatar。
+- 助手消息：左侧 avatar + 多段内容：
+  - `StepsSummary`
+  - `ThinkingPanel[]`
+  - `ToolCallPanel[]`
+  - 连接中动画文案（`正在连接技能服务...`）
+  - Markdown 正文
+
+### 数据来源
+
+- 完全由父级传入 `message` 和 `isConnecting` 控制，不直接请求后端。
+
+### 维护注意
+
+- 此组件是所有对话页的统一呈现层；若改动 message schema，要同步更新这里的各面板。
+
+---
+
+## Q12：`ChatInputComposer` 组件是干什么的？
+
+**A：通用输入组件，封装输入、发送/停止、上传文件。**
+
+### 输入输出（Props）
+
+- 输入：`value/disabled/readOnly/isSending/isDarkMode/showUpload/placeholder...`
+- 回调：
+  - `onChange(value)`
+  - `onSend()`
+  - `onStop()`
+  - `onUploadFile(file)`
+
+### 关键交互
+
+- Enter（非 Shift）触发发送（前提：`submitEnabled` 且非 `isSending`）。
+- 发送按钮在发送中切换为停止按钮（`onClick={isSending ? onStop : onSend}`）。
+- 文件上传通过隐藏 `input[type=file]` + 按钮触发。
+
+### 维护注意
+
+- 当前实现里文本框只受 `disabled` 控制，不再因为 `isSending` 禁止输入。
+- 上传按钮仍受 `disabled || !onUploadFile` 控制。
+
+---
+
+## Q13：`AgentChatPage.css` 主要做了什么？
+
+**A：提供 `AgentChatPage` 的辅助样式。**
+
+- `.agent-resizing`：拖拽文件侧栏时全局 cursor/user-select 控制。
+- `.agent-file-tree-scroll` / `.agent-file-preview-scroll`：滚动条样式统一。
+- `.agent-file-markdown-preview`：markdown 首尾边距和图片样式收敛。
+- `.animate-breathing` 等动画类：预留呼吸动效。
+
+---
+
+## Q14：典型业务流程：发送一条消息时，数据如何传输？
+
+**A：以 `AgentChatPage` 为例。**
+
+1. 用户在 `ChatInputComposer` 输入后点击发送。
+2. `handleSendMessage` 校验 `text/threadId/isStreaming`。
+3. 立即写入：
+   - user message
+   - assistant 占位 message（空内容）
+4. 调 `POST /messages` 落用户消息。
+5. 调 `POST /run/stream` 开始 SSE。
+6. 每个 SSE event 增量更新 assistant message：
+   - step -> `steps`
+   - reasoning -> `thinkings`
+   - tool -> `toolCalls`
+   - text -> `content`
+7. 流结束后将聚合结果组装成 `persistedContent`，再 `POST /messages` 落库。
+8. 刷新文件列表（对可能新增输出文件做同步）。
+
+---
+
+## Q15：典型业务流程：从技能工坊进入技能创建页，数据如何传输？
+
+**A：两种入口。**
+
+### 入口 A：新建技能（Agent 构建）
+
+1. `SkillsWorkshop.handleCreateSkillByAgent` 创建线程。
+2. 将 `threadId` 写入 localStorage。
+3. 跳转 `navigate('/qa-center/skill-creator?id=threadId')`。
+4. `SkillCreatorPage` 用 query/localStorage 同步 `currentThreadId`，然后拉消息和文件。
+
+### 入口 B：AI 辅助编辑已有技能
+
+1. 创建线程。
+2. `POST /threads/{threadId}/copy-skill/{skillId}` 把技能内容复制到线程工作区。
+3. 跳转 SkillCreator 页面，后续在线程中对话编辑。
+
+---
+
+## Q16：如果要新增一个“对话页”，建议复用哪些组件？
+
+**A：建议最小复用组合如下。**
+
+- 消息列表：`AgentConversationList`
+- 单消息卡片：`SkillCreatorConversationItem`（自动包含 steps/thinking/tool 等面板）
+- 输入框：`ChatInputComposer`
+- 线程侧边栏：`SkillCreatorThreadSidebar`
+
+**页面层只负责：**
+
+- 状态管理（`messages/input/isStreaming/currentThreadId`）
+- 接口请求（历史 + SSE + 持久化）
+- 事件映射（把后端事件转为 `ConversationMessage` 结构）
+
+---
+
+## Q17：维护时最容易踩坑的点有哪些？
+
+**A：建议优先关注这 8 个点。**
+
+1. **SSE 事件兼容性**：后端 event type 或字段名变化会直接导致 UI 不更新。
+2. **历史内容兼容**：`normalizeHistoryContent` 没跟上 content schema 会出现历史消息空白。
+3. **线程切换中断**：切换线程时要记得 abort 流并清状态，避免串流到新线程。
+4. **占位消息回收**：发送失败/流失败需移除 assistant 占位，避免残留空卡片。
+5. **threadId 语义一致性**：某些页面参数传 skillId/agentId，需避免误当 threadId 使用。
+6. **工具/技能绑定状态双源**：本地状态和后端状态不同步时，优先以 refresh 查询结果为准。
+7. **上传入口 accept 限制**：上传文件类型修改时要同步后端校验和 UI 提示。
+8. **深色主题样式**：该目录深色/浅色分支很多，改样式需双主题回归。
+
+---
+
+## Q18：后续文档扩展建议
+
+**A：当前文档适合开发入门，下一步可补充“接口契约版”。**
+
+- 补完整 SSE event JSON 示例（每种事件一例）。
+- 增加错误码到 UI 提示映射表。
+- 补一份“页面状态机图”（Idle / Connecting / Streaming / Stopped / Error）。
+- 给每个页面补“可测点清单”（单测/联调/回归）。
+
+---
+
+## Q19：能否给一份可联调的“接口契约附录”？
+
+**A：可以，以下按模块整理。**
+
+### 1) 专家模块（Expert）
+
+- 查询专家列表  
+  - `POST /api/v1/expert-agents/list`
+  - 请求体：
+    - `is_draft: boolean`
+  - 响应（数组项）：
+    - `id/name/avatar_url/description/model_name/is_draft/user_id/created_at`
+
+- 查询专家详情  
+  - `GET /api/v1/expert-agents/{agentId}`
+  - 响应关键字段：
+    - `id/name/description/system_prompt/model_name`
+
+- 更新专家配置  
+  - `PUT /api/v1/expert-agents/{agentId}`
+  - 请求体关键字段：
+    - `name`
+    - `description`
+    - `system_prompt`
+    - `model_name`
+    - `avatar_url`（当前传 `null`）
+
+- 切换草稿/发布状态  
+  - `PATCH /api/v1/expert-agents/{agentId}`
+  - 请求体：
+    - `is_draft: boolean`
+
+### 2) 线程与消息模块（Chat Thread + Message）
+
+- 查询线程列表  
+  - `GET /api/v1/expert-agent-chat/threads`
+  - 响应：
+    - `threads: SkillCreatorThread[]`
+    - `archived_threads: SkillCreatorThread[]`
+
+- 新建线程  
+  - `POST /api/v1/expert-agent-chat/threads`
+  - 请求体常见字段：
+    - `title`
+    - `archived`
+    - `is_real_chat`
+    - `expert_agent_id`（专家聊天场景）
+
+- 删除线程  
+  - `DELETE /api/v1/expert-agent-chat/threads/{threadId}`
+
+- 查询线程消息历史  
+  - `GET /api/v1/expert-agent-chat/threads/{threadId}/messages`
+  - 响应消息项关键字段：
+    - `id/thread_id/role/content/created_at`
+
+- 保存消息（用户或助手）  
+  - `POST /api/v1/expert-agent-chat/messages`
+  - 请求体（用户消息）：
+    - `thread_id`
+    - `role: "user"`
+    - `content: { type: "text", text: string }`
+  - 请求体（助手消息）：
+    - `thread_id`
+    - `role: "assistant"`
+    - `content: persistedContent[]`
+
+### 3) 流式回复模块（SSE）
+
+- 专家聊天流式  
+  - `POST /api/v1/expert-agent-chat/run/stream`
+  - 请求体关键字段：
+    - `chat_id`
+    - `expert_agent_id`
+    - `user_query`
+    - `messages`
+
+- 专家编辑页测试流式  
+  - `POST /api/v1/expert-agent-chat/run/stream/help_expert`
+
+- 技能创建流式  
+  - `POST /api/v1/expert-agent-chat/skills-agent`
+  - 请求体关键字段：
+    - `chat_id`
+    - `user_query`
+
+### 4) 文件模块（线程文件）
+
+- 查询线程文件树  
+  - `GET /api/v1/expert-agent-chat/threads/{threadId}/files/all`
+
+- 上传文件  
+  - `POST /api/v1/expert-agent-chat/threads/{threadId}/files/upload`
+  - form-data:
+    - `file`
+
+- 文件预览  
+  - `GET /api/v1/expert-agent-chat/threads/{threadId}/files/preview?path=...`
+  - 兼容响应：
+    - 文本
+    - JSON 字符串
+    - JSON 对象中的 `content`
+
+### 5) 技能模块（Skills）
+
+- 查询技能列表  
+  - `GET /api/v1/skills?type=official|mine|all&keyword=&page=1&page_size=100`
+
+- 发布技能  
+  - `POST /api/v1/expert-agents/skills/publish`
+  - 请求体：
+    - `skill_id`
+
+- 添加官方技能到我的技能  
+  - `POST /api/v1/skills/mine/add`
+  - 请求体：
+    - `official_skill_id`
+
+- 删除我的技能  
+  - `DELETE /api/v1/skills/mine/{skillId}`
+
+- 上传技能文件创建  
+  - `POST /api/v1/skills/upload`
+
+- 上传覆盖已有技能  
+  - `PUT /api/v1/skills/{skillId}/upload`
+
+### 6) 专家绑定工具/技能
+
+- 工具  
+  - 查询：`GET /api/v1/expert-agents/{agentId}/tools`
+  - 绑定：`POST /api/v1/expert-agents/{agentId}/tools`（`tool_name`）
+  - 解绑：`DELETE /api/v1/expert-agents/{agentId}/tools/{toolId}`
+
+- 技能  
+  - 查询：`GET /api/v1/expert-agents/{agentId}/skills`
+  - 绑定：`POST /api/v1/expert-agents/{agentId}/skills`（`skill_id`）
+  - 解绑：`DELETE /api/v1/expert-agents/{agentId}/skills/{skillId}`
+
+---
+
+## Q20：SSE 事件规范可以补全吗？
+
+**A：可以，以下是前端当前实现依赖的事件集合。**
+
+### 1) 事件封包格式
+
+- 每行以 `data: ` 开头
+- 正文为 JSON 字符串
+- 结束标记：`data: [DONE]`
+
+### 2) 前端识别的事件类型
+
+- `data-thinking-step`
+  - 用途：更新执行步骤面板
+  - 关键字段：
+    - `data.id`
+    - `data.title`
+    - `data.status`（`completed` 或其它）
+    - `data.items[]`
+
+- `reasoning-start`
+  - 用途：开始一段思考
+  - 行为：创建新的 thinking 段，记录开始时间
+
+- `reasoning-delta`
+  - 用途：思考内容增量
+  - 关键字段：
+    - `delta`
+
+- `reasoning-end`
+  - 用途：结束当前思考段
+  - 行为：计算该段耗时并写入 `duration`
+
+- `tool-input-available`
+  - 用途：记录工具调用入参
+  - 关键字段：
+    - `toolCallId`
+    - `toolName`
+    - `input`
+
+- `tool-output-available`
+  - 用途：记录工具调用输出
+  - 关键字段：
+    - `toolCallId`
+    - `output`
+
+- `text-delta`
+  - 用途：助手正文 token 增量
+  - 关键字段：
+    - `delta`
+
+### 3) 推荐后端保证
+
+- 同一次回复里的 `toolCallId` 全局唯一。
+- `reasoning-start` 与 `reasoning-end` 成对（允许无 `delta`）。
+- `data-thinking-step` 同一个 `id` 可重复更新状态。
+- `text-delta` 在结束前允许为空片段，但尽量减少空片段。
+
+### 4) 前端容错策略（已实现）
+
+- JSON parse 失败：跳过该行，不中断整流。
+- 未识别 event.type：忽略。
+- `output` 非字符串：尝试 `result` 字段，否则 `JSON.stringify`。
+- `AbortError`：按“用户主动停止”处理，不弹致命错误。
+
+---
+
+## Q21：可以给一份页面级测试清单吗？
+
+**A：可以，以下清单按页面拆分，适合联调和回归。**
+
+### A. `AgentChatPage` 测试清单
+
+- 打开页面后，能加载专家信息（名称、描述）。
+- 未选线程时，空态正确显示；选中线程后历史消息正确渲染。
+- 点击发送后立即出现 assistant 占位卡片，显示连接中状态。
+- 首个有效流式事件到达后，连接中占位消失，转为正常内容增量渲染。
+- 发送失败/流失败时，assistant 占位会被回收，不留空白卡片。
+- 点击停止后，流式中断，按钮状态恢复，后续不再追加内容。
+- 上传文件后文件树刷新；文件预览支持 text/json 两类返回。
+- 切换线程时会中断当前流，且不会把旧线程流内容写到新线程。
+
+### B. `SkillCreatorPage` 测试清单
+
+- URL `id` 与 localStorage 线程 ID 同步正确。
+- 新线程空态和快捷提示按钮显示正常。
+- 发送后 `isConnecting=true`，收到首包后 `isConnecting=false`。
+- steps/thinking/tool/text 四类流式内容都能正确出现。
+- 线程切换、停止流、文件上传/预览路径行为与 `AgentChatPage` 一致。
+- 保存技能弹窗开关正常（当前为 UI 行为）。
+
+### C. `AgentExpertEditPage` 测试清单
+
+- 进入页面后基础信息（name/model/description/system_prompt）能回填。
+- 保存专家配置后接口成功，按钮 loading 状态恢复。
+- 工具弹窗：勾选新增 -> 确认添加 -> 列表刷新一致。
+- 技能弹窗：绑定/解绑/一键绑定后状态与后端一致。
+- 左侧测试对话能正常流式返回，滚动与发送状态正确。
+
+### D. `SkillsWorkshop` 测试清单
+
+- `all`/`mine` 切换结果正确，搜索词可生效。
+- 分类筛选（writing/analysis/decision/validation/workflow）正确过滤。
+- 官方技能“+”接入后卡片状态转“已接入”。
+- 我的技能菜单中的发布/删除操作正确执行。
+- 编辑弹窗中 AI 编辑路径可成功创建线程并跳转 SkillCreator。
+- 上传创建、上传覆盖两条路径成功后状态正确恢复（含 input 清空）。
+
+### E. `AgentExpertCenterPage` 测试清单
+
+- mine/published 标签切换后列表正确变化。
+- mine 模式会按当前用户过滤，且与全量接口合并去重后正确展示。
+- 详情弹窗中的发布开关可切换并刷新列表。
+- 编辑、对话跳转路径参数正确。
+
+### F. 主题与可用性回归
+
+- 深色/浅色主题下对话气泡、按钮、边框、hover 都可读。
+- 长会话场景滚动性能可接受，自动滚动按钮行为符合预期。
+- 键盘发送（Enter）与换行（Shift+Enter）行为正确。
+
diff --git a/web-code/components/angentchat/AgentCardList.tsx b/web-code/components/angentchat/AgentCardList.tsx
new file mode 100644
index 00000000..c92bc3ca
--- /dev/null
+++ b/web-code/components/angentchat/AgentCardList.tsx
@@ -0,0 +1,594 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Bot, Edit, Eye, Plus, Search, Sparkles, Trash2, X } from 'lucide-react';
+
+import { useTheme } from '../../contexts/ThemeContext';
+
+interface AgentItem {
+  key: string;
+  type: 'builtin' | 'custom' | string;
+  deletable: boolean;
+  name: string;
+  description: string;
+  default_prompt: string;
+  schema_hint: string;
+  bound_skills: string[];
+  order: number;
+}
+
+interface SkillItem {
+  key: string;
+  name: string;
+  description?: string;
+}
+
+interface AgentCardListProps {
+  onEdit?: (key: string) => void;
+}
+
+type TypeFilter = 'all' | 'builtin' | 'custom';
+
+interface CreateAgentForm {
+  name: string;
+  description: string;
+  bound_skills: string[];
+}
+
+const INITIAL_FORM: CreateAgentForm = {
+  name: '',
+  description: '',
+  bound_skills: [],
+};
+
+const backUrl = 'https://ch1.b.uat.4.cn/zncmback';
+export default function AgentCardList({ onEdit }: AgentCardListProps) {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  const [agents, setAgents] = useState<AgentItem[]>([]);
+  const [skills, setSkills] = useState<SkillItem[]>([]);
+  const [keyword, setKeyword] = useState('');
+  const [typeFilter, setTypeFilter] = useState<TypeFilter>('all');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+
+  const [createOpen, setCreateOpen] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [createForm, setCreateForm] = useState<CreateAgentForm>(INITIAL_FORM);
+  const [skillKeyword, setSkillKeyword] = useState('');
+
+  const showNotice = (message: string) => {
+    setNotice(message);
+    window.setTimeout(() => {
+      setNotice((current) => (current === message ? null : current));
+    }, 2400);
+  };
+
+  const loadData = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [agentRes, skillRes] = await Promise.all([fetch(`${backUrl}/api/agents`), fetch(`${backUrl}/api/skills`)]);
+      if (!agentRes.ok) {
+        throw new Error(`加载 MCP 失败：${agentRes.status}`);
+      }
+
+      const agentData = (await agentRes.json()) as AgentItem[];
+      const skillData = skillRes.ok ? ((await skillRes.json()) as SkillItem[]) : [];
+
+      setAgents(agentData.sort((a, b) => a.order - b.order));
+      setSkills(skillData);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : '加载失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    void loadData();
+  }, []);
+
+  const filteredAgents = useMemo(() => {
+    const kw = keyword.trim().toLowerCase();
+    return agents.filter((agent) => {
+      const matchesKeyword =
+        !kw ||
+        agent.name.toLowerCase().includes(kw) ||
+        agent.key.toLowerCase().includes(kw) ||
+        agent.description.toLowerCase().includes(kw);
+
+      const matchesType = typeFilter === 'all' || agent.type === typeFilter;
+      return matchesKeyword && matchesType;
+    });
+  }, [agents, keyword, typeFilter]);
+
+  const filteredSkills = useMemo(() => {
+    const kw = skillKeyword.trim().toLowerCase();
+    if (!kw) {
+      return skills;
+    }
+    return skills.filter((skill) =>
+      `${skill.name} ${skill.key} ${skill.description || ''}`.toLowerCase().includes(kw),
+    );
+  }, [skillKeyword, skills]);
+
+  const resetCreateForm = () => {
+    setCreateForm(INITIAL_FORM);
+    setSkillKeyword('');
+  };
+
+  const openCreateModal = () => {
+    resetCreateForm();
+    setCreateOpen(true);
+  };
+
+  const closeCreateModal = () => {
+    setCreateOpen(false);
+    resetCreateForm();
+  };
+
+  const toggleSkill = (skillKey: string) => {
+    setCreateForm((prev) => ({
+      ...prev,
+      bound_skills: prev.bound_skills.includes(skillKey)
+        ? prev.bound_skills.filter((item) => item !== skillKey)
+        : [...prev.bound_skills, skillKey],
+    }));
+  };
+
+  const handleCreate = async () => {
+    const name = createForm.name.trim();
+    const description = createForm.description.trim();
+    if (!name) {
+      setError('请先输入 MCP 名称');
+      return;
+    }
+
+    setCreating(true);
+    setError(null);
+    try {
+      const res = await fetch(`${backUrl}/api/agents`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name,
+          description,
+          bound_skills: createForm.bound_skills,
+        }),
+      });
+
+      if (!res.ok) {
+        let detail = `新增失败：${res.status}`;
+        try {
+          const body = (await res.json()) as { detail?: string };
+          if (body.detail) {
+            detail = body.detail;
+          }
+        } catch {
+          // ignore json parse errors
+        }
+        throw new Error(detail);
+      }
+
+      await res.json();
+      await loadData();
+      closeCreateModal();
+      showNotice('MCP 已新增');
+    } catch (e) {
+      setError(e instanceof Error ? e.message : '新增失败');
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleDelete = async (agent: AgentItem) => {
+    if (!agent.deletable) return;
+    const ok = window.confirm(`确认删除 MCP “${agent.name}”吗？`);
+    if (!ok) return;
+
+    const res = await fetch(`${backUrl}/api/agents/${agent.key}`, { method: 'DELETE' });
+    if (!res.ok) {
+      setError(`删除失败：${res.status}`);
+      return;
+    }
+
+    await loadData();
+    showNotice('MCP 已删除');
+  };
+
+  const selectedSkillCount = createForm.bound_skills.length;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div>
+          <h1 className={`mb-2 text-2xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+            MCP 智能体配置
+          </h1>
+          <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+            管理内置与用户新增的 MCP，并支持绑定技能
+          </p>
+        </div>
+
+        <button
+          type="button"
+          onClick={openCreateModal}
+          className={`inline-flex h-10 items-center justify-center gap-2 rounded-xl px-4 text-sm font-medium transition ${
+            isDark ? 'bg-blue-600 text-white hover:bg-blue-500' : 'bg-red-600 text-white hover:bg-red-500'
+          }`}
+        >
+          <Plus className="h-4 w-4" />
+          新增 MCP
+        </button>
+      </div>
+
+      <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+        <div className="relative max-w-xl flex-1">
+          <Search
+            className={`absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 ${
+              isDark ? 'text-slate-500' : 'text-red-400'
+            }`}
+          />
+          <input
+            type="text"
+            value={keyword}
+            onChange={(e) => setKeyword(e.target.value)}
+            placeholder="搜索 MCP 名称、Key 或描述"
+            className={`w-full rounded-xl border py-2.5 pl-10 pr-4 text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
+              isDark
+                ? 'border-blue-800/30 bg-slate-800/50 text-white placeholder-slate-500'
+                : 'border-red-200 bg-white text-gray-900 placeholder-red-300'
+            }`}
+          />
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2">
+          {[
+            { key: 'all', label: '全部' },
+            { key: 'builtin', label: '内置 MCP' },
+            { key: 'custom', label: '用户新增' },
+          ].map((item) => {
+            const active = typeFilter === item.key;
+            return (
+              <button
+                key={item.key}
+                type="button"
+                onClick={() => setTypeFilter(item.key as TypeFilter)}
+                className={`rounded-full px-3 py-1.5 text-sm transition ${
+                  active
+                    ? isDark
+                      ? 'bg-blue-600 text-white'
+                      : 'bg-red-600 text-white'
+                    : isDark
+                      ? 'bg-slate-800 text-slate-300 hover:bg-slate-700'
+                      : 'bg-white text-gray-600 ring-1 ring-gray-200 hover:bg-gray-50'
+                }`}
+              >
+                {item.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {loading ? <div className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>加载中...</div> : null}
+      {error ? <div className="text-sm text-red-500">{error}</div> : null}
+      {notice ? <div className="text-sm text-emerald-500">{notice}</div> : null}
+
+      {!loading && !error ? (
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          {filteredAgents.map((agent) => (
+            <div
+              key={agent.key}
+              className={`group rounded-xl border p-5 transition-all duration-300 ${
+                isDark
+                  ? 'border-blue-800/30 bg-slate-800/30 backdrop-blur-xl hover:border-blue-500/50'
+                  : 'border-red-100 bg-white hover:border-red-300 hover:shadow-md'
+              }`}
+            >
+              <div className="mb-4 flex items-start justify-between gap-3">
+                <div className="flex items-center gap-3">
+                  <div
+                    className={`flex h-12 w-12 items-center justify-center rounded-xl ${
+                      isDark ? 'bg-blue-500/20' : 'bg-red-100'
+                    }`}
+                  >
+                    <Bot className={`h-6 w-6 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+                  </div>
+                  <div>
+                    <h3 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                      {agent.name}
+                    </h3>
+                    <p className={`text-xs font-mono ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                      {agent.key}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex shrink-0 items-center gap-2">
+                  <span
+                    className={`rounded-full px-2.5 py-1 text-xs font-medium ${
+                      agent.type === 'builtin'
+                        ? isDark
+                          ? 'bg-cyan-500/15 text-cyan-200'
+                          : 'bg-cyan-50 text-cyan-700'
+                        : isDark
+                          ? 'bg-amber-500/15 text-amber-200'
+                          : 'bg-amber-50 text-amber-700'
+                    }`}
+                  >
+                    {agent.type === 'builtin' ? '内置' : '自定义'}
+                  </span>
+                  <span
+                    className={`rounded-full px-2.5 py-1 text-xs font-medium ${
+                      isDark ? 'bg-slate-700/60 text-slate-300' : 'bg-gray-100 text-gray-600'
+                    }`}
+                  >
+                    #{agent.order + 1}
+                  </span>
+                </div>
+              </div>
+
+              <p className={`mb-4 min-h-[40px] text-sm ${isDark ? 'text-slate-400' : 'text-gray-600'}`}>
+                {agent.description || '暂无描述'}
+              </p>
+
+              <div className="mb-4">
+                <div className={`mb-2 flex items-center gap-1 text-xs ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>
+                  <Sparkles className="h-3 w-3" />
+                  已绑定技能
+                </div>
+                <div className="flex min-h-[28px] flex-wrap gap-1.5">
+                  {agent.bound_skills.length === 0 ? (
+                    <span className={`text-xs ${isDark ? 'text-slate-600' : 'text-gray-400'}`}>未绑定</span>
+                  ) : (
+                    agent.bound_skills.map((skillKey) => {
+                      const skill = skills.find((item) => item.key === skillKey);
+                      return (
+                        <span
+                          key={skillKey}
+                          className={`rounded-full border px-2 py-0.5 text-xs ${
+                            isDark
+                              ? 'border-emerald-500/30 bg-emerald-500/15 text-emerald-300'
+                              : 'border-emerald-200 bg-emerald-50 text-emerald-700'
+                          }`}
+                        >
+                          {skill?.name || skillKey}
+                        </span>
+                      );
+                    })
+                  )}
+                </div>
+              </div>
+
+              <div
+                className={`flex items-center justify-end gap-2 border-t pt-3 ${
+                  isDark ? 'border-blue-800/30' : 'border-red-100'
+                }`}
+              >
+                <button
+                  type="button"
+                  onClick={() => onEdit?.(agent.key)}
+                  className={`inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm transition-colors ${
+                    isDark
+                      ? 'bg-slate-700/60 text-slate-200 hover:bg-slate-700'
+                      : 'border border-red-200 bg-white text-red-600 hover:bg-red-50'
+                  }`}
+                >
+                  <Eye className="h-3.5 w-3.5" />
+                  详情
+                </button>
+                <button
+                  type="button"
+                  onClick={() => onEdit?.(agent.key)}
+                  className={`inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm transition-colors ${
+                    isDark ? 'bg-blue-600 text-white hover:bg-blue-500' : 'bg-red-600 text-white hover:bg-red-500'
+                  }`}
+                >
+                  <Edit className="h-3.5 w-3.5" />
+                  编辑
+                </button>
+                {agent.deletable ? (
+                  <button
+                    type="button"
+                    onClick={() => void handleDelete(agent)}
+                    className={`inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm transition-colors ${
+                      isDark
+                        ? 'bg-rose-500/15 text-rose-200 hover:bg-rose-500/25'
+                        : 'bg-rose-50 text-rose-600 hover:bg-rose-100'
+                    }`}
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                    删除
+                  </button>
+                ) : null}
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : null}
+
+      {!loading && !error && filteredAgents.length === 0 ? (
+        <div className={`py-12 text-center text-sm ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+          没有匹配的 MCP
+        </div>
+      ) : null}
+
+      {createOpen ? (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4 backdrop-blur-sm"
+          onMouseDown={(event) => {
+            if (event.target === event.currentTarget) {
+              closeCreateModal();
+            }
+          }}
+        >
+          <div
+            className={`max-h-[85vh] w-full max-w-2xl overflow-hidden rounded-3xl border shadow-2xl ${
+              isDark ? 'border-slate-700 bg-slate-900 text-slate-100' : 'border-red-100 bg-white text-gray-900'
+            }`}
+          >
+            <div className="flex items-center justify-between border-b px-6 py-5 dark:border-slate-700">
+              <div>
+                <h2 className="text-lg font-semibold">新增 MCP</h2>
+                <p className={`mt-1 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                  输入 MCP 名称、详情并选择要绑定的技能
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={closeCreateModal}
+                className={`flex h-9 w-9 items-center justify-center rounded-xl ${
+                  isDark ? 'hover:bg-slate-800' : 'hover:bg-gray-100'
+                }`}
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+
+            <div className="space-y-5 overflow-y-auto px-6 py-5">
+              <div>
+                <label className={`mb-2 block text-sm font-medium ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+                  MCP 名称
+                </label>
+                <input
+                  type="text"
+                  value={createForm.name}
+                  onChange={(e) => setCreateForm((prev) => ({ ...prev, name: e.target.value }))}
+                  placeholder="例如：游戏分析助手"
+                  className={`w-full rounded-xl border px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-red-500/20 ${
+                    isDark
+                      ? 'border-slate-700 bg-slate-950 text-white placeholder:text-slate-500'
+                      : 'border-gray-200 bg-white text-gray-900 placeholder:text-gray-400'
+                  }`}
+                />
+              </div>
+
+              <div>
+                <label className={`mb-2 block text-sm font-medium ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+                  详情
+                </label>
+                <textarea
+                  value={createForm.description}
+                  onChange={(e) => setCreateForm((prev) => ({ ...prev, description: e.target.value }))}
+                  placeholder="一句话说明这个 MCP 的职责"
+                  rows={4}
+                  className={`w-full rounded-xl border px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-red-500/20 ${
+                    isDark
+                      ? 'border-slate-700 bg-slate-950 text-white placeholder:text-slate-500'
+                      : 'border-gray-200 bg-white text-gray-900 placeholder:text-gray-400'
+                  }`}
+                />
+              </div>
+
+              <div>
+                <div className="mb-2 flex items-center justify-between gap-3">
+                  <label className={`block text-sm font-medium ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+                    绑定技能
+                  </label>
+                  <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                    已选 {selectedSkillCount} 项
+                  </span>
+                </div>
+
+                <div className="mb-3">
+                  <input
+                    type="text"
+                    value={skillKeyword}
+                    onChange={(e) => setSkillKeyword(e.target.value)}
+                    placeholder="搜索技能名称或描述"
+                    className={`w-full rounded-xl border px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-red-500/20 ${
+                      isDark
+                        ? 'border-slate-700 bg-slate-950 text-white placeholder:text-slate-500'
+                        : 'border-gray-200 bg-white text-gray-900 placeholder:text-gray-400'
+                    }`}
+                  />
+                </div>
+
+                <div
+                  className={`max-h-72 space-y-2 overflow-y-auto rounded-2xl border p-3 ${
+                    isDark ? 'border-slate-700 bg-slate-950/60' : 'border-gray-200 bg-gray-50/70'
+                  }`}
+                >
+                  {filteredSkills.length === 0 ? (
+                    <div className={`py-8 text-center text-sm ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                      没有匹配的技能
+                    </div>
+                  ) : (
+                    filteredSkills.map((skill) => {
+                      const checked = createForm.bound_skills.includes(skill.key);
+                      return (
+                        <button
+                          key={skill.key}
+                          type="button"
+                          onClick={() => toggleSkill(skill.key)}
+                          className={`flex w-full items-start gap-3 rounded-xl border px-3 py-3 text-left transition ${
+                            checked
+                              ? isDark
+                                ? 'border-emerald-500/50 bg-emerald-500/10'
+                                : 'border-emerald-200 bg-emerald-50'
+                              : isDark
+                                ? 'border-slate-700 bg-slate-900/50 hover:bg-slate-800/70'
+                                : 'border-white bg-white hover:bg-gray-50'
+                          }`}
+                        >
+                          <div
+                            className={`mt-1 h-4 w-4 shrink-0 rounded border ${
+                              checked
+                                ? 'border-emerald-500 bg-emerald-500'
+                                : isDark
+                                  ? 'border-slate-600'
+                                  : 'border-gray-300'
+                            }`}
+                          />
+                          <div className="min-w-0">
+                            <div className={`text-sm font-medium ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>
+                              {skill.name}
+                              <span className={`ml-2 font-mono text-[11px] ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                                {skill.key}
+                              </span>
+                            </div>
+                            <p className={`mt-1 text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                              {skill.description || '暂无描述'}
+                            </p>
+                          </div>
+                        </button>
+                      );
+                    })
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div
+              className={`flex items-center justify-end gap-3 border-t px-6 py-4 ${
+                isDark ? 'border-slate-700' : 'border-gray-200'
+              }`}
+            >
+              <button
+                type="button"
+                onClick={closeCreateModal}
+                className={`rounded-xl px-4 py-2 text-sm ${
+                  isDark ? 'text-slate-300 hover:bg-slate-800' : 'text-gray-600 hover:bg-gray-100'
+                }`}
+              >
+                取消
+              </button>
+              <button
+                type="button"
+                onClick={() => void handleCreate()}
+                disabled={creating}
+                className={`rounded-xl px-4 py-2 text-sm font-medium text-white ${
+                  isDark ? 'bg-blue-600 hover:bg-blue-500' : 'bg-red-600 hover:bg-red-500'
+                } disabled:cursor-not-allowed disabled:opacity-60`}
+              >
+                {creating ? '创建中...' : '确认新增'}
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/web-code/components/angentchat/AgentChatMessageList.tsx b/web-code/components/angentchat/AgentChatMessageList.tsx
new file mode 100644
index 00000000..a378a032
--- /dev/null
+++ b/web-code/components/angentchat/AgentChatMessageList.tsx
@@ -0,0 +1,327 @@
+import React, { useMemo, useState } from 'react';
+import { Bot, ChevronDown, CheckCircle2, Loader2, Sparkles, UserRound } from 'lucide-react';
+
+import { useTheme } from '../../contexts/ThemeContext';
+import MarkdownRenderer from '../MarkdownRenderer';
+import { parseAgentResponse } from '../agent/agentResponseParser';
+
+export interface AgentChatMsg {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+interface AvatarProps {
+  role: 'user' | 'assistant';
+  isActive?: boolean;
+}
+
+const AgentAvatar: React.FC<AvatarProps> = ({ role, isActive = false }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const Icon = role === 'assistant' ? Bot : UserRound;
+
+  const gradientClass =
+    role === 'assistant'
+      ? isDark
+        ? 'bg-gradient-to-br from-cyan-500 via-blue-600 to-violet-600 text-white'
+        : 'bg-gradient-to-br from-red-400 via-rose-500 to-orange-400 text-white'
+      : isDark
+        ? 'bg-gradient-to-br from-slate-500 via-slate-700 to-slate-900 text-white'
+        : 'bg-gradient-to-br from-sky-400 via-indigo-500 to-violet-500 text-white';
+
+  return (
+    <div
+      className={`relative flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-2xl shadow-sm ${gradientClass} ${isActive ? 'qa-avatar-active' : ''}`}
+    >
+      <div className="absolute inset-0 bg-white/20 opacity-0 qa-avatar-shine" />
+      <Icon className={`relative z-10 h-5 w-5 ${isActive ? 'qa-avatar-icon-active' : ''}`} />
+      {role === 'assistant' && isActive && (
+        <Sparkles className="qa-avatar-spark absolute -right-0.5 -top-0.5 h-3.5 w-3.5 text-yellow-200" />
+      )}
+    </div>
+  );
+};
+
+interface CollapsibleProps {
+  title: React.ReactNode;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  className?: string;
+}
+
+const Collapsible: React.FC<CollapsibleProps> = ({
+  title,
+  children,
+  defaultOpen = true,
+  className = '',
+}) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div
+      className={`overflow-hidden rounded-2xl border ${isDark ? 'border-slate-700/60 bg-slate-900/30' : 'border-red-100 bg-white'} ${className}`}
+    >
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className={`flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition-colors ${
+          isDark ? 'hover:bg-slate-800/70' : 'hover:bg-red-50/60'
+        }`}
+      >
+        <div className="min-w-0 flex-1">{title}</div>
+        <ChevronDown
+          className={`h-4 w-4 shrink-0 transition-transform duration-300 ease-out ${open ? 'rotate-0' : '-rotate-90'} ${
+            isDark ? 'text-slate-400' : 'text-gray-500'
+          }`}
+        />
+      </button>
+      <div
+        className={`grid transition-[grid-template-rows,opacity] duration-300 ease-out ${open ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'}`}
+      >
+        <div className="overflow-hidden">
+          <div
+            className={`px-4 pb-4 transition-transform duration-300 ease-out ${open ? 'translate-y-0' : '-translate-y-2'} ${
+              isDark ? 'text-slate-200' : 'text-gray-700'
+            }`}
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface AssistantAnswerProps {
+  steps: { title: string; content: string }[];
+  thinkingMarkdown: string;
+  answerMarkdown: string;
+  thinkingComplete: boolean;
+  streaming: boolean;
+}
+
+const AssistantAnswer: React.FC<AssistantAnswerProps> = ({
+  steps,
+  thinkingMarkdown,
+  answerMarkdown,
+  thinkingComplete,
+  streaming,
+}) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  const showThinkingSection = Boolean(thinkingMarkdown) || (!thinkingComplete && streaming);
+
+  return (
+    <div className="w-full min-w-0 max-w-5xl space-y-3 overflow-hidden">
+      {steps.length > 0 && (
+        <Collapsible
+          defaultOpen
+          className={isDark ? 'bg-slate-800/60 shadow-lg shadow-black/10' : 'bg-white shadow-sm'}
+          title={
+            <div className="flex items-center gap-3">
+              <div
+                className={`flex h-9 w-9 items-center justify-center rounded-2xl ${
+                  isDark ? 'bg-emerald-500/15 text-emerald-300' : 'bg-emerald-50 text-emerald-600'
+                }`}
+              >
+                <CheckCircle2 className="h-5 w-5" />
+              </div>
+              <div>
+                <div className={`text-sm font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                  步骤
+                </div>
+                <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                  展示技能执行、上下文准备和模型调用进度
+                </div>
+              </div>
+            </div>
+          }
+        >
+          <div className="space-y-3">
+            {steps.map((step, index) => (
+              <div
+                key={`${step.title}-${index}`}
+                className={`rounded-xl border px-3 py-3 ${
+                  isDark ? 'border-slate-700 bg-slate-900/40' : 'border-gray-100 bg-gray-50'
+                }`}
+              >
+                <div className={`text-sm font-semibold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>
+                  {step.title}
+                </div>
+                <div className={`mt-1 whitespace-pre-wrap text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                  {step.content}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Collapsible>
+      )}
+
+      {showThinkingSection && (
+        <Collapsible
+          defaultOpen
+          className={isDark ? 'bg-slate-800/60 shadow-lg shadow-black/10' : 'bg-white shadow-sm'}
+          title={
+            <div className="flex items-center gap-3">
+              <div
+                className={`flex h-9 w-9 items-center justify-center rounded-2xl ${
+                  isDark ? 'bg-violet-500/15 text-violet-300' : 'bg-orange-50 text-orange-500'
+                }`}
+              >
+                <Sparkles className="h-5 w-5" />
+              </div>
+              <div>
+                <div className={`text-sm font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                  思考过程
+                </div>
+                {thinkingComplete ? (
+                  <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                    思考已完成，可展开查看
+                  </div>
+                ) : (
+                  <div
+                    className={`qa-generating-marquee text-xs ${
+                      isDark ? 'qa-generating-marquee-dark text-slate-300' : 'qa-generating-marquee-light text-gray-600'
+                    }`}
+                  >
+                    正在生成思考内容...
+                  </div>
+                )}
+              </div>
+            </div>
+          }
+        >
+          {thinkingMarkdown ? (
+            <MarkdownRenderer
+              content={thinkingMarkdown}
+              className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}
+            />
+          ) : (
+            <div className={`flex items-center gap-2 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              <Loader2 className="h-4 w-4 animate-spin" />
+              等待模型输出思考内容...
+            </div>
+          )}
+        </Collapsible>
+      )}
+
+      {answerMarkdown ? (
+        <div
+          className={`rounded-2xl border p-4 ${
+            isDark ? 'border-slate-600/40 bg-slate-700/60' : 'border-gray-100 bg-white'
+          }`}
+        >
+          <MarkdownRenderer
+            content={answerMarkdown}
+            className={`text-sm ${isDark ? 'text-slate-200' : 'text-gray-700'}`}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+interface MessageRowProps {
+  msg: AgentChatMsg;
+  streaming?: boolean;
+}
+
+const MessageRow: React.FC<MessageRowProps> = ({ msg, streaming = false }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const isUser = msg.role === 'user';
+
+  const parsed = useMemo(() => {
+    if (isUser) return null;
+    return parseAgentResponse(msg.content);
+  }, [msg.content, isUser]);
+
+  if (isUser) {
+    return (
+      <div className="flex items-end justify-end gap-3">
+        <div
+          className={`max-w-[72%] rounded-2xl px-4 py-3 text-sm leading-relaxed shadow-sm ${
+            isDark
+              ? 'bg-blue-600/70 text-white'
+              : 'bg-gradient-to-r from-red-500 to-rose-500 text-white'
+          }`}
+        >
+          <p className="whitespace-pre-wrap leading-relaxed">{msg.content}</p>
+        </div>
+        <AgentAvatar role="user" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-start gap-3">
+      <AgentAvatar role="assistant" isActive={streaming} />
+      <div className="min-w-0 flex-1">
+        {parsed ? (
+          <AssistantAnswer
+            steps={parsed.steps}
+            thinkingMarkdown={parsed.thinkingMarkdown}
+            answerMarkdown={parsed.answerMarkdown}
+            thinkingComplete={parsed.thinkingComplete && !streaming}
+            streaming={streaming}
+          />
+        ) : (
+          <div
+            className={`rounded-2xl border p-4 text-sm ${
+              isDark
+                ? 'border-slate-600/40 bg-slate-700/60 text-slate-200'
+                : 'border-gray-100 bg-white text-gray-700'
+            }`}
+          >
+            <Loader2 className="h-4 w-4 animate-spin" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+interface AgentChatMessageListProps {
+  messages: AgentChatMsg[];
+  streamingMsgId?: string | null;
+  agentName?: string;
+}
+
+const AgentChatMessageList: React.FC<AgentChatMessageListProps> = ({
+  messages,
+  streamingMsgId,
+  agentName,
+}) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  if (messages.length === 0) {
+    return (
+      <div
+        className={`flex h-full flex-col items-center justify-center text-center ${
+          isDark ? 'text-slate-500' : 'text-gray-400'
+        }`}
+      >
+        <Bot className="mb-3 h-10 w-10" />
+        <p className="text-sm">直接与 {agentName || 'MCP 智能体'} 对话以测试当前配置</p>
+        <p className="mt-1 text-xs">已绑定技能会在步骤区显示实际执行过程</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-5">
+      {messages.map((msg, idx) => {
+        const isLast = idx === messages.length - 1;
+        const isStreaming = isLast && msg.role === 'assistant' && msg.id === streamingMsgId;
+        return <MessageRow key={msg.id} msg={msg} streaming={isStreaming} />;
+      })}
+    </div>
+  );
+};
+
+export default AgentChatMessageList;
diff --git a/web-code/components/angentchat/AgentEditPage.tsx b/web-code/components/angentchat/AgentEditPage.tsx
new file mode 100644
index 00000000..248f759c
--- /dev/null
+++ b/web-code/components/angentchat/AgentEditPage.tsx
@@ -0,0 +1,1235 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  ArrowDown,
+  ArrowLeft,
+  Bot,
+  CheckCircle2,
+  History as HistoryIcon,
+  Plus,
+  Save,
+  Search,
+  Sparkles,
+  X,
+} from 'lucide-react';
+import { Input, Textarea } from 'tdesign-react';
+
+import { useTheme } from '../../contexts/ThemeContext';
+import ChatInputComposer from '../agent/ChatInputComposer';
+import AgentChatMessageList, { type AgentChatMsg } from './AgentChatMessageList';
+import SixStepChatHistory, { type SixStepConversationMeta } from './SixStepChatHistory';
+
+interface AgentDetail {
+  key: string;
+  type?: string;
+  deletable?: boolean;
+  name: string;
+  description: string;
+  structured_prompt: string;
+  chat_prompt: string;
+  default_prompt?: string;
+  default_model: string;
+  schema_hint: string;
+  bound_skills: string[];
+  order: number;
+}
+
+interface SkillOption {
+  key: string;
+  name: string;
+  description: string;
+  type: string;
+}
+
+interface ModelOption {
+  id: string;
+  name: string;
+  provider: string;
+  description?: string;
+}
+
+interface ModelsResponse {
+  default_model_id: string;
+  models: ModelOption[];
+}
+
+interface AgentEditPageProps {
+  agentKey: string;
+  onBack?: () => void;
+}
+
+interface ConversationMessage extends AgentChatMsg {
+  created_at?: number;
+}
+
+interface ConversationApiRecord {
+  id: string;
+  agent_key: string;
+  title: string;
+  model?: string | null;
+  created_at: number;
+  updated_at: number;
+  messages: Array<{
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    created_at?: number;
+  }>;
+}
+
+interface Conversation extends SixStepConversationMeta {
+  createdAt: number;
+  model?: string;
+  messages: ConversationMessage[];
+}
+
+interface AgentFormState {
+  name: string;
+  description: string;
+  structured_prompt: string;
+  chat_prompt: string;
+  default_model: string;
+}
+
+const normalizeConversation = (item: ConversationApiRecord): Conversation => ({
+  id: item.id,
+  title: item.title || '未命名对话',
+  model: item.model || '',
+  createdAt: Number(item.created_at || Date.now()),
+  updatedAt: Number(item.updated_at || Date.now()),
+  messages: (item.messages || []).map((message) => ({
+    id: message.id,
+    role: message.role,
+    content: message.content,
+    created_at: message.created_at,
+  })),
+});
+
+const sortConversations = (items: Conversation[]) =>
+  [...items].sort((a, b) => Number(b.updatedAt || 0) - Number(a.updatedAt || 0));
+const backUrl = 'https://ch1.b.uat.4.cn/zncmback';
+export default function AgentEditPage({ agentKey, onBack }: AgentEditPageProps) {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  const [detail, setDetail] = useState<AgentDetail | null>(null);
+  const [skills, setSkills] = useState<SkillOption[]>([]);
+  const [models, setModels] = useState<ModelOption[]>([]);
+  const [globalDefaultModel, setGlobalDefaultModel] = useState('');
+  const [form, setForm] = useState<AgentFormState>({
+    name: '',
+    description: '',
+    structured_prompt: '',
+    chat_prompt: '',
+    default_model: '',
+  });
+  const [boundSkills, setBoundSkills] = useState<string[]>([]);
+  const [chatModel, setChatModel] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [saveMsg, setSaveMsg] = useState<string | null>(null);
+  const [pickerOpen, setPickerOpen] = useState(false);
+
+  const [historyOpen, setHistoryOpen] = useState(false);
+  const [historyVisible, setHistoryVisible] = useState(false);
+  const [conversations, setConversations] = useState<Conversation[]>([]);
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [chatInput, setChatInput] = useState('');
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [streamingMsgId, setStreamingMsgId] = useState<string | null>(null);
+  const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
+
+  const abortRef = useRef<AbortController | null>(null);
+  const messageListRef = useRef<HTMLDivElement | null>(null);
+  const programmaticScrollRef = useRef(false);
+  const historyTimerRef = useRef<number | null>(null);
+
+  const openHistoryPanel = useCallback(() => {
+    if (historyTimerRef.current) {
+      window.clearTimeout(historyTimerRef.current);
+      historyTimerRef.current = null;
+    }
+    setHistoryVisible(true);
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        setHistoryOpen(true);
+      });
+    });
+  }, []);
+
+  const closeHistoryPanel = useCallback(() => {
+    if (historyTimerRef.current) {
+      window.clearTimeout(historyTimerRef.current);
+    }
+    setHistoryOpen(false);
+    historyTimerRef.current = window.setTimeout(() => {
+      setHistoryVisible(false);
+      historyTimerRef.current = null;
+    }, 300);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (historyTimerRef.current) {
+        window.clearTimeout(historyTimerRef.current);
+      }
+    };
+  }, []);
+
+  const showTransientMessage = (message: string) => {
+    setSaveMsg(message);
+    window.setTimeout(() => {
+      setSaveMsg((current) => (current === message ? null : current));
+    }, 2400);
+  };
+
+  const upsertConversationState = (conversation: Conversation) => {
+    setConversations((prev) => sortConversations([conversation, ...prev.filter((item) => item.id !== conversation.id)]));
+  };
+
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = 'auto') => {
+    const container = messageListRef.current;
+    if (!container) {
+      return;
+    }
+    programmaticScrollRef.current = true;
+    container.scrollTo({
+      top: container.scrollHeight,
+      behavior,
+    });
+    window.setTimeout(() => {
+      programmaticScrollRef.current = false;
+    }, behavior === 'smooth' ? 400 : 120);
+  }, []);
+
+  const fetchConversations = useCallback(async (): Promise<Conversation[]> => {
+    const res = await fetch(`${backUrl}/api/agents/${agentKey}/conversations`);
+    if (!res.ok) {
+      throw new Error(`加载聊天记录失败：${res.status}`);
+    }
+    const raw = (await res.json()) as ConversationApiRecord[];
+    return sortConversations(raw.map(normalizeConversation));
+  }, [agentKey]);
+
+  const createConversationOnServer = async (
+    title: string,
+    model?: string,
+    messages: ConversationMessage[] = [],
+  ): Promise<Conversation> => {
+    const res = await fetch(`${backUrl}/api/agents/${agentKey}/conversations`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        title,
+        model: model || undefined,
+        messages,
+      }),
+    });
+    if (!res.ok) {
+      throw new Error(`创建对话失败：${res.status}`);
+    }
+    return normalizeConversation((await res.json()) as ConversationApiRecord);
+  };
+
+  const updateConversationOnServer = async (
+    conversationId: string,
+    payload: {
+      title?: string;
+      model?: string;
+      messages?: ConversationMessage[];
+    },
+  ): Promise<Conversation> => {
+    const res = await fetch(`${backUrl}/api/agents/${agentKey}/conversations/${conversationId}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    });
+    if (!res.ok) {
+      throw new Error(`更新对话失败：${res.status}`);
+    }
+    return normalizeConversation((await res.json()) as ConversationApiRecord);
+  };
+
+  useEffect(() => {
+    let cancelled = false;
+
+    (async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const [agentRes, skillRes, modelRes, conversationList] = await Promise.all([
+          fetch(`${backUrl}/api/agents/${agentKey}`),
+          fetch(`${backUrl}/api/skills`),
+          fetch(`${backUrl}/api/models`),
+          fetchConversations(),
+        ]);
+
+        if (!agentRes.ok) {
+          throw new Error(`加载智能体失败：${agentRes.status}`);
+        }
+
+        const agentData = (await agentRes.json()) as AgentDetail;
+        const skillData = skillRes.ok ? ((await skillRes.json()) as SkillOption[]) : [];
+        const modelData = modelRes.ok
+          ? ((await modelRes.json()) as ModelsResponse)
+          : { default_model_id: '', models: [] };
+
+        if (cancelled) {
+          return;
+        }
+
+        const effectiveModel = agentData.default_model || modelData.default_model_id || '';
+        setDetail(agentData);
+        setSkills(skillData);
+        setModels(modelData.models || []);
+        setGlobalDefaultModel(modelData.default_model_id || '');
+        setForm({
+          name: agentData.name || '',
+          description: agentData.description || '',
+          structured_prompt: agentData.structured_prompt || agentData.default_prompt || '',
+          chat_prompt: agentData.chat_prompt || agentData.default_prompt || '',
+          default_model: effectiveModel,
+        });
+        setBoundSkills(agentData.bound_skills || []);
+        setConversations(conversationList);
+        setActiveId((current) => {
+          if (current && conversationList.some((item) => item.id === current)) {
+            return current;
+          }
+          return conversationList[0]?.id || null;
+        });
+        setChatModel((current) => current || effectiveModel);
+      } catch (e) {
+        if (!cancelled) {
+          setError(e instanceof Error ? e.message : '加载失败');
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [agentKey, fetchConversations]);
+
+  useEffect(() => {
+    if (autoScrollEnabled) {
+      scrollToBottom(isStreaming ? 'auto' : 'smooth');
+    }
+  }, [activeId, autoScrollEnabled, conversations, isStreaming, scrollToBottom]);
+
+  const skillNameMap = useMemo(() => {
+    const map: Record<string, string> = {};
+    skills.forEach((skill) => {
+      map[skill.key] = skill.name;
+    });
+    return map;
+  }, [skills]);
+
+  const activeConversation = useMemo(
+    () => conversations.find((item) => item.id === activeId) || null,
+    [activeId, conversations],
+  );
+
+  useEffect(() => {
+    if (activeConversation?.model) {
+      setChatModel(activeConversation.model);
+      return;
+    }
+    if (form.default_model) {
+      setChatModel(form.default_model);
+      return;
+    }
+    if (globalDefaultModel) {
+      setChatModel(globalDefaultModel);
+    }
+  }, [activeConversation?.id, activeConversation?.model, form.default_model, globalDefaultModel]);
+
+  useEffect(() => {
+    setAutoScrollEnabled(true);
+    window.setTimeout(() => {
+      scrollToBottom('auto');
+    }, 0);
+  }, [activeId, scrollToBottom]);
+
+  const activeModelLabel = useMemo(() => {
+    const current = models.find((item) => item.id === chatModel);
+    return current?.name || chatModel || '跟随默认模型';
+  }, [chatModel, models]);
+
+  const removeBoundSkill = (key: string) => {
+    setBoundSkills((prev) => prev.filter((item) => item !== key));
+  };
+
+  const handleSave = async () => {
+    if (!detail) {
+      return;
+    }
+    setSaving(true);
+    setSaveMsg(null);
+    try {
+      const res = await fetch(`${backUrl}/api/agents/${detail.key}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: form.name,
+          description: form.description,
+          structured_prompt: form.structured_prompt,
+          chat_prompt: form.chat_prompt,
+          default_model: form.default_model,
+          bound_skills: boundSkills,
+        }),
+      });
+
+      if (!res.ok) {
+        throw new Error(`保存失败：${res.status}`);
+      }
+
+      const updated = (await res.json()) as AgentDetail;
+      setDetail(updated);
+      setForm((prev) => ({
+        ...prev,
+        name: updated.name || '',
+        description: updated.description || '',
+        structured_prompt: updated.structured_prompt || '',
+        chat_prompt: updated.chat_prompt || '',
+        default_model: updated.default_model || prev.default_model,
+      }));
+      setBoundSkills(updated.bound_skills || []);
+      setChatModel((current) => current || updated.default_model || '');
+      showTransientMessage('保存成功');
+    } catch (e) {
+      setSaveMsg(e instanceof Error ? e.message : '保存失败');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleNewConversation = async () => {
+    try {
+      const created = await createConversationOnServer('新对话', chatModel || form.default_model);
+      upsertConversationState(created);
+      setActiveId(created.id);
+      openHistoryPanel();
+    } catch (e) {
+      setSaveMsg(e instanceof Error ? e.message : '创建对话失败');
+    }
+  };
+
+  const handleDeleteConversation = async (id: string) => {
+    try {
+      const res = await fetch(`${backUrl}/api/agents/${agentKey}/conversations/${id}`, {
+        method: 'DELETE',
+      });
+      if (!res.ok) {
+        throw new Error(`删除对话失败：${res.status}`);
+      }
+      setConversations((prev) => {
+        const next = prev.filter((item) => item.id !== id);
+        setActiveId((current) => (current === id ? next[0]?.id || null : current));
+        return next;
+      });
+    } catch (e) {
+      setSaveMsg(e instanceof Error ? e.message : '删除对话失败');
+    }
+  };
+
+  const handleRenameConversation = async (id: string, title: string) => {
+    try {
+      const updated = await updateConversationOnServer(id, { title });
+      upsertConversationState(updated);
+      if (activeId === id) {
+        setActiveId(updated.id);
+      }
+    } catch (e) {
+      setSaveMsg(e instanceof Error ? e.message : '重命名失败');
+    }
+  };
+
+  const handleClearAllConversations = async () => {
+    try {
+      const res = await fetch(`${backUrl}/api/agents/${agentKey}/conversations`, {
+        method: 'DELETE',
+      });
+      if (!res.ok) {
+        throw new Error(`清空聊天记录失败：${res.status}`);
+      }
+      setConversations([]);
+      setActiveId(null);
+      showTransientMessage('聊天记录已清空');
+    } catch (e) {
+      setSaveMsg(e instanceof Error ? e.message : '清空聊天记录失败');
+    }
+  };
+
+  const handleStop = () => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    setIsStreaming(false);
+    setStreamingMsgId(null);
+  };
+
+  const handleMessageListScroll = () => {
+    const container = messageListRef.current;
+    if (!container || programmaticScrollRef.current) {
+      return;
+    }
+    const distanceToBottom =
+      container.scrollHeight - container.scrollTop - container.clientHeight;
+    const nearBottom = distanceToBottom <= 80;
+    setAutoScrollEnabled(nearBottom);
+  };
+
+  const handleResumeAutoScroll = () => {
+    setAutoScrollEnabled(true);
+    scrollToBottom('smooth');
+  };
+
+  const handleSend = async () => {
+    const text = chatInput.trim();
+    if (!text || !detail) {
+      return;
+    }
+
+    let conversation = activeConversation;
+    try {
+      if (!conversation) {
+        conversation = await createConversationOnServer(
+          text.slice(0, 16) || '新对话',
+          chatModel || form.default_model,
+        );
+        upsertConversationState(conversation);
+        setActiveId(conversation.id);
+      }
+    } catch (e) {
+      setSaveMsg(e instanceof Error ? e.message : '创建对话失败');
+      return;
+    }
+
+    const conversationId = conversation.id;
+    const previousMessages = conversation.messages.slice();
+    const title =
+      previousMessages.length === 0 ? text.slice(0, 16) || conversation.title || '新对话' : conversation.title;
+
+    const userMsg: ConversationMessage = {
+      id: `m-${Date.now()}-u`,
+      role: 'user',
+      content: text,
+      created_at: Date.now() / 1000,
+    };
+    const assistantMsg: ConversationMessage = {
+      id: `m-${Date.now()}-a`,
+      role: 'assistant',
+      content: '',
+      created_at: Date.now() / 1000 + 0.001,
+    };
+
+    let assistantContent = '';
+    const effectiveModel = chatModel || conversation.model || form.default_model || globalDefaultModel;
+    const optimisticMessages = [...previousMessages, userMsg, assistantMsg];
+    setAutoScrollEnabled(true);
+    upsertConversationState({
+      ...conversation,
+      title,
+      model: effectiveModel,
+      updatedAt: Date.now() / 1000,
+      messages: optimisticMessages,
+    });
+    setActiveId(conversationId);
+    setChatInput('');
+    setIsStreaming(true);
+    setStreamingMsgId(assistantMsg.id);
+
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    const appendDelta = (delta: string) => {
+      assistantContent += delta;
+      setConversations((prev) =>
+        prev.map((item) => {
+          if (item.id !== conversationId) {
+            return item;
+          }
+          const messages = item.messages.slice();
+          const idx = messages.findIndex((message) => message.id === assistantMsg.id);
+          if (idx !== -1) {
+            messages[idx] = {
+              ...messages[idx],
+              content: messages[idx].content + delta,
+            };
+          }
+          return { ...item, messages, updatedAt: Date.now() / 1000 };
+        }),
+      );
+    };
+
+    try {
+      const res = await fetch(`${backUrl}/api/agents/${detail.key}/chat/stream`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          message: text,
+          history: previousMessages.map((item) => ({ role: item.role, content: item.content })),
+          model: effectiveModel || undefined,
+          output_format: 'markdown',
+        }),
+        signal: controller.signal,
+      });
+
+      if (!res.ok || !res.body) {
+        throw new Error(`流式请求失败：${res.status}`);
+      }
+
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+          break;
+        }
+        buffer += decoder.decode(value, { stream: true });
+        let sepIdx = buffer.indexOf('\n\n');
+        while (sepIdx !== -1) {
+          const raw = buffer.slice(0, sepIdx).replace(/\r/g, '');
+          buffer = buffer.slice(sepIdx + 2);
+
+          let eventName = 'message';
+          let dataStr = '';
+          raw.split('\n').forEach((line) => {
+            if (line.startsWith('event:')) {
+              eventName = line.slice(6).trim();
+            } else if (line.startsWith('data:')) {
+              dataStr += line.slice(5).trim();
+            }
+          });
+
+          if (dataStr) {
+            try {
+              const data = JSON.parse(dataStr) as { text?: string; message?: string };
+              if (eventName === 'delta' && typeof data.text === 'string') {
+                appendDelta(data.text);
+              } else if (eventName === 'error' && data.message) {
+                appendDelta(`\n[错误] ${data.message}`);
+              }
+            } catch {
+              // ignore malformed SSE payloads
+            }
+          }
+
+          sepIdx = buffer.indexOf('\n\n');
+        }
+      }
+    } catch (err) {
+      if ((err as Error)?.name !== 'AbortError') {
+        const message = err instanceof Error ? err.message : '请求失败';
+        if (!assistantContent) {
+          assistantContent = `[错误] ${message}`;
+        }
+        setConversations((prev) =>
+          prev.map((item) => {
+            if (item.id !== conversationId) {
+              return item;
+            }
+            const messages = item.messages.slice();
+            const idx = messages.findIndex((messageItem) => messageItem.id === assistantMsg.id);
+            if (idx !== -1) {
+              messages[idx] = {
+                ...messages[idx],
+                content: messages[idx].content || `[错误] ${message}`,
+              };
+            }
+            return { ...item, messages, updatedAt: Date.now() / 1000 };
+          }),
+        );
+      }
+    } finally {
+      setIsStreaming(false);
+      setStreamingMsgId(null);
+      abortRef.current = null;
+
+      try {
+        const persisted = await updateConversationOnServer(conversationId, {
+          title,
+          model: effectiveModel || undefined,
+          messages: [
+            ...previousMessages,
+            userMsg,
+            {
+              ...assistantMsg,
+              content: assistantContent,
+            },
+          ],
+        });
+        upsertConversationState(persisted);
+      } catch (e) {
+        setSaveMsg(e instanceof Error ? e.message : '保存聊天记录失败');
+      }
+    }
+  };
+
+  if (loading) {
+    return <div className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>加载中...</div>;
+  }
+
+  if (error || !detail) {
+    return <div className="text-sm text-red-500">{error || '智能体不存在'}</div>;
+  }
+
+  return (
+    <div
+      className={`flex h-[calc(100vh-110px)] overflow-hidden rounded-2xl border ${
+        isDark ? 'border-slate-700 bg-slate-900/40' : 'border-gray-200 bg-white'
+      }`}
+    >
+      {pickerOpen && (
+        <SkillPickerModal
+          isDark={isDark}
+          skills={skills}
+          selectedKeys={boundSkills}
+          onClose={() => setPickerOpen(false)}
+          onConfirm={async (keys) => {
+            setBoundSkills(keys);
+            setPickerOpen(false);
+            if (!detail) {
+              return;
+            }
+            try {
+              const res = await fetch(`${backUrl}/api/agents/${detail.key}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ bound_skills: keys }),
+              });
+              if (!res.ok) {
+                throw new Error(`更新技能绑定失败：${res.status}`);
+              }
+              const updated = (await res.json()) as AgentDetail;
+              setBoundSkills(updated.bound_skills || []);
+              showTransientMessage('技能绑定已更新');
+            } catch (e) {
+              setSaveMsg(e instanceof Error ? e.message : '技能绑定失败');
+            }
+          }}
+        />
+      )}
+
+      {historyVisible ? (
+        <div
+          className={`overflow-hidden transition-[width,opacity,transform,margin] duration-300 ease-out ${
+            historyOpen ? 'mr-0 w-[300px] opacity-100 translate-x-0' : 'mr-0 w-0 opacity-0 -translate-x-4'
+          }`}
+        >
+          <SixStepChatHistory
+            isOpen
+            isDark={isDark}
+            conversations={conversations.map((item) => ({
+              id: item.id,
+              title: item.title,
+              updatedAt: item.updatedAt,
+            }))}
+            activeId={activeId}
+            onClose={closeHistoryPanel}
+            onOpen={openHistoryPanel}
+            onSelect={(id) => setActiveId(id)}
+            onNew={() => void handleNewConversation()}
+            onDelete={(id) => void handleDeleteConversation(id)}
+            onRename={(id, title) => void handleRenameConversation(id, title)}
+            onClearAll={() => void handleClearAllConversations()}
+          />
+        </div>
+      ) : null}
+
+      <div className="flex h-full min-w-0 flex-1 flex-col">
+        <div
+          className={`flex h-14 items-center justify-between border-b px-4 ${
+            isDark ? 'border-slate-700' : 'border-gray-200'
+          }`}
+        >
+          <div className="flex items-center gap-3">
+            {!historyOpen && (
+              <button
+                type="button"
+                onClick={openHistoryPanel}
+                className={`flex h-8 w-8 items-center justify-center rounded-lg ${
+                  isDark ? 'text-slate-300 hover:bg-slate-800' : 'text-gray-600 hover:bg-gray-100'
+                }`}
+                title="展开聊天记录"
+              >
+                <HistoryIcon className="h-4 w-4" />
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={onBack}
+              className={`rounded-md p-1.5 ${
+                isDark ? 'text-slate-300 hover:bg-slate-800' : 'text-gray-600 hover:bg-gray-100'
+              }`}
+              title="返回"
+            >
+              <ArrowLeft className="h-4 w-4" />
+            </button>
+            <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-fuchsia-500 to-violet-600 text-white">
+              <Bot className="h-4 w-4" />
+            </div>
+            <div>
+              <h2
+                className={`text-base font-semibold leading-5 ${
+                  isDark ? 'text-slate-100' : 'text-gray-900'
+                }`}
+              >
+                {form.name || detail.key}
+              </h2>
+              <p className={`font-mono text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                {detail.key}
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <div className="hidden items-center gap-2 sm:flex">
+              <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                聊天模型
+              </span>
+              <select
+                value={chatModel}
+                onChange={(e) => setChatModel(e.target.value)}
+                className={`h-9 rounded-lg border px-3 text-sm outline-none ${
+                  isDark
+                    ? 'border-slate-600 bg-slate-800 text-slate-100'
+                    : 'border-gray-200 bg-white text-gray-800'
+                }`}
+                title={`当前模型：${activeModelLabel}`}
+              >
+                {models.map((model) => (
+                  <option key={model.id} value={model.id}>
+                    {model.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {saveMsg && (
+              <span
+                className={`text-xs ${
+                  saveMsg.includes('成功') || saveMsg.includes('已')
+                    ? 'text-emerald-500'
+                    : 'text-red-500'
+                }`}
+              >
+                {saveMsg}
+              </span>
+            )}
+
+            <button
+              type="button"
+              onClick={() => void handleSave()}
+              disabled={saving}
+              className="inline-flex h-9 items-center gap-1.5 rounded-lg bg-slate-900 px-3 text-sm text-white hover:bg-slate-800 disabled:opacity-60"
+            >
+              <Save className="h-4 w-4" />
+              {saving ? '保存中...' : '保存修改'}
+            </button>
+          </div>
+        </div>
+
+        <div className="relative min-h-0 flex-1">
+          <div
+            ref={messageListRef}
+            onScroll={handleMessageListScroll}
+            className="min-h-0 h-full overflow-y-auto px-6 py-5"
+          >
+          <AgentChatMessageList
+            messages={activeConversation?.messages ?? []}
+            streamingMsgId={isStreaming ? streamingMsgId : null}
+            agentName={form.name || detail.key}
+          />
+          </div>
+
+          {!autoScrollEnabled && (
+            <button
+              type="button"
+              onClick={handleResumeAutoScroll}
+              className={`absolute bottom-6 left-1/2 inline-flex -translate-x-1/2 items-center gap-2 rounded-full border px-4 py-2 text-sm shadow-lg backdrop-blur transition ${
+                isDark
+                  ? 'border-slate-600/80 bg-slate-900/70 text-slate-100 hover:bg-slate-800/80'
+                  : 'border-white/80 bg-white/75 text-gray-800 hover:bg-white'
+              }`}
+            >
+              <ArrowDown className="h-4 w-4" />
+              下滑到底部
+            </button>
+          )}
+        </div>
+
+        <ChatInputComposer
+          value={chatInput}
+          onChange={setChatInput}
+          onSend={() => void handleSend()}
+          onStop={handleStop}
+          isSending={isStreaming}
+          isDarkMode={isDark}
+          showUpload={false}
+          placeholder={`给 ${form.name || detail.key} 发送消息...`}
+          showBorderTop
+        />
+      </div>
+
+      <aside
+        className={`hidden h-full w-[420px] shrink-0 overflow-y-auto border-l xl:block ${
+          isDark ? 'border-slate-700 bg-slate-900/30' : 'border-gray-200 bg-gray-50/40'
+        }`}
+      >
+        <div className="space-y-5 px-5 py-5">
+          <section>
+            <h3 className={`mb-3 text-sm font-semibold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>
+              基本信息
+            </h3>
+            <div className="space-y-3">
+              <div>
+                <label className={`mb-1 block text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                  名称
+                </label>
+                <Input
+                  value={form.name}
+                  onChange={(value) => setForm((prev) => ({ ...prev, name: String(value) }))}
+                />
+              </div>
+
+              <div>
+                <label className={`mb-1 block text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                  描述
+                </label>
+                <Textarea
+                  autosize={{ minRows: 2, maxRows: 4 }}
+                  value={form.description}
+                  onChange={(value) => setForm((prev) => ({ ...prev, description: String(value) }))}
+                  placeholder="一句话描述这个 MCP 智能体的职责"
+                />
+              </div>
+
+              <div>
+                <label className={`mb-1 block text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                  默认模型
+                </label>
+                <select
+                  value={form.default_model}
+                  onChange={(e) => setForm((prev) => ({ ...prev, default_model: e.target.value }))}
+                  className={`h-10 w-full rounded-lg border px-3 text-sm outline-none ${
+                    isDark
+                      ? 'border-slate-600 bg-slate-800 text-slate-100'
+                      : 'border-gray-200 bg-white text-gray-800'
+                  }`}
+                >
+                  {models.map((model) => (
+                    <option key={model.id} value={model.id}>
+                      {model.name} ({model.provider})
+                    </option>
+                  ))}
+                </select>
+                <p className={`mt-1 text-xs ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>
+                  当前全局默认模型：{globalDefaultModel || '未配置'}
+                </p>
+              </div>
+            </div>
+          </section>
+
+          <section>
+            <h3 className={`mb-1 text-sm font-semibold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>
+              结构化输出提示词
+            </h3>
+            <p className={`mb-2 text-xs ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>
+              用于 <code>/api/agents/{'{key}'}/invoke</code> 的结构化输出场景，以及
+              <code> output_format=structured/mixed </code> 的模型调用。
+            </p>
+            <Textarea
+              autosize={{ minRows: 6, maxRows: 14 }}
+              value={form.structured_prompt}
+              onChange={(value) => setForm((prev) => ({ ...prev, structured_prompt: String(value) }))}
+              placeholder="请输入结构化输出提示词"
+            />
+          </section>
+
+          <section>
+            <h3 className={`mb-1 text-sm font-semibold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>
+              对话提示词
+            </h3>
+            <p className={`mb-2 text-xs ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>
+              <code>/api/agents/{'{key}'}/chat/stream</code> 固定使用这套提示词；当模型调用使用
+              <code> output_format=markdown </code> 时，也会自动走这套提示词。
+            </p>
+            <Textarea
+              autosize={{ minRows: 6, maxRows: 14 }}
+              value={form.chat_prompt}
+              onChange={(value) => setForm((prev) => ({ ...prev, chat_prompt: String(value) }))}
+              placeholder="请输入对话提示词"
+            />
+          </section>
+
+          <section>
+            <div className="mb-2 flex items-center justify-between">
+              <h3
+                className={`flex items-center gap-1.5 text-sm font-semibold ${
+                  isDark ? 'text-slate-100' : 'text-gray-900'
+                }`}
+              >
+                <Sparkles className="h-4 w-4" />
+                绑定技能
+              </h3>
+              <button
+                type="button"
+                onClick={() => setPickerOpen(true)}
+                className={`inline-flex h-8 items-center gap-1.5 rounded-lg border px-2.5 text-xs transition ${
+                  isDark
+                    ? 'border-slate-600 text-slate-200 hover:bg-slate-800'
+                    : 'border-emerald-200 bg-white text-emerald-600 hover:bg-emerald-50'
+                }`}
+              >
+                <Plus className="h-3.5 w-3.5" />
+                添加
+              </button>
+            </div>
+
+            <p className={`mb-3 text-xs ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>
+              支持系统技能和文件技能。保存后会整体替换当前绑定列表。
+            </p>
+
+            <div className="flex min-h-[32px] flex-wrap gap-2">
+              {boundSkills.length === 0 ? (
+                <span className={`text-xs ${isDark ? 'text-slate-600' : 'text-gray-400'}`}>暂未绑定</span>
+              ) : (
+                boundSkills.map((key) => (
+                  <span
+                    key={key}
+                    className="inline-flex h-7 items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-3 text-xs text-emerald-700"
+                  >
+                    <span className="flex h-3.5 w-3.5 items-center justify-center rounded-full bg-emerald-500 text-[10px] text-white">
+                      ✓
+                    </span>
+                    {skillNameMap[key] || key}
+                    <button
+                      type="button"
+                      onClick={() => removeBoundSkill(key)}
+                      className="text-emerald-600 hover:text-emerald-800"
+                    >
+                      <X className="h-3 w-3" />
+                    </button>
+                  </span>
+                ))
+              )}
+            </div>
+          </section>
+
+          {detail.schema_hint && (
+            <details className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>
+              <summary className="cursor-pointer">结构化输出 schema 提示（只读）</summary>
+              <pre
+                className={`mt-2 overflow-x-auto rounded p-2 text-[11px] ${
+                  isDark ? 'bg-slate-800/60 text-slate-300' : 'bg-gray-50 text-gray-700'
+                }`}
+              >
+                {detail.schema_hint}
+              </pre>
+            </details>
+          )}
+        </div>
+      </aside>
+    </div>
+  );
+}
+
+interface SkillPickerModalProps {
+  isDark: boolean;
+  skills: SkillOption[];
+  selectedKeys: string[];
+  onClose: () => void;
+  onConfirm: (keys: string[]) => void;
+}
+
+function SkillPickerModal({
+  isDark,
+  skills,
+  selectedKeys,
+  onClose,
+  onConfirm,
+}: SkillPickerModalProps) {
+  const [search, setSearch] = useState('');
+  const [draft, setDraft] = useState<string[]>(selectedKeys);
+
+  const filtered = useMemo(() => {
+    const keyword = search.trim().toLowerCase();
+    if (!keyword) {
+      return skills;
+    }
+    return skills.filter((skill) =>
+      `${skill.name} ${skill.key} ${skill.description}`.toLowerCase().includes(keyword),
+    );
+  }, [search, skills]);
+
+  const toggle = (key: string) => {
+    setDraft((prev) => (prev.includes(key) ? prev.filter((item) => item !== key) : [...prev, key]));
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) {
+          onClose();
+        }
+      }}
+    >
+      <div
+        className={`relative max-h-[80vh] w-[560px] overflow-hidden rounded-[24px] border shadow-2xl ${
+          isDark
+            ? 'border-slate-700 bg-slate-900 text-slate-100'
+            : 'border-[#f3d6d6] bg-white text-gray-900'
+        }`}
+      >
+        <div
+          className={`h-1 w-full ${
+            isDark
+              ? 'bg-gradient-to-r from-slate-700 via-slate-500 to-slate-700'
+              : 'bg-gradient-to-r from-[#ffd4d4] via-[#ff8c8c] to-[#ffd4d4]'
+          }`}
+        />
+
+        <div className="flex items-center justify-between px-6 pb-3 pt-5">
+          <div>
+            <h2 className="text-base font-semibold">选择要绑定的技能</h2>
+            <p className={`mt-0.5 text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              已选 {draft.length} 项，共 {skills.length} 个可选技能
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className={`flex h-9 w-9 items-center justify-center rounded-xl transition ${
+              isDark
+                ? 'text-slate-400 hover:bg-slate-700 hover:text-slate-100'
+                : 'text-gray-400 hover:bg-[#fff3f3] hover:text-[#ef4444]'
+            }`}
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="px-6 pb-3">
+          <div
+            className={`flex items-center gap-2 rounded-xl border px-3 py-2 ${
+              isDark ? 'border-slate-700 bg-slate-950/50' : 'border-gray-200 bg-white'
+            }`}
+          >
+            <Search className={`h-4 w-4 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
+            <input
+              type="text"
+              placeholder="搜索技能名称 / 描述..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className={`flex-1 bg-transparent text-sm outline-none ${
+                isDark
+                  ? 'text-slate-100 placeholder:text-slate-500'
+                  : 'text-gray-800 placeholder:text-gray-400'
+              }`}
+            />
+          </div>
+        </div>
+
+        <div className="max-h-[50vh] overflow-y-auto px-3 pb-2">
+          {filtered.length === 0 ? (
+            <div
+              className={`px-3 py-10 text-center text-sm ${
+                isDark ? 'text-slate-500' : 'text-gray-400'
+              }`}
+            >
+              没有匹配的技能
+            </div>
+          ) : (
+            filtered.map((skill) => {
+              const checked = draft.includes(skill.key);
+              return (
+                <button
+                  key={skill.key}
+                  type="button"
+                  onClick={() => toggle(skill.key)}
+                  className={`mx-1 my-1 flex w-[calc(100%-0.5rem)] items-start gap-3 rounded-xl border px-3 py-2.5 text-left transition ${
+                    isDark
+                      ? checked
+                        ? 'border-emerald-500/50 bg-emerald-500/10'
+                        : 'border-slate-700 bg-slate-900/40 hover:bg-slate-800/60'
+                      : checked
+                        ? 'border-emerald-200 bg-emerald-50'
+                        : 'border-gray-200 bg-white hover:bg-gray-50'
+                  }`}
+                >
+                  <div className="mt-0.5 shrink-0">
+                    {checked ? (
+                      <CheckCircle2 className="h-4 w-4 text-emerald-500" />
+                    ) : (
+                      <div
+                        className={`h-4 w-4 rounded-full border ${
+                          isDark ? 'border-slate-600' : 'border-gray-300'
+                        }`}
+                      />
+                    )}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div
+                      className={`text-sm font-semibold ${
+                        isDark ? 'text-slate-100' : 'text-gray-900'
+                      }`}
+                    >
+                      {skill.name}
+                      <span
+                        className={`ml-2 font-mono text-[10px] ${
+                          isDark ? 'text-slate-500' : 'text-gray-400'
+                        }`}
+                      >
+                        {skill.key} · {skill.type}
+                      </span>
+                    </div>
+                    <div
+                      className={`mt-0.5 line-clamp-2 text-xs ${
+                        isDark ? 'text-slate-400' : 'text-gray-500'
+                      }`}
+                    >
+                      {skill.description || '暂无描述'}
+                    </div>
+                  </div>
+                </button>
+              );
+            })
+          )}
+        </div>
+
+        <div
+          className={`flex items-center justify-end gap-3 border-t px-6 pb-4 pt-3 ${
+            isDark ? 'border-slate-700' : 'border-gray-200'
+          }`}
+        >
+          <button
+            type="button"
+            onClick={onClose}
+            className={`rounded-xl px-4 py-2 text-sm transition ${
+              isDark
+                ? 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'
+                : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700'
+            }`}
+          >
+            取消
+          </button>
+          <button
+            type="button"
+            onClick={() => onConfirm(draft)}
+            className="rounded-xl bg-emerald-500 px-4 py-2 text-sm font-medium text-white shadow transition hover:bg-emerald-600"
+          >
+            确认绑定（{draft.length}）
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web-code/components/angentchat/ExpertMatchCards.tsx b/web-code/components/angentchat/ExpertMatchCards.tsx
new file mode 100644
index 00000000..34306bae
--- /dev/null
+++ b/web-code/components/angentchat/ExpertMatchCards.tsx
@@ -0,0 +1,248 @@
+import React from 'react';
+import { Check, Plus, RefreshCcw, Sparkles, UserSearch } from 'lucide-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import { InlineCollapsible, StageHeader, ThinkingBlock } from './SixStepCards';
+import type { ExpertCard, ExpertMatchData } from './types';
+
+interface ExpertCardItemProps {
+  card: ExpertCard;
+  index: number;
+  selected: boolean;
+  disabled?: boolean;
+  onSelect: (id: string) => void;
+}
+
+const renderAvatar = (avatar: string | undefined, fallback: React.ReactNode, isDark: boolean) => {
+  if (avatar && avatar.trim().startsWith('<svg')) {
+    return (
+      <span
+        className={`flex h-10 w-10 items-center justify-center overflow-hidden rounded-2xl ${
+          isDark ? 'bg-slate-700/40' : 'bg-white shadow-sm'
+        }`}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: avatar }}
+      />
+    );
+  }
+  return (
+    <span
+      className={`flex h-10 w-10 items-center justify-center rounded-2xl ${
+        isDark ? 'bg-cyan-500/20 text-cyan-200' : 'bg-red-50 text-red-500'
+      }`}
+    >
+      {fallback}
+    </span>
+  );
+};
+
+const ExpertCardItem: React.FC<ExpertCardItemProps> = ({ card, index, selected, disabled, onSelect }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  const baseBorder = selected
+    ? isDark
+      ? 'border-cyan-300/60 ring-1 ring-cyan-300/40 shadow-lg shadow-cyan-500/10 bg-gradient-to-br from-slate-800/70 to-cyan-900/30'
+      : 'border-red-300 ring-1 ring-red-200 shadow-md shadow-red-100 bg-gradient-to-br from-white to-red-50/60'
+    : isDark
+      ? 'border-slate-700/60 bg-gradient-to-br from-slate-800/40 to-slate-900/20 hover:border-cyan-300/40'
+      : 'border-gray-100 bg-white hover:border-red-200';
+
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={() => onSelect(card.id)}
+      className={`w-full text-left rounded-2xl border p-3 transition-all sixstep-fade-up disabled:cursor-not-allowed disabled:opacity-60 ${baseBorder}`}
+    >
+      <div className="flex items-start gap-3">
+        <span
+          className={`w-7 h-7 rounded-xl border flex items-center justify-center text-xs font-semibold shrink-0 ${
+            isDark
+              ? 'bg-cyan-500/20 text-cyan-200 border-cyan-400/30'
+              : 'bg-red-50 text-red-600 border-red-200'
+          }`}
+        >
+          {index.toString().padStart(2, '0')}
+        </span>
+        {renderAvatar(card.avatarUrl, <UserSearch className="w-5 h-5" />, isDark)}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <div className={`text-sm font-semibold leading-snug truncate ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              {card.name}
+            </div>
+            {card.isCustom && (
+              <span
+                className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${
+                  isDark ? 'bg-violet-500/20 text-violet-200' : 'bg-violet-50 text-violet-600'
+                }`}
+              >
+                新建
+              </span>
+            )}
+          </div>
+          <div className={`text-xs mt-1 leading-relaxed line-clamp-3 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+            {card.detail || '暂无描述'}
+          </div>
+        </div>
+        <span
+          className={`shrink-0 flex h-6 w-6 items-center justify-center rounded-full border transition ${
+            selected
+              ? isDark
+                ? 'border-cyan-300 bg-cyan-400/30 text-cyan-100'
+                : 'border-red-400 bg-red-500 text-white'
+              : isDark
+                ? 'border-slate-600 text-transparent'
+                : 'border-gray-300 text-transparent'
+          }`}
+        >
+          <Check className="w-3.5 h-3.5" />
+        </span>
+      </div>
+    </button>
+  );
+};
+
+interface ExpertMatchCardsProps {
+  data: ExpertMatchData;
+  onSelectExpert: (id: string) => void;
+  onRefetch: () => void;
+  onCreateExpert: () => void;
+  onConfirm: () => void;
+  locked?: boolean;
+}
+
+const ExpertMatchCards: React.FC<ExpertMatchCardsProps> = ({
+  data,
+  onSelectExpert,
+  onRefetch,
+  onCreateExpert,
+  onConfirm,
+  locked,
+}) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  const isSearching = data.status === 'searching';
+  const isCreating = data.status === 'creating';
+  const isReady = data.status === 'ready' || data.status === 'confirmed';
+  const cards = data.experts ?? [];
+
+  return (
+    <InlineCollapsible
+      defaultOpen
+      title={
+        <StageHeader
+          title="专家匹配"
+          desc={
+            isSearching
+              ? cards.length > 0
+                ? '专家已匹配完成，可选择一位进入下一步'
+                : '正在调用查找专家 MCP...'
+              : isCreating
+                ? '正在调用创建专家 MCP...'
+                : data.status === 'error'
+                  ? data.errorMessage || '专家匹配失败'
+                  : '请选择一位专家进入下一步'
+          }
+          count={cards.length}
+          loading={(isSearching && cards.length === 0) || isCreating}
+          done={data.status === 'confirmed'}
+          icon={UserSearch}
+          accent="actor"
+        />
+      }
+    >
+      <div className="space-y-3">
+        <ThinkingBlock text={data.thinking} loading={isSearching && cards.length === 0 && !data.thinking} />
+
+        <InlineCollapsible
+          variant="subtle"
+          defaultOpen
+          title={
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-medium">推荐专家列表</span>
+              <span className="text-[10px] opacity-70">{cards.length} 位</span>
+            </div>
+          }
+        >
+          {cards.length === 0 ? (
+            <div className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+              {isSearching && cards.length === 0 ? '正在匹配专家...' : '暂无匹配的专家'}
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {cards.map((card, idx) => (
+                <ExpertCardItem
+                  key={card.id}
+                  card={card}
+                  index={idx + 1}
+                  selected={data.selectedExpertId === card.id}
+                  disabled={locked}
+                  onSelect={onSelectExpert}
+                />
+              ))}
+            </div>
+          )}
+        </InlineCollapsible>
+
+        {data.status === 'error' && (
+          <div className={`rounded-xl border px-3 py-2 text-xs ${
+            isDark ? 'border-rose-500/30 bg-rose-500/10 text-rose-200' : 'border-rose-200 bg-rose-50 text-rose-700'
+          }`}>
+            {data.errorMessage}
+          </div>
+        )}
+
+        <div className="flex flex-wrap items-center gap-2 pt-1">
+          <button
+            type="button"
+            onClick={onRefetch}
+            disabled={locked || isSearching || isCreating}
+            className={`inline-flex items-center gap-1.5 rounded-xl border px-3 py-1.5 text-xs font-medium transition disabled:cursor-not-allowed disabled:opacity-50 ${
+              isDark
+                ? 'border-slate-600 bg-slate-800/60 text-slate-200 hover:bg-slate-700'
+                : 'border-gray-200 bg-white text-gray-700 hover:bg-gray-50'
+            }`}
+          >
+            <RefreshCcw className={`w-3.5 h-3.5 ${isSearching ? 'animate-spin' : ''}`} />
+            重新查找
+          </button>
+
+          <div className={`flex-1 text-right text-[11px] ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+            没有想要的专家？
+          </div>
+
+          <button
+            type="button"
+            onClick={onCreateExpert}
+            disabled={locked || isCreating || isSearching}
+            className={`inline-flex items-center gap-1.5 rounded-xl border px-3 py-1.5 text-xs font-medium transition disabled:cursor-not-allowed disabled:opacity-50 ${
+              isDark
+                ? 'border-violet-400/40 bg-violet-500/15 text-violet-100 hover:bg-violet-500/25'
+                : 'border-violet-200 bg-violet-50 text-violet-700 hover:bg-violet-100'
+            }`}
+          >
+            <Plus className="w-3.5 h-3.5" />
+            创建专家
+          </button>
+
+          <button
+            type="button"
+            onClick={onConfirm}
+            disabled={locked || !data.selectedExpertId || !isReady}
+            className={`inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs font-semibold text-white transition disabled:cursor-not-allowed disabled:opacity-50 ${
+              isDark
+                ? 'bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-400 hover:to-blue-400'
+                : 'bg-gradient-to-r from-red-500 to-rose-500 hover:from-red-400 hover:to-rose-400'
+            }`}
+          >
+            <Sparkles className="w-3.5 h-3.5" />
+            选择该专家
+          </button>
+        </div>
+      </div>
+    </InlineCollapsible>
+  );
+};
+
+export default ExpertMatchCards;
diff --git a/web-code/components/angentchat/INTENT_INTEGRATION.md b/web-code/components/angentchat/INTENT_INTEGRATION.md
new file mode 100644
index 00000000..aae12cd8
--- /dev/null
+++ b/web-code/components/angentchat/INTENT_INTEGRATION.md
@@ -0,0 +1,846 @@
+# 前端意图识别与交互集成 — 实现指南
+
+> 对应后端系统：`backend/app/intent/` + `backend/app/orchestrator.py`  
+> 前端主文件：`SixStepChatPage.tsx`, `api.ts`, `types.ts`, `SixStepConversation.tsx`  
+> 完成度：**全部 6 步 + follow_up ✅**
+
+---
+
+## 一、核心概念回顾
+
+### 意图体系（Intent System）
+
+前端负责**传递上下文** + **处理 SSE 事件流** + **更新 UI 状态**，后端负责**识别意图** + **分支路由** + **执行业务**。
+
+```
+前端按需收集当前状态信息
+   ↓
+打包到 IntentOrchestrateRequest
+   ↓
+POST /orchestrate-stream (SSE)
+   ↓
+后端 detect_intent() 识别意图
+   ↓
+根据意图分支，emit SSE 事件
+   ↓
+前端处理事件，同步更新 message 和 phase
+```
+
+### 七种意图与前端对应
+
+| 意图 | 触发词 | 后端处理 | 前端转换 | 最终状态 |
+|------|-------|---------|---------|---------|
+| **find_expert** | "找专家" | find_expert MCP | phase: idle → expert-match | 显示专家卡片 + MCP 选择弹窗 |
+| **reselect_expert** | "换专家" | find_expert MCP + 过滤 | phase: expert-confirm → expert-match | 显示新的专家卡片 |
+| **start_analysis** | "分析" "开始" | 全新 6bf | phase: expert-confirm → generate | 显示 6bf 阶段卡片和流程图 |
+| **restart_analysis** | "重新分析" | 清空+重新执行 | phase: completed → generate | 同上 |
+| **continue_analysis** | "继续" (在 paused 时) | 从中断点恢复 | phase: paused → generate | 显示 resume 提示 + 继续的卡片 |
+| **follow_up** | "为什么" "解释" (在 completed 时) | LLM 回答 | phase: completed → follow-up | Markdown 渲染追问回答 |
+| **unknown** | 含糊/歧义 | 请求澄清 | phase: * → clarifying | 显示澄清问题 |
+
+---
+
+## 二、数据模型层（types.ts）
+
+### 2.1 SixStepPhase 枚举
+
+```typescript
+export type SixStepPhase =
+  | 'idle'              // 【初始】未开始任何操作
+  | 'intent-detecting'  // 【过渡】意图正在识别中（通常很短，用户看不到）
+  | 'expert-match'      // 【等待】展示专家卡片，用户可浏览、搜索、重选
+  | 'expert-confirm'    // 【交互】MCP 多选弹窗打开，用户确认选择
+  | 'generate'          // 【处理】6bf 编排执行中，显示进度和卡片
+  | 'paused'            // 【中断】用户手动停止；可继续或重新分析
+  | 'completed'         // 【完成】编排全部完成；可追问或重新分析
+  | 'clarifying'        // 【澄清】后端无法理解，请用户补充
+  | 'follow-up';        // 【追问】正在基于已有分析回答用户问题
+```
+
+**关键点**：
+- `expert-match` vs `expert-confirm` 的区别：前者是**显示结果**，后者是**交互确认**（MCP 弹窗）
+- `paused` **必须**在 `handleStop()` 手动设置，后端的 continue_analysis 分支不会主动发送 paused
+- `follow-up` 仅在 `current_phase === 'completed'` 且用户输入匹配追问模式时触发
+
+### 2.2 SixStepMessage 新增字段
+
+```typescript
+export interface SixStepMessage {
+  // ... 原有字段 (id, role, content, timestamp, stages, finalAnswer, ...)
+  
+  // ========== 意图识别相关 ==========
+  intent?: {
+    name: string;          // 识别的意图名（find_expert / follow_up / unknown 等）
+    confidence?: number;   // 置信度 [0.0, 1.0]
+    reason?: string;       // 识别理由（用于 debug/日志）
+  };
+  
+  // ========== 澄清问题 ==========
+  clarifyQuestion?: string; // 后端提出的澄清问题（当 intent.name === "unknown"）
+  
+  // ========== 继续分析上下文 ==========
+  /**
+   * 原始步骤数据（来自后端 step_end 事件）。
+   * 结构：BackendStepResult[] = { key, name, status, thinking, structured_outputs, markdown, references }
+   * 用途：
+   *  - 当用户暂停（handleStop）时，保存这些数据
+   *  - 当用户"继续分析"时，传回后端作为 last_steps，后端可恢复上下文
+   *  - 当用户"追问"时，后端用这些数据构造 context，生成更准确的回答
+   */
+  rawSteps?: BackendStepResult[];
+  
+  /**
+   * 本轮是从哪个步骤继续的（来自后端 resume 事件）。
+   * 值：step key（如 "behavior_factor"）或 step name（如 "预期行为与驱动因素"）
+   * UI 用途：在 AssistantMessage 上方显示"⏸ 从 [步骤名] 继续"提示
+   */
+  resumedFrom?: string;
+}
+```
+
+### 2.3 IntentOrchestrateRequest（api.ts）
+
+```typescript
+export interface IntentOrchestrateRequest {
+  // 意图识别相关
+  intent_mode?: 'auto' | 'force_orchestrate' | 'force_find_expert';
+  
+  // 会话状态（前端告知后端）
+  current_phase: string;
+  selected_expert?: ExpertCard | null;
+  selected_mcps?: SelectableMcpKey[];
+  
+  // 继续分析相关
+  last_steps?: BackendStepResult[];
+  resume_from_step?: string;
+  expert_candidates?: ExpertCard[];  // 用于 reselect_expert 时过滤
+}
+```
+
+---
+
+## 三、流处理层（api.ts）
+
+### 3.1 runIntentOrchestrateStream() — 统一 SSE 处理器
+
+```typescript
+export async function runIntentOrchestrateStream(
+  message: string,
+  options: {
+    onUpdate?: (msg: SixStepMessage) => void;
+    onComplete?: () => void;
+    abortSignal?: AbortSignal;
+  },
+  requestBody?: IntentOrchestrateRequest
+): Promise<SixStepStreamController>
+```
+
+**内部逻辑概述**：
+
+```
+1. 发起 POST /orchestrate-stream（带 requestBody 和 AbortSignal）
+2. 遍历 SSE 事件流，解析 JSON
+3. 根据事件名分发到不同处理函数
+4. 每次修改 message 后调用 onUpdate(message)，触发前端 re-render
+5. 接收 done 或 error 事件时停止
+```
+
+### 3.2 关键事件处理函数
+
+#### **intent 事件**
+
+```typescript
+// 来自后端：{ intent: "follow_up", confidence: 0.88, reason: "..." }
+
+case 'intent':
+  const intentName = data.intent;
+  message.intent = { name: intentName, ...data };
+  
+  // 👇 根据意图确定流程分支
+  if (intentName === 'find_expert' || intentName === 'reselect_expert') {
+    flow = 'expert';  // 接下来期待 expert_start/expert_end
+  } else if (intentName === 'follow_up') {
+    flow = 'follow_up';  // 接下来期待 delta（文本块）
+    message.phase = 'follow-up';
+    message.outputFormat = 'markdown';
+  } else if (intentName === 'unknown') {
+    flow = 'clarify';  // 接下来期待 clarify 事件
+  } else {
+    // start_analysis / restart_analysis / continue_analysis
+    flow = 'generate';  // 接下来期待 start / step_start / step_end
+  }
+  break;
+```
+
+**前端的 flow 变量**（内部状态，不持久化）：用于判断预期的**下一个事件类型**和**数据处理方式**。
+
+#### **expert_start / expert_end 事件**
+
+```typescript
+case 'expert_start':
+  message.phase = 'expert-match';
+  message.expertMatch = {
+    status: 'searching',
+    thinking: '',
+    experts: [],
+    selectedExpertId: undefined,
+  };
+  break;
+
+case 'expert_end':
+  // data = { experts: [...], thinking: str, is_reselect: bool, ... }
+  message.expertMatch!.status = 'ready';
+  message.expertMatch!.thinking = data.thinking;
+  
+  // 逐张卡片追加，配合 pop 动画
+  for (const expert of data.experts) {
+    message.expertMatch!.experts.push({
+      id: expert.id,
+      name: expert.name,
+      detail: expert.detail,
+      ...
+    });
+    // 每张卡片之间延迟 100ms，触发 pop 动画
+  }
+  
+  // 卡片全部加载后，更新 phase 并打开 MCP 选择弹窗
+  message.phase = 'expert-confirm';
+  // → SixStepChatPage 监听 expertMatch.status === 'ready'，打开 mcpModalOpen
+  break;
+```
+
+#### **clarify 事件**
+
+```typescript
+case 'clarify':
+  message.phase = 'clarifying';
+  message.clarifyQuestion = data.message;  // "我没有完全理解你的意图，请补充说明..."
+  break;
+```
+
+#### **resume 事件**（continue_analysis 特有）
+
+```typescript
+case 'resume':
+  // data = { task_id, resume_from, mcp_list: [...] }
+  message.resumedFrom = data.resume_from;  // 后端告诉前端从哪个步骤继续
+  
+  // UI 用途：在 AssistantMessage 顶部显示 "⏸ 从 [步骤名] 继续"
+  // 该变量会保留在消息中，整个 continue 过程结束后仍显示
+  break;
+```
+
+#### **start 事件**（开始 6bf 编排）
+
+```typescript
+case 'start':
+  message.phase = 'generate';
+  // data = { task_id, mcp_list: [...], ts: number }
+  
+  // 👇 防止 restart_analysis 时保留旧卡片
+  if (!isResume) {  // isResume 由 resume 事件设置，continue_analysis 时为 true
+    message.stages = {};  // 清空
+    message.subStepStatus = {};
+    message.mainStepStatus = { info: 'done', sixstep: 'pending', final: 'pending' };
+  }
+  // 若 isResume === true（continue_analysis），则保留已有的 stages，只追加新步骤
+  
+  message.currentMainStep = 'sixstep';
+  break;
+```
+
+**关键**：`!isResume` 的条件确保 **restart_analysis 时清空旧卡片**，而 **continue_analysis 时保留已有卡片**。
+
+#### **step_start / step_end 事件**
+
+```typescript
+case 'step_start':
+  // data = { name: "目的分析", key: "purpose" }
+  const stepKey = data.key;
+  if (stepKey === 'purpose') {
+    message.subStepStatus['purpose'] = 'running';
+    message.currentSubStep = 'purpose';
+    message.stages!.purpose = { thinking: '', cards: [], complete: false };
+  }
+  // ... 类似处理 actor / behavior / narrative
+  break;
+
+case 'step_end':
+  // data = { key, status, thinking, structured_outputs, markdown, references, ... }
+  const stepKey = data.key;
+  
+  // 👇 原始数据存档，用于后续 continue_analysis / follow_up
+  if (stepKey !== 'info_prepare') {
+    message.rawSteps = message.rawSteps || [];
+    message.rawSteps.push(data);  // 保存完整的 BackendStepResult
+  }
+  
+  // 更新当前消息的对应阶段
+  if (stepKey === 'purpose') {
+    message.stages!.purpose!.thinking = data.thinking;
+    message.stages!.purpose!.cards = buildPurposeCards(data.structured_outputs);
+    message.stages!.purpose!.complete = true;
+    message.subStepStatus['purpose'] = 'done';
+  }
+  // ... 类似处理 actor / behavior / narrative
+  
+  break;
+```
+
+#### **delta 事件**（follow_up 专有）
+
+```typescript
+case 'delta':
+  // data = { text: "..." }（文本块）
+  // 仅当 flow === 'follow_up' 时处理
+  
+  if (flow === 'follow_up') {
+    message.markdownContent = (message.markdownContent || '') + data.text;
+    onUpdate(message);  // 逐块更新前端，流式显示
+  }
+  break;
+```
+
+#### **done 事件**
+
+```typescript
+case 'done':
+  // 各分支的终止信号
+  
+  if (flow === 'follow_up') {
+    message.phase = 'completed';  // ✅ follow_up 回答完成
+  } else if (flow === 'expert') {
+    // 专家查询完成，等待前端用户在弹窗中确认选择
+    // phase 保持 'expert-confirm'
+  } else if (flow === 'generate') {
+    message.phase = 'completed';  // ✅ 6bf 推演完成
+  } else if (flow === 'clarify') {
+    // 保持 'clarifying'，等待用户重新输入
+  }
+  
+  onComplete?.();  // 回调：请求完成
+  break;
+```
+
+---
+
+## 四、主页面逻辑（SixStepChatPage.tsx）
+
+### 4.1 新增状态变量
+
+```typescript
+// 当前阶段（驱动 UI 和后端意图识别）
+const [currentPhase, setCurrentPhase] = useState<SixStepPhase>('idle');
+
+// 已选专家和 MCP（用于请求体和 UI 展示）
+const [selectedExpert, setSelectedExpert] = useState<ExpertCard | null>(null);
+const [selectedMcps, setSelectedMcps] = useState<SelectableMcpKey[]>([]);
+
+// 已推荐过的专家列表（reselect_expert 时用于过滤）
+const [expertCandidates, setExpertCandidates] = useState<ExpertCard[]>([]);
+
+// 临时保存原始用户输入（确认专家后需要）
+const [lastUserInput, setLastUserInput] = useState<string>('');
+```
+
+### 4.2 handleSend() — 请求体构造
+
+```typescript
+async function handleSend(inputText: string) {
+  setLastUserInput(inputText);  // 保存原始输入
+  
+  // 【1】获取上次的助手消息（用于获取 rawSteps）
+  const lastAssistant = messages.findLast(m => m.role === 'assistant');
+  
+  // 【2】构造请求体（关键！传递上下文给后端）
+  const requestBody: IntentOrchestrateRequest = {
+    intent_mode: 'auto',  // 自动意图识别
+    current_phase: currentPhase,
+    selected_expert: selectedExpert,
+    selected_mcps: selectedMcps,
+    last_steps: lastAssistant?.rawSteps || [],  // 👈 用于 continue / follow_up
+    resume_from_step: undefined,  // 让后端自动推断
+    expert_candidates: expertCandidates,  // 👈 用于 reselect_expert 过滤
+  };
+  
+  // 【3】调用流处理
+  const controller = await runIntentOrchestrateStream(
+    inputText,
+    {
+      onUpdate: (msg) => {
+        // 替换消息列表中的末尾消息（正在生成的消息）
+        setMessages(prev => {
+          const newMessages = [...prev];
+          newMessages[newMessages.length - 1] = msg;
+          return newMessages;
+        });
+        
+        // 同步更新当前阶段
+        setCurrentPhase(msg.phase || 'idle');
+        
+        // 【关键】监听专家卡片加载完成，打开 MCP 选择弹窗
+        if (msg.expertMatch?.status === 'ready') {
+          setMcpModalOpen(true);
+        }
+      },
+      onComplete: () => {
+        setIsGenerating(false);
+      },
+    },
+    requestBody
+  );
+  
+  controllerRef.current = controller;
+  setIsGenerating(true);
+}
+```
+
+**核心三步**：
+1. **构造请求体**：携带所有必要的上下文（current_phase, last_steps, expert_candidates）
+2. **调用流处理**：传入 onUpdate 回调，每个 SSE 事件都更新前端
+3. **监听事件**：特别是 expertMatch.status === 'ready'，自动打开 MCP 弹窗
+
+### 4.3 handleMcpModalConfirm() — 确认专家后立即启动分析
+
+```typescript
+function handleMcpModalConfirm(selectedExpert: ExpertCard, selectedMcpList: SelectableMcpKey[]) {
+  // 【1】保存用户选择
+  setSelectedExpert(selectedExpert);
+  setSelectedMcps(selectedMcpList);
+  setExpertCandidates(prev => [...prev, selectedExpert]);  // 添加到候选列表
+  
+  // 【2】立即用 force_orchestrate 启动分析（不需要等用户再次输入）
+  const requestBody: IntentOrchestrateRequest = {
+    intent_mode: 'force_orchestrate',  // 👈 强制执行编排，不识别意图
+    current_phase: 'expert-confirm',
+    selected_expert: selectedExpert,
+    selected_mcps: selectedMcpList,
+    last_steps: [],
+  };
+  
+  // 【3】使用保存的原始输入（用户之前在输入框里输入的文本）
+  runIntentOrchestrateStream(
+    lastUserInput,  // 👈 原始输入
+    {
+      onUpdate: (msg) => {
+        setMessages(prev => [...prev.slice(0, -1), msg]);
+        setCurrentPhase(msg.phase || 'idle');
+      },
+      onComplete: () => setIsGenerating(false),
+    },
+    requestBody
+  );
+}
+```
+
+**关键点**：
+- `intent_mode: 'force_orchestrate'` — 跳过意图识别，直接执行 6bf
+- 使用 `lastUserInput`（保存的原始输入）而非动态输入
+- 添加 selectedExpert 到 expertCandidates，以便后续 reselect 时过滤
+
+### 4.4 handleRefetchExpert() — 重选专家
+
+```typescript
+function handleRefetchExpert() {
+  const requestBody: IntentOrchestrateRequest = {
+    intent_mode: 'force_find_expert',  // 👈 强制查询专家
+    current_phase: 'expert-confirm',
+    expert_candidates: expertCandidates,  // 👈 告诉后端已有候选，避免重复推荐
+    last_steps: [],
+  };
+  
+  runIntentOrchestrateStream(
+    lastUserInput,
+    {
+      onUpdate: (msg) => {
+        setMessages(prev => [...prev.slice(0, -1), msg]);
+        setCurrentPhase(msg.phase || 'idle');
+        // MCP 弹窗保持打开，等待用户重新选择
+      },
+    },
+    requestBody
+  );
+}
+```
+
+### 4.5 handleStop() — 停止生成
+
+```typescript
+function handleStop() {
+  controllerRef.current?.stop();
+  
+  // 👇 关键：标记当前消息为 paused，供后续 continue_analysis 识别
+  setMessages(prev => {
+    const newMessages = [...prev];
+    const lastMsg = newMessages[newMessages.length - 1];
+    if (lastMsg?.role === 'assistant') {
+      lastMsg.phase = 'paused';
+    }
+    return newMessages;
+  });
+  
+  setCurrentPhase('paused');
+  setIsGenerating(false);
+}
+```
+
+**为什么需要标记 paused？**
+- 后端的 intent 识别器会检查 `current_phase === 'paused'`，优先返回 `continue_analysis` 意图
+- 前端显示 "⏸ 从 [步骤] 继续" 提示，让用户清楚地知道可以继续
+
+---
+
+## 五、对话区渲染（SixStepConversation.tsx）
+
+### 5.1 AssistantMessage 的新渲染逻辑
+
+```typescript
+const AssistantMessage = ({ message, active }: Props) => {
+  const isExpertPhase = message.phase === 'expert-match' || message.phase === 'expert-confirm';
+  const isFollowUp = message.phase === 'follow-up';
+  const isClarifying = message.phase === 'clarifying';
+  const isMarkdown = message.outputFormat === 'markdown';
+  
+  // 👇 【防护条件】防止旧分析内容在专家/澄清/追问阶段出现
+  const showAnalysisContent = !isExpertPhase && !isClarifying && !isFollowUp;
+  
+  return (
+    <div>
+      {/* 【分支 1】专家匹配阶段 */}
+      {isExpertPhase && message.expertMatch && (
+        <ExpertMatchCards
+          data={message.expertMatch}
+          onRefetch={onRefetch}
+          onConfirm={onConfirm}
+        />
+      )}
+      
+      {/* 【分支 2】6bf 分析阶段（防护条件） */}
+      {showAnalysisContent && (
+        <>
+          {/* 继续分析提示 */}
+          {message.resumedFrom && (
+            <div className="resume-hint">
+              ⏸ 从「{message.resumedFrom}」继续
+            </div>
+          )}
+          
+          {/* 各阶段卡片 */}
+          {message.stages?.info && <InfoStage ... />}
+          {message.stages?.purpose && <PurposeStage ... />}
+          {message.stages?.actor && <ActorStage ... />}
+          {message.stages?.behavior && <BehaviorStage ... />}
+          {message.stages?.narrative && <NarrativeStage ... />}
+          {message.finalAnswer && <FinalAnswer ... />}
+        </>
+      )}
+      
+      {/* 【分支 3】追问回答（Markdown） */}
+      {isFollowUp && message.markdownContent && (
+        <MarkdownRenderer content={message.markdownContent} />
+      )}
+      
+      {/* 【分支 4】Markdown 输出格式 */}
+      {isMarkdown && !isFollowUp && message.markdownContent && (
+        <MarkdownRenderer content={message.markdownContent} />
+      )}
+      
+      {/* 【分支 5】澄清问题 */}
+      {isClarifying && message.clarifyQuestion && (
+        <div className="clarify-block">
+          <p className="text-sm text-gray-600">我需要你进一步说明：</p>
+          <p className="font-medium">{message.clarifyQuestion}</p>
+          <p className="text-xs text-gray-500 mt-2">请重新输入以补充信息</p>
+        </div>
+      )}
+    </div>
+  );
+};
+```
+
+**关键防护条件**：
+
+```typescript
+const showAnalysisContent = !isExpertPhase && !isClarifying && !isFollowUp;
+```
+
+这一行确保了：
+- ✅ `expert-match` 阶段只显示专家卡片，不显示旧分析
+- ✅ `clarifying` 阶段只显示澄清问题，不显示其他内容
+- ✅ `follow-up` 阶段只显示 Markdown 回答，不显示旧分析
+
+### 5.2 阶段加载动画
+
+```typescript
+// 当前阶段正在生成时，显示 shimmer（流光）动画
+const purposeGenerating = message.phase === 'generate' && 
+                         message.currentSubStep === 'purpose' &&
+                         active;
+
+<StageHeader
+  loading={purposeGenerating}
+  icon={<Target ... />}
+  title="目的分析"
+  count={message.stages?.purpose?.cards.length || 0}
+/>
+```
+
+---
+
+## 六、生命周期示例
+
+### 6.1 用户"找专家"的流程
+
+```
+【用户输入】"帮我找个专家"
+    ↓
+【前端】handleSend("帮我找个专家")
+  - requestBody: { intent_mode: 'auto', current_phase: 'idle', last_steps: [] }
+  - 调用 runIntentOrchestrateStream
+    ↓
+【后端】detect_intent("帮我找个专家", current_phase='idle', ...)
+  - 规则识别：匹配 _FIND_PATTERNS → confidence=0.88
+  - 返回：IntentResult(intent='find_expert', ...)
+    ↓
+【后端】根据 intent='find_expert'，调用 _stream_find_expert()
+  - emit: expert_start
+  - 查询 find_expert MCP agent
+  - emit: expert_end { experts: [...] }
+  - emit: done
+    ↓
+【前端】处理 SSE 事件
+  - intent: { name: 'find_expert', ... }
+    → flow = 'expert'
+  - expert_start
+    → message.phase = 'expert-match'
+    → message.expertMatch.status = 'searching'
+  - expert_end
+    → message.expertMatch.status = 'ready'
+    → message.expertMatch.experts = [...]
+    → message.phase = 'expert-confirm'
+    → 检测到 expertMatch.status === 'ready'
+    → setMcpModalOpen(true) 打开 MCP 选择弹窗
+  - done
+    → onComplete()
+    ↓
+【用户】在 MCP 选择弹窗中选择专家和 MCP，点击"确认"
+    ↓
+【前端】handleMcpModalConfirm(selectedExpert, selectedMcps)
+  - setSelectedExpert(selectedExpert)
+  - setSelectedMcps(selectedMcps)
+  - requestBody: { intent_mode: 'force_orchestrate', ... }
+  - 调用 runIntentOrchestrateStream(lastUserInput, ...)
+    ↓
+【后端】orchestrate_stream() with intent_mode='force_orchestrate'
+  - 跳过意图识别
+  - 调用 _stream_orchestrate(..., intent_name='start_analysis')
+  - emit: start
+  - emit: step_start / step_end × 4 (purpose / actor / behavior / narrative)
+  - emit: flow { nodes, edges }
+  - emit: done
+    ↓
+【前端】处理 SSE 事件
+  - start
+    → message.phase = 'generate'
+    → 初始化 stages 和状态
+  - step_start × 4
+    → 每个步骤的 status = 'running'
+    → 对应阶段初始化为空
+  - step_end × 4
+    → 填充 stages[stepKey].cards
+    → message.rawSteps.push(data)
+    → status = 'done'
+  - flow
+    → 流程图数据更新（供沙箱显示）
+  - done
+    → message.phase = 'completed'
+    ↓
+【前端 UI】
+  - ✅ 显示 4 个阶段的卡片
+  - ✅ 显示流程图沙箱
+  - ✅ 阶段完成时有 pop 动画和叙事卡片
+```
+
+### 6.2 用户"继续分析"的流程
+
+```
+【前次】完成了目的、行为体阶段，用户点击"停止"
+  - 后端返回 step_end（预期行为/驱动因素）但用户取消
+  - message.phase = 'paused'
+  - message.rawSteps = [
+      { key: 'purpose', status: 'completed', ... },
+      { key: 'actor', status: 'completed', ... },
+      { key: 'behavior_factor', status: 'running', ... }
+    ]
+    ↓
+【用户输入】"继续"
+    ↓
+【前端】handleSend("继续")
+  - requestBody: {
+      intent_mode: 'auto',
+      current_phase: 'paused',  // 👈 关键
+      last_steps: message.rawSteps,  // 👈 关键
+    }
+    ↓
+【后端】detect_intent("继续", current_phase='paused', last_steps=[...])
+  - 规则识别：匹配 _CONTINUE_PATTERNS AND current_phase='paused'
+  - 返回：IntentResult(intent='continue_analysis', confidence=0.90)
+    ↓
+【后端】_stream_orchestrate(..., intent_name='continue_analysis')
+  - _resume_context_from_steps(req.last_steps, None)
+    → 检查已完成的步骤：['purpose', 'actor']
+    → resume_key = 'behavior_factor'（下一个未完成的）
+  - emit: resume { resume_from: 'behavior_factor', mcp_list: ['behavior_factor', 'narrative'] }
+  - emit: start { mcp_list: ['behavior_factor', 'narrative'] }
+  - emit: step_start / step_end × 2 (behavior_factor, narrative)
+  - emit: done
+    ↓
+【前端】处理 SSE 事件
+  - intent: { name: 'continue_analysis', ... }
+  - resume: { resume_from: 'behavior_factor' }
+    → message.resumedFrom = 'behavior_factor'
+    → isResume = true  // 标记为继续，不清空旧 stages
+  - start
+    → 因为 isResume=true，不清空 message.stages
+    → 保留已有的 purpose/actor 卡片
+  - step_start / step_end × 2
+    → 追加新的 behavior/narrative 卡片
+    → message.rawSteps.push(behavior_data)
+    → message.rawSteps.push(narrative_data)
+  - done
+    → message.phase = 'completed'
+    ↓
+【前端 UI】
+  - ✅ 显示"⏸ 从「预期行为与驱动因素」继续"提示
+  - ✅ 保留旧的目的/行为体卡片
+  - ✅ 追加新的预期行为/叙事卡片
+```
+
+### 6.3 用户"追问"的流程
+
+```
+【前次】完成了完整的 6bf，message.phase = 'completed'
+  - message.rawSteps = [
+      { key: 'purpose', ... },
+      { key: 'actor', ... },
+      { key: 'behavior_factor', ... },
+      { key: 'narrative', ... }
+    ]
+    ↓
+【用户输入】"第一条是什么意思"
+    ↓
+【前端】handleSend("第一条是什么意思")
+  - requestBody: {
+      intent_mode: 'auto',
+      current_phase: 'completed',  // 👈 关键
+      last_steps: message.rawSteps,
+    }
+    ↓
+【后端】detect_intent("第一条是什么意思", current_phase='completed', last_steps=[...])
+  - 规则识别：匹配 _FOLLOW_UP_PATTERNS（r"第[一二三四五六七八九十\d]+[点条个项]"）
+  - 返回：IntentResult(intent='follow_up', confidence=0.88)
+    ↓
+【后端】_stream_follow_up(req, ...)
+  - 提取 req.last_steps 中已完成步骤的数据
+  - 构造 context_str（包含目的、行为体、预期行为、叙事）
+  - 调用 LLM 流式回答
+  - emit: delta { text: "..." } × N
+  - emit: done
+    ↓
+【前端】处理 SSE 事件
+  - intent: { name: 'follow_up', ... }
+    → flow = 'follow_up'
+    → message.phase = 'follow-up'
+    → message.outputFormat = 'markdown'
+  - delta × N
+    → message.markdownContent += text
+    → 每块更新都触发 onUpdate，前端流式显示
+  - done
+    → message.phase = 'completed'
+    ↓
+【前端 UI】
+  - ✅ 显示 Markdown 格式的追问回答
+  - ✅ 不显示旧的 6bf 卡片（因为 showAnalysisContent = false）
+  - ✅ 流式效果：用户看到实时生成的文本
+```
+
+---
+
+## 七、常见问题解决
+
+### Q1: 完成 6bf 后再选专家，为什么显示了旧的分析内容？
+
+**原因**：AssistantMessage 中没有正确应用 `showAnalysisContent` 防护条件。
+
+**检查**：
+```typescript
+const showAnalysisContent = !isExpertPhase && !isClarifying && !isFollowUp;
+```
+
+确保：
+- `isExpertPhase = message.phase === 'expert-match' || message.phase === 'expert-confirm'` ✓
+- 所有 `stages` / `finalAnswer` 的渲染都被 `{showAnalysisContent && (...)}`  包裹 ✓
+
+### Q2: 继续分析后，旧卡片消失了
+
+**原因**：SSE start 事件中清空了 stages（应该只在 !isResume 时清空）。
+
+**检查** `api.ts` 中的 start 事件处理：
+```typescript
+case 'start':
+  if (!isResume) {  // 👈 这个条件必须有
+    message.stages = {};
+  }
+  // ...
+  break;
+```
+
+### Q3: 用户点"继续"，但后端返回了"开始新分析"
+
+**原因**：`current_phase` 未传递为 'paused'，或未手动设置 `phase = 'paused'`。
+
+**检查** `SixStepChatPage.handleStop()`：
+```typescript
+setMessages(prev => {
+  const newMessages = [...prev];
+  const lastMsg = newMessages[newMessages.length - 1];
+  if (lastMsg?.role === 'assistant') {
+    lastMsg.phase = 'paused';  // 👈 必须设置
+  }
+  return newMessages;
+});
+setCurrentPhase('paused');  // 👈 必须同步状态
+```
+
+### Q4: 追问回答为空
+
+**原因**：
+1. `current_phase !== 'completed'`（后端不识别为 follow_up）
+2. `last_steps` 为空或格式错误
+3. LLM 调用失败（查看后端日志）
+
+**检查**：
+- 确保 message.rawSteps 在 step_end 时被正确赋值
+- 确保 request 中 `last_steps` 被传递为 `message.rawSteps`
+- 后端日志是否有 `_stream_follow_up` 的报错
+
+---
+
+## 八、开发建议
+
+1. **调试技巧**：在 `onUpdate` 中 `console.log(message)` 观察每个事件的状态变化
+2. **SSE 事件顺序不可打破**：前端严格依赖事件顺序做状态机转换
+3. **rawSteps 的完整性**：非 info_prepare 的所有 step_end 都必须存档，否则 continue/follow_up 会丢失数据
+4. **phase 与 outputFormat 的对应**：
+   - follow-up → outputFormat = 'markdown'
+   - generate → outputFormat = 'structured'（卡片渲染）
+   - expert-match → 无 outputFormat（专家卡片独立）
+
+---
+
+**相关文件导航**：
+- 后端意图系统：`backend/app/intent/`
+- 后端编排系统：`backend/app/orchestrator.py`
+- 前端核心：`SixStepChatPage.tsx` (state hub) → `api.ts` (SSE handler) → `SixStepConversation.tsx` (rendering)
+- 前端类型：`types.ts`
+- 前端原始文档：`doc.md`
diff --git a/web-code/components/angentchat/McpSelectModal.tsx b/web-code/components/angentchat/McpSelectModal.tsx
new file mode 100644
index 00000000..336636ee
--- /dev/null
+++ b/web-code/components/angentchat/McpSelectModal.tsx
@@ -0,0 +1,233 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Check, Megaphone, Target, Users, X, Zap } from 'lucide-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import type { ExpertCard, SelectableMcpKey } from './types';
+
+interface McpOption {
+  key: SelectableMcpKey;
+  name: string;
+  description: string;
+  icon: React.ComponentType<{ className?: string }>;
+  accent: 'purpose' | 'actor' | 'behavior' | 'narrative';
+}
+
+const MCP_OPTIONS: McpOption[] = [
+  { key: 'purpose', name: '目的', description: '识别本次推演的核心目的，构成后续推理的锚点。', icon: Target, accent: 'purpose' },
+  { key: 'actor', name: '行为体', description: '推演支撑目的所需的关键行为体角色。', icon: Users, accent: 'actor' },
+  { key: 'behavior_factor', name: '预期行为和驱动因素', description: '为每个行为体推演预期行为及背后的驱动因素。', icon: Zap, accent: 'behavior' },
+  { key: 'narrative', name: '叙事', description: '基于驱动因素构建可被复用的叙事框架。', icon: Megaphone, accent: 'narrative' },
+];
+
+const ACCENT_LIGHT: Record<McpOption['accent'], { selected: string; idle: string; chip: string }> = {
+  purpose: {
+    selected: 'border-orange-300 bg-orange-50/70 ring-1 ring-orange-200',
+    idle: 'border-gray-200 bg-white hover:border-orange-200',
+    chip: 'bg-orange-50 text-orange-600',
+  },
+  actor: {
+    selected: 'border-red-300 bg-red-50/70 ring-1 ring-red-200',
+    idle: 'border-gray-200 bg-white hover:border-red-200',
+    chip: 'bg-red-50 text-red-600',
+  },
+  behavior: {
+    selected: 'border-emerald-300 bg-emerald-50/70 ring-1 ring-emerald-200',
+    idle: 'border-gray-200 bg-white hover:border-emerald-200',
+    chip: 'bg-emerald-50 text-emerald-600',
+  },
+  narrative: {
+    selected: 'border-amber-300 bg-amber-50/70 ring-1 ring-amber-200',
+    idle: 'border-gray-200 bg-white hover:border-amber-200',
+    chip: 'bg-amber-50 text-amber-600',
+  },
+};
+
+const ACCENT_DARK: Record<McpOption['accent'], { selected: string; idle: string; chip: string }> = {
+  purpose: {
+    selected: 'border-violet-300/50 bg-violet-500/15 ring-1 ring-violet-300/30',
+    idle: 'border-slate-700 bg-slate-800/60 hover:border-violet-300/40',
+    chip: 'bg-violet-500/20 text-violet-200',
+  },
+  actor: {
+    selected: 'border-cyan-300/50 bg-cyan-500/15 ring-1 ring-cyan-300/30',
+    idle: 'border-slate-700 bg-slate-800/60 hover:border-cyan-300/40',
+    chip: 'bg-cyan-500/20 text-cyan-200',
+  },
+  behavior: {
+    selected: 'border-emerald-300/50 bg-emerald-500/15 ring-1 ring-emerald-300/30',
+    idle: 'border-slate-700 bg-slate-800/60 hover:border-emerald-300/40',
+    chip: 'bg-emerald-500/20 text-emerald-200',
+  },
+  narrative: {
+    selected: 'border-amber-300/50 bg-amber-500/15 ring-1 ring-amber-300/30',
+    idle: 'border-slate-700 bg-slate-800/60 hover:border-amber-300/40',
+    chip: 'bg-amber-500/20 text-amber-200',
+  },
+};
+
+interface Props {
+  open: boolean;
+  expert: ExpertCard | null;
+  initialSelected?: SelectableMcpKey[];
+  onCancel: () => void;
+  onConfirm: (selected: SelectableMcpKey[]) => void;
+}
+
+const McpSelectModal: React.FC<Props> = ({ open, expert, initialSelected, onCancel, onConfirm }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  const defaultAll = useMemo<SelectableMcpKey[]>(() => MCP_OPTIONS.map((m) => m.key), []);
+  const [selected, setSelected] = useState<SelectableMcpKey[]>(
+    initialSelected && initialSelected.length > 0 ? initialSelected : defaultAll,
+  );
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      setSelected(initialSelected && initialSelected.length > 0 ? initialSelected : defaultAll);
+      setError(null);
+    }
+  }, [defaultAll, initialSelected, open]);
+
+  if (!open) return null;
+
+  const toggle = (key: SelectableMcpKey) => {
+    setSelected((prev) => {
+      const has = prev.includes(key);
+      if (has) {
+        if (prev.length <= 1) {
+          setError('至少选择一个生成步骤');
+          return prev;
+        }
+        setError(null);
+        return prev.filter((k) => k !== key);
+      }
+      setError(null);
+      return [...prev, key];
+    });
+  };
+
+  const handleConfirm = () => {
+    if (selected.length === 0) {
+      setError('至少选择一个生成步骤');
+      return;
+    }
+    const ordered = MCP_OPTIONS.map((m) => m.key).filter((k) => selected.includes(k));
+    onConfirm(ordered);
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center px-4">
+      <div
+        className="absolute inset-0 bg-black/40 backdrop-blur-sm"
+        onClick={onCancel}
+        role="presentation"
+      />
+      <div
+        className={`relative z-10 w-full max-w-xl rounded-2xl border shadow-2xl ${
+          isDark ? 'border-slate-700 bg-slate-900 text-slate-100' : 'border-gray-200 bg-white text-gray-900'
+        }`}
+      >
+        <div className={`flex items-center justify-between border-b px-5 py-4 ${
+          isDark ? 'border-slate-700' : 'border-gray-100'
+        }`}>
+          <div className="min-w-0">
+            <div className="text-base font-semibold">选择本次执行的 MCP</div>
+            <div className={`text-xs mt-0.5 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              {expert ? `专家：${expert.name}` : '默认全部勾选，至少保留 1 个步骤'}
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={onCancel}
+            className={`flex h-8 w-8 items-center justify-center rounded-lg transition ${
+              isDark ? 'text-slate-400 hover:bg-slate-800' : 'text-gray-400 hover:bg-gray-100'
+            }`}
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="max-h-[60vh] overflow-y-auto px-5 py-4 space-y-2">
+          {MCP_OPTIONS.map((opt) => {
+            const isSelected = selected.includes(opt.key);
+            const palette = isDark ? ACCENT_DARK[opt.accent] : ACCENT_LIGHT[opt.accent];
+            const Icon = opt.icon;
+            return (
+              <button
+                key={opt.key}
+                type="button"
+                onClick={() => toggle(opt.key)}
+                className={`w-full text-left rounded-xl border px-3 py-3 transition ${
+                  isSelected ? palette.selected : palette.idle
+                }`}
+              >
+                <div className="flex items-start gap-3">
+                  <span className={`flex h-9 w-9 items-center justify-center rounded-xl shrink-0 ${palette.chip}`}>
+                    <Icon className="w-4 h-4" />
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <div className="text-sm font-semibold">{opt.name}</div>
+                    <div className={`text-xs mt-0.5 leading-relaxed ${isDark ? 'text-slate-400' : 'text-gray-600'}`}>
+                      {opt.description}
+                    </div>
+                  </div>
+                  <span
+                    className={`shrink-0 mt-0.5 flex h-5 w-5 items-center justify-center rounded-md border transition ${
+                      isSelected
+                        ? isDark
+                          ? 'border-cyan-300 bg-cyan-400/40 text-cyan-50'
+                          : 'border-red-400 bg-red-500 text-white'
+                        : isDark
+                          ? 'border-slate-600 text-transparent'
+                          : 'border-gray-300 text-transparent'
+                    }`}
+                  >
+                    <Check className="w-3 h-3" />
+                  </span>
+                </div>
+              </button>
+            );
+          })}
+          {error && (
+            <div className={`text-xs ${isDark ? 'text-rose-300' : 'text-rose-600'}`}>{error}</div>
+          )}
+        </div>
+
+        <div className={`flex items-center justify-between gap-3 border-t px-5 py-3 ${
+          isDark ? 'border-slate-700' : 'border-gray-100'
+        }`}>
+          <div className={`text-[11px] ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+            后端固定执行顺序：目的 → 行为体 → 预期行为和驱动因素 → 叙事
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={onCancel}
+              className={`rounded-lg border px-3 py-1.5 text-sm font-medium transition ${
+                isDark
+                  ? 'border-slate-700 bg-slate-800 text-slate-200 hover:bg-slate-700'
+                  : 'border-gray-200 bg-white text-gray-700 hover:bg-gray-50'
+              }`}
+            >
+              取消
+            </button>
+            <button
+              type="button"
+              onClick={handleConfirm}
+              className={`rounded-lg px-3 py-1.5 text-sm font-semibold text-white transition ${
+                isDark
+                  ? 'bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-400 hover:to-blue-400'
+                  : 'bg-gradient-to-r from-red-500 to-rose-500 hover:from-red-400 hover:to-rose-400'
+              }`}
+            >
+              确认
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default McpSelectModal;
diff --git a/web-code/components/angentchat/SixStepCards.tsx b/web-code/components/angentchat/SixStepCards.tsx
new file mode 100644
index 00000000..d921a785
--- /dev/null
+++ b/web-code/components/angentchat/SixStepCards.tsx
@@ -0,0 +1,360 @@
+import React from 'react';
+import {
+  ChevronDown,
+  Compass,
+  FileSearch,
+  Megaphone,
+  ScrollText,
+  Sparkles,
+  Target,
+  TrendingUp,
+  UserCheck,
+  Users,
+  Zap,
+} from 'lucide-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import type {
+  ActorCard,
+  BehaviorDriverCard,
+  NarrativeCard,
+  PurposeCard,
+} from './types';
+
+interface CollapsibleProps {
+  title: React.ReactNode;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  variant?: 'default' | 'subtle';
+}
+
+export const InlineCollapsible: React.FC<CollapsibleProps> = ({ title, children, defaultOpen = true, variant = 'default' }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const [open, setOpen] = React.useState(defaultOpen);
+
+  const wrapperClass = variant === 'subtle'
+    ? `${isDark ? 'border-slate-700/50 bg-slate-900/30' : 'border-gray-100 bg-white/80'}`
+    : `${isDark ? 'border-slate-700/60 bg-slate-800/40' : 'border-red-100 bg-white'}`;
+
+  return (
+    <div className={`rounded-2xl border overflow-hidden ${wrapperClass}`}>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className={`w-full flex items-center justify-between gap-3 px-4 py-3 text-left transition-colors ${
+          isDark ? 'hover:bg-slate-800/70' : 'hover:bg-red-50/60'
+        }`}
+      >
+        <div className="flex-1 min-w-0">{title}</div>
+        <ChevronDown
+          className={`w-4 h-4 shrink-0 transition-transform duration-300 ${
+            open ? 'rotate-0' : '-rotate-90'
+          } ${isDark ? 'text-slate-400' : 'text-gray-500'}`}
+        />
+      </button>
+      <div className={`grid transition-[grid-template-rows,opacity] duration-300 ease-out ${
+        open ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
+      }`}>
+        <div className="overflow-hidden">
+          <div className="px-4 pb-4 pt-1">{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface CardIndexBadgeProps {
+  index: number;
+  variant: 'purpose' | 'actor' | 'behavior' | 'narrative';
+}
+
+const VARIANT_COLOR: Record<CardIndexBadgeProps['variant'], { dark: string; light: string }> = {
+  purpose: { dark: 'bg-violet-500/20 text-violet-200 border-violet-400/30', light: 'bg-orange-50 text-orange-600 border-orange-200' },
+  actor: { dark: 'bg-cyan-500/20 text-cyan-200 border-cyan-400/30', light: 'bg-red-50 text-red-600 border-red-200' },
+  behavior: { dark: 'bg-emerald-500/20 text-emerald-200 border-emerald-400/30', light: 'bg-emerald-50 text-emerald-600 border-emerald-200' },
+  narrative: { dark: 'bg-amber-500/20 text-amber-200 border-amber-400/30', light: 'bg-amber-50 text-amber-600 border-amber-200' },
+};
+
+const CardIndexBadge: React.FC<CardIndexBadgeProps> = ({ index, variant }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const cls = VARIANT_COLOR[variant][isDark ? 'dark' : 'light'];
+  return (
+    <span className={`w-7 h-7 rounded-xl border flex items-center justify-center text-xs font-semibold shrink-0 ${cls}`}>
+      {index.toString().padStart(2, '0')}
+    </span>
+  );
+};
+
+export const PurposeCardItem: React.FC<{ card: PurposeCard }> = ({ card }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  return (
+    <div className={`group rounded-2xl border p-3 transition-all sixstep-fade-up ${
+      isDark
+        ? 'border-violet-400/20 bg-gradient-to-br from-slate-800/60 to-violet-900/20 hover:border-violet-300/40'
+        : 'border-orange-100 bg-gradient-to-br from-white to-orange-50/40 hover:border-orange-200'
+    }`}>
+      <div className="flex items-start gap-3">
+        <CardIndexBadge index={card.index} variant="purpose" />
+        <div className={`w-7 h-7 rounded-xl flex items-center justify-center shrink-0 ${
+          isDark ? 'bg-violet-500/20 text-violet-200' : 'bg-orange-50 text-orange-500'
+        }`}>
+          <Target className="w-4 h-4" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className={`text-sm font-semibold leading-snug ${isDark ? 'text-white' : 'text-gray-900'}`}>
+            {card.title}
+          </div>
+          <div className={`text-xs mt-1 leading-relaxed ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+            <span className={`inline-flex items-center gap-1 mr-1 font-medium ${isDark ? 'text-violet-200' : 'text-orange-600'}`}>
+              <Compass className="w-3 h-3" />理由
+            </span>
+            {card.reason}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const ActorCardItem: React.FC<{ card: ActorCard }> = ({ card }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  return (
+    <div className={`rounded-2xl border p-3 transition-all sixstep-fade-up ${
+      isDark
+        ? 'border-cyan-400/20 bg-gradient-to-br from-slate-800/60 to-cyan-900/20 hover:border-cyan-300/40'
+        : 'border-red-100 bg-gradient-to-br from-white to-red-50/40 hover:border-red-200'
+    }`}>
+      <div className="flex items-start gap-3">
+        <CardIndexBadge index={card.index} variant="actor" />
+        <div className={`w-7 h-7 rounded-xl flex items-center justify-center shrink-0 ${
+          isDark ? 'bg-cyan-500/20 text-cyan-200' : 'bg-red-50 text-red-500'
+        }`}>
+          <UserCheck className="w-4 h-4" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className={`text-sm font-semibold leading-snug ${isDark ? 'text-white' : 'text-gray-900'}`}>
+            {card.title}
+          </div>
+          <div className={`text-xs mt-1 leading-relaxed ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+            {card.content}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const BehaviorCardItem: React.FC<{ card: BehaviorDriverCard }> = ({ card }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  return (
+    <div className={`rounded-2xl border overflow-hidden transition-all sixstep-fade-up ${
+      isDark
+        ? 'border-emerald-400/20 bg-gradient-to-br from-slate-800/60 to-emerald-900/20 hover:border-emerald-300/40'
+        : 'border-emerald-100 bg-gradient-to-br from-white to-emerald-50/40 hover:border-emerald-200'
+    }`}>
+      <div className="p-3">
+        <div className="flex items-start gap-3">
+          <CardIndexBadge index={card.index} variant="behavior" />
+          <div className={`w-7 h-7 rounded-xl flex items-center justify-center shrink-0 ${
+            isDark ? 'bg-emerald-500/20 text-emerald-200' : 'bg-emerald-50 text-emerald-600'
+          }`}>
+            <TrendingUp className="w-4 h-4" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className={`text-[11px] uppercase tracking-wider font-medium mb-1 ${isDark ? 'text-emerald-300/80' : 'text-emerald-600'}`}>
+              预期行为
+            </div>
+            <div className={`text-sm font-semibold leading-snug ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              {card.expectedBehavior}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={`border-t px-3 py-3 ${
+        isDark ? 'border-emerald-400/15 bg-emerald-500/5' : 'border-emerald-100 bg-emerald-50/40'
+      }`}>
+        <div className="flex items-start gap-2">
+          <Zap className={`w-3.5 h-3.5 mt-0.5 shrink-0 ${isDark ? 'text-emerald-300' : 'text-emerald-600'}`} />
+          <div className="flex-1 min-w-0">
+            <div className={`text-[11px] uppercase tracking-wider font-medium mb-1 ${isDark ? 'text-emerald-300/80' : 'text-emerald-600'}`}>
+              驱动因素
+            </div>
+            <div className={`text-xs leading-relaxed ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+              {card.driver}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const NarrativeCardItem: React.FC<{ card: NarrativeCard }> = ({ card }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  return (
+    <div className={`rounded-2xl border p-3 transition-all sixstep-fade-up ${
+      isDark
+        ? 'border-amber-400/20 bg-gradient-to-br from-slate-800/60 to-amber-900/20 hover:border-amber-300/40'
+        : 'border-amber-100 bg-gradient-to-br from-white to-amber-50/40 hover:border-amber-200'
+    }`}>
+      <div className="flex items-start gap-3">
+        <CardIndexBadge index={card.index} variant="narrative" />
+        <div className={`w-7 h-7 rounded-xl flex items-center justify-center shrink-0 ${
+          isDark ? 'bg-amber-500/20 text-amber-200' : 'bg-amber-50 text-amber-600'
+        }`}>
+          <ScrollText className="w-4 h-4" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className={`text-sm font-semibold leading-snug ${isDark ? 'text-white' : 'text-gray-900'}`}>
+            {card.title}
+          </div>
+          <div className={`text-xs mt-1 leading-relaxed ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+            <span className={`inline-flex items-center gap-1 mr-1 font-medium ${isDark ? 'text-amber-200' : 'text-amber-600'}`}>
+              <Sparkles className="w-3 h-3" />理由
+            </span>
+            {card.reason}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface GroupHeaderProps {
+  label: string;
+  parentTitle: string;
+  count: number;
+  variant: 'actor' | 'behavior' | 'narrative';
+}
+
+export const ParentGroupHeader: React.FC<GroupHeaderProps> = ({ label, parentTitle, count, variant }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const Icon = variant === 'actor' ? Target : variant === 'behavior' ? Users : Zap;
+  const accent = variant === 'actor'
+    ? (isDark ? 'text-violet-200 bg-violet-500/15 border-violet-400/30' : 'text-orange-600 bg-orange-50 border-orange-200')
+    : variant === 'behavior'
+      ? (isDark ? 'text-cyan-200 bg-cyan-500/15 border-cyan-400/30' : 'text-red-600 bg-red-50 border-red-200')
+      : (isDark ? 'text-emerald-200 bg-emerald-500/15 border-emerald-400/30' : 'text-emerald-600 bg-emerald-50 border-emerald-200');
+
+  return (
+    <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full border w-fit ${accent}`}>
+      <Icon className="w-3.5 h-3.5" />
+      <span className="text-[11px] font-medium">{label}</span>
+      <span className={`text-xs font-semibold ${isDark ? 'text-white' : 'text-gray-900'} truncate max-w-[260px]`} title={parentTitle}>
+        {parentTitle}
+      </span>
+      <span className={`text-[10px] ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>· {count} 张</span>
+    </div>
+  );
+};
+
+interface ThinkingBlockProps {
+  text: string;
+  loading?: boolean;
+  empty?: string;
+}
+
+export const ThinkingBlock: React.FC<ThinkingBlockProps> = ({ text, loading, empty = '正在生成思考内容...' }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  return (
+    <div className={`rounded-2xl border px-4 py-3 ${
+      isDark ? 'bg-slate-900/30 border-slate-700/60' : 'bg-white border-gray-100'
+    }`}>
+      <div className="flex items-center gap-2 mb-2">
+        <FileSearch className={`w-3.5 h-3.5 ${isDark ? 'text-cyan-300' : 'text-red-500'}`} />
+        <span className={`text-[11px] font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+          思考过程
+        </span>
+        {loading && (
+          <span className={`text-[11px] ${isDark ? 'sixstep-shimmer-text' : 'sixstep-shimmer-text-light'}`}>
+            生成中
+          </span>
+        )}
+      </div>
+      {text ? (
+        <pre className={`whitespace-pre-wrap text-xs leading-relaxed font-sans ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+          {text}
+        </pre>
+      ) : (
+        <div className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{empty}</div>
+      )}
+    </div>
+  );
+};
+
+interface StageHeaderProps {
+  title: string;
+  desc?: string;
+  count?: number;
+  loading?: boolean;
+  done?: boolean;
+  icon: React.ComponentType<{ className?: string }>;
+  accent: 'purpose' | 'actor' | 'behavior' | 'narrative';
+}
+
+const ACCENT_BG: Record<StageHeaderProps['accent'], { dark: string; light: string }> = {
+  purpose: { dark: 'bg-violet-500/15 text-violet-200', light: 'bg-orange-50 text-orange-500' },
+  actor: { dark: 'bg-cyan-500/15 text-cyan-200', light: 'bg-red-50 text-red-500' },
+  behavior: { dark: 'bg-emerald-500/15 text-emerald-200', light: 'bg-emerald-50 text-emerald-600' },
+  narrative: { dark: 'bg-amber-500/15 text-amber-200', light: 'bg-amber-50 text-amber-600' },
+};
+
+export const StageHeader: React.FC<StageHeaderProps> = ({ title, desc, count, loading, done, icon: Icon, accent }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const cls = ACCENT_BG[accent][isDark ? 'dark' : 'light'];
+  return (
+    <div className="flex items-center gap-3">
+      <div className={`w-9 h-9 rounded-2xl flex items-center justify-center ${cls} ${loading ? 'sixstep-pulse' : ''}`}>
+        <Icon className="w-5 h-5" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className={`text-sm font-semibold ${isDark ? 'text-white' : 'text-gray-900'} flex items-center gap-2`}>
+          <span className="truncate">{title}</span>
+          {typeof count === 'number' && (
+            <span className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${
+              isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-100 text-gray-600'
+            }`}>
+              {count} 张
+            </span>
+          )}
+          {done && (
+            <span className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${
+              isDark ? 'bg-emerald-500/20 text-emerald-300' : 'bg-emerald-50 text-emerald-600'
+            }`}>
+              已完成
+            </span>
+          )}
+          {loading && (
+            <span className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${
+              isDark ? 'bg-cyan-500/20 text-cyan-200' : 'bg-red-50 text-red-600'
+            }`}>
+              生成中
+            </span>
+          )}
+        </div>
+        {desc && (
+          <div className={`text-xs mt-0.5 ${
+            loading ? (isDark ? 'sixstep-shimmer-text' : 'sixstep-shimmer-text-light') : (isDark ? 'text-slate-400' : 'text-gray-500')
+          }`}>
+            {desc}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const STAGE_ICONS = {
+  purpose: Target,
+  actor: Users,
+  behavior: Zap,
+  narrative: Megaphone,
+};
diff --git a/web-code/components/angentchat/SixStepChatHistory.tsx b/web-code/components/angentchat/SixStepChatHistory.tsx
new file mode 100644
index 00000000..a704334e
--- /dev/null
+++ b/web-code/components/angentchat/SixStepChatHistory.tsx
@@ -0,0 +1,346 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Check, Eraser, MessageSquareText, Pencil, Plus, Trash2, X } from 'lucide-react';
+
+export interface SixStepConversationMeta {
+  id: string;
+  title: string;
+  updatedAt: number;
+}
+
+interface Props {
+  isOpen: boolean;
+  isDark: boolean;
+  conversations: SixStepConversationMeta[];
+  activeId: string | null;
+  onClose: () => void;
+  onOpen: () => void;
+  onSelect: (id: string) => void;
+  onNew: () => void;
+  onDelete: (id: string) => void;
+  onRename: (id: string, title: string) => void;
+  onClearAll: () => void;
+}
+
+const UNTITLED = '未命名对话';
+
+const SixStepChatHistory: React.FC<Props> = ({
+  isOpen,
+  isDark,
+  conversations,
+  activeId,
+  onClose,
+  onOpen,
+  onSelect,
+  onNew,
+  onDelete,
+  onRename,
+  onClearAll,
+}) => {
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [draftTitle, setDraftTitle] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (editingId && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editingId]);
+
+  const startEdit = (conversation: SixStepConversationMeta) => {
+    setEditingId(conversation.id);
+    setDraftTitle(conversation.title);
+  };
+
+  const commitEdit = () => {
+    if (!editingId) return;
+    onRename(editingId, draftTitle.trim() || UNTITLED);
+    setEditingId(null);
+    setDraftTitle('');
+  };
+
+  const cancelEdit = () => {
+    setEditingId(null);
+    setDraftTitle('');
+  };
+
+  const handleDelete = (conversation: SixStepConversationMeta) => {
+    const ok = window.confirm(`确认删除对话“${conversation.title || UNTITLED}”吗？`);
+    if (!ok) return;
+    onDelete(conversation.id);
+  };
+
+  const handleClearAll = () => {
+    if (conversations.length === 0) return;
+    const ok = window.confirm('确认清空当前对话列表中的全部历史记录吗？此操作无法撤销。');
+    if (!ok) return;
+    onClearAll();
+  };
+
+  const railButtonClass = (active = false) =>
+    `flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border transition ${
+      active
+        ? isDark
+          ? 'border-cyan-400/40 bg-cyan-500/10 text-cyan-200 shadow-sm'
+          : 'border-red-200 bg-red-50/70 text-red-500 shadow-sm'
+        : isDark
+          ? 'border-slate-700 bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-slate-100'
+          : 'border-gray-200 bg-white text-gray-500 hover:bg-gray-50 hover:text-gray-900'
+    }`;
+
+  const handleCollapsedSelect = (id: string) => {
+    onOpen();
+    window.setTimeout(() => {
+      onSelect(id);
+    }, 120);
+  };
+
+  const handleCollapsedNew = () => {
+    onOpen();
+    window.setTimeout(() => {
+      onNew();
+    }, 120);
+  };
+
+  return (
+    <aside
+      className={`flex h-full shrink-0 flex-col overflow-hidden border-r transition-[width,opacity] duration-300 ease-out ${
+        isOpen ? 'pointer-events-auto w-[300px] opacity-100' : 'pointer-events-auto w-[72px] opacity-100'
+      } ${
+        isDark
+          ? 'border-slate-700/50 bg-slate-900/60 text-slate-100'
+          : 'border-red-100 bg-gray-50/70 text-gray-900'
+      }`}
+    >
+      {isOpen ? (
+        <>
+          <div
+            className={`border-b px-4 py-4 transition-all duration-300 ease-out ${isDark ? 'border-slate-700/50' : 'border-red-100'} ${
+              isOpen ? 'translate-x-0 opacity-100' : '-translate-x-2 opacity-0'
+            }`}
+          >
+            <div className="flex items-center justify-between gap-3">
+              <div className="min-w-0">
+                <h3 className="text-sm font-semibold">聊天记录</h3>
+                <p className={`mt-1 text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                  查看和管理当前页面的历史对话
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={onClose}
+                title="收起聊天记录"
+                className={`flex h-8 w-8 items-center justify-center rounded-lg transition ${
+                  isDark
+                    ? 'text-slate-400 hover:bg-slate-800 hover:text-slate-100'
+                    : 'text-gray-400 hover:bg-gray-100 hover:text-gray-700'
+                }`}
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+
+            <div className="mt-4 grid grid-cols-2 gap-2">
+              <button
+                type="button"
+                onClick={onNew}
+                className={`inline-flex h-9 items-center justify-center gap-2 rounded-lg border text-sm font-medium transition ${
+                  isDark
+                    ? 'border-slate-700 bg-slate-800 text-slate-100 hover:bg-slate-700'
+                    : 'border-red-200 bg-white text-red-600 hover:bg-red-50'
+                }`}
+              >
+                <Plus className="h-4 w-4" />
+                新建对话
+              </button>
+
+              <button
+                type="button"
+                onClick={handleClearAll}
+                disabled={conversations.length === 0}
+                className={`inline-flex h-9 items-center justify-center gap-2 rounded-lg border text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-50 ${
+                  isDark
+                    ? 'border-slate-700 bg-slate-800 text-slate-100 hover:bg-slate-700'
+                    : 'border-gray-200 bg-white text-gray-700 hover:bg-gray-50'
+                }`}
+              >
+                <Eraser className="h-4 w-4" />
+                清空记录
+              </button>
+            </div>
+          </div>
+
+          <div
+            className={`min-h-0 flex-1 space-y-1 overflow-y-auto px-3 py-3 transition-all duration-300 ease-out ${
+              isOpen ? 'translate-x-0 opacity-100' : '-translate-x-2 opacity-0'
+            }`}
+          >
+            {conversations.length === 0 ? (
+              <div
+                className={`rounded-xl border border-dashed px-3 py-8 text-center text-xs ${
+                  isDark ? 'border-slate-700 text-slate-500' : 'border-gray-200 text-gray-400'
+                }`}
+              >
+                还没有任何对话记录
+              </div>
+            ) : (
+              conversations.map((conversation) => {
+                const isActive = activeId === conversation.id;
+                const isEditing = editingId === conversation.id;
+
+                return (
+                  <div
+                    key={conversation.id}
+                    role={isEditing ? undefined : 'button'}
+                    tabIndex={isEditing ? -1 : 0}
+                    onClick={() => !isEditing && onSelect(conversation.id)}
+                    onKeyDown={(event) => {
+                      if (!isEditing && (event.key === 'Enter' || event.key === ' ')) {
+                        event.preventDefault();
+                        onSelect(conversation.id);
+                      }
+                    }}
+                    className={`group flex cursor-pointer items-center gap-2 rounded-xl border px-3 py-2.5 text-left transition-all duration-200 ${
+                      isActive
+                        ? isDark
+                          ? 'border-cyan-400/40 bg-cyan-500/10 text-slate-50 shadow-sm'
+                          : 'border-red-200 bg-red-50/70 text-gray-900 shadow-sm'
+                        : isDark
+                          ? 'border-transparent text-slate-300 hover:border-slate-700 hover:bg-slate-800/60 hover:text-slate-100'
+                          : 'border-transparent text-gray-700 hover:border-gray-200 hover:bg-white hover:text-gray-900'
+                    }`}
+                  >
+                    <span
+                      className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${
+                        isActive
+                          ? isDark
+                            ? 'bg-cyan-500/20 text-cyan-200'
+                            : 'bg-white text-red-500 ring-1 ring-red-100'
+                          : isDark
+                            ? 'bg-slate-800 text-slate-400'
+                            : 'bg-gray-100 text-gray-500'
+                      }`}
+                    >
+                      <MessageSquareText className="h-4 w-4" />
+                    </span>
+
+                    <div className="min-w-0 flex-1">
+                      {isEditing ? (
+                        <input
+                          ref={inputRef}
+                          value={draftTitle}
+                          onChange={(event) => setDraftTitle(event.target.value)}
+                          onClick={(event) => event.stopPropagation()}
+                          onKeyDown={(event) => {
+                            if (event.key === 'Enter') {
+                              event.preventDefault();
+                              commitEdit();
+                            } else if (event.key === 'Escape') {
+                              event.preventDefault();
+                              cancelEdit();
+                            }
+                          }}
+                          onBlur={commitEdit}
+                          className={`w-full border-b bg-transparent text-sm font-medium outline-none ${
+                            isDark ? 'border-cyan-400/60 text-white' : 'border-red-300 text-gray-900'
+                          }`}
+                        />
+                      ) : (
+                        <div className="truncate text-sm font-medium">{conversation.title || UNTITLED}</div>
+                      )}
+                    </div>
+
+                    {isEditing ? (
+                      <button
+                        type="button"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          commitEdit();
+                        }}
+                        title="保存"
+                        className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-lg transition ${
+                          isDark
+                            ? 'text-emerald-300 hover:bg-emerald-500/15'
+                            : 'text-emerald-600 hover:bg-emerald-50'
+                        }`}
+                      >
+                        <Check className="h-4 w-4" />
+                      </button>
+                    ) : (
+                      <>
+                        <button
+                          type="button"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            startEdit(conversation);
+                          }}
+                          title="重命名"
+                          className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-lg transition ${
+                            isActive ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+                          } ${
+                            isDark
+                              ? 'text-slate-400 hover:bg-slate-800 hover:text-slate-100'
+                              : 'text-gray-400 hover:bg-gray-100 hover:text-gray-700'
+                          }`}
+                        >
+                          <Pencil className="h-3.5 w-3.5" />
+                        </button>
+                        <button
+                          type="button"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            handleDelete(conversation);
+                          }}
+                          title="删除对话"
+                          className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-lg transition ${
+                            isActive ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+                          } ${
+                            isDark
+                              ? 'text-slate-400 hover:bg-rose-500/15 hover:text-rose-300'
+                              : 'text-gray-400 hover:bg-rose-50 hover:text-rose-500'
+                          }`}
+                        >
+                          <Trash2 className="h-3.5 w-3.5" />
+                        </button>
+                      </>
+                    )}
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </>
+      ) : (
+        <div className="flex min-h-0 flex-1 flex-col items-center gap-3 px-2 py-4">
+          <button
+            type="button"
+            onClick={handleCollapsedNew}
+            title="新建对话"
+            className={`${railButtonClass(false)} sixstep-fade-up`}
+          >
+            <Plus className="h-5 w-5" />
+          </button>
+
+          <div className="min-h-0 w-full flex-1 overflow-y-auto">
+            <div className="flex flex-col items-center gap-2">
+              {conversations.map((conversation, index) => (
+                <button
+                  key={conversation.id}
+                  type="button"
+                  onClick={() => handleCollapsedSelect(conversation.id)}
+                  title={conversation.title || UNTITLED}
+                  className={`${railButtonClass(activeId === conversation.id)} transition-all duration-300 ease-out`}
+                  style={{ transitionDelay: `${Math.min(index, 6) * 25}ms` }}
+                >
+                  <MessageSquareText className="h-4 w-4" />
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </aside>
+  );
+};
+
+export default SixStepChatHistory;
diff --git a/web-code/components/angentchat/SixStepChatPage.tsx b/web-code/components/angentchat/SixStepChatPage.tsx
new file mode 100644
index 00000000..67550f7e
--- /dev/null
+++ b/web-code/components/angentchat/SixStepChatPage.tsx
@@ -0,0 +1,1358 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AlignLeft, GitBranch, History, LayoutList, Sparkles } from 'lucide-react';
+
+import { useTheme } from '../../contexts/ThemeContext';
+import ChatInputComposer from '../agent/ChatInputComposer';
+import { runExpertCreate, runExpertSearch, runSixStepDeduction, runIntentOrchestrateStream, type ExpertRunController, type IntentOrchestrateRequest } from './api';
+import McpSelectModal from './McpSelectModal';
+import SixStepConversation from './SixStepConversation';
+import SixStepChatHistory, { type SixStepConversationMeta } from './SixStepChatHistory';
+import SixStepFlowFullscreen from './SixStepFlowFullscreen';
+import SixStepFlowSandbox from './SixStepFlowSandbox';
+import SixStepProgressHorizontal from './SixStepProgressHorizontal';
+import { buildInitialAssistantMessage, type SixStepMockController } from './mockData';
+import './styles.css';
+import type {
+  ExpertCard,
+  ExpertMatchData,
+  MainStepKey,
+  SelectableMcpKey,
+  SixStepMessage,
+  StepStatus,
+  SubStepKey,
+} from './types';
+
+/**
+ * ===========================================================================
+ * SixStepChatPage —— 六步法（6bf）推演问答主界面
+ * ===========================================================================
+ *
+ * 职责概览：
+ * - 管理多会话列表与当前激活会话，并与后端 `/api/conversations` 做增删改查同步。
+ * - 将用户输入与「上一条助手消息」中的会话态（`phase`、`selectedExpert`、`rawSteps` 等）
+ *   组装为 `IntentOrchestrateRequest`，通过 `runIntentOrchestrateStream` 消费 SSE，
+ *   持续合并到当前助手 `SixStepMessage`（意图识别、专家匹配、六步编排、追问 Markdown 等）。
+ * - 专家流程：列表内操作经 `expertHandlers` 回到本页；用户在 `McpSelectModal` 选定子链后，
+ *   以 `intent_mode: 'force_orchestrate'` 立即启动编排，无需再次输入。
+ * - 停止：`handleStop` 中止流式控制器，并把生成中的助手消息标为 `paused`，
+ *   便于后端根据 `last_steps` / `current_phase` 做继续分析等分支。
+ *
+ * 主流程（用户发送一条消息）：
+ * 1. `handleSend`：校验输入 → 无会话则 `createConversationOnServer`。
+ * 2. 追加 user 消息 + 新的 assistant 占位（`buildInitialAssistantMessage`，初始 `intent-detecting`）。
+ * 3. 从最后一条 assistant 推导 `current_phase`、`last_steps`（暂停续跑场景）等，构造 `reqBody`。
+ * 4. `runIntentOrchestrateStream`：`onUpdate` 按消息 id 合并助手状态；`onComplete` 持久化对话。
+ *
+ * 专家相关分支：
+ * - 后端下发 `expert_*` 事件 → 助手进入 `expert-match` / `expert-confirm`（由 `api.ts` 内处理）。
+ * - `handleRefetchExpert`：`intent_mode: 'force_find_expert'`，并带上已有 `expert_candidates`。
+ * - `handleMcpModalConfirm`：写入已选专家与子链，再 `force_orchestrate` 跑六步。
+ *
+ * 下方「模块级」函数只做类型与 API 载荷转换；组件内 `useCallback` 承载业务编排。
+ * ===========================================================================
+ */
+
+/** 前端内存中的单条会话：在通用 meta 上扩展创建时间与完整消息列表。 */
+interface SixStepConversationEntry extends SixStepConversationMeta {
+  createdAt: number;
+  model?: string;
+  messages: SixStepMessage[];
+}
+
+/** 后端 `/api/conversations` 中单条消息的存储形态：`data` 承载 SixStep 扩展字段。 */
+interface ConversationApiMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  created_at?: number;
+  data?: Partial<SixStepMessage>;
+}
+
+/** 后端返回的单条会话记录（含 messages 数组）。 */
+interface ConversationApiRecord {
+  id: string;
+  filter_key: string;
+  filter_value: string;
+  title: string;
+  model?: string | null;
+  meta?: Record<string, unknown>;
+  created_at: number;
+  updated_at: number;
+  messages: ConversationApiMessage[];
+}
+
+interface ModelOption {
+  id: string;
+  name: string;
+  provider: string;
+  enabled?: boolean;
+}
+
+interface ModelsResponse {
+  default_model_id: string;
+  models: ModelOption[];
+}
+
+/** 后端对话列表筛选键：区分不同页面写入的会话数据。 */
+const FILTER_KEY = 'page';
+/** 与 `FILTER_KEY` 成对使用，本页固定为 sixstep 聊天场景。 */
+const FILTER_VALUE = 'sixstep-chat';
+/** 新建会话时的占位标题，首条用户消息后会用摘要替换。 */
+const NEW_TITLE = '新对话';
+
+/** 助手消息缺少 `mainStepStatus` 时的默认进度占位（与 `SixStepMessage` 结构对齐）。 */
+const DEFAULT_MAIN_STATUS: Record<MainStepKey, StepStatus> = {
+  info: 'pending',
+  sixstep: 'pending',
+  final: 'pending',
+};
+
+/** 六步子步骤默认进度（purpose / actor / behavior / narrative）。 */
+const DEFAULT_SUB_STATUS: Record<SubStepKey, StepStatus> = {
+  purpose: 'pending',
+  actor: 'pending',
+  behavior: 'pending',
+  narrative: 'pending',
+};
+
+/** 右侧流程图沙箱可拖拽宽度区间（像素）。 */
+const MIN_SANDBOX_WIDTH = 360;
+const MAX_SANDBOX_WIDTH = 900;
+/** 沙箱初始宽度。 */
+const DEFAULT_SANDBOX_WIDTH = 520;
+
+// ---------------------------------------------------------------------------
+// 模块级工具：会话排序、时间戳、与后端 Conversation API 的序列化/反序列化
+// ---------------------------------------------------------------------------
+const backUrl = 'https://ch1.b.uat.4.cn/zncmback';
+/** 按 `updatedAt` 降序排列，保证侧边历史列表「最近在上」。 */
+const sortConversations = (items: SixStepConversationEntry[]) =>
+  [...items].sort((a, b) => Number(b.updatedAt || 0) - Number(a.updatedAt || 0));
+
+/** 将 API 或持久化里混用的日期类型统一为 `Date`，解析失败则回退为当前时间。 */
+const toTimestamp = (value?: Date | number | string): Date => {
+  if (value instanceof Date) {
+    return value;
+  }
+  if (typeof value === 'number') {
+    return new Date(value);
+  }
+  if (typeof value === 'string' && value) {
+    const date = new Date(value);
+    if (!Number.isNaN(date.getTime())) {
+      return date;
+    }
+  }
+  return new Date();
+};
+
+/** 将单条 API 消息（`data` 内嵌 SixStep 扩展字段）还原为前端 `SixStepMessage`。 */
+const normalizeMessage = (item: ConversationApiMessage): SixStepMessage => {
+  const payload = item.data || {};
+  return {
+    ...payload,
+    id: item.id,
+    role: item.role,
+    content: item.content ?? payload.content ?? '',
+    timestamp: toTimestamp(payload.timestamp ?? item.created_at),
+  } as SixStepMessage;
+};
+
+/** 将后端完整会话记录转为带 `messages: SixStepMessage[]` 的前端会话条目。 */
+const normalizeConversation = (item: ConversationApiRecord): SixStepConversationEntry => ({
+  id: item.id,
+  title: item.title || NEW_TITLE,
+  createdAt: Number(item.created_at || Date.now()),
+  updatedAt: Number(item.updated_at || Date.now()),
+  model: item.model || '',
+  messages: (item.messages || []).map(normalizeMessage),
+});
+
+/**
+ * 持久化单条消息：`data` 中存放完整 SixStep 状态，便于刷新后恢复卡片/阶段/rawSteps。
+ * `created_at` 使用消息时间戳的毫秒值，供列表排序。
+ */
+const serializeMessage = (message: SixStepMessage) => ({
+  id: message.id,
+  role: message.role,
+  content: message.content || '',
+  created_at: message.timestamp instanceof Date ? message.timestamp.getTime() : Date.now(),
+  data: {
+    ...message,
+    timestamp: message.timestamp instanceof Date ? message.timestamp.toISOString() : new Date().toISOString(),
+  },
+});
+
+/** 拼接带 `filter_key` / `filter_value` 查询参数的会话 REST URL。 */
+const conversationRequestUrl = (conversationId?: string) => {
+  const search = new URLSearchParams({
+    filter_key: FILTER_KEY,
+    filter_value: FILTER_VALUE,
+  });
+  const base = conversationId ? `/api/conversations/${conversationId}` : '/api/conversations';
+  return `${backUrl}${base}?${search.toString()}`;
+};
+
+/**
+ * 六步法推演页组件：对话列表 + 消息区 + 输入区 + 可选流程图沙箱/全屏 + MCP 选择弹窗。
+ * 所有与后端的流式编排交互的入口集中在 `handleSend`、`handleRefetchExpert`、`handleMcpModalConfirm`。
+ */
+export default function SixStepChatPage() {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // ----- 会话与消息（核心状态）-----
+  const [conversations, setConversations] = useState<SixStepConversationEntry[]>([]);
+  const [activeConvId, setActiveConvId] = useState<string | null>(null);
+  const [input, setInput] = useState('');
+  /** 是否有流式任务在跑（意图流、专家创建、旧版推演等共用）。 */
+  const [isGenerating, setIsGenerating] = useState(false);
+  /** 编排请求体 `output_format`：结构化卡片 vs Markdown（影响关闭流程图侧栏等行为）。 */
+  const [outputFormat, setOutputFormat] = useState<'structured' | 'markdown'>('structured');
+  /** 模型切换：模型列表、全局默认模型、当前页面选中模型。 */
+  const [models, setModels] = useState<ModelOption[]>([]);
+  const [globalDefaultModel, setGlobalDefaultModel] = useState('');
+  const [selectedModel, setSelectedModel] = useState('');
+
+  /** 切换输出格式；Markdown 模式下关闭流程图沙箱与全屏，避免与纯文展示冲突。 */
+  const handleSetOutputFormat = useCallback((fmt: 'structured' | 'markdown') => {
+    setOutputFormat(fmt);
+    if (fmt === 'markdown') {
+      setSandboxOpen(false);
+      setFullscreenOpen(false);
+    }
+  }, []);
+
+  // ----- 布局与 UI 附属状态 -----
+  const [sandboxOpen, setSandboxOpen] = useState(false);
+  const [sandboxWidth, setSandboxWidth] = useState(DEFAULT_SANDBOX_WIDTH);
+  const [fullscreenOpen, setFullscreenOpen] = useState(false);
+  const [historyOpen, setHistoryOpen] = useState(false);
+  /** 首次从服务端拉取会话列表完成前为 true，用于禁用输入等。 */
+  const [loading, setLoading] = useState(true);
+
+  // ----- Refs：流式控制器、布局、与异步闭包中读取的最新 conversations -----
+  /** 当前主编排/意图流控制器（`runIntentOrchestrateStream` 或 `runSixStepDeduction`）。 */
+  const controllerRef = useRef<SixStepMockController | null>(null);
+  /** 专家搜索/创建等独立流（与主控制器分离，便于分别 stop）。 */
+  const expertControllerRef = useRef<ExpertRunController | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  /** 流程图沙箱宽度拖拽时的指针起点与初始宽度。 */
+  const resizeRef = useRef<{ startX: number; startWidth: number } | null>(null);
+  /** 避免首屏重复请求会话列表。 */
+  const hasLoadedRef = useRef(false);
+  /** 与 `conversations` state 同步，供不依赖 conversations 的闭包读取最新列表。 */
+  const conversationsRef = useRef<SixStepConversationEntry[]>([]);
+
+  /**
+   * 当前「正在交互」的助手消息 id（专家卡片高亮、重搜专家等）。
+   * 若未显式设置，则回退为会话中最后一条 assistant（见下方 `activeAssistantId` 计算）。
+   */
+  const [activeAssistantMsgId, setActiveAssistantMsgId] = useState<string | null>(null);
+  /** MCP 子链选择弹窗：挂在某条助手消息上，并持有待确认的专家卡片。 */
+  const [mcpModal, setMcpModal] = useState<{ open: boolean; messageId: string | null; expert: ExpertCard | null }>(
+    { open: false, messageId: null, expert: null },
+  );
+
+  /** 当前选中的完整会话实体；无选中时为 null。 */
+  const activeConv = useMemo(
+    () => conversations.find((conversation) => conversation.id === activeConvId) || null,
+    [activeConvId, conversations],
+  );
+  /** 当前会话下的消息列表（仅渲染用，写入请通过 `setMessages` / `patchMessageById` / `upsertConversationState`）。 */
+  const messages = activeConv?.messages ?? [];
+
+  /** 侧边历史抽屉所需的轻量元数据（已按更新时间排序）。 */
+  const conversationMetas = useMemo<SixStepConversationMeta[]>(
+    () =>
+      sortConversations(conversations).map(({ id, title, updatedAt }) => ({
+        id,
+        title,
+        updatedAt,
+      })),
+    [conversations],
+  );
+
+  /**
+   * 顶部进度条与流程图沙箱所绑定的「当前助手消息」id：
+   * 优先 `activeAssistantMsgId`（若仍存在于当前会话）；否则取最后一条 assistant。
+   */
+  const activeAssistantId = (() => {
+    if (activeAssistantMsgId && messages.some((message) => message.id === activeAssistantMsgId)) {
+      return activeAssistantMsgId;
+    }
+    const lastAssistant = [...messages].reverse().find((message) => message.role === 'assistant');
+    return lastAssistant?.id ?? null;
+  })();
+
+  /** 绑定到顶部进度条、流程图沙箱/全屏的助手消息；无消息时为 undefined。 */
+  const activeAssistant = messages.find((message) => message.id === activeAssistantId);
+  /** 主步骤状态（信息准备 / 六步 / 最终回答）用于 `SixStepProgressHorizontal`。 */
+  const liveMainStatus = activeAssistant?.mainStepStatus ?? DEFAULT_MAIN_STATUS;
+  /** 子步骤（purpose / actor / behavior / narrative）进度展示。 */
+  const liveSubStatus = activeAssistant?.subStepStatus ?? DEFAULT_SUB_STATUS;
+
+  useEffect(() => {
+    conversationsRef.current = conversations;
+  }, [conversations]);
+
+  /** 中止所有流式任务并清理控制器引用；不修改消息内容（停止后的 UI 由 `handleStop` 负责）。 */
+  const stopGeneration = useCallback(() => {
+    controllerRef.current?.stop();
+    controllerRef.current = null;
+    expertControllerRef.current?.stop();
+    expertControllerRef.current = null;
+    setIsGenerating(false);
+  }, []);
+
+  /**
+   * 在指定会话内按消息 id 做一次不可变更新（`patch` 返回完整新消息对象）。
+   * 用于专家卡片局部更新等「只改一条消息」的场景。
+   */
+  const patchMessageById = useCallback(
+    (conversationId: string, messageId: string, patch: (msg: SixStepMessage) => SixStepMessage) => {
+      setConversations((prev) =>
+        prev.map((conversation) => {
+          if (conversation.id !== conversationId) return conversation;
+          return {
+            ...conversation,
+            messages: conversation.messages.map((m) => (m.id === messageId ? patch(m) : m)),
+            updatedAt: Date.now(),
+          };
+        }),
+      );
+    },
+    [],
+  );
+
+  /** GET 列表：拉取本页 `filter_key` / `filter_value` 下的全部会话并排序。 */
+  const fetchConversations = useCallback(async (): Promise<SixStepConversationEntry[]> => {
+    const response = await fetch(conversationRequestUrl());
+    if (!response.ok) {
+      throw new Error(`加载聊天记录失败：${response.status}`);
+    }
+    const payload = (await response.json()) as ConversationApiRecord[];
+    return sortConversations(payload.map(normalizeConversation));
+  }, []);
+
+  /** GET 模型列表：用于页面头部模型切换。 */
+  const fetchModels = useCallback(async (): Promise<ModelsResponse> => {
+    const response = await fetch(`${backUrl}/api/models`);
+    if (!response.ok) {
+      throw new Error(`加载模型列表失败：${response.status}`);
+    }
+    return (await response.json()) as ModelsResponse;
+  }, []);
+
+  /** POST 创建空会话（可带初始 messages），返回规范化后的会话条目。 */
+  const createConversationOnServer = useCallback(
+    async (
+      title: string,
+      model?: string,
+      messagesToSave: SixStepMessage[] = [],
+    ): Promise<SixStepConversationEntry> => {
+      const response = await fetch(`${backUrl}/api/conversations`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          filter_key: FILTER_KEY,
+          filter_value: FILTER_VALUE,
+          title,
+          model,
+          meta: { page: FILTER_VALUE },
+          messages: messagesToSave.map(serializeMessage),
+        }),
+      });
+      if (!response.ok) {
+        throw new Error(`创建对话失败：${response.status}`);
+      }
+      return normalizeConversation((await response.json()) as ConversationApiRecord);
+    },
+    [],
+  );
+
+  /** PUT 更新会话：标题、模型、meta 或整表 messages（由调用方决定传哪些字段）。 */
+  const updateConversationOnServer = useCallback(
+    async (
+      conversationId: string,
+      payload: {
+        title?: string;
+        model?: string;
+        meta?: Record<string, unknown>;
+        messages?: SixStepMessage[];
+      },
+    ): Promise<SixStepConversationEntry> => {
+      const response = await fetch(conversationRequestUrl(conversationId), {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: payload.title,
+          model: payload.model,
+          meta: payload.meta,
+          messages: payload.messages?.map(serializeMessage),
+        }),
+      });
+      if (!response.ok) {
+        throw new Error(`更新对话失败：${response.status}`);
+      }
+      return normalizeConversation((await response.json()) as ConversationApiRecord);
+    },
+    [],
+  );
+
+  /** DELETE 单条会话。 */
+  const deleteConversationOnServer = useCallback(async (conversationId: string) => {
+    const response = await fetch(conversationRequestUrl(conversationId), {
+      method: 'DELETE',
+    });
+    if (!response.ok) {
+      throw new Error(`删除对话失败：${response.status}`);
+    }
+  }, []);
+
+  /** DELETE 当前筛选条件下的全部会话（清空历史）。 */
+  const clearConversationsOnServer = useCallback(async () => {
+    const response = await fetch(conversationRequestUrl(), {
+      method: 'DELETE',
+    });
+    if (!response.ok) {
+      throw new Error(`清空聊天记录失败：${response.status}`);
+    }
+  }, []);
+
+  /** 将一条会话合并进 state：同 id 覆盖，新会话插入队首后再按时间排序。 */
+  const upsertConversationState = useCallback((conversation: SixStepConversationEntry) => {
+    setConversations((prev) =>
+      sortConversations([conversation, ...prev.filter((item) => item.id !== conversation.id)]),
+    );
+  }, []);
+
+  /**
+   * 用 `conversationsRef` 中的最新快照整表 PUT 到服务端，再用返回结果更新本地。
+   * 流式 `onComplete`、停止后延迟保存等会调用，避免丢最后几条 SSE 合并结果。
+   */
+  const persistConversation = useCallback(
+    async (conversationId: string) => {
+      const current = conversationsRef.current.find((item) => item.id === conversationId);
+      if (!current) return null;
+      const updated = await updateConversationOnServer(conversationId, {
+        title: current.title,
+        model: current.model,
+        meta: { page: FILTER_VALUE },
+        messages: current.messages,
+      });
+      upsertConversationState(updated);
+      return updated;
+    },
+    [updateConversationOnServer, upsertConversationState],
+  );
+
+  /**
+   * 仅更新「当前激活会话」的 messages，语义上类似 `useState` 的 setState，
+   * 但实现为在 `conversations` 数组里找到 `activeConvId` 对应项并替换其 `messages`。
+   */
+  const setMessages = useCallback<React.Dispatch<React.SetStateAction<SixStepMessage[]>>>(
+    (value) => {
+      setConversations((prev) =>
+        prev.map((conversation) => {
+          if (conversation.id !== activeConvId) return conversation;
+          const nextMessages =
+            typeof value === 'function'
+              ? (value as (messages: SixStepMessage[]) => SixStepMessage[])(conversation.messages)
+              : value;
+          return {
+            ...conversation,
+            messages: nextMessages,
+            updatedAt: Date.now(),
+          };
+        }),
+      );
+    },
+    [activeConvId],
+  );
+
+  /** 挂载时拉取会话列表；成功则选中最新一条，失败则置空列表（组件卸载时忽略异步结果）。 */
+  useEffect(() => {
+    let cancelled = false;
+
+    (async () => {
+      setLoading(true);
+      try {
+        const [items, modelsPayload] = await Promise.all([fetchConversations(), fetchModels()]);
+        if (cancelled) return;
+        const nextModels = modelsPayload.models || [];
+        const defaultModelId = modelsPayload.default_model_id || '';
+        setConversations(items);
+        setModels(nextModels);
+        setGlobalDefaultModel(defaultModelId);
+        setActiveConvId(items[0]?.id || null);
+        setSelectedModel(items[0]?.model || defaultModelId || nextModels[0]?.id || '');
+        hasLoadedRef.current = true;
+      } catch {
+        if (!cancelled) {
+          setConversations([]);
+          setModels([]);
+          setGlobalDefaultModel('');
+          setSelectedModel('');
+          setActiveConvId(null);
+          hasLoadedRef.current = true;
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [fetchConversations, fetchModels]);
+
+  /** 新建会话：停流 → 服务端创建 → 切到新会话并重置专家/MCP 弹窗与输入。 */
+  const handleNewConversation = useCallback(async () => {
+    stopGeneration();
+    const created = await createConversationOnServer(NEW_TITLE, selectedModel || globalDefaultModel || undefined);
+    upsertConversationState(created);
+    setActiveConvId(created.id);
+    setSelectedModel(created.model || selectedModel || globalDefaultModel || models[0]?.id || '');
+    setActiveAssistantMsgId(null);
+    setMcpModal({ open: false, messageId: null, expert: null });
+    setInput('');
+  }, [createConversationOnServer, globalDefaultModel, models, selectedModel, stopGeneration, upsertConversationState]);
+
+  /** 切换侧边选中的会话：停流、清空专家弹窗与输入（不自动持久化，仅切本地状态）。 */
+  const handleSelectConversation = useCallback(
+    (id: string) => {
+      if (id === activeConvId) return;
+      stopGeneration();
+      const nextConversation = conversationsRef.current.find((item) => item.id === id) || null;
+      setActiveConvId(id);
+      setSelectedModel(nextConversation?.model || globalDefaultModel || models[0]?.id || '');
+      setActiveAssistantMsgId(null);
+      setMcpModal({ open: false, messageId: null, expert: null });
+      setInput('');
+    },
+    [activeConvId, globalDefaultModel, models, stopGeneration],
+  );
+
+  /** 选择模型后写入当前会话，后续 /api/orchestrate/stream 请求会透传该 model。 */
+  const handleModelChange = useCallback(
+    async (modelId: string) => {
+      setSelectedModel(modelId);
+      if (!activeConvId) return;
+      setConversations((prev) =>
+        prev.map((conversation) =>
+          conversation.id === activeConvId
+            ? { ...conversation, model: modelId, updatedAt: Date.now() }
+            : conversation,
+        ),
+      );
+      try {
+        const updated = await updateConversationOnServer(activeConvId, { model: modelId });
+        upsertConversationState(updated);
+      } catch {
+        // 本地模型仍保留，发送时继续透传 selectedModel。
+      }
+    },
+    [activeConvId, updateConversationOnServer, upsertConversationState],
+  );
+
+  /** 删除指定会话；若删的是当前会话则停流并自动选中剩余列表中的下一条（若有）。 */
+  const handleDeleteConversation = useCallback(
+    async (id: string) => {
+      await deleteConversationOnServer(id);
+      setConversations((prev) => {
+        const remaining = prev.filter((item) => item.id !== id);
+        if (id === activeConvId) {
+          stopGeneration();
+          const next = sortConversations(remaining)[0] || null;
+          setActiveConvId(next?.id || null);
+          setSelectedModel(next?.model || globalDefaultModel || models[0]?.id || '');
+        }
+        return remaining;
+      });
+    },
+    [activeConvId, deleteConversationOnServer, globalDefaultModel, models, stopGeneration],
+  );
+
+  /** 乐观更新标题后立即 PUT，再用服务端返回覆盖（避免短暂显示旧标题）。 */
+  const handleRenameConversation = useCallback(
+    async (id: string, title: string) => {
+      const current = conversations.find((item) => item.id === id);
+      if (!current) return;
+      const optimistic = { ...current, title, updatedAt: Date.now() };
+      upsertConversationState(optimistic);
+      const updated = await updateConversationOnServer(id, { title });
+      upsertConversationState(updated);
+    },
+    [conversations, updateConversationOnServer, upsertConversationState],
+  );
+
+  /** 清空服务端与本地的全部本会话类型记录，并取消当前选中。 */
+  const handleClearAllConversations = useCallback(async () => {
+    stopGeneration();
+    await clearConversationsOnServer();
+    setConversations([]);
+    setActiveConvId(null);
+  }, [clearConversationsOnServer, stopGeneration]);
+
+  /**
+   * 仅调用专家搜索 API（不经意图编排 SSE）。
+   * 当前主对话已统一走 `runIntentOrchestrateStream`；本函数保留为独立专家搜索能力的封装。
+   */
+  const startExpertSearch = useCallback(
+    (conversationId: string, messageId: string, userInput: string, excludeIds?: string[]) => {
+      expertControllerRef.current?.stop();
+      const baseData: ExpertMatchData = {
+        status: 'searching',
+        thinking: '',
+        experts: [],
+      };
+      const controller = runExpertSearch(
+        baseData,
+        { user_input: userInput, exclude_ids: excludeIds },
+        {
+          onUpdate: (data) => {
+            patchMessageById(conversationId, messageId, (m) => ({
+              ...m,
+              expertMatch: data,
+            }));
+          },
+          onComplete: () => {
+            expertControllerRef.current = null;
+            setIsGenerating(false);
+            void persistConversation(conversationId);
+          },
+        },
+      );
+      expertControllerRef.current = controller;
+      void controller.promise.catch(() => {
+        setIsGenerating(false);
+      });
+    },
+    [patchMessageById, persistConversation],
+  );
+
+  /**
+   * 旧版六步推演：在已选定专家与子链后，直接 `runSixStepDeduction` 拉流。
+   * 与 `runIntentOrchestrateStream` + `force_orchestrate` 并存，便于迁移期或特殊入口复用。
+   */
+  const runDeductionForMessage = useCallback(
+    (conversationId: string, message: SixStepMessage, userInput: string, expert: ExpertCard, selectedMcps: SelectableMcpKey[]) => {
+      const requestExpert = { ...expert, id: expert.backendId ?? expert.id };
+      setIsGenerating(true);
+      setActiveAssistantMsgId(message.id);
+
+      const controller = runSixStepDeduction(
+        { ...message, phase: 'generate', selectedExpert: requestExpert, selectedMcps },
+        {
+          onUpdate: (updated) => {
+            setConversations((prev) =>
+              prev.map((conversation) => {
+                if (conversation.id !== conversationId) return conversation;
+                return {
+                  ...conversation,
+                  messages: conversation.messages.map((item) =>
+                    item.id === updated.id ? { ...item, ...updated } : item,
+                  ),
+                  updatedAt: Date.now(),
+                };
+              }),
+            );
+          },
+          onComplete: () => {
+            setIsGenerating(false);
+            controllerRef.current = null;
+            void persistConversation(conversationId);
+          },
+        },
+        {
+          user_input: userInput,
+          output_format: outputFormat,
+          model: selectedModel || undefined,
+          selected_expert: requestExpert,
+          selected_mcps: selectedMcps,
+        },
+      );
+
+      controllerRef.current = controller;
+      void controller.promise.catch(() => {
+        setIsGenerating(false);
+      });
+    },
+    [outputFormat, persistConversation, selectedModel],
+  );
+
+  /**
+   * 用户点击发送后的主编排入口（意图识别 + 分支 SSE）。
+   *
+   * 流程要点：
+   * 1. 无当前会话则先创建服务端会话。
+   * 2. 从「上一条助手消息」读取 `phase`、`selectedExpert`、`expertMatch.experts`、`rawSteps` 等，
+   *    组装 `IntentOrchestrateRequest`，供后端 `detect_intent` 与 continue 分支使用。
+   * 3. 若 `phase === 'paused'`，把上一轮的 stages / rawSteps / 选中专家与子链预填到新助手占位里，
+   *    并把 `last_steps`、`selected_mcps` 放进请求体（仅暂停续跑场景传 `last_steps`，避免误传）。
+   * 4. 追加 user + assistant 后立刻 `runIntentOrchestrateStream`，用返回的 `updated` 合并同 id 助手消息。
+   */
+  const handleSend = useCallback(async () => {
+    const trimmed = input.trim();
+    if (!trimmed || isGenerating) return;
+
+    let target = activeConv;
+    if (!target) {
+      target = await createConversationOnServer(NEW_TITLE);
+      upsertConversationState(target);
+      setActiveConvId(target.id);
+    }
+
+    // 意图编排上下文：来自「上一条助手消息」，与后端 OrchestrateRequest 字段对齐
+    const lastAssistant = [...target.messages].reverse().find((m) => m.role === 'assistant');
+    const currentPhase = lastAssistant?.phase ?? 'idle';
+    const selectedExpert = lastAssistant?.selectedExpert ?? null;
+    const expertCandidates = (lastAssistant?.expertMatch?.experts ?? []) as unknown as Record<string, unknown>[];
+    const isPaused = currentPhase === 'paused';
+    const lastSteps = isPaused && lastAssistant?.rawSteps
+      ? (lastAssistant.rawSteps as unknown as Record<string, unknown>[])
+      : [];
+    const selectedExpertPayload = selectedExpert
+      ? (selectedExpert as unknown as Record<string, unknown>)
+      : null;
+    const pausedSelectedMcps = isPaused && lastAssistant?.selectedMcps ? lastAssistant.selectedMcps : [];
+
+    // 本轮用户气泡
+    const userMessage: SixStepMessage = {
+      id: `user-${Date.now()}`,
+      role: 'user',
+      content: trimmed,
+      timestamp: new Date(),
+    };
+
+    /**
+     * 新的助手占位：从「意图识别中」开始。
+     * 若从 paused 恢复，则克隆上一轮卡片/步骤/rawSteps/已选专家子链，便于 UI 连续与后端续跑。
+     */
+    const assistantMessage: SixStepMessage = {
+      ...buildInitialAssistantMessage(),
+      outputFormat,
+      phase: 'intent-detecting',
+      ...(isPaused && lastAssistant ? {
+        stages: { ...lastAssistant.stages },
+        rawSteps: lastAssistant.rawSteps ? [...lastAssistant.rawSteps] : undefined,
+        subStepStatus: lastAssistant.subStepStatus ? { ...lastAssistant.subStepStatus } : undefined,
+        mainStepStatus: lastAssistant.mainStepStatus ? { ...lastAssistant.mainStepStatus } : undefined,
+        selectedExpert: lastAssistant.selectedExpert,
+        selectedMcps: lastAssistant.selectedMcps,
+      } : {}),
+    };
+
+    // 首条真实问题时，用摘要覆盖默认标题「新对话」
+    const nextTitle = !target.title || target.title === NEW_TITLE ? trimmed.slice(0, 24) : target.title;
+    const nextConversation: SixStepConversationEntry = {
+      ...target,
+      title: nextTitle,
+      messages: [...target.messages, userMessage, assistantMessage],
+      updatedAt: Date.now(),
+    };
+
+    upsertConversationState(nextConversation);
+    setActiveConvId(nextConversation.id);
+    setInput('');
+    setIsGenerating(true);
+    setActiveAssistantMsgId(assistantMessage.id);
+    setHistoryOpen(false);
+
+    const convId = nextConversation.id;
+    // intent_mode 默认 auto，由 api 层与后端协商；此处只传会话态供意图识别与 continue 使用
+    const reqBody: IntentOrchestrateRequest = {
+      user_input: trimmed,
+      output_format: outputFormat,
+      model: selectedModel || target.model || globalDefaultModel || undefined,
+      current_phase: currentPhase,
+      selected_expert: selectedExpertPayload,
+      selected_mcps: pausedSelectedMcps,
+      expert_candidates: expertCandidates,
+      last_steps: lastSteps,
+    };
+
+    const controller = runIntentOrchestrateStream(
+      assistantMessage,
+      {
+        onUpdate: (updated) => {
+          setConversations((prev) =>
+            prev.map((conv) => {
+              if (conv.id !== convId) return conv;
+              return {
+                ...conv,
+                messages: conv.messages.map((m) => (m.id === updated.id ? { ...m, ...updated } : m)),
+                updatedAt: Date.now(),
+              };
+            }),
+          );
+        },
+        onComplete: () => {
+          setIsGenerating(false);
+          controllerRef.current = null;
+          void persistConversation(convId);
+        },
+      },
+      reqBody,
+    );
+    controllerRef.current = controller;
+    void controller.promise.catch(() => { setIsGenerating(false); });
+  }, [
+    activeConv,
+    createConversationOnServer,
+    globalDefaultModel,
+    input,
+    isGenerating,
+    outputFormat,
+    persistConversation,
+    selectedModel,
+    upsertConversationState,
+  ]);
+
+  // ---------------------------------------------------------------------------
+  // 专家匹配与 MCP 子链：由 SixStepConversation 经 expertHandlers 回调到本页
+  // 典型顺序：选专家卡片 → 确认 → McpSelectModal 选子链 → handleMcpModalConfirm 开跑编排
+  // ---------------------------------------------------------------------------
+
+  /** 在 `conversationsRef` 全集中按消息 id 查找所属会话与消息（避免闭包拿到过期列表）。 */
+  const findMessage = useCallback(
+    (messageId: string): { conv: SixStepConversationEntry | null; msg: SixStepMessage | null } => {
+      for (const conv of conversationsRef.current) {
+        const m = conv.messages.find((x) => x.id === messageId);
+        if (m) return { conv, msg: m };
+      }
+      return { conv: null, msg: null };
+    },
+    [],
+  );
+
+  /** 用户在专家卡片上点选某张专家：只写入 `expertMatch.selectedExpertId`（尚未开始推演）。 */
+  const handleSelectExpert = useCallback(
+    (messageId: string, expertId: string) => {
+      const { conv } = findMessage(messageId);
+      if (!conv) return;
+      patchMessageById(conv.id, messageId, (m) => ({
+        ...m,
+        expertMatch: m.expertMatch ? { ...m.expertMatch, selectedExpertId: expertId } : m.expertMatch,
+      }));
+    },
+    [findMessage, patchMessageById],
+  );
+
+  /**
+   * 「换一批 / 重新找专家」：用触发该助手气泡前的用户原句 + `force_find_expert`，
+   * 并传入已有 `expert_candidates` 供后端去重。流控制器挂在 `expertControllerRef` 以便 stop。
+   */
+  const handleRefetchExpert = useCallback(
+    (messageId: string) => {
+      const { conv, msg } = findMessage(messageId);
+      if (!conv || !msg) return;
+      const idx = conv.messages.findIndex((m) => m.id === messageId);
+      const userMsg = idx > 0 ? [...conv.messages.slice(0, idx)].reverse().find((m) => m.role === 'user') : null;
+      const userInput = userMsg?.content?.trim() ?? '';
+      if (!userInput) return;
+
+      const existingCandidates = (msg.expertMatch?.experts ?? []) as unknown as Record<string, unknown>[];
+
+      // 清空上一轮专家列表与意图，界面进入「识别中」再收 SSE
+      patchMessageById(conv.id, messageId, (m) => ({
+        ...m,
+        phase: 'intent-detecting' as const,
+        expertMatch: { status: 'searching' as const, thinking: '', experts: [] },
+        intent: undefined,
+      }));
+      setIsGenerating(true);
+      setActiveAssistantMsgId(messageId);
+
+      const convId = conv.id;
+      const refetchMsg: SixStepMessage = {
+        ...msg,
+        phase: 'intent-detecting',
+        expertMatch: { status: 'searching', thinking: '', experts: [] },
+        intent: undefined,
+      };
+
+      const controller = runIntentOrchestrateStream(
+        refetchMsg,
+        {
+          onUpdate: (updated) => {
+            setConversations((prev) =>
+              prev.map((c) => {
+                if (c.id !== convId) return c;
+                return {
+                  ...c,
+                  messages: c.messages.map((m) => (m.id === updated.id ? { ...m, ...updated } : m)),
+                  updatedAt: Date.now(),
+                };
+              }),
+            );
+          },
+          onComplete: () => {
+            setIsGenerating(false);
+            controllerRef.current = null;
+            void persistConversation(convId);
+          },
+        },
+        {
+          user_input: userInput,
+          intent_mode: 'force_find_expert',
+          model: selectedModel || conv.model || globalDefaultModel || undefined,
+          expert_candidates: existingCandidates,
+        },
+      );
+      expertControllerRef.current = { stop: controller.stop, promise: controller.promise };
+      void controller.promise.catch(() => { setIsGenerating(false); });
+    },
+    [findMessage, globalDefaultModel, patchMessageById, persistConversation, selectedModel],
+  );
+
+  /** 调用创建专家接口，进度与结果写回同一条消息的 `expertMatch`。 */
+  const handleCreateExpert = useCallback(
+    (messageId: string) => {
+      const { conv, msg } = findMessage(messageId);
+      if (!conv || !msg) return;
+      const idx = conv.messages.findIndex((m) => m.id === messageId);
+      const userMsg = idx > 0 ? [...conv.messages.slice(0, idx)].reverse().find((m) => m.role === 'user') : null;
+      const userInput = userMsg?.content?.trim() || '';
+      if (!userInput) return;
+
+      expertControllerRef.current?.stop();
+      setIsGenerating(true);
+      setActiveAssistantMsgId(messageId);
+      const baseData = msg.expertMatch ?? { status: 'idle', thinking: '', experts: [] };
+      const controller = runExpertCreate(
+        baseData,
+        { user_input: userInput },
+        {
+          onUpdate: (data) => {
+            patchMessageById(conv.id, messageId, (m) => ({ ...m, expertMatch: data }));
+          },
+          onComplete: () => {
+            expertControllerRef.current = null;
+            setIsGenerating(false);
+            void persistConversation(conv.id);
+          },
+        },
+      );
+      expertControllerRef.current = controller;
+      void controller.promise.catch(() => {
+        setIsGenerating(false);
+      });
+    },
+    [findMessage, patchMessageById, persistConversation],
+  );
+
+  /**
+   * 用户确认当前选中的专家：打开 MCP 子链选择弹窗（不立即请求编排）。
+   * 真正开跑在 `handleMcpModalConfirm`。
+   */
+  const handleConfirmExpertSelect = useCallback(
+    (messageId: string) => {
+      const { msg } = findMessage(messageId);
+      if (!msg || !msg.expertMatch) return;
+      const expert = msg.expertMatch.experts.find((e) => e.id === msg.expertMatch?.selectedExpertId) || null;
+      if (!expert) return;
+      setMcpModal({ open: true, messageId, expert });
+    },
+    [findMessage],
+  );
+
+  /** 关闭 MCP 弹窗且不提交子链选择。 */
+  const handleMcpModalCancel = useCallback(() => {
+    setMcpModal({ open: false, messageId: null, expert: null });
+  }, []);
+
+  /**
+   * MCP 弹窗确认：把专家 + 勾选子链写入消息，并以「原始用户问题」为 `user_input`、
+   * `intent_mode: 'force_orchestrate'` 立即启动六步编排 SSE（不再依赖本轮意图识别）。
+   *
+   * 注意：会清空 `stages` / 最终回答等，相当于从专家确认点重新开始一条生成链路。
+   */
+  const handleMcpModalConfirm = useCallback(
+    (selectedMcps: SelectableMcpKey[]) => {
+      const messageId = mcpModal.messageId;
+      const expert = mcpModal.expert;
+      if (!messageId || !expert) {
+        setMcpModal({ open: false, messageId: null, expert: null });
+        return;
+      }
+      const { conv, msg } = findMessage(messageId);
+      if (!conv || !msg) return;
+
+      // 回溯该助手消息之前的最近一条用户消息，作为编排 user_input（与首次 handleSend 的句子一致）
+      const msgIdx = conv.messages.findIndex((m) => m.id === messageId);
+      const userMsg = msgIdx > 0
+        ? [...conv.messages.slice(0, msgIdx)].reverse().find((m) => m.role === 'user')
+        : null;
+      const originalInput = userMsg?.content?.trim() ?? '';
+
+      const requestExpert = { ...expert, id: expert.backendId ?? expert.id } as unknown as ExpertCard;
+
+      // 重置为「即将跑六步」的干净状态，避免残留上一次的 stages / 流式片段
+      const resetMsg: SixStepMessage = {
+        ...msg,
+        phase: 'generate',
+        outputFormat,
+        selectedExpert: requestExpert,
+        selectedMcps,
+        expertMatch: msg.expertMatch
+          ? { ...msg.expertMatch, status: 'confirmed', selectedExpertId: expert.id, selectedMcps }
+          : msg.expertMatch,
+        intent: undefined,
+        stages: {},
+        finalAnswer: '',
+        markdownContent: '',
+        mainStepStatus: { info: 'pending', sixstep: 'pending', final: 'pending' },
+        subStepStatus: { purpose: 'pending', actor: 'pending', behavior: 'pending', narrative: 'pending' },
+        currentMainStep: undefined,
+        currentSubStep: undefined,
+      };
+
+      // 先同步到 state，再发起流式请求，避免首包事件到达时仍显示旧 UI
+      patchMessageById(conv.id, messageId, () => resetMsg);
+      setMcpModal({ open: false, messageId: null, expert: null });
+      setActiveAssistantMsgId(messageId);
+      setIsGenerating(true);
+
+      const convId = conv.id;
+      const controller = runIntentOrchestrateStream(
+        resetMsg,
+        {
+          onUpdate: (updated) => {
+            setConversations((prev) =>
+              prev.map((c) => {
+                if (c.id !== convId) return c;
+                return {
+                  ...c,
+                  messages: c.messages.map((m) => (m.id === updated.id ? { ...m, ...updated } : m)),
+                  updatedAt: Date.now(),
+                };
+              }),
+            );
+          },
+          onComplete: () => {
+            setIsGenerating(false);
+            controllerRef.current = null;
+            void persistConversation(convId);
+          },
+        },
+        {
+          user_input: originalInput,
+          output_format: outputFormat,
+          model: selectedModel || conv.model || globalDefaultModel || undefined,
+          intent_mode: 'force_orchestrate',
+          selected_expert: requestExpert as unknown as Record<string, unknown>,
+          selected_mcps: selectedMcps,
+        },
+      );
+      controllerRef.current = controller;
+      void controller.promise.catch(() => { setIsGenerating(false); });
+      // 与 onComplete 双保险：确保刚写入 resetMsg 的本地状态也被持久化（避免竞态丢保存）
+      window.setTimeout(() => { void persistConversation(convId); }, 0);
+    },
+    [findMessage, globalDefaultModel, mcpModal.expert, mcpModal.messageId, outputFormat, patchMessageById, persistConversation, selectedModel],
+  );
+
+  /**
+   * 用户中止生成：停止所有流式控制器，并把「未完成的助手消息」标为可续跑状态。
+   * - 将 `running` 的主/子步骤重置为 `pending`，清除当前指针。
+   * - 若正处于 `generate` 或 `intent-detecting`，将 `phase` 置为 `paused`，配合下次 `handleSend` 传 `last_steps`。
+   * - 异步触发一次 `persistConversation`，把 paused 态写入服务端。
+   */
+  const handleStop = useCallback(() => {
+    const targetId = activeConvId;
+    controllerRef.current?.stop();
+    controllerRef.current = null;
+    expertControllerRef.current?.stop();
+    expertControllerRef.current = null;
+    setIsGenerating(false);
+    setMessages((prev) =>
+      prev.map((message) => {
+        if (message.role !== 'assistant' || message.mainStepStatus?.final === 'done') return message;
+        const main = { ...(message.mainStepStatus ?? DEFAULT_MAIN_STATUS) };
+        const sub = { ...(message.subStepStatus ?? DEFAULT_SUB_STATUS) };
+        (Object.keys(main) as MainStepKey[]).forEach((key) => {
+          if (main[key] === 'running') main[key] = 'pending';
+        });
+        (Object.keys(sub) as SubStepKey[]).forEach((key) => {
+          if (sub[key] === 'running') sub[key] = 'pending';
+        });
+        // 暂停态：后端 continue_analysis 依赖 current_phase 与 last_steps
+        const isInGenerate = message.phase === 'generate' || message.phase === 'intent-detecting';
+        return {
+          ...message,
+          phase: isInGenerate ? ('paused' as const) : message.phase,
+          mainStepStatus: main,
+          subStepStatus: sub,
+          currentMainStep: undefined,
+          currentSubStep: undefined,
+        };
+      }),
+    );
+    if (targetId) {
+      window.setTimeout(() => { void persistConversation(targetId); }, 0);
+    }
+  }, [activeConvId, persistConversation, setMessages]);
+
+  /** 拖拽调整流程图沙箱宽度：在最小/最大值与主内容区剩余宽度之间取交集。 */
+  const handleResizeMove = useCallback((event: MouseEvent) => {
+    const resizeData = resizeRef.current;
+    const container = containerRef.current;
+    if (!resizeData || !container) return;
+    const containerRect = container.getBoundingClientRect();
+    const delta = resizeData.startX - event.clientX;
+    let next = resizeData.startWidth + delta;
+    next = Math.max(MIN_SANDBOX_WIDTH, Math.min(MAX_SANDBOX_WIDTH, next));
+    next = Math.min(next, containerRect.width - 480);
+    setSandboxWidth(next);
+  }, []);
+
+  /** 结束拖拽：恢复光标与文本选择，移除全局鼠标监听。 */
+  const handleResizeEnd = useCallback(() => {
+    resizeRef.current = null;
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+    window.removeEventListener('mousemove', handleResizeMove);
+    window.removeEventListener('mouseup', handleResizeEnd);
+  }, [handleResizeMove]);
+
+  /** 开始拖拽沙箱左边界：记录初始宽度并注册 `mousemove` / `mouseup`。 */
+  const handleResizeStart = useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+      resizeRef.current = { startX: event.clientX, startWidth: sandboxWidth };
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+      window.addEventListener('mousemove', handleResizeMove);
+      window.addEventListener('mouseup', handleResizeEnd);
+    },
+    [handleResizeEnd, handleResizeMove, sandboxWidth],
+  );
+
+  /** 组件卸载时：中止主编排流并清理拖拽监听，防止泄漏与幽灵请求。 */
+  useEffect(() => {
+    return () => {
+      controllerRef.current?.stop();
+      window.removeEventListener('mousemove', handleResizeMove);
+      window.removeEventListener('mouseup', handleResizeEnd);
+    };
+  }, [handleResizeEnd, handleResizeMove]);
+
+  // ---------------------------------------------------------------------------
+  // 布局：顶栏（标题 + 进度 + 格式/历史/沙箱开关）| 侧栏历史 | 主列对话+输入 | 可选沙箱/全屏
+  // ---------------------------------------------------------------------------
+  return (
+    <div
+      ref={containerRef}
+      className={`flex h-[calc(100vh-120px)] flex-col rounded-xl border theme-bg ${
+        isDark ? 'border-slate-700/50 bg-slate-800/50' : 'border-red-100 bg-white'
+      }`}
+    >
+      <div
+        className={`flex items-center gap-4 border-b px-6 py-4 ${
+          isDark ? 'border-slate-700/50' : 'border-red-100'
+        }`}
+      >
+        <div className="min-w-0 shrink-0">
+          <div className="flex items-center gap-3">
+            <div
+              className={`flex h-9 w-9 items-center justify-center rounded-2xl ${
+                isDark ? 'bg-cyan-500/15 text-cyan-300' : 'bg-red-50 text-red-500'
+              }`}
+            >
+              <Sparkles className="h-5 w-5" />
+            </div>
+            <div className="min-w-0">
+              <h1 className={`truncate text-lg font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                6 bf推演问答1
+              </h1>
+              <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                基于 6 步法的结构化推演与可视化生成
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex min-w-0 flex-1 items-center justify-center">
+          <SixStepProgressHorizontal mainStatus={liveMainStatus} subStatus={liveSubStatus} isDark={isDark} />
+        </div>
+
+        <div className="shrink-0">
+          <div className="flex items-center gap-2">
+            <div className={`flex items-center rounded-lg border overflow-hidden ${
+              isDark ? 'border-slate-600/40' : 'border-gray-200'
+            }`}>
+              <div className={`px-2 py-2 text-xs ${
+                isDark ? 'bg-slate-700/40 text-slate-400' : 'bg-gray-50 text-gray-500'
+              }`}>
+                模型
+              </div>
+              <select
+                value={selectedModel || globalDefaultModel}
+                onChange={(e) => { void handleModelChange(e.target.value); }}
+                className={`h-[34px] min-w-[170px] border-0 px-2 text-xs outline-none ${
+                  isDark ? 'bg-slate-700/40 text-slate-100' : 'bg-white text-gray-700'
+                }`}
+                title="切换当前对话使用模型"
+              >
+                {models.length === 0 ? (
+                  <option value="">默认模型</option>
+                ) : null}
+                {models.map((model) => (
+                  <option key={model.id} value={model.id}>
+                    {model.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Output format toggle */}
+            <div className={`flex items-center rounded-lg border overflow-hidden ${
+              isDark ? 'border-slate-600/40' : 'border-gray-200'
+            }`}>
+              <button
+                type="button"
+                onClick={() => handleSetOutputFormat('structured')}
+                title="结构化卡片输出"
+                className={`flex items-center gap-1.5 px-3 py-2 text-xs font-medium transition-all ${
+                  outputFormat === 'structured'
+                    ? isDark
+                      ? 'bg-cyan-500/20 text-cyan-200'
+                      : 'bg-red-50 text-red-600'
+                    : isDark
+                      ? 'bg-slate-700/40 text-slate-400 hover:text-slate-200'
+                      : 'bg-white text-gray-500 hover:text-gray-700'
+                }`}
+              >
+                <LayoutList className="h-3.5 w-3.5" />
+                <span>结构化</span>
+              </button>
+              <div className={`w-px self-stretch ${isDark ? 'bg-slate-600/40' : 'bg-gray-200'}`} />
+              <button
+                type="button"
+                onClick={() => handleSetOutputFormat('markdown')}
+                title="Markdown 文本输出"
+                className={`flex items-center gap-1.5 px-3 py-2 text-xs font-medium transition-all ${
+                  outputFormat === 'markdown'
+                    ? isDark
+                      ? 'bg-cyan-500/20 text-cyan-200'
+                      : 'bg-red-50 text-red-600'
+                    : isDark
+                      ? 'bg-slate-700/40 text-slate-400 hover:text-slate-200'
+                      : 'bg-white text-gray-500 hover:text-gray-700'
+                }`}
+              >
+                <AlignLeft className="h-3.5 w-3.5" />
+                <span>Markdown</span>
+              </button>
+            </div>
+
+            <button
+              type="button"
+              onClick={() => setHistoryOpen((value) => !value)}
+              className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition-all ${
+                historyOpen
+                  ? isDark
+                    ? 'border-cyan-400/40 bg-cyan-500/15 text-cyan-200'
+                    : 'border-red-200 bg-red-50 text-red-600'
+                  : isDark
+                    ? 'border-slate-600/40 bg-slate-700/40 text-slate-300 hover:bg-slate-700'
+                    : 'border-gray-200 bg-white text-gray-700 hover:bg-gray-50'
+              }`}
+            >
+              <History className="h-4 w-4" />
+              <span>{historyOpen ? '关闭记录' : '聊天记录'}</span>
+            </button>
+
+            {outputFormat === 'structured' && (
+              <button
+                type="button"
+                onClick={() => setSandboxOpen((value) => !value)}
+                className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition-all ${
+                  sandboxOpen
+                    ? isDark
+                      ? 'border-cyan-400/40 bg-cyan-500/15 text-cyan-200'
+                      : 'border-red-200 bg-red-50 text-red-600'
+                    : isDark
+                      ? 'border-slate-600/40 bg-slate-700/40 text-slate-300 hover:bg-slate-700'
+                      : 'border-gray-200 bg-white text-gray-700 hover:bg-gray-50'
+                }`}
+              >
+                <GitBranch className="h-4 w-4" />
+                <span>{sandboxOpen ? '关闭流程图' : '流程图沙箱'}</span>
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-1 overflow-hidden">
+        <SixStepChatHistory
+          isOpen={historyOpen}
+          isDark={isDark}
+          conversations={conversationMetas}
+          activeId={activeConvId}
+          onClose={() => setHistoryOpen(false)}
+          onOpen={() => setHistoryOpen(true)}
+          onSelect={handleSelectConversation}
+          onNew={() => void handleNewConversation()}
+          onDelete={(id) => void handleDeleteConversation(id)}
+          onRename={(id, title) => void handleRenameConversation(id, title)}
+          onClearAll={() => void handleClearAllConversations()}
+        />
+
+        <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+          <div className="flex-1 overflow-hidden">
+            <SixStepConversation
+              messages={messages}
+              isGenerating={isGenerating || loading}
+              activeMessageId={activeAssistantMsgId}
+              expertHandlers={{
+                onSelectExpert: handleSelectExpert,
+                onRefetchExpert: handleRefetchExpert,
+                onCreateExpert: handleCreateExpert,
+                onConfirmExpert: handleConfirmExpertSelect,
+              }}
+            />
+          </div>
+          <ChatInputComposer
+            value={input}
+            onChange={setInput}
+            onSend={() => void handleSend()}
+            onStop={handleStop}
+            placeholder="输入你想要推演的问题或场景..."
+            isSending={isGenerating}
+            isDarkMode={isDark}
+            showBorderTop
+            showUpload
+            onUploadFile={async () => undefined}
+          />
+        </div>
+
+        {sandboxOpen ? (
+          <SixStepFlowSandbox
+            message={activeAssistant}
+            width={sandboxWidth}
+            onResizeStart={handleResizeStart}
+            onClose={() => setSandboxOpen(false)}
+            onOpenFullscreen={() => setFullscreenOpen(true)}
+          />
+        ) : null}
+      </div>
+
+      {fullscreenOpen ? (
+        <SixStepFlowFullscreen message={activeAssistant} onClose={() => setFullscreenOpen(false)} />
+      ) : null}
+
+      <McpSelectModal
+        open={mcpModal.open}
+        expert={mcpModal.expert}
+        onCancel={handleMcpModalCancel}
+        onConfirm={handleMcpModalConfirm}
+      />
+    </div>
+  );
+}
diff --git a/web-code/components/angentchat/SixStepConversation.tsx b/web-code/components/angentchat/SixStepConversation.tsx
new file mode 100644
index 00000000..ecc00b5e
--- /dev/null
+++ b/web-code/components/angentchat/SixStepConversation.tsx
@@ -0,0 +1,660 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Bot, CheckCircle2, Database, FileCheck2, Sparkles, UserRound } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { useTheme } from '../../contexts/ThemeContext';
+import ExpertMatchCards from './ExpertMatchCards';
+import StreamErrorNotice from './StreamErrorNotice';
+import {
+  ActorCardItem,
+  BehaviorCardItem,
+  InlineCollapsible,
+  NarrativeCardItem,
+  ParentGroupHeader,
+  PurposeCardItem,
+  STAGE_ICONS,
+  StageHeader,
+  ThinkingBlock,
+} from './SixStepCards';
+import type {
+  ActorCard,
+  BehaviorDriverCard,
+  InfoStageData,
+  NarrativeCard,
+  PurposeCard,
+  SixStepMessage,
+} from './types';
+
+export interface ExpertMatchHandlers {
+  onSelectExpert: (messageId: string, expertId: string) => void;
+  onRefetchExpert: (messageId: string) => void;
+  onCreateExpert: (messageId: string) => void;
+  onConfirmExpert: (messageId: string) => void;
+}
+
+interface SixStepConversationProps {
+  messages: SixStepMessage[];
+  isGenerating: boolean;
+  activeMessageId?: string | null;
+  expertHandlers?: ExpertMatchHandlers;
+}
+
+interface AvatarProps {
+  role: 'user' | 'assistant';
+  active?: boolean;
+}
+
+const Avatar: React.FC<AvatarProps> = ({ role, active }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const Icon = role === 'assistant' ? Bot : UserRound;
+  return (
+    <div className={`relative w-9 h-9 rounded-2xl flex items-center justify-center shrink-0 shadow-sm overflow-hidden ${
+      role === 'assistant'
+        ? isDark
+          ? 'bg-gradient-to-br from-cyan-500 via-blue-600 to-violet-600 text-white'
+          : 'bg-gradient-to-br from-red-400 via-rose-500 to-orange-400 text-white'
+        : isDark
+          ? 'bg-gradient-to-br from-slate-500 via-slate-700 to-slate-900 text-white'
+          : 'bg-gradient-to-br from-sky-400 via-indigo-500 to-violet-500 text-white'
+    } ${active ? 'sixstep-pulse' : ''}`}>
+      <Icon className="w-5 h-5" />
+      {role === 'assistant' && active && (
+        <Sparkles className="absolute -right-0.5 -top-0.5 w-3.5 h-3.5 text-yellow-200" />
+      )}
+    </div>
+  );
+};
+
+const InfoStage: React.FC<{ data: InfoStageData; running: boolean }> = ({ data, running }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  return (
+    <InlineCollapsible
+      defaultOpen={false}
+      title={
+        <div className="flex items-center gap-3">
+          <div className={`w-9 h-9 rounded-2xl flex items-center justify-center shrink-0 ${
+            isDark
+              ? `bg-blue-500/15 text-blue-200 ${running ? 'sixstep-pulse' : ''}`
+              : `bg-blue-50 text-blue-500 ${running ? 'sixstep-pulse' : ''}`
+          }`}>
+            <Database className="w-5 h-5" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className={`text-sm font-semibold flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              <span>信息准备</span>
+              {data.complete && (
+                <span className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${
+                  isDark ? 'bg-emerald-500/20 text-emerald-300' : 'bg-emerald-50 text-emerald-600'
+                }`}>已完成</span>
+              )}
+              {running && (
+                <span className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${
+                  isDark ? 'bg-blue-500/20 text-blue-200' : 'bg-blue-50 text-blue-600'
+                }`}>收集中</span>
+              )}
+            </div>
+            <div className={`text-xs mt-0.5 ${
+              running
+                ? isDark ? 'sixstep-shimmer-text' : 'sixstep-shimmer-text-light'
+                : isDark ? 'text-slate-400' : 'text-gray-500'
+            }`}>
+              {running ? '正在收集热搜与上下文信息...' : '已整合信息准备素材'}
+            </div>
+          </div>
+        </div>
+      }
+    >
+      {data.content ? (
+        <div className={`prose prose-sm max-w-none text-sm leading-relaxed ${
+          isDark ? 'prose-invert text-slate-300' : 'text-gray-700'
+        }`}>
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{data.content}</ReactMarkdown>
+        </div>
+      ) : (
+        <div className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+          {running ? '正在获取信息...' : '无内容'}
+        </div>
+      )}
+    </InlineCollapsible>
+  );
+};
+
+const MarkdownMessage: React.FC<{ content: string; isDark: boolean }> = ({ content, isDark }) => (
+  <div className={`rounded-2xl border px-5 py-4 ${
+    isDark
+      ? 'border-slate-700/50 bg-slate-800/30'
+      : 'border-gray-100 bg-white'
+  }`}>
+    <div className={`prose prose-sm max-w-none leading-relaxed ${isDark ? 'prose-invert' : ''}`}>
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+    </div>
+  </div>
+);
+
+const PurposeStage: React.FC<{ data: NonNullable<SixStepMessage['stages']>['purpose']; running: boolean }> = ({ data, running }) => {
+  if (!data) return null;
+  const Icon = STAGE_ICONS.purpose;
+  const cards = data.cards ?? [];
+  return (
+    <InlineCollapsible
+      defaultOpen
+      title={
+        <StageHeader
+          title="目的生成"
+          desc={running ? '正在推演核心目的...' : '已识别核心目的方向'}
+          count={cards.length}
+          loading={running}
+          done={data.complete}
+          icon={Icon}
+          accent="purpose"
+        />
+      }
+    >
+      <div className="space-y-3">
+        <ThinkingBlock text={data.thinking} loading={running && !data.thinking} />
+        <InlineCollapsible
+          variant="subtle"
+          defaultOpen
+          title={
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-medium">目的卡片列表</span>
+              <span className="text-[10px] opacity-70">{cards.length} 张</span>
+            </div>
+          }
+        >
+          {cards.length === 0 ? (
+            <div className="text-xs opacity-60">等待生成目的卡片...</div>
+          ) : (
+            <div className="space-y-2">
+              {cards.map((card) => (
+                <PurposeCardItem key={card.id} card={card} />
+              ))}
+            </div>
+          )}
+        </InlineCollapsible>
+      </div>
+    </InlineCollapsible>
+  );
+};
+
+const ActorStage: React.FC<{
+  data: NonNullable<SixStepMessage['stages']>['actor'];
+  purposes: PurposeCard[];
+  running: boolean;
+}> = ({ data, purposes, running }) => {
+  if (!data) return null;
+  const Icon = STAGE_ICONS.actor;
+  const cards = data.cards ?? [];
+
+  const groups = useMemo(() => {
+    const map = new Map<string, ActorCard[]>();
+    cards.forEach((card) => {
+      const list = map.get(card.purposeId) ?? [];
+      list.push(card);
+      map.set(card.purposeId, list);
+    });
+    return purposes
+      .map((purpose) => ({ purpose, items: map.get(purpose.id) ?? [] }))
+      .filter((g) => g.items.length > 0);
+  }, [cards, purposes]);
+
+  return (
+    <InlineCollapsible
+      defaultOpen
+      title={
+        <StageHeader
+          title="行为体生成"
+          desc={running ? '正在匹配行为体角色...' : '已生成行为体清单'}
+          count={cards.length}
+          loading={running}
+          done={data.complete}
+          icon={Icon}
+          accent="actor"
+        />
+      }
+    >
+      <div className="space-y-3">
+        <ThinkingBlock text={data.thinking} loading={running && !data.thinking} />
+        <InlineCollapsible
+          variant="subtle"
+          defaultOpen
+          title={
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-medium">行为体卡片列表</span>
+              <span className="text-[10px] opacity-70">{cards.length} 张</span>
+            </div>
+          }
+        >
+          {groups.length === 0 ? (
+            <div className="text-xs opacity-60">等待生成行为体卡片...</div>
+          ) : (
+            <div className="space-y-4">
+              {groups.map((group) => (
+                <div key={group.purpose.id} className="space-y-2 sixstep-fade-up">
+                  <ParentGroupHeader label="所属目的" parentTitle={group.purpose.title} count={group.items.length} variant="actor" />
+                  <div className="space-y-2 pl-2 border-l-2 border-dashed border-slate-400/20">
+                    {group.items.map((card) => (
+                      <ActorCardItem key={card.id} card={card} />
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </InlineCollapsible>
+      </div>
+    </InlineCollapsible>
+  );
+};
+
+const BehaviorStage: React.FC<{
+  data: NonNullable<SixStepMessage['stages']>['behavior'];
+  actors: ActorCard[];
+  running: boolean;
+}> = ({ data, actors, running }) => {
+  if (!data) return null;
+  const Icon = STAGE_ICONS.behavior;
+  const cards = data.cards ?? [];
+
+  const groups = useMemo(() => {
+    const map = new Map<string, BehaviorDriverCard[]>();
+    cards.forEach((card) => {
+      const list = map.get(card.actorId) ?? [];
+      list.push(card);
+      map.set(card.actorId, list);
+    });
+    return actors
+      .map((actor) => ({ actor, items: map.get(actor.id) ?? [] }))
+      .filter((g) => g.items.length > 0);
+  }, [cards, actors]);
+
+  return (
+    <InlineCollapsible
+      defaultOpen
+      title={
+        <StageHeader
+          title="预期行为与驱动因素生成"
+          desc={running ? '正在推演行为及驱动因素...' : '已生成预期行为与驱动因素'}
+          count={cards.length}
+          loading={running}
+          done={data.complete}
+          icon={Icon}
+          accent="behavior"
+        />
+      }
+    >
+      <div className="space-y-3">
+        <ThinkingBlock text={data.thinking} loading={running && !data.thinking} />
+        <InlineCollapsible
+          variant="subtle"
+          defaultOpen
+          title={
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-medium">预期行为与驱动因素卡片列表</span>
+              <span className="text-[10px] opacity-70">{cards.length} 张</span>
+            </div>
+          }
+        >
+          {groups.length === 0 ? (
+            <div className="text-xs opacity-60">等待生成预期行为与驱动因素卡片...</div>
+          ) : (
+            <div className="space-y-4">
+              {groups.map((group) => (
+                <div key={group.actor.id} className="space-y-2 sixstep-fade-up">
+                  <ParentGroupHeader label="所属行为体" parentTitle={group.actor.title} count={group.items.length} variant="behavior" />
+                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-2 pl-2 border-l-2 border-dashed border-slate-400/20">
+                    {group.items.map((card) => (
+                      <BehaviorCardItem key={card.id} card={card} />
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </InlineCollapsible>
+      </div>
+    </InlineCollapsible>
+  );
+};
+
+const NarrativeStage: React.FC<{
+  data: NonNullable<SixStepMessage['stages']>['narrative'];
+  behaviors: BehaviorDriverCard[];
+  running: boolean;
+}> = ({ data, behaviors, running }) => {
+  if (!data) return null;
+  const Icon = STAGE_ICONS.narrative;
+  const cards = data.cards ?? [];
+
+  const groups = useMemo(() => {
+    const map = new Map<string, NarrativeCard[]>();
+    cards.forEach((card) => {
+      const list = map.get(card.driverId) ?? [];
+      list.push(card);
+      map.set(card.driverId, list);
+    });
+    return behaviors
+      .map((behavior) => ({ behavior, items: map.get(behavior.id) ?? [] }))
+      .filter((g) => g.items.length > 0);
+  }, [cards, behaviors]);
+
+  return (
+    <InlineCollapsible
+      defaultOpen
+      title={
+        <StageHeader
+          title="叙事生成"
+          desc={running ? '正在构建叙事框架...' : '已生成叙事卡片'}
+          count={cards.length}
+          loading={running}
+          done={data.complete}
+          icon={Icon}
+          accent="narrative"
+        />
+      }
+    >
+      <div className="space-y-3">
+        <ThinkingBlock text={data.thinking} loading={running && !data.thinking} />
+        <InlineCollapsible
+          variant="subtle"
+          defaultOpen
+          title={
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-medium">叙事卡片列表</span>
+              <span className="text-[10px] opacity-70">{cards.length} 张</span>
+            </div>
+          }
+        >
+          {groups.length === 0 ? (
+            <div className="text-xs opacity-60">等待生成叙事卡片...</div>
+          ) : (
+            <div className="space-y-4">
+              {groups.map((group) => (
+                <div key={group.behavior.id} className="space-y-2 sixstep-fade-up">
+                  <ParentGroupHeader
+                    label="所属驱动因素"
+                    parentTitle={group.behavior.driver}
+                    count={group.items.length}
+                    variant="narrative"
+                  />
+                  <div className="space-y-2 pl-2 border-l-2 border-dashed border-slate-400/20">
+                    {group.items.map((card) => (
+                      <NarrativeCardItem key={card.id} card={card} />
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </InlineCollapsible>
+      </div>
+    </InlineCollapsible>
+  );
+};
+
+const FinalAnswer: React.FC<{ text: string; running: boolean }> = ({ text, running }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  if (!text && !running) return null;
+  return (
+    <div className={`rounded-2xl border p-4 ${
+      isDark
+        ? 'border-slate-600/40 bg-slate-700/40 shadow-lg shadow-black/10'
+        : 'border-red-100 bg-white shadow-sm'
+    }`}>
+      <div className="flex items-center gap-2 mb-2">
+        <FileCheck2 className={`w-4 h-4 ${isDark ? 'text-emerald-300' : 'text-emerald-600'}`} />
+        <span className={`text-sm font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>最终结果</span>
+        {running && (
+          <span className={`text-[11px] ${isDark ? 'sixstep-shimmer-text' : 'sixstep-shimmer-text-light'}`}>
+            正在汇总输出
+          </span>
+        )}
+      </div>
+      <pre className={`whitespace-pre-wrap text-sm leading-relaxed font-sans ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+        {text || '准备汇总输出...'}
+      </pre>
+    </div>
+  );
+};
+
+const SelectedSummaryPill: React.FC<{ message: SixStepMessage }> = ({ message }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  if (!message.selectedExpert) return null;
+  const mcps = message.selectedMcps ?? [];
+  const labelMap: Record<string, string> = {
+    purpose: '目的',
+    actor: '行为体',
+    behavior_factor: '预期行为和驱动因素',
+    narrative: '叙事',
+  };
+  return (
+    <div className={`flex flex-wrap items-center gap-2 rounded-2xl border px-3 py-2 ${
+      isDark ? 'border-cyan-400/30 bg-cyan-500/10 text-cyan-100' : 'border-red-200 bg-red-50/70 text-red-700'
+    }`}>
+      <CheckCircle2 className="w-4 h-4" />
+      <span className="text-xs font-semibold">已选专家</span>
+      <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${
+        isDark ? 'bg-slate-900/40 text-cyan-100' : 'bg-white text-red-600 shadow-sm'
+      }`}>
+        {message.selectedExpert.name}
+      </span>
+      {mcps.length > 0 && (
+        <>
+          <span className={`text-[11px] ${isDark ? 'text-slate-300' : 'text-gray-500'}`}>·</span>
+          <span className={`text-[11px] ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+            执行步骤：{mcps.map((k) => labelMap[k] || k).join(' → ')}
+          </span>
+        </>
+      )}
+    </div>
+  );
+};
+
+interface AssistantMessageProps {
+  message: SixStepMessage;
+  active: boolean;
+  expertHandlers?: ExpertMatchHandlers;
+}
+
+const AssistantMessage: React.FC<AssistantMessageProps> = ({ message, active, expertHandlers }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  const isMarkdown = message.outputFormat === 'markdown';
+  const isFollowUp = message.phase === 'follow-up';
+  const stages = message.stages ?? {};
+  const purposes = stages.purpose?.cards ?? [];
+  const actors = stages.actor?.cards ?? [];
+  const behaviors = stages.behavior?.cards ?? [];
+
+  const isInfoRunning = message.mainStepStatus?.info === 'running';
+  const isPurposeRunning = message.subStepStatus?.purpose === 'running';
+  const isActorRunning = message.subStepStatus?.actor === 'running';
+  const isBehaviorRunning = message.subStepStatus?.behavior === 'running';
+  const isNarrativeRunning = message.subStepStatus?.narrative === 'running';
+  const isFinalRunning = message.mainStepStatus?.final === 'running';
+  const generating =
+    isInfoRunning ||
+    message.mainStepStatus?.sixstep === 'running' ||
+    isFinalRunning;
+  // follow-up 在等待第一个 delta 时显示加载态
+  const followUpGenerating = isFollowUp && active && !message.markdownContent;
+
+  const noStageYet = !stages.info && !stages.purpose && !stages.actor && !stages.behavior && !stages.narrative;
+
+  const expertMatch = message.expertMatch;
+  const inExpertPhase = message.phase === 'expert-match' && !!expertMatch;
+  const expertConfirmed = expertMatch?.status === 'confirmed' || !!message.selectedExpert;
+  const expertActive = active && inExpertPhase && !expertConfirmed;
+
+  // Only render info/stages/finalAnswer when we're in an analysis phase.
+  // Expert-match, clarifying, and follow-up phases show their own dedicated UI instead.
+  const showAnalysisContent =
+    !inExpertPhase &&
+    message.phase !== 'clarifying' &&
+    message.phase !== 'follow-up';
+
+  return (
+    <div className="flex gap-3">
+      <Avatar role="assistant" active={generating || expertActive || followUpGenerating} />
+      <div className={`flex-1 min-w-0 max-w-full rounded-2xl px-4 py-3 border ${
+        isDark
+          ? 'bg-slate-800/40 border-slate-700/50'
+          : 'bg-transparent border-transparent shadow-none px-0 py-0'
+      }`}>
+        <div className="space-y-3">
+          {/* Expert match phase: show expert cards before stages */}
+          {inExpertPhase && expertMatch && (
+            <ExpertMatchCards
+              data={expertMatch}
+              locked={expertConfirmed || !active}
+              onSelectExpert={(id) => expertHandlers?.onSelectExpert(message.id, id)}
+              onRefetch={() => expertHandlers?.onRefetchExpert(message.id)}
+              onCreateExpert={() => expertHandlers?.onCreateExpert(message.id)}
+              onConfirm={() => expertHandlers?.onConfirmExpert(message.id)}
+            />
+          )}
+          {inExpertPhase && (message.errors?.length ?? 0) > 0 && (
+            <StreamErrorNotice errors={message.errors!} />
+          )}
+
+          {/* Selected expert / MCP summary once moved to generate phase */}
+          {message.selectedExpert && message.phase !== 'expert-match' && (
+            <SelectedSummaryPill message={message} />
+          )}
+
+          {showAnalysisContent && (
+            <>
+              {/* Info preparing placeholder when no stage data yet */}
+              {isInfoRunning && noStageYet && (
+                <div className={`rounded-2xl border px-4 py-3 ${
+                  isDark ? 'border-slate-700/60 bg-slate-900/40 text-slate-300' : 'border-blue-100 bg-white text-gray-600'
+                }`}>
+                  <div className="flex items-center gap-2 text-xs">
+                    <Database className={`w-4 h-4 ${isDark ? 'text-blue-300' : 'text-blue-500'}`} />
+                    <span className={isDark ? 'sixstep-shimmer-text' : 'sixstep-shimmer-text-light'}>
+                      正在调用信息准备，收集热搜与上下文...
+                    </span>
+                  </div>
+                </div>
+              )}
+
+              {/* Info prepare result (collapsible) */}
+              {stages.info && <InfoStage data={stages.info} running={isInfoRunning} />}
+
+              {(isMarkdown || isFollowUp) ? (
+                /* ---- Markdown / Follow-up mode ---- */
+                <>
+                  {(message.markdownContent || generating || followUpGenerating) && (
+                    message.markdownContent ? (
+                      <MarkdownMessage content={message.markdownContent} isDark={isDark} />
+                    ) : (
+                      <div className={`rounded-2xl border px-4 py-3 ${
+                        isDark ? 'border-slate-700/60 bg-slate-900/40' : 'border-gray-100 bg-white'
+                      }`}>
+                        <div className="flex items-center gap-2 text-xs">
+                          <Sparkles className={`w-4 h-4 ${isDark ? 'text-cyan-300' : 'text-red-500'}`} />
+                          <span className={isDark ? 'sixstep-shimmer-text' : 'sixstep-shimmer-text-light'}>
+                            {isFollowUp ? '正在回答你的问题...' : '正在生成推演内容...'}
+                          </span>
+                        </div>
+                      </div>
+                    )
+                  )}
+                  {(message.errors?.length ?? 0) > 0 && (
+                    <StreamErrorNotice errors={message.errors!} />
+                  )}
+                </>
+              ) : (
+                /* ---- Structured mode ---- */
+                <>
+                  {stages.purpose && <PurposeStage data={stages.purpose} running={isPurposeRunning} />}
+                  {stages.actor && <ActorStage data={stages.actor} purposes={purposes} running={isActorRunning} />}
+                  {stages.behavior && <BehaviorStage data={stages.behavior} actors={actors} running={isBehaviorRunning} />}
+                  {stages.narrative && (
+                    <NarrativeStage data={stages.narrative} behaviors={behaviors} running={isNarrativeRunning} />
+                  )}
+                  {(message.finalAnswer || isFinalRunning) && (
+                    <FinalAnswer text={message.finalAnswer ?? ''} running={isFinalRunning} />
+                  )}
+                  {(message.errors?.length ?? 0) > 0 && (
+                    <StreamErrorNotice errors={message.errors!} />
+                  )}
+                </>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const UserMessage: React.FC<{ message: SixStepMessage }> = ({ message }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  return (
+    <div className="flex gap-3 justify-end">
+      <div className={`max-w-[72%] rounded-2xl px-4 py-3 shadow-sm ${
+        isDark ? 'bg-blue-600/70 text-white' : 'bg-gradient-to-r from-red-500 to-rose-500 text-white'
+      }`}>
+        <p className="whitespace-pre-wrap leading-relaxed text-sm">{message.content}</p>
+      </div>
+      <Avatar role="user" />
+    </div>
+  );
+};
+
+const SixStepConversation: React.FC<SixStepConversationProps> = ({ messages, isGenerating, activeMessageId, expertHandlers }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+  }, [messages, isGenerating]);
+
+  if (messages.length === 0) {
+    return (
+      <div className={`h-full flex flex-col items-center justify-center px-6 text-center ${
+        isDark ? 'text-slate-400' : 'text-gray-500'
+      }`}>
+        <div className={`w-20 h-20 rounded-3xl mb-5 flex items-center justify-center ${
+          isDark ? 'bg-slate-700/40 text-cyan-300' : 'bg-gradient-to-br from-red-50 to-orange-50 text-red-500'
+        }`}>
+          <Sparkles className="w-10 h-10 opacity-80" />
+        </div>
+        <p className={`text-lg font-medium ${isDark ? 'text-white' : 'text-gray-800'}`}>开始 6 步法推演</p>
+        <p className="text-sm mt-2 max-w-md">
+          输入问题或场景描述，模型会按照"信息准备 → 6 步法推演 → 最终结果"的流程逐步生成结构化输出。
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={scrollRef} className="h-full overflow-y-auto px-5 py-5 space-y-5">
+      {messages.map((msg) => (
+        <div key={msg.id}>
+          {msg.role === 'user' ? (
+            <UserMessage message={msg} />
+          ) : (
+            <AssistantMessage
+              message={msg}
+              active={msg.id === activeMessageId}
+              expertHandlers={expertHandlers}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default SixStepConversation;
diff --git a/web-code/components/angentchat/SixStepFlowFullscreen.tsx b/web-code/components/angentchat/SixStepFlowFullscreen.tsx
new file mode 100644
index 00000000..4bd42ee0
--- /dev/null
+++ b/web-code/components/angentchat/SixStepFlowFullscreen.tsx
@@ -0,0 +1,653 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Bot,
+  Compass,
+  Crosshair,
+  Download,
+  Megaphone,
+  Minus,
+  Plus,
+  RotateCcw,
+  ScrollText,
+  Target,
+  TrendingUp,
+  UserCheck,
+  X,
+  Zap,
+} from 'lucide-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import type { ExpertCard, SixStepMessage } from './types';
+import {
+  CURRENT_PAIR_BY_STAGE,
+  EDGE_COLOR,
+  EDGE_LABEL,
+  STATUS_TITLE,
+  VARIANT_LABEL,
+  buildEdgePath,
+  buildLayout,
+  type LayoutEdge,
+  type LayoutNode,
+} from './flowLayout';
+
+interface SixStepFlowFullscreenProps {
+  message?: SixStepMessage;
+  onClose: () => void;
+}
+
+const SCALE_MIN = 0.2;
+const SCALE_MAX = 3;
+
+const buildExpertRootDetail = (expert: ExpertCard): string => {
+  const segments = [expert.title, expert.detail].filter((item): item is string => Boolean(item && item.trim()));
+  return segments.join(' · ') || '已确认专家';
+};
+
+const VARIANT_TOKEN: Record<LayoutNode['variant'], {
+  dark: string; light: string;
+  icon: React.ComponentType<{ className?: string }>;
+  iconCls: { dark: string; light: string };
+}> = {
+  agent:     { dark: 'from-slate-700/80 to-slate-900/80 border-slate-500/60',       light: 'from-white to-slate-50 border-slate-300',        icon: Bot,       iconCls: { dark: 'bg-slate-500/30 text-slate-200',     light: 'bg-slate-100 text-slate-600' } },
+  purpose:   { dark: 'from-violet-700/40 to-violet-900/40 border-violet-400/50',    light: 'from-orange-50 to-white border-orange-300',      icon: Target,    iconCls: { dark: 'bg-violet-500/30 text-violet-200',   light: 'bg-orange-100 text-orange-600' } },
+  actor:     { dark: 'from-cyan-700/40 to-cyan-900/40 border-cyan-400/50',          light: 'from-red-50 to-white border-red-300',            icon: UserCheck, iconCls: { dark: 'bg-cyan-500/30 text-cyan-200',      light: 'bg-red-100 text-red-600' } },
+  behavior:  { dark: 'from-emerald-700/40 to-emerald-900/40 border-emerald-400/50', light: 'from-emerald-50 to-white border-emerald-300',    icon: TrendingUp,iconCls: { dark: 'bg-emerald-500/30 text-emerald-200', light: 'bg-emerald-100 text-emerald-700' } },
+  driver:    { dark: 'from-emerald-800/40 to-teal-900/40 border-teal-400/50',       light: 'from-teal-50 to-white border-teal-300',          icon: Zap,       iconCls: { dark: 'bg-teal-500/30 text-teal-200',      light: 'bg-teal-100 text-teal-700' } },
+  narrative: { dark: 'from-amber-700/40 to-amber-900/40 border-amber-400/50',       light: 'from-amber-50 to-white border-amber-300',        icon: ScrollText,iconCls: { dark: 'bg-amber-500/30 text-amber-200',    light: 'bg-amber-100 text-amber-600' } },
+};
+
+const MINIMAP_VARIANT_FILL: Record<LayoutNode['variant'], { dark: string; light: string }> = {
+  agent: { dark: '#475569', light: '#cbd5e1' },
+  purpose: { dark: '#7c3aed', light: '#fb923c' },
+  actor: { dark: '#06b6d4', light: '#ef4444' },
+  behavior: { dark: '#10b981', light: '#10b981' },
+  driver: { dark: '#0d9488', light: '#0d9488' },
+  narrative: { dark: '#f59e0b', light: '#f59e0b' },
+};
+
+const DetailNode: React.FC<{
+  node: LayoutNode;
+  isDark: boolean;
+  collapsible: boolean;
+  collapsed: boolean;
+  onToggleCollapse?: (nodeId: string) => void;
+  entering: boolean;
+  exiting: boolean;
+}> = ({ node, isDark, collapsible, collapsed, onToggleCollapse, entering, exiting }) => {
+  const token = VARIANT_TOKEN[node.variant];
+  const Icon = token.icon;
+  const grad = isDark ? token.dark : token.light;
+  const canToggle = collapsible && Boolean(onToggleCollapse);
+  const handleClick = (e: React.MouseEvent<SVGGElement>) => {
+    if (!canToggle) return;
+    e.stopPropagation();
+    onToggleCollapse?.(node.id);
+  };
+  const handleMouseDown = (e: React.MouseEvent<SVGGElement>) => {
+    if (canToggle) e.stopPropagation();
+  };
+  return (
+    <g
+      onMouseDown={handleMouseDown}
+      onClick={handleClick}
+      style={{
+        cursor: canToggle ? 'pointer' : undefined,
+        opacity: exiting ? 0 : 1,
+        transform: entering || exiting ? 'translateY(8px)' : 'translateY(0)',
+        transformOrigin: `${node.x + node.width / 2}px ${node.y + node.height / 2}px`,
+        transition: `opacity ${COLLAPSE_TRANSITION_MS}ms ease, transform ${COLLAPSE_TRANSITION_MS}ms ease`,
+      }}
+    >
+      <foreignObject x={node.x} y={node.y} width={node.width} height={node.height}>
+        <div className={`relative w-full h-full rounded-2xl border bg-gradient-to-br ${grad} backdrop-blur-sm p-2.5 shadow-sm overflow-hidden`}>
+          {collapsible && (
+            <div
+              className={`absolute right-2 top-2 w-4 h-4 rounded-full flex items-center justify-center text-[10px] font-bold ${
+                isDark ? 'bg-slate-800/75 text-slate-200' : 'bg-white text-slate-600 border border-slate-200'
+              }`}
+              title={collapsed ? '展开子节点' : '收起子节点'}
+            >
+              {collapsed ? '+' : '-'}
+            </div>
+          )}
+          <div className="flex items-center gap-1.5 mb-1">
+            <div className={`w-5 h-5 rounded-md flex items-center justify-center ${token.iconCls[isDark ? 'dark' : 'light']}`}>
+              <Icon className="w-3 h-3" />
+            </div>
+            <span className={`text-[10px] uppercase tracking-wider font-semibold ${isDark ? 'text-white/70' : 'text-slate-500'}`}>
+              {VARIANT_LABEL[node.variant]}
+            </span>
+          </div>
+          <div className={`text-xs font-semibold leading-tight line-clamp-1 ${isDark ? 'text-white' : 'text-slate-900'}`}>
+            {node.title}
+          </div>
+          <div className={`text-[11px] leading-snug line-clamp-2 mt-0.5 ${isDark ? 'text-slate-300' : 'text-slate-600'}`}>
+            {node.detail || '—'}
+          </div>
+        </div>
+      </foreignObject>
+    </g>
+  );
+};
+
+const ToolbarButton: React.FC<{ title: string; onClick: () => void; isDark: boolean; children: React.ReactNode }> = ({ title, onClick, isDark, children }) => (
+  <button
+    type="button"
+    title={title}
+    onClick={onClick}
+    className={`sixstep-toolbar-btn ${
+      isDark ? 'text-slate-300 hover:bg-slate-700/70 hover:text-white' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+    }`}
+  >
+    {children}
+  </button>
+);
+
+interface MinimapProps {
+  layout: { nodes: LayoutNode[]; width: number; height: number };
+  transform: { tx: number; ty: number; scale: number };
+  viewportSize: { width: number; height: number };
+  onJump: (worldX: number, worldY: number) => void;
+  isDark: boolean;
+}
+
+const MINIMAP_W = 220;
+const MINIMAP_H = 150;
+const COLLAPSE_TRANSITION_MS = 240;
+
+const Minimap: React.FC<MinimapProps> = ({ layout, transform, viewportSize, onJump, isDark }) => {
+  const ratio = layout.width > 0 && layout.height > 0
+    ? Math.min((MINIMAP_W - 10) / layout.width, (MINIMAP_H - 10) / layout.height)
+    : 0.1;
+  const renderW = layout.width * ratio;
+  const renderH = layout.height * ratio;
+  const offsetX = (MINIMAP_W - renderW) / 2;
+  const offsetY = (MINIMAP_H - renderH) / 2;
+
+  // Visible area (in world coords): from world (-tx/scale, -ty/scale) with size viewportW/scale × viewportH/scale
+  const viewW = viewportSize.width / transform.scale;
+  const viewH = viewportSize.height / transform.scale;
+  const viewX = -transform.tx / transform.scale;
+  const viewY = -transform.ty / transform.scale;
+
+  const handleClick = (e: React.MouseEvent<SVGSVGElement>) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const mx = e.clientX - rect.left - offsetX;
+    const my = e.clientY - rect.top - offsetY;
+    const wx = mx / ratio;
+    const wy = my / ratio;
+    onJump(wx, wy);
+  };
+
+  return (
+    <div className={`rounded-xl overflow-hidden border shadow-lg backdrop-blur-md ${
+      isDark ? 'bg-slate-900/80 border-slate-700/70' : 'bg-white/90 border-gray-200'
+    }`}>
+      <div className={`px-3 py-1.5 text-[10px] uppercase tracking-wider border-b font-medium ${
+        isDark ? 'text-slate-400 border-slate-700/50' : 'text-gray-500 border-gray-100'
+      }`}>
+        缩略图
+      </div>
+      <svg
+        width={MINIMAP_W}
+        height={MINIMAP_H}
+        onClick={handleClick}
+        style={{ cursor: 'pointer' }}
+      >
+        <rect width={MINIMAP_W} height={MINIMAP_H} fill={isDark ? '#0f172a' : '#f8fafc'} />
+        <g transform={`translate(${offsetX}, ${offsetY}) scale(${ratio})`}>
+          {layout.nodes.map((n) => (
+            <rect
+              key={n.id}
+              x={n.x}
+              y={n.y}
+              width={n.width}
+              height={n.height}
+              rx={6}
+              fill={MINIMAP_VARIANT_FILL[n.variant][isDark ? 'dark' : 'light']}
+              opacity={0.75}
+            />
+          ))}
+        </g>
+        <rect
+          className="sixstep-minimap-rect"
+          x={offsetX + viewX * ratio}
+          y={offsetY + viewY * ratio}
+          width={Math.max(6, viewW * ratio)}
+          height={Math.max(6, viewH * ratio)}
+          rx={3}
+        />
+      </svg>
+    </div>
+  );
+};
+
+const SixStepFlowFullscreen: React.FC<SixStepFlowFullscreenProps> = ({ message, onClose }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  const purposes = message?.stages?.purpose?.cards ?? [];
+  const actors = message?.stages?.actor?.cards ?? [];
+  const behaviors = message?.stages?.behavior?.cards ?? [];
+  const narratives = message?.stages?.narrative?.cards ?? [];
+  const selectedExpert = message?.selectedExpert;
+
+  const layout = useMemo(
+    () => buildLayout(purposes, actors, behaviors, narratives, {
+      rootTitle: selectedExpert?.name,
+      rootDetail: selectedExpert ? buildExpertRootDetail(selectedExpert) : undefined,
+    }),
+    [purposes, actors, behaviors, narratives, selectedExpert],
+  );
+
+  const currentSub = message?.currentSubStep;
+  const activePair = currentSub ? CURRENT_PAIR_BY_STAGE[currentSub] : null;
+  const statusTitle = currentSub ? STATUS_TITLE[currentSub] : '推演结果可视化';
+  const generating = Boolean(currentSub);
+
+  const [transform, setTransform] = useState({ tx: 0, ty: 0, scale: 1 });
+  const [isPanning, setIsPanning] = useState(false);
+  const [viewportSize, setViewportSize] = useState({ width: 800, height: 600 });
+  const [collapsedNodeIds, setCollapsedNodeIds] = useState<Set<string>>(new Set());
+  const [displayedNodeIds, setDisplayedNodeIds] = useState<Set<string>>(new Set());
+  const [enteringNodeIds, setEnteringNodeIds] = useState<Set<string>>(new Set());
+  const [exitingNodeIds, setExitingNodeIds] = useState<Set<string>>(new Set());
+  const [displayedEdgeIds, setDisplayedEdgeIds] = useState<Set<string>>(new Set());
+  const [exitingEdgeIds, setExitingEdgeIds] = useState<Set<string>>(new Set());
+  const containerRef = useRef<HTMLDivElement>(null);
+  const svgRef = useRef<SVGSVGElement>(null);
+  const panStart = useRef<{ x: number; y: number; tx: number; ty: number } | null>(null);
+  const transitionTimerRef = useRef<number | null>(null);
+
+  const nodeMap = useMemo(() => new Map(layout.nodes.map((node) => [node.id, node])), [layout.nodes]);
+
+  const targetVisibleNodeSet = useMemo(() => {
+    const visible = new Set<string>();
+    layout.nodes.forEach((node) => {
+      let parentId = node.parent;
+      let hidden = false;
+      while (parentId) {
+        if (collapsedNodeIds.has(parentId)) {
+          hidden = true;
+          break;
+        }
+        parentId = nodeMap.get(parentId)?.parent;
+      }
+      if (!hidden) visible.add(node.id);
+    });
+    return visible;
+  }, [collapsedNodeIds, layout.nodes, nodeMap]);
+
+  const targetVisibleEdgeSet = useMemo(() => {
+    const visible = new Set<string>();
+    layout.edges.forEach((edge) => {
+      if (targetVisibleNodeSet.has(edge.fromId) && targetVisibleNodeSet.has(edge.toId)) {
+        visible.add(edge.id);
+      }
+    });
+    return visible;
+  }, [layout.edges, targetVisibleNodeSet]);
+
+  const renderedNodeSet = displayedNodeIds.size > 0 ? displayedNodeIds : targetVisibleNodeSet;
+  const renderedEdgeSet = displayedEdgeIds.size > 0 ? displayedEdgeIds : targetVisibleEdgeSet;
+  const renderedNodes = useMemo(
+    () => layout.nodes.filter((node) => renderedNodeSet.has(node.id)),
+    [layout.nodes, renderedNodeSet],
+  );
+  const renderedEdges = useMemo(
+    () => layout.edges.filter((edge) => renderedEdgeSet.has(edge.id)),
+    [layout.edges, renderedEdgeSet],
+  );
+
+  const toggleNodeCollapse = (nodeId: string) => {
+    const node = nodeMap.get(nodeId);
+    if (!node || node.children.length === 0) return;
+    setCollapsedNodeIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(nodeId)) next.delete(nodeId);
+      else next.add(nodeId);
+      return next;
+    });
+  };
+
+  useEffect(() => {
+    const update = () => {
+      const el = containerRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      setViewportSize({ width: rect.width, height: rect.height });
+    };
+    update();
+    window.addEventListener('resize', update);
+    return () => window.removeEventListener('resize', update);
+  }, []);
+
+  // Native wheel listener with passive:false so preventDefault actually blocks browser zoom
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const onWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      const rect = container.getBoundingClientRect();
+      const mx = e.clientX - rect.left;
+      const my = e.clientY - rect.top;
+      const delta = -e.deltaY * 0.0015;
+      setTransform((prev) => {
+        const nextScale = Math.max(SCALE_MIN, Math.min(SCALE_MAX, prev.scale * (1 + delta)));
+        const ratio = nextScale / prev.scale;
+        return { tx: mx - (mx - prev.tx) * ratio, ty: my - (my - prev.ty) * ratio, scale: nextScale };
+      });
+    };
+    container.addEventListener('wheel', onWheel, { passive: false });
+    return () => container.removeEventListener('wheel', onWheel);
+  }, []);
+
+  const handlePanStart = (e: React.MouseEvent) => {
+    if (e.button !== 0) return;
+    panStart.current = { x: e.clientX, y: e.clientY, tx: transform.tx, ty: transform.ty };
+    setIsPanning(true);
+  };
+
+  useEffect(() => {
+    if (!isPanning) return;
+    const move = (e: MouseEvent) => {
+      const start = panStart.current;
+      if (!start) return;
+      setTransform((prev) => ({ ...prev, tx: start.tx + (e.clientX - start.x), ty: start.ty + (e.clientY - start.y) }));
+    };
+    const up = () => {
+      panStart.current = null;
+      setIsPanning(false);
+    };
+    window.addEventListener('mousemove', move);
+    window.addEventListener('mouseup', up);
+    return () => {
+      window.removeEventListener('mousemove', move);
+      window.removeEventListener('mouseup', up);
+    };
+  }, [isPanning]);
+
+  const fitToView = () => {
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    const scale = Math.min((rect.width - 80) / Math.max(layout.width, 1), (rect.height - 80) / Math.max(layout.height, 1), 1);
+    const tx = (rect.width - layout.width * scale) / 2;
+    const ty = (rect.height - layout.height * scale) / 2;
+    setTransform({ tx, ty, scale });
+  };
+
+  const centerView = () => {
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    setTransform((prev) => ({
+      ...prev,
+      tx: (rect.width - layout.width * prev.scale) / 2,
+      ty: (rect.height - layout.height * prev.scale) / 2,
+    }));
+  };
+
+  const zoomIn = () => setTransform((prev) => ({ ...prev, scale: Math.min(SCALE_MAX, prev.scale * 1.2) }));
+  const zoomOut = () => setTransform((prev) => ({ ...prev, scale: Math.max(SCALE_MIN, prev.scale / 1.2) }));
+  const reset = () => setTransform({ tx: 0, ty: 0, scale: 1 });
+
+  const fitAppliedRef = useRef(false);
+  useEffect(() => {
+    if (!fitAppliedRef.current && viewportSize.width > 0 && layout.nodes.length > 1) {
+      fitToView();
+      fitAppliedRef.current = true;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [viewportSize.width, layout.nodes.length]);
+
+  const handleMinimapJump = (wx: number, wy: number) => {
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    setTransform((prev) => ({
+      ...prev,
+      tx: rect.width / 2 - wx * prev.scale,
+      ty: rect.height / 2 - wy * prev.scale,
+    }));
+  };
+
+  const handleDownload = () => {
+    const svg = svgRef.current;
+    if (!svg) return;
+    const cloned = svg.cloneNode(true) as SVGSVGElement;
+    cloned.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    cloned.setAttribute('width', String(layout.width));
+    cloned.setAttribute('height', String(layout.height));
+    cloned.setAttribute('viewBox', `0 0 ${layout.width} ${layout.height}`);
+    const inner = cloned.querySelector('g');
+    if (inner) inner.setAttribute('transform', '');
+    const serializer = new XMLSerializer();
+    const svgString = serializer.serializeToString(cloned);
+    const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `6步法推演-${new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')}.svg`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  useEffect(() => {
+    const validIds = new Set(layout.nodes.filter((node) => node.children.length > 0).map((node) => node.id));
+    setCollapsedNodeIds((prev) => {
+      let changed = false;
+      const next = new Set<string>();
+      prev.forEach((id) => {
+        if (validIds.has(id)) next.add(id);
+        else changed = true;
+      });
+      return changed ? next : prev;
+    });
+  }, [layout.nodes]);
+
+  useEffect(() => {
+    if (transitionTimerRef.current) {
+      window.clearTimeout(transitionTimerRef.current);
+      transitionTimerRef.current = null;
+    }
+
+    const prevNodes = displayedNodeIds;
+    const nextNodes = targetVisibleNodeSet;
+    const prevEdges = displayedEdgeIds;
+    const nextEdges = targetVisibleEdgeSet;
+
+    const enteringNodes = new Set([...nextNodes].filter((id) => !prevNodes.has(id)));
+    const leavingNodes = new Set([...prevNodes].filter((id) => !nextNodes.has(id)));
+    const leavingEdges = new Set([...prevEdges].filter((id) => !nextEdges.has(id)));
+    const mergedNodes = new Set([...prevNodes, ...nextNodes]);
+    const mergedEdges = new Set([...prevEdges, ...nextEdges]);
+
+    setEnteringNodeIds(enteringNodes);
+    setExitingNodeIds(leavingNodes);
+    setExitingEdgeIds(leavingEdges);
+    setDisplayedNodeIds(mergedNodes);
+    setDisplayedEdgeIds(mergedEdges);
+
+    transitionTimerRef.current = window.setTimeout(() => {
+      setDisplayedNodeIds(new Set(nextNodes));
+      setDisplayedEdgeIds(new Set(nextEdges));
+      setEnteringNodeIds(new Set());
+      setExitingNodeIds(new Set());
+      setExitingEdgeIds(new Set());
+      transitionTimerRef.current = null;
+    }, COLLAPSE_TRANSITION_MS);
+  }, [targetVisibleNodeSet, targetVisibleEdgeSet]);
+
+  useEffect(() => {
+    return () => {
+      if (transitionTimerRef.current) window.clearTimeout(transitionTimerRef.current);
+    };
+  }, []);
+
+  return (
+    <div className={`fixed inset-0 z-50 flex flex-col ${isDark ? 'bg-slate-950/95' : 'bg-white/95'} backdrop-blur-sm`}>
+      <div className={`flex items-center justify-between gap-3 px-5 py-3 border-b ${
+        isDark ? 'border-slate-700/60 bg-slate-900/70' : 'border-red-100 bg-white'
+      }`}>
+        <div className="flex items-center gap-3 min-w-0">
+          <div className={`w-9 h-9 rounded-2xl flex items-center justify-center ${
+            isDark ? 'bg-cyan-500/15 text-cyan-300' : 'bg-red-50 text-red-500'
+          } ${generating ? 'sixstep-pulse' : ''}`}>
+            <Compass className="w-5 h-5" />
+          </div>
+          <div className="min-w-0">
+            <div className={`text-base font-semibold ${
+              generating ? (isDark ? 'sixstep-shimmer-text' : 'sixstep-shimmer-text-light') : (isDark ? 'text-white' : 'text-gray-900')
+            }`}>
+              {statusTitle}
+            </div>
+            <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              全屏视图 · 完整内容展示
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-1">
+          <ToolbarButton title="放大" onClick={zoomIn} isDark={isDark}><Plus className="w-4 h-4" /></ToolbarButton>
+          <ToolbarButton title="缩小" onClick={zoomOut} isDark={isDark}><Minus className="w-4 h-4" /></ToolbarButton>
+          <ToolbarButton title="恢复 1:1" onClick={reset} isDark={isDark}><RotateCcw className="w-4 h-4" /></ToolbarButton>
+          <ToolbarButton title="定位到画布中央" onClick={centerView} isDark={isDark}><Crosshair className="w-4 h-4" /></ToolbarButton>
+          <ToolbarButton title="下载流程图（SVG）" onClick={handleDownload} isDark={isDark}><Download className="w-4 h-4" /></ToolbarButton>
+          <span className={`mx-2 h-5 w-px ${isDark ? 'bg-slate-700' : 'bg-gray-200'}`} />
+          <span className={`text-[11px] tabular-nums ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+            {Math.round(transform.scale * 100)}%
+          </span>
+          <ToolbarButton title="关闭全屏 (Esc)" onClick={onClose} isDark={isDark}>
+            <X className="w-4 h-4" />
+          </ToolbarButton>
+        </div>
+      </div>
+
+      <div className={`flex items-center gap-3 px-5 py-2 border-b text-[11px] flex-wrap ${
+        isDark ? 'border-slate-700/60 text-slate-400 bg-slate-900/40' : 'border-red-100 text-gray-500 bg-white'
+      }`}>
+        {(Object.keys(EDGE_COLOR) as LayoutEdge['pair'][]).map((pair) => {
+          const color = EDGE_COLOR[pair][isDark ? 'dark' : 'light'];
+          const active = activePair === pair;
+          return (
+            <span key={pair} className="inline-flex items-center gap-1.5">
+              <span className={`inline-block w-6 h-0.5 rounded-full ${active ? 'sixstep-ant-line' : ''}`} style={{ background: color, stroke: color }} />
+              <span className={active ? (isDark ? 'text-cyan-200' : 'text-red-600') : ''}>{EDGE_LABEL[pair]}</span>
+            </span>
+          );
+        })}
+      </div>
+
+      <div
+        ref={containerRef}
+        className={`flex-1 overflow-hidden relative ${isPanning ? 'sixstep-canvas-grabbing' : 'sixstep-canvas-grab'}`}
+        onMouseDown={handlePanStart}
+      >
+        {renderedNodes.length <= 1 ? (
+          <div className={`h-full flex flex-col items-center justify-center text-center ${
+            isDark ? 'text-slate-500' : 'text-gray-400'
+          }`}>
+            <Megaphone className="w-12 h-12 opacity-40 mb-3" />
+            <div className={`text-base font-medium ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>等待推演开始</div>
+            <div className="text-sm mt-1">推演产出将以流程图形式呈现</div>
+          </div>
+        ) : (
+          <svg ref={svgRef} width="100%" height="100%" className="block select-none">
+            <defs>
+              {(Object.keys(EDGE_COLOR) as LayoutEdge['pair'][]).map((pair) => {
+                const color = EDGE_COLOR[pair][isDark ? 'dark' : 'light'];
+                return (
+                  <marker
+                    key={pair}
+                    id={`sixstep-fs-arrow-${pair}`}
+                    viewBox="0 0 8 8"
+                    refX="7"
+                    refY="4"
+                    markerWidth="6"
+                    markerHeight="6"
+                    orient="auto-start-reverse"
+                  >
+                    <path d="M 0 0 L 8 4 L 0 8 z" fill={color} />
+                  </marker>
+                );
+              })}
+            </defs>
+
+            <g transform={`translate(${transform.tx}, ${transform.ty}) scale(${transform.scale})`}>
+              {renderedEdges.map((edge) => {
+                const from = nodeMap.get(edge.fromId);
+                const to = nodeMap.get(edge.toId);
+                if (!from || !to) return null;
+                const color = EDGE_COLOR[edge.pair][isDark ? 'dark' : 'light'];
+                const isActive = activePair === edge.pair;
+                const exiting = exitingEdgeIds.has(edge.id);
+                return (
+                  <path
+                    key={edge.id}
+                    d={buildEdgePath(from, to)}
+                    fill="none"
+                    stroke={color}
+                    strokeWidth={isActive ? 2.4 : 1.8}
+                    strokeOpacity={exiting ? 0 : isActive ? 1 : 0.75}
+                    className={isActive ? 'sixstep-ant-line' : ''}
+                    markerEnd={`url(#sixstep-fs-arrow-${edge.pair})`}
+                    style={{
+                      opacity: exiting ? 0 : 1,
+                      transition: `opacity ${COLLAPSE_TRANSITION_MS}ms ease`,
+                    }}
+                  />
+                );
+              })}
+
+              {renderedNodes.map((node) => (
+                <DetailNode
+                  key={node.id}
+                  node={node}
+                  isDark={isDark}
+                  collapsible={node.children.length > 0}
+                  collapsed={collapsedNodeIds.has(node.id)}
+                  onToggleCollapse={toggleNodeCollapse}
+                  entering={enteringNodeIds.has(node.id)}
+                  exiting={exitingNodeIds.has(node.id)}
+                />
+              ))}
+            </g>
+          </svg>
+        )}
+
+        {targetVisibleNodeSet.size > 1 && (
+          <div className="absolute bottom-4 right-4">
+            <Minimap
+              layout={{
+                nodes: layout.nodes.filter((node) => targetVisibleNodeSet.has(node.id)),
+                width: layout.width,
+                height: layout.height,
+              }}
+              transform={transform}
+              viewportSize={viewportSize}
+              onJump={handleMinimapJump}
+              isDark={isDark}
+            />
+          </div>
+        )}
+        <div className={`absolute bottom-4 left-4 px-2 py-1 rounded-md text-[10px] backdrop-blur-md ${
+          isDark ? 'bg-slate-800/70 text-slate-400 border border-slate-700/50' : 'bg-white/90 text-gray-500 border border-gray-200'
+        }`}>
+          点击父节点可收起/展开子节点
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SixStepFlowFullscreen;
diff --git a/web-code/components/angentchat/SixStepFlowSandbox.tsx b/web-code/components/angentchat/SixStepFlowSandbox.tsx
new file mode 100644
index 00000000..840ce391
--- /dev/null
+++ b/web-code/components/angentchat/SixStepFlowSandbox.tsx
@@ -0,0 +1,520 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Bot,
+  Compass,
+  Crosshair,
+  Maximize2,
+  Megaphone,
+  Minus,
+  Plus,
+  RotateCcw,
+  ScrollText,
+  Target,
+  TrendingUp,
+  UserCheck,
+  X,
+  Zap,
+} from 'lucide-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import type { ExpertCard, SixStepMessage } from './types';
+import {
+  CURRENT_PAIR_BY_STAGE,
+  EDGE_COLOR,
+  EDGE_LABEL,
+  STATUS_TITLE,
+  VARIANT_ABBREV,
+  VARIANT_LABEL,
+  buildEdgePath,
+  buildLayout,
+  type LayoutEdge,
+  type LayoutNode,
+} from './flowLayout';
+
+interface SixStepFlowSandboxProps {
+  message?: SixStepMessage;
+  width: number;
+  onResizeStart: (e: React.MouseEvent) => void;
+  onClose: () => void;
+  onOpenFullscreen: () => void;
+}
+
+const COMPACT_OPTIONS = {
+  nodeWidth: 120,
+  nodeHeight: 60,
+  levelGap: 80,
+  nodeGap: 24,
+  paddingX: 32,
+  paddingY: 28,
+};
+
+const VARIANT_GRADIENT: Record<LayoutNode['variant'], { dark: string; light: string }> = {
+  agent: { dark: 'from-slate-700/80 to-slate-900/80 border-slate-500/60', light: 'from-white to-slate-50 border-slate-300' },
+  purpose: { dark: 'from-violet-700/40 to-violet-900/40 border-violet-400/50', light: 'from-orange-50 to-white border-orange-300' },
+  actor: { dark: 'from-cyan-700/40 to-cyan-900/40 border-cyan-400/50', light: 'from-red-50 to-white border-red-300' },
+  behavior: { dark: 'from-emerald-700/40 to-emerald-900/40 border-emerald-400/50', light: 'from-emerald-50 to-white border-emerald-300' },
+  driver: { dark: 'from-emerald-800/40 to-teal-900/40 border-teal-400/50', light: 'from-teal-50 to-white border-teal-300' },
+  narrative: { dark: 'from-amber-700/40 to-amber-900/40 border-amber-400/50', light: 'from-amber-50 to-white border-amber-300' },
+};
+
+const VARIANT_ICON: Record<LayoutNode['variant'], React.ComponentType<{ className?: string }>> = {
+  agent: Bot,
+  purpose: Target,
+  actor: UserCheck,
+  behavior: TrendingUp,
+  driver: Zap,
+  narrative: ScrollText,
+};
+
+// Colored icon wrapper per variant (dark / light)
+const VARIANT_ICON_CLS: Record<LayoutNode['variant'], { dark: string; light: string }> = {
+  agent:     { dark: 'bg-slate-600/60 text-slate-200',      light: 'bg-slate-100 text-slate-600' },
+  purpose:   { dark: 'bg-violet-500/25 text-violet-200',    light: 'bg-orange-100 text-orange-600' },
+  actor:     { dark: 'bg-cyan-500/25 text-cyan-200',        light: 'bg-red-100 text-red-600' },
+  behavior:  { dark: 'bg-emerald-500/25 text-emerald-200',  light: 'bg-emerald-100 text-emerald-700' },
+  driver:    { dark: 'bg-teal-500/25 text-teal-200',        light: 'bg-teal-100 text-teal-700' },
+  narrative: { dark: 'bg-amber-500/25 text-amber-200',      light: 'bg-amber-100 text-amber-600' },
+};
+
+const SCALE_MIN = 0.3;
+const SCALE_MAX = 2.5;
+
+const buildExpertRootDetail = (expert: ExpertCard): string => {
+  const segments = [expert.title, expert.detail].filter((item): item is string => Boolean(item && item.trim()));
+  return segments.join(' · ') || '已确认专家';
+};
+
+const CompactNode: React.FC<{
+  node: LayoutNode;
+  isDark: boolean;
+  appearing: boolean;
+  collapsible: boolean;
+  collapsed: boolean;
+  onToggleCollapse?: (nodeId: string) => void;
+}> = ({ node, isDark, appearing, collapsible, collapsed, onToggleCollapse }) => {
+  const Icon = VARIANT_ICON[node.variant];
+  const grad = VARIANT_GRADIENT[node.variant][isDark ? 'dark' : 'light'];
+  const canToggle = collapsible && Boolean(onToggleCollapse);
+  const handleClick = (e: React.MouseEvent<SVGGElement>) => {
+    if (!canToggle) return;
+    e.stopPropagation();
+    onToggleCollapse(node.id);
+  };
+  const handleMouseDown = (e: React.MouseEvent<SVGGElement>) => {
+    if (canToggle) e.stopPropagation();
+  };
+  return (
+    <g
+      className={appearing ? 'sixstep-node-pop' : ''}
+      onMouseDown={handleMouseDown}
+      onClick={handleClick}
+      style={canToggle ? { cursor: 'pointer' } : undefined}
+    >
+      {appearing && (
+        <circle
+          cx={node.x + node.width / 2}
+          cy={node.y + node.height / 2}
+          r={0}
+          stroke={isDark ? '#22d3ee' : '#ef4444'}
+          className="sixstep-ring-burst"
+        />
+      )}
+      <foreignObject x={node.x} y={node.y} width={node.width} height={node.height}>
+        <div className={`relative w-full h-full rounded-2xl border bg-gradient-to-br ${grad} backdrop-blur-sm flex items-center justify-center gap-1.5 px-2 shadow-sm`}>
+          {collapsible && (
+            <div
+              className={`absolute right-1.5 top-1.5 w-4 h-4 rounded-full flex items-center justify-center text-[10px] font-bold ${
+                isDark ? 'bg-slate-800/75 text-slate-200' : 'bg-white text-slate-600 border border-slate-200'
+              }`}
+              title={collapsed ? '展开子节点' : '收起子节点'}
+            >
+              {collapsed ? '+' : '-'}
+            </div>
+          )}
+          <div className={`w-7 h-7 rounded-lg flex items-center justify-center ${VARIANT_ICON_CLS[node.variant][isDark ? 'dark' : 'light']}`}>
+            <Icon className="w-3.5 h-3.5" />
+          </div>
+          <span className={`text-sm font-bold tracking-wider ${isDark ? 'text-white' : 'text-slate-800'}`}>
+            {VARIANT_ABBREV[node.variant]}
+          </span>
+        </div>
+      </foreignObject>
+    </g>
+  );
+};
+
+const ToolbarButton: React.FC<{ title: string; onClick: () => void; isDark: boolean; children: React.ReactNode }> = ({ title, onClick, isDark, children }) => (
+  <button
+    type="button"
+    title={title}
+    onClick={onClick}
+    className={`sixstep-toolbar-btn ${
+      isDark ? 'text-slate-300 hover:bg-slate-700/70 hover:text-white' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+    }`}
+  >
+    {children}
+  </button>
+);
+
+const SixStepFlowSandbox: React.FC<SixStepFlowSandboxProps> = ({ message, width, onResizeStart, onClose, onOpenFullscreen }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  const purposes = message?.stages?.purpose?.cards ?? [];
+  const actors = message?.stages?.actor?.cards ?? [];
+  const behaviors = message?.stages?.behavior?.cards ?? [];
+  const narratives = message?.stages?.narrative?.cards ?? [];
+  const selectedExpert = message?.selectedExpert;
+
+  const layout = useMemo(
+    () => buildLayout(purposes, actors, behaviors, narratives, {
+      ...COMPACT_OPTIONS,
+      rootTitle: selectedExpert?.name,
+      rootDetail: selectedExpert ? buildExpertRootDetail(selectedExpert) : undefined,
+    }),
+    [purposes, actors, behaviors, narratives, selectedExpert],
+  );
+
+  const currentSub = message?.currentSubStep;
+  const activePair = currentSub ? CURRENT_PAIR_BY_STAGE[currentSub] : null;
+  const statusTitle = currentSub ? STATUS_TITLE[currentSub] : '推演结果可视化';
+  const generating = Boolean(currentSub);
+
+  const [transform, setTransform] = useState({ tx: 0, ty: 0, scale: 1 });
+  const [isPanning, setIsPanning] = useState(false);
+  const [collapsedNodeIds, setCollapsedNodeIds] = useState<Set<string>>(new Set());
+  const containerRef = useRef<HTMLDivElement>(null);
+  const panStart = useRef<{ x: number; y: number; tx: number; ty: number } | null>(null);
+
+  // Track newly appearing nodes for animation
+  const seenIdsRef = useRef<Set<string>>(new Set());
+  const [appearingIds, setAppearingIds] = useState<Set<string>>(new Set());
+
+  const nodeMap = useMemo(() => {
+    return new Map(layout.nodes.map((node) => [node.id, node]));
+  }, [layout.nodes]);
+
+  const visibleNodeSet = useMemo(() => {
+    const visible = new Set<string>();
+    layout.nodes.forEach((node) => {
+      let parentId = node.parent;
+      let hidden = false;
+      while (parentId) {
+        if (collapsedNodeIds.has(parentId)) {
+          hidden = true;
+          break;
+        }
+        parentId = nodeMap.get(parentId)?.parent;
+      }
+      if (!hidden) visible.add(node.id);
+    });
+    return visible;
+  }, [collapsedNodeIds, layout.nodes, nodeMap]);
+
+  const visibleNodes = useMemo(
+    () => layout.nodes.filter((node) => visibleNodeSet.has(node.id)),
+    [layout.nodes, visibleNodeSet],
+  );
+
+  const visibleEdges = useMemo(
+    () => layout.edges.filter((edge) => visibleNodeSet.has(edge.fromId) && visibleNodeSet.has(edge.toId)),
+    [layout.edges, visibleNodeSet],
+  );
+
+  const toggleNodeCollapse = (nodeId: string) => {
+    const targetNode = nodeMap.get(nodeId);
+    if (!targetNode || targetNode.children.length === 0) return;
+    setCollapsedNodeIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(nodeId)) next.delete(nodeId);
+      else next.add(nodeId);
+      return next;
+    });
+  };
+
+  useEffect(() => {
+    const validIds = new Set(
+      layout.nodes.filter((node) => node.children.length > 0).map((node) => node.id),
+    );
+    setCollapsedNodeIds((prev) => {
+      let changed = false;
+      const next = new Set<string>();
+      prev.forEach((id) => {
+        if (validIds.has(id)) next.add(id);
+        else changed = true;
+      });
+      return changed ? next : prev;
+    });
+  }, [layout.nodes]);
+
+  useEffect(() => {
+    const newIds: string[] = [];
+    visibleNodes.forEach((n) => {
+      if (!seenIdsRef.current.has(n.id)) {
+        seenIdsRef.current.add(n.id);
+        newIds.push(n.id);
+      }
+    });
+    if (newIds.length > 0) {
+      setAppearingIds((prev) => {
+        const next = new Set(prev);
+        newIds.forEach((id) => next.add(id));
+        return next;
+      });
+      const timer = window.setTimeout(() => {
+        setAppearingIds((prev) => {
+          const next = new Set(prev);
+          newIds.forEach((id) => next.delete(id));
+          return next;
+        });
+      }, 700);
+      return () => window.clearTimeout(timer);
+    }
+  }, [visibleNodes]);
+
+  // Native wheel listener with passive:false so preventDefault actually blocks browser zoom
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const onWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      const rect = container.getBoundingClientRect();
+      const mx = e.clientX - rect.left;
+      const my = e.clientY - rect.top;
+      const delta = -e.deltaY * 0.0015;
+      setTransform((prev) => {
+        const nextScale = Math.max(SCALE_MIN, Math.min(SCALE_MAX, prev.scale * (1 + delta)));
+        const ratio = nextScale / prev.scale;
+        return { tx: mx - (mx - prev.tx) * ratio, ty: my - (my - prev.ty) * ratio, scale: nextScale };
+      });
+    };
+    container.addEventListener('wheel', onWheel, { passive: false });
+    return () => container.removeEventListener('wheel', onWheel);
+  }, []);
+
+  const handlePanStart = (e: React.MouseEvent) => {
+    if (e.button !== 0) return;
+    panStart.current = { x: e.clientX, y: e.clientY, tx: transform.tx, ty: transform.ty };
+    setIsPanning(true);
+  };
+
+  useEffect(() => {
+    if (!isPanning) return;
+    const move = (e: MouseEvent) => {
+      const start = panStart.current;
+      if (!start) return;
+      setTransform((prev) => ({ ...prev, tx: start.tx + (e.clientX - start.x), ty: start.ty + (e.clientY - start.y) }));
+    };
+    const up = () => {
+      panStart.current = null;
+      setIsPanning(false);
+    };
+    window.addEventListener('mousemove', move);
+    window.addEventListener('mouseup', up);
+    return () => {
+      window.removeEventListener('mousemove', move);
+      window.removeEventListener('mouseup', up);
+    };
+  }, [isPanning]);
+
+  const fitToView = () => {
+    const container = containerRef.current;
+    if (!container || layout.width <= 0 || layout.height <= 0) {
+      setTransform({ tx: 0, ty: 0, scale: 1 });
+      return;
+    }
+    const rect = container.getBoundingClientRect();
+    const scale = Math.min((rect.width - 40) / layout.width, (rect.height - 40) / layout.height, 1);
+    const tx = (rect.width - layout.width * scale) / 2;
+    const ty = (rect.height - layout.height * scale) / 2;
+    setTransform({ tx, ty, scale });
+  };
+
+  const centerView = () => {
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    setTransform((prev) => ({
+      ...prev,
+      tx: (rect.width - layout.width * prev.scale) / 2,
+      ty: (rect.height - layout.height * prev.scale) / 2,
+    }));
+  };
+
+  const zoomIn = () => setTransform((prev) => ({ ...prev, scale: Math.min(SCALE_MAX, prev.scale * 1.2) }));
+  const zoomOut = () => setTransform((prev) => ({ ...prev, scale: Math.max(SCALE_MIN, prev.scale / 1.2) }));
+  const reset = () => setTransform({ tx: 0, ty: 0, scale: 1 });
+
+  // Auto-fit on first render with content
+  const fitAppliedRef = useRef(false);
+  useEffect(() => {
+    if (!fitAppliedRef.current && layout.nodes.length > 1) {
+      fitToView();
+      fitAppliedRef.current = true;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [layout.nodes.length]);
+
+  return (
+    <div
+      className={`relative h-full flex flex-col border-l ${
+        isDark ? 'border-slate-700/60 bg-slate-900/60' : 'border-red-100 bg-white'
+      }`}
+      style={{ width }}
+    >
+      <div className="sixstep-resize-handle" onMouseDown={onResizeStart} />
+
+      <div className={`flex items-center justify-between gap-3 px-4 py-3 border-b ${
+        isDark ? 'border-slate-700/60 bg-slate-900/40' : 'border-red-100 bg-gradient-to-r from-red-50/60 to-orange-50/40'
+      }`}>
+        <div className="flex items-center gap-2 min-w-0">
+          <div className={`w-8 h-8 rounded-2xl flex items-center justify-center ${
+            isDark ? 'bg-cyan-500/15 text-cyan-300' : 'bg-red-50 text-red-500'
+          } ${generating ? 'sixstep-pulse' : ''}`}>
+            <Compass className="w-4 h-4" />
+          </div>
+          <div className="min-w-0">
+            <div className={`text-sm font-semibold truncate ${
+              generating ? (isDark ? 'sixstep-shimmer-text' : 'sixstep-shimmer-text-light') : (isDark ? 'text-white' : 'text-gray-900')
+            }`}>
+              {statusTitle}
+            </div>
+            <div className={`text-[11px] ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              简化视图 · 节点缩写显示
+            </div>
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          className={`p-1.5 rounded-lg transition-colors ${
+            isDark ? 'text-slate-400 hover:text-white hover:bg-slate-700/60' : 'text-gray-500 hover:text-gray-800 hover:bg-gray-100'
+          }`}
+          title="关闭沙箱"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+
+      <div className={`flex items-center gap-1 px-3 py-2 border-b ${
+        isDark ? 'border-slate-700/60 bg-slate-900/30' : 'border-red-100 bg-white'
+      }`}>
+        <ToolbarButton title="放大" onClick={zoomIn} isDark={isDark}><Plus className="w-4 h-4" /></ToolbarButton>
+        <ToolbarButton title="缩小" onClick={zoomOut} isDark={isDark}><Minus className="w-4 h-4" /></ToolbarButton>
+        <ToolbarButton title="恢复 1:1" onClick={reset} isDark={isDark}><RotateCcw className="w-4 h-4" /></ToolbarButton>
+        <ToolbarButton title="定位到画布中央" onClick={centerView} isDark={isDark}><Crosshair className="w-4 h-4" /></ToolbarButton>
+        <span className={`mx-2 h-5 w-px ${isDark ? 'bg-slate-700' : 'bg-gray-200'}`} />
+        <span className={`text-[11px] tabular-nums ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+          {Math.round(transform.scale * 100)}%
+        </span>
+        <div className="flex-1" />
+        <ToolbarButton title="全屏查看完整流程图" onClick={onOpenFullscreen} isDark={isDark}>
+          <Maximize2 className="w-4 h-4" />
+        </ToolbarButton>
+      </div>
+
+      <div className={`flex items-center gap-3 px-3 py-1.5 border-b text-[11px] flex-wrap ${
+        isDark ? 'border-slate-700/60 text-slate-400 bg-slate-900/30' : 'border-red-100 text-gray-500 bg-white'
+      }`}>
+        {(Object.keys(EDGE_COLOR) as LayoutEdge['pair'][]).map((pair) => {
+          const color = EDGE_COLOR[pair][isDark ? 'dark' : 'light'];
+          const active = activePair === pair;
+          return (
+            <span key={pair} className="inline-flex items-center gap-1.5">
+              <span className={`inline-block w-5 h-0.5 rounded-full ${active ? 'sixstep-ant-line' : ''}`} style={{ background: color, stroke: color }} />
+              <span className={active ? (isDark ? 'text-cyan-200' : 'text-red-600') : ''}>{EDGE_LABEL[pair]}</span>
+            </span>
+          );
+        })}
+      </div>
+
+      <div
+        ref={containerRef}
+        className={`flex-1 overflow-hidden relative ${isPanning ? 'sixstep-canvas-grabbing' : 'sixstep-canvas-grab'}`}
+        onMouseDown={handlePanStart}
+      >
+        {visibleNodes.length <= 1 ? (
+          <div className={`h-full flex flex-col items-center justify-center text-center ${
+            isDark ? 'text-slate-500' : 'text-gray-400'
+          }`}>
+            <Megaphone className="w-10 h-10 opacity-40 mb-3" />
+            <div className={`text-sm font-medium ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>等待推演开始</div>
+            <div className="text-xs mt-1">推演产出将以流程图形式呈现</div>
+          </div>
+        ) : (
+          <svg
+            width="100%"
+            height="100%"
+            className="block select-none"
+          >
+            <defs>
+              {(Object.keys(EDGE_COLOR) as LayoutEdge['pair'][]).map((pair) => {
+                const color = EDGE_COLOR[pair][isDark ? 'dark' : 'light'];
+                return (
+                  <marker
+                    key={pair}
+                    id={`sixstep-sandbox-arrow-${pair}`}
+                    viewBox="0 0 8 8"
+                    refX="7"
+                    refY="4"
+                    markerWidth="6"
+                    markerHeight="6"
+                    orient="auto-start-reverse"
+                  >
+                    <path d="M 0 0 L 8 4 L 0 8 z" fill={color} />
+                  </marker>
+                );
+              })}
+            </defs>
+
+            <g transform={`translate(${transform.tx}, ${transform.ty}) scale(${transform.scale})`}>
+              {visibleEdges.map((edge) => {
+                const from = nodeMap.get(edge.fromId);
+                const to = nodeMap.get(edge.toId);
+                if (!from || !to) return null;
+                const color = EDGE_COLOR[edge.pair][isDark ? 'dark' : 'light'];
+                const isActive = activePair === edge.pair;
+                return (
+                  <path
+                    key={edge.id}
+                    d={buildEdgePath(from, to)}
+                    fill="none"
+                    stroke={color}
+                    strokeWidth={isActive ? 2.2 : 1.6}
+                    strokeOpacity={isActive ? 1 : 0.7}
+                    className={isActive ? 'sixstep-ant-line' : ''}
+                    markerEnd={`url(#sixstep-sandbox-arrow-${edge.pair})`}
+                  />
+                );
+              })}
+
+              {visibleNodes.map((node) => (
+                <CompactNode
+                  key={node.id}
+                  node={node}
+                  isDark={isDark}
+                  appearing={appearingIds.has(node.id)}
+                  collapsible={node.children.length > 0}
+                  collapsed={collapsedNodeIds.has(node.id)}
+                  onToggleCollapse={toggleNodeCollapse}
+                />
+              ))}
+            </g>
+          </svg>
+        )}
+
+        <div className={`absolute bottom-3 left-3 px-2 py-1 rounded-md text-[10px] backdrop-blur-md ${
+          isDark ? 'bg-slate-800/70 text-slate-400 border border-slate-700/50' : 'bg-white/90 text-gray-500 border border-gray-200'
+        }`}>
+          {VARIANT_LABEL.purpose}=md · {VARIANT_LABEL.actor}=xwt · {VARIANT_LABEL.behavior}=yqxw · {VARIANT_LABEL.driver}=qdys · {VARIANT_LABEL.narrative}=xs
+        </div>
+        <div className={`absolute bottom-3 right-3 px-2 py-1 rounded-md text-[10px] backdrop-blur-md ${
+          isDark ? 'bg-slate-800/70 text-slate-400 border border-slate-700/50' : 'bg-white/90 text-gray-500 border border-gray-200'
+        }`}>
+          点击父节点可收起/展开子节点
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SixStepFlowSandbox;
diff --git a/web-code/components/angentchat/SixStepProgress.tsx b/web-code/components/angentchat/SixStepProgress.tsx
new file mode 100644
index 00000000..c4bc74e9
--- /dev/null
+++ b/web-code/components/angentchat/SixStepProgress.tsx
@@ -0,0 +1,314 @@
+import React from 'react';
+import {
+  CheckCircle2,
+  ChevronLeft,
+  ChevronRight,
+  Circle,
+  Database,
+  FileCheck2,
+  Loader2,
+  Megaphone,
+  Sparkles,
+  Target,
+  Users,
+  Workflow,
+  Zap,
+} from 'lucide-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import type { MainStepKey, StepStatus, SubStepKey } from './types';
+
+interface SixStepProgressProps {
+  mainStatus: Record<MainStepKey, StepStatus>;
+  subStatus: Record<SubStepKey, StepStatus>;
+  collapsed?: boolean;
+  onToggleCollapse?: () => void;
+}
+
+interface StepItem<T extends string> {
+  key: T;
+  title: string;
+  desc: string;
+  icon: React.ComponentType<{ className?: string }>;
+  color: { dark: string; light: string };
+}
+
+const MAIN_STEPS: StepItem<MainStepKey>[] = [
+  { key: 'info',    title: '信息准备',      desc: '梳理输入素材与上下文',         icon: Database,   color: { dark: 'text-sky-300 bg-sky-500/15 border-sky-400/40',        light: 'text-sky-600 bg-sky-50 border-sky-200' } },
+  { key: 'sixstep', title: '6 步法推演',    desc: '依次完成四个阶段推演',          icon: Workflow,   color: { dark: 'text-violet-300 bg-violet-500/15 border-violet-400/40', light: 'text-violet-600 bg-violet-50 border-violet-200' } },
+  { key: 'final',   title: '最终结果生成',  desc: '汇总各阶段产出，输出结论',     icon: FileCheck2, color: { dark: 'text-emerald-300 bg-emerald-500/15 border-emerald-400/40', light: 'text-emerald-600 bg-emerald-50 border-emerald-200' } },
+];
+
+const SUB_STEPS: StepItem<SubStepKey>[] = [
+  { key: 'purpose',   title: '目的生成',           desc: '识别核心目的方向',   icon: Target,   color: { dark: 'text-violet-300 bg-violet-500/15 border-violet-400/40',  light: 'text-violet-600 bg-orange-50 border-orange-200' } },
+  { key: 'actor',     title: '行为体生成',          desc: '匹配行为体角色',     icon: Users,    color: { dark: 'text-cyan-300 bg-cyan-500/15 border-cyan-400/40',          light: 'text-red-600 bg-red-50 border-red-200' } },
+  { key: 'behavior',  title: '预期行为与驱动因素',  desc: '推演行为与动因',     icon: Zap,      color: { dark: 'text-emerald-300 bg-emerald-500/15 border-emerald-400/40', light: 'text-emerald-600 bg-emerald-50 border-emerald-200' } },
+  { key: 'narrative', title: '叙事生成',            desc: '构建叙事框架',       icon: Megaphone,color: { dark: 'text-amber-300 bg-amber-500/15 border-amber-400/40',       light: 'text-amber-600 bg-amber-50 border-amber-200' } },
+];
+
+function dotColor(status: StepStatus, isDark: boolean) {
+  if (status === 'done')    return isDark ? 'bg-emerald-400' : 'bg-emerald-500';
+  if (status === 'running') return isDark ? 'bg-cyan-400 sixstep-pulse' : 'bg-red-500 sixstep-pulse';
+  return isDark ? 'bg-slate-600' : 'bg-gray-300';
+}
+
+function StatusIcon({ status, isDark }: { status: StepStatus; isDark: boolean }) {
+  if (status === 'done')    return <CheckCircle2 className={`w-4 h-4 ${isDark ? 'text-emerald-300' : 'text-emerald-500'}`} />;
+  if (status === 'running') return <Loader2 className={`w-4 h-4 sixstep-spin-soft ${isDark ? 'text-cyan-300' : 'text-red-500'}`} />;
+  return <Circle className={`w-3.5 h-3.5 ${isDark ? 'text-slate-500' : 'text-gray-300'}`} />;
+}
+
+function cardBorder(status: StepStatus, isDark: boolean) {
+  if (status === 'running') return isDark
+    ? 'border-cyan-400/40 bg-cyan-500/5 shadow-[0_0_0_1px_rgba(34,211,238,0.15)]'
+    : 'border-red-300 bg-red-50/60 shadow-sm';
+  return isDark ? 'border-slate-700/60 bg-slate-800/40' : 'border-gray-200 bg-white';
+}
+
+function connectorColor(status: StepStatus, isDark: boolean) {
+  return status === 'done'
+    ? isDark ? 'bg-emerald-400/40' : 'bg-emerald-300'
+    : isDark ? 'bg-slate-700/60' : 'bg-gray-200';
+}
+
+// ── Collapsed view ────────────────────────────────────────────────────────────
+const CollapsedView: React.FC<{
+  mainStatus: Record<MainStepKey, StepStatus>;
+  subStatus: Record<SubStepKey, StepStatus>;
+  isDark: boolean;
+  onExpand: () => void;
+}> = ({ mainStatus, subStatus, isDark, onExpand }) => {
+  const sixstepUnlocked = mainStatus.sixstep !== 'pending';
+  return (
+    <div className={`h-full flex flex-col items-center py-3 gap-3 border-r ${
+      isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/60'
+    }`}>
+      <button
+        type="button"
+        onClick={onExpand}
+        title="展开进度面板"
+        className={`w-9 h-9 rounded-xl flex items-center justify-center transition-colors ${
+          isDark ? 'text-slate-400 hover:text-white hover:bg-slate-700/60' : 'text-gray-500 hover:text-gray-800 hover:bg-gray-100'
+        }`}
+      >
+        <ChevronRight className="w-4 h-4" />
+      </button>
+
+      <div className="flex flex-col items-center gap-2 flex-1">
+        {MAIN_STEPS.map((step) => {
+          const status = mainStatus[step.key];
+          const Icon = step.icon;
+          const clr = step.color[isDark ? 'dark' : 'light'];
+          return (
+            <div key={step.key} className="relative flex flex-col items-center gap-1" title={step.title}>
+              <div className={`w-9 h-9 rounded-xl border flex items-center justify-center ${clr} ${
+                status === 'running' ? 'sixstep-pulse' : ''
+              }`}>
+                {status === 'running'
+                  ? <Loader2 className="w-4 h-4 sixstep-spin-soft" />
+                  : <Icon className="w-4 h-4" />
+                }
+              </div>
+              <span className={`w-2 h-2 rounded-full ${dotColor(status, isDark)}`} />
+
+              {step.key === 'sixstep' && sixstepUnlocked && (
+                <div className="flex flex-col items-center gap-1 mt-1">
+                  {SUB_STEPS.map((sub) => {
+                    const ss = subStatus[sub.key];
+                    const SubIcon = sub.icon;
+                    const sc = sub.color[isDark ? 'dark' : 'light'];
+                    return (
+                      <div key={sub.key} title={sub.title} className={`w-7 h-7 rounded-lg border flex items-center justify-center ${sc} ${
+                        ss === 'running' ? 'sixstep-pulse' : ''
+                      }`}>
+                        {ss === 'running'
+                          ? <Loader2 className="w-3 h-3 sixstep-spin-soft" />
+                          : <SubIcon className="w-3 h-3" />
+                        }
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+// ── Expanded view ─────────────────────────────────────────────────────────────
+const SixStepProgress: React.FC<SixStepProgressProps> = ({
+  mainStatus,
+  subStatus,
+  collapsed = false,
+  onToggleCollapse,
+}) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const sixstepUnlocked = mainStatus.sixstep !== 'pending';
+  const sixstepRunning  = mainStatus.sixstep === 'running';
+
+  if (collapsed) {
+    return (
+      <CollapsedView
+        mainStatus={mainStatus}
+        subStatus={subStatus}
+        isDark={isDark}
+        onExpand={() => onToggleCollapse?.()}
+      />
+    );
+  }
+
+  return (
+    <div className={`h-full flex flex-col overflow-hidden border-r ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/60'}`}>
+      {/* Header */}
+      <div className={`px-4 py-3 border-b flex items-center gap-2 ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+        <div className={`w-9 h-9 rounded-2xl flex items-center justify-center shrink-0 ${
+          isDark ? 'bg-cyan-500/15 text-cyan-300' : 'bg-red-50 text-red-500'
+        }`}>
+          <Sparkles className="w-5 h-5" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className={`text-sm font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>生成进度</div>
+          <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>实时跟踪推演阶段</div>
+        </div>
+        <button
+          type="button"
+          onClick={onToggleCollapse}
+          title="收起进度面板"
+          className={`w-8 h-8 rounded-xl flex items-center justify-center transition-colors shrink-0 ${
+            isDark ? 'text-slate-400 hover:text-white hover:bg-slate-700/60' : 'text-gray-500 hover:text-gray-800 hover:bg-gray-100'
+          }`}
+        >
+          <ChevronLeft className="w-4 h-4" />
+        </button>
+      </div>
+
+      {/* Steps */}
+      <div className="flex-1 overflow-y-auto px-4 py-4 space-y-3">
+        {MAIN_STEPS.map((step, idx) => {
+          const status = mainStatus[step.key];
+          const Icon = step.icon;
+          const clr = step.color[isDark ? 'dark' : 'light'];
+          const showSubBlock = step.key === 'sixstep' && sixstepUnlocked;
+
+          return (
+            <div key={step.key} className="relative">
+              {idx < MAIN_STEPS.length - 1 && (
+                <div className={`absolute left-[22px] top-12 bottom-[-12px] w-px ${connectorColor(status, isDark)}`} />
+              )}
+              <div className={`relative rounded-2xl border p-3 transition-all ${cardBorder(status, isDark)}`}>
+                <div className="flex items-start gap-3">
+                  <div className={`w-11 h-11 rounded-2xl border flex items-center justify-center shrink-0 transition-colors ${clr} ${
+                    status === 'running' ? 'sixstep-pulse' : ''
+                  }`}>
+                    {status === 'running'
+                      ? <Loader2 className="w-5 h-5 sixstep-spin-soft" />
+                      : <Icon className="w-5 h-5" />
+                    }
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between gap-2">
+                      <div className={`text-sm font-semibold truncate ${
+                        status === 'running'
+                          ? isDark ? 'text-white' : 'text-gray-900'
+                          : status === 'done'
+                            ? isDark ? 'text-slate-100' : 'text-gray-800'
+                            : isDark ? 'text-slate-300' : 'text-gray-600'
+                      }`}>{step.title}</div>
+                      <span className={`px-2 py-0.5 rounded-full text-[10px] flex items-center gap-1 ${
+                        status === 'done'
+                          ? isDark ? 'bg-emerald-500/20 text-emerald-300 border border-emerald-400/30' : 'bg-emerald-50 text-emerald-600 border border-emerald-200'
+                          : status === 'running'
+                            ? isDark ? 'bg-cyan-500/20 text-cyan-200 border border-cyan-400/40' : 'bg-red-50 text-red-600 border border-red-200'
+                            : isDark ? 'bg-slate-700/40 text-slate-400 border border-slate-600/40' : 'bg-gray-100 text-gray-500 border border-gray-200'
+                      }`}>
+                        <StatusIcon status={status} isDark={isDark} />
+                        <span>{status === 'done' ? '已完成' : status === 'running' ? '生成中' : '待开始'}</span>
+                      </span>
+                    </div>
+                    <div className={`text-xs mt-1 ${
+                      status === 'running'
+                        ? isDark ? 'sixstep-shimmer-text' : 'sixstep-shimmer-text-light'
+                        : isDark ? 'text-slate-400' : 'text-gray-500'
+                    }`}>{step.desc}</div>
+                  </div>
+                </div>
+
+                {/* 6步法子阶段 */}
+                {showSubBlock && (
+                  <div className="mt-3 pl-1">
+                    <div className={`text-[10px] font-medium tracking-wider uppercase mb-2 ${
+                      isDark ? 'text-slate-500' : 'text-gray-400'
+                    }`}>
+                      6 步法 · 子阶段
+                    </div>
+                    <div className="space-y-2">
+                      {SUB_STEPS.map((sub, subIdx) => {
+                        const ss = subStatus[sub.key];
+                        const SubIcon = sub.icon;
+                        const sc = sub.color[isDark ? 'dark' : 'light'];
+                        return (
+                          <div key={sub.key} className="relative pl-4 sixstep-fade-up">
+                            {subIdx < SUB_STEPS.length - 1 && (
+                              <div className={`absolute left-[7px] top-7 bottom-[-8px] w-px ${connectorColor(ss, isDark)}`} />
+                            )}
+                            <div className={`absolute left-0 top-3 w-3.5 h-3.5 rounded-full border-2 flex items-center justify-center ${
+                              ss === 'running'
+                                ? isDark ? 'bg-cyan-500/30 border-cyan-300' : 'bg-red-100 border-red-400'
+                                : ss === 'done'
+                                  ? isDark ? 'bg-emerald-500/30 border-emerald-300' : 'bg-emerald-100 border-emerald-400'
+                                  : isDark ? 'bg-slate-900 border-slate-600' : 'bg-white border-gray-300'
+                            }`} />
+                            <div className={`flex items-start gap-2 rounded-xl border p-2 ${
+                              ss === 'running'
+                                ? isDark ? 'border-cyan-400/40 bg-cyan-500/5' : 'border-red-300 bg-red-50/70'
+                                : isDark ? 'border-slate-700/50 bg-slate-800/40' : 'border-gray-200 bg-white'
+                            }`}>
+                              <div className={`w-7 h-7 rounded-lg border flex items-center justify-center shrink-0 ${sc} ${
+                                ss === 'running' ? 'sixstep-pulse' : ''
+                              }`}>
+                                {ss === 'running'
+                                  ? <Loader2 className="w-3.5 h-3.5 sixstep-spin-soft" />
+                                  : <SubIcon className="w-3.5 h-3.5" />
+                                }
+                              </div>
+                              <div className="flex-1 min-w-0">
+                                <div className="flex items-center justify-between gap-2">
+                                  <div className={`text-xs font-semibold truncate ${
+                                    ss === 'done' ? isDark ? 'text-slate-100' : 'text-gray-800'
+                                    : ss === 'running' ? isDark ? 'text-white' : 'text-gray-900'
+                                    : isDark ? 'text-slate-300' : 'text-gray-600'
+                                  }`}>{sub.title}</div>
+                                  <StatusIcon status={ss} isDark={isDark} />
+                                </div>
+                                <div className={`text-[11px] mt-0.5 ${
+                                  ss === 'running'
+                                    ? isDark ? 'sixstep-shimmer-text' : 'sixstep-shimmer-text-light'
+                                    : isDark ? 'text-slate-500' : 'text-gray-400'
+                                }`}>{sub.desc}</div>
+                              </div>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                    {sixstepRunning && (
+                      <div className={`mt-2 text-[11px] flex items-center gap-1.5 ${isDark ? 'text-cyan-300' : 'text-red-500'}`}>
+                        <Loader2 className="w-3 h-3 sixstep-spin-soft" />
+                        <span className={isDark ? 'sixstep-shimmer-text' : 'sixstep-shimmer-text-light'}>推演正在进行...</span>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default SixStepProgress;
diff --git a/web-code/components/angentchat/SixStepProgressHorizontal.tsx b/web-code/components/angentchat/SixStepProgressHorizontal.tsx
new file mode 100644
index 00000000..9fee1d24
--- /dev/null
+++ b/web-code/components/angentchat/SixStepProgressHorizontal.tsx
@@ -0,0 +1,196 @@
+import React from 'react';
+import {
+  CheckCircle2,
+  Database,
+  FileCheck2,
+  Loader2,
+  Megaphone,
+  Target,
+  Users,
+  Workflow,
+  Zap,
+} from 'lucide-react';
+import type { MainStepKey, StepStatus, SubStepKey } from './types';
+
+interface Props {
+  mainStatus: Record<MainStepKey, StepStatus>;
+  subStatus: Record<SubStepKey, StepStatus>;
+  isDark: boolean;
+}
+
+interface StepDef<T extends string> {
+  key: T;
+  title: string;
+  desc: string;
+  icon: React.ComponentType<{ className?: string }>;
+  color: { dark: string; light: string };
+}
+
+const MAIN_STEPS: StepDef<MainStepKey>[] = [
+  { key: 'info',    title: '信息准备',     desc: '梳理输入素材与上下文',     icon: Database,   color: { dark: 'text-sky-300 bg-sky-500/15 border-sky-400/40',          light: 'text-sky-600 bg-sky-50 border-sky-200' } },
+  { key: 'sixstep', title: '6 步法推演',    desc: '依次完成四个阶段推演',      icon: Workflow,   color: { dark: 'text-violet-300 bg-violet-500/15 border-violet-400/40', light: 'text-violet-600 bg-violet-50 border-violet-200' } },
+  { key: 'final',   title: '最终结果生成', desc: '汇总各阶段产出，输出结论',   icon: FileCheck2, color: { dark: 'text-emerald-300 bg-emerald-500/15 border-emerald-400/40', light: 'text-emerald-600 bg-emerald-50 border-emerald-200' } },
+];
+
+const SUB_STEPS: StepDef<SubStepKey>[] = [
+  { key: 'purpose',   title: '目的生成',          desc: '识别核心目的方向', icon: Target,    color: { dark: 'text-violet-300 bg-violet-500/15 border-violet-400/40',   light: 'text-violet-600 bg-orange-50 border-orange-200' } },
+  { key: 'actor',     title: '行为体生成',         desc: '匹配行为体角色',   icon: Users,     color: { dark: 'text-cyan-300 bg-cyan-500/15 border-cyan-400/40',           light: 'text-red-600 bg-red-50 border-red-200' } },
+  { key: 'behavior',  title: '预期行为与驱动因素', desc: '推演行为与动因',   icon: Zap,       color: { dark: 'text-emerald-300 bg-emerald-500/15 border-emerald-400/40',  light: 'text-emerald-600 bg-emerald-50 border-emerald-200' } },
+  { key: 'narrative', title: '叙事生成',           desc: '构建叙事框架',     icon: Megaphone, color: { dark: 'text-amber-300 bg-amber-500/15 border-amber-400/40',        light: 'text-amber-600 bg-amber-50 border-amber-200' } },
+];
+
+function statusLabel(s: StepStatus) {
+  return s === 'done' ? '已完成' : s === 'running' ? '生成中' : '待开始';
+}
+
+function nodeStateClass(status: StepStatus, isDark: boolean) {
+  if (status === 'running') {
+    return `${isDark ? 'ring-2 ring-cyan-400/30' : 'ring-2 ring-red-200'} sixstep-pulse`;
+  }
+  if (status === 'done') {
+    return isDark ? 'ring-1 ring-emerald-400/40' : 'ring-1 ring-emerald-300';
+  }
+  return isDark ? 'opacity-55 saturate-50' : 'opacity-70 saturate-50';
+}
+
+function connectorClass(status: StepStatus, isDark: boolean) {
+  if (status === 'done') return isDark ? 'bg-emerald-400/60' : 'bg-emerald-400';
+  if (status === 'running') return isDark ? 'bg-cyan-400/50' : 'bg-red-300';
+  return isDark ? 'bg-slate-700/60' : 'bg-gray-200';
+}
+
+interface NodeProps {
+  status: StepStatus;
+  Icon: React.ComponentType<{ className?: string }>;
+  color: string;
+  size?: 'md' | 'sm';
+  title: string;
+  desc: string;
+  isDark: boolean;
+}
+
+const StepNode: React.FC<NodeProps> = ({ status, Icon, color, size = 'md', title, desc, isDark }) => {
+  const wrapSize = size === 'md' ? 'w-9 h-9' : 'w-7 h-7';
+  const iconSize = size === 'md' ? 'w-4 h-4' : 'w-3.5 h-3.5';
+  const badgeSize = size === 'md' ? 'w-4 h-4' : 'w-3.5 h-3.5';
+  const badgeIcon = size === 'md' ? 'w-3 h-3' : 'w-2.5 h-2.5';
+
+  return (
+    <div className="relative group shrink-0">
+      <div
+        className={`${wrapSize} rounded-xl border flex items-center justify-center transition-all ${color} ${nodeStateClass(status, isDark)}`}
+      >
+        {status === 'running'
+          ? <Loader2 className={`${iconSize} sixstep-spin-soft`} />
+          : <Icon className={iconSize} />
+        }
+      </div>
+
+      {status === 'done' && (
+        <div
+          className={`absolute -bottom-0.5 -right-0.5 ${badgeSize} rounded-full flex items-center justify-center shadow-sm ${
+            isDark ? 'bg-emerald-500 text-slate-900' : 'bg-emerald-500 text-white'
+          }`}
+        >
+          <CheckCircle2 className={badgeIcon} />
+        </div>
+      )}
+
+      <div
+        className={`absolute left-1/2 -translate-x-1/2 top-full mt-2 px-2.5 py-1.5 rounded-lg whitespace-nowrap pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity z-50 shadow-lg border ${
+          isDark
+            ? 'bg-slate-900 text-slate-100 border-slate-700'
+            : 'bg-white text-gray-800 border-gray-200'
+        }`}
+      >
+        <div className="text-xs font-semibold">{title}</div>
+        <div
+          className={`text-[11px] ${
+            status === 'running'
+              ? isDark ? 'sixstep-shimmer-text' : 'sixstep-shimmer-text-light'
+              : isDark ? 'text-slate-400' : 'text-gray-500'
+          }`}
+        >
+          {desc}
+        </div>
+        <div
+          className={`text-[10px] mt-0.5 flex items-center gap-1 ${
+            status === 'done'
+              ? isDark ? 'text-emerald-300' : 'text-emerald-600'
+              : status === 'running'
+                ? isDark ? 'text-cyan-300' : 'text-red-500'
+                : isDark ? 'text-slate-500' : 'text-gray-400'
+          }`}
+        >
+          {status === 'running' && <Loader2 className="w-2.5 h-2.5 sixstep-spin-soft" />}
+          <span>{statusLabel(status)}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const SixStepProgressHorizontal: React.FC<Props> = ({ mainStatus, subStatus, isDark }) => {
+  const sixstepUnlocked = mainStatus.sixstep !== 'pending';
+
+  return (
+    <div className="flex items-center gap-2 flex-nowrap py-1">
+      {MAIN_STEPS.map((step, idx) => {
+        const status = mainStatus[step.key];
+        const clr = step.color[isDark ? 'dark' : 'light'];
+        const isSixStep = step.key === 'sixstep';
+        const prevStatus = idx > 0 ? mainStatus[MAIN_STEPS[idx - 1].key] : 'pending';
+
+        return (
+          <React.Fragment key={step.key}>
+            {idx > 0 && (
+              <div className={`h-[2px] w-5 rounded shrink-0 transition-colors ${connectorClass(prevStatus, isDark)}`} />
+            )}
+            <StepNode
+              status={status}
+              Icon={step.icon}
+              color={clr}
+              title={step.title}
+              desc={step.desc}
+              isDark={isDark}
+            />
+            {isSixStep && sixstepUnlocked && (
+              <>
+                <div className={`h-[2px] w-3 rounded shrink-0 transition-colors ${connectorClass(status, isDark)}`} />
+                <div
+                  className={`flex items-center gap-1.5 px-2 py-1 rounded-xl border shrink-0 ${
+                    isDark ? 'bg-slate-900/40 border-slate-700/60' : 'bg-gray-50 border-gray-200'
+                  }`}
+                >
+                  {SUB_STEPS.map((sub, sidx) => {
+                    const ss = subStatus[sub.key];
+                    const sc = sub.color[isDark ? 'dark' : 'light'];
+                    const prevSub = sidx > 0 ? subStatus[SUB_STEPS[sidx - 1].key] : 'pending';
+                    return (
+                      <React.Fragment key={sub.key}>
+                        {sidx > 0 && (
+                          <div className={`h-[2px] w-2 rounded shrink-0 transition-colors ${connectorClass(prevSub, isDark)}`} />
+                        )}
+                        <StepNode
+                          status={ss}
+                          Icon={sub.icon}
+                          color={sc}
+                          size="sm"
+                          title={sub.title}
+                          desc={sub.desc}
+                          isDark={isDark}
+                        />
+                      </React.Fragment>
+                    );
+                  })}
+                </div>
+              </>
+            )}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};
+
+export default SixStepProgressHorizontal;
diff --git a/web-code/components/angentchat/StreamErrorNotice.tsx b/web-code/components/angentchat/StreamErrorNotice.tsx
new file mode 100644
index 00000000..85b240b6
--- /dev/null
+++ b/web-code/components/angentchat/StreamErrorNotice.tsx
@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { AlertTriangle, ChevronDown, ChevronUp, XCircle } from 'lucide-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import type { StreamErrorItem } from './types';
+
+interface StreamErrorNoticeProps {
+  errors: StreamErrorItem[];
+}
+
+const StreamErrorNotice: React.FC<StreamErrorNoticeProps> = ({ errors }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const [expanded, setExpanded] = useState(false);
+
+  if (!errors || errors.length === 0) return null;
+
+  const hasErrors = errors.some((e) => e.level === 'error');
+  const errorCount = errors.filter((e) => e.level === 'error').length;
+  const warnCount = errors.filter((e) => e.level === 'warning').length;
+
+  let summaryText: string;
+  if (hasErrors && warnCount > 0) {
+    summaryText = `${errorCount} 个步骤失败，${warnCount} 个能力调用降级`;
+  } else if (hasErrors) {
+    summaryText = `${errorCount} 个步骤执行失败`;
+  } else {
+    summaryText = `${warnCount} 个能力调用失败，系统已继续执行`;
+  }
+
+  const borderClass = hasErrors
+    ? isDark ? 'border-red-500/40 bg-red-500/10 text-red-200' : 'border-red-200 bg-red-50 text-red-700'
+    : isDark ? 'border-amber-500/40 bg-amber-500/10 text-amber-200' : 'border-amber-200 bg-amber-50 text-amber-700';
+
+  const dividerClass = hasErrors
+    ? isDark ? 'border-red-500/20' : 'border-red-200'
+    : isDark ? 'border-amber-500/20' : 'border-amber-200';
+
+  return (
+    <div className={`rounded-xl border text-xs ${borderClass}`}>
+      <button
+        className="w-full flex items-center gap-2 px-3 py-2 text-left"
+        onClick={() => setExpanded((v) => !v)}
+      >
+        {hasErrors
+          ? <XCircle className="w-3.5 h-3.5 shrink-0" />
+          : <AlertTriangle className="w-3.5 h-3.5 shrink-0" />}
+        <span className="flex-1 font-medium">{summaryText}</span>
+        {expanded
+          ? <ChevronUp className="w-3.5 h-3.5 shrink-0 opacity-50" />
+          : <ChevronDown className="w-3.5 h-3.5 shrink-0 opacity-50" />}
+      </button>
+
+      {expanded && (
+        <div className={`border-t px-3 py-2 space-y-2.5 ${dividerClass}`}>
+          {errors.map((err) => (
+            <div key={err.errorId}>
+              <div className="flex items-start gap-1.5">
+                {err.level === 'error'
+                  ? <XCircle className="w-3 h-3 mt-0.5 shrink-0" />
+                  : <AlertTriangle className="w-3 h-3 mt-0.5 shrink-0" />}
+                <span className="leading-snug">{err.message}</span>
+              </div>
+              <div className={`mt-0.5 pl-[18px] font-mono text-[10px] opacity-40`}>
+                错误 ID：{err.errorId}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StreamErrorNotice;
diff --git a/web-code/components/angentchat/api.ts b/web-code/components/angentchat/api.ts
new file mode 100644
index 00000000..9895fd56
--- /dev/null
+++ b/web-code/components/angentchat/api.ts
@@ -0,0 +1,1353 @@
+/**
+ * 智能体聊天（六步法 / 意图编排 / 专家匹配）的前端 API 封装模块。
+ *
+ * 主要职责：
+ * - 解析后端 SSE（`event:` / `data:` 行协议），将 POST 流式响应转为异步可迭代的 `{ event, data }`。
+ * - 把后端 `structured_outputs`、图节点等数据映射为前端卡片类型（与 `./types` 对齐）。
+ * - 暴露 `runSixStepDeduction`（直连编排流）、`runIntentOrchestrateStream`（意图识别 + 多分支），
+ *   以及 `runExpertSearch` / `runExpertCreate`（单 MCP 同步调用）。
+ * - 使用分块写入模拟「打字机」效果，使真实接口下的 UI 节奏与 `mockData` 接近。
+ */
+import type {
+  ActorCard,
+  BackendStepResult,
+  BehaviorDriverCard,
+  ExpertCard,
+  ExpertMatchData,
+  MainStepKey,
+  NarrativeCard,
+  PurposeCard,
+  SelectableMcpKey,
+  SixStepMessage,
+  StreamErrorItem,
+  SubStepKey,
+} from './types';
+import type { SixStepMockController } from './mockData';
+
+// ------------------------------------------------------------------ //
+//  SSE：POST + ReadableStream → 异步生成器，逐条产出解析后的事件       //
+// ------------------------------------------------------------------ //
+
+/** 单条 SSE 解析结果：`event` 为事件名，`data` 为已 JSON 解析的负载对象。 */
+interface SSEEvent {
+  event: string;
+  data: Record<string, unknown>;
+}
+
+/**
+ * 以 POST 发起请求，按 SSE 规范读取响应体并 yield 事件。
+ * - 缓冲不完整的行，按 `\n` 切分；`event:` 与紧随其后的 `data:` 配对。
+ * - `data` 行需为合法 JSON；解析失败则静默跳过该行。
+ * @throws 非 2xx 或响应无 body 时抛出带 HTTP 状态信息的 Error
+ */
+async function* readSSE(url: string, body: object, signal: AbortSignal): AsyncGenerator<SSEEvent> {
+  const resp = await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+    signal,
+  });
+  if (!resp.ok || !resp.body) throw new Error(`HTTP ${resp.status} ${resp.statusText}`);
+
+  const reader = resp.body.getReader();
+  const decoder = new TextDecoder();
+  let buf = '';
+  let eventName = '';
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buf += decoder.decode(value, { stream: true });
+    const lines = buf.split('\n');
+    buf = lines.pop() ?? '';
+    for (const line of lines) {
+      if (line.startsWith('event: ')) {
+        eventName = line.slice(7).trim();
+      } else if (line.startsWith('data: ')) {
+        try {
+          const data = JSON.parse(line.slice(6)) as Record<string, unknown>;
+          yield { event: eventName, data };
+        } catch {
+          // 非 JSON 的 data 行忽略，避免半包或心跳污染中断整条流
+        }
+        eventName = '';
+      }
+    }
+  }
+}
+
+// ------------------------------------------------------------------ //
+//  类型映射：后端列表项 → 前端卡片（字段名与 parent_* 与后端约定一致）   //
+// ------------------------------------------------------------------ //
+
+/** 将后端「目的」结构化项转为 `PurposeCard[]`，缺失 id 时用占位 id。 */
+function toPurposeCards(items: Record<string, unknown>[]): PurposeCard[] {
+  return items.map((it, idx) => ({
+    id: (it.id as string) || `purpose-${idx + 1}`,
+    index: idx + 1,
+    title: (it.title as string) || '',
+    reason: (it.reason as string) || '',
+  }));
+}
+
+/** 行为体卡片：`parent_purpose_id` 回退到第一个目的或空串，保证 UI 可挂载。 */
+function toActorCards(items: Record<string, unknown>[], purposes: PurposeCard[]): ActorCard[] {
+  return items.map((it, idx) => ({
+    id: (it.id as string) || `actor-${idx + 1}`,
+    index: idx + 1,
+    purposeId: (it.parent_purpose_id as string) || purposes[0]?.id || '',
+    title: (it.title as string) || '',
+    content: (it.content as string) || '',
+  }));
+}
+
+/** 预期行为与驱动因素：`parent_actor_id` 关联行为体；字段名与后端 snake_case 对应。 */
+function toBehaviorCards(items: Record<string, unknown>[], actors: ActorCard[]): BehaviorDriverCard[] {
+  return items.map((it, idx) => ({
+    id: (it.id as string) || `behavior-${idx + 1}`,
+    index: idx + 1,
+    actorId: (it.parent_actor_id as string) || actors[0]?.id || '',
+    expectedBehavior: (it.expected_behavior as string) || '',
+    driver: (it.driving_factor as string) || '',
+  }));
+}
+
+/** 叙事卡片：`parent_factor_id` 关联上一步的驱动因素节点。 */
+function toNarrativeCards(items: Record<string, unknown>[], behaviors: BehaviorDriverCard[]): NarrativeCard[] {
+  return items.map((it, idx) => ({
+    id: (it.id as string) || `narrative-${idx + 1}`,
+    index: idx + 1,
+    driverId: (it.parent_factor_id as string) || behaviors[0]?.id || '',
+    title: (it.title as string) || '',
+    reason: (it.reason as string) || '',
+  }));
+}
+
+// ------------------------------------------------------------------ //
+//  打字机模拟：按固定步长追加字符，与 mock 侧流式体验一致               //
+// ------------------------------------------------------------------ //
+
+/**
+ * 将完整文本按小块定时写入 `write`，直到写完或 `isCancelled()` 为 true。
+ * 用于结构化模式下展示 thinking 与最终汇总，避免界面瞬间跳变。
+ */
+function typeText(
+  text: string,
+  write: (chunk: string) => void,
+  isCancelled: () => boolean,
+): Promise<void> {
+  return new Promise((resolve) => {
+    const step = 5;
+    let pos = 0;
+    const tick = () => {
+      if (isCancelled()) { resolve(); return; }
+      pos = Math.min(pos + step, text.length);
+      write(text.slice(0, pos));
+      if (pos < text.length) {
+        setTimeout(tick, 20);
+      } else {
+        resolve();
+      }
+    };
+    tick();
+  });
+}
+
+// ------------------------------------------------------------------ //
+//  结构化模式：根据已收集各阶段卡片拼出一份 Markdown 风格的最终摘要   //
+// ------------------------------------------------------------------ //
+
+/** 从 `message.stages` 抽取各阶段标题/行为描述，生成给用户看的综合结论文案。 */
+function buildFinalFromStages(msg: SixStepMessage): string {
+  const purposes = (msg.stages?.purpose?.cards ?? []).map((c) => c.title).join('、');
+  const actors = (msg.stages?.actor?.cards ?? []).map((c) => c.title).join('、');
+  const behaviors = (msg.stages?.behavior?.cards ?? []).map((c) => c.expectedBehavior).join('、');
+  const narratives = (msg.stages?.narrative?.cards ?? []).map((c) => c.title).join('、');
+  return [
+    '综合本次 6 步法推演结果，可以得到如下战略要点：\n',
+    purposes ? `1. **目的**：${purposes}。` : '',
+    actors ? `2. **行为体**：${actors}。` : '',
+    behaviors ? `3. **预期行为与驱动因素**：${behaviors}。` : '',
+    narratives ? `4. **叙事**：${narratives}。` : '',
+    '\n后续可基于该推演继续生成传播节奏、渠道分工与内容资产清单。',
+  ]
+    .filter(Boolean)
+    .join('\n');
+}
+
+// ------------------------------------------------------------------ //
+//  后端步骤 key → 前端子步骤 `SubStepKey`（编排事件里 key 与 UI 对齐）   //
+// ------------------------------------------------------------------ //
+
+/** 编排层 `behavior_factor` 在前端统一为 `behavior`。 */
+const KEY_MAP: Record<string, SubStepKey> = {
+  purpose: 'purpose',
+  actor: 'actor',
+  behavior_factor: 'behavior',
+  narrative: 'narrative',
+};
+
+// ------------------------------------------------------------------ //
+//  主入口：与 mockData.runSixStepDeduction 相同的控制器形态（message/stop/promise） //
+// ------------------------------------------------------------------ //
+
+/** `runSixStepDeduction` / `runIntentOrchestrateStream` 共用的回调选项。 */
+export interface RunOptions {
+  /** 任意阶段状态或内容变化时调用；实现方应视为不可变快照触发重渲染。 */
+  onUpdate: (message: SixStepMessage) => void;
+  /** 整条流正常结束、被取消后的收尾、或出错并写入 message 后调用（具体见各分支）。 */
+  onComplete?: () => void;
+}
+
+/**
+ * 执行六步法编排（直连 `/api/orchestrate/stream`，无意图分支）。
+ * - 根据 `requestBody.output_format` 区分结构化卡片流与 Markdown 整段流。
+ * - 根据 `selected_mcps` 过滤 `mcp_list` 中实际执行的子步骤顺序。
+ * - 监听 `start` / `step_start` / `delta` / `step_end` / `flow` / `done`，同步 `message` 并 `emit`。
+ * @returns 与 mock 一致：`stop()` 中止 fetch；`promise` 在流结束后 settle。
+ */
+
+const backUrl = 'https://ch1.b.uat.4.cn/zncmback';
+export function runSixStepDeduction(
+  message: SixStepMessage,
+  options: RunOptions,
+  requestBody?: Record<string, unknown>,
+): SixStepMockController {
+  // 就地更新传入的 `message`；emit 时对 `stages` 做浅拷贝，便于依赖该引用的 UI 刷新。
+  const abortCtrl = new AbortController();
+  let cancelled = false;
+
+  const outputFormat = (requestBody?.output_format as string) || 'structured';
+  const isMarkdown = outputFormat === 'markdown';
+
+  message.outputFormat = outputFormat as 'structured' | 'markdown';
+
+  const stop = () => {
+    cancelled = true;
+    abortCtrl.abort();
+  };
+
+  const emit = () => {
+    if (cancelled) return;
+    options.onUpdate({ ...message, stages: { ...message.stages } });
+  };
+
+  const setMain = (key: MainStepKey, status: 'pending' | 'running' | 'done') => {
+    message.mainStepStatus = {
+      ...(message.mainStepStatus ?? { info: 'pending', sixstep: 'pending', final: 'pending' }),
+      [key]: status,
+    };
+    if (status === 'running') message.currentMainStep = key;
+  };
+
+  const setSub = (key: SubStepKey, status: 'pending' | 'running' | 'done') => {
+    message.subStepStatus = {
+      ...(message.subStepStatus ?? { purpose: 'pending', actor: 'pending', behavior: 'pending', narrative: 'pending' }),
+      [key]: status,
+    };
+    if (status === 'running') message.currentSubStep = key;
+  };
+
+  const promise = (async () => {
+    setMain('info', 'running');
+    emit();
+
+    const userInput = (requestBody?.user_input as string) || '';
+    const selectedMcps = (requestBody?.selected_mcps as SelectableMcpKey[] | undefined);
+    const FIXED_ORDER: SelectableMcpKey[] = ['purpose', 'actor', 'behavior_factor', 'narrative'];
+    const filteredMain = selectedMcps && selectedMcps.length > 0
+      ? FIXED_ORDER.filter((key) => selectedMcps.includes(key))
+      : FIXED_ORDER;
+    const mcpList = ['info_prepare', ...filteredMain];
+
+    const body = {
+      user_input: userInput,
+      mcp_list: mcpList,
+      output_format: outputFormat,
+      max_items: 3,
+      ...requestBody,
+    };
+
+    let purposeCards: PurposeCard[] = [];
+    let actorCards: ActorCard[] = [];
+    let behaviorCards: BehaviorDriverCard[] = [];
+    /** 当前子步骤开始时 `markdownContent` 的长度；用于判断本步是否收到过 `delta`，避免与 `step_end` 重复拼接。 */
+    let markdownLenAtStepStart = 0;
+
+    let completed = false;
+    try {
+      for await (const { event, data } of readSSE(`${backUrl}/api/orchestrate/stream`, body, abortCtrl.signal)) {
+        if (cancelled) break;
+
+        // ---- start：流已建立（尚未必有步骤数据）----
+        if (event === 'start') {
+          // 保持连接感知；若链中无 info_prepare，后续仍可能仅靠其它事件推进，此处仅做一次 emit。
+          emit();
+        }
+
+        // ---- step_start：某 MCP 子步骤开始 ----
+        if (event === 'step_start') {
+          const backendKey = data.key as string;
+
+          if (backendKey === 'info_prepare') {
+            message.stages = {
+              ...message.stages,
+              info: { content: '', complete: false },
+            };
+            emit();
+          } else {
+            const key = KEY_MAP[backendKey];
+            if (key) {
+              if (message.mainStepStatus?.info !== 'done') {
+                setMain('info', 'done');
+              }
+              if (message.mainStepStatus?.sixstep !== 'running') {
+                setMain('sixstep', 'running');
+              }
+              setSub(key, 'running');
+              markdownLenAtStepStart = message.markdownContent?.length ?? 0;
+              if (!isMarkdown) {
+                message.stages = {
+                  ...message.stages,
+                  [key]: { thinking: '', cards: [], complete: false },
+                };
+              }
+              emit();
+            }
+          }
+        }
+
+        // ---- delta：Markdown 模式下后端按片段推送正文 ----
+        if (event === 'delta' && isMarkdown) {
+          const text = (data.text as string) || '';
+          if (text) {
+            message.markdownContent = (message.markdownContent || '') + text;
+            emit();
+          }
+        }
+
+        // ---- step_end：单步结束，携带 thinking / structured_outputs / answer 等 ----
+        if (event === 'step_end') {
+          const backendKey = data.key as string;
+
+          // 信息准备阶段：合并 answer 与 thinking 作为 info 区展示内容
+          if (backendKey === 'info_prepare') {
+            const answer = (data.answer as string) || (data.text as string) || '';
+            const thinking = (data.thinking as string) || '';
+            const content = answer || thinking;
+            message.stages = {
+              ...message.stages,
+              info: { content, complete: true },
+            };
+            if (message.mainStepStatus?.info !== 'done') {
+              setMain('info', 'done');
+            }
+            emit();
+            continue;
+          }
+
+          const key = KEY_MAP[backendKey];
+          if (!key) continue;
+
+          if (isMarkdown) {
+            // 若本步未收到 delta，则从 step_end 的 answer/text/thinking 补一段，避免空白步
+            const gotDeltasForStep = (message.markdownContent?.length ?? 0) > markdownLenAtStepStart;
+            if (!gotDeltasForStep) {
+              const answer = (data.answer as string) || (data.text as string) || (data.thinking as string) || '';
+              if (answer) {
+                const sep = message.markdownContent ? '\n\n' : '';
+                message.markdownContent = (message.markdownContent || '') + sep + answer;
+              }
+            }
+            setSub(key, 'done');
+            message.stages = {
+              ...message.stages,
+              [key]: { thinking: '', cards: [], complete: true },
+            };
+            emit();
+          } else {
+            // 结构化模式：先打字机展示 thinking，再逐张追加卡片（与 mock 节奏一致）
+            const thinking = (data.thinking as string) || '';
+            const rawItems = (data.structured_outputs as Record<string, unknown>[]) || [];
+
+            await typeText(
+              thinking,
+              (chunk) => {
+                message.stages = {
+                  ...message.stages,
+                  [key]: { ...(message.stages?.[key] as object), thinking: chunk },
+                };
+                emit();
+              },
+              () => cancelled,
+            );
+            if (cancelled) break;
+
+            let cards: PurposeCard[] | ActorCard[] | BehaviorDriverCard[] | NarrativeCard[] = [];
+            if (key === 'purpose') {
+              cards = purposeCards = toPurposeCards(rawItems);
+            } else if (key === 'actor') {
+              cards = actorCards = toActorCards(rawItems, purposeCards);
+            } else if (key === 'behavior') {
+              cards = behaviorCards = toBehaviorCards(rawItems, actorCards);
+            } else if (key === 'narrative') {
+              cards = toNarrativeCards(rawItems, behaviorCards);
+            }
+
+            for (const card of cards) {
+              if (cancelled) break;
+              const existing = (message.stages?.[key]?.cards ?? []) as typeof cards;
+              message.stages = {
+                ...message.stages,
+                [key]: {
+                  ...(message.stages?.[key] as object),
+                  cards: [...existing, card],
+                },
+              };
+              emit();
+              await new Promise((r) => setTimeout(r, 240));
+            }
+            if (cancelled) break;
+
+            message.stages = {
+              ...message.stages,
+              [key]: { ...(message.stages?.[key] as object), complete: true },
+            };
+            setSub(key, 'done');
+            emit();
+          }
+        }
+
+        // ---- flow：后端在全部步骤后下发完整图；用于补全未单独收到 step_end 的阶段（如部分 MCP 被跳过）----
+        if (event === 'flow' && !isMarkdown) {
+          const nodes = (data.nodes as Array<Record<string, unknown>>) || [];
+          const itemsOf = (type: string) =>
+            nodes
+              .filter((n) => n.type === type)
+              .map((n) => (n.data as Record<string, unknown>) || {});
+
+          const flowPurposes = toPurposeCards(itemsOf('purpose'));
+          const flowActors = toActorCards(itemsOf('actor'), flowPurposes);
+          const flowBehaviors = toBehaviorCards(itemsOf('behavior'), flowActors);
+          const flowNarratives = toNarrativeCards(itemsOf('narrative'), flowBehaviors);
+
+          const fillStage = <K extends SubStepKey>(
+            key: K,
+            cards: PurposeCard[] | ActorCard[] | BehaviorDriverCard[] | NarrativeCard[],
+          ) => {
+            const existing = (message.stages?.[key]?.cards ?? []) as typeof cards;
+            if (existing.length === 0 && cards.length > 0) {
+              message.stages = {
+                ...message.stages,
+                [key]: { thinking: '', cards, complete: true },
+              };
+              if (key === 'purpose') purposeCards = cards as PurposeCard[];
+              if (key === 'actor') actorCards = cards as ActorCard[];
+              if (key === 'behavior') behaviorCards = cards as BehaviorDriverCard[];
+            }
+          };
+          fillStage('purpose', flowPurposes);
+          fillStage('actor', flowActors);
+          fillStage('behavior', flowBehaviors);
+          fillStage('narrative', flowNarratives);
+          emit();
+        }
+
+        // ---- done：整条编排结束 ----
+        if (event === 'done') {
+          if (cancelled) break;
+
+          // 强制各子步骤为 done，避免漏事件导致进度条/沙盘卡在中间态
+          if (message.mainStepStatus?.info !== 'done') setMain('info', 'done');
+          message.subStepStatus = {
+            purpose: 'done',
+            actor: 'done',
+            behavior: 'done',
+            narrative: 'done',
+          };
+          setMain('sixstep', 'done');
+
+          if (isMarkdown) {
+            // Markdown 无单独「最终答案」主步骤，直接标记 final 完成
+            setMain('final', 'done');
+            message.currentMainStep = undefined;
+            message.currentSubStep = undefined;
+            emit();
+            completed = true;
+            options.onComplete?.();
+          } else {
+            setMain('final', 'running');
+            emit();
+
+            const finalText = buildFinalFromStages(message);
+            await typeText(
+              finalText,
+              (chunk) => { message.finalAnswer = chunk; emit(); },
+              () => cancelled,
+            );
+
+            if (!cancelled) {
+              setMain('final', 'done');
+              message.currentMainStep = undefined;
+              message.currentSubStep = undefined;
+              emit();
+              completed = true;
+              options.onComplete?.();
+            }
+          }
+        }
+      }
+      if (!completed && !cancelled) {
+        options.onComplete?.();
+      }
+    } catch (err) {
+      if (!cancelled) {
+        const errMsg = err instanceof Error ? err.message : '网络错误，请检查后端服务是否正常运行';
+        const networkErrItem: StreamErrorItem = {
+          errorId: `local-${Date.now()}`,
+          level: 'error',
+          source: 'network',
+          message: `接口请求失败：${errMsg}`,
+          recoverable: false,
+          createdAt: Date.now(),
+        };
+        message.errors = [...(message.errors ?? []), networkErrItem];
+        if (isMarkdown) {
+          message.markdownContent = (message.markdownContent || '') + `\n\n⚠️ 接口请求失败：${errMsg}`;
+        } else {
+          message.finalAnswer = `⚠️ 接口请求失败：${errMsg}`;
+        }
+        options.onUpdate({ ...message });
+        options.onComplete?.();
+      }
+    }
+  })();
+
+  return { message, stop, promise };
+}
+
+// ------------------------------------------------------------------ //
+//  专家：通过 /invoke 同步调用单个 MCP（查找 / 创建），非 SSE            //
+// ------------------------------------------------------------------ //
+
+/** agents 下各 MCP 的 invoke 接口（如 find_expert、create_expert）返回体的常用字段子集（与后端约定，字段可选）。 */
+interface InvokeResponse {
+  status?: string;
+  thinking?: string;
+  structured_outputs?: Array<Record<string, unknown>>;
+  markdown?: string;
+  references?: Array<Record<string, unknown>>;
+  duration_ms?: number;
+}
+
+/**
+ * 将 invoke 返回的 `structured_outputs` 与 `references` 交叉解析为 `ExpertCard[]`。
+ * - `item.references` 可为 id 字符串或下标，用于定位 `references` 中的详情与 `raw`（含 avatar 等）。
+ */
+const buildExpertCards = (resp: InvokeResponse): ExpertCard[] => {
+  const items = resp.structured_outputs ?? [];
+  const refs = resp.references ?? [];
+  const refById = new Map(refs.map((ref) => [ref.id as string | undefined, ref]));
+
+  return items.map((item, idx) => {
+    const itemRefs = Array.isArray(item.references) ? item.references : [];
+    const firstRefToken = itemRefs[0];
+    const firstRef =
+      typeof firstRefToken === 'string'
+        ? refById.get(firstRefToken)
+        : typeof firstRefToken === 'number'
+          ? refs[firstRefToken]
+          : refs[idx];
+    const raw = (firstRef?.raw as Record<string, unknown> | undefined) ?? undefined;
+    const rawId = raw?.id;
+    const backendId = rawId === undefined || rawId === null ? undefined : String(rawId);
+    const id = (item.id as string) || (firstRef?.id as string) || `expert-${Date.now()}-${idx}`;
+    const avatarUrl = (raw?.avatar_url as string | undefined) || undefined;
+    const title = (firstRef?.title as string | undefined) || undefined;
+    return {
+      id,
+      backendId,
+      name: (item.name as string) || title || '未命名专家',
+      detail: (item.detail as string) || (firstRef?.snippet as string) || '',
+      avatarUrl,
+      title,
+      tags: [],
+      isCustom: false,
+    };
+  });
+};
+
+/** 专家查找/创建流程的 UI 回传选项；`onComplete` 可拿到最终 `ExpertMatchData`。 */
+export interface ExpertRunOptions {
+  onUpdate: (data: ExpertMatchData) => void;
+  onComplete?: (data: ExpertMatchData) => void;
+}
+
+/** 与六步法控制器类似：`stop` 中止请求，`promise` 在结束后 settle。 */
+export interface ExpertRunController {
+  stop: () => void;
+  promise: Promise<void>;
+}
+
+/**
+ * 先打字机展示 `thinking`，再一次性写入专家列表，最后逐张「展开」专家卡片（动画节奏）。
+ * @param appendMode 为 true 时在已有 thinking 后拼接新一段（用于连续说明场景）。
+ */
+const animateExpertResponse = async (
+  current: ExpertMatchData,
+  resp: InvokeResponse,
+  isCancelled: () => boolean,
+  onUpdate: (data: ExpertMatchData) => void,
+  appendMode = false,
+): Promise<ExpertMatchData> => {
+  let next: ExpertMatchData = appendMode ? current : { ...current, status: current.status, thinking: '', experts: [] };
+  onUpdate(next);
+
+  const thinking = (resp.thinking as string) || '';
+  if (thinking) {
+    await new Promise<void>((resolve) => {
+      const step = 6;
+      let pos = 0;
+      const tick = () => {
+        if (isCancelled()) { resolve(); return; }
+        pos = Math.min(pos + step, thinking.length);
+        const composed = appendMode
+          ? `${current.thinking ? current.thinking + '\n\n' : ''}${thinking.slice(0, pos)}`
+          : thinking.slice(0, pos);
+        next = { ...next, thinking: composed };
+        onUpdate(next);
+        if (pos < thinking.length) setTimeout(tick, 18);
+        else resolve();
+      };
+      tick();
+    });
+  }
+  if (isCancelled()) return next;
+
+  const newCards = buildExpertCards(resp);
+  next = { ...next, experts: newCards, status: 'ready', searchedAt: Date.now() };
+  onUpdate(next);
+
+  for (let idx = 1; idx <= newCards.length; idx += 1) {
+    if (isCancelled()) return next;
+    next = { ...next, experts: newCards.slice(0, idx) };
+    onUpdate(next);
+    await new Promise((r) => setTimeout(r, 180));
+  }
+  return next;
+};
+
+/**
+ * 调用 `find_expert` MCP：根据用户描述检索专家候选。
+ * - `exclude_ids` 通过 `context_list.exclude_expert_ids` 传给后端，避免重复推荐。
+ */
+export function runExpertSearch(
+  baseData: ExpertMatchData,
+  body: { user_input: string; exclude_ids?: string[]; conversation_history?: unknown[] },
+  options: ExpertRunOptions,
+): ExpertRunController {
+  const abortCtrl = new AbortController();
+  let cancelled = false;
+  const stop = () => { cancelled = true; abortCtrl.abort(); };
+
+  const promise = (async () => {
+    let next: ExpertMatchData = {
+      ...baseData,
+      status: 'searching',
+      thinking: '',
+      experts: [],
+      errorMessage: undefined,
+    };
+    options.onUpdate(next);
+    try {
+      const resp = await fetch(`${backUrl}/api/agents/find_expert/invoke`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          user_input: body.user_input,
+          output_format: 'structured',
+          max_items: 3,
+          context_list: body.exclude_ids && body.exclude_ids.length > 0
+            ? [{ key: 'exclude_expert_ids', value: body.exclude_ids.join(',') }]
+            : undefined,
+        }),
+        signal: abortCtrl.signal,
+      });
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+      const data = (await resp.json()) as InvokeResponse;
+      if (cancelled) return;
+      next = await animateExpertResponse(next, data, () => cancelled, options.onUpdate, false);
+      if (cancelled) return;
+      options.onComplete?.(next);
+    } catch (err) {
+      if (cancelled) return;
+      const msg = err instanceof Error ? err.message : '查找专家失败';
+      next = { ...next, status: 'error', errorMessage: msg };
+      options.onUpdate(next);
+      options.onComplete?.(next);
+    }
+  })();
+
+  return { stop, promise };
+}
+
+// ------------------------------------------------------------------ //
+//  意图编排 SSE：在六步法事件之上扩展 intent / 专家 / 澄清 / 恢复 / 重跑等 //
+// ------------------------------------------------------------------ //
+
+/**
+ * `runIntentOrchestrateStream` 请求体：与后端意图路由、断点续跑、专家上下文等字段对齐。
+ */
+export interface IntentOrchestrateRequest {
+  /** 用户当前轮输入（主问题或补充说明）。 */
+  user_input: string;
+  /** 输出形态：结构化卡片链或整段 Markdown。 */
+  output_format?: 'structured' | 'markdown';
+  /** 各 MCP 结构化项数量上限，默认 3。 */
+  max_items?: number;
+  /** 可选模型名，透传后端。 */
+  model?: string;
+  /** 意图路由策略：自动、强制六步法、强制找专家。 */
+  intent_mode?: 'auto' | 'force_orchestrate' | 'force_find_expert';
+  /** 前端会话阶段（如 idle / expert-match），供后端恢复上下文。 */
+  current_phase?: string;
+  /** 用户已选中的专家快照，可为 null。 */
+  selected_expert?: Record<string, unknown> | null;
+  /** 用户勾选的主线 MCP 子步骤 key 列表（与编排层一致）。 */
+  selected_mcps?: string[];
+  /** 已完成的各步原始结果，用于续跑或对比。 */
+  last_steps?: Record<string, unknown>[];
+  /** 从某后端步骤 key 恢复执行时为非 null。 */
+  resume_from_step?: string | null;
+  /** 当前轮专家候选（SSE expert_end 等回灌）。 */
+  expert_candidates?: Record<string, unknown>[];
+  /** 多轮对话历史，格式由前后端约定。 */
+  conversation_history?: unknown[];
+}
+
+/** SSE `expert_end` 等设备推送的简化专家项 → `ExpertCard`（无 references 交叉时的轻量映射）。 */
+function buildExpertCardsFromSSE(items: Record<string, unknown>[]): ExpertCard[] {
+  return items.map((item, idx) => ({
+    id: (item.id as string) || `expert-sse-${Date.now()}-${idx}`,
+    backendId: (item.id as string) || undefined,
+    name: (item.name as string) || '未命名专家',
+    detail: (item.detail as string) || '',
+    avatarUrl: undefined,
+    tags: [],
+    isCustom: false,
+  }));
+}
+
+/**
+ * 带意图识别的编排流：仍连接 `/api/orchestrate/stream`，但事件集包含 `intent`、`expert_*`、`clarify`、`resume`、`rerun`、`change_steps`、`edit_apply` 等。
+ * - 根据 `intent.name` 设置 `message.phase`、内部 `flow` 分支，决定是否在 `done` 时走六步法收尾逻辑。
+ * - 六步法子逻辑与 `runSixStepDeduction` 对齐：`step_start` / `delta` / `step_end` / `flow` / `done` / `error`。
+ * - `follow_up` 意图下会按 Markdown 追加 `markdownContent`，并在 `done` 时直接完成不拼结构化 final。
+ */
+export function runIntentOrchestrateStream(
+  message: SixStepMessage,
+  options: RunOptions,
+  requestBody: IntentOrchestrateRequest,
+): SixStepMockController {
+  // 与 `runSixStepDeduction` 相同：就地更新 `message`，通过浅拷贝 `stages` 触发订阅方更新。
+  const abortCtrl = new AbortController();
+  let cancelled = false;
+
+  const outputFormat = requestBody.output_format ?? 'structured';
+  const isMarkdown = outputFormat === 'markdown';
+  message.outputFormat = outputFormat as 'structured' | 'markdown';
+
+  const stop = () => {
+    cancelled = true;
+    abortCtrl.abort();
+  };
+
+  const emit = () => {
+    if (cancelled) return;
+    options.onUpdate({ ...message, stages: { ...message.stages } });
+  };
+
+  const setMain = (key: MainStepKey, status: 'pending' | 'running' | 'done') => {
+    message.mainStepStatus = {
+      ...(message.mainStepStatus ?? { info: 'pending', sixstep: 'pending', final: 'pending' }),
+      [key]: status,
+    };
+    if (status === 'running') message.currentMainStep = key;
+  };
+
+  const setSub = (key: SubStepKey, status: 'pending' | 'running' | 'done') => {
+    message.subStepStatus = {
+      ...(message.subStepStatus ?? { purpose: 'pending', actor: 'pending', behavior: 'pending', narrative: 'pending' }),
+      [key]: status,
+    };
+    if (status === 'running') message.currentSubStep = key;
+  };
+
+  const promise = (async () => {
+    /** 当前会话主线：影响 `done` 时是否走六步法收尾、错误写到哪里等。 */
+    let flow: 'unknown' | 'expert' | 'orchestrate' | 'clarify' | 'follow_up' = 'unknown';
+    /** 是否为 resume / rerun / change_steps / edit_apply 之后的续流，用于 `start` 时是否清空 stages。 */
+    let isResume = false;
+    let purposeCards: PurposeCard[] = [];
+    let actorCards: ActorCard[] = [];
+    let behaviorCards: BehaviorDriverCard[] = [];
+    /** 当前子步骤开始时 Markdown 累计长度，用于与 `runSixStepDeduction` 相同的 delta / step_end 去重逻辑。 */
+    let markdownLenAtStepStart = 0;
+    let completed = false;
+
+    const body: Record<string, unknown> = {
+      user_input: requestBody.user_input,
+      output_format: outputFormat,
+      max_items: requestBody.max_items ?? 3,
+      intent_mode: requestBody.intent_mode ?? 'auto',
+      current_phase: requestBody.current_phase ?? 'idle',
+      selected_expert: requestBody.selected_expert ?? null,
+      selected_mcps: requestBody.selected_mcps ?? [],
+      last_steps: requestBody.last_steps ?? [],
+      resume_from_step: requestBody.resume_from_step ?? null,
+      expert_candidates: requestBody.expert_candidates ?? [],
+      conversation_history: requestBody.conversation_history ?? [],
+    };
+    if (requestBody.model) body.model = requestBody.model;
+
+    try {
+      for await (const { event, data } of readSSE(`${backUrl}/api/orchestrate/stream`, body, abortCtrl.signal)) {
+        if (cancelled) break;
+
+        // ---- intent：后端识别用户意图，驱动 phase / flow ----
+        if (event === 'intent') {
+          const intentName = data.intent as string;
+          const intentSlots = (data.slots as Record<string, unknown>) ?? {};
+          message.intent = {
+            name: intentName,
+            confidence: data.confidence as number | undefined,
+            reason: data.reason as string | undefined,
+          };
+          if (intentName === 'find_expert' || intentName === 'reselect_expert') {
+            flow = 'expert';
+            message.phase = 'expert-match';
+          } else if (intentName === 'follow_up') {
+            flow = 'follow_up';
+            message.phase = 'follow-up';
+            message.outputFormat = 'markdown';
+          } else if (intentName === 'unknown') {
+            flow = 'clarify';
+            message.phase = 'clarifying';
+          } else if (intentName === 'revise_input_continue') {
+            // 修改问题后重新分析：清空已有分析内容，记录新问题
+            flow = 'orchestrate';
+            const newInput = intentSlots.new_input as string | undefined;
+            if (newInput) message.effectiveUserInput = newInput;
+            // 提前清空旧阶段数据，避免短暂显示旧内容
+            message.stages = {};
+            message.rawSteps = [];
+            message.subStepStatus = { purpose: 'pending', actor: 'pending', behavior: 'pending', narrative: 'pending' };
+            message.mainStepStatus = { info: 'pending', sixstep: 'pending', final: 'pending' };
+            purposeCards = [];
+            actorCards = [];
+            behaviorCards = [];
+          } else if (intentName === 'change_steps_continue') {
+            // 修改步骤选择后继续：等 change_steps 事件到来时再做清理
+            flow = 'orchestrate';
+          } else if (intentName === 'edit_stage_continue') {
+            // 修改卡片内容后继续：等 edit_apply 事件到来时再做清理
+            flow = 'orchestrate';
+          } else {
+            flow = 'orchestrate';
+          }
+          emit();
+        }
+
+        // ---- expert_start：进入专家检索 UI（与 intent 中 find_expert 类同）----
+        if (event === 'expert_start') {
+          flow = 'expert';
+          message.phase = 'expert-match';
+          message.expertMatch = { status: 'searching', thinking: '', experts: [] };
+          emit();
+        }
+
+        // ---- expert_end：推送专家列表与 thinking，并做卡片逐张展开动画 ----
+        if (event === 'expert_end') {
+          const rawExperts = (data.experts as Record<string, unknown>[]) ?? [];
+          const thinking = (data.thinking as string) ?? '';
+          const expertCards = buildExpertCardsFromSSE(rawExperts);
+          message.expertMatch = { status: 'ready', thinking, experts: [] };
+          emit();
+          for (let i = 1; i <= expertCards.length; i++) {
+            if (cancelled) break;
+            message.expertMatch = { ...message.expertMatch!, experts: expertCards.slice(0, i) };
+            emit();
+            await new Promise((r) => setTimeout(r, 180));
+          }
+        }
+
+        // ---- clarify：需要用户补充说明时展示 clarifyQuestion ----
+        if (event === 'clarify') {
+          message.phase = 'clarifying';
+          message.clarifyQuestion = (data.message as string) ?? '请补充说明你的意图。';
+          emit();
+        }
+
+        // ---- resume：从某后端步骤恢复，同步内存中的 purpose/actor/behavior 卡片缓存 ----
+        if (event === 'resume') {
+          isResume = true;
+          const resumeFrom = data.resume_from as string | undefined;
+          message.resumedFrom = resumeFrom;
+          if (resumeFrom) {
+            const resumeKey = KEY_MAP[resumeFrom];
+            if (resumeKey) message.currentSubStep = resumeKey;
+          }
+          // 从已保留的 stages 中恢复卡片数组，确保继续执行时 parent ID fallback 正确
+          if (message.stages?.purpose?.cards) purposeCards = message.stages.purpose.cards as PurposeCard[];
+          if (message.stages?.actor?.cards) actorCards = message.stages.actor.cards as ActorCard[];
+          if (message.stages?.behavior?.cards) behaviorCards = message.stages.behavior.cards as BehaviorDriverCard[];
+          emit();
+        }
+
+        // ---- rerun (rerun_from_step：清空受影响阶段，保留之前阶段) ----
+        if (event === 'rerun') {
+          isResume = true;
+          const fromStep = data.from_step as string;
+          const affectedSteps = (data.affected_steps as string[]) ?? [];
+          const affectedKeySet = new Set(affectedSteps);
+
+          // 清空受影响阶段的 stages 和 subStepStatus
+          const updatedStages = { ...message.stages };
+          const updatedSubStatus = { ...(message.subStepStatus ?? { purpose: 'pending', actor: 'pending', behavior: 'pending', narrative: 'pending' }) };
+          for (const backendKey of affectedSteps) {
+            const frontendKey = KEY_MAP[backendKey];
+            if (frontendKey) {
+              delete updatedStages[frontendKey];
+              updatedSubStatus[frontendKey] = 'pending';
+            }
+          }
+          message.stages = updatedStages;
+          message.subStepStatus = updatedSubStatus;
+
+          // 从 rawSteps 中移除受影响步骤的旧数据
+          if (message.rawSteps) {
+            message.rawSteps = message.rawSteps.filter((s) => !affectedKeySet.has(s.key));
+          }
+
+          // 重置受影响步骤之后的卡片数组
+          if (affectedKeySet.has('purpose')) { purposeCards = []; actorCards = []; behaviorCards = []; }
+          else if (affectedKeySet.has('actor')) { actorCards = []; behaviorCards = []; }
+          else if (affectedKeySet.has('behavior_factor')) { behaviorCards = []; }
+
+          message.resumedFrom = fromStep;
+          if (fromStep) {
+            const resumeKey = KEY_MAP[fromStep];
+            if (resumeKey) message.currentSubStep = resumeKey;
+          }
+          emit();
+        }
+
+        // ---- change_steps (change_steps_continue：清空被移除步骤，保留其余) ----
+        if (event === 'change_steps') {
+          isResume = true;
+          const removedSteps = (data.removed_steps as string[]) ?? [];
+          const removedKeySet = new Set(removedSteps);
+
+          const updatedStages = { ...message.stages };
+          const updatedSubStatus = {
+            ...(message.subStepStatus ?? { purpose: 'pending', actor: 'pending', behavior: 'pending', narrative: 'pending' }),
+          };
+          for (const backendKey of removedSteps) {
+            const frontendKey = KEY_MAP[backendKey];
+            if (frontendKey) {
+              delete updatedStages[frontendKey];
+              updatedSubStatus[frontendKey] = 'pending';
+            }
+          }
+          message.stages = updatedStages;
+          message.subStepStatus = updatedSubStatus;
+
+          if (message.rawSteps) {
+            message.rawSteps = message.rawSteps.filter((s) => !removedKeySet.has(s.key));
+          }
+
+          // 重置受影响的卡片数组
+          if (removedKeySet.has('purpose')) { purposeCards = []; actorCards = []; behaviorCards = []; }
+          else if (removedKeySet.has('actor')) { actorCards = []; behaviorCards = []; }
+          else if (removedKeySet.has('behavior_factor')) { behaviorCards = []; }
+
+          // 恢复保留步骤的卡片数组，确保后续步骤 parent ID fallback 正确
+          if (message.stages?.purpose?.cards) purposeCards = message.stages.purpose.cards as PurposeCard[];
+          if (message.stages?.actor?.cards) actorCards = message.stages.actor.cards as ActorCard[];
+          if (message.stages?.behavior?.cards) behaviorCards = message.stages.behavior.cards as BehaviorDriverCard[];
+
+          emit();
+        }
+
+        // ---- edit_apply (edit_stage_continue：更新卡片内容，清空受影响后续步骤) ----
+        if (event === 'edit_apply') {
+          isResume = true;
+          const editedStep = data.edited_step as string;
+          const editedIndex = data.edited_index as number;
+          const newContent = data.new_content as string;
+          const field = (data.field as string) ?? 'title';
+          const affectedSteps = (data.affected_steps as string[]) ?? [];
+          const affectedKeySet = new Set(affectedSteps);
+
+          // 更新被修改步骤中对应卡片的内容
+          const editedFrontendKey = KEY_MAP[editedStep];
+          if (editedFrontendKey && message.stages?.[editedFrontendKey]) {
+            const stageData = message.stages[editedFrontendKey];
+            const cards = [...(stageData?.cards ?? [])];
+            if (editedIndex < cards.length) {
+              const card = cards[editedIndex];
+              let updatedCard: typeof card;
+              if (editedFrontendKey === 'behavior') {
+                updatedCard = { ...card, expectedBehavior: newContent } as typeof card;
+              } else {
+                updatedCard = { ...card, title: newContent } as typeof card;
+              }
+              cards[editedIndex] = updatedCard;
+              message.stages = {
+                ...message.stages,
+                [editedFrontendKey]: { ...stageData, cards },
+              };
+            }
+          }
+
+          // 同步更新 rawSteps 中对应步骤的 structured_outputs
+          if (message.rawSteps) {
+            message.rawSteps = message.rawSteps.map((s) => {
+              if (s.key !== editedStep) return s;
+              const outputs = [...(s.structured_outputs ?? [])];
+              if (editedIndex < outputs.length) {
+                outputs[editedIndex] = { ...outputs[editedIndex], [field]: newContent };
+              }
+              return { ...s, structured_outputs: outputs };
+            });
+          }
+
+          // 清空受影响的后续步骤
+          const updatedStages = { ...message.stages };
+          const updatedSubStatus = {
+            ...(message.subStepStatus ?? { purpose: 'pending', actor: 'pending', behavior: 'pending', narrative: 'pending' }),
+          };
+          for (const backendKey of affectedSteps) {
+            const frontendKey = KEY_MAP[backendKey];
+            if (frontendKey) {
+              delete updatedStages[frontendKey];
+              updatedSubStatus[frontendKey] = 'pending';
+            }
+          }
+          message.stages = updatedStages;
+          message.subStepStatus = updatedSubStatus;
+
+          if (message.rawSteps) {
+            message.rawSteps = message.rawSteps.filter((s) => !affectedKeySet.has(s.key));
+          }
+
+          // 重置受影响步骤对应的卡片数组
+          if (affectedKeySet.has('purpose')) { purposeCards = []; actorCards = []; behaviorCards = []; }
+          else if (affectedKeySet.has('actor')) { actorCards = []; behaviorCards = []; }
+          else if (affectedKeySet.has('behavior_factor')) { behaviorCards = []; }
+
+          // 恢复保留步骤的卡片数组（包含刚修改的那个步骤）
+          if (message.stages?.purpose?.cards) purposeCards = message.stages.purpose.cards as PurposeCard[];
+          if (message.stages?.actor?.cards) actorCards = message.stages.actor.cards as ActorCard[];
+          if (message.stages?.behavior?.cards) behaviorCards = message.stages.behavior.cards as BehaviorDriverCard[];
+
+          emit();
+        }
+
+        // ---- start（编排）：非续跑时重置各阶段；续跑时保留已有 stages ----
+        if (event === 'start') {
+          if (!isResume) {
+            message.stages = {};
+            message.subStepStatus = { purpose: 'pending', actor: 'pending', behavior: 'pending', narrative: 'pending' };
+            message.mainStepStatus = { info: 'pending', sixstep: 'pending', final: 'pending' };
+          }
+          if (flow === 'orchestrate' || flow === 'unknown') setMain('info', 'running');
+          emit();
+        }
+
+        // ---- step_start（编排）：与纯六步法相同，含 info_prepare 与各 KEY_MAP 子步骤 ----
+        if (event === 'step_start') {
+          const backendKey = data.key as string;
+          if (backendKey === 'info_prepare') {
+            message.stages = { ...message.stages, info: { content: '', complete: false } };
+            emit();
+          } else {
+            const key = KEY_MAP[backendKey];
+            if (key) {
+              if (message.mainStepStatus?.info !== 'done') setMain('info', 'done');
+              if (message.mainStepStatus?.sixstep !== 'running') setMain('sixstep', 'running');
+              setSub(key, 'running');
+              markdownLenAtStepStart = message.markdownContent?.length ?? 0;
+              if (!isMarkdown) {
+                message.stages = { ...message.stages, [key]: { thinking: '', cards: [], complete: false } };
+              }
+              emit();
+            }
+          }
+        }
+
+        // ---- delta：Markdown 模式或追问 follow_up 下拼接 markdownContent ----
+        if (event === 'delta' && (isMarkdown || flow === 'follow_up')) {
+          const text = (data.text as string) ?? '';
+          if (text) { message.markdownContent = (message.markdownContent ?? '') + text; emit(); }
+        }
+
+        // ---- step_end（编排）：写入 rawSteps；结构化/Markdown 分支与纯六步法一致 ----
+        if (event === 'step_end') {
+          const backendKey = data.key as string;
+          if (backendKey === 'info_prepare') {
+            const answer = (data.answer as string) ?? (data.text as string) ?? '';
+            const thinking = (data.thinking as string) ?? '';
+            message.stages = { ...message.stages, info: { content: answer || thinking, complete: true } };
+            if (message.mainStepStatus?.info !== 'done') setMain('info', 'done');
+            emit();
+            continue;
+          }
+          const key = KEY_MAP[backendKey];
+          if (!key) continue;
+
+          const rawStep: BackendStepResult = {
+            key: backendKey,
+            name: (data.name as string) ?? backendKey,
+            status: (data.status as string) ?? 'completed',
+            thinking: (data.thinking as string) ?? '',
+            structured_outputs: (data.structured_outputs as Record<string, unknown>[]) ?? [],
+            markdown: (data.markdown as string) ?? '',
+            references: (data.references as Record<string, unknown>[]) ?? [],
+          };
+          message.rawSteps = [...(message.rawSteps ?? []), rawStep];
+
+          if (isMarkdown) {
+            const gotDeltas = (message.markdownContent?.length ?? 0) > markdownLenAtStepStart;
+            if (!gotDeltas) {
+              const answer = (data.answer as string) ?? (data.text as string) ?? (data.thinking as string) ?? '';
+              if (answer) {
+                message.markdownContent = (message.markdownContent ?? '') + (message.markdownContent ? '\n\n' : '') + answer;
+              }
+            }
+            setSub(key, 'done');
+            message.stages = { ...message.stages, [key]: { thinking: '', cards: [], complete: true } };
+            emit();
+          } else {
+            const thinking = (data.thinking as string) ?? '';
+            const rawItems = (data.structured_outputs as Record<string, unknown>[]) ?? [];
+
+            await typeText(thinking, (chunk) => {
+              message.stages = { ...message.stages, [key]: { ...(message.stages?.[key] as object), thinking: chunk } };
+              emit();
+            }, () => cancelled);
+            if (cancelled) break;
+
+            let cards: PurposeCard[] | ActorCard[] | BehaviorDriverCard[] | NarrativeCard[] = [];
+            if (key === 'purpose') cards = purposeCards = toPurposeCards(rawItems);
+            else if (key === 'actor') cards = actorCards = toActorCards(rawItems, purposeCards);
+            else if (key === 'behavior') cards = behaviorCards = toBehaviorCards(rawItems, actorCards);
+            else if (key === 'narrative') cards = toNarrativeCards(rawItems, behaviorCards);
+
+            for (const card of cards) {
+              if (cancelled) break;
+              const existing = (message.stages?.[key]?.cards ?? []) as typeof cards;
+              message.stages = { ...message.stages, [key]: { ...(message.stages?.[key] as object), cards: [...existing, card] } };
+              emit();
+              await new Promise((r) => setTimeout(r, 240));
+            }
+            if (cancelled) break;
+
+            message.stages = { ...message.stages, [key]: { ...(message.stages?.[key] as object), complete: true } };
+            setSub(key, 'done');
+            emit();
+          }
+        }
+
+        // ---- flow（编排）：仅结构化；用全图节点补全空阶段 ----
+        if (event === 'flow' && !isMarkdown) {
+          const nodes = (data.nodes as Array<Record<string, unknown>>) ?? [];
+          const itemsOf = (type: string) =>
+            nodes.filter((n) => n.type === type).map((n) => (n.data as Record<string, unknown>) ?? {});
+          const fp = toPurposeCards(itemsOf('purpose'));
+          const fa = toActorCards(itemsOf('actor'), fp);
+          const fb = toBehaviorCards(itemsOf('behavior'), fa);
+          const fn = toNarrativeCards(itemsOf('narrative'), fb);
+          const fillStage = <K extends SubStepKey>(k: K, cards: PurposeCard[] | ActorCard[] | BehaviorDriverCard[] | NarrativeCard[]) => {
+            if ((message.stages?.[k]?.cards ?? []).length === 0 && cards.length > 0) {
+              message.stages = { ...message.stages, [k]: { thinking: '', cards, complete: true } };
+              if (k === 'purpose') purposeCards = cards as PurposeCard[];
+              if (k === 'actor') actorCards = cards as ActorCard[];
+              if (k === 'behavior') behaviorCards = cards as BehaviorDriverCard[];
+            }
+          };
+          fillStage('purpose', fp); fillStage('actor', fa); fillStage('behavior', fb); fillStage('narrative', fn);
+          emit();
+        }
+
+        // ---- done：专家/澄清/追问分支提前结束；否则走六步法 final 与 phase=completed ----
+        if (event === 'done') {
+          if (cancelled) break;
+          if (flow === 'expert' || flow === 'clarify' || flow === 'follow_up') {
+            if (flow === 'follow_up') message.phase = 'completed';
+            emit();
+            completed = true;
+            options.onComplete?.();
+            break;
+          }
+          if (message.mainStepStatus?.info !== 'done') setMain('info', 'done');
+          message.subStepStatus = { purpose: 'done', actor: 'done', behavior: 'done', narrative: 'done' };
+          setMain('sixstep', 'done');
+          if (isMarkdown) {
+            setMain('final', 'done');
+            message.currentMainStep = undefined;
+            message.currentSubStep = undefined;
+            message.phase = 'completed';
+            emit(); completed = true; options.onComplete?.();
+          } else {
+            setMain('final', 'running'); emit();
+            const finalText = buildFinalFromStages(message);
+            await typeText(finalText, (chunk) => { message.finalAnswer = chunk; emit(); }, () => cancelled);
+            if (!cancelled) {
+              setMain('final', 'done');
+              message.currentMainStep = undefined;
+              message.currentSubStep = undefined;
+              message.phase = 'completed';
+              emit(); completed = true; options.onComplete?.();
+            }
+          }
+        }
+
+        // ---- error_log：可恢复错误（skill 失败、步骤失败）追加到 message.errors ----
+        if (event === 'error_log') {
+          const errItem: StreamErrorItem = {
+            errorId: (data.error_id as string) ?? `local-${Date.now()}`,
+            taskId: data.task_id as string | undefined,
+            level: (data.level as StreamErrorItem['level']) ?? 'error',
+            source: (data.source as StreamErrorItem['source']) ?? 'mcp',
+            mcpKey: data.mcp_key as string | undefined,
+            stepName: data.step_name as string | undefined,
+            skillKey: data.skill_key as string | undefined,
+            skillName: data.skill_name as string | undefined,
+            message: (data.message as string) ?? '未知错误',
+            recoverable: data.recoverable as boolean | undefined,
+            createdAt: (data.ts as number) ?? Date.now(),
+          };
+          message.errors = [...(message.errors ?? []), errItem];
+          emit();
+        }
+
+        // ---- error：致命错误；专家流写入 expertMatch；否则写入 finalAnswer ----
+        if (event === 'error') {
+          const errMsg = (data.message as string) ?? '推演出错';
+          const errItem: StreamErrorItem = {
+            errorId: (data.error_id as string) ?? `local-${Date.now()}`,
+            taskId: data.task_id as string | undefined,
+            level: 'error',
+            source: (data.source as StreamErrorItem['source']) ?? 'orchestrator',
+            message: errMsg,
+            recoverable: data.recoverable as boolean | undefined,
+            createdAt: Date.now(),
+          };
+          message.errors = [...(message.errors ?? []), errItem];
+          if (flow === 'expert') {
+            message.expertMatch = {
+              ...(message.expertMatch ?? { thinking: '', experts: [] }),
+              status: 'error',
+              errorMessage: errMsg,
+            };
+          } else if (flow === 'follow_up') {
+            message.markdownContent = (message.markdownContent ?? '') + `\n\n⚠️ ${errMsg}`;
+          } else {
+            message.finalAnswer = `⚠️ ${errMsg}`;
+          }
+          emit();
+        }
+      }
+
+      if (!completed && !cancelled) options.onComplete?.();
+    } catch (err) {
+      if (!cancelled) {
+        const errMsg = err instanceof Error ? err.message : '网络错误，请检查后端服务是否正常运行';
+        const networkErrItem: StreamErrorItem = {
+          errorId: `local-${Date.now()}`,
+          level: 'error',
+          source: 'network',
+          message: `接口请求失败：${errMsg}`,
+          recoverable: false,
+          createdAt: Date.now(),
+        };
+        message.errors = [...(message.errors ?? []), networkErrItem];
+        if (flow === 'expert') {
+          message.expertMatch = {
+            ...(message.expertMatch ?? { thinking: '', experts: [] }),
+            status: 'error',
+            errorMessage: errMsg,
+          };
+        } else if (isMarkdown || flow === 'follow_up') {
+          message.markdownContent = (message.markdownContent ?? '') + `\n\n⚠️ 接口请求失败：${errMsg}`;
+        } else {
+          message.finalAnswer = `⚠️ 接口请求失败：${errMsg}`;
+        }
+        options.onUpdate({ ...message });
+        options.onComplete?.();
+      }
+    }
+  })();
+
+  return { message, stop, promise };
+}
+
+/**
+ * 调用 `create_expert` MCP：根据描述生成自定义专家卡片并追加到当前列表，默认选中新创建的第一位。
+ * - 成功后将 `isCustom: true`；thinking 会与既有 thinking 用「— 创建专家 —」分段拼接。
+ */
+export function runExpertCreate(
+  baseData: ExpertMatchData,
+  body: { user_input: string; conversation_history?: unknown[] },
+  options: ExpertRunOptions,
+): ExpertRunController {
+  const abortCtrl = new AbortController();
+  let cancelled = false;
+  const stop = () => { cancelled = true; abortCtrl.abort(); };
+
+  const promise = (async () => {
+    const next: ExpertMatchData = {
+      ...baseData,
+      status: 'creating',
+      errorMessage: undefined,
+    };
+    options.onUpdate(next);
+    try {
+      const resp = await fetch(`${backUrl}/api/agents/create_expert/invoke`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          user_input: body.user_input,
+          output_format: 'structured',
+          max_items: 1,
+        }),
+        signal: abortCtrl.signal,
+      });
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+      const data = (await resp.json()) as InvokeResponse;
+      if (cancelled) return;
+      const newCards = buildExpertCards(data).map((c) => ({ ...c, isCustom: true }));
+      // 在保留已有专家列表的前提下追加新卡片，避免覆盖历史检索结果。
+      const merged: ExpertMatchData = {
+        ...next,
+        thinking: data.thinking
+          ? `${next.thinking ? next.thinking + '\n\n— 创建专家 —\n' : '— 创建专家 —\n'}${data.thinking}`
+          : next.thinking,
+        experts: [...next.experts, ...newCards],
+        selectedExpertId: newCards[0]?.id ?? next.selectedExpertId,
+        status: 'ready',
+      };
+      options.onUpdate(merged);
+      options.onComplete?.(merged);
+    } catch (err) {
+      if (cancelled) return;
+      const msg = err instanceof Error ? err.message : '创建专家失败';
+      const failed: ExpertMatchData = { ...next, status: 'error', errorMessage: msg };
+      options.onUpdate(failed);
+      options.onComplete?.(failed);
+    }
+  })();
+
+  return { stop, promise };
+}
\ No newline at end of file
diff --git a/web-code/components/angentchat/doc.md b/web-code/components/angentchat/doc.md
new file mode 100644
index 00000000..d842c176
--- /dev/null
+++ b/web-code/components/angentchat/doc.md
@@ -0,0 +1,826 @@
+# 6 步法推演问答页面 — 开发说明文档
+
+> 所在目录：`src/components/angentchat/`（主页面 `SixStepChatPage.tsx`）  
+> 路由地址：`/qa-center/sixstep-chat`  
+> 菜单入口：问答中心 → **6bf**（侧栏文案见 `src/components/Sidebar.tsx`）  
+> 同模块相关路由：`/qa-center/sixstep-agents`、`/qa-center/sixstep-agent-edit`  
+> **最后更新（摘要）**：2026-05-12 — 流式 **`error_log`** / **`errors[]`** 与 `StreamErrorNotice`（后端 skill 失败摘要可含异常片段）；`buildLayout` 根节点 **`rootTitle` / `rootDetail`**（已选专家）；**`SixStepFlowFullscreen`** 父节点 **收起/展开子树**（过渡动画、缩略图随可见节点）；**`/observability`** 独立全站路由。
+
+---
+
+## 一、功能概述
+
+「6bf 推演问答」由 `SixStepChatPage` 对接后端 **SixStep MCP Backend**。主链路通过 **`POST /api/orchestrate/stream`** 统一流式返回：后端先做 **意图识别**（`intent` 事件），再分支为 **查找专家**（`expert_*`）、**6 步法编排**（信息准备 → 目的 → 行为体 → 预期行为与驱动因素 → 叙事 → 最终结果）、**追问**（`follow_up`，`delta` 流式 Markdown）或 **澄清**（`clarify`）。支持 **结构化卡片** 与 **Markdown** 输出切换；结构化模式下可打开 **流程图沙箱 / 全屏流程图**（`SixStepFlowSandbox` / `SixStepFlowFullscreen`），展示编排返回的实体关系。
+
+单 MCP 调试仍可直接调用 **`POST /api/agents/{key}/invoke`**（例如 `find_expert`、`create_expert`）；6bf 主页面以编排流为主，专家查找也可由流内 `intent` 分支触发。对接细节见同目录 **`INTENT_INTEGRATION.md`**。
+
+页面布局为 **顶栏 + 下方主体**：顶栏含页面标题、`SixStepProgressHorizontal`（横向主/子步骤进度）、以及结构化·Markdown、聊天记录、流程图沙箱等控制；主体为 **可收起的会话列表轨**（`SixStepChatHistory`）、**中间对话区与输入**（`SixStepConversation` + `ChatInputComposer`，含专家匹配与 MCP 选择弹窗）、以及 **可选的右侧沙箱**（宽度可拖拽，可关闭）。全屏流程图仍以 `fixed` 遮罩覆盖视口，独立于上述布局。
+
+```
+┌──────────────────────────────────────────────────────────────────┐
+│ 顶栏：标题 · SixStepProgressHorizontal · 输出格式 · 聊天记录 · 流程图 │
+├───┬────────────────────────────────────────────────────┬─────────┤
+│会话│  SixStepConversation（多轮结构化阶段）              │ 流程图  │
+│列表│  + ChatInputComposer                             │ 沙箱    │
+│轨 │                                                    │(可关闭) │
+└───┴────────────────────────────────────────────────────┴─────────┘
+```
+
+---
+
+## 二、目录结构与各文件职责
+
+```
+src/components/angentchat/
+│
+├── types.ts                     # 数据模型类型（含 phase / intent / rawSteps 等）
+├── mockData.ts                  # 本地模拟流式控制器（与 api 侧事件对齐，便于离线演示）
+├── api.ts                       # runIntentOrchestrateStream、runSixStepDeduction、runExpertSearch/Create
+├── flowLayout.ts                # SVG 流程图布局
+├── styles.css                   # 动画与工具类
+│
+├── SixStepChatPage.tsx          # 推演主页面（状态中枢）
+├── SixStepProgressHorizontal.tsx# 顶栏横向主/子步骤进度（主页面使用）
+├── SixStepProgress.tsx          # 纵向进度面板（组件保留；布局以横向为准）
+├── SixStepChatHistory.tsx       # 会话列表轨（展开/收起）
+├── SixStepConversation.tsx      # 对话区（阶段卡片 + 专家匹配）
+├── SixStepCards.tsx             # 阶段卡片原子组件
+├── ExpertMatchCards.tsx         # 专家匹配卡片
+├── McpSelectModal.tsx           # MCP 多选确认弹窗
+├── StreamErrorNotice.tsx        # 助手消息底部：汇总 SSE error_log / 网络类错误的可折叠提示条
+├── SixStepFlowSandbox.tsx       # 右侧流程图沙箱
+├── SixStepFlowFullscreen.tsx    # 全屏流程图
+├── AgentCardList.tsx            # 路由 sixstep-agents：MCP 卡片列表
+├── AgentEditPage.tsx            # 路由 sixstep-agent-edit：单 MCP 调试编辑
+├── AgentChatMessageList.tsx     # 智能体对话消息列表（编辑页等）
+├── INTENT_INTEGRATION.md        # 意图流与前后端字段说明（对接备忘）
+└── doc.md                       # 本文档
+```
+
+---
+
+## 三、数据模型（`types.ts`）
+
+所有类型均从此文件导出，是各组件之间传递数据的唯一契约。
+
+### 3.1 基础枚举
+
+| 类型 | 取值 | 说明 |
+|------|------|------|
+| `MainStepKey` | `'info' \| 'sixstep' \| 'final'` | 三个主步骤的键名 |
+| `SubStepKey` | `'purpose' \| 'actor' \| 'behavior' \| 'narrative'` | 6步法的四个子阶段键名 |
+| `StepStatus` | `'pending' \| 'running' \| 'done'` | 步骤状态，驱动进度面板和动画 |
+| `SixStepPhase` | `'idle'` \| `'intent-detecting'` \| `'expert-match'` \| `'expert-confirm'` \| `'generate'` \| `'paused'` \| `'completed'` \| `'clarifying'` \| `'follow-up'` | 助手消息所处交互阶段（与编排流、停止、追问等配合） |
+| `SelectableMcpKey` | `'purpose' \| 'actor' \| 'behavior_factor' \| 'narrative'` | MCP 弹窗可选子链，会随请求传给后端 `selected_mcps` |
+
+`BackendStepResult`：与后端 `step_end` 原始结构对齐，用于 **`continue_analysis`** 时把 `last_steps` 回传编排接口；`SixStepMessage.rawSteps` 在流式过程中累积，`resumedFrom` 对应 **`resume`** 事件中的继续起点。
+
+### 3.2 卡片数据结构
+
+每类卡片都有独立接口，并通过外键（`purposeId`、`actorId`、`driverId`）建立父子关联，构成树形层级关系。
+
+```
+PurposeCard (目的)
+  └─ ActorCard.purposeId → PurposeCard.id
+       └─ BehaviorDriverCard.actorId → ActorCard.id
+            └─ NarrativeCard.driverId → BehaviorDriverCard.id
+```
+
+| 接口 | 字段 | 说明 |
+|------|------|------|
+| `PurposeCard` | `id, index, title, reason` | 目的卡片，包含标题和推演理由 |
+| `ActorCard` | `id, index, purposeId, title, content` | 行为体卡片，`purposeId` 关联所属目的 |
+| `BehaviorDriverCard` | `id, index, actorId, expectedBehavior, driver` | 预期行为 + 驱动因素二合一卡片，`actorId` 关联所属行为体 |
+| `NarrativeCard` | `id, index, driverId, title, reason` | 叙事卡片，`driverId` 关联所属驱动因素（`BehaviorDriverCard.id`） |
+
+### 3.3 阶段数据结构
+
+每个子阶段有独立的 `*StageData` 接口：
+
+```typescript
+interface PurposeStageData {
+  thinking: string;       // 模型思考过程文本（流式填充）
+  cards: PurposeCard[];   // 已生成的卡片列表（逐张追加）
+  complete: boolean;      // 该阶段是否完全结束
+}
+// ActorStageData / BehaviorStageData / NarrativeStageData 结构类似
+```
+
+### 3.4 消息总线：`SixStepMessage`
+
+这是整个页面最核心的数据结构，一条助手消息包含所有推演状态：
+
+```typescript
+interface SixStepMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content?: string;
+  timestamp: Date;
+  outputFormat?: 'structured' | 'markdown';
+  markdownContent?: string;
+  stages?: SixStepStages;
+  finalAnswer?: string;
+  mainStepStatus?: Record<MainStepKey, StepStatus>;
+  subStepStatus?: Record<SubStepKey, StepStatus>;
+  currentSubStep?: SubStepKey;
+  currentMainStep?: MainStepKey;
+  phase?: SixStepPhase;
+  expertMatch?: ExpertMatchData;
+  selectedExpert?: ExpertCard;
+  selectedMcps?: SelectableMcpKey[];
+  intent?: { name: string; confidence?: number; reason?: string };
+  clarifyQuestion?: string;
+  rawSteps?: BackendStepResult[];
+  resumedFrom?: string;
+  effectiveUserInput?: string;
+  errors?: StreamErrorItem[];
+}
+```
+
+**`errors` / `StreamErrorItem`**：`runIntentOrchestrateStream` 收到 SSE **`error_log`** 时追加；致命失败仍会走 **`error`** 事件并映射为同类结构。`SixStepConversation` 中 **`StreamErrorNotice`** 读取 `message.errors` 展示摘要（可折叠列表）。
+
+**关键设计**：`mainStepStatus` / `subStepStatus` 驱动顶栏 `SixStepProgressHorizontal`；`stages` 驱动中间对话渲染；`currentSubStep` 驱动流程图沙箱蚂蚁线。`phase` / `intent` / `rawSteps` 与编排流、暂停继续、追问分支一致。所有信息集中在一个对象内，组件通过 props 按需取用。
+
+---
+
+## 四、模拟数据生成器（`mockData.ts`）
+
+> **线上主路径**：`SixStepChatPage` 使用 **`runIntentOrchestrateStream`** 消费真实 `/api/orchestrate/stream`。`mockData.ts` 中的 **`runSixStepDeduction`** 仍保留，用于本地演示或与 `api.ts` 中纯编排解析逻辑对齐；新功能（意图、专家 SSE、`resume` 等）以 `runIntentOrchestrateStream` 为准。
+
+### 4.1 种子数据
+
+文件顶部定义了四组静态种子数组：
+
+| 变量 | 长度 | 用途 |
+|------|------|------|
+| `PURPOSE_SEED` | 3 | 目的卡片内容模板 |
+| `ACTOR_SEED` | 7 | 行为体卡片内容模板 |
+| `BEHAVIOR_SEED` | 8 | 预期行为与驱动因素卡片内容模板 |
+| `NARRATIVE_SEED` | 8 | 叙事卡片内容模板 |
+
+使用时循环取模（`(counter - 1) % SEED.length`），确保不越界。
+
+### 4.2 卡片生成规则
+
+| 阶段 | 数量规则 |
+|------|---------|
+| 目的 | 固定 3 张（取自 `PURPOSE_SEED` 全量） |
+| 行为体 | 每个目的对应的数量：第 0 个目的 2 张，其余 1 张，共 4 张 |
+| 预期行为/驱动 | 每个行为体：偶数索引 2 张，奇数索引 1 张，共 6 张 |
+| 叙事 | 每个预期行为：偶数索引 2 张，奇数索引 1 张，共 9 张 |
+
+最终流程图节点总数：`1（智能体）+ 3 + 4 + 6×2（预期行为+驱动因素）+ 9 = 29 节点`。
+
+### 4.3 流式控制器：`runSixStepDeduction`
+
+```typescript
+export function runSixStepDeduction(
+  message: SixStepMessage,    // 直接在此对象上原地修改字段
+  options: {
+    onUpdate: (msg: SixStepMessage) => void;  // 每次有新内容时回调
+    onComplete?: () => void;                   // 全部完成时回调
+  }
+): SixStepMockController
+```
+
+返回的 `SixStepMockController` 包含：
+- `message`: 正在被修改的消息对象引用
+- `stop()`: 立即取消所有待执行的 `setTimeout`，中止推演
+- `promise`: 推演完成后 resolve 的 Promise（stop 后不再 resolve）
+
+**内部时序**（所有延迟均可通过顶部常量调整）：
+
+```
+常量              默认值   说明
+TYPE_INTERVAL     28ms     每次打字输出 4 个字符后的等待间隔
+STAGE_GAP         380ms    阶段切换之间的等待时长
+```
+
+执行顺序（伪代码）：
+
+```
+setMain('info', 'running') → emit
+wait(800ms)                           ← 模拟信息准备耗时
+setMain('info', 'done')
+setMain('sixstep', 'running') → emit
+wait(STAGE_GAP)
+
+setSub('purpose', 'running') → emit
+typeInto(PURPOSE_THINKING)            ← 逐字打出思考过程
+append cards 逐张（wait 280ms/张）
+setSub('purpose', 'done') → emit
+wait(STAGE_GAP)
+
+setSub('actor', 'running') → emit
+typeInto(ACTOR_THINKING)
+append cards 逐张（wait 220ms/张）
+setSub('actor', 'done') → emit
+wait(STAGE_GAP)
+
+setSub('behavior', 'running') → emit
+typeInto(BEHAVIOR_THINKING)
+append cards 逐张（wait 200ms/张）
+setSub('behavior', 'done') → emit
+wait(STAGE_GAP)
+
+setSub('narrative', 'running') → emit
+typeInto(NARRATIVE_THINKING)
+append cards 逐张（wait 200ms/张）
+setSub('narrative', 'done')
+setMain('sixstep', 'done')
+setMain('final', 'running') → emit
+wait(STAGE_GAP)
+
+typeInto(FINAL_ANSWER)                ← 逐字打出最终结论
+setMain('final', 'done') → emit
+onComplete()
+```
+
+**`emit` 机制**：每次调用 `onUpdate({ ...message, stages: { ...message.stages } })`，将消息对象浅拷贝后传给父组件，触发 React re-render。
+
+---
+
+## 五、流程图布局工具（`flowLayout.ts`）
+
+此文件被沙箱和全屏组件共同引用，避免重复计算。
+
+### 5.1 核心函数：`buildLayout`
+
+```typescript
+function buildLayout(
+  purposes: PurposeCard[],
+  actors: ActorCard[],
+  behaviors: BehaviorDriverCard[],
+  narratives: NarrativeCard[],
+  options?: BuildLayoutOptions   // 可覆盖节点尺寸和间距，以及根节点文案
+): FlowLayout
+```
+
+**`BuildLayoutOptions` 扩展**：除 `nodeWidth`、`nodeHeight`、`levelGap`、`nodeGap`、`paddingX`、`paddingY` 外，可选 **`rootTitle`**、**`rootDetail`**。用于将层级 0 的 `agent-root` 从默认「智能体 / 协同推演…」改为 **当前已选专家**（`SixStepFlowSandbox` / `SixStepFlowFullscreen` 在存在 `message.selectedExpert` 时传入专家姓名与简介摘要）。
+
+返回 `FlowLayout`：
+```typescript
+interface FlowLayout {
+  nodes: LayoutNode[];   // 已计算好坐标的节点列表
+  edges: LayoutEdge[];   // 已确定连接关系和颜色对的边列表
+  width: number;         // 整体画布宽度（用于 SVG viewBox）
+  height: number;        // 整体画布高度
+}
+```
+
+**布局算法**：改良的"叶节点优先后序遍历"：
+
+1. 从 agent 根节点开始，递归 DFS 处理子树
+2. 叶节点（无子节点的节点）按从左到右顺序分配 x 坐标，每次递增 `nodeWidth + nodeGap`
+3. 非叶节点的 x = (最左子节点 x + 最右子节点 x) / 2，确保父节点居中于子节点上方
+4. 所有节点的 y = `paddingY + level × (nodeHeight + levelGap)`，level 即树的深度
+
+节点层级（`level`）对应关系：
+
+| level | variant | 说明 |
+|-------|---------|------|
+| 0 | `agent` | 智能体根节点 |
+| 1 | `purpose` | 目的 |
+| 2 | `actor` | 行为体 |
+| 3 | `behavior` | 预期行为 |
+| 4 | `driver` | 驱动因素 |
+| 5 | `narrative` | 叙事 |
+
+注意：`BehaviorDriverCard` 一张卡片会生成两个节点（`behavior` + `driver`），id 分别为 `${card.id}-behavior` 和 `${card.id}-driver`。
+
+### 5.2 共享常量
+
+| 常量 | 说明 |
+|------|------|
+| `EDGE_COLOR` | 按边类型分别定义深色/浅色主题颜色（5 组） |
+| `EDGE_LABEL` | 每种边类型的中文图例说明 |
+| `CURRENT_PAIR_BY_STAGE` | `SubStepKey → LayoutEdge['pair']` 映射，决定哪组边在哪个阶段展示蚂蚁线 |
+| `STATUS_TITLE` | `SubStepKey → string` 映射，沙箱/全屏顶部标题文字 |
+| `VARIANT_ABBREV` | 节点类型 → 简化缩写（沙箱专用，如 `purpose → 'md'`） |
+| `VARIANT_LABEL` | 节点类型 → 完整中文标签 |
+
+### 5.3 辅助函数：`buildEdgePath`
+
+生成 SVG 三次贝塞尔曲线路径字符串：
+
+```
+M x1 y1  C x1 my, x2 my, x2 y2
+```
+
+控制点均取中间 y 坐标（`(y1+y2)/2`），形成平滑 S 型连线，不与节点重叠。
+
+---
+
+## 六、CSS 动画（`styles.css`）
+
+| 类名 | 动画 | 用途 |
+|------|------|------|
+| `.sixstep-ant-line` | `stroke-dasharray: 6 6` + `dashoffset` 循环 | SVG 边上的蚂蚁线流动效果（当阶段正在生成时） |
+| `.sixstep-pulse` | box-shadow 呼吸光晕 | 进度面板当前步骤图标、沙箱标题图标 |
+| `.sixstep-shimmer-text` / `...-light` | 渐变横扫文字 | 进度面板"生成中"文字、沙箱标题生成中状态 |
+| `.sixstep-spin-soft` | 360° 匀速旋转 | loading 图标 |
+| `.sixstep-fade-up` | 从下方淡入 | 子阶段卡片逐步出现 |
+| `.sixstep-node-pop` | scale 弹出 + 高光 | 流程图新增节点的弹出动画（持续 600ms） |
+| `.sixstep-ring-burst` | SVG circle `r` 从 0 扩散到 60，同时 opacity→0 | 节点出现时的扩散光环效果（持续 700ms） |
+| `.sixstep-canvas-grab` / `.sixstep-canvas-grabbing` | `cursor: grab/grabbing` | 流程图画布拖拽手型 |
+| `.sixstep-toolbar-btn` | 基础尺寸 + hover 过渡 | 工具栏图标按钮 |
+| `.sixstep-minimap-rect` | 静态样式 | 缩略图视口矩形指示框 |
+| `.sixstep-resize-handle` | 竖线拖拽手柄 | 沙箱左边缘的宽度调节拖拽条 |
+
+---
+
+## 七、主页面（`SixStepChatPage.tsx`）
+
+### 7.1 职责
+
+主页面是整个功能的**状态中枢**，负责：
+
+- 多会话列表与 **`/api/conversations`** 持久化（`filter_key` / `filter_value` 标识 6bf 页）。
+- 创建并管理 **`runIntentOrchestrateStream`**（编排 + 意图）与 **`runExpertSearch` / `runExpertCreate`**（仍可用于「换一批专家」「创建专家」等直连 invoke）的控制器生命周期。
+- 将状态与专家相关回调分发给 `SixStepConversation`、`McpSelectModal`、`SixStepFlowSandbox` 等。
+- 管理沙箱宽度拖拽。
+
+### 7.2 状态一览（节选）
+
+| 状态 | 类型 | 说明 |
+|------|------|------|
+| `conversations` / `activeConvId` | 多会话 | 当前选中会话及其 `messages` |
+| `input` | `string` | 输入框文本 |
+| `isGenerating` | `boolean` | 是否正在请求流式接口 |
+| `outputFormat` | `'structured' \| 'markdown'` | 传给后端的 `output_format` |
+| `sandboxOpen` / `sandboxWidth` / `fullscreenOpen` | UI | 流程图沙箱与全屏 |
+| `historyOpen` / `loading` | UI / 加载 | 聊天记录侧栏与首屏拉取 |
+| `activeAssistantMsgId` | `string \| null` | 当前高亮/流式更新的助手消息 |
+| `mcpModal` | `{ open, messageId, expert }` | MCP 多选弹窗状态 |
+
+### 7.3 Ref 一览
+
+| Ref | 类型 | 用途 |
+|-----|------|------|
+| `controllerRef` | `SixStepMockController \| null` | `runIntentOrchestrateStream` 的 `stop()` |
+| `expertControllerRef` | `ExpertRunController \| null` | 专家搜索/创建流的 `stop()` |
+| `conversationsRef` | 会话数组 | 持久化前读取最新消息 |
+| `containerRef` / `resizeRef` | DOM / 拖拽 | 沙箱宽度拖拽 |
+
+### 7.4 核心逻辑
+
+**`handleSend`**
+
+1. 追加用户消息；创建初始助手消息（`buildInitialAssistantMessage`，`phase` 随流程推进）。
+2. 调用 **`runIntentOrchestrateStream`**，请求体为 **`IntentOrchestrateRequest`**：`user_input`、`output_format`、`intent_mode`（默认 `auto`）、`current_phase`（含上一条助手为 **`paused`** 时传 `paused`）、`selected_expert`、`selected_mcps`、`expert_candidates`、**`last_steps`（来自上一条助手 `rawSteps`）**、`conversation_history` 等。
+   - 暂停继续时会继承上一条助手的 `rawSteps` 与 `selectedMcps`（`pausedSelectedMcps`），并显式回传 `selected_mcps` / `last_steps`，避免恢复时丢失步骤选择与历史上下文。
+3. `onUpdate` 内更新当前会话中对应 `id` 的助手消息；结束后 `persistConversation`。
+
+**专家与 MCP**
+
+- 用户确认专家后 **`handleMcpModalConfirm`**：写入 `selectedExpert` / `selectedMcps`，并可用 **`intent_mode: 'force_orchestrate'`** 立即启动分析（无需用户再次输入）。
+- **`handleRefetchExpert`**：可用 `force_find_expert` 并排除已有候选。
+
+**`handleStop`**
+
+- `AbortController` 中止流；将未完成步骤从 `running` 收回；助手 **`phase` 置为 `paused`**，便于下次发送走 **`continue_analysis`** / `rerun_from_step` / `revise_input_continue` / `change_steps_continue` / `edit_stage_continue`。
+
+**流内关键事件补充**
+
+- `resume`：恢复继续分析时，会先把已有 `stages` 中的 `purpose/actor/behavior` 卡片回填到转换缓存，确保后续 `step_end` 的父子映射准确。
+- `rerun`：前端会按 `affected_steps` 清空受影响阶段（`stages`、`subStepStatus`、`rawSteps` 与局部卡片缓存），再接收重跑后的 `step_*`。
+- `change_steps`：按 `removed_steps` 清理被移除阶段与 `rawSteps`，保留未移除阶段并继续执行 `steps_to_run`。
+- `edit_apply`：先更新被编辑卡片内容，再按 `affected_steps` 清理后续阶段并触发重跑。
+- `intent`：包含 `slots`（如 `step`、`new_input`），用于更细粒度前端状态更新。
+
+**沙箱宽度拖拽**：逻辑同前（`mousemove` / `mouseup`，保证对话区最小宽度）。
+
+**活跃助手消息派生**：
+
+```typescript
+const activeAssistantId = /* activeAssistantMsgId 或最后一条 assistant */;
+const activeAssistant = messages.find((m) => m.id === activeAssistantId);
+const liveMainStatus = activeAssistant?.mainStepStatus ?? DEFAULT_MAIN_STATUS;
+const liveSubStatus = activeAssistant?.subStepStatus ?? DEFAULT_SUB_STATUS;
+```
+
+`liveMainStatus` / `liveSubStatus` 传给 **`SixStepProgressHorizontal`**；`activeAssistant` 传给沙箱与全屏。
+
+### 7.5 Props 传递图
+
+```
+SixStepChatPage
+│
+├─► SixStepChatHistory          # 会话列表（与顶栏「聊天记录」联动）
+├─► SixStepProgressHorizontal   # mainStatus / subStatus / isDark
+├─► SixStepConversation
+│     messages, isGenerating, activeMessageId,
+│     expertHandlers（选专家 / 换一批 / 创建 / 确认）
+├─► ChatInputComposer           # onSend → handleSend, onStop → handleStop
+├─► SixStepFlowSandbox          # message={activeAssistant}
+├─► SixStepFlowFullscreen
+└─► McpSelectModal              # 专家确认后选 MCP
+```
+
+---
+
+## 八、左侧进度面板（`SixStepProgress.tsx`）
+
+> **主页面顶栏**使用的是 **`SixStepProgressHorizontal.tsx`**（横向主/子步骤）；本节描述纵向 `SixStepProgress` 的 Props 与交互，组件仍保留供其他布局复用。
+
+### 8.1 Props
+
+| Prop | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `mainStatus` | `Record<MainStepKey, StepStatus>` | ✓ | 三主步骤状态 |
+| `subStatus` | `Record<SubStepKey, StepStatus>` | ✓ | 四子阶段状态 |
+| `collapsed` | `boolean` | 可选 | 是否折叠，默认 `false` |
+| `onToggleCollapse` | `() => void` | 可选 | 展开/收起回调 |
+
+### 8.2 展开视图（`collapsed = false`）
+
+从上到下展示三个主步骤卡片，每个卡片包含：
+- 彩色图标（每个步骤有独立配色，running 时呼吸脉冲）
+- 标题 + 进度徽标（`已完成 / 生成中 / 待开始`）
+- 副文本描述（running 时展示 shimmer 动画）
+- 步骤之间用竖线连接（完成后变绿色）
+
+当 `sixstep` 阶段进入 running 或 done，在其卡片内部展开四个子阶段列表（`SUB_STEPS`），每个子阶段包含：
+- 彩色图标（与流程图对应色）
+- 标题 + 状态图标
+- 时间线左侧的节点圆点 + 连接竖线
+
+右上角收起按钮（`ChevronLeft`）触发 `onToggleCollapse`。
+
+### 8.3 折叠视图（`collapsed = true`）
+
+渲染轻量的 `CollapsedView` 子组件：
+- 宽度由父容器通过 `w-14` 控制（56px），有 `transition-all duration-300` 过渡动画
+- 顶部 `ChevronRight` 按钮用于展开
+- 竖向排列三个主步骤彩色图标 + 状态圆点
+- 若 `sixstep` 已解锁，在其下方额外展示四个小尺寸子阶段图标（`w-7 h-7`）
+- 所有元素均有 `title` 属性，鼠标悬停显示步骤名称
+
+### 8.4 配色方案
+
+步骤颜色定义在 `MAIN_STEPS` 和 `SUB_STEPS` 数组的 `color` 字段中：
+
+| 步骤 | 深色 | 浅色 |
+|------|------|------|
+| 信息准备 | sky-300 / sky-500 | sky-600 / sky-50 |
+| 6步法推演 | violet-300 / violet-500 | violet-600 / violet-50 |
+| 最终结果 | emerald-300 / emerald-500 | emerald-600 / emerald-50 |
+| 目的 | violet-300 | orange |
+| 行为体 | cyan-300 | red |
+| 预期行为/驱动 | emerald-300 | emerald |
+| 叙事 | amber-300 | amber |
+
+---
+
+## 九、对话列表（`SixStepConversation.tsx`）
+
+### 9.1 Props
+
+| Prop | 类型 | 说明 |
+|------|------|------|
+| `messages` | `SixStepMessage[]` | 全部消息 |
+| `isGenerating` | `boolean` | 是否正在生成 |
+| `activeMessageId` | `string \| null` | 当前流式聚焦的助手消息 id |
+| `expertHandlers` | 可选对象 | `onSelectExpert` / `onRefetchExpert` / `onCreateExpert` / `onConfirmExpert` |
+
+### 9.2 消息渲染策略
+
+每条消息根据 `role` 字段分叉：
+
+- `role === 'user'` → 渲染 `UserMessage`：右对齐气泡 + 用户头像
+- `role === 'assistant'` → 渲染 `AssistantMessage`：左对齐 + 机器人头像（生成中时呼吸脉冲 + 星光图标）
+
+消息列表容器 `ref` 监听内容变化，每次 `messages` 或 `isGenerating` 变化后自动滚动到底部。
+
+### 9.3 助手消息 `AssistantMessage`
+
+内部读取 `message.stages` 和 `message.mainStepStatus`、`message.subStepStatus`，根据是否存在各阶段数据来条件渲染对应的阶段块。底部（及部分分支末尾）挂载 **`StreamErrorNotice`**，展示 **`message.errors`**（来自 SSE `error_log` 等）。
+
+助手消息结构示意：
+
+```
+AssistantMessage
+│
+├─ 信息准备中（仅当 info=running 且无任何 stage）→ shimmer 提示
+│
+├─ PurposeStage     (当 stages.purpose 存在时)
+│   ├─ InlineCollapsible (以 StageHeader 为标题)
+│   │   ├─ ThinkingBlock (思考过程)
+│   │   └─ InlineCollapsible (目的卡片列表)
+│   │       └─ PurposeCardItem × N
+│
+├─ ActorStage       (当 stages.actor 存在时)
+│   ├─ InlineCollapsible
+│   │   ├─ ThinkingBlock
+│   │   └─ InlineCollapsible (行为体卡片列表)
+│   │       └─ 按 purpose 分组
+│   │           ├─ ParentGroupHeader (所属目的)
+│   │           └─ ActorCardItem × N
+│
+├─ BehaviorStage    (当 stages.behavior 存在时)
+│   ├─ InlineCollapsible
+│   │   ├─ ThinkingBlock
+│   │   └─ InlineCollapsible (预期行为/驱动因素卡片列表)
+│   │       └─ 按 actor 分组
+│   │           ├─ ParentGroupHeader (所属行为体)
+│   │           └─ BehaviorCardItem × N（2列网格）
+│
+├─ NarrativeStage   (当 stages.narrative 存在时)
+│   ├─ InlineCollapsible
+│   │   ├─ ThinkingBlock
+│   │   └─ InlineCollapsible (叙事卡片列表)
+│   │       └─ 按 driver 分组
+│   │           ├─ ParentGroupHeader (所属驱动因素)
+│   │           └─ NarrativeCardItem × N
+│
+└─ FinalAnswer      (当 finalAnswer 存在或 final=running 时)
+│
+└─ StreamErrorNotice (当 message.errors 非空)
+```
+
+**分组计算**：`ActorStage`、`BehaviorStage`、`NarrativeStage` 都在内部用 `useMemo` 计算分组，将卡片按父 ID 聚合到 Map，再按父实体列表顺序输出。
+
+---
+
+## 十、卡片原子组件（`SixStepCards.tsx`）
+
+此文件作为"组件库"，为对话列表提供所有可复用的卡片和容器组件。
+
+### 10.1 `InlineCollapsible`
+
+通用折叠面板，思考过程区块、卡片列表区块均复用此组件。
+
+| Prop | 说明 |
+|------|------|
+| `title` | 标题区 ReactNode |
+| `children` | 折叠内容 |
+| `defaultOpen` | 默认展开状态（默认 `true`） |
+| `variant` | `'default'`（标准边框背景）或 `'subtle'`（更淡）|
+
+展开/收起使用 `grid-template-rows` 动画（`0fr → 1fr`），配合 `opacity` 过渡，无需 JS 计算高度。
+
+### 10.2 各卡片组件
+
+| 组件 | 卡片类型 | 布局特点 |
+|------|---------|---------|
+| `PurposeCardItem` | 目的 | 紫/橙渐变背景，索引徽标 + Target 图标 + 标题 + 理由 |
+| `ActorCardItem` | 行为体 | 青/红渐变背景，UserCheck 图标 + 标题 + 内容 |
+| `BehaviorCardItem` | 预期行为/驱动因素 | 翠绿渐变背景，上下两部分：TrendingUp 图标+预期行为 / Zap 图标+驱动因素 |
+| `NarrativeCardItem` | 叙事 | 琥珀渐变背景，ScrollText 图标 + 标题 + 理由 |
+
+所有卡片均有 `.sixstep-fade-up` 进入动画，`hover` 时边框加深。
+
+### 10.3 `ParentGroupHeader`
+
+显示某类卡片所属父实体名称的标签行，用于行为体、预期行为/驱动、叙事列表的分组标题。
+
+| Prop | 说明 |
+|------|------|
+| `label` | 关系说明（如"所属目的"） |
+| `parentTitle` | 父实体名称 |
+| `count` | 该组卡片数量 |
+| `variant` | `'actor' \| 'behavior' \| 'narrative'`，决定图标和配色 |
+
+### 10.4 `ThinkingBlock`
+
+展示思考过程文本的区块，`loading` 为 `true` 时标题行展示 "生成中" shimmer 文字。
+
+### 10.5 `StageHeader`
+
+折叠面板标题，包含阶段图标、阶段标题、卡片数量徽标、状态徽标（已完成/生成中）。`loading = true` 时图标呼吸脉冲，副文本展示 shimmer 动画。
+
+---
+
+## 十一、流程图沙箱（`SixStepFlowSandbox.tsx`）
+
+### 11.1 Props
+
+| Prop | 类型 | 说明 |
+|------|------|------|
+| `message` | `SixStepMessage \| undefined` | 活跃助手消息，用于提取各阶段卡片数据 |
+| `width` | `number` | 当前沙箱宽度（px），由主页面拖拽控制 |
+| `onResizeStart` | `(e: React.MouseEvent) => void` | 拖拽手柄 mousedown 回调 |
+| `onClose` | `() => void` | 关闭沙箱回调 |
+| `onOpenFullscreen` | `() => void` | 打开全屏回调 |
+
+### 11.2 布局参数（`COMPACT_OPTIONS`）
+
+沙箱使用缩小版布局，节点小于全屏版：
+
+```typescript
+const COMPACT_OPTIONS = {
+  nodeWidth: 120, nodeHeight: 60,
+  levelGap: 80,   nodeGap: 24,
+  paddingX: 32,   paddingY: 28,
+};
+```
+
+### 11.3 简化节点（`CompactNode`）
+
+每个节点只显示**彩色图标 + 阶段缩写**（`VARIANT_ABBREV`）：
+
+| 层级 | 缩写 |
+|------|------|
+| 智能体（或根标题改为已选专家名时仍为 variant `agent`） | AI |
+| 目的 | md |
+| 行为体 | xwt |
+| 预期行为 | yqxw |
+| 驱动因素 | qdys |
+| 叙事 | xs |
+
+底部固定图例说明对应关系。
+
+### 11.4 新增节点动画
+
+通过 `seenIdsRef`（`Set<string>`）记录已渲染过的节点 ID。每次 `layout.nodes` 变化时，找出新增的 ID，将其加入 `appearingIds` 状态，700ms 后自动移除。
+
+`CompactNode` 接收 `appearing` prop，为 `true` 时：
+1. 为 `<g>` 添加 `.sixstep-node-pop` CSS 类（scale 弹出）
+2. 在节点中心绘制一个 SVG `<circle>` 并添加 `.sixstep-ring-burst` CSS 类（扩散光环）
+
+### 11.5 交互能力
+
+**平移（Pan）**：
+- `mousedown` 记录起始坐标和初始 `tx/ty` 到 `panStart.current`
+- 通过 `useEffect` 监听 `isPanning` 状态，动态注册/注销 `window` 的 `mousemove` 和 `mouseup`
+- `mousemove` 计算偏移量 `(e.clientX - startX, e.clientY - startY)` 叠加到初始平移值
+
+**缩放（Zoom）**：
+- 通过 `useEffect` 向 `containerRef` 注册原生 `wheel` 事件（`{ passive: false }`），确保 `e.preventDefault()` 生效，不触发浏览器页面缩放
+- 以鼠标位置为缩放中心：`nextTx = mx - (mx - prev.tx) * (nextScale / prev.scale)`
+- 缩放范围：0.3x ~ 2.5x
+
+**工具栏**：
+| 按钮 | 功能 |
+|------|------|
+| `+` | 按 1.2 倍放大 |
+| `-` | 按 1.2 倍缩小 |
+| ↺ | 恢复 1:1（translate 0,0 scale 1） |
+| ⊕ | 定位画布中央（保持当前缩放比，调整平移使图形居中） |
+| ⤢ | 触发 `onOpenFullscreen` |
+
+首次有内容时自动执行 `fitToView`（等比缩放 + 居中），由 `fitAppliedRef` 控制只执行一次。
+
+### 11.6 连线说明
+
+SVG 中的 `<defs>` 为每种边类型各定义一个箭头 marker（id 加 `sixstep-sandbox-` 前缀，与全屏版 marker 不冲突）。当 `activePair === edge.pair` 时，该边添加 `.sixstep-ant-line` CSS 类展示蚂蚁线动画。
+
+### 11.7 调整宽度
+
+左侧有一个 `position: absolute` 的 `.sixstep-resize-handle` 竖线拖拽条，`mousedown` 触发 `onResizeStart`（由主页面处理具体逻辑）。
+
+---
+
+## 十二、全屏流程图视图（`SixStepFlowFullscreen.tsx`）
+
+### 12.1 Props
+
+| Prop | 类型 | 说明 |
+|------|------|------|
+| `message` | `SixStepMessage \| undefined` | 与沙箱相同的活跃助手消息 |
+| `onClose` | `() => void` | 关闭全屏回调 |
+
+### 12.2 与沙箱的区别
+
+| 特性 | 沙箱 | 全屏 |
+|------|------|------|
+| 布局参数 | 紧凑（节点 120×60） | 标准（节点 200×84） |
+| 节点内容 | 缩写 + 图标 | 完整标题 + 详情 + 图标 |
+| 节点出现动画 | 有（pop + ring-burst） | 无 |
+| 子树收起/展开 | 无 | 有（点击**有子节点**的父节点；右下角「-」收起 / 「+」展开；画布左下角有操作提示） |
+| 缩略图 | 无 | 有（右下角；仅绘制当前可见节点） |
+| 下载 | 无 | 有（导出 SVG） |
+| Esc 关闭 | 无 | 有 |
+| 层级 | flex 子元素 | `fixed inset-0 z-50`（全视口遮罩） |
+| 缩放范围 | 0.3x ~ 2.5x | 0.2x ~ 3x |
+
+### 12.3 详细节点（`DetailNode`）
+
+使用 `foreignObject` 嵌入 HTML，展示：
+- 彩色图标包裹 + 大写类型标签（`VARIANT_LABEL`）
+- 节点标题（`line-clamp-1`）
+- 详情内容（`line-clamp-2`）
+
+深色/浅色主题的渐变背景、图标颜色均通过 `VARIANT_TOKEN` 查表获取。
+
+**收起子树**：当 `flowLayout` 中节点带 **`children`** 时，卡片右上角显示 **`+` / `-`**，点击节点（或该角标）切换 **`collapsedNodeIds`**：自该节点向下的后代节点与相关边不再纳入 **`targetVisibleNodeSet`**，并以约 **240ms** 的透明度过渡（进入/离开集合合并渲染，避免闪烁）。重新生成布局时会剔除已不存在的节点 id，避免残留收起状态。根节点若被选为专家展示，仍可按树结构收起其下子链。
+
+### 12.4 缩略图（`Minimap`）
+
+固定 220×150px，渲染在右下角。
+
+内部逻辑：
+1. 计算整体布局与 minimap 尺寸的缩放比 `ratio = Math.min((W-10)/layoutW, (H-10)/layoutH)`
+2. 按 `ratio` 缩小绘制每个节点矩形（使用 `MINIMAP_VARIANT_FILL` 颜色，无文字）
+3. 根据当前 `transform`（`tx, ty, scale`）和视口尺寸，计算可见区域在世界坐标的矩形，再乘 `ratio` 映射到 minimap 坐标系，绘制蓝色描边矩形（`.sixstep-minimap-rect`）
+4. 点击 minimap：将点击的 minimap 坐标逆映射到世界坐标，调用 `onJump` 将视口移动到以该点为中心
+
+### 12.5 SVG 下载
+
+点击下载按钮时：
+1. 克隆 `svgRef.current`（当前全屏 SVG 元素）
+2. 设置 `width/height` 为实际布局尺寸，移除 transform
+3. 用 `XMLSerializer` 序列化为字符串
+4. 创建 `Blob` 和临时 `<a>` 标签，触发下载
+5. 文件名格式：`6步法推演-YYYY-MM-DD-HH-mm-ss.svg`
+
+> ⚠️ 注意：由于节点内容在 `foreignObject` 中使用 HTML + CSS 类名，下载的 SVG 打开时若外部查看器不支持 CSS，样式会丢失。可在未来改为纯 SVG 文本节点渲染以提升兼容性。
+
+---
+
+## 十三、整体数据流图
+
+```
+用户输入（回车）
+    │
+    ▼
+SixStepChatPage.handleSend()
+    │
+    ├─► 当前会话追加 UserMessage + 初始 AssistantMessage
+    │
+    └─► runIntentOrchestrateStream(assistant, { onUpdate, onComplete }, IntentOrchestrateRequest)
+            │
+            │  readSSE('/api/orchestrate/stream', body)
+            │
+            │  intent / expert_* / clarify / resume / rerun / change_steps / edit_apply
+            │  start / step_* / flow / done / delta（追问或 markdown）
+            │  每次 onUpdate → 更新会话中该 assistant 的 SixStepMessage
+            │
+            ▼  React re-render
+            │
+            ├─► SixStepProgressHorizontal（liveMainStatus / liveSubStatus）
+            ├─► SixStepConversation（messages、expertHandlers、intent/clarify 等）
+            ├─► SixStepFlowSandbox / Fullscreen（stages → buildLayout）
+            └─► persistConversation（SQLite）
+```
+
+---
+
+## 十四、路由注册
+
+**`src/App.tsx`**：
+```tsx
+// 路由定义
+<Route path="sixstep-chat" element={<SixStepChatPage />} />
+<Route path="/observability" element={<ObservabilityPage />} />
+
+// 导航路径映射（handleNavigate 函数）
+else if ([..., 'sixstep-chat'].includes(page)) {
+  path = `/qa-center/${page}`;
+}
+```
+
+**可观测性页面**（调用耗时 / 错误日志筛选）：全站路由 **`/observability`**，侧栏顶级「可观测性」，对接后端 **`GET /api/observability/calls`**、**`/errors`**、**`/options`** 等（详见 `backend/doc.md`）。与 6bf 页面独立，不在 `/qa-center` 前缀下。
+
+**`src/components/Sidebar.tsx`**：
+```tsx
+// 菜单配置（问答中心 children）
+{ id: 'sixstep-chat', label: '6bf', icon: Workflow }
+
+// qaPages 集合（控制问答中心父菜单高亮）
+const qaPages = new Set([..., 'sixstep-chat']);
+```
+
+---
+
+## 十五、流式错误与 `error_log`（`api.ts`）
+
+编排 SSE 除 **`error`** 外，可能下发 **`error_log`**（步骤失败摘要、skill 降级等）。`runIntentOrchestrateStream` 将其归一为 **`StreamErrorItem`** 并 **`push` 到 `message.errors`**；网络异常也会写入类似结构。后端在可执行 **skill 失败已跳过**时，**`message` 文案**可能附带 **异常原因前若干字符**（与 `backend/app/mcp/base.py` 截断策略一致），便于在气泡内区分超时与其它错误。
+
+**`StreamErrorNotice`**：仅在对应助手气泡内展示，支持折叠展开、错误/警告计数摘要；不参与 `showAnalysisContent` 隐藏逻辑（专家阶段亦可显示）。
+
+---
+
+
+## 十六、扩展指南
+
+### 接入编排与意图流
+
+1. 主入口为 **`runIntentOrchestrateStream`**（`api.ts`），与后端 **`/api/orchestrate/stream`** 事件一一对应；扩展新意图时通常同时改 **`backend/app/intent/detector.py`** 与 **`runIntentOrchestrateStream`** 的分支解析。
+   - 当前除 `continue_analysis` 外，还支持 `rerun_from_step`、`revise_input_continue`、`change_steps_continue`、`edit_stage_continue` 分支。
+2. 保持 **`onUpdate(SixStepMessage)`** 契约：`SixStepChatPage` 只需合并助手消息字段。
+3. 纯编排、无意图分支的调试可继续用 **`runSixStepDeduction`**（同文件内，仅 `start` / `step_*` / `flow` / `done`）。
+
+详见 **`INTENT_INTEGRATION.md`** 与仓库 **`docs/xvqiu.md`**。
+
+### 某子步（如行为体、叙事）体感很慢时
+
+前端 **`step_end`** 事件里会带上该步的 **`duration_ms`**（整步总耗时），便于在 UI 或调试时对比各步。
+
+更细拆分（skill 耗时 vs 拼 prompt 扩展 vs LLM）在**后端**完成：每次 `POST /api/agents/{key}/invoke` 及编排内对 `MCPAgent.invoke` 的调用，服务端会打 **`mcp_timing`** / **`mcp_skill_timing`** 日志（见 **`backend/doc.md`**「MCP 调用接口」与 **`backend/DEVELOPMENT.md`** §5.2）。排查时在运行 `python -m app.main` 的终端查看即可；无需改前端请求体。
+
+### 替换流程图引擎（如 G6 / React Flow）
+
+仅需替换 `SixStepFlowSandbox.tsx` 和 `SixStepFlowFullscreen.tsx` 中的 SVG 渲染部分：
+- `buildLayout()` 的 `LayoutNode` 数组可直接转换为 G6 节点
+- `LayoutEdge` 数组可直接转换为 G6 边
+- `CURRENT_PAIR_BY_STAGE` 和 `EDGE_COLOR` 仍适用
+
+### 新增推演子阶段
+
+1. 在 `types.ts` 的 `SubStepKey` 中新增键名
+2. 在 `SixStepStages` 中新增对应 `*StageData` 字段
+3. 在 `mockData.ts` 的 `runSixStepDeduction` 中新增生成逻辑（若仍需要离线演示）
+4. 在 `SixStepConversation.tsx` 的 `AssistantMessage` 中新增阶段渲染块
+5. 在 `SixStepProgress.tsx` / **`SixStepProgressHorizontal.tsx`** 的 `SUB_STEPS` 中新增步骤项
+6. 若需要流程图新层级，在 `flowLayout.ts` 的 `buildLayout` 中新增节点构建逻辑
diff --git a/web-code/components/angentchat/flowLayout.ts b/web-code/components/angentchat/flowLayout.ts
new file mode 100644
index 00000000..9d20bafa
--- /dev/null
+++ b/web-code/components/angentchat/flowLayout.ts
@@ -0,0 +1,266 @@
+import type {
+  ActorCard,
+  BehaviorDriverCard,
+  NarrativeCard,
+  PurposeCard,
+  SubStepKey,
+} from './types';
+
+export interface LayoutNode {
+  id: string;
+  level: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  variant: 'agent' | 'purpose' | 'actor' | 'behavior' | 'driver' | 'narrative';
+  title: string;
+  detail: string;
+  children: string[];
+  parent?: string;
+}
+
+export interface LayoutEdge {
+  id: string;
+  fromId: string;
+  toId: string;
+  pair: 'agent-purpose' | 'purpose-actor' | 'actor-behavior' | 'behavior-driver' | 'driver-narrative';
+}
+
+export interface FlowLayout {
+  nodes: LayoutNode[];
+  edges: LayoutEdge[];
+  width: number;
+  height: number;
+}
+
+export interface BuildLayoutOptions {
+  nodeWidth?: number;
+  nodeHeight?: number;
+  levelGap?: number;
+  nodeGap?: number;
+  paddingX?: number;
+  paddingY?: number;
+  rootTitle?: string;
+  rootDetail?: string;
+}
+
+export const CURRENT_PAIR_BY_STAGE: Record<SubStepKey, LayoutEdge['pair'] | null> = {
+  purpose: 'agent-purpose',
+  actor: 'purpose-actor',
+  behavior: 'actor-behavior',
+  narrative: 'driver-narrative',
+};
+
+export const STATUS_TITLE: Record<SubStepKey, string> = {
+  purpose: '正在生成目的中',
+  actor: '正在生成行为体中',
+  behavior: '正在生成预期行为和驱动因素中',
+  narrative: '正在生成叙事中',
+};
+
+export const EDGE_COLOR: Record<LayoutEdge['pair'], { dark: string; light: string }> = {
+  'agent-purpose': { dark: '#a78bfa', light: '#fb923c' },
+  'purpose-actor': { dark: '#22d3ee', light: '#ef4444' },
+  'actor-behavior': { dark: '#34d399', light: '#10b981' },
+  'behavior-driver': { dark: '#5eead4', light: '#0d9488' },
+  'driver-narrative': { dark: '#fbbf24', light: '#f59e0b' },
+};
+
+export const EDGE_LABEL: Record<LayoutEdge['pair'], string> = {
+  'agent-purpose': '智能体→目的',
+  'purpose-actor': '目的→行为体',
+  'actor-behavior': '行为体→预期行为',
+  'behavior-driver': '预期行为→驱动因素',
+  'driver-narrative': '驱动因素→叙事',
+};
+
+export function buildEdgePath(from: LayoutNode, to: LayoutNode): string {
+  const x1 = from.x + from.width / 2;
+  const y1 = from.y + from.height;
+  const x2 = to.x + to.width / 2;
+  const y2 = to.y;
+  const my = (y1 + y2) / 2;
+  return `M ${x1} ${y1} C ${x1} ${my}, ${x2} ${my}, ${x2} ${y2}`;
+}
+
+export function buildLayout(
+  purposes: PurposeCard[],
+  actors: ActorCard[],
+  behaviors: BehaviorDriverCard[],
+  narratives: NarrativeCard[],
+  options: BuildLayoutOptions = {},
+): FlowLayout {
+  const NODE_WIDTH = options.nodeWidth ?? 200;
+  const NODE_HEIGHT = options.nodeHeight ?? 84;
+  const LEVEL_GAP = options.levelGap ?? 130;
+  const NODE_GAP = options.nodeGap ?? 28;
+  const PADDING_X = options.paddingX ?? 48;
+  const PADDING_Y = options.paddingY ?? 40;
+  const rootTitle = options.rootTitle?.trim() || '智能体';
+  const rootDetail = options.rootDetail?.trim() || '协同推演 6 步法生成内容';
+
+  const nodes: LayoutNode[] = [];
+  const nodeMap = new Map<string, LayoutNode>();
+  const push = (node: LayoutNode) => {
+    nodes.push(node);
+    nodeMap.set(node.id, node);
+  };
+
+  const agent: LayoutNode = {
+    id: 'agent-root',
+    level: 0,
+    x: 0,
+    y: 0,
+    width: NODE_WIDTH,
+    height: NODE_HEIGHT,
+    variant: 'agent',
+    title: rootTitle,
+    detail: rootDetail,
+    children: purposes.map((p) => p.id),
+  };
+  push(agent);
+
+  purposes.forEach((p) => {
+    push({
+      id: p.id,
+      level: 1,
+      x: 0,
+      y: 0,
+      width: NODE_WIDTH,
+      height: NODE_HEIGHT,
+      variant: 'purpose',
+      title: p.title,
+      detail: p.reason,
+      children: actors.filter((a) => a.purposeId === p.id).map((a) => a.id),
+      parent: 'agent-root',
+    });
+  });
+
+  actors.forEach((a) => {
+    push({
+      id: a.id,
+      level: 2,
+      x: 0,
+      y: 0,
+      width: NODE_WIDTH,
+      height: NODE_HEIGHT,
+      variant: 'actor',
+      title: a.title,
+      detail: a.content,
+      children: behaviors.filter((b) => b.actorId === a.id).map((b) => `${b.id}-behavior`),
+      parent: a.purposeId,
+    });
+  });
+
+  behaviors.forEach((b) => {
+    const behaviorId = `${b.id}-behavior`;
+    const driverId = `${b.id}-driver`;
+    push({
+      id: behaviorId,
+      level: 3,
+      x: 0,
+      y: 0,
+      width: NODE_WIDTH,
+      height: NODE_HEIGHT,
+      variant: 'behavior',
+      title: '预期行为',
+      detail: b.expectedBehavior,
+      children: [driverId],
+      parent: b.actorId,
+    });
+    push({
+      id: driverId,
+      level: 4,
+      x: 0,
+      y: 0,
+      width: NODE_WIDTH,
+      height: NODE_HEIGHT,
+      variant: 'driver',
+      title: '驱动因素',
+      detail: b.driver,
+      children: narratives.filter((n) => n.driverId === b.id).map((n) => n.id),
+      parent: behaviorId,
+    });
+  });
+
+  narratives.forEach((n) => {
+    push({
+      id: n.id,
+      level: 5,
+      x: 0,
+      y: 0,
+      width: NODE_WIDTH,
+      height: NODE_HEIGHT,
+      variant: 'narrative',
+      title: n.title,
+      detail: n.reason,
+      children: [],
+      parent: `${n.driverId}-driver`,
+    });
+  });
+
+  const leafCounter = { v: 0 };
+  const place = (node: LayoutNode) => {
+    if (node.children.length === 0) {
+      node.x = PADDING_X + leafCounter.v * (NODE_WIDTH + NODE_GAP);
+      leafCounter.v += 1;
+      return;
+    }
+    node.children.forEach((cid) => {
+      const child = nodeMap.get(cid);
+      if (child) place(child);
+    });
+    const xs = node.children.map((cid) => nodeMap.get(cid)?.x ?? 0).filter((v) => v >= 0);
+    if (xs.length > 0) {
+      node.x = (Math.min(...xs) + Math.max(...xs)) / 2;
+    } else {
+      node.x = PADDING_X;
+    }
+  };
+  place(agent);
+
+  nodes.forEach((node) => {
+    node.y = PADDING_Y + node.level * (NODE_HEIGHT + LEVEL_GAP);
+  });
+
+  const edges: LayoutEdge[] = [];
+  nodes.forEach((node) => {
+    node.children.forEach((cid) => {
+      const child = nodeMap.get(cid);
+      if (!child) return;
+      let pair: LayoutEdge['pair'];
+      if (node.variant === 'agent') pair = 'agent-purpose';
+      else if (node.variant === 'purpose') pair = 'purpose-actor';
+      else if (node.variant === 'actor') pair = 'actor-behavior';
+      else if (node.variant === 'behavior') pair = 'behavior-driver';
+      else pair = 'driver-narrative';
+      edges.push({ id: `${node.id}->${cid}`, fromId: node.id, toId: cid, pair });
+    });
+  });
+
+  const allLevels = Math.max(...nodes.map((n) => n.level));
+  const maxX = Math.max(...nodes.map((n) => n.x + n.width));
+  const totalWidth = maxX + PADDING_X;
+  const totalHeight = PADDING_Y * 2 + (allLevels + 1) * NODE_HEIGHT + allLevels * LEVEL_GAP;
+
+  return { nodes, edges, width: totalWidth, height: totalHeight };
+}
+
+export const VARIANT_ABBREV: Record<LayoutNode['variant'], string> = {
+  agent: 'AI',
+  purpose: 'md',
+  actor: 'xwt',
+  behavior: 'yqxw',
+  driver: 'qdys',
+  narrative: 'xs',
+};
+
+export const VARIANT_LABEL: Record<LayoutNode['variant'], string> = {
+  agent: '智能体',
+  purpose: '目的',
+  actor: '行为体',
+  behavior: '预期行为',
+  driver: '驱动因素',
+  narrative: '叙事',
+};
diff --git a/web-code/components/angentchat/mockData.ts b/web-code/components/angentchat/mockData.ts
new file mode 100644
index 00000000..ffa33fac
--- /dev/null
+++ b/web-code/components/angentchat/mockData.ts
@@ -0,0 +1,346 @@
+import type {
+  ActorCard,
+  BehaviorDriverCard,
+  MainStepKey,
+  NarrativeCard,
+  PurposeCard,
+  SixStepMessage,
+  StepStatus,
+  SubStepKey,
+} from './types';
+
+const PURPOSE_SEED: { title: string; reason: string }[] = [
+  { title: '建立品牌权威认知', reason: '通过持续的专业内容输出，塑造行业领导者形象，使核心受众在面对同类品牌时优先想起本品牌，并带来长期信任度' },
+  { title: '激活核心用户决策路径', reason: '梳理用户从兴趣触达到决策转化的关键触点，缩短决策链路、提升转化效率' },
+  { title: '强化情感价值连接', reason: '通过故事化叙事激发情绪共鸣，沉淀难以被替代的品牌情感资产' },
+];
+
+const ACTOR_SEED: { title: string; content: string }[] = [
+  { title: '行业意见领袖（KOL）', content: '在专业垂直领域有持续影响力，可在第一时间撬动核心圈层并带动二次扩散' },
+  { title: '品牌官方账号矩阵', content: '统一对外传递品牌主张与最新动态，承担信息发布、用户互动与口碑响应' },
+  { title: '深度内容创作者', content: '产出长图文、视频解读等内容形态，承担引发讨论与口碑沉淀的角色' },
+  { title: '行业垂直媒体', content: '具备专业背书能力，承担议题设置与权威背书职责' },
+  { title: '核心用户共创社区', content: '由忠诚用户构成，通过 UGC 形式输出真实使用反馈与场景示范' },
+  { title: '行业分析机构', content: '通过研究报告与数据支撑品牌主张，加强观点的可信度' },
+  { title: '品牌代言关键人', content: '与品牌价值观高度契合的代言人或合作方，承担情感投射与信任放大' },
+];
+
+const BEHAVIOR_SEED: { expectedBehavior: string; driver: string }[] = [
+  { expectedBehavior: '主动转发并附带专业点评', driver: '内容契合自身专业立场，带来圈层认同与社交资本' },
+  { expectedBehavior: '在专业社区发起延伸讨论', driver: '议题具备争议或洞察价值，能引发同行参与并扩散' },
+  { expectedBehavior: '将品牌内容沉淀为参考资料', driver: '内容具备结构化、可复用的方法论价值，可在工作中长期引用' },
+  { expectedBehavior: '主动在直播间或路演中引用品牌观点', driver: '观点具备可解释性，能帮助行为体强化自身专业可信度' },
+  { expectedBehavior: '产出二次内容（长图文 / 视频）', driver: '原始素材具备可改编空间，能匹配自身受众语境' },
+  { expectedBehavior: '组织线下闭门交流会', driver: '议题对核心受众具备稀缺性，符合社群运营节奏' },
+  { expectedBehavior: '在调研报告中将品牌列为典型案例', driver: '品牌案例具备数据支撑、典型且可被结构化引用' },
+  { expectedBehavior: '在公开演讲中引用品牌叙事框架', driver: '叙事框架具备方法论高度，可被借用以提升自身演讲含金量' },
+];
+
+const NARRATIVE_SEED: { title: string; reason: string }[] = [
+  { title: '从噪音中识别真实信号', reason: '聚焦行业过度信息的痛点，主张以理性框架回归本质' },
+  { title: '让专业判断回到决策中心', reason: '强调专业判断在复杂环境下的不可替代性' },
+  { title: '以长期主义穿越周期', reason: '倡导关注长期价值积累，而非短期爆点' },
+  { title: '把复杂问题讲简单', reason: '通过结构化表达让专业内容更易被传播与理解' },
+  { title: '让每一次选择都有迹可循', reason: '强调决策可追溯、可复盘，建立专业信任' },
+  { title: '与时间做朋友', reason: '把品牌成长锚定在长期视角，淡化短期波动焦虑' },
+  { title: '相信专业的力量', reason: '通过行为体共同的专业身份认同强化品牌主张' },
+  { title: '把方法论变成可复用的工具', reason: '将抽象主张沉淀为工具化资产，方便受众反复引用' },
+];
+
+const PURPOSE_THINKING = `根据当前问题语境，需要先厘清品牌战略推演的核心目的：
+
+1. 综合输入素材，识别可能的目标方向；
+2. 评估不同目的之间的优先级与互补性；
+3. 选择最契合当前阶段的目的组合，作为后续推演基础。`;
+
+const ACTOR_THINKING = `围绕已生成的目的，开始识别支撑该目的所需的关键行为体：
+
+- 需要明确每个行为体的角色定位
+- 评估其对目的的贡献度与覆盖范围
+- 避免行为体之间能力重叠或缺位`;
+
+const BEHAVIOR_THINKING = `针对每个行为体，推演其在场景中应当展现的预期行为：
+
+- 行为需要可观察、可衡量
+- 同时识别推动该行为发生的关键驱动因素
+- 行为与驱动因素需保持因果一致性`;
+
+const NARRATIVE_THINKING = `基于驱动因素，构建用于触发行为的叙事框架：
+
+- 叙事需要紧扣驱动因素的情绪或理性触点
+- 兼顾品牌主张与受众心智匹配度
+- 形成可被复用的叙事模板`;
+
+export interface SixStepMockController {
+  message: SixStepMessage;
+  stop: () => void;
+  promise: Promise<void>;
+}
+
+const TYPE_INTERVAL = 28;
+const STAGE_GAP = 380;
+
+function buildPurposeCards(): PurposeCard[] {
+  return PURPOSE_SEED.map((seed, idx) => ({
+    id: `purpose-${idx + 1}`,
+    index: idx + 1,
+    title: seed.title,
+    reason: seed.reason,
+  }));
+}
+
+function buildActorCards(purposes: PurposeCard[]): ActorCard[] {
+  const cards: ActorCard[] = [];
+  let counter = 0;
+  purposes.forEach((purpose, pIdx) => {
+    const count = pIdx === 0 ? 2 : 1;
+    for (let i = 0; i < count; i += 1) {
+      counter += 1;
+      const seed = ACTOR_SEED[(counter - 1) % ACTOR_SEED.length];
+      cards.push({
+        id: `actor-${counter}`,
+        index: counter,
+        purposeId: purpose.id,
+        title: seed.title,
+        content: seed.content,
+      });
+    }
+  });
+  return cards;
+}
+
+function buildBehaviorCards(actors: ActorCard[]): BehaviorDriverCard[] {
+  const cards: BehaviorDriverCard[] = [];
+  let counter = 0;
+  actors.forEach((actor, aIdx) => {
+    const count = aIdx % 2 === 0 ? 2 : 1;
+    for (let i = 0; i < count; i += 1) {
+      counter += 1;
+      const seed = BEHAVIOR_SEED[(counter - 1) % BEHAVIOR_SEED.length];
+      cards.push({
+        id: `behavior-${counter}`,
+        index: counter,
+        actorId: actor.id,
+        expectedBehavior: seed.expectedBehavior,
+        driver: seed.driver,
+      });
+    }
+  });
+  return cards;
+}
+
+function buildNarrativeCards(behaviors: BehaviorDriverCard[]): NarrativeCard[] {
+  const cards: NarrativeCard[] = [];
+  let counter = 0;
+  behaviors.forEach((behavior, bIdx) => {
+    const count = bIdx % 2 === 0 ? 2 : 1;
+    for (let i = 0; i < count; i += 1) {
+      counter += 1;
+      const seed = NARRATIVE_SEED[(counter - 1) % NARRATIVE_SEED.length];
+      cards.push({
+        id: `narrative-${counter}`,
+        index: counter,
+        driverId: behavior.id,
+        title: seed.title,
+        reason: seed.reason,
+      });
+    }
+  });
+  return cards;
+}
+
+function buildFinalAnswer(): string {
+  return `综合本次 6 步法推演结果，可以得到如下战略要点：
+
+1. **目的**：以品牌权威认知为锚点，在专业人群中建立可信表达。
+2. **行为体**：依靠 KOL、官方账号矩阵、深度创作者三类协同发声。
+3. **预期行为与驱动因素**：通过专业内容激发主动传播与延伸讨论，形成圈层共振。
+4. **叙事**：以"在噪音中识别真实信号"为核心叙事线，串联整个传播节奏。
+
+后续可基于该推演继续生成传播节奏、渠道分工与内容资产清单。`;
+}
+
+export function buildInitialAssistantMessage(): SixStepMessage {
+  return {
+    id: `assistant-${Date.now()}`,
+    role: 'assistant',
+    content: '',
+    timestamp: new Date(),
+    stages: {},
+    finalAnswer: '',
+    mainStepStatus: { info: 'pending', sixstep: 'pending', final: 'pending' },
+    subStepStatus: { purpose: 'pending', actor: 'pending', behavior: 'pending', narrative: 'pending' },
+  };
+}
+
+interface RunOptions {
+  onUpdate: (message: SixStepMessage) => void;
+  onComplete?: () => void;
+}
+
+/**
+ * 模拟 6 步法推演的全过程：信息准备 → 6 步法（4 个阶段） → 最终结果。
+ *
+ * 通过分阶段写入 thinking 文本和卡片，模拟真实流式生成效果。
+ */
+export function runSixStepDeduction(message: SixStepMessage, options: RunOptions): SixStepMockController {
+  let cancelled = false;
+  const timers: number[] = [];
+
+  const wait = (ms: number) =>
+    new Promise<void>((resolve) => {
+      const id = window.setTimeout(() => {
+        resolve();
+      }, ms);
+      timers.push(id);
+    });
+
+  const setMain = (key: MainStepKey, status: StepStatus) => {
+    message.mainStepStatus = { ...(message.mainStepStatus ?? { info: 'pending', sixstep: 'pending', final: 'pending' }), [key]: status };
+    if (status === 'running') {
+      message.currentMainStep = key;
+    }
+  };
+
+  const setSub = (key: SubStepKey, status: StepStatus) => {
+    message.subStepStatus = {
+      ...(message.subStepStatus ?? { purpose: 'pending', actor: 'pending', behavior: 'pending', narrative: 'pending' }),
+      [key]: status,
+    };
+    if (status === 'running') {
+      message.currentSubStep = key;
+    }
+  };
+
+  const emit = () => {
+    if (cancelled) return;
+    options.onUpdate({ ...message, stages: { ...message.stages } });
+  };
+
+  const typeInto = async (text: string, write: (chunk: string) => void) => {
+    const step = 4;
+    for (let i = 0; i <= text.length; i += step) {
+      if (cancelled) return;
+      write(text.slice(0, i));
+      emit();
+      await wait(TYPE_INTERVAL);
+    }
+    if (!cancelled) {
+      write(text);
+      emit();
+    }
+  };
+
+  const promise = (async () => {
+    setMain('info', 'running');
+    emit();
+    await wait(800);
+    if (cancelled) return;
+    setMain('info', 'done');
+    setMain('sixstep', 'running');
+    emit();
+    await wait(STAGE_GAP);
+
+    setSub('purpose', 'running');
+    message.stages = { ...message.stages, purpose: { thinking: '', cards: [], complete: false } };
+    emit();
+    await typeInto(PURPOSE_THINKING, (chunk) => {
+      message.stages = { ...message.stages, purpose: { ...(message.stages?.purpose as any), thinking: chunk } };
+    });
+    if (cancelled) return;
+    const purposes = buildPurposeCards();
+    for (const card of purposes) {
+      if (cancelled) return;
+      const existing = message.stages?.purpose?.cards ?? [];
+      message.stages = { ...message.stages, purpose: { ...(message.stages?.purpose as any), cards: [...existing, card] } };
+      emit();
+      await wait(280);
+    }
+    message.stages = { ...message.stages, purpose: { ...(message.stages?.purpose as any), complete: true } };
+    setSub('purpose', 'done');
+    emit();
+    await wait(STAGE_GAP);
+
+    setSub('actor', 'running');
+    message.stages = { ...message.stages, actor: { thinking: '', cards: [], complete: false } };
+    emit();
+    await typeInto(ACTOR_THINKING, (chunk) => {
+      message.stages = { ...message.stages, actor: { ...(message.stages?.actor as any), thinking: chunk } };
+    });
+    if (cancelled) return;
+    const actors = buildActorCards(purposes);
+    for (const card of actors) {
+      if (cancelled) return;
+      const existing = message.stages?.actor?.cards ?? [];
+      message.stages = { ...message.stages, actor: { ...(message.stages?.actor as any), cards: [...existing, card] } };
+      emit();
+      await wait(220);
+    }
+    message.stages = { ...message.stages, actor: { ...(message.stages?.actor as any), complete: true } };
+    setSub('actor', 'done');
+    emit();
+    await wait(STAGE_GAP);
+
+    setSub('behavior', 'running');
+    message.stages = { ...message.stages, behavior: { thinking: '', cards: [], complete: false } };
+    emit();
+    await typeInto(BEHAVIOR_THINKING, (chunk) => {
+      message.stages = { ...message.stages, behavior: { ...(message.stages?.behavior as any), thinking: chunk } };
+    });
+    if (cancelled) return;
+    const behaviors = buildBehaviorCards(actors);
+    for (const card of behaviors) {
+      if (cancelled) return;
+      const existing = message.stages?.behavior?.cards ?? [];
+      message.stages = { ...message.stages, behavior: { ...(message.stages?.behavior as any), cards: [...existing, card] } };
+      emit();
+      await wait(200);
+    }
+    message.stages = { ...message.stages, behavior: { ...(message.stages?.behavior as any), complete: true } };
+    setSub('behavior', 'done');
+    emit();
+    await wait(STAGE_GAP);
+
+    setSub('narrative', 'running');
+    message.stages = { ...message.stages, narrative: { thinking: '', cards: [], complete: false } };
+    emit();
+    await typeInto(NARRATIVE_THINKING, (chunk) => {
+      message.stages = { ...message.stages, narrative: { ...(message.stages?.narrative as any), thinking: chunk } };
+    });
+    if (cancelled) return;
+    const narratives = buildNarrativeCards(behaviors);
+    for (const card of narratives) {
+      if (cancelled) return;
+      const existing = message.stages?.narrative?.cards ?? [];
+      message.stages = { ...message.stages, narrative: { ...(message.stages?.narrative as any), cards: [...existing, card] } };
+      emit();
+      await wait(200);
+    }
+    message.stages = { ...message.stages, narrative: { ...(message.stages?.narrative as any), complete: true } };
+    setSub('narrative', 'done');
+    setMain('sixstep', 'done');
+    setMain('final', 'running');
+    emit();
+    await wait(STAGE_GAP);
+
+    if (cancelled) return;
+    await typeInto(buildFinalAnswer(), (chunk) => {
+      message.finalAnswer = chunk;
+    });
+    if (cancelled) return;
+    setMain('final', 'done');
+    message.currentMainStep = undefined;
+    message.currentSubStep = undefined;
+    emit();
+    options.onComplete?.();
+  })();
+
+  return {
+    message,
+    stop: () => {
+      cancelled = true;
+      timers.forEach((t) => window.clearTimeout(t));
+    },
+    promise,
+  };
+}
diff --git a/web-code/components/angentchat/styles.css b/web-code/components/angentchat/styles.css
new file mode 100644
index 00000000..49a120b9
--- /dev/null
+++ b/web-code/components/angentchat/styles.css
@@ -0,0 +1,179 @@
+@keyframes sixstep-ant-march {
+  to {
+    stroke-dashoffset: -24;
+  }
+}
+
+.sixstep-ant-line {
+  stroke-dasharray: 6 6;
+  animation: sixstep-ant-march 0.7s linear infinite;
+}
+
+@keyframes sixstep-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.55);
+  }
+  50% {
+    box-shadow: 0 0 0 8px rgba(56, 189, 248, 0);
+  }
+}
+
+.sixstep-pulse {
+  animation: sixstep-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes sixstep-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.sixstep-shimmer-text {
+  background-image: linear-gradient(
+    90deg,
+    rgba(148, 163, 184, 0.55) 0%,
+    rgba(248, 250, 252, 1) 45%,
+    rgba(148, 163, 184, 0.55) 100%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: sixstep-shimmer 2s linear infinite;
+}
+
+.sixstep-shimmer-text-light {
+  background-image: linear-gradient(
+    90deg,
+    rgba(220, 38, 38, 0.45) 0%,
+    rgba(190, 18, 60, 0.95) 45%,
+    rgba(220, 38, 38, 0.45) 100%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: sixstep-shimmer 2s linear infinite;
+}
+
+@keyframes sixstep-spin-soft {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.sixstep-spin-soft {
+  animation: sixstep-spin-soft 1.4s linear infinite;
+}
+
+@keyframes sixstep-fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.sixstep-fade-up {
+  animation: sixstep-fade-up 0.32s ease-out both;
+}
+
+.sixstep-resize-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 6px;
+  cursor: col-resize;
+  user-select: none;
+  z-index: 10;
+}
+
+.sixstep-resize-handle::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 2px;
+  height: 36px;
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.4);
+  transition: background 0.2s;
+}
+
+.sixstep-resize-handle:hover::after {
+  background: rgba(56, 189, 248, 0.8);
+}
+
+@keyframes sixstep-node-pop {
+  0% {
+    opacity: 0;
+    transform: scale(0.4);
+    filter: drop-shadow(0 0 0 rgba(56, 189, 248, 0));
+  }
+  60% {
+    opacity: 1;
+    transform: scale(1.18);
+    filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.8));
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+    filter: drop-shadow(0 0 0 rgba(56, 189, 248, 0));
+  }
+}
+
+.sixstep-node-pop {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: sixstep-node-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+@keyframes sixstep-ring-burst {
+  0% {
+    opacity: 0.85;
+    r: 0;
+    stroke-width: 4;
+  }
+  100% {
+    opacity: 0;
+    r: 60;
+    stroke-width: 0.5;
+  }
+}
+
+.sixstep-ring-burst {
+  animation: sixstep-ring-burst 0.7s ease-out forwards;
+  fill: none;
+}
+
+.sixstep-canvas-grab {
+  cursor: grab;
+}
+
+.sixstep-canvas-grabbing {
+  cursor: grabbing;
+}
+
+.sixstep-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  transition: background 0.2s, color 0.2s;
+}
+
+.sixstep-minimap-rect {
+  fill: rgba(56, 189, 248, 0.18);
+  stroke: rgba(56, 189, 248, 0.9);
+  stroke-width: 1;
+}
diff --git a/web-code/components/angentchat/types.ts b/web-code/components/angentchat/types.ts
new file mode 100644
index 00000000..4b8276c7
--- /dev/null
+++ b/web-code/components/angentchat/types.ts
@@ -0,0 +1,161 @@
+export type MainStepKey = 'info' | 'sixstep' | 'final';
+export type SubStepKey = 'purpose' | 'actor' | 'behavior' | 'narrative';
+
+export type StepStatus = 'pending' | 'running' | 'done';
+
+export interface PurposeCard {
+  id: string;
+  index: number;
+  title: string;
+  reason: string;
+}
+
+export interface ActorCard {
+  id: string;
+  index: number;
+  purposeId: string;
+  title: string;
+  content: string;
+}
+
+export interface BehaviorDriverCard {
+  id: string;
+  index: number;
+  actorId: string;
+  expectedBehavior: string;
+  driver: string;
+}
+
+export interface NarrativeCard {
+  id: string;
+  index: number;
+  driverId: string;
+  title: string;
+  reason: string;
+}
+
+export interface PurposeStageData {
+  thinking: string;
+  cards: PurposeCard[];
+  complete: boolean;
+}
+
+export interface ActorStageData {
+  thinking: string;
+  cards: ActorCard[];
+  complete: boolean;
+}
+
+export interface BehaviorStageData {
+  thinking: string;
+  cards: BehaviorDriverCard[];
+  complete: boolean;
+}
+
+export interface NarrativeStageData {
+  thinking: string;
+  cards: NarrativeCard[];
+  complete: boolean;
+}
+
+export interface InfoStageData {
+  content: string;
+  complete: boolean;
+}
+
+export interface SixStepStages {
+  info?: InfoStageData;
+  purpose?: PurposeStageData;
+  actor?: ActorStageData;
+  behavior?: BehaviorStageData;
+  narrative?: NarrativeStageData;
+}
+
+export type SelectableMcpKey = 'purpose' | 'actor' | 'behavior_factor' | 'narrative';
+
+export interface ExpertCard {
+  id: string;
+  backendId?: string;
+  name: string;
+  detail: string;
+  avatarUrl?: string;
+  title?: string;
+  tags?: string[];
+  isCustom?: boolean;
+}
+
+export interface ExpertMatchData {
+  status: 'idle' | 'searching' | 'creating' | 'ready' | 'confirmed' | 'error';
+  thinking: string;
+  experts: ExpertCard[];
+  selectedExpertId?: string;
+  selectedMcps?: SelectableMcpKey[];
+  errorMessage?: string;
+  searchedAt?: number;
+}
+
+export type SixStepPhase =
+  | 'idle'
+  | 'intent-detecting'
+  | 'expert-match'
+  | 'expert-confirm'
+  | 'generate'
+  | 'paused'
+  | 'completed'
+  | 'clarifying'
+  | 'follow-up';
+
+/** SSE error_log / error 事件归一后的错误记录，积累在 SixStepMessage.errors 中。 */
+export interface StreamErrorItem {
+  errorId: string;
+  taskId?: string;
+  level: 'warning' | 'error';
+  source: 'orchestrator' | 'mcp' | 'skill' | 'llm' | 'network';
+  mcpKey?: string;
+  stepName?: string;
+  skillKey?: string;
+  skillName?: string;
+  message: string;
+  recoverable?: boolean;
+  createdAt: number;
+}
+
+/** 后端 step_end 的原始字段，用于 continue_analysis 时回传 last_steps */
+export interface BackendStepResult {
+  key: string;
+  name?: string;
+  status: string;
+  thinking?: string;
+  structured_outputs?: Record<string, unknown>[];
+  markdown?: string;
+  references?: Record<string, unknown>[];
+}
+
+export interface SixStepMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content?: string;
+  timestamp: Date;
+  outputFormat?: 'structured' | 'markdown';
+  markdownContent?: string;
+  stages?: SixStepStages;
+  finalAnswer?: string;
+  mainStepStatus?: Record<MainStepKey, StepStatus>;
+  subStepStatus?: Record<SubStepKey, StepStatus>;
+  currentSubStep?: SubStepKey;
+  currentMainStep?: MainStepKey;
+  phase?: SixStepPhase;
+  expertMatch?: ExpertMatchData;
+  selectedExpert?: ExpertCard;
+  selectedMcps?: SelectableMcpKey[];
+  intent?: { name: string; confidence?: number; reason?: string };
+  clarifyQuestion?: string;
+  /** 后端原始步骤数据，paused 后继续时作为 last_steps 传回后端 */
+  rawSteps?: BackendStepResult[];
+  /** 本轮是从哪个步骤继续的（resume/rerun 事件携带），供 UI 显示"继续自…" */
+  resumedFrom?: string;
+  /** 实际用于分析的问题（revise_input_continue 后更新为新问题） */
+  effectiveUserInput?: string;
+  /** 本轮累积的错误/警告列表（error_log 与 error 事件均追加于此） */
+  errors?: StreamErrorItem[];
+}
diff --git a/web-code/components/qa/ActionChat.tsx b/web-code/components/qa/ActionChat.tsx
new file mode 100644
index 00000000..587e5958
--- /dev/null
+++ b/web-code/components/qa/ActionChat.tsx
@@ -0,0 +1,2885 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  GitCompare,
+  MessageSquare,
+  CheckCircle,
+  AlertCircle,
+  ArrowDown,
+  ExternalLink,
+  Square,
+  X,
+  BookOpen,
+  User2Icon,
+} from 'lucide-react';
+import { Dialog, Select, Slider } from 'tdesign-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import { PageType } from '../../components/Sidebar';
+import { ChatMessage, EmptyChatState, QAAvatar, QAComposer, QASingleRagTrace, QAThinkingRound, QAThinkingTrace, RetrievalThinkingTrace, SingleRagAnswer, TypingIndicator } from './QACommon';
+import GeneralQAHeader from './GeneralQAHeader';
+import GeneralQAConfigSidebar from './GeneralQAConfigSidebar';
+import type { ComparePane, CompareResult, KnowledgeBaseChunk, Message, QAMode, qaModeItem, SourceItem, stateItem, ToolCallData, ViewMode } from './GeneralQA.types';
+import {
+  chatDataJSON,
+  createComparePane,
+  createMockSingleRagMessages,
+  createMultiRoundStreamTrace,
+  createThinkingTrace,
+  extractJsonObjects,
+  mapDocsToSources,
+  mapReferenceToSource,
+  parseSingleRagStream,
+  platformTypeChange,
+} from './GeneralQA.mock';
+import { requestCrudService } from '@/service/request-axios-service';
+
+/**
+ * 通用问答组件
+ * 支持单轮RAG、多轮RAG、深度检索及结果对比功能
+ * @param onNavigate - 页面导航函数
+ * @param initialMode - 初始模式（可选）
+ */
+
+const zncmUrl = import.meta.env.VITE_API_BASE_URL || '';
+const chatUrl = import.meta.env.VITE_AIPI_CHAT_URL || '';
+const generateUrl = import.meta.env.VITE_AIPI_GENERATE_CHAT_URL || '';
+const taskChatUrl = import.meta.env.VITE_AIPI_TASK_CHAT_URL || '';
+const knowledgeUrl = import.meta.env.VITE_AIPI_KNOWLEDGE_URL;
+const service = requestCrudService;
+const qaModeList = [
+  { value: 'hx-search' as const, label: '画像检索', icon: User2Icon, desc: '检索相关账号' },
+];
+const ActionChat: React.FC<{ onNavigate: (page: PageType) => void; initialMode?: string }> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 状态管理
+  // 视图模式：单一模式或对比模式
+  const [viewMode, setViewMode] = useState<ViewMode>('single');
+  // 问答模式：单轮RAG、多轮RAG、深度检索
+  const [qaMode, setQaMode] = useState<QAMode>('single-round');
+  // 对比模式下的左侧模式
+  const [compareLeftMode, setCompareLeftMode] = useState<QAMode>('single-round');
+  // 对比模式下的右侧模式
+  const [compareRightMode, setCompareRightMode] = useState<QAMode>('multi-round');
+
+  // 知识范围设置
+  const [knowledgeScope, setKnowledgeScope] = useState<'all' | 'specific-kb' | 'specific-domain'>('all');
+
+  // 回答偏好设置
+  const [answerStyle, setAnswerStyle] = useState<'concise' | 'detailed'>('detailed');
+  const [showSources, setShowSources] = useState(true);
+  const [showProcess, setShowProcess] = useState(false);
+
+  // 对比设置
+  const [compareLayout, setCompareLayout] = useState<'horizontal' | 'vertical'>('horizontal');
+  const [autoSummarizeDiff, setAutoSummarizeDiff] = useState(true);
+  const [recommendBetter, setRecommendBetter] = useState(true);
+
+  // 消息和结果状态
+  // `messages` 驱动单一模式聊天区；`compareResult` 驱动对比模式左右面板。
+  // `isPreConnectLoading` 表示请求已发起但还没拿到可展示的 assistant 消息，用于显示“正在连接/生成”的占位状态。
+  const [messages, setMessages] = useState<Message[]>([]);
+  // 用户当前输入的文本内容，用于绑定输入框
+  const [inputValue, setInputValue] = useState('');
+  // 是否正在处理请求（包含真实请求和模拟请求）
+  const [isLoading, setIsLoading] = useState(false);
+  // 是否处于"连接中"状态，表示已发起请求但还未收到可展示的响应
+  const [isPreConnectLoading, setIsPreConnectLoading] = useState(false);
+  // 存储发生的错误信息，用于显示错误提示
+  const [error, setError] = useState<string | null>(null);
+  // 对比模式下的结果数据，包含左右两侧的回答和来源信息
+  const [compareResult, setCompareResult] = useState<CompareResult[]>([]);
+  // 对比模式下用户输入的问题内容，用于左右对比时的统一输入
+  const [compareUserInput, setCompareUserInput] = useState('');
+  // 是否折叠左侧配置面板，true 为折叠，false 为展开
+  const [isLeftSidebarCollapsed, setIsLeftSidebarCollapsed] = useState(false);
+  // 是否启用自动滚动，当用户手动滚动时会自动关闭
+  const [isAutoScrollEnabled, setIsAutoScrollEnabled] = useState(true);
+  // 是否显示"滚动到底部"按钮，当有未读消息且用户已滚动时显示
+  const [showScrollToBottom, setShowScrollToBottom] = useState(false);
+  // 当前选中的引用来源，用于显示引用详情弹窗
+  const [selectedCitation, setSelectedCitation] = useState<SourceItem | null>(null);
+  const [editingMessageId, setEditingMessageId] = useState<string | null>(null);
+  const [editingThinking, setEditingThinking] = useState('');
+  const [editingAnswer, setEditingAnswer] = useState('');
+  // 模型参数设置弹窗状态。
+  // 这些值会进入单轮 RAG 的真实请求体；模拟流仍复用同一套 UI，方便接口恢复后无缝切换。
+  const [isModelSettingsOpen, setIsModelSettingsOpen] = useState(false);
+  const [modelName, setModelName] = useState('OpenAI3');
+  const [scoreThreshold, setScoreThreshold] = useState(0.5);
+  const [temperature, setTemperature] = useState(0.3);
+
+  // 当模型正在生成时，如果用户切换模式或跳转页面，先把原动作暂存到 ref，待用户确认停止后再执行。
+  // 使用 ref 而不是 state 可以避免弹窗确认过程触发额外渲染，也不会被闭包中的旧状态影响。
+  const pendingActionRef = useRef<(() => void) | null>(null);
+
+  // 防止 Enter keydown 和按钮 click 在 React 状态更新前重复触发提交。
+  const submitLockRef = useRef(false);
+
+  // 真实流式请求的 reader 句柄，用于“停止生成”时取消浏览器流读取。
+  const readerRef = useRef<any>(null);
+  // 对比模式会同时启动左右两路请求，因此分别保存 reader，保证可以单独停止某一侧生成。
+  const compareReaderRef = useRef<{
+    left: any;
+    right: any;
+  }>({ left: null, right: null });
+  // 多轮接口创建任务后会返回 task_id，这里预留给后续“按任务取消/查询状态”等能力。
+  const taskIdRef = useRef<string | null>(null);
+
+  // 本地模拟流没有真实 reader，因此用停止标记在异步循环中主动中断。
+  const mockSingleRoundStoppedRef = useRef(false);
+  const mockMultiRoundStoppedRef = useRef(false);
+  const chatListRef = useRef<HTMLDivElement | null>(null);
+  const userId = useRef(387); // 用户id
+  const qaType = useRef('ACTION'); // 问答类型
+  const chatDataId = useRef(); // 聊天窗口id
+  const compareChatId = useRef(); // 对比对话记录id
+
+  // 检索过程展示状态
+  const [searchProcess, setSearchProcess] = useState({
+    currentMode: '单轮RAG',
+    rounds: 1,
+    hits: 5,
+    queryRewrite: '',
+  });
+
+  const state = useRef<stateItem>({
+    compareIndex: 0,
+    compareId: '',
+    messageList: [],
+    compareResult: []
+  })
+
+  /**
+   * 处理单轮 RAG 问答请求
+   * 
+   * 单轮 RAG 的处理流程：
+   * 1. 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
+   * 2. API 返回 SSE 流式响应，包含多个 JSON 对象
+   * 3. 逐个解析流式 JSON，提取 answer 和 docs 字段
+   * 4. 通过 applyAnswerToken 将流式 token 追加到消息的 thinkingMarkdown/answerMarkdown
+   * 5. 实时更新消息来源（sources）和检索统计（searchProcess）
+   * 
+   * @param query - 用户输入的问题文本
+   */
+  const handleSingleRoundRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    // 清空之前的错误信息
+    setError(null);
+    // 标记开始加载，禁用提交按钮防止重复点击
+    setIsLoading(true);
+    // 标记"连接中"状态，显示加载占位符
+    setIsPreConnectLoading(true);
+    // 用于存储当前 assistant 消息的 ID，以便后续更新该消息内容
+    let assistantId = '';
+
+    // 标志位：当前处理的 token 是否处于 <think>... 标签内（解析思考过程）
+    let inThink = false;
+    // 标志位：是否已经遇到过 <think> 标签开始解析思考内容
+    let thinkStarted = false;
+
+    /**
+     * 将流式接收到的 token 应用到对应消息的 singleRagTrace 中
+     * 该函数会解析 token 中的 <think>... 标签，将思考过程和回答分开存储
+     * @param token - 从流中接收到的文本片段
+     */
+    const applyAnswerToken = (token: string) => {
+      const mesItem = state.current.messageList[1];
+      // 获取当前消息的思考和回答内容
+      let thinkingMarkdown = mesItem.singleRagTrace.thinkingMarkdown;
+      let answerMarkdown = mesItem.singleRagTrace.answerMarkdown;
+      let thinkingComplete = mesItem.singleRagTrace.thinkingComplete || false;
+      // 剩余未处理的 token 内容
+      let remaining = token;
+      console.log('remaining', remaining)
+      // 当前处于 <think> 标签内（解析思考过程），查找结束标签 
+      while (remaining) {
+        if (inThink) {
+          const endIdx = remaining.indexOf('</think>');
+          if (endIdx === -1) {
+            thinkingMarkdown += remaining;
+            remaining = '';
+          } else {
+            thinkingMarkdown += remaining.slice(0, endIdx);
+            remaining = remaining.slice(endIdx + '</think>'.length);
+            inThink = false;
+            thinkingComplete = true;
+          }
+        } else {
+          const startIdx = remaining.indexOf('<think>');
+          console.log('startIdx', startIdx)
+          if (startIdx === -1) {
+            answerMarkdown += remaining;
+            remaining = '';
+          } else {
+            answerMarkdown += remaining.slice(0, startIdx);
+            remaining = remaining.slice(startIdx + '<think>'.length);
+            inThink = true;
+            thinkStarted = true;
+          }
+        }
+      }
+      state.current.messageList[1] = {
+        ...mesItem,
+        singleRagTrace: {
+          ...mesItem.singleRagTrace,
+          // 更新思考和回答的 markdown 内容
+          thinkingMarkdown,
+          answerMarkdown,
+          // 只有当已经开始解析思考内容时才更新 thinkingComplete 标志
+          thinkingComplete: thinkStarted ? thinkingComplete : true,
+        },
+      }
+      if (!side) {
+        setMessages((prev) => prev.map((msg) => {
+          // 跳过不是当前 assistant 消息或没有 singleRagTrace 的消息
+          if (msg.id !== assistantId || !msg.singleRagTrace) return msg;
+          // 返回更新后的消息对象，保留 singleRagTrace 中的所有字段
+          return {
+            ...state.current.messageList[1],
+          };
+        }));
+      } else {
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            singleRagTrace: {
+              title: '大模型',
+              thinkingMarkdown,
+              answerMarkdown,
+              thinkingComplete: thinkStarted ? thinkingComplete : true,
+            },
+          };
+        });
+      }
+    };
+
+    const updatePane = (side: 'left' | 'right', updater: (pane: ComparePane) => ComparePane) => {
+      setCompareResult((prev) => {
+        if (!prev) return prev;
+        return {
+          ...prev,
+          [side]: updater(prev[side]),
+        };
+      });
+    };
+
+    try {
+      // 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
+      const response = await fetch(`${chatUrl}/chat/knowledge_base_chat_tiaoshi`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        // 请求体包含查询内容、知识库名称、检索参数、模型配置等
+        body: JSON.stringify({
+          query,                        // 用户输入的问题
+          knowledge_base_name: [],      // 知识库名称列表，空数组表示使用所有知识库
+          top_k: 5,                     // 返回最相似的 5 条结果
+          score_threshold: scoreThreshold, // 相似度阈值，过滤低质量检索结果
+          history: [],                  // 对话历史，用于多轮对话
+          stream: true,                 // 启用流式响应
+          model_name: modelName,         // 使用的模型名称
+          temperature,                   // 生成温度，控制随机性
+          prompt_name: 'default',        // 使用的提示词模板
+          local_doc_url: false,         // 是否返回本地文档 URL
+        }),
+      });
+
+      // 检查 HTTP 响应状态
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      // 确保响应体存在（SSE 流需要 body）
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      // 收到有效响应后，关闭"连接中"状态，开始显示实际内容
+      setIsPreConnectLoading(false);
+
+      // 生成唯一 ID 用于标识这条 assistant 消息
+      assistantId = `assistant-${Date.now()}`;
+      // 初始化思考过程追踪对象
+      const initialTrace: QASingleRagTrace = {
+        title: '单轮 RAG 思考过程',
+        thinkingMarkdown: '', // 思考过程内容
+        answerMarkdown: '',    // 最终回答内容
+        thinkingComplete: false, // 思考是否完成
+      };
+      const messageItem: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        singleRagTrace: initialTrace,
+        sources: [], // 初始为空，随着检索结果更新
+      }
+      state.current.messageList.push(messageItem); // 数据存储
+      // 将 assistant 消息添加到消息列表中
+      setMessages((prev) => [...prev, messageItem]);
+
+      // 获取响应体的流式读取器
+      const reader = response.body.getReader();
+      // 保存 reader 引用，用于"停止生成"功能
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      // 创建文本解码器，将二进制数据转换为字符串
+      const decoder = new TextDecoder();
+      // buffer 用于暂存未完成的 JSON 片段
+      let buffer = '';
+      let docsList: any[] = [];
+      try {
+        // 持续读取流数据，直到流结束
+        while (true) {
+          // 读取下一个数据块
+          const { done, value } = await reader.read();
+          // done 为 true 时表示流已结束
+          if (done) {
+            console.log('聊天记录', state.current.messageList);
+            chatHistoryAddSearch();
+            break;
+          }
+
+          // 将二进制数据解码并追加到 buffer
+          buffer += decoder.decode(value, { stream: true });
+          // 从 buffer 中提取完整的 JSON 对象
+          const extracted = extractJsonObjects(buffer);
+          if (buffer.includes('docs')) {
+            try {
+              docsList = chatDataJSON(buffer).docsList || [];
+            } catch (error: any) {
+              console.log(error);
+            }
+          }
+          // 剩余无法解析的内容保留到下次处理
+          buffer = extracted.rest;
+
+          // 遍历所有提取到的 JSON 对象
+          for (const jsonText of extracted.objects) {
+            try {
+              // 解析知识库返回的 JSON 片段
+              const parsed = parseKnowledgeBaseChunk(jsonText);
+              // 如果有回答内容，追加到消息的 answerMarkdown
+              if (typeof parsed.answer === 'string') {
+                applyAnswerToken(parsed.answer);
+              }
+              // 如果有检索文档，更新消息的来源信息
+              if (parsed.docs) {
+                // 将 docs 转换为 sources 格式
+                const mappedDocs = docsList.map((item: any) => ({
+                  title: item.m_title,
+                  type: item.source1,
+                  snippet: item.m_content,
+                  source: item.source1,
+                  time: item.m_publish,
+                  url: item.recUuid,
+                  content: item.m_content || '',
+                }));
+                // 更新检索统计信息
+                setSearchProcess((prev) => ({ ...prev, hits: prev.hits + mappedDocs.length }));
+                state.current.messageList[1].sources = mappedDocs;
+                // 更新消息的来源列表
+                if (!side) {
+                  setMessages((prev) => prev.map((msg) => (
+                    msg.id === assistantId ? { ...msg, sources: mappedDocs } : msg
+                  )));
+                } else {
+                  updatePane(side, (pane) => ({ ...pane, sources: mappedDocs }));
+                }
+              }
+            } catch (parseError) {
+              // 解析错误不影响主流程，记录日志继续处理
+              console.error('单轮RAG流式JSON解析错误:', parseError);
+            }
+          }
+        }
+      } finally {
+        // 流读取完成后，释放 reader 锁并清空引用
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      // 请求失败处理
+      console.error('单轮RAG请求失败:', runError);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      state.current.messageList = [];
+    }
+  };
+
+  /**
+ * 处理单轮 RAG 问答请求
+ * 
+ * 单轮 RAG 的处理流程：
+ * 1. 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
+ * 2. API 返回 SSE 流式响应，包含多个 JSON 对象
+ * 3. 逐个解析流式 JSON，提取 answer 和 docs 字段
+ * 4. 通过 applyAnswerToken 将流式 token 追加到消息的 thinkingMarkdown/answerMarkdown
+ * 5. 实时更新消息来源（sources）和检索统计（searchProcess）
+ * 
+ * @param query - 用户输入的问题文本
+ */
+  const chatRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    // 清空之前的错误信息
+    setError(null);
+    // 标记开始加载，禁用提交按钮防止重复点击
+    setIsLoading(true);
+    // 标记"连接中"状态，显示加载占位符
+    setIsPreConnectLoading(true);
+    // 用于存储当前 assistant 消息的 ID，以便后续更新该消息内容
+    let assistantId = '';
+
+    // 标志位：当前处理的 token 是否处于 <think>... 标签内（解析思考过程）
+    let inThink = false;
+    // 标志位：是否已经遇到过 <think> 标签开始解析思考内容
+    let thinkStarted = false;
+
+    /**
+     * 将流式接收到的 token 应用到对应消息的 singleRagTrace 中
+     * 该函数会解析 token 中的 <think>... 标签，将思考过程和回答分开存储
+     * @param token - 从流中接收到的文本片段
+     */
+    const applyAnswerToken = (token: string, side: 'left' | 'right' | null = null) => {
+      let mesItem: any = state.current.messageList[1];
+      if (side === 'left' || side === 'right') {
+        mesItem = state.current.compareResult[state.current.compareIndex][side];
+      }
+      // 获取当前消息的思考和回答内容
+      let thinkingMarkdown = mesItem.singleRagTrace.thinkingMarkdown;
+      let answerMarkdown = mesItem.singleRagTrace.answerMarkdown;
+      let thinkingComplete = mesItem.singleRagTrace.thinkingComplete || false;
+      // 剩余未处理的 token 内容
+      let remaining = token;
+      // console.log('remaining', remaining)
+      // 当前处于 <think> 标签内（解析思考过程），查找结束标签 
+      while (remaining) {
+        if (inThink) {
+          const endIdx = remaining.indexOf('</think>');
+          if (endIdx === -1) {
+            thinkingMarkdown += remaining;
+            remaining = '';
+          } else {
+            thinkingMarkdown += remaining.slice(0, endIdx);
+            remaining = remaining.slice(endIdx + '</think>'.length);
+            inThink = false;
+            thinkingComplete = true;
+          }
+        } else {
+          const startIdx = remaining.indexOf('<think>');
+          if (startIdx === -1) {
+            answerMarkdown += remaining;
+            remaining = '';
+          } else {
+            answerMarkdown += remaining.slice(0, startIdx);
+            remaining = remaining.slice(startIdx + '<think>'.length);
+            inThink = true;
+            thinkStarted = true;
+          }
+        }
+      }
+      if (!side) {
+        state.current.messageList[1] = {
+          ...mesItem,
+          singleRagTrace: {
+            ...mesItem.singleRagTrace,
+            // 更新思考和回答的 markdown 内容
+            thinkingMarkdown,
+            answerMarkdown,
+            // 只有当已经开始解析思考内容时才更新 thinkingComplete 标志
+            thinkingComplete: thinkStarted ? thinkingComplete : true,
+          },
+        }
+        setMessages((prev) => prev.map((msg) => {
+          // 跳过不是当前 assistant 消息或没有 singleRagTrace 的消息
+          if (msg.id !== assistantId || !msg.singleRagTrace) return msg;
+          // 返回更新后的消息对象，保留 singleRagTrace 中的所有字段
+          return {
+            ...state.current.messageList[1],
+          };
+        }));
+      } else {
+        state.current.compareResult[state.current.compareIndex][side].singleRagTrace = {
+          ...mesItem.singleRagTrace,
+          // 更新思考和回答的 markdown 内容
+          thinkingMarkdown,
+          answerMarkdown,
+          // 只有当已经开始解析思考内容时才更新 thinkingComplete 标志
+          thinkingComplete: thinkStarted ? thinkingComplete : true,
+        }
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            singleRagTrace: {
+              title: '大模型',
+              thinkingMarkdown,
+              answerMarkdown,
+              thinkingComplete: thinkStarted ? thinkingComplete : true,
+            },
+          };
+        });
+      }
+    };
+
+    try {
+      // 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
+      const response = await fetch(`${chatUrl}/chat/chat`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        // 请求体包含查询内容、知识库名称、检索参数、模型配置等
+        body: JSON.stringify({
+          query,                        // 用户输入的问题
+          history: [],                  // 对话历史，用于多轮对话
+          stream: true,                 // 启用流式响应
+          model_name: modelName,         // 使用的模型名称
+          temperature,                   // 生成温度，控制随机性
+          prompt_name: 'default',        // 使用的提示词模板
+          max_tokens: 1000
+        }),
+      });
+
+      // 检查 HTTP 响应状态
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      // 确保响应体存在（SSE 流需要 body）
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      // 收到有效响应后，关闭"连接中"状态，开始显示实际内容
+      setIsPreConnectLoading(false);
+
+      // 生成唯一 ID 用于标识这条 assistant 消息
+      assistantId = `assistant-${Date.now()}`;
+      // 初始化思考过程追踪对象
+      const initialTrace: QASingleRagTrace = {
+        title: '大模型思考过程',
+        thinkingMarkdown: '', // 思考过程内容
+        answerMarkdown: '',    // 最终回答内容
+        thinkingComplete: false, // 思考是否完成
+      };
+      const messageItem: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        singleRagTrace: initialTrace,
+        sources: [], // 初始为空，随着检索结果更新
+      }
+      if (!side) {
+        state.current.messageList.push(messageItem);
+        // 将 assistant 消息添加到消息列表中
+        setMessages((prev) => [...prev, messageItem]);
+      } else if (side === 'left' || side === 'right') {
+        state.current.compareResult[state.current.compareIndex][side].singleRagTrace = initialTrace;
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            singleRagTrace: initialTrace,
+          };
+        });
+      }
+
+      // 获取响应体的流式读取器
+      const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
+      // 保存 reader 引用，用于"停止生成"功能
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      // 创建文本解码器，将二进制数据转换为字符串
+      const decoder = new TextDecoder();
+      // buffer 用于暂存未完成的 JSON 片段
+
+      try {
+        // 持续读取流数据，直到流结束
+        while (true) {
+          // 读取下一个数据块
+          const { done, value } = await reader.read();
+          // done 为 true 时表示流已结束
+          if (done) {
+            console.log('聊天记录', state.current.messageList);
+            if (!side) {
+              chatHistoryAddSearch();
+            }
+            break;
+          }
+          applyAnswerToken(value, side);
+        }
+      } finally {
+        // 流读取完成后，释放 reader 锁并清空引用
+        if (readerRef.current) {
+          // readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      // 请求失败处理
+      console.error('单轮RAG请求失败:', runError);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      state.current.messageList = [];
+    }
+  };
+
+  /**
+   * 解析类 JavaScript 对象字符串中的字符串值。
+   *
+   * 后端单轮 RAG 流有时不是严格 JSON，而是 `{answer: '...'}` 这种对象片段。
+   * 该函数只负责把单/双引号包裹的 answer 内容还原成普通字符串，保留换行和转义字符。
+   */
+  const parseLooseStringValue = (rawValue: string): string => {
+    try {
+      return JSON.parse(rawValue) as string;
+    } catch {
+      const trimmedValue = rawValue.trim();
+      if (trimmedValue.startsWith("'") && trimmedValue.endsWith("'")) {
+        return trimmedValue
+          .slice(1, -1)
+          .replace(/\\n/g, '\n')
+          .replace(/\\r/g, '\r')
+          .replace(/\\t/g, '\t')
+          .replace(/\\'/g, "'")
+          .replace(/\\\\/g, '\\');
+      }
+      throw new Error(`无法解析字符串值: ${rawValue}`);
+    }
+  };
+
+  const parseLooseValue = (rawValue: string): unknown => {
+    try {
+      return JSON.parse(rawValue);
+    } catch {
+      return parseLooseStringValue(rawValue);
+    }
+  };
+
+  /**
+   * 将单轮知识库流中的一个对象片段转换为统一数据结构。
+   *
+   * 兼容两类返回：
+   * - 严格 JSON：`{"answer":"..."}` / `{"docs":[...]}`
+   * - 宽松对象：`{answer: '...'}` / `{docs: [...]}`
+   *
+   * 真实接口和本地模拟都走同一个解析函数，确保联调时只需要替换数据源，不需要改 UI 更新逻辑。
+   */
+  const parseKnowledgeBaseChunk = (jsonText: string): KnowledgeBaseChunk => {
+    try {
+      return JSON.parse(jsonText) as KnowledgeBaseChunk;
+    } catch {
+      const objectText = jsonText.trim();
+      const answerMatch = objectText.match(/^\{\s*answer\s*:\s*([\s\S]*)\s*\}$/);
+      if (answerMatch) {
+        const rawValue = answerMatch[1].trim();
+        return { answer: parseLooseStringValue(rawValue) };
+      }
+
+      const docsMatch = objectText.match(/^\{\s*docs\s*:\s*([\s\S]*)\s*\}$/);
+      if (docsMatch) {
+        return { docs: parseLooseValue(docsMatch[1]) as KnowledgeBaseChunk['docs'] };
+      }
+
+      const normalizedText = objectText.replace(/([{,]\s*)(answer|docs)(\s*:)/g, '$1"$2"$3');
+      return JSON.parse(normalizedText) as KnowledgeBaseChunk;
+    }
+  };
+
+  const sleep = (ms: number) => new Promise((resolve) => {
+    window.setTimeout(resolve, ms);
+  });
+  const updatePane = (side: 'left' | 'right', updater: (pane: ComparePane) => ComparePane) => {
+    setCompareResult((prev) => prev.map((msg) => {
+      if (msg.id !== state.current.compareId) return msg
+      return {
+        ...msg,
+        [side]: updater(msg[side]),
+      };
+    }));
+  };
+  /**
+   * 处理多轮真实接口里的工具调用事件。
+   *
+   * `show_text` 用于追加思考或最终回答；`local_search` / `tavily_search` 用于把检索结果填入最近一轮。
+   * 这里保持事件到 UI trace 的单向映射，避免请求层和展示层互相耦合。
+   */
+  const handleToolCall = (toolData: ToolCallData, assistantId: string, side: 'left' | 'right' | null = null) => {
+    let mesItem: any = state.current.messageList[1];
+    if (side === 'left' || side === 'right') {
+      mesItem = state.current.compareResult[state.current.compareIndex][side];
+      console.log('mesItem', mesItem)
+    }
+    const trace = { ...mesItem.thinkingTrace, rounds: [...mesItem.thinkingTrace.rounds] };
+    const lastRound = trace.rounds[trace.rounds.length - 1];
+    switch (toolData.tool_name) {
+      case 'show_text': {
+        const chatText = toolData.tool_input.text || '';
+        if (chatText.includes('<think>')) {
+          const thinkContent = chatText.replace('<think>', '').replace('</think>', '').trim();
+          if (trace.rounds[0].title !== '正在准备检索') {
+            lastRound.queryLoading = false;
+            lastRound.queryShow = lastRound.retrievals.length > 0;
+            trace.rounds.push({
+              id: `round-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+              title: '思考中',
+              thoughtMarkdown: thinkContent,
+              query: '',
+              queryLoading: true,
+              queryShow: true,
+              retrievals: [],
+            });
+          } else {
+            // lastRound.queryLoading = false;
+            trace.rounds[0].title = '思考过程'
+            trace.rounds[0].thoughtMarkdown = thinkContent;
+          }
+        } else {
+          lastRound.queryLoading = false;
+          trace.finalAnswerMarkdown += chatText;
+          trace.thinkingComplete = true;
+        }
+        break;
+      }
+      case 'tavily_search':
+      case 'local_search': {
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as {
+              query?: string;
+              results?: Array<{ title?: string; content?: string; url?: string }>;
+            };
+
+            lastRound.query = result.query || lastRound.query;
+            lastRound.queryLoading = false;
+            lastRound.title = toolData.tool_name === 'local_search' ? '本地知识检索' : '联网检索';
+            lastRound.retrievals = (result.results || []).map((item, idx) => ({
+              id: `${toolData.tool_name}-${idx}`,
+              title: item.title || '未命名结果',
+              content: item.content || '',
+              source: item.url || '',
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        }
+        break;
+      }
+      case 'google_search': { // 处理多轮检索
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as {
+              organic: Array<{ title?: string; content?: string; url?: string; recUuid?: string; publish_time?: string }>;
+            };
+            lastRound.queryLoading = false;
+            lastRound.title = '思考过程';
+            lastRound.retrievals = (result.organic || []).map((item, idx) => ({
+              id: item.recUuid,
+              title: item.title || '未命名结果',
+              content: item.content || '',
+              source: item.recUuid || '',
+              time: item.publish_time,
+              recUuid: item.recUuid,
+              type: 'more'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.q) {
+          lastRound.query = toolData.tool_input.q;
+        }
+        break;
+      }
+      case 'getTaskLikeTop': { // 任务检索
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as {
+              data: Array<{ taskName?: string; overview?: string; id?: number; keywords?: string; taskDirection?: string; taskLevel?: number; taskStartDate: string; taskEndDate: string }>;
+            }
+            console.log('result', result);
+            lastRound.queryLoading = false;
+            lastRound.title = '思考过程';
+            lastRound.retrievals = (result.data || []).map((item, idx) => ({
+              id: String(item.id),
+              title: item.taskName || '未命名结果',
+              content: item.overview || '',
+              keywords: item.keywords,
+              taskDirection: item.taskDirection,
+              time: `${item.taskStartDate}-${item.taskEndDate}`,
+              type: 'task'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword) {
+          lastRound.query = toolData.tool_input.keyword;
+        }
+        break;
+      }
+      case 'search_user_profile': { // 画像检索
+        lastRound.title = '靶标平台画像库';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; page_content?: string; 平台?: string; 类型?: string; 粉丝数?: number; }>;
+            console.log('result', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.page_content || '',
+              platform: platformTypeChange(item.平台) || '',
+              fans: item.粉丝数 || 0,
+              type: 'hx'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
+          lastRound.queryTitle = '检索词';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query || toolData.tool_input.user_fig;
+        }
+        break;
+      }
+      case 'get_taiwan_news': { // 查找台湾热点新闻
+        lastRound.title = '台湾热点新闻';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
+            console.log('get_taiwan_news', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.content || '',
+              platform: platformTypeChange(item.platform) || '',
+              comment_count: item.comment_count,
+              message_id: item.message_id,
+              time: item.publish_time,
+              type: 'taiwan_news'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
+          lastRound.queryTitle = '搜索台湾新闻';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query;
+        }
+        break;
+      }
+      case 'search_keyword_taiwan_news': { // 查找台湾热点新闻
+        lastRound.title = '台湾热点新闻';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
+            console.log('get_taiwan_news', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.content || '',
+              platform: platformTypeChange(item.platform) || '',
+              comment_count: item.comment_count,
+              message_id: item.message_id,
+              time: item.publish_time,
+              type: 'taiwan_news'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
+          lastRound.queryTitle = '搜索台湾新闻';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query;
+        }
+        break;
+      }
+      case 'get_world_news': {
+        lastRound.title = '世界热点新闻';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
+            console.log('get_taiwan_news', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.content || '',
+              platform: platformTypeChange(item.platform) || '',
+              comment_count: item.comment_count,
+              message_id: item.message_id,
+              time: item.publish_time,
+              type: 'world_news'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
+          lastRound.queryTitle = '搜索世界新闻';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query;
+        }
+        break;
+      }
+      case 'get_root_messaage_comment': { // 获取某条消息的全部评论
+        lastRound.title = '获取该消息的全部评论';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
+            console.log('get_taiwan_news', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.content || '',
+              platform: platformTypeChange(item.platform) || '',
+              comment_count: item.comment_count,
+              message_id: item.message_id,
+              time: item.publish_time,
+              type: 'messaage_comment'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query || toolData.tool_input.platform) {
+          lastRound.queryTitle = '查找平台';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query || platformTypeChange(toolData.tool_input.platform);
+        }
+        break;
+      }
+      case 'search_user_behavior': { // 查询该用户的历史行为
+        lastRound.title = '查询该用户的历史行为';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result);
+            console.log('search_user_behavior', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result.slice(0, 10) || []).map((item, idx) => ({
+              id: item,
+              title: item,
+              content: item,
+              type: 'user_behavior'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query || toolData.tool_input.platform) {
+          lastRound.queryTitle = '查找平台';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query || platformTypeChange(toolData.tool_input.platform);
+        }
+        break;
+      }
+      case 'get_america_news': { // 根据关键词获取美国热点新闻
+        lastRound.title = '美国热点新闻';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
+            console.log('get_taiwan_news', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.content || '',
+              platform: platformTypeChange(item.platform) || '',
+              comment_count: item.comment_count,
+              message_id: item.message_id,
+              time: item.publish_time,
+              type: 'america_news'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
+          lastRound.queryTitle = '查询美国热点新闻';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query;
+        }
+        break;
+      }
+      case 'get_time_data': { // 态势新闻搜索
+        lastRound.title = '态势新闻搜索';
+        console.log('get_time_data', toolData.tool_input)
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result)  as Array<{ title?: string; textid?: string; hot_num?: number; date?: string; content?: string }>
+            console.log('get_time_data', result);
+            lastRound.queryLoading = false;
+            lastRound.queryTitle = '查询态势新闻';
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.textid,
+              title: item.title,
+              content: item.content || '',
+              time: item.date,
+              hot_num: item.hot_num,
+              type: 'get_time_data'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query || toolData.tool_input.s || toolData.tool_input.e) {
+          lastRound.query = `${toolData.tool_input.s} - ${toolData.tool_input.e}`;
+        }
+        break;
+      }
+       case 'get_textid_content': { // 获取新闻详细内容
+        lastRound.title = '获取新闻详细内容';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result)
+            console.log('get_textid_content', result);
+            lastRound.queryLoading = false;
+            lastRound.textidContent = result.content;
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        }
+        break;
+      }
+      default:
+        break;
+    }
+    if (!side) {
+      state.current.messageList[1] = {
+        ...mesItem,
+        thinkingTrace: trace,
+      }
+      setMessages((prevMessages) => prevMessages.map((msg) => {
+        if (msg.id !== assistantId || msg.role !== 'assistant' || !msg.thinkingTrace) return msg;
+        return {
+          ...msg,
+          thinkingTrace: trace,
+        };
+      }));
+    } else {
+      state.current.compareResult[state.current.compareIndex][side].thinkingTrace = trace;
+      updatePane(side, (pane) => {
+        return {
+          ...pane,
+          thinkingTrace: trace,
+        };
+      });
+    }
+  };
+
+  /**
+   * 处理真实多轮 RAG 请求。
+   *
+   * 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
+   * 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
+   */
+  const handleRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    setError(null);
+    setIsLoading(true);
+    setIsPreConnectLoading(true);
+    try {
+      const response = await fetch(`${generateUrl}/generate`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: query }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      setIsPreConnectLoading(false);
+
+      const assistantId = `assistant-${Date.now()}`;
+      const assistantMessage: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        thinkingTrace: createMultiRoundStreamTrace(),
+      };
+      if (!side) {
+        state.current.messageList.push(assistantMessage); // 数据存储
+        // 接口连通后再展示多轮检索主题与过程
+        setMessages((prev) => [...prev, assistantMessage]);
+      } else if (side === 'left' || side === 'right') {
+        state.current.compareResult[state.current.compareIndex][side].thinkingTrace = createMultiRoundStreamTrace();
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            thinkingTrace: createMultiRoundStreamTrace(),
+          };
+        });
+      }
+
+      const reader = response.body.getReader();
+      // 保存 reader 引用，用于"停止生成"功能
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            console.log('聊天记录', state.current.compareResult);
+            if (!side) {
+              chatHistoryAddSearch();
+            }
+            break;
+          }
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          const lastLine = lines.pop();
+          buffer = lastLine || '';
+
+          for (const line of lines) {
+            if (!line.startsWith('data: ')) continue;
+
+            try {
+              const parsedData = JSON.parse(line.slice(6)) as {
+                event: string;
+                data: any;
+              };
+              const { event, data } = parsedData;
+
+              switch (event) {
+                case 'task_created': {
+                  taskIdRef.current = data?.task_id || null;
+                  break;
+                }
+                case 'tool_call': {
+                  handleToolCall(data as ToolCallData, assistantId, side);
+                  break;
+                }
+                case 'message': {
+                  if (typeof data === 'string') {
+                    setMessages((prevMessages) => prevMessages.map((msg) => {
+                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
+                      return {
+                        ...msg,
+                        thinkingTrace: {
+                          ...msg.thinkingTrace,
+                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
+                        },
+                      };
+                    }));
+                  }
+                  break;
+                }
+                case 'references': {
+                  const refs = Array.isArray(data?.references) ? data.references : [];
+                  const mappedRefs = refs.map(mapReferenceToSource);
+                  setSearchProcess((prev) => ({
+                    ...prev,
+                    hits: mappedRefs.length,
+                  }));
+                  setMessages((prevMessages) => prevMessages.map((msg) => (
+                    msg.id === assistantId
+                      ? { ...msg, sources: mappedRefs }
+                      : msg
+                  )));
+                  break;
+                }
+                case 'done': {
+                  setIsLoading(false);
+                  break;
+                }
+                default:
+                  console.log(`未知事件类型: ${event}`, data);
+              }
+            } catch (parseError) {
+              console.error('JSON解析错误:', parseError);
+              console.error('原始数据:', line.slice(6));
+            }
+          }
+        }
+      } finally {
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      console.error('处理请求时发生错误:', runError);
+      setIsLoading(false);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+      setIsPreConnectLoading(false);
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      handleStopCompareSide(side);
+    }
+  };
+
+  /**
+ * 处理任务检索 请求。
+ *
+ * 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
+ * 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
+ */
+  const handleTaskRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    setError(null);
+    setIsLoading(true);
+    setIsPreConnectLoading(true);
+
+    try {
+      const response = await fetch(`${taskChatUrl}/generate`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: query }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      setIsPreConnectLoading(false);
+
+      const assistantId = `assistant-${Date.now()}`;
+      const assistantMessage: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        thinkingTrace: createMultiRoundStreamTrace(),
+      };
+      if (!side) {
+        state.current.messageList.push(assistantMessage); // 数据存储
+        // 接口连通后再展示多轮检索主题与过程
+        setMessages((prev) => [...prev, assistantMessage]);
+      } else if (side === 'left' || side === 'right') {
+        state.current.compareResult[state.current.compareIndex][side].thinkingTrace = createMultiRoundStreamTrace();
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            thinkingTrace: createMultiRoundStreamTrace(),
+          };
+        });
+      }
+
+      const reader = response.body.getReader();
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            console.log('聊天记录', state.current.messageList);
+            chatHistoryAddSearch();
+            break;
+          }
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          const lastLine = lines.pop();
+          buffer = lastLine || '';
+
+          for (const line of lines) {
+            if (!line.startsWith('data: ')) continue;
+
+            try {
+              const parsedData = JSON.parse(line.slice(6)) as {
+                event: string;
+                data: any;
+              };
+              const { event, data } = parsedData;
+
+              switch (event) {
+                case 'task_created': {
+                  taskIdRef.current = data?.task_id || null;
+                  break;
+                }
+                case 'tool_call': {
+                  handleToolCall(data as ToolCallData, assistantId, side);
+                  break;
+                }
+                case 'message': {
+                  if (typeof data === 'string') {
+                    setMessages((prevMessages) => prevMessages.map((msg) => {
+                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
+                      return {
+                        ...msg,
+                        thinkingTrace: {
+                          ...msg.thinkingTrace,
+                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
+                        },
+                      };
+                    }));
+                  }
+                  break;
+                }
+                case 'references': {
+                  const refs = Array.isArray(data?.references) ? data.references : [];
+                  const mappedRefs = refs.map(mapReferenceToSource);
+                  setSearchProcess((prev) => ({
+                    ...prev,
+                    hits: mappedRefs.length,
+                  }));
+                  setMessages((prevMessages) => prevMessages.map((msg) => (
+                    msg.id === assistantId
+                      ? { ...msg, sources: mappedRefs }
+                      : msg
+                  )));
+                  break;
+                }
+                case 'done': {
+                  setIsLoading(false);
+                  break;
+                }
+                default:
+                  console.log(`未知事件类型: ${event}`, data);
+              }
+            } catch (parseError) {
+              console.error('JSON解析错误:', parseError);
+              console.error('原始数据:', line.slice(6));
+            }
+          }
+        }
+      } finally {
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      console.error('处理请求时发生错误:', runError);
+      setIsLoading(false);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+      setIsPreConnectLoading(false);
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      handleStopCompareSide(side);
+    }
+  };
+
+  /**
+* 处理画像检索 请求。
+*
+* 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
+* 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
+*/
+  const handleHxRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    setError(null);
+    setIsLoading(true);
+    setIsPreConnectLoading(true);
+
+    try {
+      const response = await fetch(`${taskChatUrl}/generate_b2`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: query }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      setIsPreConnectLoading(false);
+
+      const assistantId = `assistant-${Date.now()}`;
+      const assistantMessage: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        thinkingTrace: createMultiRoundStreamTrace(),
+      };
+      if (!side) {
+        state.current.messageList.push(assistantMessage); // 数据存储
+        // 接口连通后再展示多轮检索主题与过程
+        setMessages((prev) => [...prev, assistantMessage]);
+      } else if (side === 'left' || side === 'right') {
+        state.current.compareResult[state.current.compareIndex][side].thinkingTrace = createMultiRoundStreamTrace();
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            thinkingTrace: createMultiRoundStreamTrace(),
+          };
+        });
+      }
+
+      const reader = response.body.getReader();
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            console.log('聊天记录', state.current.messageList);
+            chatHistoryAddSearch();
+            break;
+          }
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          const lastLine = lines.pop();
+          buffer = lastLine || '';
+
+          for (const line of lines) {
+            if (!line.startsWith('data: ')) continue;
+
+            try {
+              const parsedData = JSON.parse(line.slice(6)) as {
+                event: string;
+                data: any;
+              };
+              const { event, data } = parsedData;
+
+              switch (event) {
+                case 'task_created': {
+                  taskIdRef.current = data?.task_id || null;
+                  break;
+                }
+                case 'tool_call': {
+                  handleToolCall(data as ToolCallData, assistantId);
+                  break;
+                }
+                case 'message': {
+                  if (typeof data === 'string') {
+                    setMessages((prevMessages) => prevMessages.map((msg) => {
+                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
+                      return {
+                        ...msg,
+                        thinkingTrace: {
+                          ...msg.thinkingTrace,
+                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
+                        },
+                      };
+                    }));
+                  }
+                  break;
+                }
+                case 'references': {
+                  const refs = Array.isArray(data?.references) ? data.references : [];
+                  const mappedRefs = refs.map(mapReferenceToSource);
+                  setSearchProcess((prev) => ({
+                    ...prev,
+                    hits: mappedRefs.length,
+                  }));
+                  setMessages((prevMessages) => prevMessages.map((msg) => (
+                    msg.id === assistantId
+                      ? { ...msg, sources: mappedRefs }
+                      : msg
+                  )));
+                  break;
+                }
+                case 'done': {
+                  setIsLoading(false);
+                  break;
+                }
+                default:
+                  console.log(`未知事件类型: ${event}`, data);
+              }
+            } catch (parseError) {
+              console.error('JSON解析错误:', parseError);
+              console.error('原始数据:', line.slice(6));
+            }
+          }
+        }
+      } finally {
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      console.error('处理请求时发生错误:', runError);
+      setIsLoading(false);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+      setIsPreConnectLoading(false);
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      handleStopCompareSide(side);
+    }
+  };
+
+   /**
+* 处理画像检索 请求。
+*
+* 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
+* 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
+*/
+  const newsReportRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    setError(null);
+    setIsLoading(true);
+    setIsPreConnectLoading(true);
+
+    try {
+      const response = await fetch(`${taskChatUrl}/generate_report`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: query }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      setIsPreConnectLoading(false);
+
+      const assistantId = `assistant-${Date.now()}`;
+      const assistantMessage: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        thinkingTrace: createMultiRoundStreamTrace(),
+      };
+      if (!side) {
+        state.current.messageList.push(assistantMessage); // 数据存储
+        // 接口连通后再展示多轮检索主题与过程
+        setMessages((prev) => [...prev, assistantMessage]);
+      } else if (side === 'left' || side === 'right') {
+        state.current.compareResult[state.current.compareIndex][side].thinkingTrace = createMultiRoundStreamTrace();
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            thinkingTrace: createMultiRoundStreamTrace(),
+          };
+        });
+      }
+
+      const reader = response.body.getReader();
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            console.log('聊天记录', state.current.messageList);
+            chatHistoryAddSearch();
+            break;
+          }
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          const lastLine = lines.pop();
+          buffer = lastLine || '';
+
+          for (const line of lines) {
+            if (!line.startsWith('data: ')) continue;
+
+            try {
+              const parsedData = JSON.parse(line.slice(6)) as {
+                event: string;
+                data: any;
+              };
+              const { event, data } = parsedData;
+
+              switch (event) {
+                case 'task_created': {
+                  taskIdRef.current = data?.task_id || null;
+                  break;
+                }
+                case 'tool_call': {
+                  handleToolCall(data as ToolCallData, assistantId);
+                  break;
+                }
+                case 'message': {
+                  if (typeof data === 'string') {
+                    setMessages((prevMessages) => prevMessages.map((msg) => {
+                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
+                      return {
+                        ...msg,
+                        thinkingTrace: {
+                          ...msg.thinkingTrace,
+                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
+                        },
+                      };
+                    }));
+                  }
+                  break;
+                }
+                case 'references': {
+                  const refs = Array.isArray(data?.references) ? data.references : [];
+                  const mappedRefs = refs.map(mapReferenceToSource);
+                  setSearchProcess((prev) => ({
+                    ...prev,
+                    hits: mappedRefs.length,
+                  }));
+                  setMessages((prevMessages) => prevMessages.map((msg) => (
+                    msg.id === assistantId
+                      ? { ...msg, sources: mappedRefs }
+                      : msg
+                  )));
+                  break;
+                }
+                case 'done': {
+                  setIsLoading(false);
+                  break;
+                }
+                default:
+                  console.log(`未知事件类型: ${event}`, data);
+              }
+            } catch (parseError) {
+              console.error('JSON解析错误:', parseError);
+              console.error('原始数据:', line.slice(6));
+            }
+          }
+        }
+      } finally {
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      console.error('处理请求时发生错误:', runError);
+      setIsLoading(false);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+      setIsPreConnectLoading(false);
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      handleStopCompareSide(side);
+    }
+  };
+
+  /**
+   * 单一模式下的发送入口。
+   *
+   * 这里只负责创建用户消息、重置输入框和按当前 qaMode 分发到对应执行器；
+   * 具体的真实请求、模拟流和状态回填分别在各自 handler 内维护。
+   */
+  const handleSend = () => {
+    if (submitLockRef.current || isLoading || isPreConnectLoading) return;
+    if (!inputValue.trim()) return;
+    submitLockRef.current = true;
+    const query = inputValue.trim();
+    state.current.messageList = [];
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: query,
+      timestamp: new Date(),
+    };
+    state.current.messageList.push(userMessage);
+    if (qaMode === 'multi-round') { // 多轮检索
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '多轮RAG',
+        rounds: 0,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void handleRun(query);
+      return;
+    }
+
+    if (qaMode === 'deep-search') { // 任务检索
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '任务检索',
+        rounds: 0,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void handleTaskRun(query);
+      return;
+    }
+
+    if (qaMode === 'hx-search') { // 任务检索
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '画像检索',
+        rounds: 0,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void handleHxRun(query);
+      return;
+    }
+
+    if (qaMode === 'news-report') { // 新闻报告生成
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '新闻报告生成',
+        rounds: 0,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void newsReportRun(query);
+      return;
+    }
+
+    if (qaMode === 'single-round') { // 单轮RAG
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '单轮RAG',
+        rounds: 1,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void handleSingleRoundRun(query);
+      return;
+    }
+
+    if (qaMode === 'single-chat') { // 大模型问答
+      console.log('进入了这里')
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '大模型问答',
+        rounds: 1,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void chatRun(query);
+      // handleMockSingleRoundRun(query);
+      return;
+    }
+
+    setIsLoading(true);
+    setMessages((prev) => [...prev, userMessage]);
+    setInputValue('');
+  };
+
+  /**
+   * 对比模式发送入口。
+   *
+   * 左右面板共享同一个用户问题，但各自按选择的模式独立运行、独立 loading、独立 sources。
+   * 通过 `updatePane` 将左右面板更新收敛到一个函数，避免并发请求互相覆盖状态。
+   */
+  const handleCompare = () => {
+    if (submitLockRef.current || isLoading || isPreConnectLoading) return;
+    if (!inputValue.trim()) return;
+    submitLockRef.current = true;
+    const query = inputValue.trim();
+    setInputValue('');
+    setCompareUserInput(query);
+    setError(null);
+    setIsLoading(true);
+    const compareId = Date.now().toString();
+    console.log('compareLeftMode',compareLeftMode)
+    const compareItem = {
+      id: compareId,
+      compareUserInput: query,
+      left: createComparePane(compareLeftMode),
+      right: createComparePane(compareRightMode),
+    }
+    setCompareResult((pev) => [...pev, compareItem]);
+    state.current.compareResult = [];
+    state.current.compareId = compareId;
+    state.current.compareResult.push(compareItem);
+    state.current.compareIndex = state.current.compareResult.length - 1;
+    console.log('compareItem', compareItem)
+    const runByMode = (side: 'left' | 'right', mode: QAMode) => {
+      if (mode === 'single-chat') { // 大模型问答
+        return chatRun(query, side);
+      } else if (mode === 'single-round') { // 单轮rag检索
+        return handleSingleRoundRun(query, side);
+      } else if (mode === 'multi-round') { // 多轮检索
+        return handleRun(query, side);
+      } else if (mode === 'deep-search') { // 任务检索
+        return handleTaskRun(query, side);
+      } else if (mode === 'hx-search') { // 画像检索
+        return handleHxRun(query, side); 
+      } else if (mode === 'news-report') { // 新闻检索
+        return handleHxRun(query, side);
+      }
+    };
+
+    Promise.allSettled([
+      runByMode('left', compareLeftMode).finally(() => updatePane('left', (pane) => ({ ...pane, loading: false }))),
+      runByMode('right', compareRightMode).finally(() => updatePane('right', (pane) => ({ ...pane, loading: false }))),
+    ]).finally(() => {
+      setIsLoading(false);
+      submitLockRef.current = false;
+      chatHistoryAddSearch();
+    });
+  };
+
+  const handleStopCompareSide = (side: 'left' | 'right') => {
+    const reader = compareReaderRef.current[side];
+    if (reader) {
+      void reader.cancel(`用户停止${side === 'left' ? '左侧' : '右侧'}生成`);
+      compareReaderRef.current[side] = null;
+    }
+    updatePane(side, (pane) => ({ ...pane, loading: false }))
+  };
+
+  /**
+   * 停止当前生成。
+   *
+   * 真实请求通过 reader.cancel() 中断读取；本地模拟通过 ref 标记让异步循环自行退出。
+   * 对比模式需要同时停止左右两侧，单一模式只处理当前主 reader。
+   */
+  const handleStop = () => {
+    if (viewMode === 'compare') {
+      handleStopCompareSide('left');
+      handleStopCompareSide('right');
+      setIsLoading(false);
+      submitLockRef.current = false;
+      return;
+    }
+    mockSingleRoundStoppedRef.current = true;
+    mockMultiRoundStoppedRef.current = true;
+    if (readerRef.current) {
+      void readerRef.current.cancel('用户手动停止');
+      readerRef.current = null;
+    }
+    setIsPreConnectLoading(false);
+    setIsLoading(false);
+    submitLockRef.current = false;
+  };
+
+  /**
+   * 对“生成中切换页面/模式/布局”进行统一保护。
+   *
+   * 如果当前没有生成任务，直接执行目标操作；否则弹出确认框。
+   * 用户确认后先停止生成，再执行原操作，避免生成流继续写入已经切换的 UI 状态。
+   */
+  const runAfterGenerationConfirm = (action: () => void) => {
+    if (!isLoading) {
+      action();
+      return;
+    }
+    pendingActionRef.current = action;
+    // Dialog.confirm({
+    //   header: '模型正在生成',
+    //   body: '当前模型仍在生成内容。确认后将停止生成，并继续执行你的操作。',
+    //   confirmBtn: '确认停止并继续',
+    //   cancelBtn: '取消',
+    //   onConfirm: () => {
+    //     handleStop();
+    //     pendingActionRef.current?.();
+    //     pendingActionRef.current = null;
+    //   },
+    //   onClose: () => {
+    //     pendingActionRef.current = null;
+    //   },
+    // });
+  };
+
+  const handleSafeViewModeChange = (mode: ViewMode) => {
+    if (mode === viewMode) return;
+    runAfterGenerationConfirm(() => setViewMode(mode));
+  };
+
+  const handleSafeNavigate = (page: PageType) => {
+    runAfterGenerationConfirm(() => onNavigate(page));
+  };
+
+  const handleSafeReset = () => {
+    runAfterGenerationConfirm(() => {
+      setMessages([]);
+      setCompareResult(null);
+    });
+  };
+
+  const handleSafeModeChange = (mode: QAMode) => {
+    runAfterGenerationConfirm(() => setQaMode(mode));
+  };
+
+  const handleSafeCompareLeftModeChange = (mode: QAMode) => {
+    runAfterGenerationConfirm(() => setCompareLeftMode(mode));
+  };
+
+  const handleSafeCompareRightModeChange = (mode: QAMode) => {
+    runAfterGenerationConfirm(() => setCompareRightMode(mode));
+  };
+
+  const handleSafeCompareLayoutChange = (layout: 'horizontal' | 'vertical') => {
+    runAfterGenerationConfirm(() => setCompareLayout(layout));
+  };
+
+  const handleSaveRecord = () => {
+    alert('问答记录已保存');
+  };
+
+  const handleCollect = () => {
+    alert('已添加到收藏');
+  };
+
+  const handleKeyDown = (e) => {
+    // if (e.key === 'Enter' && !e.shiftKey) {
+    //   console.log('回车了')
+    //   e.preventDefault();
+    //   if (e.repeat || submitLockRef.current || isLoading || isPreConnectLoading) return;
+    //   if (viewMode === 'compare') {
+    //     handleCompare();
+    //   } else {
+    //     handleSend();
+    //   }
+    // }
+    // console.log('e',e)
+    // if ((e.metaKey || e.ctrlKey || e.shiftKey) && e.key === "Enter") {
+    //   e.preventDefault();
+    // } else if (e.keyCode === 13) {
+    //   e.preventDefault();
+    //   console.log('回车了')
+    // } else if (e.key === "/") {
+    //   e.preventDefault();
+    // }
+    // if (e.repeat || submitLockRef.current || isLoading || isPreConnectLoading) return;
+    state.current.messageList = [];
+    if (viewMode === 'compare') {
+      handleCompare();
+    } else {
+      handleSend();
+    }
+    setIsAutoScrollEnabled(true);
+    setShowScrollToBottom(false);
+    scrollToBottom(true);
+  };
+
+  // 获取模式标签
+  const getModeLabel = (mode: QAMode) => {
+    switch (mode) {
+      case 'single-chat': return '大模型';
+      case 'single-round': return '单轮RAG';
+      case 'multi-round': return '多轮RAG';
+      case 'deep-search': return '任务检索';
+      case 'hx-search': return '画像检索';
+      case 'news-report': return '新闻报告生成';
+    }
+  };
+
+  const activeAssistantMessageId = isLoading
+    ? [...messages].reverse().find((msg) => msg.role === 'assistant')?.id
+    : undefined;
+
+  useEffect(() => {
+    setQaMode('hx-search');
+    // setMessages(createMockSingleRagMessages());
+    // setSearchProcess({
+    //   currentMode: '单轮RAG',
+    //   rounds: 1,
+    //   hits: 3,
+    //   queryRewrite: '',
+    // });
+    chatDataSearch();
+  }, [viewMode]);
+
+  // 创建聊天窗口
+  const addChatDataChange = async () => {
+    let qaMode = 'SINGLE_RAG';
+    if (viewMode === 'compare') {
+      qaMode = 'MULTI_RAG'
+    }
+    const parmy = {
+      userId: userId.current,
+      qaType: qaType.current,
+      questionTitle: '新建问答',
+      qaMode: qaMode,
+    }
+    const res = await service.post(`${zncmUrl}/llm/qa/history/create`, parmy);
+    console.log(res);
+    const result = res.data;
+    chatDataId.current = result.id;
+    if (viewMode === 'compare') {
+      compareChatId.current = result.id;
+    } else {
+      chatDataId.current = result.id;
+    }
+  }
+
+  // 查找聊天记录窗口
+  const chatDataSearch = async () => {
+    let qaMode = 'SINGLE_RAG';
+    console.log('viewMode', viewMode)
+    if (viewMode === 'compare') {
+      qaMode = 'MULTI_RAG'
+    }
+
+    const parmy = {
+      userId: userId.current,
+      qaType: qaType.current,
+      qaMode: qaMode,
+      current: 1,
+      size: 10
+    }
+    const res = await service.post(`${zncmUrl}/llm/qa/history/page`, parmy);
+    console.log('res', res);
+    const result = res.data;
+    if (result.length === 0) {
+      await addChatDataChange();
+    } else if (result.length > 0) {
+      if (viewMode === 'compare') {
+        compareChatId.current = result[0].id;
+      } else {
+        chatDataId.current = result[0].id;
+      }
+    }
+    await chatHistorySearch();
+    console.log('chatDataId', chatDataId.current, compareChatId.current)
+  }
+
+  // 根据对话记录窗口查找对话记录
+  const chatHistorySearch = async () => {
+    let chatHistoryId = chatDataId.current;
+    if (viewMode === 'compare') {
+      chatHistoryId = compareChatId.current;
+    }
+    const res = await service.get(`${zncmUrl}/llm/qa/history/pairs/${chatHistoryId}`, '');
+    console.log('问答记录', res);
+    // 1. 修正变量名 result
+    const result = res.data;
+    if (viewMode !== 'compare') {
+      // 2. 使用 flatMap 将二维数组拍平，并生成新的消息列表
+      const messageList: Message[] = result.flatMap((item, itemIndex) => {
+        // 3. 安全解析 JSON，使用 ?? 提供空数组兜底
+        const parsedAnswers = JSON.parse(item.answer ?? '[]');
+
+        // 4. map 处理每一条 answer，生成新的对象（不修改原对象）
+        return parsedAnswers.map((aItem: any, aIndex: number) => {
+          return {
+            ...aItem,
+            // 优化 ID 赋值逻辑：建议不管是不是索引 1，都补全 ID，防止遗漏
+            // 如果必须只针对第二条，保留原逻辑，但增加安全性
+            id: aIndex === 1 ? String(item.id) : (aItem.id || `temp-${itemIndex}-${aIndex}`),
+
+            // 如果后端返回的数据缺少 timestamp 或 role，最好在这里补全默认值
+            timestamp: aItem.timestamp ? new Date(aItem.timestamp) : new Date(),
+            role: aItem.role || 'assistant',
+          } as Message;
+        });
+      });
+      console.log('result', messageList); // 此时 result 保持纯净，未被修改
+      setMessages(messageList);
+    } else {
+      console.log(result);
+      const messageList = result.flatMap(item => {
+        const parsedAnswers = JSON.parse(item.answer ?? '[]');
+        return parsedAnswers.map(aItem => ({
+          ...aItem,
+          left: {
+            ...aItem.left,
+            loading: false,
+          },
+          right: {
+            ...aItem.right,
+            loading: false,
+          },
+          id: item.id,
+        }));
+      });
+      console.log('messageList', messageList)
+      setCompareResult(messageList);
+    }
+    // state.current.messageList = reuslt || [];
+  }
+
+  // 创建记录窗口
+  const chatHistoryAddSearch = async () => {
+    let historyId = chatDataId.current;
+    let answer = '';
+    let question = '';
+    if (viewMode === 'compare') {
+      historyId = compareChatId.current;
+      answer = JSON.stringify(state.current.compareResult);
+      question = state.current.compareResult[0].compareUserInput;
+    } else {
+      answer = JSON.stringify(state.current.messageList);
+      question = state.current.messageList[0].content;
+    }
+    const param = {
+      historyId: historyId,
+      userId: userId.current,
+      answer: answer,
+      question: question,
+    }
+    const res = await service.post(`${zncmUrl}/llm/qa/history/pair/add`, param);
+    console.log('添加聊天记录窗口', res);
+  }
+
+  /**
+   * 滚动到底部。
+   *
+   * 聊天区默认跟随新消息自动滚动；当用户手动上滑查看历史时会暂停自动滚动，避免打断阅读。
+   */
+  const scrollToBottom = (smooth = false) => {
+    if (!chatListRef.current) return;
+    chatListRef.current.scrollTo({
+      top: chatListRef.current.scrollHeight,
+      behavior: smooth ? 'smooth' : 'auto',
+    });
+  };
+
+  useEffect(() => {
+    if (isAutoScrollEnabled) {
+      scrollToBottom(false);
+    }
+  }, [messages, isLoading, isAutoScrollEnabled, compareResult]);
+
+  const handleChatScroll = () => {
+    if (!chatListRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = chatListRef.current;
+    const isNearBottom = scrollHeight - (scrollTop + clientHeight) < 80;
+    setIsAutoScrollEnabled(isNearBottom);
+    setShowScrollToBottom(!isNearBottom);
+  };
+
+  const getAssistantAnswerText = (message: Message) => (
+    message.singleRagTrace?.answerMarkdown || message.thinkingTrace?.finalAnswerMarkdown || message.content
+  );
+
+  const getAssistantThinkingText = (message: Message) => {
+    if (message.singleRagTrace) return message.singleRagTrace.thinkingMarkdown;
+    if (message.thinkingTrace) {
+      return message.thinkingTrace.rounds.map((round, index) => (
+        `## 第 ${index + 1} 轮：${round.title}\n${round.thoughtMarkdown}`
+      )).join('\n\n');
+    }
+    return '';
+  };
+
+  const handleCopyAssistantMessage = async (message: Message) => {
+    const answerText = getAssistantAnswerText(message);
+    try {
+      await navigator.clipboard.writeText(answerText);
+    } catch (copyError) {
+      console.error('复制模型回答失败:', copyError);
+    }
+  };
+
+  const handleDeleteAssistantMessage = (message: Message) => {
+    const messageIndex = messages.findIndex((msg) => msg.id === message.id);
+    const previousUserMessage = [...messages.slice(0, messageIndex)].reverse().find((msg) => msg.role === 'user');
+    setMessages((prev) => prev.filter((msg) => msg.id !== message.id && msg.id !== previousUserMessage?.id));
+  };
+
+  const handleEditAssistantMessage = (message: Message) => {
+    setEditingMessageId(message.id);
+    setEditingThinking(getAssistantThinkingText(message));
+    setEditingAnswer(getAssistantAnswerText(message));
+  };
+
+  const handleCancelAssistantEdit = () => {
+    setEditingMessageId(null);
+    setEditingThinking('');
+    setEditingAnswer('');
+  };
+
+  const handleSaveAssistantEdit = () => {
+    if (!editingMessageId) return;
+    setMessages((prev) => prev.map((msg) => {
+      if (msg.id !== editingMessageId) return msg;
+      if (msg.singleRagTrace) {
+        return {
+          ...msg,
+          content: editingAnswer,
+          singleRagTrace: {
+            ...msg.singleRagTrace,
+            thinkingMarkdown: editingThinking,
+            answerMarkdown: editingAnswer,
+            thinkingComplete: true,
+          },
+        };
+      }
+      if (msg.thinkingTrace) {
+        const rounds = msg.thinkingTrace.rounds.length > 0
+          ? msg.thinkingTrace.rounds.map((round, index) => (
+            index === 0 ? { ...round, thoughtMarkdown: editingThinking } : round
+          ))
+          : msg.thinkingTrace.rounds;
+        return {
+          ...msg,
+          content: editingAnswer,
+          thinkingTrace: {
+            ...msg.thinkingTrace,
+            rounds,
+            finalAnswerMarkdown: editingAnswer,
+          },
+        };
+      }
+      return { ...msg, content: editingAnswer };
+    }));
+    handleCancelAssistantEdit();
+  };
+
+  const handleResendAssistantMessage = (message: Message) => {
+    if (submitLockRef.current || isLoading || isPreConnectLoading) return;
+    const messageIndex = messages.findIndex((msg) => msg.id === message.id);
+    const previousUserMessage = [...messages.slice(0, messageIndex)].reverse().find((msg) => msg.role === 'user');
+    if (!previousUserMessage) return;
+
+    submitLockRef.current = true;
+    setMessages((prev) => prev.filter((msg) => msg.id !== message.id));
+    setInputValue('');
+
+    if (message.singleRagTrace) {
+      setSearchProcess({ currentMode: '单轮RAG', rounds: 1, hits: 0, queryRewrite: '' });
+      void handleSingleRoundRun(previousUserMessage.content);
+      return;
+    }
+
+    setSearchProcess({ currentMode: '多轮RAG', rounds: 0, hits: 0, queryRewrite: '' });
+    void handleRun(previousUserMessage.content);
+  };
+
+  /**
+   * 点击答案中的引用编号后打开引用详情弹窗。
+   *
+   * Markdown 中的 `[[1]]` 与 sources 数组采用 1-based 对齐，因此这里需要减 1 取数组下标。
+   */
+  const handleCitationClick = (message: Message, citationIndex: number) => {
+    const source = message.sources?.[citationIndex - 1];
+    if (!source) return;
+    setSelectedCitation(source);
+  };
+
+  const handleCompareCitationClick = (side: 'left' | 'right', citationIndex: number) => {
+    const source = compareResult?.[side]?.sources?.[citationIndex - 1];
+    if (!source) return;
+    setSelectedCitation(source);
+  };
+
+  useEffect(() => {
+    if (viewMode === 'compare') {
+      setCompareLeftMode('single-round');
+      setCompareRightMode('multi-round');
+    }
+  }, [viewMode]);
+
+  useEffect(() => {
+    if (viewMode !== 'compare' || !compareResult) return;
+    // setIsLoading(compareResult.left.loading || compareResult.right.loading);
+  }, [viewMode, compareResult]);
+
+  // 离开浏览器页面时无法展示自定义 Dialog，因此使用原生 beforeunload 提醒用户生成会被中断。
+  // useEffect(() => {
+  //   const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+  //     if (!isLoading) return;
+  //     event.preventDefault();
+  //     event.returnValue = '模型正在生成，离开页面将停止当前生成。';
+  //   };
+
+  //   window.addEventListener('beforeunload', handleBeforeUnload);
+  //   return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+  // }, [isLoading]);
+
+  return (
+    <div className={`h-[calc(100vh-120px)] flex flex-col theme-bg rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+      <GeneralQAHeader
+        chatHeadTitle={'课题研究'}
+        chatDesign={'支持任务检索，画像检索，新闻报告生成'}
+        compareShow={false}
+        isDark={isDark}
+        viewMode={viewMode}
+        setViewMode={handleSafeViewModeChange}
+        onNavigate={handleSafeNavigate}
+      />
+
+      {/* 主体内容区 */}
+      <div className="flex-1 flex overflow-hidden">
+        <GeneralQAConfigSidebar
+          isDark={isDark}
+          viewMode={viewMode}
+          qaMode={qaMode}
+          compareLeftMode={compareLeftMode}
+          compareRightMode={compareRightMode}
+          compareLayout={compareLayout}
+          knowledgeScope={knowledgeScope}
+          answerStyle={answerStyle}
+          showSources={showSources}
+          showProcess={showProcess}
+          autoSummarizeDiff={autoSummarizeDiff}
+          recommendBetter={recommendBetter}
+          isCollapsed={isLeftSidebarCollapsed}
+          qaModeOptions={qaModeList}
+          setQaMode={handleSafeModeChange}
+          setCompareLeftMode={handleSafeCompareLeftModeChange}
+          setCompareRightMode={handleSafeCompareRightModeChange}
+          setCompareLayout={handleSafeCompareLayoutChange}
+          setKnowledgeScope={setKnowledgeScope}
+          setAnswerStyle={setAnswerStyle}
+          setShowSources={setShowSources}
+          setShowProcess={setShowProcess}
+          setAutoSummarizeDiff={setAutoSummarizeDiff}
+          setRecommendBetter={setRecommendBetter}
+          setIsCollapsed={setIsLeftSidebarCollapsed}
+        />
+
+        {/* 中间结果区 */}
+        <div className="flex-1 min-w-0 flex flex-col overflow-hidden">
+          {viewMode === 'single' ? (
+            <>
+              {/* 聊天消息区 */}
+              <div
+                ref={chatListRef}
+                onScroll={handleChatScroll}
+                className="relative flex-1 overflow-y-auto p-4 space-y-4"
+              >
+                {messages.length === 0 ? (
+                  <EmptyChatState
+                    icon={<MessageSquare className="w-11 h-11 opacity-60" />}
+                    title="开始你的问答"
+                    description="输入问题，获取基于知识库的智能回答"
+                  />
+                ) : (
+                  messages.map((msg) => (
+                    <ChatMessage
+                      key={msg.id}
+                      message={msg}
+                      showSources={showSources}
+                      assistantLabel="知识库助手"
+                      assistantActive={msg.id === activeAssistantMessageId}
+                      onCitationClick={handleCitationClick}
+                      onCopyAssistant={handleCopyAssistantMessage}
+                      onDeleteAssistant={handleDeleteAssistantMessage}
+                      onEditAssistant={handleEditAssistantMessage}
+                      onResendAssistant={handleResendAssistantMessage}
+                    />
+                  ))
+                )}
+
+                {isPreConnectLoading && (
+                  <TypingIndicator
+                    label={qaMode === 'single-round' ? '正在流式生成单轮 RAG 回复' : '正在生成思考过程与检索内容'}
+                    assistantLabel="知识库助手"
+                  />
+                )}
+
+                {error && (
+                  <div className={`ml-12 max-w-[70%] rounded-xl border px-4 py-3 text-sm ${isDark
+                    ? 'bg-red-900/20 border-red-700/50 text-red-300'
+                    : 'bg-red-50 border-red-200 text-red-700'
+                    }`}>
+                    {error}
+                  </div>
+                )}
+
+                {showScrollToBottom && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setIsAutoScrollEnabled(true);
+                      setShowScrollToBottom(false);
+                      scrollToBottom(true);
+                    }}
+                    className={`fixed left-1/2 -translate-x-1/2 bottom-36 z-20 w-11 h-11 rounded-full backdrop-blur-sm border shadow-lg transition-all ${isDark
+                      ? 'bg-slate-800/65 border-slate-500/60 text-slate-100 hover:bg-slate-700/70'
+                      : 'bg-white/70 border-gray-300 text-gray-700 hover:bg-white/85'
+                      }`}
+                    title="滚动到底部"
+                  >
+                    <ArrowDown className="w-5 h-5 mx-auto" />
+                  </button>
+                )}
+              </div>
+            </>
+          ) : (
+            <div ref={chatListRef} onScroll={handleChatScroll} className="flex-1 overflow-y-auto p-4">
+              {/* 对比结果区 */}
+              {
+                compareResult.length === 0 && <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                  <GitCompare className="w-16 h-16 mb-4 opacity-50" />
+                  <p className="text-lg">对比模式</p>
+                  <p className="text-sm mt-2">输入问题，对比不同模式的回答效果</p>
+                </div>
+              }
+              {
+                compareResult.map((compare: CompareResult, index: number) => (
+                  <div className="mb-[10px]" key={index}>
+                    <div className="mb-4 flex justify-end">
+                      <div className={`max-w-[72%] rounded-2xl px-4 py-3 shadow-sm ${isDark
+                        ? 'bg-blue-600/70 text-white'
+                        : 'bg-gradient-to-r from-red-500 to-rose-500 text-white'
+                        }`}>
+                        <p className="whitespace-pre-wrap leading-relaxed">{compare.compareUserInput}</p>
+                      </div>
+                    </div>
+                    {compareResult ? (
+                      compareLayout === 'horizontal' ? (
+                        <div className="grid grid-cols-2 gap-4 min-w-0">
+                          {/* 左侧结果 */}
+                          <div className={`min-w-0 rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                            <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <QAAvatar role="assistant" variant="blue" isActive={compare.left.loading} label="知识库助手" />
+                                  <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                                    }`}>
+                                    {getModeLabel(compare.left.mode)}
+                                  </span>
+                                </div>
+                                {compare.left.loading && (
+                                  <button
+                                    type="button"
+                                    onClick={() => handleStopCompareSide('left')}
+                                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                                      }`}
+                                  >
+                                    <Square className="w-3 h-3 fill-current" />
+                                    停止
+                                  </button>
+                                )}
+                              </div>
+                            </div>
+                            <div className="p-4 min-w-0">
+                              <div className="flex-1 min-w-0">
+                                {(compare.left.mode === 'single-round' || compare.left.mode === 'single-chat')? (
+                                  <SingleRagAnswer trace={compare.left.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
+                                ) : (
+                                  <RetrievalThinkingTrace trace={compare.left.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
+                                )}
+                              </div>
+                            </div>
+                          </div>
+
+                          {/* 右侧结果 */}
+                          <div className={`min-w-0 overflow-hidden rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                            <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <QAAvatar role="assistant" variant="purple" isActive={compare.right.loading} label="知识库助手" />
+                                  <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
+                                    }`}>
+                                    {getModeLabel(compare.right.mode)}
+                                  </span>
+                                </div>
+                                {compare.right.loading && (
+                                  <button
+                                    type="button"
+                                    onClick={() => handleStopCompareSide('right')}
+                                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                                      }`}
+                                  >
+                                    <Square className="w-3 h-3 fill-current" />
+                                    停止
+                                  </button>
+                                )}
+                              </div>
+                            </div>
+                            <div className="p-4 min-w-0 overflow-hidden">
+                              <div className="flex-1 min-w-0">
+                                {(compare.right.mode === 'single-round' || compare.right.mode === 'single-chat') ? (
+                                  <SingleRagAnswer trace={compare.right.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
+                                ) : (
+                                  <RetrievalThinkingTrace trace={compare.right.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="space-y-4">
+                          {/* 上方结果 */}
+                          <div className={`min-w-0 overflow-hidden rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                            <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <QAAvatar role="assistant" variant="blue" isActive={compare.left.loading} label="知识库助手" />
+                                  <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                                    }`}>
+                                    {getModeLabel(compare.left.mode)}
+                                  </span>
+                                </div>
+                                {compare.left.loading && (
+                                  <button
+                                    type="button"
+                                    onClick={() => handleStopCompareSide('left')}
+                                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                                      }`}
+                                  >
+                                    <Square className="w-3 h-3 fill-current" />
+                                    停止
+                                  </button>
+                                )}
+                              </div>
+                            </div>
+                            <div className="p-4 min-w-0 overflow-hidden">
+                              <div className="flex-1 min-w-0">
+                                {(compare.left.mode === 'single-round' || compare.left.mode === 'single-chat') ? (
+                                  <SingleRagAnswer trace={compare.left.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
+                                ) : (
+                                  <RetrievalThinkingTrace trace={compare.left.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
+                                )}
+                              </div>
+                            </div>
+                          </div>
+
+                          {/* 下方结果 */}
+                          <div className={`min-w-0 overflow-hidden rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                            <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <QAAvatar role="assistant" variant="purple" isActive={compare.right.loading} label="知识库助手" />
+                                  <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
+                                    }`}>
+                                    {getModeLabel(compare.right.mode)}
+                                  </span>
+                                </div>
+                                {compare.right.loading && (
+                                  <button
+                                    type="button"
+                                    onClick={() => handleStopCompareSide('right')}
+                                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                                      }`}
+                                  >
+                                    <Square className="w-3 h-3 fill-current" />
+                                    停止
+                                  </button>
+                                )}
+                              </div>
+                            </div>
+                            <div className="p-4 min-w-0 overflow-hidden">
+                              <div className="flex-1 min-w-0">
+                                {(compare.right.mode === 'single-round' || compare.right.mode === 'single-chat') ? (
+                                  <SingleRagAnswer trace={compare.right.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
+                                ) : (
+                                  <RetrievalThinkingTrace trace={compare.right.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      )
+                    ) : (
+                      <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                        <GitCompare className="w-16 h-16 mb-4 opacity-50" />
+                        <p className="text-lg">对比模式</p>
+                        <p className="text-sm mt-2">输入问题，对比不同模式的回答效果</p>
+                      </div>
+                    )}
+                  </div>
+                ))
+              }
+              {showScrollToBottom && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setIsAutoScrollEnabled(true);
+                      setShowScrollToBottom(false);
+                      scrollToBottom(true);
+                    }}
+                    className={`fixed left-1/2 -translate-x-1/2 bottom-36 z-20 w-11 h-11 rounded-full backdrop-blur-sm border shadow-lg transition-all ${isDark
+                      ? 'bg-slate-800/65 border-slate-500/60 text-slate-100 hover:bg-slate-700/70'
+                      : 'bg-white/70 border-gray-300 text-gray-700 hover:bg-white/85'
+                      }`}
+                    title="滚动到底部"
+                  >
+                    <ArrowDown className="w-5 h-5 mx-auto" />
+                  </button>
+                )}
+            </div>
+          )}
+
+          {/* 底部输入区 */}
+          <QAComposer
+            value={inputValue}
+            onChange={setInputValue}
+            onKeyDown={handleKeyDown}
+            onSubmit={viewMode === 'compare' ? handleCompare : handleSend}
+            onStop={handleStop}
+            canSubmit={!isLoading && Boolean(inputValue.trim())}
+            onReset={handleSafeReset}
+            onSave={handleSaveRecord}
+            onCollect={handleCollect}
+            onOpenSettings={() => setIsModelSettingsOpen(true)}
+            isLoading={isLoading}
+            placeholder={viewMode === 'compare' ? '输入问题进行对比分析...' : '输入你的问题...'}
+            showReset
+          />
+        </div>
+
+        {/* 右侧辅助区 */}
+        {viewMode === 'single' && showProcess && (
+          <div className={`w-72 border-l flex-shrink-0 overflow-y-auto p-4 ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
+            }`}>
+            {/* 检索过程 */}
+            <div className="mb-6">
+              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                检索过程
+              </h3>
+              <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>当前模式</span>
+                    <span className={`text-sm font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                      {searchProcess.currentMode}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>检索轮次</span>
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      {searchProcess.rounds}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>命中数</span>
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      {searchProcess.hits}
+                    </span>
+                  </div>
+                  {searchProcess.queryRewrite && (
+                    <div>
+                      <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>Query改写</span>
+                      <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                        {searchProcess.queryRewrite}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 对比模式的差异总结 */}
+        {/* {viewMode === 'compare' && compareResult?.differences && (
+          <div className={`w-72 border-l flex-shrink-0 overflow-y-auto p-4 ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
+            }`}>
+            <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+              差异总结
+            </h3>
+            <div className={`p-4 rounded-xl space-y-4 ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+              <div>
+                <span className={`text-xs flex items-center gap-1 ${isDark ? 'text-green-400' : 'text-green-600'}`}>
+                  <CheckCircle className="w-3 h-3" />
+                  一致观点
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.consensus}
+                </p>
+              </div>
+              <div>
+                <span className={`text-xs flex items-center gap-1 ${isDark ? 'text-yellow-400' : 'text-yellow-600'}`}>
+                  <AlertCircle className="w-3 h-3" />
+                  差异观点
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.differences}
+                </p>
+              </div>
+              <div>
+                <span className={`text-xs ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                  {getModeLabel(compareResult.left.mode)}优势
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.leftAdvantage}
+                </p>
+              </div>
+              <div>
+                <span className={`text-xs ${isDark ? 'text-purple-400' : 'text-purple-600'}`}>
+                  {getModeLabel(compareResult.right.mode)}优势
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.rightAdvantage}
+                </p>
+              </div>
+            </div>
+          </div>
+        )} */}
+      </div>
+
+      {editingMessageId && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div className="absolute inset-0 bg-black/45 backdrop-blur-[1px]" onClick={handleCancelAssistantEdit} />
+          <div className={`relative w-full max-w-3xl rounded-2xl border shadow-2xl p-5 ${isDark ? 'bg-slate-900 border-slate-700 text-slate-100' : 'bg-white border-gray-200 text-gray-900'
+            }`}>
+            <button
+              type="button"
+              onClick={handleCancelAssistantEdit}
+              className={`absolute top-3 right-3 p-1.5 rounded-lg transition-all ${isDark ? 'hover:bg-slate-700 text-slate-300' : 'hover:bg-gray-100 text-gray-500'
+                }`}
+              title="关闭"
+            >
+              <X className="w-4 h-4" />
+            </button>
+            <div className="pr-9">
+              <h3 className="text-base font-semibold">编辑模型生成内容</h3>
+              <p className={`mt-1 text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                可同时修改模型回答和思考过程，多轮检索会把思考过程写回第一轮思考内容。
+              </p>
+            </div>
+            <div className="mt-4 grid gap-4 md:grid-cols-2">
+              <label className="space-y-2">
+                <span className={`text-sm font-medium ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>思考过程</span>
+                <textarea
+                  value={editingThinking}
+                  onChange={(event) => setEditingThinking(event.target.value)}
+                  className={`h-80 w-full resize-none rounded-xl border p-3 text-sm focus:outline-none ${isDark ? 'border-slate-700 bg-slate-800 text-slate-100' : 'border-gray-200 bg-gray-50 text-gray-800'
+                    }`}
+                />
+              </label>
+              <label className="space-y-2">
+                <span className={`text-sm font-medium ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>最终回答</span>
+                <textarea
+                  value={editingAnswer}
+                  onChange={(event) => setEditingAnswer(event.target.value)}
+                  className={`h-80 w-full resize-none rounded-xl border p-3 text-sm focus:outline-none ${isDark ? 'border-slate-700 bg-slate-800 text-slate-100' : 'border-gray-200 bg-gray-50 text-gray-800'
+                    }`}
+                />
+              </label>
+            </div>
+            <div className="mt-4 flex justify-end gap-2">
+              <button type="button" onClick={handleCancelAssistantEdit} className={`px-4 py-2 rounded-xl text-sm ${isDark ? 'bg-slate-800 hover:bg-slate-700 text-slate-200' : 'bg-gray-100 hover:bg-gray-200 text-gray-700'}`}>
+                取消
+              </button>
+              <button type="button" onClick={handleSaveAssistantEdit} className="px-4 py-2 rounded-xl text-sm bg-red-500 hover:bg-red-600 text-white">
+                保存
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {selectedCitation && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div
+            className="absolute inset-0 bg-black/45 backdrop-blur-[1px]"
+            onClick={() => setSelectedCitation(null)}
+          />
+          <div className={`relative w-full max-w-xl rounded-2xl border shadow-2xl p-5 ${isDark
+            ? 'bg-slate-900 border-slate-700 text-slate-100'
+            : 'bg-white border-gray-200 text-gray-900'
+            }`}>
+            <button
+              type="button"
+              onClick={() => setSelectedCitation(null)}
+              className={`absolute top-3 right-3 p-1.5 rounded-lg transition-all ${isDark ? 'hover:bg-slate-700 text-slate-300' : 'hover:bg-gray-100 text-gray-500'
+                }`}
+              title="关闭"
+            >
+              <X className="w-4 h-4" />
+            </button>
+
+            <div className="pr-9">
+              <h3 className="text-base font-semibold">{selectedCitation.title || '引用内容'}</h3>
+              <div className={`mt-2 text-xs space-y-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                <div>来源：{selectedCitation.source || selectedCitation.type || '未知来源'}</div>
+                <div>时间：{selectedCitation.time || '未知'}</div>
+              </div>
+            </div>
+
+            {selectedCitation.url && (
+              <div className="mt-4">
+                <a
+                  href={`${knowledgeUrl}/#/knowledge/mid-detail?recUuid=${selectedCitation.url}`}
+                  target="_blank"
+                  rel="noreferrer"
+                  className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm transition-all ${isDark
+                    ? 'border-slate-600 text-slate-200 hover:bg-slate-800'
+                    : 'border-gray-300 text-gray-700 hover:bg-gray-50'
+                    }`}
+                  title="打开原始链接"
+                >
+                  <ExternalLink className="w-4 h-4" />
+                  查看原文链接
+                </a>
+              </div>
+            )}
+
+            <div className={`mt-4 rounded-xl p-3 text-sm leading-relaxed max-h-[500px] overflow-auto pr-[10px] whitespace-pre-wrap ${isDark ? 'bg-slate-800/70 text-slate-200' : 'bg-gray-50 text-gray-700'
+              }`}>
+              {selectedCitation.content || selectedCitation.snippet || '暂无引用内容'}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <Dialog
+        visible={isModelSettingsOpen}
+        header="模型参数设置"
+        width="520px"
+        confirmBtn="保存"
+        cancelBtn="取消"
+        onConfirm={() => setIsModelSettingsOpen(false)}
+        onClose={() => setIsModelSettingsOpen(false)}
+      >
+        <div className="space-y-6 py-2">
+          <div>
+            <label className={`block text-sm font-medium mb-2 ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+              模型
+            </label>
+            <Select
+              value={modelName}
+              onChange={(value) => setModelName(String(value))}
+              options={[
+                { label: 'Qwen3-32B: 效果与速度均衡（推荐）', value: 'OpenAI3' },
+                { label: 'Qwen3-235B：效果与速度均衡（推荐）', value: 'OpenAI4' },
+                { label: 'GLM-5：逻辑性强，长上下文', value: 'OpenAI5' },
+                { label: 'Qwen3.5-27B：深度思考过程长', value: 'OpenAI6' },
+                { label: 'Qwen3-8B：速度快，效果较差', value: 'OpenAI7' },
+                // { label: 'Qwen2.5-72B：老模型，发散性差', value: 'OpenAI8' },
+                { label: '四季7B：速度快，效果较差', value: 'OpenAI9' },
+              ]}
+              style={{ width: '100%' }}
+            />
+          </div>
+          <div>
+            <div className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+              相似度阈值 score_threshold：{scoreThreshold.toFixed(2)}
+            </div>
+            <Slider
+              label
+              layout="horizontal"
+              min={0}
+              max={1}
+              step={0.01}
+              value={scoreThreshold}
+              onChange={(value) => setScoreThreshold(Number(value))}
+            />
+          </div>
+          <div>
+            <div className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+              温度 temperature：{temperature.toFixed(2)}
+            </div>
+            <Slider
+              label
+              layout="horizontal"
+              min={0}
+              max={1}
+              step={0.01}
+              value={temperature}
+              onChange={(value) => setTemperature(Number(value))}
+            />
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  );
+};
+
+export default ActionChat;
diff --git a/web-code/components/qa/AgentQA.tsx b/web-code/components/qa/AgentQA.tsx
new file mode 100644
index 00000000..9527b6eb
--- /dev/null
+++ b/web-code/components/qa/AgentQA.tsx
@@ -0,0 +1,578 @@
+import React, { useState } from 'react';
+import {
+  Search,
+  History,
+  Bot,
+  Sparkles,
+  Database,
+  Layers,
+  FileText,
+  ChevronRight,
+  ChevronLeft,
+  Cpu,
+  Target,
+  Zap,
+  CheckCircle,
+} from 'lucide-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import { PageType } from '../../components/Sidebar';
+import { ChatMessage, EmptyChatState, QAComposer, TypingIndicator } from './QACommon';
+
+interface Agent {
+  id: string;
+  name: string;
+  category: string;
+  tags: string[];
+  description: string;
+  skills: string[];
+  dataSources: string[];
+  functions: string[];
+  outputFields: string[];
+}
+
+interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: Date;
+  agentName?: string;
+  skills?: string[];
+  dataSources?: string[];
+  functions?: string[];
+  structuredOutput?: Record<string, any>;
+}
+
+/**
+ * 智能体问答组件
+ * 基于特定智能体的专业能力进行问答，支持选择不同领域的智能体
+ * @param onNavigate - 页面导航函数
+ */
+const AgentQA: React.FC<{ onNavigate: (page: PageType) => void }> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 模拟智能体列表
+  const agents: Agent[] = [
+    {
+      id: 'audience-agent',
+      name: 'AudienceAgent',
+      category: '受众分析',
+      tags: ['受众分层', '画像抽取', '行为预测'],
+      description: '专业的受众分析智能体，能够识别目标受众特征并生成画像',
+      skills: ['受众分层', '核心受众识别', '画像抽取', '行为预测'],
+      dataSources: ['知识库', 'Y系统', 'A系统'],
+      functions: ['信息抽取器', '标签聚类器', '结构化输出器'],
+      outputFields: ['core_audience', 'key_traits', 'barriers', 'opportunities'],
+    },
+    {
+      id: 'brand-agent',
+      name: 'BrandAgent',
+      category: '品牌分析',
+      tags: ['品牌定位', '传播策略', '调性分析'],
+      description: '专注品牌建设与传播策略的智能体',
+      skills: ['品牌定位分析', '传播路径规划', '品牌调性设计'],
+      dataSources: ['知识库', '行业数据库'],
+      functions: ['品牌诊断器', '策略生成器'],
+      outputFields: ['brand_position', 'communication_path', 'tone_guide'],
+    },
+    {
+      id: 'content-agent',
+      name: 'ContentAgent',
+      category: '内容创作',
+      tags: ['文案撰写', '创意生成', '多形式内容'],
+      description: '智能内容创作助手，支持多种形式的内容生成',
+      skills: ['文案撰写', '创意生成', '多形式内容', 'A/B测试文案'],
+      dataSources: ['知识库', '优秀案例库'],
+      functions: ['文案生成器', '风格适配器', '质量评估器'],
+      outputFields: ['headlines', 'body_copy', 'call_to_action', 'variants'],
+    },
+    {
+      id: 'channel-agent',
+      name: 'ChannelAgent',
+      category: '渠道规划',
+      tags: ['渠道选择', '投放策略', '效果评估'],
+      description: '专业的渠道分析与规划智能体',
+      skills: ['渠道选择', '投放策略规划', '效果评估', '预算分配'],
+      dataSources: ['Y系统', 'A系统', '行业数据'],
+      functions: ['渠道分析器', '投放优化器', 'ROI预测器'],
+      outputFields: ['recommended_channels', 'budget_allocation', 'expected_roi'],
+    },
+  ];
+
+  // 状态管理
+  // 当前选中的智能体
+  const [selectedAgent, setSelectedAgent] = useState<Agent>(agents[0]);
+  // 智能体搜索关键词
+  const [searchQuery, setSearchQuery] = useState('');
+  // 聊天消息列表
+  const [messages, setMessages] = useState<Message[]>([]);
+  // 输入框内容
+  const [inputValue, setInputValue] = useState('');
+  // 加载状态
+  const [isLoading, setIsLoading] = useState(false);
+  // 左侧侧边栏折叠状态
+  const [isLeftSidebarCollapsed, setIsLeftSidebarCollapsed] = useState(false);
+
+  // 过滤智能体
+  const filteredAgents = agents.filter(agent =>
+    agent.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    agent.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    agent.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))
+  );
+
+  /**
+   * 处理发送消息
+   * 发送用户消息并模拟智能体响应
+   */
+  const handleSend = () => {
+    if (!inputValue.trim()) return;
+
+    setIsLoading(true);
+
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: inputValue,
+      timestamp: new Date(),
+    };
+
+    setMessages([...messages, userMessage]);
+    setInputValue('');
+
+    // 模拟AI响应
+    setTimeout(() => {
+      const response: Message = {
+        id: (Date.now() + 1).toString(),
+        role: 'assistant',
+        content: `基于${selectedAgent.name}的专业能力，我来为您分析：\n\n根据您的问题，我识别到核心受众特征如下：\n\n**核心受众识别**：\n- 主要年龄段：25-35岁\n- 职业特征：都市白领\n- 消费能力：中高端\n- 关注点：品质生活、个人成长\n\n**关键特质**：\n1. 追求个性化表达\n2. 注重社交认同\n3. 愿意为品质付费\n\n**可能存在的阻力**：\n- 价格敏感度较高\n- 对品牌忠诚度有限\n\n以上分析是否满足您的需求？如需调整维度，请继续补充信息。`,
+        timestamp: new Date(),
+        agentName: selectedAgent.name,
+        skills: selectedAgent.skills,
+        dataSources: selectedAgent.dataSources,
+        functions: selectedAgent.functions,
+        structuredOutput: {
+          core_audience: '25-35岁都市白领',
+          key_traits: ['追求个性化', '注重社交认同', '品质导向'],
+          barriers: ['价格敏感', '品牌忠诚度有限'],
+          opportunities: ['社交媒体影响大', '口碑传播效果好'],
+        },
+      };
+
+      setMessages(prev => [...prev, response]);
+      setIsLoading(false);
+    }, 1500);
+  };
+
+  /**
+   * 处理停止操作
+   * 停止当前正在进行的智能体响应
+   */
+  const handleStop = () => {
+    setIsLoading(false);
+  };
+
+  /**
+   * 处理键盘事件
+   * 按Enter键发送消息（不按Shift）
+   */
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  /**
+   * 保存问答记录
+   */
+  const handleSaveRecord = () => {
+    alert('问答记录已保存');
+  };
+
+  /**
+   * 收藏当前对话
+   */
+  const handleCollect = () => {
+    alert('已添加到收藏');
+  };
+
+  return (
+    <div className={`h-[calc(100vh-120px)] flex flex-col theme-bg rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+      {/* 顶部工具栏 */}
+      <div className={`flex items-center justify-between px-6 py-4 border-b ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+        <div className="flex items-center gap-4">
+          <h1 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+            智能体问答
+          </h1>
+          <div className={`flex items-center gap-2 px-3 py-1.5 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-red-50'}`}>
+            <Bot className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+            <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+              当前智能体：
+            </span>
+            <span className={`text-sm font-medium ${isDark ? 'text-blue-400' : 'text-red-600'}`}>
+              {selectedAgent.name}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => onNavigate('qa-records')}
+            className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+              isDark
+                ? 'bg-slate-700/50 text-slate-300 hover:bg-slate-600/50'
+                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            }`}
+          >
+            <History className="w-4 h-4" />
+            历史记录
+          </button>
+        </div>
+      </div>
+
+      {/* 主体内容区 */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* 左侧智能体区 */}
+        <div className={`${isLeftSidebarCollapsed ? 'w-14 p-2' : 'w-72'} border-r flex-shrink-0 overflow-y-auto transition-all duration-300 ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'}`}>
+          <div className={`flex items-center ${isLeftSidebarCollapsed ? 'justify-center' : 'justify-between'} p-2 ${isLeftSidebarCollapsed ? '' : 'px-4 pt-4 pb-0'}`}>
+            {!isLeftSidebarCollapsed && (
+              <span className={`text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                智能体配置
+              </span>
+            )}
+            <button
+              type="button"
+              onClick={() => setIsLeftSidebarCollapsed(!isLeftSidebarCollapsed)}
+              className={`p-2 rounded-lg transition-all ${
+                isDark
+                  ? 'text-slate-400 hover:text-white hover:bg-slate-700/50'
+                  : 'text-gray-500 hover:text-red-600 hover:bg-red-50'
+              }`}
+              title={isLeftSidebarCollapsed ? '展开侧边栏' : '收起侧边栏'}
+            >
+              {isLeftSidebarCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
+            </button>
+          </div>
+
+          {!isLeftSidebarCollapsed && (<>
+          {/* 智能体搜索 */}
+          <div className="p-4">
+            <div className={`relative ${isDark ? 'bg-slate-700/50' : 'bg-white'} rounded-lg`}>
+              <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="搜索智能体..."
+                className={`w-full pl-10 pr-4 py-2 rounded-lg text-sm focus:outline-none ${
+                  isDark
+                    ? 'bg-transparent text-white placeholder-slate-500'
+                    : 'bg-transparent text-gray-800 placeholder-gray-400'
+                }`}
+              />
+            </div>
+          </div>
+
+          {/* 智能体列表 */}
+          <div className="px-4 pb-4">
+            <h3 className={`text-xs font-medium uppercase tracking-wider mb-3 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+              智能体列表
+            </h3>
+            <div className="space-y-2">
+              {filteredAgents.map((agent) => (
+                <button
+                  key={agent.id}
+                  onClick={() => setSelectedAgent(agent)}
+                  className={`w-full text-left p-3 rounded-lg transition-all ${
+                    selectedAgent.id === agent.id
+                      ? isDark
+                        ? 'bg-blue-600/20 border border-blue-500/50'
+                        : 'bg-red-50 border border-red-200'
+                      : isDark
+                        ? 'bg-slate-700/30 border border-transparent hover:bg-slate-700/50'
+                        : 'bg-white border border-gray-200 hover:bg-gray-50'
+                  }`}
+                >
+                  <div className="flex items-center gap-3">
+                    <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
+                      selectedAgent.id === agent.id
+                        ? isDark
+                          ? 'bg-blue-600 text-white'
+                          : 'bg-red-500 text-white'
+                        : isDark
+                          ? 'bg-slate-600 text-slate-300'
+                          : 'bg-gray-100 text-gray-600'
+                    }`}>
+                      <Bot className="w-5 h-5" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className={`text-sm font-medium truncate ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                        {agent.name}
+                      </div>
+                      <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                        {agent.category}
+                      </div>
+                    </div>
+                    <ChevronRight className={`w-4 h-4 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* 当前智能体能力摘要 */}
+          <div className={`p-4 border-t ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+            <h3 className={`text-xs font-medium uppercase tracking-wider mb-3 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+              能力摘要
+            </h3>
+
+            {/* 核心职责 */}
+            <div className="mb-4">
+              <div className={`flex items-center gap-2 mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                <Target className="w-4 h-4" />
+                <span className="text-xs">核心职责</span>
+              </div>
+              <p className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                {selectedAgent.description}
+              </p>
+            </div>
+
+            {/* 已启用技能 */}
+            <div className="mb-4">
+              <div className={`flex items-center gap-2 mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                <Sparkles className="w-4 h-4" />
+                <span className="text-xs">已启用技能</span>
+              </div>
+              <div className="flex flex-wrap gap-1">
+                {selectedAgent.skills.map((skill, idx) => (
+                  <span
+                    key={idx}
+                    className={`px-2 py-0.5 rounded text-xs ${
+                      isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                    }`}
+                  >
+                    {skill}
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            {/* 可访问数据源 */}
+            <div className="mb-4">
+              <div className={`flex items-center gap-2 mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                <Database className="w-4 h-4" />
+                <span className="text-xs">可访问数据源</span>
+              </div>
+              <div className="flex flex-wrap gap-1">
+                {selectedAgent.dataSources.map((source, idx) => (
+                  <span
+                    key={idx}
+                    className={`px-2 py-0.5 rounded text-xs ${
+                      isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-600'
+                    }`}
+                  >
+                    {source}
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            {/* 可调用功能 */}
+            <div>
+              <div className={`flex items-center gap-2 mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                <Layers className="w-4 h-4" />
+                <span className="text-xs">可调用功能</span>
+              </div>
+              <div className="flex flex-wrap gap-1">
+                {selectedAgent.functions.map((func, idx) => (
+                  <span
+                    key={idx}
+                    className={`px-2 py-0.5 rounded text-xs ${
+                      isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
+                    }`}
+                  >
+                    {func}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+          </>)}
+        </div>
+
+        {/* 中间对话区 */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {/* 消息列表 */}
+          <div className="flex-1 overflow-y-auto p-4 space-y-4">
+            {messages.length === 0 ? (
+              <EmptyChatState
+                icon={<Bot className="w-11 h-11 opacity-60" />}
+                title={`开始与${selectedAgent.name}对话`}
+                description="基于智能体专业能力获取精准回答"
+              />
+            ) : (
+              messages.map((msg) => (
+                <ChatMessage
+                  key={msg.id}
+                  message={msg}
+                  assistantLabel={msg.agentName || selectedAgent.name}
+                  renderAssistantExtra={(assistantMessage) => (
+                    <div className={`ml-12 p-3 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-gray-50'}`}>
+                      <div className="mb-3">
+                        <h4 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>本轮启用技能</h4>
+                        <div className="flex flex-wrap gap-1">
+                          {assistantMessage.skills?.map((skill, idx) => (
+                            <span key={idx} className={`px-2 py-0.5 rounded text-xs ${isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'}`}>
+                              {skill}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div className="mb-3">
+                        <h4 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>本轮访问数据源</h4>
+                        <div className="flex flex-wrap gap-1">
+                          {assistantMessage.dataSources?.map((source, idx) => (
+                            <span key={idx} className={`px-2 py-0.5 rounded text-xs ${isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-600'}`}>
+                              {source}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div className="mb-3">
+                        <h4 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>本轮调用功能</h4>
+                        <div className="flex flex-wrap gap-1">
+                          {assistantMessage.functions?.map((func, idx) => (
+                            <span key={idx} className={`px-2 py-0.5 rounded text-xs ${isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'}`}>
+                              {func}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+
+                      {assistantMessage.structuredOutput && (
+                        <div>
+                          <h4 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>结构化输出</h4>
+                          <div className={`p-3 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                            {Object.entries(assistantMessage.structuredOutput).map(([key, value]) => (
+                              <div key={key} className="flex items-start gap-2 mb-1 last:mb-0">
+                                <span className={`text-xs font-mono ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>{key}:</span>
+                                <span className={`text-xs ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                                  {Array.isArray(value) ? value.join(', ') : String(value)}
+                                </span>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                />
+              ))
+            )}
+
+            {isLoading && <TypingIndicator label={`${selectedAgent.name} 正在调用能力生成回复`} assistantLabel={selectedAgent.name} />}
+          </div>
+
+          {/* 底部输入区 */}
+          <QAComposer
+            value={inputValue}
+            onChange={setInputValue}
+            onKeyDown={handleKeyDown}
+            onSubmit={handleSend}
+            onStop={handleStop}
+            onSave={handleSaveRecord}
+            onCollect={handleCollect}
+            isLoading={isLoading}
+            placeholder="输入问题或任务要求..."
+            showUpload={false}
+          />
+        </div>
+
+        {/* 右侧执行详情区 */}
+        <div className={`w-72 border-l flex-shrink-0 overflow-y-auto p-4 ${
+          isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
+        }`}>
+          <h3 className={`text-sm font-medium mb-4 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+            执行详情
+          </h3>
+
+          {/* 本轮启用技能 */}
+          <div className="mb-6">
+            <div className={`flex items-center gap-2 mb-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              <Sparkles className="w-4 h-4" />
+              <span className="text-xs font-medium">本轮启用技能</span>
+            </div>
+            <div className={`p-3 rounded-xl ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+              <div className="space-y-2">
+                {selectedAgent.skills.map((skill, idx) => (
+                  <div key={idx} className="flex items-center gap-2">
+                    <CheckCircle className={`w-3 h-3 ${isDark ? 'text-blue-400' : 'text-green-500'}`} />
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>{skill}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* 本轮访问数据源 */}
+          <div className="mb-6">
+            <div className={`flex items-center gap-2 mb-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              <Database className="w-4 h-4" />
+              <span className="text-xs font-medium">本轮访问数据源</span>
+            </div>
+            <div className={`p-3 rounded-xl ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+              <div className="space-y-2">
+                {selectedAgent.dataSources.map((source, idx) => (
+                  <div key={idx} className="flex items-center gap-2">
+                    <Database className={`w-3 h-3 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>{source}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* 本轮调用功能 */}
+          <div className="mb-6">
+            <div className={`flex items-center gap-2 mb-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              <Layers className="w-4 h-4" />
+              <span className="text-xs font-medium">本轮调用功能</span>
+            </div>
+            <div className={`p-3 rounded-xl ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+              <div className="space-y-2">
+                {selectedAgent.functions.map((func, idx) => (
+                  <div key={idx} className="flex items-center gap-2">
+                    <Cpu className={`w-3 h-3 ${isDark ? 'text-purple-400' : 'text-purple-500'}`} />
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>{func}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* 结构化输出字段 */}
+          <div>
+            <div className={`flex items-center gap-2 mb-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              <FileText className="w-4 h-4" />
+              <span className="text-xs font-medium">输出字段</span>
+            </div>
+            <div className={`p-3 rounded-xl ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+              <div className="space-y-2">
+                {selectedAgent.outputFields.map((field, idx) => (
+                  <div key={idx} className="flex items-center gap-2">
+                    <Zap className={`w-3 h-3 ${isDark ? 'text-yellow-400' : 'text-yellow-500'}`} />
+                    <span className={`text-xs font-mono ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>{field}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AgentQA;
diff --git a/web-code/components/qa/CollaborativeQA.tsx b/web-code/components/qa/CollaborativeQA.tsx
new file mode 100644
index 00000000..d4ee5783
--- /dev/null
+++ b/web-code/components/qa/CollaborativeQA.tsx
@@ -0,0 +1,189 @@
+import React, { useState } from 'react';
+import { CheckCircle, ChevronLeft, ChevronRight, History, MessageCircle, Users } from 'lucide-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import { PageType } from '../../components/Sidebar';
+import { ChatMessage, EmptyChatState, QAComposer, TypingIndicator } from './QACommon';
+
+interface CollaborativeQAProps {
+  onNavigate: (page: PageType) => void;
+}
+
+interface CollaborativeMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: Date;
+  agentName?: string;
+}
+
+const collaborativeAgents = [
+  { id: 'goal-agent', name: 'GoalAgent', category: '目标规划', color: 'blue' },
+  { id: 'audience-agent', name: 'AudienceAgent', category: '受众分析', color: 'green' },
+  { id: 'risk-agent', name: 'RiskAgent', category: '风险识别', color: 'purple' },
+];
+
+/**
+ * 多智能体协同问答组件
+ * 多个智能体从不同视角联合分析问题，生成综合建议
+ * @param onNavigate - 页面导航函数
+ */
+const CollaborativeQA: React.FC<CollaborativeQAProps> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const [messages, setMessages] = useState<CollaborativeMessage[]>([]);
+  const [inputValue, setInputValue] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedAgents, setSelectedAgents] = useState(collaborativeAgents.map((agent) => agent.id));
+  const [isLeftSidebarCollapsed, setIsLeftSidebarCollapsed] = useState(false);
+
+  const activeAgents = collaborativeAgents.filter((agent) => selectedAgents.includes(agent.id));
+
+  const handleSend = () => {
+    if (!inputValue.trim()) return;
+
+    const userMessage: CollaborativeMessage = {
+      id: `user-${Date.now()}`,
+      role: 'user',
+      content: inputValue,
+      timestamp: new Date(),
+    };
+
+    setMessages((prev) => [...prev, userMessage]);
+    setInputValue('');
+    setIsLoading(true);
+
+    setTimeout(() => {
+      const agentNames = activeAgents.map((agent) => agent.name).join('、');
+      const assistantMessage: CollaborativeMessage = {
+        id: `assistant-${Date.now()}`,
+        role: 'assistant',
+        content: `已组织 ${agentNames || '默认协同组'} 完成一轮联合研判：\n\n1. GoalAgent 建议先明确任务目标与阶段性 KPI，避免讨论发散。\n2. AudienceAgent 认为应优先锁定核心受众画像，并补充行为触点数据。\n3. RiskAgent 提醒需要同步评估内容合规、舆情扩散和资源约束。\n\n综合建议：先形成“目标-受众-风险”三列表，再进入方案细化与执行拆解。`,
+        timestamp: new Date(),
+        agentName: '协同编排助手',
+      };
+      setMessages((prev) => [...prev, assistantMessage]);
+      setIsLoading(false);
+    }, 1800);
+  };
+
+  const handleStop = () => {
+    setIsLoading(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const toggleAgent = (agentId: string) => {
+    setSelectedAgents((prev) =>
+      prev.includes(agentId) ? prev.filter((id) => id !== agentId) : [...prev, agentId]
+    );
+  };
+
+  return (
+    <div className={`h-[calc(100vh-120px)] flex flex-col theme-bg rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+      <div className={`flex items-center justify-between px-6 py-4 border-b ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+        <div className="flex items-center gap-4">
+          <h1 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>多智能体协同问答</h1>
+          <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>多角色联合研判、共识汇总与风险补充</span>
+        </div>
+        <button
+          onClick={() => onNavigate('qa-records')}
+          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+            isDark ? 'bg-slate-700/50 text-slate-300 hover:bg-slate-600/50' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+          }`}
+        >
+          <History className="w-4 h-4" />
+          历史记录
+        </button>
+      </div>
+
+      <div className="flex-1 flex overflow-hidden">
+        <aside className={`${isLeftSidebarCollapsed ? 'w-14 p-2' : 'w-72 p-4'} border-r flex-shrink-0 overflow-y-auto transition-all duration-300 ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'}`}>
+          <div className={`flex items-center ${isLeftSidebarCollapsed ? 'justify-center' : 'justify-between'} mb-4`}>
+            {!isLeftSidebarCollapsed && (
+              <h3 className={`text-sm font-medium ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>参与智能体</h3>
+            )}
+            <button
+              type="button"
+              onClick={() => setIsLeftSidebarCollapsed(!isLeftSidebarCollapsed)}
+              className={`p-2 rounded-lg transition-all ${
+                isDark
+                  ? 'text-slate-400 hover:text-white hover:bg-slate-700/50'
+                  : 'text-gray-500 hover:text-red-600 hover:bg-red-50'
+              }`}
+              title={isLeftSidebarCollapsed ? '展开侧边栏' : '收起侧边栏'}
+            >
+              {isLeftSidebarCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
+            </button>
+          </div>
+
+          {!isLeftSidebarCollapsed && (<>
+          <div className="space-y-2">
+            {collaborativeAgents.map((agent) => {
+              const active = selectedAgents.includes(agent.id);
+              return (
+                <button
+                  key={agent.id}
+                  onClick={() => toggleAgent(agent.id)}
+                  className={`w-full p-3 rounded-xl text-left border transition-all ${
+                    active
+                      ? isDark ? 'bg-blue-600/20 border-blue-500/50' : 'bg-red-50 border-red-200'
+                      : isDark ? 'bg-slate-700/30 border-transparent hover:bg-slate-700/50' : 'bg-white border-gray-200 hover:bg-gray-50'
+                  }`}
+                >
+                  <div className="flex items-center gap-3">
+                    <div className={`w-10 h-10 rounded-2xl flex items-center justify-center ${active ? 'bg-gradient-to-br from-red-500 to-orange-400 text-white' : isDark ? 'bg-slate-600 text-slate-300' : 'bg-gray-100 text-gray-600'}`}>
+                      <Users className="w-5 h-5" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className={`text-sm font-medium truncate ${isDark ? 'text-white' : 'text-gray-900'}`}>{agent.name}</div>
+                      <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{agent.category}</div>
+                    </div>
+                    {active && <CheckCircle className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />}
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+          </>)}
+        </aside>
+
+        <section className="flex-1 flex flex-col overflow-hidden">
+          <div className="flex-1 overflow-y-auto p-4 space-y-4">
+            {messages.length === 0 ? (
+              <EmptyChatState
+                icon={<MessageCircle className="w-11 h-11 opacity-60" />}
+                title="发起一次协同会商"
+                description="输入任务背景，多个智能体会从不同视角生成联合建议"
+              />
+            ) : (
+              messages.map((message) => (
+                <ChatMessage key={message.id} message={message} assistantLabel={message.agentName || '协同编排助手'} />
+              ))
+            )}
+            {isLoading && <TypingIndicator label="多智能体正在协同分析并汇总观点" assistantLabel="协同编排助手" />}
+          </div>
+
+          <QAComposer
+            value={inputValue}
+            onChange={setInputValue}
+            onKeyDown={handleKeyDown}
+            onSubmit={handleSend}
+            onStop={handleStop}
+            onSave={() => alert('问答记录已保存')}
+            onCollect={() => alert('已添加到收藏')}
+            isLoading={isLoading}
+            placeholder="输入协同研判主题或任务背景..."
+            showUpload={false}
+          />
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export default CollaborativeQA;
diff --git a/web-code/components/qa/GAFrom.tsx b/web-code/components/qa/GAFrom.tsx
new file mode 100644
index 00000000..1da8f2fe
--- /dev/null
+++ b/web-code/components/qa/GAFrom.tsx
@@ -0,0 +1,29 @@
+import { Outlet, useNavigate } from 'react-router-dom';
+import React, { useState, useEffect, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+const zncmUrl = import.meta.env.VITE_AIPI_CONSUMER_URL  || '';
+import { requestCrudService } from '@/service/request-axios-service';
+const service = requestCrudService;
+const userInfo = localStorage.getItem('userInfo');
+const deerFlowUrl = 'https://ch1.b.uat.4.cn/mopeweb/#/login/';
+interface TaskPgFromProps {
+  gopath: string
+}
+const GAFromQA: React.FC<TaskPgFromProps> = ({gopath}) => {
+  const [deerFlow, setDeerFlow] = useState('https://ch1.b.uat.4.cn/mopeweb/#/login/');  // http://localhost:5174/#/
+  useEffect(() => {
+    if(userInfo) {
+      const userName = JSON.parse(userInfo).userName;
+      const gaUrl = deerFlowUrl + userName + `?goPath=${gopath}`
+      console.log('gaUrl', gaUrl)
+      setDeerFlow(gaUrl);
+    }
+  }, [gopath]);
+  return (
+    <div className="h-full flex flex-col">
+      <iframe className="h-[calc(100vh-92px)]" src={deerFlow}></iframe>
+    </div>
+  );
+}
+export default GAFromQA
diff --git a/web-code/components/qa/GAFromNew.tsx b/web-code/components/qa/GAFromNew.tsx
new file mode 100644
index 00000000..5159535b
--- /dev/null
+++ b/web-code/components/qa/GAFromNew.tsx
@@ -0,0 +1,29 @@
+import { Outlet, useNavigate } from 'react-router-dom';
+import React, { useState, useEffect, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+const zncmUrl = import.meta.env.VITE_AIPI_CONSUMER_URL  || '';
+import { requestCrudService } from '@/service/request-axios-service';
+const service = requestCrudService;
+const userInfo = localStorage.getItem('userInfo');
+const deerFlowUrl = 'https://ch1.b.uat.4.cn/xwtweb/#/login/';
+interface TaskPgFromProps {
+  gopath: string
+}
+const GAFromNewQA: React.FC<TaskPgFromProps> = ({gopath}) => {
+  const [deerFlow, setDeerFlow] = useState('https://ch1.b.uat.4.cn/xwtweb/#/login/');  // http://localhost:5174/#/
+  useEffect(() => {
+    if(userInfo) {
+      const userName = JSON.parse(userInfo).userName;
+      const gaUrl = deerFlowUrl + userName + `?pathTo=${gopath}`
+      console.log('gaUrl', gaUrl)
+      setDeerFlow(gaUrl);
+    }
+  }, [gopath]);
+  return (
+    <div className="h-full flex flex-col">
+      <iframe className="h-[calc(100vh-92px)]" src={deerFlow}></iframe>
+    </div>
+  );
+}
+export default GAFromNewQA
diff --git a/web-code/components/qa/GeneralQA-v1.tsx b/web-code/components/qa/GeneralQA-v1.tsx
new file mode 100644
index 00000000..7a3a9484
--- /dev/null
+++ b/web-code/components/qa/GeneralQA-v1.tsx
@@ -0,0 +1,2454 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  GitCompare,
+  MessageSquare,
+  CheckCircle,
+  AlertCircle,
+  ArrowDown,
+  ExternalLink,
+  Square,
+  X,
+} from 'lucide-react';
+import { Dialog, Select, Slider } from 'tdesign-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import { PageType } from '../../components/Sidebar';
+import { ChatMessage, EmptyChatState, QAAvatar, QAComposer, QASingleRagTrace, QAThinkingRound, QAThinkingTrace, RetrievalThinkingTrace, SingleRagAnswer, TypingIndicator } from './QACommon';
+import GeneralQAHeader from './GeneralQAHeader';
+import GeneralQAConfigSidebar from './GeneralQAConfigSidebar';
+import type { ComparePane, CompareResult, KnowledgeBaseChunk, Message, QAMode, SourceItem, ToolCallData, ViewMode } from './GeneralQA.types';
+import {
+  chatDataJSON,
+  createComparePane,
+  createMockSingleRagMessages,
+  createMultiRoundStreamTrace,
+  createThinkingTrace,
+  extractJsonObjects,
+  mapDocsToSources,
+  mapReferenceToSource,
+  parseSingleRagStream,
+} from './GeneralQA.mock';
+
+/**
+ * 通用问答组件
+ * 支持单轮RAG、多轮RAG、深度检索及结果对比功能
+ * @param onNavigate - 页面导航函数
+ * @param initialMode - 初始模式（可选）
+ */
+
+const zncmUrl = import.meta.env.VITE_API_BASE_URL || '';
+const chatUrl = import.meta.env.VITE_AIPI_CHAT_URL || '';
+const generateUrl = import.meta.env.VITE_AIPI_GENERATE_CHAT_URL || '';
+const knowledgeUrl = import.meta.env.VITE_AIPI_KNOWLEDGE_URL
+const GeneralQA: React.FC<{ onNavigate: (page: PageType) => void; initialMode?: string }> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 状态管理
+  // 视图模式：单一模式或对比模式
+  const [viewMode, setViewMode] = useState<ViewMode>('single');
+  // 问答模式：单轮RAG、多轮RAG、深度检索
+  const [qaMode, setQaMode] = useState<QAMode>('single-round');
+  // 对比模式下的左侧模式
+  const [compareLeftMode, setCompareLeftMode] = useState<QAMode>('single-round');
+  // 对比模式下的右侧模式
+  const [compareRightMode, setCompareRightMode] = useState<QAMode>('multi-round');
+
+  // 知识范围设置
+  const [knowledgeScope, setKnowledgeScope] = useState<'all' | 'specific-kb' | 'specific-domain'>('all');
+
+  // 回答偏好设置
+  const [answerStyle, setAnswerStyle] = useState<'concise' | 'detailed'>('detailed');
+  const [showSources, setShowSources] = useState(true);
+  const [showProcess, setShowProcess] = useState(false);
+
+  // 对比设置
+  const [compareLayout, setCompareLayout] = useState<'horizontal' | 'vertical'>('horizontal');
+  const [autoSummarizeDiff, setAutoSummarizeDiff] = useState(true);
+  const [recommendBetter, setRecommendBetter] = useState(true);
+
+  // 消息和结果状态
+  // `messages` 驱动单一模式聊天区；`compareResult` 驱动对比模式左右面板。
+  // `isPreConnectLoading` 表示请求已发起但还没拿到可展示的 assistant 消息，用于显示“正在连接/生成”的占位状态。
+  const [messages, setMessages] = useState<Message[]>([]);
+  // 用户当前输入的文本内容，用于绑定输入框
+  const [inputValue, setInputValue] = useState('');
+  // 是否正在处理请求（包含真实请求和模拟请求）
+  const [isLoading, setIsLoading] = useState(false);
+  // 是否处于"连接中"状态，表示已发起请求但还未收到可展示的响应
+  const [isPreConnectLoading, setIsPreConnectLoading] = useState(false);
+  // 存储发生的错误信息，用于显示错误提示
+  const [error, setError] = useState<string | null>(null);
+  // 对比模式下的结果数据，包含左右两侧的回答和来源信息
+  const [compareResult, setCompareResult] = useState<CompareResult | null>(null);
+  // 对比模式下用户输入的问题内容，用于左右对比时的统一输入
+  const [compareUserInput, setCompareUserInput] = useState('');
+  // 是否折叠左侧配置面板，true 为折叠，false 为展开
+  const [isLeftSidebarCollapsed, setIsLeftSidebarCollapsed] = useState(false);
+  // 是否启用自动滚动，当用户手动滚动时会自动关闭
+  const [isAutoScrollEnabled, setIsAutoScrollEnabled] = useState(true);
+  // 是否显示"滚动到底部"按钮，当有未读消息且用户已滚动时显示
+  const [showScrollToBottom, setShowScrollToBottom] = useState(false);
+  // 当前选中的引用来源，用于显示引用详情弹窗
+  const [selectedCitation, setSelectedCitation] = useState<SourceItem | null>(null);
+  const [editingMessageId, setEditingMessageId] = useState<string | null>(null);
+  const [editingThinking, setEditingThinking] = useState('');
+  const [editingAnswer, setEditingAnswer] = useState('');
+  // 模型参数设置弹窗状态。
+  // 这些值会进入单轮 RAG 的真实请求体；模拟流仍复用同一套 UI，方便接口恢复后无缝切换。
+  const [isModelSettingsOpen, setIsModelSettingsOpen] = useState(false);
+  const [modelName, setModelName] = useState('OpenAI3');
+  const [scoreThreshold, setScoreThreshold] = useState(0.5);
+  const [temperature, setTemperature] = useState(0.3);
+
+  // 当模型正在生成时，如果用户切换模式或跳转页面，先把原动作暂存到 ref，待用户确认停止后再执行。
+  // 使用 ref 而不是 state 可以避免弹窗确认过程触发额外渲染，也不会被闭包中的旧状态影响。
+  const pendingActionRef = useRef<(() => void) | null>(null);
+
+  // 防止 Enter keydown 和按钮 click 在 React 状态更新前重复触发提交。
+  const submitLockRef = useRef(false);
+
+  // 真实流式请求的 reader 句柄，用于“停止生成”时取消浏览器流读取。
+  const readerRef = useRef<any>(null);
+  // 对比模式会同时启动左右两路请求，因此分别保存 reader，保证可以单独停止某一侧生成。
+  const compareReaderRef = useRef<{
+    left: ReadableStreamDefaultReader<Uint8Array> | null;
+    right: ReadableStreamDefaultReader<Uint8Array> | null;
+  }>({ left: null, right: null });
+  // 多轮接口创建任务后会返回 task_id，这里预留给后续“按任务取消/查询状态”等能力。
+  const taskIdRef = useRef<string | null>(null);
+
+  // 本地模拟流没有真实 reader，因此用停止标记在异步循环中主动中断。
+  const mockSingleRoundStoppedRef = useRef(false);
+  const mockMultiRoundStoppedRef = useRef(false);
+  const chatListRef = useRef<HTMLDivElement | null>(null);
+
+  // 检索过程展示状态
+  const [searchProcess, setSearchProcess] = useState({
+    currentMode: '单轮RAG',
+    rounds: 1,
+    hits: 5,
+    queryRewrite: '',
+  });
+
+  /**
+   * 处理单轮 RAG 问答请求
+   * 
+   * 单轮 RAG 的处理流程：
+   * 1. 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
+   * 2. API 返回 SSE 流式响应，包含多个 JSON 对象
+   * 3. 逐个解析流式 JSON，提取 answer 和 docs 字段
+   * 4. 通过 applyAnswerToken 将流式 token 追加到消息的 thinkingMarkdown/answerMarkdown
+   * 5. 实时更新消息来源（sources）和检索统计（searchProcess）
+   * 
+   * @param query - 用户输入的问题文本
+   */
+  const handleSingleRoundRun = async (query: string) => {
+    // 清空之前的错误信息
+    setError(null);
+    // 标记开始加载，禁用提交按钮防止重复点击
+    setIsLoading(true);
+    // 标记"连接中"状态，显示加载占位符
+    setIsPreConnectLoading(true);
+    // 用于存储当前 assistant 消息的 ID，以便后续更新该消息内容
+    let assistantId = '';
+
+    // 标志位：当前处理的 token 是否处于 <think>... 标签内（解析思考过程）
+    let inThink = false;
+    // 标志位：是否已经遇到过 <think> 标签开始解析思考内容
+    let thinkStarted = false;
+
+    /**
+     * 将流式接收到的 token 应用到对应消息的 singleRagTrace 中
+     * 该函数会解析 token 中的 <think>... 标签，将思考过程和回答分开存储
+     * @param token - 从流中接收到的文本片段
+     */
+    const applyAnswerToken = (token: string) => {
+      setMessages((prev) => prev.map((msg) => {
+        // 跳过不是当前 assistant 消息或没有 singleRagTrace 的消息
+        if (msg.id !== assistantId || !msg.singleRagTrace) return msg;
+
+        // 获取当前消息的思考和回答内容
+        let thinkingMarkdown = msg.singleRagTrace.thinkingMarkdown;
+        let answerMarkdown = msg.singleRagTrace.answerMarkdown;
+        let thinkingComplete = msg.singleRagTrace.thinkingComplete || false;
+        // 剩余未处理的 token 内容
+        let remaining = token;
+
+        // 循环处理所有 token，直到处理完毕
+        while (remaining) {
+          // 当前处于 <think> 标签内（解析思考过程），查找结束标签 
+          if (inThink) {
+            const endIdx = remaining.indexOf('</think>');
+            if (endIdx === -1) {
+              thinkingMarkdown += remaining;
+              remaining = '';
+            } else {
+              thinkingMarkdown += remaining.slice(0, endIdx);
+              remaining = remaining.slice(endIdx + '</think>'.length);
+              inThink = false;
+              thinkingComplete = true;
+            }
+          } else {
+            const startIdx = remaining.indexOf('<think>');
+            if (startIdx === -1) {
+              answerMarkdown += remaining;
+              remaining = '';
+            } else {
+              answerMarkdown += remaining.slice(0, startIdx);
+              remaining = remaining.slice(startIdx + '<think>'.length);
+              inThink = true;
+              thinkStarted = true;
+            }
+          }
+        }
+
+        // 返回更新后的消息对象，保留 singleRagTrace 中的所有字段
+        return {
+          ...msg,
+          singleRagTrace: {
+            ...msg.singleRagTrace,
+            // 更新思考和回答的 markdown 内容
+            thinkingMarkdown,
+            answerMarkdown,
+            // 只有当已经开始解析思考内容时才更新 thinkingComplete 标志
+            thinkingComplete: thinkStarted ? thinkingComplete : true,
+          },
+        };
+      }));
+    };
+
+    try {
+      // 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
+      const response = await fetch(`${chatUrl}/chat/knowledge_base_chat_tiaoshi`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        // 请求体包含查询内容、知识库名称、检索参数、模型配置等
+        body: JSON.stringify({
+          query,                        // 用户输入的问题
+          knowledge_base_name: [],      // 知识库名称列表，空数组表示使用所有知识库
+          top_k: 5,                     // 返回最相似的 5 条结果
+          score_threshold: scoreThreshold, // 相似度阈值，过滤低质量检索结果
+          history: [],                  // 对话历史，用于多轮对话
+          stream: true,                 // 启用流式响应
+          model_name: modelName,         // 使用的模型名称
+          temperature,                   // 生成温度，控制随机性
+          prompt_name: 'default',        // 使用的提示词模板
+          local_doc_url: false,         // 是否返回本地文档 URL
+        }),
+      });
+
+      // 检查 HTTP 响应状态
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      // 确保响应体存在（SSE 流需要 body）
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      // 收到有效响应后，关闭"连接中"状态，开始显示实际内容
+      setIsPreConnectLoading(false);
+
+      // 生成唯一 ID 用于标识这条 assistant 消息
+      assistantId = `assistant-${Date.now()}`;
+      // 初始化思考过程追踪对象
+      const initialTrace: QASingleRagTrace = {
+        title: '单轮 RAG 思考过程',
+        thinkingMarkdown: '', // 思考过程内容
+        answerMarkdown: '',    // 最终回答内容
+        thinkingComplete: false, // 思考是否完成
+      };
+      // 将 assistant 消息添加到消息列表中
+      setMessages((prev) => [...prev, {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        singleRagTrace: initialTrace,
+        sources: [], // 初始为空，随着检索结果更新
+      }]);
+
+      // 获取响应体的流式读取器
+      const reader = response.body.getReader();
+      // 保存 reader 引用，用于"停止生成"功能
+      readerRef.current = reader;
+      // 创建文本解码器，将二进制数据转换为字符串
+      const decoder = new TextDecoder();
+      // buffer 用于暂存未完成的 JSON 片段
+      let buffer = '';
+      let docsList: any[] = [];
+      try {
+        // 持续读取流数据，直到流结束
+        while (true) {
+          // 读取下一个数据块
+          const { done, value } = await reader.read();
+          // done 为 true 时表示流已结束
+          if (done) break;
+
+          // 将二进制数据解码并追加到 buffer
+          buffer += decoder.decode(value, { stream: true });
+          // 从 buffer 中提取完整的 JSON 对象
+          const extracted = extractJsonObjects(buffer);
+          if (buffer.includes('docs')) {
+            try {
+              docsList = chatDataJSON(buffer).docsList || [];
+            } catch (error: any) {
+              console.log(error);
+            }
+          }
+          // 剩余无法解析的内容保留到下次处理
+          buffer = extracted.rest;
+
+          // 遍历所有提取到的 JSON 对象
+          for (const jsonText of extracted.objects) {
+            try {
+              // 解析知识库返回的 JSON 片段
+              const parsed = parseKnowledgeBaseChunk(jsonText);
+              // 如果有回答内容，追加到消息的 answerMarkdown
+              if (typeof parsed.answer === 'string') {
+                applyAnswerToken(parsed.answer);
+              }
+              // 如果有检索文档，更新消息的来源信息
+              if (parsed.docs) {
+                // 将 docs 转换为 sources 格式
+                const mappedDocs = docsList.map((item: any) => ({
+                  title: item.m_title,
+                  type: item.source1,
+                  snippet: item.m_content,
+                  source: item.source1,
+                  time: item.m_publish,
+                  url: item.recUuid,
+                  content: item.m_content || '',
+                }));
+                // 更新检索统计信息
+                setSearchProcess((prev) => ({ ...prev, hits: prev.hits + mappedDocs.length }));
+                // 更新消息的来源列表
+                setMessages((prev) => prev.map((msg) => (
+                  msg.id === assistantId ? { ...msg, sources: mappedDocs } : msg
+                )));
+              }
+            } catch (parseError) {
+              // 解析错误不影响主流程，记录日志继续处理
+              console.error('单轮RAG流式JSON解析错误:', parseError);
+            }
+          }
+        }
+      } finally {
+        // 流读取完成后，释放 reader 锁并清空引用
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      // 请求失败处理
+      console.error('单轮RAG请求失败:', runError);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+    }
+  };
+
+  /**
+ * 处理单轮 RAG 问答请求
+ * 
+ * 单轮 RAG 的处理流程：
+ * 1. 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
+ * 2. API 返回 SSE 流式响应，包含多个 JSON 对象
+ * 3. 逐个解析流式 JSON，提取 answer 和 docs 字段
+ * 4. 通过 applyAnswerToken 将流式 token 追加到消息的 thinkingMarkdown/answerMarkdown
+ * 5. 实时更新消息来源（sources）和检索统计（searchProcess）
+ * 
+ * @param query - 用户输入的问题文本
+ */
+  const chatRun = async (query: string) => {
+    // 清空之前的错误信息
+    setError(null);
+    // 标记开始加载，禁用提交按钮防止重复点击
+    setIsLoading(true);
+    // 标记"连接中"状态，显示加载占位符
+    setIsPreConnectLoading(true);
+    // 用于存储当前 assistant 消息的 ID，以便后续更新该消息内容
+    let assistantId = '';
+
+    // 标志位：当前处理的 token 是否处于 <think>... 标签内（解析思考过程）
+    let inThink = false;
+    // 标志位：是否已经遇到过 <think> 标签开始解析思考内容
+    let thinkStarted = false;
+
+    /**
+     * 将流式接收到的 token 应用到对应消息的 singleRagTrace 中
+     * 该函数会解析 token 中的 <think>... 标签，将思考过程和回答分开存储
+     * @param token - 从流中接收到的文本片段
+     */
+    const applyAnswerToken = (token: string) => {
+      setMessages((prev) => prev.map((msg) => {
+        // 跳过不是当前 assistant 消息或没有 singleRagTrace 的消息
+        if (msg.id !== assistantId || !msg.singleRagTrace) return msg;
+
+        // 获取当前消息的思考和回答内容
+        let thinkingMarkdown = msg.singleRagTrace.thinkingMarkdown;
+        let answerMarkdown = msg.singleRagTrace.answerMarkdown;
+        let thinkingComplete = msg.singleRagTrace.thinkingComplete || false;
+        // 剩余未处理的 token 内容
+        let remaining = token;
+        console.log('remaining', remaining)
+        // 当前处于 <think> 标签内（解析思考过程），查找结束标签 
+        while (remaining) {
+          if (inThink) {
+            const endIdx = remaining.indexOf('</think>');
+            if (endIdx === -1) {
+              thinkingMarkdown += remaining;
+              remaining = '';
+            } else {
+              thinkingMarkdown += remaining.slice(0, endIdx);
+              remaining = remaining.slice(endIdx + '</think>'.length);
+              inThink = false;
+              thinkingComplete = true;
+            }
+          } else {
+            const startIdx = remaining.indexOf('<think>');
+            console.log('startIdx', startIdx)
+            if (startIdx === -1) {
+              answerMarkdown += remaining;
+              remaining = '';
+            } else {
+              answerMarkdown += remaining.slice(0, startIdx);
+              remaining = remaining.slice(startIdx + '<think>'.length);
+              inThink = true;
+              thinkStarted = true;
+            }
+          }
+        }
+
+        // 返回更新后的消息对象，保留 singleRagTrace 中的所有字段
+        return {
+          ...msg,
+          singleRagTrace: {
+            ...msg.singleRagTrace,
+            // 更新思考和回答的 markdown 内容
+            thinkingMarkdown,
+            answerMarkdown,
+            // 只有当已经开始解析思考内容时才更新 thinkingComplete 标志
+            thinkingComplete: thinkStarted ? thinkingComplete : true,
+          },
+        };
+      }));
+    };
+
+    try {
+      // 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
+      const response = await fetch(`${chatUrl}/chat/chat`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        // 请求体包含查询内容、知识库名称、检索参数、模型配置等
+        body: JSON.stringify({
+          query,                        // 用户输入的问题
+          history: [],                  // 对话历史，用于多轮对话
+          stream: true,                 // 启用流式响应
+          model_name: modelName,         // 使用的模型名称
+          temperature,                   // 生成温度，控制随机性
+          prompt_name: 'default',        // 使用的提示词模板
+          max_tokens: 1000
+        }),
+      });
+
+      // 检查 HTTP 响应状态
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      // 确保响应体存在（SSE 流需要 body）
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      // 收到有效响应后，关闭"连接中"状态，开始显示实际内容
+      setIsPreConnectLoading(false);
+
+      // 生成唯一 ID 用于标识这条 assistant 消息
+      assistantId = `assistant-${Date.now()}`;
+      // 初始化思考过程追踪对象
+      const initialTrace: QASingleRagTrace = {
+        title: '大模型思考过程',
+        thinkingMarkdown: '', // 思考过程内容
+        answerMarkdown: '',    // 最终回答内容
+        thinkingComplete: false, // 思考是否完成
+      };
+      // 将 assistant 消息添加到消息列表中
+      setMessages((prev) => [...prev, {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        singleRagTrace: initialTrace,
+        sources: [], // 初始为空，随着检索结果更新
+      }]);
+
+      // 获取响应体的流式读取器
+      const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
+      // 保存 reader 引用，用于"停止生成"功能
+      readerRef.current = reader;
+      // 创建文本解码器，将二进制数据转换为字符串
+      const decoder = new TextDecoder();
+      // buffer 用于暂存未完成的 JSON 片段
+
+      try {
+        // 持续读取流数据，直到流结束
+        while (true) {
+          // 读取下一个数据块
+          const { done, value } = await reader.read();
+          // done 为 true 时表示流已结束
+          if (done) break;
+          applyAnswerToken(value);
+        }
+      } finally {
+        // 流读取完成后，释放 reader 锁并清空引用
+        if (readerRef.current) {
+          // readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      // 请求失败处理
+      console.error('单轮RAG请求失败:', runError);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+    }
+  };
+
+  /**
+   * 解析类 JavaScript 对象字符串中的字符串值。
+   *
+   * 后端单轮 RAG 流有时不是严格 JSON，而是 `{answer: '...'}` 这种对象片段。
+   * 该函数只负责把单/双引号包裹的 answer 内容还原成普通字符串，保留换行和转义字符。
+   */
+  const parseLooseStringValue = (rawValue: string): string => {
+    try {
+      return JSON.parse(rawValue) as string;
+    } catch {
+      const trimmedValue = rawValue.trim();
+      if (trimmedValue.startsWith("'") && trimmedValue.endsWith("'")) {
+        return trimmedValue
+          .slice(1, -1)
+          .replace(/\\n/g, '\n')
+          .replace(/\\r/g, '\r')
+          .replace(/\\t/g, '\t')
+          .replace(/\\'/g, "'")
+          .replace(/\\\\/g, '\\');
+      }
+      throw new Error(`无法解析字符串值: ${rawValue}`);
+    }
+  };
+
+  const parseLooseValue = (rawValue: string): unknown => {
+    try {
+      return JSON.parse(rawValue);
+    } catch {
+      return parseLooseStringValue(rawValue);
+    }
+  };
+
+  /**
+   * 将单轮知识库流中的一个对象片段转换为统一数据结构。
+   *
+   * 兼容两类返回：
+   * - 严格 JSON：`{"answer":"..."}` / `{"docs":[...]}`
+   * - 宽松对象：`{answer: '...'}` / `{docs: [...]}`
+   *
+   * 真实接口和本地模拟都走同一个解析函数，确保联调时只需要替换数据源，不需要改 UI 更新逻辑。
+   */
+  const parseKnowledgeBaseChunk = (jsonText: string): KnowledgeBaseChunk => {
+    try {
+      return JSON.parse(jsonText) as KnowledgeBaseChunk;
+    } catch {
+      const objectText = jsonText.trim();
+      const answerMatch = objectText.match(/^\{\s*answer\s*:\s*([\s\S]*)\s*\}$/);
+      if (answerMatch) {
+        const rawValue = answerMatch[1].trim();
+        return { answer: parseLooseStringValue(rawValue) };
+      }
+
+      const docsMatch = objectText.match(/^\{\s*docs\s*:\s*([\s\S]*)\s*\}$/);
+      if (docsMatch) {
+        return { docs: parseLooseValue(docsMatch[1]) as KnowledgeBaseChunk['docs'] };
+      }
+
+      const normalizedText = objectText.replace(/([{,]\s*)(answer|docs)(\s*:)/g, '$1"$2"$3');
+      return JSON.parse(normalizedText) as KnowledgeBaseChunk;
+    }
+  };
+
+  const sleep = (ms: number) => new Promise((resolve) => {
+    window.setTimeout(resolve, ms);
+  });
+
+  /**
+   * 生成单轮 RAG 的本地模拟原始流。
+   *
+   * 返回值刻意模拟接口的“对象字符串片段”形态，例如：
+   * `{answer: '，并附'}{answer: '带引用'}` 和 `{docs: [...]}`。
+   * 调用方仍通过 `extractJsonObjects` 拆包，再通过 `parseKnowledgeBaseChunk` 解析，
+   * 这样可以覆盖粘包、连续对象和 docs 延迟到达等真实联调场景。
+   */
+  const createMockSingleRoundStream = (query: string): string[] => {
+    const answer = `<think>用户正在使用单轮 RAG 提问：“${query}”。\n\n先从知识库里定位与问题最相关的片段，再把证据组织成可追溯的回答。\n</think>我已基于模拟知识库完成检索，并按单轮 RAG 的方式生成回答。\n\n### 回答要点\n\n1. **先检索**：系统会围绕用户问题召回最相关的知识片段。[[1]]\n2. **再增强**：把召回内容注入上下文，约束模型只围绕证据回答。[[2]]\n3. **最后生成**：模型输出结论，并附带引用编号，方便用户核验来源。[[3]]\n\n当前内容是本地模拟的流式返回，用来验证一个一个 \`{answer: '模型输出'}\` 推送时的打字机效果。`;
+
+    const docs: KnowledgeBaseChunk['docs'] = [
+      {
+        title: '单轮 RAG 接入说明',
+        content: '单轮 RAG 通常包含问题输入、TopK 检索、Prompt 组装、模型生成和引用返回几个步骤。',
+        source: '知识库 / RAG 接入说明.md',
+        snippet: '单轮 RAG 通常包含问题输入、TopK 检索、Prompt 组装、模型生成和引用返回几个步骤。',
+      },
+      {
+        title: '知识库问答接口协议',
+        content: "流式响应会持续返回 JSON 对象，每个对象可包含 answer 字段；结束或中间节点可携带 docs 参考资料。",
+        source: '接口文档 / knowledge_base_chat.json',
+        snippet: '流式响应会持续返回 JSON 对象，每个对象可包含 answer 字段。',
+      },
+      {
+        title: '引用展示规范',
+        content: '回答中的引用编号应与 docs 顺序保持一致，前端可将 docs 映射为来源卡片供用户查看。',
+        source: '产品规范 / 引用展示规范.docx',
+        snippet: '回答中的引用编号应与 docs 顺序保持一致。',
+      },
+    ];
+
+    const rawChunks: string[] = [];
+    const toSingleQuotedValue = (value: string) => `'${value
+      .replace(/\\/g, '\\\\')
+      .replace(/\n/g, '\\n')
+      .replace(/\r/g, '\\r')
+      .replace(/\t/g, '\\t')
+      .replace(/'/g, "\\'")}'`;
+    let pendingObjectText = '';
+    const pushAnswerObject = (answerToken: string) => {
+      const objectText = `{answer: ${toSingleQuotedValue(answerToken)}}`;
+      if (pendingObjectText) {
+        rawChunks.push(`${pendingObjectText}${objectText}`);
+        pendingObjectText = '';
+        return;
+      }
+      if (answerToken === '，并附') {
+        pendingObjectText = objectText;
+        return;
+      }
+      rawChunks.push(objectText);
+    };
+    const thinkStart = '<think>';
+    const thinkEnd = '</think>';
+    const startIndex = answer.indexOf(thinkStart);
+    const endIndex = answer.indexOf(thinkEnd);
+
+    if (startIndex === -1 || endIndex === -1) {
+      for (let index = 0; index < answer.length; index += 3) {
+        pushAnswerObject(answer.slice(index, index + 3));
+      }
+    } else {
+      const beforeThink = answer.slice(0, startIndex);
+      const thinkingText = answer.slice(startIndex + thinkStart.length, endIndex);
+
+      if (beforeThink) pushAnswerObject(beforeThink);
+      pushAnswerObject(thinkStart);
+      for (let index = 0; index < thinkingText.length; index += 3) {
+        pushAnswerObject(thinkingText.slice(index, index + 3));
+      }
+      pushAnswerObject(thinkEnd);
+      const finalAnswerTokens = [
+        '我已基于模拟知识库完成检索',
+        '，并附',
+        '带引用',
+        '带引用',
+        '。\n\n### 回答要点\n\n',
+        '1. **先检索**：系统会围绕用户问题召回最相关的知识片段。[[1]]\n',
+        '2. **再增强**：把召回内容注入上下文，约束模型只围绕证据回答。[[2]]\n',
+        '3. **最后生成**：模型输出结论，并附带引用编号，方便用户核验来源。[[3]]\n\n',
+        '当前内容是本地模拟的对象字符串流式返回，用来验证连续多个 `{answer: \'模型输出\'}` 和 `{docs: ...}` 的处理效果。',
+      ];
+      finalAnswerTokens.forEach(pushAnswerObject);
+    }
+
+    if (pendingObjectText) {
+      rawChunks.push(pendingObjectText);
+    }
+    rawChunks.push(`{docs: ${JSON.stringify(docs)}}`);
+    return rawChunks;
+  };
+
+  /**
+   * 执行单轮 RAG 本地模拟。
+   *
+   * 模拟过程与真实接口保持一致：先创建空 assistant 消息，再持续解析对象字符串流，
+   * answer 片段进入打字机效果，docs 片段映射为引用来源。
+   */
+  const handleMockSingleRoundRun = async (query: string) => {
+    setError(null);
+    setIsLoading(true);
+    setIsPreConnectLoading(true);
+    mockSingleRoundStoppedRef.current = false;
+
+    const assistantId = `assistant-${Date.now()}`;
+    let inThink = false;
+    let thinkStarted = false;
+
+    const applyAnswerToken = (token: string) => {
+      setMessages((prev) => prev.map((msg) => {
+        if (msg.id !== assistantId || !msg.singleRagTrace) return msg;
+
+        let thinkingMarkdown = msg.singleRagTrace.thinkingMarkdown;
+        let answerMarkdown = msg.singleRagTrace.answerMarkdown;
+        let thinkingComplete = msg.singleRagTrace.thinkingComplete || false;
+        let remaining = token;
+        console.log(remaining);
+        while (remaining) {
+          if (inThink) {
+            const endIdx = remaining.indexOf('</think>');
+            if (endIdx === -1) {
+              thinkingMarkdown += remaining;
+              remaining = '';
+            } else {
+              thinkingMarkdown += remaining.slice(0, endIdx);
+              remaining = remaining.slice(endIdx + '</think>'.length);
+              inThink = false;
+              thinkingComplete = true;
+            }
+          } else {
+            const startIdx = remaining.indexOf('<think>');
+            if (startIdx === -1) {
+              answerMarkdown += remaining;
+              remaining = '';
+            } else {
+              answerMarkdown += remaining.slice(0, startIdx);
+              remaining = remaining.slice(startIdx + '<think>'.length);
+              inThink = true;
+              thinkStarted = true;
+            }
+          }
+        }
+
+        return {
+          ...msg,
+          singleRagTrace: {
+            ...msg.singleRagTrace,
+            thinkingMarkdown,
+            answerMarkdown,
+            thinkingComplete: thinkStarted ? thinkingComplete : true,
+          },
+        };
+      }));
+    };
+
+    try {
+      await sleep(300);
+      if (mockSingleRoundStoppedRef.current) return;
+      setIsPreConnectLoading(false);
+
+      const initialTrace: QASingleRagTrace = {
+        title: '单轮 RAG 思考过程',
+        thinkingMarkdown: '',
+        answerMarkdown: '',
+        thinkingComplete: false,
+      };
+      setMessages((prev) => [...prev, {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        singleRagTrace: initialTrace,
+        sources: [],
+      }]);
+
+      const streamChunks = createMockSingleRoundStream(query);
+      let buffer = '';
+      for (const rawChunk of streamChunks) {
+        if (mockSingleRoundStoppedRef.current) break;
+
+        buffer += rawChunk;
+        const extracted = extractJsonObjects(buffer);
+        buffer = extracted.rest;
+
+        for (const jsonText of extracted.objects) {
+          try {
+            const chunk = parseKnowledgeBaseChunk(jsonText);
+            if (typeof chunk.answer === 'string') {
+              applyAnswerToken(chunk.answer);
+              await sleep(45);
+            }
+            if (chunk.docs) {
+              const mappedDocs = mapDocsToSources(chunk.docs);
+              setSearchProcess((prev) => ({ ...prev, hits: prev.hits + mappedDocs.length }));
+              setMessages((prev) => prev.map((msg) => (
+                msg.id === assistantId ? { ...msg, sources: [...(msg.sources || []), ...mappedDocs] } : msg
+              )));
+            }
+          } catch (parseError) {
+            console.error('单轮RAG模拟流式JSON解析错误:', parseError);
+          }
+        }
+      }
+    } catch (runError) {
+      console.error('单轮RAG模拟流失败:', runError);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+    } finally {
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      mockSingleRoundStoppedRef.current = false;
+      submitLockRef.current = false;
+    }
+  };
+
+  /**
+   * 处理多轮真实接口里的工具调用事件。
+   *
+   * `show_text` 用于追加思考或最终回答；`local_search` / `tavily_search` 用于把检索结果填入最近一轮。
+   * 这里保持事件到 UI trace 的单向映射，避免请求层和展示层互相耦合。
+   */
+  const handleToolCall = (toolData: ToolCallData, assistantId: string) => {
+    setMessages((prevMessages) => prevMessages.map((msg) => {
+      if (msg.id !== assistantId || msg.role !== 'assistant' || !msg.thinkingTrace) return msg;
+
+      const trace = { ...msg.thinkingTrace, rounds: [...msg.thinkingTrace.rounds] };
+      const lastRound = trace.rounds[trace.rounds.length - 1];
+
+      switch (toolData.tool_name) {
+        case 'show_text': {
+          const chatText = toolData.tool_input.text || '';
+          if (chatText.includes('<think>')) {
+            const thinkContent = chatText.replace('<think>', '').replace('</think>', '').trim();
+            if (trace.rounds[0].title !== '正在准备检索') {
+              lastRound.queryLoading = false;
+              // lastRound.queryShow = lastRound.retrievals.length > 0;
+              trace.rounds.push({
+                id: `round-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+                title: '思考中',
+                thoughtMarkdown: thinkContent,
+                query: '',
+                queryLoading: true,
+                queryShow: true,
+                retrievals: [],
+              });
+            } else {
+              // lastRound.queryLoading = false;
+              trace.rounds[0].title = '思考过程'
+              trace.rounds[0].thoughtMarkdown = thinkContent;
+            }
+          } else {
+            lastRound.queryLoading = false;
+            trace.finalAnswerMarkdown += chatText;
+          }
+          break;
+        }
+        case 'tavily_search':
+        case 'local_search': {
+          if (toolData.tool_input.result && lastRound) {
+            try {
+              const result = JSON.parse(toolData.tool_input.result) as {
+                query?: string;
+                results?: Array<{ title?: string; content?: string; url?: string }>;
+              };
+
+              lastRound.query = result.query || lastRound.query;
+              lastRound.queryLoading = false;
+              lastRound.title = toolData.tool_name === 'local_search' ? '本地知识检索' : '联网检索';
+              lastRound.retrievals = (result.results || []).map((item, idx) => ({
+                id: `${toolData.tool_name}-${idx}`,
+                title: item.title || '未命名结果',
+                content: item.content || '',
+                source: item.url || '',
+              }));
+            } catch (parseError) {
+              console.error('搜索结果JSON解析错误:', parseError);
+            }
+          }
+          break;
+        }
+        case 'google_search': {
+          if (toolData.tool_input.result && lastRound) {
+            try {
+              const result = JSON.parse(toolData.tool_input.result) as {
+                organic: Array<{ title?: string; content?: string; url?: string; recUuid?: string; publish_time?:string }>;
+              };
+              lastRound.queryLoading = false;
+              lastRound.title = '思考过程';
+              lastRound.retrievals = (result.organic || []).map((item, idx) => ({
+                id: item.recUuid,
+                title: item.title || '未命名结果',
+                content: item.content || '',
+                source: item.recUuid || '',
+                time: item.publish_time,
+                recUuid: item.recUuid,
+                type: 'more'
+              }));
+            } catch (parseError) {
+              console.error('搜索结果JSON解析错误:', parseError);
+            }
+          } else if(toolData.tool_input.q) {
+            lastRound.query = toolData.tool_input.q;
+          }
+          break;
+        }
+        default:
+          break;
+      }
+
+      return {
+        ...msg,
+        thinkingTrace: trace,
+      };
+    }));
+  };
+
+  /**
+   * 构造多轮 RAG 模拟 trace 的初始骨架。
+   *
+   * 每一轮先展示 thought/query/loading，随后 `handleMockMultiRoundRun` 再按轮次填充 retrievals，
+   * 用来模拟“检索过程逐步展开”的体验。
+   */
+  const createMockMultiRoundTrace = (query: string): QAThinkingTrace => ({
+    title: '多轮检索思考过程',
+    rounds: [
+      {
+        id: `mock-round-1-${Date.now()}`,
+        title: '第一轮：理解问题并确定主检索方向',
+        thoughtMarkdown: `用户问题是：“${query}”。\n\n先判断问题核心意图，并抽取关键词：\n\n- 业务对象\n- 关键约束\n- 需要引用的制度或知识片段\n\n第一轮先用原始问题做宽召回，尽量覆盖相关资料。`,
+        query: `${query} 相关制度 知识库 处理流程`,
+        queryLoading: true,
+        retrievals: [],
+        queryShow: true,
+      },
+      {
+        id: `mock-round-2-${Date.now()}`,
+        title: '第二轮：基于首轮结果改写 Query',
+        thoughtMarkdown: '首轮检索获得了基础资料，但仍需要补充更精确的执行口径。\n\n本轮将问题改写为更适合检索的短查询，并优先召回流程、规范和案例类资料。',
+        query: `${query} 操作规范 适用条件 案例`,
+        queryLoading: true,
+        retrievals: [],
+        queryShow: true,
+      },
+      {
+        id: `mock-round-3-${Date.now()}`,
+        title: '第三轮：补充边界条件并交叉验证',
+        thoughtMarkdown: '前两轮已经覆盖主要结论，最后继续检索边界条件，避免回答过于绝对。\n\n重点确认：\n\n1. 是否存在例外场景\n2. 是否需要人工复核\n3. 引用资料之间是否一致',
+        query: `${query} 例外场景 风险点 人工复核`,
+        queryLoading: true,
+        retrievals: [],
+        queryShow: true,
+      },
+    ],
+    finalAnswerMarkdown: '',
+  });
+
+  // 多轮 RAG 每一轮对应一组检索结果；数组下标与 trace.rounds 的下标保持一致。
+  const mockMultiRoundRetrievals: QAThinkingRound['retrievals'][] = [
+    [
+      {
+        id: 'mock-multi-r1-1',
+        title: '业务知识库问答配置指南',
+        content: '多轮检索适合复杂问题，系统会先宽召回，再根据首轮结果继续改写查询并补充证据。',
+        source: '知识库 / 业务知识库问答配置指南.md',
+      },
+      {
+        id: 'mock-multi-r1-2',
+        title: '智能问答流程说明',
+        content: '当用户问题包含多个约束条件时，需要保留原始问题，同时拆分出检索关键词用于后续召回。',
+        source: '流程库 / 智能问答流程说明.pdf',
+      },
+    ],
+    [
+      {
+        id: 'mock-multi-r2-1',
+        title: 'RAG Query 改写最佳实践',
+        content: 'Query 改写应减少口语表达，突出实体、动作、条件和目标资料类型，以提升命中率。',
+        source: '技术资料 / RAG Query 改写最佳实践.docx',
+      },
+      {
+        id: 'mock-multi-r2-2',
+        title: '知识库召回与重排策略',
+        content: '建议先召回 Top50，再通过重排模型筛选 Top5 至 Top8 作为最终上下文。',
+        source: '算法组 / 知识库召回与重排策略.pptx',
+      },
+      {
+        id: 'mock-multi-r2-3',
+        title: '企业知识问答案例集',
+        content: '复杂业务问答通常需要结合制度、FAQ、历史案例三类资料综合判断。',
+        source: '案例库 / 企业知识问答案例集.xlsx',
+      },
+    ],
+    [
+      {
+        id: 'mock-multi-r3-1',
+        title: '回答可信度与引用规范',
+        content: '生成答案时应明确结论依据，并在涉及例外条件时给出风险提示或人工复核建议。',
+        source: '规范库 / 回答可信度与引用规范.md',
+      },
+      {
+        id: 'mock-multi-r3-2',
+        title: '知识库答案质检规则',
+        content: '当多个资料结论不完全一致时，应优先采用发布时间较新、来源更权威的资料。',
+        source: '质检库 / 知识库答案质检规则.pdf',
+      },
+    ],
+  ];
+
+  /**
+   * 执行多轮 RAG 本地模拟。
+   *
+   * 该方法按轮次延迟填充检索结果，最后分段追加最终回答，模拟真实多轮检索的“思考-召回-总结”节奏。
+   * 完成后把所有 retrievals 汇总为 sources，供引用来源折叠面板展示。
+   */
+  const handleMockMultiRoundRun = async (query: string) => {
+    setError(null);
+    setIsLoading(true);
+    setIsPreConnectLoading(true);
+    mockMultiRoundStoppedRef.current = false;
+
+    const assistantId = `assistant-${Date.now()}`;
+
+    try {
+      await sleep(350);
+      if (mockMultiRoundStoppedRef.current) return;
+      setIsPreConnectLoading(false);
+
+      const trace = createMockMultiRoundTrace(query);
+      setMessages((prev) => [...prev, {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        thinkingTrace: trace,
+        sources: [],
+      }]);
+
+      for (let roundIndex = 0; roundIndex < trace.rounds.length; roundIndex += 1) {
+        if (mockMultiRoundStoppedRef.current) break;
+        await sleep(700);
+        setMessages((prev) => prev.map((msg) => {
+          if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
+          const rounds = msg.thinkingTrace.rounds.map((round, idx) => (
+            idx === roundIndex
+              ? {
+                ...round,
+                queryLoading: false,
+                retrievals: mockMultiRoundRetrievals[roundIndex],
+              }
+              : round
+          ));
+          return {
+            ...msg,
+            thinkingTrace: {
+              ...msg.thinkingTrace,
+              rounds,
+            },
+          };
+        }));
+      }
+
+      const finalAnswerTokens = [
+        `基于多轮检索，我对“${query}”形成如下结论：\n\n`,
+        '### 综合结论\n\n',
+        '1. **先做宽召回**：第一轮保留原始问题语义，覆盖相关制度、流程和 FAQ。\n',
+        '2. **再做 Query 改写**：第二轮把问题拆成实体、动作、条件，提升命中文档质量。\n',
+        '3. **最后做交叉验证**：第三轮补充边界条件和风险点，避免只依据单一资料下结论。\n\n',
+        '### 建议\n\n',
+        '如果是生产环境，可以把多轮检索结果按“相关性、权威性、时效性”排序，再把 TopK 证据注入模型生成最终回答。',
+      ];
+
+      for (const token of finalAnswerTokens) {
+        if (mockMultiRoundStoppedRef.current) break;
+        setMessages((prev) => prev.map((msg) => {
+          if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
+          return {
+            ...msg,
+            thinkingTrace: {
+              ...msg.thinkingTrace,
+              finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${token}`,
+            },
+          };
+        }));
+        await sleep(180);
+      }
+
+      const sources = mockMultiRoundRetrievals.flat().map((item) => ({
+        title: item.title,
+        type: '参考资料',
+        snippet: item.content,
+        source: item.source,
+        content: item.content,
+      }));
+      setSearchProcess((prev) => ({
+        ...prev,
+        rounds: trace.rounds.length,
+        hits: sources.length,
+        queryRewrite: '原问题 → 宽召回 → Query 改写 → 边界条件补充 → 综合回答',
+      }));
+      setMessages((prev) => prev.map((msg) => (
+        msg.id === assistantId ? { ...msg, sources } : msg
+      )));
+    } catch (runError) {
+      console.error('多轮RAG模拟失败:', runError);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+    } finally {
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      mockMultiRoundStoppedRef.current = false;
+      submitLockRef.current = false;
+    }
+  };
+
+  /**
+   * 处理真实多轮 RAG 请求。
+   *
+   * 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
+   * 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
+   */
+  const handleRun = async (query: string) => {
+    setError(null);
+    setIsLoading(true);
+    setIsPreConnectLoading(true);
+
+    try {
+      const response = await fetch(`${generateUrl}/generate`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: query }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      setIsPreConnectLoading(false);
+
+      const assistantId = `assistant-${Date.now()}`;
+      const assistantMessage: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        thinkingTrace: createMultiRoundStreamTrace(),
+      };
+      // 接口连通后再展示多轮检索主题与过程
+      setMessages((prev) => [...prev, assistantMessage]);
+
+      const reader = response.body.getReader();
+      readerRef.current = reader;
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          const lastLine = lines.pop();
+          buffer = lastLine || '';
+
+          for (const line of lines) {
+            if (!line.startsWith('data: ')) continue;
+
+            try {
+              const parsedData = JSON.parse(line.slice(6)) as {
+                event: string;
+                data: any;
+              };
+              const { event, data } = parsedData;
+
+              switch (event) {
+                case 'task_created': {
+                  taskIdRef.current = data?.task_id || null;
+                  break;
+                }
+                case 'tool_call': {
+                  handleToolCall(data as ToolCallData, assistantId);
+                  break;
+                }
+                case 'message': {
+                  if (typeof data === 'string') {
+                    setMessages((prevMessages) => prevMessages.map((msg) => {
+                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
+                      return {
+                        ...msg,
+                        thinkingTrace: {
+                          ...msg.thinkingTrace,
+                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
+                        },
+                      };
+                    }));
+                  }
+                  break;
+                }
+                case 'references': {
+                  const refs = Array.isArray(data?.references) ? data.references : [];
+                  const mappedRefs = refs.map(mapReferenceToSource);
+                  setSearchProcess((prev) => ({
+                    ...prev,
+                    hits: mappedRefs.length,
+                  }));
+                  setMessages((prevMessages) => prevMessages.map((msg) => (
+                    msg.id === assistantId
+                      ? { ...msg, sources: mappedRefs }
+                      : msg
+                  )));
+                  break;
+                }
+                case 'done': {
+                  setIsLoading(false);
+                  break;
+                }
+                default:
+                  console.log(`未知事件类型: ${event}`, data);
+              }
+            } catch (parseError) {
+              console.error('JSON解析错误:', parseError);
+              console.error('原始数据:', line.slice(6));
+            }
+          }
+        }
+      } finally {
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      console.error('处理请求时发生错误:', runError);
+      setIsLoading(false);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+      setIsPreConnectLoading(false);
+    } finally {
+        // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+    }
+  };
+
+  /**
+   * 单一模式下的发送入口。
+   *
+   * 这里只负责创建用户消息、重置输入框和按当前 qaMode 分发到对应执行器；
+   * 具体的真实请求、模拟流和状态回填分别在各自 handler 内维护。
+   */
+  const handleSend = () => {
+    if (submitLockRef.current || isLoading || isPreConnectLoading) return;
+    if (!inputValue.trim()) return;
+    submitLockRef.current = true;
+    const query = inputValue.trim();
+
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: query,
+      timestamp: new Date(),
+    };
+
+    if (qaMode === 'multi-round') { // 多轮检索
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '多轮RAG',
+        rounds: 0,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void handleRun(query);
+      return;
+    }
+
+    if (qaMode === 'single-round') { // 单轮RAG
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '单轮RAG',
+        rounds: 1,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void handleSingleRoundRun(query);
+      return;
+    }
+
+    if (qaMode === 'single-chat') { // 单轮RAG
+      console.log('进入了这里')
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '单轮RAG',
+        rounds: 1,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void chatRun(query);
+      // handleMockSingleRoundRun(query);
+      return;
+    }
+
+    setIsLoading(true);
+    setMessages((prev) => [...prev, userMessage]);
+    setInputValue('');
+
+    // 模拟AI响应
+    // setTimeout(() => {
+    //   setMessages(prev => [...prev, {
+    //     id: `assistant-${Date.now()}`,
+    //     role: 'assistant',
+    //     content: '已完成深度检索和综合回答。',
+    //     timestamp: new Date(),
+    //     thinkingTrace: createThinkingTrace(qaMode),
+    //   }]);
+    //   setIsLoading(false);
+    //   submitLockRef.current = false;
+    //   setSearchProcess({
+    //     currentMode: '深度检索',
+    //     rounds: 1,
+    //     hits: 5,
+    //     queryRewrite: qaMode === 'deep-search' ? '原问题→分解子问题→独立检索→综合回答' : '',
+    //   });
+    // }, 50000);
+  };
+
+  /**
+   * 对比模式发送入口。
+   *
+   * 左右面板共享同一个用户问题，但各自按选择的模式独立运行、独立 loading、独立 sources。
+   * 通过 `updatePane` 将左右面板更新收敛到一个函数，避免并发请求互相覆盖状态。
+   */
+  const handleCompare = () => {
+    if (submitLockRef.current || isLoading || isPreConnectLoading) return;
+    if (!inputValue.trim()) return;
+    submitLockRef.current = true;
+    const query = inputValue.trim();
+    setInputValue('');
+    setCompareUserInput(query);
+    setError(null);
+    setIsLoading(true);
+    setCompareResult({
+      left: createComparePane(compareLeftMode),
+      right: createComparePane(compareRightMode),
+    });
+
+    const updatePane = (side: 'left' | 'right', updater: (pane: ComparePane) => ComparePane) => {
+      setCompareResult((prev) => {
+        if (!prev) return prev;
+        return {
+          ...prev,
+          [side]: updater(prev[side]),
+        };
+      });
+    };
+
+    const runSingleForCompare = async (side: 'left' | 'right') => {
+      let inThink = false;
+      let thinkStarted = false;
+
+      const response = await fetch('http://10.26.128.82:7863/chat/knowledge_base_chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          query,
+          knowledge_base_name: [],
+          top_k: 5,
+          score_threshold: scoreThreshold,
+          history: [],
+          stream: true,
+          model_name: modelName,
+          temperature,
+          prompt_name: 'default',
+          local_doc_url: false,
+        }),
+      });
+      if (!response.ok || !response.body) throw new Error(`单轮RAG接口异常: ${response.status}`);
+
+      const reader = response.body.getReader();
+      compareReaderRef.current[side] = reader;
+      const decoder = new TextDecoder();
+      let buffer = '';
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const extracted = extractJsonObjects(buffer);
+          buffer = extracted.rest;
+          for (const jsonText of extracted.objects) {
+            const parsed = parseKnowledgeBaseChunk(jsonText);
+            if (typeof parsed.answer === 'string') {
+              const token = parsed.answer;
+              updatePane(side, (pane) => {
+                const trace = pane.singleRagTrace || {
+                  title: '单轮 RAG 思考过程',
+                  thinkingMarkdown: '',
+                  answerMarkdown: '',
+                  thinkingComplete: false,
+                };
+                let thinkingMarkdown = trace.thinkingMarkdown;
+                let answerMarkdown = trace.answerMarkdown;
+                let thinkingComplete = trace.thinkingComplete || false;
+                let remaining = token;
+                while (remaining) {
+                  if (inThink) {
+                    const endIdx = remaining.indexOf('</think>');
+                    if (endIdx === -1) {
+                      thinkingMarkdown += remaining;
+                      remaining = '';
+                    } else {
+                      thinkingMarkdown += remaining.slice(0, endIdx);
+                      remaining = remaining.slice(endIdx + '</think>'.length);
+                      inThink = false;
+                      thinkingComplete = true;
+                    }
+                  } else {
+                    const startIdx = remaining.indexOf('<think>');
+                    if (startIdx === -1) {
+                      answerMarkdown += remaining;
+                      remaining = '';
+                    } else {
+                      answerMarkdown += remaining.slice(0, startIdx);
+                      remaining = remaining.slice(startIdx + '<think>'.length);
+                      inThink = true;
+                      thinkStarted = true;
+                    }
+                  }
+                }
+                return {
+                  ...pane,
+                  singleRagTrace: {
+                    ...trace,
+                    thinkingMarkdown,
+                    answerMarkdown,
+                    thinkingComplete: thinkStarted ? thinkingComplete : true,
+                  },
+                };
+              });
+            }
+            if (parsed.docs) {
+              updatePane(side, (pane) => ({ ...pane, sources: [...pane.sources, ...mapDocsToSources(parsed.docs)] }));
+            }
+          }
+        }
+      } finally {
+        reader.releaseLock();
+        if (compareReaderRef.current[side] === reader) {
+          compareReaderRef.current[side] = null;
+        }
+      }
+    };
+
+    const runMultiForCompare = async (side: 'left' | 'right') => {
+      const response = await fetch('http://10.26.128.38:8049/api/run', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query }),
+      });
+      if (!response.ok || !response.body) throw new Error(`多轮检索接口异常: ${response.status}`);
+
+      const reader = response.body.getReader();
+      compareReaderRef.current[side] = reader;
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      const applyToolCall = (toolData: ToolCallData) => {
+        updatePane(side, (pane) => {
+          const trace = pane.thinkingTrace || createMultiRoundStreamTrace();
+          const rounds = [...trace.rounds];
+          const lastRound = rounds[rounds.length - 1];
+          switch (toolData.tool_name) {
+            case 'show_text': {
+              const chatText = toolData.tool_input.text || '';
+              if (chatText.includes('<think>')) {
+                const thinkContent = chatText.replace('<think>', '').replace('</think>', '').trim();
+                rounds.push({
+                  id: `round-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+                  title: '思考中',
+                  thoughtMarkdown: thinkContent,
+                  query: '',
+                  queryLoading: true,
+                  queryShow: true,
+                  retrievals: [],
+                });
+              } else {
+                trace.finalAnswerMarkdown += chatText;
+              }
+              break;
+            }
+            case 'tavily_search':
+            case 'local_search': {
+              if (toolData.tool_input.result && lastRound) {
+                const result = JSON.parse(toolData.tool_input.result) as {
+                  query?: string;
+                  results?: Array<{ title?: string; content?: string; url?: string }>;
+                };
+                lastRound.query = result.query || lastRound.query;
+                lastRound.queryLoading = false;
+                lastRound.title = toolData.tool_name === 'local_search' ? '本地知识检索' : '联网检索';
+                lastRound.retrievals = (result.results || []).map((item, idx) => ({
+                  id: `${toolData.tool_name}-${idx}`,
+                  title: item.title || '未命名结果',
+                  content: item.content || '',
+                  source: item.url || '',
+                }));
+              }
+              break;
+            }
+            default:
+              break;
+          }
+          return {
+            ...pane,
+            thinkingTrace: { ...trace, rounds },
+          };
+        });
+      };
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          const lastLine = lines.pop();
+          buffer = lastLine || '';
+          for (const line of lines) {
+            if (!line.startsWith('data: ')) continue;
+            const parsedData = JSON.parse(line.slice(6)) as { event: string; data: any };
+            const { event, data } = parsedData;
+            if (event === 'tool_call') applyToolCall(data as ToolCallData);
+            if (event === 'message' && typeof data === 'string') {
+              updatePane(side, (pane) => {
+                const trace = pane.thinkingTrace || createMultiRoundStreamTrace();
+                return {
+                  ...pane,
+                  thinkingTrace: {
+                    ...trace,
+                    finalAnswerMarkdown: `${trace.finalAnswerMarkdown}${data}`,
+                  },
+                };
+              });
+            }
+            if (event === 'references') {
+              const refs = Array.isArray(data?.references) ? data.references : [];
+              updatePane(side, (pane) => ({ ...pane, sources: refs.map(mapReferenceToSource) }));
+            }
+          }
+        }
+      } finally {
+        reader.releaseLock();
+        if (compareReaderRef.current[side] === reader) {
+          compareReaderRef.current[side] = null;
+        }
+      }
+    };
+
+    const runByMode = (side: 'left' | 'right', mode: QAMode) => {
+      if (mode === 'single-round') return runSingleForCompare(side);
+      return runMultiForCompare(side);
+    };
+
+    Promise.allSettled([
+      runByMode('left', compareLeftMode).finally(() => updatePane('left', (pane) => ({ ...pane, loading: false }))),
+      runByMode('right', compareRightMode).finally(() => updatePane('right', (pane) => ({ ...pane, loading: false }))),
+    ]).finally(() => {
+      setIsLoading(false);
+      submitLockRef.current = false;
+    });
+  };
+
+  const handleStopCompareSide = (side: 'left' | 'right') => {
+    const reader = compareReaderRef.current[side];
+    if (reader) {
+      void reader.cancel(`用户停止${side === 'left' ? '左侧' : '右侧'}生成`);
+      compareReaderRef.current[side] = null;
+    }
+    setCompareResult((prev) => {
+      if (!prev) return prev;
+      return {
+        ...prev,
+        [side]: {
+          ...prev[side],
+          loading: false,
+        },
+      };
+    });
+  };
+
+  /**
+   * 停止当前生成。
+   *
+   * 真实请求通过 reader.cancel() 中断读取；本地模拟通过 ref 标记让异步循环自行退出。
+   * 对比模式需要同时停止左右两侧，单一模式只处理当前主 reader。
+   */
+  const handleStop = () => {
+    if (viewMode === 'compare') {
+      handleStopCompareSide('left');
+      handleStopCompareSide('right');
+      setIsLoading(false);
+      submitLockRef.current = false;
+      return;
+    }
+    mockSingleRoundStoppedRef.current = true;
+    mockMultiRoundStoppedRef.current = true;
+    if (readerRef.current) {
+      void readerRef.current.cancel('用户手动停止');
+      readerRef.current = null;
+    }
+    setIsPreConnectLoading(false);
+    setIsLoading(false);
+    submitLockRef.current = false;
+  };
+
+  /**
+   * 对“生成中切换页面/模式/布局”进行统一保护。
+   *
+   * 如果当前没有生成任务，直接执行目标操作；否则弹出确认框。
+   * 用户确认后先停止生成，再执行原操作，避免生成流继续写入已经切换的 UI 状态。
+   */
+  const runAfterGenerationConfirm = (action: () => void) => {
+    if (!isLoading) {
+      action();
+      return;
+    }
+    pendingActionRef.current = action;
+    // Dialog.confirm({
+    //   header: '模型正在生成',
+    //   body: '当前模型仍在生成内容。确认后将停止生成，并继续执行你的操作。',
+    //   confirmBtn: '确认停止并继续',
+    //   cancelBtn: '取消',
+    //   onConfirm: () => {
+    //     handleStop();
+    //     pendingActionRef.current?.();
+    //     pendingActionRef.current = null;
+    //   },
+    //   onClose: () => {
+    //     pendingActionRef.current = null;
+    //   },
+    // });
+  };
+
+  const handleSafeViewModeChange = (mode: ViewMode) => {
+    if (mode === viewMode) return;
+    runAfterGenerationConfirm(() => setViewMode(mode));
+  };
+
+  const handleSafeNavigate = (page: PageType) => {
+    runAfterGenerationConfirm(() => onNavigate(page));
+  };
+
+  const handleSafeReset = () => {
+    runAfterGenerationConfirm(() => {
+      setMessages([]);
+      setCompareResult(null);
+    });
+  };
+
+  const handleSafeModeChange = (mode: QAMode) => {
+    runAfterGenerationConfirm(() => setQaMode(mode));
+  };
+
+  const handleSafeCompareLeftModeChange = (mode: QAMode) => {
+    runAfterGenerationConfirm(() => setCompareLeftMode(mode));
+  };
+
+  const handleSafeCompareRightModeChange = (mode: QAMode) => {
+    runAfterGenerationConfirm(() => setCompareRightMode(mode));
+  };
+
+  const handleSafeCompareLayoutChange = (layout: 'horizontal' | 'vertical') => {
+    runAfterGenerationConfirm(() => setCompareLayout(layout));
+  };
+
+  const handleSaveRecord = () => {
+    alert('问答记录已保存');
+  };
+
+  const handleCollect = () => {
+    alert('已添加到收藏');
+  };
+
+  const handleKeyDown = (e) => {
+    // if (e.key === 'Enter' && !e.shiftKey) {
+    //   console.log('回车了')
+    //   e.preventDefault();
+    //   if (e.repeat || submitLockRef.current || isLoading || isPreConnectLoading) return;
+    //   if (viewMode === 'compare') {
+    //     handleCompare();
+    //   } else {
+    //     handleSend();
+    //   }
+    // }
+    // console.log('e',e)
+    // if ((e.metaKey || e.ctrlKey || e.shiftKey) && e.key === "Enter") {
+    //   e.preventDefault();
+    // } else if (e.keyCode === 13) {
+    //   e.preventDefault();
+    //   console.log('回车了')
+    // } else if (e.key === "/") {
+    //   e.preventDefault();
+    // }
+    // if (e.repeat || submitLockRef.current || isLoading || isPreConnectLoading) return;
+    console.log(e,'e')
+    console.log('da')
+    if (viewMode === 'compare') {
+      handleCompare();
+    } else {
+      handleSend();
+    }
+    scrollToBottom();
+  };
+
+  // 获取模式标签
+  const getModeLabel = (mode: QAMode) => {
+    switch (mode) {
+      case 'single-chat': return '大模型';
+      case 'single-round': return '单轮RAG';
+      case 'multi-round': return '多轮RAG';
+      case 'deep-search': return '深度检索';
+      case 'hx-search': return '画像检索';
+    }
+  };
+
+  const activeAssistantMessageId = isLoading
+    ? [...messages].reverse().find((msg) => msg.role === 'assistant')?.id
+    : undefined;
+
+  useEffect(() => {
+    setQaMode('single-round');
+    setMessages(createMockSingleRagMessages());
+    setSearchProcess({
+      currentMode: '单轮RAG',
+      rounds: 1,
+      hits: 3,
+      queryRewrite: '',
+    });
+  }, []);
+
+  /**
+   * 滚动到底部。
+   *
+   * 聊天区默认跟随新消息自动滚动；当用户手动上滑查看历史时会暂停自动滚动，避免打断阅读。
+   */
+  const scrollToBottom = (smooth = false) => {
+    if (!chatListRef.current) return;
+    chatListRef.current.scrollTo({
+      top: chatListRef.current.scrollHeight,
+      behavior: smooth ? 'smooth' : 'auto',
+    });
+  };
+
+  useEffect(() => {
+    if (isAutoScrollEnabled) {
+      scrollToBottom(false);
+    }
+  }, [messages, isLoading, isAutoScrollEnabled]);
+
+  const handleChatScroll = () => {
+    if (!chatListRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = chatListRef.current;
+    const isNearBottom = scrollHeight - (scrollTop + clientHeight) < 80;
+    setIsAutoScrollEnabled(isNearBottom);
+    setShowScrollToBottom(!isNearBottom);
+  };
+
+  const getAssistantAnswerText = (message: Message) => (
+    message.singleRagTrace?.answerMarkdown || message.thinkingTrace?.finalAnswerMarkdown || message.content
+  );
+
+  const getAssistantThinkingText = (message: Message) => {
+    if (message.singleRagTrace) return message.singleRagTrace.thinkingMarkdown;
+    if (message.thinkingTrace) {
+      return message.thinkingTrace.rounds.map((round, index) => (
+        `## 第 ${index + 1} 轮：${round.title}\n${round.thoughtMarkdown}`
+      )).join('\n\n');
+    }
+    return '';
+  };
+
+  const handleCopyAssistantMessage = async (message: Message) => {
+    const answerText = getAssistantAnswerText(message);
+    try {
+      await navigator.clipboard.writeText(answerText);
+    } catch (copyError) {
+      console.error('复制模型回答失败:', copyError);
+    }
+  };
+
+  const handleDeleteAssistantMessage = (message: Message) => {
+    const messageIndex = messages.findIndex((msg) => msg.id === message.id);
+    const previousUserMessage = [...messages.slice(0, messageIndex)].reverse().find((msg) => msg.role === 'user');
+    setMessages((prev) => prev.filter((msg) => msg.id !== message.id && msg.id !== previousUserMessage?.id));
+  };
+
+  const handleEditAssistantMessage = (message: Message) => {
+    setEditingMessageId(message.id);
+    setEditingThinking(getAssistantThinkingText(message));
+    setEditingAnswer(getAssistantAnswerText(message));
+  };
+
+  const handleCancelAssistantEdit = () => {
+    setEditingMessageId(null);
+    setEditingThinking('');
+    setEditingAnswer('');
+  };
+
+  const handleSaveAssistantEdit = () => {
+    if (!editingMessageId) return;
+    setMessages((prev) => prev.map((msg) => {
+      if (msg.id !== editingMessageId) return msg;
+      if (msg.singleRagTrace) {
+        return {
+          ...msg,
+          content: editingAnswer,
+          singleRagTrace: {
+            ...msg.singleRagTrace,
+            thinkingMarkdown: editingThinking,
+            answerMarkdown: editingAnswer,
+            thinkingComplete: true,
+          },
+        };
+      }
+      if (msg.thinkingTrace) {
+        const rounds = msg.thinkingTrace.rounds.length > 0
+          ? msg.thinkingTrace.rounds.map((round, index) => (
+            index === 0 ? { ...round, thoughtMarkdown: editingThinking } : round
+          ))
+          : msg.thinkingTrace.rounds;
+        return {
+          ...msg,
+          content: editingAnswer,
+          thinkingTrace: {
+            ...msg.thinkingTrace,
+            rounds,
+            finalAnswerMarkdown: editingAnswer,
+          },
+        };
+      }
+      return { ...msg, content: editingAnswer };
+    }));
+    handleCancelAssistantEdit();
+  };
+
+  const handleResendAssistantMessage = (message: Message) => {
+    if (submitLockRef.current || isLoading || isPreConnectLoading) return;
+    const messageIndex = messages.findIndex((msg) => msg.id === message.id);
+    const previousUserMessage = [...messages.slice(0, messageIndex)].reverse().find((msg) => msg.role === 'user');
+    if (!previousUserMessage) return;
+
+    submitLockRef.current = true;
+    setMessages((prev) => prev.filter((msg) => msg.id !== message.id));
+    setInputValue('');
+
+    if (message.singleRagTrace) {
+      setSearchProcess({ currentMode: '单轮RAG', rounds: 1, hits: 0, queryRewrite: '' });
+      void handleSingleRoundRun(previousUserMessage.content);
+      return;
+    }
+
+    setSearchProcess({ currentMode: '多轮RAG', rounds: 0, hits: 0, queryRewrite: '' });
+    void handleRun(previousUserMessage.content);
+  };
+
+  /**
+   * 点击答案中的引用编号后打开引用详情弹窗。
+   *
+   * Markdown 中的 `[[1]]` 与 sources 数组采用 1-based 对齐，因此这里需要减 1 取数组下标。
+   */
+  const handleCitationClick = (message: Message, citationIndex: number) => {
+    const source = message.sources?.[citationIndex - 1];
+    if (!source) return;
+    setSelectedCitation(source);
+  };
+
+  const handleCompareCitationClick = (side: 'left' | 'right', citationIndex: number) => {
+    const source = compareResult?.[side]?.sources?.[citationIndex - 1];
+    if (!source) return;
+    setSelectedCitation(source);
+  };
+
+  useEffect(() => {
+    if (viewMode === 'compare') {
+      setCompareLeftMode('single-round');
+      setCompareRightMode('multi-round');
+    }
+  }, [viewMode]);
+
+  useEffect(() => {
+    if (viewMode !== 'compare' || !compareResult) return;
+    setIsLoading(compareResult.left.loading || compareResult.right.loading);
+  }, [viewMode, compareResult]);
+
+  // 离开浏览器页面时无法展示自定义 Dialog，因此使用原生 beforeunload 提醒用户生成会被中断。
+  useEffect(() => {
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      if (!isLoading) return;
+      event.preventDefault();
+      event.returnValue = '模型正在生成，离开页面将停止当前生成。';
+    };
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+  }, [isLoading]);
+
+  return (
+    <div className={`h-[calc(100vh-120px)] flex flex-col theme-bg rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+      <GeneralQAHeader
+        isDark={isDark}
+        viewMode={viewMode}
+        setViewMode={handleSafeViewModeChange}
+        onNavigate={handleSafeNavigate}
+      />
+
+      {/* 主体内容区 */}
+      <div className="flex-1 flex overflow-hidden">
+        <GeneralQAConfigSidebar
+          isDark={isDark}
+          viewMode={viewMode}
+          qaMode={qaMode}
+          compareLeftMode={compareLeftMode}
+          compareRightMode={compareRightMode}
+          compareLayout={compareLayout}
+          knowledgeScope={knowledgeScope}
+          answerStyle={answerStyle}
+          showSources={showSources}
+          showProcess={showProcess}
+          autoSummarizeDiff={autoSummarizeDiff}
+          recommendBetter={recommendBetter}
+          isCollapsed={isLeftSidebarCollapsed}
+          setQaMode={handleSafeModeChange}
+          setCompareLeftMode={handleSafeCompareLeftModeChange}
+          setCompareRightMode={handleSafeCompareRightModeChange}
+          setCompareLayout={handleSafeCompareLayoutChange}
+          setKnowledgeScope={setKnowledgeScope}
+          setAnswerStyle={setAnswerStyle}
+          setShowSources={setShowSources}
+          setShowProcess={setShowProcess}
+          setAutoSummarizeDiff={setAutoSummarizeDiff}
+          setRecommendBetter={setRecommendBetter}
+          setIsCollapsed={setIsLeftSidebarCollapsed}
+        />
+
+        {/* 中间结果区 */}
+        <div className="flex-1 min-w-0 flex flex-col overflow-hidden">
+          {viewMode === 'single' ? (
+            <>
+              {/* 聊天消息区 */}
+              <div
+                ref={chatListRef}
+                onScroll={handleChatScroll}
+                className="relative flex-1 overflow-y-auto p-4 space-y-4"
+              >
+                {messages.length === 0 ? (
+                  <EmptyChatState
+                    icon={<MessageSquare className="w-11 h-11 opacity-60" />}
+                    title="开始你的问答"
+                    description="输入问题，获取基于知识库的智能回答"
+                  />
+                ) : (
+                  messages.map((msg) => (
+                    <ChatMessage
+                      key={msg.id}
+                      message={msg}
+                      showSources={showSources}
+                      assistantLabel="知识库助手"
+                      assistantActive={msg.id === activeAssistantMessageId}
+                      onCitationClick={handleCitationClick}
+                      onCopyAssistant={handleCopyAssistantMessage}
+                      onDeleteAssistant={handleDeleteAssistantMessage}
+                      onEditAssistant={handleEditAssistantMessage}
+                      onResendAssistant={handleResendAssistantMessage}
+                    />
+                  ))
+                )}
+
+                {isPreConnectLoading && (
+                  <TypingIndicator
+                    label={qaMode === 'single-round' ? '正在流式生成单轮 RAG 回复' : '正在生成思考过程与检索内容'}
+                    assistantLabel="知识库助手"
+                  />
+                )}
+
+                {error && (
+                  <div className={`ml-12 max-w-[70%] rounded-xl border px-4 py-3 text-sm ${isDark
+                    ? 'bg-red-900/20 border-red-700/50 text-red-300'
+                    : 'bg-red-50 border-red-200 text-red-700'
+                    }`}>
+                    {error}
+                  </div>
+                )}
+
+                {showScrollToBottom && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setIsAutoScrollEnabled(true);
+                      setShowScrollToBottom(false);
+                      scrollToBottom(true);
+                    }}
+                    className={`fixed left-1/2 -translate-x-1/2 bottom-36 z-20 w-11 h-11 rounded-full backdrop-blur-sm border shadow-lg transition-all ${isDark
+                      ? 'bg-slate-800/65 border-slate-500/60 text-slate-100 hover:bg-slate-700/70'
+                      : 'bg-white/70 border-gray-300 text-gray-700 hover:bg-white/85'
+                      }`}
+                    title="滚动到底部"
+                  >
+                    <ArrowDown className="w-5 h-5 mx-auto" />
+                  </button>
+                )}
+              </div>
+            </>
+          ) : (
+            <>
+              {/* 对比结果区 */}
+              <div className="flex-1 overflow-y-auto p-4">
+                {compareUserInput && (
+                  <div className="mb-4 flex justify-end">
+                    <div className={`max-w-[72%] rounded-2xl px-4 py-3 shadow-sm ${isDark
+                      ? 'bg-blue-600/70 text-white'
+                      : 'bg-gradient-to-r from-red-500 to-rose-500 text-white'
+                      }`}>
+                      <p className="whitespace-pre-wrap leading-relaxed">{compareUserInput}</p>
+                    </div>
+                  </div>
+                )}
+                {compareResult ? (
+                  compareLayout === 'horizontal' ? (
+                    <div className="grid grid-cols-2 gap-4 h-full min-w-0">
+                      {/* 左侧结果 */}
+                      <div className={`min-w-0 overflow-hidden rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                        <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                          <div className="flex items-center justify-between gap-2">
+                            <div className="flex items-center gap-2">
+                              <QAAvatar role="assistant" variant="blue" isActive={compareResult.left.loading} label="知识库助手" />
+                              <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                                }`}>
+                                {getModeLabel(compareResult.left.mode)}
+                              </span>
+                            </div>
+                            {compareResult.left.loading && (
+                              <button
+                                type="button"
+                                onClick={() => handleStopCompareSide('left')}
+                                className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                                  }`}
+                              >
+                                <Square className="w-3 h-3 fill-current" />
+                                停止
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                        <div className="p-4 min-w-0 overflow-hidden">
+                          <div className="flex-1 min-w-0">
+                            {compareResult.left.mode === 'single-round' ? (
+                              <SingleRagAnswer trace={compareResult.left.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
+                            ) : (
+                              <RetrievalThinkingTrace trace={compareResult.left.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
+                            )}
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* 右侧结果 */}
+                      <div className={`min-w-0 overflow-hidden rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                        <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                          <div className="flex items-center justify-between gap-2">
+                            <div className="flex items-center gap-2">
+                              <QAAvatar role="assistant" variant="purple" isActive={compareResult.right.loading} label="知识库助手" />
+                              <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
+                                }`}>
+                                {getModeLabel(compareResult.right.mode)}
+                              </span>
+                            </div>
+                            {compareResult.right.loading && (
+                              <button
+                                type="button"
+                                onClick={() => handleStopCompareSide('right')}
+                                className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                                  }`}
+                              >
+                                <Square className="w-3 h-3 fill-current" />
+                                停止
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                        <div className="p-4 min-w-0 overflow-hidden">
+                          <div className="flex-1 min-w-0">
+                            {compareResult.right.mode === 'single-round' ? (
+                              <SingleRagAnswer trace={compareResult.right.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
+                            ) : (
+                              <RetrievalThinkingTrace trace={compareResult.right.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="space-y-4">
+                      {/* 上方结果 */}
+                      <div className={`min-w-0 overflow-hidden rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                        <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                          <div className="flex items-center justify-between gap-2">
+                            <div className="flex items-center gap-2">
+                              <QAAvatar role="assistant" variant="blue" isActive={compareResult.left.loading} label="知识库助手" />
+                              <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                                }`}>
+                                {getModeLabel(compareResult.left.mode)}
+                              </span>
+                            </div>
+                            {compareResult.left.loading && (
+                              <button
+                                type="button"
+                                onClick={() => handleStopCompareSide('left')}
+                                className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                                  }`}
+                              >
+                                <Square className="w-3 h-3 fill-current" />
+                                停止
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                        <div className="p-4 min-w-0 overflow-hidden">
+                          <div className="flex-1 min-w-0">
+                            {compareResult.left.mode === 'single-round' ? (
+                              <SingleRagAnswer trace={compareResult.left.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
+                            ) : (
+                              <RetrievalThinkingTrace trace={compareResult.left.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
+                            )}
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* 下方结果 */}
+                      <div className={`min-w-0 overflow-hidden rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                        <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                          <div className="flex items-center justify-between gap-2">
+                            <div className="flex items-center gap-2">
+                              <QAAvatar role="assistant" variant="purple" isActive={compareResult.right.loading} label="知识库助手" />
+                              <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
+                                }`}>
+                                {getModeLabel(compareResult.right.mode)}
+                              </span>
+                            </div>
+                            {compareResult.right.loading && (
+                              <button
+                                type="button"
+                                onClick={() => handleStopCompareSide('right')}
+                                className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                                  }`}
+                              >
+                                <Square className="w-3 h-3 fill-current" />
+                                停止
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                        <div className="p-4 min-w-0 overflow-hidden">
+                          <div className="flex-1 min-w-0">
+                            {compareResult.right.mode === 'single-round' ? (
+                              <SingleRagAnswer trace={compareResult.right.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
+                            ) : (
+                              <RetrievalThinkingTrace trace={compareResult.right.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  )
+                ) : (
+                  <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                    <GitCompare className="w-16 h-16 mb-4 opacity-50" />
+                    <p className="text-lg">对比模式</p>
+                    <p className="text-sm mt-2">输入问题，对比不同模式的回答效果</p>
+                  </div>
+                )}
+              </div>
+            </>
+          )}
+
+          {/* 底部输入区 */}
+          <QAComposer
+            value={inputValue}
+            onChange={setInputValue}
+            onKeyDown={handleKeyDown}
+            onSubmit={viewMode === 'compare' ? handleCompare : handleSend}
+            onStop={handleStop}
+            canSubmit={!isLoading && Boolean(inputValue.trim())}
+            onReset={handleSafeReset}
+            onSave={handleSaveRecord}
+            onCollect={handleCollect}
+            onOpenSettings={() => setIsModelSettingsOpen(true)}
+            isLoading={isLoading}
+            placeholder={viewMode === 'compare' ? '输入问题进行对比分析...' : '输入你的问题...'}
+            showReset
+          />
+        </div>
+
+        {/* 右侧辅助区 */}
+        {viewMode === 'single' && showProcess && (
+          <div className={`w-72 border-l flex-shrink-0 overflow-y-auto p-4 ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
+            }`}>
+            {/* 检索过程 */}
+            <div className="mb-6">
+              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                检索过程
+              </h3>
+              <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>当前模式</span>
+                    <span className={`text-sm font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                      {searchProcess.currentMode}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>检索轮次</span>
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      {searchProcess.rounds}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>命中数</span>
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      {searchProcess.hits}
+                    </span>
+                  </div>
+                  {searchProcess.queryRewrite && (
+                    <div>
+                      <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>Query改写</span>
+                      <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                        {searchProcess.queryRewrite}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 对比模式的差异总结 */}
+        {viewMode === 'compare' && compareResult?.differences && (
+          <div className={`w-72 border-l flex-shrink-0 overflow-y-auto p-4 ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
+            }`}>
+            <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+              差异总结
+            </h3>
+            <div className={`p-4 rounded-xl space-y-4 ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+              <div>
+                <span className={`text-xs flex items-center gap-1 ${isDark ? 'text-green-400' : 'text-green-600'}`}>
+                  <CheckCircle className="w-3 h-3" />
+                  一致观点
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.consensus}
+                </p>
+              </div>
+              <div>
+                <span className={`text-xs flex items-center gap-1 ${isDark ? 'text-yellow-400' : 'text-yellow-600'}`}>
+                  <AlertCircle className="w-3 h-3" />
+                  差异观点
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.differences}
+                </p>
+              </div>
+              <div>
+                <span className={`text-xs ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                  {getModeLabel(compareResult.left.mode)}优势
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.leftAdvantage}
+                </p>
+              </div>
+              <div>
+                <span className={`text-xs ${isDark ? 'text-purple-400' : 'text-purple-600'}`}>
+                  {getModeLabel(compareResult.right.mode)}优势
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.rightAdvantage}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {editingMessageId && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div className="absolute inset-0 bg-black/45 backdrop-blur-[1px]" onClick={handleCancelAssistantEdit} />
+          <div className={`relative w-full max-w-3xl rounded-2xl border shadow-2xl p-5 ${isDark ? 'bg-slate-900 border-slate-700 text-slate-100' : 'bg-white border-gray-200 text-gray-900'
+            }`}>
+            <button
+              type="button"
+              onClick={handleCancelAssistantEdit}
+              className={`absolute top-3 right-3 p-1.5 rounded-lg transition-all ${isDark ? 'hover:bg-slate-700 text-slate-300' : 'hover:bg-gray-100 text-gray-500'
+                }`}
+              title="关闭"
+            >
+              <X className="w-4 h-4" />
+            </button>
+            <div className="pr-9">
+              <h3 className="text-base font-semibold">编辑模型生成内容</h3>
+              <p className={`mt-1 text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                可同时修改模型回答和思考过程，多轮检索会把思考过程写回第一轮思考内容。
+              </p>
+            </div>
+            <div className="mt-4 grid gap-4 md:grid-cols-2">
+              <label className="space-y-2">
+                <span className={`text-sm font-medium ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>思考过程</span>
+                <textarea
+                  value={editingThinking}
+                  onChange={(event) => setEditingThinking(event.target.value)}
+                  className={`h-80 w-full resize-none rounded-xl border p-3 text-sm focus:outline-none ${isDark ? 'border-slate-700 bg-slate-800 text-slate-100' : 'border-gray-200 bg-gray-50 text-gray-800'
+                    }`}
+                />
+              </label>
+              <label className="space-y-2">
+                <span className={`text-sm font-medium ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>最终回答</span>
+                <textarea
+                  value={editingAnswer}
+                  onChange={(event) => setEditingAnswer(event.target.value)}
+                  className={`h-80 w-full resize-none rounded-xl border p-3 text-sm focus:outline-none ${isDark ? 'border-slate-700 bg-slate-800 text-slate-100' : 'border-gray-200 bg-gray-50 text-gray-800'
+                    }`}
+                />
+              </label>
+            </div>
+            <div className="mt-4 flex justify-end gap-2">
+              <button type="button" onClick={handleCancelAssistantEdit} className={`px-4 py-2 rounded-xl text-sm ${isDark ? 'bg-slate-800 hover:bg-slate-700 text-slate-200' : 'bg-gray-100 hover:bg-gray-200 text-gray-700'}`}>
+                取消
+              </button>
+              <button type="button" onClick={handleSaveAssistantEdit} className="px-4 py-2 rounded-xl text-sm bg-red-500 hover:bg-red-600 text-white">
+                保存
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {selectedCitation && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div
+            className="absolute inset-0 bg-black/45 backdrop-blur-[1px]"
+            onClick={() => setSelectedCitation(null)}
+          />
+          <div className={`relative w-full max-w-xl rounded-2xl border shadow-2xl p-5 ${isDark
+            ? 'bg-slate-900 border-slate-700 text-slate-100'
+            : 'bg-white border-gray-200 text-gray-900'
+            }`}>
+            <button
+              type="button"
+              onClick={() => setSelectedCitation(null)}
+              className={`absolute top-3 right-3 p-1.5 rounded-lg transition-all ${isDark ? 'hover:bg-slate-700 text-slate-300' : 'hover:bg-gray-100 text-gray-500'
+                }`}
+              title="关闭"
+            >
+              <X className="w-4 h-4" />
+            </button>
+
+            <div className="pr-9">
+              <h3 className="text-base font-semibold">{selectedCitation.title || '引用内容'}</h3>
+              <div className={`mt-2 text-xs space-y-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                <div>来源：{selectedCitation.source || selectedCitation.type || '未知来源'}</div>
+                <div>时间：{selectedCitation.time || '未知'}</div>
+              </div>
+            </div>
+
+            {selectedCitation.url && (
+              <div className="mt-4">
+                <a
+                  href={`${knowledgeUrl}/#/knowledge/mid-detail?recUuid=${selectedCitation.url}`}
+                  target="_blank"
+                  rel="noreferrer"
+                  className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm transition-all ${isDark
+                    ? 'border-slate-600 text-slate-200 hover:bg-slate-800'
+                    : 'border-gray-300 text-gray-700 hover:bg-gray-50'
+                    }`}
+                  title="打开原始链接"
+                >
+                  <ExternalLink className="w-4 h-4" />
+                  查看原文链接
+                </a>
+              </div>
+            )}
+
+            <div className={`mt-4 rounded-xl p-3 text-sm leading-relaxed max-h-[500px] overflow-auto pr-[10px] whitespace-pre-wrap ${isDark ? 'bg-slate-800/70 text-slate-200' : 'bg-gray-50 text-gray-700'
+              }`}>
+              {selectedCitation.content || selectedCitation.snippet || '暂无引用内容'}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <Dialog
+        visible={isModelSettingsOpen}
+        header="模型参数设置"
+        width="520px"
+        confirmBtn="保存"
+        cancelBtn="取消"
+        onConfirm={() => setIsModelSettingsOpen(false)}
+        onClose={() => setIsModelSettingsOpen(false)}
+      >
+        <div className="space-y-6 py-2">
+          <div>
+            <label className={`block text-sm font-medium mb-2 ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+              模型
+            </label>
+            <Select
+              value={modelName}
+              onChange={(value) => setModelName(String(value))}
+              options={[
+                { label: 'Qwen3-32B: 效果与速度均衡（推荐）', value: 'OpenAI3' },
+                { label: 'Qwen3-235B：效果与速度均衡（推荐）', value: 'OpenAI4' },
+                { label: 'GLM-5：逻辑性强，长上下文', value: 'OpenAI5' },
+                { label: 'Qwen3.5-27B：深度思考过程长', value: 'OpenAI6' },
+                { label: 'Qwen3-8B：速度快，效果较差', value: 'OpenAI7' },
+                // { label: 'Qwen2.5-72B：老模型，发散性差', value: 'OpenAI8' },
+                { label: '四季7B：速度快，效果较差', value: 'OpenAI9' },
+              ]}
+              style={{ width: '100%' }}
+            />
+          </div>
+          <div>
+            <div className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+              相似度阈值 score_threshold：{scoreThreshold.toFixed(2)}
+            </div>
+            <Slider
+              label
+              layout="horizontal"
+              min={0}
+              max={1}
+              step={0.01}
+              value={scoreThreshold}
+              onChange={(value) => setScoreThreshold(Number(value))}
+            />
+          </div>
+          <div>
+            <div className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+              温度 temperature：{temperature.toFixed(2)}
+            </div>
+            <Slider
+              label
+              layout="horizontal"
+              min={0}
+              max={1}
+              step={0.01}
+              value={temperature}
+              onChange={(value) => setTemperature(Number(value))}
+            />
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  );
+};
+
+export default GeneralQA;
diff --git a/web-code/components/qa/GeneralQA.mock.ts b/web-code/components/qa/GeneralQA.mock.ts
new file mode 100644
index 00000000..d6f235bf
--- /dev/null
+++ b/web-code/components/qa/GeneralQA.mock.ts
@@ -0,0 +1,450 @@
+import type { QASingleRagTrace, QAThinkingTrace } from './QACommon';
+import type { ComparePane, KnowledgeBaseChunk, Message, QAMode, SourceItem } from './GeneralQA.types';
+
+/**
+ * 解析单轮 RAG 接口的 `<think>...</think>` 流式文本。
+ *
+ * 后端会把“思考过程”和“最终回答”混在同一个 answer 字段里返回，
+ * UI 需要分别展示在 `SingleRagAnswer` 的思考区和答案区。这个函数只做纯文本拆分，
+ * 不依赖 React 状态，因此既可用于模拟数据，也可作为对比模式里的兜底空 trace。
+ */
+export const parseSingleRagStream = (chunks: { answer: string }[]): QASingleRagTrace => {
+  let thinkingMarkdown = '';
+  let answerMarkdown = '';
+  let inThink = false;
+  let thinkingComplete = false;
+
+  const appendToken = (token: string) => {
+    let remaining = token;
+    while (remaining) {
+      if (inThink) {
+        const endIdx = remaining.indexOf('</think>');
+        if (endIdx === -1) {
+          thinkingMarkdown += remaining;
+          break;
+        }
+        thinkingMarkdown += remaining.slice(0, endIdx);
+        inThink = false;
+        thinkingComplete = true;
+        remaining = remaining.slice(endIdx + '</think>'.length);
+      } else {
+        const startIdx = remaining.indexOf('<think>');
+        if (startIdx === -1) {
+          answerMarkdown += remaining;
+          break;
+        }
+        answerMarkdown += remaining.slice(0, startIdx);
+        inThink = true;
+        remaining = remaining.slice(startIdx + '<think>'.length);
+      }
+    }
+  };
+
+  chunks.forEach((chunk) => appendToken(chunk.answer));
+
+  return {
+    title: '单轮 RAG 思考过程',
+    thinkingMarkdown,
+    answerMarkdown,
+    thinkingComplete,
+  };
+};
+
+/**
+ * 构造单轮 RAG 的演示 trace。
+ *
+ * 首屏默认需要一条完整的示例问答，帮助用户理解“思考过程 + 答案 + 引用”如何展示。
+ * 这里保留原组件中的演示内容，避免拆分后默认展示行为发生变化。
+ */
+export const createSingleRagTrace = (): QASingleRagTrace => parseSingleRagStream([
+  { answer: '<think>' },
+  { answer: '需要回答用户关于 **RAG 工作原理** 的问题。\n\n' },
+  { answer: '先根据知识库召回内容组织核心流程：\n\n' },
+  { answer: '- 检索阶段：查找相关知识片段\n' },
+  { answer: '- 增强阶段：将证据注入提示词\n' },
+  { answer: '- 生成阶段：模型基于上下文生成答案\n\n' },
+  { answer: '回答需要保持结构清晰，并说明它为什么能降低幻觉。' },
+  { answer: '</think>' },
+  { answer: 'RAG（Retrieval-Augmented Generation，检索增强生成）是一种把 **知识库检索** 和 **大模型生成** 结合起来的问答方式。\n\n' },
+  { answer: '### 工作流程\n\n' },
+  { answer: '1. **问题理解**：系统接收用户问题并生成检索查询。\n' },
+  { answer: '2. **知识检索**：从知识库中召回相关文档片段。\n' },
+  { answer: '3. **上下文增强**：把检索到的内容和用户问题一起放入 Prompt。\n' },
+  { answer: '4. **模型生成**：大模型基于增强后的上下文生成回答。\n\n' },
+  { answer: '这种方式可以让回答更贴近已有资料，同时提升可追溯性。' },
+]);
+
+/**
+ * 构造多轮/深度检索的演示思考链。
+ *
+ * 真实多轮请求会通过 SSE 持续补齐 rounds；深度检索当前仍走本地模拟，
+ * 因此这个函数保留不同模式下的轮次差异，用于未接入真实接口时的展示。
+ */
+export const createThinkingTrace = (mode: QAMode): QAThinkingTrace => {
+  // 初始化轮次数组，第一轮总是基础检索
+  const rounds = [
+    {
+      id: 'round-1', // 第一轮唯一标识
+      title: '理解问题并拆解检索方向', // 本轮主题：理解问题并确定检索方向
+      thoughtMarkdown: '用户询问 **RAG 技术工作原理**。需要先明确核心链路：\n\n- 问题理解与向量化\n- 知识库召回\n- 上下文增强\n- 大模型生成\n\n第一轮优先检索基础定义和主流程。', // 模型思考过程，展示分析步骤
+      query: 'RAG 检索增强生成 工作原理 基础流程', // 发送给检索系统的查询词
+      queryShow: true,
+      retrievals: [ // 第一轮检索返回的资料列表
+        {
+          id: 'r1-1',
+          title: 'RAG技术白皮书',
+          content: 'RAG 将外部知识检索结果作为上下文注入生成模型，能够降低幻觉并提升答案的时效性和可追溯性。',
+          source: '知识库 / RAG技术白皮书.pdf',
+        },
+        {
+          id: 'r1-2',
+          title: 'LLM应用实践：检索增强生成',
+          content: '典型 RAG 流程包括查询改写、向量检索、片段重排、Prompt 组装和答案生成。',
+          source: '知识库 / LLM应用实践.docx',
+        },
+      ],
+    },
+  ];
+
+  // 多轮模式和深度检索模式需要第二轮检索，补充更多细节
+  if (mode !== 'single-round') {
+    // 添加第二轮检索：补充多轮检索与重排机制的差异
+    rounds.push({
+      id: 'round-2', // 第二轮的唯一标识
+      title: '补充多轮检索与重排机制', // 本轮检索的主题
+      thoughtMarkdown: '基础链路已经明确，继续检索 **多轮 RAG** 和 **深度检索** 的差异：\n\n1. 是否需要 Query 改写\n2. 是否需要对子问题分别召回\n3. 是否需要结果重排与证据融合',
+      query: '多轮 RAG Query 改写 子问题检索 结果重排', // 本轮发送给检索系统的查询词
+      // 本轮检索返回的资料列表
+      queryShow: true,
+      retrievals: [
+        {
+          id: 'r2-1',
+          title: '高级RAG技术指南',
+          content: '复杂问题通常需要分解为多个子问题，并对每个子问题分别检索，再通过重排模型筛选高相关证据。',
+          source: '资料库 / 高级RAG技术指南.md',
+        },
+        {
+          id: 'r2-2',
+          title: 'RAG召回与重排最佳实践',
+          content: '重排阶段可使用 Cross Encoder 或 LLM 评分，按相关性、覆盖度和可信度筛选最终上下文。',
+          source: '行业资料 / RAG最佳实践.html',
+        },
+        {
+          id: 'r2-3',
+          title: '检索增强系统评测报告',
+          content: '多阶段检索可提升复杂问题的召回率，但会增加延迟和计算成本，需要在效果与响应速度之间平衡。',
+          source: '评测库 / 检索增强系统评测报告.xlsx',
+        },
+      ],
+    });
+  }
+
+  // 深度检索模式需要第三轮，综合所有证据并形成最终回答结构
+  if (mode === 'deep-search') {
+    rounds.push({
+      id: 'round-3', // 第三轮的唯一标识
+      title: '综合证据并形成回答结构', // 本轮的主题：整合前面检索到的所有证据，组织成完整的回答
+      thoughtMarkdown: '当前证据已覆盖定义、流程和优化机制。最后需要组织成清晰结构：\n\n- 一句话定义\n- 分阶段流程\n- 技术价值\n- 适用场景与注意事项',
+      query: 'RAG 技术价值 幻觉 时效性 可追溯性 应用场景', // 本轮查询：关于 RAG 价值和应用场景的信息
+      queryShow: true,
+      retrievals: [
+        {
+          id: 'r3-1',
+          title: '企业知识问答系统建设方案',
+          content: 'RAG 在企业知识问答中常用于连接内部文档、制度库和业务数据库，使回答具备来源依据。',
+          source: '方案库 / 企业知识问答系统建设方案.pptx',
+        },
+        {
+          id: 'r3-2',
+          title: '生成式AI落地风险控制',
+          content: 'RAG 不能完全消除幻觉，仍需要上下文质量控制、引用展示、权限过滤和答案审核机制。',
+          source: '风控库 / 生成式AI落地风险控制.pdf',
+        },
+      ],
+    });
+  }
+
+  return {
+    title: mode === 'single-round' ? '单轮检索思考过程' : mode === 'multi-round' ? '多轮检索思考过程' : '深度检索思考过程',
+    rounds,
+    finalAnswerMarkdown: 'RAG（Retrieval-Augmented Generation，检索增强生成）是一种把 **外部知识检索** 和 **大模型生成** 结合起来的技术架构。\n\n### 核心流程\n\n1. **理解问题**：系统解析用户问题，并可能进行 Query 改写或问题拆解。\n2. **检索证据**：从知识库、文档库或业务数据源中召回相关片段。\n3. **筛选重排**：对召回片段按相关性和可信度排序，保留高质量上下文。\n4. **增强生成**：将问题和检索证据一起发送给大模型，生成回答。\n5. **引用溯源**：展示答案依据，便于用户核验。\n\n### 主要价值\n\n- 降低模型幻觉\n- 引入最新或私有知识\n- 提升回答可解释性和可追溯性\n- 适合企业知识问答、政策解读、资料分析等场景',
+  };
+};
+
+/**
+ * 构造流式多轮检索的初始空 trace。
+ *
+ * 请求刚建立时还没有真正的工具调用结果，先渲染一个“正在准备检索”的轮次，
+ * 可以让用户立即看到助手进入工作状态，后续 SSE 事件会继续更新这个 trace。
+ */
+export const createMultiRoundStreamTrace = (): QAThinkingTrace => ({
+  title: '多轮检索思考过程',
+  rounds: [{
+    id: `round-${Date.now()}`,
+    title: '正在准备检索',
+    thoughtMarkdown: '',
+    query: '',
+    queryShow: true,
+    queryLoading: true,
+    retrievals: [],
+  }],
+  thinkingComplete: false,
+  finalAnswerMarkdown: '',
+});
+
+/**
+ * 为对比模式创建左右面板的初始状态。
+ *
+ * 对比模式会并发运行两个不同的问答模式；每个面板需要独立维护 loading、trace 和 sources。
+ * 该工厂函数把不同模式的初始 trace 统一封装，避免页面组件重复判断。
+ */
+export const createComparePane = (mode: QAMode): ComparePane => ({
+  mode,
+  loading: true,
+  singleRagTrace: (mode === 'single-round' || mode === 'single-chat')
+    ? {
+      title: '单轮 RAG 思考过程',
+      thinkingMarkdown: '',
+      answerMarkdown: '',
+      thinkingComplete: false,
+    }
+    : undefined,
+  thinkingTrace: (mode === 'single-round' || mode === 'single-chat') ? undefined : createMultiRoundStreamTrace(),
+  sources: [],
+});
+
+/**
+ * 首屏演示消息。
+ *
+ * 页面首次进入时，如果没有用户消息，会展示两轮预置问答，说明引用、思考过程和追问的展示形态。
+ * 拆分时完整保留原始 mock 数据，确保首屏体验不变。
+ */
+export const createMockSingleRagMessages = (): Message[] => ([
+  {
+    id: 'mock-user-1',
+    role: 'user',
+    content: 'RAG 在企业知识问答里具体怎么落地？',
+    timestamp: new Date(),
+  },
+  {
+    id: 'mock-assistant-1',
+    role: 'assistant',
+    content: '',
+    timestamp: new Date(),
+    singleRagTrace: {
+      title: '单轮 RAG 思考过程',
+      thinkingMarkdown: '先明确用户要的是“可落地方案”，所以需要回答：\n\n1. 数据准备与切片策略\n2. 检索与重排链路\n3. 答案引用与可追溯性\n\n优先给出一套可直接上线的最小闭环。',
+      answerMarkdown: '可以按“**数据层 → 检索层 → 生成层 → 评估层**”四步落地：\n\n1. **数据层**：把制度、FAQ、SOP 文档切片并向量化，按业务域建索引。[[1]]\n2. **检索层**：先向量召回，再用重排模型做精排，提升命中质量。[[2]]\n3. **生成层**：将 TopK 证据注入 Prompt，要求回答必须带引用编号。[[3]]\n4. **评估层**：持续监控命中率、引用准确率和用户满意度。\n\n如果你要，我可以下一步给你一份“可直接给研发执行”的字段级配置清单。',
+      thinkingComplete: true,
+    },
+    sources: [
+      {
+        title: '企业知识问答平台建设指南',
+        type: '知识库',
+        snippet: '建议按业务域拆分索引，并保持文档版本可追溯。',
+        source: '内部架构组',
+        time: '2026-03-18',
+        url: 'https://example.com/rag-enterprise-guide',
+        content: '企业落地 RAG 时，建议先从高频问答域切入，采用“文档切片 + 向量索引 + 重排”三层方案，确保上线初期可控。',
+      },
+      {
+        title: 'RAG 重排实践报告',
+        type: '技术报告',
+        snippet: '仅向量召回会引入噪声，重排可显著提升答案相关性。',
+        source: 'NLP 团队',
+        time: '2026-01-09',
+        url: 'https://example.com/rag-rerank-report',
+        content: '在 20 万条文档规模下，向量 Top50 + CrossEncoder 重排到 Top6，可使人工评测正确率提升约 12%。',
+      },
+      {
+        title: '可追溯生成规范',
+        type: '规范',
+        snippet: '回答输出应绑定证据编号，便于用户核验。',
+        source: 'AI 治理委员会',
+        time: '2025-12-22',
+        url: 'https://example.com/traceable-generation-spec',
+        content: '推荐在答案中输出 [[n]] 形式的引用标识，并支持点击查看证据明细、来源与时间信息。',
+      },
+    ],
+  },
+  {
+    id: 'mock-user-2',
+    role: 'user',
+    content: '那单轮和多轮检索的差异是什么？',
+    timestamp: new Date(),
+  },
+  {
+    id: 'mock-assistant-2',
+    role: 'assistant',
+    content: '',
+    timestamp: new Date(),
+    singleRagTrace: {
+      title: '单轮 RAG 思考过程',
+      thinkingMarkdown: '用户在做方案选型，回答要突出“复杂问题覆盖率”和“时延成本”两个维度。',
+      answerMarkdown: '**单轮检索**更快，适合事实性问题；**多轮检索**覆盖更全，适合复杂推理问题。通常实践里会先单轮，召回不足再升级多轮。[[1]][[2]]',
+      thinkingComplete: true,
+    },
+    sources: [
+      {
+        title: 'RAG 模式选型对比',
+        type: '白皮书',
+        snippet: '单轮偏性能，多轮偏完整性。',
+        source: '智能搜索实验室',
+        time: '2026-02-11',
+        url: 'https://example.com/rag-mode-comparison',
+        content: '复杂查询在多轮检索中召回覆盖更高，但会增加 20%-60% 延迟，需按业务 SLA 选择。',
+      },
+      {
+        title: '检索系统时延评测',
+        type: '评测',
+        snippet: '多轮策略会增加查询与重排调用次数。',
+        source: '平台性能组',
+        time: '2026-02-27',
+        url: 'https://example.com/rag-latency-benchmark',
+        content: '在同等资源下，多轮检索平均时延高于单轮检索，但对于复杂问题的回答完整度更高。',
+      },
+    ],
+  },
+]);
+
+/**
+ * 将多轮检索接口返回的 references 项映射为通用引用来源。
+ */
+export const mapReferenceToSource = (item: { title?: string; content?: string; snippet?: string }): SourceItem => ({
+  title: item.title || '未命名来源',
+  type: '参考资料',
+  snippet: item.snippet || item.content || '',
+  content: item.content || item.snippet || '',
+});
+
+/**
+ * 将知识库单轮接口返回的 docs 映射为页面引用来源。
+ */
+export const mapDocsToSources = (docs: KnowledgeBaseChunk['docs']): SourceItem[] => {
+  const normalizedDocs = Array.isArray(docs) ? docs : docs ? [docs] : [];
+
+  return normalizedDocs.map((item, idx) => {
+    console.log(item,'检索资料')
+    if (typeof item === 'string') {
+      return {
+        title: '',
+        type: '知识库',
+        snippet: item,
+        source: '',
+        time: '',
+        content: item,
+      };
+    }
+
+    return {
+      title: item.title || item.source || `参考资料 ${idx + 1}`,
+      type: '知识库',
+      snippet: item.snippet || item.content || item.url || '',
+      source: item.source || item.title || '',
+      time: '',
+      url: item.url,
+      content: item.content || item.snippet || '',
+    };
+  });
+};
+
+export const chatDataJSON = (chatJSON: string) => {
+    let chatJSONText = chatJSON.replace(/}{"/g, '},{"');
+    chatJSONText = '[' + chatJSONText + ']';
+    // console.log('解析chat',chatJSONText);
+    let chatData = [];
+    let chatTitle: any = '';
+    const docsList: any[] = [];
+    try {
+      chatData = JSON.parse(chatJSONText);
+      chatData.forEach((item: any) => {
+        if (item['answer']) {
+          chatTitle += item['answer'];
+        } else if (item['docs']) {
+          docsList.push(item);
+        }
+      });
+      return {
+        chatTitle,
+        docsList,
+      };
+    } catch (error) {
+      return {
+        chatTitle,
+        docsList,
+      };
+    }
+  };
+
+/**
+ * 从流式文本中提取完整 JSON 对象。
+ *
+ * SSE 响应可能把一个 JSON 切成多段返回；该函数通过花括号深度和字符串状态，
+ * 找到已经完整闭合的对象，并把未闭合尾巴放回 `rest` 等待下一批数据拼接。
+ */
+export const extractJsonObjects = (raw: string): { objects: string[]; rest: string } => {
+  const objects: string[] = [];
+  let depth = 0;
+  let stringQuote: '"' | "'" | null = null;
+  let escaped = false;
+  let start = -1;
+
+  for (let i = 0; i < raw.length; i += 1) {
+    const ch = raw[i];
+
+    if (stringQuote) {
+      if (escaped) {
+        escaped = false;
+      } else if (ch === '\\') {
+        escaped = true;
+      } else if (ch === stringQuote) {
+        stringQuote = null;
+      }
+      continue;
+    }
+
+    if (ch === '"' || ch === "'") {
+      stringQuote = ch;
+      continue;
+    }
+
+    if (ch === '{') {
+      if (depth === 0) start = i;
+      depth += 1;
+      continue;
+    }
+
+    if (ch === '}') {
+      depth -= 1;
+      if (depth === 0 && start !== -1) {
+        objects.push(raw.slice(start, i + 1));
+        start = -1;
+      }
+    }
+  }
+
+  if (depth > 0 && start !== -1) {
+    return { objects, rest: raw.slice(start) };
+  }
+
+  return { objects, rest: '' };
+};
+
+// 处理平台数据
+export const platformTypeChange = (platform: string) => {
+    let platformType: string = '';
+    if (platform.includes('fb')) {
+      platformType = 'facebook';
+    } else if (platform.includes('x')) {
+      platformType = 'x';
+    } else if (platform.includes('in')) {
+      platformType = 'instagram';
+    } else if (platform.includes('re')) {
+      platformType = 'reddit';
+    } else if (platform.includes('th')) {
+      platformType = 'threads';
+    } else {
+      platformType = 'facebook';
+    }
+    return platformType;
+  }
\ No newline at end of file
diff --git a/web-code/components/qa/GeneralQA.types.ts b/web-code/components/qa/GeneralQA.types.ts
new file mode 100644
index 00000000..56fea386
--- /dev/null
+++ b/web-code/components/qa/GeneralQA.types.ts
@@ -0,0 +1,100 @@
+import type { QASingleRagTrace, QAThinkingTrace } from './QACommon';
+import { LucideIcon } from 'lucide-react';
+
+export type QAMode = 'single-chat' | 'single-round' | 'multi-round' | 'deep-search' | 'hx-search' | 'news-report';
+export type ViewMode = 'single' | 'compare';
+export type KnowledgeScope = 'all' | 'specific-kb' | 'specific-domain';
+export type AnswerStyle = 'concise' | 'detailed';
+export type CompareLayout = 'horizontal' | 'vertical';
+
+export interface SourceItem {
+  title: string;
+  type: string;
+  snippet: string;
+  source?: string;
+  time?: string;
+  url?: string;
+  keywords?: string;
+  taskDirection?: string;
+  content?: string;
+}
+
+export interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: Date;
+  singleRagTrace?: QASingleRagTrace;
+  thinkingTrace?: QAThinkingTrace;
+  sources?: SourceItem[];
+}
+
+export interface ToolCallData {
+  tool_name: string;
+  tool_input: {
+    text?: string;
+    query?: string;
+    q?: string;
+    keyword?: string;
+    platform?: string;
+    user_fig?: string;
+    result?: string;
+    s?: string;
+    e?: string;
+  };
+}
+
+export interface KnowledgeBaseDoc {
+  title?: string;
+  content?: string;
+  source?: string;
+  url?: string;
+  snippet?: string;
+}
+
+export interface KnowledgeBaseChunk {
+  answer?: string;
+  docs?: KnowledgeBaseDoc[] | KnowledgeBaseDoc | string;
+}
+
+export interface ComparePane {
+  mode: QAMode;
+  loading: boolean;
+  singleRagTrace?: QASingleRagTrace;
+  thinkingTrace?: QAThinkingTrace;
+  sources: SourceItem[];
+}
+
+export interface CompareResult {
+  id: string | number;
+  compareUserInput: string;
+  left: ComparePane;
+  right: ComparePane;
+  differences?: {
+    consensus: string;
+    differences: string;
+    leftAdvantage: string;
+    rightAdvantage: string;
+  };
+}
+
+export interface SearchProcessState {
+  currentMode: string;
+  rounds: number;
+  hits: number;
+  queryRewrite: string;
+}
+
+export interface stateItem {
+  compareIndex: number;
+  compareId: string;
+  messageList: Message[],
+  compareResult: CompareResult[];
+}
+
+export interface qaModeItem {
+  value: QAMode;
+  label: string;
+  icon: LucideIcon;
+  desc: string;
+}
\ No newline at end of file
diff --git a/web-code/components/qa/GeneralQAConfigSidebar.tsx b/web-code/components/qa/GeneralQAConfigSidebar.tsx
new file mode 100644
index 00000000..9d65e2f3
--- /dev/null
+++ b/web-code/components/qa/GeneralQAConfigSidebar.tsx
@@ -0,0 +1,261 @@
+import { BookOpen, Bot, Brain, ChevronLeft, ChevronRight, Sparkles, User2Icon } from 'lucide-react';
+import type { AnswerStyle, CompareLayout, KnowledgeScope, QAMode, qaModeItem, ViewMode } from './GeneralQA.types';
+
+/**
+ * 左侧配置栏 Props。
+ *
+ * 组件内不保存业务状态，所有选中值和 setter 都来自父组件。
+ * 这样父组件可以统一处理“生成中切换需要确认停止”的逻辑，配置栏只负责触发用户意图。
+ */
+type Props = {
+  isDark: boolean; // 当前是否为暗黑主题，用于样式适配
+  viewMode: ViewMode; // 当前视图模式：'single' 单一模式 或 'compare' 对比模式
+  qaMode: QAMode; // 单一模式下的问答模式：'single-round' 单轮RAG / 'multi-round' 多轮RAG / 'deep-search' 深度检索
+  compareLeftMode: QAMode; // 对比模式下左侧的问答模式
+  compareRightMode: QAMode; // 对比模式下右侧的问答模式
+  compareLayout: CompareLayout; // 对比模式的布局方式：'horizontal' 水平 或 'vertical' 垂直
+  knowledgeScope: KnowledgeScope; // 知识范围设置：'all' 全部 / 'specific-kb' 指定知识库 / 'specific-domain' 指定领域
+  answerStyle: AnswerStyle; // 回答风格偏好：'concise' 简洁 或 'detailed' 详细
+  showSources: boolean; // 是否在回答中展示引用来源
+  showProcess: boolean; // 是否展示模型的思考过程
+  autoSummarizeDiff: boolean; // 对比模式下是否自动总结左右差异
+  recommendBetter: boolean; // 对比模式下是否推荐更好的回答方案
+  isCollapsed: boolean; // 左侧配置面板是否折叠
+  qaModeOptions?: qaModeItem[];
+  setQaMode: (mode: QAMode) => void; // 设置单一模式的问答模式
+  setCompareLeftMode: (mode: QAMode) => void; // 设置对比模式左侧的模式
+  setCompareRightMode: (mode: QAMode) => void; // 设置对比模式右侧的模式
+  setCompareLayout: (layout: CompareLayout) => void; // 设置对比布局方式
+  setKnowledgeScope: (scope: KnowledgeScope) => void; // 设置知识范围
+  setAnswerStyle: (style: AnswerStyle) => void; // 设置回答风格
+  setShowSources: (show: boolean) => void; // 设置是否展示引用来源
+  setShowProcess: (show: boolean) => void; // 设置是否展示思考过程
+  setAutoSummarizeDiff: (enabled: boolean) => void; // 设置是否自动总结差异
+  setRecommendBetter: (enabled: boolean) => void; // 设置是否推荐更好的方案
+  setIsCollapsed: (collapsed: boolean) => void; // 设置配置面板折叠状态
+};
+
+/**
+ * 单一模式下可选的问答模式。
+ *
+ * 每个选项同时提供展示文案、图标和简短说明，便于配置栏用统一结构渲染卡片。
+ */
+const qaModeList: qaModeItem[] = [
+  { value: 'single-chat' as const, label: '快速', icon: Bot, desc: '快速直接' },
+  { value: 'single-round' as const, label: '单轮RAG', icon: Sparkles, desc: '快速直接' },
+  { value: 'multi-round' as const, label: '多轮RAG', icon: Brain, desc: '深入理解' },
+  { value: 'deep-search' as const, label: '任务检索', icon: BookOpen, desc: '检索相关任务' },
+  { value: 'hx-search' as const, label: '画像检索', icon: User2Icon, desc: '检索相关账号' },
+  { value: 'news-report' as const, label: '新闻报告生成', icon: User2Icon, desc: '检索相关新闻' },
+];
+
+/**
+ * 知识范围选项。
+ *
+ * 当前只影响 UI 配置状态，后续接入真实知识库筛选时可以直接把该值映射到请求参数。
+ */
+const knowledgeScopeOptions = [
+  { value: 'all' as const, label: '全部知识源' },
+  { value: 'specific-kb' as const, label: '指定知识库' },
+  { value: 'specific-domain' as const, label: '指定资源域' },
+];
+
+/**
+ * 左侧问答配置栏。
+ *
+ * 该组件集中承载页面的“模式选择、知识范围、回答偏好、对比设置”等表单控件。
+ * 父组件仍是唯一状态源，配置栏通过 setter 把用户选择同步回父组件；这样不会改变原有请求逻辑，
+ * 同时把 300 多行配置 JSX 从 `GeneralQA.tsx` 中移出，便于后续维护表单项和样式。
+ */
+export default function GeneralQAConfigSidebar({
+  isDark,
+  viewMode,
+  qaMode,
+  compareLeftMode,
+  compareRightMode,
+  compareLayout,
+  knowledgeScope,
+  answerStyle,
+  showSources,
+  showProcess,
+  autoSummarizeDiff,
+  recommendBetter,
+  isCollapsed,
+  qaModeOptions = qaModeList,
+  setQaMode,
+  setCompareLeftMode,
+  setCompareRightMode,
+  setCompareLayout,
+  setKnowledgeScope,
+  setAnswerStyle,
+  setShowSources,
+  setShowProcess,
+  setAutoSummarizeDiff,
+  setRecommendBetter,
+  setIsCollapsed,
+}: Props): JSX.Element {
+  /**
+   * 自定义勾选图标。
+   *
+   * 原生 checkbox 被隐藏后，所有勾选项都通过这个 SVG 保持一致的视觉风格。
+   */
+  const renderCheckIcon = () => (
+    <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+    </svg>
+  );
+
+  return (
+    <div className={`${isCollapsed ? 'w-14 p-2' : 'w-72 p-4'} border-r flex-shrink-0 overflow-y-auto transition-all duration-300 ${
+      isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
+    }`}>
+      <div className={`flex items-center ${isCollapsed ? 'justify-center' : 'justify-between'} mb-4`}>
+        {!isCollapsed && (
+          <span className={`text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+            问答配置
+          </span>
+        )}
+        <button
+          type="button"
+          onClick={() => setIsCollapsed(!isCollapsed)}
+          className={`p-2 rounded-lg transition-all ${
+            isDark
+              ? 'text-slate-400 hover:text-white hover:bg-slate-700/50'
+              : 'text-gray-500 hover:text-red-600 hover:bg-red-50'
+          }`}
+          title={isCollapsed ? '展开侧边栏' : '收起侧边栏'}
+        >
+          {isCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
+        </button>
+      </div>
+
+      {!isCollapsed && (
+        <>
+          {viewMode === 'single' ? (
+            <div className="mb-6">
+              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>问答模式</h3>
+              <div className="space-y-2">
+                {qaModeOptions.map((mode) => {
+                  const Icon = mode.icon;
+                  return (
+                  <button
+                    key={mode.value}
+                    onClick={() => setQaMode(mode.value)}
+                    className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all text-left ${
+                      qaMode === mode.value
+                        ? isDark
+                          ? 'bg-blue-600/20 border border-blue-500/50 text-blue-400'
+                          : 'bg-red-50 border border-red-200 text-red-600'
+                        : isDark
+                          ? 'bg-slate-700/30 border border-transparent text-slate-400 hover:bg-slate-700/50'
+                          : 'bg-white border border-gray-200 text-gray-600 hover:bg-gray-50'
+                    }`}
+                  >
+                    <Icon className="w-5 h-5" />
+                    <div className="flex-1">
+                      <div className="text-sm font-medium">{mode.label}</div>
+                      <div className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{mode.desc}</div>
+                    </div>
+                  </button>
+                )
+                })}
+              </div>
+            </div>
+          ) : (
+            <>
+              <div className="mb-6">
+                <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>对比模式设置</h3>
+                <div className="mb-4">
+                  <label className={`text-xs mb-2 block ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>模式A</label>
+                  <select value={compareLeftMode} onChange={(e) => setCompareLeftMode(e.target.value as QAMode)} className={`w-full px-3 py-2 rounded-lg text-sm ${isDark ? 'bg-slate-700/50 border border-slate-600 text-white' : 'bg-white border border-gray-200 text-gray-700'}`}>
+                    {
+                      qaModeOptions.filter(item => item.value !== compareRightMode).map(item => (
+                        <option value={item.value} key={item.value}>{item.label}</option>
+                      ))
+                    }
+                  </select>
+                </div>
+                <div className={`text-center my-2 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}><span className="text-lg">VS</span></div>
+                <div className="mb-4">
+                  <label className={`text-xs mb-2 block ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>模式B</label>
+                  <select value={compareRightMode} onChange={(e) => setCompareRightMode(e.target.value as QAMode)} className={`w-full px-3 py-2 rounded-lg text-sm ${isDark ? 'bg-slate-700/50 border border-slate-600 text-white' : 'bg-white border border-gray-200 text-gray-700'}`}>
+                    {
+                      qaModeOptions.filter(item => item.value !== compareLeftMode).map(item => (
+                        <option value={item.value} key={item.value}>{item.label}</option>
+                      ))
+                    }
+                  </select>
+                </div>
+              </div>
+
+              <div className="mb-6">
+                <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>对比布局</h3>
+                <div className="flex gap-2">
+                  {(['horizontal', 'vertical'] as const).map((layout) => (
+                    <button key={layout} onClick={() => setCompareLayout(layout)} className={`flex-1 px-3 py-2 rounded-lg text-sm transition-all ${compareLayout === layout ? isDark ? 'bg-blue-600 text-white' : 'bg-red-500 text-white' : isDark ? 'bg-slate-700/50 text-slate-300' : 'bg-gray-100 text-gray-600'}`}>
+                      {layout === 'horizontal' ? '左右对比' : '上下对比'}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </>
+          )}
+
+          {/* <div className="mb-6">
+            <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>知识范围</h3>
+            <div className="space-y-2">
+              {knowledgeScopeOptions.map((option) => (
+                <label key={option.value} className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-all ${knowledgeScope === option.value ? isDark ? 'bg-blue-600/20 text-blue-400' : 'bg-red-50 text-red-600' : isDark ? 'text-slate-400 hover:bg-slate-700/30' : 'text-gray-600 hover:bg-gray-50'}`}>
+                  <input type="radio" name="knowledge-scope" checked={knowledgeScope === option.value} onChange={() => setKnowledgeScope(option.value)} className="sr-only" />
+                  <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${knowledgeScope === option.value ? isDark ? 'border-blue-500 bg-blue-500' : 'border-red-500 bg-red-500' : isDark ? 'border-slate-500' : 'border-gray-300'}`}>
+                    {knowledgeScope === option.value && <div className="w-1.5 h-1.5 rounded-full bg-white" />}
+                  </div>
+                  <span className="text-sm">{option.label}</span>
+                </label>
+              ))}
+            </div>
+          </div> */}
+
+          {/* <div className="mb-6">
+            <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>回答偏好</h3>
+            <div className="space-y-3">
+              <label className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-all ${isDark ? 'text-slate-400 hover:bg-slate-700/30' : 'text-gray-600 hover:bg-gray-50'}`}>
+                <input type="checkbox" checked={answerStyle === 'detailed'} onChange={() => setAnswerStyle(answerStyle === 'detailed' ? 'concise' : 'detailed')} className="sr-only" />
+                <div className={`w-4 h-4 rounded border flex items-center justify-center ${answerStyle === 'detailed' ? isDark ? 'bg-blue-500 border-blue-500' : 'bg-red-500 border-red-500' : isDark ? 'border-slate-500' : 'border-gray-300'}`}>{answerStyle === 'detailed' && renderCheckIcon()}</div>
+                <span className="text-sm">详细回答</span>
+              </label>
+              <label className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-all ${isDark ? 'text-slate-400 hover:bg-slate-700/30' : 'text-gray-600 hover:bg-gray-50'}`}>
+                <input type="checkbox" checked={showSources} onChange={() => setShowSources(!showSources)} className="sr-only" />
+                <div className={`w-4 h-4 rounded border flex items-center justify-center ${showSources ? isDark ? 'bg-blue-500 border-blue-500' : 'bg-red-500 border-red-500' : isDark ? 'border-slate-500' : 'border-gray-300'}`}>{showSources && renderCheckIcon()}</div>
+                <span className="text-sm">展示引用来源</span>
+              </label>
+              <label className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-all ${isDark ? 'text-slate-400 hover:bg-slate-700/30' : 'text-gray-600 hover:bg-gray-50'}`}>
+                <input type="checkbox" checked={showProcess} onChange={() => setShowProcess(!showProcess)} className="sr-only" />
+                <div className={`w-4 h-4 rounded border flex items-center justify-center ${showProcess ? isDark ? 'bg-blue-500 border-blue-500' : 'bg-red-500 border-red-500' : isDark ? 'border-slate-500' : 'border-gray-300'}`}>{showProcess && renderCheckIcon()}</div>
+                <span className="text-sm">展示检索过程</span>
+              </label>
+            </div>
+          </div> */}
+
+          {/* {viewMode === 'compare' && (
+            <div className="mb-6">
+              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>对比设置</h3>
+              <div className="space-y-3">
+                <label className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-all ${isDark ? 'text-slate-400 hover:bg-slate-700/30' : 'text-gray-600 hover:bg-gray-50'}`}>
+                  <input type="checkbox" checked={autoSummarizeDiff} onChange={() => setAutoSummarizeDiff(!autoSummarizeDiff)} className="sr-only" />
+                  <div className={`w-4 h-4 rounded border flex items-center justify-center ${autoSummarizeDiff ? isDark ? 'bg-blue-500 border-blue-500' : 'bg-red-500 border-red-500' : isDark ? 'border-slate-500' : 'border-gray-300'}`}>{autoSummarizeDiff && renderCheckIcon()}</div>
+                  <span className="text-sm">自动总结差异</span>
+                </label>
+                <label className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-all ${isDark ? 'text-slate-400 hover:bg-slate-700/30' : 'text-gray-600 hover:bg-gray-50'}`}>
+                  <input type="checkbox" checked={recommendBetter} onChange={() => setRecommendBetter(!recommendBetter)} className="sr-only" />
+                  <div className={`w-4 h-4 rounded border flex items-center justify-center ${recommendBetter ? isDark ? 'bg-blue-500 border-blue-500' : 'bg-red-500 border-red-500' : isDark ? 'border-slate-500' : 'border-gray-300'}`}>{recommendBetter && renderCheckIcon()}</div>
+                  <span className="text-sm">推荐更优答案</span>
+                </label>
+              </div>
+            </div>
+          )} */}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/web-code/components/qa/GeneralQAHeader.tsx b/web-code/components/qa/GeneralQAHeader.tsx
new file mode 100644
index 00000000..16e68631
--- /dev/null
+++ b/web-code/components/qa/GeneralQAHeader.tsx
@@ -0,0 +1,85 @@
+import { History } from 'lucide-react';
+import type { PageType } from '../../components/Sidebar';
+import type { ViewMode } from './GeneralQA.types';
+
+/**
+ * 顶部栏 Props。
+ *
+ * `setViewMode` 和 `onNavigate` 由父组件传入，父组件会在生成中切换时做确认拦截；
+ * Header 本身不直接感知 loading，保持纯展示和事件转发。
+ */
+type Props = {
+  isDark: boolean; // 当前是否为暗黑主题，用于样式适配
+  viewMode: ViewMode; // 当前视图模式：'single' 单一模式 或 'compare' 对比模式
+  chatHeadTitle?: string;
+  chatDesign?: string;
+  compareShow?: boolean;
+  setViewMode: (mode: ViewMode) => void; // 设置视图模式回调函数
+  onNavigate: (page: PageType) => void; // 页面导航回调函数，用于跳转到其他页面（如历史记录）
+};
+
+/**
+ * 通用问答页面顶部栏。
+ *
+ * 该组件只负责页面标题、模式切换和历史记录入口，所有业务状态仍由父组件维护。
+ * 这样拆分后，顶部导航的样式和交互不会和中间问答流处理逻辑混在一起，后续如果要新增
+ * “保存模板”“导出记录”等入口，也可以只改这个文件。
+ */
+export default function GeneralQAHeader({ isDark, viewMode, chatHeadTitle = '通用问答', chatDesign = '支持单轮RAG、多轮RAG、深度检索及结果对比', compareShow = true, setViewMode, onNavigate }: Props): JSX.Element {
+  return (
+    <div className={`flex items-center justify-between px-6 py-4 border-b ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+      <div className="flex items-center gap-4">
+        <h1 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+          {chatHeadTitle}
+        </h1>
+        <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+          {chatDesign}
+        </span>
+      </div>
+      {
+        compareShow && <div className="flex items-center gap-2">
+          <div className={`flex rounded-lg p-1 ${isDark ? 'bg-slate-700/50' : 'bg-red-50'}`}>
+            <button
+              onClick={() => setViewMode('single')}
+              className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${viewMode === 'single'
+                  ? isDark
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-red-500 text-white'
+                  : isDark
+                    ? 'text-slate-400 hover:text-white'
+                    : 'text-gray-600 hover:text-red-600'
+                }`}
+            >
+              单一模式
+            </button>
+            <button
+              onClick={() => setViewMode('compare')}
+              className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${viewMode === 'compare'
+                  ? isDark
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-red-500 text-white'
+                  : isDark
+                    ? 'text-slate-400 hover:text-white'
+                    : 'text-gray-600 hover:text-red-600'
+                }`}
+            >
+              对比模式
+            </button>
+          </div>
+
+          {/* <button
+          onClick={() => onNavigate('qa-records')}
+          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+            isDark
+              ? 'bg-slate-700/50 text-slate-300 hover:bg-slate-600/50'
+              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+          }`}
+        >
+          <History className="w-4 h-4" />
+          历史记录
+        </button> */}
+        </div>
+      }
+    </div>
+  );
+}
diff --git a/web-code/components/qa/GeneralQa.tsx b/web-code/components/qa/GeneralQa.tsx
new file mode 100644
index 00000000..468d5f1c
--- /dev/null
+++ b/web-code/components/qa/GeneralQa.tsx
@@ -0,0 +1,2876 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  GitCompare,
+  MessageSquare,
+  CheckCircle,
+  AlertCircle,
+  ArrowDown,
+  ExternalLink,
+  Square,
+  X,
+} from 'lucide-react';
+import { Dialog, Select, Slider } from 'tdesign-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import { PageType } from '../../components/Sidebar';
+import { ChatMessage, EmptyChatState, QAAvatar, QAComposer, QASingleRagTrace, QAThinkingRound, QAThinkingTrace, RetrievalThinkingTrace, SingleRagAnswer, TypingIndicator } from './QACommon';
+import GeneralQAHeader from './GeneralQAHeader';
+import GeneralQAConfigSidebar from './GeneralQAConfigSidebar';
+import type { ComparePane, CompareResult, KnowledgeBaseChunk, Message, QAMode, SourceItem, stateItem, ToolCallData, ViewMode } from './GeneralQA.types';
+import {
+  chatDataJSON,
+  createComparePane,
+  createMockSingleRagMessages,
+  createMultiRoundStreamTrace,
+  createThinkingTrace,
+  extractJsonObjects,
+  mapDocsToSources,
+  mapReferenceToSource,
+  parseSingleRagStream,
+  platformTypeChange,
+} from './GeneralQA.mock';
+import { requestCrudService } from '@/service/request-axios-service';
+
+/**
+ * 通用问答组件
+ * 支持单轮RAG、多轮RAG、深度检索及结果对比功能
+ * @param onNavigate - 页面导航函数
+ * @param initialMode - 初始模式（可选）
+ */
+
+const zncmUrl = import.meta.env.VITE_API_BASE_URL || '';
+const chatUrl = import.meta.env.VITE_AIPI_CHAT_URL || '';
+const generateUrl = import.meta.env.VITE_AIPI_GENERATE_CHAT_URL || '';
+const taskChatUrl = import.meta.env.VITE_AIPI_TASK_CHAT_URL || '';
+const knowledgeUrl = import.meta.env.VITE_AIPI_KNOWLEDGE_URL;
+const service = requestCrudService;
+const GeneralQA: React.FC<{ onNavigate: (page: PageType) => void; initialMode?: string }> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 状态管理
+  // 视图模式：单一模式或对比模式
+  const [viewMode, setViewMode] = useState<ViewMode>('single');
+  // 问答模式：单轮RAG、多轮RAG、深度检索
+  const [qaMode, setQaMode] = useState<QAMode>('single-round');
+  // 对比模式下的左侧模式
+  const [compareLeftMode, setCompareLeftMode] = useState<QAMode>('single-round');
+  // 对比模式下的右侧模式
+  const [compareRightMode, setCompareRightMode] = useState<QAMode>('multi-round');
+
+  // 知识范围设置
+  const [knowledgeScope, setKnowledgeScope] = useState<'all' | 'specific-kb' | 'specific-domain'>('all');
+
+  // 回答偏好设置
+  const [answerStyle, setAnswerStyle] = useState<'concise' | 'detailed'>('detailed');
+  const [showSources, setShowSources] = useState(true);
+  const [showProcess, setShowProcess] = useState(false);
+
+  // 对比设置
+  const [compareLayout, setCompareLayout] = useState<'horizontal' | 'vertical'>('horizontal');
+  const [autoSummarizeDiff, setAutoSummarizeDiff] = useState(true);
+  const [recommendBetter, setRecommendBetter] = useState(true);
+
+  // 消息和结果状态
+  // `messages` 驱动单一模式聊天区；`compareResult` 驱动对比模式左右面板。
+  // `isPreConnectLoading` 表示请求已发起但还没拿到可展示的 assistant 消息，用于显示“正在连接/生成”的占位状态。
+  const [messages, setMessages] = useState<Message[]>([]);
+  // 用户当前输入的文本内容，用于绑定输入框
+  const [inputValue, setInputValue] = useState('');
+  // 是否正在处理请求（包含真实请求和模拟请求）
+  const [isLoading, setIsLoading] = useState(false);
+  // 是否处于"连接中"状态，表示已发起请求但还未收到可展示的响应
+  const [isPreConnectLoading, setIsPreConnectLoading] = useState(false);
+  // 存储发生的错误信息，用于显示错误提示
+  const [error, setError] = useState<string | null>(null);
+  // 对比模式下的结果数据，包含左右两侧的回答和来源信息
+  const [compareResult, setCompareResult] = useState<CompareResult[]>([]);
+  // 对比模式下用户输入的问题内容，用于左右对比时的统一输入
+  const [compareUserInput, setCompareUserInput] = useState('');
+  // 是否折叠左侧配置面板，true 为折叠，false 为展开
+  const [isLeftSidebarCollapsed, setIsLeftSidebarCollapsed] = useState(false);
+  // 是否启用自动滚动，当用户手动滚动时会自动关闭
+  const [isAutoScrollEnabled, setIsAutoScrollEnabled] = useState(true);
+  // 是否显示"滚动到底部"按钮，当有未读消息且用户已滚动时显示
+  const [showScrollToBottom, setShowScrollToBottom] = useState(false);
+  // 当前选中的引用来源，用于显示引用详情弹窗
+  const [selectedCitation, setSelectedCitation] = useState<SourceItem | null>(null);
+  const [editingMessageId, setEditingMessageId] = useState<string | null>(null);
+  const [editingThinking, setEditingThinking] = useState('');
+  const [editingAnswer, setEditingAnswer] = useState('');
+  // 模型参数设置弹窗状态。
+  // 这些值会进入单轮 RAG 的真实请求体；模拟流仍复用同一套 UI，方便接口恢复后无缝切换。
+  const [isModelSettingsOpen, setIsModelSettingsOpen] = useState(false);
+  const [modelName, setModelName] = useState('OpenAI3');
+  const [scoreThreshold, setScoreThreshold] = useState(0.5);
+  const [temperature, setTemperature] = useState(0.3);
+
+  // 当模型正在生成时，如果用户切换模式或跳转页面，先把原动作暂存到 ref，待用户确认停止后再执行。
+  // 使用 ref 而不是 state 可以避免弹窗确认过程触发额外渲染，也不会被闭包中的旧状态影响。
+  const pendingActionRef = useRef<(() => void) | null>(null);
+
+  // 防止 Enter keydown 和按钮 click 在 React 状态更新前重复触发提交。
+  const submitLockRef = useRef(false);
+
+  // 真实流式请求的 reader 句柄，用于“停止生成”时取消浏览器流读取。
+  const readerRef = useRef<any>(null);
+  // 对比模式会同时启动左右两路请求，因此分别保存 reader，保证可以单独停止某一侧生成。
+  const compareReaderRef = useRef<{
+    left: any;
+    right: any;
+  }>({ left: null, right: null });
+  // 多轮接口创建任务后会返回 task_id，这里预留给后续“按任务取消/查询状态”等能力。
+  const taskIdRef = useRef<string | null>(null);
+
+  // 本地模拟流没有真实 reader，因此用停止标记在异步循环中主动中断。
+  const mockSingleRoundStoppedRef = useRef(false);
+  const mockMultiRoundStoppedRef = useRef(false);
+  const chatListRef = useRef<HTMLDivElement | null>(null);
+  const userId = useRef(localStorage.getItem('userId') || '387'); // 用户id
+  const qaType = useRef('GENERAL'); // 问答类型
+  const chatDataId = useRef(); // 聊天窗口id
+  const compareChatId = useRef(); // 对比对话记录id
+
+  // 检索过程展示状态
+  const [searchProcess, setSearchProcess] = useState({
+    currentMode: '单轮RAG',
+    rounds: 1,
+    hits: 5,
+    queryRewrite: '',
+  });
+
+  const state = useRef<stateItem>({
+    compareIndex: 0,
+    compareId: '',
+    messageList: [],
+    compareResult: []
+  })
+
+  /**
+   * 处理单轮 RAG 问答请求
+   * 
+   * 单轮 RAG 的处理流程：
+   * 1. 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
+   * 2. API 返回 SSE 流式响应，包含多个 JSON 对象
+   * 3. 逐个解析流式 JSON，提取 answer 和 docs 字段
+   * 4. 通过 applyAnswerToken 将流式 token 追加到消息的 thinkingMarkdown/answerMarkdown
+   * 5. 实时更新消息来源（sources）和检索统计（searchProcess）
+   * 
+   * @param query - 用户输入的问题文本
+   */
+  const handleSingleRoundRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    // 清空之前的错误信息
+    setError(null);
+    // 标记开始加载，禁用提交按钮防止重复点击
+    setIsLoading(true);
+    // 标记"连接中"状态，显示加载占位符
+    setIsPreConnectLoading(true);
+    // 用于存储当前 assistant 消息的 ID，以便后续更新该消息内容
+    let assistantId = '';
+
+    // 标志位：当前处理的 token 是否处于 <think>... 标签内（解析思考过程）
+    let inThink = false;
+    // 标志位：是否已经遇到过 <think> 标签开始解析思考内容
+    let thinkStarted = false;
+
+    /**
+     * 将流式接收到的 token 应用到对应消息的 singleRagTrace 中
+     * 该函数会解析 token 中的 <think>... 标签，将思考过程和回答分开存储
+     * @param token - 从流中接收到的文本片段
+     */
+    const applyAnswerToken = (token: string) => {
+      const mesItem = state.current.messageList[1];
+      // 获取当前消息的思考和回答内容
+      let thinkingMarkdown = mesItem.singleRagTrace.thinkingMarkdown;
+      let answerMarkdown = mesItem.singleRagTrace.answerMarkdown;
+      let thinkingComplete = mesItem.singleRagTrace.thinkingComplete || false;
+      // 剩余未处理的 token 内容
+      let remaining = token;
+      console.log('remaining', remaining)
+      // 当前处于 <think> 标签内（解析思考过程），查找结束标签 
+      while (remaining) {
+        if (inThink) {
+          const endIdx = remaining.indexOf('</think>');
+          if (endIdx === -1) {
+            thinkingMarkdown += remaining;
+            remaining = '';
+          } else {
+            thinkingMarkdown += remaining.slice(0, endIdx);
+            remaining = remaining.slice(endIdx + '</think>'.length);
+            inThink = false;
+            thinkingComplete = true;
+          }
+        } else {
+          const startIdx = remaining.indexOf('<think>');
+          console.log('startIdx', startIdx)
+          if (startIdx === -1) {
+            answerMarkdown += remaining;
+            remaining = '';
+          } else {
+            answerMarkdown += remaining.slice(0, startIdx);
+            remaining = remaining.slice(startIdx + '<think>'.length);
+            inThink = true;
+            thinkStarted = true;
+          }
+        }
+      }
+      state.current.messageList[1] = {
+        ...mesItem,
+        singleRagTrace: {
+          ...mesItem.singleRagTrace,
+          // 更新思考和回答的 markdown 内容
+          thinkingMarkdown,
+          answerMarkdown,
+          // 只有当已经开始解析思考内容时才更新 thinkingComplete 标志
+          thinkingComplete: thinkStarted ? thinkingComplete : true,
+        },
+      }
+      if (!side) {
+        setMessages((prev) => prev.map((msg) => {
+          // 跳过不是当前 assistant 消息或没有 singleRagTrace 的消息
+          if (msg.id !== assistantId || !msg.singleRagTrace) return msg;
+          // 返回更新后的消息对象，保留 singleRagTrace 中的所有字段
+          return {
+            ...state.current.messageList[1],
+          };
+        }));
+      } else {
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            singleRagTrace: {
+              title: '大模型',
+              thinkingMarkdown,
+              answerMarkdown,
+              thinkingComplete: thinkStarted ? thinkingComplete : true,
+            },
+          };
+        });
+      }
+    };
+
+    const updatePane = (side: 'left' | 'right', updater: (pane: ComparePane) => ComparePane) => {
+      setCompareResult((prev) => {
+        if (!prev) return prev;
+        return {
+          ...prev,
+          [side]: updater(prev[side]),
+        };
+      });
+    };
+
+    try {
+      // 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
+      const response = await fetch(`${chatUrl}/chat/knowledge_base_chat_tiaoshi`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        // 请求体包含查询内容、知识库名称、检索参数、模型配置等
+        body: JSON.stringify({
+          query,                        // 用户输入的问题
+          knowledge_base_name: [],      // 知识库名称列表，空数组表示使用所有知识库
+          top_k: 5,                     // 返回最相似的 5 条结果
+          score_threshold: scoreThreshold, // 相似度阈值，过滤低质量检索结果
+          history: [],                  // 对话历史，用于多轮对话
+          stream: true,                 // 启用流式响应
+          model_name: modelName,         // 使用的模型名称
+          temperature,                   // 生成温度，控制随机性
+          prompt_name: 'default',        // 使用的提示词模板
+          local_doc_url: false,         // 是否返回本地文档 URL
+        }),
+      });
+
+      // 检查 HTTP 响应状态
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      // 确保响应体存在（SSE 流需要 body）
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      // 收到有效响应后，关闭"连接中"状态，开始显示实际内容
+      setIsPreConnectLoading(false);
+
+      // 生成唯一 ID 用于标识这条 assistant 消息
+      assistantId = `assistant-${Date.now()}`;
+      // 初始化思考过程追踪对象
+      const initialTrace: QASingleRagTrace = {
+        title: '单轮 RAG 思考过程',
+        thinkingMarkdown: '', // 思考过程内容
+        answerMarkdown: '',    // 最终回答内容
+        thinkingComplete: false, // 思考是否完成
+      };
+      const messageItem: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        singleRagTrace: initialTrace,
+        sources: [], // 初始为空，随着检索结果更新
+      }
+      state.current.messageList.push(messageItem); // 数据存储
+      // 将 assistant 消息添加到消息列表中
+      setMessages((prev) => [...prev, messageItem]);
+
+      // 获取响应体的流式读取器
+      const reader = response.body.getReader();
+      // 保存 reader 引用，用于"停止生成"功能
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      // 创建文本解码器，将二进制数据转换为字符串
+      const decoder = new TextDecoder();
+      // buffer 用于暂存未完成的 JSON 片段
+      let buffer = '';
+      let docsList: any[] = [];
+      try {
+        // 持续读取流数据，直到流结束
+        while (true) {
+          // 读取下一个数据块
+          const { done, value } = await reader.read();
+          // done 为 true 时表示流已结束
+          if (done) {
+            console.log('聊天记录', state.current.messageList);
+            chatHistoryAddSearch();
+            break;
+          }
+
+          // 将二进制数据解码并追加到 buffer
+          buffer += decoder.decode(value, { stream: true });
+          // 从 buffer 中提取完整的 JSON 对象
+          const extracted = extractJsonObjects(buffer);
+          if (buffer.includes('docs')) {
+            try {
+              docsList = chatDataJSON(buffer).docsList || [];
+            } catch (error: any) {
+              console.log(error);
+            }
+          }
+          // 剩余无法解析的内容保留到下次处理
+          buffer = extracted.rest;
+
+          // 遍历所有提取到的 JSON 对象
+          for (const jsonText of extracted.objects) {
+            try {
+              // 解析知识库返回的 JSON 片段
+              const parsed = parseKnowledgeBaseChunk(jsonText);
+              // 如果有回答内容，追加到消息的 answerMarkdown
+              if (typeof parsed.answer === 'string') {
+                applyAnswerToken(parsed.answer);
+              }
+              // 如果有检索文档，更新消息的来源信息
+              if (parsed.docs) {
+                // 将 docs 转换为 sources 格式
+                const mappedDocs = docsList.map((item: any) => ({
+                  title: item.m_title,
+                  type: item.source1,
+                  snippet: item.m_content,
+                  source: item.source1,
+                  time: item.m_publish,
+                  url: item.recUuid,
+                  content: item.m_content || '',
+                }));
+                // 更新检索统计信息
+                setSearchProcess((prev) => ({ ...prev, hits: prev.hits + mappedDocs.length }));
+                state.current.messageList[1].sources = mappedDocs;
+                // 更新消息的来源列表
+                if (!side) {
+                  setMessages((prev) => prev.map((msg) => (
+                    msg.id === assistantId ? { ...msg, sources: mappedDocs } : msg
+                  )));
+                } else {
+                  updatePane(side, (pane) => ({ ...pane, sources: mappedDocs }));
+                }
+              }
+            } catch (parseError) {
+              // 解析错误不影响主流程，记录日志继续处理
+              console.error('单轮RAG流式JSON解析错误:', parseError);
+            }
+          }
+        }
+      } finally {
+        // 流读取完成后，释放 reader 锁并清空引用
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      // 请求失败处理
+      console.error('单轮RAG请求失败:', runError);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      state.current.messageList = [];
+    }
+  };
+
+  /**
+ * 处理单轮 RAG 问答请求
+ * 
+ * 单轮 RAG 的处理流程：
+ * 1. 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
+ * 2. API 返回 SSE 流式响应，包含多个 JSON 对象
+ * 3. 逐个解析流式 JSON，提取 answer 和 docs 字段
+ * 4. 通过 applyAnswerToken 将流式 token 追加到消息的 thinkingMarkdown/answerMarkdown
+ * 5. 实时更新消息来源（sources）和检索统计（searchProcess）
+ * 
+ * @param query - 用户输入的问题文本
+ */
+  const chatRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    // 清空之前的错误信息
+    setError(null);
+    // 标记开始加载，禁用提交按钮防止重复点击
+    setIsLoading(true);
+    // 标记"连接中"状态，显示加载占位符
+    setIsPreConnectLoading(true);
+    // 用于存储当前 assistant 消息的 ID，以便后续更新该消息内容
+    let assistantId = '';
+
+    // 标志位：当前处理的 token 是否处于 <think>... 标签内（解析思考过程）
+    let inThink = false;
+    // 标志位：是否已经遇到过 <think> 标签开始解析思考内容
+    let thinkStarted = false;
+
+    /**
+     * 将流式接收到的 token 应用到对应消息的 singleRagTrace 中
+     * 该函数会解析 token 中的 <think>... 标签，将思考过程和回答分开存储
+     * @param token - 从流中接收到的文本片段
+     */
+    const applyAnswerToken = (token: string, side: 'left' | 'right' | null = null) => {
+      let mesItem: any = state.current.messageList[1];
+      if (side === 'left' || side === 'right') {
+        mesItem = state.current.compareResult[state.current.compareIndex][side];
+      }
+      // 获取当前消息的思考和回答内容
+      let thinkingMarkdown = mesItem.singleRagTrace.thinkingMarkdown;
+      let answerMarkdown = mesItem.singleRagTrace.answerMarkdown;
+      let thinkingComplete = mesItem.singleRagTrace.thinkingComplete || false;
+      // 剩余未处理的 token 内容
+      let remaining = token;
+      // console.log('remaining', remaining)
+      // 当前处于 <think> 标签内（解析思考过程），查找结束标签 
+      while (remaining) {
+        if (inThink) {
+          const endIdx = remaining.indexOf('</think>');
+          if (endIdx === -1) {
+            thinkingMarkdown += remaining;
+            remaining = '';
+          } else {
+            thinkingMarkdown += remaining.slice(0, endIdx);
+            remaining = remaining.slice(endIdx + '</think>'.length);
+            inThink = false;
+            thinkingComplete = true;
+          }
+        } else {
+          const startIdx = remaining.indexOf('<think>');
+          if (startIdx === -1) {
+            answerMarkdown += remaining;
+            remaining = '';
+          } else {
+            answerMarkdown += remaining.slice(0, startIdx);
+            remaining = remaining.slice(startIdx + '<think>'.length);
+            inThink = true;
+            thinkStarted = true;
+          }
+        }
+      }
+      if (!side) {
+        state.current.messageList[1] = {
+          ...mesItem,
+          singleRagTrace: {
+            ...mesItem.singleRagTrace,
+            // 更新思考和回答的 markdown 内容
+            thinkingMarkdown,
+            answerMarkdown,
+            // 只有当已经开始解析思考内容时才更新 thinkingComplete 标志
+            thinkingComplete: thinkStarted ? thinkingComplete : true,
+          },
+        }
+        setMessages((prev) => prev.map((msg) => {
+          // 跳过不是当前 assistant 消息或没有 singleRagTrace 的消息
+          if (msg.id !== assistantId || !msg.singleRagTrace) return msg;
+          // 返回更新后的消息对象，保留 singleRagTrace 中的所有字段
+          return {
+            ...state.current.messageList[1],
+          };
+        }));
+      } else {
+        state.current.compareResult[state.current.compareIndex][side].singleRagTrace = {
+          ...mesItem.singleRagTrace,
+          // 更新思考和回答的 markdown 内容
+          thinkingMarkdown,
+          answerMarkdown,
+          // 只有当已经开始解析思考内容时才更新 thinkingComplete 标志
+          thinkingComplete: thinkStarted ? thinkingComplete : true,
+        }
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            singleRagTrace: {
+              title: '大模型',
+              thinkingMarkdown,
+              answerMarkdown,
+              thinkingComplete: thinkStarted ? thinkingComplete : true,
+            },
+          };
+        });
+      }
+    };
+
+    try {
+      // 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
+      const response = await fetch(`${chatUrl}/chat/chat`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        // 请求体包含查询内容、知识库名称、检索参数、模型配置等
+        body: JSON.stringify({
+          query,                        // 用户输入的问题
+          history: [],                  // 对话历史，用于多轮对话
+          stream: true,                 // 启用流式响应
+          model_name: modelName,         // 使用的模型名称
+          temperature,                   // 生成温度，控制随机性
+          prompt_name: 'default',        // 使用的提示词模板
+          max_tokens: 1000
+        }),
+      });
+
+      // 检查 HTTP 响应状态
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      // 确保响应体存在（SSE 流需要 body）
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      // 收到有效响应后，关闭"连接中"状态，开始显示实际内容
+      setIsPreConnectLoading(false);
+
+      // 生成唯一 ID 用于标识这条 assistant 消息
+      assistantId = `assistant-${Date.now()}`;
+      // 初始化思考过程追踪对象
+      const initialTrace: QASingleRagTrace = {
+        title: '大模型思考过程',
+        thinkingMarkdown: '', // 思考过程内容
+        answerMarkdown: '',    // 最终回答内容
+        thinkingComplete: false, // 思考是否完成
+      };
+      const messageItem: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        singleRagTrace: initialTrace,
+        sources: [], // 初始为空，随着检索结果更新
+      }
+      if (!side) {
+        state.current.messageList.push(messageItem);
+        // 将 assistant 消息添加到消息列表中
+        setMessages((prev) => [...prev, messageItem]);
+      } else if (side === 'left' || side === 'right') {
+        state.current.compareResult[state.current.compareIndex][side].singleRagTrace = initialTrace;
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            singleRagTrace: initialTrace,
+          };
+        });
+      }
+
+      // 获取响应体的流式读取器
+      const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
+      // 保存 reader 引用，用于"停止生成"功能
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      // 创建文本解码器，将二进制数据转换为字符串
+      const decoder = new TextDecoder();
+      // buffer 用于暂存未完成的 JSON 片段
+
+      try {
+        // 持续读取流数据，直到流结束
+        while (true) {
+          // 读取下一个数据块
+          const { done, value } = await reader.read();
+          // done 为 true 时表示流已结束
+          if (done) {
+            console.log('聊天记录', state.current.messageList);
+            if (!side) {
+              chatHistoryAddSearch();
+            }
+            break;
+          }
+          applyAnswerToken(value, side);
+        }
+      } finally {
+        // 流读取完成后，释放 reader 锁并清空引用
+        if (readerRef.current) {
+          // readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      // 请求失败处理
+      console.error('单轮RAG请求失败:', runError);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      state.current.messageList = [];
+    }
+  };
+
+  /**
+   * 解析类 JavaScript 对象字符串中的字符串值。
+   *
+   * 后端单轮 RAG 流有时不是严格 JSON，而是 `{answer: '...'}` 这种对象片段。
+   * 该函数只负责把单/双引号包裹的 answer 内容还原成普通字符串，保留换行和转义字符。
+   */
+  const parseLooseStringValue = (rawValue: string): string => {
+    try {
+      return JSON.parse(rawValue) as string;
+    } catch {
+      const trimmedValue = rawValue.trim();
+      if (trimmedValue.startsWith("'") && trimmedValue.endsWith("'")) {
+        return trimmedValue
+          .slice(1, -1)
+          .replace(/\\n/g, '\n')
+          .replace(/\\r/g, '\r')
+          .replace(/\\t/g, '\t')
+          .replace(/\\'/g, "'")
+          .replace(/\\\\/g, '\\');
+      }
+      throw new Error(`无法解析字符串值: ${rawValue}`);
+    }
+  };
+
+  const parseLooseValue = (rawValue: string): unknown => {
+    try {
+      return JSON.parse(rawValue);
+    } catch {
+      return parseLooseStringValue(rawValue);
+    }
+  };
+
+  /**
+   * 将单轮知识库流中的一个对象片段转换为统一数据结构。
+   *
+   * 兼容两类返回：
+   * - 严格 JSON：`{"answer":"..."}` / `{"docs":[...]}`
+   * - 宽松对象：`{answer: '...'}` / `{docs: [...]}`
+   *
+   * 真实接口和本地模拟都走同一个解析函数，确保联调时只需要替换数据源，不需要改 UI 更新逻辑。
+   */
+  const parseKnowledgeBaseChunk = (jsonText: string): KnowledgeBaseChunk => {
+    try {
+      return JSON.parse(jsonText) as KnowledgeBaseChunk;
+    } catch {
+      const objectText = jsonText.trim();
+      const answerMatch = objectText.match(/^\{\s*answer\s*:\s*([\s\S]*)\s*\}$/);
+      if (answerMatch) {
+        const rawValue = answerMatch[1].trim();
+        return { answer: parseLooseStringValue(rawValue) };
+      }
+
+      const docsMatch = objectText.match(/^\{\s*docs\s*:\s*([\s\S]*)\s*\}$/);
+      if (docsMatch) {
+        return { docs: parseLooseValue(docsMatch[1]) as KnowledgeBaseChunk['docs'] };
+      }
+
+      const normalizedText = objectText.replace(/([{,]\s*)(answer|docs)(\s*:)/g, '$1"$2"$3');
+      return JSON.parse(normalizedText) as KnowledgeBaseChunk;
+    }
+  };
+
+  const sleep = (ms: number) => new Promise((resolve) => {
+    window.setTimeout(resolve, ms);
+  });
+  const updatePane = (side: 'left' | 'right', updater: (pane: ComparePane) => ComparePane) => {
+    setCompareResult((prev) => prev.map((msg) => {
+      if (msg.id !== state.current.compareId) return msg
+      return {
+        ...msg,
+        [side]: updater(msg[side]),
+      };
+    }));
+  };
+  /**
+   * 处理多轮真实接口里的工具调用事件。
+   *
+   * `show_text` 用于追加思考或最终回答；`local_search` / `tavily_search` 用于把检索结果填入最近一轮。
+   * 这里保持事件到 UI trace 的单向映射，避免请求层和展示层互相耦合。
+   */
+  const handleToolCall = (toolData: ToolCallData, assistantId: string, side: 'left' | 'right' | null = null) => {
+    let mesItem: any = state.current.messageList[1];
+    if (side === 'left' || side === 'right') {
+      mesItem = state.current.compareResult[state.current.compareIndex][side];
+      console.log('mesItem', mesItem)
+    }
+    const trace = { ...mesItem.thinkingTrace, rounds: [...mesItem.thinkingTrace.rounds] };
+    const lastRound = trace.rounds[trace.rounds.length - 1];
+    switch (toolData.tool_name) {
+      case 'show_text': {
+        const chatText = toolData.tool_input.text || '';
+        if (chatText.includes('<think>')) {
+          const thinkContent = chatText.replace('<think>', '').replace('</think>', '').trim();
+          if (trace.rounds[0].title !== '正在准备检索') {
+            lastRound.queryLoading = false;
+            lastRound.queryShow = lastRound.retrievals.length > 0;
+            trace.rounds.push({
+              id: `round-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+              title: '思考中',
+              thoughtMarkdown: thinkContent,
+              query: '',
+              queryLoading: true,
+              queryShow: true,
+              retrievals: [],
+            });
+          } else {
+            // lastRound.queryLoading = false;
+            trace.rounds[0].title = '思考过程'
+            trace.rounds[0].thoughtMarkdown = thinkContent;
+          }
+        } else {
+          lastRound.queryLoading = false;
+          trace.finalAnswerMarkdown += chatText;
+          trace.thinkingComplete = true;
+        }
+        break;
+      }
+      case 'tavily_search':
+      case 'local_search': {
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as {
+              query?: string;
+              results?: Array<{ title?: string; content?: string; url?: string }>;
+            };
+
+            lastRound.query = result.query || lastRound.query;
+            lastRound.queryLoading = false;
+            lastRound.title = toolData.tool_name === 'local_search' ? '本地知识检索' : '联网检索';
+            lastRound.retrievals = (result.results || []).map((item, idx) => ({
+              id: `${toolData.tool_name}-${idx}`,
+              title: item.title || '未命名结果',
+              content: item.content || '',
+              source: item.url || '',
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        }
+        break;
+      }
+      case 'google_search': { // 处理多轮检索
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as {
+              organic: Array<{ title?: string; content?: string; url?: string; recUuid?: string; publish_time?: string }>;
+            };
+            lastRound.queryLoading = false;
+            lastRound.title = '思考过程';
+            lastRound.retrievals = (result.organic || []).map((item, idx) => ({
+              id: item.recUuid,
+              title: item.title || '未命名结果',
+              content: item.content || '',
+              source: item.recUuid || '',
+              time: item.publish_time,
+              recUuid: item.recUuid,
+              type: 'more'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.q) {
+          lastRound.query = toolData.tool_input.q;
+        }
+        break;
+      }
+      case 'getTaskLikeTop': { // 任务检索
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as {
+              data: Array<{ taskName?: string; overview?: string; id?: number; keywords?: string; taskDirection?: string; taskLevel?: number; taskStartDate: string; taskEndDate: string }>;
+            }
+            console.log('result', result);
+            lastRound.queryLoading = false;
+            lastRound.title = '思考过程';
+            lastRound.retrievals = (result.data || []).map((item, idx) => ({
+              id: String(item.id),
+              title: item.taskName || '未命名结果',
+              content: item.overview || '',
+              keywords: item.keywords,
+              taskDirection: item.taskDirection,
+              time: `${item.taskStartDate}-${item.taskEndDate}`,
+              type: 'task'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword) {
+          lastRound.query = toolData.tool_input.keyword;
+        }
+        break;
+      }
+      case 'search_user_profile': { // 画像检索
+        lastRound.title = '靶标平台画像库';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; page_content?: string; 平台?: string; 类型?: string; 粉丝数?: number; }>;
+            console.log('result', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.page_content || '',
+              platform: platformTypeChange(item.平台) || '',
+              fans: item.粉丝数 || 0,
+              type: 'hx'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
+          lastRound.queryTitle = '检索词';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query || toolData.tool_input.user_fig;
+        }
+        break;
+      }
+      case 'get_taiwan_news': { // 查找台湾热点新闻
+        lastRound.title = '台湾热点新闻';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
+            console.log('get_taiwan_news', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.content || '',
+              platform: platformTypeChange(item.platform) || '',
+              comment_count: item.comment_count,
+              message_id: item.message_id,
+              time: item.publish_time,
+              type: 'taiwan_news'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
+          lastRound.queryTitle = '搜索台湾新闻';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query;
+        }
+        break;
+      }
+      case 'search_keyword_taiwan_news': { // 查找台湾热点新闻
+        lastRound.title = '台湾热点新闻';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
+            console.log('get_taiwan_news', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.content || '',
+              platform: platformTypeChange(item.platform) || '',
+              comment_count: item.comment_count,
+              message_id: item.message_id,
+              time: item.publish_time,
+              type: 'taiwan_news'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
+          lastRound.queryTitle = '搜索台湾新闻';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query;
+        }
+        break;
+      }
+      case 'get_world_news': {
+        lastRound.title = '世界热点新闻';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
+            console.log('get_taiwan_news', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.content || '',
+              platform: platformTypeChange(item.platform) || '',
+              comment_count: item.comment_count,
+              message_id: item.message_id,
+              time: item.publish_time,
+              type: 'world_news'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
+          lastRound.queryTitle = '搜索世界新闻';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query;
+        }
+        break;
+      }
+      case 'get_root_messaage_comment': { // 获取某条消息的全部评论
+        lastRound.title = '获取该消息的全部评论';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
+            console.log('get_taiwan_news', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.content || '',
+              platform: platformTypeChange(item.platform) || '',
+              comment_count: item.comment_count,
+              message_id: item.message_id,
+              time: item.publish_time,
+              type: 'messaage_comment'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query || toolData.tool_input.platform) {
+          lastRound.queryTitle = '查找平台';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query || platformTypeChange(toolData.tool_input.platform);
+        }
+        break;
+      }
+      case 'search_user_behavior': { // 查询该用户的历史行为
+        lastRound.title = '查询该用户的历史行为';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result);
+            console.log('search_user_behavior', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result.slice(0, 10) || []).map((item, idx) => ({
+              id: item,
+              title: item,
+              content: item,
+              type: 'user_behavior'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query || toolData.tool_input.platform) {
+          lastRound.queryTitle = '查找平台';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query || platformTypeChange(toolData.tool_input.platform);
+        }
+        break;
+      }
+      case 'get_america_news': { // 根据关键词获取美国热点新闻
+        lastRound.title = '美国热点新闻';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
+            console.log('get_taiwan_news', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.content || '',
+              platform: platformTypeChange(item.platform) || '',
+              comment_count: item.comment_count,
+              message_id: item.message_id,
+              time: item.publish_time,
+              type: 'america_news'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
+          lastRound.queryTitle = '查询美国热点新闻';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query;
+        }
+        break;
+      }
+      case 'get_time_data': { // 态势新闻搜索
+        lastRound.title = '态势新闻搜索';
+        console.log('get_time_data', toolData.tool_input)
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result)  as Array<{ title?: string; textid?: string; hot_num?: number; date?: string; content?: string }>
+            console.log('get_time_data', result);
+            lastRound.queryLoading = false;
+            lastRound.queryTitle = '查询态势新闻';
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.textid,
+              title: item.title,
+              content: item.content || '',
+              time: item.date,
+              hot_num: item.hot_num,
+              type: 'get_time_data'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query || toolData.tool_input.s || toolData.tool_input.e) {
+          lastRound.query = `${toolData.tool_input.s} - ${toolData.tool_input.e}`;
+        }
+        break;
+      }
+       case 'get_textid_content': { // 获取新闻详细内容
+        lastRound.title = '获取新闻详细内容';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result)
+            console.log('get_textid_content', result);
+            lastRound.queryLoading = false;
+            lastRound.textidContent = result.content;
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        }
+        break;
+      }
+      default:
+        break;
+    }
+    if (!side) {
+      state.current.messageList[1] = {
+        ...mesItem,
+        thinkingTrace: trace,
+      }
+      setMessages((prevMessages) => prevMessages.map((msg) => {
+        if (msg.id !== assistantId || msg.role !== 'assistant' || !msg.thinkingTrace) return msg;
+        return {
+          ...msg,
+          thinkingTrace: trace,
+        };
+      }));
+    } else {
+      state.current.compareResult[state.current.compareIndex][side].thinkingTrace = trace;
+      updatePane(side, (pane) => {
+        return {
+          ...pane,
+          thinkingTrace: trace,
+        };
+      });
+    }
+  };
+
+  /**
+   * 处理真实多轮 RAG 请求。
+   *
+   * 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
+   * 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
+   */
+  const handleRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    setError(null);
+    setIsLoading(true);
+    setIsPreConnectLoading(true);
+    try {
+      const response = await fetch(`${generateUrl}/generate`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: query }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      setIsPreConnectLoading(false);
+
+      const assistantId = `assistant-${Date.now()}`;
+      const assistantMessage: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        thinkingTrace: createMultiRoundStreamTrace(),
+      };
+      if (!side) {
+        state.current.messageList.push(assistantMessage); // 数据存储
+        // 接口连通后再展示多轮检索主题与过程
+        setMessages((prev) => [...prev, assistantMessage]);
+      } else if (side === 'left' || side === 'right') {
+        state.current.compareResult[state.current.compareIndex][side].thinkingTrace = createMultiRoundStreamTrace();
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            thinkingTrace: createMultiRoundStreamTrace(),
+          };
+        });
+      }
+
+      const reader = response.body.getReader();
+      // 保存 reader 引用，用于"停止生成"功能
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            console.log('聊天记录', state.current.compareResult);
+            if (!side) {
+              chatHistoryAddSearch();
+            }
+            break;
+          }
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          const lastLine = lines.pop();
+          buffer = lastLine || '';
+
+          for (const line of lines) {
+            if (!line.startsWith('data: ')) continue;
+
+            try {
+              const parsedData = JSON.parse(line.slice(6)) as {
+                event: string;
+                data: any;
+              };
+              const { event, data } = parsedData;
+
+              switch (event) {
+                case 'task_created': {
+                  taskIdRef.current = data?.task_id || null;
+                  break;
+                }
+                case 'tool_call': {
+                  handleToolCall(data as ToolCallData, assistantId, side);
+                  break;
+                }
+                case 'message': {
+                  if (typeof data === 'string') {
+                    setMessages((prevMessages) => prevMessages.map((msg) => {
+                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
+                      return {
+                        ...msg,
+                        thinkingTrace: {
+                          ...msg.thinkingTrace,
+                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
+                        },
+                      };
+                    }));
+                  }
+                  break;
+                }
+                case 'references': {
+                  const refs = Array.isArray(data?.references) ? data.references : [];
+                  const mappedRefs = refs.map(mapReferenceToSource);
+                  setSearchProcess((prev) => ({
+                    ...prev,
+                    hits: mappedRefs.length,
+                  }));
+                  setMessages((prevMessages) => prevMessages.map((msg) => (
+                    msg.id === assistantId
+                      ? { ...msg, sources: mappedRefs }
+                      : msg
+                  )));
+                  break;
+                }
+                case 'done': {
+                  setIsLoading(false);
+                  break;
+                }
+                default:
+                  console.log(`未知事件类型: ${event}`, data);
+              }
+            } catch (parseError) {
+              console.error('JSON解析错误:', parseError);
+              console.error('原始数据:', line.slice(6));
+            }
+          }
+        }
+      } finally {
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      console.error('处理请求时发生错误:', runError);
+      setIsLoading(false);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+      setIsPreConnectLoading(false);
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      handleStopCompareSide(side);
+    }
+  };
+
+  /**
+ * 处理任务检索 请求。
+ *
+ * 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
+ * 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
+ */
+  const handleTaskRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    setError(null);
+    setIsLoading(true);
+    setIsPreConnectLoading(true);
+
+    try {
+      const response = await fetch(`${taskChatUrl}/generate`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: query }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      setIsPreConnectLoading(false);
+
+      const assistantId = `assistant-${Date.now()}`;
+      const assistantMessage: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        thinkingTrace: createMultiRoundStreamTrace(),
+      };
+      if (!side) {
+        state.current.messageList.push(assistantMessage); // 数据存储
+        // 接口连通后再展示多轮检索主题与过程
+        setMessages((prev) => [...prev, assistantMessage]);
+      } else if (side === 'left' || side === 'right') {
+        state.current.compareResult[state.current.compareIndex][side].thinkingTrace = createMultiRoundStreamTrace();
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            thinkingTrace: createMultiRoundStreamTrace(),
+          };
+        });
+      }
+
+      const reader = response.body.getReader();
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            console.log('聊天记录', state.current.messageList);
+            chatHistoryAddSearch();
+            break;
+          }
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          const lastLine = lines.pop();
+          buffer = lastLine || '';
+
+          for (const line of lines) {
+            if (!line.startsWith('data: ')) continue;
+
+            try {
+              const parsedData = JSON.parse(line.slice(6)) as {
+                event: string;
+                data: any;
+              };
+              const { event, data } = parsedData;
+
+              switch (event) {
+                case 'task_created': {
+                  taskIdRef.current = data?.task_id || null;
+                  break;
+                }
+                case 'tool_call': {
+                  handleToolCall(data as ToolCallData, assistantId, side);
+                  break;
+                }
+                case 'message': {
+                  if (typeof data === 'string') {
+                    setMessages((prevMessages) => prevMessages.map((msg) => {
+                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
+                      return {
+                        ...msg,
+                        thinkingTrace: {
+                          ...msg.thinkingTrace,
+                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
+                        },
+                      };
+                    }));
+                  }
+                  break;
+                }
+                case 'references': {
+                  const refs = Array.isArray(data?.references) ? data.references : [];
+                  const mappedRefs = refs.map(mapReferenceToSource);
+                  setSearchProcess((prev) => ({
+                    ...prev,
+                    hits: mappedRefs.length,
+                  }));
+                  setMessages((prevMessages) => prevMessages.map((msg) => (
+                    msg.id === assistantId
+                      ? { ...msg, sources: mappedRefs }
+                      : msg
+                  )));
+                  break;
+                }
+                case 'done': {
+                  setIsLoading(false);
+                  break;
+                }
+                default:
+                  console.log(`未知事件类型: ${event}`, data);
+              }
+            } catch (parseError) {
+              console.error('JSON解析错误:', parseError);
+              console.error('原始数据:', line.slice(6));
+            }
+          }
+        }
+      } finally {
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      console.error('处理请求时发生错误:', runError);
+      setIsLoading(false);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+      setIsPreConnectLoading(false);
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      handleStopCompareSide(side);
+    }
+  };
+
+  /**
+* 处理画像检索 请求。
+*
+* 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
+* 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
+*/
+  const handleHxRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    setError(null);
+    setIsLoading(true);
+    setIsPreConnectLoading(true);
+
+    try {
+      const response = await fetch(`${taskChatUrl}/generate_b2`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: query }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      setIsPreConnectLoading(false);
+
+      const assistantId = `assistant-${Date.now()}`;
+      const assistantMessage: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        thinkingTrace: createMultiRoundStreamTrace(),
+      };
+      if (!side) {
+        state.current.messageList.push(assistantMessage); // 数据存储
+        // 接口连通后再展示多轮检索主题与过程
+        setMessages((prev) => [...prev, assistantMessage]);
+      } else if (side === 'left' || side === 'right') {
+        state.current.compareResult[state.current.compareIndex][side].thinkingTrace = createMultiRoundStreamTrace();
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            thinkingTrace: createMultiRoundStreamTrace(),
+          };
+        });
+      }
+
+      const reader = response.body.getReader();
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            console.log('聊天记录', state.current.messageList);
+            chatHistoryAddSearch();
+            break;
+          }
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          const lastLine = lines.pop();
+          buffer = lastLine || '';
+
+          for (const line of lines) {
+            if (!line.startsWith('data: ')) continue;
+
+            try {
+              const parsedData = JSON.parse(line.slice(6)) as {
+                event: string;
+                data: any;
+              };
+              const { event, data } = parsedData;
+
+              switch (event) {
+                case 'task_created': {
+                  taskIdRef.current = data?.task_id || null;
+                  break;
+                }
+                case 'tool_call': {
+                  handleToolCall(data as ToolCallData, assistantId);
+                  break;
+                }
+                case 'message': {
+                  if (typeof data === 'string') {
+                    setMessages((prevMessages) => prevMessages.map((msg) => {
+                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
+                      return {
+                        ...msg,
+                        thinkingTrace: {
+                          ...msg.thinkingTrace,
+                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
+                        },
+                      };
+                    }));
+                  }
+                  break;
+                }
+                case 'references': {
+                  const refs = Array.isArray(data?.references) ? data.references : [];
+                  const mappedRefs = refs.map(mapReferenceToSource);
+                  setSearchProcess((prev) => ({
+                    ...prev,
+                    hits: mappedRefs.length,
+                  }));
+                  setMessages((prevMessages) => prevMessages.map((msg) => (
+                    msg.id === assistantId
+                      ? { ...msg, sources: mappedRefs }
+                      : msg
+                  )));
+                  break;
+                }
+                case 'done': {
+                  setIsLoading(false);
+                  break;
+                }
+                default:
+                  console.log(`未知事件类型: ${event}`, data);
+              }
+            } catch (parseError) {
+              console.error('JSON解析错误:', parseError);
+              console.error('原始数据:', line.slice(6));
+            }
+          }
+        }
+      } finally {
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      console.error('处理请求时发生错误:', runError);
+      setIsLoading(false);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+      setIsPreConnectLoading(false);
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      handleStopCompareSide(side);
+    }
+  };
+
+   /**
+* 处理画像检索 请求。
+*
+* 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
+* 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
+*/
+  const newsReportRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    setError(null);
+    setIsLoading(true);
+    setIsPreConnectLoading(true);
+
+    try {
+      const response = await fetch(`${taskChatUrl}/generate_report`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: query }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      setIsPreConnectLoading(false);
+
+      const assistantId = `assistant-${Date.now()}`;
+      const assistantMessage: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        thinkingTrace: createMultiRoundStreamTrace(),
+      };
+      if (!side) {
+        state.current.messageList.push(assistantMessage); // 数据存储
+        // 接口连通后再展示多轮检索主题与过程
+        setMessages((prev) => [...prev, assistantMessage]);
+      } else if (side === 'left' || side === 'right') {
+        state.current.compareResult[state.current.compareIndex][side].thinkingTrace = createMultiRoundStreamTrace();
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            thinkingTrace: createMultiRoundStreamTrace(),
+          };
+        });
+      }
+
+      const reader = response.body.getReader();
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            console.log('聊天记录', state.current.messageList);
+            chatHistoryAddSearch();
+            break;
+          }
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          const lastLine = lines.pop();
+          buffer = lastLine || '';
+
+          for (const line of lines) {
+            if (!line.startsWith('data: ')) continue;
+
+            try {
+              const parsedData = JSON.parse(line.slice(6)) as {
+                event: string;
+                data: any;
+              };
+              const { event, data } = parsedData;
+
+              switch (event) {
+                case 'task_created': {
+                  taskIdRef.current = data?.task_id || null;
+                  break;
+                }
+                case 'tool_call': {
+                  handleToolCall(data as ToolCallData, assistantId);
+                  break;
+                }
+                case 'message': {
+                  if (typeof data === 'string') {
+                    setMessages((prevMessages) => prevMessages.map((msg) => {
+                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
+                      return {
+                        ...msg,
+                        thinkingTrace: {
+                          ...msg.thinkingTrace,
+                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
+                        },
+                      };
+                    }));
+                  }
+                  break;
+                }
+                case 'references': {
+                  const refs = Array.isArray(data?.references) ? data.references : [];
+                  const mappedRefs = refs.map(mapReferenceToSource);
+                  setSearchProcess((prev) => ({
+                    ...prev,
+                    hits: mappedRefs.length,
+                  }));
+                  setMessages((prevMessages) => prevMessages.map((msg) => (
+                    msg.id === assistantId
+                      ? { ...msg, sources: mappedRefs }
+                      : msg
+                  )));
+                  break;
+                }
+                case 'done': {
+                  setIsLoading(false);
+                  break;
+                }
+                default:
+                  console.log(`未知事件类型: ${event}`, data);
+              }
+            } catch (parseError) {
+              console.error('JSON解析错误:', parseError);
+              console.error('原始数据:', line.slice(6));
+            }
+          }
+        }
+      } finally {
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      console.error('处理请求时发生错误:', runError);
+      setIsLoading(false);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+      setIsPreConnectLoading(false);
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      handleStopCompareSide(side);
+    }
+  };
+
+  /**
+   * 单一模式下的发送入口。
+   *
+   * 这里只负责创建用户消息、重置输入框和按当前 qaMode 分发到对应执行器；
+   * 具体的真实请求、模拟流和状态回填分别在各自 handler 内维护。
+   */
+  const handleSend = () => {
+    if (submitLockRef.current || isLoading || isPreConnectLoading) return;
+    if (!inputValue.trim()) return;
+    submitLockRef.current = true;
+    const query = inputValue.trim();
+    state.current.messageList = [];
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: query,
+      timestamp: new Date(),
+    };
+    state.current.messageList.push(userMessage);
+    if (qaMode === 'multi-round') { // 多轮检索
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '多轮RAG',
+        rounds: 0,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void handleRun(query);
+      return;
+    }
+
+    if (qaMode === 'deep-search') { // 任务检索
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '任务检索',
+        rounds: 0,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void handleTaskRun(query);
+      return;
+    }
+
+    if (qaMode === 'hx-search') { // 任务检索
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '画像检索',
+        rounds: 0,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void handleHxRun(query);
+      return;
+    }
+
+    if (qaMode === 'news-report') { // 新闻报告生成
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '新闻报告生成',
+        rounds: 0,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void newsReportRun(query);
+      return;
+    }
+
+    if (qaMode === 'single-round') { // 单轮RAG
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '单轮RAG',
+        rounds: 1,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void handleSingleRoundRun(query);
+      return;
+    }
+
+    if (qaMode === 'single-chat') { // 大模型问答
+      console.log('进入了这里')
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '大模型问答',
+        rounds: 1,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void chatRun(query);
+      // handleMockSingleRoundRun(query);
+      return;
+    }
+
+    setIsLoading(true);
+    setMessages((prev) => [...prev, userMessage]);
+    setInputValue('');
+  };
+
+  /**
+   * 对比模式发送入口。
+   *
+   * 左右面板共享同一个用户问题，但各自按选择的模式独立运行、独立 loading、独立 sources。
+   * 通过 `updatePane` 将左右面板更新收敛到一个函数，避免并发请求互相覆盖状态。
+   */
+  const handleCompare = () => {
+    if (submitLockRef.current || isLoading || isPreConnectLoading) return;
+    if (!inputValue.trim()) return;
+    submitLockRef.current = true;
+    const query = inputValue.trim();
+    setInputValue('');
+    setCompareUserInput(query);
+    setError(null);
+    setIsLoading(true);
+    const compareId = Date.now().toString();
+    console.log('compareLeftMode',compareLeftMode)
+    const compareItem = {
+      id: compareId,
+      compareUserInput: query,
+      left: createComparePane(compareLeftMode),
+      right: createComparePane(compareRightMode),
+    }
+    setCompareResult((pev) => [...pev, compareItem]);
+    state.current.compareResult = [];
+    state.current.compareId = compareId;
+    state.current.compareResult.push(compareItem);
+    state.current.compareIndex = state.current.compareResult.length - 1;
+    console.log('compareItem', compareItem)
+    const runByMode = (side: 'left' | 'right', mode: QAMode) => {
+      if (mode === 'single-chat') { // 大模型问答
+        return chatRun(query, side);
+      } else if (mode === 'single-round') { // 单轮rag检索
+        return handleSingleRoundRun(query, side);
+      } else if (mode === 'multi-round') { // 多轮检索
+        return handleRun(query, side);
+      } else if (mode === 'deep-search') { // 任务检索
+        return handleTaskRun(query, side);
+      } else if (mode === 'hx-search') { // 画像检索
+        return handleHxRun(query, side); 
+      } else if (mode === 'news-report') { // 新闻检索
+        return handleHxRun(query, side);
+      }
+    };
+
+    Promise.allSettled([
+      runByMode('left', compareLeftMode).finally(() => updatePane('left', (pane) => ({ ...pane, loading: false }))),
+      runByMode('right', compareRightMode).finally(() => updatePane('right', (pane) => ({ ...pane, loading: false }))),
+    ]).finally(() => {
+      setIsLoading(false);
+      submitLockRef.current = false;
+      chatHistoryAddSearch();
+    });
+  };
+
+  const handleStopCompareSide = (side: 'left' | 'right') => {
+    const reader = compareReaderRef.current[side];
+    if (reader) {
+      void reader.cancel(`用户停止${side === 'left' ? '左侧' : '右侧'}生成`);
+      compareReaderRef.current[side] = null;
+    }
+    updatePane(side, (pane) => ({ ...pane, loading: false }))
+  };
+
+  /**
+   * 停止当前生成。
+   *
+   * 真实请求通过 reader.cancel() 中断读取；本地模拟通过 ref 标记让异步循环自行退出。
+   * 对比模式需要同时停止左右两侧，单一模式只处理当前主 reader。
+   */
+  const handleStop = () => {
+    if (viewMode === 'compare') {
+      handleStopCompareSide('left');
+      handleStopCompareSide('right');
+      setIsLoading(false);
+      submitLockRef.current = false;
+      return;
+    }
+    mockSingleRoundStoppedRef.current = true;
+    mockMultiRoundStoppedRef.current = true;
+    if (readerRef.current) {
+      void readerRef.current.cancel('用户手动停止');
+      readerRef.current = null;
+    }
+    setIsPreConnectLoading(false);
+    setIsLoading(false);
+    submitLockRef.current = false;
+  };
+
+  /**
+   * 对“生成中切换页面/模式/布局”进行统一保护。
+   *
+   * 如果当前没有生成任务，直接执行目标操作；否则弹出确认框。
+   * 用户确认后先停止生成，再执行原操作，避免生成流继续写入已经切换的 UI 状态。
+   */
+  const runAfterGenerationConfirm = (action: () => void) => {
+    if (!isLoading) {
+      action();
+      return;
+    }
+    pendingActionRef.current = action;
+    // Dialog.confirm({
+    //   header: '模型正在生成',
+    //   body: '当前模型仍在生成内容。确认后将停止生成，并继续执行你的操作。',
+    //   confirmBtn: '确认停止并继续',
+    //   cancelBtn: '取消',
+    //   onConfirm: () => {
+    //     handleStop();
+    //     pendingActionRef.current?.();
+    //     pendingActionRef.current = null;
+    //   },
+    //   onClose: () => {
+    //     pendingActionRef.current = null;
+    //   },
+    // });
+  };
+
+  const handleSafeViewModeChange = (mode: ViewMode) => {
+    if (mode === viewMode) return;
+    runAfterGenerationConfirm(() => setViewMode(mode));
+  };
+
+  const handleSafeNavigate = (page: PageType) => {
+    runAfterGenerationConfirm(() => onNavigate(page));
+  };
+
+  const handleSafeReset = () => {
+    runAfterGenerationConfirm(() => {
+      setMessages([]);
+      setCompareResult(null);
+    });
+  };
+
+  const handleSafeModeChange = (mode: QAMode) => {
+    runAfterGenerationConfirm(() => setQaMode(mode));
+  };
+
+  const handleSafeCompareLeftModeChange = (mode: QAMode) => {
+    runAfterGenerationConfirm(() => setCompareLeftMode(mode));
+  };
+
+  const handleSafeCompareRightModeChange = (mode: QAMode) => {
+    runAfterGenerationConfirm(() => setCompareRightMode(mode));
+  };
+
+  const handleSafeCompareLayoutChange = (layout: 'horizontal' | 'vertical') => {
+    runAfterGenerationConfirm(() => setCompareLayout(layout));
+  };
+
+  const handleSaveRecord = () => {
+    alert('问答记录已保存');
+  };
+
+  const handleCollect = () => {
+    alert('已添加到收藏');
+  };
+
+  const handleKeyDown = (e) => {
+    // if (e.key === 'Enter' && !e.shiftKey) {
+    //   console.log('回车了')
+    //   e.preventDefault();
+    //   if (e.repeat || submitLockRef.current || isLoading || isPreConnectLoading) return;
+    //   if (viewMode === 'compare') {
+    //     handleCompare();
+    //   } else {
+    //     handleSend();
+    //   }
+    // }
+    // console.log('e',e)
+    // if ((e.metaKey || e.ctrlKey || e.shiftKey) && e.key === "Enter") {
+    //   e.preventDefault();
+    // } else if (e.keyCode === 13) {
+    //   e.preventDefault();
+    //   console.log('回车了')
+    // } else if (e.key === "/") {
+    //   e.preventDefault();
+    // }
+    // if (e.repeat || submitLockRef.current || isLoading || isPreConnectLoading) return;
+    state.current.messageList = [];
+    if (viewMode === 'compare') {
+      handleCompare();
+    } else {
+      handleSend();
+    }
+    setIsAutoScrollEnabled(true);
+    setShowScrollToBottom(false);
+    scrollToBottom(true);
+  };
+
+  // 获取模式标签
+  const getModeLabel = (mode: QAMode) => {
+    switch (mode) {
+      case 'single-chat': return '大模型';
+      case 'single-round': return '单轮RAG';
+      case 'multi-round': return '多轮RAG';
+      case 'deep-search': return '任务检索';
+      case 'hx-search': return '画像检索';
+      case 'news-report': return '新闻报告生成';
+    }
+  };
+
+  const activeAssistantMessageId = isLoading
+    ? [...messages].reverse().find((msg) => msg.role === 'assistant')?.id
+    : undefined;
+
+  useEffect(() => {
+    setQaMode('single-round');
+    // setMessages(createMockSingleRagMessages());
+    // setSearchProcess({
+    //   currentMode: '单轮RAG',
+    //   rounds: 1,
+    //   hits: 3,
+    //   queryRewrite: '',
+    // });
+    chatDataSearch();
+  }, [viewMode]);
+
+  // 创建聊天窗口
+  const addChatDataChange = async () => {
+    let qaMode = 'SINGLE_RAG';
+    if (viewMode === 'compare') {
+      qaMode = 'MULTI_RAG'
+    }
+    const parmy = {
+      userId: userId.current,
+      qaType: qaType.current,
+      questionTitle: '新建问答',
+      qaMode: qaMode,
+    }
+    const res = await service.post(`${zncmUrl}/llm/qa/history/create`, parmy);
+    console.log(res);
+    const result = res.data;
+    chatDataId.current = result.id;
+    if (viewMode === 'compare') {
+      compareChatId.current = result.id;
+    } else {
+      chatDataId.current = result.id;
+    }
+  }
+
+  // 查找聊天记录窗口
+  const chatDataSearch = async () => {
+    let qaMode = 'SINGLE_RAG';
+    console.log('viewMode', viewMode)
+    if (viewMode === 'compare') {
+      qaMode = 'MULTI_RAG'
+    }
+
+    const parmy = {
+      userId: userId.current,
+      qaType: qaType.current,
+      qaMode: qaMode,
+      current: 1,
+      size: 10
+    }
+    const res = await service.post(`${zncmUrl}/llm/qa/history/page`, parmy);
+    console.log('res', res);
+    const result = res.data;
+    if (result.length === 0) {
+      await addChatDataChange();
+    } else if (result.length > 0) {
+      if (viewMode === 'compare') {
+        compareChatId.current = result[0].id;
+      } else {
+        chatDataId.current = result[0].id;
+      }
+    }
+    await chatHistorySearch();
+    console.log('chatDataId', chatDataId.current, compareChatId.current)
+  }
+
+  // 根据对话记录窗口查找对话记录
+  const chatHistorySearch = async () => {
+    let chatHistoryId = chatDataId.current;
+    if (viewMode === 'compare') {
+      chatHistoryId = compareChatId.current;
+    }
+    const res = await service.get(`${zncmUrl}/llm/qa/history/pairs/${chatHistoryId}`, '');
+    console.log('问答记录', res);
+    // 1. 修正变量名 result
+    const result = res.data;
+    if (viewMode !== 'compare') {
+      // 2. 使用 flatMap 将二维数组拍平，并生成新的消息列表
+      const messageList: Message[] = result.flatMap((item, itemIndex) => {
+        // 3. 安全解析 JSON，使用 ?? 提供空数组兜底
+        const parsedAnswers = JSON.parse(item.answer ?? '[]');
+
+        // 4. map 处理每一条 answer，生成新的对象（不修改原对象）
+        return parsedAnswers.map((aItem: any, aIndex: number) => {
+          return {
+            ...aItem,
+            // 优化 ID 赋值逻辑：建议不管是不是索引 1，都补全 ID，防止遗漏
+            // 如果必须只针对第二条，保留原逻辑，但增加安全性
+            id: aIndex === 1 ? String(item.id) : (aItem.id || `temp-${itemIndex}-${aIndex}`),
+
+            // 如果后端返回的数据缺少 timestamp 或 role，最好在这里补全默认值
+            timestamp: aItem.timestamp ? new Date(aItem.timestamp) : new Date(),
+            role: aItem.role || 'assistant',
+          } as Message;
+        });
+      });
+      console.log('result', messageList); // 此时 result 保持纯净，未被修改
+      setMessages(messageList);
+    } else {
+      console.log(result);
+      const messageList = result.flatMap(item => {
+        const parsedAnswers = JSON.parse(item.answer ?? '[]');
+        return parsedAnswers.map(aItem => ({
+          ...aItem,
+          left: {
+            ...aItem.left,
+            loading: false,
+          },
+          right: {
+            ...aItem.right,
+            loading: false,
+          },
+          id: item.id,
+        }));
+      });
+      console.log('messageList', messageList)
+      setCompareResult(messageList);
+    }
+    // state.current.messageList = reuslt || [];
+  }
+
+  // 创建记录窗口
+  const chatHistoryAddSearch = async () => {
+    let historyId = chatDataId.current;
+    let answer = '';
+    let question = '';
+    if (viewMode === 'compare') {
+      historyId = compareChatId.current;
+      answer = JSON.stringify(state.current.compareResult);
+      question = state.current.compareResult[0].compareUserInput;
+    } else {
+      answer = JSON.stringify(state.current.messageList);
+      question = state.current.messageList[0].content;
+    }
+    const param = {
+      historyId: historyId,
+      userId: userId.current,
+      answer: answer,
+      question: question,
+    }
+    const res = await service.post(`${zncmUrl}/llm/qa/history/pair/add`, param);
+    console.log('添加聊天记录窗口', res);
+  }
+
+  /**
+   * 滚动到底部。
+   *
+   * 聊天区默认跟随新消息自动滚动；当用户手动上滑查看历史时会暂停自动滚动，避免打断阅读。
+   */
+  const scrollToBottom = (smooth = false) => {
+    if (!chatListRef.current) return;
+    chatListRef.current.scrollTo({
+      top: chatListRef.current.scrollHeight,
+      behavior: smooth ? 'smooth' : 'auto',
+    });
+  };
+
+  useEffect(() => {
+    if (isAutoScrollEnabled) {
+      scrollToBottom(false);
+    }
+  }, [messages, isLoading, isAutoScrollEnabled, compareResult]);
+
+  const handleChatScroll = () => {
+    if (!chatListRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = chatListRef.current;
+    const isNearBottom = scrollHeight - (scrollTop + clientHeight) < 80;
+    setIsAutoScrollEnabled(isNearBottom);
+    setShowScrollToBottom(!isNearBottom);
+  };
+
+  const getAssistantAnswerText = (message: Message) => (
+    message.singleRagTrace?.answerMarkdown || message.thinkingTrace?.finalAnswerMarkdown || message.content
+  );
+
+  const getAssistantThinkingText = (message: Message) => {
+    if (message.singleRagTrace) return message.singleRagTrace.thinkingMarkdown;
+    if (message.thinkingTrace) {
+      return message.thinkingTrace.rounds.map((round, index) => (
+        `## 第 ${index + 1} 轮：${round.title}\n${round.thoughtMarkdown}`
+      )).join('\n\n');
+    }
+    return '';
+  };
+
+  const handleCopyAssistantMessage = async (message: Message) => {
+    const answerText = getAssistantAnswerText(message);
+    try {
+      await navigator.clipboard.writeText(answerText);
+    } catch (copyError) {
+      console.error('复制模型回答失败:', copyError);
+    }
+  };
+
+  const handleDeleteAssistantMessage = (message: Message) => {
+    const messageIndex = messages.findIndex((msg) => msg.id === message.id);
+    const previousUserMessage = [...messages.slice(0, messageIndex)].reverse().find((msg) => msg.role === 'user');
+    setMessages((prev) => prev.filter((msg) => msg.id !== message.id && msg.id !== previousUserMessage?.id));
+  };
+
+  const handleEditAssistantMessage = (message: Message) => {
+    setEditingMessageId(message.id);
+    setEditingThinking(getAssistantThinkingText(message));
+    setEditingAnswer(getAssistantAnswerText(message));
+  };
+
+  const handleCancelAssistantEdit = () => {
+    setEditingMessageId(null);
+    setEditingThinking('');
+    setEditingAnswer('');
+  };
+
+  const handleSaveAssistantEdit = () => {
+    if (!editingMessageId) return;
+    setMessages((prev) => prev.map((msg) => {
+      if (msg.id !== editingMessageId) return msg;
+      if (msg.singleRagTrace) {
+        return {
+          ...msg,
+          content: editingAnswer,
+          singleRagTrace: {
+            ...msg.singleRagTrace,
+            thinkingMarkdown: editingThinking,
+            answerMarkdown: editingAnswer,
+            thinkingComplete: true,
+          },
+        };
+      }
+      if (msg.thinkingTrace) {
+        const rounds = msg.thinkingTrace.rounds.length > 0
+          ? msg.thinkingTrace.rounds.map((round, index) => (
+            index === 0 ? { ...round, thoughtMarkdown: editingThinking } : round
+          ))
+          : msg.thinkingTrace.rounds;
+        return {
+          ...msg,
+          content: editingAnswer,
+          thinkingTrace: {
+            ...msg.thinkingTrace,
+            rounds,
+            finalAnswerMarkdown: editingAnswer,
+          },
+        };
+      }
+      return { ...msg, content: editingAnswer };
+    }));
+    handleCancelAssistantEdit();
+  };
+
+  const handleResendAssistantMessage = (message: Message) => {
+    if (submitLockRef.current || isLoading || isPreConnectLoading) return;
+    const messageIndex = messages.findIndex((msg) => msg.id === message.id);
+    const previousUserMessage = [...messages.slice(0, messageIndex)].reverse().find((msg) => msg.role === 'user');
+    if (!previousUserMessage) return;
+
+    submitLockRef.current = true;
+    setMessages((prev) => prev.filter((msg) => msg.id !== message.id));
+    setInputValue('');
+
+    if (message.singleRagTrace) {
+      setSearchProcess({ currentMode: '单轮RAG', rounds: 1, hits: 0, queryRewrite: '' });
+      void handleSingleRoundRun(previousUserMessage.content);
+      return;
+    }
+
+    setSearchProcess({ currentMode: '多轮RAG', rounds: 0, hits: 0, queryRewrite: '' });
+    void handleRun(previousUserMessage.content);
+  };
+
+  /**
+   * 点击答案中的引用编号后打开引用详情弹窗。
+   *
+   * Markdown 中的 `[[1]]` 与 sources 数组采用 1-based 对齐，因此这里需要减 1 取数组下标。
+   */
+  const handleCitationClick = (message: Message, citationIndex: number) => {
+    const source = message.sources?.[citationIndex - 1];
+    if (!source) return;
+    setSelectedCitation(source);
+  };
+
+  const handleCompareCitationClick = (side: 'left' | 'right', citationIndex: number) => {
+    const source = compareResult?.[side]?.sources?.[citationIndex - 1];
+    if (!source) return;
+    setSelectedCitation(source);
+  };
+
+  useEffect(() => {
+    if (viewMode === 'compare') {
+      setCompareLeftMode('single-round');
+      setCompareRightMode('multi-round');
+    }
+  }, [viewMode]);
+
+  useEffect(() => {
+    if (viewMode !== 'compare' || !compareResult) return;
+    // setIsLoading(compareResult.left.loading || compareResult.right.loading);
+  }, [viewMode, compareResult]);
+
+  // 离开浏览器页面时无法展示自定义 Dialog，因此使用原生 beforeunload 提醒用户生成会被中断。
+  // useEffect(() => {
+  //   const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+  //     if (!isLoading) return;
+  //     event.preventDefault();
+  //     event.returnValue = '模型正在生成，离开页面将停止当前生成。';
+  //   };
+
+  //   window.addEventListener('beforeunload', handleBeforeUnload);
+  //   return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+  // }, [isLoading]);
+
+  return (
+    <div className={`h-[calc(100vh-120px)] flex flex-col theme-bg rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+      <GeneralQAHeader
+        isDark={isDark}
+        viewMode={viewMode}
+        setViewMode={handleSafeViewModeChange}
+        onNavigate={handleSafeNavigate}
+      />
+
+      {/* 主体内容区 */}
+      <div className="flex-1 flex overflow-hidden">
+        <GeneralQAConfigSidebar
+          isDark={isDark}
+          viewMode={viewMode}
+          qaMode={qaMode}
+          compareLeftMode={compareLeftMode}
+          compareRightMode={compareRightMode}
+          compareLayout={compareLayout}
+          knowledgeScope={knowledgeScope}
+          answerStyle={answerStyle}
+          showSources={showSources}
+          showProcess={showProcess}
+          autoSummarizeDiff={autoSummarizeDiff}
+          recommendBetter={recommendBetter}
+          isCollapsed={isLeftSidebarCollapsed}
+          setQaMode={handleSafeModeChange}
+          setCompareLeftMode={handleSafeCompareLeftModeChange}
+          setCompareRightMode={handleSafeCompareRightModeChange}
+          setCompareLayout={handleSafeCompareLayoutChange}
+          setKnowledgeScope={setKnowledgeScope}
+          setAnswerStyle={setAnswerStyle}
+          setShowSources={setShowSources}
+          setShowProcess={setShowProcess}
+          setAutoSummarizeDiff={setAutoSummarizeDiff}
+          setRecommendBetter={setRecommendBetter}
+          setIsCollapsed={setIsLeftSidebarCollapsed}
+        />
+
+        {/* 中间结果区 */}
+        <div className="flex-1 min-w-0 flex flex-col overflow-hidden">
+          {viewMode === 'single' ? (
+            <>
+              {/* 聊天消息区 */}
+              <div
+                ref={chatListRef}
+                onScroll={handleChatScroll}
+                className="relative flex-1 overflow-y-auto p-4 space-y-4"
+              >
+                {messages.length === 0 ? (
+                  <EmptyChatState
+                    icon={<MessageSquare className="w-11 h-11 opacity-60" />}
+                    title="开始你的问答"
+                    description="输入问题，获取基于知识库的智能回答"
+                  />
+                ) : (
+                  messages.map((msg) => (
+                    <ChatMessage
+                      key={msg.id}
+                      message={msg}
+                      showSources={showSources}
+                      assistantLabel="知识库助手"
+                      assistantActive={msg.id === activeAssistantMessageId}
+                      onCitationClick={handleCitationClick}
+                      onCopyAssistant={handleCopyAssistantMessage}
+                      onDeleteAssistant={handleDeleteAssistantMessage}
+                      onEditAssistant={handleEditAssistantMessage}
+                      onResendAssistant={handleResendAssistantMessage}
+                    />
+                  ))
+                )}
+
+                {isPreConnectLoading && (
+                  <TypingIndicator
+                    label={qaMode === 'single-round' ? '正在流式生成单轮 RAG 回复' : '正在生成思考过程与检索内容'}
+                    assistantLabel="知识库助手"
+                  />
+                )}
+
+                {error && (
+                  <div className={`ml-12 max-w-[70%] rounded-xl border px-4 py-3 text-sm ${isDark
+                    ? 'bg-red-900/20 border-red-700/50 text-red-300'
+                    : 'bg-red-50 border-red-200 text-red-700'
+                    }`}>
+                    {error}
+                  </div>
+                )}
+
+                {showScrollToBottom && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setIsAutoScrollEnabled(true);
+                      setShowScrollToBottom(false);
+                      scrollToBottom(true);
+                    }}
+                    className={`fixed left-1/2 -translate-x-1/2 bottom-36 z-20 w-11 h-11 rounded-full backdrop-blur-sm border shadow-lg transition-all ${isDark
+                      ? 'bg-slate-800/65 border-slate-500/60 text-slate-100 hover:bg-slate-700/70'
+                      : 'bg-white/70 border-gray-300 text-gray-700 hover:bg-white/85'
+                      }`}
+                    title="滚动到底部"
+                  >
+                    <ArrowDown className="w-5 h-5 mx-auto" />
+                  </button>
+                )}
+              </div>
+            </>
+          ) : (
+            <div ref={chatListRef} onScroll={handleChatScroll} className="flex-1 overflow-y-auto p-4">
+              {/* 对比结果区 */}
+              {
+                compareResult.length === 0 && <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                  <GitCompare className="w-16 h-16 mb-4 opacity-50" />
+                  <p className="text-lg">对比模式</p>
+                  <p className="text-sm mt-2">输入问题，对比不同模式的回答效果</p>
+                </div>
+              }
+              {
+                compareResult.map((compare: CompareResult, index: number) => (
+                  <div className="mb-[10px]" key={index}>
+                    <div className="mb-4 flex justify-end">
+                      <div className={`max-w-[72%] rounded-2xl px-4 py-3 shadow-sm ${isDark
+                        ? 'bg-blue-600/70 text-white'
+                        : 'bg-gradient-to-r from-red-500 to-rose-500 text-white'
+                        }`}>
+                        <p className="whitespace-pre-wrap leading-relaxed">{compare.compareUserInput}</p>
+                      </div>
+                    </div>
+                    {compareResult ? (
+                      compareLayout === 'horizontal' ? (
+                        <div className="grid grid-cols-2 gap-4 min-w-0">
+                          {/* 左侧结果 */}
+                          <div className={`min-w-0 rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                            <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <QAAvatar role="assistant" variant="blue" isActive={compare.left.loading} label="知识库助手" />
+                                  <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                                    }`}>
+                                    {getModeLabel(compare.left.mode)}
+                                  </span>
+                                </div>
+                                {compare.left.loading && (
+                                  <button
+                                    type="button"
+                                    onClick={() => handleStopCompareSide('left')}
+                                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                                      }`}
+                                  >
+                                    <Square className="w-3 h-3 fill-current" />
+                                    停止
+                                  </button>
+                                )}
+                              </div>
+                            </div>
+                            <div className="p-4 min-w-0">
+                              <div className="flex-1 min-w-0">
+                                {(compare.left.mode === 'single-round' || compare.left.mode === 'single-chat')? (
+                                  <SingleRagAnswer trace={compare.left.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
+                                ) : (
+                                  <RetrievalThinkingTrace trace={compare.left.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
+                                )}
+                              </div>
+                            </div>
+                          </div>
+
+                          {/* 右侧结果 */}
+                          <div className={`min-w-0 overflow-hidden rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                            <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <QAAvatar role="assistant" variant="purple" isActive={compare.right.loading} label="知识库助手" />
+                                  <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
+                                    }`}>
+                                    {getModeLabel(compare.right.mode)}
+                                  </span>
+                                </div>
+                                {compare.right.loading && (
+                                  <button
+                                    type="button"
+                                    onClick={() => handleStopCompareSide('right')}
+                                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                                      }`}
+                                  >
+                                    <Square className="w-3 h-3 fill-current" />
+                                    停止
+                                  </button>
+                                )}
+                              </div>
+                            </div>
+                            <div className="p-4 min-w-0 overflow-hidden">
+                              <div className="flex-1 min-w-0">
+                                {(compare.right.mode === 'single-round' || compare.right.mode === 'single-chat') ? (
+                                  <SingleRagAnswer trace={compare.right.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
+                                ) : (
+                                  <RetrievalThinkingTrace trace={compare.right.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="space-y-4">
+                          {/* 上方结果 */}
+                          <div className={`min-w-0 overflow-hidden rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                            <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <QAAvatar role="assistant" variant="blue" isActive={compare.left.loading} label="知识库助手" />
+                                  <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                                    }`}>
+                                    {getModeLabel(compare.left.mode)}
+                                  </span>
+                                </div>
+                                {compare.left.loading && (
+                                  <button
+                                    type="button"
+                                    onClick={() => handleStopCompareSide('left')}
+                                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                                      }`}
+                                  >
+                                    <Square className="w-3 h-3 fill-current" />
+                                    停止
+                                  </button>
+                                )}
+                              </div>
+                            </div>
+                            <div className="p-4 min-w-0 overflow-hidden">
+                              <div className="flex-1 min-w-0">
+                                {(compare.left.mode === 'single-round' || compare.left.mode === 'single-chat') ? (
+                                  <SingleRagAnswer trace={compare.left.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
+                                ) : (
+                                  <RetrievalThinkingTrace trace={compare.left.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
+                                )}
+                              </div>
+                            </div>
+                          </div>
+
+                          {/* 下方结果 */}
+                          <div className={`min-w-0 overflow-hidden rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                            <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <QAAvatar role="assistant" variant="purple" isActive={compare.right.loading} label="知识库助手" />
+                                  <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
+                                    }`}>
+                                    {getModeLabel(compare.right.mode)}
+                                  </span>
+                                </div>
+                                {compare.right.loading && (
+                                  <button
+                                    type="button"
+                                    onClick={() => handleStopCompareSide('right')}
+                                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                                      }`}
+                                  >
+                                    <Square className="w-3 h-3 fill-current" />
+                                    停止
+                                  </button>
+                                )}
+                              </div>
+                            </div>
+                            <div className="p-4 min-w-0 overflow-hidden">
+                              <div className="flex-1 min-w-0">
+                                {(compare.right.mode === 'single-round' || compare.right.mode === 'single-chat') ? (
+                                  <SingleRagAnswer trace={compare.right.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
+                                ) : (
+                                  <RetrievalThinkingTrace trace={compare.right.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      )
+                    ) : (
+                      <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                        <GitCompare className="w-16 h-16 mb-4 opacity-50" />
+                        <p className="text-lg">对比模式</p>
+                        <p className="text-sm mt-2">输入问题，对比不同模式的回答效果</p>
+                      </div>
+                    )}
+                  </div>
+                ))
+              }
+              {showScrollToBottom && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setIsAutoScrollEnabled(true);
+                      setShowScrollToBottom(false);
+                      scrollToBottom(true);
+                    }}
+                    className={`fixed left-1/2 -translate-x-1/2 bottom-36 z-20 w-11 h-11 rounded-full backdrop-blur-sm border shadow-lg transition-all ${isDark
+                      ? 'bg-slate-800/65 border-slate-500/60 text-slate-100 hover:bg-slate-700/70'
+                      : 'bg-white/70 border-gray-300 text-gray-700 hover:bg-white/85'
+                      }`}
+                    title="滚动到底部"
+                  >
+                    <ArrowDown className="w-5 h-5 mx-auto" />
+                  </button>
+                )}
+            </div>
+          )}
+
+          {/* 底部输入区 */}
+          <QAComposer
+            value={inputValue}
+            onChange={setInputValue}
+            onKeyDown={handleKeyDown}
+            onSubmit={viewMode === 'compare' ? handleCompare : handleSend}
+            onStop={handleStop}
+            canSubmit={!isLoading && Boolean(inputValue.trim())}
+            onReset={handleSafeReset}
+            onSave={handleSaveRecord}
+            onCollect={handleCollect}
+            onOpenSettings={() => setIsModelSettingsOpen(true)}
+            isLoading={isLoading}
+            placeholder={viewMode === 'compare' ? '输入问题进行对比分析...' : '输入你的问题...'}
+            showReset
+          />
+        </div>
+
+        {/* 右侧辅助区 */}
+        {viewMode === 'single' && showProcess && (
+          <div className={`w-72 border-l flex-shrink-0 overflow-y-auto p-4 ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
+            }`}>
+            {/* 检索过程 */}
+            <div className="mb-6">
+              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                检索过程
+              </h3>
+              <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>当前模式</span>
+                    <span className={`text-sm font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                      {searchProcess.currentMode}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>检索轮次</span>
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      {searchProcess.rounds}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>命中数</span>
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      {searchProcess.hits}
+                    </span>
+                  </div>
+                  {searchProcess.queryRewrite && (
+                    <div>
+                      <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>Query改写</span>
+                      <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                        {searchProcess.queryRewrite}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 对比模式的差异总结 */}
+        {/* {viewMode === 'compare' && compareResult?.differences && (
+          <div className={`w-72 border-l flex-shrink-0 overflow-y-auto p-4 ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
+            }`}>
+            <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+              差异总结
+            </h3>
+            <div className={`p-4 rounded-xl space-y-4 ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+              <div>
+                <span className={`text-xs flex items-center gap-1 ${isDark ? 'text-green-400' : 'text-green-600'}`}>
+                  <CheckCircle className="w-3 h-3" />
+                  一致观点
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.consensus}
+                </p>
+              </div>
+              <div>
+                <span className={`text-xs flex items-center gap-1 ${isDark ? 'text-yellow-400' : 'text-yellow-600'}`}>
+                  <AlertCircle className="w-3 h-3" />
+                  差异观点
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.differences}
+                </p>
+              </div>
+              <div>
+                <span className={`text-xs ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                  {getModeLabel(compareResult.left.mode)}优势
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.leftAdvantage}
+                </p>
+              </div>
+              <div>
+                <span className={`text-xs ${isDark ? 'text-purple-400' : 'text-purple-600'}`}>
+                  {getModeLabel(compareResult.right.mode)}优势
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.rightAdvantage}
+                </p>
+              </div>
+            </div>
+          </div>
+        )} */}
+      </div>
+
+      {editingMessageId && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div className="absolute inset-0 bg-black/45 backdrop-blur-[1px]" onClick={handleCancelAssistantEdit} />
+          <div className={`relative w-full max-w-3xl rounded-2xl border shadow-2xl p-5 ${isDark ? 'bg-slate-900 border-slate-700 text-slate-100' : 'bg-white border-gray-200 text-gray-900'
+            }`}>
+            <button
+              type="button"
+              onClick={handleCancelAssistantEdit}
+              className={`absolute top-3 right-3 p-1.5 rounded-lg transition-all ${isDark ? 'hover:bg-slate-700 text-slate-300' : 'hover:bg-gray-100 text-gray-500'
+                }`}
+              title="关闭"
+            >
+              <X className="w-4 h-4" />
+            </button>
+            <div className="pr-9">
+              <h3 className="text-base font-semibold">编辑模型生成内容</h3>
+              <p className={`mt-1 text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                可同时修改模型回答和思考过程，多轮检索会把思考过程写回第一轮思考内容。
+              </p>
+            </div>
+            <div className="mt-4 grid gap-4 md:grid-cols-2">
+              <label className="space-y-2">
+                <span className={`text-sm font-medium ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>思考过程</span>
+                <textarea
+                  value={editingThinking}
+                  onChange={(event) => setEditingThinking(event.target.value)}
+                  className={`h-80 w-full resize-none rounded-xl border p-3 text-sm focus:outline-none ${isDark ? 'border-slate-700 bg-slate-800 text-slate-100' : 'border-gray-200 bg-gray-50 text-gray-800'
+                    }`}
+                />
+              </label>
+              <label className="space-y-2">
+                <span className={`text-sm font-medium ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>最终回答</span>
+                <textarea
+                  value={editingAnswer}
+                  onChange={(event) => setEditingAnswer(event.target.value)}
+                  className={`h-80 w-full resize-none rounded-xl border p-3 text-sm focus:outline-none ${isDark ? 'border-slate-700 bg-slate-800 text-slate-100' : 'border-gray-200 bg-gray-50 text-gray-800'
+                    }`}
+                />
+              </label>
+            </div>
+            <div className="mt-4 flex justify-end gap-2">
+              <button type="button" onClick={handleCancelAssistantEdit} className={`px-4 py-2 rounded-xl text-sm ${isDark ? 'bg-slate-800 hover:bg-slate-700 text-slate-200' : 'bg-gray-100 hover:bg-gray-200 text-gray-700'}`}>
+                取消
+              </button>
+              <button type="button" onClick={handleSaveAssistantEdit} className="px-4 py-2 rounded-xl text-sm bg-red-500 hover:bg-red-600 text-white">
+                保存
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {selectedCitation && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div
+            className="absolute inset-0 bg-black/45 backdrop-blur-[1px]"
+            onClick={() => setSelectedCitation(null)}
+          />
+          <div className={`relative w-full max-w-xl rounded-2xl border shadow-2xl p-5 ${isDark
+            ? 'bg-slate-900 border-slate-700 text-slate-100'
+            : 'bg-white border-gray-200 text-gray-900'
+            }`}>
+            <button
+              type="button"
+              onClick={() => setSelectedCitation(null)}
+              className={`absolute top-3 right-3 p-1.5 rounded-lg transition-all ${isDark ? 'hover:bg-slate-700 text-slate-300' : 'hover:bg-gray-100 text-gray-500'
+                }`}
+              title="关闭"
+            >
+              <X className="w-4 h-4" />
+            </button>
+
+            <div className="pr-9">
+              <h3 className="text-base font-semibold">{selectedCitation.title || '引用内容'}</h3>
+              <div className={`mt-2 text-xs space-y-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                <div>来源：{selectedCitation.source || selectedCitation.type || '未知来源'}</div>
+                <div>时间：{selectedCitation.time || '未知'}</div>
+              </div>
+            </div>
+
+            {selectedCitation.url && (
+              <div className="mt-4">
+                <a
+                  href={`${knowledgeUrl}/#/knowledge/mid-detail?recUuid=${selectedCitation.url}`}
+                  target="_blank"
+                  rel="noreferrer"
+                  className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm transition-all ${isDark
+                    ? 'border-slate-600 text-slate-200 hover:bg-slate-800'
+                    : 'border-gray-300 text-gray-700 hover:bg-gray-50'
+                    }`}
+                  title="打开原始链接"
+                >
+                  <ExternalLink className="w-4 h-4" />
+                  查看原文链接
+                </a>
+              </div>
+            )}
+
+            <div className={`mt-4 rounded-xl p-3 text-sm leading-relaxed max-h-[500px] overflow-auto pr-[10px] whitespace-pre-wrap ${isDark ? 'bg-slate-800/70 text-slate-200' : 'bg-gray-50 text-gray-700'
+              }`}>
+              {selectedCitation.content || selectedCitation.snippet || '暂无引用内容'}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <Dialog
+        visible={isModelSettingsOpen}
+        header="模型参数设置"
+        width="520px"
+        confirmBtn="保存"
+        cancelBtn="取消"
+        onConfirm={() => setIsModelSettingsOpen(false)}
+        onClose={() => setIsModelSettingsOpen(false)}
+      >
+        <div className="space-y-6 py-2">
+          <div>
+            <label className={`block text-sm font-medium mb-2 ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+              模型
+            </label>
+            <Select
+              value={modelName}
+              onChange={(value) => setModelName(String(value))}
+              options={[
+                { label: 'Qwen3-32B: 效果与速度均衡（推荐）', value: 'OpenAI3' },
+                { label: 'Qwen3-235B：效果与速度均衡（推荐）', value: 'OpenAI4' },
+                { label: 'GLM-5：逻辑性强，长上下文', value: 'OpenAI5' },
+                { label: 'Qwen3.5-27B：深度思考过程长', value: 'OpenAI6' },
+                { label: 'Qwen3-8B：速度快，效果较差', value: 'OpenAI7' },
+                // { label: 'Qwen2.5-72B：老模型，发散性差', value: 'OpenAI8' },
+                { label: '四季7B：速度快，效果较差', value: 'OpenAI9' },
+              ]}
+              style={{ width: '100%' }}
+            />
+          </div>
+          <div>
+            <div className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+              相似度阈值 score_threshold：{scoreThreshold.toFixed(2)}
+            </div>
+            <Slider
+              label
+              layout="horizontal"
+              min={0}
+              max={1}
+              step={0.01}
+              value={scoreThreshold}
+              onChange={(value) => setScoreThreshold(Number(value))}
+            />
+          </div>
+          <div>
+            <div className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+              温度 temperature：{temperature.toFixed(2)}
+            </div>
+            <Slider
+              label
+              layout="horizontal"
+              min={0}
+              max={1}
+              step={0.01}
+              value={temperature}
+              onChange={(value) => setTemperature(Number(value))}
+            />
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  );
+};
+
+export default GeneralQA;
diff --git a/web-code/components/qa/MopeChat.css b/web-code/components/qa/MopeChat.css
new file mode 100644
index 00000000..16df3807
--- /dev/null
+++ b/web-code/components/qa/MopeChat.css
@@ -0,0 +1,410 @@
+.mope-chat {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --surface-raised: #ffffff;
+  --card: #ffffff;
+  --border: #fee2e2;
+  --border-strong: #fecaca;
+  --text: #111827;
+  --text-muted: #6b7280;
+  --accent: #dc2626;
+  --accent-hover: #ef4444;
+  --green: #16a34a;
+  --yellow: #f59e0b;
+  --red: #dc2626;
+  --purple: #7c3aed;
+  --button-text: #ffffff;
+  --surface-hover: rgba(220, 38, 38, 0.04);
+  --surface-hover-strong: rgba(220, 38, 38, 0.08);
+  --accent-soft: rgba(220, 38, 38, 0.08);
+  --accent-soft-strong: rgba(220, 38, 38, 0.16);
+  --danger-soft: rgba(220, 38, 38, 0.10);
+  --shadow-soft: 0 14px 40px rgba(15, 23, 42, 0.07);
+  --shadow-card: 0 8px 24px rgba(15, 23, 42, 0.05);
+
+  --text-primary: var(--text);
+  --text-secondary: var(--text-muted);
+  --border-color: var(--border);
+  --bg-secondary: var(--surface);
+  --accent-blue: var(--accent);
+
+  --phase-starting: var(--accent);
+  --phase-diverging: var(--yellow);
+  --phase-closing: var(--green);
+  --phase-done: var(--purple);
+
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--text);
+  background: var(--bg);
+}
+
+.mope-chat.mope-chat-dark {
+  --bg: #0f172a;
+  --surface: #1e293b;
+  --surface-raised: #111827;
+  --card: #0f172a;
+  --border: rgba(30, 64, 175, 0.45);
+  --border-strong: rgba(59, 130, 246, 0.45);
+  --text: #f8fafc;
+  --text-muted: #94a3b8;
+  --accent: #3b82f6;
+  --accent-hover: #60a5fa;
+  --green: #10b981;
+  --yellow: #f59e0b;
+  --red: #f43f5e;
+  --purple: #8b5cf6;
+  --button-text: #ffffff;
+  --surface-hover: rgba(255, 255, 255, 0.03);
+  --surface-hover-strong: rgba(255, 255, 255, 0.06);
+  --accent-soft: rgba(59, 130, 246, 0.14);
+  --accent-soft-strong: rgba(59, 130, 246, 0.22);
+  --danger-soft: rgba(244, 63, 94, 0.12);
+  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.28);
+  --shadow-card: 0 12px 28px rgba(0, 0, 0, 0.22);
+}
+
+.mope-chat,
+.mope-chat * {
+  box-sizing: border-box;
+}
+
+.mope-chat {
+  color: var(--text);
+  min-height: 100%;
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+.mope-chat input,
+.mope-chat textarea,
+.mope-chat select,
+.mope-chat button {
+  font: inherit;
+}
+
+.mope-chat p,
+.mope-chat h1,
+.mope-chat h2,
+.mope-chat h3,
+.mope-chat h4,
+.mope-chat pre {
+  margin-top: 0;
+}
+
+.mope-chat ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.mope-chat ::-webkit-scrollbar-track {
+  background: var(--surface);
+}
+.mope-chat ::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+}
+.mope-chat ::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+/* Idle: centered form */
+.mope-chat.app-idle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - 96px);
+  padding: 36px 40px 42px;
+  background:
+    radial-gradient(circle at top center, var(--accent-soft) 0, transparent 34%),
+    var(--bg);
+}
+
+.mope-chat.app-idle-scroll {
+  align-items: flex-start;
+  overflow-y: auto;
+}
+
+/* Running / done: two-column */
+.mope-chat.app-running {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 96px);
+  overflow: hidden;
+  background: var(--surface-raised);
+  border-radius: 18px;
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-card);
+}
+
+.mope-chat .app-header {
+  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
+  border-bottom: 1px solid var(--border);
+  padding: 14px 18px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.mope-chat .app-header-logo {
+  font-weight: 700;
+  font-size: 15px;
+  color: var(--accent);
+  letter-spacing: 0.5px;
+}
+
+.mope-chat .app-header-task {
+  flex: 1;
+  color: var(--text-muted);
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mope-chat .app-header-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.mope-chat .app-body {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.mope-chat .app-sidebar {
+  width: 250px;
+  flex-shrink: 0;
+  overflow-y: auto;
+  border-right: 1px solid var(--border);
+  background: color-mix(in srgb, var(--surface) 96%, var(--accent) 4%);
+}
+
+.mope-chat .app-main {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+  background: var(--bg);
+}
+
+.mope-chat .app-progress-sidebar {
+  width: 320px;
+  flex-shrink: 0;
+  overflow-y: auto;
+  border-left: 1px solid var(--border);
+  background: color-mix(in srgb, var(--surface) 96%, var(--accent) 4%);
+}
+
+.mope-chat .app-side-panel {
+  position: relative;
+  transition: width 0.22s ease, background 0.2s ease;
+}
+
+.mope-chat .app-side-panel.collapsed {
+  width: 44px;
+  overflow: hidden;
+}
+
+.mope-chat .app-side-toggle {
+  position: sticky;
+  top: 10px;
+  z-index: 2;
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--surface-raised);
+  color: var(--text-muted);
+  box-shadow: var(--shadow-card);
+}
+
+.mope-chat .app-side-toggle:hover:not(:disabled) {
+  color: var(--accent);
+  border-color: var(--border-strong);
+  background: var(--surface-hover-strong);
+  transform: translateY(-1px);
+}
+
+.mope-chat .app-side-toggle-left {
+  float: right;
+  margin: 10px 10px 0 0;
+}
+
+.mope-chat .app-side-toggle-right {
+  float: left;
+  margin: 10px 0 0 10px;
+}
+
+.mope-chat .app-side-panel.collapsed .app-side-toggle-left,
+.mope-chat .app-side-panel.collapsed .app-side-toggle-right {
+  float: none;
+  margin: 10px auto 0;
+}
+
+/* Buttons */
+.mope-chat button {
+  cursor: pointer;
+  border: none;
+  border-radius: 10px;
+  padding: 8px 16px;
+  font-size: 13px;
+  font-family: inherit;
+  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.mope-chat button:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.mope-chat button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.mope-chat .btn-primary {
+  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
+  color: var(--button-text);
+  font-weight: 600;
+  box-shadow: 0 10px 22px var(--accent-soft-strong);
+}
+
+.mope-chat .btn-primary:hover:not(:disabled) {
+  opacity: 0.85;
+}
+
+.mope-chat .btn-danger {
+  background: transparent;
+  color: var(--red);
+  border: 1px solid var(--red);
+}
+
+.mope-chat .btn-danger:hover:not(:disabled) {
+  background: var(--danger-soft);
+}
+
+.mope-chat .btn-secondary {
+  background: var(--surface-raised);
+  color: var(--text-muted);
+  border: 1px solid var(--border);
+}
+
+.mope-chat .btn-secondary:hover:not(:disabled) {
+  color: var(--text);
+  border-color: var(--border-strong);
+  background: var(--surface-hover);
+}
+
+.mope-chat .btn-ghost {
+  background: transparent;
+  color: var(--text-muted);
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+.mope-chat .btn-ghost:hover {
+  color: var(--text);
+}
+
+/* Badges */
+.mope-chat .badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+}
+
+.mope-chat .badge-starting { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
+.mope-chat .badge-diverging { background: color-mix(in srgb, var(--yellow) 15%, transparent); color: var(--yellow); }
+.mope-chat .badge-closing { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
+.mope-chat .badge-done { background: color-mix(in srgb, var(--purple) 15%, transparent); color: var(--purple); }
+.mope-chat .badge-default { background: color-mix(in srgb, var(--text-muted) 15%, transparent); color: var(--text-muted); }
+
+/* Spinner */
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.mope-chat .spinner {
+  display: inline-block;
+  animation: spin 1s linear infinite;
+}
+
+/* Reference cite */
+.mope-chat .ref-cite {
+  display: inline-block;
+  background: var(--accent-soft-strong);
+  color: var(--accent);
+  border-radius: 4px;
+  padding: 0 3px;
+  font-family: 'SFMono-Regular', Consolas, monospace;
+  font-size: 11px;
+  cursor: pointer;
+  position: relative;
+}
+
+.mope-chat .ref-cite:hover::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--card);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  white-space: nowrap;
+  z-index: 100;
+  font-family: inherit;
+  pointer-events: none;
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Error banner */
+.mope-chat .error-banner {
+  background: var(--danger-soft);
+  border: 1px solid var(--red);
+  border-radius: 6px;
+  padding: 8px 12px;
+  color: var(--red);
+  font-size: 13px;
+  margin-bottom: 12px;
+}
+
+@media (max-width: 1200px) {
+  .mope-chat .app-progress-sidebar {
+    width: 260px;
+  }
+}
+
+@media (max-width: 960px) {
+  .mope-chat .app-body {
+    flex-direction: column;
+  }
+
+  .mope-chat .app-sidebar,
+  .mope-chat .app-progress-sidebar {
+    width: 100%;
+    border-right: none;
+    border-left: none;
+    border-bottom: 1px solid var(--border);
+    max-height: 260px;
+  }
+
+  .mope-chat .app-main {
+    padding: 14px;
+  }
+}
diff --git a/web-code/components/qa/MopeChat.tsx b/web-code/components/qa/MopeChat.tsx
new file mode 100644
index 00000000..add25307
--- /dev/null
+++ b/web-code/components/qa/MopeChat.tsx
@@ -0,0 +1,349 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useSession } from '@/hooks/useSession';
+import { useTheme } from '../../contexts/ThemeContext';
+import ConfigPanel from './components/ConfigPanel';
+import Sidebar from './components/Sidebar';
+import Timeline from './components/Timeline';
+import ProgressSidebar from './components/ProgressSidebar';
+import ScenarioConfigPage from './components/ScenarioConfigPage';
+import './MopeChat.css';
+import { useChatContext } from '@/contexts/ChatContext';
+import { requestCrudService } from '@/service/request-axios-service';
+
+type StartConfig = {
+  task_context?: string;
+  [key: string]: any;
+};
+
+type SessionError = {
+  agent_id?: string;
+  error?: string;
+};
+
+type SessionHistoryPayload = {
+  typeName: string;
+  templateName: string;
+  resultJson: Record<string, any>;
+};
+
+const MOPE_HISTORY_API_BASE = '/api/mope/history';
+const backendUrls = import.meta.env.VITE_AIPI_MOPECHAT_URL || '';
+const zncmUrl = import.meta.env.VITE_API_BASE_URL || '';
+const service = requestCrudService;
+/**
+ * 保存模型完整生成结果。
+ *
+ * 接口暂未提供，先把调用方法和请求体结构固定下来：
+ * - typeName：类型名字，目前使用用户输入的任务背景。
+ * - templateName：用户选择的生成模板名称。
+ * - resultJson：完整结果 JSON，包含 timeline、agentStates、reportSchema、finalReport 等恢复页面所需数据。
+ */
+async function saveMopeHistory(payload: SessionHistoryPayload) {
+  console.log('保存了吗',payload )
+  const response = await fetch(MOPE_HISTORY_API_BASE, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+
+  if (!response.ok) {
+    throw new Error(`保存 MOPE 历史失败：HTTP ${response.status}`);
+  }
+
+  return response.json().catch(() => null);
+}
+
+/**
+ * 获取当前用户最近一次 MOPE 生成历史。
+ *
+ * 接口暂未提供，先约定返回值就是保存时的 resultJson。
+ * 如果接口没有历史数据，应返回 null / 空对象 / 404，页面会保持当前未生成状态。
+ */
+async function fetchMopeHistory(): Promise<Record<string, any> | null> {
+  
+  const response = await fetch(MOPE_HISTORY_API_BASE, { method: 'GET' });
+
+  if (response.status === 404 || response.status === 204) return null;
+  if (!response.ok) {
+    throw new Error(`获取 MOPE 历史失败：HTTP ${response.status}`);
+  }
+
+  const data = await response.json();
+  return data?.resultJson || data || null;
+}
+
+export default function MopeChat() {
+  const session = useSession() as any;
+  const { theme } = useTheme() as { theme?: string };
+  const { startConfig } = useChatContext();
+  const isDark = theme === 'dark';
+  const [taskContext, setTaskContext] = useState<string>('');
+  const [idlePage, setIdlePage] = useState<string>('home');
+  const [isLeftSidebarCollapsed, setIsLeftSidebarCollapsed] = useState(false);
+  const [isRightSidebarCollapsed, setIsRightSidebarCollapsed] = useState(false);
+
+  const {
+    status,
+    phase,
+    coordinatorMode,
+    currentRound,
+    divergeRounds,
+    reportSchema,
+    agents,
+    agentStates,
+    timeline,
+    sharedMemory,
+    finalReportPartial,
+    currentFinalField,
+    pendingReview,
+    reviewSubmitting,
+    reviewRevising,
+    errors,
+    startSession,
+    stopSession,
+    approveCoordinator,
+    reviseCoordinator,
+    hydrateFromSnapshot,
+    reset,
+  } = session;
+
+  const historyLoadedRef = useRef(false);
+  const savedHistoryKeyRef = useRef<string | null>(null);
+  const currentConfigRef = useRef<StartConfig | null>(null);
+
+  const buildHistorySnapshot = useCallback(() => ({
+    status,
+    phase,
+    coordinatorMode,
+    currentRound,
+    divergeRounds,
+    reportSchema,
+    agents,
+    agentStates,
+    timeline,
+    sharedMemory,
+    finalReportPartial,
+    currentFinalField,
+    config: currentConfigRef.current,
+  }), [
+    status,
+    phase,
+    coordinatorMode,
+    currentRound,
+    divergeRounds,
+    reportSchema,
+    agents,
+    agentStates,
+    timeline,
+    sharedMemory,
+    finalReportPartial,
+    currentFinalField,
+  ]);
+
+  const handleStart = (config: StartConfig, backendUrl: string) => {
+    currentConfigRef.current = config;
+    savedHistoryKeyRef.current = null;
+    setTaskContext(config.task_context || '');
+    console.log('config', config)
+    startSession(config, backendUrl);
+  };
+
+  const handleStop = () => {
+    console.log('state', )
+    stopSession();
+    const snapshot = buildHistorySnapshot();
+    const templateName = currentConfigRef.current?.template_name || '未命名模板';
+    const typeName = taskContext || currentConfigRef.current?.task_context || '未命名任务';
+    const saveKey = `${typeName}::${templateName}::${timeline.length}`;
+    if (savedHistoryKeyRef.current === saveKey) return;
+    savedHistoryKeyRef.current = saveKey;
+
+    void saveMopeHistory({
+      typeName,
+      templateName,
+      resultJson: {
+        ...snapshot,
+        typeName,
+        templateName,
+        savedAt: new Date().toISOString(),
+      },
+    }).catch((error) => {
+      console.warn('MOPE 历史记录保存失败:', error);
+      savedHistoryKeyRef.current = null;
+    });
+  };
+
+  const handleReset = () => {
+    reset();
+    currentConfigRef.current = null;
+    savedHistoryKeyRef.current = null;
+    setTaskContext('');
+  };
+
+  useEffect(() => {
+    if (startConfig) {
+      handleStart({
+        ...startConfig,
+        coordinator_mode: 'human_review',
+      }, backendUrls);
+    }
+    console.log('startConfig', startConfig)
+  }, [])
+
+  useEffect(() => {
+    if (historyLoadedRef.current) return;
+    historyLoadedRef.current = true;
+
+    void fetchMopeHistory()
+      .then((snapshot) => {
+        if (!snapshot || !Array.isArray(snapshot.timeline) || snapshot.timeline.length === 0) return;
+        currentConfigRef.current = snapshot.config || null;
+        setTaskContext(snapshot.config?.task_context || snapshot.typeName || '');
+        hydrateFromSnapshot(snapshot);
+      })
+      .catch((error) => {
+        console.warn('MOPE 历史记录获取失败，保持默认空状态:', error);
+      });
+  }, [hydrateFromSnapshot]);
+
+  useEffect(() => {
+    console.log('status', status)
+    if (status !== 'done' || !timeline?.length) return;
+    const snapshot = buildHistorySnapshot();
+    const templateName = currentConfigRef.current?.template_name || '未命名模板';
+    const typeName = taskContext || currentConfigRef.current?.task_context || '未命名任务';
+    const saveKey = `${typeName}::${templateName}::${timeline.length}`;
+    if (savedHistoryKeyRef.current === saveKey) return;
+    savedHistoryKeyRef.current = saveKey;
+
+    void saveMopeHistory({
+      typeName,
+      templateName,
+      resultJson: {
+        ...snapshot,
+        typeName,
+        templateName,
+        savedAt: new Date().toISOString(),
+      },
+    }).catch((error) => {
+      console.warn('MOPE 历史记录保存失败:', error);
+      savedHistoryKeyRef.current = null;
+    });
+  }, [status, timeline, taskContext, buildHistorySnapshot]);
+
+  if (status === 'idle') {
+    if (idlePage === 'scenario_config') {
+      return (
+        <div className={`mope-chat app-idle app-idle-scroll ${isDark ? 'mope-chat-dark' : 'mope-chat-light'}`}>
+          <ScenarioConfigPage onBack={() => setIdlePage('home')} />
+        </div>
+      );
+    }
+
+    return (
+      <div className={`mope-chat app-idle ${isDark ? 'mope-chat-dark' : 'mope-chat-light'}`}>
+        <ConfigPanel
+          onStart={handleStart}
+          isRunning={false}
+          onStop={handleStop}
+          onOpenScenarioConfig={() => setIdlePage('scenario_config')}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={`mope-chat app-running ${isDark ? 'mope-chat-dark' : 'mope-chat-light'}`}>
+      <header className="app-header">
+        <span className="app-header-logo">MOPE</span>
+        <span className="app-header-task">
+          {taskContext ? `"${taskContext.slice(0, 80)}${taskContext.length > 80 ? '…' : ''}"` : '分析中…'}
+        </span>
+        <span className="badge badge-default">
+          {coordinatorMode === 'human_review' ? '人工确认' : '全自动'}
+        </span>
+        {status === 'waiting_human' && (
+          <span className="badge badge-diverging">等待人工确认</span>
+        )}
+        <div className="app-header-actions">
+          {(status === 'running' || status === 'waiting_human') && (
+            <button className="btn-danger" onClick={handleStop}>
+              停止
+            </button>
+          )}
+          {(status === 'done' || status === 'error') && (
+            <button className="btn-secondary" onClick={handleReset}>
+              重新开始
+            </button>
+          )}
+        </div>
+      </header>
+
+      <div className="app-body">
+        <aside className={`app-sidebar app-side-panel${isLeftSidebarCollapsed ? ' collapsed' : ''}`}>
+          <button
+            type="button"
+            className="app-side-toggle app-side-toggle-left"
+            onClick={() => setIsLeftSidebarCollapsed(v => !v)}
+            aria-label={isLeftSidebarCollapsed ? '展开左侧栏' : '收起左侧栏'}
+            title={isLeftSidebarCollapsed ? '展开左侧栏' : '收起左侧栏'}
+          >
+            {isLeftSidebarCollapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
+          </button>
+          {!isLeftSidebarCollapsed && (
+            <Sidebar
+              agents={agents}
+              agentStates={agentStates}
+              phase={phase}
+              currentRound={currentRound}
+              divergeRounds={divergeRounds}
+            />
+          )}
+        </aside>
+
+        <main className="app-main">
+          {errors.length > 0 && errors.map((e: SessionError, i: number) => (
+            <div key={i} className="error-banner">
+              {e.agent_id ? `[${e.agent_id}] ` : ''}{e.error}
+            </div>
+          ))}
+          <Timeline
+            timeline={timeline}
+            agentStates={agentStates}
+            reportSchema={reportSchema}
+            pendingReview={pendingReview}
+            onApproveReview={approveCoordinator}
+            onReviseReview={reviseCoordinator}
+            reviewSubmitting={reviewSubmitting}
+            reviewRevising={reviewRevising}
+          />
+        </main>
+
+        <aside className={`app-progress-sidebar app-side-panel${isRightSidebarCollapsed ? ' collapsed' : ''}`}>
+          <button
+            type="button"
+            className="app-side-toggle app-side-toggle-right"
+            onClick={() => setIsRightSidebarCollapsed(v => !v)}
+            aria-label={isRightSidebarCollapsed ? '展开右侧栏' : '收起右侧栏'}
+            title={isRightSidebarCollapsed ? '展开右侧栏' : '收起右侧栏'}
+          >
+            {isRightSidebarCollapsed ? <ChevronLeft size={16} /> : <ChevronRight size={16} />}
+          </button>
+          {!isRightSidebarCollapsed && (
+            <ProgressSidebar
+              phase={phase}
+              status={status}
+              currentRound={currentRound}
+              divergeRounds={divergeRounds}
+              reportSchema={reportSchema}
+              sharedMemory={sharedMemory}
+              finalReportPartial={finalReportPartial}
+              currentFinalField={currentFinalField}
+            />
+          )}
+        </aside>
+      </div>
+    </div>
+  );
+}
diff --git a/web-code/components/qa/QA.tsx b/web-code/components/qa/QA.tsx
new file mode 100644
index 00000000..e0833c98
--- /dev/null
+++ b/web-code/components/qa/QA.tsx
@@ -0,0 +1,2188 @@
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  Send,
+  Upload,
+  RotateCcw,
+  Bookmark,
+  History,
+  Sparkles,
+  BookOpen,
+  Brain,
+  GitCompare,
+  MessageSquare,
+  FileText,
+  CheckCircle,
+  AlertCircle,
+  Bot,
+  Database,
+  Layers,
+  Cpu,
+  Target,
+  Search,
+  CircleHelp,
+  ChevronRight,
+  Plus,
+  X,
+  Copy,
+  RefreshCw,
+  ArrowRight,
+  ArrowLeft,
+  Download,
+  Save,
+  ChevronDown,
+  ChevronUp,
+  MessageCircle,
+  Users,
+  FileCheck,
+  AlertTriangle,
+  Handshake,
+  Edit3,
+  ListChecks,
+  Play,
+  Pause,
+  UserCheck,
+  UserX,
+  Hash,
+  Clock,
+  Zap,
+  ClipboardList,
+  TrendingUp,
+} from 'lucide-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import { useChatContext } from '../../contexts/ChatContext';
+import { PageType } from '../../components/Sidebar';
+import QATypeSwitch from './QATypeSwitch';
+
+type QAMode = 'single-round' | 'multi-round' | 'deep-search';
+type QAProvider = 'general' | 'agent' | 'multi-agent';
+type ViewMode = 'single' | 'compare';
+
+interface Agent {
+  id: string;
+  name: string;
+  category: string;
+  tags: string[];
+  description: string;
+  skills: string[];
+  dataSources: string[];
+}
+
+interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: Date;
+  sources?: SourceItem[];
+  agentName?: string;
+  skills?: string[];
+  dataSources?: string[];
+  functions?: string[];
+}
+
+interface SourceItem {
+  title: string;
+  type: string;
+  snippet: string;
+}
+
+interface CompareResult {
+  leftMode: QAMode;
+  rightMode: QAMode;
+  leftContent: string;
+  rightContent: string;
+  differences?: {
+    consensus: string;
+    differences: string;
+    leftAdvantage: string;
+    rightAdvantage: string;
+  };
+}
+
+// 多智能体协同分析相关类型
+interface AgentResponse {
+  id: string;
+  agentId: string;
+  agentName: string;
+  agentCategory: string;
+  status: 'pending' | 'responding' | 'completed' | 'adopted' | 'pending-confirm';
+  coreJudgment: string;
+  content: string;
+  structuredSummary?: {
+    key: string;
+    value: string;
+  }[];
+  timestamp: Date;
+}
+
+// 多智能体消息类型
+interface MultiAgentMessage {
+  id: string;
+  type: 'user' | 'agent';
+  agentName?: string;
+  content: string;
+  timestamp: Date;
+  isFollowUp?: boolean;
+  parentMessageId?: string;
+}
+
+interface AdoptedView {
+  id: string;
+  agentName: string;
+  content: string;
+  timestamp: Date;
+}
+
+interface PendingQuestion {
+  id: string;
+  content: string;
+  relatedAgents: string[];
+  timestamp: Date;
+}
+
+interface SummaryDraft {
+  title: string;
+  sections: {
+    title: string;
+    content: string;
+  }[];
+}
+
+// 场景模板类型
+interface SceneTemplate {
+  id: string;
+  name: string;
+  type: string;
+  description: string;
+  agentIds: string[];
+}
+
+// 场景模板数据
+const sceneTemplates: SceneTemplate[] = [
+  {
+    id: 'scene-1',
+    name: '宣传策略生成',
+    type: '策略生成',
+    description: '生成完整的品牌传播策略方案',
+    agentIds: ['goal-agent', 'audience-agent', 'brand-agent', 'channel-agent', 'content-agent', 'narrative-agent', 'behavior-agent', 'risk-agent'],
+  },
+  {
+    id: 'scene-2',
+    name: '宣传方案推演',
+    type: '方案推演',
+    description: '对现有方案进行多角度推演验证',
+    agentIds: ['goal-agent', 'audience-agent', 'behavior-agent', 'risk-agent', 'content-agent', 'channel-agent'],
+  },
+  {
+    id: 'scene-3',
+    name: '宣传活动复盘',
+    type: '效果复盘',
+    description: '对宣传活动效果进行多维度复盘分析',
+    agentIds: ['goal-agent', 'audience-agent', 'behavior-agent', 'channel-agent', 'risk-agent'],
+  },
+  {
+    id: 'scene-4',
+    name: '舆情应对策略',
+    type: '风险应对',
+    description: '制定舆情风险应对和处置策略',
+    agentIds: ['risk-agent', 'audience-agent', 'brand-agent', 'content-agent', 'narrative-agent', 'channel-agent', 'behavior-agent'],
+  },
+  {
+    id: 'scene-5',
+    name: '多版本策略比较',
+    type: '策略对比',
+    description: '对比分析多个策略方案的优劣',
+    agentIds: ['goal-agent', 'audience-agent', 'brand-agent', 'content-agent'],
+  },
+];
+
+// 智能体列表 - 按五大类别分类
+const agents: Agent[] = [
+  // 规划类智能体
+  {
+    id: 'goal-agent',
+    name: 'GoalAgent',
+    category: '规划类',
+    tags: ['目标拆解', 'KPI设定', '优先级'],
+    description: '专业的目标规划智能体，能够帮助拆解任务目标并设定可衡量的KPI',
+    skills: ['目标拆解', 'KPI设定', '优先级排序'],
+    dataSources: ['知识库', '历史数据分析'],
+  },
+  {
+    id: 'brand-agent',
+    name: 'BrandAgent',
+    category: '规划类',
+    tags: ['品牌定位', '传播策略', '调性设计'],
+    description: '专注品牌建设与传播策略的规划智能体',
+    skills: ['品牌定位分析', '传播路径规划', '品牌调性设计'],
+    dataSources: ['知识库', '行业数据库'],
+  },
+  {
+    id: 'content-agent',
+    name: 'ContentAgent',
+    category: '规划类',
+    tags: ['文案撰写', '创意生成', '内容规划'],
+    description: '智能内容创作规划助手，支持多种形式的内容生成规划',
+    skills: ['文案撰写', '创意生成', '多形式内容'],
+    dataSources: ['知识库', '优秀案例库'],
+  },
+  {
+    id: 'channel-agent',
+    name: 'ChannelAgent',
+    category: '规划类',
+    tags: ['渠道选择', '投放策略', '媒介规划'],
+    description: '专业的渠道规划智能体，制定最优渠道组合策略',
+    skills: ['渠道选择', '投放策略规划', '效果评估'],
+    dataSources: ['Y系统', 'A系统', '行业数据'],
+  },
+  {
+    id: 'narrative-agent',
+    name: 'NarrativeAgent',
+    category: '规划类',
+    tags: ['故事线', '情感设计', '叙事策略'],
+    description: '专业的叙事规划智能体，构建有感染力的内容故事线',
+    skills: ['故事线设计', '情感共鸣设计', '内容叙事'],
+    dataSources: ['优秀案例库', '内容分析'],
+  },
+  // MNTY类智能体
+  {
+    id: 'mnty-agent',
+    name: 'MNTYAgent',
+    category: 'MNTY类',
+    tags: ['心智模型', '用户认知', '心智定位'],
+    description: '专注用户心智模型分析，挖掘用户深层认知和心智定位',
+    skills: ['心智模型构建', '认知路径分析', '心智定位设计'],
+    dataSources: ['用户研究数据', '心理学理论库'],
+  },
+  // 效果PG类智能体
+  {
+    id: 'behavior-agent',
+    name: 'BehaviorAgent',
+    category: '效果PG类',
+    tags: ['用户行为', '行为路径', '效果预测'],
+    description: '专注用户行为模式分析，预测和优化用户行为效果',
+    skills: ['用户行为分析', '行为路径设计', '转化优化'],
+    dataSources: ['Y系统', '行为数据'],
+  },
+  {
+    id: 'pg-agent',
+    name: 'PGAgent',
+    category: '效果PG类',
+    tags: ['效果评估', 'PG分析', '数据洞察'],
+    description: '专业的效果评估智能体，提供精准的数据分析和洞察',
+    skills: ['效果评估', '数据可视化', '趋势预测'],
+    dataSources: ['数据分析平台', '监控系统'],
+  },
+  // 知识分析类智能体
+  {
+    id: 'audience-agent',
+    name: 'AudienceAgent',
+    category: '知识分析类',
+    tags: ['受众分层', '画像抽取', '知识分析'],
+    description: '专业的受众知识分析智能体，识别目标受众特征并生成画像',
+    skills: ['受众分层', '核心受众识别', '画像抽取'],
+    dataSources: ['知识库', 'Y系统', 'A系统'],
+  },
+  {
+    id: 'knowledge-agent',
+    name: 'KnowledgeAgent',
+    category: '知识分析类',
+    tags: ['知识图谱', '语义分析', '关联挖掘'],
+    description: '专业的知识分析智能体，构建知识图谱并进行深度语义分析',
+    skills: ['知识图谱构建', '语义分析', '关联挖掘'],
+    dataSources: ['知识库', '文献数据库'],
+  },
+  // 协同管理类智能体
+  {
+    id: 'risk-agent',
+    name: 'RiskAgent',
+    category: '协同管理类',
+    tags: ['风险识别', '预案设计', '协同管理'],
+    description: '专注风险识别与协同管理的智能体，制定完善的应急预案',
+    skills: ['风险识别', '影响评估', '预案设计'],
+    dataSources: ['历史案例', '风险数据库'],
+  },
+  {
+    id: 'collab-agent',
+    name: 'CollabAgent',
+    category: '协同管理类',
+    tags: ['协同调度', '资源协调', '进度管理'],
+    description: '专业的协同管理智能体，统筹调度多方资源协调推进',
+    skills: ['协同调度', '资源协调', '进度管理'],
+    dataSources: ['任务管理系统', '资源数据库'],
+  },
+];
+
+interface QAProps {
+  onNavigate: (page: PageType) => void;
+  initialMode?: 'new' | 'general' | 'agent' | 'multi-agent';
+}
+
+const QA: React.FC<QAProps> = ({ onNavigate, initialMode }) => {
+  const { theme } = useTheme();
+  const { addMessage } = useChatContext();
+  const isDark = theme === 'dark';
+
+  // 状态管理
+  const [viewMode, setViewMode] = useState<ViewMode>('single');
+  const [qaProvider, setQaProvider] = useState<QAProvider>('general');
+  const [qaMode, setQaMode] = useState<QAMode>('single-round');
+  const [selectedAgent, setSelectedAgent] = useState<Agent>(agents[0]);
+  const [compareLeftMode, setCompareLeftMode] = useState<QAMode>('single-round');
+  const [compareRightMode, setCompareRightMode] = useState<QAMode>('deep-search');
+
+  // 新建问答确认对话框
+  const [showNewQADialog, setShowNewQADialog] = useState(false);
+
+  // 处理 initialMode - 新建问答时清空会话
+  useEffect(() => {
+    if (initialMode === 'new') {
+      // 新建问答模式：清空会话，保持通用问答模式
+      setMessages([]);
+      setCompareResult(null);
+      setInputValue('');
+      setQaProvider('general');
+      setViewMode('single');
+    } else if (initialMode === 'agent') {
+      // 智能体问答模式
+      setQaProvider('agent');
+    } else if (initialMode === 'general') {
+      // 通用问答模式
+      setQaProvider('general');
+    } else if (initialMode === 'multi-agent') {
+      // 多智能体协同模式
+      setQaProvider('multi-agent');
+      setMessages([]);
+      setCompareResult(null);
+      setInputValue('');
+    }
+  }, [initialMode]);
+
+  // 知识范围
+  const [knowledgeScope, setKnowledgeScope] = useState<'all' | 'specific-kb' | 'specific-domain'>('all');
+
+  // 回答偏好
+  const [showSources, setShowSources] = useState(true);
+  const [showProcess, setShowProcess] = useState(false);
+
+  // 对比设置
+  const [compareLayout, setCompareLayout] = useState<'horizontal' | 'vertical'>('horizontal');
+  const [autoSummarizeDiff, setAutoSummarizeDiff] = useState(true);
+  const [recommendBetter, setRecommendBetter] = useState(true);
+
+  // 消息和结果
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputValue, setInputValue] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [compareResult, setCompareResult] = useState<CompareResult | null>(null);
+  const [agentSearchQuery, setAgentSearchQuery] = useState('');
+
+  // 检索过程展示
+  const [searchProcess, setSearchProcess] = useState({
+    currentMode: '单轮RAG',
+    rounds: 1,
+    hits: 5,
+    queryRewrite: '',
+  });
+
+  // 多智能体会商状态
+  const [discussionStatus, setDiscussionStatus] = useState<'idle' | 'in_progress' | 'paused' | 'completed'>('idle');
+  const [currentRound, setCurrentRound] = useState(1);
+  const [currentTopic, setCurrentTopic] = useState('五四青年节宣传方向讨论');
+  const [speakingMode, setSpeakingMode] = useState<'broadcast' | 'targeted' | 'response'>('broadcast');
+  const [selectedTargetAgent, setSelectedTargetAgent] = useState<string | null>(null);
+
+  // 共识与分歧
+  const [consensusItems, setConsensusItems] = useState<{id: string; content: string; agents: string[]}[]>([]);
+  const [disagreementItems, setDisagreementItems] = useState<{id: string; content: string; agents: string[]; details: string}[]>([]);
+  const [conclusionDraft, setConclusionDraft] = useState('');
+
+  // 消息操作状态
+  const [messageAction, setMessageAction] = useState<'none' | 'adopt' | 'disagree' | 'followup' | 'respond'>('none');
+  const [selectedMessageId, setSelectedMessageId] = useState<string | null>(null);
+
+  // 原有状态（保持兼容性）
+  const [selectedMultiAgents, setSelectedMultiAgents] = useState<Agent[]>([agents[0], agents[4]]);
+  const [agentResponses, setAgentResponses] = useState<AgentResponse[]>([]);
+  const [adoptedViews, setAdoptedViews] = useState<AdoptedView[]>([]);
+  const [pendingQuestions, setPendingQuestions] = useState<PendingQuestion[]>([]);
+  const [summaryDraft, setSummaryDraft] = useState<SummaryDraft>({
+    title: '多智能体联合分析报告',
+    sections: [],
+  });
+  const [taskInfo, setTaskInfo] = useState({
+    name: '五四青年节宣传方向预分析',
+    goal: '形成一版多智能体联合分析报告',
+    status: '讨论中',
+    background: '五四青年节品牌传播活动需要明确目标受众和传播策略',
+    keyQuestions: ['核心受众是谁？', '如何设计参与行为？', '叙事方式如何选择？', '有哪些风险需要关注？'],
+  });
+  const [sendTarget, setSendTarget] = useState<'all' | string>('all');
+  const [multiAgentFilter, setMultiAgentFilter] = useState<'all' | 'completed' | 'pending' | 'adopted'>('all');
+  const [isMultiAgentLoading, setIsMultiAgentLoading] = useState(false);
+  const [multiAgentMessages, setMultiAgentMessages] = useState<MultiAgentMessage[]>([]);
+  const [rightPanelTab, setRightPanelTab] = useState<'structured' | 'report'>('structured');
+  const [messageFilter, setMessageFilter] = useState<'all' | 'user' | 'adopted'>('all');
+  const [agentMessageFilter, setAgentMessageFilter] = useState<string>('all');
+  const [messageSort, setMessageSort] = useState<'time' | 'agent'>('time');
+
+  // 左侧菜单折叠状态
+  const [leftPanelCollapsed, setLeftPanelCollapsed] = useState(false);
+  const [qaConfigCollapsed, setQaConfigCollapsed] = useState(false);
+  const [agentListCollapsed, setAgentListCollapsed] = useState(false);
+
+  // 多智能体协同 - 智能体选择状态
+  const [showAgentSelector, setShowAgentSelector] = useState(false);
+  const [showSceneSelector, setShowSceneSelector] = useState(false);
+  const [selectedSceneTemplate, setSelectedSceneTemplate] = useState<SceneTemplate | null>(null);
+
+  // 过滤智能体
+  const filteredAgents = agents.filter(agent =>
+    agent.name.toLowerCase().includes(agentSearchQuery.toLowerCase()) ||
+    agent.category.toLowerCase().includes(agentSearchQuery.toLowerCase()) ||
+    agent.tags.some(tag => tag.toLowerCase().includes(agentSearchQuery.toLowerCase()))
+  );
+
+  // 多智能体协同分析处理函数
+  const handleMultiAgentSend = () => {
+    if (!inputValue.trim()) return;
+
+    setIsMultiAgentLoading(true);
+    const targets = sendTarget === 'all' ? selectedMultiAgents : selectedMultiAgents.filter(a => a.id === sendTarget);
+
+    // 添加用户消息到消息流
+    const userMessageId = `user-${Date.now()}`;
+    const userMessage: MultiAgentMessage = {
+      id: userMessageId,
+      type: 'user',
+      content: inputValue,
+      timestamp: new Date(),
+    };
+    setMultiAgentMessages(prev => [...prev, userMessage]);
+
+    // 为每个目标智能体创建响应
+    const newResponses: AgentResponse[] = targets.map((agent, idx) => ({
+      id: `${Date.now()}-${agent.id}`,
+      agentId: agent.id,
+      agentName: agent.name,
+      agentCategory: agent.category,
+      status: 'responding' as const,
+      coreJudgment: '分析中...',
+      content: '',
+      timestamp: new Date(),
+    }));
+
+    setAgentResponses(prev => [...prev, ...newResponses]);
+    setInputValue('');
+
+    // 模拟智能体响应
+    setTimeout(() => {
+      const completedResponses = targets.map((agent, idx) => {
+        const responses: Record<string, { core: string; content: string; summary: { key: string; value: string }[] }> = {
+          'audience-agent': {
+            core: '核心受众应优先聚焦18-25岁基层青年群体',
+            content: '从任务背景和活动语境看，核心传播对象应聚焦能够形成参与、表达与扩散的人群，年轻基层群体更符合当前任务目标。该群体活跃于社交媒体，对节日话题有天然共鸣，是实现传播裂变的关键。',
+            summary: [
+              { key: 'core_audience', value: '18-25岁基层青年' },
+              { key: 'secondary_audience', value: '25-30岁职场新人' },
+              { key: 'barriers', value: '表达门槛、品牌距离感' },
+            ],
+          },
+          'goal-agent': {
+            core: '目标应分为参与层和传播层两层设计',
+            content: '建议将五四青年节活动目标拆解为两个层次：参与层目标是引导青年参与活动并产生内容；传播层目标是鼓励青年主动分享传播，形成话题裂变。两层目标相互关联，传播层目标的达成依赖于参与层的体验设计。',
+            summary: [
+              { key: '参与目标', value: '引导10000+青年参与' },
+              { key: '传播目标', value: '产生5000+UGC内容' },
+              { key: '核心KPI', value: '话题阅读量突破500万' },
+            ],
+          },
+          'behavior-agent': {
+            core: '用户行为路径应设计为"触发-参与-分享"三阶段',
+            content: '基于对年轻用户行为模式的分析，建议设计"触发-参与-分享"的完整行为路径。触发阶段通过话题挑战赛引发兴趣；参与阶段通过互动任务降低门槛；分享阶段通过激励机制促进主动传播。',
+            summary: [
+              { key: '触发机制', value: '话题挑战赛' },
+              { key: '参与路径', value: '任务闯关+创作征集' },
+              { key: '分享激励', value: '荣誉体系+实物奖励' },
+            ],
+          },
+          'narrative-agent': {
+            core: '叙事建议采用"真实青年故事"为主线',
+            content: '建议采用纪实风格的叙事策略，讲述真实青年人物的故事，而非虚构的营销叙事。通过真实故事的感染力和共鸣感，提升青年群体对活动的认同和参与意愿。',
+            summary: [
+              { key: '叙事风格', value: '纪实风格' },
+              { key: '故事原型', value: '真实青年人物' },
+              { key: '情感基调', value: '正向、热血、有共鸣' },
+            ],
+          },
+          'risk-agent': {
+            core: '主要风险在于话题敏感性和UGC内容合规',
+            content: '需要关注两方面风险：一是政治敏感话题的把控，需严格审核所有内容；二是UGC内容可能带来的舆论风险。建议建立完善的内容审核机制和应急预案。',
+            summary: [
+              { key: '风险类型', value: '内容合规风险' },
+              { key: '风险等级', value: '中等' },
+              { key: '应对策略', value: '前置审核+应急预案' },
+            ],
+          },
+        };
+
+        const mockData = responses[agent.id] || {
+          core: '该智能体已完成分析',
+          content: '基于专业能力进行了深入分析。',
+          summary: [{ key: '分析结论', value: '待补充' }],
+        };
+
+        const responseId = `${Date.now()}-${agent.id}`;
+
+        // 添加智能体回答到消息流
+        const agentMessage: MultiAgentMessage = {
+          id: responseId,
+          type: 'agent',
+          agentName: agent.name,
+          content: `${mockData.core}\n\n${mockData.content}`,
+          timestamp: new Date(),
+        };
+        setMultiAgentMessages(prev => [...prev, agentMessage]);
+
+        return {
+          id: responseId,
+          agentId: agent.id,
+          agentName: agent.name,
+          agentCategory: agent.category,
+          status: 'completed' as const,
+          coreJudgment: mockData.core,
+          content: mockData.content,
+          structuredSummary: mockData.summary,
+          timestamp: new Date(),
+        };
+      });
+
+      setAgentResponses(prev => {
+        const existing = prev.filter(r => !targets.find(t => `${Date.now()}-${t.id}`.includes(r.id)));
+        return [...existing, ...completedResponses];
+      });
+      setIsMultiAgentLoading(false);
+    }, 1500);
+  };
+
+  const handleAdoptResponse = (responseId: string) => {
+    const response = agentResponses.find(r => r.id === responseId);
+    if (response) {
+      setAdoptedViews(prev => [...prev, {
+        id: `adopted-${Date.now()}`,
+        agentName: response.agentName,
+        content: response.coreJudgment,
+        timestamp: new Date(),
+      }]);
+      setAgentResponses(prev => prev.map(r =>
+        r.id === responseId ? { ...r, status: 'adopted' as const } : r
+      ));
+    }
+  };
+
+  const handlePendingConfirm = (responseId: string) => {
+    setAgentResponses(prev => prev.map(r =>
+      r.id === responseId ? { ...r, status: 'pending-confirm' as const } : r
+    ));
+  };
+
+  const handleWriteToReport = (responseId: string) => {
+    const response = agentResponses.find(r => r.id === responseId);
+    if (response) {
+      setSummaryDraft(prev => ({
+        ...prev,
+        sections: [...prev.sections, {
+          title: `${response.agentName}分析结论`,
+          content: response.coreJudgment + '\n\n' + response.content,
+        }],
+      }));
+    }
+  };
+
+  const handleGenerateSummary = () => {
+    const summaryPoints = agentResponses
+      .filter(r => r.status === 'completed' || r.status === 'adopted')
+      .map(r => `- ${r.agentName}：${r.coreJudgment}`);
+
+    setSummaryDraft(prev => ({
+      ...prev,
+      sections: [
+        { title: '任务背景', content: taskInfo.name },
+        { title: '参与智能体', content: selectedMultiAgents.map(a => a.name).join('、') },
+        { title: '综合结论', content: summaryPoints.join('\n') },
+        { title: '待确认问题', content: pendingQuestions.map(q => `- ${q.content}`).join('\n') || '无' },
+      ],
+    }));
+  };
+
+  const handleExportReport = () => {
+    alert('报告导出功能开发中...');
+  };
+
+  const handleSaveMultiAgentRecord = () => {
+    alert('协同分析记录已保存');
+  };
+
+  const handleTransferToScene = () => {
+    alert('转场景任务功能开发中...');
+  };
+
+  const handleMultiAgentFollowUp = (agentId: string) => {
+    setSendTarget(agentId);
+  };
+
+  // 添加智能体到协同分析
+  const handleAddAgent = (agent: Agent) => {
+    if (!selectedMultiAgents.find(a => a.id === agent.id)) {
+      setSelectedMultiAgents([...selectedMultiAgents, agent]);
+    }
+    setShowAgentSelector(false);
+  };
+
+  // 从协同分析中移除智能体
+  const handleRemoveAgent = (agentId: string) => {
+    setSelectedMultiAgents(selectedMultiAgents.filter(a => a.id !== agentId));
+    // 同时清除该智能体的响应
+    setAgentResponses(prev => prev.filter(r => r.agentId !== agentId));
+    setMultiAgentMessages(prev => prev.filter(msg => {
+      const response = agentResponses.find(r => r.agentId === agentId);
+      return !response || msg.agentName !== agents.find(a => a.id === agentId)?.name;
+    }));
+  };
+
+  // 应用场景模板
+  const handleApplySceneTemplate = (template: SceneTemplate) => {
+    const templateAgents = agents.filter(a => template.agentIds.includes(a.id));
+    setSelectedMultiAgents(templateAgents);
+    setSelectedSceneTemplate(template);
+    // 清空当前分析数据
+    setAgentResponses([]);
+    setMultiAgentMessages([]);
+    setAdoptedViews([]);
+    setPendingQuestions([]);
+    setSummaryDraft({ title: `${template.name}分析报告`, sections: [] });
+    setTaskInfo({
+      name: template.name,
+      goal: template.description,
+      status: '准备中',
+      background: template.description,
+      keyQuestions: [],
+    });
+    setShowSceneSelector(false);
+  };
+
+  // 获取未选择的智能体列表
+  const availableAgentsForSelection = agents.filter(
+    agent => !selectedMultiAgents.find(a => a.id === agent.id)
+  );
+
+  // 处理新建问答 - 清空会话并切换到指定类型
+  const handleNewQA = (targetProvider?: QAProvider) => {
+    // 清空对话
+    setMessages([]);
+    setCompareResult(null);
+    setInputValue('');
+
+    // 切换到指定类型
+    if (targetProvider) {
+      setQaProvider(targetProvider);
+    }
+  };
+
+  const handleSend = () => {
+    if (!inputValue.trim()) return;
+
+    setIsLoading(true);
+
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: inputValue,
+      timestamp: new Date(),
+    };
+
+    // 保存用户消息到聊天记录
+    addMessage('user', inputValue, qaProvider === 'agent' ? 'agent' : 'general', qaProvider === 'agent' ? selectedAgent.name : undefined);
+
+    setMessages([...messages, userMessage]);
+    setInputValue('');
+
+    setTimeout(() => {
+      const responseContent = qaProvider === 'agent'
+        ? `基于${selectedAgent.name}的专业能力，我来为您分析：\n\n根据您的问题，我识别到核心受众特征如下：\n\n**核心受众识别**：\n- 主要年龄段：25-35岁\n- 职业特征：都市白领\n- 消费能力：中高端\n- 关注点：品质生活、个人成长\n\n**关键特质**：\n1. 追求个性化表达\n2. 注重社交认同\n3. 愿意为品质付费\n\n以上分析是否满足您的需求？如需调整维度，请继续补充信息。`
+        : `RAG（检索增强生成）技术的工作原理主要包括以下几个步骤：\n\n1. **检索阶段**：系统首先将用户问题转换为查询向量，在知识库中进行相似度搜索。\n\n2. **增强阶段**：将检索到的相关文档与原始问题组合。\n\n3. **生成阶段**：将增强后的提示词发送给大语言模型。`;
+
+      const response: Message = {
+        id: (Date.now() + 1).toString(),
+        role: 'assistant',
+        content: responseContent,
+        timestamp: new Date(),
+        sources: qaProvider === 'agent' ? undefined : [
+          { title: 'RAG技术白皮书', type: 'PDF', snippet: 'RAG是一种结合检索和生成的技术架构...' },
+        ],
+        agentName: qaProvider === 'agent' ? selectedAgent.name : undefined,
+        skills: qaProvider === 'agent' ? selectedAgent.skills : undefined,
+        dataSources: qaProvider === 'agent' ? selectedAgent.dataSources : undefined,
+      };
+
+      // 保存助手回复到聊天记录
+      addMessage('assistant', responseContent, qaProvider === 'agent' ? 'agent' : 'general', qaProvider === 'agent' ? selectedAgent.name : undefined);
+
+      setMessages(prev => [...prev, response]);
+      setIsLoading(false);
+      setSearchProcess({
+        currentMode: qaMode === 'single-round' ? '单轮RAG' : qaMode === 'multi-round' ? '多轮RAG' : '深度检索',
+        rounds: qaMode === 'multi-round' ? 3 : 1,
+        hits: 5,
+        queryRewrite: qaMode === 'deep-search' ? '原问题→分解子问题→独立检索→综合回答' : '',
+      });
+    }, 1500);
+  };
+
+  const handleCompare = () => {
+    if (!inputValue.trim()) return;
+
+    setIsLoading(true);
+
+    setTimeout(() => {
+      setCompareResult({
+        leftMode: compareLeftMode,
+        rightMode: compareRightMode,
+        leftContent: '单轮RAG回答：直接检索并生成答案，响应速度快，但可能遗漏跨文档的关联信息。适用于简单事实查询。',
+        rightContent: '深度检索回答：通过问题分解、多轮检索和综合分析，提供更全面的答案。包含详细的推理过程和更多的引用来源。',
+        differences: {
+          consensus: '两种方式都使用向量检索技术，都能引用原始文档',
+          differences: '深度检索采用多轮查询改写，覆盖更全面',
+          leftAdvantage: '响应更快，资源消耗更低',
+          rightAdvantage: '答案更完整，引用更充分',
+        },
+      });
+      setIsLoading(false);
+    }, 2000);
+  };
+
+  const handleSaveRecord = () => {
+    alert('问答记录已保存');
+  };
+
+  // 新建问答 - 通用/智能体模式
+  const handleStartNewQA = () => {
+    // 如果有现有消息，弹出确认对话框
+    if (messages.length > 0 || compareResult) {
+      setShowNewQADialog(true);
+      return;
+    }
+
+    // 直接新建 - 清空会话
+    performNewQA();
+  };
+
+  // 执行新建问答
+  const performNewQA = () => {
+    // 清空对话
+    setMessages([]);
+    setCompareResult(null);
+    setInputValue('');
+    setShowNewQADialog(false);
+  };
+
+  // 保存并新建
+  const handleSaveAndNewQA = () => {
+    handleSaveRecord();
+    performNewQA();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      if (viewMode === 'compare') {
+        handleCompare();
+      } else {
+        handleSend();
+      }
+    }
+  };
+
+  // 获取模式标签
+  const getModeLabel = (mode: QAMode) => {
+    switch (mode) {
+      case 'single-round': return '单轮RAG';
+      case 'multi-round': return '多轮RAG';
+      case 'deep-search': return '深度检索';
+    }
+  };
+
+  // 空状态快捷入口
+  const QuickStartCards = () => (
+    <div className="mt-6 grid grid-cols-3 gap-3 max-w-2xl">
+      <button
+        onClick={() => handleNewQA('general')}
+        className={`p-4 rounded-xl border-2 border-dashed transition-all text-left ${
+          isDark
+            ? 'border-slate-600 hover:border-blue-500 bg-slate-800/50 hover:bg-blue-600/10'
+            : 'border-gray-300 hover:border-red-400 bg-gray-50 hover:bg-red-50'
+        }`}
+      >
+        <div className="flex items-center gap-3">
+          <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
+            isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-red-100 text-red-500'
+          }`}>
+            <CircleHelp className="w-5 h-5" />
+          </div>
+          <div>
+            <div className={`font-medium text-sm ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              通用问答
+            </div>
+            <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              基于知识库回答
+            </div>
+          </div>
+        </div>
+      </button>
+      <button
+        onClick={() => handleNewQA('agent')}
+        className={`p-4 rounded-xl border-2 border-dashed transition-all text-left ${
+          isDark
+            ? 'border-slate-600 hover:border-purple-500 bg-slate-800/50 hover:bg-purple-600/10'
+            : 'border-gray-300 hover:border-purple-400 bg-gray-50 hover:bg-purple-50'
+        }`}
+      >
+        <div className="flex items-center gap-3">
+          <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
+            isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-500'
+          }`}>
+            <Bot className="w-5 h-5" />
+          </div>
+          <div>
+            <div className={`font-medium text-sm ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              智能体问答
+            </div>
+            <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              专业智能体服务
+            </div>
+          </div>
+        </div>
+      </button>
+      <button
+        onClick={() => handleNewQA('multi-agent')}
+        className={`p-4 rounded-xl border-2 border-dashed transition-all text-left ${
+          isDark
+            ? 'border-slate-600 hover:border-green-500 bg-slate-800/50 hover:bg-green-600/10'
+            : 'border-gray-300 hover:border-green-400 bg-gray-50 hover:bg-green-50'
+        }`}
+      >
+        <div className="flex items-center gap-3">
+          <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
+            isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-500'
+          }`}>
+            <Layers className="w-5 h-5" />
+          </div>
+          <div>
+            <div className={`font-medium text-sm ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              多智能体协同
+            </div>
+            <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              多视角并行分析
+            </div>
+          </div>
+        </div>
+      </button>
+    </div>
+  );
+
+  return (
+    <div className={`h-[calc(100vh-120px)] flex theme-bg rounded-xl overflow-hidden ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+      {/* 左侧面板 - MiniMax风格 - 可折叠 */}
+      <div className={`transition-all duration-300 flex-shrink-0 flex flex-col overflow-hidden ${leftPanelCollapsed ? 'w-12' : 'w-80'} ${isDark ? 'bg-slate-800/30' : 'bg-gray-50/50'} ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+        {/* 顶部标题 */}
+        <div className={`px-3 py-3 border-b flex items-center justify-between ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+          {!leftPanelCollapsed && (
+            <div className="flex items-center gap-2">
+              <Bot className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+              <h2 className={`font-medium text-sm ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                {qaProvider === 'agent' ? '智能体列表' : '问答配置'}
+              </h2>
+            </div>
+          )}
+          <button
+            onClick={() => setLeftPanelCollapsed(!leftPanelCollapsed)}
+            className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-200 text-gray-500'}`}
+            title={leftPanelCollapsed ? '展开菜单' : '收起菜单'}
+          >
+            {leftPanelCollapsed ? (
+              <ChevronRight className="w-4 h-4" />
+            ) : (
+              <ChevronDown className="w-4 h-4" />
+            )}
+          </button>
+        </div>
+
+        {/* 左侧面板折叠内容 */}
+        {!leftPanelCollapsed && (
+          <>
+            {/* 通用问答配置 */}
+        {qaProvider === 'general' && (
+          <div className="flex-1 overflow-y-auto p-4 space-y-6 custom-scrollbar">
+            {/* 问答模式选择 - 卡片式 */}
+            <div>
+              <h3 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                问答模式
+              </h3>
+              <div className="space-y-2">
+                {[
+                  { value: 'single-round', label: '单轮RAG', icon: Sparkles, desc: '快速直接' },
+                  { value: 'multi-round', label: '多轮RAG', icon: Brain, desc: '深入理解' },
+                  { value: 'deep-search', label: '深度检索', icon: BookOpen, desc: '全面分析' },
+                ].map((mode) => (
+                  <button
+                    key={mode.value}
+                    onClick={() => setQaMode(mode.value as QAMode)}
+                    className={`w-full flex items-center gap-3 p-3 rounded-xl transition-all text-left ${
+                      qaMode === mode.value
+                        ? isDark
+                          ? 'bg-blue-600/20 border-2 border-blue-500'
+                          : 'bg-red-50 border-2 border-red-300'
+                        : isDark
+                          ? 'bg-slate-700/50 border border-transparent hover:bg-slate-700'
+                          : 'bg-white border border-gray-200 hover:border-gray-300'
+                    }`}
+                  >
+                    <div className={`w-9 h-9 rounded-lg flex items-center justify-center ${
+                      qaMode === mode.value
+                        ? isDark
+                          ? 'bg-blue-600 text-white'
+                          : 'bg-red-500 text-white'
+                        : isDark
+                          ? 'bg-slate-600 text-slate-300'
+                          : 'bg-gray-100 text-gray-600'
+                    }`}>
+                      <mode.icon className="w-4 h-4" />
+                    </div>
+                    <div className="flex-1">
+                      <div className={`text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                        {mode.label}
+                      </div>
+                      <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                        {mode.desc}
+                      </div>
+                    </div>
+                    {qaMode === mode.value && (
+                      <CheckCircle className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+                    )}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* 知识范围 */}
+            <div>
+              <h3 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                知识范围
+              </h3>
+              <div className={`p-3 rounded-xl space-y-2 ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                {[
+                  { value: 'all', label: '全部知识源' },
+                  { value: 'specific-kb', label: '指定知识库' },
+                  { value: 'specific-domain', label: '指定资源域' },
+                ].map((option) => (
+                  <label
+                    key={option.value}
+                    className="flex items-center gap-2 py-1.5 cursor-pointer"
+                  >
+                    <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center transition-all ${
+                      knowledgeScope === option.value
+                        ? isDark
+                          ? 'border-blue-500 bg-blue-500'
+                          : 'border-red-500 bg-red-500'
+                        : isDark
+                          ? 'border-slate-500'
+                          : 'border-gray-300'
+                    }`}>
+                      {knowledgeScope === option.value && (
+                        <div className="w-1.5 h-1.5 rounded-full bg-white" />
+                      )}
+                    </div>
+                    <input
+                      type="radio"
+                      name="knowledge-scope"
+                      checked={knowledgeScope === option.value}
+                      onChange={() => setKnowledgeScope(option.value as any)}
+                      className="sr-only"
+                    />
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      {option.label}
+                    </span>
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            {/* 回答偏好 */}
+            <div>
+              <h3 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                回答偏好
+              </h3>
+              <div className={`p-3 rounded-xl space-y-2 ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                {[
+                  { checked: showSources, onChange: () => setShowSources(!showSources), label: '展示引用来源' },
+                  { checked: showProcess, onChange: () => setShowProcess(!showProcess), label: '展示检索过程' },
+                ].map((item, idx) => (
+                  <label key={idx} className="flex items-center gap-2 py-1.5 cursor-pointer">
+                    <div className={`w-4 h-4 rounded-md border-2 flex items-center justify-center transition-all ${
+                      item.checked
+                        ? isDark
+                          ? 'border-blue-500 bg-blue-500'
+                          : 'border-red-500 bg-red-500'
+                        : isDark
+                          ? 'border-slate-500'
+                          : 'border-gray-300'
+                    }`}>
+                      {item.checked && (
+                        <svg className="w-2.5 h-2.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                        </svg>
+                      )}
+                    </div>
+                    <input
+                      type="checkbox"
+                      checked={item.checked}
+                      onChange={item.onChange}
+                      className="sr-only"
+                    />
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      {item.label}
+                    </span>
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            {/* 检索过程 */}
+            {showProcess && messages.length > 0 && (
+              <div>
+                <h3 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                  检索过程
+                </h3>
+                <div className={`p-3 rounded-xl space-y-2 ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>当前模式</span>
+                    <span className={`text-xs font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                      {searchProcess.currentMode}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>检索轮次</span>
+                    <span className={`text-xs ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{searchProcess.rounds}</span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>命中数</span>
+                    <span className={`text-xs ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{searchProcess.hits}</span>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* 智能体问答配置 - MiniMax单专家风格优化 */}
+        {qaProvider === 'agent' && (
+          <div className="flex-1 overflow-hidden flex flex-col">
+            {/* 简洁的智能体选择区 */}
+            <div className="px-4 py-4">
+              {/* 当前选中智能体 - 大卡片突出显示 */}
+              <div className={`p-4 rounded-2xl mb-4 ${isDark ? 'bg-gradient-to-br from-blue-600/20 to-purple-600/20 border border-blue-500/30' : 'bg-gradient-to-br from-blue-50 to-purple-50 border border-blue-200'}`}>
+                <div className="flex items-center gap-3 mb-3">
+                  <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
+                    isDark ? 'bg-blue-600/40 text-blue-300' : 'bg-blue-500/20 text-blue-600'
+                  }`}>
+                    <Bot className="w-6 h-6" />
+                  </div>
+                  <div className="flex-1">
+                    <div className={`font-semibold text-base ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                      {selectedAgent.name}
+                    </div>
+                    <div className={`text-xs mt-0.5 ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                      {selectedAgent.category}
+                    </div>
+                  </div>
+                </div>
+                <div className={`text-sm leading-relaxed ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {selectedAgent.description}
+                </div>
+              </div>
+
+              {/* 智能体列表 - MiniMax风格网格 */}
+              <div className={`text-xs font-medium mb-2 flex items-center gap-1.5 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                <Sparkles className="w-3 h-3" />
+                选择其他智能体
+              </div>
+              <div className="grid grid-cols-2 gap-2">
+                {agents.slice(0, 6).map((agent) => (
+                  <button
+                    key={agent.id}
+                    onClick={() => setSelectedAgent(agent)}
+                    className={`p-2.5 rounded-xl text-left transition-all ${
+                      selectedAgent.id === agent.id
+                        ? isDark
+                          ? 'bg-blue-600/30 border border-blue-500'
+                          : 'bg-blue-100 border border-blue-300'
+                        : isDark
+                          ? 'bg-slate-700/50 border border-transparent hover:border-slate-600'
+                          : 'bg-white border border-gray-200 hover:border-gray-300'
+                    }`}
+                  >
+                    <div className="flex items-center gap-2">
+                      <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
+                        selectedAgent.id === agent.id
+                          ? isDark ? 'bg-blue-600 text-white' : 'bg-blue-500 text-white'
+                          : isDark ? 'bg-slate-600 text-slate-300' : 'bg-gray-100 text-gray-500'
+                      }`}>
+                        <Bot className="w-4 h-4" />
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <div className={`text-xs font-medium truncate ${isDark ? 'text-white' : 'text-gray-800'}`}>
+                          {agent.name}
+                        </div>
+                        <div className={`text-xs truncate ${isDark ? 'text-slate-400' : 'text-gray-400'}`}>
+                          {agent.category}
+                        </div>
+                      </div>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* 智能体能力标签 - 底部展示 */}
+            <div className={`mt-auto p-4 border-t ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-gray-100 bg-gray-50/50'}`}>
+              {/* 技能标签 */}
+              <div className="mb-3">
+                <div className={`text-xs font-medium mb-2 flex items-center gap-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                  <Sparkles className="w-3 h-3" />
+                  核心技能
+                </div>
+                <div className="flex flex-wrap gap-1">
+                  {selectedAgent.skills.slice(0, 4).map((skill, idx) => (
+                    <span
+                      key={idx}
+                      className={`px-2 py-1 rounded-lg text-xs font-medium ${
+                        isDark ? 'bg-blue-600/20 text-blue-400 border border-blue-500/30' : 'bg-blue-50 text-blue-600 border border-blue-200'
+                      }`}
+                    >
+                      {skill}
+                    </span>
+                  ))}
+                </div>
+              </div>
+              {/* 数据源标签 */}
+              <div>
+                <div className={`text-xs font-medium mb-2 flex items-center gap-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                  <Database className="w-3 h-3" />
+                  数据源
+                </div>
+                <div className="flex flex-wrap gap-1">
+                  {selectedAgent.dataSources.slice(0, 3).map((source, idx) => (
+                    <span
+                      key={idx}
+                      className={`px-2 py-1 rounded-lg text-xs ${
+                        isDark ? 'bg-green-600/20 text-green-400 border border-green-500/30' : 'bg-green-50 text-green-600 border border-green-200'
+                      }`}
+                    >
+                      {source}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+            {/* 底部按钮 - 所有模式通用 */}
+            <div className={`p-4 border-t ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+              <button
+                onClick={() => onNavigate('qa-records')}
+                className={`w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium transition-all ${
+                  isDark
+                    ? 'bg-slate-700/50 text-slate-300 hover:bg-slate-600/50'
+                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                }`}
+              >
+                <History className="w-4 h-4" />
+                历史记录
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* 右侧面板 - 对话区 */}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* 顶部模式切换 */}
+        <div className={`px-6 py-3 border-b flex items-center justify-between ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'}`}>
+          <QATypeSwitch
+            qaProvider={qaProvider}
+            setQaProvider={setQaProvider}
+            selectedAgentName={selectedAgent.name}
+            viewMode={viewMode}
+            setViewMode={setViewMode}
+          />
+
+          {/* 右侧 - 新建问答按钮（仅通用/智能体模式显示） */}
+          {qaProvider !== 'multi-agent' && (
+            <button
+              onClick={handleStartNewQA}
+              className={`px-4 py-2 rounded-xl text-sm font-medium transition-all flex items-center gap-2 ${
+                isDark
+                  ? 'bg-slate-700/50 hover:bg-slate-600 text-slate-300 border border-slate-600'
+                  : 'bg-white hover:bg-gray-100 text-gray-700 border border-gray-200'
+              }`}
+            >
+              <Plus className="w-4 h-4" />
+              新建问答
+            </button>
+          )}
+        </div>
+
+        {/* 消息区域 */}
+        <div className="flex-1 overflow-y-auto p-0 custom-scrollbar">
+          {/* 多智能体协同分析面板 - 正确设计 */}
+          {qaProvider === 'multi-agent' && (
+            <div className="h-full flex flex-col">
+              {/* 顶部标题栏 - 简洁版 */}
+              <div className={`flex-shrink-0 px-6 py-4 border-b ${isDark ? 'bg-slate-800/50 border-slate-700/50' : 'bg-white border-gray-200'}`}>
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-4">
+                    <button
+                      onClick={() => onNavigate('task-management')}
+                      className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-all ${
+                        isDark ? 'bg-slate-700/50 hover:bg-slate-600/50 text-slate-300' : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
+                      }`}
+                    >
+                      <ArrowLeft className="w-4 h-4" />
+                      返回
+                    </button>
+                    <div className="flex items-center gap-3">
+                      <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${isDark ? 'bg-green-600/20' : 'bg-green-100'}`}>
+                        <Layers className={`w-5 h-5 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
+                      </div>
+                      <div>
+                        <h2 className={`font-bold text-lg ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                          多智能体协同分析
+                        </h2>
+                        <div className={`flex items-center gap-3 mt-0.5 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                          <span className="font-medium">{taskInfo.name}</span>
+                          <span>•</span>
+                          <span>{taskInfo.goal}</span>
+                          <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
+                            isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-600'
+                          }`}>
+                            {taskInfo.status}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={handleGenerateSummary}
+                      className={`px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
+                        isDark ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-blue-500 hover:bg-blue-600 text-white'
+                      }`}
+                    >
+                      <Sparkles className="w-4 h-4" />
+                      生成汇总
+                    </button>
+                    <button
+                      onClick={handleExportReport}
+                      className={`px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
+                        isDark ? 'bg-slate-700 hover:bg-slate-600 text-white' : 'bg-gray-200 hover:bg-gray-300 text-gray-700'
+                      }`}
+                    >
+                      <Download className="w-4 h-4" />
+                      导出报告
+                    </button>
+                    <button
+                      onClick={handleSaveMultiAgentRecord}
+                      className={`px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
+                        isDark ? 'bg-slate-700 hover:bg-slate-600 text-white' : 'bg-gray-200 hover:bg-gray-300 text-gray-700'
+                      }`}
+                    >
+                      <Save className="w-4 h-4" />
+                      保存记录
+                    </button>
+                    <button
+                      onClick={() => alert('分析已结束')}
+                      className={`px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
+                        isDark ? 'bg-red-600/80 hover:bg-red-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                      }`}
+                    >
+                      <X className="w-4 h-4" />
+                      结束分析
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              {/* 三栏布局主体 */}
+              <div className="flex-1 flex min-h-0">
+                {/* 左侧：参与智能体列表 */}
+                <div className={`w-72 flex-shrink-0 flex flex-col border-r overflow-hidden ${
+                  isDark ? 'bg-slate-800/30 border-slate-700/50' : 'bg-gray-50/50 border-gray-200'
+                }`}>
+                  {/* 场景模板选择 */}
+                  <div className={`p-3 border-b ${isDark ? 'border-slate-700/50' : 'border-gray-200'}`}>
+                    <div className="relative">
+                      <button
+                        onClick={() => { setShowSceneSelector(!showSceneSelector); setShowAgentSelector(false); }}
+                        className={`w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-all ${
+                          selectedSceneTemplate
+                            ? (isDark ? 'bg-green-600/20 border border-green-500/50 text-green-400' : 'bg-green-50 border border-green-200 text-green-600')
+                            : (isDark ? 'bg-slate-700/50 border border-transparent hover:border-slate-600 text-slate-300' : 'bg-white border border-gray-200 hover:border-gray-300 text-gray-700')
+                        }`}
+                      >
+                        <div className="flex items-center gap-2">
+                          <Layers className="w-4 h-4" />
+                          <span>{selectedSceneTemplate ? selectedSceneTemplate.name : '应用场景模板'}</span>
+                        </div>
+                        <ChevronDown className={`w-4 h-4 transition-transform ${showSceneSelector ? 'rotate-180' : ''}`} />
+                      </button>
+                      {/* 场景模板选择下拉 */}
+                      {showSceneSelector && (
+                        <div className={`absolute top-full left-0 right-0 mt-1 z-20 rounded-lg shadow-xl overflow-hidden ${
+                          isDark ? 'bg-slate-800 border border-slate-700' : 'bg-white border border-gray-200'
+                        }`}>
+                          <div className={`p-2 text-xs font-medium ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                            选择场景模板自动配置智能体
+                          </div>
+                          {sceneTemplates.map((template) => (
+                            <button
+                              key={template.id}
+                              onClick={() => handleApplySceneTemplate(template)}
+                              className={`w-full px-3 py-2 text-left hover:${
+                                isDark ? 'bg-slate-700/50' : 'bg-gray-50'
+                              } ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-gray-50'}`}
+                            >
+                              <div className={`text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>{template.name}</div>
+                              <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{template.description}</div>
+                            </button>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* 智能体列表头部 */}
+                  <div className="flex items-center justify-between px-4 py-3">
+                    <h3 className={`text-sm font-medium flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                      <Users className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                      参与智能体 ({selectedMultiAgents.length})
+                    </h3>
+                    <button
+                      onClick={() => { setShowAgentSelector(!showAgentSelector); setShowSceneSelector(false); }}
+                      className={`p-1.5 rounded-lg transition-all ${
+                        isDark ? 'hover:bg-slate-700 text-slate-400 hover:text-white' : 'hover:bg-gray-200 text-gray-500 hover:text-gray-700'
+                      }`}
+                      title="添加智能体"
+                    >
+                      <Plus className="w-4 h-4" />
+                    </button>
+                  </div>
+
+                  {/* 智能体选择下拉 - 按五大类别分组 */}
+                  {showAgentSelector && (
+                    <div className={`mx-3 mb-2 p-3 rounded-lg ${
+                      isDark ? 'bg-slate-700/50 border border-slate-600' : 'bg-white border border-gray-200'
+                    }`}>
+                      <div className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                        选择要添加的智能体
+                      </div>
+                      {availableAgentsForSelection.length === 0 ? (
+                        <div className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>所有智能体已添加</div>
+                      ) : (
+                        <div className="max-h-64 overflow-y-auto space-y-3">
+                          {/* 按类别分组显示 */}
+                          {['规划类', 'MNTY类', '效果PG类', '知识分析类', '协同管理类'].map((category) => {
+                            const categoryAgents = availableAgentsForSelection.filter(a => a.category === category);
+                            if (categoryAgents.length === 0) return null;
+                            return (
+                              <div key={category}>
+                                <div className={`text-xs font-medium mb-1.5 flex items-center gap-1.5 ${
+                                  category === '规划类' ? (isDark ? 'text-blue-400' : 'text-blue-600') :
+                                  category === 'MNTY类' ? (isDark ? 'text-purple-400' : 'text-purple-600') :
+                                  category === '效果PG类' ? (isDark ? 'text-amber-400' : 'text-amber-600') :
+                                  category === '知识分析类' ? (isDark ? 'text-cyan-400' : 'text-cyan-600') :
+                                  (isDark ? 'text-green-400' : 'text-green-600')
+                                }`}>
+                                  {category === '规划类' && <Target className="w-3 h-3" />}
+                                  {category === 'MNTY类' && <Brain className="w-3 h-3" />}
+                                  {category === '效果PG类' && <TrendingUp className="w-3 h-3" />}
+                                  {category === '知识分析类' && <Database className="w-3 h-3" />}
+                                  {category === '协同管理类' && <Users className="w-3 h-3" />}
+                                  {category}
+                                </div>
+                                <div className="space-y-1">
+                                  {categoryAgents.map((agent) => (
+                                    <button
+                                      key={agent.id}
+                                      onClick={() => handleAddAgent(agent)}
+                                      className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-lg text-left transition-all ${
+                                        isDark ? 'hover:bg-slate-600/50' : 'hover:bg-gray-100'
+                                      }`}
+                                    >
+                                      <Bot className={`w-3.5 h-3.5 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
+                                      <div className="flex-1 min-w-0">
+                                        <div className={`text-xs font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>{agent.name}</div>
+                                        <div className={`text-xs truncate ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{agent.tags.slice(0, 2).join(' / ')}</div>
+                                      </div>
+                                      <Plus className={`w-3.5 h-3.5 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                                    </button>
+                                  ))}
+                                </div>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {/* 参与智能体列表 */}
+                  <div className="flex-1 overflow-y-auto px-3 pb-3 custom-scrollbar">
+                    <div className="space-y-2">
+                      {selectedMultiAgents.map((agent) => {
+                        const response = agentResponses.find(r => r.agentId === agent.id);
+                        const status = response?.status || 'pending';
+                        return (
+                          <div key={agent.id} className={`p-2.5 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-white border border-gray-200'}`}>
+                            <div className="flex items-center justify-between">
+                              <div className="flex items-center gap-2 flex-1 min-w-0">
+                                <Bot className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
+                                <div className="min-w-0 flex-1">
+                                  <div className={`text-sm font-medium truncate ${isDark ? 'text-white' : 'text-gray-900'}`}>{agent.name}</div>
+                                  <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{agent.category}</div>
+                                </div>
+                              </div>
+                              <div className="flex items-center gap-1.5">
+                                <span className={`px-2 py-0.5 rounded text-xs ${
+                                  status === 'pending' ? (isDark ? 'bg-slate-600/50 text-slate-400' : 'bg-gray-200 text-gray-500') :
+                                  status === 'responding' ? (isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-500') :
+                                  (isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-500')
+                                }`}>
+                                  {status === 'pending' ? '待回答' : status === 'responding' ? '回答中' : '已回答'}
+                                </span>
+                                <button
+                                  onClick={() => handleRemoveAgent(agent.id)}
+                                  className={`p-1 rounded transition-all ${
+                                    isDark ? 'hover:bg-slate-600 text-slate-500 hover:text-red-400' : 'hover:bg-gray-200 text-gray-400 hover:text-red-500'
+                                  }`}
+                                  title="移除智能体"
+                                >
+                                  <X className="w-3.5 h-3.5" />
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        );
+                      })}
+                      {selectedMultiAgents.length === 0 && (
+                        <div className={`text-center py-6 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                          <Bot className="w-8 h-8 mx-auto mb-2 opacity-50" />
+                          <p className="text-xs">请添加参与分析的智能体</p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* 历史记录入口 */}
+                  <div className={`p-4 border-t ${isDark ? 'border-slate-700/50' : 'border-gray-200'}`}>
+                    <button
+                      className={`w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium transition-all ${
+                        isDark ? 'bg-slate-700/50 hover:bg-slate-600/50 text-slate-300' : 'bg-white hover:bg-gray-100 text-gray-600 border border-gray-200'
+                      }`}
+                    >
+                      <History className="w-4 h-4" />
+                      查看历史记录
+                    </button>
+                  </div>
+                </div>
+
+                {/* 中间：问答消息流 */}
+                <div className="flex-1 flex flex-col min-h-0 bg-transparent">
+                  {/* 工具条 */}
+                  <div className={`flex-shrink-0 px-4 py-3 border-b items-center gap-3 ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-gray-200 bg-gray-50'}`}>
+                    <button className={`px-3 py-1.5 rounded-lg text-xs font-medium ${
+                      messageFilter === 'all' ? (isDark ? 'bg-green-600 text-white' : 'bg-green-500 text-white') : (isDark ? 'text-slate-400' : 'text-gray-500')
+                    }`} onClick={() => setMessageFilter('all')}>
+                      全部消息
+                    </button>
+                    <select
+                      value={agentMessageFilter}
+                      onChange={(e) => setAgentMessageFilter(e.target.value)}
+                      className={`px-2 py-1.5 rounded-lg text-xs border ${isDark ? 'bg-slate-700 border-slate-600 text-slate-300' : 'bg-white border-gray-200 text-gray-600'}`}
+                    >
+                      <option value="all">全部智能体</option>
+                      {selectedMultiAgents.map(agent => (
+                        <option key={agent.id} value={agent.id}>{agent.name}</option>
+                      ))}
+                    </select>
+                    <button className={`px-3 py-1.5 rounded-lg text-xs font-medium ${
+                      messageFilter === 'user' ? (isDark ? 'bg-green-600 text-white' : 'bg-green-500 text-white') : (isDark ? 'text-slate-400' : 'text-gray-500')
+                    }`} onClick={() => setMessageFilter('user')}>
+                      用户提问
+                    </button>
+                    <button className={`px-3 py-1.5 rounded-lg text-xs font-medium ${
+                      messageFilter === 'adopted' ? (isDark ? 'bg-green-600 text-white' : 'bg-green-500 text-white') : (isDark ? 'text-slate-400' : 'text-gray-500')
+                    }`} onClick={() => setMessageFilter('adopted')}>
+                      已采纳
+                    </button>
+                  </div>
+
+                  {/* 消息列表 */}
+                  <div className="flex-1 overflow-y-auto p-4 space-y-4 custom-scrollbar">
+                    {multiAgentMessages.length === 0 ? (
+                      <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                        <MessageSquare className="w-16 h-16 mb-4 opacity-30" />
+                        <p className="text-base font-medium mb-2">尚未开始提问</p>
+                        <p className="text-sm text-center max-w-md">
+                          请在底部输入你希望多个智能体分析的问题<br/>系统将按所选对象返回回答
+                        </p>
+                      </div>
+                    ) : (
+                      multiAgentMessages.map((msg) => {
+                        const isAdopted = msg.type === 'agent' && adoptedViews.some(v => v.agentName === msg.agentName);
+                        return (
+                          <div key={msg.id}>
+                            {msg.type === 'user' ? (
+                              <div className="flex gap-3 justify-end">
+                                <div className={`max-w-[70%] rounded-2xl px-4 py-3 ${isDark ? 'bg-blue-600 text-white' : 'bg-blue-500 text-white'}`}>
+                                  <div className={`text-xs mb-1 opacity-75`}>用户</div>
+                                  <p className="text-sm whitespace-pre-wrap">{msg.content}</p>
+                                </div>
+                                <div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-200 text-gray-600'}`}>
+                                  <div className="w-3 h-3 rounded-full bg-current" />
+                                </div>
+                              </div>
+                            ) : (
+                              <div className={`p-4 rounded-xl border ${isAdopted ? (isDark ? 'bg-green-600/10 border-green-500/30' : 'bg-green-50 border-green-200') : (isDark ? 'bg-slate-800/30 border-slate-700/50' : 'bg-white border-gray-200')}`}>
+                                <div className="flex items-center justify-between mb-3">
+                                  <div className="flex items-center gap-2">
+                                    <Bot className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
+                                    <span className={`text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>{msg.agentName}</span>
+                                    {isAdopted && (
+                                      <span className={`px-2 py-0.5 rounded text-xs font-medium ${isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-600'}`}>已采纳</span>
+                                    )}
+                                  </div>
+                                  <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{msg.timestamp.toLocaleTimeString()}</span>
+                                </div>
+                                <p className={`text-sm leading-relaxed whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{msg.content}</p>
+                                <div className="flex items-center gap-2 mt-3 pt-3 border-t border-opacity-30">
+                                  <button
+                                    onClick={() => handleAdoptResponse(msg.id)}
+                                    className={`px-3 py-1 rounded-lg text-xs font-medium flex items-center gap-1.5 ${
+                                      isAdopted ? (isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-600') : (isDark ? 'bg-slate-700/50 text-slate-300' : 'bg-gray-100 text-gray-600')
+                                    }`}
+                                  >
+                                    <CheckCircle className="w-3.5 h-3.5" />
+                                    采纳
+                                  </button>
+                                  <button className={`px-3 py-1 rounded-lg text-xs font-medium flex items-center gap-1.5 ${isDark ? 'bg-slate-700/50 text-slate-300' : 'bg-gray-100 text-gray-600'}`}>
+                                    <AlertCircle className="w-3.5 h-3.5" />
+                                    待确认
+                                  </button>
+                                  <button
+                                    onClick={() => { setSendTarget(msg.agentName || 'all'); setInputValue(''); }}
+                                    className={`px-3 py-1 rounded-lg text-xs font-medium flex items-center gap-1.5 ${isDark ? 'bg-slate-700/50 text-slate-300' : 'bg-gray-100 text-gray-600'}`}
+                                  >
+                                    <MessageCircle className="w-3.5 h-3.5" />
+                                    追问
+                                  </button>
+                                </div>
+                              </div>
+                            )}
+                          </div>
+                        );
+                      })
+                    )}
+                    {isMultiAgentLoading && (
+                      <div className="flex items-center gap-3 p-4">
+                        <RefreshCw className={`w-5 h-5 animate-spin ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
+                        <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>智能体正在分析中...</span>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* 底部统一输入区 */}
+                  <div className={`flex-shrink-0 p-4 border-t ${isDark ? 'bg-white/5 border-slate-700/50' : 'bg-white border-gray-200'}`}>
+                    <div className={`flex items-center gap-3 mb-3 ${isDark ? 'text-slate-400' : 'text-gray-600'}`}>
+                      <span className="text-sm">发送对象：</span>
+                      <div className={`flex rounded-lg p-1 ${isDark ? 'bg-slate-700/50' : 'bg-gray-100'}`}>
+                        <button
+                          onClick={() => setSendTarget('all')}
+                          className={`px-3 py-1 rounded text-xs font-medium transition-all ${
+                            sendTarget === 'all' ? (isDark ? 'bg-green-600 text-white' : 'bg-green-500 text-white') : (isDark ? 'text-slate-400' : 'text-gray-500')
+                          }`}
+                        >
+                          全部智能体
+                        </button>
+                        {selectedMultiAgents.map((agent) => (
+                          <button
+                            key={agent.id}
+                            onClick={() => setSendTarget(agent.id)}
+                            className={`px-3 py-1 rounded text-xs font-medium transition-all ${
+                              sendTarget === agent.id ? (isDark ? 'bg-green-600 text-white' : 'bg-green-500 text-white') : (isDark ? 'text-slate-400' : 'text-gray-500')
+                            }`}
+                          >
+                            {agent.name}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                    <div className={`flex items-end gap-3 rounded-2xl p-4 ${isDark ? 'bg-slate-700/50' : 'bg-gray-50'}`}>
+                      <textarea
+                        value={inputValue}
+                        onChange={(e) => setInputValue(e.target.value)}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' && !e.shiftKey) {
+                            e.preventDefault();
+                            handleMultiAgentSend();
+                          }
+                        }}
+                        placeholder="请输入希望智能体分析的问题、补充要求或追问内容..."
+                        rows={2}
+                        className={`flex-1 bg-transparent resize-none focus:outline-none text-base ${
+                          isDark ? 'text-white placeholder-slate-500' : 'text-gray-800 placeholder-gray-400'
+                        }`}
+                      />
+                      <div className="flex items-center gap-2">
+                        <button className={`p-2.5 rounded-xl ${isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'}`} title="上传文件">
+                          <Upload className="w-5 h-5" />
+                        </button>
+                        <button
+                          onClick={handleMultiAgentSend}
+                          disabled={!inputValue.trim() || isMultiAgentLoading}
+                          className={`px-5 py-2.5 rounded-xl font-medium transition-all flex items-center gap-2 ${
+                            inputValue.trim() && !isMultiAgentLoading
+                              ? (isDark ? 'bg-green-600 hover:bg-green-700 text-white' : 'bg-green-500 hover:bg-green-600 text-white')
+                              : (isDark ? 'bg-slate-600 text-slate-400' : 'bg-gray-300 text-gray-500')
+                          }`}
+                        >
+                          {isMultiAgentLoading ? <RefreshCw className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}
+                          发送
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* 右侧：分析结果 */}
+                <div className={`w-80 flex-shrink-0 flex flex-col border-l overflow-hidden ${
+                  isDark ? 'bg-slate-800/30 border-slate-700/50' : 'bg-gray-50/50 border-gray-200'
+                }`}>
+                  {/* 标签切换 */}
+                  <div className={`flex border-b ${isDark ? 'border-slate-700/50' : 'border-gray-200'}`}>
+                    <button
+                      onClick={() => setRightPanelTab('structured')}
+                      className={`flex-1 py-3 text-sm font-medium transition-all ${
+                        rightPanelTab === 'structured'
+                          ? isDark ? 'bg-slate-800/50 text-white border-b-2 border-green-500' : 'bg-white text-gray-900 border-b-2 border-green-500'
+                          : isDark ? 'text-slate-400' : 'text-gray-500'
+                      }`}
+                    >
+                      结构化结果
+                    </button>
+                    <button
+                      onClick={() => setRightPanelTab('report')}
+                      className={`flex-1 py-3 text-sm font-medium transition-all ${
+                        rightPanelTab === 'report'
+                          ? isDark ? 'bg-slate-800/50 text-white border-b-2 border-green-500' : 'bg-white text-gray-900 border-b-2 border-green-500'
+                          : isDark ? 'text-slate-400' : 'text-gray-500'
+                      }`}
+                    >
+                      文本报告
+                    </button>
+                  </div>
+
+                  {/* 内容区 */}
+                  <div className="flex-1 overflow-y-auto p-4 custom-scrollbar">
+                    {rightPanelTab === 'structured' ? (
+                      <div className="space-y-4">
+                        {/* 汇总结论 */}
+                        <div>
+                          <div className={`text-xs font-medium mb-2 ${isDark ? 'text-green-400' : 'text-green-600'}`}>汇总结论</div>
+                          <div className={`p-3 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                            {agentResponses.filter(r => r.status === 'completed' || r.status === 'adopted').length === 0 ? (
+                              <p className={`text-sm ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>暂无分析结论</p>
+                            ) : (
+                              <div className="space-y-2">
+                                {agentResponses.filter(r => r.status === 'completed' || r.status === 'adopted').map(r => (
+                                  <div key={r.id} className="text-sm">
+                                    <span className={`font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>{r.agentName}：</span>
+                                    <span className={isDark ? 'text-slate-300' : 'text-gray-700'}>{r.coreJudgment}</span>
+                                  </div>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+
+                        {/* 已采纳观点 */}
+                        <div>
+                          <div className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>已采纳观点 ({adoptedViews.length})</div>
+                          {adoptedViews.length === 0 ? (
+                            <p className={`text-sm ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>暂无采纳观点</p>
+                          ) : (
+                            <div className="space-y-2">
+                              {adoptedViews.map(view => (
+                                <div key={view.id} className={`p-3 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                                  <span className={`font-medium ${isDark ? 'text-green-400' : 'text-green-600'}`}>{view.agentName}</span>
+                                  <div className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{view.content}</div>
+                                </div>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+
+                        {/* 待确认问题 */}
+                        <div>
+                          <div className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>待确认问题</div>
+                          <div className={`p-3 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                            {pendingQuestions.length === 0 ? (
+                              <p className={`text-sm ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>无待确认问题</p>
+                            ) : (
+                              <div className="space-y-1">
+                                {pendingQuestions.map(q => (
+                                  <div key={q.id} className={`text-sm flex items-start gap-2 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                                    <span className={isDark ? 'text-amber-400' : 'text-amber-500'}>•</span>
+                                    <span>{q.content}</span>
+                                  </div>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="space-y-4">
+                        <div className={`text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>{summaryDraft.title || '五四青年节宣传方向分析报告'}</div>
+                        <div className={`p-3 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                          <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>背景</div>
+                          <div className={`text-sm mt-1 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{taskInfo.background}</div>
+                        </div>
+                        <div className={`p-3 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                          <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>参与智能体</div>
+                          <div className={`text-sm mt-1 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{selectedMultiAgents.map(a => a.name).join(' / ')}</div>
+                        </div>
+                        <div className={`p-3 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                          <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>联合结论</div>
+                          <div className={`text-sm mt-1 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                            {summaryDraft.sections.length > 0 ? summaryDraft.sections.map(s => s.content).join('\n') : '点击"生成汇总"自动生成联合结论'}
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          {viewMode === 'single' && (
+            messages.length === 0 ? (
+              <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                <MessageSquare className="w-16 h-16 mb-4 opacity-50" />
+                <p className="text-lg">
+                  {qaProvider === 'agent' ? `开始与${selectedAgent.name}对话` : '开始你的问答'}
+                </p>
+                <p className="text-sm mt-2">
+                  {qaProvider === 'agent'
+                    ? '基于智能体专业能力获取精准回答'
+                    : '输入问题，获取基于知识库的智能回答'}
+                </p>
+
+                {/* 快捷入口 - 仅在通用问答且无消息时显示 */}
+                {qaProvider === 'general' && (
+                  <QuickStartCards />
+                )}
+              </div>
+            ) : (
+              <div className="h-full flex flex-col">
+                {/* 消息列表 - 居中显示，MiniMax风格 */}
+                <div className="flex-1 overflow-y-auto px-4 py-6 custom-scrollbar">
+                  <div className="max-w-3xl mx-auto space-y-6">
+                    {messages.map((msg) => (
+                      <div key={msg.id} className="space-y-3">
+                        {/* 用户消息 - 右侧显示 */}
+                        {msg.role === 'user' && (
+                          <div className="flex gap-3 justify-end">
+                            <div className={`max-w-[75%] rounded-2xl px-5 py-3.5 ${
+                              isDark
+                                ? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-600/20'
+                                : 'bg-gradient-to-br from-red-500 to-red-600 text-white shadow-lg shadow-red-500/20'
+                            }`}>
+                              <p className="whitespace-pre-wrap leading-relaxed text-[15px]">{msg.content}</p>
+                            </div>
+                            <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
+                              isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-200 text-gray-600'
+                            }`}>
+                              <div className="w-5 h-5 rounded-full bg-current" />
+                            </div>
+                          </div>
+                        )}
+
+                        {/* AI/智能体回复 - 左侧显示 */}
+                        {msg.role === 'assistant' && (
+                          <div className="flex gap-3">
+                            <div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 ${
+                              qaProvider === 'agent'
+                                ? (isDark ? 'bg-gradient-to-br from-blue-600/40 to-purple-600/40 text-blue-400' : 'bg-gradient-to-br from-blue-100 to-purple-100 text-blue-600')
+                                : (isDark ? 'bg-slate-700/80 text-slate-300' : 'bg-gray-100 text-gray-600')
+                            }`}>
+                              {qaProvider === 'agent' ? <Bot className="w-5 h-5" /> : <Brain className="w-5 h-5" />}
+                            </div>
+                            <div className="flex-1 min-w-0">
+                              {/* 智能体名称标识 - 仅智能体模式 */}
+                              {qaProvider === 'agent' && (
+                                <div className={`text-xs font-medium mb-1.5 ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                                  {selectedAgent.name}
+                                </div>
+                              )}
+                              <div className={`rounded-2xl px-5 py-3.5 ${
+                                isDark
+                                  ? 'bg-slate-800/80 text-slate-200 border border-slate-700/50'
+                                  : 'bg-white text-gray-800 border border-gray-200 shadow-sm'
+                              }`}>
+                                <p className="whitespace-pre-wrap leading-relaxed text-[15px]">{msg.content}</p>
+                              </div>
+
+                              {/* 来源信息 - MiniMax风格折叠 */}
+                              {msg.sources && showSources && (
+                                <div className={`mt-3 ml-1 p-4 rounded-xl ${isDark ? 'bg-slate-800/40 border border-slate-700/30' : 'bg-gray-50 border border-gray-200'}`}>
+                                  <div className={`text-xs font-medium mb-3 flex items-center gap-1.5 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                                    <FileText className="w-3.5 h-3.5" />
+                                    引用来源 ({msg.sources.length})
+                                  </div>
+                                  <div className="space-y-2">
+                                    {msg.sources.slice(0, 3).map((source, idx) => (
+                                      <div key={idx} className={`p-2.5 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                                        <div className="flex items-center gap-2">
+                                          <span className={`font-medium text-sm ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+                                            {source.title}
+                                          </span>
+                                          <span className={`px-1.5 py-0.5 rounded text-xs ${
+                                            isDark ? 'bg-slate-600 text-slate-400' : 'bg-gray-100 text-gray-500'
+                                          }`}>
+                                            {source.type}
+                                          </span>
+                                        </div>
+                                        <p className={`text-xs mt-1.5 leading-relaxed ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                                          {source.snippet.substring(0, 100)}...
+                                        </p>
+                                      </div>
+                                    ))}
+                                  </div>
+                                </div>
+                              )}
+
+                              {/* 智能体执行详情 */}
+                              {qaProvider === 'agent' && msg.skills && (
+                                <div className={`mt-3 ml-1 p-4 rounded-xl ${isDark ? 'bg-slate-800/40 border border-slate-700/30' : 'bg-gray-50 border border-gray-200'}`}>
+                                  <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                      <h4 className={`text-xs font-medium mb-2 flex items-center gap-1.5 ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                                        <Sparkles className="w-3.5 h-3.5" />
+                                        启用技能
+                                      </h4>
+                                      <div className="flex flex-wrap gap-1">
+                                        {msg.skills.map((skill, idx) => (
+                                          <span key={idx} className={`px-2 py-1 rounded-lg text-xs font-medium ${
+                                            isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                                          }`}>
+                                            {skill}
+                                          </span>
+                                        ))}
+                                      </div>
+                                    </div>
+                                    <div>
+                                      <h4 className={`text-xs font-medium mb-2 flex items-center gap-1.5 ${isDark ? 'text-green-400' : 'text-green-600'}`}>
+                                        <Database className="w-3.5 h-3.5" />
+                                        数据源
+                                      </h4>
+                                      <div className="flex flex-wrap gap-1">
+                                        {msg.dataSources?.map((source, idx) => (
+                                          <span key={idx} className={`px-2 py-1 rounded-lg text-xs ${
+                                            isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-600'
+                                          }`}>
+                                            {source}
+                                          </span>
+                                        ))}
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* 加载动画 */}
+                {isLoading && (
+                  <div className="flex gap-3 max-w-3xl mx-auto px-4">
+                    <div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 ${
+                      qaProvider === 'agent'
+                        ? (isDark ? 'bg-gradient-to-br from-blue-600/40 to-purple-600/40 text-blue-400' : 'bg-gradient-to-br from-blue-100 to-purple-100 text-blue-600')
+                        : (isDark ? 'bg-slate-700/80 text-slate-300' : 'bg-gray-100 text-gray-600')
+                    }`}>
+                      {qaProvider === 'agent' ? <Bot className="w-5 h-5" /> : <Brain className="w-5 h-5" />}
+                    </div>
+                    <div className={`rounded-2xl px-5 py-4 ${isDark ? 'bg-slate-800/80 border border-slate-700/50' : 'bg-white border border-gray-200 shadow-sm'}`}>
+                      <div className="flex gap-1.5 items-center">
+                        <span className={`w-2 h-2 rounded-full animate-bounce ${isDark ? 'bg-blue-400' : 'bg-blue-500'}`} style={{ animationDelay: '0ms' }} />
+                        <span className={`w-2 h-2 rounded-full animate-bounce ${isDark ? 'bg-blue-400' : 'bg-blue-500'}`} style={{ animationDelay: '150ms' }} />
+                        <span className={`w-2 h-2 rounded-full animate-bounce ${isDark ? 'bg-blue-400' : 'bg-blue-500'}`} style={{ animationDelay: '300ms' }} />
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )
+          )}
+        </div>
+
+        {/* 对比模式视图 */}
+        {viewMode === 'compare' && (
+          <div className="h-full">
+            {compareResult ? (
+              compareLayout === 'horizontal' ? (
+                <div className="grid grid-cols-2 gap-6 h-full">
+                  <div className={`rounded-2xl border overflow-hidden ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                    <div className={`px-4 py-3 ${isDark ? 'bg-slate-800/50 border-b border-slate-700/50' : 'bg-red-50/50 border-b border-red-100'}`}>
+                      <span className={`px-3 py-1 rounded-full text-sm font-medium ${
+                        isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                      }`}>
+                        {getModeLabel(compareResult.leftMode)}
+                      </span>
+                    </div>
+                    <div className="p-5">
+                      <p className={`whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                        {compareResult.leftContent}
+                      </p>
+                    </div>
+                  </div>
+                  <div className={`rounded-2xl border overflow-hidden ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                    <div className={`px-4 py-3 ${isDark ? 'bg-slate-800/50 border-b border-slate-700/50' : 'bg-purple-50/50 border-b border-purple-100'}`}>
+                      <span className={`px-3 py-1 rounded-full text-sm font-medium ${
+                        isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
+                      }`}>
+                        {getModeLabel(compareResult.rightMode)}
+                      </span>
+                    </div>
+                    <div className="p-5">
+                      <p className={`whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                        {compareResult.rightContent}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div className="space-y-6">
+                  <div className={`rounded-2xl border overflow-hidden ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                    <div className={`px-4 py-3 ${isDark ? 'bg-slate-800/50 border-b border-slate-700/50' : 'bg-red-50/50 border-b border-red-100'}`}>
+                      <span className={`px-3 py-1 rounded-full text-sm font-medium ${
+                        isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                      }`}>
+                        {getModeLabel(compareResult.leftMode)}
+                      </span>
+                    </div>
+                    <div className="p-5">
+                      <p className={`whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                        {compareResult.leftContent}
+                      </p>
+                    </div>
+                  </div>
+                  <div className={`rounded-2xl border overflow-hidden ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                    <div className={`px-4 py-3 ${isDark ? 'bg-slate-800/50 border-b border-slate-700/50' : 'bg-purple-50/50 border-b border-purple-100'}`}>
+                      <span className={`px-3 py-1 rounded-full text-sm font-medium ${
+                        isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
+                      }`}>
+                        {getModeLabel(compareResult.rightMode)}
+                      </span>
+                    </div>
+                    <div className="p-5">
+                      <p className={`whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                        {compareResult.rightContent}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              )
+            ) : (
+              <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                <GitCompare className="w-16 h-16 mb-4 opacity-50" />
+                <p className="text-lg">对比模式</p>
+                <p className="text-sm mt-2">输入问题，对比不同模式的回答效果</p>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* 新建问答确认对话框 */}
+        {showNewQADialog && (
+          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+            <div className={`w-96 rounded-2xl shadow-2xl overflow-hidden ${
+              isDark ? 'bg-slate-800' : 'bg-white'
+            }`}>
+              <div className={`px-6 py-5 border-b ${isDark ? 'border-slate-700' : 'border-gray-100'}`}>
+                <div className="flex items-center gap-4">
+                  <div className={`w-12 h-12 rounded-full flex items-center justify-center ${
+                    isDark ? 'bg-amber-600/30 text-amber-400' : 'bg-amber-100 text-amber-600'
+                  }`}>
+                    <AlertCircle className="w-6 h-6" />
+                  </div>
+                  <div>
+                    <div className={`text-lg font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                      是否保存当前会话？
+                    </div>
+                    <div className={`text-sm mt-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                      当前有 {messages.length} 条对话记录
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="p-5 space-y-3">
+                <button
+                  onClick={handleSaveAndNewQA}
+                  className={`w-full flex items-center justify-center gap-2 px-4 py-3.5 rounded-xl text-sm font-medium transition-all ${
+                    isDark
+                      ? 'bg-blue-600 hover:bg-blue-700 text-white'
+                      : 'bg-red-500 hover:bg-red-600 text-white'
+                  }`}
+                >
+                  <Bookmark className="w-4 h-4" />
+                  保存并新建
+                </button>
+                <button
+                  onClick={performNewQA}
+                  className={`w-full flex items-center justify-center gap-2 px-4 py-3.5 rounded-xl text-sm font-medium transition-all ${
+                    isDark
+                      ? 'bg-slate-700 hover:bg-slate-600 text-white'
+                      : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
+                  }`}
+                >
+                  <X className="w-4 h-4" />
+                  直接新建（不保存）
+                </button>
+                <button
+                  onClick={() => setShowNewQADialog(false)}
+                  className={`w-full flex items-center justify-center gap-2 px-4 py-3.5 rounded-xl text-sm font-medium transition-all ${
+                    isDark
+                      ? 'bg-transparent hover:bg-slate-700/50 text-slate-400'
+                      : 'bg-transparent hover:bg-gray-50 text-gray-500'
+                  }`}
+                >
+                  取消
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 底部输入区 - 仅在非多智能体模式显示 */}
+        {qaProvider !== 'multi-agent' && (
+          <div className={`p-4 border-t ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+            <div className={`flex items-end gap-3 rounded-2xl p-4 ${isDark ? 'bg-slate-700/50' : 'bg-gray-100'}`}>
+              <textarea
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder={
+                  viewMode === 'compare'
+                    ? '输入问题进行对比分析...'
+                    : '输入你的问题...'
+                }
+                rows={1}
+                className={`flex-1 bg-transparent resize-none focus:outline-none text-base ${
+                  isDark ? 'text-white placeholder-slate-500' : 'text-gray-800 placeholder-gray-400'
+                }`}
+              />
+
+              <div className="flex items-center gap-2">
+                <button className={`p-2.5 rounded-xl transition-colors ${
+                  isDark ? 'hover:bg-slate-600 text-slate-400 hover:text-white' : 'hover:bg-gray-200 text-gray-500'
+                }`}>
+                  <Upload className="w-5 h-5" />
+                </button>
+
+                <button
+                  onClick={() => {
+                    setMessages([]);
+                    setCompareResult(null);
+                  }}
+                  className={`p-2.5 rounded-xl transition-colors ${
+                    isDark ? 'hover:bg-slate-600 text-slate-400 hover:text-white' : 'hover:bg-gray-200 text-gray-500'
+                  }`}
+                  title="重新提问"
+                >
+                  <RotateCcw className="w-5 h-5" />
+                </button>
+
+                <button
+                  onClick={handleSaveRecord}
+                  className={`p-2.5 rounded-xl transition-colors ${
+                    isDark ? 'hover:bg-slate-600 text-slate-400 hover:text-white' : 'hover:bg-gray-200 text-gray-500'
+                  }`}
+                  title="保存记录"
+                >
+                  <Bookmark className="w-5 h-5" />
+                </button>
+
+                <button
+                  onClick={
+                    viewMode === 'compare'
+                      ? handleCompare
+                      : handleSend
+                  }
+                  disabled={!inputValue.trim() || isLoading}
+                  className={`px-5 py-2.5 rounded-xl font-medium transition-all flex items-center gap-2 ${
+                    inputValue.trim() && !isLoading
+                      ? isDark
+                        ? 'bg-blue-600 hover:bg-blue-700 text-white'
+                        : 'bg-red-500 hover:bg-red-600 text-white'
+                      : isDark
+                        ? 'bg-slate-600 text-slate-400'
+                        : 'bg-gray-300 text-gray-500'
+                  }`}
+                >
+                  <Send className="w-4 h-4" />
+                  发送
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 自定义滚动条样式 */}
+      <style>{`
+        .custom-scrollbar::-webkit-scrollbar {
+          width: 6px;
+          height: 6px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+          background: ${isDark ? 'rgba(148, 163, 184, 0.3)' : 'rgba(0, 0, 0, 0.15)'};
+          border-radius: 3px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+          background: ${isDark ? 'rgba(148, 163, 184, 0.5)' : 'rgba(0, 0, 0, 0.25)'};
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default QA;
diff --git a/web-code/components/qa/QACenterPage.tsx b/web-code/components/qa/QACenterPage.tsx
new file mode 100644
index 00000000..5390d0ab
--- /dev/null
+++ b/web-code/components/qa/QACenterPage.tsx
@@ -0,0 +1,9 @@
+import { Outlet } from 'react-router-dom';
+
+export default function QACenterPage() {
+  return (
+    <div>
+      <Outlet />
+    </div>
+  );
+}
diff --git a/web-code/components/qa/QACommon.tsx b/web-code/components/qa/QACommon.tsx
new file mode 100644
index 00000000..dea9bb73
--- /dev/null
+++ b/web-code/components/qa/QACommon.tsx
@@ -0,0 +1,935 @@
+import React, { useEffect, useState } from 'react';
+import { Dialog, Textarea } from 'tdesign-react';
+import {
+  Bookmark,
+  BrainCircuit,
+  Bot,
+  ChevronDown,
+  FileSearch,
+  Loader2,
+  RotateCcw,
+  Search,
+  Send,
+  Settings,
+  Sparkles,
+  Square,
+  Copy,
+  Trash2,
+  Edit3,
+  Upload,
+  UserRound,
+  ExternalLink,
+} from 'lucide-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import MarkdownRenderer from '../MarkdownRenderer';
+import { SourceItem } from './GeneralQA.types';
+
+/**
+ * 单条检索结果。
+ *
+ * 多轮检索过程中每一轮可能返回多条资料，这里只保留 UI 展示所需的标题、摘要和来源。
+ */
+export interface QARetrievalItem {
+  id?: string;
+  title: string;
+  content: string;
+  keywords?: string;
+  taskDirection?: string;
+  type?: string;
+  time?: string;
+  source?: string;
+  recUuid?: string;
+  platform?: string;
+  fans?: number;
+  comment_count?: number;
+  message_id?: string;
+  hot_num?: number;
+}
+
+/**
+ * 多轮检索中的单轮思考节点。
+ *
+ * `queryLoading` 控制该轮检索结果是否仍显示 loading；retrievals 到达后再渲染资料列表。
+ */
+export interface QAThinkingRound {
+  id: string;           // 唯一标识符，用于列表渲染时的 key
+  title: string;        // 该轮检索的标题，如"第1轮检索"或"背景资料收集"
+  thoughtMarkdown: string; // 模型思考过程的 Markdown 内容，展示思考步骤和推理逻辑
+  queryTitle?: string; // 检索内容
+  query: string;        // 该轮发送给检索系统的查询语句
+  queryLoading?: boolean; // 该轮检索是否仍在进行中，true 时显示加载动画
+  textidContent?: string; // 新闻详细内容
+  retrievals: QARetrievalItem[]; // 该轮返回的检索结果列表
+  queryShow: boolean; // 检索列表为空时是否显示
+}
+
+/**
+ * 多轮/深度检索的完整思考链。
+ *
+ * rounds 展示检索过程，finalAnswerMarkdown 展示最终回答；两者分开便于流式过程中逐步更新。
+ */
+export interface QAThinkingTrace {
+  title?: string; // 整体思考链的标题
+  rounds: QAThinkingRound[]; // 多轮检索过程中的所有轮次，每轮包含思考和检索结果
+  finalAnswerMarkdown: string; // 基于多轮检索结果生成的最终回答内容
+  thinkingComplete?: boolean; // 思考过程是否已完成，true 时思考区域可折叠
+}
+
+/**
+ * 单轮 RAG 的回答结构。
+ *
+ * 后端可能把 `<think>...</think>` 和答案混在同一个 answer 流中，解析后分别放到 thinkingMarkdown 与 answerMarkdown。
+ */
+export interface QASingleRagTrace {
+  title?: string; // 思考过程的标题，如"单轮 RAG 思考过程"
+  thinkingMarkdown: string; // 模型在生成回答前的思考过程内容，使用 Markdown 格式
+  answerMarkdown: string; // 最终生成的回答内容，使用 Markdown 格式
+  thinkingComplete?: boolean; // 思考过程是否已完成，true 时思考区域可折叠
+}
+
+export interface QACommonMessage {
+  id: string; // 消息唯一标识符
+  role: 'user' | 'assistant'; // 消息发送者角色：user 为用户消息，assistant 为 AI 回复
+  content: string; // 消息的纯文本内容（当使用 thinkingTrace 或 singleRagTrace 时为空）
+  timestamp?: Date; // 消息发送时间
+  thinkingTrace?: QAThinkingTrace; // 多轮/深度检索模式的思考链，包含多轮检索过程和最终回答
+  sources?: { // 消息引用的参考资料列表
+    title: string; // 参考资料标题
+    type: string; // 资料类型，如"文档"、"网页"等
+    snippet: string; // 资料摘要内容
+    source?: string; // 来源名称或 URL
+    time?: string; // 发布时间
+    url?: string; // 资料链接
+    content?: string; // 完整内容（可能用于详情弹窗）
+  }[];
+}
+
+export interface QACommonMessage {
+  singleRagTrace?: QASingleRagTrace; // 单轮 RAG 模式的思考过程和回答结构
+}
+
+interface QAAvatarProps {
+  role: 'user' | 'assistant';
+  isActive?: boolean;
+  label?: string;
+  variant?: 'default' | 'blue' | 'purple';
+}
+
+const getAssistantAvatarClass = (variant: QAAvatarProps['variant'], isDark: boolean) => {
+  switch (variant) {
+    case 'blue':
+      return isDark
+        ? 'bg-gradient-to-br from-blue-400 via-blue-600 to-cyan-700 text-white'
+        : 'bg-gradient-to-br from-blue-300 via-blue-500 to-cyan-500 text-white';
+    case 'purple':
+      return isDark
+        ? 'bg-gradient-to-br from-purple-400 via-violet-600 to-fuchsia-700 text-white'
+        : 'bg-gradient-to-br from-purple-300 via-violet-500 to-fuchsia-500 text-white';
+    default:
+      return isDark
+        ? 'bg-gradient-to-br from-cyan-500 via-blue-600 to-violet-600 text-white'
+        : 'bg-gradient-to-br from-red-400 via-rose-500 to-orange-400 text-white';
+  }
+};
+
+/**
+ * 统一头像组件。
+ *
+ * 单一模式使用默认助手色；对比模式可通过 variant 指定蓝/紫色系，让头像与左右面板标签保持一致。
+ * `isActive` 会触发呼吸和星光动画，用来提示当前助手正在生成。
+ */
+export const QAAvatar: React.FC<QAAvatarProps> = ({ role, isActive = false, label, variant = 'default' }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const Icon = role === 'assistant' ? Bot : UserRound;
+
+  return (
+    <div
+      className={`relative w-9 h-9 rounded-2xl flex items-center justify-center flex-shrink-0 overflow-hidden shadow-sm ${role === 'assistant'
+        ? getAssistantAvatarClass(variant, isDark)
+        : isDark
+          ? 'bg-gradient-to-br from-slate-500 via-slate-700 to-slate-900 text-white'
+          : 'bg-gradient-to-br from-sky-400 via-indigo-500 to-violet-500 text-white'
+        } ${isActive ? 'qa-avatar-active' : ''}`}
+      title={label}
+    >
+      <div className="absolute inset-0 bg-white/20 opacity-0 qa-avatar-shine" />
+      <Icon className={`w-5 h-5 relative z-10 ${isActive ? 'qa-avatar-icon-active' : ''}`} />
+      {role === 'assistant' && isActive && (
+        <Sparkles className="absolute -right-0.5 -top-0.5 w-3.5 h-3.5 text-yellow-200 qa-avatar-spark" />
+      )}
+    </div>
+  );
+};
+
+interface TypingIndicatorProps {
+  label?: string;
+  assistantLabel?: string;
+}
+
+/**
+ * 助手预连接/生成中的占位提示。
+ *
+ * 用于请求已经发出但还没有生成可展示消息时，给用户明确的等待反馈。
+ */
+export const TypingIndicator: React.FC<TypingIndicatorProps> = ({ label = '正在思考并生成回复', assistantLabel = 'AI 助手' }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  return (
+    <div className="flex gap-3">
+      <QAAvatar role="assistant" isActive label={assistantLabel} />
+      <div className={`max-w-[70%] rounded-2xl px-4 py-3 shadow-sm border ${isDark ? 'bg-slate-700/60 border-slate-600/50 text-slate-200' : 'bg-white border-red-100 text-gray-700'
+        }`}>
+        <div className="flex items-center gap-3">
+          <Loader2 className={`w-4 h-4 animate-spin ${isDark ? 'text-blue-300' : 'text-red-500'}`} />
+          <span
+            className={`text-sm font-medium qa-generating-marquee ${isDark ? 'qa-generating-marquee-dark' : 'qa-generating-marquee-light'}`}
+          >
+            {label}
+          </span>
+          {/* <div className="flex gap-1">
+            {[0, 1, 2].map((idx) => (
+              <span
+                key={idx}
+                className={`w-1.5 h-1.5 rounded-full qa-typing-dot ${isDark ? 'bg-blue-300' : 'bg-red-400'}`}
+                style={{
+                  animationDelay: `${idx * 160}ms`,
+                }}
+              />
+            ))}
+          </div> */}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface ChatMessageProps<T extends QACommonMessage> {
+  message: T;
+  showSources?: boolean;
+  assistantLabel?: string;
+  assistantActive?: boolean;
+  onCitationClick?: (message: T, citationIndex: number) => void;
+  onCopyAssistant?: (message: T) => void;
+  onDeleteAssistant?: (message: T) => void;
+  onEditAssistant?: (message: T) => void;
+  onResendAssistant?: (message: T) => void;
+  renderAssistantExtra?: (message: T) => React.ReactNode;
+}
+
+/**
+ * 聊天消息渲染器。
+ *
+ * 根据消息类型自动选择普通文本、单轮 RAG 回答或多轮检索思考链。
+ * sources 区域独立折叠展示，避免引用资料过长时挤占主回答阅读空间。
+ */
+export function ChatMessage<T extends QACommonMessage>({
+  message,
+  showSources = true,
+  assistantLabel = 'AI 助手',
+  assistantActive = false,
+  onCitationClick,
+  onCopyAssistant,
+  onDeleteAssistant,
+  onEditAssistant,
+  onResendAssistant,
+  renderAssistantExtra,
+}: ChatMessageProps<T>) {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const isUser = message.role === 'user';
+  const hasTrace = !isUser && !!(message.singleRagTrace || message.thinkingTrace);
+  const knowledgeUrl = import.meta.env.VITE_AIPI_KNOWLEDGE_URL;
+  const [visible, setVisible] = useState(false); // 打开详情对话框
+  const [listData, setListData] = useState<SourceItem>({
+    title: '',
+    type: '',
+    time: '',
+    snippet: '',
+    source: '',
+    content: '',
+  });
+  const showDialog = (item: SourceItem) => {
+    console.log('item', item)
+    if (item.url) {
+      window.open(`${knowledgeUrl}/#/knowledge/mid-detail?recUuid=${item.url}`);
+    } else {
+      setListData(item);
+      setVisible(true);
+    }
+  };
+  return (
+    <div className="space-y-3">
+      <div className={`flex gap-3 ${isUser ? 'justify-end' : ''}`}>
+        {!isUser && <QAAvatar role="assistant" isActive={assistantActive} label={assistantLabel} />}
+        <div className={`${hasTrace ? 'max-w-[85%] flex-1' : 'max-w-[72%]'} rounded-2xl px-4 py-3 shadow-sm ${isUser
+          ? isDark
+            ? 'bg-blue-600/70 text-white'
+            : 'bg-gradient-to-r from-red-500 to-rose-500 text-white'
+          : message.singleRagTrace || message.thinkingTrace
+            ? isDark
+              ? 'bg-slate-800/40 text-slate-100 border border-slate-600/40'
+              : 'bg-white text-gray-800 border border-transparent shadow-[0px_3px_12px_rgba(0, 0, 0, 0.12)] px-0 py-0'
+            : isDark
+              ? 'bg-slate-700/60 text-slate-100 border border-slate-600/40'
+              : 'bg-white text-gray-800 border border-gray-100'
+          }`}>
+          {message.singleRagTrace && !isUser ? (
+            <SingleRagAnswer
+              trace={message.singleRagTrace}
+              onCitationClick={(citationIndex) => onCitationClick?.(message, citationIndex)}
+            />
+          ) : message.thinkingTrace && !isUser ? (
+            <RetrievalThinkingTrace
+              trace={message.thinkingTrace}
+              onCitationClick={(citationIndex) => onCitationClick?.(message, citationIndex)}
+            />
+          ) : (
+            <p className="whitespace-pre-wrap leading-relaxed">{message.content}</p>
+          )}
+          {!isUser && (onCopyAssistant || onDeleteAssistant || onEditAssistant || onResendAssistant) && (
+            <div className={`mt-2 flex items-center justify-end gap-1.5 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              {onCopyAssistant && (
+                <button type="button" onClick={() => onCopyAssistant(message)} className={`p-1.5 rounded-md transition-colors ${isDark ? 'hover:bg-slate-700 hover:text-slate-100' : 'hover:bg-gray-100 hover:text-gray-700'}`} title="复制回答">
+                  <Copy className="w-3.5 h-3.5" />
+                </button>
+              )}
+              {onDeleteAssistant && (
+                <button type="button" onClick={() => onDeleteAssistant(message)} className={`p-1.5 rounded-md transition-colors ${isDark ? 'hover:bg-slate-700 hover:text-rose-300' : 'hover:bg-red-50 hover:text-red-600'}`} title="删除问答">
+                  <Trash2 className="w-3.5 h-3.5" />
+                </button>
+              )}
+              {onEditAssistant && (
+                <button type="button" onClick={() => onEditAssistant(message)} className={`p-1.5 rounded-md transition-colors ${isDark ? 'hover:bg-slate-700 hover:text-blue-300' : 'hover:bg-blue-50 hover:text-blue-600'}`} title="编辑回答和思考过程">
+                  <Edit3 className="w-3.5 h-3.5" />
+                </button>
+              )}
+              {onResendAssistant && (
+                <button type="button" onClick={() => onResendAssistant(message)} className={`p-1.5 rounded-md transition-colors ${isDark ? 'hover:bg-slate-700 hover:text-emerald-300' : 'hover:bg-emerald-50 hover:text-emerald-600'}`} title="重新发送">
+                  <RotateCcw className="w-3.5 h-3.5" />
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+        {isUser && <QAAvatar role="user" label="用户" />}
+      </div>
+
+
+      {!isUser && message.sources && message.sources.length > 0 && showSources && (
+        <CollapsibleSection
+          defaultOpen={false}
+          className={`ml-12 ${hasTrace ? 'max-w-[85%]' : 'max-w-[72%]'} ${isDark ? 'bg-slate-800/50 border-slate-700/50' : 'bg-gray-50 border-gray-200'}`}
+          title={(
+            <div className="flex items-center gap-2">
+              <BrainCircuit className={`w-3.5 h-3.5 ${isDark ? 'text-blue-300' : 'text-red-500'}`} />
+              <span className={`text-xs font-medium ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>引用来源</span>
+              <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>({message.sources.length})</span>
+            </div>
+          )}
+        >
+          <div className="space-y-2 pt-[10px]">
+            {message.sources.map((source, idx) => (
+              <div key={idx} className={`text-xs p-2 rounded-[4px] border shadow-sm transition-all duration-200 ease-out cursor-pointer hover:-translate-y-0.5 hover:scale-[1.01] ${isDark ? 'bg-slate-700/50 border-slate-600/50 shadow-black/10 hover:bg-slate-700/80 hover:border-blue-400/40 hover:shadow-lg hover:shadow-blue-950/20' : 'bg-white border-gray-100 shadow-gray-200/60 hover:border-red-200 hover:shadow-md hover:shadow-red-100/70'}`} onClick={() => showDialog(source)}>
+                <div className="flex items-center gap-2 mb-1 min-w-0">
+                  <BrainCircuit className={`w-3 h-3 shrink-0 ${isDark ? 'text-blue-400' : 'text-red-400'}`} />
+                  <span className={`font-medium truncate min-w-0 flex-1 ${isDark ? 'text-slate-300' : 'text-gray-700'}`} title={source.title}>{source.title}</span>
+                  <span className={`shrink-0 px-1.5 py-0.5 rounded text-xs ${isDark ? 'bg-slate-600 text-slate-300' : 'bg-gray-200 text-gray-500'}`}>
+                    {source.type}
+                  </span>
+                </div>
+                <p className={`line-clamp-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{source.snippet}</p>
+              </div>
+            ))}
+          </div>
+        </CollapsibleSection>
+      )}
+      <Dialog
+        visible={visible}
+        onClose={() => setVisible(false)}
+        header="提示"
+        footer={null}
+      >
+        <div>
+          <div className="pr-9">
+            <h3 className="text-base font-semibold">{listData.title || '引用内容'}</h3>
+            <div className={`mt-2 text-xs space-y-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              <div>来源：{listData.source || '未知来源'}</div>
+              <div>时间：{listData.time || '未知'}</div>
+            </div>
+          </div>
+          {listData.url && (
+            <div className="mt-4">
+              <a
+                href={`${knowledgeUrl}/#/knowledge/mid-detail?recUuid=${listData.url}`}
+                target="_blank"
+                rel="noreferrer"
+                className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm transition-all ${isDark
+                  ? 'border-slate-600 text-slate-200 hover:bg-slate-800'
+                  : 'border-gray-300 text-gray-700 hover:bg-gray-50'
+                  }`}
+                title="打开原始链接"
+              >
+                <ExternalLink className="w-4 h-4" />
+                查看原文链接
+              </a>
+            </div>
+          )}
+          <div className={`mt-4 rounded-xl p-3 text-sm leading-relaxed whitespace-pre-wrap ${isDark ? 'bg-slate-800/70 text-slate-200' : 'bg-gray-50 text-gray-700'
+            }`}>
+            {listData.content || '暂无引用内容'}
+          </div>
+        </div>
+      </Dialog>
+      {!isUser && renderAssistantExtra?.(message)}
+
+    </div>
+  );
+}
+
+interface CollapsibleSectionProps {
+  title: React.ReactNode;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  className?: string;
+  headerClassName?: string;
+}
+
+/**
+ * 通用折叠面板。
+ *
+ * 思考过程、检索结果、引用来源都复用该组件，保证展开/收起动画和深浅色主题一致。
+ */
+const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
+  title,
+  children,
+  defaultOpen = true,
+  className = '',
+  headerClassName = '',
+}) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const [open, setOpen] = useState(defaultOpen);
+  // 当 defaultOpen 改变时，更新 open 状态
+  useEffect(() => {
+    setOpen(defaultOpen);
+  }, [defaultOpen]);
+  return (
+    <div className={`rounded-2xl border overflow-hidden ${isDark ? 'border-slate-700/60 bg-slate-900/30' : 'border-red-100 bg-white'} ${className}`}>
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className={`w-full flex items-center justify-between gap-3 px-4 py-3 text-left transition-colors ${isDark ? 'hover:bg-slate-800/70' : 'hover:bg-red-50/60'
+          } ${headerClassName}`}
+      >
+        <div className="flex-1 min-w-0">{title}</div>
+        <ChevronDown
+          className={`w-4 h-4 flex-shrink-0 transition-transform duration-300 ease-out ${open ? 'rotate-0' : '-rotate-90'
+            } ${isDark ? 'text-slate-400' : 'text-gray-500'}`}
+        />
+      </button>
+      <div className={`grid transition-[grid-template-rows,opacity] duration-300 ease-out ${open ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'}`}>
+        <div className="overflow-hidden">
+          <div className={`px-4 pb-4 transition-transform duration-300 ease-out ${open ? 'translate-y-0' : '-translate-y-2'} ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface SingleRagAnswerProps {
+  trace: QASingleRagTrace;
+  onCitationClick?: (citationIndex: number) => void;
+}
+
+/**
+ * 单轮 RAG 回答展示。
+ *
+ * 思考内容和最终回答分成两个区域：思考区可折叠，回答区始终展示。
+ * 这样既保留模型推理过程，也不会影响用户优先阅读最终答案。
+ */
+export const SingleRagAnswer: React.FC<SingleRagAnswerProps> = ({ trace, onCitationClick }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  return (
+    <div className="w-full min-w-0 max-w-5xl space-y-4 overflow-hidden">
+      <CollapsibleSection
+        defaultOpen={!trace.thinkingComplete}
+        className={isDark ? 'bg-slate-800/60 shadow-lg shadow-black/10' : 'bg-white shadow-sm'}
+        title={
+          <div className="flex items-center gap-3">
+            <div className={`w-9 h-9 rounded-2xl flex items-center justify-center ${isDark ? 'bg-violet-500/15 text-violet-300' : 'bg-orange-50 text-orange-500'
+              }`}>
+              <Sparkles className="w-5 h-5" />
+            </div>
+            <div>
+              <div className={`text-sm font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>{trace.title || '思考过程'}</div>
+              {trace.thinkingComplete ? (
+                <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                  思考已完成，可展开查看
+                </div>
+              ) : (
+                <div className={`text-xs qa-generating-marquee ${isDark ? 'qa-generating-marquee-dark text-slate-300' : 'qa-generating-marquee-light text-gray-600'}`}>
+                  正在接收 &lt;think&gt; 流式思考内容
+                </div>
+              )}
+            </div>
+          </div>
+        }
+      >
+        {trace.thinkingMarkdown ? (
+          <MarkdownRenderer
+            content={trace.thinkingMarkdown}
+            className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}
+            onCitationClick={onCitationClick}
+          />
+        ) : (
+          <div className={`text-sm flex items-center gap-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+            <Loader2 className="w-4 h-4 animate-spin" />
+            等待模型输出思考内容...
+          </div>
+        )}
+      </CollapsibleSection>
+
+      <div className={`rounded-2xl border p-4 ${isDark ? 'bg-slate-700/60 border-slate-600/40' : 'bg-white border-gray-100'}`}>
+        {trace.answerMarkdown ? (
+          <MarkdownRenderer
+            content={trace.answerMarkdown}
+            className={`text-sm ${isDark ? 'text-slate-200' : 'text-gray-700'}`}
+            onCitationClick={onCitationClick}
+          />
+        ) : (
+          <div className={`text-sm flex items-center gap-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+            <Loader2 className="w-4 h-4 animate-spin" />
+            {trace.thinkingComplete ? '正在流式生成回答...' : '思考结束后开始生成回答...'}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+interface RetrievalListProps {
+  items: QARetrievalItem[];
+}
+
+/**
+ * 检索结果列表。
+ *
+ * 每条资料默认折叠，首条默认展开，便于用户快速看到最相关资料，同时保留完整资料明细。
+ */
+const RetrievalList: React.FC<RetrievalListProps> = ({ items }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const [visible, setVisible] = useState(false); // 打开详情对话框
+  const [listData, setListData] = useState<QARetrievalItem>({
+    title: '',
+    content: '',
+  });
+  const knowledgeUrl = import.meta.env.VITE_AIPI_KNOWLEDGE_URL;
+  const b1SearchUrl = import.meta.env.VITE_AIPI_B1COH_URL;
+  const b2SearchUrl = import.meta.env.VITE_AIPI_B2ACTOR_URL;
+  const showDialog = (item: QARetrievalItem) => {
+    console.log('item', item)
+    if (item.type === 'more') {
+      if (item.recUuid) {
+        window.open(`${knowledgeUrl}/#/knowledge/mid-detail?recUuid=${item.recUuid}`);
+      } else {
+        setListData(item);
+        setVisible(true);
+      }
+    } else if (item.type === 'task') {
+      window.open(`${b1SearchUrl}/#/task/item-aicoh/step-info-search?id=${item.id}`)
+    } else if (item.type === 'hx') {
+      window.open(`${b2SearchUrl}/fromB/toDetail?user_id=${item.id}&platform=${item.platform}`);
+    } else {
+      setListData(item);
+      setVisible(true);
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      {items.map((item, index) => (
+        <div key={index}>
+        {
+          item.type !== 'user_behavior' ? <CollapsibleSection
+            key={index}
+            defaultOpen={index === 0}
+            className={isDark ? 'bg-slate-800/40' : 'bg-gray-50/70'}
+            title={
+              <div className="flex items-center gap-2">
+                <span className={`w-6 h-6 rounded-lg flex items-center justify-center text-xs font-semibold ${isDark ? 'bg-blue-500/20 text-blue-300' : 'bg-red-100 text-red-600'
+                  }`}>{index + 1}</span>
+                <div className="min-w-0">
+                  <div className={`text-sm font-medium truncate ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>{item.title}</div>
+                  {
+                    item.type === 'more' && <div className={`text-xs truncate ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>时间：{item.time || '-'}</div>
+                  }
+                  {
+                    item.type === 'task' && <div className={`text-xs truncate ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>关键词：{item.keywords || '-'}</div>
+                  }
+                  {
+                    item.type === 'hx' && <div className={`text-xs truncate ${isDark ? 'text-slate-500' : 'text-gray-500'}`}><span>平台：{item.platform || '-'}</span><span className="ml-[10px]">粉丝数:{item.fans || '-'}</span></div>
+                  }
+                  {
+                    (item.type === 'taiwan_news' || item.type === 'world_news' || item.type === 'messaage_comment' || item.type === 'america_news') && <div className={`text-xs truncate ${isDark ? 'text-slate-500' : 'text-gray-500'}`}><span>平台：{item.platform || '-'}</span>{item.comment_count && <span className="ml-[10px]">评论数:{item.comment_count || '-'}</span>}</div>
+                  }
+                  {
+                    item.type === 'get_time_data' && <div className={`text-xs truncate ${isDark ? 'text-slate-500' : 'text-gray-500'}`}><span>时间：{item.time || '-'}</span><span className="ml-[10px]">热度:{item.hot_num || '-'}</span></div>
+                  }
+                </div>
+              </div>
+            }
+          >
+            <p className={`text-sm leading-relaxed cursor-progress line-clamp-3 hover:underline ${isDark ? 'text-slate-300' : 'text-gray-600'}`} onClick={() => showDialog(item)}>{item.content}</p>
+          </CollapsibleSection>
+          : <div className="rounded-[5px] border border-[#f5f5f5] p-[10px]" key={index + 10}>
+            <span className="font-bold mr-[10px]">{index + 1}.</span>
+            <span>{item.title}</span>
+          </div>
+        }
+        </div>
+      ))}
+      <Dialog
+        visible={visible}
+        onClose={() => setVisible(false)}
+        header="提示"
+        footer={null}
+      >
+        <div>
+          <div className="pr-9">
+            <h3 className="text-base font-semibold">{listData.title}</h3>
+            <div className={`mt-2 text-xs space-y-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              {listData.time && <span>时间：{listData.time || '未知'}</span>}
+              {listData.platform && <span className="ml-[10px]">平台：{listData.platform || '未知'}</span>}
+              {listData.comment_count && <span className="ml-[10px]">评论数：{listData.comment_count || '未知'}</span>}
+            </div>
+          </div>
+          <div className={`mt-4 rounded-xl p-3 text-sm leading-relaxed whitespace-pre-wrap ${isDark ? 'bg-slate-800/70 text-slate-200' : 'bg-gray-50 text-gray-700'
+            }`}>
+            {listData.content || '暂无引用内容'}
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  );
+};
+
+interface SearchQueryBadgeProps {
+  query: string;
+  loading?: boolean;
+  queryTitle?: string;
+}
+
+/**
+ * 检索词徽标。
+ *
+ * 多轮检索每一轮都会产生一个 query；loading 状态下展示旋转图标，表示该 query 正在召回资料。
+ */
+const SearchQueryBadge: React.FC<SearchQueryBadgeProps> = ({ query, loading = false, queryTitle = '检索词' }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  return (
+    <div className={`inline-flex max-w-full items-center gap-2 rounded-full px-3 py-1.5 border ${isDark ? 'bg-blue-500/10 border-blue-400/20 text-blue-200' : 'bg-red-50 border-red-100 text-red-600'
+      }`}>
+      {loading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Search className="w-3.5 h-3.5" />}
+      <span className="text-xs flex-shrink-0">{queryTitle}</span>
+      <span className={`text-xs font-medium truncate ${loading && 'qa-generating-marquee'} ${loading && (isDark ? 'qa-generating-marquee-dark' : 'qa-generating-marquee-light')}`}>
+        {query}
+      </span>
+    </div>
+  );
+};
+
+interface RetrievalThinkingTraceProps {
+  trace: QAThinkingTrace;
+  onCitationClick?: (citationIndex: number) => void;
+}
+
+/**
+ * 多轮/深度检索思考链展示。
+ *
+ * 组件按轮次渲染思考内容、检索词和检索结果，底部展示最终回答。
+ * 它只消费已经整理好的 trace 数据，不关心数据来自真实 SSE 还是本地模拟。
+ */
+export const RetrievalThinkingTrace: React.FC<RetrievalThinkingTraceProps> = ({ trace, onCitationClick }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  return (
+    <div className="w-full min-w-0 max-w-5xl space-y-4 overflow-hidden">
+      <CollapsibleSection
+        defaultOpen={!trace.thinkingComplete}
+        className={isDark ? 'bg-slate-800/60 shadow-lg shadow-black/10' : 'bg-white shadow-sm'}
+        title={
+          <div className="flex items-center gap-3">
+            <div className={`w-9 h-9 rounded-2xl flex items-center justify-center ${isDark ? 'bg-cyan-500/15 text-cyan-300' : 'bg-red-50 text-red-500'
+              }`}>
+              <BrainCircuit className="w-5 h-5" />
+            </div>
+            <div>
+              <div className={`text-sm font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                {trace.title || '思考过程'}
+              </div>
+              <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                共 {trace.rounds.length} 轮推理与检索，可展开查看细节
+              </div>
+            </div>
+          </div>
+        }
+      >
+        <div className="space-y-3 pt-1">
+          {trace.rounds.map((round, index) => (
+            <div key={index} className={`relative pl-5 ${index < trace.rounds.length - 1 ? 'pb-2' : ''}`}>
+              {index < trace.rounds.length - 1 && (
+                <div className={`absolute left-[7px] top-8 bottom-0 w-px ${isDark ? 'bg-slate-700' : 'bg-red-100'}`} />
+              )}
+              <div className={`absolute left-0 top-4 w-3.5 h-3.5 rounded-full border-2 ${isDark ? 'bg-slate-900 border-cyan-400' : 'bg-white border-red-400'
+                }`} />
+              <CollapsibleSection
+                defaultOpen
+                className={isDark ? 'bg-slate-900/40' : 'bg-red-50/30'}
+                title={
+                  <div className="flex items-center gap-2">
+                    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${isDark ? 'bg-cyan-500/15 text-cyan-300' : 'bg-red-100 text-red-600'
+                      }`}>第 {index + 1} 轮</span>
+                    <span className={`text-sm font-medium ${round.queryLoading && 'qa-generating-marquee'} ${round.queryLoading && (isDark ? 'text-slate-100 qa-generating-marquee-dark' : 'text-gray-900 qa-generating-marquee-light')}`}>{round.title}</span>
+                  </div>
+                }
+              >
+                <div className="space-y-3">
+                  <CollapsibleSection
+                    defaultOpen
+                    className={isDark ? 'bg-slate-800/50' : 'bg-white/80'}
+                    title={
+                      <div className="flex items-center gap-2">
+                        <Sparkles className={`w-4 h-4 ${isDark ? 'text-violet-300' : 'text-orange-500'}`} />
+                        <span className={`text-sm font-medium ${isDark ? 'text-slate-100' : 'text-gray-800'}`}>思考内容</span>
+                      </div>
+                    }
+                  >
+                    <MarkdownRenderer
+                      content={round.thoughtMarkdown}
+                      className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}
+                      onCitationClick={onCitationClick}
+                    />
+                  </CollapsibleSection>
+                  {
+                    round.queryShow &&
+                    <div className="flex items-center">
+                      <SearchQueryBadge query={round.query} queryTitle={round.queryTitle} loading={round.queryLoading} />
+                    </div>
+                  }
+                  {
+                    round.queryShow &&
+                    <CollapsibleSection
+                      defaultOpen={!round.queryLoading}
+                      className={isDark ? 'bg-slate-800/50' : 'bg-white/80'}
+                      title={
+                        <div className="flex items-center gap-2">
+                          <FileSearch className={`w-4 h-4 ${isDark ? 'text-blue-300' : 'text-red-500'}`} />
+                          <span className={`text-sm font-medium ${isDark ? 'text-slate-100' : 'text-gray-800'}`}>检索内容</span>
+                          <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{round.retrievals.length} 条</span>
+                        </div>
+                      }
+                    >
+                      {round.queryLoading ? (
+                        <div className={`rounded-xl px-3 py-4 text-sm flex items-center gap-2 ${isDark ? 'bg-slate-900/60 text-slate-400' : 'bg-gray-50 text-gray-500'}`}>
+                          <Loader2 className="w-4 h-4 animate-spin" />
+                          正在召回相关内容...
+                        </div>
+                      ) : (
+                        <RetrievalList items={round.retrievals} />
+                      )}
+                    </CollapsibleSection>
+                  }
+                  {
+                    round.textidContent &&
+                    <div className="mt-[10px]">
+                      {round.textidContent}
+                    </div>
+                  }
+                </div>
+              </CollapsibleSection>
+            </div>
+          ))}
+        </div>
+      </CollapsibleSection>
+
+      <div className={`rounded-2xl border p-4 ${isDark ? 'bg-slate-700/60 border-slate-600/40' : 'bg-white border-gray-100'}`}>
+        <div className={`text-sm font-semibold mb-3 ${isDark ? 'text-white' : 'text-gray-900'}`}>最终回答</div>
+        {
+          !trace.finalAnswerMarkdown && <div className={`rounded-xl px-3 py-4 text-sm flex items-center gap-2 ${isDark ? 'bg-slate-900/60 text-slate-400' : 'bg-gray-50 text-gray-500'}`}>
+            <Loader2 className="w-4 h-4 animate-spin" />
+            正在生成思考过程与检索内容...
+          </div>
+        }
+        <MarkdownRenderer
+          content={trace.finalAnswerMarkdown}
+          className={`text-sm ${isDark ? 'text-slate-200' : 'text-gray-700'}`}
+          onCitationClick={onCitationClick}
+        />
+      </div>
+    </div>
+  );
+};
+
+interface EmptyChatStateProps {
+  icon?: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+/**
+ * 空状态展示。
+ *
+ * 当当前模式没有任何消息时使用，提示用户可以开始输入问题。
+ */
+export const EmptyChatState: React.FC<EmptyChatStateProps> = ({ icon, title, description }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  return (
+    <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+      <div className={`w-20 h-20 rounded-3xl mb-5 flex items-center justify-center ${isDark ? 'bg-slate-700/40' : 'bg-gradient-to-br from-red-50 to-orange-50'
+        }`}>
+        {icon ?? <Bot className="w-11 h-11 opacity-60" />}
+      </div>
+      <p className="text-lg font-medium">{title}</p>
+      <p className="text-sm mt-2">{description}</p>
+    </div>
+  );
+};
+
+interface QAComposerProps {
+  value: string;
+  placeholder: string;
+  isLoading: boolean;
+  canSubmit?: boolean;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  onStop: () => void;
+  onKeyDown?: (e) => void;
+  onUpload?: () => void;
+  onReset?: () => void;
+  onSave?: () => void;
+  onCollect?: () => void;
+  onOpenSettings?: () => void;
+  showUpload?: boolean;
+  showReset?: boolean;
+  showSave?: boolean;
+  showCollect?: boolean;
+}
+
+/**
+ * 问答输入区。
+ *
+ * 负责输入、发送/停止、附件、重置、保存、收藏和模型参数设置入口。
+ * 具体业务动作通过 props 回调交给父组件处理，保证输入区本身不依赖某个问答模式。
+ */
+export const QAComposer: React.FC<QAComposerProps> = ({
+  value,
+  placeholder,
+  isLoading,
+  canSubmit,
+  onChange,
+  onSubmit,
+  onStop,
+  onKeyDown,
+  onUpload,
+  onReset,
+  onSave,
+  onCollect,
+  onOpenSettings,
+  showUpload = true,
+  showReset = false,
+  showSave = true,
+  showCollect = true,
+}) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const submitEnabled = canSubmit ?? Boolean(value.trim());
+  const iconButtonClass = `p-2 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'}`;
+  const handleKeyDown = (val, context) => {
+    if (context?.e?.key === 'Enter') {
+      // 阻止默认的换行行为（如果是 Textarea）
+      context.e.preventDefault();
+
+      // 模拟发送请求
+      onKeyDown(val)
+    }
+  };
+  return (
+    <div className={`border-t p-4 ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+      <div className={`flex items-end gap-3 rounded-2xl p-3 shadow-inner ${isDark ? 'bg-slate-700/50' : 'bg-gray-100'}`}>
+        <Textarea
+          value={value}
+          onChange={(nextValue) => onChange(String(nextValue))}
+          onKeydown={handleKeyDown}
+          placeholder={placeholder}
+          autosize={{ minRows: 1, maxRows: 15 }}
+          disabled={isLoading}
+          className={`flex-1 !bg-transparent !border-0 !shadow-none qa-composer-textarea [&]:!border-0 [&]:!shadow-none [&]:!outline-none [&]:focus:!border-0 [&]:focus:!shadow-none [&]:focus:!outline-none [&_.t-textarea]:!border-0 [&_.t-textarea]:!shadow-none [&_.t-textarea]:!outline-none [&_.t-textarea:hover]:!border-0 [&_.t-textarea:hover]:!shadow-none [&_.t-textarea--focused]:!border-0 [&_.t-textarea--focused]:!shadow-none [&_.t-is-focused]:!border-0 [&_.t-is-focused]:!shadow-none [&_.t-textarea__inner]:!bg-transparent [&_.t-textarea__inner]:!border-0 [&_.t-textarea__inner]:!shadow-none [&_.t-textarea__inner]:!outline-none [&_.t-textarea__inner]:!resize-none [&_.t-textarea__inner]:!min-h-[40px] [&_.t-textarea__inner]:!p-0 [&_.t-textarea__inner:hover]:!border-0 [&_.t-textarea__inner:hover]:!shadow-none [&_.t-textarea__inner:focus]:!border-0 [&_.t-textarea__inner:focus]:!shadow-none [&_.t-textarea__inner:focus]:!outline-none [&_.t-textarea__inner]:disabled:!cursor-not-allowed ${isDark
+            ? '[&_.t-textarea__inner]:!text-white [&_.t-textarea__inner]:placeholder:!text-slate-500'
+            : '[&_.t-textarea__inner]:!text-gray-800 [&_.t-textarea__inner]:placeholder:!text-gray-400'
+            }`}
+        />
+
+        <div className="flex items-center gap-2">
+          {/* {showUpload && (
+            <button onClick={onUpload} className={iconButtonClass} title="上传附件" type="button">
+              <Upload className="w-5 h-5" />
+            </button>
+          )}
+          {showReset && (
+            <button onClick={onReset} className={iconButtonClass} title="重新提问" type="button">
+              <RotateCcw className="w-5 h-5" />
+            </button>
+          )}
+          {showSave && (
+            <button onClick={onSave} className={iconButtonClass} title="保存记录" type="button">
+              <Bookmark className="w-5 h-5" />
+            </button>
+          )}
+          {showCollect && (
+            <button onClick={onCollect} className={iconButtonClass} title="加入收藏" type="button">
+              <Bookmark className="w-5 h-5" />
+            </button>
+          )} */}
+          {onOpenSettings && (
+            <button onClick={onOpenSettings} className={iconButtonClass} title="模型参数设置" type="button">
+              <Settings className="w-5 h-5" />
+            </button>
+          )}
+
+          <button
+            onClick={isLoading ? onStop : onSubmit}
+            disabled={!isLoading && !submitEnabled}
+            className={`px-4 py-2 rounded-xl font-medium transition-all flex items-center gap-2 shadow-sm ${isLoading
+              ? isDark
+                ? 'bg-rose-600 text-white qa-stop-breathing'
+                : 'bg-red-600 text-white qa-stop-breathing'
+              : submitEnabled
+                ? isDark
+                  ? 'bg-blue-600 hover:bg-blue-700 text-white'
+                  : 'bg-red-500 hover:bg-red-600 text-white'
+                : isDark
+                  ? 'bg-slate-600 text-slate-400 cursor-not-allowed'
+                  : 'bg-gray-300 text-gray-500 cursor-not-allowed'
+              }`}
+            type="button"
+          >
+            {isLoading ? <Square className="w-4 h-4 fill-current" /> : <Send className="w-4 h-4" />}
+            {isLoading ? '停止' : '发送'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/web-code/components/qa/QALayout.tsx b/web-code/components/qa/QALayout.tsx
new file mode 100644
index 00000000..0e01ea8d
--- /dev/null
+++ b/web-code/components/qa/QALayout.tsx
@@ -0,0 +1,5 @@
+import { Outlet, Navigate } from 'react-router-dom';
+
+export default function QALayout() {
+  return <Outlet />;
+}
diff --git a/web-code/components/qa/QATypeSwitch.tsx b/web-code/components/qa/QATypeSwitch.tsx
new file mode 100644
index 00000000..0cd7c918
--- /dev/null
+++ b/web-code/components/qa/QATypeSwitch.tsx
@@ -0,0 +1,121 @@
+import { CircleHelp, Bot, Layers } from 'lucide-react';
+import { useTheme } from '../../contexts/ThemeContext';
+
+type QAProvider = 'general' | 'agent' | 'multi-agent';
+type ViewMode = 'single' | 'compare';
+
+interface QATypeSwitchProps {
+  qaProvider: QAProvider; // 当前问答模式：'general' 通用问答 / 'agent' 智能体问答 / 'multi-agent' 协同分析
+  setQaProvider: (provider: QAProvider) => void; // 设置问答模式的回调函数
+  selectedAgentName?: string; // 当选择智能体问答时，当前选中的智能体名称
+  viewMode?: ViewMode; // 当前视图模式（仅通用问答支持）：'single' 单一模式 或 'compare' 对比模式
+  setViewMode?: (mode: ViewMode) => void; // 设置视图模式的回调函数（仅通用问答可用）
+}
+
+export default function QATypeSwitch({
+  qaProvider,
+  setQaProvider,
+  selectedAgentName,
+  viewMode = 'single',
+  setViewMode,
+}: QATypeSwitchProps) {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  return (
+    <div className="flex items-center gap-4">
+      {/* 问答模式切换 */}
+      <div className={`flex rounded-xl p-1 ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+        <button
+          onClick={() => setQaProvider('general')}
+          className={`px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
+            qaProvider === 'general'
+              ? isDark
+                ? 'bg-blue-600 text-white'
+                : 'bg-red-500 text-white'
+              : isDark
+                ? 'text-slate-400 hover:text-white'
+                : 'text-gray-600 hover:text-red-600'
+          }`}
+        >
+          <CircleHelp className="w-4 h-4" />
+          通用问答
+        </button>
+        <button
+          onClick={() => setQaProvider('agent')}
+          className={`px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
+            qaProvider === 'agent'
+              ? isDark
+                ? 'bg-blue-600 text-white'
+                : 'bg-red-500 text-white'
+              : isDark
+                ? 'text-slate-400 hover:text-white'
+                : 'text-gray-600 hover:text-red-600'
+          }`}
+        >
+          <Bot className="w-4 h-4" />
+          智能体问答
+        </button>
+        <button
+          onClick={() => setQaProvider('multi-agent')}
+          className={`px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
+            qaProvider === 'multi-agent'
+              ? isDark
+                ? 'bg-green-600 text-white'
+                : 'bg-green-500 text-white'
+              : isDark
+                ? 'text-slate-400 hover:text-white'
+                : 'text-gray-600 hover:text-green-600'
+          }`}
+        >
+          <Layers className="w-4 h-4" />
+          协同分析
+        </button>
+      </div>
+
+      {/* 当前智能体指示 */}
+      {qaProvider === 'agent' && selectedAgentName && (
+        <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full ${isDark ? 'bg-blue-600/20' : 'bg-blue-50'}`}>
+          <Bot className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-blue-600'}`} />
+          <span className={`text-sm font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+            {selectedAgentName}
+          </span>
+        </div>
+      )}
+
+      {/* 对比模式切换 - 仅通用问答 */}
+      {qaProvider === 'general' && setViewMode && (
+        <div className={`flex rounded-xl p-1 ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+          <button
+            onClick={() => setViewMode('single')}
+            className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+              viewMode === 'single'
+                ? isDark
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-red-500 text-white'
+                : isDark
+                  ? 'text-slate-400 hover:text-white'
+                  : 'text-gray-600 hover:text-red-600'
+            }`}
+          >
+            单一模式
+          </button>
+          <button
+            onClick={() => setViewMode('compare')}
+            className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+              viewMode === 'compare'
+                ? isDark
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-red-500 text-white'
+                : isDark
+                  ? 'text-slate-400 hover:text-white'
+                  : 'text-gray-600 hover:text-red-600'
+            }`}
+          >
+            对比模式
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web-code/components/qa/TaskChat.tsx b/web-code/components/qa/TaskChat.tsx
new file mode 100644
index 00000000..8073ec66
--- /dev/null
+++ b/web-code/components/qa/TaskChat.tsx
@@ -0,0 +1,2885 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  GitCompare,
+  MessageSquare,
+  CheckCircle,
+  AlertCircle,
+  ArrowDown,
+  ExternalLink,
+  Square,
+  X,
+  BookOpen,
+  User2Icon,
+} from 'lucide-react';
+import { Dialog, Select, Slider } from 'tdesign-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import { PageType } from '../../components/Sidebar';
+import { ChatMessage, EmptyChatState, QAAvatar, QAComposer, QASingleRagTrace, QAThinkingRound, QAThinkingTrace, RetrievalThinkingTrace, SingleRagAnswer, TypingIndicator } from './QACommon';
+import GeneralQAHeader from './GeneralQAHeader';
+import GeneralQAConfigSidebar from './GeneralQAConfigSidebar';
+import type { ComparePane, CompareResult, KnowledgeBaseChunk, Message, QAMode, qaModeItem, SourceItem, stateItem, ToolCallData, ViewMode } from './GeneralQA.types';
+import {
+  chatDataJSON,
+  createComparePane,
+  createMockSingleRagMessages,
+  createMultiRoundStreamTrace,
+  createThinkingTrace,
+  extractJsonObjects,
+  mapDocsToSources,
+  mapReferenceToSource,
+  parseSingleRagStream,
+  platformTypeChange,
+} from './GeneralQA.mock';
+import { requestCrudService } from '@/service/request-axios-service';
+
+/**
+ * 通用问答组件
+ * 支持单轮RAG、多轮RAG、深度检索及结果对比功能
+ * @param onNavigate - 页面导航函数
+ * @param initialMode - 初始模式（可选）
+ */
+
+const zncmUrl = import.meta.env.VITE_API_BASE_URL || '';
+const chatUrl = import.meta.env.VITE_AIPI_CHAT_URL || '';
+const generateUrl = import.meta.env.VITE_AIPI_GENERATE_CHAT_URL || '';
+const taskChatUrl = import.meta.env.VITE_AIPI_TASK_CHAT_URL || '';
+const knowledgeUrl = import.meta.env.VITE_AIPI_KNOWLEDGE_URL;
+const service = requestCrudService;
+const qaModeList: qaModeItem[] = [
+  { value: 'deep-search' as const, label: '任务检索', icon: BookOpen, desc: '检索相关任务' },
+];
+const TaskChat: React.FC<{ onNavigate: (page: PageType) => void; initialMode?: string }> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 状态管理
+  // 视图模式：单一模式或对比模式
+  const [viewMode, setViewMode] = useState<ViewMode>('single');
+  // 问答模式：单轮RAG、多轮RAG、深度检索
+  const [qaMode, setQaMode] = useState<QAMode>('single-round');
+  // 对比模式下的左侧模式
+  const [compareLeftMode, setCompareLeftMode] = useState<QAMode>('single-round');
+  // 对比模式下的右侧模式
+  const [compareRightMode, setCompareRightMode] = useState<QAMode>('multi-round');
+
+  // 知识范围设置
+  const [knowledgeScope, setKnowledgeScope] = useState<'all' | 'specific-kb' | 'specific-domain'>('all');
+
+  // 回答偏好设置
+  const [answerStyle, setAnswerStyle] = useState<'concise' | 'detailed'>('detailed');
+  const [showSources, setShowSources] = useState(true);
+  const [showProcess, setShowProcess] = useState(false);
+
+  // 对比设置
+  const [compareLayout, setCompareLayout] = useState<'horizontal' | 'vertical'>('horizontal');
+  const [autoSummarizeDiff, setAutoSummarizeDiff] = useState(true);
+  const [recommendBetter, setRecommendBetter] = useState(true);
+
+  // 消息和结果状态
+  // `messages` 驱动单一模式聊天区；`compareResult` 驱动对比模式左右面板。
+  // `isPreConnectLoading` 表示请求已发起但还没拿到可展示的 assistant 消息，用于显示“正在连接/生成”的占位状态。
+  const [messages, setMessages] = useState<Message[]>([]);
+  // 用户当前输入的文本内容，用于绑定输入框
+  const [inputValue, setInputValue] = useState('');
+  // 是否正在处理请求（包含真实请求和模拟请求）
+  const [isLoading, setIsLoading] = useState(false);
+  // 是否处于"连接中"状态，表示已发起请求但还未收到可展示的响应
+  const [isPreConnectLoading, setIsPreConnectLoading] = useState(false);
+  // 存储发生的错误信息，用于显示错误提示
+  const [error, setError] = useState<string | null>(null);
+  // 对比模式下的结果数据，包含左右两侧的回答和来源信息
+  const [compareResult, setCompareResult] = useState<CompareResult[]>([]);
+  // 对比模式下用户输入的问题内容，用于左右对比时的统一输入
+  const [compareUserInput, setCompareUserInput] = useState('');
+  // 是否折叠左侧配置面板，true 为折叠，false 为展开
+  const [isLeftSidebarCollapsed, setIsLeftSidebarCollapsed] = useState(false);
+  // 是否启用自动滚动，当用户手动滚动时会自动关闭
+  const [isAutoScrollEnabled, setIsAutoScrollEnabled] = useState(true);
+  // 是否显示"滚动到底部"按钮，当有未读消息且用户已滚动时显示
+  const [showScrollToBottom, setShowScrollToBottom] = useState(false);
+  // 当前选中的引用来源，用于显示引用详情弹窗
+  const [selectedCitation, setSelectedCitation] = useState<SourceItem | null>(null);
+  const [editingMessageId, setEditingMessageId] = useState<string | null>(null);
+  const [editingThinking, setEditingThinking] = useState('');
+  const [editingAnswer, setEditingAnswer] = useState('');
+  // 模型参数设置弹窗状态。
+  // 这些值会进入单轮 RAG 的真实请求体；模拟流仍复用同一套 UI，方便接口恢复后无缝切换。
+  const [isModelSettingsOpen, setIsModelSettingsOpen] = useState(false);
+  const [modelName, setModelName] = useState('OpenAI3');
+  const [scoreThreshold, setScoreThreshold] = useState(0.5);
+  const [temperature, setTemperature] = useState(0.3);
+
+  // 当模型正在生成时，如果用户切换模式或跳转页面，先把原动作暂存到 ref，待用户确认停止后再执行。
+  // 使用 ref 而不是 state 可以避免弹窗确认过程触发额外渲染，也不会被闭包中的旧状态影响。
+  const pendingActionRef = useRef<(() => void) | null>(null);
+
+  // 防止 Enter keydown 和按钮 click 在 React 状态更新前重复触发提交。
+  const submitLockRef = useRef(false);
+
+  // 真实流式请求的 reader 句柄，用于“停止生成”时取消浏览器流读取。
+  const readerRef = useRef<any>(null);
+  // 对比模式会同时启动左右两路请求，因此分别保存 reader，保证可以单独停止某一侧生成。
+  const compareReaderRef = useRef<{
+    left: any;
+    right: any;
+  }>({ left: null, right: null });
+  // 多轮接口创建任务后会返回 task_id，这里预留给后续“按任务取消/查询状态”等能力。
+  const taskIdRef = useRef<string | null>(null);
+
+  // 本地模拟流没有真实 reader，因此用停止标记在异步循环中主动中断。
+  const mockSingleRoundStoppedRef = useRef(false);
+  const mockMultiRoundStoppedRef = useRef(false);
+  const chatListRef = useRef<HTMLDivElement | null>(null);
+  const userId = useRef(387); // 用户id
+  const qaType = useRef('TASKCHAT'); // 问答类型
+  const chatDataId = useRef(); // 聊天窗口id
+  const compareChatId = useRef(); // 对比对话记录id
+
+  // 检索过程展示状态
+  const [searchProcess, setSearchProcess] = useState({
+    currentMode: '单轮RAG',
+    rounds: 1,
+    hits: 5,
+    queryRewrite: '',
+  });
+
+  const state = useRef<stateItem>({
+    compareIndex: 0,
+    compareId: '',
+    messageList: [],
+    compareResult: []
+  })
+
+  /**
+   * 处理单轮 RAG 问答请求
+   * 
+   * 单轮 RAG 的处理流程：
+   * 1. 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
+   * 2. API 返回 SSE 流式响应，包含多个 JSON 对象
+   * 3. 逐个解析流式 JSON，提取 answer 和 docs 字段
+   * 4. 通过 applyAnswerToken 将流式 token 追加到消息的 thinkingMarkdown/answerMarkdown
+   * 5. 实时更新消息来源（sources）和检索统计（searchProcess）
+   * 
+   * @param query - 用户输入的问题文本
+   */
+  const handleSingleRoundRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    // 清空之前的错误信息
+    setError(null);
+    // 标记开始加载，禁用提交按钮防止重复点击
+    setIsLoading(true);
+    // 标记"连接中"状态，显示加载占位符
+    setIsPreConnectLoading(true);
+    // 用于存储当前 assistant 消息的 ID，以便后续更新该消息内容
+    let assistantId = '';
+
+    // 标志位：当前处理的 token 是否处于 <think>... 标签内（解析思考过程）
+    let inThink = false;
+    // 标志位：是否已经遇到过 <think> 标签开始解析思考内容
+    let thinkStarted = false;
+
+    /**
+     * 将流式接收到的 token 应用到对应消息的 singleRagTrace 中
+     * 该函数会解析 token 中的 <think>... 标签，将思考过程和回答分开存储
+     * @param token - 从流中接收到的文本片段
+     */
+    const applyAnswerToken = (token: string) => {
+      const mesItem = state.current.messageList[1];
+      // 获取当前消息的思考和回答内容
+      let thinkingMarkdown = mesItem.singleRagTrace.thinkingMarkdown;
+      let answerMarkdown = mesItem.singleRagTrace.answerMarkdown;
+      let thinkingComplete = mesItem.singleRagTrace.thinkingComplete || false;
+      // 剩余未处理的 token 内容
+      let remaining = token;
+      console.log('remaining', remaining)
+      // 当前处于 <think> 标签内（解析思考过程），查找结束标签 
+      while (remaining) {
+        if (inThink) {
+          const endIdx = remaining.indexOf('</think>');
+          if (endIdx === -1) {
+            thinkingMarkdown += remaining;
+            remaining = '';
+          } else {
+            thinkingMarkdown += remaining.slice(0, endIdx);
+            remaining = remaining.slice(endIdx + '</think>'.length);
+            inThink = false;
+            thinkingComplete = true;
+          }
+        } else {
+          const startIdx = remaining.indexOf('<think>');
+          console.log('startIdx', startIdx)
+          if (startIdx === -1) {
+            answerMarkdown += remaining;
+            remaining = '';
+          } else {
+            answerMarkdown += remaining.slice(0, startIdx);
+            remaining = remaining.slice(startIdx + '<think>'.length);
+            inThink = true;
+            thinkStarted = true;
+          }
+        }
+      }
+      state.current.messageList[1] = {
+        ...mesItem,
+        singleRagTrace: {
+          ...mesItem.singleRagTrace,
+          // 更新思考和回答的 markdown 内容
+          thinkingMarkdown,
+          answerMarkdown,
+          // 只有当已经开始解析思考内容时才更新 thinkingComplete 标志
+          thinkingComplete: thinkStarted ? thinkingComplete : true,
+        },
+      }
+      if (!side) {
+        setMessages((prev) => prev.map((msg) => {
+          // 跳过不是当前 assistant 消息或没有 singleRagTrace 的消息
+          if (msg.id !== assistantId || !msg.singleRagTrace) return msg;
+          // 返回更新后的消息对象，保留 singleRagTrace 中的所有字段
+          return {
+            ...state.current.messageList[1],
+          };
+        }));
+      } else {
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            singleRagTrace: {
+              title: '大模型',
+              thinkingMarkdown,
+              answerMarkdown,
+              thinkingComplete: thinkStarted ? thinkingComplete : true,
+            },
+          };
+        });
+      }
+    };
+
+    const updatePane = (side: 'left' | 'right', updater: (pane: ComparePane) => ComparePane) => {
+      setCompareResult((prev) => {
+        if (!prev) return prev;
+        return {
+          ...prev,
+          [side]: updater(prev[side]),
+        };
+      });
+    };
+
+    try {
+      // 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
+      const response = await fetch(`${chatUrl}/chat/knowledge_base_chat_tiaoshi`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        // 请求体包含查询内容、知识库名称、检索参数、模型配置等
+        body: JSON.stringify({
+          query,                        // 用户输入的问题
+          knowledge_base_name: [],      // 知识库名称列表，空数组表示使用所有知识库
+          top_k: 5,                     // 返回最相似的 5 条结果
+          score_threshold: scoreThreshold, // 相似度阈值，过滤低质量检索结果
+          history: [],                  // 对话历史，用于多轮对话
+          stream: true,                 // 启用流式响应
+          model_name: modelName,         // 使用的模型名称
+          temperature,                   // 生成温度，控制随机性
+          prompt_name: 'default',        // 使用的提示词模板
+          local_doc_url: false,         // 是否返回本地文档 URL
+        }),
+      });
+
+      // 检查 HTTP 响应状态
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      // 确保响应体存在（SSE 流需要 body）
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      // 收到有效响应后，关闭"连接中"状态，开始显示实际内容
+      setIsPreConnectLoading(false);
+
+      // 生成唯一 ID 用于标识这条 assistant 消息
+      assistantId = `assistant-${Date.now()}`;
+      // 初始化思考过程追踪对象
+      const initialTrace: QASingleRagTrace = {
+        title: '单轮 RAG 思考过程',
+        thinkingMarkdown: '', // 思考过程内容
+        answerMarkdown: '',    // 最终回答内容
+        thinkingComplete: false, // 思考是否完成
+      };
+      const messageItem: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        singleRagTrace: initialTrace,
+        sources: [], // 初始为空，随着检索结果更新
+      }
+      state.current.messageList.push(messageItem); // 数据存储
+      // 将 assistant 消息添加到消息列表中
+      setMessages((prev) => [...prev, messageItem]);
+
+      // 获取响应体的流式读取器
+      const reader = response.body.getReader();
+      // 保存 reader 引用，用于"停止生成"功能
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      // 创建文本解码器，将二进制数据转换为字符串
+      const decoder = new TextDecoder();
+      // buffer 用于暂存未完成的 JSON 片段
+      let buffer = '';
+      let docsList: any[] = [];
+      try {
+        // 持续读取流数据，直到流结束
+        while (true) {
+          // 读取下一个数据块
+          const { done, value } = await reader.read();
+          // done 为 true 时表示流已结束
+          if (done) {
+            console.log('聊天记录', state.current.messageList);
+            chatHistoryAddSearch();
+            break;
+          }
+
+          // 将二进制数据解码并追加到 buffer
+          buffer += decoder.decode(value, { stream: true });
+          // 从 buffer 中提取完整的 JSON 对象
+          const extracted = extractJsonObjects(buffer);
+          if (buffer.includes('docs')) {
+            try {
+              docsList = chatDataJSON(buffer).docsList || [];
+            } catch (error: any) {
+              console.log(error);
+            }
+          }
+          // 剩余无法解析的内容保留到下次处理
+          buffer = extracted.rest;
+
+          // 遍历所有提取到的 JSON 对象
+          for (const jsonText of extracted.objects) {
+            try {
+              // 解析知识库返回的 JSON 片段
+              const parsed = parseKnowledgeBaseChunk(jsonText);
+              // 如果有回答内容，追加到消息的 answerMarkdown
+              if (typeof parsed.answer === 'string') {
+                applyAnswerToken(parsed.answer);
+              }
+              // 如果有检索文档，更新消息的来源信息
+              if (parsed.docs) {
+                // 将 docs 转换为 sources 格式
+                const mappedDocs = docsList.map((item: any) => ({
+                  title: item.m_title,
+                  type: item.source1,
+                  snippet: item.m_content,
+                  source: item.source1,
+                  time: item.m_publish,
+                  url: item.recUuid,
+                  content: item.m_content || '',
+                }));
+                // 更新检索统计信息
+                setSearchProcess((prev) => ({ ...prev, hits: prev.hits + mappedDocs.length }));
+                state.current.messageList[1].sources = mappedDocs;
+                // 更新消息的来源列表
+                if (!side) {
+                  setMessages((prev) => prev.map((msg) => (
+                    msg.id === assistantId ? { ...msg, sources: mappedDocs } : msg
+                  )));
+                } else {
+                  updatePane(side, (pane) => ({ ...pane, sources: mappedDocs }));
+                }
+              }
+            } catch (parseError) {
+              // 解析错误不影响主流程，记录日志继续处理
+              console.error('单轮RAG流式JSON解析错误:', parseError);
+            }
+          }
+        }
+      } finally {
+        // 流读取完成后，释放 reader 锁并清空引用
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      // 请求失败处理
+      console.error('单轮RAG请求失败:', runError);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      state.current.messageList = [];
+    }
+  };
+
+  /**
+ * 处理单轮 RAG 问答请求
+ * 
+ * 单轮 RAG 的处理流程：
+ * 1. 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
+ * 2. API 返回 SSE 流式响应，包含多个 JSON 对象
+ * 3. 逐个解析流式 JSON，提取 answer 和 docs 字段
+ * 4. 通过 applyAnswerToken 将流式 token 追加到消息的 thinkingMarkdown/answerMarkdown
+ * 5. 实时更新消息来源（sources）和检索统计（searchProcess）
+ * 
+ * @param query - 用户输入的问题文本
+ */
+  const chatRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    // 清空之前的错误信息
+    setError(null);
+    // 标记开始加载，禁用提交按钮防止重复点击
+    setIsLoading(true);
+    // 标记"连接中"状态，显示加载占位符
+    setIsPreConnectLoading(true);
+    // 用于存储当前 assistant 消息的 ID，以便后续更新该消息内容
+    let assistantId = '';
+
+    // 标志位：当前处理的 token 是否处于 <think>... 标签内（解析思考过程）
+    let inThink = false;
+    // 标志位：是否已经遇到过 <think> 标签开始解析思考内容
+    let thinkStarted = false;
+
+    /**
+     * 将流式接收到的 token 应用到对应消息的 singleRagTrace 中
+     * 该函数会解析 token 中的 <think>... 标签，将思考过程和回答分开存储
+     * @param token - 从流中接收到的文本片段
+     */
+    const applyAnswerToken = (token: string, side: 'left' | 'right' | null = null) => {
+      let mesItem: any = state.current.messageList[1];
+      if (side === 'left' || side === 'right') {
+        mesItem = state.current.compareResult[state.current.compareIndex][side];
+      }
+      // 获取当前消息的思考和回答内容
+      let thinkingMarkdown = mesItem.singleRagTrace.thinkingMarkdown;
+      let answerMarkdown = mesItem.singleRagTrace.answerMarkdown;
+      let thinkingComplete = mesItem.singleRagTrace.thinkingComplete || false;
+      // 剩余未处理的 token 内容
+      let remaining = token;
+      // console.log('remaining', remaining)
+      // 当前处于 <think> 标签内（解析思考过程），查找结束标签 
+      while (remaining) {
+        if (inThink) {
+          const endIdx = remaining.indexOf('</think>');
+          if (endIdx === -1) {
+            thinkingMarkdown += remaining;
+            remaining = '';
+          } else {
+            thinkingMarkdown += remaining.slice(0, endIdx);
+            remaining = remaining.slice(endIdx + '</think>'.length);
+            inThink = false;
+            thinkingComplete = true;
+          }
+        } else {
+          const startIdx = remaining.indexOf('<think>');
+          if (startIdx === -1) {
+            answerMarkdown += remaining;
+            remaining = '';
+          } else {
+            answerMarkdown += remaining.slice(0, startIdx);
+            remaining = remaining.slice(startIdx + '<think>'.length);
+            inThink = true;
+            thinkStarted = true;
+          }
+        }
+      }
+      if (!side) {
+        state.current.messageList[1] = {
+          ...mesItem,
+          singleRagTrace: {
+            ...mesItem.singleRagTrace,
+            // 更新思考和回答的 markdown 内容
+            thinkingMarkdown,
+            answerMarkdown,
+            // 只有当已经开始解析思考内容时才更新 thinkingComplete 标志
+            thinkingComplete: thinkStarted ? thinkingComplete : true,
+          },
+        }
+        setMessages((prev) => prev.map((msg) => {
+          // 跳过不是当前 assistant 消息或没有 singleRagTrace 的消息
+          if (msg.id !== assistantId || !msg.singleRagTrace) return msg;
+          // 返回更新后的消息对象，保留 singleRagTrace 中的所有字段
+          return {
+            ...state.current.messageList[1],
+          };
+        }));
+      } else {
+        state.current.compareResult[state.current.compareIndex][side].singleRagTrace = {
+          ...mesItem.singleRagTrace,
+          // 更新思考和回答的 markdown 内容
+          thinkingMarkdown,
+          answerMarkdown,
+          // 只有当已经开始解析思考内容时才更新 thinkingComplete 标志
+          thinkingComplete: thinkStarted ? thinkingComplete : true,
+        }
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            singleRagTrace: {
+              title: '大模型',
+              thinkingMarkdown,
+              answerMarkdown,
+              thinkingComplete: thinkStarted ? thinkingComplete : true,
+            },
+          };
+        });
+      }
+    };
+
+    try {
+      // 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
+      const response = await fetch(`${chatUrl}/chat/chat`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        // 请求体包含查询内容、知识库名称、检索参数、模型配置等
+        body: JSON.stringify({
+          query,                        // 用户输入的问题
+          history: [],                  // 对话历史，用于多轮对话
+          stream: true,                 // 启用流式响应
+          model_name: modelName,         // 使用的模型名称
+          temperature,                   // 生成温度，控制随机性
+          prompt_name: 'default',        // 使用的提示词模板
+          max_tokens: 1000
+        }),
+      });
+
+      // 检查 HTTP 响应状态
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      // 确保响应体存在（SSE 流需要 body）
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      // 收到有效响应后，关闭"连接中"状态，开始显示实际内容
+      setIsPreConnectLoading(false);
+
+      // 生成唯一 ID 用于标识这条 assistant 消息
+      assistantId = `assistant-${Date.now()}`;
+      // 初始化思考过程追踪对象
+      const initialTrace: QASingleRagTrace = {
+        title: '大模型思考过程',
+        thinkingMarkdown: '', // 思考过程内容
+        answerMarkdown: '',    // 最终回答内容
+        thinkingComplete: false, // 思考是否完成
+      };
+      const messageItem: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        singleRagTrace: initialTrace,
+        sources: [], // 初始为空，随着检索结果更新
+      }
+      if (!side) {
+        state.current.messageList.push(messageItem);
+        // 将 assistant 消息添加到消息列表中
+        setMessages((prev) => [...prev, messageItem]);
+      } else if (side === 'left' || side === 'right') {
+        state.current.compareResult[state.current.compareIndex][side].singleRagTrace = initialTrace;
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            singleRagTrace: initialTrace,
+          };
+        });
+      }
+
+      // 获取响应体的流式读取器
+      const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
+      // 保存 reader 引用，用于"停止生成"功能
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      // 创建文本解码器，将二进制数据转换为字符串
+      const decoder = new TextDecoder();
+      // buffer 用于暂存未完成的 JSON 片段
+
+      try {
+        // 持续读取流数据，直到流结束
+        while (true) {
+          // 读取下一个数据块
+          const { done, value } = await reader.read();
+          // done 为 true 时表示流已结束
+          if (done) {
+            console.log('聊天记录', state.current.messageList);
+            if (!side) {
+              chatHistoryAddSearch();
+            }
+            break;
+          }
+          applyAnswerToken(value, side);
+        }
+      } finally {
+        // 流读取完成后，释放 reader 锁并清空引用
+        if (readerRef.current) {
+          // readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      // 请求失败处理
+      console.error('单轮RAG请求失败:', runError);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      state.current.messageList = [];
+    }
+  };
+
+  /**
+   * 解析类 JavaScript 对象字符串中的字符串值。
+   *
+   * 后端单轮 RAG 流有时不是严格 JSON，而是 `{answer: '...'}` 这种对象片段。
+   * 该函数只负责把单/双引号包裹的 answer 内容还原成普通字符串，保留换行和转义字符。
+   */
+  const parseLooseStringValue = (rawValue: string): string => {
+    try {
+      return JSON.parse(rawValue) as string;
+    } catch {
+      const trimmedValue = rawValue.trim();
+      if (trimmedValue.startsWith("'") && trimmedValue.endsWith("'")) {
+        return trimmedValue
+          .slice(1, -1)
+          .replace(/\\n/g, '\n')
+          .replace(/\\r/g, '\r')
+          .replace(/\\t/g, '\t')
+          .replace(/\\'/g, "'")
+          .replace(/\\\\/g, '\\');
+      }
+      throw new Error(`无法解析字符串值: ${rawValue}`);
+    }
+  };
+
+  const parseLooseValue = (rawValue: string): unknown => {
+    try {
+      return JSON.parse(rawValue);
+    } catch {
+      return parseLooseStringValue(rawValue);
+    }
+  };
+
+  /**
+   * 将单轮知识库流中的一个对象片段转换为统一数据结构。
+   *
+   * 兼容两类返回：
+   * - 严格 JSON：`{"answer":"..."}` / `{"docs":[...]}`
+   * - 宽松对象：`{answer: '...'}` / `{docs: [...]}`
+   *
+   * 真实接口和本地模拟都走同一个解析函数，确保联调时只需要替换数据源，不需要改 UI 更新逻辑。
+   */
+  const parseKnowledgeBaseChunk = (jsonText: string): KnowledgeBaseChunk => {
+    try {
+      return JSON.parse(jsonText) as KnowledgeBaseChunk;
+    } catch {
+      const objectText = jsonText.trim();
+      const answerMatch = objectText.match(/^\{\s*answer\s*:\s*([\s\S]*)\s*\}$/);
+      if (answerMatch) {
+        const rawValue = answerMatch[1].trim();
+        return { answer: parseLooseStringValue(rawValue) };
+      }
+
+      const docsMatch = objectText.match(/^\{\s*docs\s*:\s*([\s\S]*)\s*\}$/);
+      if (docsMatch) {
+        return { docs: parseLooseValue(docsMatch[1]) as KnowledgeBaseChunk['docs'] };
+      }
+
+      const normalizedText = objectText.replace(/([{,]\s*)(answer|docs)(\s*:)/g, '$1"$2"$3');
+      return JSON.parse(normalizedText) as KnowledgeBaseChunk;
+    }
+  };
+
+  const sleep = (ms: number) => new Promise((resolve) => {
+    window.setTimeout(resolve, ms);
+  });
+  const updatePane = (side: 'left' | 'right', updater: (pane: ComparePane) => ComparePane) => {
+    setCompareResult((prev) => prev.map((msg) => {
+      if (msg.id !== state.current.compareId) return msg
+      return {
+        ...msg,
+        [side]: updater(msg[side]),
+      };
+    }));
+  };
+  /**
+   * 处理多轮真实接口里的工具调用事件。
+   *
+   * `show_text` 用于追加思考或最终回答；`local_search` / `tavily_search` 用于把检索结果填入最近一轮。
+   * 这里保持事件到 UI trace 的单向映射，避免请求层和展示层互相耦合。
+   */
+  const handleToolCall = (toolData: ToolCallData, assistantId: string, side: 'left' | 'right' | null = null) => {
+    let mesItem: any = state.current.messageList[1];
+    if (side === 'left' || side === 'right') {
+      mesItem = state.current.compareResult[state.current.compareIndex][side];
+      console.log('mesItem', mesItem)
+    }
+    const trace = { ...mesItem.thinkingTrace, rounds: [...mesItem.thinkingTrace.rounds] };
+    const lastRound = trace.rounds[trace.rounds.length - 1];
+    switch (toolData.tool_name) {
+      case 'show_text': {
+        const chatText = toolData.tool_input.text || '';
+        if (chatText.includes('<think>')) {
+          const thinkContent = chatText.replace('<think>', '').replace('</think>', '').trim();
+          if (trace.rounds[0].title !== '正在准备检索') {
+            lastRound.queryLoading = false;
+            lastRound.queryShow = lastRound.retrievals.length > 0;
+            trace.rounds.push({
+              id: `round-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+              title: '思考中',
+              thoughtMarkdown: thinkContent,
+              query: '',
+              queryLoading: true,
+              queryShow: true,
+              retrievals: [],
+            });
+          } else {
+            // lastRound.queryLoading = false;
+            trace.rounds[0].title = '思考过程'
+            trace.rounds[0].thoughtMarkdown = thinkContent;
+          }
+        } else {
+          lastRound.queryLoading = false;
+          trace.finalAnswerMarkdown += chatText;
+          trace.thinkingComplete = true;
+        }
+        break;
+      }
+      case 'tavily_search':
+      case 'local_search': {
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as {
+              query?: string;
+              results?: Array<{ title?: string; content?: string; url?: string }>;
+            };
+
+            lastRound.query = result.query || lastRound.query;
+            lastRound.queryLoading = false;
+            lastRound.title = toolData.tool_name === 'local_search' ? '本地知识检索' : '联网检索';
+            lastRound.retrievals = (result.results || []).map((item, idx) => ({
+              id: `${toolData.tool_name}-${idx}`,
+              title: item.title || '未命名结果',
+              content: item.content || '',
+              source: item.url || '',
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        }
+        break;
+      }
+      case 'google_search': { // 处理多轮检索
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as {
+              organic: Array<{ title?: string; content?: string; url?: string; recUuid?: string; publish_time?: string }>;
+            };
+            lastRound.queryLoading = false;
+            lastRound.title = '思考过程';
+            lastRound.retrievals = (result.organic || []).map((item, idx) => ({
+              id: item.recUuid,
+              title: item.title || '未命名结果',
+              content: item.content || '',
+              source: item.recUuid || '',
+              time: item.publish_time,
+              recUuid: item.recUuid,
+              type: 'more'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.q) {
+          lastRound.query = toolData.tool_input.q;
+        }
+        break;
+      }
+      case 'getTaskLikeTop': { // 任务检索
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as {
+              data: Array<{ taskName?: string; overview?: string; id?: number; keywords?: string; taskDirection?: string; taskLevel?: number; taskStartDate: string; taskEndDate: string }>;
+            }
+            console.log('result', result);
+            lastRound.queryLoading = false;
+            lastRound.title = '思考过程';
+            lastRound.retrievals = (result.data || []).map((item, idx) => ({
+              id: String(item.id),
+              title: item.taskName || '未命名结果',
+              content: item.overview || '',
+              keywords: item.keywords,
+              taskDirection: item.taskDirection,
+              time: `${item.taskStartDate}-${item.taskEndDate}`,
+              type: 'task'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword) {
+          lastRound.query = toolData.tool_input.keyword;
+        }
+        break;
+      }
+      case 'search_user_profile': { // 画像检索
+        lastRound.title = '靶标平台画像库';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; page_content?: string; 平台?: string; 类型?: string; 粉丝数?: number; }>;
+            console.log('result', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.page_content || '',
+              platform: platformTypeChange(item.平台) || '',
+              fans: item.粉丝数 || 0,
+              type: 'hx'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
+          lastRound.queryTitle = '检索词';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query || toolData.tool_input.user_fig;
+        }
+        break;
+      }
+      case 'get_taiwan_news': { // 查找台湾热点新闻
+        lastRound.title = '台湾热点新闻';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
+            console.log('get_taiwan_news', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.content || '',
+              platform: platformTypeChange(item.platform) || '',
+              comment_count: item.comment_count,
+              message_id: item.message_id,
+              time: item.publish_time,
+              type: 'taiwan_news'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
+          lastRound.queryTitle = '搜索台湾新闻';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query;
+        }
+        break;
+      }
+      case 'search_keyword_taiwan_news': { // 查找台湾热点新闻
+        lastRound.title = '台湾热点新闻';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
+            console.log('get_taiwan_news', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.content || '',
+              platform: platformTypeChange(item.platform) || '',
+              comment_count: item.comment_count,
+              message_id: item.message_id,
+              time: item.publish_time,
+              type: 'taiwan_news'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
+          lastRound.queryTitle = '搜索台湾新闻';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query;
+        }
+        break;
+      }
+      case 'get_world_news': {
+        lastRound.title = '世界热点新闻';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
+            console.log('get_taiwan_news', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.content || '',
+              platform: platformTypeChange(item.platform) || '',
+              comment_count: item.comment_count,
+              message_id: item.message_id,
+              time: item.publish_time,
+              type: 'world_news'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
+          lastRound.queryTitle = '搜索世界新闻';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query;
+        }
+        break;
+      }
+      case 'get_root_messaage_comment': { // 获取某条消息的全部评论
+        lastRound.title = '获取该消息的全部评论';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
+            console.log('get_taiwan_news', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.content || '',
+              platform: platformTypeChange(item.platform) || '',
+              comment_count: item.comment_count,
+              message_id: item.message_id,
+              time: item.publish_time,
+              type: 'messaage_comment'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query || toolData.tool_input.platform) {
+          lastRound.queryTitle = '查找平台';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query || platformTypeChange(toolData.tool_input.platform);
+        }
+        break;
+      }
+      case 'search_user_behavior': { // 查询该用户的历史行为
+        lastRound.title = '查询该用户的历史行为';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result);
+            console.log('search_user_behavior', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result.slice(0, 10) || []).map((item, idx) => ({
+              id: item,
+              title: item,
+              content: item,
+              type: 'user_behavior'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query || toolData.tool_input.platform) {
+          lastRound.queryTitle = '查找平台';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query || platformTypeChange(toolData.tool_input.platform);
+        }
+        break;
+      }
+      case 'get_america_news': { // 根据关键词获取美国热点新闻
+        lastRound.title = '美国热点新闻';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
+            console.log('get_taiwan_news', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.content || '',
+              platform: platformTypeChange(item.platform) || '',
+              comment_count: item.comment_count,
+              message_id: item.message_id,
+              time: item.publish_time,
+              type: 'america_news'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
+          lastRound.queryTitle = '查询美国热点新闻';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query;
+        }
+        break;
+      }
+      case 'get_time_data': { // 态势新闻搜索
+        lastRound.title = '态势新闻搜索';
+        console.log('get_time_data', toolData.tool_input)
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result)  as Array<{ title?: string; textid?: string; hot_num?: number; date?: string; content?: string }>
+            console.log('get_time_data', result);
+            lastRound.queryLoading = false;
+            lastRound.queryTitle = '查询态势新闻';
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.textid,
+              title: item.title,
+              content: item.content || '',
+              time: item.date,
+              hot_num: item.hot_num,
+              type: 'get_time_data'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query || toolData.tool_input.s || toolData.tool_input.e) {
+          lastRound.query = `${toolData.tool_input.s} - ${toolData.tool_input.e}`;
+        }
+        break;
+      }
+       case 'get_textid_content': { // 获取新闻详细内容
+        lastRound.title = '获取新闻详细内容';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result)
+            console.log('get_textid_content', result);
+            lastRound.queryLoading = false;
+            lastRound.textidContent = result.content;
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        }
+        break;
+      }
+      default:
+        break;
+    }
+    if (!side) {
+      state.current.messageList[1] = {
+        ...mesItem,
+        thinkingTrace: trace,
+      }
+      setMessages((prevMessages) => prevMessages.map((msg) => {
+        if (msg.id !== assistantId || msg.role !== 'assistant' || !msg.thinkingTrace) return msg;
+        return {
+          ...msg,
+          thinkingTrace: trace,
+        };
+      }));
+    } else {
+      state.current.compareResult[state.current.compareIndex][side].thinkingTrace = trace;
+      updatePane(side, (pane) => {
+        return {
+          ...pane,
+          thinkingTrace: trace,
+        };
+      });
+    }
+  };
+
+  /**
+   * 处理真实多轮 RAG 请求。
+   *
+   * 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
+   * 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
+   */
+  const handleRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    setError(null);
+    setIsLoading(true);
+    setIsPreConnectLoading(true);
+    try {
+      const response = await fetch(`${generateUrl}/generate`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: query }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      setIsPreConnectLoading(false);
+
+      const assistantId = `assistant-${Date.now()}`;
+      const assistantMessage: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        thinkingTrace: createMultiRoundStreamTrace(),
+      };
+      if (!side) {
+        state.current.messageList.push(assistantMessage); // 数据存储
+        // 接口连通后再展示多轮检索主题与过程
+        setMessages((prev) => [...prev, assistantMessage]);
+      } else if (side === 'left' || side === 'right') {
+        state.current.compareResult[state.current.compareIndex][side].thinkingTrace = createMultiRoundStreamTrace();
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            thinkingTrace: createMultiRoundStreamTrace(),
+          };
+        });
+      }
+
+      const reader = response.body.getReader();
+      // 保存 reader 引用，用于"停止生成"功能
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            console.log('聊天记录', state.current.compareResult);
+            if (!side) {
+              chatHistoryAddSearch();
+            }
+            break;
+          }
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          const lastLine = lines.pop();
+          buffer = lastLine || '';
+
+          for (const line of lines) {
+            if (!line.startsWith('data: ')) continue;
+
+            try {
+              const parsedData = JSON.parse(line.slice(6)) as {
+                event: string;
+                data: any;
+              };
+              const { event, data } = parsedData;
+
+              switch (event) {
+                case 'task_created': {
+                  taskIdRef.current = data?.task_id || null;
+                  break;
+                }
+                case 'tool_call': {
+                  handleToolCall(data as ToolCallData, assistantId, side);
+                  break;
+                }
+                case 'message': {
+                  if (typeof data === 'string') {
+                    setMessages((prevMessages) => prevMessages.map((msg) => {
+                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
+                      return {
+                        ...msg,
+                        thinkingTrace: {
+                          ...msg.thinkingTrace,
+                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
+                        },
+                      };
+                    }));
+                  }
+                  break;
+                }
+                case 'references': {
+                  const refs = Array.isArray(data?.references) ? data.references : [];
+                  const mappedRefs = refs.map(mapReferenceToSource);
+                  setSearchProcess((prev) => ({
+                    ...prev,
+                    hits: mappedRefs.length,
+                  }));
+                  setMessages((prevMessages) => prevMessages.map((msg) => (
+                    msg.id === assistantId
+                      ? { ...msg, sources: mappedRefs }
+                      : msg
+                  )));
+                  break;
+                }
+                case 'done': {
+                  setIsLoading(false);
+                  break;
+                }
+                default:
+                  console.log(`未知事件类型: ${event}`, data);
+              }
+            } catch (parseError) {
+              console.error('JSON解析错误:', parseError);
+              console.error('原始数据:', line.slice(6));
+            }
+          }
+        }
+      } finally {
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      console.error('处理请求时发生错误:', runError);
+      setIsLoading(false);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+      setIsPreConnectLoading(false);
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      handleStopCompareSide(side);
+    }
+  };
+
+  /**
+ * 处理任务检索 请求。
+ *
+ * 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
+ * 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
+ */
+  const handleTaskRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    setError(null);
+    setIsLoading(true);
+    setIsPreConnectLoading(true);
+
+    try {
+      const response = await fetch(`${taskChatUrl}/generate`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: query }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      setIsPreConnectLoading(false);
+
+      const assistantId = `assistant-${Date.now()}`;
+      const assistantMessage: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        thinkingTrace: createMultiRoundStreamTrace(),
+      };
+      if (!side) {
+        state.current.messageList.push(assistantMessage); // 数据存储
+        // 接口连通后再展示多轮检索主题与过程
+        setMessages((prev) => [...prev, assistantMessage]);
+      } else if (side === 'left' || side === 'right') {
+        state.current.compareResult[state.current.compareIndex][side].thinkingTrace = createMultiRoundStreamTrace();
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            thinkingTrace: createMultiRoundStreamTrace(),
+          };
+        });
+      }
+
+      const reader = response.body.getReader();
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            console.log('聊天记录', state.current.messageList);
+            chatHistoryAddSearch();
+            break;
+          }
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          const lastLine = lines.pop();
+          buffer = lastLine || '';
+
+          for (const line of lines) {
+            if (!line.startsWith('data: ')) continue;
+
+            try {
+              const parsedData = JSON.parse(line.slice(6)) as {
+                event: string;
+                data: any;
+              };
+              const { event, data } = parsedData;
+
+              switch (event) {
+                case 'task_created': {
+                  taskIdRef.current = data?.task_id || null;
+                  break;
+                }
+                case 'tool_call': {
+                  handleToolCall(data as ToolCallData, assistantId, side);
+                  break;
+                }
+                case 'message': {
+                  if (typeof data === 'string') {
+                    setMessages((prevMessages) => prevMessages.map((msg) => {
+                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
+                      return {
+                        ...msg,
+                        thinkingTrace: {
+                          ...msg.thinkingTrace,
+                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
+                        },
+                      };
+                    }));
+                  }
+                  break;
+                }
+                case 'references': {
+                  const refs = Array.isArray(data?.references) ? data.references : [];
+                  const mappedRefs = refs.map(mapReferenceToSource);
+                  setSearchProcess((prev) => ({
+                    ...prev,
+                    hits: mappedRefs.length,
+                  }));
+                  setMessages((prevMessages) => prevMessages.map((msg) => (
+                    msg.id === assistantId
+                      ? { ...msg, sources: mappedRefs }
+                      : msg
+                  )));
+                  break;
+                }
+                case 'done': {
+                  setIsLoading(false);
+                  break;
+                }
+                default:
+                  console.log(`未知事件类型: ${event}`, data);
+              }
+            } catch (parseError) {
+              console.error('JSON解析错误:', parseError);
+              console.error('原始数据:', line.slice(6));
+            }
+          }
+        }
+      } finally {
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      console.error('处理请求时发生错误:', runError);
+      setIsLoading(false);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+      setIsPreConnectLoading(false);
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      handleStopCompareSide(side);
+    }
+  };
+
+  /**
+* 处理画像检索 请求。
+*
+* 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
+* 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
+*/
+  const handleHxRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    setError(null);
+    setIsLoading(true);
+    setIsPreConnectLoading(true);
+
+    try {
+      const response = await fetch(`${taskChatUrl}/generate_b2`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: query }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      setIsPreConnectLoading(false);
+
+      const assistantId = `assistant-${Date.now()}`;
+      const assistantMessage: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        thinkingTrace: createMultiRoundStreamTrace(),
+      };
+      if (!side) {
+        state.current.messageList.push(assistantMessage); // 数据存储
+        // 接口连通后再展示多轮检索主题与过程
+        setMessages((prev) => [...prev, assistantMessage]);
+      } else if (side === 'left' || side === 'right') {
+        state.current.compareResult[state.current.compareIndex][side].thinkingTrace = createMultiRoundStreamTrace();
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            thinkingTrace: createMultiRoundStreamTrace(),
+          };
+        });
+      }
+
+      const reader = response.body.getReader();
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            console.log('聊天记录', state.current.messageList);
+            chatHistoryAddSearch();
+            break;
+          }
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          const lastLine = lines.pop();
+          buffer = lastLine || '';
+
+          for (const line of lines) {
+            if (!line.startsWith('data: ')) continue;
+
+            try {
+              const parsedData = JSON.parse(line.slice(6)) as {
+                event: string;
+                data: any;
+              };
+              const { event, data } = parsedData;
+
+              switch (event) {
+                case 'task_created': {
+                  taskIdRef.current = data?.task_id || null;
+                  break;
+                }
+                case 'tool_call': {
+                  handleToolCall(data as ToolCallData, assistantId);
+                  break;
+                }
+                case 'message': {
+                  if (typeof data === 'string') {
+                    setMessages((prevMessages) => prevMessages.map((msg) => {
+                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
+                      return {
+                        ...msg,
+                        thinkingTrace: {
+                          ...msg.thinkingTrace,
+                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
+                        },
+                      };
+                    }));
+                  }
+                  break;
+                }
+                case 'references': {
+                  const refs = Array.isArray(data?.references) ? data.references : [];
+                  const mappedRefs = refs.map(mapReferenceToSource);
+                  setSearchProcess((prev) => ({
+                    ...prev,
+                    hits: mappedRefs.length,
+                  }));
+                  setMessages((prevMessages) => prevMessages.map((msg) => (
+                    msg.id === assistantId
+                      ? { ...msg, sources: mappedRefs }
+                      : msg
+                  )));
+                  break;
+                }
+                case 'done': {
+                  setIsLoading(false);
+                  break;
+                }
+                default:
+                  console.log(`未知事件类型: ${event}`, data);
+              }
+            } catch (parseError) {
+              console.error('JSON解析错误:', parseError);
+              console.error('原始数据:', line.slice(6));
+            }
+          }
+        }
+      } finally {
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      console.error('处理请求时发生错误:', runError);
+      setIsLoading(false);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+      setIsPreConnectLoading(false);
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      handleStopCompareSide(side);
+    }
+  };
+
+   /**
+* 处理画像检索 请求。
+*
+* 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
+* 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
+*/
+  const newsReportRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    setError(null);
+    setIsLoading(true);
+    setIsPreConnectLoading(true);
+
+    try {
+      const response = await fetch(`${taskChatUrl}/generate_report`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: query }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      setIsPreConnectLoading(false);
+
+      const assistantId = `assistant-${Date.now()}`;
+      const assistantMessage: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        thinkingTrace: createMultiRoundStreamTrace(),
+      };
+      if (!side) {
+        state.current.messageList.push(assistantMessage); // 数据存储
+        // 接口连通后再展示多轮检索主题与过程
+        setMessages((prev) => [...prev, assistantMessage]);
+      } else if (side === 'left' || side === 'right') {
+        state.current.compareResult[state.current.compareIndex][side].thinkingTrace = createMultiRoundStreamTrace();
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            thinkingTrace: createMultiRoundStreamTrace(),
+          };
+        });
+      }
+
+      const reader = response.body.getReader();
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            console.log('聊天记录', state.current.messageList);
+            chatHistoryAddSearch();
+            break;
+          }
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          const lastLine = lines.pop();
+          buffer = lastLine || '';
+
+          for (const line of lines) {
+            if (!line.startsWith('data: ')) continue;
+
+            try {
+              const parsedData = JSON.parse(line.slice(6)) as {
+                event: string;
+                data: any;
+              };
+              const { event, data } = parsedData;
+
+              switch (event) {
+                case 'task_created': {
+                  taskIdRef.current = data?.task_id || null;
+                  break;
+                }
+                case 'tool_call': {
+                  handleToolCall(data as ToolCallData, assistantId);
+                  break;
+                }
+                case 'message': {
+                  if (typeof data === 'string') {
+                    setMessages((prevMessages) => prevMessages.map((msg) => {
+                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
+                      return {
+                        ...msg,
+                        thinkingTrace: {
+                          ...msg.thinkingTrace,
+                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
+                        },
+                      };
+                    }));
+                  }
+                  break;
+                }
+                case 'references': {
+                  const refs = Array.isArray(data?.references) ? data.references : [];
+                  const mappedRefs = refs.map(mapReferenceToSource);
+                  setSearchProcess((prev) => ({
+                    ...prev,
+                    hits: mappedRefs.length,
+                  }));
+                  setMessages((prevMessages) => prevMessages.map((msg) => (
+                    msg.id === assistantId
+                      ? { ...msg, sources: mappedRefs }
+                      : msg
+                  )));
+                  break;
+                }
+                case 'done': {
+                  setIsLoading(false);
+                  break;
+                }
+                default:
+                  console.log(`未知事件类型: ${event}`, data);
+              }
+            } catch (parseError) {
+              console.error('JSON解析错误:', parseError);
+              console.error('原始数据:', line.slice(6));
+            }
+          }
+        }
+      } finally {
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      console.error('处理请求时发生错误:', runError);
+      setIsLoading(false);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+      setIsPreConnectLoading(false);
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      handleStopCompareSide(side);
+    }
+  };
+
+  /**
+   * 单一模式下的发送入口。
+   *
+   * 这里只负责创建用户消息、重置输入框和按当前 qaMode 分发到对应执行器；
+   * 具体的真实请求、模拟流和状态回填分别在各自 handler 内维护。
+   */
+  const handleSend = () => {
+    if (submitLockRef.current || isLoading || isPreConnectLoading) return;
+    if (!inputValue.trim()) return;
+    submitLockRef.current = true;
+    const query = inputValue.trim();
+    state.current.messageList = [];
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: query,
+      timestamp: new Date(),
+    };
+    state.current.messageList.push(userMessage);
+    if (qaMode === 'multi-round') { // 多轮检索
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '多轮RAG',
+        rounds: 0,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void handleRun(query);
+      return;
+    }
+
+    if (qaMode === 'deep-search') { // 任务检索
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '任务检索',
+        rounds: 0,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void handleTaskRun(query);
+      return;
+    }
+
+    if (qaMode === 'hx-search') { // 任务检索
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '画像检索',
+        rounds: 0,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void handleHxRun(query);
+      return;
+    }
+
+    if (qaMode === 'news-report') { // 新闻报告生成
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '新闻报告生成',
+        rounds: 0,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void newsReportRun(query);
+      return;
+    }
+
+    if (qaMode === 'single-round') { // 单轮RAG
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '单轮RAG',
+        rounds: 1,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void handleSingleRoundRun(query);
+      return;
+    }
+
+    if (qaMode === 'single-chat') { // 大模型问答
+      console.log('进入了这里')
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '大模型问答',
+        rounds: 1,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void chatRun(query);
+      // handleMockSingleRoundRun(query);
+      return;
+    }
+
+    setIsLoading(true);
+    setMessages((prev) => [...prev, userMessage]);
+    setInputValue('');
+  };
+
+  /**
+   * 对比模式发送入口。
+   *
+   * 左右面板共享同一个用户问题，但各自按选择的模式独立运行、独立 loading、独立 sources。
+   * 通过 `updatePane` 将左右面板更新收敛到一个函数，避免并发请求互相覆盖状态。
+   */
+  const handleCompare = () => {
+    if (submitLockRef.current || isLoading || isPreConnectLoading) return;
+    if (!inputValue.trim()) return;
+    submitLockRef.current = true;
+    const query = inputValue.trim();
+    setInputValue('');
+    setCompareUserInput(query);
+    setError(null);
+    setIsLoading(true);
+    const compareId = Date.now().toString();
+    console.log('compareLeftMode',compareLeftMode)
+    const compareItem = {
+      id: compareId,
+      compareUserInput: query,
+      left: createComparePane(compareLeftMode),
+      right: createComparePane(compareRightMode),
+    }
+    setCompareResult((pev) => [...pev, compareItem]);
+    state.current.compareResult = [];
+    state.current.compareId = compareId;
+    state.current.compareResult.push(compareItem);
+    state.current.compareIndex = state.current.compareResult.length - 1;
+    console.log('compareItem', compareItem)
+    const runByMode = (side: 'left' | 'right', mode: QAMode) => {
+      if (mode === 'single-chat') { // 大模型问答
+        return chatRun(query, side);
+      } else if (mode === 'single-round') { // 单轮rag检索
+        return handleSingleRoundRun(query, side);
+      } else if (mode === 'multi-round') { // 多轮检索
+        return handleRun(query, side);
+      } else if (mode === 'deep-search') { // 任务检索
+        return handleTaskRun(query, side);
+      } else if (mode === 'hx-search') { // 画像检索
+        return handleHxRun(query, side); 
+      } else if (mode === 'news-report') { // 新闻检索
+        return handleHxRun(query, side);
+      }
+    };
+
+    Promise.allSettled([
+      runByMode('left', compareLeftMode).finally(() => updatePane('left', (pane) => ({ ...pane, loading: false }))),
+      runByMode('right', compareRightMode).finally(() => updatePane('right', (pane) => ({ ...pane, loading: false }))),
+    ]).finally(() => {
+      setIsLoading(false);
+      submitLockRef.current = false;
+      chatHistoryAddSearch();
+    });
+  };
+
+  const handleStopCompareSide = (side: 'left' | 'right') => {
+    const reader = compareReaderRef.current[side];
+    if (reader) {
+      void reader.cancel(`用户停止${side === 'left' ? '左侧' : '右侧'}生成`);
+      compareReaderRef.current[side] = null;
+    }
+    updatePane(side, (pane) => ({ ...pane, loading: false }))
+  };
+
+  /**
+   * 停止当前生成。
+   *
+   * 真实请求通过 reader.cancel() 中断读取；本地模拟通过 ref 标记让异步循环自行退出。
+   * 对比模式需要同时停止左右两侧，单一模式只处理当前主 reader。
+   */
+  const handleStop = () => {
+    if (viewMode === 'compare') {
+      handleStopCompareSide('left');
+      handleStopCompareSide('right');
+      setIsLoading(false);
+      submitLockRef.current = false;
+      return;
+    }
+    mockSingleRoundStoppedRef.current = true;
+    mockMultiRoundStoppedRef.current = true;
+    if (readerRef.current) {
+      void readerRef.current.cancel('用户手动停止');
+      readerRef.current = null;
+    }
+    setIsPreConnectLoading(false);
+    setIsLoading(false);
+    submitLockRef.current = false;
+  };
+
+  /**
+   * 对“生成中切换页面/模式/布局”进行统一保护。
+   *
+   * 如果当前没有生成任务，直接执行目标操作；否则弹出确认框。
+   * 用户确认后先停止生成，再执行原操作，避免生成流继续写入已经切换的 UI 状态。
+   */
+  const runAfterGenerationConfirm = (action: () => void) => {
+    if (!isLoading) {
+      action();
+      return;
+    }
+    pendingActionRef.current = action;
+    // Dialog.confirm({
+    //   header: '模型正在生成',
+    //   body: '当前模型仍在生成内容。确认后将停止生成，并继续执行你的操作。',
+    //   confirmBtn: '确认停止并继续',
+    //   cancelBtn: '取消',
+    //   onConfirm: () => {
+    //     handleStop();
+    //     pendingActionRef.current?.();
+    //     pendingActionRef.current = null;
+    //   },
+    //   onClose: () => {
+    //     pendingActionRef.current = null;
+    //   },
+    // });
+  };
+
+  const handleSafeViewModeChange = (mode: ViewMode) => {
+    if (mode === viewMode) return;
+    runAfterGenerationConfirm(() => setViewMode(mode));
+  };
+
+  const handleSafeNavigate = (page: PageType) => {
+    runAfterGenerationConfirm(() => onNavigate(page));
+  };
+
+  const handleSafeReset = () => {
+    runAfterGenerationConfirm(() => {
+      setMessages([]);
+      setCompareResult(null);
+    });
+  };
+
+  const handleSafeModeChange = (mode: QAMode) => {
+    runAfterGenerationConfirm(() => setQaMode(mode));
+  };
+
+  const handleSafeCompareLeftModeChange = (mode: QAMode) => {
+    runAfterGenerationConfirm(() => setCompareLeftMode(mode));
+  };
+
+  const handleSafeCompareRightModeChange = (mode: QAMode) => {
+    runAfterGenerationConfirm(() => setCompareRightMode(mode));
+  };
+
+  const handleSafeCompareLayoutChange = (layout: 'horizontal' | 'vertical') => {
+    runAfterGenerationConfirm(() => setCompareLayout(layout));
+  };
+
+  const handleSaveRecord = () => {
+    alert('问答记录已保存');
+  };
+
+  const handleCollect = () => {
+    alert('已添加到收藏');
+  };
+
+  const handleKeyDown = (e) => {
+    // if (e.key === 'Enter' && !e.shiftKey) {
+    //   console.log('回车了')
+    //   e.preventDefault();
+    //   if (e.repeat || submitLockRef.current || isLoading || isPreConnectLoading) return;
+    //   if (viewMode === 'compare') {
+    //     handleCompare();
+    //   } else {
+    //     handleSend();
+    //   }
+    // }
+    // console.log('e',e)
+    // if ((e.metaKey || e.ctrlKey || e.shiftKey) && e.key === "Enter") {
+    //   e.preventDefault();
+    // } else if (e.keyCode === 13) {
+    //   e.preventDefault();
+    //   console.log('回车了')
+    // } else if (e.key === "/") {
+    //   e.preventDefault();
+    // }
+    // if (e.repeat || submitLockRef.current || isLoading || isPreConnectLoading) return;
+    state.current.messageList = [];
+    if (viewMode === 'compare') {
+      handleCompare();
+    } else {
+      handleSend();
+    }
+    setIsAutoScrollEnabled(true);
+    setShowScrollToBottom(false);
+    scrollToBottom(true);
+  };
+
+  // 获取模式标签
+  const getModeLabel = (mode: QAMode) => {
+    switch (mode) {
+      case 'single-chat': return '大模型';
+      case 'single-round': return '单轮RAG';
+      case 'multi-round': return '多轮RAG';
+      case 'deep-search': return '任务检索';
+      case 'hx-search': return '画像检索';
+      case 'news-report': return '新闻报告生成';
+    }
+  };
+
+  const activeAssistantMessageId = isLoading
+    ? [...messages].reverse().find((msg) => msg.role === 'assistant')?.id
+    : undefined;
+
+  useEffect(() => {
+    setQaMode('deep-search');
+    // setMessages(createMockSingleRagMessages());
+    // setSearchProcess({
+    //   currentMode: '单轮RAG',
+    //   rounds: 1,
+    //   hits: 3,
+    //   queryRewrite: '',
+    // });
+    chatDataSearch();
+  }, [viewMode]);
+
+  // 创建聊天窗口
+  const addChatDataChange = async () => {
+    let qaMode = 'SINGLE_RAG';
+    if (viewMode === 'compare') {
+      qaMode = 'MULTI_RAG'
+    }
+    const parmy = {
+      userId: userId.current,
+      qaType: qaType.current,
+      questionTitle: '新建问答',
+      qaMode: qaMode,
+    }
+    const res = await service.post(`${zncmUrl}/llm/qa/history/create`, parmy);
+    console.log(res);
+    const result = res.data;
+    chatDataId.current = result.id;
+    if (viewMode === 'compare') {
+      compareChatId.current = result.id;
+    } else {
+      chatDataId.current = result.id;
+    }
+  }
+
+  // 查找聊天记录窗口
+  const chatDataSearch = async () => {
+    let qaMode = 'SINGLE_RAG';
+    console.log('viewMode', viewMode)
+    if (viewMode === 'compare') {
+      qaMode = 'MULTI_RAG'
+    }
+
+    const parmy = {
+      userId: userId.current,
+      qaType: qaType.current,
+      qaMode: qaMode,
+      current: 1,
+      size: 10
+    }
+    const res = await service.post(`${zncmUrl}/llm/qa/history/page`, parmy);
+    console.log('res', res);
+    const result = res.data;
+    if (result.length === 0) {
+      await addChatDataChange();
+    } else if (result.length > 0) {
+      if (viewMode === 'compare') {
+        compareChatId.current = result[0].id;
+      } else {
+        chatDataId.current = result[0].id;
+      }
+    }
+    await chatHistorySearch();
+    console.log('chatDataId', chatDataId.current, compareChatId.current)
+  }
+
+  // 根据对话记录窗口查找对话记录
+  const chatHistorySearch = async () => {
+    let chatHistoryId = chatDataId.current;
+    if (viewMode === 'compare') {
+      chatHistoryId = compareChatId.current;
+    }
+    const res = await service.get(`${zncmUrl}/llm/qa/history/pairs/${chatHistoryId}`, '');
+    console.log('问答记录', res);
+    // 1. 修正变量名 result
+    const result = res.data;
+    if (viewMode !== 'compare') {
+      // 2. 使用 flatMap 将二维数组拍平，并生成新的消息列表
+      const messageList: Message[] = result.flatMap((item, itemIndex) => {
+        // 3. 安全解析 JSON，使用 ?? 提供空数组兜底
+        const parsedAnswers = JSON.parse(item.answer ?? '[]');
+
+        // 4. map 处理每一条 answer，生成新的对象（不修改原对象）
+        return parsedAnswers.map((aItem: any, aIndex: number) => {
+          return {
+            ...aItem,
+            // 优化 ID 赋值逻辑：建议不管是不是索引 1，都补全 ID，防止遗漏
+            // 如果必须只针对第二条，保留原逻辑，但增加安全性
+            id: aIndex === 1 ? String(item.id) : (aItem.id || `temp-${itemIndex}-${aIndex}`),
+
+            // 如果后端返回的数据缺少 timestamp 或 role，最好在这里补全默认值
+            timestamp: aItem.timestamp ? new Date(aItem.timestamp) : new Date(),
+            role: aItem.role || 'assistant',
+          } as Message;
+        });
+      });
+      console.log('result', messageList); // 此时 result 保持纯净，未被修改
+      setMessages(messageList);
+    } else {
+      console.log(result);
+      const messageList = result.flatMap(item => {
+        const parsedAnswers = JSON.parse(item.answer ?? '[]');
+        return parsedAnswers.map(aItem => ({
+          ...aItem,
+          left: {
+            ...aItem.left,
+            loading: false,
+          },
+          right: {
+            ...aItem.right,
+            loading: false,
+          },
+          id: item.id,
+        }));
+      });
+      console.log('messageList', messageList)
+      setCompareResult(messageList);
+    }
+    // state.current.messageList = reuslt || [];
+  }
+
+  // 创建记录窗口
+  const chatHistoryAddSearch = async () => {
+    let historyId = chatDataId.current;
+    let answer = '';
+    let question = '';
+    if (viewMode === 'compare') {
+      historyId = compareChatId.current;
+      answer = JSON.stringify(state.current.compareResult);
+      question = state.current.compareResult[0].compareUserInput;
+    } else {
+      answer = JSON.stringify(state.current.messageList);
+      question = state.current.messageList[0].content;
+    }
+    const param = {
+      historyId: historyId,
+      userId: userId.current,
+      answer: answer,
+      question: question,
+    }
+    const res = await service.post(`${zncmUrl}/llm/qa/history/pair/add`, param);
+    console.log('添加聊天记录窗口', res);
+  }
+
+  /**
+   * 滚动到底部。
+   *
+   * 聊天区默认跟随新消息自动滚动；当用户手动上滑查看历史时会暂停自动滚动，避免打断阅读。
+   */
+  const scrollToBottom = (smooth = false) => {
+    if (!chatListRef.current) return;
+    chatListRef.current.scrollTo({
+      top: chatListRef.current.scrollHeight,
+      behavior: smooth ? 'smooth' : 'auto',
+    });
+  };
+
+  useEffect(() => {
+    if (isAutoScrollEnabled) {
+      scrollToBottom(false);
+    }
+  }, [messages, isLoading, isAutoScrollEnabled, compareResult]);
+
+  const handleChatScroll = () => {
+    if (!chatListRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = chatListRef.current;
+    const isNearBottom = scrollHeight - (scrollTop + clientHeight) < 80;
+    setIsAutoScrollEnabled(isNearBottom);
+    setShowScrollToBottom(!isNearBottom);
+  };
+
+  const getAssistantAnswerText = (message: Message) => (
+    message.singleRagTrace?.answerMarkdown || message.thinkingTrace?.finalAnswerMarkdown || message.content
+  );
+
+  const getAssistantThinkingText = (message: Message) => {
+    if (message.singleRagTrace) return message.singleRagTrace.thinkingMarkdown;
+    if (message.thinkingTrace) {
+      return message.thinkingTrace.rounds.map((round, index) => (
+        `## 第 ${index + 1} 轮：${round.title}\n${round.thoughtMarkdown}`
+      )).join('\n\n');
+    }
+    return '';
+  };
+
+  const handleCopyAssistantMessage = async (message: Message) => {
+    const answerText = getAssistantAnswerText(message);
+    try {
+      await navigator.clipboard.writeText(answerText);
+    } catch (copyError) {
+      console.error('复制模型回答失败:', copyError);
+    }
+  };
+
+  const handleDeleteAssistantMessage = (message: Message) => {
+    const messageIndex = messages.findIndex((msg) => msg.id === message.id);
+    const previousUserMessage = [...messages.slice(0, messageIndex)].reverse().find((msg) => msg.role === 'user');
+    setMessages((prev) => prev.filter((msg) => msg.id !== message.id && msg.id !== previousUserMessage?.id));
+  };
+
+  const handleEditAssistantMessage = (message: Message) => {
+    setEditingMessageId(message.id);
+    setEditingThinking(getAssistantThinkingText(message));
+    setEditingAnswer(getAssistantAnswerText(message));
+  };
+
+  const handleCancelAssistantEdit = () => {
+    setEditingMessageId(null);
+    setEditingThinking('');
+    setEditingAnswer('');
+  };
+
+  const handleSaveAssistantEdit = () => {
+    if (!editingMessageId) return;
+    setMessages((prev) => prev.map((msg) => {
+      if (msg.id !== editingMessageId) return msg;
+      if (msg.singleRagTrace) {
+        return {
+          ...msg,
+          content: editingAnswer,
+          singleRagTrace: {
+            ...msg.singleRagTrace,
+            thinkingMarkdown: editingThinking,
+            answerMarkdown: editingAnswer,
+            thinkingComplete: true,
+          },
+        };
+      }
+      if (msg.thinkingTrace) {
+        const rounds = msg.thinkingTrace.rounds.length > 0
+          ? msg.thinkingTrace.rounds.map((round, index) => (
+            index === 0 ? { ...round, thoughtMarkdown: editingThinking } : round
+          ))
+          : msg.thinkingTrace.rounds;
+        return {
+          ...msg,
+          content: editingAnswer,
+          thinkingTrace: {
+            ...msg.thinkingTrace,
+            rounds,
+            finalAnswerMarkdown: editingAnswer,
+          },
+        };
+      }
+      return { ...msg, content: editingAnswer };
+    }));
+    handleCancelAssistantEdit();
+  };
+
+  const handleResendAssistantMessage = (message: Message) => {
+    if (submitLockRef.current || isLoading || isPreConnectLoading) return;
+    const messageIndex = messages.findIndex((msg) => msg.id === message.id);
+    const previousUserMessage = [...messages.slice(0, messageIndex)].reverse().find((msg) => msg.role === 'user');
+    if (!previousUserMessage) return;
+
+    submitLockRef.current = true;
+    setMessages((prev) => prev.filter((msg) => msg.id !== message.id));
+    setInputValue('');
+
+    if (message.singleRagTrace) {
+      setSearchProcess({ currentMode: '单轮RAG', rounds: 1, hits: 0, queryRewrite: '' });
+      void handleSingleRoundRun(previousUserMessage.content);
+      return;
+    }
+
+    setSearchProcess({ currentMode: '多轮RAG', rounds: 0, hits: 0, queryRewrite: '' });
+    void handleRun(previousUserMessage.content);
+  };
+
+  /**
+   * 点击答案中的引用编号后打开引用详情弹窗。
+   *
+   * Markdown 中的 `[[1]]` 与 sources 数组采用 1-based 对齐，因此这里需要减 1 取数组下标。
+   */
+  const handleCitationClick = (message: Message, citationIndex: number) => {
+    const source = message.sources?.[citationIndex - 1];
+    if (!source) return;
+    setSelectedCitation(source);
+  };
+
+  const handleCompareCitationClick = (side: 'left' | 'right', citationIndex: number) => {
+    const source = compareResult?.[side]?.sources?.[citationIndex - 1];
+    if (!source) return;
+    setSelectedCitation(source);
+  };
+
+  useEffect(() => {
+    if (viewMode === 'compare') {
+      setCompareLeftMode('single-round');
+      setCompareRightMode('multi-round');
+    }
+  }, [viewMode]);
+
+  useEffect(() => {
+    if (viewMode !== 'compare' || !compareResult) return;
+    // setIsLoading(compareResult.left.loading || compareResult.right.loading);
+  }, [viewMode, compareResult]);
+
+  // 离开浏览器页面时无法展示自定义 Dialog，因此使用原生 beforeunload 提醒用户生成会被中断。
+  // useEffect(() => {
+  //   const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+  //     if (!isLoading) return;
+  //     event.preventDefault();
+  //     event.returnValue = '模型正在生成，离开页面将停止当前生成。';
+  //   };
+
+  //   window.addEventListener('beforeunload', handleBeforeUnload);
+  //   return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+  // }, [isLoading]);
+
+  return (
+    <div className={`h-[calc(100vh-120px)] flex flex-col theme-bg rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+      <GeneralQAHeader
+        chatHeadTitle={'课题研究'}
+        chatDesign={'支持任务检索，画像检索，新闻报告生成'}
+        compareShow={false}
+        isDark={isDark}
+        viewMode={viewMode}
+        setViewMode={handleSafeViewModeChange}
+        onNavigate={handleSafeNavigate}
+      />
+
+      {/* 主体内容区 */}
+      <div className="flex-1 flex overflow-hidden">
+        <GeneralQAConfigSidebar
+          isDark={isDark}
+          viewMode={viewMode}
+          qaMode={qaMode}
+          compareLeftMode={compareLeftMode}
+          compareRightMode={compareRightMode}
+          compareLayout={compareLayout}
+          knowledgeScope={knowledgeScope}
+          answerStyle={answerStyle}
+          showSources={showSources}
+          showProcess={showProcess}
+          autoSummarizeDiff={autoSummarizeDiff}
+          recommendBetter={recommendBetter}
+          isCollapsed={isLeftSidebarCollapsed}
+          qaModeOptions={qaModeList}
+          setQaMode={handleSafeModeChange}
+          setCompareLeftMode={handleSafeCompareLeftModeChange}
+          setCompareRightMode={handleSafeCompareRightModeChange}
+          setCompareLayout={handleSafeCompareLayoutChange}
+          setKnowledgeScope={setKnowledgeScope}
+          setAnswerStyle={setAnswerStyle}
+          setShowSources={setShowSources}
+          setShowProcess={setShowProcess}
+          setAutoSummarizeDiff={setAutoSummarizeDiff}
+          setRecommendBetter={setRecommendBetter}
+          setIsCollapsed={setIsLeftSidebarCollapsed}
+        />
+
+        {/* 中间结果区 */}
+        <div className="flex-1 min-w-0 flex flex-col overflow-hidden">
+          {viewMode === 'single' ? (
+            <>
+              {/* 聊天消息区 */}
+              <div
+                ref={chatListRef}
+                onScroll={handleChatScroll}
+                className="relative flex-1 overflow-y-auto p-4 space-y-4"
+              >
+                {messages.length === 0 ? (
+                  <EmptyChatState
+                    icon={<MessageSquare className="w-11 h-11 opacity-60" />}
+                    title="开始你的问答"
+                    description="输入问题，获取基于知识库的智能回答"
+                  />
+                ) : (
+                  messages.map((msg) => (
+                    <ChatMessage
+                      key={msg.id}
+                      message={msg}
+                      showSources={showSources}
+                      assistantLabel="知识库助手"
+                      assistantActive={msg.id === activeAssistantMessageId}
+                      onCitationClick={handleCitationClick}
+                      onCopyAssistant={handleCopyAssistantMessage}
+                      onDeleteAssistant={handleDeleteAssistantMessage}
+                      onEditAssistant={handleEditAssistantMessage}
+                      onResendAssistant={handleResendAssistantMessage}
+                    />
+                  ))
+                )}
+
+                {isPreConnectLoading && (
+                  <TypingIndicator
+                    label={qaMode === 'single-round' ? '正在流式生成单轮 RAG 回复' : '正在生成思考过程与检索内容'}
+                    assistantLabel="知识库助手"
+                  />
+                )}
+
+                {error && (
+                  <div className={`ml-12 max-w-[70%] rounded-xl border px-4 py-3 text-sm ${isDark
+                    ? 'bg-red-900/20 border-red-700/50 text-red-300'
+                    : 'bg-red-50 border-red-200 text-red-700'
+                    }`}>
+                    {error}
+                  </div>
+                )}
+
+                {showScrollToBottom && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setIsAutoScrollEnabled(true);
+                      setShowScrollToBottom(false);
+                      scrollToBottom(true);
+                    }}
+                    className={`fixed left-1/2 -translate-x-1/2 bottom-36 z-20 w-11 h-11 rounded-full backdrop-blur-sm border shadow-lg transition-all ${isDark
+                      ? 'bg-slate-800/65 border-slate-500/60 text-slate-100 hover:bg-slate-700/70'
+                      : 'bg-white/70 border-gray-300 text-gray-700 hover:bg-white/85'
+                      }`}
+                    title="滚动到底部"
+                  >
+                    <ArrowDown className="w-5 h-5 mx-auto" />
+                  </button>
+                )}
+              </div>
+            </>
+          ) : (
+            <div ref={chatListRef} onScroll={handleChatScroll} className="flex-1 overflow-y-auto p-4">
+              {/* 对比结果区 */}
+              {
+                compareResult.length === 0 && <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                  <GitCompare className="w-16 h-16 mb-4 opacity-50" />
+                  <p className="text-lg">对比模式</p>
+                  <p className="text-sm mt-2">输入问题，对比不同模式的回答效果</p>
+                </div>
+              }
+              {
+                compareResult.map((compare: CompareResult, index: number) => (
+                  <div className="mb-[10px]" key={index}>
+                    <div className="mb-4 flex justify-end">
+                      <div className={`max-w-[72%] rounded-2xl px-4 py-3 shadow-sm ${isDark
+                        ? 'bg-blue-600/70 text-white'
+                        : 'bg-gradient-to-r from-red-500 to-rose-500 text-white'
+                        }`}>
+                        <p className="whitespace-pre-wrap leading-relaxed">{compare.compareUserInput}</p>
+                      </div>
+                    </div>
+                    {compareResult ? (
+                      compareLayout === 'horizontal' ? (
+                        <div className="grid grid-cols-2 gap-4 min-w-0">
+                          {/* 左侧结果 */}
+                          <div className={`min-w-0 rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                            <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <QAAvatar role="assistant" variant="blue" isActive={compare.left.loading} label="知识库助手" />
+                                  <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                                    }`}>
+                                    {getModeLabel(compare.left.mode)}
+                                  </span>
+                                </div>
+                                {compare.left.loading && (
+                                  <button
+                                    type="button"
+                                    onClick={() => handleStopCompareSide('left')}
+                                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                                      }`}
+                                  >
+                                    <Square className="w-3 h-3 fill-current" />
+                                    停止
+                                  </button>
+                                )}
+                              </div>
+                            </div>
+                            <div className="p-4 min-w-0">
+                              <div className="flex-1 min-w-0">
+                                {(compare.left.mode === 'single-round' || compare.left.mode === 'single-chat')? (
+                                  <SingleRagAnswer trace={compare.left.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
+                                ) : (
+                                  <RetrievalThinkingTrace trace={compare.left.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
+                                )}
+                              </div>
+                            </div>
+                          </div>
+
+                          {/* 右侧结果 */}
+                          <div className={`min-w-0 overflow-hidden rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                            <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <QAAvatar role="assistant" variant="purple" isActive={compare.right.loading} label="知识库助手" />
+                                  <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
+                                    }`}>
+                                    {getModeLabel(compare.right.mode)}
+                                  </span>
+                                </div>
+                                {compare.right.loading && (
+                                  <button
+                                    type="button"
+                                    onClick={() => handleStopCompareSide('right')}
+                                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                                      }`}
+                                  >
+                                    <Square className="w-3 h-3 fill-current" />
+                                    停止
+                                  </button>
+                                )}
+                              </div>
+                            </div>
+                            <div className="p-4 min-w-0 overflow-hidden">
+                              <div className="flex-1 min-w-0">
+                                {(compare.right.mode === 'single-round' || compare.right.mode === 'single-chat') ? (
+                                  <SingleRagAnswer trace={compare.right.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
+                                ) : (
+                                  <RetrievalThinkingTrace trace={compare.right.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="space-y-4">
+                          {/* 上方结果 */}
+                          <div className={`min-w-0 overflow-hidden rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                            <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <QAAvatar role="assistant" variant="blue" isActive={compare.left.loading} label="知识库助手" />
+                                  <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                                    }`}>
+                                    {getModeLabel(compare.left.mode)}
+                                  </span>
+                                </div>
+                                {compare.left.loading && (
+                                  <button
+                                    type="button"
+                                    onClick={() => handleStopCompareSide('left')}
+                                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                                      }`}
+                                  >
+                                    <Square className="w-3 h-3 fill-current" />
+                                    停止
+                                  </button>
+                                )}
+                              </div>
+                            </div>
+                            <div className="p-4 min-w-0 overflow-hidden">
+                              <div className="flex-1 min-w-0">
+                                {(compare.left.mode === 'single-round' || compare.left.mode === 'single-chat') ? (
+                                  <SingleRagAnswer trace={compare.left.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
+                                ) : (
+                                  <RetrievalThinkingTrace trace={compare.left.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
+                                )}
+                              </div>
+                            </div>
+                          </div>
+
+                          {/* 下方结果 */}
+                          <div className={`min-w-0 overflow-hidden rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                            <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <QAAvatar role="assistant" variant="purple" isActive={compare.right.loading} label="知识库助手" />
+                                  <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
+                                    }`}>
+                                    {getModeLabel(compare.right.mode)}
+                                  </span>
+                                </div>
+                                {compare.right.loading && (
+                                  <button
+                                    type="button"
+                                    onClick={() => handleStopCompareSide('right')}
+                                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                                      }`}
+                                  >
+                                    <Square className="w-3 h-3 fill-current" />
+                                    停止
+                                  </button>
+                                )}
+                              </div>
+                            </div>
+                            <div className="p-4 min-w-0 overflow-hidden">
+                              <div className="flex-1 min-w-0">
+                                {(compare.right.mode === 'single-round' || compare.right.mode === 'single-chat') ? (
+                                  <SingleRagAnswer trace={compare.right.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
+                                ) : (
+                                  <RetrievalThinkingTrace trace={compare.right.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      )
+                    ) : (
+                      <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                        <GitCompare className="w-16 h-16 mb-4 opacity-50" />
+                        <p className="text-lg">对比模式</p>
+                        <p className="text-sm mt-2">输入问题，对比不同模式的回答效果</p>
+                      </div>
+                    )}
+                  </div>
+                ))
+              }
+              {showScrollToBottom && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setIsAutoScrollEnabled(true);
+                      setShowScrollToBottom(false);
+                      scrollToBottom(true);
+                    }}
+                    className={`fixed left-1/2 -translate-x-1/2 bottom-36 z-20 w-11 h-11 rounded-full backdrop-blur-sm border shadow-lg transition-all ${isDark
+                      ? 'bg-slate-800/65 border-slate-500/60 text-slate-100 hover:bg-slate-700/70'
+                      : 'bg-white/70 border-gray-300 text-gray-700 hover:bg-white/85'
+                      }`}
+                    title="滚动到底部"
+                  >
+                    <ArrowDown className="w-5 h-5 mx-auto" />
+                  </button>
+                )}
+            </div>
+          )}
+
+          {/* 底部输入区 */}
+          <QAComposer
+            value={inputValue}
+            onChange={setInputValue}
+            onKeyDown={handleKeyDown}
+            onSubmit={viewMode === 'compare' ? handleCompare : handleSend}
+            onStop={handleStop}
+            canSubmit={!isLoading && Boolean(inputValue.trim())}
+            onReset={handleSafeReset}
+            onSave={handleSaveRecord}
+            onCollect={handleCollect}
+            onOpenSettings={() => setIsModelSettingsOpen(true)}
+            isLoading={isLoading}
+            placeholder={viewMode === 'compare' ? '输入问题进行对比分析...' : '输入你的问题...'}
+            showReset
+          />
+        </div>
+
+        {/* 右侧辅助区 */}
+        {viewMode === 'single' && showProcess && (
+          <div className={`w-72 border-l flex-shrink-0 overflow-y-auto p-4 ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
+            }`}>
+            {/* 检索过程 */}
+            <div className="mb-6">
+              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                检索过程
+              </h3>
+              <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>当前模式</span>
+                    <span className={`text-sm font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                      {searchProcess.currentMode}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>检索轮次</span>
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      {searchProcess.rounds}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>命中数</span>
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      {searchProcess.hits}
+                    </span>
+                  </div>
+                  {searchProcess.queryRewrite && (
+                    <div>
+                      <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>Query改写</span>
+                      <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                        {searchProcess.queryRewrite}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 对比模式的差异总结 */}
+        {/* {viewMode === 'compare' && compareResult?.differences && (
+          <div className={`w-72 border-l flex-shrink-0 overflow-y-auto p-4 ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
+            }`}>
+            <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+              差异总结
+            </h3>
+            <div className={`p-4 rounded-xl space-y-4 ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+              <div>
+                <span className={`text-xs flex items-center gap-1 ${isDark ? 'text-green-400' : 'text-green-600'}`}>
+                  <CheckCircle className="w-3 h-3" />
+                  一致观点
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.consensus}
+                </p>
+              </div>
+              <div>
+                <span className={`text-xs flex items-center gap-1 ${isDark ? 'text-yellow-400' : 'text-yellow-600'}`}>
+                  <AlertCircle className="w-3 h-3" />
+                  差异观点
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.differences}
+                </p>
+              </div>
+              <div>
+                <span className={`text-xs ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                  {getModeLabel(compareResult.left.mode)}优势
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.leftAdvantage}
+                </p>
+              </div>
+              <div>
+                <span className={`text-xs ${isDark ? 'text-purple-400' : 'text-purple-600'}`}>
+                  {getModeLabel(compareResult.right.mode)}优势
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.rightAdvantage}
+                </p>
+              </div>
+            </div>
+          </div>
+        )} */}
+      </div>
+
+      {editingMessageId && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div className="absolute inset-0 bg-black/45 backdrop-blur-[1px]" onClick={handleCancelAssistantEdit} />
+          <div className={`relative w-full max-w-3xl rounded-2xl border shadow-2xl p-5 ${isDark ? 'bg-slate-900 border-slate-700 text-slate-100' : 'bg-white border-gray-200 text-gray-900'
+            }`}>
+            <button
+              type="button"
+              onClick={handleCancelAssistantEdit}
+              className={`absolute top-3 right-3 p-1.5 rounded-lg transition-all ${isDark ? 'hover:bg-slate-700 text-slate-300' : 'hover:bg-gray-100 text-gray-500'
+                }`}
+              title="关闭"
+            >
+              <X className="w-4 h-4" />
+            </button>
+            <div className="pr-9">
+              <h3 className="text-base font-semibold">编辑模型生成内容</h3>
+              <p className={`mt-1 text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                可同时修改模型回答和思考过程，多轮检索会把思考过程写回第一轮思考内容。
+              </p>
+            </div>
+            <div className="mt-4 grid gap-4 md:grid-cols-2">
+              <label className="space-y-2">
+                <span className={`text-sm font-medium ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>思考过程</span>
+                <textarea
+                  value={editingThinking}
+                  onChange={(event) => setEditingThinking(event.target.value)}
+                  className={`h-80 w-full resize-none rounded-xl border p-3 text-sm focus:outline-none ${isDark ? 'border-slate-700 bg-slate-800 text-slate-100' : 'border-gray-200 bg-gray-50 text-gray-800'
+                    }`}
+                />
+              </label>
+              <label className="space-y-2">
+                <span className={`text-sm font-medium ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>最终回答</span>
+                <textarea
+                  value={editingAnswer}
+                  onChange={(event) => setEditingAnswer(event.target.value)}
+                  className={`h-80 w-full resize-none rounded-xl border p-3 text-sm focus:outline-none ${isDark ? 'border-slate-700 bg-slate-800 text-slate-100' : 'border-gray-200 bg-gray-50 text-gray-800'
+                    }`}
+                />
+              </label>
+            </div>
+            <div className="mt-4 flex justify-end gap-2">
+              <button type="button" onClick={handleCancelAssistantEdit} className={`px-4 py-2 rounded-xl text-sm ${isDark ? 'bg-slate-800 hover:bg-slate-700 text-slate-200' : 'bg-gray-100 hover:bg-gray-200 text-gray-700'}`}>
+                取消
+              </button>
+              <button type="button" onClick={handleSaveAssistantEdit} className="px-4 py-2 rounded-xl text-sm bg-red-500 hover:bg-red-600 text-white">
+                保存
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {selectedCitation && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div
+            className="absolute inset-0 bg-black/45 backdrop-blur-[1px]"
+            onClick={() => setSelectedCitation(null)}
+          />
+          <div className={`relative w-full max-w-xl rounded-2xl border shadow-2xl p-5 ${isDark
+            ? 'bg-slate-900 border-slate-700 text-slate-100'
+            : 'bg-white border-gray-200 text-gray-900'
+            }`}>
+            <button
+              type="button"
+              onClick={() => setSelectedCitation(null)}
+              className={`absolute top-3 right-3 p-1.5 rounded-lg transition-all ${isDark ? 'hover:bg-slate-700 text-slate-300' : 'hover:bg-gray-100 text-gray-500'
+                }`}
+              title="关闭"
+            >
+              <X className="w-4 h-4" />
+            </button>
+
+            <div className="pr-9">
+              <h3 className="text-base font-semibold">{selectedCitation.title || '引用内容'}</h3>
+              <div className={`mt-2 text-xs space-y-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                <div>来源：{selectedCitation.source || selectedCitation.type || '未知来源'}</div>
+                <div>时间：{selectedCitation.time || '未知'}</div>
+              </div>
+            </div>
+
+            {selectedCitation.url && (
+              <div className="mt-4">
+                <a
+                  href={`${knowledgeUrl}/#/knowledge/mid-detail?recUuid=${selectedCitation.url}`}
+                  target="_blank"
+                  rel="noreferrer"
+                  className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm transition-all ${isDark
+                    ? 'border-slate-600 text-slate-200 hover:bg-slate-800'
+                    : 'border-gray-300 text-gray-700 hover:bg-gray-50'
+                    }`}
+                  title="打开原始链接"
+                >
+                  <ExternalLink className="w-4 h-4" />
+                  查看原文链接
+                </a>
+              </div>
+            )}
+
+            <div className={`mt-4 rounded-xl p-3 text-sm leading-relaxed max-h-[500px] overflow-auto pr-[10px] whitespace-pre-wrap ${isDark ? 'bg-slate-800/70 text-slate-200' : 'bg-gray-50 text-gray-700'
+              }`}>
+              {selectedCitation.content || selectedCitation.snippet || '暂无引用内容'}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <Dialog
+        visible={isModelSettingsOpen}
+        header="模型参数设置"
+        width="520px"
+        confirmBtn="保存"
+        cancelBtn="取消"
+        onConfirm={() => setIsModelSettingsOpen(false)}
+        onClose={() => setIsModelSettingsOpen(false)}
+      >
+        <div className="space-y-6 py-2">
+          <div>
+            <label className={`block text-sm font-medium mb-2 ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+              模型
+            </label>
+            <Select
+              value={modelName}
+              onChange={(value) => setModelName(String(value))}
+              options={[
+                { label: 'Qwen3-32B: 效果与速度均衡（推荐）', value: 'OpenAI3' },
+                { label: 'Qwen3-235B：效果与速度均衡（推荐）', value: 'OpenAI4' },
+                { label: 'GLM-5：逻辑性强，长上下文', value: 'OpenAI5' },
+                { label: 'Qwen3.5-27B：深度思考过程长', value: 'OpenAI6' },
+                { label: 'Qwen3-8B：速度快，效果较差', value: 'OpenAI7' },
+                // { label: 'Qwen2.5-72B：老模型，发散性差', value: 'OpenAI8' },
+                { label: '四季7B：速度快，效果较差', value: 'OpenAI9' },
+              ]}
+              style={{ width: '100%' }}
+            />
+          </div>
+          <div>
+            <div className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+              相似度阈值 score_threshold：{scoreThreshold.toFixed(2)}
+            </div>
+            <Slider
+              label
+              layout="horizontal"
+              min={0}
+              max={1}
+              step={0.01}
+              value={scoreThreshold}
+              onChange={(value) => setScoreThreshold(Number(value))}
+            />
+          </div>
+          <div>
+            <div className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+              温度 temperature：{temperature.toFixed(2)}
+            </div>
+            <Slider
+              label
+              layout="horizontal"
+              min={0}
+              max={1}
+              step={0.01}
+              value={temperature}
+              onChange={(value) => setTemperature(Number(value))}
+            />
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  );
+};
+
+export default TaskChat;
diff --git a/web-code/components/qa/Template6BEditor.tsx b/web-code/components/qa/Template6BEditor.tsx
new file mode 100644
index 00000000..5c231bca
--- /dev/null
+++ b/web-code/components/qa/Template6BEditor.tsx
@@ -0,0 +1,638 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { useTheme } from '../../contexts/ThemeContext';
+import {
+  Edit2, Plus, Trash2, Check, X, ChevronDown, ChevronRight,
+  Target, Users, Activity, BookOpen, Zap, AlertTriangle,
+  Settings, FileText, Info, RefreshCw, AlertCircle, Brain, Save,
+} from 'lucide-react';
+
+interface FieldRequirement {
+  title: string;
+  goal: string;
+  must_cover: string[];
+  done_criteria: string[];
+  blockers: string[];
+  dependencies: string[];
+  evidence_needs: string[];
+  preferred_agents: string[];
+  style_notes: string;
+  min_chars?: number;
+  min_items?: number;
+}
+
+interface AgentData {
+  id: string;
+  name: string;
+  dimension: string;
+  expertise: string;
+  relevant_fields: string[];
+  analysis_contract: string[];
+}
+
+interface CoordinatorConfig {
+  system_prompt_prefix?: string;
+  round1_guidance?: string;
+  middle_round_guidance?: string;
+  final_round_guidance?: string;
+  speaker_selection_rules?: string;
+  focus_instruction_rules?: string;
+  dependency_driving_rules?: string[];
+  consistency_check_rules?: string[];
+  revise_prompt_prefix?: string;
+}
+
+interface TemplateData {
+  template_id: string;
+  template_name: string;
+  template_brief: string;
+  usage_notes: string[];
+  report_schema: Record<string, string>;
+  report_examples: Record<string, string>;
+  field_requirements: Record<string, FieldRequirement>;
+  agents: AgentData[];
+  coordinator_config: CoordinatorConfig;
+}
+
+const FIELD_LABELS: Record<string, string> = {
+  template_id: '模板ID',
+  template_name: '模板名称',
+  template_brief: '模板简介',
+  usage_notes: '使用说明',
+  report_schema: '报告字段结构',
+  report_examples: '报告字段示例',
+  field_requirements: '字段要求配置',
+  agents: '智能体配置',
+  coordinator_config: '协调者配置',
+  title: '字段标题',
+  goal: '字段目标',
+  must_cover: '必须覆盖内容',
+  done_criteria: '完成标准',
+  blockers: '阻塞条件',
+  dependencies: '依赖字段',
+  evidence_needs: '证据需求',
+  preferred_agents: '推荐智能体',
+  style_notes: '风格说明',
+  min_chars: '最小字符数',
+  min_items: '最小条目数',
+  id: '智能体ID',
+  name: '智能体名称',
+  dimension: '分析维度',
+  expertise: '专业能力',
+  relevant_fields: '关联字段',
+  analysis_contract: '分析契约',
+  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: '修改提示前缀',
+};
+
+const REPORT_SCHEMA_LABELS: Record<string, string> = {
+  objective_analysis: '一、目的分析',
+  target_actor_analysis: '二、目标行为体分析',
+  expected_behavior_drivers: '三、预期行为及行为驱动因素分析',
+  narrative_theme_design: '四、叙事主题设计',
+  action_plan_list: '五、认知行动方案列表',
+};
+
+interface AgentVisual {
+  Icon: React.ElementType;
+  lightCard: string;
+  darkCard: string;
+  iconLight: string;
+  iconDark: string;
+  tagLight: string;
+  tagDark: string;
+}
+
+const AGENT_VISUALS: Record<string, AgentVisual> = {
+  objective: {
+    Icon: Target,
+    lightCard: 'from-blue-50 to-sky-50 border-blue-200 hover:border-blue-400 hover:shadow-blue-200/60',
+    darkCard: 'from-slate-900/80 to-blue-950/20 border-slate-700/70 hover:border-blue-500/40 hover:shadow-slate-950/50',
+    iconLight: 'bg-blue-100 text-blue-600',
+    iconDark: 'bg-slate-800/90 text-blue-300 ring-1 ring-blue-500/20',
+    tagLight: 'bg-blue-100 text-blue-700 border-blue-200',
+    tagDark: 'bg-slate-800/70 text-blue-200 border-blue-500/25',
+  },
+  actor: {
+    Icon: Users,
+    lightCard: 'from-emerald-50 to-teal-50 border-emerald-200 hover:border-emerald-400 hover:shadow-emerald-200/60',
+    darkCard: 'from-slate-900/80 to-emerald-950/20 border-slate-700/70 hover:border-emerald-500/40 hover:shadow-slate-950/50',
+    iconLight: 'bg-emerald-100 text-emerald-600',
+    iconDark: 'bg-slate-800/90 text-emerald-300 ring-1 ring-emerald-500/20',
+    tagLight: 'bg-emerald-100 text-emerald-700 border-emerald-200',
+    tagDark: 'bg-slate-800/70 text-emerald-200 border-emerald-500/25',
+  },
+  behavior: {
+    Icon: Activity,
+    lightCard: 'from-amber-50 to-orange-50 border-amber-200 hover:border-amber-400 hover:shadow-amber-200/60',
+    darkCard: 'from-slate-900/80 to-amber-950/20 border-slate-700/70 hover:border-amber-500/40 hover:shadow-slate-950/50',
+    iconLight: 'bg-amber-100 text-amber-600',
+    iconDark: 'bg-slate-800/90 text-amber-300 ring-1 ring-amber-500/20',
+    tagLight: 'bg-amber-100 text-amber-700 border-amber-200',
+    tagDark: 'bg-slate-800/70 text-amber-200 border-amber-500/25',
+  },
+  narrative: {
+    Icon: BookOpen,
+    lightCard: 'from-purple-50 to-violet-50 border-purple-200 hover:border-purple-400 hover:shadow-purple-200/60',
+    darkCard: 'from-slate-900/80 to-purple-950/20 border-slate-700/70 hover:border-purple-500/40 hover:shadow-slate-950/50',
+    iconLight: 'bg-purple-100 text-purple-600',
+    iconDark: 'bg-slate-800/90 text-purple-300 ring-1 ring-purple-500/20',
+    tagLight: 'bg-purple-100 text-purple-700 border-purple-200',
+    tagDark: 'bg-slate-800/70 text-purple-200 border-purple-500/25',
+  },
+  action: {
+    Icon: Zap,
+    lightCard: 'from-indigo-50 to-slate-50 border-indigo-200 hover:border-indigo-400 hover:shadow-indigo-200/60',
+    darkCard: 'from-slate-900/80 to-indigo-950/20 border-slate-700/70 hover:border-indigo-500/40 hover:shadow-slate-950/50',
+    iconLight: 'bg-indigo-100 text-indigo-600',
+    iconDark: 'bg-slate-800/90 text-indigo-300 ring-1 ring-indigo-500/20',
+    tagLight: 'bg-indigo-100 text-indigo-700 border-indigo-200',
+    tagDark: 'bg-slate-800/70 text-indigo-200 border-indigo-500/25',
+  },
+  risk: {
+    Icon: AlertTriangle,
+    lightCard: 'from-rose-50 to-pink-50 border-rose-200 hover:border-rose-400 hover:shadow-rose-200/60',
+    darkCard: 'from-slate-900/80 to-rose-950/20 border-slate-700/70 hover:border-rose-500/40 hover:shadow-slate-950/50',
+    iconLight: 'bg-rose-100 text-rose-600',
+    iconDark: 'bg-slate-800/90 text-rose-300 ring-1 ring-rose-500/20',
+    tagLight: 'bg-rose-100 text-rose-700 border-rose-200',
+    tagDark: 'bg-slate-800/70 text-rose-200 border-rose-500/25',
+  },
+};
+
+const DEFAULT_VISUAL: AgentVisual = {
+  Icon: Brain,
+  lightCard: 'from-gray-50 to-slate-50 border-gray-200 hover:border-gray-400 hover:shadow-gray-200/60',
+  darkCard: 'from-slate-900/80 to-slate-800/50 border-slate-700/70 hover:border-slate-500/50 hover:shadow-slate-950/50',
+  iconLight: 'bg-gray-100 text-gray-600',
+  iconDark: 'bg-slate-800/90 text-slate-300 ring-1 ring-slate-500/20',
+  tagLight: 'bg-gray-100 text-gray-700 border-gray-200',
+  tagDark: 'bg-slate-800/70 text-slate-200 border-slate-500/25',
+};
+
+const mapFieldLabel = (v: string) => REPORT_SCHEMA_LABELS[v] || v;
+
+function EditableText({
+  value,
+  onChange,
+  isDark,
+  multiline = false,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  isDark: boolean;
+  multiline?: boolean;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+
+  const confirm = () => { onChange(draft); setEditing(false); };
+  const cancel = () => { setDraft(value); setEditing(false); };
+
+  const inputCls = isDark
+    ? 'bg-slate-800 border-blue-500/60 text-slate-100 focus:border-blue-400'
+    : 'bg-white border-blue-300 text-gray-800 focus:border-blue-500';
+
+  if (editing) {
+    return (
+      <div className="space-y-2">
+        {multiline ? (
+          <textarea
+            autoFocus
+            value={draft}
+            onChange={e => setDraft(e.target.value)}
+            rows={5}
+            className={`w-full px-3 py-2 text-sm rounded-lg border outline-none resize-y font-mono leading-relaxed transition-colors ${inputCls}`}
+          />
+        ) : (
+          <input
+            autoFocus
+            value={draft}
+            onChange={e => setDraft(e.target.value)}
+            onKeyDown={e => { if (e.key === 'Enter') confirm(); if (e.key === 'Escape') cancel(); }}
+            className={`w-full px-3 py-1.5 text-sm rounded-lg border outline-none transition-colors ${inputCls}`}
+          />
+        )}
+        <div className="flex gap-2">
+          <button onClick={confirm} className="flex items-center gap-1 px-3 py-1 text-xs rounded-lg bg-green-500 hover:bg-green-400 text-white transition-colors">
+            <Check className="w-3 h-3" /> 确认
+          </button>
+          <button onClick={cancel} className={`flex items-center gap-1 px-3 py-1 text-xs rounded-lg border transition-colors ${isDark ? 'border-slate-600 text-slate-400 hover:text-slate-200' : 'border-gray-300 text-gray-500 hover:text-gray-700'}`}>
+            <X className="w-3 h-3" /> 取消
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="group/editable flex items-start gap-2 rounded-lg px-2 py-1.5 -mx-2 -my-1.5 transition-all duration-200 hover:bg-black/5 dark:hover:bg-white/5 cursor-pointer" onClick={() => { setDraft(value); setEditing(true); }}>
+      <span className={`flex-1 text-sm leading-relaxed break-words ${isDark ? 'text-slate-300' : 'text-gray-700'} ${multiline ? 'whitespace-pre-wrap font-mono text-xs' : ''}`}>
+        {value || <span className={isDark ? 'text-slate-600 italic' : 'text-gray-300 italic'}>(空)</span>}
+      </span>
+      <Edit2 className={`flex-shrink-0 w-3.5 h-3.5 mt-0.5 opacity-0 group-hover/editable:opacity-100 transition-all duration-200 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
+    </div>
+  );
+}
+
+function TagList({
+  tags,
+  onChange,
+  isDark,
+  tagLight = 'bg-sky-50 text-sky-700 border-sky-200',
+  tagDark = 'bg-slate-800/70 text-sky-200 border-sky-500/25',
+}: {
+  tags: string[];
+  onChange: (tags: string[]) => void;
+  isDark: boolean;
+  tagLight?: string;
+  tagDark?: string;
+}) {
+  const [editIdx, setEditIdx] = useState<number | null>(null);
+  const [editVal, setEditVal] = useState('');
+  const [adding, setAdding] = useState(false);
+  const [addVal, setAddVal] = useState('');
+
+  const tagCls = isDark ? tagDark : tagLight;
+  const inputCls = isDark
+    ? 'bg-slate-800 border-blue-500/60 text-slate-100 placeholder-slate-500 focus:border-blue-400'
+    : 'bg-white border-blue-400 text-gray-800 placeholder-gray-400 focus:border-blue-500';
+
+  const confirmEdit = () => {
+    if (editIdx === null) return;
+    const next = [...tags];
+    if (editVal.trim()) next[editIdx] = editVal.trim();
+    else next.splice(editIdx, 1);
+    onChange(next);
+    setEditIdx(null);
+  };
+
+  const confirmAdd = () => {
+    if (addVal.trim()) onChange([...tags, addVal.trim()]);
+    setAdding(false);
+    setAddVal('');
+  };
+
+  return (
+    <div className="flex flex-wrap gap-1.5 items-center">
+      {tags.map((tag, i) =>
+        editIdx === i ? (
+          <span key={i} className="inline-flex items-center gap-1">
+            <input
+              autoFocus
+              value={editVal}
+              onChange={e => setEditVal(e.target.value)}
+              onKeyDown={e => { if (e.key === 'Enter') confirmEdit(); if (e.key === 'Escape') setEditIdx(null); }}
+              className={`px-2 py-0.5 text-xs rounded border outline-none w-36 transition-colors ${inputCls}`}
+            />
+            <button onClick={confirmEdit} className="text-green-500 hover:text-green-400 transition-colors"><Check className="w-3 h-3" /></button>
+            <button onClick={() => setEditIdx(null)} className="text-red-400 hover:text-red-300 transition-colors"><X className="w-3 h-3" /></button>
+          </span>
+        ) : (
+          <span key={i} className="group/tag inline-flex items-center gap-1">
+            <span
+              onClick={() => { setEditIdx(i); setEditVal(tag); setAdding(false); }}
+              className={`inline-flex items-center gap-1 px-2.5 py-0.5 text-xs rounded-full border cursor-pointer transition-all duration-200 hover:scale-105 hover:opacity-90 ${tagCls}`}
+            >
+              {tag}
+              <button
+                onClick={e => { e.stopPropagation(); onChange(tags.filter((_, j) => j !== i)); }}
+                className="opacity-0 group-hover/tag:opacity-100 transition-opacity hover:text-red-500 ml-0.5"
+              >
+                <X className="w-2.5 h-2.5" />
+              </button>
+            </span>
+          </span>
+        )
+      )}
+      {adding ? (
+        <span className="inline-flex items-center gap-1">
+          <input
+            autoFocus
+            value={addVal}
+            onChange={e => setAddVal(e.target.value)}
+            onKeyDown={e => { if (e.key === 'Enter') confirmAdd(); if (e.key === 'Escape') { setAdding(false); setAddVal(''); } }}
+            placeholder="输入内容…"
+            className={`px-2 py-0.5 text-xs rounded border outline-none w-36 transition-colors ${inputCls}`}
+          />
+          <button onClick={confirmAdd} className="text-green-500 hover:text-green-400 transition-colors"><Check className="w-3 h-3" /></button>
+          <button onClick={() => { setAdding(false); setAddVal(''); }} className="text-red-400 hover:text-red-300 transition-colors"><X className="w-3 h-3" /></button>
+        </span>
+      ) : (
+        <button
+          onClick={() => { setAdding(true); setEditIdx(null); }}
+          className={`inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full border border-dashed transition-all duration-200 hover:scale-105 ${isDark ? 'border-slate-600 text-slate-500 hover:border-blue-500 hover:text-blue-400' : 'border-gray-300 text-gray-400 hover:border-blue-400 hover:text-blue-500'}`}
+        >
+          <Plus className="w-3 h-3" /> 添加
+        </button>
+      )}
+    </div>
+  );
+}
+
+function AgentCard({
+  agent,
+  onUpdate,
+  onDelete,
+  isDark,
+}: {
+  agent: AgentData;
+  onUpdate: (a: AgentData) => void;
+  onDelete: () => void;
+  isDark: boolean;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const vis = AGENT_VISUALS[agent.id] ?? DEFAULT_VISUAL;
+  const { Icon } = vis;
+  const cardCls = isDark ? vis.darkCard : vis.lightCard;
+  const iconCls = isDark ? vis.iconDark : vis.iconLight;
+  const tagCls = isDark ? vis.tagDark : vis.tagLight;
+
+  const handleFieldChange = (field: keyof AgentData, value: unknown) => {
+    onUpdate({ ...agent, [field]: value });
+  };
+
+  return (
+    <>
+      <div
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        className={`relative rounded-xl border p-4 bg-gradient-to-br transition-all duration-300 ${cardCls} ${hovered ? 'scale-[1.02] shadow-lg -translate-y-0.5' : 'scale-100 shadow-sm'}`}
+      >
+        <div className="flex items-start justify-between gap-3 mb-3">
+          <div className="flex items-center gap-3">
+            <div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 transition-transform duration-300 ${iconCls} ${hovered ? 'scale-110 rotate-3' : ''}`}>
+              <Icon className="w-5 h-5" />
+            </div>
+            <div>
+              <p className={`font-semibold text-sm ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>{agent.name}</p>
+              <p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{agent.dimension}</p>
+            </div>
+          </div>
+          <div className={`flex items-center gap-1 transition-opacity duration-200 ${hovered ? 'opacity-100' : 'opacity-0'}`}>
+            <button
+              onClick={() => setEditing(true)}
+              className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-700 text-slate-400 hover:text-blue-300' : 'hover:bg-white/70 text-gray-400 hover:text-blue-500'}`}
+            >
+              <Edit2 className="w-3.5 h-3.5" />
+            </button>
+            <button
+              onClick={onDelete}
+              className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-700 text-slate-400 hover:text-red-400' : 'hover:bg-white/70 text-gray-400 hover:text-red-500'}`}
+            >
+              <Trash2 className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        </div>
+
+        <code className={`inline-block text-xs px-2 py-0.5 rounded-full border mb-2 font-mono ${tagCls}`}>{agent.id}</code>
+
+        <div className="mb-3">
+          <p className={`text-xs leading-relaxed mb-1.5 line-clamp-2 ${isDark ? 'text-slate-400' : 'text-gray-600'}`}>{agent.expertise.slice(0, 80)}</p>
+        </div>
+
+        {agent.relevant_fields.length > 0 && (
+          <div className="mb-2">
+            <p className={`text-xs font-medium mb-1.5 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{FIELD_LABELS.relevant_fields}</p>
+            <div className="flex flex-wrap gap-1">
+              {agent.relevant_fields.map(f => (
+                <span key={f} className={`text-xs px-2 py-0.5 rounded-full border ${tagCls}`}>{f}</span>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {editing && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={() => setEditing(false)}>
+          <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
+          <div
+            className={`relative w-full max-w-2xl max-h-[85vh] overflow-y-auto rounded-2xl border shadow-2xl ${isDark ? 'bg-slate-900 border-slate-700' : 'bg-white border-gray-200'}`}
+            onClick={e => e.stopPropagation()}
+          >
+            <div className={`flex items-center justify-between px-6 py-4 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
+              <h2 className={`font-semibold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>编辑智能体</h2>
+              <button onClick={() => setEditing(false)} className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-800 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}><X className="w-4 h-4" /></button>
+            </div>
+            <div className="p-6 space-y-4">
+              {(['id', 'name', 'dimension'] as const).map(k => (
+                <div key={k} className="space-y-1">
+                  <label className={`text-xs font-semibold uppercase tracking-wide ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{FIELD_LABELS[k]}</label>
+                  <EditableText value={agent[k]} onChange={v => handleFieldChange(k, v)} isDark={isDark} />
+                </div>
+              ))}
+              <div className="space-y-1">
+                <label className={`text-xs font-semibold uppercase tracking-wide ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{FIELD_LABELS.expertise}</label>
+                <EditableText value={agent.expertise} onChange={v => handleFieldChange('expertise', v)} isDark={isDark} multiline />
+              </div>
+              <div className="space-y-1.5">
+                <label className={`text-xs font-semibold uppercase tracking-wide ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{FIELD_LABELS.relevant_fields}</label>
+                <TagList tags={agent.relevant_fields} onChange={v => handleFieldChange('relevant_fields', v)} isDark={isDark} tagLight="bg-blue-50 text-blue-700 border-blue-200" tagDark="bg-slate-800/70 text-blue-200 border-blue-500/25" />
+              </div>
+              <div className="space-y-1.5">
+                <label className={`text-xs font-semibold uppercase tracking-wide ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{FIELD_LABELS.analysis_contract}</label>
+                <TagList tags={agent.analysis_contract} onChange={v => handleFieldChange('analysis_contract', v)} isDark={isDark} tagLight="bg-violet-50 text-violet-700 border-violet-200" tagDark="bg-slate-800/70 text-violet-200 border-violet-500/25" />
+              </div>
+            </div>
+            <div className={`flex justify-end gap-3 px-6 py-4 border-t ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
+              <button onClick={() => setEditing(false)} className={`px-4 py-2 text-sm rounded-lg border transition-colors ${isDark ? 'border-slate-600 text-slate-400 hover:text-slate-200' : 'border-gray-300 text-gray-500 hover:text-gray-700'}`}>取消</button>
+              <button onClick={() => setEditing(false)} className="px-4 py-2 text-sm rounded-lg bg-blue-500 hover:bg-blue-400 text-white transition-colors flex items-center gap-1.5">
+                <Check className="w-3.5 h-3.5" /> 保存
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+function SectionWrapper({
+  title,
+  icon: Icon,
+  children,
+  isDark,
+  defaultOpen = true,
+}: {
+  title: string;
+  icon: React.ElementType;
+  children: React.ReactNode;
+  isDark: boolean;
+  defaultOpen?: boolean;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  return (
+    <div className={`rounded-xl border overflow-hidden transition-all duration-200 ${isDark ? 'bg-slate-800/40 border-slate-700/60' : 'bg-white border-gray-200 shadow-sm'}`}>
+      <button
+        onClick={() => setOpen(o => !o)}
+        className={`w-full flex items-center justify-between px-5 py-4 transition-colors duration-200 ${isDark ? 'hover:bg-slate-700/30' : 'hover:bg-gray-50'}`}
+      >
+        <div className="flex items-center gap-2.5">
+          <div className={`w-7 h-7 rounded-lg flex items-center justify-center ${isDark ? 'bg-slate-700' : 'bg-red-50'}`}>
+            <Icon className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+          </div>
+          <span className={`font-semibold text-sm ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>{title}</span>
+        </div>
+        {open
+          ? <ChevronDown className={`w-4 h-4 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
+          : <ChevronRight className={`w-4 h-4 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />}
+      </button>
+      <div className={`grid transition-all duration-300 ease-in-out ${open ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-70'}`}>
+        <div className="overflow-hidden">
+          <div className="px-5 pb-5 space-y-4">{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function Template6BEditor() {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  const [template, setTemplate] = useState<TemplateData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [dirty, setDirty] = useState(false);
+
+  useEffect(() => {
+    fetch('https://ch1.b.uat.4.cn/zncmweb/templates/6b_template.json')
+      .then(r => r.json())
+      .then((data: TemplateData) => { setTemplate(data); setLoading(false); })
+      .catch(e => { setError(e.message); setLoading(false); });
+  }, []);
+
+  const update = <K extends keyof TemplateData>(key: K, value: TemplateData[K]) => {
+    setTemplate(prev => prev ? { ...prev, [key]: value } : null);
+    setDirty(true);
+  };
+
+  const handleSave = () => {
+    if (!template) return;
+    console.log('[Template6BEditor 保存]', JSON.stringify(template, null, 2));
+    window.alert('配置已保存，详情请查看控制台');
+    setDirty(false);
+  };
+
+  if (loading) {
+    return (
+      <div className={`flex items-center justify-center min-h-64 ${isDark ? 'text-slate-400' : 'text-gray-400'}`}>
+        <RefreshCw className="w-5 h-5 animate-spin mr-2" />
+        <span className="text-sm">加载模板中…</span>
+      </div>
+    );
+  }
+
+  if (error || !template) {
+    return (
+      <div className={`flex items-center gap-2 p-4 rounded-xl ${isDark ? 'bg-red-950/30 text-red-400 border border-red-900/50' : 'bg-red-50 text-red-600 border border-red-200'}`}>
+        <AlertCircle className="w-5 h-5 flex-shrink-0" />
+        <span className="text-sm">模板加载失败：{error}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-[calc(100vh-24px)] max-h-[calc(100vh-24px)] flex flex-col max-w-5xl mx-auto px-1 pb-3">
+      <div className={`flex-shrink-0 flex items-center justify-between gap-4 py-3 border-b ${isDark ? 'border-slate-800' : 'border-gray-200'}`}>
+        <div>
+          <h1 className={`text-xl font-bold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>模板配置编辑器</h1>
+          <p className={`text-sm mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>六步行动方案 · {template.template_id}</p>
+        </div>
+        <div className="flex items-center gap-3">
+          {dirty && (
+            <div className={`flex items-center gap-2 text-xs px-3 py-1.5 rounded-full border ${isDark ? 'bg-amber-900/20 border-amber-700/40 text-amber-300' : 'bg-amber-50 border-amber-200 text-amber-600'}`}>
+              <Info className="w-3.5 h-3.5" />
+              已有未保存修改
+            </div>
+          )}
+          <button
+            onClick={handleSave}
+            className={`inline-flex items-center gap-2 px-4 py-2 rounded-xl border shadow-sm transition-all duration-200 hover:scale-[1.02] ${isDark ? 'bg-slate-900 border-slate-700 text-slate-100 hover:border-blue-500/40' : 'bg-white border-gray-200 text-gray-800 hover:border-blue-300'}`}
+          >
+            <Save className="w-4 h-4" /> 保存
+          </button>
+        </div>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto py-3 pr-1 space-y-4">
+        <SectionWrapper title="基本信息" icon={FileText} isDark={isDark}>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {(['template_id', 'template_name'] as const).map(k => (
+              <div key={k} className="space-y-1.5">
+                <span className={`text-xs font-semibold uppercase tracking-wide ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{FIELD_LABELS[k]}</span>
+                <EditableText value={template[k]} onChange={v => update(k, v)} isDark={isDark} />
+              </div>
+            ))}
+          </div>
+          <div className="space-y-1.5">
+            <span className={`text-xs font-semibold uppercase tracking-wide ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{FIELD_LABELS.template_brief}</span>
+            <EditableText value={template.template_brief} onChange={v => update('template_brief', v)} isDark={isDark} multiline />
+          </div>
+        </SectionWrapper>
+
+        <SectionWrapper title={FIELD_LABELS.usage_notes} icon={Info} isDark={isDark}>
+          <TagList
+            tags={template.usage_notes}
+            onChange={v => update('usage_notes', v)}
+            isDark={isDark}
+            tagLight="bg-amber-50 text-amber-700 border-amber-200"
+            tagDark="bg-slate-800/70 text-amber-200 border-amber-500/25"
+          />
+        </SectionWrapper>
+
+        <SectionWrapper title={FIELD_LABELS.report_schema} icon={Settings} isDark={isDark}>
+          <div className="space-y-3">
+            {Object.entries(template.report_schema).map(([key, desc]) => (
+              <div key={key} className={`group/row rounded-lg border px-4 py-3 transition-all duration-200 hover:scale-[1.005] ${isDark ? 'border-slate-700/50 bg-slate-800/30 hover:border-slate-600' : 'border-gray-200 bg-gray-50/50 hover:border-gray-300 hover:shadow-sm'}`}>
+                <div className="flex items-center gap-2 mb-1.5">
+                  <code className={`text-xs px-2 py-0.5 rounded font-mono ${isDark ? 'bg-slate-700 text-slate-400' : 'bg-gray-200 text-gray-500'}`}>{key}</code>
+                  <span className={`text-sm font-medium ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>{REPORT_SCHEMA_LABELS[key] || key}</span>
+                </div>
+                <EditableText
+                  value={desc}
+                  onChange={v => update('report_schema', { ...template.report_schema, [key]: v })}
+                  isDark={isDark}
+                  multiline
+                />
+              </div>
+            ))}
+          </div>
+        </SectionWrapper>
+
+        <SectionWrapper title={FIELD_LABELS.agents} icon={Brain} isDark={isDark}>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            {template.agents.map((agent, i) => (
+              <AgentCard
+                key={agent.id + i}
+                agent={agent}
+                onUpdate={updated => {
+                  const next = [...template.agents];
+                  next[i] = updated;
+                  update('agents', next);
+                }}
+                onDelete={() => {
+                  if (template.agents.length <= 1) {
+                    window.alert('智能体最少必须保留 1 个');
+                    return;
+                  }
+                  update('agents', template.agents.filter((_, j) => j !== i));
+                }}
+                isDark={isDark}
+              />
+            ))}
+          </div>
+        </SectionWrapper>
+      </div>
+    </div>
+  );
+}
diff --git a/web-code/components/qa/TemplateEditor.tsx b/web-code/components/qa/TemplateEditor.tsx
new file mode 100644
index 00000000..20645247
--- /dev/null
+++ b/web-code/components/qa/TemplateEditor.tsx
@@ -0,0 +1,1520 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { useTheme } from '../../contexts/ThemeContext';
+import {
+  Edit2, Plus, Trash2, Check, X, ChevronDown, ChevronRight,
+  Target, Package, Globe, BookOpen, MessageSquare, Zap,
+  Settings, FileText, Info, RefreshCw, AlertCircle, Brain, Save,
+} from 'lucide-react';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+interface FieldRequirement {
+  title: string;
+  goal: string;
+  must_cover: string[];
+  done_criteria: string[];
+  blockers: string[];
+  dependencies: string[];
+  evidence_needs: string[];
+  preferred_agents: string[];
+  style_notes: string;
+  min_chars?: number;
+  min_items?: number;
+}
+
+interface AgentData {
+  id: string;
+  name: string;
+  dimension: string;
+  expertise: string;
+  relevant_fields: string[];
+  analysis_contract: string[];
+}
+
+interface CoordinatorConfig {
+  system_prompt_prefix?: string;
+  round1_guidance?: string;
+  middle_round_guidance?: string;
+  final_round_guidance?: string;
+  speaker_selection_rules?: string;
+  focus_instruction_rules?: string;
+  dependency_driving_rules?: string[];
+  consistency_check_rules?: string[];
+  revise_prompt_prefix?: string;
+}
+
+interface TemplateData {
+  template_id: string;
+  template_name: string;
+  template_brief: string;
+  usage_notes: string[];
+  report_schema: Record<string, string>;
+  report_examples: Record<string, string>;
+  field_requirements: Record<string, FieldRequirement>;
+  agents: AgentData[];
+  coordinator_config: CoordinatorConfig;
+}
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const FIELD_LABELS: Record<string, string> = {
+  template_id: '模板ID',
+  template_name: '模板名称',
+  template_brief: '模板简介',
+  usage_notes: '使用说明',
+  report_schema: '报告字段结构',
+  report_examples: '报告字段示例',
+  field_requirements: '字段要求配置',
+  agents: '智能体配置',
+  coordinator_config: '协调者配置',
+  title: '字段标题',
+  goal: '字段目标',
+  must_cover: '必须覆盖内容',
+  done_criteria: '完成标准',
+  blockers: '阻塞条件',
+  dependencies: '依赖字段',
+  evidence_needs: '证据需求',
+  preferred_agents: '推荐智能体',
+  style_notes: '风格说明',
+  min_chars: '最小字符数',
+  min_items: '最小条目数',
+  id: '智能体ID',
+  name: '智能体名称',
+  dimension: '分析维度',
+  expertise: '专业能力',
+  relevant_fields: '关联字段',
+  analysis_contract: '分析契约',
+  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: '修改提示前缀',
+};
+
+const REPORT_SCHEMA_LABELS: Record<string, string> = {
+  task_background: '任务背景与领导指示研判',
+  resource_assessment: '各方口径与己方资源研判',
+  information_environment: '战场/舆论场环境分析',
+  historical_cultural_context: '历史与人文环境分析',
+  actor_dynamics: '敌我双方动态与优劣势',
+  opponent_narrative_logic: '对方核心叙事逻辑梳理',
+  strategic_weakness: '核心战略薄弱点研判',
+  assessment_conclusion: '研判结论',
+};
+
+interface AgentVisual {
+  Icon: React.ElementType;
+  lightCard: string;
+  darkCard: string;
+  iconLight: string;
+  iconDark: string;
+  tagLight: string;
+  tagDark: string;
+}
+
+const AGENT_VISUALS: Record<string, AgentVisual> = {
+  background: {
+    Icon: Target,
+    lightCard: 'from-blue-50 to-sky-50 border-blue-200 hover:border-blue-400 hover:shadow-blue-200/60',
+    darkCard: 'from-slate-900/80 to-blue-950/20 border-slate-700/70 hover:border-blue-500/40 hover:shadow-slate-950/50',
+    iconLight: 'bg-blue-100 text-blue-600',
+    iconDark: 'bg-slate-800/90 text-blue-300 ring-1 ring-blue-500/20',
+    tagLight: 'bg-blue-100 text-blue-700 border-blue-200',
+    tagDark: 'bg-slate-800/70 text-blue-200 border-blue-500/25',
+  },
+  resource: {
+    Icon: Package,
+    lightCard: 'from-emerald-50 to-teal-50 border-emerald-200 hover:border-emerald-400 hover:shadow-emerald-200/60',
+    darkCard: 'from-slate-900/80 to-emerald-950/20 border-slate-700/70 hover:border-emerald-500/40 hover:shadow-slate-950/50',
+    iconLight: 'bg-emerald-100 text-emerald-600',
+    iconDark: 'bg-slate-800/90 text-emerald-300 ring-1 ring-emerald-500/20',
+    tagLight: 'bg-emerald-100 text-emerald-700 border-emerald-200',
+    tagDark: 'bg-slate-800/70 text-emerald-200 border-emerald-500/25',
+  },
+  information_environment: {
+    Icon: Globe,
+    lightCard: 'from-purple-50 to-violet-50 border-purple-200 hover:border-purple-400 hover:shadow-purple-200/60',
+    darkCard: 'from-slate-900/80 to-purple-950/20 border-slate-700/70 hover:border-purple-500/40 hover:shadow-slate-950/50',
+    iconLight: 'bg-purple-100 text-purple-600',
+    iconDark: 'bg-slate-800/90 text-purple-300 ring-1 ring-purple-500/20',
+    tagLight: 'bg-purple-100 text-purple-700 border-purple-200',
+    tagDark: 'bg-slate-800/70 text-purple-200 border-purple-500/25',
+  },
+  history_culture: {
+    Icon: BookOpen,
+    lightCard: 'from-amber-50 to-orange-50 border-amber-200 hover:border-amber-400 hover:shadow-amber-200/60',
+    darkCard: 'from-slate-900/80 to-amber-950/20 border-slate-700/70 hover:border-amber-500/40 hover:shadow-slate-950/50',
+    iconLight: 'bg-amber-100 text-amber-600',
+    iconDark: 'bg-slate-800/90 text-amber-300 ring-1 ring-amber-500/20',
+    tagLight: 'bg-amber-100 text-amber-700 border-amber-200',
+    tagDark: 'bg-slate-800/70 text-amber-200 border-amber-500/25',
+  },
+  opponent_narrative: {
+    Icon: MessageSquare,
+    lightCard: 'from-rose-50 to-pink-50 border-rose-200 hover:border-rose-400 hover:shadow-rose-200/60',
+    darkCard: 'from-slate-900/80 to-rose-950/20 border-slate-700/70 hover:border-rose-500/40 hover:shadow-slate-950/50',
+    iconLight: 'bg-rose-100 text-rose-600',
+    iconDark: 'bg-slate-800/90 text-rose-300 ring-1 ring-rose-500/20',
+    tagLight: 'bg-rose-100 text-rose-700 border-rose-200',
+    tagDark: 'bg-slate-800/70 text-rose-200 border-rose-500/25',
+  },
+  strategy: {
+    Icon: Zap,
+    lightCard: 'from-indigo-50 to-slate-50 border-indigo-200 hover:border-indigo-400 hover:shadow-indigo-200/60',
+    darkCard: 'from-slate-900/80 to-indigo-950/20 border-slate-700/70 hover:border-indigo-500/40 hover:shadow-slate-950/50',
+    iconLight: 'bg-indigo-100 text-indigo-600',
+    iconDark: 'bg-slate-800/90 text-indigo-300 ring-1 ring-indigo-500/20',
+    tagLight: 'bg-indigo-100 text-indigo-700 border-indigo-200',
+    tagDark: 'bg-slate-800/70 text-indigo-200 border-indigo-500/25',
+  },
+};
+
+const DEFAULT_VISUAL: AgentVisual = {
+  Icon: Brain,
+  lightCard: 'from-gray-50 to-slate-50 border-gray-200 hover:border-gray-400 hover:shadow-gray-200/60',
+  darkCard: 'from-slate-900/80 to-slate-800/50 border-slate-700/70 hover:border-slate-500/50 hover:shadow-slate-950/50',
+  iconLight: 'bg-gray-100 text-gray-600',
+  iconDark: 'bg-slate-800/90 text-slate-300 ring-1 ring-slate-500/20',
+  tagLight: 'bg-gray-100 text-gray-700 border-gray-200',
+  tagDark: 'bg-slate-800/70 text-slate-200 border-slate-500/25',
+};
+
+const mapFieldLabel = (v: string) => REPORT_SCHEMA_LABELS[v] || v;
+
+function parseExpertiseConfig(expertise: string, fields: string[]) {
+  const match = expertise.match(/(你的分析应服务于?|你服务于)\s*/);
+  if (!match || match.index === undefined) {
+    return {
+      prefix: expertise,
+      marker: '你的分析应服务于',
+      fields: fields.filter(f => expertise.includes(f)),
+      suffix: '。',
+    };
+  }
+
+  const prefix = expertise.slice(0, match.index);
+  const marker = match[1] === '你服务于' ? '你的分析应服务于' : match[1];
+  const rest = expertise.slice(match.index + match[0].length);
+  const endIndex = rest.indexOf('。');
+  const serviceText = endIndex >= 0 ? rest.slice(0, endIndex) : rest;
+  const suffix = endIndex >= 0 ? rest.slice(endIndex) : '。';
+
+  return {
+    prefix,
+    marker,
+    fields: fields.filter(f => serviceText.includes(f)),
+    suffix,
+  };
+}
+
+function buildExpertise(prefix: string, fields: string[], suffix: string) {
+  const normalizedPrefix = prefix.trim();
+  const prefixSeparator = normalizedPrefix && !/[。！？.!?]$/.test(normalizedPrefix) ? '。' : '';
+  const serviceFields = fields.join('、');
+  const normalizedSuffix = suffix.trim() || '。';
+  return `${normalizedPrefix}${prefixSeparator}你的分析应服务于 ${serviceFields}${normalizedSuffix.startsWith('。') ? normalizedSuffix : `。${normalizedSuffix}`}`;
+}
+
+function replaceFieldKeysWithLabels(text: string, fields: string[]) {
+  return fields.reduce((next, field) => next.replaceAll(field, mapFieldLabel(field)), text);
+}
+
+function replaceFieldLabelsWithKeys(text: string, fields: string[]) {
+  return fields.reduce((next, field) => next.replaceAll(mapFieldLabel(field), field), text);
+}
+
+function extractFieldTokens(text: string, fields: string[]) {
+  return fields.filter(field => text.includes(field));
+}
+
+function removeFieldToken(text: string, field: string) {
+  return text
+    .replaceAll(field, '')
+    .replace(/、{2,}/g, '、')
+    .replace(/\s{2,}/g, ' ')
+    .replace(/、([，。；;,.])/g, '$1')
+    .replace(/([、，；;,])\s*([。,.])/g, '$2')
+    .trim();
+}
+
+function appendFieldTokens(text: string, fields: string[]) {
+  const missing = fields.filter(field => !text.includes(field));
+  if (!missing.length) return text;
+  const separator = text.trim().endsWith('。') ? '' : '。';
+  return `${text.trim()}${separator}相关字段：${missing.join('、')}。`;
+}
+
+function getValueType(value: unknown) {
+  if (Array.isArray(value)) return 'array';
+  if (value === null) return 'null';
+  return typeof value;
+}
+
+function compareJsonShape(reference: unknown, current: unknown, path = 'root') {
+  const issues: string[] = [];
+  const refType = getValueType(reference);
+  const curType = getValueType(current);
+
+  if (refType !== curType) {
+    issues.push(`${path}: 类型不一致，期望 ${refType}，实际 ${curType}`);
+    return issues;
+  }
+
+  if (refType === 'array') {
+    const refArr = reference as unknown[];
+    const curArr = current as unknown[];
+    if (refArr.length > 0 && curArr.length > 0) {
+      issues.push(...compareJsonShape(refArr[0], curArr[0], `${path}[]`));
+    }
+    return issues;
+  }
+
+  if (refType === 'object') {
+    const refObj = reference as Record<string, unknown>;
+    const curObj = current as Record<string, unknown>;
+    const refKeys = Object.keys(refObj);
+    const curKeys = Object.keys(curObj);
+
+    refKeys.filter(key => !(key in curObj)).forEach(key => issues.push(`${path}.${key}: 缺少字段`));
+    curKeys.filter(key => !(key in refObj)).forEach(key => issues.push(`${path}.${key}: 多余字段`));
+
+    refKeys
+      .filter(key => key in curObj)
+      .forEach(key => issues.push(...compareJsonShape(refObj[key], curObj[key], `${path}.${key}`)));
+  }
+
+  return issues;
+}
+
+
+// ─── Sub-components ───────────────────────────────────────────────────────────
+
+function RestoreAgentModal({
+  agents,
+  onClose,
+  onRestore,
+  isDark,
+}: {
+  agents: AgentData[];
+  onClose: () => void;
+  onRestore: (agent: AgentData) => void;
+  isDark: boolean;
+}) {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onClose}>
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
+      <div
+        className={`relative w-full max-w-xl rounded-2xl border shadow-2xl ${isDark ? 'bg-slate-900 border-slate-700' : 'bg-white border-gray-200'}`}
+        onClick={e => e.stopPropagation()}
+      >
+        <div className={`flex items-center justify-between px-5 py-4 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
+          <h3 className={`font-semibold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>恢复已删除智能体</h3>
+          <button onClick={onClose}><X className="w-4 h-4" /></button>
+        </div>
+        <div className="p-5 space-y-2 max-h-[50vh] overflow-y-auto">
+          {agents.map(agent => (
+            <button
+              key={agent.id}
+              onClick={() => onRestore(agent)}
+              className={`w-full text-left rounded-xl border p-3 transition-all duration-200 hover:scale-[1.01] ${isDark ? 'border-slate-700 hover:border-blue-500 bg-slate-800/40' : 'border-gray-200 hover:border-blue-300 bg-gray-50'}`}
+            >
+              <div className={`font-medium text-sm ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>{agent.name}</div>
+              <div className={`text-xs mt-1 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>{agent.id} · {agent.dimension}</div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function CoordinatorRuleList({
+  rules,
+  fields,
+  onChange,
+  isDark,
+}: {
+  rules: string[];
+  fields: string[];
+  onChange: (rules: string[]) => void;
+  isDark: boolean;
+}) {
+  return (
+    <div className="space-y-2">
+      {rules.map((rule, index) => (
+        <div key={index} className={`rounded-lg border px-3 py-2 ${isDark ? 'border-slate-700/60 bg-slate-800/30' : 'border-gray-200 bg-gray-50/60'}`}>
+          <CoordinatorFieldText
+            value={rule}
+            fields={fields}
+            onChange={nextRule => onChange(rules.map((item, i) => i === index ? nextRule : item))}
+            isDark={isDark}
+          />
+          <button
+            onClick={() => onChange(rules.filter((_, i) => i !== index))}
+            className={`mt-2 inline-flex items-center gap-1 text-xs transition-colors ${isDark ? 'text-slate-500 hover:text-red-400' : 'text-gray-400 hover:text-red-500'}`}
+          >
+            <Trash2 className="w-3 h-3" /> 删除规则
+          </button>
+        </div>
+      ))}
+      <button
+        onClick={() => onChange([...rules, fields[0] ? `补充 ${fields[0]} 的依赖驱动规则。` : '补充新的依赖驱动规则。'])}
+        className={`inline-flex items-center gap-1 px-2.5 py-1 text-xs rounded-full border border-dashed transition-all duration-200 hover:scale-105 ${isDark ? 'border-slate-600 text-slate-500 hover:border-teal-500 hover:text-teal-400' : 'border-gray-300 text-gray-400 hover:border-teal-400 hover:text-teal-500'}`}
+      >
+        <Plus className="w-3 h-3" /> 添加规则
+      </button>
+    </div>
+  );
+}
+
+function CoordinatorFieldText({
+  value,
+  fields,
+  onChange,
+  isDark,
+}: {
+  value: string;
+  fields: string[];
+  onChange: (v: string) => void;
+  isDark: boolean;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(replaceFieldKeysWithLabels(value, fields));
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const selectedFields = extractFieldTokens(value, fields);
+  const fieldOptions = fields.map(f => ({ value: f, label: mapFieldLabel(f) }));
+  const inputCls = isDark
+    ? 'bg-slate-800 border-blue-500/60 text-slate-100 focus:border-blue-400'
+    : 'bg-white border-blue-300 text-gray-800 focus:border-blue-500';
+
+  const confirm = () => {
+    onChange(replaceFieldLabelsWithKeys(draft, fields));
+    setEditing(false);
+  };
+
+  const removeField = (field: string) => {
+    onChange(removeFieldToken(value, field));
+    setDraft(replaceFieldKeysWithLabels(removeFieldToken(value, field), fields));
+  };
+
+  const addFields = (nextFields: string[]) => {
+    const next = appendFieldTokens(value, nextFields);
+    onChange(next);
+    setDraft(replaceFieldKeysWithLabels(next, fields));
+    setPickerOpen(false);
+  };
+
+  return (
+    <div className="space-y-2">
+      {editing ? (
+        <div className="space-y-2">
+          <textarea
+            autoFocus
+            value={draft}
+            onChange={e => setDraft(e.target.value)}
+            rows={5}
+            className={`w-full px-3 py-2 text-sm rounded-lg border outline-none resize-y leading-relaxed transition-colors ${inputCls}`}
+          />
+          <div className="flex gap-2">
+            <button onClick={confirm} className="flex items-center gap-1 px-3 py-1 text-xs rounded-lg bg-green-500 hover:bg-green-400 text-white transition-colors"><Check className="w-3 h-3" /> 确认</button>
+            <button onClick={() => { setDraft(replaceFieldKeysWithLabels(value, fields)); setEditing(false); }} className={`flex items-center gap-1 px-3 py-1 text-xs rounded-lg border transition-colors ${isDark ? 'border-slate-600 text-slate-400 hover:text-slate-200' : 'border-gray-300 text-gray-500 hover:text-gray-700'}`}><X className="w-3 h-3" /> 取消</button>
+          </div>
+        </div>
+      ) : (
+        <div className="group/editable flex items-start gap-2 rounded-lg px-2 py-1.5 -mx-2 -my-1.5 transition-all duration-200 hover:bg-black/5 dark:hover:bg-white/5 cursor-pointer" onClick={() => { setDraft(replaceFieldKeysWithLabels(value, fields)); setEditing(true); }}>
+          <span className={`flex-1 text-sm leading-relaxed break-words whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{replaceFieldKeysWithLabels(value, fields)}</span>
+          <Edit2 className={`flex-shrink-0 w-3.5 h-3.5 mt-0.5 opacity-0 group-hover/editable:opacity-100 transition-all duration-200 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
+        </div>
+      )}
+      <div className="flex flex-wrap gap-1.5 items-center">
+        {selectedFields.map(field => (
+          <span key={field} className={`inline-flex items-center gap-1 px-2.5 py-0.5 text-xs rounded-full border ${isDark ? 'bg-slate-800/70 text-cyan-200 border-cyan-500/25' : 'bg-cyan-50 text-cyan-700 border-cyan-200'}`}>
+            {mapFieldLabel(field)}
+            <button onClick={() => removeField(field)} className="hover:text-red-500"><X className="w-3 h-3" /></button>
+          </span>
+        ))}
+        <button onClick={() => setPickerOpen(true)} className={`inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full border border-dashed transition-all duration-200 hover:scale-105 ${isDark ? 'border-slate-600 text-slate-500 hover:border-cyan-500 hover:text-cyan-400' : 'border-gray-300 text-gray-400 hover:border-cyan-400 hover:text-cyan-500'}`}>
+          <Plus className="w-3 h-3" /> 添加字段
+        </button>
+      </div>
+      {pickerOpen && (
+        <MultiSelectModal
+          title="添加第一轮配置字段"
+          selected={selectedFields}
+          options={fieldOptions}
+          onClose={() => setPickerOpen(false)}
+          onSave={addFields}
+          isDark={isDark}
+        />
+      )}
+    </div>
+  );
+}
+
+function MultiSelectModal({
+  title,
+  selected,
+  options,
+  minKeep = 0,
+  onClose,
+  onSave,
+  isDark,
+}: {
+  title: string;
+  selected: string[];
+  options: { value: string; label: string }[];
+  minKeep?: number;
+  onClose: () => void;
+  onSave: (v: string[]) => void;
+  isDark: boolean;
+}) {
+  const [draft, setDraft] = useState<string[]>([...selected]);
+
+  const toggle = (value: string) => {
+    const has = draft.includes(value);
+    if (has && draft.length <= minKeep) {
+      window.alert(`最少必须保留 ${minKeep} 个`);
+      return;
+    }
+    setDraft(prev => has ? prev.filter(v => v !== value) : [...prev, value]);
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onClose}>
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
+      <div
+        className={`relative w-full max-w-xl rounded-2xl border shadow-2xl ${isDark ? 'bg-slate-900 border-slate-700' : 'bg-white border-gray-200'}`}
+        onClick={e => e.stopPropagation()}
+      >
+        <div className={`flex items-center justify-between px-5 py-4 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
+          <h3 className={`font-semibold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>{title}</h3>
+          <button onClick={onClose}><X className="w-4 h-4" /></button>
+        </div>
+        <div className="p-5 flex flex-wrap gap-2 max-h-[45vh] overflow-y-auto">
+          {options.map(op => {
+            const active = draft.includes(op.value);
+            return (
+              <button
+                key={op.value}
+                onClick={() => toggle(op.value)}
+                className={`px-2.5 py-1 text-xs rounded-full border transition-all ${
+                  active
+                    ? (isDark ? 'bg-blue-700/60 border-blue-500 text-blue-200' : 'bg-blue-100 border-blue-400 text-blue-700')
+                    : (isDark ? 'border-slate-600 text-slate-400' : 'border-gray-300 text-gray-600')
+                }`}
+              >
+                {op.label}
+              </button>
+            );
+          })}
+        </div>
+        <div className={`flex justify-end gap-2 px-5 py-4 border-t ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
+          <button onClick={onClose} className="px-3 py-1.5 text-sm rounded-lg border">取消</button>
+          <button
+            onClick={() => {
+              if (draft.length < minKeep) {
+                window.alert(`最少必须保留 ${minKeep} 个`);
+                return;
+              }
+              onSave(draft);
+            }}
+            className="px-3 py-1.5 text-sm rounded-lg bg-blue-500 text-white"
+          >
+            确认
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TagList({
+  tags,
+  onChange,
+  isDark,
+  tagLight = 'bg-sky-50 text-sky-700 border-sky-200',
+  tagDark = 'bg-slate-800/70 text-sky-200 border-sky-500/25',
+}: {
+  tags: string[];
+  onChange: (tags: string[]) => void;
+  isDark: boolean;
+  tagLight?: string;
+  tagDark?: string;
+}) {
+  const [editIdx, setEditIdx] = useState<number | null>(null);
+  const [editVal, setEditVal] = useState('');
+  const [adding, setAdding] = useState(false);
+  const [addVal, setAddVal] = useState('');
+
+  const tagCls = isDark ? tagDark : tagLight;
+  const inputCls = isDark
+    ? 'bg-slate-800 border-blue-500/60 text-slate-100 placeholder-slate-500 focus:border-blue-400'
+    : 'bg-white border-blue-400 text-gray-800 placeholder-gray-400 focus:border-blue-500';
+
+  const confirmEdit = () => {
+    if (editIdx === null) return;
+    const next = [...tags];
+    if (editVal.trim()) next[editIdx] = editVal.trim();
+    else next.splice(editIdx, 1);
+    onChange(next);
+    setEditIdx(null);
+  };
+
+  const confirmAdd = () => {
+    if (addVal.trim()) onChange([...tags, addVal.trim()]);
+    setAdding(false);
+    setAddVal('');
+  };
+
+  return (
+    <div className="flex flex-wrap gap-1.5 items-center">
+      {tags.map((tag, i) =>
+        editIdx === i ? (
+          <span key={i} className="inline-flex items-center gap-1">
+            <input
+              autoFocus
+              value={editVal}
+              onChange={e => setEditVal(e.target.value)}
+              onKeyDown={e => { if (e.key === 'Enter') confirmEdit(); if (e.key === 'Escape') setEditIdx(null); }}
+              className={`px-2 py-0.5 text-xs rounded border outline-none w-36 transition-colors ${inputCls}`}
+            />
+            <button onClick={confirmEdit} className="text-green-500 hover:text-green-400 transition-colors"><Check className="w-3 h-3" /></button>
+            <button onClick={() => setEditIdx(null)} className="text-red-400 hover:text-red-300 transition-colors"><X className="w-3 h-3" /></button>
+          </span>
+        ) : (
+          <span key={i} className="group/tag inline-flex items-center gap-1">
+            <span
+              onClick={() => { setEditIdx(i); setEditVal(tag); setAdding(false); }}
+              className={`inline-flex items-center gap-1 px-2.5 py-0.5 text-xs rounded-full border cursor-pointer transition-all duration-200 hover:scale-105 hover:opacity-90 ${tagCls}`}
+            >
+              {tag}
+              <button
+                onClick={e => { e.stopPropagation(); onChange(tags.filter((_, j) => j !== i)); }}
+                className="opacity-0 group-hover/tag:opacity-100 transition-opacity hover:text-red-500 ml-0.5"
+              >
+                <X className="w-2.5 h-2.5" />
+              </button>
+            </span>
+          </span>
+        )
+      )}
+      {adding ? (
+        <span className="inline-flex items-center gap-1">
+          <input
+            autoFocus
+            value={addVal}
+            onChange={e => setAddVal(e.target.value)}
+            onKeyDown={e => { if (e.key === 'Enter') confirmAdd(); if (e.key === 'Escape') { setAdding(false); setAddVal(''); } }}
+            placeholder="输入内容…"
+            className={`px-2 py-0.5 text-xs rounded border outline-none w-36 transition-colors ${inputCls}`}
+          />
+          <button onClick={confirmAdd} className="text-green-500 hover:text-green-400 transition-colors"><Check className="w-3 h-3" /></button>
+          <button onClick={() => { setAdding(false); setAddVal(''); }} className="text-red-400 hover:text-red-300 transition-colors"><X className="w-3 h-3" /></button>
+        </span>
+      ) : (
+        <button
+          onClick={() => { setAdding(true); setEditIdx(null); }}
+          className={`inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full border border-dashed transition-all duration-200 hover:scale-105 ${isDark ? 'border-slate-600 text-slate-500 hover:border-blue-500 hover:text-blue-400' : 'border-gray-300 text-gray-400 hover:border-blue-400 hover:text-blue-500'}`}
+        >
+          <Plus className="w-3 h-3" /> 添加
+        </button>
+      )}
+    </div>
+  );
+}
+
+function EditableText({
+  value,
+  onChange,
+  isDark,
+  multiline = false,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  isDark: boolean;
+  multiline?: boolean;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+
+  const confirm = () => { onChange(draft); setEditing(false); };
+  const cancel = () => { setDraft(value); setEditing(false); };
+
+  const inputCls = isDark
+    ? 'bg-slate-800 border-blue-500/60 text-slate-100 focus:border-blue-400'
+    : 'bg-white border-blue-300 text-gray-800 focus:border-blue-500';
+
+  if (editing) {
+    return (
+      <div className="space-y-2">
+        {multiline ? (
+          <textarea
+            autoFocus
+            value={draft}
+            onChange={e => setDraft(e.target.value)}
+            rows={multiline ? 5 : 2}
+            className={`w-full px-3 py-2 text-sm rounded-lg border outline-none resize-y font-mono leading-relaxed transition-colors ${inputCls}`}
+          />
+        ) : (
+          <input
+            autoFocus
+            value={draft}
+            onChange={e => setDraft(e.target.value)}
+            onKeyDown={e => { if (e.key === 'Enter') confirm(); if (e.key === 'Escape') cancel(); }}
+            className={`w-full px-3 py-1.5 text-sm rounded-lg border outline-none transition-colors ${inputCls}`}
+          />
+        )}
+        <div className="flex gap-2">
+          <button onClick={confirm} className="flex items-center gap-1 px-3 py-1 text-xs rounded-lg bg-green-500 hover:bg-green-400 text-white transition-colors">
+            <Check className="w-3 h-3" /> 确认
+          </button>
+          <button onClick={cancel} className={`flex items-center gap-1 px-3 py-1 text-xs rounded-lg border transition-colors ${isDark ? 'border-slate-600 text-slate-400 hover:text-slate-200' : 'border-gray-300 text-gray-500 hover:text-gray-700'}`}>
+            <X className="w-3 h-3" /> 取消
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="group/editable flex items-start gap-2 rounded-lg px-2 py-1.5 -mx-2 -my-1.5 transition-all duration-200 hover:bg-black/5 dark:hover:bg-white/5 cursor-pointer" onClick={() => { setDraft(value); setEditing(true); }}>
+      <span className={`flex-1 text-sm leading-relaxed break-words ${isDark ? 'text-slate-300' : 'text-gray-700'} ${multiline ? 'whitespace-pre-wrap font-mono text-xs' : ''}`}>
+        {value || <span className={isDark ? 'text-slate-600 italic' : 'text-gray-300 italic'}>(空)</span>}
+      </span>
+      <Edit2 className={`flex-shrink-0 w-3.5 h-3.5 mt-0.5 opacity-0 group-hover/editable:opacity-100 transition-all duration-200 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
+    </div>
+  );
+}
+
+function EditableMarkdown({
+  value,
+  onChange,
+  isDark,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  isDark: boolean;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+
+  if (editing) {
+    return (
+      <div className="space-y-2">
+        <textarea
+          autoFocus
+          value={draft}
+          onChange={e => setDraft(e.target.value)}
+          rows={10}
+          className={`w-full px-3 py-2 text-sm rounded-lg border outline-none resize-y font-mono leading-relaxed transition-colors ${isDark ? 'bg-slate-800 border-blue-500/60 text-slate-100 focus:border-blue-400' : 'bg-white border-blue-300 text-gray-800 focus:border-blue-500'}`}
+        />
+        <div className="flex gap-2">
+          <button
+            onClick={() => { onChange(draft); setEditing(false); }}
+            className="flex items-center gap-1 px-3 py-1 text-xs rounded-lg bg-green-500 hover:bg-green-400 text-white transition-colors"
+          >
+            <Check className="w-3 h-3" /> 确认
+          </button>
+          <button
+            onClick={() => { setDraft(value); setEditing(false); }}
+            className={`flex items-center gap-1 px-3 py-1 text-xs rounded-lg border transition-colors ${isDark ? 'border-slate-600 text-slate-400 hover:text-slate-200' : 'border-gray-300 text-gray-500 hover:text-gray-700'}`}
+          >
+            <X className="w-3 h-3" /> 取消
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`group/markdown relative rounded-lg border px-3 py-3 transition-colors cursor-pointer ${isDark ? 'border-slate-700/50 bg-slate-900/20 hover:border-slate-600' : 'border-gray-200 bg-white hover:border-gray-300'}`}
+      onClick={() => { setDraft(value); setEditing(true); }}
+    >
+      <Edit2 className={`absolute top-2 right-2 w-4 h-4 opacity-0 group-hover/markdown:opacity-100 transition-opacity ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
+      <div className={`prose prose-sm max-w-none ${isDark ? 'prose-invert' : ''}`}>
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>{value}</ReactMarkdown>
+      </div>
+    </div>
+  );
+}
+
+function EditableNumber({
+  value,
+  onChange,
+  isDark,
+}: {
+  value: number | undefined;
+  onChange: (v: number | undefined) => void;
+  isDark: boolean;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(String(value ?? ''));
+
+  const confirm = () => {
+    const n = parseInt(draft, 10);
+    onChange(isNaN(n) ? undefined : n);
+    setEditing(false);
+  };
+
+  if (editing) {
+    return (
+      <span className="inline-flex items-center gap-1">
+        <input
+          autoFocus
+          type="number"
+          value={draft}
+          onChange={e => setDraft(e.target.value)}
+          onKeyDown={e => { if (e.key === 'Enter') confirm(); if (e.key === 'Escape') setEditing(false); }}
+          className={`w-20 px-2 py-0.5 text-sm rounded border outline-none ${isDark ? 'bg-slate-800 border-blue-500/60 text-slate-100' : 'bg-white border-blue-300 text-gray-800'}`}
+        />
+        <button onClick={confirm} className="text-green-500 hover:text-green-400"><Check className="w-3.5 h-3.5" /></button>
+        <button onClick={() => setEditing(false)} className="text-red-400 hover:text-red-300"><X className="w-3.5 h-3.5" /></button>
+      </span>
+    );
+  }
+
+  return (
+    <span
+      onClick={() => { setDraft(String(value ?? '')); setEditing(true); }}
+      className={`group/num inline-flex items-center gap-1 px-2 py-0.5 text-sm rounded cursor-pointer transition-all duration-200 hover:scale-105 ${isDark ? 'text-blue-300 bg-blue-900/30 hover:bg-blue-900/50' : 'text-blue-600 bg-blue-50 hover:bg-blue-100'}`}
+    >
+      {value ?? <span className="italic opacity-50">未设置</span>}
+      <Edit2 className="w-3 h-3 opacity-0 group-hover/num:opacity-100 transition-opacity" />
+    </span>
+  );
+}
+
+function SectionWrapper({
+  title,
+  icon: Icon,
+  children,
+  isDark,
+  defaultOpen = true,
+}: {
+  title: string;
+  icon: React.ElementType;
+  children: React.ReactNode;
+  isDark: boolean;
+  defaultOpen?: boolean;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  return (
+    <div className={`rounded-xl border overflow-hidden transition-all duration-200 ${isDark ? 'bg-slate-800/40 border-slate-700/60' : 'bg-white border-gray-200 shadow-sm'}`}>
+      <button
+        onClick={() => setOpen(o => !o)}
+        className={`w-full flex items-center justify-between px-5 py-4 transition-colors duration-200 ${isDark ? 'hover:bg-slate-700/30' : 'hover:bg-gray-50'}`}
+      >
+        <div className="flex items-center gap-2.5">
+          <div className={`w-7 h-7 rounded-lg flex items-center justify-center ${isDark ? 'bg-slate-700' : 'bg-red-50'}`}>
+            <Icon className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+          </div>
+          <span className={`font-semibold text-sm ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>{title}</span>
+        </div>
+        {open
+          ? <ChevronDown className={`w-4 h-4 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
+          : <ChevronRight className={`w-4 h-4 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />}
+      </button>
+      <div className={`grid transition-all duration-300 ease-in-out ${open ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-70'}`}>
+        <div className="overflow-hidden">
+          <div className="px-5 pb-5 space-y-4">{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function LabelRow({
+  label,
+  children,
+  isDark,
+}: {
+  label: string;
+  children: React.ReactNode;
+  isDark: boolean;
+}) {
+  return (
+    <div className="space-y-1.5">
+      <span className={`text-xs font-semibold uppercase tracking-wide ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{label}</span>
+      <div>{children}</div>
+    </div>
+  );
+}
+
+// ─── Agent Edit Modal ─────────────────────────────────────────────────────────
+
+function AgentEditModal({
+  agent,
+  existingFields,
+  onSave,
+  onClose,
+  isDark,
+}: {
+  agent: AgentData;
+  existingFields: string[];
+  onSave: (a: AgentData) => void;
+  onClose: () => void;
+  isDark: boolean;
+}) {
+  const [form, setForm] = useState<AgentData>({ ...agent, relevant_fields: [...agent.relevant_fields], analysis_contract: [...agent.analysis_contract] });
+  const initialExpertise = useMemo(() => parseExpertiseConfig(agent.expertise, existingFields), [agent.expertise, existingFields]);
+  const [expertisePrefix, setExpertisePrefix] = useState(initialExpertise.prefix);
+  const [expertiseFields, setExpertiseFields] = useState<string[]>(initialExpertise.fields.length ? initialExpertise.fields : existingFields.slice(0, 1));
+  const [expertiseSuffix] = useState(initialExpertise.suffix);
+  const [fieldPickerOpen, setFieldPickerOpen] = useState(false);
+  const [expertisePickerOpen, setExpertisePickerOpen] = useState(false);
+
+  const set = (k: keyof AgentData, v: unknown) => setForm(p => ({ ...p, [k]: v }));
+
+  const inputCls = `w-full px-3 py-2 text-sm rounded-lg border outline-none transition-colors ${isDark ? 'bg-slate-800 border-slate-600 text-slate-100 focus:border-blue-400' : 'bg-white border-gray-300 text-gray-800 focus:border-blue-400'}`;
+  const labelCls = `text-xs font-semibold uppercase tracking-wide ${isDark ? 'text-slate-500' : 'text-gray-400'}`;
+  const fieldOptions = existingFields.map(f => ({ value: f, label: mapFieldLabel(f) }));
+
+  const removeRelevantField = (field: string) => {
+    if (form.relevant_fields.length <= 1) {
+      window.alert('关联字段最少必须保留 1 个');
+      return;
+    }
+    set('relevant_fields', form.relevant_fields.filter(x => x !== field));
+  };
+
+  const removeExpertiseField = (field: string) => {
+    if (expertiseFields.length <= 1) {
+      window.alert('专业能力服务字段最少必须保留 1 个');
+      return;
+    }
+    setExpertiseFields(prev => prev.filter(x => x !== field));
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onClose}>
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
+      <div
+        className={`relative w-full max-w-2xl max-h-[85vh] overflow-y-auto rounded-2xl border shadow-2xl ${isDark ? 'bg-slate-900 border-slate-700' : 'bg-white border-gray-200'}`}
+        onClick={e => e.stopPropagation()}
+      >
+        <div className={`flex items-center justify-between px-6 py-4 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
+          <h2 className={`font-semibold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>编辑智能体</h2>
+          <button onClick={onClose} className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-800 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}><X className="w-4 h-4" /></button>
+        </div>
+        <div className="p-6 space-y-4">
+          {(['id', 'name', 'dimension'] as const).map(k => (
+            <div key={k} className="space-y-1">
+              <label className={labelCls}>{FIELD_LABELS[k]}</label>
+              <input value={form[k]} onChange={e => set(k, e.target.value)} className={inputCls} />
+            </div>
+          ))}
+          <div className="space-y-2">
+            <label className={labelCls}>{FIELD_LABELS.expertise}</label>
+            <div className="space-y-1.5">
+              <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>分析职责描述（“你的分析应服务于”前面的内容）</span>
+              <textarea
+                value={expertisePrefix}
+                onChange={e => setExpertisePrefix(e.target.value)}
+                rows={3}
+                className={inputCls + ' resize-y text-xs leading-relaxed'}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>你的分析应服务于</span>
+              <div className="flex flex-wrap gap-1.5">
+                {expertiseFields.map(f => (
+                  <span key={f} className={`inline-flex items-center gap-1 px-2.5 py-0.5 text-xs rounded-full border ${isDark ? 'bg-slate-800/70 text-emerald-200 border-emerald-500/25' : 'bg-emerald-50 text-emerald-700 border-emerald-200'}`}>
+                    {mapFieldLabel(f)}
+                    <button onClick={() => removeExpertiseField(f)} className="hover:text-red-500"><X className="w-3 h-3" /></button>
+                  </span>
+                ))}
+                <button onClick={() => setExpertisePickerOpen(true)} className={`inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full border border-dashed ${isDark ? 'border-slate-600 text-slate-400 hover:border-emerald-500 hover:text-emerald-300' : 'border-gray-300 text-gray-500 hover:border-emerald-400 hover:text-emerald-600'}`}>
+                  <Plus className="w-3 h-3" /> 添加
+                </button>
+              </div>
+            </div>
+          </div>
+          <div className="space-y-1.5">
+            <label className={labelCls}>{FIELD_LABELS.relevant_fields}</label>
+            <div className="flex flex-wrap gap-1.5">
+              {form.relevant_fields.map(f => (
+                <span key={f} className={`inline-flex items-center gap-1 px-2.5 py-0.5 text-xs rounded-full border ${isDark ? 'bg-slate-800/70 text-blue-200 border-blue-500/25' : 'bg-blue-50 text-blue-700 border-blue-200'}`}>
+                  {mapFieldLabel(f)}
+                  <button onClick={() => removeRelevantField(f)} className="hover:text-red-500"><X className="w-3 h-3" /></button>
+                </span>
+              ))}
+              <button onClick={() => setFieldPickerOpen(true)} className={`inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full border border-dashed ${isDark ? 'border-slate-600 text-slate-400 hover:border-blue-500 hover:text-blue-300' : 'border-gray-300 text-gray-500 hover:border-blue-400 hover:text-blue-600'}`}>
+                <Plus className="w-3 h-3" /> 添加
+              </button>
+            </div>
+          </div>
+          <div className="space-y-1.5">
+            <label className={labelCls}>{FIELD_LABELS.analysis_contract}</label>
+            <TagList tags={form.analysis_contract} onChange={v => set('analysis_contract', v)} isDark={isDark} tagLight="bg-violet-50 text-violet-700 border-violet-200" tagDark="bg-slate-800/70 text-violet-200 border-violet-500/25" />
+          </div>
+        </div>
+        <div className={`flex justify-end gap-3 px-6 py-4 border-t ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
+          <button onClick={onClose} className={`px-4 py-2 text-sm rounded-lg border transition-colors ${isDark ? 'border-slate-600 text-slate-400 hover:text-slate-200' : 'border-gray-300 text-gray-500 hover:text-gray-700'}`}>取消</button>
+          <button onClick={() => onSave({ ...form, expertise: buildExpertise(expertisePrefix, expertiseFields, expertiseSuffix) })} className="px-4 py-2 text-sm rounded-lg bg-blue-500 hover:bg-blue-400 text-white transition-colors flex items-center gap-1.5">
+            <Check className="w-3.5 h-3.5" /> 保存
+          </button>
+        </div>
+      </div>
+      {fieldPickerOpen && (
+        <MultiSelectModal
+          title="选择关联字段"
+          selected={form.relevant_fields}
+          options={fieldOptions}
+          minKeep={1}
+          onClose={() => setFieldPickerOpen(false)}
+          onSave={v => { set('relevant_fields', v); setFieldPickerOpen(false); }}
+          isDark={isDark}
+        />
+      )}
+      {expertisePickerOpen && (
+        <MultiSelectModal
+          title="选择专业能力服务字段"
+          selected={expertiseFields}
+          options={fieldOptions}
+          minKeep={1}
+          onClose={() => setExpertisePickerOpen(false)}
+          onSave={v => { setExpertiseFields(v); setExpertisePickerOpen(false); }}
+          isDark={isDark}
+        />
+      )}
+    </div>
+  );
+}
+
+// ─── Agent Card ───────────────────────────────────────────────────────────────
+
+function AgentCard({
+  agent,
+  existingFields,
+  onUpdate,
+  onDelete,
+  isDark,
+}: {
+  agent: AgentData;
+  existingFields: string[];
+  onUpdate: (a: AgentData) => void;
+  onDelete: () => void;
+  isDark: boolean;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const vis = AGENT_VISUALS[agent.id] ?? DEFAULT_VISUAL;
+  const { Icon } = vis;
+  const cardCls = isDark ? vis.darkCard : vis.lightCard;
+  const iconCls = isDark ? vis.iconDark : vis.iconLight;
+  const tagCls = isDark ? vis.tagDark : vis.tagLight;
+  const expertiseConfig = parseExpertiseConfig(agent.expertise, existingFields);
+
+  return (
+    <>
+      <div
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        className={`relative rounded-xl border p-4 bg-gradient-to-br transition-all duration-300 ${cardCls} ${hovered ? 'scale-[1.02] shadow-lg -translate-y-0.5' : 'scale-100 shadow-sm'}`}
+      >
+        {/* Header */}
+        <div className="flex items-start justify-between gap-3 mb-3">
+          <div className="flex items-center gap-3">
+            <div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 transition-transform duration-300 ${iconCls} ${hovered ? 'scale-110 rotate-3' : ''}`}>
+              <Icon className="w-5 h-5" />
+            </div>
+            <div>
+              <p className={`font-semibold text-sm ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>{agent.name}</p>
+              <p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{agent.dimension}</p>
+            </div>
+          </div>
+          <div className={`flex items-center gap-1 transition-opacity duration-200 ${hovered ? 'opacity-100' : 'opacity-0'}`}>
+            <button
+              onClick={() => setEditing(true)}
+              className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-700 text-slate-400 hover:text-blue-300' : 'hover:bg-white/70 text-gray-400 hover:text-blue-500'}`}
+              title="编辑"
+            >
+              <Edit2 className="w-3.5 h-3.5" />
+            </button>
+            <button
+              onClick={onDelete}
+              className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-700 text-slate-400 hover:text-red-400' : 'hover:bg-white/70 text-gray-400 hover:text-red-500'}`}
+              title="删除"
+            >
+              <Trash2 className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        </div>
+
+        {/* ID badge */}
+        <code className={`inline-block text-xs px-2 py-0.5 rounded-full border mb-2 font-mono ${tagCls}`}>{agent.id}</code>
+
+        {/* Expertise */}
+        <div className="mb-3">
+          <p className={`text-xs leading-relaxed mb-1.5 line-clamp-2 ${isDark ? 'text-slate-400' : 'text-gray-600'}`}>{expertiseConfig.prefix}</p>
+          <div className="flex flex-wrap gap-1">
+            {expertiseConfig.fields.map(f => (
+              <span key={f} className={`text-xs px-2 py-0.5 rounded-full border ${isDark ? 'bg-slate-800/70 text-emerald-200 border-emerald-500/25' : 'bg-emerald-50 text-emerald-700 border-emerald-200'}`}>{mapFieldLabel(f)}</span>
+            ))}
+          </div>
+        </div>
+
+        {/* Relevant fields */}
+        {agent.relevant_fields.length > 0 && (
+          <div className="mb-2">
+            <p className={`text-xs font-medium mb-1.5 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{FIELD_LABELS.relevant_fields}</p>
+            <div className="flex flex-wrap gap-1">
+              {agent.relevant_fields.map(f => (
+                <span key={f} className={`text-xs px-2 py-0.5 rounded-full border ${tagCls}`}>{mapFieldLabel(f)}</span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Analysis contract */}
+        {agent.analysis_contract.length > 0 && (
+          <div>
+            <p className={`text-xs font-medium mb-1.5 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{FIELD_LABELS.analysis_contract}</p>
+            <ul className="space-y-1">
+              {agent.analysis_contract.map((c, i) => (
+                <li key={i} className={`text-xs flex gap-1.5 items-start ${isDark ? 'text-slate-400' : 'text-gray-600'}`}>
+                  <span className={`mt-1 flex-shrink-0 w-1.5 h-1.5 rounded-full ${isDark ? 'bg-slate-600' : 'bg-gray-300'}`} />
+                  {c}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+
+      {editing && (
+        <AgentEditModal
+          agent={agent}
+          existingFields={existingFields}
+          onSave={updated => { onUpdate(updated); setEditing(false); }}
+          onClose={() => setEditing(false)}
+          isDark={isDark}
+        />
+      )}
+    </>
+  );
+}
+
+// ─── Field Requirement Card ───────────────────────────────────────────────────
+
+function FieldRequirementCard({
+  fieldKey,
+  req,
+  onChange,
+  isDark,
+  fieldOptions,
+  agentOptions,
+}: {
+  fieldKey: string;
+  req: FieldRequirement;
+  onChange: (r: FieldRequirement) => void;
+  isDark: boolean;
+  fieldOptions: { value: string; label: string }[];
+  agentOptions: { value: string; label: string }[];
+}) {
+  const [open, setOpen] = useState(false);
+  const [picker, setPicker] = useState<'dependencies' | 'preferred_agents' | null>(null);
+  const label = REPORT_SCHEMA_LABELS[fieldKey] || fieldKey;
+
+  const setField = <K extends keyof FieldRequirement>(k: K, v: FieldRequirement[K]) =>
+    onChange({ ...req, [k]: v });
+
+  const ARRAY_FIELDS: (keyof FieldRequirement)[] = ['must_cover', 'done_criteria', 'blockers', 'evidence_needs'];
+
+  const removeRequiredItem = (key: 'dependencies' | 'preferred_agents', value: string) => {
+    const current = req[key];
+    if (current.length <= 1) {
+      window.alert(key === 'dependencies' ? '依赖字段最少必须保留 1 个' : '推荐智能体最少必须保留 1 个');
+      return;
+    }
+    setField(key, current.filter(x => x !== value));
+  };
+
+  return (
+    <div className={`rounded-xl border overflow-hidden transition-all duration-200 ${isDark ? 'border-slate-700/60 bg-slate-800/30' : 'border-gray-200 bg-gray-50'}`}>
+      <button
+        onClick={() => setOpen(o => !o)}
+        className={`w-full flex items-center justify-between px-4 py-3 text-left transition-colors duration-200 group/fld ${isDark ? 'hover:bg-slate-700/30' : 'hover:bg-white'}`}
+      >
+        <div className="flex items-center gap-2 min-w-0">
+          <code className={`text-xs px-2 py-0.5 rounded font-mono flex-shrink-0 ${isDark ? 'bg-slate-700 text-slate-400' : 'bg-gray-200 text-gray-500'}`}>{fieldKey}</code>
+          <span className={`text-sm font-medium truncate ${isDark ? 'text-slate-200' : 'text-gray-800'}`}>{label}</span>
+        </div>
+        {open
+          ? <ChevronDown className={`w-4 h-4 flex-shrink-0 transition-transform duration-300 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
+          : <ChevronRight className={`w-4 h-4 flex-shrink-0 transition-transform duration-300 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />}
+      </button>
+
+      <div className={`grid transition-all duration-300 ease-in-out ${open ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-70'}`}>
+        <div className="overflow-hidden">
+          <div className={`px-4 pb-4 pt-1 space-y-3 border-t ${isDark ? 'border-slate-700/60' : 'border-gray-200'}`}>
+            {(['title', 'goal', 'style_notes'] as const).map(k => (
+              <LabelRow key={k} label={FIELD_LABELS[k]} isDark={isDark}>
+                <EditableText
+                  value={req[k] as string}
+                  onChange={v => setField(k, v)}
+                  isDark={isDark}
+                  multiline={k === 'style_notes'}
+                />
+              </LabelRow>
+            ))}
+
+            <div className="flex gap-6">
+              {(['min_chars', 'min_items'] as const).map(k => (
+                <LabelRow key={k} label={FIELD_LABELS[k]} isDark={isDark}>
+                  <EditableNumber value={req[k]} onChange={v => setField(k, v)} isDark={isDark} />
+                </LabelRow>
+              ))}
+            </div>
+
+            {ARRAY_FIELDS.map((k, index) => (
+              <LabelRow key={String(k)} label={FIELD_LABELS[String(k)]} isDark={isDark}>
+                <TagList
+                  tags={req[k] as string[]}
+                  onChange={v => setField(k as keyof FieldRequirement, v as FieldRequirement[typeof k])}
+                  isDark={isDark}
+                  tagLight={index % 2 === 0 ? 'bg-emerald-50 text-emerald-700 border-emerald-200' : 'bg-amber-50 text-amber-700 border-amber-200'}
+                  tagDark={index % 2 === 0 ? 'bg-slate-800/70 text-emerald-200 border-emerald-500/25' : 'bg-slate-800/70 text-amber-200 border-amber-500/25'}
+                />
+              </LabelRow>
+            ))}
+
+            <LabelRow label={FIELD_LABELS.dependencies} isDark={isDark}>
+              <div className="flex flex-wrap gap-1.5 items-center">
+                {req.dependencies.map(v => (
+                  <span key={v} className={`inline-flex items-center gap-1 px-2.5 py-0.5 text-xs rounded-full border ${isDark ? 'bg-slate-800/70 text-violet-200 border-violet-500/25' : 'bg-violet-50 text-violet-700 border-violet-200'}`}>
+                    {fieldOptions.find(x => x.value === v)?.label || v}
+                    <button onClick={() => removeRequiredItem('dependencies', v)} className="hover:text-red-500"><X className="w-3 h-3" /></button>
+                  </span>
+                ))}
+                <button onClick={() => setPicker('dependencies')} className={`inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full border border-dashed transition-all duration-200 hover:scale-105 ${isDark ? 'border-slate-600 text-slate-500 hover:border-violet-500 hover:text-violet-400' : 'border-gray-300 text-gray-400 hover:border-violet-400 hover:text-violet-500'}`}>
+                  <Plus className="w-3 h-3" /> 添加
+                </button>
+              </div>
+            </LabelRow>
+
+            <LabelRow label={FIELD_LABELS.preferred_agents} isDark={isDark}>
+              <div className="flex flex-wrap gap-1.5 items-center">
+                {req.preferred_agents.map(v => (
+                  <span key={v} className={`inline-flex items-center gap-1 px-2.5 py-0.5 text-xs rounded-full border ${isDark ? 'bg-slate-800/70 text-rose-200 border-rose-500/25' : 'bg-rose-50 text-rose-700 border-rose-200'}`}>
+                    {agentOptions.find(x => x.value === v)?.label || v}
+                    <button onClick={() => removeRequiredItem('preferred_agents', v)} className="hover:text-red-500"><X className="w-3 h-3" /></button>
+                  </span>
+                ))}
+                <button onClick={() => setPicker('preferred_agents')} className={`inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full border border-dashed transition-all duration-200 hover:scale-105 ${isDark ? 'border-slate-600 text-slate-500 hover:border-rose-500 hover:text-rose-400' : 'border-gray-300 text-gray-400 hover:border-rose-400 hover:text-rose-500'}`}>
+                  <Plus className="w-3 h-3" /> 添加
+                </button>
+              </div>
+            </LabelRow>
+          </div>
+        </div>
+      </div>
+
+      {picker === 'dependencies' && (
+        <MultiSelectModal
+          title="选择依赖字段"
+          selected={req.dependencies}
+          options={fieldOptions}
+          minKeep={1}
+          onClose={() => setPicker(null)}
+          onSave={v => { setField('dependencies', v); setPicker(null); }}
+          isDark={isDark}
+        />
+      )}
+      {picker === 'preferred_agents' && (
+        <MultiSelectModal
+          title="选择推荐智能体"
+          selected={req.preferred_agents}
+          options={agentOptions}
+          minKeep={1}
+          onClose={() => setPicker(null)}
+          onSave={v => { setField('preferred_agents', v); setPicker(null); }}
+          isDark={isDark}
+        />
+      )}
+    </div>
+  );
+}
+
+// ─── Main Component ───────────────────────────────────────────────────────────
+
+export default function TemplateEditor() {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  const [template, setTemplate] = useState<TemplateData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [dirty, setDirty] = useState(false);
+  const [addingAgent, setAddingAgent] = useState(false);
+  const [fixedAgents, setFixedAgents] = useState<AgentData[]>([]);
+  const [originalTemplate, setOriginalTemplate] = useState<TemplateData | null>(null);
+
+  useEffect(() => {
+    fetch('https://ch1.b.uat.4.cn/zncmweb/templates/3q_template.json')
+      .then(r => r.json())
+      .then((data: TemplateData) => { setTemplate(data); setOriginalTemplate(data); setFixedAgents(data.agents); setLoading(false); })
+      .catch(e => { setError(e.message); setLoading(false); });
+  }, []);
+
+  const update = <K extends keyof TemplateData>(key: K, value: TemplateData[K]) => {
+    setTemplate(prev => prev ? { ...prev, [key]: value } : null);
+    setDirty(true);
+  };
+
+  const handleSave = () => {
+    if (!template || !originalTemplate) return;
+
+    const issues = compareJsonShape(originalTemplate, template);
+    const valid = issues.length === 0;
+    const result = {
+      valid,
+      message: valid ? '保存校验通过：字段和类型与 https://ch1.b.uat.4.cn/zncmweb/templates/3q_template.json 一致。' : '保存校验失败：字段或类型不一致。',
+      issues,
+      data: template,
+    };
+
+    console.log('[TemplateEditor 保存结果]', result);
+    console.log('[TemplateEditor 保存 JSON]', JSON.stringify(template, null, 2));
+    window.alert(result.message + ' 详情已打印到控制台。');
+
+    if (valid) setDirty(false);
+  };
+
+  const existingFields = template ? Object.keys(template.report_schema) : [];
+  const fieldOptions = template ? existingFields.map(f => ({ value: f, label: mapFieldLabel(f) })) : [];
+  const agentOptions = template ? template.agents.map(a => ({ value: a.id, label: `${a.name || a.id}（${a.id}）` })) : [];
+  const deletedFixedAgents = template ? fixedAgents.filter(agent => !template.agents.some(current => current.id === agent.id)) : [];
+
+  // ── Loading / Error states ─────────────────────────────────────────────────
+
+  if (loading) {
+    return (
+      <div className={`flex items-center justify-center min-h-64 ${isDark ? 'text-slate-400' : 'text-gray-400'}`}>
+        <RefreshCw className="w-5 h-5 animate-spin mr-2" />
+        <span className="text-sm">加载模板中…</span>
+      </div>
+    );
+  }
+
+  if (error || !template) {
+    return (
+      <div className={`flex items-center gap-2 p-4 rounded-xl ${isDark ? 'bg-red-950/30 text-red-400 border border-red-900/50' : 'bg-red-50 text-red-600 border border-red-200'}`}>
+        <AlertCircle className="w-5 h-5 flex-shrink-0" />
+        <span className="text-sm">模板加载失败：{error}</span>
+      </div>
+    );
+  }
+
+  // ── Render ─────────────────────────────────────────────────────────────────
+
+  return (
+    <div className="h-[calc(100vh-24px)] max-h-[calc(100vh-24px)] flex flex-col max-w-5xl mx-auto px-1 pb-3">
+      <div className={`flex-shrink-0 flex items-center justify-between gap-4 py-3 border-b ${isDark ? 'border-slate-800' : 'border-gray-200'}`}>
+        <div>
+          <h1 className={`text-xl font-bold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>模板配置编辑器</h1>
+          <p className={`text-sm mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>三Q研判报告 · {template.template_id}</p>
+        </div>
+        <div className="flex items-center gap-3">
+          {dirty && (
+            <div className={`flex items-center gap-2 text-xs px-3 py-1.5 rounded-full border ${isDark ? 'bg-amber-900/20 border-amber-700/40 text-amber-300' : 'bg-amber-50 border-amber-200 text-amber-600'}`}>
+              <Info className="w-3.5 h-3.5" />
+              已有未保存修改（仅本地预览）
+            </div>
+          )}
+          <button
+            onClick={handleSave}
+            className={`inline-flex items-center gap-2 px-4 py-2 rounded-xl border shadow-sm transition-all duration-200 hover:scale-[1.02] ${isDark ? 'bg-slate-900 border-slate-700 text-slate-100 hover:border-blue-500/40' : 'bg-white border-gray-200 text-gray-800 hover:border-blue-300'}`}
+          >
+            <Save className="w-4 h-4" /> 保存
+          </button>
+        </div>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto py-3 pr-1 space-y-4">
+
+      {/* ── 1. Basic Info ────────────────────────────────────────────────────── */}
+      <SectionWrapper title="基本信息" icon={FileText} isDark={isDark}>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {(['template_id', 'template_name'] as const).map(k => (
+            <LabelRow key={k} label={FIELD_LABELS[k]} isDark={isDark}>
+              <EditableText value={template[k]} onChange={v => update(k, v)} isDark={isDark} />
+            </LabelRow>
+          ))}
+        </div>
+        <LabelRow label={FIELD_LABELS.template_brief} isDark={isDark}>
+          <EditableText value={template.template_brief} onChange={v => update('template_brief', v)} isDark={isDark} multiline />
+        </LabelRow>
+      </SectionWrapper>
+
+      {/* ── 2. Usage Notes ───────────────────────────────────────────────────── */}
+      <SectionWrapper title={FIELD_LABELS.usage_notes} icon={Info} isDark={isDark}>
+        <TagList
+          tags={template.usage_notes}
+          onChange={v => update('usage_notes', v)}
+          isDark={isDark}
+          tagLight="bg-amber-50 text-amber-700 border-amber-200"
+          tagDark="bg-slate-800/70 text-amber-200 border-amber-500/25"
+        />
+      </SectionWrapper>
+
+      {/* ── 3. Report Schema ─────────────────────────────────────────────────── */}
+      <SectionWrapper title={FIELD_LABELS.report_schema} icon={Settings} isDark={isDark}>
+        <div className="space-y-3">
+          {Object.entries(template.report_schema).map(([key, desc]) => (
+            <div
+              key={key}
+              className={`group/row rounded-lg border px-4 py-3 transition-all duration-200 hover:scale-[1.005] ${isDark ? 'border-slate-700/50 bg-slate-800/30 hover:border-slate-600' : 'border-gray-200 bg-gray-50/50 hover:border-gray-300 hover:shadow-sm'}`}
+            >
+              <div className="flex items-center gap-2 mb-1.5">
+                <code className={`text-xs px-2 py-0.5 rounded font-mono ${isDark ? 'bg-slate-700 text-slate-400' : 'bg-gray-200 text-gray-500'}`}>{key}</code>
+                <span className={`text-sm font-medium ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>{REPORT_SCHEMA_LABELS[key] || key}</span>
+              </div>
+              <EditableText
+                value={desc}
+                onChange={v => update('report_schema', { ...template.report_schema, [key]: v })}
+                isDark={isDark}
+                multiline
+              />
+            </div>
+          ))}
+        </div>
+      </SectionWrapper>
+
+      {/* ── 4. Field Requirements ────────────────────────────────────────────── */}
+      <SectionWrapper title={FIELD_LABELS.field_requirements} icon={Settings} isDark={isDark} defaultOpen={false}>
+        <div className="space-y-2">
+          {Object.entries(template.field_requirements).map(([key, req]) => (
+            <FieldRequirementCard
+              key={key}
+              fieldKey={key}
+              req={req}
+              onChange={updated => update('field_requirements', { ...template.field_requirements, [key]: updated })}
+              fieldOptions={fieldOptions}
+              agentOptions={agentOptions}
+              isDark={isDark}
+            />
+          ))}
+        </div>
+      </SectionWrapper>
+
+      {/* ── 5. Agents ────────────────────────────────────────────────────────── */}
+      <SectionWrapper title={FIELD_LABELS.agents} icon={Brain} isDark={isDark}>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          {template.agents.map((agent, i) => (
+            <AgentCard
+              key={agent.id + i}
+              agent={agent}
+              existingFields={existingFields}
+              onUpdate={updated => {
+                const next = [...template.agents];
+                next[i] = updated;
+                update('agents', next);
+              }}
+              onDelete={() => {
+                if (template.agents.length <= 1) {
+                  window.alert('智能体最少必须保留 1 个');
+                  return;
+                }
+                update('agents', template.agents.filter((_, j) => j !== i));
+              }}
+              isDark={isDark}
+            />
+          ))}
+
+          {deletedFixedAgents.length > 0 && (
+            <button
+              onClick={() => setAddingAgent(true)}
+              className={`rounded-xl border-2 border-dashed p-4 flex flex-col items-center justify-center gap-2 min-h-[120px] transition-all duration-200 hover:scale-[1.02] ${isDark ? 'border-slate-700 text-slate-500 hover:border-blue-600/60 hover:text-blue-400 hover:bg-blue-950/10' : 'border-gray-200 text-gray-400 hover:border-blue-300 hover:text-blue-500 hover:bg-blue-50/50'}`}
+            >
+              <Plus className="w-6 h-6" />
+              <span className="text-sm font-medium">添加智能体</span>
+              <span className="text-xs opacity-70">恢复已删除智能体</span>
+            </button>
+          )}
+        </div>
+      </SectionWrapper>
+
+      {/* ── 6. Coordinator Config ─────────────────────────────────────────────── */}
+      <SectionWrapper title={FIELD_LABELS.coordinator_config} icon={Settings} isDark={isDark} defaultOpen={false}>
+        <div className="space-y-4">
+          {(Object.entries(template.coordinator_config) as [keyof CoordinatorConfig, unknown][]).map(([key, value]) => (
+            <LabelRow key={key} label={FIELD_LABELS[key] || key} isDark={isDark}>
+              {Array.isArray(value) ? (
+                key === 'dependency_driving_rules' ? (
+                  <CoordinatorRuleList
+                    rules={value as string[]}
+                    fields={existingFields}
+                    onChange={v => update('coordinator_config', { ...template.coordinator_config, [key]: v })}
+                    isDark={isDark}
+                  />
+                ) : (
+                  <TagList
+                    tags={value as string[]}
+                    onChange={v => update('coordinator_config', { ...template.coordinator_config, [key]: v })}
+                    isDark={isDark}
+                    tagLight="bg-teal-50 text-teal-700 border-teal-200"
+                    tagDark="bg-slate-800/70 text-teal-200 border-teal-500/25"
+                  />
+                )
+              ) : (
+                <CoordinatorFieldText
+                  value={value as string}
+                  fields={existingFields}
+                  onChange={v => update('coordinator_config', { ...template.coordinator_config, [key]: v })}
+                  isDark={isDark}
+                />
+              )}
+            </LabelRow>
+          ))}
+        </div>
+      </SectionWrapper>
+
+      {/* ── 7. Report Examples ───────────────────────────────────────────────── */}
+      <SectionWrapper title={FIELD_LABELS.report_examples} icon={FileText} isDark={isDark} defaultOpen={false}>
+        <div className="space-y-3">
+          {Object.entries(template.report_examples).map(([key, example]) => (
+            <div
+              key={key}
+              className={`rounded-lg border overflow-hidden ${isDark ? 'border-slate-700/50' : 'border-gray-200'}`}
+            >
+              <div className={`flex items-center gap-2 px-4 py-2 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/50' : 'border-gray-200 bg-gray-50'}`}>
+                <code className={`text-xs px-2 py-0.5 rounded font-mono ${isDark ? 'bg-slate-700 text-slate-400' : 'bg-gray-200 text-gray-500'}`}>{key}</code>
+                <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{REPORT_SCHEMA_LABELS[key] || key}</span>
+              </div>
+              <div className="px-4 py-3">
+                <EditableMarkdown
+                  value={example}
+                  onChange={v => update('report_examples', { ...template.report_examples, [key]: v })}
+                  isDark={isDark}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </SectionWrapper>
+
+      {/* Restore Agent Modal */}
+      </div>
+
+      {addingAgent && (
+        <RestoreAgentModal
+          agents={deletedFixedAgents}
+          onRestore={agent => {
+            update('agents', [...template.agents, agent]);
+            setAddingAgent(false);
+          }}
+          onClose={() => setAddingAgent(false)}
+          isDark={isDark}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/web-code/components/qa/TopicResearch.tsx b/web-code/components/qa/TopicResearch.tsx
new file mode 100644
index 00000000..1520930d
--- /dev/null
+++ b/web-code/components/qa/TopicResearch.tsx
@@ -0,0 +1,2887 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  GitCompare,
+  MessageSquare,
+  CheckCircle,
+  AlertCircle,
+  ArrowDown,
+  ExternalLink,
+  Square,
+  X,
+  BookOpen,
+  User2Icon,
+} from 'lucide-react';
+import { Dialog, Select, Slider } from 'tdesign-react';
+import { useTheme } from '../../contexts/ThemeContext';
+import { PageType } from '../../components/Sidebar';
+import { ChatMessage, EmptyChatState, QAAvatar, QAComposer, QASingleRagTrace, QAThinkingRound, QAThinkingTrace, RetrievalThinkingTrace, SingleRagAnswer, TypingIndicator } from './QACommon';
+import GeneralQAHeader from './GeneralQAHeader';
+import GeneralQAConfigSidebar from './GeneralQAConfigSidebar';
+import type { ComparePane, CompareResult, KnowledgeBaseChunk, Message, QAMode, qaModeItem, SourceItem, stateItem, ToolCallData, ViewMode } from './GeneralQA.types';
+import {
+  chatDataJSON,
+  createComparePane,
+  createMockSingleRagMessages,
+  createMultiRoundStreamTrace,
+  createThinkingTrace,
+  extractJsonObjects,
+  mapDocsToSources,
+  mapReferenceToSource,
+  parseSingleRagStream,
+  platformTypeChange,
+} from './GeneralQA.mock';
+import { requestCrudService } from '@/service/request-axios-service';
+
+/**
+ * 通用问答组件
+ * 支持单轮RAG、多轮RAG、深度检索及结果对比功能
+ * @param onNavigate - 页面导航函数
+ * @param initialMode - 初始模式（可选）
+ */
+
+const zncmUrl = import.meta.env.VITE_API_BASE_URL || '';
+const chatUrl = import.meta.env.VITE_AIPI_CHAT_URL || '';
+const generateUrl = import.meta.env.VITE_AIPI_GENERATE_CHAT_URL || '';
+const taskChatUrl = import.meta.env.VITE_AIPI_TASK_CHAT_URL || '';
+const knowledgeUrl = import.meta.env.VITE_AIPI_KNOWLEDGE_URL;
+const service = requestCrudService;
+const qaModeList: qaModeItem[] = [
+  { value: 'deep-search' as const, label: '任务检索', icon: BookOpen, desc: '检索相关任务' },
+  { value: 'hx-search' as const, label: '画像检索', icon: User2Icon, desc: '检索相关账号' },
+  { value: 'news-report' as const, label: '新闻报告生成', icon: User2Icon, desc: '检索相关新闻' },
+];
+const TopicResearch: React.FC<{ onNavigate: (page: PageType) => void; initialMode?: string }> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 状态管理
+  // 视图模式：单一模式或对比模式
+  const [viewMode, setViewMode] = useState<ViewMode>('single');
+  // 问答模式：单轮RAG、多轮RAG、深度检索
+  const [qaMode, setQaMode] = useState<QAMode>('single-round');
+  // 对比模式下的左侧模式
+  const [compareLeftMode, setCompareLeftMode] = useState<QAMode>('single-round');
+  // 对比模式下的右侧模式
+  const [compareRightMode, setCompareRightMode] = useState<QAMode>('multi-round');
+
+  // 知识范围设置
+  const [knowledgeScope, setKnowledgeScope] = useState<'all' | 'specific-kb' | 'specific-domain'>('all');
+
+  // 回答偏好设置
+  const [answerStyle, setAnswerStyle] = useState<'concise' | 'detailed'>('detailed');
+  const [showSources, setShowSources] = useState(true);
+  const [showProcess, setShowProcess] = useState(false);
+
+  // 对比设置
+  const [compareLayout, setCompareLayout] = useState<'horizontal' | 'vertical'>('horizontal');
+  const [autoSummarizeDiff, setAutoSummarizeDiff] = useState(true);
+  const [recommendBetter, setRecommendBetter] = useState(true);
+
+  // 消息和结果状态
+  // `messages` 驱动单一模式聊天区；`compareResult` 驱动对比模式左右面板。
+  // `isPreConnectLoading` 表示请求已发起但还没拿到可展示的 assistant 消息，用于显示“正在连接/生成”的占位状态。
+  const [messages, setMessages] = useState<Message[]>([]);
+  // 用户当前输入的文本内容，用于绑定输入框
+  const [inputValue, setInputValue] = useState('');
+  // 是否正在处理请求（包含真实请求和模拟请求）
+  const [isLoading, setIsLoading] = useState(false);
+  // 是否处于"连接中"状态，表示已发起请求但还未收到可展示的响应
+  const [isPreConnectLoading, setIsPreConnectLoading] = useState(false);
+  // 存储发生的错误信息，用于显示错误提示
+  const [error, setError] = useState<string | null>(null);
+  // 对比模式下的结果数据，包含左右两侧的回答和来源信息
+  const [compareResult, setCompareResult] = useState<CompareResult[]>([]);
+  // 对比模式下用户输入的问题内容，用于左右对比时的统一输入
+  const [compareUserInput, setCompareUserInput] = useState('');
+  // 是否折叠左侧配置面板，true 为折叠，false 为展开
+  const [isLeftSidebarCollapsed, setIsLeftSidebarCollapsed] = useState(false);
+  // 是否启用自动滚动，当用户手动滚动时会自动关闭
+  const [isAutoScrollEnabled, setIsAutoScrollEnabled] = useState(true);
+  // 是否显示"滚动到底部"按钮，当有未读消息且用户已滚动时显示
+  const [showScrollToBottom, setShowScrollToBottom] = useState(false);
+  // 当前选中的引用来源，用于显示引用详情弹窗
+  const [selectedCitation, setSelectedCitation] = useState<SourceItem | null>(null);
+  const [editingMessageId, setEditingMessageId] = useState<string | null>(null);
+  const [editingThinking, setEditingThinking] = useState('');
+  const [editingAnswer, setEditingAnswer] = useState('');
+  // 模型参数设置弹窗状态。
+  // 这些值会进入单轮 RAG 的真实请求体；模拟流仍复用同一套 UI，方便接口恢复后无缝切换。
+  const [isModelSettingsOpen, setIsModelSettingsOpen] = useState(false);
+  const [modelName, setModelName] = useState('OpenAI3');
+  const [scoreThreshold, setScoreThreshold] = useState(0.5);
+  const [temperature, setTemperature] = useState(0.3);
+
+  // 当模型正在生成时，如果用户切换模式或跳转页面，先把原动作暂存到 ref，待用户确认停止后再执行。
+  // 使用 ref 而不是 state 可以避免弹窗确认过程触发额外渲染，也不会被闭包中的旧状态影响。
+  const pendingActionRef = useRef<(() => void) | null>(null);
+
+  // 防止 Enter keydown 和按钮 click 在 React 状态更新前重复触发提交。
+  const submitLockRef = useRef(false);
+
+  // 真实流式请求的 reader 句柄，用于“停止生成”时取消浏览器流读取。
+  const readerRef = useRef<any>(null);
+  // 对比模式会同时启动左右两路请求，因此分别保存 reader，保证可以单独停止某一侧生成。
+  const compareReaderRef = useRef<{
+    left: any;
+    right: any;
+  }>({ left: null, right: null });
+  // 多轮接口创建任务后会返回 task_id，这里预留给后续“按任务取消/查询状态”等能力。
+  const taskIdRef = useRef<string | null>(null);
+
+  // 本地模拟流没有真实 reader，因此用停止标记在异步循环中主动中断。
+  const mockSingleRoundStoppedRef = useRef(false);
+  const mockMultiRoundStoppedRef = useRef(false);
+  const chatListRef = useRef<HTMLDivElement | null>(null);
+  const userId = useRef(387); // 用户id
+  const qaType = useRef('TOPICResearch'); // 问答类型
+  const chatDataId = useRef(); // 聊天窗口id
+  const compareChatId = useRef(); // 对比对话记录id
+
+  // 检索过程展示状态
+  const [searchProcess, setSearchProcess] = useState({
+    currentMode: '单轮RAG',
+    rounds: 1,
+    hits: 5,
+    queryRewrite: '',
+  });
+
+  const state = useRef<stateItem>({
+    compareIndex: 0,
+    compareId: '',
+    messageList: [],
+    compareResult: []
+  })
+
+  /**
+   * 处理单轮 RAG 问答请求
+   * 
+   * 单轮 RAG 的处理流程：
+   * 1. 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
+   * 2. API 返回 SSE 流式响应，包含多个 JSON 对象
+   * 3. 逐个解析流式 JSON，提取 answer 和 docs 字段
+   * 4. 通过 applyAnswerToken 将流式 token 追加到消息的 thinkingMarkdown/answerMarkdown
+   * 5. 实时更新消息来源（sources）和检索统计（searchProcess）
+   * 
+   * @param query - 用户输入的问题文本
+   */
+  const handleSingleRoundRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    // 清空之前的错误信息
+    setError(null);
+    // 标记开始加载，禁用提交按钮防止重复点击
+    setIsLoading(true);
+    // 标记"连接中"状态，显示加载占位符
+    setIsPreConnectLoading(true);
+    // 用于存储当前 assistant 消息的 ID，以便后续更新该消息内容
+    let assistantId = '';
+
+    // 标志位：当前处理的 token 是否处于 <think>... 标签内（解析思考过程）
+    let inThink = false;
+    // 标志位：是否已经遇到过 <think> 标签开始解析思考内容
+    let thinkStarted = false;
+
+    /**
+     * 将流式接收到的 token 应用到对应消息的 singleRagTrace 中
+     * 该函数会解析 token 中的 <think>... 标签，将思考过程和回答分开存储
+     * @param token - 从流中接收到的文本片段
+     */
+    const applyAnswerToken = (token: string) => {
+      const mesItem = state.current.messageList[1];
+      // 获取当前消息的思考和回答内容
+      let thinkingMarkdown = mesItem.singleRagTrace.thinkingMarkdown;
+      let answerMarkdown = mesItem.singleRagTrace.answerMarkdown;
+      let thinkingComplete = mesItem.singleRagTrace.thinkingComplete || false;
+      // 剩余未处理的 token 内容
+      let remaining = token;
+      console.log('remaining', remaining)
+      // 当前处于 <think> 标签内（解析思考过程），查找结束标签 
+      while (remaining) {
+        if (inThink) {
+          const endIdx = remaining.indexOf('</think>');
+          if (endIdx === -1) {
+            thinkingMarkdown += remaining;
+            remaining = '';
+          } else {
+            thinkingMarkdown += remaining.slice(0, endIdx);
+            remaining = remaining.slice(endIdx + '</think>'.length);
+            inThink = false;
+            thinkingComplete = true;
+          }
+        } else {
+          const startIdx = remaining.indexOf('<think>');
+          console.log('startIdx', startIdx)
+          if (startIdx === -1) {
+            answerMarkdown += remaining;
+            remaining = '';
+          } else {
+            answerMarkdown += remaining.slice(0, startIdx);
+            remaining = remaining.slice(startIdx + '<think>'.length);
+            inThink = true;
+            thinkStarted = true;
+          }
+        }
+      }
+      state.current.messageList[1] = {
+        ...mesItem,
+        singleRagTrace: {
+          ...mesItem.singleRagTrace,
+          // 更新思考和回答的 markdown 内容
+          thinkingMarkdown,
+          answerMarkdown,
+          // 只有当已经开始解析思考内容时才更新 thinkingComplete 标志
+          thinkingComplete: thinkStarted ? thinkingComplete : true,
+        },
+      }
+      if (!side) {
+        setMessages((prev) => prev.map((msg) => {
+          // 跳过不是当前 assistant 消息或没有 singleRagTrace 的消息
+          if (msg.id !== assistantId || !msg.singleRagTrace) return msg;
+          // 返回更新后的消息对象，保留 singleRagTrace 中的所有字段
+          return {
+            ...state.current.messageList[1],
+          };
+        }));
+      } else {
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            singleRagTrace: {
+              title: '大模型',
+              thinkingMarkdown,
+              answerMarkdown,
+              thinkingComplete: thinkStarted ? thinkingComplete : true,
+            },
+          };
+        });
+      }
+    };
+
+    const updatePane = (side: 'left' | 'right', updater: (pane: ComparePane) => ComparePane) => {
+      setCompareResult((prev) => {
+        if (!prev) return prev;
+        return {
+          ...prev,
+          [side]: updater(prev[side]),
+        };
+      });
+    };
+
+    try {
+      // 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
+      const response = await fetch(`${chatUrl}/chat/knowledge_base_chat_tiaoshi`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        // 请求体包含查询内容、知识库名称、检索参数、模型配置等
+        body: JSON.stringify({
+          query,                        // 用户输入的问题
+          knowledge_base_name: [],      // 知识库名称列表，空数组表示使用所有知识库
+          top_k: 5,                     // 返回最相似的 5 条结果
+          score_threshold: scoreThreshold, // 相似度阈值，过滤低质量检索结果
+          history: [],                  // 对话历史，用于多轮对话
+          stream: true,                 // 启用流式响应
+          model_name: modelName,         // 使用的模型名称
+          temperature,                   // 生成温度，控制随机性
+          prompt_name: 'default',        // 使用的提示词模板
+          local_doc_url: false,         // 是否返回本地文档 URL
+        }),
+      });
+
+      // 检查 HTTP 响应状态
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      // 确保响应体存在（SSE 流需要 body）
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      // 收到有效响应后，关闭"连接中"状态，开始显示实际内容
+      setIsPreConnectLoading(false);
+
+      // 生成唯一 ID 用于标识这条 assistant 消息
+      assistantId = `assistant-${Date.now()}`;
+      // 初始化思考过程追踪对象
+      const initialTrace: QASingleRagTrace = {
+        title: '单轮 RAG 思考过程',
+        thinkingMarkdown: '', // 思考过程内容
+        answerMarkdown: '',    // 最终回答内容
+        thinkingComplete: false, // 思考是否完成
+      };
+      const messageItem: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        singleRagTrace: initialTrace,
+        sources: [], // 初始为空，随着检索结果更新
+      }
+      state.current.messageList.push(messageItem); // 数据存储
+      // 将 assistant 消息添加到消息列表中
+      setMessages((prev) => [...prev, messageItem]);
+
+      // 获取响应体的流式读取器
+      const reader = response.body.getReader();
+      // 保存 reader 引用，用于"停止生成"功能
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      // 创建文本解码器，将二进制数据转换为字符串
+      const decoder = new TextDecoder();
+      // buffer 用于暂存未完成的 JSON 片段
+      let buffer = '';
+      let docsList: any[] = [];
+      try {
+        // 持续读取流数据，直到流结束
+        while (true) {
+          // 读取下一个数据块
+          const { done, value } = await reader.read();
+          // done 为 true 时表示流已结束
+          if (done) {
+            console.log('聊天记录', state.current.messageList);
+            chatHistoryAddSearch();
+            break;
+          }
+
+          // 将二进制数据解码并追加到 buffer
+          buffer += decoder.decode(value, { stream: true });
+          // 从 buffer 中提取完整的 JSON 对象
+          const extracted = extractJsonObjects(buffer);
+          if (buffer.includes('docs')) {
+            try {
+              docsList = chatDataJSON(buffer).docsList || [];
+            } catch (error: any) {
+              console.log(error);
+            }
+          }
+          // 剩余无法解析的内容保留到下次处理
+          buffer = extracted.rest;
+
+          // 遍历所有提取到的 JSON 对象
+          for (const jsonText of extracted.objects) {
+            try {
+              // 解析知识库返回的 JSON 片段
+              const parsed = parseKnowledgeBaseChunk(jsonText);
+              // 如果有回答内容，追加到消息的 answerMarkdown
+              if (typeof parsed.answer === 'string') {
+                applyAnswerToken(parsed.answer);
+              }
+              // 如果有检索文档，更新消息的来源信息
+              if (parsed.docs) {
+                // 将 docs 转换为 sources 格式
+                const mappedDocs = docsList.map((item: any) => ({
+                  title: item.m_title,
+                  type: item.source1,
+                  snippet: item.m_content,
+                  source: item.source1,
+                  time: item.m_publish,
+                  url: item.recUuid,
+                  content: item.m_content || '',
+                }));
+                // 更新检索统计信息
+                setSearchProcess((prev) => ({ ...prev, hits: prev.hits + mappedDocs.length }));
+                state.current.messageList[1].sources = mappedDocs;
+                // 更新消息的来源列表
+                if (!side) {
+                  setMessages((prev) => prev.map((msg) => (
+                    msg.id === assistantId ? { ...msg, sources: mappedDocs } : msg
+                  )));
+                } else {
+                  updatePane(side, (pane) => ({ ...pane, sources: mappedDocs }));
+                }
+              }
+            } catch (parseError) {
+              // 解析错误不影响主流程，记录日志继续处理
+              console.error('单轮RAG流式JSON解析错误:', parseError);
+            }
+          }
+        }
+      } finally {
+        // 流读取完成后，释放 reader 锁并清空引用
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      // 请求失败处理
+      console.error('单轮RAG请求失败:', runError);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      state.current.messageList = [];
+    }
+  };
+
+  /**
+ * 处理单轮 RAG 问答请求
+ * 
+ * 单轮 RAG 的处理流程：
+ * 1. 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
+ * 2. API 返回 SSE 流式响应，包含多个 JSON 对象
+ * 3. 逐个解析流式 JSON，提取 answer 和 docs 字段
+ * 4. 通过 applyAnswerToken 将流式 token 追加到消息的 thinkingMarkdown/answerMarkdown
+ * 5. 实时更新消息来源（sources）和检索统计（searchProcess）
+ * 
+ * @param query - 用户输入的问题文本
+ */
+  const chatRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    // 清空之前的错误信息
+    setError(null);
+    // 标记开始加载，禁用提交按钮防止重复点击
+    setIsLoading(true);
+    // 标记"连接中"状态，显示加载占位符
+    setIsPreConnectLoading(true);
+    // 用于存储当前 assistant 消息的 ID，以便后续更新该消息内容
+    let assistantId = '';
+
+    // 标志位：当前处理的 token 是否处于 <think>... 标签内（解析思考过程）
+    let inThink = false;
+    // 标志位：是否已经遇到过 <think> 标签开始解析思考内容
+    let thinkStarted = false;
+
+    /**
+     * 将流式接收到的 token 应用到对应消息的 singleRagTrace 中
+     * 该函数会解析 token 中的 <think>... 标签，将思考过程和回答分开存储
+     * @param token - 从流中接收到的文本片段
+     */
+    const applyAnswerToken = (token: string, side: 'left' | 'right' | null = null) => {
+      let mesItem: any = state.current.messageList[1];
+      if (side === 'left' || side === 'right') {
+        mesItem = state.current.compareResult[state.current.compareIndex][side];
+      }
+      // 获取当前消息的思考和回答内容
+      let thinkingMarkdown = mesItem.singleRagTrace.thinkingMarkdown;
+      let answerMarkdown = mesItem.singleRagTrace.answerMarkdown;
+      let thinkingComplete = mesItem.singleRagTrace.thinkingComplete || false;
+      // 剩余未处理的 token 内容
+      let remaining = token;
+      // console.log('remaining', remaining)
+      // 当前处于 <think> 标签内（解析思考过程），查找结束标签 
+      while (remaining) {
+        if (inThink) {
+          const endIdx = remaining.indexOf('</think>');
+          if (endIdx === -1) {
+            thinkingMarkdown += remaining;
+            remaining = '';
+          } else {
+            thinkingMarkdown += remaining.slice(0, endIdx);
+            remaining = remaining.slice(endIdx + '</think>'.length);
+            inThink = false;
+            thinkingComplete = true;
+          }
+        } else {
+          const startIdx = remaining.indexOf('<think>');
+          if (startIdx === -1) {
+            answerMarkdown += remaining;
+            remaining = '';
+          } else {
+            answerMarkdown += remaining.slice(0, startIdx);
+            remaining = remaining.slice(startIdx + '<think>'.length);
+            inThink = true;
+            thinkStarted = true;
+          }
+        }
+      }
+      if (!side) {
+        state.current.messageList[1] = {
+          ...mesItem,
+          singleRagTrace: {
+            ...mesItem.singleRagTrace,
+            // 更新思考和回答的 markdown 内容
+            thinkingMarkdown,
+            answerMarkdown,
+            // 只有当已经开始解析思考内容时才更新 thinkingComplete 标志
+            thinkingComplete: thinkStarted ? thinkingComplete : true,
+          },
+        }
+        setMessages((prev) => prev.map((msg) => {
+          // 跳过不是当前 assistant 消息或没有 singleRagTrace 的消息
+          if (msg.id !== assistantId || !msg.singleRagTrace) return msg;
+          // 返回更新后的消息对象，保留 singleRagTrace 中的所有字段
+          return {
+            ...state.current.messageList[1],
+          };
+        }));
+      } else {
+        state.current.compareResult[state.current.compareIndex][side].singleRagTrace = {
+          ...mesItem.singleRagTrace,
+          // 更新思考和回答的 markdown 内容
+          thinkingMarkdown,
+          answerMarkdown,
+          // 只有当已经开始解析思考内容时才更新 thinkingComplete 标志
+          thinkingComplete: thinkStarted ? thinkingComplete : true,
+        }
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            singleRagTrace: {
+              title: '大模型',
+              thinkingMarkdown,
+              answerMarkdown,
+              thinkingComplete: thinkStarted ? thinkingComplete : true,
+            },
+          };
+        });
+      }
+    };
+
+    try {
+      // 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
+      const response = await fetch(`${chatUrl}/chat/chat`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        // 请求体包含查询内容、知识库名称、检索参数、模型配置等
+        body: JSON.stringify({
+          query,                        // 用户输入的问题
+          history: [],                  // 对话历史，用于多轮对话
+          stream: true,                 // 启用流式响应
+          model_name: modelName,         // 使用的模型名称
+          temperature,                   // 生成温度，控制随机性
+          prompt_name: 'default',        // 使用的提示词模板
+          max_tokens: 1000
+        }),
+      });
+
+      // 检查 HTTP 响应状态
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      // 确保响应体存在（SSE 流需要 body）
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      // 收到有效响应后，关闭"连接中"状态，开始显示实际内容
+      setIsPreConnectLoading(false);
+
+      // 生成唯一 ID 用于标识这条 assistant 消息
+      assistantId = `assistant-${Date.now()}`;
+      // 初始化思考过程追踪对象
+      const initialTrace: QASingleRagTrace = {
+        title: '大模型思考过程',
+        thinkingMarkdown: '', // 思考过程内容
+        answerMarkdown: '',    // 最终回答内容
+        thinkingComplete: false, // 思考是否完成
+      };
+      const messageItem: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        singleRagTrace: initialTrace,
+        sources: [], // 初始为空，随着检索结果更新
+      }
+      if (!side) {
+        state.current.messageList.push(messageItem);
+        // 将 assistant 消息添加到消息列表中
+        setMessages((prev) => [...prev, messageItem]);
+      } else if (side === 'left' || side === 'right') {
+        state.current.compareResult[state.current.compareIndex][side].singleRagTrace = initialTrace;
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            singleRagTrace: initialTrace,
+          };
+        });
+      }
+
+      // 获取响应体的流式读取器
+      const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
+      // 保存 reader 引用，用于"停止生成"功能
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      // 创建文本解码器，将二进制数据转换为字符串
+      const decoder = new TextDecoder();
+      // buffer 用于暂存未完成的 JSON 片段
+
+      try {
+        // 持续读取流数据，直到流结束
+        while (true) {
+          // 读取下一个数据块
+          const { done, value } = await reader.read();
+          // done 为 true 时表示流已结束
+          if (done) {
+            console.log('聊天记录', state.current.messageList);
+            if (!side) {
+              chatHistoryAddSearch();
+            }
+            break;
+          }
+          applyAnswerToken(value, side);
+        }
+      } finally {
+        // 流读取完成后，释放 reader 锁并清空引用
+        if (readerRef.current) {
+          // readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      // 请求失败处理
+      console.error('单轮RAG请求失败:', runError);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      state.current.messageList = [];
+    }
+  };
+
+  /**
+   * 解析类 JavaScript 对象字符串中的字符串值。
+   *
+   * 后端单轮 RAG 流有时不是严格 JSON，而是 `{answer: '...'}` 这种对象片段。
+   * 该函数只负责把单/双引号包裹的 answer 内容还原成普通字符串，保留换行和转义字符。
+   */
+  const parseLooseStringValue = (rawValue: string): string => {
+    try {
+      return JSON.parse(rawValue) as string;
+    } catch {
+      const trimmedValue = rawValue.trim();
+      if (trimmedValue.startsWith("'") && trimmedValue.endsWith("'")) {
+        return trimmedValue
+          .slice(1, -1)
+          .replace(/\\n/g, '\n')
+          .replace(/\\r/g, '\r')
+          .replace(/\\t/g, '\t')
+          .replace(/\\'/g, "'")
+          .replace(/\\\\/g, '\\');
+      }
+      throw new Error(`无法解析字符串值: ${rawValue}`);
+    }
+  };
+
+  const parseLooseValue = (rawValue: string): unknown => {
+    try {
+      return JSON.parse(rawValue);
+    } catch {
+      return parseLooseStringValue(rawValue);
+    }
+  };
+
+  /**
+   * 将单轮知识库流中的一个对象片段转换为统一数据结构。
+   *
+   * 兼容两类返回：
+   * - 严格 JSON：`{"answer":"..."}` / `{"docs":[...]}`
+   * - 宽松对象：`{answer: '...'}` / `{docs: [...]}`
+   *
+   * 真实接口和本地模拟都走同一个解析函数，确保联调时只需要替换数据源，不需要改 UI 更新逻辑。
+   */
+  const parseKnowledgeBaseChunk = (jsonText: string): KnowledgeBaseChunk => {
+    try {
+      return JSON.parse(jsonText) as KnowledgeBaseChunk;
+    } catch {
+      const objectText = jsonText.trim();
+      const answerMatch = objectText.match(/^\{\s*answer\s*:\s*([\s\S]*)\s*\}$/);
+      if (answerMatch) {
+        const rawValue = answerMatch[1].trim();
+        return { answer: parseLooseStringValue(rawValue) };
+      }
+
+      const docsMatch = objectText.match(/^\{\s*docs\s*:\s*([\s\S]*)\s*\}$/);
+      if (docsMatch) {
+        return { docs: parseLooseValue(docsMatch[1]) as KnowledgeBaseChunk['docs'] };
+      }
+
+      const normalizedText = objectText.replace(/([{,]\s*)(answer|docs)(\s*:)/g, '$1"$2"$3');
+      return JSON.parse(normalizedText) as KnowledgeBaseChunk;
+    }
+  };
+
+  const sleep = (ms: number) => new Promise((resolve) => {
+    window.setTimeout(resolve, ms);
+  });
+  const updatePane = (side: 'left' | 'right', updater: (pane: ComparePane) => ComparePane) => {
+    setCompareResult((prev) => prev.map((msg) => {
+      if (msg.id !== state.current.compareId) return msg
+      return {
+        ...msg,
+        [side]: updater(msg[side]),
+      };
+    }));
+  };
+  /**
+   * 处理多轮真实接口里的工具调用事件。
+   *
+   * `show_text` 用于追加思考或最终回答；`local_search` / `tavily_search` 用于把检索结果填入最近一轮。
+   * 这里保持事件到 UI trace 的单向映射，避免请求层和展示层互相耦合。
+   */
+  const handleToolCall = (toolData: ToolCallData, assistantId: string, side: 'left' | 'right' | null = null) => {
+    let mesItem: any = state.current.messageList[1];
+    if (side === 'left' || side === 'right') {
+      mesItem = state.current.compareResult[state.current.compareIndex][side];
+      console.log('mesItem', mesItem)
+    }
+    const trace = { ...mesItem.thinkingTrace, rounds: [...mesItem.thinkingTrace.rounds] };
+    const lastRound = trace.rounds[trace.rounds.length - 1];
+    switch (toolData.tool_name) {
+      case 'show_text': {
+        const chatText = toolData.tool_input.text || '';
+        if (chatText.includes('<think>')) {
+          const thinkContent = chatText.replace('<think>', '').replace('</think>', '').trim();
+          if (trace.rounds[0].title !== '正在准备检索') {
+            lastRound.queryLoading = false;
+            lastRound.queryShow = lastRound.retrievals.length > 0;
+            trace.rounds.push({
+              id: `round-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+              title: '思考中',
+              thoughtMarkdown: thinkContent,
+              query: '',
+              queryLoading: true,
+              queryShow: true,
+              retrievals: [],
+            });
+          } else {
+            // lastRound.queryLoading = false;
+            trace.rounds[0].title = '思考过程'
+            trace.rounds[0].thoughtMarkdown = thinkContent;
+          }
+        } else {
+          lastRound.queryLoading = false;
+          trace.finalAnswerMarkdown += chatText;
+          trace.thinkingComplete = true;
+        }
+        break;
+      }
+      case 'tavily_search':
+      case 'local_search': {
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as {
+              query?: string;
+              results?: Array<{ title?: string; content?: string; url?: string }>;
+            };
+
+            lastRound.query = result.query || lastRound.query;
+            lastRound.queryLoading = false;
+            lastRound.title = toolData.tool_name === 'local_search' ? '本地知识检索' : '联网检索';
+            lastRound.retrievals = (result.results || []).map((item, idx) => ({
+              id: `${toolData.tool_name}-${idx}`,
+              title: item.title || '未命名结果',
+              content: item.content || '',
+              source: item.url || '',
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        }
+        break;
+      }
+      case 'google_search': { // 处理多轮检索
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as {
+              organic: Array<{ title?: string; content?: string; url?: string; recUuid?: string; publish_time?: string }>;
+            };
+            lastRound.queryLoading = false;
+            lastRound.title = '思考过程';
+            lastRound.retrievals = (result.organic || []).map((item, idx) => ({
+              id: item.recUuid,
+              title: item.title || '未命名结果',
+              content: item.content || '',
+              source: item.recUuid || '',
+              time: item.publish_time,
+              recUuid: item.recUuid,
+              type: 'more'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.q) {
+          lastRound.query = toolData.tool_input.q;
+        }
+        break;
+      }
+      case 'getTaskLikeTop': { // 任务检索
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as {
+              data: Array<{ taskName?: string; overview?: string; id?: number; keywords?: string; taskDirection?: string; taskLevel?: number; taskStartDate: string; taskEndDate: string }>;
+            }
+            console.log('result', result);
+            lastRound.queryLoading = false;
+            lastRound.title = '思考过程';
+            lastRound.retrievals = (result.data || []).map((item, idx) => ({
+              id: String(item.id),
+              title: item.taskName || '未命名结果',
+              content: item.overview || '',
+              keywords: item.keywords,
+              taskDirection: item.taskDirection,
+              time: `${item.taskStartDate}-${item.taskEndDate}`,
+              type: 'task'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword) {
+          lastRound.query = toolData.tool_input.keyword;
+        }
+        break;
+      }
+      case 'search_user_profile': { // 画像检索
+        lastRound.title = '靶标平台画像库';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; page_content?: string; 平台?: string; 类型?: string; 粉丝数?: number; }>;
+            console.log('result', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.page_content || '',
+              platform: platformTypeChange(item.平台) || '',
+              fans: item.粉丝数 || 0,
+              type: 'hx'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
+          lastRound.queryTitle = '检索词';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query || toolData.tool_input.user_fig;
+        }
+        break;
+      }
+      case 'get_taiwan_news': { // 查找台湾热点新闻
+        lastRound.title = '台湾热点新闻';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
+            console.log('get_taiwan_news', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.content || '',
+              platform: platformTypeChange(item.platform) || '',
+              comment_count: item.comment_count,
+              message_id: item.message_id,
+              time: item.publish_time,
+              type: 'taiwan_news'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
+          lastRound.queryTitle = '搜索台湾新闻';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query;
+        }
+        break;
+      }
+      case 'search_keyword_taiwan_news': { // 查找台湾热点新闻
+        lastRound.title = '台湾热点新闻';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
+            console.log('get_taiwan_news', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.content || '',
+              platform: platformTypeChange(item.platform) || '',
+              comment_count: item.comment_count,
+              message_id: item.message_id,
+              time: item.publish_time,
+              type: 'taiwan_news'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
+          lastRound.queryTitle = '搜索台湾新闻';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query;
+        }
+        break;
+      }
+      case 'get_world_news': {
+        lastRound.title = '世界热点新闻';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
+            console.log('get_taiwan_news', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.content || '',
+              platform: platformTypeChange(item.platform) || '',
+              comment_count: item.comment_count,
+              message_id: item.message_id,
+              time: item.publish_time,
+              type: 'world_news'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
+          lastRound.queryTitle = '搜索世界新闻';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query;
+        }
+        break;
+      }
+      case 'get_root_messaage_comment': { // 获取某条消息的全部评论
+        lastRound.title = '获取该消息的全部评论';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
+            console.log('get_taiwan_news', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.content || '',
+              platform: platformTypeChange(item.platform) || '',
+              comment_count: item.comment_count,
+              message_id: item.message_id,
+              time: item.publish_time,
+              type: 'messaage_comment'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query || toolData.tool_input.platform) {
+          lastRound.queryTitle = '查找平台';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query || platformTypeChange(toolData.tool_input.platform);
+        }
+        break;
+      }
+      case 'search_user_behavior': { // 查询该用户的历史行为
+        lastRound.title = '查询该用户的历史行为';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result);
+            console.log('search_user_behavior', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result.slice(0, 10) || []).map((item, idx) => ({
+              id: item,
+              title: item,
+              content: item,
+              type: 'user_behavior'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query || toolData.tool_input.platform) {
+          lastRound.queryTitle = '查找平台';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query || platformTypeChange(toolData.tool_input.platform);
+        }
+        break;
+      }
+      case 'get_america_news': { // 根据关键词获取美国热点新闻
+        lastRound.title = '美国热点新闻';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
+            console.log('get_taiwan_news', result);
+            lastRound.queryLoading = false;
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.user_id,
+              title: item.user_name || item.user_id || '-',
+              content: item.content || '',
+              platform: platformTypeChange(item.platform) || '',
+              comment_count: item.comment_count,
+              message_id: item.message_id,
+              time: item.publish_time,
+              type: 'america_news'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
+          lastRound.queryTitle = '查询美国热点新闻';
+          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query;
+        }
+        break;
+      }
+      case 'get_time_data': { // 态势新闻搜索
+        lastRound.title = '态势新闻搜索';
+        console.log('get_time_data', toolData.tool_input)
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result)  as Array<{ title?: string; textid?: string; hot_num?: number; date?: string; content?: string }>
+            console.log('get_time_data', result);
+            lastRound.queryLoading = false;
+            lastRound.queryTitle = '查询态势新闻';
+            lastRound.retrievals = (result || []).map((item, idx) => ({
+              id: item.textid,
+              title: item.title,
+              content: item.content || '',
+              time: item.date,
+              hot_num: item.hot_num,
+              type: 'get_time_data'
+            }));
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        } else if (toolData.tool_input.keyword || toolData.tool_input.query || toolData.tool_input.s || toolData.tool_input.e) {
+          lastRound.query = `${toolData.tool_input.s} - ${toolData.tool_input.e}`;
+        }
+        break;
+      }
+       case 'get_textid_content': { // 获取新闻详细内容
+        lastRound.title = '获取新闻详细内容';
+        if (toolData.tool_input.result && lastRound) {
+          try {
+            const result = JSON.parse(toolData.tool_input.result)
+            console.log('get_textid_content', result);
+            lastRound.queryLoading = false;
+            lastRound.textidContent = result.content;
+          } catch (parseError) {
+            console.error('搜索结果JSON解析错误:', parseError);
+          }
+        }
+        break;
+      }
+      default:
+        break;
+    }
+    if (!side) {
+      state.current.messageList[1] = {
+        ...mesItem,
+        thinkingTrace: trace,
+      }
+      setMessages((prevMessages) => prevMessages.map((msg) => {
+        if (msg.id !== assistantId || msg.role !== 'assistant' || !msg.thinkingTrace) return msg;
+        return {
+          ...msg,
+          thinkingTrace: trace,
+        };
+      }));
+    } else {
+      state.current.compareResult[state.current.compareIndex][side].thinkingTrace = trace;
+      updatePane(side, (pane) => {
+        return {
+          ...pane,
+          thinkingTrace: trace,
+        };
+      });
+    }
+  };
+
+  /**
+   * 处理真实多轮 RAG 请求。
+   *
+   * 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
+   * 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
+   */
+  const handleRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    setError(null);
+    setIsLoading(true);
+    setIsPreConnectLoading(true);
+    try {
+      const response = await fetch(`${generateUrl}/generate`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: query }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      setIsPreConnectLoading(false);
+
+      const assistantId = `assistant-${Date.now()}`;
+      const assistantMessage: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        thinkingTrace: createMultiRoundStreamTrace(),
+      };
+      if (!side) {
+        state.current.messageList.push(assistantMessage); // 数据存储
+        // 接口连通后再展示多轮检索主题与过程
+        setMessages((prev) => [...prev, assistantMessage]);
+      } else if (side === 'left' || side === 'right') {
+        state.current.compareResult[state.current.compareIndex][side].thinkingTrace = createMultiRoundStreamTrace();
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            thinkingTrace: createMultiRoundStreamTrace(),
+          };
+        });
+      }
+
+      const reader = response.body.getReader();
+      // 保存 reader 引用，用于"停止生成"功能
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            console.log('聊天记录', state.current.compareResult);
+            if (!side) {
+              chatHistoryAddSearch();
+            }
+            break;
+          }
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          const lastLine = lines.pop();
+          buffer = lastLine || '';
+
+          for (const line of lines) {
+            if (!line.startsWith('data: ')) continue;
+
+            try {
+              const parsedData = JSON.parse(line.slice(6)) as {
+                event: string;
+                data: any;
+              };
+              const { event, data } = parsedData;
+
+              switch (event) {
+                case 'task_created': {
+                  taskIdRef.current = data?.task_id || null;
+                  break;
+                }
+                case 'tool_call': {
+                  handleToolCall(data as ToolCallData, assistantId, side);
+                  break;
+                }
+                case 'message': {
+                  if (typeof data === 'string') {
+                    setMessages((prevMessages) => prevMessages.map((msg) => {
+                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
+                      return {
+                        ...msg,
+                        thinkingTrace: {
+                          ...msg.thinkingTrace,
+                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
+                        },
+                      };
+                    }));
+                  }
+                  break;
+                }
+                case 'references': {
+                  const refs = Array.isArray(data?.references) ? data.references : [];
+                  const mappedRefs = refs.map(mapReferenceToSource);
+                  setSearchProcess((prev) => ({
+                    ...prev,
+                    hits: mappedRefs.length,
+                  }));
+                  setMessages((prevMessages) => prevMessages.map((msg) => (
+                    msg.id === assistantId
+                      ? { ...msg, sources: mappedRefs }
+                      : msg
+                  )));
+                  break;
+                }
+                case 'done': {
+                  setIsLoading(false);
+                  break;
+                }
+                default:
+                  console.log(`未知事件类型: ${event}`, data);
+              }
+            } catch (parseError) {
+              console.error('JSON解析错误:', parseError);
+              console.error('原始数据:', line.slice(6));
+            }
+          }
+        }
+      } finally {
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      console.error('处理请求时发生错误:', runError);
+      setIsLoading(false);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+      setIsPreConnectLoading(false);
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      handleStopCompareSide(side);
+    }
+  };
+
+  /**
+ * 处理任务检索 请求。
+ *
+ * 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
+ * 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
+ */
+  const handleTaskRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    setError(null);
+    setIsLoading(true);
+    setIsPreConnectLoading(true);
+
+    try {
+      const response = await fetch(`${taskChatUrl}/generate`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: query }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      setIsPreConnectLoading(false);
+
+      const assistantId = `assistant-${Date.now()}`;
+      const assistantMessage: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        thinkingTrace: createMultiRoundStreamTrace(),
+      };
+      if (!side) {
+        state.current.messageList.push(assistantMessage); // 数据存储
+        // 接口连通后再展示多轮检索主题与过程
+        setMessages((prev) => [...prev, assistantMessage]);
+      } else if (side === 'left' || side === 'right') {
+        state.current.compareResult[state.current.compareIndex][side].thinkingTrace = createMultiRoundStreamTrace();
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            thinkingTrace: createMultiRoundStreamTrace(),
+          };
+        });
+      }
+
+      const reader = response.body.getReader();
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            console.log('聊天记录', state.current.messageList);
+            chatHistoryAddSearch();
+            break;
+          }
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          const lastLine = lines.pop();
+          buffer = lastLine || '';
+
+          for (const line of lines) {
+            if (!line.startsWith('data: ')) continue;
+
+            try {
+              const parsedData = JSON.parse(line.slice(6)) as {
+                event: string;
+                data: any;
+              };
+              const { event, data } = parsedData;
+
+              switch (event) {
+                case 'task_created': {
+                  taskIdRef.current = data?.task_id || null;
+                  break;
+                }
+                case 'tool_call': {
+                  handleToolCall(data as ToolCallData, assistantId, side);
+                  break;
+                }
+                case 'message': {
+                  if (typeof data === 'string') {
+                    setMessages((prevMessages) => prevMessages.map((msg) => {
+                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
+                      return {
+                        ...msg,
+                        thinkingTrace: {
+                          ...msg.thinkingTrace,
+                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
+                        },
+                      };
+                    }));
+                  }
+                  break;
+                }
+                case 'references': {
+                  const refs = Array.isArray(data?.references) ? data.references : [];
+                  const mappedRefs = refs.map(mapReferenceToSource);
+                  setSearchProcess((prev) => ({
+                    ...prev,
+                    hits: mappedRefs.length,
+                  }));
+                  setMessages((prevMessages) => prevMessages.map((msg) => (
+                    msg.id === assistantId
+                      ? { ...msg, sources: mappedRefs }
+                      : msg
+                  )));
+                  break;
+                }
+                case 'done': {
+                  setIsLoading(false);
+                  break;
+                }
+                default:
+                  console.log(`未知事件类型: ${event}`, data);
+              }
+            } catch (parseError) {
+              console.error('JSON解析错误:', parseError);
+              console.error('原始数据:', line.slice(6));
+            }
+          }
+        }
+      } finally {
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      console.error('处理请求时发生错误:', runError);
+      setIsLoading(false);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+      setIsPreConnectLoading(false);
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      handleStopCompareSide(side);
+    }
+  };
+
+  /**
+* 处理画像检索 请求。
+*
+* 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
+* 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
+*/
+  const handleHxRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    setError(null);
+    setIsLoading(true);
+    setIsPreConnectLoading(true);
+
+    try {
+      const response = await fetch(`${taskChatUrl}/generate_b2`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: query }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      setIsPreConnectLoading(false);
+
+      const assistantId = `assistant-${Date.now()}`;
+      const assistantMessage: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        thinkingTrace: createMultiRoundStreamTrace(),
+      };
+      if (!side) {
+        state.current.messageList.push(assistantMessage); // 数据存储
+        // 接口连通后再展示多轮检索主题与过程
+        setMessages((prev) => [...prev, assistantMessage]);
+      } else if (side === 'left' || side === 'right') {
+        state.current.compareResult[state.current.compareIndex][side].thinkingTrace = createMultiRoundStreamTrace();
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            thinkingTrace: createMultiRoundStreamTrace(),
+          };
+        });
+      }
+
+      const reader = response.body.getReader();
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            console.log('聊天记录', state.current.messageList);
+            chatHistoryAddSearch();
+            break;
+          }
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          const lastLine = lines.pop();
+          buffer = lastLine || '';
+
+          for (const line of lines) {
+            if (!line.startsWith('data: ')) continue;
+
+            try {
+              const parsedData = JSON.parse(line.slice(6)) as {
+                event: string;
+                data: any;
+              };
+              const { event, data } = parsedData;
+
+              switch (event) {
+                case 'task_created': {
+                  taskIdRef.current = data?.task_id || null;
+                  break;
+                }
+                case 'tool_call': {
+                  handleToolCall(data as ToolCallData, assistantId);
+                  break;
+                }
+                case 'message': {
+                  if (typeof data === 'string') {
+                    setMessages((prevMessages) => prevMessages.map((msg) => {
+                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
+                      return {
+                        ...msg,
+                        thinkingTrace: {
+                          ...msg.thinkingTrace,
+                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
+                        },
+                      };
+                    }));
+                  }
+                  break;
+                }
+                case 'references': {
+                  const refs = Array.isArray(data?.references) ? data.references : [];
+                  const mappedRefs = refs.map(mapReferenceToSource);
+                  setSearchProcess((prev) => ({
+                    ...prev,
+                    hits: mappedRefs.length,
+                  }));
+                  setMessages((prevMessages) => prevMessages.map((msg) => (
+                    msg.id === assistantId
+                      ? { ...msg, sources: mappedRefs }
+                      : msg
+                  )));
+                  break;
+                }
+                case 'done': {
+                  setIsLoading(false);
+                  break;
+                }
+                default:
+                  console.log(`未知事件类型: ${event}`, data);
+              }
+            } catch (parseError) {
+              console.error('JSON解析错误:', parseError);
+              console.error('原始数据:', line.slice(6));
+            }
+          }
+        }
+      } finally {
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      console.error('处理请求时发生错误:', runError);
+      setIsLoading(false);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+      setIsPreConnectLoading(false);
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      handleStopCompareSide(side);
+    }
+  };
+
+   /**
+* 处理画像检索 请求。
+*
+* 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
+* 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
+*/
+  const newsReportRun = async (query: string, side: 'left' | 'right' | null = null) => {
+    setError(null);
+    setIsLoading(true);
+    setIsPreConnectLoading(true);
+
+    try {
+      const response = await fetch(`${taskChatUrl}/generate_report`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt: query }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+      setIsPreConnectLoading(false);
+
+      const assistantId = `assistant-${Date.now()}`;
+      const assistantMessage: Message = {
+        id: assistantId,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date(),
+        thinkingTrace: createMultiRoundStreamTrace(),
+      };
+      if (!side) {
+        state.current.messageList.push(assistantMessage); // 数据存储
+        // 接口连通后再展示多轮检索主题与过程
+        setMessages((prev) => [...prev, assistantMessage]);
+      } else if (side === 'left' || side === 'right') {
+        state.current.compareResult[state.current.compareIndex][side].thinkingTrace = createMultiRoundStreamTrace();
+        updatePane(side, (pane) => {
+          return {
+            ...pane,
+            thinkingTrace: createMultiRoundStreamTrace(),
+          };
+        });
+      }
+
+      const reader = response.body.getReader();
+      if (!side) {
+        readerRef.current = reader;
+      } else {
+        compareReaderRef.current[side] = reader;
+      }
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            console.log('聊天记录', state.current.messageList);
+            chatHistoryAddSearch();
+            break;
+          }
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          const lastLine = lines.pop();
+          buffer = lastLine || '';
+
+          for (const line of lines) {
+            if (!line.startsWith('data: ')) continue;
+
+            try {
+              const parsedData = JSON.parse(line.slice(6)) as {
+                event: string;
+                data: any;
+              };
+              const { event, data } = parsedData;
+
+              switch (event) {
+                case 'task_created': {
+                  taskIdRef.current = data?.task_id || null;
+                  break;
+                }
+                case 'tool_call': {
+                  handleToolCall(data as ToolCallData, assistantId);
+                  break;
+                }
+                case 'message': {
+                  if (typeof data === 'string') {
+                    setMessages((prevMessages) => prevMessages.map((msg) => {
+                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
+                      return {
+                        ...msg,
+                        thinkingTrace: {
+                          ...msg.thinkingTrace,
+                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
+                        },
+                      };
+                    }));
+                  }
+                  break;
+                }
+                case 'references': {
+                  const refs = Array.isArray(data?.references) ? data.references : [];
+                  const mappedRefs = refs.map(mapReferenceToSource);
+                  setSearchProcess((prev) => ({
+                    ...prev,
+                    hits: mappedRefs.length,
+                  }));
+                  setMessages((prevMessages) => prevMessages.map((msg) => (
+                    msg.id === assistantId
+                      ? { ...msg, sources: mappedRefs }
+                      : msg
+                  )));
+                  break;
+                }
+                case 'done': {
+                  setIsLoading(false);
+                  break;
+                }
+                default:
+                  console.log(`未知事件类型: ${event}`, data);
+              }
+            } catch (parseError) {
+              console.error('JSON解析错误:', parseError);
+              console.error('原始数据:', line.slice(6));
+            }
+          }
+        }
+      } finally {
+        if (readerRef.current) {
+          readerRef.current.releaseLock();
+          readerRef.current = null;
+        }
+      }
+    } catch (runError) {
+      console.error('处理请求时发生错误:', runError);
+      setIsLoading(false);
+      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
+      setIsPreConnectLoading(false);
+    } finally {
+      // 无论成功还是失败，都要重置加载状态和解锁提交
+      setIsPreConnectLoading(false);
+      setIsLoading(false);
+      submitLockRef.current = false;
+      handleStopCompareSide(side);
+    }
+  };
+
+  /**
+   * 单一模式下的发送入口。
+   *
+   * 这里只负责创建用户消息、重置输入框和按当前 qaMode 分发到对应执行器；
+   * 具体的真实请求、模拟流和状态回填分别在各自 handler 内维护。
+   */
+  const handleSend = () => {
+    if (submitLockRef.current || isLoading || isPreConnectLoading) return;
+    if (!inputValue.trim()) return;
+    submitLockRef.current = true;
+    const query = inputValue.trim();
+    state.current.messageList = [];
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: query,
+      timestamp: new Date(),
+    };
+    state.current.messageList.push(userMessage);
+    if (qaMode === 'multi-round') { // 多轮检索
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '多轮RAG',
+        rounds: 0,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void handleRun(query);
+      return;
+    }
+
+    if (qaMode === 'deep-search') { // 任务检索
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '任务检索',
+        rounds: 0,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void handleTaskRun(query);
+      return;
+    }
+
+    if (qaMode === 'hx-search') { // 任务检索
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '画像检索',
+        rounds: 0,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void handleHxRun(query);
+      return;
+    }
+
+    if (qaMode === 'news-report') { // 新闻报告生成
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '新闻报告生成',
+        rounds: 0,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void newsReportRun(query);
+      return;
+    }
+
+    if (qaMode === 'single-round') { // 单轮RAG
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '单轮RAG',
+        rounds: 1,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void handleSingleRoundRun(query);
+      return;
+    }
+
+    if (qaMode === 'single-chat') { // 大模型问答
+      console.log('进入了这里')
+      setMessages((prev) => [...prev, userMessage]);
+      setInputValue('');
+      setSearchProcess({
+        currentMode: '大模型问答',
+        rounds: 1,
+        hits: 0,
+        queryRewrite: '',
+      });
+      void chatRun(query);
+      // handleMockSingleRoundRun(query);
+      return;
+    }
+
+    setIsLoading(true);
+    setMessages((prev) => [...prev, userMessage]);
+    setInputValue('');
+  };
+
+  /**
+   * 对比模式发送入口。
+   *
+   * 左右面板共享同一个用户问题，但各自按选择的模式独立运行、独立 loading、独立 sources。
+   * 通过 `updatePane` 将左右面板更新收敛到一个函数，避免并发请求互相覆盖状态。
+   */
+  const handleCompare = () => {
+    if (submitLockRef.current || isLoading || isPreConnectLoading) return;
+    if (!inputValue.trim()) return;
+    submitLockRef.current = true;
+    const query = inputValue.trim();
+    setInputValue('');
+    setCompareUserInput(query);
+    setError(null);
+    setIsLoading(true);
+    const compareId = Date.now().toString();
+    console.log('compareLeftMode',compareLeftMode)
+    const compareItem = {
+      id: compareId,
+      compareUserInput: query,
+      left: createComparePane(compareLeftMode),
+      right: createComparePane(compareRightMode),
+    }
+    setCompareResult((pev) => [...pev, compareItem]);
+    state.current.compareResult = [];
+    state.current.compareId = compareId;
+    state.current.compareResult.push(compareItem);
+    state.current.compareIndex = state.current.compareResult.length - 1;
+    console.log('compareItem', compareItem)
+    const runByMode = (side: 'left' | 'right', mode: QAMode) => {
+      if (mode === 'single-chat') { // 大模型问答
+        return chatRun(query, side);
+      } else if (mode === 'single-round') { // 单轮rag检索
+        return handleSingleRoundRun(query, side);
+      } else if (mode === 'multi-round') { // 多轮检索
+        return handleRun(query, side);
+      } else if (mode === 'deep-search') { // 任务检索
+        return handleTaskRun(query, side);
+      } else if (mode === 'hx-search') { // 画像检索
+        return handleHxRun(query, side); 
+      } else if (mode === 'news-report') { // 新闻检索
+        return handleHxRun(query, side);
+      }
+    };
+
+    Promise.allSettled([
+      runByMode('left', compareLeftMode).finally(() => updatePane('left', (pane) => ({ ...pane, loading: false }))),
+      runByMode('right', compareRightMode).finally(() => updatePane('right', (pane) => ({ ...pane, loading: false }))),
+    ]).finally(() => {
+      setIsLoading(false);
+      submitLockRef.current = false;
+      chatHistoryAddSearch();
+    });
+  };
+
+  const handleStopCompareSide = (side: 'left' | 'right') => {
+    const reader = compareReaderRef.current[side];
+    if (reader) {
+      void reader.cancel(`用户停止${side === 'left' ? '左侧' : '右侧'}生成`);
+      compareReaderRef.current[side] = null;
+    }
+    updatePane(side, (pane) => ({ ...pane, loading: false }))
+  };
+
+  /**
+   * 停止当前生成。
+   *
+   * 真实请求通过 reader.cancel() 中断读取；本地模拟通过 ref 标记让异步循环自行退出。
+   * 对比模式需要同时停止左右两侧，单一模式只处理当前主 reader。
+   */
+  const handleStop = () => {
+    if (viewMode === 'compare') {
+      handleStopCompareSide('left');
+      handleStopCompareSide('right');
+      setIsLoading(false);
+      submitLockRef.current = false;
+      return;
+    }
+    mockSingleRoundStoppedRef.current = true;
+    mockMultiRoundStoppedRef.current = true;
+    if (readerRef.current) {
+      void readerRef.current.cancel('用户手动停止');
+      readerRef.current = null;
+    }
+    setIsPreConnectLoading(false);
+    setIsLoading(false);
+    submitLockRef.current = false;
+  };
+
+  /**
+   * 对“生成中切换页面/模式/布局”进行统一保护。
+   *
+   * 如果当前没有生成任务，直接执行目标操作；否则弹出确认框。
+   * 用户确认后先停止生成，再执行原操作，避免生成流继续写入已经切换的 UI 状态。
+   */
+  const runAfterGenerationConfirm = (action: () => void) => {
+    if (!isLoading) {
+      action();
+      return;
+    }
+    pendingActionRef.current = action;
+    // Dialog.confirm({
+    //   header: '模型正在生成',
+    //   body: '当前模型仍在生成内容。确认后将停止生成，并继续执行你的操作。',
+    //   confirmBtn: '确认停止并继续',
+    //   cancelBtn: '取消',
+    //   onConfirm: () => {
+    //     handleStop();
+    //     pendingActionRef.current?.();
+    //     pendingActionRef.current = null;
+    //   },
+    //   onClose: () => {
+    //     pendingActionRef.current = null;
+    //   },
+    // });
+  };
+
+  const handleSafeViewModeChange = (mode: ViewMode) => {
+    if (mode === viewMode) return;
+    runAfterGenerationConfirm(() => setViewMode(mode));
+  };
+
+  const handleSafeNavigate = (page: PageType) => {
+    runAfterGenerationConfirm(() => onNavigate(page));
+  };
+
+  const handleSafeReset = () => {
+    runAfterGenerationConfirm(() => {
+      setMessages([]);
+      setCompareResult(null);
+    });
+  };
+
+  const handleSafeModeChange = (mode: QAMode) => {
+    runAfterGenerationConfirm(() => setQaMode(mode));
+  };
+
+  const handleSafeCompareLeftModeChange = (mode: QAMode) => {
+    runAfterGenerationConfirm(() => setCompareLeftMode(mode));
+  };
+
+  const handleSafeCompareRightModeChange = (mode: QAMode) => {
+    runAfterGenerationConfirm(() => setCompareRightMode(mode));
+  };
+
+  const handleSafeCompareLayoutChange = (layout: 'horizontal' | 'vertical') => {
+    runAfterGenerationConfirm(() => setCompareLayout(layout));
+  };
+
+  const handleSaveRecord = () => {
+    alert('问答记录已保存');
+  };
+
+  const handleCollect = () => {
+    alert('已添加到收藏');
+  };
+
+  const handleKeyDown = (e) => {
+    // if (e.key === 'Enter' && !e.shiftKey) {
+    //   console.log('回车了')
+    //   e.preventDefault();
+    //   if (e.repeat || submitLockRef.current || isLoading || isPreConnectLoading) return;
+    //   if (viewMode === 'compare') {
+    //     handleCompare();
+    //   } else {
+    //     handleSend();
+    //   }
+    // }
+    // console.log('e',e)
+    // if ((e.metaKey || e.ctrlKey || e.shiftKey) && e.key === "Enter") {
+    //   e.preventDefault();
+    // } else if (e.keyCode === 13) {
+    //   e.preventDefault();
+    //   console.log('回车了')
+    // } else if (e.key === "/") {
+    //   e.preventDefault();
+    // }
+    // if (e.repeat || submitLockRef.current || isLoading || isPreConnectLoading) return;
+    state.current.messageList = [];
+    if (viewMode === 'compare') {
+      handleCompare();
+    } else {
+      handleSend();
+    }
+    setIsAutoScrollEnabled(true);
+    setShowScrollToBottom(false);
+    scrollToBottom(true);
+  };
+
+  // 获取模式标签
+  const getModeLabel = (mode: QAMode) => {
+    switch (mode) {
+      case 'single-chat': return '大模型';
+      case 'single-round': return '单轮RAG';
+      case 'multi-round': return '多轮RAG';
+      case 'deep-search': return '任务检索';
+      case 'hx-search': return '画像检索';
+      case 'news-report': return '新闻报告生成';
+    }
+  };
+
+  const activeAssistantMessageId = isLoading
+    ? [...messages].reverse().find((msg) => msg.role === 'assistant')?.id
+    : undefined;
+
+  useEffect(() => {
+    setQaMode('news-report');
+    // setMessages(createMockSingleRagMessages());
+    // setSearchProcess({
+    //   currentMode: '单轮RAG',
+    //   rounds: 1,
+    //   hits: 3,
+    //   queryRewrite: '',
+    // });
+    chatDataSearch();
+  }, [viewMode]);
+
+  // 创建聊天窗口
+  const addChatDataChange = async () => {
+    let qaMode = 'SINGLE_RAG';
+    if (viewMode === 'compare') {
+      qaMode = 'MULTI_RAG'
+    }
+    const parmy = {
+      userId: userId.current,
+      qaType: qaType.current,
+      questionTitle: '新建问答',
+      qaMode: qaMode,
+    }
+    const res = await service.post(`${zncmUrl}/llm/qa/history/create`, parmy);
+    console.log(res);
+    const result = res.data;
+    chatDataId.current = result.id;
+    if (viewMode === 'compare') {
+      compareChatId.current = result.id;
+    } else {
+      chatDataId.current = result.id;
+    }
+  }
+
+  // 查找聊天记录窗口
+  const chatDataSearch = async () => {
+    let qaMode = 'SINGLE_RAG';
+    console.log('viewMode', viewMode)
+    if (viewMode === 'compare') {
+      qaMode = 'MULTI_RAG'
+    }
+
+    const parmy = {
+      userId: userId.current,
+      qaType: qaType.current,
+      qaMode: qaMode,
+      current: 1,
+      size: 10
+    }
+    const res = await service.post(`${zncmUrl}/llm/qa/history/page`, parmy);
+    console.log('res', res);
+    const result = res.data;
+    if (result.length === 0) {
+      await addChatDataChange();
+    } else if (result.length > 0) {
+      if (viewMode === 'compare') {
+        compareChatId.current = result[0].id;
+      } else {
+        chatDataId.current = result[0].id;
+      }
+    }
+    await chatHistorySearch();
+    console.log('chatDataId', chatDataId.current, compareChatId.current)
+  }
+
+  // 根据对话记录窗口查找对话记录
+  const chatHistorySearch = async () => {
+    let chatHistoryId = chatDataId.current;
+    if (viewMode === 'compare') {
+      chatHistoryId = compareChatId.current;
+    }
+    const res = await service.get(`${zncmUrl}/llm/qa/history/pairs/${chatHistoryId}`, '');
+    console.log('问答记录', res);
+    // 1. 修正变量名 result
+    const result = res.data;
+    if (viewMode !== 'compare') {
+      // 2. 使用 flatMap 将二维数组拍平，并生成新的消息列表
+      const messageList: Message[] = result.flatMap((item, itemIndex) => {
+        // 3. 安全解析 JSON，使用 ?? 提供空数组兜底
+        const parsedAnswers = JSON.parse(item.answer ?? '[]');
+
+        // 4. map 处理每一条 answer，生成新的对象（不修改原对象）
+        return parsedAnswers.map((aItem: any, aIndex: number) => {
+          return {
+            ...aItem,
+            // 优化 ID 赋值逻辑：建议不管是不是索引 1，都补全 ID，防止遗漏
+            // 如果必须只针对第二条，保留原逻辑，但增加安全性
+            id: aIndex === 1 ? String(item.id) : (aItem.id || `temp-${itemIndex}-${aIndex}`),
+
+            // 如果后端返回的数据缺少 timestamp 或 role，最好在这里补全默认值
+            timestamp: aItem.timestamp ? new Date(aItem.timestamp) : new Date(),
+            role: aItem.role || 'assistant',
+          } as Message;
+        });
+      });
+      console.log('result', messageList); // 此时 result 保持纯净，未被修改
+      setMessages(messageList);
+    } else {
+      console.log(result);
+      const messageList = result.flatMap(item => {
+        const parsedAnswers = JSON.parse(item.answer ?? '[]');
+        return parsedAnswers.map(aItem => ({
+          ...aItem,
+          left: {
+            ...aItem.left,
+            loading: false,
+          },
+          right: {
+            ...aItem.right,
+            loading: false,
+          },
+          id: item.id,
+        }));
+      });
+      console.log('messageList', messageList)
+      setCompareResult(messageList);
+    }
+    // state.current.messageList = reuslt || [];
+  }
+
+  // 创建记录窗口
+  const chatHistoryAddSearch = async () => {
+    let historyId = chatDataId.current;
+    let answer = '';
+    let question = '';
+    if (viewMode === 'compare') {
+      historyId = compareChatId.current;
+      answer = JSON.stringify(state.current.compareResult);
+      question = state.current.compareResult[0].compareUserInput;
+    } else {
+      answer = JSON.stringify(state.current.messageList);
+      question = state.current.messageList[0].content;
+    }
+    const param = {
+      historyId: historyId,
+      userId: userId.current,
+      answer: answer,
+      question: question,
+    }
+    const res = await service.post(`${zncmUrl}/llm/qa/history/pair/add`, param);
+    console.log('添加聊天记录窗口', res);
+  }
+
+  /**
+   * 滚动到底部。
+   *
+   * 聊天区默认跟随新消息自动滚动；当用户手动上滑查看历史时会暂停自动滚动，避免打断阅读。
+   */
+  const scrollToBottom = (smooth = false) => {
+    if (!chatListRef.current) return;
+    chatListRef.current.scrollTo({
+      top: chatListRef.current.scrollHeight,
+      behavior: smooth ? 'smooth' : 'auto',
+    });
+  };
+
+  useEffect(() => {
+    if (isAutoScrollEnabled) {
+      scrollToBottom(false);
+    }
+  }, [messages, isLoading, isAutoScrollEnabled, compareResult]);
+
+  const handleChatScroll = () => {
+    if (!chatListRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = chatListRef.current;
+    const isNearBottom = scrollHeight - (scrollTop + clientHeight) < 80;
+    setIsAutoScrollEnabled(isNearBottom);
+    setShowScrollToBottom(!isNearBottom);
+  };
+
+  const getAssistantAnswerText = (message: Message) => (
+    message.singleRagTrace?.answerMarkdown || message.thinkingTrace?.finalAnswerMarkdown || message.content
+  );
+
+  const getAssistantThinkingText = (message: Message) => {
+    if (message.singleRagTrace) return message.singleRagTrace.thinkingMarkdown;
+    if (message.thinkingTrace) {
+      return message.thinkingTrace.rounds.map((round, index) => (
+        `## 第 ${index + 1} 轮：${round.title}\n${round.thoughtMarkdown}`
+      )).join('\n\n');
+    }
+    return '';
+  };
+
+  const handleCopyAssistantMessage = async (message: Message) => {
+    const answerText = getAssistantAnswerText(message);
+    try {
+      await navigator.clipboard.writeText(answerText);
+    } catch (copyError) {
+      console.error('复制模型回答失败:', copyError);
+    }
+  };
+
+  const handleDeleteAssistantMessage = (message: Message) => {
+    const messageIndex = messages.findIndex((msg) => msg.id === message.id);
+    const previousUserMessage = [...messages.slice(0, messageIndex)].reverse().find((msg) => msg.role === 'user');
+    setMessages((prev) => prev.filter((msg) => msg.id !== message.id && msg.id !== previousUserMessage?.id));
+  };
+
+  const handleEditAssistantMessage = (message: Message) => {
+    setEditingMessageId(message.id);
+    setEditingThinking(getAssistantThinkingText(message));
+    setEditingAnswer(getAssistantAnswerText(message));
+  };
+
+  const handleCancelAssistantEdit = () => {
+    setEditingMessageId(null);
+    setEditingThinking('');
+    setEditingAnswer('');
+  };
+
+  const handleSaveAssistantEdit = () => {
+    if (!editingMessageId) return;
+    setMessages((prev) => prev.map((msg) => {
+      if (msg.id !== editingMessageId) return msg;
+      if (msg.singleRagTrace) {
+        return {
+          ...msg,
+          content: editingAnswer,
+          singleRagTrace: {
+            ...msg.singleRagTrace,
+            thinkingMarkdown: editingThinking,
+            answerMarkdown: editingAnswer,
+            thinkingComplete: true,
+          },
+        };
+      }
+      if (msg.thinkingTrace) {
+        const rounds = msg.thinkingTrace.rounds.length > 0
+          ? msg.thinkingTrace.rounds.map((round, index) => (
+            index === 0 ? { ...round, thoughtMarkdown: editingThinking } : round
+          ))
+          : msg.thinkingTrace.rounds;
+        return {
+          ...msg,
+          content: editingAnswer,
+          thinkingTrace: {
+            ...msg.thinkingTrace,
+            rounds,
+            finalAnswerMarkdown: editingAnswer,
+          },
+        };
+      }
+      return { ...msg, content: editingAnswer };
+    }));
+    handleCancelAssistantEdit();
+  };
+
+  const handleResendAssistantMessage = (message: Message) => {
+    if (submitLockRef.current || isLoading || isPreConnectLoading) return;
+    const messageIndex = messages.findIndex((msg) => msg.id === message.id);
+    const previousUserMessage = [...messages.slice(0, messageIndex)].reverse().find((msg) => msg.role === 'user');
+    if (!previousUserMessage) return;
+
+    submitLockRef.current = true;
+    setMessages((prev) => prev.filter((msg) => msg.id !== message.id));
+    setInputValue('');
+
+    if (message.singleRagTrace) {
+      setSearchProcess({ currentMode: '单轮RAG', rounds: 1, hits: 0, queryRewrite: '' });
+      void handleSingleRoundRun(previousUserMessage.content);
+      return;
+    }
+
+    setSearchProcess({ currentMode: '多轮RAG', rounds: 0, hits: 0, queryRewrite: '' });
+    void handleRun(previousUserMessage.content);
+  };
+
+  /**
+   * 点击答案中的引用编号后打开引用详情弹窗。
+   *
+   * Markdown 中的 `[[1]]` 与 sources 数组采用 1-based 对齐，因此这里需要减 1 取数组下标。
+   */
+  const handleCitationClick = (message: Message, citationIndex: number) => {
+    const source = message.sources?.[citationIndex - 1];
+    if (!source) return;
+    setSelectedCitation(source);
+  };
+
+  const handleCompareCitationClick = (side: 'left' | 'right', citationIndex: number) => {
+    const source = compareResult?.[side]?.sources?.[citationIndex - 1];
+    if (!source) return;
+    setSelectedCitation(source);
+  };
+
+  useEffect(() => {
+    if (viewMode === 'compare') {
+      setCompareLeftMode('single-round');
+      setCompareRightMode('multi-round');
+    }
+  }, [viewMode]);
+
+  useEffect(() => {
+    if (viewMode !== 'compare' || !compareResult) return;
+    // setIsLoading(compareResult.left.loading || compareResult.right.loading);
+  }, [viewMode, compareResult]);
+
+  // 离开浏览器页面时无法展示自定义 Dialog，因此使用原生 beforeunload 提醒用户生成会被中断。
+  // useEffect(() => {
+  //   const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+  //     if (!isLoading) return;
+  //     event.preventDefault();
+  //     event.returnValue = '模型正在生成，离开页面将停止当前生成。';
+  //   };
+
+  //   window.addEventListener('beforeunload', handleBeforeUnload);
+  //   return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+  // }, [isLoading]);
+
+  return (
+    <div className={`h-[calc(100vh-120px)] flex flex-col theme-bg rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+      <GeneralQAHeader
+        chatHeadTitle={'课题研究'}
+        chatDesign={'支持任务检索，画像检索，新闻报告生成'}
+        compareShow={false}
+        isDark={isDark}
+        viewMode={viewMode}
+        setViewMode={handleSafeViewModeChange}
+        onNavigate={handleSafeNavigate}
+      />
+
+      {/* 主体内容区 */}
+      <div className="flex-1 flex overflow-hidden">
+        <GeneralQAConfigSidebar
+          isDark={isDark}
+          viewMode={viewMode}
+          qaMode={qaMode}
+          compareLeftMode={compareLeftMode}
+          compareRightMode={compareRightMode}
+          compareLayout={compareLayout}
+          knowledgeScope={knowledgeScope}
+          answerStyle={answerStyle}
+          showSources={showSources}
+          showProcess={showProcess}
+          autoSummarizeDiff={autoSummarizeDiff}
+          recommendBetter={recommendBetter}
+          isCollapsed={isLeftSidebarCollapsed}
+          qaModeOptions={qaModeList}
+          setQaMode={handleSafeModeChange}
+          setCompareLeftMode={handleSafeCompareLeftModeChange}
+          setCompareRightMode={handleSafeCompareRightModeChange}
+          setCompareLayout={handleSafeCompareLayoutChange}
+          setKnowledgeScope={setKnowledgeScope}
+          setAnswerStyle={setAnswerStyle}
+          setShowSources={setShowSources}
+          setShowProcess={setShowProcess}
+          setAutoSummarizeDiff={setAutoSummarizeDiff}
+          setRecommendBetter={setRecommendBetter}
+          setIsCollapsed={setIsLeftSidebarCollapsed}
+        />
+
+        {/* 中间结果区 */}
+        <div className="flex-1 min-w-0 flex flex-col overflow-hidden">
+          {viewMode === 'single' ? (
+            <>
+              {/* 聊天消息区 */}
+              <div
+                ref={chatListRef}
+                onScroll={handleChatScroll}
+                className="relative flex-1 overflow-y-auto p-4 space-y-4"
+              >
+                {messages.length === 0 ? (
+                  <EmptyChatState
+                    icon={<MessageSquare className="w-11 h-11 opacity-60" />}
+                    title="开始你的问答"
+                    description="输入问题，获取基于知识库的智能回答"
+                  />
+                ) : (
+                  messages.map((msg) => (
+                    <ChatMessage
+                      key={msg.id}
+                      message={msg}
+                      showSources={showSources}
+                      assistantLabel="知识库助手"
+                      assistantActive={msg.id === activeAssistantMessageId}
+                      onCitationClick={handleCitationClick}
+                      onCopyAssistant={handleCopyAssistantMessage}
+                      onDeleteAssistant={handleDeleteAssistantMessage}
+                      onEditAssistant={handleEditAssistantMessage}
+                      onResendAssistant={handleResendAssistantMessage}
+                    />
+                  ))
+                )}
+
+                {isPreConnectLoading && (
+                  <TypingIndicator
+                    label={qaMode === 'single-round' ? '正在流式生成单轮 RAG 回复' : '正在生成思考过程与检索内容'}
+                    assistantLabel="知识库助手"
+                  />
+                )}
+
+                {error && (
+                  <div className={`ml-12 max-w-[70%] rounded-xl border px-4 py-3 text-sm ${isDark
+                    ? 'bg-red-900/20 border-red-700/50 text-red-300'
+                    : 'bg-red-50 border-red-200 text-red-700'
+                    }`}>
+                    {error}
+                  </div>
+                )}
+
+                {showScrollToBottom && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setIsAutoScrollEnabled(true);
+                      setShowScrollToBottom(false);
+                      scrollToBottom(true);
+                    }}
+                    className={`fixed left-1/2 -translate-x-1/2 bottom-36 z-20 w-11 h-11 rounded-full backdrop-blur-sm border shadow-lg transition-all ${isDark
+                      ? 'bg-slate-800/65 border-slate-500/60 text-slate-100 hover:bg-slate-700/70'
+                      : 'bg-white/70 border-gray-300 text-gray-700 hover:bg-white/85'
+                      }`}
+                    title="滚动到底部"
+                  >
+                    <ArrowDown className="w-5 h-5 mx-auto" />
+                  </button>
+                )}
+              </div>
+            </>
+          ) : (
+            <div ref={chatListRef} onScroll={handleChatScroll} className="flex-1 overflow-y-auto p-4">
+              {/* 对比结果区 */}
+              {
+                compareResult.length === 0 && <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                  <GitCompare className="w-16 h-16 mb-4 opacity-50" />
+                  <p className="text-lg">对比模式</p>
+                  <p className="text-sm mt-2">输入问题，对比不同模式的回答效果</p>
+                </div>
+              }
+              {
+                compareResult.map((compare: CompareResult, index: number) => (
+                  <div className="mb-[10px]" key={index}>
+                    <div className="mb-4 flex justify-end">
+                      <div className={`max-w-[72%] rounded-2xl px-4 py-3 shadow-sm ${isDark
+                        ? 'bg-blue-600/70 text-white'
+                        : 'bg-gradient-to-r from-red-500 to-rose-500 text-white'
+                        }`}>
+                        <p className="whitespace-pre-wrap leading-relaxed">{compare.compareUserInput}</p>
+                      </div>
+                    </div>
+                    {compareResult ? (
+                      compareLayout === 'horizontal' ? (
+                        <div className="grid grid-cols-2 gap-4 min-w-0">
+                          {/* 左侧结果 */}
+                          <div className={`min-w-0 rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                            <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <QAAvatar role="assistant" variant="blue" isActive={compare.left.loading} label="知识库助手" />
+                                  <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                                    }`}>
+                                    {getModeLabel(compare.left.mode)}
+                                  </span>
+                                </div>
+                                {compare.left.loading && (
+                                  <button
+                                    type="button"
+                                    onClick={() => handleStopCompareSide('left')}
+                                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                                      }`}
+                                  >
+                                    <Square className="w-3 h-3 fill-current" />
+                                    停止
+                                  </button>
+                                )}
+                              </div>
+                            </div>
+                            <div className="p-4 min-w-0">
+                              <div className="flex-1 min-w-0">
+                                {(compare.left.mode === 'single-round' || compare.left.mode === 'single-chat')? (
+                                  <SingleRagAnswer trace={compare.left.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
+                                ) : (
+                                  <RetrievalThinkingTrace trace={compare.left.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
+                                )}
+                              </div>
+                            </div>
+                          </div>
+
+                          {/* 右侧结果 */}
+                          <div className={`min-w-0 overflow-hidden rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                            <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <QAAvatar role="assistant" variant="purple" isActive={compare.right.loading} label="知识库助手" />
+                                  <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
+                                    }`}>
+                                    {getModeLabel(compare.right.mode)}
+                                  </span>
+                                </div>
+                                {compare.right.loading && (
+                                  <button
+                                    type="button"
+                                    onClick={() => handleStopCompareSide('right')}
+                                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                                      }`}
+                                  >
+                                    <Square className="w-3 h-3 fill-current" />
+                                    停止
+                                  </button>
+                                )}
+                              </div>
+                            </div>
+                            <div className="p-4 min-w-0 overflow-hidden">
+                              <div className="flex-1 min-w-0">
+                                {(compare.right.mode === 'single-round' || compare.right.mode === 'single-chat') ? (
+                                  <SingleRagAnswer trace={compare.right.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
+                                ) : (
+                                  <RetrievalThinkingTrace trace={compare.right.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="space-y-4">
+                          {/* 上方结果 */}
+                          <div className={`min-w-0 overflow-hidden rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                            <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <QAAvatar role="assistant" variant="blue" isActive={compare.left.loading} label="知识库助手" />
+                                  <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                                    }`}>
+                                    {getModeLabel(compare.left.mode)}
+                                  </span>
+                                </div>
+                                {compare.left.loading && (
+                                  <button
+                                    type="button"
+                                    onClick={() => handleStopCompareSide('left')}
+                                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                                      }`}
+                                  >
+                                    <Square className="w-3 h-3 fill-current" />
+                                    停止
+                                  </button>
+                                )}
+                              </div>
+                            </div>
+                            <div className="p-4 min-w-0 overflow-hidden">
+                              <div className="flex-1 min-w-0">
+                                {(compare.left.mode === 'single-round' || compare.left.mode === 'single-chat') ? (
+                                  <SingleRagAnswer trace={compare.left.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
+                                ) : (
+                                  <RetrievalThinkingTrace trace={compare.left.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
+                                )}
+                              </div>
+                            </div>
+                          </div>
+
+                          {/* 下方结果 */}
+                          <div className={`min-w-0 overflow-hidden rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                            <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <QAAvatar role="assistant" variant="purple" isActive={compare.right.loading} label="知识库助手" />
+                                  <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
+                                    }`}>
+                                    {getModeLabel(compare.right.mode)}
+                                  </span>
+                                </div>
+                                {compare.right.loading && (
+                                  <button
+                                    type="button"
+                                    onClick={() => handleStopCompareSide('right')}
+                                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                                      }`}
+                                  >
+                                    <Square className="w-3 h-3 fill-current" />
+                                    停止
+                                  </button>
+                                )}
+                              </div>
+                            </div>
+                            <div className="p-4 min-w-0 overflow-hidden">
+                              <div className="flex-1 min-w-0">
+                                {(compare.right.mode === 'single-round' || compare.right.mode === 'single-chat') ? (
+                                  <SingleRagAnswer trace={compare.right.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
+                                ) : (
+                                  <RetrievalThinkingTrace trace={compare.right.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      )
+                    ) : (
+                      <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                        <GitCompare className="w-16 h-16 mb-4 opacity-50" />
+                        <p className="text-lg">对比模式</p>
+                        <p className="text-sm mt-2">输入问题，对比不同模式的回答效果</p>
+                      </div>
+                    )}
+                  </div>
+                ))
+              }
+              {showScrollToBottom && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setIsAutoScrollEnabled(true);
+                      setShowScrollToBottom(false);
+                      scrollToBottom(true);
+                    }}
+                    className={`fixed left-1/2 -translate-x-1/2 bottom-36 z-20 w-11 h-11 rounded-full backdrop-blur-sm border shadow-lg transition-all ${isDark
+                      ? 'bg-slate-800/65 border-slate-500/60 text-slate-100 hover:bg-slate-700/70'
+                      : 'bg-white/70 border-gray-300 text-gray-700 hover:bg-white/85'
+                      }`}
+                    title="滚动到底部"
+                  >
+                    <ArrowDown className="w-5 h-5 mx-auto" />
+                  </button>
+                )}
+            </div>
+          )}
+
+          {/* 底部输入区 */}
+          <QAComposer
+            value={inputValue}
+            onChange={setInputValue}
+            onKeyDown={handleKeyDown}
+            onSubmit={viewMode === 'compare' ? handleCompare : handleSend}
+            onStop={handleStop}
+            canSubmit={!isLoading && Boolean(inputValue.trim())}
+            onReset={handleSafeReset}
+            onSave={handleSaveRecord}
+            onCollect={handleCollect}
+            onOpenSettings={() => setIsModelSettingsOpen(true)}
+            isLoading={isLoading}
+            placeholder={viewMode === 'compare' ? '输入问题进行对比分析...' : '输入你的问题...'}
+            showReset
+          />
+        </div>
+
+        {/* 右侧辅助区 */}
+        {viewMode === 'single' && showProcess && (
+          <div className={`w-72 border-l flex-shrink-0 overflow-y-auto p-4 ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
+            }`}>
+            {/* 检索过程 */}
+            <div className="mb-6">
+              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                检索过程
+              </h3>
+              <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>当前模式</span>
+                    <span className={`text-sm font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                      {searchProcess.currentMode}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>检索轮次</span>
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      {searchProcess.rounds}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>命中数</span>
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      {searchProcess.hits}
+                    </span>
+                  </div>
+                  {searchProcess.queryRewrite && (
+                    <div>
+                      <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>Query改写</span>
+                      <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                        {searchProcess.queryRewrite}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 对比模式的差异总结 */}
+        {/* {viewMode === 'compare' && compareResult?.differences && (
+          <div className={`w-72 border-l flex-shrink-0 overflow-y-auto p-4 ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
+            }`}>
+            <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+              差异总结
+            </h3>
+            <div className={`p-4 rounded-xl space-y-4 ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+              <div>
+                <span className={`text-xs flex items-center gap-1 ${isDark ? 'text-green-400' : 'text-green-600'}`}>
+                  <CheckCircle className="w-3 h-3" />
+                  一致观点
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.consensus}
+                </p>
+              </div>
+              <div>
+                <span className={`text-xs flex items-center gap-1 ${isDark ? 'text-yellow-400' : 'text-yellow-600'}`}>
+                  <AlertCircle className="w-3 h-3" />
+                  差异观点
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.differences}
+                </p>
+              </div>
+              <div>
+                <span className={`text-xs ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                  {getModeLabel(compareResult.left.mode)}优势
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.leftAdvantage}
+                </p>
+              </div>
+              <div>
+                <span className={`text-xs ${isDark ? 'text-purple-400' : 'text-purple-600'}`}>
+                  {getModeLabel(compareResult.right.mode)}优势
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.rightAdvantage}
+                </p>
+              </div>
+            </div>
+          </div>
+        )} */}
+      </div>
+
+      {editingMessageId && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div className="absolute inset-0 bg-black/45 backdrop-blur-[1px]" onClick={handleCancelAssistantEdit} />
+          <div className={`relative w-full max-w-3xl rounded-2xl border shadow-2xl p-5 ${isDark ? 'bg-slate-900 border-slate-700 text-slate-100' : 'bg-white border-gray-200 text-gray-900'
+            }`}>
+            <button
+              type="button"
+              onClick={handleCancelAssistantEdit}
+              className={`absolute top-3 right-3 p-1.5 rounded-lg transition-all ${isDark ? 'hover:bg-slate-700 text-slate-300' : 'hover:bg-gray-100 text-gray-500'
+                }`}
+              title="关闭"
+            >
+              <X className="w-4 h-4" />
+            </button>
+            <div className="pr-9">
+              <h3 className="text-base font-semibold">编辑模型生成内容</h3>
+              <p className={`mt-1 text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                可同时修改模型回答和思考过程，多轮检索会把思考过程写回第一轮思考内容。
+              </p>
+            </div>
+            <div className="mt-4 grid gap-4 md:grid-cols-2">
+              <label className="space-y-2">
+                <span className={`text-sm font-medium ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>思考过程</span>
+                <textarea
+                  value={editingThinking}
+                  onChange={(event) => setEditingThinking(event.target.value)}
+                  className={`h-80 w-full resize-none rounded-xl border p-3 text-sm focus:outline-none ${isDark ? 'border-slate-700 bg-slate-800 text-slate-100' : 'border-gray-200 bg-gray-50 text-gray-800'
+                    }`}
+                />
+              </label>
+              <label className="space-y-2">
+                <span className={`text-sm font-medium ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>最终回答</span>
+                <textarea
+                  value={editingAnswer}
+                  onChange={(event) => setEditingAnswer(event.target.value)}
+                  className={`h-80 w-full resize-none rounded-xl border p-3 text-sm focus:outline-none ${isDark ? 'border-slate-700 bg-slate-800 text-slate-100' : 'border-gray-200 bg-gray-50 text-gray-800'
+                    }`}
+                />
+              </label>
+            </div>
+            <div className="mt-4 flex justify-end gap-2">
+              <button type="button" onClick={handleCancelAssistantEdit} className={`px-4 py-2 rounded-xl text-sm ${isDark ? 'bg-slate-800 hover:bg-slate-700 text-slate-200' : 'bg-gray-100 hover:bg-gray-200 text-gray-700'}`}>
+                取消
+              </button>
+              <button type="button" onClick={handleSaveAssistantEdit} className="px-4 py-2 rounded-xl text-sm bg-red-500 hover:bg-red-600 text-white">
+                保存
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {selectedCitation && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div
+            className="absolute inset-0 bg-black/45 backdrop-blur-[1px]"
+            onClick={() => setSelectedCitation(null)}
+          />
+          <div className={`relative w-full max-w-xl rounded-2xl border shadow-2xl p-5 ${isDark
+            ? 'bg-slate-900 border-slate-700 text-slate-100'
+            : 'bg-white border-gray-200 text-gray-900'
+            }`}>
+            <button
+              type="button"
+              onClick={() => setSelectedCitation(null)}
+              className={`absolute top-3 right-3 p-1.5 rounded-lg transition-all ${isDark ? 'hover:bg-slate-700 text-slate-300' : 'hover:bg-gray-100 text-gray-500'
+                }`}
+              title="关闭"
+            >
+              <X className="w-4 h-4" />
+            </button>
+
+            <div className="pr-9">
+              <h3 className="text-base font-semibold">{selectedCitation.title || '引用内容'}</h3>
+              <div className={`mt-2 text-xs space-y-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                <div>来源：{selectedCitation.source || selectedCitation.type || '未知来源'}</div>
+                <div>时间：{selectedCitation.time || '未知'}</div>
+              </div>
+            </div>
+
+            {selectedCitation.url && (
+              <div className="mt-4">
+                <a
+                  href={`${knowledgeUrl}/#/knowledge/mid-detail?recUuid=${selectedCitation.url}`}
+                  target="_blank"
+                  rel="noreferrer"
+                  className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm transition-all ${isDark
+                    ? 'border-slate-600 text-slate-200 hover:bg-slate-800'
+                    : 'border-gray-300 text-gray-700 hover:bg-gray-50'
+                    }`}
+                  title="打开原始链接"
+                >
+                  <ExternalLink className="w-4 h-4" />
+                  查看原文链接
+                </a>
+              </div>
+            )}
+
+            <div className={`mt-4 rounded-xl p-3 text-sm leading-relaxed max-h-[500px] overflow-auto pr-[10px] whitespace-pre-wrap ${isDark ? 'bg-slate-800/70 text-slate-200' : 'bg-gray-50 text-gray-700'
+              }`}>
+              {selectedCitation.content || selectedCitation.snippet || '暂无引用内容'}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <Dialog
+        visible={isModelSettingsOpen}
+        header="模型参数设置"
+        width="520px"
+        confirmBtn="保存"
+        cancelBtn="取消"
+        onConfirm={() => setIsModelSettingsOpen(false)}
+        onClose={() => setIsModelSettingsOpen(false)}
+      >
+        <div className="space-y-6 py-2">
+          <div>
+            <label className={`block text-sm font-medium mb-2 ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+              模型
+            </label>
+            <Select
+              value={modelName}
+              onChange={(value) => setModelName(String(value))}
+              options={[
+                { label: 'Qwen3-32B: 效果与速度均衡（推荐）', value: 'OpenAI3' },
+                { label: 'Qwen3-235B：效果与速度均衡（推荐）', value: 'OpenAI4' },
+                { label: 'GLM-5：逻辑性强，长上下文', value: 'OpenAI5' },
+                { label: 'Qwen3.5-27B：深度思考过程长', value: 'OpenAI6' },
+                { label: 'Qwen3-8B：速度快，效果较差', value: 'OpenAI7' },
+                // { label: 'Qwen2.5-72B：老模型，发散性差', value: 'OpenAI8' },
+                { label: '四季7B：速度快，效果较差', value: 'OpenAI9' },
+              ]}
+              style={{ width: '100%' }}
+            />
+          </div>
+          <div>
+            <div className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+              相似度阈值 score_threshold：{scoreThreshold.toFixed(2)}
+            </div>
+            <Slider
+              label
+              layout="horizontal"
+              min={0}
+              max={1}
+              step={0.01}
+              value={scoreThreshold}
+              onChange={(value) => setScoreThreshold(Number(value))}
+            />
+          </div>
+          <div>
+            <div className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+              温度 temperature：{temperature.toFixed(2)}
+            </div>
+            <Slider
+              label
+              layout="horizontal"
+              min={0}
+              max={1}
+              step={0.01}
+              value={temperature}
+              onChange={(value) => setTemperature(Number(value))}
+            />
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  );
+};
+
+export default TopicResearch;
diff --git a/web-code/components/qa/components/AgentCard.css b/web-code/components/qa/components/AgentCard.css
new file mode 100644
index 00000000..0b01460f
--- /dev/null
+++ b/web-code/components/qa/components/AgentCard.css
@@ -0,0 +1,235 @@
+.agent-card {
+  background: var(--surface-raised);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  margin-bottom: 16px;
+  overflow: hidden;
+  box-shadow: var(--shadow-card);
+}
+
+.agent-card-header {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface-hover);
+}
+
+.agent-card-name {
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--text);
+}
+
+.agent-card-badges {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-left: auto;
+}
+
+/* Card sections */
+.agent-card-section {
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--border);
+}
+
+.agent-card-section:last-child {
+  border-bottom: none;
+}
+
+.agent-card-section-title {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+}
+
+/* Streaming card highlight */
+.agent-card-streaming {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+/* Streaming badge */
+.badge-streaming {
+  background: var(--accent-soft);
+  color: var(--accent);
+  border: 1px solid var(--accent-soft-strong);
+  border-radius: 4px;
+  padding: 1px 6px;
+  font-size: 10px;
+  font-weight: 600;
+  animation: pulse-badge 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse-badge {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.5; }
+}
+
+/* Streaming plain-text area */
+.streaming-text {
+  font-size: 13px;
+  color: var(--text);
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.7;
+}
+
+/* Blinking cursor */
+.streaming-cursor {
+  display: inline-block;
+  width: 2px;
+  height: 0.9em;
+  background: var(--accent);
+  margin-left: 2px;
+  vertical-align: text-bottom;
+  animation: blink-cursor 0.9s step-end infinite;
+}
+
+@keyframes blink-cursor {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0; }
+}
+
+/* Content */
+.agent-card-content-text {
+  font-size: 13px;
+  color: var(--text);
+}
+
+/* Thinking section */
+.agent-card-thinking-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: none;
+  padding: 0;
+  color: var(--text-muted);
+  font-size: 12px;
+  cursor: pointer;
+  margin-bottom: 8px;
+}
+
+.agent-card-thinking-toggle:hover {
+  color: var(--text);
+}
+
+.agent-card-thinking-text {
+  font-size: 12px;
+  color: var(--text-muted);
+  background: rgba(139, 148, 158, 0.06);
+  border-left: 2px solid var(--border);
+  padding: 8px 12px;
+  border-radius: 0 4px 4px 0;
+}
+
+.agent-card-thinking-text .markdown-body {
+  color: var(--text-muted);
+  font-size: 12px;
+  font-style: italic;
+}
+
+.agent-card-thinking-text .markdown-body strong {
+  color: var(--text-muted);
+}
+
+/* Dimension output */
+.dim-output-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.dim-output-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.dim-output-key {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--accent);
+}
+
+.dim-output-value {
+  font-size: 13px;
+  color: var(--text);
+}
+
+/* Retrieval */
+.retrieval-source-group {
+  margin-bottom: 10px;
+}
+
+.retrieval-source-group:last-child {
+  margin-bottom: 0;
+}
+
+.retrieval-query-label {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.retrieval-adopted-badge {
+  background: rgba(63, 185, 80, 0.15);
+  color: var(--green);
+  border-radius: 3px;
+  padding: 1px 5px;
+  font-size: 10px;
+}
+
+.retrieval-not-adopted-badge {
+  background: rgba(139, 148, 158, 0.1);
+  color: var(--text-muted);
+  border-radius: 3px;
+  padding: 1px 5px;
+  font-size: 10px;
+}
+
+.retrieval-item {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 4px;
+  align-items: flex-start;
+}
+
+.retrieval-item-num {
+  flex-shrink: 0;
+  background: var(--accent-soft);
+  color: var(--accent);
+  border-radius: 3px;
+  padding: 0 4px;
+  font-size: 10px;
+  font-family: monospace;
+  line-height: 18px;
+  margin-top: 1px;
+}
+
+.retrieval-item-text {
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.retrieval-source-label {
+  font-size: 10px;
+  color: var(--text-muted);
+  opacity: 0.7;
+  margin-left: 4px;
+}
diff --git a/web-code/components/qa/components/AgentCard.tsx b/web-code/components/qa/components/AgentCard.tsx
new file mode 100644
index 00000000..0a068b79
--- /dev/null
+++ b/web-code/components/qa/components/AgentCard.tsx
@@ -0,0 +1,193 @@
+import React, { useState, useEffect, useRef } from 'react';
+import './AgentCard.css';
+import MarkdownContent from './MarkdownContent';
+
+function getPhaseBadgeClass(phase?: string): string {
+  switch (phase) {
+    case 'starting': return 'badge badge-starting';
+    case 'diverging': return 'badge badge-diverging';
+    case 'closing': return 'badge badge-closing';
+    case 'done': return 'badge badge-done';
+    default: return 'badge badge-default';
+  }
+}
+
+const PHASE_LABELS: Record<string, string> = {
+  starting: '启动',
+  diverging: '辩论',
+  closing: '收敛',
+  done: '完成',
+};
+
+type RetrievalLogItem = {
+  query?: string;
+  source_name?: string;
+  source_id?: string;
+  source?: string;
+  adopted?: boolean;
+  content?: any[];
+  content_ids?: string[];
+};
+
+type Props = {
+  agentId: string;
+  agentName?: string;
+  dimension?: string;
+  round: number;
+  phase: string;
+  content?: string;
+  thinking?: string;
+  dimensionOutput?: Record<string, any>;
+  retrievalLog?: RetrievalLogItem[];
+  retrievalCount?: number;
+  referenceMap?: Record<string, string>;
+  streaming?: boolean;
+};
+
+export default function AgentCard({
+  agentId,
+  agentName,
+  dimension,
+  round,
+  phase,
+  content,
+  thinking,
+  dimensionOutput,
+  retrievalLog,
+  retrievalCount = 0,
+  referenceMap,
+  streaming = false,
+}: Props): JSX.Element {
+  const [thinkingOpen, setThinkingOpen] = useState(false);
+  const autoOpenedRef = useRef(false);
+
+  useEffect(() => {
+    if (streaming && thinking && thinking.length > 0 && !autoOpenedRef.current) {
+      setThinkingOpen(true);
+      autoOpenedRef.current = true;
+    }
+  }, [streaming, thinking]);
+
+  const streamingPhase = streaming
+    ? (content && content.length > 0 ? 'content' : 'thinking')
+    : null;
+
+  const hasThinking = thinking && thinking.trim().length > 0;
+  const hasRetrieval = retrievalCount > 0 && retrievalLog && retrievalLog.length > 0;
+  const hasDimOutput = dimensionOutput && Object.keys(dimensionOutput).length > 0;
+
+  return (
+    <div className={`agent-card${streaming ? ' agent-card-streaming' : ''}`}>
+      <div className="agent-card-header">
+        <span className="agent-card-name">{agentName || agentId}</span>
+        <div className="agent-card-badges">
+          {dimension && (
+            <span className="badge badge-default">{dimension}</span>
+          )}
+          <span className="badge badge-default">第 {round} 轮</span>
+          <span className={getPhaseBadgeClass(phase)}>
+            {PHASE_LABELS[phase] || phase}
+          </span>
+          {streaming && (
+            <span className="badge badge-streaming">生成中</span>
+          )}
+        </div>
+      </div>
+
+      {(hasThinking || streamingPhase === 'thinking') && (
+        <div className="agent-card-section">
+          <button
+            className="agent-card-thinking-toggle"
+            onClick={() => setThinkingOpen(o => !o)}
+          >
+            <span>{thinkingOpen ? '▾' : '▸'}</span>
+            <span>思考过程</span>
+            {streamingPhase === 'thinking' && (
+              <span className="streaming-cursor" style={{ marginLeft: 6 }} />
+            )}
+          </button>
+          {thinkingOpen && (
+            <div className="agent-card-thinking-text">
+              {streaming ? (
+                <span className="streaming-text" style={{ fontStyle: 'italic', fontSize: 12 }}>
+                  {thinking}
+                </span>
+              ) : (
+                <MarkdownContent content={thinking} />
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {(content || streamingPhase === 'content') && (
+        <div className="agent-card-section">
+          <div className="agent-card-section-title">分析内容</div>
+          <div className="agent-card-content-text">
+            {streaming ? (
+              <div className="streaming-text">
+                {content}
+                {streamingPhase === 'content' && <span className="streaming-cursor" />}
+              </div>
+            ) : (
+              <MarkdownContent content={content} referenceMap={referenceMap} />
+            )}
+          </div>
+        </div>
+      )}
+
+      {hasDimOutput && (
+        <div className="agent-card-section">
+          <div className="agent-card-section-title">维度输出</div>
+          <div className="dim-output-grid">
+            {Object.entries(dimensionOutput).map(([key, value]) => (
+              <div key={key} className="dim-output-item">
+                <div className="dim-output-key">{key}</div>
+                <div className="dim-output-value">
+                  <MarkdownContent
+                    content={typeof value === 'string' ? value : JSON.stringify(value, null, 2)}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {hasRetrieval && (
+        <div className="agent-card-section">
+          <div className="agent-card-section-title">检索信息 ({retrievalCount})</div>
+          {retrievalLog.map((log, logIdx) => (
+            <div key={logIdx} className="retrieval-source-group">
+              <div className="retrieval-query-label">
+                <span>"{log.query}"</span>
+                {(log.source_name || log.source_id || log.source) && (
+                  <span className="retrieval-source-label">{log.source_name || log.source_id || log.source}</span>
+                )}
+                {log.adopted !== undefined && (
+                  <span className={log.adopted ? 'retrieval-adopted-badge' : 'retrieval-not-adopted-badge'}>
+                    {log.adopted ? '已采用' : '未采用'}
+                  </span>
+                )}
+              </div>
+              {log.content && log.content.map((item, itemIdx) => {
+                const refNum = log.content_ids ? log.content_ids[itemIdx] : null;
+                const refKey = refNum ? Object.entries(referenceMap || {}).find(([, v]) => v === refNum)?.[0] : null;
+                return (
+                  <div key={itemIdx} className="retrieval-item">
+                    {refKey && <span className="retrieval-item-num">[{refKey}]</span>}
+                    <div className="retrieval-item-text">
+                      {typeof item === 'string'
+                        ? (item.length > 200 ? item.slice(0, 200) + '…' : item)
+                        : JSON.stringify(item).slice(0, 200)}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web-code/components/qa/components/ConfigPanel.css b/web-code/components/qa/components/ConfigPanel.css
new file mode 100644
index 00000000..50c24349
--- /dev/null
+++ b/web-code/components/qa/components/ConfigPanel.css
@@ -0,0 +1,467 @@
+.config-panel {
+  width: 100%;
+  max-width: 1080px;
+  margin: 0 auto;
+}
+
+.config-panel-title {
+  text-align: center;
+  margin-bottom: 24px;
+  padding-top: 4px;
+}
+
+.config-title-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+  padding: 4px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--surface-raised);
+  color: var(--text-muted);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
+}
+
+.config-panel-title h1 {
+  font-size: 32px;
+  line-height: 1.1;
+  font-weight: 800;
+  color: var(--accent);
+  letter-spacing: 1px;
+  margin-bottom: 8px;
+}
+
+.config-panel-title p {
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+.config-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.config-task-section,
+.config-card,
+.config-advanced-section {
+  background: var(--surface-raised);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  box-shadow: var(--shadow-card);
+}
+
+.config-task-section {
+  padding: 24px;
+}
+
+.config-task-section label {
+  display: block;
+  font-weight: 700;
+  font-size: 13px;
+  color: var(--text);
+  margin-bottom: 10px;
+}
+
+.config-task-textarea,
+.config-textarea,
+.config-input,
+.config-json-editor {
+  width: 100%;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13px;
+  outline: none;
+  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
+  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
+}
+
+.config-task-textarea,
+.config-textarea,
+.config-json-editor {
+  padding: 14px 16px;
+  resize: vertical;
+  line-height: 1.7;
+}
+
+.config-task-textarea {
+  min-height: 150px;
+}
+
+.config-textarea {
+  min-height: 108px;
+}
+
+.config-textarea-sm {
+  min-height: 78px;
+}
+
+.config-input {
+  padding: 11px 13px;
+}
+
+.config-json-editor {
+  min-height: 320px;
+  font-family: 'SFMono-Regular', Consolas, monospace;
+}
+
+.config-task-textarea:focus,
+.config-textarea:focus,
+.config-input:focus,
+.config-json-editor:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+  background: var(--surface-raised);
+}
+
+.config-submit-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-content: flex-end;
+  margin-top: 18px;
+  flex-wrap: wrap;
+  padding-top: 4px;
+}
+
+.config-mode-switch {
+  display: inline-flex;
+  background: color-mix(in srgb, var(--surface) 96%, var(--accent) 4%);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+  padding: 3px;
+  flex-shrink: 0;
+}
+
+.config-mode-option {
+  background: transparent;
+  color: var(--text-muted);
+  border: none;
+  border-radius: 9px;
+  padding: 8px 14px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.config-mode-option.active {
+  background: var(--accent);
+  color: var(--button-text);
+  box-shadow: 0 8px 18px var(--accent-soft-strong);
+}
+
+.config-mode-option:not(.active):hover:not(:disabled) {
+  background: var(--surface-hover-strong);
+  color: var(--text);
+}
+
+.config-run-mode-row {
+  display: grid;
+  grid-template-columns: auto minmax(260px, 1fr) auto;
+  align-items: center;
+  gap: 14px;
+  margin-top: 16px;
+}
+
+.config-run-mode-row .config-field-hint {
+  margin-top: 0;
+  min-width: 0;
+}
+
+.config-mode-hint {
+  padding: 8px 12px;
+  border-radius: 10px;
+  background: var(--surface-hover);
+}
+
+.config-scenario-button {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.config-run-options-row {
+  display: grid;
+  grid-template-columns: 80px minmax(120px, 1fr) minmax(260px, 1.2fr);
+  align-items: center;
+  gap: 12px;
+  margin-top: 14px;
+}
+
+.config-run-options-row label {
+  margin-bottom: 0;
+  min-width: 0;
+  color: var(--text-muted);
+}
+
+.config-number-input {
+  width: 100%;
+  max-width: 96px;
+}
+
+.config-run-options-row .config-field-hint {
+  margin-top: 0;
+  min-width: 0;
+  padding-left: 2px;
+}
+
+.btn-start {
+  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
+  color: var(--button-text);
+  font-weight: 800;
+  font-size: 14px;
+  padding: 11px 30px;
+  border-radius: 12px;
+  letter-spacing: 0.3px;
+  box-shadow: 0 12px 26px var(--accent-soft-strong);
+}
+
+.btn-start:hover:not(:disabled) {
+  opacity: 0.85;
+}
+
+.config-card-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.config-card {
+  padding: 22px 24px;
+}
+
+.config-card-header {
+  margin-bottom: 14px;
+}
+
+.config-card-header h3 {
+  font-size: 18px;
+  color: var(--text);
+  margin-bottom: 6px;
+}
+
+.config-card-header p {
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.6;
+}
+
+.config-field {
+  margin-top: 14px;
+}
+
+.config-field:first-child {
+  margin-top: 0;
+}
+
+.config-field label {
+  display: block;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
+.config-field-hint {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.6;
+}
+
+.config-task-textarea::placeholder,
+.config-textarea::placeholder,
+.config-input::placeholder,
+.config-json-editor::placeholder {
+  color: color-mix(in srgb, var(--text-muted) 72%, transparent);
+}
+
+.config-fixed-mode {
+  margin-right: auto;
+  color: var(--text-muted);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.config-agents,
+.config-report-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.config-agent-card,
+.config-report-card {
+  background: var(--surface-hover);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 16px;
+}
+
+.config-agents.readonly,
+.config-report-grid.readonly {
+  margin-top: 10px;
+}
+
+.config-report-card p,
+.config-agent-card p {
+  color: var(--text-muted);
+  font-size: 12px;
+  line-height: 1.65;
+  margin: 0;
+}
+
+.config-report-card pre,
+.config-readonly-block pre {
+  margin: 12px 0 0;
+  max-height: 260px;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text-muted);
+  font-family: 'SFMono-Regular', Consolas, monospace;
+  font-size: 11px;
+  line-height: 1.55;
+  padding: 10px;
+}
+
+.config-readonly-block {
+  margin-top: 18px;
+}
+
+.config-readonly-block:first-child {
+  margin-top: 0;
+}
+
+.config-readonly-title {
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+
+.config-readonly-content {
+  color: var(--text-muted);
+}
+
+.config-readonly-meta {
+  margin-top: 8px !important;
+  color: var(--accent) !important;
+}
+
+.config-empty-detail {
+  color: var(--text-muted);
+  font-size: 13px;
+  padding: 12px 0 0;
+}
+
+.config-agent-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.config-agent-head span {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.config-agent-head code {
+  color: var(--accent);
+  background: var(--accent-soft);
+  border-radius: 999px;
+  padding: 3px 8px;
+  font-size: 11px;
+}
+
+.config-subgrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+}
+
+.config-advanced-section {
+  overflow: hidden;
+}
+
+.config-advanced-toggle {
+  width: 100%;
+  background: transparent;
+  border: none;
+  padding: 16px 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  text-align: left;
+  border-radius: 0;
+}
+
+.config-advanced-toggle:hover {
+  color: var(--accent);
+  background: var(--surface-hover);
+}
+
+.config-advanced-chevron {
+  margin-left: auto;
+  transition: transform 0.2s;
+}
+
+.config-advanced-chevron.open {
+  transform: rotate(180deg);
+}
+
+.config-advanced-body {
+  padding: 0 20px 20px;
+  border-top: 1px solid var(--border);
+}
+
+@media (max-width: 900px) {
+  .config-task-section,
+  .config-card {
+    padding: 18px;
+  }
+
+  .config-run-mode-row,
+  .config-run-options-row {
+    grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+
+  .config-mode-switch {
+    width: 100%;
+  }
+
+  .config-mode-option {
+    flex: 1;
+  }
+
+  .config-scenario-button,
+  .config-number-input {
+    width: 100%;
+    max-width: none;
+  }
+
+  .config-card-grid,
+  .config-agents,
+  .config-report-grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/web-code/components/qa/components/ConfigPanel.tsx b/web-code/components/qa/components/ConfigPanel.tsx
new file mode 100644
index 00000000..b20cc284
--- /dev/null
+++ b/web-code/components/qa/components/ConfigPanel.tsx
@@ -0,0 +1,419 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { DEFAULT_BACKEND_URL, DEFAULT_CONFIG } from '@/config/defaultConfig';
+import { clone, hasTemplateOverride, loadTemplateByMeta, loadTemplateIndex } from '@/config/templateStore';
+import './ConfigPanel.css';
+import { useChatContext } from '@/contexts/ChatContext';
+
+function Card({ title, description, children }) {
+  return (
+    <section className="config-card">
+      <div className="config-card-header">
+        <h3>{title}</h3>
+        {description && <p>{description}</p>}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+function ReadOnlyBlock({ title, children }) {
+  return (
+    <div className="config-readonly-block">
+      <div className="config-readonly-title">{title}</div>
+      <div className="config-readonly-content">{children}</div>
+    </div>
+  );
+}
+
+export default function ConfigPanel({ onStart, isRunning, onStop, onOpenScenarioConfig }) {
+  const { startConfig } = useChatContext();
+  const [taskContext, setTaskContext] = useState(startConfig?.task_context || '');
+  const backendUrl = DEFAULT_BACKEND_URL;
+  const [config, setConfig] = useState(() => clone(DEFAULT_CONFIG));
+  const [rawOpen, setRawOpen] = useState(false);
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [templates, setTemplates] = useState([]);
+  const [templateLoading, setTemplateLoading] = useState(false);
+  const [templateError, setTemplateError] = useState('');
+  const [llmPresets, setLlmPresets] = useState([]);
+  const [llmLoading, setLlmLoading] = useState(false);
+  const [llmError, setLlmError] = useState('');
+
+  const updateConfig = (updater) => {
+    setConfig(prev => {
+      const next = clone(prev);
+      updater(next);
+      return next;
+    });
+  };
+
+  const setCoordinatorMode = (mode) => {
+    updateConfig(next => {
+      next.coordinator_mode = mode;
+    });
+  };
+
+  const setDivergeRounds = (value) => {
+    const parsed = Number.parseInt(value, 10);
+    const rounds = Number.isFinite(parsed) ? Math.min(8, Math.max(1, parsed)) : 3;
+    updateConfig(next => {
+      next.phase_config = {
+        ...(next.phase_config || {}),
+        diverge_rounds: rounds,
+      };
+    });
+  };
+
+  const setLlmPreset = (presetId) => {
+    updateConfig(next => {
+      next.llm_preset_id = presetId;
+    });
+  };
+
+  const setConsistencyMode = (mode) => {
+    updateConfig(next => {
+      next.consistency_mode = mode;
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!taskContext.trim() || !config.template_id) return;
+    console.log('------------------点击了')
+    onStart({
+      ...config,
+      task_context: taskContext.trim(),
+      coordinator_mode: config.coordinator_mode || 'auto',
+    }, backendUrl);
+  };
+
+  const loadTemplates = async () => {
+    setTemplateLoading(true);
+    setTemplateError('');
+    try {
+      setTemplates(await loadTemplateIndex());
+    } catch (error) {
+      setTemplateError(error.message || '模板列表加载失败');
+    } finally {
+      setTemplateLoading(false);
+    }
+  };
+
+  const loadConfigOptions = async () => {
+    setLlmLoading(true);
+    setLlmError('');
+    try {
+      const response = await fetch(`${backendUrl}/config/options`);
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+      const data = await response.json();
+      const presets = data.llm_presets || [];
+      setLlmPresets(presets);
+      updateConfig(next => {
+        if (!next.llm_preset_id) {
+          next.llm_preset_id = data.default_llm_preset_id || presets.find(item => item.is_default)?.id || '';
+        }
+      });
+    } catch (error) {
+      setLlmError(error.message || '模型配置加载失败');
+    } finally {
+      setLlmLoading(false);
+    }
+  };
+
+  const applyTemplate = async (templateId) => {
+    if (!templateId) return;
+    const meta = templates.find(item => item.template_id === templateId);
+    setTemplateLoading(true);
+    setTemplateError('');
+    try {
+      const template = await loadTemplateByMeta(meta || templateId);
+      updateConfig(next => {
+        next.template_id = template.template_id || templateId;
+        next.template_name = template.template_name || '';
+        next.template_brief = template.template_brief || '';
+        next.consistency_mode = template.consistency_mode || next.consistency_mode || 'free';
+        next.report_schema = clone(template.report_schema || {});
+        next.report_examples = clone(template.report_examples || {});
+        next.field_requirements = clone(template.field_requirements || {});
+        next.agents = clone(template.agents || next.agents || []);
+        next.coordinator_mode = next.coordinator_mode || 'auto';
+        next.coordinator_config = clone(template.coordinator_config || DEFAULT_CONFIG.coordinator_config);
+        next.agent_adaptation_policy = clone(template.agent_adaptation_policy || {});
+      });
+    } catch (error) {
+      setTemplateError(error.message || '模板加载失败');
+    } finally {
+      setTemplateLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!backendUrl) return;
+    loadTemplates();
+    loadConfigOptions();
+  }, [backendUrl]);
+
+  useEffect(() => {
+    if(startConfig) {
+      setConfig((pev) => ({
+        ...pev,
+        template_id: startConfig.template_id,
+      }))
+    }
+  }, []);
+
+  const selectedLlmPreset = useMemo(
+    () => llmPresets.find(item => item.id === config.llm_preset_id) || null,
+    [llmPresets, config.llm_preset_id]
+  );
+
+  const rawConfig = useMemo(() => JSON.stringify({ ...config, task_context: '<在上方输入>' }, null, 2), [config]);
+  const canStart = taskContext.trim() && config.template_id;
+
+  return (
+    <div className="config-panel">
+
+      <form onSubmit={handleSubmit} className="config-layout">
+        <div className="config-task-section">
+          <label htmlFor="task-context">任务背景</label>
+          <textarea
+            id="task-context"
+            className="config-task-textarea"
+            value={taskContext}
+            onChange={e => setTaskContext(e.target.value)}
+            placeholder="请描述事件背景、传播目标、限制条件和你关心的判断标准。"
+            disabled={isRunning}
+          />
+
+          <div className="config-run-mode-row">
+            <div className="config-mode-switch" role="radiogroup" aria-label="协调者模式">
+              <button
+                type="button"
+                className={`config-mode-option ${(config.coordinator_mode || 'auto') === 'auto' ? 'active' : ''}`}
+                onClick={() => setCoordinatorMode('auto')}
+                disabled={isRunning}
+              >
+                自动完成
+              </button>
+              <button
+                type="button"
+                className={`config-mode-option ${config.coordinator_mode === 'human_review' ? 'active' : ''}`}
+                onClick={() => setCoordinatorMode('human_review')}
+                disabled={isRunning}
+              >
+                人工逐轮确认
+              </button>
+            </div>
+            <div className="config-field-hint config-mode-hint">
+              自动完成会由协调者连续推进；人工逐轮确认会在每轮协调者提案后等待确认或修改。
+            </div>
+            <button
+              type="button"
+              className="btn-secondary config-scenario-button"
+              onClick={onOpenScenarioConfig}
+              disabled={isRunning}
+            >
+              场景配置
+            </button>
+          </div>
+
+          <div className="config-run-options-row">
+            <label htmlFor="diverge-rounds">讨论轮次</label>
+            <input
+              id="diverge-rounds"
+              className="config-input config-number-input"
+              type="number"
+              min="1"
+              max="8"
+              step="1"
+              value={config.phase_config?.diverge_rounds || 3}
+              onChange={e => setDivergeRounds(e.target.value)}
+              disabled={isRunning}
+            />
+            <div className="config-field-hint">
+              控制协调者推进的中间讨论轮数；轮次越多，材料更充分但耗时更长。
+            </div>
+          </div>
+
+          <div className="config-run-options-row">
+            <label htmlFor="llm-preset">运行模型</label>
+            <select
+              id="llm-preset"
+              className="config-input"
+              value={config.llm_preset_id || ''}
+              onChange={e => setLlmPreset(e.target.value)}
+              disabled={isRunning || llmLoading || llmPresets.length === 0}
+            >
+              <option value="">选择模型...</option>
+              {llmPresets.map(preset => (
+                <option key={preset.id} value={preset.id}>
+                  {preset.label}
+                  {preset.is_default ? '（默认）' : ''}
+                </option>
+              ))}
+            </select>
+            <div className="config-field-hint">
+              {selectedLlmPreset
+                ? `${selectedLlmPreset.description || '后端预设模型'} · ${selectedLlmPreset.model_name}`
+                : '模型预设由后端 config.py 管理，前端只选择预设。'}
+            </div>
+          </div>
+
+          <div className="config-run-options-row">
+            <label htmlFor="consistency-mode">一致性模式</label>
+            <select
+              id="consistency-mode"
+              className="config-input"
+              value={config.consistency_mode || 'free'}
+              onChange={e => setConsistencyMode(e.target.value)}
+              disabled={isRunning}
+            >
+              <option value="free">free</option>
+              <option value="soft">soft</option>
+            </select>
+            <div className="config-field-hint">
+              {config.consistency_mode === 'soft'
+                ? 'soft 会优先承接依赖字段、统一命名口径，并在最终成文时增强跨模块衔接。'
+                : 'free 只做基础一致性控制，适合依赖关系较弱或开放式的场景模板。'}
+            </div>
+          </div>
+
+          <div className="config-submit-row">
+            <div className="config-fixed-mode">报告结构、智能体和协调者策略由所选模板固定。</div>
+            {isRunning ? (
+              <button type="button" className="btn-danger" onClick={onStop}>停止分析</button>
+            ) : (
+              <button type="submit" className="btn-start" disabled={!canStart}>
+                {config.coordinator_mode === 'human_review' ? '开始并逐轮确认' : '开始分析'}
+              </button>
+            )}
+          </div>
+          {!config.template_id && (
+            <div className="config-field-hint">开始前需要先选择一个报告模板。</div>
+          )}
+          {llmError && (
+            <div className="human-review-error">模型配置加载失败：{llmError}</div>
+          )}
+        </div>
+
+        <Card title="报告模板" description="选择后会自动固定报告字段、字段标准、参与智能体和协调者策略。">
+          <div className="config-submit-row">
+            <select
+              className="config-input"
+              value={config.template_id || ''}
+              onChange={e => applyTemplate(e.target.value)}
+              disabled={isRunning || templateLoading}
+            >
+              <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"
+              onClick={loadTemplates}
+              disabled={isRunning || templateLoading}
+            >
+              {templateLoading ? '加载中' : '刷新模板'}
+            </button>
+          </div>
+          {config.template_name && (
+            <div className="config-field-hint">
+              当前模板：{config.template_name}
+              {config.template_brief ? ` · ${config.template_brief}` : ''}
+            </div>
+          )}
+          {templateError && (
+            <div className="human-review-error">模板加载失败：{templateError}</div>
+          )}
+        </Card>
+
+        <div className="config-field-hint">
+          运行模型预设由后端 `config.py` 管理；前端只选择预设 id，不接触密钥。
+        </div>
+
+        <div className="config-advanced-section">
+          <button
+            type="button"
+            className="config-advanced-toggle"
+            onClick={() => setDetailOpen(open => !open)}
+          >
+            <span>模板详情（只读）</span>
+            <span className={`config-advanced-chevron ${detailOpen ? 'open' : ''}`}>▾</span>
+          </button>
+
+          {detailOpen && (
+            <div className="config-advanced-body">
+              {!config.template_id ? (
+                <div className="config-empty-detail">选择模板后可查看字段、智能体和协调者策略。</div>
+              ) : (
+                <>
+                  <ReadOnlyBlock title="报告字段">
+                    <div className="config-report-grid readonly">
+                      {Object.entries(config.report_schema || {}).map(([field, desc]) => (
+                        <div key={field} className="config-report-card">
+                          <div className="config-agent-head">
+                            <span>{field}</span>
+                          </div>
+                          <p>{desc}</p>
+                          {config.field_requirements?.[field] && (
+                            <pre>{JSON.stringify(config.field_requirements[field], null, 2)}</pre>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </ReadOnlyBlock>
+
+                  <ReadOnlyBlock title="参与智能体">
+                    <div className="config-agents readonly">
+                      {(config.agents || []).map(agent => (
+                        <div key={agent.id} className="config-agent-card">
+                          <div className="config-agent-head">
+                            <span>{agent.name}</span>
+                            <code>{agent.id}</code>
+                          </div>
+                          <p className="config-readonly-meta">{agent.dimension}</p>
+                          <p>{agent.expertise || agent.description || agent.skill}</p>
+                          {(agent.relevant_fields || []).length > 0 && (
+                            <p className="config-readonly-meta">关联字段：{agent.relevant_fields.join('、')}</p>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </ReadOnlyBlock>
+
+                  <ReadOnlyBlock title="协调者策略">
+                    <pre>{JSON.stringify(config.coordinator_config || {}, null, 2)}</pre>
+                  </ReadOnlyBlock>
+                </>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="config-advanced-section">
+          <button
+            type="button"
+            className="config-advanced-toggle"
+            onClick={() => setRawOpen(open => !open)}
+          >
+            <span>原始配置预览</span>
+            <span className={`config-advanced-chevron ${rawOpen ? 'open' : ''}`}>▾</span>
+          </button>
+
+          {rawOpen && (
+            <div className="config-advanced-body">
+              <textarea className="config-json-editor" value={rawConfig} readOnly spellCheck={false} />
+            </div>
+          )}
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/web-code/components/qa/components/FinalReport.css b/web-code/components/qa/components/FinalReport.css
new file mode 100644
index 00000000..f0fa05d2
--- /dev/null
+++ b/web-code/components/qa/components/FinalReport.css
@@ -0,0 +1,167 @@
+.final-report {
+  background: var(--surface-raised);
+  border: 1px solid var(--green);
+  border-radius: 16px;
+  overflow: hidden;
+  margin-top: 24px;
+  box-shadow: var(--shadow-card);
+}
+
+.final-report-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+  background: rgba(63, 185, 80, 0.05);
+}
+
+.final-report-icon {
+  font-size: 20px;
+}
+
+.final-report-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--green);
+}
+
+.final-report-meta {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+/* Report sections */
+.final-report-sections {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.final-report-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.final-report-section-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--green);
+  padding-bottom: 6px;
+  border-bottom: 1px solid rgba(63, 185, 80, 0.2);
+}
+
+.final-report-section-content {
+  font-size: 14px;
+  color: var(--text);
+}
+
+.final-report-section-content .markdown-body {
+  font-size: 14px;
+}
+
+/* Dimensions section */
+.final-report-dimensions-toggle {
+  width: 100%;
+  background: transparent;
+  border: none;
+  border-top: 1px solid var(--border);
+  padding: 12px 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+  border-radius: 0;
+  transition: color 0.15s, background 0.15s;
+}
+
+.final-report-dimensions-toggle:hover {
+  color: var(--text);
+  background: var(--surface-hover);
+}
+
+.final-report-dimensions-chevron {
+  margin-left: auto;
+  transition: transform 0.2s;
+}
+
+.final-report-dimensions-chevron.open {
+  transform: rotate(180deg);
+}
+
+.final-report-dimensions-body {
+  padding: 16px 20px 20px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.dim-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.dim-detail-label {
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--accent);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.dim-detail-sublabel {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.dim-detail-analysis {
+  font-size: 13px;
+  color: var(--text);
+}
+
+.dim-detail-output {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 4px;
+  padding: 8px 12px;
+  background: var(--surface-hover);
+  border-radius: 6px;
+  border-left: 2px solid var(--accent);
+}
+
+.dim-detail-output-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.dim-detail-output-key {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+}
+
+.dim-detail-output-value {
+  font-size: 12px;
+  color: var(--text);
+}
diff --git a/web-code/components/qa/components/FinalReport.tsx b/web-code/components/qa/components/FinalReport.tsx
new file mode 100644
index 00000000..f4e117e9
--- /dev/null
+++ b/web-code/components/qa/components/FinalReport.tsx
@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import './FinalReport.css';
+import MarkdownContent from './MarkdownContent';
+
+const REPORT_FIELD_LABELS: Record<string, string> = {
+  core_strategy: '核心策略',
+  action_plan: '行动计划',
+  key_messages: '核心话术',
+  risk_warnings: '风险预警',
+};
+
+type Props = {
+  output?: any;
+  reportSchema?: Record<string, string>;
+};
+
+export default function FinalReport({ output, reportSchema }: Props): JSX.Element | null {
+  const [dimOpen, setDimOpen] = useState(false);
+  if (!output) return null;
+
+  const { report, dimensions, meta } = output;
+  const reportKeys = reportSchema && Object.keys(reportSchema).length > 0
+    ? Object.keys(reportSchema)
+    : (report ? Object.keys(report) : []);
+
+  return (
+    <div className="final-report">
+      <div className="final-report-header">
+        <span className="final-report-icon">✦</span>
+        <span className="final-report-title">最终方案</span>
+        {meta && meta.total_rounds != null && (
+          <span className="final-report-meta">共 {meta.total_rounds} 轮分析</span>
+        )}
+      </div>
+
+      {report && reportKeys.length > 0 && (
+        <div className="final-report-sections">
+          {reportKeys.map(key => {
+            const content = report[key];
+            if (content == null) return null;
+            const label = (reportSchema && reportSchema[key])
+              ? reportSchema[key]
+              : (REPORT_FIELD_LABELS[key] || key);
+            return (
+              <div key={key} className="final-report-section">
+                <div className="final-report-section-label">{label}</div>
+                <div className="final-report-section-content">
+                  <MarkdownContent
+                    content={typeof content === 'string' ? content : JSON.stringify(content, null, 2)}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {dimensions && Object.keys(dimensions).length > 0 && (
+        <>
+          <button
+            className="final-report-dimensions-toggle"
+            onClick={() => setDimOpen(o => !o)}
+          >
+            <span>维度详情</span>
+            <span className={`final-report-dimensions-chevron ${dimOpen ? 'open' : ''}`}>▾</span>
+          </button>
+
+          {dimOpen && (
+            <div className="final-report-dimensions-body">
+              {Object.entries(dimensions).map(([dim, dimData]: [string, any]) => (
+                <div key={dim} className="dim-detail">
+                  <div className="dim-detail-label">
+                    <span>{dim}</span>
+                    {typeof dimData === 'object' && dimData?.label && (
+                      <span className="dim-detail-sublabel">{dimData.label}</span>
+                    )}
+                  </div>
+
+                  {typeof dimData === 'string' && (
+                    <div className="dim-detail-analysis">
+                      <MarkdownContent content={dimData} />
+                    </div>
+                  )}
+
+                  {typeof dimData === 'object' && dimData?.latest_analysis && (
+                    <div className="dim-detail-analysis">
+                      <MarkdownContent content={dimData.latest_analysis} />
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/web-code/components/qa/components/MarkdownContent.css b/web-code/components/qa/components/MarkdownContent.css
new file mode 100644
index 00000000..9de1755b
--- /dev/null
+++ b/web-code/components/qa/components/MarkdownContent.css
@@ -0,0 +1,131 @@
+.markdown-body {
+  line-height: 1.7;
+  color: var(--text-primary);
+  word-break: break-word;
+}
+
+.markdown-body > *:first-child { margin-top: 0; }
+.markdown-body > *:last-child  { margin-bottom: 0; }
+
+/* Headings */
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin: 1em 0 0.4em;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--text-primary);
+}
+.markdown-body h1 { font-size: 1.3em; border-bottom: 1px solid var(--border-color); padding-bottom: 0.3em; }
+.markdown-body h2 { font-size: 1.15em; border-bottom: 1px solid var(--border-color); padding-bottom: 0.2em; }
+.markdown-body h3 { font-size: 1.05em; }
+.markdown-body h4 { font-size: 0.95em; }
+
+/* Paragraphs */
+.markdown-body p {
+  margin: 0.5em 0;
+}
+
+/* Lists */
+.markdown-body ul,
+.markdown-body ol {
+  margin: 0.5em 0;
+  padding-left: 1.6em;
+}
+.markdown-body li {
+  margin: 0.25em 0;
+}
+.markdown-body li > ul,
+.markdown-body li > ol {
+  margin: 0.2em 0;
+}
+
+/* Bold & italic */
+.markdown-body strong { font-weight: 600; color: var(--text-primary); }
+.markdown-body em     { font-style: italic; color: var(--text-secondary); }
+
+/* Inline code */
+.markdown-body code {
+  background: rgba(110, 118, 129, 0.15);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  padding: 0.1em 0.4em;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.875em;
+  color: var(--red);
+}
+
+/* Code blocks */
+.markdown-body pre {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 1em;
+  overflow-x: auto;
+  margin: 0.6em 0;
+}
+.markdown-body pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 0.85em;
+  color: var(--text-primary);
+}
+
+/* Blockquote */
+.markdown-body blockquote {
+  border-left: 3px solid var(--accent-blue);
+  margin: 0.5em 0;
+  padding: 0.3em 0.8em;
+  color: var(--text-secondary);
+  background: rgba(88, 166, 255, 0.05);
+  border-radius: 0 4px 4px 0;
+}
+.markdown-body blockquote p { margin: 0; }
+
+/* Horizontal rule */
+.markdown-body hr {
+  border: none;
+  border-top: 1px solid var(--border-color);
+  margin: 1em 0;
+}
+
+/* Links */
+.markdown-body a {
+  color: var(--accent-blue);
+  text-decoration: none;
+}
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+
+/* Tables (remark-gfm) */
+.markdown-body table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0.6em 0;
+  font-size: 0.9em;
+}
+.markdown-body th,
+.markdown-body td {
+  border: 1px solid var(--border-color);
+  padding: 0.4em 0.7em;
+  text-align: left;
+}
+.markdown-body th {
+  background: var(--bg-secondary);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.markdown-body tr:nth-child(even) td {
+  background: var(--surface-hover);
+}
+
+/* Task lists (remark-gfm) */
+.markdown-body input[type='checkbox'] {
+  margin-right: 0.4em;
+  accent-color: var(--accent-blue);
+}
diff --git a/web-code/components/qa/components/MarkdownContent.tsx b/web-code/components/qa/components/MarkdownContent.tsx
new file mode 100644
index 00000000..1d676adb
--- /dev/null
+++ b/web-code/components/qa/components/MarkdownContent.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import './MarkdownContent.css';
+
+type Props = {
+  content?: string;
+  referenceMap?: Record<string, string>;
+  className?: string;
+};
+
+function rehypeHighlightRefs(referenceMap?: Record<string, string>) {
+  return function (tree: any) {
+    function walk(node: any) {
+      if (!node.children) return;
+      const next = [];
+      for (const child of node.children) {
+        if (child.type === 'text') {
+          const parts = child.value.split(/(\[\d+\])/g);
+          if (parts.length > 1) {
+            for (const part of parts) {
+              if (!part) continue;
+              const m = part.match(/^\[(\d+)\]$/);
+              if (m) {
+                const num = m[1];
+                const itemId = referenceMap?.[num];
+                next.push({
+                  type: 'element',
+                  tagName: 'span',
+                  properties: {
+                    className: 'ref-cite',
+                    'data-tooltip': itemId ? `ID: ${itemId}` : `引用 ${num}`,
+                  },
+                  children: [{ type: 'text', value: part }],
+                });
+              } else {
+                next.push({ type: 'text', value: part });
+              }
+            }
+          } else {
+            next.push(child);
+          }
+        } else {
+          walk(child);
+          next.push(child);
+        }
+      }
+      node.children = next;
+    }
+    walk(tree);
+  };
+}
+
+export default function MarkdownContent({ content, referenceMap, className = '' }: Props): JSX.Element | null {
+  if (!content) return null;
+  const rehypePlugins = [() => rehypeHighlightRefs(referenceMap)];
+
+  return (
+    <div className={`markdown-body ${className}`}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={rehypePlugins}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}
diff --git a/web-code/components/qa/components/ProgressSidebar.css b/web-code/components/qa/components/ProgressSidebar.css
new file mode 100644
index 00000000..316ce281
--- /dev/null
+++ b/web-code/components/qa/components/ProgressSidebar.css
@@ -0,0 +1,123 @@
+.progress-sidebar {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.progress-card {
+  background: var(--surface-raised);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 12px;
+  box-shadow: var(--shadow-card);
+}
+
+.progress-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 8px;
+}
+
+.progress-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.progress-phase,
+.progress-status,
+.progress-text,
+.field-current,
+.empty-hint,
+.memory-subtitle,
+.field-memory-status {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.progress-line {
+  height: 6px;
+  border-radius: 999px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  overflow: hidden;
+}
+
+.progress-line-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent), var(--green));
+  transition: width 0.25s ease;
+}
+
+.progress-text,
+.field-current {
+  margin-top: 8px;
+}
+
+.field-current {
+  color: var(--accent);
+}
+
+.memory-list,
+.field-memory-list,
+.agent-memory-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.memory-item,
+.agent-memory-card,
+.field-memory-card {
+  background: var(--surface-raised);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 8px;
+}
+
+.memory-item {
+  font-size: 11px;
+  color: var(--text-muted);
+  line-height: 1.55;
+}
+
+.memory-subtitle {
+  margin: 8px 0 6px;
+}
+
+.field-memory-card.status-filled {
+  border-left: 2px solid var(--green);
+}
+
+.field-memory-card.status-partial {
+  border-left: 2px solid var(--yellow);
+}
+
+.field-memory-card.status-blocked {
+  border-left: 2px solid var(--red);
+}
+
+.field-memory-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.field-memory-title,
+.agent-memory-name {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.agent-memory-position {
+  font-size: 11px;
+  color: var(--text);
+  line-height: 1.55;
+}
diff --git a/web-code/components/qa/components/ProgressSidebar.tsx b/web-code/components/qa/components/ProgressSidebar.tsx
new file mode 100644
index 00000000..b7bba84c
--- /dev/null
+++ b/web-code/components/qa/components/ProgressSidebar.tsx
@@ -0,0 +1,141 @@
+import './ProgressSidebar.css';
+
+type MemoryListProps = {
+  items?: any[];
+  emptyText: string;
+};
+
+type Props = {
+  phase?: string;
+  status?: string;
+  currentRound?: number;
+  divergeRounds?: number;
+  reportSchema?: Record<string, any>;
+  sharedMemory?: Record<string, any>;
+  finalReportPartial?: Record<string, string>;
+  currentFinalField?: string;
+};
+
+function MemoryList({ items, emptyText }: MemoryListProps): JSX.Element {
+  if (!items || items.length === 0) {
+    return <div className="empty-hint">{emptyText}</div>;
+  }
+  return (
+    <div className="memory-list">
+      {items.map((item, index) => (
+        <div key={`${index}-${String(item).slice(0, 20)}`} className="memory-item">{item}</div>
+      ))}
+    </div>
+  );
+}
+
+export default function ProgressSidebar({
+  phase,
+  status,
+  currentRound,
+  divergeRounds,
+  reportSchema,
+  sharedMemory,
+  finalReportPartial,
+  currentFinalField,
+}: Props): JSX.Element {
+  const fields = Object.keys(reportSchema || {});
+  const finalFilled = fields.filter(field => (finalReportPartial?.[field] || '').trim()).length;
+  const progressPercent = fields.length > 0 ? Math.round((finalFilled / fields.length) * 100) : 0;
+  const fieldMemoryEntries = Object.entries(sharedMemory?.field_memory || {});
+  const agentMemoryEntries = Object.entries(sharedMemory?.agent_memory || {});
+  const displayStatus = status || '等待中';
+
+  return (
+    <div className="progress-sidebar">
+      <div className="progress-card">
+        <div className="progress-title">方案进度</div>
+        <div className="progress-meta">
+          <span className={`progress-phase phase-${phase || 'starting'}`}>{phase || 'starting'}</span>
+          <span className="progress-status">{displayStatus}</span>
+        </div>
+        <div className="progress-line">
+          <div className="progress-line-fill" style={{ width: `${progressPercent}%` }} />
+        </div>
+        <div className="progress-text">第 {currentRound || 0} 轮 / 发散 {divergeRounds || 0} 轮</div>
+        <div className="progress-text">最终报告已生成字段 {finalFilled}/{fields.length || 0}</div>
+        {currentFinalField && <div className="field-current">当前字段：{currentFinalField}</div>}
+      </div>
+
+      <div className="progress-card">
+        <div className="progress-title">稳定判断</div>
+        <MemoryList items={sharedMemory?.stable_claims || []} emptyText="尚未形成稳定判断" />
+      </div>
+
+      <div className="progress-card">
+        <div className="progress-title">关键依据</div>
+        <MemoryList items={sharedMemory?.key_evidence || []} emptyText="尚未沉淀关键依据" />
+      </div>
+
+      <div className="progress-card">
+        <div className="progress-title">冲突与待核</div>
+        <MemoryList items={sharedMemory?.conflicts || []} emptyText="当前没有显式冲突" />
+        <div className="memory-subtitle">待核问题</div>
+        <MemoryList items={sharedMemory?.open_questions || []} emptyText="当前没有待核问题" />
+      </div>
+
+      <div className="progress-card">
+        <div className="progress-title">字段记忆</div>
+        {fieldMemoryEntries.length === 0 ? (
+          <div className="empty-hint">尚未形成字段记忆</div>
+        ) : (
+          <div className="field-memory-list">
+            {fieldMemoryEntries.map(([field, item]: [string, any]) => (
+              <div key={field} className={`field-memory-card status-${item.status || 'partial'}`}>
+                <div className="field-memory-head">
+                  <span className="field-memory-title">{item.title || field}</span>
+                  <span className="field-memory-status">{item.status || 'partial'}</span>
+                </div>
+                {item.current_takeaways?.length > 0 && (
+                  <>
+                    <div className="memory-subtitle">当前判断</div>
+                    <MemoryList items={item.current_takeaways} emptyText="" />
+                  </>
+                )}
+                {item.missing_points?.length > 0 && (
+                  <>
+                    <div className="memory-subtitle">待补内容</div>
+                    <MemoryList items={item.missing_points} emptyText="" />
+                  </>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="progress-card">
+        <div className="progress-title">角色记忆</div>
+        {agentMemoryEntries.length === 0 ? (
+          <div className="empty-hint">尚未形成角色记忆</div>
+        ) : (
+          <div className="agent-memory-list">
+            {agentMemoryEntries.map(([agentId, item]: [string, any]) => (
+              <div key={agentId} className="agent-memory-card">
+                <div className="agent-memory-name">{item.name || agentId}</div>
+                {item.latest_position && <div className="agent-memory-position">{item.latest_position}</div>}
+                {item.useful_findings?.length > 0 && (
+                  <>
+                    <div className="memory-subtitle">有效发现</div>
+                    <MemoryList items={item.useful_findings} emptyText="" />
+                  </>
+                )}
+                {item.open_issues?.length > 0 && (
+                  <>
+                    <div className="memory-subtitle">待继续澄清</div>
+                    <MemoryList items={item.open_issues} emptyText="" />
+                  </>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/web-code/components/qa/components/ScenarioConfigPage.css b/web-code/components/qa/components/ScenarioConfigPage.css
new file mode 100644
index 00000000..0bddf850
--- /dev/null
+++ b/web-code/components/qa/components/ScenarioConfigPage.css
@@ -0,0 +1,337 @@
+.scenario-page {
+  width: 100%;
+  max-width: 1280px;
+  min-height: 100vh;
+  padding: 28px;
+}
+
+.scenario-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+  margin-bottom: 18px;
+}
+
+.scenario-kicker {
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.scenario-header h1 {
+  color: var(--text);
+  font-size: 30px;
+  margin: 4px 0 6px;
+}
+
+.scenario-header p,
+.scenario-card-desc {
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.scenario-header-actions {
+  display: flex;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.scenario-toolbar {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 14px;
+  margin-bottom: 14px;
+}
+
+.scenario-select,
+.scenario-input,
+.scenario-textarea,
+.scenario-json {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13px;
+  outline: none;
+}
+
+.scenario-select {
+  min-width: 280px;
+  padding: 9px 12px;
+  flex: 1;
+}
+
+.scenario-select-inline {
+  min-width: 0;
+  width: 100%;
+  flex: 0 0 auto;
+  margin-top: 6px;
+}
+
+.scenario-input {
+  width: 100%;
+  padding: 10px 12px;
+}
+
+.scenario-textarea,
+.scenario-json {
+  width: 100%;
+  padding: 12px;
+  line-height: 1.65;
+  resize: vertical;
+}
+
+.scenario-textarea {
+  min-height: 120px;
+}
+
+.scenario-textarea-sm {
+  min-height: 80px;
+}
+
+.scenario-textarea-lg {
+  min-height: 180px;
+}
+
+.scenario-json {
+  min-height: 460px;
+  font-family: 'SFMono-Regular', Consolas, monospace;
+  font-size: 12px;
+}
+
+.scenario-select:focus,
+.scenario-input:focus,
+.scenario-textarea:focus,
+.scenario-json:focus {
+  border-color: var(--accent);
+}
+
+.scenario-message,
+.scenario-error,
+.scenario-empty {
+  border-radius: 10px;
+  padding: 10px 14px;
+  margin-bottom: 14px;
+  font-size: 13px;
+}
+
+.scenario-message {
+  background: rgba(63, 185, 80, 0.1);
+  border: 1px solid rgba(63, 185, 80, 0.45);
+  color: var(--green);
+}
+
+.scenario-error {
+  background: rgba(248, 81, 73, 0.1);
+  border: 1px solid rgba(248, 81, 73, 0.45);
+  color: var(--red);
+}
+
+.scenario-empty {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+}
+
+.scenario-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.scenario-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 18px;
+}
+
+.scenario-card-title {
+  color: var(--text);
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 12px;
+}
+
+.scenario-card-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 14px;
+}
+
+.scenario-card-head .scenario-card-title {
+  margin-bottom: 2px;
+}
+
+.scenario-grid-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+.scenario-card label {
+  display: block;
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 700;
+  margin-top: 14px;
+}
+
+.scenario-card label:first-child {
+  margin-top: 0;
+}
+
+.scenario-card label > input,
+.scenario-card label > textarea {
+  margin-top: 6px;
+}
+
+.scenario-inline-hint {
+  margin-top: 6px;
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.55;
+}
+
+.scenario-field-key {
+  color: var(--accent);
+  font-family: 'SFMono-Regular', Consolas, monospace;
+  font-size: 11px;
+  font-weight: 500;
+  margin-left: 8px;
+}
+
+.scenario-coordinator-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+.scenario-agent-layout {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  gap: 16px;
+}
+
+.scenario-agent-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.scenario-agent-tab {
+  background: var(--card);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  padding: 10px 12px;
+  text-align: left;
+}
+
+.scenario-agent-tab.active {
+  border-color: var(--accent);
+  background: rgba(88, 166, 255, 0.1);
+  color: var(--text);
+}
+
+.scenario-agent-tab span {
+  font-weight: 700;
+}
+
+.scenario-agent-tab code {
+  color: var(--accent);
+  font-size: 11px;
+}
+
+.scenario-agent-editor {
+  background: rgba(255,255,255,0.02);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 14px;
+}
+
+.scenario-field-picker {
+  margin-top: 6px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.scenario-field-option {
+  display: flex !important;
+  gap: 10px;
+  align-items: flex-start;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px;
+  margin-top: 0 !important;
+  cursor: pointer;
+}
+
+.scenario-field-option.selected {
+  border-color: var(--accent);
+  background: rgba(88, 166, 255, 0.08);
+}
+
+.scenario-field-option input[type='checkbox'] {
+  margin-top: 2px;
+  accent-color: var(--accent);
+}
+
+.scenario-field-option-body {
+  min-width: 0;
+}
+
+.scenario-field-option-title {
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.scenario-field-option-key {
+  color: var(--accent);
+  font-size: 11px;
+  font-family: 'SFMono-Regular', Consolas, monospace;
+  margin-top: 2px;
+}
+
+.scenario-field-option-desc {
+  color: var(--text-muted);
+  font-size: 11px;
+  line-height: 1.5;
+  margin-top: 5px;
+}
+
+@media (max-width: 960px) {
+  .scenario-page {
+    padding: 18px;
+  }
+
+  .scenario-header,
+  .scenario-card-head {
+    flex-direction: column;
+  }
+
+  .scenario-grid-2,
+  .scenario-coordinator-grid,
+  .scenario-agent-layout,
+  .scenario-field-picker {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/web-code/components/qa/components/ScenarioConfigPage.tsx b/web-code/components/qa/components/ScenarioConfigPage.tsx
new file mode 100644
index 00000000..6fa42d99
--- /dev/null
+++ b/web-code/components/qa/components/ScenarioConfigPage.tsx
@@ -0,0 +1,416 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  clearTemplateOverride,
+  clone,
+  hasTemplateOverride,
+  loadOriginalTemplate,
+  loadTemplateByMeta,
+  loadTemplateIndex,
+  saveTemplateOverride,
+} from '@/config/templateStore';
+import './ScenarioConfigPage.css';
+
+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', '人工修改解释规则'],
+];
+
+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);
+}
+
+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],
+  );
+
+  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]);
+
+  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,
+      }));
+    });
+  };
+
+  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 解析失败');
+    }
+  };
+
+  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">
+              <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>
+
+          <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>
+  );
+}
diff --git a/web-code/components/qa/components/Sidebar.css b/web-code/components/qa/components/Sidebar.css
new file mode 100644
index 00000000..cc75df5b
--- /dev/null
+++ b/web-code/components/qa/components/Sidebar.css
@@ -0,0 +1,238 @@
+.sidebar {
+  padding: 18px 14px;
+}
+
+.sidebar-section {
+  margin-bottom: 24px;
+}
+
+.sidebar-section-title {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-muted);
+  margin-bottom: 12px;
+  padding: 0 4px;
+}
+
+/* Phase stepper */
+.phase-stepper {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.phase-step {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  position: relative;
+}
+
+.phase-step:not(:last-child) .phase-step-line {
+  position: absolute;
+  left: 11px;
+  top: 24px;
+  bottom: 0;
+  width: 2px;
+  background: var(--border);
+}
+
+.phase-step-dot-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  padding-top: 3px;
+}
+
+.phase-step-dot {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 2px solid var(--border);
+  background: var(--surface);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 700;
+  transition: all 0.2s;
+  position: relative;
+  z-index: 1;
+}
+
+.phase-step.active .phase-step-dot {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.phase-step.active.phase-diverging .phase-step-dot {
+  border-color: var(--yellow);
+  background: rgba(210, 153, 34, 0.15);
+  color: var(--yellow);
+}
+
+.phase-step.active.phase-closing .phase-step-dot {
+  border-color: var(--green);
+  background: rgba(63, 185, 80, 0.15);
+  color: var(--green);
+}
+
+.phase-step.done .phase-step-dot {
+  border-color: var(--green);
+  background: rgba(63, 185, 80, 0.15);
+  color: var(--green);
+}
+
+.phase-step-content {
+  flex: 1;
+  padding-bottom: 16px;
+}
+
+.phase-step-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-muted);
+  line-height: 22px;
+  transition: color 0.2s;
+}
+
+.phase-step.active .phase-step-label {
+  color: var(--text);
+}
+
+.phase-step.done .phase-step-label {
+  color: var(--text-muted);
+}
+
+.phase-step-sublabel {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+/* Diverge round sub-steps */
+.diverge-rounds {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 6px;
+}
+
+.diverge-round-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--text-muted);
+  padding: 2px 0;
+}
+
+.diverge-round-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--border);
+  flex-shrink: 0;
+}
+
+.diverge-round-item.active .diverge-round-dot {
+  background: var(--yellow);
+  box-shadow: 0 0 6px rgba(210, 153, 34, 0.5);
+}
+
+.diverge-round-item.done .diverge-round-dot {
+  background: var(--green);
+}
+
+.diverge-round-item.active {
+  color: var(--yellow);
+}
+
+.diverge-round-item.done {
+  color: var(--text-muted);
+}
+
+/* Connector line between phase steps */
+.phase-connector {
+  width: 2px;
+  height: 8px;
+  background: var(--border);
+  margin-left: 10px;
+}
+
+/* Agent roster */
+.agent-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.agent-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 10px;
+  border-radius: 10px;
+  transition: background 0.15s, color 0.15s, transform 0.15s;
+  background: transparent;
+}
+
+.agent-item-clickable {
+  cursor: pointer;
+}
+
+.agent-item-clickable:hover {
+  background: var(--surface-raised);
+  transform: translateX(2px);
+}
+
+.agent-item-active {
+  background: var(--accent-soft);
+  border-left: 2px solid var(--accent);
+  padding-left: 6px;
+}
+
+.agent-status-icon {
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  flex-shrink: 0;
+}
+
+.agent-status-idle {
+  color: var(--border);
+}
+
+.agent-status-thinking {
+  color: var(--yellow);
+}
+
+.agent-status-done {
+  color: var(--green);
+}
+
+.agent-item-info {
+  flex: 1;
+  overflow: hidden;
+}
+
+.agent-item-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.agent-item-dim {
+  font-size: 10px;
+  color: var(--text-muted);
+}
diff --git a/web-code/components/qa/components/Sidebar.tsx b/web-code/components/qa/components/Sidebar.tsx
new file mode 100644
index 00000000..d8aac3f7
--- /dev/null
+++ b/web-code/components/qa/components/Sidebar.tsx
@@ -0,0 +1,174 @@
+import './Sidebar.css';
+
+type Agent = {
+  id: string;
+  name?: string;
+  dimension?: string;
+};
+
+type AgentState = {
+  status?: string;
+  name?: string;
+  dimension?: string;
+};
+
+type Props = {
+  agents: Agent[];
+  agentStates: Record<string, AgentState>;
+  phase: string;
+  currentRound: number;
+  divergeRounds: number;
+};
+
+const PHASES = [
+  { id: 'starting', label: '启动', dotLabel: '1' },
+  { id: 'diverging', label: '辩论', dotLabel: '2' },
+  { id: 'closing', label: '收敛', dotLabel: '3' },
+  { id: 'done', label: '完成', dotLabel: '✓' },
+];
+
+const PHASE_ORDER = ['starting', 'diverging', 'closing', 'done'];
+
+function getPhaseIndex(phase: string): number {
+  return PHASE_ORDER.indexOf(phase);
+}
+
+function scrollToTimelineElement(selector: string): void {
+  const appMain = document.querySelector('.app-main') as HTMLElement | null;
+  if (!appMain) return;
+  const el = appMain.querySelector(selector) as HTMLElement | null;
+  if (!el) return;
+  const targetRect = el.getBoundingClientRect();
+  const containerRect = appMain.getBoundingClientRect();
+  const targetScrollTop = appMain.scrollTop + targetRect.top - containerRect.top - 20;
+  (window as any).__mopeProgrammaticScroll = ((window as any).__mopeProgrammaticScroll || 0) + 1;
+  appMain.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
+}
+
+function scrollToDivergeRound(roundNum: number): void {
+  const appMain = document.querySelector('.app-main') as HTMLElement | null;
+  if (!appMain) return;
+
+  const divergeRounds = appMain.querySelectorAll('[data-phase="diverging"][data-round]');
+  const target = divergeRounds[roundNum - 1] as HTMLElement | undefined;
+  if (!target) return;
+
+  const targetRect = target.getBoundingClientRect();
+  const containerRect = appMain.getBoundingClientRect();
+  const targetScrollTop = appMain.scrollTop + targetRect.top - containerRect.top - 20;
+  (window as any).__mopeProgrammaticScroll = ((window as any).__mopeProgrammaticScroll || 0) + 1;
+  appMain.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
+}
+
+export default function Sidebar({
+  agents,
+  agentStates,
+  phase,
+  currentRound,
+  divergeRounds,
+}: Props): JSX.Element {
+  const currentPhaseIdx = getPhaseIndex(phase);
+
+  return (
+    <div className="sidebar">
+      <div className="sidebar-section">
+        <div className="sidebar-section-title">进度</div>
+        <div className="phase-stepper">
+          {PHASES.map((p, idx) => {
+            const isActive = phase === p.id;
+            const isDone = currentPhaseIdx > idx;
+            const stepClass = `phase-step phase-${p.id}${isActive ? ' active' : ''}${isDone ? ' done' : ''}`;
+
+            return (
+              <div
+                key={p.id}
+                className={stepClass}
+                onClick={() => scrollToTimelineElement(`[data-phase="${p.id}"]`)}
+                title={`点击跳转到${p.label}阶段`}
+                style={{ cursor: 'pointer' }}
+              >
+                {idx < PHASES.length - 1 && <div className="phase-step-line" />}
+                <div className="phase-step-dot-col">
+                  <div className="phase-step-dot">
+                    {isDone ? '✓' : p.dotLabel}
+                  </div>
+                </div>
+                <div className="phase-step-content">
+                  <div className="phase-step-label">{p.label}</div>
+
+                  {p.id === 'diverging' && (isDone || isActive) && divergeRounds > 0 && (
+                    <div className="diverge-rounds">
+                      {Array.from({ length: divergeRounds }, (_, i) => {
+                        const roundNum = i + 1;
+                        const isActiveDiverge = isActive && roundNum === (currentRound - 1);
+                        const isDoneDiverge = isDone || (isActive && (currentRound - 1) > roundNum);
+                        const itemClass = `diverge-round-item${isActiveDiverge ? ' active' : ''}${isDoneDiverge ? ' done' : ''}`;
+                        return (
+                          <div
+                            key={roundNum}
+                            className={itemClass}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              scrollToDivergeRound(roundNum);
+                            }}
+                            title={`点击跳转到辩论轮 ${roundNum}`}
+                            style={{ cursor: 'pointer' }}
+                          >
+                            <div className="diverge-round-dot" />
+                            <span>辩论轮 {roundNum}</span>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+
+                  {p.id === 'diverging' && !isDone && !isActive && divergeRounds > 0 && (
+                    <div className="phase-step-sublabel">{divergeRounds} 轮</div>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {agents && agents.length > 0 && (
+        <div className="sidebar-section">
+          <div className="sidebar-section-title">智能体</div>
+          <div className="agent-list">
+            {agents.map(agent => {
+              const agentState = agentStates[agent.id] || {};
+              const status = agentState.status || 'idle';
+
+              const handleClick = () => {
+                const cards = document.querySelectorAll(`[data-agent-id="${agent.id}"]`);
+                if (cards.length > 0) {
+                  (cards[cards.length - 1] as HTMLElement).scrollIntoView({ behavior: 'smooth', block: 'start' });
+                }
+              };
+
+              return (
+                <div
+                  key={agent.id}
+                  className={`agent-item agent-item-clickable${status === 'thinking' ? ' agent-item-active' : ''}`}
+                  onClick={handleClick}
+                  title="点击跳转到最新输出"
+                >
+                  <div className="agent-status-icon">
+                    {status === 'idle' && <span className="agent-status-idle">○</span>}
+                    {status === 'thinking' && <span className="agent-status-thinking spinner">⟳</span>}
+                    {status === 'done' && <span className="agent-status-done">✓</span>}
+                  </div>
+                  <div className="agent-item-info">
+                    <div className="agent-item-name">{agent.name || agent.id}</div>
+                    <div className="agent-item-dim">{agent.dimension}</div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web-code/components/qa/components/Timeline.css b/web-code/components/qa/components/Timeline.css
new file mode 100644
index 00000000..25c7e529
--- /dev/null
+++ b/web-code/components/qa/components/Timeline.css
@@ -0,0 +1,670 @@
+.timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  max-width: 920px;
+  margin: 0 auto;
+  padding-bottom: 16px;
+}
+
+/* Empty state */
+.timeline-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: var(--text-muted);
+  gap: 12px;
+}
+
+.timeline-empty-spinner {
+  font-size: 28px;
+  animation: spin 1.2s linear infinite;
+}
+
+/* Round header */
+.round-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 20px 0 12px;
+  padding: 0 2px;
+}
+
+.round-header:first-child {
+  margin-top: 0;
+}
+
+.round-header-line {
+  flex: 1;
+  height: 1px;
+  background: var(--border);
+}
+
+.round-header-label {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-muted);
+  white-space: nowrap;
+  letter-spacing: 0.3px;
+}
+
+.round-header-badge {
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+/* Background retrieval card */
+.bg-retrieval-card {
+  background: var(--surface-raised);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  margin-bottom: 18px;
+  overflow: hidden;
+  box-shadow: var(--shadow-card);
+}
+
+.bg-retrieval-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  background: var(--surface-hover);
+  user-select: none;
+}
+
+.bg-retrieval-header:hover {
+  background: var(--surface-hover-strong);
+}
+
+.bg-retrieval-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.bg-retrieval-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-left: auto;
+}
+
+.bg-retrieval-chevron {
+  color: var(--text-muted);
+  font-size: 12px;
+  transition: transform 0.2s;
+}
+
+.bg-retrieval-chevron.open {
+  transform: rotate(180deg);
+}
+
+.bg-retrieval-body {
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.bg-retrieval-dim {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.bg-retrieval-dim-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--accent);
+}
+
+.bg-retrieval-result {
+  margin-bottom: 8px;
+}
+
+.bg-retrieval-query {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+  font-style: italic;
+}
+
+.bg-retrieval-items {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.bg-retrieval-item {
+  font-size: 12px;
+  color: var(--text);
+  line-height: 1.5;
+  padding: 4px 8px;
+  background: var(--surface-hover);
+  border-radius: 4px;
+  border-left: 2px solid var(--border);
+}
+
+/* Coordinator card */
+.coordinator-card {
+  background: rgba(137, 87, 229, 0.06);
+  border: 1px solid rgba(137, 87, 229, 0.25);
+  border-radius: 14px;
+  padding: 14px 16px;
+  margin-bottom: 14px;
+  box-shadow: var(--shadow-card);
+}
+
+.coordinator-card-title {
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--purple);
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.coordinator-speakers {
+  font-size: 13px;
+  color: var(--text);
+  margin-bottom: 8px;
+}
+
+.coordinator-speaker-tag {
+  display: inline-block;
+  background: rgba(137, 87, 229, 0.15);
+  color: var(--purple);
+  border-radius: 4px;
+  padding: 1px 6px;
+  font-size: 12px;
+  margin: 0 3px;
+  font-weight: 600;
+}
+
+.coordinator-focus {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.coordinator-focus-item {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  font-size: 12px;
+}
+
+.coordinator-focus-agent {
+  font-weight: 700;
+  color: var(--purple);
+  flex-shrink: 0;
+  min-width: 60px;
+}
+
+.coordinator-focus-directive {
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+.coordinator-round-badge {
+  font-weight: 400;
+  color: var(--text-muted);
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 11px;
+}
+
+.coordinator-speakers-label {
+  color: var(--text-muted);
+  margin-right: 4px;
+}
+
+/* 草稿进展区块 */
+.coordinator-draft-section {
+  margin-bottom: 10px;
+  border: 1px solid rgba(137, 87, 229, 0.15);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.coordinator-draft-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  background: rgba(137, 87, 229, 0.08);
+  cursor: pointer;
+  user-select: none;
+}
+
+.coordinator-draft-header:hover {
+  background: rgba(137, 87, 229, 0.13);
+}
+
+.coordinator-draft-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--purple);
+}
+
+.coordinator-draft-progress {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-left: auto;
+}
+
+.coordinator-draft-chevron {
+  font-size: 12px;
+  color: var(--text-muted);
+  transition: transform 0.15s;
+}
+
+.coordinator-draft-chevron.open {
+  transform: rotate(180deg);
+}
+
+.coordinator-draft-body {
+  padding: 8px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.coordinator-draft-field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 5px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.coordinator-draft-field.filled {
+  background: rgba(34, 197, 94, 0.06);
+  border-left: 2px solid rgba(34, 197, 94, 0.5);
+}
+
+.coordinator-draft-field.empty {
+  background: rgba(239, 68, 68, 0.05);
+  border-left: 2px solid rgba(239, 68, 68, 0.3);
+}
+
+.coordinator-draft-field-name {
+  font-weight: 600;
+  color: var(--text-muted);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.coordinator-draft-field-content {
+  color: var(--text);
+  line-height: 1.5;
+}
+
+.coordinator-draft-field-empty {
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+/* 协调员流式动画点 */
+.coordinator-streaming-dot {
+  color: var(--purple);
+  font-size: 10px;
+  animation: pulse 1s ease-in-out infinite;
+  margin-left: 6px;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+/* 协调员思考过程 */
+.coordinator-thinking-section {
+  margin-bottom: 10px;
+  border: 1px solid rgba(137, 87, 229, 0.15);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.coordinator-thinking-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 10px;
+  background: rgba(137, 87, 229, 0.06);
+  cursor: pointer;
+  user-select: none;
+}
+
+.coordinator-thinking-header:hover {
+  background: rgba(137, 87, 229, 0.1);
+}
+
+.coordinator-thinking-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--purple);
+}
+
+.coordinator-thinking-body {
+  padding: 8px 10px;
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.coordinator-status-banner {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  padding: 7px 10px;
+  border-radius: 999px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.coordinator-status-banner-tail {
+  display: flex;
+  width: 100%;
+  margin-top: 10px;
+  margin-bottom: 0;
+  padding: 10px 12px;
+  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
+  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 10%, transparent);
+}
+
+.coordinator-status-spinner {
+  display: inline-block;
+  animation: spin 1s linear infinite;
+}
+
+/* 活跃字段（正在生成）高亮 */
+.coordinator-draft-field.active {
+  background: rgba(137, 87, 229, 0.08);
+  border-left: 2px solid rgba(137, 87, 229, 0.6);
+}
+
+/* 缺口列表 */
+.coordinator-gaps {
+  margin-bottom: 10px;
+}
+
+.coordinator-gaps-title {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  color: #f59e0b;
+  margin-bottom: 4px;
+}
+
+.coordinator-gap-item {
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.5;
+  padding: 1px 0;
+}
+
+.human-review-card {
+  background: rgba(88, 166, 255, 0.08);
+  border: 1px solid rgba(88, 166, 255, 0.28);
+  border-radius: 10px;
+  padding: 14px;
+  margin-bottom: 16px;
+}
+
+.human-review-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  margin-bottom: 8px;
+}
+
+.human-review-hint {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-bottom: 12px;
+}
+
+.human-review-chatbox {
+  min-height: 120px;
+}
+
+.human-review-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.human-review-field {
+  margin-bottom: 12px;
+}
+
+.human-review-field label {
+  display: block;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.human-review-input,
+.human-review-textarea {
+  width: 100%;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  padding: 10px;
+  font-family: inherit;
+  font-size: 13px;
+  outline: none;
+}
+
+.human-review-speaker-select {
+  width: 100%;
+}
+
+.human-review-speaker-select .t-select__wrap,
+.human-review-speaker-select .t-input,
+.human-review-speaker-select .t-tag-input {
+  width: 100%;
+}
+
+.human-review-speaker-select .t-input,
+.human-review-speaker-select .t-tag-input {
+  border-color: var(--border);
+  border-radius: 6px;
+  background: var(--card);
+  color: var(--text);
+}
+
+.human-review-speaker-select .t-input:hover,
+.human-review-speaker-select .t-tag-input:hover,
+.human-review-speaker-select .t-input.t-is-focused,
+.human-review-speaker-select .t-tag-input.t-is-focused {
+  border-color: var(--accent);
+}
+
+.human-review-speaker-select .t-tag {
+  background: var(--accent-soft);
+  color: var(--accent);
+  border-color: var(--border);
+}
+
+.human-review-textarea {
+  min-height: 220px;
+  resize: vertical;
+  font-family: 'SFMono-Regular', Consolas, monospace;
+  line-height: 1.5;
+}
+
+.human-review-textarea-sm {
+  min-height: 120px;
+}
+
+.human-review-input:focus,
+.human-review-textarea:focus {
+  border-color: var(--accent);
+}
+
+.human-review-meta {
+  margin-top: 6px;
+  font-size: 11px;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+.human-review-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.human-review-actions-left {
+  justify-content: flex-start;
+  margin-top: 8px;
+}
+
+.human-review-error {
+  color: var(--red);
+  font-size: 12px;
+  margin-bottom: 10px;
+}
+
+@media (max-width: 900px) {
+  .human-review-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 下滑按钮 */
+.scroll-to-bottom-button {
+  position: fixed;
+  bottom: 34px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.34);
+  background:
+    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.42), transparent 34%),
+    linear-gradient(135deg, rgba(59, 130, 246, 0.46), rgba(124, 58, 237, 0.42));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow:
+    0 16px 40px rgba(37, 99, 235, 0.28),
+    0 6px 18px rgba(15, 23, 42, 0.16),
+    inset 0 1px 0 rgba(255, 255, 255, 0.24);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    background 0.2s ease,
+    border-color 0.2s ease;
+  z-index: 1000;
+  backdrop-filter: blur(16px) saturate(1.2);
+  -webkit-backdrop-filter: blur(16px) saturate(1.2);
+  animation: scrollBtnIn 0.26s ease-out;
+  pointer-events: auto;
+}
+
+.scroll-to-bottom-button::before {
+  content: '';
+  position: absolute;
+  inset: -6px;
+  border-radius: inherit;
+  background: rgba(99, 102, 241, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  pointer-events: none;
+}
+
+.scroll-to-bottom-button::after {
+  content: '';
+  position: absolute;
+  inset: 4px;
+  border-radius: inherit;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  pointer-events: none;
+}
+
+.scroll-to-bottom-button:hover {
+  background:
+    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.55), transparent 34%),
+    linear-gradient(135deg, rgba(59, 130, 246, 0.62), rgba(124, 58, 237, 0.58));
+  transform: translateX(-50%) translateY(-3px) scale(1.04);
+  box-shadow:
+    0 20px 48px rgba(37, 99, 235, 0.36),
+    0 10px 26px rgba(15, 23, 42, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.32);
+  border-color: rgba(255, 255, 255, 0.52);
+}
+
+.scroll-to-bottom-button:active {
+  transform: translateX(-50%) translateY(-1px) scale(0.97);
+  box-shadow:
+    0 10px 28px rgba(37, 99, 235, 0.28),
+    0 4px 14px rgba(15, 23, 42, 0.18),
+    inset 0 1px 0 rgba(255, 255, 255, 0.22);
+}
+
+@keyframes scrollBtnIn {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(12px) scale(0.86);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+
+.scroll-to-bottom-button .scroll-arrow {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  font-size: 24px;
+  line-height: 1;
+  font-weight: 800;
+  text-shadow: 0 2px 8px rgba(15, 23, 42, 0.32);
+  animation: scrollArrowBounce 1.35s ease-in-out infinite;
+}
+
+@keyframes scrollArrowBounce {
+  0%, 100% { transform: translateY(-1px); }
+  50% { transform: translateY(3px); }
+}
diff --git a/web-code/components/qa/components/Timeline.tsx b/web-code/components/qa/components/Timeline.tsx
new file mode 100644
index 00000000..88529264
--- /dev/null
+++ b/web-code/components/qa/components/Timeline.tsx
@@ -0,0 +1,553 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Select } from 'tdesign-react';
+import AgentCard from './AgentCard';
+import FinalReport from './FinalReport';
+import './Timeline.css';
+
+const PHASE_LABELS: Record<string, string> = {
+  starting: '启动',
+  diverging: '辩论',
+  closing: '收敛',
+  done: '完成',
+};
+
+function getPhaseBadgeClass(phase?: string): string {
+  switch (phase) {
+    case 'starting': return 'badge badge-starting';
+    case 'diverging': return 'badge badge-diverging';
+    case 'closing': return 'badge badge-closing';
+    case 'done': return 'badge badge-done';
+    default: return 'badge badge-default';
+  }
+}
+
+function BackgroundRetrievalCard({ data }: { data: any }): JSX.Element {
+  const [open, setOpen] = useState(false);
+  const { results, dimensions, total_records } = data;
+
+  return (
+    <div className="bg-retrieval-card">
+      <div className="bg-retrieval-header" onClick={() => setOpen(o => !o)}>
+        <span className="bg-retrieval-title">背景检索完成</span>
+        <span className="bg-retrieval-meta">
+          {dimensions && dimensions.length > 0 ? `${dimensions.length} 维度` : ''}
+          {total_records != null ? ` · ${total_records} 条` : ''}
+        </span>
+        <span className={`bg-retrieval-chevron ${open ? 'open' : ''}`}>▾</span>
+      </div>
+
+      {open && results && (
+        <div className="bg-retrieval-body">
+          {Object.entries(results).map(([dim, entries]) => (
+            <div key={dim} className="bg-retrieval-dim">
+              <div className="bg-retrieval-dim-label">{dim}</div>
+              {Array.isArray(entries) && entries.map((entry: any, i: number) => (
+                <div key={i} className="bg-retrieval-result">
+                  {entry.query && (
+                    <div className="bg-retrieval-query">查询: "{entry.query}"</div>
+                  )}
+                  <div className="bg-retrieval-items">
+                    {Array.isArray(entry.content) && entry.content.map((item: any, j: number) => (
+                      <div key={j} className="bg-retrieval-item">
+                        {typeof item === 'string'
+                          ? (item.length > 250 ? item.slice(0, 250) + '…' : item)
+                          : JSON.stringify(item).slice(0, 250)}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function CoordinatorStreamingCard({ item, reportSchema }: { item: any; reportSchema: Record<string, any> }): JSX.Element {
+  const { phase, divergeRound, totalDivergeRounds, thinking, content, statusMessage, currentField, reportPartial } = item;
+  const [thinkingOpen, setThinkingOpen] = useState(false);
+  const isFinalReport = phase === 'final_report';
+  const reportFields = reportSchema ? Object.keys(reportSchema) : [];
+
+  return (
+    <div className="coordinator-card coordinator-card-streaming">
+      <div className="coordinator-card-title">
+        <span>协调员</span>
+        {!isFinalReport && divergeRound != null && (
+          <span className="coordinator-round-badge">
+            辩论轮 {divergeRound}/{totalDivergeRounds}
+          </span>
+        )}
+        {isFinalReport && (
+          <span className="coordinator-round-badge">生成最终方案</span>
+        )}
+        <span className="coordinator-streaming-dot">●</span>
+      </div>
+
+      {thinking && (
+        <div className="coordinator-thinking-section">
+          <div className="coordinator-thinking-header" onClick={() => setThinkingOpen(o => !o)}>
+            <span className="coordinator-thinking-label">思考中</span>
+            <span className={`coordinator-draft-chevron ${thinkingOpen ? 'open' : ''}`}>▾</span>
+          </div>
+          {thinkingOpen && (
+            <div className="coordinator-thinking-body">{thinking}</div>
+          )}
+        </div>
+      )}
+
+      {isFinalReport && reportFields.length > 0 && (
+        <div className="coordinator-draft-body" style={{ padding: '8px 0 0' }}>
+          {reportFields.map(field => {
+            const done = !!reportPartial[field];
+            const isActive = currentField === field && !done;
+            return (
+              <div key={field} className={`coordinator-draft-field ${done ? 'filled' : isActive ? 'active' : 'empty'}`}>
+                <span className="coordinator-draft-field-name">
+                  {field}
+                  {isActive && <span className="coordinator-streaming-dot" style={{ marginLeft: 6 }}>●</span>}
+                </span>
+                {done
+                  ? <span className="coordinator-draft-field-content">{reportPartial[field].slice(0, 200)}{reportPartial[field].length > 200 ? '…' : ''}</span>
+                  : isActive && content
+                    ? <span className="coordinator-draft-field-content">{content.slice(-400)}</span>
+                    : <span className="coordinator-draft-field-empty">{isActive ? '生成中…' : '等待中'}</span>
+                }
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {!isFinalReport && content && (
+        <div className="coordinator-thinking-body" style={{ marginTop: 6 }}>{content.slice(-600)}</div>
+      )}
+
+      {statusMessage && !isFinalReport && (
+        <div className="coordinator-status-banner coordinator-status-banner-tail">
+          <span className="coordinator-status-spinner">⟳</span>
+          <span>{statusMessage}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function CoordinatorCard({ data, agentStates, thinking }: { data: any; agentStates: Record<string, any>; thinking?: string }): JSX.Element {
+  const { divergeRound, totalDivergeRounds, nextSpeakers, focus, draft } = data;
+  const [draftOpen, setDraftOpen] = useState(false);
+  const [thinkingOpen, setThinkingOpen] = useState(false);
+
+  const draftEntries = draft ? Object.entries(draft) : [];
+  const filledCount = draftEntries.filter(([, v]: [string, any]) => v && String(v).trim()).length;
+
+  return (
+    <div className="coordinator-card">
+      <div className="coordinator-card-title">
+        <span>协调员</span>
+        {divergeRound != null && totalDivergeRounds != null && (
+          <span className="coordinator-round-badge">
+            辩论轮 {divergeRound}/{totalDivergeRounds}
+          </span>
+        )}
+      </div>
+
+      {thinking && thinking.trim() && (
+        <div className="coordinator-thinking-section">
+          <div className="coordinator-thinking-header" onClick={() => setThinkingOpen(o => !o)}>
+            <span className="coordinator-thinking-label">思考过程</span>
+            <span className={`coordinator-draft-chevron ${thinkingOpen ? 'open' : ''}`}>▾</span>
+          </div>
+          {thinkingOpen && (
+            <div className="coordinator-thinking-body">{thinking}</div>
+          )}
+        </div>
+      )}
+
+      {draftEntries.length > 0 && (
+        <div className="coordinator-draft-section">
+          <div
+            className="coordinator-draft-header"
+            onClick={() => setDraftOpen(o => !o)}
+          >
+            <span className="coordinator-draft-title">方案草稿</span>
+            <span className="coordinator-draft-progress">
+              {filledCount}/{draftEntries.length} 字段已填写
+            </span>
+            <span className={`coordinator-draft-chevron ${draftOpen ? 'open' : ''}`}>▾</span>
+          </div>
+          {draftOpen && (
+            <div className="coordinator-draft-body">
+              {draftEntries.map(([field, content]: [string, any]) => (
+                <div key={field} className={`coordinator-draft-field ${content ? 'filled' : 'empty'}`}>
+                  <span className="coordinator-draft-field-name">{field}</span>
+                  {content
+                    ? <span className="coordinator-draft-field-content">{String(content).slice(0, 300)}{String(content).length > 300 ? '…' : ''}</span>
+                    : <span className="coordinator-draft-field-empty">空缺</span>
+                  }
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {nextSpeakers && nextSpeakers.length > 0 && (
+        <div className="coordinator-speakers">
+          <span className="coordinator-speakers-label">下一轮：</span>
+          {nextSpeakers.map((id: string) => {
+            const name = agentStates?.[id]?.name || id;
+            return <span key={id} className="coordinator-speaker-tag">{name}</span>;
+          })}
+        </div>
+      )}
+
+      {focus && Object.keys(focus).length > 0 && (
+        <div className="coordinator-focus">
+          {Object.entries(focus).map(([agentId, directive]) => {
+            const name = agentStates?.[agentId]?.name || agentId;
+            return (
+              <div key={agentId} className="coordinator-focus-item">
+                <span className="coordinator-focus-agent">{name}</span>
+                <span className="coordinator-focus-directive">{String(directive)}</span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function HumanReviewCard({ pendingReview, agentStates, onApprove, onRevise, submitting, revising }: any) {
+  const [nextSpeakers, setNextSpeakers] = useState<string[]>(pendingReview.nextSpeakers || []);
+  const [focusText, setFocusText] = useState(JSON.stringify(pendingReview.focus || {}, null, 2));
+  const [draftText, setDraftText] = useState(JSON.stringify(pendingReview.draft || {}, null, 2));
+  const [gapsText, setGapsText] = useState(JSON.stringify(pendingReview.gaps || [], null, 2));
+  const [instruction, setInstruction] = useState('');
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    setNextSpeakers(pendingReview.nextSpeakers || []);
+    setFocusText(JSON.stringify(pendingReview.focus || {}, null, 2));
+    setDraftText(JSON.stringify(pendingReview.draft || {}, null, 2));
+    setGapsText(JSON.stringify(pendingReview.gaps || [], null, 2));
+  }, [pendingReview]);
+
+  const agentOptions = Object.entries(agentStates || {}).map(([id, agent]: [string, any]) => ({
+    label: agent.name || id,
+    value: id,
+  }));
+
+  const handleSpeakerChange = (value: any) => {
+    const values = Array.isArray(value) ? value : [];
+    setNextSpeakers(values.map(item => String(item)));
+  };
+
+  const handleSubmit = async () => {
+    try {
+      const parsedFocus = JSON.parse(focusText || '{}');
+      const parsedDraft = JSON.parse(draftText || '{}');
+      const parsedGaps = JSON.parse(gapsText || '[]');
+      const nextSpeakerIds = nextSpeakers.map(item => item.trim()).filter(Boolean);
+
+      setError('');
+      await onApprove({
+        nextSpeakers: nextSpeakerIds,
+        focus: parsedFocus,
+        draft: parsedDraft,
+        gaps: parsedGaps,
+      });
+    } catch (err: any) {
+      setError(err?.message || '提交失败');
+    }
+  };
+
+  const handleRevise = async () => {
+    if (!instruction.trim()) {
+      setError('请先输入你希望协调员如何修改');
+      return;
+    }
+    try {
+      setError('');
+      await onRevise(instruction.trim());
+      setInstruction('');
+    } catch (err: any) {
+      setError(err?.message || '修改失败');
+    }
+  };
+
+  return (
+    <div className="human-review-card">
+      <div className="human-review-title">
+        <span>人工确认</span>
+        <span className="coordinator-round-badge">
+          辩论轮 {pendingReview.divergeRound}/{pendingReview.totalDivergeRounds}
+        </span>
+      </div>
+
+      <div className="human-review-hint">
+        优先用自然语言告诉协调员怎么改；如果需要，也可以直接微调下方结构化内容。
+      </div>
+
+      <div className="human-review-field">
+        <label>对协调员说</label>
+        <textarea
+          className="human-review-textarea human-review-chatbox"
+          value={instruction}
+          onChange={e => setInstruction(e.target.value)}
+          placeholder="例如：不要让 risk 发言，改成 audience 和 narrative。把 focus 改得更具体，要求 narrative 给出 2 条可以直接发微博的文案。draft 里的 audience_map 先不要定死，保留为待验证。"
+          disabled={submitting || revising}
+        />
+        <div className="human-review-actions human-review-actions-left">
+          <button className="btn-secondary" onClick={handleRevise} disabled={submitting || revising}>
+            {revising ? '协调员修改中…' : '让协调员修改'}
+          </button>
+        </div>
+      </div>
+
+      <div className="human-review-field">
+        <label>下一轮发言者</label>
+        <Select
+          className="human-review-speaker-select"
+          value={nextSpeakers}
+          options={agentOptions}
+          multiple
+          clearable
+          filterable
+          minCollapsedNum={3}
+          placeholder="请选择下一轮发言者"
+          disabled={submitting || revising}
+          onChange={handleSpeakerChange}
+        />
+        <div className="human-review-meta">
+          可选 agent: {agentOptions.map(option => `${option.label}(${option.value})`).join(' / ')}
+        </div>
+      </div>
+
+      <div className="human-review-grid">
+        <div className="human-review-field">
+          <label>任务指令 focus（JSON）</label>
+          <textarea
+            className="human-review-textarea"
+            value={focusText}
+            onChange={e => setFocusText(e.target.value)}
+            disabled={submitting || revising}
+            spellCheck={false}
+          />
+        </div>
+
+        <div className="human-review-field">
+          <label>草稿 draft（JSON）</label>
+          <textarea
+            className="human-review-textarea"
+            value={draftText}
+            onChange={e => setDraftText(e.target.value)}
+            disabled={submitting || revising}
+            spellCheck={false}
+          />
+        </div>
+      </div>
+
+      <div className="human-review-field">
+        <label>当前缺口 gaps（JSON 数组）</label>
+        <textarea
+          className="human-review-textarea human-review-textarea-sm"
+          value={gapsText}
+          onChange={e => setGapsText(e.target.value)}
+          disabled={submitting || revising}
+          spellCheck={false}
+        />
+      </div>
+
+      {error && <div className="human-review-error">{error}</div>}
+
+      <div className="human-review-actions">
+        <button className="btn-primary" onClick={handleSubmit} disabled={submitting || revising}>
+          {submitting ? '提交中…' : '确认并继续'}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+type Props = {
+  timeline: any[];
+  agentStates: Record<string, any>;
+  reportSchema: Record<string, any>;
+  pendingReview: any;
+  onApproveReview: (payload: any) => Promise<void>;
+  onReviseReview: (instruction: string) => Promise<void>;
+  reviewSubmitting: boolean;
+  reviewRevising: boolean;
+};
+
+export default function Timeline({ timeline, agentStates, reportSchema, pendingReview, onApproveReview, onReviseReview, reviewSubmitting, reviewRevising }: Props): JSX.Element {
+  const endRef = useRef<HTMLDivElement | null>(null);
+  const programmaticScrollUntilRef = useRef(0);
+  const [showScrollButton, setShowScrollButton] = useState(false);
+  const [isAutoScrolling, setIsAutoScrolling] = useState(true);
+
+  const doScrollToBottom = useCallback((behavior: ScrollBehavior = 'auto') => {
+    const appMainElement = document.querySelector('.app-main') as HTMLElement | null;
+    if (!appMainElement) return;
+
+    programmaticScrollUntilRef.current = Date.now() + (behavior === 'smooth' ? 700 : 120);
+    appMainElement.scrollTo({ top: appMainElement.scrollHeight, behavior });
+  }, []);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const appMainElement = document.querySelector('.app-main') as HTMLElement | null;
+      if (!appMainElement) return;
+
+      const { scrollTop, scrollHeight, clientHeight } = appMainElement;
+      const distanceToBottom = scrollHeight - scrollTop - clientHeight;
+      const isNearBottom = distanceToBottom < 24;
+      const isProgrammaticScroll = Date.now() < programmaticScrollUntilRef.current;
+
+      setShowScrollButton(!isNearBottom);
+
+      if (isNearBottom) {
+        setIsAutoScrolling(true);
+        return;
+      }
+
+      if (!isProgrammaticScroll) {
+        setIsAutoScrolling(false);
+      }
+    };
+
+    const appMainElement = document.querySelector('.app-main') as HTMLElement | null;
+    if (appMainElement) {
+      appMainElement.addEventListener('scroll', handleScroll, { passive: true });
+    }
+
+    return () => {
+      if (appMainElement) {
+        appMainElement.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isAutoScrolling) {
+      doScrollToBottom('auto');
+    }
+  }, [timeline, pendingReview, isAutoScrolling, doScrollToBottom]);
+
+  const scrollToBottom = () => {
+    setIsAutoScrolling(true);
+    setShowScrollButton(false);
+    doScrollToBottom('smooth');
+  };
+
+  if (!timeline || timeline.length === 0) {
+    return (
+      <div className="timeline">
+        <div className="timeline-empty">
+          <div className="timeline-empty-spinner">⟳</div>
+          <span>等待智能体启动…</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="timeline">
+      {timeline.map((item, idx) => {
+        if (item.type === 'background_retrieval') {
+          return <BackgroundRetrievalCard key={idx} data={item.data} />;
+        }
+
+        if (item.type === 'round_start') {
+          return (
+            <div key={idx} className="round-header" data-phase={item.phase} data-round={item.round}>
+              <div className="round-header-line" />
+              <span className="round-header-label">第 {item.round} 轮</span>
+              <span className={getPhaseBadgeClass(item.phase)}>
+                {PHASE_LABELS[item.phase] || item.phase}
+              </span>
+              <div className="round-header-line" />
+            </div>
+          );
+        }
+
+        if (item.type === 'agent_contribution') {
+          const { agentId, round, phase, data, streaming } = item;
+          const agentState = agentStates[agentId] || {};
+          return (
+            <div key={`${agentId}-${round}`} data-agent-id={agentId}>
+              <AgentCard
+                agentId={agentId}
+                agentName={agentState.name || agentId}
+                dimension={agentState.dimension || agentId}
+                round={round}
+                phase={phase}
+                content={data.content}
+                thinking={data.thinking}
+                dimensionOutput={data.dimensionOutput}
+                retrievalLog={data.retrievalLog}
+                retrievalCount={data.retrievalCount}
+                referenceMap={data.referenceMap}
+                streaming={!!streaming}
+              />
+            </div>
+          );
+        }
+
+        if (item.type === 'coordinator_streaming') {
+          return (
+            <div key={idx} data-phase={item.phase || 'closing'}>
+              <CoordinatorStreamingCard item={item} reportSchema={reportSchema} />
+            </div>
+          );
+        }
+
+        if (item.type === 'coordinator') {
+          return (
+            <div key={idx} data-phase={item.data?.phase || 'closing'}>
+              <CoordinatorCard data={item.data} agentStates={agentStates} thinking={item.thinking} />
+            </div>
+          );
+        }
+
+        if (item.type === 'final_report') {
+          return (
+            <div key={idx} data-phase="done">
+              <FinalReport output={item.data} reportSchema={reportSchema} />
+            </div>
+          );
+        }
+
+        return null;
+      })}
+
+      {pendingReview && (
+        <HumanReviewCard
+          pendingReview={pendingReview}
+          agentStates={agentStates}
+          onApprove={onApproveReview}
+          onRevise={onReviseReview}
+          submitting={reviewSubmitting}
+          revising={reviewRevising}
+        />
+      )}
+
+      <div ref={endRef} />
+
+      {showScrollButton && (
+        <button
+          className="scroll-to-bottom-button"
+          onClick={scrollToBottom}
+          aria-label="滚动到底部并开启自动跟随"
+          title="回到底部并继续自动下滑"
+        >
+          <span className="scroll-arrow">↓</span>
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/web-code/components/qa/config/defaultConfig.ts b/web-code/components/qa/config/defaultConfig.ts
new file mode 100644
index 00000000..160b56d0
--- /dev/null
+++ b/web-code/components/qa/config/defaultConfig.ts
@@ -0,0 +1,176 @@
+/**
+ * defaultConfig.ts - 默认配置模块
+ * 
+ * 本模块定义应用的默认配置值
+ * 包括后端服务器地址和初始配置
+ * 这些配置在用户没有自定义时会作为默认值使用
+ */
+
+/**
+ * 默认后端服务器地址
+ * 用于前端与后端 API 通信
+ */
+export const DEFAULT_BACKEND_URL = 'http://10.26.128.38:8030'
+
+/**
+ * 默认应用配置
+ * 当用户没有选择任何模板时使用的初始配置
+ * 包含：
+ * - 协调者模式配置
+ * - 协调者提示词
+ * - 默认智能体列表
+ * - 阶段配置
+ * - 报告结构定义
+ */
+export const DEFAULT_CONFIG = {
+  /** 任务背景（用户输入） */
+  task_context: "",
+  
+  /** 协调者模式：auto=自动, human_review=人工确认 */
+  coordinator_mode: "auto",
+  
+  /** 协调者配置 - 包含各种提示词和规则 */
+  coordinator_config: {
+    /** 系统提示前缀 - 协调者的全局规则 */
+    system_prompt_prefix: "",
+    
+    /** 首轮策略 - 第1轮辩论时的指导 */
+    round1_guidance: `这是发散阶段第1轮，草稿刚起步。
+策略：优先填写草稿中空缺最关键的字段，同时识别智能体之间最尖锐的分歧——
+这些分歧往往意味着草稿中某个判断还无法做出，需要通过交锋来解决。`,
+    
+    /** 中间轮策略 - 中间轮辩论时的指导 */
+    middle_round_guidance: `这是发散阶段的中间轮次。
+策略：审查草稿现状，找出仍然太模糊或有冲突的字段，
+选择能推进这些字段的智能体，给出让草稿变得更具体的任务。`,
+    
+    /** 末轮策略 - 最后一轮辩论时的指导 */
+    final_round_guidance: `这是发散阶段最后一轮。
+策略：草稿必须在这轮后达到可以收尾的状态，但仍要求智能体给出完整材料包，
+包括明确判断、依据链、反例、风险边界和可核验线索；最终压缩、取舍和成文由协调者完成。`,
+    
+    /** 选人规则 - 如何选择下一轮发言的智能体 */
+    speaker_selection_rules: "优先选择最能扩充 partial/blocked 字段材料、解决关键冲突、补充证据或论证链的智能体。",
+    
+    /** 任务指令规则 - 如何生成给智能体的任务 */
+    focus_instruction_rules: "focus 必须写成内容型任务书，不能只催促 agent 继续分析。每条至少包含：目标字段、已有材料或草稿判断、真正缺口、为什么该缺口会阻塞报告、需要补充的具体材料类型、建议切入角度、预期输出形态、风险或禁止事项。指令应鼓励 agent 展开材料、证据线索、论证链、反例、分歧和边界条件，而不是只给短结论。",
+    
+    /** 依赖推进规则 - 如何处理字段间的依赖关系 */
+    dependency_driving_rules: "",
+    
+    /** 一致性/冲突检查规则 */
+    consistency_check_rules: "",
+    
+    /** 人工修改解释规则 */
+    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 },
+  
+  /** 模板 ID（默认未选择） */
+  template_id: "",
+  
+  /** 模板名称 */
+  template_name: "",
+  
+  /** 模板简短描述 */
+  template_brief: "",
+  
+  /** 报告结构定义 - 字段名到描述的映射 */
+  report_schema: {
+    /** 背景研判：当前舆论场/市场/竞争格局的战略研判 */
+    situation_assessment: "背景研判：当前舆论场/市场/竞争格局的战略研判。包含现有几条并行叙事及其势头、可以被打散的认知锚点、竞争对手动作的逻辑漏洞、可操作的叙事空间。不是损失报告，是战略判断。",
+    
+    /** 传播目标：2-4个本方案期望在受众中建立的具体认知或情绪 */
+    communication_objectives: "传播目标：2-4个本方案期望在受众中建立的具体认知或情绪，用目标受众的第一人称内心独白表达。不写商业结果，不写指标，只写认知和情绪目标。可含竞争性目标。",
+    
+    /** 核心受众：2-4个具体受众群体 */
+    audience_map: "核心受众：2-4个具体受众群体，每个包含：（1）人口画像——年龄段、性别、城市层级、具体特征；（2）当前心理状态——用第一人称内心独白；（3）关键信息节点——具体平台和账号/社区名称，不接受泛化描述。",
+    
+    /** 叙事方案：2-3个叙事支柱 */
+    narrative_plan: "叙事方案：2-3个叙事支柱，每个包含：（1）具体内容——可执行的内容方向或文案草稿；（2）为什么这么设计——预期心理机制；（3）预期效果——目标受众的认知变化；（4）风险与局限——失效条件。叙事框架和消息合并在一起。",
+    
+    /** 分阶段行动计划 */
+    action_plan: "分阶段行动计划：按时间线的3-4个阶段，每个行动具体到：做什么、谁执行（官方/第三方/独立账号）、何时。",
+    
+    /** 风险预案：3-5个风险场景 */
+    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: `叙事支柱一：工况重构——把"电动门锁缺陷"扩展为"追尾高速起火"议题
+
+具体内容：发布或推动媒体发布《追尾高速事故生存数据分析》，引用可验证的事故数据：中国高速追尾事故中燃油车起火比例、燃油车在高速追尾后因油箱破裂导致无法逃生的案例、断电门锁问题在行业内的普遍性（其他品牌纯电车是否存在类似设计）。
+
+为什么这么设计：公众对"电动车起火"的恐惧，部分来自"燃油车才是安全默认值"的认知锚点。此叙事目标不是洗白问界，而是打散原有的比较基准——把"问界门锁失效"从"品牌失职"变成"高速追尾这一极端工况下的行业性挑战"。
+
+预期效果：目标受众在搜索"问界安全"时，搜到的不是事故视频，而是工况对比分析，认知从"问界车会困死人"转向"高速追尾是极端事故，概率极低"。
+
+风险与局限：如果数据无法支持"燃油车风险不低于电动车"的结论，此叙事会反噬——数据必须真实可查。部分受众会将此解读为"转移焦点"。`
+  }
+}
\ No newline at end of file
diff --git a/web-code/components/qa/config/templateStore.ts b/web-code/components/qa/config/templateStore.ts
new file mode 100644
index 00000000..f039e23d
--- /dev/null
+++ b/web-code/components/qa/config/templateStore.ts
@@ -0,0 +1,153 @@
+/**
+ * templateStore.ts - 模板存储管理模块
+ * 
+ * 本模块负责从后端加载模板配置，并支持本地覆盖功能
+ * 模板存储在 /public/templates 目录下，通过 fetch API 加载
+ * 
+ * 主要功能：
+ * - 加载模板索引列表
+ * - 根据 ID 或元数据加载单个模板
+ * - 从本地存储读取/保存模板覆盖
+ * - 检查模板是否有本地覆盖
+ */
+
+import type { Template, TemplateMeta } from '../types'
+
+/**
+ * 本地存储中覆盖模板的前缀
+ * 完整 key 格式：mope_template_override:{template_id}
+ */
+const OVERRIDE_PREFIX = 'mope_template_override:'
+
+/**
+ * 深度克隆对象
+ * 使用 JSON 序列化/反序列化实现
+ * 注意：这会丢失 undefined、正则、函数等特殊类型
+ * 
+ * @param value - 需要克隆的值
+ * @returns 克隆后的新值
+ */
+export function clone<T>(value: T): T {
+  return JSON.parse(JSON.stringify(value))
+}
+
+/**
+ * 加载模板索引列表
+ * 从 http://ch1.b.uat.4.cn/zncmweb/templates/index.json 获取所有可用模板的元数据
+ * 
+ * @returns 模板元数据数组
+ * @throws 如果请求失败或响应非 OK，抛出错误
+ */
+export async function loadTemplateIndex(): Promise<TemplateMeta[]> {
+  const response = await fetch('https://ch1.b.uat.4.cn/zncmweb/templates/index.json')
+  if (!response.ok) throw new Error(`HTTP ${response.status}`)
+  const data = await response.json()
+  return (data.templates || []) as TemplateMeta[]
+}
+
+/**
+ * 根据元数据或 ID 加载模板
+ * 如果本地有覆盖，返回覆盖版本
+ * 
+ * @param metaOrId - 模板元数据对象或模板 ID 字符串
+ * @returns 模板对象
+ * @throws 如果请求失败或响应非 OK，抛出错误
+ */
+export async function loadTemplateByMeta(metaOrId: TemplateMeta | string): Promise<Template> {
+  // 提取模板 ID
+  const templateId = typeof metaOrId === 'string' 
+    ? metaOrId 
+    : metaOrId?.template_id
+  
+  // 确定请求的 URL
+  const file = typeof metaOrId === 'string' 
+    ? `/templates/${templateId}.json` 
+    : (metaOrId as TemplateMeta)?.file
+  
+  const response = await fetch(file || `/templates/${templateId}.json`)
+  if (!response.ok) throw new Error(`HTTP ${response.status}`)
+  
+  const template = await response.json() as Template
+  
+  // 检查是否有本地覆盖
+  const override = getTemplateOverride(template.template_id || templateId || '')
+  
+  // 如果有覆盖，返回覆盖版本
+  return override ? clone(override) : template
+}
+
+/**
+ * 加载原始模板（忽略本地覆盖）
+ * 用于在用户重置模板时恢复到原始状态
+ * 
+ * @param metaOrId - 模板元数据对象或模板 ID 字符串
+ * @returns 原始模板对象
+ * @throws 如果请求失败或响应非 OK，抛出错误
+ */
+export async function loadOriginalTemplate(metaOrId: TemplateMeta | string): Promise<Template> {
+  // 提取模板 ID
+  const templateId = typeof metaOrId === 'string' 
+    ? metaOrId 
+    : metaOrId?.template_id
+  
+  // 确定请求的 URL
+  const file = typeof metaOrId === 'string' 
+    ? `/templates/${templateId}.json` 
+    : (metaOrId as TemplateMeta)?.file
+  
+  const response = await fetch(file || `/templates/${templateId}.json`)
+  if (!response.ok) throw new Error(`HTTP ${response.status}`)
+  
+  return response.json() as Promise<Template>
+}
+
+/**
+ * 从本地存储获取模板覆盖
+ * 
+ * @param templateId - 模板 ID
+ * @returns 覆盖的模板对象，如果没有覆盖则返回 null
+ */
+export function getTemplateOverride(templateId: string): Template | null {
+  if (!templateId) return null
+  try {
+    const raw = localStorage.getItem(`${OVERRIDE_PREFIX}${templateId}`)
+    return raw ? JSON.parse(raw) : null
+  } catch {
+    return null
+  }
+}
+
+/**
+ * 检查指定模板是否有本地覆盖
+ * 
+ * @param templateId - 模板 ID
+ * @returns 如果有覆盖返回 true，否则返回 false
+ */
+export function hasTemplateOverride(templateId: string): boolean {
+  return Boolean(getTemplateOverride(templateId))
+}
+
+/**
+ * 保存模板覆盖到本地存储
+ * 
+ * @param templateId - 模板 ID
+ * @param template - 要保存的模板对象
+ * @throws 如果 templateId 为空，抛出错误
+ */
+export function saveTemplateOverride(templateId: string, template: Template): void {
+  if (!templateId) throw new Error('缺少 template_id')
+  localStorage.setItem(
+    `${OVERRIDE_PREFIX}${templateId}`, 
+    JSON.stringify(template)
+  )
+}
+
+/**
+ * 清除指定模板的本地覆盖
+ * 
+ * @param templateId - 模板 ID
+ */
+export function clearTemplateOverride(templateId: string): void {
+  if (!templateId) return
+  localStorage.removeItem(`${OVERRIDE_PREFIX}${templateId}`)
+}
\ No newline at end of file
diff --git a/web-code/components/qa/types/index.ts b/web-code/components/qa/types/index.ts
new file mode 100644
index 00000000..becdd792
--- /dev/null
+++ b/web-code/components/qa/types/index.ts
@@ -0,0 +1,756 @@
+/**
+ * 全局类型定义文件
+ * 本文件定义了项目中使用的所有 TypeScript 类型和接口
+ * 包含组件 props、状态类型、API 响应类型等
+ */
+
+/**
+ * =============================================================================
+ * 智能体相关类型
+ * =============================================================================
+ */
+
+/**
+ * 智能体基本信息
+ * 描述一个智能体的标识和元数据
+ */
+export interface Agent {
+  /** 智能体唯一标识符 */
+  id: string;
+  /** 智能体显示名称 */
+  name: string;
+  /** 智能体所属的分析维度 */
+  dimension: string;
+  /** 专家角色描述或智能体提示词 */
+  expertise?: string;
+  /** 技能描述（与 expertise 类似） */
+  skill?: string;
+  /** 场景角色描述 */
+  scenario_role?: string;
+  /** 智能体描述 */
+  description?: string;
+  /** 该智能体负责的报告字段列表 */
+  relevant_fields?: string[];
+  /** 分析契约 - 智能体输出规则列表 */
+  analysis_contract?: string[];
+  /** 检索模式：always=总是检索, never=从不检索, smart=智能检索 */
+  retrieval_mode?: 'always' | 'never' | 'smart';
+  /** 允许检索的数据源 ID 列表 */
+  allowed_source_ids?: string[];
+  /** 检索补充说明 */
+  retrieval_instruction?: string;
+}
+
+/**
+ * 智能体状态
+ * 描述智能体在运行时的实时状态
+ */
+export interface AgentState {
+  /** 智能体唯一标识符 */
+  id: string;
+  /** 智能体显示名称 */
+  name: string;
+  /** 智能体所属的分析维度 */
+  dimension: string;
+  /** 当前状态：idle=空闲, thinking=思考中, done=已完成 */
+  status: 'idle' | 'thinking' | 'done';
+  /** 该智能体已完成的分析轮次列表 */
+  rounds: AgentRoundData[];
+}
+
+/**
+ * 智能体单轮分析数据
+ * 包含智能体在某一轮中的完整输出
+ */
+export interface AgentRoundData {
+  /** 轮次编号 */
+  round: number;
+  /** 所处阶段 */
+  phase: PhaseType;
+  /** 分析内容（Markdown 格式） */
+  content: string;
+  /** 思考过程（Markdown 格式） */
+  thinking: string;
+  /** 检索日志列表 */
+  retrievalLog: RetrievalLogItem[];
+  /** 检索次数 */
+  retrievalCount: number;
+  /** 引用映射表：将引用编号映射到实际数据源 ID */
+  referenceMap: Record<string, string>;
+  /** 额外元数据（可选） */
+  metadata?: Record<string, unknown>;
+  /** 维度输出 */
+  dimensionOutput?: Record<string, string>;
+}
+
+/**
+ * 检索日志条目
+ * 记录一次检索操作的详细信息
+ */
+export interface RetrievalLogItem {
+  /** 检索查询语句 */
+  query: string;
+  /** 数据源名称 */
+  source_name?: string;
+  /** 数据源 ID */
+  source_id?: string;
+  /** 数据源标识 */
+  source?: string;
+  /** 检索结果内容列表 */
+  content: (string | Record<string, unknown>)[];
+  /** 内容 ID 列表（用于关联 referenceMap） */
+  content_ids?: string[];
+  /** 该检索结果是否被智能体采用 */
+  adopted?: boolean;
+}
+
+/**
+ * =============================================================================
+ * 会话和状态相关类型
+ * =============================================================================
+ */
+
+/**
+ * 会话状态
+ * 描述整个应用的状态机状态
+ */
+export type SessionStatus = 
+  | 'idle'           // 空闲状态 - 初始状态，未开始会话
+  | 'running'        // 运行中 - 会话正在执行
+  | 'waiting_human'  // 等待人工确认 - 需要用户手动确认协调者提案
+  | 'done'           // 已完成 - 会话正常结束
+  | 'error';         // 错误状态 - 会话执行过程中发生错误
+
+/**
+ * 协调者模式
+ * 决定协调者如何推进会话
+ */
+export type CoordinatorMode = 
+  | 'auto'           // 自动模式 - 协调者自动推进，无需人工干预
+  | 'human_review';  // 人工确认模式 - 每轮协调者提案后需要人工确认
+
+/**
+ * 阶段类型
+ * 描述当前所处的分析阶段
+ */
+export type PhaseType = 
+  | 'starting'   // 启动阶段 - 第一轮，初始化分析
+  | 'diverging'  // 辩论阶段 - 多轮讨论，各智能体提供观点
+  | 'closing'    // 收敛阶段 - 协调者整合观点，形成结论
+  | 'final_report' // 最终报告生成阶段 - 协调者正在生成最终报告
+  | 'done';     // 完成阶段 - 最终报告生成完毕
+
+/**
+ * 时间线项目类型
+ * 描述时间线中不同类型的条目
+ */
+export type TimelineItemType = 
+  | 'round_start'              // 轮次开始标记
+  | 'agent_contribution'       // 智能体贡献内容
+  | 'coordinator_streaming'    // 协调者流式输出（思考中）
+  | 'coordinator'              // 协调者完整提案
+  | 'final_report'            // 最终报告
+  | 'background_retrieval';   // 背景检索结果
+
+/**
+ * =============================================================================
+ * 配置相关类型
+ * =============================================================================
+ */
+
+/**
+ * 阶段配置
+ * 控制不同阶段的参数
+ */
+export interface PhaseConfig {
+  /** 发散（辩论）轮次数量 */
+  diverge_rounds: number;
+}
+
+/**
+ * 协调者配置
+ * 包含协调者的各项提示词和规则
+ */
+export interface CoordinatorConfig {
+  /** 系统提示前缀 - 协调者的全局规则 */
+  system_prompt_prefix?: string;
+  /** 首轮策略指导 */
+  round1_guidance?: string;
+  /** 中间轮策略指导 */
+  middle_round_guidance?: string;
+  /** 末轮策略指导 */
+  final_round_guidance?: string;
+  /** 选人规则 - 如何选择下一轮发言的智能体 */
+  speaker_selection_rules?: string;
+  /** 任务指令规则 - 如何生成给智能体的任务 */
+  focus_instruction_rules?: string;
+  /** 依赖推进规则 - 如何处理字段间的依赖关系 */
+  dependency_driving_rules?: string;
+  /** 一致性/冲突检查规则 */
+  consistency_check_rules?: string;
+  /** 人工修改解释规则 - 如何解释协调者的修改 */
+  revise_prompt_prefix?: string;
+}
+
+/**
+ * 模板元数据
+ * 用于模板列表展示
+ */
+export interface TemplateMeta {
+  /** 模板唯一标识符 */
+  template_id: string;
+  /** 模板显示名称 */
+  template_name?: string;
+  /** 模板简短描述 */
+  template_brief?: string;
+  /** 模板文件名 */
+  file?: string;
+}
+
+/**
+ * 完整模板结构
+ * 包含模板的所有配置和数据
+ */
+export interface Template {
+  /** 模板唯一标识符 */
+  template_id: string;
+  /** 模板显示名称 */
+  template_name?: string;
+  /** 模板简短描述 */
+  template_brief?: string;
+  /** 模板详细说明 */
+  usage_notes?: string;
+  /** 报告结构定义 - 字段名到描述的映射 */
+  report_schema: Record<string, string>;
+  /** 报告示例 - 各字段的示例内容 */
+  report_examples?: Record<string, string>;
+  /** 字段要求 - 各字段的详细要求 */
+  field_requirements?: Record<string, FieldRequirement>;
+  /** 参与智能体列表 */
+  agents: Agent[];
+  /** 协调者配置 */
+  coordinator_config?: CoordinatorConfig;
+  /** 智能体适应策略 */
+  agent_adaptation_policy?: Record<string, unknown>;
+  /** 阶段配置 */
+  phase_config?: PhaseConfig;
+}
+
+/**
+ * 字段要求
+ * 描述某个报告字段的详细要求
+ */
+export interface FieldRequirement {
+  /** 字段名称 */
+  name?: string;
+  /** 字段描述 */
+  description?: string;
+  /** 是否必需 */
+  required?: boolean;
+  /** 内容类型期望 */
+  content_type?: string;
+  /** 最大长度 */
+  max_length?: number;
+  /** 其他元数据 */
+  [key: string]: unknown;
+}
+
+/**
+ * 应用配置
+ * 用户在开始会话时提供的完整配置
+ */
+export interface AppConfig {
+  /** 任务背景描述 */
+  task_context: string;
+  /** 模板 ID */
+  template_id?: string;
+  /** 模板名称 */
+  template_name?: string;
+  /** 模板简短描述 */
+  template_brief?: string;
+  /** 协调者模式 */
+  coordinator_mode?: CoordinatorMode;
+  /** 协调者配置 */
+  coordinator_config?: CoordinatorConfig;
+  /** 参与智能体列表 */
+  agents?: Agent[];
+  /** 阶段配置 */
+  phase_config?: PhaseConfig;
+  /** 报告结构 */
+  report_schema?: Record<string, string>;
+  /** 报告示例 */
+  report_examples?: Record<string, string>;
+  /** 字段要求 */
+  field_requirements?: Record<string, FieldRequirement>;
+  /** 智能体适应策略 */
+  agent_adaptation_policy?: Record<string, unknown>;
+  /** 检索配置 */
+  retrieval?: Record<string, unknown>;
+  /** 检索配置（别名，用于兼容） */
+  retrieve?: Record<string, unknown>;
+  /** 审核模式（别名，用于兼容） */
+  review_mode?: CoordinatorMode;
+}
+
+/**
+ * =============================================================================
+ * 时间线相关类型
+ * =============================================================================
+ */
+
+/**
+ * 时间线条目基类
+ */
+export interface TimelineItemBase {
+  /** 条目类型 */
+  type: TimelineItemType;
+  /** 条目索引（用于列表渲染的 key） */
+  idx?: number;
+}
+
+/**
+ * 轮次开始条目
+ * 标记新一轮的开始
+ */
+export interface RoundStartItem extends TimelineItemBase {
+  type: 'round_start';
+  /** 轮次编号 */
+  round: number;
+  /** 所处阶段 */
+  phase: PhaseType;
+  /** 该轮参与的所有智能体 ID 列表 */
+  agentIds?: string[];
+}
+
+/**
+ * 智能体贡献条目
+ * 包含智能体的完整分析输出
+ */
+export interface AgentContributionItem extends TimelineItemBase {
+  type: 'agent_contribution';
+  /** 智能体 ID */
+  agentId: string;
+  /** 轮次编号 */
+  round: number;
+  /** 所处阶段 */
+  phase: PhaseType;
+  /** 是否处于流式输出状态 */
+  streaming: boolean;
+  /** 智能体输出数据 */
+  data: AgentRoundData;
+}
+
+/**
+ * 协调者流式输出条目
+ * 协调者正在生成内容时的实时输出
+ */
+export interface CoordinatorStreamingItem extends TimelineItemBase {
+  type: 'coordinator_streaming';
+  /** 当前阶段 */
+  phase: PhaseType;
+  /** 当前辩论轮次 */
+  divergeRound?: number;
+  /** 总辩论轮次 */
+  totalDivergeRounds?: number;
+  /** 思考内容（流式输出中） */
+  thinking: string;
+  /** 输出内容（流式输出中） */
+  content: string;
+  /** 当前正在生成的字段名 */
+  currentField?: string | null;
+  /** 最终报告的已完成字段 */
+  reportPartial: Record<string, string>;
+}
+
+/**
+ * 协调者提案数据
+ * 协调者完成后的完整提案
+ */
+export interface CoordinatorProposalData {
+  /** 轮次编号 */
+  round: number;
+  /** 辩论轮次编号 */
+  divergeRound?: number;
+  /** 总辩论轮次 */
+  totalDivergeRounds?: number;
+  /** 下一轮发言的智能体 ID 列表 */
+  nextSpeakers: string[];
+  /** 任务指令映射 - 智能体 ID 到指令内容的映射 */
+  focus: Record<string, string>;
+  /** 当前草稿 */
+  draft: Record<string, string>;
+  /** 草稿更新内容 */
+  draftUpdates: Record<string, string>;
+  /** 当前识别的缺口/问题 */
+  gaps: string[];
+  /** 字段评估结果 */
+  fieldAssessment: Record<string, FieldAssessment>;
+  /** 推理过程 */
+  reasoning: string;
+  /** 原始提案对象 */
+  proposal: Record<string, unknown>;
+}
+
+/**
+ * 字段评估
+ * 对某个报告字段的完成度评估
+ */
+export interface FieldAssessment {
+  /** 字段状态：filled=已完成, partial=部分完成, blocked=受阻, empty=未开始 */
+  status: 'filled' | 'partial' | 'blocked' | 'empty';
+  /** 阻塞原因（如果状态为 blocked） */
+  blocking_reason?: string;
+  /** 其他评估信息 */
+  [key: string]: unknown;
+}
+
+/**
+ * 协调者条目
+ * 协调者的完整提案
+ */
+export interface CoordinatorItem extends TimelineItemBase {
+  type: 'coordinator';
+  /** 协调者提案数据 */
+  data: CoordinatorProposalData;
+  /** 协调者的思考过程 */
+  thinking?: string;
+}
+
+/**
+ * 最终报告数据
+ */
+export interface FinalReportData {
+  /** 最终报告内容 - 字段名到内容的映射 */
+  report: Record<string, string>;
+  /** 各维度的详细分析 */
+  dimensions: Record<string, unknown>;
+  /** 报告元数据 */
+  meta: Record<string, unknown>;
+}
+
+/**
+ * 维度数据
+ * 某个分析维度的详细输出
+ */
+export interface DimensionData {
+  /** 维度标签 */
+  label?: string;
+  /** 最新分析内容 */
+  latest_analysis?: string;
+  /** 其他维度数据 */
+  [key: string]: unknown;
+}
+
+/**
+ * 最终报告条目
+ */
+export interface FinalReportItem extends TimelineItemBase {
+  type: 'final_report';
+  /** 最终报告数据 */
+  data: FinalReportData;
+}
+
+/**
+ * 背景检索数据
+ */
+export interface BackgroundRetrievalData {
+  /** 检索结果 - 维度到结果条目的映射 */
+  results: Record<string, RetrievalResultEntry[]>;
+  /** 涉及的维度列表 */
+  dimensions?: string[];
+  /** 总记录数 */
+  total_records?: number;
+}
+
+/**
+ * 检索结果条目
+ */
+export interface RetrievalResultEntry {
+  /** 检索查询 */
+  query?: string;
+  /** 检索结果内容 */
+  content: (string | Record<string, unknown>)[];
+}
+
+/**
+ * 背景检索条目
+ */
+export interface BackgroundRetrievalItem extends TimelineItemBase {
+  type: 'background_retrieval';
+  /** 检索数据 */
+  data: BackgroundRetrievalData;
+}
+
+/**
+ * 联合类型：所有可能的时间线条目
+ */
+export type AnyTimelineItem = 
+  | RoundStartItem 
+  | AgentContributionItem 
+  | CoordinatorStreamingItem 
+  | CoordinatorItem 
+  | FinalReportItem 
+  | BackgroundRetrievalItem;
+
+/**
+ * =============================================================================
+ * API 和事件相关类型
+ * =============================================================================
+ */
+
+/**
+ * SSE 事件解析结果
+ * 从后端 SSE 流中解析出的事件
+ */
+export interface SseEvent {
+  /** 事件类型 */
+  event: string;
+  /** 事件数据 */
+  data: Record<string, unknown>;
+}
+
+/**
+ * 待审核提案
+ * 需要人工确认的协调者提案
+ */
+export interface PendingReview {
+  /** 轮次编号 */
+  divergeRound: number;
+  /** 总辩论轮次 */
+  totalDivergeRounds: number;
+  /** 下一轮发言的智能体 ID 列表 */
+  nextSpeakers: string[];
+  /** 任务指令 */
+  focus: Record<string, string>;
+  /** 当前草稿 */
+  draft: Record<string, string>;
+  /** 当前缺口 */
+  gaps: string[];
+  /** 原始提案 */
+  proposal: Record<string, unknown>;
+}
+
+/**
+ * 人工确认操作的载荷
+ */
+export interface HumanReviewPayload {
+  /** 下一轮发言的智能体 ID 列表 */
+  nextSpeakers: string[];
+  /** 任务指令 */
+  focus: Record<string, string>;
+  /** 草稿更新 */
+  draft: Record<string, string>;
+  /** 缺口列表 */
+  gaps: string[];
+}
+
+/**
+ * 会话状态类型
+ * 整个应用的状态对象
+ */
+export interface SessionState {
+  /** 会话状态 */
+  status: SessionStatus;
+  /** 会话 ID */
+  sessionId: string | null;
+  /** 后端服务器地址 */
+  backendUrl: string;
+  /** 协调者模式 */
+  coordinatorMode: CoordinatorMode;
+  /** 当前阶段 */
+  phase: PhaseType | null;
+  /** 当前轮次 */
+  currentRound: number;
+  /** 总轮次数 */
+  totalRounds: number;
+  /** 辩论轮次数 */
+  divergeRounds: number;
+  /** 报告结构定义 */
+  reportSchema: Record<string, string>;
+  /** 参与会话的智能体列表 */
+  agents: Agent[];
+  /** 智能体状态映射 */
+  agentStates: Record<string, AgentState>;
+  /** 协调者更新历史 */
+  coordinatorUpdates: CoordinatorProposalData[];
+  /** 最新草稿 */
+  latestDraft: Record<string, string>;
+  /** 背景检索数据 */
+  backgroundRetrieval: BackgroundRetrievalData | null;
+  /** 最终报告 */
+  finalReport: FinalReportData | null;
+  /** 最终报告已完成字段 */
+  finalReportPartial: Record<string, string>;
+  /** 当前正在生成的最终报告字段 */
+  currentFinalField: string | null;
+  /** 待人工确认的提案 */
+  pendingReview: PendingReview | null;
+  /** 是否正在提交人工确认 */
+  reviewSubmitting: boolean;
+  /** 是否正在等待协调者修改 */
+  reviewRevising: boolean;
+  /** 错误列表 */
+  errors: ErrorRecord[];
+  /** 时间线条目列表 */
+  timeline: AnyTimelineItem[];
+}
+
+/**
+ * 错误记录
+ */
+export interface ErrorRecord {
+  /** 错误消息 */
+  error: string;
+  /** 发生错误的智能体 ID */
+  agent_id?: string;
+  /** 其他错误数据 */
+  [key: string]: unknown;
+}
+
+/**
+ * =============================================================================
+ * 组件 Props 类型
+ * =============================================================================
+ */
+
+/**
+ * ConfigPanel 组件的 Props
+ */
+export interface ConfigPanelProps {
+  /** 开始会话回调 */
+  onStart: (config: AppConfig, backendUrl: string) => void;
+  /** 是否正在运行 */
+  isRunning: boolean;
+  /** 停止会话回调 */
+  onStop: () => void;
+  /** 打开场景配置页回调 */
+  onOpenScenarioConfig: () => void;
+}
+
+/**
+ * Sidebar 组件的 Props
+ */
+export interface SidebarProps {
+  /** 智能体列表 */
+  agents: Agent[];
+  /** 智能体状态映射 */
+  agentStates: Record<string, AgentState>;
+  /** 当前阶段 */
+  phase: PhaseType | null;
+  /** 当前轮次 */
+  currentRound: number;
+  /** 辩论轮次数 */
+  divergeRounds: number;
+  /** 总轮次数 */
+  totalRounds: number;
+}
+
+/**
+ * Timeline 组件的 Props
+ */
+export interface TimelineProps {
+  /** 时间线条目列表 */
+  timeline: AnyTimelineItem[];
+  /** 智能体状态映射 */
+  agentStates: Record<string, AgentState>;
+  /** 报告结构定义 */
+  reportSchema: Record<string, string>;
+  /** 待审核提案 */
+  pendingReview: PendingReview | null;
+  /** 审核通过回调 */
+  onApproveReview: (payload: HumanReviewPayload) => Promise<void>;
+  /** 审核修改回调 */
+  onReviseReview: (instruction: string) => Promise<void>;
+  /** 是否正在提交审核 */
+  reviewSubmitting: boolean;
+  /** 是否正在修改 */
+  reviewRevising: boolean;
+}
+
+/**
+ * AgentCard 组件的 Props
+ */
+export interface AgentCardProps {
+  /** 智能体 ID */
+  agentId: string;
+  /** 智能体名称 */
+  agentName: string;
+  /** 分析维度 */
+  dimension: string;
+  /** 当前轮次 */
+  round: number;
+  /** 当前阶段 */
+  phase: PhaseType;
+  /** 分析内容 */
+  content: string;
+  /** 思考过程 */
+  thinking: string;
+  /** 维度输出 */
+  dimensionOutput?: Record<string, string>;
+  /** 检索日志 */
+  retrievalLog?: RetrievalLogItem[];
+  /** 检索次数 */
+  retrievalCount?: number;
+  /** 引用映射表 */
+  referenceMap?: Record<string, string>;
+  /** 是否处于流式输出状态 */
+  streaming?: boolean;
+}
+
+/**
+ * ProgressSidebar 组件的 Props
+ */
+export interface ProgressSidebarProps {
+  /** 当前阶段 */
+  phase: PhaseType | null;
+  /** 会话状态 */
+  status: SessionStatus;
+  /** 当前轮次 */
+  currentRound: number;
+  /** 辩论轮次数 */
+  divergeRounds: number;
+  /** 报告结构定义 */
+  reportSchema: Record<string, string>;
+  /** 协调者更新历史 */
+  coordinatorUpdates: CoordinatorProposalData[];
+  /** 待审核提案 */
+  pendingReview: PendingReview | null;
+  /** 最新草稿 */
+  latestDraft: Record<string, string>;
+  /** 最终报告已完成字段 */
+  finalReportPartial: Record<string, string>;
+  /** 当前正在生成的字段 */
+  currentFinalField: string | null;
+  /** 智能体状态映射 */
+  agentStates: Record<string, AgentState>;
+}
+
+/**
+ * FinalReport 组件的 Props
+ */
+export interface FinalReportProps {
+  /** 最终报告输出数据 */
+  output: FinalReportData;
+  /** 报告结构定义 */
+  reportSchema: Record<string, string>;
+}
+
+/**
+ * MarkdownContent 组件的 Props
+ */
+export interface MarkdownContentProps {
+  /** Markdown 内容字符串 */
+  content: string;
+  /** 引用映射表（用于高亮引用标记） */
+  referenceMap?: Record<string, string>;
+  /** 额外的 CSS 类名 */
+  className?: string;
+}
+
+/**
+ * ScenarioConfigPage 组件的 Props
+ */
+export interface ScenarioConfigPageProps {
+  /** 返回上一页回调 */
+  onBack: () => void;
+}
\ No newline at end of file
diff --git a/web-code/components/result/ResultDq.tsx b/web-code/components/result/ResultDq.tsx
new file mode 100644
index 00000000..524b3262
--- /dev/null
+++ b/web-code/components/result/ResultDq.tsx
@@ -0,0 +1,10 @@
+import ResultManagement from './ResultManagement';
+import { PageType } from '@/components/Sidebar';
+
+interface ResultDqProps {
+  onNavigate: (page: PageType, taskId?: string) => void;
+}
+
+export default function ResultDq({ onNavigate }: ResultDqProps) {
+  return <ResultManagement onNavigate={onNavigate} initialCategory="dq-research" />;
+}
diff --git a/web-code/components/result/ResultEffectPg.tsx b/web-code/components/result/ResultEffectPg.tsx
new file mode 100644
index 00000000..df451d8d
--- /dev/null
+++ b/web-code/components/result/ResultEffectPg.tsx
@@ -0,0 +1,10 @@
+import ResultManagement from './ResultManagement';
+import { PageType } from '@/components/Sidebar';
+
+interface ResultEffectPgProps {
+  onNavigate: (page: PageType, taskId?: string) => void;
+}
+
+export default function ResultEffectPg({ onNavigate }: ResultEffectPgProps) {
+  return <ResultManagement onNavigate={onNavigate} initialCategory="effect-pg" />;
+}
diff --git a/web-code/components/result/ResultManagement.tsx b/web-code/components/result/ResultManagement.tsx
new file mode 100644
index 00000000..fcd80f08
--- /dev/null
+++ b/web-code/components/result/ResultManagement.tsx
@@ -0,0 +1,413 @@
+import React, { useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import {
+  FileText,
+  Search,
+  Download,
+  Edit3,
+  Clock,
+  CheckCircle,
+  Target,
+  Brain,
+  TrendingUp,
+  Compass,
+  Database,
+  MoreHorizontal,
+  Send,
+} from 'lucide-react';
+import { useTheme } from '@/contexts/ThemeContext';
+import { PageType } from '@/components/Sidebar';
+
+type ResultCategory = 'planning' | 'mnty' | 'effect-pg' | 'xk' | 'dq-research' | 'other';
+
+interface ResultTask {
+  id: string;
+  title: string;
+  category: ResultCategory;
+  subCategory: string;
+  status: 'completed' | 'pending' | 'draft';
+  createdAt: string;
+  updatedAt: string;
+  reportType: 'strategy' | 'consult' | 'analysis' | 'summary';
+  agentCount: number;
+  description: string;
+}
+
+interface ResultManagementProps {
+  onNavigate: (page: PageType, taskId?: string) => void;
+  initialCategory: ResultCategory;
+}
+
+// 任务类别配置
+const categoryConfig: Record<ResultCategory, { label: string; icon: React.ElementType; color: string; subCategories: string[] }> = {
+  'planning': {
+    label: '规划任务',
+    icon: Target,
+    color: 'blue',
+    subCategories: ['目标分析', '品牌策略', '内容规划', '渠道规划', '叙事策略']
+  },
+  'mnty': {
+    label: 'MNTY任务',
+    icon: Brain,
+    color: 'purple',
+    subCategories: ['机制研究', '方案设计', 'ZSTY分析']
+  },
+  'effect-pg': {
+    label: '效果PG任务',
+    icon: TrendingUp,
+    color: 'amber',
+    subCategories: ['行为PG', '效果评估', '信息PG', '账号PG']
+  },
+  'xk': {
+    label: 'XK任务',
+    icon: Compass,
+    color: 'cyan',
+    subCategories: ['任务JC', '任务调度']
+  },
+  'dq-research': {
+    label: 'DQ研究类任务',
+    icon: Database,
+    color: 'green',
+    subCategories: ['受众分析', '知识库研究', '趋势研究']
+  },
+  'other': {
+    label: '其他类任务',
+    icon: MoreHorizontal,
+    color: 'slate',
+    subCategories: ['通用分析', '临时任务', '其他']
+  }
+};
+
+// 模拟任务数据
+const mockTasks: ResultTask[] = [
+  {
+    id: 'task-001',
+    title: '五四青年节宣传活动策略',
+    category: 'planning',
+    subCategory: '叙事策略',
+    status: 'completed',
+    createdAt: '2026-03-19 10:30',
+    updatedAt: '2026-03-19 15:30',
+    reportType: 'strategy',
+    agentCount: 6,
+    description: '针对五四青年节的品牌传播策略方案'
+  },
+  {
+    id: 'task-002',
+    title: '品牌年轻化受众分析',
+    category: 'dq-research',
+    subCategory: '受众分析',
+    status: 'completed',
+    createdAt: '2026-03-18 14:20',
+    updatedAt: '2026-03-18 16:45',
+    reportType: 'analysis',
+    agentCount: 3,
+    description: '分析Z世代用户的消费行为和品牌偏好'
+  },
+  {
+    id: 'task-003',
+    title: 'UGC激励机制设计',
+    category: 'effect-pg',
+    subCategory: '效果评估',
+    status: 'completed',
+    createdAt: '2026-03-17 09:00',
+    updatedAt: '2026-03-17 11:20',
+    reportType: 'strategy',
+    agentCount: 4,
+    description: '设计用户生成内容激励机制方案'
+  },
+  {
+    id: 'task-004',
+    title: '短视频平台效果预测',
+    category: 'mnty',
+    subCategory: '方案设计',
+    status: 'pending',
+    createdAt: '2026-03-20 08:00',
+    updatedAt: '2026-03-20 08:00',
+    reportType: 'consult',
+    agentCount: 5,
+    description: '预测不同短视频平台的传播效果'
+  },
+  {
+    id: 'task-005',
+    title: '活动传播风险评估',
+    category: 'planning',
+    subCategory: '目标分析',
+    status: 'draft',
+    createdAt: '2026-03-20 10:00',
+    updatedAt: '2026-03-20 10:30',
+    reportType: 'analysis',
+    agentCount: 2,
+    description: '评估五四活动可能面临的传播风险'
+  },
+  {
+    id: 'task-006',
+    title: '竞品营销策略研究',
+    category: 'dq-research',
+    subCategory: '趋势研究',
+    status: 'completed',
+    createdAt: '2026-03-16 13:00',
+    updatedAt: '2026-03-16 18:00',
+    reportType: 'analysis',
+    agentCount: 3,
+    description: '分析主要竞品的营销策略和效果'
+  },
+];
+
+const ResultManagement: React.FC<ResultManagementProps> = ({ onNavigate, initialCategory }) => {
+  const { theme } = useTheme();
+  const [searchParams] = useSearchParams();
+  const isDark = theme === 'dark';
+
+  // 主题颜色类
+  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
+  const cardBorder = isDark ? 'border-blue-800/30' : 'border-gray-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const textMuted = isDark ? 'text-slate-500' : 'text-gray-500';
+  const btnSecondary = isDark ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300' : 'bg-gray-100 hover:bg-gray-200 border-gray-300 text-gray-700';
+  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-gray-50';
+  const inputBorder = isDark ? 'border-blue-800/30' : 'border-gray-300';
+
+  // 状态
+  const selectedCategory = initialCategory;
+  const selectedSubCategory = searchParams.get('subCategory');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState<'all' | 'completed' | 'pending' | 'draft'>('all');
+
+  // 过滤任务
+  const filteredTasks = mockTasks.filter(task => {
+    const matchesCategory = task.category === selectedCategory;
+    const matchesSubCategory = !selectedSubCategory || task.subCategory === selectedSubCategory;
+    const matchesSearch = !searchQuery ||
+      task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      task.description.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesStatus = statusFilter === 'all' || task.status === statusFilter;
+    return matchesCategory && matchesSubCategory && matchesSearch && matchesStatus;
+  });
+
+  // 获取状态样式
+  const getStatusStyle = (status: ResultTask['status']) => {
+    switch (status) {
+      case 'completed':
+        return {
+          bg: isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-700',
+          icon: CheckCircle,
+          label: '已完成'
+        };
+      case 'pending':
+        return {
+          bg: isDark ? 'bg-yellow-500/20 text-yellow-400' : 'bg-yellow-100 text-yellow-700',
+          icon: Clock,
+          label: '进行中'
+        };
+      case 'draft':
+        return {
+          bg: isDark ? 'bg-slate-500/20 text-slate-400' : 'bg-gray-100 text-gray-700',
+          icon: Edit3,
+          label: '草稿'
+        };
+    }
+  };
+
+  // 获取报告类型样式
+  const getReportTypeStyle = (type: ResultTask['reportType']) => {
+    const styles = {
+      'strategy': { color: 'blue', label: '策略报告' },
+      'consult': { color: 'purple', label: '会商报告' },
+      'analysis': { color: 'cyan', label: '分析报告' },
+      'summary': { color: 'green', label: '总结报告' }
+    };
+    return styles[type];
+  };
+
+  // 查看任务详情
+  const handleViewDetail = (taskId: string) => {
+    onNavigate('result-detail', taskId);
+  };
+
+  const currentCategoryConfig = categoryConfig[selectedCategory];
+  const CategoryIcon = currentCategoryConfig.icon;
+
+  return (
+    <div className="h-full flex">
+      <div className="flex-1 flex flex-col min-w-0">
+        {/* 顶部工具栏 */}
+        <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4 mb-4`}>
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-3">
+              <div className={`w-10 h-10 rounded-xl bg-${currentCategoryConfig.color}-500/20 flex items-center justify-center`}>
+                <CategoryIcon className={`w-5 h-5 text-${currentCategoryConfig.color}-400`} />
+              </div>
+              <div>
+                <h2 className={`${textPrimary} font-semibold`}>
+                  {selectedSubCategory || currentCategoryConfig.label}
+                </h2>
+                <p className={`${textMuted} text-xs`}>
+                  共 {filteredTasks.length} 个结果
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <button className={`flex items-center gap-2 px-3 py-2 rounded-lg ${btnSecondary} text-sm`}>
+                <Download className="w-4 h-4" />
+                批量导出
+              </button>
+            </div>
+          </div>
+
+          {/* 搜索和筛选 */}
+          <div className="flex items-center gap-3">
+            <div className={`flex-1 relative ${inputBg} rounded-lg`}>
+              <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${textMuted}`} />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="搜索任务标题或描述..."
+                className={`w-full pl-10 pr-4 py-2.5 rounded-lg text-sm bg-transparent focus:outline-none ${
+                  isDark ? 'text-white placeholder-slate-500' : 'text-gray-800 placeholder-gray-400'
+                }`}
+              />
+            </div>
+            <select
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value as typeof statusFilter)}
+              className={`px-3 py-2.5 rounded-lg text-sm ${inputBg} ${inputBorder} focus:outline-none ${
+                isDark ? 'text-slate-300' : 'text-gray-700'
+              }`}
+            >
+              <option value="all">全部状态</option>
+              <option value="completed">已完成</option>
+              <option value="pending">进行中</option>
+              <option value="draft">草稿</option>
+            </select>
+          </div>
+        </div>
+
+        {/* 任务列表 */}
+        <div className={`flex-1 ${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl overflow-hidden`}>
+          {filteredTasks.length === 0 ? (
+            <div className="h-full flex flex-col items-center justify-center">
+              <FileText className={`w-16 h-16 ${textMuted} mb-4`} />
+              <p className={`${textSecondary} text-lg`}>暂无结果</p>
+              <p className={`${textMuted} text-sm mt-1`}>在对应任务中生成结果后，将在此显示</p>
+            </div>
+          ) : (
+            <div className="h-full overflow-y-auto custom-scrollbar">
+              <table className="w-full">
+                <thead className={`sticky top-0 ${isDark ? 'bg-slate-800/80' : 'bg-gray-50'}`}>
+                  <tr className={`text-xs ${textMuted} border-b ${cardBorder}`}>
+                    <th className="text-left font-medium px-4 py-3">任务名称</th>
+                    <th className="text-left font-medium px-4 py-3">报告类型</th>
+                    <th className="text-left font-medium px-4 py-3">智能体数</th>
+                    <th className="text-left font-medium px-4 py-3">状态</th>
+                    <th className="text-left font-medium px-4 py-3">更新时间</th>
+                    <th className="text-left font-medium px-4 py-3">操作</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredTasks.map((task) => {
+                    const statusInfo = getStatusStyle(task.status);
+                    const StatusIcon = statusInfo.icon;
+                    const reportTypeInfo = getReportTypeStyle(task.reportType);
+
+                    return (
+                      <tr
+                        key={task.id}
+                        className={`border-b cursor-pointer hover:${
+                          isDark ? 'bg-slate-700/30' : 'bg-gray-50'
+                        } transition-colors ${cardBorder}`}
+                        onClick={() => handleViewDetail(task.id)}
+                      >
+                        <td className="px-4 py-4">
+                          <div className="flex items-center gap-3">
+                            <div className={`w-10 h-10 rounded-lg bg-${reportTypeInfo.color}-500/20 flex items-center justify-center flex-shrink-0`}>
+                              <FileText className={`w-5 h-5 text-${reportTypeInfo.color}-400`} />
+                            </div>
+                            <div className="min-w-0">
+                              <p className={`${textPrimary} text-sm font-medium truncate`}>{task.title}</p>
+                              <p className={`${textMuted} text-xs truncate`}>{task.description}</p>
+                            </div>
+                          </div>
+                        </td>
+                        <td className="px-4 py-4">
+                          <span className={`px-2 py-1 rounded-lg text-xs font-medium ${
+                            isDark ? `bg-${reportTypeInfo.color}-500/20 text-${reportTypeInfo.color}-400` : `bg-${reportTypeInfo.color}-100 text-${reportTypeInfo.color}-700`
+                          }`}>
+                            {reportTypeInfo.label}
+                          </span>
+                        </td>
+                        <td className="px-4 py-4">
+                          <span className={`${textSecondary} text-sm`}>{task.agentCount}</span>
+                        </td>
+                        <td className="px-4 py-4">
+                          <span className={`inline-flex items-center gap-1.5 px-2 py-1 rounded-lg text-xs font-medium ${statusInfo.bg}`}>
+                            <StatusIcon className="w-3 h-3" />
+                            {statusInfo.label}
+                          </span>
+                        </td>
+                        <td className="px-4 py-4">
+                          <span className={`${textMuted} text-sm`}>{task.updatedAt}</span>
+                        </td>
+                        <td className="px-4 py-4" onClick={(e) => e.stopPropagation()}>
+                          <div className="flex items-center gap-1">
+                            <button
+                              onClick={() => handleViewDetail(task.id)}
+                              className={`p-1.5 rounded-lg hover:${isDark ? 'bg-slate-700' : 'bg-gray-100'} transition-colors`}
+                              title="查看详情"
+                            >
+                              <FileText className={`w-4 h-4 ${textSecondary}`} />
+                            </button>
+                            <button
+                              className={`p-1.5 rounded-lg hover:${isDark ? 'bg-slate-700' : 'bg-gray-100'} transition-colors`}
+                              title="编辑"
+                            >
+                              <Edit3 className={`w-4 h-4 ${textSecondary}`} />
+                            </button>
+                            <button
+                              className={`p-1.5 rounded-lg hover:${isDark ? 'bg-slate-700' : 'bg-gray-100'} transition-colors`}
+                              title="下载"
+                            >
+                              <Download className={`w-4 h-4 ${textSecondary}`} />
+                            </button>
+                            <button
+                              className={`p-1.5 rounded-lg hover:${isDark ? 'bg-slate-700' : 'bg-gray-100'} transition-colors`}
+                              title="呈报"
+                            >
+                              <Send className={`w-4 h-4 ${textSecondary}`} />
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 自定义滚动条样式 */}
+      <style>{`
+        .custom-scrollbar::-webkit-scrollbar {
+          width: 6px;
+          height: 6px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+          background: ${isDark ? 'rgba(148, 163, 184, 0.3)' : 'rgba(0, 0, 0, 0.15)'};
+          border-radius: 3px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+          background: ${isDark ? 'rgba(148, 163, 184, 0.5)' : 'rgba(0, 0, 0, 0.25)'};
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default ResultManagement;
diff --git a/web-code/components/result/ResultManagementLayout.tsx b/web-code/components/result/ResultManagementLayout.tsx
new file mode 100644
index 00000000..db647607
--- /dev/null
+++ b/web-code/components/result/ResultManagementLayout.tsx
@@ -0,0 +1,5 @@
+import { Outlet } from 'react-router-dom';
+
+export default function ResultManagementLayout() {
+  return <Outlet />;
+}
\ No newline at end of file
diff --git a/web-code/components/result/ResultMnty.tsx b/web-code/components/result/ResultMnty.tsx
new file mode 100644
index 00000000..cb045199
--- /dev/null
+++ b/web-code/components/result/ResultMnty.tsx
@@ -0,0 +1,10 @@
+import ResultManagement from './ResultManagement';
+import { PageType } from '@/components/Sidebar';
+
+interface ResultMntyProps {
+  onNavigate: (page: PageType, taskId?: string) => void;
+}
+
+export default function ResultMnty({ onNavigate }: ResultMntyProps) {
+  return <ResultManagement onNavigate={onNavigate} initialCategory="mnty" />;
+}
diff --git a/web-code/components/result/ResultOther.tsx b/web-code/components/result/ResultOther.tsx
new file mode 100644
index 00000000..63a92712
--- /dev/null
+++ b/web-code/components/result/ResultOther.tsx
@@ -0,0 +1,10 @@
+import ResultManagement from './ResultManagement';
+import { PageType } from '@/components/Sidebar';
+
+interface ResultOtherProps {
+  onNavigate: (page: PageType, taskId?: string) => void;
+}
+
+export default function ResultOther({ onNavigate }: ResultOtherProps) {
+  return <ResultManagement onNavigate={onNavigate} initialCategory="other" />;
+}
diff --git a/web-code/components/result/ResultPlanning.tsx b/web-code/components/result/ResultPlanning.tsx
new file mode 100644
index 00000000..0947b19d
--- /dev/null
+++ b/web-code/components/result/ResultPlanning.tsx
@@ -0,0 +1,10 @@
+import ResultManagement from './ResultManagement';
+import { PageType } from '@/components/Sidebar';
+
+interface ResultPlanningProps {
+  onNavigate: (page: PageType, taskId?: string) => void;
+}
+
+export default function ResultPlanning({ onNavigate }: ResultPlanningProps) {
+  return <ResultManagement onNavigate={onNavigate} initialCategory="planning" />;
+}
diff --git a/web-code/components/result/ResultXk.tsx b/web-code/components/result/ResultXk.tsx
new file mode 100644
index 00000000..d06a0387
--- /dev/null
+++ b/web-code/components/result/ResultXk.tsx
@@ -0,0 +1,10 @@
+import ResultManagement from './ResultManagement';
+import { PageType } from '@/components/Sidebar';
+
+interface ResultXkProps {
+  onNavigate: (page: PageType, taskId?: string) => void;
+}
+
+export default function ResultXk({ onNavigate }: ResultXkProps) {
+  return <ResultManagement onNavigate={onNavigate} initialCategory="xk" />;
+}
diff --git a/web-code/components/square/AppCard.tsx b/web-code/components/square/AppCard.tsx
new file mode 100644
index 00000000..905901ef
--- /dev/null
+++ b/web-code/components/square/AppCard.tsx
@@ -0,0 +1,150 @@
+import { Edit, PlayCircle, Trash2 } from "lucide-react";
+import React, { useState, useMemo, useEffect } from "react";
+import { Popconfirm } from "tdesign-react";
+import { requestCrudService } from "@/service/request-axios-service";
+import { format } from "date-fns";
+import logoSvg from "@/assets/icon/轻应用logo-DB.svg";
+interface analysisListItem {
+  id: number;
+  categoryName: string;
+  category: string;
+  appName: string;
+  appDesc: string;
+  appIcon: string;
+  jumpUrl: string;
+  appType: number;
+}
+
+const service = requestCrudService;
+const zncmUrl = import.meta.env.VITE_API_BASE_URL || "";
+export const AppCard: React.FC<{
+  app: analysisListItem;
+  isDark: boolean;
+  hoverColor: string;
+  btnClass: string;
+  delDataChange: (item: analysisListItem) => void;
+  editShowChange: (item: analysisListItem) => void;
+}> = ({ app, isDark, hoverColor, btnClass, delDataChange, editShowChange }) => {
+  const listDataChange = (item: analysisListItem) => {
+    historyCreateSearch(item);
+    // if (item.appType === 1) {
+    //   internalDataChange(item);
+    // } else if (item.appType === 2) {
+    //   externalDataChange(item);
+    // }
+  };
+
+  const internalDataChange = (item: analysisListItem) => {
+    // 内部接口跳转
+  };
+
+  const externalDataChange = (item: analysisListItem) => {
+    // 外部应用接口跳转
+    window.open(item.jumpUrl);
+  };
+
+  const handleConfirm = (item: analysisListItem) => {
+    // 确认删除逻辑
+    console.log("用户点击了确认");
+    delDataChange(item);
+    return true; // 返回 true 表示确认执行
+  };
+
+  const handleCancel = () => {
+    // 取消删除逻辑
+    console.log("用户点击了取消");
+    return true; // 返回 true 表示取消
+  };
+
+  const historyCreateSearch = async (item: analysisListItem) => {
+    const time = format(new Date(), "yyyy-MM-dd HH:mm:ss");
+    console.log("time", time);
+    const param = {
+      appId: item.id,
+      appName: item.appName,
+      runTime: time,
+    };
+    const res = await service.post(`${zncmUrl}/app/history/create`, param);
+    console.log("res", res);
+  };
+
+  return (
+    <div
+      className={`rounded-xl border p-5 transition-all relative duration-200 hover:shadow-lg group ${
+        isDark
+          ? "bg-slate-800/50 border-slate-700 hover:border-slate-600"
+          : "bg-white border-gray-200 hover:border-gray-300"
+      }`}
+    >
+      {/* 头部信息 */}
+      <div className="flex items-start gap-4 mb-4">
+        <div className="rounded-lg overflow-hidden flex-shrink-0">
+          <img
+            className="w-[47px] h-[47px] object-cover"
+            src={app.appIcon}
+            alt={app.appName}
+            onError={(e) => {
+              const target = e.target as HTMLImageElement;
+              target.src = logoSvg;
+            }}
+          />
+        </div>
+        <div className="flex-1 min-w-0">
+          <h3
+            className={`font-semibold truncate transition-colors ${hoverColor} ${
+              isDark ? "text-white" : "text-gray-900"
+            }`}
+          >
+            {app.appName}
+          </h3>
+          <p
+            className={`mt-1 text-sm line-clamp-2 ${
+              isDark ? "text-slate-400" : "text-gray-500"
+            }`}
+          >
+            {app.appDesc}
+          </p>
+        </div>
+        <div className="absolute right-[10px] top-[10px] flex items-center cursor-pointer opacity-100 group-hover:opacity-100 transition-opacity">
+          <Edit
+            className="w-4 h-4 text-[gray] mr-[10px]"
+            onClick={() => editShowChange(app)}
+          ></Edit>
+          <Popconfirm
+            content="确认删除吗"
+            onConfirm={() => handleConfirm(app)}
+            onCancel={handleCancel}
+          >
+            <div>
+              <Trash2 className="w-4 h-4 text-[#ce2d39]"></Trash2>
+            </div>
+          </Popconfirm>
+        </div>
+      </div>
+      {/* 输入输出信息 */}
+      <div
+        className={`text-xs space-y-1 mb-4 ${
+          isDark ? "text-slate-500" : "text-gray-400"
+        }`}
+      >
+        <div className="flex items-start gap-2">
+          <span className="font-medium">输入：</span>
+          <span>信息文本/链接/素材</span>
+        </div>
+        <div className="flex items-start gap-2">
+          <span className="font-medium">输出：</span>
+          <span>信息特征、重点摘要、分析判断</span>
+        </div>
+      </div>
+
+      {/* 按钮 */}
+      <button
+        className={`w-full py-2.5 rounded-lg font-medium flex items-center justify-center gap-2 transition-all border ${btnClass}`}
+        onClick={() => listDataChange(app)}
+      >
+        <PlayCircle className="w-4 h-4" />
+        立即使用
+      </button>
+    </div>
+  );
+};
diff --git a/web-code/components/taskManagement/ActionAnalyzes.tsx b/web-code/components/taskManagement/ActionAnalyzes.tsx
new file mode 100644
index 00000000..e2a70f3a
--- /dev/null
+++ b/web-code/components/taskManagement/ActionAnalyzes.tsx
@@ -0,0 +1,209 @@
+import { useTheme } from '@/contexts/ThemeContext';
+import { actionColumnItem, ActionListItem, TaskListItem, taskStatusList } from '@/pages/TaskManagement';
+import { Bot, ChevronRight, Download, Edit, Eye, FileText, Layers, MoreHorizontal, Play, Search, User, Users, Workflow } from 'lucide-react';
+import React, { useEffect, useRef, useState } from 'react';
+import { PageType } from '../Sidebar';
+import { format } from 'date-fns';
+import { useNavigate } from 'react-router-dom';
+import { Col, Empty, Loading, Pagination, Progress, Row } from 'tdesign-react';
+import { requestCrudService } from '@/service/request-axios-service';
+import { ActionColumn } from './ActionColumn';
+
+interface ActionAnalyzesProps {
+  TaskType?: string;
+  title: string;
+  category: string;
+  subCategory: string;
+  onNavigate: (page: PageType) => void;
+}
+
+const service = requestCrudService;
+const zncmUrl = import.meta.env.VITE_API_BASE_URL || '';
+export const ActionAnalyzes: React.FC<ActionAnalyzesProps> = ({ title, category, subCategory, onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  // 主题颜色变量
+  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
+  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-100';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const textMuted = isDark ? 'text-slate-500' : 'text-gray-400';
+  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-white';
+  const navigate = useNavigate();
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [taskList, setTaskList] = useState<TaskListItem[]>([]); // 任务列表
+  const [taskId, setTaskId] = useState<number>(0); // 任务
+  const [actionColumnList, setActionColumnList] = useState<actionColumnItem[]>([]);
+  const [taskLoading, setTaskLoading] = useState<boolean>(false);
+  const [actionLoading, setActionLoading] = useState<boolean>(false);
+  // 当前页码，默认为第 1 页
+  const [pageNum, setPageNum] = useState<number>(1);
+  // 每页显示数量，默认为 10 条
+  const [pageSize, setPageSize] = useState<number>(10); // 每页显示 10 条
+  const [total, setTotal] = useState<number>(0); // 查询任务总数
+  const state = useRef({
+    pageIndex: 1,
+    pageSize: 10
+  })
+  // 回车处理
+  const handleKeyDown = async (e) => {
+    if ((e.metaKey || e.ctrlKey || e.shiftKey) && e.key === "Enter") {
+      e.preventDefault();
+    } else if (e.keyCode === 13) {
+      e.preventDefault();
+      await taskListSearch()
+    } else if (e.key === "/") {
+      e.preventDefault();
+    }
+  };
+
+  /**
+  * 页码变化时的回调函数
+  * 当用户切换页码时触发，更新页码并重新获取数据
+  * @param value - 新的页码值
+  */
+  const pageIndexChange = async (value: number) => {
+    // 更新 ref 中存储的页码值
+    // 更新页码状态，触发组件重新渲染
+    setPageNum(value);
+    state.current.pageIndex = value;
+    await taskListSearch();
+  }
+
+  // 任务查询
+  const taskListSearch = async () => {
+    const param = {
+      keyword: '',
+      pageNum: state.current.pageIndex,
+      pageSize: state.current.pageSize
+    }
+    setTaskLoading(true);
+    const res = await service.post(`${zncmUrl}/action/cop-action-tasks`, param);
+    setTaskLoading(false);
+    console.log('任务搜索', res);
+    const result = res.data;
+    result.forEach((item: TaskListItem) => {
+      item.progress = item.endCount / item.sumAll || 0; // 获取已完成和未完成的占比
+      item.taskStatusData = taskStatusList[item.taskStatus] // 根据任务状态码获取相关信息
+    })
+    setTaskList(result || []); // 设置任务列表页
+    const totalRes = await service.post(`${zncmUrl}/action/cop-action-tasks-count`, param); // 查询任务总数
+    console.log('totalRes', totalRes)
+    setTotal(totalRes.data || 0); // 设置总数
+    if (result.length > 0) {
+      setTaskId(result[0].id);
+      await actionListSearch(result[0].id);
+    }
+  }
+
+  // 行动查询
+  const actionListSearch = async (taskId: number) => {
+    const param = {
+      taskId: taskId,
+    }
+    setActionLoading(true);
+    const res = await service.get(`${zncmUrl}/action/cop-task-actions`, param);
+    console.log('行动查询', res);
+    setActionLoading(false);
+    const result = res.data;
+    setActionColumnList([
+      { columnName: '待分析', icon: '待CEH.svg', actionList: result.collect || [] },
+      { columnName: 'CEH中', icon: '进行中.svg', actionList: result.collect1 || [] },
+      { columnName: 'CEH完成', icon: '完成.svg', actionList: result.collect2 || [] },
+      { columnName: '已终止', icon: '已终止.svg', actionList: result.endDate || [] },
+    ]);
+  }
+
+  const taskDataChange = async (taskId: number) => {
+    setTaskId(taskId);
+    await actionListSearch(taskId);
+  }
+
+  useEffect(() => {
+    taskListSearch();
+  }, [])
+  return (
+    <div className="h-full flex flex-col">
+      <Row className="h-full flex flex-col">
+        <Col span={2} className="h-full">
+          <div className={`h-[calc(100vh-100px)] p-[10px] ${isDark ? 'bg-[rgba(3,38,80,0.6)]' : 'bg-white'} shadow-[2px_0px_6px_rgba(0,0,0,0.12)]`} >
+            {/* <div className="flex justify-between">
+              <span>筛选</span>
+              <span className="flex items-center">
+                <span>下发时间排序</span>
+              </span>
+            </div> */}
+            <div className="relative flex-1 max-w-md">
+              <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${textMuted}`} />
+              <input
+                type="text"
+                placeholder="搜索任务名称"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                onKeyDown={(e) => handleKeyDown(e)}
+                className={`w-full pl-10 pr-4 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 transition-colors ${inputBg} ${cardBorder} ${textPrimary} placeholder:${textMuted}`}
+              />
+            </div>
+            {/* 任务列表 */}
+            <Loading loading={taskLoading}>
+              <div className="h-[calc(100vh-200px)] overflow-y-auto pr-[10px]">
+                {
+                  taskList.map((item: TaskListItem, index: number) => (
+                    <div key={index} className={`${isDark ? 'bg-[#0062d91a] border-[#55a6fe1a] shadow-[0_3px_4px_#8b8b8b0f] dark-theme' : 'bg-white border-[#f5f5f5] shadow-[2px_0px_6px_rgba(0,0,0,0.08)] task-item-active'} p-[10px] mt-[10px] mb-[10px] rounded-[4px] border ${taskId === item.id && 'task-active'} cursor-pointer`} onClick={() => taskDataChange(item.id)}>
+                      <div className="text-[var(--text-color)] text-[17px] mb-[5px] font-[500]">{item.taskName}</div>
+                      <div className="text-[#7f7f7f] mb-[5px]">{format(new Date(item.taskStartDate), 'yyyy-MM-dd HH:mm:ss')}</div>
+                      <div className="flex items-center mb-[8px]">
+                        <img src={`/icon/${item?.taskStatusData?.icon}`} alt="" />
+                        <span className="ml-[5px] leading-[16px]">{item?.taskStatusData?.label}</span>
+                      </div>
+                      <div className="pb-[10px] pt-[10px]">
+                        <div className="border-b border-[#e8e8e8]"></div>
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <div className="h-[24px] item-active pl-[10px] pr-[10px] task-tab-color leading-[24px] rounded-[50px] bg-[var(--bg-color)]">
+                          完成{item.endCount}/{item.sumAll}
+                        </div>
+                        <div className="pl-[20px] flex-1">
+                          <Progress percentage={item.progress} label={false} color={item?.taskStatusData?.color} />
+                        </div>
+                      </div>
+                    </div>
+                  ))
+                }
+              </div>
+            </Loading>
+            {/* 分页 */}
+            <div>
+              <Pagination
+                total={total}
+                size="small"
+                theme="simple"
+                current={pageNum}
+                pageSize={pageSize}
+                showPageSize={false}
+                onCurrentChange={(page) => pageIndexChange(Number(page))}
+              />
+            </div>
+          </div>
+        </Col>
+
+        <Col span={10} className="h-full">
+          <div className="h-full flex flex-col p-[0_10px]">
+            <Loading loading={actionLoading}>
+              <div className="flex grid grid-cols-4 gap-[10px] pl-[10px]">
+                {
+                  actionColumnList.map((item: actionColumnItem, index: number) => (
+                    <ActionColumn key={index} icon={item.icon} columnIndex={index} columnName={item.columnName} actionCount={item.actionList.length} actionList={item.actionList} title={title} category={category} subCategory={subCategory} />
+                  ))
+                }
+                {
+                  actionColumnList.length === 0 && <Empty/>
+                }
+              </div>
+            </Loading>
+          </div>
+        </Col>
+      </Row>
+    </div>
+  );
+}
diff --git a/web-code/components/taskManagement/ActionColumn.tsx b/web-code/components/taskManagement/ActionColumn.tsx
new file mode 100644
index 00000000..6098a6c7
--- /dev/null
+++ b/web-code/components/taskManagement/ActionColumn.tsx
@@ -0,0 +1,114 @@
+import { useTheme } from '@/contexts/ThemeContext';
+import { ActionListItem, TaskListItem, taskStatusList } from '@/pages/TaskManagement';
+import { Bot, ChevronRight, Download, Edit, Eye, FileText, Layers, MoreHorizontal, Play, Search, User, Users, Workflow } from 'lucide-react';
+import React, { useEffect, useRef, useState } from 'react';
+import { PageType } from '../Sidebar';
+import { format } from 'date-fns';
+import { useNavigate } from 'react-router-dom';
+import { Col, Empty, Pagination, Progress, Row } from 'tdesign-react';
+import { requestCrudService } from '@/service/request-axios-service';
+
+interface ActionColumnProps {
+  TaskType?: string;
+  title: string;
+  category: string;
+  subCategory: string;
+  icon: string;
+  columnIndex: number;
+  columnName: string;
+  actionCount: number;
+  actionList: ActionListItem[];
+}
+
+const service = requestCrudService;
+const zncmUrl = import.meta.env.VITE_API_BASE_URL || '';
+export const ActionColumn: React.FC<ActionColumnProps> = ({ title, category, subCategory, icon, columnName, columnIndex, actionCount, actionList }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  // 主题颜色变量
+  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
+  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-100';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const textMuted = isDark ? 'text-slate-500' : 'text-gray-400';
+  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-white';
+  const navigate = useNavigate();
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  // 当前页码，默认为第 1 页
+  const [pageNum, setPageNum] = useState<number>(1);
+  // 每页显示数量，默认为 10 条
+  const [pageSize, setPageSize] = useState<number>(10); // 每页显示 10 条
+  const [total, setTotal] = useState<number>(0); // 查询任务总数
+  const state = useRef({
+    pageIndex: 1,
+    pageSize: 10
+  })
+  /**
+  * 页码变化时的回调函数
+  * 当用户切换页码时触发，更新页码并重新获取数据
+  * @param value - 新的页码值
+  */
+  const pageIndexChange = async (value: number) => {
+    // 更新 ref 中存储的页码值
+    // 更新页码状态，触发组件重新渲染
+    setPageNum(value);
+    state.current.pageIndex = value;
+  }
+
+  const actionRouterChange = (item: ActionListItem) => {
+    if (item.actionStatus !== 0) {
+      window.open(`https://ch1.b.uat.4.cn/web/#/action/item-aiceh/step-analysis-three?id=${item.id}`);
+    } else {
+      window.open(`https://ch1.b.uat.4.cn/web/#/action/item-aiceh/step-action-topic?id=${item.id}&isPassApply=false`);
+    }
+  }
+
+  return (
+    <div className={`h-[calc(100vh-100px)] p-[10px] flex-1 ${isDark? 'dark-action-bg' : `bg-white action-bg${columnIndex} shadow-[2px_0px_6px_rgba(0,0,0,0.12)]`} rounded-[4px]`}>
+      <div className="mb-[10px]">
+        <div className="flex items-center mb-[20px]">
+          <img src={`/icon/${icon}`} className="w-[24px] mr-[10px]" alt="" />
+          <span className="text[#222222] text-[18px] font-bold mr-[20px]">{columnName}</span>
+          <span className="text[#222222] text-[18px] font-bold mr-[20px]">{actionCount}</span>
+        </div>
+      </div>
+      <div className="h-[calc(100vh-200px)] overflow-y-auto pr-[10px]">
+        {
+          actionList.map((item: ActionListItem, index: number) => (
+            <div key={index} className={`${isDark? 'dark-action-item' : 'bg-white border border-[#f5f5f5] shadow-[0_1px_16px_#0000000f] action-item'} rounded-md px-4 py-2.5 mb-[10px] hover:boder-[var(--card-border)]`} onClick={() => actionRouterChange(item)}>
+              <div className="line-clamp-4 overflow-hidden mb-[10px]">
+                {
+                  item.actionName
+                }
+              </div>
+              <div className="flex items-center mb-[10px]">
+                <span className={`${isDark? 'bg-[#0062d94d] text-[#aaceff]' :'bg-[#f5f5f5]'} leading-[16px] p-[5px_10px] rounded-[2px]`}>
+                  {item.level === 1 ? '主要行动' : '次要行动'}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className={`${isDark? 'bg-[#0062d94d] text-[#aaceff]' :'bg-[#f5f5f5]'} leading-[16px] p-[5px_10px] rounded-[2px]`}>
+                  {item.deptName}
+                </span>
+                <span className="border border-[var(--color-main)] text-[var(--color-main)] cursor-pointer leading-[16px] ml-[10px] p-[5px_10px] rounded-[2px]">
+                  {
+                    item.actionStatus === 0 ? <span>XD签收</span> : <span>开始CEH</span>
+                  }
+                </span>
+              </div>
+            </div>
+          ))
+        }
+        {
+          actionList.length === 0 && <Empty image={
+            <img
+              src="/icon/empty-list.png"
+              alt="empty"
+              className="w-[135px]"
+            />
+          } />
+        }
+      </div>
+    </div>
+  );
+}
diff --git a/web-code/components/taskManagement/FanganTy.tsx b/web-code/components/taskManagement/FanganTy.tsx
new file mode 100644
index 00000000..f4d0aa2d
--- /dev/null
+++ b/web-code/components/taskManagement/FanganTy.tsx
@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from "react";
+import "./css/iframe.css";
+
+import { useTheme } from "@/contexts/ThemeContext";
+import { PageType } from "@/components/Sidebar";
+
+interface FanganTyPageProps {
+  title: string;
+  category: string;
+  subCategory: string;
+  onNavigate: (page: PageType) => void;
+}
+
+const TYURL = import.meta.env.VITE_AIPI_B2ACTOR_URL || "";
+
+const FanganTyPage: React.FC<FanganTyPageProps> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+  const [iframeUrl, setIframeUrl] = useState("");
+  useEffect(() => {
+    initIframeUrl();
+  }, []);
+  const initIframeUrl = () => {
+    const url = `${TYURL}/fromB/toPage?defaultPage=iframeFaty`;
+    console.log({ iframeUrl: url });
+    setIframeUrl(url);
+  };
+  return (
+    <div className="iframe-container">
+      <iframe src={iframeUrl} className="full-size-iframe"></iframe>
+    </div>
+  );
+};
+
+export default FanganTyPage;
diff --git a/web-code/components/taskManagement/KanbanColumn.tsx b/web-code/components/taskManagement/KanbanColumn.tsx
new file mode 100644
index 00000000..5a880ff0
--- /dev/null
+++ b/web-code/components/taskManagement/KanbanColumn.tsx
@@ -0,0 +1,92 @@
+import { useTheme } from '@/contexts/ThemeContext';
+import { TaskListItem } from '@/pages/TaskManagement';
+import { ChevronRight, FileText } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import { PageType } from '../Sidebar';
+import { TaskCard } from './TaskCard';
+import { Pagination } from 'tdesign-react';
+
+interface KanbanColumnProps {
+  title: string;
+  count: number;
+  color: string;
+  tasks: TaskListItem[];
+  taskType: string;
+  TaskDataType?: string; // 区分来源类型
+  onNavigate: (page: PageType) => void;
+  pageIndexSearch: (taskType: string, pageIndex: number) => void;
+  handleStartAnalysis: (task: TaskListItem) => void
+}
+
+export const KanbanColumn: React.FC<KanbanColumnProps> = ({ title, count, color, tasks,taskType, TaskDataType = 'task' , onNavigate, pageIndexSearch, handleStartAnalysis }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textMuted = isDark ? 'text-slate-500' : 'text-gray-400';
+  // 当前页码，默认为第 1 页
+  const [pageNum, setPageNum] = useState<number>(1);
+  // 每页显示数量，默认为 10 条
+  const [pageSize, setPageSize] = useState<number>(10); // 每页显示 10 条
+  /**
+  * 页码变化时的回调函数
+  * 当用户切换页码时触发，更新页码并重新获取数据
+  * @param value - 新的页码值
+  */
+  const pageIndexChange = async (value: number) => {
+    // 更新 ref 中存储的页码值
+    // 更新页码状态，触发组件重新渲染
+    console.log('taskType', taskType)
+    setPageNum(value);
+    await pageIndexSearch(taskType, value);
+  }
+
+  /**
+   * 每页显示数量变化时的回调函数
+   * 当用户切换每页显示条数时触发，更新每页数量并重新获取数据
+   * @param value - 新的每页显示数量
+   */
+  const pageSizeChange = async (value: number) => {
+    // 更新 ref 中存储的每页显示数量
+    // 更新每页显示数量状态，触发组件重新渲染
+    setPageSize(value);
+  }
+  return (
+    <div className="flex flex-col min-h-0 flex-1">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <div className={`w-2 h-2 rounded-full ${color}`} />
+          <h2 className={`font-semibold text-sm ${textPrimary}`}>{title}</h2>
+          <span className={`px-2 py-0.5 rounded-full text-xs ${isDark ? 'bg-slate-700/50 text-slate-400' : 'bg-red-50 text-red-500'
+            }`}>{count}</span>
+        </div>
+        {/* <button className={`p-1 rounded transition-colors ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'
+          }`}>
+          <ChevronRight className={`w-4 h-4 ${textMuted}`} />
+        </button> */}
+        <div>
+          <Pagination
+            total={count}
+            size="small"
+            theme="simple"
+            current={pageNum}
+            pageSize={pageSize}
+            maxPageBtn={3}
+            showPageSize={false}
+            totalContent={false}
+            onCurrentChange={(page) => pageIndexChange(Number(page))}
+          />
+        </div>
+      </div>
+      <div className="flex-1 overflow-y-auto space-y-3 pr-1 scrollbar-thin">
+        {tasks.length === 0 ? (
+          <div className={`flex flex-col items-center justify-center py-8 ${textMuted}`}>
+            <FileText className="w-8 h-8 mb-2 opacity-50" />
+            <p className="text-sm">暂无任务</p>
+          </div>
+        ) : (
+          tasks.map(task => <TaskCard key={task.id} task={task} TaskType={TaskDataType} onNavigate={onNavigate} handleStartAnalysis={handleStartAnalysis}/>)
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/web-code/components/taskManagement/SentimentAnalyzes.tsx b/web-code/components/taskManagement/SentimentAnalyzes.tsx
new file mode 100644
index 00000000..0561e2e1
--- /dev/null
+++ b/web-code/components/taskManagement/SentimentAnalyzes.tsx
@@ -0,0 +1,401 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Plus,
+  Search,
+  Eye,
+  Play,
+  Pause,
+  Clock,
+  User,
+  ChevronRight,
+  Filter,
+  FileText,
+  AlertTriangle,
+  CheckCircle,
+  XCircle,
+  MoreHorizontal,
+  Edit,
+  Download,
+  Bot,
+  Users,
+  Workflow,
+  X,
+  ArrowRight,
+  Target,
+  Layers,
+} from 'lucide-react';
+import { useTheme } from '@/contexts/ThemeContext';
+import { PageType } from '@/components/Sidebar';
+// 导入请求服务，用于与后端 API 交互
+import { requestCrudService } from '@/service/request-axios-service';
+import { KanbanColumn } from './KanbanColumn';
+import { TaskListItem } from '@/pages/TaskManagement';
+import { DateRangePicker, DateRangePickerProps, DateRangeValue, Loading } from 'tdesign-react';
+import dayjs from 'dayjs';
+import { useChatContext } from '@/contexts/ChatContext';
+import { useNavigate } from 'react-router-dom';
+
+interface TaskListPageProps {
+  title: string;
+  category: string;
+  subCategory: string;
+  onNavigate: (page: PageType) => void;
+}
+
+interface stateItem {
+  startTime: string,
+  endTime: string,
+  task: TaskListItem,
+}
+
+type TaskType = 'single' | 'consultation' | 'scene' | 'multi-agent' | 'task-search';
+type TaskStatus = 'draft' | 'pending' | 'running' | 'paused' | 'blocked' | 'completed';
+type ColumnType = 'unanalyzed' | 'analyzing' | 'completed';
+
+const service = requestCrudService;
+const zncmUrl = import.meta.env.VITE_API_BASE_URL || '';
+
+const SentimentAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCategory, onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const router = useNavigate();
+  // 主题颜色变量
+  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
+  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-100';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const textMuted = isDark ? 'text-slate-500' : 'text-gray-400';
+  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-white';
+  const { setStartConfig } = useChatContext();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [modeFilter, setModeFilter] = useState<string>('all');
+  const [showAnalysisModal, setShowAnalysisModal] = useState(false);
+  const [selectedTaskForAnalysis, setSelectedTaskForAnalysis] = useState<TaskListItem | null>(null);
+  const [unanalyzedTotal, setUnanalyzedTotal] = useState<number>(0); // 未分析
+  const [runningTotal, setRunningTotal] = useState<number>(0); // 分析中
+  const [completedTotal, setCompletedTotal] = useState<number>(0); // 已完成
+  const [unanalyzedList, setUnanalyzedList] = useState<TaskListItem[]>([]); // 未分析
+  const [runningList, setRunningList] = useState<TaskListItem[]>([]); // 分析中
+  const [completedList, setCompletedList] = useState<TaskListItem[]>([]); // 已完成
+  const [unanalyzedLoading, setUnanalyzedLoading] = useState<boolean>(false); // 未分析
+  const [runningLoading, setRunningLoading] = useState<boolean>(false); // 分析中
+  const [completedLoading, setCompletedLoading] = useState<boolean>(false); // 已完成
+  const [presets] = useState<DateRangePickerProps['presets']>({
+    最近7天: [dayjs().subtract(6, 'day').toDate(), dayjs().toDate()],
+    最近3天: [dayjs().subtract(2, 'day').toDate(), dayjs().toDate()],
+    今天: [dayjs().toDate(), dayjs().toDate()],
+  });
+  const [range, setRange] = useState<DateRangeValue>([]);
+  const state = useRef<stateItem>({
+    startTime: '',
+    endTime: '',
+    task: {} as TaskListItem,
+  })
+
+  // 时间日期选择器查询
+  const setRangeChange = async (val) => {
+    setRange(val);
+    console.log('时间日期', val);
+    state.current.startTime = '';
+    state.current.endTime = '';
+    if (val.length > 0) {
+      state.current.startTime = val[0];
+      state.current.endTime = val[1];
+    }
+
+    await taskDataChange();
+  }
+
+  // 处理开始分析按钮点击
+  const handleStartAnalysis = (task: TaskListItem) => {
+    setSelectedTaskForAnalysis(task);
+    state.current.task = task;
+    setShowAnalysisModal(true);
+  };
+
+  // 处理分析模式选择
+  const handleSelectAnalysisMode = (mode: TaskType) => {
+    setShowAnalysisModal(false);
+    console.log('mode', mode);
+    if (mode === 'single') {
+      onNavigate('task-single');
+    } else if (mode === 'scene') {
+      onNavigate('task-scene');
+    } else if (mode === 'consultation') {
+      console.log('state.current.task', state.current.task)
+      const sceneItem = JSON.parse(state.current.task.scene);
+      if (sceneItem.taskJson) {
+        sceneItem.taskJson = JSON.parse(sceneItem.taskJson);
+        setStartConfig({
+          ...sceneItem.taskJson,
+          llm_preset_id: 'BAILING',
+          consistency_mode: 'soft',
+          phase_config: { diverge_rounds: 3 },
+          task_context: state.current.task.overview
+        });
+        router('/qa-center/mope-chat')
+      }
+      console.log('sceneItem', sceneItem);
+      // onNavigate('task-consult-create');
+      // window.open(`http://ch1.b.uat.4.cn/mopeweb/#/mope?taskOverview=${state.current.task.overview}`)
+    } else if (mode === 'multi-agent') {
+      onNavigate('multi-agent-qa');
+    } else if (mode === 'task-search') {
+      window.open(`https://ch1.b.uat.4.cn/web/#/task/item-aicoh/step-info-search?id=${state.current.task.id}`)
+    }
+  };
+
+  // 处理卡片点击
+  const taskListSearch = async (taskType: string, pageNum: number = 1, pageSize: number = 10) => {
+    let taskStatus: number[] = []
+    if (taskType === 'unanalyzed') { // 未分析
+      taskStatus = [0, 10];
+      setUnanalyzedLoading(true);
+    } else if (taskType === 'running') { // 分析中
+      taskStatus = [20];
+      setRunningLoading(true);
+    } else if (taskType === 'completed') { // 已完成
+      taskStatus = [25, 30, 40, 60, 70, 80, 90, 100, 110];
+      setCompletedLoading(true);
+    }
+    const param = {
+      content: searchQuery,
+      pageNum: pageNum,
+      pageSize: pageSize,
+      taskStatus: taskStatus,
+      startTime: state.current.startTime,
+      endTime: state.current.endTime,
+      taskDirection: ''
+    }
+    const res = await service.post(`${zncmUrl}/three/cop-three-tasks`, param);
+    console.log('任务列表', res);
+    const result = res.data;
+    result.records.forEach((item: TaskListItem) => {
+      item.column = taskType;
+      if (!item.taskLevel) item.taskLevel = 1;
+    })
+    if (taskType === 'unanalyzed') {
+      setUnanalyzedLoading(false);
+      setUnanalyzedTotal(result.total);
+      setUnanalyzedList(result.records);
+    } else if (taskType === 'running') {
+      setRunningLoading(false);
+      setRunningTotal(result.total);
+      setRunningList(result.records);
+    } else if (taskType === 'completed') {
+      setCompletedLoading(false);
+      setCompletedTotal(result.total);
+      setCompletedList(result.records);
+    }
+  }
+
+  /**
+  * 页码变化时的回调函数
+  * 当用户切换页码时触发，更新页码并重新获取数据
+  * @param value - 新的页码值
+  */
+  const pageIndexChange = async (type: string, pageIndex: number) => {
+    // 更新 ref 中存储的页码值
+    // 更新页码状态，触发组件重新渲染
+    await taskListSearch(type, pageIndex);
+  }
+
+  const taskDataChange = async (pageNum: number = 1, pageSize: number = 10) => {
+    taskListSearch('unanalyzed', pageNum, pageSize);
+    taskListSearch('running', pageNum, pageSize);
+    taskListSearch('completed', pageNum, pageSize);
+  }
+
+  // 回车处理
+  const handleKeyDown = async (e) => {
+    if ((e.metaKey || e.ctrlKey || e.shiftKey) && e.key === "Enter") {
+      e.preventDefault();
+    } else if (e.keyCode === 13) {
+      e.preventDefault();
+      await taskDataChange();
+    } else if (e.key === "/") {
+      e.preventDefault();
+    }
+  };
+
+  useEffect(() => {
+    taskDataChange();
+  }, []);
+
+  // 渲染看板列
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* 顶部工具栏 */}
+      <div className={`rounded-xl p-4 flex-shrink-0 mb-4 ${cardBg} border ${cardBorder}`}>
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <div className="flex items-center gap-2 mb-1">
+              <span className={`px-2 py-0.5 rounded text-xs ${isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-red-100 text-red-600'}`}>
+                {category}
+              </span>
+              <span className={`text-xs ${textMuted}`}>/</span>
+              <span className={`px-2 py-0.5 rounded text-xs ${isDark ? 'bg-cyan-500/20 text-cyan-400' : 'bg-red-100 text-red-600'}`}>
+                {subCategory}
+              </span>
+            </div>
+            <h1 className={`text-xl font-bold ${textPrimary}`}>任务中心</h1>
+          </div>
+          <button
+            onClick={() => onNavigate('task-create')}
+            className={`flex items-center gap-2 px-4 py-2 text-white rounded-lg text-sm font-medium transition-colors ${isDark
+              ? 'bg-blue-600 hover:bg-blue-500'
+              : 'bg-red-600 hover:bg-red-500 shadow-md'
+              }`}
+          >
+            <Plus className="w-4 h-4" />
+            新建任务
+          </button>
+        </div>
+
+        {/* 搜索和筛选 */}
+        <div className="flex items-center gap-4">
+          <div className="relative flex-1 max-w-md">
+            <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${textMuted}`} />
+            <input
+              type="text"
+              placeholder="搜索任务名称"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onKeyDown={(e) => handleKeyDown(e)}
+              className={`w-full pl-10 pr-4 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 transition-colors ${inputBg} ${cardBorder} ${textPrimary} placeholder:${textMuted}`}
+            />
+          </div>
+          {/* <select
+            value={modeFilter}
+            onChange={(e) => setModeFilter(e.target.value)}
+            className={`px-4 py-2 border rounded-lg text-sm focus:outline-none cursor-pointer ${inputBg} ${cardBorder} ${textSecondary}`}
+          >
+            <option value="all">全部模式</option>
+            <option value="single">单智能体</option>
+            <option value="multi-agent">多智能体协同</option>
+            <option value="consultation">多智能体会商</option>
+            <option value="scene">场景执行</option>
+          </select> */}
+          {/* <button className={`flex items-center gap-2 px-4 py-2 border rounded-lg text-sm transition-colors ${inputBg} ${cardBorder} ${textSecondary}`}>
+            <Clock className="w-4 h-4" />
+            时间范围
+          </button> */}
+          <DateRangePicker value={range} presets={presets} onChange={(val) => setRangeChange(val)} enableTimePicker={true} clearable />
+        </div>
+      </div>
+
+      {/* 统计概览栏 */}
+      <div className="grid grid-cols-4 gap-4 mb-4 flex-shrink-0">
+        <button
+          onClick={() => { setModeFilter('all'); }}
+          className={`p-4 rounded-xl border transition-all ${cardBg} ${cardBorder} hover:border-red-400`}
+        >
+          <p className={`text-2xl font-bold ${textPrimary}`}>{unanalyzedTotal + runningTotal + completedTotal}</p>
+          <p className={`text-sm ${textSecondary}`}>全部任务</p>
+        </button>
+        <button
+          className={`p-4 rounded-xl border transition-all ${cardBg} ${cardBorder} hover:border-red-400`}
+        >
+          <p className={`text-2xl font-bold ${textPrimary}`}>{unanalyzedTotal}</p>
+          <p className={`text-sm ${textSecondary}`}>未分析</p>
+        </button>
+        <button
+          className={`p-4 rounded-xl border transition-all ${cardBg} ${cardBorder} hover:border-red-400`}
+        >
+          <p className={`text-2xl font-bold ${isDark ? 'text-blue-400' : 'text-red-600'}`}>{runningTotal}</p>
+          <p className={`text-sm ${textSecondary}`}>分析中</p>
+        </button>
+        <button
+          className={`p-4 rounded-xl border transition-all ${cardBg} ${cardBorder} hover:border-red-400`}
+        >
+          <p className={`text-2xl font-bold ${isDark ? 'text-green-400' : 'text-green-600'}`}>{completedTotal}</p>
+          <p className={`text-sm ${textSecondary}`}>已完成</p>
+        </button>
+      </div>
+
+      {/* 看板区 */}
+      <div className="flex-1 grid grid-cols-3 gap-4 min-h-0 overflow-hidden">
+        <Loading loading={unanalyzedLoading}>
+          <KanbanColumn title="未分析" taskType={"unanalyzed"} TaskDataType={'sentiment'} count={unanalyzedTotal} color={isDark ? 'bg-yellow-400' : 'bg-yellow-400'} tasks={unanalyzedList} onNavigate={onNavigate} pageIndexSearch={pageIndexChange} handleStartAnalysis={handleStartAnalysis} />
+        </Loading>
+        <Loading loading={runningLoading}>
+          <KanbanColumn title="分析中" taskType="running" TaskDataType={'sentiment'} count={runningTotal} color={isDark ? 'bg-blue-400' : 'bg-red-400'} tasks={runningList} onNavigate={onNavigate} pageIndexSearch={pageIndexChange} handleStartAnalysis={handleStartAnalysis} />
+        </Loading>
+        <Loading loading={completedLoading}>
+          <KanbanColumn title="已完成" taskType="completed" TaskDataType={'sentiment'} count={completedTotal} color={isDark ? 'bg-green-400' : 'bg-green-400'} tasks={completedList} onNavigate={onNavigate} pageIndexSearch={pageIndexChange} handleStartAnalysis={handleStartAnalysis} />
+        </Loading>
+      </div>
+
+      {/* 选择分析模式弹窗 */}
+      {showAnalysisModal && selectedTaskForAnalysis && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={() => setShowAnalysisModal(false)}>
+          <div
+            className={`w-full max-w-lg rounded-2xl p-6 ${cardBg} border ${cardBorder} shadow-xl`}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between mb-6">
+              <div>
+                <h2 className={`text-xl font-bold ${textPrimary}`}>选择分析模式</h2>
+                <p className={`text-sm ${textMuted} mt-1`}>为任务「{selectedTaskForAnalysis.taskName}」选择分析方式</p>
+              </div>
+              <button
+                onClick={() => setShowAnalysisModal(false)}
+                className={`p-2 rounded-lg hover:bg-slate-700/50 ${textSecondary}`}
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            <div className="space-y-3">
+
+              <button
+                onClick={() => handleSelectAnalysisMode('task-search')}
+                className={`w-full p-4 rounded-xl border transition-all duration-200 text-left hover:shadow-md ${isDark
+                  ? 'bg-slate-700/50 border-blue-800/30 hover:border-green-500/50'
+                  : 'bg-white border-red-100 hover:border-red-300 hover:shadow-md'
+                  }`}
+              >
+                <div className="flex items-center gap-4">
+                  <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${isDark ? 'bg-green-500/20' : 'bg-green-100'
+                    }`}>
+                    <Layers className={`w-6 h-6 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className={`font-semibold ${textPrimary}`}>查看任务详情</h3>
+                    <p className={`text-sm ${textSecondary}`}>进入b1系统查看任务详情</p>
+                  </div>
+                  <ArrowRight className={`w-5 h-5 ${textMuted}`} />
+                </div>
+              </button>
+
+
+              {/* 多智能体会商 */}
+              <button
+                onClick={() => handleSelectAnalysisMode('consultation')}
+                className={`w-full p-4 rounded-xl border transition-all duration-200 text-left hover:shadow-md ${isDark
+                  ? 'bg-slate-700/50 border-blue-800/30 hover:border-orange-500/50'
+                  : 'bg-white border-red-100 hover:border-red-300 hover:shadow-md'
+                  }`}
+              >
+                <div className="flex items-center gap-4">
+                  <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${isDark ? 'bg-orange-500/20' : 'bg-red-100'
+                    }`}>
+                    <Users className={`w-6 h-6 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className={`font-semibold ${textPrimary}`}>多智能体会商</h3>
+                    <p className={`text-sm ${textSecondary}`}>多个AI智能体从不同视角开展讨论并形成共识</p>
+                  </div>
+                  <ArrowRight className={`w-5 h-5 ${textMuted}`} />
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SentimentAnalyzes;
diff --git a/web-code/components/taskManagement/TaskAnalyzes.tsx b/web-code/components/taskManagement/TaskAnalyzes.tsx
new file mode 100644
index 00000000..8ec46f74
--- /dev/null
+++ b/web-code/components/taskManagement/TaskAnalyzes.tsx
@@ -0,0 +1,678 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Plus,
+  Search,
+  Eye,
+  Play,
+  Pause,
+  Clock,
+  User,
+  ChevronRight,
+  Filter,
+  FileText,
+  AlertTriangle,
+  CheckCircle,
+  XCircle,
+  MoreHorizontal,
+  Edit,
+  Download,
+  Bot,
+  Users,
+  Workflow,
+  X,
+  ArrowRight,
+  Target,
+  Layers,
+} from 'lucide-react';
+import { useTheme } from '@/contexts/ThemeContext';
+import { PageType } from '@/components/Sidebar';
+// 导入请求服务，用于与后端 API 交互
+import { requestCrudService } from '@/service/request-axios-service';
+import { KanbanColumn } from './KanbanColumn';
+import { TaskListItem } from '@/pages/TaskManagement';
+import { DateRangePicker, DateRangePickerProps, DateRangeValue, Loading } from 'tdesign-react';
+import { useNavigate } from 'react-router-dom';
+import dayjs from 'dayjs';
+import { useChatContext } from '@/contexts/ChatContext';
+
+interface TaskListPageProps {
+  title: string;
+  category: string;
+  subCategory: string;
+  onNavigate: (page: PageType) => void;
+}
+
+type TaskType = 'single' | 'consultation' | 'scene' | 'multi-agent' | 'task-search';
+type TaskStatus = 'draft' | 'pending' | 'running' | 'paused' | 'blocked' | 'completed';
+type ColumnType = 'unanalyzed' | 'analyzing' | 'completed';
+
+interface Task {
+  id: string;
+  name: string;
+  type: TaskType;
+  status: TaskStatus;
+  agent?: string;
+  scene?: string;
+  participants?: string[];
+  currentPhase?: string;
+  currentRound?: number;
+  summary?: string;
+  creator: string;
+  createTime: string;
+  updateTime: string;
+  column: ColumnType;
+}
+
+interface stateItem {
+  startTime: string,
+  endTime: string,
+  task: TaskListItem,
+}
+
+const service = requestCrudService;
+const zncmUrl = import.meta.env.VITE_API_BASE_URL || '';
+
+const TaskAnalyzes: React.FC<TaskListPageProps> = ({ title, category, subCategory, onNavigate }) => {
+  const { theme } = useTheme();
+  const { setStartConfig } = useChatContext();
+  const router = useNavigate();
+  const isDark = theme === 'dark';
+
+  // 主题颜色变量
+  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
+  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-100';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const textMuted = isDark ? 'text-slate-500' : 'text-gray-400';
+  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-white';
+
+  // 生成模拟数据
+  const [tasks] = useState<Task[]>([
+    // 未分析列
+    {
+      id: '2026-0320-001',
+      name: '端午节品牌传播方案',
+      type: 'scene',
+      scene: '宣传策略生成',
+      status: 'draft',
+      column: 'unanalyzed',
+      summary: '针对端午节品牌活动制定完整传播策略方案',
+      creator: '李策划',
+      createTime: '2026-03-20 10:00',
+      updateTime: '2026-03-20 10:00',
+    },
+    {
+      id: '2026-0320-002',
+      name: '新品上市用户调研',
+      type: 'single',
+      agent: 'AudienceAgent',
+      status: 'pending',
+      column: 'unanalyzed',
+      summary: '对新品目标用户进行画像分析',
+      creator: '王运营',
+      createTime: '2026-03-20 09:30',
+      updateTime: '2026-03-20 09:30',
+    },
+    // 分析中列
+    {
+      id: '2026-0319-001',
+      name: '五四青年节宣传活动策略',
+      type: 'scene',
+      scene: '宣传策略生成',
+      status: 'running',
+      currentPhase: '行为分析',
+      column: 'analyzing',
+      summary: '正在按场景模板执行目标、受众、行为、叙事等分析...',
+      creator: '张策略',
+      createTime: '2026-03-19 10:30',
+      updateTime: '2026-03-20 09:45',
+    },
+    {
+      id: '2026-0319-002',
+      name: '青年传播方向会商分析',
+      type: 'consultation',
+      participants: ['GoalAgent', 'AudienceAgent', 'NarrativeAgent'],
+      status: 'running',
+      currentRound: 2,
+      column: 'analyzing',
+      summary: '围绕宣传方向、叙事方式和受众切入点开展多视角会商...',
+      creator: '王策划',
+      createTime: '2026-03-19 14:00',
+      updateTime: '2026-03-20 09:00',
+    },
+    {
+      id: '2026-0318-001',
+      name: '年度品牌升级方案推演',
+      type: 'scene',
+      scene: '宣传方案推演',
+      status: 'paused',
+      currentPhase: '叙事分析',
+      column: 'analyzing',
+      summary: '任务已暂停，等待人工介入确认叙事方向',
+      creator: '王策划',
+      createTime: '2026-03-18 14:00',
+      updateTime: '2026-03-20 08:30',
+    },
+    // 已完成列
+    {
+      id: '2026-0318-002',
+      name: '核心受众画像分析',
+      type: 'single',
+      agent: 'AudienceAgent',
+      status: 'completed',
+      column: 'completed',
+      summary: '已完成目标受众识别、关切提炼和阻力分析',
+      creator: '赵运营',
+      createTime: '2026-03-18 09:00',
+      updateTime: '2026-03-18 16:30',
+    },
+    {
+      id: '2026-0319-003',
+      name: '五四青年节宣传策略',
+      type: 'scene',
+      scene: '宣传策略生成',
+      status: 'completed',
+      column: 'completed',
+      summary: '已完成宣传策略方案生成',
+      creator: '张策略',
+      createTime: '2026-03-19 10:00',
+      updateTime: '2026-03-19 18:00',
+    },
+    {
+      id: '2026-0319-004',
+      name: '青年品牌传播路径会商',
+      type: 'consultation',
+      participants: ['GoalAgent', 'NarrativeAgent', 'RiskAgent'],
+      status: 'completed',
+      column: 'completed',
+      summary: '已完成多智能体会商，形成结论与分歧报告',
+      creator: '王策划',
+      createTime: '2026-03-19 14:30',
+      updateTime: '2026-03-19 17:00',
+    },
+  ]);
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [modeFilter, setModeFilter] = useState<string>('all');
+  const [showAnalysisModal, setShowAnalysisModal] = useState(false);
+  const [selectedTaskForAnalysis, setSelectedTaskForAnalysis] = useState<TaskListItem | null>(null);
+  const [unanalyzedTotal, setUnanalyzedTotal] = useState<number>(0); // 未分析
+  const [runningTotal, setRunningTotal] = useState<number>(0); // 分析中
+  const [completedTotal, setCompletedTotal] = useState<number>(0); // 已完成
+  const [unanalyzedList, setUnanalyzedList] = useState<TaskListItem[]>([]); // 未分析
+  const [runningList, setRunningList] = useState<TaskListItem[]>([]); // 分析中
+  const [completedList, setCompletedList] = useState<TaskListItem[]>([]); // 已完成
+  const [unanalyzedLoading, setUnanalyzedLoading] = useState<boolean>(false); // 未分析
+  const [runningLoading, setRunningLoading] = useState<boolean>(false); // 分析中
+  const [completedLoading, setCompletedLoading] = useState<boolean>(false); // 已完成
+  const [presets] = useState<DateRangePickerProps['presets']>({
+    最近7天: [dayjs().subtract(6, 'day').toDate(), dayjs().toDate()],
+    最近3天: [dayjs().subtract(2, 'day').toDate(), dayjs().toDate()],
+    今天: [dayjs().toDate(), dayjs().toDate()],
+  });
+  const [range, setRange] = useState<DateRangeValue>([]);
+  const state = useRef<stateItem>({
+    startTime: '',
+    endTime: '',
+    task: {} as TaskListItem,
+  })
+
+  // 时间日期选择器查询
+  const setRangeChange = async (val) => {
+    setRange(val);
+    console.log('时间日期', val);
+    state.current.startTime = '';
+    state.current.endTime = '';
+    if (val.length > 0) {
+      state.current.startTime = val[0];
+      state.current.endTime = val[1];
+    }
+
+    await taskDataChange();
+  }
+
+  // 获取任务类型配置
+  const getTypeConfig = (type: TaskType) => {
+    if (isDark) {
+      switch (type) {
+        case 'single':
+          return { label: '单智能体', color: 'bg-cyan-500/20 text-cyan-400', icon: Bot };
+        case 'scene':
+          return { label: '场景执行', color: 'bg-purple-500/20 text-purple-400', icon: Workflow };
+        case 'consultation':
+          return { label: '多智能体会商', color: 'bg-orange-500/20 text-orange-400', icon: Users };
+        case 'multi-agent':
+          return { label: '多智能体协同', color: 'bg-green-500/20 text-green-400', icon: Layers };
+      }
+    } else {
+      switch (type) {
+        case 'single':
+          return { label: '单智能体', color: 'bg-blue-100 text-blue-600', icon: Bot };
+        case 'scene':
+          return { label: '场景执行', color: 'bg-purple-100 text-purple-600', icon: Workflow };
+        case 'consultation':
+          return { label: '多智能体会商', color: 'bg-orange-100 text-orange-600', icon: Users };
+        case 'multi-agent':
+          return { label: '多智能体协同', color: 'bg-green-100 text-green-600', icon: Layers };
+      }
+    }
+  };
+
+  // 获取状态配置
+  const getStatusConfig = (status: TaskStatus, column: ColumnType) => {
+    if (column === 'unanalyzed') {
+      switch (status) {
+        case 'draft':
+          return { label: '草稿', color: isDark ? 'bg-slate-500/20 text-slate-400' : 'bg-gray-100 text-gray-600' };
+        case 'pending':
+          return { label: '待启动', color: isDark ? 'bg-slate-500/20 text-slate-400' : 'bg-gray-100 text-gray-600' };
+        default:
+          return { label: '待配置', color: isDark ? 'bg-yellow-500/20 text-yellow-400' : 'bg-yellow-100 text-yellow-600' };
+      }
+    } else if (column === 'analyzing') {
+      switch (status) {
+        case 'running':
+          return { label: '运行中', color: isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-red-100 text-red-600' };
+        case 'paused':
+          return { label: '已暂停', color: isDark ? 'bg-yellow-500/20 text-yellow-400' : 'bg-yellow-100 text-yellow-600' };
+        case 'blocked':
+          return { label: '阻塞中', color: isDark ? 'bg-red-500/20 text-red-400' : 'bg-orange-100 text-orange-600' };
+        default:
+          return { label: '待处理', color: isDark ? 'bg-purple-500/20 text-purple-400' : 'bg-purple-100 text-purple-600' };
+      }
+    } else {
+      return { label: '已完成', color: isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-600' };
+    }
+  };
+
+  // 筛选任务
+  const filteredTasks = tasks.filter(task => {
+    const matchesSearch = task.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      task.id.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesMode = modeFilter === 'all' || task.type === modeFilter;
+    return matchesSearch && matchesMode;
+  });
+
+  const unanalyzedTasks = filteredTasks.filter(t => t.column === 'unanalyzed');
+  const analyzingTasks = filteredTasks.filter(t => t.column === 'analyzing');
+  const completedTasks = filteredTasks.filter(t => t.column === 'completed');
+
+  // 统计数据
+  const stats = {
+    total: tasks.length,
+    unanalyzed: unanalyzedTasks.length,
+    analyzing: analyzingTasks.length,
+    completed: completedTasks.length,
+  };
+
+  // 处理开始分析按钮点击
+  const handleStartAnalysis = (task: TaskListItem) => {
+    setSelectedTaskForAnalysis(task);
+    state.current.task = task;
+    setShowAnalysisModal(true);
+  };
+
+  // 处理分析模式选择
+  const handleSelectAnalysisMode = (mode: TaskType) => {
+    setShowAnalysisModal(false);
+    console.log('mode', mode);
+    if (mode === 'single') {
+      onNavigate('task-single');
+    } else if (mode === 'scene') {
+      onNavigate('task-scene');
+    } else if (mode === 'consultation') {
+      console.log('state.current.task', state.current.task)
+      const sceneItem = JSON.parse(state.current.task.scene);
+      if (sceneItem.taskJson) {
+        sceneItem.taskJson = JSON.parse(sceneItem.taskJson);
+        setStartConfig({
+          ...sceneItem.taskJson,
+          llm_preset_id: 'BAILING',
+          consistency_mode: 'soft',
+          phase_config: {diverge_rounds: 3},
+          task_context: state.current.task.overview
+        });
+        router('/qa-center/mope-chat')
+      }
+      console.log('sceneItem', sceneItem);
+      // onNavigate('task-consult-create');
+      // window.open(`http://ch1.b.uat.4.cn/mopeweb/#/mope?taskOverview=${state.current.task.overview}`)
+    } else if (mode === 'multi-agent') {
+      onNavigate('multi-agent-qa');
+    } else if (mode === 'task-search') {
+      window.open(`https://ch1.b.uat.4.cn/web/#/task/item-aicoh/step-info-search?id=${state.current.task.id}`)
+    }
+  };
+
+  // 处理卡片点击
+  const handleTaskClick = (task: Task) => {
+    if (task.column === 'completed') {
+      if (task.type === 'consultation') {
+        onNavigate('task-consult-result');
+      } else {
+        onNavigate('strategy-result');
+      }
+    } else if (task.column === 'analyzing') {
+      if (task.type === 'scene') {
+        onNavigate('task-scene');
+      } else if (task.type === 'consultation') {
+        onNavigate('task-consult');
+      } else {
+        onNavigate('task-single');
+      }
+    }
+  };
+
+  const taskListSearch = async (taskType: string, pageNum: number = 1, pageSize: number = 10) => {
+    let taskStatus: number[] = []
+    if (taskType === 'unanalyzed') { // 未分析
+      taskStatus = [0, 10];
+      setUnanalyzedLoading(true);
+    } else if (taskType === 'running') { // 分析中
+      taskStatus = [20];
+      setRunningLoading(true);
+    } else if (taskType === 'completed') { // 已完成
+      taskStatus = [25, 30, 40, 60, 70, 80, 90, 100, 110];
+      setCompletedLoading(true);
+    }
+    const param = {
+      content: searchQuery,
+      pageNum: pageNum,
+      pageSize: pageSize,
+      taskStatus: taskStatus,
+      startTime: state.current.startTime,
+      endTime: state.current.endTime,
+      taskDirection: ''
+    }
+    const res = await service.post(`${zncmUrl}/task/cop-tasks`, param);
+    console.log('任务列表', res);
+    const result = res.data;
+    result.records.forEach((item: TaskListItem) => {
+      item.column = taskType;
+      if (!item.taskLevel) item.taskLevel = 1;
+    })
+    if (taskType === 'unanalyzed') {
+      setUnanalyzedLoading(false);
+      setUnanalyzedTotal(result.total);
+      setUnanalyzedList(result.records);
+    } else if (taskType === 'running') {
+      setRunningLoading(false);
+      setRunningTotal(result.total);
+      setRunningList(result.records);
+    } else if (taskType === 'completed') {
+      setCompletedLoading(false);
+      setCompletedTotal(result.total);
+      setCompletedList(result.records);
+    }
+  }
+
+  /**
+  * 页码变化时的回调函数
+  * 当用户切换页码时触发，更新页码并重新获取数据
+  * @param value - 新的页码值
+  */
+  const pageIndexChange = async (type: string, pageIndex: number) => {
+    // 更新 ref 中存储的页码值
+    // 更新页码状态，触发组件重新渲染
+    await taskListSearch(type, pageIndex);
+  }
+
+  const taskDataChange = async (pageNum: number = 1, pageSize: number = 10) => {
+    taskListSearch('unanalyzed', pageNum, pageSize);
+    taskListSearch('running', pageNum, pageSize);
+    taskListSearch('completed', pageNum, pageSize);
+  }
+
+  // 回车处理
+  const handleKeyDown = async (e) => {
+    if ((e.metaKey || e.ctrlKey || e.shiftKey) && e.key === "Enter") {
+      e.preventDefault();
+    } else if (e.keyCode === 13) {
+      e.preventDefault();
+      await taskDataChange();
+    } else if (e.key === "/") {
+      e.preventDefault();
+    }
+  };
+
+  useEffect(() => {
+    taskDataChange();
+  }, []);
+
+  // 渲染看板列
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* 顶部工具栏 */}
+      <div className={`rounded-xl p-4 flex-shrink-0 mb-4 ${cardBg} border ${cardBorder}`}>
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <div className="flex items-center gap-2 mb-1">
+              <span className={`px-2 py-0.5 rounded text-xs ${isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-red-100 text-red-600'}`}>
+                {category}
+              </span>
+              <span className={`text-xs ${textMuted}`}>/</span>
+              <span className={`px-2 py-0.5 rounded text-xs ${isDark ? 'bg-cyan-500/20 text-cyan-400' : 'bg-red-100 text-red-600'}`}>
+                {subCategory}
+              </span>
+            </div>
+            <h1 className={`text-xl font-bold ${textPrimary}`}>任务中心</h1>
+          </div>
+          <button
+            onClick={() => onNavigate('task-create')}
+            className={`flex items-center gap-2 px-4 py-2 text-white rounded-lg text-sm font-medium transition-colors ${isDark
+              ? 'bg-blue-600 hover:bg-blue-500'
+              : 'bg-red-600 hover:bg-red-500 shadow-md'
+              }`}
+          >
+            <Plus className="w-4 h-4" />
+            新建任务
+          </button>
+        </div>
+
+        {/* 搜索和筛选 */}
+        <div className="flex items-center gap-4">
+          <div className="relative flex-1 max-w-md">
+            <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${textMuted}`} />
+            <input
+              type="text"
+              placeholder="搜索任务名称"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onKeyDown={(e) => handleKeyDown(e)}
+              className={`w-full pl-10 pr-4 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 transition-colors ${inputBg} ${cardBorder} ${textPrimary} placeholder:${textMuted}`}
+            />
+          </div>
+          {/* <select
+            value={modeFilter}
+            onChange={(e) => setModeFilter(e.target.value)}
+            className={`px-4 py-2 border rounded-lg text-sm focus:outline-none cursor-pointer ${inputBg} ${cardBorder} ${textSecondary}`}
+          >
+            <option value="all">全部模式</option>
+            <option value="single">单智能体</option>
+            <option value="multi-agent">多智能体协同</option>
+            <option value="consultation">多智能体会商</option>
+            <option value="scene">场景执行</option>
+          </select> */}
+          {/* <button className={`flex items-center gap-2 px-4 py-2 border rounded-lg text-sm transition-colors ${inputBg} ${cardBorder} ${textSecondary}`}>
+            <Clock className="w-4 h-4" />
+            时间范围
+          </button> */}
+          <DateRangePicker value={range} presets={presets} onChange={(val) => setRangeChange(val)} enableTimePicker={true} clearable />
+        </div>
+      </div>
+
+      {/* 统计概览栏 */}
+      <div className="grid grid-cols-4 gap-4 mb-4 flex-shrink-0">
+        <button
+          onClick={() => { setModeFilter('all'); }}
+          className={`p-4 rounded-xl border transition-all ${cardBg} ${cardBorder} hover:border-red-400`}
+        >
+          <p className={`text-2xl font-bold ${textPrimary}`}>{unanalyzedTotal + runningTotal + completedTotal}</p>
+          <p className={`text-sm ${textSecondary}`}>全部任务</p>
+        </button>
+        <button
+          className={`p-4 rounded-xl border transition-all ${cardBg} ${cardBorder} hover:border-red-400`}
+        >
+          <p className={`text-2xl font-bold ${textPrimary}`}>{unanalyzedTotal}</p>
+          <p className={`text-sm ${textSecondary}`}>未分析</p>
+        </button>
+        <button
+          className={`p-4 rounded-xl border transition-all ${cardBg} ${cardBorder} hover:border-red-400`}
+        >
+          <p className={`text-2xl font-bold ${isDark ? 'text-blue-400' : 'text-red-600'}`}>{runningTotal}</p>
+          <p className={`text-sm ${textSecondary}`}>分析中</p>
+        </button>
+        <button
+          className={`p-4 rounded-xl border transition-all ${cardBg} ${cardBorder} hover:border-red-400`}
+        >
+          <p className={`text-2xl font-bold ${isDark ? 'text-green-400' : 'text-green-600'}`}>{completedTotal}</p>
+          <p className={`text-sm ${textSecondary}`}>已完成</p>
+        </button>
+      </div>
+
+      {/* 看板区 */}
+      <div className="flex-1 grid grid-cols-3 gap-4 min-h-0 overflow-hidden">
+        <Loading loading={unanalyzedLoading}>
+          <KanbanColumn title="未分析" taskType={"unanalyzed"} count={unanalyzedTotal} color={isDark ? 'bg-yellow-400' : 'bg-yellow-400'} tasks={unanalyzedList} onNavigate={onNavigate} pageIndexSearch={pageIndexChange} handleStartAnalysis={handleStartAnalysis}/>
+        </Loading>
+        <Loading loading={runningLoading}>
+          <KanbanColumn title="分析中" taskType="running" count={runningTotal} color={isDark ? 'bg-blue-400' : 'bg-red-400'} tasks={runningList} onNavigate={onNavigate} pageIndexSearch={pageIndexChange} handleStartAnalysis={handleStartAnalysis}/>
+        </Loading>
+        <Loading loading={completedLoading}>
+          <KanbanColumn title="已完成" taskType="completed" count={completedTotal} color={isDark ? 'bg-green-400' : 'bg-green-400'} tasks={completedList} onNavigate={onNavigate} pageIndexSearch={pageIndexChange} handleStartAnalysis={handleStartAnalysis}/>
+        </Loading>
+      </div>
+
+      {/* 选择分析模式弹窗 */}
+      {showAnalysisModal && selectedTaskForAnalysis && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={() => setShowAnalysisModal(false)}>
+          <div
+            className={`w-full max-w-lg rounded-2xl p-6 ${cardBg} border ${cardBorder} shadow-xl`}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between mb-6">
+              <div>
+                <h2 className={`text-xl font-bold ${textPrimary}`}>选择分析模式</h2>
+                <p className={`text-sm ${textMuted} mt-1`}>为任务「{selectedTaskForAnalysis.taskName}」选择分析方式</p>
+              </div>
+              <button
+                onClick={() => setShowAnalysisModal(false)}
+                className={`p-2 rounded-lg hover:bg-slate-700/50 ${textSecondary}`}
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            <div className="space-y-3">
+              {/* 单智能体分析 */}
+              {/* <button
+                onClick={() => handleSelectAnalysisMode('single')}
+                className={`w-full p-4 rounded-xl border transition-all duration-200 text-left hover:shadow-md ${isDark
+                  ? 'bg-slate-700/50 border-blue-800/30 hover:border-cyan-500/50'
+                  : 'bg-white border-red-100 hover:border-red-300 hover:shadow-md'
+                  }`}
+              >
+                <div className="flex items-center gap-4">
+                  <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${isDark ? 'bg-cyan-500/20' : 'bg-red-100'
+                    }`}>
+                    <Bot className={`w-6 h-6 ${isDark ? 'text-cyan-400' : 'text-red-500'}`} />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className={`font-semibold ${textPrimary}`}>单智能体分析</h3>
+                    <p className={`text-sm ${textSecondary}`}>选择一个AI智能体完成单一维度的专项分析</p>
+                  </div>
+                  <ArrowRight className={`w-5 h-5 ${textMuted}`} />
+                </div>
+              </button> */}
+
+              {/* 多智能体协同分析 */}
+              {/* <button
+                onClick={() => handleSelectAnalysisMode('multi-agent')}
+                className={`w-full p-4 rounded-xl border transition-all duration-200 text-left hover:shadow-md ${isDark
+                  ? 'bg-slate-700/50 border-blue-800/30 hover:border-green-500/50'
+                  : 'bg-white border-red-100 hover:border-red-300 hover:shadow-md'
+                  }`}
+              >
+                <div className="flex items-center gap-4">
+                  <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${isDark ? 'bg-green-500/20' : 'bg-green-100'
+                    }`}>
+                    <Layers className={`w-6 h-6 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className={`font-semibold ${textPrimary}`}>多智能体协同分析</h3>
+                    <p className={`text-sm ${textSecondary}`}>多个AI智能体并行分析，输出各自的判断和结论</p>
+                  </div>
+                  <ArrowRight className={`w-5 h-5 ${textMuted}`} />
+                </div>
+              </button> */}
+              <button
+                onClick={() => handleSelectAnalysisMode('task-search')}
+                className={`w-full p-4 rounded-xl border transition-all duration-200 text-left hover:shadow-md ${isDark
+                  ? 'bg-slate-700/50 border-blue-800/30 hover:border-green-500/50'
+                  : 'bg-white border-red-100 hover:border-red-300 hover:shadow-md'
+                  }`}
+              >
+                <div className="flex items-center gap-4">
+                  <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${isDark ? 'bg-green-500/20' : 'bg-green-100'
+                    }`}>
+                    <Layers className={`w-6 h-6 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className={`font-semibold ${textPrimary}`}>查看任务详情</h3>
+                    <p className={`text-sm ${textSecondary}`}>进入b1系统查看任务详情</p>
+                  </div>
+                  <ArrowRight className={`w-5 h-5 ${textMuted}`} />
+                </div>
+              </button>
+
+              {/* 多智能体会商 */}
+              <button
+                onClick={() => handleSelectAnalysisMode('consultation')}
+                className={`w-full p-4 rounded-xl border transition-all duration-200 text-left hover:shadow-md ${isDark
+                  ? 'bg-slate-700/50 border-blue-800/30 hover:border-orange-500/50'
+                  : 'bg-white border-red-100 hover:border-red-300 hover:shadow-md'
+                  }`}
+              >
+                <div className="flex items-center gap-4">
+                  <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${isDark ? 'bg-orange-500/20' : 'bg-red-100'
+                    }`}>
+                    <Users className={`w-6 h-6 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className={`font-semibold ${textPrimary}`}>多智能体会商</h3>
+                    <p className={`text-sm ${textSecondary}`}>多个AI智能体从不同视角开展讨论并形成共识</p>
+                  </div>
+                  <ArrowRight className={`w-5 h-5 ${textMuted}`} />
+                </div>
+              </button>
+
+              {/* 场景执行 */}
+              {/* <button
+                onClick={() => handleSelectAnalysisMode('scene')}
+                className={`w-full p-4 rounded-xl border transition-all duration-200 text-left hover:shadow-md ${isDark
+                  ? 'bg-slate-700/50 border-blue-800/30 hover:border-purple-500/50'
+                  : 'bg-white border-red-100 hover:border-red-300 hover:shadow-md'
+                  }`}
+              >
+                <div className="flex items-center gap-4">
+                  <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${isDark ? 'bg-purple-500/20' : 'bg-red-100'
+                    }`}>
+                    <Workflow className={`w-6 h-6 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className={`font-semibold ${textPrimary}`}>场景执行</h3>
+                    <p className={`text-sm ${textSecondary}`}>按照预设场景模板自动执行多阶段策略分析</p>
+                  </div>
+                  <ArrowRight className={`w-5 h-5 ${textMuted}`} />
+                </div>
+              </button> */}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TaskAnalyzes;
diff --git a/web-code/components/taskManagement/TaskCard.tsx b/web-code/components/taskManagement/TaskCard.tsx
new file mode 100644
index 00000000..e0a33267
--- /dev/null
+++ b/web-code/components/taskManagement/TaskCard.tsx
@@ -0,0 +1,299 @@
+import { useTheme } from '@/contexts/ThemeContext';
+import { TaskListItem } from '@/pages/TaskManagement';
+import { Bot, ChevronRight, Download, Edit, Eye, FileText, Layers, MoreHorizontal, Play, User, Users, Workflow } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import { PageType } from '../Sidebar';
+import { format } from 'date-fns';
+import { useNavigate } from 'react-router-dom';
+import { useChatContext } from '@/contexts/ChatContext';
+
+interface KanbanColumnProps {
+  TaskType?: string;
+  task: TaskListItem;
+  onNavigate: (page: PageType) => void;
+  handleStartAnalysis: (task: TaskListItem) => void
+}
+
+export const TaskCard: React.FC<KanbanColumnProps> = ({ task, TaskType = 'task', onNavigate, handleStartAnalysis }) => {
+  const { theme } = useTheme();
+  const { setStartConfig } = useChatContext();
+  const isDark = theme === 'dark';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textMuted = isDark ? 'text-slate-500' : 'text-gray-400';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const navigate = useNavigate();
+
+  const handleStartChange = (task: TaskListItem) => {
+    // if (TaskType === 'task') {
+    //   handleStartAnalysis(task);
+    // } else {
+    //   sceneDataChange(task);
+    // }
+    handleStartAnalysis(task);
+  }
+
+  const sceneDataChange = (task: TaskListItem) => {
+    const sceneItem = JSON.parse(task.scene);
+    if (sceneItem.taskJson) {
+      sceneItem.taskJson = JSON.parse(sceneItem.taskJson);
+      setStartConfig({
+        ...sceneItem.taskJson,
+        llm_preset_id: 'BAILING',
+        consistency_mode: 'soft',
+        phase_config: { diverge_rounds: 3 },
+        task_context: task.overview
+      });
+      navigate('/qa-center/mope-chat')
+    }
+    console.log('sceneItem', sceneItem);
+  }
+  // 处理卡片点击
+  const handleTaskClick = (task: TaskListItem) => {
+    if (TaskType === 'sentiment') {
+      console.log('点击了', task)
+      sceneDataChange(task);
+      // window.open(`http://ch1.b.uat.4.cn/taskcop/#/situation-overview/action/sentiment?taskId=${task.id}`)
+    } else {
+      if (task.column === 'completed') {
+        // if (task.type === 'consultation') {
+        //   onNavigate('task-consult-result');
+        // } else {
+        //   onNavigate('strategy-result');
+        // }
+        navigate('/strategy-result')
+      } else if (task.column === 'running') {
+        // navigate('/task-management/task-consult')
+        sceneDataChange(task);
+        // window.open(`http://ch1.b.uat.4.cn/mopeweb/#/mope?taskOverview=${task.overview}`)
+        // if (task.type === 'scene') {
+        //   onNavigate('task-scene');
+        // } else if (task.type === 'consultation') {
+        //   onNavigate('task-consult');
+        // } else {
+        //   onNavigate('task-single');
+        // }
+      }
+    }
+  };
+
+  // 获取任务类型配置
+  const getTypeConfig = (type: string) => {
+    if (isDark) {
+      switch (type) {
+        case 'single':
+          return { label: '单智能体', color: 'bg-cyan-500/20 text-cyan-400', icon: Bot };
+        case 'scene':
+          return { label: '场景执行', color: 'bg-purple-500/20 text-purple-400', icon: Workflow };
+        case 'consultation':
+          return { label: '多智能体会商', color: 'bg-orange-500/20 text-orange-400', icon: Users };
+        case 'multi-agent':
+          return { label: '多智能体协同', color: 'bg-green-500/20 text-green-400', icon: Layers };
+      }
+    } else {
+      switch (type) {
+        case 'single':
+          return { label: '单智能体', color: 'bg-blue-100 text-blue-600', icon: Bot };
+        case 'scene':
+          return { label: '场景执行', color: 'bg-purple-100 text-purple-600', icon: Workflow };
+        case 'consultation':
+          return { label: '多智能体会商', color: 'bg-orange-100 text-orange-600', icon: Users };
+        case 'multi-agent':
+          return { label: '多智能体协同', color: 'bg-green-100 text-green-600', icon: Layers };
+      }
+    }
+  };
+  const typeConfig = getTypeConfig('single');
+  // 获取任务等级
+  const getLevel = (type: number) => {
+    if (isDark) {
+      switch (type) {
+        case 1:
+          return { label: '一般', color: 'bg-cyan-500/20 text-cyan-400', icon: Bot };
+        case 2:
+          return { label: '紧急', color: 'bg-purple-500/20 text-purple-400', icon: Workflow };
+        case 3:
+          return { label: '加急', color: 'bg-orange-500/20 text-orange-400', icon: Users };
+      }
+    } else {
+      switch (type) {
+        case 1:
+          return { label: '一般', color: 'bg-blue-100 text-blue-600', icon: Bot };
+        case 2:
+          return { label: '紧急', color: 'bg-purple-100 text-purple-600', icon: Workflow };
+        case 3:
+          return { label: '加急', color: 'bg-orange-100 text-orange-600', icon: Users };
+      }
+    }
+  };
+
+  const levelConfig = getLevel(task.taskLevel);
+  const LevelIcon = levelConfig?.icon || Bot;
+  // 获取状态配置
+  const getStatusConfig = (column: string) => {
+    if (column === 'unanalyzed') {
+      return { label: '待分析', color: isDark ? 'bg-yellow-500/20 text-yellow-400' : 'bg-yellow-100 text-yellow-600' };
+    } else if (column === 'running') {
+      return { label: '运行中', color: isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-red-100 text-red-600' };
+    } else {
+      return { label: '已完成', color: isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-600' };
+    }
+  };
+  const statusConfig = getStatusConfig(task.column);
+  return (
+    <div
+      className={`rounded-xl p-4 hover:shadow-md transition-all duration-200 cursor-pointer group theme-card border ${isDark
+        ? 'bg-slate-800/40 backdrop-blur-xl border-blue-800/30 hover:border-blue-500/50'
+        : 'bg-white border-red-100 hover:shadow-md shadow-red-100'
+        }`}
+      onClick={() => handleTaskClick(task)}
+    >
+      {/* 卡片头部：模式标签 + 状态标签 */}
+      <div className="flex items-center justify-between mb-2">
+        <span className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded text-xs font-medium ${levelConfig.color}`}>
+          {LevelIcon && <LevelIcon className="w-3 h-3" />}
+          {levelConfig.label}
+        </span>
+        <span></span>
+        <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${statusConfig.color}`}>
+          {statusConfig.label}
+        </span>
+      </div>
+
+      {/* 任务名称 */}
+      <h3 className={`font-semibold text-sm mb-1 line-clamp-2 group-hover:text-red-500 transition-colors ${textPrimary}`}>
+        {task.taskName}
+      </h3>
+
+      {/* 任务编号 */}
+      <p className={`text-xs mb-2 ${textMuted}`}>TASK-{task.id}</p>
+
+      {/* 任务摘要 */}
+      <p className={`text-xs mb-3 line-clamp-2 ${textSecondary}`}>{task.overview}</p>
+
+      {/* 补充信息区 */}
+      {/* <div className="space-y-1 mb-3">
+          {task.type === 'single' && task.agent && (
+            <div className="flex items-center gap-2 text-xs">
+              <Bot className={`w-3 h-3 ${isDark ? 'text-cyan-400' : 'text-red-500'}`} />
+              <span className={textSecondary}>执行智能体：</span>
+              <span className={isDark ? 'text-cyan-400' : 'text-red-600'}>{task.agent}</span>
+            </div>
+          )}
+          {task.type === 'scene' && task.scene && (
+            <div className="flex items-center gap-2 text-xs">
+              <Workflow className={`w-3 h-3 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
+              <span className={textSecondary}>关联场景：</span>
+              <span className={isDark ? 'text-purple-400' : 'text-red-600'}>{task.scene}</span>
+            </div>
+          )}
+          {task.type === 'consultation' && (
+            <>
+              <div className="flex items-center gap-2 text-xs">
+                <Users className={`w-3 h-3 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
+                <span className={textSecondary}>参与智能体：</span>
+                <span className={isDark ? 'text-orange-400' : 'text-red-600'}>{task.participants?.length || 0}个</span>
+              </div>
+              {task.currentRound && (
+                <div className="flex items-center gap-2 text-xs">
+                  <Clock className={`w-3 h-3 ${textMuted}`} />
+                  <span className={textSecondary}>当前轮次：</span>
+                  <span className={textPrimary}>第{task.currentRound}轮</span>
+                </div>
+              )}
+            </>
+          )}
+          {task.column === 'analyzing' && task.currentPhase && (
+            <div className="flex items-center gap-2 text-xs">
+              <Target className={`w-3 h-3 ${textMuted}`} />
+              <span className={textSecondary}>当前阶段：</span>
+              <span className={textPrimary}>{task.currentPhase}</span>
+            </div>
+          )}
+        </div> */}
+
+      {/* 时间信息 */}
+      <div className={`flex items-center justify-between text-xs pt-3 border-t ${isDark ? 'border-blue-800/30 text-slate-500' : 'border-red-100 text-gray-400'
+        }`}>
+        <div className="flex items-center gap-1.5">
+          <User className="w-3 h-3" />
+          <span>{task.taskDirection}</span>
+        </div>
+        <span>{format(new Date(task.updateTime), 'yyyy-MM-dd HH:mm:ss')}</span>
+      </div>
+
+      {/* 操作按钮区 */}
+      <div className={`flex items-center gap-2 mt-3 pt-3 border-t ${isDark ? 'border-blue-800/30' : 'border-red-100'
+        }`}>
+        {task.column === 'unanalyzed' && (
+          <>
+            <button
+              onClick={(e) => { e.stopPropagation(); handleStartChange(task); }}
+              className={`flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-white rounded-lg text-xs font-medium transition-colors ${isDark
+                ? 'bg-blue-600 hover:bg-blue-500'
+                : 'bg-red-600 hover:bg-red-500 shadow-md'
+                }`}
+            >
+              <Play className="w-3 h-3" />
+              开始分析
+            </button>
+            {/* <button
+              onClick={(e) => { e.stopPropagation(); onNavigate('task-create'); }}
+              className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'
+                }`}
+              title="编辑"
+            >
+              <Edit className={`w-4 h-4 ${isDark ? 'text-slate-400' : 'text-red-400'}`} />
+            </button> */}
+          </>
+        )}
+        {task.column === 'running' && (
+          <>
+            <button
+              onClick={(e) => { e.stopPropagation(); handleStartChange(task); }}
+              className={`flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-white rounded-lg text-xs font-medium transition-colors ${isDark
+                ? 'bg-blue-600 hover:bg-blue-500'
+                : 'bg-red-600 hover:bg-red-500 shadow-md'
+                }`}
+            >
+              <Play className="w-3 h-3" />
+              开始分析
+            </button>
+            {/* <button
+              onClick={(e) => { e.stopPropagation(); handleStartChange(task); }}
+              className={`px-2 py-1.5 rounded-lg text-xs transition-colors ${isDark
+                ? 'hover:bg-slate-700/50 border border-blue-800/30 text-slate-300'
+                : 'hover:bg-red-50 border border-red-200 text-red-600'
+                }`}
+            >
+              查看进展
+            </button> */}
+          </>
+        )}
+        {task.column === 'completed' && (
+          <>
+            <button
+              onClick={(e) => { e.stopPropagation(); handleStartChange(task); }}
+              className={`flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-white rounded-lg text-xs font-medium transition-colors ${isDark
+                ? 'bg-green-600 hover:bg-green-500'
+                : 'bg-green-600 hover:bg-green-500 shadow-md'
+                }`}
+            >
+              <Eye className="w-3 h-3" />
+              开始分析
+            </button>
+            {/* <button className={`px-2 py-1.5 rounded-lg text-xs transition-colors ${isDark
+              ? 'hover:bg-slate-700/50 border border-blue-800/30 text-slate-300'
+              : 'hover:bg-red-50 border border-red-200 text-red-600'
+              }`}>
+              <Download className="w-4 h-4" />
+            </button> */}
+          </>
+        )}
+        {/* <button className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'
+          }`} title="更多">
+          <MoreHorizontal className={`w-4 h-4 ${isDark ? 'text-slate-400' : 'text-red-400'}`} />
+        </button> */}
+      </div>
+    </div>
+  );
+}
diff --git a/web-code/components/taskManagement/TaskConsult.tsx b/web-code/components/taskManagement/TaskConsult.tsx
new file mode 100644
index 00000000..36e1eb67
--- /dev/null
+++ b/web-code/components/taskManagement/TaskConsult.tsx
@@ -0,0 +1,626 @@
+import React, { useState } from 'react';
+import {
+  ArrowLeft,
+  Bot,
+  Users,
+  Play,
+  Pause,
+  Download,
+  CheckCircle,
+  ChevronRight,
+  MessageSquare,
+  Send,
+  Star,
+  AlertCircle,
+  FileText,
+  Settings,
+  Lightbulb,
+  Zap,
+  Check,
+  X,
+  Minus,
+} from 'lucide-react';
+import { useTheme } from '@/contexts/ThemeContext';
+import { PageType } from '@/components/Sidebar';
+
+interface TaskConsultProps {
+  onNavigate: (page: PageType) => void;
+}
+
+// 模拟参与智能体
+const participants = [
+  {
+    id: 'goal',
+    name: 'GoalAgent',
+    role: '目标分析专家',
+    color: 'blue',
+    status: 'idle' as const,
+    lastOpinion: '建议聚焦提升品牌认知度这一核心目标',
+  },
+  {
+    id: 'audience',
+    name: 'AudienceAgent',
+    role: '受众分析专家',
+    color: 'cyan',
+    status: 'speaking' as const,
+    lastOpinion: '核心受众应为18-25岁基层青年群体',
+  },
+  {
+    id: 'narrative',
+    name: 'NarrativeAgent',
+    role: '叙事策略专家',
+    color: 'purple',
+    status: 'idle' as const,
+    lastOpinion: '应采用真实、有态度的青年故事叙事',
+  },
+  {
+    id: 'risk',
+    name: 'RiskAgent',
+    role: '风险评估专家',
+    color: 'red',
+    status: 'idle' as const,
+    lastOpinion: '需注意UGC质量不稳定和话题热度维持的风险',
+  },
+];
+
+// 模拟讨论记录
+const discussionRecords = [
+  {
+    id: 1,
+    agentId: 'goal',
+    agentName: 'GoalAgent',
+    agentRole: '目标分析专家',
+    color: 'blue',
+    content: `从目标分析角度看，这次五四青年节宣传活动应聚焦以下核心目标：
+
+**主目标**：提升品牌在Z世代用户中的认知度
+
+**量化指标建议**：
+- 曝光量：500万+
+- 互动率：5%+
+- UGC数量：1000+
+
+**优先级判断**：
+建议优先聚焦品牌认知度提升，短期内不追求直接转化。这样可以更好地与目标受众建立情感连接。`,
+    time: '14:30',
+    tags: ['核心目标', '品牌认知'],
+    markedAs: null as string | null,
+  },
+  {
+    id: 2,
+    agentId: 'audience',
+    agentName: 'AudienceAgent',
+    agentRole: '受众分析专家',
+    color: 'cyan',
+    content: `基于受众分析，我建议：
+
+**核心受众画像**：
+- 年龄：18-25岁
+- 身份：学生、基层青年工作者
+- 地域：一二线城市为主
+
+**关键洞察**：
+这部分群体是社交媒体重度用户，注重"真实感"和"态度感"，反感过度营销。需要用平等对话的方式，而非说教式传播。
+
+**内容偏好**：
+真实故事 > 精致包装
+态度表达 > 信息堆砌
+参与互动 > 被动观看`,
+    time: '14:32',
+    tags: ['受众画像', '内容偏好'],
+    markedAs: 'valuable' as string | null,
+  },
+  {
+    id: 3,
+    agentId: 'narrative',
+    agentName: 'NarrativeAgent',
+    agentRole: '叙事策略专家',
+    color: 'purple',
+    content: `从叙事策略角度，我建议采用以下框架：
+
+**叙事主题**：真实、有态度的青年故事
+
+**叙事结构**：
+1. 讲述真实的人物故事
+2. 引发情感共鸣
+3. 传递品牌价值观
+4. 激发用户参与
+
+**关键要素**：
+- 真实感 > 精致感
+- 态度感 > 说教感
+- 参与感 > 观看感
+
+**内容类型建议**：
+- 人物专访型：真实青年故事
+- 事件记录型：青年节活动现场
+- 观点表达型：青年态度宣言`,
+    time: '14:35',
+    tags: ['叙事框架', '内容类型'],
+    markedAs: null as string | null,
+  },
+  {
+    id: 4,
+    agentId: 'risk',
+    agentName: 'RiskAgent',
+    agentRole: '风险评估专家',
+    color: 'red',
+    content: `我需要提醒以下风险：
+
+**高风险项**：
+1. 内容质量不稳定
+   - 风险：UGC质量参差不齐
+   - 对策：建立内容审核机制
+
+**中风险项**：
+2. 预算控制难度大
+   - 风险：投放效果不可控
+   - 对策：分阶段预算分配
+
+3. 青年群体注意力分散
+   - 风险：话题热度难维持
+   - 对策：多波次内容规划
+
+**建议**：重点关注内容质量风险，建立审核机制。`,
+    time: '14:38',
+    tags: ['风险识别', '应对建议'],
+    markedAs: 'pending' as string | null,
+  },
+];
+
+const TaskConsult: React.FC<TaskConsultProps> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const [isPaused, setIsPaused] = useState(false);
+  const [currentRound, setCurrentRound] = useState(2);
+  const [currentTopic, setCurrentTopic] = useState('宣传策略方向选择');
+  const [humanInput, setHumanInput] = useState('');
+  const [consensusPoints] = useState([
+    '核心受众应聚焦18-25岁基层青年',
+    '内容应以真实、有态度为核心',
+  ]);
+  const [disputedPoints] = useState([
+    '叙事角度：事件叙事 vs 人物叙事',
+    '传播渠道：短视频平台 vs 社交媒体',
+  ]);
+  const [humanNotes, setHumanNotes] = useState('');
+
+  const getColorClasses = (color: string) => {
+    const colors: Record<string, { bg: string; border: string; text: string }> = {
+      blue: { bg: isDark ? 'bg-blue-500/20' : 'bg-blue-50', border: isDark ? 'border-blue-500/50' : 'border-blue-200', text: isDark ? 'text-blue-400' : 'text-blue-600' },
+      cyan: { bg: isDark ? 'bg-cyan-500/20' : 'bg-cyan-50', border: isDark ? 'border-cyan-500/50' : 'border-cyan-200', text: isDark ? 'text-cyan-400' : 'text-cyan-600' },
+      green: { bg: isDark ? 'bg-green-500/20' : 'bg-green-50', border: isDark ? 'border-green-500/50' : 'border-green-200', text: isDark ? 'text-green-400' : 'text-green-600' },
+      yellow: { bg: isDark ? 'bg-yellow-500/20' : 'bg-yellow-50', border: isDark ? 'border-yellow-500/50' : 'border-yellow-200', text: isDark ? 'text-yellow-400' : 'text-yellow-600' },
+      purple: { bg: isDark ? 'bg-purple-500/20' : 'bg-purple-50', border: isDark ? 'border-purple-500/50' : 'border-purple-200', text: isDark ? 'text-purple-400' : 'text-purple-600' },
+      red: { bg: isDark ? 'bg-red-500/20' : 'bg-red-50', border: isDark ? 'border-red-500/50' : 'border-red-200', text: isDark ? 'text-red-400' : 'text-red-600' },
+    };
+    return colors[color] || colors.blue;
+  };
+
+  const getStatusConfig = (status: string) => {
+    switch (status) {
+      case 'speaking':
+        return { label: '发言中', color: isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-700', dot: isDark ? 'bg-green-400' : 'bg-green-500' };
+      case 'completed':
+        return { label: '已完成', color: isDark ? 'bg-slate-500/20 text-slate-400' : 'bg-gray-100 text-gray-600', dot: isDark ? 'bg-slate-400' : 'bg-gray-400' };
+      default:
+        return { label: '待发言', color: isDark ? 'bg-slate-500/20 text-slate-400' : 'bg-gray-100 text-gray-600', dot: isDark ? 'bg-slate-400' : 'bg-gray-400' };
+    }
+  };
+
+  const handleNextRound = () => {
+    setCurrentRound(currentRound + 1);
+  };
+
+  const handleFinishConsult = () => {
+    onNavigate('task-consult-result');
+  };
+
+  // 主题颜色类
+  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
+  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const textMuted = isDark ? 'text-slate-500' : 'text-gray-500';
+  const btnSecondary = isDark ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300' : 'bg-gray-100 hover:bg-gray-200 border-gray-300 text-gray-700';
+  const btnPrimary = isDark ? 'bg-blue-600 hover:bg-blue-500' : 'bg-red-600 hover:bg-red-500';
+  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-gray-50';
+  const inputBorder = isDark ? 'border-blue-800/30' : 'border-gray-300';
+
+  return (
+    <div className="h-[calc(100vh-140px)] flex flex-col space-y-4">
+      {/* 顶部信息栏 */}
+      <div className={`${cardBg} backdrop-blur-xl border ${cardBorder} rounded-xl p-4 flex-shrink-0`}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => onNavigate('task-list')}
+              className={`flex items-center gap-2 px-3 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}
+            >
+              <ArrowLeft className="w-4 h-4" />
+              返回
+            </button>
+            <div className={`h-8 w-px ${isDark ? 'bg-blue-800/30' : 'bg-red-200'}`} />
+            <div>
+              <h1 className={`${textPrimary} font-bold text-lg`}>五四青年节宣传策略会商</h1>
+              <p className={`${textSecondary} text-sm`}>多智能体会商任务 · 第 {currentRound} 轮</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-4 text-sm">
+              <span className={textSecondary}>
+                模式：<span className={isDark ? 'text-purple-400' : 'text-purple-600'}>受控交叉讨论</span>
+              </span>
+              <span className={textSecondary}>
+                参与：<span className={isDark ? 'text-cyan-400' : 'text-cyan-600'}>{participants.length} 个智能体</span>
+              </span>
+              <span className={textSecondary}>
+                创建：<span className={textPrimary}>2026-03-19 14:30</span>
+              </span>
+            </div>
+            <div className={`h-8 w-px ${isDark ? 'bg-blue-800/30' : 'bg-red-200'}`} />
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => setIsPaused(!isPaused)}
+                className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors ${
+                  isPaused
+                    ? (isDark ? 'bg-green-500/20 hover:bg-green-500/30 border-green-500/50 text-green-400' : 'bg-green-100 hover:bg-green-200 border-green-300 text-green-700')
+                    : (isDark ? 'bg-yellow-500/20 hover:bg-yellow-500/30 border-yellow-500/50 text-yellow-400' : 'bg-yellow-100 hover:bg-yellow-200 border-yellow-300 text-yellow-700')
+                }`}
+              >
+                {isPaused ? <Play className="w-4 h-4" /> : <Pause className="w-4 h-4" />}
+                {isPaused ? '继续会商' : '暂停会商'}
+              </button>
+              <button className={`flex items-center gap-2 px-3 py-1.5 ${btnSecondary} rounded-lg text-sm transition-colors`}>
+                <Download className="w-4 h-4" />
+                导出纪要
+              </button>
+              <button
+                onClick={handleFinishConsult}
+                className="flex items-center gap-2 px-3 py-1.5 bg-orange-600 hover:bg-orange-500 text-white rounded-lg text-sm transition-colors"
+              >
+                <CheckCircle className="w-4 h-4" />
+                结束并整合
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 三栏主体区域 */}
+      <div className="flex-1 grid grid-cols-12 gap-4 min-h-0">
+        {/* 左栏：参与智能体与议题导航 */}
+        <div className="col-span-3 flex flex-col gap-4 min-h-0">
+          {/* 参与智能体 */}
+          <div className={`${cardBg} backdrop-blur-xl border ${cardBorder} rounded-xl p-4 flex-1 overflow-hidden flex flex-col`}>
+            <h3 className={`${textPrimary} font-semibold text-sm mb-3 flex items-center gap-2`}>
+              <Users className={`w-4 h-4 ${isDark ? 'text-purple-400' : 'text-purple-600'}`} />
+              参与智能体
+            </h3>
+            <div className="space-y-2 flex-1 overflow-y-auto">
+              {participants.map((agent) => {
+                const colors = getColorClasses(agent.color);
+                const statusConfig = getStatusConfig(agent.status);
+                return (
+                  <div
+                    key={agent.id}
+                    className={`p-3 rounded-lg border transition-all ${
+                      agent.status === 'speaking'
+                        ? `${colors.bg} ${colors.border}`
+                        : isDark ? 'bg-slate-900/50 border-blue-800/30' : 'bg-gray-50 border-gray-200'
+                    }`}
+                  >
+                    <div className="flex items-center justify-between mb-2">
+                      <div className="flex items-center gap-2">
+                        <div className={`w-8 h-8 rounded-lg ${colors.bg} flex items-center justify-center`}>
+                          <Bot className={`w-4 h-4 ${colors.text}`} />
+                        </div>
+                        <div>
+                          <p className={`text-sm font-medium ${agent.status === 'speaking' ? colors.text : textPrimary}`}>
+                            {agent.name}
+                          </p>
+                          <p className={`${textMuted} text-xs`}>{agent.role}</p>
+                        </div>
+                      </div>
+                      <span className={`px-1.5 py-0.5 rounded text-xs ${statusConfig.color}`}>
+                        {statusConfig.label}
+                      </span>
+                    </div>
+                    {agent.lastOpinion && (
+                      <p className={`${textSecondary} text-xs line-clamp-2 pl-10`}>{agent.lastOpinion}</p>
+                    )}
+                    <button
+                      className={`mt-2 w-full px-2 py-1.5 rounded text-xs transition-colors ${
+                        agent.status === 'speaking'
+                          ? (isDark ? 'bg-slate-700/50 text-slate-400 cursor-not-allowed' : 'bg-gray-200 text-gray-500 cursor-not-allowed')
+                          : (isDark ? 'bg-purple-500/20 hover:bg-purple-500/30 text-purple-400' : 'bg-purple-100 hover:bg-purple-200 text-purple-700')
+                      }`}
+                      disabled={agent.status === 'speaking'}
+                    >
+                      点名发言
+                    </button>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* 会商议题导航 */}
+          <div className={`${cardBg} backdrop-blur-xl border ${cardBorder} rounded-xl p-4`}>
+            <h3 className={`${textPrimary} font-semibold text-sm mb-3 flex items-center gap-2`}>
+              <MessageSquare className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-blue-600'}`} />
+              会商议题
+            </h3>
+            <div className="space-y-2">
+              <div className={`p-3 rounded-lg border ${isDark ? 'bg-green-500/20 border-green-500/50' : 'bg-green-50 border-green-300'}`}>
+                <p className={`text-sm font-medium ${isDark ? 'text-green-400' : 'text-green-700'}`}>当前议题</p>
+                <p className={`${textPrimary} text-sm mt-1`}>{currentTopic}</p>
+              </div>
+              <div className={`p-3 rounded-lg border ${isDark ? 'bg-slate-900/50 border-blue-800/30' : 'bg-gray-50 border-gray-200'}`}>
+                <p className={`${textMuted} text-xs mb-1`}>待讨论</p>
+                <p className={isDark ? 'text-slate-300 text-sm' : 'text-gray-700 text-sm'}>渠道策略选择</p>
+                <p className={isDark ? 'text-slate-300 text-sm' : 'text-gray-700 text-sm'}>预算分配方案</p>
+              </div>
+              <div className={`p-3 rounded-lg border ${isDark ? 'bg-slate-900/50 border-blue-800/30' : 'bg-gray-50 border-gray-200'}`}>
+                <p className={`${textMuted} text-xs mb-1`}>已讨论</p>
+                <p className={`${textMuted} text-sm line-through`}>受众定位</p>
+                <p className={`${textMuted} text-sm line-through`}>目标设定</p>
+              </div>
+            </div>
+            <div className="mt-3 flex gap-2">
+              <button className={`flex-1 px-2 py-1.5 ${btnSecondary} rounded-lg text-xs transition-colors`}>
+                切换议题
+              </button>
+              <button className={`flex-1 px-2 py-1.5 ${btnSecondary} rounded-lg text-xs transition-colors`}>
+                结束议题
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* 中栏：会商讨论区 */}
+        <div className="col-span-6 flex flex-col gap-4 min-h-0">
+          {/* 当前议题卡 */}
+          <div className={`${cardBg} backdrop-blur-xl border ${cardBorder} rounded-xl p-4 flex-shrink-0`}>
+            <div className="flex items-center justify-between">
+              <div>
+                <p className={`${textSecondary} text-xs`}>当前议题</p>
+                <p className={`${textPrimary} font-medium mt-0.5`}>{currentTopic}</p>
+              </div>
+              <div className="flex items-center gap-3">
+                <span className={`px-2 py-1 rounded text-xs ${isDark ? 'bg-purple-500/20 text-purple-400' : 'bg-purple-100 text-purple-700'}`}>
+                  受控交叉讨论模式
+                </span>
+                <span className={`px-2 py-1 rounded text-xs ${isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-blue-100 text-blue-700'}`}>
+                  第 {currentRound} 轮
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* 讨论流 */}
+          <div className={`${cardBg} backdrop-blur-xl border ${cardBorder} rounded-xl overflow-hidden flex flex-col`}>
+            <div className={`p-4 border-b ${isDark ? 'border-blue-800/30' : 'border-gray-200'} flex items-center justify-between`}>
+              <h3 className={`${textPrimary} font-semibold text-sm`}>讨论记录</h3>
+              <button
+                onClick={handleNextRound}
+                className={`flex items-center gap-2 px-3 py-1.5 ${btnPrimary} bg-opacity-20 hover:bg-opacity-30 ${isDark ? 'border border-blue-500/30 text-blue-400' : 'border border-red-400 text-red-600'} rounded-lg text-xs transition-colors`}
+              >
+                <ChevronRight className="w-4 h-4" />
+                下一轮
+              </button>
+            </div>
+            <div className="flex-1 overflow-y-auto p-4 space-y-4">
+              {discussionRecords.map((record) => {
+                const colors = getColorClasses(record.color);
+                return (
+                  <div
+                    key={record.id}
+                    className={`p-4 rounded-xl border ${
+                      record.markedAs === 'valuable'
+                        ? (isDark ? 'bg-green-500/10 border-green-500/30' : 'bg-green-50 border-green-300')
+                        : record.markedAs === 'pending'
+                        ? (isDark ? 'bg-yellow-500/10 border-yellow-500/30' : 'bg-yellow-50 border-yellow-300')
+                        : (isDark ? 'bg-slate-900/50 border-blue-800/30' : 'bg-gray-50 border-gray-200')
+                    }`}
+                  >
+                    <div className="flex items-start justify-between mb-3">
+                      <div className="flex items-center gap-3">
+                        <div className={`w-10 h-10 rounded-lg ${colors.bg} flex items-center justify-center`}>
+                          <Bot className={`w-5 h-5 ${colors.text}`} />
+                        </div>
+                        <div>
+                          <div className="flex items-center gap-2">
+                            <p className={`text-sm font-medium ${colors.text}`}>{record.agentName}</p>
+                            {record.markedAs === 'valuable' && (
+                              <span className={`px-1.5 py-0.5 rounded text-xs flex items-center gap-0.5 ${isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-700'}`}>
+                                <Star className="w-3 h-3" /> 有价值
+                              </span>
+                            )}
+                            {record.markedAs === 'pending' && (
+                              <span className={`px-1.5 py-0.5 rounded text-xs flex items-center gap-0.5 ${isDark ? 'bg-yellow-500/20 text-yellow-400' : 'bg-yellow-100 text-yellow-700'}`}>
+                                <AlertCircle className="w-3 h-3" /> 待验证
+                              </span>
+                            )}
+                          </div>
+                          <p className={`${textMuted} text-xs`}>{record.agentRole} · {record.time}</p>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <button
+                          className={`p-1.5 rounded transition-colors ${isDark ? 'hover:bg-green-500/20' : 'hover:bg-green-100'}`}
+                          title="标记为有价值"
+                        >
+                          <Star className={`w-4 h-4 ${isDark ? 'text-slate-400 hover:text-green-400' : 'text-gray-500 hover:text-green-600'}`} />
+                        </button>
+                        <button
+                          className={`p-1.5 rounded transition-colors ${isDark ? 'hover:bg-yellow-500/20' : 'hover:bg-yellow-100'}`}
+                          title="标记为待验证"
+                        >
+                          <AlertCircle className={`w-4 h-4 ${isDark ? 'text-slate-400 hover:text-yellow-400' : 'text-gray-500 hover:text-yellow-600'}`} />
+                        </button>
+                        <button
+                          className={`p-1.5 rounded transition-colors ${isDark ? 'hover:bg-red-500/20' : 'hover:bg-red-100'}`}
+                          title="暂不采纳"
+                        >
+                          <X className={`w-4 h-4 ${isDark ? 'text-slate-400 hover:text-red-400' : 'text-gray-500 hover:text-red-600'}`} />
+                        </button>
+                      </div>
+                    </div>
+                    <div className="pl-13">
+                      <div className={`${isDark ? 'text-slate-300' : 'text-gray-700'} text-sm whitespace-pre-wrap leading-relaxed`}>
+                        {record.content}
+                      </div>
+                      <div className="flex items-center gap-2 mt-3">
+                        {record.tags.map((tag) => (
+                          <span key={tag} className={`px-2 py-0.5 rounded text-xs ${isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-blue-100 text-blue-700'}`}>
+                            {tag}
+                          </span>
+                        ))}
+                      </div>
+                      <div className="flex items-center gap-2 mt-3">
+                        <button className={`flex items-center gap-1 px-2 py-1 ${btnSecondary} rounded text-xs transition-colors`}>
+                          <FileText className="w-3 h-3" />
+                          引用到整合区
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* 人工发言区 */}
+          <div className={`${cardBg} backdrop-blur-xl border ${cardBorder} rounded-xl p-4 flex-shrink-0`}>
+            <div className="flex items-start gap-3">
+              <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${isDark ? 'bg-blue-500/20' : 'bg-blue-100'}`}>
+                <Users className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-blue-600'}`} />
+              </div>
+              <div className="flex-1">
+                <textarea
+                  value={humanInput}
+                  onChange={(e) => setHumanInput(e.target.value)}
+                  placeholder="输入您的评论、问题或指令... (可点名某个智能体：@GoalAgent)"
+                  rows={2}
+                  className={`w-full px-4 py-2.5 ${inputBg} border ${inputBorder} rounded-lg ${textPrimary} text-sm ${isDark ? 'placeholder-slate-500' : 'placeholder-gray-400'} focus:outline-none ${isDark ? 'focus:border-blue-500/50' : 'focus:border-red-400'} transition-colors resize-none`}
+                />
+                <div className="flex items-center justify-between mt-2">
+                  <div className="flex items-center gap-2">
+                    <button className={`px-2 py-1 ${btnSecondary} rounded text-xs transition-colors`}>
+                      点名提问
+                    </button>
+                    <button className={`px-2 py-1 ${btnSecondary} rounded text-xs transition-colors`}>
+                      发起对比问题
+                    </button>
+                    <button className={`px-2 py-1 ${btnSecondary} rounded text-xs transition-colors`}>
+                      要求补充说明
+                    </button>
+                  </div>
+                  <button
+                    disabled={!humanInput.trim()}
+                    className={`flex items-center gap-2 px-4 py-2 ${btnPrimary} disabled:${isDark ? 'bg-slate-700 text-slate-500' : 'bg-gray-300 text-gray-500'} text-white rounded-lg text-sm transition-colors`}
+                  >
+                    <Send className="w-4 h-4" />
+                    发送
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 右栏：观点整合区 */}
+        <div className="col-span-3 flex flex-col gap-4 min-h-0">
+          {/* 各智能体核心观点 */}
+          <div className={`${cardBg} backdrop-blur-xl border ${cardBorder} rounded-xl p-4 flex-1 overflow-hidden flex flex-col`}>
+            <h3 className={`${textPrimary} font-semibold text-sm mb-3 flex items-center gap-2`}>
+              <Bot className={`w-4 h-4 ${isDark ? 'text-cyan-400' : 'text-cyan-600'}`} />
+              各方观点
+            </h3>
+            <div className="space-y-3 flex-1 overflow-y-auto">
+              {participants.map((agent) => {
+                const colors = getColorClasses(agent.color);
+                return (
+                  <div key={agent.id} className={`p-3 rounded-lg ${isDark ? 'bg-slate-900/50 border-blue-800/30' : 'bg-gray-50 border-gray-200'}`}>
+                    <div className="flex items-center gap-2 mb-2">
+                      <Bot className={`w-4 h-4 ${colors.text}`} />
+                      <span className={`text-sm font-medium ${colors.text}`}>{agent.name}</span>
+                    </div>
+                    <p className={`${textSecondary} text-xs line-clamp-3`}>{agent.lastOpinion}</p>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* 共识观点 */}
+          <div className={`${cardBg} backdrop-blur-xl border ${isDark ? 'border-green-800/30' : 'border-green-300'} rounded-xl p-4`}>
+            <h3 className={`${textPrimary} font-semibold text-sm mb-3 flex items-center gap-2`}>
+              <Check className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
+              共识观点
+              <span className={`px-1.5 py-0.5 rounded text-xs ml-auto ${isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-700'}`}>
+                {consensusPoints.length} 条
+              </span>
+            </h3>
+            <div className="space-y-2">
+              {consensusPoints.map((point, index) => (
+                <div key={index} className={`p-2 rounded-lg ${isDark ? 'bg-green-500/10 border border-green-500/30' : 'bg-green-50 border border-green-200'}`}>
+                  <p className={isDark ? 'text-green-300 text-sm' : 'text-green-800 text-sm'}>{point}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* 分歧观点 */}
+          <div className={`${cardBg} backdrop-blur-xl border ${isDark ? 'border-yellow-800/30' : 'border-yellow-300'} rounded-xl p-4`}>
+            <h3 className={`${textPrimary} font-semibold text-sm mb-3 flex items-center gap-2`}>
+              <Minus className={`w-4 h-4 ${isDark ? 'text-yellow-400' : 'text-yellow-600'}`} />
+              分歧观点
+              <span className={`px-1.5 py-0.5 rounded text-xs ml-auto ${isDark ? 'bg-yellow-500/20 text-yellow-400' : 'bg-yellow-100 text-yellow-700'}`}>
+                {disputedPoints.length} 条
+              </span>
+            </h3>
+            <div className="space-y-2">
+              {disputedPoints.map((point, index) => (
+                <div key={index} className={`p-2 rounded-lg ${isDark ? 'bg-yellow-500/10 border border-yellow-500/30' : 'bg-yellow-50 border border-yellow-200'}`}>
+                  <p className={isDark ? 'text-yellow-300 text-sm' : 'text-yellow-800 text-sm'}>{point}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* 人工整合区 */}
+          <div className={`${cardBg} backdrop-blur-xl border ${isDark ? 'border-purple-800/30' : 'border-purple-300'} rounded-xl p-4 flex-1 overflow-hidden flex flex-col`}>
+            <h3 className={`${textPrimary} font-semibold text-sm mb-3 flex items-center gap-2`}>
+              <Zap className={`w-4 h-4 ${isDark ? 'text-purple-400' : 'text-purple-600'}`} />
+              人工整合
+            </h3>
+            <textarea
+              value={humanNotes}
+              onChange={(e) => setHumanNotes(e.target.value)}
+              placeholder="记录您的判断、暂定方向、待确认事项..."
+              className={`flex-1 min-h-[120px] px-3 py-2 ${inputBg} border ${inputBorder} rounded-lg ${textPrimary} text-sm ${isDark ? 'placeholder-slate-500' : 'placeholder-gray-400'} focus:outline-none ${isDark ? 'focus:border-blue-500/50' : 'focus:border-red-400'} transition-colors resize-none`}
+            />
+            <div className="flex flex-col gap-2 mt-3">
+              <button className={`w-full flex items-center justify-center gap-2 px-3 py-2 ${isDark ? 'bg-purple-600 hover:bg-purple-500' : 'bg-purple-600 hover:bg-purple-500'} text-white rounded-lg text-xs font-medium transition-colors`}>
+                <Lightbulb className="w-4 h-4" />
+                生成会商结论
+              </button>
+              <button className={`w-full flex items-center justify-center gap-2 px-3 py-2 ${btnSecondary} rounded-lg text-xs transition-colors`}>
+                <FileText className="w-4 h-4" />
+                转为任务摘要
+              </button>
+              <button className={`w-full flex items-center justify-center gap-2 px-3 py-2 ${btnSecondary} rounded-lg text-xs transition-colors`}>
+                <Settings className="w-4 h-4" />
+                转为场景任务输入
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TaskConsult;
diff --git a/web-code/components/taskManagement/TaskConsultCreate.tsx b/web-code/components/taskManagement/TaskConsultCreate.tsx
new file mode 100644
index 00000000..dfe0ce29
--- /dev/null
+++ b/web-code/components/taskManagement/TaskConsultCreate.tsx
@@ -0,0 +1,572 @@
+import React, { useState } from 'react';
+import {
+  ArrowLeft,
+  Bot,
+  Users,
+  Settings,
+  FileText,
+  Upload,
+  Play,
+  Save,
+  Search,
+  CheckCircle,
+  MessageSquare,
+  Lightbulb,
+  Target,
+  AlertCircle,
+  Sparkles,
+} from 'lucide-react';
+import { useTheme } from '@/contexts/ThemeContext';
+import { PageType } from '@/components/Sidebar';
+
+interface TaskConsultCreateProps {
+  onNavigate: (page: PageType) => void;
+}
+
+// 可选智能体列表
+const availableAgents = [
+  {
+    id: 'goal',
+    name: 'GoalAgent',
+    role: '目标分析专家',
+    description: '分析业务目标，提取核心KPI和成功标准',
+    color: 'blue',
+    tags: ['目标分解', 'KPI提取'],
+    recommended: true,
+  },
+  {
+    id: 'audience',
+    name: 'AudienceAgent',
+    role: '受众分析专家',
+    description: '定义目标受众画像，分析用户特征和需求',
+    color: 'cyan',
+    tags: ['用户画像', '行为分析'],
+    recommended: true,
+  },
+  {
+    id: 'behavior',
+    name: 'BehaviorAgent',
+    role: '行为设计专家',
+    description: '设计用户行为路径和转化漏斗',
+    color: 'green',
+    tags: ['行为设计', '转化路径'],
+    recommended: true,
+  },
+  {
+    id: 'driver',
+    name: 'DriverAgent',
+    role: '驱动因素专家',
+    description: '分析影响用户决策的核心驱动因素',
+    color: 'yellow',
+    tags: ['驱动分析', '动机挖掘'],
+    recommended: false,
+  },
+  {
+    id: 'narrative',
+    name: 'NarrativeAgent',
+    role: '叙事策略专家',
+    description: '设计品牌叙事框架和内容策略',
+    color: 'purple',
+    tags: ['故事设计', '内容策略'],
+    recommended: true,
+  },
+  {
+    id: 'risk',
+    name: 'RiskAgent',
+    role: '风险评估专家',
+    description: '识别项目风险，制定应对策略',
+    color: 'red',
+    tags: ['风险识别', '应对策略'],
+    recommended: true,
+  },
+];
+
+const TaskConsultCreate: React.FC<TaskConsultCreateProps> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 主题颜色类
+  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
+  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const textMuted = isDark ? 'text-slate-500' : 'text-gray-500';
+  const btnSecondary = isDark ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300' : 'bg-gray-100 hover:bg-gray-200 border-gray-300 text-gray-700';
+  const btnPrimary = isDark ? 'bg-blue-600 hover:bg-blue-500' : 'bg-red-600 hover:bg-red-500';
+  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-gray-50';
+  const inputBorder = isDark ? 'border-blue-800/30' : 'border-gray-300';
+
+  const [taskName, setTaskName] = useState('');
+  const [taskTheme, setTaskTheme] = useState('');
+  const [taskDescription, setTaskDescription] = useState('');
+  const [selectedAgents, setSelectedAgents] = useState<string[]>(['goal', 'audience', 'narrative', 'risk']);
+  const [consultMode, setConsultMode] = useState<'parallel' | 'cross' | 'human'>('parallel');
+  const [maxRounds, setMaxRounds] = useState(3);
+  const [allowAgentQuestion, setAllowAgentQuestion] = useState(true);
+  const [allowHumanIntervene, setAllowHumanIntervene] = useState(true);
+  const [autoSummary, setAutoSummary] = useState(true);
+  const [allowConvertToScene, setAllowConvertToScene] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const toggleAgent = (agentId: string) => {
+    if (selectedAgents.includes(agentId)) {
+      if (selectedAgents.length > 2) {
+        setSelectedAgents(selectedAgents.filter((id) => id !== agentId));
+      }
+    } else {
+      if (selectedAgents.length < 8) {
+        setSelectedAgents([...selectedAgents, agentId]);
+      }
+    }
+  };
+
+  const selectRecommended = () => {
+    const recommendedIds = availableAgents.filter((a) => a.recommended).map((a) => a.id);
+    setSelectedAgents(recommendedIds);
+  };
+
+  const handleStartConsult = () => {
+    if (taskName && selectedAgents.length >= 2) {
+      onNavigate('task-consult');
+    }
+  };
+
+  const filteredAgents = availableAgents.filter(
+    (agent) =>
+      agent.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      agent.role.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const getColorClasses = (color: string) => {
+    const colors: Record<string, { bg: string; border: string; text: string; ring: string }> = {
+      blue: { bg: 'bg-blue-500/20', border: 'border-blue-500/50', text: 'text-blue-400', ring: 'ring-blue-500/50' },
+      cyan: { bg: 'bg-cyan-500/20', border: 'border-cyan-500/50', text: 'text-cyan-400', ring: 'ring-cyan-500/50' },
+      green: { bg: 'bg-green-500/20', border: 'border-green-500/50', text: 'text-green-400', ring: 'ring-green-500/50' },
+      yellow: { bg: 'bg-yellow-500/20', border: 'border-yellow-500/50', text: 'text-yellow-400', ring: 'ring-yellow-500/50' },
+      purple: { bg: 'bg-purple-500/20', border: 'border-purple-500/50', text: 'text-purple-400', ring: 'ring-purple-500/50' },
+      red: { bg: 'bg-red-500/20', border: 'border-red-500/50', text: 'text-red-400', ring: 'ring-red-500/50' },
+    };
+    return colors[color] || colors.blue;
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 顶部操作栏 */}
+      <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4`}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => onNavigate('task-list')}
+              className={`flex items-center gap-2 px-3 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}
+            >
+              <ArrowLeft className="w-4 h-4" />
+              返回
+            </button>
+            <div className={`h-8 w-px ${isDark ? 'bg-blue-800/30' : 'bg-gray-200'}`} />
+            <div>
+              <h1 className={`${textPrimary} font-bold text-lg`}>新建多智能体会商任务</h1>
+              <p className={`${textSecondary} text-sm`}>多视角分析 + 人机共判 + 会商整合</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <span className={`px-3 py-1.5 ${isDark ? 'bg-orange-500/20 text-orange-400' : 'bg-orange-100 text-orange-600'} rounded-full text-sm font-medium flex items-center gap-1.5`}>
+              <Users className="w-4 h-4" />
+              会商研判模式
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-12 gap-6">
+        {/* 左侧：基础信息和智能体选择 */}
+        <div className="col-span-8 space-y-6">
+          {/* 基础信息区 */}
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+            <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+              <FileText className="w-4 h-4 text-blue-400" />
+              基础信息
+            </h3>
+            <div className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className={`block ${textSecondary} text-sm mb-2`}>任务名称</label>
+                  <input
+                    type="text"
+                    value={taskName}
+                    onChange={(e) => setTaskName(e.target.value)}
+                    placeholder="例如：五四青年节宣传策略会商"
+                    className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm ${textMuted} focus:outline-none focus:border-blue-500/50 transition-colors`}
+                  />
+                </div>
+                <div>
+                  <label className={`block ${textSecondary} text-sm mb-2`}>会商主题</label>
+                  <input
+                    type="text"
+                    value={taskTheme}
+                    onChange={(e) => setTaskTheme(e.target.value)}
+                    placeholder="例如：宣传策略前期研判"
+                    className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm ${textMuted} focus:outline-none focus:border-blue-500/50 transition-colors`}
+                  />
+                </div>
+              </div>
+              <div>
+                <label className={`block ${textSecondary} text-sm mb-2`}>任务描述</label>
+                <textarea
+                  value={taskDescription}
+                  onChange={(e) => setTaskDescription(e.target.value)}
+                  placeholder="详细描述本次会商要解决的问题和目标..."
+                  rows={3}
+                  className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm ${textMuted} focus:outline-none focus:border-blue-500/50 transition-colors resize-none`}
+                />
+              </div>
+              <div>
+                <label className={`block ${textSecondary} text-sm mb-2`}>背景材料上传</label>
+                <div className={`border-2 border-dashed ${inputBorder} rounded-lg p-6 text-center hover:border-blue-500/50 transition-colors cursor-pointer`}>
+                  <Upload className={`w-8 h-8 ${textMuted} mx-auto mb-2`} />
+                  <p className={`${textSecondary} text-sm`}>点击或拖拽上传文件</p>
+                  <p className={`${textMuted} text-xs mt-1`}>支持 PDF、Word、图片等格式</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* 智能体选择区 */}
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+            <div className="flex items-center justify-between mb-4">
+              <h3 className={`${textPrimary} font-semibold text-sm flex items-center gap-2`}>
+                <Bot className="w-4 h-4 text-purple-400" />
+                选择参与智能体
+                <span className={`${textMuted} font-normal text-xs ml-2`}>
+                  (已选 {selectedAgents.length} 个，建议 3-6 个)
+                </span>
+              </h3>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={selectRecommended}
+                  className={`px-3 py-1.5 bg-purple-500/20 hover:bg-purple-500/30 border border-purple-500/30 text-purple-400 rounded-lg text-xs transition-colors`}
+                >
+                  一键选择推荐组合
+                </button>
+              </div>
+            </div>
+
+            {/* 搜索和筛选 */}
+            <div className="relative mb-4">
+              <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${textMuted}`} />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="搜索智能体..."
+                className={`w-full pl-10 pr-4 py-2 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm ${textMuted} focus:outline-none focus:border-blue-500/50 transition-colors`}
+              />
+            </div>
+
+            {/* 智能体卡片列表 */}
+            <div className="grid grid-cols-2 gap-3 max-h-[320px] overflow-y-auto pr-2">
+              {filteredAgents.map((agent) => {
+                const isSelected = selectedAgents.includes(agent.id);
+                const colors = getColorClasses(agent.color);
+                return (
+                  <button
+                    key={agent.id}
+                    onClick={() => toggleAgent(agent.id)}
+                    className={`p-4 rounded-xl border transition-all text-left ${
+                      isSelected
+                        ? `${colors.bg} ${colors.border} ring-1 ${colors.ring}`
+                        : `${inputBg} ${inputBorder} hover:border-blue-500/30`
+                    }`}
+                  >
+                    <div className="flex items-start gap-3">
+                      <div className={`w-10 h-10 rounded-lg ${colors.bg} flex items-center justify-center flex-shrink-0`}>
+                        <Bot className={`w-5 h-5 ${colors.text}`} />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <p className={`text-sm font-medium ${isSelected ? colors.text : textPrimary}`}>
+                            {agent.name}
+                          </p>
+                          {agent.recommended && (
+                            <span className={`px-1.5 py-0.5 ${isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-600'} rounded text-xs`}>
+                              推荐
+                            </span>
+                          )}
+                        </div>
+                        <p className={`${textSecondary} text-xs mt-0.5`}>{agent.role}</p>
+                        <p className={`${textMuted} text-xs mt-1 line-clamp-2`}>{agent.description}</p>
+                        <div className="flex flex-wrap gap-1 mt-2">
+                          {agent.tags.map((tag) => (
+                            <span
+                              key={tag}
+                              className={`px-1.5 py-0.5 ${isSelected ? colors.bg : isDark ? 'bg-slate-700/50' : 'bg-gray-100'} ${
+                                isSelected ? colors.text : textSecondary
+                              } rounded text-xs`}
+                            >
+                              {tag}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+                      <div
+                        className={`w-5 h-5 rounded border flex items-center justify-center flex-shrink-0 ${
+                          isSelected ? `${colors.bg} ${colors.border}` : isDark ? 'border-slate-600' : 'border-gray-300'
+                        }`}
+                      >
+                        {isSelected && <CheckCircle className={`w-3.5 h-3.5 ${colors.text}`} />}
+                      </div>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        {/* 右侧：会商规则设置和预览 */}
+        <div className="col-span-4 space-y-6">
+          {/* 会商规则设置 */}
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+            <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+              <Settings className="w-4 h-4 text-green-400" />
+              会商规则设置
+            </h3>
+            <div className="space-y-4">
+              {/* 会商模式 */}
+              <div>
+                <label className={`block ${textSecondary} text-sm mb-2`}>会商模式</label>
+                <div className="space-y-2">
+                  {[
+                    {
+                      id: 'parallel',
+                      label: '并行独立分析',
+                      desc: '首轮各智能体独立发言',
+                      icon: MessageSquare,
+                    },
+                    {
+                      id: 'cross',
+                      label: '受控交叉讨论',
+                      desc: '主持人指定智能体互相回应',
+                      icon: Users,
+                    },
+                    {
+                      id: 'human',
+                      label: '人机共判模式',
+                      desc: '人类主导，全程可控',
+                      icon: Sparkles,
+                    },
+                  ].map((mode) => (
+                    <button
+                      key={mode.id}
+                      onClick={() => setConsultMode(mode.id as typeof consultMode)}
+                      className={`w-full p-3 rounded-lg border transition-all text-left ${
+                        consultMode === mode.id
+                          ? 'bg-green-500/20 border-green-500/50'
+                          : `${inputBg} ${inputBorder} hover:border-blue-500/30`
+                      }`}
+                    >
+                      <div className="flex items-center gap-3">
+                        <mode.icon
+                          className={`w-5 h-5 ${
+                            consultMode === mode.id ? 'text-green-400' : textSecondary
+                          }`}
+                        />
+                        <div>
+                          <p
+                            className={`text-sm font-medium ${
+                              consultMode === mode.id ? 'text-green-400' : textPrimary
+                            }`}
+                          >
+                            {mode.label}
+                          </p>
+                          <p className={`${textMuted} text-xs`}>{mode.desc}</p>
+                        </div>
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* 最大轮数 */}
+              <div>
+                <label className={`block ${textSecondary} text-sm mb-2`}>
+                  最大讨论轮数 <span className={textMuted}>(1-10)</span>
+                </label>
+                <input
+                  type="number"
+                  min={1}
+                  max={10}
+                  value={maxRounds}
+                  onChange={(e) => setMaxRounds(Math.min(10, Math.max(1, parseInt(e.target.value) || 1)))}
+                  className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm focus:outline-none focus:border-blue-500/50 transition-colors`}
+                />
+              </div>
+
+              {/* 开关设置 */}
+              <div className="space-y-3 pt-2">
+                <label className="flex items-center justify-between cursor-pointer">
+                  <div>
+                    <p className={`${textPrimary} text-sm`}>允许智能体互相提问</p>
+                    <p className={`${textMuted} text-xs`}>智能体可主动向其他智能体发起讨论</p>
+                  </div>
+                  <div
+                    onClick={() => setAllowAgentQuestion(!allowAgentQuestion)}
+                    className={`w-11 h-6 rounded-full transition-colors relative ${
+                      allowAgentQuestion ? 'bg-green-500' : isDark ? 'bg-slate-600' : 'bg-gray-400'
+                    }`}
+                  >
+                    <div
+                      className={`w-5 h-5 bg-white rounded-full absolute top-0.5 transition-transform ${
+                        allowAgentQuestion ? 'translate-x-5.5' : 'translate-x-0.5'
+                      }`}
+                    />
+                  </div>
+                </label>
+
+                <label className="flex items-center justify-between cursor-pointer">
+                  <div>
+                    <p className={`${textPrimary} text-sm`}>允许人工插话</p>
+                    <p className={`${textMuted} text-xs`}>用户可随时打断并发表意见</p>
+                  </div>
+                  <div
+                    onClick={() => setAllowHumanIntervene(!allowHumanIntervene)}
+                    className={`w-11 h-6 rounded-full transition-colors relative ${
+                      allowHumanIntervene ? 'bg-green-500' : isDark ? 'bg-slate-600' : 'bg-gray-400'
+                    }`}
+                  >
+                    <div
+                      className={`w-5 h-5 bg-white rounded-full absolute top-0.5 transition-transform ${
+                        allowHumanIntervene ? 'translate-x-5.5' : 'translate-x-0.5'
+                      }`}
+                    />
+                  </div>
+                </label>
+
+                <label className="flex items-center justify-between cursor-pointer">
+                  <div>
+                    <p className={`${textPrimary} text-sm`}>自动生成摘要</p>
+                    <p className={`${textMuted} text-xs`}>每轮结束后自动提炼观点</p>
+                  </div>
+                  <div
+                    onClick={() => setAutoSummary(!autoSummary)}
+                    className={`w-11 h-6 rounded-full transition-colors relative ${
+                      autoSummary ? 'bg-green-500' : isDark ? 'bg-slate-600' : 'bg-gray-400'
+                    }`}
+                  >
+                    <div
+                      className={`w-5 h-5 bg-white rounded-full absolute top-0.5 transition-transform ${
+                        autoSummary ? 'translate-x-5.5' : 'translate-x-0.5'
+                      }`}
+                    />
+                  </div>
+                </label>
+
+                <label className="flex items-center justify-between cursor-pointer">
+                  <div>
+                    <p className={`${textPrimary} text-sm`}>支持转为场景任务</p>
+                    <p className={`${textMuted} text-xs`}>会商结束后可转入场景执行</p>
+                  </div>
+                  <div
+                    onClick={() => setAllowConvertToScene(!allowConvertToScene)}
+                    className={`w-11 h-6 rounded-full transition-colors relative ${
+                      allowConvertToScene ? 'bg-green-500' : isDark ? 'bg-slate-600' : 'bg-gray-400'
+                    }`}
+                  >
+                    <div
+                      className={`w-5 h-5 bg-white rounded-full absolute top-0.5 transition-transform ${
+                        allowConvertToScene ? 'translate-x-5.5' : 'translate-x-0.5'
+                      }`}
+                    />
+                  </div>
+                </label>
+              </div>
+            </div>
+          </div>
+
+          {/* 会商流程预览 */}
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+            <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+              <Target className="w-4 h-4 text-orange-400" />
+              会商流程预览
+            </h3>
+            <div className="space-y-2">
+              {[
+                { step: 1, label: '首轮独立发言', desc: '各智能体各抒己见' },
+                { step: 2, label: '交叉讨论', desc: '按模式互动回应' },
+                { step: 3, label: '观点提炼', desc: '系统自动汇总' },
+                { step: 4, label: '人工整合', desc: '人类主导判断' },
+                { step: 5, label: '输出结论', desc: '生成会商纪要' },
+              ].map((item, index) => (
+                <div key={item.step} className="flex items-center gap-3">
+                  <div className="flex flex-col items-center">
+                    <div className={`w-6 h-6 rounded-full ${isDark ? 'bg-orange-500/20 border-orange-500/50' : 'bg-orange-100 border-orange-200'} flex items-center justify-center`}>
+                      <span className={`${isDark ? 'text-orange-400' : 'text-orange-600'} text-xs font-medium`}>{item.step}</span>
+                    </div>
+                    {index < 4 && <div className={`w-px h-4 ${isDark ? 'bg-blue-800/30' : 'bg-gray-200'}`} />}
+                  </div>
+                  <div className="flex-1">
+                    <p className={`${textPrimary} text-sm`}>{item.label}</p>
+                    <p className={`${textMuted} text-xs`}>{item.desc}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* 选中智能体预览 */}
+          {selectedAgents.length > 0 && (
+            <div className={`${cardBg} backdrop-blur-xl ${isDark ? 'border-purple-800/30' : 'border-purple-200'} rounded-xl p-5`}>
+              <h3 className={`${textPrimary} font-semibold text-sm mb-3`}>
+                已选智能体 ({selectedAgents.length})
+              </h3>
+              <div className="flex flex-wrap gap-2">
+                {selectedAgents.map((agentId) => {
+                  const agent = availableAgents.find((a) => a.id === agentId);
+                  if (!agent) return null;
+                  const colors = getColorClasses(agent.color);
+                  return (
+                    <span
+                      key={agentId}
+                      className={`px-2 py-1 ${colors.bg} ${colors.text} rounded-lg text-xs flex items-center gap-1`}
+                    >
+                      <Bot className="w-3 h-3" />
+                      {agent.name}
+                    </span>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* 操作按钮 */}
+          <div className="space-y-3">
+            <button
+              onClick={handleStartConsult}
+              disabled={!taskName || selectedAgents.length < 2}
+              className={`w-full flex items-center justify-center gap-2 px-4 py-3 ${btnPrimary} disabled:${isDark ? 'bg-slate-700 text-slate-500' : 'bg-gray-300 text-gray-500'} text-white rounded-xl text-sm font-medium transition-colors`}
+            >
+              <Play className="w-4 h-4" />
+              开始会商
+            </button>
+            <button className={`w-full flex items-center justify-center gap-2 px-4 py-3 ${btnSecondary} rounded-xl text-sm transition-colors`}>
+              <Save className="w-4 h-4" />
+              保存草稿
+            </button>
+          </div>
+
+          {/* 提示信息 */}
+          <div className={`${isDark ? 'bg-blue-500/10 border-blue-500/30' : 'bg-blue-50 border-blue-200'} rounded-lg p-3`}>
+            <div className="flex items-start gap-2">
+              <Lightbulb className={`w-4 h-4 text-blue-400 flex-shrink-0 mt-0.5`} />
+              <div className={`text-xs ${textSecondary}`}>
+                <p className={`${isDark ? 'text-blue-400' : 'text-blue-600'} font-medium mb-1`}>小提示</p>
+                <p>会商任务不追求自动闭环，而是帮助您更好地判断。建议在任务前期研判、多方案比较、争议问题讨论等场景使用。</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TaskConsultCreate;
diff --git a/web-code/components/taskManagement/TaskConsultResult.tsx b/web-code/components/taskManagement/TaskConsultResult.tsx
new file mode 100644
index 00000000..2157ca3f
--- /dev/null
+++ b/web-code/components/taskManagement/TaskConsultResult.tsx
@@ -0,0 +1,431 @@
+import React, { useState } from 'react';
+import { useTheme } from '@/contexts/ThemeContext';
+import {
+  ArrowLeft,
+  Bot,
+  CheckCircle,
+  Download,
+  FileText,
+  ChevronRight,
+  Zap,
+  AlertCircle,
+  Check,
+  Target,
+  X,
+  RefreshCw,
+} from 'lucide-react';
+import { PageType } from '@/components/Sidebar';
+
+interface TaskConsultResultProps {
+  onNavigate: (page: PageType) => void;
+}
+
+const TaskConsultResult: React.FC<TaskConsultResultProps> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 主题颜色类
+  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
+  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const textMuted = isDark ? 'text-slate-500' : 'text-gray-500';
+  const btnSecondary = isDark ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300' : 'bg-gray-100 hover:bg-gray-200 border-gray-300 text-gray-700';
+  const btnPrimary = isDark ? 'bg-blue-600 hover:bg-blue-500' : 'bg-red-600 hover:bg-red-500';
+  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-gray-50';
+  const inputBorder = isDark ? 'border-blue-800/30' : 'border-gray-300';
+
+  const [activeTab, setActiveTab] = useState<'conclusion' | 'opinions' | 'disputes'>('conclusion');
+
+  // 会商结论数据
+  const conclusion = {
+    mainConclusion: '五四青年节宣传活动应聚焦"真实、有态度的青年故事"这一叙事方向，以18-25岁基层青年为核心受众，优先在短视频平台建立品牌认知。',
+    recommendedDirection: [
+      '以真实人物故事为核心叙事内容',
+      '采用平等对话而非说教式的传播语气',
+      '优先布局抖音、小红书等短视频平台',
+      '建立UGC激励机制促进用户参与',
+    ],
+    notRecommendedDirection: [
+      '过度包装的精致化内容',
+      '单向输出的宣传式传播',
+      '纯文字为主的长图文形式',
+    ],
+    pendingIssues: [
+      '叙事角度：事件叙事 vs 人物叙事（待进一步验证）',
+      '渠道策略：短视频为主 vs 社交媒体为主',
+      '预算在内容制作和达人投放的分配比例',
+    ],
+    nextSteps: [
+      '建议由 NarrativeAgent 细化叙事框架',
+      '建议由 AudienceAgent 补充平台选择建议',
+      '可考虑转入"宣传策略生成"场景任务进行完整方案输出',
+    ],
+  };
+
+  // 观点汇总数据
+  const agentOpinions = [
+    {
+      agentId: 'goal',
+      agentName: 'GoalAgent',
+      agentRole: '目标分析专家',
+      color: 'blue',
+      coreOpinion: '建议聚焦提升品牌认知度这一核心目标，短期内不追求直接转化',
+      adopted: true,
+      notes: '与整体策略方向一致',
+    },
+    {
+      agentId: 'audience',
+      agentName: 'AudienceAgent',
+      agentRole: '受众分析专家',
+      color: 'cyan',
+      coreOpinion: '核心受众应为18-25岁基层青年群体，注重"真实感"和"态度感"',
+      adopted: true,
+      notes: '已采纳为策略基础',
+    },
+    {
+      agentId: 'narrative',
+      agentName: 'NarrativeAgent',
+      agentRole: '叙事策略专家',
+      color: 'purple',
+      coreOpinion: '应采用"真实、有态度的青年故事"叙事框架',
+      adopted: true,
+      notes: '核心建议，已采纳',
+    },
+    {
+      agentId: 'risk',
+      agentName: 'RiskAgent',
+      agentRole: '风险评估专家',
+      color: 'red',
+      coreOpinion: '需注意UGC质量不稳定和话题热度维持的风险',
+      adopted: true,
+      notes: '需在执行阶段重点关注',
+    },
+  ];
+
+  // 分歧与待确认数据
+  const disputes = [
+    {
+      id: 1,
+      issue: '叙事角度选择',
+      description: '人物叙事 vs 事件叙事',
+      viewpoints: [
+        { agent: 'NarrativeAgent', opinion: '人物叙事更有情感穿透力', position: '支持人物叙事' },
+        { agent: 'GoalAgent', opinion: '事件叙事更聚焦目标达成', position: '支持事件叙事' },
+      ],
+      status: '待确认',
+    },
+    {
+      id: 2,
+      issue: '渠道策略选择',
+      description: '短视频平台 vs 社交媒体',
+      viewpoints: [
+        { agent: 'AudienceAgent', opinion: '核心受众在短视频平台活跃度更高', position: '支持短视频平台' },
+        { agent: 'GoalAgent', opinion: '品牌传播需要社交媒体的裂变效应', position: '支持社交媒体' },
+      ],
+      status: '待确认',
+    },
+    {
+      id: 3,
+      issue: '风险应对方案',
+      description: '内容质量控制机制',
+      viewpoints: [
+        { agent: 'RiskAgent', opinion: '需要建立严格的内容审核机制', position: '强调审核' },
+        { agent: 'NarrativeAgent', opinion: '审核流程可能影响内容时效性', position: '担忧时效' },
+      ],
+      status: '需进一步讨论',
+    },
+  ];
+
+  const getColorClasses = (color: string) => {
+    const colors: Record<string, { bg: string; border: string; text: string }> = {
+      blue: { bg: isDark ? 'bg-blue-500/20' : 'bg-blue-50', border: isDark ? 'border-blue-500/50' : 'border-blue-200', text: isDark ? 'text-blue-400' : 'text-blue-600' },
+      cyan: { bg: isDark ? 'bg-cyan-500/20' : 'bg-cyan-50', border: isDark ? 'border-cyan-500/50' : 'border-cyan-200', text: isDark ? 'text-cyan-400' : 'text-cyan-600' },
+      green: { bg: isDark ? 'bg-green-500/20' : 'bg-green-50', border: isDark ? 'border-green-500/50' : 'border-green-200', text: isDark ? 'text-green-400' : 'text-green-600' },
+      yellow: { bg: isDark ? 'bg-yellow-500/20' : 'bg-yellow-50', border: isDark ? 'border-yellow-500/50' : 'border-yellow-200', text: isDark ? 'text-yellow-400' : 'text-yellow-600' },
+      purple: { bg: isDark ? 'bg-purple-500/20' : 'bg-purple-50', border: isDark ? 'border-purple-500/50' : 'border-purple-200', text: isDark ? 'text-purple-400' : 'text-purple-600' },
+      red: { bg: isDark ? 'bg-red-500/20' : 'bg-red-50', border: isDark ? 'border-red-500/50' : 'border-red-200', text: isDark ? 'text-red-400' : 'text-red-600' },
+    };
+    return colors[color] || colors.blue;
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 顶部总览区 */}
+      <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => onNavigate('task-list')}
+              className={`flex items-center gap-2 px-3 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}
+            >
+              <ArrowLeft className="w-4 h-4" />
+              返回
+            </button>
+            <div className={`h-8 w-px ${isDark ? 'bg-blue-800/30' : 'bg-red-200'}`} />
+            <div>
+              <h1 className={`${textPrimary} font-bold text-lg`}>五四青年节宣传策略会商</h1>
+              <p className={`${textMuted} text-sm`}>会商结果 · 已完成</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <span className={`px-3 py-1.5 ${isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-700'} rounded-full text-sm font-medium flex items-center gap-1.5`}>
+              <CheckCircle className="w-4 h-4" />
+              会商完成
+            </span>
+          </div>
+        </div>
+
+        {/* 基本信息 */}
+        <div className={`grid grid-cols-4 gap-4 p-4 ${inputBg} rounded-lg`}>
+          <div className="text-center">
+            <p className={`${textMuted} text-xs mb-1`}>参与智能体</p>
+            <p className={`${textPrimary} font-medium text-lg`}>4</p>
+          </div>
+          <div className="text-center">
+            <p className={`${textMuted} text-xs mb-1`}>会商轮数</p>
+            <p className={`${textPrimary} font-medium text-lg`}>3</p>
+          </div>
+          <div className="text-center">
+            <p className={`${textMuted} text-xs mb-1`}>完成时间</p>
+            <p className={`${textPrimary} font-medium text-lg`}>2026-03-19</p>
+          </div>
+          <div className="text-center">
+            <p className={`${textMuted} text-xs mb-1`}>采纳观点</p>
+            <p className={`${isDark ? 'text-green-400' : 'text-green-600'} font-medium text-lg`}>4/4</p>
+          </div>
+        </div>
+
+        {/* 操作按钮 */}
+        <div className="flex items-center gap-3 mt-4">
+          <button className={`flex items-center gap-2 px-4 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}>
+            <Download className="w-4 h-4" />
+            导出纪要
+          </button>
+          <button className={`flex items-center gap-2 px-4 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}>
+            <FileText className="w-4 h-4" />
+            导出结论
+          </button>
+          <button className={`flex items-center gap-2 px-4 py-2 ${isDark ? 'bg-cyan-600/20 hover:bg-cyan-600/30 border-cyan-500/50 text-cyan-400' : 'bg-cyan-100 hover:bg-cyan-200 border-cyan-300 text-cyan-700'} rounded-lg text-sm transition-colors`}>
+            <Bot className="w-4 h-4" />
+            转为单智能体任务
+          </button>
+          <button className={`flex items-center gap-2 px-4 py-2 ${isDark ? 'bg-purple-600/20 hover:bg-purple-600/30 border-purple-500/50 text-purple-400' : 'bg-purple-100 hover:bg-purple-200 border-purple-300 text-purple-700'} rounded-lg text-sm transition-colors`}>
+            <Zap className="w-4 h-4" />
+            转为场景任务
+          </button>
+          <button className={`flex items-center gap-2 px-4 py-2 ${btnPrimary} text-white rounded-lg text-sm transition-colors ml-auto`}>
+            <RefreshCw className="w-4 h-4" />
+            重新发起会商
+          </button>
+        </div>
+      </div>
+
+      {/* Tab切换 */}
+      <div className={`flex items-center gap-1 ${cardBg} p-1 rounded-lg w-fit`}>
+        <button
+          onClick={() => setActiveTab('conclusion')}
+          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            activeTab === 'conclusion'
+              ? `${btnPrimary} text-white`
+              : `${textSecondary} ${isDark ? 'hover:text-white hover:bg-slate-700/50' : 'hover:text-gray-900 hover:bg-gray-200'}`
+          }`}
+        >
+          会商结论
+        </button>
+        <button
+          onClick={() => setActiveTab('opinions')}
+          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            activeTab === 'opinions'
+              ? `${btnPrimary} text-white`
+              : `${textSecondary} ${isDark ? 'hover:text-white hover:bg-slate-700/50' : 'hover:text-gray-900 hover:bg-gray-200'}`
+          }`}
+        >
+          观点汇总
+        </button>
+        <button
+          onClick={() => setActiveTab('disputes')}
+          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            activeTab === 'disputes'
+              ? `${btnPrimary} text-white`
+              : `${textSecondary} ${isDark ? 'hover:text-white hover:bg-slate-700/50' : 'hover:text-gray-900 hover:bg-gray-200'}`
+          }`}
+        >
+          分歧与待确认
+        </button>
+      </div>
+
+      {/* 内容区 */}
+      {activeTab === 'conclusion' && (
+        <div className="grid grid-cols-12 gap-6">
+          {/* 会商结论 */}
+          <div className="col-span-8 space-y-6">
+            <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+              <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+                <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
+                本次会商结论
+              </h3>
+              <div className={`p-4 ${isDark ? 'bg-green-500/10 border-green-500/30' : 'bg-green-50 border-green-200'} rounded-lg`}>
+                <p className={`${isDark ? 'text-green-300' : 'text-green-800'} leading-relaxed`}>{conclusion.mainConclusion}</p>
+              </div>
+            </div>
+
+            <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+              <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+                <Check className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
+                推荐采用方向
+              </h3>
+              <div className="space-y-2">
+                {conclusion.recommendedDirection.map((item, index) => (
+                  <div key={index} className={`flex items-center gap-3 p-3 ${isDark ? 'bg-green-500/10 border-green-500/30' : 'bg-green-50 border-green-200'} rounded-lg`}>
+                    <div className={`w-6 h-6 rounded-full ${isDark ? 'bg-green-500/20' : 'bg-green-100'} flex items-center justify-center`}>
+                      <Check className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
+                    </div>
+                    <p className={`${isDark ? 'text-green-300' : 'text-green-800'} text-sm`}>{item}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+              <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+                <X className={`w-4 h-4 ${isDark ? 'text-red-400' : 'text-red-600'}`} />
+                不建议采用方向
+              </h3>
+              <div className="space-y-2">
+                {conclusion.notRecommendedDirection.map((item, index) => (
+                  <div key={index} className={`flex items-center gap-3 p-3 ${isDark ? 'bg-red-500/10 border-red-500/30' : 'bg-red-50 border-red-200'} rounded-lg`}>
+                    <div className={`w-6 h-6 rounded-full ${isDark ? 'bg-red-500/20' : 'bg-red-100'} flex items-center justify-center`}>
+                      <X className={`w-4 h-4 ${isDark ? 'text-red-400' : 'text-red-600'}`} />
+                    </div>
+                    <p className={`${isDark ? 'text-red-300' : 'text-red-800'} text-sm`}>{item}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* 侧边栏 */}
+          <div className="col-span-4 space-y-6">
+            <div className={`${cardBg} backdrop-blur-xl ${isDark ? 'border-yellow-800/30' : 'border-yellow-200'} rounded-xl p-5`}>
+              <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+                <AlertCircle className={`w-4 h-4 ${isDark ? 'text-yellow-400' : 'text-yellow-600'}`} />
+                待确认问题
+              </h3>
+              <div className="space-y-2">
+                {conclusion.pendingIssues.map((item, index) => (
+                  <div key={index} className={`p-3 ${isDark ? 'bg-yellow-500/10 border-yellow-500/30' : 'bg-yellow-50 border-yellow-200'} rounded-lg`}>
+                    <p className={`${isDark ? 'text-yellow-300' : 'text-yellow-800'} text-sm`}>{item}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className={`${cardBg} backdrop-blur-xl ${isDark ? 'border-purple-800/30' : 'border-purple-200'} rounded-xl p-5`}>
+              <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+                <ChevronRight className={`w-4 h-4 ${isDark ? 'text-purple-400' : 'text-purple-600'}`} />
+                推荐下一步动作
+              </h3>
+              <div className="space-y-2">
+                {conclusion.nextSteps.map((item, index) => (
+                  <div key={index} className={`p-3 ${isDark ? 'bg-purple-500/10 border-purple-500/30' : 'bg-purple-50 border-purple-200'} rounded-lg`}>
+                    <p className={`${isDark ? 'text-purple-300' : 'text-purple-800'} text-sm`}>{item}</p>
+                  </div>
+                ))}
+              </div>
+              <button className={`w-full mt-4 flex items-center justify-center gap-2 px-4 py-3 ${btnPrimary} text-white rounded-xl text-sm font-medium transition-colors`}>
+                <Zap className="w-4 h-4" />
+                转入宣传策略生成场景
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {activeTab === 'opinions' && (
+        <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+          <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+            <Bot className={`w-4 h-4 ${isDark ? 'text-cyan-400' : 'text-cyan-600'}`} />
+            各智能体观点汇总
+          </h3>
+          <div className="space-y-4">
+            {agentOpinions.map((agent) => {
+              const colors = getColorClasses(agent.color);
+              return (
+                <div key={agent.agentId} className={`p-4 ${inputBg} ${inputBorder} rounded-xl`}>
+                  <div className="flex items-start justify-between mb-3">
+                    <div className="flex items-center gap-3">
+                      <div className={`w-10 h-10 rounded-lg ${colors.bg} flex items-center justify-center`}>
+                        <Bot className={`w-5 h-5 ${colors.text}`} />
+                      </div>
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <p className={`text-sm font-medium ${colors.text}`}>{agent.agentName}</p>
+                          {agent.adopted ? (
+                            <span className={`px-1.5 py-0.5 ${isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-700'} rounded text-xs`}>
+                              已采纳
+                            </span>
+                          ) : (
+                            <span className={`px-1.5 py-0.5 ${isDark ? 'bg-slate-500/20 text-slate-400' : 'bg-gray-200 text-gray-600'} rounded text-xs`}>
+                              未采纳
+                            </span>
+                          )}
+                        </div>
+                        <p className={`${textMuted} text-xs`}>{agent.agentRole}</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="pl-13">
+                    <p className={`${textSecondary} text-sm mb-2`}>{agent.coreOpinion}</p>
+                    <p className={`${textMuted} text-xs`}>备注：{agent.notes}</p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {activeTab === 'disputes' && (
+        <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+          <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+            <AlertCircle className={`w-4 h-4 ${isDark ? 'text-yellow-400' : 'text-yellow-600'}`} />
+            争议点与待确认事项
+          </h3>
+          <div className="space-y-4">
+            {disputes.map((dispute) => (
+              <div key={dispute.id} className={`p-4 ${inputBg} ${isDark ? 'border-yellow-800/30' : 'border-yellow-200'} rounded-xl`}>
+                <div className="flex items-center justify-between mb-3">
+                  <div>
+                    <p className={`${textPrimary} font-medium text-sm`}>{dispute.issue}</p>
+                    <p className={`${textMuted} text-xs mt-0.5`}>{dispute.description}</p>
+                  </div>
+                  <span className={`px-2 py-1 ${isDark ? 'bg-yellow-500/20 text-yellow-400' : 'bg-yellow-100 text-yellow-700'} rounded text-xs`}>
+                    {dispute.status}
+                  </span>
+                </div>
+                <div className="space-y-2">
+                  {dispute.viewpoints.map((viewpoint, index) => (
+                    <div key={index} className={`p-3 ${isDark ? 'bg-yellow-500/5 border-yellow-500/20' : 'bg-yellow-50 border-yellow-200'} rounded-lg`}>
+                      <div className="flex items-center gap-2 mb-1">
+                        <Bot className={`w-4 h-4 ${textMuted}`} />
+                        <span className={`${textMuted} text-xs`}>{viewpoint.agent}</span>
+                      </div>
+                      <p className={`${isDark ? 'text-yellow-300' : 'text-yellow-800'} text-sm`}>{viewpoint.opinion}</p>
+                    </div>
+                  ))}
+                </div>
+                <button className={`mt-3 flex items-center gap-1 px-3 py-1.5 ${isDark ? 'bg-yellow-500/20 hover:bg-yellow-500/30 border-yellow-500/50 text-yellow-400' : 'bg-yellow-100 hover:bg-yellow-200 border-yellow-300 text-yellow-700'} rounded text-xs transition-colors`}>
+                  <Target className="w-3 h-3" />
+                  发起单智能体分析
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TaskConsultResult;
diff --git a/web-code/components/taskManagement/TaskCreate.tsx b/web-code/components/taskManagement/TaskCreate.tsx
new file mode 100644
index 00000000..9beec0f7
--- /dev/null
+++ b/web-code/components/taskManagement/TaskCreate.tsx
@@ -0,0 +1,1087 @@
+import React, { useState } from 'react';
+import {
+  ArrowLeft,
+  Bot,
+  Workflow,
+  Target,
+  FileText,
+  Upload,
+  Clock,
+  User,
+  CheckCircle,
+  ChevronRight,
+  Sparkles,
+  Layers,
+  Users,
+  MessageSquare,
+  X,
+} from 'lucide-react';
+import { useTheme } from '@/contexts/ThemeContext';
+import { PageType } from '@/components/Sidebar';
+
+interface TaskCreateProps {
+  onNavigate: (page: PageType) => void;
+}
+
+// 可用场景列表
+const availableScenes = [
+  { id: 'strategy', name: '宣传策略生成', desc: '完整宣传策略方案生成', agents: 8 },
+  { id: 'campaign', name: '宣传活动推演', desc: '活动方案推演与优化', agents: 6 },
+  { id: 'crisis', name: '舆情应对', desc: '危机公关策略生成', agents: 5 },
+  { id: 'product', name: '产品推广', desc: '产品上市推广策略', agents: 7 },
+];
+
+// 可用智能体列表
+const availableAgents = [
+  { id: 'goal', name: 'GoalAgent', role: '目标分析专家', category: '策略', icon: Target, desc: '专注目标设定、拆解与优先级排序' },
+  { id: 'audience', name: 'AudienceAgent', role: '受众分析专家', category: '用户', icon: User, desc: '深度分析目标受众特征与需求' },
+  { id: 'behavior', name: 'BehaviorAgent', role: '行为设计专家', category: '用户', icon: Sparkles, desc: '设计用户行为路径与激励机制' },
+  { id: 'narrative', name: 'NarrativeAgent', role: '叙事策略专家', category: '内容', icon: FileText, desc: '构建故事框架与叙事逻辑' },
+  { id: 'risk', name: 'RiskAgent', role: '风险评估专家', category: '策略', icon: CheckCircle, desc: '识别潜在风险并提供应对方案' },
+  { id: 'channel', name: 'ChannelAgent', role: '渠道分析专家', category: '运营', icon: Bot, desc: '分析传播渠道特点与适用场景' },
+  { id: 'creative', name: 'CreativeAgent', role: '创意生成专家', category: '内容', icon: Sparkles, desc: '提供创意方向与内容灵感' },
+  { id: 'data', name: 'DataAgent', role: '数据分析专家', category: '策略', icon: CheckCircle, desc: '基于数据提供洞察与建议' },
+];
+
+const TaskCreate: React.FC<TaskCreateProps> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const [step, setStep] = useState<'type' | 'single' | 'multi-agent' | 'consult' | 'scene'>('type');
+  const [taskType, setTaskType] = useState<'single' | 'multi-agent' | 'consult' | 'scene' | null>(null);
+
+  // 单智能体任务表单
+  const [singleTask, setSingleTask] = useState({
+    name: '',
+    agent: '',
+    input: '',
+    outputFormat: '',
+  });
+
+  // 多智能体协同分析表单
+  const [multiAgentTask, setMultiAgentTask] = useState({
+    name: '',
+    input: '',
+    selectedAgents: [] as string[],
+    agentSearchQuery: '',
+    agentCategory: 'all',
+  });
+
+  // 场景任务表单
+  const [sceneTask, setSceneTask] = useState({
+    name: '',
+    scene: '',
+    input: '',
+    deadline: '',
+    constraints: '',
+  });
+
+  const handleSelectType = (type: 'single' | 'multi-agent' | 'scene' | 'consult') => {
+    setTaskType(type);
+    setStep(type);
+  };
+
+  const handleCreateTask = () => {
+    if (taskType === 'single') {
+      onNavigate('task-single');
+    } else if (taskType === 'scene') {
+      onNavigate('task-scene');
+    } else if (taskType === 'multi-agent') {
+      onNavigate('multi-agent-qa');
+    } else {
+      onNavigate('task-consult-create');
+    }
+  };
+
+  // 处理智能体选择
+  const toggleAgent = (agentId: string) => {
+    setMultiAgentTask(prev => {
+      const isSelected = prev.selectedAgents.includes(agentId);
+      if (isSelected) {
+        return {
+          ...prev,
+          selectedAgents: prev.selectedAgents.filter(id => id !== agentId)
+        };
+      } else {
+        // 最多选择8个
+        if (prev.selectedAgents.length >= 8) {
+          return prev;
+        }
+        return {
+          ...prev,
+          selectedAgents: [...prev.selectedAgents, agentId]
+        };
+      }
+    });
+  };
+
+  // 获取过滤后的智能体列表
+  const getFilteredAgents = () => {
+    return availableAgents.filter(agent => {
+      const matchesSearch = agent.name.toLowerCase().includes(multiAgentTask.agentSearchQuery.toLowerCase()) ||
+        agent.role.toLowerCase().includes(multiAgentTask.agentSearchQuery.toLowerCase());
+      const matchesCategory = multiAgentTask.agentCategory === 'all' || agent.category === multiAgentTask.agentCategory;
+      return matchesSearch && matchesCategory;
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 顶部操作栏 */}
+      <div className={`rounded-xl p-4 ${isDark ? 'bg-slate-800/30 backdrop-blur-xl border border-blue-800/30' : 'bg-white border border-red-100 shadow-sm'}`}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => {
+                if (step === 'type') {
+                  onNavigate('task-list');
+                } else {
+                  setStep('type');
+                  setTaskType(null);
+                }
+              }}
+              className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
+                isDark
+                  ? 'bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300'
+                  : 'bg-red-50 hover:bg-red-100 border border-red-200 text-red-600'
+              }`}
+            >
+              <ArrowLeft className="w-4 h-4" />
+              返回
+            </button>
+            <div className={`h-8 w-px ${isDark ? 'bg-blue-800/30' : 'bg-red-200'}`} />
+            <div>
+              <h1 className={`font-bold text-lg ${isDark ? 'text-white' : 'text-gray-900'}`}>新建任务</h1>
+              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                {step === 'type' && '选择分析模式'}
+                {step === 'single' && '创建单智能体任务'}
+                {step === 'multi-agent' && '创建多智能体协同分析任务'}
+                {step === 'scene' && '创建场景任务'}
+                {step === 'consult' && '创建多智能体会商任务'}
+              </p>
+            </div>
+          </div>
+
+          {/* 步骤指示器 */}
+          <div className="flex items-center gap-2">
+            {['类型选择', '填写表单', '确认创建'].map((label, i) => (
+              <React.Fragment key={i}>
+                <div className="flex items-center gap-2">
+                  <div
+                    className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold ${
+                      i === 0
+                        ? isDark ? 'bg-blue-600 text-white' : 'bg-red-600 text-white'
+                        : i === 1 && step !== 'type'
+                        ? isDark ? 'bg-blue-600 text-white' : 'bg-red-600 text-white'
+                        : i === 2 && step !== 'type'
+                        ? isDark ? 'bg-blue-600 text-white' : 'bg-red-600 text-white'
+                        : isDark ? 'bg-slate-700 text-slate-400' : 'bg-gray-200 text-gray-500'
+                    }`}
+                  >
+                    {i + 1}
+                  </div>
+                  <span className={`text-xs ${
+                    i <= (step === 'type' ? 0 : 1)
+                      ? isDark ? 'text-white' : 'text-gray-900'
+                      : isDark ? 'text-slate-500' : 'text-gray-400'
+                  }`}>
+                    {label}
+                  </span>
+                </div>
+                {i < 2 && <ChevronRight className={`w-4 h-4 ${isDark ? 'text-slate-600' : 'text-gray-400'}`} />}
+              </React.Fragment>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* 步骤1：选择分析模式 */}
+      {step === 'type' && (
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-8">
+            <h2 className={`font-semibold text-xl mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>选择分析模式</h2>
+            <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              请为本次任务选择最合适的处理方式
+            </p>
+          </div>
+
+          {/* 2x2 网格布局 */}
+          <div className="grid grid-cols-2 gap-6">
+            {/* 单智能体分析 */}
+            <button
+              onClick={() => handleSelectType('single')}
+              className={`p-6 rounded-2xl transition-all text-left border ${
+                isDark
+                  ? 'bg-slate-800/50 border-blue-800/30 hover:border-blue-500/50'
+                  : 'bg-white border-red-100 hover:border-red-300 hover:shadow-md'
+              }`}
+            >
+              <div className={`w-14 h-14 rounded-xl flex items-center justify-center mb-4 ${
+                isDark ? 'bg-blue-500/20' : 'bg-blue-100'
+              }`}>
+                <Bot className={`w-7 h-7 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
+              </div>
+              <h3 className={`font-semibold text-lg mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>单智能体分析</h3>
+              <p className={`text-sm mb-4 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                选择一个智能体进行专项分析
+              </p>
+              <div className="space-y-2">
+                <div className="flex items-center gap-2 text-xs">
+                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>快速专项分析</span>
+                </div>
+                <div className="flex items-center gap-2 text-xs">
+                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>单体独立工作</span>
+                </div>
+                <div className="flex items-center gap-2 text-xs">
+                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>局部结果输出</span>
+                </div>
+              </div>
+              <div className={`mt-4 pt-4 border-t flex justify-between items-center ${isDark ? 'border-blue-800/30' : 'border-blue-100'}`}>
+                <span className={`text-xs ${isDark ? 'text-blue-400' : 'text-blue-500'}`}>适用：单点问题/快速试用</span>
+                <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>输出：单体分析结果</span>
+              </div>
+              <div className={`mt-3 px-4 py-2 rounded-lg text-center text-sm font-medium ${
+                isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-blue-100 text-blue-600'
+              }`}>
+                选择该模式
+              </div>
+            </button>
+
+            {/* 多智能体协同分析 */}
+            <button
+              onClick={() => handleSelectType('multi-agent')}
+              className={`p-6 rounded-2xl transition-all text-left border ${
+                isDark
+                  ? 'bg-slate-800/50 border-green-800/30 hover:border-green-500/50'
+                  : 'bg-white border-green-100 hover:border-green-300 hover:shadow-md'
+              }`}
+            >
+              <div className={`w-14 h-14 rounded-xl flex items-center justify-center mb-4 ${
+                isDark ? 'bg-green-500/20' : 'bg-green-100'
+              }`}>
+                <Layers className={`w-7 h-7 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+              </div>
+              <h3 className={`font-semibold text-lg mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>多智能体协同分析</h3>
+              <p className={`text-sm mb-4 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                多个智能体并行分析并汇总报告
+              </p>
+              <div className="space-y-2">
+                <div className="flex items-center gap-2 text-xs">
+                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>多视角并行分析</span>
+                </div>
+                <div className="flex items-center gap-2 text-xs">
+                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>人机协同判断</span>
+                </div>
+                <div className="flex items-center gap-2 text-xs">
+                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>报告生成</span>
+                </div>
+              </div>
+              <div className={`mt-4 pt-4 border-t flex justify-between items-center ${isDark ? 'border-green-800/30' : 'border-green-100'}`}>
+                <span className={`text-xs ${isDark ? 'text-green-400' : 'text-green-500'}`}>适用：前期研判/多专业汇总</span>
+                <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>输出：联合分析报告</span>
+              </div>
+              <div className={`mt-3 px-4 py-2 rounded-lg text-center text-sm font-medium ${
+                isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-600'
+              }`}>
+                选择该模式
+              </div>
+            </button>
+
+            {/* 多智能体会商 */}
+            <button
+              onClick={() => handleSelectType('consult')}
+              className={`p-6 rounded-2xl transition-all text-left border ${
+                isDark
+                  ? 'bg-slate-800/50 border-orange-800/30 hover:border-orange-500/50'
+                  : 'bg-white border-orange-100 hover:border-orange-300 hover:shadow-md'
+              }`}
+            >
+              <div className={`w-14 h-14 rounded-xl flex items-center justify-center mb-4 ${
+                isDark ? 'bg-orange-500/20' : 'bg-orange-100'
+              }`}>
+                <Users className={`w-7 h-7 ${isDark ? 'text-orange-400' : 'text-orange-500'}`} />
+              </div>
+              <h3 className={`font-semibold text-lg mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>多智能体会商</h3>
+              <p className={`text-sm mb-4 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                多智能体讨论与推演
+              </p>
+              <div className="space-y-2">
+                <div className="flex items-center gap-2 text-xs">
+                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>观点碰撞</span>
+                </div>
+                <div className="flex items-center gap-2 text-xs">
+                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>模拟推演</span>
+                </div>
+                <div className="flex items-center gap-2 text-xs">
+                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>人工研判</span>
+                </div>
+              </div>
+              <div className={`mt-4 pt-4 border-t flex justify-between items-center ${isDark ? 'border-orange-800/30' : 'border-orange-100'}`}>
+                <span className={`text-xs ${isDark ? 'text-orange-400' : 'text-orange-500'}`}>适用：争议/比较/推演</span>
+                <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>输出：会商结论</span>
+              </div>
+              <div className={`mt-3 px-4 py-2 rounded-lg text-center text-sm font-medium ${
+                isDark ? 'bg-orange-500/20 text-orange-400' : 'bg-orange-100 text-orange-600'
+              }`}>
+                选择该模式
+              </div>
+            </button>
+
+            {/* 场景执行 */}
+            <button
+              onClick={() => handleSelectType('scene')}
+              className={`p-6 rounded-2xl transition-all text-left border ${
+                isDark
+                  ? 'bg-slate-800/50 border-purple-800/30 hover:border-purple-500/50'
+                  : 'bg-white border-purple-100 hover:border-purple-300 hover:shadow-md'
+              }`}
+            >
+              <div className={`w-14 h-14 rounded-xl flex items-center justify-center mb-4 ${
+                isDark ? 'bg-purple-500/20' : 'bg-purple-100'
+              }`}>
+                <Workflow className={`w-7 h-7 ${isDark ? 'text-purple-400' : 'text-purple-500'}`} />
+              </div>
+              <h3 className={`font-semibold text-lg mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>场景执行</h3>
+              <p className={`text-sm mb-4 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                按场景模板执行完整流程
+              </p>
+              <div className="space-y-2">
+                <div className="flex items-center gap-2 text-xs">
+                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>完整流程编排</span>
+                </div>
+                <div className="flex items-center gap-2 text-xs">
+                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>多智能体协同</span>
+                </div>
+                <div className="flex items-center gap-2 text-xs">
+                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>完整产出</span>
+                </div>
+              </div>
+              <div className={`mt-4 pt-4 border-t flex justify-between items-center ${isDark ? 'border-purple-800/30' : 'border-purple-100'}`}>
+                <span className={`text-xs ${isDark ? 'text-purple-400' : 'text-purple-500'}`}>适用：完整策略/推演</span>
+                <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>输出：方案/报告</span>
+              </div>
+              <div className={`mt-3 px-4 py-2 rounded-lg text-center text-sm font-medium ${
+                isDark ? 'bg-purple-500/20 text-purple-400' : 'bg-purple-100 text-purple-600'
+              }`}>
+                选择该模式
+              </div>
+            </button>
+          </div>
+
+          {/* 底部按钮 */}
+          <div className="flex justify-between items-center mt-8">
+            <button
+              onClick={() => onNavigate('task-list')}
+              className={`px-6 py-2.5 rounded-lg text-sm transition-colors ${
+                isDark
+                  ? 'bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300'
+                  : 'bg-gray-100 hover:bg-gray-200 border border-gray-200 text-gray-700'
+              }`}
+            >
+              取消
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* 步骤2：单智能体任务表单 */}
+      {step === 'single' && (
+        <div className="max-w-3xl mx-auto">
+          <div className={`rounded-xl p-6 border ${isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'}`}>
+            <h2 className={`font-semibold text-lg mb-6 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              <Bot className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+              单智能体任务配置
+            </h2>
+
+            <div className="space-y-6">
+              {/* 任务名称 */}
+              <div>
+                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>任务名称</label>
+                <input
+                  type="text"
+                  value={singleTask.name}
+                  onChange={(e) => setSingleTask({ ...singleTask, name: e.target.value })}
+                  placeholder="例如：五四青年节目标受众分析"
+                  className={`w-full px-4 py-2.5 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
+                    isDark
+                      ? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
+                      : 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
+                  }`}
+                />
+              </div>
+
+              {/* 选择智能体 */}
+              <div>
+                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>选择智能体</label>
+                <div className="grid grid-cols-2 gap-3">
+                  {availableAgents.map((agent) => {
+                    const Icon = agent.icon;
+                    const isSelected = singleTask.agent === agent.id;
+                    return (
+                      <button
+                        key={agent.id}
+                        onClick={() => setSingleTask({ ...singleTask, agent: agent.id })}
+                        className={`p-4 rounded-lg border text-left transition-all ${
+                          isSelected
+                            ? isDark
+                              ? 'bg-blue-500/20 border-blue-500/50'
+                              : 'bg-red-50 border-red-300'
+                            : isDark
+                              ? 'bg-slate-900/50 border-blue-800/30 hover:border-blue-500/30'
+                              : 'bg-white border-red-100 hover:border-red-200'
+                        }`}
+                      >
+                        <div className="flex items-center gap-3">
+                          <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                            isDark ? 'bg-blue-500/20' : 'bg-red-100'
+                          }`}>
+                            <Icon className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+                          </div>
+                          <div>
+                            <p className={`text-sm font-medium ${isSelected ? (isDark ? 'text-blue-400' : 'text-red-600') : (isDark ? 'text-white' : 'text-gray-900')}`}>
+                              {agent.name}
+                            </p>
+                            <p className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{agent.role}</p>
+                          </div>
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {/* 输入内容 */}
+              <div>
+                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>任务输入</label>
+                <textarea
+                  value={singleTask.input}
+                  onChange={(e) => setSingleTask({ ...singleTask, input: e.target.value })}
+                  placeholder="请详细描述您需要该智能体处理的任务..."
+                  rows={6}
+                  className={`w-full px-4 py-3 rounded-lg text-sm resize-none focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
+                    isDark
+                      ? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
+                      : 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
+                  }`}
+                />
+              </div>
+
+              {/* 输出格式要求 */}
+              <div>
+                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>输出格式要求（可选）</label>
+                <textarea
+                  value={singleTask.outputFormat}
+                  onChange={(e) => setSingleTask({ ...singleTask, outputFormat: e.target.value })}
+                  placeholder="例如：输出JSON格式，包含受众画像、行为特征、需求分析等字段"
+                  rows={3}
+                  className={`w-full px-4 py-3 rounded-lg text-sm resize-none focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
+                    isDark
+                      ? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
+                      : 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
+                  }`}
+                />
+              </div>
+
+              {/* 提交按钮 */}
+              <div className={`flex justify-end gap-3 pt-4 border-t ${isDark ? 'border-blue-800/30' : 'border-red-100'}`}>
+                <button
+                  onClick={() => setStep('type')}
+                  className={`px-6 py-2.5 rounded-lg text-sm transition-colors ${
+                    isDark
+                      ? 'bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300'
+                      : 'bg-gray-100 hover:bg-gray-200 border border-gray-200 text-gray-700'
+                  }`}
+                >
+                  上一步
+                </button>
+                <button
+                  onClick={handleCreateTask}
+                  disabled={!singleTask.name || !singleTask.agent || !singleTask.input}
+                  className={`px-6 py-2.5 rounded-lg text-sm font-medium transition-colors ${
+                    isDark
+                      ? 'bg-blue-600 hover:bg-blue-500 disabled:bg-slate-700 disabled:text-slate-500 text-white'
+                      : 'bg-red-600 hover:bg-red-500 disabled:bg-gray-400 text-white shadow-md'
+                  }`}
+                >
+                  创建任务
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 步骤2：多智能体协同分析任务表单 */}
+      {step === 'multi-agent' && (
+        <div className="max-w-4xl mx-auto">
+          <div className={`rounded-xl p-6 border ${isDark ? 'bg-slate-800/30 backdrop-blur-xl border-green-800/30' : 'bg-white border-green-100 shadow-sm'}`}>
+            <h2 className={`font-semibold text-lg mb-6 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              <Layers className={`w-5 h-5 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+              多智能体协同分析任务配置
+            </h2>
+
+            <div className="space-y-6">
+              {/* 任务名称 */}
+              <div>
+                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>任务名称</label>
+                <input
+                  type="text"
+                  value={multiAgentTask.name}
+                  onChange={(e) => setMultiAgentTask({ ...multiAgentTask, name: e.target.value })}
+                  placeholder="例如：五四青年节宣传方向多智能体分析"
+                  className={`w-full px-4 py-2.5 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500/20 ${
+                    isDark
+                      ? 'bg-slate-900/50 border border-green-800/30 text-white placeholder-slate-500'
+                      : 'bg-white border border-green-200 text-gray-900 placeholder-gray-400'
+                  }`}
+                />
+              </div>
+
+              {/* 分析任务描述 */}
+              <div>
+                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>分析任务描述</label>
+                <textarea
+                  value={multiAgentTask.input}
+                  onChange={(e) => setMultiAgentTask({ ...multiAgentTask, input: e.target.value })}
+                  placeholder="请详细描述您需要多智能体协同分析的任务内容、分析目标、业务背景等..."
+                  rows={4}
+                  className={`w-full px-4 py-3 rounded-lg text-sm resize-none focus:outline-none focus:ring-2 focus:ring-green-500/20 ${
+                    isDark
+                      ? 'bg-slate-900/50 border border-green-800/30 text-white placeholder-slate-500'
+                      : 'bg-white border border-green-200 text-gray-900 placeholder-gray-400'
+                  }`}
+                />
+              </div>
+
+              {/* 选择参与智能体 */}
+              <div>
+                <div className="flex items-center justify-between mb-3">
+                  <div className="flex items-center gap-2">
+                    <label className={`block text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                      选择参与协同的智能体
+                    </label>
+                    <span className={`px-2 py-0.5 rounded text-xs font-medium ${
+                      multiAgentTask.selectedAgents.length < 3
+                        ? isDark ? 'bg-amber-500/20 text-amber-400' : 'bg-amber-100 text-amber-600'
+                        : isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-600'
+                    }`}>
+                      已选择：{multiAgentTask.selectedAgents.length}/8
+                    </span>
+                  </div>
+                  {multiAgentTask.selectedAgents.length < 3 && (
+                    <span className={`text-xs ${isDark ? 'text-amber-400' : 'text-amber-600'}`}>
+                      请至少选择3个智能体
+                    </span>
+                  )}
+                </div>
+
+                {/* 搜索和筛选 */}
+                <div className="flex items-center gap-3 mb-4">
+                  <div className={`flex-1 relative ${
+                    isDark ? 'text-slate-400' : 'text-gray-500'
+                  }`}>
+                    <Bot className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" />
+                    <input
+                      type="text"
+                      value={multiAgentTask.agentSearchQuery}
+                      onChange={(e) => setMultiAgentTask({ ...multiAgentTask, agentSearchQuery: e.target.value })}
+                      placeholder="搜索智能体..."
+                      className={`w-full pl-9 pr-4 py-2 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500/20 ${
+                        isDark
+                          ? 'bg-slate-900/50 border border-green-800/30 text-white placeholder-slate-500'
+                          : 'bg-white border border-green-200 text-gray-900 placeholder-gray-400'
+                      }`}
+                    />
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {['all', '策略', '用户', '内容', '运营'].map((cat) => (
+                      <button
+                        key={cat}
+                        onClick={() => setMultiAgentTask({ ...multiAgentTask, agentCategory: cat })}
+                        className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
+                          multiAgentTask.agentCategory === cat
+                            ? isDark ? 'bg-green-500/30 text-green-400 border border-green-500/50' : 'bg-green-100 text-green-600 border border-green-300'
+                            : isDark ? 'bg-slate-700/50 text-slate-400 border border-slate-600' : 'bg-gray-100 text-gray-500 border border-gray-200'
+                        }`}
+                      >
+                        {cat === 'all' ? '全部' : cat}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                {/* 已选择的智能体 */}
+                {multiAgentTask.selectedAgents.length > 0 && (
+                  <div className={`p-3 rounded-lg mb-4 ${isDark ? 'bg-green-500/10 border border-green-800/30' : 'bg-green-50 border border-green-200'}`}>
+                    <div className="flex items-center gap-2 mb-2">
+                      <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                      <span className={`text-xs font-medium ${isDark ? 'text-green-400' : 'text-green-600'}`}>
+                        已选择的智能体
+                      </span>
+                    </div>
+                    <div className="flex flex-wrap gap-2">
+                      {multiAgentTask.selectedAgents.map((agentId) => {
+                        const agent = availableAgents.find(a => a.id === agentId);
+                        if (!agent) return null;
+                        const Icon = agent.icon;
+                        return (
+                          <div
+                            key={agentId}
+                            className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-sm ${
+                              isDark ? 'bg-green-500/20 text-green-400 border border-green-500/30' : 'bg-white text-green-600 border border-green-300'
+                            }`}
+                          >
+                            <Icon className="w-3.5 h-3.5" />
+                            <span>{agent.name}</span>
+                            <button
+                              onClick={() => toggleAgent(agentId)}
+                              className={`ml-1 hover:text-red-400 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}
+                            >
+                              <X className="w-3.5 h-3.5" />
+                            </button>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+
+                {/* 智能体卡片列表 */}
+                <div className="grid grid-cols-4 gap-3 max-h-64 overflow-y-auto custom-scrollbar pr-1">
+                  {getFilteredAgents().map((agent) => {
+                    const Icon = agent.icon;
+                    const isSelected = multiAgentTask.selectedAgents.includes(agent.id);
+                    const isDisabled = !isSelected && multiAgentTask.selectedAgents.length >= 8;
+                    return (
+                      <button
+                        key={agent.id}
+                        onClick={() => toggleAgent(agent.id)}
+                        disabled={isDisabled}
+                        className={`p-3 rounded-lg border text-left transition-all ${
+                          isSelected
+                            ? isDark
+                              ? 'bg-green-500/20 border-green-500/50'
+                              : 'bg-green-50 border-green-300'
+                            : isDisabled
+                            ? isDark
+                              ? 'bg-slate-800/30 border-slate-700/50 opacity-50 cursor-not-allowed'
+                              : 'bg-gray-50 border-gray-200 opacity-50 cursor-not-allowed'
+                            : isDark
+                              ? 'bg-slate-900/50 border-green-800/30 hover:border-green-500/50'
+                              : 'bg-white border-gray-200 hover:border-green-300'
+                        }`}
+                      >
+                        <div className="flex items-center gap-2 mb-2">
+                          <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                            isSelected
+                              ? isDark ? 'bg-green-500/30' : 'bg-green-200'
+                              : isDark ? 'bg-slate-700/50' : 'bg-gray-100'
+                          }`}>
+                            <Icon className={`w-4 h-4 ${isSelected ? (isDark ? 'text-green-400' : 'text-green-600') : (isDark ? 'text-slate-400' : 'text-gray-500')}`} />
+                          </div>
+                          {isSelected && (
+                            <div className={`w-5 h-5 rounded-full flex items-center justify-center ${
+                              isDark ? 'bg-green-500' : 'bg-green-500'
+                            }`}>
+                              <CheckCircle className="w-3.5 h-3.5 text-white" />
+                            </div>
+                          )}
+                        </div>
+                        <p className={`text-xs font-medium mb-0.5 ${isSelected ? (isDark ? 'text-green-400' : 'text-green-600') : (isDark ? 'text-white' : 'text-gray-900')}`}>
+                          {agent.name}
+                        </p>
+                        <p className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>
+                          {agent.role}
+                        </p>
+                        <p className={`text-xs mt-1 line-clamp-2 ${isDark ? 'text-slate-600' : 'text-gray-400'}`}>
+                          {agent.desc}
+                        </p>
+                        <span className={`inline-block mt-2 px-1.5 py-0.5 rounded text-xs ${
+                          isDark ? 'bg-slate-700/50 text-slate-500' : 'bg-gray-100 text-gray-500'
+                        }`}>
+                          {agent.category}
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+
+                {getFilteredAgents().length === 0 && (
+                  <div className={`text-center py-8 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                    <Bot className="w-8 h-8 mx-auto mb-2 opacity-50" />
+                    <p className="text-sm">未找到匹配的智能体</p>
+                  </div>
+                )}
+              </div>
+
+              {/* 流程预览 */}
+              <div className={`rounded-xl p-4 ${isDark ? 'bg-green-500/10 border border-green-800/30' : 'bg-green-50 border border-green-200'}`}>
+                <h4 className={`font-medium text-sm mb-3 flex items-center gap-2 ${isDark ? 'text-green-400' : 'text-green-600'}`}>
+                  <Sparkles className={`w-4 h-4`} />
+                  多智能体协同分析流程
+                </h4>
+                <div className="grid grid-cols-5 gap-2">
+                  {[
+                    { step: 1, label: '选择参与智能体' },
+                    { step: 2, label: '发送分析任务' },
+                    { step: 3, label: '并行获取分析' },
+                    { step: 4, label: '采纳/追问' },
+                    { step: 5, label: '汇总报告' },
+                  ].map((item) => (
+                    <div key={item.step} className="text-center">
+                      <div className={`w-8 h-8 rounded-full flex items-center justify-center mx-auto mb-1 ${
+                        isDark ? 'bg-green-500/20 border border-green-500/50' : 'bg-green-100 border border-green-200'
+                      }`}>
+                        <span className={`text-xs font-medium ${isDark ? 'text-green-400' : 'text-green-600'}`}>{item.step}</span>
+                      </div>
+                      <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{item.label}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* 特点说明 */}
+              <div className="grid grid-cols-3 gap-3">
+                <div className={`p-3 rounded-lg text-center border ${isDark ? 'bg-green-500/10 border-green-800/30' : 'bg-green-50 border-green-100'}`}>
+                  <Layers className={`w-5 h-5 mx-auto mb-1 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                  <p className={`text-xs font-medium ${isDark ? 'text-green-400' : 'text-green-600'}`}>多智能体参与</p>
+                  <p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>3-8个智能体并行</p>
+                </div>
+                <div className={`p-3 rounded-lg text-center border ${isDark ? 'bg-green-500/10 border-green-800/30' : 'bg-green-50 border-green-100'}`}>
+                  <Bot className={`w-5 h-5 mx-auto mb-1 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                  <p className={`text-xs font-medium ${isDark ? 'text-green-400' : 'text-green-600'}`}>独立并行分析</p>
+                  <p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>互不干扰</p>
+                </div>
+                <div className={`p-3 rounded-lg text-center border ${isDark ? 'bg-green-500/10 border-green-800/30' : 'bg-green-50 border-green-100'}`}>
+                  <FileText className={`w-5 h-5 mx-auto mb-1 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                  <p className={`text-xs font-medium ${isDark ? 'text-green-400' : 'text-green-600'}`}>汇总报告</p>
+                  <p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>人工整合输出</p>
+                </div>
+              </div>
+
+              {/* 提交按钮 */}
+              <div className={`flex justify-end gap-3 pt-4 border-t ${isDark ? 'border-green-800/30' : 'border-green-100'}`}>
+                <button
+                  onClick={() => setStep('type')}
+                  className={`px-6 py-2.5 rounded-lg text-sm transition-colors ${
+                    isDark
+                      ? 'bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300'
+                      : 'bg-gray-100 hover:bg-gray-200 border border-gray-200 text-gray-700'
+                  }`}
+                >
+                  上一步
+                </button>
+                <button
+                  onClick={handleCreateTask}
+                  disabled={!multiAgentTask.name || !multiAgentTask.input || multiAgentTask.selectedAgents.length < 3}
+                  className={`px-6 py-2.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 ${
+                    multiAgentTask.name && multiAgentTask.input && multiAgentTask.selectedAgents.length >= 3
+                      ? isDark
+                        ? 'bg-green-600 hover:bg-green-500 text-white'
+                        : 'bg-green-600 hover:bg-green-500 text-white shadow-md'
+                      : isDark
+                        ? 'bg-slate-700 text-slate-500 cursor-not-allowed'
+                        : 'bg-gray-300 text-gray-500 cursor-not-allowed'
+                  }`}
+                >
+                  <Layers className="w-4 h-4" />
+                  进入协同分析
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* 提示 */}
+          <div className={`mt-4 p-4 rounded-xl border ${isDark ? 'bg-blue-500/10 border-blue-500/30' : 'bg-blue-50 border-blue-200'}`}>
+            <div className="flex items-start gap-2">
+              <Sparkles className={`w-4 h-4 flex-shrink-0 mt-0.5 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
+              <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                <span className={`font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>提示：</span>
+                多智能体协同分析将同时邀请多个智能体对同一问题进行分析，您可以选择采纳某个智能体的观点、
+                继续追问特定智能体，最终将多个观点汇总成联合分析报告。建议选择不同职能领域的智能体以获得更全面的分析视角。
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 步骤2：场景任务表单 */}
+      {step === 'scene' && (
+        <div className="max-w-3xl mx-auto">
+          <div className={`rounded-xl p-6 border ${isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'}`}>
+            <h2 className={`font-semibold text-lg mb-6 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              <Workflow className={`w-5 h-5 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
+              场景任务配置
+            </h2>
+
+            <div className="space-y-6">
+              {/* 任务名称 */}
+              <div>
+                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>任务名称</label>
+                <input
+                  type="text"
+                  value={sceneTask.name}
+                  onChange={(e) => setSceneTask({ ...sceneTask, name: e.target.value })}
+                  placeholder="例如：五四青年节宣传活动策略生成"
+                  className={`w-full px-4 py-2.5 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
+                    isDark
+                      ? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
+                      : 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
+                  }`}
+                />
+              </div>
+
+              {/* 选择场景 */}
+              <div>
+                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>选择场景模板</label>
+                <div className="space-y-3">
+                  {availableScenes.map((scene) => {
+                    const isSelected = sceneTask.scene === scene.id;
+                    return (
+                      <button
+                        key={scene.id}
+                        onClick={() => setSceneTask({ ...sceneTask, scene: scene.id })}
+                        className={`w-full p-4 rounded-lg border text-left transition-all ${
+                          isSelected
+                            ? isDark
+                              ? 'bg-purple-500/20 border-purple-500/50'
+                              : 'bg-red-50 border-red-300'
+                            : isDark
+                              ? 'bg-slate-900/50 border-blue-800/30 hover:border-purple-500/30'
+                              : 'bg-white border-red-100 hover:border-red-200'
+                        }`}
+                      >
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-3">
+                            <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
+                              isDark ? 'bg-purple-500/20' : 'bg-red-100'
+                            }`}>
+                              <Layers className={`w-5 h-5 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
+                            </div>
+                            <div>
+                              <p className={`text-sm font-medium ${isSelected ? (isDark ? 'text-purple-400' : 'text-red-600') : (isDark ? 'text-white' : 'text-gray-900')}`}>
+                                {scene.name}
+                              </p>
+                              <p className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{scene.desc}</p>
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-4">
+                            <span className={`px-2 py-1 rounded text-xs ${
+                              isDark ? 'bg-slate-800 text-slate-400' : 'bg-gray-100 text-gray-500'
+                            }`}>
+                              {scene.agents} 个智能体
+                            </span>
+                            {isSelected && (
+                              <CheckCircle className={`w-5 h-5 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
+                            )}
+                          </div>
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {/* 任务输入 */}
+              <div>
+                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>任务要求</label>
+                <textarea
+                  value={sceneTask.input}
+                  onChange={(e) => setSceneTask({ ...sceneTask, input: e.target.value })}
+                  placeholder="请详细描述您的任务要求、业务背景、核心目标等..."
+                  rows={6}
+                  className={`w-full px-4 py-3 rounded-lg text-sm resize-none focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
+                    isDark
+                      ? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
+                      : 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
+                  }`}
+                />
+              </div>
+
+              {/* 时间要求 */}
+              <div>
+                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>完成时间要求（可选）</label>
+                <input
+                  type="text"
+                  value={sceneTask.deadline}
+                  onChange={(e) => setSceneTask({ ...sceneTask, deadline: e.target.value })}
+                  placeholder="例如：5月1日前完成"
+                  className={`w-full px-4 py-2.5 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
+                    isDark
+                      ? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
+                      : 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
+                  }`}
+                />
+              </div>
+
+              {/* 约束条件 */}
+              <div>
+                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>特殊约束（可选）</label>
+                <textarea
+                  value={sceneTask.constraints}
+                  onChange={(e) => setSceneTask({ ...sceneTask, constraints: e.target.value })}
+                  placeholder="例如：预算有限，需注重性价比；需要可量化评估..."
+                  rows={3}
+                  className={`w-full px-4 py-3 rounded-lg text-sm resize-none focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
+                    isDark
+                      ? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
+                      : 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
+                  }`}
+                />
+              </div>
+
+              {/* 提交按钮 */}
+              <div className={`flex justify-end gap-3 pt-4 border-t ${isDark ? 'border-blue-800/30' : 'border-red-100'}`}>
+                <button
+                  onClick={() => setStep('type')}
+                  className={`px-6 py-2.5 rounded-lg text-sm transition-colors ${
+                    isDark
+                      ? 'bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300'
+                      : 'bg-gray-100 hover:bg-gray-200 border border-gray-200 text-gray-700'
+                  }`}
+                >
+                  上一步
+                </button>
+                <button
+                  onClick={handleCreateTask}
+                  disabled={!sceneTask.name || !sceneTask.scene || !sceneTask.input}
+                  className={`px-6 py-2.5 rounded-lg text-sm font-medium transition-colors ${
+                    isDark
+                      ? 'bg-purple-600 hover:bg-purple-500 disabled:bg-slate-700 disabled:text-slate-500 text-white'
+                      : 'bg-red-600 hover:bg-red-500 disabled:bg-gray-400 text-white shadow-md'
+                  }`}
+                >
+                  创建任务
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 步骤2：多智能体会商任务 - 快速入口 */}
+      {step === 'consult' && (
+        <div className="max-w-3xl mx-auto">
+          <div className={`rounded-xl p-6 border ${isDark ? 'bg-slate-800/30 backdrop-blur-xl border-orange-800/30' : 'bg-white border-red-100 shadow-sm'}`}>
+            <div className="text-center mb-6">
+              <div className={`w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 ${
+                isDark ? 'bg-orange-500/20' : 'bg-red-100'
+              }`}>
+                <Users className={`w-8 h-8 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
+              </div>
+              <h2 className={`font-semibold text-lg mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>多智能体会商任务</h2>
+              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                多智能体并行讨论，人类主导研判与决策，输出会商结论
+              </p>
+            </div>
+
+            {/* 会商流程预览 */}
+            <div className={`rounded-xl p-4 mb-6 ${isDark ? 'bg-slate-900/50' : 'bg-gray-50'}`}>
+              <h4 className={`font-medium text-sm mb-3 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                <Target className={`w-4 h-4 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
+                会商流程
+              </h4>
+              <div className="grid grid-cols-5 gap-2">
+                {[
+                  { step: 1, label: '选择参与智能体' },
+                  { step: 2, label: '设置会商规则' },
+                  { step: 3, label: '首轮独立发言' },
+                  { step: 4, label: '交叉讨论' },
+                  { step: 5, label: '人工整合' },
+                ].map((item) => (
+                  <div key={item.step} className="text-center">
+                    <div className={`w-8 h-8 rounded-full flex items-center justify-center mx-auto mb-1 ${
+                      isDark ? 'bg-orange-500/20 border border-orange-500/50' : 'bg-red-100 border border-red-200'
+                    }`}>
+                      <span className={`text-xs font-medium ${isDark ? 'text-orange-400' : 'text-red-600'}`}>{item.step}</span>
+                    </div>
+                    <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{item.label}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* 特点说明 */}
+            <div className="grid grid-cols-3 gap-3 mb-6">
+              <div className={`p-3 rounded-lg text-center border ${isDark ? 'bg-orange-500/10 border-orange-500/20' : 'bg-red-50 border-red-100'}`}>
+                <Users className={`w-5 h-5 mx-auto mb-1 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
+                <p className={`text-xs font-medium ${isDark ? 'text-orange-400' : 'text-red-600'}`}>多智能体参与</p>
+                <p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>3-6个智能体并行</p>
+              </div>
+              <div className={`p-3 rounded-lg text-center border ${isDark ? 'bg-orange-500/10 border-orange-500/20' : 'bg-red-50 border-red-100'}`}>
+                <MessageSquare className={`w-5 h-5 mx-auto mb-1 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
+                <p className={`text-xs font-medium ${isDark ? 'text-orange-400' : 'text-red-600'}`}>多种讨论模式</p>
+                <p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>并行/交叉/人机共判</p>
+              </div>
+              <div className={`p-3 rounded-lg text-center border ${isDark ? 'bg-orange-500/10 border-orange-500/20' : 'bg-red-50 border-red-100'}`}>
+                <Sparkles className={`w-5 h-5 mx-auto mb-1 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
+                <p className={`text-xs font-medium ${isDark ? 'text-orange-400' : 'text-red-600'}`}>人工整合</p>
+                <p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>人类主导判断</p>
+              </div>
+            </div>
+
+            {/* 适用场景 */}
+            <div className={`rounded-xl p-4 mb-6 ${isDark ? 'bg-slate-900/50' : 'bg-gray-50'}`}>
+              <h4 className={`font-medium text-sm mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>适用场景</h4>
+              <div className="flex flex-wrap gap-2">
+                <span className={`px-2 py-1 rounded text-xs ${isDark ? 'bg-orange-500/10 text-orange-400' : 'bg-red-100 text-red-600'}`}>前期方案研判</span>
+                <span className={`px-2 py-1 rounded text-xs ${isDark ? 'bg-orange-500/10 text-orange-400' : 'bg-red-100 text-red-600'}`}>多方案比较分析</span>
+                <span className={`px-2 py-1 rounded text-xs ${isDark ? 'bg-orange-500/10 text-orange-400' : 'bg-red-100 text-red-600'}`}>争议问题讨论</span>
+                <span className={`px-2 py-1 rounded text-xs ${isDark ? 'bg-orange-500/10 text-orange-400' : 'bg-red-100 text-red-600'}`}>策略方向选择</span>
+              </div>
+            </div>
+
+            {/* 操作按钮 */}
+            <div className={`flex justify-end gap-3 pt-4 border-t ${isDark ? 'border-orange-800/30' : 'border-red-100'}`}>
+              <button
+                onClick={() => setStep('type')}
+                className={`px-6 py-2.5 rounded-lg text-sm transition-colors ${
+                  isDark
+                    ? 'bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300'
+                    : 'bg-gray-100 hover:bg-gray-200 border border-gray-200 text-gray-700'
+                }`}
+              >
+                上一步
+              </button>
+              <button
+                onClick={handleCreateTask}
+                className={`px-6 py-2.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 ${
+                  isDark
+                    ? 'bg-orange-600 hover:bg-orange-500 text-white'
+                    : 'bg-red-600 hover:bg-red-500 text-white shadow-md'
+                }`}
+              >
+                <MessageSquare className="w-4 h-4" />
+                进入会商配置
+              </button>
+            </div>
+          </div>
+
+          {/* 提示 */}
+          <div className={`mt-4 p-4 rounded-xl border ${isDark ? 'bg-blue-500/10 border-blue-500/30' : 'bg-blue-50 border-blue-200'}`}>
+            <div className="flex items-start gap-2">
+              <Sparkles className={`w-4 h-4 flex-shrink-0 mt-0.5 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
+              <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                <span className={`font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>提示：</span>
+                会商任务将跳转到专门的会商配置页面，您可以在那里详细选择参与智能体、设置会商规则和模式。
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TaskCreate;
diff --git a/web-code/components/taskManagement/TaskDashboard.tsx b/web-code/components/taskManagement/TaskDashboard.tsx
new file mode 100644
index 00000000..3c5e9739
--- /dev/null
+++ b/web-code/components/taskManagement/TaskDashboard.tsx
@@ -0,0 +1,931 @@
+import React, { useState } from "react";
+import {
+  FileText,
+  Search,
+  Filter,
+  Download,
+  Target,
+  Clock,
+  CheckCircle,
+  AlertTriangle,
+  Plus,
+  TrendingUp,
+  TrendingDown,
+  ChevronRight,
+  User,
+  Eye,
+} from "lucide-react";
+import { useTheme } from "@/contexts/ThemeContext";
+import { PageType } from "@/components/Sidebar";
+
+interface TaskDashboardProps {
+  onNavigate: (page: PageType) => void;
+}
+
+const TaskDashboard: React.FC<TaskDashboardProps> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+
+  // 主题颜色变量
+  const cardBg = isDark ? "bg-slate-800/30" : "bg-white";
+  const cardBorder = isDark ? "border-blue-800/30" : "border-red-100";
+  const textPrimary = isDark ? "text-white" : "text-gray-900";
+  const textSecondary = isDark ? "text-slate-400" : "text-gray-600";
+  const textMuted = isDark ? "text-slate-500" : "text-gray-400";
+  const inputBg = isDark ? "bg-slate-900/50" : "bg-white";
+
+  const [timeRange, setTimeRange] = useState<string>("month");
+  const [categoryFilter, setCategoryFilter] = useState<string>("all");
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+
+  // 统计数据
+  const stats = {
+    total: 1286,
+    inProgress: 326,
+    completed: 842,
+    delayed: 57,
+    weeklyNew: 93,
+    priorityPending: 41,
+  };
+
+  // 二级任务分类数据
+  const categoryData = [
+    { name: "XK任务", count: 320, percentage: 25 },
+    { name: "规划任务", count: 240, percentage: 19 },
+    { name: "MNTY任务", count: 280, percentage: 22 },
+    { name: "效果PG任务", count: 300, percentage: 23 },
+  ];
+
+  // 三级任务数据
+  const thirdLevelData = [
+    { name: "任务JC", count: 120 },
+    { name: "任务调度", count: 200 },
+    { name: "任务FX", count: 140 },
+    { name: "行动CE", count: 100 },
+    { name: "XDTY任务", count: 70 },
+    { name: "方案TY任务", count: 120 },
+    { name: "XXTY任务", count: 90 },
+    { name: "任务PG", count: 160 },
+    { name: "行动PG", count: 80 },
+    { name: "信息PG", count: 130 },
+    { name: "账号PG", count: 60 },
+  ];
+
+  // 预警任务列表
+  const warningTasks = [
+    {
+      id: "001",
+      name: "五四宣传执行任务",
+      category: "规划任务 / 行动CE",
+      status: "已延期",
+      dueDate: "04-20",
+      riskLevel: "high",
+    },
+    {
+      id: "002",
+      name: "青年传播调度任务",
+      category: "XK任务 / 任务调度",
+      status: "待处理",
+      dueDate: "04-18",
+      riskLevel: "medium",
+    },
+    {
+      id: "003",
+      name: "效果复盘信息任务",
+      category: "效果PG / 信息PG",
+      status: "阻塞中",
+      dueDate: "04-17",
+      riskLevel: "high",
+    },
+  ];
+
+  // 我的待办
+  const myTodos = {
+    pending: 8,
+    pendingConfirm: 3,
+    pendingReview: 2,
+  };
+
+  // Top 5 排行
+  const top5ByVolume = [
+    { name: "任务PG", count: 160 },
+    { name: "信息PG", count: 130 },
+    { name: "任务FX", count: 120 },
+    { name: "任务调度", count: 100 },
+    { name: "方案TY任务", count: 90 },
+  ];
+
+  const top5ByDelay = [
+    { name: "行动CE", count: 15 },
+    { name: "任务调度", count: 12 },
+    { name: "信息PG", count: 10 },
+    { name: "XDTY任务", count: 8 },
+    { name: "账号PG", count: 6 },
+  ];
+
+  // 完成率对比
+  const completionRates = [
+    { name: "XK任务", rate: 72 },
+    { name: "规划任务", rate: 61 },
+    { name: "MNTY任务", rate: 68 },
+    { name: "效果PG任务", rate: 54 },
+  ];
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* 顶部筛选区 */}
+      <div
+        className={`rounded-xl p-4 flex-shrink-0 mb-4 ${cardBg} border ${cardBorder}`}
+      >
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className={`text-xl font-bold ${textPrimary}`}>任务统计总览</h1>
+            <p className={`text-sm ${textMuted}`}>
+              面向分级分类任务体系的全局监控看板
+            </p>
+          </div>
+          <div className="flex items-center gap-3">
+            <select
+              value={timeRange}
+              onChange={(e) => setTimeRange(e.target.value)}
+              className={`px-4 py-2 border rounded-lg text-sm cursor-pointer ${inputBg} ${cardBorder} ${textSecondary}`}
+            >
+              <option value="day">今日</option>
+              <option value="week">本周</option>
+              <option value="month">本月</option>
+              <option value="quarter">本季度</option>
+              <option value="custom">自定义</option>
+            </select>
+            <select
+              value={categoryFilter}
+              onChange={(e) => setCategoryFilter(e.target.value)}
+              className={`px-4 py-2 border rounded-lg text-sm cursor-pointer ${inputBg} ${cardBorder} ${textSecondary}`}
+            >
+              <option value="all">全部分类</option>
+              <option value="xk">XK任务</option>
+              <option value="plan">规划任务</option>
+              <option value="mnty">MNTY任务</option>
+              <option value="effect">效果PG任务</option>
+            </select>
+            <select
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
+              className={`px-4 py-2 border rounded-lg text-sm cursor-pointer ${inputBg} ${cardBorder} ${textSecondary}`}
+            >
+              <option value="all">全部状态</option>
+              <option value="pending">未开始</option>
+              <option value="in-progress">进行中</option>
+              <option value="completed">已完成</option>
+              <option value="delayed">延期</option>
+            </select>
+            <button
+              className={`flex items-center gap-2 px-4 py-2 border rounded-lg text-sm transition-colors ${
+                isDark
+                  ? "border-blue-800/30 hover:bg-slate-700/50 text-slate-300"
+                  : "border-red-200 hover:bg-red-50 text-red-600"
+              }`}
+            >
+              <Download className="w-4 h-4" />
+              导出统计
+            </button>
+            <button
+              onClick={() => onNavigate("plan-task-fx")}
+              className={`flex items-center gap-2 px-4 py-2 text-white rounded-lg text-sm font-medium transition-colors ${
+                isDark
+                  ? "bg-blue-600 hover:bg-blue-500"
+                  : "bg-red-600 hover:bg-red-500"
+              }`}
+            >
+              查看全部任务
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* 第一行：核心指标卡 */}
+      <div className="grid grid-cols-6 gap-4 mb-4 flex-shrink-0">
+        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
+          <div className="flex items-center gap-2 mb-2">
+            <div
+              className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                isDark ? "bg-blue-500/20" : "bg-red-100"
+              }`}
+            >
+              <Target
+                className={`w-4 h-4 ${
+                  isDark ? "text-blue-400" : "text-red-500"
+                }`}
+              />
+            </div>
+            <span className={`text-sm ${textSecondary}`}>任务总数</span>
+          </div>
+          <p className={`text-3xl font-bold ${textPrimary}`}>1,286</p>
+          <div className="flex items-center gap-1 mt-1">
+            <TrendingUp
+              className={`w-3 h-3 ${
+                isDark ? "text-green-400" : "text-green-500"
+              }`}
+            />
+            <span
+              className={`text-xs ${
+                isDark ? "text-green-400" : "text-green-500"
+              }`}
+            >
+              较上周 +8%
+            </span>
+          </div>
+        </div>
+
+        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
+          <div className="flex items-center gap-2 mb-2">
+            <div
+              className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                isDark ? "bg-cyan-500/20" : "bg-red-100"
+              }`}
+            >
+              <Clock
+                className={`w-4 h-4 ${
+                  isDark ? "text-cyan-400" : "text-red-500"
+                }`}
+              />
+            </div>
+            <span className={`text-sm ${textSecondary}`}>进行中</span>
+          </div>
+          <p className={`text-3xl font-bold ${textPrimary}`}>326</p>
+          <div className="flex items-center gap-1 mt-1">
+            <span className={`text-xs ${textMuted}`}>占比 25.4%</span>
+          </div>
+        </div>
+
+        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
+          <div className="flex items-center gap-2 mb-2">
+            <div
+              className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                isDark ? "bg-green-500/20" : "bg-green-100"
+              }`}
+            >
+              <CheckCircle
+                className={`w-4 h-4 ${
+                  isDark ? "text-green-400" : "text-green-500"
+                }`}
+              />
+            </div>
+            <span className={`text-sm ${textSecondary}`}>已完成</span>
+          </div>
+          <p className={`text-3xl font-bold ${textPrimary}`}>842</p>
+          <div className="flex items-center gap-1 mt-1">
+            <span
+              className={`text-xs ${
+                isDark ? "text-green-400" : "text-green-500"
+              }`}
+            >
+              完成率 65.5%
+            </span>
+          </div>
+        </div>
+
+        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
+          <div className="flex items-center gap-2 mb-2">
+            <div
+              className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                isDark ? "bg-red-500/20" : "bg-orange-100"
+              }`}
+            >
+              <AlertTriangle
+                className={`w-4 h-4 ${
+                  isDark ? "text-red-400" : "text-orange-500"
+                }`}
+              />
+            </div>
+            <span className={`text-sm ${textSecondary}`}>延期任务</span>
+          </div>
+          <p
+            className={`text-3xl font-bold ${
+              isDark ? "text-red-400" : "text-orange-600"
+            }`}
+          >
+            57
+          </p>
+          <div className="flex items-center gap-1 mt-1">
+            <span
+              className={`text-xs ${
+                isDark ? "text-red-400" : "text-orange-500"
+              }`}
+            >
+              需重点关注
+            </span>
+          </div>
+        </div>
+
+        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
+          <div className="flex items-center gap-2 mb-2">
+            <div
+              className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                isDark ? "bg-purple-500/20" : "bg-red-100"
+              }`}
+            >
+              <Plus
+                className={`w-4 h-4 ${
+                  isDark ? "text-purple-400" : "text-red-500"
+                }`}
+              />
+            </div>
+            <span className={`text-sm ${textSecondary}`}>本周新增</span>
+          </div>
+          <p className={`text-3xl font-bold ${textPrimary}`}>93</p>
+          <div className="flex items-center gap-1 mt-1">
+            <TrendingUp
+              className={`w-3 h-3 ${
+                isDark ? "text-green-400" : "text-green-500"
+              }`}
+            />
+            <span
+              className={`text-xs ${
+                isDark ? "text-green-400" : "text-green-500"
+              }`}
+            >
+              较上周 +12
+            </span>
+          </div>
+        </div>
+
+        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
+          <div className="flex items-center gap-2 mb-2">
+            <div
+              className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                isDark ? "bg-yellow-500/20" : "bg-yellow-100"
+              }`}
+            >
+              <AlertTriangle
+                className={`w-4 h-4 ${
+                  isDark ? "text-yellow-400" : "text-yellow-600"
+                }`}
+              />
+            </div>
+            <span className={`text-sm ${textSecondary}`}>重点待处理</span>
+          </div>
+          <p className={`text-3xl font-bold ${textPrimary}`}>41</p>
+          <div className="flex items-center gap-1 mt-1">
+            <span className={`text-xs ${textMuted}`}>高优先级 12</span>
+          </div>
+        </div>
+      </div>
+
+      {/* 第二行：分类分布区 */}
+      <div className="grid grid-cols-3 gap-4 mb-4 flex-shrink-0">
+        {/* 左侧：二级任务分类分布 */}
+        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
+          <h3 className={`font-semibold mb-4 ${textPrimary}`}>
+            二级任务分类分布
+          </h3>
+          <div className="space-y-3">
+            {categoryData.map((item, index) => (
+              <div key={index} className="space-y-1">
+                <div className="flex items-center justify-between">
+                  <span className={`text-sm ${textSecondary}`}>
+                    {item.name}
+                  </span>
+                  <span className={`text-sm font-medium ${textPrimary}`}>
+                    {item.count}
+                  </span>
+                </div>
+                <div
+                  className={`h-2 rounded-full overflow-hidden ${
+                    isDark ? "bg-slate-700" : "bg-gray-200"
+                  }`}
+                >
+                  <div
+                    className={`h-full rounded-full transition-all ${
+                      index === 0
+                        ? isDark
+                          ? "bg-blue-500"
+                          : "bg-red-500"
+                        : index === 1
+                        ? isDark
+                          ? "bg-cyan-500"
+                          : "bg-red-400"
+                        : index === 2
+                        ? isDark
+                          ? "bg-purple-500"
+                          : "bg-red-300"
+                        : isDark
+                        ? "bg-green-500"
+                        : "bg-red-200"
+                    }`}
+                    style={{ width: `${item.percentage}%` }}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* 中间：三级任务分布（点击下钻） */}
+        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
+          <div className="flex items-center justify-between mb-4">
+            <h3 className={`font-semibold ${textPrimary}`}>三级任务分布</h3>
+            <select
+              className={`text-xs px-2 py-1 rounded ${inputBg} ${cardBorder} ${textMuted}`}
+            >
+              <option value="plan">规划任务</option>
+              <option value="xk">XK任务</option>
+              <option value="mnty">MNTY任务</option>
+              <option value="effect">效果PG任务</option>
+            </select>
+          </div>
+          <div className="space-y-2">
+            {thirdLevelData.slice(0, 5).map((item, index) => (
+              <div key={index} className="flex items-center gap-2">
+                <span className={`text-xs w-16 ${textMuted}`}>{item.name}</span>
+                <div
+                  className={`flex-1 h-4 rounded overflow-hidden ${
+                    isDark ? "bg-slate-700" : "bg-gray-200"
+                  }`}
+                >
+                  <div
+                    className={`h-full rounded ${
+                      index === 0
+                        ? isDark
+                          ? "bg-blue-500"
+                          : "bg-red-500"
+                        : index === 1
+                        ? isDark
+                          ? "bg-cyan-500"
+                          : "bg-red-400"
+                        : index === 2
+                        ? isDark
+                          ? "bg-purple-500"
+                          : "bg-red-300"
+                        : index === 3
+                        ? isDark
+                          ? "bg-green-500"
+                          : "bg-red-200"
+                        : isDark
+                        ? "bg-yellow-500"
+                        : "bg-red-100"
+                    }`}
+                    style={{ width: `${(item.count / 200) * 100}%` }}
+                  />
+                </div>
+                <span
+                  className={`text-xs font-medium w-8 text-right ${textPrimary}`}
+                >
+                  {item.count}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* 右侧：三级任务数量Top5 */}
+        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
+          <h3 className={`font-semibold mb-4 ${textPrimary}`}>
+            三级任务数量 Top 5
+          </h3>
+          <div className="space-y-2">
+            {top5ByVolume.map((item, index) => (
+              <div key={index} className="flex items-center gap-2">
+                <span
+                  className={`w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold ${
+                    index === 0
+                      ? isDark
+                        ? "bg-yellow-500/20 text-yellow-400"
+                        : "bg-yellow-100 text-yellow-600"
+                      : index === 1
+                      ? isDark
+                        ? "bg-slate-500/20 text-slate-400"
+                        : "bg-gray-200 text-gray-600"
+                      : index === 2
+                      ? isDark
+                        ? "bg-orange-500/20 text-orange-400"
+                        : "bg-orange-100 text-orange-600"
+                      : isDark
+                      ? "bg-slate-600/20 text-slate-500"
+                      : "bg-gray-100 text-gray-500"
+                  }`}
+                >
+                  {index + 1}
+                </span>
+                <span className={`flex-1 text-sm ${textSecondary}`}>
+                  {item.name}
+                </span>
+                <span className={`text-sm font-medium ${textPrimary}`}>
+                  {item.count}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* 第三行：状态与趋势分析区 */}
+      <div className="grid grid-cols-3 gap-4 mb-4 flex-shrink-0">
+        {/* 左侧：任务状态分布 */}
+        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
+          <h3 className={`font-semibold mb-4 ${textPrimary}`}>任务状态分布</h3>
+          <div className="space-y-3">
+            {categoryData.map((item, index) => (
+              <div key={index}>
+                <div className="flex items-center justify-between mb-1">
+                  <span className={`text-xs ${textMuted}`}>{item.name}</span>
+                </div>
+                <div className="flex gap-1">
+                  <div
+                    className={`h-3 flex-1 rounded-l ${
+                      isDark ? "bg-slate-700" : "bg-gray-200"
+                    }`}
+                    style={{ width: "30%" }}
+                  />
+                  <div
+                    className={`h-3 flex-1 ${
+                      isDark ? "bg-blue-500" : "bg-red-400"
+                    }`}
+                    style={{ width: "25%" }}
+                  />
+                  <div
+                    className={`h-3 flex-1 ${
+                      isDark ? "bg-green-500" : "bg-green-400"
+                    }`}
+                    style={{ width: "35%" }}
+                  />
+                  <div
+                    className={`h-3 flex-1 rounded-r ${
+                      isDark ? "bg-red-500" : "bg-orange-400"
+                    }`}
+                    style={{ width: "10%" }}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="flex items-center justify-center gap-4 mt-4 pt-4 border-t ${cardBorder}">
+            <div className="flex items-center gap-1">
+              <div
+                className={`w-2 h-2 rounded ${
+                  isDark ? "bg-slate-600" : "bg-gray-400"
+                }`}
+              />
+              <span className={`text-xs ${textMuted}`}>未开始</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <div
+                className={`w-2 h-2 rounded ${
+                  isDark ? "bg-blue-500" : "bg-red-400"
+                }`}
+              />
+              <span className={`text-xs ${textMuted}`}>进行中</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <div
+                className={`w-2 h-2 rounded ${
+                  isDark ? "bg-green-500" : "bg-green-400"
+                }`}
+              />
+              <span className={`text-xs ${textMuted}`}>已完成</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <div
+                className={`w-2 h-2 rounded ${
+                  isDark ? "bg-red-500" : "bg-orange-400"
+                }`}
+              />
+              <span className={`text-xs ${textMuted}`}>延期</span>
+            </div>
+          </div>
+        </div>
+
+        {/* 中间：任务趋势图（简化版） */}
+        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
+          <div className="flex items-center justify-between mb-4">
+            <h3 className={`font-semibold ${textPrimary}`}>
+              任务趋势（近30天）
+            </h3>
+            <div className="flex gap-2">
+              <button
+                className={`px-2 py-1 rounded text-xs ${
+                  timeRange === "7d"
+                    ? isDark
+                      ? "bg-blue-500/20 text-blue-400"
+                      : "bg-red-100 text-red-600"
+                    : textMuted
+                }`}
+              >
+                近7天
+              </button>
+              <button
+                className={`px-2 py-1 rounded text-xs ${
+                  timeRange === "30d"
+                    ? isDark
+                      ? "bg-blue-500/20 text-blue-400"
+                      : "bg-red-100 text-red-600"
+                    : textMuted
+                }`}
+              >
+                近30天
+              </button>
+            </div>
+          </div>
+          <div className="h-32 flex items-end justify-between gap-2">
+            {[65, 72, 68, 75, 80, 78, 85, 82, 88, 92, 87, 95].map(
+              (value, index) => (
+                <div
+                  key={index}
+                  className="flex-1 flex flex-col items-center gap-1"
+                >
+                  <div
+                    className={`w-full rounded-t transition-all ${
+                      isDark ? "bg-blue-500/50" : "bg-red-300"
+                    }`}
+                    style={{ height: `${value}%` }}
+                  />
+                </div>
+              )
+            )}
+          </div>
+          <div className="flex items-center justify-center gap-4 mt-2">
+            <div className="flex items-center gap-1">
+              <div
+                className={`w-3 h-1 rounded ${
+                  isDark ? "bg-blue-500" : "bg-red-500"
+                }`}
+              />
+              <span className={`text-xs ${textMuted}`}>新增任务</span>
+            </div>
+            <div className="flex items-center gap-1">
+              <div
+                className={`w-3 h-1 rounded ${
+                  isDark ? "bg-green-500" : "bg-green-500"
+                }`}
+              />
+              <span className={`text-xs ${textMuted}`}>完成任务</span>
+            </div>
+          </div>
+        </div>
+
+        {/* 右侧：分类完成率对比 */}
+        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
+          <h3 className={`font-semibold mb-4 ${textPrimary}`}>
+            分类完成率对比
+          </h3>
+          <div className="space-y-4">
+            {completionRates.map((item, index) => (
+              <div key={index}>
+                <div className="flex items-center justify-between mb-1">
+                  <span className={`text-sm ${textSecondary}`}>
+                    {item.name}
+                  </span>
+                  <span
+                    className={`text-sm font-medium ${
+                      isDark ? "text-blue-400" : "text-red-600"
+                    }`}
+                  >
+                    {item.rate}%
+                  </span>
+                </div>
+                <div
+                  className={`h-2 rounded-full overflow-hidden ${
+                    isDark ? "bg-slate-700" : "bg-gray-200"
+                  }`}
+                >
+                  <div
+                    className={`h-full rounded-full transition-all ${
+                      isDark ? "bg-blue-500" : "bg-red-500"
+                    }`}
+                    style={{ width: `${item.rate}%` }}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* 第四行：预警与行动区 */}
+      <div className="grid grid-cols-3 gap-4 flex-shrink-0">
+        {/* 左侧：预警任务列表 */}
+        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
+          <div className="flex items-center justify-between mb-4">
+            <h3 className={`font-semibold ${textPrimary}`}>预警任务</h3>
+            <button
+              className={`text-xs ${
+                isDark
+                  ? "text-blue-400 hover:text-blue-300"
+                  : "text-red-500 hover:text-red-600"
+              }`}
+            >
+              查看全部
+            </button>
+          </div>
+          <div className="space-y-3">
+            {warningTasks.map((task) => (
+              <div
+                key={task.id}
+                className={`p-3 rounded-lg border cursor-pointer transition-all hover:shadow-md ${
+                  task.riskLevel === "high"
+                    ? isDark
+                      ? "bg-red-500/10 border-red-500/30"
+                      : "bg-orange-50 border-orange-200"
+                    : isDark
+                    ? "bg-yellow-500/10 border-yellow-500/30"
+                    : "bg-yellow-50 border-yellow-200"
+                }`}
+              >
+                <div className="flex items-start justify-between mb-1">
+                  <div className="flex items-center gap-2">
+                    <AlertTriangle
+                      className={`w-4 h-4 ${
+                        task.riskLevel === "high"
+                          ? isDark
+                            ? "text-red-400"
+                            : "text-orange-500"
+                          : isDark
+                          ? "text-yellow-400"
+                          : "text-yellow-500"
+                      }`}
+                    />
+                    <span className={`text-sm font-medium ${textPrimary}`}>
+                      {task.name}
+                    </span>
+                  </div>
+                  <span className={`text-xs ${textMuted}`}>
+                    截止：{task.dueDate}
+                  </span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span
+                    className={`text-xs px-2 py-0.5 rounded ${
+                      isDark
+                        ? "bg-slate-700/50 text-slate-400"
+                        : "bg-gray-100 text-gray-500"
+                    }`}
+                  >
+                    {task.category}
+                  </span>
+                  <span
+                    className={`text-xs ${
+                      task.status === "已延期"
+                        ? isDark
+                          ? "text-red-400"
+                          : "text-orange-500"
+                        : textMuted
+                    }`}
+                  >
+                    {task.status}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* 中间：重点分类排行 */}
+        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
+          <h3 className={`font-semibold mb-4 ${textPrimary}`}>重点排行</h3>
+          <div className="space-y-4">
+            <div>
+              <div className="flex items-center gap-2 mb-2">
+                <TrendingUp
+                  className={`w-4 h-4 ${
+                    isDark ? "text-blue-400" : "text-red-500"
+                  }`}
+                />
+                <span className={`text-sm font-medium ${textSecondary}`}>
+                  任务量 Top 5
+                </span>
+              </div>
+              <div className="space-y-1">
+                {top5ByVolume.map((item, index) => (
+                  <div key={index} className="flex items-center gap-2">
+                    <span className={`w-4 text-xs ${textMuted}`}>
+                      {index + 1}.
+                    </span>
+                    <span className={`flex-1 text-xs ${textSecondary}`}>
+                      {item.name}
+                    </span>
+                    <span className={`text-xs font-medium ${textPrimary}`}>
+                      {item.count}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className={`pt-3 border-t ${cardBorder}`}>
+              <div className="flex items-center gap-2 mb-2">
+                <AlertTriangle
+                  className={`w-4 h-4 ${
+                    isDark ? "text-red-400" : "text-orange-500"
+                  }`}
+                />
+                <span className={`text-sm font-medium ${textSecondary}`}>
+                  延期量 Top 5
+                </span>
+              </div>
+              <div className="space-y-1">
+                {top5ByDelay.map((item, index) => (
+                  <div key={index} className="flex items-center gap-2">
+                    <span className={`w-4 text-xs ${textMuted}`}>
+                      {index + 1}.
+                    </span>
+                    <span className={`flex-1 text-xs ${textSecondary}`}>
+                      {item.name}
+                    </span>
+                    <span
+                      className={`text-xs font-medium ${
+                        isDark ? "text-red-400" : "text-orange-500"
+                      }`}
+                    >
+                      {item.count}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 右侧：我的待办/快捷入口 */}
+        <div className={`rounded-xl p-4 border ${cardBg} ${cardBorder}`}>
+          <h3 className={`font-semibold mb-4 ${textPrimary}`}>我的待办</h3>
+          <div className="grid grid-cols-3 gap-3 mb-4">
+            <div
+              className={`p-3 rounded-lg text-center ${
+                isDark ? "bg-slate-700/50" : "bg-red-50"
+              }`}
+            >
+              <p className={`text-2xl font-bold ${textPrimary}`}>
+                {myTodos.pending}
+              </p>
+              <p className={`text-xs ${textMuted}`}>待处理</p>
+            </div>
+            <div
+              className={`p-3 rounded-lg text-center ${
+                isDark ? "bg-slate-700/50" : "bg-yellow-50"
+              }`}
+            >
+              <p className={`text-2xl font-bold ${textPrimary}`}>
+                {myTodos.pendingConfirm}
+              </p>
+              <p className={`text-xs ${textMuted}`}>待确认</p>
+            </div>
+            <div
+              className={`p-3 rounded-lg text-center ${
+                isDark ? "bg-slate-700/50" : "bg-blue-50"
+              }`}
+            >
+              <p className={`text-2xl font-bold ${textPrimary}`}>
+                {myTodos.pendingReview}
+              </p>
+              <p className={`text-xs ${textMuted}`}>待复核</p>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <button
+              onClick={() => onNavigate("task-create")}
+              className={`w-full flex items-center justify-center gap-2 px-4 py-2 text-white rounded-lg text-sm font-medium transition-colors ${
+                isDark
+                  ? "bg-blue-600 hover:bg-blue-500"
+                  : "bg-red-600 hover:bg-red-500"
+              }`}
+            >
+              <Plus className="w-4 h-4" />
+              新建任务
+            </button>
+            <button
+              onClick={() => onNavigate("plan-task-fx")}
+              className={`w-full flex items-center justify-center gap-2 px-4 py-2 border rounded-lg text-sm font-medium transition-colors ${
+                isDark
+                  ? "border-blue-800/30 hover:bg-slate-700/50 text-slate-300"
+                  : "border-red-200 hover:bg-red-50 text-red-600"
+              }`}
+            >
+              <FileText className="w-4 h-4" />
+              进入任务中心
+            </button>
+            <button
+              className={`w-full flex items-center justify-center gap-2 px-4 py-2 border rounded-lg text-sm font-medium transition-colors ${
+                isDark
+                  ? "border-blue-800/30 hover:bg-slate-700/50 text-slate-300"
+                  : "border-red-200 hover:bg-red-50 text-red-600"
+              }`}
+            >
+              <AlertTriangle className="w-4 h-4" />
+              查看延期任务
+            </button>
+            <button
+              className={`w-full flex items-center justify-center gap-2 px-4 py-2 border rounded-lg text-sm font-medium transition-colors ${
+                isDark
+                  ? "border-blue-800/30 hover:bg-slate-700/50 text-slate-300"
+                  : "border-red-200 hover:bg-red-50 text-red-600"
+              }`}
+            >
+              <User className="w-4 h-4" />
+              查看我的任务
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TaskDashboard;
diff --git a/web-code/components/taskManagement/TaskList.tsx b/web-code/components/taskManagement/TaskList.tsx
new file mode 100644
index 00000000..61e1e61e
--- /dev/null
+++ b/web-code/components/taskManagement/TaskList.tsx
@@ -0,0 +1,602 @@
+import React, { useState } from 'react';
+import { Plus, Search, Eye, Play, Pause, Trash2, Target, Clock, User, ChevronRight, Filter, Bot, Workflow, Users, MoreHorizontal, Edit, Copy, FileText } from 'lucide-react';
+import { useTheme } from '@/contexts/ThemeContext';
+import { PageType } from '@/components/Sidebar';
+
+interface TaskListProps {
+  onViewWorkspace: (id: string) => void;
+  onNavigate: (page: PageType) => void;
+}
+
+interface Task {
+  id: string;
+  name: string;
+  type: 'single' | 'scene' | 'consultation';
+  agent?: string;
+  scene?: string;
+  participants?: string[];
+  status: 'draft' | 'pending' | 'running' | 'paused' | 'blocked' | 'completed';
+  currentPhase: string;
+  summary?: string;
+  creator: string;
+  createTime: string;
+  updateTime: string;
+  column: 'unanalyzed' | 'analyzing' | 'completed';
+}
+
+const TaskList: React.FC<TaskListProps> = ({ onViewWorkspace, onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  const [tasks] = useState<Task[]>([
+    // 未分析列
+    {
+      id: '8',
+      name: '端午节品牌传播方案',
+      type: 'scene',
+      scene: '宣传策略生成',
+      status: 'draft',
+      currentPhase: '待配置',
+      summary: '针对端午节品牌活动制定完整传播策略方案',
+      creator: '李策划',
+      createTime: '2026-03-19 16:00',
+      updateTime: '2026-03-19 16:00',
+      column: 'unanalyzed',
+    },
+    {
+      id: '9',
+      name: '新品上市用户调研',
+      type: 'single',
+      agent: 'AudienceAgent',
+      status: 'pending',
+      currentPhase: '待启动',
+      summary: '对新品目标用户进行画像分析',
+      creator: '王运营',
+      createTime: '2026-03-19 14:30',
+      updateTime: '2026-03-19 15:00',
+      column: 'unanalyzed',
+    },
+    // 分析中列
+    {
+      id: '1',
+      name: '五四青年节宣传活动策略',
+      type: 'scene',
+      scene: '宣传策略生成',
+      status: 'running',
+      currentPhase: '行为分析',
+      summary: '正在按场景模板执行目标、受众、行为、叙事等分析...',
+      creator: '张策略',
+      createTime: '2026-03-19 10:30',
+      updateTime: '2026-03-19 15:45',
+      column: 'analyzing',
+    },
+    {
+      id: '7',
+      name: '品牌升级叙事方向研讨',
+      type: 'consultation',
+      participants: ['GoalAgent', 'NarrativeAgent', 'RiskAgent'],
+      status: 'running',
+      currentPhase: '第2轮讨论中',
+      summary: '围绕宣传方向、叙事方式和受众切入点开展多视角会商...',
+      creator: '王策划',
+      createTime: '2026-03-19 15:00',
+      updateTime: '2026-03-19 16:30',
+      column: 'analyzing',
+    },
+    {
+      id: '3',
+      name: '年度品牌升级方案推演',
+      type: 'scene',
+      scene: '宣传方案推演',
+      status: 'paused',
+      currentPhase: '叙事分析',
+      summary: '任务已暂停，等待人工介入确认叙事方向',
+      creator: '王策划',
+      createTime: '2026-03-17 14:00',
+      updateTime: '2026-03-19 11:30',
+      column: 'analyzing',
+    },
+    // 已完成列
+    {
+      id: '2',
+      name: '新产品发布会舆情应对预案',
+      type: 'scene',
+      scene: '舆情应对策略',
+      status: 'completed',
+      currentPhase: '已完成',
+      summary: '已完成舆情应对策略方案生成',
+      creator: '李分析师',
+      createTime: '2026-03-18 09:00',
+      updateTime: '2026-03-18 16:20',
+      column: 'completed',
+    },
+    {
+      id: '4',
+      name: '五四青年节受众快速分析',
+      type: 'single',
+      agent: 'AudienceAgent',
+      status: 'completed',
+      currentPhase: '已完成',
+      summary: '已完成目标受众识别、关切提炼和阻力分析',
+      creator: '赵运营',
+      createTime: '2026-03-19 09:00',
+      updateTime: '2026-03-19 09:15',
+      column: 'completed',
+    },
+    {
+      id: '6',
+      name: '五四青年节宣传策略会商',
+      type: 'consultation',
+      participants: ['GoalAgent', 'AudienceAgent', 'NarrativeAgent', 'RiskAgent'],
+      status: 'completed',
+      currentPhase: '已完成',
+      summary: '已完成多智能体会商，形成结论与分歧报告',
+      creator: '赵运营',
+      createTime: '2026-03-19 14:30',
+      updateTime: '2026-03-19 16:00',
+      column: 'completed',
+    },
+  ]);
+
+  const [activeTab, setActiveTab] = useState<'all' | 'unanalyzed' | 'analyzing' | 'completed'>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [modeFilter, setModeFilter] = useState<'all' | 'single' | 'scene' | 'consultation'>('all');
+
+  const getTypeConfig = (type: string) => {
+    if (isDark) {
+      switch (type) {
+        case 'single':
+          return { label: '单智能体', color: 'bg-cyan-500/20 text-cyan-400', icon: Bot };
+        case 'scene':
+          return { label: '场景执行', color: 'bg-purple-500/20 text-purple-400', icon: Workflow };
+        case 'consultation':
+          return { label: '多智能体会商', color: 'bg-orange-500/20 text-orange-400', icon: Users };
+        default:
+          return { label: '未知', color: 'bg-slate-500/20 text-slate-400', icon: Bot };
+      }
+    } else {
+      switch (type) {
+        case 'single':
+          return { label: '单智能体', color: 'bg-red-100 text-red-600', icon: Bot };
+        case 'scene':
+          return { label: '场景执行', color: 'bg-red-100 text-red-600', icon: Workflow };
+        case 'consultation':
+          return { label: '多智能体会商', color: 'bg-red-100 text-red-600', icon: Users };
+        default:
+          return { label: '未知', color: 'bg-gray-100 text-gray-600', icon: Bot };
+      }
+    }
+  };
+
+  const getStatusConfig = (status: string) => {
+    if (isDark) {
+      switch (status) {
+        case 'draft':
+          return { label: '草稿', color: 'bg-slate-500/20 text-slate-400' };
+        case 'pending':
+          return { label: '待启动', color: 'bg-slate-500/20 text-slate-400' };
+        case 'running':
+          return { label: '运行中', color: 'bg-blue-500/20 text-blue-400' };
+        case 'paused':
+          return { label: '已暂停', color: 'bg-yellow-500/20 text-yellow-400' };
+        case 'blocked':
+          return { label: '阻塞中', color: 'bg-red-500/20 text-red-400' };
+        case 'completed':
+          return { label: '已完成', color: 'bg-green-500/20 text-green-400' };
+        default:
+          return { label: '未知', color: 'bg-slate-500/20 text-slate-400' };
+      }
+    } else {
+      switch (status) {
+        case 'draft':
+          return { label: '草稿', color: 'bg-gray-100 text-gray-600' };
+        case 'pending':
+          return { label: '待启动', color: 'bg-gray-100 text-gray-600' };
+        case 'running':
+          return { label: '运行中', color: 'bg-red-100 text-red-600' };
+        case 'paused':
+          return { label: '已暂停', color: 'bg-yellow-100 text-yellow-600' };
+        case 'blocked':
+          return { label: '阻塞中', color: 'bg-red-100 text-red-600' };
+        case 'completed':
+          return { label: '已完成', color: 'bg-green-100 text-green-600' };
+        default:
+          return { label: '未知', color: 'bg-gray-100 text-gray-600' };
+      }
+    }
+  };
+
+  const filteredTasks = tasks.filter(task => {
+    const matchesTab = activeTab === 'all' || task.column === activeTab;
+    const matchesSearch = task.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                         task.id.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesMode = modeFilter === 'all' || task.type === modeFilter;
+    return matchesTab && matchesSearch && matchesMode;
+  });
+
+  const unanalyzedTasks = filteredTasks.filter(t => t.column === 'unanalyzed');
+  const analyzingTasks = filteredTasks.filter(t => t.column === 'analyzing');
+  const completedTasks = filteredTasks.filter(t => t.column === 'completed');
+
+  const totalCount = tasks.length;
+  const unanalyzedCount = tasks.filter(t => t.column === 'unanalyzed').length;
+  const analyzingCount = tasks.filter(t => t.column === 'analyzing').length;
+  const completedCount = tasks.filter(t => t.column === 'completed').length;
+
+  const handleTaskClick = (task: Task) => {
+    if (task.column === 'completed') {
+      if (task.type === 'consultation') {
+        onNavigate('task-consult-result');
+      } else {
+        onNavigate('strategy-result');
+      }
+    } else if (task.column === 'analyzing') {
+      if (task.type === 'scene') {
+        onNavigate('task-scene');
+      } else if (task.type === 'consultation') {
+        onNavigate('task-consult');
+      } else {
+        onNavigate('task-single');
+      }
+    } else {
+      // 未分析 - 进入创建/配置
+      onNavigate('task-create');
+    }
+  };
+
+  const TaskCard = ({ task }: { task: Task }) => {
+    const typeConfig = getTypeConfig(task.type);
+    const statusConfig = getStatusConfig(task.status);
+    const TypeIcon = typeConfig.icon;
+
+    return (
+      <div
+        className={`rounded-xl p-4 hover:border-red-400 transition-all duration-200 group cursor-pointer theme-card border ${
+          isDark
+            ? 'bg-slate-800/40 backdrop-blur-xl border-blue-800/30 hover:border-blue-500/50'
+            : 'bg-white border-red-100 hover:shadow-md shadow-red-100'
+        }`}
+        onClick={() => handleTaskClick(task)}
+      >
+        {/* 卡片头部：模式标签 + 状态标签 */}
+        <div className="flex items-center justify-between mb-3">
+          <span className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded text-xs font-medium ${typeConfig.color}`}>
+            <TypeIcon className="w-3 h-3" />
+            {typeConfig.label}
+          </span>
+          <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${statusConfig.color}`}>
+            {statusConfig.label}
+          </span>
+        </div>
+
+        {/* 任务名称 */}
+        <h3 className={`font-semibold text-sm mb-1 line-clamp-2 group-hover:text-red-500 transition-colors ${
+          isDark ? 'text-white' : 'text-gray-900'
+        }`}>
+          {task.name}
+        </h3>
+
+        {/* 任务编号 */}
+        <p className={`text-xs mb-2 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>TASK-{task.id.padStart(4, '0')}</p>
+
+        {/* 任务摘要 */}
+        <p className={`text-xs mb-3 line-clamp-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{task.summary}</p>
+
+        {/* 补充信息 */}
+        <div className="space-y-1.5 mb-3">
+          {task.type === 'single' && (
+            <div className="flex items-center gap-2 text-xs">
+              <Bot className={`w-3 h-3 ${isDark ? 'text-cyan-400' : 'text-red-500'}`} />
+              <span className={isDark ? 'text-slate-400' : 'text-gray-500'}>执行智能体：</span>
+              <span className={isDark ? 'text-cyan-400' : 'text-red-600'}>{task.agent}</span>
+            </div>
+          )}
+          {task.type === 'scene' && (
+            <div className="flex items-center gap-2 text-xs">
+              <Workflow className={`w-3 h-3 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
+              <span className={isDark ? 'text-slate-400' : 'text-gray-500'}>关联场景：</span>
+              <span className={isDark ? 'text-purple-400' : 'text-red-600'}>{task.scene}</span>
+            </div>
+          )}
+          {task.type === 'consultation' && (
+            <>
+              <div className="flex items-center gap-2 text-xs">
+                <Users className={`w-3 h-3 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
+                <span className={isDark ? 'text-slate-400' : 'text-gray-500'}>参与智能体：</span>
+                <span className={isDark ? 'text-orange-400' : 'text-red-600'}>{task.participants?.length || 0}个</span>
+              </div>
+              <div className="flex items-center gap-2 text-xs">
+                <Clock className={`w-3 h-3 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
+                <span className={isDark ? 'text-slate-400' : 'text-gray-500'}>当前轮次：</span>
+                <span className={isDark ? 'text-slate-300' : 'text-gray-700'}>{task.currentPhase}</span>
+              </div>
+            </>
+          )}
+          {task.column !== 'unanalyzed' && task.column !== 'completed' && (
+            <div className="flex items-center gap-2 text-xs">
+              <Target className={`w-3 h-3 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
+              <span className={isDark ? 'text-slate-400' : 'text-gray-500'}>当前阶段：</span>
+              <span className={isDark ? 'text-slate-300' : 'text-gray-700'}>{task.currentPhase}</span>
+            </div>
+          )}
+        </div>
+
+        {/* 时间信息 */}
+        <div className={`flex items-center justify-between text-xs pt-3 border-t ${
+          isDark
+            ? 'text-slate-500 border-blue-800/30'
+            : 'text-gray-400 border-red-100'
+        }`}>
+          <div className="flex items-center gap-1.5">
+            <User className="w-3 h-3" />
+            <span>{task.creator}</span>
+          </div>
+          <span>{task.column === 'completed' ? `完成于 ${task.updateTime}` : `更新于 ${task.updateTime}`}</span>
+        </div>
+
+        {/* 操作按钮区 */}
+        <div className={`flex items-center gap-2 mt-3 pt-3 border-t ${
+          isDark ? 'border-blue-800/30' : 'border-red-100'
+        }`}>
+          {task.column === 'unanalyzed' && (
+            <>
+              <button className={`flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-white rounded-lg text-xs font-medium transition-colors ${
+                isDark
+                  ? 'bg-blue-600 hover:bg-blue-500'
+                  : 'bg-red-600 hover:bg-red-500 shadow-md'
+              }`}>
+                <Play className="w-3 h-3" />
+                开始分析
+              </button>
+              <button className={`p-1.5 rounded-lg transition-colors ${
+                isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'
+              }`} title="编辑">
+                <Edit className={`w-4 h-4 ${isDark ? 'text-slate-400' : 'text-red-400'}`} />
+              </button>
+            </>
+          )}
+          {(task.column === 'analyzing') && (
+            <>
+              <button className={`flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-white rounded-lg text-xs font-medium transition-colors ${
+                isDark
+                  ? 'bg-blue-600 hover:bg-blue-500'
+                  : 'bg-red-600 hover:bg-red-500 shadow-md'
+              }`}>
+                <Play className="w-3 h-3" />
+                继续处理
+              </button>
+              <button className={`px-2 py-1.5 rounded-lg text-xs transition-colors ${
+                isDark
+                  ? 'hover:bg-slate-700/50 border border-blue-800/30 text-slate-300'
+                  : 'hover:bg-red-50 border border-red-200 text-red-600'
+              }`}>
+                查看进展
+              </button>
+            </>
+          )}
+          {task.column === 'completed' && (
+            <>
+              <button className={`flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-white rounded-lg text-xs font-medium transition-colors ${
+                isDark
+                  ? 'bg-green-600 hover:bg-green-500'
+                  : 'bg-green-600 hover:bg-green-500 shadow-md'
+              }`}>
+                <Eye className="w-3 h-3" />
+                查看结果
+              </button>
+              <button className={`px-2 py-1.5 rounded-lg text-xs transition-colors ${
+                isDark
+                  ? 'hover:bg-slate-700/50 border border-blue-800/30 text-slate-300'
+                  : 'hover:bg-red-50 border border-red-200 text-red-600'
+              }`}>
+                导出
+              </button>
+            </>
+          )}
+          <button className={`p-1.5 rounded-lg transition-colors ${
+            isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'
+          }`} title="更多">
+            <MoreHorizontal className={`w-4 h-4 ${isDark ? 'text-slate-400' : 'text-red-400'}`} />
+          </button>
+        </div>
+      </div>
+    );
+  };
+
+  const ColumnHeader = ({ title, count, color }: { title: string; count: number; color: string }) => (
+    <div className="flex items-center justify-between mb-4">
+      <div className="flex items-center gap-2">
+        <div className={`w-2 h-2 rounded-full ${color}`} />
+        <h2 className={`font-semibold text-sm ${isDark ? 'text-white' : 'text-gray-900'}`}>{title}</h2>
+        <span className={`px-2 py-0.5 rounded-full text-xs ${
+          isDark ? 'bg-slate-700/50 text-slate-400' : 'bg-red-50 text-red-500'
+        }`}>{count}</span>
+      </div>
+      <button className={`p-1 rounded transition-colors ${
+        isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'
+      }`}>
+        <ChevronRight className={`w-4 h-4 ${isDark ? 'text-slate-500' : 'text-red-400'}`} />
+      </button>
+    </div>
+  );
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* 顶部工具栏 */}
+      <div className={`rounded-xl p-4 flex-shrink-0 mb-4 theme-card border ${
+        isDark
+          ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30'
+          : 'bg-white border-red-100 shadow-sm'
+      }`}>
+        <div className="flex items-center justify-between mb-4">
+          <h1 className={`text-xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>任务中心</h1>
+          <button
+            onClick={() => onNavigate('task-create')}
+            className={`flex items-center gap-2 px-4 py-2 text-white rounded-lg text-sm font-medium transition-colors ${
+              isDark
+                ? 'bg-blue-600 hover:bg-blue-500'
+                : 'bg-red-600 hover:bg-red-500 shadow-md'
+            }`}
+          >
+            <Plus className="w-4 h-4" />
+            新建任务
+          </button>
+        </div>
+
+        {/* 搜索和筛选 */}
+        <div className="flex items-center gap-4">
+          <div className="relative flex-1 max-w-md">
+            <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${isDark ? 'text-slate-500' : 'text-red-400'}`} />
+            <input
+              type="text"
+              placeholder="搜索任务名称 / 任务编号 / 关键词"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className={`w-full pl-10 pr-4 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 transition-colors theme-transition ${
+                isDark
+                  ? 'bg-slate-900/50 border-blue-800/30 text-white placeholder-slate-500'
+                  : 'bg-white border-red-200 text-gray-900 placeholder-red-300'
+              }`}
+            />
+          </div>
+          <select
+            value={modeFilter}
+            onChange={(e) => setModeFilter(e.target.value as any)}
+            className={`px-4 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 cursor-pointer theme-transition ${
+              isDark
+                ? 'bg-slate-900/50 border-blue-800/30 text-slate-300'
+                : 'bg-white border-red-200 text-gray-700'
+            }`}
+          >
+            <option value="all">全部模式</option>
+            <option value="single">单智能体</option>
+            <option value="scene">场景执行</option>
+            <option value="consultation">多智能体会商</option>
+          </select>
+          <button className={`flex items-center gap-2 px-4 py-2 border rounded-lg text-sm transition-colors theme-transition ${
+            isDark
+              ? 'bg-slate-800/50 border-blue-800/30 text-slate-300 hover:bg-slate-700/50'
+              : 'bg-white border-red-200 text-gray-700 hover:bg-red-50'
+          }`}>
+            <Clock className="w-4 h-4" />
+            时间范围
+          </button>
+        </div>
+      </div>
+
+      {/* 统计概览栏 */}
+      <div className="grid grid-cols-4 gap-4 mb-4 flex-shrink-0">
+        <button
+          onClick={() => setActiveTab('all')}
+          className={`p-4 rounded-xl border transition-all duration-200 ${
+            activeTab === 'all'
+              ? isDark
+                ? 'bg-blue-600/20 border-blue-500/50'
+                : 'bg-red-50 border-red-300'
+              : isDark
+                ? 'bg-slate-800/30 border-blue-800/30 hover:border-blue-500/30'
+                : 'bg-white border-red-100 hover:border-red-300'
+          }`}
+        >
+          <p className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>{totalCount}</p>
+          <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>全部任务</p>
+        </button>
+        <button
+          onClick={() => setActiveTab('unanalyzed')}
+          className={`p-4 rounded-xl border transition-all duration-200 ${
+            activeTab === 'unanalyzed'
+              ? isDark
+                ? 'bg-yellow-500/20 border-yellow-500/50'
+                : 'bg-yellow-50 border-yellow-300'
+              : isDark
+                ? 'bg-slate-800/30 border-blue-800/30 hover:border-blue-500/30'
+                : 'bg-white border-red-100 hover:border-red-300'
+          }`}
+        >
+          <p className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>{unanalyzedCount}</p>
+          <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>未分析</p>
+        </button>
+        <button
+          onClick={() => setActiveTab('analyzing')}
+          className={`p-4 rounded-xl border transition-all duration-200 ${
+            activeTab === 'analyzing'
+              ? isDark
+                ? 'bg-blue-500/20 border-blue-500/50'
+                : 'bg-red-50 border-red-300'
+              : isDark
+                ? 'bg-slate-800/30 border-blue-800/30 hover:border-blue-500/30'
+                : 'bg-white border-red-100 hover:border-red-300'
+          }`}
+        >
+          <p className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>{analyzingCount}</p>
+          <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>分析中</p>
+        </button>
+        <button
+          onClick={() => setActiveTab('completed')}
+          className={`p-4 rounded-xl border transition-all duration-200 ${
+            activeTab === 'completed'
+              ? isDark
+                ? 'bg-green-500/20 border-green-500/50'
+                : 'bg-green-50 border-green-300'
+              : isDark
+                ? 'bg-slate-800/30 border-blue-800/30 hover:border-blue-500/30'
+                : 'bg-white border-red-100 hover:border-red-300'
+          }`}
+        >
+          <p className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>{completedCount}</p>
+          <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>已完成</p>
+        </button>
+      </div>
+
+      {/* 看板区 */}
+      <div className="flex-1 grid grid-cols-3 gap-4 min-h-0 overflow-hidden">
+        {/* 未分析列 */}
+        <div className="flex flex-col min-h-0">
+          <ColumnHeader title="未分析" count={unanalyzedTasks.length} color={isDark ? 'bg-yellow-400' : 'bg-yellow-400'} />
+          <div className="flex-1 overflow-y-auto space-y-3 pr-1 scrollbar-thin">
+            {unanalyzedTasks.length === 0 ? (
+              <div className={`flex flex-col items-center justify-center py-8 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                <FileText className="w-8 h-8 mb-2 opacity-50" />
+                <p className="text-sm">暂无待分析任务</p>
+              </div>
+            ) : (
+              unanalyzedTasks.map(task => <TaskCard key={task.id} task={task} />)
+            )}
+          </div>
+        </div>
+
+        {/* 分析中列 */}
+        <div className="flex flex-col min-h-0">
+          <ColumnHeader title="分析中" count={analyzingTasks.length} color={isDark ? 'bg-blue-400' : 'bg-red-400'} />
+          <div className="flex-1 overflow-y-auto space-y-3 pr-1 scrollbar-thin">
+            {analyzingTasks.length === 0 ? (
+              <div className={`flex flex-col items-center justify-center py-8 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                <Clock className="w-8 h-8 mb-2 opacity-50" />
+                <p className="text-sm">暂无分析中任务</p>
+              </div>
+            ) : (
+              analyzingTasks.map(task => <TaskCard key={task.id} task={task} />)
+            )}
+          </div>
+        </div>
+
+        {/* 已完成列 */}
+        <div className="flex flex-col min-h-0">
+          <ColumnHeader title="已完成" count={completedTasks.length} color={isDark ? 'bg-green-400' : 'bg-green-400'} />
+          <div className="flex-1 overflow-y-auto space-y-3 pr-1 scrollbar-thin">
+            {completedTasks.length === 0 ? (
+              <div className={`flex flex-col items-center justify-center py-8 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                <Target className="w-8 h-8 mb-2 opacity-50" />
+                <p className="text-sm">暂无已完成任务</p>
+              </div>
+            ) : (
+              completedTasks.map(task => <TaskCard key={task.id} task={task} />)
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TaskList;
diff --git a/web-code/components/taskManagement/TaskListPage.tsx b/web-code/components/taskManagement/TaskListPage.tsx
new file mode 100644
index 00000000..c474847b
--- /dev/null
+++ b/web-code/components/taskManagement/TaskListPage.tsx
@@ -0,0 +1,714 @@
+import React, { useState } from 'react';
+import {
+  Plus,
+  Search,
+  Eye,
+  Play,
+  Pause,
+  Clock,
+  User,
+  ChevronRight,
+  Filter,
+  FileText,
+  AlertTriangle,
+  CheckCircle,
+  XCircle,
+  MoreHorizontal,
+  Edit,
+  Download,
+  Bot,
+  Users,
+  Workflow,
+  X,
+  ArrowRight,
+  Target,
+  Layers,
+} from 'lucide-react';
+import { useTheme } from '@/contexts/ThemeContext';
+import { PageType } from '@/components/Sidebar';
+
+interface TaskListPageProps {
+  title: string;
+  category: string;
+  subCategory: string;
+  onNavigate: (page: PageType) => void;
+}
+
+type TaskType = 'single' | 'consultation' | 'scene' | 'multi-agent';
+type TaskStatus = 'draft' | 'pending' | 'running' | 'paused' | 'blocked' | 'completed';
+type ColumnType = 'unanalyzed' | 'analyzing' | 'completed';
+
+interface Task {
+  id: string;
+  name: string;
+  type: TaskType;
+  status: TaskStatus;
+  agent?: string;
+  scene?: string;
+  participants?: string[];
+  currentPhase?: string;
+  currentRound?: number;
+  summary?: string;
+  creator: string;
+  createTime: string;
+  updateTime: string;
+  column: ColumnType;
+}
+
+const TaskListPage: React.FC<TaskListPageProps> = ({ title, category, subCategory, onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 主题颜色变量
+  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
+  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-100';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const textMuted = isDark ? 'text-slate-500' : 'text-gray-400';
+  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-white';
+
+  // 生成模拟数据
+  const [tasks] = useState<Task[]>([
+    // 未分析列
+    {
+      id: '2026-0320-001',
+      name: '端午节品牌传播方案',
+      type: 'scene',
+      scene: '宣传策略生成',
+      status: 'draft',
+      column: 'unanalyzed',
+      summary: '针对端午节品牌活动制定完整传播策略方案',
+      creator: '李策划',
+      createTime: '2026-03-20 10:00',
+      updateTime: '2026-03-20 10:00',
+    },
+    {
+      id: '2026-0320-002',
+      name: '新品上市用户调研',
+      type: 'single',
+      agent: 'AudienceAgent',
+      status: 'pending',
+      column: 'unanalyzed',
+      summary: '对新品目标用户进行画像分析',
+      creator: '王运营',
+      createTime: '2026-03-20 09:30',
+      updateTime: '2026-03-20 09:30',
+    },
+    // 分析中列
+    {
+      id: '2026-0319-001',
+      name: '五四青年节宣传活动策略',
+      type: 'scene',
+      scene: '宣传策略生成',
+      status: 'running',
+      currentPhase: '行为分析',
+      column: 'analyzing',
+      summary: '正在按场景模板执行目标、受众、行为、叙事等分析...',
+      creator: '张策略',
+      createTime: '2026-03-19 10:30',
+      updateTime: '2026-03-20 09:45',
+    },
+    {
+      id: '2026-0319-002',
+      name: '青年传播方向会商分析',
+      type: 'consultation',
+      participants: ['GoalAgent', 'AudienceAgent', 'NarrativeAgent'],
+      status: 'running',
+      currentRound: 2,
+      column: 'analyzing',
+      summary: '围绕宣传方向、叙事方式和受众切入点开展多视角会商...',
+      creator: '王策划',
+      createTime: '2026-03-19 14:00',
+      updateTime: '2026-03-20 09:00',
+    },
+    {
+      id: '2026-0318-001',
+      name: '年度品牌升级方案推演',
+      type: 'scene',
+      scene: '宣传方案推演',
+      status: 'paused',
+      currentPhase: '叙事分析',
+      column: 'analyzing',
+      summary: '任务已暂停，等待人工介入确认叙事方向',
+      creator: '王策划',
+      createTime: '2026-03-18 14:00',
+      updateTime: '2026-03-20 08:30',
+    },
+    // 已完成列
+    {
+      id: '2026-0318-002',
+      name: '核心受众画像分析',
+      type: 'single',
+      agent: 'AudienceAgent',
+      status: 'completed',
+      column: 'completed',
+      summary: '已完成目标受众识别、关切提炼和阻力分析',
+      creator: '赵运营',
+      createTime: '2026-03-18 09:00',
+      updateTime: '2026-03-18 16:30',
+    },
+    {
+      id: '2026-0319-003',
+      name: '五四青年节宣传策略',
+      type: 'scene',
+      scene: '宣传策略生成',
+      status: 'completed',
+      column: 'completed',
+      summary: '已完成宣传策略方案生成',
+      creator: '张策略',
+      createTime: '2026-03-19 10:00',
+      updateTime: '2026-03-19 18:00',
+    },
+    {
+      id: '2026-0319-004',
+      name: '青年品牌传播路径会商',
+      type: 'consultation',
+      participants: ['GoalAgent', 'NarrativeAgent', 'RiskAgent'],
+      status: 'completed',
+      column: 'completed',
+      summary: '已完成多智能体会商，形成结论与分歧报告',
+      creator: '王策划',
+      createTime: '2026-03-19 14:30',
+      updateTime: '2026-03-19 17:00',
+    },
+  ]);
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [modeFilter, setModeFilter] = useState<string>('all');
+  const [showAnalysisModal, setShowAnalysisModal] = useState(false);
+  const [selectedTaskForAnalysis, setSelectedTaskForAnalysis] = useState<Task | null>(null);
+
+  // 获取任务类型配置
+  const getTypeConfig = (type: TaskType) => {
+    if (isDark) {
+      switch (type) {
+        case 'single':
+          return { label: '单智能体', color: 'bg-cyan-500/20 text-cyan-400', icon: Bot };
+        case 'scene':
+          return { label: '场景执行', color: 'bg-purple-500/20 text-purple-400', icon: Workflow };
+        case 'consultation':
+          return { label: '多智能体会商', color: 'bg-orange-500/20 text-orange-400', icon: Users };
+        case 'multi-agent':
+          return { label: '多智能体协同', color: 'bg-green-500/20 text-green-400', icon: Layers };
+      }
+    } else {
+      switch (type) {
+        case 'single':
+          return { label: '单智能体', color: 'bg-blue-100 text-blue-600', icon: Bot };
+        case 'scene':
+          return { label: '场景执行', color: 'bg-purple-100 text-purple-600', icon: Workflow };
+        case 'consultation':
+          return { label: '多智能体会商', color: 'bg-orange-100 text-orange-600', icon: Users };
+        case 'multi-agent':
+          return { label: '多智能体协同', color: 'bg-green-100 text-green-600', icon: Layers };
+      }
+    }
+  };
+
+  // 获取状态配置
+  const getStatusConfig = (status: TaskStatus, column: ColumnType) => {
+    if (column === 'unanalyzed') {
+      switch (status) {
+        case 'draft':
+          return { label: '草稿', color: isDark ? 'bg-slate-500/20 text-slate-400' : 'bg-gray-100 text-gray-600' };
+        case 'pending':
+          return { label: '待启动', color: isDark ? 'bg-slate-500/20 text-slate-400' : 'bg-gray-100 text-gray-600' };
+        default:
+          return { label: '待配置', color: isDark ? 'bg-yellow-500/20 text-yellow-400' : 'bg-yellow-100 text-yellow-600' };
+      }
+    } else if (column === 'analyzing') {
+      switch (status) {
+        case 'running':
+          return { label: '运行中', color: isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-red-100 text-red-600' };
+        case 'paused':
+          return { label: '已暂停', color: isDark ? 'bg-yellow-500/20 text-yellow-400' : 'bg-yellow-100 text-yellow-600' };
+        case 'blocked':
+          return { label: '阻塞中', color: isDark ? 'bg-red-500/20 text-red-400' : 'bg-orange-100 text-orange-600' };
+        default:
+          return { label: '待处理', color: isDark ? 'bg-purple-500/20 text-purple-400' : 'bg-purple-100 text-purple-600' };
+      }
+    } else {
+      return { label: '已完成', color: isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-600' };
+    }
+  };
+
+  // 筛选任务
+  const filteredTasks = tasks.filter(task => {
+    const matchesSearch = task.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                         task.id.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesMode = modeFilter === 'all' || task.type === modeFilter;
+    return matchesSearch && matchesMode;
+  });
+
+  const unanalyzedTasks = filteredTasks.filter(t => t.column === 'unanalyzed');
+  const analyzingTasks = filteredTasks.filter(t => t.column === 'analyzing');
+  const completedTasks = filteredTasks.filter(t => t.column === 'completed');
+
+  // 统计数据
+  const stats = {
+    total: tasks.length,
+    unanalyzed: unanalyzedTasks.length,
+    analyzing: analyzingTasks.length,
+    completed: completedTasks.length,
+  };
+
+  // 处理开始分析按钮点击
+  const handleStartAnalysis = (task: Task) => {
+    setSelectedTaskForAnalysis(task);
+    setShowAnalysisModal(true);
+  };
+
+  // 处理分析模式选择
+  const handleSelectAnalysisMode = (mode: TaskType) => {
+    setShowAnalysisModal(false);
+    if (mode === 'single') {
+      onNavigate('task-single');
+    } else if (mode === 'scene') {
+      onNavigate('task-scene');
+    } else if (mode === 'consultation') {
+      onNavigate('task-consult-create');
+    } else if (mode === 'multi-agent') {
+      onNavigate('multi-agent-qa');
+    }
+  };
+
+  // 处理卡片点击
+  const handleTaskClick = (task: Task) => {
+    if (task.column === 'completed') {
+      if (task.type === 'consultation') {
+        onNavigate('task-consult-result');
+      } else {
+        onNavigate('strategy-result');
+      }
+    } else if (task.column === 'analyzing') {
+      if (task.type === 'scene') {
+        onNavigate('task-scene');
+      } else if (task.type === 'consultation') {
+        onNavigate('task-consult');
+      } else {
+        onNavigate('task-single');
+      }
+    }
+  };
+
+  // 渲染任务卡片
+  const TaskCard = ({ task }: { task: Task }) => {
+    const typeConfig = getTypeConfig(task.type);
+    const statusConfig = getStatusConfig(task.status, task.column);
+    const TypeIcon = typeConfig.icon;
+
+    return (
+      <div
+        className={`rounded-xl p-4 hover:shadow-md transition-all duration-200 cursor-pointer group theme-card border ${
+          isDark
+            ? 'bg-slate-800/40 backdrop-blur-xl border-blue-800/30 hover:border-blue-500/50'
+            : 'bg-white border-red-100 hover:shadow-md shadow-red-100'
+        }`}
+        onClick={() => handleTaskClick(task)}
+      >
+        {/* 卡片头部：模式标签 + 状态标签 */}
+        <div className="flex items-center justify-between mb-2">
+          <span className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded text-xs font-medium ${typeConfig.color}`}>
+            <TypeIcon className="w-3 h-3" />
+            {typeConfig.label}
+          </span>
+          <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${statusConfig.color}`}>
+            {statusConfig.label}
+          </span>
+        </div>
+
+        {/* 任务名称 */}
+        <h3 className={`font-semibold text-sm mb-1 line-clamp-2 group-hover:text-red-500 transition-colors ${textPrimary}`}>
+          {task.name}
+        </h3>
+
+        {/* 任务编号 */}
+        <p className={`text-xs mb-2 ${textMuted}`}>TASK-{task.id}</p>
+
+        {/* 任务摘要 */}
+        <p className={`text-xs mb-3 line-clamp-2 ${textSecondary}`}>{task.summary}</p>
+
+        {/* 补充信息区 */}
+        <div className="space-y-1 mb-3">
+          {task.type === 'single' && task.agent && (
+            <div className="flex items-center gap-2 text-xs">
+              <Bot className={`w-3 h-3 ${isDark ? 'text-cyan-400' : 'text-red-500'}`} />
+              <span className={textSecondary}>执行智能体：</span>
+              <span className={isDark ? 'text-cyan-400' : 'text-red-600'}>{task.agent}</span>
+            </div>
+          )}
+          {task.type === 'scene' && task.scene && (
+            <div className="flex items-center gap-2 text-xs">
+              <Workflow className={`w-3 h-3 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
+              <span className={textSecondary}>关联场景：</span>
+              <span className={isDark ? 'text-purple-400' : 'text-red-600'}>{task.scene}</span>
+            </div>
+          )}
+          {task.type === 'consultation' && (
+            <>
+              <div className="flex items-center gap-2 text-xs">
+                <Users className={`w-3 h-3 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
+                <span className={textSecondary}>参与智能体：</span>
+                <span className={isDark ? 'text-orange-400' : 'text-red-600'}>{task.participants?.length || 0}个</span>
+              </div>
+              {task.currentRound && (
+                <div className="flex items-center gap-2 text-xs">
+                  <Clock className={`w-3 h-3 ${textMuted}`} />
+                  <span className={textSecondary}>当前轮次：</span>
+                  <span className={textPrimary}>第{task.currentRound}轮</span>
+                </div>
+              )}
+            </>
+          )}
+          {task.column === 'analyzing' && task.currentPhase && (
+            <div className="flex items-center gap-2 text-xs">
+              <Target className={`w-3 h-3 ${textMuted}`} />
+              <span className={textSecondary}>当前阶段：</span>
+              <span className={textPrimary}>{task.currentPhase}</span>
+            </div>
+          )}
+        </div>
+
+        {/* 时间信息 */}
+        <div className={`flex items-center justify-between text-xs pt-3 border-t ${
+          isDark ? 'border-blue-800/30 text-slate-500' : 'border-red-100 text-gray-400'
+        }`}>
+          <div className="flex items-center gap-1.5">
+            <User className="w-3 h-3" />
+            <span>{task.creator}</span>
+          </div>
+          <span>{task.column === 'completed' ? `完成于 ${task.updateTime}` : `更新于 ${task.updateTime}`}</span>
+        </div>
+
+        {/* 操作按钮区 */}
+        <div className={`flex items-center gap-2 mt-3 pt-3 border-t ${
+          isDark ? 'border-blue-800/30' : 'border-red-100'
+        }`}>
+          {task.column === 'unanalyzed' && (
+            <>
+              <button
+                onClick={(e) => { e.stopPropagation(); handleStartAnalysis(task); }}
+                className={`flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-white rounded-lg text-xs font-medium transition-colors ${
+                  isDark
+                    ? 'bg-blue-600 hover:bg-blue-500'
+                    : 'bg-red-600 hover:bg-red-500 shadow-md'
+                }`}
+              >
+                <Play className="w-3 h-3" />
+                开始分析
+              </button>
+              <button
+                onClick={(e) => { e.stopPropagation(); onNavigate('task-create'); }}
+                className={`p-1.5 rounded-lg transition-colors ${
+                  isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'
+                }`}
+                title="编辑"
+              >
+                <Edit className={`w-4 h-4 ${isDark ? 'text-slate-400' : 'text-red-400'}`} />
+              </button>
+            </>
+          )}
+          {task.column === 'analyzing' && (
+            <>
+              <button
+                onClick={(e) => { e.stopPropagation(); handleTaskClick(task); }}
+                className={`flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-white rounded-lg text-xs font-medium transition-colors ${
+                  isDark
+                    ? 'bg-blue-600 hover:bg-blue-500'
+                    : 'bg-red-600 hover:bg-red-500 shadow-md'
+                }`}
+              >
+                <Play className="w-3 h-3" />
+                继续处理
+              </button>
+              <button
+                onClick={(e) => { e.stopPropagation(); handleTaskClick(task); }}
+                className={`px-2 py-1.5 rounded-lg text-xs transition-colors ${
+                  isDark
+                    ? 'hover:bg-slate-700/50 border border-blue-800/30 text-slate-300'
+                    : 'hover:bg-red-50 border border-red-200 text-red-600'
+                }`}
+              >
+                查看进展
+              </button>
+            </>
+          )}
+          {task.column === 'completed' && (
+            <>
+              <button
+                onClick={(e) => { e.stopPropagation(); handleTaskClick(task); }}
+                className={`flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-white rounded-lg text-xs font-medium transition-colors ${
+                  isDark
+                    ? 'bg-green-600 hover:bg-green-500'
+                    : 'bg-green-600 hover:bg-green-500 shadow-md'
+                }`}
+              >
+                <Eye className="w-3 h-3" />
+                查看结果
+              </button>
+              <button className={`px-2 py-1.5 rounded-lg text-xs transition-colors ${
+                isDark
+                  ? 'hover:bg-slate-700/50 border border-blue-800/30 text-slate-300'
+                  : 'hover:bg-red-50 border border-red-200 text-red-600'
+              }`}>
+                <Download className="w-4 h-4" />
+              </button>
+            </>
+          )}
+          <button className={`p-1.5 rounded-lg transition-colors ${
+            isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'
+          }`} title="更多">
+            <MoreHorizontal className={`w-4 h-4 ${isDark ? 'text-slate-400' : 'text-red-400'}`} />
+          </button>
+        </div>
+      </div>
+    );
+  };
+
+  // 渲染看板列
+  const KanbanColumn = ({ title, count, color, tasks }: { title: string; count: number; color: string; tasks: Task[] }) => (
+    <div className="flex flex-col min-h-0 flex-1">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <div className={`w-2 h-2 rounded-full ${color}`} />
+          <h2 className={`font-semibold text-sm ${textPrimary}`}>{title}</h2>
+          <span className={`px-2 py-0.5 rounded-full text-xs ${
+            isDark ? 'bg-slate-700/50 text-slate-400' : 'bg-red-50 text-red-500'
+          }`}>{count}</span>
+        </div>
+        <button className={`p-1 rounded transition-colors ${
+          isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'
+        }`}>
+          <ChevronRight className={`w-4 h-4 ${textMuted}`} />
+        </button>
+      </div>
+      <div className="flex-1 overflow-y-auto space-y-3 pr-1 scrollbar-thin">
+        {tasks.length === 0 ? (
+          <div className={`flex flex-col items-center justify-center py-8 ${textMuted}`}>
+            <FileText className="w-8 h-8 mb-2 opacity-50" />
+            <p className="text-sm">暂无任务</p>
+          </div>
+        ) : (
+          tasks.map(task => <TaskCard key={task.id} task={task} />)
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* 顶部工具栏 */}
+      <div className={`rounded-xl p-4 flex-shrink-0 mb-4 ${cardBg} border ${cardBorder}`}>
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <div className="flex items-center gap-2 mb-1">
+              <span className={`px-2 py-0.5 rounded text-xs ${isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-red-100 text-red-600'}`}>
+                {category}
+              </span>
+              <span className={`text-xs ${textMuted}`}>/</span>
+              <span className={`px-2 py-0.5 rounded text-xs ${isDark ? 'bg-cyan-500/20 text-cyan-400' : 'bg-red-100 text-red-600'}`}>
+                {subCategory}
+              </span>
+            </div>
+            <h1 className={`text-xl font-bold ${textPrimary}`}>任务中心</h1>
+          </div>
+          <button
+            onClick={() => onNavigate('task-create')}
+            className={`flex items-center gap-2 px-4 py-2 text-white rounded-lg text-sm font-medium transition-colors ${
+              isDark
+                ? 'bg-blue-600 hover:bg-blue-500'
+                : 'bg-red-600 hover:bg-red-500 shadow-md'
+            }`}
+          >
+            <Plus className="w-4 h-4" />
+            新建任务
+          </button>
+        </div>
+
+        {/* 搜索和筛选 */}
+        <div className="flex items-center gap-4">
+          <div className="relative flex-1 max-w-md">
+            <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${textMuted}`} />
+            <input
+              type="text"
+              placeholder="搜索任务名称 / 任务编号 / 关键词"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className={`w-full pl-10 pr-4 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 transition-colors ${inputBg} ${cardBorder} ${textPrimary} placeholder:${textMuted}`}
+            />
+          </div>
+          <select
+            value={modeFilter}
+            onChange={(e) => setModeFilter(e.target.value)}
+            className={`px-4 py-2 border rounded-lg text-sm focus:outline-none cursor-pointer ${inputBg} ${cardBorder} ${textSecondary}`}
+          >
+            <option value="all">全部模式</option>
+            <option value="single">单智能体</option>
+            <option value="multi-agent">多智能体协同</option>
+            <option value="consultation">多智能体会商</option>
+            <option value="scene">场景执行</option>
+          </select>
+          <button className={`flex items-center gap-2 px-4 py-2 border rounded-lg text-sm transition-colors ${inputBg} ${cardBorder} ${textSecondary}`}>
+            <Clock className="w-4 h-4" />
+            时间范围
+          </button>
+        </div>
+      </div>
+
+      {/* 统计概览栏 */}
+      <div className="grid grid-cols-4 gap-4 mb-4 flex-shrink-0">
+        <button
+          onClick={() => { setModeFilter('all'); }}
+          className={`p-4 rounded-xl border transition-all ${cardBg} ${cardBorder} hover:border-red-400`}
+        >
+          <p className={`text-2xl font-bold ${textPrimary}`}>{stats.total}</p>
+          <p className={`text-sm ${textSecondary}`}>全部任务</p>
+        </button>
+        <button
+          className={`p-4 rounded-xl border transition-all ${cardBg} ${cardBorder} hover:border-red-400`}
+        >
+          <p className={`text-2xl font-bold ${textPrimary}`}>{stats.unanalyzed}</p>
+          <p className={`text-sm ${textSecondary}`}>未分析</p>
+        </button>
+        <button
+          className={`p-4 rounded-xl border transition-all ${cardBg} ${cardBorder} hover:border-red-400`}
+        >
+          <p className={`text-2xl font-bold ${isDark ? 'text-blue-400' : 'text-red-600'}`}>{stats.analyzing}</p>
+          <p className={`text-sm ${textSecondary}`}>分析中</p>
+        </button>
+        <button
+          className={`p-4 rounded-xl border transition-all ${cardBg} ${cardBorder} hover:border-red-400`}
+        >
+          <p className={`text-2xl font-bold ${isDark ? 'text-green-400' : 'text-green-600'}`}>{stats.completed}</p>
+          <p className={`text-sm ${textSecondary}`}>已完成</p>
+        </button>
+      </div>
+
+      {/* 看板区 */}
+      <div className="flex-1 grid grid-cols-3 gap-4 min-h-0 overflow-hidden">
+        <KanbanColumn title="未分析" count={unanalyzedTasks.length} color={isDark ? 'bg-yellow-400' : 'bg-yellow-400'} tasks={unanalyzedTasks} />
+        <KanbanColumn title="分析中" count={analyzingTasks.length} color={isDark ? 'bg-blue-400' : 'bg-red-400'} tasks={analyzingTasks} />
+        <KanbanColumn title="已完成" count={completedTasks.length} color={isDark ? 'bg-green-400' : 'bg-green-400'} tasks={completedTasks} />
+      </div>
+
+      {/* 选择分析模式弹窗 */}
+      {showAnalysisModal && selectedTaskForAnalysis && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={() => setShowAnalysisModal(false)}>
+          <div
+            className={`w-full max-w-lg rounded-2xl p-6 ${cardBg} border ${cardBorder} shadow-xl`}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between mb-6">
+              <div>
+                <h2 className={`text-xl font-bold ${textPrimary}`}>选择分析模式</h2>
+                <p className={`text-sm ${textMuted} mt-1`}>为任务「{selectedTaskForAnalysis.name}」选择分析方式</p>
+              </div>
+              <button
+                onClick={() => setShowAnalysisModal(false)}
+                className={`p-2 rounded-lg hover:bg-slate-700/50 ${textSecondary}`}
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            <div className="space-y-3">
+              {/* 单智能体分析 */}
+              <button
+                onClick={() => handleSelectAnalysisMode('single')}
+                className={`w-full p-4 rounded-xl border transition-all duration-200 text-left hover:shadow-md ${
+                  isDark
+                    ? 'bg-slate-700/50 border-blue-800/30 hover:border-cyan-500/50'
+                    : 'bg-white border-red-100 hover:border-red-300 hover:shadow-md'
+                }`}
+              >
+                <div className="flex items-center gap-4">
+                  <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
+                    isDark ? 'bg-cyan-500/20' : 'bg-red-100'
+                  }`}>
+                    <Bot className={`w-6 h-6 ${isDark ? 'text-cyan-400' : 'text-red-500'}`} />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className={`font-semibold ${textPrimary}`}>单智能体分析</h3>
+                    <p className={`text-sm ${textSecondary}`}>选择一个AI智能体完成单一维度的专项分析</p>
+                  </div>
+                  <ArrowRight className={`w-5 h-5 ${textMuted}`} />
+                </div>
+              </button>
+
+              {/* 多智能体协同分析 */}
+              <button
+                onClick={() => handleSelectAnalysisMode('multi-agent')}
+                className={`w-full p-4 rounded-xl border transition-all duration-200 text-left hover:shadow-md ${
+                  isDark
+                    ? 'bg-slate-700/50 border-blue-800/30 hover:border-green-500/50'
+                    : 'bg-white border-red-100 hover:border-red-300 hover:shadow-md'
+                }`}
+              >
+                <div className="flex items-center gap-4">
+                  <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
+                    isDark ? 'bg-green-500/20' : 'bg-green-100'
+                  }`}>
+                    <Layers className={`w-6 h-6 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className={`font-semibold ${textPrimary}`}>多智能体协同分析</h3>
+                    <p className={`text-sm ${textSecondary}`}>多个AI智能体并行分析，输出各自的判断和结论</p>
+                  </div>
+                  <ArrowRight className={`w-5 h-5 ${textMuted}`} />
+                </div>
+              </button>
+
+              {/* 多智能体会商 */}
+              <button
+                onClick={() => handleSelectAnalysisMode('consultation')}
+                className={`w-full p-4 rounded-xl border transition-all duration-200 text-left hover:shadow-md ${
+                  isDark
+                    ? 'bg-slate-700/50 border-blue-800/30 hover:border-orange-500/50'
+                    : 'bg-white border-red-100 hover:border-red-300 hover:shadow-md'
+                }`}
+              >
+                <div className="flex items-center gap-4">
+                  <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
+                    isDark ? 'bg-orange-500/20' : 'bg-red-100'
+                  }`}>
+                    <Users className={`w-6 h-6 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className={`font-semibold ${textPrimary}`}>多智能体会商</h3>
+                    <p className={`text-sm ${textSecondary}`}>多个AI智能体从不同视角开展讨论并形成共识</p>
+                  </div>
+                  <ArrowRight className={`w-5 h-5 ${textMuted}`} />
+                </div>
+              </button>
+
+              {/* 场景执行 */}
+              <button
+                onClick={() => handleSelectAnalysisMode('scene')}
+                className={`w-full p-4 rounded-xl border transition-all duration-200 text-left hover:shadow-md ${
+                  isDark
+                    ? 'bg-slate-700/50 border-blue-800/30 hover:border-purple-500/50'
+                    : 'bg-white border-red-100 hover:border-red-300 hover:shadow-md'
+                }`}
+              >
+                <div className="flex items-center gap-4">
+                  <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
+                    isDark ? 'bg-purple-500/20' : 'bg-red-100'
+                  }`}>
+                    <Workflow className={`w-6 h-6 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className={`font-semibold ${textPrimary}`}>场景执行</h3>
+                    <p className={`text-sm ${textSecondary}`}>按照预设场景模板自动执行多阶段策略分析</p>
+                  </div>
+                  <ArrowRight className={`w-5 h-5 ${textMuted}`} />
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TaskListPage;
diff --git a/web-code/components/taskManagement/TaskPgFrom.tsx b/web-code/components/taskManagement/TaskPgFrom.tsx
new file mode 100644
index 00000000..11fb334e
--- /dev/null
+++ b/web-code/components/taskManagement/TaskPgFrom.tsx
@@ -0,0 +1,26 @@
+import { Outlet, useNavigate } from 'react-router-dom';
+import React, { useState, useEffect, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import { requestCrudService } from '@/service/request-axios-service';
+const service = requestCrudService;
+const userInfo = localStorage.getItem('userInfo');
+const pgLinkUrl = import.meta.env.VITE_AIPI_PGLINKTO_URL;
+interface TaskPgFromProps {
+  gopath: string
+}
+const TaskPgFrom: React.FC<TaskPgFromProps> = ({gopath}) => {
+const [pgUrl, setPgUrl] = useState(pgLinkUrl);
+  useEffect(() => {
+    if(userInfo) {
+      const userData = JSON.parse(userInfo);
+      setPgUrl(`${pgUrl}?access_token=${userData.accessToken}&goPath=${gopath}`);
+    }
+  }, [gopath]);
+  return (
+    <div className="h-full flex flex-col">
+      <iframe className="h-[calc(100vh-92px)]" src={pgUrl}></iframe>
+    </div>
+  );
+}
+export default TaskPgFrom
diff --git a/web-code/components/taskManagement/TaskSingle.tsx b/web-code/components/taskManagement/TaskSingle.tsx
new file mode 100644
index 00000000..99f12c1d
--- /dev/null
+++ b/web-code/components/taskManagement/TaskSingle.tsx
@@ -0,0 +1,715 @@
+import React, { useState } from 'react';
+import {
+  ArrowLeft,
+  Bot,
+  CheckCircle,
+  Clock,
+  User,
+  Download,
+  FileText,
+  Send,
+  Zap,
+  Sparkles,
+  Lightbulb,
+  Copy,
+  Edit3,
+  ChevronDown,
+  ChevronRight,
+  Database,
+  Brain,
+  MessageSquare,
+  ExternalLink,
+  BookOpen,
+  Info,
+  Eye,
+} from 'lucide-react';
+import { useTheme } from '@/contexts/ThemeContext';
+import { PageType } from '@/components/Sidebar';
+
+interface TaskSingleProps {
+  onNavigate: (page: PageType) => void;
+}
+
+interface ChatMessage {
+  id: string;
+  role: 'user' | 'agent';
+  content: string;
+  timestamp: string;
+  citations?: { title: string; source: string; page?: number }[];
+}
+
+const TaskSingle: React.FC<TaskSingleProps> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  const [taskStatus, setTaskStatus] = useState<'pending' | 'running' | 'completed'>('completed');
+  const [input, setInput] = useState('请分析五四青年节宣传活动的目标受众');
+  const [isRunning, setIsRunning] = useState(false);
+  const [showCitations, setShowCitations] = useState<string | null>(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedContent, setEditedContent] = useState('');
+
+  const [messages, setMessages] = useState<ChatMessage[]>([
+    {
+      id: '1',
+      role: 'user',
+      content: '请分析五四青年节宣传活动的目标受众',
+      timestamp: '14:00',
+    },
+    {
+      id: '2',
+      role: 'agent',
+      content: `根据您的任务要求，我对五四青年节宣传活动的目标受众进行了全面分析，以下是详细报告：
+
+## 一、核心受众画像
+
+**基本信息**
+- 年龄段：18-25岁
+- 身份定位：基层青年（学生、职场新人）
+- 地域分布：一二线城市为主
+
+**用户特征**
+- 社交媒体重度用户，日均使用时长超过3小时
+- 短视频内容消费主力，偏好竖屏内容
+- 注重"真实感"和"态度感"，反感过度营销
+- 追求个性化表达和群体认同
+
+## 二、行为洞察
+
+**媒体习惯**
+- 主要平台：抖音、小红书、微博、B站
+- 内容偏好：真实故事、情感共鸣、实用价值
+- 互动方式：点赞、评论、转发、UGC创作
+
+**决策因素**
+- 社交认同 > 品牌声誉 > 产品功能
+- 性价比 > 品牌溢价
+- 真实体验 > 官方宣传
+
+## 三、核心需求
+
+1. **归属感需求** - 希望被看见、被认可，参与活动获得身份认同
+2. **表达欲驱动** - 有态度的内容激发创作冲动
+3. **社交认同激励** - 优质内容获得曝光和认可
+
+## 结论
+
+核心受众应聚焦18-25岁基层青年群体，这部分用户与品牌年轻化战略高度契合。`,
+      timestamp: '14:03',
+      citations: [
+        { title: 'Z世代消费行为研究报告', source: '市场研究数据库', page: 23 },
+        { title: '短视频平台用户画像', source: 'Y系统-用户标签', page: 5 },
+        { title: '品牌年轻化营销案例集', source: '宣传知识库', page: 45 },
+      ],
+    },
+  ]);
+
+  const agentConfig = {
+    name: 'AudienceAgent',
+    role: '受众分析专家',
+    description: '分析目标受众画像、行为特征和核心需求，为策略制定提供数据支持',
+    skills: [
+      { name: '受众分层', type: '分析类', status: 'enabled' },
+      { name: '核心受众识别', type: '推断类', status: 'enabled' },
+      { name: '受众画像抽取', type: '抽取类', status: 'enabled' },
+      { name: '阻力因素提炼', type: '分析类', status: 'enabled' },
+    ],
+    databases: [
+      { name: '宣传知识库', type: '知识库', access: '品牌案例、活动方法论', status: 'connected' },
+      { name: 'Y系统', type: '业务系统', access: '用户标签、传播数据', status: 'connected' },
+      { name: '市场数据库', type: '外部数据源', access: '市场报告、用户研究', status: 'connected' },
+    ],
+    outputFields: ['core_audience', 'key_traits', 'concerns', 'barriers'],
+  };
+
+  const analysisResult = {
+    title: '五四青年节宣传活动目标受众分析报告',
+    agent: 'AudienceAgent',
+    completionTime: '2026-03-19 14:03',
+    status: '已完成',
+    summary: '核心受众聚焦18-25岁基层青年群体，需用"真实、有态度"的内容打动',
+  };
+
+  const handleSend = () => {
+    if (!input.trim()) return;
+
+    const userMessage: ChatMessage = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: input,
+      timestamp: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
+    };
+
+    setMessages([...messages, userMessage]);
+    setInput('');
+    setIsRunning(true);
+
+    setTimeout(() => {
+      const agentMessage: ChatMessage = {
+        id: (Date.now() + 1).toString(),
+        role: 'agent',
+        content: '分析结果已生成，请查看上方报告详情。',
+        timestamp: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
+        citations: [
+          { title: '青年消费趋势报告', source: '市场数据库', page: 12 },
+        ],
+      };
+      setMessages(prev => [...prev, agentMessage]);
+      setIsRunning(false);
+      setTaskStatus('completed');
+    }, 2000);
+  };
+
+  const handleCopyResult = () => {
+    const content = messages.filter(m => m.role === 'agent').map(m => m.content).join('\n\n');
+    navigator.clipboard.writeText(content);
+  };
+
+  const handleEditResult = () => {
+    if (isEditing) {
+      setIsEditing(false);
+    } else {
+      setEditedContent(messages.filter(m => m.role === 'agent').map(m => m.content).join('\n\n'));
+      setIsEditing(true);
+    }
+  };
+
+  const handleExport = () => {
+    const content = `# ${analysisResult.title}\n\n智能体：${analysisResult.agent}\n完成时间：${analysisResult.completionTime}\n状态：${analysisResult.status}\n\n---\n\n${messages.filter(m => m.role === 'agent').map(m => m.content).join('\n\n')}`;
+    const blob = new Blob([content], { type: 'text/markdown' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'audience_analysis_report.md';
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className="h-[calc(100vh-140px)] flex flex-col">
+      {/* 顶部工具栏 */}
+      <div className={`rounded-xl p-4 flex-shrink-0 theme-card border ${
+        isDark
+          ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30'
+          : 'bg-white border-red-100 shadow-sm'
+      }`}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => onNavigate('task-list')}
+              className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
+                isDark
+                  ? 'bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300'
+                  : 'bg-red-50 hover:bg-red-100 border border-red-200 text-red-600'
+              }`}
+            >
+              <ArrowLeft className="w-4 h-4" />
+              返回
+            </button>
+            <div className={`h-8 w-px ${isDark ? 'bg-blue-800/30' : 'bg-red-200'}`} />
+            <div>
+              <h1 className={`font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>五四青年节受众分析</h1>
+              <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>单智能体任务 · AudienceAgent</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className={`px-3 py-1.5 rounded-full text-xs font-medium flex items-center gap-1.5 ${
+              taskStatus === 'completed'
+                ? isDark
+                  ? 'bg-green-500/20 text-green-400'
+                  : 'bg-green-100 text-green-600'
+                : taskStatus === 'running'
+                ? isDark
+                  ? 'bg-blue-500/20 text-blue-400'
+                  : 'bg-red-100 text-red-600'
+                : isDark
+                  ? 'bg-slate-500/20 text-slate-400'
+                  : 'bg-gray-100 text-gray-600'
+            }`}>
+              {taskStatus === 'completed' ? (
+                <><CheckCircle className="w-3 h-3" /> 已完成</>
+              ) : taskStatus === 'running' ? (
+                <><Clock className="w-3 h-3" /> 运行中</>
+              ) : (
+                <><Clock className="w-3 h-3" /> 待运行</>
+              )}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* 主内容区：三栏布局 - 中间栏加宽，右侧栏变窄 */}
+      <div className="flex-1 grid grid-cols-12 gap-4 mt-4 min-h-0">
+        {/* 左侧栏 (15%) - 任务信息 + 智能体配置 */}
+        <div className={`col-span-2 flex flex-col gap-4 min-h-0 overflow-y-auto ${
+          isDark ? '' : 'pr-2'
+        }`}>
+          {/* 任务信息卡片 */}
+          <div className={`rounded-xl p-4 flex-shrink-0 border ${
+            isDark
+              ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30'
+              : 'bg-white border-red-100 shadow-sm'
+          }`}>
+            <h3 className={`font-semibold text-sm mb-3 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              <span className={isDark ? 'text-blue-400' : 'text-red-500'}>
+                <FileText className="w-4 h-4" />
+              </span>
+              任务信息
+            </h3>
+            <div className="space-y-3 text-sm">
+              <div className="flex items-center justify-between">
+                <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>任务类型</span>
+                <span className={`px-2 py-0.5 rounded text-xs ${
+                  isDark
+                    ? 'bg-blue-500/20 text-blue-400'
+                    : 'bg-red-100 text-red-600'
+                }`}>单智能体</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>执行智能体</span>
+                <span className={isDark ? 'text-cyan-400' : 'text-red-600'}>AudienceAgent</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>创建时间</span>
+                <span className={isDark ? 'text-slate-400' : 'text-gray-600'}>14:00</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>完成时间</span>
+                <span className={isDark ? 'text-slate-400' : 'text-gray-600'}>14:03</span>
+              </div>
+            </div>
+          </div>
+
+          {/* 智能体配置卡片 */}
+          <div className={`rounded-xl p-4 flex-1 overflow-y-auto border theme-card scrollbar-thin ${
+            isDark
+              ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30'
+              : 'bg-white border-red-100 shadow-sm'
+          }`}>
+            <h3 className={`font-semibold text-sm mb-3 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              <span className={isDark ? 'text-cyan-400' : 'text-red-500'}>
+                <Bot className="w-4 h-4" />
+              </span>
+              智能体配置
+            </h3>
+
+            {/* 智能体简介 */}
+            <div className={`mb-4 p-3 rounded-lg ${
+              isDark ? 'bg-slate-900/50' : 'bg-red-50'
+            }`}>
+              <p className={`text-sm font-medium mb-1 ${isDark ? 'text-cyan-400' : 'text-red-600'}`}>{agentConfig.name}</p>
+              <p className={`text-xs mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{agentConfig.role}</p>
+              <p className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{agentConfig.description}</p>
+            </div>
+
+            {/* 技能列表 */}
+            <div className="mb-4">
+              <div className="flex items-center gap-2 mb-2">
+                <Brain className={`w-4 h-4 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
+                <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>启用技能</span>
+              </div>
+              <div className="space-y-1.5">
+                {agentConfig.skills.map((skill, index) => (
+                  <div key={index} className={`flex items-center justify-between p-2 rounded ${
+                    isDark ? 'bg-slate-900/50' : 'bg-red-50'
+                  }`}>
+                    <span className={`text-xs ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{skill.name}</span>
+                    <span className={`px-1.5 py-0.5 rounded text-[10px] ${
+                      isDark
+                        ? 'bg-purple-500/20 text-purple-400'
+                        : 'bg-red-100 text-red-600'
+                    }`}>{skill.type}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* 数据源列表 */}
+            <div>
+              <div className="flex items-center gap-2 mb-2">
+                <Database className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-red-500'}`} />
+                <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>可调用数据源</span>
+              </div>
+              <div className="space-y-1.5">
+                {agentConfig.databases.map((db, index) => (
+                  <div key={index} className={`p-2 rounded ${
+                    isDark ? 'bg-slate-900/50' : 'bg-red-50'
+                  }`}>
+                    <div className="flex items-center justify-between mb-1">
+                      <span className={`text-xs ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{db.name}</span>
+                      <span className={`w-1.5 h-1.5 rounded-full ${
+                        db.status === 'connected'
+                          ? isDark ? 'bg-green-400' : 'bg-red-500'
+                          : 'bg-slate-500'
+                      }`} />
+                    </div>
+                    <p className={`text-[10px] ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{db.access}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 中间栏 (65%) - 对话式问答 - 加宽 */}
+        <div className="col-span-7 flex flex-col min-h-0">
+          <div className={`rounded-xl flex-1 flex flex-col min-h-0 border theme-card ${
+            isDark
+              ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30'
+              : 'bg-white border-red-100 shadow-sm'
+          }`}>
+            {/* 对话区域头部 */}
+            <div className={`p-4 border-b flex-shrink-0 ${
+              isDark ? 'border-blue-800/30' : 'border-red-100'
+            }`}>
+              <h3 className={`font-semibold flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                <span className={isDark ? 'text-blue-400' : 'text-red-500'}>
+                  <MessageSquare className="w-4 h-4" />
+                </span>
+                对话分析
+              </h3>
+            </div>
+
+            {/* 消息列表 */}
+            <div className="flex-1 overflow-y-auto p-4 space-y-4 scrollbar-thin">
+              {messages.map((msg) => (
+                <div key={msg.id} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+                  <div className={`max-w-[85%] rounded-xl p-4 border ${
+                    msg.role === 'user'
+                      ? isDark
+                        ? 'bg-blue-600/30 border-blue-500/30'
+                        : 'bg-red-50 border-red-200'
+                      : isDark
+                        ? 'bg-slate-900/50 border-blue-800/30'
+                        : 'bg-gray-50 border-gray-200'
+                  }`}>
+                    <div className="flex items-center gap-2 mb-2">
+                      {msg.role === 'agent' ? (
+                        <Bot className={`w-4 h-4 ${isDark ? 'text-cyan-400' : 'text-red-500'}`} />
+                      ) : (
+                        <User className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+                      )}
+                      <span className={`text-xs font-medium ${
+                        msg.role === 'user'
+                          ? isDark ? 'text-blue-400' : 'text-red-600'
+                          : isDark ? 'text-cyan-400' : 'text-red-600'
+                      }`}>
+                        {msg.role === 'user' ? '你' : 'AudienceAgent'}
+                      </span>
+                      <span className={`text-[10px] ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{msg.timestamp}</span>
+                    </div>
+                    <p className={`text-sm whitespace-pre-wrap ${
+                      isDark ? 'text-slate-300' : 'text-gray-700'
+                    }`}>{msg.content}</p>
+
+                    {/* 引用信息 */}
+                    {msg.citations && msg.citations.length > 0 && (
+                      <div className={`mt-3 pt-3 border-t ${
+                        isDark ? 'border-blue-800/30' : 'border-red-200'
+                      }`}>
+                        <button
+                          onClick={() => setShowCitations(showCitations === msg.id ? null : msg.id)}
+                          className={`flex items-center gap-2 text-xs transition-colors ${
+                            isDark ? 'text-slate-400 hover:text-blue-400' : 'text-gray-500 hover:text-red-500'
+                          }`}
+                        >
+                          <BookOpen className="w-3 h-3" />
+                          查看引用 ({msg.citations.length})
+                          {showCitations === msg.id ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
+                        </button>
+                        {showCitations === msg.id && (
+                          <div className="mt-2 space-y-2">
+                            {msg.citations.map((citation, index) => (
+                              <div className={`p-2 rounded flex items-start gap-2 ${
+                                isDark ? 'bg-slate-800/50' : 'bg-white border border-gray-200'
+                              }`}>
+                                <ExternalLink className={`w-3 h-3 mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
+                                <div>
+                                  <p className={`text-xs ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{citation.title}</p>
+                                  <p className={`text-[10px] ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{citation.source} {citation.page && `· 第${citation.page}页`}</p>
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+              {isRunning && (
+                <div className="flex justify-start">
+                  <div className={`rounded-xl p-4 border ${
+                    isDark ? 'bg-slate-900/50 border-blue-800/30' : 'bg-gray-50 border-gray-200'
+                  }`}>
+                    <div className="flex items-center gap-2">
+                      <Bot className={`w-4 h-4 ${isDark ? 'text-cyan-400' : 'text-red-500'}`} />
+                      <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>分析中...</span>
+                      <div className="flex gap-1">
+                        <span className={`w-1.5 h-1.5 rounded-full animate-pulse ${
+                          isDark ? 'bg-cyan-400' : 'bg-red-500'
+                        }`} />
+                        <span className={`w-1.5 h-1.5 rounded-full animate-pulse ${
+                          isDark ? 'bg-cyan-400' : 'bg-red-500'
+                        }`} style={{ animationDelay: '100ms' }} />
+                        <span className={`w-1.5 h-1.5 rounded-full animate-pulse ${
+                          isDark ? 'bg-cyan-400' : 'bg-red-500'
+                        }`} style={{ animationDelay: '200ms' }} />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* 输入区域 */}
+            <div className={`p-4 border-t flex-shrink-0 ${
+              isDark ? 'border-blue-800/30' : 'border-red-100'
+            }`}>
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  onKeyDown={(e) => e.key === 'Enter' && handleSend()}
+                  placeholder="输入问题或任务要求..."
+                  className={`flex-1 px-4 py-2.5 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 transition-colors ${
+                    isDark
+                      ? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
+                      : 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
+                  }`}
+                />
+                <button
+                  onClick={handleSend}
+                  disabled={isRunning}
+                  className={`px-4 py-2.5 rounded-lg text-sm transition-colors flex items-center gap-2 ${
+                    isDark
+                      ? 'bg-blue-600 hover:bg-blue-500 disabled:bg-slate-700 text-white'
+                      : 'bg-red-600 hover:bg-red-500 disabled:bg-gray-400 text-white shadow-md'
+                  }`}
+                >
+                  <Send className="w-4 h-4" />
+                  发送
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 右侧栏 (20%) - 分析结果 - 变窄 */}
+        <div className="col-span-3 flex flex-col min-h-0">
+          <div className={`rounded-xl flex-1 flex flex-col min-h-0 border theme-card ${
+            isDark
+              ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30'
+              : 'bg-white border-red-100 shadow-sm'
+          }`}>
+            {/* 结果区域头部 */}
+            <div className={`p-4 border-b flex-shrink-0 ${
+              isDark ? 'border-blue-800/30' : 'border-red-100'
+            }`}>
+              <div className="flex items-center justify-between">
+                <h3 className={`font-semibold flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                  <span className={isDark ? 'text-purple-400' : 'text-red-500'}>
+                    <Sparkles className="w-4 h-4" />
+                  </span>
+                  分析结果
+                </h3>
+                <div className="flex items-center gap-1">
+                  <button
+                    onClick={handleCopyResult}
+                    className={`p-2 rounded-lg transition-colors ${
+                      isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'
+                    }`}
+                    title="复制结果"
+                  >
+                    <Copy className={`w-4 h-4 ${isDark ? 'text-slate-400' : 'text-red-400'}`} />
+                  </button>
+                  <button
+                    onClick={handleEditResult}
+                    className={`p-2 rounded-lg transition-colors ${
+                      isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'
+                    }`}
+                    title="编辑结果"
+                  >
+                    <Edit3 className={`w-4 h-4 ${isEditing ? (isDark ? 'text-blue-400' : 'text-red-500') : (isDark ? 'text-slate-400' : 'text-red-400')}`} />
+                  </button>
+                  <button
+                    onClick={handleExport}
+                    className={`p-2 rounded-lg transition-colors ${
+                      isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'
+                    }`}
+                    title="导出结果"
+                  >
+                    <Download className={`w-4 h-4 ${isDark ? 'text-slate-400' : 'text-red-400'}`} />
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {/* 结果内容 */}
+            <div className="flex-1 overflow-y-auto p-4 scrollbar-thin">
+              {/* 结果概览 */}
+              <div className={`mb-4 p-4 rounded-xl border ${
+                isDark
+                  ? 'bg-gradient-to-br from-purple-600/20 to-blue-600/20 border-purple-500/30'
+                  : 'bg-gradient-to-br from-red-50 to-red-100 border-red-200'
+              }`}>
+                <h4 className={`font-medium text-sm mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>{analysisResult.title}</h4>
+                <div className={`flex items-center gap-4 text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                  <span className="flex items-center gap-1">
+                    <Bot className="w-3 h-3" />
+                    {analysisResult.agent}
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <Clock className="w-3 h-3" />
+                    {analysisResult.completionTime}
+                  </span>
+                </div>
+              </div>
+
+              {/* 结论摘要 */}
+              <div className="mb-4">
+                <h4 className={`text-xs mb-2 flex items-center gap-2 ${
+                  isDark ? 'text-slate-400' : 'text-gray-500'
+                }`}>
+                  <Lightbulb className={`w-3 h-3 ${isDark ? 'text-yellow-400' : 'text-yellow-500'}`} />
+                  核心结论
+                </h4>
+                <div className={`p-3 rounded-lg border ${
+                  isDark
+                    ? 'bg-blue-500/10 border-blue-500/30'
+                    : 'bg-red-50 border-red-200'
+                }`}>
+                  <p className={`text-sm ${isDark ? 'text-blue-300' : 'text-red-600'}`}>{analysisResult.summary}</p>
+                </div>
+              </div>
+
+              {/* 关键洞察 */}
+              <div className="mb-4">
+                <h4 className={`text-xs mb-2 flex items-center gap-2 ${
+                  isDark ? 'text-slate-400' : 'text-gray-500'
+                }`}>
+                  <Eye className={`w-3 h-3 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                  关键洞察
+                </h4>
+                <div className="space-y-2">
+                  <div className={`p-3 rounded-lg border ${
+                    isDark ? 'bg-slate-900/50 border-blue-800/30' : 'bg-gray-50 border-gray-200'
+                  }`}>
+                    <p className={`text-sm font-medium mb-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>核心受众</p>
+                    <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>18-25岁基层青年群体</p>
+                  </div>
+                  <div className={`p-3 rounded-lg border ${
+                    isDark ? 'bg-slate-900/50 border-blue-800/30' : 'bg-gray-50 border-gray-200'
+                  }`}>
+                    <p className={`text-sm font-medium mb-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>核心驱动</p>
+                    <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>社交认同与真实态度</p>
+                  </div>
+                  <div className={`p-3 rounded-lg border ${
+                    isDark ? 'bg-slate-900/50 border-blue-800/30' : 'bg-gray-50 border-gray-200'
+                  }`}>
+                    <p className={`text-sm font-medium mb-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>内容策略</p>
+                    <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>真实故事 + 情感共鸣 + 实用价值</p>
+                  </div>
+                </div>
+              </div>
+
+              {/* 详细信息预览 */}
+              <div>
+                <h4 className={`text-xs mb-2 flex items-center gap-2 ${
+                  isDark ? 'text-slate-400' : 'text-gray-500'
+                }`}>
+                  <Info className={`w-3 h-3 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
+                  详细报告
+                </h4>
+                {isEditing ? (
+                  <textarea
+                    value={editedContent}
+                    onChange={(e) => setEditedContent(e.target.value)}
+                    className={`w-full h-48 p-3 rounded-lg text-xs resize-none focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
+                      isDark
+                        ? 'bg-slate-900/50 border border-blue-800/30 text-slate-300'
+                        : 'bg-white border border-gray-200 text-gray-700'
+                    }`}
+                  />
+                ) : (
+                  <div className={`p-3 rounded-lg max-h-48 overflow-y-auto ${
+                    isDark ? 'bg-slate-900/50 border border-blue-800/30' : 'bg-gray-50 border border-gray-200'
+                  }`}>
+                    <div className={`space-y-3 text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                      <p>## 核心受众画像</p>
+                      <p className="pl-2">• 年龄段：18-25岁</p>
+                      <p className="pl-2">• 身份定位：基层青年（学生、职场新人）</p>
+                      <p className="pl-2">• 地域分布：一二线城市为主</p>
+                      <p className="pt-2">## 用户特征</p>
+                      <p className="pl-2">• 社交媒体重度用户</p>
+                      <p className="pl-2">• 注重"真实感"和"态度感"</p>
+                      <p className="pl-2">• 追求个性化表达</p>
+                      <p className={`pt-2 ${isDark ? 'text-blue-400' : 'text-red-500'}`}>点击编辑按钮可修改报告内容</p>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* 引用来源 */}
+              <div className="mt-4">
+                <h4 className={`text-xs mb-2 flex items-center gap-2 ${
+                  isDark ? 'text-slate-400' : 'text-gray-500'
+                }`}>
+                  <BookOpen className={`w-3 h-3 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
+                  引用来源
+                </h4>
+                <div className="space-y-1.5">
+                  {[
+                    { title: 'Z世代消费行为研究报告', source: '市场研究数据库' },
+                    { title: '短视频平台用户画像', source: 'Y系统-用户标签' },
+                    { title: '品牌年轻化营销案例集', source: '宣传知识库' },
+                  ].map((item, index) => (
+                    <div key={index} className={`flex items-center gap-2 p-2 rounded ${
+                      isDark ? 'bg-slate-900/30' : 'bg-white border border-gray-100'
+                    }`}>
+                      <ExternalLink className={`w-3 h-3 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
+                      <div>
+                        <p className={`text-xs ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{item.title}</p>
+                        <p className={`text-[10px] ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{item.source}</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* 底部操作 */}
+            <div className={`p-4 border-t flex-shrink-0 ${
+              isDark ? 'border-blue-800/30' : 'border-red-100'
+            }`}>
+              <div className="flex gap-2">
+                <button
+                  onClick={handleExport}
+                  className={`flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm transition-colors ${
+                    isDark
+                      ? 'bg-blue-600 hover:bg-blue-500 text-white'
+                      : 'bg-red-600 hover:bg-red-500 text-white shadow-md'
+                  }`}
+                >
+                  <Download className="w-4 h-4" />
+                  导出报告
+                </button>
+                <button className={`flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm transition-colors ${
+                  isDark
+                    ? 'bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300'
+                    : 'bg-gray-100 hover:bg-gray-200 border border-gray-200 text-gray-700'
+                }`}>
+                  <Zap className="w-4 h-4" />
+                  存入知识库
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TaskSingle;
diff --git a/web-code/components/taskManagement/TaskWorkspace.tsx b/web-code/components/taskManagement/TaskWorkspace.tsx
new file mode 100644
index 00000000..a64bbd3d
--- /dev/null
+++ b/web-code/components/taskManagement/TaskWorkspace.tsx
@@ -0,0 +1,935 @@
+import React, { useState } from 'react';
+import {
+  Target,
+  Clock,
+  User,
+  ChevronRight,
+  Play,
+  RotateCcw,
+  Download,
+  MessageSquare,
+  AlertTriangle,
+  CheckCircle,
+  Bot,
+  FileText,
+  Lightbulb,
+  ArrowRight,
+  RefreshCw,
+  Pause,
+  Eye,
+  Zap,
+  Shield,
+  AlertCircle,
+  UserCheck,
+  CheckCircle2,
+  XCircle,
+  Send,
+  Plus,
+  AtSign,
+  FileInput,
+} from 'lucide-react';
+import { useTheme } from '@/contexts/ThemeContext';
+import { PageType } from '@/components/Sidebar';
+
+interface TaskWorkspaceProps {
+  onNavigate: (page: PageType) => void;
+}
+
+const TaskWorkspace: React.FC<TaskWorkspaceProps> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const [currentPhase, setCurrentPhase] = useState(3);
+  const [showHumanIntervention, setShowHumanIntervention] = useState(false);
+  const [inputType, setInputType] = useState('question');
+  const [sendTarget, setSendTarget] = useState('current');
+  const [inputMessage, setInputMessage] = useState('');
+
+  // 逻辑链一致性检查数据
+  const logicChainChecks = [
+    { id: 'goal-behavior', label: '目标-行为', status: 'passed', detail: '行为与目标高度一致' },
+    { id: 'behavior-driver', label: '行为-驱动', status: 'passed', detail: '驱动有效支撑行为' },
+    { id: 'driver-narrative', label: '驱动-叙事', status: 'passed', detail: '叙事与驱动匹配' },
+    { id: 'narrative-audience', label: '叙事-受众', status: 'warning', detail: '叙事需进一步收窄以匹配核心受众' },
+  ];
+
+  // 待确认问题列表
+  const pendingQuestions = [
+    { id: 1, type: 'field', title: '受众范围收窄', description: '是否聚焦基层青年而非全体青年？', priority: 'high' },
+    { id: 2, type: 'conflict', title: '叙事方向待定', description: '真实性与话题性如何平衡？', priority: 'medium' },
+  ];
+
+  const phases = [
+    { id: 1, name: '目标分析', agent: 'GoalAgent', status: 'completed' },
+    { id: 2, name: '受众分析', agent: 'AudienceAgent', status: 'completed' },
+    { id: 3, name: '行为分析', agent: 'BehaviorAgent', status: 'active' },
+    { id: 4, name: '驱动分析', agent: 'DriverAgent', status: 'pending' },
+    { id: 5, name: '叙事分析', agent: 'NarrativeAgent', status: 'pending' },
+    { id: 6, name: '逻辑链收敛', agent: 'LogicChainAgent', status: 'pending' },
+    { id: 7, name: '风险评估', agent: 'RiskAgent', status: 'pending' },
+    { id: 8, name: '方案生成', agent: 'DraftAgent', status: 'pending' },
+  ];
+
+  const discussionCards = [
+    {
+      id: 1,
+      agent: 'GoalAgent',
+      phase: '目标分析',
+      time: '10:32',
+      type: 'judgment',
+      coreJudgment: '核心目标是提升品牌在年轻群体中的认知度和好感度',
+      outputFields: {
+        primary_goal: '提升品牌在Z世代用户中的认知度',
+        secondary_goal: '建立品牌年轻化形象',
+      },
+      releaseStatus: 'passed',
+      riskWarnings: [],
+    },
+    {
+      id: 2,
+      agent: 'AudienceAgent',
+      phase: '受众分析',
+      time: '11:15',
+      type: 'judgment',
+      coreJudgment: '核心受众应聚焦18-25岁基层青年群体，次级受众为25-30岁职场新人',
+      outputFields: {
+        core_audience: '18-25岁基层青年',
+        secondary_audience: '25-30岁职场新人',
+        audience_insights: ['社交媒体重度用户', '注重性价比', '偏好真实、有态度的品牌'],
+      },
+      releaseStatus: 'passed',
+      riskWarnings: ['受众范围可能过宽，建议进一步细化'],
+    },
+    {
+      id: 3,
+      agent: 'BehaviorAgent',
+      phase: '行为分析',
+      time: '14:20',
+      type: 'response',
+      coreJudgment: '目标行为是促使受众主动参与互动并生成UGC内容',
+      outputFields: {
+        target_behavior: '主动参与话题讨论、生成UGC内容',
+        key_conversion: '浏览 → 点赞 → 评论 → 转发 → 创作',
+      },
+      releaseStatus: 'pending',
+      riskWarnings: [],
+    },
+  ];
+
+  const confirmedFields = {
+    goal: '提升品牌在Z世代用户中的认知度',
+    audience: '18-25岁基层青年',
+    behavior: '主动参与互动并生成UGC内容',
+    driver: '待分析',
+    narrative: '待分析',
+  };
+
+  const currentPhaseName = phases.find(p => p.status === 'active')?.name || '未知';
+
+  return (
+    <div className="h-[calc(100vh-140px)] flex flex-col">
+      {/* 顶部：运行状态栏（精简版 - 无流程图） */}
+      <div className={`rounded-xl p-4 flex-shrink-0 border ${
+        isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'
+      }`}>
+        <div className="flex items-center justify-between">
+          {/* 左侧：当前阶段和运行状态 */}
+          <div className="flex items-center gap-6">
+            <div className="flex items-center gap-3">
+              <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
+                isDark ? 'bg-blue-500/20' : 'bg-red-100'
+              }`}>
+                <Target className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+              </div>
+              <div>
+                <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>当前阶段</p>
+                <p className={`font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>{currentPhaseName}</p>
+              </div>
+            </div>
+            <div className={`h-8 w-px ${isDark ? 'bg-blue-800/30' : 'bg-red-200'}`} />
+            <span className={`px-3 py-1.5 rounded-full text-sm font-medium flex items-center gap-1.5 ${
+              isDark
+                ? 'bg-blue-500/20 text-blue-400'
+                : 'bg-red-100 text-red-600'
+            }`}>
+              <span className={`w-2 h-2 rounded-full animate-pulse ${
+                isDark ? 'bg-blue-400' : 'bg-red-500'
+              }`} />
+              运行中
+            </span>
+          </div>
+
+          {/* 右侧：全局操作按钮 */}
+          <div className="flex items-center gap-2">
+            <button className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors border ${
+              isDark
+                ? 'bg-yellow-500/20 hover:bg-yellow-500/30 border-yellow-500/30 text-yellow-400'
+                : 'bg-yellow-100 hover:bg-yellow-200 border-yellow-200 text-yellow-600'
+            }`}>
+              <Pause className="w-4 h-4" />
+              暂停
+            </button>
+            <button className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors ${
+              isDark
+                ? 'bg-green-600 hover:bg-green-500 text-white'
+                : 'bg-green-600 hover:bg-green-500 text-white shadow-md'
+            }`}>
+              <Play className="w-4 h-4" />
+              开始
+            </button>
+            <button
+              onClick={() => onNavigate('strategy-result')}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors border ${
+                isDark
+                  ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300'
+                  : 'bg-gray-100 hover:bg-gray-200 border-gray-200 text-gray-700'
+              }`}
+            >
+              <Eye className="w-4 h-4" />
+              查看结果
+            </button>
+            <button className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition-colors border ${
+              isDark
+                ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300'
+                : 'bg-gray-100 hover:bg-gray-200 border-gray-200 text-gray-700'
+            }`}>
+              <Download className="w-4 h-4" />
+              导出
+            </button>
+            <button className={`p-2 rounded-lg transition-colors border ${
+              isDark
+                ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300'
+                : 'bg-gray-100 hover:bg-gray-200 border-gray-200 text-gray-700'
+            }`}>
+              <ChevronRight className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* 三栏式主工作区 */}
+      <div className="flex-1 grid grid-cols-12 gap-4 mt-4 min-h-0 overflow-hidden">
+        {/* 左栏 - 任务与流程区 (22%) */}
+        <div className="col-span-3 flex flex-col gap-4 min-h-0 overflow-y-auto">
+          {/* 任务信息卡 */}
+          <div className={`rounded-xl p-4 flex-shrink-0 border ${
+            isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'
+          }`}>
+            <h3 className={`font-semibold text-sm mb-3 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              <FileText className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+              任务信息
+            </h3>
+            <div className="space-y-2 text-sm">
+              <div className="flex items-center justify-between">
+                <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>任务标题</span>
+                <span className={`text-right truncate max-w-[140px] ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>五四青年节宣传活动策略</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>任务编号</span>
+                <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-400'}`}>TASK-0319-001</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>所属场景</span>
+                <span className={`text-xs ${isDark ? 'text-blue-400' : 'text-red-600'}`}>宣传策略生成</span>
+              </div>
+              <div className={`pt-2 border-t ${isDark ? 'border-blue-800/30' : 'border-red-100'}`}>
+                <div className="flex items-center justify-between text-xs">
+                  <span className={`flex items-center gap-1 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>
+                    <User className="w-3 h-3" /> 张策略
+                  </span>
+                  <span className={`flex items-center gap-1 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>
+                    <Clock className="w-3 h-3" /> 2026-03-19
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* 流程节点区 */}
+          <div className={`rounded-xl p-4 flex-shrink-0 border ${
+            isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'
+          }`}>
+            <h3 className={`font-semibold text-sm mb-3 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              <Bot className={`w-4 h-4 ${isDark ? 'text-cyan-400' : 'text-red-500'}`} />
+              流程节点
+            </h3>
+            <div className="space-y-1.5">
+              {phases.map((phase) => (
+                <button
+                  key={phase.id}
+                  onClick={() => setCurrentPhase(phase.id)}
+                  className={`w-full flex items-center gap-2 p-2 rounded-lg transition-all text-left border ${
+                    phase.status === 'active'
+                      ? isDark
+                        ? 'bg-blue-500/20 border-blue-500/30'
+                        : 'bg-red-50 border-red-200'
+                      : phase.status === 'completed'
+                      ? isDark
+                        ? 'bg-slate-900/50 hover:bg-slate-800/50'
+                        : 'bg-gray-50 hover:bg-gray-100'
+                      : isDark
+                        ? 'bg-slate-900/30 opacity-50'
+                        : 'bg-gray-50 opacity-50'
+                  }`}
+                >
+                  <div className={`w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 ${
+                    phase.status === 'completed'
+                      ? isDark ? 'bg-green-500 text-white' : 'bg-green-500 text-white'
+                      : phase.status === 'active'
+                      ? isDark ? 'bg-blue-500 text-white' : 'bg-blue-500 text-white'
+                      : isDark ? 'bg-slate-700 text-slate-400' : 'bg-gray-200 text-gray-500'
+                  }`}>
+                    {phase.id}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className={`text-xs font-medium truncate ${
+                      phase.status === 'active' ? (isDark ? 'text-white' : 'text-gray-900') : (isDark ? 'text-slate-400' : 'text-gray-500')
+                    }`}>
+                      {phase.name}
+                    </p>
+                    <p className={`text-[10px] truncate ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{phase.agent}</p>
+                  </div>
+                  <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${
+                    phase.status === 'completed' ? (isDark ? 'bg-green-400' : 'bg-green-500') :
+                    phase.status === 'active' ? (isDark ? 'bg-blue-400' : 'bg-blue-500') :
+                    (isDark ? 'bg-slate-600' : 'bg-gray-300')
+                  }`} />
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* 快捷操作卡 */}
+          <div className={`rounded-xl p-4 flex-shrink-0 border ${
+            isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'
+          }`}>
+            <h3 className={`font-semibold text-sm mb-3 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              <Zap className={`w-4 h-4 ${isDark ? 'text-yellow-400' : 'text-red-500'}`} />
+              快捷操作
+            </h3>
+            <div className="space-y-2">
+              <button className={`w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors border ${
+                isDark
+                  ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300'
+                  : 'bg-gray-100 hover:bg-gray-200 border-gray-200 text-gray-700'
+              }`}>
+                <RefreshCw className="w-4 h-4" />
+                重新运行当前节点
+              </button>
+              <button className={`w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors border ${
+                isDark
+                  ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300'
+                  : 'bg-gray-100 hover:bg-gray-200 border-gray-200 text-gray-700'
+              }`}>
+                <RotateCcw className="w-4 h-4" />
+                发起回退
+              </button>
+              <button className={`w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors border ${
+                isDark
+                  ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300'
+                  : 'bg-gray-100 hover:bg-gray-200 border-gray-200 text-gray-700'
+              }`}>
+                <FileInput className="w-4 h-4" />
+                查看日志
+              </button>
+              <button
+                onClick={() => setShowHumanIntervention(true)}
+                className={`w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors border ${
+                  isDark
+                    ? 'bg-purple-500/20 hover:bg-purple-500/30 border-purple-500/30 text-purple-400'
+                    : 'bg-purple-100 hover:bg-purple-200 border-purple-200 text-purple-600'
+                }`}
+              >
+                <UserCheck className="w-4 h-4" />
+                人工介入
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* 中栏 - 讨论区 (47%) */}
+        <div className="col-span-6 flex flex-col gap-4 min-h-0">
+          {/* 当前议题卡 */}
+          <div className={`rounded-xl p-4 flex-shrink-0 border ${
+            isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'
+          }`}>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                  isDark ? 'bg-cyan-500/20' : 'bg-red-100'
+                }`}>
+                  <MessageSquare className={`w-4 h-4 ${isDark ? 'text-cyan-400' : 'text-red-500'}`} />
+                </div>
+                <div>
+                  <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>当前议题</p>
+                  <p className={`text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>明确目标受众的行为模式和转化路径</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className={`px-2.5 py-1 rounded-full text-xs font-medium ${
+                  isDark ? 'bg-cyan-500/20 text-cyan-400' : 'bg-red-100 text-red-600'
+                }`}>
+                  BehaviorAgent
+                </span>
+                <button className={`px-2 py-1 rounded text-xs transition-colors border ${
+                  isDark
+                    ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300'
+                    : 'bg-gray-100 hover:bg-gray-200 border-gray-200 text-gray-700'
+                }`}>
+                  指定发言
+                </button>
+                <button className={`px-2 py-1 rounded text-xs transition-colors border ${
+                  isDark
+                    ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300'
+                    : 'bg-gray-100 hover:bg-gray-200 border-gray-200 text-gray-700'
+                }`}>
+                  结束本轮
+                </button>
+              </div>
+            </div>
+            <div className={`mt-3 p-2 rounded-lg text-xs ${isDark ? 'bg-slate-900/50' : 'bg-gray-50'}`}>
+              <span className={isDark ? 'text-slate-500' : 'text-gray-400'}>上游输入：</span>
+              <span className={isDark ? 'text-cyan-400' : 'text-red-600'}>AudienceAgent 已确认输出</span>
+              <span className={`mx-2 ${isDark ? 'text-slate-400' : 'text-gray-400'}`}>→</span>
+              <span className={isDark ? 'text-slate-300' : 'text-gray-700'}>核心受众已明确：18-25岁基层青年群体</span>
+            </div>
+          </div>
+
+          {/* 讨论消息流 */}
+          <div className={`flex-1 rounded-xl p-4 overflow-y-auto min-h-0 border ${
+            isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'
+          }`}>
+            <h3 className={`font-semibold text-sm mb-4 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              <Bot className={`w-4 h-4 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
+              讨论消息流
+            </h3>
+            <div className="space-y-4">
+              {discussionCards.map((card) => (
+                <div
+                  key={card.id}
+                  className={`p-4 rounded-xl border ${
+                    card.releaseStatus === 'passed'
+                      ? isDark
+                        ? 'bg-slate-900/50 border-green-500/30'
+                        : 'bg-green-50 border-green-200'
+                      : card.releaseStatus === 'pending'
+                      ? isDark
+                        ? 'bg-blue-500/10 border-blue-500/30'
+                        : 'bg-blue-50 border-blue-200'
+                      : isDark
+                        ? 'bg-red-500/10 border-red-500/30'
+                        : 'bg-red-50 border-red-200'
+                  }`}
+                >
+                  <div className="flex items-start justify-between mb-3">
+                    <div className="flex items-center gap-2">
+                      <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                        isDark ? 'bg-purple-500/20' : 'bg-red-100'
+                      }`}>
+                        <Bot className={`w-4 h-4 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
+                      </div>
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <p className={`text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>{card.agent}</p>
+                          <span className={`px-1.5 py-0.5 rounded text-[10px] ${isDark ? 'bg-slate-700 text-slate-400' : 'bg-gray-100 text-gray-500'}`}>
+                            {card.type === 'judgment' ? '独立判断' : '回应'}
+                          </span>
+                        </div>
+                        <p className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{card.phase} · {card.time}</p>
+                      </div>
+                    </div>
+                    <span className={`px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1 ${
+                      card.releaseStatus === 'passed'
+                        ? isDark
+                          ? 'bg-green-500/20 text-green-400'
+                          : 'bg-green-100 text-green-600'
+                        : card.releaseStatus === 'pending'
+                        ? isDark
+                          ? 'bg-yellow-500/20 text-yellow-400'
+                          : 'bg-yellow-100 text-yellow-600'
+                        : isDark
+                          ? 'bg-red-500/20 text-red-400'
+                          : 'bg-red-100 text-red-600'
+                    }`}>
+                      {card.releaseStatus === 'passed' ? (
+                        <><CheckCircle className="w-3 h-3" /> 已放行</>
+                      ) : card.releaseStatus === 'pending' ? (
+                        <><Clock className="w-3 h-3" /> 待放行</>
+                      ) : (
+                        <><AlertTriangle className="w-3 h-3" /> 未通过</>
+                      )}
+                    </span>
+                  </div>
+
+                  <div className="mb-3">
+                    <p className={`text-xs mb-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>核心观点</p>
+                    <p className={`text-sm ${isDark ? 'text-white' : 'text-gray-900'}`}>{card.coreJudgment}</p>
+                  </div>
+
+                  <div className={`mb-3 p-3 rounded-lg ${isDark ? 'bg-slate-800/50' : 'bg-gray-50'}`}>
+                    <p className={`text-xs mb-2 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>输出字段摘要</p>
+                    <div className="space-y-1 text-xs">
+                      {Object.entries(card.outputFields).map(([key, value]) => (
+                        <div key={key} className="flex items-start gap-2">
+                          <span className={`font-mono ${isDark ? 'text-cyan-400' : 'text-red-600'}`}>{key}:</span>
+                          <span className={isDark ? 'text-slate-300' : 'text-gray-700'}>
+                            {Array.isArray(value) ? value.join(', ') : value}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  {card.riskWarnings.length > 0 && (
+                    <div className={`mb-3 p-2 rounded-lg border ${
+                      isDark ? 'bg-amber-500/10 border-amber-500/30' : 'bg-yellow-50 border-yellow-200'
+                    }`}>
+                      <p className={`text-xs font-medium flex items-center gap-1 ${
+                        isDark ? 'text-amber-400' : 'text-yellow-600'
+                      }`}>
+                        <AlertTriangle className="w-3 h-3" /> 风险提示
+                      </p>
+                      <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{card.riskWarnings[0]}</p>
+                    </div>
+                  )}
+
+                  <div className={`flex items-center gap-2 pt-2 border-t ${isDark ? 'border-blue-800/30' : 'border-gray-200'}`}>
+                    <button className={`px-2.5 py-1.5 rounded text-xs transition-colors ${
+                      isDark
+                        ? 'bg-green-600/50 hover:bg-green-600 text-white'
+                        : 'bg-green-600 hover:bg-green-500 text-white'
+                    }`}>
+                      采纳
+                    </button>
+                    <button className={`px-2.5 py-1.5 rounded text-xs transition-colors border ${
+                      isDark
+                        ? 'bg-yellow-500/20 hover:bg-yellow-500/30 border-yellow-500/30 text-yellow-400'
+                        : 'bg-yellow-100 hover:bg-yellow-200 border-yellow-200 text-yellow-600'
+                    }`}>
+                      待确认
+                    </button>
+                    <button className={`px-2.5 py-1.5 rounded text-xs transition-colors border ${
+                      isDark
+                        ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300'
+                        : 'bg-gray-100 hover:bg-gray-200 border-gray-200 text-gray-700'
+                    }`}>
+                      引用追问
+                    </button>
+                    <button className={`px-2.5 py-1.5 rounded text-xs transition-colors border ${
+                      isDark
+                        ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300'
+                        : 'bg-gray-100 hover:bg-gray-200 border-gray-200 text-gray-700'
+                    }`}>
+                      写入策略链
+                    </button>
+                  </div>
+                </div>
+              ))}
+
+              {/* 系统摘要卡 */}
+              <div className={`p-4 rounded-xl border ${
+                isDark ? 'bg-blue-500/10 border-blue-500/30' : 'bg-blue-50 border-blue-200'
+              }`}>
+                <div className="flex items-center gap-2 mb-3">
+                  <div className={`w-6 h-6 rounded flex items-center justify-center ${
+                    isDark ? 'bg-blue-500/20' : 'bg-blue-100'
+                  }`}>
+                    <Lightbulb className={`w-3 h-3 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
+                  </div>
+                  <p className={`text-sm font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>系统摘要</p>
+                </div>
+                <div className="space-y-2 text-sm">
+                  <div>
+                    <p className={`text-xs mb-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>已形成结论：</p>
+                    <ul className={`text-xs space-y-0.5 list-disc list-inside ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      <li>核心受众明确为18-25岁基层青年</li>
+                      <li>目标行为建议拆分为参与和传播两层</li>
+                    </ul>
+                  </div>
+                  <div>
+                    <p className={`text-xs mb-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>待确认：</p>
+                    <ul className={`text-xs space-y-0.5 list-disc list-inside ${isDark ? 'text-yellow-400' : 'text-yellow-600'}`}>
+                      <li>UGC创作是否纳入核心行为？</li>
+                    </ul>
+                  </div>
+                  <div className={`pt-2 border-t ${isDark ? 'border-blue-800/30' : 'border-blue-200'}`}>
+                    <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>建议下一步：</p>
+                    <p className={`text-xs ${isDark ? 'text-cyan-400' : 'text-red-600'}`}>邀请 DriverAgent 分析驱动因素</p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2 mt-3">
+                  <button className={`px-3 py-1.5 rounded text-xs transition-colors ${
+                    isDark
+                      ? 'bg-blue-600 hover:bg-blue-500 text-white'
+                      : 'bg-blue-600 hover:bg-blue-500 text-white shadow-md'
+                  }`}>
+                    推进下一步
+                  </button>
+                  <button className={`px-3 py-1.5 rounded text-xs transition-colors border ${
+                    isDark
+                      ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300'
+                      : 'bg-gray-100 hover:bg-gray-200 border-gray-200 text-gray-700'
+                  }`}>
+                    写入待确认
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 右栏 - 策略收敛区 (28%) */}
+        <div className="col-span-3 flex flex-col gap-4 min-h-0 overflow-y-auto">
+          {/* 策略链卡 */}
+          <div className={`rounded-xl p-4 flex-shrink-0 border ${
+            isDark
+              ? 'bg-gradient-to-br from-blue-600/20 to-cyan-600/20 backdrop-blur-xl border-blue-500/30'
+              : 'bg-gradient-to-br from-red-50 to-red-100 border-red-200'
+          }`}>
+            <div className="flex items-center justify-between mb-3">
+              <h3 className={`font-semibold text-sm flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                <Lightbulb className={`w-4 h-4 ${isDark ? 'text-yellow-400' : 'text-red-500'}`} />
+                策略链
+              </h3>
+              <div className="flex items-center gap-1">
+                <button className={`p-1 rounded transition-colors ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'}`} title="复制">
+                  <FileText className={`w-3.5 h-3.5 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
+                </button>
+                <button className={`p-1 rounded transition-colors ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'}`} title="编辑">
+                  <RefreshCw className={`w-3.5 h-3.5 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
+                </button>
+              </div>
+            </div>
+            <div className={`p-3 rounded-lg border ${
+              isDark ? 'bg-slate-900/50 border-blue-500/20' : 'bg-white border-red-100'
+            }`}>
+              <p className={`text-xs leading-relaxed ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                面向<span className={`font-medium ${isDark ? 'text-cyan-400' : 'text-red-600'}`}>【18-25岁基层青年】</span>，
+                围绕其<span className={`font-medium ${isDark ? 'text-yellow-400' : 'text-red-600'}`}>【社交认同与自我表达】</span>驱动，
+                传播<span className={`font-medium ${isDark ? 'text-purple-400' : 'text-red-600'}`}>【真实、有态度的青年故事】</span>叙事，
+                促使其产生<span className={`font-medium ${isDark ? 'text-green-400' : 'text-red-600'}`}>【主动参与互动并生成UGC内容】</span>行为，
+                从而实现<span className={`font-medium ${isDark ? 'text-blue-400' : 'text-red-600'}`}>【提升品牌在Z世代用户中的认知度】</span>目标。
+              </p>
+            </div>
+          </div>
+
+          {/* 逻辑链一致性校验 */}
+          <div className={`rounded-xl p-4 flex-shrink-0 border ${
+            isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'
+          }`}>
+            <div className="flex items-center justify-between mb-3">
+              <h3 className={`font-semibold text-sm flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                <Shield className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-red-500'}`} />
+                逻辑链一致性
+              </h3>
+              <span className={`px-2 py-0.5 rounded text-xs ${
+                isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-600'
+              }`}>
+                3/4 通过
+              </span>
+            </div>
+            <div className="space-y-1.5">
+              {logicChainChecks.map((check) => (
+                <div
+                  key={check.id}
+                  className={`p-2 rounded-lg border text-xs ${
+                    check.status === 'passed'
+                      ? isDark
+                        ? 'bg-green-500/10 border-green-500/30'
+                        : 'bg-green-50 border-green-200'
+                      : check.status === 'warning'
+                      ? isDark
+                        ? 'bg-yellow-500/10 border-yellow-500/30'
+                        : 'bg-yellow-50 border-yellow-200'
+                      : isDark
+                        ? 'bg-red-500/10 border-red-500/30'
+                        : 'bg-red-50 border-red-200'
+                  }`}
+                >
+                  <div className="flex items-center justify-between">
+                    <span className={`font-medium ${
+                      check.status === 'passed'
+                        ? isDark ? 'text-green-400' : 'text-green-600'
+                        : check.status === 'warning'
+                        ? isDark ? 'text-yellow-400' : 'text-yellow-600'
+                        : isDark ? 'text-red-400' : 'text-red-600'
+                    }`}>
+                      {check.label}
+                    </span>
+                    {check.status === 'passed' ? (
+                      <CheckCircle2 className={`w-3.5 h-3.5 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                    ) : check.status === 'warning' ? (
+                      <AlertCircle className={`w-3.5 h-3.5 ${isDark ? 'text-yellow-400' : 'text-yellow-500'}`} />
+                    ) : (
+                      <XCircle className={`w-3.5 h-3.5 ${isDark ? 'text-red-400' : 'text-red-500'}`} />
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* 已采纳观点 */}
+          <div className={`rounded-xl p-4 flex-shrink-0 border ${
+            isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'
+          }`}>
+            <h3 className={`font-semibold text-sm mb-3 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-red-500'}`} />
+              已采纳观点
+            </h3>
+            <div className="space-y-2">
+              {[
+                { agent: 'GoalAgent', opinion: '主目标是提升认知度与好感度' },
+                { agent: 'AudienceAgent', opinion: '核心受众为18-25岁基层青年' },
+                { agent: 'BehaviorAgent', opinion: '目标行为应拆为参与和传播' },
+              ].map((item, index) => (
+                <div key={index} className={`p-2 rounded-lg border ${
+                  isDark ? 'bg-slate-900/50 border-green-500/20' : 'bg-green-50 border-green-200'
+                }`}>
+                  <p className={`text-xs font-medium mb-0.5 ${isDark ? 'text-green-400' : 'text-green-600'}`}>{item.agent}</p>
+                  <p className={`text-xs ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{item.opinion}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* 待确认与分歧 */}
+          <div className={`rounded-xl p-4 flex-shrink-0 border ${
+            isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'
+          }`}>
+            <div className="flex items-center justify-between mb-3">
+              <h3 className={`font-semibold text-sm flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                <AlertTriangle className={`w-4 h-4 ${isDark ? 'text-amber-400' : 'text-red-500'}`} />
+                待确认与分歧
+              </h3>
+              <span className={`px-2 py-0.5 rounded text-xs ${
+                isDark ? 'bg-amber-500/20 text-amber-400' : 'bg-yellow-100 text-yellow-600'
+              }`}>
+                {pendingQuestions.length} 项
+              </span>
+            </div>
+            <div className="space-y-2">
+              {pendingQuestions.map((question) => (
+                <div
+                  key={question.id}
+                  className={`p-2 rounded-lg border ${
+                    question.priority === 'high'
+                      ? isDark
+                        ? 'bg-red-500/10 border-red-500/30'
+                        : 'bg-red-50 border-red-200'
+                      : isDark
+                        ? 'bg-amber-500/10 border-amber-500/30'
+                        : 'bg-yellow-50 border-yellow-200'
+                  }`}
+                >
+                  <p className={`text-xs font-medium ${
+                    question.priority === 'high' ? (isDark ? 'text-red-400' : 'text-red-600') : (isDark ? 'text-amber-400' : 'text-yellow-600')
+                  }`}>
+                    {question.title}
+                  </p>
+                  <p className={`text-xs mt-0.5 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{question.description}</p>
+                  <button className={`mt-1 text-xs flex items-center gap-1 ${
+                    isDark ? 'text-blue-400 hover:text-blue-300' : 'text-blue-500 hover:text-blue-600'
+                  }`}>
+                    <UserCheck className="w-3 h-3" />
+                    点名分析
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 底部：固定输入区 */}
+      <div className={`mt-4 rounded-xl p-4 flex-shrink-0 border ${
+        isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'
+      }`}>
+        <div className="flex items-center gap-3">
+          {/* 发送对象选择 */}
+          <select
+            value={sendTarget}
+            onChange={(e) => setSendTarget(e.target.value)}
+            className={`px-3 py-2 rounded-lg text-sm focus:outline-none ${
+              isDark
+                ? 'bg-slate-900/50 border border-blue-800/30 text-white'
+                : 'bg-white border border-gray-200 text-gray-700'
+            }`}
+          >
+            <option value="current">当前智能体</option>
+            <option value="all">全部智能体</option>
+            <option value="host">主持人</option>
+          </select>
+
+          {/* 输入类型选择 */}
+          <select
+            value={inputType}
+            onChange={(e) => setInputType(e.target.value)}
+            className={`px-3 py-2 rounded-lg text-sm focus:outline-none ${
+              isDark
+                ? 'bg-slate-900/50 border border-blue-800/30 text-white'
+                : 'bg-white border border-gray-200 text-gray-700'
+            }`}
+          >
+            <option value="question">提问</option>
+            <option value="instruction">指令</option>
+            <option value="judgment">人工判断</option>
+            <option value="note">批注</option>
+          </select>
+
+          {/* 主输入框 */}
+          <input
+            type="text"
+            value={inputMessage}
+            onChange={(e) => setInputMessage(e.target.value)}
+            placeholder="输入问题、指令、人工判断或批注..."
+            className={`flex-1 px-4 py-2 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
+              isDark
+                ? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
+                : 'bg-white border border-gray-200 text-gray-900 placeholder-gray-400'
+            }`}
+          />
+
+          {/* 发送按钮 */}
+          <button className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            isDark
+              ? 'bg-blue-600 hover:bg-blue-500 text-white'
+              : 'bg-red-600 hover:bg-red-500 text-white shadow-md'
+          }`}>
+            <Send className="w-4 h-4" />
+            发送
+          </button>
+        </div>
+
+        {/* 第二行快捷操作 */}
+        <div className="flex items-center gap-4 mt-3">
+          <button className={`flex items-center gap-1.5 px-2 py-1 rounded text-xs transition-colors border ${
+            isDark
+              ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-400'
+              : 'bg-gray-100 hover:bg-gray-200 border-gray-200 text-gray-500'
+          }`}>
+            <AtSign className="w-3 h-3" />
+            @智能体
+          </button>
+          <button className={`flex items-center gap-1.5 px-2 py-1 rounded text-xs transition-colors border ${
+            isDark
+              ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-400'
+              : 'bg-gray-100 hover:bg-gray-200 border-gray-200 text-gray-500'
+          }`}>
+            <FileInput className="w-3 h-3" />
+            引用消息
+          </button>
+          <button className={`flex items-center gap-1.5 px-2 py-1 rounded text-xs transition-colors border ${
+            isDark
+              ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-400'
+              : 'bg-gray-100 hover:bg-gray-200 border-gray-200 text-gray-500'
+          }`}>
+            <Lightbulb className="w-3 h-3" />
+            生成摘要
+          </button>
+          <button className={`flex items-center gap-1.5 px-2 py-1 rounded text-xs transition-colors border ${
+            isDark
+              ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-400'
+              : 'bg-gray-100 hover:bg-gray-200 border-gray-200 text-gray-500'
+          }`}>
+            <Plus className="w-3 h-3" />
+            写入整合区
+          </button>
+        </div>
+      </div>
+
+      {/* 人工干预弹窗 */}
+      {showHumanIntervention && (
+        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50">
+          <div className={`rounded-2xl p-6 w-full max-w-lg border ${
+            isDark ? 'bg-slate-800 border-blue-800/50' : 'bg-white border-red-200'
+          }`}>
+            <div className="flex items-center justify-between mb-6">
+              <h3 className={`font-semibold text-lg flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                <UserCheck className={`w-5 h-5 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
+                人工干预
+              </h3>
+              <button
+                onClick={() => setShowHumanIntervention(false)}
+                className={`p-2 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-700' : 'hover:bg-gray-100'}`}
+              >
+                <XCircle className={`w-5 h-5 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
+              </button>
+            </div>
+            <div className="space-y-4">
+              <div>
+                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>干预类型</label>
+                <div className="grid grid-cols-2 gap-3">
+                  {[
+                    { value: 'correct', label: '人工修正', icon: RefreshCw },
+                    { value: 'approve', label: '提前放行', icon: CheckCircle2 },
+                    { value: 'override', label: '强制覆盖', icon: Zap },
+                    { value: 'reject', label: '终止本轮', icon: XCircle },
+                  ].map((type) => (
+                    <button
+                      key={type.value}
+                      className={`flex items-center gap-2 p-3 rounded-lg transition-colors border ${
+                        isDark
+                          ? 'bg-slate-900/50 hover:bg-slate-700/50 border-blue-800/30 text-slate-300'
+                          : 'bg-gray-50 hover:bg-gray-100 border-gray-200 text-gray-700'
+                      }`}
+                    >
+                      <type.icon className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+                      <span className="text-sm">{type.label}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+              <div>
+                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>目标字段</label>
+                <select className={`w-full px-4 py-2.5 rounded-lg text-sm ${
+                  isDark
+                    ? 'bg-slate-900/50 border border-blue-800/30 text-white'
+                    : 'bg-white border border-gray-200 text-gray-700'
+                }`}>
+                  <option value="">请选择要干预的字段</option>
+                  <option value="audience">受众细分</option>
+                  <option value="behavior">目标行为</option>
+                  <option value="driver">核心驱动</option>
+                  <option value="narrative">叙事策略</option>
+                </select>
+              </div>
+              <div>
+                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>干预内容</label>
+                <textarea
+                  rows={4}
+                  className={`w-full px-4 py-2.5 rounded-lg text-sm resize-none ${
+                    isDark
+                      ? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
+                      : 'bg-white border border-gray-200 text-gray-900 placeholder-gray-400'
+                  }`}
+                  placeholder="请输入人工干预的具体内容或修正意见..."
+                />
+              </div>
+              <div className="flex gap-3 pt-2">
+                <button
+                  onClick={() => setShowHumanIntervention(false)}
+                  className={`flex-1 px-4 py-2.5 rounded-lg text-sm transition-colors border ${
+                    isDark
+                      ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300'
+                      : 'bg-gray-100 hover:bg-gray-200 border-gray-200 text-gray-700'
+                  }`}
+                >
+                  取消
+                </button>
+                <button className={`flex-1 px-4 py-2.5 rounded-lg text-sm transition-colors ${
+                  isDark
+                    ? 'bg-purple-600 hover:bg-purple-500 text-white'
+                    : 'bg-red-600 hover:bg-red-500 text-white shadow-md'
+                }`}>
+                  确认干预
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TaskWorkspace;
diff --git a/web-code/components/taskManagement/TaskXkFrom.tsx b/web-code/components/taskManagement/TaskXkFrom.tsx
new file mode 100644
index 00000000..b7b96c84
--- /dev/null
+++ b/web-code/components/taskManagement/TaskXkFrom.tsx
@@ -0,0 +1,26 @@
+import { Outlet, useNavigate } from 'react-router-dom';
+import React, { useState, useEffect, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import { requestCrudService } from '@/service/request-axios-service';
+const service = requestCrudService;
+const userInfo = localStorage.getItem('userInfo');
+const xkLinkUrl = import.meta.env.VITE_AIPI_XKLINKTO_URL;
+interface TaskPgFromProps {
+  gopath: string
+}
+const TaskXkFrom: React.FC<TaskPgFromProps> = ({gopath}) => {
+const [xkUrl, setXkUrl] = useState(xkLinkUrl);
+  useEffect(() => {
+    if(userInfo) {
+      const userData: any = JSON.parse(userInfo);
+      setXkUrl(`${xkLinkUrl}${gopath}?accessToken=${userData.accessToken}`);
+    }
+  }, [gopath]);
+  return (
+    <div className="h-full flex flex-col">
+      <iframe className="h-[calc(100vh-92px)]" src={xkUrl}></iframe>
+    </div>
+  );
+}
+export default TaskXkFrom
diff --git a/web-code/components/taskManagement/XXTy.tsx b/web-code/components/taskManagement/XXTy.tsx
new file mode 100644
index 00000000..47622487
--- /dev/null
+++ b/web-code/components/taskManagement/XXTy.tsx
@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from "react";
+import "./css/iframe.css";
+
+import { useTheme } from "@/contexts/ThemeContext";
+import { PageType } from "@/components/Sidebar";
+
+interface XXTyPageProps {
+  title: string;
+  category: string;
+  subCategory: string;
+  onNavigate: (page: PageType) => void;
+}
+
+const TYURL = import.meta.env.VITE_AIPI_B2ACTOR_URL || "";
+
+const XXTyPage: React.FC<XXTyPageProps> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+  const [iframeUrl, setIframeUrl] = useState("");
+  useEffect(() => {
+    initIframeUrl();
+  }, []);
+  const initIframeUrl = () => {
+    const url = `${TYURL}/fromB/toPage?defaultPage=iframeSysystem`;
+    console.log({ iframeUrl: url });
+    setIframeUrl(url);
+  };
+  return (
+    <div className="iframe-container">
+      <iframe src={iframeUrl} className="full-size-iframe"></iframe>
+    </div>
+  );
+};
+
+export default XXTyPage;
diff --git a/web-code/components/taskManagement/XingdongTy.tsx b/web-code/components/taskManagement/XingdongTy.tsx
new file mode 100644
index 00000000..c325edbb
--- /dev/null
+++ b/web-code/components/taskManagement/XingdongTy.tsx
@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from "react";
+import "./css/iframe.css";
+
+import { useTheme } from "@/contexts/ThemeContext";
+import { PageType } from "@/components/Sidebar";
+
+interface XingdongTyPageProps {
+  title: string;
+  category: string;
+  subCategory: string;
+  onNavigate: (page: PageType) => void;
+}
+
+const TYURL = import.meta.env.VITE_AIPI_B2ACTOR_URL || "";
+
+const XingdongTyPage: React.FC<XingdongTyPageProps> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+  const [iframeUrl, setIframeUrl] = useState("");
+  useEffect(() => {
+    initIframeUrl();
+  }, []);
+  const initIframeUrl = () => {
+    const url = `${TYURL}/fromB/toPage?defaultPage=iframeXdty`;
+    console.log({ iframeUrl: url });
+    setIframeUrl(url);
+  };
+  return (
+    <div className="iframe-container">
+      <iframe src={iframeUrl} className="full-size-iframe"></iframe>
+    </div>
+  );
+};
+
+export default XingdongTyPage;
diff --git a/web-code/components/taskManagement/css/iframe.css b/web-code/components/taskManagement/css/iframe.css
new file mode 100644
index 00000000..06d0374e
--- /dev/null
+++ b/web-code/components/taskManagement/css/iframe.css
@@ -0,0 +1,10 @@
+.iframe-container {
+  width: 100%;
+  height: calc(100vh - 100px); /* 可根据需求调整 */
+}
+
+.full-size-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
diff --git a/web-code/config/defaultConfig.js b/web-code/config/defaultConfig.js
new file mode 100644
index 00000000..7f718473
--- /dev/null
+++ b/web-code/config/defaultConfig.js
@@ -0,0 +1,158 @@
+/**
+ * 后端 API 默认地址
+ */
+export const DEFAULT_BACKEND_URL = 'https://ch1.b.uat.4.cn/likun_b1_mope';
+
+/**
+ * 默认前端配置
+ *
+ * 包含：
+ * - 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/web-code/config/templateStore.js b/web-code/config/templateStore.js
new file mode 100644
index 00000000..73e49799
--- /dev/null
+++ b/web-code/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('https://ch1.b.uat.4.cn/zncmweb/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/web-code/contexts/ChatContext.tsx b/web-code/contexts/ChatContext.tsx
new file mode 100644
index 00000000..7cca3fdc
--- /dev/null
+++ b/web-code/contexts/ChatContext.tsx
@@ -0,0 +1,99 @@
+import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+
+export interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: number;
+  type?: 'general' | 'agent' | 'compare';
+  agentName?: string;
+}
+
+export interface toolsUser {
+  email: string;
+  id: string;
+  is_active: boolean;
+  is_superuser: boolean;
+  is_verified: boolean;
+  pages_limit: number;
+  pages_used: string;
+  yUserId: string;
+}
+
+interface ChatContextType {
+  messages: ChatMessage[];
+  addMessage: (role: 'user' | 'assistant', content: string, type?: 'general' | 'agent' | 'compare', agentName?: string) => void;
+  clearMessages: () => void;
+  deleteMessage: (id: string) => void;
+  startConfig: any;
+  setStartConfig: (val: any) => void;
+  toolsUser: toolsUser | null;
+  setToolsUser: (val: toolsUser) => void;
+}
+
+const ChatContext = createContext<ChatContextType | undefined>(undefined);
+
+export function ChatProvider({ children }: { children: ReactNode }) {
+  const [messages, setMessages] = useState<ChatMessage[]>(() => {
+    try {
+      const stored = localStorage.getItem('qa-chat-history');
+      return stored ? JSON.parse(stored) : [];
+    } catch {
+      return [];
+    }
+  });
+
+  const [startConfig, setStartConfig] = useState<any>(null);
+  const [toolsUser, setToolsUser] = useState<toolsUser | null>(null)
+
+  const saveToStorage = useCallback((newMessages: ChatMessage[]) => {
+    try {
+      localStorage.setItem('qa-chat-history', JSON.stringify(newMessages));
+    } catch (error) {
+      console.error('Failed to save chat history:', error);
+    }
+  }, []);
+
+  const addMessage = useCallback((role: 'user' | 'assistant', content: string, type?: 'general' | 'agent' | 'compare', agentName?: string) => {
+    const newMessage: ChatMessage = {
+      id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+      role,
+      content,
+      timestamp: Date.now(),
+      type,
+      agentName,
+    };
+    setMessages((prev) => {
+      const updated = [...prev, newMessage];
+      saveToStorage(updated);
+      return updated;
+    });
+  }, [saveToStorage]);
+
+  const clearMessages = useCallback(() => {
+    setMessages([]);
+    localStorage.removeItem('qa-chat-history');
+  }, []);
+
+  const deleteMessage = useCallback((id: string) => {
+    setMessages((prev) => {
+      const updated = prev.filter((msg) => msg.id !== id);
+      saveToStorage(updated);
+      return updated;
+    });
+  }, [saveToStorage]);
+
+  return (
+    <ChatContext.Provider value={{ messages, addMessage, clearMessages, deleteMessage, startConfig, setStartConfig, toolsUser, setToolsUser }}>
+      {children}
+    </ChatContext.Provider>
+  );
+}
+
+export function useChatContext() {
+  const context = useContext(ChatContext);
+  if (context === undefined) {
+    throw new Error('useChatContext must be used within a ChatProvider');
+  }
+  return context;
+}
\ No newline at end of file
diff --git a/web-code/contexts/ThemeContext.tsx b/web-code/contexts/ThemeContext.tsx
new file mode 100644
index 00000000..c6ce37b8
--- /dev/null
+++ b/web-code/contexts/ThemeContext.tsx
@@ -0,0 +1,145 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+
+// 主题类型
+export type ThemeType = 'dark' | 'light';
+
+// 主题配置
+export interface ThemeConfig {
+  type: ThemeType;
+  name: string;
+  colors: {
+    background: string;
+    backgroundSecondary: string;
+    text: string;
+    textSecondary: string;
+    primary: string;
+    primaryHover: string;
+    border: string;
+    accent: string;
+    success: string;
+    warning: string;
+    error: string;
+    card: string;
+    cardHover: string;
+    input: string;
+    inputBorder: string;
+    overlay: string;
+  };
+}
+
+// 主题配置
+const themes: Record<ThemeType, ThemeConfig> = {
+  dark: {
+    type: 'dark',
+    name: '深色主题',
+    colors: {
+      background: 'slate-900',
+      backgroundSecondary: 'slate-800',
+      text: 'white',
+      textSecondary: 'slate-400',
+      primary: 'blue-500',
+      primaryHover: 'blue-400',
+      border: 'blue-800',
+      accent: 'cyan-400',
+      success: 'emerald-500',
+      warning: 'amber-500',
+      error: 'rose-500',
+      card: 'slate-800',
+      cardHover: 'slate-700',
+      input: 'slate-800',
+      inputBorder: 'blue-800',
+      overlay: 'slate-900/50',
+    },
+  },
+  light: {
+    type: 'light',
+    name: '红白主题',
+    colors: {
+      background: 'white',
+      backgroundSecondary: 'red-50',
+      text: 'gray-900',
+      textSecondary: 'gray-600',
+      primary: 'red-600',
+      primaryHover: 'red-500',
+      border: 'red-200',
+      accent: 'red-700',
+      success: 'green-600',
+      warning: 'amber-500',
+      error: 'red-600',
+      card: 'white',
+      cardHover: 'red-50',
+      input: 'white',
+      inputBorder: 'red-200',
+      overlay: 'black/30',
+    },
+  },
+};
+
+// 主题上下文
+interface ThemeContextType {
+  theme: ThemeType;
+  themeConfig: ThemeConfig;
+  toggleTheme: () => void;
+  setTheme: (theme: ThemeType) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+// 主题提供者
+interface ThemeProviderProps {
+  children: ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  const [theme, setThemeState] = useState<ThemeType>(() => {
+    // 从 localStorage 读取保存的主题
+    const saved = localStorage.getItem('strategy-theme');
+    return (saved as ThemeType) || 'dark';
+  });
+
+  // 切换主题
+  const toggleTheme = () => {
+    setThemeState((prev) => (prev === 'dark' ? 'light' : 'dark'));
+  };
+
+  // 设置特定主题
+  const setTheme = (newTheme: ThemeType) => {
+    setThemeState(newTheme);
+  };
+
+  // 保存到 localStorage
+  useEffect(() => {
+    localStorage.setItem('strategy-theme', theme);
+    // 更新文档类名
+    document.documentElement.classList.remove('dark', 'light');
+    document.documentElement.classList.add(theme);
+  }, [theme]);
+
+  const themeConfig = themes[theme];
+
+  return (
+    <ThemeContext.Provider value={{ theme, themeConfig, toggleTheme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+// 使用主题的 Hook
+export const useTheme = (): ThemeContextType => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+// 主题工具函数 - 生成动态类名
+export const getThemeClasses = (colorKey: keyof ThemeConfig['colors']): string => {
+  const { themeConfig } = useTheme();
+  return themeConfig.colors[colorKey];
+};
+
+// 组合类名工具函数
+export const cn = (...classes: (string | undefined | null | false)[]): string => {
+  return classes.filter(Boolean).join(' ');
+};
diff --git a/web-code/hooks/index.ts b/web-code/hooks/index.ts
new file mode 100644
index 00000000..d1d4ca84
--- /dev/null
+++ b/web-code/hooks/index.ts
@@ -0,0 +1,8 @@
+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 { ChatMessage } from './useChatHistory';
\ No newline at end of file
diff --git a/web-code/hooks/use-mobile.tsx b/web-code/hooks/use-mobile.tsx
new file mode 100644
index 00000000..2b0fe1df
--- /dev/null
+++ b/web-code/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/web-code/hooks/useAsync.ts b/web-code/hooks/useAsync.ts
new file mode 100644
index 00000000..792fd967
--- /dev/null
+++ b/web-code/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/web-code/hooks/useChatHistory.ts b/web-code/hooks/useChatHistory.ts
new file mode 100644
index 00000000..f3ba37ce
--- /dev/null
+++ b/web-code/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/web-code/hooks/useDebounce.ts b/web-code/hooks/useDebounce.ts
new file mode 100644
index 00000000..5f8d8254
--- /dev/null
+++ b/web-code/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/web-code/hooks/useExpertAuthBootstrap.ts b/web-code/hooks/useExpertAuthBootstrap.ts
new file mode 100644
index 00000000..0638f081
--- /dev/null
+++ b/web-code/hooks/useExpertAuthBootstrap.ts
@@ -0,0 +1,116 @@
+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];
+
+export const knowledgetoolUrl = import.meta.env.VITE_AIPI_BACKEND_URL || '';
+const LOGIN_URL = `${knowledgetoolUrl}/auth/jwt/login`;
+const LLMS_URL = `${knowledgetoolUrl}/api/v1/expert-agents/llms`;
+const ME_URL = `${knowledgetoolUrl}/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('tools_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', 'liuqiang@qq.com');
+    formData.append('password', '123456');
+    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('tools_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) {
+      // await login();
+      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 {
+      if (!localStorage.getItem('tools_token')) {
+        await login();
+      }
+      await fetchCurrentUser();
+    } catch(error) {
+      console.log(error);
+    } finally {
+      await Promise.all([fetchLlmList()]);
+      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/web-code/hooks/useLocalStorage.ts b/web-code/hooks/useLocalStorage.ts
new file mode 100644
index 00000000..b262b521
--- /dev/null
+++ b/web-code/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/web-code/hooks/useSession.js b/web-code/hooks/useSession.js
new file mode 100644
index 00000000..0b9b356f
--- /dev/null
+++ b/web-code/hooks/useSession.js
@@ -0,0 +1,860 @@
+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: [],
+  startConfig: null,
+};
+
+/**
+ * 规范化运行时智能体配置
+ *
+ * 将模板中的原始 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' }));
+  }, []);
+
+  // 设置模板信息用于开启会话
+  const configStateChange = useCallback((config) => {
+    setState(prev => ({ ...prev, startConfig: config }));
+  },[])
+
+  /**
+   * 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;
+            return {
+              ...item,
+              phase: 'final_report',
+              content: (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,
+    configStateChange,
+  };
+}
diff --git a/web-code/hooks/useToggle.ts b/web-code/hooks/useToggle.ts
new file mode 100644
index 00000000..e581c28a
--- /dev/null
+++ b/web-code/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/web-code/hooks/useWindowSize.ts b/web-code/hooks/useWindowSize.ts
new file mode 100644
index 00000000..c55fc3d7
--- /dev/null
+++ b/web-code/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/web-code/index.css b/web-code/index.css
new file mode 100644
index 00000000..d7335c97
--- /dev/null
+++ b/web-code/index.css
@@ -0,0 +1,297 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --radius: 0.5rem;
+
+    /* 深色主题 (默认) */
+    --bg-primary: 222.2 84% 4.9%;
+    --bg-secondary: 217.2 32.6% 17.5%;
+    --text-primary: 0 0% 100%;
+    --text-secondary: 215 20.2% 65.1%;
+    --color-primary: 217.2 91.2% 59.8%;
+    --color-primary-hover: 224.3 76.3% 48%;
+    --border-color: 217.2 32.6% 17.5%;
+    --accent-color: 198 93% 60%;
+    --card-bg: 217.2 32.6% 17.5%;
+    --card-hover: 215 20.2% 25%;
+    --input-bg: 217.2 32.6% 17.5%;
+    --input-border: 217.2 32.6% 17.5%;
+
+    --sidebar-background: 222.2 84% 4.9%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+    --td-brand-color: #ce2d39;
+    --bg-color: #0062d966;
+    --card-border: #fa9196;
+    --color-main: #0062d9;
+    --text-color: #FFFFFF;
+  }
+
+  /* 红白主题 (浅色) */
+  .light {
+    --bg-primary: 0 0% 100%;
+    --bg-secondary: 0 86% 97%;
+    --text-primary: 0 0% 9%;
+    --text-secondary: 0 0% 45%;
+    --color-primary: 0 84% 60%;
+    --color-primary-hover: 0 72% 51%;
+    --border-color: 0 76% 89%;
+    --accent-color: 0 72% 51%;
+    --card-bg: 0 0% 100%;
+    --card-hover: 0 86% 97%;
+    --input-bg: 0 0% 100%;
+    --input-border: 0 76% 89%;
+
+    --sidebar-background: 0 0% 100%;
+    --sidebar-foreground: 0 0% 9%;
+    --sidebar-primary: 0 84% 60%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 0 86% 97%;
+    --sidebar-accent-foreground: 0 0% 9%;
+    --sidebar-border: 0 76% 89%;
+    --sidebar-ring: 0 84% 60%;
+    --color-main: #cf1322;
+    --td-brand-color: #ce2d39;
+    --bg-color: #fef6f6;
+    --card-border: #fa9196;
+    --text-color: #222222;
+  }
+
+  /* 应用变量 */
+  body {
+    background-color: hsl(var(--bg-primary));
+    color: hsl(var(--text-primary));
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
+}
+
+img {
+  object-position: top;
+}
+
+.fixed {
+  position: fixed;
+}
+
+/* 动态主题颜色 */
+.theme-bg {
+  background-color: hsl(var(--bg-primary));
+}
+
+.theme-bg-secondary {
+  background-color: hsl(var(--bg-secondary));
+}
+
+.theme-text {
+  color: hsl(var(--text-primary));
+}
+
+.theme-text-secondary {
+  color: hsl(var(--text-secondary));
+}
+
+.theme-primary {
+  background-color: hsl(var(--color-primary));
+  color: white;
+}
+
+.theme-primary-text {
+  color: hsl(var(--color-primary));
+}
+
+.theme-border {
+  border-color: hsl(var(--border-color));
+}
+
+.theme-card {
+  background-color: hsl(var(--card-bg));
+}
+
+.theme-card-hover:hover {
+  background-color: hsl(var(--card-hover));
+}
+
+.theme-input {
+  background-color: hsl(var(--input-bg));
+  border-color: hsl(var(--input-border));
+}
+
+.theme-accent {
+  background-color: hsl(var(--accent-color));
+}
+
+/* 深色主题特定样式 */
+.dark {
+  --bg-primary: 222.2 84% 4.9%;
+  --bg-secondary: 217.2 32.6% 17.5%;
+  --text-primary: 0 0% 100%;
+  --text-secondary: 215 20.2% 65.1%;
+  --color-primary: 217.2 91.2% 59.8%;
+  --color-primary-hover: 224.3 76.3% 48%;
+  --border-color: 217.2 32.6% 17.5%;
+  --accent-color: 198 93% 60%;
+  --card-bg: 217.2 32.6% 17.5%;
+  --card-hover: 215 20.2% 25%;
+  --input-bg: 217.2 32.6% 17.5%;
+  --input-border: 217.2 32.6% 17.5%;
+}
+
+.dark body {
+  background-color: hsl(var(--bg-primary));
+}
+
+/* 浅色主题 (红白) 样式覆盖 */
+.light {
+  background-color: #ffffff;
+}
+
+.light body {
+  background-color: #ffffff;
+}
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  background: #ddd;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  /*滚动条里面小方块*/
+  background: #555;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+/* 主题切换动画 */
+.theme-transition {
+  transition: background-color 0.3s ease,
+    color 0.3s ease,
+    border-color 0.3s ease,
+    box-shadow 0.3s ease;
+}
+
+/* 红白主题特定组件样式 */
+.light .card-shadow {
+  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.1),
+    0 1px 2px rgba(220, 38, 38, 0.06);
+}
+
+.light .card-shadow-hover:hover {
+  box-shadow: 0 4px 6px rgba(220, 38, 38, 0.1),
+    0 2px 4px rgba(220, 38, 38, 0.06);
+}
+
+.light .btn-shadow {
+  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.2);
+}
+
+.light .btn-shadow:hover {
+  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
+}
+
+.task-item-active:hover {
+  border: 1px solid var(--color-main);
+}
+
+.task-item-active:hover .item-active {
+  background: var(--color-main);
+  color: #ffffff;
+}
+
+.dark-theme:hover {
+  background: #0062d966;
+  color: #ffffff;
+  border-color: #0062d9 !important;
+  box-shadow: 0 3px 4px #8b8b8b0f;
+}
+
+.action-item:hover {
+  border-color: var(--card-border);
+}
+
+.dark-theme .task-active {
+  border-color: #0062d9 !important;
+}
+
+.dark-action-item {
+  background: #0062d91a;
+  border: 1px solid;
+  border-color: #2b8ffe99;
+  border-radius: 8px;
+}
+
+.dark-action-item:hover {
+  background: #0062d966;
+  border-color: #0062d9;
+}
+
+.task-active {
+  background-color: var(--bg-color);
+  border: 1px solid var(--color-main);
+}
+
+.task-active .item-active {
+  background: var(--color-main);
+  color: #ffffff;
+}
+
+.task-tab-color {
+  color: var(--color-main);
+}
+
+.dark-theme .task-tab-color {
+  color: #FFFFFF !important;
+}
+
+.dark-theme .t-progress__bar {
+  background-color: #FFFFFF;
+}
+
+/* 行动列表样式 */
+
+.action-bg0 {
+  background: linear-gradient(180deg, #f2f9ff, #fff 17.89% 100%);
+}
+
+.action-bg1 {
+  background: linear-gradient(180deg, #fffaed, #fff 17.89% 100%);
+}
+
+.action-bg2 {
+  background: linear-gradient(180deg, #f2fff9, #fff 17.89% 100%);
+}
+
+.action-bg3 {
+  background: linear-gradient(180deg, #f5f5f5, #fff 17.89% 100%);
+}
+
+.dark-action-bg {
+  background: rgba(3, 38, 80, 0.6) !important;
+  border: 1px solid;
+  border-color: rgba(43, 143, 254, 0.6) !important;
+  border-radius: 8px !important;
+  box-shadow: 0px 1px 16px rgba(0, 0, 0, 0.08) !important;
+}
+
+.list-inside {
+  list-style-position: outside !important;
+}
\ No newline at end of file
diff --git a/web-code/lib/api.ts b/web-code/lib/api.ts
new file mode 100644
index 00000000..6aa8f14c
--- /dev/null
+++ b/web-code/lib/api.ts
@@ -0,0 +1,95 @@
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
+
+// 创建axios实例
+const api: AxiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL || '',
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// 请求拦截器
+api.interceptors.request.use(
+  (config) => {
+    // 可以在这里添加token等认证信息
+    const token = localStorage.getItem('token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+api.interceptors.response.use(
+  (response: AxiosResponse) => {
+    // 只返回data部分
+    return response.data;
+  },
+  (error) => {
+    // 统一错误处理
+    if (error.response) {
+      // 服务器返回错误状态码
+      switch (error.response.status) {
+        case 401:
+          // 未授权，可跳转到登录页
+          break;
+        case 403:
+          // 禁止访问
+          break;
+        case 404:
+          // 资源不存在
+          break;
+        case 500:
+          // 服务器错误
+          break;
+        default:
+          break;
+      }
+    } else if (error.request) {
+      // 请求已发出但没有收到响应
+      console.error('网络错误，请检查网络连接');
+    } else {
+      // 请求配置出错
+      console.error('请求配置错误:', error.message);
+    }
+    return Promise.reject(error);
+  }
+);
+
+// 封装GET请求
+export const get = <T = any>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> => {
+  return api.get(url, {
+    params,
+    ...config,
+  });
+};
+
+// 封装POST请求
+export const post = <T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> => {
+  return api.post(url, data, config);
+};
+
+// 封装PUT请求
+export const put = <T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> => {
+  return api.put(url, data, config);
+};
+
+// 封装DELETE请求
+export const del = <T = any>(url: string, params?: any, config?: AxiosRequestConfig): Promise<T> => {
+  return api.delete(url, {
+    params,
+    ...config,
+  });
+};
+
+// 封装PATCH请求
+export const patch = <T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> => {
+  return api.patch(url, data, config);
+};
+
+export default api;
\ No newline at end of file
diff --git a/web-code/lib/utils.ts b/web-code/lib/utils.ts
new file mode 100644
index 00000000..393d3fc8
--- /dev/null
+++ b/web-code/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/web-code/main.tsx b/web-code/main.tsx
new file mode 100644
index 00000000..0e3e5cf5
--- /dev/null
+++ b/web-code/main.tsx
@@ -0,0 +1,15 @@
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter, HashRouter, Route } from 'react-router-dom'
+import { ErrorBoundary } from './components/ErrorBoundary.tsx'
+import './index.css'
+import './theme.css'
+import 'tdesign-react/es/style/index.css';
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <ErrorBoundary>
+    <HashRouter>
+      <App />
+    </HashRouter>
+  </ErrorBoundary>
+)
diff --git a/web-code/pages/AgentDetail.tsx b/web-code/pages/AgentDetail.tsx
new file mode 100644
index 00000000..f9cd4c1d
--- /dev/null
+++ b/web-code/pages/AgentDetail.tsx
@@ -0,0 +1,877 @@
+import React, { useState } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import {
+  ArrowLeft,
+  Save,
+  RotateCcw,
+  Power,
+  Trash2,
+  Copy,
+  ChevronDown,
+  ChevronRight,
+  Bot,
+  Target,
+  Brain,
+  Database,
+  Box,
+  Route,
+  FileOutput,
+  Sparkles,
+  Lightbulb,
+  MessageSquare,
+  Play,
+  Send,
+  Plus,
+  X,
+  Check,
+  AlertCircle,
+  Wrench,
+  Layers,
+  Zap,
+  Clock,
+} from 'lucide-react';
+
+interface AgentDetailProps {
+  agentId: string | null;
+  onBack: () => void;
+}
+
+interface ExpandedSection {
+  basic: boolean;
+  responsibility: boolean;
+  skills: boolean;
+  datasource: boolean;
+  function: boolean;
+  thinking: boolean;
+  output: boolean;
+}
+
+const AgentDetail: React.FC<AgentDetailProps> = ({ agentId, onBack }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 主题颜色类
+  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
+  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const textMuted = isDark ? 'text-slate-500' : 'text-gray-500';
+  const btnSecondary = isDark ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300' : 'bg-gray-100 hover:bg-gray-200 border-gray-300 text-gray-700';
+  const btnPrimary = isDark ? 'bg-blue-600 hover:bg-blue-500' : 'bg-red-600 hover:bg-red-500';
+  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-gray-50';
+  const inputBorder = isDark ? 'border-blue-800/30' : 'border-gray-300';
+
+  const [isEnabled, setIsEnabled] = useState(true);
+  const [expandedSections, setExpandedSections] = useState<ExpandedSection>({
+    basic: true,
+    responsibility: true,
+    skills: true,
+    datasource: true,
+    function: true,
+    thinking: true,
+    output: true,
+  });
+  const [chatMessages, setChatMessages] = useState<{role: 'user' | 'agent'; content: string}[]>([
+    { role: 'agent', content: '核心受众应聚焦18-25岁基层青年群体，原因是该群体社交媒体活跃度高、注重性价比、偏好真实有态度的品牌叙事。' }
+  ]);
+  const [chatInput, setChatInput] = useState('');
+  const [aiSuggestion, setAiSuggestion] = useState('');
+  const [showGeneratedConfig, setShowGeneratedConfig] = useState(false);
+
+  const toggleSection = (section: keyof ExpandedSection) => {
+    setExpandedSections(prev => ({ ...prev, [section]: !prev[section] }));
+  };
+
+  const skills = [
+    { name: '受众分层', type: '分析类', enabled: true, trigger: '自动', priority: 1 },
+    { name: '核心受众识别', type: '推断类', enabled: true, trigger: '自动', priority: 1 },
+    { name: '受众画像抽取', type: '抽取类', enabled: true, trigger: '条件触发', priority: 2 },
+    { name: '阻力因素提炼', type: '分析类', enabled: true, trigger: '手动', priority: 3 },
+  ];
+
+  const dataSources = [
+    { name: '宣传知识库', type: '知识库', status: 'connected', permission: '只读', trigger: '自动', access: '品牌案例、活动方法论、历史策略' },
+    { name: 'Y系统', type: '业务系统', status: 'connected', permission: '只读', trigger: '条件触发', access: '用户标签、传播数据' },
+    { name: 'A系统', type: '业务系统', status: 'disconnected', permission: '无', trigger: '不可用', access: '—' },
+    { name: '市场数据库', type: '外部数据源', status: 'connected', permission: '只读', trigger: '手动', access: '市场报告、用户研究摘要' },
+  ];
+
+  const functions = [
+    { name: '信息抽取器', type: '抽取', enabled: true, trigger: '自动', usage: '提取任务中的受众相关信息' },
+    { name: '标签聚类器', type: '分析', enabled: true, trigger: '条件触发', usage: '辅助进行受众分层' },
+    { name: '案例检索器', type: '检索', enabled: true, trigger: '手动', usage: '调用历史案例进行参照' },
+    { name: '结构化输出器', type: '格式化', enabled: true, trigger: '自动', usage: '输出标准JSON字段' },
+  ];
+
+  const thinkingSteps = [
+    { step: 1, name: '识别任务中的目标对象', desc: '提取任务中明确或隐含的目标受众信息', required: true, skill: '受众分层', func: '信息抽取器', ds: '无' },
+    { step: 2, name: '判断是否需要分层', desc: '根据任务目标判断是否区分核心/次级/影响者受众', required: true, skill: '核心受众识别', func: '标签聚类器', ds: 'Y系统' },
+    { step: 3, name: '提取核心受众特征', desc: '分析年龄、身份、关切与行为特征', required: true, skill: '画像抽取', func: '结构化输出器', ds: '宣传知识库' },
+    { step: 4, name: '输出结构化结果', desc: '形成标准受众分析输出', required: true, skill: '—', func: '结构化输出器', ds: '—' },
+  ];
+
+  const outputFields = [
+    { name: 'core_audience', type: '文本', required: true },
+    { name: 'secondary_audience', type: '文本', required: false },
+    { name: 'key_traits', type: '数组', required: true },
+    { name: 'concerns', type: '数组', required: false },
+    { name: 'barriers', type: '数组', required: false },
+    { name: 'trust_sources', type: '数组', required: false },
+  ];
+
+  const aiOptimizations = [
+    { issue: '当前已配置"受众画像抽取"技能，但未配置对应输出字段', canFix: true },
+    { issue: '思考路径中"判断是否需要分层"步骤未绑定功能调用', canFix: true },
+    { issue: '已绑定A系统，但当前无任何步骤使用该数据源', canFix: false },
+  ];
+
+  const executionDetails = {
+    dataSources: ['宣传知识库', 'Y系统'],
+    skills: ['受众分层', '核心受众识别', '画像抽取'],
+    functions: ['信息抽取器', '标签聚类器', '结构化输出器'],
+    outputs: ['core_audience', 'key_traits', 'barriers'],
+  };
+
+  const handleSendMessage = () => {
+    if (chatInput.trim()) {
+      setChatMessages([...chatMessages, { role: 'user', content: chatInput }]);
+      setChatInput('');
+      setTimeout(() => {
+        setChatMessages(prev => [...prev, {
+          role: 'agent',
+          content: '核心受众应聚焦18-25岁基层青年群体，原因是该群体社交媒体活跃度高、注重性价比、偏好真实有态度的品牌叙事。'
+        }]);
+      }, 1000);
+    }
+  };
+
+  const handleGenerateConfig = () => {
+    setAiSuggestion('正在分析职责、技能、数据源...');
+    setTimeout(() => {
+      setShowGeneratedConfig(true);
+      setAiSuggestion('');
+    }, 1500);
+  };
+
+  const SectionHeader = ({
+    title,
+    subtitle,
+    icon: Icon,
+    section,
+    children
+  }: {
+    title: string;
+    subtitle: string;
+    icon: React.ElementType;
+    section: keyof ExpandedSection;
+    children: React.ReactNode;
+  }) => (
+    <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl`}>
+      <button
+        onClick={() => toggleSection(section)}
+        className={`w-full flex items-center justify-between p-4 ${isDark ? 'hover:bg-slate-800/50' : 'hover:bg-gray-100'} transition-colors sticky top-0 z-10 ${cardBg} backdrop-blur-xl`}
+      >
+        <div className="flex items-center gap-3">
+          <div className={`w-10 h-10 rounded-lg ${isDark ? 'bg-blue-500/20' : 'bg-red-100'} flex items-center justify-center`}>
+            <Icon className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+          </div>
+          <div className="text-left">
+            <h3 className={`${textPrimary} font-semibold`}>{title}</h3>
+            <p className={`${textMuted} text-xs`}>{subtitle}</p>
+          </div>
+        </div>
+        {expandedSections[section] ? (
+          <ChevronDown className={`w-5 h-5 ${textSecondary}`} />
+        ) : (
+          <ChevronRight className={`w-5 h-5 ${textSecondary}`} />
+        )}
+      </button>
+      {expandedSections[section] && (
+        <div className="px-4 pb-4">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <div className="h-[calc(100vh-140px)] flex flex-col overflow-hidden">
+      {/* 顶部操作栏 */}
+      <div className={`${cardBg} backdrop-blur-xl ${cardBorder} p-4 flex-shrink-0`}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <button onClick={onBack} className={`p-2 ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-gray-200'} rounded-lg transition-colors`}>
+              <ArrowLeft className={`w-5 h-5 ${textSecondary}`} />
+            </button>
+            <div>
+              <p className={`${textSecondary} text-xs`}>智能体能力配置</p>
+              <div className="flex items-center gap-2 mt-0.5">
+                <Bot className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+                <span className={`${textPrimary} font-semibold`}>AudienceAgent</span>
+                <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
+                  isEnabled
+                    ? isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-600'
+                    : isDark ? 'bg-slate-500/20 text-slate-400' : 'bg-gray-200 text-gray-500'
+                }`}>
+                  {isEnabled ? '启用' : '停用'}
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <button className={`flex items-center gap-2 px-4 py-2 ${btnPrimary} text-white rounded-lg text-sm transition-colors`}>
+              <Save className="w-4 h-4" />
+              保存
+            </button>
+            <button className={`flex items-center gap-2 px-4 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}>
+              <RotateCcw className="w-4 h-4" />
+              重置
+            </button>
+            <button
+              onClick={() => setIsEnabled(!isEnabled)}
+              className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm transition-colors ${
+                isEnabled
+                  ? isDark ? 'bg-amber-500/20 hover:bg-amber-500/30 border border-amber-500/30 text-amber-400' : 'bg-amber-100 hover:bg-amber-200 border border-amber-200 text-amber-600'
+                  : isDark ? 'bg-green-500/20 hover:bg-green-500/30 border border-green-500/30 text-green-400' : 'bg-green-100 hover:bg-green-200 border border-green-200 text-green-600'
+              }`}
+            >
+              <Power className="w-4 h-4" />
+              {isEnabled ? '停用' : '启用'}
+            </button>
+            <button className={`flex items-center gap-2 px-4 py-2 ${btnSecondary} ${isDark ? 'hover:text-red-400' : 'hover:text-red-500'} rounded-lg text-sm transition-colors`}>
+              <Trash2 className="w-4 h-4" />
+              删除
+            </button>
+            <button className={`flex items-center gap-2 px-4 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}>
+              <Copy className="w-4 h-4" />
+              复制
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* 主内容区：三栏布局 */}
+      <div className="flex-1 grid grid-cols-12 gap-4 mt-4 min-h-0">
+        {/* 左侧主配置区 (65%) - 带自定义滚动条 */}
+        <div className="col-span-8 flex flex-col gap-4 h-full overflow-y-auto scrollbar-thin scrollbar-thumb-slate-600 scrollbar-track-transparent hover:scrollbar-thumb-slate-500">
+          {/* 模块1：基本信息 */}
+          <SectionHeader
+            title="基本信息"
+            subtitle="定义智能体的基本身份、用途和交互属性"
+            icon={Bot}
+            section="basic"
+          >
+            <div className="space-y-4 pt-2">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className={`block ${textSecondary} text-sm mb-2`}>智能体名称</label>
+                  <input
+                    type="text"
+                    defaultValue="AudienceAgent"
+                    className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm focus:outline-none ${isDark ? 'focus:border-blue-500/50' : 'focus:border-red-400'}`}
+                  />
+                </div>
+                <div>
+                  <label className={`block ${textSecondary} text-sm mb-2`}>智能体编码</label>
+                  <input
+                    type="text"
+                    defaultValue="AGENT_AUDIENCE_001"
+                    className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm focus:outline-none ${isDark ? 'focus:border-blue-500/50' : 'focus:border-red-400'}`}
+                  />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className={`block ${textSecondary} text-sm mb-2`}>智能体分类</label>
+                  <select className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm focus:outline-none ${isDark ? 'focus:border-blue-500/50' : 'focus:border-red-400'}`}>
+                    <option>分析类</option>
+                    <option>编排类</option>
+                    <option>叙事类</option>
+                    <option>校验类</option>
+                    <option>成稿类</option>
+                  </select>
+                </div>
+                <div>
+                  <label className={`block ${textSecondary} text-sm mb-2`}>默认交互模式</label>
+                  <select className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm focus:outline-none ${isDark ? 'focus:border-blue-500/50' : 'focus:border-red-400'}`}>
+                    <option>分析式</option>
+                    <option>对话式</option>
+                    <option>指令式</option>
+                  </select>
+                </div>
+              </div>
+              <div>
+                <label className={`block ${textSecondary} text-sm mb-2`}>智能体说明</label>
+                <textarea
+                  rows={2}
+                  defaultValue="负责分析核心受众特征，输出受众画像和行为特征，为后续策略制定提供数据支持"
+                  className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm focus:outline-none ${isDark ? 'focus:border-blue-500/50' : 'focus:border-red-400'} resize-none`}
+                />
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className={`block ${textSecondary} text-sm mb-2`}>专业标签</label>
+                  <div className={`flex flex-wrap gap-2 p-3 ${inputBg} ${inputBorder} rounded-lg min-h-[46px]`}>
+                    {['受众分析', '用户画像', '分层识别'].map((tag) => (
+                      <span key={tag} className={`px-2 py-1 ${isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-red-100 text-red-600'} rounded text-xs flex items-center gap-1`}>
+                        {tag}
+                        <button className={`hover:${isDark ? 'text-blue-300' : 'text-red-400'}`}><X className="w-3 h-3" /></button>
+                      </span>
+                    ))}
+                    <button className={`px-2 py-1 ${textSecondary} hover:${textPrimary} text-xs flex items-center gap-1`}>
+                      <Plus className="w-3 h-3" /> 添加
+                    </button>
+                  </div>
+                </div>
+                <div>
+                  <label className={`block ${textSecondary} text-sm mb-2`}>适用任务关键词</label>
+                  <div className={`flex flex-wrap gap-2 p-3 ${inputBg} ${inputBorder} rounded-lg min-h-[46px]`}>
+                    {['宣传对象分析', '核心人群识别'].map((tag) => (
+                      <span key={tag} className={`px-2 py-1 ${isDark ? 'bg-cyan-500/20 text-cyan-400' : 'bg-orange-100 text-orange-600'} rounded text-xs flex items-center gap-1`}>
+                        {tag}
+                        <button className={`hover:${isDark ? 'text-cyan-300' : 'text-orange-400'}`}><X className="w-3 h-3" /></button>
+                      </span>
+                    ))}
+                    <button className={`px-2 py-1 ${textSecondary} hover:${textPrimary} text-xs flex items-center gap-1`}>
+                      <Plus className="w-3 h-3" /> 添加
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div className={`flex items-center gap-6 pt-2 border-t ${cardBorder}`}>
+                <div className="flex items-center gap-3">
+                  <span className={`${textSecondary} text-sm`}>支持单独问答</span>
+                  <label className="relative inline-flex items-center cursor-pointer">
+                    <input type="checkbox" className="sr-only peer" defaultChecked />
+                    <div className={`w-11 h-6 ${isDark ? 'bg-slate-700' : 'bg-gray-300'} peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all ${isDark ? 'peer-checked:bg-blue-600' : 'peer-checked:bg-red-500'}`}></div>
+                  </label>
+                </div>
+                <div className="flex items-center gap-3">
+                  <span className={`${textSecondary} text-sm`}>支持单独任务执行</span>
+                  <label className="relative inline-flex items-center cursor-pointer">
+                    <input type="checkbox" className="sr-only peer" defaultChecked />
+                    <div className={`w-11 h-6 ${isDark ? 'bg-slate-700' : 'bg-gray-300'} peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all ${isDark ? 'peer-checked:bg-blue-600' : 'peer-checked:bg-red-500'}`}></div>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </SectionHeader>
+
+          {/* 模块2：职责与边界 */}
+          <SectionHeader
+            title="职责与边界"
+            subtitle="明确智能体的工作范围、边界与禁止事项"
+            icon={Target}
+            section="responsibility"
+          >
+            <div className="space-y-4 pt-2">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className={`block ${textSecondary} text-sm mb-2`}>核心职责</label>
+                  <textarea
+                    rows={3}
+                    defaultValue="识别任务中的关键受众群体，对受众进行分层，并提炼特征、关切与阻力，形成完整的受众画像报告。"
+                    className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm focus:outline-none ${isDark ? 'focus:border-blue-500/50' : 'focus:border-red-400'} resize-none`}
+                  />
+                </div>
+                <div>
+                  <label className={`block ${textSecondary} text-sm mb-2`}>职责边界</label>
+                  <textarea
+                    rows={3}
+                    defaultValue="不直接生成叙事方案；不负责风险最终审核；不替代行为分析；不在缺少依据时擅自扩大受众范围。"
+                    className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm focus:outline-none ${isDark ? 'focus:border-blue-500/50' : 'focus:border-red-400'} resize-none`}
+                  />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className={`block ${textSecondary} text-sm mb-2`}>禁止事项</label>
+                  <textarea
+                    rows={2}
+                    defaultValue="不得在缺少依据时擅自扩大受众范围；不得输出与任务无关的人群判断；不得更改任务目标。"
+                    className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm focus:outline-none ${isDark ? 'focus:border-blue-500/50' : 'focus:border-red-400'} resize-none`}
+                  />
+                </div>
+                <div>
+                  <label className={`block ${textSecondary} text-sm mb-2`}>典型任务</label>
+                  <textarea
+                    rows={2}
+                    defaultValue="分析某宣传任务的核心受众是谁；输出受众画像；识别影响者与阻力群体；提炼受众关切与信任来源。"
+                    className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm focus:outline-none ${isDark ? 'focus:border-blue-500/50' : 'focus:border-red-400'} resize-none`}
+                  />
+                </div>
+              </div>
+              <div>
+                <label className={`block ${textSecondary} text-sm mb-2`}>不处理的问题</label>
+                <textarea
+                  rows={2}
+                  defaultValue="不负责撰写传播文案；不负责渠道投放建议；不生成具体执行方案；不进行风险评估。"
+                  className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm focus:outline-none ${isDark ? 'focus:border-blue-500/50' : 'focus:border-red-400'} resize-none`}
+                />
+              </div>
+              <div className={`flex items-center gap-2 pt-2 border-t ${cardBorder}`}>
+                <button className={`flex items-center gap-2 px-3 py-1.5 ${isDark ? 'bg-blue-500/20 hover:bg-blue-500/30 border border-blue-500/30 text-blue-400' : 'bg-red-100 hover:bg-red-200 border border-red-200 text-red-600'} rounded-lg text-xs transition-colors`}>
+                  <Sparkles className="w-3 h-3" /> AI生成职责
+                </button>
+                <button className={`flex items-center gap-2 px-3 py-1.5 ${btnSecondary} rounded-lg text-xs transition-colors`}>
+                  <Lightbulb className="w-3 h-3" /> AI补全边界
+                </button>
+                <button className={`flex items-center gap-2 px-3 py-1.5 ${btnSecondary} rounded-lg text-xs transition-colors`}>
+                  <AlertCircle className="w-3 h-3" /> AI发现冲突
+                </button>
+              </div>
+            </div>
+          </SectionHeader>
+
+          {/* 模块3：技能配置 */}
+          <SectionHeader
+            title="技能配置"
+            subtitle="定义智能体当前启用的技能及其触发方式"
+            icon={Layers}
+            section="skills"
+          >
+            <div className="space-y-3 pt-2">
+              {skills.map((skill, index) => (
+                <div key={index} className={`p-3 ${inputBg} ${inputBorder} rounded-lg`}>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <div className={`w-8 h-8 rounded ${isDark ? 'bg-purple-500/20' : 'bg-purple-100'} flex items-center justify-center`}>
+                        <Brain className={`w-4 h-4 ${isDark ? 'text-purple-400' : 'text-purple-600'}`} />
+                      </div>
+                      <div>
+                        <p className={`${textPrimary} text-sm font-medium`}>{skill.name}</p>
+                        <p className={`${textMuted} text-xs`}>类型：{skill.type} · 触发：{skill.trigger} · 优先级：{skill.priority}</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <button className={`p-1.5 ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-gray-200'} rounded transition-colors`}>
+                        <Wrench className={`w-4 h-4 ${textSecondary}`} />
+                      </button>
+                      <label className="relative inline-flex items-center cursor-pointer">
+                        <input type="checkbox" className="sr-only peer" defaultChecked={skill.enabled} />
+                        <div className={`w-9 h-5 ${isDark ? 'bg-slate-700' : 'bg-gray-300'} peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all ${isDark ? 'peer-checked:bg-green-600' : 'peer-checked:bg-green-500'}`}></div>
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              ))}
+              <div className={`flex items-center gap-2 pt-2 border-t ${cardBorder}`}>
+                <button className={`flex items-center gap-2 px-3 py-1.5 ${btnSecondary} rounded-lg text-xs transition-colors`}>
+                  <Plus className="w-3 h-3" /> 新增Skill
+                </button>
+                <button className={`flex items-center gap-2 px-3 py-1.5 ${isDark ? 'bg-blue-500/20 hover:bg-blue-500/30 border border-blue-500/30 text-blue-400' : 'bg-red-100 hover:bg-red-200 border border-red-200 text-red-600'} rounded-lg text-xs transition-colors`}>
+                  <Sparkles className="w-3 h-3" /> AI推荐Skill
+                </button>
+                <button className={`flex items-center gap-2 px-3 py-1.5 ${btnSecondary} rounded-lg text-xs transition-colors`}>
+                  <Zap className="w-3 h-3" /> AI生成技能组
+                </button>
+              </div>
+            </div>
+          </SectionHeader>
+
+          {/* 模块4：数据源访问 */}
+          <SectionHeader
+            title="数据源访问"
+            subtitle="定义智能体可读取的知识与系统数据"
+            icon={Database}
+            section="datasource"
+          >
+            <div className="space-y-3 pt-2">
+              {dataSources.map((ds, index) => (
+                <div key={index} className={`p-3 ${inputBg} ${inputBorder} rounded-lg`}>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <div className={`w-8 h-8 rounded flex items-center justify-center ${
+                        ds.status === 'connected' ? (isDark ? 'bg-green-500/20' : 'bg-green-100') : (isDark ? 'bg-slate-500/20' : 'bg-gray-200')
+                      }`}>
+                        <Database className={`w-4 h-4 ${ds.status === 'connected' ? (isDark ? 'text-green-400' : 'text-green-600') : textSecondary}`} />
+                      </div>
+                      <div>
+                        <p className={`${textPrimary} text-sm font-medium`}>{ds.name}</p>
+                        <p className={`${textMuted} text-xs`}>类型：{ds.type} · 权限：{ds.permission} · 调用：{ds.trigger}</p>
+                      </div>
+                    </div>
+                    <span className={`px-2 py-0.5 rounded text-xs ${
+                      ds.status === 'connected'
+                        ? isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-600'
+                        : isDark ? 'bg-slate-500/20 text-slate-400' : 'bg-gray-200 text-gray-500'
+                    }`}>
+                      {ds.status === 'connected' ? '已连接' : '未连接'}
+                    </span>
+                  </div>
+                  <p className={`${textSecondary} text-xs mt-2`}>可访问：{ds.access}</p>
+                </div>
+              ))}
+              <div className={`flex items-center gap-2 pt-2 border-t ${cardBorder}`}>
+                <button className={`flex items-center gap-2 px-3 py-1.5 ${btnSecondary} rounded-lg text-xs transition-colors`}>
+                  <Plus className="w-3 h-3" /> 绑定数据源
+                </button>
+                <button className={`flex items-center gap-2 px-3 py-1.5 ${isDark ? 'bg-blue-500/20 hover:bg-blue-500/30 border border-blue-500/30 text-blue-400' : 'bg-red-100 hover:bg-red-200 border border-red-200 text-red-600'} rounded-lg text-xs transition-colors`}>
+                  <Sparkles className="w-3 h-3" /> AI推荐数据源
+                </button>
+                <button className={`flex items-center gap-2 px-3 py-1.5 ${btnSecondary} rounded-lg text-xs transition-colors`}>
+                  <AlertCircle className="w-3 h-3" /> AI识别缺失
+                </button>
+              </div>
+            </div>
+          </SectionHeader>
+
+          {/* 模块5：功能调用 */}
+          <SectionHeader
+            title="功能调用"
+            subtitle="定义智能体可调配的处理功能与工具能力"
+            icon={Box}
+            section="function"
+          >
+            <div className="space-y-3 pt-2">
+              {functions.map((func, index) => (
+                <div key={index} className={`p-3 ${inputBg} ${inputBorder} rounded-lg`}>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <div className={`w-8 h-8 rounded ${isDark ? 'bg-cyan-500/20' : 'bg-cyan-100'} flex items-center justify-center`}>
+                        <Box className={`w-4 h-4 ${isDark ? 'text-cyan-400' : 'text-cyan-600'}`} />
+                      </div>
+                      <div>
+                        <p className={`${textPrimary} text-sm font-medium`}>{func.name}</p>
+                        <p className={`${textMuted} text-xs`}>类型：{func.type} · 调用：{func.trigger}</p>
+                      </div>
+                    </div>
+                    <label className="relative inline-flex items-center cursor-pointer">
+                      <input type="checkbox" className="sr-only peer" defaultChecked={func.enabled} />
+                      <div className={`w-9 h-5 ${isDark ? 'bg-slate-700' : 'bg-gray-300'} peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all ${isDark ? 'peer-checked:bg-green-600' : 'peer-checked:bg-green-500'}`}></div>
+                    </label>
+                  </div>
+                  <p className={`${textSecondary} text-xs mt-2`}>用途：{func.usage}</p>
+                </div>
+              ))}
+              <div className={`flex items-center gap-2 pt-2 border-t ${cardBorder}`}>
+                <button className={`flex items-center gap-2 px-3 py-1.5 ${btnSecondary} rounded-lg text-xs transition-colors`}>
+                  <Plus className="w-3 h-3" /> 新增功能
+                </button>
+                <button className={`flex items-center gap-2 px-3 py-1.5 ${isDark ? 'bg-blue-500/20 hover:bg-blue-500/30 border border-blue-500/30 text-blue-400' : 'bg-red-100 hover:bg-red-200 border border-red-200 text-red-600'} rounded-lg text-xs transition-colors`}>
+                  <Sparkles className="w-3 h-3" /> AI推荐功能
+                </button>
+                <button className={`flex items-center gap-2 px-3 py-1.5 ${btnSecondary} rounded-lg text-xs transition-colors`}>
+                  <Zap className="w-3 h-3" /> AI检查冗余
+                </button>
+              </div>
+            </div>
+          </SectionHeader>
+
+          {/* 模块6：思考路径 */}
+          <SectionHeader
+            title="思考路径"
+            subtitle="定义智能体处理任务时的默认分析顺序"
+            icon={Route}
+            section="thinking"
+          >
+            <div className="space-y-3 pt-2">
+              {thinkingSteps.map((step) => (
+                <div key={step.step} className={`p-3 ${inputBg} ${inputBorder} rounded-lg`}>
+                  <div className="flex items-start gap-3">
+                    <div className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5 ${
+                      step.step <= 2
+                        ? isDark ? 'bg-green-500 text-white' : 'bg-green-500 text-white'
+                        : isDark ? 'bg-blue-500 text-white' : 'bg-blue-500 text-white'
+                    }`}>
+                      {step.step}
+                    </div>
+                    <div className="flex-1">
+                      <div className="flex items-center justify-between">
+                        <p className={`${textPrimary} text-sm font-medium`}>{step.name}</p>
+                        {step.required && (
+                          <span className={`px-1.5 py-0.5 ${isDark ? 'bg-red-500/20 text-red-400' : 'bg-red-100 text-red-600'} rounded text-[10px]`}>必选</span>
+                        )}
+                      </div>
+                      <p className={`${textSecondary} text-xs mt-1`}>{step.desc}</p>
+                      <div className="flex items-center gap-4 mt-2 text-xs">
+                        <span className={`${textMuted}`}>Skill: <span className={isDark ? 'text-purple-400' : 'text-purple-600'}>{step.skill}</span></span>
+                        <span className={`${textMuted}`}>功能: <span className={isDark ? 'text-cyan-400' : 'text-cyan-600'}>{step.func}</span></span>
+                        <span className={`${textMuted}`}>数据源: <span className={isDark ? 'text-green-400' : 'text-green-600'}>{step.ds}</span></span>
+                      </div>
+                    </div>
+                    <button className={`p-1.5 ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-gray-200'} rounded transition-colors`}>
+                      <Wrench className={`w-4 h-4 ${textSecondary}`} />
+                    </button>
+                  </div>
+                </div>
+              ))}
+              <div className={`flex items-center gap-2 pt-2 border-t ${cardBorder}`}>
+                <button className={`flex items-center gap-2 px-3 py-1.5 ${btnSecondary} rounded-lg text-xs transition-colors`}>
+                  <Plus className="w-3 h-3" /> 新增步骤
+                </button>
+                <button className={`flex items-center gap-2 px-3 py-1.5 ${isDark ? 'bg-blue-500/20 hover:bg-blue-500/30 border border-blue-500/30 text-blue-400' : 'bg-red-100 hover:bg-red-200 border border-red-200 text-red-600'} rounded-lg text-xs transition-colors`}>
+                  <Sparkles className="w-3 h-3" /> AI生成思考路径
+                </button>
+                <button className={`flex items-center gap-2 px-3 py-1.5 ${btnSecondary} rounded-lg text-xs transition-colors`}>
+                  <Route className="w-3 h-3" /> AI优化顺序
+                </button>
+              </div>
+            </div>
+          </SectionHeader>
+
+          {/* 模块7：输出结构 */}
+          <SectionHeader
+            title="输出结构"
+            subtitle="定义对话输出、结构化输出与可复用片段"
+            icon={FileOutput}
+            section="output"
+          >
+            <div className="space-y-4 pt-2">
+              <div className={`p-3 ${isDark ? 'bg-blue-500/10 border border-blue-500/30' : 'bg-red-50 border border-red-200'} rounded-lg`}>
+                <p className={`${isDark ? 'text-blue-400' : 'text-red-600'} text-sm font-medium mb-2`}>A. 对话摘要输出</p>
+                <p className={`${textSecondary} text-xs`}>核心受众结论 · 结论理由摘要</p>
+              </div>
+              <div>
+                <p className={`${isDark ? 'text-cyan-400' : 'text-orange-600'} text-sm font-medium mb-3`}>B. 结构化输出字段</p>
+                <div className="space-y-2">
+                  {outputFields.map((field, index) => (
+                    <div key={index} className={`flex items-center gap-3 p-2 ${inputBg} ${inputBorder} rounded-lg`}>
+                      <input
+                        type="text"
+                        defaultValue={field.name}
+                        className={`flex-1 px-3 py-1.5 ${isDark ? 'bg-slate-800/50' : 'bg-white'} ${inputBorder} rounded ${isDark ? 'text-cyan-400' : 'text-orange-600'} text-sm font-mono focus:outline-none ${isDark ? 'focus:border-blue-500/50' : 'focus:border-red-400'}`}
+                      />
+                      <select className={`px-3 py-1.5 ${isDark ? 'bg-slate-800/50' : 'bg-white'} ${inputBorder} rounded ${textPrimary} text-xs`}>
+                        <option selected={field.type === '文本'}>文本</option>
+                        <option selected={field.type === '数组'}>数组</option>
+                        <option>对象</option>
+                      </select>
+                      <label className="flex items-center gap-2 cursor-pointer">
+                        <span className={`${textSecondary} text-xs`}>{field.required ? '必填' : '可选'}</span>
+                        <input type="checkbox" className="sr-only peer" defaultChecked={field.required} />
+                        <div className={`w-9 h-5 ${isDark ? 'bg-slate-700' : 'bg-gray-300'} peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all ${isDark ? 'peer-checked:bg-blue-600' : 'peer-checked:bg-red-500'}`}></div>
+                      </label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className={`p-3 ${inputBg} ${inputBorder} rounded-lg`}>
+                <p className={`${isDark ? 'text-green-400' : 'text-green-600'} text-sm font-medium mb-2`}>C. 报告片段输出</p>
+                <div className="space-y-2">
+                  <div>
+                    <label className={`${textMuted} text-xs`}>字段名</label>
+                    <input
+                      type="text"
+                      defaultValue="audience_analysis_paragraph"
+                      className={`w-full px-3 py-1.5 ${isDark ? 'bg-slate-800/50' : 'bg-white'} ${inputBorder} rounded ${isDark ? 'text-cyan-400' : 'text-orange-600'} text-sm font-mono focus:outline-none ${isDark ? 'focus:border-blue-500/50' : 'focus:border-red-400'}`}
+                    />
+                  </div>
+                  <div>
+                    <label className={`${textMuted} text-xs`}>用途说明</label>
+                    <input
+                      type="text"
+                      defaultValue={'用于写入正式方案中的"受众分析"段落'}
+                      className={`w-full px-3 py-1.5 ${isDark ? 'bg-slate-800/50' : 'bg-white'} ${inputBorder} rounded ${textPrimary} text-sm focus:outline-none ${isDark ? 'focus:border-blue-500/50' : 'focus:border-red-400'}`}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className={`flex items-center gap-2 pt-2 border-t ${cardBorder}`}>
+                <button className={`flex items-center gap-2 px-3 py-1.5 ${isDark ? 'bg-blue-500/20 hover:bg-blue-500/30 border border-blue-500/30 text-blue-400' : 'bg-red-100 hover:bg-red-200 border border-red-200 text-red-600'} rounded-lg text-xs transition-colors`}>
+                  <Sparkles className="w-3 h-3" /> AI生成输出字段
+                </button>
+                <button className={`flex items-center gap-2 px-3 py-1.5 ${btnSecondary} rounded-lg text-xs transition-colors`}>
+                  <Lightbulb className="w-3 h-3" /> AI补全字段说明
+                </button>
+                <button className={`flex items-center gap-2 px-3 py-1.5 ${btnSecondary} rounded-lg text-xs transition-colors`}>
+                  <Check className="w-3 h-3" /> AI校验完整性
+                </button>
+              </div>
+            </div>
+          </SectionHeader>
+        </div>
+
+        {/* 右侧辅助区 (35%) */}
+        <div className="col-span-4 flex flex-col gap-4 min-h-0 overflow-y-auto pl-2">
+          {/* 卡片1：AI辅助生成 */}
+          <div className={`${isDark ? 'bg-gradient-to-br from-purple-600/20 to-blue-600/20' : 'bg-gradient-to-br from-purple-100 to-blue-100'} backdrop-blur-xl ${isDark ? 'border border-purple-500/30' : 'border border-purple-300'} rounded-xl p-4`}>
+            <h3 className={`${textPrimary} font-semibold mb-3 flex items-center gap-2`}>
+              <Sparkles className={`w-4 h-4 ${isDark ? 'text-purple-400' : 'text-purple-600'}`} />
+              AI辅助生成
+            </h3>
+            <div className="space-y-3">
+              <div>
+                <label className={`block ${textSecondary} text-xs mb-1.5`}>一句话描述</label>
+                <textarea
+                  rows={2}
+                  placeholder="例如：这是一个负责识别宣传任务核心受众并输出画像的分析型智能体..."
+                  className={`w-full px-3 py-2 ${inputBg} ${isDark ? 'border-purple-500/30' : 'border-purple-300'} rounded-lg ${textPrimary} text-xs focus:outline-none ${isDark ? 'focus:border-purple-500/50' : 'focus:border-purple-400'} resize-none`}
+                />
+              </div>
+              <div>
+                <label className={`block ${textSecondary} text-xs mb-1.5`}>示例任务</label>
+                <textarea
+                  rows={2}
+                  placeholder="例如：请分析某青年节宣传活动的核心受众、次级受众及其主要关切..."
+                  className={`w-full px-3 py-2 ${inputBg} ${isDark ? 'border-purple-500/30' : 'border-purple-300'} rounded-lg ${textPrimary} text-xs focus:outline-none ${isDark ? 'focus:border-purple-500/50' : 'focus:border-purple-400'} resize-none`}
+                />
+              </div>
+              <button
+                onClick={handleGenerateConfig}
+                className={`w-full px-4 py-2 ${isDark ? 'bg-purple-600 hover:bg-purple-500' : 'bg-purple-500 hover:bg-purple-400'} text-white rounded-lg text-sm font-medium transition-colors flex items-center justify-center gap-2`}
+              >
+                <Zap className="w-4 h-4" />
+                一键生成配置
+              </button>
+              {showGeneratedConfig && (
+                <div className={`p-3 ${inputBg} ${isDark ? 'border-purple-500/30' : 'border-purple-300'} rounded-lg space-y-2`}>
+                  <p className={`${isDark ? 'text-purple-400' : 'text-purple-600'} text-xs font-medium`}>生成建议：</p>
+                  <div className={`space-y-1 text-xs ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                    <p>• 推荐职责：受众识别与画像输出</p>
+                    <p>• 推荐技能：分层识别、特征抽取</p>
+                    <p>• 推荐数据源：Y系统、宣传知识库</p>
+                    <p>• 推荐思考路径：4步法</p>
+                  </div>
+                  <div className={`flex items-center gap-2 pt-2 border-t ${isDark ? 'border-purple-500/30' : 'border-purple-300'}`}>
+                    <button className={`flex-1 px-3 py-1.5 ${isDark ? 'bg-green-600 hover:bg-green-500' : 'bg-green-500 hover:bg-green-400'} text-white rounded text-xs transition-colors`}>
+                      采纳全部
+                    </button>
+                    <button className={`flex-1 px-3 py-1.5 ${btnSecondary} rounded text-xs transition-colors`}>
+                      逐项插入
+                    </button>
+                    <button className={`px-3 py-1.5 ${btnSecondary} rounded text-xs transition-colors`}>
+                      忽略
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* 卡片2：AI优化建议 */}
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4`}>
+            <h3 className={`${textPrimary} font-semibold mb-3 flex items-center gap-2`}>
+              <Lightbulb className={`w-4 h-4 ${isDark ? 'text-yellow-400' : 'text-yellow-500'}`} />
+              AI优化建议
+            </h3>
+            <div className="space-y-3">
+              {aiOptimizations.map((opt, index) => (
+                <div key={index} className={`p-2 ${isDark ? 'bg-amber-500/10 border border-amber-500/30' : 'bg-amber-50 border border-amber-200'} rounded-lg`}>
+                  <p className={`${isDark ? 'text-slate-300' : 'text-gray-700'} text-xs mb-2`}>{opt.issue}</p>
+                  <div className="flex items-center gap-2">
+                    {opt.canFix && (
+                      <button className={`px-2 py-1 ${btnPrimary} text-white rounded text-xs transition-colors`}>
+                        一键修复
+                      </button>
+                    )}
+                    <button className={`px-2 py-1 ${btnSecondary} rounded text-xs transition-colors`}>
+                      忽略
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* 卡片3：对话试用 */}
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4 flex flex-col`}>
+            <h3 className={`${textPrimary} font-semibold mb-3 flex items-center gap-2`}>
+              <MessageSquare className={`w-4 h-4 ${isDark ? 'text-cyan-400' : 'text-cyan-600'}`} />
+              对话试用
+            </h3>
+            <div className="flex items-center gap-3 mb-3">
+              <div className="flex-1">
+                <label className={`${textMuted} text-xs mb-1`}>模式</label>
+                <select className={`w-full px-2 py-1.5 ${inputBg} ${inputBorder} rounded ${textPrimary} text-xs`}>
+                  <option>问答</option>
+                  <option>任务</option>
+                </select>
+              </div>
+              <div className="flex items-center gap-1">
+                <span className={`${textSecondary} text-xs`}>数据源</span>
+                <label className="relative inline-flex items-center cursor-pointer mx-1">
+                  <input type="checkbox" className="sr-only peer" defaultChecked />
+                  <div className={`w-9 h-5 ${isDark ? 'bg-slate-700' : 'bg-gray-300'} peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all ${isDark ? 'peer-checked:bg-green-600' : 'peer-checked:bg-green-500'}`}></div>
+                </label>
+              </div>
+              <div className="flex items-center gap-1">
+                <span className={`${textSecondary} text-xs`}>功能</span>
+                <label className="relative inline-flex items-center cursor-pointer mx-1">
+                  <input type="checkbox" className="sr-only peer" defaultChecked />
+                  <div className={`w-9 h-5 ${isDark ? 'bg-slate-700' : 'bg-gray-300'} peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all ${isDark ? 'peer-checked:bg-green-600' : 'peer-checked:bg-green-500'}`}></div>
+                </label>
+              </div>
+            </div>
+            <div className={`flex-1 min-h-[180px] max-h-[180px] overflow-y-auto p-3 ${inputBg} ${inputBorder} rounded-lg mb-3 space-y-3`}>
+              {chatMessages.map((msg, index) => (
+                <div key={index} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+                  <div className={`max-w-[85%] p-2.5 rounded-lg text-xs ${
+                    msg.role === 'user'
+                      ? isDark ? 'bg-blue-600 text-white' : 'bg-red-500 text-white'
+                      : isDark ? 'bg-slate-800 text-slate-300' : 'bg-gray-200 text-gray-800'
+                  }`}>
+                    {msg.content}
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={chatInput}
+                onChange={(e) => setChatInput(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && handleSendMessage()}
+                placeholder="请输入问题或任务要求..."
+                className={`flex-1 px-3 py-2 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-xs focus:outline-none ${isDark ? 'focus:border-blue-500/50' : 'focus:border-red-400'}`}
+              />
+              <button
+                onClick={handleSendMessage}
+                className={`px-3 py-2 ${btnPrimary} text-white rounded-lg transition-colors`}
+              >
+                <Send className="w-4 h-4" />
+              </button>
+            </div>
+            <button className={`mt-2 w-full px-3 py-1.5 ${btnSecondary} rounded text-xs transition-colors`}>
+              插入示例任务
+            </button>
+          </div>
+
+          {/* 卡片4：本轮执行详情 */}
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4`}>
+            <h3 className={`${textPrimary} font-semibold mb-3 flex items-center gap-2`}>
+              <Clock className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
+              本轮执行详情
+            </h3>
+            <div className="space-y-3 text-xs">
+              <div>
+                <p className={`${textMuted} mb-1.5`}>调用数据源</p>
+                <div className="flex flex-wrap gap-1">
+                  {executionDetails.dataSources.map((ds) => (
+                    <span key={ds} className={`px-2 py-0.5 ${isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-600'} rounded`}>{ds}</span>
+                  ))}
+                </div>
+              </div>
+              <div>
+                <p className={`${textMuted} mb-1.5`}>启用技能</p>
+                <div className="flex flex-wrap gap-1">
+                  {executionDetails.skills.map((skill) => (
+                    <span key={skill} className={`px-2 py-0.5 ${isDark ? 'bg-purple-500/20 text-purple-400' : 'bg-purple-100 text-purple-600'} rounded`}>{skill}</span>
+                  ))}
+                </div>
+              </div>
+              <div>
+                <p className={`${textMuted} mb-1.5`}>调用功能</p>
+                <div className="flex flex-wrap gap-1">
+                  {executionDetails.functions.map((func) => (
+                    <span key={func} className={`px-2 py-0.5 ${isDark ? 'bg-cyan-500/20 text-cyan-400' : 'bg-cyan-100 text-cyan-600'} rounded`}>{func}</span>
+                  ))}
+                </div>
+              </div>
+              <div>
+                <p className={`${textMuted} mb-1.5`}>输出字段</p>
+                <div className="flex flex-wrap gap-1">
+                  {executionDetails.outputs.map((out) => (
+                    <span key={out} className={`px-2 py-0.5 ${isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-blue-100 text-blue-600'} rounded font-mono`}>{out}</span>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AgentDetail;
diff --git a/web-code/pages/AgentList.tsx b/web-code/pages/AgentList.tsx
new file mode 100644
index 00000000..b0dd8fc2
--- /dev/null
+++ b/web-code/pages/AgentList.tsx
@@ -0,0 +1,404 @@
+// ============================================
+// AgentList.tsx - 智能体列表页面组件
+// ============================================
+// 功能描述：展示系统中所有智能体的列表，支持搜索、筛选、分页等功能
+// 主要特性：
+//   - 智能体卡片展示（名称、描述、模型类型、状态等）
+//   - 支持按类型和状态筛选
+//   - 支持搜索智能体名称
+//   - 分页功能
+//   - 暗黑/亮色主题切换
+//   - 查看、编辑、测试智能体操作
+// ============================================
+
+import React, { useState, useEffect, useRef } from 'react';
+// 导入图标组件，用于界面中的各种图标显示
+import { Plus, Search, Eye, Edit, Play, Pause, Trash2, Bot, ChevronRight, GitBranch } from 'lucide-react';
+// 导入主题上下文，用于获取当前主题（暗黑/亮色）
+import { useTheme } from '../contexts/ThemeContext';
+// 导入页面类型定义，用于页面导航
+import { PageType } from '../components/Sidebar';
+// 导入请求服务，用于与后端 API 交互
+import { requestCrudService } from '@/service/request-axios-service';
+// 导入 TDesign 组件库的加载和分页组件
+import { Loading, Pagination } from 'tdesign-react';
+
+/**
+ * AgentItem - 智能体数据项接口定义
+ * 描述单个智能体的数据结构
+ */
+interface AgentItem {
+  avatarUrl: string;        // 智能体头像 URL
+  createdAt: string;        // 创建时间
+  description: string;      // 智能体描述
+  id: string;               // 智能体唯一标识符
+  modelName: string;        // 使用的模型名称
+  name: string;             // 智能体名称
+  systemPrompt: string;     // 系统提示词
+  userId: string;           // 创建者用户 ID
+  isDraft: boolean;         // 是否为草稿状态
+}
+
+/**
+ * AgentListProps - AgentList 组件属性接口
+ * 定义组件接收的外部属性
+ */
+interface AgentListProps {
+  onViewDetail: (id: string) => void;    // 查看智能体详情的回调函数
+  onNavigate: (page: PageType) => void;  // 页面导航的回调函数
+}
+
+// 定义 API 基础 URL，从环境变量中获取，如果不存在则为空字符串
+const zncmUrl = import.meta.env.VITE_API_BASE_URL || '';
+// 创建请求服务实例，用于后续 API 调用
+const service = requestCrudService;
+
+/**
+ * AgentList - 智能体列表组件
+ * 主组件函数，负责渲染智能体列表页面
+ * @param onViewDetail - 查看详情的回调函数
+ * @param onNavigate - 页面导航的回调函数
+ */
+const AgentList: React.FC<AgentListProps> = ({ onViewDetail, onNavigate }) => {
+  // 获取当前主题配置
+  const { theme } = useTheme();
+  // 判断是否为暗黑模式
+  const isDark = theme === 'dark';
+
+  // 智能体列表数据状态，存储所有智能体信息
+  const [agents, setAgents] = useState<AgentItem[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  // 加载状态，用于显示加载动画
+  const [loading, setLoading] = useState<boolean>(false);
+  // 当前页码，默认为第 1 页
+  const [pageNum, setPageNum] = useState<number>(1);
+  // 每页显示数量，默认为 10 条
+  const [pageSize, setPageSize] = useState<number>(10); // 每页显示 10 条
+  // 数据总数，用于分页组件显示
+  const [total, setTotal] = useState<number>(0);
+  // 使用 ref 存储分页状态，避免组件重新渲染时丢失
+  const state = useRef({
+    pageNum: 1,
+    pageSize: 10
+  });
+
+  // 回车处理
+  const handleKeyDown = async (e) => {
+    if ((e.metaKey || e.ctrlKey || e.shiftKey) && e.key === "Enter") {
+      e.preventDefault();
+    } else if (e.keyCode === 13) {
+      e.preventDefault();
+      await agentListSearch();
+    } else if (e.key === "/") {
+      e.preventDefault();
+    }
+  };
+
+  /**
+   * 根据智能体类型返回对应的标签颜色样式
+   * 根据当前主题（暗黑/亮色）返回不同的颜色配置
+   * @param category - 智能体类型（如 GLM-5、Qwen3.5-27B、叙事生成等）
+   * @returns 返回对应的 CSS 类名，用于标签背景色和文字颜色
+   */
+  const getCategoryColor = (category: string) => {
+    // 暗黑模式下的颜色配置
+    if (isDark) {
+      switch (category) {
+        case 'GLM-5':
+          return 'bg-blue-500/20 text-blue-400';      // 蓝色背景 + 蓝色文字
+        case 'Qwen3.5-27B':
+          return 'bg-cyan-500/20 text-cyan-400';      // 青色背景 + 青色文字
+        case 'Qwen3-32B':
+          return 'bg-purple-500/20 text-purple-400';  // 紫色背景 + 紫色文字
+        case '叙事生成':
+          return 'bg-pink-500/20 text-pink-400';      // 粉色背景 + 粉色文字
+        case '逻辑链构建':
+          return 'bg-amber-500/20 text-amber-400';    // 琥珀色背景 + 琥珀色文字
+        case '风险评估':
+          return 'bg-red-500/20 text-red-400';        // 红色背景 + 红色文字
+        case '方案生成':
+          return 'bg-green-500/20 text-green-400';    // 绿色背景 + 绿色文字
+        default:
+          return 'bg-slate-500/20 text-slate-400';    // 默认灰色
+      }
+    } else {
+      // 亮色模式下的颜色配置，统一使用红色系
+      switch (category) {
+        case 'GLM-5':
+          return 'bg-red-100 text-red-600';
+        case 'Qwen3.5-27B':
+          return 'bg-red-100 text-red-600';
+        case 'Qwen3-32B':
+          return 'bg-red-100 text-red-600';
+        case '叙事生成':
+          return 'bg-red-100 text-red-600';
+        case '逻辑链构建':
+          return 'bg-red-100 text-red-600';
+        case '风险评估':
+          return 'bg-red-100 text-red-600';
+        case '方案生成':
+          return 'bg-red-100 text-red-600';
+        default:
+          return 'bg-gray-100 text-gray-600';         // 默认灰色
+      }
+    }
+  };
+
+  /**
+   * 根据智能体类型返回对应的图标颜色样式
+   * 用于智能体卡片左侧图标的背景色和图标颜色
+   * @param type - 智能体类型
+   * @returns 返回包含背景色(bg)和图标颜色(icon)的对象
+   */
+  const getTypeIconColor = (type: string) => {
+    // 暗黑模式下的图标颜色配置
+    if (isDark) {
+      switch (type) {
+        case 'GLM-5':
+          return { bg: 'bg-blue-500/20', icon: 'text-blue-400' };    // 蓝色系
+        case 'Qwen3.5-27B':
+          return { bg: 'bg-cyan-500/20', icon: 'text-cyan-400' };    // 青色系
+        case 'Qwen3-32B':
+          return { bg: 'bg-pink-500/20', icon: 'text-pink-400' };    // 粉色系
+        case '校验类':
+          return { bg: 'bg-amber-500/20', icon: 'text-amber-400' };  // 琥珀色系
+        case '成稿类':
+          return { bg: 'bg-green-500/20', icon: 'text-green-400' };  // 绿色系
+        default:
+          return { bg: 'bg-slate-500/20', icon: 'text-slate-400' };  // 默认灰色
+      }
+    } else {
+      // 亮色模式下统一使用红色系
+      return { bg: 'bg-red-100', icon: 'text-red-500' };
+    }
+  };
+
+  /**
+   * 获取智能体列表数据
+   * 调用后端 API 获取智能体列表，并更新组件状态
+   * 请求参数包括页码、每页数量和搜索名称
+   */
+  const agentListSearch = async () => {
+    // 构建请求参数对象
+    const parmy = {
+      pageNum: state.current.pageNum,    // 当前页码
+      pageSize: state.current.pageSize,  // 每页显示数量
+      name: searchQuery                            // 搜索名称（当前为空，可扩展）
+    }
+    // 开始加载，显示加载动画
+    setLoading(true);
+    // 调用后端 API 获取智能体列表数据
+    const res = await requestCrudService.post(`${zncmUrl}/agent/expertAgents/list`, parmy);
+    // 加载完成，隐藏加载动画
+    setLoading(false);
+    // 打印响应数据到控制台，用于调试
+    console.log('智能体列表', res);
+    // 解析响应数据
+    const result = res.data;
+    // 更新数据总数，用于分页
+    setTotal(result.total);
+    // 更新智能体列表数据，如果无数据则设置为空数组
+    setAgents(result.records || []);
+
+  }
+
+  /**
+   * 页码变化时的回调函数
+   * 当用户切换页码时触发，更新页码并重新获取数据
+   * @param value - 新的页码值
+   */
+  const pageIndexChange = async (value: number) => {
+    // 更新 ref 中存储的页码值
+    state.current.pageNum = value;
+    // 更新页码状态，触发组件重新渲染
+    setPageNum(value);
+    // 重新获取智能体列表数据
+    await agentListSearch();
+  }
+
+  /**
+   * 每页显示数量变化时的回调函数
+   * 当用户切换每页显示条数时触发，更新每页数量并重新获取数据
+   * @param value - 新的每页显示数量
+   */
+  const pageSizeChange = async (value: number) => {
+    // 更新 ref 中存储的每页显示数量
+    state.current.pageSize = value;
+    // 更新每页显示数量状态，触发组件重新渲染
+    setPageSize(value);
+    // 重新获取智能体列表数据
+    await agentListSearch();
+  }
+
+  /**
+   * 组件挂载时的副作用
+   * 组件首次渲染时自动调用一次获取智能体列表
+   * 依赖数组为空，表示只在组件挂载时执行一次
+   */
+  useEffect(() => {
+    agentListSearch();
+  }, []);
+
+  return (
+    <div className="space-y-6">
+      {/* 页面标题区 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className={`text-2xl font-bold mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>智能体配置管理</h1>
+          <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>统一管理系统中的智能体配置</p>
+        </div>
+        <button className={`flex items-center gap-2 px-4 py-2.5 text-white rounded-lg transition-colors shadow-md ${isDark
+          ? 'bg-blue-600 hover:bg-blue-500'
+          : 'bg-red-600 hover:bg-red-500'
+          }`}>
+          <Plus className="w-4 h-4" />
+          <span className="text-sm font-medium">新建智能体</span>
+        </button>
+      </div>
+
+      {/* 搜索和筛选区 */}
+      <div className="flex items-center gap-4">
+        <div className="relative flex-1 max-w-md">
+          <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${isDark ? 'text-slate-500' : 'text-red-400'}`} />
+          <input
+            type="text"
+            value={searchQuery}
+            onKeyDown={(e) => handleKeyDown(e)}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="搜索智能体名称..."
+            className={`w-full pl-10 pr-4 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 transition-colors ${isDark
+              ? 'bg-slate-800/50 border-blue-800/30 text-white placeholder-slate-500'
+              : 'bg-white border-red-200 text-gray-900 placeholder-red-300'
+              }`}
+          />
+        </div>
+        <button className={`px-4 py-2.5 border rounded-lg text-sm transition-colors ${isDark
+          ? 'bg-slate-800/50 border-blue-800/30 text-slate-300 hover:bg-slate-700/50'
+          : 'bg-white border-red-200 text-gray-700 hover:bg-red-50'
+          }`}>
+          全部类型
+        </button>
+        <button className={`px-4 py-2.5 border rounded-lg text-sm transition-colors ${isDark
+          ? 'bg-slate-800/50 border-blue-800/30 text-slate-300 hover:bg-slate-700/50'
+          : 'bg-white border-red-200 text-gray-700 hover:bg-red-50'
+          }`}>
+          全部状态
+        </button>
+      </div>
+
+      {/* 分类标签 */}
+      <div className="flex items-center gap-3">
+        <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>按类型筛选：</span>
+        {['编排类', '分析类', '叙事类', '校验类', '成稿类'].map((type) => (
+          <button
+            key={type}
+            className={`px-3 py-1.5 border rounded-full text-sm transition-colors ${isDark
+              ? 'bg-slate-800/50 border-blue-800/30 text-slate-300 hover:bg-blue-600/20 hover:border-blue-500/50 hover:text-blue-400'
+              : 'bg-white border-red-200 text-gray-700 hover:bg-red-50 hover:border-red-300 hover:text-red-600'
+              }`}
+          >
+            {type}
+          </button>
+        ))}
+      </div>
+
+      {/* 智能体列表 */}
+      <Loading loading={loading}>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          {agents.map((agent) => {
+            const typeColors = getTypeIconColor(agent.modelName);
+            return (
+              <div
+                key={agent.id}
+                className={`rounded-xl p-5 transition-all duration-300 group cursor-pointer border theme-card ${isDark
+                  ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30 hover:border-blue-500/50'
+                  : 'bg-white border-red-100 hover:border-red-300 hover:shadow-md'
+                  }`}
+                onClick={() => {
+                  onViewDetail(agent.id);
+                  onNavigate('agent-detail');
+                }}
+              >
+                <div className="flex items-start justify-between mb-4">
+                  <div className="flex items-center gap-3">
+                    <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${typeColors.bg}`}>
+                      <Bot className={`w-6 h-6 ${typeColors.icon}`} />
+                    </div>
+                    <div>
+                      <h3 className={`font-semibold text-lg group-hover:text-red-500 transition-colors ${isDark ? 'text-white' : 'text-gray-900'}`}>{agent.name}</h3>
+                      <p className={`text-sm ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{agent.description}</p>
+                    </div>
+                  </div>
+                  <span
+                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${agent.isDraft
+                      ? isDark
+                        ? 'bg-green-500/20 text-green-400'
+                        : 'bg-green-100 text-green-600'
+                      : isDark
+                        ? 'bg-yellow-500/20 text-yellow-400'
+                        : 'bg-yellow-100 text-yellow-600'
+                      }`}
+                  >
+                    <span className={`w-1.5 h-1.5 rounded-full ${agent.isDraft
+                      ? isDark ? 'bg-green-400' : 'bg-green-500'
+                      : isDark ? 'bg-yellow-400' : 'bg-yellow-500'
+                      }`} />
+                    {agent.isDraft ? '启用' : '暂停'}
+                  </span>
+                </div>
+
+                <div className="flex items-center gap-4 mb-4">
+                  <span className={`px-2.5 py-1 rounded-full text-xs font-medium ${getCategoryColor(agent.modelName)}`}>
+                    {agent.modelName}
+                  </span>
+                  {/* <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{agent.description}</span> */}
+                </div>
+
+                <div className={`flex items-center justify-between pt-4 border-t ${isDark ? 'border-blue-800/30' : 'border-red-100'
+                  }`}>
+                  <div className="flex items-center gap-6">
+                    <div className="overflow-hidden text-ellipsis line-clamp-3">
+                      {/* <p className={`text-xs mb-1 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>输入字段</p> */}
+                      <p className={`font-medium ${isDark ? 'text-cyan-400' : 'text-red-600'}`}>{agent.systemPrompt} 个</p>
+                    </div>
+                    {/* <div>
+                    <p className={`text-xs mb-1 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>输出字段</p>
+                    <p className={`font-medium ${isDark ? 'text-green-400' : 'text-red-600'}`}>{agent.outputs} 个</p>
+                  </div> */}
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <button className={`p-2 rounded-lg transition-colors group/btn ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'
+                      }`} title="查看">
+                      <Eye className={`w-4 h-4 ${isDark ? 'text-slate-400 group-hover/btn:text-white' : 'text-red-400 group-hover/btn:text-red-600'}`} />
+                    </button>
+                    <button className={`p-2 rounded-lg transition-colors group/btn ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'
+                      }`} title="编辑">
+                      <Edit className={`w-4 h-4 ${isDark ? 'text-slate-400 group-hover/btn:text-white' : 'text-red-400 group-hover/btn:text-red-600'}`} />
+                    </button>
+                    <button className={`p-2 rounded-lg transition-colors group/btn ${isDark ? 'hover:bg-green-500/20' : 'hover:bg-green-50'
+                      }`} title="测试">
+                      <Play className={`w-4 h-4 ${isDark ? 'text-slate-400 group-hover/btn:text-green-400' : 'text-red-400 group-hover/btn:text-green-600'}`} />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </Loading>
+
+      {/* 分页 */}
+      <div className={`flex items-center justify-between pt-4 ${isDark ? '' : 'border-t border-red-100'}`}>
+        <Pagination
+          total={total}
+          current={pageNum}
+          pageSize={pageSize}
+          onCurrentChange={(page) => pageIndexChange(Number(page))}
+          onPageSizeChange={(size) => pageSizeChange(Number(size))} // 每页数量变化时的回调
+        />
+      </div>
+    </div>
+  );
+};
+
+export default AgentList;
diff --git a/web-code/pages/AgentListExperts.tsx b/web-code/pages/AgentListExperts.tsx
new file mode 100644
index 00000000..40bf80bc
--- /dev/null
+++ b/web-code/pages/AgentListExperts.tsx
@@ -0,0 +1,601 @@
+"use client";
+
+import { toolsCrudService } from "@/service/request-tools-service";
+import {
+  Sparkles,
+  ArrowRight,
+  Plus,
+  Bot,
+  Trash2,
+  Loader2,
+  Pencil,
+  Info,
+  MessageCircle,
+  Eye,
+  EyeOff,
+} from "lucide-react";
+import { useAtomValue } from "jotai";
+
+
+import { useEffect, useRef, useState } from "react";
+import { Link, useNavigate } from 'react-router-dom';
+
+import { toast } from "sonner";
+import { Button, Dialog, Switch } from "tdesign-react";
+import { toolsUser, useChatContext } from "@/contexts/ChatContext";
+interface ExpertAgent {
+  id: number,
+  name: string,
+  avatar_url: string,
+  description: string,
+  system_prompt: string,
+  model_name: string,
+  user_id: string,
+  created_at: string,
+  is_draft: boolean,
+}
+
+interface expert {
+  id: number;
+    name: string;
+    avatar_url: string | null;
+    description: string | null;
+    system_prompt: string;
+    model_name: string | null;
+    user_id: string;
+    created_at: string;
+    is_draft: boolean;
+}
+
+/**
+ * 将纯 SVG 字符串转换为 data URL
+ */
+export const svgToDataUrl = (svg: string) => {
+  const encoded = encodeURIComponent(svg)
+    .replace(/'/g, '%27')
+    .replace(/"/g, '%22');
+  return `data:image/svg+xml;charset=utf-8,${encoded}`;
+}
+
+const backendUrl = import.meta.env.VITE_AIPI_BACKEND_URL || '';
+const service = toolsCrudService
+
+// 专家详情模态框组件
+function ExpertDetailDialog({
+  expert,
+  open,
+  onOpenChange,
+  agentSearch,
+}: {
+  expert: ExpertAgent;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  agentSearch?: () => void;
+}) {
+  const router = useNavigate();
+  const [isDraft, setIsDraft] = useState<boolean>(expert.is_draft || true);
+  const [isUpdating, setIsUpdating] = useState(false);
+
+  const isSvg = expert.avatar_url
+    ? /<svg[\s\S]*<\/svg>/i.test(expert.avatar_url)
+    : false;
+  const avatarSrc =
+    isSvg && expert.avatar_url
+      ? svgToDataUrl(expert.avatar_url)
+      : expert.avatar_url;
+
+  const gradients = [
+    { from: "rose-500", to: "pink-500" },
+    { from: "violet-500", to: "purple-500" },
+    { from: "amber-500", to: "orange-500" },
+    { from: "emerald-500", to: "teal-500" },
+    { from: "blue-500", to: "indigo-500" },
+    { from: "cyan-500", to: "sky-500" },
+  ];
+  const gradient = gradients[expert.id % gradients.length];
+
+  const handleTogglePublished = async (checked: boolean) => {
+    // checked 为 true 表示发布（is_draft = false），checked 为 false 表示草稿（is_draft = true）
+    const newDraftStatus: boolean = !checked;
+    setIsUpdating(true);
+    try {
+      const response = await service.patch(
+        `${backendUrl}/api/v1/expert-agents/${expert.id}`,
+        { is_draft: newDraftStatus }
+      );
+
+      setIsDraft(newDraftStatus);
+      toast.success(newDraftStatus ? "已设为草稿" : "已发布");
+      await agentSearch();
+    } catch (error) {
+      console.error("Toggle publish error:", error);
+      toast.error("操作失败");
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  const handleStartChat = () => {
+    onOpenChange(false);
+    router(`/agents/new-chat?expert_id=${expert.id}`);
+  };
+
+  return (
+    <Dialog
+      visible={open}
+      header="专家详情"
+      width="520px"
+      confirmBtn="保存"
+      cancelBtn="取消"
+      onConfirm={() => onOpenChange(false)}
+      onClose={() => onOpenChange(false)}
+    >
+      <div className="flex flex-col items-center space-y-4 py-4">
+        {/* 头像 */}
+        <div
+          className={`w-20 h-20 rounded-2xl bg-gradient-to-br from-${gradient.from} to-${gradient.to} flex items-center justify-center shadow-lg`}
+        >
+          {avatarSrc ? (
+            <img
+              src={avatarSrc}
+              alt={expert.name}
+              className="w-12 h-12 rounded-xl object-contain"
+            />
+          ) : (
+            <Bot className="w-10 h-10 text-white" />
+          )}
+        </div>
+
+        {/* 名称和描述 */}
+        <div className="text-center">
+          <h3 className="text-xl font-semibold text-gray-900">
+            {expert.name}
+          </h3>
+          {expert.description ? (
+            <p className="mt-2 text-sm text-gray-500">{expert.description}</p>
+          ) : (
+            <p className="mt-2 text-sm text-gray-400 italic">暂无描述</p>
+          )}
+        </div>
+
+        {/* 发布开关 */}
+        <div className="flex items-center justify-between w-full px-4 py-3 bg-gray-50 rounded-xl">
+          <div className="flex items-center gap-2">
+            {isDraft ? (
+              <EyeOff className="w-4 h-4 text-gray-400" />
+            ) : (
+              <Eye className="w-4 h-4 text-gray-600" />
+            )}
+            <span className="text-sm text-gray-700">
+              {isDraft ? "草稿状态" : "已发布"}
+            </span>
+          </div>
+          <Switch
+            value={!isDraft}
+            onChange={handleTogglePublished}
+            disabled={isUpdating}
+          />
+        </div>
+
+        {/* 开始聊天按钮 */}
+        <Button
+          onClick={handleStartChat}
+          className="w-full bg-gradient-to-r border-[bg-gradient-to-r] from-violet-500 to-purple-500 hover:from-violet-600 hover:to-purple-600"
+        >
+          <MessageCircle className="w-4 h-4 mr-2" />
+          开始聊天
+        </Button>
+      </div>
+    </Dialog>
+  );
+}
+
+function ExpertCard({ expert, changeState }: { expert: ExpertAgent, changeState: () => void }) {
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [showDetail, setShowDetail] = useState(false);
+
+  const isSvg = expert.avatar_url
+    ? /<svg[\s\S]*<\/svg>/i.test(expert.avatar_url)
+    : false;
+  // 如果是纯 SVG，转换为 data URL；否则直接使用
+  const avatarSrc =
+    isSvg && expert.avatar_url
+      ? svgToDataUrl(expert.avatar_url)
+      : expert.avatar_url;
+  const router = useNavigate();
+
+  const handleDelete = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!confirm(`确定要删除专家 "${expert.name}" 吗？`)) {
+      return;
+    }
+
+    setIsDeleting(true);
+    try {
+      await service.delete(`${backendUrl}/api/v1/expert-agents/${expert.id}`);
+      await changeState();
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  // Generate consistent gradient based on expert id
+  const gradients = [
+    { from: "rose-500", to: "pink-500", shadow: "rose-500" },
+    { from: "violet-500", to: "purple-500", shadow: "violet-500" },
+    { from: "amber-500", to: "orange-500", shadow: "amber-500" },
+    { from: "emerald-500", to: "teal-500", shadow: "emerald-500" },
+    { from: "blue-500", to: "indigo-500", shadow: "blue-500" },
+    { from: "cyan-500", to: "sky-500", shadow: "cyan-500" },
+  ];
+  const gradient = gradients[expert.id % gradients.length];
+
+  return (
+    <div
+      className="rounded-lg border text-card-foreground shadow-sm group relative h-full cursor-pointer overflow-hidden border-gray-200/60 book-bg-yellow bg-white transition-all duration-300 hover:border-gray-300 hover:shadow-xl hover:shadow-gray-200/40"
+    >
+      <div
+        className="group relative h-full p-[20px] cursor-pointer overflow-hidden border-gray-200/60 book-bg-yellow bg-white transition-all duration-300 hover:border-gray-300 hover:shadow-xl hover:shadow-gray-200/40"
+        onClick={() => router(`/agents/new-chat?expert_id=${expert.id}`)}
+      >
+        {/* Subtle gradient overlay on hover */}
+        <div
+          className={`absolute inset-0 bg-gradient-to-br from-${gradient.from}/5 to-${gradient.to}/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100 pointer-events-none`}
+        />
+
+        <div className="relative pb-4">
+          <div className="flex items-start justify-between">
+            {/* Enhanced icon with animated gradient background */}
+            <div className="relative">
+              <div
+                className={`w-14 h-14 rounded-2xl bg-gradient-to-br from-${gradient.from} to-${gradient.to} flex items-center justify-center shadow-lg shadow-${gradient.shadow}/30 transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl group-hover:shadow-${gradient.shadow}/40`}
+              >
+                {avatarSrc ? (
+                  // avatarSrc 已经是正确的 URL 格式（纯 SVG 已转换为 data URL）
+                  <img
+                    src={avatarSrc}
+                    alt={expert.name}
+                    className="w-9 h-9 rounded-xl object-contain"
+                  />
+                ) : (
+                  <Bot className="w-7 h-7 text-white" />
+                )}
+              </div>
+              {/* Glowing effect on hover */}
+              <div
+                className={`absolute inset-0 rounded-2xl bg-gradient-to-br from-${gradient.from} to-${gradient.to} opacity-0 blur-xl transition-opacity duration-300 group-hover:opacity-30 -z-10`}
+              />
+            </div>
+
+            {/* Enhanced action buttons with larger click areas */}
+            <div className="flex items-center gap-1">
+              {expert.user_id && (
+                <>
+                  <button
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setShowDetail(true);
+                    }}
+                    className="group/btn relative flex h-10 min-w-[40px] items-center justify-center rounded-xl text-gray-400 transition-all duration-300 hover:bg-gray-100 hover:text-gray-600"
+                    title="查看详情"
+                  >
+                    <Info className="w-4 h-4 transition-transform duration-200 group-hover/btn:scale-110" />
+                  </button>
+                  <span
+                    className="group/btn relative flex h-10 min-w-[40px] items-center justify-center rounded-xl text-gray-400 transition-all duration-300 hover:bg-blue-50 hover:text-blue-600"
+                    onClick={(e) => {e.stopPropagation(); router(`/agents/new-expert/${expert.id}`)}}
+                    title="编辑专家"
+                  >
+                    <Pencil className="w-4 h-4 transition-transform duration-200 group-hover/btn:scale-110" />
+                  </span>
+                  <button
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleDelete(e);
+                    }}
+                    disabled={isDeleting}
+                    className="group/btn relative flex h-10 min-w-[40px] items-center justify-center rounded-xl text-gray-400 transition-all duration-300 hover:bg-red-50 hover:text-red-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                    title="删除专家"
+                  >
+                    {isDeleting ? (
+                      <Loader2 className="w-4 h-4 animate-spin" />
+                    ) : (
+                      <>
+                        <Trash2 className="w-4 h-4 transition-transform duration-200 group-hover/btn:scale-110" />
+                      </>
+                    )}
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="relative pb-4 pt-0">
+          {/* 发布状态标识 */}
+          <div className="flex items-center gap-2 mb-2">
+            {/* Enhanced title with better typography */}
+            <div className="text-lg font-semibold text-gray-900 transition-colors duration-200 group-hover:text-gray-900 line-clamp-1 flex-1">
+              {expert.name}
+            </div>
+            {/* 发布状态徽章 */}
+            {!expert.is_draft ? (
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-200">
+                <Eye className="w-3 h-3" />
+                已发布
+              </span>
+            ) : (
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500 border border-gray-200">
+                <EyeOff className="w-3 h-3" />
+                草稿
+              </span>
+            )}
+          </div>
+
+          {/* Enhanced description with better readability */}
+          {expert.description ? (
+            <div className="mt-2 text-sm text-gray-500 leading-relaxed line-clamp-2">
+              {expert.description}
+            </div>
+          ) : (
+            <div className="mt-2 text-sm text-gray-400 italic line-clamp-2">
+              暂无描述
+            </div>
+          )}
+
+          {/* Interactive indicator */}
+          <div className="mt-4 flex items-center gap-2 text-xs font-medium text-gray-400 transition-all duration-300 group-hover:text-gray-600">
+            <span>点击开始对话</span>
+            <ArrowRight className="w-3 h-3 transition-transform duration-300 group-hover:translate-x-1" />
+          </div>
+        </div>
+
+        {/* Bottom accent bar that animates on hover */}
+        <div
+          className={`absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-${gradient.from} to-${gradient.to} transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100 origin-left`}
+        />
+      </div>
+
+      {/* 详情模态框 */}
+      <ExpertDetailDialog
+        expert={expert}
+        open={showDetail}
+        onOpenChange={(open) => {
+          setShowDetail(open);
+          changeState()
+        }}
+      />
+    </div>
+  );
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+      {[1, 2, 3].map((i) => (
+        <div key={i} className="h-48 rounded-2xl bg-gray-100 animate-pulse" />
+      ))}
+    </div>
+  );
+}
+
+export default function ExpertsAgentsPage() {
+  const {toolsUser, setToolsUser} = useChatContext()
+  const router = useNavigate();
+  const [isCreating, setIsCreating] = useState(false);
+  const [llmModels, setLlmModels] = useState<{ id: string; name: string }[]>(
+    []
+  );
+  const [activeTab, setActiveTab] = useState<"mine" | "published">("mine");
+  const queryClient = '';
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const [experts, setExperts] = useState<ExpertAgent[]>([]);
+  const toolsUserData = useRef<toolsUser | null>(null)
+  const filteredExperts = [];
+
+  // 对于"我的专家"，需要根据 user_id 过滤（因为后端返回所有专家）
+  // 获取可用的 LLM 模型列表
+  useEffect(() => {
+    toolsLoginSearch();
+  }, [activeTab]);
+  const toolsLoginSearch = async () => {
+    const formData = new FormData();
+    formData.append('username', 'liuqiang@qq.com');
+    formData.append('password', '123456');
+    formData.append('grant_type', 'password');
+    const res: any = await fetch(`${backendUrl}/auth/jwt/login`, {
+      method: 'POST',
+      headers: {
+        accept: 'application/json',
+      },
+      body: formData,
+    }).then(res => {
+      return res.json();
+    });
+    console.log('登录信息', res);
+    localStorage.setItem('toolToken', res.access_token);
+    await searchMeChange();
+    await expertAgentSearh();
+    await llmSearch();
+  }
+
+  const llmSearch = async () => {
+    const res = await service.get(`${backendUrl}/api/v1/expert-agents/llms`);
+    console.log('模型',res);
+    const result = JSON.parse(JSON.stringify(res));
+    setLlmModels(result)
+  }
+
+  const searchMeChange = async () => {
+    const res = await service.get(`${backendUrl}/users/me`, '');
+    const result =JSON.parse(JSON.stringify(res));
+    toolsUserData.current = result;
+    setToolsUser(result as toolsUser);
+  }
+  const expertAgentSearh = async () => {
+    const param = {
+      is_draft: activeTab === 'mine'
+    }
+    const res: any = await service.post(`${backendUrl}/api/v1/expert-agents/list`, param);
+    console.log('res', res);
+    const result = res.filter(item => item.user_id === toolsUserData.current.id);
+    console.log(result);
+    setExperts(result);
+  }
+  const handleCreateExpert = async () => {
+    setIsCreating(true);
+    try {
+      const request = {
+        name: "未命名专家",
+        model_name: llmModels[0]?.name ?? null,
+        system_prompt: "你是一个专业的助手，能够回答用户的问题。",
+      };
+      const res: any = await service.post(`${backendUrl}/api/v1/expert-agents`, request);
+      // 跳转到编辑页面
+      // router(`/agents/new-expert/${res.id}`);
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Header */}
+      <div
+        className="px-8 py-12 border-b border-gray-100"
+      >
+        <div className="max-w-7xl mx-auto">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-purple-500 flex items-center justify-center shadow-lg shadow-violet-500/20">
+                <Sparkles className="w-5 h-5 text-white" />
+              </div>
+              <h1 className="text-3xl font-semibold text-gray-900">我的专家</h1>
+            </div>
+            <button
+              onClick={handleCreateExpert}
+              disabled={isCreating}
+              className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-900 dark-theme-btn text-white rounded-xl text-sm font-medium hover:bg-gray-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isCreating ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : (
+                <Plus className="w-4 h-4" />
+              )}
+              创建专家
+            </button>
+          </div>
+          <p className="text-gray-500 mb-6">管理你的专属 AI 专家助手</p>
+
+          {/* 标签切换 */}
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => {
+                setActiveTab("mine")
+              }}
+              className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${activeTab === "mine"
+                ? "bg-gray-900 text-white"
+                : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+                }`}
+            >
+              我的专家
+            </button>
+            <button
+              onClick={() => {
+                setActiveTab("published");
+              }}
+              className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${activeTab === "published"
+                ? "bg-gray-900 text-white"
+                : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+                }`}
+            >
+              发布的专家
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Main content */}
+      <div className="px-8 py-12">
+        <div className="max-w-7xl mx-auto">
+          {isLoading ? (
+            <LoadingSkeleton />
+          ) : isError ? (
+            <div className="text-center py-16 text-red-500">
+              <p>加载失败: {"未知错误"}</p>
+            </div>
+          ) : experts.length === 0 ? (
+            <div className="text-center py-16">
+              <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gray-100 flex items-center justify-center">
+                <Bot className="w-8 h-8 text-gray-400" />
+              </div>
+              <h3 className="text-lg font-medium text-gray-900 mb-2">
+                {activeTab === "mine" ? "暂无我的专家" : "暂无已发布的专家"}
+              </h3>
+              <p className="text-gray-500 mb-6">
+                {activeTab === "mine"
+                  ? "创建你的第一个专家助手，开始高效工作"
+                  : "还没有专家发布到广场"}
+              </p>
+              {activeTab === "mine" && (
+                <button
+                  onClick={handleCreateExpert}
+                  disabled={isCreating}
+                  className="inline-flex items-center gap-2 px-6 py-3 bg-gray-900 text-white rounded-xl font-medium hover:bg-gray-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {isCreating ? (
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                  ) : (
+                    <Plus className="w-4 h-4" />
+                  )}
+                  创建第一个专家
+                </button>
+              )}
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+              {experts.map((expert, index) => (
+                <div
+                  key={expert.id}
+                >
+                  <ExpertCard expert={expert} changeState={expertAgentSearh} />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Quick start section */}
+      <div
+        className="px-8 pb-12"
+      >
+        <div className="max-w-7xl mx-auto">
+          <div className="rounded-2xl border border-gray-100 bg-gradient-to-br dark-item-card from-violet-50 to-purple-50 p-8">
+            <div className="flex items-center justify-between">
+              <div>
+                <h3 className="text-xl font-semibold text-gray-900 mb-2">
+                  不确定从哪个开始？
+                </h3>
+                <p className="text-gray-600">
+                  直接开始对话，AI 会自动匹配最合适的专家助手
+                </p>
+              </div>
+              <div
+                className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-violet-500 to-purple-500 text-white rounded-xl font-medium hover:from-violet-600 hover:to-purple-600 hover:shadow-lg hover:shadow-violet-500/25 transition-all duration-300"
+              >
+                开始对话
+                <ArrowRight className="w-4 h-4" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web-code/pages/AgentQA.tsx b/web-code/pages/AgentQA.tsx
new file mode 100644
index 00000000..b56ad821
--- /dev/null
+++ b/web-code/pages/AgentQA.tsx
@@ -0,0 +1,636 @@
+import React, { useState } from 'react';
+import {
+  Send,
+  Search,
+  History,
+  Bot,
+  Sparkles,
+  Database,
+  Layers,
+  FileText,
+  Bookmark,
+  ChevronRight,
+  Cpu,
+  Target,
+  MessageSquare,
+  Zap,
+  CheckCircle,
+} from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+import { PageType } from '../components/Sidebar';
+
+interface Agent {
+  id: string;
+  name: string;
+  category: string;
+  tags: string[];
+  description: string;
+  skills: string[];
+  dataSources: string[];
+  functions: string[];
+  outputFields: string[];
+}
+
+interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: Date;
+  agentName?: string;
+  skills?: string[];
+  dataSources?: string[];
+  functions?: string[];
+  structuredOutput?: Record<string, any>;
+}
+
+const AgentQA: React.FC<{ onNavigate: (page: PageType) => void }> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 模拟智能体列表
+  const agents: Agent[] = [
+    {
+      id: 'audience-agent',
+      name: 'AudienceAgent',
+      category: '受众分析',
+      tags: ['受众分层', '画像抽取', '行为预测'],
+      description: '专业的受众分析智能体，能够识别目标受众特征并生成画像',
+      skills: ['受众分层', '核心受众识别', '画像抽取', '行为预测'],
+      dataSources: ['知识库', 'Y系统', 'A系统'],
+      functions: ['信息抽取器', '标签聚类器', '结构化输出器'],
+      outputFields: ['core_audience', 'key_traits', 'barriers', 'opportunities'],
+    },
+    {
+      id: 'brand-agent',
+      name: 'BrandAgent',
+      category: '品牌分析',
+      tags: ['品牌定位', '传播策略', '调性分析'],
+      description: '专注品牌建设与传播策略的智能体',
+      skills: ['品牌定位分析', '传播路径规划', '品牌调性设计'],
+      dataSources: ['知识库', '行业数据库'],
+      functions: ['品牌诊断器', '策略生成器'],
+      outputFields: ['brand_position', 'communication_path', 'tone_guide'],
+    },
+    {
+      id: 'content-agent',
+      name: 'ContentAgent',
+      category: '内容创作',
+      tags: ['文案撰写', '创意生成', '多形式内容'],
+      description: '智能内容创作助手，支持多种形式的内容生成',
+      skills: ['文案撰写', '创意生成', '多形式内容', 'A/B测试文案'],
+      dataSources: ['知识库', '优秀案例库'],
+      functions: ['文案生成器', '风格适配器', '质量评估器'],
+      outputFields: ['headlines', 'body_copy', 'call_to_action', 'variants'],
+    },
+    {
+      id: 'channel-agent',
+      name: 'ChannelAgent',
+      category: '渠道规划',
+      tags: ['渠道选择', '投放策略', '效果评估'],
+      description: '专业的渠道分析与规划智能体',
+      skills: ['渠道选择', '投放策略规划', '效果评估', '预算分配'],
+      dataSources: ['Y系统', 'A系统', '行业数据'],
+      functions: ['渠道分析器', '投放优化器', 'ROI预测器'],
+      outputFields: ['recommended_channels', 'budget_allocation', 'expected_roi'],
+    },
+  ];
+
+  // 状态
+  const [selectedAgent, setSelectedAgent] = useState<Agent>(agents[0]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputValue, setInputValue] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  // 过滤智能体
+  const filteredAgents = agents.filter(agent =>
+    agent.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    agent.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    agent.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))
+  );
+
+  // 处理发送消息
+  const handleSend = () => {
+    if (!inputValue.trim()) return;
+
+    setIsLoading(true);
+
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: inputValue,
+      timestamp: new Date(),
+    };
+
+    setMessages([...messages, userMessage]);
+    setInputValue('');
+
+    // 模拟AI响应
+    setTimeout(() => {
+      const response: Message = {
+        id: (Date.now() + 1).toString(),
+        role: 'assistant',
+        content: `基于${selectedAgent.name}的专业能力，我来为您分析：\n\n根据您的问题，我识别到核心受众特征如下：\n\n**核心受众识别**：\n- 主要年龄段：25-35岁\n- 职业特征：都市白领\n- 消费能力：中高端\n- 关注点：品质生活、个人成长\n\n**关键特质**：\n1. 追求个性化表达\n2. 注重社交认同\n3. 愿意为品质付费\n\n**可能存在的阻力**：\n- 价格敏感度较高\n- 对品牌忠诚度有限\n\n以上分析是否满足您的需求？如需调整维度，请继续补充信息。`,
+        timestamp: new Date(),
+        agentName: selectedAgent.name,
+        skills: selectedAgent.skills,
+        dataSources: selectedAgent.dataSources,
+        functions: selectedAgent.functions,
+        structuredOutput: {
+          core_audience: '25-35岁都市白领',
+          key_traits: ['追求个性化', '注重社交认同', '品质导向'],
+          barriers: ['价格敏感', '品牌忠诚度有限'],
+          opportunities: ['社交媒体影响大', '口碑传播效果好'],
+        },
+      };
+
+      setMessages(prev => [...prev, response]);
+      setIsLoading(false);
+    }, 1500);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleSaveRecord = () => {
+    alert('问答记录已保存');
+  };
+
+  const handleCollect = () => {
+    alert('已添加到收藏');
+  };
+
+  return (
+    <div className={`h-[calc(100vh-120px)] flex flex-col theme-bg rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+      {/* 顶部工具栏 */}
+      <div className={`flex items-center justify-between px-6 py-4 border-b ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+        <div className="flex items-center gap-4">
+          <h1 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+            智能体问答
+          </h1>
+          <div className={`flex items-center gap-2 px-3 py-1.5 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-red-50'}`}>
+            <Bot className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+            <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+              当前智能体：
+            </span>
+            <span className={`text-sm font-medium ${isDark ? 'text-blue-400' : 'text-red-600'}`}>
+              {selectedAgent.name}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => onNavigate('qa-records')}
+            className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+              isDark
+                ? 'bg-slate-700/50 text-slate-300 hover:bg-slate-600/50'
+                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            }`}
+          >
+            <History className="w-4 h-4" />
+            历史记录
+          </button>
+        </div>
+      </div>
+
+      {/* 主体内容区 */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* 左侧智能体区 */}
+        <div className={`w-72 border-r flex-shrink-0 overflow-y-auto ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'}`}>
+          {/* 智能体搜索 */}
+          <div className="p-4">
+            <div className={`relative ${isDark ? 'bg-slate-700/50' : 'bg-white'} rounded-lg`}>
+              <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="搜索智能体..."
+                className={`w-full pl-10 pr-4 py-2 rounded-lg text-sm focus:outline-none ${
+                  isDark
+                    ? 'bg-transparent text-white placeholder-slate-500'
+                    : 'bg-transparent text-gray-800 placeholder-gray-400'
+                }`}
+              />
+            </div>
+          </div>
+
+          {/* 智能体列表 */}
+          <div className="px-4 pb-4">
+            <h3 className={`text-xs font-medium uppercase tracking-wider mb-3 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+              智能体列表
+            </h3>
+            <div className="space-y-2">
+              {filteredAgents.map((agent) => (
+                <button
+                  key={agent.id}
+                  onClick={() => setSelectedAgent(agent)}
+                  className={`w-full text-left p-3 rounded-lg transition-all ${
+                    selectedAgent.id === agent.id
+                      ? isDark
+                        ? 'bg-blue-600/20 border border-blue-500/50'
+                        : 'bg-red-50 border border-red-200'
+                      : isDark
+                        ? 'bg-slate-700/30 border border-transparent hover:bg-slate-700/50'
+                        : 'bg-white border border-gray-200 hover:bg-gray-50'
+                  }`}
+                >
+                  <div className="flex items-center gap-3">
+                    <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
+                      selectedAgent.id === agent.id
+                        ? isDark
+                          ? 'bg-blue-600 text-white'
+                          : 'bg-red-500 text-white'
+                        : isDark
+                          ? 'bg-slate-600 text-slate-300'
+                          : 'bg-gray-100 text-gray-600'
+                    }`}>
+                      <Bot className="w-5 h-5" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className={`text-sm font-medium truncate ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                        {agent.name}
+                      </div>
+                      <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                        {agent.category}
+                      </div>
+                    </div>
+                    <ChevronRight className={`w-4 h-4 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* 当前智能体能力摘要 */}
+          <div className={`p-4 border-t ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+            <h3 className={`text-xs font-medium uppercase tracking-wider mb-3 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+              能力摘要
+            </h3>
+
+            {/* 核心职责 */}
+            <div className="mb-4">
+              <div className={`flex items-center gap-2 mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                <Target className="w-4 h-4" />
+                <span className="text-xs">核心职责</span>
+              </div>
+              <p className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                {selectedAgent.description}
+              </p>
+            </div>
+
+            {/* 已启用技能 */}
+            <div className="mb-4">
+              <div className={`flex items-center gap-2 mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                <Sparkles className="w-4 h-4" />
+                <span className="text-xs">已启用技能</span>
+              </div>
+              <div className="flex flex-wrap gap-1">
+                {selectedAgent.skills.map((skill, idx) => (
+                  <span
+                    key={idx}
+                    className={`px-2 py-0.5 rounded text-xs ${
+                      isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                    }`}
+                  >
+                    {skill}
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            {/* 可访问数据源 */}
+            <div className="mb-4">
+              <div className={`flex items-center gap-2 mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                <Database className="w-4 h-4" />
+                <span className="text-xs">可访问数据源</span>
+              </div>
+              <div className="flex flex-wrap gap-1">
+                {selectedAgent.dataSources.map((source, idx) => (
+                  <span
+                    key={idx}
+                    className={`px-2 py-0.5 rounded text-xs ${
+                      isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-600'
+                    }`}
+                  >
+                    {source}
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            {/* 可调用功能 */}
+            <div>
+              <div className={`flex items-center gap-2 mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                <Layers className="w-4 h-4" />
+                <span className="text-xs">可调用功能</span>
+              </div>
+              <div className="flex flex-wrap gap-1">
+                {selectedAgent.functions.map((func, idx) => (
+                  <span
+                    key={idx}
+                    className={`px-2 py-0.5 rounded text-xs ${
+                      isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
+                    }`}
+                  >
+                    {func}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 中间对话区 */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {/* 消息列表 */}
+          <div className="flex-1 overflow-y-auto p-4 space-y-4">
+            {messages.length === 0 ? (
+              <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                <Bot className="w-16 h-16 mb-4 opacity-50" />
+                <p className="text-lg">开始与{selectedAgent.name}对话</p>
+                <p className="text-sm mt-2">基于智能体专业能力获取精准回答</p>
+              </div>
+            ) : (
+              messages.map((msg) => (
+                <div key={msg.id} className="space-y-3">
+                  {/* 用户消息 */}
+                  <div className={`flex gap-3 ${msg.role === 'user' ? 'justify-end' : ''}`}>
+                    {msg.role === 'assistant' && (
+                      <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
+                        isDark ? 'bg-blue-600/20 text-blue-400' : 'bg-red-100 text-red-500'
+                      }`}>
+                        <Bot className="w-4 h-4" />
+                      </div>
+                    )}
+                    <div className={`max-w-[70%] rounded-xl px-4 py-3 ${
+                      msg.role === 'user'
+                        ? isDark
+                          ? 'bg-blue-600/30 text-white'
+                          : 'bg-red-500 text-white'
+                        : isDark
+                          ? 'bg-slate-700/50 text-slate-200'
+                          : 'bg-gray-100 text-gray-800'
+                    }`}>
+                      <p className="whitespace-pre-wrap">{msg.content}</p>
+                    </div>
+                    {msg.role === 'user' && (
+                      <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
+                        isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-200 text-gray-600'
+                      }`}>
+                        <div className="w-4 h-4 rounded-full bg-current" />
+                      </div>
+                    )}
+                  </div>
+
+                  {/* 智能体执行详情 */}
+                  {msg.role === 'assistant' && (
+                    <div className={`ml-11 p-3 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-gray-50'}`}>
+                      {/* 本轮启用技能 */}
+                      <div className="mb-3">
+                        <h4 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                          本轮启用技能
+                        </h4>
+                        <div className="flex flex-wrap gap-1">
+                          {msg.skills?.map((skill, idx) => (
+                            <span
+                              key={idx}
+                              className={`px-2 py-0.5 rounded text-xs ${
+                                isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                              }`}
+                            >
+                              {skill}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+
+                      {/* 本轮访问数据源 */}
+                      <div className="mb-3">
+                        <h4 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                          本轮访问数据源
+                        </h4>
+                        <div className="flex flex-wrap gap-1">
+                          {msg.dataSources?.map((source, idx) => (
+                            <span
+                              key={idx}
+                              className={`px-2 py-0.5 rounded text-xs ${
+                                isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-600'
+                              }`}
+                            >
+                              {source}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+
+                      {/* 本轮调用功能 */}
+                      <div className="mb-3">
+                        <h4 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                          本轮调用功能
+                        </h4>
+                        <div className="flex flex-wrap gap-1">
+                          {msg.functions?.map((func, idx) => (
+                            <span
+                              key={idx}
+                              className={`px-2 py-0.5 rounded text-xs ${
+                                isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
+                              }`}
+                            >
+                              {func}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+
+                      {/* 结构化输出 */}
+                      {msg.structuredOutput && (
+                        <div>
+                          <h4 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                            结构化输出
+                          </h4>
+                          <div className={`p-3 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                            {Object.entries(msg.structuredOutput).map(([key, value]) => (
+                              <div key={key} className="flex items-start gap-2 mb-1 last:mb-0">
+                                <span className={`text-xs font-mono ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                                  {key}:
+                                </span>
+                                <span className={`text-xs ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                                  {Array.isArray(value) ? value.join(', ') : String(value)}
+                                </span>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              ))
+            )}
+
+            {isLoading && (
+              <div className="flex gap-3">
+                <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                  isDark ? 'bg-blue-600/20 text-blue-400' : 'bg-red-100 text-red-500'
+                }`}>
+                  <Bot className="w-4 h-4" />
+                </div>
+                <div className={`max-w-[70%] rounded-xl px-4 py-3 ${isDark ? 'bg-slate-700/50' : 'bg-gray-100'}`}>
+                  <div className="flex gap-1">
+                    <div className={`w-2 h-2 rounded-full animate-bounce ${isDark ? 'bg-slate-500' : 'bg-gray-400'}`} style={{ animationDelay: '0ms' }} />
+                    <div className={`w-2 h-2 rounded-full animate-bounce ${isDark ? 'bg-slate-500' : 'bg-gray-400'}`} style={{ animationDelay: '150ms' }} />
+                    <div className={`w-2 h-2 rounded-full animate-bounce ${isDark ? 'bg-slate-500' : 'bg-gray-400'}`} style={{ animationDelay: '300ms' }} />
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* 底部输入区 */}
+          <div className={`border-t p-4 ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+            <div className={`flex items-end gap-3 rounded-xl p-3 ${isDark ? 'bg-slate-700/50' : 'bg-gray-100'}`}>
+              <textarea
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder="输入问题或任务要求..."
+                rows={1}
+                className={`flex-1 bg-transparent resize-none focus:outline-none ${
+                  isDark ? 'text-white placeholder-slate-500' : 'text-gray-800 placeholder-gray-400'
+                }`}
+              />
+
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={handleSaveRecord}
+                  className={`p-2 rounded-lg transition-colors ${
+                    isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
+                  }`}
+                  title="保存记录"
+                >
+                  <Bookmark className="w-5 h-5" />
+                </button>
+
+                <button
+                  onClick={handleCollect}
+                  className={`p-2 rounded-lg transition-colors ${
+                    isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
+                  }`}
+                  title="加入收藏"
+                >
+                  <Bookmark className="w-5 h-5" />
+                </button>
+
+                <button
+                  onClick={handleSend}
+                  disabled={!inputValue.trim() || isLoading}
+                  className={`px-4 py-2 rounded-lg font-medium transition-all flex items-center gap-2 ${
+                    inputValue.trim() && !isLoading
+                      ? isDark
+                        ? 'bg-blue-600 hover:bg-blue-700 text-white'
+                        : 'bg-red-500 hover:bg-red-600 text-white'
+                      : isDark
+                        ? 'bg-slate-600 text-slate-400'
+                        : 'bg-gray-300 text-gray-500'
+                  }`}
+                >
+                  <Send className="w-4 h-4" />
+                  发送
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 右侧执行详情区 */}
+        <div className={`w-72 border-l flex-shrink-0 overflow-y-auto p-4 ${
+          isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
+        }`}>
+          <h3 className={`text-sm font-medium mb-4 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+            执行详情
+          </h3>
+
+          {/* 本轮启用技能 */}
+          <div className="mb-6">
+            <div className={`flex items-center gap-2 mb-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              <Sparkles className="w-4 h-4" />
+              <span className="text-xs font-medium">本轮启用技能</span>
+            </div>
+            <div className={`p-3 rounded-xl ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+              <div className="space-y-2">
+                {selectedAgent.skills.map((skill, idx) => (
+                  <div key={idx} className="flex items-center gap-2">
+                    <CheckCircle className={`w-3 h-3 ${isDark ? 'text-blue-400' : 'text-green-500'}`} />
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>{skill}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* 本轮访问数据源 */}
+          <div className="mb-6">
+            <div className={`flex items-center gap-2 mb-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              <Database className="w-4 h-4" />
+              <span className="text-xs font-medium">本轮访问数据源</span>
+            </div>
+            <div className={`p-3 rounded-xl ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+              <div className="space-y-2">
+                {selectedAgent.dataSources.map((source, idx) => (
+                  <div key={idx} className="flex items-center gap-2">
+                    <Database className={`w-3 h-3 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>{source}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* 本轮调用功能 */}
+          <div className="mb-6">
+            <div className={`flex items-center gap-2 mb-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              <Layers className="w-4 h-4" />
+              <span className="text-xs font-medium">本轮调用功能</span>
+            </div>
+            <div className={`p-3 rounded-xl ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+              <div className="space-y-2">
+                {selectedAgent.functions.map((func, idx) => (
+                  <div key={idx} className="flex items-center gap-2">
+                    <Cpu className={`w-3 h-3 ${isDark ? 'text-purple-400' : 'text-purple-500'}`} />
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>{func}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* 结构化输出字段 */}
+          <div>
+            <div className={`flex items-center gap-2 mb-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              <FileText className="w-4 h-4" />
+              <span className="text-xs font-medium">输出字段</span>
+            </div>
+            <div className={`p-3 rounded-xl ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+              <div className="space-y-2">
+                {selectedAgent.outputFields.map((field, idx) => (
+                  <div key={idx} className="flex items-center gap-2">
+                    <Zap className={`w-3 h-3 ${isDark ? 'text-yellow-400' : 'text-yellow-500'}`} />
+                    <span className={`text-xs font-mono ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>{field}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AgentQA;
diff --git a/web-code/pages/AgentTrial.tsx b/web-code/pages/AgentTrial.tsx
new file mode 100644
index 00000000..38305ab3
--- /dev/null
+++ b/web-code/pages/AgentTrial.tsx
@@ -0,0 +1,532 @@
+import React, { useState } from 'react';
+import {
+  Bot,
+  PlayCircle,
+  ArrowLeft,
+  Send,
+  Clock,
+  CheckCircle,
+  AlertCircle,
+  FileText,
+  Sparkles,
+  User,
+  Settings,
+  Zap,
+  BookOpen,
+  Lightbulb,
+  Target,
+  Users,
+  MessageSquare,
+} from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+import { PageType } from '../components/Sidebar';
+
+interface AgentTrialProps {
+  onNavigate: (page: PageType) => void;
+}
+
+// 单智能体能力卡片
+const agentCapabilities = [
+  {
+    id: 'goal',
+    name: 'GoalAgent',
+    role: '目标分析专家',
+    description: '分析业务目标，提取核心KPI和成功标准',
+    icon: Target,
+    color: 'blue',
+    skills: ['目标分解', 'KPI提取', '优先级排序'],
+    example: '分析这次五四青年节宣传的核心目标是什么？',
+  },
+  {
+    id: 'audience',
+    name: 'AudienceAgent',
+    role: '受众分析专家',
+    description: '定义目标受众画像，分析用户特征和需求',
+    icon: Users,
+    color: 'cyan',
+    skills: ['用户画像', '行为分析', '需求挖掘'],
+    example: '谁是我们的核心受众？他们的特征是什么？',
+  },
+  {
+    id: 'behavior',
+    name: 'BehaviorAgent',
+    role: '行为设计专家',
+    description: '设计用户行为路径和转化漏斗',
+    icon: Sparkles,
+    color: 'green',
+    skills: ['行为设计', '转化路径', '激励策略'],
+    example: '我们希望用户产生什么样的行为？',
+  },
+  {
+    id: 'driver',
+    name: 'DriverAgent',
+    role: '驱动因素专家',
+    description: '分析影响用户决策的核心驱动因素',
+    icon: Lightbulb,
+    color: 'yellow',
+    skills: ['驱动分析', '动机挖掘', '阻力识别'],
+    example: '什么因素会驱动用户做出我们期望的行为？',
+  },
+  {
+    id: 'narrative',
+    name: 'NarrativeAgent',
+    role: '叙事策略专家',
+    description: '设计品牌叙事框架和内容策略',
+    icon: MessageSquare,
+    color: 'purple',
+    skills: ['故事设计', '内容策略', '情感共鸣'],
+    example: '我们应该如何讲述品牌故事？',
+  },
+  {
+    id: 'risk',
+    name: 'RiskAgent',
+    role: '风险评估专家',
+    description: '识别项目风险，制定应对策略',
+    icon: AlertCircle,
+    color: 'red',
+    skills: ['风险识别', '影响评估', '应对策略'],
+    example: '这个方案有哪些潜在风险？',
+  },
+];
+
+const AgentTrial: React.FC<AgentTrialProps> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 主题颜色类
+  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
+  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const textMuted = isDark ? 'text-slate-500' : 'text-gray-500';
+  const btnSecondary = isDark ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300' : 'bg-gray-100 hover:bg-gray-200 border-gray-300 text-gray-700';
+  const btnPrimary = isDark ? 'bg-blue-600 hover:bg-blue-500' : 'bg-red-600 hover:bg-red-500';
+  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-gray-50';
+  const inputBorder = isDark ? 'border-blue-800/30' : 'border-gray-300';
+
+  const [selectedAgent, setSelectedAgent] = useState<string | null>(null);
+  const [inputText, setInputText] = useState('');
+  const [isRunning, setIsRunning] = useState(false);
+  const [conversation, setConversation] = useState<Array<{ role: 'user' | 'agent'; content: string; time: string }>>([]);
+
+  const currentAgent = agentCapabilities.find((a) => a.id === selectedAgent);
+
+  const handleSelectAgent = (agentId: string) => {
+    setSelectedAgent(agentId);
+    const agent = agentCapabilities.find((a) => a.id === agentId);
+    if (agent) {
+      setInputText(agent.example);
+    }
+  };
+
+  const handleSend = async () => {
+    if (!inputText.trim() || !currentAgent) return;
+
+    const now = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
+
+    // 添加用户消息
+    setConversation((prev) => [...prev, { role: 'user', content: inputText, time: now }]);
+    const userInput = inputText;
+    setInputText('');
+    setIsRunning(true);
+
+    // 模拟智能体回复
+    setTimeout(() => {
+      const responseTime = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
+      let response = '';
+
+      switch (currentAgent.id) {
+        case 'goal':
+          response = `【目标分析完成】
+
+基于您的描述，我分析出以下核心目标：
+
+1. **主目标**：提升品牌在Z世代用户中的认知度
+2. **次目标**：建立品牌年轻化形象，增强情感连接
+3. **量化指标**：
+   - 曝光量：500万+
+   - 互动率：5%+
+   - UGC数量：1000+
+
+建议优先聚焦主目标，确保资源集中。`;
+          break;
+        case 'audience':
+          response = `【受众分析完成】
+
+核心受众画像：
+
+**人口特征**
+- 年龄：18-25岁
+- 身份：学生、基层青年工作者
+- 地域：一二线城市为主
+
+**行为特征**
+- 社交媒体重度用户
+- 短视频爱好者
+- 注重真实性和态度
+
+**核心需求**
+- 社交认同与自我表达
+- 归属感与群体认同
+- 性价比与实用性`;
+          break;
+        case 'behavior':
+          response = `【行为设计完成】
+
+目标行为路径：
+
+浏览 → 点赞 → 评论 → 转发 → 创作
+
+**关键转化节点**
+1. 引起注意：内容需有话题性
+2. 激发互动：设置讨论话题
+3. 促进创作：提供UGC模板和激励
+
+**激励机制建议**
+- 虚拟勋章/积分
+- 优质内容曝光
+- 创作者社群归属`;
+          break;
+        case 'driver':
+          response = `【驱动因素分析完成】
+
+核心驱动因素：
+
+1. **社交认同需求**
+   - 年轻人渴望被关注和认可
+   - UGC是自我表达的重要方式
+
+2. **群体归属感**
+   - 青年节与年轻人天然关联
+   - 参与活动获得身份认同
+
+3. **表达欲驱动**
+   - 有态度的品牌内容激发创作
+   - 提供创作框架降低门槛
+
+**主要阻力**
+- 注意力的稀缺
+- 创作成本感知`;
+          break;
+        case 'narrative':
+          response = `【叙事策略完成】
+
+核心叙事框架：
+
+**主题**：真实、有态度的青年故事
+
+**叙事结构**
+1. 讲述真实的人物故事
+2. 引发情感共鸣
+3. 传递品牌价值观
+4. 激发用户参与
+
+**内容类型**
+- 人物专访型
+- 事件记录型
+- 观点表达型
+
+**关键要素**
+- 真实感 > 精致感
+- 态度感 > 说教感
+- 参与感 > 观看感`;
+          break;
+        case 'risk':
+          response = `【风险评估完成】
+
+识别的风险项：
+
+**高风险**
+1. 内容质量不稳定
+   - 风险：UGC质量参差不齐
+   - 对策：建立内容审核机制
+
+**中风险**
+2. 预算控制难度大
+   - 风险：投放效果不可控
+   - 对策：分阶段预算分配
+
+3. 青年群体注意力分散
+   - 风险：话题热度难维持
+   - 对策：多波次内容规划
+
+**建议**：重点关注内容质量风险`;
+          break;
+        default:
+          response = '正在分析中...';
+      }
+
+      setConversation((prev) => [...prev, { role: 'agent', content: response, time: responseTime }]);
+      setIsRunning(false);
+    }, 2000);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 顶部操作栏 */}
+      <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4`}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => onNavigate('agent-list')}
+              className={`flex items-center gap-2 px-3 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}
+            >
+              <ArrowLeft className="w-4 h-4" />
+              返回
+            </button>
+            <div className={`h-8 w-px ${isDark ? 'bg-blue-800/30' : 'bg-red-200'}`} />
+            <div>
+              <h1 className={`${textPrimary} font-bold text-lg`}>单智能体试用</h1>
+              <p className={`${textSecondary} text-sm`}>直接调用单个智能体进行专项分析</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <span className={`px-3 py-1.5 ${isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-700'} rounded-full text-sm font-medium flex items-center gap-1.5`}>
+              <Bot className="w-4 h-4" />
+              能力调用模式
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-12 gap-6">
+        {/* 左侧：智能体选择区 */}
+        <div className="col-span-4">
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4`}>
+            <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+              <Bot className={`w-4 h-4 ${isDark ? 'text-purple-400' : 'text-purple-600'}`} />
+              选择智能体
+            </h3>
+            <div className="space-y-3">
+              {agentCapabilities.map((agent) => {
+                const Icon = agent.icon;
+                const isSelected = selectedAgent === agent.id;
+                return (
+                  <button
+                    key={agent.id}
+                    onClick={() => handleSelectAgent(agent.id)}
+                    className={`w-full p-4 rounded-xl border transition-all text-left ${
+                      isSelected
+                        ? `${isDark ? 'bg-blue-500/20 border-blue-500/50' : 'bg-red-50 border-red-300'}`
+                        : `${inputBg} ${cardBorder} hover:${isDark ? 'border-blue-500/30' : 'border-red-400'}`
+                    }`}
+                  >
+                    <div className="flex items-start gap-3">
+                      <div className={`w-10 h-10 rounded-lg ${isDark ? 'bg-blue-500/20' : 'bg-red-100'} flex items-center justify-center flex-shrink-0`}>
+                        <Icon className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-red-600'}`} />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <p className={`text-sm font-medium ${isSelected ? (isDark ? 'text-blue-400' : 'text-red-600') : textPrimary}`}>
+                          {agent.name}
+                        </p>
+                        <p className={`${textSecondary} text-xs mt-0.5`}>{agent.role}</p>
+                        <p className={`${textMuted} text-xs mt-1 line-clamp-2`}>{agent.description}</p>
+                      </div>
+                    </div>
+                    {isSelected && (
+                      <div className={`mt-3 pt-3 border-t ${isDark ? 'border-blue-500/30' : 'border-red-300'}`}>
+                        <p className={`text-xs ${textSecondary} mb-2`}>核心技能</p>
+                        <div className="flex flex-wrap gap-1">
+                          {agent.skills.map((skill, i) => (
+                            <span
+                              key={i}
+                              className={`px-2 py-0.5 ${isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-red-100 text-red-600'} rounded text-xs`}
+                            >
+                              {skill}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* 使用说明 */}
+          <div className={`mt-4 ${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4`}>
+            <h3 className={`${textPrimary} font-semibold text-sm mb-3 flex items-center gap-2`}>
+              <BookOpen className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-blue-600'}`} />
+              使用说明
+            </h3>
+            <div className={`space-y-2 text-xs ${textSecondary}`}>
+              <div className="flex items-start gap-2">
+                <span className={`font-bold ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>1.</span>
+                <p>选择一个智能体进入专项分析模式</p>
+              </div>
+              <div className="flex items-start gap-2">
+                <span className={`font-bold ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>2.</span>
+                <p>输入您的问题或任务要求</p>
+              </div>
+              <div className="flex items-start gap-2">
+                <span className={`font-bold ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>3.</span>
+                <p>智能体将基于其专业能力给出分析结果</p>
+              </div>
+              <div className="flex items-start gap-2">
+                <span className={`font-bold ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>4.</span>
+                <p>结果可用于后续场景任务或直接参考</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 右侧：对话区 */}
+        <div className="col-span-8">
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl flex flex-col h-[calc(100vh-220px)]`}>
+            {selectedAgent ? (
+              <>
+                {/* 顶部智能体信息 */}
+                <div className={`p-4 border-b ${cardBorder}`}>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      {currentAgent && (
+                        <>
+                          <div className={`w-10 h-10 rounded-lg ${isDark ? 'bg-blue-500/20' : 'bg-red-100'} flex items-center justify-center`}>
+                            <currentAgent.icon className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-red-600'}`} />
+                          </div>
+                          <div>
+                            <p className={`${textPrimary} font-medium`}>{currentAgent.name}</p>
+                            <p className={`${textSecondary} text-xs`}>{currentAgent.role}</p>
+                          </div>
+                        </>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className={`px-2 py-1 ${isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-700'} rounded text-xs flex items-center gap-1`}>
+                        <Zap className="w-3 h-3" />
+                        独立运行中
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* 对话区域 */}
+                <div className="flex-1 overflow-y-auto p-4 space-y-4">
+                  {conversation.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center h-full text-center">
+                      <div className={`w-16 h-16 rounded-full ${isDark ? 'bg-blue-500/20' : 'bg-red-100'} flex items-center justify-center mb-4`}>
+                        <Bot className={`w-8 h-8 ${isDark ? 'text-blue-400' : 'text-red-600'}`} />
+                      </div>
+                      <p className={`${textPrimary} font-medium mb-2`}>开始与 {currentAgent?.name} 对话</p>
+                      <p className={`${textSecondary} text-sm max-w-md`}>
+                        {currentAgent?.description}
+                        <br />
+                        请在下方输入您的问题或任务要求
+                      </p>
+                    </div>
+                  ) : (
+                    conversation.map((msg, i) => (
+                      <div
+                        key={i}
+                        className={`flex gap-3 ${msg.role === 'user' ? 'flex-row-reverse' : ''}`}
+                      >
+                        <div
+                          className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${
+                            msg.role === 'user'
+                              ? (isDark ? 'bg-blue-500/20' : 'bg-red-100')
+                              : (isDark ? 'bg-blue-500/20' : 'bg-red-100')
+                          }`}
+                        >
+                          {msg.role === 'user' ? (
+                            <User className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-600'}`} />
+                          ) : (
+                            <Bot className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-600'}`} />
+                          )}
+                        </div>
+                        <div
+                          className={`max-w-[80%] rounded-2xl px-4 py-3 ${
+                            msg.role === 'user'
+                              ? (isDark ? 'bg-blue-600 text-white' : 'bg-red-600 text-white')
+                              : `${inputBg} ${inputBorder}`
+                          }`}
+                        >
+                          <div
+                            className={`text-xs mb-1 ${
+                              msg.role === 'user' ? (isDark ? 'text-blue-200' : 'text-red-200') : textMuted
+                            }`}
+                          >
+                            {msg.role === 'user' ? '您' : currentAgent?.name} · {msg.time}
+                          </div>
+                          <div className="text-sm whitespace-pre-wrap">{msg.content}</div>
+                        </div>
+                      </div>
+                    ))
+                  )}
+                  {isRunning && (
+                    <div className="flex gap-3">
+                      <div className={`w-8 h-8 rounded-full ${isDark ? 'bg-green-500/20' : 'bg-green-100'} flex items-center justify-center`}>
+                        <Bot className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
+                      </div>
+                      <div className={`${inputBg} ${inputBorder} rounded-2xl px-4 py-3`}>
+                        <div className={`flex items-center gap-2 ${textSecondary} text-sm`}>
+                          <div className={`w-2 h-2 ${isDark ? 'bg-green-400' : 'bg-green-500'} rounded-full animate-pulse`} />
+                          {currentAgent?.name} 正在分析中...
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {/* 输入区域 */}
+                <div className={`p-4 border-t ${cardBorder}`}>
+                  <div className="flex gap-3">
+                    <textarea
+                      value={inputText}
+                      onChange={(e) => setInputText(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' && !e.shiftKey) {
+                          e.preventDefault();
+                          handleSend();
+                        }
+                      }}
+                      placeholder={`输入您要咨询 ${currentAgent?.name} 的问题...`}
+                      rows={3}
+                      className={`flex-1 px-4 py-3 ${inputBg} ${inputBorder} rounded-xl ${textPrimary} text-sm ${textMuted} resize-none focus:outline-none focus:${isDark ? 'border-blue-500/50' : 'border-red-400'}`}
+                    />
+                    <div className="flex flex-col gap-2">
+                      <button
+                        onClick={handleSend}
+                        disabled={!inputText.trim() || isRunning}
+                        className={`px-6 py-3 ${btnPrimary} ${isDark ? 'disabled:bg-slate-700 disabled:text-slate-500' : 'disabled:bg-gray-300 disabled:text-gray-500'} text-white rounded-xl text-sm font-medium transition-colors flex items-center gap-2`}
+                      >
+                        <Send className="w-4 h-4" />
+                        发送
+                      </button>
+                      <button
+                        onClick={() => {
+                          setConversation([]);
+                          setInputText('');
+                        }}
+                        className={`px-4 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}
+                      >
+                        清空
+                      </button>
+                    </div>
+                  </div>
+                  <p className={`${textMuted} text-xs mt-2`}>
+                    按 Enter 发送，Shift+Enter 换行
+                  </p>
+                </div>
+              </>
+            ) : (
+              <div className="flex-1 flex flex-col items-center justify-center text-center p-8">
+                <div className={`w-20 h-20 rounded-full ${isDark ? 'bg-blue-500/20' : 'bg-red-100'} flex items-center justify-center mb-6`}>
+                  <PlayCircle className={`w-10 h-10 ${isDark ? 'text-blue-400' : 'text-red-600'}`} />
+                </div>
+                <h3 className={`${textPrimary} font-semibold text-lg mb-2`}>选择智能体开始试用</h3>
+                <p className={`${textSecondary} text-sm max-w-md`}>
+                  左侧选择一个智能体，即可进入单智能体对话模式。
+                  <br />
+                  该模式适合进行专项分析、快速验证或测试单个智能体能力。
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AgentTrial;
diff --git a/web-code/pages/EvaluationIndexResourceManagement.tsx b/web-code/pages/EvaluationIndexResourceManagement.tsx
new file mode 100644
index 00000000..4ce2f6c3
--- /dev/null
+++ b/web-code/pages/EvaluationIndexResourceManagement.tsx
@@ -0,0 +1,900 @@
+import React, { useState } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import {
+  Scale,
+  Search,
+  Plus,
+  Edit,
+  Trash2,
+  Download,
+  Filter,
+  Folder,
+  FolderOpen,
+  ChevronRight,
+  TrendingUp,
+  TrendingDown,
+  Minus,
+  Target,
+  CheckCircle,
+  AlertCircle,
+  Clock,
+  Star,
+  BarChart3,
+  PieChart,
+  Activity,
+  Settings,
+  Copy,
+  Link2,
+  FileText,
+  User,
+  Calendar,
+} from 'lucide-react';
+import { PageType } from '../components/Sidebar';
+
+interface EvaluationIndex {
+  id: string;
+  name: string;
+  category: string;
+  type: 'quantitative' | 'qualitative' | 'composite';
+  weight: number;
+  description: string;
+  calculationMethod?: string;
+  dataSource?: string;
+  updateFrequency: 'realtime' | 'hourly' | 'daily' | 'weekly' | 'monthly' | 'quarterly';
+  status: 'active' | 'draft' | 'deprecated';
+  createdAt: string;
+  updatedAt: string;
+  author: string;
+  tags: string[];
+  baseline?: number;
+  target?: number;
+  currentValue?: number;
+  trend: 'up' | 'down' | 'stable';
+  relatedIndices: string[];
+}
+
+interface EvaluationSystem {
+  id: string;
+  name: string;
+  description: string;
+  category: string;
+  indices: string[];
+  status: 'active' | 'draft' | 'archived';
+  createdAt: string;
+  updatedAt: string;
+  author: string;
+}
+
+interface EvaluationIndexResourceManagementProps {
+  onNavigate: (page: PageType) => void;
+}
+
+const mockIndices: EvaluationIndex[] = [
+  {
+    id: 'idx-001',
+    name: '网络影响力指数',
+    category: '影响力评估',
+    type: 'composite',
+    weight: 0.25,
+    description: '综合评估目标在网络空间的影响力水平',
+    calculationMethod: '加权平均法',
+    dataSource: '社交媒体数据、新闻报道量',
+    updateFrequency: 'daily',
+    status: 'active',
+    createdAt: '2023-06-15',
+    updatedAt: '2024-03-10',
+    author: '评估组A',
+    tags: ['影响力', '网络', '综合'],
+    baseline: 50,
+    target: 80,
+    currentValue: 72,
+    trend: 'up',
+    relatedIndices: ['idx-002', 'idx-003'],
+  },
+  {
+    id: 'idx-002',
+    name: '传播范围指数',
+    category: '传播效果',
+    type: 'quantitative',
+    weight: 0.20,
+    description: '衡量信息在网络中的传播覆盖范围',
+    calculationMethod: '触达人数 × 地域覆盖率',
+    dataSource: '平台API数据',
+    updateFrequency: 'realtime',
+    status: 'active',
+    createdAt: '2023-07-20',
+    updatedAt: '2024-03-12',
+    author: '评估组B',
+    tags: ['传播', '覆盖', '定量'],
+    baseline: 10000,
+    target: 50000,
+    currentValue: 42500,
+    trend: 'up',
+    relatedIndices: ['idx-001'],
+  },
+  {
+    id: 'idx-003',
+    name: '舆论倾向指数',
+    category: '舆情分析',
+    type: 'qualitative',
+    weight: 0.30,
+    description: '评估网络舆论对目标的整体态度倾向',
+    calculationMethod: '情感分析模型',
+    dataSource: '社交媒体评论、新闻评论区',
+    updateFrequency: 'hourly',
+    status: 'active',
+    createdAt: '2023-08-10',
+    updatedAt: '2024-03-11',
+    author: '评估组A',
+    tags: ['舆情', '情感', '定性'],
+    baseline: 0,
+    target: 75,
+    currentValue: 68,
+    trend: 'stable',
+    relatedIndices: ['idx-001', 'idx-004'],
+  },
+  {
+    id: 'idx-004',
+    name: '响应时效指数',
+    category: '效能评估',
+    type: 'quantitative',
+    weight: 0.15,
+    description: '评估对网络事件的响应速度',
+    calculationMethod: '平均响应时间 (小时)',
+    dataSource: '事件追踪系统',
+    updateFrequency: 'weekly',
+    status: 'active',
+    createdAt: '2023-09-05',
+    updatedAt: '2024-03-08',
+    author: '评估组C',
+    tags: ['时效', '效能', '定量'],
+    baseline: 24,
+    target: 4,
+    currentValue: 6,
+    trend: 'down',
+    relatedIndices: ['idx-005'],
+  },
+  {
+    id: 'idx-005',
+    name: '协调联动指数',
+    category: '协作效能',
+    type: 'composite',
+    weight: 0.10,
+    description: '评估多部门协作的顺畅程度',
+    calculationMethod: '任务完成率 × 沟通效率',
+    dataSource: '协同办公系统',
+    updateFrequency: 'monthly',
+    status: 'draft',
+    createdAt: '2024-01-15',
+    updatedAt: '2024-03-05',
+    author: '评估组D',
+    tags: ['协作', '联动', '综合'],
+    trend: 'stable',
+    relatedIndices: ['idx-004'],
+  },
+  {
+    id: 'idx-006',
+    name: '风险预警准确率',
+    category: '预警效能',
+    type: 'quantitative',
+    weight: 0.25,
+    description: '风险预警的准确程度',
+    calculationMethod: '准确预警数 / 总预警数',
+    dataSource: '预警系统日志',
+    updateFrequency: 'monthly',
+    status: 'active',
+    createdAt: '2023-10-20',
+    updatedAt: '2024-02-28',
+    author: '评估组A',
+    tags: ['预警', '准确率', '定量'],
+    baseline: 60,
+    target: 90,
+    currentValue: 82,
+    trend: 'up',
+    relatedIndices: [],
+  },
+  {
+    id: 'idx-007',
+    name: '策略有效性指数',
+    category: '策略评估',
+    type: 'composite',
+    weight: 0.30,
+    description: '评估所采取措施的有效性',
+    calculationMethod: '多维度加权评估',
+    dataSource: '策略执行数据、效果追踪',
+    updateFrequency: 'quarterly',
+    status: 'active',
+    createdAt: '2023-11-10',
+    updatedAt: '2024-03-01',
+    author: '评估组B',
+    tags: ['策略', '效果', '综合'],
+    baseline: 50,
+    target: 85,
+    currentValue: 78,
+    trend: 'up',
+    relatedIndices: ['idx-001', 'idx-003'],
+  },
+  {
+    id: 'idx-008',
+    name: '信息完整度',
+    category: '数据质量',
+    type: 'quantitative',
+    weight: 0.10,
+    description: '目标画像信息的完整程度',
+    calculationMethod: '已填写字段数 / 总字段数',
+    dataSource: '画像数据库',
+    updateFrequency: 'weekly',
+    status: 'deprecated',
+    createdAt: '2023-05-01',
+    updatedAt: '2024-01-15',
+    author: '评估组C',
+    tags: ['数据', '完整度', '定量'],
+    trend: 'stable',
+    relatedIndices: [],
+  },
+];
+
+const mockSystems: EvaluationSystem[] = [
+  {
+    id: 'sys-001',
+    name: '网络态势综合评估体系',
+    description: '用于评估网络空间整体态势的综合指标体系',
+    category: '态势评估',
+    indices: ['idx-001', 'idx-002', 'idx-003'],
+    status: 'active',
+    createdAt: '2023-06-01',
+    updatedAt: '2024-03-10',
+    author: '评估部',
+  },
+  {
+    id: 'sys-002',
+    name: '响应效能评估体系',
+    description: '评估应急响应和处置效能的指标体系',
+    category: '效能评估',
+    indices: ['idx-004', 'idx-005'],
+    status: 'active',
+    createdAt: '2023-09-01',
+    updatedAt: '2024-03-08',
+    author: '效能组',
+  },
+];
+
+const typeLabels: Record<EvaluationIndex['type'], string> = {
+  quantitative: '定量',
+  qualitative: '定性',
+  composite: '综合',
+};
+
+const typeColors: Record<EvaluationIndex['type'], string> = {
+  quantitative: 'bg-blue-500/20 text-blue-400',
+  qualitative: 'bg-purple-500/20 text-purple-400',
+  composite: 'bg-orange-500/20 text-orange-400',
+};
+
+const statusColors: Record<EvaluationIndex['status'], { bg: string; text: string; label: string }> = {
+  active: { bg: 'bg-green-500/20', text: 'text-green-400', label: '使用中' },
+  draft: { bg: 'bg-yellow-500/20', text: 'text-yellow-400', label: '草稿' },
+  deprecated: { bg: 'bg-gray-500/20', text: 'text-gray-400', label: '已废弃' },
+};
+
+const frequencyLabels: Record<EvaluationIndex['updateFrequency'], string> = {
+  realtime: '实时',
+  hourly: '每小时',
+  daily: '每日',
+  weekly: '每周',
+  monthly: '每月',
+  quarterly: '每季度',
+};
+
+const trendIcons: Record<EvaluationIndex['trend'], React.ReactNode> = {
+  up: <TrendingUp className="w-4 h-4 text-green-400" />,
+  down: <TrendingDown className="w-4 h-4 text-red-400" />,
+  stable: <Minus className="w-4 h-4 text-gray-400" />,
+};
+
+const categories = ['全部', '影响力评估', '传播效果', '舆情分析', '效能评估', '协作效能', '预警效能', '策略评估', '数据质量'];
+
+const EvaluationIndexResourceManagement: React.FC<EvaluationIndexResourceManagementProps> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  const [viewMode, setViewMode] = useState<'index' | 'system'>('index');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('全部');
+  const [selectedType, setSelectedType] = useState<string>('all');
+  const [selectedStatus, setSelectedStatus] = useState<string>('all');
+  const [selectedIndex, setSelectedIndex] = useState<EvaluationIndex | null>(null);
+  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set(['影响力评估', '传播效果', '舆情分析']));
+
+  const filteredIndices = mockIndices.filter(index => {
+    const matchesSearch = index.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      index.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      index.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()));
+    const matchesCategory = selectedCategory === '全部' || index.category === selectedCategory;
+    const matchesType = selectedType === 'all' || index.type === selectedType;
+    const matchesStatus = selectedStatus === 'all' || index.status === selectedStatus;
+    return matchesSearch && matchesCategory && matchesType && matchesStatus;
+  });
+
+  const stats = {
+    total: mockIndices.length,
+    active: mockIndices.filter(i => i.status === 'active').length,
+    draft: mockIndices.filter(i => i.status === 'draft').length,
+    deprecated: mockIndices.filter(i => i.status === 'deprecated').length,
+  };
+
+  const groupedIndices = filteredIndices.reduce((acc, index) => {
+    if (!acc[index.category]) {
+      acc[index.category] = [];
+    }
+    acc[index.category].push(index);
+    return acc;
+  }, {} as Record<string, EvaluationIndex[]>);
+
+  const toggleCategory = (category: string) => {
+    setExpandedCategories(prev => {
+      const next = new Set(prev);
+      if (next.has(category)) {
+        next.delete(category);
+      } else {
+        next.add(category);
+      }
+      return next;
+    });
+  };
+
+  const calculateProgress = (index: EvaluationIndex) => {
+    if (!index.baseline || !index.target || !index.currentValue) return null;
+    const progress = ((index.currentValue - index.baseline) / (index.target - index.baseline)) * 100;
+    return Math.min(Math.max(progress, 0), 100);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 页面标题 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className={`p-2 rounded-lg ${isDark ? 'bg-amber-500/20' : 'bg-amber-100'}`}>
+            <Scale className={`w-6 h-6 ${isDark ? 'text-amber-400' : 'text-amber-600'}`} />
+          </div>
+          <div>
+            <h1 className={`text-2xl font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              评估指标体系资源管理
+            </h1>
+            <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              管理和维护评估指标库与指标体系
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          <button
+            className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all ${
+              isDark
+                ? 'bg-slate-700 hover:bg-slate-600 text-white'
+                : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
+            }`}
+          >
+            <Download className="w-4 h-4" />
+            导出
+          </button>
+          <button
+            className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all ${
+              isDark
+                ? 'bg-amber-600 hover:bg-amber-500 text-white'
+                : 'bg-amber-500 hover:bg-amber-600 text-white'
+            }`}
+          >
+            <Plus className="w-4 h-4" />
+            添加指标
+          </button>
+        </div>
+      </div>
+
+      {/* 统计卡片 */}
+      <div className="grid grid-cols-4 gap-4">
+        <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-amber-800/30' : 'border-amber-100'}`}>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>指标总数</p>
+              <p className={`text-2xl font-semibold mt-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>{stats.total}</p>
+            </div>
+            <div className={`p-3 rounded-lg ${isDark ? 'bg-amber-500/20' : 'bg-amber-50'}`}>
+              <Scale className={`w-6 h-6 ${isDark ? 'text-amber-400' : 'text-amber-500'}`} />
+            </div>
+          </div>
+        </div>
+        <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-green-800/30' : 'border-green-100'}`}>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>使用中</p>
+              <p className={`text-2xl font-semibold mt-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>{stats.active}</p>
+            </div>
+            <div className={`p-3 rounded-lg bg-green-500/20`}>
+              <CheckCircle className="w-6 h-6 text-green-400" />
+            </div>
+          </div>
+        </div>
+        <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-yellow-800/30' : 'border-yellow-100'}`}>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>草稿</p>
+              <p className={`text-2xl font-semibold mt-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>{stats.draft}</p>
+            </div>
+            <div className={`p-3 rounded-lg bg-yellow-500/20`}>
+              <Edit className="w-6 h-6 text-yellow-400" />
+            </div>
+          </div>
+        </div>
+        <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-gray-700' : 'border-gray-200'}`}>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>已废弃</p>
+              <p className={`text-2xl font-semibold mt-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>{stats.deprecated}</p>
+            </div>
+            <div className={`p-3 rounded-lg bg-gray-500/20`}>
+              <AlertCircle className="w-6 h-6 text-gray-400" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 视图切换和筛选栏 */}
+      <div className="space-y-4">
+        {/* 视图切换 */}
+        <div className={`flex items-center rounded-lg p-1 w-fit ${isDark ? 'bg-slate-800/50' : 'bg-gray-100'}`}>
+          <button
+            onClick={() => setViewMode('index')}
+            className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
+              viewMode === 'index'
+                ? isDark ? 'bg-amber-500/20 text-amber-400' : 'bg-white text-amber-600 shadow-sm'
+                : isDark ? 'text-slate-400' : 'text-gray-500'
+            }`}
+          >
+            <Scale className="w-4 h-4 inline mr-2" />
+            指标管理
+          </button>
+          <button
+            onClick={() => setViewMode('system')}
+            className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
+              viewMode === 'system'
+                ? isDark ? 'bg-amber-500/20 text-amber-400' : 'bg-white text-amber-600 shadow-sm'
+                : isDark ? 'text-slate-400' : 'text-gray-500'
+            }`}
+          >
+            <BarChart3 className="w-4 h-4 inline mr-2" />
+            体系管理
+          </button>
+        </div>
+
+        {/* 筛选栏 */}
+        <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-amber-800/30' : 'border-amber-100'}`}>
+          <div className="flex items-center gap-4 flex-wrap">
+            {/* 搜索框 */}
+            <div className="flex-1 min-w-[200px] relative">
+              <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
+              <input
+                type="text"
+                placeholder="搜索指标名称、描述或标签..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className={`w-full pl-10 pr-4 py-2 rounded-lg border transition-all ${
+                  isDark
+                    ? 'bg-slate-900/50 border-slate-700 text-white placeholder-slate-500 focus:border-amber-500'
+                    : 'bg-gray-50 border-gray-200 text-gray-900 placeholder-gray-400 focus:border-amber-400'
+                }`}
+              />
+            </div>
+
+            {/* 分类筛选 */}
+            <div className="flex items-center gap-2">
+              <Filter className={`w-4 h-4 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
+              <select
+                value={selectedCategory}
+                onChange={(e) => setSelectedCategory(e.target.value)}
+                className={`px-3 py-2 rounded-lg border transition-all ${
+                  isDark
+                    ? 'bg-slate-900/50 border-slate-700 text-white'
+                    : 'bg-gray-50 border-gray-200 text-gray-900'
+                }`}
+              >
+                {categories.map(cat => (
+                  <option key={cat} value={cat}>{cat}</option>
+                ))}
+              </select>
+            </div>
+
+            {/* 类型筛选 */}
+            <select
+              value={selectedType}
+              onChange={(e) => setSelectedType(e.target.value)}
+              className={`px-3 py-2 rounded-lg border transition-all ${
+                isDark
+                  ? 'bg-slate-900/50 border-slate-700 text-white'
+                  : 'bg-gray-50 border-gray-200 text-gray-900'
+              }`}
+            >
+              <option value="all">全部类型</option>
+              <option value="quantitative">定量</option>
+              <option value="qualitative">定性</option>
+              <option value="composite">综合</option>
+            </select>
+
+            {/* 状态筛选 */}
+            <select
+              value={selectedStatus}
+              onChange={(e) => setSelectedStatus(e.target.value)}
+              className={`px-3 py-2 rounded-lg border transition-all ${
+                isDark
+                  ? 'bg-slate-900/50 border-slate-700 text-white'
+                  : 'bg-gray-50 border-gray-200 text-gray-900'
+              }`}
+            >
+              <option value="all">全部状态</option>
+              <option value="active">使用中</option>
+              <option value="draft">草稿</option>
+              <option value="deprecated">已废弃</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      {/* 指标列表 */}
+      {viewMode === 'index' ? (
+        <div className={`rounded-xl overflow-hidden border ${isDark ? 'bg-slate-800/50 border-amber-800/30' : 'bg-white border-amber-100'}`}>
+          {Object.entries(groupedIndices).map(([category, indices]) => (
+            <div key={category} className="border-b border-gray-200 dark:border-slate-700 last:border-b-0">
+              {/* 分类标题 */}
+              <button
+                onClick={() => toggleCategory(category)}
+                className={`w-full px-4 py-3 flex items-center justify-between ${
+                  isDark ? 'hover:bg-slate-700/50' : 'hover:bg-gray-50'
+                } transition-colors`}
+              >
+                <div className="flex items-center gap-3">
+                  {expandedCategories.has(category) ? (
+                    <FolderOpen className={`w-5 h-5 ${isDark ? 'text-amber-400' : 'text-amber-500'}`} />
+                  ) : (
+                    <Folder className={`w-5 h-5 ${isDark ? 'text-amber-400' : 'text-amber-500'}`} />
+                  )}
+                  <span className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                    {category}
+                  </span>
+                  <span className={`px-2 py-0.5 rounded-full text-xs ${
+                    isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-100 text-gray-600'
+                  }`}>
+                    {indices.length}个指标
+                  </span>
+                </div>
+                <ChevronRight className={`w-4 h-4 transition-transform ${expandedCategories.has(category) ? 'rotate-90' : ''} ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
+              </button>
+
+              {/* 指标列表 */}
+              {expandedCategories.has(category) && (
+                <div className={`${isDark ? 'bg-slate-900/30' : 'bg-gray-50/50'}`}>
+                  {indices.map((index, idx) => (
+                    <div
+                      key={index.id}
+                      className={`px-4 py-4 cursor-pointer transition-colors ${
+                        isDark ? 'hover:bg-slate-700/50' : 'hover:bg-white'
+                      } ${idx !== indices.length - 1 ? 'border-b border-gray-200 dark:border-slate-700/50' : ''}`}
+                      onClick={() => setSelectedIndex(index)}
+                    >
+                      <div className="flex items-start justify-between">
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-3 mb-2">
+                            <div className={`p-2 rounded-lg ${typeColors[index.type]}`}>
+                              {index.type === 'quantitative' ? <BarChart3 className="w-4 h-4" /> :
+                               index.type === 'qualitative' ? <PieChart className="w-4 h-4" /> :
+                               <Activity className="w-4 h-4" />}
+                            </div>
+                            <div>
+                              <h3 className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                                {index.name}
+                              </h3>
+                              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                                {index.description}
+                              </p>
+                            </div>
+                          </div>
+
+                          {/* 进度条 */}
+                          {index.currentValue !== undefined && index.baseline !== undefined && index.target !== undefined && (
+                            <div className="mt-3">
+                              <div className="flex items-center justify-between mb-1">
+                                <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                                  当前值: {index.currentValue}
+                                </span>
+                                <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                                  目标: {index.target}
+                                </span>
+                              </div>
+                              <div className="h-2 bg-gray-200 dark:bg-slate-700 rounded-full overflow-hidden">
+                                <div
+                                  className={`h-full transition-all ${
+                                    calculateProgress(index)! >= 100 ? 'bg-green-500' :
+                                    calculateProgress(index)! >= 50 ? 'bg-amber-500' : 'bg-red-500'
+                                  }`}
+                                  style={{ width: `${calculateProgress(index)}%` }}
+                                />
+                              </div>
+                            </div>
+                          )}
+                        </div>
+
+                        <div className="flex items-center gap-3 ml-4">
+                          <div className="text-right">
+                            <div className="flex items-center gap-2">
+                              <span className={`px-2 py-1 rounded text-xs ${typeColors[index.type]}`}>
+                                {typeLabels[index.type]}
+                              </span>
+                              <span className={`px-2 py-1 rounded text-xs ${statusColors[index.status].bg} ${statusColors[index.status].text}`}>
+                                {statusColors[index.status].label}
+                              </span>
+                            </div>
+                            <div className="flex items-center gap-2 mt-1 justify-end">
+                              {index.trend && trendIcons[index.trend]}
+                              <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                                {index.updateFrequency === 'realtime' ? '实时' :
+                                 index.updateFrequency === 'daily' ? '每日' :
+                                 index.updateFrequency === 'weekly' ? '每周' :
+                                 index.updateFrequency === 'monthly' ? '每月' : '每季度'}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="flex items-center gap-4 mt-3 pt-3 border-t border-gray-200 dark:border-slate-700/50">
+                        <div className="flex items-center gap-1 text-sm">
+                          <Star className={`w-4 h-4 ${isDark ? 'text-amber-400' : 'text-amber-500'}`} />
+                          <span className={isDark ? 'text-slate-400' : 'text-gray-500'}>权重: {index.weight * 100}%</span>
+                        </div>
+                        <div className="flex flex-wrap gap-2">
+                          {index.tags.slice(0, 3).map(tag => (
+                            <span
+                              key={tag}
+                              className={`px-2 py-0.5 rounded text-xs ${
+                                isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-100 text-gray-600'
+                              }`}
+                            >
+                              {tag}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      ) : (
+        /* 体系管理视图 */
+        <div className="grid grid-cols-2 gap-4">
+          {mockSystems.map(system => (
+            <div
+              key={system.id}
+              className={`p-5 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-amber-800/30' : 'border-amber-100'}`}
+            >
+              <div className="flex items-start justify-between mb-3">
+                <div className="flex items-center gap-3">
+                  <div className={`p-3 rounded-lg ${isDark ? 'bg-amber-500/20' : 'bg-amber-50'}`}>
+                    <BarChart3 className={`w-6 h-6 ${isDark ? 'text-amber-400' : 'text-amber-500'}`} />
+                  </div>
+                  <div>
+                    <h3 className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                      {system.name}
+                    </h3>
+                    <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                      {system.category}
+                    </p>
+                  </div>
+                </div>
+                <span className={`px-2 py-1 rounded text-xs font-medium ${
+                  system.status === 'active' ? 'bg-green-500/20 text-green-400' :
+                  system.status === 'draft' ? 'bg-yellow-500/20 text-yellow-400' :
+                  'bg-gray-500/20 text-gray-400'
+                }`}>
+                  {system.status === 'active' ? '使用中' : system.status === 'draft' ? '草稿' : '已归档'}
+                </span>
+              </div>
+              <p className={`text-sm mb-4 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                {system.description}
+              </p>
+              <div className="flex items-center justify-between pt-3 border-t border-gray-200 dark:border-slate-700">
+                <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                  包含 {system.indices.length} 个指标
+                </span>
+                <div className="flex items-center gap-2">
+                  <button className={`p-1.5 rounded-lg ${isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}>
+                    <Edit className="w-4 h-4" />
+                  </button>
+                  <button className={`p-1.5 rounded-lg ${isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}>
+                    <Copy className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* 指标详情弹窗 */}
+      {selectedIndex && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50" onClick={() => setSelectedIndex(null)}>
+          <div
+            className={`w-full max-w-3xl rounded-2xl ${isDark ? 'bg-slate-800' : 'bg-white'} shadow-xl max-h-[90vh] overflow-y-auto`}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="sticky top-0 p-6 border-b ${isDark ? 'border-slate-700 bg-slate-800' : 'border-gray-200 bg-white'}">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <div className={`p-3 rounded-lg ${typeColors[selectedIndex.type]}`}>
+                    {selectedIndex.type === 'quantitative' ? <BarChart3 className="w-5 h-5" /> :
+                     selectedIndex.type === 'qualitative' ? <PieChart className="w-5 h-5" /> :
+                     <Activity className="w-5 h-5" />}
+                  </div>
+                  <div>
+                    <div className="flex items-center gap-2">
+                      <h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                        {selectedIndex.name}
+                      </h2>
+                      <span className={`px-2 py-0.5 rounded text-xs ${typeColors[selectedIndex.type]}`}>
+                        {typeLabels[selectedIndex.type]}
+                      </span>
+                    </div>
+                    <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                      {selectedIndex.category}
+                    </p>
+                  </div>
+                </div>
+                <button
+                  onClick={() => setSelectedIndex(null)}
+                  className={`p-2 rounded-lg ${isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}
+                >
+                  <ChevronRight className="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+
+            <div className="p-6 space-y-6">
+              <div>
+                <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-2`}>指标描述</p>
+                <p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedIndex.description}</p>
+              </div>
+
+              {selectedIndex.calculationMethod && (
+                <div className={`p-4 rounded-lg ${isDark ? 'bg-slate-900/50' : 'bg-gray-50'}`}>
+                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>计算方法</p>
+                  <p className={isDark ? 'text-white' : 'text-gray-700'}>{selectedIndex.calculationMethod}</p>
+                </div>
+              )}
+
+              {selectedIndex.dataSource && (
+                <div>
+                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>数据来源</p>
+                  <p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedIndex.dataSource}</p>
+                </div>
+              )}
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>权重</p>
+                  <p className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                    {selectedIndex.weight * 100}%
+                  </p>
+                </div>
+                <div>
+                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>更新频率</p>
+                  <p className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                    {frequencyLabels[selectedIndex.updateFrequency]}
+                  </p>
+                </div>
+                <div>
+                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>状态</p>
+                  <span className={`px-2 py-1 rounded text-xs font-medium ${statusColors[selectedIndex.status].bg} ${statusColors[selectedIndex.status].text}`}>
+                    {statusColors[selectedIndex.status].label}
+                  </span>
+                </div>
+                <div>
+                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>趋势</p>
+                  <div className="flex items-center gap-2">
+                    {trendIcons[selectedIndex.trend]}
+                    <span className={isDark ? 'text-white' : 'text-gray-900'}>
+                      {selectedIndex.trend === 'up' ? '上升' : selectedIndex.trend === 'down' ? '下降' : '稳定'}
+                    </span>
+                  </div>
+                </div>
+                {selectedIndex.baseline !== undefined && (
+                  <div>
+                    <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>基线值</p>
+                    <p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedIndex.baseline}</p>
+                  </div>
+                )}
+                {selectedIndex.target !== undefined && (
+                  <div>
+                    <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>目标值</p>
+                    <p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedIndex.target}</p>
+                  </div>
+                )}
+                {selectedIndex.currentValue !== undefined && (
+                  <div>
+                    <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>当前值</p>
+                    <p className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>{selectedIndex.currentValue}</p>
+                  </div>
+                )}
+                <div>
+                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>作者</p>
+                  <p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedIndex.author}</p>
+                </div>
+                <div>
+                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>更新时间</p>
+                  <p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedIndex.updatedAt}</p>
+                </div>
+              </div>
+
+              <div>
+                <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-2`}>标签</p>
+                <div className="flex flex-wrap gap-2">
+                  {selectedIndex.tags.map(tag => (
+                    <span
+                      key={tag}
+                      className={`px-3 py-1 rounded-full text-sm ${
+                        isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-100 text-gray-600'
+                      }`}
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+
+              {selectedIndex.relatedIndices.length > 0 && (
+                <div>
+                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-2`}>关联指标</p>
+                  <div className="flex flex-wrap gap-2">
+                    {selectedIndex.relatedIndices.map(relatedId => {
+                      const related = mockIndices.find(i => i.id === relatedId);
+                      return related ? (
+                        <span
+                          key={relatedId}
+                          className={`px-3 py-1 rounded-full text-sm cursor-pointer ${
+                            isDark ? 'bg-amber-500/20 text-amber-400' : 'bg-amber-50 text-amber-600'
+                          }`}
+                        >
+                          {related.name}
+                        </span>
+                      ) : null;
+                    })}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className={`p-6 border-t ${isDark ? 'border-slate-700' : 'border-gray-200'} flex justify-end gap-3`}>
+              <button
+                className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+                  isDark ? 'bg-slate-700 hover:bg-slate-600 text-white' : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
+                }`}
+              >
+                <Download className="w-4 h-4 inline mr-2" />
+                导出
+              </button>
+              <button
+                className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+                  isDark ? 'bg-amber-600 hover:bg-amber-500 text-white' : 'bg-amber-500 hover:bg-amber-600 text-white'
+                }`}
+              >
+                <Edit className="w-4 h-4 inline mr-2" />
+                编辑
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default EvaluationIndexResourceManagement;
diff --git a/web-code/pages/FinalPlan.tsx b/web-code/pages/FinalPlan.tsx
new file mode 100644
index 00000000..13043dc3
--- /dev/null
+++ b/web-code/pages/FinalPlan.tsx
@@ -0,0 +1,529 @@
+import React, { useState } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import { PageType } from '../components/Sidebar';
+import {
+  FileText,
+  Download,
+  Printer,
+  RefreshCw,
+  ArrowLeft,
+  ChevronRight,
+  Target,
+  Users,
+  TrendingUp,
+  MessageSquare,
+  Megaphone,
+  Shield,
+  BarChart3,
+  Link2,
+  Clock,
+  AlertTriangle,
+  CheckCircle,
+  XCircle,
+  History,
+  FileUp,
+  Send,
+  Eye,
+} from 'lucide-react';
+
+interface FinalPlanProps {
+  onNavigate: (page: PageType) => void;
+}
+
+const FinalPlan: React.FC<FinalPlanProps> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 主题颜色类
+  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
+  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const textMuted = isDark ? 'text-slate-500' : 'text-gray-500';
+  const btnSecondary = isDark ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300' : 'bg-gray-100 hover:bg-gray-200 border-gray-300 text-gray-700';
+  const btnPrimary = isDark ? 'bg-blue-600 hover:bg-blue-500' : 'bg-red-600 hover:bg-red-500';
+  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-gray-50';
+  const inputBorder = isDark ? 'border-blue-800/30' : 'border-gray-300';
+
+  const [activeSection, setActiveSection] = useState('background');
+  const [reviewStatus, setReviewStatus] = useState<'draft' | 'pending' | 'approved' | 'rejected'>('pending');
+  const [showVersionHistory, setShowVersionHistory] = useState(false);
+
+  // 版本历史数据
+  const versionHistory = [
+    { version: 'V3', date: '2026-03-19 16:00', author: '张策略', changes: '完成驱动分析与叙事策略优化' },
+    { version: 'V2', date: '2026-03-19 14:30', author: '李智能', changes: '修正受众细分，补充渠道安排' },
+    { version: 'V1', date: '2026-03-19 10:00', author: '张策略', changes: '初始版本生成' },
+  ];
+
+  const sections = [
+    { id: 'background', label: '一、任务背景', icon: FileText },
+    { id: 'goal', label: '二、宣传目标', icon: Target },
+    { id: 'audience', label: '三、目标受众', icon: Users },
+    { id: 'behavior', label: '四、预期行为', icon: TrendingUp },
+    { id: 'driver', label: '五、驱动因素', icon: MessageSquare },
+    { id: 'narrative', label: '六、叙事策略', icon: Megaphone },
+    { id: 'channel', label: '七、渠道安排', icon: Link2 },
+    { id: 'risk', label: '八、风险控制', icon: Shield },
+    { id: 'evaluation', label: '九、效果评估', icon: BarChart3 },
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* 顶部操作栏 */}
+      <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4`}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => onNavigate('strategy-result')}
+              className={`flex items-center gap-2 px-3 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}
+            >
+              <ArrowLeft className="w-4 h-4" />
+              返回
+            </button>
+            <div className={`h-8 w-px ${isDark ? 'bg-blue-800/30' : 'bg-gray-200'}`} />
+            <div>
+              <h1 className={`${textPrimary} font-bold text-lg`}>五四青年节宣传活动策略方案</h1>
+              <p className={`${textSecondary} text-sm`}>最终版方案 · V3 · 2026-03-19</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-4">
+            {/* 审核状态 */}
+            <div className="flex items-center gap-2">
+              <span className={`${textSecondary} text-sm`}>审核状态：</span>
+              <div className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium ${
+                reviewStatus === 'approved'
+                  ? 'bg-green-500/20 text-green-400'
+                  : reviewStatus === 'pending'
+                  ? 'bg-yellow-500/20 text-yellow-400'
+                  : reviewStatus === 'rejected'
+                  ? 'bg-red-500/20 text-red-400'
+                  : `${inputBg} ${textSecondary}`
+              }`}>
+                {reviewStatus === 'approved' ? (
+                  <><CheckCircle className="w-4 h-4" /> 已通过</>
+                ) : reviewStatus === 'pending' ? (
+                  <><Clock className="w-4 h-4" /> 审核中</>
+                ) : reviewStatus === 'rejected' ? (
+                  <><XCircle className="w-4 h-4" /> 未通过</>
+                ) : (
+                  <><FileText className="w-4 h-4" /> 草稿</>
+                )}
+              </div>
+            </div>
+
+            {/* 版本历史按钮 */}
+            <button
+              onClick={() => setShowVersionHistory(!showVersionHistory)}
+              className={`flex items-center gap-2 px-3 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}
+            >
+              <History className="w-4 h-4" />
+              版本历史
+            </button>
+
+            <div className={`h-8 w-px ${isDark ? 'bg-blue-800/30' : 'bg-gray-200'}`} />
+
+            <button className={`flex items-center gap-2 px-4 py-2.5 ${btnSecondary} rounded-lg text-sm transition-colors`}>
+              <Printer className="w-4 h-4" />
+              打印
+            </button>
+            <button className={`flex items-center gap-2 px-4 py-2.5 ${btnSecondary} rounded-lg text-sm transition-colors`}>
+              <Download className="w-4 h-4" />
+              导出Word
+            </button>
+            <button className={`flex items-center gap-2 px-4 py-2.5 ${btnSecondary} rounded-lg text-sm transition-colors`}>
+              <Download className="w-4 h-4" />
+              导出PDF
+            </button>
+            <button className={`flex items-center gap-2 px-4 py-2.5 ${btnPrimary} text-white rounded-lg text-sm transition-colors`}>
+              <FileUp className="w-4 h-4" />
+              导出汇报提纲
+            </button>
+
+            {/* 审核操作 */}
+            {reviewStatus === 'pending' ? (
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => setReviewStatus('approved')}
+                  className={`flex items-center gap-2 px-4 py-2.5 ${btnPrimary} text-white rounded-lg text-sm transition-colors`}
+                >
+                  <CheckCircle className="w-4 h-4" />
+                  通过
+                </button>
+                <button
+                  onClick={() => setReviewStatus('rejected')}
+                  className="flex items-center gap-2 px-4 py-2.5 bg-red-600/20 hover:bg-red-600/30 border border-red-500/30 text-red-400 rounded-lg text-sm transition-colors"
+                >
+                  <XCircle className="w-4 h-4" />
+                  驳回
+                </button>
+              </div>
+            ) : reviewStatus === 'draft' ? (
+              <button className={`flex items-center gap-2 px-4 py-2.5 ${btnPrimary} text-white rounded-lg text-sm transition-colors`}>
+                <Send className="w-4 h-4" />
+                提交审核
+              </button>
+            ) : (
+              <button className={`flex items-center gap-2 px-4 py-2.5 ${btnPrimary} text-white rounded-lg text-sm transition-colors`}>
+                <RefreshCw className="w-4 h-4" />
+                发起修订
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* 版本历史面板 */}
+        {showVersionHistory && (
+          <div className={`mt-4 pt-4 border-t ${cardBorder}`}>
+            <div className="grid grid-cols-3 gap-4">
+              {versionHistory.map((v, i) => (
+                <div
+                  key={v.version}
+                  className={`p-4 rounded-lg border ${
+                    i === 0
+                      ? 'bg-blue-500/10 border-blue-500/30'
+                      : `${inputBg} ${cardBorder}`
+                  }`}
+                >
+                  <div className="flex items-center justify-between mb-2">
+                    <span className={`text-sm font-bold ${
+                      i === 0 ? 'text-blue-400' : textSecondary
+                    }`}>
+                      {v.version}
+                    </span>
+                    {i === 0 && (
+                      <span className="px-2 py-0.5 bg-blue-500/20 text-blue-400 rounded text-xs">
+                        当前
+                      </span>
+                    )}
+                  </div>
+                  <p className={`${textSecondary} text-xs mb-1`}>{v.date}</p>
+                  <p className={`${textPrimary} text-sm`}>{v.changes}</p>
+                  <p className={`${textMuted} text-xs mt-1`}>作者：{v.author}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="grid grid-cols-4 gap-6">
+        {/* 左侧导航目录 (20%) */}
+        <div className="col-span-1">
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4 sticky top-6`}>
+            <h3 className={`${textPrimary} font-semibold mb-4`}>目录导航</h3>
+            <nav className="space-y-1">
+              {sections.map((section) => (
+                <button
+                  key={section.id}
+                  onClick={() => setActiveSection(section.id)}
+                  className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left text-sm transition-colors ${
+                    activeSection === section.id
+                      ? 'bg-blue-600/20 text-blue-400 border border-blue-500/30'
+                      : `${textSecondary} hover:${isDark ? 'bg-slate-700/50' : 'bg-gray-100'} hover:${textPrimary}`
+                  }`}
+                >
+                  <span className="text-xs opacity-50">{section.label.split('、')[0]}</span>
+                  <span>{section.label.split('、')[1]}</span>
+                </button>
+              ))}
+            </nav>
+
+            {/* 版本信息 */}
+            <div className={`mt-6 pt-4 border-t ${cardBorder}`}>
+              <div className={`flex items-center gap-2 ${textSecondary} text-xs mb-2`}>
+                <Clock className="w-3 h-3" />
+                版本信息
+              </div>
+              <div className="space-y-1 text-xs">
+                <p className={textSecondary}>当前版本：<span className={isDark ? 'text-cyan-400' : 'text-red-500'}>V3</span></p>
+                <p className={textSecondary}>生成时间：2026-03-19 16:00</p>
+                <p className={textSecondary}>关联任务：TASK-2026-0319-001</p>
+              </div>
+            </div>
+
+            {/* 风险提示 */}
+            <div className={`mt-4 p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg`}>
+              <div className={`flex items-center gap-2 text-amber-400 text-xs font-medium mb-1`}>
+                <AlertTriangle className="w-3 h-3" />
+                风险提示
+              </div>
+              <p className={`${textSecondary} text-xs`}>需关注预算控制和内容质量</p>
+            </div>
+          </div>
+        </div>
+
+        {/* 中间正文区 (60%) */}
+        <div className="col-span-2">
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-8`}>
+            {/* 标题 */}
+            <div className={`text-center mb-8 pb-6 border-b ${cardBorder}`}>
+              <h1 className={`text-2xl font-bold ${textPrimary} mb-2`}>五四青年节宣传活动策略方案</h1>
+              <p className={textSecondary}>最终版 · V3</p>
+            </div>
+
+            {/* 逻辑总括 - 高亮显示 */}
+            <div className="mb-8 p-6 bg-gradient-to-r from-blue-600/20 to-cyan-600/20 border border-blue-500/30 rounded-xl">
+              <p className={`${textSecondary} leading-relaxed`}>
+                <strong className="text-cyan-400">逻辑总括：</strong>
+                本次宣传拟面向<span className="text-cyan-400 font-medium">【18-25岁基层青年】</span>，
+                围绕其<span className="text-yellow-400 font-medium">【社交认同与自我表达】</span>驱动，
+                传播<span className="text-purple-400 font-medium">【真实、有态度的青年故事】</span>叙事，
+                促使其产生<span className="text-green-400 font-medium">【主动参与互动并生成UGC内容】</span>行为，
+                从而实现<span className="text-blue-400 font-medium">【提升品牌在Z世代用户中的认知度】</span>目标。
+              </p>
+            </div>
+
+            {/* 正文内容 */}
+            <div className="space-y-8">
+              {/* 一、任务背景 */}
+              <section>
+                <h2 className={`${textPrimary} font-bold text-lg mb-4 flex items-center gap-2`}>
+                  <FileText className="w-5 h-5 text-blue-400" />
+                  一、任务背景
+                </h2>
+                <div className={`${textSecondary} leading-relaxed space-y-3 pl-7`}>
+                  <p>五四青年节将至，公司希望借此契机开展一次面向年轻群体的品牌宣传活动，提升品牌在Z世代用户中的认知度和好感度。</p>
+                  <p>本次活动需要制定一套完整的宣传策略，包括目标受众分析、行为设计、叙事框架、渠道安排等内容。</p>
+                  <div className={`p-4 ${inputBg} ${cardBorder} rounded-lg`}>
+                    <p className={`${textMuted} text-sm mb-2`}>特殊约束</p>
+                    <p>• 预算有限，需注重性价比</p>
+                    <p>• 需在5月1日前完成所有准备工作</p>
+                    <p>• 传播效果需可量化评估</p>
+                  </div>
+                </div>
+              </section>
+
+              {/* 二、宣传目标 */}
+              <section>
+                <h2 className={`${textPrimary} font-bold text-lg mb-4 flex items-center gap-2`}>
+                  <Target className="w-5 h-5 text-blue-400" />
+                  二、宣传目标
+                </h2>
+                <div className="pl-7 space-y-4">
+                  <div className="p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg">
+                    <p className="text-blue-400 text-sm font-medium mb-2">主目标</p>
+                    <p className={textPrimary}>提升品牌在Z世代用户中的认知度</p>
+                    <p className={`${textSecondary} text-sm mt-2`}>具体指标：活动期间品牌相关话题曝光量达500万+</p>
+                  </div>
+                  <div className="p-4 bg-green-500/10 border border-green-500/30 rounded-lg">
+                    <p className="text-green-400 text-sm font-medium mb-2">次目标</p>
+                    <p className={textPrimary}>建立品牌年轻化形象，增强用户情感连接</p>
+                  </div>
+                </div>
+              </section>
+
+              {/* 三、目标受众 */}
+              <section>
+                <h2 className={`${textPrimary} font-bold text-lg mb-4 flex items-center gap-2`}>
+                  <Users className="w-5 h-5 text-cyan-400" />
+                  三、目标受众
+                </h2>
+                <div className="pl-7 space-y-4">
+                  <div className="p-4 bg-cyan-500/10 border border-cyan-500/30 rounded-lg">
+                    <p className="text-cyan-400 text-sm font-medium mb-2">核心受众</p>
+                    <p className={`${textPrimary} font-medium`}>18-25岁基层青年</p>
+                    <div className="mt-3 grid grid-cols-2 gap-4">
+                      <div>
+                        <p className={`${textMuted} text-xs mb-1`}>人口特征</p>
+                        <p className={`${textSecondary} text-sm`}>学生、基层工作者为主</p>
+                      </div>
+                      <div>
+                        <p className={`${textMuted} text-xs mb-1`}>媒体习惯</p>
+                        <p className={`${textSecondary} text-sm`}>短视频、社交平台重度用户</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div className={`p-4 ${inputBg} ${isDark ? 'border-slate-700/30' : 'border-gray-200'} rounded-lg`}>
+                    <p className={`${textSecondary} text-sm font-medium mb-2`}>次级受众</p>
+                    <p className={textSecondary}>25-30岁职场新人</p>
+                  </div>
+                </div>
+              </section>
+
+              {/* 四、预期行为及关键驱动 */}
+              <section>
+                <h2 className={`${textPrimary} font-bold text-lg mb-4 flex items-center gap-2`}>
+                  <TrendingUp className="w-5 h-5 text-green-400" />
+                  四、预期行为及关键驱动
+                </h2>
+                <div className="pl-7 space-y-4">
+                  <div className="p-4 bg-green-500/10 border border-green-500/30 rounded-lg">
+                    <p className="text-green-400 text-sm font-medium mb-2">目标行为</p>
+                    <p className={textPrimary}>主动参与话题讨论、生成UGC内容</p>
+                    <div className="mt-3 flex items-center gap-2">
+                      <span className={`${textSecondary} text-sm`}>转化路径：</span>
+                      {['浏览', '点赞', '评论', '转发', '创作'].map((step, i) => (
+                        <React.Fragment key={step}>
+                          <span className={`px-2 py-1 rounded text-xs ${
+                            i < 2 ? 'bg-green-500/20 text-green-400' : `${inputBg} ${textSecondary}`
+                          }`}>
+                            {step}
+                          </span>
+                          {i < 4 && <span className={isDark ? 'text-slate-600' : 'text-gray-400'}>→</span>}
+                        </React.Fragment>
+                      ))}
+                    </div>
+                  </div>
+                  <div className="p-4 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
+                    <p className="text-yellow-400 text-sm font-medium mb-2">核心驱动</p>
+                    <p className={textPrimary}>社交认同与自我表达</p>
+                    <div className="mt-2 flex gap-2">
+                      {['归属感需求', '表达欲驱动', '群体认同激励'].map((item) => (
+                        <span key={item} className="px-2 py-1 bg-yellow-500/20 text-yellow-400 rounded text-xs">
+                          {item}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </section>
+
+              {/* 五、叙事策略 */}
+              <section>
+                <h2 className={`${textPrimary} font-bold text-lg mb-4 flex items-center gap-2`}>
+                  <Megaphone className="w-5 h-5 text-purple-400" />
+                  五、叙事策略
+                </h2>
+                <div className="pl-7 space-y-4">
+                  <div className="p-4 bg-purple-500/10 border border-purple-500/30 rounded-lg">
+                    <p className="text-purple-400 text-sm font-medium mb-2">主叙事模式</p>
+                    <p className={textPrimary}>真实、有态度的青年故事</p>
+                  </div>
+                  <div className={`p-4 ${inputBg} ${isDark ? 'border-slate-700/30' : 'border-gray-200'} rounded-lg`}>
+                    <p className={`${textSecondary} text-sm font-medium mb-2`}>叙事策略</p>
+                    <p className={textSecondary}>人物+事件结合，以真实故事传递品牌价值观。讲述年轻人自己的故事，引发情感共鸣。</p>
+                  </div>
+                </div>
+              </section>
+
+              {/* 六、渠道与执行安排 */}
+              <section>
+                <h2 className={`${textPrimary} font-bold text-lg mb-4 flex items-center gap-2`}>
+                  <Link2 className="w-5 h-5 text-pink-400" />
+                  六、渠道与执行安排
+                </h2>
+                <div className="pl-7">
+                  <div className="grid grid-cols-3 gap-4">
+                    {[
+                      { platform: '抖音', role: '主战场，短视频传播', weight: '40%' },
+                      { platform: '微博', role: '话题引爆，社交传播', weight: '30%' },
+                      { platform: '小红书', role: '种草转化，UGC沉淀', weight: '30%' },
+                    ].map((channel) => (
+                      <div key={channel.platform} className="p-4 bg-pink-500/10 border border-pink-500/30 rounded-lg">
+                        <p className="text-pink-400 font-medium">{channel.platform}</p>
+                        <p className={`${textSecondary} text-sm mt-1`}>{channel.role}</p>
+                        <p className={`${textMuted} text-xs mt-2`}>预算占比：{channel.weight}</p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </section>
+
+              {/* 七、风险控制 */}
+              <section>
+                <h2 className={`${textPrimary} font-bold text-lg mb-4 flex items-center gap-2`}>
+                  <Shield className="w-5 h-5 text-red-400" />
+                  七、风险控制
+                </h2>
+                <div className="pl-7 space-y-3">
+                  {[
+                    { risk: '预算有限，需控制成本', mitigation: '提前布局预热，优化投放策略' },
+                    { risk: '青年群体注意力分散', mitigation: '内容差异化，强调情感共鸣' },
+                    { risk: 'UGC质量难以保证', mitigation: '设置激励机制，建立内容审核' },
+                  ].map((item, i) => (
+                    <div key={i} className={`flex gap-4 p-3 ${inputBg} ${isDark ? 'border-slate-700/30' : 'border-gray-200'} rounded-lg`}>
+                      <div className="flex-1">
+                        <p className="text-red-400 text-xs font-medium">风险{i + 1}</p>
+                        <p className={`${textPrimary} text-sm`}>{item.risk}</p>
+                      </div>
+                      <div className="flex-1">
+                        <p className="text-green-400 text-xs font-medium">应对措施</p>
+                        <p className={`${textSecondary} text-sm`}>{item.mitigation}</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </section>
+
+              {/* 八、效果评估 */}
+              <section>
+                <h2 className={`${textPrimary} font-bold text-lg mb-4 flex items-center gap-2`}>
+                  <BarChart3 className="w-5 h-5 text-amber-400" />
+                  八、效果评估
+                </h2>
+                <div className="pl-7">
+                  <div className="grid grid-cols-4 gap-4">
+                    {[
+                      { metric: '曝光量', target: '500万+', current: '0' },
+                      { metric: '互动率', target: '5%', current: '0%' },
+                      { metric: 'UGC数量', target: '1000+', current: '0' },
+                      { metric: '话题热度', target: 'TOP 20', current: '-' },
+                    ].map((item) => (
+                      <div key={item.metric} className="p-4 bg-amber-500/10 border border-amber-500/30 rounded-lg text-center">
+                        <p className="text-amber-400 text-xs">{item.metric}</p>
+                        <p className={`${textPrimary} font-bold text-lg mt-1`}>{item.target}</p>
+                        <p className={`${textMuted} text-xs mt-1`}>目标值</p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </section>
+            </div>
+          </div>
+        </div>
+
+        {/* 右侧辅助区 (20%) */}
+        <div className="col-span-1 space-y-6">
+          {/* 关联讨论记录 */}
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4`}>
+            <h3 className={`${textPrimary} font-semibold mb-4`}>关联讨论记录</h3>
+            <button className={`w-full flex items-center justify-between p-3 ${inputBg} hover:${isDark ? 'bg-slate-800/50' : 'bg-gray-200'} ${cardBorder} rounded-lg transition-colors`}>
+              <div className="flex items-center gap-2 text-blue-400 text-sm">
+                <FileText className="w-4 h-4" />
+                TASK-2026-0319-001
+              </div>
+              <ChevronRight className={`w-4 h-4 ${textSecondary}`} />
+            </button>
+          </div>
+
+          {/* 快速操作 */}
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4`}>
+            <h3 className={`${textPrimary} font-semibold mb-4`}>快速操作</h3>
+            <div className="space-y-2">
+              <button className={`w-full flex items-center gap-3 p-3 ${inputBg} hover:${isDark ? 'bg-slate-800/50' : 'bg-gray-200'} ${cardBorder} rounded-lg transition-colors text-left`}>
+                <Download className="w-4 h-4 text-green-400" />
+                <div>
+                  <p className={`${textPrimary} text-sm`}>导出完整方案</p>
+                  <p className={`${textMuted} text-xs`}>Word格式</p>
+                </div>
+              </button>
+              <button className={`w-full flex items-center gap-3 p-3 ${inputBg} hover:${isDark ? 'bg-slate-800/50' : 'bg-gray-200'} ${cardBorder} rounded-lg transition-colors text-left`}>
+                <RefreshCw className="w-4 h-4 text-blue-400" />
+                <div>
+                  <p className={`${textPrimary} text-sm`}>发起新版本修订</p>
+                  <p className={`${textMuted} text-xs`}>基于当前版本</p>
+                </div>
+              </button>
+            </div>
+          </div>
+
+          {/* 分享 */}
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4`}>
+            <h3 className={`${textPrimary} font-semibold mb-4`}>分享方案</h3>
+            <div className="flex gap-2">
+              <button className={`flex-1 p-2 ${inputBg} hover:${isDark ? 'bg-slate-800/50' : 'bg-gray-200'} ${cardBorder} rounded-lg transition-colors`}>
+                <p className={`${textSecondary} text-xs`}>复制链接</p>
+              </button>
+              <button className={`flex-1 p-2 ${inputBg} hover:${isDark ? 'bg-slate-800/50' : 'bg-gray-200'} ${cardBorder} rounded-lg transition-colors`}>
+                <p className={`${textSecondary} text-xs`}>发送邮件</p>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FinalPlan;
diff --git a/web-code/pages/GeneralQA.tsx b/web-code/pages/GeneralQA.tsx
new file mode 100644
index 00000000..bd3abf20
--- /dev/null
+++ b/web-code/pages/GeneralQA.tsx
@@ -0,0 +1,984 @@
+import React, { useState } from 'react';
+import {
+  Send,
+  Upload,
+  RotateCcw,
+  Bookmark,
+  History,
+  Sparkles,
+  BookOpen,
+  Brain,
+  GitCompare,
+  ChevronDown,
+  ChevronRight,
+  MessageSquare,
+  FileText,
+  CheckCircle,
+  AlertCircle,
+} from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+import { PageType } from '../components/Sidebar';
+
+type QAMode = 'single-round' | 'multi-round' | 'deep-search';
+type CompareMode = 'compare-off' | 'compare-on';
+type ViewMode = 'single' | 'compare';
+
+interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: Date;
+  sources?: SourceItem[];
+}
+
+interface SourceItem {
+  title: string;
+  type: string;
+  snippet: string;
+}
+
+interface CompareResult {
+  leftMode: QAMode;
+  rightMode: QAMode;
+  leftContent: string;
+  rightContent: string;
+  sources: {
+    left: SourceItem[];
+    right: SourceItem[];
+  };
+  differences?: {
+    consensus: string;
+    differences: string;
+    leftAdvantage: string;
+    rightAdvantage: string;
+  };
+}
+
+const GeneralQA: React.FC<{ onNavigate: (page: PageType) => void }> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 状态管理
+  const [viewMode, setViewMode] = useState<ViewMode>('single');
+  const [qaMode, setQaMode] = useState<QAMode>('single-round');
+  const [compareLeftMode, setCompareLeftMode] = useState<QAMode>('single-round');
+  const [compareRightMode, setCompareRightMode] = useState<QAMode>('deep-search');
+
+  // 知识范围
+  const [knowledgeScope, setKnowledgeScope] = useState<'all' | 'specific-kb' | 'specific-domain'>('all');
+
+  // 回答偏好
+  const [answerStyle, setAnswerStyle] = useState<'concise' | 'detailed'>('detailed');
+  const [showSources, setShowSources] = useState(true);
+  const [showProcess, setShowProcess] = useState(false);
+  const [autoSummary, setAutoSummary] = useState(false);
+
+  // 对比设置
+  const [compareLayout, setCompareLayout] = useState<'horizontal' | 'vertical'>('horizontal');
+  const [autoSummarizeDiff, setAutoSummarizeDiff] = useState(true);
+  const [recommendBetter, setRecommendBetter] = useState(true);
+
+  // 消息和结果
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputValue, setInputValue] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [compareResult, setCompareResult] = useState<CompareResult | null>(null);
+
+  // 检索过程展示
+  const [searchProcess, setSearchProcess] = useState({
+    currentMode: '单轮RAG',
+    rounds: 1,
+    hits: 5,
+    queryRewrite: '',
+  });
+
+  // 示例消息
+  const sampleMessages: Message[] = [
+    {
+      id: '1',
+      role: 'user',
+      content: 'RAG技术的工作原理是什么？',
+      timestamp: new Date(),
+    },
+    {
+      id: '2',
+      role: 'assistant',
+      content: 'RAG（检索增强生成）技术的工作原理主要包括以下几个步骤：\n\n1. **检索阶段**：系统首先将用户问题转换为查询向量，在知识库中进行相似度搜索，返回最相关的文档片段。\n\n2. **增强阶段**：将检索到的相关文档与原始问题组合，形成增强后的提示词上下文。\n\n3. **生成阶段**：将增强后的提示词发送给大语言模型，生成最终回答。\n\n这种方式可以有效解决LLM知识过时、幻觉等问题，提升回答的准确性和可信度。',
+      timestamp: new Date(),
+      sources: [
+        { title: 'RAG技术白皮书', type: 'PDF', snippet: 'RAG是一种结合检索和生成的技术架构...' },
+        { title: 'LLM应用实践', type: '文档', snippet: '检索增强生成可以有效提升回答质量...' },
+      ],
+    },
+  ];
+
+  const handleSend = () => {
+    if (!inputValue.trim()) return;
+
+    setIsLoading(true);
+
+    // 模拟发送消息
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: inputValue,
+      timestamp: new Date(),
+    };
+
+    setMessages([...messages, userMessage]);
+    setInputValue('');
+
+    // 模拟AI响应
+    setTimeout(() => {
+      setMessages(prev => [...prev, ...sampleMessages]);
+      setIsLoading(false);
+      setSearchProcess({
+        currentMode: qaMode === 'single-round' ? '单轮RAG' : qaMode === 'multi-round' ? '多轮RAG' : '深度检索',
+        rounds: qaMode === 'multi-round' ? 3 : 1,
+        hits: 5,
+        queryRewrite: qaMode === 'deep-search' ? '原问题→分解子问题→独立检索→综合回答' : '',
+      });
+    }, 1500);
+  };
+
+  const handleCompare = () => {
+    if (!inputValue.trim()) return;
+
+    setIsLoading(true);
+
+    // 模拟对比结果
+    setTimeout(() => {
+      setCompareResult({
+        leftMode: compareLeftMode,
+        rightMode: compareRightMode,
+        leftContent: '单轮RAG回答：直接检索并生成答案，响应速度快，但可能遗漏跨文档的关联信息。适用于简单事实查询。',
+        rightContent: '深度检索回答：通过问题分解、多轮检索和综合分析，提供更全面的答案。包含详细的推理过程和更多的引用来源。',
+        sources: {
+          left: [
+            { title: 'RAG基础教程', type: '文档', snippet: '单轮RAG是最基础的检索增强方式...' },
+          ],
+          right: [
+            { title: '高级RAG技术', type: '论文', snippet: '深度检索通过query改写和迭代优化...' },
+            { title: 'RAG最佳实践', type: '指南', snippet: '多阶段检索可以显著提升召回率...' },
+          ],
+        },
+        differences: {
+          consensus: '两种方式都使用向量检索技术，都能引用原始文档',
+          differences: '深度检索采用多轮查询改写，覆盖更全面',
+          leftAdvantage: '响应更快，资源消耗更低',
+          rightAdvantage: '答案更完整，引用更充分',
+        },
+      });
+      setIsLoading(false);
+    }, 2000);
+  };
+
+  const handleSaveRecord = () => {
+    alert('问答记录已保存');
+  };
+
+  const handleCollect = () => {
+    alert('已添加到收藏');
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      if (viewMode === 'compare') {
+        handleCompare();
+      } else {
+        handleSend();
+      }
+    }
+  };
+
+  // 获取模式标签
+  const getModeLabel = (mode: QAMode) => {
+    switch (mode) {
+      case 'single-round': return '单轮RAG';
+      case 'multi-round': return '多轮RAG';
+      case 'deep-search': return '深度检索';
+    }
+  };
+
+  return (
+    <div className={`h-[calc(100vh-120px)] flex flex-col theme-bg rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+      {/* 顶部模式栏 */}
+      <div className={`flex items-center justify-between px-6 py-4 border-b ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+        <div className="flex items-center gap-4">
+          <h1 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+            通用问答
+          </h1>
+          <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+            支持单轮RAG、多轮RAG、深度检索及结果对比
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {/* 模式切换按钮 */}
+          <div className={`flex rounded-lg p-1 ${isDark ? 'bg-slate-700/50' : 'bg-red-50'}`}>
+            <button
+              onClick={() => setViewMode('single')}
+              className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
+                viewMode === 'single'
+                  ? isDark
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-red-500 text-white'
+                  : isDark
+                    ? 'text-slate-400 hover:text-white'
+                    : 'text-gray-600 hover:text-red-600'
+              }`}
+            >
+              单一模式
+            </button>
+            <button
+              onClick={() => setViewMode('compare')}
+              className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
+                viewMode === 'compare'
+                  ? isDark
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-red-500 text-white'
+                  : isDark
+                    ? 'text-slate-400 hover:text-white'
+                    : 'text-gray-600 hover:text-red-600'
+              }`}
+            >
+              对比模式
+            </button>
+          </div>
+
+          <button
+            onClick={() => onNavigate('qa-records')}
+            className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+              isDark
+                ? 'bg-slate-700/50 text-slate-300 hover:bg-slate-600/50'
+                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            }`}
+          >
+            <History className="w-4 h-4" />
+            历史记录
+          </button>
+        </div>
+      </div>
+
+      {/* 主体内容区 */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* 左侧参数区 */}
+        <div className={`w-72 border-r flex-shrink-0 overflow-y-auto p-4 ${
+          isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
+        }`}>
+          {viewMode === 'single' ? (
+            <>
+              {/* 问答模式选择 */}
+              <div className="mb-6">
+                <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                  问答模式
+                </h3>
+                <div className="space-y-2">
+                  {[
+                    { value: 'single-round', label: '单轮RAG', icon: Sparkles, desc: '快速直接' },
+                    { value: 'multi-round', label: '多轮RAG', icon: Brain, desc: '深入理解' },
+                    { value: 'deep-search', label: '深度检索', icon: BookOpen, desc: '全面分析' },
+                  ].map((mode) => (
+                    <button
+                      key={mode.value}
+                      onClick={() => setQaMode(mode.value as QAMode)}
+                      className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all text-left ${
+                        qaMode === mode.value
+                          ? isDark
+                            ? 'bg-blue-600/20 border border-blue-500/50 text-blue-400'
+                            : 'bg-red-50 border border-red-200 text-red-600'
+                          : isDark
+                            ? 'bg-slate-700/30 border border-transparent text-slate-400 hover:bg-slate-700/50'
+                            : 'bg-white border border-gray-200 text-gray-600 hover:bg-gray-50'
+                      }`}
+                    >
+                      <mode.icon className="w-5 h-5" />
+                      <div className="flex-1">
+                        <div className="text-sm font-medium">{mode.label}</div>
+                        <div className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{mode.desc}</div>
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              {/* 对比模式设置 */}
+              <div className="mb-6">
+                <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                  对比模式设置
+                </h3>
+
+                {/* 左侧模式 */}
+                <div className="mb-4">
+                  <label className={`text-xs mb-2 block ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                    模式A
+                  </label>
+                  <select
+                    value={compareLeftMode}
+                    onChange={(e) => setCompareLeftMode(e.target.value as QAMode)}
+                    className={`w-full px-3 py-2 rounded-lg text-sm ${
+                      isDark
+                        ? 'bg-slate-700/50 border border-slate-600 text-white'
+                        : 'bg-white border border-gray-200 text-gray-700'
+                    }`}
+                  >
+                    <option value="single-round">单轮RAG</option>
+                    <option value="multi-round">多轮RAG</option>
+                    <option value="deep-search">深度检索</option>
+                  </select>
+                </div>
+
+                <div className={`text-center my-2 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                  <span className="text-lg">VS</span>
+                </div>
+
+                {/* 右侧模式 */}
+                <div className="mb-4">
+                  <label className={`text-xs mb-2 block ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                    模式B
+                  </label>
+                  <select
+                    value={compareRightMode}
+                    onChange={(e) => setCompareRightMode(e.target.value as QAMode)}
+                    className={`w-full px-3 py-2 rounded-lg text-sm ${
+                      isDark
+                        ? 'bg-slate-700/50 border border-slate-600 text-white'
+                        : 'bg-white border border-gray-200 text-gray-700'
+                    }`}
+                  >
+                    <option value="single-round">单轮RAG</option>
+                    <option value="multi-round">多轮RAG</option>
+                    <option value="deep-search">深度检索</option>
+                  </select>
+                </div>
+              </div>
+
+              {/* 对比布局 */}
+              <div className="mb-6">
+                <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                  对比布局
+                </h3>
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => setCompareLayout('horizontal')}
+                    className={`flex-1 px-3 py-2 rounded-lg text-sm transition-all ${
+                      compareLayout === 'horizontal'
+                        ? isDark
+                          ? 'bg-blue-600 text-white'
+                          : 'bg-red-500 text-white'
+                        : isDark
+                          ? 'bg-slate-700/50 text-slate-300'
+                          : 'bg-gray-100 text-gray-600'
+                    }`}
+                  >
+                    左右对比
+                  </button>
+                  <button
+                    onClick={() => setCompareLayout('vertical')}
+                    className={`flex-1 px-3 py-2 rounded-lg text-sm transition-all ${
+                      compareLayout === 'vertical'
+                        ? isDark
+                          ? 'bg-blue-600 text-white'
+                          : 'bg-red-500 text-white'
+                        : isDark
+                          ? 'bg-slate-700/50 text-slate-300'
+                          : 'bg-gray-100 text-gray-600'
+                    }`}
+                  >
+                    上下对比
+                  </button>
+                </div>
+              </div>
+            </>
+          )}
+
+          {/* 知识范围 */}
+          <div className="mb-6">
+            <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+              知识范围
+            </h3>
+            <div className="space-y-2">
+              {[
+                { value: 'all', label: '全部知识源' },
+                { value: 'specific-kb', label: '指定知识库' },
+                { value: 'specific-domain', label: '指定资源域' },
+              ].map((option) => (
+                <label
+                  key={option.value}
+                  className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-all ${
+                    knowledgeScope === option.value
+                      ? isDark
+                        ? 'bg-blue-600/20 text-blue-400'
+                        : 'bg-red-50 text-red-600'
+                      : isDark
+                        ? 'text-slate-400 hover:bg-slate-700/30'
+                        : 'text-gray-600 hover:bg-gray-50'
+                  }`}
+                >
+                  <input
+                    type="radio"
+                    name="knowledge-scope"
+                    checked={knowledgeScope === option.value}
+                    onChange={() => setKnowledgeScope(option.value as any)}
+                    className="sr-only"
+                  />
+                  <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
+                    knowledgeScope === option.value
+                      ? isDark
+                        ? 'border-blue-500 bg-blue-500'
+                        : 'border-red-500 bg-red-500'
+                      : isDark
+                        ? 'border-slate-500'
+                        : 'border-gray-300'
+                  }`}>
+                    {knowledgeScope === option.value && (
+                      <div className="w-1.5 h-1.5 rounded-full bg-white" />
+                    )}
+                  </div>
+                  <span className="text-sm">{option.label}</span>
+                </label>
+              ))}
+            </div>
+          </div>
+
+          {/* 回答偏好 */}
+          <div className="mb-6">
+            <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+              回答偏好
+            </h3>
+            <div className="space-y-3">
+              <label className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-all ${
+                isDark ? 'text-slate-400 hover:bg-slate-700/30' : 'text-gray-600 hover:bg-gray-50'
+              }`}>
+                <input
+                  type="checkbox"
+                  checked={answerStyle === 'detailed'}
+                  onChange={() => setAnswerStyle(answerStyle === 'detailed' ? 'concise' : 'detailed')}
+                  className="sr-only"
+                />
+                <div className={`w-4 h-4 rounded border flex items-center justify-center ${
+                  answerStyle === 'detailed'
+                    ? isDark
+                      ? 'bg-blue-500 border-blue-500'
+                      : 'bg-red-500 border-red-500'
+                    : isDark
+                      ? 'border-slate-500'
+                      : 'border-gray-300'
+                }`}>
+                  {answerStyle === 'detailed' && (
+                    <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                    </svg>
+                  )}
+                </div>
+                <span className="text-sm">详细回答</span>
+              </label>
+
+              <label className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-all ${
+                isDark ? 'text-slate-400 hover:bg-slate-700/30' : 'text-gray-600 hover:bg-gray-50'
+              }`}>
+                <input
+                  type="checkbox"
+                  checked={showSources}
+                  onChange={() => setShowSources(!showSources)}
+                  className="sr-only"
+                />
+                <div className={`w-4 h-4 rounded border flex items-center justify-center ${
+                  showSources
+                    ? isDark
+                      ? 'bg-blue-500 border-blue-500'
+                      : 'bg-red-500 border-red-500'
+                    : isDark
+                      ? 'border-slate-500'
+                      : 'border-gray-300'
+                }`}>
+                  {showSources && (
+                    <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                    </svg>
+                  )}
+                </div>
+                <span className="text-sm">展示引用来源</span>
+              </label>
+
+              <label className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-all ${
+                isDark ? 'text-slate-400 hover:bg-slate-700/30' : 'text-gray-600 hover:bg-gray-50'
+              }`}>
+                <input
+                  type="checkbox"
+                  checked={showProcess}
+                  onChange={() => setShowProcess(!showProcess)}
+                  className="sr-only"
+                />
+                <div className={`w-4 h-4 rounded border flex items-center justify-center ${
+                  showProcess
+                    ? isDark
+                      ? 'bg-blue-500 border-blue-500'
+                      : 'bg-red-500 border-red-500'
+                    : isDark
+                      ? 'border-slate-500'
+                      : 'border-gray-300'
+                }`}>
+                  {showProcess && (
+                    <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                    </svg>
+                  )}
+                </div>
+                <span className="text-sm">展示检索过程</span>
+              </label>
+            </div>
+          </div>
+
+          {/* 对比设置 - 仅对比模式 */}
+          {viewMode === 'compare' && (
+            <div className="mb-6">
+              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                对比设置
+              </h3>
+              <div className="space-y-3">
+                <label className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-all ${
+                  isDark ? 'text-slate-400 hover:bg-slate-700/30' : 'text-gray-600 hover:bg-gray-50'
+                }`}>
+                  <input
+                    type="checkbox"
+                    checked={autoSummarizeDiff}
+                    onChange={() => setAutoSummarizeDiff(!autoSummarizeDiff)}
+                    className="sr-only"
+                  />
+                  <div className={`w-4 h-4 rounded border flex items-center justify-center ${
+                    autoSummarizeDiff
+                      ? isDark
+                        ? 'bg-blue-500 border-blue-500'
+                        : 'bg-red-500 border-red-500'
+                      : isDark
+                        ? 'border-slate-500'
+                        : 'border-gray-300'
+                  }`}>
+                    {autoSummarizeDiff && (
+                      <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                      </svg>
+                    )}
+                  </div>
+                  <span className="text-sm">自动总结差异</span>
+                </label>
+
+                <label className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-all ${
+                  isDark ? 'text-slate-400 hover:bg-slate-700/30' : 'text-gray-600 hover:bg-gray-50'
+                }`}>
+                  <input
+                    type="checkbox"
+                    checked={recommendBetter}
+                    onChange={() => setRecommendBetter(!recommendBetter)}
+                    className="sr-only"
+                  />
+                  <div className={`w-4 h-4 rounded border flex items-center justify-center ${
+                    recommendBetter
+                      ? isDark
+                        ? 'bg-blue-500 border-blue-500'
+                        : 'bg-red-500 border-red-500'
+                      : isDark
+                        ? 'border-slate-500'
+                        : 'border-gray-300'
+                  }`}>
+                    {recommendBetter && (
+                      <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                      </svg>
+                    )}
+                  </div>
+                  <span className="text-sm">推荐更优答案</span>
+                </label>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* 中间结果区 */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {viewMode === 'single' ? (
+            <>
+              {/* 聊天消息区 */}
+              <div className="flex-1 overflow-y-auto p-4 space-y-4">
+                {messages.length === 0 ? (
+                  <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                    <MessageSquare className="w-16 h-16 mb-4 opacity-50" />
+                    <p className="text-lg">开始你的问答</p>
+                    <p className="text-sm mt-2">输入问题，获取基于知识库的智能回答</p>
+                  </div>
+                ) : (
+                  messages.map((msg) => (
+                    <div key={msg.id} className="space-y-3">
+                      {/* 用户消息 */}
+                      <div className={`flex gap-3 ${msg.role === 'user' ? 'justify-end' : ''}`}>
+                        {msg.role === 'assistant' && (
+                          <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
+                            isDark ? 'bg-blue-600/20 text-blue-400' : 'bg-red-100 text-red-500'
+                          }`}>
+                            <Brain className="w-4 h-4" />
+                          </div>
+                        )}
+                        <div className={`max-w-[70%] rounded-xl px-4 py-3 ${
+                          msg.role === 'user'
+                            ? isDark
+                              ? 'bg-blue-600/30 text-white'
+                              : 'bg-red-500 text-white'
+                            : isDark
+                              ? 'bg-slate-700/50 text-slate-200'
+                              : 'bg-gray-100 text-gray-800'
+                        }`}>
+                          <p className="whitespace-pre-wrap">{msg.content}</p>
+                        </div>
+                        {msg.role === 'user' && (
+                          <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
+                            isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-200 text-gray-600'
+                          }`}>
+                            <div className="w-4 h-4 rounded-full bg-current" />
+                          </div>
+                        )}
+                      </div>
+
+                      {/* 来源信息 */}
+                      {msg.role === 'assistant' && msg.sources && showSources && (
+                        <div className={`ml-11 p-3 rounded-lg ${isDark ? 'bg-slate-800/50' : 'bg-gray-50'}`}>
+                          <h4 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                            引用来源
+                          </h4>
+                          <div className="space-y-2">
+                            {msg.sources.map((source, idx) => (
+                              <div key={idx} className={`text-xs p-2 rounded ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                                <div className="flex items-center gap-2 mb-1">
+                                  <FileText className={`w-3 h-3 ${isDark ? 'text-blue-400' : 'text-red-400'}`} />
+                                  <span className={`font-medium ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                                    {source.title}
+                                  </span>
+                                  <span className={`px-1.5 py-0.5 rounded text-xs ${
+                                    isDark ? 'bg-slate-600 text-slate-400' : 'bg-gray-200 text-gray-500'
+                                  }`}>
+                                    {source.type}
+                                  </span>
+                                </div>
+                                <p className={isDark ? 'text-slate-400' : 'text-gray-500'}>{source.snippet}</p>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  ))
+                )}
+
+                {isLoading && (
+                  <div className="flex gap-3">
+                    <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                      isDark ? 'bg-blue-600/20 text-blue-400' : 'bg-red-100 text-red-500'
+                    }`}>
+                      <Brain className="w-4 h-4" />
+                    </div>
+                    <div className={`max-w-[70%] rounded-xl px-4 py-3 ${isDark ? 'bg-slate-700/50' : 'bg-gray-100'}`}>
+                      <div className="flex gap-1">
+                        <div className={`w-2 h-2 rounded-full animate-bounce ${isDark ? 'bg-slate-500' : 'bg-gray-400'}`} style={{ animationDelay: '0ms' }} />
+                        <div className={`w-2 h-2 rounded-full animate-bounce ${isDark ? 'bg-slate-500' : 'bg-gray-400'}`} style={{ animationDelay: '150ms' }} />
+                        <div className={`w-2 h-2 rounded-full animate-bounce ${isDark ? 'bg-slate-500' : 'bg-gray-400'}`} style={{ animationDelay: '300ms' }} />
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </>
+          ) : (
+            <>
+              {/* 对比结果区 */}
+              <div className="flex-1 overflow-y-auto p-4">
+                {compareResult ? (
+                  compareLayout === 'horizontal' ? (
+                    <div className="grid grid-cols-2 gap-4 h-full">
+                      {/* 左侧结果 */}
+                      <div className={`rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                        <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                          <div className="flex items-center gap-2">
+                            <span className={`px-2 py-1 rounded text-xs font-medium ${
+                              isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                            }`}>
+                              {getModeLabel(compareResult.leftMode)}
+                            </span>
+                          </div>
+                        </div>
+                        <div className="p-4">
+                          <p className={`whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                            {compareResult.leftContent}
+                          </p>
+
+                          {/* 左侧来源 */}
+                          <div className={`mt-4 pt-4 border-t ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+                            <h4 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                              引用来源
+                            </h4>
+                            <div className="space-y-2">
+                              {compareResult.sources.left.map((source, idx) => (
+                                <div key={idx} className={`text-xs p-2 rounded ${isDark ? 'bg-slate-700/50' : 'bg-gray-50'}`}>
+                                  <span className={`font-medium ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                                    {source.title}
+                                  </span>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* 右侧结果 */}
+                      <div className={`rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                        <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                          <div className="flex items-center gap-2">
+                            <span className={`px-2 py-1 rounded text-xs font-medium ${
+                              isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
+                            }`}>
+                              {getModeLabel(compareResult.rightMode)}
+                            </span>
+                          </div>
+                        </div>
+                        <div className="p-4">
+                          <p className={`whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                            {compareResult.rightContent}
+                          </p>
+
+                          {/* 右侧来源 */}
+                          <div className={`mt-4 pt-4 border-t ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+                            <h4 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                              引用来源
+                            </h4>
+                            <div className="space-y-2">
+                              {compareResult.sources.right.map((source, idx) => (
+                                <div key={idx} className={`text-xs p-2 rounded ${isDark ? 'bg-slate-700/50' : 'bg-gray-50'}`}>
+                                  <span className={`font-medium ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                                    {source.title}
+                                  </span>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="space-y-4">
+                      {/* 上方结果 */}
+                      <div className={`rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                        <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                          <span className={`px-2 py-1 rounded text-xs font-medium ${
+                            isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                          }`}>
+                            {getModeLabel(compareResult.leftMode)}
+                          </span>
+                        </div>
+                        <div className="p-4">
+                          <p className={`whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                            {compareResult.leftContent}
+                          </p>
+                        </div>
+                      </div>
+
+                      {/* 下方结果 */}
+                      <div className={`rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                        <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
+                          <span className={`px-2 py-1 rounded text-xs font-medium ${
+                            isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
+                          }`}>
+                            {getModeLabel(compareResult.rightMode)}
+                          </span>
+                        </div>
+                        <div className="p-4">
+                          <p className={`whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                            {compareResult.rightContent}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  )
+                ) : (
+                  <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                    <GitCompare className="w-16 h-16 mb-4 opacity-50" />
+                    <p className="text-lg">对比模式</p>
+                    <p className="text-sm mt-2">输入问题，对比不同模式的回答效果</p>
+                  </div>
+                )}
+              </div>
+            </>
+          )}
+
+          {/* 底部输入区 */}
+          <div className={`border-t p-4 ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+            <div className={`flex items-end gap-3 rounded-xl p-3 ${isDark ? 'bg-slate-700/50' : 'bg-gray-100'}`}>
+              <textarea
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder={viewMode === 'compare' ? '输入问题进行对比分析...' : '输入你的问题...'}
+                rows={1}
+                className={`flex-1 bg-transparent resize-none focus:outline-none ${
+                  isDark ? 'text-white placeholder-slate-500' : 'text-gray-800 placeholder-gray-400'
+                }`}
+              />
+
+              <div className="flex items-center gap-2">
+                <button className={`p-2 rounded-lg transition-colors ${
+                  isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
+                }`}>
+                  <Upload className="w-5 h-5" />
+                </button>
+
+                <button
+                  onClick={() => {
+                    setMessages([]);
+                    setCompareResult(null);
+                  }}
+                  className={`p-2 rounded-lg transition-colors ${
+                    isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
+                  }`}
+                  title="重新提问"
+                >
+                  <RotateCcw className="w-5 h-5" />
+                </button>
+
+                <button
+                  onClick={handleSaveRecord}
+                  className={`p-2 rounded-lg transition-colors ${
+                    isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
+                  }`}
+                  title="保存记录"
+                >
+                  <Bookmark className="w-5 h-5" />
+                </button>
+
+                <button
+                  onClick={handleCollect}
+                  className={`p-2 rounded-lg transition-colors ${
+                    isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
+                  }`}
+                  title="加入收藏"
+                >
+                  <Bookmark className="w-5 h-5" />
+                </button>
+
+                <button
+                  onClick={viewMode === 'compare' ? handleCompare : handleSend}
+                  disabled={!inputValue.trim() || isLoading}
+                  className={`px-4 py-2 rounded-lg font-medium transition-all flex items-center gap-2 ${
+                    inputValue.trim() && !isLoading
+                      ? isDark
+                        ? 'bg-blue-600 hover:bg-blue-700 text-white'
+                        : 'bg-red-500 hover:bg-red-600 text-white'
+                      : isDark
+                        ? 'bg-slate-600 text-slate-400'
+                        : 'bg-gray-300 text-gray-500'
+                  }`}
+                >
+                  <Send className="w-4 h-4" />
+                  发送
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 右侧辅助区 */}
+        {viewMode === 'single' && showProcess && (
+          <div className={`w-72 border-l flex-shrink-0 overflow-y-auto p-4 ${
+            isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
+          }`}>
+            {/* 检索过程 */}
+            <div className="mb-6">
+              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                检索过程
+              </h3>
+              <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>当前模式</span>
+                    <span className={`text-sm font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                      {searchProcess.currentMode}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>检索轮次</span>
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      {searchProcess.rounds}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>命中数</span>
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      {searchProcess.hits}
+                    </span>
+                  </div>
+                  {searchProcess.queryRewrite && (
+                    <div>
+                      <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>Query改写</span>
+                      <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                        {searchProcess.queryRewrite}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 对比模式的差异总结 */}
+        {viewMode === 'compare' && compareResult?.differences && (
+          <div className={`w-72 border-l flex-shrink-0 overflow-y-auto p-4 ${
+            isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
+          }`}>
+            <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+              差异总结
+            </h3>
+            <div className={`p-4 rounded-xl space-y-4 ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+              <div>
+                <span className={`text-xs flex items-center gap-1 ${isDark ? 'text-green-400' : 'text-green-600'}`}>
+                  <CheckCircle className="w-3 h-3" />
+                  一致观点
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.consensus}
+                </p>
+              </div>
+              <div>
+                <span className={`text-xs flex items-center gap-1 ${isDark ? 'text-yellow-400' : 'text-yellow-600'}`}>
+                  <AlertCircle className="w-3 h-3" />
+                  差异观点
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.differences}
+                </p>
+              </div>
+              <div>
+                <span className={`text-xs ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                  {getModeLabel(compareResult.leftMode)}优势
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.leftAdvantage}
+                </p>
+              </div>
+              <div>
+                <span className={`text-xs ${isDark ? 'text-purple-400' : 'text-purple-600'}`}>
+                  {getModeLabel(compareResult.rightMode)}优势
+                </span>
+                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {compareResult.differences.rightAdvantage}
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default GeneralQA;
diff --git a/web-code/pages/KnowledgeBaseResourceManagement.tsx b/web-code/pages/KnowledgeBaseResourceManagement.tsx
new file mode 100644
index 00000000..3d2cb1de
--- /dev/null
+++ b/web-code/pages/KnowledgeBaseResourceManagement.tsx
@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from "react";
+import { useTheme } from "../contexts/ThemeContext";
+import { PageType } from "../components/Sidebar";
+const knowledgeURL = import.meta.env.VITE_AIPI_KNOWLEDGE_URL || "";
+import "./css/KnowledgeBaseResourceManagement.css";
+import { requestCrudService } from "@/service/request-axios-service";
+
+interface KnowledgeBaseResourceManagementProps {
+  onNavigate: (page: PageType) => void;
+}
+
+const KnowledgeBaseResourceManagement: React.FC<
+  KnowledgeBaseResourceManagementProps
+> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+  const service = requestCrudService;
+  const [iframeUrl, setIframeUrl] = useState("");
+
+  useEffect(() => {
+    initIframeUrl();
+  }, []);
+
+  const initIframeUrl = async () => {
+    // const url = `${knowledgeURL}/#/knowledge/knowledge-search?isIframe=true`;
+
+    const jsonStr = localStorage.getItem("userInfo");
+    console.log('jsonStr', jsonStr)
+    if (jsonStr) {
+      const userInfo = JSON.parse(jsonStr);
+      console.log('userInfo', userInfo);
+      const url = `https://ch1.b.uat.4.cn/knowes/api/iframeKnowledgeUrl`;
+      const token = userInfo.accessToken;
+      service.post(url, { token, skin: "red" }).then((res:any) => {
+        console.log({ iframeUrl: res.iframeUrl});
+        setIframeUrl(
+          res.iframeUrl
+        );
+      });
+    }
+
+    // setIframeUrl(
+    //   "http://localhost:4210/#/knowledge/knowledge-search?isIframe=true"
+    // );
+  };
+
+  return (
+    <div className="iframe-container">
+      <iframe src={iframeUrl} className="full-size-iframe"></iframe>
+    </div>
+  );
+};
+
+export default KnowledgeBaseResourceManagement;
diff --git a/web-code/pages/LightAppCenter.tsx b/web-code/pages/LightAppCenter.tsx
new file mode 100644
index 00000000..90521a35
--- /dev/null
+++ b/web-code/pages/LightAppCenter.tsx
@@ -0,0 +1,485 @@
+import React, { useState } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import {
+  BarChart,
+  FileText,
+  Table,
+  Search,
+  Send,
+  Sparkles,
+  Clock,
+  ChevronRight,
+  Bot,
+  Loader2,
+  Copy,
+  CheckCheck,
+  Download,
+  RefreshCw,
+  FileBarChart,
+  Database,
+  Brain,
+  PieChart,
+  LineChart,
+  FileSpreadsheet,
+  FileSearch,
+  BookOpen,
+} from 'lucide-react';
+
+interface LightAppCenterProps {
+  onNavigate: (page: string) => void;
+  initialApp?: 'analysis' | 'report' | 'data' | 'research';
+}
+
+type AppType = 'analysis' | 'report' | 'data' | 'research';
+
+interface AppCard {
+  id: AppType;
+  title: string;
+  description: string;
+  icon: React.ElementType;
+  color: string;
+}
+
+const apps: AppCard[] = [
+  {
+    id: 'analysis',
+    title: '快速分析',
+    description: '对文本、数据进行快速分析处理，提取关键信息和洞察',
+    icon: BarChart,
+    color: 'blue',
+  },
+  {
+    id: 'report',
+    title: '报告生成',
+    description: '基于输入内容生成结构化分析报告，支持多种格式',
+    icon: FileText,
+    color: 'green',
+  },
+  {
+    id: 'data',
+    title: '数据处理',
+    description: '数据清洗、转换、统计和可视化处理',
+    icon: Table,
+    color: 'purple',
+  },
+  {
+    id: 'research',
+    title: '研究助手',
+    description: '辅助学术研究和资料整理，支持文献分析和摘要',
+    icon: Search,
+    color: 'orange',
+  },
+];
+
+const LightAppCenter: React.FC<LightAppCenterProps> = ({ onNavigate, initialApp }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const [selectedApp, setSelectedApp] = useState<AppType | null>(initialApp || null);
+  const [input, setInput] = useState('');
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [result, setResult] = useState('');
+  const [copied, setCopied] = useState(false);
+  const [activeTab, setActiveTab] = useState<'input' | 'history'>('input');
+
+  const handleAppSelect = (app: AppCard) => {
+    setSelectedApp(app.id);
+    setInput('');
+    setResult('');
+  };
+
+  const handleSubmit = async () => {
+    if (!input.trim() || !selectedApp) return;
+
+    setIsProcessing(true);
+    setResult('');
+
+    // 模拟处理过程
+    await new Promise(resolve => setTimeout(resolve, 1500));
+
+    // 根据不同应用生成模拟结果
+    let mockResult = '';
+    switch (selectedApp) {
+      case 'analysis':
+        mockResult = `【分析结果】
+
+1. 关键主题
+   • 主题A：核心概念和定义
+   • 主题B：应用场景和实践
+   • 主题C：发展趋势和展望
+
+2. 情感分析
+   • 整体倾向：中性偏正面
+   • 关键情感词：创新、发展、应用
+
+3. 关键实体
+   • 机构：示例机构
+   • 人物：相关专家
+   • 地点：主要应用区域
+
+4. 重要数据
+   • 增长率：15-20%
+   • 覆盖范围：多个领域
+   • 时间周期：持续进行`;
+        break;
+      case 'report':
+        mockResult = `# 分析报告
+
+## 概述
+基于提供的内容，生成以下分析报告。
+
+## 主要发现
+
+### 1. 核心内容
+详细描述主要发现和观察结果...
+
+### 2. 深入分析
+对关键点进行深入分析和解读...
+
+### 3. 结论建议
+基于分析结果提出建议和行动方案...
+
+## 附录
+- 数据来源
+- 分析方法
+- 局限性说明`;
+        break;
+      case 'data':
+        mockResult = `【数据处理结果】
+
+| 指标 | 数值 | 变化 |
+|------|------|------|
+| 样本量 | 1,234 | +12% |
+| 准确率 | 95.6% | +3.2% |
+| 覆盖率 | 89.3% | +8.7% |
+
+统计摘要：
+• 总计处理 1,234 条记录
+• 有效数据 1,156 条（93.7%）
+• 异常数据 78 条（6.3%）
+
+图表数据已准备好可视化`;
+        break;
+      case 'research':
+        mockResult = `【研究摘要】
+
+## 文献概览
+找到相关研究文献 12 篇，主要涉及以下方向：
+
+### 核心观点
+1. 研究方向A - 理论基础
+2. 研究方向B - 方法论
+3. 研究方向C - 实证应用
+
+### 关键结论
+• 结论1：...
+• 结论2：...
+• 结论3：...
+
+### 研究空白
+当前研究存在以下空白点，可作为进一步探索的方向...
+
+### 建议阅读
+1. 《核心文献一》- 理论基础
+2. 《核心文献二》- 方法创新
+3. 《核心文献三》- 实践应用`;
+        break;
+    }
+
+    setResult(mockResult);
+    setIsProcessing(false);
+  };
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(result);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const getColorClasses = (color: string) => {
+    const colors: Record<string, { bg: string; text: string; border: string; light: string }> = {
+      blue: {
+        bg: isDark ? 'bg-blue-500/20' : 'bg-blue-50',
+        text: isDark ? 'text-blue-400' : 'text-blue-600',
+        border: isDark ? 'border-blue-500/30' : 'border-blue-200',
+        light: isDark ? 'hover:bg-blue-500/30' : 'hover:bg-blue-100',
+      },
+      green: {
+        bg: isDark ? 'bg-green-500/20' : 'bg-green-50',
+        text: isDark ? 'text-green-400' : 'text-green-600',
+        border: isDark ? 'border-green-500/30' : 'border-green-200',
+        light: isDark ? 'hover:bg-green-500/30' : 'hover:bg-green-100',
+      },
+      purple: {
+        bg: isDark ? 'bg-purple-500/20' : 'bg-purple-50',
+        text: isDark ? 'text-purple-400' : 'text-purple-600',
+        border: isDark ? 'border-purple-500/30' : 'border-purple-200',
+        light: isDark ? 'hover:bg-purple-500/30' : 'hover:bg-purple-100',
+      },
+      orange: {
+        bg: isDark ? 'bg-orange-500/20' : 'bg-orange-50',
+        text: isDark ? 'text-orange-400' : 'text-orange-600',
+        border: isDark ? 'border-orange-500/30' : 'border-orange-200',
+        light: isDark ? 'hover:bg-orange-500/30' : 'hover:bg-orange-100',
+      },
+    };
+    return colors[color];
+  };
+
+  const selectedAppData = apps.find(a => a.id === selectedApp);
+
+  return (
+    <div className="space-y-6">
+      {/* 页面标题 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className={`text-2xl font-bold theme-text ${isDark ? 'text-white' : 'text-gray-900'}`}>
+            轻应用中心
+          </h1>
+          <p className={`mt-1 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+            快速调用工具完成临时分析需求
+          </p>
+        </div>
+        {selectedApp && (
+          <button
+            onClick={() => setSelectedApp(null)}
+            className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
+              isDark
+                ? 'bg-slate-700 text-slate-300 hover:bg-slate-600'
+                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+            }`}
+          >
+            返回应用列表
+          </button>
+        )}
+      </div>
+
+      {/* 应用选择卡片 */}
+      {!selectedApp && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {apps.map((app) => {
+            const Icon = app.icon;
+            const colors = getColorClasses(app.color);
+            return (
+              <button
+                key={app.id}
+                onClick={() => handleAppSelect(app)}
+                className={`p-6 rounded-xl border transition-all duration-200 text-left group ${
+                  isDark
+                    ? `bg-slate-800/50 ${colors.border} hover:${colors.bg}`
+                    : `bg-white ${colors.border} hover:${colors.bg}`
+                }`}
+              >
+                <div className="flex items-start gap-4">
+                  <div className={`p-3 rounded-lg ${colors.bg}`}>
+                    <Icon className={`w-6 h-6 ${colors.text}`} />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className={`font-semibold group-hover:${colors.text} ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                      {app.title}
+                    </h3>
+                    <p className={`mt-1 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                      {app.description}
+                    </p>
+                  </div>
+                  <ChevronRight className={`w-5 h-5 ${isDark ? 'text-slate-500' : 'text-gray-400'} group-hover:${colors.text}`} />
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {/* 应用工作区 */}
+      {selectedApp && selectedAppData && (
+        <div className={`rounded-xl border overflow-hidden ${
+          isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
+        }`}>
+          {/* 应用标题栏 */}
+          <div className={`px-6 py-4 border-b flex items-center gap-3 ${
+            isDark ? 'border-slate-700 bg-slate-800' : 'border-gray-200 bg-gray-50'
+          }`}>
+            <div className={`p-2 rounded-lg ${getColorClasses(selectedAppData.color).bg}`}>
+              {React.createElement(selectedAppData.icon, {
+                className: `w-5 h-5 ${getColorClasses(selectedAppData.color).text}`
+              })}
+            </div>
+            <div>
+              <h2 className={`font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                {selectedAppData.title}
+              </h2>
+              <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                {selectedAppData.description}
+              </p>
+            </div>
+          </div>
+
+          {/* 标签页 */}
+          <div className={`px-6 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
+            <div className="flex gap-4">
+              <button
+                onClick={() => setActiveTab('input')}
+                className={`py-3 px-1 text-sm font-medium border-b-2 transition-colors ${
+                  activeTab === 'input'
+                    ? isDark
+                      ? 'border-blue-500 text-blue-400'
+                      : 'border-red-500 text-red-600'
+                    : isDark
+                      ? 'border-transparent text-slate-400 hover:text-slate-300'
+                      : 'border-transparent text-gray-500 hover:text-gray-700'
+                }`}
+              >
+                输入分析
+              </button>
+              <button
+                onClick={() => setActiveTab('history')}
+                className={`py-3 px-1 text-sm font-medium border-b-2 transition-colors ${
+                  activeTab === 'history'
+                    ? isDark
+                      ? 'border-blue-500 text-blue-400'
+                      : 'border-red-500 text-red-600'
+                    : isDark
+                      ? 'border-transparent text-slate-400 hover:text-slate-300'
+                      : 'border-transparent text-gray-500 hover:text-gray-700'
+                }`}
+              >
+                历史记录
+              </button>
+            </div>
+          </div>
+
+          <div className="p-6">
+            {activeTab === 'input' ? (
+              <div className="space-y-4">
+                {/* 输入区域 */}
+                <div>
+                  <label className={`block text-sm font-medium mb-2 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                    输入内容
+                  </label>
+                  <textarea
+                    value={input}
+                    onChange={(e) => setInput(e.target.value)}
+                    placeholder={`请输入需要${selectedAppData.title}的内容...`}
+                    rows={6}
+                    className={`w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 resize-none ${
+                      isDark
+                        ? 'bg-slate-900 border-slate-600 text-slate-200 placeholder-slate-500 focus:border-blue-500 focus:ring-blue-500/20'
+                        : 'bg-gray-50 border-gray-300 text-gray-900 placeholder-gray-400 focus:border-red-500 focus:ring-red-500/20'
+                    }`}
+                  />
+                </div>
+
+                {/* 操作按钮 */}
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <button className={`p-2 rounded-lg ${isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}>
+                      <RefreshCw className="w-4 h-4" />
+                    </button>
+                    <button className={`p-2 rounded-lg ${isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}>
+                      <FileBarChart className="w-4 h-4" />
+                    </button>
+                    <button className={`p-2 rounded-lg ${isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}>
+                      <Database className="w-4 h-4" />
+                    </button>
+                  </div>
+                  <button
+                    onClick={handleSubmit}
+                    disabled={!input.trim() || isProcessing}
+                    className={`px-6 py-2.5 rounded-lg font-medium flex items-center gap-2 transition-all duration-200 ${
+                      !input.trim() || isProcessing
+                        ? isDark
+                          ? 'bg-slate-700 text-slate-500 cursor-not-allowed'
+                          : 'bg-gray-200 text-gray-400 cursor-not-allowed'
+                        : isDark
+                          ? 'bg-blue-600 text-white hover:bg-blue-500'
+                          : 'bg-red-500 text-white hover:bg-red-600'
+                    }`}
+                  >
+                    {isProcessing ? (
+                      <>
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                        处理中...
+                      </>
+                    ) : (
+                      <>
+                        <Send className="w-4 h-4" />
+                        开始处理
+                      </>
+                    )}
+                  </button>
+                </div>
+
+                {/* 结果区域 */}
+                {result && (
+                  <div className={`mt-6 p-4 rounded-lg border ${
+                    isDark ? 'bg-slate-900 border-slate-700' : 'bg-gray-50 border-gray-200'
+                  }`}>
+                    <div className="flex items-center justify-between mb-3">
+                      <div className="flex items-center gap-2">
+                        <Sparkles className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+                        <span className={`text-sm font-medium ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                          处理结果
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <button
+                          onClick={handleCopy}
+                          className={`p-1.5 rounded-lg transition-colors ${
+                            isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
+                          }`}
+                        >
+                          {copied ? (
+                            <CheckCheck className="w-4 h-4 text-green-500" />
+                          ) : (
+                            <Copy className="w-4 h-4" />
+                          )}
+                        </button>
+                        <button className={`p-1.5 rounded-lg transition-colors ${
+                          isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
+                        }`}>
+                          <Download className="w-4 h-4" />
+                        </button>
+                      </div>
+                    </div>
+                    <pre className={`whitespace-pre-wrap text-sm font-mono leading-relaxed ${
+                      isDark ? 'text-slate-300' : 'text-gray-600'
+                    }`}>
+                      {result}
+                    </pre>
+                  </div>
+                )}
+              </div>
+            ) : (
+              <div className="text-center py-12">
+                <Clock className={`w-12 h-12 mx-auto mb-4 ${isDark ? 'text-slate-600' : 'text-gray-300'}`} />
+                <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                  暂无历史记录
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* 提示信息 */}
+      {!selectedApp && (
+        <div className={`p-4 rounded-lg border ${
+          isDark ? 'bg-blue-500/10 border-blue-500/30' : 'bg-blue-50 border-blue-200'
+        }`}>
+          <div className="flex items-start gap-3">
+            <Sparkles className={`w-5 h-5 mt-0.5 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
+            <div>
+              <p className={`text-sm font-medium ${isDark ? 'text-blue-300' : 'text-blue-800'}`}>
+                关于轻应用中心
+              </p>
+              <p className={`mt-1 text-sm ${isDark ? 'text-blue-400/80' : 'text-blue-700'}`}>
+                轻应用中心提供了一系列快速分析工具，适合处理临时性的分析需求。相比完整的任务级应用，轻应用更加轻量便捷，可以快速调用多种工具完成分析工作。
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LightAppCenter;
diff --git a/web-code/pages/LightAppRecords.tsx b/web-code/pages/LightAppRecords.tsx
new file mode 100644
index 00000000..d57813c2
--- /dev/null
+++ b/web-code/pages/LightAppRecords.tsx
@@ -0,0 +1,545 @@
+import React, { useState, useMemo, useEffect, useRef } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import {
+  Search,
+  Clock,
+  ChevronRight,
+  Download,
+  Send,
+  Trash2,
+  FileText,
+  User,
+  MessageSquare,
+  Network,
+  Target,
+  BookOpen,
+  History,
+  Filter,
+  Calendar,
+  AlertTriangle,
+  CheckCircle2,
+  Eye,
+} from 'lucide-react';
+import { LightAppType } from './LightAppSquare';
+import { requestCrudService } from '@/service/request-axios-service';
+import { DateRangePicker, DateRangePickerProps, DateRangeValue, Pagination, Select } from 'tdesign-react';
+import dayjs from 'dayjs';
+
+// 运行记录类型
+interface RunRecord {
+  id: string;
+  appId: LightAppType;
+  appName: string;
+  appIcon: React.ElementType;
+  iconColor: string;
+  input: string;
+  runTime: string;
+  resultSummary: string;
+  status: number;
+  riskLevel?: 'low' | 'medium' | 'high';
+  sentiment?: string;
+  inputObject?: string;
+}
+
+interface stateData {
+  startTime: string;
+  endTime: string;
+  pageNum: number;
+  pageSize: number;
+  status: string | number;
+}
+
+// 应用信息映射
+const appInfoMap: Record<LightAppType, { name: string; icon: React.ElementType; iconColor: string }> = {
+  'info-ty': { name: '信息TY', icon: FileText, iconColor: 'text-blue-500' },
+  'info-pg': { name: '信息PG', icon: User, iconColor: 'text-cyan-500' },
+  'info-spread': { name: '信息传播分析', icon: Network, iconColor: 'text-teal-500' },
+  'account-pg': { name: '账号PG', icon: User, iconColor: 'text-purple-500' },
+  'sentiment': { name: '三情分析', icon: MessageSquare, iconColor: 'text-orange-500' },
+  'event': { name: '事件分析', icon: Target, iconColor: 'text-red-500' },
+  'topic': { name: '专题分析', icon: BookOpen, iconColor: 'text-green-500' },
+};
+
+interface LightAppRecordsProps {
+  onNavigate: (page: string, appId?: string) => void;
+}
+
+const appIconList = [
+  {
+    appIcon: MessageSquare,
+    iconColor: 'text-orange-500',
+  },
+  {
+    appIcon: Target,
+    iconColor: 'text-red-500',
+  },
+  {
+    appIcon: User,
+    iconColor: 'text-purple-500',
+  },
+  {
+    appIcon: Network,
+    iconColor: 'text-teal-500',
+  },
+  {
+    appIcon: BookOpen,
+    iconColor: 'text-green-500',
+  },
+  {
+    appIcon: FileText,
+    iconColor: 'text-blue-500',
+  },
+]
+
+const service = requestCrudService;
+const zncmUrl = import.meta.env.VITE_API_BASE_URL || '';
+const LightAppRecords: React.FC<LightAppRecordsProps> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const [searchQuery, setSearchQuery] = useState('');
+  const [appFilter, setAppFilter] = useState<LightAppType | 'all'>('all');
+  const [timeFilter, setTimeFilter] = useState<string>('all');
+  const [records, setRecords] = useState<RunRecord[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [pageNum, setPageNum] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(10); // 每页显示 10 条
+  const [total, setTotal] = useState<number>(0);
+  const [presets] = useState<DateRangePickerProps['presets']>({
+    最近7天: [dayjs().subtract(6, 'day').toDate(), dayjs().toDate()],
+    最近3天: [dayjs().subtract(2, 'day').toDate(), dayjs().toDate()],
+    今天: [dayjs().toDate(), dayjs().toDate()],
+  });
+  const [range, setRange] = useState<DateRangeValue>([]);
+  const state = useRef<stateData>({
+    startTime: '',
+    endTime: '',
+    pageNum: 1,
+    pageSize: 10,
+    status: ''
+  })
+  const [statusValue, setStatusValue] = useState<number | string>('');
+  // 执行状态,0=执行中, 1=成功, 2=失败, 3=部分成功
+  const [statusList] = useState([
+    { value: '', label: '全部' },
+    { value: 0, label: '执行中' },
+    { value: 1, label: '成功' },
+    { value: 2, label: '失败' },
+    { value: 3, label: '部分成功' },
+  ])
+
+  const statusChange = async (val) => {
+    state.current.status = val;
+    setStatusValue(val);
+    await historyPageSearch();
+  }
+
+  // 时间日期选择器查询
+  const setRangeChange = async (val) => {
+    setRange(val);
+    console.log('时间日期', val);
+    state.current.startTime = '';
+    state.current.endTime = '';
+    if (val.length > 0) {
+      state.current.startTime = val[0];
+      state.current.endTime = val[1];
+    }
+    await historyPageSearch();
+  }
+
+  // 过滤记录
+  // const filteredRecords = useMemo(() => {
+  //   return records.filter(record => {
+  //     // 搜索过滤
+  //     const matchesSearch = searchQuery === '' ||
+  //       record.input.toLowerCase().includes(searchQuery.toLowerCase()) ||
+  //       record.appName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+  //       record.resultSummary.toLowerCase().includes(searchQuery.toLowerCase());
+
+  //     // 应用类型过滤
+  //     const matchesApp = appFilter === 'all' || record.appId === appFilter;
+
+  //     // 时间过滤
+  //     let matchesTime = true;
+  //     if (timeFilter !== 'all') {
+  //       const recordDate = new Date(record.runTime);
+  //       const now = new Date();
+  //       if (timeFilter === '7d') {
+  //         const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+  //         matchesTime = recordDate >= weekAgo;
+  //       } else if (timeFilter === '30d') {
+  //         const monthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
+  //         matchesTime = recordDate >= monthAgo;
+  //       }
+  //     }
+
+  //     return matchesSearch && matchesApp && matchesTime;
+  //   });
+  // }, [records, searchQuery, appFilter, timeFilter]);
+
+  // 查看详情
+  const handleView = (record: RunRecord) => {
+    console.log('查看详情:', record);
+
+    onNavigate('light-app-run', record.appId);
+  };
+
+  // 导出
+  const handleExport = (record: RunRecord) => {
+    const data = JSON.stringify(record, null, 2);
+    const blob = new Blob([data], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${record.appName}_${record.runTime.replace(/[: ]/g, '-')}.json`;
+    a.click();
+  };
+
+  // 转正式任务
+  const handleConvert = (record: RunRecord) => {
+    onNavigate('task-create');
+  };
+
+  // 获取状态颜色
+  const getStatusColor = (status: number) => {
+    switch (status) {
+      case 1:
+        return { bg: 'bg-green-500/10', text: 'text-green-500', border: 'border-green-500/30' };
+      case 2:
+        return { bg: 'bg-red-500/10', text: 'text-red-500', border: 'border-red-500/30' };
+      case 3:
+        return { bg: 'bg-yellow-500/10', text: 'text-yellow-500', border: 'border-yellow-500/30' };
+      default:
+        return { bg: 'bg-gray-500/10', text: 'text-gray-500', border: 'border-gray-500/30' };
+    }
+  };
+
+  // 获取状态标签
+  const getStatusLabel = (status: number) => {
+    switch (status) {
+      case 0: return '执行中';
+      case 1: return '成功';
+      case 2: return '失败';
+      case 3: return '部分';
+      default: return status;
+    }
+  };
+
+
+  // 回车处理
+  const handleKeyDown = async (e) => {
+    if ((e.metaKey || e.ctrlKey || e.shiftKey) && e.key === "Enter") {
+      e.preventDefault();
+    } else if (e.keyCode === 13) {
+      e.preventDefault();
+      await historyPageSearch();
+    } else if (e.key === "/") {
+      e.preventDefault();
+    }
+  };
+
+  const historyPageSearch = async () => {
+    const parmy = {
+      appName: searchQuery,
+      keyword: '',
+      pageNum: state.current.pageNum,
+      pageSize: state.current.pageSize,
+      startTime: state.current.startTime,
+      endTime: state.current.endTime,
+      status: state.current.status
+    }
+    setLoading(true);
+    const res = await service.post(`${zncmUrl}/app/history/page`, parmy);
+    console.log('res', res);
+    setLoading(false);
+    const result = res.data;
+    result.records.forEach((item: RunRecord, index: number) => {
+      const realIndex = index % appIconList.length;
+      item.appIcon = appIconList[realIndex].appIcon;
+      item.iconColor = appIconList[realIndex].iconColor;
+    })
+    setTotal(result.total);
+    setRecords(result.records || '');
+  }
+
+  const pageIndexChange = async (value: number) => {
+    state.current.pageNum = value;
+    setPageNum(value);
+    await historyPageSearch();
+  }
+
+  const pageSizeChange = async (value: number) => {
+    state.current.pageSize = value;
+    setPageSize(value);
+    await historyPageSearch();
+  }
+
+  useEffect(() => {
+    fetch('https://ch1.b.uat.4.cn/zncmweb/templates/index.json') // 注意：不需要 public 前缀
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('网络请求失败');
+        }
+        return response.json();
+      })
+      .then(jsonData => {
+        console.log('jsonData', jsonData);
+      })
+      .catch(err => {
+        console.log(err);
+      });
+    historyPageSearch();
+  }, []);
+
+  return (
+    <div className="space-y-6">
+      {/* 顶部工具栏 */}
+      <div className={`rounded-xl border p-4 ${isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
+        }`}>
+        <div className="flex flex-col lg:flex-row lg:items-center gap-4">
+          {/* 面包屑和标题 */}
+          <div className="flex items-center gap-2 flex-1">
+            <History className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+            <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>轻应用中心 /</span>
+            <span className={`text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>运行记录</span>
+          </div>
+
+          {/* 搜索框 */}
+          <div className="flex-1 max-w-md">
+            <div className="relative">
+              <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
+              <input
+                type="text"
+                value={searchQuery}
+                onKeyDown={(e) => handleKeyDown(e)}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="搜索记录..."
+                className={`w-full pl-10 pr-4 py-2 rounded-lg border transition-colors focus:outline-none focus:ring-2 ${isDark
+                  ? 'bg-slate-900 border-slate-600 text-slate-200 placeholder-slate-500 focus:border-blue-500 focus:ring-blue-500/20'
+                  : 'bg-gray-50 border-gray-300 text-gray-900 placeholder-gray-400 focus:border-red-500 focus:ring-red-500/20'
+                  }`}
+              />
+            </div>
+          </div>
+
+          {/* 筛选 */}
+          <div className="flex items-center gap-3">
+            {/* <select
+              value={appFilter}
+              onChange={(e) => setAppFilter(e.target.value as LightAppType | 'all')}
+              className={`px-3 py-2 rounded-lg border text-sm transition-colors focus:outline-none focus:ring-2 ${isDark
+                ? 'bg-slate-900 border-slate-600 text-slate-200 focus:border-blue-500'
+                : 'bg-gray-50 border-gray-300 text-gray-700 focus:border-red-500'
+                }`}
+            >
+              <option value="all">全部应用</option>
+              <option value="info-ty">信息TY</option>
+              <option value="info-pg">信息PG</option>
+              <option value="info-spread">信息传播分析</option>
+              <option value="account-pg">账号PG</option>
+              <option value="sentiment">三情分析</option>
+              <option value="event">事件分析</option>
+              <option value="topic">专题分析</option>
+            </select> */}
+            <Select
+              value={statusValue}
+              onChange={statusChange}
+              style={{ width: '135px' }}
+              clearable
+              options={statusList} />
+            <DateRangePicker value={range} presets={presets} onChange={(val) => setRangeChange(val)} enableTimePicker={true} clearable />
+          </div>
+        </div>
+      </div>
+
+      {/* 记录列表 */}
+      <div className={`rounded-xl border overflow-hidden ${isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
+        }`}>
+        {/* 表头 */}
+        <div className={`grid grid-cols-12 gap-4 px-4 py-3 border-b ${isDark ? 'border-slate-700 bg-slate-800/30' : 'border-gray-200 bg-gray-50'
+          }`}>
+          <div className={`col-span-3 text-xs font-medium ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+            应用名称
+          </div>
+          <div className={`col-span-2 text-xs font-medium ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+            输入对象
+          </div>
+          <div className={`col-span-2 text-xs font-medium ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+            运行时间
+          </div>
+          <div className={`col-span-2 text-xs font-medium ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+            结果摘要
+          </div>
+          <div className={`col-span-1 text-xs font-medium ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+            状态
+          </div>
+          <div className={`col-span-2 text-xs font-medium ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+            操作
+          </div>
+        </div>
+
+        {/* 记录行 */}
+        {records.length > 0 ? (
+          records.map((record) => {
+            const Icon = record.appIcon;
+            const statusColor = getStatusColor(record.status);
+
+            return (
+              <div
+                key={record.id}
+                className={`grid grid-cols-12 gap-4 px-4 py-4 border-b items-center ${isDark ? 'border-slate-700/50 hover:bg-slate-700/30' : 'border-gray-100 hover:bg-gray-50'
+                  } transition-colors`}
+              >
+                {/* 应用名称 */}
+                <div className="col-span-3 flex items-center gap-3">
+                  <div className={`p-2 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-gray-100'}`}>
+                    <Icon className={`w-4 h-4 ${record.iconColor}`} />
+                  </div>
+                  <div>
+                    <span className={`text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                      {record.appName}
+                    </span>
+                    {/* {record.sentiment && (
+                      <span className={`ml-2 px-1.5 py-0.5 rounded text-xs ${record.sentiment === '偏正' ? 'bg-green-500/10 text-green-500' :
+                        record.sentiment === '偏负' ? 'bg-red-500/10 text-red-500' :
+                          'bg-gray-500/10 text-gray-500'
+                        }`}>
+                        {record.sentiment}
+                      </span>
+                    )} */}
+                    {/* {record.riskLevel && (
+                      <span className={`ml-2 px-1.5 py-0.5 rounded text-xs ${record.riskLevel === 'high' ? 'bg-red-500/10 text-red-500' :
+                        record.riskLevel === 'medium' ? 'bg-yellow-500/10 text-yellow-500' :
+                          'bg-green-500/10 text-green-500'
+                        }`}>
+                        {record.riskLevel === 'high' ? '高风险' :
+                          record.riskLevel === 'medium' ? '中风险' : '低风险'}
+                      </span>
+                    )} */}
+                  </div>
+                </div>
+
+                {/* 输入对象 */}
+                <div className="col-span-2">
+                  <span className={`text-sm truncate block ${isDark ? 'text-slate-400' : 'text-gray-600'}`} title={record.input}>
+                    {record.inputObject || '-'}
+                  </span>
+                </div>
+
+                {/* 运行时间 */}
+                <div className="col-span-2">
+                  <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-600'}`}>
+                    {record.runTime}
+                  </span>
+                </div>
+
+                {/* 结果摘要 */}
+                <div className="col-span-2">
+                  <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                    {record.resultSummary || '-'}
+                  </span>
+                </div>
+
+                {/* 状态 */}
+                <div className="col-span-1">
+                  <span className={`px-2 py-1 rounded text-xs font-medium ${statusColor.bg} ${statusColor.text}`}>
+                    {getStatusLabel(record.status)}
+                  </span>
+                </div>
+
+                {/* 操作 */}
+                <div className="col-span-2 flex items-center gap-1">
+                  <button
+                    onClick={() => handleView(record)}
+                    className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
+                      }`}
+                    title="查看"
+                  >
+                    <Eye className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => handleExport(record)}
+                    className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
+                      }`}
+                    title="导出"
+                  >
+                    <Download className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => handleConvert(record)}
+                    className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
+                      }`}
+                    title="转正式任务"
+                  >
+                    <Send className="w-4 h-4" />
+                  </button>
+                  <button
+                    className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
+                      }`}
+                    title="删除"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            );
+          })
+        ) : (
+          <div className="text-center py-12">
+            <History className={`w-12 h-12 mx-auto mb-4 ${isDark ? 'text-slate-600' : 'text-gray-300'}`} />
+            <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              暂无运行记录
+            </p>
+          </div>
+        )}
+      </div>
+
+      {/* 统计信息 */}
+      {/* <div className={`rounded-xl border p-4 ${isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
+        }`}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-6">
+            <div className="flex items-center gap-2">
+              <CheckCircle2 className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+              <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                成功: <span className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>{filteredRecords.filter(r => r.status === 'success').length}</span>
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <AlertTriangle className={`w-4 h-4 ${isDark ? 'text-yellow-400' : 'text-yellow-500'}`} />
+              <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                部分: <span className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>{filteredRecords.filter(r => r.status === 'partial').length}</span>
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                共 <span className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>{filteredRecords.length}</span> 条记录
+              </span>
+            </div>
+          </div>
+          <button
+            onClick={() => onNavigate('light-app-square')}
+            className={`px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 transition-colors ${isDark
+              ? 'bg-blue-500/20 text-blue-400 hover:bg-blue-500/30'
+              : 'bg-red-50 text-red-600 hover:bg-red-100'
+              }`}
+          >
+            <FileText className="w-4 h-4" />
+            新建分析
+          </button>
+        </div>
+      </div> */}
+      {/* 分页 */}
+      <div className="p-4 text-center">
+        <Pagination
+          total={total}
+          current={pageNum}
+          pageSize={pageSize}
+          onCurrentChange={(page) => pageIndexChange(Number(page))}
+          onPageSizeChange={(size) => pageSizeChange(Number(size))}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default LightAppRecords;
diff --git a/web-code/pages/LightAppRun.tsx b/web-code/pages/LightAppRun.tsx
new file mode 100644
index 00000000..08234060
--- /dev/null
+++ b/web-code/pages/LightAppRun.tsx
@@ -0,0 +1,996 @@
+import React, { useState, useEffect } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import {
+  ArrowLeft,
+  Save,
+  Download,
+  Send,
+  RotateCcw,
+  PlayCircle,
+  CheckCircle2,
+  Circle,
+  Loader2,
+  ChevronDown,
+  ChevronRight,
+  FileText,
+  Link2,
+  Upload,
+  Clock,
+  AlertTriangle,
+  Sparkles,
+  Users,
+  Copy,
+  CheckCheck,
+  RefreshCw,
+  Database,
+  BarChart3,
+  PieChart,
+  LineChart,
+  Table,
+  User,
+  MessageSquare,
+  Network,
+  Target,
+  BookOpen,
+  Calendar,
+  Search,
+} from 'lucide-react';
+import { LightAppType } from './LightAppSquare';
+
+// 应用配置接口
+interface AppConfig {
+  id: LightAppType;
+  name: string;
+  description: string;
+  icon: React.ElementType;
+  iconColor: string;
+  bgColor: string;
+  inputs: {
+    name: string;
+    label: string;
+    placeholder: string;
+    type: 'text' | 'textarea' | 'link' | 'upload';
+    required: boolean;
+  }[];
+  params: {
+    name: string;
+    label: string;
+    options: { value: string; label: string }[];
+    default: string;
+  }[];
+  dimensions: {
+    name: string;
+    label: string;
+    default: boolean;
+  }[];
+  steps: string[];
+  previewFields: { key: string; label: string }[];
+}
+
+interface LightAppRunProps {
+  onNavigate: (page: string, appId?: string) => void;
+  appId?: LightAppType;
+}
+
+// 应用配置数据
+const appConfigs: Record<LightAppType, AppConfig> = {
+  'info-ty': {
+    id: 'info-ty',
+    name: '信息TY',
+    description: '围绕单条或多条信息进行TY向分析',
+    icon: FileText,
+    iconColor: 'text-blue-500',
+    bgColor: 'bg-blue-500/10',
+    inputs: [
+      { name: 'mainInput', label: '信息文本', placeholder: '请输入信息内容...', type: 'textarea', required: true },
+      { name: 'link', label: '信息链接', placeholder: '可选，粘贴信息链接', type: 'link', required: false },
+      { name: 'materials', label: '上传材料', placeholder: '支持 txt, pdf, docx', type: 'upload', required: false },
+    ],
+    params: [
+      { name: 'timeRange', label: '时间范围', options: [
+        { value: '7d', label: '近7天' },
+        { value: '30d', label: '近30天' },
+        { value: '90d', label: '近90天' },
+        { value: 'all', label: '全部' },
+      ], default: '30d' },
+      { name: 'dataRange', label: '数据范围', options: [
+        { value: 'all', label: '全部' },
+        { value: '国内', label: '国内' },
+        { value: '境外', label: '境外' },
+      ], default: 'all' },
+      { name: 'depth', label: '输出深度', options: [
+        { value: 'brief', label: '简略' },
+        { value: 'standard', label: '标准' },
+        { value: 'detailed', label: '详细' },
+      ], default: 'standard' },
+    ],
+    dimensions: [
+      { name: 'basic', label: '基础分析', default: true },
+      { name: 'risk', label: '风险提示', default: true },
+      { name: 'summary', label: '摘要结论', default: true },
+    ],
+    steps: ['已识别输入对象', '已获取数据', '已完成核心分析', '已生成结果'],
+    previewFields: [
+      { key: 'title', label: '信息标题' },
+      { key: 'time', label: '发布时间' },
+      { key: 'source', label: '信息来源' },
+    ],
+  },
+  'info-pg': {
+    id: 'info-pg',
+    name: '信息PG',
+    description: '围绕单条或多条信息进行PG向分析',
+    icon: User,
+    iconColor: 'text-cyan-500',
+    bgColor: 'bg-cyan-500/10',
+    inputs: [
+      { name: 'mainInput', label: '信息文本', placeholder: '请输入信息内容...', type: 'textarea', required: true },
+      { name: 'materials', label: '上传材料', placeholder: '支持 txt, pdf, docx', type: 'upload', required: false },
+    ],
+    params: [
+      { name: 'timeRange', label: '时间范围', options: [
+        { value: '30d', label: '近30天' },
+        { value: '90d', label: '近90天' },
+        { value: '180d', label: '近半年' },
+        { value: 'all', label: '全部' },
+      ], default: '30d' },
+      { name: 'count', label: '抓取条数', options: [
+        { value: '50', label: '50条' },
+        { value: '100', label: '100条' },
+        { value: '200', label: '200条' },
+        { value: '500', label: '500条' },
+      ], default: '100' },
+    ],
+    dimensions: [
+      { name: 'profile', label: '画像分析', default: true },
+      { name: 'tendency', label: '内容倾向', default: true },
+      { name: 'behavior', label: '行为特征', default: true },
+    ],
+    steps: ['已识别输入对象', '已获取数据', '已完成画像分析', '已生成结果'],
+    previewFields: [
+      { key: 'title', label: '信息标题' },
+      { key: 'author', label: '发布者' },
+      { key: 'type', label: '内容类型' },
+    ],
+  },
+  'info-spread': {
+    id: 'info-spread',
+    name: '信息传播分析',
+    description: '分析信息传播路径、传播范围与传播表现',
+    icon: Network,
+    iconColor: 'text-teal-500',
+    bgColor: 'bg-teal-500/10',
+    inputs: [
+      { name: 'link', label: '信息链接', placeholder: '请粘贴信息链接', type: 'link', required: true },
+      { name: 'text', label: '信息文本', placeholder: '可选，补充信息文本', type: 'textarea', required: false },
+    ],
+    params: [
+      { name: 'scope', label: '传播范围', options: [
+        { value: 'all', label: '全部' },
+        { value: 'domestic', label: '国内' },
+        { value: 'overseas', label: '境外' },
+      ], default: 'all' },
+      { name: 'timeRange', label: '时间范围', options: [
+        { value: '7d', label: '近7天' },
+        { value: '30d', label: '近30天' },
+        { value: '90d', label: '近90天' },
+      ], default: '7d' },
+    ],
+    dimensions: [
+      { name: 'path', label: '传播路径', default: true },
+      { name: 'nodes', label: '传播节点', default: true },
+      { name: 'performance', label: '传播表现', default: true },
+      { name: 'impact', label: '影响摘要', default: true },
+    ],
+    steps: ['已识别信息', '已获取传播数据', '已完成传播路径分析', '已生成结果'],
+    previewFields: [
+      { key: 'title', label: '信息标题' },
+      { key: 'originalPlatform', label: '原始平台' },
+      { key: 'totalSpread', label: '总传播量' },
+    ],
+  },
+  'account-pg': {
+    id: 'account-pg',
+    name: '账号PG',
+    description: '围绕账号内容与行为特征进行PG分析',
+    icon: Users,
+    iconColor: 'text-purple-500',
+    bgColor: 'bg-purple-500/10',
+    inputs: [
+      { name: 'accountId', label: '账号ID/链接', placeholder: '请输入账号ID或粘贴账号链接', type: 'text', required: true },
+      { name: 'materials', label: '上传内容包', placeholder: '支持 json, csv, zip', type: 'upload', required: false },
+    ],
+    params: [
+      { name: 'timeRange', label: '时间范围', options: [
+        { value: '30d', label: '近30天' },
+        { value: '90d', label: '近90天' },
+        { value: '180d', label: '近半年' },
+        { value: 'all', label: '全部' },
+      ], default: '30d' },
+      { name: 'count', label: '抓取条数', options: [
+        { value: '50', label: '50条' },
+        { value: '100', label: '100条' },
+        { value: '200', label: '200条' },
+        { value: '500', label: '500条' },
+      ], default: '100' },
+    ],
+    dimensions: [
+      { name: 'profile', label: '账号画像', default: true },
+      { name: 'tendency', label: '内容倾向', default: true },
+      { name: 'behavior', label: '行为特征', default: true },
+      { name: 'impact', label: '影响判断', default: true },
+    ],
+    steps: ['已定位账号', '已抓取内容', '已完成内容倾向分析', '已完成账号画像分析', '已生成结果'],
+    previewFields: [
+      { key: 'accountName', label: '账号名称' },
+      { key: 'accountType', label: '账号类型' },
+      { key: 'followers', label: '粉丝数' },
+    ],
+  },
+  'sentiment': {
+    id: 'sentiment',
+    name: '三情分析',
+    description: '对事件进行舆情、社情、民情综合分析',
+    icon: MessageSquare,
+    iconColor: 'text-orange-500',
+    bgColor: 'bg-orange-500/10',
+    inputs: [
+      { name: 'eventName', label: '事件名称', placeholder: '请输入事件名称', type: 'text', required: true },
+      { name: 'eventLink', label: '事件链接', placeholder: '可选，粘贴事件相关链接', type: 'link', required: false },
+      { name: 'materials', label: '上传材料', placeholder: '支持上传相关素材', type: 'upload', required: false },
+    ],
+    params: [
+      { name: 'timeRange', label: '时间范围', options: [
+        { value: '7d', label: '近7天' },
+        { value: '30d', label: '近30天' },
+        { value: '90d', label: '近90天' },
+      ], default: '7d' },
+      { name: 'dataRange', label: '数据范围', options: [
+        { value: 'all', label: '全部' },
+        { value: '国内', label: '国内' },
+        { value: '境外', label: '境外' },
+      ], default: 'all' },
+    ],
+    dimensions: [
+      { name: 'publicSentiment', label: '舆情分析', default: true },
+      { name: 'socialSentiment', label: '社情分析', default: true },
+      { name: 'publicOpinion', label: '民情分析', default: true },
+      { name: 'riskAlert', label: '风险提示', default: true },
+    ],
+    steps: ['已识别事件', '已聚合相关内容', '已完成舆情分析', '已完成社情分析', '已完成民情分析', '已生成结果'],
+    previewFields: [
+      { key: 'eventName', label: '事件名称' },
+      { key: 'eventTime', label: '事件时间' },
+      { key: 'relatedCount', label: '相关内容数' },
+    ],
+  },
+  'event': {
+    id: 'event',
+    name: '事件分析',
+    description: '围绕某个事件进行整体分析',
+    icon: Target,
+    iconColor: 'text-red-500',
+    bgColor: 'bg-red-500/10',
+    inputs: [
+      { name: 'eventName', label: '事件名称', placeholder: '请输入事件名称', type: 'text', required: true },
+      { name: 'eventDesc', label: '事件说明', placeholder: '请补充事件相关说明', type: 'textarea', required: false },
+      { name: 'materials', label: '上传材料', placeholder: '支持上传事件相关材料', type: 'upload', required: false },
+    ],
+    params: [
+      { name: 'timeRange', label: '时间范围', options: [
+        { value: '30d', label: '近30天' },
+        { value: '90d', label: '近90天' },
+        { value: '180d', label: '近半年' },
+        { value: 'all', label: '全部' },
+      ], default: '30d' },
+      { name: 'depth', label: '输出深度', options: [
+        { value: 'brief', label: '简略' },
+        { value: 'standard', label: '标准' },
+        { value: 'detailed', label: '详细' },
+      ], default: 'standard' },
+    ],
+    dimensions: [
+      { name: 'context', label: '事件脉络', default: true },
+      { name: 'keyPoints', label: '关键节点', default: true },
+      { name: 'risk', label: '风险判断', default: true },
+      { name: 'suggestions', label: '初步建议', default: true },
+    ],
+    steps: ['已识别事件', '已整理事件材料', '已完成脉络分析', '已完成风险判断', '已生成结果'],
+    previewFields: [
+      { key: 'eventName', label: '事件名称' },
+      { key: 'eventStage', label: '所处阶段' },
+      { key: 'keyPlayers', label: '关键参与者' },
+    ],
+  },
+  'topic': {
+    id: 'topic',
+    name: '专题分析',
+    description: '对某专题做集中分析',
+    icon: BookOpen,
+    iconColor: 'text-green-500',
+    bgColor: 'bg-green-500/10',
+    inputs: [
+      { name: 'topicName', label: '专题名称', placeholder: '请输入专题名称', type: 'text', required: true },
+      { name: 'materials', label: '上传材料', placeholder: '支持上传专题相关文本集合', type: 'upload', required: false },
+    ],
+    params: [
+      { name: 'depth', label: '分析深度', options: [
+        { value: 'surface', label: '表面' },
+        { value: 'standard', label: '标准' },
+        { value: 'deep', label: '深度' },
+      ], default: 'standard' },
+      { name: 'sourceRange', label: '来源范围', options: [
+        { value: 'all', label: '全部' },
+        { value: '国内', label: '国内' },
+        { value: '境外', label: '境外' },
+      ], default: 'all' },
+    ],
+    dimensions: [
+      { name: 'structure', label: '专题结构', default: true },
+      { name: 'coreIssues', label: '核心问题', default: true },
+      { name: 'viewpoints', label: '观点聚合', default: true },
+      { name: 'conclusions', label: '结论建议', default: true },
+    ],
+    steps: ['已识别专题', '已获取相关材料', '已完成结构分析', '已聚合核心观点', '已生成结果'],
+    previewFields: [
+      { key: 'topicName', label: '专题名称' },
+      { key: 'relatedDocs', label: '相关文档' },
+      { key: 'coverage', label: '覆盖范围' },
+    ],
+  },
+};
+
+type ResultTab = 'overview' | 'details' | 'raw';
+
+const LightAppRun: React.FC<LightAppRunProps> = ({ onNavigate, appId }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const [currentAppId, setCurrentAppId] = useState<LightAppType>(appId || 'sentiment');
+  const [resultTab, setResultTab] = useState<ResultTab>('overview');
+  const [isRunning, setIsRunning] = useState(false);
+  const [currentStep, setCurrentStep] = useState(0);
+  const [copied, setCopied] = useState(false);
+  const [formData, setFormData] = useState<Record<string, string>>({});
+  const [params, setParams] = useState<Record<string, string>>({});
+  const [dimensions, setDimensions] = useState<Record<string, boolean>>({});
+  const [hasResult, setHasResult] = useState(false);
+  const [result, setResult] = useState<any>(null);
+
+  const config = appConfigs[currentAppId];
+  const Icon = config.icon;
+
+  // 初始化表单数据
+  useEffect(() => {
+    console.log('当前应用:', currentAppId);
+    if (config) {
+      const initialForm: Record<string, string> = {};
+      config.inputs.forEach(input => {
+        initialForm[input.name] = '';
+      });
+      setFormData(initialForm);
+
+      const initialParams: Record<string, string> = {};
+      config.params.forEach(param => {
+        initialParams[param.name] = param.default;
+      });
+      setParams(initialParams);
+
+      const initialDims: Record<string, boolean> = {};
+      config.dimensions.forEach(dim => {
+        initialDims[dim.name] = dim.default;
+      });
+      setDimensions(initialDims);
+    }
+  }, [currentAppId]);
+
+  // 执行分析
+  const handleRun = async () => {
+    setIsRunning(true);
+    setCurrentStep(0);
+    setHasResult(false);
+
+    // 模拟执行步骤
+    for (let i = 0; i < config.steps.length; i++) {
+      await new Promise(resolve => setTimeout(resolve, 800));
+      setCurrentStep(i + 1);
+    }
+
+    // 生成结果
+    await new Promise(resolve => setTimeout(resolve, 500));
+    setResult(generateMockResult());
+    setHasResult(true);
+    setIsRunning(false);
+  };
+
+  // 生成模拟结果
+  const generateMockResult = () => {
+    switch (currentAppId) {
+      case 'sentiment':
+        return {
+          overview: {
+            overallSentiment: '中偏负',
+            mainConcerns: ['活动形式', '品牌调性', '执行成本'],
+            riskAlert: '讨论热度上升，负向占比增加',
+            sentimentTrend: '下行',
+          },
+          details: {
+            publicSentiment: '舆情方面，主要关注点是活动本身的创新性和参与体验。部分用户对活动细节提出质疑，整体讨论呈现多元化特征。',
+            socialSentiment: '社情方面，该事件引发了关于活动公平性的讨论，社交媒体上相关话题讨论量显著上升。',
+            publicOpinion: '民情方面，公众对该活动的看法分化明显，支持和反对声音并存，需关注后续舆情走向。',
+            riskAssessment: '当前风险等级：中。建议持续关注舆情变化，准备应对预案。',
+          },
+          raw: [
+            { type: '正面评论', content: '活动创意很好，期待参与', count: 234 },
+            { type: '中性评论', content: '等待活动正式开始', count: 567 },
+            { type: '负面评论', content: '对活动细节表示质疑', count: 189 },
+          ],
+        };
+      case 'event':
+        return {
+          overview: {
+            eventStage: '发酵期',
+            keyNodes: '活动公布期，关注度持续上升',
+            riskLevel: '中',
+            suggestion: '建议加强信息透明度，及时回应公众关切',
+          },
+          details: {
+            context: '该事件起因于...，经过...，目前处于...阶段。',
+            keyPoints: ['关键节点一：...', '关键节点二：...', '关键节点三：...'],
+            riskJudgment: '风险可控，但需关注...',
+            suggestions: '1. ... 2. ... 3. ...',
+          },
+          raw: [
+            { time: '2026-03-18', title: '事件起因', content: '...' },
+            { time: '2026-03-19', title: '初步发酵', content: '...' },
+            { time: '2026-03-20', title: '关注度上升', content: '...' },
+          ],
+        };
+      case 'account-pg':
+        return {
+          overview: {
+            accountProfile: '该账号为...类型账号',
+            contentTendency: '内容倾向明显偏...',
+            influenceJudgment: '具有一定影响力，需关注...',
+          },
+          details: {
+            profileAnalysis: '账号画像分析...',
+            contentAnalysis: '内容倾向分析...',
+            behaviorAnalysis: '行为特征分析...',
+            influenceAnalysis: '影响判断分析...',
+          },
+          raw: [
+            { date: '2026-03-15', content: '...' },
+            { date: '2026-03-16', content: '...' },
+            { date: '2026-03-17', content: '...' },
+          ],
+        };
+      default:
+        return {
+          overview: { summary: '分析结果摘要...' },
+          details: { analysis: '详细分析内容...' },
+          raw: [],
+        };
+    }
+  };
+
+  // 重置
+  const handleReset = () => {
+    const initialForm: Record<string, string> = {};
+    config.inputs.forEach(input => {
+      initialForm[input.name] = '';
+    });
+    setFormData(initialForm);
+
+    const initialParams: Record<string, string> = {};
+    config.params.forEach(param => {
+      initialParams[param.name] = param.default;
+    });
+    setParams(initialParams);
+
+    const initialDims: Record<string, boolean> = {};
+    config.dimensions.forEach(dim => {
+      initialDims[dim.name] = dim.default;
+    });
+    setDimensions(initialDims);
+
+    setHasResult(false);
+    setResult(null);
+    setCurrentStep(0);
+  };
+
+  // 复制结果
+  const handleCopy = () => {
+    navigator.clipboard.writeText(JSON.stringify(result, null, 2));
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  // 保存快照
+  const handleSaveSnapshot = () => {
+    // 模拟保存
+    alert('快照已保存到运行记录');
+    onNavigate('light-app-records');
+  };
+
+  // 导出
+  const handleExport = () => {
+    const blob = new Blob([JSON.stringify(result, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${config.name}_结果_${new Date().toISOString().split('T')[0]}.json`;
+    a.click();
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* 顶部操作栏 */}
+      <div className={`rounded-xl border p-4 ${
+        isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
+      }`}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => onNavigate('light-app-square')}
+              className={`p-2 rounded-lg transition-colors ${
+                isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'
+              }`}
+            >
+              <ArrowLeft className="w-5 h-5" />
+            </button>
+            <div className="flex items-center gap-3">
+              <div className={`p-2 rounded-lg ${config.bgColor}`}>
+                <Icon className={`w-5 h-5 ${config.iconColor}`} />
+              </div>
+              <div>
+                <h1 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                  {config.name}
+                </h1>
+                <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                  {config.description}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handleSaveSnapshot}
+              disabled={!hasResult}
+              className={`px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 transition-colors ${
+                hasResult
+                  ? isDark
+                    ? 'bg-slate-700 text-slate-300 hover:bg-slate-600'
+                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                  : isDark
+                    ? 'bg-slate-800 text-slate-600 cursor-not-allowed'
+                    : 'bg-gray-50 text-gray-400 cursor-not-allowed'
+              }`}
+            >
+              <Save className="w-4 h-4" />
+              保存快照
+            </button>
+            <button
+              onClick={handleExport}
+              disabled={!hasResult}
+              className={`px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 transition-colors ${
+                hasResult
+                  ? isDark
+                    ? 'bg-slate-700 text-slate-300 hover:bg-slate-600'
+                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                  : isDark
+                    ? 'bg-slate-800 text-slate-600 cursor-not-allowed'
+                    : 'bg-gray-50 text-gray-400 cursor-not-allowed'
+              }`}
+            >
+              <Download className="w-4 h-4" />
+              导出结果
+            </button>
+            <button
+              onClick={() => onNavigate('task-create')}
+              disabled={!hasResult}
+              className={`px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 transition-colors ${
+                hasResult
+                  ? isDark
+                    ? 'bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 border border-blue-500/30'
+                    : 'bg-red-50 text-red-600 hover:bg-red-100 border border-red-200'
+                  : isDark
+                    ? 'bg-slate-800 text-slate-600 cursor-not-allowed border border-transparent'
+                    : 'bg-gray-50 text-gray-400 cursor-not-allowed border border-transparent'
+              }`}
+            >
+              <Send className="w-4 h-4" />
+              转正式任务
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* 主体内容区 - 三栏布局 */}
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-4">
+        {/* 左侧：输入与配置 */}
+        <div className={`lg:col-span-4 rounded-xl border p-4 ${
+          isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
+        }`}>
+          <div className="space-y-6">
+            {/* 输入对象 */}
+            <div>
+              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                输入对象
+              </h3>
+              <div className="space-y-3">
+                {config.inputs.map(input => (
+                  <div key={input.name}>
+                    <label className={`block text-xs mb-1.5 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                      {input.label}
+                      {input.required && <span className="text-red-500 ml-1">*</span>}
+                    </label>
+                    {input.type === 'textarea' ? (
+                      <textarea
+                        value={formData[input.name] || ''}
+                        onChange={(e) => setFormData({ ...formData, [input.name]: e.target.value })}
+                        placeholder={input.placeholder}
+                        rows={4}
+                        className={`w-full px-3 py-2 rounded-lg border text-sm transition-colors focus:outline-none focus:ring-2 ${
+                          isDark
+                            ? 'bg-slate-900 border-slate-600 text-slate-200 placeholder-slate-500 focus:border-blue-500'
+                            : 'bg-gray-50 border-gray-300 text-gray-900 placeholder-gray-400 focus:border-red-500'
+                        }`}
+                      />
+                    ) : input.type === 'upload' ? (
+                      <div className={`border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors ${
+                        isDark
+                          ? 'border-slate-600 hover:border-blue-500/50'
+                          : 'border-gray-300 hover:border-red-500/50'
+                      }`}>
+                        <Upload className={`w-6 h-6 mx-auto mb-2 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
+                        <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                          {input.placeholder}
+                        </p>
+                      </div>
+                    ) : (
+                      <input
+                        type="text"
+                        value={formData[input.name] || ''}
+                        onChange={(e) => setFormData({ ...formData, [input.name]: e.target.value })}
+                        placeholder={input.placeholder}
+                        className={`w-full px-3 py-2 rounded-lg border text-sm transition-colors focus:outline-none focus:ring-2 ${
+                          isDark
+                            ? 'bg-slate-900 border-slate-600 text-slate-200 placeholder-slate-500 focus:border-blue-500'
+                            : 'bg-gray-50 border-gray-300 text-gray-900 placeholder-gray-400 focus:border-red-500'
+                        }`}
+                      />
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* 参数配置 */}
+            <div>
+              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                参数配置
+              </h3>
+              <div className="space-y-3">
+                {config.params.map(param => (
+                  <div key={param.name}>
+                    <label className={`block text-xs mb-1.5 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                      {param.label}
+                    </label>
+                    <select
+                      value={params[param.name] || param.default}
+                      onChange={(e) => setParams({ ...params, [param.name]: e.target.value })}
+                      className={`w-full px-3 py-2 rounded-lg border text-sm transition-colors focus:outline-none focus:ring-2 ${
+                        isDark
+                          ? 'bg-slate-900 border-slate-600 text-slate-200 focus:border-blue-500'
+                          : 'bg-gray-50 border-gray-300 text-gray-900 focus:border-red-500'
+                      }`}
+                    >
+                      {param.options.map(option => (
+                        <option key={option.value} value={option.value}>
+                          {option.label}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* 分析维度 */}
+            <div>
+              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                分析维度
+              </h3>
+              <div className="space-y-2">
+                {config.dimensions.map(dim => (
+                  <label
+                    key={dim.name}
+                    className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-colors ${
+                      isDark ? 'hover:bg-slate-700/50' : 'hover:bg-gray-50'
+                    }`}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={dimensions[dim.name] ?? dim.default}
+                      onChange={(e) => setDimensions({ ...dimensions, [dim.name]: e.target.checked })}
+                      className="w-4 h-4 rounded border-gray-300"
+                    />
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      {dim.label}
+                    </span>
+                  </label>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 中间：执行过程/对象预览 */}
+        <div className={`lg:col-span-4 rounded-xl border p-4 ${
+          isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
+        }`}>
+          <div className="space-y-6">
+            {/* 执行过程 */}
+            <div>
+              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                执行过程
+              </h3>
+              <div className="space-y-2">
+                {config.steps.map((step, index) => (
+                  <div key={index} className="flex items-center gap-3">
+                    {isRunning && index === currentStep ? (
+                      <Loader2 className={`w-4 h-4 animate-spin ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+                    ) : index < currentStep || hasResult ? (
+                      <CheckCircle2 className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                    ) : (
+                      <Circle className={`w-4 h-4 ${isDark ? 'text-slate-600' : 'text-gray-300'}`} />
+                    )}
+                    <span className={`text-sm ${
+                      index < currentStep || hasResult
+                        ? isDark ? 'text-slate-300' : 'text-gray-700'
+                        : isDark ? 'text-slate-500' : 'text-gray-400'
+                    }`}>
+                      {index + 1}. {step}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* 对象预览 */}
+            <div>
+              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                对象预览
+              </h3>
+              <div className={`rounded-lg p-4 ${
+                isDark ? 'bg-slate-900/50' : 'bg-gray-50'
+              }`}>
+                {formData.mainInput || formData.eventName || formData.accountId || formData.link || formData.topicName ? (
+                  <div className="space-y-2">
+                    {config.previewFields.map(field => (
+                      <div key={field.key} className="flex items-start gap-2">
+                        <span className={`text-xs font-medium min-w-[60px] ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                          {field.label}：
+                        </span>
+                        <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                          {formData.mainInput?.slice(0, 30) || formData.eventName || formData.accountId || formData.link || formData.topicName}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <p className={`text-sm text-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                    请在左侧输入对象后预览
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 右侧：结果区 */}
+        <div className={`lg:col-span-4 rounded-xl border p-4 ${
+          isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
+        }`}>
+          <div className="flex items-center justify-between mb-4">
+            <h3 className={`text-sm font-medium ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+              分析结果
+            </h3>
+            {hasResult && (
+              <div className="flex items-center gap-1">
+                <button
+                  onClick={handleCopy}
+                  className={`p-1.5 rounded-lg transition-colors ${
+                    isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'
+                  }`}
+                >
+                  {copied ? <CheckCheck className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
+                </button>
+              </div>
+            )}
+          </div>
+
+          {/* 结果标签页 */}
+          {hasResult ? (
+            <>
+              <div className="flex gap-1 mb-4">
+                {(['overview', 'details', 'raw'] as ResultTab[]).map(tab => (
+                  <button
+                    key={tab}
+                    onClick={() => setResultTab(tab)}
+                    className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
+                      resultTab === tab
+                        ? isDark
+                          ? 'bg-blue-500/20 text-blue-400'
+                          : 'bg-red-50 text-red-600'
+                        : isDark
+                          ? 'text-slate-400 hover:text-slate-300'
+                          : 'text-gray-500 hover:text-gray-700'
+                    }`}
+                  >
+                    {tab === 'overview' ? '概览' : tab === 'details' ? '详细结果' : '原始数据'}
+                  </button>
+                ))}
+              </div>
+
+              {/* 结果内容 */}
+              <div className={`rounded-lg p-4 ${
+                isDark ? 'bg-slate-900/50' : 'bg-gray-50'
+              }`}>
+                {resultTab === 'overview' && (
+                  <div className="space-y-3">
+                    {Object.entries(result?.overview || {}).map(([key, value]) => (
+                      <div key={key}>
+                        <span className={`text-xs font-medium ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                          {key === 'overallSentiment' ? '总体情绪' :
+                           key === 'mainConcerns' ? '主要关注点' :
+                           key === 'riskAlert' ? '风险提示' :
+                           key === 'sentimentTrend' ? '情绪趋势' :
+                           key === 'eventStage' ? '事件阶段' :
+                           key === 'keyNodes' ? '关键节点' :
+                           key === 'riskLevel' ? '风险等级' :
+                           key === 'suggestion' ? '建议' :
+                           key === 'accountProfile' ? '账号画像' :
+                           key === 'contentTendency' ? '内容倾向' :
+                           key === 'influenceJudgment' ? '影响判断' :
+                           key === 'summary' ? '结果摘要' : key}:
+                        </span>
+                        <p className={`text-sm mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                          {Array.isArray(value) ? value.join('、') : String(value)}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                )}
+                {resultTab === 'details' && (
+                  <div className="space-y-3">
+                    {Object.entries(result?.details || {}).map(([key, value]) => (
+                      <div key={key}>
+                        <span className={`text-xs font-medium ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                          {key === 'publicSentiment' ? '舆情分析' :
+                           key === 'socialSentiment' ? '社情分析' :
+                           key === 'publicOpinion' ? '民情分析' :
+                           key === 'riskAssessment' ? '风险评估' :
+                           key === 'context' ? '事件脉络' :
+                           key === 'keyPoints' ? '关键节点' :
+                           key === 'riskJudgment' ? '风险判断' :
+                           key === 'suggestions' ? '建议' :
+                           key === 'profileAnalysis' ? '画像分析' :
+                           key === 'contentAnalysis' ? '内容分析' :
+                           key === 'behaviorAnalysis' ? '行为分析' :
+                           key === 'influenceAnalysis' ? '影响分析' :
+                           key === 'analysis' ? '分析' : key}:
+                        </span>
+                        <p className={`text-sm mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                          {Array.isArray(value) ? value.join('\n') : String(value)}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                )}
+                {resultTab === 'raw' && (
+                  <div className="space-y-2">
+                    {(result?.raw || []).length > 0 ? (
+                      result.raw.map((item: any, index: number) => (
+                        <div key={index} className={`p-2 rounded ${isDark ? 'bg-slate-800/50' : 'bg-white'}`}>
+                          <div className="flex items-center gap-2 mb-1">
+                            {item.type && (
+                              <span className={`px-2 py-0.5 rounded text-xs ${
+                                isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-blue-50 text-blue-600'
+                              }`}>
+                                {item.type}
+                              </span>
+                            )}
+                            {item.time && (
+                              <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                                {item.time}
+                              </span>
+                            )}
+                            {item.date && (
+                              <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                                {item.date}
+                              </span>
+                            )}
+                          </div>
+                          <p className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                            {item.content || item.title || JSON.stringify(item)}
+                          </p>
+                        </div>
+                      ))
+                    ) : (
+                      <p className={`text-sm text-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                        无原始数据
+                      </p>
+                    )}
+                  </div>
+                )}
+              </div>
+            </>
+          ) : (
+            <div className="text-center py-12">
+              <Sparkles className={`w-12 h-12 mx-auto mb-4 ${isDark ? 'text-slate-600' : 'text-gray-300'}`} />
+              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                {isRunning ? '分析中...' : '点击下方按钮开始分析'}
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 底部操作区 */}
+      <div className={`rounded-xl border p-4 ${
+        isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
+      }`}>
+        <div className="flex items-center justify-between">
+          <button
+            onClick={handleReset}
+            disabled={isRunning}
+            className={`px-6 py-2.5 rounded-lg font-medium flex items-center gap-2 transition-colors ${
+              isRunning
+                ? isDark
+                  ? 'bg-slate-800 text-slate-600 cursor-not-allowed'
+                  : 'bg-gray-50 text-gray-400 cursor-not-allowed'
+                : isDark
+                  ? 'bg-slate-700 text-slate-300 hover:bg-slate-600'
+                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+            }`}
+          >
+            <RotateCcw className="w-4 h-4" />
+            重置
+          </button>
+          <button
+            onClick={handleRun}
+            disabled={isRunning || !formData.mainInput && !formData.eventName && !formData.accountId && !formData.link && !formData.topicName}
+            className={`px-8 py-2.5 rounded-lg font-medium flex items-center gap-2 transition-all ${
+              isRunning
+                ? isDark
+                  ? 'bg-blue-500/20 text-blue-400 cursor-wait'
+                  : 'bg-red-50 text-red-400 cursor-wait'
+                : formData.mainInput || formData.eventName || formData.accountId || formData.link || formData.topicName
+                  ? isDark
+                    ? 'bg-blue-600 text-white hover:bg-blue-500 shadow-lg shadow-blue-500/25'
+                    : 'bg-red-500 text-white hover:bg-red-600 shadow-lg shadow-red-500/25'
+                  : isDark
+                    ? 'bg-slate-700 text-slate-500 cursor-not-allowed'
+                    : 'bg-gray-200 text-gray-400 cursor-not-allowed'
+            }`}
+          >
+            {isRunning ? (
+              <>
+                <Loader2 className="w-4 h-4 animate-spin" />
+                分析中...
+              </>
+            ) : (
+              <>
+                <PlayCircle className="w-4 h-4" />
+                开始分析
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LightAppRun;
diff --git a/web-code/pages/LightAppSquare copy.tsx b/web-code/pages/LightAppSquare copy.tsx
new file mode 100644
index 00000000..a47e71ae
--- /dev/null
+++ b/web-code/pages/LightAppSquare copy.tsx	
@@ -0,0 +1,681 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import {
+  Search,
+  ChevronRight,
+  PlayCircle,
+  Clock,
+  Star,
+  FileText,
+  User,
+  Zap,
+  BookOpen,
+  TrendingUp,
+  MessageSquare,
+  Network,
+  Link2,
+  Filter,
+  Layout,
+  Sparkles,
+  BarChart3,
+  Users,
+  Target,
+  PieChart,
+  Send,
+  Plus,
+} from 'lucide-react';
+import { Button, Dialog, Radio, Upload, Input, MessagePlugin, Row, Col, Textarea } from 'tdesign-react';
+import { get } from '../lib/api';
+import type { UploadFile, UploadProps } from 'tdesign-react';
+import { requestCrudService } from '@/service/request-axios-service';
+
+interface LightAppSquareProps {
+  onNavigate: (page: string, appId?: string) => void;
+}
+
+// 定义轻应用类型
+export type LightAppType =
+  | 'info-ty'      // 信息TY
+  | 'info-pg'      // 信息PG
+  | 'info-spread'  // 信息传播分析
+  | 'account-pg'    // 账号PG
+  | 'sentiment'     // 三情分析
+  | 'event'        // 事件分析
+  | 'topic';       // 专题分析
+
+// 应用分类
+type AppCategory = 'info' | 'account' | 'event' | 'topic';
+
+interface LightApp {
+  id: LightAppType;
+  name: string;
+  description: string;
+  category: AppCategory;
+  categoryName: string;
+  input: string;
+  output: string;
+  icon: React.ElementType;
+  color: string;
+  bgColor: string;
+  borderColor: string;
+  iconColor: string;
+  dimensions?: string[]; // 可选的额外分析维度
+}
+
+interface analysisDataItem {
+  appName: string;
+  appDesc: string;
+  appIcon: string;
+  jumpUrl: string;
+  appType: number
+}
+
+interface analysisListItem {
+  categoryName: string;
+  category: string;
+  appName: string;
+  appDesc: string;
+  appIcon: string;
+  jumpUrl: string;
+  appType: number
+}
+
+interface analysisListData {
+  internalList: analysisListItem[];
+  externalList: analysisListItem[];
+}
+
+// 应用数据
+const lightApps: LightApp[] = [
+  // 信息分析类
+  {
+    id: 'info-ty',
+    name: '信息TY',
+    description: '围绕单条或多条信息进行TY向分析',
+    category: 'info',
+    categoryName: '信息分析类',
+    input: '信息文本/链接/素材',
+    output: '信息特征、重点摘要、分析判断',
+    icon: FileText,
+    color: 'blue',
+    bgColor: 'bg-blue-500/10',
+    borderColor: 'border-blue-500/30',
+    iconColor: 'text-blue-500',
+    dimensions: ['基础分析', '风险提示', '摘要结论'],
+  },
+  {
+    id: 'info-pg',
+    name: '信息PG',
+    description: '围绕单条或多条信息进行PG向分析',
+    category: 'info',
+    categoryName: '信息分析类',
+    input: '信息文本/链接/素材',
+    output: '画像特征、相关判断',
+    icon: User,
+    color: 'cyan',
+    bgColor: 'bg-cyan-500/10',
+    borderColor: 'border-cyan-500/30',
+    iconColor: 'text-cyan-500',
+    dimensions: ['账号画像', '内容倾向', '行为特征'],
+  },
+  {
+    id: 'info-spread',
+    name: '信息传播分析',
+    description: '分析信息传播路径、传播范围与传播表现',
+    category: 'info',
+    categoryName: '信息分析类',
+    input: '信息链接/信息集合',
+    output: '传播过程、传播节点、传播影响',
+    icon: Network,
+    color: 'teal',
+    bgColor: 'bg-teal-500/10',
+    borderColor: 'border-teal-500/30',
+    iconColor: 'text-teal-500',
+    dimensions: ['传播路径', '传播节点', '传播表现', '影响摘要'],
+  },
+  // 账号分析类
+  {
+    id: 'account-pg',
+    name: '账号PG',
+    description: '围绕账号内容与行为特征进行PG分析',
+    category: 'account',
+    categoryName: '账号分析类',
+    input: '账号ID/账号链接/内容集合',
+    output: '账号画像、内容倾向、行为特征',
+    icon: Users,
+    color: 'purple',
+    bgColor: 'bg-purple-500/10',
+    borderColor: 'border-purple-500/30',
+    iconColor: 'text-purple-500',
+    dimensions: ['账号画像', '内容倾向', '行为特征', '影响判断'],
+  },
+  // 事件分析类
+  {
+    id: 'sentiment',
+    name: '三情分析',
+    description: '对事件进行舆情、社情、民情综合分析',
+    category: 'event',
+    categoryName: '事件分析类',
+    input: '事件关键词/事件链接/素材',
+    output: '情绪概览、关注焦点、风险提示',
+    icon: MessageSquare,
+    color: 'orange',
+    bgColor: 'bg-orange-500/10',
+    borderColor: 'border-orange-500/30',
+    iconColor: 'text-orange-500',
+    dimensions: ['舆情分析', '社情分析', '民情分析', '风险提示'],
+  },
+  {
+    id: 'event',
+    name: '事件分析',
+    description: '围绕某个事件进行整体分析',
+    category: 'event',
+    categoryName: '事件分析类',
+    input: '事件名称/事件材料/事件链接',
+    output: '事件脉络、关键节点、风险判断',
+    icon: Target,
+    color: 'red',
+    bgColor: 'bg-red-500/10',
+    borderColor: 'border-red-500/30',
+    iconColor: 'text-red-500',
+    dimensions: ['事件脉络', '关键节点', '风险判断', '初步建议'],
+  },
+  // 专题分析类
+  {
+    id: 'topic',
+    name: '专题分析',
+    description: '对某专题做集中分析',
+    category: 'topic',
+    categoryName: '专题分析类',
+    input: '专题名称/专题材料/文本集合',
+    output: '专题结构、核心问题、观点聚合、结论建议',
+    icon: BookOpen,
+    color: 'green',
+    bgColor: 'bg-green-500/10',
+    borderColor: 'border-green-500/30',
+    iconColor: 'text-green-500',
+    dimensions: ['专题结构', '核心问题', '观点聚合', '结论建议'],
+  },
+];
+
+const categoryOrder: AppCategory[] = ['info', 'account', 'event', 'topic'];
+const zncmUrl = import.meta.env.VITE_API_BASE_URL || '';
+
+const LightAppSquare: React.FC<LightAppSquareProps> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const [searchQuery, setSearchQuery] = useState('');
+  const [categoryFilter, setCategoryFilter] = useState<AppCategory | 'all'>('all');
+  const [recentApps, setRecentApps] = useState<LightAppType[]>(['sentiment', 'event', 'account-pg']);
+  const [visible, setVisible] = useState(false);
+  const [analysisData, setAnalysisData] = useState<analysisDataItem>({
+    appName: '',
+    appDesc: '',
+    appIcon: '',
+    jumpUrl: '',
+    appType: 2,
+  });
+  const [analysisList, setAnalysisList] = useState<analysisListData>(
+    {
+      internalList: [], // 内部应用
+      externalList: [], // 外部应用
+    })
+  const [fileFail, setFileFail] = useState<UploadFile[]>([
+    // 如果需要默认回显图片，可以在这里初始化
+    // { name: '默认图片.png', url: 'https://tdesign.gtimg.com/site/avatar.jpg', status: 'fail' }
+  ]);
+  const showImageFileName = true;
+  const service = requestCrudService;
+  // 解构出 Group 和 Button，方便使用
+  const { Group: RadioGroup, Button: RadioButton } = Radio;
+  // 用于格式化接口返回的数据，使其符合 TDesign 的要求
+  const formatResponse = (res: any) => {
+    // 假设接口返回 { code: 0, data: { url: '...' } }
+    // 如果接口报错，可以在这里处理，让组件显示失败状态
+    if (res.code !== 0) {
+      return {
+        error: res.message || '上传失败',
+        url: '',
+        name: ''
+      };
+    }
+
+    return {
+      url: res.data.url,
+      name: res.data.name,
+    };
+  };
+
+  const handleChange: UploadProps['onChange'] = (files) => {
+    setFileFail(files);
+    console.log('当前文件列表:', files);
+  };
+
+  // 过滤应用
+  const filteredApps = useMemo(() => {
+    return lightApps.filter(app => {
+      const matchesSearch = searchQuery === '' ||
+        app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        app.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        app.input.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesCategory = categoryFilter === 'all' || app.category === categoryFilter;
+      return matchesSearch && matchesCategory;
+    });
+  }, [searchQuery, categoryFilter]);
+
+  // 按分类分组
+  const groupedApps = useMemo(() => {
+    const groups: Record<AppCategory, LightApp[]> = {
+      info: [],
+      account: [],
+      event: [],
+      topic: [],
+    };
+    filteredApps.forEach(app => {
+      groups[app.category].push(app);
+    });
+    return groups;
+  }, [filteredApps]);
+
+  // 处理应用启动
+  const handleLaunchApp = (app: LightApp) => {
+    console.log('启动应用:', app);
+
+    // 更新最近使用
+    setRecentApps(prev => {
+      const filtered = prev.filter(id => id !== app.id);
+      return [app.id, ...filtered].slice(0, 5);
+    });
+    onNavigate('light-app-run', app.id);
+  };
+
+  // 获取分类颜色
+  const getCategoryColor = (category: AppCategory) => {
+    const colors: Record<AppCategory, { text: string; bg: string }> = {
+      info: { text: isDark ? 'text-blue-400' : 'text-blue-600', bg: isDark ? 'bg-blue-500/20' : 'bg-blue-50' },
+      account: { text: isDark ? 'text-purple-400' : 'text-purple-600', bg: isDark ? 'bg-purple-500/20' : 'bg-purple-50' },
+      event: { text: isDark ? 'text-orange-400' : 'text-orange-600', bg: isDark ? 'bg-orange-500/20' : 'bg-orange-50' },
+      topic: { text: isDark ? 'text-green-400' : 'text-green-600', bg: isDark ? 'bg-green-500/20' : 'bg-green-50' },
+    };
+    return colors[category];
+  };
+
+  // 获取应用列表
+  const analysisListSearch = async () => {
+    const parmy = {
+      appName: '',
+      pageNum: 1,
+      pageSize: 10,
+    }
+
+    const res = await service.post(`${zncmUrl}/app/analysis/list`, parmy)
+    console.log(res);
+    const result = res.data;
+    const listData: analysisListData = {
+      internalList: [],
+      externalList: [],
+    }
+    result.records.map((item: analysisListItem) => {
+      if (item.appType === 1) {
+        item.category = 'info';
+        item.categoryName = '内部应用';
+        listData.internalList.push(item)
+      } else if (item.appType === 2) {
+        item.category = 'account';
+        item.categoryName = '外部应用';
+        listData.internalList.push(item)
+      }
+    })
+  }
+
+  // 添加应用
+  const analysieAddListChange = async () => {
+    const res = await service.post(`${zncmUrl}/app/analysis/add`, analysisData);
+    console.log(res);
+    MessagePlugin.success('添加成功');
+  }
+
+  const showDialog = () => {
+    setAnalysisData({
+      appName: '',
+      appDesc: '',
+      appIcon: '',
+      jumpUrl: '',
+      appType: 2,
+    })
+    setVisible(true);
+  };
+
+  const handleOk = async () => {
+    await analysieAddListChange();
+    setVisible(false);
+  };
+
+  const handleClose = () => {
+    setVisible(false);
+  };
+
+  const getBase64 = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result as string);
+      reader.onerror = (error) => reject(error);
+    });
+  };
+
+  const imgUpload: UploadProps['requestMethod'] = async (file: any) => {
+    console.log('file', file);
+    const base64 = await getBase64(file.raw)
+    handleDataChange('appIcon', base64);
+    return {
+      status: 'success',
+      // response 对象里的数据会传给 formatResponse
+      response: {
+        url: '',
+        name: '',
+      },
+    }
+  }
+
+  // 通用的处理函数
+  const handleDataChange = (key: keyof typeof analysisData, value: string | number) => {
+    setAnalysisData((prev) => ({
+      ...prev,
+      [key]: value,
+    }));
+  };
+
+  // 发送请求
+  useEffect(() => {
+    analysisListSearch();
+  }, []);
+
+  return (
+    <div className="space-y-6">
+      {/* 顶部工具栏 */}
+      <div className={`rounded-xl border p-4 ${isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
+        }`}>
+        <div className="flex flex-col lg:flex-row lg:items-center gap-4">
+          {/* 面包屑和标题 */}
+          <div className="flex items-center gap-2 flex-1">
+            <Layout className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+            <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>轻应用中心 /</span>
+            <span className={`text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>应用广场</span>
+          </div>
+
+          {/* 搜索框 */}
+          <div className="flex-1 max-w-md">
+            <div className="relative">
+              <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="搜索应用名称或分析对象..."
+                className={`w-full pl-10 pr-4 py-2 rounded-lg border transition-colors focus:outline-none focus:ring-2 ${isDark
+                  ? 'bg-slate-900 border-slate-600 text-slate-200 placeholder-slate-500 focus:border-blue-500 focus:ring-blue-500/20'
+                  : 'bg-gray-50 border-gray-300 text-gray-900 placeholder-gray-400 focus:border-red-500 focus:ring-red-500/20'
+                  }`}
+              />
+            </div>
+          </div>
+
+          {/* 筛选和操作 */}
+          <div className="flex items-center gap-3">
+            <select
+              value={categoryFilter}
+              onChange={(e) => setCategoryFilter(e.target.value as AppCategory | 'all')}
+              className={`px-3 py-2 rounded-lg border text-sm transition-colors focus:outline-none focus:ring-2 ${isDark
+                ? 'bg-slate-900 border-slate-600 text-slate-200 focus:border-blue-500'
+                : 'bg-gray-50 border-gray-300 text-gray-700 focus:border-red-500'
+                }`}
+            >
+              <option value="all">全部分类</option>
+              <option value="info">信息分析类</option>
+              <option value="account">账号分析类</option>
+              <option value="event">事件分析类</option>
+              <option value="topic">专题分析类</option>
+            </select>
+            <button
+              onClick={() => onNavigate('light-app-records')}
+              className={`px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 transition-colors ${isDark
+                ? 'bg-slate-700 text-slate-300 hover:bg-slate-600'
+                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                }`}
+            >
+              <Clock className="w-4 h-4" />
+              运行记录
+            </button>
+            <Button theme="primary" onClick={showDialog}>
+              <span className="flex items-center">
+                <Plus className="w-4 h-4 mr-[10px]" />
+                添加
+              </span>
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* 最近使用 */}
+      {recentApps.length > 0 && searchQuery === '' && categoryFilter === 'all' && (
+        <div className={`rounded-xl border p-4 ${isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
+          }`}>
+          <div className="flex items-center gap-2 mb-4">
+            <Clock className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+            <h3 className={`text-sm font-medium ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>最近使用</h3>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {recentApps.map(appId => {
+              const app = lightApps.find(a => a.id === appId);
+              if (!app) return null;
+              const Icon = app.icon;
+              return (
+                <button
+                  key={app.id}
+                  onClick={() => handleLaunchApp(app)}
+                  className={`px-4 py-2 rounded-lg border text-sm font-medium flex items-center gap-2 transition-all hover:scale-105 ${isDark
+                    ? `bg-slate-700/50 border-slate-600 text-slate-300 hover:bg-slate-700`
+                    : `bg-gray-50 border-gray-200 text-gray-700 hover:bg-gray-100`
+                    }`}
+                >
+                  <Icon className={`w-4 h-4 ${app.iconColor}`} />
+                  {app.name}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* 应用分组区 */}
+      <div className="space-y-6">
+        {categoryOrder.map(category => {
+          const apps = groupedApps[category];
+          if (apps.length === 0) return null;
+          const categoryInfo = lightApps.find(a => a.category === category);
+          const catColor = getCategoryColor(category);
+
+          return (
+            <div key={category} className="space-y-4">
+              {/* 分类标题 */}
+              <div className="flex items-center gap-2">
+                <h2 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                  {categoryInfo?.categoryName}
+                </h2>
+                <span className={`px-2 py-0.5 rounded text-xs font-medium ${catColor.bg} ${catColor.text}`}>
+                  {apps.length} 个应用
+                </span>
+              </div>
+
+              {/* 应用卡片网格 */}
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {apps.map(app => {
+                  const Icon = app.icon;
+                  return (
+                    <div
+                      key={app.id}
+                      className={`rounded-xl border p-5 transition-all duration-200 hover:shadow-lg group ${isDark
+                        ? 'bg-slate-800/50 border-slate-700 hover:border-slate-600'
+                        : 'bg-white border-gray-200 hover:border-gray-300'
+                        }`}
+                    >
+                      {/* 应用头部 */}
+                      <div className="flex items-start gap-4 mb-4">
+                        <div className={`p-3 rounded-lg ${app.bgColor}`}>
+                          <Icon className={`w-6 h-6 ${app.iconColor}`} />
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <h3 className={`font-semibold group-hover:${app.iconColor} ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                            {app.name}
+                          </h3>
+                          <p className={`mt-1 text-sm line-clamp-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                            {app.description}
+                          </p>
+                        </div>
+                      </div>
+
+                      {/* 输入输出 */}
+                      <div className={`text-xs space-y-1 mb-4 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                        <div className="flex items-start gap-2">
+                          <span className="font-medium">输入：</span>
+                          <span>{app.input}</span>
+                        </div>
+                        <div className="flex items-start gap-2">
+                          <span className="font-medium">输出：</span>
+                          <span>{app.output}</span>
+                        </div>
+                      </div>
+
+                      {/* 立即使用按钮 */}
+                      <button
+                        onClick={() => handleLaunchApp(app)}
+                        className={`w-full py-2.5 rounded-lg font-medium flex items-center justify-center gap-2 transition-all ${isDark
+                          ? 'bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 border border-blue-500/30'
+                          : 'bg-red-50 text-red-600 hover:bg-red-100 border border-red-200'
+                          }`}
+                      >
+                        <PlayCircle className="w-4 h-4" />
+                        立即使用
+                      </button>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* 空状态 */}
+      {filteredApps.length === 0 && (
+        <div className={`text-center py-12 rounded-xl border ${isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
+          }`}>
+          <Search className={`w-12 h-12 mx-auto mb-4 ${isDark ? 'text-slate-600' : 'text-gray-300'}`} />
+          <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+            未找到匹配的应用，请尝试其他搜索词或筛选条件
+          </p>
+        </div>
+      )}
+
+      {/* 底部提示 */}
+      <div className={`p-4 rounded-xl border ${isDark ? 'bg-blue-500/10 border-blue-500/30' : 'bg-blue-50 border-blue-200'
+        }`}>
+        <div className="flex items-start gap-3">
+          <Sparkles className={`w-5 h-5 mt-0.5 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
+          <div>
+            <p className={`text-sm font-medium ${isDark ? 'text-blue-300' : 'text-blue-800'}`}>
+              关于轻应用中心
+            </p>
+            <p className={`mt-1 text-sm ${isDark ? 'text-blue-400/80' : 'text-blue-700'}`}>
+              轻应用中心提供了一系列快速分析工具，适合处理临时性的分析需求。相比完整的任务级应用，轻应用更加轻量便捷，可以快速调用多种工具完成分析工作。运行结果可保存快照、导出或转为正式任务。
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <Dialog
+        header="添加应用"
+        visible={visible}
+        onClose={handleClose}       // 监听关闭事件
+        onConfirm={handleOk}     // 点击确定按钮
+        onCancel={handleClose}      // 点击取消按钮
+        closeOnOverlayClick={true}  // 点击遮罩层是否关闭
+      >
+        <div className='mb-[10px]'>
+          <Upload
+            // 对应 v-model
+            files={fileFail}
+            onChange={handleChange}
+            // 对应 theme="image"
+            theme="image"
+            requestMethod={imgUpload}
+            // 对应 accept
+            accept="image/*"
+            tips="系统logo"
+            // 对应 :show-image-file-name
+            showImageFileName={showImageFileName}
+            // 对应 :format-response
+            formatResponse={formatResponse}
+            // 可选：限制上传数量（演示单张）
+            multiple={false}
+            // 可选：上传失败时的提示（如果接口直接返回 4xx/5xx）
+            onFail={({ e, file }) => {
+              MessagePlugin.error(`文件 ${file.name} 上传失败`);
+            }} />
+        </div>
+        <div className='mb-[10px] overflow-hidden'>
+          <Row>
+            <Col span={2}>
+              <div>名称：</div>
+            </Col>
+            <Col span={9}>
+              <Input placeholder="请输入应用名称" value={analysisData.appName} onChange={(val) => handleDataChange('appName', val)} clearable />
+            </Col>
+          </Row>
+        </div>
+        <div className='mb-[10px] overflow-hidden'>
+          <Row>
+            <Col span={2}>
+              <div>详情：</div>
+            </Col>
+            <Col span={9}>
+              <Textarea placeholder="请输入应用详情" value={analysisData.appDesc} onChange={(val) => handleDataChange('appDesc', val)} autosize />
+            </Col>
+          </Row>
+        </div>
+        <div className='mb-[10px] overflow-hidden'>
+          <Row>
+            <Col span={2}>
+              <div>类型：</div>
+            </Col>
+            <Col span={9}>
+              <RadioGroup
+                variant="primary-filled" // 对应 variant="primary-filled"
+                value={analysisData.appType} // 绑定状态值
+                onChange={(value) => handleDataChange('appType', Number(value))}
+              >
+                {/* 3. 使用 RadioButton */}
+                <RadioButton value={1}>内部应用</RadioButton>
+                <RadioButton value={2}>外部应用</RadioButton>
+                <RadioButton value={3}>第三方集成</RadioButton>
+              </RadioGroup>
+            </Col>
+          </Row>
+        </div>
+        <div className='mb-[10px] overflow-hidden'>
+          <Row>
+            <Col span={2}>
+              <div>链接：</div>
+            </Col>
+            <Col span={9}>
+              <Input placeholder="请输入链接" value={analysisData.jumpUrl} onChange={(val) => handleDataChange('jumpUrl', val)} clearable />
+            </Col>
+          </Row>
+        </div>
+      </Dialog>
+    </div>
+  );
+};
+
+export default LightAppSquare;
diff --git a/web-code/pages/LightAppSquare.tsx b/web-code/pages/LightAppSquare.tsx
new file mode 100644
index 00000000..28be61dc
--- /dev/null
+++ b/web-code/pages/LightAppSquare.tsx
@@ -0,0 +1,979 @@
+import React, { useState, useMemo, useEffect, useRef } from "react";
+import { useTheme } from "../contexts/ThemeContext";
+import {
+  Search,
+  ChevronRight,
+  PlayCircle,
+  Clock,
+  Star,
+  FileText,
+  User,
+  Zap,
+  BookOpen,
+  TrendingUp,
+  MessageSquare,
+  Network,
+  Link2,
+  Filter,
+  Layout,
+  Sparkles,
+  BarChart3,
+  Users,
+  Target,
+  PieChart,
+  Send,
+  Plus,
+} from "lucide-react";
+import {
+  Button,
+  Dialog,
+  Radio,
+  Upload,
+  Input,
+  MessagePlugin,
+  Row,
+  Col,
+  Textarea,
+  Loading,
+  Empty,
+  Pagination,
+} from "tdesign-react";
+import { get } from "../lib/api";
+import type { UploadFile, UploadProps } from "tdesign-react";
+import { requestCrudService } from "@/service/request-axios-service";
+import { AppCard } from "@/components/square/AppCard";
+
+interface LightAppSquareProps {
+  onNavigate: (page: string, appId?: string) => void;
+}
+
+// 定义轻应用类型
+export type LightAppType =
+  | "info-ty" // 信息TY
+  | "info-pg" // 信息PG
+  | "info-spread" // 信息传播分析
+  | "account-pg" // 账号PG
+  | "sentiment" // 三情分析
+  | "event" // 事件分析
+  | "topic"; // 专题分析
+
+// 应用分类
+type AppCategory = "info" | "account" | "event" | "topic";
+
+interface LightApp {
+  id: LightAppType;
+  name: string;
+  description: string;
+  category: AppCategory;
+  categoryName: string;
+  input: string;
+  output: string;
+  icon: React.ElementType;
+  color: string;
+  bgColor: string;
+  borderColor: string;
+  iconColor: string;
+  dimensions?: string[]; // 可选的额外分析维度
+}
+
+interface analysisDataItem {
+  appName: string;
+  appDesc: string;
+  appIcon: string;
+  jumpUrl: string;
+  appType: number;
+}
+
+interface analysisListItem {
+  id: number;
+  categoryName: string;
+  category: string;
+  appName: string;
+  appDesc: string;
+  appIcon: string;
+  jumpUrl: string;
+  appType: number;
+}
+
+interface analysisListData {
+  key: "info" | "account" | "event" | "topic";
+  list: analysisListItem[];
+}
+
+// 应用数据
+const lightApps: LightApp[] = [
+  // 信息分析类
+  {
+    id: "info-ty",
+    name: "信息TY",
+    description: "围绕单条或多条信息进行TY向分析",
+    category: "info",
+    categoryName: "信息分析类",
+    input: "信息文本/链接/素材",
+    output: "信息特征、重点摘要、分析判断",
+    icon: FileText,
+    color: "blue",
+    bgColor: "bg-blue-500/10",
+    borderColor: "border-blue-500/30",
+    iconColor: "text-blue-500",
+    dimensions: ["基础分析", "风险提示", "摘要结论"],
+  },
+  {
+    id: "info-pg",
+    name: "信息PG",
+    description: "围绕单条或多条信息进行PG向分析",
+    category: "info",
+    categoryName: "信息分析类",
+    input: "信息文本/链接/素材",
+    output: "画像特征、相关判断",
+    icon: User,
+    color: "cyan",
+    bgColor: "bg-cyan-500/10",
+    borderColor: "border-cyan-500/30",
+    iconColor: "text-cyan-500",
+    dimensions: ["账号画像", "内容倾向", "行为特征"],
+  },
+  {
+    id: "info-spread",
+    name: "信息传播分析",
+    description: "分析信息传播路径、传播范围与传播表现",
+    category: "info",
+    categoryName: "信息分析类",
+    input: "信息链接/信息集合",
+    output: "传播过程、传播节点、传播影响",
+    icon: Network,
+    color: "teal",
+    bgColor: "bg-teal-500/10",
+    borderColor: "border-teal-500/30",
+    iconColor: "text-teal-500",
+    dimensions: ["传播路径", "传播节点", "传播表现", "影响摘要"],
+  },
+  // 账号分析类
+  {
+    id: "account-pg",
+    name: "账号PG",
+    description: "围绕账号内容与行为特征进行PG分析",
+    category: "account",
+    categoryName: "账号分析类",
+    input: "账号ID/账号链接/内容集合",
+    output: "账号画像、内容倾向、行为特征",
+    icon: Users,
+    color: "purple",
+    bgColor: "bg-purple-500/10",
+    borderColor: "border-purple-500/30",
+    iconColor: "text-purple-500",
+    dimensions: ["账号画像", "内容倾向", "行为特征", "影响判断"],
+  },
+  // 事件分析类
+  {
+    id: "sentiment",
+    name: "三情分析",
+    description: "对事件进行舆情、社情、民情综合分析",
+    category: "event",
+    categoryName: "事件分析类",
+    input: "事件关键词/事件链接/素材",
+    output: "情绪概览、关注焦点、风险提示",
+    icon: MessageSquare,
+    color: "orange",
+    bgColor: "bg-orange-500/10",
+    borderColor: "border-orange-500/30",
+    iconColor: "text-orange-500",
+    dimensions: ["舆情分析", "社情分析", "民情分析", "风险提示"],
+  },
+  {
+    id: "event",
+    name: "事件分析",
+    description: "围绕某个事件进行整体分析",
+    category: "event",
+    categoryName: "事件分析类",
+    input: "事件名称/事件材料/事件链接",
+    output: "事件脉络、关键节点、风险判断",
+    icon: Target,
+    color: "red",
+    bgColor: "bg-red-500/10",
+    borderColor: "border-red-500/30",
+    iconColor: "text-red-500",
+    dimensions: ["事件脉络", "关键节点", "风险判断", "初步建议"],
+  },
+  // 专题分析类
+  {
+    id: "topic",
+    name: "专题分析",
+    description: "对某专题做集中分析",
+    category: "topic",
+    categoryName: "专题分析类",
+    input: "专题名称/专题材料/文本集合",
+    output: "专题结构、核心问题、观点聚合、结论建议",
+    icon: BookOpen,
+    color: "green",
+    bgColor: "bg-green-500/10",
+    borderColor: "border-green-500/30",
+    iconColor: "text-green-500",
+    dimensions: ["专题结构", "核心问题", "观点聚合", "结论建议"],
+  },
+];
+
+const categoryConfig = {
+  info: {
+    title: "内部应用",
+    hoverColor: "group-hover:text-blue-500", // 内部应用 hover 蓝色
+    btnTheme: {
+      dark: "bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 border-blue-500/30",
+      light: "bg-blue-50 text-blue-600 hover:bg-blue-100 border-blue-200",
+    },
+  },
+  account: {
+    title: "外部应用",
+    hoverColor: "group-hover:text-purple-500", // 外部应用 hover 紫色
+    btnTheme: {
+      dark: "bg-purple-500/20 text-purple-400 hover:bg-purple-500/30 border-purple-500/30",
+      light: "bg-red-50 text-red-600 hover:bg-red-100 border-red-200", // 保留你原本外部应用的红色风格
+    },
+  },
+};
+
+const categoryOrder: AppCategory[] = ["info", "account", "event", "topic"];
+const zncmUrl = import.meta.env.VITE_API_BASE_URL || "";
+
+const LightAppSquare: React.FC<LightAppSquareProps> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+  const [searchQuery, setSearchQuery] = useState("");
+  const [categoryFilter, setCategoryFilter] = useState<AppCategory | "all">(
+    "all"
+  );
+  const [recentApps, setRecentApps] = useState<LightAppType[]>([
+    "sentiment",
+    "event",
+    "account-pg",
+  ]);
+  const [historyApps, setHistoryApps] = useState([]);
+  const [visible, setVisible] = useState(false);
+  const [editDataShow, setEditDataShow] = useState(false);
+  const [analysisData, setAnalysisData] = useState<analysisDataItem>({
+    appName: "",
+    appDesc: "",
+    appIcon: "",
+    jumpUrl: "",
+    appType: 2,
+  });
+  const [analysisList, setAnalysisList] = useState<analysisListData[]>([
+    { key: "info", list: [] },
+    { key: "account", list: [] },
+  ]);
+  const [fileFail, setFileFail] = useState<UploadFile[]>([
+    // 如果需要默认回显图片，可以在这里初始化
+    // { name: '默认图片.png', url: 'https://tdesign.gtimg.com/site/avatar.jpg', status: 'fail' }
+  ]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [pageNum, setPageNum] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(10); // 每页显示 10 条
+  const [total, setTotal] = useState<number>(0);
+  const state = useRef({
+    pageNum: 1,
+    pageSize: 10,
+  });
+  const showImageFileName = true;
+  const service = requestCrudService;
+  // 解构出 Group 和 Button，方便使用
+  const { Group: RadioGroup, Button: RadioButton } = Radio;
+  // 用于格式化接口返回的数据，使其符合 TDesign 的要求
+  const formatResponse = (res: any) => {
+    // 假设接口返回 { code: 0, data: { url: '...' } }
+    // 如果接口报错，可以在这里处理，让组件显示失败状态
+    if (res.code !== 0) {
+      return {
+        error: res.message || "上传失败",
+        url: "",
+        name: "",
+      };
+    }
+
+    return {
+      url: res.data.url,
+      name: res.data.name,
+    };
+  };
+
+  const handleChange: UploadProps["onChange"] = (files) => {
+    setFileFail(files);
+    console.log("当前文件列表:", files);
+  };
+
+  // 过滤应用
+  const filteredApps = useMemo(() => {
+    return lightApps.filter((app) => {
+      const matchesSearch =
+        searchQuery === "" ||
+        app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        app.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        app.input.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchesCategory =
+        categoryFilter === "all" || app.category === categoryFilter;
+      return matchesSearch && matchesCategory;
+    });
+  }, [searchQuery, categoryFilter]);
+
+  // 按分类分组
+  const groupedApps = useMemo(() => {
+    const groups: Record<AppCategory, LightApp[]> = {
+      info: [],
+      account: [],
+      event: [],
+      topic: [],
+    };
+    filteredApps.forEach((app) => {
+      groups[app.category].push(app);
+    });
+    return groups;
+  }, [filteredApps]);
+
+  // 处理应用启动
+  const handleLaunchApp = (app: LightApp) => {
+    console.log("启动应用:", app);
+
+    // 更新最近使用
+    setRecentApps((prev) => {
+      const filtered = prev.filter((id) => id !== app.id);
+      return [app.id, ...filtered].slice(0, 5);
+    });
+    onNavigate("light-app-run", app.id);
+  };
+
+  // 获取分类颜色
+  const getCategoryColor = (category: AppCategory) => {
+    const colors: Record<AppCategory, { text: string; bg: string }> = {
+      info: {
+        text: isDark ? "text-blue-400" : "text-blue-600",
+        bg: isDark ? "bg-blue-500/20" : "bg-blue-50",
+      },
+      account: {
+        text: isDark ? "text-purple-400" : "text-purple-600",
+        bg: isDark ? "bg-purple-500/20" : "bg-purple-50",
+      },
+      event: {
+        text: isDark ? "text-orange-400" : "text-orange-600",
+        bg: isDark ? "bg-orange-500/20" : "bg-orange-50",
+      },
+      topic: {
+        text: isDark ? "text-green-400" : "text-green-600",
+        bg: isDark ? "bg-green-500/20" : "bg-green-50",
+      },
+    };
+    return colors[category];
+  };
+
+  // 获取应用列表
+  const analysisListSearch = async () => {
+    const parmy = {
+      appName: searchQuery,
+      pageNum: state.current.pageNum,
+      pageSize: state.current.pageSize,
+    };
+    setLoading(true);
+    const res = await service.post(`${zncmUrl}/app/analysis/list`, parmy);
+    console.log(res);
+    setLoading(false);
+    const result = res.data;
+    const listData: analysisListData[] = [
+      { key: "info", list: [] },
+      { key: "account", list: [] },
+    ];
+    result.records.map((item: analysisListItem) => {
+      if (item.appType === 1) {
+        item.category = "info";
+        item.categoryName = "内部应用";
+        listData[0].list.push(item);
+      } else if (item.appType === 2) {
+        item.category = "account";
+        item.categoryName = "外部应用";
+        listData[1].list.push(item);
+      }
+      setAnalysisList(listData);
+    });
+    setTotal(result.total);
+  };
+
+  // 添加应用
+  const analysieAddListChange = async () => {
+    const res = await service.post(`${zncmUrl}/app/analysis/add`, analysisData);
+    console.log(res);
+    MessagePlugin.success("添加成功");
+    await analysisListSearch();
+  };
+
+  // 回车处理
+  const handleKeyDown = async (e) => {
+    if ((e.metaKey || e.ctrlKey || e.shiftKey) && e.key === "Enter") {
+      e.preventDefault();
+    } else if (e.keyCode === 13) {
+      e.preventDefault();
+      await analysisListSearch();
+    } else if (e.key === "/") {
+      e.preventDefault();
+    }
+  };
+
+  // 添加应用
+  const showDialog = () => {
+    setAnalysisData({
+      appName: "",
+      appDesc: "",
+      appIcon: "",
+      jumpUrl: "",
+      appType: 2,
+    });
+    setFileFail([]);
+    setVisible(true);
+  };
+
+  const handleOk = async () => {
+    await analysieAddListChange();
+    setVisible(false);
+  };
+
+  const handleClose = () => {
+    setVisible(false);
+  };
+
+  // 编辑应用
+  const editShowChange = (item: analysisDataItem) => {
+    setAnalysisData(item);
+    if (item.appIcon) {
+      setFileFail([
+        { name: "默认图片.png", url: item.appIcon, status: "fail" },
+      ]);
+    }
+    setEditDataShow(true);
+  };
+
+  const handleOkEdit = () => {
+    editDataChange();
+    setEditDataShow(false);
+  };
+
+  const handleCloseEdit = () => {
+    setEditDataShow(false);
+  };
+
+  const getBase64 = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result as string);
+      reader.onerror = (error) => reject(error);
+    });
+  };
+
+  const imgUpload: UploadProps["requestMethod"] = async (file: any) => {
+    console.log("file", file);
+    const base64 = await getBase64(file.raw);
+    handleDataChange("appIcon", base64);
+    return {
+      status: "success",
+      // response 对象里的数据会传给 formatResponse
+      response: {
+        url: "",
+        name: "",
+      },
+    };
+  };
+
+  // 通用的处理函数
+  const handleDataChange = (
+    key: keyof typeof analysisData,
+    value: string | number
+  ) => {
+    setAnalysisData((prev) => ({
+      ...prev,
+      [key]: value,
+    }));
+  };
+
+  // 删除应用
+  const delDataChange = async (item: analysisListItem) => {
+    console.log("删除", item);
+    setLoading(true);
+    const res = await service.get(`${zncmUrl}/app/analysis/delete/${item.id}`);
+    console.log(res);
+    MessagePlugin.success("操作成功");
+    await analysisListSearch();
+  };
+  const getHistoryApps = async () => {
+    const reqParam = {
+      limit: 5,
+    };
+    const res = await service.get(`${zncmUrl}/app/history/recent`, reqParam);
+    if (res && res.data) {
+      console.log({ resData: res.data });
+      setHistoryApps(res.data);
+    }
+  };
+  // 编辑应用
+  const editDataChange = async () => {
+    setLoading(true);
+    const res = await service.post(
+      `${zncmUrl}/app/analysis/update`,
+      analysisData
+    );
+    console.log(res);
+    MessagePlugin.success("操作成功");
+    await analysisListSearch();
+  };
+
+  const pageIndexChange = async (value: number) => {
+    state.current.pageNum = value;
+    setPageNum(value);
+    await analysisListSearch();
+  };
+
+  const pageSizeChange = async (value: number) => {
+    state.current.pageSize = value;
+    setPageSize(value);
+    await analysisListSearch();
+  };
+
+  // 发送请求
+  useEffect(() => {
+    analysisListSearch();
+    getHistoryApps();
+  }, []);
+
+  return (
+    //获取最近使用应用列表
+
+    <div className="space-y-6">
+      {/* 顶部工具栏 */}
+      <div
+        className={`rounded-xl border p-4 ${
+          isDark
+            ? "bg-slate-800/50 border-slate-700"
+            : "bg-white border-gray-200"
+        }`}
+      >
+        <div className="flex flex-col lg:flex-row lg:items-center gap-4">
+          {/* 面包屑和标题 */}
+          <div className="flex items-center gap-2 flex-1">
+            <Layout
+              className={`w-5 h-5 ${isDark ? "text-blue-400" : "text-red-500"}`}
+            />
+            <span
+              className={`text-sm ${
+                isDark ? "text-slate-400" : "text-gray-500"
+              }`}
+            >
+              轻应用中心 /
+            </span>
+            <span
+              className={`text-sm font-medium ${
+                isDark ? "text-white" : "text-gray-900"
+              }`}
+            >
+              应用广场
+            </span>
+          </div>
+
+          {/* 搜索框 */}
+          <div className="flex-1 max-w-md">
+            <div className="relative">
+              <Search
+                className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${
+                  isDark ? "text-slate-500" : "text-gray-400"
+                }`}
+              />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                onKeyDown={(e) => handleKeyDown(e)}
+                placeholder="搜索应用名称或分析对象..."
+                className={`w-full pl-10 pr-4 py-2 rounded-lg border transition-colors focus:outline-none focus:ring-2 ${
+                  isDark
+                    ? "bg-slate-900 border-slate-600 text-slate-200 placeholder-slate-500 focus:border-blue-500 focus:ring-blue-500/20"
+                    : "bg-gray-50 border-gray-300 text-gray-900 placeholder-gray-400 focus:border-red-500 focus:ring-red-500/20"
+                }`}
+              />
+            </div>
+          </div>
+
+          {/* 筛选和操作 */}
+          <div className="flex items-center gap-3">
+            {/* <select
+              value={categoryFilter}
+              onChange={(e) => setCategoryFilter(e.target.value as AppCategory | 'all')}
+              className={`px-3 py-2 rounded-lg border text-sm transition-colors focus:outline-none focus:ring-2 ${isDark
+                ? 'bg-slate-900 border-slate-600 text-slate-200 focus:border-blue-500'
+                : 'bg-gray-50 border-gray-300 text-gray-700 focus:border-red-500'
+                }`}
+            >
+              <option value="all">全部分类</option>
+              <option value="info">信息分析类</option>
+              <option value="account">账号分析类</option>
+              <option value="event">事件分析类</option>
+              <option value="topic">专题分析类</option>
+            </select> */}
+            <button
+              onClick={() => onNavigate("light-app-records")}
+              className={`px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 transition-colors ${
+                isDark
+                  ? "bg-slate-700 text-slate-300 hover:bg-slate-600"
+                  : "bg-gray-100 text-gray-600 hover:bg-gray-200"
+              }`}
+            >
+              <Clock className="w-4 h-4" />
+              运行记录
+            </button>
+            <Button theme="primary" onClick={showDialog}>
+              <span className="flex items-center">
+                <Plus className="w-4 h-4 mr-[10px]" />
+                添加
+              </span>
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* 最近使用 */}
+      {historyApps.length > 0 &&
+        searchQuery === "" &&
+        categoryFilter === "all" && (
+          <div
+            className={`rounded-xl border p-4 ${
+              isDark
+                ? "bg-slate-800/50 border-slate-700"
+                : "bg-white border-gray-200"
+            }`}
+          >
+            <div className="flex items-center gap-2 mb-4">
+              <Clock
+                className={`w-4 h-4 ${
+                  isDark ? "text-blue-400" : "text-red-500"
+                }`}
+              />
+              <h3
+                className={`text-sm font-medium ${
+                  isDark ? "text-slate-300" : "text-gray-700"
+                }`}
+              >
+                最近使用
+              </h3>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {historyApps.map((app) => {
+                // const app = historyApps.find((a) => a.id === appId);
+                // if (!app) return null;
+                // const Icon = app.icon;
+                return (
+                  <button
+                    // key={app.id}
+                    // onClick={() => handleLaunchApp(app)}
+                    className={`px-4 py-2 rounded-lg border text-sm font-medium flex items-center gap-2 transition-all hover:scale-105 ${
+                      isDark
+                        ? `bg-slate-700/50 border-slate-600 text-slate-300 hover:bg-slate-700`
+                        : `bg-gray-50 border-gray-200 text-gray-700 hover:bg-gray-100`
+                    }`}
+                  >
+                    {/* <Icon className={`w-4 h-4 ${app.iconColor}`} /> */}
+                    {app.appName}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+      {/* 应用分组区 */}
+      <Loading loading={loading} text="正在加载中...">
+        <div className="space-y-6">
+          {analysisList.map((section) => {
+            const config = categoryConfig[section.key];
+            const colorStyle = getCategoryColor(section.key);
+
+            return (
+              <div key={section.key} className="space-y-4">
+                {/* 标题区域 */}
+                <div className="flex items-center gap-2">
+                  <h2
+                    className={`text-lg font-semibold ${
+                      isDark ? "text-white" : "text-gray-900"
+                    }`}
+                  >
+                    {config.title}
+                  </h2>
+                  <span
+                    className={`px-2 py-0.5 rounded text-xs font-medium ${colorStyle.bg} ${colorStyle.text}`}
+                  >
+                    {section.list.length} 个应用
+                  </span>
+                </div>
+
+                {/* 卡片网格 */}
+                {section.list.length > 0 ? (
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {section.list.map((app) => (
+                      <AppCard
+                        key={app.id}
+                        app={app}
+                        isDark={isDark}
+                        hoverColor={config.hoverColor}
+                        btnClass={
+                          isDark ? config.btnTheme.dark : config.btnTheme.light
+                        }
+                        delDataChange={delDataChange}
+                        editShowChange={editShowChange}
+                      />
+                    ))}
+                  </div>
+                ) : (
+                  <div
+                    className={`text-center py-10 text-sm ${
+                      isDark ? "text-slate-500" : "text-gray-400"
+                    }`}
+                  >
+                    <Empty description="暂无数据" />
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </Loading>
+      <div className="p-4 text-center">
+        <Pagination
+          total={total}
+          current={pageNum}
+          pageSize={pageSize}
+          onCurrentChange={(page) => pageIndexChange(Number(page))}
+          onPageSizeChange={(size) => pageSizeChange(Number(size))} // 每页数量变化时的回调
+        />
+      </div>
+
+      {/* 底部提示 */}
+      <div
+        className={`p-4 rounded-xl border ${
+          isDark
+            ? "bg-blue-500/10 border-blue-500/30"
+            : "bg-blue-50 border-blue-200"
+        }`}
+      >
+        <div className="flex items-start gap-3">
+          <Sparkles
+            className={`w-5 h-5 mt-0.5 ${
+              isDark ? "text-blue-400" : "text-blue-500"
+            }`}
+          />
+          <div>
+            <p
+              className={`text-sm font-medium ${
+                isDark ? "text-blue-300" : "text-blue-800"
+              }`}
+            >
+              关于轻应用中心
+            </p>
+            <p
+              className={`mt-1 text-sm ${
+                isDark ? "text-blue-400/80" : "text-blue-700"
+              }`}
+            >
+              轻应用中心提供了一系列快速分析工具，适合处理临时性的分析需求。相比完整的任务级应用，轻应用更加轻量便捷，可以快速调用多种工具完成分析工作。运行结果可保存快照、导出或转为正式任务。
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <Dialog
+        header="添加应用"
+        visible={visible}
+        onClose={handleClose} // 监听关闭事件
+        onConfirm={handleOk} // 点击确定按钮
+        onCancel={handleClose} // 点击取消按钮
+        closeOnOverlayClick={true} // 点击遮罩层是否关闭
+      >
+        <div className="mb-[10px]">
+          <Upload
+            // 对应 v-model
+            files={fileFail}
+            onChange={handleChange}
+            // 对应 theme="image"
+            theme="image"
+            requestMethod={imgUpload}
+            // 对应 accept
+            accept="image/*"
+            tips="系统logo"
+            // 对应 :show-image-file-name
+            showImageFileName={showImageFileName}
+            // 对应 :format-response
+            formatResponse={formatResponse}
+            // 可选：限制上传数量（演示单张）
+            multiple={false}
+            // 可选：上传失败时的提示（如果接口直接返回 4xx/5xx）
+            onFail={({ e, file }) => {
+              MessagePlugin.error(`文件 ${file.name} 上传失败`);
+            }}
+          />
+        </div>
+        <div className="mb-[10px] overflow-hidden">
+          <Row>
+            <Col span={2}>
+              <div>名称：</div>
+            </Col>
+            <Col span={9}>
+              <Input
+                placeholder="请输入应用名称"
+                value={analysisData.appName}
+                onChange={(val) => handleDataChange("appName", val)}
+                clearable
+              />
+            </Col>
+          </Row>
+        </div>
+        <div className="mb-[10px] overflow-hidden">
+          <Row>
+            <Col span={2}>
+              <div>详情：</div>
+            </Col>
+            <Col span={9}>
+              <Textarea
+                placeholder="请输入应用详情"
+                value={analysisData.appDesc}
+                onChange={(val) => handleDataChange("appDesc", val)}
+                autosize
+              />
+            </Col>
+          </Row>
+        </div>
+        <div className="mb-[10px] overflow-hidden">
+          <Row>
+            <Col span={2}>
+              <div>类型：</div>
+            </Col>
+            <Col span={9}>
+              <RadioGroup
+                variant="primary-filled" // 对应 variant="primary-filled"
+                value={analysisData.appType} // 绑定状态值
+                onChange={(value) => handleDataChange("appType", Number(value))}
+              >
+                {/* 3. 使用 RadioButton */}
+                <RadioButton value={1}>内部应用</RadioButton>
+                <RadioButton value={2}>外部应用</RadioButton>
+                <RadioButton value={3}>第三方集成</RadioButton>
+              </RadioGroup>
+            </Col>
+          </Row>
+        </div>
+        <div className="mb-[10px] overflow-hidden">
+          <Row>
+            <Col span={2}>
+              <div>链接：</div>
+            </Col>
+            <Col span={9}>
+              <Input
+                placeholder="请输入链接"
+                value={analysisData.jumpUrl}
+                onChange={(val) => handleDataChange("jumpUrl", val)}
+                clearable
+              />
+            </Col>
+          </Row>
+        </div>
+      </Dialog>
+      <Dialog
+        header="编辑应用"
+        visible={editDataShow}
+        onClose={handleCloseEdit} // 监听关闭事件
+        onConfirm={handleOkEdit} // 点击确定按钮
+        onCancel={handleCloseEdit} // 点击取消按钮
+        closeOnOverlayClick={true} // 点击遮罩层是否关闭
+      >
+        <div className="mb-[10px]">
+          {/* <Upload
+            // 对应 v-model
+            files={fileFail}
+            onChange={handleChange}
+            // 对应 theme="image"
+            theme="image"
+            requestMethod={imgUpload}
+            // 对应 accept
+            accept="image/*"
+            tips="系统logo"
+            // 对应 :show-image-file-name
+            showImageFileName={showImageFileName}
+            // 对应 :format-response
+            formatResponse={formatResponse}
+            // 可选：限制上传数量（演示单张）
+            multiple={false}
+            // 可选：上传失败时的提示（如果接口直接返回 4xx/5xx）
+            onFail={({ e, file }) => {
+              MessagePlugin.error(`文件 ${file.name} 上传失败`);
+            }} /> */}
+        </div>
+        <div className="mb-[10px] overflow-hidden">
+          <Row>
+            <Col span={2}>
+              <div>名称：</div>
+            </Col>
+            <Col span={9}>
+              <Input
+                placeholder="请输入应用名称"
+                value={analysisData.appName}
+                onChange={(val) => handleDataChange("appName", val)}
+                clearable
+              />
+            </Col>
+          </Row>
+        </div>
+        <div className="mb-[10px] overflow-hidden">
+          <Row>
+            <Col span={2}>
+              <div>详情：</div>
+            </Col>
+            <Col span={9}>
+              <Textarea
+                placeholder="请输入应用详情"
+                value={analysisData.appDesc}
+                onChange={(val) => handleDataChange("appDesc", val)}
+                autosize
+              />
+            </Col>
+          </Row>
+        </div>
+        <div className="mb-[10px] overflow-hidden">
+          <Row>
+            <Col span={2}>
+              <div>类型：</div>
+            </Col>
+            <Col span={9}>
+              <RadioGroup
+                variant="primary-filled" // 对应 variant="primary-filled"
+                value={analysisData.appType} // 绑定状态值
+                onChange={(value) => handleDataChange("appType", Number(value))}
+              >
+                {/* 3. 使用 RadioButton */}
+                <RadioButton value={1}>内部应用</RadioButton>
+                <RadioButton value={2}>外部应用</RadioButton>
+                <RadioButton value={3}>第三方集成</RadioButton>
+              </RadioGroup>
+            </Col>
+          </Row>
+        </div>
+        <div className="mb-[10px] overflow-hidden">
+          <Row>
+            <Col span={2}>
+              <div>链接：</div>
+            </Col>
+            <Col span={9}>
+              <Input
+                placeholder="请输入链接"
+                value={analysisData.jumpUrl}
+                onChange={(val) => handleDataChange("jumpUrl", val)}
+                clearable
+              />
+            </Col>
+          </Row>
+        </div>
+      </Dialog>
+    </div>
+  );
+};
+
+export default LightAppSquare;
diff --git a/web-code/pages/Login.tsx b/web-code/pages/Login.tsx
new file mode 100644
index 00000000..dd1fbf0e
--- /dev/null
+++ b/web-code/pages/Login.tsx
@@ -0,0 +1,37 @@
+import { Outlet, useNavigate } from 'react-router-dom';
+import React, { useState, useEffect, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+const zncmUrl = import.meta.env.VITE_AIPI_CONSUMER_URL  || '';
+import { requestCrudService } from '@/service/request-axios-service';
+const service = requestCrudService;
+const Login: React.FC = () => {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const yUserId = searchParams.get('yUserId');
+  const toolToken = searchParams.get('token');
+  if (toolToken) {
+    localStorage.setItem('tools_token', toolToken);
+  }
+  const loginSearch = async () => {
+    const param = {
+      yuserId: yUserId
+    }
+    const res: any = await service.get(`${zncmUrl}/cop/userDetailByYuserId`, param);
+    console.log('res yUserId', res , yUserId)
+    const result = res.data;
+    localStorage.setItem('userId', result.id)
+    localStorage.setItem('userInfo', JSON.stringify(result));
+    navigate('/qa-center/qa-from');
+  }
+  useEffect(() => {
+    console.log('登录信息',searchParams.get('yUserId'));
+    loginSearch();
+  }, []);
+  return (
+    <div className="h-full flex flex-col">
+      登录中...
+    </div>
+  );
+}
+export default Login
diff --git a/web-code/pages/NetworkActorResourceManagement.tsx b/web-code/pages/NetworkActorResourceManagement.tsx
new file mode 100644
index 00000000..579fc4f3
--- /dev/null
+++ b/web-code/pages/NetworkActorResourceManagement.tsx
@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from "react";
+import { useTheme } from "../contexts/ThemeContext";
+import { requestCrudService } from "@/service/request-axios-service";
+import "./css/KnowledgeBaseResourceManagement.css";
+
+import { PageType } from "../components/Sidebar";
+
+interface NetworkActorResourceManagementProps {
+  onNavigate: (page: PageType) => void;
+}
+
+const NetworkActorResourceManagement: React.FC<
+  NetworkActorResourceManagementProps
+> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+  const [iframeUrl, setIframeUrl] = useState("");
+  const b2SearchUrl = import.meta.env.VITE_AIPI_B2ACTOR_URL;
+
+  // const service = requestCrudService;
+  useEffect(() => {
+    initIframeUrl();
+  }, []);
+  const initIframeUrl = async () => {
+    // const url = `${knowledgeURL}/#/knowledge/knowledge-search?isIframe=true`;
+
+    const jsonStr = localStorage.getItem("userInfo");
+    console.log("jsonStr", jsonStr);
+    // if (jsonStr) {
+    //   const userInfo = JSON.parse(jsonStr);
+    //   console.log("userInfo", userInfo);
+    // }
+    console.log({ iframeUrl: `${b2SearchUrl}/fromB/toXWT?isFrame=1` });
+    setIframeUrl(`${b2SearchUrl}/fromB/toXWT?isFrame=1`);
+  };
+
+  return (
+    <div className="iframe-container">
+      <iframe src={iframeUrl} className="full-size-iframe"></iframe>
+    </div>
+  );
+};
+
+export default NetworkActorResourceManagement;
diff --git a/web-code/pages/ObservabilityPage.tsx b/web-code/pages/ObservabilityPage.tsx
new file mode 100644
index 00000000..e66078d3
--- /dev/null
+++ b/web-code/pages/ObservabilityPage.tsx
@@ -0,0 +1,810 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import {
+  Activity,
+  AlertTriangle,
+  Clock,
+  Filter,
+  RefreshCw,
+  ChevronLeft,
+  ChevronRight,
+  X,
+  Link2,
+  ArrowRight,
+  Trash2,
+} from 'lucide-react';
+
+// ------------------------------------------------------------------ //
+//  Types                                                               //
+// ------------------------------------------------------------------ //
+
+interface CallTrace {
+  id: string;
+  trace_id?: string;
+  task_id?: string;
+  parent_call_id?: string;
+  call_type: 'model' | 'mcp' | 'skill';
+  status: 'success' | 'failed' | 'cancelled' | 'timeout';
+  started_at: number;
+  ended_at?: number;
+  duration_ms: number;
+  name: string;
+  action: string;
+  mcp_key?: string;
+  mcp_name?: string;
+  skill_key?: string;
+  skill_name?: string;
+  model?: string;
+  input_summary?: string;
+  output_summary?: string;
+  error_id?: string;
+  error_message?: string;
+  meta?: Record<string, unknown>;
+}
+
+interface ErrorLog {
+  id: string;
+  trace_id?: string;
+  task_id?: string;
+  call_id?: string;
+  source: string;
+  level: 'warning' | 'error';
+  happened_at: number;
+  message: string;
+  recoverable: boolean;
+  mcp_key?: string;
+  mcp_name?: string;
+  skill_key?: string;
+  skill_name?: string;
+  model?: string;
+  action?: string;
+  input_summary?: string;
+  params_summary?: Record<string, unknown>;
+}
+
+interface PagedResponse<T> {
+  items: T[];
+  total: number;
+  page: number;
+  page_size: number;
+}
+
+interface Options {
+  models: string[];
+  mcps: { key: string; name: string }[];
+  skills: { key: string; name: string }[];
+  statuses: string[];
+  sources: string[];
+}
+
+// ------------------------------------------------------------------ //
+//  Helpers                                                             //
+// ------------------------------------------------------------------ //
+
+function formatTs(ms: number): string {
+  return new Date(ms).toLocaleString('zh-CN', { hour12: false });
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(2)}s`;
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  success: 'bg-green-500/20 text-green-400',
+  failed: 'bg-red-500/20 text-red-400',
+  timeout: 'bg-yellow-500/20 text-yellow-400',
+  cancelled: 'bg-slate-500/20 text-slate-400',
+  warning: 'bg-yellow-500/20 text-yellow-400',
+  error: 'bg-red-500/20 text-red-400',
+};
+
+const TYPE_COLORS: Record<string, string> = {
+  model: 'bg-blue-500/20 text-blue-400',
+  mcp: 'bg-purple-500/20 text-purple-400',
+  skill: 'bg-cyan-500/20 text-cyan-400',
+};
+
+const SOURCE_COLORS: Record<string, string> = {
+  model: 'bg-blue-500/20 text-blue-400',
+  llm: 'bg-blue-500/20 text-blue-400',
+  mcp: 'bg-purple-500/20 text-purple-400',
+  skill: 'bg-cyan-500/20 text-cyan-400',
+  orchestrator: 'bg-orange-500/20 text-orange-400',
+  network: 'bg-pink-500/20 text-pink-400',
+};
+
+const backUrl = 'https://ch1.b.uat.4.cn/zncmback'
+
+function Badge({ label, colorClass }: { label: string; colorClass: string }) {
+  return (
+    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${colorClass}`}>
+      {label}
+    </span>
+  );
+}
+
+// ------------------------------------------------------------------ //
+//  API                                                                 //
+// ------------------------------------------------------------------ //
+
+async function fetchOptions(): Promise<Options> {
+  const res = await fetch(`${backUrl}/api/observability/options`);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+async function fetchCalls(params: Record<string, string | number | undefined>): Promise<PagedResponse<CallTrace>> {
+  const qs = new URLSearchParams();
+  Object.entries(params).forEach(([k, v]) => {
+    if (v !== undefined && v !== null && v !== '') qs.append(k, String(v));
+  });
+  const res = await fetch(`${backUrl}/api/observability/calls?${qs}`);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+async function fetchErrors(params: Record<string, string | number | undefined>): Promise<PagedResponse<ErrorLog>> {
+  const qs = new URLSearchParams();
+  Object.entries(params).forEach(([k, v]) => {
+    if (v !== undefined && v !== null && v !== '') qs.append(k, String(v));
+  });
+  const res = await fetch(`${backUrl}/api/observability/errors?${qs}`);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+// ------------------------------------------------------------------ //
+//  Shared UI atoms                                                     //
+// ------------------------------------------------------------------ //
+
+function Select({
+  value, onChange, options, placeholder, cls,
+}: {
+  value: string; onChange: (v: string) => void;
+  options: { value: string; label: string }[]; placeholder?: string; cls?: string;
+}) {
+  return (
+    <select value={value} onChange={(e) => onChange(e.target.value)}
+      className={`text-sm rounded-lg border px-3 py-1.5 outline-none ${cls ?? ''}`}>
+      {placeholder && <option value="">{placeholder}</option>}
+      {options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
+    </select>
+  );
+}
+
+function Pagination({ page, pageSize, total, onPage, isDark }: {
+  page: number; pageSize: number; total: number; onPage: (p: number) => void; isDark: boolean;
+}) {
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const textMuted = isDark ? 'text-slate-400' : 'text-gray-500';
+  const btn = `p-1.5 rounded-lg transition-all disabled:opacity-40 ${isDark ? 'text-slate-400 hover:text-white hover:bg-slate-700' : 'text-gray-500 hover:text-gray-900 hover:bg-gray-100'}`;
+  return (
+    <div className={`flex items-center gap-3 text-sm ${textMuted}`}>
+      <span>共 {total} 条</span>
+      <div className="flex items-center gap-1">
+        <button className={btn} disabled={page <= 1} onClick={() => onPage(page - 1)}><ChevronLeft className="w-4 h-4" /></button>
+        <span className="px-2">{page} / {totalPages}</span>
+        <button className={btn} disabled={page >= totalPages} onClick={() => onPage(page + 1)}><ChevronRight className="w-4 h-4" /></button>
+      </div>
+    </div>
+  );
+}
+
+// ------------------------------------------------------------------ //
+//  Linked items — shown inside detail modals                          //
+// ------------------------------------------------------------------ //
+
+function LinkedErrors({ callId, traceId, isDark }: { callId: string; traceId?: string; isDark: boolean }) {
+  const [items, setItems] = useState<ErrorLog[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchErrors({ call_id: callId, page: 1, page_size: 10 })
+      .then((r) => setItems(r.items))
+      .catch(() => setItems([]))
+      .finally(() => setLoading(false));
+  }, [callId]);
+
+  const label = isDark ? 'text-slate-400' : 'text-gray-500';
+  const rowBg = isDark ? 'bg-red-900/20 border-red-800/30' : 'bg-red-50 border-red-200';
+
+  if (loading) return <p className={`text-xs ${label}`}>加载相关错误…</p>;
+  if (items.length === 0) return <p className={`text-xs ${label}`}>无相关错误日志</p>;
+  return (
+    <div className="space-y-1.5">
+      {items.map((e) => (
+        <div key={e.id} className={`rounded-lg border p-2.5 ${rowBg}`}>
+          <div className="flex items-center gap-2 flex-wrap">
+            <Badge label={e.level} colorClass={STATUS_COLORS[e.level] ?? ''} />
+            <Badge label={e.source} colorClass={SOURCE_COLORS[e.source] ?? ''} />
+            <span className={`text-xs ${label}`}>{formatTs(e.happened_at)}</span>
+          </div>
+          <p className={`text-sm mt-1 ${isDark ? 'text-slate-200' : 'text-gray-800'}`}>{e.message}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function LinkedCall({ callId, isDark }: { callId: string; isDark: boolean }) {
+  const [item, setItem] = useState<CallTrace | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // call_id in error = the id of the CallTrace record
+    fetchCalls({ trace_id: callId, page: 1, page_size: 1 })
+      .then((r) => setItem(r.items[0] ?? null))
+      .catch(() => setItem(null))
+      .finally(() => setLoading(false));
+  }, [callId]);
+
+  const label = isDark ? 'text-slate-400' : 'text-gray-500';
+  const rowBg = isDark ? 'bg-blue-900/20 border-blue-800/30' : 'bg-blue-50 border-blue-200';
+
+  if (loading) return <p className={`text-xs ${label}`}>加载关联调用…</p>;
+  if (!item) return <p className={`text-xs ${label}`}>未找到关联调用记录（ID: {callId}）</p>;
+  return (
+    <div className={`rounded-lg border p-2.5 ${rowBg}`}>
+      <div className="flex items-center gap-2 flex-wrap">
+        <Badge label={item.call_type} colorClass={TYPE_COLORS[item.call_type] ?? ''} />
+        <Badge label={item.status} colorClass={STATUS_COLORS[item.status] ?? ''} />
+        <span className={`text-xs font-mono ${label}`}>{formatDuration(item.duration_ms)}</span>
+        <span className={`text-xs ${label}`}>{formatTs(item.started_at)}</span>
+      </div>
+      <p className={`text-sm mt-1 font-medium ${isDark ? 'text-slate-200' : 'text-gray-800'}`}>{item.name}</p>
+      <p className={`text-xs mt-0.5 ${label}`}>{item.action}</p>
+    </div>
+  );
+}
+
+// ------------------------------------------------------------------ //
+//  Detail Modals                                                       //
+// ------------------------------------------------------------------ //
+
+function Section({ title, isDark, children }: { title: string; isDark: boolean; children: React.ReactNode }) {
+  const divider = isDark ? 'border-blue-800/20' : 'border-gray-200';
+  const label = isDark ? 'text-slate-400' : 'text-gray-500';
+  return (
+    <div className={`border-t pt-4 mt-4 ${divider}`}>
+      <div className={`flex items-center gap-1.5 mb-2 text-xs font-semibold uppercase tracking-wide ${label}`}>
+        <Link2 className="w-3.5 h-3.5" />
+        {title}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+function FieldRow({ label, value, isDark }: { label: string; value?: string | null; isDark: boolean }) {
+  if (!value) return null;
+  const rowBg = isDark ? 'bg-slate-800/40' : 'bg-gray-50';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-500';
+  return (
+    <div className={`rounded-lg p-2.5 ${rowBg}`}>
+      <span className={`text-xs font-medium ${textSecondary}`}>{label}</span>
+      <p className={`text-sm mt-0.5 break-all whitespace-pre-wrap ${textPrimary}`}>{value}</p>
+    </div>
+  );
+}
+
+function CallDetailModal({ item, onClose, isDark }: { item: CallTrace; onClose: () => void; isDark: boolean }) {
+  const bg = isDark ? 'bg-slate-900 border-blue-800/30' : 'bg-white border-gray-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={onClose}>
+      <div className={`relative w-full max-w-2xl max-h-[85vh] overflow-y-auto rounded-xl border shadow-2xl p-6 ${bg}`}
+        onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center justify-between mb-4">
+          <h3 className={`font-semibold text-base ${textPrimary}`}>调用详情</h3>
+          <button onClick={onClose} className={`p-1.5 rounded-lg ${isDark ? 'hover:bg-slate-700' : 'hover:bg-gray-100'}`}>
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+        <div className="space-y-1.5">
+          <FieldRow label="ID" value={item.id} isDark={isDark} />
+          <FieldRow label="Trace ID" value={item.trace_id} isDark={isDark} />
+          <FieldRow label="Task ID" value={item.task_id} isDark={isDark} />
+          <FieldRow label="Parent Call ID" value={item.parent_call_id} isDark={isDark} />
+          <FieldRow label="类型" value={item.call_type} isDark={isDark} />
+          <FieldRow label="状态" value={item.status} isDark={isDark} />
+          <FieldRow label="名称" value={item.name} isDark={isDark} />
+          <FieldRow label="操作" value={item.action} isDark={isDark} />
+          <FieldRow label="开始时间" value={formatTs(item.started_at)} isDark={isDark} />
+          <FieldRow label="结束时间" value={item.ended_at ? formatTs(item.ended_at) : undefined} isDark={isDark} />
+          <FieldRow label="耗时" value={formatDuration(item.duration_ms)} isDark={isDark} />
+          <FieldRow label="模型" value={item.model} isDark={isDark} />
+          <FieldRow label="MCP Key" value={item.mcp_key} isDark={isDark} />
+          <FieldRow label="MCP 名称" value={item.mcp_name} isDark={isDark} />
+          <FieldRow label="Skill Key" value={item.skill_key} isDark={isDark} />
+          <FieldRow label="Skill 名称" value={item.skill_name} isDark={isDark} />
+          <FieldRow label="输入摘要" value={item.input_summary} isDark={isDark} />
+          <FieldRow label="输出摘要" value={item.output_summary} isDark={isDark} />
+          <FieldRow label="错误信息" value={item.error_message} isDark={isDark} />
+          <FieldRow label="Meta" value={item.meta && Object.keys(item.meta).length ? JSON.stringify(item.meta, null, 2) : undefined} isDark={isDark} />
+        </div>
+
+        <Section title="相关错误日志" isDark={isDark}>
+          <LinkedErrors callId={item.id} traceId={item.trace_id} isDark={isDark} />
+        </Section>
+      </div>
+    </div>
+  );
+}
+
+function ErrorDetailModal({ item, onClose, isDark }: { item: ErrorLog; onClose: () => void; isDark: boolean }) {
+  const bg = isDark ? 'bg-slate-900 border-blue-800/30' : 'bg-white border-gray-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={onClose}>
+      <div className={`relative w-full max-w-2xl max-h-[85vh] overflow-y-auto rounded-xl border shadow-2xl p-6 ${bg}`}
+        onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center justify-between mb-4">
+          <h3 className={`font-semibold text-base ${textPrimary}`}>错误详情</h3>
+          <button onClick={onClose} className={`p-1.5 rounded-lg ${isDark ? 'hover:bg-slate-700' : 'hover:bg-gray-100'}`}>
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+        <div className="space-y-1.5">
+          <FieldRow label="ID" value={item.id} isDark={isDark} />
+          <FieldRow label="Trace ID" value={item.trace_id} isDark={isDark} />
+          <FieldRow label="Task ID" value={item.task_id} isDark={isDark} />
+          <FieldRow label="Call ID" value={item.call_id} isDark={isDark} />
+          <FieldRow label="来源" value={item.source} isDark={isDark} />
+          <FieldRow label="级别" value={item.level} isDark={isDark} />
+          <FieldRow label="发生时间" value={formatTs(item.happened_at)} isDark={isDark} />
+          <FieldRow label="可恢复" value={item.recoverable ? '是' : '否'} isDark={isDark} />
+          <FieldRow label="消息" value={item.message} isDark={isDark} />
+          <FieldRow label="MCP Key" value={item.mcp_key} isDark={isDark} />
+          <FieldRow label="MCP 名称" value={item.mcp_name} isDark={isDark} />
+          <FieldRow label="Skill Key" value={item.skill_key} isDark={isDark} />
+          <FieldRow label="Skill 名称" value={item.skill_name} isDark={isDark} />
+          <FieldRow label="模型" value={item.model} isDark={isDark} />
+          <FieldRow label="操作" value={item.action} isDark={isDark} />
+          <FieldRow label="输入摘要" value={item.input_summary} isDark={isDark} />
+          <FieldRow label="参数摘要" value={item.params_summary && Object.keys(item.params_summary).length ? JSON.stringify(item.params_summary, null, 2) : undefined} isDark={isDark} />
+        </div>
+
+        {item.call_id && (
+          <Section title="关联调用记录" isDark={isDark}>
+            <LinkedCall callId={item.call_id} isDark={isDark} />
+          </Section>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ------------------------------------------------------------------ //
+//  Task ID pill — clickable, stops row-click propagation              //
+// ------------------------------------------------------------------ //
+
+function TaskIdPill({
+  taskId, onFilter, isDark,
+}: { taskId?: string | null; onFilter: (id: string) => void; isDark: boolean }) {
+  if (!taskId) return <span className={isDark ? 'text-slate-600' : 'text-gray-400'}>-</span>;
+  return (
+    <button
+      title="按此 Task ID 筛选"
+      onClick={(e) => { e.stopPropagation(); onFilter(taskId); }}
+      className={`font-mono text-xs px-1.5 py-0.5 rounded transition-all max-w-[100px] truncate block
+        ${isDark ? 'text-blue-400 hover:bg-blue-500/20' : 'text-blue-600 hover:bg-blue-50'}`}
+    >
+      {taskId}
+    </button>
+  );
+}
+
+// ------------------------------------------------------------------ //
+//  调用耗时统计 Tab                                                     //
+// ------------------------------------------------------------------ //
+
+interface CallsTabProps {
+  opts: Options;
+  isDark: boolean;
+  externalTaskId: string;
+  onSwitchToErrors: (taskId: string) => void;
+}
+
+function CallsTab({ opts, isDark, externalTaskId, onSwitchToErrors }: CallsTabProps) {
+  const [filters, setFilters] = useState({
+    call_type: '', model: '', mcp_key: '', skill_key: '', status: '',
+    task_id: externalTaskId, sort_by: 'started_at', sort_order: 'desc',
+  });
+  const [page, setPage] = useState(1);
+  const [data, setData] = useState<PagedResponse<CallTrace> | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState('');
+  const [selected, setSelected] = useState<CallTrace | null>(null);
+  const PAGE_SIZE = 20;
+
+  // sync external task_id changes
+  useEffect(() => {
+    setFilters((prev) => ({ ...prev, task_id: externalTaskId }));
+  }, [externalTaskId]);
+
+  const load = useCallback(async (p: number, f = filters) => {
+    setLoading(true);
+    setFetchError('');
+    try {
+      const result = await fetchCalls({ ...f, page: p, page_size: PAGE_SIZE });
+      setData(result);
+      setPage(p);
+    } catch (e) {
+      setFetchError(String(e));
+    } finally {
+      setLoading(false);
+    }
+  }, [filters]);
+
+  useEffect(() => { load(1); }, [filters]);
+
+  const setF = (key: string, val: string) => setFilters((prev) => ({ ...prev, [key]: val }));
+
+  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
+  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const selectCls = isDark ? 'bg-slate-900/60 border-blue-800/40 text-slate-200' : 'bg-white border-gray-300 text-gray-700';
+  const inputCls = isDark ? 'bg-slate-900/60 border-blue-800/40 text-slate-200 placeholder-slate-500' : 'bg-white border-gray-300 text-gray-700 placeholder-gray-400';
+  const trHover = isDark ? 'hover:bg-slate-700/30' : 'hover:bg-gray-50';
+  const thCls = `text-left text-xs font-medium uppercase tracking-wide py-2.5 px-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`;
+  const tdCls = `py-2.5 px-3 text-sm ${textPrimary}`;
+  const divider = isDark ? 'border-blue-800/20' : 'border-gray-200';
+
+  return (
+    <div className="space-y-4">
+      <div className={`${cardBg} border ${cardBorder} rounded-xl p-4`}>
+        <div className="flex items-center gap-2 mb-3">
+          <Filter className="w-4 h-4 text-blue-400" />
+          <span className={`text-sm font-medium ${textPrimary}`}>筛选条件</span>
+          {filters.task_id && (
+            <span className="flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-blue-500/20 text-blue-400">
+              Task: {filters.task_id}
+              <button onClick={() => setF('task_id', '')} className="ml-0.5 hover:text-white">
+                <X className="w-3 h-3" />
+              </button>
+            </span>
+          )}
+        </div>
+        <div className="flex flex-wrap gap-3">
+          <Select value={filters.call_type} onChange={(v) => setF('call_type', v)} placeholder="全部类型" cls={selectCls}
+            options={[{ value: 'model', label: '模型' }, { value: 'mcp', label: 'MCP' }, { value: 'skill', label: 'Skill' }]} />
+          <Select value={filters.model} onChange={(v) => setF('model', v)} placeholder="全部模型" cls={selectCls}
+            options={opts.models.map((m) => ({ value: m, label: m }))} />
+          <Select value={filters.mcp_key} onChange={(v) => setF('mcp_key', v)} placeholder="全部MCP" cls={selectCls}
+            options={opts.mcps.map((m) => ({ value: m.key, label: m.name || m.key }))} />
+          <Select value={filters.skill_key} onChange={(v) => setF('skill_key', v)} placeholder="全部Skill" cls={selectCls}
+            options={opts.skills.map((s) => ({ value: s.key, label: s.name || s.key }))} />
+          <Select value={filters.status} onChange={(v) => setF('status', v)} placeholder="全部状态" cls={selectCls}
+            options={opts.statuses.map((s) => ({ value: s, label: s }))} />
+          <input value={filters.task_id} onChange={(e) => setF('task_id', e.target.value)}
+            placeholder="Task ID" className={`text-sm rounded-lg border px-3 py-1.5 outline-none w-36 ${inputCls}`} />
+          <Select value={filters.sort_by} onChange={(v) => setF('sort_by', v)} cls={selectCls}
+            options={[{ value: 'started_at', label: '按时间' }, { value: 'duration_ms', label: '按耗时' }]} />
+          <Select value={filters.sort_order} onChange={(v) => setF('sort_order', v)} cls={selectCls}
+            options={[{ value: 'desc', label: '降序' }, { value: 'asc', label: '升序' }]} />
+          <button onClick={() => load(1)}
+            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium ${isDark ? 'bg-blue-600 hover:bg-blue-500 text-white' : 'bg-red-600 hover:bg-red-500 text-white'}`}>
+            <RefreshCw className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} />刷新
+          </button>
+        </div>
+      </div>
+
+      <div className={`${cardBg} border ${cardBorder} rounded-xl overflow-hidden`}>
+        {fetchError && <div className="p-4 text-red-400 text-sm">{fetchError}</div>}
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className={`border-b ${divider}`}>
+                <th className={thCls}>时间</th>
+                <th className={thCls}>类型</th>
+                <th className={thCls}>名称</th>
+                <th className={thCls}>操作</th>
+                <th className={thCls}>耗时</th>
+                <th className={thCls}>状态</th>
+                <th className={thCls}>Task ID</th>
+                <th className={thCls}>输入摘要</th>
+                <th className={thCls}>输出摘要</th>
+              </tr>
+            </thead>
+            <tbody>
+              {loading && !data && <tr><td colSpan={9} className={`py-8 text-center text-sm ${textSecondary}`}>加载中…</td></tr>}
+              {!loading && data?.items.length === 0 && <tr><td colSpan={9} className={`py-8 text-center text-sm ${textSecondary}`}>暂无数据</td></tr>}
+              {data?.items.map((row) => (
+                <tr key={row.id} className={`border-b ${divider} cursor-pointer transition-colors ${trHover}`}
+                  onClick={() => setSelected(row)}>
+                  <td className={`${tdCls} whitespace-nowrap text-xs ${textSecondary}`}>{formatTs(row.started_at)}</td>
+                  <td className={tdCls}><Badge label={row.call_type} colorClass={TYPE_COLORS[row.call_type] ?? ''} /></td>
+                  <td className={`${tdCls} max-w-[120px] truncate`}>{row.name}</td>
+                  <td className={`${tdCls} max-w-[160px] truncate ${textSecondary} text-xs`}>{row.action}</td>
+                  <td className={`${tdCls} whitespace-nowrap font-mono`}>{formatDuration(row.duration_ms)}</td>
+                  <td className={tdCls}><Badge label={row.status} colorClass={STATUS_COLORS[row.status] ?? ''} /></td>
+                  <td className={tdCls}>
+                    <div className="flex items-center gap-1">
+                      <TaskIdPill taskId={row.task_id} onFilter={(id) => setF('task_id', id)} isDark={isDark} />
+                      {row.task_id && (
+                        <button title="在报错日志中查看" onClick={(e) => { e.stopPropagation(); onSwitchToErrors(row.task_id!); }}
+                          className={`p-0.5 rounded transition-all ${isDark ? 'text-slate-500 hover:text-red-400' : 'text-gray-400 hover:text-red-500'}`}>
+                          <ArrowRight className="w-3 h-3" />
+                        </button>
+                      )}
+                    </div>
+                  </td>
+                  <td className={`${tdCls} max-w-[160px] truncate text-xs ${textSecondary}`}>{row.input_summary ?? '-'}</td>
+                  <td className={`${tdCls} max-w-[160px] truncate text-xs ${textSecondary}`}>{row.output_summary ?? '-'}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        {data && (
+          <div className={`flex items-center justify-end px-4 py-3 border-t ${divider}`}>
+            <Pagination page={data.page} pageSize={data.page_size} total={data.total} onPage={(p) => load(p)} isDark={isDark} />
+          </div>
+        )}
+      </div>
+
+      {selected && <CallDetailModal item={selected} onClose={() => setSelected(null)} isDark={isDark} />}
+    </div>
+  );
+}
+
+// ------------------------------------------------------------------ //
+//  报错日志 Tab                                                         //
+// ------------------------------------------------------------------ //
+
+interface ErrorsTabProps {
+  opts: Options;
+  isDark: boolean;
+  externalTaskId: string;
+  onSwitchToCalls: (taskId: string) => void;
+}
+
+function ErrorsTab({ opts, isDark, externalTaskId, onSwitchToCalls }: ErrorsTabProps) {
+  const [filters, setFilters] = useState({
+    source: '', model: '', mcp_key: '', skill_key: '', level: '',
+    task_id: externalTaskId, sort_order: 'desc',
+  });
+  const [page, setPage] = useState(1);
+  const [data, setData] = useState<PagedResponse<ErrorLog> | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState('');
+  const [selected, setSelected] = useState<ErrorLog | null>(null);
+  const PAGE_SIZE = 20;
+
+  useEffect(() => {
+    setFilters((prev) => ({ ...prev, task_id: externalTaskId }));
+  }, [externalTaskId]);
+
+  const load = useCallback(async (p: number, f = filters) => {
+    setLoading(true);
+    setFetchError('');
+    try {
+      const result = await fetchErrors({ ...f, page: p, page_size: PAGE_SIZE });
+      setData(result);
+      setPage(p);
+    } catch (e) {
+      setFetchError(String(e));
+    } finally {
+      setLoading(false);
+    }
+  }, [filters]);
+
+  useEffect(() => { load(1); }, [filters]);
+
+  const setF = (key: string, val: string) => setFilters((prev) => ({ ...prev, [key]: val }));
+
+  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
+  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const selectCls = isDark ? 'bg-slate-900/60 border-blue-800/40 text-slate-200' : 'bg-white border-gray-300 text-gray-700';
+  const inputCls = isDark ? 'bg-slate-900/60 border-blue-800/40 text-slate-200 placeholder-slate-500' : 'bg-white border-gray-300 text-gray-700 placeholder-gray-400';
+  const trHover = isDark ? 'hover:bg-slate-700/30' : 'hover:bg-gray-50';
+  const thCls = `text-left text-xs font-medium uppercase tracking-wide py-2.5 px-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`;
+  const tdCls = `py-2.5 px-3 text-sm ${textPrimary}`;
+  const divider = isDark ? 'border-blue-800/20' : 'border-gray-200';
+
+  return (
+    <div className="space-y-4">
+      <div className={`${cardBg} border ${cardBorder} rounded-xl p-4`}>
+        <div className="flex items-center gap-2 mb-3">
+          <Filter className="w-4 h-4 text-red-400" />
+          <span className={`text-sm font-medium ${textPrimary}`}>筛选条件</span>
+          {filters.task_id && (
+            <span className="flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-blue-500/20 text-blue-400">
+              Task: {filters.task_id}
+              <button onClick={() => setF('task_id', '')} className="ml-0.5 hover:text-white">
+                <X className="w-3 h-3" />
+              </button>
+            </span>
+          )}
+        </div>
+        <div className="flex flex-wrap gap-3">
+          <Select value={filters.source} onChange={(v) => setF('source', v)} placeholder="全部来源" cls={selectCls}
+            options={opts.sources.map((s) => ({ value: s, label: s }))} />
+          <Select value={filters.level} onChange={(v) => setF('level', v)} placeholder="全部级别" cls={selectCls}
+            options={[{ value: 'warning', label: '警告' }, { value: 'error', label: '错误' }]} />
+          <Select value={filters.model} onChange={(v) => setF('model', v)} placeholder="全部模型" cls={selectCls}
+            options={opts.models.map((m) => ({ value: m, label: m }))} />
+          <Select value={filters.mcp_key} onChange={(v) => setF('mcp_key', v)} placeholder="全部MCP" cls={selectCls}
+            options={opts.mcps.map((m) => ({ value: m.key, label: m.name || m.key }))} />
+          <Select value={filters.skill_key} onChange={(v) => setF('skill_key', v)} placeholder="全部Skill" cls={selectCls}
+            options={opts.skills.map((s) => ({ value: s.key, label: s.name || s.key }))} />
+          <input value={filters.task_id} onChange={(e) => setF('task_id', e.target.value)}
+            placeholder="Task ID" className={`text-sm rounded-lg border px-3 py-1.5 outline-none w-36 ${inputCls}`} />
+          <Select value={filters.sort_order} onChange={(v) => setF('sort_order', v)} cls={selectCls}
+            options={[{ value: 'desc', label: '降序' }, { value: 'asc', label: '升序' }]} />
+          <button onClick={() => load(1)}
+            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium ${isDark ? 'bg-blue-600 hover:bg-blue-500 text-white' : 'bg-red-600 hover:bg-red-500 text-white'}`}>
+            <RefreshCw className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} />刷新
+          </button>
+        </div>
+      </div>
+
+      <div className={`${cardBg} border ${cardBorder} rounded-xl overflow-hidden`}>
+        {fetchError && <div className="p-4 text-red-400 text-sm">{fetchError}</div>}
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className={`border-b ${divider}`}>
+                <th className={thCls}>时间</th>
+                <th className={thCls}>级别</th>
+                <th className={thCls}>来源</th>
+                <th className={thCls}>消息</th>
+                <th className={thCls}>可恢复</th>
+                <th className={thCls}>Task ID</th>
+                <th className={thCls}>MCP</th>
+                <th className={thCls}>Skill</th>
+                <th className={thCls}>模型</th>
+              </tr>
+            </thead>
+            <tbody>
+              {loading && !data && <tr><td colSpan={9} className={`py-8 text-center text-sm ${textSecondary}`}>加载中…</td></tr>}
+              {!loading && data?.items.length === 0 && <tr><td colSpan={9} className={`py-8 text-center text-sm ${textSecondary}`}>暂无数据</td></tr>}
+              {data?.items.map((row) => (
+                <tr key={row.id} className={`border-b ${divider} cursor-pointer transition-colors ${trHover}`}
+                  onClick={() => setSelected(row)}>
+                  <td className={`${tdCls} whitespace-nowrap text-xs ${textSecondary}`}>{formatTs(row.happened_at)}</td>
+                  <td className={tdCls}><Badge label={row.level} colorClass={STATUS_COLORS[row.level] ?? ''} /></td>
+                  <td className={tdCls}><Badge label={row.source} colorClass={SOURCE_COLORS[row.source] ?? ''} /></td>
+                  <td className={`${tdCls} max-w-[240px] truncate`}>{row.message}</td>
+                  <td className={`${tdCls} text-xs`}>
+                    <span className={row.recoverable ? 'text-green-400' : 'text-red-400'}>{row.recoverable ? '是' : '否'}</span>
+                  </td>
+                  <td className={tdCls}>
+                    <div className="flex items-center gap-1">
+                      <TaskIdPill taskId={row.task_id} onFilter={(id) => setF('task_id', id)} isDark={isDark} />
+                      {row.task_id && (
+                        <button title="在调用耗时中查看" onClick={(e) => { e.stopPropagation(); onSwitchToCalls(row.task_id!); }}
+                          className={`p-0.5 rounded transition-all ${isDark ? 'text-slate-500 hover:text-blue-400' : 'text-gray-400 hover:text-blue-500'}`}>
+                          <ArrowRight className="w-3 h-3" />
+                        </button>
+                      )}
+                    </div>
+                  </td>
+                  <td className={`${tdCls} text-xs ${textSecondary}`}>{row.mcp_name ?? row.mcp_key ?? '-'}</td>
+                  <td className={`${tdCls} text-xs ${textSecondary}`}>{row.skill_name ?? row.skill_key ?? '-'}</td>
+                  <td className={`${tdCls} text-xs ${textSecondary}`}>{row.model ?? '-'}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        {data && (
+          <div className={`flex items-center justify-end px-4 py-3 border-t ${divider}`}>
+            <Pagination page={data.page} pageSize={data.page_size} total={data.total} onPage={(p) => load(p)} isDark={isDark} />
+          </div>
+        )}
+      </div>
+
+      {selected && <ErrorDetailModal item={selected} onClose={() => setSelected(null)} isDark={isDark} />}
+    </div>
+  );
+}
+
+// ------------------------------------------------------------------ //
+//  Main Page                                                           //
+// ------------------------------------------------------------------ //
+
+const MANUAL_PURGE_DAYS = 14;
+
+async function callPurge(retainDays: number): Promise<{ deleted_call_traces: number; deleted_error_logs: number }> {
+  const res = await fetch(`${backUrl}/api/observability/purge?retain_days=${retainDays}`, { method: 'DELETE' });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+export default function ObservabilityPage() {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const [activeTab, setActiveTab] = useState<'calls' | 'errors'>('calls');
+  const [opts, setOpts] = useState<Options>({ models: [], mcps: [], skills: [], statuses: [], sources: [] });
+  const [sharedTaskId, setSharedTaskId] = useState('');
+  const [purging, setPurging] = useState(false);
+  const [purgeMsg, setPurgeMsg] = useState('');
+
+  useEffect(() => {
+    fetchOptions().then(setOpts).catch(console.error);
+  }, []);
+
+  const handlePurge = async () => {
+    if (!window.confirm(`确认清理 ${MANUAL_PURGE_DAYS} 天前的旧记录？此操作不可撤销。`)) return;
+    setPurging(true);
+    setPurgeMsg('');
+    try {
+      const r = await callPurge(MANUAL_PURGE_DAYS);
+      setPurgeMsg(`已清理：调用记录 ${r.deleted_call_traces} 条，错误日志 ${r.deleted_error_logs} 条`);
+    } catch (e) {
+      setPurgeMsg(`清理失败：${e}`);
+    } finally {
+      setPurging(false);
+    }
+  };
+
+  const handleSwitchToErrors = (taskId: string) => {
+    setSharedTaskId(taskId);
+    setActiveTab('errors');
+  };
+  const handleSwitchToCalls = (taskId: string) => {
+    setSharedTaskId(taskId);
+    setActiveTab('calls');
+  };
+
+  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
+  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const tabActive = isDark ? 'bg-blue-600/20 text-blue-400 border border-blue-500/30' : 'bg-red-50 text-red-600 border border-red-200';
+  const tabInactive = isDark ? 'text-slate-400 hover:text-white hover:bg-slate-800/50' : 'text-gray-600 hover:text-red-600 hover:bg-red-50';
+
+  return (
+    <div className="space-y-6">
+      <div className={`${cardBg} backdrop-blur-xl border ${cardBorder} rounded-xl p-4`}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${isDark ? 'bg-blue-500/20' : 'bg-red-50'}`}>
+              <Activity className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+            </div>
+            <div>
+              <h1 className={`font-bold text-lg ${textPrimary}`}>可观测性</h1>
+              <p className={`text-sm ${textSecondary}`}>调用耗时统计 · 报错日志</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            {purgeMsg && (
+              <span className={`text-xs px-2 py-1 rounded-lg ${isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-100 text-gray-600'}`}>
+                {purgeMsg}
+              </span>
+            )}
+            <button onClick={handlePurge} disabled={purging}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium border transition-all
+                ${isDark ? 'border-red-800/40 text-red-400 hover:bg-red-900/20 disabled:opacity-40' : 'border-red-200 text-red-600 hover:bg-red-50 disabled:opacity-40'}`}>
+              <Trash2 className={`w-3.5 h-3.5 ${purging ? 'animate-spin' : ''}`} />
+              清理 {MANUAL_PURGE_DAYS} 天前数据
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex gap-2">
+        <button onClick={() => setActiveTab('calls')}
+          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${activeTab === 'calls' ? tabActive : tabInactive}`}>
+          <Clock className="w-4 h-4" />调用耗时统计
+        </button>
+        <button onClick={() => setActiveTab('errors')}
+          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${activeTab === 'errors' ? tabActive : tabInactive}`}>
+          <AlertTriangle className="w-4 h-4" />报错日志
+        </button>
+      </div>
+
+      {activeTab === 'calls' ? (
+        <CallsTab opts={opts} isDark={isDark} externalTaskId={sharedTaskId} onSwitchToErrors={handleSwitchToErrors} />
+      ) : (
+        <ErrorsTab opts={opts} isDark={isDark} externalTaskId={sharedTaskId} onSwitchToCalls={handleSwitchToCalls} />
+      )}
+    </div>
+  );
+}
diff --git a/web-code/pages/QA.tsx b/web-code/pages/QA.tsx
new file mode 100644
index 00000000..f70990de
--- /dev/null
+++ b/web-code/pages/QA.tsx
@@ -0,0 +1,2266 @@
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  Send,
+  Upload,
+  RotateCcw,
+  Bookmark,
+  History,
+  Sparkles,
+  BookOpen,
+  Brain,
+  GitCompare,
+  MessageSquare,
+  FileText,
+  CheckCircle,
+  AlertCircle,
+  Bot,
+  Database,
+  Layers,
+  Cpu,
+  Target,
+  Search,
+  CircleHelp,
+  ChevronRight,
+  Plus,
+  X,
+  Copy,
+  RefreshCw,
+  ArrowRight,
+  ArrowLeft,
+  Download,
+  Save,
+  ChevronDown,
+  ChevronUp,
+  MessageCircle,
+  Users,
+  FileCheck,
+  AlertTriangle,
+  Handshake,
+  Edit3,
+  ListChecks,
+  Play,
+  Pause,
+  UserCheck,
+  UserX,
+  Hash,
+  Clock,
+  Zap,
+  ClipboardList,
+  TrendingUp,
+} from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+import { PageType } from '../components/Sidebar';
+
+type QAMode = 'single-round' | 'multi-round' | 'deep-search';
+type QAProvider = 'general' | 'agent' | 'multi-agent';
+type ViewMode = 'single' | 'compare';
+
+interface Agent {
+  id: string;
+  name: string;
+  category: string;
+  tags: string[];
+  description: string;
+  skills: string[];
+  dataSources: string[];
+}
+
+interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: Date;
+  sources?: SourceItem[];
+  agentName?: string;
+  skills?: string[];
+  dataSources?: string[];
+  functions?: string[];
+}
+
+interface SourceItem {
+  title: string;
+  type: string;
+  snippet: string;
+}
+
+interface CompareResult {
+  leftMode: QAMode;
+  rightMode: QAMode;
+  leftContent: string;
+  rightContent: string;
+  differences?: {
+    consensus: string;
+    differences: string;
+    leftAdvantage: string;
+    rightAdvantage: string;
+  };
+}
+
+// 多智能体协同分析相关类型
+interface AgentResponse {
+  id: string;
+  agentId: string;
+  agentName: string;
+  agentCategory: string;
+  status: 'pending' | 'responding' | 'completed' | 'adopted' | 'pending-confirm';
+  coreJudgment: string;
+  content: string;
+  structuredSummary?: {
+    key: string;
+    value: string;
+  }[];
+  timestamp: Date;
+}
+
+// 多智能体消息类型
+interface MultiAgentMessage {
+  id: string;
+  type: 'user' | 'agent';
+  agentName?: string;
+  content: string;
+  timestamp: Date;
+  isFollowUp?: boolean;
+  parentMessageId?: string;
+}
+
+interface AdoptedView {
+  id: string;
+  agentName: string;
+  content: string;
+  timestamp: Date;
+}
+
+interface PendingQuestion {
+  id: string;
+  content: string;
+  relatedAgents: string[];
+  timestamp: Date;
+}
+
+interface SummaryDraft {
+  title: string;
+  sections: {
+    title: string;
+    content: string;
+  }[];
+}
+
+// 场景模板类型
+interface SceneTemplate {
+  id: string;
+  name: string;
+  type: string;
+  description: string;
+  agentIds: string[];
+}
+
+// 场景模板数据
+const sceneTemplates: SceneTemplate[] = [
+  {
+    id: 'scene-1',
+    name: '宣传策略生成',
+    type: '策略生成',
+    description: '生成完整的品牌传播策略方案',
+    agentIds: ['goal-agent', 'audience-agent', 'brand-agent', 'channel-agent', 'content-agent', 'narrative-agent', 'behavior-agent', 'risk-agent'],
+  },
+  {
+    id: 'scene-2',
+    name: '宣传方案推演',
+    type: '方案推演',
+    description: '对现有方案进行多角度推演验证',
+    agentIds: ['goal-agent', 'audience-agent', 'behavior-agent', 'risk-agent', 'content-agent', 'channel-agent'],
+  },
+  {
+    id: 'scene-3',
+    name: '宣传活动复盘',
+    type: '效果复盘',
+    description: '对宣传活动效果进行多维度复盘分析',
+    agentIds: ['goal-agent', 'audience-agent', 'behavior-agent', 'channel-agent', 'risk-agent'],
+  },
+  {
+    id: 'scene-4',
+    name: '舆情应对策略',
+    type: '风险应对',
+    description: '制定舆情风险应对和处置策略',
+    agentIds: ['risk-agent', 'audience-agent', 'brand-agent', 'content-agent', 'narrative-agent', 'channel-agent', 'behavior-agent'],
+  },
+  {
+    id: 'scene-5',
+    name: '多版本策略比较',
+    type: '策略对比',
+    description: '对比分析多个策略方案的优劣',
+    agentIds: ['goal-agent', 'audience-agent', 'brand-agent', 'content-agent'],
+  },
+];
+
+// 智能体列表 - 按五大类别分类
+const agents: Agent[] = [
+  // 规划类智能体
+  {
+    id: 'goal-agent',
+    name: 'GoalAgent',
+    category: '规划类',
+    tags: ['目标拆解', 'KPI设定', '优先级'],
+    description: '专业的目标规划智能体，能够帮助拆解任务目标并设定可衡量的KPI',
+    skills: ['目标拆解', 'KPI设定', '优先级排序'],
+    dataSources: ['知识库', '历史数据分析'],
+  },
+  {
+    id: 'brand-agent',
+    name: 'BrandAgent',
+    category: '规划类',
+    tags: ['品牌定位', '传播策略', '调性设计'],
+    description: '专注品牌建设与传播策略的规划智能体',
+    skills: ['品牌定位分析', '传播路径规划', '品牌调性设计'],
+    dataSources: ['知识库', '行业数据库'],
+  },
+  {
+    id: 'content-agent',
+    name: 'ContentAgent',
+    category: '规划类',
+    tags: ['文案撰写', '创意生成', '内容规划'],
+    description: '智能内容创作规划助手，支持多种形式的内容生成规划',
+    skills: ['文案撰写', '创意生成', '多形式内容'],
+    dataSources: ['知识库', '优秀案例库'],
+  },
+  {
+    id: 'channel-agent',
+    name: 'ChannelAgent',
+    category: '规划类',
+    tags: ['渠道选择', '投放策略', '媒介规划'],
+    description: '专业的渠道规划智能体，制定最优渠道组合策略',
+    skills: ['渠道选择', '投放策略规划', '效果评估'],
+    dataSources: ['Y系统', 'A系统', '行业数据'],
+  },
+  {
+    id: 'narrative-agent',
+    name: 'NarrativeAgent',
+    category: '规划类',
+    tags: ['故事线', '情感设计', '叙事策略'],
+    description: '专业的叙事规划智能体，构建有感染力的内容故事线',
+    skills: ['故事线设计', '情感共鸣设计', '内容叙事'],
+    dataSources: ['优秀案例库', '内容分析'],
+  },
+  // MNTY类智能体
+  {
+    id: 'mnty-agent',
+    name: 'MNTYAgent',
+    category: 'MNTY类',
+    tags: ['心智模型', '用户认知', '心智定位'],
+    description: '专注用户心智模型分析，挖掘用户深层认知和心智定位',
+    skills: ['心智模型构建', '认知路径分析', '心智定位设计'],
+    dataSources: ['用户研究数据', '心理学理论库'],
+  },
+  // 效果PG类智能体
+  {
+    id: 'behavior-agent',
+    name: 'BehaviorAgent',
+    category: '效果PG类',
+    tags: ['用户行为', '行为路径', '效果预测'],
+    description: '专注用户行为模式分析，预测和优化用户行为效果',
+    skills: ['用户行为分析', '行为路径设计', '转化优化'],
+    dataSources: ['Y系统', '行为数据'],
+  },
+  {
+    id: 'pg-agent',
+    name: 'PGAgent',
+    category: '效果PG类',
+    tags: ['效果评估', 'PG分析', '数据洞察'],
+    description: '专业的效果评估智能体，提供精准的数据分析和洞察',
+    skills: ['效果评估', '数据可视化', '趋势预测'],
+    dataSources: ['数据分析平台', '监控系统'],
+  },
+  // 知识分析类智能体
+  {
+    id: 'audience-agent',
+    name: 'AudienceAgent',
+    category: '知识分析类',
+    tags: ['受众分层', '画像抽取', '知识分析'],
+    description: '专业的受众知识分析智能体，识别目标受众特征并生成画像',
+    skills: ['受众分层', '核心受众识别', '画像抽取'],
+    dataSources: ['知识库', 'Y系统', 'A系统'],
+  },
+  {
+    id: 'knowledge-agent',
+    name: 'KnowledgeAgent',
+    category: '知识分析类',
+    tags: ['知识图谱', '语义分析', '关联挖掘'],
+    description: '专业的知识分析智能体，构建知识图谱并进行深度语义分析',
+    skills: ['知识图谱构建', '语义分析', '关联挖掘'],
+    dataSources: ['知识库', '文献数据库'],
+  },
+  // 协同管理类智能体
+  {
+    id: 'risk-agent',
+    name: 'RiskAgent',
+    category: '协同管理类',
+    tags: ['风险识别', '预案设计', '协同管理'],
+    description: '专注风险识别与协同管理的智能体，制定完善的应急预案',
+    skills: ['风险识别', '影响评估', '预案设计'],
+    dataSources: ['历史案例', '风险数据库'],
+  },
+  {
+    id: 'collab-agent',
+    name: 'CollabAgent',
+    category: '协同管理类',
+    tags: ['协同调度', '资源协调', '进度管理'],
+    description: '专业的协同管理智能体，统筹调度多方资源协调推进',
+    skills: ['协同调度', '资源协调', '进度管理'],
+    dataSources: ['任务管理系统', '资源数据库'],
+  },
+];
+
+interface QAProps {
+  onNavigate: (page: PageType) => void;
+  initialMode?: 'new' | 'general' | 'agent' | 'multi-agent';
+}
+
+const QA: React.FC<QAProps> = ({ onNavigate, initialMode }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 状态管理
+  const [viewMode, setViewMode] = useState<ViewMode>('single');
+  const [qaProvider, setQaProvider] = useState<QAProvider>('general');
+  const [qaMode, setQaMode] = useState<QAMode>('single-round');
+  const [selectedAgent, setSelectedAgent] = useState<Agent>(agents[0]);
+  const [compareLeftMode, setCompareLeftMode] = useState<QAMode>('single-round');
+  const [compareRightMode, setCompareRightMode] = useState<QAMode>('deep-search');
+
+  // 新建问答确认对话框
+  const [showNewQADialog, setShowNewQADialog] = useState(false);
+
+  // 处理 initialMode - 新建问答时清空会话
+  useEffect(() => {
+    if (initialMode === 'new') {
+      // 新建问答模式：清空会话，保持通用问答模式
+      setMessages([]);
+      setCompareResult(null);
+      setInputValue('');
+      setQaProvider('general');
+      setViewMode('single');
+    } else if (initialMode === 'agent') {
+      // 智能体问答模式
+      setQaProvider('agent');
+    } else if (initialMode === 'general') {
+      // 通用问答模式
+      setQaProvider('general');
+    } else if (initialMode === 'multi-agent') {
+      // 多智能体协同模式
+      setQaProvider('multi-agent');
+      setMessages([]);
+      setCompareResult(null);
+      setInputValue('');
+    }
+  }, [initialMode]);
+
+  // 知识范围
+  const [knowledgeScope, setKnowledgeScope] = useState<'all' | 'specific-kb' | 'specific-domain'>('all');
+
+  // 回答偏好
+  const [showSources, setShowSources] = useState(true);
+  const [showProcess, setShowProcess] = useState(false);
+
+  // 对比设置
+  const [compareLayout, setCompareLayout] = useState<'horizontal' | 'vertical'>('horizontal');
+  const [autoSummarizeDiff, setAutoSummarizeDiff] = useState(true);
+  const [recommendBetter, setRecommendBetter] = useState(true);
+
+  // 消息和结果
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputValue, setInputValue] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [compareResult, setCompareResult] = useState<CompareResult | null>(null);
+  const [agentSearchQuery, setAgentSearchQuery] = useState('');
+
+  // 检索过程展示
+  const [searchProcess, setSearchProcess] = useState({
+    currentMode: '单轮RAG',
+    rounds: 1,
+    hits: 5,
+    queryRewrite: '',
+  });
+
+  // 多智能体会商状态
+  const [discussionStatus, setDiscussionStatus] = useState<'idle' | 'in_progress' | 'paused' | 'completed'>('idle');
+  const [currentRound, setCurrentRound] = useState(1);
+  const [currentTopic, setCurrentTopic] = useState('五四青年节宣传方向讨论');
+  const [speakingMode, setSpeakingMode] = useState<'broadcast' | 'targeted' | 'response'>('broadcast');
+  const [selectedTargetAgent, setSelectedTargetAgent] = useState<string | null>(null);
+
+  // 共识与分歧
+  const [consensusItems, setConsensusItems] = useState<{id: string; content: string; agents: string[]}[]>([]);
+  const [disagreementItems, setDisagreementItems] = useState<{id: string; content: string; agents: string[]; details: string}[]>([]);
+  const [conclusionDraft, setConclusionDraft] = useState('');
+
+  // 消息操作状态
+  const [messageAction, setMessageAction] = useState<'none' | 'adopt' | 'disagree' | 'followup' | 'respond'>('none');
+  const [selectedMessageId, setSelectedMessageId] = useState<string | null>(null);
+
+  // 原有状态（保持兼容性）
+  const [selectedMultiAgents, setSelectedMultiAgents] = useState<Agent[]>([agents[0], agents[4]]);
+  const [agentResponses, setAgentResponses] = useState<AgentResponse[]>([]);
+  const [adoptedViews, setAdoptedViews] = useState<AdoptedView[]>([]);
+  const [pendingQuestions, setPendingQuestions] = useState<PendingQuestion[]>([]);
+  const [summaryDraft, setSummaryDraft] = useState<SummaryDraft>({
+    title: '多智能体联合分析报告',
+    sections: [],
+  });
+  const [taskInfo, setTaskInfo] = useState({
+    name: '五四青年节宣传方向预分析',
+    goal: '形成一版多智能体联合分析报告',
+    status: '讨论中',
+    background: '五四青年节品牌传播活动需要明确目标受众和传播策略',
+    keyQuestions: ['核心受众是谁？', '如何设计参与行为？', '叙事方式如何选择？', '有哪些风险需要关注？'],
+  });
+  const [sendTarget, setSendTarget] = useState<'all' | string>('all');
+  const [multiAgentFilter, setMultiAgentFilter] = useState<'all' | 'completed' | 'pending' | 'adopted'>('all');
+  const [isMultiAgentLoading, setIsMultiAgentLoading] = useState(false);
+  const [multiAgentMessages, setMultiAgentMessages] = useState<MultiAgentMessage[]>([]);
+  const [rightPanelTab, setRightPanelTab] = useState<'structured' | 'report'>('structured');
+  const [messageFilter, setMessageFilter] = useState<'all' | 'user' | 'adopted'>('all');
+  const [agentMessageFilter, setAgentMessageFilter] = useState<string>('all');
+  const [messageSort, setMessageSort] = useState<'time' | 'agent'>('time');
+
+  // 左侧菜单折叠状态
+  const [leftPanelCollapsed, setLeftPanelCollapsed] = useState(false);
+  const [qaConfigCollapsed, setQaConfigCollapsed] = useState(false);
+  const [agentListCollapsed, setAgentListCollapsed] = useState(false);
+
+  // 多智能体协同 - 智能体选择状态
+  const [showAgentSelector, setShowAgentSelector] = useState(false);
+  const [showSceneSelector, setShowSceneSelector] = useState(false);
+  const [selectedSceneTemplate, setSelectedSceneTemplate] = useState<SceneTemplate | null>(null);
+
+  // 过滤智能体
+  const filteredAgents = agents.filter(agent =>
+    agent.name.toLowerCase().includes(agentSearchQuery.toLowerCase()) ||
+    agent.category.toLowerCase().includes(agentSearchQuery.toLowerCase()) ||
+    agent.tags.some(tag => tag.toLowerCase().includes(agentSearchQuery.toLowerCase()))
+  );
+
+  // 多智能体协同分析处理函数
+  const handleMultiAgentSend = () => {
+    if (!inputValue.trim()) return;
+
+    setIsMultiAgentLoading(true);
+    const targets = sendTarget === 'all' ? selectedMultiAgents : selectedMultiAgents.filter(a => a.id === sendTarget);
+
+    // 添加用户消息到消息流
+    const userMessageId = `user-${Date.now()}`;
+    const userMessage: MultiAgentMessage = {
+      id: userMessageId,
+      type: 'user',
+      content: inputValue,
+      timestamp: new Date(),
+    };
+    setMultiAgentMessages(prev => [...prev, userMessage]);
+
+    // 为每个目标智能体创建响应
+    const newResponses: AgentResponse[] = targets.map((agent, idx) => ({
+      id: `${Date.now()}-${agent.id}`,
+      agentId: agent.id,
+      agentName: agent.name,
+      agentCategory: agent.category,
+      status: 'responding' as const,
+      coreJudgment: '分析中...',
+      content: '',
+      timestamp: new Date(),
+    }));
+
+    setAgentResponses(prev => [...prev, ...newResponses]);
+    setInputValue('');
+
+    // 模拟智能体响应
+    setTimeout(() => {
+      const completedResponses = targets.map((agent, idx) => {
+        const responses: Record<string, { core: string; content: string; summary: { key: string; value: string }[] }> = {
+          'audience-agent': {
+            core: '核心受众应优先聚焦18-25岁基层青年群体',
+            content: '从任务背景和活动语境看，核心传播对象应聚焦能够形成参与、表达与扩散的人群，年轻基层群体更符合当前任务目标。该群体活跃于社交媒体，对节日话题有天然共鸣，是实现传播裂变的关键。',
+            summary: [
+              { key: 'core_audience', value: '18-25岁基层青年' },
+              { key: 'secondary_audience', value: '25-30岁职场新人' },
+              { key: 'barriers', value: '表达门槛、品牌距离感' },
+            ],
+          },
+          'goal-agent': {
+            core: '目标应分为参与层和传播层两层设计',
+            content: '建议将五四青年节活动目标拆解为两个层次：参与层目标是引导青年参与活动并产生内容；传播层目标是鼓励青年主动分享传播，形成话题裂变。两层目标相互关联，传播层目标的达成依赖于参与层的体验设计。',
+            summary: [
+              { key: '参与目标', value: '引导10000+青年参与' },
+              { key: '传播目标', value: '产生5000+UGC内容' },
+              { key: '核心KPI', value: '话题阅读量突破500万' },
+            ],
+          },
+          'behavior-agent': {
+            core: '用户行为路径应设计为"触发-参与-分享"三阶段',
+            content: '基于对年轻用户行为模式的分析，建议设计"触发-参与-分享"的完整行为路径。触发阶段通过话题挑战赛引发兴趣；参与阶段通过互动任务降低门槛；分享阶段通过激励机制促进主动传播。',
+            summary: [
+              { key: '触发机制', value: '话题挑战赛' },
+              { key: '参与路径', value: '任务闯关+创作征集' },
+              { key: '分享激励', value: '荣誉体系+实物奖励' },
+            ],
+          },
+          'narrative-agent': {
+            core: '叙事建议采用"真实青年故事"为主线',
+            content: '建议采用纪实风格的叙事策略，讲述真实青年人物的故事，而非虚构的营销叙事。通过真实故事的感染力和共鸣感，提升青年群体对活动的认同和参与意愿。',
+            summary: [
+              { key: '叙事风格', value: '纪实风格' },
+              { key: '故事原型', value: '真实青年人物' },
+              { key: '情感基调', value: '正向、热血、有共鸣' },
+            ],
+          },
+          'risk-agent': {
+            core: '主要风险在于话题敏感性和UGC内容合规',
+            content: '需要关注两方面风险：一是政治敏感话题的把控，需严格审核所有内容；二是UGC内容可能带来的舆论风险。建议建立完善的内容审核机制和应急预案。',
+            summary: [
+              { key: '风险类型', value: '内容合规风险' },
+              { key: '风险等级', value: '中等' },
+              { key: '应对策略', value: '前置审核+应急预案' },
+            ],
+          },
+        };
+
+        const mockData = responses[agent.id] || {
+          core: '该智能体已完成分析',
+          content: '基于专业能力进行了深入分析。',
+          summary: [{ key: '分析结论', value: '待补充' }],
+        };
+
+        const responseId = `${Date.now()}-${agent.id}`;
+
+        // 添加智能体回答到消息流
+        const agentMessage: MultiAgentMessage = {
+          id: responseId,
+          type: 'agent',
+          agentName: agent.name,
+          content: `${mockData.core}\n\n${mockData.content}`,
+          timestamp: new Date(),
+        };
+        setMultiAgentMessages(prev => [...prev, agentMessage]);
+
+        return {
+          id: responseId,
+          agentId: agent.id,
+          agentName: agent.name,
+          agentCategory: agent.category,
+          status: 'completed' as const,
+          coreJudgment: mockData.core,
+          content: mockData.content,
+          structuredSummary: mockData.summary,
+          timestamp: new Date(),
+        };
+      });
+
+      setAgentResponses(prev => {
+        const existing = prev.filter(r => !targets.find(t => `${Date.now()}-${t.id}`.includes(r.id)));
+        return [...existing, ...completedResponses];
+      });
+      setIsMultiAgentLoading(false);
+    }, 1500);
+  };
+
+  const handleAdoptResponse = (responseId: string) => {
+    const response = agentResponses.find(r => r.id === responseId);
+    if (response) {
+      setAdoptedViews(prev => [...prev, {
+        id: `adopted-${Date.now()}`,
+        agentName: response.agentName,
+        content: response.coreJudgment,
+        timestamp: new Date(),
+      }]);
+      setAgentResponses(prev => prev.map(r =>
+        r.id === responseId ? { ...r, status: 'adopted' as const } : r
+      ));
+    }
+  };
+
+  const handlePendingConfirm = (responseId: string) => {
+    setAgentResponses(prev => prev.map(r =>
+      r.id === responseId ? { ...r, status: 'pending-confirm' as const } : r
+    ));
+  };
+
+  const handleWriteToReport = (responseId: string) => {
+    const response = agentResponses.find(r => r.id === responseId);
+    if (response) {
+      setSummaryDraft(prev => ({
+        ...prev,
+        sections: [...prev.sections, {
+          title: `${response.agentName}分析结论`,
+          content: response.coreJudgment + '\n\n' + response.content,
+        }],
+      }));
+    }
+  };
+
+  const handleGenerateSummary = () => {
+    const summaryPoints = agentResponses
+      .filter(r => r.status === 'completed' || r.status === 'adopted')
+      .map(r => `- ${r.agentName}：${r.coreJudgment}`);
+
+    setSummaryDraft(prev => ({
+      ...prev,
+      sections: [
+        { title: '任务背景', content: taskInfo.name },
+        { title: '参与智能体', content: selectedMultiAgents.map(a => a.name).join('、') },
+        { title: '综合结论', content: summaryPoints.join('\n') },
+        { title: '待确认问题', content: pendingQuestions.map(q => `- ${q.content}`).join('\n') || '无' },
+      ],
+    }));
+  };
+
+  const handleExportReport = () => {
+    alert('报告导出功能开发中...');
+  };
+
+  const handleSaveMultiAgentRecord = () => {
+    alert('协同分析记录已保存');
+  };
+
+  const handleTransferToScene = () => {
+    alert('转场景任务功能开发中...');
+  };
+
+  const handleMultiAgentFollowUp = (agentId: string) => {
+    setSendTarget(agentId);
+  };
+
+  // 添加智能体到协同分析
+  const handleAddAgent = (agent: Agent) => {
+    if (!selectedMultiAgents.find(a => a.id === agent.id)) {
+      setSelectedMultiAgents([...selectedMultiAgents, agent]);
+    }
+    setShowAgentSelector(false);
+  };
+
+  // 从协同分析中移除智能体
+  const handleRemoveAgent = (agentId: string) => {
+    setSelectedMultiAgents(selectedMultiAgents.filter(a => a.id !== agentId));
+    // 同时清除该智能体的响应
+    setAgentResponses(prev => prev.filter(r => r.agentId !== agentId));
+    setMultiAgentMessages(prev => prev.filter(msg => {
+      const response = agentResponses.find(r => r.agentId === agentId);
+      return !response || msg.agentName !== agents.find(a => a.id === agentId)?.name;
+    }));
+  };
+
+  // 应用场景模板
+  const handleApplySceneTemplate = (template: SceneTemplate) => {
+    const templateAgents = agents.filter(a => template.agentIds.includes(a.id));
+    setSelectedMultiAgents(templateAgents);
+    setSelectedSceneTemplate(template);
+    // 清空当前分析数据
+    setAgentResponses([]);
+    setMultiAgentMessages([]);
+    setAdoptedViews([]);
+    setPendingQuestions([]);
+    setSummaryDraft({ title: `${template.name}分析报告`, sections: [] });
+    setTaskInfo({
+      name: template.name,
+      goal: template.description,
+      status: '准备中',
+      background: template.description,
+      keyQuestions: [],
+    });
+    setShowSceneSelector(false);
+  };
+
+  // 获取未选择的智能体列表
+  const availableAgentsForSelection = agents.filter(
+    agent => !selectedMultiAgents.find(a => a.id === agent.id)
+  );
+
+  // 处理新建问答 - 清空会话并切换到指定类型
+  const handleNewQA = (targetProvider?: QAProvider) => {
+    // 清空对话
+    setMessages([]);
+    setCompareResult(null);
+    setInputValue('');
+
+    // 切换到指定类型
+    if (targetProvider) {
+      setQaProvider(targetProvider);
+    }
+  };
+
+  const handleSend = () => {
+    if (!inputValue.trim()) return;
+
+    setIsLoading(true);
+
+    const userMessage: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: inputValue,
+      timestamp: new Date(),
+    };
+
+    setMessages([...messages, userMessage]);
+    setInputValue('');
+
+    setTimeout(() => {
+      const response: Message = {
+        id: (Date.now() + 1).toString(),
+        role: 'assistant',
+        content: qaProvider === 'agent'
+          ? `基于${selectedAgent.name}的专业能力，我来为您分析：\n\n根据您的问题，我识别到核心受众特征如下：\n\n**核心受众识别**：\n- 主要年龄段：25-35岁\n- 职业特征：都市白领\n- 消费能力：中高端\n- 关注点：品质生活、个人成长\n\n**关键特质**：\n1. 追求个性化表达\n2. 注重社交认同\n3. 愿意为品质付费\n\n以上分析是否满足您的需求？如需调整维度，请继续补充信息。`
+          : `RAG（检索增强生成）技术的工作原理主要包括以下几个步骤：\n\n1. **检索阶段**：系统首先将用户问题转换为查询向量，在知识库中进行相似度搜索。\n\n2. **增强阶段**：将检索到的相关文档与原始问题组合。\n\n3. **生成阶段**：将增强后的提示词发送给大语言模型。`,
+        timestamp: new Date(),
+        sources: qaProvider === 'agent' ? undefined : [
+          { title: 'RAG技术白皮书', type: 'PDF', snippet: 'RAG是一种结合检索和生成的技术架构...' },
+        ],
+        agentName: qaProvider === 'agent' ? selectedAgent.name : undefined,
+        skills: qaProvider === 'agent' ? selectedAgent.skills : undefined,
+        dataSources: qaProvider === 'agent' ? selectedAgent.dataSources : undefined,
+      };
+
+      setMessages(prev => [...prev, response]);
+      setIsLoading(false);
+      setSearchProcess({
+        currentMode: qaMode === 'single-round' ? '单轮RAG' : qaMode === 'multi-round' ? '多轮RAG' : '深度检索',
+        rounds: qaMode === 'multi-round' ? 3 : 1,
+        hits: 5,
+        queryRewrite: qaMode === 'deep-search' ? '原问题→分解子问题→独立检索→综合回答' : '',
+      });
+    }, 1500);
+  };
+
+  const handleCompare = () => {
+    if (!inputValue.trim()) return;
+
+    setIsLoading(true);
+
+    setTimeout(() => {
+      setCompareResult({
+        leftMode: compareLeftMode,
+        rightMode: compareRightMode,
+        leftContent: '单轮RAG回答：直接检索并生成答案，响应速度快，但可能遗漏跨文档的关联信息。适用于简单事实查询。',
+        rightContent: '深度检索回答：通过问题分解、多轮检索和综合分析，提供更全面的答案。包含详细的推理过程和更多的引用来源。',
+        differences: {
+          consensus: '两种方式都使用向量检索技术，都能引用原始文档',
+          differences: '深度检索采用多轮查询改写，覆盖更全面',
+          leftAdvantage: '响应更快，资源消耗更低',
+          rightAdvantage: '答案更完整，引用更充分',
+        },
+      });
+      setIsLoading(false);
+    }, 2000);
+  };
+
+  const handleSaveRecord = () => {
+    alert('问答记录已保存');
+  };
+
+  // 新建问答 - 通用/智能体模式
+  const handleStartNewQA = () => {
+    // 如果有现有消息，弹出确认对话框
+    if (messages.length > 0 || compareResult) {
+      setShowNewQADialog(true);
+      return;
+    }
+
+    // 直接新建 - 清空会话
+    performNewQA();
+  };
+
+  // 执行新建问答
+  const performNewQA = () => {
+    // 清空对话
+    setMessages([]);
+    setCompareResult(null);
+    setInputValue('');
+    setShowNewQADialog(false);
+  };
+
+  // 保存并新建
+  const handleSaveAndNewQA = () => {
+    handleSaveRecord();
+    performNewQA();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      if (viewMode === 'compare') {
+        handleCompare();
+      } else {
+        handleSend();
+      }
+    }
+  };
+
+  // 获取模式标签
+  const getModeLabel = (mode: QAMode) => {
+    switch (mode) {
+      case 'single-round': return '单轮RAG';
+      case 'multi-round': return '多轮RAG';
+      case 'deep-search': return '深度检索';
+    }
+  };
+
+  // 空状态快捷入口
+  const QuickStartCards = () => (
+    <div className="mt-6 grid grid-cols-3 gap-3 max-w-2xl">
+      <button
+        onClick={() => handleNewQA('general')}
+        className={`p-4 rounded-xl border-2 border-dashed transition-all text-left ${
+          isDark
+            ? 'border-slate-600 hover:border-blue-500 bg-slate-800/50 hover:bg-blue-600/10'
+            : 'border-gray-300 hover:border-red-400 bg-gray-50 hover:bg-red-50'
+        }`}
+      >
+        <div className="flex items-center gap-3">
+          <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
+            isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-red-100 text-red-500'
+          }`}>
+            <CircleHelp className="w-5 h-5" />
+          </div>
+          <div>
+            <div className={`font-medium text-sm ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              通用问答
+            </div>
+            <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              基于知识库回答
+            </div>
+          </div>
+        </div>
+      </button>
+      <button
+        onClick={() => handleNewQA('agent')}
+        className={`p-4 rounded-xl border-2 border-dashed transition-all text-left ${
+          isDark
+            ? 'border-slate-600 hover:border-purple-500 bg-slate-800/50 hover:bg-purple-600/10'
+            : 'border-gray-300 hover:border-purple-400 bg-gray-50 hover:bg-purple-50'
+        }`}
+      >
+        <div className="flex items-center gap-3">
+          <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
+            isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-500'
+          }`}>
+            <Bot className="w-5 h-5" />
+          </div>
+          <div>
+            <div className={`font-medium text-sm ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              智能体问答
+            </div>
+            <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              专业智能体服务
+            </div>
+          </div>
+        </div>
+      </button>
+      <button
+        onClick={() => handleNewQA('multi-agent')}
+        className={`p-4 rounded-xl border-2 border-dashed transition-all text-left ${
+          isDark
+            ? 'border-slate-600 hover:border-green-500 bg-slate-800/50 hover:bg-green-600/10'
+            : 'border-gray-300 hover:border-green-400 bg-gray-50 hover:bg-green-50'
+        }`}
+      >
+        <div className="flex items-center gap-3">
+          <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
+            isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-500'
+          }`}>
+            <Layers className="w-5 h-5" />
+          </div>
+          <div>
+            <div className={`font-medium text-sm ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              多智能体协同
+            </div>
+            <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              多视角并行分析
+            </div>
+          </div>
+        </div>
+      </button>
+    </div>
+  );
+
+  return (
+    <div className={`h-[calc(100vh-120px)] flex theme-bg rounded-xl overflow-hidden ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+      {/* 左侧面板 - MiniMax风格 - 可折叠 */}
+      <div className={`transition-all duration-300 flex-shrink-0 flex flex-col overflow-hidden ${leftPanelCollapsed ? 'w-12' : 'w-80'} ${isDark ? 'bg-slate-800/30' : 'bg-gray-50/50'} ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+        {/* 顶部标题 */}
+        <div className={`px-3 py-3 border-b flex items-center justify-between ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+          {!leftPanelCollapsed && (
+            <div className="flex items-center gap-2">
+              <Bot className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+              <h2 className={`font-medium text-sm ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                {qaProvider === 'agent' ? '智能体列表' : '问答配置'}
+              </h2>
+            </div>
+          )}
+          <button
+            onClick={() => setLeftPanelCollapsed(!leftPanelCollapsed)}
+            className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-200 text-gray-500'}`}
+            title={leftPanelCollapsed ? '展开菜单' : '收起菜单'}
+          >
+            {leftPanelCollapsed ? (
+              <ChevronRight className="w-4 h-4" />
+            ) : (
+              <ChevronDown className="w-4 h-4" />
+            )}
+          </button>
+        </div>
+
+        {/* 左侧面板折叠内容 */}
+        {!leftPanelCollapsed && (
+          <>
+            {/* 通用问答配置 */}
+        {qaProvider === 'general' && (
+          <div className="flex-1 overflow-y-auto p-4 space-y-6 custom-scrollbar">
+            {/* 问答模式选择 - 卡片式 */}
+            <div>
+              <h3 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                问答模式
+              </h3>
+              <div className="space-y-2">
+                {[
+                  { value: 'single-round', label: '大模型', icon: Bot, desc: '快速直接' },
+                  { value: 'single-round', label: '单轮RAG', icon: Sparkles, desc: '快速直接' },
+                  { value: 'multi-round', label: '多轮RAG', icon: Brain, desc: '深入理解' },
+                  { value: 'deep-search', label: '深度检索', icon: BookOpen, desc: '全面分析' },
+                ].map((mode) => (
+                  <button
+                    key={mode.value}
+                    onClick={() => setQaMode(mode.value as QAMode)}
+                    className={`w-full flex items-center gap-3 p-3 rounded-xl transition-all text-left ${
+                      qaMode === mode.value
+                        ? isDark
+                          ? 'bg-blue-600/20 border-2 border-blue-500'
+                          : 'bg-red-50 border-2 border-red-300'
+                        : isDark
+                          ? 'bg-slate-700/50 border border-transparent hover:bg-slate-700'
+                          : 'bg-white border border-gray-200 hover:border-gray-300'
+                    }`}
+                  >
+                    <div className={`w-9 h-9 rounded-lg flex items-center justify-center ${
+                      qaMode === mode.value
+                        ? isDark
+                          ? 'bg-blue-600 text-white'
+                          : 'bg-red-500 text-white'
+                        : isDark
+                          ? 'bg-slate-600 text-slate-300'
+                          : 'bg-gray-100 text-gray-600'
+                    }`}>
+                      <mode.icon className="w-4 h-4" />
+                    </div>
+                    <div className="flex-1">
+                      <div className={`text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                        {mode.label}
+                      </div>
+                      <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                        {mode.desc}
+                      </div>
+                    </div>
+                    {qaMode === mode.value && (
+                      <CheckCircle className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+                    )}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* 知识范围 */}
+            <div>
+              <h3 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                知识范围
+              </h3>
+              <div className={`p-3 rounded-xl space-y-2 ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                {[
+                  { value: 'all', label: '全部知识源' },
+                  { value: 'specific-kb', label: '指定知识库' },
+                  { value: 'specific-domain', label: '指定资源域' },
+                ].map((option) => (
+                  <label
+                    key={option.value}
+                    className="flex items-center gap-2 py-1.5 cursor-pointer"
+                  >
+                    <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center transition-all ${
+                      knowledgeScope === option.value
+                        ? isDark
+                          ? 'border-blue-500 bg-blue-500'
+                          : 'border-red-500 bg-red-500'
+                        : isDark
+                          ? 'border-slate-500'
+                          : 'border-gray-300'
+                    }`}>
+                      {knowledgeScope === option.value && (
+                        <div className="w-1.5 h-1.5 rounded-full bg-white" />
+                      )}
+                    </div>
+                    <input
+                      type="radio"
+                      name="knowledge-scope"
+                      checked={knowledgeScope === option.value}
+                      onChange={() => setKnowledgeScope(option.value as any)}
+                      className="sr-only"
+                    />
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      {option.label}
+                    </span>
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            {/* 回答偏好 */}
+            <div>
+              <h3 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                回答偏好
+              </h3>
+              <div className={`p-3 rounded-xl space-y-2 ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                {[
+                  { checked: showSources, onChange: () => setShowSources(!showSources), label: '展示引用来源' },
+                  { checked: showProcess, onChange: () => setShowProcess(!showProcess), label: '展示检索过程' },
+                ].map((item, idx) => (
+                  <label key={idx} className="flex items-center gap-2 py-1.5 cursor-pointer">
+                    <div className={`w-4 h-4 rounded-md border-2 flex items-center justify-center transition-all ${
+                      item.checked
+                        ? isDark
+                          ? 'border-blue-500 bg-blue-500'
+                          : 'border-red-500 bg-red-500'
+                        : isDark
+                          ? 'border-slate-500'
+                          : 'border-gray-300'
+                    }`}>
+                      {item.checked && (
+                        <svg className="w-2.5 h-2.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                        </svg>
+                      )}
+                    </div>
+                    <input
+                      type="checkbox"
+                      checked={item.checked}
+                      onChange={item.onChange}
+                      className="sr-only"
+                    />
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      {item.label}
+                    </span>
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            {/* 检索过程 */}
+            {showProcess && messages.length > 0 && (
+              <div>
+                <h3 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                  检索过程
+                </h3>
+                <div className={`p-3 rounded-xl space-y-2 ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>当前模式</span>
+                    <span className={`text-xs font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                      {searchProcess.currentMode}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>检索轮次</span>
+                    <span className={`text-xs ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{searchProcess.rounds}</span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>命中数</span>
+                    <span className={`text-xs ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{searchProcess.hits}</span>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* 智能体问答配置 - MiniMax单专家风格优化 */}
+        {qaProvider === 'agent' && (
+          <div className="flex-1 overflow-hidden flex flex-col">
+            {/* 简洁的智能体选择区 */}
+            <div className="px-4 py-4">
+              {/* 当前选中智能体 - 大卡片突出显示 */}
+              <div className={`p-4 rounded-2xl mb-4 ${isDark ? 'bg-gradient-to-br from-blue-600/20 to-purple-600/20 border border-blue-500/30' : 'bg-gradient-to-br from-blue-50 to-purple-50 border border-blue-200'}`}>
+                <div className="flex items-center gap-3 mb-3">
+                  <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
+                    isDark ? 'bg-blue-600/40 text-blue-300' : 'bg-blue-500/20 text-blue-600'
+                  }`}>
+                    <Bot className="w-6 h-6" />
+                  </div>
+                  <div className="flex-1">
+                    <div className={`font-semibold text-base ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                      {selectedAgent.name}
+                    </div>
+                    <div className={`text-xs mt-0.5 ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                      {selectedAgent.category}
+                    </div>
+                  </div>
+                </div>
+                <div className={`text-sm leading-relaxed ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                  {selectedAgent.description}
+                </div>
+              </div>
+
+              {/* 智能体列表 - MiniMax风格网格 */}
+              <div className={`text-xs font-medium mb-2 flex items-center gap-1.5 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                <Sparkles className="w-3 h-3" />
+                选择其他智能体
+              </div>
+              <div className="grid grid-cols-2 gap-2">
+                {agents.slice(0, 6).map((agent) => (
+                  <button
+                    key={agent.id}
+                    onClick={() => setSelectedAgent(agent)}
+                    className={`p-2.5 rounded-xl text-left transition-all ${
+                      selectedAgent.id === agent.id
+                        ? isDark
+                          ? 'bg-blue-600/30 border border-blue-500'
+                          : 'bg-blue-100 border border-blue-300'
+                        : isDark
+                          ? 'bg-slate-700/50 border border-transparent hover:border-slate-600'
+                          : 'bg-white border border-gray-200 hover:border-gray-300'
+                    }`}
+                  >
+                    <div className="flex items-center gap-2">
+                      <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
+                        selectedAgent.id === agent.id
+                          ? isDark ? 'bg-blue-600 text-white' : 'bg-blue-500 text-white'
+                          : isDark ? 'bg-slate-600 text-slate-300' : 'bg-gray-100 text-gray-500'
+                      }`}>
+                        <Bot className="w-4 h-4" />
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <div className={`text-xs font-medium truncate ${isDark ? 'text-white' : 'text-gray-800'}`}>
+                          {agent.name}
+                        </div>
+                        <div className={`text-xs truncate ${isDark ? 'text-slate-400' : 'text-gray-400'}`}>
+                          {agent.category}
+                        </div>
+                      </div>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* 智能体能力标签 - 底部展示 */}
+            <div className={`mt-auto p-4 border-t ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-gray-100 bg-gray-50/50'}`}>
+              {/* 技能标签 */}
+              <div className="mb-3">
+                <div className={`text-xs font-medium mb-2 flex items-center gap-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                  <Sparkles className="w-3 h-3" />
+                  核心技能
+                </div>
+                <div className="flex flex-wrap gap-1">
+                  {selectedAgent.skills.slice(0, 4).map((skill, idx) => (
+                    <span
+                      key={idx}
+                      className={`px-2 py-1 rounded-lg text-xs font-medium ${
+                        isDark ? 'bg-blue-600/20 text-blue-400 border border-blue-500/30' : 'bg-blue-50 text-blue-600 border border-blue-200'
+                      }`}
+                    >
+                      {skill}
+                    </span>
+                  ))}
+                </div>
+              </div>
+              {/* 数据源标签 */}
+              <div>
+                <div className={`text-xs font-medium mb-2 flex items-center gap-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                  <Database className="w-3 h-3" />
+                  数据源
+                </div>
+                <div className="flex flex-wrap gap-1">
+                  {selectedAgent.dataSources.slice(0, 3).map((source, idx) => (
+                    <span
+                      key={idx}
+                      className={`px-2 py-1 rounded-lg text-xs ${
+                        isDark ? 'bg-green-600/20 text-green-400 border border-green-500/30' : 'bg-green-50 text-green-600 border border-green-200'
+                      }`}
+                    >
+                      {source}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+            {/* 底部按钮 - 所有模式通用 */}
+            <div className={`p-4 border-t ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+              <button
+                onClick={() => onNavigate('qa-records')}
+                className={`w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium transition-all ${
+                  isDark
+                    ? 'bg-slate-700/50 text-slate-300 hover:bg-slate-600/50'
+                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                }`}
+              >
+                <History className="w-4 h-4" />
+                历史记录
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* 右侧面板 - 对话区 */}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* 顶部模式切换 */}
+        <div className={`px-6 py-3 border-b flex items-center justify-between ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'}`}>
+          {/* 左侧 - 问答模式切换 */}
+          <div className="flex items-center gap-4">
+            {/* 问答模式切换 */}
+            <div className={`flex rounded-xl p-1 ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+              <button
+                onClick={() => setQaProvider('general')}
+                className={`px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
+                  qaProvider === 'general'
+                    ? isDark
+                      ? 'bg-blue-600 text-white'
+                      : 'bg-red-500 text-white'
+                    : isDark
+                      ? 'text-slate-400 hover:text-white'
+                      : 'text-gray-600 hover:text-red-600'
+                }`}
+              >
+                <CircleHelp className="w-4 h-4" />
+                通用问答
+              </button>
+              <button
+                onClick={() => setQaProvider('agent')}
+                className={`px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
+                  qaProvider === 'agent'
+                    ? isDark
+                      ? 'bg-blue-600 text-white'
+                      : 'bg-red-500 text-white'
+                    : isDark
+                      ? 'text-slate-400 hover:text-white'
+                      : 'text-gray-600 hover:text-red-600'
+                }`}
+              >
+                <Bot className="w-4 h-4" />
+                智能体问答
+              </button>
+              <button
+                onClick={() => setQaProvider('multi-agent')}
+                className={`px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
+                  qaProvider === 'multi-agent'
+                    ? isDark
+                      ? 'bg-green-600 text-white'
+                      : 'bg-green-500 text-white'
+                    : isDark
+                      ? 'text-slate-400 hover:text-white'
+                      : 'text-gray-600 hover:text-green-600'
+                }`}
+              >
+                <Layers className="w-4 h-4" />
+                协同分析
+              </button>
+            </div>
+
+            {/* 当前智能体指示 */}
+            {qaProvider === 'agent' && (
+              <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full ${isDark ? 'bg-blue-600/20' : 'bg-blue-50'}`}>
+                <Bot className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-blue-600'}`} />
+                <span className={`text-sm font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                  {selectedAgent.name}
+                </span>
+              </div>
+            )}
+
+            {/* 对比模式切换 - 仅通用问答 */}
+            {qaProvider === 'general' && (
+              <div className={`flex rounded-xl p-1 ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                <button
+                  onClick={() => setViewMode('single')}
+                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+                    viewMode === 'single'
+                      ? isDark
+                        ? 'bg-blue-600 text-white'
+                        : 'bg-red-500 text-white'
+                      : isDark
+                        ? 'text-slate-400 hover:text-white'
+                        : 'text-gray-600 hover:text-red-600'
+                  }`}
+                >
+                  单一模式
+                </button>
+                <button
+                  onClick={() => setViewMode('compare')}
+                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+                    viewMode === 'compare'
+                      ? isDark
+                        ? 'bg-blue-600 text-white'
+                        : 'bg-red-500 text-white'
+                      : isDark
+                        ? 'text-slate-400 hover:text-white'
+                        : 'text-gray-600 hover:text-red-600'
+                  }`}
+                >
+                  对比模式
+                </button>
+              </div>
+            )}
+          </div>
+
+          {/* 右侧 - 新建问答按钮（仅通用/智能体模式显示） */}
+          {qaProvider !== 'multi-agent' && (
+            <button
+              onClick={handleStartNewQA}
+              className={`px-4 py-2 rounded-xl text-sm font-medium transition-all flex items-center gap-2 ${
+                isDark
+                  ? 'bg-slate-700/50 hover:bg-slate-600 text-slate-300 border border-slate-600'
+                  : 'bg-white hover:bg-gray-100 text-gray-700 border border-gray-200'
+              }`}
+            >
+              <Plus className="w-4 h-4" />
+              新建问答
+            </button>
+          )}
+        </div>
+
+        {/* 消息区域 */}
+        <div className="flex-1 overflow-y-auto p-0 custom-scrollbar">
+          {/* 多智能体协同分析面板 - 正确设计 */}
+          {qaProvider === 'multi-agent' && (
+            <div className="h-full flex flex-col">
+              {/* 顶部标题栏 - 简洁版 */}
+              <div className={`flex-shrink-0 px-6 py-4 border-b ${isDark ? 'bg-slate-800/50 border-slate-700/50' : 'bg-white border-gray-200'}`}>
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-4">
+                    <button
+                      onClick={() => onNavigate('task-management')}
+                      className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-all ${
+                        isDark ? 'bg-slate-700/50 hover:bg-slate-600/50 text-slate-300' : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
+                      }`}
+                    >
+                      <ArrowLeft className="w-4 h-4" />
+                      返回
+                    </button>
+                    <div className="flex items-center gap-3">
+                      <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${isDark ? 'bg-green-600/20' : 'bg-green-100'}`}>
+                        <Layers className={`w-5 h-5 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
+                      </div>
+                      <div>
+                        <h2 className={`font-bold text-lg ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                          多智能体协同分析
+                        </h2>
+                        <div className={`flex items-center gap-3 mt-0.5 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                          <span className="font-medium">{taskInfo.name}</span>
+                          <span>•</span>
+                          <span>{taskInfo.goal}</span>
+                          <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
+                            isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-600'
+                          }`}>
+                            {taskInfo.status}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={handleGenerateSummary}
+                      className={`px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
+                        isDark ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-blue-500 hover:bg-blue-600 text-white'
+                      }`}
+                    >
+                      <Sparkles className="w-4 h-4" />
+                      生成汇总
+                    </button>
+                    <button
+                      onClick={handleExportReport}
+                      className={`px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
+                        isDark ? 'bg-slate-700 hover:bg-slate-600 text-white' : 'bg-gray-200 hover:bg-gray-300 text-gray-700'
+                      }`}
+                    >
+                      <Download className="w-4 h-4" />
+                      导出报告
+                    </button>
+                    <button
+                      onClick={handleSaveMultiAgentRecord}
+                      className={`px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
+                        isDark ? 'bg-slate-700 hover:bg-slate-600 text-white' : 'bg-gray-200 hover:bg-gray-300 text-gray-700'
+                      }`}
+                    >
+                      <Save className="w-4 h-4" />
+                      保存记录
+                    </button>
+                    <button
+                      onClick={() => alert('分析已结束')}
+                      className={`px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
+                        isDark ? 'bg-red-600/80 hover:bg-red-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                      }`}
+                    >
+                      <X className="w-4 h-4" />
+                      结束分析
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              {/* 三栏布局主体 */}
+              <div className="flex-1 flex min-h-0">
+                {/* 左侧：参与智能体列表 */}
+                <div className={`w-72 flex-shrink-0 flex flex-col border-r overflow-hidden ${
+                  isDark ? 'bg-slate-800/30 border-slate-700/50' : 'bg-gray-50/50 border-gray-200'
+                }`}>
+                  {/* 场景模板选择 */}
+                  <div className={`p-3 border-b ${isDark ? 'border-slate-700/50' : 'border-gray-200'}`}>
+                    <div className="relative">
+                      <button
+                        onClick={() => { setShowSceneSelector(!showSceneSelector); setShowAgentSelector(false); }}
+                        className={`w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-all ${
+                          selectedSceneTemplate
+                            ? (isDark ? 'bg-green-600/20 border border-green-500/50 text-green-400' : 'bg-green-50 border border-green-200 text-green-600')
+                            : (isDark ? 'bg-slate-700/50 border border-transparent hover:border-slate-600 text-slate-300' : 'bg-white border border-gray-200 hover:border-gray-300 text-gray-700')
+                        }`}
+                      >
+                        <div className="flex items-center gap-2">
+                          <Layers className="w-4 h-4" />
+                          <span>{selectedSceneTemplate ? selectedSceneTemplate.name : '应用场景模板'}</span>
+                        </div>
+                        <ChevronDown className={`w-4 h-4 transition-transform ${showSceneSelector ? 'rotate-180' : ''}`} />
+                      </button>
+                      {/* 场景模板选择下拉 */}
+                      {showSceneSelector && (
+                        <div className={`absolute top-full left-0 right-0 mt-1 z-20 rounded-lg shadow-xl overflow-hidden ${
+                          isDark ? 'bg-slate-800 border border-slate-700' : 'bg-white border border-gray-200'
+                        }`}>
+                          <div className={`p-2 text-xs font-medium ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                            选择场景模板自动配置智能体
+                          </div>
+                          {sceneTemplates.map((template) => (
+                            <button
+                              key={template.id}
+                              onClick={() => handleApplySceneTemplate(template)}
+                              className={`w-full px-3 py-2 text-left hover:${
+                                isDark ? 'bg-slate-700/50' : 'bg-gray-50'
+                              } ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-gray-50'}`}
+                            >
+                              <div className={`text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>{template.name}</div>
+                              <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{template.description}</div>
+                            </button>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* 智能体列表头部 */}
+                  <div className="flex items-center justify-between px-4 py-3">
+                    <h3 className={`text-sm font-medium flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                      <Users className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                      参与智能体 ({selectedMultiAgents.length})
+                    </h3>
+                    <button
+                      onClick={() => { setShowAgentSelector(!showAgentSelector); setShowSceneSelector(false); }}
+                      className={`p-1.5 rounded-lg transition-all ${
+                        isDark ? 'hover:bg-slate-700 text-slate-400 hover:text-white' : 'hover:bg-gray-200 text-gray-500 hover:text-gray-700'
+                      }`}
+                      title="添加智能体"
+                    >
+                      <Plus className="w-4 h-4" />
+                    </button>
+                  </div>
+
+                  {/* 智能体选择下拉 - 按五大类别分组 */}
+                  {showAgentSelector && (
+                    <div className={`mx-3 mb-2 p-3 rounded-lg ${
+                      isDark ? 'bg-slate-700/50 border border-slate-600' : 'bg-white border border-gray-200'
+                    }`}>
+                      <div className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                        选择要添加的智能体
+                      </div>
+                      {availableAgentsForSelection.length === 0 ? (
+                        <div className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>所有智能体已添加</div>
+                      ) : (
+                        <div className="max-h-64 overflow-y-auto space-y-3">
+                          {/* 按类别分组显示 */}
+                          {['规划类', 'MNTY类', '效果PG类', '知识分析类', '协同管理类'].map((category) => {
+                            const categoryAgents = availableAgentsForSelection.filter(a => a.category === category);
+                            if (categoryAgents.length === 0) return null;
+                            return (
+                              <div key={category}>
+                                <div className={`text-xs font-medium mb-1.5 flex items-center gap-1.5 ${
+                                  category === '规划类' ? (isDark ? 'text-blue-400' : 'text-blue-600') :
+                                  category === 'MNTY类' ? (isDark ? 'text-purple-400' : 'text-purple-600') :
+                                  category === '效果PG类' ? (isDark ? 'text-amber-400' : 'text-amber-600') :
+                                  category === '知识分析类' ? (isDark ? 'text-cyan-400' : 'text-cyan-600') :
+                                  (isDark ? 'text-green-400' : 'text-green-600')
+                                }`}>
+                                  {category === '规划类' && <Target className="w-3 h-3" />}
+                                  {category === 'MNTY类' && <Brain className="w-3 h-3" />}
+                                  {category === '效果PG类' && <TrendingUp className="w-3 h-3" />}
+                                  {category === '知识分析类' && <Database className="w-3 h-3" />}
+                                  {category === '协同管理类' && <Users className="w-3 h-3" />}
+                                  {category}
+                                </div>
+                                <div className="space-y-1">
+                                  {categoryAgents.map((agent) => (
+                                    <button
+                                      key={agent.id}
+                                      onClick={() => handleAddAgent(agent)}
+                                      className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-lg text-left transition-all ${
+                                        isDark ? 'hover:bg-slate-600/50' : 'hover:bg-gray-100'
+                                      }`}
+                                    >
+                                      <Bot className={`w-3.5 h-3.5 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
+                                      <div className="flex-1 min-w-0">
+                                        <div className={`text-xs font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>{agent.name}</div>
+                                        <div className={`text-xs truncate ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{agent.tags.slice(0, 2).join(' / ')}</div>
+                                      </div>
+                                      <Plus className={`w-3.5 h-3.5 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
+                                    </button>
+                                  ))}
+                                </div>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {/* 参与智能体列表 */}
+                  <div className="flex-1 overflow-y-auto px-3 pb-3 custom-scrollbar">
+                    <div className="space-y-2">
+                      {selectedMultiAgents.map((agent) => {
+                        const response = agentResponses.find(r => r.agentId === agent.id);
+                        const status = response?.status || 'pending';
+                        return (
+                          <div key={agent.id} className={`p-2.5 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-white border border-gray-200'}`}>
+                            <div className="flex items-center justify-between">
+                              <div className="flex items-center gap-2 flex-1 min-w-0">
+                                <Bot className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
+                                <div className="min-w-0 flex-1">
+                                  <div className={`text-sm font-medium truncate ${isDark ? 'text-white' : 'text-gray-900'}`}>{agent.name}</div>
+                                  <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{agent.category}</div>
+                                </div>
+                              </div>
+                              <div className="flex items-center gap-1.5">
+                                <span className={`px-2 py-0.5 rounded text-xs ${
+                                  status === 'pending' ? (isDark ? 'bg-slate-600/50 text-slate-400' : 'bg-gray-200 text-gray-500') :
+                                  status === 'responding' ? (isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-500') :
+                                  (isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-500')
+                                }`}>
+                                  {status === 'pending' ? '待回答' : status === 'responding' ? '回答中' : '已回答'}
+                                </span>
+                                <button
+                                  onClick={() => handleRemoveAgent(agent.id)}
+                                  className={`p-1 rounded transition-all ${
+                                    isDark ? 'hover:bg-slate-600 text-slate-500 hover:text-red-400' : 'hover:bg-gray-200 text-gray-400 hover:text-red-500'
+                                  }`}
+                                  title="移除智能体"
+                                >
+                                  <X className="w-3.5 h-3.5" />
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        );
+                      })}
+                      {selectedMultiAgents.length === 0 && (
+                        <div className={`text-center py-6 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                          <Bot className="w-8 h-8 mx-auto mb-2 opacity-50" />
+                          <p className="text-xs">请添加参与分析的智能体</p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* 历史记录入口 */}
+                  <div className={`p-4 border-t ${isDark ? 'border-slate-700/50' : 'border-gray-200'}`}>
+                    <button
+                      className={`w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium transition-all ${
+                        isDark ? 'bg-slate-700/50 hover:bg-slate-600/50 text-slate-300' : 'bg-white hover:bg-gray-100 text-gray-600 border border-gray-200'
+                      }`}
+                    >
+                      <History className="w-4 h-4" />
+                      查看历史记录
+                    </button>
+                  </div>
+                </div>
+
+                {/* 中间：问答消息流 */}
+                <div className="flex-1 flex flex-col min-h-0 bg-transparent">
+                  {/* 工具条 */}
+                  <div className={`flex-shrink-0 px-4 py-3 border-b items-center gap-3 ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-gray-200 bg-gray-50'}`}>
+                    <button className={`px-3 py-1.5 rounded-lg text-xs font-medium ${
+                      messageFilter === 'all' ? (isDark ? 'bg-green-600 text-white' : 'bg-green-500 text-white') : (isDark ? 'text-slate-400' : 'text-gray-500')
+                    }`} onClick={() => setMessageFilter('all')}>
+                      全部消息
+                    </button>
+                    <select
+                      value={agentMessageFilter}
+                      onChange={(e) => setAgentMessageFilter(e.target.value)}
+                      className={`px-2 py-1.5 rounded-lg text-xs border ${isDark ? 'bg-slate-700 border-slate-600 text-slate-300' : 'bg-white border-gray-200 text-gray-600'}`}
+                    >
+                      <option value="all">全部智能体</option>
+                      {selectedMultiAgents.map(agent => (
+                        <option key={agent.id} value={agent.id}>{agent.name}</option>
+                      ))}
+                    </select>
+                    <button className={`px-3 py-1.5 rounded-lg text-xs font-medium ${
+                      messageFilter === 'user' ? (isDark ? 'bg-green-600 text-white' : 'bg-green-500 text-white') : (isDark ? 'text-slate-400' : 'text-gray-500')
+                    }`} onClick={() => setMessageFilter('user')}>
+                      用户提问
+                    </button>
+                    <button className={`px-3 py-1.5 rounded-lg text-xs font-medium ${
+                      messageFilter === 'adopted' ? (isDark ? 'bg-green-600 text-white' : 'bg-green-500 text-white') : (isDark ? 'text-slate-400' : 'text-gray-500')
+                    }`} onClick={() => setMessageFilter('adopted')}>
+                      已采纳
+                    </button>
+                  </div>
+
+                  {/* 消息列表 */}
+                  <div className="flex-1 overflow-y-auto p-4 space-y-4 custom-scrollbar">
+                    {multiAgentMessages.length === 0 ? (
+                      <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                        <MessageSquare className="w-16 h-16 mb-4 opacity-30" />
+                        <p className="text-base font-medium mb-2">尚未开始提问</p>
+                        <p className="text-sm text-center max-w-md">
+                          请在底部输入你希望多个智能体分析的问题<br/>系统将按所选对象返回回答
+                        </p>
+                      </div>
+                    ) : (
+                      multiAgentMessages.map((msg) => {
+                        const isAdopted = msg.type === 'agent' && adoptedViews.some(v => v.agentName === msg.agentName);
+                        return (
+                          <div key={msg.id}>
+                            {msg.type === 'user' ? (
+                              <div className="flex gap-3 justify-end">
+                                <div className={`max-w-[70%] rounded-2xl px-4 py-3 ${isDark ? 'bg-blue-600 text-white' : 'bg-blue-500 text-white'}`}>
+                                  <div className={`text-xs mb-1 opacity-75`}>用户</div>
+                                  <p className="text-sm whitespace-pre-wrap">{msg.content}</p>
+                                </div>
+                                <div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-200 text-gray-600'}`}>
+                                  <div className="w-3 h-3 rounded-full bg-current" />
+                                </div>
+                              </div>
+                            ) : (
+                              <div className={`p-4 rounded-xl border ${isAdopted ? (isDark ? 'bg-green-600/10 border-green-500/30' : 'bg-green-50 border-green-200') : (isDark ? 'bg-slate-800/30 border-slate-700/50' : 'bg-white border-gray-200')}`}>
+                                <div className="flex items-center justify-between mb-3">
+                                  <div className="flex items-center gap-2">
+                                    <Bot className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
+                                    <span className={`text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>{msg.agentName}</span>
+                                    {isAdopted && (
+                                      <span className={`px-2 py-0.5 rounded text-xs font-medium ${isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-600'}`}>已采纳</span>
+                                    )}
+                                  </div>
+                                  <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{msg.timestamp.toLocaleTimeString()}</span>
+                                </div>
+                                <p className={`text-sm leading-relaxed whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{msg.content}</p>
+                                <div className="flex items-center gap-2 mt-3 pt-3 border-t border-opacity-30">
+                                  <button
+                                    onClick={() => handleAdoptResponse(msg.id)}
+                                    className={`px-3 py-1 rounded-lg text-xs font-medium flex items-center gap-1.5 ${
+                                      isAdopted ? (isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-600') : (isDark ? 'bg-slate-700/50 text-slate-300' : 'bg-gray-100 text-gray-600')
+                                    }`}
+                                  >
+                                    <CheckCircle className="w-3.5 h-3.5" />
+                                    采纳
+                                  </button>
+                                  <button className={`px-3 py-1 rounded-lg text-xs font-medium flex items-center gap-1.5 ${isDark ? 'bg-slate-700/50 text-slate-300' : 'bg-gray-100 text-gray-600'}`}>
+                                    <AlertCircle className="w-3.5 h-3.5" />
+                                    待确认
+                                  </button>
+                                  <button
+                                    onClick={() => { setSendTarget(msg.agentName || 'all'); setInputValue(''); }}
+                                    className={`px-3 py-1 rounded-lg text-xs font-medium flex items-center gap-1.5 ${isDark ? 'bg-slate-700/50 text-slate-300' : 'bg-gray-100 text-gray-600'}`}
+                                  >
+                                    <MessageCircle className="w-3.5 h-3.5" />
+                                    追问
+                                  </button>
+                                </div>
+                              </div>
+                            )}
+                          </div>
+                        );
+                      })
+                    )}
+                    {isMultiAgentLoading && (
+                      <div className="flex items-center gap-3 p-4">
+                        <RefreshCw className={`w-5 h-5 animate-spin ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
+                        <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>智能体正在分析中...</span>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* 底部统一输入区 */}
+                  <div className={`flex-shrink-0 p-4 border-t ${isDark ? 'bg-white/5 border-slate-700/50' : 'bg-white border-gray-200'}`}>
+                    <div className={`flex items-center gap-3 mb-3 ${isDark ? 'text-slate-400' : 'text-gray-600'}`}>
+                      <span className="text-sm">发送对象：</span>
+                      <div className={`flex rounded-lg p-1 ${isDark ? 'bg-slate-700/50' : 'bg-gray-100'}`}>
+                        <button
+                          onClick={() => setSendTarget('all')}
+                          className={`px-3 py-1 rounded text-xs font-medium transition-all ${
+                            sendTarget === 'all' ? (isDark ? 'bg-green-600 text-white' : 'bg-green-500 text-white') : (isDark ? 'text-slate-400' : 'text-gray-500')
+                          }`}
+                        >
+                          全部智能体
+                        </button>
+                        {selectedMultiAgents.map((agent) => (
+                          <button
+                            key={agent.id}
+                            onClick={() => setSendTarget(agent.id)}
+                            className={`px-3 py-1 rounded text-xs font-medium transition-all ${
+                              sendTarget === agent.id ? (isDark ? 'bg-green-600 text-white' : 'bg-green-500 text-white') : (isDark ? 'text-slate-400' : 'text-gray-500')
+                            }`}
+                          >
+                            {agent.name}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                    <div className={`flex items-end gap-3 rounded-2xl p-4 ${isDark ? 'bg-slate-700/50' : 'bg-gray-50'}`}>
+                      <textarea
+                        value={inputValue}
+                        onChange={(e) => setInputValue(e.target.value)}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' && !e.shiftKey) {
+                            e.preventDefault();
+                            handleMultiAgentSend();
+                          }
+                        }}
+                        placeholder="请输入希望智能体分析的问题、补充要求或追问内容..."
+                        rows={2}
+                        className={`flex-1 bg-transparent resize-none focus:outline-none text-base ${
+                          isDark ? 'text-white placeholder-slate-500' : 'text-gray-800 placeholder-gray-400'
+                        }`}
+                      />
+                      <div className="flex items-center gap-2">
+                        <button className={`p-2.5 rounded-xl ${isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'}`} title="上传文件">
+                          <Upload className="w-5 h-5" />
+                        </button>
+                        <button
+                          onClick={handleMultiAgentSend}
+                          disabled={!inputValue.trim() || isMultiAgentLoading}
+                          className={`px-5 py-2.5 rounded-xl font-medium transition-all flex items-center gap-2 ${
+                            inputValue.trim() && !isMultiAgentLoading
+                              ? (isDark ? 'bg-green-600 hover:bg-green-700 text-white' : 'bg-green-500 hover:bg-green-600 text-white')
+                              : (isDark ? 'bg-slate-600 text-slate-400' : 'bg-gray-300 text-gray-500')
+                          }`}
+                        >
+                          {isMultiAgentLoading ? <RefreshCw className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}
+                          发送
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* 右侧：分析结果 */}
+                <div className={`w-80 flex-shrink-0 flex flex-col border-l overflow-hidden ${
+                  isDark ? 'bg-slate-800/30 border-slate-700/50' : 'bg-gray-50/50 border-gray-200'
+                }`}>
+                  {/* 标签切换 */}
+                  <div className={`flex border-b ${isDark ? 'border-slate-700/50' : 'border-gray-200'}`}>
+                    <button
+                      onClick={() => setRightPanelTab('structured')}
+                      className={`flex-1 py-3 text-sm font-medium transition-all ${
+                        rightPanelTab === 'structured'
+                          ? isDark ? 'bg-slate-800/50 text-white border-b-2 border-green-500' : 'bg-white text-gray-900 border-b-2 border-green-500'
+                          : isDark ? 'text-slate-400' : 'text-gray-500'
+                      }`}
+                    >
+                      结构化结果
+                    </button>
+                    <button
+                      onClick={() => setRightPanelTab('report')}
+                      className={`flex-1 py-3 text-sm font-medium transition-all ${
+                        rightPanelTab === 'report'
+                          ? isDark ? 'bg-slate-800/50 text-white border-b-2 border-green-500' : 'bg-white text-gray-900 border-b-2 border-green-500'
+                          : isDark ? 'text-slate-400' : 'text-gray-500'
+                      }`}
+                    >
+                      文本报告
+                    </button>
+                  </div>
+
+                  {/* 内容区 */}
+                  <div className="flex-1 overflow-y-auto p-4 custom-scrollbar">
+                    {rightPanelTab === 'structured' ? (
+                      <div className="space-y-4">
+                        {/* 汇总结论 */}
+                        <div>
+                          <div className={`text-xs font-medium mb-2 ${isDark ? 'text-green-400' : 'text-green-600'}`}>汇总结论</div>
+                          <div className={`p-3 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                            {agentResponses.filter(r => r.status === 'completed' || r.status === 'adopted').length === 0 ? (
+                              <p className={`text-sm ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>暂无分析结论</p>
+                            ) : (
+                              <div className="space-y-2">
+                                {agentResponses.filter(r => r.status === 'completed' || r.status === 'adopted').map(r => (
+                                  <div key={r.id} className="text-sm">
+                                    <span className={`font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>{r.agentName}：</span>
+                                    <span className={isDark ? 'text-slate-300' : 'text-gray-700'}>{r.coreJudgment}</span>
+                                  </div>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+
+                        {/* 已采纳观点 */}
+                        <div>
+                          <div className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>已采纳观点 ({adoptedViews.length})</div>
+                          {adoptedViews.length === 0 ? (
+                            <p className={`text-sm ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>暂无采纳观点</p>
+                          ) : (
+                            <div className="space-y-2">
+                              {adoptedViews.map(view => (
+                                <div key={view.id} className={`p-3 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                                  <span className={`font-medium ${isDark ? 'text-green-400' : 'text-green-600'}`}>{view.agentName}</span>
+                                  <div className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{view.content}</div>
+                                </div>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+
+                        {/* 待确认问题 */}
+                        <div>
+                          <div className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>待确认问题</div>
+                          <div className={`p-3 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                            {pendingQuestions.length === 0 ? (
+                              <p className={`text-sm ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>无待确认问题</p>
+                            ) : (
+                              <div className="space-y-1">
+                                {pendingQuestions.map(q => (
+                                  <div key={q.id} className={`text-sm flex items-start gap-2 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                                    <span className={isDark ? 'text-amber-400' : 'text-amber-500'}>•</span>
+                                    <span>{q.content}</span>
+                                  </div>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="space-y-4">
+                        <div className={`text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>{summaryDraft.title || '五四青年节宣传方向分析报告'}</div>
+                        <div className={`p-3 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                          <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>背景</div>
+                          <div className={`text-sm mt-1 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{taskInfo.background}</div>
+                        </div>
+                        <div className={`p-3 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                          <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>参与智能体</div>
+                          <div className={`text-sm mt-1 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>{selectedMultiAgents.map(a => a.name).join(' / ')}</div>
+                        </div>
+                        <div className={`p-3 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                          <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>联合结论</div>
+                          <div className={`text-sm mt-1 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                            {summaryDraft.sections.length > 0 ? summaryDraft.sections.map(s => s.content).join('\n') : '点击"生成汇总"自动生成联合结论'}
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          {viewMode === 'single' && (
+            messages.length === 0 ? (
+              <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                <MessageSquare className="w-16 h-16 mb-4 opacity-50" />
+                <p className="text-lg">
+                  {qaProvider === 'agent' ? `开始与${selectedAgent.name}对话` : '开始你的问答'}
+                </p>
+                <p className="text-sm mt-2">
+                  {qaProvider === 'agent'
+                    ? '基于智能体专业能力获取精准回答'
+                    : '输入问题，获取基于知识库的智能回答'}
+                </p>
+
+                {/* 快捷入口 - 仅在通用问答且无消息时显示 */}
+                {qaProvider === 'general' && (
+                  <QuickStartCards />
+                )}
+              </div>
+            ) : (
+              <div className="h-full flex flex-col">
+                {/* 消息列表 - 居中显示，MiniMax风格 */}
+                <div className="flex-1 overflow-y-auto px-4 py-6 custom-scrollbar">
+                  <div className="max-w-3xl mx-auto space-y-6">
+                    {messages.map((msg) => (
+                      <div key={msg.id} className="space-y-3">
+                        {/* 用户消息 - 右侧显示 */}
+                        {msg.role === 'user' && (
+                          <div className="flex gap-3 justify-end">
+                            <div className={`max-w-[75%] rounded-2xl px-5 py-3.5 ${
+                              isDark
+                                ? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-600/20'
+                                : 'bg-gradient-to-br from-red-500 to-red-600 text-white shadow-lg shadow-red-500/20'
+                            }`}>
+                              <p className="whitespace-pre-wrap leading-relaxed text-[15px]">{msg.content}</p>
+                            </div>
+                            <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
+                              isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-200 text-gray-600'
+                            }`}>
+                              <div className="w-5 h-5 rounded-full bg-current" />
+                            </div>
+                          </div>
+                        )}
+
+                        {/* AI/智能体回复 - 左侧显示 */}
+                        {msg.role === 'assistant' && (
+                          <div className="flex gap-3">
+                            <div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 ${
+                              qaProvider === 'agent'
+                                ? (isDark ? 'bg-gradient-to-br from-blue-600/40 to-purple-600/40 text-blue-400' : 'bg-gradient-to-br from-blue-100 to-purple-100 text-blue-600')
+                                : (isDark ? 'bg-slate-700/80 text-slate-300' : 'bg-gray-100 text-gray-600')
+                            }`}>
+                              {qaProvider === 'agent' ? <Bot className="w-5 h-5" /> : <Brain className="w-5 h-5" />}
+                            </div>
+                            <div className="flex-1 min-w-0">
+                              {/* 智能体名称标识 - 仅智能体模式 */}
+                              {qaProvider === 'agent' && (
+                                <div className={`text-xs font-medium mb-1.5 ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                                  {selectedAgent.name}
+                                </div>
+                              )}
+                              <div className={`rounded-2xl px-5 py-3.5 ${
+                                isDark
+                                  ? 'bg-slate-800/80 text-slate-200 border border-slate-700/50'
+                                  : 'bg-white text-gray-800 border border-gray-200 shadow-sm'
+                              }`}>
+                                <p className="whitespace-pre-wrap leading-relaxed text-[15px]">{msg.content}</p>
+                              </div>
+
+                              {/* 来源信息 - MiniMax风格折叠 */}
+                              {msg.sources && showSources && (
+                                <div className={`mt-3 ml-1 p-4 rounded-xl ${isDark ? 'bg-slate-800/40 border border-slate-700/30' : 'bg-gray-50 border border-gray-200'}`}>
+                                  <div className={`text-xs font-medium mb-3 flex items-center gap-1.5 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                                    <FileText className="w-3.5 h-3.5" />
+                                    引用来源 ({msg.sources.length})
+                                  </div>
+                                  <div className="space-y-2">
+                                    {msg.sources.slice(0, 3).map((source, idx) => (
+                                      <div key={idx} className={`p-2.5 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
+                                        <div className="flex items-center gap-2">
+                                          <span className={`font-medium text-sm ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+                                            {source.title}
+                                          </span>
+                                          <span className={`px-1.5 py-0.5 rounded text-xs ${
+                                            isDark ? 'bg-slate-600 text-slate-400' : 'bg-gray-100 text-gray-500'
+                                          }`}>
+                                            {source.type}
+                                          </span>
+                                        </div>
+                                        <p className={`text-xs mt-1.5 leading-relaxed ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                                          {source.snippet.substring(0, 100)}...
+                                        </p>
+                                      </div>
+                                    ))}
+                                  </div>
+                                </div>
+                              )}
+
+                              {/* 智能体执行详情 */}
+                              {qaProvider === 'agent' && msg.skills && (
+                                <div className={`mt-3 ml-1 p-4 rounded-xl ${isDark ? 'bg-slate-800/40 border border-slate-700/30' : 'bg-gray-50 border border-gray-200'}`}>
+                                  <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                      <h4 className={`text-xs font-medium mb-2 flex items-center gap-1.5 ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+                                        <Sparkles className="w-3.5 h-3.5" />
+                                        启用技能
+                                      </h4>
+                                      <div className="flex flex-wrap gap-1">
+                                        {msg.skills.map((skill, idx) => (
+                                          <span key={idx} className={`px-2 py-1 rounded-lg text-xs font-medium ${
+                                            isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                                          }`}>
+                                            {skill}
+                                          </span>
+                                        ))}
+                                      </div>
+                                    </div>
+                                    <div>
+                                      <h4 className={`text-xs font-medium mb-2 flex items-center gap-1.5 ${isDark ? 'text-green-400' : 'text-green-600'}`}>
+                                        <Database className="w-3.5 h-3.5" />
+                                        数据源
+                                      </h4>
+                                      <div className="flex flex-wrap gap-1">
+                                        {msg.dataSources?.map((source, idx) => (
+                                          <span key={idx} className={`px-2 py-1 rounded-lg text-xs ${
+                                            isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-600'
+                                          }`}>
+                                            {source}
+                                          </span>
+                                        ))}
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* 加载动画 */}
+                {isLoading && (
+                  <div className="flex gap-3 max-w-3xl mx-auto px-4">
+                    <div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 ${
+                      qaProvider === 'agent'
+                        ? (isDark ? 'bg-gradient-to-br from-blue-600/40 to-purple-600/40 text-blue-400' : 'bg-gradient-to-br from-blue-100 to-purple-100 text-blue-600')
+                        : (isDark ? 'bg-slate-700/80 text-slate-300' : 'bg-gray-100 text-gray-600')
+                    }`}>
+                      {qaProvider === 'agent' ? <Bot className="w-5 h-5" /> : <Brain className="w-5 h-5" />}
+                    </div>
+                    <div className={`rounded-2xl px-5 py-4 ${isDark ? 'bg-slate-800/80 border border-slate-700/50' : 'bg-white border border-gray-200 shadow-sm'}`}>
+                      <div className="flex gap-1.5 items-center">
+                        <span className={`w-2 h-2 rounded-full animate-bounce ${isDark ? 'bg-blue-400' : 'bg-blue-500'}`} style={{ animationDelay: '0ms' }} />
+                        <span className={`w-2 h-2 rounded-full animate-bounce ${isDark ? 'bg-blue-400' : 'bg-blue-500'}`} style={{ animationDelay: '150ms' }} />
+                        <span className={`w-2 h-2 rounded-full animate-bounce ${isDark ? 'bg-blue-400' : 'bg-blue-500'}`} style={{ animationDelay: '300ms' }} />
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )
+          )}
+        </div>
+
+        {/* 对比模式视图 */}
+        {viewMode === 'compare' && (
+          <div className="h-full">
+            {compareResult ? (
+              compareLayout === 'horizontal' ? (
+                <div className="grid grid-cols-2 gap-6 h-full">
+                  <div className={`rounded-2xl border overflow-hidden ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                    <div className={`px-4 py-3 ${isDark ? 'bg-slate-800/50 border-b border-slate-700/50' : 'bg-red-50/50 border-b border-red-100'}`}>
+                      <span className={`px-3 py-1 rounded-full text-sm font-medium ${
+                        isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                      }`}>
+                        {getModeLabel(compareResult.leftMode)}
+                      </span>
+                    </div>
+                    <div className="p-5">
+                      <p className={`whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                        {compareResult.leftContent}
+                      </p>
+                    </div>
+                  </div>
+                  <div className={`rounded-2xl border overflow-hidden ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                    <div className={`px-4 py-3 ${isDark ? 'bg-slate-800/50 border-b border-slate-700/50' : 'bg-purple-50/50 border-b border-purple-100'}`}>
+                      <span className={`px-3 py-1 rounded-full text-sm font-medium ${
+                        isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
+                      }`}>
+                        {getModeLabel(compareResult.rightMode)}
+                      </span>
+                    </div>
+                    <div className="p-5">
+                      <p className={`whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                        {compareResult.rightContent}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div className="space-y-6">
+                  <div className={`rounded-2xl border overflow-hidden ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                    <div className={`px-4 py-3 ${isDark ? 'bg-slate-800/50 border-b border-slate-700/50' : 'bg-red-50/50 border-b border-red-100'}`}>
+                      <span className={`px-3 py-1 rounded-full text-sm font-medium ${
+                        isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                      }`}>
+                        {getModeLabel(compareResult.leftMode)}
+                      </span>
+                    </div>
+                    <div className="p-5">
+                      <p className={`whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                        {compareResult.leftContent}
+                      </p>
+                    </div>
+                  </div>
+                  <div className={`rounded-2xl border overflow-hidden ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
+                    <div className={`px-4 py-3 ${isDark ? 'bg-slate-800/50 border-b border-slate-700/50' : 'bg-purple-50/50 border-b border-purple-100'}`}>
+                      <span className={`px-3 py-1 rounded-full text-sm font-medium ${
+                        isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
+                      }`}>
+                        {getModeLabel(compareResult.rightMode)}
+                      </span>
+                    </div>
+                    <div className="p-5">
+                      <p className={`whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                        {compareResult.rightContent}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              )
+            ) : (
+              <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                <GitCompare className="w-16 h-16 mb-4 opacity-50" />
+                <p className="text-lg">对比模式</p>
+                <p className="text-sm mt-2">输入问题，对比不同模式的回答效果</p>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* 新建问答确认对话框 */}
+        {showNewQADialog && (
+          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+            <div className={`w-96 rounded-2xl shadow-2xl overflow-hidden ${
+              isDark ? 'bg-slate-800' : 'bg-white'
+            }`}>
+              <div className={`px-6 py-5 border-b ${isDark ? 'border-slate-700' : 'border-gray-100'}`}>
+                <div className="flex items-center gap-4">
+                  <div className={`w-12 h-12 rounded-full flex items-center justify-center ${
+                    isDark ? 'bg-amber-600/30 text-amber-400' : 'bg-amber-100 text-amber-600'
+                  }`}>
+                    <AlertCircle className="w-6 h-6" />
+                  </div>
+                  <div>
+                    <div className={`text-lg font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                      是否保存当前会话？
+                    </div>
+                    <div className={`text-sm mt-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                      当前有 {messages.length} 条对话记录
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="p-5 space-y-3">
+                <button
+                  onClick={handleSaveAndNewQA}
+                  className={`w-full flex items-center justify-center gap-2 px-4 py-3.5 rounded-xl text-sm font-medium transition-all ${
+                    isDark
+                      ? 'bg-blue-600 hover:bg-blue-700 text-white'
+                      : 'bg-red-500 hover:bg-red-600 text-white'
+                  }`}
+                >
+                  <Bookmark className="w-4 h-4" />
+                  保存并新建
+                </button>
+                <button
+                  onClick={performNewQA}
+                  className={`w-full flex items-center justify-center gap-2 px-4 py-3.5 rounded-xl text-sm font-medium transition-all ${
+                    isDark
+                      ? 'bg-slate-700 hover:bg-slate-600 text-white'
+                      : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
+                  }`}
+                >
+                  <X className="w-4 h-4" />
+                  直接新建（不保存）
+                </button>
+                <button
+                  onClick={() => setShowNewQADialog(false)}
+                  className={`w-full flex items-center justify-center gap-2 px-4 py-3.5 rounded-xl text-sm font-medium transition-all ${
+                    isDark
+                      ? 'bg-transparent hover:bg-slate-700/50 text-slate-400'
+                      : 'bg-transparent hover:bg-gray-50 text-gray-500'
+                  }`}
+                >
+                  取消
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 底部输入区 - 仅在非多智能体模式显示 */}
+        {qaProvider !== 'multi-agent' && (
+          <div className={`p-4 border-t ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+            <div className={`flex items-end gap-3 rounded-2xl p-4 ${isDark ? 'bg-slate-700/50' : 'bg-gray-100'}`}>
+              <textarea
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder={
+                  viewMode === 'compare'
+                    ? '输入问题进行对比分析...'
+                    : '输入你的问题...'
+                }
+                rows={1}
+                className={`flex-1 bg-transparent resize-none focus:outline-none text-base ${
+                  isDark ? 'text-white placeholder-slate-500' : 'text-gray-800 placeholder-gray-400'
+                }`}
+              />
+
+              <div className="flex items-center gap-2">
+                <button className={`p-2.5 rounded-xl transition-colors ${
+                  isDark ? 'hover:bg-slate-600 text-slate-400 hover:text-white' : 'hover:bg-gray-200 text-gray-500'
+                }`}>
+                  <Upload className="w-5 h-5" />
+                </button>
+
+                <button
+                  onClick={() => {
+                    setMessages([]);
+                    setCompareResult(null);
+                  }}
+                  className={`p-2.5 rounded-xl transition-colors ${
+                    isDark ? 'hover:bg-slate-600 text-slate-400 hover:text-white' : 'hover:bg-gray-200 text-gray-500'
+                  }`}
+                  title="重新提问"
+                >
+                  <RotateCcw className="w-5 h-5" />
+                </button>
+
+                <button
+                  onClick={handleSaveRecord}
+                  className={`p-2.5 rounded-xl transition-colors ${
+                    isDark ? 'hover:bg-slate-600 text-slate-400 hover:text-white' : 'hover:bg-gray-200 text-gray-500'
+                  }`}
+                  title="保存记录"
+                >
+                  <Bookmark className="w-5 h-5" />
+                </button>
+
+                <button
+                  onClick={
+                    viewMode === 'compare'
+                      ? handleCompare
+                      : handleSend
+                  }
+                  disabled={!inputValue.trim() || isLoading}
+                  className={`px-5 py-2.5 rounded-xl font-medium transition-all flex items-center gap-2 ${
+                    inputValue.trim() && !isLoading
+                      ? isDark
+                        ? 'bg-blue-600 hover:bg-blue-700 text-white'
+                        : 'bg-red-500 hover:bg-red-600 text-white'
+                      : isDark
+                        ? 'bg-slate-600 text-slate-400'
+                        : 'bg-gray-300 text-gray-500'
+                  }`}
+                >
+                  <Send className="w-4 h-4" />
+                  发送
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 自定义滚动条样式 */}
+      <style>{`
+        .custom-scrollbar::-webkit-scrollbar {
+          width: 6px;
+          height: 6px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+          background: ${isDark ? 'rgba(148, 163, 184, 0.3)' : 'rgba(0, 0, 0, 0.15)'};
+          border-radius: 3px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+          background: ${isDark ? 'rgba(148, 163, 184, 0.5)' : 'rgba(0, 0, 0, 0.25)'};
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default QA;
diff --git a/web-code/pages/QARecords.tsx b/web-code/pages/QARecords.tsx
new file mode 100644
index 00000000..dc0946f7
--- /dev/null
+++ b/web-code/pages/QARecords.tsx
@@ -0,0 +1,758 @@
+import React, { useState } from 'react';
+import {
+  Search,
+  Bookmark,
+  BookmarkCheck,
+  Copy,
+  Download,
+  MessageSquare,
+  Bot,
+  History,
+  Calendar,
+  Filter,
+  ChevronDown,
+  GitCompare,
+  FileText,
+  ArrowRight,
+  X,
+  Star,
+  CheckCircle,
+  AlertCircle,
+  Send,
+} from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+import { PageType } from '../components/Sidebar';
+
+type RecordType = 'all' | 'general' | 'agent';
+type ModeType = 'all' | 'single-round' | 'multi-round' | 'deep-search' | 'compare';
+type CollectionStatus = 'all' | 'collected';
+
+interface QARecord {
+  id: string;
+  type: 'general' | 'agent';
+  mode: 'single-round' | 'multi-round' | 'deep-search' | 'compare';
+  question: string;
+  answer: string;
+  agentName?: string;
+  createTime: Date;
+  isCollected: boolean;
+  isHighValue: boolean;
+  isReusable: boolean;
+  isConvertible: boolean;
+  notes?: string;
+  evaluation?: string;
+  sources?: string[];
+}
+
+const QARecords: React.FC<{ onNavigate: (page: PageType) => void }> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 模拟问答记录数据
+  const mockRecords: QARecord[] = [
+    {
+      id: '1',
+      type: 'general',
+      mode: 'compare',
+      question: 'RAG技术的工作原理是什么？',
+      answer: '单轮RAG回答：直接检索并生成答案，响应速度快...',
+      createTime: new Date('2026-03-19 14:30'),
+      isCollected: true,
+      isHighValue: true,
+      isReusable: true,
+      isConvertible: true,
+      sources: ['RAG技术白皮书', 'LLM应用实践'],
+    },
+    {
+      id: '2',
+      type: 'agent',
+      mode: 'single-round',
+      question: '目标受众应如何分层？',
+      answer: '基于受众分析智能体的专业能力，识别出核心受众特征...',
+      agentName: 'AudienceAgent',
+      createTime: new Date('2026-03-19 10:20'),
+      isCollected: false,
+      isHighValue: true,
+      isReusable: true,
+      isConvertible: true,
+    },
+    {
+      id: '3',
+      type: 'general',
+      mode: 'deep-search',
+      question: '品牌年轻化传播策略有哪些？',
+      answer: '通过深度检索分析，总结出以下品牌年轻化传播策略...',
+      createTime: new Date('2026-03-18 16:45'),
+      isCollected: true,
+      isHighValue: false,
+      isReusable: false,
+      isConvertible: false,
+      notes: '需要进一步补充具体案例',
+    },
+    {
+      id: '4',
+      type: 'agent',
+      mode: 'multi-round',
+      question: '如何制定有效的用户激活策略？',
+      answer: '通过多轮对话深入分析，制定以下用户激活策略...',
+      agentName: 'ChannelAgent',
+      createTime: new Date('2026-03-18 11:15'),
+      isCollected: false,
+      isHighValue: true,
+      isReusable: true,
+      isConvertible: true,
+      evaluation: '策略实用性强，建议转化任务执行',
+    },
+    {
+      id: '5',
+      type: 'general',
+      mode: 'single-round',
+      question: '内容营销的最佳实践是什么？',
+      answer: '内容营销最佳实践包括：明确目标受众、创造高质量内容...',
+      createTime: new Date('2026-03-17 09:00'),
+      isCollected: false,
+      isHighValue: false,
+      isReusable: true,
+      isConvertible: false,
+    },
+  ];
+
+  // 状态
+  const [records, setRecords] = useState<QARecord[]>(mockRecords);
+  const [selectedRecord, setSelectedRecord] = useState<QARecord | null>(mockRecords[0]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [recordType, setRecordType] = useState<RecordType>('all');
+  const [modeType, setModeType] = useState<ModeType>('all');
+  const [collectionStatus, setCollectionStatus] = useState<CollectionStatus>('all');
+  const [timeRange, setTimeRange] = useState('all');
+  const [notesInput, setNotesInput] = useState('');
+
+  // 筛选记录
+  const filteredRecords = records.filter((record) => {
+    // 搜索过滤
+    if (searchQuery && !record.question.toLowerCase().includes(searchQuery.toLowerCase())) {
+      return false;
+    }
+    // 类型过滤
+    if (recordType !== 'all' && record.type !== recordType) {
+      return false;
+    }
+    // 模式过滤
+    if (modeType !== 'all' && record.mode !== modeType) {
+      return false;
+    }
+    // 收藏状态过滤
+    if (collectionStatus === 'collected' && !record.isCollected) {
+      return false;
+    }
+    return true;
+  });
+
+  // 获取模式标签
+  const getModeLabel = (mode: QARecord['mode']) => {
+    switch (mode) {
+      case 'single-round': return '单轮RAG';
+      case 'multi-round': return '多轮RAG';
+      case 'deep-search': return '深度检索';
+      case 'compare': return '对比';
+    }
+  };
+
+  // 获取模式颜色
+  const getModeColor = (mode: QARecord['mode']) => {
+    switch (mode) {
+      case 'single-round':
+        return isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600';
+      case 'multi-round':
+        return isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-600';
+      case 'deep-search':
+        return isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600';
+      case 'compare':
+        return isDark ? 'bg-orange-600/30 text-orange-400' : 'bg-orange-100 text-orange-600';
+    }
+  };
+
+  // 切换收藏
+  const toggleCollect = (recordId: string) => {
+    setRecords(records.map(record =>
+      record.id === recordId ? { ...record, isCollected: !record.isCollected } : record
+    ));
+    if (selectedRecord?.id === recordId) {
+      setSelectedRecord({ ...selectedRecord, isCollected: !selectedRecord.isCollected });
+    }
+  };
+
+  // 复制问题
+  const copyQuestion = (question: string) => {
+    navigator.clipboard.writeText(question);
+    alert('问题已复制');
+  };
+
+  // 导出记录
+  const exportRecord = (record: QARecord) => {
+    alert(`导出记录: ${record.question.substring(0, 20)}...`);
+  };
+
+  // 转到任务
+  const convertToTask = (record: QARecord, taskType: 'single' | 'consult' | 'scene') => {
+    const messages = {
+      single: '单智能体任务',
+      consult: '多智能体会商',
+      scene: '场景任务',
+    };
+    alert(`已转为${messages[taskType]}`);
+  };
+
+  // 格式化时间
+  const formatTime = (date: Date) => {
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+
+    if (days === 0) {
+      return `今天 ${date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`;
+    } else if (days === 1) {
+      return `昨天 ${date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`;
+    } else if (days < 7) {
+      return `${days}天前`;
+    } else {
+      return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });
+    }
+  };
+
+  return (
+    <div className={`h-[calc(100vh-120px)] flex flex-col theme-bg rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+      {/* 顶部筛选栏 */}
+      <div className={`flex items-center justify-between px-6 py-4 border-b ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+        <div className="flex items-center gap-4">
+          <h1 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+            问答记录
+          </h1>
+          <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+            查看历史问答、对比结果与高价值记录
+          </span>
+        </div>
+
+        {/* 筛选控件 */}
+        <div className="flex items-center gap-3">
+          {/* 搜索框 */}
+          <div className={`relative ${isDark ? 'bg-slate-700/50' : 'bg-gray-100'} rounded-lg`}>
+            <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="搜索问题关键词..."
+              className={`w-64 pl-10 pr-4 py-2 rounded-lg text-sm focus:outline-none ${
+                isDark
+                  ? 'bg-transparent text-white placeholder-slate-500'
+                  : 'bg-transparent text-gray-800 placeholder-gray-400'
+              }`}
+            />
+          </div>
+
+          {/* 记录类型 */}
+          <div className="relative">
+            <select
+              value={recordType}
+              onChange={(e) => setRecordType(e.target.value as RecordType)}
+              className={`appearance-none px-4 py-2 pr-10 rounded-lg text-sm cursor-pointer ${
+                isDark
+                  ? 'bg-slate-700/50 text-slate-300 border border-slate-600'
+                  : 'bg-gray-100 text-gray-700 border border-gray-200'
+              }`}
+            >
+              <option value="all">全部类型</option>
+              <option value="general">通用问答</option>
+              <option value="agent">智能体问答</option>
+            </select>
+            <ChevronDown className={`absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none ${
+              isDark ? 'text-slate-400' : 'text-gray-400'
+            }`} />
+          </div>
+
+          {/* 模式 */}
+          <div className="relative">
+            <select
+              value={modeType}
+              onChange={(e) => setModeType(e.target.value as ModeType)}
+              className={`appearance-none px-4 py-2 pr-10 rounded-lg text-sm cursor-pointer ${
+                isDark
+                  ? 'bg-slate-700/50 text-slate-300 border border-slate-600'
+                  : 'bg-gray-100 text-gray-700 border border-gray-200'
+              }`}
+            >
+              <option value="all">全部模式</option>
+              <option value="single-round">单轮RAG</option>
+              <option value="multi-round">多轮RAG</option>
+              <option value="deep-search">深度检索</option>
+              <option value="compare">对比记录</option>
+            </select>
+            <ChevronDown className={`absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none ${
+              isDark ? 'text-slate-400' : 'text-gray-400'
+            }`} />
+          </div>
+
+          {/* 收藏状态 */}
+          <div className="relative">
+            <select
+              value={collectionStatus}
+              onChange={(e) => setCollectionStatus(e.target.value as CollectionStatus)}
+              className={`appearance-none px-4 py-2 pr-10 rounded-lg text-sm cursor-pointer ${
+                isDark
+                  ? 'bg-slate-700/50 text-slate-300 border border-slate-600'
+                  : 'bg-gray-100 text-gray-700 border border-gray-200'
+              }`}
+            >
+              <option value="all">全部</option>
+              <option value="collected">已收藏</option>
+            </select>
+            <ChevronDown className={`absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none ${
+              isDark ? 'text-slate-400' : 'text-gray-400'
+            }`} />
+          </div>
+
+          {/* 时间范围 */}
+          <div className="relative">
+            <select
+              value={timeRange}
+              onChange={(e) => setTimeRange(e.target.value)}
+              className={`appearance-none px-4 py-2 pr-10 rounded-lg text-sm cursor-pointer ${
+                isDark
+                  ? 'bg-slate-700/50 text-slate-300 border border-slate-600'
+                  : 'bg-gray-100 text-gray-700 border border-gray-200'
+              }`}
+            >
+              <option value="all">全部时间</option>
+              <option value="today">今天</option>
+              <option value="week">本周</option>
+              <option value="month">本月</option>
+            </select>
+            <ChevronDown className={`absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none ${
+              isDark ? 'text-slate-400' : 'text-gray-400'
+            }`} />
+          </div>
+        </div>
+      </div>
+
+      {/* 主体内容区 */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* 左侧记录列表 */}
+        <div className={`w-80 border-r flex-shrink-0 overflow-y-auto ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+          <div className="p-4">
+            <div className="space-y-2">
+              {filteredRecords.map((record) => (
+                <button
+                  key={record.id}
+                  onClick={() => {
+                    setSelectedRecord(record);
+                    setNotesInput(record.notes || '');
+                  }}
+                  className={`w-full text-left p-3 rounded-lg transition-all ${
+                    selectedRecord?.id === record.id
+                      ? isDark
+                        ? 'bg-blue-600/20 border border-blue-500/50'
+                        : 'bg-red-50 border border-red-200'
+                      : isDark
+                        ? 'bg-slate-700/30 border border-transparent hover:bg-slate-700/50'
+                        : 'bg-white border border-gray-200 hover:bg-gray-50'
+                  }`}
+                >
+                  <div className="flex items-start gap-2 mb-2">
+                    <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${
+                      record.type === 'general'
+                        ? isDark
+                          ? 'bg-blue-600/30 text-blue-400'
+                          : 'bg-blue-100 text-blue-600'
+                        : isDark
+                          ? 'bg-purple-600/30 text-purple-400'
+                          : 'bg-purple-100 text-purple-600'
+                    }`}>
+                      {record.type === 'general' ? '通用问答' : '智能体'}
+                    </span>
+                    <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${getModeColor(record.mode)}`}>
+                      {getModeLabel(record.mode)}
+                    </span>
+                    {record.isCollected && (
+                      <BookmarkCheck className={`w-3.5 h-3.5 ${isDark ? 'text-yellow-400' : 'text-yellow-500'}`} />
+                    )}
+                  </div>
+
+                  <p className={`text-sm line-clamp-2 ${isDark ? 'text-slate-200' : 'text-gray-800'}`}>
+                    {record.question}
+                  </p>
+
+                  <div className={`flex items-center gap-2 mt-2 text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                    <Calendar className="w-3 h-3" />
+                    <span>{formatTime(record.createTime)}</span>
+                    {record.agentName && (
+                      <>
+                        <span>·</span>
+                        <Bot className="w-3 h-3" />
+                        <span>{record.agentName}</span>
+                      </>
+                    )}
+                  </div>
+
+                  {/* 标签 */}
+                  <div className="flex items-center gap-1 mt-2">
+                    {record.isHighValue && (
+                      <span className={`px-1.5 py-0.5 rounded text-xs ${
+                        isDark ? 'bg-yellow-600/30 text-yellow-400' : 'bg-yellow-100 text-yellow-600'
+                      }`}>
+                        高价值
+                      </span>
+                    )}
+                    {record.isReusable && (
+                      <span className={`px-1.5 py-0.5 rounded text-xs ${
+                        isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-600'
+                      }`}>
+                        可复用
+                      </span>
+                    )}
+                    {record.isConvertible && (
+                      <span className={`px-1.5 py-0.5 rounded text-xs ${
+                        isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                      }`}>
+                        可转任务
+                      </span>
+                    )}
+                  </div>
+                </button>
+              ))}
+            </div>
+
+            {filteredRecords.length === 0 && (
+              <div className={`text-center py-8 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                <History className="w-12 h-12 mx-auto mb-3 opacity-50" />
+                <p>暂无匹配记录</p>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* 中间记录详情 */}
+        <div className="flex-1 overflow-y-auto p-6">
+          {selectedRecord ? (
+            <div className="max-w-3xl mx-auto">
+              {/* 问题 */}
+              <div className={`p-4 rounded-xl mb-4 ${isDark ? 'bg-slate-700/50' : 'bg-gray-50'}`}>
+                <div className="flex items-center gap-2 mb-2">
+                  <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${
+                    isDark ? 'bg-slate-600 text-slate-300' : 'bg-gray-200 text-gray-600'
+                  }`}>
+                    问题
+                  </span>
+                </div>
+                <p className={`text-lg ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                  {selectedRecord.question}
+                </p>
+              </div>
+
+              {/* 回答 */}
+              <div className={`p-4 rounded-xl mb-4 ${isDark ? 'bg-slate-700/50' : 'bg-gray-50'}`}>
+                <div className="flex items-center gap-2 mb-2">
+                  <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${
+                    isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
+                  }`}>
+                    {selectedRecord.type === 'general' ? 'RAG回答' : '智能体回答'}
+                  </span>
+                  <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${getModeColor(selectedRecord.mode)}`}>
+                    {getModeLabel(selectedRecord.mode)}
+                  </span>
+                  {selectedRecord.agentName && (
+                    <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${
+                      isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
+                    }`}>
+                      {selectedRecord.agentName}
+                    </span>
+                  )}
+                </div>
+                <p className={`whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                  {selectedRecord.answer}
+                </p>
+              </div>
+
+              {/* 来源摘要 */}
+              {selectedRecord.sources && selectedRecord.sources.length > 0 && (
+                <div className={`p-4 rounded-xl mb-4 ${isDark ? 'bg-slate-700/50' : 'bg-gray-50'}`}>
+                  <div className="flex items-center gap-2 mb-2">
+                    <FileText className={`w-4 h-4 ${isDark ? 'text-slate-400' : 'text-gray-500'}`} />
+                    <span className={`text-sm font-medium ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      来源摘要
+                    </span>
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    {selectedRecord.sources.map((source, idx) => (
+                      <span
+                        key={idx}
+                        className={`px-3 py-1 rounded-lg text-sm ${
+                          isDark ? 'bg-slate-600/50 text-slate-300' : 'bg-white text-gray-600 border border-gray-200'
+                        }`}
+                      >
+                        {source}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* 评价 */}
+              {selectedRecord.evaluation && (
+                <div className={`p-4 rounded-xl mb-4 ${isDark ? 'bg-yellow-600/20 border border-yellow-600/30' : 'bg-yellow-50 border border-yellow-200'}`}>
+                  <div className="flex items-center gap-2 mb-2">
+                    <Star className={`w-4 h-4 ${isDark ? 'text-yellow-400' : 'text-yellow-500'}`} />
+                    <span className={`text-sm font-medium ${isDark ? 'text-yellow-400' : 'text-yellow-700'}`}>
+                      人工评价
+                    </span>
+                  </div>
+                  <p className={`text-sm ${isDark ? 'text-yellow-300' : 'text-yellow-700'}`}>
+                    {selectedRecord.evaluation}
+                  </p>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+              <MessageSquare className="w-16 h-16 mb-4 opacity-50" />
+              <p className="text-lg">选择一条记录查看详情</p>
+            </div>
+          )}
+        </div>
+
+        {/* 右侧操作与标签区 */}
+        <div className={`w-72 border-l flex-shrink-0 overflow-y-auto p-4 ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'}`}>
+          {selectedRecord ? (
+            <>
+              {/* 记录标签 */}
+              <div className="mb-6">
+                <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                  记录标签
+                </h3>
+                <div className="space-y-2">
+                  <button
+                    onClick={() => toggleCollect(selectedRecord.id)}
+                    className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all ${
+                      selectedRecord.isCollected
+                        ? isDark
+                          ? 'bg-yellow-600/20 border border-yellow-600/50'
+                          : 'bg-yellow-50 border border-yellow-200'
+                        : isDark
+                          ? 'bg-slate-700/50 border border-transparent hover:bg-slate-600/50'
+                          : 'bg-white border border-gray-200 hover:bg-gray-50'
+                    }`}
+                  >
+                    {selectedRecord.isCollected ? (
+                      <BookmarkCheck className={`w-5 h-5 ${isDark ? 'text-yellow-400' : 'text-yellow-500'}`} />
+                    ) : (
+                      <Bookmark className={`w-5 h-5 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
+                    )}
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      {selectedRecord.isCollected ? '已收藏' : '收藏'}
+                    </span>
+                  </button>
+
+                  <button
+                    className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all ${
+                      selectedRecord.isHighValue
+                        ? isDark
+                          ? 'bg-yellow-600/20 border border-yellow-600/50'
+                          : 'bg-yellow-50 border border-yellow-200'
+                        : isDark
+                          ? 'bg-slate-700/50 border border-transparent hover:bg-slate-600/50'
+                          : 'bg-white border border-gray-200 hover:bg-gray-50'
+                    }`}
+                  >
+                    <Star className={`w-5 h-5 ${selectedRecord.isHighValue ? (isDark ? 'text-yellow-400' : 'text-yellow-500') : (isDark ? 'text-slate-400' : 'text-gray-400')}`} />
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      高价值
+                    </span>
+                  </button>
+
+                  <button
+                    className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all ${
+                      selectedRecord.isReusable
+                        ? isDark
+                          ? 'bg-green-600/20 border border-green-600/50'
+                          : 'bg-green-50 border border-green-200'
+                        : isDark
+                          ? 'bg-slate-700/50 border border-transparent hover:bg-slate-600/50'
+                          : 'bg-white border border-gray-200 hover:bg-gray-50'
+                    }`}
+                  >
+                    <Copy className={`w-5 h-5 ${selectedRecord.isReusable ? (isDark ? 'text-green-400' : 'text-green-500') : (isDark ? 'text-slate-400' : 'text-gray-400')}`} />
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      可复用
+                    </span>
+                  </button>
+
+                  <button
+                    className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all ${
+                      selectedRecord.isConvertible
+                        ? isDark
+                          ? 'bg-blue-600/20 border border-blue-600/50'
+                          : 'bg-blue-50 border border-blue-200'
+                        : isDark
+                          ? 'bg-slate-700/50 border border-transparent hover:bg-slate-600/50'
+                          : 'bg-white border border-gray-200 hover:bg-gray-50'
+                    }`}
+                  >
+                    <ArrowRight className={`w-5 h-5 ${selectedRecord.isConvertible ? (isDark ? 'text-blue-400' : 'text-blue-500') : (isDark ? 'text-slate-400' : 'text-gray-400')}`} />
+                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                      可转任务
+                    </span>
+                  </button>
+                </div>
+              </div>
+
+              {/* 操作按钮 */}
+              <div className="mb-6">
+                <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                  操作
+                </h3>
+                <div className="space-y-2">
+                  <button
+                    onClick={() => toggleCollect(selectedRecord.id)}
+                    className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all ${
+                      isDark
+                        ? 'bg-slate-700/50 hover:bg-slate-600/50 text-slate-300'
+                        : 'bg-white hover:bg-gray-50 text-gray-700 border border-gray-200'
+                    }`}
+                  >
+                    {selectedRecord.isCollected ? (
+                      <>
+                        <BookmarkCheck className="w-5 h-5 text-yellow-500" />
+                        <span className="text-sm">取消收藏</span>
+                      </>
+                    ) : (
+                      <>
+                        <Bookmark className="w-5 h-5" />
+                        <span className="text-sm">收藏</span>
+                      </>
+                    )}
+                  </button>
+
+                  <button
+                    onClick={() => exportRecord(selectedRecord)}
+                    className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all ${
+                      isDark
+                        ? 'bg-slate-700/50 hover:bg-slate-600/50 text-slate-300'
+                        : 'bg-white hover:bg-gray-50 text-gray-700 border border-gray-200'
+                    }`}
+                  >
+                    <Download className="w-5 h-5" />
+                    <span className="text-sm">导出</span>
+                  </button>
+
+                  <button
+                    onClick={() => copyQuestion(selectedRecord.question)}
+                    className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all ${
+                      isDark
+                        ? 'bg-slate-700/50 hover:bg-slate-600/50 text-slate-300'
+                        : 'bg-white hover:bg-gray-50 text-gray-700 border border-gray-200'
+                    }`}
+                  >
+                    <Copy className="w-5 h-5" />
+                    <span className="text-sm">复制问题</span>
+                  </button>
+                </div>
+              </div>
+
+              {/* 转任务 */}
+              {selectedRecord.isConvertible && (
+                <div className="mb-6">
+                  <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                    转为任务
+                  </h3>
+                  <div className="space-y-2">
+                    <button
+                      onClick={() => convertToTask(selectedRecord, 'single')}
+                      className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all ${
+                        isDark
+                          ? 'bg-blue-600/20 hover:bg-blue-600/30 text-blue-400 border border-blue-600/50'
+                          : 'bg-blue-50 hover:bg-blue-100 text-blue-600 border border-blue-200'
+                      }`}
+                    >
+                      <Bot className="w-5 h-5" />
+                      <span className="text-sm flex-1 text-left">转单智能体任务</span>
+                      <ArrowRight className="w-4 h-4" />
+                    </button>
+
+                    <button
+                      onClick={() => convertToTask(selectedRecord, 'consult')}
+                      className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all ${
+                        isDark
+                          ? 'bg-purple-600/20 hover:bg-purple-600/30 text-purple-400 border border-purple-600/50'
+                          : 'bg-purple-50 hover:bg-purple-100 text-purple-600 border border-purple-200'
+                      }`}
+                    >
+                      <MessageSquare className="w-5 h-5" />
+                      <span className="text-sm flex-1 text-left">转多智能体会商</span>
+                      <ArrowRight className="w-4 h-4" />
+                    </button>
+
+                    <button
+                      onClick={() => convertToTask(selectedRecord, 'scene')}
+                      className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all ${
+                        isDark
+                          ? 'bg-green-600/20 hover:bg-green-600/30 text-green-400 border border-green-600/50'
+                          : 'bg-green-50 hover:bg-green-100 text-green-600 border border-green-200'
+                      }`}
+                    >
+                      <GitCompare className="w-5 h-5" />
+                      <span className="text-sm flex-1 text-left">转场景任务</span>
+                      <ArrowRight className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {/* 备注 */}
+              <div>
+                <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
+                  备注
+                </h3>
+                <textarea
+                  value={notesInput}
+                  onChange={(e) => setNotesInput(e.target.value)}
+                  placeholder="添加人工评价或后续处理建议..."
+                  rows={4}
+                  className={`w-full p-3 rounded-lg text-sm resize-none focus:outline-none ${
+                    isDark
+                      ? 'bg-slate-700/50 text-slate-300 placeholder-slate-500 border border-slate-600'
+                      : 'bg-white text-gray-700 placeholder-gray-400 border border-gray-200'
+                  }`}
+                />
+                {notesInput !== (selectedRecord.notes || '') && (
+                  <button
+                    onClick={() => {
+                      setRecords(records.map(r =>
+                        r.id === selectedRecord.id ? { ...r, notes: notesInput } : r
+                      ));
+                      setSelectedRecord({ ...selectedRecord, notes: notesInput });
+                      alert('备注已保存');
+                    }}
+                    className={`w-full mt-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+                      isDark
+                        ? 'bg-blue-600 hover:bg-blue-700 text-white'
+                        : 'bg-red-500 hover:bg-red-600 text-white'
+                    }`}
+                  >
+                    保存备注
+                  </button>
+                )}
+              </div>
+            </>
+          ) : (
+            <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+              <MessageSquare className="w-12 h-12 mb-3 opacity-50" />
+              <p className="text-sm">选择记录后可操作</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default QARecords;
diff --git a/web-code/pages/ResultDetail.tsx b/web-code/pages/ResultDetail.tsx
new file mode 100644
index 00000000..82e11ddb
--- /dev/null
+++ b/web-code/pages/ResultDetail.tsx
@@ -0,0 +1,543 @@
+import React, { useState } from 'react';
+import {
+  FileText,
+  ArrowLeft,
+  ArrowRight,
+  Download,
+  Edit3,
+  Send,
+  CheckCircle,
+  Clock,
+  Bot,
+  Target,
+  Users,
+  TrendingUp,
+  MessageSquare,
+  Megaphone,
+  Shield,
+  ChevronDown,
+  ChevronRight,
+  RefreshCw,
+  MoreHorizontal,
+  Share2,
+  Printer,
+  History,
+  AlertCircle,
+  Check,
+  X,
+} from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+import { PageType } from '../components/Sidebar';
+
+interface ResultDetailProps {
+  taskId?: string;
+  onNavigate: (page: PageType, taskId?: string) => void;
+  onBack?: () => void;
+}
+
+// 模拟任务详情数据
+const mockTaskDetail = {
+  id: 'task-001',
+  title: '五四青年节宣传活动策略',
+  category: '规划任务',
+  subCategory: '叙事策略',
+  status: 'completed',
+  createdAt: '2026-03-19 10:30',
+  updatedAt: '2026-03-19 15:30',
+  completedAt: '2026-03-19 15:30',
+  reportType: 'strategy',
+  agentCount: 6,
+  description: '针对五四青年节的品牌传播策略方案',
+  scene: '宣传策略生成',
+  duration: '5小时32分',
+  conclusion: {
+    main: '五四青年节宣传活动应聚焦"真实、有态度的青年故事"这一叙事方向，以18-25岁基层青年为核心受众，优先在短视频平台建立品牌认知。',
+    recommended: [
+      '以真实人物故事为核心叙事内容',
+      '采用平等对话而非说教式的传播语气',
+      '优先布局抖音、小红书等短视频平台',
+      '建立UGC激励机制促进用户参与',
+    ],
+    notRecommended: [
+      '过度包装的精致化内容',
+      '单向输出的宣传式传播',
+      '纯文字为主的长图文形式',
+    ],
+    pendingIssues: [
+      '叙事角度：事件叙事 vs 人物叙事（待进一步验证）',
+      '渠道策略：短视频为主 vs 社交媒体为主',
+      '预算在内容制作和达人投放的分配比例',
+    ],
+  },
+  strategyChain: [
+    { id: 1, name: '目标', icon: Target, color: 'blue', status: 'completed', result: '提升品牌在Z世代用户中的认知度' },
+    { id: 2, name: '受众', icon: Users, color: 'cyan', status: 'completed', result: '18-25岁基层青年' },
+    { id: 3, name: '行为', icon: TrendingUp, color: 'green', status: 'completed', result: '主动参与话题讨论、生成UGC内容' },
+    { id: 4, name: '驱动', icon: MessageSquare, color: 'yellow', status: 'completed', result: '社交认同与自我表达' },
+    { id: 5, name: '叙事', icon: Megaphone, color: 'purple', status: 'completed', result: '真实、有态度的青年故事' },
+    { id: 6, name: '风险', icon: Shield, color: 'red', status: 'completed', result: 'UGC质量不稳定、话题热度维持' },
+  ],
+  versionHistory: [
+    { version: 'V3', time: '2026-03-19 15:30', changes: ['叙事由"事件主导"改为"人物+事件结合"', '风险项已修正'] },
+    { version: 'V2', time: '2026-03-19 14:20', changes: ['受众由"全体青年"收窄为"基层青年"', '目标行为已明确'] },
+    { version: 'V1', time: '2026-03-19 10:30', changes: ['初始版本生成'] },
+  ],
+  agentOpinions: [
+    { agentName: 'GoalAgent', role: '目标分析专家', opinion: '建议聚焦提升品牌认知度这一核心目标，短期内不追求直接转化', adopted: true, color: 'blue' },
+    { agentName: 'AudienceAgent', role: '受众分析专家', opinion: '核心受众应为18-25岁基层青年群体，注重"真实感"和"态度感"', adopted: true, color: 'cyan' },
+    { agentName: 'NarrativeAgent', role: '叙事策略专家', opinion: '应采用"真实、有态度的青年故事"叙事框架', adopted: true, color: 'purple' },
+    { agentName: 'RiskAgent', role: '风险评估专家', opinion: '需注意UGC质量不稳定和话题热度维持的风险', adopted: true, color: 'red' },
+  ],
+  disputes: [
+    {
+      issue: '叙事角度选择',
+      description: '人物叙事 vs 事件叙事',
+      viewpoints: [
+        { agent: 'NarrativeAgent', opinion: '人物叙事更有情感穿透力' },
+        { agent: 'GoalAgent', opinion: '事件叙事更聚焦目标达成' },
+      ],
+      status: '待确认',
+    },
+  ],
+};
+
+const ResultDetail: React.FC<ResultDetailProps> = ({ taskId, onNavigate, onBack }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 主题颜色类
+  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
+  const cardBorder = isDark ? 'border-blue-800/30' : 'border-gray-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const textMuted = isDark ? 'text-slate-500' : 'text-gray-500';
+  const btnPrimary = isDark ? 'bg-blue-600 hover:bg-blue-500' : 'bg-red-600 hover:bg-red-500';
+  const btnSecondary = isDark ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300' : 'bg-gray-100 hover:bg-gray-200 border-gray-300 text-gray-700';
+  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-gray-50';
+
+  const [activeTab, setActiveTab] = useState<'conclusion' | 'process' | 'opinions' | 'history'>('conclusion');
+  const [expandedSection, setExpandedSection] = useState<string | null>('goal');
+  const [showReportMenu, setShowReportMenu] = useState(false);
+
+  const task = mockTaskDetail;
+
+  const toggleSection = (section: string) => {
+    setExpandedSection(expandedSection === section ? null : section);
+  };
+
+  const getColorClasses = (color: string) => {
+    const colors: Record<string, { bg: string; text: string }> = {
+      blue: { bg: isDark ? 'bg-blue-500/20' : 'bg-blue-50', text: isDark ? 'text-blue-400' : 'text-blue-600' },
+      cyan: { bg: isDark ? 'bg-cyan-500/20' : 'bg-cyan-50', text: isDark ? 'text-cyan-400' : 'text-cyan-600' },
+      green: { bg: isDark ? 'bg-green-500/20' : 'bg-green-50', text: isDark ? 'text-green-400' : 'text-green-600' },
+      yellow: { bg: isDark ? 'bg-yellow-500/20' : 'bg-yellow-50', text: isDark ? 'text-yellow-400' : 'text-yellow-600' },
+      purple: { bg: isDark ? 'bg-purple-500/20' : 'bg-purple-50', text: isDark ? 'text-purple-400' : 'text-purple-600' },
+      red: { bg: isDark ? 'bg-red-500/20' : 'bg-red-50', text: isDark ? 'text-red-400' : 'text-red-600' },
+    };
+    return colors[color] || colors.blue;
+  };
+
+  const handleBack = () => {
+    if (onBack) {
+      onBack();
+    } else {
+      onNavigate('result-management');
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 顶部信息栏 */}
+      <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={handleBack}
+              className={`flex items-center gap-2 px-3 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}
+            >
+              <ArrowLeft className="w-4 h-4" />
+              返回
+            </button>
+            <div className={`h-8 w-px ${isDark ? 'bg-blue-800/30' : 'bg-gray-200'}`} />
+            <div className="flex items-center gap-3">
+              <div className={`w-10 h-10 rounded-xl bg-blue-500/20 flex items-center justify-center`}>
+                <FileText className="w-5 h-5 text-blue-400" />
+              </div>
+              <div>
+                <h1 className={`${textPrimary} font-bold text-lg`}>{task.title}</h1>
+                <p className={`${textMuted} text-sm`}>{task.subCategory} · {task.status === 'completed' ? '已完成' : '进行中'}</p>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <button className={`flex items-center gap-2 px-3 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}>
+              <Edit3 className="w-4 h-4" />
+              编辑
+            </button>
+            <button className={`flex items-center gap-2 px-3 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}>
+              <History className="w-4 h-4" />
+              历史版本
+            </button>
+            <button className={`flex items-center gap-2 px-3 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}>
+              <Download className="w-4 h-4" />
+              导出报告
+            </button>
+            <div className="relative">
+              <button
+                onClick={() => setShowReportMenu(!showReportMenu)}
+                className={`flex items-center gap-2 px-4 py-2 ${btnPrimary} text-white rounded-lg text-sm transition-colors`}
+              >
+                <Send className="w-4 h-4" />
+                呈报
+                <ChevronDown className="w-4 h-4" />
+              </button>
+              {showReportMenu && (
+                <div className={`absolute right-0 top-full mt-2 w-48 ${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl shadow-xl py-2 z-10`}>
+                  <button className={`w-full flex items-center gap-3 px-4 py-2.5 text-sm ${textPrimary} hover:${isDark ? 'bg-slate-700/50' : 'bg-gray-50'} transition-colors`}>
+                    <Share2 className="w-4 h-4" />
+                    分享链接
+                  </button>
+                  <button className={`w-full flex items-center gap-3 px-4 py-2.5 text-sm ${textPrimary} hover:${isDark ? 'bg-slate-700/50' : 'bg-gray-50'} transition-colors`}>
+                    <Printer className="w-4 h-4" />
+                    打印
+                  </button>
+                  <button className={`w-full flex items-center gap-3 px-4 py-2.5 text-sm ${textPrimary} hover:${isDark ? 'bg-slate-700/50' : 'bg-gray-50'} transition-colors`}>
+                    <Send className="w-4 h-4" />
+                    发送至邮箱
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* 基本信息 */}
+        <div className={`grid grid-cols-5 gap-4 p-4 ${inputBg} rounded-lg`}>
+          <div className="text-center">
+            <p className={`${textMuted} text-xs mb-1`}>使用场景</p>
+            <p className={`${textPrimary} font-medium text-sm`}>{task.scene}</p>
+          </div>
+          <div className="text-center">
+            <p className={`${textMuted} text-xs mb-1`}>运行时长</p>
+            <p className={`${textPrimary} font-medium text-sm`}>{task.duration}</p>
+          </div>
+          <div className="text-center">
+            <p className={`${textMuted} text-xs mb-1`}>参与智能体</p>
+            <p className={`${textPrimary} font-medium text-sm`}>{task.agentCount}个</p>
+          </div>
+          <div className="text-center">
+            <p className={`${textMuted} text-xs mb-1`}>当前版本</p>
+            <p className={`${isDark ? 'text-cyan-400' : 'text-cyan-600'} font-medium text-sm`}>V{task.versionHistory.length}</p>
+          </div>
+          <div className="text-center">
+            <p className={`${textMuted} text-xs mb-1`}>完成时间</p>
+            <p className={`${textPrimary} font-medium text-sm`}>{task.completedAt}</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Tab切换 */}
+      <div className={`flex items-center gap-1 ${cardBg} p-1 rounded-lg w-fit`}>
+        <button
+          onClick={() => setActiveTab('conclusion')}
+          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            activeTab === 'conclusion'
+              ? `${btnPrimary} text-white`
+              : `${textSecondary} ${isDark ? 'hover:text-white hover:bg-slate-700/50' : 'hover:text-gray-900 hover:bg-gray-100'}`
+          }`}
+        >
+          会商结论
+        </button>
+        <button
+          onClick={() => setActiveTab('process')}
+          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            activeTab === 'process'
+              ? `${btnPrimary} text-white`
+              : `${textSecondary} ${isDark ? 'hover:text-white hover:bg-slate-700/50' : 'hover:text-gray-900 hover:bg-gray-100'}`
+          }`}
+        >
+          策略链
+        </button>
+        <button
+          onClick={() => setActiveTab('opinions')}
+          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            activeTab === 'opinions'
+              ? `${btnPrimary} text-white`
+              : `${textSecondary} ${isDark ? 'hover:text-white hover:bg-slate-700/50' : 'hover:text-gray-900 hover:bg-gray-100'}`
+          }`}
+        >
+          观点汇总
+        </button>
+        <button
+          onClick={() => setActiveTab('history')}
+          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            activeTab === 'history'
+              ? `${btnPrimary} text-white`
+              : `${textSecondary} ${isDark ? 'hover:text-white hover:bg-slate-700/50' : 'hover:text-gray-900 hover:bg-gray-100'}`
+          }`}
+        >
+          版本历史
+        </button>
+      </div>
+
+      {/* 内容区 */}
+      {activeTab === 'conclusion' && (
+        <div className="grid grid-cols-12 gap-6">
+          {/* 会商结论 */}
+          <div className="col-span-8 space-y-6">
+            <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+              <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+                <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
+                本次会商结论
+              </h3>
+              <div className={`p-4 ${isDark ? 'bg-green-500/10 border-green-500/30' : 'bg-green-50 border-green-200'} rounded-lg`}>
+                <p className={`${isDark ? 'text-green-300' : 'text-green-800'} leading-relaxed`}>{task.conclusion.main}</p>
+              </div>
+            </div>
+
+            <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+              <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+                <Check className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
+                推荐采用方向
+              </h3>
+              <div className="space-y-2">
+                {task.conclusion.recommended.map((item, index) => (
+                  <div key={index} className={`flex items-center gap-3 p-3 ${isDark ? 'bg-green-500/10 border-green-500/30' : 'bg-green-50 border-green-200'} rounded-lg`}>
+                    <div className={`w-6 h-6 rounded-full ${isDark ? 'bg-green-500/20' : 'bg-green-100'} flex items-center justify-center`}>
+                      <Check className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
+                    </div>
+                    <p className={`${isDark ? 'text-green-300' : 'text-green-800'} text-sm`}>{item}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+              <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+                <X className={`w-4 h-4 ${isDark ? 'text-red-400' : 'text-red-600'}`} />
+                不建议采用方向
+              </h3>
+              <div className="space-y-2">
+                {task.conclusion.notRecommended.map((item, index) => (
+                  <div key={index} className={`flex items-center gap-3 p-3 ${isDark ? 'bg-red-500/10 border-red-500/30' : 'bg-red-50 border-red-200'} rounded-lg`}>
+                    <div className={`w-6 h-6 rounded-full ${isDark ? 'bg-red-500/20' : 'bg-red-100'} flex items-center justify-center`}>
+                      <X className={`w-4 h-4 ${isDark ? 'text-red-400' : 'text-red-600'}`} />
+                    </div>
+                    <p className={`${isDark ? 'text-red-300' : 'text-red-800'} text-sm`}>{item}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* 侧边栏 */}
+          <div className="col-span-4 space-y-6">
+            <div className={`${cardBg} backdrop-blur-xl ${isDark ? 'border-yellow-800/30' : 'border-yellow-200'} rounded-xl p-5`}>
+              <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+                <AlertCircle className={`w-4 h-4 ${isDark ? 'text-yellow-400' : 'text-yellow-600'}`} />
+                待确认问题
+              </h3>
+              <div className="space-y-2">
+                {task.conclusion.pendingIssues.map((item, index) => (
+                  <div key={index} className={`p-3 ${isDark ? 'bg-yellow-500/10 border-yellow-500/30' : 'bg-yellow-50 border-yellow-200'} rounded-lg`}>
+                    <p className={`${isDark ? 'text-yellow-300' : 'text-yellow-800'} text-sm`}>{item}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+              <h3 className={`${textPrimary} font-semibold text-sm mb-4`}>操作</h3>
+              <div className="space-y-2">
+                <button className={`w-full flex items-center gap-3 px-4 py-3 ${btnSecondary} rounded-xl text-sm transition-colors`}>
+                  <RefreshCw className="w-4 h-4" />
+                  重新发起会商
+                </button>
+                <button className={`w-full flex items-center gap-3 px-4 py-3 ${btnPrimary} text-white rounded-xl text-sm transition-colors`}>
+                  <FileText className="w-4 h-4" />
+                  生成最终方案
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {activeTab === 'process' && (
+        <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+          {/* 策略链可视化 */}
+          <h3 className={`${textPrimary} font-semibold text-sm mb-4`}>策略链结果</h3>
+          <div className="flex items-center justify-between mb-6">
+            {task.strategyChain.map((item, index) => {
+              const Icon = item.icon;
+              const colors = getColorClasses(item.color);
+              return (
+                <React.Fragment key={item.id}>
+                  <div className="flex flex-col items-center">
+                    <div className={`w-14 h-14 rounded-xl bg-${item.color}-500/20 border-2 border-${item.color}-500/50 flex items-center justify-center mb-2`}>
+                      <Icon className={`w-7 h-7 text-${item.color}-400`} />
+                    </div>
+                    <span className={`text-${item.color}-400 text-sm font-medium`}>{item.name}</span>
+                    <span className={`${textMuted} text-xs mt-1 flex items-center gap-1`}>
+                      <CheckCircle className="w-3 h-3 text-green-400" /> 已确认
+                    </span>
+                  </div>
+                  {index < task.strategyChain.length - 1 && (
+                    <ArrowRight className="w-6 h-6 text-slate-600 mb-6" />
+                  )}
+                </React.Fragment>
+              );
+            })}
+          </div>
+
+          {/* 详细结果可折叠展开 */}
+          <div className={`${inputBg} rounded-xl overflow-hidden border ${cardBorder}`}>
+            {task.strategyChain.map((section) => {
+              const Icon = section.icon;
+              const colors = getColorClasses(section.color);
+              const isExpanded = expandedSection === section.name;
+              return (
+                <div key={section.id} className={`border-b last:border-0 ${cardBorder}`}>
+                  <button
+                    onClick={() => toggleSection(section.name)}
+                    className="w-full flex items-center justify-between p-4 hover:bg-slate-700/20 transition-colors"
+                  >
+                    <div className="flex items-center gap-3">
+                      <div className={`w-10 h-10 rounded-lg bg-${section.color}-500/20 flex items-center justify-center`}>
+                        <Icon className={`w-5 h-5 text-${section.color}-400`} />
+                      </div>
+                      <div className="text-left">
+                        <p className={`${textPrimary} font-medium`}>{section.name}</p>
+                        <p className={`text-${section.color}-400 text-sm`}>{section.result}</p>
+                      </div>
+                    </div>
+                    {isExpanded ? (
+                      <ChevronDown className={`w-5 h-5 ${textSecondary}`} />
+                    ) : (
+                      <ChevronRight className={`w-5 h-5 ${textSecondary}`} />
+                    )}
+                  </button>
+                  {isExpanded && (
+                    <div className="px-4 pb-4 pt-0 ml-13">
+                      <div className={`p-4 ${cardBg} rounded-lg`}>
+                        <p className={`${textSecondary} text-sm`}>详细分析内容将在此处展示，包含智能体推理过程和依据。</p>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {activeTab === 'opinions' && (
+        <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+          <h3 className={`${textPrimary} font-semibold text-sm mb-4 flex items-center gap-2`}>
+            <Bot className={`w-4 h-4 ${isDark ? 'text-cyan-400' : 'text-cyan-600'}`} />
+            各智能体观点汇总
+          </h3>
+          <div className="space-y-4">
+            {task.agentOpinions.map((agent) => {
+              const colors = getColorClasses(agent.color);
+              return (
+                <div key={agent.agentName} className={`p-4 ${inputBg} ${cardBorder} rounded-xl`}>
+                  <div className="flex items-start justify-between mb-3">
+                    <div className="flex items-center gap-3">
+                      <div className={`w-10 h-10 rounded-lg ${colors.bg} flex items-center justify-center`}>
+                        <Bot className={`w-5 h-5 ${colors.text}`} />
+                      </div>
+                      <div>
+                        <div className="flex items-center gap-2">
+                          <p className={`text-sm font-medium ${colors.text}`}>{agent.agentName}</p>
+                          {agent.adopted ? (
+                            <span className={`px-1.5 py-0.5 ${isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-700'} rounded text-xs`}>
+                              已采纳
+                            </span>
+                          ) : (
+                            <span className={`px-1.5 py-0.5 ${isDark ? 'bg-slate-500/20 text-slate-400' : 'bg-gray-200 text-gray-600'} rounded text-xs`}>
+                              未采纳
+                            </span>
+                          )}
+                        </div>
+                        <p className={`${textMuted} text-xs`}>{agent.role}</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="pl-13">
+                    <p className={`${textSecondary} text-sm`}>{agent.opinion}</p>
+                  </div>
+                </div>
+              );
+            })}
+
+            {/* 分歧点 */}
+            {task.disputes.length > 0 && (
+              <div className={`p-4 ${isDark ? 'bg-yellow-500/10 border-yellow-500/30' : 'bg-yellow-50 border-yellow-200'} rounded-xl`}>
+                <h4 className={`${textPrimary} font-medium text-sm mb-3 flex items-center gap-2`}>
+                  <AlertCircle className={`w-4 h-4 ${isDark ? 'text-yellow-400' : 'text-yellow-600'}`} />
+                  争议点
+                </h4>
+                {task.disputes.map((dispute, idx) => (
+                  <div key={idx} className="space-y-2">
+                    <p className={`${textPrimary} text-sm font-medium`}>{dispute.issue}</p>
+                    <p className={`${textMuted} text-xs`}>{dispute.description}</p>
+                    {dispute.viewpoints.map((vp, i) => (
+                      <div key={i} className={`p-2 ${isDark ? 'bg-yellow-500/5' : 'bg-yellow-50'} rounded-lg`}>
+                        <span className={`${textMuted} text-xs mr-2`}>{vp.agent}:</span>
+                        <span className={`${isDark ? 'text-yellow-300' : 'text-yellow-800'} text-xs`}>{vp.opinion}</span>
+                      </div>
+                    ))}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {activeTab === 'history' && (
+        <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+          <div className="flex items-center justify-between mb-4">
+            <h3 className={`${textPrimary} font-semibold text-sm`}>版本迭代记录</h3>
+            <button className="flex items-center gap-1 text-blue-400 text-sm hover:text-blue-300 transition-colors">
+              <RefreshCw className="w-4 h-4" />
+              对比
+            </button>
+          </div>
+          <div className="space-y-3">
+            {task.versionHistory.map((version, index) => (
+              <div
+                key={version.version}
+                className={`p-4 rounded-xl border ${
+                  index === 0
+                    ? isDark ? 'bg-cyan-500/10 border-cyan-500/30' : 'bg-cyan-50 border-cyan-200'
+                    : `${inputBg} border-slate-700/30`
+                }`}
+              >
+                <div className="flex items-center justify-between mb-2">
+                  <span className={`font-bold ${
+                    index === 0 ? (isDark ? 'text-cyan-400' : 'text-cyan-600') : textSecondary
+                  }`}>
+                    {version.version}
+                  </span>
+                  <span className={`${textMuted} text-xs`}>{version.time}</span>
+                </div>
+                <ul className="space-y-1">
+                  {version.changes.map((change, i) => (
+                    <li key={i} className={`${textPrimary} text-sm flex items-start gap-2`}>
+                      <span className={textSecondary}>•</span>
+                      {change}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ResultDetail;
diff --git a/web-code/pages/ResultManagement.tsx b/web-code/pages/ResultManagement.tsx
new file mode 100644
index 00000000..56217977
--- /dev/null
+++ b/web-code/pages/ResultManagement.tsx
@@ -0,0 +1,551 @@
+import React, { useState } from 'react';
+import {
+  FileText,
+  Search,
+  Filter,
+  Plus,
+  Download,
+  Edit3,
+  Send,
+  Clock,
+  CheckCircle,
+  AlertCircle,
+  ChevronRight,
+  Target,
+  Brain,
+  TrendingUp,
+  Compass,
+  Database,
+  MoreHorizontal,
+  FolderOpen,
+  Folder,
+  BarChart3,
+} from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+import { PageType } from '../components/Sidebar';
+
+type ResultCategory = 'planning' | 'mnty' | 'effect-pg' | 'xk' | 'dq-research' | 'other';
+
+interface ResultTask {
+  id: string;
+  title: string;
+  category: ResultCategory;
+  subCategory: string;
+  status: 'completed' | 'pending' | 'draft';
+  createdAt: string;
+  updatedAt: string;
+  reportType: 'strategy' | 'consult' | 'analysis' | 'summary';
+  agentCount: number;
+  description: string;
+}
+
+interface ResultManagementProps {
+  onNavigate: (page: PageType, taskId?: string) => void;
+  initialCategory?: ResultCategory;
+}
+
+// 任务类别配置
+const categoryConfig: Record<ResultCategory, { label: string; icon: React.ElementType; color: string; subCategories: string[] }> = {
+  'planning': {
+    label: '规划任务',
+    icon: Target,
+    color: 'blue',
+    subCategories: ['目标分析', '品牌策略', '内容规划', '渠道规划', '叙事策略']
+  },
+  'mnty': {
+    label: 'MNTY任务',
+    icon: Brain,
+    color: 'purple',
+    subCategories: ['机制研究', '方案设计', 'ZSTY分析']
+  },
+  'effect-pg': {
+    label: '效果PG任务',
+    icon: TrendingUp,
+    color: 'amber',
+    subCategories: ['行为PG', '效果评估', '信息PG', '账号PG']
+  },
+  'xk': {
+    label: 'XK任务',
+    icon: Compass,
+    color: 'cyan',
+    subCategories: ['任务JC', '任务调度']
+  },
+  'dq-research': {
+    label: 'DQ研究类任务',
+    icon: Database,
+    color: 'green',
+    subCategories: ['受众分析', '知识库研究', '趋势研究']
+  },
+  'other': {
+    label: '其他类任务',
+    icon: MoreHorizontal,
+    color: 'slate',
+    subCategories: ['通用分析', '临时任务', '其他']
+  }
+};
+
+// 模拟任务数据
+const mockTasks: ResultTask[] = [
+  {
+    id: 'task-001',
+    title: '五四青年节宣传活动策略',
+    category: 'planning',
+    subCategory: '叙事策略',
+    status: 'completed',
+    createdAt: '2026-03-19 10:30',
+    updatedAt: '2026-03-19 15:30',
+    reportType: 'strategy',
+    agentCount: 6,
+    description: '针对五四青年节的品牌传播策略方案'
+  },
+  {
+    id: 'task-002',
+    title: '品牌年轻化受众分析',
+    category: 'dq-research',
+    subCategory: '受众分析',
+    status: 'completed',
+    createdAt: '2026-03-18 14:20',
+    updatedAt: '2026-03-18 16:45',
+    reportType: 'analysis',
+    agentCount: 3,
+    description: '分析Z世代用户的消费行为和品牌偏好'
+  },
+  {
+    id: 'task-003',
+    title: 'UGC激励机制设计',
+    category: 'effect-pg',
+    subCategory: '效果评估',
+    status: 'completed',
+    createdAt: '2026-03-17 09:00',
+    updatedAt: '2026-03-17 11:20',
+    reportType: 'strategy',
+    agentCount: 4,
+    description: '设计用户生成内容激励机制方案'
+  },
+  {
+    id: 'task-004',
+    title: '短视频平台效果预测',
+    category: 'mnty',
+    subCategory: '方案设计',
+    status: 'pending',
+    createdAt: '2026-03-20 08:00',
+    updatedAt: '2026-03-20 08:00',
+    reportType: 'consult',
+    agentCount: 5,
+    description: '预测不同短视频平台的传播效果'
+  },
+  {
+    id: 'task-005',
+    title: '活动传播风险评估',
+    category: 'planning',
+    subCategory: '目标分析',
+    status: 'draft',
+    createdAt: '2026-03-20 10:00',
+    updatedAt: '2026-03-20 10:30',
+    reportType: 'analysis',
+    agentCount: 2,
+    description: '评估五四活动可能面临的传播风险'
+  },
+  {
+    id: 'task-006',
+    title: '竞品营销策略研究',
+    category: 'dq-research',
+    subCategory: '趋势研究',
+    status: 'completed',
+    createdAt: '2026-03-16 13:00',
+    updatedAt: '2026-03-16 18:00',
+    reportType: 'analysis',
+    agentCount: 3,
+    description: '分析主要竞品的营销策略和效果'
+  },
+];
+
+const ResultManagement: React.FC<ResultManagementProps> = ({ onNavigate, initialCategory = 'planning' }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 主题颜色类
+  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
+  const cardBorder = isDark ? 'border-blue-800/30' : 'border-gray-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const textMuted = isDark ? 'text-slate-500' : 'text-gray-500';
+  const btnPrimary = isDark ? 'bg-blue-600 hover:bg-blue-500' : 'bg-red-600 hover:bg-red-500';
+  const btnSecondary = isDark ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300' : 'bg-gray-100 hover:bg-gray-200 border-gray-300 text-gray-700';
+  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-gray-50';
+  const inputBorder = isDark ? 'border-blue-800/30' : 'border-gray-300';
+
+  // 状态
+  const [selectedCategory, setSelectedCategory] = useState<ResultCategory>(initialCategory);
+  const [selectedSubCategory, setSelectedSubCategory] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState<'all' | 'completed' | 'pending' | 'draft'>('all');
+  const [expandedCategories, setExpandedCategories] = useState<Set<ResultCategory>>(
+    new Set([initialCategory])
+  );
+
+  // 切换分类展开状态
+  const toggleCategory = (category: ResultCategory) => {
+    setExpandedCategories(prev => {
+      const next = new Set(prev);
+      if (next.has(category)) {
+        next.delete(category);
+      } else {
+        next.add(category);
+      }
+      return next;
+    });
+  };
+
+  // 过滤任务
+  const filteredTasks = mockTasks.filter(task => {
+    const matchesCategory = task.category === selectedCategory;
+    const matchesSubCategory = !selectedSubCategory || task.subCategory === selectedSubCategory;
+    const matchesSearch = !searchQuery ||
+      task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      task.description.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesStatus = statusFilter === 'all' || task.status === statusFilter;
+    return matchesCategory && matchesSubCategory && matchesSearch && matchesStatus;
+  });
+
+  // 获取状态样式
+  const getStatusStyle = (status: ResultTask['status']) => {
+    switch (status) {
+      case 'completed':
+        return {
+          bg: isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-700',
+          icon: CheckCircle,
+          label: '已完成'
+        };
+      case 'pending':
+        return {
+          bg: isDark ? 'bg-yellow-500/20 text-yellow-400' : 'bg-yellow-100 text-yellow-700',
+          icon: Clock,
+          label: '进行中'
+        };
+      case 'draft':
+        return {
+          bg: isDark ? 'bg-slate-500/20 text-slate-400' : 'bg-gray-100 text-gray-700',
+          icon: Edit3,
+          label: '草稿'
+        };
+    }
+  };
+
+  // 获取报告类型样式
+  const getReportTypeStyle = (type: ResultTask['reportType']) => {
+    const styles = {
+      'strategy': { color: 'blue', label: '策略报告' },
+      'consult': { color: 'purple', label: '会商报告' },
+      'analysis': { color: 'cyan', label: '分析报告' },
+      'summary': { color: 'green', label: '总结报告' }
+    };
+    return styles[type];
+  };
+
+  // 查看任务详情
+  const handleViewDetail = (taskId: string) => {
+    onNavigate('result-detail', taskId);
+  };
+
+  const currentCategoryConfig = categoryConfig[selectedCategory];
+  const CategoryIcon = currentCategoryConfig.icon;
+
+  return (
+    <div className="h-full flex gap-6">
+      {/* 左侧分类导航 */}
+      <div className={`w-72 flex-shrink-0 ${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4 overflow-hidden flex flex-col`}>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className={`${textPrimary} font-semibold text-base`}>结果管理</h2>
+          <button className={`p-1.5 rounded-lg ${btnSecondary}`}>
+            <Plus className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* 分类列表 */}
+        <div className="flex-1 overflow-y-auto space-y-2 custom-scrollbar">
+          {(Object.entries(categoryConfig) as [ResultCategory, typeof categoryConfig[ResultCategory]][]).map(([key, config]) => {
+            const Icon = config.icon;
+            const isExpanded = expandedCategories.has(key);
+            const isActive = selectedCategory === key;
+
+            return (
+              <div key={key} className="space-y-1">
+                {/* 一级分类 */}
+                <button
+                  onClick={() => {
+                    setSelectedCategory(key);
+                    setSelectedSubCategory(null);
+                    if (!expandedCategories.has(key)) {
+                      toggleCategory(key);
+                    }
+                  }}
+                  className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all text-left ${
+                    isActive
+                      ? isDark
+                        ? 'bg-blue-600/20 text-blue-400 border border-blue-500/30'
+                        : 'bg-red-50 text-red-600 border border-red-200'
+                      : isDark
+                        ? 'text-slate-400 hover:text-white hover:bg-slate-700/50'
+                        : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
+                  }`}
+                >
+                  {isExpanded ? (
+                    <FolderOpen className={`w-4 h-4 ${isActive ? '' : 'opacity-60'}`} />
+                  ) : (
+                    <Folder className={`w-4 h-4 ${isActive ? '' : 'opacity-60'}`} />
+                  )}
+                  <span className="text-sm font-medium flex-1">{config.label}</span>
+                  <ChevronRight className={`w-4 h-4 transition-transform ${isExpanded ? 'rotate-90' : ''} ${isActive ? '' : 'opacity-60'}`} />
+                </button>
+
+                {/* 二级分类 */}
+                {isExpanded && (
+                  <div className="ml-4 pl-4 border-l space-y-1">
+                    {/* 全部 */}
+                    <button
+                      onClick={() => {
+                        setSelectedCategory(key);
+                        setSelectedSubCategory(null);
+                      }}
+                      className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg transition-all text-left ${
+                        selectedCategory === key && !selectedSubCategory
+                          ? isDark
+                            ? 'bg-blue-500/20 text-blue-400'
+                            : 'bg-red-100 text-red-600'
+                          : isDark
+                            ? 'text-slate-500 hover:text-slate-300'
+                            : 'text-gray-500 hover:text-gray-700'
+                      }`}
+                    >
+                      <BarChart3 className="w-3.5 h-3.5" />
+                      <span className="text-xs font-medium">全部</span>
+                      <span className={`ml-auto px-1.5 py-0.5 rounded text-xs ${
+                        isDark ? 'bg-slate-700 text-slate-400' : 'bg-gray-200 text-gray-500'
+                      }`}>
+                        {mockTasks.filter(t => t.category === key).length}
+                      </span>
+                    </button>
+
+                    {/* 各子分类 */}
+                    {config.subCategories.map(sub => {
+                      const count = mockTasks.filter(t => t.category === key && t.subCategory === sub).length;
+                      if (count === 0) return null;
+                      return (
+                        <button
+                          key={sub}
+                          onClick={() => {
+                            setSelectedCategory(key);
+                            setSelectedSubCategory(sub);
+                          }}
+                          className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg transition-all text-left ${
+                            selectedCategory === key && selectedSubCategory === sub
+                              ? isDark
+                                ? 'bg-blue-500/20 text-blue-400'
+                                : 'bg-red-100 text-red-600'
+                              : isDark
+                                ? 'text-slate-500 hover:text-slate-300'
+                                : 'text-gray-500 hover:text-gray-700'
+                          }`}
+                        >
+                          <div className={`w-1.5 h-1.5 rounded-full ${
+                            isActive ? `bg-${config.color}-400` : (isDark ? 'bg-slate-600' : 'bg-gray-300')
+                          }`} />
+                          <span className="text-xs">{sub}</span>
+                          <span className={`ml-auto px-1.5 py-0.5 rounded text-xs ${
+                            isDark ? 'bg-slate-700 text-slate-400' : 'bg-gray-200 text-gray-500'
+                          }`}>
+                            {count}
+                          </span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* 右侧任务列表 */}
+      <div className="flex-1 flex flex-col min-w-0">
+        {/* 顶部工具栏 */}
+        <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4 mb-4`}>
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-3">
+              <div className={`w-10 h-10 rounded-xl bg-${currentCategoryConfig.color}-500/20 flex items-center justify-center`}>
+                <CategoryIcon className={`w-5 h-5 text-${currentCategoryConfig.color}-400`} />
+              </div>
+              <div>
+                <h2 className={`${textPrimary} font-semibold`}>
+                  {selectedSubCategory || currentCategoryConfig.label}
+                </h2>
+                <p className={`${textMuted} text-xs`}>
+                  共 {filteredTasks.length} 个结果
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <button className={`flex items-center gap-2 px-3 py-2 rounded-lg ${btnSecondary} text-sm`}>
+                <Download className="w-4 h-4" />
+                批量导出
+              </button>
+            </div>
+          </div>
+
+          {/* 搜索和筛选 */}
+          <div className="flex items-center gap-3">
+            <div className={`flex-1 relative ${inputBg} rounded-lg`}>
+              <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${textMuted}`} />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="搜索任务标题或描述..."
+                className={`w-full pl-10 pr-4 py-2.5 rounded-lg text-sm bg-transparent focus:outline-none ${
+                  isDark ? 'text-white placeholder-slate-500' : 'text-gray-800 placeholder-gray-400'
+                }`}
+              />
+            </div>
+            <select
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value as typeof statusFilter)}
+              className={`px-3 py-2.5 rounded-lg text-sm ${inputBg} ${inputBorder} focus:outline-none ${
+                isDark ? 'text-slate-300' : 'text-gray-700'
+              }`}
+            >
+              <option value="all">全部状态</option>
+              <option value="completed">已完成</option>
+              <option value="pending">进行中</option>
+              <option value="draft">草稿</option>
+            </select>
+          </div>
+        </div>
+
+        {/* 任务列表 */}
+        <div className={`flex-1 ${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl overflow-hidden`}>
+          {filteredTasks.length === 0 ? (
+            <div className="h-full flex flex-col items-center justify-center">
+              <FileText className={`w-16 h-16 ${textMuted} mb-4`} />
+              <p className={`${textSecondary} text-lg`}>暂无结果</p>
+              <p className={`${textMuted} text-sm mt-1`}>在对应任务中生成结果后，将在此显示</p>
+            </div>
+          ) : (
+            <div className="h-full overflow-y-auto custom-scrollbar">
+              <table className="w-full">
+                <thead className={`sticky top-0 ${isDark ? 'bg-slate-800/80' : 'bg-gray-50'}`}>
+                  <tr className={`text-xs ${textMuted} border-b ${cardBorder}`}>
+                    <th className="text-left font-medium px-4 py-3">任务名称</th>
+                    <th className="text-left font-medium px-4 py-3">报告类型</th>
+                    <th className="text-left font-medium px-4 py-3">智能体数</th>
+                    <th className="text-left font-medium px-4 py-3">状态</th>
+                    <th className="text-left font-medium px-4 py-3">更新时间</th>
+                    <th className="text-left font-medium px-4 py-3">操作</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredTasks.map((task) => {
+                    const statusInfo = getStatusStyle(task.status);
+                    const StatusIcon = statusInfo.icon;
+                    const reportTypeInfo = getReportTypeStyle(task.reportType);
+
+                    return (
+                      <tr
+                        key={task.id}
+                        className={`border-b cursor-pointer hover:${
+                          isDark ? 'bg-slate-700/30' : 'bg-gray-50'
+                        } transition-colors ${cardBorder}`}
+                        onClick={() => handleViewDetail(task.id)}
+                      >
+                        <td className="px-4 py-4">
+                          <div className="flex items-center gap-3">
+                            <div className={`w-10 h-10 rounded-lg bg-${reportTypeInfo.color}-500/20 flex items-center justify-center flex-shrink-0`}>
+                              <FileText className={`w-5 h-5 text-${reportTypeInfo.color}-400`} />
+                            </div>
+                            <div className="min-w-0">
+                              <p className={`${textPrimary} text-sm font-medium truncate`}>{task.title}</p>
+                              <p className={`${textMuted} text-xs truncate`}>{task.description}</p>
+                            </div>
+                          </div>
+                        </td>
+                        <td className="px-4 py-4">
+                          <span className={`px-2 py-1 rounded-lg text-xs font-medium ${
+                            isDark ? `bg-${reportTypeInfo.color}-500/20 text-${reportTypeInfo.color}-400` : `bg-${reportTypeInfo.color}-100 text-${reportTypeInfo.color}-700`
+                          }`}>
+                            {reportTypeInfo.label}
+                          </span>
+                        </td>
+                        <td className="px-4 py-4">
+                          <span className={`${textSecondary} text-sm`}>{task.agentCount}</span>
+                        </td>
+                        <td className="px-4 py-4">
+                          <span className={`inline-flex items-center gap-1.5 px-2 py-1 rounded-lg text-xs font-medium ${statusInfo.bg}`}>
+                            <StatusIcon className="w-3 h-3" />
+                            {statusInfo.label}
+                          </span>
+                        </td>
+                        <td className="px-4 py-4">
+                          <span className={`${textMuted} text-sm`}>{task.updatedAt}</span>
+                        </td>
+                        <td className="px-4 py-4" onClick={(e) => e.stopPropagation()}>
+                          <div className="flex items-center gap-1">
+                            <button
+                              onClick={() => handleViewDetail(task.id)}
+                              className={`p-1.5 rounded-lg hover:${isDark ? 'bg-slate-700' : 'bg-gray-100'} transition-colors`}
+                              title="查看详情"
+                            >
+                              <FileText className={`w-4 h-4 ${textSecondary}`} />
+                            </button>
+                            <button
+                              className={`p-1.5 rounded-lg hover:${isDark ? 'bg-slate-700' : 'bg-gray-100'} transition-colors`}
+                              title="编辑"
+                            >
+                              <Edit3 className={`w-4 h-4 ${textSecondary}`} />
+                            </button>
+                            <button
+                              className={`p-1.5 rounded-lg hover:${isDark ? 'bg-slate-700' : 'bg-gray-100'} transition-colors`}
+                              title="下载"
+                            >
+                              <Download className={`w-4 h-4 ${textSecondary}`} />
+                            </button>
+                            <button
+                              className={`p-1.5 rounded-lg hover:${isDark ? 'bg-slate-700' : 'bg-gray-100'} transition-colors`}
+                              title="呈报"
+                            >
+                              <Send className={`w-4 h-4 ${textSecondary}`} />
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 自定义滚动条样式 */}
+      <style>{`
+        .custom-scrollbar::-webkit-scrollbar {
+          width: 6px;
+          height: 6px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+          background: ${isDark ? 'rgba(148, 163, 184, 0.3)' : 'rgba(0, 0, 0, 0.15)'};
+          border-radius: 3px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+          background: ${isDark ? 'rgba(148, 163, 184, 0.5)' : 'rgba(0, 0, 0, 0.25)'};
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default ResultManagement;
diff --git a/web-code/pages/SceneDetail.tsx b/web-code/pages/SceneDetail.tsx
new file mode 100644
index 00000000..0b118188
--- /dev/null
+++ b/web-code/pages/SceneDetail.tsx
@@ -0,0 +1,556 @@
+import React, { useState } from 'react';
+import { ArrowLeft, Save, RotateCcw, Play, Pause, Settings, FileText, GitBranch, ListChecks, Shield, Bot, Clock, CheckCircle, X, Plus, ChevronDown, AlertTriangle } from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+
+interface SceneDetailProps {
+  sceneId: string | null;
+  onBack: () => void;
+}
+
+interface FlowNode {
+  id: number;
+  name: string;
+  agent: string;
+  status: 'completed' | 'active' | 'pending';
+  inputs: number;
+  outputs: number;
+  inputSource: string[];
+  outputFields: string[];
+  releaseCondition: string;
+  rollbackNode: string;
+  allowParallel: boolean;
+  description: string;
+}
+
+const SceneDetail: React.FC<SceneDetailProps> = ({ sceneId, onBack }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 主题颜色类
+  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
+  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const textMuted = isDark ? 'text-slate-500' : 'text-gray-500';
+  const btnSecondary = isDark ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300' : 'bg-gray-100 hover:bg-gray-200 border-gray-300 text-gray-700';
+  const btnPrimary = isDark ? 'bg-blue-600 hover:bg-blue-500' : 'bg-red-600 hover:bg-red-500';
+  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-gray-50';
+  const inputBorder = isDark ? 'border-blue-800/30' : 'border-gray-300';
+
+  const [activeTab, setActiveTab] = useState('flow');
+  const [selectedNode, setSelectedNode] = useState<FlowNode | null>(null);
+
+  const tabs = [
+    { id: 'basic', label: '基础设置', icon: FileText },
+    { id: 'flow', label: '流程编排', icon: GitBranch },
+    { id: 'template', label: '输入输出模板', icon: ListChecks },
+    { id: 'rules', label: '运行规则', icon: Shield },
+  ];
+
+  const flowNodes: FlowNode[] = [
+    { id: 1, name: '目标分析', agent: 'GoalAgent', status: 'completed', inputs: 2, outputs: 3, inputSource: ['task_background', 'primary_goal_hint'], outputFields: ['goal_model.primary_goal', 'goal_model.secondary_goal'], releaseCondition: '目标明确且可量化', rollbackNode: '无', allowParallel: false, description: '分析并确定宣传的核心目标' },
+    { id: 2, name: '受众分析', agent: 'AudienceAgent', status: 'completed', inputs: 3, outputs: 4, inputSource: ['goal_model', 'task_background'], outputFields: ['audience_model.core_audience', 'audience_model.secondary_audience'], releaseCondition: '核心受众明确', rollbackNode: '目标分析', allowParallel: false, description: '分析目标受众特征和需求' },
+    { id: 3, name: '行为分析', agent: 'BehaviorAgent', status: 'active', inputs: 4, outputs: 3, inputSource: ['audience_model', 'goal_model'], outputFields: ['behavior_model.target_behavior', 'behavior_model.conversion_path'], releaseCondition: '目标行为明确', rollbackNode: '受众分析', allowParallel: false, description: '设计目标受众的预期行为' },
+    { id: 4, name: '驱动分析', agent: 'DriverAgent', status: 'pending', inputs: 3, outputs: 2, inputSource: ['behavior_model', 'audience_model'], outputFields: ['driver_model.primary_driver', 'driver_model.secondary_driver'], releaseCondition: '核心驱动明确', rollbackNode: '行为分析', allowParallel: true, description: '分析影响受众行为的关键驱动因素' },
+    { id: 5, name: '叙事分析', agent: 'NarrativeAgent', status: 'pending', inputs: 2, outputs: 4, inputSource: ['driver_model', 'audience_model'], outputFields: ['narrative_model.core_narrative', 'narrative_model.message_points'], releaseCondition: '叙事框架明确', rollbackNode: '驱动分析', allowParallel: false, description: '设计传播叙事策略' },
+    { id: 6, name: '逻辑链收敛', agent: 'LogicChainAgent', status: 'pending', inputs: 4, outputs: 2, inputSource: ['goal_model', 'audience_model', 'behavior_model', 'narrative_model'], outputFields: ['strategy_chain.logic_statement', 'strategy_chain.consistency_score'], releaseCondition: '逻辑链校验通过', rollbackNode: '叙事分析', allowParallel: false, description: '验证策略链完整性和一致性' },
+    { id: 7, name: '风险评估', agent: 'RiskAgent', status: 'pending', inputs: 2, outputs: 3, inputSource: ['strategy_chain', 'task_constraints'], outputFields: ['risk_model.risk_items', 'risk_model.mitigation_suggestions'], releaseCondition: '高风险项已处理', rollbackNode: '逻辑链收敛', allowParallel: true, description: '评估策略执行风险' },
+    { id: 8, name: '方案生成', agent: 'DraftAgent', status: 'pending', inputs: 3, outputs: 5, inputSource: ['strategy_chain', 'narrative_model', 'risk_model'], outputFields: ['final_plan', 'execution_timeline', 'evaluation_metrics'], releaseCondition: '方案完整可执行', rollbackNode: '风险评估', allowParallel: false, description: '生成最终宣传方案' },
+  ];
+
+  const sceneSummary = {
+    flowNodesCount: 8,
+    boundAgentsCount: 8,
+    serialNodes: 6,
+    parallelNodes: 2,
+    logicChainEnabled: true,
+    lastPublishedTime: '2026-03-18 14:30',
+  };
+
+  const inputTemplate = [
+    { name: '任务标题', type: 'STRING', required: true },
+    { name: '任务背景', type: 'TEXT', required: true },
+    { name: '上级要求', type: 'TEXT', required: false },
+    { name: '时间要求', type: 'DATE', required: true },
+    { name: '资源条件', type: 'JSON', required: false },
+    { name: '风险边界', type: 'TEXT', required: false },
+  ];
+
+  const outputTemplate = {
+    middle: ['goal_model', 'audience_model', 'behavior_model', 'driver_model', 'narrative_model', 'strategy_chain'],
+    final: ['讨论结果摘要', '最终策略链', '正式方案', '风险说明', '评估指标'],
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 顶部导航 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <button
+            onClick={onBack}
+            className={`p-2 ${isDark ? 'hover:bg-slate-800/50' : 'hover:bg-gray-100'} rounded-lg transition-colors`}
+          >
+            <ArrowLeft className={`w-5 h-5 ${textSecondary}`} />
+          </button>
+          <div>
+            <div className="flex items-center gap-3">
+              <h1 className={`text-2xl font-bold ${textPrimary}`}>业务链条配置详情</h1>
+              <span className="px-2.5 py-1 bg-green-500/20 text-green-400 rounded-full text-xs font-medium">
+                启用
+              </span>
+            </div>
+            <p className={`${textSecondary} text-sm mt-1`}></p>
+          </div>
+        </div>
+        {/* <div className="flex items-center gap-3">
+          <button className={`flex items-center gap-2 px-4 py-2.5 ${btnSecondary} rounded-lg transition-colors`}>
+            <RotateCcw className="w-4 h-4" />
+            <span className="text-sm">重置</span>
+          </button>
+          <button className={`flex items-center gap-2 px-4 py-2.5 ${btnPrimary} ${textPrimary} rounded-lg transition-colors`}>
+            <Save className="w-4 h-4" />
+            <span className="text-sm">保存配置</span>
+          </button>
+        </div> */}
+      </div>
+
+      {/* Tab切换 */}
+      {/* <div className={`flex items-center gap-2 border-b ${cardBorder}`}>
+        {tabs.map((tab) => {
+          const Icon = tab.icon;
+          return (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`flex items-center gap-2 px-4 py-3 border-b-2 transition-colors ${
+                activeTab === tab.id
+                  ? 'border-blue-500 text-blue-400'
+                  : `border-transparent ${textSecondary} hover:${textPrimary}`
+              }`}
+            >
+              <Icon className="w-4 h-4" />
+              <span className="text-sm font-medium">{tab.label}</span>
+            </button>
+          );
+        })}
+      </div> */}
+
+      {/* 内容区 */}
+      <div className="grid grid-cols-4 gap-6">
+        {/* 主内容区 */}
+        <div className="col-span-3">
+          {activeTab === 'basic' && (
+            <div className="grid grid-cols-2 gap-6">
+              {/* 左侧表单区 */}
+              <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6 space-y-4`}>
+                <h3 className={`${textPrimary} font-semibold mb-4`}>基础信息</h3>
+                <div>
+                  <label className={`block ${textSecondary} text-sm mb-2`}>场景名称</label>
+                  <input
+                    type="text"
+                    defaultValue="宣传策略生成"
+                    className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm focus:outline-none focus:border-blue-500/50`}
+                  />
+                </div>
+                <div>
+                  <label className={`block ${textSecondary} text-sm mb-2`}>场景编码</label>
+                  <input
+                    type="text"
+                    defaultValue="SCENE_001"
+                    className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm focus:outline-none focus:border-blue-500/50`}
+                  />
+                </div>
+                <div>
+                  <label className={`block ${textSecondary} text-sm mb-2`}>场景说明</label>
+                  <textarea
+                    rows={3}
+                    defaultValue="用于生成完整的宣传策略方案，包含目标、受众、行为、驱动、叙事等维度的分析"
+                    className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm focus:outline-none focus:border-blue-500/50 resize-none`}
+                  />
+                </div>
+                <div>
+                  <label className={`block ${textSecondary} text-sm mb-2`}>场景分类</label>
+                  <select className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm focus:outline-none focus:border-blue-500/50`}>
+                    <option>策略生成</option>
+                    <option>方案推演</option>
+                    <option>活动复盘</option>
+                  </select>
+                </div>
+              </div>
+
+              {/* 右侧说明区 */}
+              <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6 space-y-4`}>
+                <h3 className={`${textPrimary} font-semibold mb-4`}>场景说明</h3>
+                <div className="p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg">
+                  <p className="text-blue-400 text-sm font-medium mb-2">场景简介</p>
+                  <p className={`${textSecondary} text-sm`}>完整的宣传策略生成流程，覆盖从目标分析到方案输出的全链路。</p>
+                </div>
+                <div className={`p-4 ${inputBg} ${inputBorder} rounded-lg`}>
+                  <p className={`${textSecondary} text-sm font-medium mb-2`}>最近修改记录</p>
+                  <p className={`${textSecondary} text-sm`}>2026-03-18 14:30 由 张策略 修改</p>
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="p-3 bg-cyan-500/10 border border-cyan-500/30 rounded-lg text-center">
+                    <p className="text-cyan-400 text-2xl font-bold">12</p>
+                    <p className={`${textSecondary} text-xs`}>关联任务</p>
+                  </div>
+                  <div className="p-3 bg-purple-500/10 border border-purple-500/30 rounded-lg text-center">
+                    <p className="text-purple-400 text-2xl font-bold">8</p>
+                    <p className={`${textSecondary} text-xs`}>关联智能体</p>
+                  </div>
+                </div>
+                <div className={`flex items-center justify-between py-3 border-t ${cardBorder}`}>
+                  <span className={`${textSecondary} text-sm`}>设为默认场景</span>
+                  <label className="relative inline-flex items-center cursor-pointer">
+                    <input type="checkbox" className="sr-only peer" defaultChecked />
+                    <div className="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                  </label>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {activeTab === 'flow' && (
+            <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6`}>
+              <div className="flex items-center justify-between mb-6">
+                <h3 className={`${textPrimary} font-semibold`}>流程编排</h3>
+                <button className="flex items-center gap-2 px-3 py-1.5 bg-blue-600/20 hover:bg-blue-600/30 border border-blue-500/30 text-blue-400 rounded-lg text-sm transition-colors">
+                  <Plus className="w-4 h-4" />
+                  添加节点
+                </button>
+              </div>
+
+              {/* 流程图区域 */}
+              <div className="relative">
+                {/* 流程节点 */}
+                <div className="space-y-4">
+                  {flowNodes.map((node, index) => (
+                    <div key={node.id} className="relative">
+                      <div className="flex items-center gap-4">
+                        {/* 连接线 */}
+                        {index > 0 && (
+                          <div className="absolute left-6 -top-4 w-0.5 h-4 bg-blue-500/50" />
+                        )}
+
+                        {/* 节点卡片 */}
+                        <button
+                          onClick={() => setSelectedNode(node)}
+                          className={`flex-1 flex items-center gap-4 p-4 rounded-xl border-2 transition-all text-left ${
+                            selectedNode?.id === node.id
+                              ? 'bg-blue-500/20 border-blue-500 shadow-lg shadow-blue-500/20'
+                              : node.status === 'completed'
+                              ? 'bg-green-500/10 border-green-500/30 hover:border-green-500/50'
+                              : node.status === 'active'
+                              ? 'bg-blue-500/10 border-blue-500/50 hover:border-blue-500'
+                              : `${inputBg} ${cardBorder} ${isDark ? 'hover:border-blue-700' : 'hover:border-red-300'}`
+                          }`}
+                        >
+                          {/* 节点序号 */}
+                          <div className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold ${
+                            node.status === 'completed'
+                              ? 'bg-green-500 text-white'
+                              : node.status === 'active'
+                              ? 'bg-blue-500 text-white'
+                              : isDark ? 'bg-slate-700 text-slate-400' : 'bg-gray-200 text-gray-600'
+                          }`}>
+                            {node.status === 'completed' ? <CheckCircle className="w-5 h-5" /> : node.id}
+                          </div>
+
+                          {/* 节点信息 */}
+                          <div className="flex-1">
+                            <div className="flex items-center gap-3 mb-1">
+                              <h4 className={`${textPrimary} font-medium`}>{node.name}</h4>
+                              <span className={`px-2 py-0.5 rounded text-xs font-medium ${
+                                node.status === 'completed' ? 'bg-green-500/20 text-green-400' :
+                                node.status === 'active' ? 'bg-blue-500/20 text-blue-400' :
+                                isDark ? 'bg-slate-700 text-slate-400' : 'bg-gray-200 text-gray-600'
+                              }`}>
+                                {node.status === 'completed' ? '已完成' : node.status === 'active' ? '进行中' : '待执行'}
+                              </span>
+                              {node.allowParallel && (
+                                <span className="px-2 py-0.5 bg-amber-500/20 text-amber-400 rounded text-xs">
+                                  可并行
+                                </span>
+                              )}
+                            </div>
+                            <div className={`flex items-center gap-4 text-sm ${textSecondary}`}>
+                              <span className="flex items-center gap-1">
+                                <Bot className="w-3 h-3" />
+                                {node.agent}
+                              </span>
+                              <span>输入 {node.inputs}</span>
+                              <span>输出 {node.outputs}</span>
+                            </div>
+                          </div>
+
+                          {/* 放行条件 */}
+                          <div className="text-right">
+                            <p className={`${textMuted} text-xs mb-1`}>放行条件</p>
+                            <p className={`${textSecondary} text-sm`}>{node.releaseCondition}</p>
+                          </div>
+
+                          <ChevronDown className={`w-5 h-5 ${textMuted}`} />
+                        </button>
+
+                        {/* 回退虚线 */}
+                        {node.rollbackNode !== '无' && (
+                          <div className="absolute -right-16 top-1/2 transform -translate-y-1/2">
+                            <div className="flex items-center gap-1 text-amber-400 text-xs">
+                              <span className="w-8 border-t-2 border-dashed border-amber-400/50" />
+                              <RotateCcw className="w-3 h-3" />
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* 图例 */}
+              <div className={`mt-6 flex items-center gap-6 pt-6 border-t ${cardBorder}`}>
+                <div className="flex items-center gap-2">
+                  <div className="w-3 h-3 rounded-full bg-green-400" />
+                  <span className={`${textSecondary} text-sm`}>已完成</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="w-3 h-3 rounded-full bg-blue-400" />
+                  <span className={`${textSecondary} text-sm`}>进行中</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className={`w-3 h-3 rounded-full ${isDark ? 'bg-slate-600' : 'bg-gray-400'}`} />
+                  <span className={`${textSecondary} text-sm`}>待执行</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="w-3 h-3 rounded-full bg-amber-400" />
+                  <span className={`${textSecondary} text-sm`}>可并行</span>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {activeTab === 'template' && (
+            <div className="space-y-6">
+              {/* 任务输入模板 */}
+              <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6`}>
+                <h3 className={`${textPrimary} font-semibold mb-4`}>任务输入模板</h3>
+                <div className="grid grid-cols-3 gap-4">
+                  {inputTemplate.map((field) => (
+                    <div key={field.name} className={`p-4 ${inputBg} ${inputBorder} rounded-lg`}>
+                      <div className="flex items-center justify-between mb-2">
+                        <p className={`${textPrimary} text-sm font-medium`}>{field.name}</p>
+                        {field.required && (
+                          <span className="px-2 py-0.5 bg-red-500/20 text-red-400 rounded text-xs">必填</span>
+                        )}
+                      </div>
+                      <p className={`${textMuted} text-xs`}>{field.type}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* 中间输出模板 */}
+              <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6`}>
+                <h3 className={`${textPrimary} font-semibold mb-4`}>中间输出模板</h3>
+                <div className="grid grid-cols-3 gap-4">
+                  {outputTemplate.middle.map((field) => (
+                    <div key={field} className="p-4 bg-cyan-500/10 border border-cyan-500/30 rounded-lg">
+                      <p className="text-cyan-400 text-sm font-mono">{field}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* 最终输出模板 */}
+              <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6`}>
+                <h3 className={`${textPrimary} font-semibold mb-4`}>最终输出模板</h3>
+                <div className="grid grid-cols-3 gap-4">
+                  {outputTemplate.final.map((field) => (
+                    <div key={field} className="p-4 bg-green-500/10 border border-green-500/30 rounded-lg">
+                      <p className="text-green-400 text-sm">{field}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {activeTab === 'rules' && (
+            <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6 space-y-6`}>
+              <h3 className={`${textPrimary} font-semibold mb-4`}>运行规则配置</h3>
+
+              {[
+                { title: '启用状态门控', desc: '每个阶段需要明确放行才能进入下一阶段', enabled: true },
+                { title: '启用逻辑链校验', desc: '自动检查策略链的完整性和一致性', enabled: true },
+                { title: '启用风险强制复核', desc: '高风险项必须人工确认才能继续', enabled: false },
+                { title: '允许局部并行', desc: '部分独立阶段可以并行执行', enabled: true },
+              ].map((rule, index) => (
+                <div key={index} className={`flex items-center justify-between py-4 border-b ${cardBorder} last:border-0`}>
+                  <div>
+                    <div className="flex items-center gap-2">
+                      <p className={`${textPrimary} font-medium`}>{rule.title}</p>
+                      {rule.enabled && (
+                        <CheckCircle className="w-4 h-4 text-green-400" />
+                      )}
+                    </div>
+                    <p className={`${textMuted} text-sm mt-1`}>{rule.desc}</p>
+                  </div>
+                  <label className="relative inline-flex items-center cursor-pointer">
+                    <input type="checkbox" className="sr-only peer" defaultChecked={rule.enabled} />
+                    <div className="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                  </label>
+                </div>
+              ))}
+
+              <div className="grid grid-cols-2 gap-6 pt-4">
+                <div>
+                  <label className={`block ${textSecondary} text-sm mb-2`}>最大讨论轮数</label>
+                  <input
+                    type="number"
+                    defaultValue={10}
+                    className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm focus:outline-none focus:border-blue-500/50`}
+                  />
+                </div>
+                <div>
+                  <label className={`block ${textSecondary} text-sm mb-2`}>最大回退次数</label>
+                  <input
+                    type="number"
+                    defaultValue={3}
+                    className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm focus:outline-none focus:border-blue-500/50`}
+                  />
+                </div>
+              </div>
+
+              <div className="pt-4">
+                <label className={`block ${textSecondary} text-sm mb-2`}>异常中断处理方式</label>
+                <select className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm focus:outline-none focus:border-blue-500/50`}>
+                  <option>自动保存并暂停</option>
+                  <option>自动回退到上一节点</option>
+                  <option>通知负责人并等待</option>
+                </select>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* 右侧场景摘要区 */}
+        <div className="space-y-4">
+          {/* 场景统计卡片 */}
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+            <h3 className={`${textPrimary} font-semibold mb-4`}>场景摘要</h3>
+            <div className="space-y-3">
+              <div className="flex items-center justify-between p-3 bg-blue-500/10 border border-blue-500/30 rounded-lg">
+                <span className={`${textSecondary} text-sm`}>流程节点数</span>
+                <span className="text-blue-400 font-bold">{sceneSummary.flowNodesCount}</span>
+              </div>
+              <div className="flex items-center justify-between p-3 bg-purple-500/10 border border-purple-500/30 rounded-lg">
+                <span className={`${textSecondary} text-sm`}>绑定智能体</span>
+                <span className="text-purple-400 font-bold">{sceneSummary.boundAgentsCount}</span>
+              </div>
+              <div className={`flex items-center justify-between p-3 ${inputBg} ${isDark ? 'border-slate-700/30' : 'border-gray-300'} rounded-lg`}>
+                <span className={`${textSecondary} text-sm`}>串行节点</span>
+                <span className={`${textSecondary}`}>{sceneSummary.serialNodes}</span>
+              </div>
+              <div className="flex items-center justify-between p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg">
+                <span className={`${textSecondary} text-sm`}>并行节点</span>
+                <span className="text-amber-400">{sceneSummary.parallelNodes}</span>
+              </div>
+              <div className="flex items-center justify-between p-3 bg-green-500/10 border border-green-500/30 rounded-lg">
+                <span className={`${textSecondary} text-sm`}>逻辑链校验</span>
+                <span className="text-green-400">{sceneSummary.logicChainEnabled ? '已启用' : '未启用'}</span>
+              </div>
+            </div>
+          </div>
+
+          {/* 最近发布时间 */}
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+            <div className={`flex items-center gap-2 ${textSecondary} text-sm mb-2`}>
+              <Clock className="w-4 h-4" />
+              最近发布时间
+            </div>
+            <p className={`${textPrimary}`}>{sceneSummary.lastPublishedTime}</p>
+          </div>
+
+          {/* 节点属性面板 */}
+          {selectedNode && (
+            <div className={`${cardBg} backdrop-blur-xl border border-blue-500/30 rounded-xl p-5`}>
+              <div className="flex items-center justify-between mb-4">
+                <h3 className={`${textPrimary} font-semibold`}>节点属性</h3>
+                <button
+                  onClick={() => setSelectedNode(null)}
+                  className={`p-1 ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-gray-100'} rounded`}
+                >
+                  <X className={`w-4 h-4 ${textSecondary}`} />
+                </button>
+              </div>
+
+              <div className="space-y-4">
+                <div>
+                  <p className={`${textMuted} text-xs mb-1`}>节点名称</p>
+                  <p className={`${textPrimary}`}>{selectedNode.name}</p>
+                </div>
+                <div>
+                  <p className={`${textMuted} text-xs mb-1`}>绑定智能体</p>
+                  <p className="text-cyan-400">{selectedNode.agent}</p>
+                </div>
+                <div>
+                  <p className={`${textMuted} text-xs mb-1`}>上游依赖</p>
+                  <div className="space-y-1">
+                    {selectedNode.inputSource.map((input) => (
+                      <div key={input} className={`${textSecondary} text-sm ${inputBg} px-2 py-1 rounded`}>
+                        {input}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                <div>
+                  <p className={`${textMuted} text-xs mb-1`}>输出字段</p>
+                  <div className="space-y-1">
+                    {selectedNode.outputFields.map((output) => (
+                      <div key={output} className="text-green-400 text-sm bg-green-500/10 px-2 py-1 rounded">
+                        {output}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                <div>
+                  <p className={`${textMuted} text-xs mb-1`}>放行条件</p>
+                  <p className="text-amber-400 text-sm">{selectedNode.releaseCondition}</p>
+                </div>
+                <div>
+                  <p className={`${textMuted} text-xs mb-1`}>回退节点</p>
+                  <p className={`${textSecondary} text-sm`}>{selectedNode.rollbackNode}</p>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className={`${textMuted} text-sm`}>允许并行</span>
+                  <span className={selectedNode.allowParallel ? 'text-green-400' : `${textSecondary}`}>
+                    {selectedNode.allowParallel ? '是' : '否'}
+                  </span>
+                </div>
+              </div>
+
+              <div className={`mt-4 pt-4 border-t ${cardBorder} space-y-2`}>
+                <button className={`w-full flex items-center justify-center gap-2 px-3 py-2 ${btnPrimary} ${textPrimary} rounded-lg text-sm transition-colors`}>
+                  <Settings className="w-4 h-4" />
+                  编辑节点
+                </button>
+                <div className="flex gap-2">
+                  <button className={`flex-1 flex items-center justify-center gap-1 px-3 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}>
+                    <Plus className="w-3 h-3" />
+                    前置
+                  </button>
+                  <button className={`flex-1 flex items-center justify-center gap-1 px-3 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}>
+                    <Plus className="w-3 h-3" />
+                    后置
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SceneDetail;
diff --git a/web-code/pages/SceneList.tsx b/web-code/pages/SceneList.tsx
new file mode 100644
index 00000000..ad225450
--- /dev/null
+++ b/web-code/pages/SceneList.tsx
@@ -0,0 +1,482 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Plus, Search, Eye, Edit, Copy, Trash2, Play, Pause, ChevronRight, Layers } from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+import { PageType } from '../components/Sidebar';
+
+import { requestCrudService } from '@/service/request-axios-service';
+import { Pagination, Dialog, Input, Textarea, Radio, Button, MessagePlugin, Popconfirm, Loading } from 'tdesign-react';
+import { useNavigate } from 'react-router-dom';
+
+interface SceneListProps {
+  onViewDetail: (id: string) => void;
+  onNavigate: (page: PageType) => void;
+}
+
+interface sceneItem {
+  id?: number;
+  status?: number;
+  applicableTask?: string;
+  sceneName?: string;
+  sceneType: string;
+  sceneIntro: string;
+  sceneCode: string;
+  relatedAgent: string;
+  deleted?: number;
+  updateTime?: string;
+  taskJson?: string;
+  version: string;
+}
+
+const zncmUrl = import.meta.env.VITE_API_BASE_URL || '';
+const sceneStatus = {
+  0: '执行中',
+  1: '成功',
+  2: '失败',
+  3: '部分成功'
+}
+const SceneList: React.FC<SceneListProps> = ({ onViewDetail, onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const [visible, setVisible] = useState(false);
+  const [editDataShow, setEditDataShow] = useState(false);
+  const [sceneName, setSceneName] = useState('');
+  const [scenes, setScenes] = useState<sceneItem[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [editLoading, setEditLoading] = useState<boolean>(false);
+  const [pageNum, setPageNum] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(10);
+  const [total, setTotal] = useState<number>(0);
+  const [formData, setFormData] = useState<sceneItem>({
+    applicableTask: '',
+    relatedAgent: '',
+    sceneCode: '',
+    sceneIntro: '',
+    sceneName: '',
+    sceneType: '',
+    taskJson: '',
+    version: '',
+  });
+  const state = useRef({
+    pageNum: 1,
+    pageSize: 10
+  });
+  const navigate = useNavigate();
+
+  const scenesDataSearch = async (pageNumParam?: number, pageSizeParam?: number, sceneNameParam?: string) => {
+    const parmy = {
+      pageNum: pageNumParam ?? state.current.pageNum,
+      pageSize: pageSizeParam ?? state.current.pageSize,
+      sceneName: sceneNameParam ?? sceneName
+    }
+    setLoading(true);
+    const res = await requestCrudService.get(`${zncmUrl}/scene/scenes`, parmy);
+    setLoading(false);
+    res.data.records.forEach((item) => {
+      if (item.taskJson) {
+        item.taskJson = JSON.parse(item.taskJson);
+      }
+    })
+    console.log('res.data.records', res.data.records)
+    setScenes(res.data.records || []);
+    setTotal(res.data.total || 0);
+  }
+
+  const addScene = async () => {
+    const res = await requestCrudService.post(`${zncmUrl}/scene/sceneAdd`, formData);
+    setVisible(false);
+    MessagePlugin.success('新增场景成功');
+    await scenesDataSearch();
+  }
+
+  const updateScene = async () => {
+    setEditLoading(true);
+    const res = await requestCrudService.post(`${zncmUrl}/scene/sceneUpdate`, {
+      ...formData,
+    });
+    setEditLoading(false);
+    setEditDataShow(false);
+    MessagePlugin.success('更新场景成功');
+    await scenesDataSearch();
+  }
+
+  const handleDataChange = (key: keyof typeof formData, value: string | number) => {
+    setFormData((prev) => ({
+      ...prev,
+      [key]: value,
+    }));
+  };
+
+  const showDialog = () => {
+    setFormData({
+      applicableTask: '',
+      relatedAgent: '',
+      sceneCode: '',
+      sceneIntro: '',
+      sceneName: '',
+      sceneType: '',
+      version: ''
+    });
+    setVisible(true);
+  };
+
+  const editShowChange = async (item: sceneItem) => {
+    const response = await fetch('https://ch1.b.uat.4.cn/zncmweb/templates/6b_template.json');
+    const data = await response.json();
+    console.log('response', JSON.stringify(data));
+    // let taskJson = 
+    setFormData({
+      applicableTask: item.applicableTask,
+      deleted: item.deleted,
+      id: item.id,
+      relatedAgent: item.relatedAgent,
+      sceneCode: item.sceneCode,
+      sceneIntro: item.sceneIntro,
+      sceneName: item.sceneName,
+      sceneType: item.sceneType,
+      status: item.status,
+      taskJson: JSON.stringify(data),
+      version: item.version
+    });
+    setEditDataShow(true);
+  }
+
+  const { Group: RadioGroup, Button: RadioButton } = Radio;
+
+  const delDataChange = async (item: sceneItem) => {
+    const res = await requestCrudService.delete(`${zncmUrl}/scene/sceneDelete/${item.id}`)
+    console.log(res);
+    MessagePlugin.success('场景删除成功');
+    await scenesDataSearch();
+  }
+
+  const handleConfirm = (item: sceneItem) => {
+    // 确认删除逻辑
+    console.log('用户点击了确认');
+    delDataChange(item);
+    return true; // 返回 true 表示确认执行
+  };
+
+  const handleCancel = () => {
+    // 取消删除逻辑
+    console.log('用户点击了取消');
+    return true; // 返回 true 表示取消
+  };
+  const pageIndexChange = async (value: number) => {
+    state.current.pageNum = value;
+    setPageNum(value);
+    await scenesDataSearch();
+  }
+
+  const pageSizeChange = async (value: number) => {
+    state.current.pageSize = value;
+    setPageSize(value);
+    await scenesDataSearch();
+  }
+
+  // 回车处理
+  const handleKeyDown = async (e) => {
+    if ((e.metaKey || e.ctrlKey || e.shiftKey) && e.key === "Enter") {
+      e.preventDefault();
+    } else if (e.keyCode === 13) {
+      e.preventDefault();
+      await scenesDataSearch();
+    } else if (e.key === "/") {
+      e.preventDefault();
+    }
+  };
+
+  useEffect(() => {
+    scenesDataSearch();
+  }, [])
+
+  return (
+    <div className="space-y-6">
+      {/* 页面标题区 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-gray-900'} mb-2`}>业务链条管理</h1>
+          <p className={`${isDark ? 'text-slate-400' : 'text-gray-600'} text-sm`}>管理和配置宣传策略流程模板</p>
+        </div>
+        <Button theme="primary" onClick={showDialog}>
+          <Plus className="w-4 h-4 mr-2" />
+          <span className="text-sm font-medium">新建场景</span>
+        </Button>
+      </div>
+
+      {/* 搜索和筛选区 */}
+      <div className="flex items-center gap-4">
+        <div className="relative flex-1 max-w-md">
+          <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
+          <input
+            type="text"
+            value={sceneName}
+            onChange={(e) => setSceneName(e.target.value)}
+            onKeyDown={(e) => handleKeyDown(e)}
+            placeholder="搜索场景名称..."
+            className={`w-full pl-10 pr-4 py-2.5 ${isDark ? 'bg-slate-800/30' : 'bg-gray-50'} border ${isDark ? 'border-blue-800/30' : 'border-gray-300'} rounded-lg ${isDark ? 'text-white' : 'text-gray-900'} placeholder-${isDark ? 'text-slate-500' : 'text-gray-500'} text-sm focus:outline-none focus:border-blue-500/50 transition-colors`}
+          />
+        </div>
+        {/* <button className={`px-4 py-2.5 ${isDark ? 'bg-slate-800/50 border-blue-800/30' : 'bg-gray-100 border-gray-300'} rounded-lg ${isDark ? 'bg-slate-700/50 border-blue-800/30 text-slate-300 hover:bg-slate-600/50' : 'bg-gray-100 border-gray-300 text-gray-700 hover:bg-gray-200'} transition-colors`}>
+          全部类型
+        </button>
+        <button className={`px-4 py-2.5 ${isDark ? 'bg-slate-800/50 border-blue-800/30' : 'bg-gray-100 border-gray-300'} rounded-lg ${isDark ? 'bg-slate-700/50 border-blue-800/30 text-slate-300 hover:bg-slate-600/50' : 'bg-gray-100 border-gray-300 text-gray-700 hover:bg-gray-200'} transition-colors`}>
+          全部状态
+        </button> */}
+      </div>
+
+      {/* 场景列表 */}
+      <div className={`${isDark ? 'bg-slate-800/30' : 'bg-white'} backdrop-blur-xl border ${isDark ? 'border-blue-800/20' : 'border-gray-200'} rounded-xl overflow-hidden`}>
+        <Loading loading={loading} text="正在加载...">
+          <table className="w-full">
+            <thead>
+              <tr className={`border-b ${isDark ? 'border-blue-800/20' : 'border-gray-200'}`}>
+                <th className={`text-left px-6 py-4 text-xs font-semibold ${isDark ? 'text-slate-400' : 'text-gray-600'} uppercase tracking-wider`}>场景名称</th>
+                <th className={`text-left px-6 py-4 text-xs font-semibold ${isDark ? 'text-slate-400' : 'text-gray-600'} uppercase tracking-wider`}>场景类型</th>
+                <th className={`text-left px-6 py-4 text-xs font-semibold ${isDark ? 'text-slate-400' : 'text-gray-600'} uppercase tracking-wider`}>适用任务</th>
+                <th className={`text-left px-6 py-4 text-xs font-semibold ${isDark ? 'text-slate-400' : 'text-gray-600'} uppercase tracking-wider`}>版本</th>
+                <th className={`text-left px-6 py-4 text-xs font-semibold ${isDark ? 'text-slate-400' : 'text-gray-600'} uppercase tracking-wider`}>更新时间</th>
+                <th className={`text-left px-6 py-4 text-xs font-semibold ${isDark ? 'text-slate-400' : 'text-gray-600'} uppercase tracking-wider`}>状态</th>
+                <th className={`text-left px-6 py-4 text-xs font-semibold ${isDark ? 'text-slate-400' : 'text-gray-600'} uppercase tracking-wider`}>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              {scenes.map((scene) => (
+                <tr key={scene.id} className={`border-b ${isDark ? 'border-blue-800/20' : 'border-gray-200'} hover:bg-slate-700/20 transition-colors`}>
+                  <td className="px-6 py-4">
+                    <div className="flex items-center gap-3">
+                      <div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
+                        <Layers className="w-5 h-5 text-blue-400" />
+                      </div>
+                      <span className={`${isDark ? 'text-white' : 'text-gray-900'} font-medium`}>{scene.sceneName}</span>
+                    </div>
+                  </td>
+                  <td className="px-6 py-4">
+                    <span className={`${isDark ? 'text-slate-400' : 'text-gray-600'} text-sm`}>{scene.sceneType}</span>
+                  </td>
+                  <td className="px-6 py-4">
+                    <span className={`${isDark ? 'text-slate-400' : 'text-gray-600'} text-sm`}>{scene.sceneIntro}</span>
+                  </td>
+                  <td className="px-6 py-4">
+                    <span className={`${isDark ? 'text-slate-400' : 'text-gray-600'} text-sm`}>{scene.version}</span>
+                  </td>
+                  <td className="px-6 py-4">
+                    <span className={`${isDark ? 'text-slate-400' : 'text-gray-600'} text-sm`}>{scene.updateTime}</span>
+                  </td>
+                  <td className="px-6 py-4">
+                    <span
+                      className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${scene.status === 0
+                        ? 'bg-green-500/20 text-green-400'
+                        : scene.status === 1
+                          ? 'bg-yellow-500/20 text-yellow-400'
+                          : `${isDark ? 'bg-slate-500/20 text-slate-400' : 'bg-gray-500/20 text-gray-500'}`
+                        }`}
+                    >
+                      <span
+                        className={`w-1.5 h-1.5 rounded-full ${scene.status === 0
+                          ? 'bg-green-400'
+                          : scene.status === 1
+                            ? 'bg-yellow-400'
+                            : isDark ? 'bg-slate-400' : 'bg-gray-400'
+                          }`}
+                      />
+                      {sceneStatus[scene.status]}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4">
+                    <div className="flex items-center gap-2">
+                      <button
+                        onClick={() => {
+                          navigate(`/scene-detail/${scene.id}`);
+                        }}
+                        className="p-2 hover:bg-slate-700/50 rounded-lg transition-colors group"
+                        title="查看"
+                      >
+                        <Eye className={`w-4 h-4 ${isDark ? 'text-slate-500' : 'text-gray-500'} group-hover:${isDark ? 'text-white' : 'text-gray-900'}`} />
+                      </button>
+                      {/* <button className="p-2 hover:bg-slate-700/50 rounded-lg transition-colors group" title="编辑" onClick={() => editShowChange(scene)}>
+                        <Edit className={`w-4 h-4 ${isDark ? 'text-slate-500' : 'text-gray-500'} group-hover:${isDark ? 'text-white' : 'text-gray-900'}`} />
+                      </button> */}
+                      {/* <button className="p-2 hover:bg-slate-700/50 rounded-lg transition-colors group" title="复制">
+                      <Copy className={`w-4 h-4 ${isDark ? 'text-slate-500' : 'text-gray-500'} group-hover:${isDark ? 'text-white' : 'text-gray-900'}`} />
+                    </button> */}
+                      {/* <button
+                        onClick={() => onNavigate('task-scene')}
+                        className="p-2 hover:bg-blue-500/20 rounded-lg transition-colors group"
+                        title="启动"
+                      >
+                        <Play className={`w-4 h-4 ${isDark ? 'text-slate-500' : 'text-gray-500'} group-hover:text-blue-400`} />
+                      </button> */}
+                      {/* <Popconfirm
+                        content="确认删除吗"
+                        onConfirm={() => handleConfirm(scene)}
+                        onCancel={handleCancel}
+                      >
+                        <button className="p-2 hover:bg-red-500/20 rounded-lg transition-colors group" title="删除">
+                          <Trash2 className={`w-4 h-4 ${isDark ? 'text-slate-500' : 'text-gray-500'} group-hover:text-red-400`} />
+                        </button>
+                      </Popconfirm> */}
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Loading>
+      </div>
+
+      {/* 分页 */}
+      <div className="p-4 text-center">
+        <Pagination
+          total={total}
+          current={pageNum}
+          pageSize={pageSize}
+          onCurrentChange={(page) => pageIndexChange(Number(page))}
+          onPageSizeChange={(size) => pageSizeChange(Number(size))}
+        />
+      </div>
+
+      {/* 新增对话框 */}
+      <Dialog
+        header="新增场景"
+        visible={visible}
+        onConfirm={addScene}
+        onCancel={() => setVisible(false)}
+        onClose={() => setVisible(false)}
+        closeOnOverlayClick={true}
+      >
+        <div className="mb-4">
+          <Input
+            label="场景名称"
+            value={formData.sceneName}
+            onChange={(val) => handleDataChange('sceneName', val)}
+            placeholder="请输入场景名称"
+            className="w-full"
+          />
+        </div>
+        <div className="mb-4">
+          <Input
+            label="场景类型"
+            value={formData.sceneType}
+            onChange={(val) => handleDataChange('sceneType', val)}
+            placeholder="请输入场景类型"
+            className="w-full"
+          />
+        </div>
+        <div className="mb-4">
+          <Input
+            label="适用任务"
+            value={formData.applicableTask}
+            onChange={(val) => handleDataChange('applicableTask', val)}
+            placeholder="请输入适用任务"
+            className="w-full"
+          />
+        </div>
+        <div className="mb-4">
+          <Input
+            label="场景代码"
+            value={formData.sceneCode}
+            onChange={(val) => handleDataChange('sceneCode', val)}
+            placeholder="请输入场景代码"
+            className="w-full"
+          />
+        </div>
+        <div className="mb-4">
+          <Input
+            label="版本"
+            value={formData.version}
+            onChange={(val) => handleDataChange('version', val)}
+            placeholder="请输入版本"
+            className="w-full"
+          />
+        </div>
+        <div>
+          <Textarea
+            value={formData.sceneIntro}
+            onChange={(val) => handleDataChange('sceneIntro', val)}
+            placeholder="请输入场景简介"
+            className="w-full"
+          />
+        </div>
+      </Dialog>
+
+      {/* 编辑对话框 */}
+      <Dialog
+        header="编辑场景"
+        visible={editDataShow}
+        onConfirm={updateScene}
+        confirmBtn={{
+          content: '确定',
+          theme: 'primary',
+          loading: editLoading,
+        }}
+        onCancel={() => setEditDataShow(false)}
+        onClose={() => setEditDataShow(false)}
+        closeOnOverlayClick={true}
+      >
+        <div className="mb-4">
+          <Input
+            label="场景名称"
+            value={formData.sceneName}
+            onChange={(val) => handleDataChange('sceneName', val)}
+            placeholder="请输入场景名称"
+            className="w-full"
+          />
+        </div>
+        <div className="mb-4">
+          <Input
+            label="场景类型"
+            value={formData.sceneType}
+            onChange={(val) => handleDataChange('sceneType', val)}
+            placeholder="请输入场景类型"
+            className="w-full"
+          />
+        </div>
+        <div className="mb-4">
+          <Input
+            label="适用任务"
+            value={formData.applicableTask}
+            onChange={(val) => handleDataChange('applicableTask', val)}
+            placeholder="请输入适用任务"
+            className="w-full"
+          />
+        </div>
+        <div className="mb-4">
+          <Input
+            label="场景代码"
+            value={formData.sceneCode}
+            onChange={(val) => handleDataChange('sceneCode', val)}
+            placeholder="请输入场景代码"
+            className="w-full"
+          />
+        </div>
+        <div className="mb-4">
+          <Input
+            label="版本"
+            value={formData.version}
+            onChange={(val) => handleDataChange('version', val)}
+            placeholder="请输入版本"
+            className="w-full"
+          />
+        </div>
+        <div className="mb-4">
+          <Textarea
+            value={formData.sceneIntro}
+            onChange={(val) => handleDataChange('sceneIntro', val)}
+            placeholder="请输入场景简介"
+            className="w-full"
+          />
+        </div>
+        {/* <div>
+          <Textarea
+            value={formData.taskJson}
+            onChange={(val) => handleDataChange('taskJson', val)}
+            placeholder="请输入场景JSON"
+            className="w-full"
+          />
+        </div> */}
+      </Dialog>
+    </div>
+  );
+};
+
+export default SceneList;
\ No newline at end of file
diff --git a/web-code/pages/StrategyResult.tsx b/web-code/pages/StrategyResult.tsx
new file mode 100644
index 00000000..46332651
--- /dev/null
+++ b/web-code/pages/StrategyResult.tsx
@@ -0,0 +1,347 @@
+import React, { useState } from 'react';
+import {
+  FileText,
+  Clock,
+  CheckCircle,
+  AlertTriangle,
+  ChevronDown,
+  ChevronRight,
+  Target,
+  Users,
+  TrendingUp,
+  MessageSquare,
+  Megaphone,
+  Shield,
+  ArrowRight,
+  Download,
+  RefreshCw,
+  Eye,
+} from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+import { PageType } from '../components/Sidebar';
+
+interface StrategyResultProps {
+  onNavigate: (page: PageType) => void;
+}
+
+const StrategyResult: React.FC<StrategyResultProps> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 主题颜色类
+  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
+  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const textMuted = isDark ? 'text-slate-500' : 'text-gray-500';
+  const btnSecondary = isDark ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300' : 'bg-gray-100 hover:bg-gray-200 border-gray-300 text-gray-700';
+  const btnPrimary = isDark ? 'bg-blue-600 hover:bg-blue-500' : 'bg-red-600 hover:bg-red-500';
+  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-gray-50';
+  const inputBorder = isDark ? 'border-blue-800/30' : 'border-gray-300';
+
+  const [expandedSection, setExpandedSection] = useState<string | null>('goal');
+
+  const strategyChain = [
+    { id: 1, name: '目标', icon: Target, color: 'blue', status: 'completed' },
+    { id: 2, name: '受众', icon: Users, color: 'cyan', status: 'completed' },
+    { id: 3, name: '行为', icon: TrendingUp, color: 'green', status: 'completed' },
+    { id: 4, name: '驱动', icon: MessageSquare, color: 'yellow', status: 'completed' },
+    { id: 5, name: '叙事', icon: Megaphone, color: 'purple', status: 'completed' },
+    { id: 6, name: '风险', icon: Shield, color: 'red', status: 'completed' },
+  ];
+
+  const versionHistory = [
+    { version: 'V3', time: '2026-03-19 15:30', changes: ['叙事由"事件主导"改为"人物+事件结合"', '风险项已修正'] },
+    { version: 'V2', time: '2026-03-19 14:20', changes: ['受众由"全体青年"收窄为"基层青年"', '目标行为已明确'] },
+    { version: 'V1', time: '2026-03-19 10:30', changes: ['初始版本生成'] },
+  ];
+
+  const toggleSection = (section: string) => {
+    setExpandedSection(expandedSection === section ? null : section);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 顶部信息栏 */}
+      <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-6">
+            <div className="flex items-center gap-3">
+              <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 flex items-center justify-center">
+                <FileText className="w-6 h-6 text-blue-400" />
+              </div>
+              <div>
+                <h2 className={`${textPrimary} font-bold text-lg`}>五四青年节宣传活动策略</h2>
+                <p className={`${textSecondary} text-sm`}>策略讨论结果 · 已收敛</p>
+              </div>
+            </div>
+            <div className="h-12 w-px bg-blue-800/30" />
+            <div className="grid grid-cols-4 gap-6 text-sm">
+              <div>
+                <p className={`${textMuted}`}>使用场景</p>
+                <p className={`${textPrimary} font-medium`}>宣传策略生成</p>
+              </div>
+              <div>
+                <p className={`${textMuted}`}>运行时长</p>
+                <p className={`${textPrimary} font-medium`}>5小时32分</p>
+              </div>
+              <div>
+                <p className={`${textMuted}`}>当前版本</p>
+                <p className="text-cyan-400 font-medium">V3</p>
+              </div>
+              <div>
+                <p className={`${textMuted}`}>完成度</p>
+                <p className="text-green-400 font-medium flex items-center gap-1">
+                  <CheckCircle className="w-4 h-4" /> 100%
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => onNavigate('task-scene')}
+              className={`flex items-center gap-2 px-4 py-2.5 ${btnSecondary} rounded-lg text-sm transition-colors`}
+            >
+              <Eye className="w-4 h-4" />
+              返回工作台
+            </button>
+            <button className={`flex items-center gap-2 px-4 py-2.5 ${btnPrimary} text-white rounded-lg text-sm transition-colors`}>
+              <FileText className="w-4 h-4" />
+              生成最终方案
+              <ArrowRight className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-3 gap-6">
+        {/* 左侧 - 策略链和详情 (70%) */}
+        <div className="col-span-2 space-y-6">
+          {/* 策略链可视化 */}
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+            <h3 className={`${textPrimary} font-semibold mb-4`}>策略链结果</h3>
+            <div className="flex items-center justify-between">
+              {strategyChain.map((item, index) => {
+                const Icon = item.icon;
+                return (
+                  <React.Fragment key={item.id}>
+                    <div className="flex flex-col items-center">
+                      <div className={`w-14 h-14 rounded-xl bg-${item.color}-500/20 border-2 border-${item.color}-500/50 flex items-center justify-center mb-2`}>
+                        <Icon className={`w-7 h-7 text-${item.color}-400`} />
+                      </div>
+                      <span className={`text-${item.color}-400 text-sm font-medium`}>{item.name}</span>
+                      <span className={`${textMuted} text-xs mt-1 flex items-center gap-1`}>
+                        <CheckCircle className="w-3 h-3 text-green-400" /> 已确认
+                      </span>
+                    </div>
+                    {index < strategyChain.length - 1 && (
+                      <ArrowRight className="w-6 h-6 text-slate-600 mb-6" />
+                    )}
+                  </React.Fragment>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* 详细结果 */}
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl overflow-hidden`}>
+            {[
+              {
+                id: 'goal',
+                title: '目标',
+                icon: Target,
+                color: 'blue',
+                content: {
+                  primary: '提升品牌在Z世代用户中的认知度',
+                  secondary: '建立品牌年轻化形象，增强用户情感连接',
+                },
+              },
+              {
+                id: 'audience',
+                title: '受众',
+                icon: Users,
+                color: 'cyan',
+                content: {
+                  primary: '核心受众：18-25岁基层青年',
+                  secondary: '次级受众：25-30岁职场新人',
+                  insights: ['社交媒体重度用户', '注重性价比', '偏好真实、有态度的品牌'],
+                },
+              },
+              {
+                id: 'behavior',
+                title: '行为',
+                icon: TrendingUp,
+                color: 'green',
+                content: {
+                  primary: '主动参与话题讨论、生成UGC内容',
+                  conversion: '浏览→点赞→评论→转发→创作',
+                },
+              },
+              {
+                id: 'driver',
+                title: '驱动',
+                icon: MessageSquare,
+                color: 'yellow',
+                content: {
+                  primary: '社交认同与自我表达',
+                  secondary: ['归属感需求', '表达欲驱动', '群体认同激励'],
+                },
+              },
+              {
+                id: 'narrative',
+                title: '叙事',
+                icon: Megaphone,
+                color: 'purple',
+                content: {
+                  primary: '真实、有态度的青年故事',
+                  approach: '人物+事件结合，以真实故事传递品牌价值观',
+                },
+              },
+              {
+                id: 'risk',
+                title: '风险',
+                icon: Shield,
+                color: 'red',
+                content: {
+                  risks: ['预算有限，需控制成本', '青年群体注意力分散', 'UGC质量难以保证'],
+                  suggestions: ['提前布局预热', '设置激励机制', '建立内容审核机制'],
+                },
+              },
+            ].map((section) => {
+              const Icon = section.icon;
+              const isExpanded = expandedSection === section.id;
+              return (
+                <div key={section.id} className={`border-b ${cardBorder} last:border-0`}>
+                  <button
+                    onClick={() => toggleSection(section.id)}
+                    className="w-full flex items-center justify-between p-4 hover:bg-slate-700/20 transition-colors"
+                  >
+                    <div className="flex items-center gap-3">
+                      <div className={`w-10 h-10 rounded-lg bg-${section.color}-500/20 flex items-center justify-center`}>
+                        <Icon className={`w-5 h-5 text-${section.color}-400`} />
+                      </div>
+                      <div className="text-left">
+                        <p className={`${textPrimary} font-medium`}>{section.title}</p>
+                        <p className={`text-${section.color}-400 text-sm`}>{section.content.primary}</p>
+                      </div>
+                    </div>
+                    {isExpanded ? (
+                      <ChevronDown className={`w-5 h-5 ${textSecondary}`} />
+                    ) : (
+                      <ChevronRight className={`w-5 h-5 ${textSecondary}`} />
+                    )}
+                  </button>
+                  {isExpanded && (
+                    <div className="px-4 pb-4 pt-0 ml-13">
+                      <div className={`p-4 ${inputBg} rounded-lg space-y-3`}>
+                        {Object.entries(section.content).map(([key, value]) => (
+                          <div key={key}>
+                            <p className={`${textMuted} text-xs uppercase mb-1`}>{key}</p>
+                            {Array.isArray(value) ? (
+                              <ul className={`list-disc list-inside ${textSecondary} text-sm space-y-1`}>
+                                {value.map((item, index) => (
+                                  <li key={index}>{item}</li>
+                                ))}
+                              </ul>
+                            ) : (
+                              <p className={`${textPrimary} text-sm`}>{value}</p>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* 右侧 - 摘要和版本记录 (30%) */}
+        <div className="space-y-6">
+          {/* 关键结论摘要 */}
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+            <h3 className={`${textPrimary} font-semibold mb-4`}>关键结论摘要</h3>
+            <div className="space-y-3">
+              <div className="p-3 bg-blue-500/10 border border-blue-500/30 rounded-lg">
+                <p className="text-blue-400 text-xs font-medium mb-1">为什么选择这类受众</p>
+                <p className={`${textPrimary} text-sm`}>基层青年是品牌年轻化战略的核心突破口，具有强社交传播属性</p>
+              </div>
+              <div className="p-3 bg-green-500/10 border border-green-500/30 rounded-lg">
+                <p className="text-green-400 text-xs font-medium mb-1">为什么设计这种行为目标</p>
+                <p className={`${textPrimary} text-sm`}>UGC是最高效的信任传递方式，用户生成内容具有真实性和可信度</p>
+              </div>
+              <div className="p-3 bg-purple-500/10 border border-purple-500/30 rounded-lg">
+                <p className="text-purple-400 text-xs font-medium mb-1">为什么采用这种叙事</p>
+                <p className={`${textPrimary} text-sm`}>真实故事比硬广更能打动年轻人，人物视角增强代入感</p>
+              </div>
+            </div>
+          </div>
+
+          {/* 版本对比记录 */}
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+            <div className="flex items-center justify-between mb-4">
+              <h3 className={`${textPrimary} font-semibold`}>版本迭代记录</h3>
+              <button className="flex items-center gap-1 text-blue-400 text-sm hover:text-blue-300 transition-colors">
+                <RefreshCw className="w-4 h-4" />
+                对比
+              </button>
+            </div>
+            <div className="space-y-3">
+              {versionHistory.map((version, index) => (
+                <div
+                  key={version.version}
+                  className={`p-3 rounded-lg border ${
+                    index === 0
+                      ? 'bg-cyan-500/10 border-cyan-500/30'
+                      : `${inputBg} border-slate-700/30`
+                  }`}
+                >
+                  <div className="flex items-center justify-between mb-2">
+                    <span className={`font-bold ${
+                      index === 0 ? 'text-cyan-400' : textSecondary
+                    }`}>
+                      {version.version}
+                    </span>
+                    <span className={`${textMuted} text-xs`}>{version.time}</span>
+                  </div>
+                  <ul className="space-y-1">
+                    {version.changes.map((change, i) => (
+                      <li key={i} className={`${textPrimary} text-xs flex items-start gap-1`}>
+                        <span className={textSecondary}>•</span>
+                        {change}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* 导出选项 */}
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-5`}>
+            <h3 className={`${textPrimary} font-semibold mb-4`}>导出选项</h3>
+            <div className="space-y-2">
+              <button className={`w-full flex items-center justify-between p-3 ${inputBg} hover:bg-slate-800/50 ${inputBorder} rounded-lg transition-colors`}>
+                <div className="flex items-center gap-3">
+                  <FileText className="w-5 h-5 text-blue-400" />
+                  <span className={`${textPrimary} text-sm`}>导出讨论记录</span>
+                </div>
+                <Download className={`w-4 h-4 ${textSecondary}`} />
+              </button>
+              <button className={`w-full flex items-center justify-between p-3 ${inputBg} hover:bg-slate-800/50 ${inputBorder} rounded-lg transition-colors`}>
+                <div className="flex items-center gap-3">
+                  <FileText className="w-5 h-5 text-green-400" />
+                  <span className={`${textPrimary} text-sm`}>导出策略结果</span>
+                </div>
+                <Download className={`w-4 h-4 ${textSecondary}`} />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StrategyResult;
diff --git a/web-code/pages/SystemSettings.tsx b/web-code/pages/SystemSettings.tsx
new file mode 100644
index 00000000..e6ea3916
--- /dev/null
+++ b/web-code/pages/SystemSettings.tsx
@@ -0,0 +1,558 @@
+import React, { useState } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import { PageType } from '../components/Sidebar';
+import {
+  Settings,
+  User,
+  Bell,
+  Shield,
+  Database,
+  Palette,
+  Key,
+  Globe,
+  Monitor,
+  Smartphone,
+  Mail,
+  MessageSquare,
+  Clock,
+  Save,
+  RefreshCw,
+  CheckCircle,
+  AlertTriangle,
+  ChevronRight,
+  Building,
+  Users,
+  Bot,
+  Workflow,
+  FileText,
+  Zap,
+} from 'lucide-react';
+
+interface SystemSettingsProps {
+  onNavigate: (page: PageType) => void;
+}
+
+const SystemSettings: React.FC<SystemSettingsProps> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  // 主题颜色类
+  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
+  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-200';
+  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
+  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
+  const textMuted = isDark ? 'text-slate-500' : 'text-gray-500';
+  const btnSecondary = isDark ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300' : 'bg-gray-100 hover:bg-gray-200 border-gray-300 text-gray-700';
+  const btnPrimary = isDark ? 'bg-blue-600 hover:bg-blue-500' : 'bg-red-600 hover:bg-red-500';
+  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-gray-50';
+  const inputBorder = isDark ? 'border-blue-800/30' : 'border-gray-300';
+
+  const [activeTab, setActiveTab] = useState('general');
+  const [settings, setSettings] = useState({
+    // 通用设置
+    systemName: '智能策略系统',
+    systemVersion: 'V1.0.0',
+    language: 'zh-CN',
+    timezone: 'Asia/Shanghai',
+    // 通知设置
+    emailNotification: true,
+    inAppNotification: true,
+    smsNotification: false,
+    // 安全设置
+    sessionTimeout: 30,
+    passwordExpiration: 90,
+    twoFactorAuth: false,
+    // 运行规则
+    maxDiscussionRounds: 10,
+    maxRollbackTimes: 3,
+    enableStateGate: true,
+    enableLogicChainCheck: true,
+    enableRiskReview: true,
+    allowPartialParallel: true,
+  });
+
+  const tabs = [
+    { id: 'general', label: '通用设置', icon: Settings },
+    { id: 'user', label: '用户管理', icon: Users },
+    { id: 'agent', label: '智能体管理', icon: Bot },
+    { id: 'notification', label: '通知设置', icon: Bell },
+    { id: 'security', label: '安全设置', icon: Shield },
+    { id: 'workflow', label: '运行规则', icon: Workflow },
+    { id: 'template', label: '模板管理', icon: FileText },
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* 顶部标题栏 */}
+      <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4`}>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
+              <Settings className="w-5 h-5 text-blue-400" />
+            </div>
+            <div>
+              <h1 className={`${textPrimary} font-bold text-lg`}>系统设置</h1>
+              <p className={`${textSecondary} text-sm`}>管理智能策略系统的各项配置</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <span className="px-3 py-1.5 bg-green-500/20 text-green-400 rounded-full text-sm font-medium flex items-center gap-1.5">
+              <span className="w-2 h-2 bg-green-400 rounded-full" />
+              系统运行正常
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-12 gap-6">
+        {/* 左侧导航 (20%) */}
+        <div className="col-span-3">
+          <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-4 sticky top-6`}>
+            <h3 className={`${textSecondary} text-xs font-medium mb-3 uppercase tracking-wider`}>设置分类</h3>
+            <nav className="space-y-1">
+              {tabs.map((tab) => (
+                <button
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id)}
+                  className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left text-sm transition-colors ${
+                    activeTab === tab.id
+                      ? 'bg-blue-600/20 text-blue-400 border border-blue-500/30'
+                      : `${textSecondary} hover:bg-slate-700/50 hover:${textPrimary}`
+                  }`}
+                >
+                  <tab.icon className="w-4 h-4" />
+                  {tab.label}
+                </button>
+              ))}
+            </nav>
+
+            {/* 系统信息 */}
+            <div className="mt-6 pt-4 border-t border-blue-800/30">
+              <h3 className={`${textSecondary} text-xs font-medium mb-3 uppercase tracking-wider`}>系统信息</h3>
+              <div className="space-y-2 text-xs">
+                <div className="flex justify-between">
+                  <span className={textMuted}>版本号</span>
+                  <span className="text-cyan-400">{settings.systemVersion}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className={textMuted}>运行环境</span>
+                  <span className={textSecondary}>生产环境</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className={textMuted}>最后更新</span>
+                  <span className={textSecondary}>2026-03-19</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 右侧设置区 (80%) */}
+        <div className="col-span-9">
+          {/* 通用设置 */}
+          {activeTab === 'general' && (
+            <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6`}>
+              <h2 className={`${textPrimary} font-semibold text-lg mb-6 flex items-center gap-2`}>
+                <Settings className="w-5 h-5 text-blue-400" />
+                通用设置
+              </h2>
+              <div className="space-y-6">
+                <div className="grid grid-cols-2 gap-6">
+                  <div>
+                    <label className={`block ${textSecondary} text-sm mb-2`}>系统名称</label>
+                    <input
+                      type="text"
+                      value={settings.systemName}
+                      onChange={(e) => setSettings({ ...settings, systemName: e.target.value })}
+                      className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm`}
+                    />
+                  </div>
+                  <div>
+                    <label className={`block ${textSecondary} text-sm mb-2`}>系统版本</label>
+                    <input
+                      type="text"
+                      value={settings.systemVersion}
+                      disabled
+                      className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textMuted} text-sm`}
+                    />
+                  </div>
+                  <div>
+                    <label className={`block ${textSecondary} text-sm mb-2`}>语言</label>
+                    <select
+                      value={settings.language}
+                      onChange={(e) => setSettings({ ...settings, language: e.target.value })}
+                      className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm`}
+                    >
+                      <option value="zh-CN">简体中文</option>
+                      <option value="en-US">English</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className={`block ${textSecondary} text-sm mb-2`}>时区</label>
+                    <select
+                      value={settings.timezone}
+                      onChange={(e) => setSettings({ ...settings, timezone: e.target.value })}
+                      className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm`}
+                    >
+                      <option value="Asia/Shanghai">北京时间 (UTC+8)</option>
+                      <option value="UTC">世界时间 (UTC)</option>
+                    </select>
+                  </div>
+                </div>
+
+                <div className="pt-4 border-t border-blue-800/30">
+                  <div className="flex items-center justify-between p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg">
+                    <div className="flex items-center gap-3">
+                      <Zap className="w-5 h-5 text-blue-400" />
+                      <div>
+                        <p className={`${textPrimary} text-sm font-medium`}>自动保存设置</p>
+                        <p className={`${textSecondary} text-xs`}>开启后，系统会自动保存您的设置更改</p>
+                      </div>
+                    </div>
+                    <button className={`px-4 py-2 ${btnPrimary} ${textPrimary} rounded-lg text-sm transition-colors`}>
+                      已开启
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* 用户管理 */}
+          {activeTab === 'user' && (
+            <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6`}>
+              <div className="flex items-center justify-between mb-6">
+                <h2 className={`${textPrimary} font-semibold text-lg flex items-center gap-2`}>
+                  <Users className="w-5 h-5 text-cyan-400" />
+                  用户管理
+                </h2>
+                <button className={`px-4 py-2 ${btnPrimary} ${textPrimary} rounded-lg text-sm transition-colors flex items-center gap-2`}>
+                  <User className="w-4 h-4" />
+                  添加用户
+                </button>
+              </div>
+              <div className="space-y-3">
+                {[
+                  { name: '张策略', role: '管理员', email: 'zhang@company.com', status: 'active' },
+                  { name: '李智能', role: '策略分析师', email: 'li@company.com', status: 'active' },
+                  { name: '王智能体', role: '智能体管理员', email: 'wang@company.com', status: 'active' },
+                  { name: '赵运维', role: '运维工程师', email: 'zhao@company.com', status: 'inactive' },
+                ].map((user, i) => (
+                  <div key={i} className={`flex items-center justify-between p-4 ${inputBg} ${inputBorder} rounded-lg`}>
+                    <div className="flex items-center gap-4">
+                      <div className="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center">
+                        <User className="w-5 h-5 text-blue-400" />
+                      </div>
+                      <div>
+                        <p className={`${textPrimary} text-sm font-medium`}>{user.name}</p>
+                        <p className={`${textSecondary} text-xs`}>{user.email}</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-4">
+                      <span className={`px-3 py-1 rounded-full text-xs ${
+                        user.role === '管理员' ? 'bg-purple-500/20 text-purple-400' : 'bg-blue-500/20 text-blue-400'
+                      }`}>
+                        {user.role}
+                      </span>
+                      <span className={`px-3 py-1 rounded-full text-xs ${
+                        user.status === 'active' ? 'bg-green-500/20 text-green-400' : 'bg-slate-500/20 text-slate-400'
+                      }`}>
+                        {user.status === 'active' ? '在线' : '离线'}
+                      </span>
+                      <button className="p-2 hover:bg-slate-700 rounded-lg transition-colors">
+                        <ChevronRight className={`w-4 h-4 ${textSecondary}`} />
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* 智能体管理 */}
+          {activeTab === 'agent' && (
+            <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6`}>
+              <div className="flex items-center justify-between mb-6">
+                <h2 className={`${textPrimary} font-semibold text-lg flex items-center gap-2`}>
+                  <Bot className="w-5 h-5 text-purple-400" />
+                  智能体管理
+                </h2>
+                <button className={`px-4 py-2 ${btnPrimary} ${textPrimary} rounded-lg text-sm transition-colors flex items-center gap-2`}>
+                  <Bot className="w-4 h-4" />
+                  添加智能体
+                </button>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                {[
+                  { name: 'GoalAgent', type: '目标分析', status: 'running', tasks: 156 },
+                  { name: 'AudienceAgent', type: '受众分析', status: 'running', tasks: 142 },
+                  { name: 'BehaviorAgent', type: '行为分析', status: 'idle', tasks: 98 },
+                  { name: 'DriverAgent', type: '驱动分析', status: 'idle', tasks: 87 },
+                  { name: 'NarrativeAgent', type: '叙事分析', status: 'idle', tasks: 76 },
+                  { name: 'LogicChainAgent', type: '逻辑链收敛', status: 'idle', tasks: 65 },
+                ].map((agent, i) => (
+                  <div key={i} className={`p-4 ${inputBg} ${inputBorder} rounded-lg`}>
+                    <div className="flex items-center justify-between mb-3">
+                      <div className="flex items-center gap-2">
+                        <Bot className="w-4 h-4 text-purple-400" />
+                        <span className={`${textPrimary} text-sm font-medium`}>{agent.name}</span>
+                      </div>
+                      <span className={`px-2 py-0.5 rounded text-xs ${
+                        agent.status === 'running' ? 'bg-green-500/20 text-green-400' : 'bg-slate-500/20 text-slate-400'
+                      }`}>
+                        {agent.status === 'running' ? '运行中' : '空闲'}
+                      </span>
+                    </div>
+                    <p className={`${textSecondary} text-xs mb-3`}>{agent.type}</p>
+                    <div className="flex items-center justify-between text-xs">
+                      <span className={textMuted}>已完成任务</span>
+                      <span className="text-cyan-400">{agent.tasks}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* 通知设置 */}
+          {activeTab === 'notification' && (
+            <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6`}>
+              <h2 className={`${textPrimary} font-semibold text-lg mb-6 flex items-center gap-2`}>
+                <Bell className="w-5 h-5 text-amber-400" />
+                通知设置
+              </h2>
+              <div className="space-y-4">
+                {[
+                  { id: 'email', label: '邮件通知', description: '接收任务完成、风险提醒等邮件通知', icon: Mail, enabled: settings.emailNotification },
+                  { id: 'inApp', label: '站内通知', description: '在系统内显示通知消息', icon: MessageSquare, enabled: settings.inAppNotification },
+                  { id: 'sms', label: '短信通知', description: '发送重要事项的短信提醒', icon: Smartphone, enabled: settings.smsNotification },
+                ].map((item) => (
+                  <div key={item.id} className={`flex items-center justify-between p-4 ${inputBg} ${inputBorder} rounded-lg`}>
+                    <div className="flex items-center gap-4">
+                      <div className="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center">
+                        <item.icon className="w-5 h-5 text-blue-400" />
+                      </div>
+                      <div>
+                        <p className={`${textPrimary} text-sm font-medium`}>{item.label}</p>
+                        <p className={`${textSecondary} text-xs`}>{item.description}</p>
+                      </div>
+                    </div>
+                    <button
+                      onClick={() => setSettings({ ...settings, [item.id === 'email' ? 'emailNotification' : item.id === 'inApp' ? 'inAppNotification' : 'smsNotification']: !item.enabled })}
+                      className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                        item.enabled
+                          ? 'bg-green-600 hover:bg-green-500 text-white'
+                          : btnSecondary
+                      }`}
+                    >
+                      {item.enabled ? '已开启' : '已关闭'}
+                    </button>
+                  </div>
+                ))}
+
+                <div className="pt-4 border-t border-blue-800/30">
+                  <div>
+                    <label className={`block ${textSecondary} text-sm mb-2`}>通知时段</label>
+                    <div className="flex items-center gap-4">
+                      <select className={`px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm`}>
+                        <option>09:00</option>
+                        <option>10:00</option>
+                        <option>11:00</option>
+                      </select>
+                      <span className={textMuted}>至</span>
+                      <select className={`px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm`}>
+                        <option>18:00</option>
+                        <option>19:00</option>
+                        <option>20:00</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* 安全设置 */}
+          {activeTab === 'security' && (
+            <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6`}>
+              <h2 className={`${textPrimary} font-semibold text-lg mb-6 flex items-center gap-2`}>
+                <Shield className="w-5 h-5 text-red-400" />
+                安全设置
+              </h2>
+              <div className="space-y-6">
+                <div className="grid grid-cols-2 gap-6">
+                  <div>
+                    <label className={`block ${textSecondary} text-sm mb-2`}>会话超时时间（分钟）</label>
+                    <select
+                      value={settings.sessionTimeout}
+                      onChange={(e) => setSettings({ ...settings, sessionTimeout: Number(e.target.value) })}
+                      className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm`}
+                    >
+                      <option value={15}>15 分钟</option>
+                      <option value={30}>30 分钟</option>
+                      <option value={60}>1 小时</option>
+                      <option value={120}>2 小时</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className={`block ${textSecondary} text-sm mb-2`}>密码过期时间（天）</label>
+                    <select
+                      value={settings.passwordExpiration}
+                      onChange={(e) => setSettings({ ...settings, passwordExpiration: Number(e.target.value) })}
+                      className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm`}
+                    >
+                      <option value={30}>30 天</option>
+                      <option value={60}>60 天</option>
+                      <option value={90}>90 天</option>
+                      <option value={180}>180 天</option>
+                    </select>
+                  </div>
+                </div>
+
+                <div className={`flex items-center justify-between p-4 ${inputBg} ${inputBorder} rounded-lg`}>
+                  <div className="flex items-center gap-4">
+                    <Key className="w-5 h-5 text-purple-400" />
+                    <div>
+                      <p className={`${textPrimary} text-sm font-medium`}>双因素认证</p>
+                      <p className={`${textSecondary} text-xs`}>登录时需要额外的验证码验证</p>
+                    </div>
+                  </div>
+                  <button
+                    onClick={() => setSettings({ ...settings, twoFactorAuth: !settings.twoFactorAuth })}
+                    className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                      settings.twoFactorAuth
+                        ? 'bg-green-600 hover:bg-green-500 text-white'
+                        : btnSecondary
+                    }`}
+                  >
+                    {settings.twoFactorAuth ? '已开启' : '已关闭'}
+                  </button>
+                </div>
+
+                <div className="pt-4 border-t border-blue-800/30">
+                  <button className="flex items-center gap-2 px-4 py-2.5 bg-red-600/20 hover:bg-red-600/30 border border-red-500/30 text-red-400 rounded-lg text-sm transition-colors">
+                    <Shield className="w-4 h-4" />
+                    重置所有安全设置
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* 运行规则 */}
+          {activeTab === 'workflow' && (
+            <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6`}>
+              <h2 className={`${textPrimary} font-semibold text-lg mb-6 flex items-center gap-2`}>
+                <Workflow className="w-5 h-5 text-green-400" />
+                运行规则配置
+              </h2>
+              <div className="space-y-4">
+                {[
+                  { id: 'enableStateGate', label: '启用状态门控', description: '智能体输出需要通过状态门控检查才能进入下一节点' },
+                  { id: 'enableLogicChainCheck', label: '启用逻辑链校验', description: '在逻辑链收敛阶段进行一致性检查' },
+                  { id: 'enableRiskReview', label: '启用风险强制复核', description: '高风险项必须经过人工确认才能继续' },
+                  { id: 'allowPartialParallel', label: '允许局部并行', description: '独立的流程节点可以并行执行' },
+                ].map((item) => (
+                  <div key={item.id} className={`flex items-center justify-between p-4 ${inputBg} ${inputBorder} rounded-lg`}>
+                    <div>
+                      <p className={`${textPrimary} text-sm font-medium`}>{item.label}</p>
+                      <p className={`${textSecondary} text-xs mt-1`}>{item.description}</p>
+                    </div>
+                    <button
+                      onClick={() => setSettings({ ...settings, [item.id]: !settings[item.id as keyof typeof settings] as boolean })}
+                      className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                        settings[item.id as keyof typeof settings]
+                          ? 'bg-green-600 hover:bg-green-500 text-white'
+                          : btnSecondary
+                      }`}
+                    >
+                      {settings[item.id as keyof typeof settings] ? '已开启' : '已关闭'}
+                    </button>
+                  </div>
+                ))}
+
+                <div className="grid grid-cols-2 gap-6 pt-4 border-t border-blue-800/30">
+                  <div>
+                    <label className={`block ${textSecondary} text-sm mb-2`}>最大讨论轮数</label>
+                    <input
+                      type="number"
+                      value={settings.maxDiscussionRounds}
+                      onChange={(e) => setSettings({ ...settings, maxDiscussionRounds: Number(e.target.value) })}
+                      className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm`}
+                    />
+                    <p className={`${textMuted} text-xs mt-1`}>超出此轮数将自动收敛</p>
+                  </div>
+                  <div>
+                    <label className={`block ${textSecondary} text-sm mb-2`}>最大回退次数</label>
+                    <input
+                      type="number"
+                      value={settings.maxRollbackTimes}
+                      onChange={(e) => setSettings({ ...settings, maxRollbackTimes: Number(e.target.value) })}
+                      className={`w-full px-4 py-2.5 ${inputBg} ${inputBorder} rounded-lg ${textPrimary} text-sm`}
+                    />
+                    <p className={`${textMuted} text-xs mt-1`}>超出此次数将终止任务</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* 模板管理 */}
+          {activeTab === 'template' && (
+            <div className={`${cardBg} backdrop-blur-xl ${cardBorder} rounded-xl p-6`}>
+              <div className="flex items-center justify-between mb-6">
+                <h2 className={`${textPrimary} font-semibold text-lg flex items-center gap-2`}>
+                  <FileText className="w-5 h-5 text-cyan-400" />
+                  模板管理
+                </h2>
+                <button className={`px-4 py-2 ${btnPrimary} ${textPrimary} rounded-lg text-sm transition-colors flex items-center gap-2`}>
+                  <FileText className="w-4 h-4" />
+                  新建模板
+                </button>
+              </div>
+              <div className="grid grid-cols-3 gap-4">
+                {[
+                  { name: '宣传策略模板', type: '策略生成', fields: 24, updated: '2026-03-15' },
+                  { name: '活动方案模板', type: '方案推演', fields: 32, updated: '2026-03-10' },
+                  { name: '市场分析模板', type: '市场调研', fields: 18, updated: '2026-03-08' },
+                  { name: '产品推广模板', type: '产品营销', fields: 28, updated: '2026-03-05' },
+                  { name: '品牌公关模板', type: '公关传播', fields: 22, updated: '2026-03-01' },
+                  { name: '用户调研模板', type: '用户洞察', fields: 16, updated: '2026-02-28' },
+                ].map((template, i) => (
+                  <div key={i} className={`p-4 ${inputBg} ${inputBorder} rounded-lg hover:border-blue-500/50 transition-colors cursor-pointer`}>
+                    <div className="flex items-center justify-between mb-3">
+                      <div className="flex items-center gap-2">
+                        <FileText className="w-4 h-4 text-cyan-400" />
+                        <span className={`${textPrimary} text-sm font-medium`}>{template.name}</span>
+                      </div>
+                      <ChevronRight className={`w-4 h-4 ${textSecondary}`} />
+                    </div>
+                    <p className={`${textSecondary} text-xs mb-2`}>{template.type}</p>
+                    <div className="flex items-center justify-between text-xs">
+                      <span className={textMuted}>{template.fields} 个字段</span>
+                      <span className={textMuted}>更新于 {template.updated}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* 保存按钮 */}
+          <div className="mt-6 flex items-center justify-end gap-3">
+            <button className={`px-6 py-2.5 ${btnSecondary} rounded-lg text-sm transition-colors flex items-center gap-2`}>
+              <RefreshCw className="w-4 h-4" />
+              重置
+            </button>
+            <button className={`px-6 py-2.5 ${btnPrimary} ${textPrimary} rounded-lg text-sm transition-colors flex items-center gap-2`}>
+              <Save className="w-4 h-4" />
+              保存设置
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SystemSettings;
diff --git a/web-code/pages/TaskManagement.tsx b/web-code/pages/TaskManagement.tsx
new file mode 100644
index 00000000..588e6b45
--- /dev/null
+++ b/web-code/pages/TaskManagement.tsx
@@ -0,0 +1,166 @@
+import { Outlet } from 'react-router-dom';
+export interface SceneInfo {
+  applicableTask: string;
+  createTime: string;
+  deleted: number;
+  id: number;
+  relatedAgent: string;
+  sceneCode: string;
+  sceneIntro: string;
+  sceneName: string;
+  sceneType: string;
+  status: number;
+  updateTime: string;
+  version: string;
+}
+
+export interface TaskListItem {
+  createBy: number;
+  createTime: string;
+  deptId: null;
+  id: number;
+  isTop: number;
+  issuingDept: string;
+  keywords: null;
+  overview: string;
+  planTaskTop: number;
+  platform: null;
+  ptaskId: null;
+  recommendedBasis: null;
+  scene: string; // 或 SceneInfo，如果你已经解析
+  sourceType: number;
+  step: null;
+  taskContent: string;
+  taskDirection: string;
+  taskEndDate: string;
+  taskLevel: number;
+  taskName: string;
+  taskNo: string;
+  taskStartDate: string;
+  taskStatus: number;
+  taskSuperiorFlag: number;
+  taskTimeLimit: null;
+  taskType: number;
+  column: string;
+  updateBy: number;
+  updateTime: string;
+  endCount: number;
+  sumAll: number;
+  progress: number;
+  taskStatusData: any;
+}
+
+export interface ActionListItem {
+  actionDay: number;
+  actionEndDate: string;
+  actionManager: number;
+  actionName: string;
+  actionNo: any;
+  actionStartDate: string;
+  actionStatus: number;
+  actionTerm: number;
+  actionTitle: any;
+  actorName: any;
+  audienceGroup: any
+  audienceGroupId: any;
+  audienceRecReason: any
+  behavior: any
+  createBy: number
+  createTime: string;
+  deleteFlag: number;
+  deptId: any;
+  deptName: string;
+  drivingFactor: any;
+  expectedBehaviorId: any;
+  id: number
+  keywords: string
+  level: number
+  scene: string
+  sourceType: number
+  step: null
+  taskId: number
+  updateBy: number
+  updateTime: number
+  useActionId: null
+}
+
+export interface actionColumnItem {
+  icon: string;
+  columnName: string;
+  actionList: ActionListItem[]
+}
+
+export const taskStatusList = {
+  '0': {
+    label: '待签收',
+    color: '#0062d9',
+    icon: '待签收.svg'
+  },
+  '10': {
+    label: '待分析',
+    color: '#2f9acc',
+    icon: '待CEH.svg'
+  },
+  '20': {
+    label: '分析中',
+    color: '#d97b00',
+    icon: '进行中.svg'
+  },
+  '25': {
+    label: '分析完成已提交',
+    color: '#1eb07f',
+    icon: '完成.svg'
+  },
+  '30': {
+    label: '已分析待审核',
+    color: '#1eb07f',
+    icon: '完成.svg'
+  },
+  '40': {
+    label: '分析审核通过',
+    color: '#1eb07f',
+    icon: '完成.svg'
+  },
+  '50': {
+    label: '分析审核未通过',
+    color: '#cf1322',
+    icon: '未通过.svg'
+  },
+  '60': {
+    label: '行动已下发待签收',
+    color: '#1eb07f',
+    icon: '完成.svg'
+  },
+  '70': {
+    label: '行动已签收待策划',
+    color: '#1eb07f',
+    icon: '完成.svg'
+  },
+  '80': {
+    label: '行动策划已提交',
+    color: '#1eb07f',
+    icon: '完成.svg'
+  },
+  '100': {
+    label: '作战方案待审核',
+    color: '#1eb07f',
+    icon: '完成.svg'
+  },
+  '110': {
+    label: '作战方案审核通过',
+    color: '#1eb07f',
+    icon: '完成.svg'
+  },
+  '120': {
+    label: '作战方案未通过',
+    color: '#cf1322',
+    icon: '未通过.svg'
+  }
+};
+export default function TaskManagement() {
+  return (
+    <div className="h-full flex flex-col">
+      <Outlet />
+    </div>
+  );
+}
diff --git a/web-code/pages/ZZResourceManagement.tsx b/web-code/pages/ZZResourceManagement.tsx
new file mode 100644
index 00000000..76ad887b
--- /dev/null
+++ b/web-code/pages/ZZResourceManagement.tsx
@@ -0,0 +1,546 @@
+import React, { useState } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import {
+  FileBox,
+  Search,
+  Plus,
+  Edit,
+  Trash2,
+  Download,
+  Upload,
+  Filter,
+  Grid3X3,
+  List,
+  MoreVertical,
+  ChevronRight,
+  FileText,
+  Image,
+  Film,
+  Music,
+  Archive,
+  ExternalLink,
+  Copy,
+  Share2,
+} from 'lucide-react';
+import { PageType } from '../components/Sidebar';
+
+interface ZZResource {
+  id: string;
+  name: string;
+  type: 'document' | 'image' | 'video' | 'audio' | 'archive' | 'other';
+  size: string;
+  category: string;
+  tags: string[];
+  createdAt: string;
+  updatedAt: string;
+  author: string;
+  status: 'active' | 'archived' | 'draft';
+  description: string;
+}
+
+interface ZZResourceManagementProps {
+  onNavigate: (page: PageType) => void;
+}
+
+const mockResources: ZZResource[] = [
+  {
+    id: 'zz-001',
+    name: '品牌视觉规范手册',
+    type: 'document',
+    size: '15.2 MB',
+    category: '品牌资产',
+    tags: ['品牌', 'VI', '规范'],
+    createdAt: '2024-01-15',
+    updatedAt: '2024-03-10',
+    author: '张三',
+    status: 'active',
+    description: '公司品牌视觉识别系统标准手册，包含LOGO、色彩、字体等规范'
+  },
+  {
+    id: 'zz-002',
+    name: '产品宣传视频素材',
+    type: 'video',
+    size: '256 MB',
+    category: '营销素材',
+    tags: ['视频', '宣传', '产品'],
+    createdAt: '2024-02-20',
+    updatedAt: '2024-03-08',
+    author: '李四',
+    status: 'active',
+    description: '2024年第一季度产品宣传视频原始素材'
+  },
+  {
+    id: 'zz-003',
+    name: '活动背景音乐库',
+    type: 'audio',
+    size: '1.2 GB',
+    category: '音频素材',
+    tags: ['音乐', '背景', '活动'],
+    createdAt: '2024-01-08',
+    updatedAt: '2024-02-28',
+    author: '王五',
+    status: 'active',
+    description: '各类活动背景音乐合集，包含不同风格和时长'
+  },
+  {
+    id: 'zz-004',
+    name: '图标矢量素材包',
+    type: 'image',
+    size: '45 MB',
+    category: '设计素材',
+    tags: ['图标', '矢量', 'UI'],
+    createdAt: '2024-03-01',
+    updatedAt: '2024-03-15',
+    author: '赵六',
+    status: 'active',
+    description: '500+高质量矢量图标素材，适用于各类项目'
+  },
+  {
+    id: 'zz-005',
+    name: '历史项目归档',
+    type: 'archive',
+    size: '2.5 GB',
+    category: '归档文件',
+    tags: ['归档', '历史', '项目'],
+    createdAt: '2023-12-01',
+    updatedAt: '2024-01-20',
+    author: '系统',
+    status: 'archived',
+    description: '2023年度已完成项目文件归档'
+  },
+  {
+    id: 'zz-006',
+    name: 'PPT模板套装',
+    type: 'document',
+    size: '88 MB',
+    category: '模板素材',
+    tags: ['PPT', '模板', '演示'],
+    createdAt: '2024-02-10',
+    updatedAt: '2024-03-12',
+    author: '钱七',
+    status: 'draft',
+    description: '商务演示PPT模板，包含多种风格和场景'
+  },
+];
+
+const typeIcons: Record<ZZResource['type'], React.ReactNode> = {
+  document: <FileText className="w-5 h-5" />,
+  image: <Image className="w-5 h-5" />,
+  video: <Film className="w-5 h-5" />,
+  audio: <Music className="w-5 h-5" />,
+  archive: <Archive className="w-5 h-5" />,
+  other: <FileBox className="w-5 h-5" />,
+};
+
+const typeColors: Record<ZZResource['type'], string> = {
+  document: 'bg-blue-500/20 text-blue-400',
+  image: 'bg-green-500/20 text-green-400',
+  video: 'bg-purple-500/20 text-purple-400',
+  audio: 'bg-orange-500/20 text-orange-400',
+  archive: 'bg-gray-500/20 text-gray-400',
+  other: 'bg-slate-500/20 text-slate-400',
+};
+
+const statusColors: Record<ZZResource['status'], { bg: string; text: string; label: string }> = {
+  active: { bg: 'bg-green-500/20', text: 'text-green-400', label: '使用中' },
+  archived: { bg: 'bg-gray-500/20', text: 'text-gray-400', label: '已归档' },
+  draft: { bg: 'bg-yellow-500/20', text: 'text-yellow-400', label: '草稿' },
+};
+
+const categories = ['全部', '品牌资产', '营销素材', '音频素材', '设计素材', '模板素材', '归档文件'];
+
+const ZZResourceManagement: React.FC<ZZResourceManagementProps> = ({ onNavigate }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('全部');
+  const [selectedStatus, setSelectedStatus] = useState<string>('all');
+  const [selectedResource, setSelectedResource] = useState<ZZResource | null>(null);
+  const [showUploadModal, setShowUploadModal] = useState(false);
+
+  const filteredResources = mockResources.filter(resource => {
+    const matchesSearch = resource.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      resource.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      resource.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()));
+    const matchesCategory = selectedCategory === '全部' || resource.category === selectedCategory;
+    const matchesStatus = selectedStatus === 'all' || resource.status === selectedStatus;
+    return matchesSearch && matchesCategory && matchesStatus;
+  });
+
+  const stats = {
+    total: mockResources.length,
+    active: mockResources.filter(r => r.status === 'active').length,
+    archived: mockResources.filter(r => r.status === 'archived').length,
+    draft: mockResources.filter(r => r.status === 'draft').length,
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 页面标题 */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className={`p-2 rounded-lg ${isDark ? 'bg-blue-500/20' : 'bg-red-100'}`}>
+            <FileBox className={`w-6 h-6 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
+          </div>
+          <div>
+            <h1 className={`text-2xl font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+              ZZ资源管理
+            </h1>
+            <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              管理各类制作资源和素材文件
+            </p>
+          </div>
+        </div>
+        <button
+          onClick={() => setShowUploadModal(true)}
+          className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all ${
+            isDark
+              ? 'bg-blue-600 hover:bg-blue-500 text-white'
+              : 'bg-red-500 hover:bg-red-600 text-white'
+          }`}
+        >
+          <Upload className="w-4 h-4" />
+          上传资源
+        </button>
+      </div>
+
+      {/* 统计卡片 */}
+      <div className="grid grid-cols-4 gap-4">
+        <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-blue-800/30' : 'border-red-100'}`}>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>资源总数</p>
+              <p className={`text-2xl font-semibold mt-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>{stats.total}</p>
+            </div>
+            <div className={`p-3 rounded-lg ${isDark ? 'bg-blue-500/20' : 'bg-red-50'}`}>
+              <FileBox className={`w-6 h-6 ${isDark ? 'text-blue-400' : 'text-red-400'}`} />
+            </div>
+          </div>
+        </div>
+        <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-green-800/30' : 'border-green-100'}`}>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>使用中</p>
+              <p className={`text-2xl font-semibold mt-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>{stats.active}</p>
+            </div>
+            <div className={`p-3 rounded-lg bg-green-500/20`}>
+              <FileText className="w-6 h-6 text-green-400" />
+            </div>
+          </div>
+        </div>
+        <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-gray-700' : 'border-gray-200'}`}>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>已归档</p>
+              <p className={`text-2xl font-semibold mt-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>{stats.archived}</p>
+            </div>
+            <div className={`p-3 rounded-lg bg-gray-500/20`}>
+              <Archive className="w-6 h-6 text-gray-400" />
+            </div>
+          </div>
+        </div>
+        <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-yellow-800/30' : 'border-yellow-100'}`}>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>草稿</p>
+              <p className={`text-2xl font-semibold mt-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>{stats.draft}</p>
+            </div>
+            <div className={`p-3 rounded-lg bg-yellow-500/20`}>
+              <Edit className="w-6 h-6 text-yellow-400" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 筛选和搜索 */}
+      <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-blue-800/30' : 'border-red-100'}`}>
+        <div className="flex items-center gap-4 flex-wrap">
+          {/* 搜索框 */}
+          <div className="flex-1 min-w-[200px] relative">
+            <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
+            <input
+              type="text"
+              placeholder="搜索资源名称、描述或标签..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className={`w-full pl-10 pr-4 py-2 rounded-lg border transition-all ${
+                isDark
+                  ? 'bg-slate-900/50 border-slate-700 text-white placeholder-slate-500 focus:border-blue-500'
+                  : 'bg-gray-50 border-gray-200 text-gray-900 placeholder-gray-400 focus:border-red-400'
+              }`}
+            />
+          </div>
+
+          {/* 分类筛选 */}
+          <div className="flex items-center gap-2">
+            <Filter className={`w-4 h-4 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
+            <select
+              value={selectedCategory}
+              onChange={(e) => setSelectedCategory(e.target.value)}
+              className={`px-3 py-2 rounded-lg border transition-all ${
+                isDark
+                  ? 'bg-slate-900/50 border-slate-700 text-white'
+                  : 'bg-gray-50 border-gray-200 text-gray-900'
+              }`}
+            >
+              {categories.map(cat => (
+                <option key={cat} value={cat}>{cat}</option>
+              ))}
+            </select>
+          </div>
+
+          {/* 状态筛选 */}
+          <div className="flex items-center gap-2">
+            <select
+              value={selectedStatus}
+              onChange={(e) => setSelectedStatus(e.target.value)}
+              className={`px-3 py-2 rounded-lg border transition-all ${
+                isDark
+                  ? 'bg-slate-900/50 border-slate-700 text-white'
+                  : 'bg-gray-50 border-gray-200 text-gray-900'
+              }`}
+            >
+              <option value="all">全部状态</option>
+              <option value="active">使用中</option>
+              <option value="archived">已归档</option>
+              <option value="draft">草稿</option>
+            </select>
+          </div>
+
+          {/* 视图切换 */}
+          <div className={`flex items-center rounded-lg p-1 ${isDark ? 'bg-slate-900/50' : 'bg-gray-100'}`}>
+            <button
+              onClick={() => setViewMode('grid')}
+              className={`p-2 rounded-md transition-all ${
+                viewMode === 'grid'
+                  ? isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-white text-red-500 shadow-sm'
+                  : isDark ? 'text-slate-400' : 'text-gray-500'
+              }`}
+            >
+              <Grid3X3 className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => setViewMode('list')}
+              className={`p-2 rounded-md transition-all ${
+                viewMode === 'list'
+                  ? isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-white text-red-500 shadow-sm'
+                  : isDark ? 'text-slate-400' : 'text-gray-500'
+              }`}
+            >
+              <List className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* 资源列表 */}
+      {viewMode === 'grid' ? (
+        <div className="grid grid-cols-3 gap-4">
+          {filteredResources.map(resource => (
+            <div
+              key={resource.id}
+              className={`p-4 rounded-xl cursor-pointer transition-all hover:scale-[1.02] ${
+                isDark ? 'bg-slate-800/50 hover:bg-slate-800' : 'bg-white hover:bg-gray-50'
+              } border ${isDark ? 'border-blue-800/30' : 'border-red-100'} hover:border-blue-500/50`}
+              onClick={() => setSelectedResource(resource)}
+            >
+              <div className="flex items-start justify-between mb-3">
+                <div className={`p-3 rounded-lg ${typeColors[resource.type]}`}>
+                  {typeIcons[resource.type]}
+                </div>
+                <span className={`px-2 py-1 rounded text-xs font-medium ${statusColors[resource.status].bg} ${statusColors[resource.status].text}`}>
+                  {statusColors[resource.status].label}
+                </span>
+              </div>
+              <h3 className={`font-medium mb-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                {resource.name}
+              </h3>
+              <p className={`text-sm mb-3 line-clamp-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                {resource.description}
+              </p>
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  {resource.tags.slice(0, 2).map(tag => (
+                    <span
+                      key={tag}
+                      className={`px-2 py-0.5 rounded text-xs ${
+                        isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-100 text-gray-600'
+                      }`}
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+                <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+                  {resource.size}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className={`rounded-xl overflow-hidden border ${isDark ? 'bg-slate-800/50 border-blue-800/30' : 'bg-white border-red-100'}`}>
+          <table className="w-full">
+            <thead className={isDark ? 'bg-slate-900/50' : 'bg-gray-50'}>
+              <tr>
+                <th className={`px-4 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>资源名称</th>
+                <th className={`px-4 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>类型</th>
+                <th className={`px-4 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>分类</th>
+                <th className={`px-4 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>大小</th>
+                <th className={`px-4 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>状态</th>
+                <th className={`px-4 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>更新日期</th>
+                <th className={`px-4 py-3 text-right text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>操作</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200 dark:divide-slate-700">
+              {filteredResources.map(resource => (
+                <tr
+                  key={resource.id}
+                  className={`cursor-pointer transition-colors ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-gray-50'}`}
+                  onClick={() => setSelectedResource(resource)}
+                >
+                  <td className={`px-4 py-3 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                    <div className="flex items-center gap-3">
+                      <div className={`p-2 rounded-lg ${typeColors[resource.type]}`}>
+                        {typeIcons[resource.type]}
+                      </div>
+                      <div>
+                        <p className="font-medium">{resource.name}</p>
+                        <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{resource.author}</p>
+                      </div>
+                    </div>
+                  </td>
+                  <td className={`px-4 py-3 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
+                    {resource.type === 'document' ? '文档' :
+                     resource.type === 'image' ? '图片' :
+                     resource.type === 'video' ? '视频' :
+                     resource.type === 'audio' ? '音频' :
+                     resource.type === 'archive' ? '归档' : '其他'}
+                  </td>
+                  <td className={`px-4 py-3 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>{resource.category}</td>
+                  <td className={`px-4 py-3 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>{resource.size}</td>
+                  <td className="px-4 py-3">
+                    <span className={`px-2 py-1 rounded text-xs font-medium ${statusColors[resource.status].bg} ${statusColors[resource.status].text}`}>
+                      {statusColors[resource.status].label}
+                    </span>
+                  </td>
+                  <td className={`px-4 py-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{resource.updatedAt}</td>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center justify-end gap-2" onClick={(e) => e.stopPropagation()}>
+                      <button className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}>
+                        <Download className="w-4 h-4" />
+                      </button>
+                      <button className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}>
+                        <Edit className="w-4 h-4" />
+                      </button>
+                      <button className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-red-500/20 text-red-400' : 'hover:bg-red-50 text-red-500'}`}>
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* 资源详情弹窗 */}
+      {selectedResource && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50" onClick={() => setSelectedResource(null)}>
+          <div
+            className={`w-full max-w-2xl rounded-2xl ${isDark ? 'bg-slate-800' : 'bg-white'} shadow-xl`}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="p-6 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <div className={`p-3 rounded-lg ${typeColors[selectedResource.type]}`}>
+                    {typeIcons[selectedResource.type]}
+                  </div>
+                  <div>
+                    <h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                      {selectedResource.name}
+                    </h2>
+                    <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                      {selectedResource.category} · {selectedResource.size}
+                    </p>
+                  </div>
+                </div>
+                <button
+                  onClick={() => setSelectedResource(null)}
+                  className={`p-2 rounded-lg ${isDark ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-gray-100 text-gray-500'}`}
+                >
+                  <ChevronRight className="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+            <div className="p-6 space-y-4">
+              <div>
+                <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>描述</p>
+                <p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedResource.description}</p>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>创建者</p>
+                  <p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedResource.author}</p>
+                </div>
+                <div>
+                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>创建时间</p>
+                  <p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedResource.createdAt}</p>
+                </div>
+                <div>
+                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>更新时间</p>
+                  <p className={isDark ? 'text-white' : 'text-gray-900'}>{selectedResource.updatedAt}</p>
+                </div>
+                <div>
+                  <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-1`}>状态</p>
+                  <span className={`px-2 py-1 rounded text-xs font-medium ${statusColors[selectedResource.status].bg} ${statusColors[selectedResource.status].text}`}>
+                    {statusColors[selectedResource.status].label}
+                  </span>
+                </div>
+              </div>
+              <div>
+                <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'} mb-2`}>标签</p>
+                <div className="flex flex-wrap gap-2">
+                  {selectedResource.tags.map(tag => (
+                    <span
+                      key={tag}
+                      className={`px-3 py-1 rounded-full text-sm ${
+                        isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-100 text-gray-600'
+                      }`}
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </div>
+            <div className={`p-6 border-t ${isDark ? 'border-slate-700' : 'border-gray-200'} flex justify-end gap-3`}>
+              <button
+                className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+                  isDark ? 'bg-slate-700 hover:bg-slate-600 text-white' : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
+                }`}
+              >
+                <Download className="w-4 h-4 inline mr-2" />
+                下载
+              </button>
+              <button
+                className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+                  isDark ? 'bg-blue-600 hover:bg-blue-500 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
+                }`}
+              >
+                <Edit className="w-4 h-4 inline mr-2" />
+                编辑
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ZZResourceManagement;
diff --git a/web-code/pages/css/KnowledgeBaseResourceManagement.css b/web-code/pages/css/KnowledgeBaseResourceManagement.css
new file mode 100644
index 00000000..06d0374e
--- /dev/null
+++ b/web-code/pages/css/KnowledgeBaseResourceManagement.css
@@ -0,0 +1,10 @@
+.iframe-container {
+  width: 100%;
+  height: calc(100vh - 100px); /* 可根据需求调整 */
+}
+
+.full-size-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
diff --git a/web-code/service/request-axios-service.ts b/web-code/service/request-axios-service.ts
new file mode 100644
index 00000000..5add98bb
--- /dev/null
+++ b/web-code/service/request-axios-service.ts
@@ -0,0 +1,47 @@
+import service from "@/utils/request";
+export const requestCrudService = {
+  get: async (endpoint, params = {}) => {
+    try {
+      const response = await service.get(endpoint, { params });
+      return response;
+    } catch (error) {
+      throw new Error(`GET request failed: ${error.message}`);
+    }
+  },
+
+  post: async (endpoint, data = {}) => {
+    try {
+      const response = await service.post(endpoint, data);
+      return response;
+    } catch (error) {
+      throw new Error(`POST request failed: ${error.message}`);
+    }
+  },
+
+  put: async (endpoint, data = {}) => {
+    try {
+      const response = await service.put(endpoint, data);
+      return response;
+    } catch (error) {
+      throw new Error(`PUT request failed: ${error.message}`);
+    }
+  },
+
+  update: async (endpoint, data = {}) => {
+    try {
+      const response = await service.patch(endpoint, data);
+      return response;
+    } catch (error) {
+      throw new Error(`patch request failed: ${error.message}`);
+    }
+  },
+
+  delete: async (endpoint) => {
+    try {
+      const response = await service.delete(endpoint);
+      return response;
+    } catch (error) {
+      throw new Error(`DELETE request failed: ${error.message}`);
+    }
+  }
+}
\ No newline at end of file
diff --git a/web-code/service/request-crud.service.ts b/web-code/service/request-crud.service.ts
new file mode 100644
index 00000000..35331233
--- /dev/null
+++ b/web-code/service/request-crud.service.ts
@@ -0,0 +1,141 @@
+import { environment } from '@/environments/environment';
+import { requestCrudService } from '@/service/request-axios-service';
+
+export interface GetOneParam {
+  fields?: string[]; // 指定返回的字段 id，name
+  join?: string[]; // 指定关联表，如 ['user||id,name', 'relation||id']
+  cache?: 0 | 1; // 0直接DB，1缓存，默认1缓存
+}
+export interface GetAllParam {
+  fields?: string[] | string; // 指定返回的字段: 多个字段如 'id', 'name'
+  filter?: string[]; // 指定过滤条件，如 ['name||$eq||batman', 'id||$in||1,2,3', 'field||$isnull', 'relation.id||$eq||1']
+  or?: string[]; // 同filter
+  join?: string[]; // 指定关联表，如 ['user||id,name', 'relation||id']
+  cache?: 0 | 1; // 0直接DB，1缓存，默认1缓存
+  page?: number; // 页码（会被转换成offset）
+  offset?: number; // 偏移量
+  limit?: number; // 每页数量
+  sort?: string[]; // 排序，如 '['name,ASC', 'id,DESC]'
+  s?: string;
+  joinTaskAction?: boolean; //是否连行动表查询
+  joinTaskActionBoci?: boolean; //策略分析列表使用
+}
+
+export interface GetAllResponse {
+  data: any[];
+  page: number;
+  pageCount: number;
+  count: number;
+  total: number;
+  errMsg?: string;
+}
+let deepCopy = (str: any) => {
+  return JSON.parse(JSON.stringify(str));
+}
+export class RequestCrudService {
+
+  /**
+   * 获取单个对象
+   * @param url 地址
+   * @param id ID
+   * @param params 参数
+   * @returns 单个对象
+   */
+  async getOne(url: string, id: number, params?: GetOneParam): Promise<any> {
+    const getUrl = `${url}/${id}`;
+    const res = await requestCrudService.get(getUrl, params);
+    if (res) return res;
+    // this.notification.create('error', getUrl, `${res.data}`);
+    return {};
+  }
+  /**
+   * 获取多个对象
+   * @param url 地址
+   * @param params 参数
+   * @returns 多个对象数组
+   */
+  async getAll(url: string, params: GetAllParam | null = null): Promise<GetAllResponse> {
+    const formattedParams = deepCopy(params || {});
+    // 分页默认值
+    if (!params || !params.limit) formattedParams.limit = 999;
+    if (!params || !params.page) formattedParams.page = 1;
+    // 计算offset
+    if (params && formattedParams.page) {
+      formattedParams.offset = (formattedParams.page - 1) * formattedParams.limit!;
+      delete formattedParams.page;
+    }
+    const res = await requestCrudService.get(url, formattedParams);
+    if (res.status === 200) return res.data;
+    // this.notification.create('error', url, `${res.data}`);
+    return {
+      count: 0,
+      data: [],
+      page: 1,
+      pageCount: 1,
+      total: 0
+    };
+  }
+  /**
+   * 创建单个对象
+   * @param url 地址
+   * @param data 单个对象
+   * @returns 被创建的单个对象
+   */
+  async createOne(url: string, data: any) {
+    const res = await requestCrudService.post(url, data);
+    if (res.status === 201) return res.data;
+    // this.notification.create('error', url, `${res.data}`);
+    return {};
+  }
+  /**
+   * 创建多个对象
+   * @param url 地址
+   * @param data 多个对象
+   * @returns 被创建的多个对象
+   */
+  async createMulti(url: string, data: any[]) {
+    const res = await requestCrudService.post(url, {
+      bulk: data
+    });
+    if (res.status === 201) return res.data;
+    // this.notification.create('error', url, `${res.data}`);
+    return [];
+  }
+  /**
+   * 更新单个对象
+   * @param url 地址
+   * @param id ID
+   * @param data 单个对象部分键值对
+   * @returns 被修改的单个对象
+   */
+  async updateOne(url: string, id: number, data: any) {
+    const res = await requestCrudService.update(`${url}/${id}`, data);
+    if (res.status === 200) return res.data;
+    // this.notification.create('error', url, `${res.data}`);
+    return {};
+  }
+  /**
+   * 删除单个对象
+   * @param url 地址
+   * @param id ID
+   * @returns 操作结果
+   */
+  async deleteOne(url: string, id: number) {
+    const res = await requestCrudService.delete(`${url}/${id}`);
+    if (res.status === 200) return res.data;
+    // this.notification.create('error', url, `${res.data}`);
+    return 'error';
+  }
+  // get 请求
+  async simpleGet(url: string, params?: any): Promise<any> {
+    const res = await requestCrudService.get(url, params);
+    if (res.status === 200) return res.data;
+    return res.data;
+  }
+  // post 请求
+  async simplePost(url: string, data: any) {
+    const res = await requestCrudService.post(url, data);
+    if (res.status === 200) return res.data;
+    return res.data;
+  }
+}
diff --git a/web-code/service/request-tools-service.ts b/web-code/service/request-tools-service.ts
new file mode 100644
index 00000000..e56d1d0a
--- /dev/null
+++ b/web-code/service/request-tools-service.ts
@@ -0,0 +1,56 @@
+import toolsService from "@/utils/tools-request";
+const service = toolsService;
+export const toolsCrudService = {
+  get: async (endpoint, params = {}) => {
+    try {
+      const response = await service.get(endpoint, { params });
+      return response;
+    } catch (error) {
+      throw new Error(`GET request failed: ${error.message}`);
+    }
+  },
+
+  post: async (endpoint, data = {}) => {
+    try {
+      const response = await service.post(endpoint, data);
+      return response;
+    } catch (error) {
+      throw new Error(`POST request failed: ${error.message}`);
+    }
+  },
+
+  put: async (endpoint, data = {}) => {
+    try {
+      const response = await service.put(endpoint, data);
+      return response;
+    } catch (error) {
+      throw new Error(`PUT request failed: ${error.message}`);
+    }
+  },
+  patch: async (endpoint, data = {}) => {
+    try {
+      const response = await service.patch(endpoint, data);
+      return response;
+    } catch (error) {
+      throw new Error(`PATCH request failed: ${error.message}`);
+    }
+  },
+
+  update: async (endpoint, data = {}) => {
+    try {
+      const response = await service.patch(endpoint, data);
+      return response;
+    } catch (error) {
+      throw new Error(`patch request failed: ${error.message}`);
+    }
+  },
+
+  delete: async (endpoint) => {
+    try {
+      const response = await service.delete(endpoint);
+      return response;
+    } catch (error) {
+      throw new Error(`DELETE request failed: ${error.message}`);
+    }
+  }
+}
\ No newline at end of file
diff --git a/web-code/theme.css b/web-code/theme.css
new file mode 100644
index 00000000..38143184
--- /dev/null
+++ b/web-code/theme.css
@@ -0,0 +1,240 @@
+/* 引入字体文件 */
+@font-face {
+  font-family: 'NotoSansHans';
+  font-weight: 900;
+  src: url('/font/NotoSansHans/NotoSansHans-Black.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'NotoSansHansBold';
+  font-weight: bold;
+  src: url('/font/NotoSansHans/NotoSansHans-Bold.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'NotoSansHans';
+  font-weight: normal;
+  src: url('/font/NotoSansHans/NotoSansHans-Regular.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'NotoSansHansLight';
+  font-weight: 300;
+  src: url('/font/NotoSansHans/NotoSansHans-Light.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'DDIN';
+  font-weight: normal;
+  src: url('/font/D-Din/D-DIN.ttf') format('truetype');
+  unicode-range: U+0030-0039;
+}
+
+@font-face {
+  font-family: 'DDINBold';
+  font-weight: bold;
+  src: url('/font/D-Din/D-DIN-Bold.ttf') format('truetype');
+  unicode-range: U+0030-0039;
+}
+
+@font-face {
+  font-family: 'Douyu';
+  src: url('/font/DouyuFont/douyuFont-2.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'Noto Sans S Chinese';
+  font-weight: 100;
+  src: url('/font/NotoSansHans/NotoSansHans-Thin-Windows.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'Noto Sans S Chinese';
+  font-weight: 300;
+  src: url('/font/NotoSansHans/NotoSansHans-Light.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'Noto Sans S Chinese';
+  font-weight: 400;
+  src: url('/font/NotoSansHans/NotoSansHans-Regular.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'Noto Sans S Chinese';
+  font-weight: 500;
+  src: url('/font/NotoSansHans/NotoSansHans-Medium.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'Noto Sans S Chinese';
+  font-weight: 700;
+  src: url('/font/NotoSansHans/NotoSansHans-Bold.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'Noto Sans S Chinese';
+  font-weight: 900;
+  src: url('/font/NotoSansHans/NotoSansHans-Black.otf') format('opentype');
+}
+
+div,span,p {
+    font-family: 'Noto Sans S Chinese';
+}
+
+#root {
+  margin: 0 auto;
+}
+
+@keyframes qa-stop-breathing {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
+  }
+
+  50% {
+    transform: scale(1.04);
+    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
+  }
+}
+
+@keyframes qa-avatar-orbit {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+
+  50% {
+    transform: rotate(4deg) scale(1.06);
+  }
+
+  100% {
+    transform: rotate(0deg) scale(1);
+  }
+}
+
+@keyframes qa-avatar-icon-pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  50% {
+    transform: scale(1.12);
+    opacity: 0.82;
+  }
+}
+
+@keyframes qa-avatar-shine {
+  0% {
+    transform: translateX(-120%) skewX(-18deg);
+    opacity: 0;
+  }
+
+  45% {
+    opacity: 0.5;
+  }
+
+  100% {
+    transform: translateX(120%) skewX(-18deg);
+    opacity: 0;
+  }
+}
+
+@keyframes qa-spark-twinkle {
+  0%, 100% {
+    transform: scale(0.85) rotate(0deg);
+    opacity: 0.65;
+  }
+
+  50% {
+    transform: scale(1.15) rotate(18deg);
+    opacity: 1;
+  }
+}
+
+.qa-stop-breathing {
+  animation: qa-stop-breathing 1.25s ease-in-out infinite;
+}
+
+.qa-avatar-active {
+  animation: qa-avatar-orbit 1.8s ease-in-out infinite;
+}
+
+.qa-avatar-icon-active {
+  animation: qa-avatar-icon-pulse 1.1s ease-in-out infinite;
+}
+
+.qa-avatar-active .qa-avatar-shine {
+  animation: qa-avatar-shine 1.6s ease-in-out infinite;
+}
+
+.qa-avatar-spark {
+  animation: qa-spark-twinkle 1s ease-in-out infinite;
+}
+
+@keyframes qa-generating-marquee {
+  0% {
+    background-position: 180% 50%;
+  }
+
+  100% {
+    background-position: -80% 50%;
+  }
+}
+
+.qa-generating-marquee {
+  display: inline-block;
+  background-size: 220% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  animation: qa-generating-marquee 1.45s linear infinite;
+}
+
+.qa-generating-marquee-light {
+  background-image: linear-gradient(90deg, #4b5563 0%, #4b5563 34%, #ef4444 48%, #fb923c 55%, #4b5563 68%, #4b5563 100%);
+}
+
+.qa-generating-marquee-dark {
+  background-image: linear-gradient(90deg, #cbd5e1 0%, #cbd5e1 34%, #67e8f9 48%, #a78bfa 55%, #cbd5e1 68%, #cbd5e1 100%);
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/web-code/utils/request.ts b/web-code/utils/request.ts
new file mode 100644
index 00000000..17c6a139
--- /dev/null
+++ b/web-code/utils/request.ts
@@ -0,0 +1,48 @@
+import axios from 'axios'
+// axios.interceptors
+const service = axios.create({
+    // baseURL: '', // url = base url + request url
+    // baseURL: '/api',
+    // withCredentials: true, // send cookies when cross-domain requests
+    timeout: 500000000*1000 // request timeout
+})
+
+service.interceptors.response.use(
+    response => {
+        const res = response.data
+        // if(!sessionStorage.getItem('userName')){
+        //     // window.location = '/#/lagchain-login'
+        // }
+        if (res.code !== 0) {
+            return res
+        } else {
+            return res
+        }
+    },
+    error => {
+        if(!error.response) return Promise.reject(error)
+        if (error.response.status == 401) {
+            // window.location = sessionStorage.getItem('mhUrl');
+        } else {
+            return Promise.reject(error)
+        }
+
+    }
+)
+service.interceptors.request.use(
+    config => {
+        // let token: any = localStorage.getItem('token');
+        config.headers['Authorization'] = `Bearer admin`;
+        // if (token) {
+        //     token = JSON.parse(token);
+        // // 在请求头中添加 token
+        // config.headers['Authorization'] = `Bearer ${token.token}`;
+        // }
+        return config
+    },
+    error => {
+        return Promise.reject(error)
+    }
+)
+
+export default service
diff --git a/web-code/utils/tools-request.ts b/web-code/utils/tools-request.ts
new file mode 100644
index 00000000..d524c6a0
--- /dev/null
+++ b/web-code/utils/tools-request.ts
@@ -0,0 +1,46 @@
+import axios from 'axios'
+// axios.interceptors
+const toolsService = axios.create({
+    // baseURL: '', // url = base url + request url
+    // baseURL: '/api',
+    // withCredentials: true, // send cookies when cross-domain requests
+    timeout: 500000000*1000 // request timeout
+})
+
+toolsService.interceptors.response.use(
+    response => {
+        const res = response.data
+        // if(!sessionStorage.getItem('userName')){
+        //     // window.location = '/#/lagchain-login'
+        // }
+        if (res.code !== 0) {
+            return res
+        } else {
+            return res
+        }
+    },
+    error => {
+        if(!error.response) return Promise.reject(error)
+        if (error.response.status == 401) {
+            // window.location = sessionStorage.getItem('mhUrl');
+        } else {
+            return Promise.reject(error)
+        }
+
+    }
+)
+toolsService.interceptors.request.use(
+    config => {
+        const token: any = localStorage.getItem('toolToken');
+        if (token) {
+            // 在请求头中添加 token
+            config.headers['Authorization'] = `Bearer ${token}`;
+        }
+        return config
+    },
+    error => {
+        return Promise.reject(error)
+    }
+)
+
+export default toolsService
diff --git a/web-code/vite-env.d.ts b/web-code/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/web-code/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />