fix(account): show relay unreachable instead of empty device list (#1552)

When a persisted session cannot reach the relay, Online Devices no longer
treats a failed list as "no other devices online".

Author: bobleer

src/web-ui/src/app/components/AccountLoginDialog/AccountLoginDialog.tsx

@@ -23,6 +23,7 @@ import { api } from '@/infrastructure/api/service-api/ApiClient';
 import { usePeerDeviceMode } from '@/infrastructure/peer-device/PeerDeviceContext';
 import { useAccountSyncStore, ensureAccountSyncProgressListener } from '@/infrastructure/account/accountSyncStore';
 import type { AccountSyncPhase } from '@/infrastructure/account/accountSyncStore';
+import { isAccountAuthFailure } from '@/infrastructure/account/accountErrorUtils';
 import { useNotification } from '@/shared/notification-system';
 import { createLogger } from '@/shared/utils/logger';
 import './AccountLoginDialog.scss';
@@ -63,16 +64,6 @@ function syncPhaseLabel(
   }
 }
 
-function isAccountAuthFailure(error: unknown): boolean {
-  const msg = (error instanceof Error ? error.message : String(error)).toLowerCase();
-  return (
-    msg.includes('401')
-    || msg.includes('unauthorized')
-    || msg.includes('invalid or expired token')
-    || msg.includes('relay auth error')
-  );
-}
-
 interface AccountLoginDialogProps {
   isOpen: boolean;
   onClose: () => void;
@@ -104,13 +95,18 @@ export const AccountLoginDialog: React.FC<AccountLoginDialogProps> = ({
 
   const [devices, setDevices] = useState<AccountDeviceInfo[]>([]);
   const [localDeviceId, setLocalDeviceId] = useState<string | null>(null);
+  /** Only true after a successful list_devices response; gates the empty-state copy. */
+  const [devicesReady, setDevicesReady] = useState(false);
+  const [relayError, setRelayError] = useState<string | null>(null);
   const refreshTimer = useRef<ReturnType<typeof setInterval> | null>(null);
   /** Prevent overlapping background syncs from rapid clicks. */
   const syncInFlightRef = useRef(false);
 
   const resetState = useCallback(() => {
     setDevices([]);
     setLocalDeviceId(null);
+    setDevicesReady(false);
+    setRelayError(null);
     if (refreshTimer.current) { clearInterval(refreshTimer.current); refreshTimer.current = null; }
   }, []);
 
@@ -125,6 +121,11 @@ export const AccountLoginDialog: React.FC<AccountLoginDialogProps> = ({
     setError(t('accountLogin.sessionExpired'));
   }, [resetState, t]);
 
+  const markRelayUnreachable = useCallback(() => {
+    setDevicesReady(false);
+    setRelayError(t('accountLogin.relayUnreachable'));
+  }, [t]);
+
   const refreshDevices = useCallback(async () => {
     try {
       let list = await remoteConnectAPI.accountListDevices();
@@ -134,13 +135,35 @@ export const AccountLoginDialog: React.FC<AccountLoginDialogProps> = ({
         list = await remoteConnectAPI.accountListDevices();
       }
       setDevices(list);
+      setDevicesReady(true);
+      setRelayError(null);
     } catch (e) {
       log.warn('refreshDevices failed', e);
       if (isAccountAuthFailure(e)) {
         await handleSessionExpired(e);
+      } else {
+        markRelayUnreachable();
+      }
+    }
+  }, [localDeviceId, handleSessionExpired, markRelayUnreachable]);
+
+  const handleRetryConnect = useCallback(async () => {
+    setLoading(true);
+    setRelayError(null);
+    try {
+      await remoteConnectAPI.accountConnectDevices();
+      await refreshDevices();
+    } catch (err) {
+      log.warn('retry connect failed', err);
+      if (isAccountAuthFailure(err)) {
+        await handleSessionExpired(err);
+        return;
       }
+      markRelayUnreachable();
+    } finally {
+      setLoading(false);
     }
-  }, [localDeviceId, handleSessionExpired]);
+  }, [handleSessionExpired, markRelayUnreachable, refreshDevices]);
 
   const applyPresenceOnline = useCallback((onlineDevices: Array<{ device_id: string; device_name: string }>) => {
     const onlineIds = new Set(onlineDevices.map(d => d.device_id));
@@ -195,6 +218,7 @@ export const AccountLoginDialog: React.FC<AccountLoginDialogProps> = ({
     });
     remoteConnectAPI.accountStatus().then(async (status) => {
       if (status.logged_in && status.user_id) {
+        setView('devices');
         try {
           await remoteConnectAPI.accountConnectDevices();
         } catch (err) {
@@ -203,9 +227,9 @@ export const AccountLoginDialog: React.FC<AccountLoginDialogProps> = ({
             await handleSessionExpired(err);
             return;
           }
+          markRelayUnreachable();
         }
-        setView('devices');
-        refreshDevices();
+        void refreshDevices();
         startDevicePolling();
       }
     });
@@ -232,7 +256,15 @@ export const AccountLoginDialog: React.FC<AccountLoginDialogProps> = ({
       unlistenPresence();
       unlistenSettings();
     };
-  }, [isOpen, refreshDevices, resetState, startDevicePolling, applyPresenceOnline, handleSessionExpired]);
+  }, [
+    isOpen,
+    refreshDevices,
+    resetState,
+    startDevicePolling,
+    applyPresenceOnline,
+    handleSessionExpired,
+    markRelayUnreachable,
+  ]);
 
   const validate = useCallback(() => {
     if (!username.trim() || !password.trim() || !authServer.trim()) {
@@ -516,7 +548,7 @@ export const AccountLoginDialog: React.FC<AccountLoginDialogProps> = ({
 
         {view === 'devices' && (
           <div className="account-login-dialog__scroll">
-            {syncStatus !== 'idle' && (
+            {syncStatus !== 'idle' && !relayError && (
               <div className={`account-login-dialog__sync-indicator ${syncStatus}`}>
                 <div className="account-login-dialog__sync-indicator-row">
                   {syncStatus === 'syncing' && <RefreshCw size={14} className="spinning" />}
@@ -554,11 +586,20 @@ export const AccountLoginDialog: React.FC<AccountLoginDialogProps> = ({
                 )}
               </div>
             )}
+            {relayError && (
+              <div className="account-login-dialog__error-banner">
+                <Alert
+                  type="error"
+                  message={relayError}
+                  className="account-login-dialog__error-alert"
+                />
+              </div>
+            )}
             <div className="account-login-dialog__device-list">
-              {devices.length === 0 && (
+              {!relayError && devicesReady && devices.length === 0 && (
                 <div className="account-login-dialog__empty">{t('accountLogin.noDevices')}</div>
               )}
-              {devices.map((d) => {
+              {!relayError && devices.map((d) => {
                 const isLocal = localDeviceId === d.device_id;
                 return (
                 <div key={d.device_id}
@@ -599,6 +640,12 @@ export const AccountLoginDialog: React.FC<AccountLoginDialogProps> = ({
               })}
             </div>
             <div className="account-login-dialog__actions">
+              {relayError && (
+                <Button variant="primary" size="small" onClick={handleRetryConnect} disabled={loading}>
+                  <RefreshCw size={14} />
+                  {t('accountLogin.retryConnect')}
+                </Button>
+              )}
               <Button variant="secondary" size="small" onClick={handleLogout} disabled={loading}>
                 {t('accountLogin.logout')}
               </Button>

src/web-ui/src/infrastructure/account/accountErrorUtils.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { isAccountAuthFailure, isRelayUnreachable } from './accountErrorUtils';
+
+describe('isAccountAuthFailure', () => {
+  it('detects HTTP 401 and token errors', () => {
+    expect(isAccountAuthFailure(new Error('HTTP 401 Unauthorized'))).toBe(true);
+    expect(isAccountAuthFailure(new Error('invalid or expired token'))).toBe(true);
+    expect(isAccountAuthFailure(new Error('relay auth error: bad token'))).toBe(true);
+  });
+
+  it('rejects network failures', () => {
+    expect(isAccountAuthFailure(new Error('error sending request: connection refused'))).toBe(false);
+  });
+});
+
+describe('isRelayUnreachable', () => {
+  it('detects common transport failures', () => {
+    expect(isRelayUnreachable(new Error('error sending request: connection refused'))).toBe(true);
+    expect(isRelayUnreachable(new Error('request timed out'))).toBe(true);
+    expect(isRelayUnreachable(new Error('Failed to fetch'))).toBe(true);
+    expect(isRelayUnreachable(new Error('dns resolution failed'))).toBe(true);
+    expect(isRelayUnreachable(new Error('failed to connect to relay'))).toBe(true);
+  });
+
+  it('does not treat auth failures as unreachable', () => {
+    expect(isRelayUnreachable(new Error('HTTP 401 Unauthorized'))).toBe(false);
+    expect(isRelayUnreachable(new Error('invalid or expired token'))).toBe(false);
+  });
+
+  it('does not treat unrelated application errors as unreachable', () => {
+    expect(isRelayUnreachable(new Error('not logged in'))).toBe(false);
+    expect(isRelayUnreachable(new Error('remote connect service not initialized'))).toBe(false);
+  });
+});

src/web-ui/src/infrastructure/account/accountErrorUtils.ts

@@ -0,0 +1,44 @@
+/**
+ * Classify account / relay errors for Online Devices UX.
+ * Auth failures clear the local session; unreachable keeps it and shows retry.
+ */
+
+export function errorMessage(error: unknown): string {
+  return (error instanceof Error ? error.message : String(error)).toLowerCase();
+}
+
+export function isAccountAuthFailure(error: unknown): boolean {
+  const msg = errorMessage(error);
+  return (
+    msg.includes('401')
+    || msg.includes('unauthorized')
+    || msg.includes('invalid or expired token')
+    || msg.includes('relay auth error')
+  );
+}
+
+/** Network / transport failures talking to the relay (not auth rejection). */
+export function isRelayUnreachable(error: unknown): boolean {
+  if (isAccountAuthFailure(error)) {
+    return false;
+  }
+  const msg = errorMessage(error);
+  return (
+    msg.includes('connection refused')
+    || msg.includes('connect error')
+    || msg.includes('connection reset')
+    || msg.includes('timed out')
+    || msg.includes('timeout')
+    || msg.includes('failed to fetch')
+    || msg.includes('error sending request')
+    || msg.includes('network')
+    || msg.includes('dns')
+    || msg.includes('name or service not known')
+    || msg.includes('no such host')
+    || msg.includes('unreachable')
+    || msg.includes('could not connect')
+    || msg.includes('failed to connect')
+    || msg.includes('empty reply')
+    || msg.includes('connection closed')
+  );
+}

src/web-ui/src/locales/en-US/common.json

@@ -525,6 +525,8 @@
     "noCurrentWorkspace": "This device has no open workspace. Select a recent one or create a new workspace.",
     "noSessions": "No sessions in this workspace",
     "sessionExpired": "Session expired. Please log in again.",
+    "relayUnreachable": "Cannot reach the relay server. Check the server URL and network, or log out and try again.",
+    "retryConnect": "Retry",
     "enteredPeerMode": "Connected to remote device: {{name}}",
     "peerRemoteLabel": "{{name}}",
     "peerRemoteBadgeTitle": "Remote device: {{name}}",

src/web-ui/src/locales/zh-CN/common.json

@@ -525,6 +525,8 @@
     "noCurrentWorkspace": "该设备当前没有打开的工作区，请选择最近工作区或新建",
     "noSessions": "当前工作区暂无会话",
     "sessionExpired": "登录已失效，请重新登录",
+    "relayUnreachable": "无法连接中继服务。请检查服务地址与网络，或退出登录后重试。",
+    "retryConnect": "重试连接",
     "enteredPeerMode": "已连接到远程设备：{{name}}",
     "peerRemoteLabel": "{{name}}",
     "peerRemoteBadgeTitle": "远程设备：{{name}}",

src/web-ui/src/locales/zh-TW/common.json

@@ -525,6 +525,8 @@
     "noCurrentWorkspace": "此裝置目前沒有開啟的工作區，請選擇最近工作區或新建",
     "noSessions": "目前工作區暫無工作階段",
     "sessionExpired": "登入已失效，請重新登入",
+    "relayUnreachable": "無法連接中繼服務。請檢查服務位址與網路，或退出登入後重試。",
+    "retryConnect": "重試連線",
     "enteredPeerMode": "已連接到遠端裝置：{{name}}",
     "peerRemoteLabel": "{{name}}",
     "peerRemoteBadgeTitle": "遠端裝置：{{name}}",