diff --git a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx
index 4474582f..bffb91d5 100644
--- a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx
+++ b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx
@@ -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,
diff --git a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx
index 634faefe..17cc8cf7 100644
--- a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx
+++ b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx
@@ -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({
}
/>
+ {getPromptState?.status === "pending" && (
+
+
+
+ Loading prompt...
+
+
+ )}
+ {getPromptState?.status === "error" && (
+
+
+ {getPromptState.error ?? "Failed to get prompt"}
+
+
+ )}
{getPromptState?.result && (