feat: homeserver status banner from Uptime Kuma (#124)

When the homeserver, voice calls or sign-in break, or maintenance is under
way, say so in the app — driven by the Kuma status page
(isitup.lotusguild.org/status/matrix), managed from Kuma's UI. The client
asks Kuma directly (not via our servers) so it still hears "the server is
down" when our servers can't tell it.

- config.json `statusPages`, keyed by homeserver: users of other servers
  never contact Kuma.
- utils/kumaStatus.ts (pure, unit-tested): parse Kuma 2.x's public JSON;
  a group is down when any monitor fails two checks in a row (down+down or
  pending+down); maintenance = windows under way; announcements = incidents.
  One strip at a time: server down (connection lost AND Kuma confirms) >
  server having problems > maintenance > calls down > announcement;
  sign-in problems on the login screen only.
- Wording about the user's own connection: "Connection lost … our status
  checks say the server is up, so it may be your internet connection" ONLY
  when Kuma checked the server after this client's connection dropped and
  it passed; a stale "up" (Kuma needs a minute or two to notice an outage)
  keeps the plain "Connection Lost!".
- useServerStatus: polls only while visible; 5 min, 60 s while something is
  wrong or the connection is lost, at once when it drops; backoff; any
  failure = no banner (Kuma being unreachable never looks like Matrix
  being down); GET only, no cookies.
- UI in the existing banner slot and style (ContainerColor/Line like the
  sync and clock banners); Details expands; dismiss for calls-down and
  announcements (an edited announcement comes back); calls-down note above
  Join; phone: one line + Details.

Needs the CSP connect-src to allow https://isitup.lotusguild.org (matrix
repo) before it can fetch in production; until then it fails quiet.

Tests: 15 unit tests (live page layout, two-check rule, any-monitor rule,
unknown/garbage, UTC beat times, stale-vs-fresh "up", priorities, login vs
client, maintenance, announcements + dismiss/edit); e2e (fixtures for Kuma):
calls-down strip + dismiss across reload, other homeservers make no
requests, Kuma 500 → nothing, lost connection + Kuma down → critical strip
instead of "Connection Lost", + fresh "up" → "may be your connection",
+ stale "up" → plain "Connection Lost". Unit 1315, Playwright 26 passed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA

src/app/pages/auth/AuthLayout.tsx

@@ -30,6 +30,7 @@ import { AuthFlowsLoader } from '../../components/AuthFlowsLoader';
 import { AuthFlowsProvider } from '../../hooks/useAuthFlows';
 import { AuthServerProvider } from '../../hooks/useAuthServer';
 import { tryDecodeURIComponent } from '../../utils/dom';
+import { LoginStatusBanner } from '../../features/server-status/ServerStatusBanner';
 
 const LotusLogo = withOriginBaseUrl(getOriginBaseUrl(), '/public/res/lotus-logo.png');
 
