From 7ddea000e10ffedc13fb347e14f1300fcde01859 Mon Sep 17 00:00:00 2001
From: Chris Scott <99081550+chriswritescode-dev@users.noreply.github.com>
Date: Thu, 5 Feb 2026 00:11:30 -0500
Subject: [PATCH 1/3] Add SSE reconnection before critical actions and handle
 Cloudflare 524 errors

---
 frontend/src/contexts/EventContext.tsx | 17 ++++++++-
 frontend/src/hooks/useOpenCode.ts      | 14 ++++++++
 frontend/src/lib/sseManager.ts         | 49 ++++++++++++++++++++++++++
 3 files changed, 79 insertions(+), 1 deletion(-)

diff --git a/frontend/src/contexts/EventContext.tsx b/frontend/src/contexts/EventContext.tsx
index 6707aa1c..6b2816f9 100644
--- a/frontend/src/contexts/EventContext.tsx
+++ b/frontend/src/contexts/EventContext.tsx
@@ -6,7 +6,7 @@ import { OpenCodeClient } from '@/api/opencode'
 import { listRepos } from '@/api/repos'
 import type { PermissionRequest, PermissionResponse, QuestionRequest, SSEEvent } from '@/api/types'
 import { showToast } from '@/lib/toast'
-import { subscribeToSSE, addSSEDirectory } from '@/lib/sseManager'
+import { subscribeToSSE, addSSEDirectory, ensureSSEConnected } from '@/lib/sseManager'
 import { OPENCODE_API_ENDPOINT } from '@/config'
 import { addToSessionKeyedState, removeFromSessionKeyedState } from '@/lib/sessionKeyedState'
 
@@ -156,6 +156,11 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
   }, [allPermissions.length, showPermissionDialog])
 
   const respondToPermission = useCallback(async (permissionID: string, sessionID: string, response: PermissionResponse) => {
+    const connected = await ensureSSEConnected()
+    if (!connected) {
+      showToast.error('Unable to connect. Please try again.')
+      throw new Error('SSE connection failed')
+    }
     const client = getClient(sessionID)
     if (!client) throw new Error('No client found for session')
     await client.respondToPermission(sessionID, permissionID, response)
@@ -163,6 +168,11 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
   }, [getClient, removePermission])
 
   const replyToQuestion = useCallback(async (requestID: string, answers: string[][]) => {
+    const connected = await ensureSSEConnected()
+    if (!connected) {
+      showToast.error('Unable to connect. Please try again.')
+      throw new Error('SSE connection failed')
+    }
     const question = Object.values(questionsBySession).flat().find(q => q.id === requestID)
     if (!question) throw new Error('Question not found')
     const client = getClient(question.sessionID)
@@ -172,6 +182,11 @@ export function EventProvider({ children }: { children: React.ReactNode }) {
   }, [getClient, removeQuestion, questionsBySession])
 
   const rejectQuestion = useCallback(async (requestID: string) => {
+    const connected = await ensureSSEConnected()
+    if (!connected) {
+      showToast.error('Unable to connect. Please try again.')
+      throw new Error('SSE connection failed')
+    }
     const question = Object.values(questionsBySession).flat().find(q => q.id === requestID)
     if (!question) throw new Error('Question not found')
     const client = getClient(question.sessionID)
diff --git a/frontend/src/hooks/useOpenCode.ts b/frontend/src/hooks/useOpenCode.ts
index 2b989e56..10bb5284 100644
--- a/frontend/src/hooks/useOpenCode.ts
+++ b/frontend/src/hooks/useOpenCode.ts
@@ -11,6 +11,7 @@ import type { paths, components } from "../api/opencode-types";
 import { parseNetworkError } from "../lib/opencode-errors";
 import { showToast } from "../lib/toast";
 import { useSessionStatus } from "../stores/sessionStatusStore";
+import { ensureSSEConnected, reconnectSSE } from "../lib/sseManager";
 
 const titleGeneratingSessionsState = new Set<string>();
 const titleGeneratingListeners = new Set<() => void>();
@@ -267,6 +268,12 @@ export const useSendPrompt = (opcodeUrl: string | null | undefined, directory?:
     }) => {
       if (!client) throw new Error("No client available");
 
+      const connected = await ensureSSEConnected();
+      if (!connected) {
+        showToast.error("Unable to connect. Please try again.");
+        throw new Error("SSE connection failed");
+      }
+
       setSessionStatus(sessionID, { type: "busy" });
 
       const optimisticUserID = `optimistic_user_${Date.now()}_${Math.random()}`;
@@ -344,6 +351,13 @@ export const useSendPrompt = (opcodeUrl: string | null | undefined, directory?:
       if (isNetworkError) {
         return;
       }
+
+      const fetchError = error as { statusCode?: number };
+      const isCloudflareTimeout = fetchError.statusCode === 524;
+      if (isCloudflareTimeout) {
+        reconnectSSE();
+        return;
+      }
       
       setSessionStatus(sessionID, { type: "idle" });
       queryClient.setQueryData<MessageListResponse>(
diff --git a/frontend/src/lib/sseManager.ts b/frontend/src/lib/sseManager.ts
index 59007af0..fe86427e 100644
--- a/frontend/src/lib/sseManager.ts
+++ b/frontend/src/lib/sseManager.ts
@@ -265,6 +265,51 @@ class SSEManager {
   getConnectionStatus(): boolean {
     return this.isConnected
   }
+
+  async ensureConnected(timeoutMs: number = 5000): Promise<boolean> {
+    if (this.isConnected && this.clientId) {
+      return true
+    }
+
+    if (this.subscribers.size === 0) {
+      return false
+    }
+
+    this.reconnectDelay = RECONNECT_DELAY_MS
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout)
+      this.reconnectTimeout = null
+    }
+    
+    if (this.eventSource) {
+      this.eventSource.close()
+      this.eventSource = null
+    }
+
+    return new Promise<boolean>((resolve) => {
+      const timeout = setTimeout(() => {
+        resolve(false)
+      }, timeoutMs)
+
+      const checkConnection = () => {
+        if (this.isConnected && this.clientId) {
+          clearTimeout(timeout)
+          resolve(true)
+        }
+      }
+
+      const originalNotify = this.notifyStatusChange.bind(this)
+      this.notifyStatusChange = (connected: boolean) => {
+        originalNotify(connected)
+        if (connected) {
+          this.notifyStatusChange = originalNotify
+          checkConnection()
+        }
+      }
+
+      this.connect()
+    })
+  }
 }
 
 export const sseManager = SSEManager.getInstance()
@@ -291,3 +336,7 @@ export function reconnectSSE(): void {
 export function isSSEConnected(): boolean {
   return sseManager.getConnectionStatus()
 }
+
+export async function ensureSSEConnected(timeoutMs?: number): Promise<boolean> {
+  return sseManager.ensureConnected(timeoutMs)
+}

From ff0698a7a9001393eb1a65d2304db79bf6d8bf2d Mon Sep 17 00:00:00 2001
From: Chris Scott <99081550+chriswritescode-dev@users.noreply.github.com>
Date: Thu, 5 Feb 2026 18:42:32 -0500
Subject: [PATCH 2/3] refactor: improve responsive layout in QuestionPrompt
 component

---
 .../src/components/message/PromptInput.tsx    |  2 +-
 .../src/components/session/QuestionPrompt.tsx | 90 +++++++++----------
 2 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/frontend/src/components/message/PromptInput.tsx b/frontend/src/components/message/PromptInput.tsx
index e2d44cc2..680fe783 100644
--- a/frontend/src/components/message/PromptInput.tsx
+++ b/frontend/src/components/message/PromptInput.tsx
@@ -762,7 +762,7 @@ return (
         <button
           onClick={handleStop}
           disabled={disabled}
-          className="border border-white fixed bottom-19 right-0 md:hidden z-50 p-3 rounded-xl transition-all duration-200 active:scale-95 hover:scale-105 bg-gradient-to-br from-red-600 to-red-700 hover:from-red-500 hover:to-red-600 text-destructive-foreground border border-red-500/60 shadow-lg shadow-red-500/30"
+          className="border  fixed bottom-19 right-0 md:hidden z-50 p-3 rounded-xl transition-all duration-200 active:scale-95 hover:scale-105 bg-gradient-to-br from-red-600 to-red-700 hover:from-red-500 hover:to-red-600 text-destructive-foreground border border-red-500/60 shadow-lg shadow-red-500/30"
           title="Stop"
         >
           <SquareFill className="w-5 h-5" />
diff --git a/frontend/src/components/session/QuestionPrompt.tsx b/frontend/src/components/session/QuestionPrompt.tsx
index 8046cc5b..da675d07 100644
--- a/frontend/src/components/session/QuestionPrompt.tsx
+++ b/frontend/src/components/session/QuestionPrompt.tsx
@@ -181,18 +181,18 @@ export function QuestionPrompt({ question, onReply, onReject }: QuestionPromptPr
     <div 
       className="w-full bg-gradient-to-br from-blue-500/10 to-blue-600/5 border-2 border-blue-500/30 rounded-xl shadow-lg shadow-blue-500/10 backdrop-blur-sm mb-3 overflow-hidden"
     >
-      <div className="flex items-center justify-between px-3 py-2 border-b border-blue-500/20 bg-blue-500/5">
+      <div className="flex items-center justify-between px-2 py-1.5 sm:px-3 sm:py-2 border-b border-blue-500/20 bg-blue-500/5">
         <div className="flex items-center gap-2">
           {totalSteps > 1 && (
             <button
               onClick={goToPrev}
               disabled={currentIndex === 0}
-              className="p-1 rounded hover:bg-blue-500/20 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+              className="p-0.5 sm:p-1 rounded hover:bg-blue-500/20 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
             >
-              <ChevronLeft className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+              <ChevronLeft className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-blue-600 dark:text-blue-400" />
             </button>
           )}
-          <span className="text-sm font-semibold text-blue-400">
+          <span className="text-xs sm:text-sm font-semibold text-blue-400">
             {isConfirmStep ? 'Review' : (
               totalSteps > 1 
                 ? `Question ${currentIndex + 1}/${questions.length}` 
@@ -203,22 +203,22 @@ export function QuestionPrompt({ question, onReply, onReject }: QuestionPromptPr
             <button
               onClick={goToNext}
               disabled={currentIndex === totalSteps - 1}
-              className="p-1 rounded hover:bg-blue-500/20 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+              className="p-0.5 sm:p-1 rounded hover:bg-blue-500/20 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
             >
-              <ChevronRight className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+              <ChevronRight className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-blue-600 dark:text-blue-400" />
             </button>
           )}
         </div>
         <button
           onClick={handleReject}
           disabled={isSubmitting}
-          className="p-1.5 rounded-lg hover:bg-red-500/20 text-muted-foreground hover:text-red-500 transition-colors"
+          className="p-1 sm:p-1.5 rounded-lg hover:bg-red-500/20 text-muted-foreground hover:text-red-500 transition-colors"
         >
-          <X className="w-4 h-4" />
+          <X className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
         </button>
       </div>
 
-      <div className="p-3 max-h-[70vh] overflow-y-auto">
+      <div className="p-2 sm:p-3 max-h-[50vh] sm:max-h-[70vh] overflow-y-auto overflow-x-hidden">
         {isConfirmStep ? (
           <ConfirmStep 
             questions={questions} 
@@ -243,7 +243,7 @@ export function QuestionPrompt({ question, onReply, onReject }: QuestionPromptPr
       </div>
 
       {totalSteps > 1 && (
-        <div className="flex justify-center gap-1.5 py-2 border-t border-blue-500/10">
+        <div className="flex justify-center gap-1 sm:gap-1.5 py-1.5 sm:py-2 border-t border-blue-500/10">
           {Array.from({ length: totalSteps }).map((_, i) => (
             <button
               key={i}
@@ -252,7 +252,7 @@ export function QuestionPrompt({ question, onReply, onReject }: QuestionPromptPr
                 setExpandedOther(null)
               }}
               className={cn(
-                "w-2 h-2 rounded-full transition-all duration-200",
+                "w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full transition-all duration-200",
                 i === currentIndex 
                   ? "bg-blue-500 scale-125" 
                   : i < questions.length && hasAnswerForQuestion(i)
@@ -264,13 +264,12 @@ export function QuestionPrompt({ question, onReply, onReject }: QuestionPromptPr
         </div>
       )}
 
-      <div className="flex gap-2 px-3 pb-3">
+      <div className="flex gap-1.5 sm:gap-2 px-2 pb-2 sm:px-3 sm:pb-3">
         <Button
-          variant="outline"
           size="sm"
           onClick={handleReject}
           disabled={isSubmitting}
-          className="flex-1 h-10 border-blue-500/30 hover:bg-blue-500/10 hover:border-blue-500/50"
+          className="flex-1 h-8 sm:h-10 text-xs sm:text-sm bg-muted hover:bg-muted/80 text-foreground"
         >
           Dismiss
         </Button>
@@ -280,10 +279,10 @@ export function QuestionPrompt({ question, onReply, onReject }: QuestionPromptPr
               size="sm"
               onClick={handleSubmit}
               disabled={isSubmitting || !allQuestionsAnswered}
-              className="flex-1 h-10 bg-blue-600 hover:bg-blue-700 text-white"
+              className="flex-1 h-8 sm:h-10 text-xs sm:text-sm bg-emerald-600 hover:bg-emerald-700 text-white"
             >
               {isSubmitting ? (
-                <Loader2 className="w-4 h-4 animate-spin" />
+                <Loader2 className="w-3.5 h-3.5 sm:w-4 sm:h-4 animate-spin" />
               ) : (
                 'Submit'
               )}
@@ -293,10 +292,11 @@ export function QuestionPrompt({ question, onReply, onReject }: QuestionPromptPr
               size="sm"
               onClick={handleNext}
               disabled={currentIndex === totalSteps - 1 || (expandedOther === currentIndex && !customInputs[currentIndex]?.trim())}
-              className="flex-1 h-10 bg-blue-600 hover:bg-blue-700 text-white"
+              className="flex-1 h-8 sm:h-10 text-xs sm:text-sm bg-emerald-600 hover:bg-emerald-700 text-white"
             >
-              {expandedOther === currentIndex ? 'Confirm' : (currentIndex === questions.length - 1 ? 'Review' : 'Next')}
-              <ChevronRight className="w-4 h-4 ml-1" />
+              <span className="hidden sm:inline">{expandedOther === currentIndex ? 'Confirm' : (currentIndex === questions.length - 1 ? 'Review' : 'Next')}</span>
+              <span className="sm:hidden">{expandedOther === currentIndex ? 'OK' : (currentIndex === questions.length - 1 ? 'Review' : '→')}</span>
+              <ChevronRight className="hidden sm:block w-4 h-4 ml-1" />
             </Button>
           )
         )}
@@ -346,15 +346,15 @@ function QuestionStep({
   const isCustomSelected = confirmedCustom && answers.includes(confirmedCustom)
 
   return (
-    <div className="space-y-3">
-      <p className="text-sm font-semibold text-foreground">
+    <div className="space-y-2 sm:space-y-3">
+      <p className="text-xs sm:text-sm font-semibold text-foreground">
         {question.question}
         {isMultiSelect && (
           <span className="text-foreground/60 font-normal ml-1">(select all that apply)</span>
         )}
       </p>
 
-      <div className="space-y-2">
+      <div className="space-y-1.5 sm:space-y-2">
         {question.options.map((option, i) => {
           const isSelected = answers.includes(option.label)
           return (
@@ -362,24 +362,24 @@ function QuestionStep({
               key={i}
               onClick={() => onSelectOption(option.label)}
               className={cn(
-                "w-full text-left p-3 rounded-lg border-2 transition-all duration-200 active:scale-[0.98]",
+                "w-full text-left p-2 sm:p-3 rounded-lg border-2 transition-all duration-200 active:scale-[0.98]",
                 isSelected
                   ? "border-blue-500 bg-blue-500/10"
                   : "border-border hover:border-blue-500/50 hover:bg-blue-500/5"
               )}
             >
-              <div className="flex items-start justify-between gap-2">
-                <div className="flex items-center gap-2 min-w-0">
+              <div className="flex items-start justify-between gap-1.5 sm:gap-2">
+                <div className="flex items-center gap-1.5 sm:gap-2 min-w-0">
                   <div className={cn(
-                    "w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-colors",
+                    "w-4 h-4 sm:w-5 sm:h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-colors",
                     isSelected 
                       ? "border-blue-500 bg-blue-500" 
                       : "border-muted-foreground"
                   )}>
-                    {isSelected && <Check className="w-3 h-3 text-white" />}
+                    {isSelected && <Check className="w-2.5 h-2.5 sm:w-3 sm:h-3 text-white" />}
                   </div>
                   <span className={cn(
-                    "text-sm font-semibold",
+                    "text-xs sm:text-sm font-semibold",
                     isSelected ? "text-blue-400" : "text-foreground"
                   )}>
                     {option.label}
@@ -387,7 +387,7 @@ function QuestionStep({
                 </div>
               </div>
               {option.description && (
-                <p className="text-xs text-foreground/70 mt-1 ml-7">
+                <p className="text-[10px] sm:text-xs text-foreground/70 mt-0.5 sm:mt-1 ml-5 sm:ml-7">
                   {option.description}
                 </p>
               )}
@@ -404,23 +404,23 @@ function QuestionStep({
             }
           }}
           className={cn(
-            "w-full text-left p-3 rounded-lg border-2 transition-all duration-200",
+            "w-full text-left p-2 sm:p-3 rounded-lg border-2 transition-all duration-200",
             expandedOther || isCustomSelected
               ? "border-blue-500 bg-blue-500/10"
               : "border-border hover:border-blue-500/50 hover:bg-blue-500/5"
           )}
         >
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1.5 sm:gap-2">
             <div className={cn(
-              "w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-colors",
+              "w-4 h-4 sm:w-5 sm:h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-colors",
               isCustomSelected
                 ? "border-blue-500 bg-blue-500" 
                 : "border-muted-foreground"
             )}>
-              {isCustomSelected && <Check className="w-3 h-3 text-white" />}
+              {isCustomSelected && <Check className="w-2.5 h-2.5 sm:w-3 sm:h-3 text-white" />}
             </div>
             <span className={cn(
-              "text-sm font-semibold",
+              "text-xs sm:text-sm font-semibold",
               expandedOther || isCustomSelected ? "text-blue-400" : "text-foreground"
             )}>
               Other...
@@ -429,13 +429,13 @@ function QuestionStep({
         </button>
 
         {expandedOther && (
-          <div className="ml-7 space-y-2 animate-in slide-in-from-top-2 duration-200">
+          <div className="ml-5 sm:ml-7 space-y-1.5 sm:space-y-2 animate-in slide-in-from-top-2 duration-200">
             <Textarea
               ref={textareaRef}
               value={customInput}
               onChange={(e) => onCustomInputChange(e.target.value)}
               placeholder="Type your own answer..."
-              className="min-h-[80px] text-sm resize-none border-blue-500/30 focus:border-blue-500"
+              className="min-h-[60px] sm:min-h-[80px] text-xs sm:text-sm resize-none border-blue-500/30 focus:border-blue-500"
               onKeyDown={(e) => {
                 if (e.key === 'Enter' && !e.shiftKey) {
                   e.preventDefault()
@@ -450,7 +450,7 @@ function QuestionStep({
         )}
 
         {!expandedOther && isCustomSelected && (
-          <div className="ml-7 text-xs text-muted-foreground">
+          <div className="ml-5 sm:ml-7 text-[10px] sm:text-xs text-muted-foreground">
             {confirmedCustom}
           </div>
         )}
@@ -467,10 +467,10 @@ interface ConfirmStepProps {
 
 function ConfirmStep({ questions, answers, onEditQuestion }: ConfirmStepProps) {
   return (
-    <div className="space-y-3">
-      <p className="text-sm font-semibold text-foreground">Review your answers</p>
+    <div className="space-y-2 sm:space-y-3">
+      <p className="text-xs sm:text-sm font-semibold text-foreground">Review your answers</p>
       
-      <div className="space-y-2">
+      <div className="space-y-1.5 sm:space-y-2">
         {questions.map((q, i) => {
           const answer = answers[i] ?? []
           const hasAnswer = answer.length > 0
@@ -479,23 +479,23 @@ function ConfirmStep({ questions, answers, onEditQuestion }: ConfirmStepProps) {
               key={i}
               onClick={() => onEditQuestion(i)}
               className={cn(
-                "w-full text-left p-3 rounded-lg border transition-colors",
+                "w-full text-left p-2 sm:p-3 rounded-lg border transition-colors",
                 hasAnswer 
                   ? "border-green-500/40 bg-green-500/10 hover:bg-green-500/15" 
                   : "border-red-500/40 bg-red-500/10 hover:bg-red-500/15"
               )}
             >
-              <div className="flex items-start justify-between gap-2">
+              <div className="flex items-start justify-between gap-1.5 sm:gap-2">
                 <div className="min-w-0 flex-1">
-                  <p className="text-xs text-foreground/60 truncate">{q.header}</p>
+                  <p className="text-[10px] sm:text-xs text-foreground/60 truncate">{q.header}</p>
                   <p className={cn(
-                    "text-sm font-semibold mt-0.5",
+                    "text-xs sm:text-sm font-semibold mt-0.5",
                     hasAnswer ? "text-green-400" : "text-red-400"
                   )}>
                     {hasAnswer ? answer.join(', ') : '(not answered)'}
                   </p>
                 </div>
-                <ChevronRight className="w-4 h-4 text-foreground/50 flex-shrink-0 mt-1" />
+                <ChevronRight className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-foreground/50 flex-shrink-0 mt-0.5 sm:mt-1" />
               </div>
             </button>
           )

From 85726990b20a9374d4e329477f0714ae311f1ce8 Mon Sep 17 00:00:00 2001
From: Chris Scott <99081550+chriswritescode-dev@users.noreply.github.com>
Date: Thu, 5 Feb 2026 18:42:47 -0500
Subject: [PATCH 3/3] fix: proper cache updates for OpenCode version on
 install/upgrade

---
 .../components/settings/OpenCodeConfigManager.tsx | 15 ++++++++++++---
 .../components/settings/VersionSelectDialog.tsx   | 15 +++++++++++++--
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/settings/OpenCodeConfigManager.tsx b/frontend/src/components/settings/OpenCodeConfigManager.tsx
index 434a68b1..8a7390ee 100644
--- a/frontend/src/components/settings/OpenCodeConfigManager.tsx
+++ b/frontend/src/components/settings/OpenCodeConfigManager.tsx
@@ -105,6 +105,12 @@ export function OpenCodeConfigManager() {
       return await settingsApi.upgradeOpenCode()
     },
     onSuccess: (data) => {
+      if (data.upgraded && data.newVersion) {
+        queryClient.setQueryData(['health'], (old: Record<string, unknown> | undefined) => {
+          if (!old) return old
+          return { ...old, opencodeVersion: data.newVersion }
+        })
+      }
       invalidateConfigCaches(queryClient)
       if (data.upgraded) {
         showToast.success(`Upgraded to v${data.newVersion} and server restarted`, { id: 'upgrade-opencode' })
@@ -113,15 +119,17 @@ export function OpenCodeConfigManager() {
       }
     },
     onError: (error) => {
-      invalidateConfigCaches(queryClient)
-      
       const defaultMessage = 'Failed to upgrade OpenCode'
       
       if (error && typeof error === 'object' && 'response' in error) {
         const response = (error as { response?: { data?: { recovered?: boolean; recoveryMessage?: string; newVersion?: string } } }).response
         const data = response?.data
         
-        if (data?.recovered) {
+        if (data?.recovered && data.newVersion) {
+          queryClient.setQueryData(['health'], (old: Record<string, unknown> | undefined) => {
+            if (!old) return old
+            return { ...old, opencodeVersion: data.newVersion }
+          })
           showToast.success(`Upgrade failed but server recovered at v${data.newVersion}`, { id: 'upgrade-opencode' })
         } else {
           showToast.error(data?.recoveryMessage || defaultMessage, { id: 'upgrade-opencode' })
@@ -129,6 +137,7 @@ export function OpenCodeConfigManager() {
       } else {
         showToast.error(defaultMessage, { id: 'upgrade-opencode' })
       }
+      invalidateConfigCaches(queryClient)
     },
   })
 
diff --git a/frontend/src/components/settings/VersionSelectDialog.tsx b/frontend/src/components/settings/VersionSelectDialog.tsx
index f2f5de7a..d34c0cae 100644
--- a/frontend/src/components/settings/VersionSelectDialog.tsx
+++ b/frontend/src/components/settings/VersionSelectDialog.tsx
@@ -5,6 +5,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } f
 import { Button } from '@/components/ui/button'
 import { settingsApi } from '@/api/settings'
 import { showToast } from '@/lib/toast'
+import { invalidateConfigCaches } from '@/lib/queryInvalidation'
 
 interface VersionSelectDialogProps {
   open: boolean
@@ -25,20 +26,30 @@ export function VersionSelectDialog({ open, onOpenChange }: VersionSelectDialogP
   const installMutation = useMutation({
     mutationFn: (version: string) => settingsApi.installOpenCodeVersion(version),
     onSuccess: (result) => {
+      if (result.newVersion) {
+        queryClient.setQueryData(['health'], (old: Record<string, unknown> | undefined) => {
+          if (!old) return old
+          return { ...old, opencodeVersion: result.newVersion }
+        })
+      }
       queryClient.invalidateQueries({ queryKey: ['opencode-versions'] })
-      queryClient.invalidateQueries({ queryKey: ['server-health'] })
+      invalidateConfigCaches(queryClient)
       showToast.success(result.message)
       onOpenChange(false)
     },
     onError: (error) => {
       queryClient.invalidateQueries({ queryKey: ['opencode-versions'] })
-      queryClient.invalidateQueries({ queryKey: ['server-health'] })
+      invalidateConfigCaches(queryClient)
       
       if (error && typeof error === 'object' && 'response' in error) {
         const response = (error as { response?: { data?: { recovered?: boolean; recoveryMessage?: string; newVersion?: string } } }).response
         const data = response?.data
         
         if (data?.recovered) {
+          queryClient.setQueryData(['health'], (old: Record<string, unknown> | undefined) => {
+            if (!old) return old
+            return { ...old, opencodeVersion: data.newVersion }
+          })
           showToast.success(`Install failed but server recovered at v${data.newVersion}`)
         } else {
           showToast.error(data?.recoveryMessage || 'Failed to install version')