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/views/ConnectedView/ConnectedView.stories.tsx

@@ -390,59 +390,55 @@ export const TasksActive: Story = {
     activeTab: "Tasks",
     children: (
       <TasksScreen
-        activeTasks={[
+        tasks={[
           {
-            taskId: "task-001",
+            taskId: "d0b22eba71fa36229ce5c4dfadeaa7de",
             status: "running",
             method: "tools/call",
             target: "batch_process",
             progress: 65,
             progressDescription: "Processing records 650 of 1000...",
-            startedAt: "2026-03-17T10:05:00Z",
-            onViewDetails: fn(),
-            onViewResult: fn(),
+            startedAt: "3/29/2026, 8:18:20 PM",
+            lastUpdated: "3/29/2026, 8:18:22 PM",
+            ttl: 300000,
+            isListExpanded: true,
             onCancel: fn(),
-            onDismiss: fn(),
           },
           {
-            taskId: "task-002",
+            taskId: "4100b5e0b0ed9cd0023330342d1bf647",
             status: "waiting",
             method: "resources/read",
             target: "file:///data/large-dataset.csv",
-            startedAt: "2026-03-17T10:06:12Z",
-            onViewDetails: fn(),
-            onViewResult: fn(),
+            startedAt: "3/29/2026, 8:17:55 PM",
+            lastUpdated: "3/29/2026, 8:17:55 PM",
+            ttl: 300000,
+            isListExpanded: true,
             onCancel: fn(),
-            onDismiss: fn(),
           },
-        ]}
-        completedTasks={[
           {
-            taskId: "task-000",
+            taskId: "d487b49aa39023d907b5a2a5b506cb3",
             status: "completed",
             method: "tools/call",
             target: "send_message",
-            startedAt: "2026-03-17T09:58:00Z",
-            completedAt: "2026-03-17T09:58:02Z",
-            elapsed: "2s",
-            onViewDetails: fn(),
-            onViewResult: fn(),
+            startedAt: "3/29/2026, 8:16:47 PM",
+            completedAt: "3/29/2026, 8:16:49 PM",
+            lastUpdated: "3/29/2026, 8:16:49 PM",
+            ttl: 300000,
+            isListExpanded: true,
             onCancel: fn(),
-            onDismiss: fn(),
           },
           {
-            taskId: "task-099",
+            taskId: "e6ebffd9cca84ddd1646d3c579a4d453",
             status: "failed",
             method: "tools/call",
             target: "delete_records",
-            startedAt: "2026-03-17T09:50:00Z",
-            completedAt: "2026-03-17T09:50:30Z",
-            elapsed: "30s",
+            startedAt: "3/29/2026, 8:17:27 PM",
+            completedAt: "3/29/2026, 8:17:57 PM",
+            lastUpdated: "3/29/2026, 8:17:57 PM",
+            ttl: 300000,
             error: "Timeout waiting for tool response after 30s",
-            onViewDetails: fn(),
-            onViewResult: fn(),
+            isListExpanded: true,
             onCancel: fn(),
-            onDismiss: fn(),
           },
         ]}
         onRefresh={fn()}