From db2d7d0252ccb70308a61418e02d59e0a1d981ef Mon Sep 17 00:00:00 2001
From: Ryan Hamamura <58859899+ryanhamamura@users.noreply.github.com>
Date: Tue, 3 Mar 2026 09:53:20 -1000
Subject: [PATCH] feat: add connection status indicator with SSE heartbeat

- Add ConnectionIndicator component showing green/red dot
- Send lastPing signal every 15 seconds via SSE
- Indicator turns red if no ping received in 20 seconds
- Gives users confidence the live connection is active
---
 features/c4game/handlers.go             | 18 +++++++++++++++++-
 features/c4game/pages/game.templ        |  3 ++-
 features/common/components/shared.templ | 15 +++++++++++++++
 features/snakegame/handlers.go          | 20 +++++++++++++++++++-
 features/snakegame/pages/game.templ     |  3 ++-
 5 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/features/c4game/handlers.go b/features/c4game/handlers.go
index e6f5b52..08923c3 100644
--- a/features/c4game/handlers.go
+++ b/features/c4game/handlers.go
@@ -1,6 +1,7 @@
 package c4game
 
 import (
+	"encoding/json"
 	"fmt"
 	"net/http"
 	"strconv"
@@ -118,11 +119,22 @@ func HandleGameEvents(store *connect4.Store, nc *nats.Conn, sm *scs.SessionManag
 			return sse.PatchElementTempl(pages.GameContent(g, myColor, room.Messages(), chatCfg))
 		}
 
-		// Send initial render
+		sendPing := func() error {
+			ping, _ := json.Marshal(map[string]int64{"lastPing": time.Now().UnixMilli()})
+			return sse.PatchSignals(ping)
+		}
+
+		// Send initial render and ping
+		if err := sendPing(); err != nil {
+			return
+		}
 		if err := patchAll(); err != nil {
 			return
 		}
 
+		heartbeat := time.NewTicker(15 * time.Second)
+		defer heartbeat.Stop()
+
 		// Subscribe to game state updates
 		gameCh := make(chan *nats.Msg, 64)
 		gameSub, err := nc.ChanSubscribe(connect4.GameSubject(gameID), gameCh)
@@ -140,6 +152,10 @@ func HandleGameEvents(store *connect4.Store, nc *nats.Conn, sm *scs.SessionManag
 			select {
 			case <-ctx.Done():
 				return
+			case <-heartbeat.C:
+				if err := sendPing(); err != nil {
+					return
+				}
 			case <-gameCh:
 				if err := patchAll(); err != nil {
 					return
diff --git a/features/c4game/pages/game.templ b/features/c4game/pages/game.templ
index c5d9f11..16204cf 100644
--- a/features/c4game/pages/game.templ
+++ b/features/c4game/pages/game.templ
@@ -15,9 +15,10 @@ templ GamePage(g *connect4.Game, myColor int, messages []chat.Message, chatCfg c
 	@layouts.Base("Connect 4") {
 		<main
 			class="flex flex-col items-center gap-4 p-4"
-			data-signals="{chatMsg: ''}"
+			data-signals="{chatMsg: '', lastPing: 0}"
 			data-init={ fmt.Sprintf("@get('/games/%s/events',{requestCancellation:'disabled'})", g.ID) }
 		>
+			@sharedcomponents.ConnectionIndicator()
 			@GameContent(g, myColor, messages, chatCfg)
 		</main>
 	}
diff --git a/features/common/components/shared.templ b/features/common/components/shared.templ
index 5567f93..76d67b6 100644
--- a/features/common/components/shared.templ
+++ b/features/common/components/shared.templ
@@ -44,6 +44,21 @@ templ NicknamePrompt(returnPath string) {
 	</main>
 }
 
+// ConnectionIndicator shows a small dot indicating SSE connection status.
+// It requires a `lastPing` signal (unix ms timestamp) to be set by the server.
+templ ConnectionIndicator() {
+	<div
+		id="connection-indicator"
+		class="fixed top-2 right-2 flex items-center gap-1 text-xs text-gray-500"
+		title="Connection status"
+	>
+		<span
+			class="w-2 h-2 rounded-full transition-colors duration-300"
+			data-class="{'bg-green-500': Date.now() - $lastPing < 20000, 'bg-red-500': Date.now() - $lastPing >= 20000}"
+		></span>
+	</div>
+}
+
 templ GameJoinPrompt(loginURL string, registerURL string, gamePath string) {
 	<main class="max-w-sm mx-auto mt-8 text-center">
 		<h1 class="text-3xl font-bold">Join Game</h1>
diff --git a/features/snakegame/handlers.go b/features/snakegame/handlers.go
index afb6f3a..f997687 100644
--- a/features/snakegame/handlers.go
+++ b/features/snakegame/handlers.go
@@ -1,9 +1,11 @@
 package snakegame
 
 import (
+	"encoding/json"
 	"fmt"
 	"net/http"
 	"strconv"
+	"time"
 
 	"github.com/alexedwards/scs/v2"
 	"github.com/go-chi/chi/v5"
@@ -123,11 +125,22 @@ func HandleSnakeEvents(snakeStore *snake.SnakeStore, nc *nats.Conn, sm *scs.Sess
 			return sse.PatchElementTempl(pages.GameContent(sg, mySlot, chatMessages(), chatCfg, gameID))
 		}
 
-		// Send initial render
+		sendPing := func() error {
+			ping, _ := json.Marshal(map[string]int64{"lastPing": time.Now().UnixMilli()})
+			return sse.PatchSignals(ping)
+		}
+
+		// Send initial render and ping
+		if err := sendPing(); err != nil {
+			return
+		}
 		if err := patchAll(); err != nil {
 			return
 		}
 
+		heartbeat := time.NewTicker(15 * time.Second)
+		defer heartbeat.Stop()
+
 		// Subscribe to game updates via NATS
 		gameCh := make(chan *nats.Msg, 64)
 		gameSub, err := nc.ChanSubscribe(snake.GameSubject(gameID), gameCh)
@@ -151,6 +164,11 @@ func HandleSnakeEvents(snakeStore *snake.SnakeStore, nc *nats.Conn, sm *scs.Sess
 			case <-ctx.Done():
 				return
 
+			case <-heartbeat.C:
+				if err := sendPing(); err != nil {
+					return
+				}
+
 			case <-gameCh:
 				// Drain backed-up game updates
 				for {
diff --git a/features/snakegame/pages/game.templ b/features/snakegame/pages/game.templ
index 378690c..f8fe244 100644
--- a/features/snakegame/pages/game.templ
+++ b/features/snakegame/pages/game.templ
@@ -32,11 +32,12 @@ templ GamePage(sg *snake.SnakeGame, mySlot int, messages []chat.Message, chatCfg
 	@layouts.Base("Snake") {
 		<main
 			class="snake-wrapper flex flex-col items-center gap-4 p-4"
-			data-signals={ `{"chatMsg":""}` }
+			data-signals={ `{"chatMsg":"","lastPing":0}` }
 			data-init={ fmt.Sprintf("@get('/snake/%s/events',{requestCancellation:'disabled'})", gameID) }
 			data-on:keydown__throttle.100ms={ keydownScript(gameID) }
 			tabindex="0"
 		>
+			@components.ConnectionIndicator()
 			@GameContent(sg, mySlot, messages, chatCfg, gameID)
 		</main>
 	}