feat: add consent dialog for URL elicitation and separate Accept button

Replace the clickable URL link with a consent dialog that displays the
URL as plain text when "Open URL" is clicked, letting the user confirm
before navigating. Add a separate "Accept" button that resolves the
elicitation without the content field, per the MCP spec.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: cliffhall

client/src/components/ElicitationRequest.tsx

@@ -1,5 +1,13 @@
 import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
 import DynamicJsonForm from "./DynamicJsonForm";
 import JsonView from "./JsonView";
 import { JsonSchemaType, JsonValue } from "@/utils/jsonUtils";
@@ -22,6 +30,7 @@ const ElicitationRequest = ({
 }: ElicitationRequestProps) => {
   const [formData, setFormData] = useState<JsonValue>({});
   const [validationError, setValidationError] = useState<string | null>(null);
+  const [showUrlConfirm, setShowUrlConfirm] = useState(false);
 
   const requestData = request.request;
   const isUrlMode = requestData.mode === "url";
@@ -36,9 +45,9 @@ const ElicitationRequest = ({
   }, [isUrlMode, requestData]);
 
   if (isUrlMode) {
-    const handleOpenUrl = () => {
+    const handleConfirmOpen = () => {
       window.open(requestData.url, "_blank", "noopener,noreferrer");
-      onResolve(request.id, { action: "accept" });
+      setShowUrlConfirm(false);
     };
 
     return (
@@ -50,20 +59,18 @@ const ElicitationRequest = ({
           <div className="space-y-2">
             <h4 className="font-semibold">URL Request</h4>
             <p className="text-sm">{requestData.message}</p>
-            <a
-              href={requestData.url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-sm text-blue-600 dark:text-blue-400 underline break-all"
-            >
-              {requestData.url}
-            </a>
           </div>
         </div>
         <div className="flex space-x-2">
-          <Button type="button" onClick={handleOpenUrl}>
+          <Button type="button" onClick={() => setShowUrlConfirm(true)}>
             Open URL
           </Button>
+          <Button
+            type="button"
+            onClick={() => onResolve(request.id, { action: "accept" })}
+          >
+            Accept
+          </Button>
           <Button
             type="button"
             variant="outline"
@@ -79,6 +86,32 @@ const ElicitationRequest = ({
             Cancel
           </Button>
         </div>
+
+        <Dialog open={showUrlConfirm} onOpenChange={setShowUrlConfirm}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Open External URL</DialogTitle>
+              <DialogDescription>
+                The server is requesting you visit the following URL:
+              </DialogDescription>
+            </DialogHeader>
+            <p
+              data-testid="url-confirm-text"
+              className="text-sm font-mono bg-gray-100 dark:bg-gray-800 p-3 rounded break-all select-all"
+            >
+              {requestData.url}
+            </p>
+            <DialogFooter>
+              <Button
+                variant="outline"
+                onClick={() => setShowUrlConfirm(false)}
+              >
+                Cancel
+              </Button>
+              <Button onClick={handleConfirmOpen}>Open</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
       </div>
     );
   }

client/src/components/__tests__/ElicitationRequest.test.tsx

@@ -212,25 +212,23 @@ describe("ElicitationRequest", () => {
       },
     });
 
-    it("should render URL mode request with link and message", () => {
+    it("should render URL mode request with message but no clickable link", () => {
       renderElicitationRequest(createUrlRequest());
       expect(screen.getByTestId("elicitation-request")).toBeInTheDocument();
       expect(
         screen.getByText("Please complete authentication"),
       ).toBeInTheDocument();
-      const link = screen.getByRole("link", {
-        name: "https://example.com/auth",
-      });
-      expect(link).toHaveAttribute("href", "https://example.com/auth");
-      expect(link).toHaveAttribute("target", "_blank");
-      expect(link).toHaveAttribute("rel", "noopener noreferrer");
+      expect(screen.queryByRole("link")).not.toBeInTheDocument();
     });
 
-    it("should render Open URL, Decline, and Cancel buttons", () => {
+    it("should render Open URL, Accept, Decline, and Cancel buttons", () => {
       renderElicitationRequest(createUrlRequest());
       expect(
         screen.getByRole("button", { name: /open url/i }),
       ).toBeInTheDocument();
+      expect(
+        screen.getByRole("button", { name: /accept/i }),
+      ).toBeInTheDocument();
       expect(
         screen.getByRole("button", { name: /decline/i }),
       ).toBeInTheDocument();
@@ -244,7 +242,20 @@ describe("ElicitationRequest", () => {
       expect(screen.queryByTestId("dynamic-json-form")).not.toBeInTheDocument();
     });
 
-    it("should call window.open and resolve with accept when Open URL is clicked", async () => {
+    it("should show consent dialog with URL as text when Open URL is clicked", async () => {
+      renderElicitationRequest(createUrlRequest());
+
+      await act(async () => {
+        fireEvent.click(screen.getByRole("button", { name: /open url/i }));
+      });
+
+      expect(screen.getByTestId("url-confirm-text")).toHaveTextContent(
+        "https://example.com/auth",
+      );
+      expect(screen.getByText("Open External URL")).toBeInTheDocument();
+    });
+
+    it("should open URL when confirmed in consent dialog", async () => {
       const windowOpenSpy = jest
         .spyOn(window, "open")
         .mockImplementation(() => null);
@@ -254,15 +265,55 @@ describe("ElicitationRequest", () => {
         fireEvent.click(screen.getByRole("button", { name: /open url/i }));
       });
 
+      await act(async () => {
+        fireEvent.click(screen.getByRole("button", { name: /^open$/i }));
+      });
+
       expect(windowOpenSpy).toHaveBeenCalledWith(
         "https://example.com/auth",
         "_blank",
         "noopener,noreferrer",
       );
-      expect(mockOnResolve).toHaveBeenCalledWith(2, { action: "accept" });
+      expect(mockOnResolve).not.toHaveBeenCalled();
+      windowOpenSpy.mockRestore();
+    });
+
+    it("should close consent dialog without opening URL when cancelled", async () => {
+      const windowOpenSpy = jest
+        .spyOn(window, "open")
+        .mockImplementation(() => null);
+      renderElicitationRequest(createUrlRequest());
+
+      await act(async () => {
+        fireEvent.click(screen.getByRole("button", { name: /open url/i }));
+      });
+
+      expect(screen.getByTestId("url-confirm-text")).toBeInTheDocument();
+
+      await act(async () => {
+        // The Cancel button inside the dialog
+        const dialogButtons = screen.getAllByRole("button", {
+          name: /cancel/i,
+        });
+        fireEvent.click(dialogButtons[dialogButtons.length - 1]);
+      });
+
+      expect(windowOpenSpy).not.toHaveBeenCalled();
+      expect(mockOnResolve).not.toHaveBeenCalled();
       windowOpenSpy.mockRestore();
     });
 
+    it("should resolve with accept and no content when Accept is clicked", async () => {
+      renderElicitationRequest(createUrlRequest());
+
+      await act(async () => {
+        fireEvent.click(screen.getByRole("button", { name: /accept/i }));
+      });
+
+      expect(mockOnResolve).toHaveBeenCalledWith(2, { action: "accept" });
+      expect(mockOnResolve.mock.calls[0][1]).not.toHaveProperty("content");
+    });
+
     it("should resolve with decline when Decline is clicked", async () => {
       renderElicitationRequest(createUrlRequest());
 

client/src/components/__tests__/ElicitationTab.test.tsx

@@ -63,8 +63,6 @@ describe("Elicitation tab", () => {
     ]);
     expect(screen.getAllByTestId("elicitation-request").length).toBe(1);
     expect(screen.getByText("Please authenticate")).toBeTruthy();
-    expect(
-      screen.getByRole("link", { name: "https://example.com/auth" }),
-    ).toBeTruthy();
+    expect(screen.getByRole("button", { name: /open url/i })).toBeTruthy();
   });
 });