diff --git a/web/App.tsx b/web/App.tsx
new file mode 100644
index 0000000..a3d2910
--- /dev/null
+++ b/web/App.tsx
@@ -0,0 +1,126 @@
+
+import React, { useState } from 'react';
+import { HashRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
+import { Bot, Phone, Book, User, LayoutDashboard, Mic2, Video, GitBranch, Zap, PanelLeftClose, PanelLeftOpen, History as HistoryIcon } from 'lucide-react';
+
+import { AssistantsPage } from './pages/Assistants';
+import { KnowledgeBasePage } from './pages/KnowledgeBase';
+import { HistoryPage } from './pages/History';
+import { ProfilePage } from './pages/Profile';
+import { DashboardPage } from './pages/Dashboard';
+import { VoiceLibraryPage } from './pages/VoiceLibrary';
+import { WorkflowsPage } from './pages/Workflows';
+import { WorkflowEditorPage } from './pages/WorkflowEditor';
+import { AutoTestPage } from './pages/AutoTest';
+
+const SidebarItem: React.FC<{ to: string; icon: React.ReactNode; label: string; active: boolean; isCollapsed: boolean }> = ({ to, icon, label, active, isCollapsed }) => (
+  <Link 
+    to={to} 
+    title={isCollapsed ? label : undefined}
+    className={`flex items-center space-x-3 px-4 py-3 rounded-md transition-all duration-300 ${active ? 'bg-primary/20 text-primary border-r-2 border-primary' : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'} ${isCollapsed ? 'justify-center space-x-0 px-2' : ''}`}
+  >
+    <div className="shrink-0">{icon}</div>
+    {!isCollapsed && <span className="font-medium text-sm animate-in fade-in duration-300 whitespace-nowrap overflow-hidden">{label}</span>}
+  </Link>
+);
+
+const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const location = useLocation();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const navItems = [
+    { path: '/', label: '首页', icon: <LayoutDashboard className="h-5 w-5" /> },
+    { path: '/assistants', label: '小助手', icon: <Bot className="h-5 w-5" /> },
+    { path: '/voices', label: '声音库', icon: <Mic2 className="h-5 w-5" /> },
+    { path: '/history', label: '历史记录', icon: <HistoryIcon className="h-5 w-5" /> },
+    { path: '/knowledge', label: '知识库', icon: <Book className="h-5 w-5" /> },
+    { path: '/workflows', label: '工作流', icon: <GitBranch className="h-5 w-5" /> },
+    { path: '/auto-test', label: '测试助手', icon: <Zap className="h-5 w-5" /> },
+    { path: '/profile', label: '个人中心', icon: <User className="h-5 w-5" /> },
+  ];
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      {/* Sidebar with Glass effect and collapse logic */}
+      <aside 
+        className={`border-r border-border/40 bg-card/30 backdrop-blur-md hidden md:flex flex-col transition-all duration-300 ease-in-out relative group ${isCollapsed ? 'w-20' : 'w-64'}`}
+      >
+        <div className={`p-6 flex items-center border-b border-border/40 overflow-hidden transition-all duration-300 ${isCollapsed ? 'justify-center px-4' : 'space-x-3'}`}>
+          <div className="h-10 w-10 shrink-0 bg-gradient-to-br from-cyan-400 to-blue-600 rounded-xl flex items-center justify-center shadow-[0_0_20px_rgba(6,182,212,0.5)] border border-white/10">
+             <Video className="h-6 w-6 text-white drop-shadow-md" />
+          </div>
+          {!isCollapsed && (
+            <span className="text-lg font-bold tracking-wide whitespace-nowrap bg-clip-text text-transparent bg-gradient-to-r from-white to-white/80 animate-in slide-in-from-left-2">
+              AI视频助手
+            </span>
+          )}
+        </div>
+
+        <nav className="flex-1 p-4 space-y-2 overflow-y-auto overflow-x-hidden custom-scrollbar">
+          {navItems.map(item => (
+            <SidebarItem 
+              key={item.path} 
+              to={item.path} 
+              icon={item.icon} 
+              label={item.label} 
+              isCollapsed={isCollapsed}
+              active={item.path === '/' ? location.pathname === '/' : location.pathname.startsWith(item.path)} 
+            />
+          ))}
+        </nav>
+
+        {/* Footer with Version and Collapse Button */}
+        <div className={`p-4 border-t border-border/40 flex items-center transition-all duration-300 ${isCollapsed ? 'justify-center' : 'justify-between'}`}>
+          {!isCollapsed && (
+            <span className="text-[10px] text-muted-foreground font-mono opacity-60 animate-in fade-in">
+              SYSTEM v1.0
+            </span>
+          )}
+          <button 
+            onClick={() => setIsCollapsed(!isCollapsed)}
+            title={isCollapsed ? "展开边栏" : "收起边栏"}
+            className={`p-1.5 rounded-md hover:bg-white/5 text-muted-foreground hover:text-primary transition-all ${isCollapsed ? '' : 'ml-2'}`}
+          >
+            {isCollapsed ? <PanelLeftOpen className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
+          </button>
+        </div>
+      </aside>
+
+      {/* Main Content */}
+      <main className="flex-1 flex flex-col overflow-hidden relative bg-background">
+         <header className="h-16 border-b border-border/40 flex items-center px-6 bg-card/30 backdrop-blur-md md:hidden space-x-3">
+             <div className="h-8 w-8 bg-gradient-to-br from-cyan-400 to-blue-600 rounded-lg flex items-center justify-center shadow-lg">
+                <Video className="h-5 w-5 text-white" />
+             </div>
+             <span className="font-bold text-lg whitespace-nowrap text-white">AI视频助手</span>
+         </header>
+         <div className="flex-1 overflow-auto p-2 md:p-4 transition-all duration-300">
+            {children}
+         </div>
+      </main>
+    </div>
+  );
+};
+
+const App: React.FC = () => {
+  return (
+    <Router>
+      <AppLayout>
+        <Routes>
+          <Route path="/" element={<DashboardPage />} />
+          <Route path="/assistants" element={<AssistantsPage />} />
+          <Route path="/voices" element={<VoiceLibraryPage />} />
+          <Route path="/knowledge" element={<KnowledgeBasePage />} />
+          <Route path="/history" element={<HistoryPage />} />
+          <Route path="/workflows" element={<WorkflowsPage />} />
+          <Route path="/workflows/new" element={<WorkflowEditorPage />} />
+          <Route path="/workflows/edit/:id" element={<WorkflowEditorPage />} />
+          <Route path="/auto-test" element={<AutoTestPage />} />
+          <Route path="/profile" element={<ProfilePage />} />
+        </Routes>
+      </AppLayout>
+    </Router>
+  );
+};
+
+export default App;
diff --git a/web/README.md b/web/README.md
index aab401a..4ec187a 100644
--- a/web/README.md
+++ b/web/README.md
@@ -1 +1,20 @@
-# Frontend Service
\ No newline at end of file
+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
+
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+View your app in AI Studio: https://ai.studio/apps/drive/1GwAKXIF6lVjo1AZPHjVDL6w3hXkG_zFQ
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`
diff --git a/web/components/UI.tsx b/web/components/UI.tsx
new file mode 100644
index 0000000..2eb30d1
--- /dev/null
+++ b/web/components/UI.tsx
@@ -0,0 +1,152 @@
+
+import React from 'react';
+import { X } from 'lucide-react';
+
+// Button
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+  size?: 'sm' | 'md' | 'lg' | 'icon';
+}
+
+export const Button: React.FC<ButtonProps> = ({ 
+  className = '', 
+  variant = 'primary', 
+  size = 'md', 
+  children, 
+  ...props 
+}) => {
+  const baseStyles = "inline-flex items-center justify-center rounded-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 active:scale-95";
+  
+  const variants = {
+    // Primary: Glow effect
+    primary: "bg-primary text-primary-foreground shadow-[0_0_10px_rgba(6,182,212,0.5)] hover:bg-primary/90 hover:shadow-[0_0_15px_rgba(6,182,212,0.6)]",
+    secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+    outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground hover:border-primary/50",
+    ghost: "hover:bg-accent hover:text-accent-foreground",
+    destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+  };
+
+  const sizes = {
+    sm: "h-8 px-3 text-xs",
+    md: "h-9 px-4 py-2",
+    lg: "h-10 px-8",
+    icon: "h-9 w-9",
+  };
+
+  return (
+    <button className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`} {...props}>
+      {children}
+    </button>
+  );
+};
+
+// Input - Removed border, added subtle background
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+export const Input: React.FC<InputProps> = ({ className = '', ...props }) => {
+  return (
+    <input
+      className={`flex h-9 w-full rounded-md bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 focus-visible:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+      {...props}
+    />
+  );
+};
+
+// Card - Glassmorphism style, very subtle border
+export const Card: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className = '' }) => (
+  <div className={`rounded-xl border border-white/5 bg-card/40 backdrop-blur-md text-card-foreground shadow-sm ${className}`}>
+    {children}
+  </div>
+);
+
+// Badge
+export const Badge: React.FC<{ children: React.ReactNode; variant?: 'default' | 'success' | 'warning' | 'outline' }> = ({ children, variant = 'default' }) => {
+  const styles = {
+    default: "border-transparent bg-primary/20 text-primary hover:bg-primary/30 border border-primary/20",
+    success: "border-transparent bg-green-500/20 text-green-400 border border-green-500/20",
+    warning: "border-transparent bg-yellow-500/20 text-yellow-400 border border-yellow-500/20",
+    outline: "text-foreground border border-white/10 hover:bg-accent hover:text-accent-foreground",
+  };
+  return (
+    <div className={`inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ${styles[variant]}`}>
+      {children}
+    </div>
+  );
+};
+
+// Table - Subtle borders
+export const TableHeader: React.FC<{ children: React.ReactNode }> = ({ children }) => <thead className="[&_tr]:border-b [&_tr]:border-white/5">{children}</thead>;
+export const TableRow: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className = '' }) => <tr className={`border-b border-white/5 transition-colors hover:bg-white/5 data-[state=selected]:bg-muted ${className}`}>{children}</tr>;
+export const TableHead: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className = '' }) => <th className={`h-10 px-4 text-left align-middle text-sm font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 ${className}`}>{children}</th>;
+export const TableCell: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className = '' }) => <td className={`p-4 align-middle text-sm [&:has([role=checkbox])]:pr-0 ${className}`}>{children}</td>;
+
+// Drawer (Side Sheet)
+interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+}
+
+export const Drawer: React.FC<DrawerProps> = ({ isOpen, onClose, title, children }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex">
+      {/* Backdrop */}
+      <div className="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity" onClick={onClose} />
+      
+      {/* Drawer Content */}
+      <div className="relative ml-auto flex h-full w-full max-w-md flex-col overflow-y-auto bg-background/95 border-l border-white/10 p-6 shadow-2xl animate-in slide-in-from-right sm:max-w-lg">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold text-foreground">{title}</h2>
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+        <div className="flex-1">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Dialog (Modal)
+interface DialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+}
+
+export const Dialog: React.FC<DialogProps> = ({ isOpen, onClose, title, children, footer }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+       <div className="fixed inset-0 bg-black/80 backdrop-blur-sm transition-opacity animate-in fade-in" onClick={onClose} />
+       <div className="relative z-50 w-full max-w-lg rounded-xl border border-white/10 bg-card p-6 shadow-2xl animate-in zoom-in-95 duration-200">
+          <div className="flex flex-col space-y-1.5 text-center sm:text-left mb-4">
+             <h2 className="text-lg font-semibold leading-none tracking-tight">{title}</h2>
+          </div>
+          <div className="py-4">
+            {children}
+          </div>
+          {footer && (
+             <div className="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 mt-2">
+                {footer}
+             </div>
+          )}
+          <button 
+             onClick={onClose}
+             className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+          >
+             <X className="h-4 w-4" />
+             <span className="sr-only">Close</span>
+          </button>
+       </div>
+    </div>
+  );
+};
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..e4201fe
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,138 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AI视频助手</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        darkMode: 'class',
+        theme: {
+          extend: {
+            colors: {
+              border: "hsl(var(--border))",
+              input: "hsl(var(--input))",
+              ring: "hsl(var(--ring))",
+              background: "hsl(var(--background))",
+              foreground: "hsl(var(--foreground))",
+              primary: {
+                DEFAULT: "hsl(var(--primary))",
+                foreground: "hsl(var(--primary-foreground))",
+              },
+              secondary: {
+                DEFAULT: "hsl(var(--secondary))",
+                foreground: "hsl(var(--secondary-foreground))",
+              },
+              destructive: {
+                DEFAULT: "hsl(var(--destructive))",
+                foreground: "hsl(var(--destructive-foreground))",
+              },
+              muted: {
+                DEFAULT: "hsl(var(--muted))",
+                foreground: "hsl(var(--muted-foreground))",
+              },
+              accent: {
+                DEFAULT: "hsl(var(--accent))",
+                foreground: "hsl(var(--accent-foreground))",
+              },
+              card: {
+                DEFAULT: "hsl(var(--card))",
+                foreground: "hsl(var(--card-foreground))",
+              },
+              popover: {
+                DEFAULT: "hsl(var(--popover))",
+                foreground: "hsl(var(--popover-foreground))",
+              },
+            },
+            borderRadius: {
+              lg: "var(--radius)",
+              md: "calc(var(--radius) - 2px)",
+              sm: "calc(var(--radius) - 4px)",
+            },
+          },
+        },
+      }
+    </script>
+    <style>
+      :root {
+        /* Tech/Dark Theme Palette */
+        --background: 224 71% 4%; /* Very Dark Blue #020817 */
+        --foreground: 210 40% 98%; /* Light Gray/White */
+        
+        --card: 224 71% 5%; /* Slightly lighter than bg, will use transparency */
+        --card-foreground: 210 40% 98%;
+ 
+        --popover: 224 71% 4%;
+        --popover-foreground: 210 40% 98%;
+ 
+        --primary: 196 100% 50%; /* Cyan/Electric Blue for high tech feel */
+        --primary-foreground: 222.2 47.4% 11.2%;
+ 
+        --secondary: 217.2 32.6% 17.5%;
+        --secondary-foreground: 210 40% 98%;
+ 
+        --muted: 217.2 32.6% 17.5%;
+        --muted-foreground: 215 20.2% 65.1%;
+ 
+        --accent: 217.2 32.6% 17.5%;
+        --accent-foreground: 210 40% 98%;
+ 
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 40% 98%;
+ 
+        --border: 217.2 32.6% 17.5%;
+        --input: 217.2 32.6% 17.5%;
+        --ring: 196 100% 50%;
+        
+        --radius: 0.5rem;
+      }
+      
+      body {
+        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+        background-color: hsl(var(--background));
+        color: hsl(var(--foreground));
+        /* Subtle Grid Pattern */
+        background-image: 
+            linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), 
+            linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+        background-size: 40px 40px;
+        min-height: 100vh;
+      }
+
+      /* Custom Scrollbar */
+      ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+      ::-webkit-scrollbar-track {
+        background: transparent; 
+      }
+      ::-webkit-scrollbar-thumb {
+        background: hsl(var(--muted)); 
+        border-radius: 4px;
+      }
+      ::-webkit-scrollbar-thumb:hover {
+        background: hsl(var(--primary)); 
+      }
+    </style>
+  <script type="importmap">
+{
+  "imports": {
+    "lucide-react": "https://esm.sh/lucide-react@^0.563.0",
+    "react-router-dom": "https://esm.sh/react-router-dom@^7.13.0",
+    "@google/genai": "https://esm.sh/@google/genai@^1.39.0",
+    "react/": "https://esm.sh/react@^19.2.4/",
+    "react": "https://esm.sh/react@^19.2.4",
+    "react-dom/": "https://esm.sh/react-dom@^19.2.4/"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body class="bg-background text-foreground antialiased">
+    <div id="root"></div>
+  <script type="module" src="/index.tsx"></script>
+</body>
+</html>
diff --git a/web/index.tsx b/web/index.tsx
new file mode 100644
index 0000000..6ca5361
--- /dev/null
+++ b/web/index.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
\ No newline at end of file
diff --git a/web/metadata.json b/web/metadata.json
new file mode 100644
index 0000000..863ed15
--- /dev/null
+++ b/web/metadata.json
@@ -0,0 +1,9 @@
+
+{
+  "name": "AI视频助手",
+  "description": "A minimalist AI Assistant management system featuring agent configuration, knowledge base management, call logs, and a debugging suite.",
+  "requestFramePermissions": [
+    "microphone",
+    "camera"
+  ]
+}
diff --git a/web/package-lock.json b/web/package-lock.json
new file mode 100644
index 0000000..512869b
--- /dev/null
+++ b/web/package-lock.json
@@ -0,0 +1,2777 @@
+{
+  "name": "ai-videoassistant",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "ai-videoassistant",
+      "version": "0.0.0",
+      "dependencies": {
+        "@google/genai": "^1.39.0",
+        "lucide-react": "^0.563.0",
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4",
+        "react-router-dom": "^7.13.0"
+      },
+      "devDependencies": {
+        "@types/node": "^22.14.0",
+        "@vitejs/plugin-react": "^5.0.0",
+        "typescript": "~5.8.2",
+        "vite": "^6.2.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
+      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.0.tgz",
+      "integrity": "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
+      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-module-transforms": "^7.28.6",
+        "@babel/helpers": "^7.28.6",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/traverse": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.0.tgz",
+      "integrity": "sha512-vSH118/wwM/pLR38g/Sgk05sNtro6TlTJKuiMXDaZqPUfjTFcudpCOt00IhOfj+1BFAX+UFAlzCU+6WXr3GLFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz",
+      "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.28.6",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
+      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz",
+      "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.28.6",
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "@babel/traverse": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.28.6.tgz",
+      "integrity": "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.6.tgz",
+      "integrity": "sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
+      "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
+      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.28.6",
+        "@babel/parser": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
+      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.29.0",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@google/genai": {
+      "version": "1.39.0",
+      "resolved": "https://registry.npmjs.org/@google/genai/-/genai-1.39.0.tgz",
+      "integrity": "sha512-Vz7AQsOdBeiIcxmXIQNy/hzDvyAOE1lSpWA10itUQza7h3aQFF6QSGaQ7o1GYsjMD3XslK4Ee/Ol0eLhRXb7gA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "google-auth-library": "^10.3.0",
+        "protobufjs": "^7.5.4",
+        "ws": "^8.18.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "@modelcontextprotocol/sdk": "^1.25.2"
+      },
+      "peerDependenciesMeta": {
+        "@modelcontextprotocol/sdk": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/eventemitter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.1",
+        "@protobufjs/inquire": "^1.1.0"
+      }
+    },
+    "node_modules/@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.53",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
+      "integrity": "sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.57.1.tgz",
+      "integrity": "sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.57.1.tgz",
+      "integrity": "sha512-dQaAddCY9YgkFHZcFNS/606Exo8vcLHwArFZ7vxXq4rigo2bb494/xKMMwRRQW6ug7Js6yXmBZhSBRuBvCCQ3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.57.1.tgz",
+      "integrity": "sha512-crNPrwJOrRxagUYeMn/DZwqN88SDmwaJ8Cvi/TN1HnWBU7GwknckyosC2gd0IqYRsHDEnXf328o9/HC6OkPgOg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.57.1.tgz",
+      "integrity": "sha512-Ji8g8ChVbKrhFtig5QBV7iMaJrGtpHelkB3lsaKzadFBe58gmjfGXAOfI5FV0lYMH8wiqsxKQ1C9B0YTRXVy4w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.57.1.tgz",
+      "integrity": "sha512-R+/WwhsjmwodAcz65guCGFRkMb4gKWTcIeLy60JJQbXrJ97BOXHxnkPFrP+YwFlaS0m+uWJTstrUA9o+UchFug==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.57.1.tgz",
+      "integrity": "sha512-IEQTCHeiTOnAUC3IDQdzRAGj3jOAYNr9kBguI7MQAAZK3caezRrg0GxAb6Hchg4lxdZEI5Oq3iov/w/hnFWY9Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.57.1.tgz",
+      "integrity": "sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.57.1.tgz",
+      "integrity": "sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.57.1.tgz",
+      "integrity": "sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.57.1.tgz",
+      "integrity": "sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.57.1.tgz",
+      "integrity": "sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.57.1.tgz",
+      "integrity": "sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.57.1.tgz",
+      "integrity": "sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.57.1.tgz",
+      "integrity": "sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.57.1.tgz",
+      "integrity": "sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.57.1.tgz",
+      "integrity": "sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.57.1.tgz",
+      "integrity": "sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.57.1.tgz",
+      "integrity": "sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.57.1.tgz",
+      "integrity": "sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.57.1.tgz",
+      "integrity": "sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.57.1.tgz",
+      "integrity": "sha512-4wYoDpNg6o/oPximyc/NG+mYUejZrCU2q+2w6YZqrAs2UcNUChIZXjtafAiiZSUc7On8v5NyNj34Kzj/Ltk6dQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.57.1.tgz",
+      "integrity": "sha512-O54mtsV/6LW3P8qdTcamQmuC990HDfR71lo44oZMZlXU4tzLrbvTii87Ni9opq60ds0YzuAlEr/GNwuNluZyMQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.57.1.tgz",
+      "integrity": "sha512-P3dLS+IerxCT/7D2q2FYcRdWRl22dNbrbBEtxdWhXrfIMPP9lQhb5h4Du04mdl5Woq05jVCDPCMF7Ub0NAjIew==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.57.1.tgz",
+      "integrity": "sha512-VMBH2eOOaKGtIJYleXsi2B8CPVADrh+TyNxJ4mWPnKfLB/DBUmzW+5m1xUrcwWoMfSLagIRpjUFeW5CO5hyciQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.57.1.tgz",
+      "integrity": "sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "22.19.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.7.tgz",
+      "integrity": "sha512-MciR4AKGHWl7xwxkBa6xUGxQJ4VBOmPTF7sL+iGzuahOFaO0jHCsuEfS80pan1ef4gWId1oWOweIhrDEYLuaOw==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.2.tgz",
+      "integrity": "sha512-EcA07pHJouywpzsoTUqNh5NwGayl2PPVEJKUSinGGSxFGYn+shYbqMGBg6FXDqgXum9Ou/ecb+411ssw8HImJQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.5",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.53",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.18.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "license": "MIT"
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.9.19",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz",
+      "integrity": "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
+    "node_modules/bignumber.js": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.3.1.tgz",
+      "integrity": "sha512-Ko0uX15oIUS7wJ3Rb30Fs6SkVbLmPBAKdlm7q9+ak9bbIeFf0MwuBsQV6z7+X768/cHsfg+WlysDWJcmthjsjQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001766",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001766.tgz",
+      "integrity": "sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/data-uri-to-buffer": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "license": "MIT"
+    },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.283",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.283.tgz",
+      "integrity": "sha512-3vifjt1HgrGW/h76UEeny+adYApveS9dH2h3p57JYzBSXJIKUJAvtmIytDKjcSCt9xHfrNCFJ7gts6vkhuq++w==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "license": "MIT"
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.12",
+        "@esbuild/android-arm": "0.25.12",
+        "@esbuild/android-arm64": "0.25.12",
+        "@esbuild/android-x64": "0.25.12",
+        "@esbuild/darwin-arm64": "0.25.12",
+        "@esbuild/darwin-x64": "0.25.12",
+        "@esbuild/freebsd-arm64": "0.25.12",
+        "@esbuild/freebsd-x64": "0.25.12",
+        "@esbuild/linux-arm": "0.25.12",
+        "@esbuild/linux-arm64": "0.25.12",
+        "@esbuild/linux-ia32": "0.25.12",
+        "@esbuild/linux-loong64": "0.25.12",
+        "@esbuild/linux-mips64el": "0.25.12",
+        "@esbuild/linux-ppc64": "0.25.12",
+        "@esbuild/linux-riscv64": "0.25.12",
+        "@esbuild/linux-s390x": "0.25.12",
+        "@esbuild/linux-x64": "0.25.12",
+        "@esbuild/netbsd-arm64": "0.25.12",
+        "@esbuild/netbsd-x64": "0.25.12",
+        "@esbuild/openbsd-arm64": "0.25.12",
+        "@esbuild/openbsd-x64": "0.25.12",
+        "@esbuild/openharmony-arm64": "0.25.12",
+        "@esbuild/sunos-x64": "0.25.12",
+        "@esbuild/win32-arm64": "0.25.12",
+        "@esbuild/win32-ia32": "0.25.12",
+        "@esbuild/win32-x64": "0.25.12"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fetch-blob": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "node-domexception": "^1.0.0",
+        "web-streams-polyfill": "^3.0.3"
+      },
+      "engines": {
+        "node": "^12.20 || >= 14.13"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/formdata-polyfill": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+      "license": "MIT",
+      "dependencies": {
+        "fetch-blob": "^3.1.2"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/gaxios": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-7.1.3.tgz",
+      "integrity": "sha512-YGGyuEdVIjqxkxVH1pUTMY/XtmmsApXrCVv5EU25iX6inEPbV+VakJfLealkBtJN69AQmh1eGOdCl9Sm1UP6XQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "extend": "^3.0.2",
+        "https-proxy-agent": "^7.0.1",
+        "node-fetch": "^3.3.2",
+        "rimraf": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/gcp-metadata": {
+      "version": "8.1.2",
+      "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-8.1.2.tgz",
+      "integrity": "sha512-zV/5HKTfCeKWnxG0Dmrw51hEWFGfcF2xiXqcA3+J90WDuP0SvoiSO5ORvcBsifmx/FoIjgQN3oNOGaQ5PhLFkg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "gaxios": "^7.0.0",
+        "google-logging-utils": "^1.0.0",
+        "json-bigint": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/glob": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/google-auth-library": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-10.5.0.tgz",
+      "integrity": "sha512-7ABviyMOlX5hIVD60YOfHw4/CxOfBhyduaYB+wbFWCWoni4N7SLcV46hrVRktuBbZjFC9ONyqamZITN7q3n32w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "ecdsa-sig-formatter": "^1.0.11",
+        "gaxios": "^7.0.0",
+        "gcp-metadata": "^8.0.0",
+        "google-logging-utils": "^1.0.0",
+        "gtoken": "^8.0.0",
+        "jws": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/google-logging-utils": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/google-logging-utils/-/google-logging-utils-1.1.3.tgz",
+      "integrity": "sha512-eAmLkjDjAFCVXg7A1unxHsLf961m6y17QFqXqAXGj/gVkKFrEICfStRfwUlGNfeCEjNRa32JEWOUTlYXPyyKvA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/gtoken": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/gtoken/-/gtoken-8.0.0.tgz",
+      "integrity": "sha512-+CqsMbHPiSTdtSO14O51eMNlrp9N79gmeqmXeouJOhfucAedHw9noVe/n5uJk3tbKE6a+6ZCQg3RPhVhHByAIw==",
+      "license": "MIT",
+      "dependencies": {
+        "gaxios": "^7.0.0",
+        "jws": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "license": "ISC"
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-bigint": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
+      "integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "bignumber.js": "^9.0.0"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jwa": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
+      "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-equal-constant-time": "^1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
+      "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
+      "license": "MIT",
+      "dependencies": {
+        "jwa": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/long": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
+      "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.563.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.563.0.tgz",
+      "integrity": "sha512-8dXPB2GI4dI8jV4MgUDGBeLdGk8ekfqVZ0BdLcrRzocGgG75ltNEmWS+gE7uokKF/0oSUuczNDT+g9hFJ23FkA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-domexception": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+      "deprecated": "Use your platform's native DOMException instead",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "github",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.5.0"
+      }
+    },
+    "node_modules/node-fetch": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+      "license": "MIT",
+      "dependencies": {
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.4",
+        "formdata-polyfill": "^4.0.10"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "license": "ISC"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/protobufjs": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.4.tgz",
+      "integrity": "sha512-CvexbZtbov6jW2eXAvLukXjXUW1TzFaivC46BpWc/3BpcCysb5Vffu+B3XHMm8lVEuy2Mm4XGex8hBSg1yapPg==",
+      "hasInstallScript": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.4",
+        "@protobufjs/eventemitter": "^1.1.0",
+        "@protobufjs/fetch": "^1.1.0",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/inquire": "^1.1.0",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.0",
+        "@types/node": ">=13.7.0",
+        "long": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
+      "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
+      "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.4"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
+      "integrity": "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.0.tgz",
+      "integrity": "sha512-PZgus8ETambRT17BUm/LL8lX3Of+oiLaPuVTRH3l1eLvSPpKO3AvhAEb5N7ihAFZQrYDqkvvWfFh9p0z9VsjLw==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.0.tgz",
+      "integrity": "sha512-5CO/l5Yahi2SKC6rGZ+HDEjpjkGaG/ncEP7eWFTvFxbHP8yeeI0PxTDjimtpXYlR3b3i9/WIL4VJttPrESIf2g==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.13.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.10.tgz",
+      "integrity": "sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==",
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^10.3.7"
+      },
+      "bin": {
+        "rimraf": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.57.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
+      "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.57.1",
+        "@rollup/rollup-android-arm64": "4.57.1",
+        "@rollup/rollup-darwin-arm64": "4.57.1",
+        "@rollup/rollup-darwin-x64": "4.57.1",
+        "@rollup/rollup-freebsd-arm64": "4.57.1",
+        "@rollup/rollup-freebsd-x64": "4.57.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.57.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.57.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.57.1",
+        "@rollup/rollup-linux-arm64-musl": "4.57.1",
+        "@rollup/rollup-linux-loong64-gnu": "4.57.1",
+        "@rollup/rollup-linux-loong64-musl": "4.57.1",
+        "@rollup/rollup-linux-ppc64-gnu": "4.57.1",
+        "@rollup/rollup-linux-ppc64-musl": "4.57.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.57.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.57.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.57.1",
+        "@rollup/rollup-linux-x64-gnu": "4.57.1",
+        "@rollup/rollup-linux-x64-musl": "4.57.1",
+        "@rollup/rollup-openbsd-x64": "4.57.1",
+        "@rollup/rollup-openharmony-arm64": "4.57.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.57.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.57.1",
+        "@rollup/rollup-win32-x64-gnu": "4.57.1",
+        "@rollup/rollup-win32-x64-msvc": "4.57.1",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "license": "MIT"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
+      "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2",
+        "postcss": "^8.5.3",
+        "rollup": "^4.34.9",
+        "tinyglobby": "^0.2.13"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "jiti": ">=1.21.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/web-streams-polyfill": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    }
+  }
+}
diff --git a/web/package.json b/web/package.json
new file mode 100644
index 0000000..a0ba80d
--- /dev/null
+++ b/web/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "ai视频助手",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.563.0",
+    "react-router-dom": "^7.13.0",
+    "@google/genai": "^1.39.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}
diff --git a/web/pages/Assistants.tsx b/web/pages/Assistants.tsx
new file mode 100644
index 0000000..a22ce32
--- /dev/null
+++ b/web/pages/Assistants.tsx
@@ -0,0 +1,1129 @@
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Plus, Search, Play, Copy, Trash2, Edit2, Mic, MessageSquare, Save, Video, PhoneOff, Camera, ArrowLeftRight, Send, Phone, MoreHorizontal, Rocket, AlertTriangle, PhoneCall, CameraOff, Image, Images, CloudSun, Calendar, TrendingUp, Coins, Wrench, Globe, Terminal, X, ClipboardCheck, Sparkles, Volume2, Timer, ChevronDown, Link as LinkIcon, Database, Server, Zap, ExternalLink, Key } from 'lucide-react';
+import { Button, Input, Card, Badge, Drawer, Dialog } from '../components/UI';
+import { mockAssistants, mockKnowledgeBases, mockVoices } from '../services/mockData';
+import { Assistant, TabValue } from '../types';
+import { GoogleGenAI } from "@google/genai";
+
+interface ToolItem {
+  id: string;
+  name: string;
+  icon: React.ReactNode;
+  desc: string;
+  category: 'system' | 'query';
+  isCustom?: boolean;
+}
+
+export const AssistantsPage: React.FC = () => {
+  const [assistants, setAssistants] = useState<Assistant[]>(mockAssistants);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<TabValue>(TabValue.GLOBAL);
+  const [debugOpen, setDebugOpen] = useState(false);
+  const [hotwordInput, setHotwordInput] = useState('');
+  
+  // Publish Modal State
+  const [isPublishModalOpen, setIsPublishModalOpen] = useState(false);
+  const [publishTab, setPublishTab] = useState<'web' | 'api'>('web');
+  
+  // Custom Tools State
+  const [customTools, setCustomTools] = useState<ToolItem[]>([]);
+  const [hiddenToolIds, setHiddenToolIds] = useState<string[]>([]);
+  const [isAddToolModalOpen, setIsAddToolModalOpen] = useState(false);
+  const [addingToCategory, setAddingToCategory] = useState<'system' | 'query'>('system');
+  
+  // New Tool Form State
+  const [newToolName, setNewToolName] = useState('');
+  const [newToolDesc, setNewToolDesc] = useState('');
+
+  const [deleteId, setDeleteId] = useState<string | null>(null);
+  const [copySuccess, setCopySuccess] = useState(false);
+  const [saveLoading, setSaveLoading] = useState(false);
+
+  const selectedAssistant = assistants.find(a => a.id === selectedId) || null;
+
+  const filteredAssistants = assistants.filter(a => 
+    a.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const handleCreate = () => {
+    const newId = Math.floor(Math.random() * 1000000).toString().padStart(6, '0');
+    const newAssistant: Assistant = {
+      id: newId,
+      name: 'New Assistant',
+      callCount: 0,
+      opener: '',
+      prompt: '',
+      knowledgeBaseId: '',
+      language: 'zh',
+      voice: mockVoices[0]?.id || '',
+      speed: 1,
+      hotwords: [],
+      tools: [],
+      interruptionSensitivity: 500,
+      configMode: 'platform',
+    };
+    setAssistants([...assistants, newAssistant]);
+    setSelectedId(newId);
+    setActiveTab(TabValue.GLOBAL);
+  };
+
+  const handleSave = () => {
+    setSaveLoading(true);
+    // Simulate API call
+    setTimeout(() => {
+      setSaveLoading(false);
+      // In a real app, logic to persist selectedAssistant would go here
+    }, 800);
+  };
+
+  const handleCopyId = (id: string, text?: string) => {
+    navigator.clipboard.writeText(text || id);
+    setCopySuccess(true);
+    setTimeout(() => setCopySuccess(false), 2000);
+  };
+
+  const handleCopy = (e: React.MouseEvent, assistant: Assistant) => {
+    e.stopPropagation();
+    const newId = Math.floor(Math.random() * 1000000).toString().padStart(6, '0');
+    const newAssistant = { ...assistant, id: newId, name: `${assistant.name} (Copy)` };
+    setAssistants([...assistants, newAssistant]);
+  };
+
+  const handleDeleteClick = (e: React.MouseEvent, id: string) => {
+    e.stopPropagation();
+    setDeleteId(id);
+  };
+
+  const confirmDelete = () => {
+    if (deleteId) {
+        setAssistants(prev => prev.filter(a => a.id !== deleteId));
+        if (selectedId === deleteId) setSelectedId(null);
+        setDeleteId(null);
+    }
+  };
+
+  const updateAssistant = (field: keyof Assistant, value: any) => {
+    if (!selectedId) return;
+    setAssistants(prev => prev.map(a => a.id === selectedId ? { ...a, [field]: value } : a));
+    
+    if (field === 'configMode') {
+      if (value === 'platform') {
+        setActiveTab(TabValue.GLOBAL);
+      } else if (value === 'dify' || value === 'fastgpt') {
+        setActiveTab(TabValue.LINK);
+      }
+    }
+  };
+
+  const toggleTool = (toolId: string) => {
+    if (!selectedAssistant) return;
+    const currentTools = selectedAssistant.tools || [];
+    const newTools = currentTools.includes(toolId) 
+        ? currentTools.filter(id => id !== toolId)
+        : [...currentTools, toolId];
+    updateAssistant('tools', newTools);
+  };
+
+  const deleteTool = (e: React.MouseEvent, toolId: string) => {
+    e.stopPropagation();
+    setAssistants(prev => prev.map(a => ({
+        ...a,
+        tools: a.tools?.filter(id => id !== toolId) || []
+    })));
+
+    if (customTools.some(t => t.id === toolId)) {
+        setCustomTools(prev => prev.filter(t => t.id !== toolId));
+    } else {
+        setHiddenToolIds(prev => [...prev, toolId]);
+    }
+  };
+
+  const addHotword = () => {
+    if (hotwordInput.trim() && selectedAssistant) {
+      updateAssistant('hotwords', [...selectedAssistant.hotwords, hotwordInput.trim()]);
+      setHotwordInput('');
+    }
+  };
+
+  const removeHotword = (word: string) => {
+    if (selectedAssistant) {
+      updateAssistant('hotwords', selectedAssistant.hotwords.filter(w => w !== word));
+    }
+  };
+
+  const handleAddCustomTool = () => {
+    if (!newToolName.trim()) return;
+    const newTool: ToolItem = {
+      id: `custom_${Date.now()}`,
+      name: newToolName,
+      desc: newToolDesc,
+      category: addingToCategory,
+      icon: addingToCategory === 'system' ? <Terminal className="w-4 h-4" /> : <Globe className="w-4 h-4" />,
+      isCustom: true
+    };
+    setCustomTools([...customTools, newTool]);
+    setIsAddToolModalOpen(false);
+    setNewToolName('');
+    setNewToolDesc('');
+  };
+
+  const openAddToolModal = (e: React.MouseEvent, cat: 'system' | 'query') => {
+    e.stopPropagation();
+    setAddingToCategory(cat);
+    setIsAddToolModalOpen(true);
+  };
+
+  const baseSystemTools: ToolItem[] = [
+    { id: 'cam_open', name: '打开相机', icon: <Camera className="w-4 h-4" />, desc: '允许 AI 开启摄像头流', category: 'system' },
+    { id: 'cam_close', name: '关闭相机', icon: <CameraOff className="w-4 h-4" />, desc: '允许 AI 停止摄像头流', category: 'system' },
+    { id: 'take_photo', name: '拍照', icon: <Image className="w-4 h-4" />, desc: 'AI 触发单张拍摄', category: 'system' },
+    { id: 'burst_3', name: '连拍三张', icon: <Images className="w-4 h-4" />, desc: 'AI 触发快速连拍', category: 'system' },
+  ];
+
+  const baseQueryTools: ToolItem[] = [
+    { id: 'q_weather', name: '天气查询', icon: <CloudSun className="w-4 h-4" />, desc: '查询实时及未来天气', category: 'query' },
+    { id: 'q_calendar', name: '日历查询', icon: <Calendar className="w-4 h-4" />, desc: '查询日程及节假日信息', category: 'query' },
+    { id: 'q_stock', name: '股价查询', icon: <TrendingUp className="w-4 h-4" />, desc: '查询股票实时行情', category: 'query' },
+    { id: 'q_exchange', name: '汇率查询', icon: <Coins className="w-4 h-4" />, desc: '查询多国货币汇率', category: 'query' },
+  ];
+
+  const systemTools = [...baseSystemTools, ...customTools.filter(t => t.category === 'system')].filter(t => !hiddenToolIds.includes(t.id));
+  const queryTools = [...baseQueryTools, ...customTools.filter(t => t.category === 'query')].filter(t => !hiddenToolIds.includes(t.id));
+
+  const isExternalConfig = selectedAssistant?.configMode === 'dify' || selectedAssistant?.configMode === 'fastgpt';
+  const isNoneConfig = selectedAssistant?.configMode === 'none' || !selectedAssistant?.configMode;
+
+  return (
+    <div className="flex h-[calc(100vh-8rem)] gap-6 animate-in fade-in py-4">
+      {/* LEFT COLUMN: List */}
+      <div className="w-80 flex flex-col gap-4 shrink-0">
+        <div className="flex items-center justify-between px-1 text-white">
+            <h2 className="text-xl font-bold tracking-tight text-white">小助手列表</h2>
+        </div>
+        
+        <div className="flex gap-2">
+            <div className="relative flex-1">
+                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input 
+                  placeholder="搜索..." 
+                  className="pl-9 bg-card/50 border-white/5"
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                />
+            </div>
+            <Button size="icon" onClick={handleCreate} title="新建小助手">
+                <Plus className="h-5 w-5" />
+            </Button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto space-y-2 pr-1 custom-scrollbar">
+            {filteredAssistants.map(assistant => (
+                <div 
+                    key={assistant.id}
+                    onClick={() => setSelectedId(assistant.id)}
+                    className={`group relative flex flex-col p-4 rounded-xl border transition-all cursor-pointer ${
+                        selectedId === assistant.id 
+                        ? 'bg-primary/10 border-primary/40 shadow-[0_0_15px_rgba(6,182,212,0.15)]' 
+                        : 'bg-card/30 border-white/5 hover:bg-white/5 hover:border-white/10'
+                    }`}
+                >
+                    <div className="flex flex-col gap-1.5 mb-2 pr-16 overflow-hidden">
+                        <span className={`font-semibold truncate ${selectedId === assistant.id ? 'text-primary' : 'text-foreground'}`}>
+                            {assistant.name}
+                        </span>
+                        {assistant.configMode && assistant.configMode !== 'none' && (
+                          <div className="flex">
+                            <Badge 
+                              variant="outline" 
+                              className={`text-[9px] uppercase tracking-tighter shrink-0 opacity-70 border-white/10 ${
+                                assistant.configMode === 'platform' ? 'text-cyan-400 bg-cyan-400/5' : 
+                                assistant.configMode === 'dify' ? 'text-blue-400 bg-blue-400/5' : 
+                                'text-purple-400 bg-purple-400/5'
+                              }`}
+                            >
+                              {assistant.configMode === 'platform' ? '内置' : assistant.configMode}
+                            </Badge>
+                          </div>
+                        )}
+                    </div>
+                    
+                    <div className="flex items-center text-xs text-muted-foreground">
+                        <Phone className="h-3 w-3 mr-1.5 opacity-70" />
+                        <span>{assistant.callCount} 次通话</span>
+                    </div>
+
+                    <div className="absolute right-2 top-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity bg-background/50 backdrop-blur-sm rounded-lg p-0.5 shadow-lg border border-white/5">
+                        <Button variant="ghost" size="icon" className="h-7 w-7" onClick={(e) => handleCopy(e, assistant)} title="复制">
+                            <Copy className="h-3.5 w-3.5" />
+                        </Button>
+                        <Button variant="ghost" size="icon" className="h-7 w-7 text-destructive hover:text-destructive" onClick={(e) => handleDeleteClick(e, assistant.id)} title="删除">
+                            <Trash2 className="h-3.5 w-3.5" />
+                        </Button>
+                    </div>
+                </div>
+            ))}
+            {filteredAssistants.length === 0 && (
+                <div className="text-center py-10 text-muted-foreground text-sm">
+                    未找到小助手
+                </div>
+            )}
+        </div>
+      </div>
+
+      {/* RIGHT COLUMN: Config Panel */}
+      <div className="flex-1 bg-card/20 backdrop-blur-sm border border-white/5 rounded-2xl overflow-hidden flex flex-col relative shadow-xl">
+        {selectedAssistant ? (
+            <>
+                {/* Header Area */}
+                <div className="p-6 border-b border-white/5 bg-white/[0.02] space-y-5">
+                    <div className="flex items-start justify-between gap-4">
+                        <div className="flex-1">
+                            <div className="flex items-center gap-2 mb-2">
+                                <label className="text-[10px] text-muted-foreground font-black tracking-widest uppercase ml-1">小助手名称</label>
+                                <div className="flex items-center gap-1.5 px-2 py-0.5 rounded-md bg-white/5 border border-white/10 group/id transition-all hover:bg-white/10">
+                                    <span className="text-[10px] font-mono text-muted-foreground/60 select-all tracking-tight">UUID: {selectedAssistant.id}</span>
+                                    <button 
+                                        onClick={() => handleCopyId(selectedAssistant.id)}
+                                        className="text-muted-foreground hover:text-primary transition-colors flex items-center"
+                                        title="复制ID"
+                                    >
+                                        {copySuccess ? <ClipboardCheck className="h-3 w-3 text-green-400" /> : <Copy className="h-3 w-3" />}
+                                    </button>
+                                </div>
+                            </div>
+                            <Input 
+                                value={selectedAssistant.name}
+                                onChange={(e) => updateAssistant('name', e.target.value)}
+                                className="font-bold bg-white/5 border-white/10 focus:border-primary/50 text-base"
+                            />
+                        </div>
+                        <div className="flex items-center space-x-2 pt-6">
+                             <Button 
+                                variant="secondary" 
+                                onClick={() => setDebugOpen(true)} 
+                                className="border border-primary/20 hover:border-primary/50 text-primary hover:text-primary hover:bg-primary/10 shadow-[0_0_15px_rgba(6,182,212,0.1)]"
+                             >
+                                <Play className="mr-2 h-4 w-4" /> 调试
+                            </Button>
+                            <Button 
+                                variant="outline" 
+                                onClick={handleSave} 
+                                disabled={saveLoading}
+                                className="border border-white/10 hover:border-primary/50 text-foreground"
+                             >
+                                <Save className={`mr-2 h-4 w-4 ${saveLoading ? 'animate-pulse' : ''}`} /> {saveLoading ? '正在保存...' : '保存'}
+                            </Button>
+                            <Button 
+                                onClick={() => setIsPublishModalOpen(true)} 
+                                className="shadow-[0_0_20px_rgba(6,182,212,0.3)]"
+                            >
+                                <Rocket className="mr-2 h-4 w-4" /> 发布
+                            </Button>
+                        </div>
+                    </div>
+
+                    <div className="space-y-2">
+                        <label className="text-[10px] text-muted-foreground font-black tracking-widest uppercase ml-1">配置方式</label>
+                        <div className="relative group w-full">
+                          <select 
+                            className="flex h-10 w-full rounded-md border border-white/10 bg-white/5 px-3 py-1 text-sm shadow-sm transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 text-foreground appearance-none cursor-pointer [&>option]:bg-card"
+                            value={selectedAssistant.configMode || 'none'}
+                            onChange={(e) => updateAssistant('configMode', e.target.value as any)}
+                          >
+                            <option value="none">无</option>
+                            <option value="platform">平台配置</option>
+                            <option value="dify">Dify 接入</option>
+                            <option value="fastgpt">FastGPT 接入</option>
+                          </select>
+                          <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none group-hover:text-primary transition-colors" />
+                        </div>
+                    </div>
+
+                    {!isNoneConfig && (
+                      <div className="flex bg-white/5 p-1 rounded-lg w-fit border border-white/5 animate-in fade-in slide-in-from-top-1">
+                          {selectedAssistant.configMode === 'platform' ? (
+                            <>
+                              <button
+                                  onClick={() => setActiveTab(TabValue.GLOBAL)}
+                                  className={`px-6 py-1.5 text-sm font-medium rounded-md transition-all ${activeTab === TabValue.GLOBAL ? 'bg-primary text-primary-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground hover:bg-white/5'}`}
+                              >
+                                  全局配置
+                              </button>
+                              <button
+                                  onClick={() => setActiveTab(TabValue.VOICE)}
+                                  className={`px-6 py-1.5 text-sm font-medium rounded-md transition-all ${activeTab === TabValue.VOICE ? 'bg-primary text-primary-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground hover:bg-white/5'}`}
+                              >
+                                  语音配置
+                              </button>
+                              <button
+                                  onClick={() => setActiveTab(TabValue.TOOLS)}
+                                  className={`px-6 py-1.5 text-sm font-medium rounded-md transition-all ${activeTab === TabValue.TOOLS ? 'bg-primary text-primary-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground hover:bg-white/5'}`}
+                              >
+                                  工具配置
+                              </button>
+                            </>
+                          ) : (
+                            <>
+                              <button
+                                  onClick={() => setActiveTab(TabValue.LINK)}
+                                  className={`px-6 py-1.5 text-sm font-medium rounded-md transition-all ${activeTab === TabValue.LINK ? 'bg-primary text-primary-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground hover:bg-white/5'}`}
+                              >
+                                  链接设置
+                              </button>
+                              <button
+                                  onClick={() => setActiveTab(TabValue.VOICE)}
+                                  className={`px-6 py-1.5 text-sm font-medium rounded-md transition-all ${activeTab === TabValue.VOICE ? 'bg-primary text-primary-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground hover:bg-white/5'}`}
+                              >
+                                  语音设置
+                              </button>
+                            </>
+                          )}
+                      </div>
+                    )}
+                </div>
+
+                <div className="flex-1 overflow-y-auto p-8 custom-scrollbar">
+                    {isNoneConfig ? (
+                      <div className="h-full flex flex-col items-center justify-center text-muted-foreground opacity-40 animate-in fade-in">
+                          <AlertTriangle className="w-12 h-12 mb-4" />
+                          <p className="text-sm font-medium">请先选择配置方式以展开详细设置</p>
+                      </div>
+                    ) : (
+                      <div className="max-w-4xl mx-auto space-y-8 animate-in slide-in-from-bottom-2 duration-300">
+                        {activeTab === TabValue.LINK && isExternalConfig && (
+                           <div className="space-y-6 animate-in fade-in">
+                              <div className="p-4 rounded-xl bg-primary/5 border border-primary/20 flex items-start gap-3 mb-4">
+                                <Database className="w-5 h-5 text-primary shrink-0 mt-0.5" />
+                                <div>
+                                  <h4 className="text-sm font-bold text-white mb-1">
+                                    接入 {selectedAssistant.configMode === 'dify' ? 'Dify' : 'FastGPT'} 引擎
+                                  </h4>
+                                  <p className="text-xs text-muted-foreground leading-relaxed">
+                                    配置后，视频通话过程中的对话逻辑、知识库检索以及工作流将由外部引擎托管。
+                                  </p>
+                                </div>
+                              </div>
+
+                              <div className="space-y-2">
+                                  <label className="text-sm font-medium text-white flex items-center">
+                                      <Globe className="w-4 h-4 mr-2 text-primary"/> 接口地址 (API URL)
+                                  </label>
+                                  <Input 
+                                      value={selectedAssistant.apiUrl || ''}
+                                      onChange={(e) => updateAssistant('apiUrl', e.target.value)}
+                                      placeholder={selectedAssistant.configMode === 'dify' ? "https://api.dify.ai/v1" : "https://api.fastgpt.in/api/v1"}
+                                      className="bg-white/5 border-white/10 focus:border-primary/50 font-mono text-xs"
+                                  />
+                              </div>
+
+                              <div className="space-y-2">
+                                  <label className="text-sm font-medium text-white flex items-center">
+                                      <Terminal className="w-4 h-4 mr-2 text-primary"/> 密钥 (API KEY)
+                                  </label>
+                                  <Input 
+                                      type="password"
+                                      value={selectedAssistant.apiKey || ''}
+                                      onChange={(e) => updateAssistant('apiKey', e.target.value)}
+                                      placeholder="请输入应用 API 密钥..."
+                                      className="bg-white/5 border-white/10 focus:border-primary/50 font-mono text-xs"
+                                  />
+                              </div>
+                           </div>
+                        )}
+
+                        {activeTab === TabValue.GLOBAL && selectedAssistant.configMode === 'platform' && (
+                            <div className="space-y-6">
+                                <div className="space-y-2">
+                                    <label className="text-sm font-medium text-white flex items-center">
+                                        <MessageSquare className="w-4 h-4 mr-2 text-primary"/> 开场白 (Opener)
+                                    </label>
+                                    <Input 
+                                        value={selectedAssistant.opener}
+                                        onChange={(e) => updateAssistant('opener', e.target.value)}
+                                        placeholder="例如：您好，我是您的专属AI助手..."
+                                        className="bg-white/5 border-white/10 focus:border-primary/50"
+                                    />
+                                    <p className="text-xs text-muted-foreground">接通通话后的第一句话。</p>
+                                </div>
+
+                                <div className="space-y-2">
+                                    <label className="text-sm font-medium text-white flex items-center">
+                                        <BotIcon className="w-4 h-4 mr-2 text-primary"/> 提示词 (Prompt)
+                                    </label>
+                                    <textarea 
+                                        className="flex min-h-[200px] w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 resize-y text-white"
+                                        value={selectedAssistant.prompt}
+                                        onChange={(e) => updateAssistant('prompt', e.target.value)}
+                                        placeholder="设定小助手的人设、语气、行为规范以及业务逻辑..."
+                                    />
+                                </div>
+
+                                <div className="space-y-2">
+                                    <label className="text-sm font-medium text-white">知识库绑定</label>
+                                    <select 
+                                        className="flex h-10 w-full rounded-md border border-white/10 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 [&>option]:bg-card text-foreground"
+                                        value={selectedAssistant.knowledgeBaseId}
+                                        onChange={(e) => updateAssistant('knowledgeBaseId', e.target.value)}
+                                    >
+                                        <option value="">如果不选择，则使用通用大模型知识</option>
+                                        {mockKnowledgeBases.map(kb => (
+                                            <option key={kb.id} value={kb.id}>{kb.name}</option>
+                                        ))}
+                                    </select>
+                                </div>
+                            </div>
+                        )}
+
+                        {activeTab === TabValue.VOICE && !isNoneConfig && (
+                            <div className="space-y-8">
+                                <div className="space-y-2">
+                                    <label className="text-sm font-medium text-white flex items-center">
+                                        <Volume2 className="w-4 h-4 mr-2 text-primary"/> 选择音色 (From Voice Library)
+                                    </label>
+                                    <div className="relative group">
+                                        <select 
+                                            className="flex h-12 w-full rounded-xl border border-white/10 bg-white/5 px-4 py-1 text-sm shadow-sm transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 [&>option]:bg-card text-foreground appearance-none cursor-pointer"
+                                            value={selectedAssistant.voice}
+                                            onChange={(e) => updateAssistant('voice', e.target.value)}
+                                        >
+                                            <option value="" disabled>请选择声音库中的声音...</option>
+                                            {mockVoices.map(voice => (
+                                                <option key={voice.id} value={voice.id}>
+                                                    {voice.name} ({voice.vendor} - {voice.gender === 'Male' ? '男' : '女'})
+                                                </option>
+                                            ))}
+                                        </select>
+                                        <ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none group-hover:text-primary transition-colors" />
+                                    </div>
+                                    <p className="text-xs text-muted-foreground flex items-center mt-1">
+                                        <Sparkles className="w-3 h-3 mr-1 text-primary opacity-70" />
+                                        音色配置同步自声音库。如需添加更多音色，请前往“声音库”模块。
+                                    </p>
+                                </div>
+
+                                <div className="space-y-4 pt-2">
+                                    <div className="flex justify-between items-center mb-1">
+                                        <label className="text-sm font-medium text-white flex items-center">
+                                            <Timer className="w-4 h-4 mr-2 text-primary"/> 打断灵敏度 (Interruption Sensitivity)
+                                        </label>
+                                        <div className="flex items-center gap-2">
+                                            <div className="relative">
+                                                <Input 
+                                                    type="number"
+                                                    value={selectedAssistant.interruptionSensitivity || 500}
+                                                    onChange={(e) => updateAssistant('interruptionSensitivity', parseInt(e.target.value) || 0)}
+                                                    className="w-20 h-8 text-right pr-7 text-xs font-mono bg-black/40 border-white/5"
+                                                />
+                                                <span className="absolute right-2 top-1/2 -translate-y-1/2 text-[10px] text-muted-foreground font-mono">ms</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="flex items-center gap-6">
+                                        <input 
+                                            type="range" 
+                                            min="0" 
+                                            max="2000" 
+                                            step="50" 
+                                            value={selectedAssistant.interruptionSensitivity || 500}
+                                            onChange={(e) => updateAssistant('interruptionSensitivity', parseInt(e.target.value))}
+                                            className="flex-1 h-1.5 bg-secondary rounded-lg appearance-none cursor-pointer accent-primary"
+                                        />
+                                    </div>
+                                    <div className="flex justify-between text-[10px] text-muted-foreground font-mono uppercase tracking-widest px-0.5 opacity-50">
+                                        <span>0ms (Extreme)</span>
+                                        <span>1000ms</span>
+                                        <span>2000ms (Lazy)</span>
+                                    </div>
+                                    <p className="text-xs text-muted-foreground pt-1 italic opacity-60">
+                                        * 定义用户说话多长时间后 AI 应当停止当前的发言并响应。数值越小响应越快，但也更容易被噪音误导打断。
+                                    </p>
+                                </div>
+
+                                <div className="space-y-3">
+                                    <label className="text-sm font-medium text-white flex items-center">
+                                        <Mic className="w-4 h-4 mr-2 text-primary"/> ASR 热词优化 (Hotwords)
+                                    </label>
+                                    <div className="flex space-x-2">
+                                        <Input 
+                                            value={hotwordInput}
+                                            onChange={(e) => setHotwordInput(e.target.value)}
+                                            placeholder="输入专有名词或高频词汇..."
+                                            onKeyDown={(e) => e.key === 'Enter' && addHotword()}
+                                            className="bg-white/5 border-white/10"
+                                        />
+                                        <Button variant="secondary" onClick={addHotword} className="px-10 whitespace-nowrap">添加</Button>
+                                    </div>
+                                    <div className="flex flex-wrap gap-2 min-h-[40px] p-2 rounded-lg border border-dashed border-white/10">
+                                        {selectedAssistant.hotwords.length === 0 && (
+                                            <span className="text-xs text-muted-foreground py-1 px-1">暂无热词</span>
+                                        )}
+                                        {selectedAssistant.hotwords.map((word, idx) => (
+                                            <Badge key={idx} variant="outline" className="py-1">
+                                                {word}
+                                                <button onClick={() => removeHotword(word)} className="ml-2 hover:text-destructive transition-colors text-lg leading-none">×</button>
+                                            </Badge>
+                                        ))}
+                                    </div>
+                                    <p className="text-xs text-muted-foreground">添加热词可以提高语音识别特定词汇的准确率。</p>
+                                </div>
+                            </div>
+                        )}
+
+                        {activeTab === TabValue.TOOLS && selectedAssistant.configMode === 'platform' && (
+                            <div className="space-y-8 animate-in fade-in">
+                                <div className="space-y-4">
+                                    <div className="flex items-center justify-between">
+                                        <h3 className="text-[10px] font-black flex items-center text-primary uppercase tracking-[0.2em]">
+                                            <Wrench className="w-3.5 h-3.5 mr-2" /> 系统指令
+                                        </h3>
+                                        <button 
+                                            onClick={(e) => openAddToolModal(e, 'system')}
+                                            className="p-1 rounded-full bg-primary/10 text-primary hover:bg-primary/20 transition-colors shadow-sm"
+                                        >
+                                            <Plus className="w-3.5 h-3.5" />
+                                        </button>
+                                    </div>
+                                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                        {systemTools.map(tool => (
+                                            <div 
+                                                key={tool.id}
+                                                onClick={() => toggleTool(tool.id)}
+                                                className={`p-4 rounded-xl border transition-all cursor-pointer group relative flex items-start space-x-3 ${selectedAssistant.tools?.includes(tool.id) ? 'bg-primary/10 border-primary/40 shadow-[0_0_15px_rgba(6,182,212,0.1)]' : 'bg-card/30 border-white/5 hover:bg-white/5 hover:border-white/10'}`}
+                                            >
+                                                <div className={`p-2 rounded-lg shrink-0 transition-colors ${selectedAssistant.tools?.includes(tool.id) ? 'bg-primary text-primary-foreground' : 'bg-white/5 text-muted-foreground'}`}>
+                                                    {tool.icon}
+                                                </div>
+                                                <div className="flex-1 min-w-0">
+                                                    <div className="flex items-center justify-between mb-0.5">
+                                                        <span className="text-sm font-bold text-white">{tool.name}</span>
+                                                        <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center transition-all ${selectedAssistant.tools?.includes(tool.id) ? 'border-primary bg-primary' : 'border-white/10'}`}>
+                                                            {selectedAssistant.tools?.includes(tool.id) && <div className="w-1.5 h-1.5 bg-white rounded-full"></div>}
+                                                        </div>
+                                                    </div>
+                                                    <p className="text-[10px] text-muted-foreground line-clamp-1 opacity-70">{tool.desc}</p>
+                                                </div>
+                                                <button 
+                                                    onClick={(e) => deleteTool(e, tool.id)}
+                                                    className="absolute -top-1 -right-1 p-0.5 rounded-full bg-destructive text-white opacity-0 group-hover:opacity-100 transition-opacity hover:scale-110 shadow-lg z-10"
+                                                    title="删除工具"
+                                                >
+                                                    <X className="w-3 h-3" />
+                                                </button>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+
+                                <div className="space-y-4">
+                                    <div className="flex items-center justify-between">
+                                        <h3 className="text-[10px] font-black flex items-center text-blue-400 uppercase tracking-[0.2em]">
+                                            <TrendingUp className="w-3.5 h-3.5 mr-2" /> 信息查询
+                                        </h3>
+                                        <button 
+                                            onClick={(e) => openAddToolModal(e, 'query')}
+                                            className="p-1 rounded-full bg-blue-500/10 text-blue-400 hover:bg-blue-500/20 transition-colors shadow-sm"
+                                        >
+                                            <Plus className="w-3.5 h-3.5" />
+                                        </button>
+                                    </div>
+                                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                        {queryTools.map(tool => (
+                                            <div 
+                                                key={tool.id}
+                                                onClick={() => toggleTool(tool.id)}
+                                                className={`p-4 rounded-xl border transition-all cursor-pointer group relative flex items-start space-x-3 ${selectedAssistant.tools?.includes(tool.id) ? 'bg-blue-500/10 border-blue-500/40 shadow-[0_0_15px_rgba(59,130,246,0.1)]' : 'bg-card/30 border-white/5 hover:bg-white/5 hover:border-white/10'}`}
+                                            >
+                                                <div className={`p-2 rounded-lg shrink-0 transition-colors ${selectedAssistant.tools?.includes(tool.id) ? 'bg-blue-500 text-white' : 'bg-white/5 text-muted-foreground'}`}>
+                                                    {tool.icon}
+                                                </div>
+                                                <div className="flex-1 min-w-0">
+                                                    <div className="flex items-center justify-between mb-0.5">
+                                                        <span className="text-sm font-bold text-white">{tool.name}</span>
+                                                        <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center transition-all ${selectedAssistant.tools?.includes(tool.id) ? 'border-blue-500 bg-blue-500' : 'border-white/10'}`}>
+                                                            {selectedAssistant.tools?.includes(tool.id) && <div className="w-1.5 h-1.5 bg-white rounded-full"></div>}
+                                                        </div>
+                                                    </div>
+                                                    <p className="text-[10px] text-muted-foreground line-clamp-1 opacity-70">{tool.desc}</p>
+                                                </div>
+                                                <button 
+                                                    onClick={(e) => deleteTool(e, tool.id)}
+                                                    className="absolute -top-1 -right-1 p-0.5 rounded-full bg-destructive text-white opacity-0 group-hover:opacity-100 transition-opacity hover:scale-110 shadow-lg z-10"
+                                                    title="删除工具"
+                                                >
+                                                    <X className="w-3 h-3" />
+                                                </button>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+                                <div className="p-4 bg-white/5 border border-white/5 rounded-xl text-[10px] text-muted-foreground flex items-center gap-3">
+                                    <Rocket className="w-4 h-4 text-primary shrink-0" />
+                                    <span>提示：启用工具后，AI 将能在对话中自动识别并调用相关功能以协助用户。</span>
+                                </div>
+                            </div>
+                        )}
+                      </div>
+                    )}
+                </div>
+            </>
+        ) : (
+            <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground">
+                <div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center mb-4">
+                    <BotIcon className="h-8 w-8 opacity-50" />
+                </div>
+                <p className="text-lg font-medium">请选择一个小助手</p>
+                <p className="text-sm opacity-60">从左侧列表选择或创建一个新的小助手以开始配置</p>
+            </div>
+        )}
+      </div>
+
+      {/* Publish Modal */}
+      <Dialog
+        isOpen={isPublishModalOpen}
+        onClose={() => setIsPublishModalOpen(false)}
+        title="发布小助手"
+        footer={
+            <Button onClick={() => setIsPublishModalOpen(false)}>确认</Button>
+        }
+      >
+        <div className="space-y-6">
+            <div className="flex bg-white/5 p-1 rounded-lg border border-white/10">
+                <button 
+                    onClick={() => setPublishTab('web')}
+                    className={`flex-1 flex items-center justify-center py-2 text-xs font-bold rounded-md transition-all ${publishTab === 'web' ? 'bg-primary text-primary-foreground shadow-lg' : 'text-muted-foreground hover:text-foreground'}`}
+                >
+                    <ExternalLink className="w-3.5 h-3.5 mr-2" /> 网页分享
+                </button>
+                <button 
+                    onClick={() => setPublishTab('api')}
+                    className={`flex-1 flex items-center justify-center py-2 text-xs font-bold rounded-md transition-all ${publishTab === 'api' ? 'bg-primary text-primary-foreground shadow-lg' : 'text-muted-foreground hover:text-foreground'}`}
+                >
+                    <Server className="w-3.5 h-3.5 mr-2" /> API 接入
+                </button>
+            </div>
+
+            {publishTab === 'web' ? (
+                <div className="space-y-4 animate-in fade-in slide-in-from-top-1">
+                    <div className="p-4 rounded-xl bg-primary/5 border border-primary/20 space-y-3">
+                        <div className="flex items-center gap-2 text-primary">
+                            <Zap className="w-4 h-4" />
+                            <h4 className="text-sm font-bold">交互体验站</h4>
+                        </div>
+                        <p className="text-xs text-muted-foreground leading-relaxed">
+                            该链接允许用户通过独立的浏览器页面与您的智能体进行交互。支持：文本对话、实时音频通话以及双向视频通话。
+                        </p>
+                    </div>
+                    <div className="space-y-2">
+                        <label className="text-[10px] text-muted-foreground font-black tracking-widest uppercase">公开访问链接</label>
+                        <div className="flex gap-2">
+                            <Input 
+                                readOnly 
+                                value={`https://ai-video.com/share/${selectedAssistant?.id}`} 
+                                className="bg-white/5 border-white/10 font-mono text-[11px] text-primary"
+                            />
+                            <Button variant="secondary" size="icon" onClick={() => handleCopyId('', `https://ai-video.com/share/${selectedAssistant?.id}`)}>
+                                {copySuccess ? <ClipboardCheck className="h-4 w-4 text-green-400" /> : <Copy className="h-4 w-4" />}
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            ) : (
+                <div className="space-y-5 animate-in fade-in slide-in-from-top-1">
+                    <div className="space-y-2">
+                        <label className="text-[10px] text-muted-foreground font-black tracking-widest uppercase">API Endpoint (v1)</label>
+                        <div className="flex gap-2">
+                            <Input 
+                                readOnly 
+                                value={`https://api.ai-video.com/v1/call/${selectedAssistant?.id}`} 
+                                className="bg-white/5 border-white/10 font-mono text-[11px]"
+                            />
+                            <Button variant="ghost" size="icon" onClick={() => handleCopyId('', `https://api.ai-video.com/v1/call/${selectedAssistant?.id}`)}>
+                                <Copy className="h-4 w-4" />
+                            </Button>
+                        </div>
+                    </div>
+                    <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                            <label className="text-[10px] text-muted-foreground font-black tracking-widest uppercase">Secret API KEY</label>
+                            <Badge variant="outline" className="text-[8px] opacity-50">PRIVATE</Badge>
+                        </div>
+                        <div className="flex gap-2">
+                            <Input 
+                                readOnly 
+                                type="password"
+                                value="sk-ai-video-78x29jKkL1M90vX..." 
+                                className="bg-white/5 border-white/10 font-mono text-[11px]"
+                            />
+                            <Button variant="ghost" size="icon" onClick={() => handleCopyId('', "sk-ai-video-78x29jKkL1M90vX...")}>
+                                <Copy className="h-4 w-4" />
+                            </Button>
+                        </div>
+                        <p className="text-[10px] text-muted-foreground italic flex items-center gap-1.5 px-1 mt-2">
+                            <Key className="w-3 h-3" /> API Key 仅用于身份鉴权，请务必妥善保存。
+                        </p>
+                    </div>
+                </div>
+            )}
+        </div>
+      </Dialog>
+
+      {selectedAssistant && (
+         <DebugDrawer 
+           isOpen={debugOpen} 
+           onClose={() => setDebugOpen(false)} 
+           assistant={selectedAssistant} 
+         />
+      )}
+
+      {/* Add Custom Tool Modal */}
+      <Dialog
+        isOpen={isAddToolModalOpen}
+        onClose={() => setIsAddToolModalOpen(false)}
+        title={addingToCategory === 'system' ? '添加自定义系统指令' : '添加自定义信息查询'}
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setIsAddToolModalOpen(false)}>取消</Button>
+            <Button onClick={handleAddCustomTool}>确认添加</Button>
+          </>
+        }
+      >
+        <div className="space-y-4">
+          <div className="space-y-1.5">
+            <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">工具名称</label>
+            <Input 
+              value={newToolName} 
+              onChange={e => setNewToolName(e.target.value)} 
+              placeholder="例如: 智能家居控制" 
+              autoFocus
+            />
+          </div>
+          <div className="space-y-1.5">
+            <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">工具描述 (给 AI 的说明)</label>
+            <textarea 
+              className="flex min-h-[100px] w-full rounded-md border border-white/10 bg-white/5 px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 text-white"
+              value={newToolDesc}
+              onChange={e => setNewToolDesc(e.target.value)}
+              placeholder="描述该工具的功能，以及 AI 应该在什么情况下调用它..."
+            />
+          </div>
+          <div className="p-3 bg-primary/5 border border-primary/20 rounded-lg text-[10px] text-muted-foreground flex items-start gap-2">
+            <Wrench className="w-3.5 h-3.5 text-primary shrink-0 mt-0.5" />
+            <p>自定义工具将通过其名称 and 描述告知 AI 它的用途。您可以在后续的工作流中进一步定义 these 工具的具体行为逻辑。</p>
+          </div>
+        </div>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog 
+        isOpen={!!deleteId} 
+        onClose={() => setDeleteId(null)} 
+        title="确认删除"
+        footer={
+            <>
+                <Button variant="ghost" onClick={() => setDeleteId(null)}>取消</Button>
+                <Button variant="destructive" onClick={confirmDelete}>确认删除</Button>
+            </>
+        }
+      >
+        <div className="flex items-center space-x-4">
+            <div className="p-3 bg-destructive/10 rounded-full">
+                <AlertTriangle className="h-6 w-6 text-destructive" />
+            </div>
+            <div>
+                <p className="text-sm text-foreground text-white">
+                    您确定要删除此小助手吗？此操作无法撤销。
+                </p>
+                {deleteId && (
+                    <p className="text-xs text-muted-foreground mt-1">
+                        将要删除: {assistants.find(a => a.id === deleteId)?.name}
+                    </p>
+                )}
+            </div>
+        </div>
+      </Dialog>
+    </div>
+  );
+};
+
+// Icon helper
+const BotIcon = ({className}: {className?: string}) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
+        <path d="M12 8V4H8" />
+        <rect width="16" height="12" x="4" y="8" rx="2" />
+        <path d="M2 14h2" />
+        <path d="M20 14h2" />
+        <path d="M15 13v2" />
+        <path d="M9 13v2" />
+    </svg>
+);
+
+// --- Debug Drawer Component ---
+export const DebugDrawer: React.FC<{ isOpen: boolean; onClose: () => void; assistant: Assistant }> = ({ isOpen, onClose, assistant }) => {
+  const [mode, setMode] = useState<'text' | 'voice' | 'video'>('text');
+  const [messages, setMessages] = useState<{role: 'user' | 'model', text: string}[]>([]);
+  const [inputText, setInputText] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [callStatus, setCallStatus] = useState<'idle' | 'calling' | 'active'>('idle');
+  
+  // Media State
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
+  const [selectedCamera, setSelectedCamera] = useState<string>('');
+  const [selectedMic, setSelectedMic] = useState<string>('');
+  const [isSwapped, setIsSwapped] = useState(false); 
+
+  // Initialize
+  useEffect(() => {
+    if (isOpen) {
+      if (mode === 'text') {
+        setMessages([{ role: 'model', text: assistant.opener || "Hello!" }]);
+      } else {
+        setMessages([]);
+        setCallStatus('idle');
+      }
+    } else {
+        setMode('text');
+        stopMedia();
+        setIsSwapped(false);
+        setCallStatus('idle');
+    }
+  }, [isOpen, assistant, mode]);
+
+  // Auto-scroll logic
+  useEffect(() => {
+      if (scrollRef.current) {
+          scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+      }
+  }, [messages, mode]);
+
+  // Fetch Devices
+  useEffect(() => {
+    if (isOpen && mode === 'video') {
+        const getDevices = async () => {
+            try {
+                await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
+                const dev = await navigator.mediaDevices.enumerateDevices();
+                setDevices(dev);
+                const cams = dev.filter(d => d.kind === 'videoinput');
+                const mics = dev.filter(d => d.kind === 'audioinput');
+                if (cams.length > 0 && !selectedCamera) setSelectedCamera(cams[0].deviceId);
+                if (mics.length > 0 && !selectedMic) setSelectedMic(mics[0].deviceId);
+            } catch (e) {
+                console.error("Error enumerating devices", e);
+            }
+        };
+        getDevices();
+    }
+  }, [isOpen, mode]);
+
+  const stopMedia = () => {
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach(track => track.stop());
+        streamRef.current = null;
+      }
+  };
+
+  useEffect(() => {
+    const handleStream = async () => {
+      if (isOpen && mode === 'video' && callStatus === 'active') {
+        try {
+          stopMedia();
+          const constraints = {
+              video: selectedCamera ? { deviceId: { exact: selectedCamera } } : true,
+              audio: selectedMic ? { deviceId: { exact: selectedMic } } : true
+          };
+          const stream = await navigator.mediaDevices.getUserMedia(constraints);
+          streamRef.current = stream;
+          if (videoRef.current) {
+            videoRef.current.srcObject = stream;
+          }
+        } catch (err) {
+          console.error("Failed to access camera/mic:", err);
+        }
+      } else if (callStatus !== 'active') {
+        stopMedia();
+      }
+    };
+
+    handleStream();
+    return () => stopMedia();
+  }, [mode, isOpen, selectedCamera, selectedMic, callStatus]);
+
+  const handleCall = () => {
+    setCallStatus('calling');
+    setTimeout(() => {
+        setCallStatus('active');
+        setMessages([{ role: 'model', text: assistant.opener || "Hello!" }]);
+    }, 1500);
+  };
+
+  const handleHangup = () => {
+    stopMedia();
+    setCallStatus('idle');
+    setMessages([]);
+  };
+
+  const handleSend = async () => {
+    if (!inputText.trim()) return;
+    const userMsg = inputText;
+    setMessages(prev => [...prev, { role: 'user', text: userMsg }]);
+    setInputText('');
+    setIsLoading(true);
+
+    try {
+      if (process.env.API_KEY) {
+        const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
+        const chat = ai.chats.create({
+            model: "gemini-3-flash-preview",
+            config: { systemInstruction: assistant.prompt },
+            history: messages.map(m => ({ role: m.role, parts: [{ text: m.text }] }))
+        });
+        const result = await chat.sendMessage({ message: userMsg });
+        setMessages(prev => [...prev, { role: 'model', text: result.text || '' }]);
+      } else {
+        setTimeout(() => {
+            setMessages(prev => [...prev, { role: 'model', text: `[Mock Response]: Received "${userMsg}"` }]);
+            setIsLoading(false);
+        }, 1000);
+      }
+    } catch (e) {
+      console.error(e);
+      setMessages(prev => [...prev, { role: 'model', text: "Error: Failed to connect to AI service." }]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const TranscriptionLog = () => (
+    <div ref={scrollRef} className="flex-1 overflow-y-auto space-y-4 p-2 border border-white/5 rounded-md bg-black/20 min-h-0">
+        {messages.length === 0 && <div className="text-center text-muted-foreground text-xs py-4">暂无转写记录</div>}
+        {messages.map((m, i) => (
+        <div key={i} className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+            <div className={`max-w-[85%] rounded-lg px-3 py-2 text-sm ${m.role === 'user' ? 'bg-primary text-primary-foreground' : 'bg-card border border-white/10 shadow-sm text-foreground'}`}>
+            <span className="text-[10px] opacity-70 block mb-0.5 uppercase tracking-wider">{m.role === 'user' ? 'Me' : 'AI'}</span>
+            {m.text}
+            </div>
+        </div>
+        ))}
+        {isLoading && <div className="text-xs text-muted-foreground ml-2 animate-pulse">Thinking...</div>}
+    </div>
+  );
+
+  const renderLocalVideo = (isSmall: boolean) => (
+      <div className={`relative w-full h-full bg-black overflow-hidden ${isSmall ? 'rounded-lg border border-white/20 shadow-lg' : ''}`}>
+          <video ref={videoRef} autoPlay muted playsInline className="w-full h-full object-cover transform scale-x-[-1]" />
+          <div className="absolute top-2 left-2 bg-black/50 px-2 py-0.5 rounded text-[10px] text-white/80">Me</div>
+      </div>
+  );
+
+  const renderRemoteVideo = (isSmall: boolean) => (
+      <div className={`relative w-full h-full bg-slate-900 overflow-hidden flex flex-col items-center justify-center ${isSmall ? 'rounded-lg border border-white/20 shadow-lg' : ''}`}>
+           <div className="relative flex items-center justify-center">
+               <div className={`rounded-full bg-primary/20 animate-pulse ${isSmall ? 'w-16 h-16' : 'w-32 h-32'}`}></div>
+               <div className={`absolute rounded-full bg-primary flex items-center justify-center shadow-[0_0_30px_hsl(var(--primary))] ${isSmall ? 'w-12 h-12' : 'w-24 h-24'}`}>
+                   <Video className={`${isSmall ? 'w-6 h-6' : 'w-10 h-10'} text-primary-foreground`} />
+               </div>
+           </div>
+           {!isSmall && <div className="mt-4 font-mono text-primary animate-pulse text-sm">{assistant.name}</div>}
+      </div>
+  );
+
+  return (
+    <Drawer isOpen={isOpen} onClose={() => { handleHangup(); onClose(); }} title={`调试: ${assistant.name}`}>
+      <div className="flex flex-col h-full">
+        <div className="flex justify-center mb-4 bg-white/5 p-1 rounded-lg shrink-0">
+          {(['text', 'voice', 'video'] as const).map(m => (
+            <button key={m} className={`flex-1 py-1 text-sm rounded-md transition-all ${mode === m ? 'bg-primary text-primary-foreground shadow' : 'text-muted-foreground hover:bg-white/5'}`} onClick={() => setMode(m)}>
+               {m === 'text' && <MessageSquare className="inline w-4 h-4 mr-1"/>}
+               {m === 'voice' && <Mic className="inline w-4 h-4 mr-1"/>}
+               {m === 'video' && <Video className="inline w-4 h-4 mr-1"/>}
+               {m === 'text' ? '文本' : m === 'voice' ? '语音' : '视频'}
+            </button>
+          ))}
+        </div>
+
+        <div className="flex-1 overflow-hidden flex flex-col min-h-0 mb-4">
+          {mode === 'text' ? (
+             <TranscriptionLog />
+          ) : callStatus === 'idle' ? (
+             <div className="flex-1 flex flex-col items-center justify-center space-y-6 border border-white/5 rounded-xl bg-black/20 animate-in fade-in zoom-in-95">
+                <div className="relative">
+                    <div className="absolute inset-0 bg-primary/20 rounded-full blur-2xl animate-pulse"></div>
+                    <div className="relative h-24 w-24 rounded-full bg-white/5 border border-white/10 flex items-center justify-center">
+                       {mode === 'voice' ? <Mic className="h-10 w-10 text-muted-foreground" /> : <Video className="h-10 w-10 text-muted-foreground" />}
+                    </div>
+                </div>
+                <div className="text-center">
+                    <h3 className="text-lg font-bold text-white mb-1">准备就绪</h3>
+                    <p className="text-xs text-muted-foreground">点击下方按钮开启人机交互测试</p>
+                </div>
+                <Button onClick={handleCall} className="w-48 h-12 rounded-full bg-green-500 hover:bg-green-600 shadow-[0_0_20px_rgba(34,197,94,0.4)] text-base font-bold">
+                    <PhoneCall className="mr-2 h-5 w-5" /> 发起呼叫
+                </Button>
+             </div>
+          ) : callStatus === 'calling' ? (
+             <div className="flex-1 flex flex-col items-center justify-center space-y-6">
+                 <div className="h-24 w-24 rounded-full bg-primary/20 flex items-center justify-center animate-bounce">
+                    <PhoneCall className="h-10 w-10 text-primary" />
+                 </div>
+                 <div className="text-center">
+                    <p className="text-primary font-mono text-sm tracking-widest animate-pulse">CALLING...</p>
+                    <p className="text-xs text-muted-foreground mt-2">正在连接 AI 服务</p>
+                 </div>
+                 <Button onClick={handleHangup} variant="destructive" className="rounded-full h-10 px-8">取消</Button>
+             </div>
+          ) : (
+            <div className="flex-1 flex flex-col min-h-0 space-y-2">
+                {mode === 'voice' ? (
+                    <div className="flex flex-col h-full animate-in fade-in">
+                        <div className="h-1/3 min-h-[150px] shrink-0 border border-white/5 rounded-md bg-black/20 flex flex-col items-center justify-center text-muted-foreground space-y-4 mb-2 relative overflow-hidden">
+                            <div className="h-24 w-24 rounded-full bg-primary/10 flex items-center justify-center animate-pulse relative z-10">
+                                <Mic className="h-10 w-10 text-primary" />
+                            </div>
+                            <p className="text-sm relative z-10">通话中...</p>
+                        </div>
+                        <h4 className="text-xs font-medium text-muted-foreground px-1 mb-1 uppercase tracking-tight">转写日志</h4>
+                        <TranscriptionLog />
+                    </div>
+                ) : (
+                    <div className="flex flex-col h-full space-y-2 animate-in fade-in">
+                        <div className="h-3/5 shrink-0 flex flex-col gap-2">
+                            <div className="flex gap-2 shrink-0">
+                                <select className="flex-1 text-xs bg-white/5 border border-white/10 rounded px-2 py-1 text-foreground" value={selectedCamera} onChange={e => setSelectedCamera(e.target.value)}>
+                                    {devices.filter(d => d.kind === 'videoinput').map(d => <option key={d.deviceId} value={d.deviceId}>{d.label || 'Camera'}</option>)}
+                                </select>
+                                <select className="flex-1 text-xs bg-white/5 border border-white/10 rounded px-2 py-1 text-foreground" value={selectedMic} onChange={e => setSelectedMic(e.target.value)}>
+                                    {devices.filter(d => d.kind === 'audioinput').map(d => <option key={d.deviceId} value={d.deviceId}>{d.label || 'Mic'}</option>)}
+                                </select>
+                            </div>
+                            <div className="flex-1 relative rounded-lg overflow-hidden border border-white/10 bg-black min-h-0">
+                                 <div className="absolute inset-0">{isSwapped ? renderLocalVideo(false) : renderRemoteVideo(false)}</div>
+                                 <div className="absolute bottom-2 right-2 w-24 h-36 z-10">{isSwapped ? renderRemoteVideo(true) : renderLocalVideo(true)}</div>
+                                 <button className="absolute top-2 right-2 z-20 h-8 w-8 rounded-full bg-black/50 backdrop-blur flex items-center justify-center text-white border border-white/10 hover:bg-primary/80" onClick={() => setIsSwapped(!isSwapped)}><ArrowLeftRight className="h-3.5 w-3.5" /></button>
+                            </div>
+                        </div>
+                        <TranscriptionLog />
+                    </div>
+                )}
+                <Button variant="destructive" size="sm" className="w-full h-10 font-bold" onClick={handleHangup}>
+                    <PhoneOff className="mr-2 h-4 w-4" /> 挂断通话
+                </Button>
+            </div>
+          )}
+        </div>
+
+        <div className="shrink-0 space-y-2">
+            <div className="flex space-x-2">
+                <Input value={inputText} onChange={e => setInputText(e.target.value)} placeholder={mode === 'text' ? "输入消息..." : "输入文本模拟交互..."} onKeyDown={e => e.key === 'Enter' && handleSend()} disabled={isLoading || (mode !== 'text' && callStatus !== 'active')} className="flex-1" />
+                <Button size="icon" onClick={handleSend} disabled={isLoading || (mode !== 'text' && callStatus !== 'active')}><Send className="h-4 w-4" /></Button>
+            </div>
+        </div>
+      </div>
+    </Drawer>
+  );
+};
diff --git a/web/pages/AutoTest.tsx b/web/pages/AutoTest.tsx
new file mode 100644
index 0000000..3dfd694
--- /dev/null
+++ b/web/pages/AutoTest.tsx
@@ -0,0 +1,314 @@
+
+import React, { useState } from 'react';
+import { Plus, Search, Play, Copy, Trash2, Zap, MessageSquare, Mic, AlertTriangle, ClipboardCheck, X } from 'lucide-react';
+import { Button, Input, Card, Badge, Dialog } from '../components/UI';
+import { mockAutoTestAssistants, mockAssistants } from '../services/mockData';
+import { AutoTestAssistant, TestType, TestMethod } from '../types';
+
+export const AutoTestPage: React.FC = () => {
+  const [testAssistants, setTestAssistants] = useState<AutoTestAssistant[]>(mockAutoTestAssistants);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [deleteId, setDeleteId] = useState<string | null>(null);
+  const [copySuccess, setCopySuccess] = useState(false);
+
+  const filteredTests = testAssistants.filter(t => 
+    t.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const selectedTest = testAssistants.find(t => t.id === selectedId) || null;
+
+  const handleCreate = () => {
+    const newId = crypto.randomUUID();
+    const newTest: AutoTestAssistant = {
+      id: newId,
+      name: '新测试任务',
+      type: TestType.FIXED,
+      method: TestMethod.TEXT,
+      targetAssistantId: mockAssistants[0]?.id || '',
+      fixedWorkflowSteps: [],
+      intelligentPrompt: '',
+      createdAt: new Date().toISOString().split('T')[0],
+    };
+    setTestAssistants([newTest, ...testAssistants]);
+    setSelectedId(newId);
+  };
+
+  const handleCopy = (e: React.MouseEvent, test: AutoTestAssistant) => {
+    e.stopPropagation();
+    const newId = crypto.randomUUID();
+    const newTest: AutoTestAssistant = {
+      ...test,
+      id: newId,
+      name: `${test.name} (复制)`,
+      createdAt: new Date().toISOString().split('T')[0],
+    };
+    setTestAssistants([newTest, ...testAssistants]);
+    setSelectedId(newId);
+  };
+
+  const updateTest = (field: keyof AutoTestAssistant, value: any) => {
+    if (!selectedId) return;
+    setTestAssistants(prev => prev.map(t => t.id === selectedId ? { ...t, [field]: value } : t));
+  };
+
+  const handleDeleteClick = (e: React.MouseEvent, id: string) => {
+    e.stopPropagation();
+    setDeleteId(id);
+    setIsDeleteModalOpen(true);
+  };
+
+  const confirmDelete = () => {
+    if (deleteId) {
+      setTestAssistants(prev => prev.filter(t => t.id !== deleteId));
+      if (selectedId === deleteId) setSelectedId(null);
+      setIsDeleteModalOpen(false);
+      setDeleteId(null);
+    }
+  };
+
+  const handleCopyId = (id: string) => {
+    navigator.clipboard.writeText(id);
+    setCopySuccess(true);
+    setTimeout(() => setCopySuccess(false), 2000);
+  };
+
+  return (
+    <div className="flex h-[calc(100vh-8rem)] gap-6 animate-in fade-in py-4">
+      {/* Left List */}
+      <div className="w-80 flex flex-col gap-4 shrink-0">
+        <h2 className="text-xl font-bold tracking-tight text-white">测试助手列表</h2>
+        <div className="flex gap-2">
+          <div className="relative flex-1">
+            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input 
+              placeholder="搜索测试..." 
+              className="pl-9 bg-card/50 border-white/5"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
+          <Button size="icon" onClick={handleCreate} title="新建测试">
+            <Plus className="h-5 w-5" />
+          </Button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto space-y-2 pr-1 custom-scrollbar">
+          {filteredTests.map(test => (
+            <div 
+              key={test.id}
+              onClick={() => setSelectedId(test.id)}
+              className={`group relative flex flex-col p-4 rounded-xl border transition-all cursor-pointer ${
+                selectedId === test.id 
+                ? 'bg-primary/10 border-primary/40 shadow-[0_0_15px_rgba(6,182,212,0.15)]' 
+                : 'bg-card/30 border-white/5 hover:bg-white/5 hover:border-white/10'
+              }`}
+            >
+              <div className="flex flex-col gap-1.5 mb-2 pr-16 overflow-hidden">
+                <span className={`font-semibold truncate ${selectedId === test.id ? 'text-primary' : 'text-foreground'}`}>
+                  {test.name}
+                </span>
+                <div className="flex">
+                  <Badge 
+                    variant="outline" 
+                    className={`text-[9px] uppercase tracking-tighter shrink-0 opacity-70 border-white/10 ${
+                      test.type === TestType.FIXED ? 'text-blue-400 bg-blue-400/5' : 'text-purple-400 bg-purple-400/5'
+                    }`}
+                  >
+                    {test.type === TestType.FIXED ? '固定' : '智能'}
+                  </Badge>
+                </div>
+              </div>
+              <div className="text-[10px] text-muted-foreground font-mono opacity-60">
+                创建于: {test.createdAt}
+              </div>
+              
+              {/* Hover Actions Toolbar */}
+              <div className="absolute right-2 top-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity bg-background/50 backdrop-blur-sm rounded-lg p-0.5 shadow-lg border border-white/5">
+                <Button variant="ghost" size="icon" className="h-7 w-7" onClick={(e) => handleCopy(e, test)} title="复制测试任务">
+                  <Copy className="h-3.5 w-3.5" />
+                </Button>
+                <Button variant="ghost" size="icon" className="h-7 w-7 text-destructive hover:text-destructive" onClick={(e) => handleDeleteClick(e, test.id)} title="删除测试任务">
+                  <Trash2 className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+            </div>
+          ))}
+          {filteredTests.length === 0 && (
+            <div className="text-center py-10 text-muted-foreground text-sm">
+              未找到测试助手
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Right Config Panel */}
+      <div className="flex-1 bg-card/20 backdrop-blur-sm border border-white/5 rounded-2xl overflow-hidden flex flex-col relative shadow-xl">
+        {selectedTest ? (
+          <div className="flex flex-col h-full overflow-hidden">
+            <div className="p-6 border-b border-white/5 bg-white/[0.02]">
+              <div className="flex items-end justify-between gap-4">
+                <div className="flex-1">
+                  <div className="flex items-center justify-between mb-2">
+                    <label className="text-[10px] text-muted-foreground font-black tracking-widest uppercase ml-1">测试助手名称</label>
+                  </div>
+                  <Input 
+                    value={selectedTest.name}
+                    onChange={(e) => updateTest('name', e.target.value)}
+                    className="font-bold bg-white/5 border-white/10 focus:border-primary/50 text-base"
+                  />
+                </div>
+                <Button onClick={() => alert("开始自动化测试脚本生成...")}>
+                  <Zap className="mr-2 h-4 w-4" /> 开始测试
+                </Button>
+              </div>
+            </div>
+
+            <div className="flex-1 overflow-y-auto p-8 custom-scrollbar">
+              <div className="max-w-3xl mx-auto space-y-8 animate-in slide-in-from-bottom-2">
+                {/* Basic Config */}
+                <div className="grid grid-cols-2 gap-6">
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-white">目标小助手</label>
+                    <select 
+                      className="flex h-10 w-full rounded-md border border-white/10 bg-white/5 px-3 py-1 text-sm text-foreground focus:ring-1 focus:ring-primary/50 [&>option]:bg-card"
+                      value={selectedTest.targetAssistantId}
+                      onChange={(e) => updateTest('targetAssistantId', e.target.value)}
+                    >
+                      {mockAssistants.map(a => (
+                        <option key={a.id} value={a.id}>{a.name}</option>
+                      ))}
+                    </select>
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-white">测试方式</label>
+                    <div className="flex bg-white/5 p-1 rounded-lg">
+                      <button 
+                        onClick={() => updateTest('method', TestMethod.TEXT)}
+                        className={`flex-1 flex items-center justify-center py-1.5 text-xs rounded-md transition-all ${selectedTest.method === TestMethod.TEXT ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-white/5'}`}
+                      >
+                        <MessageSquare className="w-3 h-3 mr-1.5" /> 文本
+                      </button>
+                      <button 
+                        onClick={() => updateTest('method', TestMethod.AUDIO)}
+                        className={`flex-1 flex items-center justify-center py-1.5 text-xs rounded-md transition-all ${selectedTest.method === TestMethod.AUDIO ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-white/5'}`}
+                      >
+                        <Mic className="w-3 h-3 mr-1.5" /> 语音
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Test Logic Type */}
+                <div className="space-y-4">
+                  <label className="text-sm font-medium text-white">测试逻辑类型</label>
+                  <div className="grid grid-cols-2 gap-4">
+                    <Card 
+                      className={`p-4 cursor-pointer transition-all border-2 ${selectedTest.type === TestType.FIXED ? 'border-primary bg-primary/5' : 'border-white/5'}`}
+                      onClick={() => updateTest('type', TestType.FIXED)}
+                    >
+                      <div className="flex items-center space-x-3 mb-2">
+                        <Badge variant={selectedTest.type === TestType.FIXED ? 'default' : 'outline'}>固定流程</Badge>
+                      </div>
+                      <p className="text-[10px] text-muted-foreground text-white/70">按照预设的消息序列依次发送给目标小助手，验证其回复是否符合预期。</p>
+                    </Card>
+                    <Card 
+                      className={`p-4 cursor-pointer transition-all border-2 ${selectedTest.type === TestType.INTELLIGENT ? 'border-primary bg-primary/5' : 'border-white/5'}`}
+                      onClick={() => updateTest('type', TestType.INTELLIGENT)}
+                    >
+                      <div className="flex items-center space-x-3 mb-2">
+                        <Badge variant={selectedTest.type === TestType.INTELLIGENT ? 'default' : 'outline'}>智能提示词</Badge>
+                      </div>
+                      <p className="text-[10px] text-muted-foreground text-white/70">由 AI 扮演用户，根据设定的角色和场景与目标小助手进行动态对话。</p>
+                    </Card>
+                  </div>
+                </div>
+
+                {/* Content Config */}
+                {selectedTest.type === TestType.FIXED ? (
+                  <div className="space-y-4">
+                    <label className="text-sm font-medium text-white">对话步骤列表</label>
+                    <div className="space-y-2">
+                      {selectedTest.fixedWorkflowSteps.map((step, idx) => (
+                        <div key={idx} className="flex gap-2 animate-in slide-in-from-left-2" style={{ animationDelay: `${idx * 50}ms` }}>
+                          <div className="h-9 w-9 shrink-0 flex items-center justify-center bg-white/5 rounded-lg text-xs font-mono text-muted-foreground">{idx + 1}</div>
+                          <Input 
+                            value={step}
+                            onChange={(e) => {
+                              const newSteps = [...selectedTest.fixedWorkflowSteps];
+                              newSteps[idx] = e.target.value;
+                              updateTest('fixedWorkflowSteps', newSteps);
+                            }}
+                            placeholder="输入用户消息..."
+                          />
+                          <Button variant="ghost" size="icon" className="shrink-0" onClick={() => {
+                            updateTest('fixedWorkflowSteps', selectedTest.fixedWorkflowSteps.filter((_, i) => i !== idx));
+                          }}>
+                            <X size={14} className="text-destructive" />
+                          </Button>
+                        </div>
+                      ))}
+                      <Button variant="outline" className="w-full border-dashed" onClick={() => {
+                        updateTest('fixedWorkflowSteps', [...selectedTest.fixedWorkflowSteps, '']);
+                      }}>
+                        <Plus size={14} className="mr-2" /> 添加步骤
+                      </Button>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="space-y-4">
+                    <label className="text-sm font-medium text-white">测试助手人设 (Intelligent Prompt)</label>
+                    <textarea 
+                      className="w-full h-48 bg-white/5 border border-white/10 rounded-xl p-4 text-sm focus:outline-none focus:ring-1 focus:ring-primary/50 text-white placeholder:text-muted-foreground/30 leading-relaxed"
+                      value={selectedTest.intelligentPrompt}
+                      onChange={(e) => updateTest('intelligentPrompt', e.target.value)}
+                      placeholder="描述扮演的角色背景、性格特点以及本次测试需要达成的目标..."
+                    />
+                    <div className="p-3 bg-primary/5 border border-primary/20 rounded-lg text-[10px] text-muted-foreground flex items-start gap-2">
+                      <Zap className="w-3.5 h-3.5 text-primary shrink-0 mt-0.5" />
+                      <p>智能测试将使用另一个 AI 模型来模拟真实用户，它可以更好地检测目标小助手的异常处理能力和话术柔顺度。</p>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground">
+            <div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center mb-4">
+              <Zap className="h-8 w-8 opacity-50" />
+            </div>
+            <p className="text-lg font-medium">请选择或创建一个测试任务</p>
+            <p className="text-sm opacity-60">用于自动化验证小助手的逻辑表现</p>
+          </div>
+        )}
+      </div>
+
+      {/* Delete Confirmation */}
+      <Dialog 
+        isOpen={isDeleteModalOpen} 
+        onClose={() => setIsDeleteModalOpen(false)} 
+        title="确认删除"
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setIsDeleteModalOpen(false)}>取消</Button>
+            <Button variant="destructive" onClick={confirmDelete}>确认删除</Button>
+          </>
+        }
+      >
+        <div className="flex items-center space-x-4">
+          <div className="p-3 bg-destructive/10 rounded-full">
+            <AlertTriangle className="h-6 w-6 text-destructive" />
+          </div>
+          <div>
+            <p className="text-sm text-white">您确定要删除此测试任务吗？此操作无法撤销。</p>
+            <p className="text-xs text-muted-foreground mt-1">
+              测试任务: {testAssistants.find(t => t.id === deleteId)?.name}
+            </p>
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  );
+};
diff --git a/web/pages/CallLogs.tsx b/web/pages/CallLogs.tsx
new file mode 100644
index 0000000..3422d7e
--- /dev/null
+++ b/web/pages/CallLogs.tsx
@@ -0,0 +1,133 @@
+
+import React, { useState } from 'react';
+import { Download, Search, Calendar, Filter } from 'lucide-react';
+import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Badge } from '../components/UI';
+import { mockCallLogs } from '../services/mockData';
+
+export const CallLogsPage: React.FC = () => {
+  const [logs] = useState(mockCallLogs);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState<'all' | 'connected' | 'missed'>('all');
+  const [sourceFilter, setSourceFilter] = useState<'all' | 'debug' | 'external'>('all');
+
+  const filteredLogs = logs.filter(log => {
+    const matchesSearch = log.agentName.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesStatus = statusFilter === 'all' || log.status === statusFilter;
+    const matchesSource = sourceFilter === 'all' || log.source === sourceFilter;
+    return matchesSearch && matchesStatus && matchesSource;
+  });
+
+  const handleExport = () => {
+    // Generate CSV content
+    const headers = ['ID', 'Agent', 'Source', 'Status', 'Start Time', 'Duration'];
+    const rows = filteredLogs.map(log => [
+        log.id, 
+        log.agentName, 
+        log.source, 
+        log.status, 
+        log.startTime, 
+        log.duration
+    ].join(','));
+    const csvContent = "data:text/csv;charset=utf-8," + [headers.join(','), ...headers.join(',')].join('\n');
+    const encodedUri = encodeURI(csvContent);
+    const link = document.createElement("a");
+    link.setAttribute("href", encodedUri);
+    link.setAttribute("download", "call_logs.csv");
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  return (
+    <div className="space-y-6 animate-in fade-in py-2 pb-10">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold tracking-tight">视频通话记录</h1>
+        <Button variant="outline" onClick={handleExport}>
+            <Download className="mr-2 h-4 w-4" /> 导出记录
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 bg-card/50 p-4 rounded-lg border border-white/5 shadow-sm">
+         <div className="relative">
+             <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+             <Input 
+                placeholder="搜索代理小助手..." 
+                className="pl-9 border-0 bg-white/5" 
+                value={searchTerm} 
+                onChange={e => setSearchTerm(e.target.value)}
+             />
+         </div>
+         <div className="flex items-center space-x-2">
+            <Filter className="h-4 w-4 text-muted-foreground" />
+            <select 
+                className="flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 [&>option]:bg-card"
+                value={sourceFilter}
+                onChange={(e) => setSourceFilter(e.target.value as any)}
+            >
+                <option value="all">所有来源</option>
+                <option value="debug">调试 (Debug)</option>
+                <option value="external">外部测试 (External)</option>
+            </select>
+         </div>
+         <div className="flex items-center space-x-2">
+            <select 
+                className="flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 [&>option]:bg-card"
+                value={statusFilter}
+                onChange={(e) => setStatusFilter(e.target.value as any)}
+            >
+                <option value="all">所有状态</option>
+                <option value="connected">已接通</option>
+                <option value="missed">未接通</option>
+            </select>
+         </div>
+         <div className="relative">
+            <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input type="date" className="pl-9 border-0 bg-white/5" />
+         </div>
+      </div>
+
+      <div className="rounded-md border border-white/5 bg-card/40 backdrop-blur-md">
+        <table className="w-full text-sm">
+          <TableHeader>
+            <TableRow>
+              <TableHead>编号</TableHead>
+              <TableHead>代理小助手</TableHead>
+              <TableHead>来源</TableHead>
+              <TableHead>接听状态</TableHead>
+              <TableHead>通话接通时间</TableHead>
+              <TableHead>通话时长</TableHead>
+            </TableRow>
+          </TableHeader>
+          <tbody>
+            {filteredLogs.map(log => (
+              <TableRow key={log.id}>
+                <TableCell className="font-mono text-xs text-muted-foreground">#{log.id}</TableCell>
+                <TableCell className="font-medium">{log.agentName}</TableCell>
+                <TableCell>
+                    <Badge variant="outline">{log.source === 'debug' ? '调试' : '外部'}</Badge>
+                </TableCell>
+                <TableCell>
+                    <Badge variant={log.status === 'connected' ? 'success' : 'warning'}>
+                        {log.status === 'connected' ? '已接通' : '未接通'}
+                    </Badge>
+                </TableCell>
+                <TableCell>{log.startTime}</TableCell>
+                <TableCell>{log.duration}</TableCell>
+              </TableRow>
+            ))}
+             {filteredLogs.length === 0 && (
+                 <TableRow>
+                     <TableCell className="text-center py-6 text-muted-foreground">暂无记录</TableCell>
+                     <TableCell> </TableCell>
+                     <TableCell> </TableCell>
+                     <TableCell> </TableCell>
+                     <TableCell> </TableCell>
+                     <TableCell> </TableCell>
+                 </TableRow>
+             )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
diff --git a/web/pages/Dashboard.tsx b/web/pages/Dashboard.tsx
new file mode 100644
index 0000000..7ba8460
--- /dev/null
+++ b/web/pages/Dashboard.tsx
@@ -0,0 +1,309 @@
+
+import React, { useState, useMemo } from 'react';
+import { Phone, CheckCircle, Clock, UserCheck, Activity, Filter, ChevronDown, BarChart3, HelpCircle, Mail, Sparkles, Terminal, Box, Zap, ShieldCheck } from 'lucide-react';
+import { Card, Button } from '../components/UI';
+import { mockAssistants, getDashboardStats } from '../services/mockData';
+
+export const DashboardPage: React.FC = () => {
+  const [timeRange, setTimeRange] = useState<'week' | 'month' | 'year'>('week');
+  const [selectedAssistantId, setSelectedAssistantId] = useState<string>('all');
+
+  const stats = useMemo(() => {
+    return getDashboardStats(timeRange, selectedAssistantId);
+  }, [timeRange, selectedAssistantId]);
+
+  return (
+    <div className="min-h-full flex flex-col animate-in fade-in py-1">
+      <div className="w-full max-w-[1600px] mx-auto space-y-4 px-2 lg:px-6">
+        
+        {/* 1. Utility Row (Top Navigation Actions) */}
+        <div className="flex justify-end items-center gap-2 border-b border-white/[0.03] pb-2">
+          <Button variant="ghost" size="sm" className="h-7 px-2.5 text-[10px] font-bold border border-white/5 hover:bg-primary/10 hover:text-primary transition-all text-white/70">
+            <HelpCircle className="w-3 h-3 mr-1.5 opacity-70" /> 文档
+          </Button>
+          <Button variant="ghost" size="sm" className="h-7 px-2.5 text-[10px] font-bold border border-white/5 hover:bg-primary/10 hover:text-primary transition-all text-white/70">
+            <Mail className="w-3 h-3 mr-1.5 opacity-70" /> 联系方式
+          </Button>
+        </div>
+
+        {/* 2. Welcome Header */}
+        <div className="flex flex-col space-y-4 text-center md:text-left pt-1">
+          <div className="space-y-0.5">
+            <h1 className="text-2xl font-bold tracking-tight text-white">
+              欢迎, <span className="text-primary">Admin User</span>
+            </h1>
+            <p className="text-muted-foreground flex items-center justify-center md:justify-start text-[11px]">
+              系统当前运行环境：
+              <span className="flex items-center ml-2 text-green-400 text-[10px] font-mono bg-green-400/10 px-1.5 py-0.5 rounded-full border border-green-400/20">
+                <span className="w-1 h-1 rounded-full bg-green-400 animate-pulse mr-1"></span> 
+                HEALTHY
+              </span>
+            </p>
+          </div>
+        </div>
+
+        {/* 3. Section Header: Title + Filters */}
+        <div className="flex flex-col md:flex-row items-center justify-between border-b border-white/5 pb-3 pt-2 gap-3">
+          <div className="flex items-center space-x-2.5">
+              <div className="p-1 bg-primary/10 rounded-lg">
+                  <BarChart3 className="h-3.5 w-3.5 text-primary" />
+              </div>
+              <div className="flex flex-col">
+                  <h2 className="text-sm font-bold text-white tracking-wide leading-none">用量标准</h2>
+                  <span className="text-[8px] font-mono text-muted-foreground uppercase tracking-[0.2em] opacity-40 mt-1">Metrics Overview</span>
+              </div>
+          </div>
+
+          <div className="flex items-center gap-1.5 bg-black/20 p-0.5 rounded-lg border border-white/5 shadow-inner scale-95 origin-right">
+              <div className="relative group min-w-[130px]">
+                  <div className="absolute left-2.5 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground group-focus-within:text-primary transition-colors">
+                      <Filter className="h-2.5 w-2.5" />
+                  </div>
+                  <select 
+                      className="w-full bg-transparent border-0 rounded-lg pl-7 pr-6 py-1 text-[10px] font-bold focus:outline-none appearance-none cursor-pointer transition-all text-white/80"
+                      value={selectedAssistantId}
+                      onChange={(e) => setSelectedAssistantId(e.target.value)}
+                  >
+                      <option value="all" className="bg-background">所有小助手</option>
+                      {mockAssistants.map(a => (
+                          <option key={a.id} value={a.id} className="bg-background">{a.name}</option>
+                      ))}
+                  </select>
+                  <ChevronDown className="absolute right-1.5 top-1/2 -translate-y-1/2 h-2.5 w-2.5 text-muted-foreground pointer-events-none" />
+              </div>
+
+              <div className="h-3 w-px bg-white/10 mx-0.5"></div>
+
+              <div className="flex gap-0.5">
+                  {(['week', 'month', 'year'] as const).map((r) => (
+                      <button
+                          key={r}
+                          onClick={() => setTimeRange(r)}
+                          className={`px-2.5 py-0.5 text-[9px] font-black uppercase tracking-tight rounded transition-all ${timeRange === r ? 'bg-primary text-primary-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground hover:bg-white/5'}`}
+                      >
+                          {r === 'week' ? '周' : r === 'month' ? '月' : '年'}
+                      </button>
+                  ))}
+              </div>
+          </div>
+        </div>
+
+        {/* 4. Metrics Grid (Cards) */}
+        <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
+          <StatCard 
+              title="通话数量" 
+              value={stats.totalCalls.toString()} 
+              icon={<Phone className="h-3.5 w-3.5 text-primary" />}
+              trend="+12.5% UP"
+          />
+          <StatCard 
+              title="接通率" 
+              value={`${stats.answerRate}%`} 
+              icon={<CheckCircle className="h-3.5 w-3.5 text-green-400" />}
+              trend="+2.1% UP"
+          />
+          <StatCard 
+              title="平均时长" 
+              value={stats.avgDuration} 
+              icon={<Clock className="h-3.5 w-3.5 text-blue-400" />}
+              trend="-0.5% LOW"
+          />
+          <StatCard 
+              title="转人工数" 
+              value={stats.humanTransferCount.toString()} 
+              icon={<UserCheck className="h-3.5 w-3.5 text-purple-400" />}
+              trend="+5% STABLE"
+          />
+        </div>
+
+        {/* 5. Charts Section */}
+        <div className="pt-1">
+          <Card className="p-5 border-white/5 bg-card/20 backdrop-blur-sm overflow-hidden shadow-xl">
+              <div className="flex flex-col md:flex-row items-center justify-between mb-6 gap-3">
+                  <div className="space-y-0.5 text-center md:text-left">
+                      <h3 className="text-base font-bold leading-none flex items-center justify-center md:justify-start text-white">
+                          <Activity className="h-4 w-4 text-primary mr-2" />
+                          通话趋势 (Performance Insight)
+                      </h3>
+                      <p className="text-[10px] text-muted-foreground font-mono opacity-40">REAL-TIME DATA PROCESSING PIPELINE ENABLED</p>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <div className="h-6 w-6 rounded-full border border-primary/20 flex items-center justify-center animate-spin-slow">
+                       <div className="h-1 w-1 rounded-full bg-primary shadow-[0_0_8px_rgba(6,182,212,0.8)]"></div>
+                    </div>
+                    <span className="text-[9px] font-mono text-primary animate-pulse tracking-widest uppercase">Streaming</span>
+                  </div>
+              </div>
+              <div className="h-[300px] w-full">
+                  <SimpleAreaChart data={stats.trend} />
+              </div>
+          </Card>
+        </div>
+
+        {/* 6. Platform Feature Intro - Moved to Bottom, Full Width */}
+        <div className="w-full bg-white/[0.02] border border-white/5 rounded-2xl p-6 animate-in slide-in-from-bottom-4 duration-700 shadow-2xl relative overflow-hidden group pb-10 mb-10">
+          <div className="absolute top-0 right-0 w-64 h-64 bg-primary/5 blur-[100px] -mr-32 -mt-32 rounded-full pointer-events-none group-hover:bg-primary/10 transition-colors"></div>
+          
+          <div className="relative z-10">
+            <div className="flex items-center gap-2 mb-4">
+              <div className="p-1.5 bg-primary/20 rounded-lg">
+                  <Sparkles className="w-4 h-4 text-primary" />
+              </div>
+              <h3 className="text-sm font-bold text-white tracking-wide">关于平台</h3>
+            </div>
+
+            <div className="mb-6">
+              <p className="text-sm text-white/80 leading-relaxed font-medium">
+                AI视频助手是一个领先的多模态智能体管理平台，致力于通过先进的 AI 技术为企业和个人提供高效、低延迟、拟人化的音视频通话解决方案。🚀
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              <div className="space-y-2 group/item">
+                <div className="flex items-center gap-2">
+                  <span className="text-lg">🤖</span>
+                  <h4 className="text-xs font-bold text-primary uppercase tracking-wider">多模态智能体</h4>
+                </div>
+                <p className="text-[11px] text-muted-foreground leading-relaxed group-hover:text-white/70 transition-colors">
+                  支持构建具备文本对话、高保真语音输出以及双向实时视频通话能力的智能助手，覆盖 7x24h 智能客服场景。
+                </p>
+              </div>
+
+              <div className="space-y-2 group/item">
+                <div className="flex items-center gap-2">
+                  <span className="text-lg">📚</span>
+                  <h4 className="text-xs font-bold text-primary uppercase tracking-wider">动态知识检索</h4>
+                </div>
+                <p className="text-[11px] text-muted-foreground leading-relaxed group-hover:text-white/70 transition-colors">
+                  深度集成 RAG 技术，允许上传私有 PDF/DOCX 文档，让智能体在通话中基于企业私域知识库提供精准、权威的回复。
+                </p>
+              </div>
+
+              <div className="space-y-2 group/item">
+                <div className="flex items-center gap-2">
+                  <span className="text-lg">🎙️</span>
+                  <h4 className="text-xs font-bold text-primary uppercase tracking-wider">音色库与克隆</h4>
+                </div>
+                <p className="text-[11px] text-muted-foreground leading-relaxed group-hover:text-white/70 transition-colors">
+                  集成多家主流 TTS 引擎，支持极致的声音克隆与微调，为您的品牌定制专属的、富有情感表现力的真人音色。
+                </p>
+              </div>
+
+              <div className="space-y-2 group/item">
+                <div className="flex items-center gap-2">
+                  <span className="text-lg">🛡️</span>
+                  <h4 className="text-xs font-bold text-primary uppercase tracking-wider">端到端测试</h4>
+                </div>
+                <p className="text-[11px] text-muted-foreground leading-relaxed group-hover:text-white/70 transition-colors">
+                  内置自动化测试助手，可通过固定流程或 AI 智能模拟用户进行压力测试与逻辑验证，确保发布前的服务稳定性。
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// --- Sub Components ---
+
+const StatCard: React.FC<{ title: string; value: string; icon: React.ReactNode; trend?: string }> = ({ title, value, icon, trend }) => (
+  <Card className="p-4 border-white/5 bg-card/30 hover:border-primary/40 hover:bg-card/50 transition-all duration-300 group flex flex-col justify-between min-h-[110px] shadow-lg">
+    <div className="flex flex-row items-center justify-between space-y-0">
+      <h3 className="text-[9px] font-mono font-bold text-muted-foreground uppercase tracking-[0.15em]">{title}</h3>
+      <div className="p-1.5 bg-white/5 rounded-lg group-hover:bg-primary/20 transition-all group-hover:scale-110">
+        {icon}
+      </div>
+    </div>
+    <div className="mt-2">
+      <div className="text-2xl font-black tracking-tight text-white group-hover:text-primary transition-colors">{value}</div>
+      {trend && (
+        <p className={`text-[8px] font-bold font-mono mt-1 flex items-center ${trend.includes('+') ? 'text-green-400' : 'text-red-400'}`}>
+          <span className="bg-white/5 px-1 rounded-sm mr-1 opacity-70">{trend}</span>
+        </p>
+      )}
+    </div>
+  </Card>
+);
+
+const SimpleAreaChart: React.FC<{ data: { label: string, value: number }[] }> = ({ data }) => {
+    if (!data || data.length === 0) return null;
+
+    const height = 300;
+    const width = 1400;
+    const padding = 30;
+    
+    const maxValue = Math.max(...data.map(d => d.value)) * 1.2;
+    const points = data.map((d, i) => {
+        const x = (i / (data.length - 1)) * (width - padding * 2) + padding;
+        const y = height - (d.value / maxValue) * (height - padding * 2) - padding;
+        return `${x},${y}`;
+    }).join(' ');
+
+    const firstPoint = points.split(' ')[0];
+    const lastPoint = points.split(' ')[points.split(' ').length - 1];
+    const fillPath = `${points} ${lastPoint.split(',')[0]},${height} ${firstPoint.split(',')[0]},${height}`;
+
+    return (
+        <div className="w-full h-full relative">
+            <svg viewBox={`0 0 ${width} ${height}`} className="w-full h-full overflow-visible" preserveAspectRatio="none">
+                {/* Grid Lines */}
+                <line x1={padding} y1={height - padding} x2={width - padding} y2={height - padding} stroke="rgba(255,255,255,0.03)" strokeWidth="1" />
+                {[0.25, 0.5, 0.75].map(v => (
+                  <line 
+                    key={v}
+                    x1={padding} y1={height - padding - ((height - padding * 2) * v)} 
+                    x2={width - padding} y2={height - padding - ((height - padding * 2) * v)} 
+                    stroke="rgba(255,255,255,0.02)" strokeWidth="1" strokeDasharray="8 6" 
+                  />
+                ))}
+                
+                {/* Area Fill Gradient */}
+                <defs>
+                    <linearGradient id="chartGradient" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="0%" stopColor="hsl(var(--primary))" stopOpacity="0.3" />
+                        <stop offset="100%" stopColor="hsl(var(--primary))" stopOpacity="0" />
+                    </linearGradient>
+                    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
+                        <feGaussianBlur stdDeviation="5" result="coloredBlur" />
+                        <feMerge>
+                            <feMergeNode in="coloredBlur" />
+                            <feMergeNode in="SourceGraphic" />
+                        </feMerge>
+                    </filter>
+                </defs>
+                
+                <polygon points={fillPath} fill="url(#chartGradient)" />
+
+                <polyline 
+                    points={points} 
+                    fill="none" 
+                    stroke="hsl(var(--primary))" 
+                    strokeWidth="3" 
+                    strokeLinecap="round" 
+                    strokeLinejoin="round" 
+                    filter="url(#glow)"
+                />
+
+                {data.length < 32 && data.map((d, i) => {
+                     const x = (i / (data.length - 1)) * (width - padding * 2) + padding;
+                     const y = height - (d.value / maxValue) * (height - padding * 2) - padding;
+                     return (
+                         <g key={i} className="group/dot">
+                            <circle cx={x} cy={y} r="3.5" fill="hsl(var(--background))" stroke="hsl(var(--primary))" strokeWidth="2" className="transition-all duration-300 group-hover/dot:r-5 group-hover/dot:stroke-white" />
+                            <circle cx={x} cy={y} r="10" fill="hsl(var(--primary))" fillOpacity="0" className="cursor-pointer" />
+                         </g>
+                     );
+                })}
+            </svg>
+            
+            {/* X-Axis Labels */}
+            <div className="absolute bottom-0 left-0 right-0 flex justify-between px-[3%] text-[8px] text-muted-foreground pointer-events-none font-mono opacity-30 mt-2">
+                 {data.filter((_, i) => i % Math.ceil(data.length / 7) === 0).map((d, i) => (
+                     <span key={i}>{d.label}</span>
+                 ))}
+            </div>
+        </div>
+    );
+};
diff --git a/web/pages/History.tsx b/web/pages/History.tsx
new file mode 100644
index 0000000..818d503
--- /dev/null
+++ b/web/pages/History.tsx
@@ -0,0 +1,128 @@
+
+import React, { useState } from 'react';
+import { Download, Search, Calendar, Filter } from 'lucide-react';
+import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Badge } from '../components/UI';
+import { mockCallLogs } from '../services/mockData';
+
+export const HistoryPage: React.FC = () => {
+  const [logs] = useState(mockCallLogs);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState<'all' | 'connected' | 'missed'>('all');
+  const [sourceFilter, setSourceFilter] = useState<'all' | 'debug' | 'external'>('all');
+
+  const filteredLogs = logs.filter(log => {
+    const matchesSearch = log.agentName.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesStatus = statusFilter === 'all' || log.status === statusFilter;
+    const matchesSource = sourceFilter === 'all' || log.source === sourceFilter;
+    return matchesSearch && matchesStatus && matchesSource;
+  });
+
+  const handleExport = () => {
+    // Generate CSV content
+    const headers = ['ID', 'Agent', 'Source', 'Status', 'Start Time', 'Duration'];
+    const rows = filteredLogs.map(log => [
+        log.id, 
+        log.agentName, 
+        log.source, 
+        log.status, 
+        log.startTime, 
+        log.duration
+    ].join(','));
+    const csvContent = "data:text/csv;charset=utf-8," + [headers.join(','), ...headers.join(',')].join('\n');
+    const encodedUri = encodeURI(csvContent);
+    const link = document.createElement("a");
+    link.setAttribute("href", encodedUri);
+    link.setAttribute("download", "history_logs.csv");
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  return (
+    <div className="space-y-6 animate-in fade-in py-4 pb-10">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold tracking-tight text-white">历史记录</h1>
+        <Button variant="outline" onClick={handleExport}>
+            <Download className="mr-2 h-4 w-4" /> 导出记录
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 bg-card/50 p-4 rounded-lg border border-white/5 shadow-sm">
+         <div className="relative">
+             <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+             <Input 
+                placeholder="搜索代理小助手..." 
+                className="pl-9 border-0 bg-white/5" 
+                value={searchTerm} 
+                onChange={e => setSearchTerm(e.target.value)}
+             />
+         </div>
+         <div className="flex items-center space-x-2">
+            <Filter className="h-4 w-4 text-muted-foreground" />
+            <select 
+                className="flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 [&>option]:bg-card"
+                value={sourceFilter}
+                onChange={(e) => setSourceFilter(e.target.value as any)}
+            >
+                <option value="all">所有来源</option>
+                <option value="debug">调试 (Debug)</option>
+                <option value="external">外部测试 (External)</option>
+            </select>
+         </div>
+         <div className="flex items-center space-x-2">
+            <select 
+                className="flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 [&>option]:bg-card"
+                value={statusFilter}
+                onChange={(e) => setStatusFilter(e.target.value as any)}
+            >
+                <option value="all">所有状态</option>
+                <option value="connected">已接通</option>
+                <option value="missed">未接通</option>
+            </select>
+         </div>
+         <div className="relative">
+            <Calendar className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input type="date" className="pl-9 border-0 bg-white/5" />
+         </div>
+      </div>
+
+      <div className="rounded-md border border-white/5 bg-card/40 backdrop-blur-md overflow-hidden">
+        <table className="w-full text-sm">
+          <TableHeader>
+            <TableRow>
+              <TableHead>编号</TableHead>
+              <TableHead>代理小助手</TableHead>
+              <TableHead>来源</TableHead>
+              <TableHead>接听状态</TableHead>
+              <TableHead>通话接通时间</TableHead>
+              <TableHead>通话时长</TableHead>
+            </TableRow>
+          </TableHeader>
+          <tbody>
+            {filteredLogs.map(log => (
+              <TableRow key={log.id}>
+                <TableCell className="font-mono text-xs text-muted-foreground">#{log.id}</TableCell>
+                <TableCell className="font-medium text-white">{log.agentName}</TableCell>
+                <TableCell>
+                    <Badge variant="outline">{log.source === 'debug' ? '调试' : '外部'}</Badge>
+                </TableCell>
+                <TableCell>
+                    <Badge variant={log.status === 'connected' ? 'success' : 'warning'}>
+                        {log.status === 'connected' ? '已接通' : '未接通'}
+                    </Badge>
+                </TableCell>
+                <TableCell className="text-muted-foreground">{log.startTime}</TableCell>
+                <TableCell className="text-muted-foreground">{log.duration}</TableCell>
+              </TableRow>
+            ))}
+             {filteredLogs.length === 0 && (
+                 <TableRow>
+                     <TableCell colSpan={6} className="text-center py-6 text-muted-foreground">暂无记录</TableCell>
+                 </TableRow>
+             )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
diff --git a/web/pages/KnowledgeBase.tsx b/web/pages/KnowledgeBase.tsx
new file mode 100644
index 0000000..81f3803
--- /dev/null
+++ b/web/pages/KnowledgeBase.tsx
@@ -0,0 +1,298 @@
+
+import React, { useState, useRef } from 'react';
+import { Search, Plus, FileText, Upload, ArrowLeft, CloudUpload, File as FileIcon, X } from 'lucide-react';
+import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Card, Dialog } from '../components/UI';
+import { mockKnowledgeBases } from '../services/mockData';
+import { KnowledgeBase } from '../types';
+
+export const KnowledgeBasePage: React.FC = () => {
+  const [view, setView] = useState<'list' | 'detail'>('list');
+  const [selectedKb, setSelectedKb] = useState<KnowledgeBase | null>(null);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [kbs, setKbs] = useState(mockKnowledgeBases);
+  const [isUploadOpen, setIsUploadOpen] = useState(false);
+  const [isCreateKbOpen, setIsCreateKbOpen] = useState(false);
+  const [newKbName, setNewKbName] = useState('');
+
+  const filteredKbs = kbs.filter(kb => kb.name.toLowerCase().includes(searchTerm.toLowerCase()));
+
+  const handleSelect = (kb: KnowledgeBase) => {
+    setSelectedKb(kb);
+    setView('detail');
+  };
+
+  const handleImportClick = () => {
+    setIsUploadOpen(true);
+  };
+
+  const handleCreateKb = () => {
+    if (!newKbName.trim()) return;
+    
+    const newKb: KnowledgeBase = {
+        id: `kb_${Date.now()}`,
+        name: newKbName.trim(),
+        creator: 'Admin User',
+        createdAt: new Date().toISOString().split('T')[0],
+        documents: []
+    };
+    
+    setKbs([newKb, ...kbs]);
+    setIsCreateKbOpen(false);
+    setNewKbName('');
+  };
+
+  if (view === 'detail' && selectedKb) {
+    return (
+      <div className="py-4 pb-10">
+        <KnowledgeBaseDetail 
+          kb={selectedKb} 
+          onBack={() => setView('list')} 
+          onImport={handleImportClick}
+        />
+        <UploadModal isOpen={isUploadOpen} onClose={() => setIsUploadOpen(false)} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 animate-in fade-in py-4 pb-10">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold tracking-tight text-white">知识库</h1>
+      </div>
+
+      {/* Search Bar - Layout aligned with History Page and width filled */}
+      <div className="bg-card/50 p-4 rounded-lg border border-white/5 shadow-sm">
+        <div className="relative w-full">
+            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input 
+              placeholder="搜索知识库名称..." 
+              className="pl-9 border-0 bg-white/5 w-full"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {filteredKbs.map(kb => (
+          <Card 
+            key={kb.id} 
+            className="p-6 hover:border-primary/50 transition-colors cursor-pointer group"
+          >
+            <div onClick={() => handleSelect(kb)}>
+              <div className="flex items-start justify-between mb-4">
+                <div className="p-2 bg-primary/10 rounded-lg text-primary">
+                  <FileText className="h-6 w-6" />
+                </div>
+              </div>
+              <h3 className="text-lg font-semibold group-hover:text-primary transition-colors text-white">{kb.name}</h3>
+              <div className="mt-4 space-y-1 text-sm text-muted-foreground">
+                 <p>文档数量: {kb.documents.length}</p>
+                 <p>创建人: {kb.creator}</p>
+                 <p>创建时间: {kb.createdAt}</p>
+              </div>
+            </div>
+          </Card>
+        ))}
+        
+        {/* Add New Placeholder */}
+        <div 
+            onClick={() => setIsCreateKbOpen(true)}
+            className="border border-dashed border-white/10 rounded-xl p-6 flex flex-col items-center justify-center text-muted-foreground hover:bg-white/5 hover:border-primary/30 transition-all cursor-pointer min-h-[200px]"
+        >
+            <Plus className="h-8 w-8 mb-2 opacity-50" />
+            <span>新建知识库</span>
+        </div>
+      </div>
+
+      {/* New Knowledge Base Dialog */}
+      <Dialog
+        isOpen={isCreateKbOpen}
+        onClose={() => setIsCreateKbOpen(false)}
+        title="新建知识库"
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setIsCreateKbOpen(false)}>取消</Button>
+            <Button onClick={handleCreateKb} disabled={!newKbName.trim()}>确认创建</Button>
+          </>
+        }
+      >
+        <div className="space-y-4">
+          <div className="space-y-1.5">
+            <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">知识库名称</label>
+            <Input 
+              value={newKbName}
+              onChange={(e) => setNewKbName(e.target.value)}
+              placeholder="请输入知识库名称..."
+              autoFocus
+              onKeyDown={(e) => e.key === 'Enter' && handleCreateKb()}
+            />
+          </div>
+          <p className="text-xs text-muted-foreground">
+            知识库用于存储私域文档，AI 小助手在回答问题时会优先检索绑定的知识库内容。
+          </p>
+        </div>
+      </Dialog>
+    </div>
+  );
+};
+
+const KnowledgeBaseDetail: React.FC<{ 
+  kb: KnowledgeBase; 
+  onBack: () => void;
+  onImport: () => void;
+}> = ({ kb, onBack, onImport }) => {
+  const [docSearch, setDocSearch] = useState('');
+  const filteredDocs = kb.documents.filter(d => d.name.toLowerCase().includes(docSearch.toLowerCase()));
+
+  return (
+    <div className="space-y-6 animate-in slide-in-from-right-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-4">
+          <Button variant="ghost" size="icon" onClick={onBack}>
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <div>
+            <h1 className="text-2xl font-bold text-white">{kb.name}</h1>
+            <p className="text-sm text-muted-foreground">创建于 {kb.createdAt} · by {kb.creator}</p>
+          </div>
+        </div>
+        <Button onClick={onImport}>
+            <Upload className="mr-2 h-4 w-4" /> 新增知识 (导入)
+        </Button>
+      </div>
+
+      <Card className="overflow-hidden border-white/5">
+        <div className="p-4 border-b border-white/5 flex justify-between items-center bg-white/5">
+            <h3 className="font-medium text-white">文档列表</h3>
+            <div className="w-64">
+                <Input 
+                    placeholder="搜索文档..." 
+                    value={docSearch}
+                    onChange={(e) => setDocSearch(e.target.value)}
+                    className="bg-black/20 border-transparent focus:bg-black/40"
+                />
+            </div>
+        </div>
+        <table className="w-full text-sm">
+          <TableHeader>
+            <TableRow>
+              <TableHead>文档名称</TableHead>
+              <TableHead>大小</TableHead>
+              <TableHead>上传时间</TableHead>
+              <TableHead className="text-right">操作</TableHead>
+            </TableRow>
+          </TableHeader>
+          <tbody>
+            {filteredDocs.length > 0 ? filteredDocs.map(doc => (
+              <TableRow key={doc.id}>
+                <TableCell className="font-medium flex items-center text-white">
+                    <FileText className="h-4 w-4 mr-2 text-primary"/> {doc.name}
+                </TableCell>
+                <TableCell className="text-muted-foreground">{doc.size}</TableCell>
+                <TableCell className="text-muted-foreground">{doc.uploadDate}</TableCell>
+                <TableCell className="text-right">
+                    <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive/80">删除</Button>
+                </TableCell>
+              </TableRow>
+            )) : (
+                <TableRow>
+                    <TableCell colSpan={4} className="text-center py-8 text-muted-foreground">暂无文档</TableCell>
+                </TableRow>
+            )}
+          </tbody>
+        </table>
+      </Card>
+    </div>
+  );
+};
+
+const UploadModal: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onClose }) => {
+    const [dragActive, setDragActive] = useState(false);
+    const [files, setFiles] = useState<File[]>([]);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const handleDrag = (e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.type === "dragenter" || e.type === "dragover") {
+            setDragActive(true);
+        } else if (e.type === "dragleave") {
+            setDragActive(false);
+        }
+    };
+
+    const handleDrop = (e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragActive(false);
+        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+            setFiles(prev => [...prev, ...Array.from(e.dataTransfer.files)]);
+        }
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        e.preventDefault();
+        if (e.target.files && e.target.files[0]) {
+            setFiles(prev => [...prev, ...Array.from(e.target.files || [])]);
+        }
+    };
+
+    const removeFile = (idx: number) => {
+        setFiles(prev => prev.filter((_, i) => i !== idx));
+    };
+
+    return (
+        <Dialog 
+            isOpen={isOpen} 
+            onClose={onClose} 
+            title="上传知识文档"
+            footer={
+                <>
+                    <Button variant="ghost" onClick={onClose}>取消</Button>
+                    <Button onClick={() => { alert('Upload Started!'); onClose(); setFiles([]); }}>确认上传</Button>
+                </>
+            }
+        >
+            <div 
+                className={`relative flex flex-col items-center justify-center w-full h-48 rounded-lg border-2 border-dashed transition-colors ${dragActive ? "border-primary bg-primary/10" : "border-white/10 bg-white/5 hover:bg-white/10"}`}
+                onDragEnter={handleDrag}
+                onDragLeave={handleDrag}
+                onDragOver={handleDrag}
+                onDrop={handleDrop}
+                onClick={() => inputRef.current?.click()}
+            >
+                <input 
+                    ref={inputRef} 
+                    type="file" 
+                    multiple 
+                    className="hidden" 
+                    onChange={handleChange} 
+                    accept=".pdf,.doc,.docx,.txt,.md"
+                />
+                <CloudUpload className={`h-10 w-10 mb-3 ${dragActive ? 'text-primary' : 'text-muted-foreground'}`} />
+                <p className="text-sm text-muted-foreground text-center">
+                    <span className="font-semibold text-primary">点击上传</span> 或将文件拖拽到此处
+                </p>
+                <p className="text-xs text-muted-foreground mt-1 text-white/50">支持 PDF, DOCX, TXT (Max 10MB)</p>
+            </div>
+
+            {files.length > 0 && (
+                <div className="mt-4 space-y-2 max-h-40 overflow-y-auto pr-1 custom-scrollbar">
+                    {files.map((file, idx) => (
+                        <div key={idx} className="flex items-center justify-between p-2 rounded-md bg-white/5 border border-white/5">
+                            <div className="flex items-center space-x-2 overflow-hidden">
+                                <FileIcon className="h-4 w-4 text-primary shrink-0" />
+                                <span className="text-sm truncate max-w-[200px] text-white">{file.name}</span>
+                                <span className="text-xs text-muted-foreground">({(file.size / 1024).toFixed(1)} KB)</span>
+                            </div>
+                            <button onClick={() => removeFile(idx)} className="text-muted-foreground hover:text-destructive transition-colors">
+                                <X className="h-4 w-4" />
+                            </button>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </Dialog>
+    );
+};
diff --git a/web/pages/Profile.tsx b/web/pages/Profile.tsx
new file mode 100644
index 0000000..9ce0dc8
--- /dev/null
+++ b/web/pages/Profile.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { User, Globe, LogOut, Settings } from 'lucide-react';
+import { Button, Card, Input } from '../components/UI';
+
+export const ProfilePage: React.FC = () => {
+  return (
+    <div className="max-w-2xl mx-auto space-y-8 animate-in fade-in pt-10">
+      <div className="flex items-center space-x-4">
+         <div className="h-20 w-20 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-3xl font-bold">
+            A
+         </div>
+         <div>
+             <h1 className="text-2xl font-bold">Admin User</h1>
+             <p className="text-muted-foreground">admin@example.com</p>
+         </div>
+      </div>
+
+      <div className="grid gap-6">
+        <Card className="p-6 space-y-6">
+            <h2 className="text-lg font-semibold flex items-center"><User className="mr-2 h-5 w-5"/> 账户信息</h2>
+            <div className="grid gap-4">
+                <div className="grid gap-2">
+                    <label className="text-sm font-medium">用户名</label>
+                    <Input defaultValue="Admin User" />
+                </div>
+                 <div className="grid gap-2">
+                    <label className="text-sm font-medium">邮箱</label>
+                    <Input defaultValue="admin@example.com" disabled className="bg-muted"/>
+                </div>
+            </div>
+            <div className="flex justify-end">
+                <Button>保存更改</Button>
+            </div>
+        </Card>
+
+        <Card className="p-6 space-y-6">
+             <h2 className="text-lg font-semibold flex items-center"><Settings className="mr-2 h-5 w-5"/> 系统设置</h2>
+             <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-2">
+                    <Globe className="h-5 w-5 text-muted-foreground" />
+                    <span>语言选择 / Language</span>
+                </div>
+                <select className="flex h-9 w-32 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
+                    <option>中文</option>
+                    <option>English</option>
+                </select>
+             </div>
+        </Card>
+
+         <Button variant="destructive" className="w-full">
+            <LogOut className="mr-2 h-4 w-4" /> 退出登录
+         </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/web/pages/VoiceLibrary.tsx b/web/pages/VoiceLibrary.tsx
new file mode 100644
index 0000000..fa63f88
--- /dev/null
+++ b/web/pages/VoiceLibrary.tsx
@@ -0,0 +1,471 @@
+
+import React, { useState, useRef } from 'react';
+import { Search, Mic2, Play, Pause, Upload, X, Filter, Plus, Volume2, Sparkles, Wand2, ChevronDown } from 'lucide-react';
+import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Dialog, Badge } from '../components/UI';
+import { mockVoices } from '../services/mockData';
+import { Voice } from '../types';
+
+export const VoiceLibraryPage: React.FC = () => {
+  const [voices, setVoices] = useState<Voice[]>(mockVoices);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [vendorFilter, setVendorFilter] = useState<'all' | 'Ali' | 'Volcano' | 'Minimax' | '硅基流动'>('all');
+  const [genderFilter, setGenderFilter] = useState<'all' | 'Male' | 'Female'>('all');
+  const [langFilter, setLangFilter] = useState<'all' | 'zh' | 'en'>('all');
+  
+  const [playingVoiceId, setPlayingVoiceId] = useState<string | null>(null);
+  const [isCloneModalOpen, setIsCloneModalOpen] = useState(false);
+  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+
+  const filteredVoices = voices.filter(voice => {
+    const matchesSearch = voice.name.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesVendor = vendorFilter === 'all' || voice.vendor === vendorFilter;
+    const matchesGender = genderFilter === 'all' || voice.gender === genderFilter;
+    const matchesLang = langFilter === 'all' || voice.language === langFilter;
+    return matchesSearch && matchesVendor && matchesGender && matchesLang;
+  });
+
+  const handlePlayToggle = (id: string) => {
+    if (playingVoiceId === id) {
+      setPlayingVoiceId(null);
+    } else {
+      setPlayingVoiceId(id);
+      setTimeout(() => {
+          setPlayingVoiceId((current) => current === id ? null : current);
+      }, 3000);
+    }
+  };
+
+  const handleAddSuccess = (newVoice: Voice) => {
+      setVoices([newVoice, ...voices]);
+      setIsAddModalOpen(false);
+      setIsCloneModalOpen(false);
+  };
+
+  return (
+    <div className="space-y-6 animate-in fade-in py-4 pb-10">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold tracking-tight text-white">声音库</h1>
+        <div className="flex space-x-3">
+            <Button variant="primary" onClick={() => setIsAddModalOpen(true)} className="shadow-[0_0_15px_rgba(6,182,212,0.4)]">
+                <Plus className="mr-2 h-4 w-4" /> 添加声音
+            </Button>
+            <Button variant="primary" onClick={() => setIsCloneModalOpen(true)} className="shadow-[0_0_15px_rgba(6,182,212,0.4)]">
+                <Mic2 className="mr-2 h-4 w-4" /> 克隆声音
+            </Button>
+        </div>
+      </div>
+
+      {/* Filter Bar */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 bg-card/50 p-4 rounded-lg border border-white/5 shadow-sm">
+         <div className="relative">
+             <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+             <Input 
+                placeholder="搜索声音名称..." 
+                className="pl-9 border-0 bg-white/5" 
+                value={searchTerm} 
+                onChange={e => setSearchTerm(e.target.value)}
+             />
+         </div>
+         <div className="flex items-center space-x-2">
+            <Filter className="h-4 w-4 text-muted-foreground" />
+            <select 
+                className="flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 [&>option]:bg-card text-foreground"
+                value={vendorFilter}
+                onChange={(e) => setVendorFilter(e.target.value as any)}
+            >
+                <option value="all">所有厂商</option>
+                <option value="硅基流动">硅基流动 (SiliconFlow)</option>
+                <option value="Ali">阿里 (Ali)</option>
+                <option value="Volcano">火山 (Volcano)</option>
+                <option value="Minimax">Minimax</option>
+            </select>
+         </div>
+         <div className="flex items-center space-x-2">
+            <select 
+                className="flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 [&>option]:bg-card text-foreground"
+                value={genderFilter}
+                onChange={(e) => setGenderFilter(e.target.value as any)}
+            >
+                <option value="all">所有性别</option>
+                <option value="Male">男 (Male)</option>
+                <option value="Female">女 (Female)</option>
+            </select>
+         </div>
+         <div className="flex items-center space-x-2">
+             <select 
+                className="flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 [&>option]:bg-card text-foreground"
+                value={langFilter}
+                onChange={(e) => setLangFilter(e.target.value as any)}
+            >
+                <option value="all">所有语言</option>
+                <option value="zh">中文 (Chinese)</option>
+                <option value="en">英文 (English)</option>
+            </select>
+         </div>
+      </div>
+
+      <div className="rounded-md border border-white/5 bg-card/40 backdrop-blur-md overflow-hidden">
+        <table className="w-full text-sm">
+          <TableHeader>
+            <TableRow>
+              <TableHead>声音名称</TableHead>
+              <TableHead>厂商</TableHead>
+              <TableHead>性别</TableHead>
+              <TableHead>语言</TableHead>
+              <TableHead className="text-right">试听</TableHead>
+            </TableRow>
+          </TableHeader>
+          <tbody>
+            {filteredVoices.map(voice => (
+              <TableRow key={voice.id}>
+                <TableCell className="font-medium">
+                    <div className="flex flex-col">
+                        <span className="flex items-center text-white">
+                            {voice.vendor === '硅基流动' && <Sparkles className="w-3 h-3 text-primary mr-1.5" />}
+                            {voice.name}
+                        </span>
+                        {voice.description && <span className="text-xs text-muted-foreground">{voice.description}</span>}
+                    </div>
+                </TableCell>
+                <TableCell>
+                    <Badge variant={voice.vendor === '硅基流动' ? 'default' : 'outline'}>{voice.vendor}</Badge>
+                </TableCell>
+                <TableCell className="text-muted-foreground">{voice.gender === 'Male' ? '男' : '女'}</TableCell>
+                <TableCell className="text-muted-foreground">{voice.language === 'zh' ? '中文' : 'English'}</TableCell>
+                <TableCell className="text-right">
+                    <Button 
+                        variant="ghost" 
+                        size="icon" 
+                        onClick={() => handlePlayToggle(voice.id)}
+                        className={playingVoiceId === voice.id ? "text-primary animate-pulse" : ""}
+                    >
+                        {playingVoiceId === voice.id ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+                    </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+             {filteredVoices.length === 0 && (
+                 <TableRow>
+                     <TableCell colSpan={5} className="text-center py-6 text-muted-foreground">暂无声音数据</TableCell>
+                 </TableRow>
+             )}
+          </tbody>
+        </table>
+      </div>
+
+      <AddVoiceModal 
+        isOpen={isAddModalOpen}
+        onClose={() => setIsAddModalOpen(false)}
+        onSuccess={handleAddSuccess}
+      />
+
+      <CloneVoiceModal 
+        isOpen={isCloneModalOpen} 
+        onClose={() => setIsCloneModalOpen(false)} 
+        onSuccess={handleAddSuccess} 
+      />
+    </div>
+  );
+};
+
+// --- Unified Add Voice Modal ---
+const AddVoiceModal: React.FC<{
+    isOpen: boolean;
+    onClose: () => void;
+    onSuccess: (voice: Voice) => void;
+}> = ({ isOpen, onClose, onSuccess }) => {
+    const [vendor, setVendor] = useState<'硅基流动' | 'Ali' | 'Volcano' | 'Minimax'>('硅基流动');
+    const [name, setName] = useState('');
+    
+    const [sfModel, setSfModel] = useState('fishaudio/fish-speech-1.5');
+    const [sfVoiceId, setSfVoiceId] = useState('fishaudio:amy');
+    const [sfSpeed, setSfSpeed] = useState(1);
+    const [sfGain, setSfGain] = useState(0);
+
+    const [model, setModel] = useState('');
+    const [voiceKey, setVoiceKey] = useState('');
+    const [gender, setGender] = useState('Female');
+    const [language, setLanguage] = useState('zh');
+    const [description, setDescription] = useState('');
+    
+    const [testInput, setTestInput] = useState('你好，正在测试语音合成效果。');
+    const [isAuditioning, setIsAuditioning] = useState(false);
+
+    const handleAudition = () => {
+        if (!testInput.trim()) return;
+        setIsAuditioning(true);
+        setTimeout(() => setIsAuditioning(false), 2000);
+    };
+
+    const handleSubmit = () => {
+        if (!name) { alert("请填写声音显示名称"); return; }
+        
+        let newVoice: Voice = {
+            id: `${vendor === '硅基流动' ? 'sf' : 'gen'}-${Date.now()}`,
+            name: name,
+            vendor: vendor,
+            gender: gender,
+            language: language,
+            description: description || (vendor === '硅基流动' ? `Model: ${sfModel}` : `Model: ${model}`)
+        };
+
+        onSuccess(newVoice);
+        setName('');
+        setVendor('硅基流动');
+        setDescription('');
+    };
+
+    return (
+        <Dialog 
+            isOpen={isOpen} 
+            onClose={onClose} 
+            title="添加声音"
+            footer={
+                <>
+                    <Button variant="ghost" onClick={onClose}>取消</Button>
+                    <Button onClick={handleSubmit} className="bg-primary hover:bg-primary/90">确认添加</Button>
+                </>
+            }
+        >
+            <div className="space-y-4 max-h-[75vh] overflow-y-auto px-1 custom-scrollbar">
+                <div className="space-y-1.5">
+                    <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">厂商 (Vendor)</label>
+                    <div className="relative">
+                        <select 
+                            className="flex h-10 w-full rounded-md border border-white/10 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 text-foreground appearance-none cursor-pointer [&>option]:bg-card"
+                            value={vendor}
+                            onChange={(e) => setVendor(e.target.value as any)}
+                        >
+                            <option value="硅基流动">硅基流动 (SiliconFlow)</option>
+                            <option value="Ali">阿里 (Ali)</option>
+                            <option value="Volcano">火山 (Volcano)</option>
+                            <option value="Minimax">Minimax</option>
+                        </select>
+                        <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+                    </div>
+                </div>
+
+                <div className="h-px bg-white/5"></div>
+
+                <div className="space-y-1.5">
+                    <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">声音名称</label>
+                    <Input value={name} onChange={e => setName(e.target.value)} placeholder="例如: 客服小美" />
+                </div>
+
+                {vendor === '硅基流动' ? (
+                    <div className="space-y-4 animate-in fade-in slide-in-from-top-1 duration-200">
+                        <div className="grid grid-cols-2 gap-4">
+                            <div className="space-y-1.5">
+                                <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">模型 (Model)</label>
+                                <select 
+                                    className="flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 text-foreground [&>option]:bg-card"
+                                    value={sfModel}
+                                    onChange={e => setSfModel(e.target.value)}
+                                >
+                                    <option value="fishaudio/fish-speech-1.5">fishaudio/fish-speech-1.5</option>
+                                    <option value="fishaudio/fish-speech-1.4">fishaudio/fish-speech-1.4</option>
+                                    <option value="ByteDance/SA-Speech">ByteDance/SA-Speech</option>
+                                </select>
+                            </div>
+                            <div className="space-y-1.5">
+                                <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">声音 ID (Voice)</label>
+                                <Input value={sfVoiceId} onChange={e => setSfVoiceId(e.target.value)} placeholder="fishaudio:amy" />
+                            </div>
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <div className="space-y-1.5">
+                                <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">语速 (Speed)</label>
+                                <div className="flex items-center space-x-2">
+                                    <input type="range" min="0.5" max="2" step="0.1" value={sfSpeed} onChange={e => setSfSpeed(parseFloat(e.target.value))} className="flex-1 accent-primary" />
+                                    <span className="text-[10px] font-mono text-primary bg-primary/10 px-1.5 py-0.5 rounded">{sfSpeed}x</span>
+                                </div>
+                            </div>
+                            <div className="space-y-1.5">
+                                <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">增益 (Gain)</label>
+                                <div className="flex items-center space-x-2">
+                                    <input type="range" min="-10" max="10" step="1" value={sfGain} onChange={e => setSfGain(parseInt(e.target.value))} className="flex-1 accent-primary" />
+                                    <span className="text-[10px] font-mono text-primary bg-primary/10 px-1.5 py-0.5 rounded">{sfGain}dB</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                ) : (
+                    <div className="space-y-4 animate-in fade-in slide-in-from-top-1 duration-200">
+                        <div className="grid grid-cols-2 gap-4">
+                            <div className="space-y-1.5">
+                                <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">模型标识</label>
+                                <Input value={model} onChange={e => setModel(e.target.value)} placeholder="API Model Key" />
+                            </div>
+                            <div className="space-y-1.5">
+                                <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">发音人标识</label>
+                                <Input value={voiceKey} onChange={e => setVoiceKey(e.target.value)} placeholder="Voice Key" />
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-1.5">
+                        <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">性别</label>
+                        <select 
+                            className="flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 text-foreground [&>option]:bg-card"
+                            value={gender}
+                            onChange={e => setGender(e.target.value)}
+                        >
+                            <option value="Female">女 (Female)</option>
+                            <option value="Male">男 (Male)</option>
+                        </select>
+                    </div>
+                    <div className="space-y-1.5">
+                        <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">语言</label>
+                        <select 
+                            className="flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 text-foreground [&>option]:bg-card"
+                            value={language}
+                            onChange={e => setLanguage(e.target.value)}
+                        >
+                            <option value="zh">中文 (Chinese)</option>
+                            <option value="en">英文 (English)</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div className="space-y-1.5">
+                    <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">备注</label>
+                    <textarea 
+                        className="flex min-h-[60px] w-full rounded-md border-0 bg-white/5 px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 text-white"
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                        placeholder="记录该声音的特点..."
+                    />
+                </div>
+
+                <div className="p-4 rounded-xl border border-primary/20 bg-primary/5 space-y-3">
+                    <div className="flex items-center justify-between">
+                        <h4 className="text-[10px] font-black text-primary flex items-center tracking-widest uppercase">
+                            <Volume2 className="w-3.5 h-3.5 mr-1.5" /> 参数试听 (Preview)
+                        </h4>
+                        {vendor === '硅基流动' && <Badge variant="outline" className="text-[8px] border-primary/20 text-primary/70">SiliconFlow Audio API</Badge>}
+                    </div>
+                    <div className="flex gap-2">
+                        <Input 
+                            value={testInput} 
+                            onChange={e => setTestInput(e.target.value)}
+                            placeholder="输入测试文本..."
+                            className="text-xs bg-black/20"
+                        />
+                        <Button 
+                            variant="primary" 
+                            size="sm" 
+                            onClick={handleAudition} 
+                            disabled={isAuditioning}
+                            className="shrink-0 h-9"
+                        >
+                            {isAuditioning ? <Pause className="h-3.5 w-3.5 animate-pulse" /> : <Play className="h-3.5 w-3.5" />}
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </Dialog>
+    );
+};
+
+const CloneVoiceModal: React.FC<{ 
+    isOpen: boolean; 
+    onClose: () => void; 
+    onSuccess: (voice: Voice) => void 
+}> = ({ isOpen, onClose, onSuccess }) => {
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [file, setFile] = useState<File | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files && e.target.files[0]) {
+            setFile(e.target.files[0]);
+        }
+    };
+
+    const handleSubmit = () => {
+        if (!name || !file) {
+            alert("请填写名称并上传音频文件");
+            return;
+        }
+        
+        const newVoice: Voice = {
+            id: `v-${Date.now()}`,
+            name: name,
+            vendor: 'Volcano', 
+            gender: 'Female', 
+            language: 'zh',
+            description: description || 'User cloned voice'
+        };
+
+        onSuccess(newVoice);
+        setName('');
+        setDescription('');
+        setFile(null);
+    };
+
+    return (
+        <Dialog 
+            isOpen={isOpen} 
+            onClose={onClose} 
+            title="克隆声音"
+            footer={
+                <>
+                    <Button variant="ghost" onClick={onClose}>取消</Button>
+                    <Button onClick={handleSubmit}>开始克隆</Button>
+                </>
+            }
+        >
+            <div className="space-y-4">
+                <div className="space-y-2">
+                    <label className="text-sm font-medium text-white">语音名称</label>
+                    <Input 
+                        value={name}
+                        onChange={(e) => setName(e.target.value)}
+                        placeholder="给新声音起个名字"
+                    />
+                </div>
+                
+                <div className="space-y-2">
+                     <label className="text-sm font-medium text-white">上传音频文件 (参考音频)</label>
+                     <div 
+                        className="flex flex-col items-center justify-center w-full h-32 rounded-lg border-2 border-dashed border-white/10 bg-white/5 hover:bg-white/10 transition-colors cursor-pointer"
+                        onClick={() => inputRef.current?.click()}
+                     >
+                        <input 
+                            ref={inputRef}
+                            type="file"
+                            accept="audio/*"
+                            className="hidden"
+                            onChange={handleFileChange}
+                        />
+                        {file ? (
+                             <div className="flex items-center space-x-2 text-primary">
+                                <Mic2 className="h-6 w-6" />
+                                <span className="text-sm font-medium">{file.name}</span>
+                             </div>
+                        ) : (
+                            <>
+                                <Upload className="h-8 w-8 mb-2 text-muted-foreground" />
+                                <p className="text-sm text-muted-foreground">点击上传 WAV/MP3 文件</p>
+                            </>
+                        )}
+                     </div>
+                </div>
+
+                <div className="space-y-2">
+                    <label className="text-sm font-medium text-white">语音描述</label>
+                    <textarea 
+                        className="flex min-h-[80px] w-full rounded-md border-0 bg-white/5 px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 text-white"
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                        placeholder="描述声音特点（如：年轻、沉稳...）"
+                    />
+                </div>
+            </div>
+        </Dialog>
+    );
+};
diff --git a/web/pages/WorkflowEditor.tsx b/web/pages/WorkflowEditor.tsx
new file mode 100644
index 0000000..b3990a5
--- /dev/null
+++ b/web/pages/WorkflowEditor.tsx
@@ -0,0 +1,402 @@
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { ArrowLeft, Play, Save, Rocket, Plus, Bot, UserCheck, Wrench, Ban, Zap, X, Copy, MousePointer2 } from 'lucide-react';
+import { Button, Input, Badge } from '../components/UI';
+import { mockAssistants, mockKnowledgeBases, mockWorkflows } from '../services/mockData';
+import { WorkflowNode, WorkflowEdge, Workflow } from '../types';
+import { DebugDrawer } from './Assistants';
+
+export const WorkflowEditorPage: React.FC = () => {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const [searchParams] = useSearchParams();
+  
+  // Template data for new workflows
+  const templateName = searchParams.get('name');
+  const templateType = searchParams.get('template');
+
+  // Find initial workflow or create a new one
+  const existingWf = mockWorkflows.find(w => w.id === id);
+  const [name, setName] = useState(templateName || existingWf?.name || '新工作流');
+  const [nodes, setNodes] = useState<WorkflowNode[]>(() => {
+    if (existingWf) return existingWf.nodes;
+    if (templateType === 'lead') {
+      return [
+        { 
+          name: 'introduction', 
+          type: 'conversation', 
+          isStart: true,
+          metadata: { position: { x: 100, y: 100 } }, 
+          prompt: "You are Morgan from GrowthPartners. Start with: 'Hello, this is Morgan from GrowthPartners. We help businesses improve their operational efficiency through custom software solutions. Do you have a few minutes to chat about how we might be able to help your business?'",
+          messagePlan: { firstMessage: "Hello, this is Morgan from GrowthPartners. Do you have a few minutes to chat?" }
+        },
+        { 
+          name: 'need_discovery', 
+          type: 'conversation', 
+          metadata: { position: { x: 450, y: 250 } }, 
+          prompt: "Conduct need discovery by asking about business challenges...",
+          variableExtractionPlan: {
+              output: [
+                  { title: 'industry', type: 'string', description: 'user industry' },
+                  { title: 'pain_points', type: 'string', description: 'main challenges' }
+              ]
+          }
+        },
+        {
+          name: 'hangup_node',
+          type: 'end',
+          metadata: { position: { x: 450, y: 550 } },
+          tool: {
+              type: 'endCall',
+              function: { name: 'hangup', parameters: {} },
+              messages: [{ type: 'request-start', content: 'Thank you for your time!', blocking: true }]
+          }
+        }
+      ];
+    }
+    return [
+      { 
+        name: 'start_node', 
+        type: 'conversation', 
+        isStart: true,
+        metadata: { position: { x: 200, y: 200 } }, 
+        prompt: '欢迎对话系统...',
+        messagePlan: { firstMessage: '你好！' }
+      }
+    ];
+  });
+  const [edges, setEdges] = useState<WorkflowEdge[]>(existingWf?.edges || []);
+  
+  const [selectedNodeName, setSelectedNodeName] = useState<string | null>(null);
+  const [isAddMenuOpen, setIsAddMenuOpen] = useState(false);
+  const [isDebugOpen, setIsDebugOpen] = useState(false);
+  const [zoom, setZoom] = useState(1);
+  const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
+  
+  const [draggingNodeName, setDraggingNodeName] = useState<string | null>(null);
+  const [isPanning, setIsPanning] = useState(false);
+  const dragOffset = useRef({ x: 0, y: 0 });
+  const panStart = useRef({ x: 0, y: 0 });
+
+  const selectedNode = nodes.find(n => n.name === selectedNodeName);
+
+  // Scroll Zoom handler
+  const handleWheel = (e: React.WheelEvent) => {
+    e.preventDefault();
+    const zoomSpeed = 0.001;
+    const newZoom = Math.min(Math.max(zoom - e.deltaY * zoomSpeed, 0.2), 3);
+    setZoom(newZoom);
+  };
+
+  // Middle mouse click handler for panning
+  const handleMouseDown = (e: React.MouseEvent) => {
+    // Button 1 is middle mouse
+    if (e.button === 1) {
+        e.preventDefault();
+        setIsPanning(true);
+        panStart.current = { x: e.clientX - panOffset.x, y: e.clientY - panOffset.y };
+    }
+  };
+
+  const handleNodeMouseDown = (e: React.MouseEvent, nodeName: string) => {
+    if (e.button !== 0) return; // Only left click for nodes
+    e.stopPropagation();
+    setSelectedNodeName(nodeName);
+    setDraggingNodeName(nodeName);
+    const node = nodes.find(n => n.name === nodeName);
+    if (node) {
+        dragOffset.current = {
+            x: e.clientX - node.metadata.position.x * zoom,
+            y: e.clientY - node.metadata.position.y * zoom
+        };
+    }
+  };
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+        if (draggingNodeName) {
+            setNodes(prev => prev.map(n => 
+                n.name === draggingNodeName 
+                ? { ...n, metadata: { ...n.metadata, position: { x: (e.clientX - dragOffset.current.x) / zoom, y: (e.clientY - dragOffset.current.y) / zoom } } } 
+                : n
+            ));
+        } else if (isPanning) {
+            setPanOffset({
+                x: e.clientX - panStart.current.x,
+                y: e.clientY - panStart.current.y
+            });
+        }
+    };
+    const handleMouseUp = (e: MouseEvent) => {
+        setDraggingNodeName(null);
+        setIsPanning(false);
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+    return () => {
+        window.removeEventListener('mousemove', handleMouseMove);
+        window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [draggingNodeName, isPanning, zoom]);
+
+  const addNode = (type: WorkflowNode['type']) => {
+      const newNode: WorkflowNode = {
+          name: `${type}_${Date.now()}`,
+          type,
+          metadata: { position: { x: (300 - panOffset.x) / zoom, y: (300 - panOffset.y) / zoom } },
+          prompt: type === 'conversation' ? '输入该节点的 Prompt...' : '',
+          tool: type === 'end' ? { type: 'endCall', function: { name: 'hangup', parameters: {} } } : undefined
+      };
+      setNodes([...nodes, newNode]);
+      setIsAddMenuOpen(false);
+  };
+
+  const updateNodeData = (field: string, value: any) => {
+    if (!selectedNodeName) return;
+    setNodes(prev => prev.map(n => n.name === selectedNodeName ? { ...n, [field]: value } : n));
+  };
+
+  const handleSave = () => {
+    const now = new Date().toISOString().replace('T', ' ').substring(0, 16);
+    const updatedWorkflow: Workflow = {
+      id: id || `wf_${Date.now()}`,
+      name,
+      nodeCount: nodes.length,
+      createdAt: existingWf?.createdAt || now,
+      updatedAt: now,
+      nodes,
+      edges,
+    };
+
+    if (id) {
+        const idx = mockWorkflows.findIndex(w => w.id === id);
+        if (idx !== -1) mockWorkflows[idx] = updatedWorkflow;
+    } else {
+        mockWorkflows.push(updatedWorkflow);
+    }
+    alert('保存成功！工作流已同步至列表。');
+    navigate('/workflows');
+  };
+
+  return (
+    <div className="flex flex-col h-[calc(100vh-6rem)] relative bg-card/10 border border-white/5 rounded-2xl overflow-hidden animate-in fade-in duration-300">
+      {/* Editor Header */}
+      <header className="h-14 border-b border-white/5 bg-white/[0.02] flex items-center justify-between px-4 shrink-0">
+        <div className="flex items-center space-x-3">
+            <Button variant="ghost" size="icon" onClick={() => navigate('/workflows')} className="h-8 w-8">
+                <ArrowLeft className="h-4 w-4" />
+            </Button>
+            <div className="h-4 w-px bg-white/10"></div>
+            <Input 
+                value={name} 
+                onChange={e => setName(e.target.value)} 
+                className="bg-transparent border-transparent focus:bg-white/5 font-bold text-sm h-8 w-48 shadow-none text-white"
+            />
+        </div>
+        <div className="flex items-center space-x-2">
+            <Button variant="outline" size="sm" onClick={() => setIsDebugOpen(true)}>
+                <Play className="mr-1.5 h-3.5 w-3.5" /> 调试
+            </Button>
+            <Button variant="secondary" size="sm" onClick={handleSave}>
+                <Save className="mr-1.5 h-3.5 w-3.5" /> 保存
+            </Button>
+            <Button size="sm" onClick={() => alert('发布成功！')}>
+                <Rocket className="mr-1.5 h-3.5 w-3.5" /> 发布
+            </Button>
+        </div>
+      </header>
+
+      {/* Canvas Area */}
+      <div 
+        className="flex-1 relative bg-[radial-gradient(rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:24px_24px] overflow-hidden select-none cursor-crosshair"
+        onWheel={handleWheel}
+        onMouseDown={handleMouseDown}
+      >
+        {/* Floating Controls */}
+        <div className="absolute top-4 left-4 z-10 flex flex-col items-start gap-2">
+            <Button 
+                className="rounded-xl shadow-lg h-10 px-5 bg-primary text-primary-foreground font-semibold hover:bg-primary/90"
+                onClick={() => setIsAddMenuOpen(!isAddMenuOpen)}
+            >
+                <Plus className="mr-2 h-4 w-4" /> {isAddMenuOpen ? '取消' : '添加节点'}
+            </Button>
+            {isAddMenuOpen && (
+                <div className="bg-background/90 backdrop-blur-xl border border-white/10 rounded-xl p-1.5 w-48 shadow-2xl animate-in slide-in-from-top-2">
+                    <button onClick={() => addNode('conversation')} className="flex items-center w-full p-2.5 hover:bg-primary/10 rounded-lg transition-colors text-sm text-left text-white">
+                        <Bot className="w-4 h-4 mr-3 text-primary" /> <span>对话节点</span>
+                    </button>
+                    <button onClick={() => addNode('tool')} className="flex items-center w-full p-2.5 hover:bg-purple-400/10 rounded-lg transition-colors text-sm text-left text-white">
+                        <Wrench className="w-4 h-4 mr-3 text-purple-400" /> <span>工具节点</span>
+                    </button>
+                    <button onClick={() => addNode('human')} className="flex items-center w-full p-2.5 hover:bg-orange-400/10 rounded-lg transition-colors text-sm text-left text-white">
+                        <UserCheck className="w-4 h-4 mr-3 text-orange-400" /> <span>转人工</span>
+                    </button>
+                    <button onClick={() => addNode('end')} className="flex items-center w-full p-2.5 hover:bg-destructive/10 rounded-lg transition-colors text-sm text-left text-destructive">
+                        <Ban className="w-4 h-4 mr-3" /> <span>结束对话</span>
+                    </button>
+                </div>
+            )}
+            <div className="flex items-center gap-2 bg-white/5 border border-white/10 rounded-lg px-2 py-1 text-[10px] text-muted-foreground font-mono">
+                <span>{Math.round(zoom * 100)}%</span>
+                <span className="opacity-30">|</span>
+                <span>POS: {Math.round(panOffset.x)}, {Math.round(panOffset.y)}</span>
+            </div>
+        </div>
+
+        {/* Scalable Container */}
+        <div 
+            className="absolute inset-0"
+            style={{ 
+                transform: `translate(${panOffset.x}px, ${panOffset.y}px) scale(${zoom})`,
+                transformOrigin: '0 0'
+            }}
+        >
+            {nodes.map(node => (
+                <div 
+                    key={node.name}
+                    onMouseDown={(e) => handleNodeMouseDown(e, node.name)}
+                    style={{ left: node.metadata.position.x, top: node.metadata.position.y }}
+                    className={`absolute w-56 p-4 rounded-xl border bg-card/70 backdrop-blur-sm cursor-grab active:cursor-grabbing group transition-shadow ${selectedNodeName === node.name ? 'border-primary shadow-[0_0_30px_rgba(6,182,212,0.3)]' : 'border-white/10 hover:border-white/30'}`}
+                >
+                    <div className="flex items-center justify-between mb-3">
+                        <div className="flex items-center space-x-2 overflow-hidden">
+                            <NodeIcon type={node.type} />
+                            <span className="font-semibold text-[10px] truncate uppercase tracking-tight text-white">{node.name}</span>
+                        </div>
+                        {node.isStart && <Badge variant="default" className="scale-75 origin-right">START</Badge>}
+                    </div>
+                    <div className="text-[10px] text-muted-foreground line-clamp-3 italic opacity-60 leading-relaxed">
+                        {node.prompt || (node.tool ? `Action: ${node.tool.type}` : '待配置逻辑...')}
+                    </div>
+
+                    {/* Port simulation */}
+                    <div className="absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-primary rounded-full border-2 border-background opacity-0 group-hover:opacity-100 cursor-crosshair transition-opacity shadow-[0_0_5px_rgba(6,182,212,0.5)]"></div>
+                    <div className="absolute -top-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-muted rounded-full border-2 border-background opacity-0 group-hover:opacity-100 cursor-crosshair transition-opacity"></div>
+                </div>
+            ))}
+        </div>
+
+        {/* Bottom Right: Minimap */}
+        <div className="absolute bottom-6 right-6 w-48 h-32 bg-black/60 border border-white/10 rounded-2xl shadow-2xl pointer-events-none overflow-hidden flex flex-col backdrop-blur-md">
+            <div className="p-2 border-b border-white/5 bg-white/5 text-[9px] text-muted-foreground font-bold tracking-[0.2em] text-center uppercase">Minimap</div>
+            <div className="flex-1 relative p-3 opacity-60">
+                <div className="absolute inset-0 flex items-center justify-center">
+                    <div className="relative w-full h-full">
+                        {nodes.map((n, i) => {
+                            // Simple scaling for minimap
+                            const mx = (n.metadata.position.x / 10) % 100;
+                            const my = (n.metadata.position.y / 10) % 100;
+                            return (
+                                <div 
+                                    key={i} 
+                                    className={`absolute w-3 h-2 rounded-sm ${n.type === 'conversation' ? 'bg-primary' : n.type === 'end' ? 'bg-destructive' : 'bg-white/40'}`}
+                                    style={{ left: `${20 + mx}%`, top: `${20 + my}%` }}
+                                ></div>
+                            );
+                        })}
+                    </div>
+                </div>
+                {/* Viewport visualization */}
+                <div 
+                  className="absolute border border-primary/40 bg-primary/5 rounded shadow-sm"
+                  style={{ width: '40%', height: '40%', left: '30%', top: '30%' }}
+                />
+            </div>
+        </div>
+
+        {/* Navigator Guide */}
+        <div className="absolute bottom-4 left-4 text-[10px] text-muted-foreground/30 font-mono flex items-center gap-2">
+            <MousePointer2 className="w-3 h-3" /> 鼠标中键拖拽画布 | 滚轮缩放
+        </div>
+      </div>
+
+      {/* Right Settings Panel */}
+      {selectedNode && (
+          <div className="absolute right-0 top-14 bottom-0 w-80 border-l border-white/10 bg-background/95 backdrop-blur-2xl flex flex-col animate-in slide-in-from-right duration-300 z-20 shadow-[-10px_0_30px_rgba(0,0,0,0.5)]">
+              <div className="p-4 border-b border-white/5 flex items-center justify-between bg-white/5">
+                  <h3 className="text-sm font-bold uppercase tracking-widest text-primary">节点设置</h3>
+                  <Button variant="ghost" size="icon" onClick={() => setSelectedNodeName(null)} className="h-8 w-8">
+                      <X className="h-4 w-4" />
+                  </Button>
+              </div>
+              <div className="flex-1 overflow-y-auto p-5 space-y-6 custom-scrollbar">
+                  <div className="space-y-2">
+                      <label className="text-[10px] text-muted-foreground uppercase font-mono tracking-widest">唯一标识 (Node Name)</label>
+                      <Input 
+                        value={selectedNode.name} 
+                        onChange={e => updateNodeData('name', e.target.value)}
+                        className="h-8 text-xs font-mono text-white bg-white/10"
+                      />
+                  </div>
+
+                  <div className="space-y-2">
+                      <label className="text-[10px] text-muted-foreground uppercase font-mono tracking-widest">节点类型</label>
+                      <Badge variant="outline" className="w-fit">{selectedNode.type.toUpperCase()}</Badge>
+                  </div>
+
+                  {selectedNode.type === 'conversation' && (
+                      <>
+                        <div className="space-y-2">
+                            <label className="text-[10px] text-muted-foreground uppercase font-mono tracking-widest">Prompt (指令)</label>
+                            <textarea 
+                                className="w-full h-48 bg-white/5 border border-white/10 rounded-lg p-3 text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 text-white placeholder:text-muted-foreground/30 leading-relaxed"
+                                value={selectedNode.prompt || ''}
+                                onChange={e => updateNodeData('prompt', e.target.value)}
+                                placeholder="输入该节点的业务规则、语气要求和回复逻辑..."
+                            />
+                        </div>
+                        <div className="space-y-2">
+                            <label className="text-[10px] text-muted-foreground uppercase font-mono tracking-widest">First Message (开场白)</label>
+                            <Input 
+                                value={selectedNode.messagePlan?.firstMessage || ''}
+                                onChange={e => updateNodeData('messagePlan', { ...selectedNode.messagePlan, firstMessage: e.target.value })}
+                                className="h-8 text-xs text-white"
+                                placeholder="进入该节点时 AI 主动发起的消息..."
+                            />
+                        </div>
+                      </>
+                  )}
+
+                  {selectedNode.type === 'end' && (
+                      <div className="p-4 rounded-xl border border-destructive/20 bg-destructive/5 text-xs text-destructive/80 space-y-2">
+                          <p className="font-bold">结束对话节点</p>
+                          <p>到达此节点后，系统将根据配置执行挂断操作。</p>
+                      </div>
+                  )}
+
+                  <div className="pt-4 border-t border-white/5">
+                      <label className="flex items-center gap-3 cursor-pointer group">
+                          <input 
+                            type="checkbox" 
+                            checked={selectedNode.isStart} 
+                            onChange={e => updateNodeData('isStart', e.target.checked)}
+                            className="w-4 h-4 rounded accent-primary border-white/10 bg-white/5"
+                          />
+                          <span className="text-[10px] text-muted-foreground group-hover:text-primary transition-colors uppercase font-mono tracking-widest">起始节点 (Start Node)</span>
+                      </label>
+                  </div>
+              </div>
+          </div>
+      )}
+
+      {/* Debug Side Drawer */}
+      <DebugDrawer 
+        isOpen={isDebugOpen} 
+        onClose={() => setIsDebugOpen(false)} 
+        assistant={mockAssistants[0]} 
+      />
+    </div>
+  );
+};
+
+const NodeIcon = ({ type }: { type: WorkflowNode['type'] }) => {
+    switch (type) {
+        case 'conversation': return <Bot className="h-4 w-4 text-primary" />;
+        case 'human': return <UserCheck className="h-4 w-4 text-orange-400" />;
+        case 'tool': return <Wrench className="h-4 w-4 text-purple-400" />;
+        case 'end': return <Ban className="h-4 w-4 text-destructive" />;
+        default: return <MousePointer2 className="h-4 w-4" />;
+    }
+};
diff --git a/web/pages/Workflows.tsx b/web/pages/Workflows.tsx
new file mode 100644
index 0000000..467cbbf
--- /dev/null
+++ b/web/pages/Workflows.tsx
@@ -0,0 +1,232 @@
+
+import React, { useState, useRef } from 'react';
+import { Search, Plus, Upload, MoreHorizontal, Code, Edit2, Copy, Trash2, Calendar, CloudUpload, File as FileIcon, X, Layout, FilePlus } from 'lucide-react';
+import { Button, Input, TableHeader, TableRow, TableHead, TableCell, Dialog, Card } from '../components/UI';
+import { mockWorkflows } from '../services/mockData';
+import { useNavigate } from 'react-router-dom';
+
+export const WorkflowsPage: React.FC = () => {
+  const navigate = useNavigate();
+  const [workflows, setWorkflows] = useState(mockWorkflows);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [isUploadOpen, setIsUploadOpen] = useState(false);
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const [activeMenu, setActiveMenu] = useState<string | null>(null);
+
+  const [newWfName, setNewWfName] = useState('');
+  const [selectedTemplate, setSelectedTemplate] = useState<'blank' | 'lead'>('blank');
+
+  const filteredWorkflows = workflows.filter(wf => 
+    wf.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const handleCreateWorkflow = () => {
+    if (!newWfName.trim()) {
+      alert('请输入工作流名称');
+      return;
+    }
+    setIsCreateOpen(false);
+    navigate(`/workflows/new?name=${encodeURIComponent(newWfName)}&template=${selectedTemplate}`);
+  };
+
+  const handleDeleteWorkflow = (id: string) => {
+    if (confirm('确定要删除这个工作流吗？')) {
+      setWorkflows(prev => prev.filter(w => w.id !== id));
+      setActiveMenu(null);
+    }
+  };
+
+  return (
+    <div className="space-y-6 animate-in fade-in py-4 pb-10">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold tracking-tight text-white">工作流</h1>
+        <div className="flex space-x-3">
+            <Button variant="outline" onClick={() => setIsUploadOpen(true)}>
+                <Upload className="mr-2 h-4 w-4" /> 上传 JSON 代码
+            </Button>
+            <Button onClick={() => setIsCreateOpen(true)}>
+                <Plus className="mr-2 h-4 w-4" /> 创建工作流
+            </Button>
+        </div>
+      </div>
+
+      <div className="flex flex-col md:flex-row gap-4 bg-card/50 p-4 rounded-lg border border-white/5 shadow-sm">
+         <div className="relative flex-1">
+             <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+             <Input 
+                placeholder="搜索工作流..." 
+                className="pl-9 border-0 bg-white/5" 
+                value={searchTerm} 
+                onChange={e => setSearchTerm(e.target.value)}
+             />
+         </div>
+         <div className="flex items-center space-x-2 bg-white/5 rounded-md px-3 border border-white/10 group focus-within:border-primary/50 transition-colors">
+            <Calendar className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
+            <select className="bg-transparent text-sm h-9 focus:outline-none border-none text-foreground cursor-pointer [&>option]:bg-background text-white">
+                <option value="all">所有时间</option>
+                <option value="today">今天</option>
+                <option value="week">近一周</option>
+                <option value="month">近一月</option>
+            </select>
+         </div>
+      </div>
+
+      <div className="rounded-xl border border-white/5 bg-card/40 backdrop-blur-md overflow-hidden">
+        <table className="w-full text-sm">
+          <TableHeader>
+            <TableRow>
+              <TableHead>名称</TableHead>
+              <TableHead>节点数量</TableHead>
+              <TableHead>创建时间</TableHead>
+              <TableHead>更新时间</TableHead>
+              <TableHead className="text-right">操作</TableHead>
+            </TableRow>
+          </TableHeader>
+          <tbody>
+            {filteredWorkflows.map(wf => (
+              <TableRow key={wf.id} className="group">
+                <TableCell className="font-medium">
+                  <button 
+                    onClick={() => navigate(`/workflows/edit/${wf.id}`)}
+                    className="hover:text-primary transition-colors cursor-pointer text-left font-semibold text-white"
+                  >
+                    {wf.name}
+                  </button>
+                </TableCell>
+                <TableCell className="text-muted-foreground">{wf.nodeCount} 个节点</TableCell>
+                <TableCell className="text-muted-foreground">{wf.createdAt}</TableCell>
+                <TableCell className="text-muted-foreground">{wf.updatedAt}</TableCell>
+                <TableCell className="text-right relative">
+                    <Button 
+                        variant="ghost" 
+                        size="icon" 
+                        onClick={() => setActiveMenu(activeMenu === wf.id ? null : wf.id)}
+                    >
+                        <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                    
+                    {activeMenu === wf.id && (
+                        <div className="absolute right-0 top-12 z-50 w-48 bg-background border border-white/10 rounded-lg shadow-xl py-1 animate-in zoom-in-95">
+                            <button className="flex items-center w-full px-4 py-2 text-xs hover:bg-white/5 text-left text-white" onClick={() => { alert('JSON copied!'); setActiveMenu(null); }}>
+                                <Code className="w-3.5 h-3.5 mr-2 opacity-70" /> 复制 JSON 代码
+                            </button>
+                            <button className="flex items-center w-full px-4 py-2 text-xs hover:bg-white/5 text-left text-white" onClick={() => navigate(`/workflows/edit/${wf.id}`)}>
+                                <Edit2 className="w-3.5 h-3.5 mr-2 opacity-70" /> 编辑工作流
+                            </button>
+                            <button className="flex items-center w-full px-4 py-2 text-xs hover:bg-white/5 text-left text-white" onClick={() => setActiveMenu(null)}>
+                                <Copy className="w-3.5 h-3.5 mr-2 opacity-70" /> 复制
+                            </button>
+                            <div className="h-px bg-white/10 my-1" />
+                            <button className="flex items-center w-full px-4 py-2 text-xs hover:bg-white/5 text-left text-destructive" onClick={() => handleDeleteWorkflow(wf.id)}>
+                                <Trash2 className="w-3.5 h-3.5 mr-2 opacity-70" /> 删除工作流
+                            </button>
+                        </div>
+                    )}
+                </TableCell>
+              </TableRow>
+            ))}
+             {filteredWorkflows.length === 0 && (
+                 <TableRow>
+                     <TableCell colSpan={5} className="text-center py-12 text-muted-foreground">暂无工作流数据</TableCell>
+                 </TableRow>
+             )}
+          </tbody>
+        </table>
+      </div>
+
+      <UploadJsonModal isOpen={isUploadOpen} onClose={() => setIsUploadOpen(false)} />
+
+      <Dialog 
+        isOpen={isCreateOpen} 
+        onClose={() => setIsCreateOpen(false)} 
+        title="创建新工作流"
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setIsCreateOpen(false)}>取消</Button>
+            <Button onClick={handleCreateWorkflow}>创建</Button>
+          </>
+        }
+      >
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-white">工作流名称</label>
+            <Input 
+              value={newWfName} 
+              onChange={e => setNewWfName(e.target.value)} 
+              placeholder="例如: Lead Qualification Agent"
+              autoFocus
+            />
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-white">选择模板</label>
+            <div className="grid grid-cols-2 gap-3">
+              <div 
+                onClick={() => setSelectedTemplate('blank')}
+                className={`p-4 rounded-xl border-2 cursor-pointer transition-all flex flex-col items-center text-center space-y-2 ${selectedTemplate === 'blank' ? 'border-primary bg-primary/10' : 'border-white/5 bg-white/5 hover:bg-white/10'}`}
+              >
+                <FilePlus className={`w-8 h-8 ${selectedTemplate === 'blank' ? 'text-primary' : 'text-muted-foreground'}`} />
+                <div>
+                  <div className="text-sm font-bold text-white">空白模板</div>
+                  <div className="text-[10px] text-muted-foreground">从零开始构建</div>
+                </div>
+              </div>
+              <div 
+                onClick={() => setSelectedTemplate('lead')}
+                className={`p-4 rounded-xl border-2 cursor-pointer transition-all flex flex-col items-center text-center space-y-2 ${selectedTemplate === 'lead' ? 'border-primary bg-primary/10' : 'border-white/5 bg-white/5 hover:bg-white/10'}`}
+              >
+                <Layout className={`w-8 h-8 ${selectedTemplate === 'lead' ? 'text-primary' : 'text-muted-foreground'}`} />
+                <div>
+                  <div className="text-sm font-bold text-white">销售获客</div>
+                  <div className="text-[10px] text-muted-foreground">标准 Lead 转化逻辑</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  );
+};
+
+const UploadJsonModal: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onClose }) => {
+    const [dragActive, setDragActive] = useState(false);
+    const [file, setFile] = useState<File | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const handleDrag = (e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragActive(e.type === "dragenter" || e.type === "dragover");
+    };
+
+    const handleDrop = (e: React.DragEvent) => {
+        e.preventDefault(); e.stopPropagation();
+        setDragActive(false);
+        if (e.dataTransfer.files?.[0]) setFile(e.dataTransfer.files[0]);
+    };
+
+    return (
+        <Dialog 
+            isOpen={isOpen} onClose={onClose} title="上传工作流 JSON"
+            footer={
+                <>
+                    <Button variant="ghost" onClick={onClose}>取消</Button>
+                    <Button onClick={() => { alert('Import Success!'); onClose(); }}>确定导入</Button>
+                </>
+            }
+        >
+            <div 
+                className={`relative flex flex-col items-center justify-center w-full h-48 rounded-lg border-2 border-dashed transition-all cursor-pointer ${dragActive ? "border-primary bg-primary/10" : "border-white/10 bg-white/5 hover:bg-white/10"}`}
+                onDragEnter={handleDrag} onDragLeave={handleDrag} onDragOver={handleDrag} onDrop={handleDrop}
+                onClick={() => inputRef.current?.click()}
+            >
+                <input ref={inputRef} type="file" className="hidden" accept=".json" onChange={e => e.target.files?.[0] && setFile(e.target.files[0])} />
+                <CloudUpload className={`h-10 w-10 mb-3 ${dragActive ? 'text-primary' : 'text-muted-foreground'}`} />
+                <p className="text-sm text-muted-foreground text-center">
+                    {file ? <span className="text-primary font-medium">{file.name}</span> : <span className="text-white/70"><span className="font-semibold text-primary">点击上传</span> 或将 JSON 文件拖拽到此处</span>}
+                </p>
+                <p className="text-xs text-muted-foreground mt-1 text-white/40">仅支持 .json 格式的工作流配置文件</p>
+            </div>
+        </Dialog>
+    );
+};
diff --git a/web/services/mockData.ts b/web/services/mockData.ts
new file mode 100644
index 0000000..b651110
--- /dev/null
+++ b/web/services/mockData.ts
@@ -0,0 +1,194 @@
+
+import { Assistant, CallLog, KnowledgeBase, Voice, Workflow, AutoTestAssistant, TestType, TestMethod } from '../types';
+
+export const mockVoices: Voice[] = [
+  { id: 'v1', name: 'Xiaoyun', vendor: 'Ali', gender: 'Female', language: 'zh', description: 'Gentle and professional.' },
+  { id: 'v2', name: 'Kevin', vendor: 'Volcano', gender: 'Male', language: 'en', description: 'Deep and authoritative.' },
+  { id: 'v3', name: 'Abby', vendor: 'Minimax', gender: 'Female', language: 'en', description: 'Cheerful and lively.' },
+  { id: 'v4', name: 'Guang', vendor: 'Ali', gender: 'Male', language: 'zh', description: 'Standard newscast style.' },
+  { id: 'v5', name: 'Doubao', vendor: 'Volcano', gender: 'Female', language: 'zh', description: 'Cute and young.' },
+];
+
+export const mockAssistants: Assistant[] = [
+  {
+    id: '1',
+    name: 'Customer Support Bot',
+    callCount: 154,
+    opener: 'Hello, how can I help you today?',
+    prompt: 'You are a helpful customer service agent.',
+    knowledgeBaseId: 'kb1',
+    language: 'en',
+    voice: 'v3',
+    speed: 1.0,
+    hotwords: ['refund', 'order'],
+    interruptionSensitivity: 500,
+  },
+  {
+    id: '2',
+    name: 'Sales Agent',
+    callCount: 89,
+    opener: 'Hi! Are you interested in our new product?',
+    prompt: 'You are an energetic sales representative.',
+    knowledgeBaseId: 'kb2',
+    language: 'zh',
+    voice: 'v1',
+    speed: 1.1,
+    hotwords: ['price', 'discount'],
+    interruptionSensitivity: 300,
+  },
+];
+
+export let mockWorkflows: Workflow[] = [
+  {
+    id: 'wf1',
+    name: 'Lead Qualification Agent',
+    nodeCount: 11,
+    createdAt: '2024-03-01 10:00',
+    updatedAt: '2024-03-05 14:30',
+    nodes: [
+      {
+        name: "introduction",
+        type: "conversation",
+        isStart: true,
+        metadata: { position: { x: 100, y: 100 } },
+        prompt: "You are Morgan from GrowthPartners. Start with: 'Hello, this is Morgan from GrowthPartners. We help businesses improve their operational efficiency through custom software solutions. Do you have a few minutes to chat about how we might be able to help your business?' Use a friendly, consultative tone.",
+        messagePlan: { firstMessage: "Hello, this is Morgan from GrowthPartners. Do you have a few minutes to chat about how we might be able to help your business?" }
+      },
+      {
+        name: "need_discovery",
+        type: "conversation",
+        metadata: { position: { x: 400, y: 150 } },
+        prompt: "Conduct need discovery by asking about: 1) Their business and industry, 2) Current systems/processes they use, 3) Biggest challenges with current approach...",
+        variableExtractionPlan: {
+          output: [
+            { type: "string", title: "industry", description: "the user's industry or business type" },
+            { type: "string", title: "company_size", description: "approximate number of employees" }
+          ]
+        }
+      }
+    ],
+    edges: [
+      { from: "introduction", to: "need_discovery" }
+    ]
+  },
+  {
+    id: 'wf2',
+    name: '售后退款流程',
+    nodeCount: 5,
+    createdAt: '2024-03-01 10:00',
+    updatedAt: '2024-03-05 14:30',
+    nodes: [],
+    edges: []
+  },
+];
+
+export const mockKnowledgeBases: KnowledgeBase[] = [
+  {
+    id: 'kb1',
+    name: 'Product Manuals',
+    creator: 'Admin',
+    createdAt: '2023-10-15',
+    documents: [
+      { id: 'd1', name: 'User Guide v1.pdf', size: '2.4 MB', uploadDate: '2023-10-15' },
+      { id: 'd2', name: 'Warranty Info.docx', size: '1.1 MB', uploadDate: '2023-10-16' },
+    ],
+  },
+  {
+    id: 'kb2',
+    name: 'Sales Scripts',
+    creator: 'Sales Lead',
+    createdAt: '2023-11-01',
+    documents: [
+      { id: 'd3', name: 'Objection Handling.pdf', size: '500 KB', uploadDate: '2023-11-01' },
+    ],
+  },
+];
+
+export const mockCallLogs: CallLog[] = [
+  {
+    id: 'c1',
+    source: 'external',
+    status: 'connected',
+    startTime: '2023-11-20 10:30:00',
+    duration: '5m 23s',
+    agentName: 'Customer Support Bot',
+  },
+  {
+    id: 'c2',
+    source: 'debug',
+    status: 'connected',
+    startTime: '2023-11-20 11:15:00',
+    duration: '1m 10s',
+    agentName: 'Sales Agent',
+  },
+  {
+    id: 'c3',
+    source: 'external',
+    status: 'missed',
+    startTime: '2023-11-20 12:00:00',
+    duration: '0s',
+    agentName: 'Customer Support Bot',
+  },
+];
+
+export const mockAutoTestAssistants: AutoTestAssistant[] = [
+  {
+    id: 'at1',
+    name: '退款流程压力测试',
+    type: TestType.FIXED,
+    method: TestMethod.TEXT,
+    targetAssistantId: '1',
+    fixedWorkflowSteps: ['你好，我要退款', '订单号是123456', '谢谢'],
+    intelligentPrompt: '',
+    createdAt: '2024-03-10 09:00'
+  },
+  {
+    id: 'at2',
+    name: '愤怒的客户模拟',
+    type: TestType.INTELLIGENT,
+    method: TestMethod.AUDIO,
+    targetAssistantId: '1',
+    fixedWorkflowSteps: [],
+    intelligentPrompt: '你是一个非常愤怒的客户，因为订单延迟了一周。你需要表达你的不满，并要求立即解决。你的语气必须很冲，不接受简单的道歉。',
+    createdAt: '2024-03-11 14:20'
+  }
+];
+
+export interface DashboardStats {
+  totalCalls: number;
+  answerRate: number;
+  avgDuration: string;
+  humanTransferCount: number;
+  trend: { label: string; value: number }[];
+}
+
+export const getDashboardStats = (timeRange: 'week' | 'month' | 'year', assistantId: string): DashboardStats => {
+  const multiplier = assistantId === 'all' ? 1 : (assistantId === '1' ? 0.6 : 0.4);
+  const rangeMultiplier = timeRange === 'week' ? 1 : (timeRange === 'month' ? 4 : 52);
+  const baseCalls = Math.floor(100 * rangeMultiplier * multiplier);
+  const transfers = Math.floor(baseCalls * 0.15); 
+  
+  let points = 7;
+  if (timeRange === 'month') points = 30;
+  if (timeRange === 'year') points = 12;
+
+  const trend = Array.from({ length: points }, (_, i) => {
+    let label = `Day ${i + 1}`;
+    if (timeRange === 'year') {
+      const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+      label = months[i];
+    }
+    return {
+      label,
+      value: Math.floor(Math.random() * 50 * multiplier) + 10
+    };
+  });
+
+  return {
+    totalCalls: baseCalls,
+    answerRate: 85 + Math.floor(Math.random() * 10),
+    avgDuration: `${Math.floor(2 + Math.random() * 3)}m ${Math.floor(Math.random() * 60)}s`,
+    humanTransferCount: transfers,
+    trend
+  };
+};
diff --git a/web/tsconfig.json b/web/tsconfig.json
new file mode 100644
index 0000000..2c6eed5
--- /dev/null
+++ b/web/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}
\ No newline at end of file
diff --git a/web/types.ts b/web/types.ts
new file mode 100644
index 0000000..4ee4ba2
--- /dev/null
+++ b/web/types.ts
@@ -0,0 +1,129 @@
+
+export interface Assistant {
+  id: string;
+  name: string;
+  callCount: number;
+  opener: string;
+  prompt: string;
+  knowledgeBaseId: string;
+  language: 'zh' | 'en';
+  voice: string; // This will now store the ID of the voice from Voice Library
+  speed: number;
+  hotwords: string[];
+  tools?: string[]; // IDs of enabled tools
+  interruptionSensitivity?: number; // In ms
+  configMode?: 'platform' | 'dify' | 'fastgpt' | 'none';
+  apiUrl?: string;
+  apiKey?: string;
+}
+
+export interface Voice {
+  id: string;
+  name: string;
+  vendor: string;
+  gender: string;
+  language: string;
+  description: string;
+}
+
+export interface KnowledgeBase {
+  id: string;
+  name: string;
+  creator: string;
+  createdAt: string;
+  documents: KnowledgeDocument[];
+}
+
+export interface KnowledgeDocument {
+  id: string;
+  name: string;
+  size: string;
+  uploadDate: string;
+}
+
+export interface CallLog {
+  id: string;
+  source: 'debug' | 'external';
+  status: 'connected' | 'missed';
+  startTime: string;
+  duration: string;
+  agentName: string;
+}
+
+export interface Workflow {
+  id: string;
+  name: string;
+  nodeCount: number;
+  createdAt: string;
+  updatedAt: string;
+  nodes: WorkflowNode[];
+  edges: WorkflowEdge[];
+  globalPrompt?: string;
+}
+
+export interface WorkflowNode {
+  name: string;
+  type: 'conversation' | 'tool' | 'human' | 'end';
+  isStart?: boolean;
+  metadata: {
+    position: { x: number; y: number };
+  };
+  prompt?: string;
+  messagePlan?: {
+    firstMessage?: string;
+  };
+  variableExtractionPlan?: {
+    output: Array<{
+      type: string;
+      title: string;
+      description: string;
+    }>;
+  };
+  tool?: {
+    type: string;
+    function: {
+      name: string;
+      parameters: any;
+    };
+    destinations?: any[];
+    messages?: any[];
+  };
+  globalNodePlan?: {
+    enabled: boolean;
+    enterCondition: string;
+  };
+}
+
+export interface WorkflowEdge {
+  from: string;
+  to: string;
+  label?: string;
+}
+
+export enum TabValue {
+  GLOBAL = 'global',
+  VOICE = 'voice',
+  TOOLS = 'tools',
+  LINK = 'link'
+}
+
+export enum TestType {
+  FIXED = 'fixed',
+  INTELLIGENT = 'intelligent'
+}
+
+export enum TestMethod {
+  TEXT = 'text',
+  AUDIO = 'audio'
+}
+
+export interface AutoTestAssistant {
+  id: string;
+  name: string;
+  type: TestType;
+  method: TestMethod;
+  targetAssistantId: string;
+  fixedWorkflowSteps: string[];
+  intelligentPrompt: string;
+  createdAt: string;
+}
diff --git a/web/vite.config.ts b/web/vite.config.ts
new file mode 100644
index 0000000..ee5fb8d
--- /dev/null
+++ b/web/vite.config.ts
@@ -0,0 +1,23 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      server: {
+        port: 3000,
+        host: '0.0.0.0',
+      },
+      plugins: [react()],
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});