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
|
|
@ -16,85 +16,82 @@ const meta: Meta<typeof TasksScreen> = {
|
|||
export default meta;
|
||||
type Story = StoryObj<typeof TasksScreen>;
|
||||
|
||||
const activeTask1: TaskCardProps = {
|
||||
taskId: "task-001",
|
||||
status: "running",
|
||||
method: "tools/call",
|
||||
target: "send_message",
|
||||
progress: 45,
|
||||
progressDescription: "Sending message to remote server...",
|
||||
startedAt: "2026-03-17T10:00:00Z",
|
||||
onViewDetails: fn(),
|
||||
onViewResult: fn(),
|
||||
onCancel: fn(),
|
||||
onDismiss: fn(),
|
||||
};
|
||||
|
||||
const activeTask2: TaskCardProps = {
|
||||
taskId: "task-002",
|
||||
status: "waiting",
|
||||
method: "resources/read",
|
||||
target: "config.json",
|
||||
startedAt: "2026-03-17T10:01:00Z",
|
||||
onViewDetails: fn(),
|
||||
onViewResult: fn(),
|
||||
onCancel: fn(),
|
||||
onDismiss: fn(),
|
||||
};
|
||||
|
||||
const completedTask1: TaskCardProps = {
|
||||
taskId: "task-003",
|
||||
status: "completed",
|
||||
method: "tools/call",
|
||||
target: "list_users",
|
||||
startedAt: "2026-03-17T09:50:00Z",
|
||||
completedAt: "2026-03-17T09:50:02Z",
|
||||
elapsed: "2.1s",
|
||||
onViewDetails: fn(),
|
||||
onViewResult: fn(),
|
||||
onCancel: fn(),
|
||||
onDismiss: fn(),
|
||||
};
|
||||
|
||||
const completedTask2: TaskCardProps = {
|
||||
taskId: "task-004",
|
||||
status: "failed",
|
||||
method: "tools/call",
|
||||
target: "delete_records",
|
||||
startedAt: "2026-03-17T09:45:00Z",
|
||||
completedAt: "2026-03-17T09:45:01Z",
|
||||
elapsed: "0.8s",
|
||||
error: "Permission denied: insufficient privileges",
|
||||
onViewDetails: fn(),
|
||||
onViewResult: fn(),
|
||||
onCancel: fn(),
|
||||
onDismiss: fn(),
|
||||
};
|
||||
const sampleTasks: TaskCardProps[] = [
|
||||
{
|
||||
taskId: "d0b22eba71fa36229ce5c4dfadeaa7de",
|
||||
status: "running",
|
||||
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(),
|
||||
},
|
||||
{
|
||||
taskId: "4100b5e0b0ed9cd0023330342d1bf647",
|
||||
status: "waiting",
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
{
|
||||
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(),
|
||||
},
|
||||
];
|
||||
|
||||
export const Mixed: Story = {
|
||||
args: {
|
||||
activeTasks: [activeTask1, activeTask2],
|
||||
completedTasks: [completedTask1, completedTask2],
|
||||
tasks: sampleTasks,
|
||||
},
|
||||
};
|
||||
|
||||
export const ActiveOnly: Story = {
|
||||
args: {
|
||||
activeTasks: [activeTask1, activeTask2],
|
||||
completedTasks: [],
|
||||
tasks: sampleTasks.filter(
|
||||
(t) => t.status === "running" || t.status === "waiting",
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const CompletedOnly: Story = {
|
||||
args: {
|
||||
activeTasks: [],
|
||||
completedTasks: [completedTask1, completedTask2],
|
||||
tasks: sampleTasks.filter(
|
||||
(t) => t.status !== "running" && t.status !== "waiting",
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const Empty: Story = {
|
||||
args: {
|
||||
activeTasks: [],
|
||||
completedTasks: [],
|
||||
tasks: [],
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,88 +1,61 @@
|
|||
import {
|
||||
Button,
|
||||
Container,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { TaskCard } from "../../groups/TaskCard/TaskCard";
|
||||
import { useState } from "react";
|
||||
import { Card, Flex, Stack } from "@mantine/core";
|
||||
import { TaskControls } from "../../groups/TaskControls/TaskControls";
|
||||
import { TaskListPanel } from "../../groups/TaskListPanel/TaskListPanel";
|
||||
import type { TaskCardProps } from "../../groups/TaskCard/TaskCard";
|
||||
|
||||
export interface TasksScreenProps {
|
||||
activeTasks: TaskCardProps[];
|
||||
completedTasks: TaskCardProps[];
|
||||
tasks: TaskCardProps[];
|
||||
onRefresh: () => void;
|
||||
onClearHistory: () => void;
|
||||
}
|
||||
|
||||
const PageContainer = Container.withProps({
|
||||
size: "xl",
|
||||
py: "xl",
|
||||
const ScreenLayout = Flex.withProps({
|
||||
variant: "screen",
|
||||
h: "calc(100vh - var(--app-shell-header-height, 0px))",
|
||||
gap: "xl",
|
||||
p: "xl",
|
||||
});
|
||||
|
||||
const ContentPanel = Paper.withProps({
|
||||
const Sidebar = Stack.withProps({
|
||||
w: 280,
|
||||
flex: "0 0 auto",
|
||||
});
|
||||
|
||||
const SidebarCard = Card.withProps({
|
||||
withBorder: true,
|
||||
p: "md",
|
||||
padding: "lg",
|
||||
});
|
||||
|
||||
const CompactButton = Button.withProps({
|
||||
variant: "light",
|
||||
size: "xs",
|
||||
});
|
||||
|
||||
function formatSectionTitle(label: string, count: number): string {
|
||||
return `${label} (${count})`;
|
||||
}
|
||||
|
||||
export function TasksScreen({
|
||||
activeTasks,
|
||||
completedTasks,
|
||||
tasks,
|
||||
onRefresh,
|
||||
onClearHistory,
|
||||
}: TasksScreenProps) {
|
||||
return (
|
||||
<PageContainer>
|
||||
<ContentPanel>
|
||||
<Stack gap="lg">
|
||||
<Group justify="space-between">
|
||||
<Title order={4}>
|
||||
{formatSectionTitle("Active Tasks", activeTasks.length)}
|
||||
</Title>
|
||||
<CompactButton onClick={onRefresh}>Refresh Tasks</CompactButton>
|
||||
</Group>
|
||||
{activeTasks.length === 0 ? (
|
||||
<Text c="dimmed">No active tasks</Text>
|
||||
) : (
|
||||
<Stack gap="md">
|
||||
{activeTasks.map((task) => (
|
||||
<TaskCard key={task.taskId} {...task} />
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState<string | undefined>();
|
||||
|
||||
<Group justify="space-between">
|
||||
<Title order={4}>
|
||||
{formatSectionTitle("Completed Tasks", completedTasks.length)}
|
||||
</Title>
|
||||
{completedTasks.length > 0 && (
|
||||
<CompactButton onClick={onClearHistory}>
|
||||
Clear History
|
||||
</CompactButton>
|
||||
)}
|
||||
</Group>
|
||||
{completedTasks.length === 0 ? (
|
||||
<Text c="dimmed">No completed tasks</Text>
|
||||
) : (
|
||||
<Stack gap="md">
|
||||
{completedTasks.map((task) => (
|
||||
<TaskCard key={task.taskId} {...task} />
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</ContentPanel>
|
||||
</PageContainer>
|
||||
return (
|
||||
<ScreenLayout>
|
||||
<Sidebar>
|
||||
<SidebarCard>
|
||||
<TaskControls
|
||||
searchText={searchText}
|
||||
statusFilter={statusFilter}
|
||||
onSearchChange={setSearchText}
|
||||
onStatusFilterChange={(value) =>
|
||||
setStatusFilter(value || undefined)
|
||||
}
|
||||
onRefresh={onRefresh}
|
||||
onClearHistory={onClearHistory}
|
||||
/>
|
||||
</SidebarCard>
|
||||
</Sidebar>
|
||||
<TaskListPanel
|
||||
tasks={tasks}
|
||||
searchText={searchText}
|
||||
statusFilter={statusFilter}
|
||||
/>
|
||||
</ScreenLayout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue