From 6505ff5edfc84fb65e4744ee7dfd885e2299c89f Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Tue, 2 Dec 2025 20:31:59 +0000
Subject: [PATCH] fix: Add connection lost indicator to Docker page

Docker/Containers page now shows a clear error state when WebSocket
connection is lost, with a manual "Reconnect now" button. This
matches the pattern established across all other major pages.

Connection lost UX is now consistent across: Dashboard, Storage,
Backups, Replication, Hosts, and Docker.
---
 .../src/components/Docker/DockerHosts.tsx     | 42 ++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/frontend-modern/src/components/Docker/DockerHosts.tsx b/frontend-modern/src/components/Docker/DockerHosts.tsx
index 9f6020a..d3c8ce5 100644
--- a/frontend-modern/src/components/Docker/DockerHosts.tsx
+++ b/frontend-modern/src/components/Docker/DockerHosts.tsx
@@ -25,7 +25,7 @@ interface DockerHostsProps {
 
 export const DockerHosts: Component<DockerHostsProps> = (props) => {
   const navigate = useNavigate();
-  const { initialDataReceived, reconnecting, connected } = useWebSocket();
+  const { initialDataReceived, reconnecting, connected, reconnect } = useWebSocket();
 
   // Load docker metadata from localStorage or API
   const loadInitialDockerMetadata = (): DockerMetadataRecord => {
@@ -325,6 +325,46 @@ export const DockerHosts: Component<DockerHostsProps> = (props) => {
         </Card>
       </Show>
 
+      {/* Disconnected State */}
+      <Show when={!connected() && !isLoading()}>
+        <Card padding="lg" tone="danger">
+          <EmptyState
+            icon={
+              <svg
+                class="h-12 w-12 text-red-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+            }
+            title="Connection lost"
+            description={
+              reconnecting()
+                ? 'Attempting to reconnect…'
+                : 'Unable to connect to the backend server'
+            }
+            tone="danger"
+            actions={
+              !reconnecting() ? (
+                <button
+                  onClick={() => reconnect()}
+                  class="mt-2 inline-flex items-center px-4 py-2 text-xs font-medium rounded bg-red-600 text-white hover:bg-red-700 transition-colors"
+                >
+                  Reconnect now
+                </button>
+              ) : undefined
+            }
+          />
+        </Card>
+      </Show>
+
       <Show when={!isLoading()}>
         <Show
           when={sortedHosts().length > 0}