Refactor renamed the component groups to something less obtuse:

Elements -> Groups -> Screens -> Views

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

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { InlineElicitationRequest } from "./InlineElicitationRequest";
+
+const meta: Meta<typeof InlineElicitationRequest> = {
+  title: "Groups/InlineElicitationRequest",
+  component: InlineElicitationRequest,
+  args: {
+    message: "Please provide your database connection details.",
+    queuePosition: "1 of 1",
+    onChange: fn(),
+    onSubmit: fn(),
+    onCancel: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InlineElicitationRequest>;
+
+export const FormMode: Story = {
+  args: {
+    mode: "form",
+    schema: {
+      type: "object",
+      properties: {
+        host: { type: "string", title: "Host" },
+        port: { type: "integer", title: "Port" },
+        database: { type: "string", title: "Database" },
+      },
+      required: ["host", "port"],
+    },
+    values: {},
+  },
+};
+
+export const UrlMode: Story = {
+  args: {
+    mode: "url",
+    url: "https://example.com/auth/callback?session=abc123",
+    isWaiting: false,
+  },
+};
+
+export const UrlWaiting: Story = {
+  args: {
+    mode: "url",
+    url: "https://example.com/auth/callback?session=abc123",
+    isWaiting: true,
+  },
+};

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

@@ -0,0 +1,111 @@
+import {
+  Badge,
+  Button,
+  Code,
+  Group,
+  Loader,
+  Paper,
+  Stack,
+  Text,
+} from "@mantine/core";
+import type { JsonSchema } from "../SchemaForm/SchemaForm";
+import { SchemaForm } from "../SchemaForm/SchemaForm";
+
+export interface InlineElicitationRequestProps {
+  mode: "form" | "url";
+  message: string;
+  queuePosition: string;
+  schema?: JsonSchema;
+  values?: Record<string, unknown>;
+  url?: string;
+  isWaiting?: boolean;
+  onChange: (values: Record<string, unknown>) => void;
+  onSubmit: () => void;
+  onCancel: () => void;
+}
+
+const RequestContainer = Paper.withProps({
+  p: "md",
+  withBorder: true,
+});
+
+const QueueLabel = Text.withProps({
+  size: "xs",
+  c: "dimmed",
+});
+
+const ItalicMessage = Text.withProps({
+  size: "sm",
+  fs: "italic",
+});
+
+const ActionsRow = Group.withProps({
+  justify: "flex-end",
+  gap: "xs",
+});
+
+const CompactButton = Button.withProps({
+  size: "xs",
+  variant: "light",
+});
+
+function getBadgeLabel(mode: "form" | "url"): string {
+  return mode === "form"
+    ? "elicitation/create (form)"
+    : "elicitation/create (url)";
+}
+
+export function InlineElicitationRequest({
+  mode,
+  message,
+  queuePosition,
+  schema,
+  values,
+  url,
+  isWaiting,
+  onChange,
+  onSubmit,
+  onCancel,
+}: InlineElicitationRequestProps) {
+  return (
+    <RequestContainer>
+      <Stack gap="sm">
+        <Group justify="space-between">
+          <Badge color="violet">{getBadgeLabel(mode)}</Badge>
+          <QueueLabel>{queuePosition}</QueueLabel>
+        </Group>
+
+        <ItalicMessage>{message}</ItalicMessage>
+
+        {mode === "form" && schema && (
+          <SchemaForm
+            schema={schema}
+            values={values ?? {}}
+            onChange={onChange}
+          />
+        )}
+
+        {mode === "url" && url && (
+          <>
+            <Code block>{url}</Code>
+            {isWaiting && (
+              <Group>
+                <Loader size="xs" />
+                <Text size="xs">Waiting...</Text>
+              </Group>
+            )}
+          </>
+        )}
+
+        <ActionsRow>
+          <CompactButton onClick={onCancel}>Cancel</CompactButton>
+          {mode === "form" && (
+            <Button size="xs" onClick={onSubmit}>
+              Submit
+            </Button>
+          )}
+        </ActionsRow>
+      </Stack>
+    </RequestContainer>
+  );
+}