From 0a73ec6a5068153e6b0d91a9e3142ec8a779bf1f Mon Sep 17 00:00:00 2001
From: Cian Johnston <cian@coder.com>
Date: Fri, 29 May 2026 11:34:54 +0100
Subject: [PATCH] feat(site/src/pages/AgentsPage): show error details for
 generic errors (#25803)

Error messages in agent chat now expose the actual error detail
instead of hiding it entirely. Also captures API response detail
for generic errors that previously dropped it.

(cherry picked from commit 78d556fffc85e9b929638496d1d794c92df74bfc)
---
 site/src/pages/AgentsPage/AgentChatPage.tsx      |  4 +++-
 .../ChatConversation/ChatStatusCallout.tsx       | 16 +++++++++++-----
 .../ChatConversation/LiveStreamTail.stories.tsx  |  2 +-
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/site/src/pages/AgentsPage/AgentChatPage.tsx b/site/src/pages/AgentsPage/AgentChatPage.tsx
index 9a73a122cf..95fef97786 100644
--- a/site/src/pages/AgentsPage/AgentChatPage.tsx
+++ b/site/src/pages/AgentsPage/AgentChatPage.tsx
@@ -1182,9 +1182,11 @@ const AgentChatPage: FC = () => {
 			store.setStreamError(reason);
 			setChatErrorReason(agentId, reason);
 		} else if (isApiError(error)) {
+			const detail = error.response?.data?.detail?.trim() || undefined;
 			const reason: ChatDetailError = {
 				kind: "generic",
-				message: error.message || "An unexpected error occurred.",
+				message: getErrorMessage(error, "An unexpected error occurred."),
+				...(detail ? { detail } : {}),
 			};
 			store.setStreamError(reason);
 			setChatErrorReason(agentId, reason);
diff --git a/site/src/pages/AgentsPage/components/ChatConversation/ChatStatusCallout.tsx b/site/src/pages/AgentsPage/components/ChatConversation/ChatStatusCallout.tsx
index e44ba842fc..9d54a0c524 100644
--- a/site/src/pages/AgentsPage/components/ChatConversation/ChatStatusCallout.tsx
+++ b/site/src/pages/AgentsPage/components/ChatConversation/ChatStatusCallout.tsx
@@ -164,11 +164,17 @@ const StatusAlert: FC<{ status: RetryOrFailedStatus }> = ({ status }) => {
 						</Link>
 					)}
 				</span>
-				{status.phase === "failed" && status.detail && (
-					<span className="mt-1 block text-content-secondary">
-						{status.detail}
-					</span>
-				)}
+				{status.phase === "failed" &&
+					status.detail &&
+					(status.kind === "generic" ? (
+						<code className="mt-1 block whitespace-pre-wrap text-xs text-content-secondary font-mono bg-surface-secondary rounded-md">
+							{status.detail}
+						</code>
+					) : (
+						<span className="mt-1 block text-content-secondary">
+							{status.detail}
+						</span>
+					))}
 			</AlertDescription>
 		</Alert>
 	);
diff --git a/site/src/pages/AgentsPage/components/ChatConversation/LiveStreamTail.stories.tsx b/site/src/pages/AgentsPage/components/ChatConversation/LiveStreamTail.stories.tsx
index 129b5ffa0f..32484ed15c 100644
--- a/site/src/pages/AgentsPage/components/ChatConversation/LiveStreamTail.stories.tsx
+++ b/site/src/pages/AgentsPage/components/ChatConversation/LiveStreamTail.stories.tsx
@@ -351,7 +351,7 @@ export const GenericErrorDoesNotShowUsageAction: Story = {
 	},
 };
 
-/** Provider detail renders as a muted secondary line under the main error. */
+/** Provider detail renders in a monospace block for generic errors. */
 export const GenericErrorShowsProviderDetail: Story = {
 	args: {
 		...defaultArgs,