From 51049522399322971edf2390471bdc2763a97c01 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Sat, 15 Mar 2025 16:37:10 -0400
Subject: [PATCH 1/2] Add log level setting in UI * This fixes #188 * In
 App.tsx   - import LoggingLevel from sdk   - add [logLevel, setLogLevel]
 useState with value of type LoggingLevel initialized to "debug"   - add
 useEffect that stores the new logLevel in localStorage as "logLevel"   -
 added sendLogLevelRequest function that takes a level argument of type
 LoggingLevel and sends the appropriate request. It calls setLogLevel when
 done, to update the local UI   - pass logLevel and sendLogLevelRequest to
 Sidebar component as props * In Sidebar.tsx   - Import LoggingLevel and
 LoggingLevelSchema from sdk   - add props and prop types for  logLevel and
 sendLogLevelRequest and loggingSupported   - add Select component populated
 with the enum values of LoggingLevelSchema, shown only if loggingSupported is
 true and connectionStatus is "connected" *

---
 client/src/App.tsx                | 18 +++++++++++++++++
 client/src/components/Sidebar.tsx | 32 +++++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 5650954f6..0a699b1b8 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -15,6 +15,7 @@ import {
   Root,
   ServerNotification,
   Tool,
+  LoggingLevel,
 } from "@modelcontextprotocol/sdk/types.js";
 import React, { Suspense, useEffect, useRef, useState } from "react";
 import { useConnection } from "./lib/hooks/useConnection";
@@ -91,6 +92,7 @@ const App = () => {
       (localStorage.getItem("lastTransportType") as "stdio" | "sse") || "stdio"
     );
   });
+  const [logLevel, setLogLevel] = useState<LoggingLevel>("debug");
   const [notifications, setNotifications] = useState<ServerNotification[]>([]);
   const [stdErrNotifications, setStdErrNotifications] = useState<
     StdErrNotification[]
@@ -412,6 +414,17 @@ const App = () => {
     await sendNotification({ method: "notifications/roots/list_changed" });
   };
 
+  const sendLogLevelRequest = async (level: LoggingLevel) => {
+    await makeRequest(
+      {
+        method: "logging/setLevel" as const,
+        params: { level },
+      },
+      z.object({}),
+    );
+    setLogLevel(level);
+  };
+
   return (
     <div className="flex h-screen bg-background">
       <Sidebar
@@ -430,6 +443,11 @@ const App = () => {
         setBearerToken={setBearerToken}
         onConnect={connectMcpServer}
         stdErrNotifications={stdErrNotifications}
+        logLevel={logLevel}
+        sendLogLevelRequest={sendLogLevelRequest}
+        loggingSupported={
+          !!serverCapabilities?.logging || false
+        }
       />
       <div className="flex-1 flex flex-col overflow-hidden">
         <div className="flex-1 overflow-auto">
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 48c6ff2af..aa930e5ee 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -19,6 +19,10 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { StdErrNotification } from "@/lib/notificationTypes";
+import {
+  LoggingLevel,
+  LoggingLevelSchema,
+} from "@modelcontextprotocol/sdk/types.js";
 
 import useTheme from "../lib/useTheme";
 import { version } from "../../../package.json";
@@ -39,6 +43,9 @@ interface SidebarProps {
   setBearerToken: (token: string) => void;
   onConnect: () => void;
   stdErrNotifications: StdErrNotification[];
+  logLevel: LoggingLevel;
+  sendLogLevelRequest: (level: LoggingLevel) => void;
+  loggingSupported: boolean;
 }
 
 const Sidebar = ({
@@ -57,6 +64,9 @@ const Sidebar = ({
   setBearerToken,
   onConnect,
   stdErrNotifications,
+  logLevel,
+  sendLogLevelRequest,
+  loggingSupported,
 }: SidebarProps) => {
   const [theme, setTheme] = useTheme();
   const [showEnvVars, setShowEnvVars] = useState(false);
@@ -290,6 +300,28 @@ const Sidebar = ({
                     : "Disconnected"}
               </span>
             </div>
+
+            {loggingSupported && connectionStatus === "connected" && (
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Logging Level</label>
+                <Select
+                  value={logLevel}
+                  onValueChange={(value: LoggingLevel) =>
+                    sendLogLevelRequest(value)
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select logging level" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {Object.values(LoggingLevelSchema.enum).map((level) => (
+                      <SelectItem value={level}>{level}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+
             {stdErrNotifications.length > 0 && (
               <>
                 <div className="mt-4 border-t border-gray-200 pt-4">

From d8b5bdb6135d70dbd18a5fa5ad33e870c9187da3 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Sat, 15 Mar 2025 17:03:22 -0400
Subject: [PATCH 2/2] Run prettier

---
 client/src/App.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 0a699b1b8..1ae5250f0 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -445,9 +445,7 @@ const App = () => {
         stdErrNotifications={stdErrNotifications}
         logLevel={logLevel}
         sendLogLevelRequest={sendLogLevelRequest}
-        loggingSupported={
-          !!serverCapabilities?.logging || false
-        }
+        loggingSupported={!!serverCapabilities?.logging || false}
       />
       <div className="flex-1 flex flex-col overflow-hidden">
         <div className="flex-1 overflow-auto">