@@ -125,89 +126,92 @@ export function AuthLayout() {
     discoveryState.status === AsyncStatus.Success ? discoveryState.data.response : [];
 
   return (
-    <Scroll variant="Background" visibility="Hover" size="300" hideTrack>
-      <Box
-        className={classNames(css.AuthLayout, PatternsCss.BackgroundDotPattern)}
-        direction="Column"
-        alignItems="Center"
-        justifyContent="SpaceBetween"
-        gap="400"
-      >
-        <Box direction="Column" className={css.AuthCard}>
-          <Header className={css.AuthHeader} size="600" variant="Surface">
-            <Box grow="Yes" direction="Row" gap="300" alignItems="Center">
-              <img className={css.AuthLogo} src={LotusLogo} alt="Lotus Chat Logo" />
-              <Text as="h1" size="H3">
-                Lotus Chat
-              </Text>
+    <Box direction="Column" style={{ height: '100%' }}>
+      <LoginStatusBanner serverName={server} />
+      <Scroll variant="Background" visibility="Hover" size="300" hideTrack>
+        <Box
+          className={classNames(css.AuthLayout, PatternsCss.BackgroundDotPattern)}
+          direction="Column"
+          alignItems="Center"
+          justifyContent="SpaceBetween"
+          gap="400"
+        >
+          <Box direction="Column" className={css.AuthCard}>
+            <Header className={css.AuthHeader} size="600" variant="Surface">
+              <Box grow="Yes" direction="Row" gap="300" alignItems="Center">
+                <img className={css.AuthLogo} src={LotusLogo} alt="Lotus Chat Logo" />
+                <Text as="h1" size="H3">
+                  Lotus Chat
+                </Text>
+              </Box>
+            </Header>
+            <Box className={css.AuthCardContent} direction="Column">
+              <Box direction="Column" gap="100">
+                <Text as="label" size="L400" priority="300">
+                  Homeserver
+                </Text>
+                <ServerPicker
+                  server={server}
+                  serverList={clientConfig.homeserverList ?? []}
+                  allowCustomServer={clientConfig.allowCustomHomeservers}
+                  onServerChange={selectServer}
+                />
+              </Box>
+              {discoveryState.status === AsyncStatus.Loading && (
+                <AuthLayoutLoading message="Looking for homeserver..." />
+              )}
+              {discoveryState.status === AsyncStatus.Error && (
+                <AuthLayoutError message="Failed to find homeserver." />
+              )}
+              {autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_PROMPT && (
+                <AuthLayoutError
+                  message={`Failed to connect. Homeserver configuration found with ${autoDiscoveryError.host} appears unusable.`}
+                />
+              )}
+              {autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_ERROR && (
+                <AuthLayoutError message="Failed to connect. Homeserver configuration base_url appears invalid." />
+              )}
+              {discoveryState.status === AsyncStatus.Success && autoDiscoveryInfo && (
+                <AuthServerProvider value={discoveryState.data.serverName}>
+                  <AutoDiscoveryInfoProvider value={autoDiscoveryInfo}>
+                    <SpecVersionsLoader
+                      baseUrl={autoDiscoveryInfo['m.homeserver'].base_url}
+                      fallback={() => (
+                        <AuthLayoutLoading
+                          message={`Connecting to ${autoDiscoveryInfo['m.homeserver'].base_url}`}
+                        />
+                      )}
+                      error={() => (
+                        <AuthLayoutError message="Failed to connect. Either homeserver is unavailable at this moment or does not exist." />
+                      )}
+                    >
+                      {(specVersions) => (
+                        <SpecVersionsProvider value={specVersions}>
+                          <AuthFlowsLoader
+                            fallback={() => (
+                              <AuthLayoutLoading message="Loading authentication flow..." />
+                            )}
+                            error={() => (
+                              <AuthLayoutError message="Failed to get authentication flow information." />
+                            )}
+                          >
+                            {(authFlows) => (
+                              <AuthFlowsProvider value={authFlows}>
+                                <Outlet />
+                              </AuthFlowsProvider>
+                            )}
+                          </AuthFlowsLoader>
+                        </SpecVersionsProvider>
+                      )}
+                    </SpecVersionsLoader>
+                  </AutoDiscoveryInfoProvider>
+                </AuthServerProvider>
+              )}
             </Box>
-          </Header>
-          <Box className={css.AuthCardContent} direction="Column">
-            <Box direction="Column" gap="100">
-              <Text as="label" size="L400" priority="300">
-                Homeserver
-              </Text>
-              <ServerPicker
-                server={server}
-                serverList={clientConfig.homeserverList ?? []}
-                allowCustomServer={clientConfig.allowCustomHomeservers}
-                onServerChange={selectServer}
-              />
-            </Box>
-            {discoveryState.status === AsyncStatus.Loading && (
-              <AuthLayoutLoading message="Looking for homeserver..." />
-            )}
-            {discoveryState.status === AsyncStatus.Error && (
-              <AuthLayoutError message="Failed to find homeserver." />
-            )}
-            {autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_PROMPT && (
-              <AuthLayoutError
-                message={`Failed to connect. Homeserver configuration found with ${autoDiscoveryError.host} appears unusable.`}
-              />
-            )}
-            {autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_ERROR && (
-              <AuthLayoutError message="Failed to connect. Homeserver configuration base_url appears invalid." />
-            )}
-            {discoveryState.status === AsyncStatus.Success && autoDiscoveryInfo && (
-              <AuthServerProvider value={discoveryState.data.serverName}>
-                <AutoDiscoveryInfoProvider value={autoDiscoveryInfo}>
-                  <SpecVersionsLoader
-                    baseUrl={autoDiscoveryInfo['m.homeserver'].base_url}
-                    fallback={() => (
-                      <AuthLayoutLoading
-                        message={`Connecting to ${autoDiscoveryInfo['m.homeserver'].base_url}`}
-                      />
-                    )}
-                    error={() => (
-                      <AuthLayoutError message="Failed to connect. Either homeserver is unavailable at this moment or does not exist." />
-                    )}
-                  >
-                    {(specVersions) => (
-                      <SpecVersionsProvider value={specVersions}>
-                        <AuthFlowsLoader
-                          fallback={() => (
-                            <AuthLayoutLoading message="Loading authentication flow..." />
-                          )}
-                          error={() => (
-                            <AuthLayoutError message="Failed to get authentication flow information." />
-                          )}
-                        >
-                          {(authFlows) => (
-                            <AuthFlowsProvider value={authFlows}>
-                              <Outlet />
-                            </AuthFlowsProvider>
-                          )}
-                        </AuthFlowsLoader>
-                      </SpecVersionsProvider>
-                    )}
-                  </SpecVersionsLoader>
-                </AutoDiscoveryInfoProvider>
-              </AuthServerProvider>
-            )}
           </Box>
+          <AuthFooter />
         </Box>
-        <AuthFooter />
-      </Box>
-    </Scroll>
+      </Scroll>
+    </Box>
   );
 }

