Merge pull request #1217 from modelcontextprotocol/v2/phase-2-tasks
Phase 2: Refactor Tasks cluster to MCP SDK types
This commit is contained in:
Cliff Hall
GitHub
commit
0db955ea7e
8 changed files with 197 additions and 276 deletions
|
|
@ -1,4 +1,5 @@
|
|||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import type { Task } from "@modelcontextprotocol/sdk/types.js";
|
||||
import { fn } from "storybook/test";
|
||||
import { TaskCard } from "./TaskCard";
|
||||
|
||||
|
|
@ -14,84 +15,78 @@ const meta: Meta<typeof TaskCard> = {
|
|||
export default meta;
|
||||
type Story = StoryObj<typeof TaskCard>;
|
||||
|
||||
const workingTask: Task = {
|
||||
taskId: "d0b22eba71fa36229ce5c4dfadeaa7de",
|
||||
status: "working",
|
||||
ttl: 300000,
|
||||
createdAt: "2026-03-29T20:18:20Z",
|
||||
lastUpdatedAt: "2026-03-29T20:18:22Z",
|
||||
statusMessage: "Synthesizing findings...",
|
||||
};
|
||||
|
||||
const inputRequiredTask: Task = {
|
||||
taskId: "4100b5e0b0ed9cd0023330342d1bf647",
|
||||
status: "input_required",
|
||||
ttl: 300000,
|
||||
createdAt: "2026-03-29T20:17:55Z",
|
||||
lastUpdatedAt: "2026-03-29T20:17:55Z",
|
||||
statusMessage: "Waiting for user confirmation",
|
||||
};
|
||||
|
||||
const completedTask: Task = {
|
||||
taskId: "d487b49aa39023d907b5a2a5b506cb3",
|
||||
status: "completed",
|
||||
ttl: 300000,
|
||||
createdAt: "2026-03-29T20:16:47Z",
|
||||
lastUpdatedAt: "2026-03-29T20:16:51Z",
|
||||
statusMessage: "Report generated successfully",
|
||||
};
|
||||
|
||||
const failedTask: Task = {
|
||||
taskId: "e6ebffd9cca84ddd1646d3c579a4d453",
|
||||
status: "failed",
|
||||
ttl: 300000,
|
||||
createdAt: "2026-03-29T20:17:27Z",
|
||||
lastUpdatedAt: "2026-03-29T20:17:28Z",
|
||||
statusMessage:
|
||||
"Connection refused: upstream server not responding after 3 retries",
|
||||
};
|
||||
|
||||
const cancelledTask: Task = {
|
||||
taskId: "c416bc183cb04468d3f81696f1b868f6",
|
||||
status: "cancelled",
|
||||
ttl: 300000,
|
||||
createdAt: "2026-03-29T20:18:15Z",
|
||||
lastUpdatedAt: "2026-03-29T20:18:18Z",
|
||||
};
|
||||
|
||||
export const Working: Story = {
|
||||
args: {
|
||||
taskId: "d0b22eba71fa36229ce5c4dfadeaa7de",
|
||||
status: "working",
|
||||
method: "tools/call",
|
||||
target: "generate_report",
|
||||
progress: 80,
|
||||
progressDescription: "Synthesizing findings...",
|
||||
startedAt: "3/29/2026, 8:18:20 PM",
|
||||
lastUpdated: "3/29/2026, 8:18:22 PM",
|
||||
ttl: 300000,
|
||||
task: workingTask,
|
||||
progress: {
|
||||
progress: 650,
|
||||
total: 1000,
|
||||
message: "Processing records 650 of 1000...",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const InputRequired: Story = {
|
||||
args: {
|
||||
taskId: "4100b5e0b0ed9cd0023330342d1bf647",
|
||||
status: "input_required",
|
||||
method: "resources/read",
|
||||
target: "file:///data/report.csv",
|
||||
startedAt: "3/29/2026, 8:17:55 PM",
|
||||
lastUpdated: "3/29/2026, 8:17:55 PM",
|
||||
ttl: 300000,
|
||||
},
|
||||
args: { task: inputRequiredTask },
|
||||
};
|
||||
|
||||
export const Completed: Story = {
|
||||
args: {
|
||||
taskId: "d487b49aa39023d907b5a2a5b506cb3",
|
||||
status: "completed",
|
||||
method: "tools/call",
|
||||
target: "generate_summary",
|
||||
startedAt: "3/29/2026, 8:16:47 PM",
|
||||
completedAt: "3/29/2026, 8:16:51 PM",
|
||||
lastUpdated: "3/29/2026, 8:16:51 PM",
|
||||
ttl: 300000,
|
||||
progressDescription: "Generating report...",
|
||||
},
|
||||
args: { task: completedTask },
|
||||
};
|
||||
|
||||
export const Failed: Story = {
|
||||
args: {
|
||||
taskId: "e6ebffd9cca84ddd1646d3c579a4d453",
|
||||
status: "failed",
|
||||
method: "tools/call",
|
||||
target: "fetch_remote_data",
|
||||
startedAt: "3/29/2026, 8:17:27 PM",
|
||||
completedAt: "3/29/2026, 8:17:28 PM",
|
||||
lastUpdated: "3/29/2026, 8:17:28 PM",
|
||||
ttl: 300000,
|
||||
error: "Connection refused: upstream server not responding after 3 retries",
|
||||
},
|
||||
args: { task: failedTask },
|
||||
};
|
||||
|
||||
export const Cancelled: Story = {
|
||||
args: {
|
||||
taskId: "c416bc183cb04468d3f81696f1b868f6",
|
||||
status: "cancelled",
|
||||
method: "tools/call",
|
||||
target: "long_running_analysis",
|
||||
startedAt: "3/29/2026, 8:18:15 PM",
|
||||
completedAt: "3/29/2026, 8:18:18 PM",
|
||||
lastUpdated: "3/29/2026, 8:18:18 PM",
|
||||
ttl: 300000,
|
||||
},
|
||||
args: { task: cancelledTask },
|
||||
};
|
||||
|
||||
export const Collapsed: Story = {
|
||||
args: {
|
||||
taskId: "d0b22eba71fa36229ce5c4dfadeaa7de",
|
||||
status: "working",
|
||||
method: "tools/call",
|
||||
target: "generate_report",
|
||||
progress: 80,
|
||||
progressDescription: "Synthesizing findings...",
|
||||
startedAt: "3/29/2026, 8:18:20 PM",
|
||||
lastUpdated: "3/29/2026, 8:18:22 PM",
|
||||
ttl: 300000,
|
||||
isListExpanded: false,
|
||||
},
|
||||
args: { task: workingTask, isListExpanded: false },
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,26 +8,22 @@ import {
|
|||
Stack,
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import type {
|
||||
ProgressNotification,
|
||||
Task,
|
||||
} from "@modelcontextprotocol/sdk/types.js";
|
||||
import { ContentViewer } from "../../elements/ContentViewer/ContentViewer";
|
||||
import { ProgressDisplay } from "../../elements/ProgressDisplay/ProgressDisplay";
|
||||
import { TaskStatusBadge } from "../../elements/TaskStatusBadge/TaskStatusBadge";
|
||||
|
||||
import type { TaskStatus } from "@modelcontextprotocol/sdk/types.js";
|
||||
export type { TaskStatus };
|
||||
export type TaskProgress = Pick<
|
||||
ProgressNotification["params"],
|
||||
"progress" | "total" | "message"
|
||||
>;
|
||||
|
||||
export interface TaskCardProps {
|
||||
taskId: string;
|
||||
status: TaskStatus;
|
||||
method: string;
|
||||
target?: string;
|
||||
progress?: number;
|
||||
progressDescription?: string;
|
||||
startedAt?: string;
|
||||
completedAt?: string;
|
||||
lastUpdated?: string;
|
||||
elapsed?: string;
|
||||
ttl?: number;
|
||||
error?: string;
|
||||
task: Task;
|
||||
progress?: TaskProgress;
|
||||
isListExpanded: boolean;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
|
@ -63,11 +59,6 @@ const StatusMessageText = Text.withProps({
|
|||
fs: "italic",
|
||||
});
|
||||
|
||||
const ErrorText = Text.withProps({
|
||||
size: "sm",
|
||||
c: "red",
|
||||
});
|
||||
|
||||
const SubtleButton = Button.withProps({
|
||||
variant: "subtle",
|
||||
size: "xs",
|
||||
|
|
@ -110,37 +101,13 @@ function formatTtl(ttl: number): string {
|
|||
return `${ttl}ms`;
|
||||
}
|
||||
|
||||
function buildTaskObject(props: TaskCardProps): string {
|
||||
const obj: Record<string, unknown> = {
|
||||
taskId: props.taskId,
|
||||
status: props.status,
|
||||
method: props.method,
|
||||
};
|
||||
if (props.target) obj.target = props.target;
|
||||
if (props.ttl !== undefined) obj.ttl = props.ttl;
|
||||
if (props.startedAt) obj.createdAt = props.startedAt;
|
||||
if (props.lastUpdated) obj.lastUpdatedAt = props.lastUpdated;
|
||||
if (props.completedAt) obj.completedAt = props.completedAt;
|
||||
if (props.progress !== undefined) obj.progress = props.progress;
|
||||
if (props.progressDescription) obj.statusMessage = props.progressDescription;
|
||||
if (props.error) obj.error = props.error;
|
||||
return JSON.stringify(obj);
|
||||
}
|
||||
|
||||
export function TaskCard(props: TaskCardProps) {
|
||||
const {
|
||||
taskId,
|
||||
status,
|
||||
progress,
|
||||
progressDescription,
|
||||
startedAt,
|
||||
lastUpdated,
|
||||
ttl,
|
||||
error,
|
||||
isListExpanded,
|
||||
onCancel,
|
||||
} = props;
|
||||
|
||||
export function TaskCard({
|
||||
task,
|
||||
progress,
|
||||
isListExpanded,
|
||||
onCancel,
|
||||
}: TaskCardProps) {
|
||||
const { taskId, status, ttl, createdAt, lastUpdatedAt, statusMessage } = task;
|
||||
const [isExpanded, setIsExpanded] = useState(isListExpanded);
|
||||
const isActive = status === "working" || status === "input_required";
|
||||
|
||||
|
|
@ -167,22 +134,14 @@ export function TaskCard(props: TaskCardProps) {
|
|||
<SummaryRow>
|
||||
<DetailRow>
|
||||
<Stack gap={2}>
|
||||
<DetailLabel>Status</DetailLabel>
|
||||
<DetailValue>{status}</DetailValue>
|
||||
<DetailLabel>Last Updated</DetailLabel>
|
||||
<DetailValue>{lastUpdatedAt}</DetailValue>
|
||||
</Stack>
|
||||
{lastUpdated && (
|
||||
<Stack gap={2}>
|
||||
<DetailLabel>Last Updated</DetailLabel>
|
||||
<DetailValue>{lastUpdated}</DetailValue>
|
||||
</Stack>
|
||||
)}
|
||||
{startedAt && (
|
||||
<Stack gap={2}>
|
||||
<DetailLabel>Created At</DetailLabel>
|
||||
<DetailValue>{startedAt}</DetailValue>
|
||||
</Stack>
|
||||
)}
|
||||
{ttl !== undefined && (
|
||||
<Stack gap={2}>
|
||||
<DetailLabel>Created At</DetailLabel>
|
||||
<DetailValue>{createdAt}</DetailValue>
|
||||
</Stack>
|
||||
{ttl != null && (
|
||||
<Stack gap={2}>
|
||||
<DetailLabel>TTL</DetailLabel>
|
||||
<DetailValue>{formatTtl(ttl)}</DetailValue>
|
||||
|
|
@ -194,41 +153,24 @@ export function TaskCard(props: TaskCardProps) {
|
|||
</SubtleButton>
|
||||
</SummaryRow>
|
||||
|
||||
{progress !== undefined && isActive && (
|
||||
<ProgressDisplay
|
||||
params={{
|
||||
progress,
|
||||
message: progressDescription,
|
||||
}}
|
||||
/>
|
||||
{progress && isActive ? (
|
||||
<ProgressDisplay params={progress} />
|
||||
) : (
|
||||
statusMessage && (
|
||||
<StatusMessageText>{statusMessage}</StatusMessageText>
|
||||
)
|
||||
)}
|
||||
|
||||
{isExpanded && (
|
||||
<Collapse in={isExpanded}>
|
||||
<Stack gap="sm">
|
||||
{progressDescription && !isActive && (
|
||||
<Stack gap={2}>
|
||||
<DetailLabel>Status Message</DetailLabel>
|
||||
<StatusMessageText>{progressDescription}</StatusMessageText>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Stack gap={2}>
|
||||
<DetailLabel>Error</DetailLabel>
|
||||
<ErrorText>{error}</ErrorText>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
<SectionTitle>Full Task Object</SectionTitle>
|
||||
<ContentViewer
|
||||
block={{ type: "text", text: buildTaskObject(props) }}
|
||||
copyable
|
||||
/>
|
||||
</Stack>
|
||||
</Collapse>
|
||||
)}
|
||||
<Collapse in={isExpanded}>
|
||||
<Stack gap="sm">
|
||||
<Divider />
|
||||
<SectionTitle>Full Task Object</SectionTitle>
|
||||
<ContentViewer
|
||||
block={{ type: "text", text: JSON.stringify(task) }}
|
||||
copyable
|
||||
/>
|
||||
</Stack>
|
||||
</Collapse>
|
||||
</Stack>
|
||||
</TaskContainer>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@ const ToolbarButton = Button.withProps({
|
|||
|
||||
export interface TaskControlsProps {
|
||||
searchText: string;
|
||||
statusFilter?: string;
|
||||
statusFilter?: TaskStatus;
|
||||
onSearchChange: (text: string) => void;
|
||||
onStatusFilterChange: (status: string) => void;
|
||||
onStatusFilterChange: (status: TaskStatus | undefined) => void;
|
||||
onRefresh: () => void;
|
||||
}
|
||||
|
||||
|
|
@ -47,7 +47,13 @@ export function TaskControls({
|
|||
placeholder="All statuses"
|
||||
data={STATUS_OPTIONS}
|
||||
value={statusFilter ?? null}
|
||||
onChange={(value) => onStatusFilterChange(value ?? "")}
|
||||
onChange={(value) =>
|
||||
onStatusFilterChange(
|
||||
value && STATUS_OPTIONS.includes(value as TaskStatus)
|
||||
? (value as TaskStatus)
|
||||
: undefined,
|
||||
)
|
||||
}
|
||||
clearable
|
||||
/>
|
||||
</Stack>
|
||||
|
|
|
|||
|
|
@ -1,57 +1,39 @@
|
|||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import type { Task } from "@modelcontextprotocol/sdk/types.js";
|
||||
import { fn } from "storybook/test";
|
||||
import { TaskListPanel } from "./TaskListPanel";
|
||||
import type { TaskCardProps } from "../TaskCard/TaskCard";
|
||||
|
||||
const sampleTasks: TaskCardProps[] = [
|
||||
const sampleTasks: Task[] = [
|
||||
{
|
||||
taskId: "d0b22eba71fa36229ce5c4dfadeaa7de",
|
||||
status: "working",
|
||||
method: "tools/call",
|
||||
target: "generate_report",
|
||||
progress: 80,
|
||||
progressDescription: "Synthesizing findings...",
|
||||
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: "Synthesizing findings...",
|
||||
},
|
||||
{
|
||||
taskId: "4100b5e0b0ed9cd0023330342d1bf647",
|
||||
status: "input_required",
|
||||
method: "resources/read",
|
||||
target: "file:///data/report.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: "generate_summary",
|
||||
startedAt: "3/29/2026, 8:16:47 PM",
|
||||
completedAt: "3/29/2026, 8:16:51 PM",
|
||||
lastUpdated: "3/29/2026, 8:16:51 PM",
|
||||
ttl: 300000,
|
||||
progressDescription: "Generating report...",
|
||||
isListExpanded: true,
|
||||
onCancel: fn(),
|
||||
createdAt: "2026-03-29T20:16:47Z",
|
||||
lastUpdatedAt: "2026-03-29T20:16:51Z",
|
||||
statusMessage: "Report generated successfully",
|
||||
},
|
||||
{
|
||||
taskId: "e6ebffd9cca84ddd1646d3c579a4d453",
|
||||
status: "failed",
|
||||
method: "tools/call",
|
||||
target: "fetch_remote_data",
|
||||
startedAt: "3/29/2026, 8:17:27 PM",
|
||||
lastUpdated: "3/29/2026, 8:17:28 PM",
|
||||
ttl: 300000,
|
||||
error: "Connection refused: upstream server not responding",
|
||||
isListExpanded: true,
|
||||
onCancel: fn(),
|
||||
createdAt: "2026-03-29T20:17:27Z",
|
||||
lastUpdatedAt: "2026-03-29T20:17:28Z",
|
||||
statusMessage: "Connection refused: upstream server not responding",
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -61,6 +43,7 @@ const meta: Meta<typeof TaskListPanel> = {
|
|||
args: {
|
||||
tasks: sampleTasks,
|
||||
searchText: "",
|
||||
onCancel: fn(),
|
||||
onClearCompleted: fn(),
|
||||
},
|
||||
};
|
||||
|
|
@ -72,7 +55,7 @@ export const Default: Story = {};
|
|||
|
||||
export const FilteredByStatus: Story = {
|
||||
args: {
|
||||
statusFilter: "running",
|
||||
statusFilter: "working",
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -8,14 +8,17 @@ import {
|
|||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import type { Task, TaskStatus } from "@modelcontextprotocol/sdk/types.js";
|
||||
import { TaskCard } from "../TaskCard/TaskCard";
|
||||
import type { TaskProgress } from "../TaskCard/TaskCard";
|
||||
import { ListToggle } from "../../elements/ListToggle/ListToggle";
|
||||
import type { TaskCardProps } from "../TaskCard/TaskCard";
|
||||
|
||||
export interface TaskListPanelProps {
|
||||
tasks: TaskCardProps[];
|
||||
tasks: Task[];
|
||||
progressByTaskId?: Record<string, TaskProgress>;
|
||||
searchText: string;
|
||||
statusFilter?: string;
|
||||
statusFilter?: TaskStatus;
|
||||
onCancel: (taskId: string) => void;
|
||||
onClearCompleted: () => void;
|
||||
}
|
||||
|
||||
|
|
@ -37,10 +40,6 @@ const EmptyState = Text.withProps({
|
|||
py: "xl",
|
||||
});
|
||||
|
||||
function taskKey(task: TaskCardProps): string {
|
||||
return task.taskId;
|
||||
}
|
||||
|
||||
function formatActiveTitle(count: number): string {
|
||||
return `Active (${count})`;
|
||||
}
|
||||
|
|
@ -49,20 +48,20 @@ function formatCompletedTitle(count: number): string {
|
|||
return `Completed (${count})`;
|
||||
}
|
||||
|
||||
function isActiveStatus(status: string): boolean {
|
||||
function isActiveStatus(status: TaskStatus): boolean {
|
||||
return status === "working" || status === "input_required";
|
||||
}
|
||||
|
||||
function matchesFilters(
|
||||
task: TaskCardProps,
|
||||
task: Task,
|
||||
searchText: string,
|
||||
statusFilter?: string,
|
||||
statusFilter?: TaskStatus,
|
||||
): boolean {
|
||||
if (statusFilter && task.status !== statusFilter) return false;
|
||||
if (searchText) {
|
||||
const term = searchText.toLowerCase();
|
||||
const searchable =
|
||||
`${task.taskId} ${task.method} ${task.target ?? ""} ${task.status}`.toLowerCase();
|
||||
`${task.taskId} ${task.status} ${task.statusMessage ?? ""}`.toLowerCase();
|
||||
if (!searchable.includes(term)) return false;
|
||||
}
|
||||
return true;
|
||||
|
|
@ -70,8 +69,10 @@ function matchesFilters(
|
|||
|
||||
export function TaskListPanel({
|
||||
tasks,
|
||||
progressByTaskId,
|
||||
searchText,
|
||||
statusFilter,
|
||||
onCancel,
|
||||
onClearCompleted,
|
||||
}: TaskListPanelProps) {
|
||||
const [compact, setCompact] = useState(false);
|
||||
|
|
@ -115,9 +116,11 @@ export function TaskListPanel({
|
|||
<Title order={5}>{formatActiveTitle(activeTasks.length)}</Title>
|
||||
{activeTasks.map((task) => (
|
||||
<TaskCard
|
||||
key={taskKey(task)}
|
||||
{...task}
|
||||
key={task.taskId}
|
||||
task={task}
|
||||
progress={progressByTaskId?.[task.taskId]}
|
||||
isListExpanded={!compact}
|
||||
onCancel={() => onCancel(task.taskId)}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
|
|
@ -135,9 +138,11 @@ export function TaskListPanel({
|
|||
</Group>
|
||||
{completedTasks.map((task) => (
|
||||
<TaskCard
|
||||
key={taskKey(task)}
|
||||
{...task}
|
||||
key={task.taskId}
|
||||
task={task}
|
||||
progress={progressByTaskId?.[task.taskId]}
|
||||
isListExpanded={!compact}
|
||||
onCancel={() => onCancel(task.taskId)}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -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,67 +10,56 @@ 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",
|
||||
},
|
||||
];
|
||||
|
||||
export const Mixed: Story = {
|
||||
args: {
|
||||
tasks: sampleTasks,
|
||||
progressByTaskId: {
|
||||
d0b22eba71fa36229ce5c4dfadeaa7de: {
|
||||
progress: 650,
|
||||
total: 1000,
|
||||
message: "Processing records 650 of 1000...",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -79,6 +68,13 @@ export const ActiveOnly: Story = {
|
|||
tasks: sampleTasks.filter(
|
||||
(t) => t.status === "working" || t.status === "input_required",
|
||||
),
|
||||
progressByTaskId: {
|
||||
d0b22eba71fa36229ce5c4dfadeaa7de: {
|
||||
progress: 650,
|
||||
total: 1000,
|
||||
message: "Processing records 650 of 1000...",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
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";
|
||||
import type { TaskProgress } from "../../groups/TaskCard/TaskCard";
|
||||
|
||||
export interface TasksScreenProps {
|
||||
tasks: TaskCardProps[];
|
||||
tasks: Task[];
|
||||
progressByTaskId?: Record<string, TaskProgress>;
|
||||
onRefresh: () => void;
|
||||
onClearCompleted: () => void;
|
||||
onCancel: (taskId: string) => void;
|
||||
}
|
||||
|
||||
const ScreenLayout = Flex.withProps({
|
||||
|
|
@ -29,11 +32,13 @@ const SidebarCard = Card.withProps({
|
|||
|
||||
export function TasksScreen({
|
||||
tasks,
|
||||
progressByTaskId,
|
||||
onRefresh,
|
||||
onClearCompleted,
|
||||
onCancel,
|
||||
}: TasksScreenProps) {
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState<string | undefined>();
|
||||
const [statusFilter, setStatusFilter] = useState<TaskStatus | undefined>();
|
||||
|
||||
return (
|
||||
<ScreenLayout>
|
||||
|
|
@ -43,17 +48,17 @@ export function TasksScreen({
|
|||
searchText={searchText}
|
||||
statusFilter={statusFilter}
|
||||
onSearchChange={setSearchText}
|
||||
onStatusFilterChange={(value) =>
|
||||
setStatusFilter(value || undefined)
|
||||
}
|
||||
onStatusFilterChange={setStatusFilter}
|
||||
onRefresh={onRefresh}
|
||||
/>
|
||||
</SidebarCard>
|
||||
</Sidebar>
|
||||
<TaskListPanel
|
||||
tasks={tasks}
|
||||
progressByTaskId={progressByTaskId}
|
||||
searchText={searchText}
|
||||
statusFilter={statusFilter}
|
||||
onCancel={onCancel}
|
||||
onClearCompleted={onClearCompleted}
|
||||
/>
|
||||
</ScreenLayout>
|
||||
|
|
|
|||
|
|
@ -549,55 +549,44 @@ export const TasksActive: Story = {
|
|||
{
|
||||
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",
|
||||
},
|
||||
]}
|
||||
progressByTaskId={{
|
||||
d0b22eba71fa36229ce5c4dfadeaa7de: {
|
||||
progress: 650,
|
||||
total: 1000,
|
||||
message: "Processing records 650 of 1000...",
|
||||
},
|
||||
}}
|
||||
onRefresh={fn()}
|
||||
onClearCompleted={fn()}
|
||||
onCancel={fn()}
|
||||
/>
|
||||
),
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue