Merge branch 'main' into fix-port-numbers

client/src/lib/hooks/__tests__/useConnection.test.tsx

@@ -45,7 +45,7 @@ jest.mock("@modelcontextprotocol/sdk/client/auth.js", () => ({
 }));
 
 // Mock the toast hook
-jest.mock("@/hooks/use-toast", () => ({
+jest.mock("@/lib/hooks/useToast", () => ({
   useToast: () => ({
     toast: jest.fn(),
   }),

client/src/lib/hooks/useConnection.ts

@@ -2,8 +2,12 @@ import { Client } from "@modelcontextprotocol/sdk/client/index.js";
 import {
   SSEClientTransport,
   SseError,
+  SSEClientTransportOptions,
 } from "@modelcontextprotocol/sdk/client/sse.js";
-import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
+import {
+  StreamableHTTPClientTransport,
+  StreamableHTTPClientTransportOptions,
+} from "@modelcontextprotocol/sdk/client/streamableHttp.js";
 import {
   ClientNotification,
   ClientRequest,
@@ -27,7 +31,7 @@ import {
 } from "@modelcontextprotocol/sdk/types.js";
 import { RequestOptions } from "@modelcontextprotocol/sdk/shared/protocol.js";
 import { useState } from "react";
-import { useToast } from "@/hooks/use-toast";
+import { useToast } from "@/lib/hooks/useToast";
 import { z } from "zod";
 import { ConnectionStatus } from "../constants";
 import { Notification, StdErrNotificationSchema } from "../notificationTypes";
@@ -279,29 +283,6 @@ export function useConnection({
       setConnectionStatus("error-connecting-to-proxy");
       return;
     }
-    let mcpProxyServerUrl;
-    switch (transportType) {
-      case "stdio":
-        mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/stdio`);
-        mcpProxyServerUrl.searchParams.append("command", command);
-        mcpProxyServerUrl.searchParams.append("args", args);
-        mcpProxyServerUrl.searchParams.append("env", JSON.stringify(env));
-        break;
-
-      case "sse":
-        mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/sse`);
-        mcpProxyServerUrl.searchParams.append("url", sseUrl);
-        break;
-
-      case "streamable-http":
-        mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/mcp`);
-        mcpProxyServerUrl.searchParams.append("url", sseUrl);
-        break;
-    }
-    (mcpProxyServerUrl as URL).searchParams.append(
-      "transportType",
-      transportType,
-    );
 
     try {
       // Inject auth manually instead of using SSEClientTransport, because we're
@@ -320,21 +301,82 @@ export function useConnection({
       }
 
       // Create appropriate transport
-      const transportOptions = {
-        eventSourceInit: {
-          fetch: (
-            url: string | URL | globalThis.Request,
-            init: RequestInit | undefined,
-          ) => fetch(url, { ...init, headers }),
-        },
-        requestInit: {
-          headers,
-        },
-      };
+      let transportOptions:
+        | StreamableHTTPClientTransportOptions
+        | SSEClientTransportOptions;
+
+      let mcpProxyServerUrl;
+      switch (transportType) {
+        case "stdio":
+          mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/stdio`);
+          mcpProxyServerUrl.searchParams.append("command", command);
+          mcpProxyServerUrl.searchParams.append("args", args);
+          mcpProxyServerUrl.searchParams.append("env", JSON.stringify(env));
+          transportOptions = {
+            authProvider: serverAuthProvider,
+            eventSourceInit: {
+              fetch: (
+                url: string | URL | globalThis.Request,
+                init: RequestInit | undefined,
+              ) => fetch(url, { ...init, headers }),
+            },
+            requestInit: {
+              headers,
+            },
+          };
+          break;
+
+        case "sse":
+          mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/sse`);
+          mcpProxyServerUrl.searchParams.append("url", sseUrl);
+          transportOptions = {
+            authProvider: serverAuthProvider,
+            eventSourceInit: {
+              fetch: (
+                url: string | URL | globalThis.Request,
+                init: RequestInit | undefined,
+              ) => fetch(url, { ...init, headers }),
+            },
+            requestInit: {
+              headers,
+            },
+          };
+          break;
+
+        case "streamable-http":
+          mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/mcp`);
+          mcpProxyServerUrl.searchParams.append("url", sseUrl);
+          transportOptions = {
+            authProvider: serverAuthProvider,
+            eventSourceInit: {
+              fetch: (
+                url: string | URL | globalThis.Request,
+                init: RequestInit | undefined,
+              ) => fetch(url, { ...init, headers }),
+            },
+            requestInit: {
+              headers,
+            },
+            // TODO these should be configurable...
+            reconnectionOptions: {
+              maxReconnectionDelay: 30000,
+              initialReconnectionDelay: 1000,
+              reconnectionDelayGrowFactor: 1.5,
+              maxRetries: 2,
+            },
+          };
+          break;
+      }
+      (mcpProxyServerUrl as URL).searchParams.append(
+        "transportType",
+        transportType,
+      );
+
       const clientTransport =
         transportType === "streamable-http"
           ? new StreamableHTTPClientTransport(mcpProxyServerUrl as URL, {
               sessionId: undefined,
+              ...transportOptions,
             })
           : new SSEClientTransport(mcpProxyServerUrl as URL, transportOptions);
 

client/src/lib/hooks/useTheme.ts

@@ -0,0 +1,52 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+type Theme = "light" | "dark" | "system";
+
+const useTheme = (): [Theme, (mode: Theme) => void] => {
+  const [theme, setTheme] = useState<Theme>(() => {
+    const savedTheme = localStorage.getItem("theme") as Theme;
+    return savedTheme || "system";
+  });
+
+  useEffect(() => {
+    const darkModeMediaQuery = window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    );
+    const handleDarkModeChange = (e: MediaQueryListEvent) => {
+      if (theme === "system") {
+        updateDocumentTheme(e.matches ? "dark" : "light");
+      }
+    };
+
+    const updateDocumentTheme = (newTheme: "light" | "dark") => {
+      document.documentElement.classList.toggle("dark", newTheme === "dark");
+    };
+
+    // Set initial theme based on current mode
+    if (theme === "system") {
+      updateDocumentTheme(darkModeMediaQuery.matches ? "dark" : "light");
+    } else {
+      updateDocumentTheme(theme);
+    }
+
+    darkModeMediaQuery.addEventListener("change", handleDarkModeChange);
+
+    return () => {
+      darkModeMediaQuery.removeEventListener("change", handleDarkModeChange);
+    };
+  }, [theme]);
+
+  const setThemeWithSideEffect = useCallback((newTheme: Theme) => {
+    setTheme(newTheme);
+    localStorage.setItem("theme", newTheme);
+    if (newTheme !== "system") {
+      document.documentElement.classList.toggle("dark", newTheme === "dark");
+    }
+  }, []);
+  return useMemo(
+    () => [theme, setThemeWithSideEffect],
+    [theme, setThemeWithSideEffect],
+  );
+};
+
+export default useTheme;

client/src/lib/hooks/useToast.ts

@@ -0,0 +1,191 @@
+"use client";
+
+// Inspired by react-hot-toast library
+import * as React from "react";
+
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+const enum ActionType {
+  ADD_TOAST = "ADD_TOAST",
+  UPDATE_TOAST = "UPDATE_TOAST",
+  DISMISS_TOAST = "DISMISS_TOAST",
+  REMOVE_TOAST = "REMOVE_TOAST",
+}
+
+type Action =
+  | {
+      type: ActionType.ADD_TOAST;
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType.UPDATE_TOAST;
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType.DISMISS_TOAST;
+      toastId?: ToasterToast["id"];
+    }
+  | {
+      type: ActionType.REMOVE_TOAST;
+      toastId?: ToasterToast["id"];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: ActionType.REMOVE_TOAST,
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case ActionType.ADD_TOAST:
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case ActionType.UPDATE_TOAST:
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      };
+
+    case ActionType.DISMISS_TOAST: {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      };
+    }
+    case ActionType.REMOVE_TOAST:
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: ActionType.UPDATE_TOAST,
+      toast: { ...props, id },
+    });
+  const dismiss = () =>
+    dispatch({ type: ActionType.DISMISS_TOAST, toastId: id });
+
+  dispatch({
+    type: ActionType.ADD_TOAST,
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) =>
+      dispatch({ type: ActionType.DISMISS_TOAST, toastId }),
+  };
+}
+
+export { useToast, toast };