From 6c20eb24d0f44e618b2cc60f82892ddbfa19e9e5 Mon Sep 17 00:00:00 2001
From: Xin Wang <your-email@example.com>
Date: Sun, 7 Jun 2026 08:25:05 +0800
Subject: [PATCH] Add monitor section placeholders for history and dashboard
 pages.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wire dashboard navigation in AppShell and fix the 监控观察 sidebar group highlight so it activates for history and dashboard routes.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/layout/AppShell.tsx     |  3 ++
 src/components/layout/Sidebar.tsx      | 54 +++++++++++++++++++++++++-
 src/components/pages/DashboardPage.tsx | 11 ++++++
 3 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 src/components/pages/DashboardPage.tsx

diff --git a/src/components/layout/AppShell.tsx b/src/components/layout/AppShell.tsx
index eab14dc..368872f 100644
--- a/src/components/layout/AppShell.tsx
+++ b/src/components/layout/AppShell.tsx
@@ -10,6 +10,7 @@ import { ComponentsModelsPage } from "@/components/pages/ComponentsModelsPage";
 import { ComponentsKnowledgePage } from "@/components/pages/ComponentsKnowledgePage";
 import { ComponentsToolsPage } from "@/components/pages/ComponentsToolsPage";
 import { HistoryPage } from "@/components/pages/HistoryPage";
+import { DashboardPage } from "@/components/pages/DashboardPage";
 import { TestPage } from "@/components/pages/TestPage";
 import { WorkflowPage } from "@/components/pages/WorkflowPage";
 import { ProfilePage } from "@/components/pages/ProfilePage";
@@ -21,6 +22,7 @@ export type NavKey =
   | "components-knowledge"
   | "components-tools"
   | "history"
+  | "dashboard"
   | "test"
   | "workflow"
   | "profile";
@@ -49,6 +51,7 @@ export function AppShell() {
           {active === "components-knowledge" && <ComponentsKnowledgePage />}
           {active === "components-tools" && <ComponentsToolsPage />}
           {active === "history" && <HistoryPage />}
+          {active === "dashboard" && <DashboardPage />}
           {active === "test" && <TestPage />}
           {active === "workflow" && <WorkflowPage />}
           {active === "profile" && <ProfilePage />}
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index d3d0434..d09b172 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -29,7 +29,6 @@ const mainItems: Array<{
   icon: React.ComponentType<{ size?: number }>;
 }> = [
   { key: "home", label: "控制台", icon: Home },
-  { key: "history", label: "历史记录", icon: Clock3 },
   { key: "test", label: "测试助手", icon: PlayCircle },
 ];
 
@@ -43,6 +42,15 @@ const componentSubItems: Array<{
   { key: "components-tools", label: "工具资源", icon: Wrench },
 ];
 
+const monitorSubItems: Array<{
+  key: NavKey;
+  label: string;
+  icon: React.ComponentType<{ size?: number }>;
+}> = [
+  { key: "history", label: "历史记录", icon: Clock3 },
+  { key: "dashboard", label: "数据看板", icon: Database },
+];
+
 export function Sidebar({
   active,
   collapsed,
@@ -54,6 +62,8 @@ export function Sidebar({
   const componentActive =
     active === "components-models" || active === "components-knowledge" || active === "components-tools";
 
+  const monitorActive = monitorSubItems.some((item) => item.key === active);
+
   return (
     <aside
       className={[
@@ -146,6 +156,47 @@ export function Sidebar({
             </div>
           </div>
 
+
+          <div className="pt-2">
+          {collapsed ? (
+              <div
+                className="flex h-8 items-center justify-center"
+                aria-hidden="true"
+                title="监控观察"
+              >
+                <span className="h-px w-6 rounded-full bg-hairline-strong" />
+              </div>
+            ) : (
+              <div
+                className={[
+                  "flex h-11 w-full items-center gap-3 rounded-full px-3 text-sm",
+                  monitorActive ? "text-foreground" : "text-muted-foreground",
+                ].join(" ")}
+              >
+                <Boxes size={18} />
+                <span className="font-medium">监控观察</span>
+              </div>
+            )}
+
+            <div
+              className={[
+                "mt-1 space-y-1 transition-[padding] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
+                collapsed ? "pl-0" : "pl-5",
+              ].join(" ")}
+            >
+            {monitorSubItems.map((item) => (
+              <NavButton
+                key={item.key}
+                active={active === item.key}
+                collapsed={collapsed}
+                icon={item.icon}
+                label={item.label}
+                onClick={() => onNavigate(item.key)}
+              />
+            ))}
+            </div>
+          </div>
+
           <div className="pt-2">
             {mainItems.slice(1).map((item) => (
               <NavButton
@@ -158,6 +209,7 @@ export function Sidebar({
               />
             ))}
           </div>
+
         </div>
       </nav>
 
diff --git a/src/components/pages/DashboardPage.tsx b/src/components/pages/DashboardPage.tsx
new file mode 100644
index 0000000..916ac4d
--- /dev/null
+++ b/src/components/pages/DashboardPage.tsx
@@ -0,0 +1,11 @@
+import { PlaceholderPage } from "./PlaceholderPage";
+
+export function DashboardPage() {
+  return (
+    <PlaceholderPage
+      label="监控观察"
+      title="数据看板"
+      description="查看助手的对话数据、运行日志与调用明细。"
+    />
+  );
+}