Merge branch 'main' into dockerfile

2025-06-09 12:05:44 -04:00 · 2025-06-09 12:05:44 -04:00 · c8016cd989
commit c8016cd989
parent 37bd103cdb 03edbb01ce
5 changed files with 216 additions and 82 deletions
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@ -30,7 +30,10 @@ import React, {
  useState,
 } from "react";
 import { useConnection } from "./lib/hooks/useConnection";
-import { useDraggablePane } from "./lib/hooks/useDraggablePane";
+import {
+  useDraggablePane,
+  useDraggableSidebar,
+} from "./lib/hooks/useDraggablePane";
 import { StdErrNotification } from "./lib/notificationTypes";

 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@ -154,6 +157,11 @@ const App = () => {
  const progressTokenRef = useRef(0);

  const { height: historyPaneHeight, handleDragStart } = useDraggablePane(300);
+  const {
+    width: sidebarWidth,
+    isDragging: isSidebarDragging,
+    handleDragStart: handleSidebarDragStart,
+  } = useDraggableSidebar(320);

  const {
    connectionStatus,
@ -607,32 +615,58 @@ const App = () => {

  return (
    <div className="flex h-screen bg-background">
-      <Sidebar
-        connectionStatus={connectionStatus}
-        transportType={transportType}
-        setTransportType={setTransportType}
-        command={command}
-        setCommand={setCommand}
-        args={args}
-        setArgs={setArgs}
-        sseUrl={sseUrl}
-        setSseUrl={setSseUrl}
-        env={env}
-        setEnv={setEnv}
-        config={config}
-        setConfig={setConfig}
-        bearerToken={bearerToken}
-        setBearerToken={setBearerToken}
-        headerName={headerName}
-        setHeaderName={setHeaderName}
-        onConnect={connectMcpServer}
-        onDisconnect={disconnectMcpServer}
-        stdErrNotifications={stdErrNotifications}
-        logLevel={logLevel}
-        sendLogLevelRequest={sendLogLevelRequest}
-        loggingSupported={!!serverCapabilities?.logging || false}
-        clearStdErrNotifications={clearStdErrNotifications}
-      />
+      <div
+        style={{
+          width: sidebarWidth,
+          minWidth: 200,
+          maxWidth: 600,
+          transition: isSidebarDragging ? "none" : "width 0.15s",
+        }}
+        className="bg-card border-r border-border flex flex-col h-full relative"
+      >
+        <Sidebar
+          connectionStatus={connectionStatus}
+          transportType={transportType}
+          setTransportType={setTransportType}
+          command={command}
+          setCommand={setCommand}
+          args={args}
+          setArgs={setArgs}
+          sseUrl={sseUrl}
+          setSseUrl={setSseUrl}
+          env={env}
+          setEnv={setEnv}
+          config={config}
+          setConfig={setConfig}
+          bearerToken={bearerToken}
+          setBearerToken={setBearerToken}
+          headerName={headerName}
+          setHeaderName={setHeaderName}
+          onConnect={connectMcpServer}
+          onDisconnect={disconnectMcpServer}
+          stdErrNotifications={stdErrNotifications}
+          logLevel={logLevel}
+          sendLogLevelRequest={sendLogLevelRequest}
+          loggingSupported={!!serverCapabilities?.logging || false}
+          clearStdErrNotifications={clearStdErrNotifications}
+        />
+        {/* Drag handle for resizing sidebar */}
+        <div
+          onMouseDown={handleSidebarDragStart}
+          style={{
+            cursor: "col-resize",
+            position: "absolute",
+            top: 0,
+            right: 0,
+            width: 6,
+            height: "100%",
+            zIndex: 10,
+            background: isSidebarDragging ? "rgba(0,0,0,0.08)" : "transparent",
+          }}
+          aria-label="Resize sidebar"
+          data-testid="sidebar-drag-handle"
+        />
+      </div>
      <div className="flex-1 flex flex-col overflow-hidden">
        <div className="flex-1 overflow-auto">
          {mcpClient ? (
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@ -214,7 +214,7 @@ const Sidebar = ({
  }, [generateMCPServerFile, toast, reportError]);

  return (
-    <div className="w-80 bg-card border-r border-border flex flex-col h-full">
+    <div className="bg-card border-r border-border flex flex-col h-full">
      <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-border">
        <div className="flex items-center">
          <h1 className="ml-2 text-lg font-semibold">
@ -285,13 +285,28 @@ const Sidebar = ({
                <label className="text-sm font-medium" htmlFor="sse-url-input">
                  URL
                </label>
-                <Input
-                  id="sse-url-input"
-                  placeholder="URL"
-                  value={sseUrl}
-                  onChange={(e) => setSseUrl(e.target.value)}
-                  className="font-mono"
-                />
+                {sseUrl ? (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Input
+                        id="sse-url-input"
+                        placeholder="URL"
+                        value={sseUrl}
+                        onChange={(e) => setSseUrl(e.target.value)}
+                        className="font-mono"
+                      />
+                    </TooltipTrigger>
+                    <TooltipContent>{sseUrl}</TooltipContent>
+                  </Tooltip>
+                ) : (
+                  <Input
+                    id="sse-url-input"
+                    placeholder="URL"
+                    value={sseUrl}
+                    onChange={(e) => setSseUrl(e.target.value)}
+                    className="font-mono"
+                  />
+                )}
              </div>
              <div className="space-y-2">
                <Button
--- a/client/src/lib/hooks/useDraggablePane.ts
+++ b/client/src/lib/hooks/useDraggablePane.ts
@ -51,3 +51,55 @@ export function useDraggablePane(initialHeight: number) {
    handleDragStart,
  };
 }
+
+export function useDraggableSidebar(initialWidth: number) {
+  const [width, setWidth] = useState(initialWidth);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartX = useRef<number>(0);
+  const dragStartWidth = useRef<number>(0);
+
+  const handleDragStart = useCallback(
+    (e: React.MouseEvent) => {
+      setIsDragging(true);
+      dragStartX.current = e.clientX;
+      dragStartWidth.current = width;
+      document.body.style.userSelect = "none";
+    },
+    [width],
+  );
+
+  const handleDragMove = useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging) return;
+      const deltaX = e.clientX - dragStartX.current;
+      const newWidth = Math.max(
+        200,
+        Math.min(600, dragStartWidth.current + deltaX),
+      );
+      setWidth(newWidth);
+    },
+    [isDragging],
+  );
+
+  const handleDragEnd = useCallback(() => {
+    setIsDragging(false);
+    document.body.style.userSelect = "";
+  }, []);
+
+  useEffect(() => {
+    if (isDragging) {
+      window.addEventListener("mousemove", handleDragMove);
+      window.addEventListener("mouseup", handleDragEnd);
+      return () => {
+        window.removeEventListener("mousemove", handleDragMove);
+        window.removeEventListener("mouseup", handleDragEnd);
+      };
+    }
+  }, [isDragging, handleDragMove, handleDragEnd]);
+
+  return {
+    width,
+    isDragging,
+    handleDragStart,
+  };
+}
--- a/server/src/index.ts
+++ b/server/src/index.ts
@ -91,7 +91,7 @@ const serverTransports: Map<string, Transport> = new Map<string, Transport>(); /

 const createTransport = async (req: express.Request): Promise<Transport> => {
  const query = req.query;
-  console.log("Query parameters:", query);
+  console.log("Query parameters:", JSON.stringify(query));

  const transportType = query.transportType as string;

@ -103,7 +103,7 @@ const createTransport = async (req: express.Request): Promise<Transport> => {

    const { cmd, args } = findActualExecutable(command, origArgs);

-    console.log(`Stdio transport: command=${cmd}, args=${args}`);
+    console.log(`STDIO transport: command=${cmd}, args=${args}`);

    const transport = new StdioClientTransport({
      command: cmd,
@ -113,8 +113,6 @@ const createTransport = async (req: express.Request): Promise<Transport> => {
    });

    await transport.start();
-
-    console.log("Spawned stdio transport");
    return transport;
  } else if (transportType === "sse") {
    const url = query.url as string;
@ -132,8 +130,6 @@ const createTransport = async (req: express.Request): Promise<Transport> => {
      },
    });
    await transport.start();
-
-    console.log("Connected to SSE transport");
    return transport;
  } else if (transportType === "streamable-http") {
    const headers = getHttpHeaders(req, transportType);
@ -147,7 +143,6 @@ const createTransport = async (req: express.Request): Promise<Transport> => {
      },
    );
    await transport.start();
-    console.log("Connected to Streamable HTTP transport");
    return transport;
  } else {
    console.error(`Invalid transport type: ${transportType}`);
@ -176,11 +171,10 @@ app.get("/mcp", async (req, res) => {

 app.post("/mcp", async (req, res) => {
  const sessionId = req.headers["mcp-session-id"] as string | undefined;
-  console.log(`Received POST message for sessionId ${sessionId}`);
  let serverTransport: Transport | undefined;
  if (!sessionId) {
    try {
-      console.log("New streamable-http connection");
+      console.log("New StreamableHttp connection request");
      try {
        serverTransport = await createTransport(req);
      } catch (error) {
@ -196,16 +190,17 @@ app.post("/mcp", async (req, res) => {
        throw error;
      }

-      console.log("Connected MCP client to server transport");
+      console.log("Created StreamableHttp server transport");

      const webAppTransport = new StreamableHTTPServerTransport({
        sessionIdGenerator: randomUUID,
        onsessioninitialized: (sessionId) => {
          webAppTransports.set(sessionId, webAppTransport);
          serverTransports.set(sessionId, serverTransport!);
-          console.log("Created streamable web app transport " + sessionId);
+          console.log("Client <-> Proxy  sessionId: " + sessionId);
        },
      });
+      console.log("Created StreamableHttp client transport");

      await webAppTransport.start();

@ -224,6 +219,7 @@ app.post("/mcp", async (req, res) => {
      res.status(500).json(error);
    }
  } else {
+    console.log(`Received POST message for sessionId ${sessionId}`);
    try {
      const transport = webAppTransports.get(
        sessionId,
@ -272,15 +268,15 @@ app.delete("/mcp", async (req, res) => {

 app.get("/stdio", async (req, res) => {
  try {
-    console.log("New connection");
+    console.log("New STDIO connection request");
    let serverTransport: Transport | undefined;
    try {
      serverTransport = await createTransport(req);
+      console.log("Created server transport");
    } catch (error) {
      if (error instanceof SseError && error.code === 401) {
        console.error(
-          "Received 401 Unauthorized from MCP server:",
-          error.message,
+          "Received 401 Unauthorized from MCP server. Authentication failure.",
        );
        res.status(401).json(error);
        return;
@ -289,31 +285,43 @@ app.get("/stdio", async (req, res) => {
      throw error;
    }

-    console.log("Connected MCP client to backing server transport");
-
    const webAppTransport = new SSEServerTransport("/message", res);
+    console.log("Created client transport");
+
    webAppTransports.set(webAppTransport.sessionId, webAppTransport);
    serverTransports.set(webAppTransport.sessionId, serverTransport);
-    console.log("Created client/server transports");

    await webAppTransport.start();

    (serverTransport as StdioClientTransport).stderr!.on("data", (chunk) => {
-      webAppTransport.send({
-        jsonrpc: "2.0",
-        method: "notifications/stderr",
-        params: {
-          content: chunk.toString(),
-        },
-      });
+      if (chunk.toString().includes("MODULE_NOT_FOUND")) {
+        webAppTransport.send({
+          jsonrpc: "2.0",
+          method: "notifications/stderr",
+          params: {
+            content: "Command not found, transports removed",
+          },
+        });
+        webAppTransport.close();
+        serverTransport.close();
+        webAppTransports.delete(webAppTransport.sessionId);
+        serverTransports.delete(webAppTransport.sessionId);
+        console.error("Command not found, transports removed");
+      } else {
+        webAppTransport.send({
+          jsonrpc: "2.0",
+          method: "notifications/stderr",
+          params: {
+            content: chunk.toString(),
+          },
+        });
+      }
    });

    mcpProxy({
      transportToClient: webAppTransport,
      transportToServer: serverTransport,
    });
-
-    console.log("Set up MCP proxy");
  } catch (error) {
    console.error("Error in /stdio route:", error);
    res.status(500).json(error);
@ -323,7 +331,7 @@ app.get("/stdio", async (req, res) => {
 app.get("/sse", async (req, res) => {
  try {
    console.log(
-      "New SSE connection. NOTE: The sse transport is deprecated and has been replaced by streamable-http",
+      "New SSE connection request. NOTE: The sse transport is deprecated and has been replaced by StreamableHttp",
    );
    let serverTransport: Transport | undefined;
    try {
@ -331,32 +339,38 @@ app.get("/sse", async (req, res) => {
    } catch (error) {
      if (error instanceof SseError && error.code === 401) {
        console.error(
-          "Received 401 Unauthorized from MCP server:",
-          error.message,
+          "Received 401 Unauthorized from MCP server. Authentication failure.",
        );
        res.status(401).json(error);
        return;
+      } else if (error instanceof SseError && error.code === 404) {
+        console.error(
+          "Received 404 not found from MCP server. Does the MCP server support SSE?",
+        );
+        res.status(404).json(error);
+        return;
+      } else if (JSON.stringify(error).includes("ECONNREFUSED")) {
+        console.error("Connection refused. Is the MCP server running?");
+        res.status(500).json(error);
+      } else {
+        throw error;
      }
-
-      throw error;
    }

-    console.log("Connected MCP client to backing server transport");
+    if (serverTransport) {
+      const webAppTransport = new SSEServerTransport("/message", res);
+      webAppTransports.set(webAppTransport.sessionId, webAppTransport);
+      console.log("Created client transport");
+      serverTransports.set(webAppTransport.sessionId, serverTransport!);
+      console.log("Created server transport");

-    const webAppTransport = new SSEServerTransport("/message", res);
-    webAppTransports.set(webAppTransport.sessionId, webAppTransport);
-    console.log("Created client transport");
-    serverTransports.set(webAppTransport.sessionId, serverTransport);
-    console.log("Created server transport");
+      await webAppTransport.start();

-    await webAppTransport.start();
-
-    mcpProxy({
-      transportToClient: webAppTransport,
-      transportToServer: serverTransport,
-    });
-
-    console.log("Set up MCP proxy");
+      mcpProxy({
+        transportToClient: webAppTransport,
+        transportToServer: serverTransport,
+      });
+    }
  } catch (error) {
    console.error("Error in /sse route:", error);
    res.status(500).json(error);
@ -366,7 +380,7 @@ app.get("/sse", async (req, res) => {
 app.post("/message", async (req, res) => {
  try {
    const sessionId = req.query.sessionId;
-    console.log(`Received message for sessionId ${sessionId}`);
+    console.log(`Received POST message for sessionId ${sessionId}`);

    const transport = webAppTransports.get(
      sessionId as string,
--- a/server/src/mcpProxy.ts
+++ b/server/src/mcpProxy.ts
@ -6,7 +6,15 @@ function onClientError(error: Error) {
 }

 function onServerError(error: Error) {
-  console.error("Error from MCP server:", error);
+  if (
+    (error?.message &&
+      error.message.includes("Error POSTing to endpoint (HTTP 404)")) ||
+    (error?.cause && JSON.stringify(error.cause).includes("ECONNREFUSED"))
+  ) {
+    console.error("Connection refused. Is the MCP server running?");
+  } else {
+    console.error("Error from MCP server:", error);
+  }
 }

 export default function mcpProxy({
@ -19,6 +27,8 @@ export default function mcpProxy({
  let transportToClientClosed = false;
  let transportToServerClosed = false;

+  let reportedServerSession = false;
+
  transportToClient.onmessage = (message) => {
    transportToServer.send(message).catch((error) => {
      // Send error response back to client if it was a request (has id) and connection is still open
@ -38,6 +48,15 @@ export default function mcpProxy({
  };

  transportToServer.onmessage = (message) => {
+    if (!reportedServerSession) {
+      if (transportToServer.sessionId) {
+        // Can only report for StreamableHttp
+        console.error(
+          "Proxy  <-> Server sessionId: " + transportToServer.sessionId,
+        );
+      }
+      reportedServerSession = true;
+    }
    transportToClient.send(message).catch(onClientError);
  };