From 7fdf776b50651188c44abcdb4e4ce12a023d48c2 Mon Sep 17 00:00:00 2001
From: Chris Scott <chris@chriswritescode.dev>
Date: Sun, 7 Dec 2025 23:47:23 -0500
Subject: [PATCH 1/4] Add message queuing and retry handling with status
 indicators

---
 .../src/components/message/MessagePart.tsx    |  5 ++
 .../src/components/message/MessageThread.tsx  | 69 ++++++++++---------
 .../src/components/message/PromptInput.tsx    | 54 +++++++++++----
 .../src/components/message/ToolCallPart.tsx   | 42 +++++++++--
 frontend/src/hooks/useSSE.ts                  | 24 ++++++-
 5 files changed, 142 insertions(+), 52 deletions(-)

diff --git a/frontend/src/components/message/MessagePart.tsx b/frontend/src/components/message/MessagePart.tsx
index aaf68ff3..4522a4b4 100644
--- a/frontend/src/components/message/MessagePart.tsx
+++ b/frontend/src/components/message/MessagePart.tsx
@@ -4,9 +4,12 @@ import { Volume2, Square, Loader2 } from 'lucide-react'
 import { TextPart } from './TextPart'
 import { PatchPart } from './PatchPart'
 import { ToolCallPart } from './ToolCallPart'
+import { RetryPart } from './RetryPart'
 import { useTTS } from '@/hooks/useTTS'
 import { CopyButton } from '@/components/ui/copy-button'
 
