Refactor renamed the component groups to something less obtuse:

Elements -> Groups -> Screens -> Views

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

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { InlineSamplingRequest } from "./InlineSamplingRequest";
+
+const meta: Meta<typeof InlineSamplingRequest> = {
+  title: "Groups/InlineSamplingRequest",
+  component: InlineSamplingRequest,
+  args: {
+    queuePosition: "1 of 1",
+    messagePreview:
+      "Please analyze the following code and suggest improvements for performance and readability.",
+    responseText: "",
+    onAutoRespond: fn(),
+    onEditAndSend: fn(),
+    onReject: fn(),
+    onViewDetails: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InlineSamplingRequest>;
+
+export const Default: Story = {};
+
+export const WithModelHints: Story = {
+  args: {
+    modelHints: ["claude-3-opus", "claude-3-sonnet"],
+  },
+};
+
+export const PrefilledResponse: Story = {
+  args: {
+    responseText:
+      "The code looks good overall. Consider extracting the repeated logic into a helper function.",
+  },
+};
+
+export const InQueue: Story = {
+  args: {
+    queuePosition: "2 of 3",
+  },
+};

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

@@ -0,0 +1,104 @@
+import {
+  Badge,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  Textarea,
+} from "@mantine/core";
+
+export interface InlineSamplingRequestProps {
+  queuePosition: string;
+  modelHints?: string[];
+  messagePreview: string;
+  responseText: string;
+  onAutoRespond: () => void;
+  onEditAndSend: () => void;
+  onReject: () => void;
+  onViewDetails: () => void;
+}
+
+const RequestContainer = Paper.withProps({
+  p: "md",
+  withBorder: true,
+});
+
+const QueueLabel = Text.withProps({
+  size: "xs",
+  c: "dimmed",
+});
+
+const PreviewText = Text.withProps({
+  size: "sm",
+  c: "dimmed",
+  lineClamp: 2,
+});
+
+const DetailButton = Button.withProps({
+  variant: "subtle",
+  size: "xs",
+});
+
+const ActionsRow = Group.withProps({
+  justify: "flex-end",
+  gap: "xs",
+});
+
+const CompactButton = Button.withProps({
+  size: "xs",
+  variant: "light",
+});
+
+const RejectButton = Button.withProps({
+  size: "xs",
+  variant: "light",
+  color: "red",
+});
+
+function formatModelHints(hints: string[]): string {
+  return `Model hints: ${hints.join(", ")}`;
+}
+
+export function InlineSamplingRequest({
+  queuePosition,
+  modelHints,
+  messagePreview,
+  responseText,
+  onAutoRespond,
+  onEditAndSend,
+  onReject,
+  onViewDetails,
+}: InlineSamplingRequestProps) {
+  return (
+    <RequestContainer>
+      <Stack gap="sm">
+        <Group justify="space-between">
+          <Badge color="blue">sampling/createMessage</Badge>
+          <QueueLabel>{queuePosition}</QueueLabel>
+        </Group>
+
+        {modelHints && <Text size="sm">{formatModelHints(modelHints)}</Text>}
+
+        <PreviewText>{messagePreview}</PreviewText>
+
+        <DetailButton onClick={onViewDetails}>View Details</DetailButton>
+
+        <Textarea
+          size="sm"
+          value={responseText}
+          placeholder="Response..."
+          autosize
+          minRows={2}
+          readOnly
+        />
+
+        <ActionsRow>
+          <CompactButton onClick={onAutoRespond}>Auto-respond</CompactButton>
+          <CompactButton onClick={onEditAndSend}>Edit &amp; Send</CompactButton>
+          <RejectButton onClick={onReject}>Reject</RejectButton>
+        </ActionsRow>
+      </Stack>
+    </RequestContainer>
+  );
+}