feat: add active tab system
This commit is contained in:
Alex Andru
parent
29678dd096
commit
6b204b5d29
2 changed files with 116 additions and 42 deletions
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ export interface ElicitationResponse {
|
|||
export type PendingElicitationRequest = {
|
||||
id: number;
|
||||
request: ElicitationRequestData;
|
||||
originatingTab?: string;
|
||||
};
|
||||
|
||||
export type Props = {
|
||||
|
|
|
|||
Loading…
Reference in a new issue