fix(security): upgrade i18next-http-backend 2.5.2→3.0.6 (path traversal CVE)

Fixes GHSA-q89c-q3h5-w34g: path traversal & URL injection via unsanitised lng/ns parameters. Remaining open issues are all in devDependencies (commitizen/lodash/tmp) or dev-server-only tools (esbuild/vite), with no runtime impact on the production build. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
perf(router): lazy-load Lobby/Explore/Inbox routes; fix spoiler aria-pressed initial state
2026-05-21 16:17:08 -04:00 · 2026-05-21 16:14:08 -04:00 · 2026-05-21 15:36:59 -04:00 · 2026-05-21 13:51:14 -04:00 · 2026-05-21 13:49:49 -04:00 · 2026-05-21 13:48:19 -04:00
219 changed files with 6764 additions and 1338 deletions
@@ -0,0 +1,17 @@
+{
+  "defaultHomeserver": 0,
+  "homeserverList": [
+    "matrix.lotusguild.org"
+  ],
+  "allowCustomHomeservers": false,
+  "featuredCommunities": {
+    "openAsDefault": false,
+    "spaces": [],
+    "rooms": [],
+    "servers": []
+  },
+  "hashRouter": {
+    "enabled": false,
+    "basename": "/"
+  }
+}
@@ -0,0 +1,17 @@
+{
+  "defaultHomeserver": 0,
+  "homeserverList": [
+    "matrix.lotusguild.org"
+  ],
+  "allowCustomHomeservers": false,
+  "featuredCommunities": {
+    "openAsDefault": false,
+    "spaces": [],
+    "rooms": [],
+    "servers": []
+  },
+  "hashRouter": {
+    "enabled": false,
+    "basename": "/"
+  }
+}
@@ -21,9 +21,15 @@ jobs:
          workflow: ${{ github.event.workflow.id }}
          run_id: ${{ github.event.workflow_run.id }}
          name: pr
-      - name: Output pr number
+      - name: Validate and output pr number
        id: pr
-        run: echo "id=$(<pr.txt)" >> $GITHUB_OUTPUT
+        run: |
+          PR_ID=$(<pr.txt)
+          if ! [[ "${PR_ID}" =~ ^[0-9]+$ ]]; then
+            echo "::error::pr.txt contains non-numeric content: ${PR_ID}"
+            exit 1
+          fi
+          echo "id=${PR_ID}" >> "${GITHUB_OUTPUT}"
      - name: Download artifact
        uses: dawidd6/action-download-artifact@b6e2e70617bc3265edd6dab6c906732b2f1ae151 # v21
        with:
@@ -42,7 +48,7 @@ jobs:
          enable-pull-request-comment: false
          enable-commit-comment: false
        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN_PR }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_PR_CINNY }}
        timeout-minutes: 1
      - name: Comment preview on PR
@@ -1,115 +1,160 @@
-# Cinny
-<p>
-    <a href="https://github.com/ajbura/cinny/releases">
-        <img alt="GitHub release downloads" src="https://img.shields.io/github/downloads/ajbura/cinny/total?logo=github&style=social"></a>
-    <a href="https://hub.docker.com/r/ajbura/cinny">
-        <img alt="DockerHub downloads" src="https://img.shields.io/docker/pulls/ajbura/cinny?logo=docker&style=social"></a>
-    <a href="https://fosstodon.org/@cinnyapp">
-        <img alt="Follow on Mastodon" src="https://img.shields.io/mastodon/follow/106845779685925461?domain=https%3A%2F%2Ffosstodon.org&logo=mastodon&style=social"></a>
-    <a href="https://twitter.com/intent/follow?screen_name=cinnyapp">
-        <img alt="Follow on Twitter" src="https://img.shields.io/twitter/follow/cinnyapp?logo=twitter&style=social"></a>
-    <a href="https://cinny.in/#sponsor">
-        <img alt="Sponsor Cinny" src="https://img.shields.io/opencollective/all/cinny?logo=opencollective&style=social"></a>
-</p>
+# Lotus Chat

