feat(inspector): update dependencies and enhance UI components

- Add cmdk, next-themes, and sonner dependencies to improve UI functionality
- Refactor App component to include ThemeProvider and Toaster for better user experience
- Enhance InspectorDashboard with new connection management features and export options
- Update Layout component to support command palette and keyboard shortcuts
- Improve styling and animations in various components for a more polished look
- Add new CSS animations for status indicators in index.css
- Implement version injection from package.json in vite.config.ts

Author: tonxxd

packages/inspector/package.json

@@ -62,17 +62,20 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "express": "^4.18.0",
     "framer-motion": "^12.23.22",
     "hono": "^4.0.0",
     "lucide-react": "^0.545.0",
     "mcp-use": "workspace:*",
     "motion": "^12.23.22",
+    "next-themes": "^0.4.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-resizable-panels": "^3.0.6",
     "react-router-dom": "^7.9.3",
     "react-syntax-highlighter": "^15.6.6",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1"
   },
   "publishConfig": {

packages/inspector/src/client/App.tsx

@@ -4,20 +4,25 @@ import { Layout } from './components/Layout'
 import { ServerDetail } from './components/ServerDetail'
 import { ServerList } from './components/ServerList'
 import { McpProvider } from './context/McpContext'
+import { ThemeProvider } from './context/ThemeContext'
+import { Toaster } from '@/components/ui/sonner'
 
 function App() {
   return (
-    <McpProvider>
-      <Router basename="/inspector">
-        <Layout>
-          <Routes>
-            <Route path="/" element={<InspectorDashboard />} />
-            <Route path="/servers" element={<ServerList />} />
-            <Route path="/servers/:serverId" element={<ServerDetail />} />
-          </Routes>
-        </Layout>
-      </Router>
-    </McpProvider>
+    <ThemeProvider>
+      <McpProvider>
+        <Router basename="/inspector">
+          <Layout>
+            <Routes>
+              <Route path="/" element={<InspectorDashboard />} />
+              <Route path="/servers" element={<ServerList />} />
+              <Route path="/servers/:serverId" element={<ServerDetail />} />
+            </Routes>
+          </Layout>
+        </Router>
+        <Toaster position="top-center" />
+      </McpProvider>
+    </ThemeProvider>
   )
 }
 

packages/inspector/src/client/components/AnimatedThemeToggler.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { Monitor, Moon, SunDim } from "lucide-react";
+import { useTheme } from "../context/ThemeContext";
+import { useEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+
+type props = {
+  className?: string;
+};
+
+export const AnimatedThemeToggler = ({ className }: props) => {
+  const { theme, setTheme } = useTheme();
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const [mounted, setMounted] = useState(false);
+
+  // Prevent hydration mismatch by only showing theme-dependent content after mount
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Cycle through: system -> light -> dark -> system
+  const getNextTheme = () => {
+    if (theme === "system") return "light";
+    if (theme === "light") return "dark";
+    return "system";
+  };
+
+  const getThemeIcon = () => {
+    if (theme === "system") return <Monitor className="size-4" />;
+    if (theme === "light") return <SunDim className="size-4" />;
+    return <Moon className="size-4" />;
+  };
+
+  const getThemeLabel = () => {
+    if (theme === "system") return "Switch to light mode";
+    if (theme === "light") return "Switch to dark mode";
+    return "Switch to system mode";
+  };
+
+  const changeTheme = async () => {
+    if (!buttonRef.current) return;
+
+    const nextTheme = getNextTheme();
+
+    // Check if view transitions are supported
+    if (typeof document !== 'undefined' && 'startViewTransition' in document) {
+      await document.startViewTransition(() => {
+        flushSync(() => {
+          setTheme(nextTheme);
+        });
+      }).ready;
+
+      const { top, left, width, height } =
+        buttonRef.current.getBoundingClientRect();
+      const y = top + height / 2;
+      const x = left + width / 2;
+
+      const right = window.innerWidth - left;
+      const bottom = window.innerHeight - top;
+      const maxRad = Math.hypot(Math.max(left, right), Math.max(top, bottom));
+
+      document.documentElement.animate(
+        {
+          clipPath: [
+            `circle(0px at ${x}px ${y}px)`,
+            `circle(${maxRad}px at ${x}px ${y}px)`,
+          ],
+        },
+        {
+          duration: 700,
+          easing: "ease-in-out",
+          pseudoElement: "::view-transition-new(root)",
+        }
+      );
+    } else {
+      // Fallback for browsers that don't support view transitions
+      setTheme(nextTheme);
+    }
+  };
+
+  // Show a placeholder during SSR to prevent hydration mismatch
+  if (!mounted) {
+    return (
+      <button
+        ref={buttonRef}
+        className={cn(className)}
+        aria-label="Toggle theme"
+      >
+        <Monitor className="size-4" />
+      </button>
+    );
+  }
+
+  return (
+    <button
+      ref={buttonRef}
+      onClick={changeTheme}
+      className={cn(className)}
+      aria-label={getThemeLabel()}
+      title={`Current: ${theme === "system" ? "Auto" : theme === "light" ? "Light" : "Dark"}`}
+    >
+      {getThemeIcon()}
+    </button>
+  );
+};