6abb39a5fe
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>
62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
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";
|
|
|
|
export interface TasksScreenProps {
|
|
tasks: Task[];
|
|
onRefresh: () => void;
|
|
onClearCompleted: () => void;
|
|
onCancel: (taskId: string) => void;
|
|
}
|
|
|
|
const ScreenLayout = Flex.withProps({
|
|
variant: "screen",
|
|
h: "calc(100vh - var(--app-shell-header-height, 0px))",
|
|
gap: "md",
|
|
p: "xl",
|
|
});
|
|
|
|
const Sidebar = Stack.withProps({
|
|
w: 340,
|
|
flex: "0 0 auto",
|
|
});
|
|
|
|
const SidebarCard = Card.withProps({
|
|
withBorder: true,
|
|
padding: "lg",
|
|
});
|
|
|
|
export function TasksScreen({
|
|
tasks,
|
|
onRefresh,
|
|
onClearCompleted,
|
|
onCancel,
|
|
}: TasksScreenProps) {
|
|
const [searchText, setSearchText] = useState("");
|
|
const [statusFilter, setStatusFilter] = useState<TaskStatus | undefined>();
|
|
|
|
return (
|
|
<ScreenLayout>
|
|
<Sidebar>
|
|
<SidebarCard>
|
|
<TaskControls
|
|
searchText={searchText}
|
|
statusFilter={statusFilter}
|
|
onSearchChange={setSearchText}
|
|
onStatusFilterChange={setStatusFilter}
|
|
onRefresh={onRefresh}
|
|
/>
|
|
</SidebarCard>
|
|
</Sidebar>
|
|
<TaskListPanel
|
|
tasks={tasks}
|
|
searchText={searchText}
|
|
statusFilter={statusFilter}
|
|
onCancel={onCancel}
|
|
onClearCompleted={onClearCompleted}
|
|
/>
|
|
</ScreenLayout>
|
|
);
|
|
}
|