From 9d641e031f25cff5caaff7cbd8db1cf719daa0d0 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 28 Aug 2026 16:35:59 +0000
Subject: [PATCH] feat: SSE disconnect/reconnecting indicator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

useLiveUpdates now tracks the EventSource's open/error transitions and
returns a connection state, surfaced in the top bar as a small amber
"Reconnecting…" badge whenever the SSE feed drops.

Closes #11
---
 src/client/RepoView.tsx      |  7 ++++++-
 src/client/api/events.ts     | 14 ++++++++++++--
 src/client/styles/styles.css |  4 ++++
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/client/RepoView.tsx b/src/client/RepoView.tsx
index b88a793..9cc79a2 100644
--- a/src/client/RepoView.tsx
+++ b/src/client/RepoView.tsx
@@ -75,7 +75,7 @@ interface ToastState {
 
 export function RepoView({ repoPath }: { repoPath: string }) {
   const [credReq, setCredReq] = React.useState<{ id: string; prompt: string } | null>(null);
-  useLiveUpdates(repoPath, (e) => setCredReq({ id: e.id, prompt: e.prompt }));
+  const connection = useLiveUpdates(repoPath, (e) => setCredReq({ id: e.id, prompt: e.prompt }));
   const [settings, setSetting] = useSettings();
 
   const repoQ = useRepo(repoPath);
@@ -682,6 +682,11 @@ export function RepoView({ repoPath }: { repoPath: string }) {
         <div style={{ flex: 1 }} />
 
         <div className="v3-actions">
+          {connection === 'reconnecting' && (
+            <span className="conn-badge fade-in" title="Live-update connection dropped — retrying…">
+              <span className="conn-dot" /> Reconnecting…
+            </span>
+          )}
           <button
             className="tb-btn"
             disabled={actions.fetchRemote.isPending}
diff --git a/src/client/api/events.ts b/src/client/api/events.ts
index 00f72de..5e3a0ca 100644
--- a/src/client/api/events.ts
+++ b/src/client/api/events.ts
@@ -2,14 +2,23 @@ import React from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import type { ChangeEvent, CredentialRequestEvent } from '../../shared/types';
 
+export type ConnectionState = 'connected' | 'reconnecting';
+
 /** Subscribes to the repo's SSE feed: change events invalidate queries,
-    credential events surface the askpass modal. */
-export function useLiveUpdates(path: string, onCredential?: (e: CredentialRequestEvent) => void) {
+    credential events surface the askpass modal. Returns the live-connection
+    state so callers can surface a disconnect/reconnecting indicator — the
+    browser retries a dropped EventSource on its own, so 'reconnecting' just
+    tracks the gap between an 'error' and the next 'open'. */
+export function useLiveUpdates(path: string, onCredential?: (e: CredentialRequestEvent) => void): ConnectionState {
   const qc = useQueryClient();
   const credRef = React.useRef(onCredential);
   credRef.current = onCredential;
+  const [connection, setConnection] = React.useState<ConnectionState>('connected');
   React.useEffect(() => {
+    setConnection('connected');
     const es = new EventSource('/api/events?path=' + encodeURIComponent(path));
+    es.addEventListener('open', () => setConnection('connected'));
+    es.addEventListener('error', () => setConnection('reconnecting'));
     es.addEventListener('credential', (e) => {
       try {
         credRef.current?.(JSON.parse((e as MessageEvent).data) as CredentialRequestEvent);
@@ -39,4 +48,5 @@ export function useLiveUpdates(path: string, onCredential?: (e: CredentialReques
     });
     return () => es.close();
   }, [qc, path]);
+  return connection;
 }
diff --git a/src/client/styles/styles.css b/src/client/styles/styles.css
index 34f4edf..6c789cd 100644
--- a/src/client/styles/styles.css
+++ b/src/client/styles/styles.css
@@ -301,6 +301,10 @@ body {
 .dh-sub .mono { color: var(--tx-lo); }
 .peek-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-family: var(--mono); color: var(--accent); border: 1px solid var(--accent-line); border-radius: 4px; padding: 1px 6px; }
 
+.conn-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--yellow); border: 1px solid var(--yellow); border-radius: 6px; padding: 4px 9px; margin-right: 2px; }
+.conn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); animation: conn-pulse 1.1s ease-in-out infinite; }
+@keyframes conn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
+
 .diff-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line-soft); flex-shrink: 0; }
 .diff-stat { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; }
 .diff-stat .a { color: var(--add); } .diff-stat .d { color: var(--del); }