Phase 2: Refactor Tasks cluster to MCP SDK types

Replace ad hoc TaskCardProps data shape with SDK Task type across the
Tasks group components and TasksScreen.

- TaskCard: accept `task: Task` instead of flat props (taskId, status,
  method, target, progress, etc.); derive all display fields from the
  SDK Task object (taskId, status, ttl, createdAt, lastUpdatedAt,
  statusMessage); remove fields not present on SDK Task (method, target,
  progress as number, error, completedAt, elapsed)
- TaskControls: type statusFilter as `TaskStatus | undefined`; add
  runtime validation guard on Select onChange
- TaskListPanel: accept `Task[]` instead of `TaskCardProps[]`; pass
  `onCancel(taskId)` through to each TaskCard; use `task.taskId` as key
- TasksScreen: accept `Task[]` + `onCancel(taskId)` callback; type
  internal statusFilter state as `TaskStatus | undefined`
- Delete re-export of `TaskStatus` from TaskCard (import directly from
  SDK where needed)
- Update all stories with real SDK `Task` fixtures
- Update ConnectedView TasksActive story

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

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { Task } from "@modelcontextprotocol/sdk/types.js";
 import { fn } from "storybook/test";
 import { TasksScreen } from "./TasksScreen";
-import type { TaskCardProps } from "../../groups/TaskCard/TaskCard";
 
 const meta: Meta<typeof TasksScreen> = {
   title: "Screens/TasksScreen",
@@ -10,61 +10,43 @@ const meta: Meta<typeof TasksScreen> = {
   args: {
     onRefresh: fn(),
     onClearCompleted: fn(),
+    onCancel: fn(),
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof TasksScreen>;
 
-const sampleTasks: TaskCardProps[] = [
+const sampleTasks: Task[] = [
   {
     taskId: "d0b22eba71fa36229ce5c4dfadeaa7de",
     status: "working",
-    method: "tools/call",
-    target: "batch_process",
-    progress: 65,
-    progressDescription: "Processing records 650 of 1000...",
-    startedAt: "3/29/2026, 8:18:20 PM",
-    lastUpdated: "3/29/2026, 8:18:22 PM",
     ttl: 300000,
-    isListExpanded: true,
-    onCancel: fn(),
+    createdAt: "2026-03-29T20:18:20Z",
+    lastUpdatedAt: "2026-03-29T20:18:22Z",
+    statusMessage: "Processing records 650 of 1000...",
   },
   {
     taskId: "4100b5e0b0ed9cd0023330342d1bf647",
     status: "input_required",
-    method: "resources/read",
-    target: "file:///data/large-dataset.csv",
-    startedAt: "3/29/2026, 8:17:55 PM",
-    lastUpdated: "3/29/2026, 8:17:55 PM",
     ttl: 300000,
-    isListExpanded: true,
-    onCancel: fn(),
+    createdAt: "2026-03-29T20:17:55Z",
+    lastUpdatedAt: "2026-03-29T20:17:55Z",
   },
   {
     taskId: "d487b49aa39023d907b5a2a5b506cb3",
     status: "completed",
-    method: "tools/call",
-    target: "send_message",
-    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(),
+    createdAt: "2026-03-29T20:16:47Z",
+    lastUpdatedAt: "2026-03-29T20:16:49Z",
   },
   {
     taskId: "e6ebffd9cca84ddd1646d3c579a4d453",
     status: "failed",
-    method: "tools/call",
-    target: "delete_records",
-    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",
-    isListExpanded: true,
-    onCancel: fn(),
+    createdAt: "2026-03-29T20:17:27Z",
+    lastUpdatedAt: "2026-03-29T20:17:57Z",
+    statusMessage: "Timeout waiting for tool response after 30s",
   },
 ];
 

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

@@ -1,13 +1,14 @@
 import { useState } from "react";
 import { Card, Flex, Stack } from "@mantine/core";
+import type { Task, TaskStatus } from "@modelcontextprotocol/sdk/types.js";
 import { TaskControls } from "../../groups/TaskControls/TaskControls";
 import { TaskListPanel } from "../../groups/TaskListPanel/TaskListPanel";
-import type { TaskCardProps } from "../../groups/TaskCard/TaskCard";
 
 export interface TasksScreenProps {
-  tasks: TaskCardProps[];
+  tasks: Task[];
   onRefresh: () => void;
   onClearCompleted: () => void;
+  onCancel: (taskId: string) => void;
 }
 
 const ScreenLayout = Flex.withProps({
@@ -31,9 +32,10 @@ export function TasksScreen({
   tasks,
   onRefresh,
   onClearCompleted,
+  onCancel,
 }: TasksScreenProps) {
   const [searchText, setSearchText] = useState("");
-  const [statusFilter, setStatusFilter] = useState<string | undefined>();
+  const [statusFilter, setStatusFilter] = useState<TaskStatus | undefined>();
 
   return (
     <ScreenLayout>
@@ -43,9 +45,7 @@ export function TasksScreen({
             searchText={searchText}
             statusFilter={statusFilter}
             onSearchChange={setSearchText}
-            onStatusFilterChange={(value) =>
-              setStatusFilter(value || undefined)
-            }
+            onStatusFilterChange={setStatusFilter}
             onRefresh={onRefresh}
           />
         </SidebarCard>
@@ -54,6 +54,7 @@ export function TasksScreen({
         tasks={tasks}
         searchText={searchText}
         statusFilter={statusFilter}
+        onCancel={onCancel}
         onClearCompleted={onClearCompleted}
       />
     </ScreenLayout>