src/app/pages/client/ClientRoot.tsx

@@ -44,6 +44,10 @@ import { useSyncState } from '../../hooks/useSyncState';
 import { stopPropagation } from '../../utils/keyboard';
 import { SyncStatus } from './SyncStatus';
 import { ClockSkewBanner } from './ClockSkewBanner';
+import {
+  ServerStatusBanner,
+  ServerStatusFeature,
+} from '../../features/server-status/ServerStatusBanner';
 import { AuthMetadataProvider } from '../../hooks/useAuthMetadata';
 import { getFallbackSession, removeFallbackSession } from '../../state/sessions';
 import { pushSessionToSW } from '../../../sw-session';
@@ -245,6 +249,8 @@ export function ClientRoot({ children }: ClientRootProps) {
   return (
     <AutoDiscovery userId={userId!} baseUrl={baseUrl!}>
       <SpecVersions baseUrl={baseUrl!}>
+        {mx && <ServerStatusFeature mx={mx} />}
+        {mx && !syncError && <ServerStatusBanner />}
         {mx && !syncError && <SyncStatus mx={mx} />}
         {mx && !syncError && <ClockSkewBanner />}
         {loading && <ClientRootOptions mx={mx} />}

src/app/pages/client/SyncStatus.tsx

@@ -1,8 +1,11 @@
 import { MatrixClient, SyncState } from 'matrix-js-sdk';
 import React, { useCallback, useState } from 'react';
+import { useAtomValue } from 'jotai';
 import { Box, config, Line, Text } from 'folds';
 import { useSyncState } from '../../hooks/useSyncState';
 import { ContainerColor } from '../../styles/ContainerColor.css';
+import { serverStatusAtom } from '../../state/serverStatus';
+import { serverConfirmedUpSince } from '../../utils/kumaStatus';
 
 type StateData = {
   current: SyncState | null;
@@ -13,6 +16,7 @@ type SyncStatusProps = {
   mx: MatrixClient;
 };
 export function SyncStatus({ mx }: SyncStatusProps) {
+  const serverStatus = useAtomValue(serverStatusAtom);
   const [stateData, setStateData] = useState<StateData>({
     current: null,
     previous: undefined,
@@ -53,7 +57,14 @@ export function SyncStatus({ mx }: SyncStatusProps) {
     );
   }
 
-  if (stateData.current === SyncState.Reconnecting) {
+  // [Gitea #124] When Kuma confirms the homeserver is down, the status banner
+  // says so ("Lotus Chat's server is down…") instead of "Connection Lost!".
+  const serverDown = serverStatus.status?.homeserver === 'down';
+  // Only blame the user's connection when Kuma has checked the server since
+  // the drop and it was fine (a stale "up" from before proves nothing).
+  const serverUp = serverConfirmedUpSince(serverStatus.status, serverStatus.lostAt);
+
+  if (stateData.current === SyncState.Reconnecting && !serverDown) {
     return (
       <Box direction="Column" shrink="No">
         <Box
@@ -64,14 +75,18 @@ export function SyncStatus({ mx }: SyncStatusProps) {
           role="status"
           aria-live="polite"
         >
-          <Text size="L400">Connection Lost! Reconnecting...</Text>
+          <Text size="L400">
+            {serverUp
+              ? "Connection lost. Our status checks say Lotus Chat's server is up, so it may be your internet connection. Reconnecting…"
+              : 'Connection Lost! Reconnecting...'}
+          </Text>
         </Box>
         <Line variant="Warning" size="300" />
       </Box>
     );
   }
 
-  if (stateData.current === SyncState.Error) {
+  if (stateData.current === SyncState.Error && !serverDown) {
     return (
       <Box direction="Column" shrink="No">
         <Box
@@ -82,7 +97,11 @@ export function SyncStatus({ mx }: SyncStatusProps) {
           role="alert"
           aria-live="assertive"
         >
-          <Text size="L400">Connection Lost!</Text>
+          <Text size="L400">
+            {serverUp
+              ? "Connection lost. Our status checks say Lotus Chat's server is up, so check your internet connection."
+              : 'Connection Lost!'}
+          </Text>
         </Box>
         <Line variant="Critical" size="300" />
       </Box>