feat: add active tab system

QuantGeekDev · QuantGeekDev · commit 6b204b5d29aa · 2025-07-18T18:21:40.000+02:00
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -138,11 +138,9 @@ const App = () => {
   >([]);
   const [isAuthDebuggerVisible, setIsAuthDebuggerVisible] = useState(false);
 
-  // Auth debugger state
   const [authState, setAuthState] =
     useState<AuthDebuggerState>(EMPTY_DEBUGGER_STATE);
 
-  // Helper function to update specific auth state properties
   const updateAuthState = (updates: Partial<AuthDebuggerState>) => {
     setAuthState((prev) => ({ ...prev, ...updates }));
   };
@@ -170,6 +168,19 @@ const App = () => {
   const [nextToolCursor, setNextToolCursor] = useState<string | undefined>();
   const progressTokenRef = useRef(0);
 
+  const [activeTab, setActiveTab] = useState<string>(() => {
+    const hash = window.location.hash.slice(1);
+    const initialTab = hash || "resources";
+    return initialTab;
+  });
+
+  const currentTabRef = useRef<string>(activeTab);
+  const lastToolCallOriginTabRef = useRef<string>(activeTab);
+
+  useEffect(() => {
+    currentTabRef.current = activeTab;
+  }, [activeTab]);
+
   const { height: historyPaneHeight, handleDragStart } = useDraggablePane(300);
   const {
     width: sidebarWidth,
@@ -213,6 +224,8 @@ const App = () => {
       ]);
     },
     onElicitationRequest: (request, resolve) => {
+      const currentTab = lastToolCallOriginTabRef.current;
+
       setPendingElicitationRequests((prev) => [
         ...prev,
         {
@@ -222,16 +235,52 @@ const App = () => {
             message: request.params.message,
             requestedSchema: request.params.requestedSchema,
           },
+          originatingTab: currentTab,
           resolve,
           decline: (error: Error) => {
             console.error("Elicitation request rejected:", error);
           },
         },
       ]);
+
+      setActiveTab("elicitations");
+      window.location.hash = "elicitations";
     },
     getRoots: () => rootsRef.current,
   });
 
+  useEffect(() => {
+    if (serverCapabilities) {
+      const hash = window.location.hash.slice(1);
+
+      const validTabs = [
+        ...(serverCapabilities?.resources ? ["resources"] : []),
+        ...(serverCapabilities?.prompts ? ["prompts"] : []),
+        ...(serverCapabilities?.tools ? ["tools"] : []),
+        "ping",
+        "sampling",
+        "elicitations",
+        "roots",
+        "auth",
+      ];
+
+      const isValidTab = validTabs.includes(hash);
+
+      if (!isValidTab) {
+        const defaultTab = serverCapabilities?.resources
+          ? "resources"
+          : serverCapabilities?.prompts
+            ? "prompts"
+            : serverCapabilities?.tools
+              ? "tools"
+              : "ping";
+
+        setActiveTab(defaultTab);
+        window.location.hash = defaultTab;
+      }
+    }
+  }, [serverCapabilities]);
+
   useEffect(() => {
     localStorage.setItem("lastCommand", command);
   }, [command]);
@@ -260,7 +309,6 @@ const App = () => {
     saveInspectorConfig(CONFIG_LOCAL_STORAGE_KEY, config);
   }, [config]);
 
