Desktop/remove hard requirement auth wall on desktop (#5956)

Co-authored-by: Claude Sonnet 4.6 <[email protected]>

frontend/src/desktop/components/rightRail/RightRailFooterExtensions.tsx

@@ -1,10 +1,103 @@
-import { Box, rem } from '@mantine/core';
-import { BackendHealthIndicator } from '@app/components/BackendHealthIndicator';
+import { useState, useEffect, useMemo } from 'react';
+import { Box, Tooltip, rem, useComputedColorScheme } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { connectionModeService, type ConnectionMode } from '@app/services/connectionModeService';
+import { selfHostedServerMonitor, type SelfHostedServerState } from '@app/services/selfHostedServerMonitor';
+import { useBackendHealth } from '@app/hooks/useBackendHealth';
+import { OPEN_SIGN_IN_EVENT } from '@app/constants/signInEvents';
 
 interface RightRailFooterExtensionsProps {
   className?: string;
 }
 
+function ConnectionStatusDot() {
+  const { t } = useTranslation();
+  const colorScheme = useComputedColorScheme('light');
+  const [connectionMode, setConnectionMode] = useState<ConnectionMode | null>(null);
+  const [selfHostedState, setSelfHostedState] = useState<SelfHostedServerState>(
+    () => selfHostedServerMonitor.getSnapshot()
+  );
+  const { isOnline, checkHealth } = useBackendHealth();
+
+  useEffect(() => {
+    void connectionModeService.getCurrentMode().then(setConnectionMode);
+    const unsubscribe = connectionModeService.subscribeToModeChanges((config) => {
+      setConnectionMode(config.mode);
+    });
+    return unsubscribe;
+  }, []);
+
+  useEffect(() => {
+    return selfHostedServerMonitor.subscribe(setSelfHostedState);
+  }, []);
+
+  const { label, color } = useMemo(() => {
+    if (connectionMode === 'saas') {
+      return {
+        label: t('connectionMode.status.saas', 'Connected to Stirling Cloud'),
+        color: '#3b82f6',
+      };
+    }
+    if (connectionMode === 'selfhosted') {
+      const serverOnline = selfHostedState.isOnline;
+      const serverChecking = selfHostedState.status === 'checking';
+      const backendLabel = serverChecking
+        ? t('connectionMode.status.selfhostedChecking', 'Connected to self-hosted server (checking...)')
+        : serverOnline
+          ? t('connectionMode.status.selfhostedOnline', 'Connected to self-hosted server')
+          : t('connectionMode.status.selfhostedOffline', 'Self-hosted server unreachable');
+      return {
+        label: backendLabel,
+        color: serverChecking ? '#fcc419' : serverOnline ? '#37b24d' : '#e03131',
+      };
+    }
+    // local
+    return {
+      label: isOnline
+        ? t('connectionMode.status.localOnline', 'Offline mode running')
+        : t('connectionMode.status.localOffline', 'Offline mode running'),
+      color: '#868e96',
+    };
+  }, [connectionMode, selfHostedState, isOnline, t]);
+
+  return (
+    <Tooltip
+      label={label}
+      position="left"
+      offset={12}
+      withArrow
+      withinPortal
+      color={colorScheme === 'dark' ? undefined : 'dark'}
+    >
+      <Box
+        component="span"
+        role="status"
+        aria-label={label}
+        tabIndex={0}
+        onClick={() => {
+          if (connectionMode === 'local') {
+            window.dispatchEvent(new CustomEvent(OPEN_SIGN_IN_EVENT));
+          } else {
+            void checkHealth();
+          }
+        }}
+        style={{
+          width: rem(10),
+          height: rem(10),
+          borderRadius: '50%',
+          backgroundColor: color,
+          boxShadow: colorScheme === 'dark'
+            ? '0 0 0 2px rgba(255, 255, 255, 0.15)'
+            : '0 0 0 2px rgba(0, 0, 0, 0.07)',
+          display: 'inline-block',
+          cursor: 'pointer',
+          outline: 'none',
+        }}
+      />
+    </Tooltip>
+  );
+}
+
 export function RightRailFooterExtensions({ className }: RightRailFooterExtensionsProps) {
   return (
     <Box
@@ -17,7 +110,7 @@ export function RightRailFooterExtensions({ className }: RightRailFooterExtensio
         paddingBottom: rem(12),
       }}
     >
-      <BackendHealthIndicator />
+      <ConnectionStatusDot />
     </Box>
   );
 }