Feat/shadcn sidebar and page views (#2084)

* feat(web): migrate sidebar to shadcn and convert entity editors to page views

* feat(web): enhance sidebar with sections, collapsible persistence, sub-item sorting/limiting, and UI polish

- Reorganize sidebar into Home and Extensions sections with collapsible groups
- Split plugins page into plugins, market, and mcp as separate routes
- Add sidebar sub-items sorted by updatedAt with max 5 visible and expand/collapse toggle
- Persist collapsible section state and sidebar open state in localStorage
- Fix page refresh stripping query params by splitting handleChildClick/selectChild
- Swap plugin detail layout (config left, readme right)
- Add fixed headers with internal scroll for all detail and list pages
- Remove entity form borders and sidebar rail
- Improve dark mode sidebar/content contrast
- Rename monitoring to Dashboard, move to first position
- Update breadcrumb to show Home or Extensions based on current route
- Add i18n translations for more/less toggle in all 4 locales

* fix(web): fix scroll behavior - constrain layout to viewport, fix fixed headers and independent scroll areas

- Change SidebarProvider wrapper from min-h-svh to h-svh overflow-hidden to constrain layout to viewport height (root cause of all scroll issues)
- Fix create mode pages (bot, pipeline, knowledge): extract title bar out of scroll container so only form content scrolls
- Fix plugin detail: add overflow-x-hidden on both config and readme panels to prevent horizontal overflow
- Add min-h-0 to all TabsContent in edit mode for cross-browser flex shrink safety
- Change nested <main> to <div> in layout to avoid invalid nested <main> tags (SidebarInset already renders as <main>)

* style(web): polish UI - dashboard i18n, sidebar create text, cursor-pointer tabs, remove cancel buttons

* feat(web): add plugin context menu to sidebar sub-items

- Add hover-reveal dropdown menu (Ellipsis icon) on plugin sidebar items
- Menu items: Update (marketplace only), View Source (marketplace/github), Delete
- Add confirmation dialog with async task polling for delete/update operations
- Extend SidebarEntityItem with installSource and installInfo fields
- Fix PipelineFormComponent optional onCancel invocation

* fix(web): prevent plugin sidebar text from overlapping menu button

Add right padding on plugin sub-items and explicit truncate on text
span so long plugin names never overlap the hover menu button.

* feat(web): show update indicator on sidebar plugin menu

- Fetch marketplace plugin versions in SidebarDataContext.refreshPlugins
- Compare with installed version using isNewerVersion to set hasUpdate
- Show red dot on menu trigger when update available (always visible)
- Show 'New' badge on Update menu item when update available
- Marketplace fetch failure is silently caught to avoid blocking sidebar

* refactor(web): remove entity list pages, back buttons, and make sidebar toggle collapse

- Remove card grid list views from bots, pipelines, knowledge pages
- Show empty state placeholder when no entity is selected
- Preserve KB migration dialog at page level
- Remove back (ArrowLeft) buttons from all detail pages (bots, pipelines, knowledge, plugins)
- Sidebar parent click for bots/pipelines/knowledge now toggles collapse instead of navigating
- Breadcrumb second level is now non-clickable (always BreadcrumbPage)
- Add selectFromSidebar i18n keys in all 4 locales

* feat(web): enhance bot session monitor with refresh functionality and improve log card UI

* refactor(web): optimize pipeline detail page with vertical config nav and debug chat polish

- Convert pipeline config tab's horizontal sub-tabs to vertical left-side navigation with icons
- Replace hardcoded colors in PipelineFormComponent and DebugDialog with theme-aware Tailwind classes
- Replace custom SVG icons with lucide-react (User, Users, ImageIcon, Send, Reply, etc.)
- Replace hardcoded Chinese strings with i18n keys (allMembers, file, voice, uploadImage, uploading)
- Modernize chat bubbles to use bg-primary/10 and bg-muted instead of hardcoded blue/gray
- Translate all Chinese comments to English in both components
- Delete unused pipelineFormStyle.module.css
- Remove max-w-2xl constraint from config tab container

* fix(web): improve dark mode contrast and relocate WebSocket status indicator

Bump dark mode --muted, --accent, --secondary from oklch(0.18) to oklch(0.24)
to fix invisible TabsList, message bubbles, and selected items against the
oklch(0.17) background. Move WebSocket connection dot from pipeline title
into the Debug Chat tab trigger so it is always visible. Replace hardcoded
Quote border colors with theme-aware border-muted-foreground/50.

* fix(web): increase dark mode contrast for muted/accent/secondary to oklch(0.27)

Previous value of oklch(0.24) was still not distinguishable enough against
the oklch(0.17) background. Bump to oklch(0.27) for a 0.10 lightness gap,
matching the contrast ratio of the default shadcn zinc dark theme.

* style(web): replace hardcoded colors with theme tokens in monitoring dashboard

Convert all monitoring page components from hardcoded gray/white colors
to theme-aware CSS variable tokens (bg-card, text-foreground,
text-muted-foreground, bg-muted, bg-background, bg-accent, border).
Semantic colors (red/green/blue/purple for status badges and error
styling) are intentionally preserved.

* feat(web): show debug indicator for debugging plugins in sidebar

Add orange Bug icon next to plugin name in sidebar sub-items when the
plugin is connected via WebSocket debug mode. Hide context menu for
debug plugins since delete/update operations are not supported.

* feat(web): show install source and debug badge on plugin detail page

Display a badge next to the plugin title indicating the install source
(GitHub blue, Local green, Marketplace purple) or debugging status
(orange with Bug icon), matching the existing plugin card convention.

* fix(web): resolve eslint errors for CI - remove unused imports and variables

* fix(web): remove stale setSubtitle call and fix prettier formatting

* Refactor code formatting and improve readability

- Updated HomeSidebar.tsx to enhance clarity in conditional assignment.
- Adjusted CSS formatting in github-markdown.css for better alignment.
- Cleaned up tsconfig.json by consolidating array formatting for consistency.

* fix(ci): use local prettier instead of mirrors-prettier to avoid version mismatch (3.1.0 vs 3.8.1)

.pre-commit-config.yaml

@@ -9,16 +9,14 @@ repos:
       # Run the formatter of backend.
       - id: ruff-format
 
-  - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v3.1.0
-    hooks:
-      - id: prettier
-        types_or: [javascript, jsx, ts, tsx, css, scss]
-        additional_dependencies:
-          - prettier@3.1.0
-
   - repo: local
     hooks:
+      - id: prettier
+        name: prettier
+        entry: npx --prefix web prettier --write --ignore-unknown
+        language: system
+        types_or: [javascript, jsx, ts, tsx, css, scss]
+
       - id: lint-staged
         name: lint-staged
         entry: cd web && pnpm lint-staged

src/langbot/pkg/api/http/controller/main.py

@@ -105,6 +105,28 @@ class HTTPController:
             ):
                 if os.path.exists(os.path.join(frontend_path, path + '.html')):
                     path += '.html'
+                elif path.startswith('home/'):
+                    # SPA fallback for /home/* sub-routes.
+                    # Entity detail views use query params (e.g. /home/bots?id=uuid),
+                    # so the pre-rendered list page is served directly via path + '.html'.
+                    # This fallback handles any remaining unmatched sub-paths.
+                    segments = path.rstrip('/').split('/')
+
+                    # Walk up parent segments looking for matching .html files
+                    for i in range(len(segments) - 1, 0, -1):
+                        parent_path = '/'.join(segments[:i]) + '.html'
+                        if os.path.exists(os.path.join(frontend_path, parent_path)):
+                            response = await quart.send_from_directory(frontend_path, parent_path, mimetype='text/html')
+                            response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate'
+                            response.headers['Pragma'] = 'no-cache'
+                            response.headers['Expires'] = '0'
+                            return response
+                    # Final fallback to index.html for /home/* routes
+                    response = await quart.send_from_directory(frontend_path, 'index.html', mimetype='text/html')
+                    response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate'
+                    response.headers['Pragma'] = 'no-cache'
+                    response.headers['Expires'] = '0'
+                    return response
                 else:
                     return await quart.send_from_directory(frontend_path, '404.html')
 

web/package.json

@@ -25,6 +25,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.0.1",
     "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-checkbox": "^1.3.1",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-context-menu": "^2.2.15",

web/src/app/global.css

@@ -117,19 +117,19 @@
 }
 
 .dark {
-  --background: oklch(0.08 0.002 285.823);
+  --background: oklch(0.17 0.003 285.823);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.12 0.004 285.885);
+  --card: oklch(0.16 0.004 285.885);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.12 0.004 285.885);
+  --popover: oklch(0.16 0.004 285.885);
   --popover-foreground: oklch(0.985 0 0);
   --primary: oklch(0.62 0.2 255);
   --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.18 0.004 286.033);
+  --secondary: oklch(0.27 0.005 286.033);
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.18 0.004 286.033);
+  --muted: oklch(0.27 0.005 286.033);
   --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.18 0.004 286.033);
+  --accent: oklch(0.27 0.005 286.033);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 8%);
@@ -140,7 +140,7 @@
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.1 0.003 285.885);
+  --sidebar: oklch(0.05 0.002 285.885);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.62 0.2 255);
   --sidebar-primary-foreground: oklch(1 0 0);

web/src/app/home/bots/BotDetailContent.tsx

@@ -0,0 +1,220 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import BotForm from '@/app/home/bots/components/bot-form/BotForm';
+import { BotLogListComponent } from '@/app/home/bots/components/bot-log/view/BotLogListComponent';
+import BotSessionMonitor from '@/app/home/bots/components/bot-session/BotSessionMonitor';
+import type { BotSessionMonitorHandle } from '@/app/home/bots/components/bot-session/BotSessionMonitor';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
+import { useTranslation } from 'react-i18next';
+import { Settings, FileText, Users, RefreshCw } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export default function BotDetailContent({ id }: { id: string }) {
+  const isCreateMode = id === 'new';
+  const router = useRouter();
+  const { t } = useTranslation();
+  const { refreshBots, bots, setDetailEntityName } = useSidebarData();
+
+  // Set breadcrumb entity name
+  useEffect(() => {
+    if (isCreateMode) {
+      setDetailEntityName(t('bots.createBot'));
+    } else {
+      const bot = bots.find((b) => b.id === id);
+      setDetailEntityName(bot?.name ?? id);
+    }
+    return () => setDetailEntityName(null);
+  }, [id, isCreateMode, bots, setDetailEntityName, t]);
+
+  const [activeTab, setActiveTab] = useState('config');
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [isRefreshingSessions, setIsRefreshingSessions] = useState(false);
+  const sessionMonitorRef = useRef<BotSessionMonitorHandle>(null);
+
+  function handleFormSubmit() {
+    refreshBots();
+  }
+
+  function handleBotDeleted() {
+    refreshBots();
+    router.push('/home/bots');
+  }
+
+  function handleNewBotCreated(newBotId: string) {
+    refreshBots();
+    // Navigate to the newly created bot's detail view via query param
+    router.push(`/home/bots?id=${encodeURIComponent(newBotId)}`);
+  }
+
+  function handleDelete() {
+    setShowDeleteConfirm(true);
+  }
+
+  function confirmDelete() {
+    httpClient.deleteBot(id).then(() => {
+      setShowDeleteConfirm(false);
+      handleBotDeleted();
+    });
+  }
+
+  // Create mode: simple form layout
+  if (isCreateMode) {
+    return (
+      <div className="flex h-full flex-col">
+        <div className="flex items-center gap-3 pb-4 shrink-0">
+          <h1 className="text-xl font-semibold">{t('bots.createBot')}</h1>
+        </div>
+
+        <div className="flex-1 overflow-y-auto min-h-0">
+          <div className="mx-auto max-w-2xl space-y-6">
+            <BotForm
+              initBotId={undefined}
+              onFormSubmit={handleFormSubmit}
+              onBotDeleted={handleBotDeleted}
+              onNewBotCreated={handleNewBotCreated}
+            />
+
+            <div className="flex justify-end gap-2 pb-4">
+              <Button type="submit" form="bot-form">
+                {t('common.submit')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Edit mode: tabbed layout with config, logs, sessions
+  return (
+    <>
+      <div className="flex h-full flex-col">
+        <div className="flex items-center gap-3 pb-4 shrink-0">
+          <h1 className="text-xl font-semibold">{t('bots.editBot')}</h1>
+        </div>
+
+        <Tabs
+          key={id}
+          value={activeTab}
+          onValueChange={setActiveTab}
+          className="flex flex-1 flex-col min-h-0"
+        >
+          <TabsList className="shrink-0">
+            <TabsTrigger value="config" className="gap-1.5">
+              <Settings className="size-3.5" />
+              {t('bots.configuration')}
+            </TabsTrigger>
+            <TabsTrigger value="logs" className="gap-1.5">
+              <FileText className="size-3.5" />
+              {t('bots.logs')}
+            </TabsTrigger>
+            <TabsTrigger value="sessions" className="gap-1.5">
+              <Users className="size-3.5" />
+              {t('bots.sessionMonitor.title')}
+              {activeTab === 'sessions' && (
+                <button
+                  type="button"
+                  className="inline-flex items-center justify-center ml-0.5"
+                  onPointerDown={(e) => e.stopPropagation()}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    if (isRefreshingSessions) return;
+                    setIsRefreshingSessions(true);
+                    const minDelay = new Promise((r) => setTimeout(r, 500));
+                    Promise.all([
+                      sessionMonitorRef.current?.refreshSessions(),
+                      minDelay,
+                    ]).finally(() => setIsRefreshingSessions(false));
+                  }}
+                >
+                  <RefreshCw
+                    className={cn(
+                      'size-3 text-muted-foreground hover:text-foreground transition-colors',
+                      isRefreshingSessions && 'animate-spin',
+                    )}
+                  />
+                </button>
+              )}
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent
+            value="config"
+            className="flex-1 min-h-0 overflow-y-auto mt-4"
+          >
+            <div className="mx-auto max-w-2xl">
+              <BotForm
+                initBotId={id}
+                onFormSubmit={handleFormSubmit}
+                onBotDeleted={handleBotDeleted}
+                onNewBotCreated={handleNewBotCreated}
+              />
+
+              <div className="flex justify-end gap-2 mt-6 pb-4">
+                <Button
+                  type="button"
+                  variant="destructive"
+                  onClick={handleDelete}
+                >
+                  {t('common.delete')}
+                </Button>
+                <Button type="submit" form="bot-form">
+                  {t('common.save')}
+                </Button>
+              </div>
+            </div>
+          </TabsContent>
+
+          <TabsContent
+            value="logs"
+            className="flex-1 min-h-0 overflow-y-auto mt-4"
+          >
+            <BotLogListComponent botId={id} />
+          </TabsContent>
+
+          <TabsContent value="sessions" className="flex-1 min-h-0 mt-4">
+            <BotSessionMonitor ref={sessionMonitorRef} botId={id} />
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* Delete confirmation dialog */}
+      <Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t('common.confirmDelete')}</DialogTitle>
+            <DialogDescription className="sr-only">
+              {t('bots.deleteConfirmation')}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-4">{t('bots.deleteConfirmation')}</div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setShowDeleteConfirm(false)}
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button variant="destructive" onClick={confirmDelete}>
+              {t('common.confirmDelete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

web/src/app/home/bots/BotDetailDialog.tsx

@@ -1,297 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogDescription,
-  DialogTitle,
-  DialogFooter,
-} from '@/components/ui/dialog';
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-} from '@/components/ui/sidebar';
-import { Button } from '@/components/ui/button';
-import BotForm from '@/app/home/bots/components/bot-form/BotForm';
-import { BotLogListComponent } from '@/app/home/bots/components/bot-log/view/BotLogListComponent';
-import BotSessionMonitor from '@/app/home/bots/components/bot-session/BotSessionMonitor';
-import { useTranslation } from 'react-i18next';
-import { z } from 'zod';
-import { httpClient } from '@/app/infra/http/HttpClient';
-
-interface BotDetailDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  botId?: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onFormSubmit: (value: z.infer<any>) => void;
-  onFormCancel: () => void;
-  onBotDeleted: () => void;
-  onNewBotCreated: (botId: string) => void;
-}
-
-export default function BotDetailDialog({
-  open,
-  onOpenChange,
-  botId: propBotId,
-  onFormSubmit,
-  onFormCancel,
-  onBotDeleted,
-  onNewBotCreated,
-}: BotDetailDialogProps) {
-  const { t } = useTranslation();
-  const [botId, setBotId] = useState<string | undefined>(propBotId);
-  const [activeMenu, setActiveMenu] = useState('config');
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-
-  useEffect(() => {
-    setBotId(propBotId);
-    setActiveMenu('config');
-  }, [propBotId, open]);
-
-  const menu = [
-    {
-      key: 'config',
-      label: t('bots.configuration'),
-      icon: (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <path d="M5 7C5 6.17157 5.67157 5.5 6.5 5.5C7.32843 5.5 8 6.17157 8 7C8 7.82843 7.32843 8.5 6.5 8.5C5.67157 8.5 5 7.82843 5 7ZM6.5 3.5C4.567 3.5 3 5.067 3 7C3 8.933 4.567 10.5 6.5 10.5C8.433 10.5 10 8.933 10 7C10 5.067 8.433 3.5 6.5 3.5ZM12 8H20V6H12V8ZM16 17C16 16.1716 16.6716 15.5 17.5 15.5C18.3284 15.5 19 16.1716 19 17C19 17.8284 18.3284 18.5 17.5 18.5C16.6716 18.5 16 17.8284 16 17ZM17.5 13.5C15.567 13.5 14 15.067 14 17C14 18.933 15.567 20.5 17.5 20.5C19.433 20.5 21 18.933 21 17C21 15.067 19.433 13.5 17.5 13.5ZM4 16V18H12V16H4Z"></path>
-        </svg>
-      ),
-    },
-    {
-      key: 'logs',
-      label: t('bots.logs'),
-      icon: (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <path d="M21 8V20.9932C21 21.5501 20.5552 22 20.0066 22H3.9934C3.44495 22 3 21.556 3 21.0082V2.9918C3 2.45531 3.4487 2 4.00221 2H14.9968L21 8ZM19 9H14V4H5V20H19V9ZM8 7H11V9H8V7ZM8 11H16V13H8V11ZM8 15H16V17H8V15Z"></path>
-        </svg>
-      ),
-    },
-    {
-      key: 'sessions',
-      label: t('bots.sessionMonitor.title'),
-      icon: (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <path d="M2 22C2 17.5817 5.58172 14 10 14C14.4183 14 18 17.5817 18 22H16C16 18.6863 13.3137 16 10 16C6.68629 16 4 18.6863 4 22H2ZM10 13C6.685 13 4 10.315 4 7C4 3.685 6.685 1 10 1C13.315 1 16 3.685 16 7C16 10.315 13.315 13 10 13ZM10 11C12.21 11 14 9.21 14 7C14 4.79 12.21 3 10 3C7.79 3 6 4.79 6 7C6 9.21 7.79 11 10 11ZM18.2837 14.7028C21.0644 15.9561 23 18.752 23 22H21C21 19.564 19.5483 17.4671 17.4628 16.5271L18.2837 14.7028ZM17.5962 3.41321C19.5944 4.23703 21 6.20361 21 8.5C21 11.3702 18.8042 13.7252 16 13.9776V11.9646C17.6967 11.7222 19 10.264 19 8.5C19 7.11935 18.2016 5.92603 17.041 5.35635L17.5962 3.41321Z"></path>
-        </svg>
-      ),
-    },
-  ];
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleFormSubmit = (value: any) => {
-    onFormSubmit(value);
-  };
-
-  const handleFormCancel = () => {
-    onFormCancel();
-  };
-
-  const handleBotDeleted = () => {
-    httpClient.deleteBot(botId ?? '').then(() => {
-      onBotDeleted();
-    });
-  };
-
-  const handleNewBotCreated = (newBotId: string) => {
-    setBotId(newBotId);
-    setActiveMenu('config');
-    onNewBotCreated(newBotId);
-  };
-
-  const handleDelete = () => {
-    setShowDeleteConfirm(true);
-  };
-
-  const confirmDelete = () => {
-    handleBotDeleted();
-    setShowDeleteConfirm(false);
-  };
-
-  if (!botId) {
-    return (
-      <>
-        <Dialog open={open} onOpenChange={onOpenChange}>
-          <DialogContent className="overflow-hidden p-0 !max-w-[40vw] max-h-[70vh] flex">
-            <main className="flex flex-1 flex-col h-[70vh]">
-              <DialogHeader className="px-6 pt-6 pb-4 shrink-0">
-                <DialogTitle>{t('bots.createBot')}</DialogTitle>
-                <DialogDescription className="sr-only">
-                  {t('bots.createBot')}
-                </DialogDescription>
-              </DialogHeader>
-              <div className="flex-1 overflow-y-auto px-6 pb-6">
-                <BotForm
-                  initBotId={undefined}
-                  onFormSubmit={handleFormSubmit}
-                  onBotDeleted={handleBotDeleted}
-                  onNewBotCreated={handleNewBotCreated}
-                />
-              </div>
-              <DialogFooter className="px-6 py-4 border-t shrink-0">
-                <div className="flex justify-end gap-2">
-                  <Button type="submit" form="bot-form">
-                    {t('common.submit')}
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={handleFormCancel}
-                  >
-                    {t('common.cancel')}
-                  </Button>
-                </div>
-              </DialogFooter>
-            </main>
-          </DialogContent>
-        </Dialog>
-      </>
-    );
-  }
-
-  return (
-    <>
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="overflow-hidden p-0 !max-w-[70rem] max-h-[75vh] flex">
-          <SidebarProvider className="items-start w-full flex">
-            <Sidebar
-              collapsible="none"
-              className="hidden md:flex h-[80vh] w-40 min-w-[120px] border-r bg-white dark:bg-black"
-            >
-              <SidebarContent>
-                <SidebarGroup>
-                  <SidebarGroupContent>
-                    <SidebarMenu>
-                      {menu.map((item) => (
-                        <SidebarMenuItem key={item.key}>
-                          <SidebarMenuButton
-                            asChild
-                            isActive={activeMenu === item.key}
-                            onClick={() => setActiveMenu(item.key)}
-                          >
-                            <a href="#">
-                              {item.icon}
-                              <span>{item.label}</span>
-                            </a>
-                          </SidebarMenuButton>
-                        </SidebarMenuItem>
-                      ))}
-                    </SidebarMenu>
-                  </SidebarGroupContent>
-                </SidebarGroup>
-              </SidebarContent>
-            </Sidebar>
-            <main className="flex flex-1 flex-col h-[75vh]">
-              <DialogHeader className="px-6 pt-6 pb-4 shrink-0">
-                <DialogTitle>
-                  {activeMenu === 'config'
-                    ? t('bots.editBot')
-                    : activeMenu === 'logs'
-                      ? t('bots.botLogTitle')
-                      : t('bots.sessionMonitor.title')}
-                </DialogTitle>
-                <DialogDescription className="sr-only">
-                  {activeMenu === 'config'
-                    ? t('bots.editBot')
-                    : activeMenu === 'logs'
-                      ? t('bots.botLogTitle')
-                      : t('bots.sessionMonitor.title')}
-                </DialogDescription>
-              </DialogHeader>
-              <div
-                className={
-                  activeMenu === 'sessions'
-                    ? 'flex-1 min-h-0'
-                    : 'flex-1 overflow-y-auto px-6 pb-6'
-                }
-              >
-                {activeMenu === 'config' && (
-                  <BotForm
-                    initBotId={botId}
-                    onFormSubmit={handleFormSubmit}
-                    onBotDeleted={handleBotDeleted}
-                    onNewBotCreated={handleNewBotCreated}
-                  />
-                )}
-                {activeMenu === 'logs' && botId && (
-                  <BotLogListComponent botId={botId} />
-                )}
-                {activeMenu === 'sessions' && botId && (
-                  <BotSessionMonitor botId={botId} />
-                )}
-              </div>
-              {activeMenu === 'config' && (
-                <DialogFooter className="px-6 py-4 border-t shrink-0">
-                  <div className="flex justify-end gap-2">
-                    <Button
-                      type="button"
-                      variant="destructive"
-                      onClick={handleDelete}
-                    >
-                      {t('common.delete')}
-                    </Button>
-                    <Button type="submit" form="bot-form">
-                      {t('common.save')}
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      onClick={handleFormCancel}
-                    >
-                      {t('common.cancel')}
-                    </Button>
-                  </div>
-                </DialogFooter>
-              )}
-            </main>
-          </SidebarProvider>
-        </DialogContent>
-      </Dialog>
-
-      {/* 删除确认对话框 */}
-      <Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{t('common.confirmDelete')}</DialogTitle>
-            <DialogDescription className="sr-only">
-              {t('bots.deleteConfirmation')}
-            </DialogDescription>
-          </DialogHeader>
-          <div className="py-4">{t('bots.deleteConfirmation')}</div>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setShowDeleteConfirm(false)}
-            >
-              {t('common.cancel')}
-            </Button>
-            <Button variant="destructive" onClick={confirmDelete}>
-              {t('common.confirmDelete')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}

web/src/app/home/bots/components/bot-card/botCard.module.css

@@ -3,7 +3,7 @@
   height: 10rem;
   background-color: #fff;
   border-radius: 10px;
-  box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.2);
+  border: 1px solid #e4e4e7;
   padding: 1.2rem;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -11,15 +11,15 @@
 
 :global(.dark) .cardContainer {
   background-color: #1f1f22;
-  box-shadow: 0;
+  border-color: #27272a;
 }
 
 .cardContainer:hover {
-  box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.1);
+  border-color: #a1a1aa;
 }
 
 :global(.dark) .cardContainer:hover {
-  box-shadow: 0;
+  border-color: #3f3f46;
 }
 
 .iconBasicInfoContainer {

web/src/app/home/bots/components/bot-log/view/BotLogCard.tsx

@@ -2,12 +2,22 @@
 
 import { useState } from 'react';
 import { BotLog } from '@/app/infra/http/requestParam/bots/GetBotLogsResponse';
-import styles from './botLog.module.css';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { PhotoProvider } from 'react-photo-view';
 import { useTranslation } from 'react-i18next';
-import { Check, ChevronDown, ChevronRight } from 'lucide-react';
+import { Check, ChevronDown, ChevronRight, Copy } from 'lucide-react';
 import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+
+const LEVEL_STYLES: Record<string, string> = {
+  error: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
+  warning:
+    'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
+  info: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
+  debug: 'bg-muted text-muted-foreground',
+};
+
+const SHORT_TEXT_LIMIT = 120;
 
 export function BotLogCard({ botLog }: { botLog: BotLog }) {
   const { t } = useTranslation();
@@ -15,207 +25,158 @@ export function BotLogCard({ botLog }: { botLog: BotLog }) {
   const [copied, setCopied] = useState(false);
   const [expanded, setExpanded] = useState(false);
 
-  // Fallback 复制方法，用于不支持 clipboard API 的环境
-  function fallbackCopy(text: string) {
-    const textArea = document.createElement('textarea');
-    textArea.value = text;
-    textArea.style.position = 'fixed';
-    textArea.style.left = '-9999px';
-    textArea.style.top = '-9999px';
-    document.body.appendChild(textArea);
-    textArea.focus();
-    textArea.select();
-    try {
-      document.execCommand('copy');
-      toast.success(t('common.copySuccess'));
-    } catch {
-      toast.error(t('common.copyFailed'));
-    }
-    document.body.removeChild(textArea);
-  }
-
-  function formatTime(timestamp: number) {
-    const now = new Date();
-    const date = new Date(timestamp * 1000);
-
-    // 获取各个时间部分
-    const year = date.getFullYear();
-    const month = date.getMonth() + 1; // 月份从0开始，需要+1
-    const day = date.getDate();
-    const hours = date.getHours().toString().padStart(2, '0');
-    const minutes = date.getMinutes().toString().padStart(2, '0');
-
-    // 判断时间范围
-    const isToday = now.toDateString() === date.toDateString();
-    const isYesterday =
-      new Date(now.setDate(now.getDate() - 1)).toDateString() ===
-      date.toDateString();
-    const isThisYear = now.getFullYear() === year;
-
-    if (isToday) {
-      return `${hours}:${minutes}`; // 今天的消息：小时:分钟
-    } else if (isYesterday) {
-      return `${t('bots.yesterday')} ${hours}:${minutes}`; // 昨天的消息：昨天 小时:分钟
-    } else if (isThisYear) {
-      return t('bots.dateFormat', { month, day }); // 本年消息：x月x日
-    } else {
-      return t('bots.earlier'); // 更早的消息：更久之前
-    }
-  }
-
-  function getSubChatId(str: string) {
-    const strArr = str.split('');
-    return strArr;
-  }
-
-  // 根据日志级别返回对应的样式类
-  function getLevelStyles(level: string) {
-    switch (level.toLowerCase()) {
-      case 'error':
-        return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400';
-      case 'warning':
-        return 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400';
-      case 'info':
-        return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400';
-      case 'debug':
-        return 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400';
-      default:
-        return 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400';
-    }
-  }
-
-  // 截取文本的简短版本
-  function getShortText(text: string, maxLength: number = 100) {
-    if (text.length <= maxLength) return text;
-    return text.substring(0, maxLength) + '...';
-  }
-
-  // 判断是否需要展开按钮
-  const needsExpand = botLog.text.length > 100 || botLog.images.length > 0;
-
-  return (
-    <div className={`${styles.botLogCardContainer}`}>
-      {/* 头部标签，时间 */}
-      <div className={`${styles.cardTitleContainer}`}>
-        <div className={`flex flex-row gap-2 items-center`}>
-          <div
-            className={`px-2 py-1 rounded text-xs font-medium uppercase ${getLevelStyles(
-              botLog.level,
-            )}`}
-          >
-            {botLog.level}
-          </div>
-          {botLog.message_session_id && (
-            <div
-              className={`${styles.tag} ${styles.chatTag} relative`}
-              onClick={(e) => {
-                e.stopPropagation();
-                // 兼容性更好的复制方法
-                if (navigator.clipboard && navigator.clipboard.writeText) {
+  function copySessionId() {
+    const text = botLog.message_session_id;
+    if (navigator.clipboard?.writeText) {
       navigator.clipboard
-                    .writeText(botLog.message_session_id)
+        .writeText(text)
         .then(() => {
           setCopied(true);
           setTimeout(() => setCopied(false), 2000);
           toast.success(t('common.copySuccess'));
         })
-                    .catch(() => {
-                      // fallback
-                      fallbackCopy(botLog.message_session_id);
-                    });
+        .catch(() => fallbackCopy(text));
     } else {
-                  fallbackCopy(botLog.message_session_id);
+      fallbackCopy(text);
     }
+  }
+
+  function fallbackCopy(text: string) {
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    ta.style.cssText = 'position:fixed;left:-9999px;top:-9999px';
+    document.body.appendChild(ta);
+    ta.focus();
+    ta.select();
+    try {
+      document.execCommand('copy');
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+      toast.success(t('common.copySuccess'));
+    } catch {
+      toast.error(t('common.copyFailed'));
+    }
+    document.body.removeChild(ta);
+  }
+
+  function formatTime(timestamp: number) {
+    const now = new Date();
+    const date = new Date(timestamp * 1000);
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+
+    const isToday = now.toDateString() === date.toDateString();
+    const yesterday = new Date(now);
+    yesterday.setDate(yesterday.getDate() - 1);
+    const isYesterday = yesterday.toDateString() === date.toDateString();
+    const isThisYear = now.getFullYear() === date.getFullYear();
+
+    if (isToday) return `${hours}:${minutes}`;
+    if (isYesterday) return `${t('bots.yesterday')} ${hours}:${minutes}`;
+    if (isThisYear)
+      return t('bots.dateFormat', {
+        month: date.getMonth() + 1,
+        day: date.getDate(),
+      });
+    return t('bots.earlier');
+  }
+
+  const needsExpand =
+    botLog.text.length > SHORT_TEXT_LIMIT || botLog.images.length > 0;
+  const levelStyle =
+    LEVEL_STYLES[botLog.level.toLowerCase()] ?? LEVEL_STYLES.debug;
+
+  return (
+    <div className="rounded-lg border bg-card px-3.5 py-3 transition-colors hover:border-border/80">
+      {/* Header: level badge, session id, expand toggle, timestamp */}
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2 min-w-0">
+          {/* Level badge */}
+          <span
+            className={cn(
+              'inline-flex shrink-0 items-center rounded px-1.5 py-0.5 text-[11px] font-semibold uppercase leading-none',
+              levelStyle,
+            )}
+          >
+            {botLog.level}
+          </span>
+
+          {/* Session ID */}
+          {botLog.message_session_id && (
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                copySessionId();
               }}
               title={t('common.clickToCopy')}
+              className="inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-[11px] font-mono text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors truncate max-w-48 cursor-pointer"
             >
               {copied ? (
-                <Check className="w-4 h-4 text-green-600" />
+                <Check className="size-3 shrink-0 text-green-600" />
               ) : (
-                <svg
-                  className="icon"
-                  viewBox="0 0 1024 1024"
-                  version="1.1"
-                  xmlns="http://www.w3.org/2000/svg"
-                  p-id="1664"
-                  width="16"
-                  height="16"
-                  fill="currentColor"
-                >
-                  <path
-                    d="M96.1 575.7a32.2 32.1 0 1 0 64.4 0 32.2 32.1 0 1 0-64.4 0Z"
-                    p-id="1665"
-                    fill="currentColor"
-                  ></path>
-                  <path
-                    d="M742.1 450.7l-269.5-2.1c-14.3-0.1-26 13.8-26 31s11.7 31.3 26 31.4l269.5 2.1c14.3 0.1 26-13.8 26-31s-11.7-31.3-26-31.4zM742.1 577.7l-269.5-2.1c-14.3-0.1-26 13.8-26 31s11.7 31.3 26 31.4l269.5 2.1c14.3 0.2 26-13.8 26-31s-11.7-31.3-26-31.4z"
-                    p-id="1666"
-                    fill="currentColor"
-                  ></path>
-                  <path
-                    d="M736.1 63.9H417c-70.4 0-128 57.6-128 128h-64.9c-70.4 0-128 57.6-128 128v128c-0.1 17.7 14.4 32 32.2 32 17.8 0 32.2-14.4 32.2-32.1V320c0-35.2 28.8-64 64-64H289v447.8c0 70.4 57.6 128 128 128h255.1c-0.1 35.2-28.8 63.8-64 63.8H224.5c-35.2 0-64-28.8-64-64V703.5c0-17.7-14.4-32.1-32.2-32.1-17.8 0-32.3 14.4-32.3 32.1v128.3c0 70.4 57.6 128 128 128h384.1c70.4 0 128-57.6 128-128h65c70.4 0 128-57.6 128-128V255.9l-193-192z m0.1 63.4l127.7 128.3H800c-35.2 0-64-28.8-64-64v-64.3h0.2z m64 641H416.1c-35.2 0-64-28.8-64-64v-513c0-35.2 28.8-64 64-64H671V191c0 70.4 57.6 128 128 128h65.2v385.3c0 35.2-28.8 64-64 64z"
-                    p-id="1667"
-                    fill="currentColor"
-                  ></path>
-                </svg>
+                <Copy className="size-3 shrink-0" />
               )}
+              <span className="truncate">{botLog.message_session_id}</span>
+            </button>
+          )}
+        </div>
 
-              <span className={`${styles.chatId}`}>
-                {getSubChatId(botLog.message_session_id)}
-              </span>
-            </div>
-          )}
-        </div>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 shrink-0">
           {needsExpand && (
             <button
+              type="button"
               onClick={() => setExpanded(!expanded)}
-              className="flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors"
+              className="flex items-center gap-0.5 text-[11px] text-muted-foreground hover:text-foreground transition-colors"
             >
               {expanded ? (
                 <>
-                  <ChevronDown className="w-3 h-3" />
+                  <ChevronDown className="size-3" />
                   {t('bots.collapse')}
                 </>
               ) : (
                 <>
-                  <ChevronRight className="w-3 h-3" />
+                  <ChevronRight className="size-3" />
                   {t('bots.viewDetails')}
                 </>
               )}
             </button>
           )}
-          <div className={`${styles.timestamp}`}>
+          <span className="text-[11px] text-muted-foreground tabular-nums">
             {formatTime(botLog.timestamp)}
-          </div>
+          </span>
         </div>
       </div>
 
-      {/* 日志内容 - 简化显示 */}
-      <div className={`${styles.cardText}`}>
-        {expanded ? botLog.text : getShortText(botLog.text)}
+      {/* Log text */}
+      <div className="mt-2 text-sm leading-relaxed text-foreground whitespace-pre-wrap break-words overflow-wrap-anywhere">
+        {expanded
+          ? botLog.text
+          : botLog.text.length > SHORT_TEXT_LIMIT
+            ? botLog.text.slice(0, SHORT_TEXT_LIMIT) + '...'
+            : botLog.text}
       </div>
 
-      {/* 图片 - 只在展开时显示 */}
+      {/* Images (expanded) */}
       {expanded && botLog.images.length > 0 && (
         <PhotoProvider>
-          <div className={`flex flex-wrap gap-2 mt-3`}>
+          <div className="flex flex-wrap gap-2 mt-2.5">
             {botLog.images.map((item) => (
               <img
                 key={item}
                 src={`${baseURL}/api/v1/files/image/${item}`}
                 alt=""
-                className="max-w-xs rounded cursor-pointer hover:opacity-90 transition-opacity"
+                className="max-w-xs rounded-md cursor-pointer hover:opacity-90 transition-opacity"
               />
             ))}
           </div>
         </PhotoProvider>
       )}
 
-      {/* 图片数量提示 - 未展开时显示 */}
+      {/* Image count hint (collapsed) */}
       {!expanded && botLog.images.length > 0 && (
-        <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
-          📷 {botLog.images.length} {t('bots.imagesAttached')}
+        <div className="mt-1.5 text-[11px] text-muted-foreground">
+          {botLog.images.length} {t('bots.imagesAttached')}
         </div>
       )}
     </div>

web/src/app/home/bots/components/bot-log/view/BotLogListComponent.tsx

@@ -4,7 +4,6 @@ import { BotLogManager } from '@/app/home/bots/components/bot-log/BotLogManager'
 import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
 import { BotLog } from '@/app/infra/http/requestParam/bots/GetBotLogsResponse';
 import { BotLogCard } from '@/app/home/bots/components/bot-log/view/BotLogCard';
-import styles from './botLog.module.css';
 import { Switch } from '@/components/ui/switch';
 import {
   Popover,
@@ -50,7 +49,6 @@ export function BotLogListComponent({ botId }: { botId: string }) {
     botLogListRef.current = botLogList;
   }, [botLogList]);
 
-  // 根据级别过滤日志
   const filteredLogs = useMemo(() => {
     if (selectedLevels.length === 0) {
       return botLogList;
@@ -75,18 +73,15 @@ export function BotLogListComponent({ botId }: { botId: string }) {
     if (selectedLevels.length === logLevels.length) {
       return t('bots.allLevels');
     }
-    // 如果选中3个或以上，显示数量
     if (selectedLevels.length >= 3) {
       return `${selectedLevels.length} ${t('bots.levelsSelected')}`;
     }
-    // 显示选中级别的标签（大写形式）
     return logLevels
       .filter((level) => selectedLevels.includes(level.value))
       .map((level) => level.label)
       .join(', ');
   };
 
-  // 观测自动刷新状态
   useEffect(() => {
     if (autoFlush) {
       manager.startListenServerPush();
@@ -99,13 +94,10 @@ export function BotLogListComponent({ botId }: { botId: string }) {
   }, [autoFlush]);
 
   function initComponent() {
-    // 订阅日志推送
     manager.subscribeLogPush(handleBotLogPush);
-    // 加载第一页日志
     manager.loadFirstPage().then((response) => {
       setBotLogList(response.reverse());
     });
-    // 监听滚动
     listenScroll();
   }
 
@@ -115,28 +107,19 @@ export function BotLogListComponent({ botId }: { botId: string }) {
   }
 
   function listenScroll() {
-    if (!listContainerRef.current) {
-      return;
-    }
-    const list = listContainerRef.current;
-    list.addEventListener('scroll', handleScroll);
+    if (!listContainerRef.current) return;
+    listContainerRef.current.addEventListener('scroll', handleScroll);
   }
 
   function removeScrollListener() {
-    if (!listContainerRef.current) {
-      return;
-    }
-    const list = listContainerRef.current;
-    list.removeEventListener('scroll', handleScroll);
+    if (!listContainerRef.current) return;
+    listContainerRef.current.removeEventListener('scroll', handleScroll);
   }
 
   function loadMore() {
-    // 加载更多日志
     const list = botLogListRef.current;
     const lastSeq = list[list.length - 1].seq_id;
-    if (lastSeq === 0) {
-      return;
-    }
+    if (lastSeq === 0) return;
     manager.loadMore(lastSeq - 1, 10).then((response) => {
       setBotLogList([...list, ...response.reverse()]);
     });
@@ -165,33 +148,51 @@ export function BotLogListComponent({ botId }: { botId: string }) {
       if (!isTop && !isBottom) {
         setAutoFlush(false);
       }
-    }, 300), // 防抖延迟 300ms
-    [botLogList], // 依赖项为空
+    }, 300),
+    [botLogList],
   );
 
   return (
-    <div className={`${styles.botLogListContainer}`} ref={listContainerRef}>
-      <div className={`${styles.listHeader}`}>
-        <div className={'mr-2'}>{t('bots.enableAutoRefresh')}</div>
-        <Switch checked={autoFlush} onCheckedChange={(e) => setAutoFlush(e)} />
-        <div className={'ml-4 mr-2'}>{t('bots.logLevel')}</div>
+    <div
+      className="flex flex-col h-full min-h-0 overflow-y-auto"
+      ref={listContainerRef}
+    >
+      {/* Toolbar */}
+      <div className="flex items-center gap-3 pb-3 shrink-0 flex-wrap">
+        {/* Auto-refresh toggle */}
+        <div className="flex items-center gap-1.5">
+          <span className="text-sm text-muted-foreground">
+            {t('bots.enableAutoRefresh')}
+          </span>
+          <Switch
+            checked={autoFlush}
+            onCheckedChange={(v) => setAutoFlush(v)}
+          />
+        </div>
+
+        {/* Level filter */}
+        <div className="flex items-center gap-1.5">
+          <span className="text-sm text-muted-foreground">
+            {t('bots.logLevel')}
+          </span>
           <Popover>
             <PopoverTrigger asChild>
               <Button
                 variant="outline"
                 size="sm"
-              className="w-[180px] flex items-center justify-between"
+                className="w-[160px] justify-between"
               >
-              <span className="text-sm truncate flex-1 text-left">
-                {getDisplayText()}
-              </span>
-              <ChevronDownIcon className="ml-2 h-4 w-4 flex-shrink-0" />
+                <span className="text-sm truncate">{getDisplayText()}</span>
+                <ChevronDownIcon className="size-3.5 shrink-0 opacity-50" />
               </Button>
             </PopoverTrigger>
-          <PopoverContent className="w-[180px] p-2">
+            <PopoverContent className="w-[160px] p-2">
               <div className="flex flex-col gap-2">
                 {logLevels.map((level) => (
-                <div key={level.value} className="flex items-center space-x-2">
+                  <div
+                    key={level.value}
+                    className="flex items-center space-x-2"
+                  >
                     <Checkbox
                       id={level.value}
                       checked={selectedLevels.includes(level.value)}
@@ -199,7 +200,7 @@ export function BotLogListComponent({ botId }: { botId: string }) {
                     />
                     <label
                       htmlFor={level.value}
-                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+                      className="text-sm font-medium leading-none cursor-pointer"
                     >
                       {level.label}
                     </label>
@@ -208,20 +209,26 @@ export function BotLogListComponent({ botId }: { botId: string }) {
               </div>
             </PopoverContent>
           </Popover>
+        </div>
+
+        {/* Link to detailed logs */}
         <Button
           variant="outline"
           size="sm"
-          className="ml-4 flex items-center gap-1"
+          className="gap-1"
           onClick={() => router.push(`/home/monitoring?botId=${botId}`)}
         >
-          <ExternalLink className="h-4 w-4" />
+          <ExternalLink className="size-3.5" />
           <span className="text-sm">{t('bots.viewDetailedLogs')}</span>
         </Button>
       </div>
 
-      {filteredLogs.map((botLog) => {
-        return <BotLogCard botLog={botLog} key={botLog.seq_id} />;
-      })}
+      {/* Log cards */}
+      <div className="flex flex-col gap-2">
+        {filteredLogs.map((botLog) => (
+          <BotLogCard botLog={botLog} key={botLog.seq_id} />
+        ))}
+      </div>
     </div>
   );
 }

web/src/app/home/bots/components/bot-log/view/botLog.module.css

@@ -1,142 +0,0 @@
-.botLogListContainer {
-  width: 100%;
-  max-width: 100%;
-  min-height: 10rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  overflow-y: auto;
-  overflow-x: hidden;
-  box-sizing: border-box;
-}
-
-.botLogCardContainer {
-  width: 100%;
-  max-width: 100%;
-  background-color: #fff;
-  border-radius: 8px;
-  border: 1px solid #e2e8f0;
-  padding: 1rem;
-  margin-bottom: 0.75rem;
-  transition: all 0.2s ease;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-.botLogCardContainer:hover {
-  border-color: #cbd5e1;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-}
-
-:global(.dark) .botLogCardContainer {
-  background-color: #1f1f22;
-  border: 1px solid #2a2a2e;
-}
-
-:global(.dark) .botLogCardContainer:hover {
-  border-color: #3a3a3e;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-}
-
-.listHeader {
-  width: 100%;
-  height: 2.5rem;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 0.5rem;
-}
-
-.tag {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 0.25rem;
-  height: auto;
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  background-color: #dbeafe;
-  color: #1e40af;
-  font-size: 0.75rem;
-  font-weight: 500;
-  max-width: 16rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-}
-
-:global(.dark) .tag {
-  background-color: #1e3a8a;
-  color: #93c5fd;
-}
-
-.chatTag {
-  color: #4b5563;
-  background-color: #f3f4f6;
-  text-transform: none;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.chatTag:hover {
-  background-color: #e5e7eb;
-}
-
-:global(.dark) .chatTag {
-  color: #9ca3af;
-  background-color: #374151;
-}
-
-:global(.dark) .chatTag:hover {
-  background-color: #4b5563;
-}
-
-.chatId {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
-    'Courier New', monospace;
-  font-size: 0.7rem;
-}
-
-.cardTitleContainer {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.5rem;
-}
-
-.cardText {
-  color: #1e293b;
-  font-size: 0.875rem;
-  line-height: 1.7;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  word-break: break-all;
-  overflow-wrap: anywhere;
-  hyphens: auto;
-  max-width: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', sans-serif;
-}
-
-:global(.dark) .cardText {
-  color: #e2e8f0;
-}
-
-.timestamp {
-  color: #64748b;
-  font-size: 0.75rem;
-  white-space: nowrap;
-}
-
-:global(.dark) .timestamp {
-  color: #64748b;
-}

web/src/app/home/bots/components/bot-session/BotSessionMonitor.tsx

@@ -1,10 +1,16 @@
 'use client';
 
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { Copy, Check } from 'lucide-react';
 import {
@@ -49,11 +55,18 @@ interface SessionMessage {
   role?: string | null;
 }
 
+export interface BotSessionMonitorHandle {
+  refreshSessions: () => Promise<void>;
+}
+
 interface BotSessionMonitorProps {
   botId: string;
 }
 
-export default function BotSessionMonitor({ botId }: BotSessionMonitorProps) {
+const BotSessionMonitor = forwardRef<
+  BotSessionMonitorHandle,
+  BotSessionMonitorProps
+>(function BotSessionMonitor({ botId }, ref) {
   const { t } = useTranslation();
   const [sessions, setSessions] = useState<SessionInfo[]>([]);
   const [selectedSessionId, setSelectedSessionId] = useState<string | null>(
@@ -97,6 +110,14 @@ export default function BotSessionMonitor({ botId }: BotSessionMonitorProps) {
     }
   }, [botId]);
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      refreshSessions: loadSessions,
+    }),
+    [loadSessions],
+  );
+
   const loadMessages = useCallback(async (sessionId: string) => {
     setLoadingMessages(true);
     try {
@@ -235,7 +256,7 @@ export default function BotSessionMonitor({ botId }: BotSessionMonitorProps) {
         return (
           <div
             key={index}
-            className="mb-2 pl-2.5 border-l-2 border-gray-300 dark:border-gray-600 opacity-80"
+            className="mb-2 pl-2.5 border-l-2 border-muted-foreground/50 opacity-80"
           >
             <div className="text-sm">
               {quote.origin?.map((comp, idx) =>
@@ -278,9 +299,17 @@ export default function BotSessionMonitor({ botId }: BotSessionMonitorProps) {
     );
   };
 
+  // Backend timestamps may lack timezone indicator; treat as UTC
+  const parseTimestamp = (timestamp: string): Date => {
+    if (!timestamp) return new Date(0);
+    const hasTimezone =
+      timestamp.endsWith('Z') || /[+-]\d{2}:?\d{2}$/.test(timestamp);
+    return new Date(hasTimezone ? timestamp : timestamp + 'Z');
+  };
+
   const formatTime = (timestamp: string): string => {
     if (!timestamp) return '';
-    const date = new Date(timestamp);
+    const date = parseTimestamp(timestamp);
     const hours = date.getHours().toString().padStart(2, '0');
     const minutes = date.getMinutes().toString().padStart(2, '0');
     return `${hours}:${minutes}`;
@@ -288,7 +317,7 @@ export default function BotSessionMonitor({ botId }: BotSessionMonitorProps) {
 
   const formatRelativeTime = (timestamp: string): string => {
     if (!timestamp) return '';
-    const date = new Date(timestamp);
+    const date = parseTimestamp(timestamp);
     const now = new Date();
     const diffMs = now.getTime() - date.getTime();
     const diffMins = Math.floor(diffMs / 60000);
@@ -306,36 +335,9 @@ export default function BotSessionMonitor({ botId }: BotSessionMonitorProps) {
   );
 
   return (
-    <div className="flex h-full min-h-0">
+    <div className="flex h-full min-h-0 rounded-lg border overflow-hidden">
       {/* Left Panel: Session List */}
-      <div className="w-64 flex-shrink-0 border-r flex flex-col min-h-0">
-        {/* Refresh Button */}
-        <div className="px-2 py-2 border-b shrink-0">
-          <Button
-            variant="ghost"
-            className="w-full h-9 text-sm text-muted-foreground"
-            onClick={loadSessions}
-            disabled={loadingSessions}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={2}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className={cn(
-                'w-3.5 h-3.5 mr-1.5',
-                loadingSessions && 'animate-spin',
-              )}
-            >
-              <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2" />
-            </svg>
-            {t('bots.sessionMonitor.refresh')}
-          </Button>
-        </div>
-
+      <div className="w-60 flex-shrink-0 border-r flex flex-col min-h-0">
         {/* Session List */}
         <ScrollArea className="flex-1 min-h-0">
           {loadingSessions && sessions.length === 0 ? (
@@ -347,14 +349,15 @@ export default function BotSessionMonitor({ botId }: BotSessionMonitorProps) {
               {t('bots.sessionMonitor.noSessions')}
             </div>
           ) : (
-            <div className="p-1">
+            <div className="p-1.5">
               {sessions.map((session) => {
                 const isSelected = selectedSessionId === session.session_id;
                 return (
                   <button
                     key={session.session_id}
+                    type="button"
                     className={cn(
-                      'w-full text-left px-3 py-2.5 rounded-md transition-colors',
+                      'w-full text-left px-2.5 py-2 rounded-md transition-colors',
                       isSelected ? 'bg-accent' : 'hover:bg-accent/50',
                     )}
                     onClick={() => setSelectedSessionId(session.session_id)}
@@ -403,20 +406,20 @@ export default function BotSessionMonitor({ botId }: BotSessionMonitorProps) {
       {/* Right Panel: Messages */}
       <div className="flex-1 flex flex-col min-h-0 min-w-0">
         {!selectedSessionId ? (
-          <div className="text-center text-muted-foreground py-12 text-lg flex-1 flex items-center justify-center">
+          <div className="text-center text-muted-foreground text-sm flex-1 flex items-center justify-center">
             {t('bots.sessionMonitor.selectSession')}
           </div>
         ) : (
           <>
             {/* Chat Header */}
-            <div className="px-6 py-3 border-b shrink-0 flex items-center justify-between">
+            <div className="px-4 py-2.5 border-b shrink-0">
               <div className="min-w-0">
                 <div className="text-sm font-medium truncate">
                   {selectedSession?.user_name ||
                     selectedSession?.user_id ||
                     selectedSessionId.slice(0, 20)}
                 </div>
-                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <div className="flex items-center gap-1.5 text-xs text-muted-foreground mt-0.5">
                   {parseSessionType(selectedSessionId) && (
                     <span>{parseSessionType(selectedSessionId)}</span>
                   )}
@@ -433,6 +436,7 @@ export default function BotSessionMonitor({ botId }: BotSessionMonitorProps) {
                         {selectedSession.user_id}
                       </span>
                       <button
+                        type="button"
                         onClick={() => copyUserId(selectedSession.user_id!)}
                         className="inline-flex items-center text-muted-foreground hover:text-foreground transition-colors"
                         title={t('common.copy')}
@@ -462,40 +466,20 @@ export default function BotSessionMonitor({ botId }: BotSessionMonitorProps) {
                   )}
                 </div>
               </div>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="w-8 h-8"
-                onClick={() => loadMessages(selectedSessionId)}
-                disabled={loadingMessages}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth={2}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className={cn('w-4 h-4', loadingMessages && 'animate-spin')}
-                >
-                  <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2" />
-                </svg>
-              </Button>
             </div>
 
-            {/* Messages Area — matches DebugDialog style */}
+            {/* Messages Area */}
             <ScrollArea
               ref={messagesContainerRef}
-              className="flex-1 p-6 overflow-y-auto min-h-0 bg-white dark:bg-black"
+              className="flex-1 px-4 py-4 overflow-y-auto min-h-0"
             >
-              <div className="space-y-6">
+              <div className="space-y-4">
                 {loadingMessages ? (
-                  <div className="text-center text-muted-foreground py-12 text-lg">
+                  <div className="text-center text-muted-foreground py-12 text-sm">
                     {t('bots.sessionMonitor.loading')}
                   </div>
                 ) : messages.length === 0 ? (
-                  <div className="text-center text-muted-foreground py-12 text-lg">
+                  <div className="text-center text-muted-foreground py-12 text-sm">
                     {t('bots.sessionMonitor.noMessages')}
                   </div>
                 ) : (
@@ -511,21 +495,18 @@ export default function BotSessionMonitor({ botId }: BotSessionMonitorProps) {
                       >
                         <div
                           className={cn(
-                            'max-w-3xl px-5 py-3 rounded-2xl',
+                            'max-w-3xl px-4 py-2.5 rounded-2xl text-sm',
                             isUser
-                              ? 'bg-blue-100 dark:bg-blue-900 text-gray-900 dark:text-gray-100 rounded-br-none'
-                              : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-bl-none',
+                              ? 'bg-primary/10 rounded-br-sm'
+                              : 'bg-muted rounded-bl-sm',
                             msg.status === 'error' && 'ring-1 ring-red-400/50',
                           )}
                         >
                           {renderMessageContent(msg)}
-                          {/* Role label + timestamp inside bubble, matching DebugDialog */}
+                          {/* Role label + timestamp */}
                           <div
                             className={cn(
-                              'text-xs mt-2 flex items-center gap-2',
-                              isUser
-                                ? 'text-gray-600 dark:text-gray-300'
-                                : 'text-gray-500 dark:text-gray-400',
+                              'text-[11px] mt-1.5 flex items-center gap-1.5 text-muted-foreground',
                             )}
                           >
                             <span>
@@ -561,4 +542,6 @@ export default function BotSessionMonitor({ botId }: BotSessionMonitorProps) {
       </div>
     </div>
   );
-}
+});
+
+export default BotSessionMonitor;

web/src/app/home/bots/page.tsx

@@ -1,144 +1,21 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-import styles from './botConfig.module.css';
-import { BotCardVO } from '@/app/home/bots/components/bot-card/BotCardVO';
-import BotCard from '@/app/home/bots/components/bot-card/BotCard';
-import CreateCardComponent from '@/app/infra/basic-component/create-card-component/CreateCardComponent';
-import { httpClient } from '@/app/infra/http/HttpClient';
-import { Bot, Adapter } from '@/app/infra/entities/api';
-import { toast } from 'sonner';
+import { useSearchParams } from 'next/navigation';
 import { useTranslation } from 'react-i18next';
-import { extractI18nObject } from '@/i18n/I18nProvider';
-import BotDetailDialog from '@/app/home/bots/BotDetailDialog';
-import { CustomApiError } from '@/app/infra/entities/common';
-import { systemInfo } from '@/app/infra/http';
+import BotDetailContent from './BotDetailContent';
 
 export default function BotConfigPage() {
   const { t } = useTranslation();
-  // 机器人详情dialog
-  const [detailDialogOpen, setDetailDialogOpen] = useState<boolean>(false);
-  const [botList, setBotList] = useState<BotCardVO[]>([]);
-  const [selectedBotId, setSelectedBotId] = useState<string>('');
+  const searchParams = useSearchParams();
+  const detailId = searchParams.get('id');
 
-  useEffect(() => {
-    getBotList();
-  }, []);
-
-  async function getBotList() {
-    const adapterListResp = await httpClient.getAdapters();
-    const adapterList = adapterListResp.adapters.map((adapter: Adapter) => {
-      return {
-        label: extractI18nObject(adapter.label),
-        value: adapter.name,
-      };
-    });
-
-    httpClient
-      .getBots()
-      .then((resp) => {
-        const botList: BotCardVO[] = resp.bots.map((bot: Bot) => {
-          return new BotCardVO({
-            id: bot.uuid || '',
-            iconURL: httpClient.getAdapterIconURL(bot.adapter),
-            name: bot.name,
-            description: bot.description,
-            adapter: bot.adapter,
-            adapterConfig: bot.adapter_config,
-            adapterLabel:
-              adapterList.find((item) => item.value === bot.adapter)?.label ||
-              bot.adapter.substring(0, 10),
-            usePipelineName: bot.use_pipeline_name || '',
-            enable: bot.enable || false,
-          });
-        });
-        setBotList(botList);
-      })
-      .catch((err) => {
-        console.error('get bot list error', err);
-        toast.error(t('bots.getBotListError') + (err as CustomApiError).msg);
-      });
-  }
-
-  function handleCreateBotClick() {
-    const maxBots = systemInfo.limitation?.max_bots ?? -1;
-    if (maxBots >= 0 && botList.length >= maxBots) {
-      toast.error(t('limitation.maxBotsReached', { max: maxBots }));
-      return;
-    }
-    setSelectedBotId('');
-    setDetailDialogOpen(true);
-  }
-
-  function selectBot(botUUID: string) {
-    setSelectedBotId(botUUID);
-    setDetailDialogOpen(true);
-  }
-
-  function handleFormSubmit() {
-    getBotList();
-    // setDetailDialogOpen(false);
-  }
-
-  function handleFormCancel() {
-    setDetailDialogOpen(false);
-  }
-
-  function handleBotDeleted() {
-    getBotList();
-    setDetailDialogOpen(false);
-  }
-
-  function handleNewBotCreated(botId: string) {
-    getBotList();
-    setSelectedBotId(botId);
+  if (detailId) {
+    return <BotDetailContent id={detailId} />;
   }
 
   return (
-    <div>
-      <BotDetailDialog
-        open={detailDialogOpen}
-        onOpenChange={setDetailDialogOpen}
-        botId={selectedBotId || undefined}
-        onFormSubmit={handleFormSubmit}
-        onFormCancel={handleFormCancel}
-        onBotDeleted={handleBotDeleted}
-        onNewBotCreated={handleNewBotCreated}
-      />
-
-      {/* 注意：其余的返回内容需要保持在Spin组件外部 */}
-      <div className={`${styles.botListContainer}`}>
-        <CreateCardComponent
-          width={'100%'}
-          height={'10rem'}
-          plusSize={'90px'}
-          onClick={handleCreateBotClick}
-        />
-        {botList.map((cardVO) => {
-          return (
-            <div
-              key={cardVO.id}
-              onClick={() => {
-                selectBot(cardVO.id);
-              }}
-            >
-              <BotCard
-                botCardVO={cardVO}
-                setBotEnableCallback={(id, enable) => {
-                  setBotList(
-                    botList.map((bot) => {
-                      if (bot.id === id) {
-                        return { ...bot, enable: enable };
-                      }
-                      return bot;
-                    }),
-                  );
-                }}
-              />
-            </div>
-          );
-        })}
-      </div>
+    <div className="flex h-full items-center justify-center text-muted-foreground">
+      <p>{t('bots.selectFromSidebar')}</p>
     </div>
   );
 }

web/src/app/home/components/home-sidebar/HomeSidebar.module.css

@@ -1,159 +0,0 @@
-.sidebarContainer {
-  box-sizing: border-box;
-  width: 11rem;
-  height: 100vh;
-  background-color: #eee;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding-block: 1rem;
-  padding-left: 0.4rem;
-  user-select: none;
-  /* box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); */
-}
-
-:global(.dark) .sidebarContainer {
-  background-color: #0a0a0b !important;
-}
-
-.langbotIconContainer {
-  width: 200px;
-  height: 70px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 0.8rem;
-}
-
-.langbotIcon {
-  width: 2.8rem;
-  height: 2.8rem;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-}
-
-:global(.dark) .langbotIcon {
-  box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.1);
-}
-
-.langbotTextContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: 0.1rem;
-}
-
-.langbotText {
-  font-size: 1.4rem;
-  font-weight: 500;
-  color: #1a1a1a;
-}
-
-:global(.dark) .langbotText {
-  font-size: 1.4rem;
-  font-weight: 500;
-  color: #f0f0f0 !important;
-}
-
-.langbotVersion {
-  font-size: 0.8rem;
-  font-weight: 700;
-  color: #6c6c6c;
-}
-
-:global(.dark) .langbotVersion {
-  font-size: 0.8rem;
-  font-weight: 700;
-  color: #a0a0a0 !important;
-}
-
-.sidebarTopContainer {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.8rem;
-}
-
-.sidebarItemsContainer {
-  display: flex;
-  flex-direction: column;
-  gap: 0.8rem;
-}
-
-.sidebarChildContainer {
-  width: 9.8rem;
-  height: 3rem;
-  padding-left: 1.6rem;
-  font-size: 1rem;
-  border-radius: 12px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  cursor: pointer;
-  gap: 0.5rem;
-  transition: all 0.2s ease;
-  /* background-color: aqua; */
-}
-
-.sidebarSelected {
-  background-color: #2288ee;
-  color: white;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-}
-
-:global(.dark) .sidebarSelected {
-  background-color: #2288ee;
-  color: white;
-  box-shadow: 0 0 10px 0 rgba(34, 136, 238, 0.3);
-}
-
-.sidebarUnselected {
-  color: #6c6c6c;
-}
-
-:global(.dark) .sidebarUnselected {
-  color: #a0a0a0 !important;
-}
-
-.sidebarUnselected:hover {
-  background-color: rgba(34, 136, 238, 0.1);
-  color: #2288ee;
-}
-
-:global(.dark) .sidebarUnselected:hover {
-  background-color: rgba(34, 136, 238, 0.2);
-  color: #66baff;
-}
-
-.sidebarChildIcon {
-  width: 20px;
-  height: 20px;
-  background-color: rgba(96, 149, 209, 0);
-}
-
-.sidebarChildName {
-  color: inherit;
-}
-
-.sidebarBottomContainer {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin-top: auto;
-  padding-bottom: 1rem;
-}
-
-.sidebarBottomChildContainer {
-  width: 100%;
-  height: 50px;
-  display: flex;
-  flex-direction: row;
-}

web/src/app/home/components/home-sidebar/HomeSidebarChild.tsx

@@ -1,6 +1,7 @@
-import styles from './HomeSidebar.module.css';
 import { I18nObject } from '@/app/infra/entities/common';
 
+export type SidebarSection = 'home' | 'extensions';
+
 export interface ISidebarChildVO {
   id: string;
   icon: React.ReactNode;
@@ -8,6 +9,7 @@ export interface ISidebarChildVO {
   route: string;
   description: string;
   helpLink: I18nObject;
+  section?: SidebarSection;
 }
 
 export class SidebarChildVO {
@@ -17,6 +19,7 @@ export class SidebarChildVO {
   route: string;
   description: string;
   helpLink: I18nObject;
+  section: SidebarSection;
 
   constructor(props: ISidebarChildVO) {
     this.id = props.id;
@@ -25,29 +28,6 @@ export class SidebarChildVO {
     this.route = props.route;
     this.description = props.description;
     this.helpLink = props.helpLink;
+    this.section = props.section ?? 'home';
   }
 }
-
-export function SidebarChild({
-  icon,
-  name,
-  isSelected,
-  onClick,
-}: {
-  icon: React.ReactNode;
-  name: string;
-  isSelected: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <div
-      className={`${styles.sidebarChildContainer} ${
-        isSelected ? styles.sidebarSelected : styles.sidebarUnselected
-      }`}
-      onClick={onClick}
-    >
-      <div className={`${styles.sidebarChildIcon}`}>{icon}</div>
-      <span className={`${styles.sidebarChildName}`}>{name}</span>
-    </div>
-  );
-}

web/src/app/home/components/home-sidebar/SidebarDataContext.tsx

@@ -0,0 +1,195 @@
+'use client';
+
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+} from 'react';
+import { httpClient, getCloudServiceClientSync } from '@/app/infra/http';
+import { extractI18nObject } from '@/i18n/I18nProvider';
+import { isNewerVersion } from '@/app/utils/versionCompare';
+
+// Lightweight entity item for sidebar display
+export interface SidebarEntityItem {
+  id: string;
+  name: string;
+  emoji?: string;
+  iconURL?: string;
+  updatedAt?: string; // ISO timestamp for sorting by most recently edited
+  // Plugin-specific fields
+  installSource?: string;
+  installInfo?: Record<string, unknown>;
+  hasUpdate?: boolean;
+  debug?: boolean;
+}
+
+// Entity lists and refresh functions exposed via context
+export interface SidebarDataContextValue {
+  bots: SidebarEntityItem[];
+  pipelines: SidebarEntityItem[];
+  knowledgeBases: SidebarEntityItem[];
+  plugins: SidebarEntityItem[];
+  refreshBots: () => Promise<void>;
+  refreshPipelines: () => Promise<void>;
+  refreshKnowledgeBases: () => Promise<void>;
+  refreshPlugins: () => Promise<void>;
+  refreshAll: () => Promise<void>;
+  // Breadcrumb: entity name shown when viewing a detail page
+  detailEntityName: string | null;
+  setDetailEntityName: (name: string | null) => void;
+}
+
+const SidebarDataContext = createContext<SidebarDataContextValue | null>(null);
+
+export function SidebarDataProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [bots, setBots] = useState<SidebarEntityItem[]>([]);
+  const [pipelines, setPipelines] = useState<SidebarEntityItem[]>([]);
+  const [knowledgeBases, setKnowledgeBases] = useState<SidebarEntityItem[]>([]);
+  const [plugins, setPlugins] = useState<SidebarEntityItem[]>([]);
+  const [detailEntityName, setDetailEntityName] = useState<string | null>(null);
+
+  const refreshBots = useCallback(async () => {
+    try {
+      const resp = await httpClient.getBots();
+      setBots(
+        resp.bots.map((bot) => ({
+          id: bot.uuid || '',
+          name: bot.name,
+          iconURL: httpClient.getAdapterIconURL(bot.adapter),
+          updatedAt: bot.updated_at,
+        })),
+      );
+    } catch (error) {
+      console.error('Failed to fetch bots for sidebar:', error);
+    }
+  }, []);
+
+  const refreshPipelines = useCallback(async () => {
+    try {
+      const resp = await httpClient.getPipelines();
+      setPipelines(
+        resp.pipelines.map((p) => ({
+          id: p.uuid || '',
+          name: p.name,
+          emoji: p.emoji,
+          updatedAt: p.updated_at,
+        })),
+      );
+    } catch (error) {
+      console.error('Failed to fetch pipelines for sidebar:', error);
+    }
+  }, []);
+
+  const refreshKnowledgeBases = useCallback(async () => {
+    try {
+      const resp = await httpClient.getKnowledgeBases();
+      setKnowledgeBases(
+        resp.bases.map((kb) => ({
+          id: kb.uuid || '',
+          name: kb.name,
+          emoji: kb.emoji,
+          updatedAt: kb.updated_at,
+        })),
+      );
+    } catch (error) {
+      console.error('Failed to fetch knowledge bases for sidebar:', error);
+    }
+  }, []);
+
+  const refreshPlugins = useCallback(async () => {
+    try {
+      const [pluginsResp, marketplaceResp] = await Promise.all([
+        httpClient.getPlugins(),
+        getCloudServiceClientSync()
+          .getMarketplacePlugins(1, 100)
+          .catch(() => ({ plugins: [] })),
+      ]);
+
+      // Build marketplace version lookup: "author/name" -> latest_version
+      const marketplaceVersions = new Map<string, string>();
+      for (const mp of marketplaceResp.plugins) {
+        if (mp.latest_version) {
+          marketplaceVersions.set(`${mp.author}/${mp.name}`, mp.latest_version);
+        }
+      }
+
+      setPlugins(
+        pluginsResp.plugins.map((plugin) => {
+          const meta = plugin.manifest.manifest.metadata;
+          const author = meta.author ?? '';
+          const name = meta.name;
+          const compositeKey = `${author}/${name}`;
+          const installedVersion = meta.version ?? '';
+
+          let hasUpdate = false;
+          if (plugin.install_source === 'marketplace') {
+            const latestVersion = marketplaceVersions.get(compositeKey);
+            if (latestVersion) {
+              hasUpdate = isNewerVersion(latestVersion, installedVersion);
+            }
+          }
+
+          return {
+            id: compositeKey,
+            name: extractI18nObject(meta.label),
+            iconURL: httpClient.getPluginIconURL(author, name),
+            installSource: plugin.install_source,
+            installInfo: plugin.install_info,
+            hasUpdate,
+            debug: plugin.debug,
+          };
+        }),
+      );
+    } catch (error) {
+      console.error('Failed to fetch plugins for sidebar:', error);
+    }
+  }, []);
+
+  const refreshAll = useCallback(async () => {
+    await Promise.all([
+      refreshBots(),
+      refreshPipelines(),
+      refreshKnowledgeBases(),
+      refreshPlugins(),
+    ]);
+  }, [refreshBots, refreshPipelines, refreshKnowledgeBases, refreshPlugins]);
+
+  // Fetch all entity lists on mount
+  useEffect(() => {
+    refreshAll();
+  }, [refreshAll]);
+
+  return (
+    <SidebarDataContext.Provider
+      value={{
+        bots,
+        pipelines,
+        knowledgeBases,
+        plugins,
+        refreshBots,
+        refreshPipelines,
+        refreshKnowledgeBases,
+        refreshPlugins,
+        refreshAll,
+        detailEntityName,
+        setDetailEntityName,
+      }}
+    >
+      {children}
+    </SidebarDataContext.Provider>
+  );
+}
+
+export function useSidebarData(): SidebarDataContextValue {
+  const ctx = useContext(SidebarDataContext);
+  if (!ctx) {
+    throw new Error('useSidebarData must be used within a SidebarDataProvider');
+  }
+  return ctx;
+}

web/src/app/home/components/home-sidebar/sidbarConfigList.tsx

@@ -1,5 +1,4 @@
 import { SidebarChildVO } from '@/app/home/components/home-sidebar/HomeSidebarChild';
-import styles from './HomeSidebar.module.css';
 import i18n from '@/i18n';
 
 const t = (key: string) => {
@@ -7,12 +6,32 @@ const t = (key: string) => {
 };
 
 export const sidebarConfigList = [
+  // ── Home section ──
+  new SidebarChildVO({
+    id: 'monitoring',
+    name: t('monitoring.title'),
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+      >
+        <path d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM4 5V19H20V5H4ZM6 7H18V9H6V7ZM6 11H18V13H6V11ZM6 15H12V17H6V15Z"></path>
+      </svg>
+    ),
+    route: '/home/monitoring',
+    description: t('monitoring.description'),
+    helpLink: {
+      en_US: '',
+      zh_Hans: '',
+    },
+    section: 'home',
+  }),
   new SidebarChildVO({
     id: 'bots',
     name: t('bots.title'),
     icon: (
       <svg
-        className={`${styles.sidebarChildIcon}`}
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
         fill="currentColor"
@@ -27,13 +46,13 @@ export const sidebarConfigList = [
       zh_Hans: 'https://docs.langbot.app/zh/usage/platforms/readme',
       ja_JP: 'https://docs.langbot.app/ja/usage/platforms/readme',
     },
+    section: 'home',
   }),
   new SidebarChildVO({
     id: 'pipelines',
     name: t('pipelines.title'),
     icon: (
       <svg
-        className={`${styles.sidebarChildIcon}`}
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
         fill="currentColor"
@@ -48,26 +67,7 @@ export const sidebarConfigList = [
       zh_Hans: 'https://docs.langbot.app/zh/usage/pipelines/readme',
       ja_JP: 'https://docs.langbot.app/ja/usage/pipelines/readme',
     },
-  }),
-  new SidebarChildVO({
-    id: 'monitoring',
-    name: t('monitoring.title'),
-    icon: (
-      <svg
-        className={`${styles.sidebarChildIcon}`}
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-      >
-        <path d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM4 5V19H20V5H4ZM6 7H18V9H6V7ZM6 11H18V13H6V11ZM6 15H12V17H6V15Z"></path>
-      </svg>
-    ),
-    route: '/home/monitoring',
-    description: t('monitoring.description'),
-    helpLink: {
-      en_US: '',
-      zh_Hans: '',
-    },
+    section: 'home',
   }),
   new SidebarChildVO({
     id: 'knowledge',
@@ -88,13 +88,15 @@ export const sidebarConfigList = [
       zh_Hans: 'https://docs.langbot.app/zh/usage/knowledge/readme',
       ja_JP: 'https://docs.langbot.app/ja/usage/knowledge/readme',
     },
+    section: 'home',
   }),
+
+  // ── Extensions section ──
   new SidebarChildVO({
     id: 'plugins',
-    name: t('plugins.title'),
+    name: t('sidebar.installedPlugins'),
     icon: (
       <svg
-        className={`${styles.sidebarChildIcon}`}
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
         fill="currentColor"
@@ -109,5 +111,47 @@ export const sidebarConfigList = [
       zh_Hans: 'https://docs.langbot.app/zh/usage/plugin/plugin-intro',
       ja_JP: 'https://docs.langbot.app/ja/usage/plugin/plugin-intro',
     },
+    section: 'extensions',
+  }),
+  new SidebarChildVO({
+    id: 'market',
+    name: t('sidebar.pluginMarket'),
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+      >
+        <path d="M21 13.242V20H22V22H2V20H3V13.242C1.79401 12.435 1 11.0602 1 9.5C1 8.67286 1.25027 7.90335 1.67755 7.2612L4.5547 2.36088C4.80513 1.93859 5.26028 1.67578 5.76 1.67578H18.24C18.7397 1.67578 19.1949 1.93859 19.4453 2.36088L22.3225 7.2612C22.7497 7.90335 23 8.67286 23 9.5C23 11.0602 22.206 12.435 21 13.242ZM19 13.972C18.4511 14.0706 17.8794 14.0706 17.3305 13.972C16.1644 13.7566 15.1377 13.0712 14.5 12.1C13.8623 13.0712 12.8356 13.7566 11.6695 13.972C11.1206 14.0706 10.5489 14.0706 10 13.972C9.45108 14.0706 8.87938 14.0706 8.33053 13.972C7.16437 13.7566 6.13771 13.0712 5.5 12.1C4.86229 13.0712 3.83563 13.7566 2.66947 13.972C2.44883 14.0124 2.22434 14.0352 2 14.0404V20H5V15H10V20H19V13.972Z"></path>
+      </svg>
+    ),
+    route: '/home/market',
+    description: t('plugins.description'),
+    helpLink: {
+      en_US: 'https://docs.langbot.app/en/usage/plugin/plugin-intro',
+      zh_Hans: 'https://docs.langbot.app/zh/usage/plugin/plugin-intro',
+      ja_JP: 'https://docs.langbot.app/ja/usage/plugin/plugin-intro',
+    },
+    section: 'extensions',
+  }),
+  new SidebarChildVO({
+    id: 'mcp',
+    name: t('sidebar.mcpServers'),
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+      >
+        <path d="M4.5 7.65311V16.3469L12 20.689L19.5 16.3469V7.65311L12 3.311L4.5 7.65311ZM12 1L21.5 6.5V17.5L12 23L2.5 17.5V6.5L12 1ZM6.49896 9.97065L11 12.5765V17.625H13V12.5765L17.501 9.97066L16.499 8.2398L12 10.8445L7.50104 8.2398L6.49896 9.97065Z"></path>
+      </svg>
+    ),
+    route: '/home/mcp',
+    description: t('mcp.title'),
+    helpLink: {
+      en_US: '',
+      zh_Hans: '',
+    },
+    section: 'extensions',
   }),
 ];

web/src/app/home/components/home-titlebar/HomeTitleBar.tsx

@@ -1,39 +0,0 @@
-import { extractI18nObject } from '@/i18n/I18nProvider';
-import styles from './HomeTittleBar.module.css';
-import { I18nObject } from '@/app/infra/entities/common';
-
-export default function HomeTitleBar({
-  title,
-  subtitle,
-  helpLink,
-}: {
-  title: string;
-  subtitle: string;
-  helpLink: I18nObject;
-}) {
-  return (
-    <div className={`${styles.titleBarContainer}`}>
-      <div className={`${styles.titleText}`}>{title}</div>
-      <div className={`${styles.subtitleText}`}>
-        {subtitle}
-        <span className={`${styles.helpLink}`}>
-          <div
-            onClick={() => {
-              window.open(extractI18nObject(helpLink), '_blank');
-            }}
-            className="cursor-pointer"
-          >
-            <svg
-              className="w-[1rem] h-[1rem]"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
-              <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM13 13.3551V14H11V12.5C11 11.9477 11.4477 11.5 12 11.5C12.8284 11.5 13.5 10.8284 13.5 10C13.5 9.17157 12.8284 8.5 12 8.5C11.2723 8.5 10.6656 9.01823 10.5288 9.70577L8.56731 9.31346C8.88637 7.70919 10.302 6.5 12 6.5C13.933 6.5 15.5 8.067 15.5 10C15.5 11.5855 14.4457 12.9248 13 13.3551Z"></path>
-            </svg>
-          </div>
-        </span>
-      </div>
-    </div>
-  );
-}

web/src/app/home/components/home-titlebar/HomeTittleBar.module.css

@@ -1,44 +0,0 @@
-.titleBarContainer {
-  width: 100%;
-  padding-top: 1rem;
-  height: 4rem;
-  opacity: 1;
-  font-size: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-}
-
-.titleText {
-  margin-left: 3.2rem;
-  font-size: 1.4rem;
-  font-weight: 500;
-  color: #585858;
-}
-
-:global(.dark) .titleText {
-  color: #e0e0e0;
-}
-
-.subtitleText {
-  margin-left: 3.2rem;
-  font-size: 0.8rem;
-  color: #808080;
-  display: flex;
-  align-items: center;
-}
-
-:global(.dark) .subtitleText {
-  color: #b0b0b0;
-}
-
-.helpLink {
-  margin-left: 0.2rem;
-  font-size: 0.8rem;
-  color: #8b8b8b;
-}
-
-:global(.dark) .helpLink {
-  color: #a0a0a0;
-}

web/src/app/home/knowledge/KBDetailContent.tsx

@@ -0,0 +1,246 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import KBForm from '@/app/home/knowledge/components/kb-form/KBForm';
+import KBDoc from '@/app/home/knowledge/components/kb-docs/KBDoc';
+import KBRetrieveGeneric from '@/app/home/knowledge/components/kb-retrieve/KBRetrieveGeneric';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
+import { useTranslation } from 'react-i18next';
+import { KnowledgeBase } from '@/app/infra/entities/api';
+import { CustomApiError } from '@/app/infra/entities/common';
+import { toast } from 'sonner';
+import { FileText, FolderOpen, Search } from 'lucide-react';
+
+export default function KBDetailContent({ id }: { id: string }) {
+  const isCreateMode = id === 'new';
+  const router = useRouter();
+  const { t } = useTranslation();
+  const { refreshKnowledgeBases, knowledgeBases, setDetailEntityName } =
+    useSidebarData();
+
+  // Set breadcrumb entity name
+  useEffect(() => {
+    if (isCreateMode) {
+      setDetailEntityName(t('knowledge.createKnowledgeBase'));
+    } else {
+      const kb = knowledgeBases.find((k) => k.id === id);
+      setDetailEntityName(kb?.name ?? id);
+    }
+    return () => setDetailEntityName(null);
+  }, [id, isCreateMode, knowledgeBases, setDetailEntityName, t]);
+
+  const [activeTab, setActiveTab] = useState('metadata');
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [kbInfo, setKbInfo] = useState<KnowledgeBase | null>(null);
+
+  const loadKbInfo = useCallback(
+    async (kbId: string) => {
+      try {
+        const resp = await httpClient.getKnowledgeBase(kbId);
+        setKbInfo(resp.base);
+      } catch (e) {
+        console.error('Failed to load KB info:', e);
+        toast.error(
+          t('knowledge.loadKnowledgeBaseFailed') + (e as CustomApiError).msg,
+        );
+      }
+    },
+    [t],
+  );
+
+  // Load KB info for determining capabilities (e.g. doc_ingestion)
+  useEffect(() => {
+    if (!isCreateMode) {
+      loadKbInfo(id);
+    }
+  }, [id, isCreateMode, loadKbInfo]);
+
+  const hasDocumentCapability = (): boolean => {
+    if (!kbInfo || !kbInfo.knowledge_engine) return false;
+    return (
+      kbInfo.knowledge_engine.capabilities?.includes('doc_ingestion') ?? false
+    );
+  };
+
+  function handleKbDeleted() {
+    refreshKnowledgeBases();
+    router.push('/home/knowledge');
+  }
+
+  function handleNewKbCreated(newKbId: string) {
+    refreshKnowledgeBases();
+    // Navigate to the newly created KB's detail view via query param
+    router.push(`/home/knowledge?id=${encodeURIComponent(newKbId)}`);
+  }
+
+  function handleKbUpdated() {
+    refreshKnowledgeBases();
+    loadKbInfo(id);
+  }
+
+  async function confirmDelete() {
+    try {
+      await httpClient.deleteKnowledgeBase(id);
+      setShowDeleteConfirm(false);
+      handleKbDeleted();
+    } catch (e) {
+      toast.error(
+        t('knowledge.deleteKnowledgeBaseFailed') + (e as CustomApiError).msg,
+      );
+    }
+  }
+
+  const retrieveFunction = async (kbId: string, query: string) => {
+    return await httpClient.retrieveKnowledgeBase(kbId, query);
+  };
+
+  // Create mode: simple form layout
+  if (isCreateMode) {
+    return (
+      <div className="flex h-full flex-col">
+        <div className="flex items-center gap-3 pb-4 shrink-0">
+          <h1 className="text-xl font-semibold">
+            {t('knowledge.createKnowledgeBase')}
+          </h1>
+        </div>
+
+        <div className="flex-1 overflow-y-auto min-h-0">
+          <div className="mx-auto max-w-2xl space-y-6">
+            <KBForm
+              initKbId={undefined}
+              onNewKbCreated={handleNewKbCreated}
+              onKbUpdated={handleKbUpdated}
+            />
+
+            <div className="flex justify-end gap-2 pb-4">
+              <Button type="submit" form="kb-form">
+                {t('common.submit')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Edit mode: tabbed layout with metadata, documents (conditional), retrieve
+  return (
+    <>
+      <div className="flex h-full flex-col">
+        <div className="flex items-center gap-3 pb-4 shrink-0">
+          <h1 className="text-xl font-semibold">
+            {t('knowledge.editKnowledgeBase')}
+          </h1>
+        </div>
+
+        <Tabs
+          key={id}
+          value={activeTab}
+          onValueChange={setActiveTab}
+          className="flex flex-1 flex-col min-h-0"
+        >
+          <TabsList className="shrink-0">
+            <TabsTrigger value="metadata" className="gap-1.5">
+              <FileText className="size-3.5" />
+              {t('knowledge.metadata')}
+            </TabsTrigger>
+            {hasDocumentCapability() && (
+              <TabsTrigger value="documents" className="gap-1.5">
+                <FolderOpen className="size-3.5" />
+                {t('knowledge.documents')}
+              </TabsTrigger>
+            )}
+            <TabsTrigger value="retrieve" className="gap-1.5">
+              <Search className="size-3.5" />
+              {t('knowledge.retrieve')}
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent
+            value="metadata"
+            className="flex-1 min-h-0 overflow-y-auto mt-4"
+          >
+            <div className="mx-auto max-w-2xl">
+              <KBForm
+                initKbId={id}
+                onNewKbCreated={handleNewKbCreated}
+                onKbUpdated={handleKbUpdated}
+              />
+
+              <div className="flex justify-end gap-2 mt-6 pb-4">
+                <Button
+                  type="button"
+                  variant="destructive"
+                  onClick={() => setShowDeleteConfirm(true)}
+                >
+                  {t('common.delete')}
+                </Button>
+                <Button type="submit" form="kb-form">
+                  {t('common.save')}
+                </Button>
+              </div>
+            </div>
+          </TabsContent>
+
+          {hasDocumentCapability() && (
+            <TabsContent
+              value="documents"
+              className="flex-1 min-h-0 overflow-y-auto mt-4"
+            >
+              <KBDoc
+                kbId={id}
+                ragEngineName={kbInfo?.knowledge_engine?.name}
+                ragEngineCapabilities={kbInfo?.knowledge_engine?.capabilities}
+              />
+            </TabsContent>
+          )}
+
+          <TabsContent
+            value="retrieve"
+            className="flex-1 min-h-0 overflow-y-auto mt-4"
+          >
+            <KBRetrieveGeneric kbId={id} retrieveFunction={retrieveFunction} />
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* Delete confirmation dialog */}
+      <Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t('common.confirmDelete')}</DialogTitle>
+            <DialogDescription className="sr-only">
+              {t('knowledge.deleteKnowledgeBaseConfirmation')}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-4">
+            {t('knowledge.deleteKnowledgeBaseConfirmation')}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setShowDeleteConfirm(false)}
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button variant="destructive" onClick={confirmDelete}>
+              {t('common.confirmDelete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

web/src/app/home/knowledge/KBDetailDialog.tsx

@@ -1,305 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from '@/components/ui/dialog';
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-} from '@/components/ui/sidebar';
-import { Button } from '@/components/ui/button';
-import { useTranslation } from 'react-i18next';
-import { httpClient } from '@/app/infra/http/HttpClient';
-import { KnowledgeBase } from '@/app/infra/entities/api';
-import { CustomApiError } from '@/app/infra/entities/common';
-import { toast } from 'sonner';
-import KBForm from '@/app/home/knowledge/components/kb-form/KBForm';
-import KBDoc from '@/app/home/knowledge/components/kb-docs/KBDoc';
-import KBRetrieveGeneric from '@/app/home/knowledge/components/kb-retrieve/KBRetrieveGeneric';
-
-interface KBDetailDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  kbId?: string;
-  onFormCancel: () => void;
-  onKbDeleted: () => void;
-  onNewKbCreated: (kbId: string) => void;
-  onKbUpdated: (kbId: string) => void;
-}
-
-export default function KBDetailDialog({
-  open,
-  onOpenChange,
-  kbId: propKbId,
-  onFormCancel,
-  onKbDeleted,
-  onNewKbCreated,
-  onKbUpdated,
-}: KBDetailDialogProps) {
-  const { t } = useTranslation();
-  const [kbId, setKbId] = useState<string | undefined>(propKbId);
-  const [activeMenu, setActiveMenu] = useState('metadata');
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-  const [kbInfo, setKbInfo] = useState<KnowledgeBase | null>(null);
-
-  useEffect(() => {
-    setKbId(propKbId);
-    setActiveMenu('metadata');
-    if (propKbId) {
-      loadKbInfo(propKbId);
-    } else {
-      setKbInfo(null);
-    }
-  }, [propKbId, open]);
-
-  async function loadKbInfo(id: string) {
-    try {
-      const resp = await httpClient.getKnowledgeBase(id);
-      setKbInfo(resp.base);
-    } catch (e) {
-      console.error('Failed to load KB info:', e);
-      toast.error(
-        t('knowledge.loadKnowledgeBaseFailed') + (e as CustomApiError).msg,
-      );
-    }
-  }
-
-  // Check if this KB supports document management
-  const hasDocumentCapability = (): boolean => {
-    if (!kbInfo || !kbInfo.knowledge_engine) {
-      return false;
-    }
-    return (
-      kbInfo.knowledge_engine.capabilities?.includes('doc_ingestion') ?? false
-    );
-  };
-
-  // Build menu based on KB capabilities
-  const menu = [
-    {
-      key: 'metadata',
-      label: t('knowledge.metadata'),
-      icon: (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <path d="M5 7C5 6.17157 5.67157 5.5 6.5 5.5C7.32843 5.5 8 6.17157 8 7C8 7.82843 7.32843 8.5 6.5 8.5C5.67157 8.5 5 7.82843 5 7ZM6.5 3.5C4.567 3.5 3 5.067 3 7C3 8.933 4.567 10.5 6.5 10.5C8.433 10.5 10 8.933 10 7C10 5.067 8.433 3.5 6.5 3.5ZM12 8H20V6H12V8ZM16 17C16 16.1716 16.6716 15.5 17.5 15.5C18.3284 15.5 19 16.1716 19 17C19 17.8284 18.3284 18.5 17.5 18.5C16.6716 18.5 16 17.8284 16 17ZM17.5 13.5C15.567 13.5 14 15.067 14 17C14 18.933 15.567 20.5 17.5 20.5C19.433 20.5 21 18.933 21 17C21 15.067 19.433 13.5 17.5 13.5ZM4 16V18H12V16H4Z"></path>
-        </svg>
-      ),
-    },
-    // Show documents only if capability is present
-    ...(hasDocumentCapability()
-      ? [
-          {
-            key: 'documents',
-            label: t('knowledge.documents'),
-            icon: (
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-              >
-                <path d="M21 8V20.9932C21 21.5501 20.5552 22 20.0066 22H3.9934C3.44495 22 3 21.556 3 21.0082V2.9918C3 2.45531 3.4487 2 4.00221 2H14.9968L21 8ZM19 9H14V4H5V20H19V9ZM8 7H11V9H8V7ZM8 11H16V13H8V11ZM8 15H16V17H8V15Z"></path>
-              </svg>
-            ),
-          },
-        ]
-      : []),
-    {
-      key: 'retrieve',
-      label: t('knowledge.retrieve'),
-      icon: (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"></path>
-        </svg>
-      ),
-    },
-  ];
-
-  const confirmDelete = async () => {
-    try {
-      await httpClient.deleteKnowledgeBase(kbId ?? '');
-      onKbDeleted();
-    } catch (e) {
-      console.error('Failed to delete KB:', e);
-      toast.error(
-        t('knowledge.deleteKnowledgeBaseFailed') + (e as CustomApiError).msg,
-      );
-    } finally {
-      setShowDeleteConfirm(false);
-    }
-  };
-
-  // Retrieve function
-  const retrieveFunction = async (id: string, query: string) => {
-    return await httpClient.retrieveKnowledgeBase(id, query);
-  };
-
-  if (!kbId) {
-    // New KB creation
-    return (
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="overflow-hidden p-0 !max-w-[40vw] max-h-[70vh] flex">
-          <main className="flex flex-1 flex-col h-[70vh]">
-            <DialogHeader className="px-6 pt-6 pb-4 shrink-0">
-              <DialogTitle>{t('knowledge.createKnowledgeBase')}</DialogTitle>
-            </DialogHeader>
-            <div className="flex-1 overflow-y-auto px-6 pb-6">
-              <KBForm
-                initKbId={undefined}
-                onNewKbCreated={onNewKbCreated}
-                onKbUpdated={onKbUpdated}
-              />
-            </div>
-            <DialogFooter className="px-6 py-4 border-t shrink-0">
-              <div className="flex justify-end gap-2">
-                <Button type="submit" form="kb-form">
-                  {t('common.save')}
-                </Button>
-                <Button type="button" variant="outline" onClick={onFormCancel}>
-                  {t('common.cancel')}
-                </Button>
-              </div>
-            </DialogFooter>
-          </main>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  return (
-    <>
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="overflow-hidden p-0 !max-w-[50rem] max-h-[75vh] flex">
-          <SidebarProvider className="items-start w-full flex">
-            <Sidebar
-              collapsible="none"
-              className="hidden md:flex h-[80vh] w-40 min-w-[120px] border-r bg-white dark:bg-black"
-            >
-              <SidebarContent>
-                <SidebarGroup>
-                  <SidebarGroupContent>
-                    <SidebarMenu>
-                      {menu.map((item) => (
-                        <SidebarMenuItem key={item.key}>
-                          <SidebarMenuButton
-                            asChild
-                            isActive={activeMenu === item.key}
-                            onClick={() => setActiveMenu(item.key)}
-                          >
-                            <a href="#">
-                              {item.icon}
-                              <span>{item.label}</span>
-                            </a>
-                          </SidebarMenuButton>
-                        </SidebarMenuItem>
-                      ))}
-                    </SidebarMenu>
-                  </SidebarGroupContent>
-                </SidebarGroup>
-              </SidebarContent>
-            </Sidebar>
-            <main className="flex flex-1 flex-col h-[75vh] min-w-0 overflow-x-hidden">
-              <DialogHeader className="px-6 pt-6 pb-4 shrink-0">
-                <DialogTitle>
-                  {activeMenu === 'metadata'
-                    ? t('knowledge.editKnowledgeBase')
-                    : activeMenu === 'documents'
-                      ? t('knowledge.editDocument')
-                      : t('knowledge.retrieveTest')}
-                </DialogTitle>
-              </DialogHeader>
-              <div className="flex-1 overflow-y-auto px-6 pb-6">
-                {activeMenu === 'metadata' && (
-                  <KBForm
-                    initKbId={kbId}
-                    onNewKbCreated={onNewKbCreated}
-                    onKbUpdated={onKbUpdated}
-                  />
-                )}
-                {activeMenu === 'documents' && hasDocumentCapability() && (
-                  <KBDoc
-                    kbId={kbId}
-                    ragEngineName={kbInfo?.knowledge_engine?.name}
-                    ragEngineCapabilities={
-                      kbInfo?.knowledge_engine?.capabilities
-                    }
-                  />
-                )}
-                {activeMenu === 'retrieve' && (
-                  <KBRetrieveGeneric
-                    kbId={kbId}
-                    retrieveFunction={retrieveFunction}
-                  />
-                )}
-              </div>
-              {activeMenu === 'metadata' && (
-                <DialogFooter className="px-6 py-4 border-t shrink-0">
-                  <div className="flex justify-end gap-2">
-                    <Button
-                      type="button"
-                      variant="destructive"
-                      onClick={() => setShowDeleteConfirm(true)}
-                    >
-                      {t('common.delete')}
-                    </Button>
-                    <Button type="submit" form="kb-form">
-                      {t('common.save')}
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      onClick={onFormCancel}
-                    >
-                      {t('common.cancel')}
-                    </Button>
-                  </div>
-                </DialogFooter>
-              )}
-            </main>
-          </SidebarProvider>
-        </DialogContent>
-      </Dialog>
-
-      {/* Delete confirmation dialog */}
-      <Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{t('common.confirmDelete')}</DialogTitle>
-          </DialogHeader>
-          <div className="py-4">
-            {t('knowledge.deleteKnowledgeBaseConfirmation')}
-          </div>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setShowDeleteConfirm(false)}
-            >
-              {t('common.cancel')}
-            </Button>
-            <Button variant="destructive" onClick={confirmDelete}>
-              {t('common.confirmDelete')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}

web/src/app/home/knowledge/components/kb-card/KBCard.module.css

@@ -3,7 +3,7 @@
   height: 10rem;
   background-color: #fff;
   border-radius: 10px;
-  box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.2);
+  border: 1px solid #e4e4e7;
   padding: 1rem;
   cursor: pointer;
   display: flex;
@@ -15,15 +15,15 @@
 
 :global(.dark) .cardContainer {
   background-color: #1f1f22;
-  box-shadow: 0;
+  border-color: #27272a;
 }
 
 .cardContainer:hover {
-  box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.1);
+  border-color: #a1a1aa;
 }
 
 :global(.dark) .cardContainer:hover {
-  box-shadow: 0;
+  border-color: #3f3f46;
 }
 
 .basicInfoContainer {

web/src/app/home/knowledge/page.tsx

@@ -1,31 +1,25 @@
 'use client';
 
-import CreateCardComponent from '@/app/infra/basic-component/create-card-component/CreateCardComponent';
-import styles from './knowledgeBase.module.css';
+import { useSearchParams } from 'next/navigation';
 import { useTranslation } from 'react-i18next';
 import { useEffect, useState } from 'react';
-import { KnowledgeBaseVO } from '@/app/home/knowledge/components/kb-card/KBCardVO';
-import KBCard from '@/app/home/knowledge/components/kb-card/KBCard';
-import KBDetailDialog from '@/app/home/knowledge/KBDetailDialog';
-import KBMigrationDialog from '@/app/home/knowledge/components/kb-migration-dialog/KBMigrationDialog';
 import { httpClient } from '@/app/infra/http/HttpClient';
-import { KnowledgeBase } from '@/app/infra/entities/api';
+import KBMigrationDialog from '@/app/home/knowledge/components/kb-migration-dialog/KBMigrationDialog';
+import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
+import KBDetailContent from './KBDetailContent';
 
 export default function KnowledgePage() {
   const { t } = useTranslation();
-  const [knowledgeBaseList, setKnowledgeBaseList] = useState<KnowledgeBaseVO[]>(
-    [],
-  );
-  const [selectedKbId, setSelectedKbId] = useState<string>('');
-  const [detailDialogOpen, setDetailDialogOpen] = useState(false);
+  const searchParams = useSearchParams();
+  const detailId = searchParams.get('id');
+  const { refreshKnowledgeBases } = useSidebarData();
 
-  // Migration dialog state
+  // Migration dialog state — checked on page load regardless of detail view
   const [migrationDialogOpen, setMigrationDialogOpen] = useState(false);
   const [migrationInternalCount, setMigrationInternalCount] = useState(0);
   const [migrationExternalCount, setMigrationExternalCount] = useState(0);
 
   useEffect(() => {
-    getKnowledgeBaseList();
     checkMigrationStatus();
   }, []);
 
@@ -42,75 +36,13 @@ export default function KnowledgePage() {
     }
   }
 
-  async function getKnowledgeBaseList() {
-    const resp = await httpClient.getKnowledgeBases();
-
-    const currentTime = new Date();
-
-    const kbs = resp.bases.map((kb: KnowledgeBase) => {
-      const lastUpdatedTimeAgo = Math.floor(
-        (currentTime.getTime() -
-          new Date(kb.updated_at ?? currentTime.getTime()).getTime()) /
-          1000 /
-          60 /
-          60 /
-          24,
-      );
-
-      const lastUpdatedTimeAgoText =
-        lastUpdatedTimeAgo > 0
-          ? ` ${lastUpdatedTimeAgo} ${t('knowledge.daysAgo')}`
-          : t('knowledge.today');
-
-      return new KnowledgeBaseVO({
-        id: kb.uuid || '',
-        name: kb.name,
-        description: kb.description,
-        emoji: kb.emoji,
-        lastUpdatedTimeAgo: lastUpdatedTimeAgoText,
-        ragEngine: kb.knowledge_engine,
-        ragEnginePluginId: kb.knowledge_engine_plugin_id,
-      });
-    });
-
-    setKnowledgeBaseList(kbs);
+  function handleMigrationComplete() {
+    refreshKnowledgeBases();
   }
 
-  const handleKBCardClick = (kbId: string) => {
-    setSelectedKbId(kbId);
-    setDetailDialogOpen(true);
-  };
-
-  const handleCreateKBClick = () => {
-    setSelectedKbId('');
-    setDetailDialogOpen(true);
-  };
-
-  const handleFormCancel = () => {
-    setDetailDialogOpen(false);
-  };
-
-  const handleKbDeleted = () => {
-    getKnowledgeBaseList();
-    setDetailDialogOpen(false);
-  };
-
-  const handleNewKbCreated = (newKbId: string) => {
-    getKnowledgeBaseList();
-    setSelectedKbId(newKbId);
-    setDetailDialogOpen(true);
-  };
-
-  const handleKbUpdated = () => {
-    getKnowledgeBaseList();
-  };
-
-  const handleMigrationComplete = () => {
-    getKnowledgeBaseList();
-  };
-
+  if (detailId) {
     return (
-    <div>
+      <>
         <KBMigrationDialog
           open={migrationDialogOpen}
           onOpenChange={setMigrationDialogOpen}
@@ -118,33 +50,23 @@ export default function KnowledgePage() {
           externalKbCount={migrationExternalCount}
           onMigrationComplete={handleMigrationComplete}
         />
-
-      <KBDetailDialog
-        open={detailDialogOpen}
-        onOpenChange={setDetailDialogOpen}
-        kbId={selectedKbId || undefined}
-        onFormCancel={handleFormCancel}
-        onKbDeleted={handleKbDeleted}
-        onNewKbCreated={handleNewKbCreated}
-        onKbUpdated={handleKbUpdated}
-      />
-
-      <div className={styles.knowledgeListContainer}>
-        <CreateCardComponent
-          width={'100%'}
-          height={'10rem'}
-          plusSize={'90px'}
-          onClick={handleCreateKBClick}
-        />
-
-        {knowledgeBaseList.map((kb) => {
-          return (
-            <div key={kb.id} onClick={() => handleKBCardClick(kb.id)}>
-              <KBCard kbCardVO={kb} />
-            </div>
-          );
-        })}
-      </div>
-    </div>
+        <KBDetailContent id={detailId} />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <KBMigrationDialog
+        open={migrationDialogOpen}
+        onOpenChange={setMigrationDialogOpen}
+        internalKbCount={migrationInternalCount}
+        externalKbCount={migrationExternalCount}
+        onMigrationComplete={handleMigrationComplete}
+      />
+      <div className="flex h-full items-center justify-center text-muted-foreground">
+        <p>{t('knowledge.selectFromSidebar')}</p>
+      </div>
+    </>
   );
 }

web/src/app/home/layout.module.css

@@ -1,54 +0,0 @@
-/* 主布局容器 */
-.homeLayoutContainer {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  flex-direction: row;
-  background-color: #eee;
-}
-
-:global(.dark) .homeLayoutContainer {
-  background-color: #0a0a0b;
-}
-
-/* 侧边栏区域 */
-.sidebar {
-  background-color: #eee;
-}
-
-:global(.dark) .sidebar {
-  background-color: #0a0a0b;
-}
-
-/* 主内容区域 */
-.main {
-  background-color: #fafafa;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  /* height: 100vh; */
-  width: calc(100% - 1.2rem);
-  height: calc(100% - 1.2rem);
-  overflow: hidden;
-  border-radius: 1.5rem 0 0 1.5rem;
-  margin-left: 0.6rem;
-  margin-top: 0.6rem;
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.05);
-}
-
-:global(.dark) .main {
-  background-color: #151518;
-  box-shadow: 0 0 6px 0 rgba(255, 255, 255, 0.05);
-}
-
-.mainContent {
-  padding: 1.5rem;
-  padding-left: 2rem;
-  flex: 1;
-  overflow-y: auto;
-  background-color: #fafafa;
-}
-
-:global(.dark) .mainContent {
-  background-color: #151518;
-}

web/src/app/home/layout.tsx

@@ -1,8 +1,6 @@
 'use client';
 
-import styles from './layout.module.css';
 import HomeSidebar from '@/app/home/components/home-sidebar/HomeSidebar';
-import HomeTitleBar from '@/app/home/components/home-titlebar/HomeTitleBar';
 import SurveyWidget from '@/app/home/components/survey/SurveyWidget';
 import React, {
   useState,
@@ -12,21 +10,46 @@ import React, {
   Suspense,
 } from 'react';
 import { SidebarChildVO } from '@/app/home/components/home-sidebar/HomeSidebarChild';
+import {
+  SidebarDataProvider,
+  useSidebarData,
+} from '@/app/home/components/home-sidebar/SidebarDataContext';
 import { I18nObject } from '@/app/infra/entities/common';
 import { userInfo, initializeUserInfo } from '@/app/infra/http';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import { extractI18nObject } from '@/i18n/I18nProvider';
+import { CircleHelp } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/components/ui/sidebar';
+import { Separator } from '@/components/ui/separator';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+
+// Routes that belong to the "Extensions" section
+const EXTENSIONS_ROUTES = ['/home/plugins', '/home/market', '/home/mcp'];
+
+function isExtensionsRoute(pathname: string): boolean {
+  return EXTENSIONS_ROUTES.some(
+    (route) => pathname === route || pathname.startsWith(route + '/'),
+  );
+}
 
 export default function HomeLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const [title, setTitle] = useState<string>('');
-  const [subtitle, setSubtitle] = useState<string>('');
-  const [helpLink, setHelpLink] = useState<I18nObject>({
-    en_US: '',
-    zh_Hans: '',
-  });
-
   // Initialize user info if not already initialized
   useEffect(() => {
     if (!userInfo) {
@@ -34,30 +57,96 @@ export default function HomeLayout({
     }
   }, []);
 
+  return (
+    <SidebarDataProvider>
+      <HomeLayoutInner>{children}</HomeLayoutInner>
+    </SidebarDataProvider>
+  );
+}
+
+function HomeLayoutInner({ children }: { children: React.ReactNode }) {
+  const [title, setTitle] = useState<string>('');
+  const [helpLink, setHelpLink] = useState<I18nObject>({
+    en_US: '',
+    zh_Hans: '',
+  });
+  const { detailEntityName } = useSidebarData();
+  const pathname = usePathname();
+  const { t } = useTranslation();
+
   const onSelectedChangeAction = useCallback((child: SidebarChildVO) => {
     setTitle(child.name);
-    setSubtitle(child.description);
     setHelpLink(child.helpLink);
   }, []);
 
   // Memoize the main content area to prevent re-renders when sidebar state changes
   const mainContent = useMemo(() => children, [children]);
 
+  const resolvedHelpLink = extractI18nObject(helpLink);
+
+  // Determine breadcrumb section label and default link based on current route
+  const isExtensions = isExtensionsRoute(pathname);
+  const sectionLabel = isExtensions
+    ? t('sidebar.extensions')
+    : t('sidebar.home');
+  const sectionLink = isExtensions ? '/home/plugins' : '/home/monitoring';
+
   return (
-    <div className={styles.homeLayoutContainer}>
-      <aside className={styles.sidebar}>
+    <SidebarProvider>
       <Suspense fallback={<div />}>
         <HomeSidebar onSelectedChangeAction={onSelectedChangeAction} />
       </Suspense>
-      </aside>
 
-      <div className={styles.main}>
-        <HomeTitleBar title={title} subtitle={subtitle} helpLink={helpLink} />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator
+              orientation="vertical"
+              className="mr-2 data-[orientation=vertical]:h-4"
+            />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink asChild>
+                    <Link href={sectionLink}>{sectionLabel}</Link>
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>{title}</BreadcrumbPage>
+                </BreadcrumbItem>
+                {detailEntityName && (
+                  <>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                      <BreadcrumbPage>{detailEntityName}</BreadcrumbPage>
+                    </BreadcrumbItem>
+                  </>
+                )}
+                {resolvedHelpLink && (
+                  <>
+                    <BreadcrumbItem>
+                      <a
+                        href={resolvedHelpLink}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-muted-foreground hover:text-foreground transition-colors"
+                      >
+                        <CircleHelp className="size-3.5" />
+                      </a>
+                    </BreadcrumbItem>
+                  </>
+                )}
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
 
-        <main className={styles.mainContent}>{mainContent}</main>
+        <div className="flex-1 overflow-hidden p-4 pt-0">{mainContent}</div>
 
         <SurveyWidget />
-      </div>
-    </div>
+      </SidebarInset>
+    </SidebarProvider>
   );
 }

web/src/app/home/market/page.tsx

@@ -0,0 +1,193 @@
+'use client';
+
+import MarketPage from '@/app/home/plugins/components/plugin-market/PluginMarketComponent';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Download } from 'lucide-react';
+import React, { useState, useCallback } from 'react';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { systemInfo } from '@/app/infra/http/HttpClient';
+import { toast } from 'sonner';
+import { useTranslation } from 'react-i18next';
+import { PluginV4 } from '@/app/infra/entities/plugin';
+
+enum PluginInstallStatus {
+  ASK_CONFIRM = 'ask_confirm',
+  INSTALLING = 'installing',
+  ERROR = 'error',
+}
+
+export default function MarketplacePage() {
+  const { t } = useTranslation();
+
+  if (!systemInfo?.enable_marketplace) {
+    return (
+      <div className="flex flex-col items-center justify-center h-[60vh] text-center">
+        <p className="text-muted-foreground">{t('plugins.marketplace')}</p>
+      </div>
+    );
+  }
+
+  return <MarketplaceContent />;
+}
+
+function MarketplaceContent() {
+  const { t } = useTranslation();
+  const [modalOpen, setModalOpen] = useState(false);
+  const [installInfo, setInstallInfo] = useState<Record<string, string>>({});
+  const [pluginInstallStatus, setPluginInstallStatus] =
+    useState<PluginInstallStatus>(PluginInstallStatus.ASK_CONFIRM);
+  const [installError, setInstallError] = useState<string | null>(null);
+
+  async function checkExtensionsLimit(): Promise<boolean> {
+    const maxExtensions = systemInfo.limitation?.max_extensions ?? -1;
+    if (maxExtensions < 0) return true;
+    try {
+      const [pluginsResp, mcpResp] = await Promise.all([
+        httpClient.getPlugins(),
+        httpClient.getMCPServers(),
+      ]);
+      const total =
+        (pluginsResp.plugins?.length ?? 0) + (mcpResp.servers?.length ?? 0);
+      if (total >= maxExtensions) {
+        toast.error(
+          t('limitation.maxExtensionsReached', { max: maxExtensions }),
+        );
+        return false;
+      }
+    } catch {
+      // If we can't check, let backend handle it
+    }
+    return true;
+  }
+
+  function watchTask(taskId: number) {
+    let alreadySuccess = false;
+
+    const interval = setInterval(() => {
+      httpClient.getAsyncTask(taskId).then((resp) => {
+        if (resp.runtime.done) {
+          clearInterval(interval);
+          if (resp.runtime.exception) {
+            setInstallError(resp.runtime.exception);
+            setPluginInstallStatus(PluginInstallStatus.ERROR);
+          } else {
+            if (!alreadySuccess) {
+              toast.success(t('plugins.installSuccess'));
+              alreadySuccess = true;
+            }
+            setModalOpen(false);
+          }
+        }
+      });
+    }, 1000);
+  }
+
+  const handleInstallPlugin = useCallback(
+    async (plugin: PluginV4) => {
+      if (!(await checkExtensionsLimit())) return;
+      setInstallInfo({
+        plugin_author: plugin.author,
+        plugin_name: plugin.name,
+        plugin_version: plugin.latest_version,
+      });
+      setPluginInstallStatus(PluginInstallStatus.ASK_CONFIRM);
+      setInstallError(null);
+      setModalOpen(true);
+    },
+    [t],
+  );
+
+  function handleModalConfirm() {
+    setPluginInstallStatus(PluginInstallStatus.INSTALLING);
+    httpClient
+      .installPluginFromMarketplace(
+        installInfo.plugin_author,
+        installInfo.plugin_name,
+        installInfo.plugin_version,
+      )
+      .then((resp) => {
+        const taskId = resp.task_id;
+        watchTask(taskId);
+      })
+      .catch((err) => {
+        setInstallError(err.msg);
+        setPluginInstallStatus(PluginInstallStatus.ERROR);
+      });
+  }
+
+  return (
+    <>
+      <div className="h-full overflow-y-auto">
+        <MarketPage installPlugin={handleInstallPlugin} />
+      </div>
+
+      <Dialog
+        open={modalOpen}
+        onOpenChange={(open) => {
+          setModalOpen(open);
+          if (!open) {
+            setInstallError(null);
+          }
+        }}
+      >
+        <DialogContent className="w-[500px] max-h-[80vh] p-6 bg-white dark:bg-[#1a1a1e] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-4">
+              <Download className="size-6" />
+              <span>{t('plugins.installPlugin')}</span>
+            </DialogTitle>
+          </DialogHeader>
+
+          {pluginInstallStatus === PluginInstallStatus.ASK_CONFIRM && (
+            <div className="mt-4">
+              <p className="mb-2">
+                {t('plugins.askConfirm', {
+                  name: installInfo.plugin_name,
+                  version: installInfo.plugin_version,
+                })}
+              </p>
+            </div>
+          )}
+
+          {pluginInstallStatus === PluginInstallStatus.INSTALLING && (
+            <div className="mt-4">
+              <p className="mb-2">{t('plugins.installing')}</p>
+            </div>
+          )}
+
+          {pluginInstallStatus === PluginInstallStatus.ERROR && (
+            <div className="mt-4">
+              <p className="mb-2">{t('plugins.installFailed')}</p>
+              <p className="mb-2 text-red-500">{installError}</p>
+            </div>
+          )}
+
+          <DialogFooter>
+            {pluginInstallStatus === PluginInstallStatus.ASK_CONFIRM && (
+              <>
+                <Button variant="outline" onClick={() => setModalOpen(false)}>
+                  {t('common.cancel')}
+                </Button>
+                <Button onClick={handleModalConfirm}>
+                  {t('common.confirm')}
+                </Button>
+              </>
+            )}
+            {pluginInstallStatus === PluginInstallStatus.ERROR && (
+              <Button variant="default" onClick={() => setModalOpen(false)}>
+                {t('common.close')}
+              </Button>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

web/src/app/home/mcp/page.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import MCPServerComponent from '@/app/home/plugins/mcp-server/MCPServerComponent';
+import MCPFormDialog from '@/app/home/plugins/mcp-server/mcp-form/MCPFormDialog';
+import MCPDeleteConfirmDialog from '@/app/home/plugins/mcp-server/mcp-form/MCPDeleteConfirmDialog';
+import { Button } from '@/components/ui/button';
+import { PlusIcon } from 'lucide-react';
+import React, { useState } from 'react';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { systemInfo } from '@/app/infra/http/HttpClient';
+import { toast } from 'sonner';
+import { useTranslation } from 'react-i18next';
+
+export default function MCPPage() {
+  const { t } = useTranslation();
+  const [mcpFormOpen, setMcpFormOpen] = useState(false);
+  const [editingServerName, setEditingServerName] = useState<string | null>(
+    null,
+  );
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState(false);
+
+  async function checkExtensionsLimit(): Promise<boolean> {
+    const maxExtensions = systemInfo.limitation?.max_extensions ?? -1;
+    if (maxExtensions < 0) return true;
+    try {
+      const [pluginsResp, mcpResp] = await Promise.all([
+        httpClient.getPlugins(),
+        httpClient.getMCPServers(),
+      ]);
+      const total =
+        (pluginsResp.plugins?.length ?? 0) + (mcpResp.servers?.length ?? 0);
+      if (total >= maxExtensions) {
+        toast.error(
+          t('limitation.maxExtensionsReached', { max: maxExtensions }),
+        );
+        return false;
+      }
+    } catch {
+      // If we can't check, let backend handle it
+    }
+    return true;
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="flex flex-row justify-end items-center px-[0.8rem] pb-4 flex-shrink-0">
+        <Button
+          variant="default"
+          className="px-6 py-4 cursor-pointer"
+          onClick={async () => {
+            if (!(await checkExtensionsLimit())) return;
+            setIsEditMode(false);
+            setEditingServerName(null);
+            setMcpFormOpen(true);
+          }}
+        >
+          <PlusIcon className="w-4 h-4" />
+          {t('mcp.add')}
+        </Button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto">
+        <MCPServerComponent
+          key={refreshKey}
+          onEditServer={(serverName) => {
+            setEditingServerName(serverName);
+            setIsEditMode(true);
+            setMcpFormOpen(true);
+          }}
+        />
+      </div>
+
+      <MCPFormDialog
+        open={mcpFormOpen}
+        onOpenChange={setMcpFormOpen}
+        serverName={editingServerName}
+        isEditMode={isEditMode}
+        onSuccess={() => {
+          setEditingServerName(null);
+          setIsEditMode(false);
+          setRefreshKey((prev) => prev + 1);
+        }}
+        onDelete={() => {
+          setShowDeleteConfirmModal(true);
+        }}
+      />
+
+      <MCPDeleteConfirmDialog
+        open={showDeleteConfirmModal}
+        onOpenChange={setShowDeleteConfirmModal}
+        serverName={editingServerName}
+        onSuccess={() => {
+          setMcpFormOpen(false);
+          setEditingServerName(null);
+          setIsEditMode(false);
+          setRefreshKey((prev) => prev + 1);
+        }}
+      />
+    </div>
+  );
+}

web/src/app/home/monitoring/components/ExportDropdown.tsx

@@ -172,7 +172,7 @@ export function ExportDropdown({ filterState }: ExportDropdownProps) {
         <Button
           variant="outline"
           size="sm"
-          className="bg-white dark:bg-[#2a2a2e] hover:bg-gray-50 dark:hover:bg-gray-800 border-gray-300 dark:border-gray-600 shadow-sm flex-shrink-0"
+          className="shadow-sm flex-shrink-0"
           disabled={exporting !== null}
         >
           {exporting ? (

web/src/app/home/monitoring/components/MessageContentRenderer.tsx

@@ -76,7 +76,7 @@ export function MessageContentRenderer({
           return (
             <span
               key={index}
-              className="inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-sm"
+              className="inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded bg-muted text-muted-foreground text-sm"
             >
               [Image]
             </span>
@@ -87,8 +87,8 @@ export function MessageContentRenderer({
           <span key={index} className="inline-block align-middle mx-1">
             <img
               src={imageUrl}
-              alt="Image"
-              className="w-20 h-20 object-cover rounded cursor-pointer hover:opacity-80 transition-opacity border border-gray-200 dark:border-gray-700"
+              alt="Message attachment"
+              className="w-20 h-20 object-cover rounded cursor-pointer hover:opacity-80 transition-opacity border"
               onClick={(e) => {
                 e.stopPropagation();
                 setPreviewImageUrl(imageUrl);
@@ -104,7 +104,7 @@ export function MessageContentRenderer({
         return (
           <span
             key={index}
-            className="inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-sm"
+            className="inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded bg-muted text-muted-foreground text-sm"
           >
             <svg
               className="w-3.5 h-3.5 mr-1"
@@ -123,7 +123,7 @@ export function MessageContentRenderer({
         return (
           <span
             key={index}
-            className="inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-sm"
+            className="inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded bg-muted text-muted-foreground text-sm"
           >
             <svg
               className="w-3.5 h-3.5 mr-1"
@@ -142,7 +142,7 @@ export function MessageContentRenderer({
         return (
           <span
             key={index}
-            className="inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-sm border-l-2 border-gray-400"
+            className="inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded bg-muted text-muted-foreground text-sm border-l-2 border-muted-foreground/50"
           >
             {quote.origin
               ?.filter((c) => (c as MessageChainComponent).type === 'Plain')
@@ -159,7 +159,7 @@ export function MessageContentRenderer({
         return (
           <span
             key={index}
-            className="inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-sm"
+            className="inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded bg-muted text-muted-foreground text-sm"
           >
             [{component.type}]
           </span>
@@ -188,9 +188,7 @@ export function MessageContentRenderer({
     // If no visible components, show placeholder
     if (visibleComponents.length === 0) {
       return (
-        <span className="text-gray-400 dark:text-gray-500 italic">
-          [Empty message]
-        </span>
+        <span className="text-muted-foreground italic">[Empty message]</span>
       );
     }
 
@@ -219,9 +217,7 @@ export function MessageContentRenderer({
     content === '""'
   ) {
     return (
-      <span className="text-gray-400 dark:text-gray-500 italic">
-        [Empty message]
-      </span>
+      <span className="text-muted-foreground italic">[Empty message]</span>
     );
   }
 

web/src/app/home/monitoring/components/MessageDetailsCard.tsx

@@ -22,11 +22,11 @@ export function MessageDetailsCard({ details }: MessageDetailsCardProps) {
   }, [details.message?.variables]);
 
   return (
-    <div className="space-y-4 pl-8 border-l-2 border-gray-200 dark:border-gray-700 ml-4">
+    <div className="space-y-4 pl-8 border-l-2 border-border ml-4">
       {/* Context Info Section */}
       {details.message && (
-        <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
-          <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
+        <div className="bg-muted rounded-lg p-3">
+          <h4 className="text-sm font-semibold text-foreground mb-3 flex items-center">
             <svg
               className="w-4 h-4 mr-2"
               xmlns="http://www.w3.org/2000/svg"
@@ -41,37 +41,37 @@ export function MessageDetailsCard({ details }: MessageDetailsCardProps) {
           {/* Metadata Grid */}
           <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs">
             {details.message.platform && (
-              <div className="bg-white dark:bg-gray-900 rounded p-2">
-                <div className="text-gray-500 dark:text-gray-400">
+              <div className="bg-background rounded p-2">
+                <div className="text-muted-foreground">
                   {t('monitoring.messageList.platform')}
                 </div>
-                <div className="font-medium text-gray-900 dark:text-white">
+                <div className="font-medium text-foreground">
                   {details.message.platform}
                 </div>
               </div>
             )}
             {details.message.userId && (
-              <div className="bg-white dark:bg-gray-900 rounded p-2">
-                <div className="text-gray-500 dark:text-gray-400">
+              <div className="bg-background rounded p-2">
+                <div className="text-muted-foreground">
                   {t('monitoring.messageList.user')}
                 </div>
-                <div className="font-medium text-gray-900 dark:text-white truncate">
+                <div className="font-medium text-foreground truncate">
                   {details.message.userId}
                 </div>
               </div>
             )}
             {details.message.runnerName && (
-              <div className="bg-white dark:bg-gray-900 rounded p-2">
-                <div className="text-gray-500 dark:text-gray-400">
+              <div className="bg-background rounded p-2">
+                <div className="text-muted-foreground">
                   {t('monitoring.messageList.runner')}
                 </div>
-                <div className="font-medium text-gray-900 dark:text-white">
+                <div className="font-medium text-foreground">
                   {details.message.runnerName}
                 </div>
               </div>
             )}
-            <div className="bg-white dark:bg-gray-900 rounded p-2">
-              <div className="text-gray-500 dark:text-gray-400">
+            <div className="bg-background rounded p-2">
+              <div className="text-muted-foreground">
                 {t('monitoring.messageList.level')}
               </div>
               <div
@@ -80,7 +80,7 @@ export function MessageDetailsCard({ details }: MessageDetailsCardProps) {
                     ? 'text-red-600 dark:text-red-400'
                     : details.message.level === 'warning'
                       ? 'text-yellow-600 dark:text-yellow-400'
-                      : 'text-gray-900 dark:text-white'
+                      : 'text-foreground'
                 }`}
               >
                 {details.message.level.toUpperCase()}
@@ -92,8 +92,8 @@ export function MessageDetailsCard({ details }: MessageDetailsCardProps) {
 
       {/* LLM Calls Section */}
       {details.llmCalls && details.llmCalls.length > 0 && (
-        <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
-          <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
+        <div className="bg-muted rounded-lg p-3">
+          <h4 className="text-sm font-semibold text-foreground mb-3 flex items-center">
             <svg
               className="w-4 h-4 mr-2"
               xmlns="http://www.w3.org/2000/svg"
@@ -136,13 +136,10 @@ export function MessageDetailsCard({ details }: MessageDetailsCardProps) {
           {/* Individual LLM Calls */}
           <div className="space-y-2">
             {details.llmCalls.map((call, index) => (
-              <div
-                key={call.id}
-                className="bg-white dark:bg-gray-900 rounded p-2 text-sm"
-              >
+              <div key={call.id} className="bg-background rounded p-2 text-sm">
                 <div className="flex justify-between items-start mb-2">
                   <div>
-                    <span className="font-medium text-gray-900 dark:text-white">
+                    <span className="font-medium text-foreground">
                       #{index + 1} {call.modelName}
                     </span>
                     <span
@@ -155,27 +152,21 @@ export function MessageDetailsCard({ details }: MessageDetailsCardProps) {
                       {call.status}
                     </span>
                   </div>
-                  <span className="text-xs text-gray-500 dark:text-gray-400">
+                  <span className="text-xs text-muted-foreground">
                     {call.duration}ms
                   </span>
                 </div>
-                <div className="grid grid-cols-3 gap-2 text-xs text-gray-600 dark:text-gray-400">
+                <div className="grid grid-cols-3 gap-2 text-xs text-muted-foreground">
                   <div>
-                    <span className="text-gray-500 dark:text-gray-500">
-                      In:
-                    </span>{' '}
+                    <span className="text-muted-foreground">In:</span>{' '}
                     {call.tokens.input.toLocaleString()}
                   </div>
                   <div>
-                    <span className="text-gray-500 dark:text-gray-500">
-                      Out:
-                    </span>{' '}
+                    <span className="text-muted-foreground">Out:</span>{' '}
                     {call.tokens.output.toLocaleString()}
                   </div>
                   <div>
-                    <span className="text-gray-500 dark:text-gray-500">
-                      Total:
-                    </span>{' '}
+                    <span className="text-muted-foreground">Total:</span>{' '}
                     {call.tokens.total.toLocaleString()}
                   </div>
                 </div>
@@ -192,7 +183,7 @@ export function MessageDetailsCard({ details }: MessageDetailsCardProps) {
 
       {/* Errors Section */}
       {details.errors && details.errors.length > 0 && (
-        <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
+        <div className="bg-muted rounded-lg p-3">
           <h4 className="text-sm font-semibold text-red-700 dark:text-red-400 mb-3 flex items-center">
             <svg
               className="w-4 h-4 mr-2"
@@ -236,8 +227,8 @@ export function MessageDetailsCard({ details }: MessageDetailsCardProps) {
       {queryVariables &&
         Object.keys(queryVariables).length > 0 &&
         details.message?.runnerName !== 'local-agent' && (
-          <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
-            <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
+          <div className="bg-muted rounded-lg p-3">
+            <h4 className="text-sm font-semibold text-foreground mb-3 flex items-center">
               <svg
                 className="w-4 h-4 mr-2"
                 xmlns="http://www.w3.org/2000/svg"
@@ -250,22 +241,21 @@ export function MessageDetailsCard({ details }: MessageDetailsCardProps) {
             </h4>
             <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs">
               {Object.entries(queryVariables).map(([key, value]) => (
+                <div key={key} className="bg-background rounded p-2">
+                  <div className="text-muted-foreground">{key}</div>
                   <div
-                  key={key}
-                  className="bg-white dark:bg-gray-900 rounded p-2"
-                >
-                  <div className="text-gray-500 dark:text-gray-400">{key}</div>
-                  <div
-                    className="font-medium text-gray-900 dark:text-white truncate"
+                    className="font-medium text-foreground truncate"
                     title={
                       typeof value === 'string' ? value : JSON.stringify(value)
                     }
                   >
                     {value === null || value === undefined ? (
-                      <span className="text-gray-400 italic">null</span>
+                      <span className="text-muted-foreground italic">null</span>
                     ) : typeof value === 'string' ? (
                       value || (
-                        <span className="text-gray-400 italic">empty</span>
+                        <span className="text-muted-foreground italic">
+                          empty
+                        </span>
                       )
                     ) : (
                       JSON.stringify(value)
@@ -283,7 +273,7 @@ export function MessageDetailsCard({ details }: MessageDetailsCardProps) {
         (details.message?.runnerName === 'local-agent' ||
           !queryVariables ||
           Object.keys(queryVariables).length === 0) && (
-          <div className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
+          <div className="text-sm text-muted-foreground text-center py-4">
             {t('monitoring.messageDetails.noData')}
           </div>
         )}

web/src/app/home/monitoring/components/filters/MonitoringFilters.tsx

@@ -114,7 +114,7 @@ export default function MonitoringFilters({
     <div className="flex flex-wrap items-center gap-6">
       {/* Bot Filter */}
       <div className="flex items-center gap-2">
-        <label className="text-sm font-medium text-gray-700 dark:text-gray-300 whitespace-nowrap">
+        <label className="text-sm font-medium text-foreground whitespace-nowrap">
           {t('monitoring.filters.bot')}
         </label>
         <Select
@@ -122,7 +122,7 @@ export default function MonitoringFilters({
           onValueChange={handleBotChange}
           disabled={loadingBots}
         >
-          <SelectTrigger className="bg-white dark:bg-[#2a2a2e] h-9 w-[140px]">
+          <SelectTrigger className="h-9 w-[140px]">
             <SelectValue
               placeholder={
                 loadingBots
@@ -146,7 +146,7 @@ export default function MonitoringFilters({
 
       {/* Pipeline Filter */}
       <div className="flex items-center gap-2">
-        <label className="text-sm font-medium text-gray-700 dark:text-gray-300 whitespace-nowrap">
+        <label className="text-sm font-medium text-foreground whitespace-nowrap">
           {t('monitoring.filters.pipeline')}
         </label>
         <Select
@@ -154,7 +154,7 @@ export default function MonitoringFilters({
           onValueChange={handlePipelineChange}
           disabled={loadingPipelines}
         >
-          <SelectTrigger className="bg-white dark:bg-[#2a2a2e] h-9 w-[140px]">
+          <SelectTrigger className="h-9 w-[140px]">
             <SelectValue
               placeholder={
                 loadingPipelines
@@ -178,11 +178,11 @@ export default function MonitoringFilters({
 
       {/* Time Range Filter */}
       <div className="flex items-center gap-2">
-        <label className="text-sm font-medium text-gray-700 dark:text-gray-300 whitespace-nowrap">
+        <label className="text-sm font-medium text-foreground whitespace-nowrap">
           {t('monitoring.filters.timeRange')}
         </label>
         <Select value={timeRange} onValueChange={handleTimeRangeChange}>
-          <SelectTrigger className="bg-white dark:bg-[#2a2a2e] h-9 w-[150px]">
+          <SelectTrigger className="h-9 w-[150px]">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>

web/src/app/home/monitoring/components/overview-cards/MetricCard.tsx

@@ -23,9 +23,9 @@ export default function MetricCard({
 }: MetricCardProps) {
   if (loading) {
     return (
-      <Card className="bg-white dark:bg-[#2a2a2e] border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-all duration-300">
+      <Card className="transition-all duration-300">
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
-          <CardTitle className="text-sm font-medium text-gray-600 dark:text-gray-400">
+          <CardTitle className="text-sm font-medium text-muted-foreground">
             {title}
           </CardTitle>
           <div className="h-10 w-10 rounded-lg bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/30 dark:to-blue-800/30 flex items-center justify-center">
@@ -35,17 +35,17 @@ export default function MetricCard({
           </div>
         </CardHeader>
         <CardContent>
-          <div className="h-9 w-28 bg-gray-200 dark:bg-gray-700 animate-pulse rounded"></div>
-          <div className="h-4 w-20 bg-gray-100 dark:bg-gray-800 animate-pulse rounded mt-2"></div>
+          <div className="h-9 w-28 bg-muted animate-pulse rounded"></div>
+          <div className="h-4 w-20 bg-muted animate-pulse rounded mt-2"></div>
         </CardContent>
       </Card>
     );
   }
 
   return (
-    <Card className="bg-white dark:bg-[#2a2a2e] border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-all duration-300 group">
+    <Card className="transition-all duration-300 group">
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
-        <CardTitle className="text-sm font-medium text-gray-600 dark:text-gray-400">
+        <CardTitle className="text-sm font-medium text-muted-foreground">
           {title}
         </CardTitle>
         <div className="h-10 w-10 rounded-lg bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/30 dark:to-blue-800/30 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
@@ -53,9 +53,7 @@ export default function MetricCard({
         </div>
       </CardHeader>
       <CardContent>
-        <div className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-          {value}
-        </div>
+        <div className="text-3xl font-bold text-foreground mb-2">{value}</div>
         {trend && (
           <div className="flex items-center gap-1.5">
             <span
@@ -82,7 +80,7 @@ export default function MetricCard({
               </svg>
               {Math.abs(trend.value)}%
             </span>
-            <span className="text-xs text-gray-500 dark:text-gray-400">
+            <span className="text-xs text-muted-foreground">
               vs previous period
             </span>
           </div>

web/src/app/home/monitoring/components/overview-cards/TrafficChart.tsx

@@ -126,16 +126,16 @@ export default function TrafficChart({
 
   if (loading) {
     return (
-      <div className="bg-white dark:bg-[#2a2a2e] rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm p-6">
+      <div className="bg-card rounded-xl border p-6">
         <div className="flex items-center justify-between mb-4">
-          <div className="h-5 w-32 bg-gray-200 dark:bg-gray-700 animate-pulse rounded"></div>
+          <div className="h-5 w-32 bg-muted animate-pulse rounded"></div>
           <div className="flex gap-4">
-            <div className="h-4 w-24 bg-gray-200 dark:bg-gray-700 animate-pulse rounded"></div>
-            <div className="h-4 w-24 bg-gray-200 dark:bg-gray-700 animate-pulse rounded"></div>
+            <div className="h-4 w-24 bg-muted animate-pulse rounded"></div>
+            <div className="h-4 w-24 bg-muted animate-pulse rounded"></div>
           </div>
         </div>
         <div className="h-[300px] flex items-center justify-center">
-          <div className="animate-pulse w-full h-full bg-gray-100 dark:bg-gray-800 rounded"></div>
+          <div className="animate-pulse w-full h-full bg-muted rounded"></div>
         </div>
       </div>
     );
@@ -143,13 +143,13 @@ export default function TrafficChart({
 
   if (chartData.length === 0) {
     return (
-      <div className="bg-white dark:bg-[#2a2a2e] rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm p-6">
-        <h3 className="text-base font-semibold text-gray-800 dark:text-gray-200 mb-4">
+      <div className="bg-card rounded-xl border p-6">
+        <h3 className="text-base font-semibold text-foreground mb-4">
           {t('monitoring.trafficChart.title')}
         </h3>
-        <div className="h-[300px] flex flex-col items-center justify-center text-gray-400 dark:text-gray-500">
+        <div className="h-[300px] flex flex-col items-center justify-center text-muted-foreground">
           <svg
-            className="w-16 h-16 mb-4 text-gray-300 dark:text-gray-600"
+            className="w-16 h-16 mb-4 text-muted-foreground/30"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -170,8 +170,8 @@ export default function TrafficChart({
   }
 
   return (
-    <div className="bg-white dark:bg-[#2a2a2e] rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm p-6 hover:shadow-md transition-shadow duration-300">
-      <h3 className="text-base font-semibold text-gray-800 dark:text-gray-200 mb-6">
+    <div className="bg-card rounded-xl border p-6 transition-shadow duration-300">
+      <h3 className="text-base font-semibold text-foreground mb-6">
         {t('monitoring.trafficChart.title')}
       </h3>
       <div className="h-[300px]">
@@ -192,38 +192,38 @@ export default function TrafficChart({
             </defs>
             <CartesianGrid
               strokeDasharray="3 3"
-              stroke="#e5e7eb"
-              className="dark:stroke-gray-700"
+              stroke="var(--border)"
               vertical={false}
             />
             <XAxis
               dataKey="time"
-              tick={{ fontSize: 12, fill: '#9ca3af' }}
+              tick={{ fontSize: 12, fill: 'var(--muted-foreground)' }}
               tickLine={false}
-              axisLine={{ stroke: '#e5e7eb' }}
+              axisLine={{ stroke: 'var(--border)' }}
               dy={10}
             />
             <YAxis
-              tick={{ fontSize: 12, fill: '#9ca3af' }}
+              tick={{ fontSize: 12, fill: 'var(--muted-foreground)' }}
               tickLine={false}
-              axisLine={{ stroke: '#e5e7eb' }}
+              axisLine={{ stroke: 'var(--border)' }}
               width={40}
               allowDecimals={false}
             />
             <Tooltip
               contentStyle={{
-                backgroundColor: 'rgba(255, 255, 255, 0.98)',
-                border: '1px solid #e5e7eb',
+                backgroundColor: 'var(--card)',
+                border: '1px solid var(--border)',
                 borderRadius: '12px',
                 boxShadow:
                   '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
                 fontSize: '13px',
                 padding: '12px',
+                color: 'var(--foreground)',
               }}
               labelStyle={{
                 fontWeight: 600,
                 marginBottom: '8px',
-                color: '#374151',
+                color: 'var(--foreground)',
               }}
               itemStyle={{ padding: '4px 0' }}
             />

web/src/app/home/monitoring/page.tsx

@@ -188,11 +188,11 @@ function MonitoringPageContent() {
   };
 
   return (
-    <div className="w-full h-full">
+    <div className="w-full h-full overflow-y-auto">
       {/* Filters and Refresh Button - Sticky */}
-      <div className="sticky top-[-1.5rem] z-10 -ml-[2rem] -mr-[1.5rem] -mt-[1.5rem] pt-[1.5rem] pb-4 bg-[#fafafa] dark:bg-[#151518]">
+      <div className="sticky top-[-1.5rem] z-10 -ml-[2rem] -mr-[1.5rem] -mt-[1.5rem] pt-[1.5rem] pb-4 bg-background">
         <div className="ml-[2rem] mr-[1.5rem] px-[0.8rem]">
-          <div className="flex flex-wrap items-center justify-between gap-4 p-4 bg-white dark:bg-[#2a2a2e] rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
+          <div className="flex flex-wrap items-center justify-between gap-4 p-4 bg-card rounded-xl border">
             <MonitoringFilters
               selectedBots={filterState.selectedBots}
               selectedPipelines={filterState.selectedPipelines}
@@ -207,7 +207,7 @@ function MonitoringPageContent() {
                 variant="outline"
                 size="sm"
                 onClick={refetch}
-                className="bg-white dark:bg-[#2a2a2e] hover:bg-gray-50 dark:hover:bg-gray-800 border-gray-300 dark:border-gray-600 shadow-sm flex-shrink-0"
+                className="shadow-sm flex-shrink-0"
               >
                 <svg
                   className="w-4 h-4 mr-2"
@@ -235,30 +235,21 @@ function MonitoringPageContent() {
         />
 
         {/* Tabs Section */}
-        <div className="bg-white dark:bg-[#2a2a2e] rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
+        <div className="bg-card rounded-xl border overflow-hidden">
           <Tabs
             value={activeTab}
             onValueChange={setActiveTab}
             className="w-full"
           >
             <div className="px-6 pt-4">
-              <TabsList className="bg-gray-100 dark:bg-[#1a1a1e] h-12 p-1">
-                <TabsTrigger
-                  value="messages"
-                  className="px-6 py-2 text-sm font-medium cursor-pointer data-[state=active]:bg-white dark:data-[state=active]:bg-[#2a2a2e] data-[state=active]:shadow-sm"
-                >
+              <TabsList className="h-12 p-1">
+                <TabsTrigger value="messages" className="px-6 py-2">
                   {t('monitoring.tabs.messages')}
                 </TabsTrigger>
-                <TabsTrigger
-                  value="modelCalls"
-                  className="px-6 py-2 text-sm font-medium cursor-pointer data-[state=active]:bg-white dark:data-[state=active]:bg-[#2a2a2e] data-[state=active]:shadow-sm"
-                >
+                <TabsTrigger value="modelCalls" className="px-6 py-2">
                   {t('monitoring.tabs.modelCalls')}
                 </TabsTrigger>
-                <TabsTrigger
-                  value="errors"
-                  className="px-6 py-2 text-sm font-medium cursor-pointer data-[state=active]:bg-white dark:data-[state=active]:bg-[#2a2a2e] data-[state=active]:shadow-sm"
-                >
+                <TabsTrigger value="errors" className="px-6 py-2">
                   {t('monitoring.tabs.errors')}
                 </TabsTrigger>
               </TabsList>
@@ -290,11 +281,11 @@ function MonitoringPageContent() {
                         .map((msg) => (
                           <div
                             key={msg.id}
-                            className="border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden hover:shadow-md transition-all duration-200"
+                            className="border rounded-xl overflow-hidden transition-all duration-200"
                           >
                             {/* Message Header - Always Visible */}
                             <div
-                              className="p-5 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
+                              className="p-5 cursor-pointer hover:bg-accent transition-colors"
                               onClick={() => toggleMessageExpand(msg.id)}
                             >
                               <div className="flex items-start justify-between">
@@ -302,39 +293,41 @@ function MonitoringPageContent() {
                                   {/* Expand Icon */}
                                   <div className="mr-3 mt-0.5">
                                     {expandedMessageId === msg.id ? (
-                                      <ChevronDown className="w-5 h-5 text-gray-500" />
+                                      <ChevronDown className="w-5 h-5 text-muted-foreground" />
                                     ) : (
-                                      <ChevronRight className="w-5 h-5 text-gray-500" />
+                                      <ChevronRight className="w-5 h-5 text-muted-foreground" />
                                     )}
                                   </div>
 
                                   {/* Message Info */}
                                   <div className="flex-1">
                                     <div className="flex items-center gap-2 mb-1">
-                                      <span className="text-xs text-gray-400 dark:text-gray-500 font-mono">
+                                      <span className="text-xs text-muted-foreground font-mono">
                                         ID: {msg.id}
                                       </span>
                                     </div>
                                     <div className="flex items-center gap-2 mb-2">
-                                      <span className="font-medium text-sm text-gray-700 dark:text-gray-300">
+                                      <span className="font-medium text-sm text-foreground">
                                         {msg.botName}
                                       </span>
-                                      <span className="text-gray-400">→</span>
-                                      <span className="text-sm text-gray-600 dark:text-gray-400">
+                                      <span className="text-muted-foreground">
+                                        →
+                                      </span>
+                                      <span className="text-sm text-muted-foreground">
                                         {msg.pipelineName}
                                       </span>
                                       {msg.runnerName && (
                                         <>
-                                          <span className="text-gray-400">
+                                          <span className="text-muted-foreground">
                                             →
                                           </span>
-                                          <span className="text-sm text-gray-600 dark:text-gray-400">
+                                          <span className="text-sm text-muted-foreground">
                                             {msg.runnerName}
                                           </span>
                                         </>
                                       )}
                                     </div>
-                                    <div className="text-base text-gray-800 dark:text-gray-200">
+                                    <div className="text-base text-foreground">
                                       <MessageContentRenderer
                                         content={msg.messageContent}
                                         maxLines={3}
@@ -345,7 +338,7 @@ function MonitoringPageContent() {
 
                                 {/* Status and Timestamp */}
                                 <div className="flex flex-col items-end gap-2 ml-4">
-                                  <span className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                                  <span className="text-xs text-muted-foreground whitespace-nowrap">
                                     {msg.timestamp.toLocaleString()}
                                   </span>
                                   <span
@@ -365,7 +358,7 @@ function MonitoringPageContent() {
 
                             {/* Expanded Details */}
                             {expandedMessageId === msg.id && (
-                              <div className="border-t border-gray-200 dark:border-gray-700 p-4 bg-gray-50 dark:bg-gray-900">
+                              <div className="border-t p-4 bg-muted">
                                 {loadingDetails[msg.id] && (
                                   <div className="py-4 flex justify-center">
                                     <LoadingSpinner size="sm" text="" />
@@ -386,9 +379,9 @@ function MonitoringPageContent() {
 
                 {!loading &&
                   (!data || !data.messages || data.messages.length === 0) && (
-                    <div className="text-center text-gray-500 dark:text-gray-400 py-16">
+                    <div className="text-center text-muted-foreground py-16">
                       <svg
-                        className="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600"
+                        className="w-16 h-16 mx-auto mb-4 text-muted-foreground/30"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor"
@@ -427,14 +420,14 @@ function MonitoringPageContent() {
                       {data.modelCalls.map((call) => (
                         <div
                           key={call.id}
-                          className="border border-gray-200 dark:border-gray-700 rounded-xl p-5 hover:shadow-md transition-all duration-200"
+                          className="border rounded-xl p-5 transition-all duration-200"
                         >
                           <div className="flex justify-between items-start mb-3">
                             <div className="flex-1">
                               {/* Query ID - only show if messageId exists */}
                               {call.messageId && (
                                 <div className="flex items-center gap-2 mb-1">
-                                  <span className="text-xs text-gray-400 dark:text-gray-500 font-mono">
+                                  <span className="text-xs text-muted-foreground font-mono">
                                     Query ID: {call.messageId}
                                   </span>
                                   <Button
@@ -496,19 +489,19 @@ function MonitoringPageContent() {
                                 </span>
                               </div>
                               {/* Model Name */}
-                              <div className="font-medium text-sm text-gray-700 dark:text-gray-300 mb-2">
+                              <div className="font-medium text-sm text-foreground mb-2">
                                 {call.modelName}
                               </div>
                               {/* Context Info - only for LLM calls */}
                               {call.modelType === 'llm' &&
                                 call.botName &&
                                 call.pipelineName && (
-                                  <div className="text-xs text-gray-600 dark:text-gray-400 mb-1">
+                                  <div className="text-xs text-muted-foreground mb-1">
                                     {call.botName} → {call.pipelineName}
                                   </div>
                                 )}
                               {/* Token Info */}
-                              <div className="text-xs text-gray-600 dark:text-gray-400 space-y-1">
+                              <div className="text-xs text-muted-foreground space-y-1">
                                 <div className="flex flex-wrap gap-4">
                                   {call.modelType === 'llm' && call.tokens && (
                                     <>
@@ -572,14 +565,14 @@ function MonitoringPageContent() {
                                 {/* Query Text for Embedding Retrieve */}
                                 {call.modelType === 'embedding' &&
                                   call.queryText && (
-                                    <div className="mt-2 p-2 bg-gray-50 dark:bg-gray-800 rounded text-sm">
-                                      <span className="text-gray-500 dark:text-gray-400">
+                                    <div className="mt-2 p-2 bg-muted rounded text-sm">
+                                      <span className="text-muted-foreground">
                                         {t(
                                           'monitoring.embeddingCalls.queryText',
                                         )}
                                         :{' '}
                                       </span>
-                                      <span className="text-gray-700 dark:text-gray-300">
+                                      <span className="text-foreground">
                                         {call.queryText.length > 100
                                           ? call.queryText.substring(0, 100) +
                                             '...'
@@ -594,7 +587,7 @@ function MonitoringPageContent() {
                                 </div>
                               )}
                             </div>
-                            <span className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap ml-4">
+                            <span className="text-xs text-muted-foreground whitespace-nowrap ml-4">
                               {call.timestamp.toLocaleString()}
                             </span>
                           </div>
@@ -607,9 +600,9 @@ function MonitoringPageContent() {
                   (!data ||
                     !data.modelCalls ||
                     data.modelCalls.length === 0) && (
-                    <div className="text-center text-gray-500 dark:text-gray-400 py-16">
+                    <div className="text-center text-muted-foreground py-16">
                       <svg
-                        className="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600"
+                        className="w-16 h-16 mx-auto mb-4 text-muted-foreground/30"
                         fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor"
@@ -642,7 +635,7 @@ function MonitoringPageContent() {
                     {data.errors.map((error) => (
                       <div
                         key={error.id}
-                        className="border border-red-200 dark:border-red-900 rounded-xl overflow-hidden hover:shadow-md transition-all duration-200"
+                        className="border border-red-200 dark:border-red-900 rounded-xl overflow-hidden transition-all duration-200"
                       >
                         {/* Error Header - Always Visible */}
                         <div
@@ -664,7 +657,7 @@ function MonitoringPageContent() {
                               <div className="flex-1">
                                 {/* Query ID */}
                                 <div className="flex items-center gap-2 mb-1">
-                                  <span className="text-xs text-gray-400 dark:text-gray-500 font-mono">
+                                  <span className="text-xs text-muted-foreground font-mono">
                                     Query ID: {error.messageId || '-'}
                                   </span>
                                   {error.messageId && (
@@ -689,11 +682,11 @@ function MonitoringPageContent() {
                                     {error.errorType}
                                   </span>
                                   <span className="text-red-400">→</span>
-                                  <span className="text-sm text-gray-600 dark:text-gray-400">
+                                  <span className="text-sm text-muted-foreground">
                                     {error.botName}
                                   </span>
                                   <span className="text-red-400">→</span>
-                                  <span className="text-sm text-gray-600 dark:text-gray-400">
+                                  <span className="text-sm text-muted-foreground">
                                     {error.pipelineName}
                                   </span>
                                 </div>
@@ -705,7 +698,7 @@ function MonitoringPageContent() {
 
                             {/* Timestamp */}
                             <div className="flex flex-col items-end gap-2 ml-4">
-                              <span className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                              <span className="text-xs text-muted-foreground whitespace-nowrap">
                                 {error.timestamp.toLocaleString()}
                               </span>
                             </div>
@@ -714,7 +707,7 @@ function MonitoringPageContent() {
 
                         {/* Expanded Details */}
                         {expandedErrorId === error.id && (
-                          <div className="border-t border-red-200 dark:border-red-900 p-5 bg-white dark:bg-gray-900">
+                          <div className="border-t border-red-200 dark:border-red-900 p-5 bg-background">
                             <div className="space-y-4 pl-8 border-l-2 border-red-300 dark:border-red-800 ml-4">
                               {/* Error Details */}
                               <div className="bg-red-50 dark:bg-red-900/20 rounded-lg p-3">
@@ -727,33 +720,33 @@ function MonitoringPageContent() {
                               </div>
 
                               {/* Context Info */}
-                              <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
-                                <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
+                              <div className="bg-muted rounded-lg p-3">
+                                <h4 className="text-sm font-semibold text-foreground mb-3">
                                   {t('monitoring.messageList.viewDetails')}
                                 </h4>
                                 <div className="grid grid-cols-2 md:grid-cols-3 gap-2 text-xs">
-                                  <div className="bg-white dark:bg-gray-900 rounded p-2">
-                                    <div className="text-gray-500 dark:text-gray-400">
+                                  <div className="bg-background rounded p-2">
+                                    <div className="text-muted-foreground">
                                       {t('monitoring.messageList.bot')}
                                     </div>
-                                    <div className="font-medium text-gray-900 dark:text-white">
+                                    <div className="font-medium text-foreground">
                                       {error.botName}
                                     </div>
                                   </div>
-                                  <div className="bg-white dark:bg-gray-900 rounded p-2">
-                                    <div className="text-gray-500 dark:text-gray-400">
+                                  <div className="bg-background rounded p-2">
+                                    <div className="text-muted-foreground">
                                       {t('monitoring.messageList.pipeline')}
                                     </div>
-                                    <div className="font-medium text-gray-900 dark:text-white">
+                                    <div className="font-medium text-foreground">
                                       {error.pipelineName}
                                     </div>
                                   </div>
                                   {error.sessionId && (
-                                    <div className="bg-white dark:bg-gray-900 rounded p-2">
-                                      <div className="text-gray-500 dark:text-gray-400">
+                                    <div className="bg-background rounded p-2">
+                                      <div className="text-muted-foreground">
                                         {t('monitoring.sessions.sessionId')}
                                       </div>
-                                      <div className="font-medium text-gray-900 dark:text-white truncate">
+                                      <div className="font-medium text-foreground truncate">
                                         {error.sessionId}
                                       </div>
                                     </div>
@@ -763,11 +756,11 @@ function MonitoringPageContent() {
 
                               {/* Stack Trace */}
                               {error.stackTrace && (
-                                <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
-                                  <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
+                                <div className="bg-muted rounded-lg p-3">
+                                  <h4 className="text-sm font-semibold text-foreground mb-3">
                                     {t('monitoring.errors.stackTrace')}
                                   </h4>
-                                  <pre className="text-xs text-gray-600 dark:text-gray-400 overflow-auto max-h-60 bg-white dark:bg-gray-900 p-3 rounded whitespace-pre-wrap break-words">
+                                  <pre className="text-xs text-muted-foreground overflow-auto max-h-60 bg-background p-3 rounded whitespace-pre-wrap break-words">
                                     {error.stackTrace}
                                   </pre>
                                 </div>
@@ -782,7 +775,7 @@ function MonitoringPageContent() {
 
                 {!loading &&
                   (!data || !data.errors || data.errors.length === 0) && (
-                    <div className="text-center text-gray-500 dark:text-gray-400 py-16">
+                    <div className="text-center text-muted-foreground py-16">
                       <svg
                         className="w-16 h-16 mx-auto mb-4 text-green-300 dark:text-green-600"
                         fill="none"

web/src/app/home/pipelines/PipelineDetailContent.tsx

@@ -0,0 +1,201 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import PipelineFormComponent from '@/app/home/pipelines/components/pipeline-form/PipelineFormComponent';
+import DebugDialog from '@/app/home/pipelines/components/debug-dialog/DebugDialog';
+import PipelineExtension from '@/app/home/pipelines/components/pipeline-extensions/PipelineExtension';
+import PipelineMonitoringTab from '@/app/home/pipelines/components/monitoring-tab/PipelineMonitoringTab';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
+import { useTranslation } from 'react-i18next';
+import { Settings, Puzzle, Bug, BarChart3 } from 'lucide-react';
+
+export default function PipelineDetailContent({ id }: { id: string }) {
+  const isCreateMode = id === 'new';
+  const router = useRouter();
+  const { t } = useTranslation();
+  const { refreshPipelines, pipelines, setDetailEntityName } = useSidebarData();
+
+  // Set breadcrumb entity name
+  useEffect(() => {
+    if (isCreateMode) {
+      setDetailEntityName(t('pipelines.createPipeline'));
+    } else {
+      const pipeline = pipelines.find((p) => p.id === id);
+      setDetailEntityName(pipeline?.name ?? id);
+    }
+    return () => setDetailEntityName(null);
+  }, [id, isCreateMode, pipelines, setDetailEntityName, t]);
+
+  const [activeTab, setActiveTab] = useState('config');
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [isWebSocketConnected, setIsWebSocketConnected] = useState(false);
+
+  function handleFinish() {
+    refreshPipelines();
+  }
+
+  function handleDeletePipeline() {
+    httpClient.deletePipeline(id).then(() => {
+      refreshPipelines();
+      setShowDeleteConfirm(false);
+      router.push('/home/pipelines');
+    });
+  }
+
+  function handleNewPipelineCreated(newPipelineId: string) {
+    refreshPipelines();
+    // Navigate to the newly created pipeline's detail view via query param
+    router.push(`/home/pipelines?id=${encodeURIComponent(newPipelineId)}`);
+  }
+
+  // Create mode: simple form layout
+  if (isCreateMode) {
+    return (
+      <div className="flex h-full flex-col">
+        <div className="flex items-center gap-3 pb-4 shrink-0">
+          <h1 className="text-xl font-semibold">
+            {t('pipelines.createPipeline')}
+          </h1>
+        </div>
+
+        <div className="flex-1 overflow-y-auto min-h-0">
+          <div className="mx-auto max-w-2xl space-y-6">
+            <PipelineFormComponent
+              pipelineId={undefined}
+              isEditMode={false}
+              disableForm={false}
+              showButtons={true}
+              onFinish={handleFinish}
+              onNewPipelineCreated={handleNewPipelineCreated}
+              onDeletePipeline={() => {}}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Edit mode: tabbed layout with config, extensions, debug, monitoring
+  return (
+    <>
+      <div className="flex h-full flex-col">
+        <div className="flex items-center gap-3 pb-4 shrink-0">
+          <h1 className="text-xl font-semibold">
+            {t('pipelines.editPipeline')}
+          </h1>
+        </div>
+
+        <Tabs
+          key={id}
+          value={activeTab}
+          onValueChange={setActiveTab}
+          className="flex flex-1 flex-col min-h-0"
+        >
+          <TabsList className="shrink-0">
+            <TabsTrigger value="config" className="gap-1.5">
+              <Settings className="size-3.5" />
+              {t('pipelines.configuration')}
+            </TabsTrigger>
+            <TabsTrigger value="extensions" className="gap-1.5">
+              <Puzzle className="size-3.5" />
+              {t('pipelines.extensions.title')}
+            </TabsTrigger>
+            <TabsTrigger value="debug" className="gap-1.5">
+              <Bug className="size-3.5" />
+              {t('pipelines.debugChat')}
+              <span
+                className={`inline-block size-2 rounded-full ${
+                  isWebSocketConnected ? 'bg-green-500' : 'bg-red-500'
+                }`}
+              />
+            </TabsTrigger>
+            <TabsTrigger value="monitoring" className="gap-1.5">
+              <BarChart3 className="size-3.5" />
+              {t('pipelines.monitoring.title')}
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent
+            value="config"
+            className="flex-1 min-h-0 overflow-y-auto mt-4"
+          >
+            <PipelineFormComponent
+              pipelineId={id}
+              isEditMode={true}
+              disableForm={false}
+              showButtons={true}
+              onFinish={handleFinish}
+              onNewPipelineCreated={handleNewPipelineCreated}
+              onDeletePipeline={() => setShowDeleteConfirm(true)}
+              onCancel={() => router.push('/home/pipelines')}
+            />
+          </TabsContent>
+
+          <TabsContent
+            value="extensions"
+            className="flex-1 min-h-0 overflow-y-auto mt-4"
+          >
+            <PipelineExtension pipelineId={id} />
+          </TabsContent>
+
+          <TabsContent value="debug" className="flex-1 min-h-0 mt-4">
+            <DebugDialog
+              open={activeTab === 'debug'}
+              pipelineId={id}
+              isEmbedded={true}
+              onConnectionStatusChange={setIsWebSocketConnected}
+            />
+          </TabsContent>
+
+          <TabsContent
+            value="monitoring"
+            className="flex-1 min-h-0 overflow-y-auto mt-4"
+          >
+            <PipelineMonitoringTab
+              pipelineId={id}
+              onNavigateToMonitoring={() => {
+                router.push('/home/monitoring');
+              }}
+            />
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* Delete confirmation dialog */}
+      <Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t('common.confirmDelete')}</DialogTitle>
+            <DialogDescription className="sr-only">
+              {t('pipelines.deleteConfirmation')}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-4">{t('pipelines.deleteConfirmation')}</div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setShowDeleteConfirm(false)}
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button variant="destructive" onClick={handleDeletePipeline}>
+              {t('common.confirmDelete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

web/src/app/home/pipelines/PipelineDetailDialog.tsx

@@ -1,278 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useRouter } from 'next/navigation';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-} from '@/components/ui/sidebar';
-import PipelineFormComponent from './components/pipeline-form/PipelineFormComponent';
-import DebugDialog from './components/debug-dialog/DebugDialog';
-import PipelineExtension from './components/pipeline-extensions/PipelineExtension';
-import PipelineMonitoringTab from './components/monitoring-tab/PipelineMonitoringTab';
-
-interface PipelineDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  pipelineId?: string;
-  isEditMode?: boolean;
-  isDefaultPipeline?: boolean;
-  onFinish: () => void;
-  onNewPipelineCreated?: (pipelineId: string) => void;
-  onDeletePipeline: () => void;
-  onCancel: () => void;
-}
-
-type DialogMode = 'config' | 'debug' | 'extensions' | 'monitoring';
-
-export default function PipelineDialog({
-  open,
-  onOpenChange,
-  pipelineId: propPipelineId,
-  isEditMode = false,
-  onFinish,
-  onNewPipelineCreated,
-  onDeletePipeline,
-  onCancel,
-}: PipelineDialogProps) {
-  const { t } = useTranslation();
-  const router = useRouter();
-  const [pipelineId, setPipelineId] = useState<string | undefined>(
-    propPipelineId,
-  );
-  const [currentMode, setCurrentMode] = useState<DialogMode>('config');
-  const [isWebSocketConnected, setIsWebSocketConnected] = useState(false);
-
-  useEffect(() => {
-    setPipelineId(propPipelineId);
-    setCurrentMode('config');
-  }, [propPipelineId, open]);
-
-  const handleFinish = () => {
-    onFinish();
-  };
-
-  const handleNewPipelineCreated = (newPipelineId: string) => {
-    setPipelineId(newPipelineId);
-    setCurrentMode('config');
-    if (onNewPipelineCreated) {
-      onNewPipelineCreated(newPipelineId);
-    }
-  };
-
-  const menu = [
-    {
-      key: 'config',
-      label: t('pipelines.configuration'),
-      icon: (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <path d="M5 7C5 6.17157 5.67157 5.5 6.5 5.5C7.32843 5.5 8 6.17157 8 7C8 7.82843 7.32843 8.5 6.5 8.5C5.67157 8.5 5 7.82843 5 7ZM6.5 3.5C4.567 3.5 3 5.067 3 7C3 8.933 4.567 10.5 6.5 10.5C8.433 10.5 10 8.933 10 7C10 5.067 8.433 3.5 6.5 3.5ZM12 8H20V6H12V8ZM16 17C16 16.1716 16.6716 15.5 17.5 15.5C18.3284 15.5 19 16.1716 19 17C19 17.8284 18.3284 18.5 17.5 18.5C16.6716 18.5 16 17.8284 16 17ZM17.5 13.5C15.567 13.5 14 15.067 14 17C14 18.933 15.567 20.5 17.5 20.5C19.433 20.5 21 18.933 21 17C21 15.067 19.433 13.5 17.5 13.5ZM4 16V18H12V16H4Z"></path>
-        </svg>
-      ),
-    },
-    {
-      key: 'extensions',
-      label: t('pipelines.extensions.title'),
-      icon: (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <path d="M7 5C7 2.79086 8.79086 1 11 1C13.2091 1 15 2.79086 15 5H18C18.5523 5 19 5.44772 19 6V9C21.2091 9 23 10.7909 23 13C23 15.2091 21.2091 17 19 17V20C19 20.5523 18.5523 21 18 21H4C3.44772 21 3 20.5523 3 20V6C3 5.44772 3.44772 5 4 5H7ZM11 3C9.89543 3 9 3.89543 9 5C9 5.23554 9.0403 5.45952 9.11355 5.66675C9.22172 5.97282 9.17461 6.31235 8.98718 6.57739C8.79974 6.84243 8.49532 7 8.17071 7H5V19H17V15.8293C17 15.5047 17.1576 15.2003 17.4226 15.0128C17.6877 14.8254 18.0272 14.7783 18.3332 14.8865C18.5405 14.9597 18.7645 15 19 15C20.1046 15 21 14.1046 21 13C21 11.8954 20.1046 11 19 11C18.7645 11 18.5405 11.0403 18.3332 11.1135C18.0272 11.2217 17.6877 11.1746 17.4226 10.9872C17.1576 10.7997 17 10.4953 17 10.1707V7H13.8293C13.5047 7 13.2003 6.84243 13.0128 6.57739C12.8254 6.31235 12.7783 5.97282 12.8865 5.66675C12.9597 5.45952 13 5.23555 13 5C13 3.89543 12.1046 3 11 3Z"></path>
-        </svg>
-      ),
-    },
-    {
-      key: 'debug',
-      label: t('pipelines.debugChat'),
-      icon: (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <path d="M13 19.9C15.2822 19.4367 17 17.419 17 15V12C17 11.299 16.8564 10.6219 16.5846 10H7.41538C7.14358 10.6219 7 11.299 7 12V15C7 17.419 8.71776 19.4367 11 19.9V14H13V19.9ZM5.5358 17.6907C5.19061 16.8623 5 15.9534 5 15H2V13H5V12C5 11.3573 5.08661 10.7348 5.2488 10.1436L3.0359 8.86602L4.0359 7.13397L6.05636 8.30049C6.11995 8.19854 6.18609 8.09835 6.25469 8H17.7453C17.8139 8.09835 17.88 8.19854 17.9436 8.30049L19.9641 7.13397L20.9641 8.86602L18.7512 10.1436C18.9134 10.7348 19 11.3573 19 12V13H22V15H19C19 15.9534 18.8094 16.8623 18.4642 17.6907L20.9641 19.134L19.9641 20.866L17.4383 19.4077C16.1549 20.9893 14.1955 22 12 22C9.80453 22 7.84512 20.9893 6.56171 19.4077L4.0359 20.866L3.0359 19.134L5.5358 17.6907ZM8 6C8 3.79086 9.79086 2 12 2C14.2091 2 16 3.79086 16 6H8Z"></path>
-        </svg>
-      ),
-    },
-    {
-      key: 'monitoring',
-      label: t('pipelines.monitoring.title'),
-      icon: (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <path d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM4 5V19H20V5H4ZM6 7H18V9H6V7ZM6 11H18V13H6V11ZM6 15H12V17H6V15Z"></path>
-        </svg>
-      ),
-    },
-  ];
-
-  const getDialogTitle = () => {
-    if (currentMode === 'config') {
-      return isEditMode
-        ? t('pipelines.editPipeline')
-        : t('pipelines.createPipeline');
-    }
-    if (currentMode === 'extensions') {
-      return t('pipelines.extensions.title');
-    }
-    if (currentMode === 'monitoring') {
-      return t('pipelines.monitoring.title');
-    }
-    return t('pipelines.debugDialog.title');
-  };
-
-  // 创建新流水线时的对话框
-  if (!isEditMode) {
-    return (
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="overflow-hidden p-0 !max-w-[40vw] max-h-[70vh] flex">
-          <main className="flex flex-1 flex-col h-[70vh]">
-            <DialogHeader className="px-6 pt-6 pb-4 shrink-0">
-              <DialogTitle>{t('pipelines.createPipeline')}</DialogTitle>
-            </DialogHeader>
-            <div className="flex-1 overflow-y-auto px-6 pb-6">
-              <PipelineFormComponent
-                onFinish={handleFinish}
-                onNewPipelineCreated={handleNewPipelineCreated}
-                isEditMode={isEditMode}
-                pipelineId={pipelineId}
-                disableForm={false}
-                showButtons={true}
-                onDeletePipeline={onDeletePipeline}
-                onCancel={() => {
-                  onCancel();
-                }}
-              />
-            </div>
-          </main>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  // 编辑流水线时的对话框
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="overflow-hidden p-0 !max-w-[80vw] h-[75vh] flex">
-        <SidebarProvider className="items-start w-full flex h-full min-h-0">
-          <Sidebar
-            collapsible="none"
-            className="hidden md:flex h-full min-h-0 w-40 border-r bg-white dark:bg-black"
-          >
-            <SidebarContent>
-              <SidebarGroup>
-                <SidebarGroupContent>
-                  <SidebarMenu>
-                    {menu.map((item) => (
-                      <SidebarMenuItem key={item.key}>
-                        <SidebarMenuButton
-                          asChild
-                          isActive={currentMode === item.key}
-                          onClick={() => setCurrentMode(item.key as DialogMode)}
-                        >
-                          <a href="#">
-                            {item.icon}
-                            <span>{item.label}</span>
-                          </a>
-                        </SidebarMenuButton>
-                      </SidebarMenuItem>
-                    ))}
-                  </SidebarMenu>
-                </SidebarGroupContent>
-              </SidebarGroup>
-            </SidebarContent>
-          </Sidebar>
-          <main className="flex flex-1 flex-col h-full min-h-0">
-            <DialogHeader
-              className="px-6 pt-6 pb-4 shrink-0 flex flex-row items-center justify-start"
-              style={{ height: '4rem' }}
-            >
-              <DialogTitle>{getDialogTitle()}</DialogTitle>
-              {currentMode === 'debug' && (
-                <div className="flex items-center gap-2 ml-2">
-                  <div
-                    className={`w-2.5 h-2.5 rounded-full ${
-                      isWebSocketConnected ? 'bg-green-500' : 'bg-red-500'
-                    }`}
-                    title={
-                      isWebSocketConnected
-                        ? t('pipelines.debugDialog.connected')
-                        : t('pipelines.debugDialog.disconnected')
-                    }
-                  />
-                  <span className="text-sm text-gray-600 dark:text-gray-400">
-                    {isWebSocketConnected
-                      ? t('pipelines.debugDialog.connected')
-                      : t('pipelines.debugDialog.disconnected')}
-                  </span>
-                </div>
-              )}
-            </DialogHeader>
-            <div
-              className="flex-1 overflow-y-auto px-6 pb-4 w-full"
-              style={{ height: 'calc(100% - 4rem)' }}
-            >
-              {currentMode === 'config' && (
-                <PipelineFormComponent
-                  onFinish={handleFinish}
-                  onNewPipelineCreated={handleNewPipelineCreated}
-                  isEditMode={isEditMode}
-                  pipelineId={pipelineId}
-                  disableForm={false}
-                  showButtons={true}
-                  onDeletePipeline={onDeletePipeline}
-                  onCancel={() => {
-                    onCancel();
-                  }}
-                />
-              )}
-
-              {currentMode === 'extensions' && pipelineId && (
-                <PipelineExtension pipelineId={pipelineId} />
-              )}
-
-              {currentMode === 'debug' && pipelineId && (
-                <DebugDialog
-                  open={true}
-                  pipelineId={pipelineId}
-                  isEmbedded={true}
-                  onConnectionStatusChange={setIsWebSocketConnected}
-                />
-              )}
-
-              {currentMode === 'monitoring' && pipelineId && (
-                <PipelineMonitoringTab
-                  pipelineId={pipelineId}
-                  onNavigateToMonitoring={() => {
-                    router.push(`/home/monitoring?pipelineId=${pipelineId}`);
-                    onOpenChange(false);
-                  }}
-                />
-              )}
-            </div>
-          </main>
-        </SidebarProvider>
-      </DialogContent>
-    </Dialog>
-  );
-}

web/src/app/home/pipelines/components/debug-dialog/DebugDialog.tsx

@@ -29,6 +29,17 @@ import rehypeSanitize from 'rehype-sanitize';
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import '@/styles/github-markdown.css';
+import {
+  User,
+  Users,
+  ImageIcon,
+  Paperclip,
+  Send,
+  Reply,
+  Music,
+  Code,
+  AlignLeft,
+} from 'lucide-react';
 
 interface DebugDialogProps {
   open: boolean;
@@ -71,7 +82,7 @@ export default function DebugDialog({
   const isInitializingRef = useRef<boolean>(false);
 
   const scrollToBottom = useCallback(() => {
-    // 使用setTimeout确保在DOM更新后执行滚动
+    // Use setTimeout to ensure scroll happens after DOM update
     setTimeout(() => {
       const scrollArea = document.querySelector('.scroll-area') as HTMLElement;
       if (scrollArea) {
@@ -80,7 +91,7 @@ export default function DebugDialog({
           behavior: 'smooth',
         });
       }
-      // 同时确保messagesEndRef也滚动到视图
+      // Also ensure messagesEndRef scrolls into view
       messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     }, 0);
   }, []);
@@ -100,10 +111,10 @@ export default function DebugDialog({
     [sessionType],
   );
 
-  // 初始化WebSocket连接
+  // Initialize WebSocket connection
   const initWebSocket = useCallback(
     async (pipelineId: string) => {
-      // 防止重复初始化
+      // Prevent duplicate initialization
       if (isInitializingRef.current) {
         return;
       }
@@ -111,13 +122,13 @@ export default function DebugDialog({
       try {
         isInitializingRef.current = true;
 
-        // 断开旧连接
+        // Disconnect old connection
         if (wsClientRef.current) {
           wsClientRef.current.disconnect();
           wsClientRef.current = null;
         }
 
-        // 创建新连接
+        // Create new connection
         const wsClient = new WebSocketClient(pipelineId, sessionType);
 
         wsClient
@@ -126,31 +137,31 @@ export default function DebugDialog({
             isInitializingRef.current = false;
           })
           .onMessage((wsMessage) => {
-            // 将 WebSocketMessage 转换为 Message 类型
+            // Convert WebSocketMessage to Message type
             const message: Message = {
               ...wsMessage,
               message_chain: wsMessage.message_chain as MessageChainComponent[],
             };
 
             setMessages((prevMessages) => {
-              // 查找是否已存在相同ID的消息
+              // Check if message with same ID already exists
               const existingIndex = prevMessages.findIndex(
                 (m) => m.id === message.id,
               );
 
               if (existingIndex >= 0) {
-                // 更新已存在的消息（流式输出）
+                // Update existing message (streaming output)
                 const newMessages = [...prevMessages];
                 newMessages[existingIndex] = message;
                 return newMessages;
               } else {
-                // 添加新消息
+                // Add new message
                 return [...prevMessages, message];
               }
             });
           })
           .onError((error) => {
-            console.error('WebSocket错误:', error);
+            console.error('WebSocket error:', error);
             setIsConnected(false);
             isInitializingRef.current = false;
             toast.error(t('pipelines.debugDialog.connectionError'));
@@ -166,7 +177,7 @@ export default function DebugDialog({
         await wsClient.connect();
         wsClientRef.current = wsClient;
       } catch (error) {
-        console.error('WebSocket连接失败:', error);
+        console.error('WebSocket connection failed:', error);
         setIsConnected(false);
         isInitializingRef.current = false;
         toast.error(t('pipelines.debugDialog.connectionFailed'));
@@ -175,17 +186,17 @@ export default function DebugDialog({
     [sessionType, t],
   );
 
-  // 在useEffect中监听messages变化时滚动
+  // Scroll when messages change
   useEffect(() => {
     scrollToBottom();
   }, [messages, scrollToBottom]);
 
-  // 监听 open 和 pipelineId 变化，进入时连接，离开时断开
+  // Watch open and pipelineId changes: connect on open, disconnect on close
   useEffect(() => {
     if (open) {
       setSelectedPipelineId(pipelineId);
     } else {
-      // 关闭对话框时立即断开WebSocket
+      // Disconnect WebSocket immediately when dialog closes
       if (wsClientRef.current) {
         wsClientRef.current.disconnect();
         wsClientRef.current = null;
@@ -195,7 +206,7 @@ export default function DebugDialog({
     }
 
     return () => {
-      // 组件卸载时断开WebSocket
+      // Disconnect WebSocket on component unmount
       if (wsClientRef.current) {
         wsClientRef.current.disconnect();
         wsClientRef.current = null;
@@ -204,17 +215,17 @@ export default function DebugDialog({
     };
   }, [open, pipelineId]);
 
-  // 监听 sessionType 和 selectedPipelineId 变化，重新加载消息和连接
+  // Reload messages and reconnect when sessionType or selectedPipelineId changes
   useEffect(() => {
     if (open) {
-      // 清空当前消息，避免显示旧的消息
+      // Clear current messages to avoid showing stale messages
       setMessages([]);
       loadMessages(selectedPipelineId);
       initWebSocket(selectedPipelineId);
     }
   }, [sessionType, selectedPipelineId, open, loadMessages, initWebSocket]);
 
-  // 通知父组件连接状态变化
+  // Notify parent of connection status changes
   useEffect(() => {
     onConnectionStatusChange?.(isConnected);
   }, [isConnected, onConnectionStatusChange]);
@@ -321,9 +332,9 @@ export default function DebugDialog({
 
       const messageChain = [];
 
-      // 添加引用消息(如果有)
+      // Add quoted message if present
       if (quotedMessage) {
-        // 获取被引用消息的Source组件以获取message_id
+        // Get message_id from the quoted message Source component
         const sourceComponent = quotedMessage.message_chain.find(
           (c) => c.type === 'Source',
         ) as Source | undefined;
@@ -353,7 +364,7 @@ export default function DebugDialog({
         });
       }
 
-      // 添加文本
+      // Add text content
       if (text_content) {
         messageChain.push({
           type: 'Plain',
@@ -361,7 +372,7 @@ export default function DebugDialog({
         });
       }
 
-      // 上传图片并添加到消息链
+      // Upload images and add to message chain
       for (const image of selectedImages) {
         try {
           const result = await httpClient.uploadWebSocketImage(
@@ -373,20 +384,20 @@ export default function DebugDialog({
             path: result.file_key,
           });
         } catch (error) {
-          console.error('图片上传失败:', error);
+          console.error('Image upload failed:', error);
           toast.error(t('pipelines.debugDialog.imageUploadFailed'));
         }
       }
 
-      // 清空输入框、图片和引用消息
+      // Clear input, images, and quoted message
       setInputValue('');
       setHasAt(false);
       setQuotedMessage(null);
       selectedImages.forEach((img) => URL.revokeObjectURL(img.preview));
       setSelectedImages([]);
 
-      // 通过WebSocket发送消息
-      // 不在本地添加消息，等待后端广播回来（带有正确的ID）
+      // Send message via WebSocket
+      // Do not add locally; wait for backend broadcast with correct ID
       wsClientRef.current.sendMessage(messageChain, streamOutput);
     } catch (error) {
       console.error('Failed to send message:', error);
@@ -407,7 +418,7 @@ export default function DebugDialog({
 
       case 'At': {
         const atComponent = component as At;
-        // 优先使用 display，如果没有则使用 target
+        // Prefer display name, fall back to target
         const displayName =
           atComponent.display || atComponent.target?.toString() || '';
         return (
@@ -420,7 +431,10 @@ export default function DebugDialog({
       case 'AtAll':
         return (
           <span key={index} className="inline-flex align-middle mx-1">
-            <AtBadge targetName="全体成员" readonly={true} />
+            <AtBadge
+              targetName={t('pipelines.debugDialog.allMembers')}
+              readonly={true}
+            />
           </span>
         );
 
@@ -449,10 +463,10 @@ export default function DebugDialog({
         const file = component as MessageChainComponent & { name?: string };
         return (
           <div key={index} className="my-2 flex items-center gap-2 text-sm">
-            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
-              <path d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" />
-            </svg>
-            <span>[文件] {file.name || 'Unknown'}</span>
+            <Paperclip className="size-4" />
+            <span>
+              [{t('pipelines.debugDialog.file')}] {file.name || 'Unknown'}
+            </span>
           </div>
         );
       }
@@ -462,15 +476,13 @@ export default function DebugDialog({
         const voiceUrl = voice.url || (voice.base64 ? voice.base64 : '');
 
         if (!voiceUrl) {
-          return <span key={index}>[语音]</span>;
+          return <span key={index}>[{t('pipelines.debugDialog.voice')}]</span>;
         }
 
         return (
           <div key={index} className="my-2 flex items-center gap-2">
-            <div className="flex items-center gap-2 px-3 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg">
-              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                <path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z" />
-              </svg>
+            <div className="flex items-center gap-2 px-3 py-2 bg-muted rounded-lg">
+              <Music className="size-5" />
               <audio
                 controls
                 src={voiceUrl}
@@ -480,7 +492,7 @@ export default function DebugDialog({
                 Your browser does not support the audio element.
               </audio>
               {voice.length && voice.length > 0 && (
-                <span className="text-xs text-gray-500 dark:text-gray-400">
+                <span className="text-xs text-muted-foreground">
                   {voice.length}s
                 </span>
               )}
@@ -494,7 +506,7 @@ export default function DebugDialog({
         return (
           <div
             key={index}
-            className="mb-2 pl-3 border-l-2 border-gray-400 dark:border-gray-500"
+            className="mb-2 pl-3 border-l-2 border-muted-foreground/50"
           >
             <div className="text-sm opacity-75">
               {quote.origin?.map((comp, idx) =>
@@ -506,7 +518,7 @@ export default function DebugDialog({
       }
 
       case 'Source':
-        // Source 不显示
+        // Source is not rendered
         return null;
 
       default:
@@ -515,7 +527,7 @@ export default function DebugDialog({
   };
 
   const getMessageTimestamp = (message: Message): number => {
-    // 首先尝试从message_chain中的Source组件获取时间戳
+    // Try to get timestamp from Source component in message_chain
     const sourceComponent = message.message_chain.find(
       (c) => c.type === 'Source',
     ) as Source | undefined;
@@ -524,8 +536,8 @@ export default function DebugDialog({
       return sourceComponent.timestamp;
     }
 
-    // 如果没有Source组件，使用message.timestamp
-    // 假设timestamp是ISO字符串，转换为Unix时间戳（秒）
+    // Fall back to message.timestamp if no Source component
+    // Assume ISO string, convert to Unix timestamp (seconds)
     if (message.timestamp) {
       return Math.floor(new Date(message.timestamp).getTime() / 1000);
     }
@@ -542,13 +554,13 @@ export default function DebugDialog({
     const hours = date.getHours().toString().padStart(2, '0');
     const minutes = date.getMinutes().toString().padStart(2, '0');
 
-    // 判断是否是今天
+    // Check if today
     const isToday = now.toDateString() === date.toDateString();
     if (isToday) {
       return `${hours}:${minutes}`;
     }
 
-    // 判断是否是昨天
+    // Check if yesterday
     const yesterday = new Date(now);
     yesterday.setDate(yesterday.getDate() - 1);
     const isYesterday = yesterday.toDateString() === date.toDateString();
@@ -556,7 +568,7 @@ export default function DebugDialog({
       return `${t('bots.yesterday')} ${hours}:${minutes}`;
     }
 
-    // 判断是否是今年
+    // Check if this year
     const isThisYear = now.getFullYear() === date.getFullYear();
     if (isThisYear) {
       const month = date.getMonth() + 1;
@@ -564,7 +576,7 @@ export default function DebugDialog({
       return t('bots.dateFormat', { month, day });
     }
 
-    // 更早的日期
+    // Earlier dates
     return t('bots.earlier');
   };
 
@@ -685,49 +697,37 @@ export default function DebugDialog({
 
   const renderContent = () => (
     <div className="flex flex-1 h-full min-h-0">
-      <div className="w-14 bg-white dark:bg-black p-2 pl-0  flex-shrink-0 flex flex-col justify-start gap-2">
+      <div className="w-14 p-2 pl-0 shrink-0 flex flex-col justify-start gap-2">
         <Button
           variant="ghost"
           size="icon"
-          className={`w-10 h-10 justify-center rounded-md transition-none ${
+          className={cn(
+            'w-10 h-10 justify-center rounded-md transition-none border-0 shadow-none',
             sessionType === 'person'
-              ? 'bg-[#2288ee] text-white hover:bg-[#2288ee] hover:text-white'
-              : 'bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700'
-          } border-0 shadow-none`}
+              ? 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground'
+              : 'bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+          )}
           onClick={() => setSessionType('person')}
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            className="w-6 h-6"
-          >
-            <path d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"></path>
-          </svg>
+          <User className="size-5" />
         </Button>
         <Button
           variant="ghost"
           size="icon"
-          className={`w-10 h-10 justify-center rounded-md transition-none ${
+          className={cn(
+            'w-10 h-10 justify-center rounded-md transition-none border-0 shadow-none',
             sessionType === 'group'
-              ? 'bg-[#2288ee] text-white hover:bg-[#2288ee] hover:text-white'
-              : 'bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700'
-          } border-0 shadow-none`}
+              ? 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground'
+              : 'bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+          )}
           onClick={() => setSessionType('group')}
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            className="w-6 h-6"
-          >
-            <path d="M2 22C2 17.5817 5.58172 14 10 14C14.4183 14 18 17.5817 18 22H16C16 18.6863 13.3137 16 10 16C6.68629 16 4 18.6863 4 22H2ZM10 13C6.685 13 4 10.315 4 7C4 3.685 6.685 1 10 1C13.315 1 16 3.685 16 7C16 10.315 13.315 13 10 13ZM10 11C12.21 11 14 9.21 14 7C14 4.79 12.21 3 10 3C7.79 3 6 4.79 6 7C6 9.21 7.79 11 10 11ZM18.2837 14.7028C21.0644 15.9561 23 18.752 23 22H21C21 19.564 19.5483 17.4671 17.4628 16.5271L18.2837 14.7028ZM17.5962 3.41321C19.5944 4.23703 21 6.20361 21 8.5C21 11.3702 18.8042 13.7252 16 13.9776V11.9646C17.6967 11.7222 19 10.264 19 8.5C19 7.11935 18.2016 5.92603 17.041 5.35635L17.5962 3.41321Z"></path>
-          </svg>
+          <Users className="size-5" />
         </Button>
       </div>
 
       <div className="flex-1 flex flex-col w-[10rem] h-full min-h-0">
-        <ScrollArea className="flex-1 p-6 overflow-y-auto min-h-0 bg-white dark:bg-black scroll-area">
+        <ScrollArea className="flex-1 p-6 overflow-y-auto min-h-0 scroll-area">
           <div className="space-y-6">
             {messages.length === 0 ? (
               <div className="text-center text-muted-foreground py-12 text-lg">
@@ -746,17 +746,15 @@ export default function DebugDialog({
                     className={cn(
                       'max-w-3xl px-5 py-3 rounded-2xl',
                       message.role === 'user'
-                        ? 'user-message-bubble bg-blue-100 dark:bg-blue-900 text-gray-900 dark:text-gray-100 rounded-br-none'
-                        : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-bl-none',
+                        ? 'user-message-bubble bg-primary/10 text-foreground rounded-br-none'
+                        : 'bg-muted text-foreground rounded-bl-none',
                     )}
                   >
                     {renderMessageContent(message)}
                     <div
                       className={cn(
                         'text-xs mt-2 flex items-center justify-between gap-2',
-                        message.role === 'user'
-                          ? 'text-gray-600 dark:text-gray-300'
-                          : 'text-gray-500 dark:text-gray-400',
+                        'text-muted-foreground',
                       )}
                     >
                       <div className="flex items-center gap-2">
@@ -767,12 +765,11 @@ export default function DebugDialog({
                         </span>
                         {hasPlainText(message) && (
                           <button
+                            type="button"
                             onClick={() => toggleRawMode(message)}
                             className={cn(
                               'px-1.5 py-0.5 rounded text-[10px] transition-colors',
-                              message.role === 'user'
-                                ? 'hover:bg-blue-200 dark:hover:bg-blue-800'
-                                : 'hover:bg-gray-200 dark:hover:bg-gray-700',
+                              'hover:bg-accent',
                             )}
                             title={
                               rawModeMessages.has(getMessageKey(message))
@@ -782,58 +779,27 @@ export default function DebugDialog({
                           >
                             {rawModeMessages.has(getMessageKey(message)) ? (
                               <span className="flex items-center gap-0.5">
-                                <svg
-                                  className="w-3 h-3"
-                                  viewBox="0 0 16 16"
-                                  fill="currentColor"
-                                >
-                                  <path d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z" />
-                                </svg>
+                                <Code className="size-3" />
                                 MD
                               </span>
                             ) : (
                               <span className="flex items-center gap-0.5">
-                                <svg
-                                  className="w-3 h-3"
-                                  fill="none"
-                                  viewBox="0 0 24 24"
-                                  stroke="currentColor"
-                                >
-                                  <path
-                                    strokeLinecap="round"
-                                    strokeLinejoin="round"
-                                    strokeWidth={2}
-                                    d="M4 6h16M4 12h16M4 18h7"
-                                  />
-                                </svg>
+                                <AlignLeft className="size-3" />
                                 {t('pipelines.debugDialog.showRaw')}
                               </span>
                             )}
                           </button>
                         )}
                         <button
+                          type="button"
                           onClick={() => setQuotedMessage(message)}
                           className={cn(
                             'px-1.5 py-0.5 rounded text-[10px] transition-colors flex items-center gap-0.5',
-                            message.role === 'user'
-                              ? 'hover:bg-blue-200 dark:hover:bg-blue-800'
-                              : 'hover:bg-gray-200 dark:hover:bg-gray-700',
+                            'hover:bg-accent',
                           )}
                           title={t('pipelines.debugDialog.reply')}
                         >
-                          <svg
-                            className="w-3 h-3"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                          >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth={2}
-                              d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"
-                            />
-                          </svg>
+                          <Reply className="size-3" />
                           {t('pipelines.debugDialog.reply')}
                         </button>
                       </div>
@@ -849,18 +815,18 @@ export default function DebugDialog({
           </div>
         </ScrollArea>
 
-        {/* 引用消息预览区域 */}
+        {/* Quoted message preview */}
         {quotedMessage && (
-          <div className="px-4 py-2 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
+          <div className="px-4 py-2 bg-muted/50 border-t">
             <div className="flex items-start gap-2">
-              <div className="flex-1 pl-3 border-l-2 border-[#2288ee]">
-                <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">
+              <div className="flex-1 pl-3 border-l-2 border-primary">
+                <div className="text-xs text-muted-foreground mb-1">
                   {t('pipelines.debugDialog.replyTo')}{' '}
                   {quotedMessage.role === 'user'
                     ? t('pipelines.debugDialog.userMessage')
                     : t('pipelines.debugDialog.botMessage')}
                 </div>
-                <div className="text-sm text-gray-700 dark:text-gray-300 line-clamp-2">
+                <div className="text-sm text-foreground/70 line-clamp-2">
                   {quotedMessage.message_chain
                     .filter((c) => c.type === 'Plain')
                     .map((c) => (c as Plain).text)
@@ -868,8 +834,9 @@ export default function DebugDialog({
                 </div>
               </div>
               <button
+                type="button"
                 onClick={() => setQuotedMessage(null)}
-                className="w-5 h-5 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+                className="w-5 h-5 text-muted-foreground hover:text-foreground"
               >
                 ×
               </button>
@@ -877,20 +844,21 @@ export default function DebugDialog({
           </div>
         )}
 
-        {/* 图片预览区域 */}
+        {/* Image preview area */}
         {selectedImages.length > 0 && (
-          <div className="px-4 pb-2 bg-white dark:bg-black">
+          <div className="px-4 pb-2">
             <div className="flex gap-2 flex-wrap">
               {selectedImages.map((image, index) => (
                 <div key={index} className="relative group">
                   <img
                     src={image.preview}
                     alt={`preview-${index}`}
-                    className="w-20 h-20 object-cover rounded-lg border border-gray-300 dark:border-gray-600"
+                    className="w-20 h-20 object-cover rounded-lg border"
                   />
                   <button
+                    type="button"
                     onClick={() => handleRemoveImage(index)}
-                    className="absolute -top-2 -right-2 w-5 h-5 bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+                    className="absolute -top-2 -right-2 w-5 h-5 bg-destructive text-destructive-foreground rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
                   >
                     ×
                   </button>
@@ -900,17 +868,16 @@ export default function DebugDialog({
           </div>
         )}
 
-        <div className="p-4 pb-0 bg-white dark:bg-black flex gap-2">
+        <div className="p-4 pb-0 flex gap-2">
           <div className="flex gap-2 items-center">
             <div className="flex items-center gap-1">
-              <span className="text-xs text-gray-500 dark:text-gray-400">
+              <span className="text-xs text-muted-foreground">
                 {t('pipelines.debugDialog.streamOutput')}
               </span>
               <Switch
                 checked={streamOutput}
                 onCheckedChange={setStreamOutput}
                 disabled={!isConnected}
-                className="data-[state=checked]:bg-[#2288ee]"
               />
             </div>
             <input
@@ -926,22 +893,10 @@ export default function DebugDialog({
               size="icon"
               onClick={() => fileInputRef.current?.click()}
               disabled={!isConnected || isUploading}
-              className="w-10 h-10 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
-              title="上传图片"
+              className="w-10 h-10 rounded-md hover:bg-accent"
+              title={t('pipelines.debugDialog.uploadImage')}
             >
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-                />
-              </svg>
+              <ImageIcon className="size-5" />
             </Button>
           </div>
           <div className="flex-1 flex items-center gap-2">
@@ -961,25 +916,23 @@ export default function DebugDialog({
                       : t('pipelines.debugDialog.groupChat'),
                 })}
                 disabled={!isConnected || isUploading}
-                className="flex-1 rounded-md px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 focus:border-[#2288ee] transition-none text-base disabled:opacity-50"
+                className="flex-1 rounded-md px-3 py-2 transition-none text-base disabled:opacity-50"
               />
               {showAtPopover && (
                 <div
                   ref={popoverRef}
-                  className="absolute bottom-full left-0 mb-2 w-auto rounded-md border bg-white dark:bg-gray-800 dark:border-gray-600 shadow-lg"
+                  className="absolute bottom-full left-0 mb-2 w-auto rounded-md border bg-popover text-popover-foreground shadow-lg"
                 >
                   <div
                     className={cn(
                       'flex items-center gap-2 px-4 py-1.5 rounded cursor-pointer',
-                      isHovering
-                        ? 'bg-gray-100 dark:bg-gray-700'
-                        : 'bg-white dark:bg-gray-800',
+                      isHovering ? 'bg-accent' : '',
                     )}
                     onClick={handleAtSelect}
                     onMouseEnter={() => setIsHovering(true)}
                     onMouseLeave={() => setIsHovering(false)}
                   >
-                    <span className="text-gray-800 dark:text-gray-200">
+                    <span>
                       @websocketbot - {t('pipelines.debugDialog.atTips')}
                     </span>
                   </div>
@@ -997,16 +950,23 @@ export default function DebugDialog({
               !isConnected ||
               isUploading
             }
-            className="rounded-md bg-[#2288ee] hover:bg-[#2288ee] w-20 text-white px-6 py-2 text-base font-medium transition-none flex items-center gap-2 shadow-none disabled:opacity-50"
+            className="rounded-md w-20 px-6 py-2 text-base font-medium transition-none flex items-center gap-2 shadow-none disabled:opacity-50"
           >
-            {isUploading ? '上传中...' : t('pipelines.debugDialog.send')}
+            {isUploading ? (
+              t('pipelines.debugDialog.uploading')
+            ) : (
+              <>
+                <Send className="size-4" />
+                {t('pipelines.debugDialog.send')}
+              </>
+            )}
           </Button>
         </div>
       </div>
     </div>
   );
 
-  // 如果是嵌入模式，直接返回内容
+  // Embedded mode: return content directly
   if (isEmbedded) {
     return (
       <>
@@ -1022,10 +982,10 @@ export default function DebugDialog({
     );
   }
 
-  // 原有的Dialog包装
+  // Dialog wrapper mode
   return (
     <>
-      <DialogContent className="!max-w-[70vw] max-w-6xl h-[70vh] p-6 flex flex-col rounded-2xl shadow-2xl bg-white dark:bg-black">
+      <DialogContent className="!max-w-[70vw] max-w-6xl h-[70vh] p-6 flex flex-col rounded-2xl shadow-2xl">
         {renderContent()}
       </DialogContent>
       <ImagePreviewDialog

web/src/app/home/pipelines/components/pipeline-card/pipelineCard.module.css

@@ -3,7 +3,7 @@
   height: 10rem;
   background-color: #fff;
   border-radius: 10px;
-  box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.2);
+  border: 1px solid #e4e4e7;
   padding: 1rem;
   cursor: pointer;
   display: flex;
@@ -15,15 +15,15 @@
 
 :global(.dark) .cardContainer {
   background-color: #1f1f22;
-  box-shadow: 0;
+  border-color: #27272a;
 }
 
 .cardContainer:hover {
-  box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.1);
+  border-color: #a1a1aa;
 }
 
 :global(.dark) .cardContainer:hover {
-  box-shadow: 0;
+  border-color: #3f3f46;
 }
 
 .basicInfoContainer {

web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx

@@ -5,7 +5,6 @@ import {
   PipelineConfigTab,
   PipelineConfigStage,
 } from '@/app/infra/entities/pipeline';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import DynamicFormComponent from '@/app/home/components/dynamic-form/DynamicFormComponent';
 import N8nAuthFormComponent from '@/app/home/components/dynamic-form/N8nAuthFormComponent';
 import { Button } from '@/components/ui/button';
@@ -32,6 +31,8 @@ import {
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
 import { extractI18nObject } from '@/i18n/I18nProvider';
+import { cn } from '@/lib/utils';
+import { Info, Brain, Zap, Shield, FileOutput } from 'lucide-react';
 
 export default function PipelineFormComponent({
   onFinish,
@@ -49,7 +50,7 @@ export default function PipelineFormComponent({
   onFinish: () => void;
   onNewPipelineCreated: (pipelineId: string) => void;
   onDeletePipeline: () => void;
-  onCancel: () => void;
+  onCancel?: () => void;
 }) {
   const { t } = useTranslation();
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
@@ -85,16 +86,52 @@ export default function PipelineFormComponent({
       });
 
   type FormValues = z.infer<typeof formSchema>;
-  // 这里不好，可以改成enum等
-  const formLabelList: FormLabel[] = isEditMode
+  // Section navigation items with icons
+  const SECTION_ICONS: Record<string, React.ElementType> = {
+    basic: Info,
+    ai: Brain,
+    trigger: Zap,
+    safety: Shield,
+    output: FileOutput,
+  };
+
+  const formLabelList: SectionItem[] = isEditMode
     ? [
-        { label: t('pipelines.basicInfo'), name: 'basic' },
-        { label: t('pipelines.aiCapabilities'), name: 'ai' },
-        { label: t('pipelines.triggerConditions'), name: 'trigger' },
-        { label: t('pipelines.safetyControls'), name: 'safety' },
-        { label: t('pipelines.outputProcessing'), name: 'output' },
+        {
+          label: t('pipelines.basicInfo'),
+          name: 'basic',
+          icon: SECTION_ICONS.basic,
+        },
+        {
+          label: t('pipelines.aiCapabilities'),
+          name: 'ai',
+          icon: SECTION_ICONS.ai,
+        },
+        {
+          label: t('pipelines.triggerConditions'),
+          name: 'trigger',
+          icon: SECTION_ICONS.trigger,
+        },
+        {
+          label: t('pipelines.safetyControls'),
+          name: 'safety',
+          icon: SECTION_ICONS.safety,
+        },
+        {
+          label: t('pipelines.outputProcessing'),
+          name: 'output',
+          icon: SECTION_ICONS.output,
+        },
       ]
-    : [{ label: t('pipelines.basicInfo'), name: 'basic' }];
+    : [
+        {
+          label: t('pipelines.basicInfo'),
+          name: 'basic',
+          icon: SECTION_ICONS.basic,
+        },
+      ];
+
+  const [activeSection, setActiveSection] = useState(formLabelList[0].name);
 
   const [aiConfigTabSchema, setAIConfigTabSchema] =
     useState<PipelineConfigTab>();
@@ -269,12 +306,12 @@ export default function PipelineFormComponent({
     stage: PipelineConfigStage,
     formName: keyof FormValues,
   ) {
-    // 如果是 AI 配置，需要特殊处理
+    // Special handling for AI config section
     if (formName === 'ai') {
-      // 获取当前选择的 runner
+      // Get the currently selected runner
       const currentRunner = form.watch('ai.runner.runner');
 
-      // 如果是 runner 配置项，直接渲染
+      // If this is the runner selector stage, render it directly
       if (stage.name === 'runner') {
         return (
           <div key={stage.name} className="space-y-4 mb-6">
@@ -282,7 +319,7 @@ export default function PipelineFormComponent({
               {extractI18nObject(stage.label)}
             </div>
             {stage.description && (
-              <div className="text-sm text-gray-500">
+              <div className="text-sm text-muted-foreground">
                 {extractI18nObject(stage.description)}
               </div>
             )}
@@ -301,12 +338,12 @@ export default function PipelineFormComponent({
         );
       }
 
-      // 如果不是当前选择的 runner 对应的配置项，则不渲染
+      // Do not render if not the currently selected runner
       if (stage.name !== currentRunner) {
         return null;
       }
 
-      // 对于n8n-service-api配置，使用N8nAuthFormComponent处理表单联动
+      // For n8n-service-api config, use N8nAuthFormComponent for form linkage
       if (stage.name === 'n8n-service-api') {
         return (
           <div key={stage.name} className="space-y-4 mb-6">
@@ -314,7 +351,7 @@ export default function PipelineFormComponent({
               {extractI18nObject(stage.label)}
             </div>
             {stage.description && (
-              <div className="text-sm text-gray-500">
+              <div className="text-sm text-muted-foreground">
                 {extractI18nObject(stage.description)}
               </div>
             )}
@@ -340,7 +377,7 @@ export default function PipelineFormComponent({
           {extractI18nObject(stage.label)}
         </div>
         {stage.description && (
-          <div className="text-sm text-gray-500">
+          <div className="text-sm text-muted-foreground">
             {extractI18nObject(stage.description)}
           </div>
         )}
@@ -389,7 +426,7 @@ export default function PipelineFormComponent({
           onFinish();
           toast.success(t('common.copySuccess'));
           setShowCopyConfirm(false);
-          onCancel();
+          onCancel?.();
         })
         .catch((err) => {
           toast.error(t('pipelines.createError') + err.msg);
@@ -399,37 +436,46 @@ export default function PipelineFormComponent({
 
   return (
     <>
-      <div className="!max-w-[70vw] max-w-6xl h-full p-0 flex flex-col bg-white dark:bg-black">
+      <div className="h-full p-0 flex flex-col">
         <Form {...form}>
           <form
             id="pipeline-form"
             onSubmit={form.handleSubmit(handleFormSubmit)}
             className="h-full flex flex-col flex-1 min-h-0 mb-2"
           >
-            <div className="flex-1 flex flex-col min-h-0">
-              <Tabs
-                defaultValue={formLabelList[0].name}
-                className="h-full flex flex-col flex-1 min-h-0"
+            <div className="flex-1 flex min-h-0">
+              {/* Vertical section navigation (only show when multiple sections) */}
+              {formLabelList.length > 1 && (
+                <nav className="w-44 shrink-0 pr-4 mr-4 border-r overflow-y-auto">
+                  <ul className="space-y-1">
+                    {formLabelList.map((section) => {
+                      const Icon = section.icon;
+                      return (
+                        <li key={section.name}>
+                          <button
+                            type="button"
+                            onClick={() => setActiveSection(section.name)}
+                            className={cn(
+                              'w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors text-left',
+                              activeSection === section.name
+                                ? 'bg-accent text-accent-foreground'
+                                : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+                            )}
                           >
-                <TabsList>
-                  {formLabelList.map((formLabel) => (
-                    <TabsTrigger key={formLabel.name} value={formLabel.name}>
-                      {formLabel.label}
-                    </TabsTrigger>
-                  ))}
-                </TabsList>
+                            <Icon className="size-4 shrink-0" />
+                            {section.label}
+                          </button>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </nav>
+              )}
 
-                <div
-                  id="pipeline-form-content"
-                  className="flex-1 overflow-y-auto min-h-0"
-                >
-                  {formLabelList.map((formLabel) => (
-                    <TabsContent
-                      key={formLabel.name}
-                      value={formLabel.name}
-                      className="overflow-y-auto max-h-full"
-                    >
-                      {formLabel.name === 'basic' && (
+              {/* Content panel */}
+              <div className="flex-1 overflow-y-auto min-h-0">
+                {/* Basic info section */}
+                {activeSection === 'basic' && (
                   <div className="space-y-6">
                     {/* Name and Emoji in same row */}
                     <div className="flex gap-4 items-start">
@@ -486,9 +532,10 @@ export default function PipelineFormComponent({
                   </div>
                 )}
 
+                {/* Dynamic config sections (edit mode only) */}
                 {isEditMode && (
                   <>
-                          {formLabel.name === 'ai' && aiConfigTabSchema && (
+                    {activeSection === 'ai' && aiConfigTabSchema && (
                       <div className="space-y-6">
                         {aiConfigTabSchema.stages.map((stage) =>
                           renderDynamicForms(stage, 'ai'),
@@ -496,8 +543,7 @@ export default function PipelineFormComponent({
                       </div>
                     )}
 
-                          {formLabel.name === 'trigger' &&
-                            triggerConfigTabSchema && (
+                    {activeSection === 'trigger' && triggerConfigTabSchema && (
                       <div className="space-y-6">
                         {triggerConfigTabSchema.stages.map((stage) =>
                           renderDynamicForms(stage, 'trigger'),
@@ -505,8 +551,7 @@ export default function PipelineFormComponent({
                       </div>
                     )}
 
-                          {formLabel.name === 'safety' &&
-                            safetyConfigTabSchema && (
+                    {activeSection === 'safety' && safetyConfigTabSchema && (
                       <div className="space-y-6">
                         {safetyConfigTabSchema.stages.map((stage) =>
                           renderDynamicForms(stage, 'safety'),
@@ -514,8 +559,7 @@ export default function PipelineFormComponent({
                       </div>
                     )}
 
-                          {formLabel.name === 'output' &&
-                            outputConfigTabSchema && (
+                    {activeSection === 'output' && outputConfigTabSchema && (
                       <div className="space-y-6">
                         {outputConfigTabSchema.stages.map((stage) =>
                           renderDynamicForms(stage, 'output'),
@@ -524,15 +568,12 @@ export default function PipelineFormComponent({
                     )}
                   </>
                 )}
-                    </TabsContent>
-                  ))}
               </div>
-              </Tabs>
             </div>
           </form>
-          {/* 按钮栏移到 Tabs 外部，始终固定底部 */}
+          {/* Button bar pinned to bottom */}
           {showButtons && (
-            <div className="flex justify-end items-center gap-2 pt-4 border-t mb-0 bg-white dark:bg-black sticky bottom-0 z-10">
+            <div className="flex justify-end items-center gap-2 pt-4 border-t mb-0 sticky bottom-0 z-10">
               {isEditMode && hasUnsavedChanges && (
                 <div className="text-amber-600 dark:text-amber-400 text-sm flex items-center gap-1.5 mr-auto">
                   <span className="inline-block w-1.5 h-1.5 rounded-full bg-amber-500" />
@@ -551,7 +592,7 @@ export default function PipelineFormComponent({
               )}
 
               {isEditMode && isDefaultPipeline && (
-                <div className="text-gray-500 text-sm h-full flex items-center mr-2">
+                <div className="text-muted-foreground text-sm h-full flex items-center mr-2">
                   {t('pipelines.defaultPipelineCannotDelete')}
                 </div>
               )}
@@ -570,15 +611,12 @@ export default function PipelineFormComponent({
               <Button type="submit" form="pipeline-form">
                 {isEditMode ? t('common.save') : t('common.submit')}
               </Button>
-              <Button type="button" variant="outline" onClick={onCancel}>
-                {t('common.cancel')}
-              </Button>
             </div>
           )}
         </Form>
       </div>
 
-      {/* 删除确认对话框 */}
+      {/* Delete confirmation dialog */}
       <Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
         <DialogContent>
           <DialogHeader>
@@ -599,7 +637,7 @@ export default function PipelineFormComponent({
         </DialogContent>
       </Dialog>
 
-      {/* 复制确认对话框 */}
+      {/* Copy confirmation dialog */}
       <Dialog open={showCopyConfirm} onOpenChange={setShowCopyConfirm}>
         <DialogContent>
           <DialogHeader>
@@ -617,7 +655,8 @@ export default function PipelineFormComponent({
     </>
   );
 }
-interface FormLabel {
+interface SectionItem {
   label: string;
   name: string;
+  icon: React.ElementType;
 }

web/src/app/home/pipelines/components/pipeline-form/pipelineFormStyle.module.css

@@ -1,12 +0,0 @@
-.formItemSubtitle {
-  font-size: 18px;
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-
-.changeFormButtonGroupContainer {
-  width: 320px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}

web/src/app/home/pipelines/page.tsx

@@ -1,195 +1,21 @@
 'use client';
-import { useState, useEffect } from 'react';
-import CreateCardComponent from '@/app/infra/basic-component/create-card-component/CreateCardComponent';
-import { httpClient } from '@/app/infra/http/HttpClient';
-import { PipelineCardVO } from '@/app/home/pipelines/components/pipeline-card/PipelineCardVO';
-import PipelineCard from '@/app/home/pipelines/components/pipeline-card/PipelineCard';
-import styles from './pipelineConfig.module.css';
-import { toast } from 'sonner';
+
+import { useSearchParams } from 'next/navigation';
 import { useTranslation } from 'react-i18next';
-import PipelineDialog from './PipelineDetailDialog';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { systemInfo } from '@/app/infra/http';
+import PipelineDetailContent from './PipelineDetailContent';
 
-export default function PluginConfigPage() {
+export default function PipelineConfigPage() {
   const { t } = useTranslation();
-  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
-  const [isEditForm, setIsEditForm] = useState(false);
-  const [pipelineList, setPipelineList] = useState<PipelineCardVO[]>([]);
-  const [selectedPipelineId, setSelectedPipelineId] = useState('');
-  const [sortByValue, setSortByValue] = useState<string>('created_at');
-  const [sortOrderValue, setSortOrderValue] = useState<string>('DESC');
+  const searchParams = useSearchParams();
+  const detailId = searchParams.get('id');
 
-  useEffect(() => {
-    // Load sort preference from localStorage
-    const savedSortBy = localStorage.getItem('pipeline_sort_by');
-    const savedSortOrder = localStorage.getItem('pipeline_sort_order');
-
-    if (savedSortBy && savedSortOrder) {
-      setSortByValue(savedSortBy);
-      setSortOrderValue(savedSortOrder);
-      getPipelines(savedSortBy, savedSortOrder);
-    } else {
-      getPipelines();
-    }
-  }, []);
-
-  function getPipelines(
-    sortBy: string = sortByValue,
-    sortOrder: string = sortOrderValue,
-  ) {
-    httpClient
-      .getPipelines(sortBy, sortOrder)
-      .then((value) => {
-        const currentTime = new Date();
-        const pipelineList = value.pipelines.map((pipeline) => {
-          const lastUpdatedTimeAgo = Math.floor(
-            (currentTime.getTime() -
-              new Date(
-                pipeline.updated_at ?? currentTime.getTime(),
-              ).getTime()) /
-              1000 /
-              60 /
-              60 /
-              24,
-          );
-
-          const lastUpdatedTimeAgoText =
-            lastUpdatedTimeAgo > 0
-              ? ` ${lastUpdatedTimeAgo} ${t('pipelines.daysAgo')}`
-              : t('pipelines.today');
-
-          return new PipelineCardVO({
-            lastUpdatedTimeAgo: lastUpdatedTimeAgoText,
-            description: pipeline.description,
-            id: pipeline.uuid ?? '',
-            name: pipeline.name,
-            emoji: pipeline.emoji,
-            isDefault: pipeline.is_default ?? false,
-          });
-        });
-        setPipelineList(pipelineList);
-      })
-      .catch((error) => {
-        toast.error(t('pipelines.getPipelineListError') + error.message);
-      });
-  }
-
-  const handlePipelineClick = (pipelineId: string) => {
-    setSelectedPipelineId(pipelineId);
-    setIsEditForm(true);
-    setDialogOpen(true);
-  };
-
-  const handleCreateNew = () => {
-    const maxPipelines = systemInfo.limitation?.max_pipelines ?? -1;
-    if (maxPipelines >= 0 && pipelineList.length >= maxPipelines) {
-      toast.error(t('limitation.maxPipelinesReached', { max: maxPipelines }));
-      return;
-    }
-    setIsEditForm(false);
-    setSelectedPipelineId('');
-    setDialogOpen(true);
-  };
-
-  function handleSortChange(value: string) {
-    const [newSortBy, newSortOrder] = value.split(',').map((s) => s.trim());
-    setSortByValue(newSortBy);
-    setSortOrderValue(newSortOrder);
-
-    // Save sort preference to localStorage
-    localStorage.setItem('pipeline_sort_by', newSortBy);
-    localStorage.setItem('pipeline_sort_order', newSortOrder);
-
-    getPipelines(newSortBy, newSortOrder);
+  if (detailId) {
+    return <PipelineDetailContent id={detailId} />;
   }
 
   return (
-    <div className={styles.configPageContainer}>
-      <PipelineDialog
-        open={dialogOpen}
-        onOpenChange={setDialogOpen}
-        pipelineId={selectedPipelineId || undefined}
-        isEditMode={isEditForm}
-        onFinish={() => {
-          getPipelines();
-        }}
-        onNewPipelineCreated={(pipelineId) => {
-          getPipelines();
-          setSelectedPipelineId(pipelineId);
-          setIsEditForm(true);
-          setDialogOpen(true);
-        }}
-        onDeletePipeline={() => {
-          getPipelines();
-          setDialogOpen(false);
-        }}
-        onCancel={() => {
-          setDialogOpen(false);
-        }}
-      />
-
-      <div className="flex flex-row justify-between items-center mb-4 px-[0.8rem]">
-        <Select
-          value={`${sortByValue},${sortOrderValue}`}
-          onValueChange={handleSortChange}
-        >
-          <SelectTrigger className="w-[180px] cursor-pointer bg-[#ffffff] dark:bg-[#2a2a2e]">
-            <SelectValue placeholder={t('pipelines.sortBy')} />
-          </SelectTrigger>
-          <SelectContent className="bg-[#ffffff] dark:bg-[#2a2a2e]">
-            <SelectItem
-              value="created_at,DESC"
-              className="text-gray-900 dark:text-gray-100"
-            >
-              {t('pipelines.newestCreated')}
-            </SelectItem>
-            <SelectItem
-              value="created_at,ASC"
-              className="text-gray-900 dark:text-gray-100"
-            >
-              {t('pipelines.earliestCreated')}
-            </SelectItem>
-            <SelectItem
-              value="updated_at,DESC"
-              className="text-gray-900 dark:text-gray-100"
-            >
-              {t('pipelines.recentlyEdited')}
-            </SelectItem>
-            <SelectItem
-              value="updated_at,ASC"
-              className="text-gray-900 dark:text-gray-100"
-            >
-              {t('pipelines.earliestEdited')}
-            </SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-      <div className={styles.pipelineListContainer}>
-        <CreateCardComponent
-          width={'100%'}
-          height={'10rem'}
-          plusSize={'90px'}
-          onClick={handleCreateNew}
-        />
-
-        {pipelineList.map((pipeline) => {
-          return (
-            <div
-              key={pipeline.id}
-              onClick={() => handlePipelineClick(pipeline.id)}
-            >
-              <PipelineCard cardVO={pipeline} />
-            </div>
-          );
-        })}
-      </div>
+    <div className="flex h-full items-center justify-center text-muted-foreground">
+      <p>{t('pipelines.selectFromSidebar')}</p>
     </div>
   );
 }

web/src/app/home/plugins/PluginDetailContent.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { useEffect } from 'react';
+import PluginForm from '@/app/home/plugins/components/plugin-installed/plugin-form/PluginForm';
+import PluginReadme from '@/app/home/plugins/components/plugin-installed/plugin-readme/PluginReadme';
+import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
+import { useTranslation } from 'react-i18next';
+import { Badge } from '@/components/ui/badge';
+import { Bug } from 'lucide-react';
+
+/**
+ * Plugin detail page content.
+ * The `id` prop is the composite key "author/name".
+ */
+export default function PluginDetailContent({ id }: { id: string }) {
+  const { t } = useTranslation();
+  const { plugins, setDetailEntityName, refreshPlugins } = useSidebarData();
+
+  // Parse "author/name" composite key
+  const slashIndex = id.indexOf('/');
+  const pluginAuthor = slashIndex >= 0 ? id.substring(0, slashIndex) : '';
+  const pluginName = slashIndex >= 0 ? id.substring(slashIndex + 1) : id;
+
+  const plugin = plugins.find((p) => p.id === id);
+
+  // Set breadcrumb entity name
+  useEffect(() => {
+    setDetailEntityName(plugin?.name ?? `${pluginAuthor}/${pluginName}`);
+    return () => setDetailEntityName(null);
+  }, [plugin, pluginAuthor, pluginName, setDetailEntityName]);
+
+  function handleFormSubmit(timeout?: number) {
+    if (timeout) {
+      setTimeout(() => {
+        refreshPlugins();
+      }, timeout);
+    } else {
+      refreshPlugins();
+    }
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex items-center gap-3 pb-4 shrink-0">
+        <h1 className="text-xl font-semibold">
+          {pluginAuthor}/{pluginName}
+        </h1>
+        {plugin?.debug ? (
+          <Badge
+            variant="outline"
+            className="text-[0.7rem] border-orange-400 text-orange-400"
+          >
+            <Bug className="size-3.5" />
+            {t('plugins.debugging')}
+          </Badge>
+        ) : plugin?.installSource === 'github' ? (
+          <Badge
+            variant="outline"
+            className="text-[0.7rem] border-blue-400 text-blue-400"
+          >
+            {t('plugins.fromGithub')}
+          </Badge>
+        ) : plugin?.installSource === 'local' ? (
+          <Badge
+            variant="outline"
+            className="text-[0.7rem] border-green-400 text-green-400"
+          >
+            {t('plugins.fromLocal')}
+          </Badge>
+        ) : plugin?.installSource === 'marketplace' ? (
+          <Badge
+            variant="outline"
+            className="text-[0.7rem] border-purple-400 text-purple-400"
+          >
+            {t('plugins.fromMarketplace')}
+          </Badge>
+        ) : null}
+      </div>
+
+      <div className="flex flex-1 flex-row overflow-hidden min-h-0 gap-6 max-w-full">
+        {/* Left side - Config */}
+        <div className="w-[380px] flex-shrink-0 overflow-y-auto overflow-x-hidden">
+          <PluginForm
+            pluginAuthor={pluginAuthor}
+            pluginName={pluginName}
+            onFormSubmit={handleFormSubmit}
+          />
+        </div>
+        {/* Right side - Readme */}
+        <div className="flex-1 overflow-y-auto overflow-x-hidden min-w-0">
+          <PluginReadme pluginAuthor={pluginAuthor} pluginName={pluginName} />
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx

@@ -1,10 +1,9 @@
 'use client';
 
 import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { useRouter } from 'next/navigation';
 import { PluginCardVO } from '@/app/home/plugins/components/plugin-installed/PluginCardVO';
 import PluginCardComponent from '@/app/home/plugins/components/plugin-installed/plugin-card/PluginCardComponent';
-import PluginForm from '@/app/home/plugins/components/plugin-installed/plugin-form/PluginForm';
-import PluginReadme from '@/app/home/plugins/components/plugin-installed/plugin-readme/PluginReadme';
 import styles from '@/app/home/plugins/plugins.module.css';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { getCloudServiceClientSync } from '@/app/infra/http';
@@ -37,11 +36,8 @@ enum PluginOperationType {
 const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
   (props, ref) => {
     const { t } = useTranslation();
+    const router = useRouter();
     const [pluginList, setPluginList] = useState<PluginCardVO[]>([]);
-    const [detailModalOpen, setDetailModalOpen] = useState<boolean>(false);
-    const [selectedPlugin, setSelectedPlugin] = useState<PluginCardVO | null>(
-      null,
-    );
     const [showOperationModal, setShowOperationModal] = useState(false);
     const [operationType, setOperationType] = useState<PluginOperationType>(
       PluginOperationType.DELETE,
@@ -163,8 +159,8 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
     }));
 
     function handlePluginClick(plugin: PluginCardVO) {
-      setSelectedPlugin(plugin);
-      setDetailModalOpen(true);
+      const pluginId = `${plugin.author}/${plugin.name}`;
+      router.push(`/home/plugins?id=${encodeURIComponent(pluginId)}`);
     }
 
     function handlePluginDelete(plugin: PluginCardVO) {
@@ -348,50 +344,6 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
           </div>
         ) : (
           <div className={`${styles.pluginListContainer}`}>
-            <Dialog open={detailModalOpen} onOpenChange={setDetailModalOpen}>
-              <DialogContent className="sm:max-w-[1100px] max-w-[95vw] max-h-[85vh] p-0 flex flex-col">
-                <DialogHeader className="px-6 pt-6 pb-2 border-b">
-                  <DialogTitle>
-                    {selectedPlugin &&
-                      `${selectedPlugin.author}/${selectedPlugin.name}`}
-                  </DialogTitle>
-                </DialogHeader>
-                <div className="flex-1 flex flex-row overflow-hidden min-h-0">
-                  {/* Left side - Readme */}
-                  <div className="flex-1 overflow-y-auto border-r min-w-0">
-                    {selectedPlugin && (
-                      <PluginReadme
-                        pluginAuthor={selectedPlugin.author}
-                        pluginName={selectedPlugin.name}
-                      />
-                    )}
-                  </div>
-                  {/* Right side - Config */}
-                  <div className="w-[380px] flex-shrink-0 overflow-y-auto px-4">
-                    {selectedPlugin && (
-                      <PluginForm
-                        pluginAuthor={selectedPlugin.author}
-                        pluginName={selectedPlugin.name}
-                        onFormSubmit={(timeout?: number) => {
-                          setDetailModalOpen(false);
-                          if (timeout) {
-                            setTimeout(() => {
-                              getPluginList();
-                            }, timeout);
-                          } else {
-                            getPluginList();
-                          }
-                        }}
-                        onFormCancel={() => {
-                          setDetailModalOpen(false);
-                        }}
-                      />
-                    )}
-                  </div>
-                </div>
-              </DialogContent>
-            </Dialog>
-
             {pluginList.map((vo, index) => {
               return (
                 <div key={index}>

web/src/app/home/plugins/components/plugin-installed/plugin-card/PluginCardComponent.tsx

@@ -31,7 +31,7 @@ export default function PluginCardComponent({
   return (
     <>
       <div
-        className="w-[100%] h-[10rem] bg-white rounded-[10px] shadow-[0px_2px_2px_0_rgba(0,0,0,0.2)] p-[1.2rem] cursor-pointer dark:bg-[#1f1f22] relative transition-all duration-200 hover:shadow-[0px_3px_6px_0_rgba(0,0,0,0.12)] hover:scale-[1.005]"
+        className="w-[100%] h-[10rem] bg-white rounded-[10px] border border-[#e4e4e7] dark:border-[#27272a] p-[1.2rem] cursor-pointer dark:bg-[#1f1f22] relative transition-all duration-200 hover:border-[#a1a1aa] dark:hover:border-[#3f3f46]"
         onClick={() => onCardClick()}
       >
         <div className="w-full h-full flex flex-row items-start justify-start gap-[1.2rem]">

web/src/app/home/plugins/components/plugin-installed/plugin-form/PluginForm.tsx

@@ -13,12 +13,10 @@ export default function PluginForm({
   pluginAuthor,
   pluginName,
   onFormSubmit,
-  onFormCancel,
 }: {
   pluginAuthor: string;
   pluginName: string;
   onFormSubmit: (timeout?: number) => void;
-  onFormCancel: () => void;
 }) {
   const { t } = useTranslation();
   const [pluginInfo, setPluginInfo] = useState<Plugin>();
@@ -195,6 +193,7 @@ export default function PluginForm({
         )}
       </div>
 
+      {pluginInfo.manifest.manifest.spec.config.length > 0 && (
         <div className="sticky bottom-0 left-0 right-0 bg-background border-t p-4 mt-4">
           <div className="flex justify-end gap-2">
             <Button
@@ -204,11 +203,9 @@ export default function PluginForm({
             >
               {isSaving ? t('plugins.saving') : t('plugins.saveConfig')}
             </Button>
-          <Button type="button" variant="outline" onClick={onFormCancel}>
-            {t('plugins.cancel')}
-          </Button>
           </div>
         </div>
+      )}
     </div>
   );
 }

web/src/app/home/plugins/components/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx

@@ -85,7 +85,7 @@ export default function PluginMarketCardComponent({
 
   return (
     <div
-      className="w-[100%] h-auto min-h-[8rem] sm:min-h-[9rem] bg-white rounded-[10px] shadow-[0px_0px_4px_0_rgba(0,0,0,0.2)] p-3 sm:p-[1rem] hover:shadow-[0px_3px_6px_0_rgba(0,0,0,0.12)] transition-all duration-200 hover:scale-[1.005] dark:bg-[#1f1f22] relative"
+      className="w-[100%] h-auto min-h-[8rem] sm:min-h-[9rem] bg-white rounded-[10px] border border-[#e4e4e7] dark:border-[#27272a] p-3 sm:p-[1rem] hover:border-[#a1a1aa] dark:hover:border-[#3f3f46] transition-all duration-200 dark:bg-[#1f1f22] relative"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >

web/src/app/home/plugins/mcp-server/mcp-card/MCPCardComponent.tsx

@@ -84,7 +84,7 @@ export default function MCPCardComponent({
 
   return (
     <div
-      className="w-[100%] h-[10rem] bg-white dark:bg-[#1f1f22] rounded-[10px] shadow-[0px_2px_2px_0_rgba(0,0,0,0.2)] dark:shadow-none p-[1.2rem] cursor-pointer transition-all duration-200 hover:shadow-[0px_2px_8px_0_rgba(0,0,0,0.1)] dark:hover:shadow-none"
+      className="w-[100%] h-[10rem] bg-white dark:bg-[#1f1f22] rounded-[10px] border border-[#e4e4e7] dark:border-[#27272a] p-[1.2rem] cursor-pointer transition-all duration-200 hover:border-[#a1a1aa] dark:hover:border-[#3f3f46]"
       onClick={onCardClick}
     >
       <div className="w-full h-full flex flex-row items-start justify-start gap-[1.2rem]">

web/src/app/home/plugins/page.tsx

@@ -2,19 +2,9 @@
 import PluginInstalledComponent, {
   PluginInstalledComponentRef,
 } from '@/app/home/plugins/components/plugin-installed/PluginInstalledComponent';
-import MarketPage from '@/app/home/plugins/components/plugin-market/PluginMarketComponent';
-import MCPServerComponent from '@/app/home/plugins/mcp-server/MCPServerComponent';
-import MCPFormDialog from '@/app/home/plugins/mcp-server/mcp-form/MCPFormDialog';
-import MCPDeleteConfirmDialog from '@/app/home/plugins/mcp-server/mcp-form/MCPDeleteConfirmDialog';
+import PluginDetailContent from './PluginDetailContent';
 import styles from './plugins.module.css';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-} from '@/components/ui/card';
 import {
   PlusIcon,
   ChevronDownIcon,
@@ -47,12 +37,18 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
-import { PluginV4 } from '@/app/infra/entities/plugin';
 import { systemInfo } from '@/app/infra/http/HttpClient';
 import { ApiRespPluginSystemStatus } from '@/app/infra/entities/api';
 
@@ -83,12 +79,23 @@ interface GithubAsset {
 }
 
 export default function PluginConfigPage() {
+  const searchParams = useSearchParams();
+  const detailId = searchParams.get('id');
+
+  // Show plugin detail view when ?id= query param is present
+  if (detailId) {
+    return <PluginDetailContent id={detailId} />;
+  }
+
+  return <PluginListView />;
+}
+
+function PluginListView() {
   const { t } = useTranslation();
-  const [activeTab, setActiveTab] = useState('installed');
+  const router = useRouter();
   const [modalOpen, setModalOpen] = useState(false);
   const [installSource, setInstallSource] = useState<string>('local');
-  const [installInfo, setInstallInfo] = useState<Record<string, any>>({}); // eslint-disable-line @typescript-eslint/no-explicit-any
-  const [mcpSSEModalOpen, setMcpSSEModalOpen] = useState(false);
+  const [installInfo] = useState<Record<string, any>>({}); // eslint-disable-line @typescript-eslint/no-explicit-any
   const [pluginInstallStatus, setPluginInstallStatus] =
     useState<PluginInstallStatus>(PluginInstallStatus.WAIT_INPUT);
   const [installError, setInstallError] = useState<string | null>(null);
@@ -108,12 +115,6 @@ export default function PluginConfigPage() {
     useState<ApiRespPluginSystemStatus | null>(null);
   const [statusLoading, setStatusLoading] = useState(true);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState(false);
-  const [editingServerName, setEditingServerName] = useState<string | null>(
-    null,
-  );
-  const [isEditMode, setIsEditMode] = useState(false);
-  const [refreshKey, setRefreshKey] = useState(0);
   const [debugInfo, setDebugInfo] = useState<{
     debug_url: string;
     plugin_debug_key: string;
@@ -318,17 +319,6 @@ export default function PluginConfigPage() {
           setInstallError(err.msg);
           setPluginInstallStatus(PluginInstallStatus.ERROR);
         });
-    } else if (installSource === 'marketplace') {
-      httpClient
-        .installPluginFromMarketplace(
-          installInfo.plugin_author,
-          installInfo.plugin_name,
-          installInfo.plugin_version,
-        )
-        .then((resp) => {
-          const taskId = resp.task_id;
-          watchTask(taskId);
-        });
     }
   }
 
@@ -526,35 +516,10 @@ export default function PluginConfigPage() {
         onChange={handleFileChange}
         style={{ display: 'none' }}
       />
-      <Tabs
-        value={activeTab}
-        onValueChange={setActiveTab}
-        className="w-full h-full flex flex-col"
-      >
-        <div className="flex flex-row justify-between items-center px-[0.8rem] flex-shrink-0">
-          <TabsList className="shadow-md py-5 bg-[#f0f0f0] dark:bg-[#2a2a2e]">
-            <TabsTrigger value="installed" className="px-6 py-4 cursor-pointer">
-              {t('plugins.installed')}
-            </TabsTrigger>
-            {systemInfo.enable_marketplace && (
-              <TabsTrigger value="market" className="px-6 py-4 cursor-pointer">
-                {t('plugins.marketplace')}
-              </TabsTrigger>
-            )}
-            <TabsTrigger
-              value="mcp-servers"
-              className="px-6 py-4 cursor-pointer"
-            >
-              {t('mcp.title')}
-            </TabsTrigger>
-          </TabsList>
 
-          <div className="flex flex-row justify-end items-center gap-2">
-            {activeTab === 'installed' && (
-              <Popover
-                open={debugPopoverOpen}
-                onOpenChange={setDebugPopoverOpen}
-              >
+      {/* Header bar with debug info and install button */}
+      <div className="flex flex-row justify-end items-center px-[0.8rem] pb-4 flex-shrink-0 gap-2">
+        <Popover open={debugPopoverOpen} onOpenChange={setDebugPopoverOpen}>
           <PopoverTrigger asChild>
             <Button
               variant="outline"
@@ -609,8 +574,7 @@ export default function PluginConfigPage() {
                   </label>
                   <Input
                     value={
-                            debugInfo?.plugin_debug_key ||
-                            t('plugins.noDebugKey')
+                      debugInfo?.plugin_debug_key || t('plugins.noDebugKey')
                     }
                     readOnly
                     className="w-[220px] font-mono text-xs h-8"
@@ -643,39 +607,20 @@ export default function PluginConfigPage() {
             </div>
           </PopoverContent>
         </Popover>
-            )}
+
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="default" className="px-6 py-4 cursor-pointer">
               <PlusIcon className="w-4 h-4" />
-                  {activeTab === 'mcp-servers'
-                    ? t('mcp.add')
-                    : t('plugins.install')}
+              {t('plugins.install')}
               <ChevronDownIcon className="ml-2 w-4 h-4" />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
-                {activeTab === 'mcp-servers' ? (
-                  <>
-                    <DropdownMenuItem
-                      onClick={async () => {
-                        if (!(await checkExtensionsLimit())) return;
-                        setActiveTab('mcp-servers');
-                        setIsEditMode(false);
-                        setEditingServerName(null);
-                        setMcpSSEModalOpen(true);
-                      }}
-                    >
-                      <PlusIcon className="w-4 h-4" />
-                      {t('mcp.createServer')}
-                    </DropdownMenuItem>
-                  </>
-                ) : (
-                  <>
             {systemInfo.enable_marketplace && (
               <DropdownMenuItem
                 onClick={() => {
-                          setActiveTab('market');
+                  router.push('/home/market');
                 }}
               >
                 <StoreIcon className="w-4 h-4" />
@@ -699,45 +644,16 @@ export default function PluginConfigPage() {
               <Github className="w-4 h-4" />
               {t('plugins.installFromGithub')}
             </DropdownMenuItem>
-                  </>
-                )}
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-        </div>
-        <TabsContent value="installed" className="flex-1 overflow-y-auto mt-0">
-          <PluginInstalledComponent ref={pluginInstalledRef} />
-        </TabsContent>
-        <TabsContent value="market" className="flex-1 overflow-y-auto mt-0">
-          <MarketPage
-            installPlugin={async (plugin: PluginV4) => {
-              if (!(await checkExtensionsLimit())) return;
-              setInstallSource('marketplace');
-              setInstallInfo({
-                plugin_author: plugin.author,
-                plugin_name: plugin.name,
-                plugin_version: plugin.latest_version,
-              });
-              setPluginInstallStatus(PluginInstallStatus.ASK_CONFIRM);
-              setModalOpen(true);
-            }}
-          />
-        </TabsContent>
-        <TabsContent
-          value="mcp-servers"
-          className="flex-1 overflow-y-auto mt-0"
-        >
-          <MCPServerComponent
-            key={refreshKey}
-            onEditServer={(serverName) => {
-              setEditingServerName(serverName);
-              setIsEditMode(true);
-              setMcpSSEModalOpen(true);
-            }}
-          />
-        </TabsContent>
-      </Tabs>
 
+      {/* Installed plugins grid */}
+      <div className="flex-1 overflow-y-auto">
+        <PluginInstalledComponent ref={pluginInstalledRef} />
+      </div>
+
+      {/* Install plugin dialog (GitHub flow) */}
       <Dialog
         open={modalOpen}
         onOpenChange={(open) => {
@@ -886,19 +802,6 @@ export default function PluginConfigPage() {
               </div>
             )}
 
-          {/* Marketplace Install Confirm */}
-          {installSource === 'marketplace' &&
-            pluginInstallStatus === PluginInstallStatus.ASK_CONFIRM && (
-              <div className="mt-4">
-                <p className="mb-2">
-                  {t('plugins.askConfirm', {
-                    name: installInfo.plugin_name,
-                    version: installInfo.plugin_version,
-                  })}
-                </p>
-              </div>
-            )}
-
           {/* GitHub Install Confirm */}
           {installSource === 'github' &&
             pluginInstallStatus === PluginInstallStatus.ASK_CONFIRM && (
@@ -1009,33 +912,6 @@ export default function PluginConfigPage() {
           </div>
         </div>
       )}
-
-      <MCPFormDialog
-        open={mcpSSEModalOpen}
-        onOpenChange={setMcpSSEModalOpen}
-        serverName={editingServerName}
-        isEditMode={isEditMode}
-        onSuccess={() => {
-          setEditingServerName(null);
-          setIsEditMode(false);
-          setRefreshKey((prev) => prev + 1);
-        }}
-        onDelete={() => {
-          setShowDeleteConfirmModal(true);
-        }}
-      />
-
-      <MCPDeleteConfirmDialog
-        open={showDeleteConfirmModal}
-        onOpenChange={setShowDeleteConfirmModal}
-        serverName={editingServerName}
-        onSuccess={() => {
-          setMcpSSEModalOpen(false);
-          setEditingServerName(null);
-          setIsEditMode(false);
-          setRefreshKey((prev) => prev + 1);
-        }}
-      />
     </div>
   );
 }

web/src/app/infra/basic-component/create-card-component/createCartComponent.module.css

@@ -1,7 +1,7 @@
 .cardContainer {
   background-color: #fff;
   border-radius: 9px;
-  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid #e4e4e7;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -12,15 +12,15 @@
 
 :global(.dark) .cardContainer {
   background-color: #1f1f22;
-  box-shadow: 0;
+  border-color: #27272a;
 }
 
 .cardContainer:hover {
-  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
+  border-color: #a1a1aa;
 }
 
 :global(.dark) .cardContainer:hover {
-  box-shadow: 0;
+  border-color: #3f3f46;
 }
 
 .createCardContainer {

web/src/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from '@/lib/utils';
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn('aspect-square size-full', className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        'bg-muted flex size-full items-center justify-center rounded-full',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

web/src/components/ui/card.tsx

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card"
       className={cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6',
         className,
       )}
       {...props}

web/src/components/ui/sidebar.tsx

@@ -25,8 +25,7 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 
-const SIDEBAR_COOKIE_NAME = 'sidebar_state';
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_STORAGE_KEY = 'sidebar_state';
 const SIDEBAR_WIDTH = '16rem';
 const SIDEBAR_WIDTH_MOBILE = '18rem';
 const SIDEBAR_WIDTH_ICON = '3rem';
@@ -71,7 +70,13 @@ function SidebarProvider({
 
   // This is the internal state of the sidebar.
   // We use openProp and setOpenProp for control from outside the component.
-  const [_open, _setOpen] = React.useState(defaultOpen);
+  const [_open, _setOpen] = React.useState(() => {
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem(SIDEBAR_STORAGE_KEY);
+      if (stored !== null) return stored === 'true';
+    }
+    return defaultOpen;
+  });
   const open = openProp ?? _open;
   const setOpen = React.useCallback(
     (value: boolean | ((value: boolean) => boolean)) => {
@@ -82,8 +87,10 @@ function SidebarProvider({
         _setOpen(openState);
       }
 
-      // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      // Persist sidebar state to localStorage
+      if (typeof window !== 'undefined') {
+        localStorage.setItem(SIDEBAR_STORAGE_KEY, String(openState));
+      }
     },
     [setOpenProp, open],
   );
@@ -139,7 +146,7 @@ function SidebarProvider({
             } as React.CSSProperties
           }
           className={cn(
-            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex h-svh w-full overflow-hidden',
             className,
           )}
           {...props}
@@ -311,6 +318,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
       className={cn(
         'bg-background relative flex w-full flex-1 flex-col',
         'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+        'dark:md:peer-data-[variant=inset]:border dark:md:peer-data-[variant=inset]:border-sidebar-border',
         className,
       )}
       {...props}

web/src/components/ui/tabs.tsx

@@ -42,7 +42,7 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "cursor-pointer data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}

web/src/i18n/locales/en-US.ts

@@ -1,4 +1,11 @@
 const enUS = {
+  sidebar: {
+    home: 'Home',
+    extensions: 'Extensions',
+    installedPlugins: 'Installed Plugins',
+    pluginMarket: 'Marketplace',
+    mcpServers: 'MCP Servers',
+  },
   common: {
     login: 'Login',
     logout: 'Logout',
@@ -136,6 +143,8 @@ const enUS = {
     apiKeyCreatedMessage:
       'Please copy this API key, if the button is invalid, please copy manually.',
     none: 'None',
+    more: 'More ({{count}})',
+    less: 'Less',
   },
   notFound: {
     title: 'Page not found',
@@ -251,6 +260,7 @@ const enUS = {
     description:
       'Create and manage bots, which are the entry points for LangBot to connect with various platforms',
     createBot: 'Create Bot',
+    selectFromSidebar: 'Select a bot from the sidebar',
     editBot: 'Edit Bot',
     getBotListError: 'Failed to get bot list: ',
     botName: 'Bot Name',
@@ -596,6 +606,7 @@ const enUS = {
     description:
       'Pipelines define the processing flow for message events, used to bind to bots',
     createPipeline: 'Create Pipeline',
+    selectFromSidebar: 'Select a pipeline from the sidebar',
     editPipeline: 'Edit Pipeline',
     chat: 'Chat',
     configuration: 'Configuration',
@@ -685,9 +696,14 @@ const enUS = {
       replyTo: 'Reply to',
       showMarkdown: 'Show Markdown',
       showRaw: 'Show Raw',
+      allMembers: 'All Members',
+      file: 'File',
+      voice: 'Voice',
+      uploadImage: 'Upload Image',
+      uploading: 'Uploading...',
     },
     monitoring: {
-      title: 'Monitoring',
+      title: 'Dashboard',
       description:
         'View execution logs and errors for this pipeline (last 24 hours)',
       detailedLogs: 'Detailed Logs',
@@ -696,6 +712,7 @@ const enUS = {
   knowledge: {
     title: 'Knowledge',
     createKnowledgeBase: 'Create Knowledge Base',
+    selectFromSidebar: 'Select a knowledge base from the sidebar',
     editKnowledgeBase: 'Edit Knowledge Base',
     selectKnowledgeBase: 'Select Knowledge Base',
     selectKnowledgeBases: 'Select Knowledge Bases',
@@ -901,7 +918,7 @@ const enUS = {
       'Space login email does not match the local account email',
   },
   monitoring: {
-    title: 'Monitoring',
+    title: 'Dashboard',
     description: 'Monitor bot activities, LLM calls, and system performance',
     overview: 'Overview',
     totalMessages: 'Total Messages',

web/src/i18n/locales/ja-JP.ts

@@ -1,4 +1,11 @@
 const jaJP = {
+  sidebar: {
+    home: 'ホーム',
+    extensions: '拡張機能',
+    installedPlugins: 'インストール済みプラグイン',
+    pluginMarket: 'プラグインマーケット',
+    mcpServers: 'MCPサーバー',
+  },
   common: {
     login: 'ログイン',
     logout: 'ログアウト',
@@ -138,6 +145,8 @@
     apiKeyCreatedMessage:
       'この API キーをコピーしてください。もしボタンが無効な場合は手動でコピーしてください。',
     none: 'なし',
+    more: 'もっと見る ({{count}})',
+    less: '折りたたむ',
   },
   notFound: {
     title: 'ページが見つかりません',
@@ -256,6 +265,7 @@
     description:
       'ボットの作成と管理を行います。LangBotと各プラットフォームを接続するためのエントリーポイントです',
     createBot: 'ボットを作成',
+    selectFromSidebar: 'サイドバーからボットを選択してください',
     editBot: 'ボットを編集',
     getBotListError: 'ボットリストの取得に失敗しました：',
     botName: 'ボット名',
@@ -597,6 +607,7 @@
     description:
       'メッセージイベントの処理フローを定義し、ボットに紐付けて使用するパイプラインです',
     createPipeline: 'パイプラインを作成',
+    selectFromSidebar: 'サイドバーからパイプラインを選択してください',
     editPipeline: 'パイプラインを編集',
     chat: 'チャット',
     configuration: '設定',
@@ -688,9 +699,14 @@
       replyTo: '返信先',
       showMarkdown: 'Markdownで表示',
       showRaw: '原文で表示',
+      allMembers: '全メンバー',
+      file: 'ファイル',
+      voice: '音声',
+      uploadImage: '画像をアップロード',
+      uploading: 'アップロード中...',
     },
     monitoring: {
-      title: 'モニタリング',
+      title: 'ダッシュボード',
       description: 'このパイプラインの実行ログとエラー情報を表示（過去24時間）',
       detailedLogs: '詳細ログ',
     },
@@ -698,6 +714,7 @@
   knowledge: {
     title: '知識ベース',
     createKnowledgeBase: '知識ベースを作成',
+    selectFromSidebar: 'サイドバーから知識ベースを選択してください',
     editKnowledgeBase: '知識ベースを編集',
     selectKnowledgeBase: '知識ベースを選択',
     selectKnowledgeBases: '知識ベースを選択',
@@ -894,7 +911,7 @@
       'Spaceログインのメールアドレスがローカルアカウントのメールアドレスと一致しません',
   },
   monitoring: {
-    title: 'モニタリング',
+    title: 'ダッシュボード',
     description:
       'ボットアクティビティ、LLM呼び出し、システムパフォーマンスを監視',
     overview: '概要',

web/src/i18n/locales/zh-Hans.ts

@@ -1,4 +1,11 @@
 const zhHans = {
+  sidebar: {
+    home: '首页',
+    extensions: '扩展',
+    installedPlugins: '已安装插件',
+    pluginMarket: '插件市场',
+    mcpServers: 'MCP 服务器',
+  },
   common: {
     login: '登录',
     logout: '退出登录',
@@ -127,6 +134,8 @@ const zhHans = {
     actions: '操作',
     apiKeyCreatedMessage: '请复制此 API 密钥，若按钮无效，请手动复制。',
     none: '无',
+    more: '更多 ({{count}})',
+    less: '收起',
   },
   notFound: {
     title: '页面不存在',
@@ -240,6 +249,7 @@ const zhHans = {
     title: '机器人',
     description: '创建和管理机器人，这是 LangBot 与各个平台连接的入口',
     createBot: '创建机器人',
+    selectFromSidebar: '从侧边栏选择一个机器人',
     editBot: '编辑机器人',
     getBotListError: '获取机器人列表失败：',
     botName: '机器人名称',
@@ -569,6 +579,7 @@ const zhHans = {
     title: '流水线',
     description: '流水线定义了对消息事件的处理流程，用于绑定到机器人',
     createPipeline: '创建流水线',
+    selectFromSidebar: '从侧边栏选择一个流水线',
     editPipeline: '编辑流水线',
     chat: '对话',
     configuration: '配置',
@@ -658,6 +669,11 @@ const zhHans = {
       replyTo: '回复给',
       showMarkdown: '渲染',
       showRaw: '原文',
+      allMembers: '全体成员',
+      file: '文件',
+      voice: '语音',
+      uploadImage: '上传图片',
+      uploading: '上传中...',
     },
     monitoring: {
       title: '监控日志',
@@ -668,6 +684,7 @@ const zhHans = {
   knowledge: {
     title: '知识库',
     createKnowledgeBase: '创建知识库',
+    selectFromSidebar: '从侧边栏选择一个知识库',
     editKnowledgeBase: '编辑知识库',
     selectKnowledgeBase: '选择知识库',
     selectKnowledgeBases: '选择知识库',
@@ -857,7 +874,7 @@ const zhHans = {
     spaceEmailMismatch: 'Space登录账号邮箱与本实例账号邮箱不匹配',
   },
   monitoring: {
-    title: '日志监控',
+    title: '仪表盘',
     description: '查看机器人活动、LLM调用和系统性能',
     overview: '概览',
     totalMessages: '总消息数',

web/src/i18n/locales/zh-Hant.ts

@@ -1,4 +1,11 @@
 const zhHant = {
+  sidebar: {
+    home: '首頁',
+    extensions: '擴展',
+    installedPlugins: '已安裝外掛',
+    pluginMarket: '外掛市場',
+    mcpServers: 'MCP 伺服器',
+  },
   common: {
     login: '登入',
     logout: '登出',
@@ -127,6 +134,8 @@ const zhHant = {
     actions: '操作',
     apiKeyCreatedMessage: '請複製此 API 金鑰，若按鈕無效，請手動複製。',
     none: '無',
+    more: '更多 ({{count}})',
+    less: '收起',
   },
   notFound: {
     title: '頁面不存在',
@@ -239,6 +248,7 @@ const zhHant = {
     title: '機器人',
     description: '建立和管理機器人，這是 LangBot 與各個平台連接的入口',
     createBot: '建立機器人',
+    selectFromSidebar: '從側邊欄選擇一個機器人',
     editBot: '編輯機器人',
     getBotListError: '取得機器人清單失敗：',
     botName: '機器人名稱',
@@ -562,6 +572,7 @@ const zhHant = {
     title: '流程線',
     description: '流程線定義了對訊息事件的處理流程，用於綁定到機器人',
     createPipeline: '建立流程線',
+    selectFromSidebar: '從側邊欄選擇一個流程線',
     editPipeline: '編輯流程線',
     chat: '對話',
     configuration: '設定',
@@ -651,6 +662,11 @@ const zhHant = {
       replyTo: '回覆給',
       showMarkdown: '渲染',
       showRaw: '原文',
+      allMembers: '全體成員',
+      file: '檔案',
+      voice: '語音',
+      uploadImage: '上傳圖片',
+      uploading: '上傳中...',
     },
     monitoring: {
       title: '監控日誌',
@@ -661,6 +677,7 @@ const zhHant = {
   knowledge: {
     title: '知識庫',
     createKnowledgeBase: '建立知識庫',
+    selectFromSidebar: '從側邊欄選擇一個知識庫',
     editKnowledgeBase: '編輯知識庫',
     selectKnowledgeBase: '選擇知識庫',
     selectKnowledgeBases: '選擇知識庫',
@@ -839,7 +856,7 @@ const zhHant = {
     spaceEmailMismatch: 'Space登入帳號電子郵件與本實例帳號電子郵件不匹配',
   },
   monitoring: {
-    title: '日誌監控',
+    title: '儀表盤',
     description: '監控機器人活動、LLM調用和系統效能',
     overview: '概覽',
     totalMessages: '總訊息數',

web/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -23,9 +19,7 @@
       }
     ],
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     }
   },
   "include": [
@@ -35,7 +29,5 @@
     ".next/types/**/*.ts",
     ".next/dev/types/**/*.ts"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }