Redesign Tasks screen: expandable TaskCard, sidebar controls, and list panel

- Redesign TaskCard to match v1 Task Details panel layout:
  header with task ID + status badge + cancel button,
  always-visible summary row (Status, Last Updated, Created At, TTL)
  with Expand/Collapse button, expandable section with status message,
  progress bar, error, and Full Task Object JSON viewer
- Add TaskControls group: search input + status filter dropdown +
  Refresh/Clear History buttons (mirrors HistoryControls pattern)
- Add TaskListPanel group: scrollable panel with ListToggle for
  expand/collapse all, splits tasks into Active/Completed sections
  with counts, filters by search text and status
- Refactor TasksScreen to sidebar + panel layout matching HistoryScreen:
  manages search/filter state internally, flat tasks array
- Simplify TaskCard callbacks to just onCancel
- Extract named .withProps() subcomponents (HeaderLeftGroup,
  HeaderRightGroup, SectionTitle, SummaryRow, DetailRow) for
  AGENTS.md compliance
- Update all stories (TaskCard, TaskControls, TaskListPanel,
  TasksScreen, ConnectedView)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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

@@ -1,88 +1,61 @@
-import {
-  Button,
-  Container,
-  Group,
-  Paper,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import { TaskCard } from "../../groups/TaskCard/TaskCard";
+import { useState } from "react";
+import { Card, Flex, Stack } from "@mantine/core";
+import { TaskControls } from "../../groups/TaskControls/TaskControls";
+import { TaskListPanel } from "../../groups/TaskListPanel/TaskListPanel";
 import type { TaskCardProps } from "../../groups/TaskCard/TaskCard";
 
 export interface TasksScreenProps {
-  activeTasks: TaskCardProps[];
-  completedTasks: TaskCardProps[];
+  tasks: TaskCardProps[];
   onRefresh: () => void;
   onClearHistory: () => void;
 }
 
-const PageContainer = Container.withProps({
-  size: "xl",
-  py: "xl",
+const ScreenLayout = Flex.withProps({
+  variant: "screen",
+  h: "calc(100vh - var(--app-shell-header-height, 0px))",
+  gap: "xl",
+  p: "xl",
 });
 
-const ContentPanel = Paper.withProps({
+const Sidebar = Stack.withProps({
+  w: 280,
+  flex: "0 0 auto",
+});
+
+const SidebarCard = Card.withProps({
   withBorder: true,
-  p: "md",
+  padding: "lg",
 });
 
-const CompactButton = Button.withProps({
-  variant: "light",
-  size: "xs",
-});
-
-function formatSectionTitle(label: string, count: number): string {
-  return `${label} (${count})`;
-}
-
 export function TasksScreen({
-  activeTasks,
-  completedTasks,
+  tasks,
   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>
-          )}
+  const [searchText, setSearchText] = useState("");
+  const [statusFilter, setStatusFilter] = useState<string | undefined>();
 
-          <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>
+  return (
+    <ScreenLayout>
+      <Sidebar>
+        <SidebarCard>
+          <TaskControls
+            searchText={searchText}
+            statusFilter={statusFilter}
+            onSearchChange={setSearchText}
+            onStatusFilterChange={(value) =>
+              setStatusFilter(value || undefined)
+            }
+            onRefresh={onRefresh}
+            onClearHistory={onClearHistory}
+          />
+        </SidebarCard>
+      </Sidebar>
+      <TaskListPanel
+        tasks={tasks}
+        searchText={searchText}
+        statusFilter={statusFilter}
+      />
+    </ScreenLayout>
   );
 }