Refactor renamed the component groups to something less obtuse:

Elements -> Groups -> Screens -> Views

clients/web/src/components/groups/ElicitationUrlPanel/ElicitationUrlPanel.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { ElicitationUrlPanel } from "./ElicitationUrlPanel";
+
+const meta: Meta<typeof ElicitationUrlPanel> = {
+  title: "Groups/ElicitationUrlPanel",
+  component: ElicitationUrlPanel,
+  args: {
+    onCopyUrl: fn(),
+    onOpenInBrowser: fn(),
+    onCancel: fn(),
+    message: "Please authenticate with the external service.",
+    elicitationId: "elicit-abc-123",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ElicitationUrlPanel>;
+
+export const Waiting: Story = {
+  args: {
+    url: "https://auth.example.com/oauth/authorize?client_id=mcp-inspector&redirect_uri=http://localhost:3000/callback",
+    isWaiting: true,
+  },
+};
+
+export const WithLongUrl: Story = {
+  args: {
+    url: "https://auth.example.com/oauth/authorize?client_id=mcp-inspector&redirect_uri=http://localhost:3000/callback&scope=read+write+admin&state=xyzzy-12345&nonce=abcdef-67890&response_type=code&code_challenge=E9Melhoa2OwvFrEMTJguCHaoeK1t8URWbuGJSstw-cM&code_challenge_method=S256",
+    isWaiting: true,
+  },
+};
+
+export const Completed: Story = {
+  args: {
+    url: "https://auth.example.com/oauth/authorize?client_id=mcp-inspector",
+    isWaiting: false,
+  },
+};

clients/web/src/components/groups/ElicitationUrlPanel/ElicitationUrlPanel.tsx

@@ -0,0 +1,87 @@
+import {
+  Alert,
+  Button,
+  Code,
+  Divider,
+  Group,
+  Loader,
+  Stack,
+  Text,
+} from "@mantine/core";
+
+export interface ElicitationUrlPanelProps {
+  message: string;
+  url: string;
+  elicitationId: string;
+  isWaiting: boolean;
+  onCopyUrl: () => void;
+  onOpenInBrowser: () => void;
+  onCancel: () => void;
+}
+
+const ItalicMessage = Text.withProps({
+  size: "md",
+  fs: "italic",
+});
+
+const WrappingCode = Code.withProps({
+  block: true,
+  variant: "wrapping",
+});
+
+const HintText = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+});
+
+const MetaText = Text.withProps({
+  size: "xs",
+  c: "dimmed",
+});
+
+function formatElicitationId(id: string): string {
+  return `Elicitation ID: ${id}`;
+}
+
+export function ElicitationUrlPanel({
+  message,
+  url,
+  elicitationId,
+  isWaiting,
+  onCopyUrl,
+  onOpenInBrowser,
+  onCancel,
+}: ElicitationUrlPanelProps) {
+  return (
+    <Stack gap="md">
+      <ItalicMessage>{message}</ItalicMessage>
+      <Divider />
+      <Text size="sm">The server is requesting you visit:</Text>
+      <WrappingCode>{url}</WrappingCode>
+      <Group>
+        <Button variant="light" onClick={onCopyUrl}>
+          Copy URL
+        </Button>
+        <Button variant="light" onClick={onOpenInBrowser}>
+          Open in Browser
+        </Button>
+      </Group>
+      <Divider />
+      {isWaiting && (
+        <Group>
+          <Loader size="sm" />
+          <HintText>Waiting for completion...</HintText>
+        </Group>
+      )}
+      <MetaText>{formatElicitationId(elicitationId)}</MetaText>
+      <Alert color="yellow" title="Warning">
+        This will open an external URL. Verify the domain before proceeding.
+      </Alert>
+      <Group justify="flex-end">
+        <Button variant="light" onClick={onCancel}>
+          Cancel
+        </Button>
+      </Group>
+    </Stack>
+  );
+}