Refactor renamed the component groups to something less obtuse:

Elements -> Groups -> Screens -> Views

clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { PromptsScreen } from "./PromptsScreen";
+
+const meta: Meta<typeof PromptsScreen> = {
+  title: "Screens/PromptsScreen",
+  component: PromptsScreen,
+  parameters: { layout: "fullscreen" },
+  args: {
+    onRefreshList: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PromptsScreen>;
+
+export const NoSelection: Story = {
+  args: {
+    promptForm: {
+      prompts: [
+        { name: "summarize", description: "Summarize a document" },
+        {
+          name: "translate",
+          description: "Translate text to another language",
+        },
+        { name: "code-review", description: "Review code for issues" },
+      ],
+      selectedPrompt: undefined,
+      arguments: [],
+      argumentValues: {},
+      onSelectPrompt: fn(),
+      onArgumentChange: fn(),
+      onGetPrompt: fn(),
+    },
+    messages: undefined,
+    listChanged: false,
+  },
+};
+
+export const WithResult: Story = {
+  args: {
+    promptForm: {
+      prompts: [
+        { name: "summarize", description: "Summarize a document" },
+        {
+          name: "translate",
+          description: "Translate text to another language",
+        },
+        { name: "code-review", description: "Review code for issues" },
+      ],
+      selectedPrompt: "translate",
+      arguments: [
+        { name: "text", required: true, description: "The text to translate" },
+        {
+          name: "targetLanguage",
+          required: true,
+          description: "Target language code",
+        },
+      ],
+      argumentValues: {
+        text: "Hello, how are you?",
+        targetLanguage: "es",
+      },
+      onSelectPrompt: fn(),
+      onArgumentChange: fn(),
+      onGetPrompt: fn(),
+    },
+    messages: {
+      onCopyAll: fn(),
+      messages: [
+        {
+          role: "user",
+          content:
+            'Translate the following text to Spanish: "Hello, how are you?"',
+        },
+        {
+          role: "assistant",
+          content: "Hola, como estas?",
+        },
+      ],
+    },
+    listChanged: false,
+  },
+};

clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx

@@ -0,0 +1,66 @@
+import { Card, Container, Grid, Stack, Text } from "@mantine/core";
+import { PromptArgumentsForm } from "../../groups/PromptArgumentsForm/PromptArgumentsForm";
+import { PromptMessagesDisplay } from "../../groups/PromptMessagesDisplay/PromptMessagesDisplay";
+import { ListChangedIndicator } from "../../elements/ListChangedIndicator/ListChangedIndicator";
+import type { PromptArgumentsFormProps } from "../../groups/PromptArgumentsForm/PromptArgumentsForm";
+import type { PromptMessagesDisplayProps } from "../../groups/PromptMessagesDisplay/PromptMessagesDisplay";
+
+export interface PromptsScreenProps {
+  promptForm: PromptArgumentsFormProps;
+  messages?: PromptMessagesDisplayProps;
+  listChanged: boolean;
+  onRefreshList: () => void;
+}
+
+const PageContainer = Container.withProps({
+  size: "xl",
+  py: "xl",
+});
+
+const FullHeightCard = Card.withProps({
+  withBorder: true,
+  padding: "lg",
+  h: "100%",
+});
+
+const EmptyState = Text.withProps({
+  c: "dimmed",
+  ta: "center",
+  py: "xl",
+});
+
+export function PromptsScreen({
+  promptForm,
+  messages,
+  listChanged,
+  onRefreshList,
+}: PromptsScreenProps) {
+  return (
+    <PageContainer>
+      <Grid align="stretch">
+        <Grid.Col span={5}>
+          <FullHeightCard>
+            <Stack gap="md">
+              <ListChangedIndicator
+                visible={listChanged}
+                onRefresh={onRefreshList}
+              />
+              <PromptArgumentsForm {...promptForm} />
+            </Stack>
+          </FullHeightCard>
+        </Grid.Col>
+        <Grid.Col span={7}>
+          <FullHeightCard>
+            {messages ? (
+              <PromptMessagesDisplay {...messages} />
+            ) : (
+              <EmptyState>
+                Select a prompt and click Get Prompt to see messages
+              </EmptyState>
+            )}
+          </FullHeightCard>
+        </Grid.Col>
+      </Grid>
+    </PageContainer>
+  );
+}