feat(e2ee): tell the user when their device's key uploads are stuck (#201 KE-1)

When the server keeps rejecting this device's /keys/upload with 400 "One
time key ... already exists", the device's encryption store has diverged
and the SDK retries forever (matrix-rust-sdk#5200, still open). Synapse
saw 474k of these from May 30 to Jul 8 2026. The fix is a fresh login, so:

- keyUploadWatch observes /keys/upload responses through the client's
  fetchFn (the response the SDK gets is untouched; a clone is read).
  Three conflicts within 15 min = stuck; any successful upload clears it.
- KeyUploadBanner (critical strip, same slot as the sync/clock banners):
  "Encryption on this device is out of sync" with Details and
  "Fix: sign out…", which opens the normal logout dialog (it already
  warns when the device isn't verified / backed up).

Server side, Grafana now alerts on the same signal (E2EE Key Upload
Conflicts) and on delayed-event 5xx (Call Delayed-Event Errors).

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

src/app/pages/client/ClientRoot.tsx

@@ -46,6 +46,7 @@ import { useSyncState } from '../../hooks/useSyncState';
 import { stopPropagation } from '../../utils/keyboard';
 import { SyncStatus } from './SyncStatus';
 import { ClockSkewBanner } from './ClockSkewBanner';
+import { KeyUploadBanner } from './KeyUploadBanner';
 import {
   ServerStatusBanner,
   ServerStatusFeature,
@@ -260,6 +261,12 @@ export function ClientRoot({ children }: ClientRootProps) {
         {mx && !syncError && <ServerStatusBanner />}
         {mx && !syncError && <SyncStatus mx={mx} />}
         {mx && !syncError && <ClockSkewBanner />}
+        {mx && !syncError && (
+          // The fix opens LogoutDialog, which reads the client from context.
+          <MatrixClientProvider value={mx}>
+            <KeyUploadBanner />
+          </MatrixClientProvider>
+        )}
         {loading && <ClientRootOptions mx={mx} />}
         {(loadState.status === AsyncStatus.Error ||
           startState.status === AsyncStatus.Error ||

src/app/pages/client/KeyUploadBanner.tsx

@@ -0,0 +1,104 @@
+import React, { useState, useSyncExternalStore } from 'react';
+import FocusTrap from 'focus-trap-react';
+import { Box, Button, config, Line, Overlay, OverlayBackdrop, OverlayCenter, Text } from 'folds';
+import { ContainerColor } from '../../styles/ContainerColor.css';
+import { getKeyUploadWatch, subscribeKeyUploadWatch } from '../../utils/keyUploadWatch';
+import { LogoutDialog } from '../../components/LogoutDialog';
+import { stopPropagation } from '../../utils/keyboard';
+
+/**
+ * [Gitea #201 KE-1] "Encryption on this device is out of sync." Shown while
+ * the server keeps rejecting this device's key uploads (keyUploadWatch). The
+ * fix is a fresh login, so the action opens the normal logout dialog, which
+ * already warns if the device isn't verified / backed up. Hideable for this
+ * session only: the problem doesn't go away by itself.
+ */
+export function KeyUploadBanner() {
+  const { stuck, lastError } = useSyncExternalStore(subscribeKeyUploadWatch, getKeyUploadWatch);
+  const [hidden, setHidden] = useState(false);
+  const [details, setDetails] = useState(false);
+  const [logout, setLogout] = useState(false);
+
+  if (!stuck || hidden) return null;
+
+  return (
+    <Box direction="Column" shrink="No">
+      <Box
+        className={ContainerColor({ variant: 'Critical' })}
+        style={{ padding: `${config.space.S100} ${config.space.S300}` }}
+        direction="Column"
+        alignItems="Center"
+        gap="100"
+        role="alert"
+      >
+        <Box alignItems="Center" gap="300" wrap="Wrap" justifyContent="Center">
+          <Text size="L400" align="Center">
+            Encryption on this device is out of sync with the server. New encrypted messages and
+            calls may fail until you sign out and back in.
+          </Text>
+          <Button
+            size="300"
+            variant="Critical"
+            fill="Solid"
+            radii="300"
+            onClick={() => setLogout(true)}
+          >
+            <Text size="B300">Fix: sign out…</Text>
+          </Button>
+          <Button
+            size="300"
+            variant="Critical"
+            fill="Soft"
+            radii="300"
+            onClick={() => setDetails((v) => !v)}
+            aria-expanded={details}
+          >
+            <Text size="B300">Details</Text>
+          </Button>
+          <Button
+            size="300"
+            variant="Critical"
+            fill="None"
+            radii="300"
+            onClick={() => setHidden(true)}
+          >
+            <Text size="B300">Hide</Text>
+          </Button>
+        </Box>
+        {details && (
+          <Box direction="Column" gap="100" style={{ maxWidth: 640 }}>
+            <Text size="T200" align="Center">
+              The server already has encryption keys this device thinks it hasn&apos;t sent, so it
+              rejects every new upload and other people can&apos;t start fresh encrypted sessions
+              with you. This usually happens after the browser cleared this site&apos;s storage
+              while you stayed signed in. Before signing out, make sure this device is verified or
+              key backup is on (Settings → Devices), so your message history comes back when you
+              sign in again.
+            </Text>
+            {lastError && (
+              <Text size="T200" align="Center" priority="300" style={{ wordBreak: 'break-word' }}>
+                Server said: {lastError}
+              </Text>
+            )}
+          </Box>
+        )}
+      </Box>
+      <Line variant="Critical" size="300" />
+      {logout && (
+        <Overlay open backdrop={<OverlayBackdrop />}>
+          <OverlayCenter>
+            <FocusTrap
+              focusTrapOptions={{
+                onDeactivate: () => setLogout(false),
+                clickOutsideDeactivates: true,
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              <LogoutDialog handleClose={() => setLogout(false)} />
+            </FocusTrap>
+          </OverlayCenter>
+        </Overlay>
+      )}
+    </Box>
+  );
+}