+type RetryPartType = components['schemas']['RetryPart']
+
 type Part = components['schemas']['Part']
 
 interface MessagePartProps {
@@ -152,6 +155,8 @@ export const MessagePart = memo(function MessagePart({ part, role, allParts, par
           <span className="font-medium">{part.filename || 'File'}</span>
         </span>
       )
+    case 'retry':
+      return <RetryPart part={part as RetryPartType} />
     default:
       return 
   }
diff --git a/frontend/src/components/message/MessageThread.tsx b/frontend/src/components/message/MessageThread.tsx
index 1ca1792e..391dab9a 100644
--- a/frontend/src/components/message/MessageThread.tsx
+++ b/frontend/src/components/message/MessageThread.tsx
@@ -1,4 +1,4 @@
-import { memo } from 'react'
+import { memo, useMemo } from 'react'
 import { MessagePart } from './MessagePart'
 import type { MessageWithParts } from '@/api/types'
 
@@ -24,12 +24,24 @@ const isMessageStreaming = (msg: MessageWithParts): boolean => {
   return !('completed' in msg.info.time && msg.info.time.completed)
 }
 
-const isMessageThinking = (msg: MessageWithParts): boolean => {
-  if (msg.info.role !== 'assistant') return false
-  return msg.parts.length === 0 && isMessageStreaming(msg)
+
+
+const findPendingAssistantMessageId = (messages: MessageWithParts[]): string | undefined => {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const msg = messages[i]
+    if (msg.info.role === 'assistant' && isMessageStreaming(msg)) {
+      return msg.info.id
+    }
+  }
+  return undefined
 }
 
 export const MessageThread = memo(function MessageThread({ messages, onFileClick, onChildSessionClick }: MessageThreadProps) {
+  const pendingAssistantId = useMemo(() => {
+    if (!messages) return undefined
+    return findPendingAssistantMessageId(messages)
+  }, [messages])
+  
   if (!messages || messages.length === 0) {
     return (
       <div className="flex items-center justify-center h-full text-muted-foreground">
@@ -42,7 +54,7 @@ export const MessageThread = memo(function MessageThread({ messages, onFileClick
     <div className="flex flex-col space-y-2 p-2 overflow-x-hidden">
       {messages.map((msg) => {
         const streaming = isMessageStreaming(msg)
-        const thinking = isMessageThinking(msg)
+        const isQueued = msg.info.role === 'user' && pendingAssistantId && msg.info.id > pendingAssistantId
         
         return (
           <div
@@ -52,7 +64,9 @@ export const MessageThread = memo(function MessageThread({ messages, onFileClick
             <div
               className={`w-full rounded-lg p-1.5 ${
                 msg.info.role === 'user'
-                  ? 'bg-blue-600/20 border border-blue-600/30'
+                  ? isQueued 
+                    ? 'bg-amber-500/10 border border-amber-500/30'
+                    : 'bg-blue-600/20 border border-blue-600/30'
                   : 'bg-card/50 border border-border'
               } ${streaming ? 'animate-pulse-subtle' : ''}`}
             >
@@ -65,35 +79,28 @@ export const MessageThread = memo(function MessageThread({ messages, onFileClick
                     {new Date(msg.info.time.created).toLocaleTimeString()}
                   </span>
                 )}
-                {streaming && (
-                  <span className="text-xs text-blue-600 dark:text-blue-400 flex items-center gap-1">
-                    <span className="animate-pulse">●</span> <span className="shine-loading">Generating...</span>
+                {isQueued && (
+                  <span className="text-xs font-semibold bg-amber-500 text-amber-950 px-1.5 py-0.5 rounded">
+                    QUEUED
                   </span>
                 )}
               </div>
               
-              {thinking ? (
-                <div className="flex items-center gap-2 text-muted-foreground">
-                  <span className="animate-pulse">▋</span>
-                  <span className="text-sm shine-loading">Thinking...</span>
-                </div>
-              ) : (
-                <div className="space-y-2">
-                  {msg.parts.map((part, index) => (
-                    <div key={`${msg.info.id}-${part.id}-${index}`}>
-                      <MessagePart 
-                        part={part} 
-                        role={msg.info.role}
-                        allParts={msg.parts}
-                        partIndex={index}
-                        onFileClick={onFileClick}
-                        onChildSessionClick={onChildSessionClick}
-                        messageTextContent={msg.info.role === 'assistant' ? getMessageTextContent(msg) : undefined}
-                      />
-                    </div>
-                  ))}
-                </div>
-              )}
+              <div className="space-y-2">
+                {msg.parts.map((part, index) => (
+                  <div key={`${msg.info.id}-${part.id}-${index}`}>
+                    <MessagePart 
+                      part={part} 
+                      role={msg.info.role}
+                      allParts={msg.parts}
+                      partIndex={index}
+                      onFileClick={onFileClick}
+                      onChildSessionClick={onChildSessionClick}
+                      messageTextContent={msg.info.role === 'assistant' ? getMessageTextContent(msg) : undefined}
+                    />
+                  </div>
+                ))}
+              </div>
             </div>
           </div>
         )
diff --git a/frontend/src/components/message/PromptInput.tsx b/frontend/src/components/message/PromptInput.tsx
index 277646c7..77d65c04 100644
--- a/frontend/src/components/message/PromptInput.tsx
+++ b/frontend/src/components/message/PromptInput.tsx
@@ -11,6 +11,7 @@ import { ChevronDown } from 'lucide-react'
 
 import { CommandSuggestions } from '@/components/command/CommandSuggestions'
 import { MentionSuggestions, type MentionItem } from './MentionSuggestions'
+import { SessionStatusIndicator } from '@/components/ui/session-status-indicator'
 import { detectMentionTrigger, parsePromptToParts, getFilename, filterAgentsByQuery } from '@/lib/promptParser'
 import { getModel, formatModelName } from '@/api/providers'
 import type { components } from '@/api/opencode-types'
@@ -119,6 +120,23 @@ export function PromptInput({
 
   const handleSubmit = () => {
     if (!prompt.trim() || disabled) return
+    
+    if (hasActiveStream) {
+      const parts = parsePromptToParts(prompt, attachedFiles)
+      sendPrompt.mutate({
+        sessionID,
+        parts,
+        model: currentModel,
+        agent: selectedAgent || currentMode
+      })
+      setPrompt('')
+      setAttachedFiles(new Map())
+      setSelectedAgent(null)
+      if (textareaRef.current) {
+        textareaRef.current.style.height = 'auto'
+      }
+      return
+    }
 
     if (isBashMode) {
       const command = prompt.startsWith('!') ? prompt.slice(1) : prompt
@@ -454,16 +472,20 @@ export function PromptInput({
   }, [selectedModel, currentModel])
 
   useEffect(() => {
-    if (textareaRef.current && !disabled && !hasActiveStream) {
+    if (textareaRef.current && !disabled) {
       textareaRef.current.focus()
     }
-  }, [disabled, hasActiveStream])
+  }, [disabled])
 
   
 
   return (
     <div className="relative backdrop-blur-md bg-background opacity-95 border border-border rounded-xl p-2 md:p-3 mx-2 md:mx-4 mb-2 md:mb-5 w-[90%] md:max-w-4xl">
-      
+      {hasActiveStream && (
+        <div className="mb-2">
+          <SessionStatusIndicator sessionID={sessionID} />
+        </div>
+      )}
       
       <textarea
         ref={textareaRef}
@@ -475,7 +497,7 @@ export function PromptInput({
             ? "Enter bash command..." 
             : "Send a message..."
         }
-        disabled={disabled || hasActiveStream}
+        disabled={disabled}
         className={`w-full bg-background/90 px-2 md:px-3 py-2 text-[16px] text-foreground placeholder-muted-foreground focus:outline-none focus:bg-background resize-none min-h-[40px] max-h-[120px] disabled:opacity-50 disabled:cursor-not-allowed md:text-sm rounded-lg ${
           isBashMode 
             ? 'border-purple-500/50 bg-purple-500/5 focus:bg-background' 
@@ -537,18 +559,24 @@ export function PromptInput({
               <ChevronDown className="w-5 h-5" />
             </button>
           )}
+          {hasActiveStream && (
+            <button
+              onClick={handleStop}
+              disabled={disabled}
+              className="px-3 md:px-4 py-1.5 rounded-lg text-sm font-medium transition-colors bg-destructive hover:bg-destructive/90 text-destructive-foreground"
+              title="Stop"
+            >
+              Stop
+            </button>
+          )}
           <button
             data-submit-prompt
-            onClick={hasActiveStream ? handleStop : handleSubmit}
-            disabled={(!prompt.trim() && !hasActiveStream) || disabled}
-            className={`px-5 md:px-6 py-1.5 rounded-lg text-sm font-medium transition-colors ${
-              hasActiveStream
-                ? 'bg-destructive hover:bg-destructive/90 text-destructive-foreground' 
-                : 'bg-primary hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed text-primary-foreground'
-            }`}
-            title={hasActiveStream ? 'Stop' : 'Send'}
+            onClick={handleSubmit}
+            disabled={!prompt.trim() || disabled}
+            className="px-5 md:px-6 py-1.5 rounded-lg text-sm font-medium transition-colors bg-primary hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed text-primary-foreground"
+            title={hasActiveStream ? 'Queue message' : 'Send'}
           >
-            {hasActiveStream ? 'Stop' : 'Send'}
+            {hasActiveStream ? 'Queue' : 'Send'}
           </button>
         </div>
       </div>
diff --git a/frontend/src/components/message/ToolCallPart.tsx b/frontend/src/components/message/ToolCallPart.tsx
index 532a93f2..838ca41a 100644
--- a/frontend/src/components/message/ToolCallPart.tsx
+++ b/frontend/src/components/message/ToolCallPart.tsx
@@ -3,7 +3,7 @@ import type { components } from '@/api/opencode-types'
 import { useSettings } from '@/hooks/useSettings'
 import { useUserBash } from '@/stores/userBashStore'
 import { detectFileReferences } from '@/lib/fileReferences'
-import { ExternalLink } from 'lucide-react'
+import { ExternalLink, Loader2 } from 'lucide-react'
 import { CopyButton } from '@/components/ui/copy-button'
 
 type ToolPart = components['schemas']['ToolPart']
@@ -87,13 +87,15 @@ export function ToolCallPart({ part, onFileClick, onChildSessionClick }: ToolCal
   const getStatusIcon = () => {
     switch (part.state.status) {
       case 'completed':
-        return '✓'
+        return <span>✓</span>
       case 'error':
-        return '✗'
+        return <span>✗</span>
       case 'running':
-        return '⟳'
+        return <Loader2 className="w-3.5 h-3.5 animate-spin" />
+      case 'pending':
+        return <span className="inline-block w-2 h-2 rounded-full bg-current animate-pulse" />
       default:
-        return '○'
+        return <span>○</span>
     }
   }
 
@@ -150,8 +152,23 @@ export function ToolCallPart({ part, onFileClick, onChildSessionClick }: ToolCal
     )
   }
 
+  const getBorderStyle = () => {
+    switch (part.state.status) {
+      case 'running':
+        return 'border-yellow-500/50 shadow-sm shadow-yellow-500/10'
+      case 'pending':
+        return 'border-blue-500/30'
+      case 'error':
+        return 'border-red-500/30'
+      case 'completed':
+        return 'border-border'
+      default:
+        return 'border-border'
+    }
+  }
+
   return (
-    <div className="border border-border rounded-lg overflow-hidden my-2">
+    <div className={`border rounded-lg overflow-hidden my-2 transition-all ${getBorderStyle()}`}>
       <button
         onClick={() => setExpanded(!expanded)}
         className="w-full px-4 py-2 bg-card hover:bg-card-hover text-left flex items-center gap-2 text-sm min-w-0"
@@ -194,7 +211,18 @@ export function ToolCallPart({ part, onFileClick, onChildSessionClick }: ToolCal
       </button>
 
       {expanded && (
-        <div className="bg-card space-y-2">
+        <div className="bg-card space-y-2 p-3">
+          {part.state.status === 'pending' && (
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <div className="flex gap-0.5">
+                <span className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-bounce" style={{ animationDelay: '0ms' }} />
+                <span className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-bounce" style={{ animationDelay: '150ms' }} />
+                <span className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-bounce" style={{ animationDelay: '300ms' }} />
+              </div>
+              <span>Preparing tool call...</span>
+            </div>
+          )}
+          
           {part.state.status === 'running' && (
             <div className="text-sm">
               <div className="text-zinc-400 mb-1">Input:</div>
diff --git a/frontend/src/hooks/useSSE.ts b/frontend/src/hooks/useSSE.ts
index 9de76d96..dd58ba2f 100644
--- a/frontend/src/hooks/useSSE.ts
+++ b/frontend/src/hooks/useSSE.ts
@@ -5,6 +5,7 @@ import type { SSEEvent, MessageListResponse } from '@/api/types'
 import { permissionEvents } from './usePermissionRequests'
 import { showToast } from '@/lib/toast'
 import { settingsApi } from '@/api/settings'
+import { useSessionStatus } from '@/stores/sessionStatusStore'
 
 const MAX_RECONNECT_DELAY = 30000
 const INITIAL_RECONNECT_DELAY = 1000
@@ -50,6 +51,7 @@ export const useSSE = (opcodeUrl: string | null | undefined, directory?: string)
   const [isConnected, setIsConnected] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [isReconnecting, setIsReconnecting] = useState(false)
+  const setSessionStatus = useSessionStatus((state) => state.setStatus)
 
   const scheduleReconnect = useCallback((connectFn: () => void) => {
     if (!mountedRef.current) return
@@ -126,6 +128,16 @@ export const useSSE = (opcodeUrl: string | null | undefined, directory?: string)
           const sessionID = part.sessionID
           const messageID = part.messageID
           
+          if (part.type === 'retry') {
+            const retryPart = part as { attempt: number; error: { data: { message: string } } }
+            setSessionStatus(sessionID, { 
+              type: 'retry', 
+              attempt: retryPart.attempt,
+              message: retryPart.error?.data?.message || 'Retrying...',
+              next: Date.now() + 5000
+            })
+          }
+          
           const currentData = queryClient.getQueryData<MessageListResponse>(['opencode', 'messages', opcodeUrl, sessionID, directory])
           if (!currentData) return
           
@@ -163,6 +175,13 @@ export const useSSE = (opcodeUrl: string | null | undefined, directory?: string)
           const { info } = event.properties
           const sessionID = info.sessionID
           
+          if (info.role === 'assistant') {
+            const isComplete = 'completed' in info.time && info.time.completed
+            if (!isComplete) {
+              setSessionStatus(sessionID, { type: 'busy' })
+            }
+          }
+          
           const currentData = queryClient.getQueryData<MessageListResponse>(['opencode', 'messages', opcodeUrl, sessionID, directory])
           if (!currentData) {
             queryClient.setQueryData(['opencode', 'messages', opcodeUrl, sessionID, directory], [{ info, parts: [] }])
@@ -244,6 +263,9 @@ export const useSSE = (opcodeUrl: string | null | undefined, directory?: string)
           if (!('sessionID' in event.properties)) break
           
           const { sessionID } = event.properties
+          
+          setSessionStatus(sessionID, { type: 'idle' })
+          
           const currentData = queryClient.getQueryData<MessageListResponse>(['opencode', 'messages', opcodeUrl, sessionID, directory])
           if (!currentData) break
           
@@ -390,7 +412,7 @@ export const useSSE = (opcodeUrl: string | null | undefined, directory?: string)
         setIsConnected(false)
       }
     }
-  }, [client, queryClient, opcodeUrl, directory, scheduleReconnect, resetReconnectDelay])
+  }, [client, queryClient, opcodeUrl, directory, scheduleReconnect, resetReconnectDelay, setSessionStatus])
 
   return { isConnected, error, isReconnecting }
 }

From f48acfa06bdbea390a05fdcedecae9610a87dfdd Mon Sep 17 00:00:00 2001
From: Chris Scott <chris@chriswritescode.dev>
Date: Sun, 7 Dec 2025 23:47:54 -0500
Subject: [PATCH 2/4] Add retry handling components and session status
 management

---
 frontend/src/components/message/RetryPart.tsx |  51 ++++++
 .../ui/session-status-indicator.tsx           | 147 ++++++++++++++++++
 frontend/src/stores/sessionStatusStore.ts     |  46 ++++++
 3 files changed, 244 insertions(+)
 create mode 100644 frontend/src/components/message/RetryPart.tsx
 create mode 100644 frontend/src/components/ui/session-status-indicator.tsx
 create mode 100644 frontend/src/stores/sessionStatusStore.ts

diff --git a/frontend/src/components/message/RetryPart.tsx b/frontend/src/components/message/RetryPart.tsx
new file mode 100644
index 00000000..31032724
--- /dev/null
+++ b/frontend/src/components/message/RetryPart.tsx
@@ -0,0 +1,51 @@
+import { memo, useState, useEffect } from 'react'
+import type { components } from '@/api/opencode-types'
+import { RefreshCw, AlertTriangle } from 'lucide-react'
+
+type RetryPartType = components['schemas']['RetryPart']
+
+interface RetryPartProps {
+  part: RetryPartType
+}
+
+export const RetryPart = memo(function RetryPart({ part }: RetryPartProps) {
+  const [countdown, setCountdown] = useState(5)
+  
+  useEffect(() => {
+    if (countdown <= 0) return
+    
+    const timer = setInterval(() => {
+      setCountdown(prev => Math.max(0, prev - 1))
+    }, 1000)
+    
+    return () => clearInterval(timer)
+  }, [countdown])
+  
+  const errorMessage = part.error?.data?.message || 'An error occurred'
+  
+  return (
+    <div className="flex items-center gap-3 p-3 my-2 rounded-lg bg-amber-500/10 border border-amber-500/30">
+      <div className="flex-shrink-0">
+        <div className="relative">
+          <RefreshCw className="w-5 h-5 text-amber-500 animate-spin" style={{ animationDuration: '2s' }} />
+          <AlertTriangle className="w-3 h-3 text-amber-600 absolute -bottom-0.5 -right-0.5" />
+        </div>
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium text-amber-600 dark:text-amber-400">
+            Retry attempt {part.attempt}
+          </span>
+          {countdown > 0 && (
+            <span className="text-xs text-amber-500/80">
+              (retrying in {countdown}s)
+            </span>
+          )}
+        </div>
+        <p className="text-xs text-muted-foreground truncate mt-0.5">
+          {errorMessage}
+        </p>
+      </div>
+    </div>
+  )
+})
diff --git a/frontend/src/components/ui/session-status-indicator.tsx b/frontend/src/components/ui/session-status-indicator.tsx
new file mode 100644
index 00000000..59c1c7de
--- /dev/null
+++ b/frontend/src/components/ui/session-status-indicator.tsx
@@ -0,0 +1,147 @@
+import { memo, useEffect, useState } from 'react'
+import { useSessionStatusForSession, type SessionStatusType } from '@/stores/sessionStatusStore'
+
+interface SessionStatusIndicatorProps {
+  sessionID: string
+  className?: string
+}
+
+const SCANNER_WIDTH = 6
+const SCANNER_SEGMENTS = 12
+
+export const SessionStatusIndicator = memo(function SessionStatusIndicator({ 
+  sessionID, 
+  className = '' 
+}: SessionStatusIndicatorProps) {
+  const status = useSessionStatusForSession(sessionID)
+  const [position, setPosition] = useState(0)
+  const [direction, setDirection] = useState(1)
+  const [retryCountdown, setRetryCountdown] = useState(0)
+  
+  useEffect(() => {
+    if (status.type !== 'busy' && status.type !== 'retry') {
+      return
+    }
+    
+    const interval = setInterval(() => {
+      setPosition(prev => {
+        const next = prev + direction
+        if (next >= SCANNER_SEGMENTS - SCANNER_WIDTH) {
+          setDirection(-1)
+          return SCANNER_SEGMENTS - SCANNER_WIDTH
+        }
+        if (next <= 0) {
+          setDirection(1)
+          return 0
+        }
+        return next
+      })
+    }, 60)
+    
+    return () => clearInterval(interval)
+  }, [status.type, direction])
+  
+  useEffect(() => {
+    if (status.type !== 'retry') {
+      setRetryCountdown(0)
+      return
+    }
+    
+    const remaining = Math.max(0, Math.ceil((status.next - Date.now()) / 1000))
+    setRetryCountdown(remaining)
+    
+    const interval = setInterval(() => {
+      const newRemaining = Math.max(0, Math.ceil((status.next - Date.now()) / 1000))
+      setRetryCountdown(newRemaining)
+    }, 1000)
+    
+    return () => clearInterval(interval)
+  }, [status])
+  
+  if (status.type === 'idle') {
+    return null
+  }
+  
+  const getSegmentColor = (index: number, statusType: SessionStatusType['type']) => {
+    const distance = Math.abs(index - (position + SCANNER_WIDTH / 2))
+    const maxDistance = SCANNER_WIDTH / 2
+    
+    if (distance > maxDistance + 1) {
+      return 'bg-muted/20'
+    }
+    
+    const intensity = Math.max(0, 1 - distance / (maxDistance + 2))
+    
+    if (statusType === 'retry') {
+      if (intensity > 0.8) return 'bg-amber-500'
+      if (intensity > 0.5) return 'bg-amber-500/70'
+      if (intensity > 0.2) return 'bg-amber-500/40'
+      return 'bg-amber-500/20'
+    }
+    
+    if (intensity > 0.8) return 'bg-blue-500'
+    if (intensity > 0.5) return 'bg-blue-500/70'
+    if (intensity > 0.2) return 'bg-blue-500/40'
+    return 'bg-blue-500/20'
+  }
+  
+  return (
+    <div className={`flex items-center gap-2 ${className}`}>
+      <div className="flex gap-0.5">
+        {Array.from({ length: SCANNER_SEGMENTS }).map((_, i) => (
+          <div
+            key={i}
+            className={`w-1 h-3 rounded-sm transition-colors duration-75 ${getSegmentColor(i, status.type)}`}
+          />
+        ))}
+      </div>
+      <span className="text-xs text-muted-foreground">
+        {status.type === 'retry'  && (
+          <>
+            Retry #{status.attempt}
+            {retryCountdown > 0 && <span className="text-amber-500 ml-1">({retryCountdown}s)</span>}
+          </>
+        )}
+      </span>
+    </div>
+  )
+})
+
+interface CompactStatusIndicatorProps {
+  sessionID: string
+  className?: string
+}
+
+export const CompactStatusIndicator = memo(function CompactStatusIndicator({
+  sessionID,
+  className = ''
+}: CompactStatusIndicatorProps) {
+  const status = useSessionStatusForSession(sessionID)
+  const [frame, setFrame] = useState(0)
+  
+  useEffect(() => {
+    if (status.type === 'idle') return
+    
+    const interval = setInterval(() => {
+      setFrame(prev => (prev + 1) % 8)
+    }, 120)
+    
+    return () => clearInterval(interval)
+  }, [status.type])
+  
+  if (status.type === 'idle') {
+    return null
+  }
+  
+  const pulseFrames = ['●', '◐', '○', '◑', '●', '◐', '○', '◑']
+  const color = status.type === 'retry' ? 'text-amber-500' : 'text-blue-500'
+  
+  return (
+    <span className={`inline-flex items-center gap-1.5 ${className}`}>
+      <span className={`${color} text-sm font-mono`}>{pulseFrames[frame]}</span>
+      <span className={`text-xs ${color}`}>
+        {status.type === 'retry' ? `Retry #${status.attempt}` : 'Working'}
+      </span>
+    </span>
+  )
+})
diff --git a/frontend/src/stores/sessionStatusStore.ts b/frontend/src/stores/sessionStatusStore.ts
new file mode 100644
index 00000000..75d89059
--- /dev/null
+++ b/frontend/src/stores/sessionStatusStore.ts
@@ -0,0 +1,46 @@
+import { create } from 'zustand'
+
+export type SessionStatusType = 
+  | { type: 'idle' }
+  | { type: 'busy' }
+  | { type: 'retry'; attempt: number; message: string; next: number }
+
+interface SessionStatusStore {
+  statuses: Map<string, SessionStatusType>
+  setStatus: (sessionID: string, status: SessionStatusType) => void
+  getStatus: (sessionID: string) => SessionStatusType
+  clearStatus: (sessionID: string) => void
+}
+
+const DEFAULT_STATUS: SessionStatusType = { type: 'idle' }
+
+export const useSessionStatus = create<SessionStatusStore>((set, get) => ({
+  statuses: new Map(),
+  
+  setStatus: (sessionID: string, status: SessionStatusType) => {
+    set((state) => {
+      const newMap = new Map(state.statuses)
+      newMap.set(sessionID, status)
+      return { statuses: newMap }
+    })
+  },
+  
+  getStatus: (sessionID: string) => {
+    return get().statuses.get(sessionID) || DEFAULT_STATUS
+  },
+  
+  clearStatus: (sessionID: string) => {
+    set((state) => {
+      const newMap = new Map(state.statuses)
+      newMap.delete(sessionID)
+      return { statuses: newMap }
+    })
+  },
+}))
+
+export const useSessionStatusForSession = (sessionID: string | undefined): SessionStatusType => {
+  const status = useSessionStatus((state) => 
+    sessionID ? state.statuses.get(sessionID) : undefined
+  )
+  return status || DEFAULT_STATUS
+}

From c1aa8ba101fbd46a70e2e441f8034c434882c359 Mon Sep 17 00:00:00 2001
From: Chris Scott <chris@chriswritescode.dev>
Date: Sun, 7 Dec 2025 23:51:17 -0500
Subject: [PATCH 3/4] Fix critical linting errors and React hooks violations

---
 .../components/file-browser/FilePreview.tsx    |  2 +-
 frontend/src/components/message/TextPart.tsx   |  2 +-
 .../components/settings/KeyboardShortcuts.tsx  | 18 +++++++++---------
 .../src/components/settings/McpManager.tsx     |  2 +-
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/file-browser/FilePreview.tsx b/frontend/src/components/file-browser/FilePreview.tsx
index f69d2f24..df48fc16 100644
--- a/frontend/src/components/file-browser/FilePreview.tsx
+++ b/frontend/src/components/file-browser/FilePreview.tsx
@@ -300,7 +300,7 @@ export const FilePreview = memo(function FilePreview({ file, hideHeader = false,
               )}
               
               {showSaveButton && (
-                <Button variant="outline" size="sm" onClick={(e) => { e.stopPropagation(); e.preventDefault(); shouldVirtualize ? handleVirtualizedSaveClick() : handleSave() }} disabled={isSaving || (shouldVirtualize && !hasVirtualizedChanges)} className="border-green-600 bg-green-600/10 text-green-600 hover:bg-green-600/20 h-7 w-7 p-0">
+                <Button variant="outline" size="sm" onClick={(e) => { e.stopPropagation(); e.preventDefault(); if (shouldVirtualize) { handleVirtualizedSaveClick(); } else { handleSave(); } }} disabled={isSaving || (shouldVirtualize && !hasVirtualizedChanges)} className="border-green-600 bg-green-600/10 text-green-600 hover:bg-green-600/20 h-7 w-7 p-0">
                   <Save className="w-3 h-3" />
                 </Button>
               )}
diff --git a/frontend/src/components/message/TextPart.tsx b/frontend/src/components/message/TextPart.tsx
index 23451598..bc13285d 100644
--- a/frontend/src/components/message/TextPart.tsx
+++ b/frontend/src/components/message/TextPart.tsx
@@ -27,7 +27,7 @@ function CodeBlock({ children, className, ...props }: CodeBlockProps) {
     if (typeof node === 'number') return node.toString()
     if (Array.isArray(node)) return node.map(extractTextContent).join('')
     if (React.isValidElement(node)) {
-      const element = node as React.ReactElement<any, any>
+      const element = node as React.ReactElement<Record<string, unknown>>
       if (element.props.children) {
         return extractTextContent(element.props.children as React.ReactNode)
       }
diff --git a/frontend/src/components/settings/KeyboardShortcuts.tsx b/frontend/src/components/settings/KeyboardShortcuts.tsx
index 8ad3100a..8d901199 100644
--- a/frontend/src/components/settings/KeyboardShortcuts.tsx
+++ b/frontend/src/components/settings/KeyboardShortcuts.tsx
@@ -16,14 +16,6 @@ export function KeyboardShortcuts() {
   const [tempShortcuts, setTempShortcuts] = useState<Record<string, string>>({})
   const [currentKeys, setCurrentKeys] = useState<string>('')
 
-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center py-12">
-        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-      </div>
-    )
-  }
-
   const shortcuts = { ...DEFAULT_KEYBOARD_SHORTCUTS, ...preferences?.keyboardShortcuts, ...tempShortcuts }
 
   const handleKeyDown = (e: KeyboardEvent, action: string) => {
@@ -105,7 +97,15 @@ export function KeyboardShortcuts() {
         document.removeEventListener('keyup', handleGlobalKeyUp)
       }
     }
-  }, [recordingKey])
+  }, [recordingKey, handleKeyDown, handleKeyUp])
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
 
   return (
     <div className="bg-card border border-border rounded-lg p-6">
diff --git a/frontend/src/components/settings/McpManager.tsx b/frontend/src/components/settings/McpManager.tsx
index 6f43ce97..50224a5d 100644
--- a/frontend/src/components/settings/McpManager.tsx
+++ b/frontend/src/components/settings/McpManager.tsx
@@ -71,7 +71,7 @@ export function McpManager({ config, onUpdate, onConfigUpdate }: McpManagerProps
       if (!config) return
       
       const currentMcp = (config.content?.mcp as Record<string, any>) || {}
-      const { [serverId]: deleted, ...rest } = currentMcp
+      const { [serverId]: _deleted, ...rest } = currentMcp
       
       const updatedConfig = {
         ...config.content,

From 8d3a6bbcf31847eaa9680ffaff9cb3907e2c598c Mon Sep 17 00:00:00 2001
From: Chris Scott <chris@chriswritescode.dev>
Date: Sun, 7 Dec 2025 23:51:48 -0500
Subject: [PATCH 4/4] v0.3.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c9c14281..cb174dfe 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "opencode-webui",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "private": true,
   "type": "module",
   "packageManager": "pnpm@9.15.0",