From 19660e49d288a7c0519c94a47177e178b5f6b426 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=91=A3=E5=AE=8F=E5=87=AF?= <hkdong@kland.com.cn>
Date: Fri, 22 May 2026 14:56:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E5=99=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cankaoyangshi/.env.example                    |    9 -
 cankaoyangshi/README.md                       |   20 -
 cankaoyangshi/index.html                      |   13 -
 cankaoyangshi/metadata.json                   |    6 -
 cankaoyangshi/package.json                    |   35 -
 cankaoyangshi/src/App.tsx                     |  238 --
 cankaoyangshi/src/index.css                   |   71 -
 cankaoyangshi/src/main.tsx                    |   10 -
 cankaoyangshi/tsconfig.json                   |   26 -
 cankaoyangshi/vite.config.ts                  |   22 -
 frontend-web/src/components/page-sidebar.tsx  |    6 +
 frontend-web/src/contexts/ThemeContext.tsx    |    8 +-
 frontend-web/src/pages/PageRoutes.tsx         |    2 +
 frontend-web/src/pages/RoundtableRoutes.tsx   |   16 +
 .../components/HighFidelityReport.tsx         |  498 ++++
 frontend-web/src/roundtable-planning/index.ts |    2 +
 .../pages/RoundtablePlanningPage.tsx          | 2045 +++++++++++++++++
 .../styles/roundtable-planning.css            |  217 ++
 18 files changed, 2791 insertions(+), 453 deletions(-)
 delete mode 100644 cankaoyangshi/.env.example
 delete mode 100644 cankaoyangshi/README.md
 delete mode 100644 cankaoyangshi/index.html
 delete mode 100644 cankaoyangshi/metadata.json
 delete mode 100644 cankaoyangshi/package.json
 delete mode 100644 cankaoyangshi/src/App.tsx
 delete mode 100644 cankaoyangshi/src/index.css
 delete mode 100644 cankaoyangshi/src/main.tsx
 delete mode 100644 cankaoyangshi/tsconfig.json
 delete mode 100644 cankaoyangshi/vite.config.ts
 create mode 100644 frontend-web/src/pages/RoundtableRoutes.tsx
 create mode 100644 frontend-web/src/roundtable-planning/components/HighFidelityReport.tsx
 create mode 100644 frontend-web/src/roundtable-planning/index.ts
 create mode 100644 frontend-web/src/roundtable-planning/pages/RoundtablePlanningPage.tsx
 create mode 100644 frontend-web/src/roundtable-planning/styles/roundtable-planning.css