-A Matrix client focusing primarily on simple, elegant and secure interface. The main goal is to have an instant messaging application that is easy on people and has a modern touch.
- [Roadmap](https://github.com/orgs/cinnyapp/projects/1)
- [Contributing](./CONTRIBUTING.md)
+A Matrix client for [Lotus Guild](https://lotusguild.org) — forked from [Cinny](https://github.com/cinnyapp/cinny) v4.12.1.

-> [!IMPORTANT] 
-We are currently in the [process of replacing the matrix-js-sdk](https://github.com/cinnyapp/cinny/issues/257#issuecomment-3714406704) with our own SDK. As a result, we will not be accepting any pull requests until further notice.
-Thank you for your understanding.
+Deployed at [chat.lotusguild.org](https://chat.lotusguild.org).

-<img align="center" src="https://raw.githubusercontent.com/cinnyapp/cinny-site/main/assets/preview2-light.png" height="380">
+---

-## Getting started
-The web app is available at [app.cinny.in](https://app.cinny.in/) and gets updated on each new release. The `dev` branch is continuously deployed at [dev.cinny.in](https://dev.cinny.in) but keep in mind that it could have things broken.
+## Changes from upstream Cinny

-You can also download our desktop app from the [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).
+### Branding & Identity

-## Self-hosting
-To host Cinny on your own, simply download the tarball from [GitHub releases](https://github.com/cinnyapp/cinny/releases/latest), and serve the files from `dist/` using your preferred webserver. Alternatively, you can just pull the docker image from [DockerHub](https://hub.docker.com/r/ajbura/cinny) or [GitHub Container Registry](https://github.com/cinnyapp/cinny/pkgs/container/cinny).
+- Package renamed to `lotus-chat`, description updated to "Lotus Chat — Matrix client for Lotus Guild"
+- App title changed from "Cinny" to "Lotus Chat" throughout
+- Favicon, PWA icons, and all icon sizes (57×57 → 180×180 Apple touch icons) replaced with Lotus.png variants
+- Logo in About dialog and Auth page replaced with official Lotus.png
+- Auth footer rewritten: shows dynamic version from `package.json`, links to lotusguild.org, chat.lotusguild.org, and matrix.lotusguild.org
+- Welcome page tagline changed from "Yet another matrix client" to "A Matrix client for Lotus Guild"
+- Encryption key export filename changed from `cinny-keys.txt` to `lotus-keys.txt`
+- `manifest.json` updated with Lotus name, description, and branding colors

-* The default homeservers and explore pages are defined in [`config.json`](config.json).
+### LotusGuild Terminal Design System (TDS) v1.2

-* You need to set up redirects to serve the assests. Example configurations; [netlify](netlify.toml), [nginx](contrib/nginx/cinny.domain.tld.conf), [caddy](contrib/caddy/caddyfile).
-    * If you have trouble configuring redirects you can [enable hash routing](config.json#L35) — the url in the browser will have a `/#/` between the domain and open channel (ie. `app.cinny.in/#/home/` instead of `app.cinny.in/home/`) but you won't have to configure your webserver.
+A full custom theme engine layered on top of Cinny's vanilla-extract theming:

-* To deploy on subdirectory, you need to rebuild the app youself after updating the `base` path in [`build.config.ts`](build.config.ts).
-    * For example, if you want to deploy on `https://cinny.in/app`, then set `base: '/app'`.
+**Dark mode** (`LotusTerminalTheme`):
+- CRT terminal aesthetic: scanline overlay, vignette, phosphor glow
+- Palette: bg `#030508`, orange `#FF6B00`, cyan `#00D4FF`, green `#00FF88`, text `#c4d9ee`
+- Monospace font stack, terminal-style scrollbars
+- Custom hex-grid and circuit-board CSS background patterns
+- Matrix-style boot messages on the welcome page (press Escape to skip)
+- CSS variables: `--lt-*` family covering colors, glow effects, borders, animations

-<details><summary><b>PGP Public Key to verify tarball</b></summary>
+**Light mode** (`LotusTerminalLightTheme`):
+- Full light palette: bg `#edf0f5`, orange `#c44e00`, cyan `#0062b8`, green `#006d35`, text `#111827`
+- No CRT effects (scanlines, vignette disabled)
+- Light-mode scrollbars, adjusted code block colors, semantic color overrides
+- Scoped to `html[data-theme="light"] body.lotusTerminalBodyClass`
+- `ThemeManager.tsx` sets `data-theme` attribute based on active theme kind

-```
-----BEGIN PGP PUBLIC KEY BLOCK-----
+**Chat Backgrounds** (20+ custom patterns, all TDS-aware):
+- Blueprint grid, carbon fiber, starfield, topographic contours, herringbone, crosshatch
+- Chevron, polka dots, triangles, plaid
+- All patterns use CSS custom properties — adapt to both TDS dark and light themes
+- Settings toggle for showing per-message sender profiles

-mQGNBGJw/g0BDAC8qQeLqDMzYzfPyOmRlHVEoguVTo+eo1aVdQH2X7OELdjjBlyj
-6d6c1adv/uF2g83NNMoQY7GEeHjRnXE4m8kYSaarb840pxrYUagDc0dAbJOGaCBY
-FKTo7U1Kvg0vdiaRuus0pvc1NVdXSxRNQbFXBSwduD+zn66TI3HfcEHNN62FG1cE
-K1jWDwLAU0P3kKmj8+CAc3h9ZklPu0k/+t5bf/LJkvdBJAUzGZpehbPL5f3u3BZ0
-leZLIrR8uV7PiV5jKFahxlKR5KQHld8qQm+qVhYbUzpuMBGmh419I6UvTzxuRcvU
-Frn9ttCEzV55Y+so4X2e4ZnB+5gOnNw+ecifGVdj/+UyWnqvqqDvLrEjjK890nLb
-Pil4siecNMEpiwAN6WSmKpWaCwQAHEGDVeZCc/kT0iYfj5FBcsTVqWiO6eaxkUlm
-jnulqWqRrlB8CJQQvih/g//uSEBdzIibo+ro+3Jpe120U/XVUH62i9HoRQEm6ADG
-4zS5hIq4xyA8fL8AEQEAAbQdQ2lubnlBcHAgPGNpbm55YXBwQGdtYWlsLmNvbT6J
-AdQEEwEIAD4CGwMFCwkIBwIGFQoJCAsCBBYCAwECHgECF4AWIQSRri2MHidaaZv+
-vvuUMwx6UK/M8wUCZqEDwAUJFvwIswAKCRCUMwx6UK/M877qC/4lxXOQIoWnLLkK
-YiRCTkGsH6NdxgeYr6wpXT4xuQ45ZxCytwHpOGQmO/5up5961TxWW8D1frRIJHjj
-AZGoRCL3EKEuY8nt3D99fpf3DvZrs1uoVAhiyn737hRlZAg+QsJheeGCmdSJ0hX5
-Yud8SE+9zxLS1+CEjMrsUd/RGre/phme+wNXfaHfREAC9ewolgVChPIbMxG2f+vs
-K8Xv52BFng7ta9fgsl1XuOjpuaSbQv6g+4ONk/lxKF0SmnhEGM3dmIYPONxW47Yf
-atnIjRra/YhPTNwrNBGMmG4IFKaOsMbjW/eakjWTWOVKKJNBMoDdRcYYWIMCpLy8
-AQUrMtQEsHSnqCwrw818S5A6rrhcfVGk36RGm0nOy6LS5g5jmqaYsvbCcBGY9B2c
-SUAVNm17oo7TtEajk8hcSXoZod1t++pyjcVKEmSn3nFK7v5m3V+cPhNTxZMK459P
-3x1Ucqj/kTqrxKw6s2Uknuk0ajmw0ljV+BQwgL6maguo9BKgCNW5AY0EYnD+DQEM
-ANOu/d6ZMF8bW+Df9RDCUQKytbaZfa+ZbIHBus7whCD/SQMOhPKntv3HX7SmMCs+
-5i27kJMu4YN623JCS7hdCoXVO1R5kXCEcneW/rPBMDutaM472YvIWMIqK9Wwl5+0
-Piu2N+uTkKhe9uS2u7eN+Khef3d7xfjGRxoppM+xI9dZO+jhYiy8LuC0oBohTjJq
-QPqfGDpowBwRkkOsGz/XVcesJ1Pzg4bKivTS9kZjZSyT9RRSY8As0sVUN57AwYul
-s1+eh00n/tVpi2Jj9pCm7S0csSXvXj8v2OTdK1jt4YjpzR0/rwh4+/xlOjDjZEqH
-vMPhpzpbgnwkxZ3X8BFne9dJ3maC5zQ3LAeCP5m1W0hXzagYhfyjo74slJgD1O8c
-LDf2Oxc5MyM8Y/UK497zfqSPfgT3NhQmhHzk83DjXw3I6Z3A3U+Jp61w0eBRI1nx
-H1UIG+gldcAKUTcfwL0lghoT3nmi9JAbvek0Smhz00Bbo8/dx8vwQRxDUxlt7Exx
-NwARAQABiQG8BBgBCAAmAhsMFiEEka4tjB4nWmmb/r77lDMMelCvzPMFAmahA9IF
-CRb8CMUACgkQlDMMelCvzPPQgQv/d5/z+fxgKqgfhQX+V49X4WgTVxZ/CzztDoJ1
-XAq1dzTNEy8AFguXIo6eVXPSpMxec7ZreN3+UPQBnCf3eR5YxWNYOYKmk0G4E8D2
-KGUJept7TSA42/8N2ov6tToXFg4CgzKZj0fYLwgutly7K8eiWmSU6ptaO8aEQBHB
-gTGIOO3h6vJMGVycmoeRnHjv4wV84YWSVFSoJ7cY0he4Z9UznJBbE/KHZjrkXsPo
-N+Gg5lDuOP5xjKzM5SogV9lhxBAhMWAg3URUF15yruZBiA8uV1FOK8sal/9C1G7V
-M6ygA6uOZqXlZtcdA94RoSsW2pZ9eLVPsxz2B3Zko7tu11MpNP/wYmfGTI3KxZBj
-n/eodvwjJSgHpGOFSmbNzvPJo3to5nNlp7wH1KxIMc6Uuu9hgfDfwkFZgV2bnFIa
-Q6gyF548Ub48z7Dz83+WwLgbX19ve4oZx+dqSdczP6ILHRQomtrzrkkP2LU52oI5
-mxFo+ioe/ABCufSmyqFye0psX3Sp
-=WtqZ
-----END PGP PUBLIC KEY BLOCK-----
-```
-</details>
+### Voice / Video Call Improvements

-## Local development
-> [!TIP]
-> We recommend using a version manager as versions change very quickly. You will likely need to switch between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Recommended nodejs version is Krypton LTS (v24.13.1).
+- **Element Call 0.19.3**: Upgraded from 0.16.3. Dist copied to `public/element-call/` by vite at build time.
+- **Camera default OFF**: Camera no longer persists across sessions via localStorage. Always starts disabled. Optional `cameraOnJoin` setting for explicit opt-in.
+- **Deafen button**: Tooltip corrected to "Deafen" / "Undeafen" (was "Turn Off Sound" / "Turn On Sound")
+- **Screenshare confirmation**: A confirm dialog appears before screenshare is broadcast to call participants
+- **Auto-revert spotlight on screenshare**: When someone starts screensharing, EC normally forces all participants into spotlight view. Patched in `CallControl.ts` `onControlMutation()` — detects the screenshare button going `primary` and clicks `gridButton` after 600ms to revert to grid layout. Participants choose to watch screenshare manually.
+- **Push to Talk (PTT)**:
+  - Configurable keybind (default: Space) via Settings > General > Calls
+  - Mic activates on keydown, deactivates on keyup; mic muted on tab blur/focus to prevent stuck-on mic
+  - Visual indicator: plain folds `Chip` by default; when LotusGuild TDS is active: orange `PTT — Hold SPACE` / green `● LIVE` in JetBrains Mono
+  - Listens on both main window and EC iframe `contentWindow` for reliable key capture
+  - Implemented via `CallControl.setMicrophone()` public method on the widget bridge
+  - **Mic state preservation**: when enabling PTT mode mid-call, the user's previous mic state is saved and restored when PTT is disabled — prevents unwanted unmute if the user had manually muted before switching to PTT.
+- **Noise suppression toggle**: Settings > General > Calls — passes `noiseSuppression` URL parameter to the embedded Element Call widget
+- **Call button scoping**: The upstream Cinny 4.12.1 call button (voice + video dropdown) is restricted to DMs and private group chats only. Specifically: direct messages, or invite-only rooms that have no `m.space.parent` state event (i.e. not a space/guild text channel). Public rooms and space channels are excluded to prevent accidental mass-notifications. `Room.tsx` switches to CallView layout when a call embed is active in the current room.
+- **Poll display**: `m.poll.start` events (both stable Matrix 1.7 `m.poll` content key and MSC3381 unstable `org.matrix.msc3381.poll.start`) render as read-only poll cards inside the standard message bubble — question and answer options shown. Registered as top-level event renderers AND inside the `EncryptedContent` callback so encrypted polls also display after decryption. "Open in Element to vote" note displayed. Implemented in `PollContent.tsx`.
+- **Deleted message placeholder**: Redacted `m.room.message`, `m.room.encrypted`, and `m.sticker` events no longer disappear from the timeline. Instead they reach the existing `RedactedContent` component (trash icon + italic "This message has been deleted" with reason if provided), matching Element, FluffyChat, Commet, and Nheko behaviour. One-line change in the `eventRenderer` filter in `RoomTimeline.tsx`.
+- **Picture-in-picture (PiP)**: When navigating away from a call room while in an active call, the call embed shrinks to a 280x158px floating window in the bottom-right corner. The PiP window is **draggable** — drag it anywhere on screen to move it out of the way. Clicking (without dragging) navigates back to the call room. Drag vs click distinguished by a 5px movement threshold; touch drag supported. Imperative style overrides on `callEmbedRef.current` via `useEffect` — a wrapper div cannot be used because `useCallEmbedPlacementSync` writes `top/left/width/height` directly onto that element.

-Execute the following commands to start a development server:
-```sh
-npm ci # Installs all dependencies
-npm start # Serve a development version
+### Messaging Enhancements
+
+- **GIF picker**: Giphy-powered GIF search and send. Button appears in the message composer only when `gifApiKey` is set in `config.json`. Sends GIF as `m.image` — fetches blob, uploads via `mx.uploadContent`, sends with `mx.sendMessage`. `FocusTrap` handles click-outside / Escape to close. When TDS is active: dark navy background (`#060c14`), orange dim border, `// GIF_SEARCH` header, CSS overrides for Giphy SDK search bar (dark bg, orange border/focus ring, JetBrains Mono), custom orange scrollbar. All TDS styles live in `lotus-terminal.css.ts` — no runtime `<style>` injection, eliminating flash of unstyled content.
+- **Message forwarding**: Forward any message to any room from the message context menu.
+- **Image/video captions**: Caption text field on image and video upload — sent as a single event with the media.
+- **Location sharing**: Map embed view for incoming location events + static share button. Renders `m.location` events inline with a map tile.
+- **Deleted message placeholders**: Redacted `m.room.message`, `m.room.encrypted`, and `m.sticker` events render as "This message has been deleted" with reason (if provided) rather than disappearing. One-line change in the `eventRenderer` filter in `RoomTimeline.tsx`.
+
+### Per-Message Read Receipts
+
+Full per-message read receipt system — shows who has read each message directly in the timeline.
+
+**Architecture:**
+- `useRoomReadPositions(room)` hook — computes a `Map<eventId, userId[]>` from all joined members' `room.getEventReadUpTo()` positions. Subscribes to `RoomEvent.Receipt` for live updates (debounced at 150ms to batch burst updates from mass-read events).
+- `nearestRenderableId(liveEvents, evtId)` — receipts can land on reaction/edit events that `RoomTimeline` skips (renders `null`). This walks backwards from the receipt event through the live timeline until it finds a non-reaction/non-edit event to attach to.
+- `ReadPositionsContext` — React context providing the positions map from `RoomTimeline` down to all `Message` instances without prop drilling.
+- `ReadReceiptAvatars` component — renders a pill-shaped row of overlapping `StackedAvatar` circles (24px, `SurfaceVariant` outline) below messages with readers. Pill uses `color.SurfaceVariant.Container` background for visibility on any wallpaper. Max 5 avatars shown + `+N` overflow count. Avatar fallback uses `colorMXID(userId)` for distinctive per-user color.
+- Clicking the pill opens the **"Seen by" modal** (`EventReaders`) listing all readers with their avatar, display name, and a formatted read timestamp ("Today at 3:42 PM", "Yesterday at 10:15 AM", "May 14 at 9:00 AM"). Timestamps use `room.getReadReceiptForUserId(userId)?.data.ts` and respect the user's 24-hour clock setting.
+- Authenticated media (`mxcUrlToHttp` utility) used for all avatar loads, matching the correct Lotus utility signature.
+
+### Delivery Status Indicators
+
+Own messages display a small status marker below the message content (when no read receipts are visible yet):
+- `⟳` — message is being sent / encrypting
+- `✓` — message confirmed sent (local echo)
+- `✕` — message failed to send (shown in red; orange glow in TDS mode)
+- Status hidden once the server confirms receipt (`status === null`) — read receipts take over at that point
+
+### URL Preview Cards (TDS)
+
+URL preview cards (`UrlPreviewCard`) styled for terminal mode:
+- Dark transparent background with cyan border-left accent (Anduril Orange)
+- Link text in cyan, hover switches to orange with glow
+- Light TDS variant: off-white background with blue accent
+
+### Reaction Chips (TDS)
+
+Emoji reaction buttons styled for terminal mode via `button[data-reaction-key]` selector:
+- Unselected: `rgba(0,212,255,0.06)` background, cyan border
+- Hover: brighter background + box-shadow glow
+- Own reaction (aria-pressed=true): orange tint `rgba(255,107,0,0.12)`, orange border
+- Light TDS: equivalent blue/orange variants
+
+### DM Call Improvements
+
+
+- **Incoming call ring**: DM calls trigger a ring tone with Answer/Decline UI. 30-second auto-dismiss if unanswered. Implemented in `Room.tsx` and `RoomViewHeader.tsx`.
+
+### Infrastructure
+
+- **Authenticated media**: All avatar/media loads use `mxcUrlToHttp(mx, mxcUrl, useAuthentication, w, h, 'crop')` from `../../utils/matrix` — the Lotus utility that handles MSC3916 authenticated media. (Upstream Cinny uses the SDK method with incorrect argument order for authenticated endpoints.)
+- **Upstream tracking**: `git remote add upstream https://github.com/cinnyapp/cinny.git`. Merge strategy: `git fetch upstream && git merge upstream/main`. Daily check via `cinny-upstream-check.sh` on LXC 106 — notifies Matrix on new upstream commits.
+
+---
+
+## Build
+
+```bash
+npm ci
+npm run build   # outputs to dist/
 ```

-To build the app:
-```sh
-npm run build # Compiles the app into the dist/ directory
+Vite's render-chunks phase requires ~6 GB Node heap. If OOM killed, set:
+```bash
+NODE_OPTIONS=--max_old_space_size=6144 npm run build
 ```

-### Running with Docker
-This repository includes a Dockerfile, which builds the application from source and serves it with Nginx on port 80. To
-use this locally, you can build the container like so:
-```
-docker build -t cinny:latest .
+## Deployment
+
+Built files are served from `/var/www/html/` on LXC 106 (nginx). Config lives at `/opt/lotus-cinny/config.json` (vite copies it to `dist/`):
+
+```json
+{
+  "defaultHomeserver": 0,
+  "homeserverList": ["matrix.lotusguild.org"],
+  "allowCustomHomeservers": false,
+  "gifApiKey": "<giphy_key>"
+}
 ```

-You can then run the container you've built with a command similar to this:
-```
-docker run -p 8080:80 cinny:latest
-```
+## Key Custom Files

-This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by navigating to `http://localhost:8080`.
+| File | Purpose |
+|------|---------|
+| `src/lotus-terminal.css.ts` | All TDS CSS tokens, global styles, light/dark variants |
+| `src/lotus-boot.ts` | Boot sequence animation (runs once per session) |
+| `src/app/hooks/useRoomReadPositions.ts` | Per-message read receipt position map |
+| `src/app/features/room/ReadPositionsContext.ts` | React context for read positions |
+| `src/app/components/read-receipt-avatars/` | Read receipt avatar pill component |
+| `src/app/components/event-readers/EventReaders.tsx` | "Seen by" modal with timestamps |
+| `src/app/components/GifPicker.tsx` | GIF search + send |
+| `src/app/features/call/CallControls.tsx` | PTT badge + keybind logic |
+| `src/app/plugins/call/CallControl.ts` | EC widget bridge (screenshare revert, PTT mic) |
+| `src/app/components/CallEmbedProvider.tsx` | PiP + draggable call embed |
@@ -1,32 +1,18 @@
 {
-  "defaultHomeserver": 1,
-  "homeserverList": ["converser.eu", "matrix.org", "mozilla.org", "unredacted.org", "xmr.se"],
-  "allowCustomHomeservers": true,
-
+  "defaultHomeserver": 0,
+  "homeserverList": [
+    "matrix.lotusguild.org"
+  ],
+  "allowCustomHomeservers": false,
  "featuredCommunities": {
    "openAsDefault": false,
-    "spaces": [
-      "#cinny-space:matrix.org",
-      "#community:matrix.org",
-      "#space:unredacted.org",
-      "#science-space:matrix.org",
-      "#libregaming-games:tchncs.de",
-      "#mathematics-on:matrix.org",
-      "#stickers-and-emojis:tastytea.de"
-    ],
-    "rooms": [
-      "#cinny:matrix.org",
-      "#freesoftware:matrix.org",
-      "#pcapdroid:matrix.org",
-      "#gentoo:matrix.org",
-      "#PrivSec.dev:arcticfoxes.net",
-      "#disroot:aria-net.org"
-    ],
-    "servers": ["matrixrooms.info", "matrix.org", "mozilla.org", "unredacted.org"]
+    "spaces": [],
+    "rooms": [],
+    "servers": []
  },
-
  "hashRouter": {
    "enabled": false,
    "basename": "/"
-  }
+  },
+  "gifApiKey": "AqqDuQwZNjYttz7Mn6ME4JH1bJIuZ5CO"
 }
@@ -3,34 +3,39 @@
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
-    <title>Cinny</title>
-    <meta name="name" content="Cinny" />
-    <meta name="author" content="Ajay Bura" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lotus Chat</title>
+    <meta name="name" content="Lotus Chat" />
+    <meta name="author" content="Lotus Guild" />
    <meta
      name="description"
-      content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
+      content="Lotus Chat — the Lotus Guild Matrix client. Secure, fast, and built for our community."
    />
    <meta
      name="keywords"
-      content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element"
+      content="lotus chat, lotus guild, matrix, matrix client"
    />

-    <meta property="og:title" content="Cinny" />
-    <meta property="og:url" content="https://cinny.in" />
-    <meta property="og:image" content="https://cinny.in/assets/favicon-48x48.png" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Lotus Chat" />
+    <meta property="og:url" content="https://chat.lotusguild.org" />
+    <meta property="og:image" content="https://chat.lotusguild.org/public/res/android/android-chrome-192x192.png" />
    <meta
      property="og:description"
-      content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
+      content="Lotus Chat — the Lotus Guild Matrix client. Secure, fast, and built for our community."
    />
    <meta name="theme-color" content="#000000" />
+    <meta name="color-scheme" content="dark light" />

+    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,600;0,700;1,400&family=VT323&display=swap" rel="stylesheet">
    <link id="favicon" rel="shortcut icon" href="./public/favicon.ico" />

    <link rel="manifest" href="/manifest.json" />
    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="application-name" content="Cinny" />
-    <meta name="apple-mobile-web-app-title" content="Cinny" />
+    <meta name="application-name" content="Lotus Chat" />
+    <meta name="apple-mobile-web-app-title" content="Lotus Chat" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

@@ -1,7 +1,7 @@
 {
-  "name": "cinny",
-  "version": "4.11.1",
-  "description": "Yet another matrix client",
+  "name": "lotus-chat",
+  "version": "4.12.1-lotus",
+  "description": "Lotus Chat — Matrix client for Lotus Guild",
  "main": "index.js",
  "type": "module",
  "engines": {
@@ -66,6 +66,9 @@
    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
    "@fontsource/inter": "4.5.14",
+    "@giphy/js-fetch-api": "5.8.0",
+    "@giphy/js-types": "5.1.0",
+    "@giphy/react-components": "10.1.2",
    "@tanstack/react-query": "5.24.1",
    "@tanstack/react-query-devtools": "5.24.1",
    "@tanstack/react-virtual": "3.2.0",
@@ -90,14 +93,14 @@
    "html-react-parser": "4.2.0",
    "i18next": "23.12.2",
    "i18next-browser-languagedetector": "8.0.0",
-    "i18next-http-backend": "3.0.5",
+    "i18next-http-backend": "3.0.6",
    "immer": "9.0.16",
    "is-hotkey": "0.2.0",
    "jotai": "2.6.0",
    "linkify-react": "4.3.2",
    "linkifyjs": "4.3.2",
    "matrix-js-sdk": "38.2.0",
-    "matrix-widget-api": "1.13.0",
+    "matrix-widget-api": "1.16.1",
    "millify": "6.1.0",
    "pdfjs-dist": "4.2.67",
    "prismjs": "1.30.0",
@@ -111,15 +114,16 @@
    "react-i18next": "15.0.0",
    "react-range": "1.8.14",
    "react-router-dom": "6.30.3",
-    "sanitize-html": "2.12.1",
+    "sanitize-html": "2.17.4",
    "slate": "0.123.0",
    "slate-dom": "0.123.0",
    "slate-history": "0.113.1",
    "slate-react": "0.123.0",
+    "styled-components": "6.4.1",
    "ua-parser-js": "1.0.35"
  },
  "devDependencies": {
-    "@element-hq/element-call-embedded": "0.16.3",
+    "@element-hq/element-call-embedded": "0.19.3",
    "@esbuild-plugins/node-globals-polyfill": "0.2.3",
    "@rollup/plugin-inject": "5.0.3",
    "@rollup/plugin-wasm": "6.1.1",
@@ -133,7 +137,7 @@
    "@types/react": "18.2.39",
    "@types/react-dom": "18.2.17",
    "@types/react-google-recaptcha": "2.1.8",
-    "@types/sanitize-html": "2.9.0",
+    "@types/sanitize-html": "2.16.1",
    "@types/ua-parser-js": "0.7.36",
    "@typescript-eslint/eslint-plugin": "5.46.1",
    "@typescript-eslint/parser": "5.46.1",
@@ -0,0 +1,18 @@
+{
+  "defaultHomeserver": 0,
+  "homeserverList": [
+    "matrix.lotusguild.org"
+  ],
+  "allowCustomHomeservers": false,
+  "featuredCommunities": {
+    "openAsDefault": false,
+    "spaces": [],
+    "rooms": [],
+    "servers": []
+  },
+  "hashRouter": {
+    "enabled": false,
+    "basename": "/"
+  },
+  "gifApiKey": "AqqDuQwZNjYttz7Mn6ME4JH1bJIuZ5CO"
+}
@@ -1,14 +1,14 @@
 {
-  "name": "Cinny",
-  "short_name": "Cinny",
-  "description": "Yet another matrix client",
+  "name": "Lotus Chat",
+  "short_name": "Lotus Chat",
+  "description": "Lotus Chat \u2014 the Lotus Guild Matrix client",
  "dir": "auto",
  "lang": "en-US",
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "./",
-  "background_color": "#fff",
-  "theme_color": "#fff",
+  "background_color": "#0a0a0a",
+  "theme_color": "#980000",
  "icons": [
    {
      "src": "./public/android/android-chrome-36x36.png",
@@ -55,5 +55,24 @@
      "sizes": "512x512",
      "type": "image/png"
    }
+  ],
+  "categories": [
+    "social",
+    "communication",
+    "productivity"
+  ],
+  "shortcuts": [
+    {
+      "name": "New Message",
+      "short_name": "DM",
+      "description": "Open a new direct message",
+      "url": "/",
+      "icons": [
+        {
+          "src": "res/android/android-chrome-96x96.png",
+          "sizes": "96x96"
+        }
+      ]
+    }
  ]
 }
@@ -1,13 +1,14 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2707_1961)">
-<path d="M10.5867 17.3522C10.0727 17.4492 9.54226 17.5 9 17.5C4.30558 17.5 0.5 13.6944 0.5 9C0.5 4.30558 4.30558 0.5 9 0.5C13.6944 0.5 17.5 4.30558 17.5 9C17.5 9.54226 17.4492 10.0727 17.3522 10.5867C16.6511 10.2123 15.8503 10 15 10C12.2386 10 10 12.2386 10 15C10 15.8503 10.2123 16.6511 10.5867 17.3522Z" fill="white"/>
-<path d="M10 6.39999C10 6.67614 9.77614 6.89999 9.5 6.89999C9.22386 6.89999 9 6.67614 9 6.39999C9 6.12385 9.22386 5.89999 9.5 5.89999C9.77614 5.89999 10 6.12385 10 6.39999Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C4 0 0 4 0 9C0 14 4 18 9 18C9.63967 18 10.263 17.9345 10.8636 17.8099C10.3186 17.0091 10 16.0417 10 15C10 12.2386 12.2386 10 15 10C16.0417 10 17.0091 10.3186 17.8099 10.8636C17.9345 10.263 18 9.63967 18 9C18 4 14 0 9 0ZM1.2 10.8L4.7 8.5V8.2C4.7 6.4 6 5 7.8 4.8H8.2C9.4 4.8 10.5 5.4 11.1 6.4C11.4 6.3 11.7 6.3 12 6.3C12.4 6.3 12.8 6.3 13.2 6.4C13.9 6.6 14.6 6.9 15.2 7.3C14.6 7.1 14 7 13.3 7C12.1 7 11.1 7.4 10.4 8.4C9.7 9.3 9.3 10.4 9.3 11.6C9.3 13.1 8.9 14.5 8 15.8C7.93744 15.8834 7.87923 15.9625 7.82356 16.0381C7.6123 16.325 7.43739 16.5626 7.2 16.8C4.2 16.1 1.9 13.8 1.2 10.8Z" fill="black"/>
-<path d="M18 15C18 16.6569 16.6569 18 15 18C13.3431 18 12 16.6569 12 15C12 13.3431 13.3431 12 15 12C16.6569 12 18 13.3431 18 15Z" fill="#45B83B"/>
+<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g fill="#980000" fill-opacity="0.88">
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(0,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(45,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(90,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(135,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(180,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(225,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(270,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(315,9,9)"/>
  </g>
-<defs>
-<clipPath id="clip0_2707_1961">
-<rect width="18" height="18" fill="white"/>
-</clipPath>
-</defs>
+  <circle cx="9" cy="9" r="2.2" fill="#cc2000"/>
+  <circle cx="14.5" cy="14.5" r="3" fill="#45B83B"/>
 </svg>
@@ -1,13 +1,14 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2707_2015)">
-<path d="M10.5867 17.3522C10.0727 17.4492 9.54226 17.5 9 17.5C4.30558 17.5 0.5 13.6944 0.5 9C0.5 4.30558 4.30558 0.5 9 0.5C13.6944 0.5 17.5 4.30558 17.5 9C17.5 9.54226 17.4492 10.0727 17.3522 10.5867C16.6511 10.2123 15.8503 10 15 10C12.2386 10 10 12.2386 10 15C10 15.8503 10.2123 16.6511 10.5867 17.3522Z" fill="white"/>
-<path d="M10 6.39999C10 6.67614 9.77614 6.89999 9.5 6.89999C9.22386 6.89999 9 6.67614 9 6.39999C9 6.12385 9.22386 5.89999 9.5 5.89999C9.77614 5.89999 10 6.12385 10 6.39999Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C4 0 0 4 0 9C0 14 4 18 9 18C9.63967 18 10.263 17.9345 10.8636 17.8099C10.3186 17.0091 10 16.0417 10 15C10 12.2386 12.2386 10 15 10C16.0417 10 17.0091 10.3186 17.8099 10.8636C17.9345 10.263 18 9.63967 18 9C18 4 14 0 9 0ZM1.2 10.8L4.7 8.5V8.2C4.7 6.4 6 5 7.8 4.8H8.2C9.4 4.8 10.5 5.4 11.1 6.4C11.4 6.3 11.7 6.3 12 6.3C12.4 6.3 12.8 6.3 13.2 6.4C13.9 6.6 14.6 6.9 15.2 7.3C14.6 7.1 14 7 13.3 7C12.1 7 11.1 7.4 10.4 8.4C9.7 9.3 9.3 10.4 9.3 11.6C9.3 13.1 8.9 14.5 8 15.8C7.93744 15.8834 7.87923 15.9625 7.82356 16.0381C7.6123 16.325 7.43739 16.5626 7.2 16.8C4.2 16.1 1.9 13.8 1.2 10.8Z" fill="black"/>
-<path d="M18 15C18 16.6569 16.6569 18 15 18C13.3431 18 12 16.6569 12 15C12 13.3431 13.3431 12 15 12C16.6569 12 18 13.3431 18 15Z" fill="#989898"/>
+<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g fill="#980000" fill-opacity="0.88">
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(0,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(45,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(90,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(135,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(180,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(225,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(270,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(315,9,9)"/>
  </g>
-<defs>
-<clipPath id="clip0_2707_2015">
-<rect width="18" height="18" fill="white"/>
-</clipPath>
-</defs>
+  <circle cx="9" cy="9" r="2.2" fill="#cc2000"/>
+  <circle cx="14.5" cy="14.5" r="3" fill="#989898"/>
 </svg>
@@ -1,19 +1,13 @@
-<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In  -->
-<svg version="1.1"
-	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
-	 x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
-<defs>
-</defs>
-<g>
-	<g>
-		<circle fill="#FFFFFF" cx="9" cy="9" r="8.5"/>
-	</g>
-	<g>
-		<path d="M9,0C4,0,0,4,0,9c0,5,4,9,9,9c5,0,9-4,9-9C18,4,14,0,9,0z M1.2,10.8l3.5-2.3c0-0.1,0-0.2,0-0.3c0-1.8,1.3-3.2,3.1-3.4
-			c0.1,0,0.2,0,0.4,0c1.2,0,2.3,0.6,2.9,1.6c0.3-0.1,0.6-0.1,0.9-0.1c0.4,0,0.8,0,1.2,0.1c0.7,0.2,1.4,0.5,2,0.9
-			C14.6,7.1,14,7,13.3,7c-1.2,0-2.2,0.4-2.9,1.4c-0.7,0.9-1.1,2-1.1,3.2c0,1.5-0.4,2.9-1.3,4.2c-0.3,0.4-0.5,0.7-0.8,1
-			C4.2,16.1,1.9,13.8,1.2,10.8z"/>
-		<circle cx="9.5" cy="6.4" r="0.5"/>
-	</g>
+<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g fill="#980000" fill-opacity="0.88">
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(0,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(45,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(90,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(135,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(180,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(225,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(270,9,9)"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(315,9,9)"/>
  </g>
+  <circle cx="9" cy="9" r="2.2" fill="#cc2000"/>
 </svg>
@@ -127,6 +127,7 @@ function AccountDataEdit({
            <Input
              variant={type.length > 0 || submitting ? 'SurfaceVariant' : 'Background'}
              name="typeInput"
+              aria-label="Account data type"
              size="400"
              radii="300"
              readOnly={type.length > 0 || submitting}
@@ -170,6 +171,7 @@ function AccountDataEdit({
        <TextAreaComponent
          ref={textAreaRef}
          name="contentTextArea"
+          aria-label="JSON content"
          style={{
            fontFamily: 'monospace',
          }}
@@ -294,7 +296,7 @@ export function AccountDataEditor({
            </Chip>
          </Box>
          <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
              <Icon src={Icons.Cross} />
            </IconButton>
          </Box>
@@ -49,7 +49,7 @@ export function AuthFlowsLoader({ fallback, error, children }: AuthFlowsLoaderPr
  );

  useEffect(() => {
-    load();
+    load().catch(() => {});
  }, [load]);

  if (state.status === AsyncStatus.Idle || state.status === AsyncStatus.Loading) {
@@ -178,6 +178,7 @@ export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
          )}
          <IconButton
            aria-pressed={!!menuCords}
+            aria-label="Backup options"
            size="300"
            variant="Surface"
            radii="300"
@@ -1,5 +1,32 @@
-import React, { ReactNode, useCallback, useRef } from 'react';
+/* eslint-disable jsx-a11y/media-has-caption */
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
+import { MatrixRTCSession } from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
+import FocusTrap from 'focus-trap-react';
+import {
+  Avatar,
+  Box,
+  Button,
+  color,
+  config,
+  Dialog,
+  Icon,
+  Icons,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Text,
+  toRem,
+} from 'folds';
+import {
+  EventTimelineSetHandlerMap,
+  EventType,
+  RelationType,
+  Room,
+  RoomEvent,
+} from 'matrix-js-sdk';
+import { IRTCNotificationContent, RTCNotificationType } from 'matrix-js-sdk/lib/matrixrtc/types';
+import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
 import {
  CallEmbedContextProvider,
  CallEmbedRefContextProvider,
@@ -7,11 +34,346 @@ import {
  useCallJoined,
  useCallThemeSync,
  useCallMemberSoundSync,
+  useCallStart,
 } from '../hooks/useCallEmbed';
 import { callChatAtom, callEmbedAtom } from '../state/callEmbed';
 import { CallEmbed } from '../plugins/call';
 import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
 import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+import CallSound from '../../../public/sound/call.ogg';
+import { useCallMembersChange, useCallSession } from '../hooks/useCall';
+import { useRoomAvatar, useRoomName } from '../hooks/useRoomMeta';
+import { mDirectAtom } from '../state/mDirectList';
+import { useMediaAuthentication } from '../hooks/useMediaAuthentication';
+import { mxcUrlToHttp } from '../utils/matrix';
+import { RoomAvatar, RoomIcon } from './room-avatar';
+import { useRoomNavigate } from '../hooks/useRoomNavigate';
+import { getStateEvent, getMemberDisplayName } from '../utils/room';
+import { getMxIdLocalPart } from '../utils/matrix';
+import { StateEvent } from '../../types/matrix/room';
+import { getPowersLevelFromMatrixEvent } from '../hooks/usePowerLevels';
+import { getRoomCreatorsForRoomId } from '../hooks/useRoomCreators';
+import { getRoomPermissionsAPI } from '../hooks/useRoomPermissions';
+import { useLivekitSupport } from '../hooks/useLivekitSupport';
+import { CallAvatarAnimation } from '../styles/Animations.css';
+import { webRTCSupported } from '../utils/rtc';
+
+const PIP_MIN_W = 200;
+const PIP_MIN_H = 112;
+
+type Corner = 'se' | 'sw' | 'ne' | 'nw';
+
+/** Normalise the element to top/left positioning so resize math is uniform. */
+function normaliseToTopLeft(el: HTMLElement) {
+  const rect = el.getBoundingClientRect();
+  el.style.left = `${rect.left}px`;
+  el.style.top = `${rect.top}px`;
+  el.style.width = `${rect.width}px`;
+  el.style.height = `${rect.height}px`;
+  el.style.right = 'auto';
+  el.style.bottom = 'auto';
+}
+
+type IncomingCallInfo = {
+  room: Room;
+  sender: string;
+  senderTs: number;
+  lifetime: number;
+  intent?: string;
+  notificationType: RTCNotificationType;
+  refEventId: string;
+};
+type IncomingCallProps = {
+  dm: boolean;
+  info: IncomingCallInfo;
+  onIgnore: () => void;
+  onAnswer: (room: Room, video: boolean) => void;
+  onReject: (room: Room, eventId: string) => void;
+};
+function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const livekitSupported = useLivekitSupport();
+  const rtcSupported = webRTCSupported();
+  const canAnswer = livekitSupported && rtcSupported;
+  const { room } = info;
+
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  const roomName = useRoomName(room);
+  const roomAvatar = useRoomAvatar(room, dm);
+  const avatarUrl = roomAvatar
+    ? mxcUrlToHttp(mx, roomAvatar, useAuthentication, 96, 96, 'crop') ?? undefined
+    : undefined;
+
+  const session = useCallSession(room);
+  useCallMembersChange(
+    session,
+    useCallback(() => {
+      const members = MatrixRTCSession.sessionMembershipsForRoom(room, session.sessionDescription);
+      if (members.length === 0) {
+        onIgnore();
+      }
+    }, [room, session, onIgnore])
+  );
+
+  const playSound = useCallback(() => {
+    const audioElement = audioRef.current;
+    audioElement?.play().catch(() => undefined);
+  }, []);
+
+  useEffect(() => {
+    if (info.notificationType === 'ring') {
+      playSound();
+    }
+    return () => {
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current.currentTime = 0;
+      }
+    };
+  }, [playSound, info.notificationType]);
+
+  useEffect(() => {
+    const remaining = info.senderTs + info.lifetime - Date.now();
+    if (remaining <= 0) { onIgnore(); return; }
+    const id = setTimeout(onIgnore, remaining);
+    return () => clearTimeout(id);
+  }, [info.senderTs, info.lifetime, onIgnore]);
+
+  return (
+    <>
+      <Overlay open backdrop={<OverlayBackdrop />}>
+        <OverlayCenter>
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: () => onIgnore(),
+              clickOutsideDeactivates: false,
+              escapeDeactivates: false,
+            }}
+          >
+            <Dialog style={{ maxWidth: toRem(324) }}>
+              <Box style={{ padding: config.space.S400 }} direction="Column" gap="700">
+                <Text size="T200" align="Center">
+                  {getMemberDisplayName(info.room, info.sender) ?? getMxIdLocalPart(info.sender) ?? info.sender}
+                </Text>
+                <Box direction="Column" gap="500" alignItems="Center">
+                  <Box shrink="No">
+                    <Avatar size="500" className={CallAvatarAnimation}>
+                      <RoomAvatar
+                        roomId={room.roomId}
+                        src={avatarUrl}
+                        alt={roomName}
+                        renderFallback={() => (
+                          <RoomIcon
+                            roomType={room.getType()}
+                            size="400"
+                            joinRule={room.getJoinRule()}
+                            filled
+                          />
+                        )}
+                      />
+                    </Avatar>
+                  </Box>
+                  <Box grow="Yes" direction="Column" gap="100">
+                    <Text size="H3" align="Center" truncate>
+                      {roomName}
+                    </Text>
+                    <Text size="T300">Incoming Call</Text>
+                  </Box>
+                </Box>
+                {!livekitSupported && (
+                  <Text
+                    style={{ margin: 'auto', color: color.Critical.Main }}
+                    size="L400"
+                    align="Center"
+                  >
+                    Your homeserver does not support calling.
+                  </Text>
+                )}
+                {!webRTCSupported() && (
+                  <Text
+                    style={{ margin: 'auto', color: color.Critical.Main }}
+                    size="L400"
+                    align="Center"
+                  >
+                    Your browser does not support WebRTC, which is required for calling.
+                  </Text>
+                )}
+                <Box direction="Column" gap="300">
+                  <Button
+                    style={{ flexGrow: 1 }}
+                    variant="Success"
+                    size="400"
+                    radii="400"
+                    onClick={() => onAnswer(room, info.intent === 'video')}
+                    before={
+                      <Icon
+                        size="200"
+                        src={info.intent === 'video' ? Icons.VideoCamera : Icons.Phone}
+                        filled
+                      />
+                    }
+                    disabled={!canAnswer}
+                  >
+                    <Text as="span" size="B400">
+                      Answer
+                    </Text>
+                  </Button>
+                  <Button
+                    style={{ flexGrow: 1 }}
+                    variant="Success"
+                    fill="Soft"
+                    size="400"
+                    radii="400"
+                    onClick={() => (dm ? onReject(room, info.refEventId) : onIgnore())}
+                    before={<Icon size="200" src={Icons.Cross} filled />}
+                  >
+                    <Text as="span" size="B400">
+                      {dm ? 'Reject' : 'Ignore'}
+                    </Text>
+                  </Button>
+                </Box>
+              </Box>
+            </Dialog>
+          </FocusTrap>
+        </OverlayCenter>
+      </Overlay>
+      <audio ref={audioRef} loop style={{ display: 'none' }}>
+        <source src={CallSound} type="audio/ogg" />
+      </audio>
+    </>
+  );
+}
+
+type IncomingCallListenerProps = {
+  callEmbed?: CallEmbed;
+  joined?: boolean;
+};
+function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps) {
+  const mx = useMatrixClient();
+  const directs = useAtomValue(mDirectAtom);
+  const { navigateRoom } = useRoomNavigate();
+
+  const [callInfo, setCallInfo] = useState<IncomingCallInfo>();
+  const dm = callInfo ? directs.has(callInfo.room.roomId) : false;
+  const startCall = useCallStart(dm);
+
+  const handleTimelineEvent: EventTimelineSetHandlerMap[RoomEvent.Timeline] = useCallback(
+    async (event, room, toStartOfTimeline, removed, data) => {
+      // only process rtc notification reference events.
+      // we do not want to wait to decrypt all events.
+      if (event.getRelation()?.rel_type !== RelationType.Reference) return;
+
+      if (event.isEncrypted()) {
+        if (!event.isBeingDecrypted()) {
+          await event.attemptDecryption(mx.getCrypto() as CryptoBackend);
+        }
+        await event.getDecryptionPromise();
+      }
+
+      if (
+        !room ||
+        event.getType() !== EventType.RTCNotification ||
+        event.getSender() === mx.getSafeUserId() ||
+        !data.liveEvent
+      ) {
+        return;
+      }
+
+      const sender = event.getSender();
+      const content = event.getContent<IRTCNotificationContent>();
+      const senderTs =
+        content.sender_ts - event.getTs() > 20000 ? event.getTs() : content.sender_ts;
+      const lifetime = Math.min(content.lifetime, 120000);
+      const notificationType = content.notification_type;
+      const relation =
+        event.getRelation()?.rel_type === RelationType.Reference ? event.getRelation() : undefined;
+      const refEventId = relation?.event_id;
+
+      const mention =
+        content['m.mentions']?.room || content['m.mentions']?.user_ids?.includes(mx.getSafeUserId());
+      if (!sender || !refEventId || !mention || Date.now() >= senderTs + lifetime) {
+        return;
+      }
+
+      const powerLevelsEvent = getStateEvent(room, StateEvent.RoomPowerLevels);
+      const powerLevels = getPowersLevelFromMatrixEvent(powerLevelsEvent);
+      const creators = getRoomCreatorsForRoomId(mx, room.roomId);
+      const permissions = getRoomPermissionsAPI(creators, powerLevels);
+
+      const hasCallPermission = permissions.stateEvent(
+        StateEvent.GroupCallMemberPrefix,
+        mx.getSafeUserId()
+      );
+      if (!hasCallPermission) return;
+
+      const info: IncomingCallInfo = {
+        room,
+        sender,
+        senderTs,
+        lifetime,
+        intent:
+          'm.call.intent' in content && typeof content['m.call.intent'] === 'string'
+            ? content['m.call.intent']
+            : undefined,
+        notificationType,
+        refEventId,
+      };
+
+      setCallInfo(info);
+    },
+    [mx]
+  );
+
+  useEffect(() => {
+    mx.on(RoomEvent.Timeline, handleTimelineEvent);
+    return () => {
+      mx.removeListener(RoomEvent.Timeline, handleTimelineEvent);
+    };
+  }, [mx, handleTimelineEvent]);
+
+  const handleIgnore = useCallback(() => {
+    setCallInfo(undefined);
+  }, []);
+
+  const handleReject = useCallback(
+    (room: Room, eventId: string) => {
+      mx.sendEvent(room.roomId, EventType.RTCDecline, {
+        'm.relates_to': {
+          rel_type: RelationType.Reference,
+          event_id: eventId,
+        },
+      });
+      setCallInfo(undefined);
+    },
+    [mx]
+  );
+
+  const handleAnswer = useCallback(
+    (room: Room, video: boolean) => {
+      startCall(room, { microphone: true, video, sound: true });
+      setCallInfo(undefined);
+      navigateRoom(room.roomId);
+    },
+    [startCall, navigateRoom]
+  );
+
+  if (callInfo && callEmbed?.roomId === callInfo.room.roomId) {
+    return null;
+  }
+  return !joined && callInfo ? (
+    <IncomingCall
+      dm={dm}
+      info={callInfo}
+      onIgnore={handleIgnore}
+      onAnswer={handleAnswer}
+      onReject={handleReject}
+    />
+  ) : null;
+}

 function CallUtils({ embed }: { embed: CallEmbed }) {
  const setCallEmbed = useSetAtom(callEmbedAtom);
@@ -41,13 +403,131 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
  const screenSize = useScreenSizeContext();

  const chatOnlyView = chat && screenSize !== ScreenSize.Desktop;
+  const inCallRoom = callEmbed && selectedRoom === callEmbed.roomId;
+  const callActive = callEmbed && joined;
+  const callVisible = inCallRoom && callActive && !chatOnlyView;
+  const pipMode = callActive && !inCallRoom;
+  const { navigateRoom } = useRoomNavigate();

-  const callVisible = callEmbed && selectedRoom === callEmbed.roomId && joined && !chatOnlyView;
+  const pipDragRef = React.useRef<{
+    startX: number; startY: number; origLeft: number; origTop: number; dragged: boolean;
+  } | null>(null);
+  const activeDragCleanupRef = React.useRef<(() => void) | null>(null);
+  React.useEffect(() => () => { activeDragCleanupRef.current?.(); }, []);
+
+  // Track previous pipMode to only reset position when first entering pip (not on callVisible changes)
+  const prevPipModeRef = React.useRef(false);
+  React.useEffect(() => {
+    const el = callEmbedRef.current;
+    if (!el) return;
+    if (pipMode) {
+      if (!prevPipModeRef.current) {
+        el.style.top = 'auto'; el.style.left = 'auto';
+        el.style.bottom = '72px'; el.style.right = '16px';
+        el.style.width = '280px'; el.style.height = '158px';
+        el.style.borderRadius = '12px'; el.style.overflow = 'hidden';
+        el.style.zIndex = '99'; el.style.boxShadow = '0 8px 32px rgba(0,0,0,0.55)';
+        el.style.border = '1px solid rgba(255,255,255,0.1)';
+      }
+      el.style.visibility = 'visible';
+    } else {
+      ['top','left','bottom','right','width','height','borderRadius','overflow','zIndex','boxShadow','border'].forEach(p => { (el.style as any)[p] = ''; });
+      el.style.visibility = callVisible ? '' : 'hidden';
+    }
+    prevPipModeRef.current = pipMode;
+  }, [pipMode, callVisible]);
+
+  React.useEffect(() => {
+    if (!pipMode) return;
+    const onPipWindowResize = (): void => {
+      const el = callEmbedRef.current;
+      if (!el) return;
+      const l = parseFloat(el.style.left);
+      const t = parseFloat(el.style.top);
+      if (!isNaN(l)) el.style.left = `${Math.max(0, Math.min(l, window.innerWidth - el.offsetWidth))}px`;
+      if (!isNaN(t)) el.style.top = `${Math.max(0, Math.min(t, window.innerHeight - el.offsetHeight))}px`;
+    };
+    window.addEventListener('resize', onPipWindowResize);
+    return () => window.removeEventListener('resize', onPipWindowResize);
+  }, [pipMode, callEmbedRef]);
+
+  const handlePipMouseDown = (e: React.MouseEvent) => {
+    const el = callEmbedRef.current; if (!el) return;
+    const rect = el.getBoundingClientRect();
+    pipDragRef.current = { startX: e.clientX, startY: e.clientY, origLeft: rect.left, origTop: rect.top, dragged: false };
+    const onMove = (ev: MouseEvent) => {
+      if (!pipDragRef.current || !el) return;
+      const dx = ev.clientX - pipDragRef.current.startX, dy = ev.clientY - pipDragRef.current.startY;
+      if (!pipDragRef.current.dragged && Math.abs(dx)+Math.abs(dy) > 5) { pipDragRef.current.dragged = true; document.body.style.cursor = 'grabbing'; document.body.style.userSelect = 'none'; }
+      if (pipDragRef.current.dragged) {
+        el.style.left = `${Math.max(0, Math.min(window.innerWidth-el.offsetWidth, pipDragRef.current.origLeft+dx))}px`;
+        el.style.top = `${Math.max(0, Math.min(window.innerHeight-el.offsetHeight, pipDragRef.current.origTop+dy))}px`;
+        el.style.right = 'auto'; el.style.bottom = 'auto';
+      }
+    };
+    const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); document.body.style.cursor = ''; document.body.style.userSelect = ''; activeDragCleanupRef.current = null; setTimeout(() => { if (pipDragRef.current) pipDragRef.current.dragged = false; }, 0); };
+    activeDragCleanupRef.current = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); document.body.style.cursor = ''; document.body.style.userSelect = ''; };
+    document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp);
+  };
+
+  const handlePipTouchStart = (e: React.TouchEvent) => {
+    const el = callEmbedRef.current;
+    if (!el || e.touches.length !== 1) return;
+    const touch = e.touches[0];
+    const rect = el.getBoundingClientRect();
+    pipDragRef.current = { startX: touch.clientX, startY: touch.clientY, origLeft: rect.left, origTop: rect.top, dragged: false };
+    const onTouchMove = (ev: TouchEvent) => {
+      if (!pipDragRef.current || !el || ev.touches.length !== 1) return;
+      ev.preventDefault();
+      const t = ev.touches[0];
+      const dx = t.clientX - pipDragRef.current.startX;
+      const dy = t.clientY - pipDragRef.current.startY;
+      if (!pipDragRef.current.dragged && Math.abs(dx) + Math.abs(dy) > 5) pipDragRef.current.dragged = true;
+      if (pipDragRef.current.dragged) {
+        el.style.left = `${Math.max(0, Math.min(window.innerWidth - el.offsetWidth, pipDragRef.current.origLeft + dx))}px`;
+        el.style.top = `${Math.max(0, Math.min(window.innerHeight - el.offsetHeight, pipDragRef.current.origTop + dy))}px`;
+        el.style.right = 'auto'; el.style.bottom = 'auto';
+      }
+    };
+    const onTouchEnd = () => {
+      document.removeEventListener('touchmove', onTouchMove);
+      document.removeEventListener('touchend', onTouchEnd);
+      activeDragCleanupRef.current = null;
+      setTimeout(() => { if (pipDragRef.current) pipDragRef.current.dragged = false; }, 0);
+    };
+    activeDragCleanupRef.current = () => { document.removeEventListener('touchmove', onTouchMove); document.removeEventListener('touchend', onTouchEnd); };
+    document.addEventListener('touchmove', onTouchMove, { passive: false });
+    document.addEventListener('touchend', onTouchEnd);
+  };
+
+  const handleResizeMouseDown = (e: React.MouseEvent, corner: Corner) => {
+    e.stopPropagation(); e.preventDefault();
+    const el = callEmbedRef.current; if (!el) return;
+    normaliseToTopLeft(el);
+    const sx = e.clientX, sy = e.clientY, sw = el.offsetWidth, sh = el.offsetHeight;
+    const sl = parseFloat(el.style.left), st = parseFloat(el.style.top);
+    document.body.style.cursor = `${corner}-resize`; document.body.style.userSelect = 'none';
+    const onMove = (ev: MouseEvent) => {
+      const dx = ev.clientX-sx, dy = ev.clientY-sy;
+      let w = sw, h = sh, l = sl, t = st;
+      if (corner==='se'){w=sw+dx;h=sh+dy;} if (corner==='sw'){w=sw-dx;h=sh+dy;l=sl+sw-Math.max(PIP_MIN_W,w);}
+      if (corner==='ne'){w=sw+dx;h=sh-dy;t=st+sh-Math.max(PIP_MIN_H,h);} if (corner==='nw'){w=sw-dx;h=sh-dy;l=sl+sw-Math.max(PIP_MIN_W,w);t=st+sh-Math.max(PIP_MIN_H,h);}
+      w=Math.max(PIP_MIN_W,Math.min(w,window.innerWidth)); h=Math.max(PIP_MIN_H,Math.min(h,window.innerHeight));
+      l=Math.max(0,Math.min(l,window.innerWidth-PIP_MIN_W)); t=Math.max(0,Math.min(t,window.innerHeight-PIP_MIN_H));
+      el.style.width=`${w}px`; el.style.height=`${h}px`; el.style.left=`${l}px`; el.style.top=`${t}px`;
+    };
+    const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); document.body.style.cursor=''; document.body.style.userSelect=''; activeDragCleanupRef.current = null; };
+    activeDragCleanupRef.current = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); document.body.style.cursor=''; document.body.style.userSelect=''; };
+    document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp);
+  };

  return (
    <CallEmbedContextProvider value={callEmbed}>
      {callEmbed && <CallUtils embed={callEmbed} />}
-      <CallEmbedRefContextProvider value={callEmbedRef}>{children}</CallEmbedRefContextProvider>
+      <CallEmbedRefContextProvider value={callEmbedRef}>
+        <IncomingCallListener callEmbed={callEmbed} joined={joined} />
+        {children}
+      </CallEmbedRefContextProvider>
      <div
        data-call-embed-container
        style={{
@@ -59,7 +539,40 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
          height: '50%',
        }}
        ref={callEmbedRef}
-      />
+      >
+        {pipMode && callEmbed && (
+          <>
+            <div
+              role="button"
+              tabIndex={0}
+              aria-label="Return to call"
+              onMouseDown={handlePipMouseDown}
+              onTouchStart={handlePipTouchStart}
+              onClick={() => { if (!pipDragRef.current?.dragged) navigateRoom(callEmbed.roomId); }}
+              onKeyDown={(e) => e.key === 'Enter' && navigateRoom(callEmbed.roomId)}
+              style={{ position:'absolute', inset:0, zIndex:1, background:'transparent', cursor:'grab', display:'flex', alignItems:'flex-start', justifyContent:'flex-end', padding:'6px' }}
+            >
+              <div style={{ background:'rgba(0,0,0,0.65)', backdropFilter:'blur(4px)', borderRadius:'6px', padding:'3px 8px', color:'#fff', fontSize:'11px', fontWeight:600, pointerEvents:'none' }}>
+                ↗ Return to call
+              </div>
+            </div>
+            {(['se','sw','ne','nw'] as Corner[]).map((corner) => {
+              const s = corner.includes('s'); const e2 = corner.includes('e');
+              const dots = [[2,2],[2,7],[7,2]].map(([a,b]) => ({
+                position:'absolute' as const, width:4, height:4, borderRadius:'50%',
+                background:'rgba(255,255,255,0.45)',
+                [s?'bottom':'top']:a, [e2?'right':'left']:b,
+              }));
+              return (
+                <div key={corner} onMouseDown={(ev) => handleResizeMouseDown(ev, corner)} onClick={(ev) => ev.stopPropagation()}
+                  style={{ position:'absolute', width:'18px', height:'18px', [s?'bottom':'top']:0, [e2?'right':'left']:0, cursor:`${corner}-resize`, zIndex:2 }}>
+                  {dots.map((style, i) => <div key={i} style={style} />)}
+                </div>
+              );
+            })}
+          </>
+        )}
+      </div>
    </CallEmbedContextProvider>
  );
 }
@@ -12,7 +12,7 @@ export function CapabilitiesLoader({ children }: CapabilitiesLoaderProps) {
  const [state, load] = useAsyncCallback(useCallback(() => mx.getCapabilities(), [mx]));

  useEffect(() => {
-    load();
+    load().catch(() => {});
  }, [load]);

  return children(state.status === AsyncStatus.Success ? state.data : undefined);
@@ -259,9 +259,9 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
          <Dialog variant="Surface">
            <Header style={DialogHeaderStyles} variant="Surface" size="500">
              <Box grow="Yes">
-                <Text size="H4">Device Verification</Text>
+                <Text as="h2" size="H4">Device Verification</Text>
              </Box>
-              <IconButton size="300" radii="300" onClick={handleCancel}>
+              <IconButton size="300" radii="300" onClick={handleCancel} aria-label="Cancel verification">
                <Icon src={Icons.Cross} />
              </IconButton>
            </Header>
@@ -299,9 +299,9 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
          size="500"
        >
          <Box grow="Yes">
-            <Text size="H4">Setup Device Verification</Text>
+            <Text as="h2" size="H4">Setup Device Verification</Text>
          </Box>
-          <IconButton size="300" radii="300" onClick={onCancel}>
+          <IconButton size="300" radii="300" onClick={onCancel} aria-label="Cancel">
            <Icon src={Icons.Cross} />
          </IconButton>
        </Header>
@@ -334,9 +334,9 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
          size="500"
        >
          <Box grow="Yes">
-            <Text size="H4">Reset Device Verification</Text>
+            <Text as="h2" size="H4">Reset Device Verification</Text>
          </Box>
-          <IconButton size="300" radii="300" onClick={onCancel}>
+          <IconButton size="300" radii="300" onClick={onCancel} aria-label="Cancel">
            <Icon src={Icons.Cross} />
          </IconButton>
        </Header>
@@ -0,0 +1,116 @@
+import React, { useCallback } from 'react';
+import FocusTrap from 'focus-trap-react';
+import { Grid, SearchBar, SearchContext, SearchContextManager } from '@giphy/react-components';
+import { IGif } from '@giphy/js-types';
+import { Box } from 'folds';
+import { useSetting } from '../state/hooks/settings';
+import { settingsAtom } from '../state/settings';
+
+const PICKER_WIDTH = 312;
+
+
+type GifPickerInnerProps = {
+  onSelect: (url: string, width: number, height: number) => void;
+  requestClose: () => void;
+  lotusTerminal: boolean;
+};
+
+function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInnerProps) {
+  const { fetchGifs, searchKey } = React.useContext(SearchContext);
+
+  const handleClick = useCallback(
+    (gif: IGif, e: React.SyntheticEvent) => {
+      e.preventDefault();
+      const r = gif.images.downsized ?? gif.images.original;
+      const url = r.url;
+      const width = Number(r.width) || 200;
+      const height = Number(r.height) || 200;
+      onSelect(url, width, height);
+      requestClose();
+    },
+    [onSelect, requestClose]
+  );
+
+  return (
+    <Box direction="Column" style={{ width: `${PICKER_WIDTH}px` }}>
+      {lotusTerminal && (
+        <div style={{
+          padding: '5px 10px 4px',
+          borderBottom: '1px solid rgba(255,107,0,0.2)',
+          fontFamily: "'JetBrains Mono', 'Cascadia Code', monospace",
+          fontSize: '10px',
+          fontWeight: 700,
+          letterSpacing: '0.1em',
+          color: '#FF6B00',
+          userSelect: 'none',
+        }}>
+          // GIF_SEARCH
+        </div>
+      )}
+      <Box style={{ padding: '8px 8px 4px' }}>
+        <SearchBar style={{ width: '100%', borderRadius: lotusTerminal ? '4px' : '8px' }} />
+      </Box>
+      <div style={{ overflowY: 'auto', overflowX: 'hidden', maxHeight: '340px', padding: '0 8px 8px' }}>
+        <Grid
+          key={searchKey}
+          fetchGifs={fetchGifs}
+          width={PICKER_WIDTH - 16}
+          columns={2}
+          gutter={4}
+          onGifClick={handleClick}
+          hideAttribution={false}
+          noLink
+        />
+      </div>
+    </Box>
+  );
+}
+
+type GifPickerProps = {
+  apiKey: string;
+  onSelect: (url: string, width: number, height: number) => void;
+  requestClose: () => void;
+};
+
+export function GifPicker({ apiKey, onSelect, requestClose }: GifPickerProps) {
+  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
+
+  const containerStyle = lotusTerminal
+    ? {
+        background: '#060c14',
+        border: '1px solid rgba(255,107,0,0.35)',
+        borderRadius: '4px',
+        overflow: 'hidden',
+        boxShadow: '0 4px 24px rgba(255,107,0,0.10), 0 0 0 1px rgba(255,107,0,0.08)',
+        width: `${PICKER_WIDTH}px`,
+      }
+    : {
+        background: 'var(--bg-surface)',
+        border: '1px solid rgba(255,255,255,0.08)',
+        borderRadius: '12px',
+        overflow: 'hidden',
+        boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
+        width: `${PICKER_WIDTH}px`,
+      };
+
+  return (
+    <FocusTrap
+      focusTrapOptions={{
+        initialFocus: false,
+        onDeactivate: requestClose,
+        clickOutsideDeactivates: true,
+        allowOutsideClick: true,
+      }}
+    >
+      <Box
+        direction="Column"
+        data-gif-terminal={lotusTerminal ? '' : undefined}
+        style={containerStyle}
+      >
+        <SearchContextManager apiKey={apiKey} initialTerm="">
+          <GifPickerInner onSelect={onSelect} requestClose={requestClose} lotusTerminal={!!lotusTerminal} />
+        </SearchContextManager>
+      </Box>
+    </FocusTrap>
+  );
+}
@@ -43,7 +43,7 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
          size="500"
        >
          <Box grow="Yes">
-            <Text size="H4">Logout</Text>
+            <Text as="h2" size="H4">Logout</Text>
          </Box>
        </Header>
        <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
@@ -12,7 +12,7 @@ export function MediaConfigLoader({ children }: MediaConfigLoaderProps) {
  const [state, load] = useAsyncCallback(useCallback(() => mx.getMediaConfig(), [mx]));

  useEffect(() => {
-    load();
+    load().catch(() => {});
  }, [load]);

  return children(state.status === AsyncStatus.Success ? state.data : undefined);
@@ -108,7 +108,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
      <Box className={classNames(css.PdfViewer, className)} direction="Column" {...props} ref={ref}>
        <Header className={css.PdfViewerHeader} size="400">
          <Box grow="Yes" alignItems="Center" gap="200">
-            <IconButton size="300" radii="300" onClick={requestClose}>
+            <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
              <Icon size="50" src={Icons.ArrowLeft} />
            </IconButton>
            <Text size="T300" truncate>
@@ -80,6 +80,7 @@ export function SecretStorageRecoveryPassphrase({
          <Text size="L400">Recovery Passphrase</Text>
          <PasswordInput
            name="recoveryPassphraseInput"
+            aria-label="Recovery passphrase"
            size="400"
            variant="Secondary"
            radii="300"
@@ -170,6 +171,7 @@ export function SecretStorageRecoveryKey({
          <Text size="L400">Recovery Key</Text>
          <PasswordInput
            name="recoveryKeyInput"
+            aria-label="Recovery key"
            size="400"
            variant="Secondary"
            radii="300"
@@ -22,7 +22,7 @@ export function SpecVersionsLoader({
  const ignoreCallback = useCallback(() => setIgnoreError(true), []);

  useEffect(() => {
-    load();
+    load().catch(() => {});
  }, [load]);

  if (state.status === AsyncStatus.Idle || state.status === AsyncStatus.Loading) {
@@ -55,6 +55,7 @@ export function UIAFlowOverlay({
                <IconButton
                  ref={anchorRef}
                  variant="Critical"
+                  aria-label="Cancel authentication"
                  size="300"
                  onClick={onCancel}
                  radii="Pill"
@@ -23,7 +23,7 @@ export function EditorPreview() {

  return (
    <>
-      <IconButton variant="SurfaceVariant" onClick={() => setOpen(!open)}>
+      <IconButton variant="SurfaceVariant" aria-label="Open editor preview" onClick={() => setOpen(!open)}>
        <Icon src={Icons.BlockQuote} />
      </IconButton>
      <Overlay open={open} backdrop={<OverlayBackdrop />}>
@@ -42,7 +42,7 @@ export function EditorPreview() {
                  editor={editor}
                  placeholder="Send a message..."
                  before={
-                    <IconButton variant="SurfaceVariant" size="300" radii="300">
+                    <IconButton variant="SurfaceVariant" size="300" radii="300" aria-label="Attach">
                      <Icon src={Icons.PlusCircle} />
                    </IconButton>
                  }
@@ -53,14 +53,15 @@ export function EditorPreview() {
                        size="300"
                        radii="300"
                        onClick={() => setToolbar(!toolbar)}
+                        aria-label={toolbar ? 'Hide formatting toolbar' : 'Show formatting toolbar'}
                        aria-pressed={toolbar}
                      >
                        <Icon src={toolbar ? Icons.AlphabetUnderline : Icons.Alphabet} />
                      </IconButton>
-                      <IconButton variant="SurfaceVariant" size="300" radii="300">
+                      <IconButton variant="SurfaceVariant" size="300" radii="300" aria-label="Insert emoji">
                        <Icon src={Icons.Smile} />
                      </IconButton>
-                      <IconButton variant="SurfaceVariant" size="300" radii="300">
+                      <IconButton variant="SurfaceVariant" size="300" radii="300" aria-label="Send">
                        <Icon src={Icons.Send} />
                      </IconButton>
                    </>
@@ -140,6 +140,8 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
                data-editable-name={editableName}
                className={css.EditorTextarea}
                placeholder={placeholder}
+                aria-label={placeholder ?? 'Message input'}
+                aria-multiline="true"
                renderPlaceholder={renderPlaceholder}
                renderElement={renderElement}
                renderLeaf={renderLeaf}
@@ -54,8 +54,8 @@ function BtnTooltip({ text, shortCode }: { text: string; shortCode?: string }) {
  );
 }

-type MarkButtonProps = { format: MarkType; icon: IconSrc; tooltip: ReactNode };
-export function MarkButton({ format, icon, tooltip }: MarkButtonProps) {
+type MarkButtonProps = { format: MarkType; icon: IconSrc; tooltip: ReactNode; label?: string };
+export function MarkButton({ format, icon, tooltip, label }: MarkButtonProps) {
  const editor = useSlate();
  const disableInline = isBlockActive(editor, BlockType.CodeBlock);

@@ -76,6 +76,7 @@ export function MarkButton({ format, icon, tooltip }: MarkButtonProps) {
          variant="SurfaceVariant"
          onClick={handleClick}
          aria-pressed={isMarkActive(editor, format)}
+          aria-label={label}
          size="400"
          radii="300"
          disabled={disableInline}
@@ -91,8 +92,9 @@ type BlockButtonProps = {
  format: BlockType;
  icon: IconSrc;
  tooltip: ReactNode;
+  label?: string;
 };
-export function BlockButton({ format, icon, tooltip }: BlockButtonProps) {
+export function BlockButton({ format, icon, tooltip, label }: BlockButtonProps) {
  const editor = useSlate();

  const handleClick = () => {
@@ -108,6 +110,7 @@ export function BlockButton({ format, icon, tooltip }: BlockButtonProps) {
          variant="SurfaceVariant"
          onClick={handleClick}
          aria-pressed={isBlockActive(editor, format)}
+          aria-label={label}
          size="400"
          radii="300"
        >
@@ -165,6 +168,7 @@ export function HeadingBlockButton() {
                  <IconButton
                    ref={triggerRef}
                    onClick={() => handleMenuSelect(1)}
+                    aria-label="Heading 1"
                    size="400"
                    radii="300"
                  >
@@ -180,6 +184,7 @@ export function HeadingBlockButton() {
                  <IconButton
                    ref={triggerRef}
                    onClick={() => handleMenuSelect(2)}
+                    aria-label="Heading 2"
                    size="400"
                    radii="300"
                  >
@@ -195,6 +200,7 @@ export function HeadingBlockButton() {
                  <IconButton
                    ref={triggerRef}
                    onClick={() => handleMenuSelect(3)}
+                    aria-label="Heading 3"
                    size="400"
                    radii="300"
                  >
@@ -211,7 +217,9 @@ export function HeadingBlockButton() {
        style={{ width: 'unset' }}
        variant="SurfaceVariant"
        onClick={handleMenuOpen}
-        aria-pressed={isActive}
+        aria-label={level ? `Heading ${level}` : 'Heading'}
+        aria-expanded={isActive}
+        aria-haspopup="menu"
        size="400"
        radii="300"
      >
@@ -271,32 +279,44 @@ export function Toolbar() {
              <MarkButton
                format={MarkType.Bold}
                icon={Icons.Bold}
-                tooltip={<BtnTooltip text="Bold" shortCode={`${modKey} + B`} />}
+                tooltip={<BtnTooltip text="Bold" shortCode={`${modKey} + B`}
+                label="Bold"
+              />}
              />
              <MarkButton
                format={MarkType.Italic}
                icon={Icons.Italic}
-                tooltip={<BtnTooltip text="Italic" shortCode={`${modKey} + I`} />}
+                tooltip={<BtnTooltip text="Italic" shortCode={`${modKey} + I`}
+                label="Italic"
+              />}
              />
              <MarkButton
                format={MarkType.Underline}
                icon={Icons.Underline}
-                tooltip={<BtnTooltip text="Underline" shortCode={`${modKey} + U`} />}
+                tooltip={<BtnTooltip text="Underline" shortCode={`${modKey} + U`}
+                label="Underline"
+              />}
              />
              <MarkButton
                format={MarkType.StrikeThrough}
                icon={Icons.Strike}
-                tooltip={<BtnTooltip text="Strike Through" shortCode={`${modKey} + S`} />}
+                tooltip={<BtnTooltip text="Strike Through" shortCode={`${modKey} + S`}
+                label="Strikethrough"
+              />}
              />
              <MarkButton
                format={MarkType.Code}
                icon={Icons.Code}
-                tooltip={<BtnTooltip text="Inline Code" shortCode={`${modKey} + [`} />}
+                tooltip={<BtnTooltip text="Inline Code" shortCode={`${modKey} + [`}
+                label="Inline code"
+              />}
              />
              <MarkButton
                format={MarkType.Spoiler}
                icon={Icons.EyeBlind}
-                tooltip={<BtnTooltip text="Spoiler" shortCode={`${modKey} + H`} />}
+                tooltip={<BtnTooltip text="Spoiler" shortCode={`${modKey} + H`}
+                label="Spoiler"
+              />}
              />
            </Box>
            <Line variant="SurfaceVariant" direction="Vertical" style={{ height: toRem(12) }} />
@@ -305,22 +325,30 @@ export function Toolbar() {
            <BlockButton
              format={BlockType.BlockQuote}
              icon={Icons.BlockQuote}
-              tooltip={<BtnTooltip text="Block Quote" shortCode={`${modKey} + '`} />}
+              tooltip={<BtnTooltip text="Block Quote" shortCode={`${modKey} + '`}
+              label="Block quote"
+            />}
            />
            <BlockButton
              format={BlockType.CodeBlock}
              icon={Icons.BlockCode}
-              tooltip={<BtnTooltip text="Block Code" shortCode={`${modKey} + ;`} />}
+              tooltip={<BtnTooltip text="Block Code" shortCode={`${modKey} + ;`}
+              label="Code block"
+            />}
            />
            <BlockButton
              format={BlockType.OrderedList}
              icon={Icons.OrderList}
-              tooltip={<BtnTooltip text="Ordered List" shortCode={`${modKey} + 7`} />}
+              tooltip={<BtnTooltip text="Ordered List" shortCode={`${modKey} + 7`}
+              label="Ordered list"
+            />}
            />
            <BlockButton
              format={BlockType.UnorderedList}
              icon={Icons.UnorderList}
-              tooltip={<BtnTooltip text="Unordered List" shortCode={`${modKey} + 8`} />}
+              tooltip={<BtnTooltip text="Unordered List" shortCode={`${modKey} + 8`}
+              label="Unordered list"
+            />}
            />
            <HeadingBlockButton />
          </Box>
@@ -347,6 +375,7 @@ export function Toolbar() {
                  ref={triggerRef}
                  variant="SurfaceVariant"
                  onClick={() => setIsMarkdown(!isMarkdown)}
+                  aria-label={isMarkdown ? 'Disable Markdown' : 'Enable Markdown'}
                  aria-pressed={isMarkdown}
                  size="300"
                  radii="300"
@@ -255,10 +255,67 @@ const parseCodeBlockNode = (node: Element): CodeBlockElement[] | ParagraphElemen
    },
  ];
 };
-const parseListNode = (
+
+const parseListMarkdown = (
  node: Element,
-  processText: ProcessTextCallback
-): OrderedListElement[] | UnorderedListElement[] | ParagraphElement[] => {
+  processText: ProcessTextCallback,
+  depth = 0
+): ParagraphElement[] => {
+  const md = isTag(node) && node.name === 'ul' ? '*' : '-';
+  const prefix = node.attribs['data-md'] ?? md;
+  const [starOrHyphen] = prefix.match(/^\*|-$/) ?? [];
+  const [digitOrChar] = prefix.match(/^[\da-zA-Z]/) ?? [];
+
+  const digit = digitOrChar ? parseInt(digitOrChar, 10) : undefined;
+
+  const lines: ParagraphElement[] = [];
+  let lineNo = digit === undefined || Number.isNaN(digit) ? digitOrChar ?? 1 : digit;
+  const pushLine = (line: InlineElement[]) => {
+    lines.push({
+      type: BlockType.Paragraph,
+      children: [
+        {
+          text: `${Array(depth + 1).join(' ')}${starOrHyphen ? `${starOrHyphen} ` : `${lineNo}. `}`,
+        },
+        ...line,
+      ],
+    });
+    if (typeof lineNo === 'string') {
+      lineNo = String.fromCharCode(lineNo.charCodeAt(0) + 1);
+    } else {
+      lineNo += 1;
+    }
+  };
+
+  node.children.forEach((child) => {
+    if (isText(child)) {
+      pushLine([{ text: processText(child.data) }]);
+      return;
+    }
+
+    if (isTag(child)) {
+      if (child.name === 'ul' || child.name === 'ol') {
+        lines.push(...parseListMarkdown(child, processText, depth + 1));
+        return;
+      }
+      if (child.name === 'li') {
+        child.children.forEach((c) => {
+          if (isTag(c) && (c.name === 'ul' || c.name === 'ol')) {
+            lines.push(...parseListMarkdown(c, processText, depth + 1));
+            return;
+          }
+          pushLine(getInlineElement(c, processText));
+        });
+        return;
+      }
+    }
+
+    pushLine(getInlineElement(child, processText));
+  });
+
+  return lines;
+};
+const parseListLines = (children: ChildNode[], processText: ProcessTextCallback) => {
  const listLines: Array<InlineElement[]> = [];
  let lineHolder: InlineElement[] = [];

@@ -269,7 +326,7 @@ const parseListNode = (
    lineHolder = [];
  };

-  node.children.forEach((child) => {
+  children.forEach((child) => {
    if (isText(child)) {
      lineHolder.push({ text: processText(child.data) });
      return;
@@ -292,24 +349,23 @@ const parseListNode = (
  });
  appendLine();

-  const mdSequence = node.attribs['data-md'];
-  if (mdSequence !== undefined) {
-    const prefix = mdSequence || '-';
-    const [starOrHyphen] = prefix.match(/^\*|-$/) ?? [];
-    return listLines.map((lineChildren) => ({
-      type: BlockType.Paragraph,
-      children: [
-        { text: `${starOrHyphen ? `${starOrHyphen} ` : `${prefix}. `} ` },
-        ...lineChildren,
-      ],
-    }));
+  return listLines;
+};
+const parseListNode = (
+  node: Element,
+  processText: ProcessTextCallback
+): OrderedListElement[] | UnorderedListElement[] | ParagraphElement[] => {
+  if (node.attribs['data-md'] !== undefined) {
+    return parseListMarkdown(node, processText);
  }

+  const lines = parseListLines(node.childNodes, processText);
+
  if (node.name === 'ol') {
    return [
      {
        type: BlockType.OrderedList,
-        children: listLines.map((lineChildren) => ({
+        children: lines.map((lineChildren) => ({
          type: BlockType.ListItem,
          children: lineChildren,
        })),
@@ -320,7 +376,7 @@ const parseListNode = (
  return [
    {
      type: BlockType.UnorderedList,
-      children: listLines.map((lineChildren) => ({
+      children: lines.map((lineChildren) => ({
        type: BlockType.ListItem,
        children: lineChildren,
      })),
@@ -52,6 +52,8 @@ import {
 } from './components';
 import { EmojiBoardTab, EmojiType } from './types';
 import { VirtualTile } from '../virtualizer';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';

 const RECENT_GROUP_ID = 'recent_group';
 const SEARCH_GROUP_ID = 'search_group';
@@ -503,6 +505,7 @@ export function EmojiBoard({
      }}
    >
      <EmojiBoardLayout
+        data-emoji-board=""
        header={
          <Box direction="Column" gap="200">
            {onTabChange && <EmojiBoardTabs tab={tab} onTabChange={onTabChange} />}
@@ -61,7 +61,7 @@ function SidebarBtn<T extends string>({
      delay={500}
      position="Left"
      tooltip={
-        <Tooltip id={`SidebarStackItem-${id}-label`}>
+        <Tooltip>
          <Text size="T300">{label}</Text>
        </Tooltip>
      }
@@ -69,7 +69,7 @@ function SidebarBtn<T extends string>({
      {(ref) => (
        <IconButton
          aria-pressed={active}
-          aria-labelledby={`SidebarStackItem-${id}-label`}
+          aria-label={label}
          ref={ref}
          onClick={() => onClick(id)}
          size="400"
@@ -16,7 +16,7 @@ import {
 import { Room } from 'matrix-js-sdk';
 import { useRoomEventReaders } from '../../hooks/useRoomEventReaders';
 import { getMemberDisplayName } from '../../utils/room';
-import { getMxIdLocalPart } from '../../utils/matrix';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
 import * as css from './EventReaders.css';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { UserAvatar } from '../user-avatar';
@@ -24,6 +24,19 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { useSpaceOptionally } from '../../hooks/useSpace';
 import { getMouseEventCords } from '../../utils/dom';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
+import { today, yesterday, timeHourMinute, timeMon, timeDay, timeYear } from '../../utils/time';
+
+function formatReadTs(ts: number, hour24Clock: boolean): string {
+  const timeStr = timeHourMinute(ts, hour24Clock);
+  if (today(ts)) return `Today at ${timeStr}`;
+  if (yesterday(ts)) return `Yesterday at ${timeStr}`;
+  const sameYear = timeYear(ts) === timeYear(Date.now());
+  return sameYear
+    ? `${timeMon(ts)} ${timeDay(ts)} at ${timeStr}`
+    : `${timeMon(ts)} ${timeDay(ts)} ${timeYear(ts)} at ${timeStr}`;
+}

 export type EventReadersProps = {
  room: Room;
@@ -34,9 +47,12 @@ export const EventReaders = as<'div', EventReadersProps>(
  ({ className, room, eventId, requestClose, ...props }, ref) => {
    const mx = useMatrixClient();
    const useAuthentication = useMediaAuthentication();
-    const latestEventReaders = useRoomEventReaders(room, eventId);
+    const myUserId = mx.getUserId();
+    const latestEventReaders = useRoomEventReaders(room, eventId).filter((id) => id !== myUserId);
    const openProfile = useOpenUserRoomProfile();
    const space = useSpaceOptionally();
+    const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+    const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');

    const getName = (userId: string) =>
      getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
@@ -48,11 +64,16 @@ export const EventReaders = as<'div', EventReadersProps>(
        {...props}
        ref={ref}
      >
-        <Header className={css.Header} variant="Surface" size="600">
+        <Header
+          className={css.Header}
+          variant="Surface"
+          size="600"
+          style={lotusTerminal ? { borderBottom: '1px solid rgba(0,212,255,0.30)', boxShadow: '0 2px 12px rgba(0,212,255,0.08)' } : undefined}
+        >
          <Box grow="Yes">
-            <Text size="H3">Seen by</Text>
+            <Text size="H3" style={lotusTerminal ? { color: '#00D4FF', textShadow: '0 0 6px rgba(0,212,255,0.45)', letterSpacing: '0.05em' } : undefined}>Seen by</Text>
          </Box>
-          <IconButton size="300" onClick={requestClose}>
+          <IconButton size="300" onClick={requestClose} aria-label="Close">
            <Icon src={Icons.Cross} />
          </IconButton>
        </Header>
@@ -63,16 +84,9 @@ export const EventReaders = as<'div', EventReadersProps>(
                const name = getName(readerId);
                const avatarMxcUrl = room.getMember(readerId)?.getMxcAvatarUrl();
                const avatarUrl = avatarMxcUrl
-                  ? mx.mxcUrlToHttp(
-                      avatarMxcUrl,
-                      100,
-                      100,
-                      'crop',
-                      undefined,
-                      false,
-                      useAuthentication
-                    )
+                  ? mxcUrlToHttp(mx, avatarMxcUrl, useAuthentication, 100, 100, 'crop') ?? undefined
                  : undefined;
+                const receiptTs = room.getReadReceiptForUserId(readerId)?.data.ts;

                return (
                  <MenuItem
@@ -92,16 +106,28 @@ export const EventReaders = as<'div', EventReadersProps>(
                      <Avatar size="200">
                        <UserAvatar
                          userId={readerId}
-                          src={avatarUrl ?? undefined}
+                          src={avatarUrl}
                          alt={name}
                          renderFallback={() => <Icon size="50" src={Icons.User} filled />}
                        />
                      </Avatar>
                    }
                  >
+                    <Box direction="Column" grow="Yes">
                      <Text size="T400" truncate>
                        {name}
                      </Text>
+                      {receiptTs !== undefined && (
+                        <Text
+                          size="T200"
+                          style={lotusTerminal
+                            ? { color: '#FFB300', textShadow: '0 0 6px #FFB300, 0 0 14px rgba(255,179,0,0.40)', fontSize: '0.72rem' }
+                            : { opacity: 0.6 }}
+                        >
+                          {formatReadTs(receiptTs, hour24Clock)}
+                        </Text>
+                      )}
+                    </Box>
                  </MenuItem>
                );
              })}
@@ -24,7 +24,7 @@ export const ImageEditor = as<'div', ImageEditorProps>(
      >
        <Header className={css.ImageEditorHeader} size="400">
          <Box grow="Yes" alignItems="Center" gap="200">
-            <IconButton size="300" radii="300" onClick={requestClose}>
+            <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
              <Icon size="50" src={Icons.ArrowLeft} />
            </IconButton>
            <Text size="T300" truncate>
@@ -29,7 +29,7 @@ export function ImagePackView({ address, requestClose }: ImagePackViewProps) {
            </Chip>
          </Box>
          <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
              <Icon src={Icons.Cross} />
            </IconButton>
          </Box>
@@ -33,7 +33,7 @@ export const ImageViewer = as<'div', ImageViewerProps>(
      >
        <Header className={css.ImageViewerHeader} size="400">
          <Box grow="Yes" alignItems="Center" gap="200">
-            <IconButton size="300" radii="300" onClick={requestClose}>
+            <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
              <Icon size="50" src={Icons.ArrowLeft} />
            </IconButton>
            <Text size="T300" truncate>
@@ -173,7 +173,7 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
                  </Text>
                </Box>
                <Box shrink="No">
-                  <IconButton size="300" radii="300" onClick={requestClose}>
+                  <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
                    <Icon src={Icons.Cross} />
                  </IconButton>
                </Box>
@@ -80,9 +80,9 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
              size="500"
            >
              <Box grow="Yes">
-                <Text size="H4">Join with Address</Text>
+                <Text as="h2" size="H4">Join with Address</Text>
              </Box>
-              <IconButton size="300" onClick={onCancel} radii="300">
+              <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
                <Icon src={Icons.Cross} />
              </IconButton>
            </Header>
@@ -56,7 +56,7 @@ export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptPro
            escapeDeactivates: stopPropagation,
          }}
        >
-          <Dialog variant="Surface">
+          <Dialog variant="Surface" aria-labelledby="leave-room-dialog-title">
            <Header
              style={{
                padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -66,9 +66,9 @@ export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptPro
              size="500"
            >
              <Box grow="Yes">
-                <Text size="H4">Leave Room</Text>
+                <Text as="h2" size="H4" id="leave-room-dialog-title">Leave Room</Text>
              </Box>
-              <IconButton size="300" onClick={onCancel} radii="300">
+              <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
                <Icon src={Icons.Cross} />
              </IconButton>
            </Header>
@@ -66,9 +66,9 @@ export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptP
              size="500"
            >
              <Box grow="Yes">
-                <Text size="H4">Leave Space</Text>
+                <Text as="h2" size="H4">Leave Space</Text>
              </Box>
-              <IconButton size="300" onClick={onCancel} radii="300">
+              <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
                <Icon src={Icons.Cross} />
              </IconButton>
            </Header>
@@ -48,6 +48,7 @@ export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDow
      variant={hasError ? 'Critical' : 'SurfaceVariant'}
      size="300"
      radii="300"
+      aria-label={downloading ? 'Downloading...' : hasError ? 'Download failed, click to retry' : 'Download file'}
    >
      {downloading ? (
        <Spinner size="100" variant={hasError ? 'Critical' : 'Secondary'} />
@@ -391,9 +391,30 @@ export function MLocation({ content }: MLocationProps) {
  const location = parseGeoUri(geoUri);
  if (!location) return <BrokenContent />;

+  const lat = parseFloat(location.latitude);
+  const lon = parseFloat(location.longitude);
+  if (!isFinite(lat) || !isFinite(lon)) return <BrokenContent />;
+  const mapSrc = `https://www.openstreetmap.org/export/embed.html?bbox=${lon - 0.007},${lat - 0.004},${lon + 0.007},${lat + 0.004}&layer=mapnik&marker=${lat},${lon}`;
+
  return (
-    <Box direction="Column" alignItems="Start" gap="100">
-      <Text size="T400">{geoUri}</Text>
+    <Box direction="Column" alignItems="Start" gap="200">
+      <iframe
+        title="Location"
+        src={mapSrc}
+        style={{
+          width: '280px',
+          height: '160px',
+          border: '1px solid var(--bg-surface-border)',
+          borderRadius: '8px',
+          display: 'block',
+        }}
+        scrolling="no"
+        loading="lazy"
+        sandbox="allow-scripts"
+      />
+      <Text size="T300" style={{ opacity: 0.65 }}>
+        {`${lat.toFixed(5)}, ${lon.toFixed(5)}`}
+      </Text>
      <Chip
        as="a"
        size="400"
@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/media-has-caption */
-import React, { ReactNode, useCallback, useRef, useState } from 'react';
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { Badge, Chip, Icon, IconButton, Icons, ProgressBar, Spinner, Text, toRem } from 'folds';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import { Range } from 'react-range';
@@ -65,6 +65,19 @@ export function AudioContent({

  const audioRef = useRef<HTMLAudioElement | null>(null);

+  useEffect(
+    () => () => {
+      if (
+        srcState.status === AsyncStatus.Success &&
+        typeof srcState.data === 'string' &&
+        srcState.data.startsWith('blob:')
+      ) {
+        URL.revokeObjectURL(srcState.data);
+      }
+    },
+    [srcState]
+  );
+
  const [currentTime, setCurrentTime] = useState(0);
  // duration in seconds. (NOTE: info.duration is in milliseconds)
  const infoDuration = info.duration ?? 0;
@@ -160,6 +173,7 @@ export function AudioContent({
          size="300"
          radii="Pill"
          onClick={() => setMute(!mute)}
+          aria-label={mute ? 'Unmute' : 'Mute'}
          aria-pressed={mute}
        >
          <Icon src={mute ? Icons.VolumeMute : Icons.VolumeHigh} size="50" />
@@ -8,11 +8,7 @@ export const MessageDeletedContent = as<'div', { children?: never; reason?: stri
  ({ reason, ...props }, ref) => (
    <Box as="span" alignItems="Center" gap="100" style={warningStyle} {...props} ref={ref}>
      <Icon size="50" src={Icons.Delete} />
-      {reason ? (
-        <i>This message has been deleted. {reason}</i>
-      ) : (
-        <i>This message has been deleted</i>
-      )}
+      <i>{reason ? `This message has been deleted — ${reason}` : 'This message has been deleted'}</i>
    </Box>
  )
 );
@@ -0,0 +1,319 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Box, Text } from 'folds';
+import { RelationsEvent } from 'matrix-js-sdk/lib/models/relations';
+import { RoomEvent } from 'matrix-js-sdk';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+
+type PollTextValue = Array<{ body: string }> | string;
+
+function extractText(val: PollTextValue | undefined): string {
+  if (!val) return '';
+  if (typeof val === 'string') return val;
+  return val[0]?.body ?? '';
+}
+
+type PollAnswer = {
+  'm.id'?: string;
+  id?: string;
+  'm.text'?: PollTextValue;
+  'org.matrix.msc3381.poll.answer'?: { body: string };
+};
+
+type PollData = {
+  question?: { body?: string; 'm.text'?: PollTextValue };
+  answers?: PollAnswer[];
+};
+
+type VoteState = {
+  counts: Map<string, number>;
+  myVote: string | null;
+  total: number;
+};
+
+function computeVotes(
+  mx: ReturnType<typeof useMatrixClient>,
+  roomId: string,
+  eventId: string,
+  isStable: boolean
+): VoteState {
+  const empty: VoteState = { counts: new Map(), myVote: null, total: 0 };
+  const room = mx.getRoom(roomId);
+  if (!room) return empty;
+
+  const timelineSet = room.getUnfilteredTimelineSet();
+  const stableRels = timelineSet.relations.getChildEventsForEvent(
+    eventId,
+    'm.reference',
+    'm.poll.response'
+  );
+  const unstableRels = timelineSet.relations.getChildEventsForEvent(
+    eventId,
+    'org.matrix.msc3381.poll.response' as any,
+    'org.matrix.msc3381.poll.response'
+  );
+
+  // Collect all response events; per-sender keep only latest
+  const latestBySender = new Map<string, { ts: number; answerId: string }>();
+  const myUserId = mx.getSafeUserId();
+
+  const processRelations = (rels: typeof stableRels, stable: boolean) => {
+    const events = rels?.getRelations() ?? [];
+    for (const ev of events) {
+      if (ev.isRedacted()) continue;
+      const sender = ev.getSender();
+      if (!sender) continue;
+      const content = ev.getContent();
+      let answerId: string | undefined;
+      if (stable) {
+        answerId = (content['m.selections'] as string[] | undefined)?.[0];
+      } else {
+        answerId = (
+          (content['org.matrix.msc3381.poll.response'] as any)?.answers as string[] | undefined
+        )?.[0];
+      }
+      if (!answerId) continue;
+      const ts = ev.getTs();
+      const existing = latestBySender.get(sender);
+      if (!existing || ts > existing.ts) {
+        latestBySender.set(sender, { ts, answerId });
+      }
+    }
+  };
+
+  processRelations(stableRels, true);
+  processRelations(unstableRels, false);
+
+  const counts = new Map<string, number>();
+  let myVote: string | null = null;
+  for (const [sender, { answerId }] of latestBySender) {
+    counts.set(answerId, (counts.get(answerId) ?? 0) + 1);
+    if (sender === myUserId) myVote = answerId;
+  }
+
+  return { counts, myVote, total: latestBySender.size };
+}
+
+export function PollContent({
+  content,
+  roomId,
+  eventId,
+}: {
+  content: Record<string, unknown>;
+  roomId?: string;
+  eventId?: string;
+}) {
+  const mx = useMatrixClient();
+  const isStable = !!content['m.poll'];
+
+  const poll = (
+    content['m.poll'] ?? content['org.matrix.msc3381.poll.start']
+  ) as PollData | undefined;
+
+  const [votes, setVotes] = useState<VoteState>(() => {
+    if (!roomId || !eventId) return { counts: new Map(), myVote: null, total: 0 };
+    return computeVotes(mx, roomId, eventId, isStable);
+  });
+
+  // Refresh votes whenever Relations events fire
+  const refresh = useCallback(() => {
+    if (!roomId || !eventId) return;
+    setVotes(computeVotes(mx, roomId, eventId, isStable));
+  }, [mx, roomId, eventId, isStable]);
+
+  useEffect(() => {
+    if (!roomId || !eventId) return;
+    const room = mx.getRoom(roomId);
+    if (!room) return;
+    const timelineSet = room.getUnfilteredTimelineSet();
+
+    const stableRels = timelineSet.relations.getChildEventsForEvent(
+      eventId,
+      'm.reference',
+      'm.poll.response'
+    );
+    const unstableRels = timelineSet.relations.getChildEventsForEvent(
+      eventId,
+      'org.matrix.msc3381.poll.response' as any,
+      'org.matrix.msc3381.poll.response'
+    );
+
+    stableRels?.on(RelationsEvent.Add, refresh);
+    stableRels?.on(RelationsEvent.Remove, refresh);
+    stableRels?.on(RelationsEvent.Redaction, refresh);
+    unstableRels?.on(RelationsEvent.Add, refresh);
+    unstableRels?.on(RelationsEvent.Remove, refresh);
+    unstableRels?.on(RelationsEvent.Redaction, refresh);
+    // Also listen at room level: if no votes exist yet, the Relations object is null
+    // and the listeners above are no-ops. The room timeline event catches the first vote.
+    const onTimeline = (ev: any) => {
+      const type = ev.getType?.();
+      const relatesTo = ev.getContent?.()?.['m.relates_to'];
+      if (
+        (type === 'm.poll.response' || type === 'org.matrix.msc3381.poll.response') &&
+        relatesTo?.event_id === eventId
+      ) {
+        refresh();
+      }
+    };
+    const room2 = mx.getRoom(roomId);
+    room2?.on(RoomEvent.Timeline, onTimeline);
+
+    return () => {
+      stableRels?.off(RelationsEvent.Add, refresh);
+      stableRels?.off(RelationsEvent.Remove, refresh);
+      stableRels?.off(RelationsEvent.Redaction, refresh);
+      unstableRels?.off(RelationsEvent.Add, refresh);
+      unstableRels?.off(RelationsEvent.Remove, refresh);
+      unstableRels?.off(RelationsEvent.Redaction, refresh);
+      room2?.off(RoomEvent.Timeline, onTimeline);
+    };
+  }, [mx, roomId, eventId, refresh]);
+
+  if (!poll) {
+    return (
+      <Text style={{ opacity: 0.6 }}>
+        <i>Poll (unreadable format)</i>
+      </Text>
+    );
+  }
+
+  const questionText =
+    extractText((poll.question as any)?.['m.text']) ||
+    (poll.question as any)?.body ||
+    'Untitled poll';
+
+  const canVote = !!roomId && !!eventId;
+  const { counts, myVote, total } = votes;
+
+  const handleVote = (answerId: string) => {
+    if (!roomId || !eventId) return;
+    // Optimistic local update
+    setVotes((prev) => {
+      const next = new Map(prev.counts);
+      if (prev.myVote) {
+        const prevCount = next.get(prev.myVote) ?? 1;
+        if (prevCount <= 1) next.delete(prev.myVote);
+        else next.set(prev.myVote, prevCount - 1);
+      }
+      next.set(answerId, (next.get(answerId) ?? 0) + 1);
+      return { counts: next, myVote: answerId, total: prev.myVote ? prev.total : prev.total + 1 };
+    });
+    if (isStable) {
+      mx.sendEvent(roomId, 'm.poll.response' as any, {
+        'm.relates_to': { rel_type: 'm.reference', event_id: eventId },
+        'm.selections': [answerId],
+      });
+    } else {
+      mx.sendEvent(roomId, 'org.matrix.msc3381.poll.response' as any, {
+        'm.relates_to': { rel_type: 'm.reference', event_id: eventId },
+        'org.matrix.msc3381.poll.response': { answers: [answerId] },
+      });
+    }
+  };
+
+  const answers = poll.answers ?? [];
+  const maxVotes = answers.reduce((m, a, i) => {
+    const id = a['m.id'] ?? a.id ?? String(i);
+    return Math.max(m, counts.get(id) ?? 0);
+  }, 0);
+
+  return (
+    <Box
+      direction="Column"
+      gap="200"
+      style={{ maxWidth: '340px', paddingTop: '2px', paddingBottom: '4px' }}
+    >
+      <Box
+        alignItems="Center"
+        gap="100"
+        style={{
+          fontSize: '0.68rem',
+          fontWeight: 700,
+          letterSpacing: '0.12em',
+          textTransform: 'uppercase',
+          opacity: 0.55,
+          marginBottom: '2px',
+        }}
+      >
+        ◉ Poll
+      </Box>
+      <Text size="T400" style={{ fontWeight: 600 }}>
+        {questionText}
+      </Text>
+      <Box direction="Column" gap="100" style={{ marginTop: '2px' }}>
+        {answers.map((answer, i) => {
+          const text =
+            extractText((answer as any)['m.text']) ||
+            (answer as any)['org.matrix.msc3381.poll.answer']?.body ||
+            `Option ${i + 1}`;
+          const id = answer['m.id'] ?? answer.id ?? String(i);
+          const selected = myVote === id;
+          const voteCount = counts.get(id) ?? 0;
+          const pct = total > 0 ? Math.round((voteCount / total) * 100) : 0;
+          return (
+            <button
+              key={id}
+              type="button"
+              onClick={canVote ? () => handleVote(id) : undefined}
+              style={{
+                padding: '7px 12px',
+                borderRadius: '8px',
+                background: selected ? 'var(--bg-surface-active)' : 'var(--bg-surface-low)',
+                border: `1px solid ${selected ? 'var(--text-primary)' : 'var(--bg-surface-border)'}`,
+                fontSize: '0.88rem',
+                lineHeight: 1.4,
+                textAlign: 'left',
+                cursor: canVote ? 'pointer' : 'default',
+                color: 'var(--text-primary)',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '4px',
+                width: '100%',
+                position: 'relative',
+                overflow: 'hidden',
+              }}
+            >
+              {/* vote progress bar */}
+              {total > 0 && (
+                <span
+                  aria-hidden
+                  style={{
+                    position: 'absolute',
+                    inset: 0,
+                    width: `${pct}%`,
+                    background: selected
+                      ? 'rgba(255,255,255,0.10)'
+                      : 'rgba(255,255,255,0.05)',
+                    borderRadius: '8px',
+                    pointerEvents: 'none',
+                  }}
+                />
+              )}
+              <span style={{ display: 'flex', alignItems: 'center', gap: '8px', position: 'relative' }}>
+                <span style={{ flexGrow: 1 }}>{text}</span>
+                {selected && (
+                  <span style={{ opacity: 0.8, fontSize: '1rem', flexShrink: 0 }}>✓</span>
+                )}
+                {total > 0 && (
+                  <span style={{ opacity: 0.6, fontSize: '0.78rem', flexShrink: 0 }}>
+                    {pct}%
+                  </span>
+                )}
+              </span>
+            </button>
+          );
+        })}
+      </Box>
+      <Text size="T200" style={{ opacity: 0.5, marginTop: '2px' }}>
+        <i>
+          {total > 0 ? `${total} vote${total === 1 ? '' : 's'} — ` : ''}
+          {canVote
+            ? myVote
+              ? 'click another to change'
+              : 'click an option to vote'
+            : 'voting not available'}
+        </i>
+      </Text>
+    </Box>
+  );
+}
@@ -5,3 +5,4 @@ export * from './AudioContent';
 export * from './FileContent';
 export * from './FallbackContent';
 export * from './EventContent';
+export * from './PollContent';
@@ -28,6 +28,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
                  variant={visible ? 'Warning' : variant}
                  size="300"
                  radii="300"
+                  aria-label={visible ? 'Hide password' : 'Show password'}
                >
                  <Icon
                    style={{ opacity: config.opacity.P300 }}
@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+import { Room } from 'matrix-js-sdk';
+import { Icon, Icons, Modal, Overlay, OverlayBackdrop, OverlayCenter, Text, color } from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { getMemberDisplayName } from '../../utils/room';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
+import { UserAvatar } from '../user-avatar';
+import { StackedAvatar } from '../stacked-avatar';
+import { EventReaders } from '../event-readers';
+import { stopPropagation } from '../../utils/keyboard';
+
+const MAX_DISPLAY = 5;
+
+export function ReadReceiptAvatars({
+  room,
+  eventId,
+  userIds,
+}: {
+  room: Room;
+  eventId: string;
+  userIds: string[];
+}) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const [open, setOpen] = useState(false);
+  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
+
+  if (userIds.length === 0) return null;
+
+  const displayed = userIds.slice(0, MAX_DISPLAY);
+  const extra = userIds.length - MAX_DISPLAY;
+  const tooltipNames =
+    userIds
+      .slice(0, 5)
+      .map((id) => getMemberDisplayName(room, id) ?? getMxIdLocalPart(id) ?? id)
+      .join(', ') + (extra > 0 ? ` +${extra} more` : '');
+
+  return (
+    <>
+      <Overlay open={open} backdrop={<OverlayBackdrop />}>
+        <OverlayCenter>
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: () => setOpen(false),
+              clickOutsideDeactivates: true,
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Modal variant="Surface" size="300">
+              <EventReaders room={room} eventId={eventId} requestClose={() => setOpen(false)} />
+            </Modal>
+          </FocusTrap>
+        </OverlayCenter>
+      </Overlay>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        title={tooltipNames}
+        aria-label={tooltipNames}
+        style={{
+          background: 'none',
+          border: 'none',
+          cursor: 'pointer',
+          padding: 0,
+          marginLeft: 'auto',
+          marginTop: '4px',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '4px',
+        }}
+      >
+        {/* Pill wrapper ensures visibility on any wallpaper/background */}
+        <span
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            backgroundColor: lotusTerminal ? 'rgba(0,212,255,0.07)' : color.SurfaceVariant.Container,
+            border: lotusTerminal ? '1px solid rgba(0,212,255,0.30)' : '1px solid transparent',
+            boxShadow: lotusTerminal ? '0 0 10px rgba(0,212,255,0.12)' : 'none',
+            borderRadius: '999px',
+            padding: '2px 6px 2px 2px',
+            gap: '0px',
+          }}
+        >
+          {displayed.map((userId) => {
+            const name =
+              getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
+            const avatarMxc = room.getMember(userId)?.getMxcAvatarUrl();
+            const avatarUrl = avatarMxc
+              ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 32, 32, 'crop') ?? undefined
+              : undefined;
+            return (
+              <StackedAvatar
+                key={userId}
+                title={name}
+                variant="SurfaceVariant"
+                size="200"
+                radii="Pill"
+              >
+                <UserAvatar
+                  userId={userId}
+                  src={avatarUrl}
+                  alt={name}
+                  renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+                />
+              </StackedAvatar>
+            );
+          })}
+          {extra > 0 && (
+            <Text
+              size="T100"
+              style={{ paddingLeft: '4px', color: color.SurfaceVariant.OnContainer }}
+            >
+              +{extra}
+            </Text>
+          )}
+        </span>
+      </button>
+    </>
+  );
+}
@@ -0,0 +1 @@
+export { ReadReceiptAvatars } from './ReadReceiptAvatars';
@@ -17,16 +17,17 @@ export const RoomTopicViewer = as<
    size="300"
    flexHeight
    className={classNames(css.ModalFlex, className)}
+    aria-labelledby="room-topic-title"
    {...props}
    ref={ref}
  >
    <Header className={css.ModalHeader} variant="Surface" size="500">
      <Box grow="Yes">
-        <Text size="H4" truncate>
+        <Text as="h2" size="H4" truncate id="room-topic-title">
          {name}
        </Text>
      </Box>
-      <IconButton size="300" onClick={requestClose} radii="300">
+      <IconButton size="300" onClick={requestClose} radii="300" aria-label="Close">
        <Icon src={Icons.Cross} />
      </IconButton>
    </Header>
@@ -21,7 +21,7 @@ export function SplashScreen({ children }: SplashScreenProps) {
        justifyContent="Center"
      >
        <Text size="H2" align="Center">
-          Cinny
+          Lotus Chat
        </Text>
      </Box>
    </Box>
@@ -53,7 +53,7 @@ export const TextViewer = as<'div', TextViewerProps>(
      >
        <Header className={css.TextViewerHeader} size="400">
          <Box grow="Yes" alignItems="Center" gap="200">
-            <IconButton size="300" radii="300" onClick={requestClose}>
+            <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
              <Icon size="50" src={Icons.ArrowLeft} />
            </IconButton>
            <Text size="T300" truncate>
@@ -18,7 +18,7 @@ function DummyErrorDialog({
    <Dialog>
      <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
        <Box direction="Column" gap="100">
-          <Text size="H4">{title}</Text>
+          <Text as="h2" size="H4">{title}</Text>
          <Text>{message}</Text>
        </Box>
        <Button variant="Critical" onClick={onRetry}>
@@ -37,12 +37,13 @@ function EmailErrorDialog({
        gap="400"
      >
        <Box direction="Column" gap="100">
-          <Text size="H4">{title}</Text>
+          <Text as="h2" size="H4">{title}</Text>
          <Text>{message}</Text>
-          <Text as="label" size="L400" style={{ paddingTop: config.space.S400 }}>
+          <Text as="label" htmlFor="retryEmailInput" size="L400" style={{ paddingTop: config.space.S400 }}>
            Email
          </Text>
          <Input
+            id="retryEmailInput"
            name="retryEmailInput"
            variant="Background"
            size="500"
@@ -140,7 +141,7 @@ export function EmailStageDialog({
      <Dialog>
        <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
          <Box direction="Column" gap="100">
-            <Text size="H4">Verification Request Sent</Text>
+            <Text as="h2" size="H4">Verification Request Sent</Text>
            <Text>{`Please check your email "${emailTokenState.data.email}" and validate before continuing further.`}</Text>

            {errorCode && (
@@ -43,9 +43,9 @@ export function PasswordStage({
        size="500"
      >
        <Box grow="Yes">
-          <Text size="H4">Account Password</Text>
+          <Text as="h2" size="H4">Account Password</Text>
        </Box>
-        <IconButton size="300" onClick={onCancel} radii="300">
+        <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
          <Icon src={Icons.Cross} />
        </IconButton>
      </Header>
@@ -35,13 +35,15 @@ function RegistrationTokenErrorDialog({
        gap="400"
      >
        <Box direction="Column" gap="100">
-          <Text size="H4">{title}</Text>
+          <Text as="h2" size="H4">{title}</Text>
          <Text>{message}</Text>
-          <Text as="label" size="L400" style={{ paddingTop: config.space.S400 }}>
+          <Text as="label" htmlFor="retryTokenInput" size="L400" style={{ paddingTop: config.space.S400 }}>
            Registration Token
          </Text>
          <Input
+            id="retryTokenInput"
            name="retryTokenInput"
+            aria-label="Registration token"
            variant="Background"
            size="500"
            outlined
@@ -54,9 +54,9 @@ export function SSOStage({
        size="500"
      >
        <Box grow="Yes">
-          <Text size="H4">SSO Login</Text>
+          <Text as="h2" size="H4">SSO Login</Text>
        </Box>
-        <IconButton size="300" onClick={onCancel} radii="300">
+        <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
          <Icon src={Icons.Cross} />
        </IconButton>
      </Header>
@@ -18,7 +18,7 @@ function TermsErrorDialog({
    <Dialog>
      <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
        <Box direction="Column" gap="100">
-          <Text size="H4">{title}</Text>
+          <Text as="h2" size="H4">{title}</Text>
          <Text>{message}</Text>
        </Box>
        <Button variant="Critical" onClick={onRetry}>
@@ -182,6 +182,27 @@ export function UploadCardRenderer({
              <PreviewVideo fileItem={fileItem} />
            </MediaPreview>
          )}
+          {(fileItem.originalFile.type.startsWith('image') ||
+            fileItem.originalFile.type.startsWith('video')) && (
+            <input
+              type="text"
+              placeholder="Add a caption… (optional)"
+              value={metadata.caption ?? ''}
+              onChange={(e) => setMetadata(fileItem, { ...metadata, caption: e.target.value })}
+              style={{
+                marginTop: '6px',
+                width: '100%',
+                background: 'var(--bg-surface-low)',
+                border: '1px solid var(--bg-surface-border)',
+                borderRadius: '6px',
+                padding: '5px 8px',
+                fontSize: '0.85rem',
+                color: 'var(--text-primary)',
+                outline: 'none',
+                boxSizing: 'border-box',
+              }}
+            />
+          )}
          {upload.status === UploadStatus.Idle && !fileSizeExceeded && (
            <UploadCardProgress sentBytes={0} totalBytes={file.size} />
          )}
@@ -4,7 +4,7 @@ import { Box, as } from 'folds';
 import * as css from './UrlPreview.css';

 export const UrlPreview = as<'div'>(({ className, ...props }, ref) => (
-  <Box shrink="No" className={classNames(css.UrlPreview, className)} {...props} ref={ref} />
+  <Box shrink="No" data-url-preview="" className={classNames(css.UrlPreview, className)} {...props} ref={ref} />
 ));

 export const UrlPreviewImg = as<'img'>(({ className, alt, ...props }, ref) => (
@@ -28,7 +28,7 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
    );

    useEffect(() => {
-      loadPreview();
+      loadPreview().catch(() => {});
    }, [loadPreview]);

    if (previewStatus.status === AsyncStatus.Error) return null;
@@ -182,6 +182,7 @@ export const UrlPreviewHolder = as<'div'>(({ children, ...props }, ref) => {
              <div className={css.UrlPreviewHolderGradient({ position: 'Left' })} />
              <IconButton
                className={css.UrlPreviewHolderBtn({ position: 'Left' })}
+                aria-label="Previous preview"
                variant="Secondary"
                radii="Pill"
                size="300"
@@ -200,6 +201,7 @@ export const UrlPreviewHolder = as<'div'>(({ children, ...props }, ref) => {
                <div className={css.UrlPreviewHolderGradient({ position: 'Right' })} />
                <IconButton
                  className={css.UrlPreviewHolderBtn({ position: 'Right' })}
+                  aria-label="Next preview"
                  variant="Primary"
                  radii="Pill"
                  size="300"
@@ -68,9 +68,9 @@ function SelfDemoteAlert({ power, onCancel, onChange }: SelfDemoteAlertProps) {
              size="500"
            >
              <Box grow="Yes">
-                <Text size="H4">Self Demotion</Text>
+                <Text as="h2" size="H4">Self Demotion</Text>
              </Box>
-              <IconButton size="300" onClick={onCancel} radii="300">
+              <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
                <Icon src={Icons.Cross} />
              </IconButton>
            </Header>
@@ -118,9 +118,9 @@ function SharedPowerAlert({ power, onCancel, onChange }: SharedPowerAlertProps)
              size="500"
            >
              <Box grow="Yes">
-                <Text size="H4">Shared Power</Text>
+                <Text as="h2" size="H4">Shared Power</Text>
              </Box>
-              <IconButton size="300" onClick={onCancel} radii="300">
+              <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
                <Icon src={Icons.Cross} />
              </IconButton>
            </Header>
@@ -28,7 +28,11 @@ import { copyToClipboard } from '../../utils/dom';
 import { getExploreServerPath } from '../../pages/pathUtils';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { factoryRoomIdByAtoZ } from '../../utils/sort';
-import { useMutualRooms, useMutualRoomsSupport } from '../../hooks/useMutualRooms';
+import {
+  useMutualRooms,
+  useMutualRoomsSupport,
+  useUnstableMutualRoomsSupport,
+} from '../../hooks/useMutualRooms';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useDirectRooms } from '../../pages/client/direct/useDirectRooms';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
@@ -233,6 +237,7 @@ type MutualRoomsData = {
 export function MutualRoomsChip({ userId }: { userId: string }) {
  const mx = useMatrixClient();
  const mutualRoomSupported = useMutualRoomsSupport();
+  const mutualRoomUnstable = useUnstableMutualRoomsSupport();
  const mutualRoomsState = useMutualRooms(userId);
  const { navigateRoom, navigateSpace } = useRoomNavigate();
  const closeUserRoomProfile = useCloseUserRoomProfile();
@@ -279,7 +284,7 @@ export function MutualRoomsChip({ userId }: { userId: string }) {

  if (
    userId === mx.getSafeUserId() ||
-    !mutualRoomSupported ||
+    (!mutualRoomSupported && !mutualRoomUnstable) ||
    mutualRoomsState.status === AsyncStatus.Error
  ) {
    return null;
@@ -198,10 +198,10 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
                }}
              >
                <Box grow="Yes">
-                  <Text size="H4">Add Existing</Text>
+                  <Text as="h2" size="H4">Add Existing</Text>
                </Box>
                <Box shrink="No">
-                  <IconButton size="300" radii="300" onClick={requestClose}>
+                  <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
                    <Icon src={Icons.Cross} />
                  </IconButton>
                </Box>
@@ -31,6 +31,8 @@ function MicrophoneButton({ enabled, onToggle, disabled }: MicrophoneButtonProps
          onClick={() => onToggle()}
          outlined
          disabled={disabled}
+          aria-label={enabled ? 'Turn off microphone' : 'Turn on microphone'}
+          aria-pressed={!enabled}
        >
          <Icon size="100" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
        </IconButton>
@@ -62,6 +64,7 @@ function SoundButton({ enabled, onToggle, disabled }: SoundButtonProps) {
          radii="300"
          size="300"
          onClick={() => onToggle()}
+          aria-label={enabled ? 'Undeafen' : 'Deafen'}
          outlined
          disabled={disabled}
        >
@@ -99,6 +102,7 @@ function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
          radii="300"
          size="300"
          onClick={() => onToggle()}
+          aria-label={enabled ? 'Stop Video' : 'Start Video'}
          outlined
          disabled={disabled}
        >
@@ -136,6 +140,7 @@ function ScreenShareButton({ enabled, onToggle, disabled }: ScreenShareButtonPro
          radii="300"
          size="300"
          onClick={onToggle}
+          aria-label={enabled ? 'Stop Screenshare' : 'Start Screenshare'}
          outlined
          disabled={disabled}
        >
@@ -157,7 +162,6 @@ export function CallControl({
 }) {
  const { microphone, video, sound, screenshare } = useCallControlState(callEmbed.control);
  const setCallEmbed = useSetAtom(callEmbedAtom);
-
  const [hangupState, hangup] = useAsyncCallback(
    useCallback(() => callEmbed.hangup(), [callEmbed])
  );
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Room } from 'matrix-js-sdk';
-import { Chip, Text } from 'folds';
+import { Chip, Icon, Icons, Text } from 'folds';
 import { useAtomValue } from 'jotai';
 import { useRoomName } from '../../hooks/useRoomMeta';
 import { RoomIcon } from '../../components/room-avatar';
@@ -38,7 +38,11 @@ export function CallRoomName({ room }: CallRoomNameProps) {
      variant="Background"
      radii="Pill"
      before={
+        dm ? (
+          <Icon size="200" src={Icons.VolumeHigh} filled />
+        ) : (
          <RoomIcon size="200" joinRule={room.getJoinRule()} roomType={room.getType()} filled />
+        )
      }
      onClick={() => navigateRoom(room.roomId)}
    >
@@ -1,7 +1,8 @@
-import React, { MouseEventHandler, useCallback, useRef, useState } from 'react';
+import React, { MouseEventHandler, useCallback, useEffect, useRef, useState } from 'react';
 import {
  Box,
  Button,
+  Chip,
  config,
  Icon,
  IconButton,
@@ -26,6 +27,8 @@ import {
  VideoButton,
 } from './Controls';
 import { CallEmbed, useCallControlState } from '../../plugins/call';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
 import { useResizeObserver } from '../../hooks/useResizeObserver';
 import { stopPropagation } from '../../utils/keyboard';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
@@ -51,6 +54,29 @@ export function CallControls({ callEmbed }: CallControlsProps) {
  );

  const [cords, setCords] = useState<RectCords>();
+  const [shareConfirm, setShareConfirm] = useState(false);
+  const [pttMode] = useSetting(settingsAtom, 'pttMode');
+  const [pttKey] = useSetting(settingsAtom, 'pttKey');
+  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
+  const [pttActive, setPttActive] = useState(false);
+
+  // Track microphone via ref so the PTT effect doesn't need it as a dep (avoids listener churn)
+  const microphoneRef = useRef(microphone);
+  useEffect(() => { microphoneRef.current = microphone; }, [microphone]);
+
+  // Handle PTT mode toggle mid-call — save/restore mic state (I-4)
+  const pttModeRef = useRef(pttMode);
+  const micBeforePTTRef = useRef<boolean | null>(null);
+  useEffect(() => {
+    if (pttMode && !pttModeRef.current) {
+      micBeforePTTRef.current = microphoneRef.current;
+      callEmbed.control.setMicrophone(false);
+    } else if (!pttMode && pttModeRef.current) {
+      callEmbed.control.setMicrophone(micBeforePTTRef.current ?? true);
+      micBeforePTTRef.current = null;
+    }
+    pttModeRef.current = pttMode;
+  }, [pttMode, callEmbed]);

  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
    setCords(evt.currentTarget.getBoundingClientRect());
@@ -71,12 +97,86 @@ export function CallControls({ callEmbed }: CallControlsProps) {
    setCords(undefined);
  };

+  const pttActiveRef = useRef(false);
+
+  useEffect(() => {
+    if (!pttMode) return;
+    const iframeWindow = callEmbed.iframe.contentWindow;
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.code !== pttKey || e.repeat) return;
+      const target = e.target as HTMLElement;
+      // BUG-7: use ownerDocument.body so isEditable works inside the EC iframe
+      const isEditable = (el: HTMLElement): boolean => {
+        const tag = el.tagName;
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true;
+        let node: HTMLElement | null = el;
+        while (node && node !== el.ownerDocument.body) {
+          if (node.contentEditable === 'true') return true;
+          if (node.contentEditable === 'false') return false;
+          node = node.parentElement;
+        }
+        return false;
+      };
+      if (isEditable(target)) return;
+      e.preventDefault();
+      if (!microphoneRef.current) callEmbed.control.setMicrophone(true);
+      pttActiveRef.current = true;
+      setPttActive(true);
+    };
+    const onKeyUp = (e: KeyboardEvent) => {
+      if (e.code !== pttKey) return;
+      callEmbed.control.setMicrophone(false);
+      pttActiveRef.current = false;
+      setPttActive(false);
+    };
+    const onBlur = () => {
+      callEmbed.control.setMicrophone(false);
+      pttActiveRef.current = false;
+      setPttActive(false);
+    };
+    const onFocus = () => {
+      callEmbed.control.setMicrophone(false);
+      pttActiveRef.current = false;
+      setPttActive(false);
+    };
+    window.addEventListener('keydown', onKeyDown);
+    window.addEventListener('keyup', onKeyUp);
+    window.addEventListener('blur', onBlur);
+    window.addEventListener('focus', onFocus);
+    // BUG-9: also wire iframe blur/focus so stuck-mic release works when focus moves to iframe
+    iframeWindow?.addEventListener('keydown', onKeyDown);
+    iframeWindow?.addEventListener('keyup', onKeyUp);
+    iframeWindow?.addEventListener('blur', onBlur);
+    iframeWindow?.addEventListener('focus', onFocus);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('keyup', onKeyUp);
+      window.removeEventListener('blur', onBlur);
+      window.removeEventListener('focus', onFocus);
+      iframeWindow?.removeEventListener('keydown', onKeyDown);
+      iframeWindow?.removeEventListener('keyup', onKeyUp);
+      iframeWindow?.removeEventListener('blur', onBlur);
+      iframeWindow?.removeEventListener('focus', onFocus);
+      // BUG-8: if callEmbed changes while PTT is active, release mic on cleanup
+      if (pttActiveRef.current) {
+        callEmbed.control.setMicrophone(false);
+        pttActiveRef.current = false;
+        setPttActive(false);
+      }
+    };
+  // microphone intentionally read via microphoneRef — excluded from deps to avoid listener churn
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pttMode, pttKey, callEmbed]);
+
  const [hangupState, hangup] = useAsyncCallback(
    useCallback(() => callEmbed.hangup(), [callEmbed])
  );
  const exiting =
    hangupState.status === AsyncStatus.Loading || hangupState.status === AsyncStatus.Success;

+  const pttKeyLabel = pttKey === 'Space' ? 'SPACE' : pttKey.replace('Key', '').replace('Digit', '');
+
  return (
    <Box
      ref={controlRef}
@@ -84,6 +184,82 @@ export function CallControls({ callEmbed }: CallControlsProps) {
      justifyContent="Center"
      alignItems="Center"
    >
+      {pttMode && (
+        lotusTerminal ? (
+          <Box style={{
+            position: 'absolute',
+            top: '-2.5rem',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            background: pttActive ? 'rgba(0,255,136,0.18)' : 'rgba(255,107,0,0.12)',
+            border: `1px solid ${pttActive ? 'rgba(0,255,136,0.55)' : 'rgba(255,107,0,0.35)'}`,
+            borderRadius: '99px',
+            padding: '0.2rem 0.9rem',
+            pointerEvents: 'none',
+            whiteSpace: 'nowrap',
+          }}>
+            <Text size="T200" style={{ color: pttActive ? '#00FF88' : '#FF6B00', fontWeight: 700, letterSpacing: '0.08em', fontFamily: 'JetBrains Mono, monospace' }}>
+              {pttActive ? '● LIVE' : `PTT — Hold ${pttKeyLabel}`}
+            </Text>
+          </Box>
+        ) : (
+          <Chip
+            variant={pttActive ? 'Success' : 'Warning'}
+            fill="Soft"
+            radii="400"
+            style={{
+              position: 'absolute',
+              top: '-2.2rem',
+              left: '50%',
+              transform: 'translateX(-50%)',
+              pointerEvents: 'none',
+              whiteSpace: 'nowrap',
+            }}
+            outlined
+          >
+            <Text size="T200" style={{ fontWeight: 700 }}>
+              {pttActive ? '● Live' : `PTT — Hold ${pttKeyLabel}`}
+            </Text>
+          </Chip>
+        )
+      )}
+      {shareConfirm && (
+        <Box
+          style={{
+            position: 'absolute',
+            bottom: '110%',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            background: 'var(--bg-surface)',
+            border: '1px solid var(--border-color)',
+            borderRadius: '0.75rem',
+            padding: '1rem 1.25rem',
+            zIndex: 100,
+            minWidth: '260px',
+            boxShadow: '0 8px 32px rgba(0,0,0,0.35)',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.75rem',
+          }}
+        >
+          <Text size="T300" style={{ fontWeight: 600 }}>Share your screen?</Text>
+          <Text size="T200" style={{ opacity: 0.75 }}>Your screen will be visible to all participants in this call.</Text>
+          <Box gap="200">
+            <Button
+              size="300" variant="Success" fill="Solid" radii="300"
+              onClick={() => { callEmbed.control.toggleScreenshare(); setShareConfirm(false); }}
+            >
+              <Text size="B300">Share</Text>
+            </Button>
+            <Button
+              size="300" variant="Secondary" fill="Soft" radii="300" outlined
+              onClick={() => setShareConfirm(false)}
+            >
+              <Text size="B300">Cancel</Text>
+            </Button>
+          </Box>
+        </Box>
+      )}
      <SequenceCard
        className={css.ControlCard}
        variant="SurfaceVariant"
@@ -105,7 +281,10 @@ export function CallControls({ callEmbed }: CallControlsProps) {
            <VideoButton enabled={video} onToggle={() => callEmbed.control.toggleVideo()} />
            <ScreenShareButton
              enabled={screenshare}
-              onToggle={() => callEmbed.control.toggleScreenshare()}
+              onToggle={() => screenshare
+                ? callEmbed.control.toggleScreenshare()
+                : setShareConfirm(true)
+              }
            />
          </Box>
        </Box>
@@ -172,7 +351,9 @@ export function CallControls({ callEmbed }: CallControlsProps) {
                size="400"
                onClick={handleOpenMenu}
                outlined
-                aria-pressed={!!cords}
+                aria-label="More options"
+                aria-expanded={!!cords}
+                aria-haspopup="menu"
              >
                <Icon size="400" src={Icons.VerticalDots} />
              </IconButton>
@@ -14,11 +14,20 @@ import { CallMemberRenderer } from './CallMemberCard';
 import * as css from './styles.css';
 import { CallControls } from './CallControls';
 import { useLivekitSupport } from '../../hooks/useLivekitSupport';
+import { webRTCSupported } from '../../utils/rtc';

 function LivekitServerMissingMessage() {
  return (
    <Text style={{ margin: 'auto', color: color.Critical.Main }} size="L400" align="Center">
-      Your homeserver does not support calling. But you can still join call started by others.
+      Your homeserver does not support calling.
+    </Text>
+  );
+}
+
+function WebRTCMissingError() {
+  return (
+    <Text style={{ margin: 'auto', color: color.Critical.Main }} size="L400" align="Center">
+      Your browser does not support WebRTC, which is required for calling.
    </Text>
  );
 }
@@ -26,16 +35,22 @@ function LivekitServerMissingMessage() {
 function JoinMessage({
  hasParticipant,
  livekitSupported,
+  rtcSupported,
 }: {
  hasParticipant?: boolean;
  livekitSupported?: boolean;
+  rtcSupported?: boolean;
 }) {
-  if (hasParticipant) return null;
+  if (rtcSupported === false) {
+    return <WebRTCMissingError />;
+  }

  if (livekitSupported === false) {
    return <LivekitServerMissingMessage />;
  }

+  if (hasParticipant) return null;
+
  return (
    <Text style={{ margin: 'auto' }} size="L400" align="Center">
      Voice chat’s empty — Be the first to hop in!
@@ -63,12 +78,16 @@ function CallPrescreen() {
  const mx = useMatrixClient();
  const room = useRoom();
  const livekitSupported = useLivekitSupport();
+  const rtcSupported = webRTCSupported();

  const powerLevels = usePowerLevelsContext();
  const creators = useRoomCreators(room);

  const permissions = useRoomPermissions(creators, powerLevels);
-  const hasPermission = permissions.event(StateEvent.GroupCallMemberPrefix, mx.getSafeUserId());
+  const hasPermission = permissions.stateEvent(
+    StateEvent.GroupCallMemberPrefix,
+    mx.getSafeUserId()
+  );

  const callSession = useCallSession(room);
  const callMembers = useCallMembers(room, callSession);
@@ -77,7 +96,7 @@ function CallPrescreen() {
  const callEmbed = useCallEmbed();
  const inOtherCall = callEmbed && callEmbed.roomId !== room.roomId;

-  const canJoin = hasPermission && (livekitSupported || hasParticipant);
+  const canJoin = hasPermission && livekitSupported && rtcSupported;

  return (
    <Scroll variant="Surface" hideTrack>
@@ -100,7 +119,11 @@ function CallPrescreen() {
          <Box className={css.PrescreenMessage} alignItems="Center">
            {!inOtherCall &&
              (hasPermission ? (
-                <JoinMessage hasParticipant={hasParticipant} livekitSupported={livekitSupported} />
+                <JoinMessage
+                  hasParticipant={hasParticipant}
+                  livekitSupported={livekitSupported}
+                  rtcSupported={rtcSupported}
+                />
              ) : (
                <NoPermissionMessage />
              ))}
@@ -33,6 +33,7 @@ export function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
          radii="400"
          size="400"
          onClick={() => onToggle()}
+          aria-label={enabled ? 'Turn Off Microphone' : 'Turn On Microphone'}
          outlined
        >
          <Icon size="400" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
@@ -53,7 +54,7 @@ export function SoundButton({ enabled, onToggle }: SoundButtonProps) {
      delay={500}
      tooltip={
        <Tooltip>
-          <Text size="T200">{enabled ? 'Turn Off Sound' : 'Turn On Sound'}</Text>
+          <Text size="T200">{enabled ? 'Deafen' : 'Undeafen'}</Text>
        </Tooltip>
      }
    >
@@ -65,6 +66,7 @@ export function SoundButton({ enabled, onToggle }: SoundButtonProps) {
          radii="400"
          size="400"
          onClick={() => onToggle()}
+          aria-label={enabled ? 'Undeafen' : 'Deafen'}
          outlined
        >
          <Icon
@@ -81,15 +83,18 @@ export function SoundButton({ enabled, onToggle }: SoundButtonProps) {
 type VideoButtonProps = {
  enabled: boolean;
  onToggle: () => void;
+  disabled?: boolean;
 };
-export function VideoButton({ enabled, onToggle }: VideoButtonProps) {
+export function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
  return (
    <TooltipProvider
      position="Top"
      delay={500}
      tooltip={
        <Tooltip>
-          <Text size="T200">{enabled ? 'Stop Camera' : 'Start Camera'}</Text>
+          <Text size="T200">
+            {disabled ? 'Camera disabled in settings' : enabled ? 'Stop Camera' : 'Start Camera'}
+          </Text>
        </Tooltip>
      }
    >
@@ -102,6 +107,10 @@ export function VideoButton({ enabled, onToggle }: VideoButtonProps) {
          size="400"
          onClick={() => onToggle()}
          outlined
+          disabled={disabled}
+          aria-label={disabled ? 'Camera disabled in settings' : enabled ? 'Stop camera' : 'Start camera'}
+          aria-pressed={enabled}
+          style={disabled ? { opacity: 0.4, cursor: 'not-allowed' } : undefined}
        >
          <Icon
            size="400"
@@ -137,6 +146,7 @@ export function ScreenShareButton({ enabled, onToggle }: ScreenShareButtonProps)
          radii="400"
          size="400"
          onClick={() => onToggle()}
+          aria-label={enabled ? 'Stop Screenshare' : 'Start Screenshare'}
          outlined
        >
          <Icon size="400" src={Icons.ScreenShare} filled={enabled} />
@@ -167,6 +177,8 @@ export function ChatButton() {
          radii="400"
          size="400"
          onClick={() => setChat(!chat)}
+          aria-label={chat ? 'Close Chat' : 'Open Chat'}
+          aria-pressed={chat}
          outlined
        >
          <Icon size="400" src={Icons.Message} filled={chat} />
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Box, Button, Icon, Icons, Spinner, Text } from 'folds';
 import { SequenceCard } from '../../components/sequence-card';
 import * as css from './styles.css';
@@ -6,6 +6,30 @@ import { ChatButton, ControlDivider, MicrophoneButton, SoundButton, VideoButton
 import { useIsDirectRoom, useRoom } from '../../hooks/useRoom';
 import { useCallEmbed, useCallJoined, useCallStart } from '../../hooks/useCallEmbed';
 import { useCallPreferences } from '../../state/hooks/callPreferences';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
+
+type MediaPermState = 'granted' | 'denied' | 'prompt' | 'unknown';
+
+function useMediaPermissions(): MediaPermState {
+  const [state, setState] = useState<MediaPermState>('unknown');
+
+  useEffect(() => {
+    if (!navigator.permissions) {
+      setState('unknown');
+      return;
+    }
+    navigator.permissions
+      .query({ name: 'microphone' as PermissionName })
+      .then((result) => {
+        setState(result.state as MediaPermState);
+        result.onchange = () => setState(result.state as MediaPermState);
+      })
+      .catch(() => setState('unknown'));
+  }, []);
+
+  return state;
+}

 type PrescreenControlsProps = {
  canJoin?: boolean;
@@ -21,10 +45,14 @@ export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
  const startCall = useCallStart(direct);
  const joining = callEmbed?.roomId === room.roomId && !callJoined;

-  const disabled = inOtherCall || !canJoin;
+  const micPermission = useMediaPermissions();
+  const micDenied = micPermission === 'denied';
+
+  const disabled = inOtherCall || !canJoin || micDenied;

  const { microphone, video, sound, toggleMicrophone, toggleVideo, toggleSound } =
    useCallPreferences();
+  const [cameraOnJoin] = useSetting(settingsAtom, 'cameraOnJoin');

  return (
    <SequenceCard
@@ -42,10 +70,15 @@ export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
      </Box>
      <ControlDivider />
      <Box shrink="No" alignItems="Inherit" justifyContent="SpaceBetween" gap="200">
-        <VideoButton enabled={video} onToggle={toggleVideo} />
+        <VideoButton enabled={video} onToggle={toggleVideo} disabled={!cameraOnJoin} />
        <ChatButton />
      </Box>
-      <Box grow="Yes" direction="Column">
+      <Box grow="Yes" direction="Column" gap="200">
+        {micDenied && (
+          <Text size="T200" style={{ color: 'var(--tc-critical-high, #e53e3e)', textAlign: 'center' }}>
+            Microphone access is blocked. Enable it in your browser settings to join.
+          </Text>
+        )}
        <Button
          variant={disabled ? 'Secondary' : 'Success'}
          fill={disabled ? 'Soft' : 'Solid'}
@@ -21,6 +21,7 @@ export const CallMemberCard = style({

 export const CallControlContainer = style({
  padding: config.space.S400,
+  position: 'relative',
 });

 export const PrescreenMessage = style({
@@ -87,12 +87,12 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
      <PageHeader outlined={false}>
        <Box grow="Yes" gap="200">
          <Box grow="Yes" alignItems="Center" gap="200">
-            <Text size="H3" truncate>
+            <Text as="h2" size="H3" truncate>
              Developer Tools
            </Text>
          </Box>
          <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
              <Icon src={Icons.Cross} />
            </IconButton>
          </Box>
@@ -118,7 +118,7 @@ export function SendRoomEvent({ type, stateKey, requestClose }: SendRoomEventPro
            </Chip>
          </Box>
          <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
              <Icon src={Icons.Cross} />
            </IconButton>
          </Box>
@@ -275,7 +275,7 @@ export function StateEventEditor({ type, stateKey, requestClose }: StateEventEdi
            </Chip>
          </Box>
          <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
              <Icon src={Icons.Cross} />
            </IconButton>
          </Box>
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export { ReadReceiptAvatars } from './ReadReceiptAvatars';`