feat(ui): display LLM retry and failure error in modal

src/server/chat/agent-loop-failure.test.ts

@@ -278,7 +278,7 @@ describe('agent loop LLM failure handling', () => {
 
     const retryMsg = onMessage.mock.calls.map((c: any[]) => c[0]).find((m: any) => m?.type === 'chat.llm_retry')
     expect(retryMsg).toBeDefined()
-    expect(retryMsg.payload).toEqual({ attempt: 2, retryInMs: 0 })
+    expect(retryMsg.payload).toEqual({ attempt: 2, retryInMs: 0, error: 'boom' })
   })
 
   it('gives up after the retry window and relays chat.llm_retry_failed', async () => {

src/server/chat/agent-loop.ts

@@ -447,7 +447,7 @@ export async function runTopLevelAgentLoop(
         return { failed: { error: attemptResult.error } }
       }
       if (!config.subAgentMetadata) {
-        config.onMessage?.(createChatLLMRetryMessage(decision.attempt, decision.delayMs))
+        config.onMessage?.(createChatLLMRetryMessage(decision.attempt, decision.delayMs, attemptResult.error))
       }
       const waitResult = await sleepThroughRetryBackoff(decision.delayMs, sessionId, signal)
       if (waitResult === 'aborted') throw new Error('Aborted')

src/server/ws/protocol.ts

@@ -295,8 +295,12 @@ export function createChatErrorMessage(error: string, recoverable: boolean): Ser
   return createServerMessage('chat.error', { error, recoverable })
 }
 
-export function createChatLLMRetryMessage(attempt: number, retryInMs: number): ServerMessage<ChatLLMRetryPayload> {
-  return createServerMessage('chat.llm_retry', { attempt, retryInMs })
+export function createChatLLMRetryMessage(
+  attempt: number,
+  retryInMs: number,
+  error?: string,
+): ServerMessage<ChatLLMRetryPayload> {
+  return createServerMessage('chat.llm_retry', { attempt, retryInMs, ...(error !== undefined ? { error } : {}) })
 }
 
 export function createChatLLMRetryFailedMessage(

src/shared/protocol.ts

@@ -342,6 +342,8 @@ export interface ChatLLMRetryPayload {
   attempt: number
   /** Delay in ms until the next retry attempt (drives the UI countdown). */
   retryInMs: number
+  /** Optional error message that triggered the retry. */
+  error?: string
 }
 
 export interface ChatLLMRetryFailedPayload {

web/src/components/plan/MessageList.tsx

@@ -10,6 +10,8 @@ import { useDisplaySettings } from '../../stores/settings'
 import { ChatFeedItems } from './ChatFeedItems'
 import { CloseButton } from '../shared/CloseButton'
 import { ChevronUpIcon } from '../shared/icons'
+import { Modal } from '../shared/Modal'
+import { CodeHighlight } from '../shared/CodeHighlight'
 import { useClickOutside } from '../../hooks/useClickOutside'
 import { useSessionScope, useScopedPaneState } from '../../stores/session/session-scope'
 import type { DisplayItem } from './groupMessages.js'
@@ -18,17 +20,59 @@ import type { LLMRetryState } from '../../stores/session/types'
 
 const EMPTY_CRITERIA: MetadataEntry[] = []
 
+function formatErrorMessage(error: string): { code: string; language: string; prefix?: string } {
+  // If the whole string is JSON
+  const trimmed = error.trim()
+  if ((trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
+    try {
+      const parsed = JSON.parse(trimmed)
+      return { code: JSON.stringify(parsed, null, 2), language: 'json' }
+    } catch {
+      // ignore
+    }
+  }
+
+  // If there's a prefix like "HTTP 400: {" or "LLMError: HTTP 400: {"
+  const jsonStart = error.indexOf('{')
+  const jsonArrayStart = error.indexOf('[')
+  const firstJsonIdx =
+    jsonStart !== -1 && jsonArrayStart !== -1
+      ? Math.min(jsonStart, jsonArrayStart)
+      : jsonStart !== -1
+        ? jsonStart
+        : jsonArrayStart
+
+  if (firstJsonIdx > 0) {
+    const prefix = error.slice(0, firstJsonIdx).trim()
+    const potentialJson = error.slice(firstJsonIdx).trim()
+    try {
+      const parsed = JSON.parse(potentialJson)
+      return { prefix, code: JSON.stringify(parsed, null, 2), language: 'json' }
+    } catch {
+      // ignore
+    }
+  }
+
+  return { code: error, language: 'text' }
+}
+
 /** Live countdown pill shown while an LLM call is backing off before its next retry. */
 function LLMRetryIndicator({
   retry,
   onRetryNow,
+  onShowError,
 }: {
   retry: Extract<LLMRetryState, { status: 'retrying' }>
   onRetryNow: () => void
+  onShowError: (error: string) => void
 }) {
-  const [receivedAt] = useState(Date.now())
+  const [receivedAt, setReceivedAt] = useState(Date.now())
   const [now, setNow] = useState(Date.now())
 
+  useEffect(() => {
+    setReceivedAt(Date.now())
+  }, [retry.attempt, retry.retryInMs])
+
   useEffect(() => {
     const timer = setInterval(() => setNow(Date.now()), 250)
     return () => clearInterval(timer)
@@ -49,6 +93,14 @@ function LLMRetryIndicator({
       >
         Retry now
       </button>
+      {retry.error && (
+        <button
+          onClick={() => onShowError(retry.error!)}
+          className="px-2 py-0.5 rounded-full bg-bg-secondary hover:bg-bg-hover text-text-secondary border border-border transition-colors"
+        >
+          Show error
+        </button>
+      )}
     </div>
   )
 }
@@ -145,6 +197,14 @@ export const MessageList = memo(function MessageList({
   const [popupBlocked, setPopupBlocked] = useState(false)
   const [isScrollable, setIsScrollable] = useState(false)
   const [scrolledPastTop, setScrolledPastTop] = useState(false)
+  const [activeErrorModal, setActiveErrorModal] = useState<string | null>(null)
+
+  // Keep active error content updated if a new error comes in for the retry while modal is open
+  useEffect(() => {
+    if (activeErrorModal && llmRetry?.status === 'retrying' && llmRetry.error) {
+      setActiveErrorModal(llmRetry.error)
+    }
+  }, [activeErrorModal, llmRetry])
 
   const getViewport = useViewport(scrollContainerRef)
 
@@ -243,18 +303,24 @@ export const MessageList = memo(function MessageList({
             {llmRetry?.status === 'retrying' && isRunning && (
               <div className="flex justify-center feed-item" data-testid="llm-retry-indicator">
                 <LLMRetryIndicator
-                  key={llmRetry.attempt}
                   retry={llmRetry}
                   onRetryNow={() => sessionId && retryLLMNow(sessionId)}
+                  onShowError={(err) => setActiveErrorModal(err)}
                 />
               </div>
             )}
 
             {(llmRetry?.status === 'failed' && !isRunning) || blockedWorkflowStep ? (
               <div className="flex flex-col items-center gap-2 feed-item flex-wrap">
                 {llmRetry?.status === 'failed' && (
-                  <div className="text-xs text-text-secondary max-w-md text-center">
-                    The LLM call failed: {llmRetry.error}
+                  <div className="flex flex-col items-center gap-1.5 text-xs text-text-secondary max-w-md text-center">
+                    <span>The LLM call failed.</span>
+                    <button
+                      onClick={() => setActiveErrorModal(llmRetry.error)}
+                      className="px-2 py-0.5 rounded-full bg-bg-secondary hover:bg-bg-hover text-text-secondary border border-border transition-colors text-xs"
+                    >
+                      Show error details
+                    </button>
                   </div>
                 )}
                 {isWorkflowBlock && (
@@ -363,6 +429,26 @@ export const MessageList = memo(function MessageList({
           </button>
         </div>
       )}
+
+      {activeErrorModal && (
+        <Modal isOpen={!!activeErrorModal} onClose={() => setActiveErrorModal(null)} title="LLM Error" size="lg">
+          <div className="p-4 space-y-2">
+            {formatErrorMessage(activeErrorModal).prefix && (
+              <div className="text-xs font-medium text-text-secondary">
+                {formatErrorMessage(activeErrorModal).prefix}
+              </div>
+            )}
+            <div className="bg-bg-primary p-3 rounded border border-border overflow-y-auto max-h-[60vh] text-xs font-mono">
+              <CodeHighlight
+                code={formatErrorMessage(activeErrorModal).code}
+                language={formatErrorMessage(activeErrorModal).language}
+                variant="block"
+                showLineNumbers={formatErrorMessage(activeErrorModal).language === 'json'}
+              />
+            </div>
+          </div>
+        </Modal>
+      )}
     </div>
   )
 })

web/src/stores/session/llm-retry.test.ts

@@ -99,10 +99,15 @@ describe('LLM retry UI state', () => {
     useSessionStore.getState().handleServerMessage({
       type: 'chat.llm_retry',
       sessionId: 'session-1',
-      payload: { attempt: 2, retryInMs: 4000 },
+      payload: { attempt: 2, retryInMs: 4000, error: 'Request failed 400' },
     })
 
-    expect(useSessionStore.getState().llmRetry).toEqual({ status: 'retrying', attempt: 2, retryInMs: 4000 })
+    expect(useSessionStore.getState().llmRetry).toEqual({
+      status: 'retrying',
+      attempt: 2,
+      retryInMs: 4000,
+      error: 'Request failed 400',
+    })
     expect(useSessionStore.getState().error).toBeNull()
   })
 

web/src/stores/session/messageHandler.ts

@@ -727,7 +727,12 @@ export function handleServerMessage(
       applyChat(set, get, sessionId, (pane) => ({
         ...pane,
         error: null,
-        llmRetry: { status: 'retrying', attempt: payload.attempt, retryInMs: payload.retryInMs },
+        llmRetry: {
+          status: 'retrying',
+          attempt: payload.attempt,
+          retryInMs: payload.retryInMs,
+          ...(payload.error !== undefined ? { error: payload.error } : {}),
+        },
       }))
       break
     }

web/src/stores/session/types.ts

@@ -32,7 +32,7 @@ export interface PendingQuestion {
 
 /** Live status of an LLM failure: backing off before a retry, or the window exhausted. */
 export type LLMRetryState =
-  { status: 'retrying'; attempt: number; retryInMs: number } | { status: 'failed'; error: string }
+  { status: 'retrying'; attempt: number; retryInMs: number; error?: string } | { status: 'failed'; error: string }
 
 export interface StreamingBuffer {
   messageId: string | null