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.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>