Redesign Tasks screen: expandable TaskCard, sidebar controls, and list panel
- Redesign TaskCard to match v1 Task Details panel layout: header with task ID + status badge + cancel button, always-visible summary row (Status, Last Updated, Created At, TTL) with Expand/Collapse button, expandable section with status message, progress bar, error, and Full Task Object JSON viewer - Add TaskControls group: search input + status filter dropdown + Refresh/Clear History buttons (mirrors HistoryControls pattern) - Add TaskListPanel group: scrollable panel with ListToggle for expand/collapse all, splits tasks into Active/Completed sections with counts, filters by search text and status - Refactor TasksScreen to sidebar + panel layout matching HistoryScreen: manages search/filter state internally, flat tasks array - Simplify TaskCard callbacks to just onCancel - Extract named .withProps() subcomponents (HeaderLeftGroup, HeaderRightGroup, SectionTitle, SummaryRow, DetailRow) for AGENTS.md compliance - Update all stories (TaskCard, TaskControls, TaskListPanel, TasksScreen, ConnectedView) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall
parent
a0e763a315
commit
c494d2feb4
2 changed files with 639 additions and 276 deletions
|
|
@ -6,10 +6,8 @@ const meta: Meta<typeof TaskCard> = {
|
|||
title: "Groups/TaskCard",
|
||||
component: TaskCard,
|
||||
args: {
|
||||
onViewDetails: fn(),
|
||||
onViewResult: fn(),
|
||||
onCancel: fn(),
|
||||
onDismiss: fn(),
|
||||
isListExpanded: true,
|
||||
},
|
||||
};
|
||||
|
||||
|
|
@ -18,77 +16,82 @@ type Story = StoryObj<typeof TaskCard>;
|
|||
|
||||
export const Running: Story = {
|
||||
args: {
|
||||
taskId: "task-abc-123",
|
||||
taskId: "d0b22eba71fa36229ce5c4dfadeaa7de",
|
||||
status: "running",
|
||||
method: "tools/call",
|
||||
target: "generate_report",
|
||||
progress: 80,
|
||||
progressDescription: "Generating report section 4 of 5...",
|
||||
startedAt: "2026-03-17T10:30:00Z",
|
||||
elapsed: "2m 15s",
|
||||
},
|
||||
};
|
||||
|
||||
export const RunningWithProgress: Story = {
|
||||
args: {
|
||||
taskId: "task-def-456",
|
||||
status: "running",
|
||||
method: "tools/call",
|
||||
target: "analyze_data",
|
||||
progress: 45,
|
||||
progressDescription: "Analyzing dataset...",
|
||||
startedAt: "2026-03-17T10:32:00Z",
|
||||
elapsed: "30s",
|
||||
progressDescription: "Synthesizing findings...",
|
||||
startedAt: "3/29/2026, 8:18:20 PM",
|
||||
lastUpdated: "3/29/2026, 8:18:22 PM",
|
||||
ttl: 300000,
|
||||
},
|
||||
};
|
||||
|
||||
export const Waiting: Story = {
|
||||
args: {
|
||||
taskId: "task-ghi-789",
|
||||
taskId: "4100b5e0b0ed9cd0023330342d1bf647",
|
||||
status: "waiting",
|
||||
method: "resources/read",
|
||||
target: "file:///data/report.csv",
|
||||
progress: 0,
|
||||
startedAt: "2026-03-17T10:35:00Z",
|
||||
startedAt: "3/29/2026, 8:17:55 PM",
|
||||
lastUpdated: "3/29/2026, 8:17:55 PM",
|
||||
ttl: 300000,
|
||||
},
|
||||
};
|
||||
|
||||
export const Completed: Story = {
|
||||
args: {
|
||||
taskId: "task-jkl-012",
|
||||
taskId: "d487b49aa39023d907b5a2a5b506cb3",
|
||||
status: "completed",
|
||||
method: "tools/call",
|
||||
target: "generate_summary",
|
||||
progress: 100,
|
||||
startedAt: "2026-03-17T10:20:00Z",
|
||||
completedAt: "2026-03-17T10:25:00Z",
|
||||
elapsed: "5m 00s",
|
||||
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...",
|
||||
},
|
||||
};
|
||||
|
||||
export const Failed: Story = {
|
||||
args: {
|
||||
taskId: "task-mno-345",
|
||||
taskId: "e6ebffd9cca84ddd1646d3c579a4d453",
|
||||
status: "failed",
|
||||
method: "tools/call",
|
||||
target: "fetch_remote_data",
|
||||
progress: 45,
|
||||
startedAt: "2026-03-17T10:28:00Z",
|
||||
completedAt: "2026-03-17T10:29:30Z",
|
||||
elapsed: "1m 30s",
|
||||
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",
|
||||
},
|
||||
};
|
||||
|
||||
export const Cancelled: Story = {
|
||||
args: {
|
||||
taskId: "task-pqr-678",
|
||||
taskId: "c416bc183cb04468d3f81696f1b868f6",
|
||||
status: "cancelled",
|
||||
method: "tools/call",
|
||||
target: "long_running_analysis",
|
||||
progress: 30,
|
||||
startedAt: "2026-03-17T10:15:00Z",
|
||||
completedAt: "2026-03-17T10:18:00Z",
|
||||
elapsed: "3m 00s",
|
||||
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,
|
||||
},
|
||||
};
|
||||
|
||||
export const Collapsed: Story = {
|
||||
args: {
|
||||
taskId: "d0b22eba71fa36229ce5c4dfadeaa7de",
|
||||
status: "running",
|
||||
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,
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,15 @@
|
|||
import { Badge, Button, Card, Group, Stack, Text } from "@mantine/core";
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
Collapse,
|
||||
Divider,
|
||||
Group,
|
||||
Stack,
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import { ContentViewer } from "../../elements/ContentViewer/ContentViewer";
|
||||
import { ProgressDisplay } from "../../elements/ProgressDisplay/ProgressDisplay";
|
||||
|
||||
export type TaskStatus =
|
||||
|
|
@ -17,12 +28,12 @@ export interface TaskCardProps {
|
|||
progressDescription?: string;
|
||||
startedAt?: string;
|
||||
completedAt?: string;
|
||||
lastUpdated?: string;
|
||||
elapsed?: string;
|
||||
ttl?: number;
|
||||
error?: string;
|
||||
onViewDetails: () => void;
|
||||
onViewResult: () => void;
|
||||
isListExpanded: boolean;
|
||||
onCancel: () => void;
|
||||
onDismiss: () => void;
|
||||
}
|
||||
|
||||
const STATUS_COLORS: Record<TaskStatus, string> = {
|
||||
|
|
@ -38,27 +49,37 @@ const TaskContainer = Card.withProps({
|
|||
padding: "md",
|
||||
});
|
||||
|
||||
const HeaderRow = Group.withProps({
|
||||
justify: "space-between",
|
||||
wrap: "nowrap",
|
||||
});
|
||||
|
||||
const TaskIdText = Text.withProps({
|
||||
size: "sm",
|
||||
ff: "monospace",
|
||||
c: "dimmed",
|
||||
});
|
||||
|
||||
const DetailText = Text.withProps({
|
||||
const DetailLabel = Text.withProps({
|
||||
size: "sm",
|
||||
c: "dimmed",
|
||||
});
|
||||
|
||||
const ValueSpan = Text.withProps({
|
||||
component: "span",
|
||||
fw: 600,
|
||||
const DetailValue = Text.withProps({
|
||||
size: "sm",
|
||||
fw: 500,
|
||||
});
|
||||
|
||||
const ProgressNote = Text.withProps({
|
||||
const StatusMessageText = Text.withProps({
|
||||
size: "sm",
|
||||
c: "dimmed",
|
||||
fs: "italic",
|
||||
});
|
||||
|
||||
const ErrorText = Text.withProps({
|
||||
size: "sm",
|
||||
c: "red",
|
||||
});
|
||||
|
||||
const SubtleButton = Button.withProps({
|
||||
variant: "subtle",
|
||||
size: "xs",
|
||||
|
|
@ -70,89 +91,152 @@ const CancelButton = Button.withProps({
|
|||
size: "xs",
|
||||
});
|
||||
|
||||
const DetailRow = Group.withProps({
|
||||
gap: "xl",
|
||||
wrap: "wrap",
|
||||
});
|
||||
|
||||
const SummaryRow = Group.withProps({
|
||||
justify: "space-between",
|
||||
wrap: "nowrap",
|
||||
});
|
||||
|
||||
const HeaderLeftGroup = Group.withProps({
|
||||
gap: "sm",
|
||||
});
|
||||
|
||||
const HeaderRightGroup = Group.withProps({
|
||||
gap: "xs",
|
||||
});
|
||||
|
||||
const SectionTitle = Text.withProps({
|
||||
size: "sm",
|
||||
fw: 600,
|
||||
});
|
||||
|
||||
function formatTaskId(taskId: string): string {
|
||||
return `Task: ${taskId}`;
|
||||
return `ID: ${taskId}`;
|
||||
}
|
||||
|
||||
function formatTimeline(
|
||||
startedAt: string,
|
||||
completedAt?: string,
|
||||
elapsed?: string,
|
||||
): string {
|
||||
let result = `Started: ${startedAt}`;
|
||||
if (completedAt) result += ` | Completed: ${completedAt}`;
|
||||
if (elapsed) result += ` | Elapsed: ${elapsed}`;
|
||||
return result;
|
||||
function formatTtl(ttl: number): string {
|
||||
return `${ttl}ms`;
|
||||
}
|
||||
|
||||
export function TaskCard({
|
||||
taskId,
|
||||
status,
|
||||
method,
|
||||
target,
|
||||
progress,
|
||||
progressDescription,
|
||||
startedAt,
|
||||
completedAt,
|
||||
elapsed,
|
||||
error,
|
||||
onViewDetails,
|
||||
onViewResult,
|
||||
onCancel,
|
||||
onDismiss,
|
||||
}: TaskCardProps) {
|
||||
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;
|
||||
|
||||
const [isExpanded, setIsExpanded] = useState(isListExpanded);
|
||||
const isActive = status === "waiting" || status === "running";
|
||||
|
||||
useEffect(() => {
|
||||
setIsExpanded(isListExpanded);
|
||||
}, [isListExpanded]);
|
||||
|
||||
return (
|
||||
<TaskContainer>
|
||||
<Stack gap="xs">
|
||||
<Group justify="space-between">
|
||||
<Group>
|
||||
<Stack gap="sm">
|
||||
<HeaderRow>
|
||||
<HeaderLeftGroup>
|
||||
<SectionTitle>Task Details</SectionTitle>
|
||||
<TaskIdText>{formatTaskId(taskId)}</TaskIdText>
|
||||
</HeaderLeftGroup>
|
||||
<HeaderRightGroup>
|
||||
{isActive && (
|
||||
<CancelButton onClick={onCancel}>Cancel Task</CancelButton>
|
||||
)}
|
||||
<Badge color={STATUS_COLORS[status]}>{status}</Badge>
|
||||
</Group>
|
||||
{progress !== undefined && <ProgressDisplay progress={progress} />}
|
||||
</Group>
|
||||
</HeaderRightGroup>
|
||||
</HeaderRow>
|
||||
|
||||
<DetailText>
|
||||
Method: <ValueSpan>{method}</ValueSpan>
|
||||
</DetailText>
|
||||
<SummaryRow>
|
||||
<DetailRow>
|
||||
<Stack gap={2}>
|
||||
<DetailLabel>Status</DetailLabel>
|
||||
<DetailValue>{status}</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>TTL</DetailLabel>
|
||||
<DetailValue>{formatTtl(ttl)}</DetailValue>
|
||||
</Stack>
|
||||
)}
|
||||
</DetailRow>
|
||||
<SubtleButton onClick={() => setIsExpanded((v) => !v)}>
|
||||
{isExpanded ? "Collapse" : "Expand"}
|
||||
</SubtleButton>
|
||||
</SummaryRow>
|
||||
|
||||
{target && (
|
||||
<DetailText>
|
||||
Tool/Resource: <ValueSpan>{target}</ValueSpan>
|
||||
</DetailText>
|
||||
{isExpanded && (
|
||||
<Collapse in={isExpanded}>
|
||||
<Stack gap="sm">
|
||||
{progressDescription && (
|
||||
<Stack gap={2}>
|
||||
<DetailLabel>Status Message</DetailLabel>
|
||||
<StatusMessageText>{progressDescription}</StatusMessageText>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{progress !== undefined && (
|
||||
<ProgressDisplay progress={progress} />
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Stack gap={2}>
|
||||
<DetailLabel>Error</DetailLabel>
|
||||
<ErrorText>{error}</ErrorText>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
<SectionTitle>Full Task Object</SectionTitle>
|
||||
<ContentViewer
|
||||
type="json"
|
||||
content={buildTaskObject(props)}
|
||||
copyable
|
||||
/>
|
||||
</Stack>
|
||||
</Collapse>
|
||||
)}
|
||||
|
||||
{startedAt && (
|
||||
<DetailText>
|
||||
{formatTimeline(startedAt, completedAt, elapsed)}
|
||||
</DetailText>
|
||||
)}
|
||||
|
||||
{progressDescription && (
|
||||
<ProgressNote>{progressDescription}</ProgressNote>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Text size="sm" c="red">
|
||||
{error}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<Group justify="flex-end">
|
||||
{isActive ? (
|
||||
<>
|
||||
<SubtleButton onClick={onViewDetails}>View Details</SubtleButton>
|
||||
<CancelButton onClick={onCancel}>Cancel</CancelButton>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<SubtleButton onClick={onViewResult}>View Result</SubtleButton>
|
||||
<SubtleButton onClick={onDismiss}>Dismiss</SubtleButton>
|
||||
</>
|
||||
)}
|
||||
</Group>
|
||||
</Stack>
|
||||
</TaskContainer>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue