Merge branch 'main' into ashwin/errorlog

client/src/App.tsx

@@ -12,11 +12,11 @@ import {
   ListPromptsResultSchema,
   ListResourcesResultSchema,
   ListResourceTemplatesResultSchema,
-  Request,
   ListRootsRequestSchema,
   ListToolsResultSchema,
   ProgressNotificationSchema,
   ReadResourceResultSchema,
+  Request,
   Resource,
   ResourceTemplate,
   Result,
@@ -27,16 +27,11 @@ import {
 import { useCallback, useEffect, useRef, useState } from "react";
 
 import {
-  StderrNotificationSchema,
-  StdErrNotification,
   Notification,
+  StdErrNotification,
+  StderrNotificationSchema,
 } from "./lib/notificationTypes";
 
-// Add dark mode class based on system preference
-if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-  document.documentElement.classList.add("dark");
-}
-
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   Bell,
@@ -45,8 +40,6 @@ import {
   Hammer,
   Hash,
   MessageSquare,
-  Send,
-  Terminal,
 } from "lucide-react";
 
 import { toast } from "react-toastify";
@@ -61,6 +54,7 @@ import RootsTab from "./components/RootsTab";
 import SamplingTab, { PendingRequest } from "./components/SamplingTab";
 import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
+import useDarkModeSync from "./lib/useDarkModeSync";
 
 const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
 
@@ -150,6 +144,8 @@ const App = () => {
   const dragStartY = useRef<number>(0);
   const dragStartHeight = useRef<number>(0);
 
+  useDarkModeSync();
+
   const handleDragStart = useCallback(
     (e: React.MouseEvent) => {
       setIsDragging(true);
@@ -496,18 +492,10 @@ const App = () => {
                   <MessageSquare className="w-4 h-4 mr-2" />
                   Prompts
                 </TabsTrigger>
-                <TabsTrigger value="requests" disabled>
-                  <Send className="w-4 h-4 mr-2" />
-                  Requests
-                </TabsTrigger>
                 <TabsTrigger value="tools">
                   <Hammer className="w-4 h-4 mr-2" />
                   Tools
                 </TabsTrigger>
-                <TabsTrigger value="console" disabled>
-                  <Terminal className="w-4 h-4 mr-2" />
-                  Console
-                </TabsTrigger>
                 <TabsTrigger value="ping">
                   <Bell className="w-4 h-4 mr-2" />
                   Ping

client/src/components/ListPane.tsx

@@ -20,8 +20,8 @@ const ListPane = <T extends object>({
   isButtonDisabled,
 }: ListPaneProps<T>) => (
   <div className="bg-card rounded-lg shadow">
-    <div className="p-4 border-b border-gray-200">
-      <h3 className="font-semibold">{title}</h3>
+    <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+      <h3 className="font-semibold dark:text-white">{title}</h3>
     </div>
     <div className="p-4">
       <Button
@@ -36,7 +36,7 @@ const ListPane = <T extends object>({
         {items.map((item, index) => (
           <div
             key={index}
-            className="flex items-center p-2 rounded hover:bg-gray-50 cursor-pointer"
+            className="flex items-center p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
             onClick={() => setSelectedItem(item)}
           >
             {renderItem(item)}

client/src/components/ResourcesTab.tsx

@@ -142,7 +142,7 @@ const ResourcesTab = ({
               <AlertDescription>{error}</AlertDescription>
             </Alert>
           ) : selectedResource ? (
-            <pre className="bg-gray-50 p-4 rounded text-sm overflow-auto max-h-96 whitespace-pre-wrap break-words">
+            <pre className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 whitespace-pre-wrap break-words text-gray-900 dark:text-gray-100">
               {resourceContent}
             </pre>
           ) : selectedTemplate ? (

client/src/components/ui/button.tsx

@@ -10,7 +10,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700",
         destructive:
           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         outline:

client/src/lib/useDarkModeSync.ts

@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+
+// Listen for changes to the user's preferred color scheme
+const useDarkModeSync = () => {
+  useEffect(() => {
+    const darkModeMediaQuery = window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    );
+    const handleDarkModeChange = (e: MediaQueryListEvent) => {
+      if (e.matches) {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    };
+
+    if (darkModeMediaQuery.matches) {
+      document.documentElement.classList.add("dark");
+    }
+
+    darkModeMediaQuery.addEventListener("change", handleDarkModeChange);
+
+    return () => {
+      darkModeMediaQuery.removeEventListener("change", handleDarkModeChange);
+    };
+  }, []);
+};
+
+export default useDarkModeSync;