Enhance PlanningAgent with Markdown rendering and Tailwind Typography

src/App.tsx

@@ -4,10 +4,14 @@ import PlanningAgent from "./pages/PlanningAgent";
 import DevOpsAgent from "./pages/DevOpsAgent";
 import QualityGate from "./pages/QualityGate";
 
+import Home from "./pages/Home";
+
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
+        <Route path="/" element={<Home />} />
+        <Route path="/home" element={<Home />} />
         <Route path="/planning" element={<PlanningAgent />} />
         <Route path="/devops" element={<DevOpsAgent />} />
         <Route path="/quality" element={<Navigate to="/quality/dashboard" replace />} />

src/Layout.tsx

@@ -1,158 +1,123 @@
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import { NavLink, Outlet, useLocation } from "react-router-dom";
 
-const QUALITY_SUB_ITEMS = [
-  { to: "/quality/dashboard", title: "Overview" },
-  { to: "/quality/pr-list", title: "PR List" },
-  { to: "/quality/settings", title: "Settings" },
-] as const;
-
 const PAGE_TITLES: Record<string, string> = {
-  "/planning": "Strategic Planning Workspace",
-  "/devops": "Delivery Execution Workspace",
-  "/quality/dashboard": "Quality Gate Overview",
-  "/quality/pr-list": "Quality Gate · PR List",
-  "/quality/settings": "Quality Gate · Settings",
+  "/": "总览控制台",
+  "/planning": "战略规划 (Planning)",
+  "/devops": "开发运维 (DevOps)",
+  "/quality": "质量门控 (Quality Gate Dashboard)",
+  "/quality/dashboard": "质量门控 (Quality Gate Dashboard)",
+  "/quality/pr-list": "合并请求审查 (PR List)",
+  "/quality/settings": "质量设置",
 };
 
 export default function Layout() {
   const { pathname } = useLocation();
-  const inQuality = pathname.startsWith("/quality");
-  const [qualityExpanded, setQualityExpanded] = useState<boolean>(inQuality);
-
-  useEffect(() => {
-    if (inQuality) {
-      setQualityExpanded(true);
-    }
-  }, [inQuality]);
 
   const pageTitle = useMemo(() => {
-    if (PAGE_TITLES[pathname]) {
-      return PAGE_TITLES[pathname];
-    }
-    if (inQuality) {
-      return "Quality Gate";
-    }
-    return "SAFe OS";
-  }, [pathname, inQuality]);
+    return PAGE_TITLES[pathname] || "SAFe OS";
+  }, [pathname]);
 
   return (
-    <div className="flex h-screen w-screen bg-[#fafafa]">
-      {/* ─── Sidebar ─── */}
-      <nav className="w-[280px] shrink-0 bg-surface-dark text-txt-inverse flex flex-col py-8 border-r border-white/10">
-        <div className="px-8 mb-9 text-2xl font-extrabold tracking-tight select-none">
-          SAFe <span className="text-magenta">OS</span>
+    <div className="bg-gray-50 flex h-screen w-screen overflow-hidden text-gray-800 font-sans">
+      {/* 侧边栏导航 */}
+      <aside className="w-64 bg-white shadow-md flex flex-col z-10 shrink-0">
+        <div className="h-16 flex items-center px-6 border-b border-gray-100">
+          <i className="fa-solid fa-layer-group text-[#2563EB] text-2xl mr-3"></i>
+          <span className="text-xl font-bold text-gray-800">SAFe OS</span>
+        </div>
+        
+        <div className="p-4 flex-1">
+          <div className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">主导模块</div>
+          <nav className="space-y-2">
+            <NavLink
+              to="/"
+              className={({ isActive }) =>
+                `flex items-center px-4 py-3 rounded-lg font-medium transition-colors ${
+                  isActive && pathname === '/'
+                    ? "bg-blue-50 text-[#2563EB]"
+                    : "text-gray-600 hover:bg-gray-50 hover:text-[#2563EB]"
+                }`
+              }
+            >
+              <i className="fa-solid fa-house w-6"></i> 总览控制台
+            </NavLink>
+            <NavLink
+              to="/planning"
+              className={({ isActive }) =>
+                `flex items-center px-4 py-3 rounded-lg font-medium transition-colors ${
+                  isActive
+                    ? "bg-blue-50 text-[#0EA5E9]"
+                    : "text-gray-600 hover:bg-gray-50 hover:text-[#0EA5E9]"
+                }`
+              }
+            >
+              <i className="fa-solid fa-chess-knight w-6"></i> 战略规划 (Planning)
+            </NavLink>
+            <NavLink
+              to="/devops"
+              className={({ isActive }) =>
+                `flex items-center px-4 py-3 rounded-lg font-medium transition-colors ${
+                  isActive
+                    ? "bg-green-50 text-[#10B981]"
+                    : "text-gray-600 hover:bg-gray-50 hover:text-[#10B981]"
+                }`
+              }
+            >
+              <i className="fa-solid fa-code-branch w-6"></i> 开发运维 (DevOps)
+            </NavLink>
+            <NavLink
+              to="/quality/dashboard"
+              className={({ isActive }) =>
+                `flex items-center px-4 py-3 rounded-lg font-medium transition-colors ${
+                  pathname.startsWith('/quality')
+                    ? "bg-purple-50 text-[#8B5CF6]"
+                    : "text-gray-600 hover:bg-gray-50 hover:text-[#8B5CF6]"
+                }`
+              }
+            >
+              <i className="fa-solid fa-shield-halved w-6"></i> 质量门控 (Quality Gate)
+            </NavLink>
+          </nav>
+
+          <div className="text-xs font-semibold text-gray-400 uppercase tracking-wider mt-8 mb-4">设置与支持</div>
+          <nav className="space-y-2">
+            <a href="#" className="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors">
+              <i className="fa-solid fa-gear w-6"></i> 平台设置
+            </a>
+          </nav>
         </div>
 
-        <div className="px-8 text-[11px] text-gray-500 uppercase font-bold tracking-widest mb-4">
-          Agent Pipeline
+        <div className="p-4 border-t border-gray-100 flex items-center">
+          <img src="https://ui-avatars.com/api/?name=Admin&background=F3F4F6&color=374151" alt="User" className="w-10 h-10 rounded-full mr-3" />
+          <div>
+            <p className="text-sm font-semibold">项目管理员</p>
+            <p className="text-xs text-gray-500">在线</p>
+          </div>
         </div>
+      </aside>
 
-        <NavLink
-          to="/planning"
-          className={({ isActive }) =>
-            `mx-4 rounded-xl flex items-center gap-3 px-4 py-3 border border-transparent transition-all cursor-pointer ${
-              isActive
-                ? "border-magenta/40 bg-white/10"
-                : "hover:bg-white/5"
-            }`
-          }
-        >
-          {({ isActive }) => (
-            <>
-              <span
-                className={`w-2 h-2 rounded-full shrink-0 ${
-                  isActive ? "bg-magenta" : "bg-gray-600"
-                }`}
-              />
-              <div>
-                <div className="font-bold text-[0.95rem]">1. Planning Council Agent</div>
-                <div className="text-xs text-gray-400">Business and architecture planning</div>
+      {/* 主内容区 */}
+      <main className="flex-1 flex flex-col h-screen overflow-y-auto relative min-w-0">
+        {/* 顶部导航 */}
+        <header className="h-16 bg-white shadow-sm flex items-center justify-between px-8 z-0 shrink-0">
+          <h1 className="text-xl font-semibold text-gray-800">{pageTitle}</h1>
+          {pathname === '/' && (
+            <div className="flex items-center space-x-4">
+              <div className="relative">
+                <i className="fa-solid fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
+                <input type="text" placeholder="全局搜索需求、代码或 PR..." className="pl-10 pr-4 py-2 border border-gray-200 rounded-full text-sm focus:outline-none focus:border-[#2563EB] focus:ring-1 focus:ring-[#2563EB] w-64 transition-all" />
               </div>
-            </>
-          )}
-        </NavLink>
-
-        <NavLink
-          to="/devops"
-          className={({ isActive }) =>
-            `mx-4 rounded-xl flex items-center gap-3 px-4 py-3 border border-transparent transition-all cursor-pointer ${
-              isActive
-                ? "border-magenta/40 bg-white/10"
-                : "hover:bg-white/5"
-            }`
-          }
-        >
-          {({ isActive }) => (
-            <>
-              <span
-                className={`w-2 h-2 rounded-full shrink-0 ${
-                  isActive ? "bg-magenta" : "bg-gray-600"
-                }`}
-              />
-              <div>
-                <div className="font-bold text-[0.95rem]">2. DevOps Agent</div>
-                <div className="text-xs text-gray-400">Story breakdown and implementation</div>
-              </div>
-            </>
-          )}
-        </NavLink>
-
-        <div className="mx-4 rounded-xl border border-transparent">
-          <button
-            type="button"
-            onClick={() => setQualityExpanded((v) => !v)}
-            className={`w-full rounded-xl flex items-center gap-3 px-4 py-3 transition-all text-left ${
-              inQuality ? "bg-white/10 border border-magenta/40" : "hover:bg-white/5"
-            }`}
-          >
-            <span
-              className={`w-2 h-2 rounded-full shrink-0 ${
-                inQuality ? "bg-magenta" : "bg-gray-600"
-              }`}
-            />
-            <div className="min-w-0 flex-1">
-              <div className="font-bold text-[0.95rem]">3. Quality Gate Agent</div>
-              <div className="text-xs text-gray-400">Automated validation and review</div>
-            </div>
-            <span className={`text-xs text-gray-400 transition-transform ${qualityExpanded ? "rotate-90" : ""}`}>
-              ▶
-            </span>
-          </button>
-
-          {qualityExpanded && (
-            <div className="pl-10 pr-3 pb-3 pt-1 flex flex-col gap-1">
-              {QUALITY_SUB_ITEMS.map((sub) => (
-                <NavLink
-                  key={sub.to}
-                  to={sub.to}
-                  className={({ isActive }) =>
-                    `text-xs font-bold px-3 py-2 rounded-lg transition-colors ${
-                      isActive
-                        ? "text-magenta bg-white/10"
-                        : "text-gray-400 hover:text-white hover:bg-white/5"
-                    }`
-                  }
-                >
-                  {sub.title}
-                </NavLink>
-              ))}
+              <button className="relative p-2 text-gray-500 hover:text-[#2563EB] transition-colors">
+                <i className="fa-regular fa-bell text-xl"></i>
+                <span className="absolute top-1 right-1 w-2.5 h-2.5 bg-red-500 rounded-full border-2 border-white"></span>
+              </button>
             </div>
           )}
-        </div>
-
-        <div className="mt-auto px-8 text-[0.7rem] text-gray-600">
-          T-Systems · SAFe Multi-Agent Demo UI
-        </div>
-      </nav>
-
-      {/* ─── Main workspace ─── */}
-      <main className="flex-1 flex flex-col bg-white min-w-0">
-        <header className="h-20 px-10 flex items-center justify-between border-b border-border/80 bg-white/90 backdrop-blur shrink-0">
-          <h1 className="text-2xl font-extrabold tracking-tight">{pageTitle}</h1>
         </header>
 
-        <div className="flex-1 overflow-hidden">
+        {/* 内容画布 */}
+        <div className="flex-1 w-full bg-gray-50 overflow-y-auto">
           <Outlet />
         </div>
       </main>

src/pages/Home.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export default function Home() {
+  return (
+    <div className="p-8 max-w-7xl mx-auto w-full">
+      {/* 欢迎与 AI 提示 */}
+      <div className="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-2xl p-8 text-white mb-8 shadow-lg flex justify-between items-center">
+        <div>
+          <h2 className="text-3xl font-bold mb-2">欢迎回来, SAFe OS 团队 👋</h2>
+          <p className="text-blue-100 mb-4 text-lg">AI Agent 已经准备就绪，今天想从哪个环节开始推进项目？</p>
+          <div className="flex items-center text-sm bg-black/20 inline-block px-4 py-2 rounded-lg backdrop-blur-sm">
+            <i className="fa-solid fa-robot mr-2 text-blue-300"></i> AI 状态: <span className="text-green-300 ml-1 font-semibold">✓ 运行中 (随时可唤醒)</span>
+          </div>
+        </div>
+        <div className="hidden md:block text-right">
+          <div className="text-5xl font-bold opacity-20"><i className="fa-brands fa-hubspot"></i></div>
+        </div>
+      </div>
+
+      {/* 数据概览精要 */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+        <div className="bg-white p-5 rounded-xl text-center border border-gray-100 shadow-sm">
+          <p className="text-sm text-gray-500 mb-1">规划中需求</p>
+          <p className="text-2xl font-bold text-gray-800">24 <span className="text-xs text-green-500 font-normal"><i className="fa-solid fa-arrow-up"></i> 3</span></p>
+        </div>
+        <div className="bg-white p-5 rounded-xl text-center border border-gray-100 shadow-sm">
+          <p className="text-sm text-gray-500 mb-1">待合入代码 (PRs)</p>
+          <p className="text-2xl font-bold text-gray-800">12 <span className="text-xs text-red-500 font-normal"><i className="fa-solid fa-arrow-down"></i> 2</span></p>
+        </div>
+        <div className="bg-white p-5 rounded-xl text-center border border-gray-100 shadow-sm">
+          <p className="text-sm text-gray-500 mb-1">质量健康度</p>
+          <p className="text-2xl font-bold text-gray-800 focus-text">92% <span className="text-xs text-green-500 font-normal">优秀</span></p>
+        </div>
+      </div>
+
+      {/* 三大核心模块入口卡片 */}
+      <h3 className="text-lg font-bold text-gray-800 mb-4">核心工作流入口</h3>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+        
+        {/* 模块 1: 战略规划 (Planning) */}
+        <div className="module-card bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm relative group flex flex-col hover:-translate-y-1 hover:shadow-xl transition-all duration-300">
+          <div className="h-2 bg-[#0EA5E9]"></div>
+          <div className="p-6 flex-1">
+            <div className="w-12 h-12 bg-blue-50 text-[#0EA5E9] rounded-xl flex items-center justify-center text-2xl mb-4 group-hover:bg-[#0EA5E9] group-hover:text-white transition-colors">
+              <i className="fa-solid fa-chess-knight"></i>
+            </div>
+            <h4 className="text-xl font-bold text-gray-800 mb-2">战略规划</h4>
+            <p className="text-gray-500 mb-4 text-sm min-h-[60px]">一站式需求管理与分析。利用自然语言或文档，AI帮助您生成验收标准、拆解任务和预测边界情况。</p>
+            
+            <div className="space-y-3 mb-6">
+              <div className="flex items-center text-sm text-gray-600 bg-gray-50 p-2 rounded">
+                <i className="fa-solid fa-check text-[#0EA5E9] mr-2 w-4"></i> 智能需求分析与拆解
+              </div>
+              <div className="flex items-center text-sm text-gray-600 bg-gray-50 p-2 rounded">
+                <i className="fa-solid fa-check text-[#0EA5E9] mr-2 w-4"></i> 上下文动态问题对话
+              </div>
+            </div>
+          </div>
+          <div className="px-6 py-4 bg-gray-50 border-t border-gray-100">
+            <Link to="/planning" className="block text-center w-full py-2 bg-white border border-gray-200 text-[#0EA5E9] font-semibold rounded-lg hover:border-[#0EA5E9] hover:bg-blue-50 transition-colors">
+              进入规划看板 &rarr;
+            </Link>
+          </div>
+        </div>
+
+        {/* 模块 2: 开发运维 (DevOps) */}
+        <div className="module-card bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm relative group flex flex-col hover:-translate-y-1 hover:shadow-xl transition-all duration-300">
+          <div className="h-2 bg-[#10B981]"></div>
+          <div className="p-6 flex-1">
+            <div className="w-12 h-12 bg-green-50 text-[#10B981] rounded-xl flex items-center justify-center text-2xl mb-4 group-hover:bg-[#10B981] group-hover:text-white transition-colors">
+              <i className="fa-solid fa-code-branch"></i>
+            </div>
+            <h4 className="text-xl font-bold text-gray-800 mb-2">开发运维</h4>
+            <p className="text-gray-500 mb-4 text-sm min-h-[60px]">智能研发辅助流水线。输入功能点描述即可生成规范的代码框架和单元测试代码，一键直达测试验证。</p>
+            
+            <div className="space-y-3 mb-6">
+              <div className="flex items-center text-sm text-gray-600 bg-gray-50 p-2 rounded">
+                <i className="fa-solid fa-check text-[#10B981] mr-2 w-4"></i> AI 代码框架生成
+              </div>
+              <div className="flex items-center text-sm text-gray-600 bg-gray-50 p-2 rounded">
+                <i className="fa-solid fa-check text-[#10B981] mr-2 w-4"></i> 自动化测试与建议
+              </div>
+            </div>
+          </div>
+          <div className="px-6 py-4 bg-gray-50 border-t border-gray-100">
+            <Link to="/devops" className="block text-center w-full py-2 bg-white border border-gray-200 text-[#10B981] font-semibold rounded-lg hover:border-[#10B981] hover:bg-green-50 transition-colors">
+              开启开发流水线 &rarr;
+            </Link>
+          </div>
+        </div>
+
+        {/* 模块 3: 质量门控 (Quality Gate) */}
+        <div className="module-card bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm relative group flex flex-col hover:-translate-y-1 hover:shadow-xl transition-all duration-300">
+          <div className="h-2 bg-[#8B5CF6]"></div>
+          <div className="p-6 flex-1">
+            <div className="w-12 h-12 bg-purple-50 text-[#8B5CF6] rounded-xl flex items-center justify-center text-2xl mb-4 group-hover:bg-[#8B5CF6] group-hover:text-white transition-colors">
+              <i className="fa-solid fa-shield-halved"></i>
+            </div>
+            <h4 className="text-xl font-bold text-gray-800 mb-2">质量门控</h4>
+            <p className="text-gray-500 mb-4 text-sm min-h-[60px]">项目质量的守护神。提供可视化的Dashboard概览，智能审查 PR 修改，拦截代码漏洞与规范问题。</p>
+            
+            <div className="space-y-3 mb-6">
+              <div className="flex items-center text-sm text-gray-600 bg-gray-50 p-2 rounded">
+                <i className="fa-solid fa-check text-[#8B5CF6] mr-2 w-4"></i> PR 级智能安全扫描
+              </div>
+              <div className="flex items-center text-sm text-gray-600 bg-gray-50 p-2 rounded">
+                <i className="fa-solid fa-check text-[#8B5CF6] mr-2 w-4"></i> 对话式漏洞修复建议
+              </div>
+            </div>
+          </div>
+          <div className="px-6 py-4 bg-gray-50 border-t border-gray-100">
+            <Link to="/quality" className="block text-center w-full py-2 bg-white border border-gray-200 text-[#8B5CF6] font-semibold rounded-lg hover:border-[#8B5CF6] hover:bg-purple-50 transition-colors">
+              查看质量大盘 &rarr;
+            </Link>
+          </div>
+        </div>
+
+      </div>
+
+      {/* 全局悬浮 AI Agent 助手入口（占位） */}
+      <div className="fixed bottom-10 right-10 flex flex-col items-end z-50">
+        <div className="bg-white px-4 py-3 rounded-2xl shadow-lg border border-gray-100 mb-4 relative animate-fade-in-up">
+          <p className="text-sm text-gray-600">需要我帮您新建一个“提测需求”还是“审查PR”呢？</p>
+          <div className="absolute -bottom-2 right-6 w-4 h-4 bg-white border-b border-r border-gray-100 transform rotate-45"></div>
+        </div>
+        <button className="w-16 h-16 bg-[#2563EB] text-white rounded-full shadow-2xl flex items-center justify-center text-3xl hover:bg-blue-700 transition-colors ai-pulse">
+          <i className="fa-brands fa-hubspot"></i>
+        </button>
+      </div>
+
+    </div>
+  );
+}

src/pages/PlanningAgent.tsx

@@ -1,4 +1,7 @@
 import { useCallback, useEffect, useReducer, useRef, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
 import { API } from "../config";
 
 /* ─── Types ─── */
@@ -294,7 +297,18 @@ export default function PlanningAgent() {
                 {msg.role === "assistant" && (
                   <span className="badge mb-3 block w-fit">SYSTEM / RE-ACT LOOP</span>
                 )}
-                {msg.content || "Thinking..."}
+                {msg.role === "assistant" ? (
+                  <div className="prose prose-sm max-w-none prose-p:my-1 prose-pre:bg-gray-800 prose-pre:text-gray-100 prose-code:text-magenta prose-code:bg-magenta/10 prose-code:px-1 prose-code:rounded prose-li:my-0">
+                    <ReactMarkdown
+                      remarkPlugins={[remarkGfm]}
+                      rehypePlugins={[rehypeRaw]}
+                    >
+                      {msg.content || "Thinking..."}
+                    </ReactMarkdown>
+                  </div>
+                ) : (
+                  msg.content || "Thinking..."
+                )}
                 {msg.status === "failed" && (
                   <span className="text-red-500 text-xs block mt-2">Failed to send</span>
                 )}