From bb46339cf01eb0c32f5bb20e37c450c64748f20b Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Sat, 18 Apr 2026 18:10:18 -0400
Subject: [PATCH] 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>
---
 .../PromptsScreen/PromptsScreen.stories.tsx   | 20 ++++++++++++++
 .../screens/PromptsScreen/PromptsScreen.tsx   | 26 ++++++++++++++++++-
 2 files changed, 45 insertions(+), 1 deletion(-)

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({
                   }
                 />
               </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