feat(e2ee): undecryptable placeholder says why and offers the fix (#159)

'Unable to decrypt message' now carries one sentence per matrix-js-sdk
DecryptionFailureCode (describeDecryptionFailure, unit-tested against every
code so no raw code can leak into the copy) and, where something fixes it,
one button: no key backup → 'Set up key backup'; backup exists but this
session can't open it / key withheld for an unverified session → 'Unlock key
backup' / 'Verify this session' (both open Settings → Devices via a new
settingsRequestAtom that SettingsTab consumes); backup working or unknown
session (rust-crypto re-requests keys itself) → 'Retry', which re-runs
decryptEventIfNeeded. Sender-side problems are plain text. The raw code sits
in the placeholder's tooltip for support.

Verified headless on a fresh session in the encrypted seed room: each event
shows 'Sent before you signed in here, and no key backup exists…' with
tooltip HISTORICAL_MESSAGE_NO_KEY_BACKUP; the button opens Settings → Devices.

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

src/app/components/RenderMessageContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MsgType } from 'matrix-js-sdk';
+import { MatrixEvent, MsgType } from 'matrix-js-sdk';
 import { HTMLReactParserOptions } from 'html-react-parser';
 import { Opts } from 'linkifyjs';
 import { config, Text } from 'folds';
@@ -72,6 +72,8 @@ type RenderMessageContentProps = {
   eventId?: string;
   /** [Gitea #219] Open the room's shared media lightbox at this event. */
   onOpenImageViewer?: () => void;
+  /** [Gitea #159] The event, for the undecryptable placeholder's reason + retry. */
+  mEvent?: MatrixEvent;
 };
 export function RenderMessageContent({
   displayName,
@@ -88,6 +90,7 @@ export function RenderMessageContent({
   outlineAttachment,
   eventId,
   onOpenImageViewer,
+  mEvent,
 }: RenderMessageContentProps) {
   const renderUrlsPreview = (urls: string[]) => {
     // Cap previews per message so a link-dump doesn't spawn dozens of preview
@@ -346,7 +349,7 @@ export function RenderMessageContent({
   }
 
   if (msgType === 'm.bad.encrypted') {
-    return <MBadEncrypted />;
+    return <MBadEncrypted mEvent={mEvent} />;
   }
 
   if (msgType === 'm.key.verification.request') {

src/app/components/message/MsgTypeRenderers.tsx

@@ -1,7 +1,11 @@
 import React, { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Box, Button, config, Icon, Icons, Text, color, toRem } from 'folds';
-import { IContent } from 'matrix-js-sdk';
+import { IContent, MatrixEvent } from 'matrix-js-sdk';
+import { useSetAtom } from 'jotai';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { settingsRequestAtom } from '../../state/settingsRequest';
+import { describeDecryptionFailure } from '../../utils/decryptionReason';
 import { JUMBO_EMOJI_REG, URL_REG } from '../../utils/regex';
 import { trimReplyFromBody } from '../../utils/room';
 import { MessageTextBody } from './layout';
@@ -120,11 +124,59 @@ function CollapsibleBody({ eventId, children }: CollapsibleBodyProps) {
   );
 }
 
-export function MBadEncrypted() {
+type MBadEncryptedProps = {
+  mEvent?: MatrixEvent;
+};
+/**
+ * [Gitea #159] The undecryptable placeholder says WHY and offers the one
+ * action that fixes it (set up key backup / verify this session / retry).
+ * The raw SDK code stays in the tooltip for support.
+ */
+export function MBadEncrypted({ mEvent }: MBadEncryptedProps) {
+  const mx = useMatrixClient();
+  const requestSettings = useSetAtom(settingsRequestAtom);
+  const [retrying, setRetrying] = useState(false);
+  const code = mEvent?.decryptionFailureReason ?? null;
+  const reason = describeDecryptionFailure(code);
+
+  const handleAction = async () => {
+    if (reason.action === 'setup-backup' || reason.action === 'verify-session') {
+      requestSettings('devices');
+      return;
+    }
+    if (reason.action === 'retry' && mEvent) {
+      setRetrying(true);
+      try {
+        await mx.decryptEventIfNeeded(mEvent, { forceRedecryptIfUntrusted: true });
+      } catch {
+        // still undecryptable — the placeholder re-renders with the current reason
+      } finally {
+        setRetrying(false);
+      }
+    }
+  };
+
   return (
-    <Text>
-      <MessageBadEncryptedContent />
-    </Text>
+    <Box direction="Column" gap="100" alignItems="Start">
+      <Text>
+        <MessageBadEncryptedContent title={code ?? undefined} />
+      </Text>
+      <Text size="T200" priority="300">
+        {reason.text}
+      </Text>
+      {reason.action !== 'none' && (
+        <Button
+          size="300"
+          variant="Secondary"
+          fill="Soft"
+          radii="300"
+          onClick={handleAction}
+          disabled={retrying}
+        >
+          <Text size="B300">{retrying ? 'Retrying…' : reason.actionLabel}</Text>
+        </Button>
+      )}
+    </Box>
   );
 }