Add progress bar back to TaskCard via optional progress prop
Progress notifications (notifications/progress) are sent separately from the Task object per the MCP spec. Add an optional progress prop typed as Pick<ProgressNotification['params'], 'progress' | 'total' | 'message'> so the parent can pass progress data when available. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
6abb39a5fe
commit
b487279d36
2 changed files with 23 additions and 3 deletions
|
|
@ -61,7 +61,10 @@ const cancelledTask: Task = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Working: Story = {
|
export const Working: Story = {
|
||||||
args: { task: workingTask },
|
args: {
|
||||||
|
task: workingTask,
|
||||||
|
progress: { progress: 650, total: 1000, message: "Processing records..." },
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export const InputRequired: Story = {
|
export const InputRequired: Story = {
|
||||||
|
|
|
||||||
|
|
@ -8,12 +8,22 @@ import {
|
||||||
Stack,
|
Stack,
|
||||||
Text,
|
Text,
|
||||||
} from "@mantine/core";
|
} from "@mantine/core";
|
||||||
import type { Task } from "@modelcontextprotocol/sdk/types.js";
|
import type {
|
||||||
|
ProgressNotification,
|
||||||
|
Task,
|
||||||
|
} from "@modelcontextprotocol/sdk/types.js";
|
||||||
import { ContentViewer } from "../../elements/ContentViewer/ContentViewer";
|
import { ContentViewer } from "../../elements/ContentViewer/ContentViewer";
|
||||||
|
import { ProgressDisplay } from "../../elements/ProgressDisplay/ProgressDisplay";
|
||||||
import { TaskStatusBadge } from "../../elements/TaskStatusBadge/TaskStatusBadge";
|
import { TaskStatusBadge } from "../../elements/TaskStatusBadge/TaskStatusBadge";
|
||||||
|
|
||||||
|
export type TaskProgress = Pick<
|
||||||
|
ProgressNotification["params"],
|
||||||
|
"progress" | "total" | "message"
|
||||||
|
>;
|
||||||
|
|
||||||
export interface TaskCardProps {
|
export interface TaskCardProps {
|
||||||
task: Task;
|
task: Task;
|
||||||
|
progress?: TaskProgress;
|
||||||
isListExpanded: boolean;
|
isListExpanded: boolean;
|
||||||
onCancel: () => void;
|
onCancel: () => void;
|
||||||
}
|
}
|
||||||
|
|
@ -91,7 +101,12 @@ function formatTtl(ttl: number): string {
|
||||||
return `${ttl}ms`;
|
return `${ttl}ms`;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function TaskCard({ task, isListExpanded, onCancel }: TaskCardProps) {
|
export function TaskCard({
|
||||||
|
task,
|
||||||
|
progress,
|
||||||
|
isListExpanded,
|
||||||
|
onCancel,
|
||||||
|
}: TaskCardProps) {
|
||||||
const { taskId, status, ttl, createdAt, lastUpdatedAt, statusMessage } = task;
|
const { taskId, status, ttl, createdAt, lastUpdatedAt, statusMessage } = task;
|
||||||
const [isExpanded, setIsExpanded] = useState(isListExpanded);
|
const [isExpanded, setIsExpanded] = useState(isListExpanded);
|
||||||
const isActive = status === "working" || status === "input_required";
|
const isActive = status === "working" || status === "input_required";
|
||||||
|
|
@ -146,6 +161,8 @@ export function TaskCard({ task, isListExpanded, onCancel }: TaskCardProps) {
|
||||||
<StatusMessageText>{statusMessage}</StatusMessageText>
|
<StatusMessageText>{statusMessage}</StatusMessageText>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{progress && isActive && <ProgressDisplay params={progress} />}
|
||||||
|
|
||||||
{isExpanded && (
|
{isExpanded && (
|
||||||
<Collapse in={isExpanded}>
|
<Collapse in={isExpanded}>
|
||||||
<Stack gap="sm">
|
<Stack gap="sm">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue