Refactor renamed the component groups to something less obtuse:

Elements -> Groups -> Screens -> Views

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

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { TasksScreen } from "./TasksScreen";
+import type { TaskCardProps } from "../../groups/TaskCard/TaskCard";
+
+const meta: Meta<typeof TasksScreen> = {
+  title: "Screens/TasksScreen",
+  component: TasksScreen,
+  parameters: { layout: "fullscreen" },
+  args: {
+    onRefresh: fn(),
+    onClearHistory: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TasksScreen>;
+
+const activeTask1: TaskCardProps = {
+  taskId: "task-001",
+  status: "running",
+  method: "tools/call",
+  target: "send_message",
+  progress: 45,
+  progressDescription: "Sending message to remote server...",
+  startedAt: "2026-03-17T10:00:00Z",
+  onViewDetails: fn(),
+  onViewResult: fn(),
+  onCancel: fn(),
+  onDismiss: fn(),
+};
+
+const activeTask2: TaskCardProps = {
+  taskId: "task-002",
+  status: "waiting",
+  method: "resources/read",
+  target: "config.json",
+  startedAt: "2026-03-17T10:01:00Z",
+  onViewDetails: fn(),
+  onViewResult: fn(),
+  onCancel: fn(),
+  onDismiss: fn(),
+};
+
+const completedTask1: TaskCardProps = {
+  taskId: "task-003",
+  status: "completed",
+  method: "tools/call",
+  target: "list_users",
+  startedAt: "2026-03-17T09:50:00Z",
+  completedAt: "2026-03-17T09:50:02Z",
+  elapsed: "2.1s",
+  onViewDetails: fn(),
+  onViewResult: fn(),
+  onCancel: fn(),
+  onDismiss: fn(),
+};
+
+const completedTask2: TaskCardProps = {
+  taskId: "task-004",
+  status: "failed",
+  method: "tools/call",
+  target: "delete_records",
+  startedAt: "2026-03-17T09:45:00Z",
+  completedAt: "2026-03-17T09:45:01Z",
+  elapsed: "0.8s",
+  error: "Permission denied: insufficient privileges",
+  onViewDetails: fn(),
+  onViewResult: fn(),
+  onCancel: fn(),
+  onDismiss: fn(),
+};
+
+export const Mixed: Story = {
+  args: {
+    activeTasks: [activeTask1, activeTask2],
+    completedTasks: [completedTask1, completedTask2],
+  },
+};
+
+export const ActiveOnly: Story = {
+  args: {
+    activeTasks: [activeTask1, activeTask2],
+    completedTasks: [],
+  },
+};
+
+export const CompletedOnly: Story = {
+  args: {
+    activeTasks: [],
+    completedTasks: [completedTask1, completedTask2],
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    activeTasks: [],
+    completedTasks: [],
+  },
+};

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

@@ -0,0 +1,88 @@
+import {
+  Button,
+  Container,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { TaskCard } from "../../groups/TaskCard/TaskCard";
+import type { TaskCardProps } from "../../groups/TaskCard/TaskCard";
+
+export interface TasksScreenProps {
+  activeTasks: TaskCardProps[];
+  completedTasks: TaskCardProps[];
+  onRefresh: () => void;
+  onClearHistory: () => void;
+}
+
+const PageContainer = Container.withProps({
+  size: "xl",
+  py: "xl",
+});
+
+const ContentPanel = Paper.withProps({
+  withBorder: true,
+  p: "md",
+});
+
+const CompactButton = Button.withProps({
+  variant: "light",
+  size: "xs",
+});
+
+function formatSectionTitle(label: string, count: number): string {
+  return `${label} (${count})`;
+}
+
+export function TasksScreen({
+  activeTasks,
+  completedTasks,
+  onRefresh,
+  onClearHistory,
+}: TasksScreenProps) {
+  return (
+    <PageContainer>
+      <ContentPanel>
+        <Stack gap="lg">
+          <Group justify="space-between">
+            <Title order={4}>
+              {formatSectionTitle("Active Tasks", activeTasks.length)}
+            </Title>
+            <CompactButton onClick={onRefresh}>Refresh Tasks</CompactButton>
+          </Group>
+          {activeTasks.length === 0 ? (
+            <Text c="dimmed">No active tasks</Text>
+          ) : (
+            <Stack gap="md">
+              {activeTasks.map((task) => (
+                <TaskCard key={task.taskId} {...task} />
+              ))}
+            </Stack>
+          )}
+
+          <Group justify="space-between">
+            <Title order={4}>
+              {formatSectionTitle("Completed Tasks", completedTasks.length)}
+            </Title>
+            {completedTasks.length > 0 && (
+              <CompactButton onClick={onClearHistory}>
+                Clear History
+              </CompactButton>
+            )}
+          </Group>
+          {completedTasks.length === 0 ? (
+            <Text c="dimmed">No completed tasks</Text>
+          ) : (
+            <Stack gap="md">
+              {completedTasks.map((task) => (
+                <TaskCard key={task.taskId} {...task} />
+              ))}
+            </Stack>
+          )}
+        </Stack>
+      </ContentPanel>
+    </PageContainer>
+  );
+}