-  // Auto-connect to previously saved serverURL after OAuth callback
   const onOAuthConnect = useCallback(
     (serverUrl: string) => {
       setSseUrl(serverUrl);
@@ -270,7 +318,6 @@ const App = () => {
     [connectMcpServer],
   );
 
-  // Update OAuth debug state during debug callback
   const onOAuthDebugConnect = useCallback(
     async ({
       authorizationCode,
@@ -291,7 +338,6 @@ const App = () => {
       }
 
       if (restoredState && authorizationCode) {
-        // Restore the previous auth state and continue the OAuth flow
         let currentState: AuthDebuggerState = {
           ...restoredState,
           authorizationCode,
@@ -302,12 +348,10 @@ const App = () => {
         };
 
         try {
-          // Create a new state machine instance to continue the flow
           const stateMachine = new OAuthStateMachine(sseUrl, (updates) => {
             currentState = { ...currentState, ...updates };
           });
 
-          // Continue stepping through the OAuth flow from where we left off
           while (
             currentState.oauthStep !== "complete" &&
             currentState.oauthStep !== "authorization_code"
@@ -316,7 +360,6 @@ const App = () => {
           }
 
           if (currentState.oauthStep === "complete") {
-            // After the flow completes or reaches a user-input step, update the app state
             updateAuthState({
               ...currentState,
               statusMessage: {
@@ -339,7 +382,6 @@ const App = () => {
           });
         }
       } else if (authorizationCode) {
-        // Fallback to the original behavior if no state was restored
         updateAuthState({
           authorizationCode,
           oauthStep: "token_request",
@@ -349,7 +391,6 @@ const App = () => {
     [sseUrl],
   );
 
-  // Load OAuth tokens when sseUrl changes
   useEffect(() => {
     const loadOAuthTokens = async () => {
       try {
@@ -408,6 +449,18 @@ const App = () => {
     }
   }, []);
 
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(1);
+      if (hash && hash !== activeTab) {
+        setActiveTab(hash);
+      }
+    };
+
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, [activeTab]);
+
   const handleApproveSampling = (id: number, result: CreateMessageResult) => {
     setPendingSampleRequests((prev) => {
       const request = prev.find((r) => r.id === id);
@@ -430,7 +483,34 @@ const App = () => {
   ) => {
     setPendingElicitationRequests((prev) => {
       const request = prev.find((r) => r.id === id);
-      request?.resolve(response);
+      if (request) {
+        request.resolve(response);
+
+        if (request.originatingTab) {
+          const originatingTab = request.originatingTab;
+
+          const validTabs = [
+            ...(serverCapabilities?.resources ? ["resources"] : []),
+            ...(serverCapabilities?.prompts ? ["prompts"] : []),
+            ...(serverCapabilities?.tools ? ["tools"] : []),
+            "ping",
+            "sampling",
+            "elicitations",
+            "roots",
+            "auth",
+          ];
+
+          if (validTabs.includes(originatingTab)) {
+            setActiveTab(originatingTab);
+            window.location.hash = originatingTab;
+
+            setTimeout(() => {
+              setActiveTab(originatingTab);
+              window.location.hash = originatingTab;
+            }, 100);
+          }
+        }
+      }
       return prev.filter((r) => r.id !== id);
     });
   };
@@ -492,7 +572,23 @@ const App = () => {
     setNextResourceTemplateCursor(response.nextCursor);
   };
 
+  const getPrompt = async (name: string, args: Record<string, string> = {}) => {
+    lastToolCallOriginTabRef.current = currentTabRef.current;
+
+    const response = await sendMCPRequest(
+      {
+        method: "prompts/get" as const,
+        params: { name, arguments: args },
+      },
+      GetPromptResultSchema,
+      "prompts",
+    );
+    setPromptContent(JSON.stringify(response, null, 2));
+  };
+
   const readResource = async (uri: string) => {
+    lastToolCallOriginTabRef.current = currentTabRef.current;
+
     const response = await sendMCPRequest(
       {
         method: "resources/read" as const,
@@ -549,18 +645,6 @@ const App = () => {
     setNextPromptCursor(response.nextCursor);
   };
 
-  const getPrompt = async (name: string, args: Record<string, string> = {}) => {
-    const response = await sendMCPRequest(
-      {
-        method: "prompts/get" as const,
-        params: { name, arguments: args },
-      },
-      GetPromptResultSchema,
-      "prompts",
-    );
-    setPromptContent(JSON.stringify(response, null, 2));
-  };
-
   const listTools = async () => {
     const response = await sendMCPRequest(
       {
@@ -572,11 +656,12 @@ const App = () => {
     );
     setTools(response.tools);
     setNextToolCursor(response.nextCursor);
-    // Cache output schemas for validation
     cacheToolOutputSchemas(response.tools);
   };
 
   const callTool = async (name: string, params: Record<string, unknown>) => {
+    lastToolCallOriginTabRef.current = currentTabRef.current;
+
     try {
       const response = await sendMCPRequest(
         {
@@ -592,6 +677,7 @@ const App = () => {
         CompatibilityCallToolResultSchema,
         "tools",
       );
+
       setToolResult(response);
     } catch (e) {
       const toolResult: CompatibilityCallToolResult = {
@@ -626,7 +712,6 @@ const App = () => {
     setStdErrNotifications([]);
   };
 
-  // Helper component for rendering the AuthDebugger
   const AuthDebuggerWrapper = () => (
     <TabsContent value="auth">
       <AuthDebugger
@@ -638,7 +723,6 @@ const App = () => {
     </TabsContent>
   );
 
-  // Helper function to render OAuth callback components
   if (window.location.pathname === "/oauth/callback") {
     const OAuthCallback = React.lazy(
       () => import("./components/OAuthCallback"),
@@ -698,7 +782,6 @@ const App = () => {
           loggingSupported={!!serverCapabilities?.logging || false}
           clearStdErrNotifications={clearStdErrNotifications}
         />
-        {/* Drag handle for resizing sidebar */}
         <div
           onMouseDown={handleSidebarDragStart}
           style={{
@@ -719,21 +802,12 @@ const App = () => {
         <div className="flex-1 overflow-auto">
           {mcpClient ? (
             <Tabs
-              defaultValue={
-                Object.keys(serverCapabilities ?? {}).includes(
-                  window.location.hash.slice(1),
-                )
-                  ? window.location.hash.slice(1)
-                  : serverCapabilities?.resources
-                    ? "resources"
-                    : serverCapabilities?.prompts
-                      ? "prompts"
-                      : serverCapabilities?.tools
-                        ? "tools"
-                        : "ping"
-              }
+              value={activeTab}
               className="w-full p-4"
-              onValueChange={(value) => (window.location.hash = value)}
+              onValueChange={(value) => {
+                setActiveTab(value);
+                window.location.hash = value;
+              }}
             >
               <TabsList className="mb-4 py-0">
                 <TabsTrigger
@@ -895,7 +969,6 @@ const App = () => {
                       clearTools={() => {
                         setTools([]);
                         setNextToolCursor(undefined);
-                        // Clear cached output schemas
                         cacheToolOutputSchemas([]);
                       }}
                       callTool={async (name, params) => {
diff --git a/client/src/components/ElicitationTab.tsx b/client/src/components/ElicitationTab.tsx
@@ -17,6 +17,7 @@ export interface ElicitationResponse {
 export type PendingElicitationRequest = {
   id: number;
   request: ElicitationRequestData;
+  originatingTab?: string;
 };
 
 export type Props = {
