From 4041252028ef0a27bfa5f2f632aed1aeab981712 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Mon, 30 Mar 2026 13:54:35 +0300
Subject: [PATCH] fix: Docker health indicator shows immediately after login

Use $effect instead of onMount to start SSE and health polling,
so they activate on client-side navigation after login without
requiring a full page reload.
---
 web/src/routes/+layout.svelte | 51 ++++++++++++++++++++---------------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 502b841..592bdd7 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import '../app.css';
 	import type { Snippet } from 'svelte';
-	import { onMount, onDestroy } from 'svelte';
+	import { onDestroy } from 'svelte';
 	import { page } from '$app/stores';
 	import Toast from '$lib/components/Toast.svelte';
 	import ThemeToggle from '$lib/components/ThemeToggle.svelte';
@@ -37,6 +37,7 @@
 	let sseConnection: SSEConnection | null = null;
 	let sidebarOpen = $state(false);
 	let dockerConnected = $state<boolean | null>(null);
+	let healthChecked = $state(false);
 	let healthInterval: ReturnType<typeof setInterval> | null = null;
 
 	// Hide sidebar and chrome on the login page.
@@ -69,29 +70,35 @@
 		window.location.href = '/login';
 	}
 
-	onMount(() => {
-		if (isAuthenticated()) {
-			sseConnection = connectGlobalEvents({
-				onInstanceStatus(payload) {
-					instanceStatusStore.update(payload);
-				},
-				onDeployStatus(payload) {
-					instanceStatusStore.notifyDeploy(payload);
-				}
-			});
+	// Start SSE and health polling when authenticated.
+	// Uses $effect to react to route changes (e.g., after login navigation).
+	$effect(() => {
+		// Read pathname to re-run on navigation.
+		void $page.url.pathname;
 
-			// Poll Docker health every 30s.
-			async function checkHealth() {
-				try {
-					const h = await api.getHealth();
-					dockerConnected = h.docker;
-				} catch {
-					dockerConnected = null;
-				}
+		if (!isAuthenticated() || sseConnection) return;
+
+		sseConnection = connectGlobalEvents({
+			onInstanceStatus(payload) {
+				instanceStatusStore.update(payload);
+			},
+			onDeployStatus(payload) {
+				instanceStatusStore.notifyDeploy(payload);
 			}
-			checkHealth();
-			healthInterval = setInterval(checkHealth, 30_000);
+		});
+
+		// Poll Docker health every 30s.
+		async function checkHealth() {
+			try {
+				const h = await api.getHealth();
+				dockerConnected = h.docker;
+			} catch {
+				dockerConnected = false;
+			}
+			healthChecked = true;
 		}
+		checkHealth();
+		healthInterval = setInterval(checkHealth, 30_000);
 	});
 
 	onDestroy(() => {
@@ -173,7 +180,7 @@
 
 		<!-- Footer controls -->
 		<div class="space-y-3 border-t border-[var(--border-primary)] px-4 py-3">
-			{#if dockerConnected !== null}
+			{#if healthChecked}
 				<div class="flex items-center gap-2 rounded-md px-2 py-1.5 text-xs {dockerConnected ? 'text-emerald-600' : 'text-red-500'}">
 					<span class="relative flex h-2 w-2">
 						{#if dockerConnected}