feat: Add 7 organism screen components with Storybook stories

- ServerListScreen: Home page with server card grid and add server menu
- ToolsScreen: Three-panel layout (tool list, detail/form, results)
- ResourcesScreen: Two-panel with accordion sections and content preview
- PromptsScreen: Two-panel with prompt selection and message display
- LoggingScreen: Two-panel with log controls and real-time log stream
- TasksScreen: Active and completed task card sections
- HistoryScreen: Request history with search, filter, and pinned entries

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-03-17 10:27:50 -04:00
commit 75f6f6452a

View file

@ -0,0 +1,55 @@
import { Button, Group, Stack, Text, Title } from '@mantine/core'
import { TaskCard } from '../../molecules/TaskCard/TaskCard'
import type { TaskCardProps } from '../../molecules/TaskCard/TaskCard'
export interface TasksScreenProps {
activeTasks: TaskCardProps[]
completedTasks: TaskCardProps[]
onRefresh: () => void
onClearHistory: () => void
}
export function TasksScreen({
activeTasks,
completedTasks,
onRefresh,
onClearHistory,
}: TasksScreenProps) {
return (
<Stack gap="lg">
<Group justify="space-between">
<Title order={2}>Tasks</Title>
<Button variant="light" onClick={onRefresh}>
Refresh
</Button>
</Group>
<Title order={4}>Active Tasks ({activeTasks.length})</Title>
{activeTasks.length === 0 ? (
<Text c="dimmed">No active tasks</Text>
) : (
<Stack gap="md">
{activeTasks.map((task) => (
<TaskCard key={task.taskId} {...task} />
))}
</Stack>
)}
<Group justify="space-between">
<Title order={4}>Completed Tasks ({completedTasks.length})</Title>
<Button variant="light" size="xs" onClick={onClearHistory}>
Clear History
</Button>
</Group>
{completedTasks.length === 0 ? (
<Text c="dimmed">No completed tasks</Text>
) : (
<Stack gap="md">
{completedTasks.map((task) => (
<TaskCard key={task.taskId} {...task} />
))}
</Stack>
)}
</Stack>
)
}