From a9a3e9992ddcd9277cf28a876dbd9308b428880b Mon Sep 17 00:00:00 2001
From: Cal Corum <calcorum@users.noreply.github.com>
Date: Tue, 13 Jan 2026 20:52:34 -0600
Subject: [PATCH] CLAUDE: Add error boundary UI for WebSocket failures
 (HIGH-001)

When WebSocket connection fails after max attempts (permanentlyFailed state):
- Show red error banner with "Connection Failed" message and "Try Again" button
- Loading modal distinguishes between connecting/reconnecting/failed states
- "Try Again" button uses manualRetry() to reset state and attempt fresh connection
- Yellow reconnecting banner only shows during active reconnection attempts

Uses permanentlyFailed state and manualRetry() from HIGH-002.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend-sba/pages/games/[id].vue | 54 +++++++++++++++++++++++++------
 1 file changed, 44 insertions(+), 10 deletions(-)

diff --git a/frontend-sba/pages/games/[id].vue b/frontend-sba/pages/games/[id].vue
index af217f4..3a00f89 100755
--- a/frontend-sba/pages/games/[id].vue
+++ b/frontend-sba/pages/games/[id].vue
@@ -14,9 +14,39 @@
 
     <!-- Main Game Container -->
     <div class="container mx-auto px-4 py-6 lg:py-8">
-      <!-- Connection Status Banner -->
+      <!-- Connection Error Banner (Permanently Failed) -->
       <div
-        v-if="!isConnected"
+        v-if="permanentlyFailed"
+        class="mb-4 bg-red-50 border-l-4 border-red-500 p-4 rounded-lg"
+      >
+        <div class="flex items-center justify-between">
+          <div class="flex items-center">
+            <div class="flex-shrink-0">
+              <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+              </svg>
+            </div>
+            <div class="ml-3">
+              <p class="text-sm font-medium text-red-800">
+                Connection Failed
+              </p>
+              <p class="text-sm text-red-700 mt-1">
+                Unable to connect to the game server after multiple attempts. Please check your internet connection and try again.
+              </p>
+            </div>
+          </div>
+          <button
+            @click="manualRetry"
+            class="ml-4 px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md transition flex-shrink-0"
+          >
+            Try Again
+          </button>
+        </div>
+      </div>
+
+      <!-- Connection Status Banner (Reconnecting) -->
+      <div
+        v-else-if="!isConnected"
         class="mb-4 bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-lg"
       >
         <div class="flex items-center justify-between">
@@ -186,7 +216,10 @@
           </div>
 
           <p class="text-gray-900 dark:text-white font-semibold">
-            {{ isConnecting ? 'Connecting to game...' : 'Connection Failed' }}
+            {{ isConnecting ? 'Connecting to game...' : permanentlyFailed ? 'Connection Failed' : 'Reconnecting...' }}
+          </p>
+          <p v-if="permanentlyFailed" class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+            Unable to reach server after multiple attempts
           </p>
 
           <!-- Status info -->
@@ -196,10 +229,10 @@
               <span class="text-gray-700 dark:text-gray-300">Auth: {{ authStore.isAuthenticated ? 'OK' : authStore.isLoading ? 'Checking...' : 'Failed' }}</span>
             </div>
             <div class="flex items-center gap-2 text-sm mt-1">
-              <span :class="isConnected ? 'text-green-600' : isConnecting ? 'text-yellow-600' : 'text-red-600'">●</span>
-              <span class="text-gray-700 dark:text-gray-300">WebSocket: {{ isConnected ? 'Connected' : isConnecting ? 'Connecting...' : 'Disconnected' }}</span>
+              <span :class="isConnected ? 'text-green-600' : isConnecting ? 'text-yellow-600' : permanentlyFailed ? 'text-red-600' : 'text-orange-500'">●</span>
+              <span class="text-gray-700 dark:text-gray-300">WebSocket: {{ isConnected ? 'Connected' : isConnecting ? 'Connecting...' : permanentlyFailed ? 'Failed' : 'Reconnecting...' }}</span>
             </div>
-            <p v-if="connectionError" class="text-xs text-red-600 mt-2">Error: {{ connectionError }}</p>
+            <p v-if="connectionError" class="text-xs text-red-600 mt-2">{{ connectionError }}</p>
             <!-- Debug info -->
             <div class="mt-2 text-xs text-gray-500 border-t pt-2">
               <p>WS URL: {{ wsDebugUrl }}</p>
@@ -211,10 +244,11 @@
           <!-- Action buttons -->
           <div class="mt-4 flex flex-col gap-2">
             <button
-              @click="forceReconnect"
-              class="w-full px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition"
+              @click="permanentlyFailed ? manualRetry() : forceReconnect()"
+              :class="permanentlyFailed ? 'bg-red-600 hover:bg-red-700' : 'bg-blue-600 hover:bg-blue-700'"
+              class="w-full px-4 py-2 text-sm font-medium text-white rounded-lg transition"
             >
-              Retry Connection
+              {{ permanentlyFailed ? 'Try Again' : 'Retry Connection' }}
             </button>
             <button
               v-if="!authStore.isAuthenticated"
@@ -359,7 +393,7 @@ const uiStore = useUiStore()
 const gameId = computed(() => route.params.id as string)
 
 // WebSocket connection
-const { socket, isConnected, isConnecting, connectionError, connect, forceReconnect } = useWebSocket()
+const { socket, isConnected, isConnecting, connectionError, permanentlyFailed, connect, forceReconnect, manualRetry } = useWebSocket()
 
 // Debug info for troubleshooting Safari WebSocket issues
 const config = useRuntimeConfig()