Render loading and error states in PromptsScreen

Show a loader when GetPromptState status is "pending" and a red alert
when status is "error". Add Loading and WithError stories.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-04-18 18:10:18 -04:00
commit bb46339cf0
2 changed files with 45 additions and 1 deletions

View file

@ -91,6 +91,26 @@ export const WithResult: Story = {
},
};
export const Loading: Story = {
args: {
prompts: samplePrompts,
selectedPromptName: "translate",
getPromptState: { status: "pending" },
},
};
export const WithError: Story = {
args: {
prompts: samplePrompts,
selectedPromptName: "translate",
getPromptState: {
status: "error",
error:
'Prompt "translate" requires argument "text" but none was provided. Please fill in all required arguments before submitting.',
},
},
};
export const ListChanged: Story = {
args: {
prompts: samplePrompts,

View file

@ -1,5 +1,14 @@
import { useState } from "react";
import { Card, Flex, Group, ScrollArea, Stack, Text } from "@mantine/core";
import {
Alert,
Card,
Flex,
Group,
Loader,
ScrollArea,
Stack,
Text,
} from "@mantine/core";
import type {
GetPromptResult,
Prompt,
@ -107,6 +116,21 @@ export function PromptsScreen({
}
/>
</DetailCard>
{getPromptState?.status === "pending" && (
<DetailCard>
<Stack align="center" py="xl">
<Loader size="sm" />
<Text c="dimmed">Loading prompt...</Text>
</Stack>
</DetailCard>
)}
{getPromptState?.status === "error" && (
<DetailCard>
<Alert color="red" variant="light" title="Prompt Error">
{getPromptState.error ?? "Failed to get prompt"}
</Alert>
</DetailCard>
)}
{getPromptState?.result && (
<DetailCard>
<PromptMessagesDisplay