diff --git a/cankaoyangshi/.env.example b/cankaoyangshi/.env.example
deleted file mode 100644
index 7a550fe7..00000000
--- a/cankaoyangshi/.env.example
+++ /dev/null
@@ -1,9 +0,0 @@
-# GEMINI_API_KEY: Required for Gemini AI API calls.
-# AI Studio automatically injects this at runtime from user secrets.
-# Users configure this via the Secrets panel in the AI Studio UI.
-GEMINI_API_KEY="MY_GEMINI_API_KEY"
-
-# APP_URL: The URL where this applet is hosted.
-# AI Studio automatically injects this at runtime with the Cloud Run service URL.
-# Used for self-referential links, OAuth callbacks, and API endpoints.
-APP_URL="MY_APP_URL"
diff --git a/cankaoyangshi/README.md b/cankaoyangshi/README.md
deleted file mode 100644
index 34585da4..00000000
--- a/cankaoyangshi/README.md
+++ /dev/null
@@ -1,20 +0,0 @@
-<div align="center">
-<img width="1200" height="475" alt="GHBanner" src="https://ai.google.dev/static/site-assets/images/share-ais-513315318.png" />
-</div>
-
-# Run and deploy your AI Studio app
-
-This contains everything you need to run your app locally.
-
-View your app in AI Studio: https://ai.studio/apps/75261c35-a558-4ef8-9501-e8b7f9c98bfb
-
-## Run Locally
-
-**Prerequisites:**  Node.js
-
-
-1. Install dependencies:
-   `npm install`
-2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
-3. Run the app:
-   `npm run dev`
diff --git a/cankaoyangshi/index.html b/cankaoyangshi/index.html
deleted file mode 100644
index 21dfe690..00000000
--- a/cankaoyangshi/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>My Google AI Studio App</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
-
diff --git a/cankaoyangshi/metadata.json b/cankaoyangshi/metadata.json
deleted file mode 100644
index 19d0a11c..00000000
--- a/cankaoyangshi/metadata.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "Gemini Style Assistant",
-  "description": "A clean, modern AI assistant interface inspired by Google Gemini with centered search, suggestion pills, and a minimalist sidebar.",
-  "requestFramePermissions": [],
-  "majorCapabilities": ["MAJOR_CAPABILITY_SERVER_SIDE_GEMINI_API"]
-}
diff --git a/cankaoyangshi/package.json b/cankaoyangshi/package.json
deleted file mode 100644
index 9748aee3..00000000
--- a/cankaoyangshi/package.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "name": "react-example",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite --port=3000 --host=0.0.0.0",
-    "build": "vite build",
-    "preview": "vite preview",
-    "clean": "rm -rf dist server.js",
-    "lint": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@google/genai": "^1.29.0",
-    "@tailwindcss/vite": "^4.1.14",
-    "@vitejs/plugin-react": "^5.0.4",
-    "lucide-react": "^0.546.0",
-    "react": "^19.0.1",
-    "react-dom": "^19.0.1",
-    "vite": "^6.2.3",
-    "express": "^4.21.2",
-    "dotenv": "^17.2.3",
-    "motion": "^12.23.24"
-  },
-  "devDependencies": {
-    "@types/node": "^22.14.0",
-    "autoprefixer": "^10.4.21",
-    "esbuild": "^0.25.0",
-    "tailwindcss": "^4.1.14",
-    "tsx": "^4.21.0",
-    "typescript": "~5.8.2",
-    "vite": "^6.2.3",
-    "@types/express": "^4.17.21"
-  }
-}
diff --git a/cankaoyangshi/src/App.tsx b/cankaoyangshi/src/App.tsx
deleted file mode 100644
index 1cd7026f..00000000
--- a/cankaoyangshi/src/App.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-/**
- * @license
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { useState } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { 
-  MessageSquare, 
-  Bot, 
-  Wrench, 
-  Brain, 
-  ListChecks, 
-  Settings, 
-  Menu, 
-  Mic, 
-  Plus, 
-  Sparkles,
-  ArrowRight,
-  User,
-  History,
-  LayoutGrid,
-  Languages,
-  Code2,
-  Music,
-  Database,
-  Search
-} from 'lucide-react';
-
-export default function App() {
-  const [sidebarOpen, setSidebarOpen] = useState(true);
-
-  const navItems = [
-    { icon: MessageSquare, label: '对话', active: true },
-    { icon: Bot, label: '智能体' },
-    { icon: Wrench, label: '技能' },
-    { icon: Brain, label: '记忆' },
-    { icon: ListChecks, label: '任务管理' },
-  ];
-
-  const recentChats = [
-    'CM助手初次问候交谈',
-    'Untitled',
-    'Untitled',
-    'Untitled',
-    '帮我写一个500字的文案',
-    '帮我生成一个写论文的实例',
-  ];
-
-  const suggestions = [
-    { icon: Code2, label: 'Build an Android app', color: 'text-green-600', bg: 'bg-green-50' },
-    { icon: Languages, label: 'Convert text to speech', color: 'text-blue-600', bg: 'bg-blue-50' },
-    { icon: Music, label: 'Generate music', color: 'text-purple-600', bg: 'bg-purple-50' },
-    { icon: Database, label: 'Add database and auth', color: 'text-cyan-600', bg: 'bg-cyan-50' },
-  ];
-
-  return (
-    <div className="flex h-screen w-full bg-white font-sans text-gray-900 overflow-hidden">
-      {/* Sidebar */}
-      <motion.aside
-        initial={false}
-        animate={{ width: sidebarOpen ? 280 : 0, opacity: sidebarOpen ? 1 : 0 }}
-        className="relative bg-gray-50 border-r border-gray-100 flex flex-col h-full"
-      >
-        <div className="p-4 flex items-center justify-between">
-          <div className="flex items-center gap-2 px-2 py-1.5 bg-red-50 text-red-700 rounded-lg cursor-pointer">
-            <Plus size={18} />
-            <span className="font-medium text-sm">新对话</span>
-          </div>
-        </div>
-
-        <nav className="flex-1 overflow-y-auto px-2 space-y-1">
-          <div className="space-y-1 pb-4">
-            {navItems.map((item) => (
-              <div
-                key={item.label}
-                className={`flex items-center gap-3 px-3 py-2 rounded-xl cursor-pointer transition-colors ${
-                  item.active ? 'bg-white shadow-sm font-medium' : 'hover:bg-gray-100 text-gray-600'
-                }`}
-              >
-                <item.icon size={18} />
-                <span className="text-sm">{item.label}</span>
-              </div>
-            ))}
-          </div>
-
-          <div className="pt-4 border-t border-gray-200">
-            <h3 className="px-3 mb-2 text-xs font-semibold text-gray-400 uppercase tracking-wider">
-              最近对话
-            </h3>
-            {recentChats.map((chat, idx) => (
-              <div
-                key={idx}
-                className="px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 rounded-lg cursor-pointer truncate"
-              >
-                {chat}
-              </div>
-            ))}
-          </div>
-        </nav>
-
-        <div className="p-4 border-t border-gray-200">
-          <div className="flex items-center gap-3 px-3 py-2 text-gray-600 hover:bg-gray-100 rounded-xl cursor-pointer">
-            <Settings size={18} />
-            <span className="text-sm">设置和更多</span>
-          </div>
-        </div>
-      </motion.aside>
-
-      {/* Main Content */}
-      <main className="flex-1 flex flex-col relative h-full overflow-y-auto">
-        {/* Top bar */}
-        <header className="absolute top-0 w-full p-4 flex items-center justify-between z-10">
-          <button
-            onClick={() => setSidebarOpen(!sidebarOpen)}
-            className="p-2 hover:bg-gray-100 rounded-lg text-gray-500 transition-colors"
-          >
-            <Menu size={20} />
-          </button>
-          
-          <div className="flex items-center gap-2">
-            <button className="p-2 hover:bg-gray-100 rounded-lg text-gray-500 transition-colors">
-              <Settings size={20} />
-            </button>
-            <div className="w-8 h-8 rounded-full bg-gradient-to-tr from-blue-400 to-purple-400 flex items-center justify-center text-white shadow-sm ring-2 ring-white cursor-pointer overflow-hidden">
-              <User size={16} />
-            </div>
-          </div>
-        </header>
-
-        {/* Center Canvas */}
-        <div className="flex-1 flex flex-col items-center justify-center px-4 max-w-4xl mx-auto w-full pt-16">
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="text-center mb-12 relative"
-          >
-            <div className="absolute -top-16 left-1/2 -translate-x-1/2 opacity-10 blur-2xl pointer-events-none">
-              <Sparkles size={120} className="text-blue-500 animate-pulse" />
-            </div>
-            <h1 className="text-5xl font-display font-medium tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-500 mb-4 px-4">
-              Build your ideas with Gemini
-            </h1>
-            <Sparkles className="absolute -right-8 top-0 text-blue-200 opacity-50" size={48} />
-          </motion.div>
-
-          {/* Search/Input Area */}
-          <motion.div
-             initial={{ opacity: 0, scale: 0.95 }}
-             animate={{ opacity: 1, scale: 1 }}
-             transition={{ delay: 0.1 }}
-             className="w-full max-w-2xl relative group"
-          >
-            <div className="gemini-gradient-border gemini-shadow rounded-3xl bg-white p-2">
-              <div className="flex flex-col p-4 space-y-4">
-                <textarea
-                  placeholder="Describe an app and let Gemini do the rest"
-                  className="w-full bg-transparent resize-none focus:outline-none text-lg text-gray-700 min-h-[80px]"
-                />
-                
-                <div className="flex items-center justify-between pt-2">
-                  <div className="flex items-center gap-2">
-                    <button className="p-2 hover:bg-gray-100 rounded-full text-gray-400 transition-colors">
-                      <Mic size={20} />
-                    </button>
-                    <button className="p-2 hover:bg-gray-100 rounded-full text-gray-400 transition-colors">
-                      <Plus size={20} />
-                    </button>
-                  </div>
-                  
-                  <button className="flex items-center gap-2 px-5 py-2.5 bg-gray-50 hover:bg-gray-100 text-gray-700 rounded-full border border-gray-200 transition-all font-medium text-sm group/btn shadow-sm">
-                    <Sparkles size={16} className="text-blue-500" />
-                    I'm feeling lucky
-                    <ArrowRight size={14} className="opacity-0 -translate-x-2 group-hover/btn:opacity-100 group-hover/btn:translate-x-0 transition-all" />
-                  </button>
-                </div>
-              </div>
-            </div>
-          </motion.div>
-
-          {/* Suggestion Chips */}
-          <div className="mt-8 flex flex-wrap justify-center gap-3">
-            {suggestions.map((suggestion, idx) => (
-              <motion.button
-                key={suggestion.label}
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.2 + idx * 0.05 }}
-                whileHover={{ scale: 1.02 }}
-                whileTap={{ scale: 0.98 }}
-                className={`flex items-center gap-2 px-4 py-2.5 rounded-2xl border border-gray-100 bg-white hover:bg-gray-50 shadow-sm transition-all text-sm font-medium group hover:border-gray-200 text-gray-700`}
-              >
-                <suggestion.icon className={`w-4 h-4 ${suggestion.color}`} />
-                {suggestion.label}
-              </motion.button>
-            ))}
-            <motion.button
-               initial={{ opacity: 0, y: 10 }}
-               animate={{ opacity: 1, y: 0 }}
-               transition={{ delay: 0.4 }}
-               className="flex items-center justify-center p-2 rounded-full border border-gray-100 bg-white hover:bg-gray-50 text-gray-400 shadow-sm transition-all"
-            >
-              <ArrowRight size={16} />
-            </motion.button>
-          </div>
-        </div>
-
-        {/* Footer info/links */}
-        <footer className="w-full max-w-4xl mx-auto px-4 py-12 mt-auto">
-          <div className="rounded-3xl border border-gray-100 bg-gray-50/50 p-8 flex items-center justify-between group hover:bg-gray-50 transition-colors">
-            <div>
-              <h2 className="text-2xl font-display font-medium text-gray-800 mb-1">
-                Discover and remix app ideas
-              </h2>
-              <p className="text-gray-500 text-sm italic">
-                (Gallery view pending implementation)
-              </p>
-            </div>
-            <button className="flex items-center gap-2 px-6 py-2.5 bg-white border border-gray-200 rounded-xl hover:shadow-md transition-all font-medium text-gray-700">
-              Browse the app gallery
-              <ArrowRight size={18} />
-            </button>
-          </div>
-        </footer>
-        
-        {/* Floating Right Bar (from target image) */}
-        <div className="absolute right-6 top-1/2 -translate-y-1/2 flex flex-col gap-4">
-          <button className="p-2.5 bg-white shadow-lg border border-gray-100 rounded-xl hover:scale-110 transition-all text-gray-400">
-            <LayoutGrid size={22} />
-          </button>
-          <button className="p-2.5 bg-white shadow-lg border border-gray-100 rounded-xl hover:scale-110 transition-all text-gray-400">
-            <Languages size={22} />
-          </button>
-        </div>
-      </main>
-    </div>
-  );
-}
diff --git a/cankaoyangshi/src/index.css b/cankaoyangshi/src/index.css
deleted file mode 100644
index 0e2828a0..00000000
--- a/cankaoyangshi/src/index.css
+++ /dev/null
@@ -1,71 +0,0 @@
-@import "tailwindcss";
-
-@theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-display: "Outfit", "Inter", sans-serif;
-}
-
-@layer base {
-  body {
-    @apply bg-white text-gray-900 antialiased;
-  }
-}
-
-@layer utilities {
-  .gemini-shadow {
-    box-shadow: 0 0 20px rgba(66, 133, 244, 0.08),
-                0 0 40px rgba(219, 68, 55, 0.04),
-                0 0 60px rgba(244, 180, 0, 0.04),
-                0 0 80px rgba(15, 157, 88, 0.04);
-  }
-  
-  .gemini-gradient-border {
-    position: relative;
-    background: white;
-    border-radius: 1.5rem; /* rounded-3xl */
-    z-index: 0;
-    overflow: hidden;
-  }
-  
-  .gemini-gradient-border::before {
-    content: '';
-    position: absolute;
-    width: 150%;
-    height: 150%;
-    top: -25%;
-    left: -25%;
-    background: conic-gradient(
-      from 0deg,
-      transparent 0deg,
-      transparent 90deg,
-      #4285F4 120deg,
-      #DB4437 150deg,
-      #F4B400 180deg,
-      #0F9D58 210deg,
-      transparent 240deg
-    );
-    z-index: -2;
-    animation: rotate 3s linear infinite;
-    filter: blur(15px);
-  }
-
-  .gemini-gradient-border::after {
-    content: '';
-    position: absolute;
-    inset: 1.5px; /* The "thickness" of the glow border */
-    background: white;
-    border-radius: calc(1.5rem - 1px);
-    z-index: -1;
-  }
-
-  @keyframes rotate {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-}
-
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@400;500;600&display=swap');
diff --git a/cankaoyangshi/src/main.tsx b/cankaoyangshi/src/main.tsx
deleted file mode 100644
index 080dac37..00000000
--- a/cankaoyangshi/src/main.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import {StrictMode} from 'react';
-import {createRoot} from 'react-dom/client';
-import App from './App.tsx';
-import './index.css';
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-);
diff --git a/cankaoyangshi/tsconfig.json b/cankaoyangshi/tsconfig.json
deleted file mode 100644
index d88f175b..00000000
--- a/cankaoyangshi/tsconfig.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-    "module": "ESNext",
-    "lib": [
-      "ES2022",
-      "DOM",
-      "DOM.Iterable"
-    ],
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "allowJs": true,
-    "jsx": "react-jsx",
-    "paths": {
-      "@/*": [
-        "./*"
-      ]
-    },
-    "allowImportingTsExtensions": true,
-    "noEmit": true
-  }
-}
diff --git a/cankaoyangshi/vite.config.ts b/cankaoyangshi/vite.config.ts
deleted file mode 100644
index fc23e76f..00000000
--- a/cankaoyangshi/vite.config.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import tailwindcss from '@tailwindcss/vite';
-import react from '@vitejs/plugin-react';
-import path from 'path';
-import {defineConfig} from 'vite';
-
-export default defineConfig(() => {
-  return {
-    plugins: [react(), tailwindcss()],
-    resolve: {
-      alias: {
-        '@': path.resolve(__dirname, '.'),
-      },
-    },
-    server: {
-      // HMR is disabled in AI Studio via DISABLE_HMR env var.
-      // Do not modify—file watching is disabled to prevent flickering during agent edits.
-      hmr: process.env.DISABLE_HMR !== 'true',
-      // Disable file watching when DISABLE_HMR is true to save CPU during agent edits.
-      watch: process.env.DISABLE_HMR === 'true' ? null : {},
-    },
-  };
-});
diff --git a/frontend-web/src/components/page-sidebar.tsx b/frontend-web/src/components/page-sidebar.tsx
index 945d2878..42dccac5 100644
--- a/frontend-web/src/components/page-sidebar.tsx
+++ b/frontend-web/src/components/page-sidebar.tsx
@@ -72,6 +72,12 @@ const menuItems: MenuItem[] = [
     icon: HelpCircle,
     children: [
       { id: "general-qa", label: "通用问答", icon: CircleHelp, path: "/page/workspace/chats/new" },
+      {
+        id: "qa-roundtable",
+        label: "圆桌规划",
+        icon: Bot,
+        path: "/page/roundtable/planning",
+      },
       { 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" },
diff --git a/frontend-web/src/contexts/ThemeContext.tsx b/frontend-web/src/contexts/ThemeContext.tsx
index a4042ae7..4ea9a21b 100644
--- a/frontend-web/src/contexts/ThemeContext.tsx
+++ b/frontend-web/src/contexts/ThemeContext.tsx
@@ -1,4 +1,5 @@
 import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { useTheme as useNextTheme } from 'next-themes';
 
 // 主题类型
 export type ThemeType = 'dark' | 'light';
@@ -91,6 +92,7 @@ interface ThemeProviderProps {
 }
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  const { setTheme: setNextTheme } = useNextTheme();
   const [theme, setThemeState] = useState<ThemeType>(() => {
     // 从 localStorage 读取保存的主题
     const saved = localStorage.getItem('strategy-theme');
@@ -107,13 +109,13 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
     setThemeState(newTheme);
   };
 
-  // 保存到 localStorage
+  // 保存到 localStorage，并同步 html class 与 next-themes
   useEffect(() => {
     localStorage.setItem('strategy-theme', theme);
-    // 更新文档类名
     document.documentElement.classList.remove('dark', 'light');
     document.documentElement.classList.add(theme);
-  }, [theme]);
+    setNextTheme(theme);
+  }, [theme, setNextTheme]);
 
   const themeConfig = themes[theme];
 
diff --git a/frontend-web/src/pages/PageRoutes.tsx b/frontend-web/src/pages/PageRoutes.tsx
index 4ae216da..036d15d1 100644
--- a/frontend-web/src/pages/PageRoutes.tsx
+++ b/frontend-web/src/pages/PageRoutes.tsx
@@ -8,6 +8,7 @@ import WorkspaceRoutes from "./WorkspaceRoutes";
 import StrategyRoutes from "./StrategyRoutes";
 import Header from "@/strategy-components/Header";
 import OpenCanvasRoutes from "@/open-canvas/routes/OpenCanvasRoutes";
+import RoundtableRoutes from "./RoundtableRoutes";
 
 function PageLayout() {
   const [collapsed, setCollapsed] = useState(false);
@@ -43,6 +44,7 @@ function PageLayout() {
             />
             <Route path="strategy/*" element={<StrategyRoutes />} />
             <Route path="canvas/*" element={<OpenCanvasRoutes />} />
+            <Route path="roundtable/*" element={<RoundtableRoutes />} />
           </Routes>
         </main>
       </div>
diff --git a/frontend-web/src/pages/RoundtableRoutes.tsx b/frontend-web/src/pages/RoundtableRoutes.tsx
new file mode 100644
index 00000000..cfc39f4d
--- /dev/null
+++ b/frontend-web/src/pages/RoundtableRoutes.tsx
@@ -0,0 +1,16 @@
+import { Navigate, Route, Routes } from "react-router-dom";
+
+import RoundtablePlanningPage from "@/roundtable-planning/pages/RoundtablePlanningPage";
+import "@/roundtable-planning/styles/roundtable-planning.css";
+
+export default function RoundtableRoutes() {
+  return (
+    <div className="h-full w-full overflow-hidden">
+      <Routes>
+        <Route index element={<Navigate to="planning" replace />} />
+        <Route path="planning" element={<RoundtablePlanningPage />} />
+        <Route path="*" element={<Navigate to="planning" replace />} />
+      </Routes>
+    </div>
+  );
+}
diff --git a/frontend-web/src/roundtable-planning/components/HighFidelityReport.tsx b/frontend-web/src/roundtable-planning/components/HighFidelityReport.tsx
new file mode 100644
index 00000000..12ac31e3
--- /dev/null
+++ b/frontend-web/src/roundtable-planning/components/HighFidelityReport.tsx
@@ -0,0 +1,498 @@
+import React from "react";
+import { 
+  ShieldCheck, 
+  Layers, 
+  Clipboard, 
+  Star, 
+  CheckCircle, 
+  Download, 
+  Share2, 
+  Sparkles 
+} from "lucide-react";
+
+interface HighFidelityReportProps {
+  budgetLimit: number;
+  consensusPercentage: number;
+  setCurrentStep: (step: number) => void;
+  setStep1MessageHistory: (history: any) => void;
+  setStep2RoundtableDialogues: (dialogues: any) => void;
+  triggerToast: (msg: string) => void;
+}
+
+export const HighFidelityReport: React.FC<HighFidelityReportProps> = ({
+  budgetLimit,
+  consensusPercentage,
+  setCurrentStep,
+  setStep1MessageHistory,
+  setStep2RoundtableDialogues,
+  triggerToast
+}) => {
+  return (
+    <div className="flex-1 flex flex-col min-h-0 overflow-y-auto text-slate-800">
+      
+      {/* Output title block */}
+      <div className="shrink-0 px-6 py-4.5 border-b border-slate-100 flex items-center justify-between bg-gradient-to-r from-slate-50 to-white flex-wrap gap-3">
+        <div className="flex flex-wrap items-center gap-2.5">
+          <div className="flex items-center gap-2">
+            <CheckCircle className="w-5 h-5 text-emerald-500" />
+            <h3 className="text-sm font-black text-slate-900 tracking-tight">
+              最终架构规划方案 (成果展示大屏)
+            </h3>
+          </div>
+          <div className="flex items-center gap-1.5 shrink-0">
+            <span className="text-[10px] font-black text-emerald-700 bg-emerald-50 border border-emerald-200 px-2 py-0.5 rounded-full shadow-sm">
+              ● 已达成共识
+            </span>
+            <span className="text-[10px] font-mono text-slate-400 font-semibold bg-slate-100/80 px-2 py-0.5 rounded-lg">
+              生成时间：2026-05-21 11:01:12
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button 
+            id="report-download-pdf-btn"
+            onClick={() => triggerToast("📥 架构方案白皮书 PDF 已开始准备传输...")}
+            className="bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 text-[10.5px] font-bold px-3 py-1.5 rounded-xl flex items-center gap-1 transition cursor-pointer"
+          >
+            <Download className="w-3.5 h-3.5 text-slate-500" />
+            导出方案 PDF
+          </button>
+
+          <button 
+            id="report-share-btn"
+            onClick={() => triggerToast("🔗 方案安全访问及沙盒校验链接已复制到剪贴板！")}
+            className="bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 text-[10.5px] font-bold px-3 py-1.5 rounded-xl flex items-center gap-1 transition cursor-pointer"
+          >
+            <Share2 className="w-3.5 h-3.5 text-slate-500" />
+            安全分享
+          </button>
+        </div>
+      </div>
+
+      {/* Comprehensive high fidelity report details */}
+      <div className="p-6 space-y-6">
+
+        {/* Dashboard Metric Overview Rows */}
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+          {/* Metric 1 */}
+          <div className="bg-gradient-to-br from-white to-slate-50/20 border border-slate-150 rounded-2xl p-4 shadow-[0_2px_8px_rgba(0,0,0,0.015)] text-xs text-slate-500 font-medium hover:scale-[1.01] transition-all">
+            <span className="text-[10px] font-extrabold uppercase tracking-wider text-slate-400 block mb-1">设计全要素通过率</span>
+            <div className="flex items-baseline gap-1 mt-1">
+              <span className="text-2xl font-black text-slate-900 font-mono">
+                {budgetLimit >= 500 ? "99.4%" : budgetLimit > 400 ? "98.2%" : "96.5%"}
+              </span>
+              <span className="text-[9px] font-black text-emerald-600 bg-emerald-50 px-1.5 py-0.2 rounded-full">合规通过</span>
+            </div>
+            <p className="text-[9.5px] text-slate-400 mt-2 leading-tight">安全拦截红线保障 0 出圈、0 超限</p>
+          </div>
+
+          {/* Metric 2 */}
+          <div className="bg-gradient-to-br from-white to-slate-50/20 border border-slate-150 rounded-2xl p-4 shadow-[0_2px_8px_rgba(0,0,0,0.015)] text-xs text-slate-500 font-medium hover:scale-[1.01] transition-all">
+            <span className="text-[10px] font-extrabold uppercase tracking-wider text-primary block mb-1">安全冗余评估能级</span>
+            <div className="flex items-baseline gap-1 mt-1">
+              <span className="text-2xl font-black text-primary font-mono">
+                {budgetLimit >= 540 ? "Tier III+" : budgetLimit > 410 ? "Tier II" : "Tier I"}
+              </span>
+              <span className="text-[9px] font-black text-[var(--brand-900)] bg-[var(--brand-200)] px-1.5 py-0.2 rounded-full">异地容灾</span>
+            </div>
+            <p className="text-[9.5px] text-slate-400 mt-2 leading-tight">多路容错算力热备与热切换防线</p>
+          </div>
+
+          {/* Metric 3 */}
+          <div className="bg-gradient-to-br from-white to-slate-50/20 border border-slate-150 rounded-2xl p-4 shadow-[0_2px_8px_rgba(0,0,0,0.015)] text-xs text-slate-500 font-medium hover:scale-[1.01] transition-all">
+            <span className="text-[10px] font-extrabold uppercase tracking-wider text-slate-400 block mb-1">研讨总核销资金预算</span>
+            <div className="flex items-baseline gap-1 mt-1">
+              <span className="text-2xl font-black text-slate-800 font-mono">
+                {Math.round(budgetLimit * 0.925 * 10) / 10}万
+              </span>
+              <span className="text-[9px] font-black text-emerald-600 bg-emerald-50 px-1.5 py-0.2 rounded-full font-sans">
+                省 {Math.round(budgetLimit * 0.075 * 10) / 10}w
+              </span>
+            </div>
+            <p className="text-[9.5px] text-slate-400 mt-2 leading-tight">包含逻辑容器、极端微物理灾灾备购置</p>
+          </div>
+
+          {/* Metric 4 */}
+          <div className="bg-gradient-to-br from-white to-slate-50/20 border border-slate-150 rounded-2xl p-4 shadow-[0_2px_8px_rgba(0,0,0,0.015)] text-xs text-slate-500 font-medium hover:scale-[1.01] transition-all">
+            <span className="text-[10px] font-extrabold uppercase tracking-wider text-slate-400 block mb-1">终审共识度评分</span>
+            <div className="flex items-baseline gap-1 mt-1">
+              <span className="text-2xl font-black text-slate-900 font-mono">42 轮研商</span>
+              <span className="text-[9px] font-black text-amber-600 bg-amber-50 px-1.5 py-0.2 rounded-full">
+                共识率 {consensusPercentage}%
+              </span>
+            </div>
+            <p className="text-[9.5px] text-slate-400 mt-2 leading-tight">多智能体委员会滚动合议完美收敛</p>
+          </div>
+        </div>
+
+        {/* Section I: 执行摘要 (Executive Summary) */}
+        <div className="bg-gradient-to-br from-[var(--brand-200)]/30 to-[var(--brand-200)]/10 border border-red-100 rounded-2xl p-5 hover:shadow-md transition">
+          <div className="flex items-center gap-2 mb-3">
+            <ShieldCheck className="w-4.5 h-4.5 text-[var(--brand-900)]" />
+            <h4 className="text-xs font-black text-slate-900 uppercase tracking-widest">
+              执行摘要 / Executive Summary
+            </h4>
+          </div>
+          <div className="text-xs text-slate-755 leading-relaxed space-y-2 font-medium">
+            <p className="flex items-start gap-1.5">
+              <span className="text-primary text-md leading-none">•</span>
+              <span>本路线规划方案在总核销支出预算限制 ≤ <b className="text-slate-900 font-bold">{budgetLimit}万（主备案并轨共耗约 {Math.round(budgetLimit * 0.925 * 10) / 10}万元）</b>、核心编制队伍限制 ≤ <b className="text-slate-900 font-bold">30人</b>、绝对周转上线规定 <b className="text-slate-900 font-bold">72小时</b> 内交付的目标约束下制定。最终裁决收敛并采纳包含【信息补全】、【主干推进】与【风险收敛】三阶段非对称推进的稳健路径。</span>
+            </p>
+            <p className="flex items-start gap-1.5">
+              <span className="text-primary text-md leading-none">•</span>
+              <span>经多角色 AI 官群及人类指挥官深度澄清和在沙盒拓扑中演算测试，采用本规划方案，在安全拦截（合规绿码）、运行负载及高灾备级余度三大维度上均符合最苛刻的可落地标准。</span>
+            </p>
+            <p className="flex items-start gap-1.5">
+              <span className="text-primary text-md leading-none">•</span>
+              <span>项目具有明确的关键里程碑控制链、主备熔断备份计划，可执行确凿性最优，推荐自批复时点起立即启动第一阶段工作。</span>
+            </p>
+          </div>
+        </div>
+
+        {/* Section II: 方案详细大纲 (Detailed Core Outline) */}
+        <div className="bg-white border border-slate-150 rounded-2xl p-5 hover:shadow-md transition space-y-6">
+          <div className="flex items-center gap-2 border-b border-slate-100 pb-3 mb-1">
+            <Layers className="w-4.5 h-4.5 text-primary" strokeWidth={2.5} />
+            <h4 className="text-xs font-black text-slate-900 uppercase tracking-widest">
+              一、最终规划方案内容大纲
+            </h4>
+          </div>
+
+          <div className="space-y-6 text-xs text-slate-750 font-medium leading-relaxed">
+            
+            {/* Item 1 */}
+            <div className="space-y-1.5">
+              <h5 className="font-extrabold text-slate-900 flex items-center gap-1.5 text-[12px]">
+                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-[var(--brand-200)] text-primary font-bold font-mono text-[10.5px]">1</span>
+                任务背景与目标 / Target Scope
+              </h5>
+              <p className="pl-6.5 text-slate-500 leading-normal">
+                围绕给定预算上限（限额：{budgetLimit}万）与资源约束（人数：≤30人，时限：72小时），建立一套主备、高容错、防崩溃的多模态适应性部署方案。通过多智能体委员会多轮博弈对抗演炼，彻底击碎不确定性风险，平滑过渡并投产运行。
+              </p>
+            </div>
+
+            {/* Item 2 */}
+            <div className="space-y-1.5">
+              <h5 className="font-extrabold text-slate-900 flex items-center gap-1.5 text-[12px]">
+                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-[var(--brand-200)] text-[var(--brand-900)] font-bold font-mono text-[10.5px]">2</span>
+                约束条件与关键假设 / Ground Hypotheses
+              </h5>
+              <div className="pl-6.5 grid grid-cols-1 md:grid-cols-2 gap-3 mt-1.5 text-slate-500">
+                <div className="p-3 bg-slate-50 border border-slate-150 rounded-xl space-y-1">
+                  <span className="font-black text-slate-800 text-[10.5px] block">📌 指向性硬约束:</span>
+                  <ul className="list-disc pl-4 space-y-1 text-[10px]">
+                    <li>预算开销指示极限: <b className="text-slate-850">≤ {budgetLimit}万</b></li>
+                    <li>人力池最大可用总额: <b className="text-slate-850">≤ 30人</b></li>
+                    <li>全投产周转交付极限: <b className="text-slate-850">≤ 72小时</b></li>
+                  </ul>
+                </div>
+                <div className="p-3 bg-slate-50 border border-slate-150 rounded-xl space-y-1">
+                  <span className="font-black text-slate-800 text-[10.5px] block">🔮 关键假设依据:</span>
+                  <ul className="list-disc pl-4 space-y-1 text-[10px]">
+                    <li>阶段一能够在24h内快捷、高配合度、无阻碍补全关键参数</li>
+                    <li>灾灾备系统对逻辑双微高可用（云原生 K3s）具有高度适配性</li>
+                    <li>极端环境历史数据具有一定参照性，各微服务配合维持稳定</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            {/* Item 3 (Interactive roadmap timeline pipeline mockup) */}
+            <div className="space-y-3">
+              <h5 className="font-extrabold text-slate-900 flex items-center gap-1.5 text-[12px]">
+                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-purple-50 text-purple-600 font-bold font-mono text-[10.5px]">3</span>
+                三阶段推进方案路线图 / Three-Phase Integration Roadmap
+              </h5>
+              <p className="pl-6.5 text-slate-500 pb-1">
+                项目设计采用分段非对称递进开发，首尾相扣，利用熔断和回滚阀门最大化减少交付风险：
+              </p>
+              
+              <div className="pl-6.5 grid grid-cols-1 md:grid-cols-3 gap-4">
+                
+                {/* Phase 1 card */}
+                <div className="bg-slate-50 border border-slate-150 rounded-2xl p-4 flex flex-col justify-between hover:border-red-200 transition relative">
+                  <div className="absolute top-2.5 right-3 px-2 py-0.5 rounded-full bg-[var(--brand-200)] text-primary border border-red-100 font-mono font-bold text-[9px]">
+                    0 - 24h
+                  </div>
+                  <div>
+                    <span className="font-black text-[11.5px] tracking-tight block mb-2 text-primary">
+                      阶段一：系统信息补全
+                    </span>
+                    <ul className="text-[10px] text-slate-500 space-y-1.5 leading-snug">
+                      <li className="flex items-start gap-1">
+                        <span className="text-primary">•</span>
+                        <span>补缺所有缺失现状对齐指标</span>
+                      </li>
+                      <li className="flex items-start gap-1">
+                        <span className="text-primary">•</span>
+                        <span>拉网厘清核心需求物理缺失</span>
+                      </li>
+                      <li className="flex items-start gap-1">
+                        <span className="text-primary">•</span>
+                        <span>与一线用户对齐约束边界</span>
+                      </li>
+                    </ul>
+                  </div>
+                  <div className="border-t border-slate-150 pt-3 mt-4 flex items-center justify-between text-[9px]">
+                    <span className="text-slate-400 font-bold">交付物件:</span>
+                    <span className="text-slate-700 bg-slate-200/50 px-1.5 py-0.5 rounded font-bold font-sans">《范围基准对齐白皮书》</span>
+                  </div>
+                </div>
+
+                {/* Phase 2 card */}
+                <div className="bg-slate-50 border border-slate-150 rounded-2xl p-4 flex flex-col justify-between hover:border-purple-200 transition relative">
+                  <div className="absolute top-2.5 right-3 px-2 py-0.5 rounded-full bg-purple-50 text-purple-600 border border-purple-100 font-mono font-bold text-[9px]">
+                    24 - 60h
+                  </div>
+                  <div>
+                    <span className="font-black text-[11.5px] tracking-tight block mb-2 text-purple-650">
+                      阶段二：主任务核心递进
+                    </span>
+                    <ul className="text-[10px] text-slate-500 space-y-1.5 leading-snug">
+                      <li className="flex items-start gap-1">
+                        <span className="text-purple-500">•</span>
+                        <span>5个核心子模块并行极速构建</span>
+                      </li>
+                      <li className="flex items-start gap-1">
+                        <span className="text-purple-500">•</span>
+                        <span>多智能体拓扑动态推演和收敛</span>
+                      </li>
+                      <li className="flex items-start gap-1">
+                        <span className="text-purple-500">•</span>
+                        <span>自习惯里程碑路径重排与分配</span>
+                      </li>
+                    </ul>
+                  </div>
+                  <div className="border-t border-slate-150 pt-3 mt-4 flex items-center justify-between text-[9px]">
+                    <span className="text-slate-400 font-bold">交付物件:</span>
+                    <span className="text-slate-700 bg-slate-200/50 px-1.5 py-0.5 rounded font-bold font-sans">《容器级物理架构拓扑》</span>
+                  </div>
+                </div>
+
+                {/* Phase 3 card */}
+                <div className="bg-slate-50 border border-slate-150 rounded-2xl p-4 flex flex-col justify-between hover:border-emerald-200 transition relative">
+                  <div className="absolute top-2.5 right-3 px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-600 border border-emerald-100 font-mono font-bold text-[9px]">
+                    60 - 72h
+                  </div>
+                  <div>
+                    <span className="font-black text-[11.5px] tracking-tight block mb-2 text-emerald-650">
+                      阶段三：极端风险安全收敛
+                    </span>
+                    <ul className="text-[10px] text-slate-500 space-y-1.5 leading-snug">
+                      <li className="flex items-start gap-1">
+                        <span className="text-emerald-500">•</span>
+                        <span>一键拉闸灾灾备崩溃性沙盒论证</span>
+                      </li>
+                      <li className="flex items-start gap-1">
+                        <span className="text-emerald-500">•</span>
+                        <span>安全审核拦截与物理封签加签</span>
+                      </li>
+                      <li className="flex items-start gap-1">
+                        <span className="text-emerald-500">•</span>
+                        <span>打包大案报告完美交付投产运行</span>
+                      </li>
+                    </ul>
+                  </div>
+                  <div className="border-t border-slate-150 pt-3 mt-4 flex items-center justify-between text-[9px]">
+                    <span className="text-slate-400 font-bold">交付物件:</span>
+                    <span className="text-slate-700 bg-slate-200/50 px-1.5 py-0.5 rounded font-bold font-sans">《投产交付大白皮书》</span>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+
+            {/* Item 4 */}
+            <div className="space-y-1.5">
+              <h5 className="font-extrabold text-slate-900 flex items-center gap-1.5 text-[12px]">
+                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-amber-50 text-amber-600 font-bold font-mono text-[10.5px]">4</span>
+                资源配置计划 / Budget & Resource Allocation
+              </h5>
+              <div className="pl-6.5 text-slate-500 space-y-2 leading-relaxed">
+                <p>
+                  主备案并轨总体支出已精精控制在限额内（耗资约 <b className="text-slate-900 font-black">{Math.round(budgetLimit * 0.925 * 10) / 10}万元</b>，含容器、中继微灾备硬件耗销：42%，情报库与政策规则授权：23%，防崩溃校验与极端测试：17%，极客安全风控硬预留：10.5%，剩余资金安全冗余）。
+                </p>
+                <div className="flex flex-wrap gap-2 pt-1 font-bold text-[10px]">
+                  <span className="bg-slate-100 px-2.5 py-1 rounded-lg border border-slate-150 text-slate-700">
+                    总限额极限: <b>{budgetLimit}万元</b>
+                  </span>
+                  <span className="bg-[var(--brand-200)] text-[var(--brand-900)] px-2.5 py-1 rounded-lg border border-red-200">
+                    军官与执行队伍编制: <b>28人（合规限度）</b>
+                  </span>
+                  <button 
+                    onClick={() => triggerToast("📅 正在基于实时72小时主过程进行甘特图渲染...")}
+                    className="text-primary hover:underline flex items-center gap-1 cursor-pointer font-black"
+                  >
+                    [在线查看项目开发实施甘特图 timeline]
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {/* Item 5 */}
+            <div className="space-y-1.5">
+              <h5 className="font-extrabold text-slate-900 flex items-center gap-1.5 text-[12px]">
+                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-red-50 text-red-650 font-bold font-mono text-[10.5px]">5</span>
+                风险识别与安全应对 / Secondary Risk Management
+              </h5>
+              <p className="pl-6.5 text-slate-500 leading-normal">
+                通过多智能体委员会滚动博弈对抗和风险拦截验证，提前判定并锁定「需求过载细节波动」、「物理接机到货故障」、「通信源不完整滞缓」等 3 项主要隐忧。全部预案、补偿基金及冗余措施已完成，详见右侧面板。
+              </p>
+            </div>
+
+            {/* Item 6 */}
+            <div className="space-y-1.5">
+              <h5 className="font-extrabold text-slate-900 flex items-center gap-1.5 text-[12px]">
+                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-emerald-50 text-emerald-650 font-bold font-mono text-[10.5px]">6</span>
+                关键里程碑控制链与下一步工作 / Execution Advice
+              </h5>
+              <div className="pl-6.5 text-slate-500 space-y-2 mt-2 leading-relaxed">
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 text-[9.5px] font-medium">
+                  <div className="p-2 bg-slate-50 border border-slate-150 rounded-xl flex items-start gap-2">
+                    <span className="h-4.5 w-4.5 rounded bg-[var(--brand-200)]0 text-white flex items-center justify-center shrink-0 font-bold font-mono text-[9px]">M1</span>
+                    <div>
+                      <b className="text-slate-800 block text-[10.5px]">【T+12h 状态核验】</b>
+                      <span>拉网对齐所有缺失要素，未达标熔断顺延</span>
+                    </div>
+                  </div>
+                  
+                  <div className="p-2 bg-slate-50 border border-slate-150 rounded-xl flex items-start gap-2">
+                    <span className="h-4.5 w-4.5 rounded bg-purple-500 text-white flex items-center justify-center shrink-0 font-bold font-mono text-[9px]">M2</span>
+                    <div>
+                      <b className="text-slate-800 block text-[10.5px]">【T+24h 双活就绪】</b>
+                      <span>物理容器拉通，注入最极限崩溃测试演习</span>
+                    </div>
+                  </div>
+
+                  <div className="p-2 bg-slate-50 border border-slate-150 rounded-xl flex items-start gap-2">
+                    <span className="h-4.5 w-4.5 rounded bg-emerald-500 text-white flex items-center justify-center shrink-0 font-bold font-mono text-[9px]">M3</span>
+                    <div>
+                      <b className="text-slate-800 block text-[10.5px]">【T+60h 安全审计】</b>
+                      <span>突发拔网接管成功，获得整装绿码授权</span>
+                    </div>
+                  </div>
+                </div>
+                <p className="text-[10.5px] text-slate-700 bg-amber-50/60 p-2.5 rounded-lg border border-amber-100 leading-normal font-medium mt-1.5">
+                  💡 <b>行动意见:</b> 指挥官裁可此成果后，项目立即固化加锁。每日安排每12小时高维配合对齐站会，强力扣死这 3 颗 M-Class 螺丝钉。
+                </p>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+        {/* Section III: 论证依据支撑库 (Supporting Evidence Pieces) */}
+        <div className="bg-white border border-slate-150 rounded-2xl p-5 hover:shadow-md transition space-y-4">
+          <div className="flex items-center gap-2 border-b border-slate-100 pb-3 mb-1">
+            <Clipboard className="w-4.5 h-4.5 text-primary" strokeWidth={2.5} />
+            <h4 className="text-xs font-black text-slate-900 uppercase tracking-widest">
+              二、论证依据要件归档情况
+            </h4>
+          </div>
+          
+          <p className="text-xs text-slate-400 font-medium">
+            本报告方案具有无可挑剔的底层输入支撑。点击各要件名称，可通过云控制台查看对应沙盒隔离归档详情：
+          </p>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3 pt-1 text-xs">
+            {[
+              { num: "01", name: "用户需求研商访谈纪要.txt", size: "14.2 KB", color: "border-red-100 bg-[var(--brand-200)]/20 text-[var(--brand-900)]" },
+              { num: "02", name: "指标现状及运行分析报告.docx", size: "2.4 MB", color: "border-teal-100 bg-teal-50/20 text-teal-750" },
+              { num: "03", name: "典型物理拓扑经验 (2份).pdf", size: "4.8 MB", color: "border-purple-100 bg-purple-50/20 text-purple-750" },
+              { num: "04", name: "安全极端防范策略库.json", size: "128 KB", color: "border-amber-100 bg-amber-50/20 text-amber-700" },
+              { num: "05", name: "全行业合规防灾法规准则.pdf", size: "1.9 MB", color: "border-red-100 bg-red-50/20 text-red-750" }
+            ].map((doc, index) => (
+              <div 
+                key={index} 
+                onClick={() => triggerToast(`正在预览论证原始要件: 《${doc.name}》...`)}
+                className={`p-3 border rounded-xl flex flex-col justify-between hover:scale-[1.02] active:scale-95 transition cursor-pointer select-none ${doc.color}`}
+              >
+                <div>
+                  <b className="font-mono text-[9px] block mb-1 opacity-70">FILE-{doc.num}</b>
+                  <span className="font-bold tracking-tight text-[11px] leading-snug block line-clamp-2 min-h-[32px]">
+                    {doc.name}
+                  </span>
+                </div>
+                <div className="flex items-center justify-between text-[9px] opacity-75 mt-3 border-t border-slate-200/50 pt-1.5 font-mono">
+                  <span>附件档案</span>
+                  <span>{doc.size}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Section IV: 采纳采定理由陈述 (Final Ruling Statement / Stamp Board) */}
+        <div className="bg-gradient-to-r from-amber-50/40 via-yellow-50/30 to-amber-50/20 border border-amber-200/70 rounded-2xl p-5 hover:shadow-md transition">
+          <div className="flex items-center gap-2 mb-2.5">
+            <Star className="w-4.5 h-4.5 text-amber-500 fill-amber-400" />
+            <h4 className="text-xs font-black text-slate-900 uppercase tracking-widest">
+              三、采纳理由与最终裁定判词
+            </h4>
+          </div>
+          <div className="text-xs text-slate-800 leading-relaxed font-semibold">
+            <p>
+              经由专家委员会团队大模型多视角滚动共计 <b className="text-slate-900 font-extrabold">12 轮</b> 极限对抗研商、冲突演炼得出：在「工期匹配度」(92%)、「预算开支控制度」(90%)、「极端容灾抗体余温」(88%) 与「总价值安全收益率」(91%) 四维雷达对决合围精算测定中，本主案 A 指标总合分最高（<b>90.3分</b>）。相比其他预算爆限、对外部相关配合条件依赖极重的僵硬路线，本规划方案在限时给定的 {budgetLimit}万元 条件内，取得了最高确凿的可执行概率。特此裁决：<b>给予最高优先级采纳，盖印发布！</b>
+            </p>
+          </div>
+        </div>
+
+        {/* Footer Bottom Actions Box */}
+        <div className="pt-2 border-t border-slate-100 flex items-center justify-between flex-wrap gap-4">
+          <div className="flex items-center gap-1 text-slate-400 text-xs font-medium">
+            <svg className="w-4 h-4 text-slate-400 animate-pulse shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.5">
+              <circle cx="12" cy="12" r="10" />
+              <path d="M12 6v6l4 2" />
+            </svg>
+            <span className="line-clamp-1">全案终审已经盖印下发。若再次起草新路线会商，可点左侧清归。</span>
+          </div>
+
+          <div className="flex items-center gap-2 w-full md:w-auto">
+            <button 
+              id="step3-reset-btn"
+              onClick={() => {
+                setCurrentStep(1);
+                setStep1MessageHistory([
+                  {
+                    id: 1,
+                    sender: "理解专家 (Gemini)",
+                    avatarType: "blue",
+                    content: "您好！我是多智能体理解与转化专家。请问我们本次需要进行什么业务路线图的顶层研商？(您可以选择下方预设模板一键录入任务环境)",
+                    time: "10:00:00"
+                  }
+                ]);
+                setStep2RoundtableDialogues([
+                  {
+                    id: 1,
+                    sender: "总结陈述智能体 (Gemini 2.5 Pro)",
+                    avatarType: "blue",
+                    content: "各位专家好，本论证轮主要针对“任务目标72小时极速打通投产”及“总预算在500万内开销”做可行度分析与冗余设计研商。请各抒己见。",
+                    time: "10:01:05",
+                    confidence: "主席初始化"
+                  }
+                ]);
+                triggerToast("✨ 指导系统成功完成归档，重新开始新一轮规划会商");
+              }}
+              className="flex-1 md:flex-none border border-slate-700 text-slate-700 hover:text-slate-900 hover:bg-slate-50 text-[10.5px] font-bold px-4 py-3 rounded-2xl transition cursor-pointer select-none font-sans"
+            >
+              重新起草新规划
+            </button>
+            <button 
+              id="step3-sign-btn"
+              onClick={() => {
+                triggerToast("🚀 [最高指令授权签批]：协同全案已加签封存下发！核心路由组和灾灾备机制已就绪保障投产！");
+              }}
+              className="flex-1 md:flex-none bg-primary hover:bg-[var(--brand-900)] text-white text-[10.5px] font-black px-5 py-3 rounded-2xl shadow-lg shadow-primary/20 active:scale-95 transition cursor-pointer select-none flex items-center gap-1.5 justify-center"
+            >
+              <Sparkles className="w-3.5 h-3.5 text-red-200" />
+              签发起草成果并投产运行
+            </button>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+  );
+};
diff --git a/frontend-web/src/roundtable-planning/index.ts b/frontend-web/src/roundtable-planning/index.ts
new file mode 100644
index 00000000..020bea8d
--- /dev/null
+++ b/frontend-web/src/roundtable-planning/index.ts
@@ -0,0 +1,2 @@
+export { default as RoundtablePlanningPage } from "./pages/RoundtablePlanningPage";
+export { HighFidelityReport } from "./components/HighFidelityReport";
diff --git a/frontend-web/src/roundtable-planning/pages/RoundtablePlanningPage.tsx b/frontend-web/src/roundtable-planning/pages/RoundtablePlanningPage.tsx
new file mode 100644
index 00000000..cc356e7b
--- /dev/null
+++ b/frontend-web/src/roundtable-planning/pages/RoundtablePlanningPage.tsx
@@ -0,0 +1,2045 @@
+import React, { useState, useEffect, useRef } from "react";
+import { HighFidelityReport } from "@/roundtable-planning/components/HighFidelityReport";
+import { useTheme } from "@/contexts/ThemeContext";
+import { cn } from "@/lib/utils";
+import { 
+  Shield, 
+  MessageSquare, 
+  Clipboard, 
+  Users, 
+  Activity, 
+  CheckCircle, 
+  HelpCircle, 
+  Smile, 
+  Send, 
+  Repeat, 
+  X, 
+  Save, 
+  Clock, 
+  Play, 
+  Pause, 
+  ChevronRight, 
+  Settings, 
+  Download, 
+  Share2, 
+  Check, 
+  Sparkles, 
+  AlertTriangle,
+  Layers,
+  ArrowRight,
+  TrendingUp,
+  Cpu,
+  CornerDownRight,
+  Star,
+  ShieldCheck
+} from "lucide-react";
+
+// --- Custom Crisp SVGs to Match High Fidelity Avatars ---
+const Man1Avatar = ({ size = "h-8 w-8" }: { size?: string }) => (
+  <span className={`relative flex ${size} shrink-0 overflow-hidden rounded-full border border-slate-200/80 shadow-sm`}>
+    <svg className="h-full w-full" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="100" height="100" fill="#E2E8F0" />
+      {/* Background sky/gradient */}
+      <circle cx="50" cy="50" r="45" fill="#FEEDED" />
+      {/* Dark Suit Jacket */}
+      <path d="M15 95 C 15 70, 30 65, 50 65 C 70 65, 85 70, 85 95 Z" fill="#1E293B" />
+      {/* White Shirt collar */}
+      <path d="M40 65 L50 78 L60 65 Z" fill="#FFFFFF" />
+      {/* Dark Tie */}
+      <path d="M47 72 L53 72 L51 98 L49 98 Z" fill="#E11D48" />
+      {/* Face & Neck */}
+      <path d="M40 65 L40 55 C 40 55, 45 58, 50 58 C 55 58, 60 55, 60 55 L60 65 Z" fill="#FBCFE8" />
+      <circle cx="50" cy="38" r="18" fill="#FBCFE8" />
+      {/* Eyes and Eyebrows */}
+      <path d="M42 34 Q 45 32 47 34" stroke="#0F172A" strokeWidth="2.5" strokeLinecap="round" />
+      <path d="M53 34 Q 55 32 58 34" stroke="#0F172A" strokeWidth="2.5" strokeLinecap="round" />
+      <circle cx="45" cy="39" r="2.5" fill="#0F172A" />
+      <circle cx="55" cy="39" r="2.5" fill="#0F172A" />
+      {/* Hair (Black neat professional crop) */}
+      <path d="M30 32 C 30 18, 70 18, 70 32 C 72 26, 68 15, 50 15 C 32 15, 28 26, 30 32 Z" fill="#0F172A" />
+      <path d="M30 32 C30 32, 28 35, 32 35 C34 35, 36 30, 36 30 Z" fill="#0F172A" />
+      <path d="M70 32 C70 32, 72 35, 68 35 C66 35, 64 30, 64 30 Z" fill="#0F172A" />
+    </svg>
+  </span>
+);
+
+const RobotAvatar = ({ bg = "bg-primary/10", headColor = "#f5222d", size = "h-8 w-8" }: { bg?: string, headColor?: string, size?: string }) => (
+  <span className={`relative flex ${size} shrink-0 overflow-hidden rounded-full border border-red-100/50 shadow-sm ${bg}`}>
+    <svg className="h-full w-full" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+      {/* Robot Rounded Head */}
+      <rect x="25" y="28" width="50" height="42" rx="12" fill={headColor} />
+      {/* Black screen mask */}
+      <rect x="32" y="35" width="36" height="24" rx="6" fill="#1E293B" />
+      {/* Glowing cute round blue eyes */}
+      <circle cx="42" cy="45" r="4" fill="#F74750" className="animate-pulse" />
+      <circle cx="58" cy="45" r="4" fill="#F74750" className="animate-pulse" />
+      {/* Mouth curve */}
+      <path d="M45 52 Q 50 55 55 52" stroke="#F74750" strokeWidth="2.2" strokeLinecap="round" />
+      {/* Ears/Side screws */}
+      <rect x="20" y="41" width="5" height="16" rx="2" fill="#cf1322" />
+      <rect x="75" y="41" width="5" height="16" rx="2" fill="#cf1322" />
+      {/* Single Cute Antenna */}
+      <line x1="50" y1="28" x2="50" y2="15" stroke={headColor} strokeWidth="4" strokeLinecap="round" />
+      <circle cx="50" cy="12" r="5" fill="#FA9196" />
+    </svg>
+  </span>
+);
+
+// High quality abstract avatars for other intelligence roles
+const BlueRobotAvatar = ({ size = "h-8 w-8" }: { size?: string }) => (
+  <RobotAvatar headColor="#cf1322" bg="bg-[var(--brand-200)]" size={size} />
+);
+const PurpleRobotAvatar = ({ size = "h-8 w-8" }: { size?: string }) => <RobotAvatar headColor="#7c3aed" bg="bg-purple-100/40" size={size} />;
+const EmeraldRobotAvatar = ({ size = "h-8 w-8" }: { size?: string }) => <RobotAvatar headColor="#059669" bg="bg-emerald-100/40" size={size} />;
+const AmberRobotAvatar = ({ size = "h-8 w-8" }: { size?: string }) => <RobotAvatar headColor="#d97706" bg="bg-amber-100/40" size={size} />;
+const PinkRobotAvatar = ({ size = "h-8 w-8" }: { size?: string }) => <RobotAvatar headColor="#db2777" bg="bg-pink-100/40" size={size} />;
+
+// --- Helper component to get avatar by string type ---
+function getAvatar(type: string, size: string = "h-8 w-8") {
+  switch (type) {
+    case "man":
+    case "human":
+      return <Man1Avatar size={size} />;
+    case "blue":
+      return <BlueRobotAvatar size={size} />;
+    case "purple":
+      return <PurpleRobotAvatar size={size} />;
+    case "emerald":
+      return <EmeraldRobotAvatar size={size} />;
+    case "amber":
+      return <AmberRobotAvatar size={size} />;
+    case "pink":
+      return <PinkRobotAvatar size={size} />;
+    default:
+      return <RobotAvatar size={size} />;
+  }
+}
+
+// --- Extended Multi-Agent dialogue simulation rounds pool ---
+const simulatedRoundPool = [
+  {
+    sender: "情报收集",
+    avatarType: "purple",
+    senderRole: "intelligence",
+    confidence: "高可信",
+    content: "📢 [情报追加] 检索到华东通信中枢类似物理断线案例，当时曾因极限负载冷切短接导致恢复延期 15%。已向执行规划端推送自恢复重组逻辑。"
+  },
+  {
+    sender: "环境评估",
+    avatarType: "emerald",
+    senderRole: "environment",
+    confidence: "动态沙盒 98%",
+    content: "🌡️ [热失稳警报] 预测在 T+36h 至 T+40h（高负载测试节点），物理降温柜将执行自清洁维护。我已通知方案设计端调低该时段的瞬时极限功率。"
+  },
+  {
+    sender: "方案设计",
+    avatarType: "human",
+    senderRole: "design",
+    confidence: "模型调整完成",
+    content: "📐 [方案调优] 收到环境和情报侧指标！已成功将主极速方案的测试镜像烘焙时间错开该高温窗口，挪前至 T+24h。完美规避第 48 小时的高温警戒区！"
+  },
+  {
+    sender: "风险审查",
+    avatarType: "amber",
+    senderRole: "risk",
+    confidence: "合规检测绿码",
+    content: "🛡️ [安全审查通过] 沙盒深度测析：方案 A 全栈静态脚本和隔离拓扑完全符合特级安全审计底线。安全系数上升 8.3%，物理漏损判定绿码！"
+  },
+  {
+    sender: "执行规划",
+    avatarType: "pink",
+    senderRole: "execution",
+    confidence: "自习惯里程碑",
+    content: "📅 [甘特图重排就绪] 72 小时全交付链路已锁定：T+12h 架构冻结，T+24h 镜像热部署规避，T+36h 集成通过，T+72h 整体可落地投产。全程算力承载平滑。"
+  },
+  {
+    sender: "总结陈述",
+    avatarType: "blue",
+    senderRole: "coordinator",
+    confidence: "全案收敛盖印",
+    content: "🏆 [全案决策固化] 研讨论证完美收敛！主极速构建案（310 万）携手备隔离冷库案（152.5 万），共耗资 462.5 万元，各决策节点已正式盖印交割！"
+  }
+];
+
+export default function RoundtablePlanningPage() {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+
+  // Navigation active tab
+  const [currentStep, setCurrentStep] = useState<number>(1);
+  const [inputText, setInputText] = useState<string>("");
+  const [charactersLeft, setCharactersLeft] = useState<number>(0);
+  const [showToast, setShowToast] = useState<string | null>(null);
+
+  // Scroll Container References
+  const step1ScrollRef = useRef<HTMLDivElement>(null);
+  const step2ScrollRef = useRef<HTMLDivElement>(null);
+
+  // Dynamic state variables for roundtable simulation
+  const [budgetLimit, setBudgetLimit] = useState<number>(500);
+  const [consensusPercentage, setConsensusPercentage] = useState<number>(89.4);
+  const [selectedAgentId, setSelectedAgentId] = useState<number | null>(null);
+  const [activeSpeakerId, setActiveSpeakerId] = useState<number | null>(null);
+  const [agentThinkingStatus, setAgentThinkingStatus] = useState<string | null>(null);
+  const [simRoundIndex, setSimRoundIndex] = useState<number>(0);
+
+  // Custom presets for agent model, weight, temperature and prompt editors
+  const [agentConfigs, setAgentConfigs] = useState<{ [key: number]: { model: string; weight: number; prompt: string; temp: number } }>({
+    2: { model: "Gemini 2.5 Flash", weight: 90, temp: 0.2, prompt: "你负责解析核心任务、资源极限和用户目标偏好，监督全局研商收敛。" },
+    3: { model: "Gemini 2.5 Flash", weight: 85, temp: 0.3, prompt: "你负责搜集电力、通信系统、历史极端部署条件情报，支持备灾架构体系。" },
+    4: { model: "Gemini 2.5 Pro", weight: 88, temp: 0.1, prompt: "你评估服务器机房热载荷、算力并发承载极限，预报运行瓶颈与风险时钟。" },
+    5: { model: "Claude 3.5 Sonnet", weight: 92, temp: 0.4, prompt: "你负责双全栈主备建模设计，高内聚低耦合，规避不可预知停机崩溃。" },
+    6: { model: "Gemini 2.5 Pro", weight: 95, temp: 0.1, prompt: "你作为安全主管，严厉把控预算开销与合规通过率防线，识别计划漏洞。" },
+    7: { model: "Gemini 2.5 Flash", weight: 80, temp: 0.4, prompt: "你负责对72小时里程碑执行路径规划、重排和资源调配演练序列。" },
+  });
+
+  // Message lists state representation to mimic image items & enable actual conversations
+  const [interactiveMessages, setInteractiveMessages] = useState([
+    {
+      id: 1,
+      sender: "agent",
+      senderName: "任务理解智能体",
+      content: "主方案需覆盖哪些关键目标？请列出1~3个核心目标。",
+      time: "10:34:10",
+    },
+    {
+      id: 2,
+      sender: "user",
+      senderName: "用户",
+      content: "提升执行效率、降低成本、确保安全合规。",
+      time: "10:34:35",
+    },
+    {
+      id: 3,
+      sender: "agent",
+      senderName: "任务理解智能体",
+      content: "是否存在必须规避的风险或限制条件？",
+      time: "10:34:48",
+    },
+    {
+      id: 4,
+      sender: "user",
+      senderName: "用户",
+      content: "避免重大安全事故，避免舆情风险，合规为先。",
+      time: "10:35:02",
+    }
+  ]);
+
+  // Timeline entries representing Clarification Logs
+  const [timelineEntries, setTimelineEntries] = useState([
+    {
+      id: 1,
+      time: "10:32:15",
+      title: "用户提出任务",
+      desc: "请帮我围绕某复杂任务制定规划方案。"
+    },
+    {
+      id: 2,
+      time: "10:32:22",
+      title: "智能体追问",
+      desc: "请明确目标、时间要求与资源限制。"
+    },
+    {
+      id: 3,
+      time: "10:33:02",
+      title: "用户补充信息",
+      desc: "72小时内完成，可用预算500万，人员30人以内。"
+    },
+    {
+      id: 4,
+      time: "10:33:36",
+      title: "用户确认偏好",
+      desc: "是，请保留主方案并给出备选方案。"
+    }
+  ]);
+
+  // Roles in roundtable state (updates as we switch steps!)
+  const [roles, setRoles] = useState([
+    { id: 1, name: "指挥员 / 主持人", type: "human", status: "等待激活" },
+    { id: 2, name: "总结陈述", type: "agent", status: "等待激活" },
+    { id: 3, name: "情报收集", type: "agent", status: "等待激活" },
+    { id: 4, name: "环境评估", type: "agent", status: "等待激活" },
+    { id: 5, name: "方案设计", type: "human", status: "等待激活" },
+    { id: 6, name: "风险审查", type: "agent", status: "等待激活" },
+    { id: 7, name: "执行规划", type: "agent", status: "等待激活" },
+    { id: 8, name: "总结陈述", type: "agent", status: "等待陈述" },
+  ]);
+
+  // Step 2 Simulated Discussion Log
+  const [step2RoundtableDialogues, setStep2RoundtableDialogues] = useState<any[]>([
+    {
+      id: 1,
+      sender: "情报收集",
+      avatarType: "purple",
+      content: "📢 经全网高价值情报与历史同类备案检索，类似“72小时极速部署”在电力与通信中枢系统常面临软硬件适配断层风险，建议采用已验证的云原生容灾中继器架构模型。",
+      time: "11:02:18",
+      confidence: "高可信"
+    },
+    {
+      id: 2,
+      sender: "环境评估",
+      avatarType: "emerald",
+      content: "🌍 主服务器托管物理环境测试就绪。在极端并发与资源受限下，机柜最高算力分配可承受 1.8x 的弹性波动。72小时周期内由于降温机组轮休，需规避第48-52小时的高温警戒区。",
+      time: "11:03:05",
+      confidence: "精确度96%"
+    },
+    {
+      id: 3,
+      sender: "指挥员 / 主持人",
+      avatarType: "man",
+      content: "🎤 研讨团队注意，用户要求500万预算硬约束，且首要目标是提升执行效率和保障100%合规。方案设计端应当对核心敏捷路径进行显式标注。",
+      time: "11:04:12",
+      confidence: "主席裁决"
+    },
+    {
+      id: 4,
+      sender: "方案设计",
+      avatarType: "man",
+      content: "📐 已完成主备双核心方案建模。主极速构建方案基于K3s轻量容器，可在36小时内提前部署，并由情报端微模型预烘焙；备用方案配置纯物理备份，确保全栈零公网隔离。",
+      time: "11:05:40",
+      confidence: "主责输出"
+    },
+    {
+      id: 5,
+      sender: "风险审查",
+      avatarType: "amber",
+      content: "⚠️ 指出主极速方案漏洞：由于预算硬性限制500万，自动化测试外包采购与安全审计费用需压缩至60万之内。否则会触碰预算预警线，建议在第三轮调度中裁剪旁路遥测组件。",
+      time: "11:06:55",
+      confidence: "黄色警戒"
+    },
+    {
+      id: 6,
+      sender: "执行规划",
+      avatarType: "pink",
+      content: "📅 72小时里程碑已自适应重排：T+12h 架构冻结；T+36h 核心集成验证；T+48h 风险切片模拟与极速演练；T+60h 预算与合规静态查验；T+72h 整体安全投产。",
+      time: "11:08:10",
+      confidence: "自动化规划器"
+    }
+  ]);
+
+  // Inputs for Step 2 conversation simulation controls
+  const [roundTableSpeed, setRoundTableSpeed] = useState<string>("正常");
+  const [isRoundTableRunning, setIsRoundTableRunning] = useState<boolean>(true);
+  const [customAgentInput, setCustomAgentInput] = useState<string>("");
+
+  // Toast auto-dismiss logic
+  useEffect(() => {
+    if (showToast) {
+      const timer = setTimeout(() => setShowToast(null), 3500);
+      return () => clearTimeout(timer);
+    }
+  }, [showToast]);
+
+  // Step 1 Scroll to bottom automatically
+  useEffect(() => {
+    if (step1ScrollRef.current) {
+      step1ScrollRef.current.scrollTo({
+        top: step1ScrollRef.current.scrollHeight,
+        behavior: "smooth"
+      });
+    }
+  }, [interactiveMessages]);
+
+  // Step 2 Scroll to bottom automatically
+  useEffect(() => {
+    if (step2ScrollRef.current) {
+      step2ScrollRef.current.scrollTo({
+        top: step2ScrollRef.current.scrollHeight,
+        behavior: "smooth"
+      });
+    }
+  }, [step2RoundtableDialogues]);
+
+  // Roundtable Dynamic Simulation Timer Hook
+  useEffect(() => {
+    if (currentStep !== 2 || !isRoundTableRunning) return;
+
+    let intervalTime = 5000;
+    if (roundTableSpeed === "慢速") intervalTime = 8000;
+    else if (roundTableSpeed === "极速") intervalTime = 2500;
+
+    const interval = setInterval(() => {
+      if (simRoundIndex < simulatedRoundPool.length) {
+        const nextMessageInfo = simulatedRoundPool[simRoundIndex];
+
+        // Determine correct Agent ID to highlight and activate
+        let speakerId = 3; // default: Purple / 情报收集
+        if (nextMessageInfo.senderRole === "environment") speakerId = 4;
+        else if (nextMessageInfo.senderRole === "design") speakerId = 5;
+        else if (nextMessageInfo.senderRole === "risk") speakerId = 6;
+        else if (nextMessageInfo.senderRole === "execution") speakerId = 7;
+        else if (nextMessageInfo.senderRole === "coordinator") speakerId = 2;
+
+        // Visual highlights speaker on roundtable diagram
+        setActiveSpeakerId(speakerId);
+
+        // Update active role and highlight typing indicator
+        setRoles(prevRoles => prevRoles.map(item => {
+          if (item.id === speakerId) {
+            return { ...item, status: "研讨中" };
+          } else if (item.status === "研讨中") {
+            return { ...item, status: "在线" };
+          }
+          return item;
+        }));
+
+        setAgentThinkingStatus(`🤖 【${nextMessageInfo.sender}】正在结合最新人设约束深度推算，生成论证要点...`);
+
+        const delayTimeout = setTimeout(() => {
+          const dialogueTime = new Date().toLocaleTimeString("zh-CN", { hour12: false });
+          const newDialogue = {
+            id: Date.now(),
+            sender: nextMessageInfo.sender,
+            avatarType: nextMessageInfo.avatarType,
+            content: nextMessageInfo.content,
+            time: dialogueTime,
+            confidence: nextMessageInfo.confidence
+          };
+
+          setStep2RoundtableDialogues(prev => [...prev, newDialogue]);
+          setSimRoundIndex(prevIndex => prevIndex + 1);
+          setAgentThinkingStatus(null);
+
+          // Smoothly increment consensus percentage up to 100%
+          setConsensusPercentage(prev => {
+            const stepInc = (100 - 89.4) / simulatedRoundPool.length;
+            const updated = parseFloat((prev + stepInc).toFixed(1));
+            return updated >= 100 ? 100 : updated;
+          });
+
+        }, roundTableSpeed === "极速" ? 800 : 1800);
+
+        return () => clearTimeout(delayTimeout);
+      } else {
+        // Dialogue fully completed & stabilized
+        setActiveSpeakerId(null);
+        setRoles(prevRoles => prevRoles.map(item => {
+          if (item.type === "agent" && item.status !== "已完成") {
+            return { ...item, status: "已完成" };
+          }
+          return item;
+        }));
+        if (consensusPercentage < 100) {
+          setConsensusPercentage(100);
+          triggerToast("🎉 圆桌研讨论证会圆满落幕！已取得 100% 专家组共识，提请渲染成果方案");
+        }
+      }
+    }, intervalTime);
+
+    return () => clearInterval(interval);
+  }, [currentStep, isRoundTableRunning, roundTableSpeed, simRoundIndex, consensusPercentage]);
+
+  // Adjust budget constraint dynamically
+  const handleBudgetChange = (newVal: number) => {
+    setBudgetLimit(newVal);
+    triggerToast(`💰 研商经费调优约束变更为 ${newVal} 万！各大智能体启动资源重算...`);
+
+    const tid = setTimeout(() => {
+      const respTime = new Date().toLocaleTimeString("zh-CN", { hour12: false });
+      let agentOpinion = "";
+      let speakerType = "amber";
+      let senderName = "风险审查智能体";
+
+      if (newVal < 400) {
+        agentOpinion = `⚠️ [预算警报] 经费压缩至 ${newVal} 万元，自动触发紧急安全妥协防御策略！我们将不得不裁剪旁路冷备份服务器配置，降低静态演练深度，算力容灾等级重下降至 Tier I (低安全水位)。`;
+        speakerType = "amber";
+        senderName = "风险审查智能体";
+      } else if (newVal > 540) {
+        agentOpinion = `🔋 [方案容量上升] 预算上调至充足的 ${newVal} 万元，资装弹性充裕！我已为 A 套极速构建增加了 4 组外部超大异地区容灾节点支持，灾备冗余度成功突破 Tier III+ 指标，高防高内聚！`;
+        speakerType = "purple";
+        senderName = "情报收集与适配";
+      } else {
+        agentOpinion = `⚡ [资源调配优化] 总体经费设定为 ${newVal} 万元，空间适中。我们重新规划了轻量容器 K3s 集成开销（约 ${Math.round(newVal * 0.45)} 万）和安全审计费比，总体博弈过程保持稳定态收敛。`;
+        speakerType = "pink";
+        senderName = "执行规划智能体";
+      }
+
+      const adaptiveBudgetReplier = {
+        id: Date.now() + 10,
+        sender: senderName,
+        avatarType: speakerType,
+        confidence: "资源级自适应重算",
+        content: agentOpinion,
+        time: respTime
+      };
+
+      setStep2RoundtableDialogues(prev => [...prev, adaptiveBudgetReplier]);
+    }, 1500);
+
+    return () => clearTimeout(tid);
+  };
+
+  // Save Agent config overrides and trigger recalculation
+  const handleSaveAgentAndRecalculate = (id: number) => {
+    const roleName = roles.find(r => r.id === id)?.name || "专家智能体";
+    triggerToast(`⚙️ 已部署“${roleName}”个性化参数偏好！正在同步大模型提示词防线...`);
+
+    setTimeout(() => {
+      const respTime = new Date().toLocaleTimeString("zh-CN", { hour12: false });
+      const currentConfig = agentConfigs[id];
+      const modelShort = currentConfig?.model || "Gemini 2.5 Flash";
+      const promptSnippet = currentConfig?.prompt.length > 22
+        ? currentConfig.prompt.substring(0, 22) + "..."
+        : currentConfig?.prompt || "";
+
+      let avatarColor = "blue";
+      if (id === 2) avatarColor = "blue";
+      else if (id === 3) avatarColor = "purple";
+      else if (id === 4) avatarColor = "emerald";
+      else if (id === 5) avatarColor = "human";
+      else if (id === 6) avatarColor = "amber";
+      else if (id === 7) avatarColor = "pink";
+
+      const recomputedResponse = {
+        id: Date.now() + 20,
+        sender: `${roleName} (${modelShort})`,
+        avatarType: avatarColor,
+        confidence: `个性化权重 ${currentConfig?.weight || 90}%`,
+        content: `⚡ [提示词覆写激活] 独立节点已部署为温度 ${currentConfig?.temp} 指示。结合重新加载的 Persona 指令“${promptSnippet}”，我立即优化了博弈运算函数，当前可用预算重分配函数已广播给其他专家。`,
+        time: respTime
+      };
+
+      setStep2RoundtableDialogues(prev => [...prev, recomputedResponse]);
+      setSelectedAgentId(null); // Close drawer
+    }, 1200);
+  };
+
+  // Text area counter update
+  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const val = e.target.value;
+    setInputText(val);
+    setCharactersLeft(val.length);
+  };
+
+  // Toast helper
+  const triggerToast = (msg: string) => {
+    setShowToast(msg);
+  };
+
+  // Chat sender logic for Step 1 interaction
+  const handleSendMessage = () => {
+    if (!inputText.trim()) return;
+
+    const userMsgTime = new Date().toLocaleTimeString("zh-CN", { hour12: false });
+    const userMsg = {
+      id: interactiveMessages.length + 1,
+      sender: "user",
+      senderName: "用户",
+      content: inputText,
+      time: userMsgTime,
+    };
+
+    // Append user message immediately
+    const updatedMessages = [...interactiveMessages, userMsg];
+    setInteractiveMessages(updatedMessages);
+    setInputText("");
+    setCharactersLeft(0);
+
+    // Update Clarification timeline list on the right beautifully!
+    const newTimelineEntry = {
+      id: timelineEntries.length + 1,
+      time: userMsgTime,
+      title: "用户实时反馈",
+      desc: userMsg.content.length > 25 ? userMsg.content.substring(0, 25) + "..." : userMsg.content
+    };
+    setTimelineEntries(prev => [...prev, newTimelineEntry]);
+
+    triggerToast("消息发送成功！任务意图分析中...");
+
+    // Simulated responsive intelligence robot typing back
+    setTimeout(() => {
+      const responseTime = new Date().toLocaleTimeString("zh-CN", { hour12: false });
+      const automatedReplyLine = {
+        id: updatedMessages.length + 2,
+        sender: "agent",
+        senderName: "任务理解智能体",
+        content: `已收到关于“${userMsg.content}”的更新！我已自动校对预算配比与合规规范。当前规划框架可信度提升 4.2%。请您继续审视下方待确认事项，或随时确认以进入多智能体圆桌研讨。`,
+        time: responseTime,
+      };
+      setInteractiveMessages(prev => [...prev, automatedReplyLine]);
+      triggerToast("任务理解智能体已回复！");
+    }, 1500);
+  };
+
+  // Skip step logic
+  const handleSkipQuestion = () => {
+    const systemSkipMsg = {
+      id: interactiveMessages.length + 1,
+      sender: "agent",
+      senderName: "系统提示",
+      content: "⚠️ 您跳过了当前追问，系统已使用深度预测模型填充默认最稳健配置。",
+      time: new Date().toLocaleTimeString("zh-CN", { hour12: false }),
+    };
+    setInteractiveMessages(prev => [...prev, systemSkipMsg]);
+    triggerToast("已跳过，自动填充最优配置");
+  };
+
+  // Agent follow up question automatic clicker
+  const handleAgentFollowUp = () => {
+    const automatedFollowupMsg = {
+      id: interactiveMessages.length + 1,
+      sender: "agent",
+      senderName: "任务理解智能体",
+      content: "🔎 为了使方案时间边界更加安全：请问72小时内是否允许团队进行全仿真机房集成演练？这需要额外调拨3% of 预算冗余，但安全系数能提升12%。",
+      time: new Date().toLocaleTimeString("zh-CN", { hour12: false }),
+    };
+    setInteractiveMessages(prev => [...prev, automatedFollowupMsg]);
+    triggerToast("追问生成就绪！");
+  };
+
+  // Step 2 role statuses transition when entering roundtable!
+  useEffect(() => {
+    if (currentStep === 1) {
+      setRoles([
+        { id: 1, name: "指挥员 / 主持人", type: "human", status: "等待激活" },
+        { id: 2, name: "总结陈述", type: "agent", status: "在线" },
+        { id: 3, name: "情报收集", type: "agent", status: "等待激活" },
+        { id: 4, name: "环境评估", type: "agent", status: "等待激活" },
+        { id: 5, name: "方案设计", type: "human", status: "等待激活" },
+        { id: 6, name: "风险审查", type: "agent", status: "等待激活" },
+        { id: 7, name: "执行规划", type: "agent", status: "等待激活" },
+        { id: 8, name: "总结陈述", type: "agent", status: "等待陈述" },
+      ]);
+    } else if (currentStep === 2) {
+      setRoles([
+        { id: 1, name: "指挥员 / 主持人", type: "human", status: "在线" },
+        { id: 2, name: "总结陈述", type: "agent", status: "在线" },
+        { id: 3, name: "情报收集", type: "agent", status: "在线" },
+        { id: 4, name: "环境评估", type: "agent", status: "在线" },
+        { id: 5, name: "方案设计", type: "human", status: "在线" },
+        { id: 6, name: "风险审查", type: "agent", status: "在线" },
+        { id: 7, name: "执行规划", type: "agent", status: "在线" },
+        { id: 8, name: "总结陈述", type: "agent", status: "等待陈述" },
+      ]);
+    } else {
+      setRoles([
+        { id: 1, name: "指挥员 / 主持人", type: "human", status: "已完成" },
+        { id: 2, name: "总结陈述", type: "agent", status: "已完成" },
+        { id: 3, name: "情报收集", type: "agent", status: "已完成" },
+        { id: 4, name: "环境评估", type: "agent", status: "已完成" },
+        { id: 5, name: "方案设计", type: "human", status: "已完成" },
+        { id: 6, name: "风险审查", type: "agent", status: "已完成" },
+        { id: 7, name: "执行规划", type: "agent", status: "已完成" },
+        { id: 8, name: "总结陈述", type: "agent", status: "已完成" },
+      ]);
+    }
+  }, [currentStep]);
+
+  // Inject user input to the roundtable room
+  const handleInjectToRoundtable = () => {
+    if (!customAgentInput.trim()) return;
+
+    const responseTime = new Date().toLocaleTimeString("zh-CN", { hour12: false });
+    const userInjectedMessage = {
+      id: Date.now(),
+      sender: "用户 (插话干预)",
+      avatarType: "human",
+      content: `💡 (人工指令介入) ${customAgentInput}`,
+      time: responseTime,
+      confidence: "最高指令"
+    };
+
+    setStep2RoundtableDialogues(prev => [...prev, userInjectedMessage]);
+    setCustomAgentInput("");
+    triggerToast("您的人工纠偏指令已同步至圆桌节点！");
+
+    // Automatically trigger a response from the designated Agent
+    setTimeout(() => {
+      const respTime = new Date().toLocaleTimeString("zh-CN", { hour12: false });
+      const agentReplyLine = {
+        id: Date.now() + 5,
+        sender: "总结陈述智能体 (Gemini 2.5 Pro)",
+        avatarType: "blue",
+        content: `🤝 收到统筹人工指令！我已将您的“${userInjectedMessage.content.substring(13, 28)}...”微指令分解并广播映射至情报组、设计组和安全审查端，开始实时博弈重收敛计算。`,
+        time: respTime,
+        confidence: "全局统筹"
+      };
+      setStep2RoundtableDialogues(prev => [...prev, agentReplyLine]);
+      triggerToast("研筹团队成功接收指令！");
+    }, 1250);
+  };
+
+  return (
+    <div
+      className={cn(
+        "roundtable-planning theme-transition flex h-full min-h-0 flex-col bg-[#fef6f6] font-sans text-slate-800 selection:bg-red-200",
+        isDark && "roundtable-planning--dark",
+      )}
+    >
+      
+      {/* Toast Notice Banner */}
+      {showToast && (
+        <div className="fixed top-4 left-1/2 transform -translate-x-1/2 z-50 bg-primary text-white text-xs px-4 py-2.5 rounded-xl shadow-lg border border-primary/40 font-medium flex items-center gap-2 animate-bounce">
+          <Sparkles className="h-4 w-4 shrink-0" />
+          <span>{showToast}</span>
+        </div>
+      )}
+
+      {/* --- HEADER --- */}
+      <header className="flex shrink-0 items-center justify-between gap-4 border-b border-slate-100 bg-white px-6 py-3 shadow-[0_1px_3px_rgba(0,0,0,0.02)] dark:border-border dark:bg-card dark:shadow-none">
+        {/* Live Workflow Stepper */}
+        <div className="flex items-center gap-1.5 rounded-2xl border border-slate-200/50 bg-slate-50 p-1.5 dark:border-border dark:bg-muted">
+          {/* Step 1 */}
+          <button 
+            id="step-1-btn"
+            onClick={() => setCurrentStep(1)}
+            className={`flex items-center gap-2 px-4 py-1.5 rounded-xl text-xs font-semibold tracking-wide transition-all relative ${
+              currentStep === 1 
+                ? "bg-white text-primary shadow-sm font-bold scale-[1.02] dark:bg-background" 
+                : "text-slate-500 hover:text-slate-800 dark:text-muted-foreground dark:hover:text-foreground"
+            }`}
+          >
+            <span className={`w-5 h-5 flex items-center justify-center rounded-full text-[10px] font-bold ${
+              currentStep === 1 ? "bg-primary text-white" : "border-2 border-slate-400 text-slate-500 dark:border-muted-foreground dark:text-muted-foreground"
+            }`}>1</span>
+            <span>任务意图理解</span>
+            {currentStep === 1 && (
+              <span className="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-1 bg-primary rounded-full" />
+            )}
+          </button>
+
+          <ChevronRight className="h-3 w-3 text-slate-300 dark:text-muted-foreground" />
+
+          {/* Step 2 */}
+          <button 
+            id="step-2-btn"
+            onClick={() => setCurrentStep(2)}
+            className={`flex items-center gap-2 px-4 py-1.5 rounded-xl text-xs font-semibold tracking-wide transition-all relative ${
+              currentStep === 2 
+                ? "bg-white text-primary shadow-sm font-bold scale-[1.02] dark:bg-background" 
+                : "text-slate-500 hover:text-slate-800 dark:text-muted-foreground dark:hover:text-foreground"
+            }`}
+          >
+            <span className={`w-5 h-5 flex items-center justify-center rounded-full text-[10px] font-bold ${
+              currentStep === 2 ? "bg-primary text-white" : "border border-slate-400 text-slate-500 dark:border-muted-foreground dark:text-muted-foreground"
+            }`}>2</span>
+            <span>多智能体研讨</span>
+            {currentStep === 2 && (
+              <span className="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-1 bg-primary rounded-full" />
+            )}
+          </button>
+
+          <ChevronRight className="h-3 w-3 text-slate-300 dark:text-muted-foreground" />
+
+          {/* Step 3 */}
+          <button 
+            id="step-3-btn"
+            onClick={() => setCurrentStep(3)}
+            className={`flex items-center gap-2 px-4 py-1.5 rounded-xl text-xs font-semibold tracking-wide transition-all relative ${
+              currentStep === 3 
+                ? "bg-white text-primary shadow-sm font-bold scale-[1.02] dark:bg-background" 
+                : "text-slate-500 hover:text-slate-800 dark:text-muted-foreground dark:hover:text-foreground"
+            }`}
+          >
+            <span className={`w-5 h-5 flex items-center justify-center rounded-full text-[10px] font-bold ${
+              currentStep === 3 ? "bg-primary text-white" : "border border-slate-400 text-slate-500 dark:border-muted-foreground dark:text-muted-foreground"
+            }`}>3</span>
+            <span>方案结果展示</span>
+            {currentStep === 3 && (
+              <span className="absolute bottom-0 left-1/2 -translate-x-1/2 w-8 h-1 bg-primary rounded-full" />
+            )}
+          </button>
+        </div>
+
+        {/* Right Actions */}
+        <div className="flex items-center gap-2">
+          <button 
+            id="start-clear-btn"
+            onClick={() => {
+              setCurrentStep(1);
+              triggerToast("重启第一阶段：人机问答意图澄清");
+            }}
+            className="bg-primary text-white hover:bg-[var(--brand-900)] text-xs font-bold px-3 py-2 rounded-xl flex items-center gap-1.5 transition-all shadow-sm shadow-primary/10 active:scale-95"
+          >
+            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.5">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+            开始澄清
+          </button>
+
+          <button 
+            id="human-intervention-btn"
+            onClick={() => {
+              // Toggle Commander Role
+              setRoles(prev => 
+                prev.map(r => r.id === 1 ? { ...r, status: r.status === "在线" ? "等待激活" : "在线" } : r)
+              );
+              triggerToast("指挥专家状态变更！人工介入切换");
+            }}
+            className="bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 text-xs font-bold px-3 py-2 rounded-xl flex items-center gap-1.5 transition-all dark:border-border dark:bg-secondary dark:text-foreground dark:hover:bg-accent"
+          >
+            <Users className="w-3.5 h-3.5 text-slate-500 dark:text-muted-foreground" />
+            人工介入
+          </button>
+
+          <button 
+            id="save-draft-header-btn"
+            onClick={() => triggerToast("💾 全部工作草稿保存完毕！")}
+            className="bg-white hover:bg-slate-50 border border-[#e2e8f0] text-[#334155] text-xs font-bold px-3 py-2 rounded-xl flex items-center gap-1.5 transition dark:border-border dark:bg-secondary dark:text-foreground dark:hover:bg-accent"
+          >
+            <Save className="w-3.5 h-3.5 text-slate-500" />
+            保存草稿
+          </button>
+
+          <div className="h-6 w-[1px] bg-slate-200 mx-1" />
+
+          {/* Settings gear */}
+          <button 
+            id="settings-btn"
+            onClick={() => triggerToast("⚙️ 系统管理面板拉取中（暂不开放外部审计）")}
+            className="p-1.5 text-slate-400 hover:text-slate-600 rounded-lg hover:bg-slate-100 transition-colors dark:text-muted-foreground dark:hover:bg-accent dark:hover:text-foreground"
+          >
+            <Settings className="w-4 h-4" />
+          </button>
+        </div>
+      </header>
+
+      {/* --- MAIN CORE --- */}
+      <main className="flex-1 overflow-hidden p-4 flex gap-4 min-h-0">
+        
+        {/* ========================================================
+            LEFT COLUMN (Task Overview, Roles, Human Participation)
+           ======================================================== */}
+        <section id="left-sidebar" className="w-[280px] shrink-0 flex flex-col gap-4 overflow-y-auto pr-1">
+          
+          {currentStep === 3 ? (
+            <>
+              {/* Panel 1: 任务成果概览 (Task Outcomes Overview) */}
+              <div className="bg-white border border-slate-200/50 rounded-2xl p-4.5 shadow-[0_2px_8px_rgba(0,0,0,0.015)] transition hover:shadow-md">
+                <div className="flex items-center gap-2 border-b border-slate-100 pb-2.5 mb-2.5">
+                  <Clipboard className="w-4 h-4 text-primary" strokeWidth={2.5} />
+                  <h2 className="text-xs font-black text-slate-900 uppercase tracking-widest">任务成果概览</h2>
+                </div>
+                
+                <div className="space-y-3">
+                  <div className="space-y-2 bg-slate-50/50 border border-slate-100 p-2.5 rounded-xl text-xs font-medium text-slate-700">
+                    <div className="flex items-start justify-between gap-2.5">
+                      <span className="text-slate-400 shrink-0">任务目标</span>
+                      <span className="text-slate-900 font-bold text-right">制定可执行的详细规划方案</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-2.5 border-t border-slate-100/65 pt-2">
+                      <span className="text-slate-400">时间边界</span>
+                      <span className="text-slate-950 font-bold font-mono">72小时内完成</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-2.5 border-t border-slate-100/65 pt-2">
+                      <span className="text-slate-400 font-medium">资源上限</span>
+                      <span className="text-slate-900 font-bold">预算≤{budgetLimit}万，人数≤30人</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-2.5 border-t border-slate-100/65 pt-2">
+                      <span className="text-slate-400">讨论时间</span>
+                      <span className="text-slate-900 font-bold font-mono">00:32:18</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-2.5 border-t border-slate-100/65 pt-2">
+                      <span className="text-slate-400">总发言轮次</span>
+                      <span className="text-slate-900 font-bold">42轮 <span className="text-[10px] text-slate-400 font-normal">(有效发言数: 36)</span></span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Panel 2: 参与与结论贡献 (Participation & Consensus Contributors) */}
+              <div className="bg-white border border-slate-200/50 rounded-2xl p-4.5 shadow-[0_2px_8px_rgba(0,0,0,0.015)] flex-1 flex flex-col min-h-[300px]">
+                <div className="flex items-center gap-2 border-b border-slate-100 pb-2.5 mb-3">
+                  <Users className="w-4 h-4 text-primary" strokeWidth={2.5} />
+                  <h2 className="text-xs font-black text-slate-900 uppercase tracking-widest">参与与结论贡献</h2>
+                </div>
+
+                <div className="space-y-2 overflow-y-auto flex-1 pr-1 custom-scrollbar">
+                  {[
+                    { id: "human", name: "用户 (指挥官)", role: "人类介入协调", icon: <Man1Avatar size="h-7 w-7" /> },
+                    { id: "agent2", name: "任务理解与前置专家", role: "理解专家 (Gemini)", icon: <RobotAvatar headColor="#f5222d" size="h-7 w-7" /> },
+                    { id: "agent3", name: "极端条件信息情报专家", role: "情报情报 (Gemini)", icon: <PurpleRobotAvatar size="h-7 w-7" /> },
+                    { id: "agent4", name: "算力与热力调度专家", role: "算力评估 (Gemini)", icon: <EmeraldRobotAvatar size="h-7 w-7" /> },
+                    { id: "agent6", name: "安全合规及风控大管家", role: "安全主管 (Gemini)", icon: <AmberRobotAvatar size="h-7 w-7" /> },
+                    { id: "agent7", name: "执行序列和路径规划专家", role: "执行规划 (Gemini)", icon: <PinkRobotAvatar size="h-7 w-7" /> },
+                  ].map((contrib, idx) => (
+                    <div key={idx} className="flex items-center justify-between p-2 rounded-xl bg-slate-50 border border-slate-100 transition hover:border-emerald-100 hover:bg-emerald-50/10">
+                      <div className="flex items-center gap-2.5">
+                        {contrib.icon}
+                        <div className="flex flex-col">
+                          <span className="text-xs font-bold text-slate-800 tracking-tight leading-tight">
+                            {contrib.name}
+                          </span>
+                          <span className="text-[9px] text-primary font-semibold">
+                            {contrib.role}
+                          </span>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-1 shrink-0 text-emerald-600 bg-emerald-50 font-bold text-[9.5px] px-1.5 py-0.5 rounded-full">
+                        <Check className="h-3 w-3 text-emerald-500 font-black" />
+                        已贡献
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Panel 3: 版本记录 (Version History) */}
+              <div className="bg-white border border-slate-200/50 rounded-2xl p-4.5 shadow-[0_2px_8px_rgba(0,0,0,0.015)] shrink-0">
+                <div className="flex items-center gap-2 border-b border-slate-100 pb-2.5 mb-2.5">
+                  <Clock className="w-4 h-4 text-primary" strokeWidth={2.5} />
+                  <h2 className="text-xs font-black text-slate-900 uppercase tracking-widest">版本记录</h2>
+                </div>
+
+                <div className="space-y-2 text-xs font-medium">
+                  <div className="flex items-center justify-between p-2 rounded-xl bg-slate-50 hover:bg-slate-100/50 transition text-slate-500 cursor-pointer">
+                    <div className="flex items-center gap-2">
+                      <span className="text-[10px] bg-slate-200 text-slate-600 px-1.5 py-0.5 rounded font-mono font-bold">v0.1</span>
+                      <span>初始方案 (自动生成)</span>
+                    </div>
+                    <span className="text-[10px] font-mono text-slate-450">10:18</span>
+                  </div>
+
+                  <div className="flex items-center justify-between p-2 rounded-xl bg-slate-50 hover:bg-slate-100/50 transition text-slate-500 cursor-pointer">
+                    <div className="flex items-center gap-2">
+                      <span className="text-[10px] bg-slate-200 text-slate-600 px-1.5 py-0.5 rounded font-mono font-bold">v0.9</span>
+                      <span>多智能体研讨汇总</span>
+                    </div>
+                    <span className="text-[10px] font-mono text-slate-450">10:45</span>
+                  </div>
+
+                  <div className="flex items-center justify-between p-2 rounded-xl bg-[var(--brand-200)] border border-red-100 transition text-primary cursor-pointer">
+                    <div className="flex items-center gap-2">
+                      <span className="text-[10px] bg-primary text-white px-1.5 py-0.5 rounded font-mono font-extrabold">v1.0</span>
+                      <span className="font-extrabold text-red-950">最终方案 (当前版本)</span>
+                    </div>
+                    <span className="text-[10px] font-mono font-bold text-[var(--brand-900)]">11:01</span>
+                  </div>
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              {/* Panel 1: 任务概览 */}
+              <div className="bg-white border border-slate-200/50 rounded-2xl p-4 shadow-[0_2px_8px_rgba(0,0,0,0.01)]">
+                <div className="flex items-center gap-2 border-b border-slate-100 pb-2.5 mb-2.5">
+                  <Clipboard className="w-4 h-4 text-primary" strokeWidth={2.5} />
+                  <h2 className="text-xs font-bold text-slate-900 uppercase tracking-widest">任务概览</h2>
+                </div>
+                
+                <div className="space-y-3">
+                  <div>
+                    <span className="text-[10px] uppercase tracking-wider text-slate-400 font-bold block mb-1">
+                      当前节点
+                    </span>
+                    <div className="flex items-center justify-between gap-2.5">
+                      <span className="text-sm font-bold text-slate-800">
+                        初始任务
+                      </span>
+                      <span className={`text-[10px] font-bold px-2 py-0.5 rounded-md border shrink-0 ${
+                        currentStep === 1 
+                          ? "text-[#ff9500] bg-orange-50 border-orange-200/50" 
+                          : currentStep === 2
+                            ? "text-[var(--brand-900)] bg-[var(--brand-200)] border-red-200/50"
+                            : "text-emerald-600 bg-emerald-50 border-emerald-200/50"
+                      }`}>
+                        {currentStep === 1 ? "待澄清" : currentStep === 2 ? "研讨中" : "已规划交付"}
+                      </span>
+                    </div>
+                    <p className="text-xs text-slate-500 mt-2.5 leading-relaxed bg-slate-50 border border-slate-100 p-2 rounded-lg">
+                      围绕某复杂任务制定规划方案
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Panel 2: 参与角色 */}
+              <div className="bg-white border border-slate-200/50 rounded-2xl p-4 shadow-[0_2px_8px_rgba(0,0,0,0.01)] flex-1 flex flex-col min-h-[300px]">
+                <div className="flex items-center gap-2 border-b border-slate-100 pb-2.5 mb-3">
+                  <Users className="w-4 h-4 text-primary" strokeWidth={2.5} />
+                  <h2 className="text-xs font-bold text-slate-900 uppercase tracking-widest">参与角色</h2>
+                </div>
+
+                <div className="space-y-2.5 overflow-y-auto flex-1 pr-1 custom-scrollbar">
+                  {roles.map((role) => {
+                    const isActive = role.status === "在线" || role.status === "研讨中" || role.status === "已完成";
+                    const isOngoing = role.status === "研讨中";
+                    
+                    return (
+                      <div 
+                        id={`role-item-${role.id}`}
+                        key={role.id} 
+                        className={`flex items-center justify-between p-2 rounded-xl transition ${
+                          isActive ? "bg-slate-50 border border-slate-100" : "opacity-60"
+                        }`}
+                      >
+                        <div className="flex items-center gap-2.5">
+                          {/* Avatar chooser based on role.id */}
+                          {role.type === "human" ? (
+                            <Man1Avatar size="h-7 w-7" />
+                          ) : (
+                            role.id === 2 ? <RobotAvatar headColor="#f5222d" size="h-7 w-7" /> :
+                            role.id === 3 ? <PurpleRobotAvatar size="h-7 w-7" /> :
+                            role.id === 4 ? <EmeraldRobotAvatar size="h-7 w-7" /> :
+                            role.id === 6 ? <AmberRobotAvatar size="h-7 w-7" /> :
+                            role.id === 7 ? <PinkRobotAvatar size="h-7 w-7" /> :
+                            <BlueRobotAvatar size="h-7 w-7" />
+                          )}
+                          
+                          <div className="flex flex-col">
+                            <span className="text-xs font-bold text-slate-800 tracking-tight">
+                              {role.name}
+                            </span>
+                            {role.type === "agent" && (
+                              <span className="text-[9px] text-primary font-medium leading-none">
+                                AI 智能体
+                              </span>
+                            )}
+                          </div>
+                        </div>
+
+                        <div className="flex items-center gap-1.5 shrink-0">
+                          {isOngoing ? (
+                            <span className="flex h-1.5 w-1.5 relative">
+                              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary/60 opacity-75"></span>
+                              <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-primary"></span>
+                            </span>
+                          ) : role.status === "在线" ? (
+                            <span className="flex h-1.5 w-1.5 relative">
+                              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                              <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-emerald-500"></span>
+                            </span>
+                          ) : role.status === "已完成" ? (
+                            <Check className="h-3.5 w-3.5 text-emerald-500 font-bold" />
+                          ) : (
+                            <span className="h-1.5 w-1.5 rounded-full bg-slate-300" />
+                          )}
+
+                          <span className={`text-[10px] font-semibold ${
+                            isOngoing 
+                              ? "text-[var(--brand-900)]" 
+                              : role.status === "在线"
+                                ? "text-emerald-600 font-bold"
+                                : role.status === "已完成"
+                                  ? "text-emerald-600"
+                                  : "text-slate-400"
+                          }`}>
+                            {role.status}
+                          </span>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {/* Panel 3: 人工参与 */}
+              <div className="bg-white border border-slate-200/50 rounded-2xl p-4 shadow-[0_2px_8px_rgba(0,0,0,0.01)]">
+                <div className="flex items-center gap-2 border-b border-slate-100 pb-2.5 mb-2.5">
+                  <Activity className="w-4 h-4 text-primary" strokeWidth={2.5} />
+                  <h2 className="text-xs font-bold text-slate-900 uppercase tracking-widest">人工参与</h2>
+                </div>
+
+                <div className="flex items-center justify-between p-2 rounded-xl bg-slate-50 border border-slate-100">
+                  <div className="flex items-center gap-2.5">
+                    <Man1Avatar size="h-7 w-7" />
+                    <span className="text-xs font-bold text-slate-800">用户</span>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <span className="flex h-1.5 w-1.5 relative">
+                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                      <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-emerald-500"></span>
+                    </span>
+                    <span className="text-[10px] font-bold text-emerald-600">在线</span>
+                  </div>
+                </div>
+              </div>
+            </>
+          )}
+
+        </section>
+
+        {/* ========================================================
+            MIDDLE COLUMN (Scrollable Screen Views Based on Steps)
+           ======================================================== */}
+        <section id="middle-viewport" className="flex-1 flex flex-col min-w-0 bg-white border border-slate-200/50 rounded-2xl shadow-[0_4px_16px_rgba(0,0,0,0.015)] overflow-hidden">
+          
+          {/* STEP 1 SCREEN VIEW */}
+          {currentStep === 1 && (
+            <div className="flex-1 flex flex-col min-h-0">
+              
+              {/* Dialogue Header */}
+              <div className="shrink-0 px-6 py-4.5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
+                <div className="flex items-center gap-2">
+                  <MessageSquare className="w-4.5 h-4.5 text-primary" strokeWidth={2.5} />
+                  <h3 className="text-sm font-extrabold text-slate-900">
+                    任务意图理解 (人机问答)
+                  </h3>
+                </div>
+                <span className="text-[11px] font-bold text-slate-400 bg-white border px-2 py-0.5 rounded-md">
+                  问答轮次：3/3
+                </span>
+              </div>
+
+              {/* Chat list viewport */}
+              <div className="flex-1 overflow-y-auto p-6 space-y-4 font-normal">
+                
+                {/* Message 1 (User / 用户) */}
+                <div id="msg-item-1" className="flex items-start justify-between gap-3 border-b border-slate-50 pb-3">
+                  <div className="flex items-start gap-3">
+                    <Man1Avatar />
+                    <div className="space-y-1">
+                      <div className="flex items-baseline gap-2">
+                        <span className="text-xs font-bold text-primary">用户</span>
+                      </div>
+                      <p className="text-xs text-slate-700 leading-relaxed max-w-[500px]">
+                        请帮我围绕某复杂任务制定详细规划方案。
+                      </p>
+                    </div>
+                  </div>
+                  <span className="text-[10px] text-slate-400 font-mono shrink-0">10:32:15</span>
+                </div>
+
+                {/* Message 2 (Agent) */}
+                <div id="msg-item-2" className="flex items-start justify-between gap-3 border-b border-slate-50 pb-3">
+                  <div className="flex items-start gap-3">
+                    <RobotAvatar bg="bg-[var(--brand-200)]/50" />
+                    <div className="space-y-1">
+                      <div className="flex items-baseline gap-2">
+                        <span className="text-xs font-bold text-[var(--brand-900)]">任务理解智能体</span>
+                      </div>
+                      <p className="text-xs text-slate-700 leading-relaxed max-w-[500px] font-medium bg-primary/5 px-3 py-2 rounded-xl border border-primary/10">
+                        请明确目标、时间要求与资源限制。
+                      </p>
+                    </div>
+                  </div>
+                  <span className="text-[10px] text-slate-400 font-mono shrink-0">10:32:22</span>
+                </div>
+
+                {/* Message 3 (User / 用户) */}
+                <div id="msg-item-3" className="flex items-start justify-between gap-3 border-b border-slate-50 pb-3">
+                  <div className="flex items-start gap-3">
+                    <Man1Avatar />
+                    <div className="space-y-1">
+                      <div className="flex items-baseline gap-2">
+                        <span className="text-xs font-bold text-primary">用户</span>
+                      </div>
+                      <p className="text-xs text-slate-700 leading-relaxed max-w-[500px]">
+                        72小时内完成，可用预算500万，人员30人以内。
+                      </p>
+                    </div>
+                  </div>
+                  <span className="text-[10px] text-slate-400 font-mono shrink-0">10:33:02</span>
+                </div>
+
+                {/* Message 4 (Agent) */}
+                <div id="msg-item-4" className="flex items-start justify-between gap-3 border-b border-slate-50 pb-3">
+                  <div className="flex items-start gap-3">
+                    <RobotAvatar bg="bg-[var(--brand-200)]/50" />
+                    <div className="space-y-1">
+                      <div className="flex items-baseline gap-2">
+                        <span className="text-xs font-bold text-[var(--brand-900)]">任务理解智能体</span>
+                      </div>
+                      <p className="text-xs text-slate-700 leading-relaxed max-w-[500px] font-medium bg-primary/5 px-3 py-2 rounded-xl border border-primary/10">
+                        是否优先保证主方案可执行性，并同时给出保守备选方案？
+                      </p>
+                    </div>
+                  </div>
+                  <span className="text-[10px] text-slate-400 font-mono shrink-0">10:33:15</span>
+                </div>
+
+                {/* Message 5 (User / 用户) */}
+                <div id="msg-item-5" className="flex items-start justify-between gap-3 border-b border-slate-50 pb-3">
+                  <div className="flex items-start gap-3">
+                    <Man1Avatar />
+                    <div className="space-y-1">
+                      <div className="flex items-baseline gap-2">
+                        <span className="text-xs font-bold text-primary">用户</span>
+                      </div>
+                      <p className="text-xs text-slate-700 leading-relaxed max-w-[500px]">
+                        是，请保留主方案并给出备选方案。
+                      </p>
+                    </div>
+                  </div>
+                  <span className="text-[10px] text-slate-400 font-mono shrink-0">10:33:36</span>
+                </div>
+
+                {/* Message 6 (Agent) */}
+                <div id="msg-item-6" className="flex items-start justify-between gap-3 pb-2">
+                  <div className="flex items-start gap-3">
+                    <RobotAvatar bg="bg-[var(--brand-200)]/50" />
+                    <div className="space-y-1">
+                      <div className="flex items-baseline gap-2">
+                        <span className="text-xs font-bold text-[var(--brand-900)]">任务理解智能体</span>
+                      </div>
+                      <p className="text-xs text-slate-700 leading-relaxed max-w-[500px] font-medium bg-primary/5 px-3 py-2 rounded-xl border border-primary/10">
+                        已基本形成任务意图，请确认。
+                      </p>
+                    </div>
+                  </div>
+                  <span className="text-[10px] text-slate-400 font-mono shrink-0">10:33:52</span>
+                </div>
+
+                {/* --- GREEN INTENT BOX (1-to-1) --- */}
+                <div className="border border-emerald-200 bg-[#f0fdf4]/60 rounded-2xl p-4.5 shadow-[0_2px_12px_rgba(16,185,129,0.04)]">
+                  {/* Top row */}
+                  <div className="flex items-center justify-between gap-3 border-b border-emerald-100 pb-3 mb-3.5">
+                    <div className="flex items-center gap-2">
+                      <CheckCircle className="h-5 w-5 text-emerald-500 fill-emerald-50" strokeWidth={2.5} />
+                      <span className="text-sm font-extrabold text-slate-900">
+                        已形成明确任务意图
+                      </span>
+                    </div>
+
+                    <button
+                      id="confirm-roundtable-btn"
+                      onClick={() => {
+                        setCurrentStep(2);
+                        triggerToast("成功确认！已切换至第二阶段圆桌研讨系统");
+                      }}
+                      className="bg-primary hover:bg-[var(--brand-900)] text-white font-bold text-xs px-4 py-2 rounded-xl transition shadow-[0_2px_8px_rgba(245,34,45,0.2)] active:scale-95 shrink-0"
+                    >
+                      用户确认，进入多智能体研讨
+                    </button>
+                  </div>
+
+                  {/* Structured properties in columns */}
+                  <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
+                    <div className="space-y-0.5">
+                      <span className="text-[10px] font-bold text-slate-400 block tracking-tight">目标</span>
+                      <p className="text-xs font-bold text-slate-800 leading-tight">制定可执行的<br className="hidden md:inline" />详细规划方案</p>
+                    </div>
+                    <div className="space-y-0.5">
+                      <span className="text-[10px] font-bold text-slate-400 block tracking-tight">时间边界</span>
+                      <p className="text-xs font-bold text-slate-800 leading-tight">72小时内完成</p>
+                    </div>
+                    <div className="space-y-0.5">
+                      <span className="text-[10px] font-bold text-slate-400 block tracking-tight">资源约束</span>
+                      <p className="text-xs font-bold text-slate-800 leading-tight">预算 ≤ 500万，<br />人员 ≤ 30人</p>
+                    </div>
+                    <div className="space-y-0.5">
+                      <span className="text-[10px] font-bold text-slate-400 block tracking-tight">优先级</span>
+                      <p className="text-xs font-bold text-slate-800 leading-tight">主方案可执行性优先，<br />兼顾备选方案</p>
+                    </div>
+                    <div className="space-y-0.5 col-span-2 md:col-span-1">
+                      <span className="text-[10px] font-bold text-slate-400 block tracking-tight">待确认事项</span>
+                      <p className="text-xs font-bold text-slate-800 leading-normal">备选方案范围、<br />预算触发条件</p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* --- Q&A INTERACTION AREA (问答交互区) --- */}
+                <div className="border border-red-100 rounded-2xl bg-slate-50/20 shadow-[0_2px_12px_rgba(245,34,45,0.01)] overflow-hidden">
+                  
+                  {/* Inside header banner */}
+                  <div className="px-4 py-2.5 bg-[var(--brand-200)]/40 border-b border-red-100/50 flex items-center justify-between">
+                    <div className="flex items-center gap-1.5">
+                      <HelpCircle className="h-4 w-4 text-primary" strokeWidth={2.5} />
+                      <span className="text-xs font-extrabold text-[var(--brand-950)]">
+                        问答交互区
+                      </span>
+                    </div>
+                    <span className="text-[10px] text-slate-400 font-medium">持续沟通可有效提供细节决策</span>
+                  </div>
+
+                  {/* Content dialogue lines inside interaction */}
+                  <div className="p-4.5 space-y-3.5 max-h-[280px] overflow-y-auto">
+                    {interactiveMessages.map((msg) => (
+                      <div key={msg.id} className="flex items-start justify-between gap-3 border-b border-slate-100/50 pb-2.5 last:border-0 last:pb-0">
+                        <div className="flex items-start gap-2.5">
+                          {msg.sender === "user" ? (
+                            <Man1Avatar size="h-6 w-6" />
+                          ) : (
+                            <RobotAvatar bg="bg-[var(--brand-200)]/50" size="h-6 w-6" />
+                          )}
+                          <div>
+                            <span className={`text-[10.5px] font-bold block mb-0.5 ${msg.sender === 'user' ? 'text-primary' : 'text-slate-700'}`}>
+                              {msg.senderName}
+                            </span>
+                            <span className="text-xs text-slate-700 leading-normal font-normal">
+                              {msg.content}
+                            </span>
+                          </div>
+                        </div>
+                        <span className="text-[9px] text-slate-400 font-mono shrink-0">{msg.time}</span>
+                      </div>
+                    ))}
+                  </div>
+
+                </div>
+
+              </div>
+
+              {/* Botton Input Drawer Area (Ask/Reply Box) */}
+              <div className="shrink-0 p-4 border-t border-slate-100 bg-[#fcfcfd]">
+                
+                {/* Custom text-area with nice borders */}
+                <div className="relative border border-slate-200 focus-within:border-primary focus-within:ring-2 focus-within:ring-[var(--brand-200)]/50 transition-all rounded-xl overflow-hidden bg-white px-3 py-2.5">
+                  <textarea 
+                    id="input-text-area"
+                    value={inputText}
+                    onChange={handleInputChange}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault();
+                        handleSendMessage();
+                      }
+                    }}
+                    placeholder="请输入补充信息 / 回答问题 / 继续澄清 (Enter 快速发送)"
+                    className="w-full text-xs text-slate-700 placeholder:text-slate-400 resize-none h-[48px] focus:outline-none leading-relaxed font-normal"
+                    maxLength={500}
+                  />
+
+                  {/* Icons underneath text area inside the outline */}
+                  <div className="flex items-center justify-between border-t border-slate-50 pt-2 text-[#94a3b8]">
+                    <div className="flex items-center gap-1.5">
+                      <button 
+                        onClick={() => triggerToast("😄 表情包功能仍在微调状态（仅供演示）")}
+                        className="p-1 hover:text-primary hover:bg-slate-50 rounded transition"
+                      >
+                        <Smile className="w-4 h-4" />
+                      </button>
+                    </div>
+                    
+                    <span className="text-[10px] font-mono text-slate-400">
+                      {charactersLeft}/500
+                    </span>
+                  </div>
+                </div>
+
+                {/* Sub row action buttons */}
+                <div className="flex items-center justify-between mt-3">
+                  
+                  {/* Left row buttons */}
+                  <div className="flex items-center gap-2">
+                    <button 
+                      id="send-message-btn"
+                      onClick={handleSendMessage}
+                      className="bg-primary text-white hover:bg-[var(--brand-900)] text-xs font-bold px-4 py-2.5 rounded-xl flex items-center gap-1.5 transition-all shadow-[0_2px_8px_rgba(245,34,45,0.15)] active:scale-95"
+                    >
+                      <Send className="w-3 h-3" />
+                      发送
+                    </button>
+
+                    <button 
+                      id="suggest-followup-btn"
+                      onClick={handleAgentFollowUp}
+                      className="bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 text-xs font-bold px-3 py-2.5 rounded-xl flex items-center gap-1.5 transition"
+                    >
+                      <Repeat className="w-3 h-3 text-slate-500" />
+                      继续追问
+                    </button>
+
+                    <button 
+                      id="skip-question-btn"
+                      onClick={handleSkipQuestion}
+                      className="bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 text-xs font-bold px-3 py-2.5 rounded-xl flex items-center gap-1.5 transition"
+                    >
+                      <X className="w-3 h-3 text-slate-500" strokeWidth={2.5} />
+                      跳过此项
+                    </button>
+                  </div>
+
+                  {/* Right side buttons */}
+                  <button 
+                    id="save-draft-btn"
+                    onClick={() => triggerToast("💾 问答进度草稿已保存！")}
+                    className="bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 text-xs font-bold px-3 py-2.5 rounded-xl flex items-center gap-1.5 transition"
+                  >
+                    <Save className="w-3 h-3 text-slate-500" />
+                    保存草稿
+                  </button>
+
+                </div>
+
+              </div>
+
+            </div>
+          )}
+
+          {/* STEP 2 SCREEN VIEW: MULTI-AGENT ROUNDTABLE STUDY */}
+          {currentStep === 2 && (
+            <div className="flex-1 flex flex-col min-h-0 bg-slate-50/20">
+              
+              {/* Headline block */}
+              <div className="shrink-0 px-6 py-4.5 border-b border-slate-100 flex items-center justify-between bg-white shadow-sm">
+                <div className="flex items-center gap-2">
+                  <Cpu className="w-5 h-5 text-primary" strokeWidth={2.5} />
+                  <div>
+                    <h3 className="text-sm font-extrabold text-slate-900">
+                      多智能体圆桌会商中心
+                    </h3>
+                    <p className="text-[10px] text-slate-400 font-medium">分布式领域专家实时动态博弈与纳什协商收敛中</p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2.5">
+                  {/* Interactive speed controls */}
+                  <div className="flex items-center bg-slate-50 border border-slate-200 rounded-xl p-0.5 text-[10px] shrink-0 font-bold font-sans shadow-inner">
+                    <span className="px-2 text-slate-400 font-semibold selection:bg-transparent">研商步长</span>
+                    <button 
+                      onClick={() => { setRoundTableSpeed("慢速"); triggerToast("🐌 已切换为 0.5x 慢速拟合监听模式"); }}
+                      className={`px-1.5 py-0.5 rounded transition ${roundTableSpeed === "慢速" ? "bg-white text-primary font-extrabold shadow-sm" : "text-slate-500 hover:text-slate-800"}`}
+                    >慢速</button>
+                    <button 
+                      onClick={() => { setRoundTableSpeed("正常"); triggerToast("⏱️ 已恢复为 1.0x 标准协商状态值"); }}
+                      className={`px-1.5 py-0.5 rounded transition ${roundTableSpeed === "正常" ? "bg-white text-primary font-extrabold shadow-sm" : "text-slate-500 hover:text-slate-800"}`}
+                    >正常</button>
+                    <button 
+                      onClick={() => { setRoundTableSpeed("极速"); triggerToast("🚀 已并行为 2.5x 极速算力重算模式"); }}
+                      className={`px-1.5 py-0.5 rounded transition ${roundTableSpeed === "极速" ? "bg-white text-primary font-extrabold shadow-sm" : "text-slate-500 hover:text-slate-800"}`}
+                    >极速</button>
+                  </div>
+                  
+                  {isRoundTableRunning ? (
+                    <button 
+                      onClick={() => { setIsRoundTableRunning(false); triggerToast("⏸️ 会商模拟暂挂！智能体挂起..."); }}
+                      className="bg-amber-100 hover:bg-amber-200 text-amber-800 text-[10px] font-bold px-2.5 py-1 rounded-xl flex items-center gap-1 transition border border-amber-200/40 shadow-sm"
+                    >
+                      <Pause className="w-3.5 h-3.5" />
+                      挂起协商
+                    </button>
+                  ) : (
+                    <button 
+                      onClick={() => { setIsRoundTableRunning(true); triggerToast("▶️ 恢复大模型并行博弈与推理决策"); }}
+                      className="bg-emerald-100 hover:bg-emerald-200 text-emerald-800 text-[10px] font-bold px-2.5 py-1 rounded-xl flex items-center gap-1 transition border border-emerald-200/40 shadow-sm"
+                    >
+                      <Play className="w-3.5 h-3.5 fill-emerald-800" />
+                      恢复会商
+                    </button>
+                  )}
+                </div>
+              </div>
+
+              {/* Split layout: Roundtable visualizer and Interactive Controllers */}
+              <div className="shrink-0 px-6 py-5 bg-gradient-to-b from-[var(--brand-200)]/10 to-transparent border-b border-slate-100 bg-white">
+                <div className="grid grid-cols-1 xl:grid-cols-12 gap-8 items-center max-w-7xl mx-auto">
+                  
+                  {/* Left part: Roundtable circle diagram */}
+                  <div className="xl:col-span-5 flex flex-col items-center justify-center border-b xl:border-b-0 xl:border-r border-slate-100 pb-5 xl:pb-0 xl:pr-8">
+                    <div className="relative w-44 h-44 bg-slate-50/80 border-4 border-dashed border-slate-200 rounded-full flex items-center justify-center shadow-inner">
+                      
+                      {/* Ring animations */}
+                      <div className="absolute inset-2 border border-red-100/60 rounded-full animate-pulse" />
+                      <div className="absolute inset-6 border border-red-100/40 rounded-full" />
+                      
+                      {/* Center Core */}
+                      <div className="z-10 text-center flex flex-col items-center bg-white p-3 rounded-full shadow-md border border-slate-100 w-24 h-24 justify-center">
+                        <div className="h-7 w-7 bg-primary rounded-full flex items-center justify-center text-white font-black text-xs shadow-md shadow-primary/20 mb-0.5 animate-bounce">
+                          验
+                        </div>
+                        <span className="text-[8px] font-bold text-slate-400 leading-none">共识指数</span>
+                        <span className="text-sm font-black text-primary font-mono tracking-tight animate-pulse">{consensusPercentage}%</span>
+                      </div>
+
+                      {/* Clickable Roundtable Agent Bubbles */}
+                      {/* Role 3: 情报收集 (Top) */}
+                      <button 
+                        onClick={() => setSelectedAgentId(3)}
+                        className={`absolute -top-3.5 left-1/2 -translate-x-1/2 transition-transform duration-300 hover:scale-[1.18] active:scale-95 bg-white p-0.5 rounded-full border shadow-md cursor-pointer ${selectedAgentId === 3 || activeSpeakerId === 3 ? 'ring-4 ring-purple-400 scale-[1.12]' : 'border-slate-200'}`}
+                        title="点击配置 情报收集 智能体人设与LLM"
+                      >
+                        <PurpleRobotAvatar size="h-8.5 w-8.5" />
+                        <span className="absolute -bottom-4.5 left-1/2 -translate-x-1/2 text-[8px] bg-purple-900 text-white font-extrabold px-1 rounded whitespace-nowrap shadow-sm">情报收集</span>
+                        {(activeSpeakerId === 3 || selectedAgentId === 3) && (
+                          <span className="absolute -top-1 -right-1 flex h-2 w-2">
+                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75"></span>
+                            <span className="relative inline-flex rounded-full h-2 w-2 bg-purple-500"></span>
+                          </span>
+                        )}
+                      </button>
+
+                      {/* Role 4: 环境评估 (Top Right) */}
+                      <button 
+                        onClick={() => setSelectedAgentId(4)}
+                        className={`absolute top-5 -right-4 transition-transform duration-300 hover:scale-[1.18] active:scale-95 bg-white p-0.5 rounded-full border shadow-md cursor-pointer ${selectedAgentId === 4 || activeSpeakerId === 4 ? 'ring-4 ring-emerald-400 scale-[1.12]' : 'border-slate-200'}`}
+                        title="点击配置 环境评估 智能体人设与LLM"
+                      >
+                        <EmeraldRobotAvatar size="h-8.5 w-8.5" />
+                        <span className="absolute -bottom-4.5 left-1/2 -translate-x-1/2 text-[8px] bg-emerald-900 text-white font-extrabold px-1 rounded whitespace-nowrap shadow-sm">环境评估</span>
+                        {(activeSpeakerId === 4 || selectedAgentId === 4) && (
+                          <span className="absolute -top-1 -right-1 flex h-2 w-2">
+                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                            <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+                          </span>
+                        )}
+                      </button>
+
+                      {/* Human Participant: 方案设计 (Bottom Right) */}
+                      <button 
+                        onClick={() => setSelectedAgentId(5)}
+                        className={`absolute bottom-5 -right-4 transition-transform duration-300 hover:scale-[1.18] active:scale-95 bg-white p-0.5 rounded-full border shadow-md cursor-pointer ${selectedAgentId === 5 || activeSpeakerId === 5 ? 'ring-4 ring-primary/50 scale-[1.12]' : 'border-slate-200'}`}
+                        title="点击查看 方案设计 角色参数"
+                      >
+                        <Man1Avatar size="h-8.5 w-8.5" />
+                        <span className="absolute -bottom-4.5 left-1/2 -translate-x-1/2 text-[8px] bg-[var(--brand-950)] text-white font-extrabold px-1 rounded whitespace-nowrap shadow-sm">方案设计</span>
+                        {(activeSpeakerId === 5 || selectedAgentId === 5) && (
+                          <span className="absolute -top-1 -right-1 flex h-2 w-2">
+                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary/60 opacity-75"></span>
+                            <span className="relative inline-flex rounded-full h-2 w-2 bg-[var(--brand-200)]0"></span>
+                          </span>
+                        )}
+                      </button>
+
+                      {/* Role 6: 风险审查 (Bottom) */}
+                      <button 
+                        onClick={() => setSelectedAgentId(6)}
+                        className={`absolute -bottom-3.5 left-1/2 -translate-x-1/2 transition-transform duration-300 hover:scale-[1.18] active:scale-95 bg-white p-0.5 rounded-full border shadow-md cursor-pointer ${selectedAgentId === 6 || activeSpeakerId === 6 ? 'ring-4 ring-amber-400 scale-[1.12]' : 'border-slate-200'}`}
+                        title="点击配置 风险审查 智能体人设与LLM"
+                      >
+                        <AmberRobotAvatar size="h-8.5 w-8.5" />
+                        <span className="absolute -bottom-4.5 left-1/2 -translate-x-1/2 text-[8px] bg-amber-900 text-white font-extrabold px-1 rounded whitespace-nowrap shadow-sm">风险审查</span>
+                        {(activeSpeakerId === 6 || selectedAgentId === 6) && (
+                          <span className="absolute -top-1 -right-1 flex h-2 w-2">
+                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
+                            <span className="relative inline-flex rounded-full h-2 w-2 bg-amber-500"></span>
+                          </span>
+                        )}
+                      </button>
+
+                      {/* Role 7: 执行规划 (Bottom Left) */}
+                      <button 
+                        onClick={() => setSelectedAgentId(7)}
+                        className={`absolute bottom-5 -left-4 transition-transform duration-300 hover:scale-[1.18] active:scale-95 bg-white p-0.5 rounded-full border shadow-md cursor-pointer ${selectedAgentId === 7 || activeSpeakerId === 7 ? 'ring-4 ring-pink-400 scale-[1.12]' : 'border-slate-200'}`}
+                        title="点击配置 执行规划 智能体人设与LLM"
+                      >
+                        <PinkRobotAvatar size="h-8.5 w-8.5" />
+                        <span className="absolute -bottom-4.5 left-1/2 -translate-x-1/2 text-[8px] bg-pink-900 text-white font-extrabold px-1 rounded whitespace-nowrap shadow-sm">执行规划</span>
+                        {(activeSpeakerId === 7 || selectedAgentId === 7) && (
+                          <span className="absolute -top-1 -right-1 flex h-2 w-2">
+                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-pink-400 opacity-75"></span>
+                            <span className="relative inline-flex rounded-full h-2 w-2 bg-pink-500"></span>
+                          </span>
+                        )}
+                      </button>
+
+                      {/* Role 2: 总结陈述 (Top Left) */}
+                      <button 
+                        onClick={() => setSelectedAgentId(2)}
+                        className={`absolute top-5 -left-4 transition-transform duration-300 hover:scale-[1.18] active:scale-95 bg-white p-0.5 rounded-full border shadow-md cursor-pointer ${selectedAgentId === 2 || activeSpeakerId === 2 ? 'ring-4 ring-primary/50 scale-[1.12]' : 'border-slate-200'}`}
+                        title="点击配置 总结陈述 主持人"
+                      >
+                        <RobotAvatar bg="bg-[var(--brand-200)]" headColor="#cf1322" size="h-8.5 w-8.5" />
+                        <span className="absolute -bottom-4.5 left-1/2 -translate-x-1/2 text-[8px] bg-[var(--brand-900)] text-white font-extrabold px-1 rounded whitespace-nowrap shadow-sm">总结陈述</span>
+                        {(activeSpeakerId === 2 || selectedAgentId === 2) && (
+                          <span className="absolute -top-1 -right-1 flex h-2 w-2">
+                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary/60 opacity-75"></span>
+                            <span className="relative inline-flex rounded-full h-2 w-2 bg-[var(--brand-200)]0"></span>
+                          </span>
+                        )}
+                      </button>
+
+                    </div>
+                    <div className="mt-6 text-[10.5px] font-bold text-slate-400 flex items-center gap-1.5 selection:bg-transparent">
+                      <Sparkles className="w-3.5 h-3.5 text-primary animate-pulse" />
+                      点击上方智能体球泡，可覆写参数人设
+                    </div>
+                  </div>
+
+                  {/* Right part: Interactive Constraints Panel */}
+                  <div className="xl:col-span-7 space-y-4">
+                    <div className="bg-slate-50 border border-slate-200 rounded-2xl p-4.5 space-y-4 shadow-inner">
+                      <div className="flex items-center justify-between border-b border-slate-200 pb-2">
+                        <span className="text-xs font-black text-slate-800 flex items-center gap-1.5">
+                          <Settings className="w-4 h-4 text-primary" strokeWidth={2.5} />
+                          博弈边界约束调控台
+                        </span>
+                        <div className="flex items-center gap-1 text-[9px] bg-emerald-50 text-emerald-700 border border-emerald-100 px-2 py-0.5 rounded font-black tracking-wide">
+                          <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" />
+                          动态重算激活
+                        </div>
+                      </div>
+
+                      {/* Budget constraint slider */}
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between text-xs font-black text-slate-700">
+                          <span className="flex items-center gap-1.5">🛡️ 特别任务预算硬性指示 (万)</span>
+                          <span className="font-mono text-[var(--brand-900)] bg-white border border-red-200/85 px-2.5 py-0.5 rounded-lg text-xs font-black shadow-sm">
+                            {budgetLimit} 万元人民币
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-3 bg-white p-2.5 rounded-xl border border-slate-100">
+                          <span className="text-[10px] text-slate-400 font-extrabold font-mono">300万</span>
+                          <input 
+                            type="range" 
+                            min={300}
+                            max={600}
+                            step={10}
+                            value={budgetLimit}
+                            onChange={(e) => handleBudgetChange(parseInt(e.target.value))}
+                            className="flex-1 h-1.5 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-primary"
+                          />
+                          <span className="text-[10px] text-slate-400 font-extrabold font-mono">600万</span>
+                        </div>
+                        <p className="text-[10px] text-slate-400 leading-normal font-medium">
+                          修改该参数代表对圆桌派发最新大选资金分配。专家体检测至边界收紧，将触发博弈重校准进行经费和冗余重算。
+                        </p>
+                      </div>
+
+                      {/* State feedback indicators */}
+                      <div className="grid grid-cols-2 gap-3.5 border-t border-slate-200/50 pt-3.5 text-xs font-medium text-slate-600">
+                        <div className="bg-white px-3 py-2.5 rounded-xl border border-slate-100 flex flex-col gap-0.5 shadow-sm">
+                          <span className="text-[9px] text-slate-400 uppercase font-black">专家组决策模型</span>
+                          <span className="text-xs font-black text-slate-800 font-mono tracking-tight flex items-baseline gap-1">
+                            NAS-NASH <span className="text-[9.5px] text-emerald-600 font-black font-sans">(平衡态已收敛)</span>
+                          </span>
+                        </div>
+                        <div className="bg-white px-3 py-2.5 rounded-xl border border-slate-100 flex flex-col gap-0.5 shadow-sm">
+                          <span className="text-[9px] text-slate-400 uppercase font-black">方案最大灾备评级</span>
+                          <span className="text-xs font-black text-primary font-mono tracking-tight">
+                            {budgetLimit >= 540 ? "Tier III+ (无懈可击灾备)" : budgetLimit > 400 ? "Tier II (优秀推荐防灾)" : "Tier I (基础安全限额)"}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+
+              {/* Selected Agent Persona Config Drawer / Drawer dialog box */}
+              {selectedAgentId && (
+                <div className="mx-6 mb-4 p-4.5 bg-gradient-to-r from-[var(--brand-200)]/50 via-[var(--brand-200)]/15 to-white border-2 border-primary rounded-2xl shadow-[0_8px_30px_rgba(245,34,45,0.06)] relative animate-fade-in">
+                  <button 
+                    onClick={() => setSelectedAgentId(null)}
+                    className="absolute top-3.5 right-3.5 text-slate-400 hover:text-slate-650 hover:bg-slate-100 p-1.5 rounded-full transition cursor-pointer"
+                    title="关闭 Override"
+                  >
+                    <X className="w-4 h-4" />
+                  </button>
+                  
+                  <div className="flex flex-col lg:flex-row gap-5 text-xs text-slate-600">
+                    <div className="flex-1 space-y-3">
+                      <div className="flex items-center gap-3">
+                        {getAvatar(
+                          selectedAgentId === 2 ? "blue" :
+                          selectedAgentId === 3 ? "purple" :
+                          selectedAgentId === 4 ? "emerald" :
+                          selectedAgentId === 5 ? "human" :
+                          selectedAgentId === 6 ? "amber" :
+                          selectedAgentId === 7 ? "pink" : "blue",
+                          "h-10 w-10"
+                        )}
+                        <div>
+                          <div className="flex items-center gap-1.5">
+                            <h4 className="text-sm font-extrabold text-slate-900">
+                              {roles.find(r => r.id === selectedAgentId)?.name} 人设专有策略调制
+                            </h4>
+                            <span className="text-[9px] font-black bg-[var(--brand-200)] text-primary px-2 py-0.5 rounded-full scale-90">
+                              系统就绪
+                            </span>
+                          </div>
+                          <p className="text-[10px] text-slate-400 font-bold">
+                            配置此席位智能体的运行大语言模型及系统 System Prompt 指令
+                          </p>
+                        </div>
+                      </div>
+                      
+                      <div className="space-y-1">
+                        <label className="text-[9px] font-black text-slate-500 uppercase block tracking-wider">
+                          该席位系统提示词指令 override (System Instruction)
+                        </label>
+                        <textarea 
+                          value={agentConfigs[selectedAgentId]?.prompt || ""}
+                          onChange={(e) => {
+                            const val = e.target.value;
+                            setAgentConfigs(prev => ({
+                              ...prev,
+                              [selectedAgentId]: {
+                                ...prev[selectedAgentId],
+                                prompt: val
+                              }
+                            }));
+                          }}
+                          className="w-full text-xs text-slate-700 bg-white border border-slate-200 focus:border-primary focus:ring-1 focus:ring-[var(--brand-200)]/50 rounded-xl px-3 py-2.5 h-[65px] resize-none focus:outline-none font-medium leading-relaxed"
+                          placeholder="请输入覆盖的专家提示词内容..."
+                        />
+                      </div>
+                    </div>
+                    
+                    <div className="w-full lg:w-[260px] flex flex-col justify-between gap-3 border-t lg:border-t-0 lg:border-l border-slate-100 lg:pl-5 pt-3.5 lg:pt-0">
+                      <div className="space-y-3">
+                        <div className="space-y-1">
+                          <label className="text-[9px] font-black text-slate-500 uppercase tracking-wider block">推理本源模型</label>
+                          <select 
+                            value={agentConfigs[selectedAgentId]?.model || "Gemini 2.5 Flash"}
+                            onChange={(e) => {
+                              const val = e.target.value;
+                              setAgentConfigs(prev => ({
+                                ...prev,
+                                [selectedAgentId]: {
+                                  ...prev[selectedAgentId],
+                                  model: val
+                                }
+                              }));
+                            }}
+                            className="w-full bg-white border border-slate-200 rounded-xl px-2.5 py-1.5 text-xs text-slate-700 font-bold focus:outline-none"
+                          >
+                            <option value="Gemini 2.5 Pro">Gemini 2.5 Pro (深度分析型)</option>
+                            <option value="Gemini 2.5 Flash">Gemini 2.5 Flash (疾速自适应型)</option>
+                          </select>
+                        </div>
+                        
+                        <div className="space-y-1">
+                          <div className="flex items-center justify-between text-[9px] font-black text-slate-500">
+                            <span>随机创造性倾向 (Temp)</span>
+                            <span className="font-mono text-primary font-bold">{agentConfigs[selectedAgentId]?.temp || 0.2}</span>
+                          </div>
+                          <input 
+                            type="range"
+                            min={0.1}
+                            max={1.0}
+                            step={0.1}
+                            value={agentConfigs[selectedAgentId]?.temp || 0.2}
+                            onChange={(e) => {
+                              const val = parseFloat(e.target.value);
+                              setAgentConfigs(prev => ({
+                                ...prev,
+                                [selectedAgentId]: {
+                                  ...prev[selectedAgentId],
+                                  temp: val
+                                }
+                              }));
+                            }}
+                            className="w-full h-1 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-primary"
+                          />
+                        </div>
+                      </div>
+                      
+                      <button 
+                        onClick={() => handleSaveAgentAndRecalculate(selectedAgentId)}
+                        className="w-full bg-primary hover:bg-[var(--brand-900)] text-white text-[10.5px] font-black py-2 rounded-xl transition shadow active:scale-95 cursor-pointer flex items-center justify-center gap-1"
+                      >
+                        <Sparkles className="w-3.5 h-3.5 text-red-200" />
+                        参数覆盖并重启动算研讨
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Conversation Log inside Step 2 */}
+              <div 
+                ref={step2ScrollRef} 
+                className="flex-1 overflow-y-auto p-6 space-y-4 bg-white border-t border-slate-150 border-b border-slate-150 shadow-inner max-h-[350px] min-h-[140px]"
+              >
+                {step2RoundtableDialogues.map((msg) => (
+                  <div 
+                    key={msg.id} 
+                    className={`flex gap-4 items-start ${
+                      msg.sender === "用户 (插话干预)" ? "bg-[var(--brand-200)]/30 p-3 rounded-2xl border border-red-100/50" : ""
+                    }`}
+                  >
+                    {getAvatar(msg.avatarType, "h-9 w-9 shrink-0")}
+                    <div className="flex-1 space-y-1">
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                          <span className="text-xs font-extrabold text-slate-900">{msg.sender}</span>
+                          <span className="text-[9px] font-mono font-black uppercase text-[var(--brand-900)] bg-[var(--brand-200)] border border-red-200 px-1.5 py-0.2 rounded">
+                            {msg.confidence}
+                          </span>
+                        </div>
+                        <span className="text-[10px] text-slate-400 font-mono font-medium">{msg.time}</span>
+                      </div>
+                      <p className="text-xs text-slate-700 leading-relaxed font-medium">
+                        {msg.content}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              {/* Console control / Custom injection bar */}
+              <div className="shrink-0 p-4 bg-slate-50 border-t border-slate-100 flex items-center gap-3">
+                <input 
+                  type="text"
+                  value={customAgentInput}
+                  onChange={(e) => setCustomAgentInput(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") handleInjectToRoundtable();
+                  }}
+                  placeholder="作为指挥官，您可以随时插话输入指令，对智能体博弈朝向实施人工干预..."
+                  className="flex-1 bg-white border border-slate-200 rounded-xl px-3.5 py-2.5 text-xs focus:outline-none focus:border-primary focus:ring-1 focus:ring-[var(--brand-200)]/50 font-medium"
+                />
+                
+                <button 
+                  onClick={handleInjectToRoundtable}
+                  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" />
+
+                <button 
+                  onClick={() => {
+                    setCurrentStep(3);
+                    triggerToast("🎉 多角色智能体博弈共识达成，最终交付全套路线成果文档及方案图！");
+                  }}
+                  className="bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-black px-4 py-2.5 rounded-xl transition shrink-0 cursor-pointer flex items-center gap-1 active:scale-95 shadow-md shadow-emerald-500/10"
+                >
+                  <Sparkles className="w-3.5 h-3.5 text-emerald-250" />
+                  达成共识生成全案成果 &gt;
+                </button>
+              </div>
+
+            </div>
+          )}
+
+          {/* STEP 3 SCREEN VIEW: COMPREHENSIVE OUTPUT DASHBOARD */}
+          {currentStep === 3 && (
+            <HighFidelityReport
+              budgetLimit={budgetLimit}
+              consensusPercentage={consensusPercentage}
+              setCurrentStep={setCurrentStep}
+              setStep1MessageHistory={setInteractiveMessages}
+              setStep2RoundtableDialogues={setStep2RoundtableDialogues}
+              triggerToast={triggerToast}
+            />
+          )}
+
+        </section>
+
+        {/* ========================================================
+            RIGHT COLUMN (Current Intent Summary, Timeline/Logs)
+           ======================================================== */}
+        <section id="right-sidebar" className="w-[300px] shrink-0 flex flex-col gap-4 overflow-y-auto pl-1">
+          
+          {currentStep === 3 ? (
+            <>
+              {/* Panel 1: 最终共识结论 (Final Consensus Conclusion) */}
+              <div className="bg-white border border-slate-200/50 rounded-2xl p-4.5 shadow-[0_2px_8px_rgba(0,0,0,0.015)] transition hover:shadow-md">
+                <div className="flex items-center gap-2 border-b border-slate-100 pb-2.5 mb-3.5">
+                  <CheckCircle className="w-4 h-4 text-emerald-500" strokeWidth={2.5} />
+                  <h2 className="text-xs font-black text-slate-900 uppercase tracking-widest">最终共识结论</h2>
+                </div>
+
+                <div className="space-y-3.5 text-xs">
+                  <div className="flex justify-between items-center bg-slate-50 border border-slate-100 p-2 rounded-xl">
+                    <span className="text-slate-400 font-semibold">共识编号</span>
+                    <span className="text-slate-800 font-extrabold font-mono text-sm bg-slate-200/50 px-2 py-0.5 rounded-lg border border-slate-200">C-12</span>
+                  </div>
+
+                  <div className="flex justify-between items-center border-b border-slate-50 pb-2">
+                    <span className="text-slate-400">主方案</span>
+                    <span className="text-slate-900 font-bold">三阶段推进方案 (v1.0)</span>
+                  </div>
+
+                  <div className="flex justify-between items-center border-b border-slate-50 pb-2">
+                    <span className="text-slate-400">共识强度</span>
+                    <div className="flex items-center gap-1.5">
+                      <div className="flex text-amber-400 gap-0.5 sm:gap-1">
+                        <Star className="w-3 h-3 fill-amber-400 text-amber-500" />
+                        <Star className="w-3 h-3 fill-amber-400 text-amber-500" />
+                        <Star className="w-3 h-3 fill-amber-400 text-amber-500" />
+                        <Star className="w-3 h-3 fill-amber-400 text-amber-500" />
+                        <Star className="w-3 h-3 fill-amber-400 text-amber-500" opacity="0.65" />
+                      </div>
+                      <span className="text-[10.5px] font-black text-slate-700 font-mono">4.8 / 5</span>
+                    </div>
+                  </div>
+
+                  <div className="flex justify-between items-baseline border-b border-slate-50 pb-2">
+                    <span className="text-slate-400">综合评分</span>
+                    <div className="flex items-baseline gap-0.5">
+                      <span className="text-xl font-black text-slate-950 font-mono">90.3</span>
+                      <span className="text-[10px] text-slate-400">/ 100</span>
+                    </div>
+                  </div>
+
+                  <div className="flex justify-between items-center pt-1.5">
+                    <span className="text-slate-400">研审状态</span>
+                    <span className="text-[10px] font-black bg-emerald-550 border border-emerald-500 text-white bg-emerald-500 px-2.5 py-0.5 rounded-full shadow-sm">
+                      ● 已通过审核
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Panel 2: 风险与预算摘要 (Risks & Budget Summary) */}
+              <div className="bg-white border border-slate-200/50 rounded-2xl p-4.5 shadow-[0_2px_8px_rgba(0,0,0,0.015)] transition hover:shadow-md flex-1 flex flex-col min-h-[300px]">
+                <div className="flex items-center gap-2 border-b border-slate-100 pb-2.5 mb-3 shrink-0">
+                  <AlertTriangle className="w-4 h-4 text-amber-500" strokeWidth={2.5} />
+                  <h2 className="text-xs font-black text-slate-900 uppercase tracking-widest">风险与预算摘要</h2>
+                </div>
+
+                <div className="space-y-3 flex-1 overflow-y-auto pr-1 font-normal text-xs custom-scrollbar">
+                  {/* Risk 1 */}
+                  <div className="p-2.5 bg-slate-50 border border-slate-100 hover:border-amber-100 hover:bg-amber-50/5 rounded-xl transition">
+                    <div className="flex items-center justify-between">
+                      <span className="font-bold text-slate-800 flex items-center gap-1">
+                        🎯 需求变更风险
+                      </span>
+                      <span className="text-[9px] font-bold text-amber-700 bg-amber-50 border border-amber-100 px-1.5 py-0.2 rounded-full">中等级</span>
+                    </div>
+                    <p className="text-[10px] text-slate-400 mt-1 leading-normal">
+                      用户需求发生细节漂移，影响投产边界。
+                    </p>
+                    <div className="text-[10px] text-[var(--brand-900)] bg-[var(--brand-200)]/40 p-1.5 rounded-md mt-1.5 leading-snug">
+                      <b className="font-bold">预案:</b> 建立硬变更审核机制，保留 10% 缓冲预算。
+                    </div>
+                  </div>
+
+                  {/* Risk 2 */}
+                  <div className="p-2.5 bg-slate-50 border border-slate-100 hover:border-amber-100 hover:bg-amber-50/5 rounded-xl transition">
+                    <div className="flex items-center justify-between">
+                      <span className="font-bold text-slate-800 flex items-center gap-1">
+                        🛡️ 关键资源部署不可用
+                      </span>
+                      <span className="text-[9px] font-bold text-amber-700 bg-amber-50 border border-amber-100 px-1.5 py-0.2 rounded-full">中等级</span>
+                    </div>
+                    <p className="text-[10px] text-slate-400 mt-1 leading-normal">
+                      主微租户及物理机到货物流延迟阻断。
+                    </p>
+                    <div className="text-[10px] text-[var(--brand-900)] bg-[var(--brand-200)]/40 p-1.5 rounded-md mt-1.5 leading-snug">
+                      <b className="font-bold">预案:</b> 首选云端高可用K3s集群进行逻辑容灾代替。
+                    </div>
+                  </div>
+
+                  {/* Risk 3 */}
+                  <div className="p-2.5 bg-slate-50 border border-slate-100 hover:border-red-100 hover:bg-[var(--brand-200)]/5 rounded-xl transition">
+                    <div className="flex items-center justify-between">
+                      <span className="font-bold text-slate-800 flex items-center gap-1">
+                        💾 数据源滞缓漏泄风险
+                      </span>
+                      <span className="text-[9px] font-bold text-[var(--brand-900)] bg-[var(--brand-200)] border border-red-100 px-1.5 py-0.2 rounded-full">低等级</span>
+                    </div>
+                    <p className="text-[10px] text-slate-400 mt-1 leading-normal">
+                      信息缺失延迟导致智能研判依据缺失。
+                    </p>
+                    <div className="text-[10px] text-[var(--brand-900)] bg-[var(--brand-200)]/40 p-1.5 rounded-md mt-1.5 leading-snug">
+                      <b className="font-bold">预案:</b> 必须在 T+12 小时内完成数据核验和补充。
+                    </div>
+                  </div>
+                </div>
+
+                <div className="shrink-0 pt-2 border-t border-slate-150 mt-2 text-center">
+                  <button 
+                    onClick={() => triggerToast("🔍 正在加载全案 12 项潜在安全及风险监控数据大表单")}
+                    className="text-xs text-primary font-bold hover:underline"
+                  >
+                    查看全部 &gt;
+                  </button>
+                </div>
+              </div>
+
+              {/* Panel 3: 导出与交付 (Export and Delivery) */}
+              <div className="bg-white border border-slate-200/50 rounded-2xl p-4.5 shadow-[0_2px_8px_rgba(0,0,0,0.015)] shrink-0">
+                <div className="flex items-center gap-2 border-b border-slate-100 pb-2.5 mb-2.5">
+                  <Share2 className="w-4 h-4 text-primary" strokeWidth={2.5} />
+                  <h2 className="text-xs font-black text-slate-900 uppercase tracking-widest">导出与交付</h2>
+                </div>
+
+                <div className="grid grid-cols-2 gap-2 text-xs">
+                  <button 
+                    onClick={() => triggerToast("📎 Microsoft Word DOCX 成果大案文档生成并拉取中")}
+                    className="flex flex-col items-center justify-center p-3 rounded-xl border border-red-100 bg-[var(--brand-200)]/30 text-[var(--brand-900)] hover:bg-[var(--brand-200)] hover:border-red-200 transition cursor-pointer select-none gap-1 font-bold text-[10.5px]"
+                  >
+                    <Save className="w-4 h-4 text-[var(--brand-900)]" />
+                    导出 Word 方案文档
+                  </button>
+
+                  <button 
+                    onClick={() => triggerToast("📥 高清版 PDF 原生电子报告文档导出传输中")}
+                    className="flex flex-col items-center justify-center p-3 rounded-xl border border-red-100 bg-red-50/30 text-red-750 hover:bg-red-50 hover:border-red-200 transition cursor-pointer select-none gap-1 font-bold text-[10.5px]"
+                  >
+                    <Download className="w-4 h-4 text-red-600" />
+                    导出 PDF 方案文档
+                  </button>
+
+                  <button 
+                    onClick={() => triggerToast("📊 全套幻灯片汇报材料自动排版并生成下载中")}
+                    className="flex flex-col items-center justify-center p-3 rounded-xl border border-orange-100 bg-orange-50/30 text-orange-750 hover:bg-orange-50 hover:border-orange-200 transition cursor-pointer select-none gap-1 font-bold text-[10.5px]"
+                  >
+                    <Settings className="w-4 h-4 text-orange-600" />
+                    生成 PPT 汇报材料
+                  </button>
+
+                  <button 
+                    onClick={() => triggerToast("📰 完整 12 轮博弈及安全审查记录纪要自动导出交付中")}
+                    className="flex flex-col items-center justify-center p-3 rounded-xl border border-emerald-100 bg-emerald-50/30 text-emerald-750 hover:bg-emerald-50 hover:border-emerald-200 transition cursor-pointer select-none gap-1 font-bold text-[10.5px]"
+                  >
+                    <CheckCircle className="w-4 h-4 text-emerald-600" />
+                    导出 研讨纪要
+                  </button>
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              {/* Panel 1: 当前意图摘要 */}
+              <div className="bg-white border border-slate-200/50 rounded-2xl p-4.5 shadow-[0_2px_8px_rgba(0,0,0,0.01)]">
+                <div className="flex items-center gap-2 border-b border-slate-100 pb-2.5 mb-2.5">
+                  <svg className="w-4 h-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                    <circle cx="12" cy="12" r="10" />
+                    <circle cx="12" cy="12" r="6" />
+                    <circle cx="12" cy="12" r="2" />
+                  </svg>
+                  <h2 className="text-xs font-bold text-slate-900 uppercase tracking-widest">当前意图摘要</h2>
+                </div>
+                
+                <div className="p-3 bg-slate-50/50 border border-slate-100 rounded-xl space-y-3 mr-0.5">
+                  <ul className="text-xs text-slate-700 space-y-2.5 font-normal">
+                    <li className="flex items-baseline gap-2 leading-relaxed">
+                      <span className="text-primary text-base leading-none">•</span>
+                      <span><b className="text-slate-900 font-bold">目标</b>: 制定可执行 of 详细规划方案</span>
+                    </li>
+                    <li className="flex items-baseline gap-2 leading-relaxed">
+                      <span className="text-primary text-base leading-none">•</span>
+                      <span><b className="text-slate-900 font-bold">时间</b>: 72小时内完成</span>
+                    </li>
+                    <li className="flex items-baseline gap-2 leading-relaxed">
+                      <span className="text-primary text-base leading-none">•</span>
+                      <span><b className="text-slate-900 font-bold">资源</b>: 预算 ≤ 500万，人员 ≤ 30人</span>
+                    </li>
+                    <li className="flex items-baseline gap-2 leading-relaxed">
+                      <span className="text-primary text-base leading-none">•</span>
+                      <span><b className="text-slate-900 font-bold">优先级</b>: 主方案优先，妥善调配备用</span>
+                    </li>
+                    <li className="flex items-baseline gap-2 leading-relaxed">
+                      <span className="text-primary text-base leading-none">•</span>
+                      <span><b className="text-slate-900 font-bold">待确认</b>: 备选模块范围，资源阈值警戒</span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+
+              {/* Panel 2: 澄清记录 (Timeline View) */}
+              <div className="bg-white border border-slate-200/50 rounded-2xl p-4.5 shadow-[0_2px_8px_rgba(0,0,0,0.01)] flex-1 flex flex-col min-h-[300px]">
+                <div className="flex items-center gap-2 border-b border-slate-100 pb-2.5 mb-3 shrink-0">
+                  <Clock className="w-4 h-4 text-primary" strokeWidth={2.5} />
+                  <h2 className="text-xs font-bold text-slate-900 uppercase tracking-widest">澄清记录</h2>
+                </div>
+
+                {/* Timeline Tree Scroll Box */}
+                <div className="flex-1 overflow-y-auto pr-1 space-y-4 font-normal custom-scrollbar">
+                  <div className="relative pl-4 border-l border-red-50 space-y-4 ml-2 pt-1.5 pb-2">
+                    {timelineEntries.map((entry) => (
+                      <div key={entry.id} className="relative">
+                        {/* Ring timeline bullet point */}
+                        <div className="absolute -left-[20.5px] top-0.5 h-3 w-3 rounded-full bg-primary border-2 border-white ring-2 ring-[var(--brand-200)]" />
+                        
+                        <div className="space-y-0.5">
+                          <div className="flex items-center gap-2">
+                            <span className="text-[10px] text-slate-400 font-mono tracking-tight shrink-0">{entry.time}</span>
+                            <h4 className="text-[11.5px] font-bold text-slate-800 tracking-tight leading-none">{entry.title}</h4>
+                          </div>
+                          <p className="text-[11px] text-slate-500 leading-normal pl-0.5 mt-0.5 font-sans">
+                            {entry.desc}
+                          </p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Footer Summary Info */}
+                <div className="shrink-0 pt-2.5 border-t border-slate-100 flex items-center justify-between text-xs mt-2.5">
+                  <span className="text-slate-400 font-medium">共 {timelineEntries.length} 条记录</span>
+                  <button 
+                    onClick={() => triggerToast(`📊 正在渲染全部 ${timelineEntries.length} 个历史事件归档`)}
+                    className="text-primary hover:text-[var(--brand-900)] font-bold hover:underline"
+                  >
+                    查看全部 &gt;
+                  </button>
+                </div>
+              </div>
+            </>
+          )}
+
+        </section>
+
+      </main>
+
+    </div>
+  );
+}
diff --git a/frontend-web/src/roundtable-planning/styles/roundtable-planning.css b/frontend-web/src/roundtable-planning/styles/roundtable-planning.css
new file mode 100644
index 00000000..f48040c2
--- /dev/null
+++ b/frontend-web/src/roundtable-planning/styles/roundtable-planning.css
@@ -0,0 +1,217 @@
+@import "tailwindcss";
+
+/* 圆桌规划 — 浅色红色主题（对齐 docs/浅红色ui修改.md） */
+.roundtable-planning {
+  --rt-primary: var(--workspace-brand, #f5222d);
+  --rt-primary-hover: var(--brand-900, #cf1322);
+  --rt-primary-active: var(--brand-950, #a8071a);
+  --rt-primary-soft: var(--brand-200, #feeded);
+  --rt-page-bg: #fef6f6;
+}
+
+.roundtable-planning ::-webkit-scrollbar-thumb {
+  background: #fcb5b9;
+}
+
+.roundtable-planning ::-webkit-scrollbar-thumb:hover {
+  background: #fa9196;
+}
+
+.roundtable-planning .custom-scrollbar-inner::-webkit-scrollbar-thumb {
+  background: #fddadc;
+}
+
+/* 深色模式：跟随全局 ThemeContext（html.dark）或组件 .roundtable-planning--dark */
+.dark .roundtable-planning,
+.roundtable-planning--dark {
+  --rt-page-bg: var(--background);
+  --rt-primary: var(--primary);
+  --rt-primary-hover: var(--primary);
+  --rt-primary-soft: var(--accent);
+  color: var(--foreground);
+  background-color: var(--background);
+}
+
+.dark .roundtable-planning ::-webkit-scrollbar-thumb,
+.roundtable-planning--dark ::-webkit-scrollbar-thumb {
+  background: color-mix(in oklch, var(--primary) 45%, var(--border));
+}
+
+.dark .roundtable-planning ::-webkit-scrollbar-thumb:hover,
+.roundtable-planning--dark ::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in oklch, var(--primary) 65%, var(--border));
+}
+
+.dark .roundtable-planning .custom-scrollbar-inner::-webkit-scrollbar-thumb,
+.roundtable-planning--dark .custom-scrollbar-inner::-webkit-scrollbar-thumb {
+  background: color-mix(in oklch, var(--primary) 35%, transparent);
+}
+
+/* 页面底与浅色专用背景 */
+.dark .roundtable-planning.bg-\[\#fef6f6\],
+.roundtable-planning--dark.bg-\[\#fef6f6\] {
+  background-color: var(--background) !important;
+}
+
+/* 表面：白底卡片 → card */
+.dark .roundtable-planning .bg-white,
+.roundtable-planning--dark .bg-white {
+  background-color: var(--card) !important;
+}
+
+.dark .roundtable-planning .bg-slate-50,
+.dark .roundtable-planning .bg-slate-50\/20,
+.dark .roundtable-planning .bg-slate-50\/30,
+.roundtable-planning--dark .bg-slate-50,
+.roundtable-planning--dark .bg-slate-50\/20,
+.roundtable-planning--dark .bg-slate-50\/30 {
+  background-color: color-mix(in oklch, var(--muted) 80%, transparent) !important;
+}
+
+.dark .roundtable-planning .from-slate-50,
+.roundtable-planning--dark .from-slate-50 {
+  --tw-gradient-from: var(--muted) !important;
+}
+
+.dark .roundtable-planning .to-white,
+.roundtable-planning--dark .to-white {
+  --tw-gradient-to: var(--card) !important;
+}
+
+/* 品牌浅红底 → accent */
+.dark .roundtable-planning [class*="brand-200"],
+.roundtable-planning--dark [class*="brand-200"] {
+  background-color: color-mix(in oklch, var(--accent) 55%, transparent) !important;
+}
+
+.dark .roundtable-planning .border-red-100,
+.dark .roundtable-planning .border-red-100\/50,
+.dark .roundtable-planning .border-red-200,
+.dark .roundtable-planning .border-red-200\/50,
+.dark .roundtable-planning .border-red-200\/85,
+.roundtable-planning--dark .border-red-100,
+.roundtable-planning--dark .border-red-100\/50,
+.roundtable-planning--dark .border-red-200,
+.roundtable-planning--dark .border-red-200\/50,
+.roundtable-planning--dark .border-red-200\/85 {
+  border-color: var(--border) !important;
+}
+
+.dark .roundtable-planning .border-slate-100,
+.dark .roundtable-planning .border-slate-200,
+.dark .roundtable-planning .border-slate-200\/50,
+.dark .roundtable-planning .border-\[\#e2e8f0\],
+.roundtable-planning--dark .border-slate-100,
+.roundtable-planning--dark .border-slate-200,
+.roundtable-planning--dark .border-slate-200\/50,
+.roundtable-planning--dark .border-\[\#e2e8f0\] {
+  border-color: var(--border) !important;
+}
+
+/* 文字 */
+.dark .roundtable-planning .text-slate-900,
+.dark .roundtable-planning .text-slate-800,
+.dark .roundtable-planning .text-slate-700,
+.dark .roundtable-planning .text-\[\#334155\],
+.roundtable-planning--dark .text-slate-900,
+.roundtable-planning--dark .text-slate-800,
+.roundtable-planning--dark .text-slate-700,
+.roundtable-planning--dark .text-\[\#334155\] {
+  color: var(--foreground) !important;
+}
+
+.dark .roundtable-planning .text-slate-600,
+.dark .roundtable-planning .text-slate-500,
+.dark .roundtable-planning .text-slate-400,
+.roundtable-planning--dark .text-slate-600,
+.roundtable-planning--dark .text-slate-500,
+.roundtable-planning--dark .text-slate-400 {
+  color: var(--muted-foreground) !important;
+}
+
+.dark .roundtable-planning .hover\:text-slate-800:hover,
+.roundtable-planning--dark .hover\:text-slate-800:hover {
+  color: var(--foreground) !important;
+}
+
+.dark .roundtable-planning .hover\:bg-slate-50:hover,
+.roundtable-planning--dark .hover\:bg-slate-50:hover {
+  background-color: var(--accent) !important;
+}
+
+/* 顶栏 */
+.dark .roundtable-planning > header,
+.roundtable-planning--dark > header {
+  background-color: var(--card) !important;
+  border-color: var(--border) !important;
+  box-shadow: none !important;
+}
+
+/* 步骤条容器 */
+.dark .roundtable-planning header .rounded-2xl.border,
+.roundtable-planning--dark header .rounded-2xl.border {
+  background-color: var(--muted) !important;
+  border-color: var(--border) !important;
+}
+
+/* 次要按钮（白底） */
+.dark .roundtable-planning header button.bg-white,
+.roundtable-planning--dark header button.bg-white {
+  background-color: var(--secondary) !important;
+  color: var(--foreground) !important;
+}
+
+/* 输入区 focus ring */
+.dark .roundtable-planning .focus-within\:ring-\[var\(--brand-200\)\]\/50:focus-within,
+.roundtable-planning--dark .focus-within\:ring-\[var\(--brand-200\)\]\/50:focus-within {
+  --tw-ring-color: color-mix(in oklch, var(--primary) 25%, transparent) !important;
+}
+
+/* 渐变横幅 */
+.dark .roundtable-planning .from-\[var\(--brand-200\)\],
+.roundtable-planning--dark .from-\[var\(--brand-200\)\] {
+  --tw-gradient-from: color-mix(in oklch, var(--accent) 40%, transparent) !important;
+}
+
+.dark .roundtable-planning .border-primary,
+.roundtable-planning--dark .border-2.border-primary {
+  border-color: color-mix(in oklch, var(--primary) 50%, var(--border)) !important;
+}
+
+/* 分隔线 */
+.dark .roundtable-planning .bg-slate-200,
+.roundtable-planning--dark .bg-slate-200 {
+  background-color: var(--border) !important;
+}
+
+/* Custom elegant scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #e2e8f0;
+}
+
+.custom-scrollbar-inner::-webkit-scrollbar-thumb {
+  background: #fddadc;
+}
+
+.dark .custom-scrollbar-inner::-webkit-scrollbar-thumb,
+.roundtable-planning--dark .custom-scrollbar-inner::-webkit-scrollbar-thumb {
+  background: color-mix(in oklch, var(--primary) 35%, var(--border));
+}