Refactor renamed the component groups to something less obtuse:

Elements -> Groups -> Screens -> Views

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

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { ElicitationFormPanel } from "./ElicitationFormPanel";
+
+const meta: Meta<typeof ElicitationFormPanel> = {
+  title: "Groups/ElicitationFormPanel",
+  component: ElicitationFormPanel,
+  args: {
+    onChange: fn(),
+    onSubmit: fn(),
+    onCancel: fn(),
+    serverName: "postgres-server",
+    message: "Please provide database connection details.",
+    values: {},
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ElicitationFormPanel>;
+
+export const SimpleForm: Story = {
+  args: {
+    schema: {
+      type: "object",
+      properties: {
+        host: { type: "string", title: "Host" },
+        port: { type: "integer", title: "Port" },
+        database: { type: "string", title: "Database" },
+      },
+      required: ["host", "port"],
+    },
+  },
+};
+
+export const WithEnums: Story = {
+  args: {
+    schema: {
+      type: "object",
+      properties: {
+        sslMode: {
+          type: "string",
+          title: "SSL Mode",
+          oneOf: [
+            { const: "disable", title: "Disable" },
+            { const: "require", title: "Require" },
+            { const: "verify-full", title: "Verify Full" },
+          ],
+        },
+      },
+    },
+  },
+};
+
+export const AllRequired: Story = {
+  args: {
+    schema: {
+      type: "object",
+      properties: {
+        host: { type: "string", title: "Host" },
+        port: { type: "integer", title: "Port" },
+        database: { type: "string", title: "Database" },
+      },
+      required: ["host", "port", "database"],
+    },
+  },
+};

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

@@ -0,0 +1,53 @@
+import { Alert, Button, Divider, Group, Stack, Text } from "@mantine/core";
+import type { JsonSchema } from "../SchemaForm/SchemaForm";
+import { SchemaForm } from "../SchemaForm/SchemaForm";
+
+export interface ElicitationFormPanelProps {
+  message: string;
+  schema: JsonSchema;
+  values: Record<string, unknown>;
+  serverName: string;
+  onChange: (values: Record<string, unknown>) => void;
+  onSubmit: () => void;
+  onCancel: () => void;
+}
+
+const QuotedMessage = Text.withProps({
+  size: "md",
+  fs: "italic",
+});
+
+function formatQuoted(text: string): string {
+  return `\u201C${text}\u201D`;
+}
+
+function formatWarning(serverName: string): string {
+  return `Only provide information you trust this server with. The server \u201C${serverName}\u201D is requesting this data.`;
+}
+
+export function ElicitationFormPanel({
+  message,
+  schema,
+  values,
+  serverName,
+  onChange,
+  onSubmit,
+  onCancel,
+}: ElicitationFormPanelProps) {
+  return (
+    <Stack gap="md">
+      <QuotedMessage>{formatQuoted(message)}</QuotedMessage>
+      <Divider />
+      <SchemaForm schema={schema} values={values} onChange={onChange} />
+      <Alert color="yellow" title="Warning">
+        {formatWarning(serverName)}
+      </Alert>
+      <Group justify="flex-end">
+        <Button variant="light" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button onClick={onSubmit}>Submit</Button>
+      </Group>
+    </Stack>
+  );
+}