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

@@ -17,6 +17,7 @@ import (
 	"github.com/ryanhamamura/games/db/repository"
 	"github.com/ryanhamamura/games/features/c4game/pages"
 	"github.com/ryanhamamura/games/sessions"
+	appsse "github.com/ryanhamamura/games/sse"
 )
 
 // c4ChatColors maps player color (1=Red, 2=Yellow) to CSS background colors.
@@ -118,11 +119,21 @@ 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 {
+			return appsse.SendPing(sse)
+		}
+
+		// 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 +151,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

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>
 	}