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:
cliffhall 2026-04-20 10:53:44 -04:00
commit b487279d36
2 changed files with 23 additions and 3 deletions

View file

@ -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 = {

View file

@ -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">