docs: expand LOTUS_TODO.md with gamer/aesthetic feature wave and 30+ new items

Adds Priority 5 section covering: - Visual/theme: custom accent color, 5 new theme presets, glassmorphism, animated wallpapers, night light, font selector, seasonal themes - Gamer UX: LFG command, quick reaction bar, soundboard, join/leave sounds, voice channel limit, AFK auto-mute, push-to-deafen hotkey - Profile/avatar: frames, animated overlays, status-based border - Chat polish: mention animation, collapsible messages, send animation, message length counter, quick reply from notification, custom mention color - Utility: room context menu improvements, notification profiles - Bug fix: drag-and-drop overlay doesn't dismiss on hover-away - 4 pending audits added (profile banner, speaking indicator, etc.) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
docs: remove upstream Cinny features from README (stickers, pins, who-reacted)
2026-06-01 01:02:27 -04:00 · 2026-05-31 23:07:40 -04:00 · 2026-05-31 23:06:59 -04:00 · 2026-05-31 10:57:27 -04:00 · 2026-05-30 23:59:46 -04:00 · 2026-05-30 23:52:15 -04:00
522 changed files with 20063 additions and 8195 deletions
@@ -0,0 +1,15 @@
 {
  "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": "/"
  }
 }
@@ -0,0 +1,2 @@
 VITE_SENTRY_DSN=https://264a5e95c5d31fe080a2e92fb008294d@o4511430568378368.ingest.us.sentry.io/4511430571982849
 VITE_APP_VERSION=lotus
@@ -1,2 +0,0 @@
 experiment
 node_modules
@@ -1,72 +0,0 @@
 module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    'airbnb',
    'prettier',
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  "globals": {
    JSX: "readonly"
  },
  plugins: [
    'react',
    '@typescript-eslint'
  ],
  rules: {
    'linebreak-style': 0,
    'no-underscore-dangle': 0,
    "no-shadow": "off",
    "import/prefer-default-export": "off",
    "import/extensions": "off",
    "import/no-unresolved": "off",
    "import/no-extraneous-dependencies": [
      "error",
      {
        devDependencies: true,
      },
    ],
    'react/no-unstable-nested-components': [
      'error',
      { allowAsProps: true },
    ],
    "react/jsx-filename-extension": [
      "error",
      {
        extensions: [".tsx", ".jsx"],
      },
    ],
    "react/require-default-props": "off",
    "react/jsx-props-no-spreading": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "error",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-shadow": "error"
  },
  overrides: [
    {
      files: ['*.ts'],
      rules: {
        'no-undef': 'off',
      },
    },
  ],
 };
@@ -0,0 +1,63 @@
 name: CI
 on:
  push:
    branches: [lotus]
  pull_request:
    branches: [lotus]
 jobs:
  build:
    name: Build & Quality Checks
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version-file: '.node-version'
          cache: npm
      - name: Install dependencies
        run: npm ci
      # ── Critical gate — if this fails, nothing deploys ──────────────────
      - name: Build
        run: npm run build
        env:
          NODE_OPTIONS: '--max_old_space_size=4096'
          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
          VITE_APP_VERSION: ${{ github.sha }}
      # ── Quality checks (informational — pre-existing issues exist) ───────
      - name: TypeScript
        run: npm run typecheck
        continue-on-error: true
      - name: ESLint
        run: npm run check:eslint
        continue-on-error: true
      - name: Prettier
        run: npm run check:prettier
      # ── Security ─────────────────────────────────────────────────────────
      - name: Audit (high/critical)
        run: npm audit --audit-level=high --omit=dev
        continue-on-error: true
      # ── Bundle size report ───────────────────────────────────────────────
      - name: Report bundle sizes
        run: |
          echo "### Bundle sizes" >> $GITHUB_STEP_SUMMARY
          echo "" >> $GITHUB_STEP_SUMMARY
          echo "| File | Size | Gzip |" >> $GITHUB_STEP_SUMMARY
          echo "|------|------|------|" >> $GITHUB_STEP_SUMMARY
          find dist/assets -name "*.js" -not -name "*.map" | sort | while read f; do
            name=$(basename "$f")
            size=$(du -sh "$f" | cut -f1)
            gzip_size=$(gzip -c "$f" | wc -c | awk '{printf "%.1f kB", $1/1024}')
            echo "| $name | $size | $gzip_size |" >> $GITHUB_STEP_SUMMARY
          done
@@ -0,0 +1,127 @@
 labels: ['needs-confirmation']
 body:
  - type: markdown #add faqs in future
    attributes:
      value: |
        > [!IMPORTANT]
        > Please read through [the Discussion rules](https://github.com/cinnyapp/cinny/discussions/2653) and check for both existing [Discussions](https://github.com/cinnyapp/cinny/discussions?discussions_q=) and [Issues](https://github.com/cinnyapp/cinny/issues?q=sort%3Areactions-desc) prior to opening a new Discussion.
  - type: markdown
    attributes:
      value: '# Issue Details'
  - type: textarea
    attributes:
      label: Issue Description
      description: |
        Provide a detailed description of the issue.  Include relevant information, such as:
        - The feature or configuration option you encounter the issue with.
        - Screenshots, screen recordings, or other supporting media (as needed).
        - If this is a regression of an existing issue that was closed or resolved, please include the previous item reference (Discussion, Issue, PR, commit) in your description.
      placeholder: |
        When I try to send a message in a room, the message doesn't appear in the timeline.
        OR
        The application crashes when I click on the settings button.
    validations:
      required: true
  - type: textarea
    attributes:
      label: Expected Behavior
      description: |
        Describe how you expect Cinny to behave in this situation.
      placeholder: |
        I expected the message to appear in the room timeline immediately after sending.
        OR
        The settings panel should open smoothly without any crashes.
    validations:
      required: true
  - type: textarea
    attributes:
      label: Actual Behavior
      description: |
        Describe how Cinny actually behaves in this situation.  If it is not immediately obvious how the actual behavior differs from the expected behavior described above, please be sure to mention the deviation specifically.
      placeholder: |
        The application freezes for 3 seconds and then shows a white screen.
    validations:
      required: true
  - type: textarea
    attributes:
      label: Reproduction Steps
      description: |
        Provide a detailed set of step-by-step instructions for reproducing this issue.
      placeholder: |
        1. Open Cinny and log in to my account
        2. Navigate to the #general room
        3. Type a message in the message box
        4. Press Enter to send
        5. Notice that the message doesn't appear in the timeline
    validations:
      required: true
  - type: textarea
    attributes:
      label: Environement
      description: |
        Please provide information about your environment. Include the following:
        - OS:
        - Browser: 
        - Cinny Web Version: (app.cinny.in or self hosted)
        - Cinny desktop Version: (appimage or deb or flatpak)
        - Matrix Homeserver:
      placeholder: |
        - OS: Windows 11
        - Browser: Chrome 120.0.6099.109
        - Cinny Web Version: 3.2.0 (app.cinny.in or self hosted)
        - Cinny desktop Version: 3.2.0 (appimage or deb or flatpak)
        - Matrix Homeserver: matrix.org (Synapse 1.97.0)
      render: text
    validations:
      required: true
  - type: textarea
    id: logs
    attributes:
      label: Relevant Logs
      description: |
        If applicable, add browser console logs to help explain your problem.
        **To get browser console logs:**
        - Chrome/Edge: Press F12 → Console tab
        - Firefox: Press F12 → Console tab  
        - Safari: Develop → Show Web Inspector → Console
        Please wrap large log outputs in code blocks with triple backticks (```).
      placeholder: |
        ```
        Error: Failed to send message
            at MessageComposer.sendMessage (composer.js:245)
            at HTMLButtonElement.onClick (composer.js:189)
        TypeError: Cannot read property 'content' of undefined
            at RoomTimeline.render (timeline.js:567)
        ```
      render: shell
    validations:
      required: false
  - type: textarea
    attributes:
      label: Additional context
      description: |
        Add any other context about the problem here (e.g., when did this start happening, does it happen on different homeservers, etc.)
      placeholder: |
        - This started happening after I updated to version 3.2.0
        - It only happens in encrypted rooms, not in public rooms
        - I've tried on both Firefox and Chrome with the same result
        - It works fine on my phone using the same account
        - This happens on all homeservers I've tested (matrix.org, mozilla.org)
    validations:
      required: false
  - type: markdown
    attributes:
      value: |
        # User Acknowledgements
        > [!TIP]
        > Use these links to review the existing Cinny [Discussions](https://github.com/cinnyapp/cinny/discussions?discussions_q=) and [Issues](https://github.com/cinnyapp/cinny/issues?q=sort%3Areactions-desc).
  - type: checkboxes #add faqs in future
    attributes:
      label: 'I acknowledge that:'
      options:
        - label: I have searched the Cinny repository (both open and closed Discussions and Issues) and confirm this is not a duplicate of an existing issue or discussion.
          required: true
        - label: I have checked the "Preview" tab on all text fields to ensure that everything looks right, and have wrapped all configuration and code in code blocks with a group of three backticks (` ``` `) on separate lines.
          required: true
@@ -1,57 +0,0 @@
 name: 🐞 Bug Report
 description: Report a bug
 body:
  - type: markdown
    attributes:
      value: |
        ## First of all
        1. Please search for [existing issues](https://github.com/ajbura/cinny/issues?q=is%3Aissue) about this problem first.
        2. Make sure Cinny is up to date.
        3. Make sure it's an issue with Cinny and not something else you are using.
        4. Remember to be friendly.
  - type: textarea
    id: description
    attributes:
      label: Describe the bug
      description: A clear description of what the bug is. Include screenshots if applicable.
      placeholder: Bug description
    validations:
      required: true
  - type: textarea
    id: reproduction
    attributes:
      label: Reproduction
      description: Steps to reproduce the behavior.
      placeholder: |
        1. Go to ...
        2. Click on ...
        3. See error
  - type: textarea
    id: expected-behavior
    attributes:
      label: Expected behavior
      description: A clear description of what you expected to happen.
  - type: textarea
    id: info
    attributes:
      label: Platform and versions
      description: "Provide OS, browser and Cinny version with your Homeserver."
      placeholder: |
       1. OS: [e.g. Windows 10, MacOS]
       2. Browser: [e.g. chrome 99.5, firefox 97.2]
       3. Cinny version: [e.g. 1.8.1 (app.cinny.in)]
       4. Matrix homeserver: [e.g. matrix.org]
      render: shell
    validations:
      required: true
  - type: textarea
    id: context
    attributes:
      label: Additional context
      description: Add any other context about the problem here.
@@ -1,4 +1,5 @@
 blank_issues_enabled: false
 contact_links:
-  - name: 💬 Matrix Chat
+  - name: Features, Bug Reports, Questions
-    url: https://matrix.to/#/#cinny:matrix.org
+    url: https://github.com/cinnyapp/cinny/discussions/new/choose
-    about: Ask questions and talk to other Cinny users and the maintainers
+    about: Our preferred starting point if you have any questions or suggestions about features or behavior.
@@ -1,33 +0,0 @@
 name: 💡 Feature Request
 description: Suggest an idea
 body:
  - type: textarea
    id: problem
    attributes:
      label: Describe the problem
      description: A clear description of the problem this feature would solve
      placeholder: "I'm always frustrated when..."
    validations:
      required: true
  - type: textarea
    id: solution
    attributes:
      label: "Describe the solution you'd like"
      description: A clear description of what change you would like
      placeholder: "I would like to..."
    validations:
      required: true
  - type: textarea
    id: alternatives
    attributes:
      label: Alternatives considered
      description: "Any alternative solutions you've considered"
  - type: textarea
    id: context
    attributes:
      label: Additional context
      description: Add any other context about the problem here.
@@ -0,0 +1,9 @@
 ---
 name: Pre-Discussed and Approved Topics
 about: |-
  Only for topics already discussed and approved in the GitHub Discussions section.
 ---
 **DO NOT OPEN A NEW ISSUE. PLEASE USE THE DISCUSSIONS SECTION.**
 **I DIDN'T READ THE ABOVE LINE. PLEASE CLOSE THIS ISSUE.**
@@ -1,22 +0,0 @@
 <!-- Please read https://github.com/ajbura/cinny/blob/dev/CONTRIBUTING.md before submitting your pull request -->
 ### Description
 <!-- Please include a summary of the change. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
 Fixes #
 #### Type of change
 - [ ] Bug fix (non-breaking change which fixes an issue)
 - [ ] New feature (non-breaking change which adds functionality)
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
 - [ ] This change requires a documentation update
 ### Checklist:
 - [ ] My code follows the style guidelines of this project
 - [ ] I have performed a self-review of my own code
 - [ ] I have commented my code, particularly in hard-to-understand areas
 - [ ] I have made corresponding changes to the documentation
 - [ ] My changes generate no new warnings
@@ -1,3 +0,0 @@
 # Reporting a Vulnerability
 **If you've found a security vulnerability, please report it to cinnyapp@gmail.com**
@@ -2,29 +2,29 @@
 version: 2
 updates:
-#   - package-ecosystem: npm
+  #   - package-ecosystem: npm
-#     directory: /
+  #     directory: /
-#     schedule:
+  #     schedule:
-#       interval: weekly
+  #       interval: weekly
-#       day: "tuesday"
+  #       day: "tuesday"
-#       time: "01:00"
+  #       time: "01:00"
-#       timezone: "Asia/Kolkata"
+  #       timezone: "Asia/Kolkata"
-#     open-pull-requests-limit: 15
+  #     open-pull-requests-limit: 15
  - package-ecosystem: github-actions
    directory: /
    schedule:
      interval: weekly
-      day: "tuesday"
+      day: 'tuesday'
-      time: "01:00"
+      time: '01:00'
-      timezone: "Asia/Kolkata"
+      timezone: 'Asia/Kolkata'
    open-pull-requests-limit: 5
  - package-ecosystem: docker
    directory: /
    schedule:
      interval: weekly
-      day: "tuesday"
+      day: 'tuesday'
-      time: "01:00"
+      time: '01:00'
-      timezone: "Asia/Kolkata"
+      timezone: 'Asia/Kolkata'
    open-pull-requests-limit: 5
@@ -3,12 +3,20 @@
  "extends": [
    "config:recommended",
    ":dependencyDashboardApproval",
-    ":semanticCommits"
+    ":semanticCommits",
    "group:monorepos"
  ],
  "labels": ["Dependencies"],
  "rebaseWhen": "conflicted",
  "packageRules": [
    {
      "matchUpdateTypes": ["lockFileMaintenance"]
    },
    {
      "matchPackageNames": ["slate", "slate-dom", "slate-history", "slate-react"]
    },
    {
      "matchPackageNames": ["linkifyjs", "linkify-react"]
    }
  ],
  "lockFileMaintenance": {
@@ -14,9 +14,9 @@ jobs:
      - name: Checkout repository
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
      - name: Setup node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
        with:
-          node-version-file: ".node-version"
+          node-version-file: '.node-version'
          package-manager-cache: false
      - name: Install dependencies
        run: npm ci
@@ -25,7 +25,7 @@ jobs:
          NODE_OPTIONS: '--max_old_space_size=4096'
        run: npm run build
      - name: Upload artifact
-        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
        with:
          name: preview
          path: dist
@@ -33,7 +33,7 @@ jobs:
      - name: Save pr number
        run: echo ${PR_NUMBER} > ./pr.txt
      - name: Upload pr number
-        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
        with:
          name: pr
          path: ./pr.txt
@@ -1,10 +1,10 @@
 name: Deploy PR to Netlify
-run-name: "Deploy PR to Netlify (${{ github.event.workflow_run.head_branch }})"
+run-name: 'Deploy PR to Netlify (${{ github.event.workflow_run.head_branch }})'
 on:
  workflow_run:
-      workflows: ["Build pull request"]
+    workflows: ['Build pull request']
-      types: [completed]
+    types: [completed]
 jobs:
  deploy-pull-request:
@@ -16,16 +16,22 @@ jobs:
    if: ${{ github.event.workflow_run.conclusion == 'success' }}
    steps:
      - name: Download pr number
-        uses: dawidd6/action-download-artifact@2536c51d3d126276eb39f74d6bc9c72ac6ef30d3 # v16
+        uses: dawidd6/action-download-artifact@b6e2e70617bc3265edd6dab6c906732b2f1ae151 # v21
        with:
          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@2536c51d3d126276eb39f74d6bc9c72ac6ef30d3 # v16
+        uses: dawidd6/action-download-artifact@b6e2e70617bc3265edd6dab6c906732b2f1ae151 # v21
        with:
          workflow: ${{ github.event.workflow.id }}
          run_id: ${{ github.event.workflow_run.id }}
@@ -36,13 +42,13 @@ jobs:
        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0.0
        with:
          publish-dir: dist
-          deploy-message: "Deploy PR ${{ steps.pr.outputs.id }}"
+          deploy-message: 'Deploy PR ${{ steps.pr.outputs.id }}'
          alias: ${{ steps.pr.outputs.id }}
          # These don't work because we're in workflow_run
          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
@@ -53,5 +59,5 @@ jobs:
          pr-number: ${{ steps.pr.outputs.id }}
          comment-tag: ${{ steps.pr.outputs.id }}
          message: |
-              Preview: ${{ steps.netlify.outputs.deploy-url }}
+            Preview: ${{ steps.netlify.outputs.deploy-url }}
-              ⚠️ Exercise caution. Use test accounts. ⚠️
+            ⚠️ Exercise caution. Use test accounts. ⚠️
@@ -26,7 +26,7 @@ jobs:
      - name: Login to Docker Hub #Do not update this action from a outside PR
        if: github.event.pull_request.head.repo.fork == false
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
@@ -34,7 +34,7 @@ jobs:
      - name: Login to the Github Container registry #Do not update this action from a outside PR
        if: github.event.pull_request.head.repo.fork == false
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
@@ -50,7 +50,7 @@ jobs:
            ghcr.io/${{ github.repository }}
      - name: Build Docker image (no push)
-        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6.19.2
+        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
        with:
          context: .
          platforms: linux/amd64
@@ -13,9 +13,9 @@ jobs:
      - name: Checkout repository
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
      - name: Setup node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
        with:
-          node-version-file: ".node-version"
+          node-version-file: '.node-version'
          package-manager-cache: false
      - name: Install dependencies
        run: npm ci
@@ -12,9 +12,9 @@ jobs:
      - name: Checkout repository
        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
      - name: Setup node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
        with:
-          node-version-file: ".node-version"
+          node-version-file: '.node-version'
          package-manager-cache: false
      - name: Install dependencies
        run: npm ci
@@ -52,7 +52,7 @@ jobs:
          gpg --export | xxd -p
          echo '${{ secrets.GNUPG_PASSPHRASE }}' | gpg --batch --yes --pinentry-mode loopback --passphrase-fd 0 --armor --detach-sign cinny-${{ steps.vars.outputs.tag }}.tar.gz
      - name: Upload tagged release
-        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
+        uses: softprops/action-gh-release@b4309332981a82ec1c5618f44dd2e27cc8bfbfda # v3.0.0
        with:
          files: |
            cinny-${{ steps.vars.outputs.tag }}.tar.gz
@@ -72,12 +72,12 @@ jobs:
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
      - name: Login to Docker Hub #Do not update this action from a outside PR
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
      - name: Login to the Github Container registry #Do not update this action from a outside PR
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
@@ -90,7 +90,7 @@ jobs:
            ${{ secrets.DOCKER_USERNAME }}/cinny
            ghcr.io/${{ github.repository }}
      - name: Build and push Docker image
-        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6.19.2
+        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
        with:
          context: .
          platforms: linux/amd64,linux/arm64
@@ -4,4 +4,4 @@ node_modules
 devAssets
 .DS_Store
-.idea
+.ideapackage-lock.json
@@ -0,0 +1,3 @@
 # These are commented until we enable lint and typecheck
 # npx tsc -p tsconfig.json --noEmit
 # npx lint-staged
@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
-* Demonstrating empathy and kindness toward other people
+- Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
+- Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
+- Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Accepting responsibility and apologizing to those affected by our mistakes,
  and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
  overall community
 Examples of unacceptable behavior include:
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
  advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
+- Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
+- Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Publishing others' private information, such as a physical or email
  address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
  professional setting
 ## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 **Consequence**: A permanent ban from any sort of public interaction within
@@ -5,6 +5,7 @@ First off, thanks for taking the time to contribute! ❤️
 All types of contributions are encouraged and valued. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉
 > And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about:
 >
 > - Star the project
 > - Tweet about it (tag @cinnyapp)
 > - Refer this project in your project's readme
@@ -18,7 +19,8 @@ Bug reports and feature suggestions must use descriptive and concise titles and
 ## Pull requests
 > ### Legal Notice
-> When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license.
+>
 > When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license. You will also be asked to [sign the CLA](https://github.com/cinnyapp/cla) upon submiting your pull request.
 **NOTE: If you want to add new features, please discuss with maintainers before coding or opening a pull request.** This is to ensure that we are on same track and following our roadmap.
@@ -26,9 +28,9 @@ Bug reports and feature suggestions must use descriptive and concise titles and
 Example:
-|Not ideal|Better|
+| Not ideal                           | Better                                        |
-|---|----|
+| ----------------------------------- | --------------------------------------------- |
-|Fixed markAllAsRead in RoomTimeline|Fix read marker when paginating room timeline|
+| Fixed markAllAsRead in RoomTimeline | Fix read marker when paginating room timeline |
 It is not always possible to phrase every change in such a manner, but it is desired.
@@ -39,6 +41,7 @@ Also, we use [ESLint](https://eslint.org/) for clean and stylistically consisten
 **For any query or design discussion, join our [Matrix room](https://matrix.to/#/#cinny:matrix.org).**
 ## Helpful links
 - [BEM methodology](http://getbem.com/introduction/)
 - [Atomic design](https://bradfrost.com/blog/post/atomic-web-design/)
 - [Matrix JavaScript SDK documentation](https://matrix-org.github.io/matrix-js-sdk/index.html)
@@ -11,7 +11,7 @@ RUN npm run build
 ## App
-FROM nginx:1.29.5-alpine
+FROM nginx:1.29.8-alpine
 COPY --from=builder /src/dist /app
 COPY --from=builder /src/docker-nginx.conf /etc/nginx/conf.d/default.conf
@@ -0,0 +1,981 @@
 # Lotus Chat — Master Feature TODO
 **Location:** `/root/code/cinny/LOTUS_TODO.md`  
 **Repo:** `lotus` branch at `https://code.lotusguild.org/LotusGuild/cinny`  
 **Deploy:** push to `lotus` → CI → auto-deploy to `chat.lotusguild.org` (~11 min)
 This file is the single source of truth for all planned, in-progress, and backlog features.
 Update it as features are completed or reprioritized.
 Legend:
 - `[AUDIT REQUIRED]` — at least one assumption in the description needs code/server verification before implementing
 - `[UPSTREAM CHECK]` — may already be in upstream Cinny mainline; confirm before building
 - `[SERVER CHECK]` — depends on a Synapse feature or MSC that may not be enabled on `matrix.lotusguild.org`
 - `[LOW PRIORITY]` — agreed to add but deprioritized; implement after everything else
 - `[EXTREME COMPLEXITY]` — multi-sprint, architectural; plan separately before touching
 Status: `[ ]` pending · `[~]` in progress · `[x]` completed
 ---
 ## COMPLETED
 - [x] Audit & document: who reacted hover tooltip — README + landing page
 - [x] Audit & document: sticker/emoji panel — README + landing page
 - [x] Audit & document: custom status messages — added to README Presence section
 - [x] Audit & document: pinned messages — confirmed upstream, not added to README
 ---
 ## PRIORITY 0 — Quick wins: low complexity, high daily value
 These are the easiest items to ship and immediately improve the daily experience.
 Attack these first; most are single-file changes or simple new components.
 ---
 ### [ ] P0-1 · Report Room (MSC4151)
 **Spec:** MSC4151, merged ~Matrix spec v1.12. Synapse supports it.  
 **Confirmed:** NOT present in upstream Cinny mainline.  
 **What:** Add a "Report Room" option in the room header context menu (⋮ or room settings). Opens a modal with a reason text field (required) and a Submit button. Calls:
 ```
 POST /_matrix/client/v3/rooms/{roomId}/report
 Body: { "reason": "string" }
 ```
 The homeserver forwards the report to server admins.  
 **Where:** `src/app/features/room/RoomViewHeader.tsx` (add menu item), new `ReportRoomModal.tsx` component.  
 **Complexity:** Low — one API call, one modal.
 ---
 ### [ ] P0-2 · Server support contact display (MSC1929)
 **Spec:** MSC1929, stable in Matrix spec.  
 **What:** On load (or when Settings → Help & About is opened), fetch:
 ```
 GET /.well-known/matrix/support
 ```
 Parse the `contacts` array and `support_page` URL. Display in Settings → Help & About:
 - "Homeserver admin: @jared:matrix.lotusguild.org"
 - Link to support page if present
 Cache the response in component state; no repeated fetches.  
 **Where:** `src/app/features/settings/` Help/About panel.  
 **Complexity:** Low — one fetch, display result.
 ---
 ### [ ] P0-3 · Server notices distinct rendering (m.server_notice)
 **Spec:** CS-API §13.17, stable.  
 **Confirmed:** Currently server notices arrive as plain DMs — indistinguishable from real messages.  
 **What:** Detect the `m.server_notice` event type in the timeline renderer. Render with:
 - A distinct "Server Notice" header badge (server icon + label)
 - Slightly different background color (use `color.Warning` or neutral surface)
 - Composer disabled / read-only state in the server notice DM room
 - Do NOT show "Send message" input in these rooms  
 **Where:** `src/app/features/room/RoomTimeline.tsx` (event renderer), `src/app/features/room/RoomInput.tsx` (hide/disable composer).  
 **[AUDIT REQUIRED]** — Verify how matrix-js-sdk exposes `m.server_notice` — check if it's a room type (`m.server_notice` in `m.room.create`) or per-event content field.  
 **Complexity:** Low.
 ---
 ### [ ] P0-4 · Reaction / relation redaction (MSC3892)
 **Spec:** MSC3892, in Final Comment Period.  
 **What:** When a user removes their reaction (un-reacts), currently a full `m.room.redaction` is sent targeting the reaction event. MSC3892 adds a cleaner relation-scoped redaction. Use the MSC3892 endpoint if the server supports it; fall back to standard redaction otherwise.  
 Check server capability: `GET /_matrix/client/v1/capabilities` for `m.room.redaction` capability or probe `/_matrix/client/unstable/org.matrix.msc3892/`.  
 **[SERVER CHECK]** — Verify `matrix.lotusguild.org` supports MSC3892. If not, no change is needed (current behavior is fine); if yes, use the cleaner endpoint.  
 **Where:** Wherever `onReactionToggle` sends the redaction — likely `src/app/features/room/RoomTimeline.tsx` or a hook.  
 **Complexity:** Low — conditional API call swap.
 ---
 ### [ ] P0-5 · Rich room topic rendering (MSC3765)
 **Spec:** MSC3765, merged Matrix spec v1.15.  
 **What:** Room topics can now include formatted text via the `m.topic` content block (bold, links, italic). Currently topics render as plain text in the room header. Pipe the `formatted_body` of the `m.room.topic` state event through the existing HTML/Markdown renderer (same renderer used for message bodies).  
 **[AUDIT REQUIRED]** — Check if `matrix.lotusguild.org` Synapse version supports sending `m.topic` content blocks. Also check if existing room topics on the server have `formatted_body` set. The rendering improvement is worthwhile even if new formatted topics aren't being set yet.  
 **Where:** Wherever the room topic is displayed in `src/app/features/room/RoomViewHeader.tsx` or similar.  
 **Complexity:** Low — reuse existing HTML renderer.
 ---
 ### [ ] P0-6 · Edit history viewer
 **Spec:** CS-API §11.8.2 (stable). Edit history is stored as `m.replace` relation events.  
 **What:** When a message shows the "edited" label, clicking it opens a popover or small modal listing every prior version of the message with timestamps:
 ```
 Original:  "Hello world"        — 3:41 PM
 Edit 1:    "Hello world!"       — 3:42 PM  
 Edit 2:    "Hello everyone!"    — 3:45 PM  (current)
 ```
 Fetch edit history via:
 ```
 GET /_matrix/client/v1/rooms/{roomId}/relations/{eventId}/m.replace
 ```
 **[AUDIT REQUIRED]** — Confirm upstream Cinny does NOT already show edit history on click. If it does, this is upstream and should not be added to our README.  
 **Where:** `src/app/features/room/message/Message.tsx` — find where "edited" label renders and add click handler.  
 **Complexity:** Low — one API call, display list.
 ---
 ### [ ] P0-7 · Room preview before joining (MSC3266)
 **Spec:** MSC3266, merged Matrix spec v1.15. Synapse supports it.  
 **What:** When a user follows a `matrix.to` link or is invited to a room they haven't joined, show a preview card:
 - Room avatar, name, topic, member count, join rule
 - "Join Room" / "Request to Join" (if knock) / "Accept Invite" button
 - "Back" option without joining
 Uses: `GET /_matrix/client/v1/rooms/{roomId}/summary`  
 **[AUDIT REQUIRED]** — Check if upstream Cinny already has a room preview screen before joining. Many Matrix clients have this. If Cinny has it, this is upstream and only Lotus-specific styling/improvements are needed.  
 **[SERVER CHECK]** — Verify `matrix.lotusguild.org` Synapse version supports the `/summary` endpoint.  
 **Where:** Likely in the routing/navigation layer when a room is selected but not joined.  
 **Complexity:** Low-medium.
 ---
 ### [ ] P0-8 · Personal room name overrides (MSC4431)
 **Spec:** MSC4431, in review.  
 **What:** Let a user rename a room locally — visible only to them. Stored in Matrix account data:
 ```
 PUT /_matrix/client/v3/user/{userId}/account_data/m.room_names
 Body: { "rooms": { "!roomId:server": "My Custom Name" } }
 ```
 Access via right-click on room in sidebar → "Rename for me…". Show a small edit icon next to locally-renamed rooms. The original room name remains unchanged for all other members.  
 **[SERVER CHECK]** — MSC4431 is still in review; it uses account data which is universally supported even if the MSC isn't finalized. The account data key name may change when merged.  
 **Where:** Room nav item context menu, sidebar room list rendering.  
 **Complexity:** Low.
 ---
 ### [ ] P0-9 · "Back to Latest" button
 **What:** A floating pill button that appears at the bottom of the room timeline when the user has scrolled up (away from the live timeline). Displays "↓ Jump to latest" (and shows unread count if applicable, e.g. "↓ 12 new messages"). Clicking scrolls to the live timeline bottom and hides the pill.  
 **[AUDIT REQUIRED]** — Confirm this does NOT already exist in upstream Cinny. Check `RoomTimeline.tsx` for any existing "scroll to bottom" UI — there is already a "Jump to Unread" chip (confirmed in code exploration); verify this is distinct.  
 **Where:** `src/app/features/room/RoomTimeline.tsx` — add a `TimelineFloat` element at the bottom, shown conditionally based on scroll position.  
 **Complexity:** Low.
 ---
 ### [ ] P0-10 · Mark all rooms as read
 **What:** A single action that sends read receipts for all rooms with unread counts, clearing every unread badge at once. Accessible via:
 - Right-click on the "Home" icon in the sidebar → "Mark all as read"
 - Or a button in the Home view header  
 Iterates all rooms with `room.getUnreadNotificationCount() > 0` and calls `mx.sendReadReceipt(room.getLastActiveTimestamp())` for each.  
 **[AUDIT REQUIRED]** — Confirm upstream Cinny does NOT already have this. Check sidebar context menus and Home view for any existing "mark all read" action.  
 **Where:** `src/app/pages/client/sidebar/HomeTab.tsx` context menu or `src/app/pages/client/home/Home.tsx` header.  
 **Complexity:** Low.
 ---
 ### [ ] P0-11 · Spoiler text audit and fix if broken
 **What:** The message composer toolbar has a spoiler mark (||spoiler text||). Verify the end-to-end flow:
 1. Composer correctly wraps text in `<span data-mx-spoiler>` in `formatted_body`
 2. Timeline renderer displays spoiler as blurred/hidden text with a "Reveal" click
 3. Mobile touch works for reveal  
 If any step is broken, fix it. If all working correctly, close this task with no changes.  
 **[AUDIT REQUIRED]** — Full code audit of spoiler mark in toolbar → event content → timeline renderer.  
 **Complexity:** Low (audit) — fix complexity TBD.
 ---
 ### [ ] P0-12 · URL Preview default settings + security warning
 **What:** In Settings → Privacy (or Messaging), the URL preview toggle should default to ON for both regular and encrypted rooms. Next to the encrypted-room toggle, add a one-sentence security note:
 > "URL previews in encrypted rooms are fetched by your homeserver, which sees the URL but not the message context."
 This matches Element's approach of informed consent rather than silent disabling.  
 **[AUDIT REQUIRED]** — Find where URL preview settings are stored in `settingsAtom`. Find the settings UI for URL previews. Confirm current defaults (may already be on by default for non-encrypted rooms).  
 **Where:** `src/app/state/settings.ts` (default values), `src/app/features/settings/` privacy/messaging panel.  
 **Complexity:** Low — wording + default value change.
 ---
 ## PRIORITY 1 — High value, moderate effort
 Core features that meaningfully expand what users can do every day.
 ---
 ### [ ] P1-1 · Quick Room Switcher (Ctrl+K / Cmd+K)
 **What:** Global keyboard shortcut opens a floating search modal above all content. Features:
 - Fuzzy-search across ALL rooms and DMs by display name in real time
 - Keyboard navigable: `↑`/`↓` to move, `Enter` to open room, `Esc` to close
 - Shows unread badge count inline next to each result
 - Pressing Ctrl+K again while open closes it
 - Recent rooms shown immediately before typing  
 **Architecture:**
 - New component: `src/app/components/QuickSwitcher.tsx`
 - Register global hotkey via `useEffect` + `window.addEventListener('keydown')` in `src/app/pages/client/ClientRoot.tsx`
 - Use the existing `OverlayContainerProvider` portal (from `App.tsx`) so the modal floats above everything
 - Room data: `allRoomsAtom` + `mDirectAtom` from `src/app/state/roomList.ts`
 - Style with `folds` `Menu`, `Box`, `Input` components matching existing patterns
 - Use `is-hotkey` library (already in the project) for the keybind  
 **[AUDIT REQUIRED]** — Confirm upstream Cinny does NOT already have a quick switcher. Check for any existing Ctrl+K handler in `ClientRoot.tsx` or `App.tsx`.  
 **Complexity:** Medium.
 ---
 ### [ ] P1-2 · Media Gallery
 **What:** A scrollable grid of all shared images, videos, and files in a room. Accessible via a new icon in the room header (picture/grid icon). Features:
 - Tab bar: Images | Videos | Files
 - Infinite scroll / paginated load via `GET /rooms/{roomId}/messages` filtering for `m.image`, `m.video`, `m.file` msgtypes
 - Click image → full-screen lightbox (upstream Cinny lightbox)
 - Click file → download
 - Shows sender + timestamp tooltip on hover
 - TDS-aware grid styling  
 **Architecture:**
 - New component: `src/app/features/room/media-gallery/MediaGallery.tsx`
 - Renders as a right-side drawer (similar to the members drawer pattern)
 - Add icon button to `src/app/features/room/RoomViewHeader.tsx`
 - Paginate backwards from latest event using `/messages?dir=b`  
 **[AUDIT REQUIRED]** — Confirm upstream Cinny has no existing media gallery or file browser. Check room header icons and room settings panels.  
 **Complexity:** Medium.
 ---
 ### [ ] P1-3 · Sidebar Room Filter / Search
 **What:** A text input at the top of each room list tab (Home, DMs, Spaces) that filters visible rooms in real time by display name. Ephemeral — clears when you switch tabs. No server calls — pure client-side filter over the loaded room list.  
 **Architecture:**
 - Add filter `useState<string>('')` to each tab component
 - Filter the room array before rendering: `rooms.filter(id => displayName(id).toLowerCase().includes(filter))`
 - Show a small `×` clear button when filter is non-empty
 - TDS: mono font, dim border input matching the design system  
 **Where:** `src/app/pages/client/home/Home.tsx` (Home tab), DMs equivalent, Space room list.  
 **[AUDIT REQUIRED]** — Confirm upstream Cinny does NOT already have a filter input in room lists.  
 **Complexity:** Low-Medium.
 ---
 ### [ ] P1-4 · Enhanced DM List (last message preview + timestamp)
 **What:** Show the last message text and relative timestamp ("2 min ago", "Yesterday") next to each DM in the sidebar, like iMessage or WhatsApp. Currently only the room name and unread badge are shown.  
 **Architecture:**
 - For each DM room: get `room.getLastActiveTimestamp()` and `room.timeline[room.timeline.length - 1]` for the last event
 - Render the event body (truncated to ~60 chars), stripping any HTML
 - Format timestamp: "just now" / "X min ago" / "Yesterday" / date
 - Falls back gracefully if the room has no messages yet  
 **[AUDIT REQUIRED]** — Check if upstream Cinny already shows message previews in DM list. Check `src/app/pages/client/direct-messages/` or `DirectTab.tsx` for existing DM list item rendering.  
 **Complexity:** Medium — need to extract last event body safely across encrypted/non-encrypted rooms.
 ---
 ### [ ] P1-5 · Voice Message Playback Speed Control
 **What:** Add a speed toggle to the voice message audio player in the room timeline: `0.75×` → `1×` → `1.5×` → `2×`. Clicking the current speed label cycles to the next. Uses the HTML `<audio>` element's `playbackRate` property.  
 **Architecture:**
 - `const [speed, setSpeed] = useState(1)`
 - On click: `audioRef.current.playbackRate = nextSpeed`
 - Render a small clickable pill: `1×` etc., next to the audio controls
 - Persist speed preference in `settingsAtom` so it carries across messages  
 **[AUDIT REQUIRED]** — Locate exactly where voice messages render in the timeline. Search for `m.audio` / `MSC3245` / `VoiceMessage` in `src/app/features/room/`. The recorder is in `VoiceMessageRecorder.tsx` but the *player* for received voice messages is elsewhere.  
 **Complexity:** Low-Medium.
 ---
 ### [ ] P1-6 · Poll Creation
 **What:** Users can create polls from the message composer. Features:
 - "Create Poll" toolbar button (poll icon) in `RoomInput.tsx`
 - Modal: question field (required) + 2–10 answer options (add/remove dynamically) + single vs. multiple choice toggle
 - Sends `m.poll.start` event (Matrix 1.7 stable format — same JSON we already render):
 ```json
 {
  "type": "m.poll.start",
  "content": {
    "m.poll": {
      "question": { "m.text": "..." },
      "answers": [{ "m.id": "uuid", "m.text": "Option 1" }, ...],
      "max_selections": 1
    }
  }
 }
 ```
 - `mx.sendEvent(roomId, 'm.poll.start', content)`  
 **Architecture:**
 - New component: `src/app/features/room/PollCreator.tsx`
 - Wire toolbar button into `src/app/features/room/RoomInput.tsx` (follow GIF picker pattern)  
 **Complexity:** Medium.
 ---
 ### [ ] P1-7 · Code Syntax Highlighting in Messages
 **What:** Color-code fenced code blocks in rendered messages. Language auto-detected from the code fence hint (` ```python `, ` ```js `, etc.).  
 **⚠️ MUST match `/root/code/web_template/base.css` exactly.** The web_template defines the canonical token structure for all Lotus apps:
 - `.lt-code-block` — container: `bg-secondary`, `border-dim` border
 - `.lt-code-header` — header bar with language label + copy button
  - `.lt-code-lang` — mono font, `accent-orange`, uppercase, 0.1em letter-spacing
  - `.lt-code-copy` — dim border/color; hover → cyan; `.copied` state → green
 - `.lt-code-block pre` — mono font, 0.8rem, 1.6 line-height, max-height 400px, scrollable
 - Syntax token classes (custom tokenizer, NOT highlight.js/Prism):
  - `.tok-kw` → `var(--accent-cyan)` (keywords)
  - `.tok-str` → `var(--accent-green)` (strings)
  - `.tok-num` → `var(--accent-orange)` (numbers)
  - `.tok-cmt` → `var(--color-tok-cmt)` italic (comments)
  - `.tok-fn` → `var(--accent-purple)` (function names)
 See `/root/code/tinker_tickets/assets/js/markdown.js` for the reference tokenizer implementation.  
 **[AUDIT REQUIRED]** — Check the TDS CSS variables (`--accent-cyan`, `--accent-green`, etc.) are available in Cinny's `lotus-terminal.css.ts` vanilla-extract theme. Map `var(--accent-*)` to the correct folds/vanilla-extract tokens. Also verify the tokenizer approach from tinker_tickets is language-agnostic enough for chat (it may need extension for more languages).  
 **Where:** Code block renderer in `src/app/components/message/` or wherever `<pre><code>` is rendered.  
 **Complexity:** Medium.
 ---
 ### [ ] P1-8 · Favorite / Starred Rooms
 **What:** Star any room from its context menu. Starred rooms appear in a dedicated "Favorites" section at the top of the sidebar room list. Uses Matrix's built-in `m.favourite` room tag (account data), so favorites sync across devices and clients automatically.  
 ```
 PUT /_matrix/client/v3/user/{userId}/rooms/{roomId}/tags/m.favourite
 Body: { "order": 0.5 }
 ```
 - Right-click room → "Add to Favorites" / "Remove from Favorites"
 - Favorites section appears above the regular room list in the Home tab
 - Star icon shown on favorited rooms in the list  
 **[AUDIT REQUIRED]** — Confirm upstream Cinny does NOT already render `m.favourite` tagged rooms in a special section. Check `src/app/pages/client/home/` for any tag-based room grouping. Some versions of Cinny may already do this.  
 **Complexity:** Medium.
 ---
 ### [ ] P1-9 · Invite Link Generator (with QR code)
 **What:** In room settings (or via right-click on room), a "Copy Invite Link" button that:
 1. Generates a `matrix.to` URL: `https://matrix.to/#/!roomId:server?via=matrix.lotusguild.org`
 2. Copies it to clipboard via `navigator.clipboard.writeText()`
 3. Shows a QR code of the link (use a lightweight QR library e.g. `qrcode` npm package)
 4. "Share" button that opens the native Web Share API if supported  
 **[AUDIT REQUIRED]** — Check if upstream Cinny already has a "copy invite link" button in room settings. Also check if the room settings panel already shows the room address/alias.  
 **Where:** Room settings panel `src/app/features/room-settings/` or room header context menu.  
 **Complexity:** Low-Medium.
 ---
 ### [ ] P1-10 · Private Read Receipts toggle
 **Spec:** CS-API stable — `m.read.private` vs `m.read`.  
 **What:** Add a toggle in Settings → Privacy: "Send private read receipts" — when enabled, read receipts are sent as `m.read.private` (only you and the server see them) instead of `m.read` (everyone in the room sees when you read). Default: public (current behavior, unchanged).  
 **Architecture:**
 - New `settingsAtom` field: `privateReadReceipts: boolean` (default `false`)
 - When sending a read receipt, check the setting and use the appropriate type
 - Find `mx.sendReadReceipt(...)` call sites and add the `receiptType` parameter  
 **[AUDIT REQUIRED]** — Verify the `matrix-js-sdk` version in use supports the `receiptType` parameter on `sendReadReceipt`. Check the SDK's type definitions for this method.  
 **Complexity:** Low.
 ---
 ### [ ] P1-11 · Knock-to-join UX (Room version 7)
 **Spec:** Room version 7 (stable Matrix spec). Join rule: `knock`.  
 **What:** Full knock UX for both sides:
 - **Knocking:** When a room's join rule is `knock`, show a "Request to Join" button instead of "Join Room". Sends `POST /join` which triggers a knock state event. Show pending state ("Request sent") while waiting.
 - **Approving knocks:** Room admins/mods see a notification of pending knocks. In the members drawer or room settings, show a "Pending Requests" section listing knockers with "Approve" (`/invite`) and "Deny" (`/kick`) buttons.  
 **[SERVER CHECK]** — Verify `matrix.lotusguild.org` Synapse supports room version 7 and the knock join rule.  
 **[AUDIT REQUIRED]** — Check if upstream Cinny handles the `knock` join rule at all. If it does, only the approvals UI on the admin side may be missing.  
 **Complexity:** Medium.
 ---
 ## PRIORITY 2 — Good value, medium effort or lower daily frequency
 ---
 ### [ ] P2-1 · Jump to Date
 **What:** A calendar date picker accessible from the room header (small calendar icon). Selecting a date navigates the timeline to the first message on or after that date.  
 API: `GET /_matrix/client/v1/rooms/{roomId}/timestamp_to_event?ts={epochMs}&dir=f`  
 Returns `{ event_id, origin_server_ts }`. Then scroll the timeline to that event ID using the existing `scrollToEventId` / virtual paginator logic.  
 **[SERVER CHECK]** — Verify `matrix.lotusguild.org` Synapse supports the `/timestamp_to_event` endpoint (added in Synapse 1.73 / Matrix spec v1.6).  
 **[AUDIT REQUIRED]** — Understand how `RoomTimeline.tsx` handles navigating to an arbitrary event ID that may not be in the current timeline window. The virtual paginator may need to fetch backwards to that event.  
 **Where:** `src/app/features/room/RoomViewHeader.tsx` (button), new `JumpToDate.tsx` component.  
 **Complexity:** Medium.
 ---
 ### [ ] P2-2 · Custom Notification Sounds
 **What:** Let users pick from a set of built-in notification sounds for mentions, messages, and DMs. Features:
 - Settings → Notifications: sound selector per category (Mention / Message / DM)
 - Each option has a preview "▶ Play" button
 - "None" option to disable sound for that category
 - 4–6 built-in sounds shipped as audio files in `public/sounds/`
 - Stored in `settingsAtom`  
 **Architecture:**
 - Add `notificationSounds: { mention: string, message: string, dm: string }` to `settingsAtom`
 - In `ClientNonUIFeatures.tsx` (where notification sounds are currently played), swap out the hardcoded sound URL for the settings value  
 **[AUDIT REQUIRED]** — Find exactly where notification sounds play in the codebase. Search for `new Audio(` or `.play()` in `src/app/`. Confirm how many distinct notification categories currently exist.  
 **Complexity:** Medium.
 ---
 ### [ ] P2-3 · Sort Non-Space Rooms on Home Page
 **What:** A sort control on the Home tab for orphan rooms (rooms not in any space). Options:
 - **Unread first** — rooms with unread messages appear at top
 - **Recent activity** — sort by `room.getLastActiveTimestamp()`
 - **Alphabetical** — sort by display name A→Z
 Persisted in `settingsAtom` as `homeRoomSortOrder: 'unread' | 'recent' | 'alpha'`. Default: `'recent'`.  
 **Note:** Space rooms are reordered by space admins via the Space Lobby — this only affects non-space orphan rooms on the Home tab.  
 **[AUDIT REQUIRED]** — Find where orphan rooms are listed on the Home tab. Confirm which hook/atom provides the room list (`useOrphanRooms()` in `roomList.ts`). Verify the sort is applied purely client-side with no server calls needed.  
 **Complexity:** Medium.
 ---
 ### [ ] P2-4 · Export Room History
 **What:** Export a room's messages to plain text, JSON, or HTML. Accessible from room settings (gear icon → "Export Room History"). Features:
 - Format selector: Plain Text / JSON / HTML
 - Date range filter (optional: all time or custom range)
 - Only exports messages where E2EE decryption keys are available locally
 - Shows progress bar for large rooms (batched `/messages` calls)
 - Downloads as a file via `URL.createObjectURL(blob)` + `<a download>`  
 **Note:** Element already has this feature — mention in the landing page comparison table once implemented.  
 **Landing page update:** Add "Export room history" row to `/root/code/matrix/landing/index.html` comparison table.  
 **[AUDIT REQUIRED]** — Confirm upstream Cinny does NOT have an export feature. Check room settings panels.  
 **Complexity:** Medium.
 ---
 ### [ ] P2-5 · Notification Quiet Hours
 **What:** Set a daily time window when browser notifications are suppressed (e.g., 11:00 PM – 8:00 AM). Toggle + start/end time pickers in Settings → Notifications.  
 **Architecture:**
 - New `settingsAtom` field: `quietHours: { enabled: boolean, start: string, end: string }` (times as "HH:MM" 24h strings)
 - In `ClientNonUIFeatures.tsx` or `SystemNotification.tsx`, before dispatching a browser `Notification`, check:
 ```ts
 function isQuietHours(settings): boolean {
  if (!settings.quietHours.enabled) return false;
  const now = new Date();
  const [sh, sm] = settings.quietHours.start.split(':').map(Number);
  const [eh, em] = settings.quietHours.end.split(':').map(Number);
  // handle overnight ranges (e.g. 23:00 – 07:00)
  ...
 }
 ```
 - Client-side only — does not touch Synapse push rules  
 **[AUDIT REQUIRED]** — Find the exact location in the codebase where browser `Notification` objects are created. Confirm no other code paths trigger sounds/notifications that also need to be suppressed.  
 **Complexity:** Medium.
 ---
 ### [ ] P2-6 · Room Activity / Moderation Log
 **What:** A filterable log of room state changes, accessible from room settings. Shows:
 - Member joins, leaves, kicks, bans, unbans
 - Power level changes ("@alice promoted to Moderator by @bob")
 - Room name / topic / avatar changes
 - Server ACL changes
 Filter controls: event type, date range, user. Sorted newest-first.  
 Fetches via `/rooms/{roomId}/messages?filter={"types":["m.room.member","m.room.power_levels",...]}` paginated backwards.  
 **[AUDIT REQUIRED]** — Check if upstream Cinny already has a room audit log. Also check if Synapse's admin API provides a richer audit log that could be used instead (admin only).  
 **Complexity:** Medium.
 ---
 ### [ ] P2-7 · Richer Link Preview Cards
 **What:** Expand URL preview cards beyond generic title/description/image:
 - **YouTube:** Show video thumbnail with a ▶ play overlay, channel name, duration
 - **GitHub:** Show repo name, description, star count, language badge, last updated
 - **Twitter/X:** Show avatar, handle, tweet text, likes/retweets (if metadata available)
 - **Generic improvement:** Better fallback when OG tags are missing  
 **Architecture:**
 - URL preview data comes from `GET /_matrix/media/v3/preview_url?url=...` (or the client-side oEmbed if homeserver doesn't provide enough data)
 - Detect URL domain/pattern and render a domain-specific card component  
 **[AUDIT REQUIRED]** — Check what data `/_matrix/media/v3/preview_url` returns for YouTube/GitHub links on `matrix.lotusguild.org`. The homeserver proxies this call — the richness depends on what metadata the target site exposes and what Synapse extracts. Test with real URLs before building domain-specific card logic.  
 **Complexity:** Medium.
 ---
 ### [ ] P2-8 · Extended Profile Fields (MSC4133 + MSC4175)
 **Spec:** MSC4133 + MSC4175, merged Matrix spec v1.16.  
 **What:** Support arbitrary profile fields. Specifically:
 - `m.tz` — IANA timezone string (e.g. `"America/New_York"`)
 - `m.pronouns` — user's pronouns (e.g. `"they/them"`)
 - Custom fields: job title, website  
 **Display:** Show set fields in the user profile panel/card.  
 **Set:** In Settings → Account → Profile, add input fields for each.  
 API: `PUT /_matrix/client/v3/profile/{userId}/{field_name}` / `GET /_matrix/client/v3/profile/{userId}`  
 **[SERVER CHECK]** — Verify `matrix.lotusguild.org` Synapse version supports MSC4133. This was merged in spec v1.16 (late 2025). May require a Synapse update if the server is running an older version.  
 **[AUDIT REQUIRED]** — Check if the `matrix-js-sdk` version in use exposes methods for getting/setting arbitrary profile fields beyond `displayname` and `avatar_url`. If not, use `mx.http.authedRequest()` directly.  
 **Complexity:** Medium.
 ---
 ### [ ] P2-9 · Show User Local Time in Profile (MSC4175)
 **Depends on:** P2-8 (Extended Profile Fields) — needs `m.tz` to be fetchable.  
 **What:** In user profile cards and the member list sidebar, when a user has `m.tz` set, display their current local time:
 - "Local time: 3:42 PM (UTC-5)"
 - Updates every minute via `setInterval`
 - Shows a small clock icon before the time  
 **[AUDIT REQUIRED]** — Depends on #P2-8 being implemented first. The `m.tz` field must be readable from the profile API.  
 **Complexity:** Low (once P2-8 is done).
 ---
 ### [ ] P2-10 · Unverified Device Warning on Send (off by default)
 **What:** Show a subtle warning in the composer area when a message will be sent to a room containing unverified devices. Features:
 - Off by default — toggled in Settings → Security ("Warn before sending to unverified devices")
 - When enabled: a small shield icon + "X unverified devices in this room" warning appears above the send button
 - User can click to see which devices, or dismiss and send anyway  
 **Architecture:**
 - Add `warnOnUnverifiedDevices: boolean` (default `false`) to `settingsAtom`
 - When setting is on, before rendering the composer, check room members' device trust via `mx.getCrypto()?.getUserDeviceInfo()` or equivalent
 - Do NOT block sending — just warn  
 **[AUDIT REQUIRED]** — Verify what the `matrix-js-sdk` (version in use) exposes for checking device verification status per room. The Crypto API varies significantly between SDK versions. This is the riskiest part of this feature.  
 **Complexity:** Medium.
 ---
 ### [ ] P2-11 · Full Push Rule Editor
 **Spec:** CS-API §13.13 (stable).  
 **What:** A dedicated page in Settings → Notifications showing the full push rule tree:
 - Override rules (highest priority)
 - Content rules (keyword matching)
 - Room rules (per-room overrides)
 - Sender rules (per-user overrides)
 - Underride rules (lowest priority)
 User can: create custom keyword rules, enable/disable any rule, set highlight/notify/silent action, delete custom rules.  
 API: `GET /_matrix/client/v3/pushrules/` / `PUT` / `DELETE` per rule.  
 **[AUDIT REQUIRED]** — Audit the existing notification settings UI in `src/app/features/settings/`. Confirm exactly which push rules are already exposed and which are missing. The per-room and global mute controls likely use push rules under the hood.  
 **Complexity:** Medium-High.
 ---
 ### [ ] P2-12 · Server ACL Viewer/Editor (m.room.server_acl)
 **Spec:** CS-API §13.8 (stable), `m.room.server_acl` state event.  
 **What:** In room settings (visible to admins/mods with sufficient power level), show the current server ACL:
 - List of allowed servers (wildcard patterns supported: `*.example.com`)
 - List of denied servers
 - Toggle: "Allow IP literal addresses" (default: false)
 - Add/remove server entries
 - Save sends `mx.sendStateEvent(roomId, 'm.room.server_acl', content)`  
 **[AUDIT REQUIRED]** — Confirm the required power level to change `m.room.server_acl` (typically 50 or 100). The UI should only render for users with sufficient power. Check if upstream Cinny exposes any ACL UI.  
 **Complexity:** Medium.
 ---
 ## PRIORITY 3 — Valuable but higher complexity or lower daily frequency
 ---
 ### [ ] P3-1 · Message Bookmarks / Saved Messages
 **What:** Save any message for later reference. Features:
 - "Bookmark" action in the message context menu
 - Saved to Matrix account data: `PUT /_matrix/client/v3/user/{userId}/account_data/io.lotus.bookmarks`
 - Structure: `{ bookmarks: [{ roomId, eventId, savedAt, previewText }] }`
 - Dedicated sidebar panel (new icon in sidebar nav): list of bookmarks with room name, message preview, timestamp, and "Jump to message" button
 - Remove bookmark from the panel or from the message context menu  
 **Architecture:**
 - New hook: `useBookmarks()` for read/write account data
 - New panel: `src/app/features/bookmarks/BookmarksPanel.tsx`
 - Add sidebar icon  
 **[AUDIT REQUIRED]** — Confirm upstream Cinny has no bookmark/saved messages feature.  
 **Complexity:** Medium-High.
 ---
 ### [ ] P3-2 · Message Scheduling / Send Later (MSC4140)
 **Spec:** MSC4140 (Delayed Events). Status: Synapse-stable, not yet in formal spec.  
 **First:** SSH to `compute-storage-01` → `pct exec 151 -- bash` (LXC 151 = Synapse) and check:
 ```bash
 grep -i "delayed\|msc4140" /etc/matrix-synapse/homeserver.yaml
 # Also check:
 curl -s https://matrix.lotusguild.org/_matrix/client/unstable/org.matrix.msc4140/delayed_events
 ```
 **If supported:** Implement send-later UI:
 - Hold send button (or right-click → "Schedule…") to open a date/time picker
 - On confirm: `POST /_matrix/client/unstable/org.matrix.msc4140/rooms/{roomId}/send/{eventType}?delay={ms}`
 - Scheduled messages appear in a "Scheduled" tray in the composer area
 - Can be cancelled before they fire via the MSC4140 cancel endpoint  
 **If not supported:** Either enable it in Synapse homeserver.yaml, or implement client-side localStorage queue as a fallback.  
 **[SERVER CHECK]** — The Synapse audit above is REQUIRED before any implementation work.  
 **Complexity:** Medium (if server supports) / High (if needs server config change + client fallback).
 ---
 ### [ ] P3-3 · File Upload Compression (opt-in)
 **What:** Before uploading images, present the user with an explicit choice:
 - Checkbox: "Compress image before uploading"
 - Detail text: "Reduces file size and loads faster for everyone. May slightly reduce quality."
 - Show: Original size (e.g. "4.2 MB") → Compressed size estimate (e.g. "~380 KB")
 - Show: Original dimensions if downsizing  
 User must explicitly check the box — compression is NEVER automatic.  
 **Architecture:**
 - Use browser Canvas API: `canvas.toBlob(cb, 'image/jpeg', 0.82)` for compression
 - Show before/after sizes in the upload preview UI
 - Only applies to JPEG and PNG; skip for GIF, SVG, WebP  
 **[AUDIT REQUIRED]** — Find where image upload preview currently shows in `RoomInput.tsx`. The compression step needs to insert between "file selected" and "upload confirmed".  
 **Complexity:** Medium.
 ---
 ### [ ] P3-4 · Accessibility Improvements (WCAG 2.1 AA)
 **What:** Comprehensive audit and fix pass targeting the critical user paths:
 - Room list navigation (keyboard-only)
 - Reading messages in the timeline (screen reader announces new messages)
 - Composing and sending a reply
 - Opening and closing modals (focus trap, return focus)
 - ARIA labels on all icon-only buttons  
 **Scope:** Do NOT attempt to make every corner of the app AA-compliant in one pass — focus on the golden path (open app → find room → read → reply → send).  
 **[AUDIT REQUIRED]** — Run an automated audit first: `npx axe-core` or browser DevTools accessibility tree. Document every violation before writing a single line of code. Prioritize by severity (critical > serious > moderate).  
 **Complexity:** Medium-High (audit is the main work).
 ---
 ### [ ] P3-5 · Inline GIF Preview for Giphy/Tenor Links
 **[AUDIT REQUIRED — DO THIS FIRST]** — Before any implementation, verify the current behavior:
 1. Paste a Giphy URL (e.g. `https://giphy.com/gifs/...`) into the Lotus Chat composer and send it
 2. Does it auto-embed as an animated GIF, or render as a plain URL preview card?
 3. Repeat for Tenor URLs  
 **If already auto-embedding:** Close this task — it's handled by the existing URL preview pipeline.  
 **If not:** Detect Giphy/Tenor URL patterns in the URL preview renderer and fetch the GIF via the homeserver's `/_matrix/media/v3/preview_url` proxy. If the proxy returns a direct media URL, render it as an `<img>` tag with `loading="lazy"`.  
 **Complexity:** Low-Medium (after audit).
 ---
 ### [ ] P3-6 · Configurable Composer Toolbar
 **What:** Let users rearrange or hide individual composer toolbar buttons (GIF, Sticker, Emoji, File, Voice, Location). Changes stored in `settingsAtom`. Access via a small "⚙ Customize toolbar" option in toolbar overflow.  
 **[AUDIT REQUIRED]** — Audit the current toolbar button rendering in `RoomInput.tsx`. Understand the layout system (is it a fixed array or already mapped from config?). Drag-to-reorder may require a DnD library; consider whether reorder is worth the complexity vs just toggle-visibility.  
 **Complexity:** Medium-High (drag reorder adds significant complexity).
 ---
 ### [ ] P3-7 · Room Stats / Insights Panel (opt-in)
 **What:** An opt-in statistics panel in room settings ("Room Insights" tab). Shows:
 - Total cached message count
 - Top 5 most active members (by message count in local cache)
 - Top 5 most used reactions
 - Media files shared (count by type)
 - Activity heatmap (messages per hour of day)  
 **Important:** This panel must be explicitly opened — not shown by default. Do not make it the first tab or visible on room settings open.  
 Derived entirely from locally cached events — no server queries beyond what's already loaded.  
 **[AUDIT REQUIRED]** — Confirm the local Matrix SDK cache exposes enough event history to make the stats meaningful (depends on how many events are cached). Very small caches will show misleading data.  
 **Complexity:** Medium.
 ---
 ### [ ] P3-8 · Thread Panel (full side drawer)
 **⚠️ LARGEST FEATURE — requires its own planning session before implementation.**  
 **What:** A right-side drawer for threaded conversations. Currently "Reply in Thread" exists but there is no panel to read or write thread replies.  
 Features:
 - Click "Reply in Thread" → opens thread drawer on the right
 - Thread root event shown at the top of the panel
 - Full message rendering for all in-thread replies (reuse timeline components)
 - Reply input at the bottom (full composer with formatting, emoji, etc.)
 - Unread count badge on the thread button in the main timeline
 - Keyboard shortcut to close thread panel  
 **Architecture:**
 - New Jotai atom: `activeThreadEventId: string | null`
 - New component: `src/app/features/room/thread/ThreadPanel.tsx`
 - Rendered alongside `RoomView` as a conditional right panel (mirror the members drawer pattern)
 - Filter events in timeline to `m.thread` relation for the active root event ID
 - Shares the same `mx` client and room reference as the main timeline  
 **[AUDIT REQUIRED]** — Deeply audit how `m.thread` relation events are currently stored and retrieved in the matrix-js-sdk. Understand the thread aggregation API: `GET /rooms/{roomId}/relations/{eventId}/m.thread`. Check if `RoomTimeline.tsx` currently filters out thread replies from the main timeline (it should — confirm).  
 **Complexity:** High.
 ---
 ### [ ] P3-9 · Policy List / Ban List Subscription UI
 **Spec:** CS-API §13.16 (stable), `m.policy.*` events.  
 **Note:** User already has Draupnir bot running in all space rooms — this UI complements rather than replaces it.  
 **What:** A panel in room/space settings (admin-only) showing:
 - Currently subscribed policy list rooms
 - Contents of each list: banned users, banned rooms, banned servers (with reason)
 - "Subscribe" / "Unsubscribe" actions
 - Does NOT implement enforcement — Draupnir handles that  
 **[AUDIT REQUIRED]** — Understand how Draupnir reads policy lists on this homeserver. Confirm whether a client-side subscription UI would conflict with or duplicate Draupnir's configuration. May be more useful as a read-only viewer than a write UI.  
 **Complexity:** High.
 ---
 ## PRIORITY 4 — Specialized, high complexity, or very low priority
 ---
 ### [ ] P4-1 · Thread Notification Mode Per-Thread (MSC3771)
 **Spec:** MSC3771 (stable). Depends on Thread Panel (#P3-8).  
 **What:** Per-thread notification toggle: "All messages" vs "Mentions only". Accessible from the thread panel header. Tracks unread counts separately per thread.  
 **[AUDIT REQUIRED]** — Implement after Thread Panel. Requires understanding how the SDK tracks per-thread unread counts.  
 **Complexity:** Medium (after thread panel exists).
 ---
 ### [ ] P4-2 · Thread Subscriptions (MSC4306)
 **Spec:** MSC4306 (Synapse experimental). Depends on Thread Panel (#P3-8).  
 **What:** "Follow thread" button to receive notifications for a thread you haven't posted in. Uses MSC4306 subscription endpoint.  
 **[SERVER CHECK]** — Verify `matrix.lotusguild.org` supports MSC4306. It is Synapse-experimental and may not be enabled.  
 **Complexity:** Medium (after thread panel exists).
 ---
 ### [ ] P4-3 · Knock-to-join Notifications for Admins
 **Note:** The basic knock-to-join UX is covered in P1-11. This task adds the admin notification side.  
 **What:** Space/room admins see a notification badge when there are pending knock requests. A "Pending Join Requests" section in the members drawer or room settings. Approve (invite) or deny (kick) each knock.  
 **Complexity:** Medium.
 ---
 ### [ ] P4-4 · Math / LaTeX Rendering in Messages (LOW PRIORITY)
 **Spec:** CS-API §11.5 (stable) — `formatted_body` can contain LaTeX.  
 **What:** Render `$...$` or `$$...$$` LaTeX expressions in message bodies. Use KaTeX (lightweight, ~100KB, renders server-side-compatible CSS). Must gracefully fall back to raw LaTeX text if KaTeX fails.  
 **Note:** This is LOW PRIORITY — only useful for academic/technical communities. Implement last.  
 **[AUDIT REQUIRED]** — Confirm KaTeX bundle size impact on the Vite bundle. Check if matrix-js-sdk's HTML sanitizer strips LaTeX before it reaches the renderer. The formatted_body sanitization pipeline is the main risk here.  
 **Complexity:** Low-Medium.
 ---
 ### [ ] P4-5 · Live Location Sharing (MSC3489 + MSC3672) (LOW PRIORITY, HIGH COMPLEXITY)
 **Spec:** MSC3489 + MSC3672. Implemented in Element Web.  
 **Note:** Static location sharing is already implemented. This adds live/real-time GPS beacons. Very low priority per user preference.  
 **What:** Start sharing live location → creates `m.beacon_info` state event → client posts `m.beacon` events on a timer → other users see your position update live on a map.  
 **[SERVER CHECK]** — Verify MSC3489 support on `matrix.lotusguild.org`.  
 **Complexity:** High. Requires background geolocation API + live map rendering.
 ---
 ### [ ] P4-6 · OIDC / SSO Next-Gen Auth (MSC3861) (EXTREME COMPLEXITY, LOW PRIORITY)
 **Spec:** MSC3861, merged Matrix spec v1.15. Uses Matrix Authentication Service (MAS).  
 **Context:** ~80% of homeserver users have LLDAP/Authelia/SSO accounts. SSO is currently enabled on `matrix.lotusguild.org` but accounts are not yet linked. This would allow users to log in via their SSO credentials.  
 **What:** OAuth 2.0 / OIDC login flow, token refresh, account management page linking Matrix identity to SSO identity.  
 **EXTREME COMPLEXITY** — requires: MAS deployment/configuration on the homeserver, significant auth flow changes in the client, token refresh handling, session management overhaul.  
 **[SERVER CHECK]** — Before any client work, audit whether MAS is already deployed on `compute-storage-01`. Check: `pct exec 151 -- systemctl status matrix-authentication-service` or similar.  
 **Complexity:** Extreme. Multi-sprint project. Plan separately.
 ---
 ## PRIORITY 5 — Gamer / Aesthetic / Customization features
 ---
 ### [!] BUG · Drag-and-drop file overlay doesn't dismiss on hover-away
 **Confirmed bug** — drag a file over the window without dropping: the drop overlay persists.  
 **Fix:** Ensure `dragleave` fires correctly at the window/document level. Child element boundaries can cause spurious `dragleave` — use a counter or `relatedTarget` check.  
 **[AUDIT REQUIRED]** Find the drag-and-drop overlay component in `RoomInput.tsx` or the room view. Confirm the exact event listener structure.  
 **Complexity:** Low (bug fix).
 ---
 ### [ ] P5-1 · Custom Accent Color Picker (non-TDS mode only)
 **What:** A hex/HSL color picker in Settings → Appearance. Chosen color replaces the primary accent throughout the UI: buttons, badges, active states, highlights, presence dot, links. Applied via a CSS custom property override injected into `<head>`.  
 **IMPORTANT:** This feature is completely inactive when TDS is enabled — TDS has its own fixed palette. Add this setting under a "Non-TDS Themes" section that is hidden when TDS is active.  
 **[AUDIT REQUIRED]** Identify all CSS custom properties that constitute the "accent color" in non-TDS mode. Map them to the folds/vanilla-extract token names.  
 **Complexity:** Medium.
 ---
 ### [ ] P5-2 · Additional Color Theme Presets
 **What:** 5 new one-click theme presets alongside TDS. Each must be a complete, polished system with proper contrast ratios (WCAG AA). All implemented as vanilla-extract themes matching the existing TDS pattern.  
 Themes:
 1. **Cyberpunk** — deep navy bg (`#0a0015`), electric purple (`#bf5fff`) + hot pink (`#ff2d9b`) accents, neon glow
 2. **Ocean** — deep sea blue bg (`#020b18`), teal (`#00c9b1`) + aqua (`#0096d6`) accents, soft feel
 3. **Blood Red** — near-black bg (`#0d0203`), deep crimson (`#7a0010`) + bright red (`#ff2233`) accents
 4. **Classic Matrix** — pure black bg (`#000000`), phosphor green (`#00ff41`) text + accents
 5. **Midnight** — dark charcoal (`#111827`), cool blue-grey (`#6b7ca8`) accents, clean minimal  
 **[AUDIT REQUIRED]** Study `src/lotus-terminal.css.ts` for the full token list before designing themes. All tokens must be covered.  
 **Complexity:** Medium (design effort is the main cost).
 ---
 ### [ ] P5-3 · Glassmorphism Sidebar Toggle
 **What:** Semi-transparent sidebar + panels with `backdrop-filter: blur(12px)`. Toggled in Settings → Appearance. Off by default. Best combined with animated wallpapers.  
 **[AUDIT REQUIRED]** Check whether `backdrop-filter` works on sidebar elements given the current z-index stack and CSS transforms. Some browsers require `will-change` or specific stacking context to allow blur through.  
 **Complexity:** Low-Medium.
 ---
 ### [ ] P5-4 · Animated Chat Backgrounds (CSS-animated wallpapers)
 **What:** 5 new animated wallpaper options in the chat background picker:
 1. **Matrix Digital Rain** — falling character columns (green characters, CSS animation)
 2. **Drifting Stars** — slow-moving particle field (CSS dots)
 3. **Aurora Borealis** — slow shifting gradient waves (purple/green/cyan)
 4. **Grid Pulse** — expanding ring pulses on a dark grid
 5. **Fireflies** — slow drifting glowing dots  
 All pure CSS animations (keyframes + transforms) — no canvas, GPU-accelerated. Include a "Pause animations" toggle for accessibility. Colors adapt to active theme accent variables.  
 **[AUDIT REQUIRED]** Study how existing wallpapers are applied in `lotus-terminal.css.ts` to extend the system correctly.  
 **Complexity:** Medium.
 ---
 ### [ ] P5-5 · Night Light / Blue Light Filter
 **What:** Warm orange overlay `rgba(255, 140, 0, 0.12)` on the full UI. `position:fixed; inset:0; pointer-events:none; z-index:9999`. Intensity slider (0–30%) in Settings → Appearance. Optional: auto-activate after a set hour. Stored in `settingsAtom`.  
 **Complexity:** Low.
 ---
 ### [ ] P5-6 · Channel / Room Emoji Prefix Support
 **What:** Render a leading emoji in a room name slightly larger in the sidebar for visual impact (e.g. 🎮 general). Optional: right-click room → "Set channel emoji" shortcut for admins.  
 **Note:** Matrix room names already support Unicode — this is purely a rendering enhancement.  
 **[AUDIT REQUIRED]** Confirm upstream Cinny doesn't strip or truncate leading emoji in sidebar room name display. Also confirm emoji in room names works end-to-end on `matrix.lotusguild.org`.  
 **Complexity:** Low.
 ---
 ### [ ] P5-7 · In-App Notification Toast Redesign (TDS mode only)
 **What:** Slim dark card sliding in from bottom-right: user avatar, display name (orange), truncated message preview, room name (dim), × dismiss. 4-second auto-dismiss. TDS variables only — non-TDS keeps existing behavior.  
 **[AUDIT REQUIRED]** Find where in-app notification toasts are currently rendered in `src/app/`. May be in `ClientNonUIFeatures.tsx`.  
 **Complexity:** Medium.
 ---
 ### [ ] P5-8 · Mention Highlight Animation
 **What:** Brief pulse/glow animation (0.4–0.6s ease-out) on incoming @mention messages. CSS keyframe: scale 1.0 → 1.005 → 1.0 + background glow pulse. Only fires on new incoming messages, not on page load. Respects `prefers-reduced-motion`.  
 **[AUDIT REQUIRED]** Find where mentioned messages receive their highlight class in the timeline. Verify animation doesn't affect scroll position.  
 **Complexity:** Low.
 ---
 ### [ ] P5-9 · LFG (Looking for Group) Slash Command
 **What:** `/lfg` generates a formatted LFG post visible on ALL Matrix clients using standard `m.room.message` HTML. Fields: Game, Players Needed, Platform, Skill Level, Description, DM link. Other clients see clean formatted HTML; Lotus Chat renders an enhanced styled card.  
 **[AUDIT REQUIRED]** Test which HTML tags survive Matrix HTML sanitization on Element/FluffyChat before designing the card structure. Test with minimal HTML.  
 **Complexity:** Medium.
 ---
 ### [ ] P5-10 · Voice Channel User Limit
 **What:** Admins set max participants via custom state event `io.lotus.voice_limit: { max_users: N }`. Show "Channel Full (5/5)" to users over the limit. Local enforcement only.  
 **[AUDIT REQUIRED]** Check if Element Call has its own participant limit that should be integrated with rather than duplicated.  
 **Complexity:** Medium.
 ---
 ### [ ] P5-11 · AFK / Idle Auto-Mute in Voice
 **What:** Auto-mute mic after X minutes of silence (detected via Web Audio AnalyserNode). Show "You were auto-muted due to inactivity" toast with click-to-unmute. Admin-configurable via `io.lotus.afk_timeout` state event. Disableable in Settings → Calls.  
 **[AUDIT REQUIRED]** Verify auto-mute must go through the same CallControl bridge as manual mute.  
 **Complexity:** Medium.
 ---
 ### [ ] P5-12 · Seasonal / Event Themes
 **What:** Automatic + manually toggleable seasonal overlays with CSS particle effects and accent color variants:
 - **Halloween** (Oct 15–Nov 1): purple particles, orange accents, spider web pattern
 - **Christmas** (Dec 10–Jan 2): snow fall, red/green accents, snowflake pattern
 - **New Year** (Dec 31–Jan 1): firework burst animation, gold accents
 - **Pride** (June): rainbow gradient accent cycle  
 All toggleable manually in Settings → Appearance regardless of date. Respects `prefers-reduced-motion`.  
 **[AUDIT REQUIRED]** Design against existing CSS animation system in `lotus-terminal.css.ts`.  
 **Complexity:** Medium.
 ---
 ### [ ] P5-13 · Avatar Frame / Border Decorations
 **What:** Decorative CSS rings/frames rendered around user avatars. Built-in options: TDS Glow (animated orange pulsing), Cyberpunk (rotating gradient), Minimal (thin ring), Gold (supporter cosmetic). Stored in Matrix account data `io.lotus.avatar_frame`. Only visible in Lotus Chat.  
 **[AUDIT REQUIRED]** Verify folds Avatar component allows overlay decoration without breaking child-type constraints (see previous white-circle avatar bug).  
 **Complexity:** Medium.
 ---
 ### [ ] P5-14 · Animated Avatar Overlay Decorations (Discord-style)
 **What:** Animated WebM/GIF overlays that float around avatars (transparent center showing avatar). Curated built-in set OR user-uploaded mxc:// overlay. Stored in account data. Only Lotus Chat users see them.  
 **[AUDIT REQUIRED]** See #P5-13 audit. Also decide: curated set only vs user-uploadable.  
 **Complexity:** Medium.
 ---
 ### [ ] P5-15 · In-Call Soundboard
 **What:** Grid of short audio clips playable into the call audio stream via Web Audio API (AudioBufferSourceNode → MediaStreamDestinationNode → mixed with mic). Built-in clips + user-uploadable custom clips (stored as mxc://). Accessible from call controls bar.  
 **[AUDIT REQUIRED]** Verify the Element Call integration exposes the mic MediaStream for mixing. This is the highest-risk part of this feature.  
 **Complexity:** High.
 ---
 ### [ ] P5-16 · Custom Join / Leave Sound Effects
 **What:** Local-only sounds when participants join/leave a call you're in. Built-in options + per-user settable. Detect via Element Call participant list change events.  
 **[AUDIT REQUIRED]** Find how Element Call exposes join/leave participant events to the parent window via postMessage bridge.  
 **Complexity:** Medium.
 ---
 ### [ ] P5-17 · Quick Emoji Reaction Bar (Hover Shortcut)
 **What:** Floating mini-bar of 5 most recent reactions above the hover toolbar. One-click react. 6th button opens full emoji board.  
 **[AUDIT REQUIRED]** Find the message hover toolbar in `Message.tsx` and confirm how to inject an additional row without breaking layout. Confirm recent emoji tracking mechanism in EmojiBoard.  
 **Complexity:** Medium.
 ---
 ### [ ] P5-18 · Status-Based Avatar Border Color
 **What:** Colored ring on avatars matching presence: green (online), yellow (idle), red (DND), grey (offline). Subtle 2px CSS box-shadow/border. Applied across all avatar sizes.  
 **[AUDIT REQUIRED]** Check existing `PresenceBadge` component — this extends that concept to the avatar border. Verify folds Avatar allows border/shadow styling.  
 **Complexity:** Low-Medium.
 ---
 ### [ ] P5-19 · Collapsible Long Messages ('Read more')
 **What:** Messages >~20 lines auto-collapsed with "Read more ↓" button. Click to expand inline. Collapse threshold configurable in settings.  
 **[AUDIT REQUIRED]** Determine whether CSS `max-height` + `overflow:hidden` or a line-count approach is more appropriate for the current message renderer. Check edge cases with code blocks and media embeds.  
 **Complexity:** Medium.
 ---
 ### [ ] P5-20 · Quick Reply from Browser Notification
 **What:** Inline reply field in browser notification toasts via Notification Actions API. Reply sends as threaded reply to the triggering message.  
 **[AUDIT REQUIRED]** (1) Verify browser Notification Actions API support in target browsers. (2) This requires a Service Worker to handle the reply event — confirm if Lotus Chat has one or needs one.  
 **Complexity:** Medium-High.
 ---
 ### [ ] P5-21 · Custom @Mention Highlight Color
 **What:** Each user sets their own mention highlight color in Settings → Appearance. Applied as `--user-mention-color` CSS property override on mention-highlighted message rows.  
 **Complexity:** Low.
 ---
 ### [ ] P5-22 · Font Selector for the UI
 **What:** Font picker in Settings → Appearance. Options: JetBrains Mono, Inter, Geist, Fira Code, OpenDyslexic, System Default. Applied via CSS custom property overrides.  
 **[AUDIT REQUIRED]** Check if any fonts are already globally loaded to avoid double-loading.  
 **Complexity:** Low-Medium.
 ---
 ### [ ] P5-23 · Message Send Animation
 **What:** Own sent messages fade+scale into the timeline (0.15s ease-out: scale 0.97→1.0, opacity 0.4→1.0). Incoming messages unaffected. Respects `prefers-reduced-motion`.  
 **Complexity:** Low.
 ---
 ### [ ] P5-24 · Hotkey Push-to-Deafen
 **What:** Configurable hotkey (default Ctrl+Shift+D) to toggle deafen. Shows "DEAFENED" badge in call bar. Configurable in Settings → Calls alongside PTT keybind.  
 **[AUDIT REQUIRED]** Confirm Element Call widget bridge exposes speaker/audio-output control separately from microphone control.  
 **Complexity:** Medium.
 ---
 ### [ ] P5-25 · Message Length Counter in Composer
 **What:** Character counter near send button. Hidden <500 chars. Shows at 500+ (neutral), orange at 2000+, red at 3500+. TDS mono font styling.  
 **Complexity:** Low.
 ---
 ### [ ] P5-26 · Right-Click Room Context Menu Improvements
 **What:** Consolidated right-click menu: Mute with duration submenu (15min/1hr/8hr/24hr/Indefinite), Copy room link, Mark as read, Leave room, Room settings.  
 **[AUDIT REQUIRED]** Audit current right-click menu to avoid duplicating existing actions.  
 **Complexity:** Low-Medium.
 ---
 ### [ ] P5-27 · Notification Profile Presets (Gaming / Work / Sleep)
 **What:** Saved presets that change all notification settings atomically. Gaming (mentions only), Work (DMs + mentions), Sleep (all off). Quick-switch from sidebar or settings.  
 **Complexity:** Medium.
 ---
 ## AUDITS PENDING
 Tasks that require investigation before any implementation:
 ### [ ] Audit-1 · Suggested rooms in Space Lobby (may be upstream)
 Check `src/app/pages/client/space/` and space room list components for `m.space.child` `suggested: true` handling. If upstream Cinny already shows suggested rooms, close this task.
 ### [ ] Audit-2 · Room upgrade / tombstone UX (may be upstream)
 Search `RoomTimeline.tsx` and event renderers for `m.room.tombstone` handling. If upstream Cinny already shows a "room upgraded" banner and disables the composer, close this task.
 ### [ ] Audit-3 · Profile banner image — Matrix protocol support
 Research whether Matrix spec or MSC4133 (v1.16) defines a standard profile banner field. If no cross-client standard exists, do not implement. Report findings.
 ### [ ] Audit-4 · Visual speaking indicator in voice calls
 Check Element Call participant UI and Cinny call view for existing speaking indicator. If present, determine if TDS styling is needed. If absent, implement animated speaking ring.
 ---
 ## IMPLEMENTATION NOTES
 ### Design Rules (non-negotiable)
 - All TDS (Lotus Terminal theme) styling must come from `/root/code/web_template/base.css` CSS variables and token classes — do NOT invent new colors or patterns
 - All new components must respect both TDS dark and TDS light modes
 - Code syntax highlighting token classes: `.tok-kw .tok-str .tok-num .tok-cmt .tok-fn` (see web_template)
 - Reference implementation for patterns: `/root/code/tinker_tickets/`
 ### CI/CD Pipeline
 ```
 edit → commit → git push origin lotus
 → Gitea Actions: tsc --noEmit, eslint, prettier (~3 min)
 → Webhook: lotus_deploy.sh on LXC 106 polls CI, then npm ci && npm run build → rsync
 → Live at chat.lotusguild.org (~11 min total)
 ```
 ### Per-Feature Checklist (before marking complete)
 - [ ] `npx tsc --noEmit` — zero TypeScript errors
 - [ ] `npx eslint src/` — zero new errors (warnings OK if pre-existing)
 - [ ] `npx prettier --check src/` — formatting passes
 - [ ] `README.md` updated (Lotus-custom features only — not upstream Cinny features)
 - [ ] `landing/index.html` updated if the feature appears in the comparison table
 - [ ] Visually tested at `chat.lotusguild.org` after CI deploys
 ### Homeserver Access (for server audits)
 - **Synapse (Matrix):** LXC 151 on `compute-storage-01` — `pct exec 151 -- bash`
 - **Config:** `/etc/matrix-synapse/homeserver.yaml`
 - **Version check:** `curl -s https://matrix.lotusguild.org/_matrix/client/versions`
@@ -1,111 +1,192 @@
-# Cinny
+# Lotus Chat
 <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>
-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.
+A Matrix client for [Lotus Guild](https://lotusguild.org) — forked from [Cinny](https://github.com/cinnyapp/cinny) v4.12.1.
 - [Roadmap](https://github.com/orgs/cinnyapp/projects/1)
 - [Contributing](./CONTRIBUTING.md)
-<img align="center" src="https://raw.githubusercontent.com/cinnyapp/cinny-site/main/assets/preview2-light.png" height="380">
+Deployed at [chat.lotusguild.org](https://chat.lotusguild.org).
-## 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.
-You can also download our desktop app from the [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).
+## Changes from upstream Cinny
-## Self-hosting
+### Branding & Identity
 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).
-* The default homeservers and explore pages are defined in [`config.json`](config.json).
+- 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
-* 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).
+### LotusGuild Terminal Design System (TDS) v1.2
    * 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.
-* To deploy on subdirectory, you need to rebuild the app youself after updating the `base` path in [`build.config.ts`](build.config.ts).
+A full custom theme engine layered on top of Cinny's vanilla-extract theming:
    * For example, if you want to deploy on `https://cinny.in/app`, then set `base: '/app'`.
-<details><summary><b>PGP Public Key to verify tarball</b></summary>
+**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
-```
+**Light mode** (`LotusTerminalLightTheme`):
-----BEGIN PGP PUBLIC KEY BLOCK-----
+- 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
-mQGNBGJw/g0BDAC8qQeLqDMzYzfPyOmRlHVEoguVTo+eo1aVdQH2X7OELdjjBlyj
+**Chat Backgrounds** (20+ custom patterns, all TDS-aware):
-6d6c1adv/uF2g83NNMoQY7GEeHjRnXE4m8kYSaarb840pxrYUagDc0dAbJOGaCBY
+- Blueprint grid, carbon fiber, starfield, topographic contours, herringbone, crosshatch
-FKTo7U1Kvg0vdiaRuus0pvc1NVdXSxRNQbFXBSwduD+zn66TI3HfcEHNN62FG1cE
+- Chevron, polka dots, triangles, plaid
-K1jWDwLAU0P3kKmj8+CAc3h9ZklPu0k/+t5bf/LJkvdBJAUzGZpehbPL5f3u3BZ0
+- All patterns use CSS custom properties — adapt to both TDS dark and light themes
-leZLIrR8uV7PiV5jKFahxlKR5KQHld8qQm+qVhYbUzpuMBGmh419I6UvTzxuRcvU
+- Settings toggle for showing per-message sender profiles
 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>
-## Local development
+### Voice / Video Call Improvements
 > [!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).
-Execute the following commands to start a development server:
+- **Element Call 0.19.4**: Upgraded from 0.16.3. Dist copied to `public/element-call/` by vite at build time.
-```sh
+- **Camera default OFF**: Camera no longer persists across sessions via localStorage. Always starts disabled. Optional `cameraOnJoin` setting for explicit opt-in.
-npm ci # Installs all dependencies
+- **Deafen button**: Tooltip corrected to "Deafen" / "Undeafen" (was "Turn Off Sound" / "Turn On Sound")
-npm start # Serve a development version
+- **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.
 - **Call embed positioning**: `useCallEmbedPlacementSync` uses `getBoundingClientRect()` (not `offsetTop/Left`) for accurate viewport-relative coordinates on the `position:fixed` container. Position is synced immediately on mount via `useEffect` in addition to the ResizeObserver, so the embed is placed correctly the instant the call view renders. The `[pipMode, callVisible]` effect in `CallEmbedProvider` only clears pip-specific styles when actually exiting pip mode — no longer clobbers the position set by `syncCallEmbedPlacement` on every `callVisible` toggle.
 - **Dark mode in element-call**: After joining, `CallEmbed.applyStyles()` injects `:root { color-scheme: dark|light }` into the iframe document so `@media (prefers-color-scheme)` rules inside element-call resolve to the correct Cinny theme regardless of the OS system preference. `themeKind` is stored on the `CallEmbed` instance and updated on every `setTheme()` call, so live theme switching also re-injects the CSS. Without this, users with OS light mode would see a white background even when Cinny is in dark mode.
 - **Call embed wallpaper**: The user's `chatBackground` pattern (Blueprint, Carbon, Stars…) is applied as the `backgroundImage`/`backgroundColor` of `div[data-call-embed-container]` when the call is in full view (not PiP). The iframe `html, body` is forced to `background: none !important` so the pattern shows through. When `chatBackground` is `none`, behaviour is unchanged.
 ### 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.
 - **Draft persistence**: Unsent message drafts survive page reload via `localStorage` (`draft-msg-<roomId>`). Jotai in-memory atom is primary; localStorage is used as fallback on reload and cleared on send.
 - **Message search date range**: From/To date pickers in the search filter bar. Sends `from_ts`/`to_ts` epoch ms to the Matrix `/search` endpoint. Chip shows active range with X to clear.
 - **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`.
 ### Presence
 - **Discord-style presence selector**: Clicking your avatar in the bottom-left sidebar opens a popout with five status options — Online (green), Idle (yellow), Do Not Disturb (red, broadcasts `unavailable` with `status_msg: 'dnd'`), Invisible (grey outline, broadcasts `offline`), and Auto (activity-tracking, the original behaviour). The selected status persists across reloads via the settings atom. A colored badge on the avatar reflects the current status at a glance. `usePresenceUpdater` short-circuits immediately for manual modes; full idle-timer and visibility-change logic only runs in Auto mode. Settings also exposed via `src/app/state/settings.ts` (`presenceStatus` field).
 - **Custom status message**: Set a short status text (up to 64 characters) with an emoji picker, shown below your display name in member lists and presence displays. Accessible via Settings → Account → Profile. Includes an **auto-clear timer** (options: 30 minutes, 1 hour, 4 hours, 1 day, 3 days, 7 days) — after the timer expires, the status is automatically cleared by setting `status_msg: ''` via `mx.setPresence`. A character counter (shown when ≥ 56/64 chars) prevents overflow. Implemented in `src/app/features/settings/account/Profile.tsx`.
 - **Presence badges on members**: Online/busy/away dots shown next to users in the room members drawer and settings members panel (`PresenceBadge` component from `src/app/components/presence/Presence.tsx`).
 - **Document title unread count**: Tab title updates to `(N) Lotus Chat` for mentions, `· Lotus Chat` for unreads, `Lotus Chat` when clear.
 ### 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.
 - **Rolldown CJS interop — millify**: `src/app/plugins/millify.ts` uses a named import (`import { millify as millifyPlugin } from 'millify'`) instead of a default import. Rolldown's `__toESM` helper with `mode=1` sets `a.default = module_object` (not the function itself) when `hasOwnProperty` prevents the copy — calling `millifyPlugin()` would throw `(0, zc.default) is not a function`. Named import bypasses the interop entirely.
 - **Sentry noise filter**: `ignoreErrors: ['Request timed out']` added to `Sentry.init` in `src/index.tsx` to suppress unhandled rejections from the matrixRTC delayed-event heartbeat (matrix-sdk) and the widget PostmessageTransport initial-load race (matrix-widget-api). Neither is actionable from client code.
 ---
 ## Build
 ```bash
 npm ci
 npm run build   # outputs to dist/
 ```
-To build the app:
+Vite's render-chunks phase requires ~6 GB Node heap. If OOM killed, set:
-```sh
+```bash
-npm run build # Compiles the app into the dist/ directory
+NODE_OPTIONS=--max_old_space_size=6144 npm run build
 ```
-### Running with Docker
+## Development workflow
-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:
+All code changes should be made in the local clone at `/root/code/cinny` on the dev box, then committed and pushed to `origin/lotus`. The CI/CD pipeline handles everything from there — no manual build or deploy steps needed.
 ```
-docker build -t cinny:latest .
+edit → commit → git push    # ~11 minutes → auto-deployed to chat.lotusguild.org
 ```
-You can then run the container you've built with a command similar to this:
+Pipeline (`.gitea/workflows/ci.yml` + `lotus_deploy.sh` on LXC 106):
-```
+1. Push triggers a Gitea Actions build — TypeScript check, ESLint, Prettier, bundle size report
-docker run -p 8080:80 cinny:latest
+2. Build must pass as the CI gate; quality checks are informational (`continue-on-error`)
 3. A Gitea webhook fires `lotus_deploy.sh` on LXC 106, which polls the API until CI passes (up to 15 min), then pulls `origin/lotus`, runs `npm ci && npm run build`, and rsyncs to `/var/www/html/`
 LXC 106's stored Gitea credential is **read-only** — it can only pull. Pushes must be done from the dev box with your personal credentials (entered manually, never cached).
 ## 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>"
 }
 ```
-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`.
+## Key Custom Files
 | 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, call wallpaper carry-over |
 | `src/app/plugins/call/CallEmbed.ts` | EC widget bridge: iframe setup, `color-scheme` dark/light injection, built-in control hiding, theme sync |
 | `src/app/plugins/millify.ts` | Named import fix for Rolldown CJS interop (prevents `zc.default is not a function` crash) |
@@ -1,31 +1,16 @@
 {
-  "defaultHomeserver": 1,
+  "defaultHomeserver": 0,
-  "homeserverList": ["converser.eu", "matrix.org", "mozilla.org", "unredacted.org", "xmr.se"],
+  "homeserverList": ["matrix.lotusguild.org"],
-  "allowCustomHomeservers": true,
+  "allowCustomHomeservers": false,
  "featuredCommunities": {
    "openAsDefault": false,
-    "spaces": [
+    "spaces": [],
-      "#cinny-space:matrix.org",
+    "rooms": [],
-      "#community:matrix.org",
+    "servers": []
      "#space:unredacted.org",
      "#science-space:matrix.org",
      "#libregaming-games:tchncs.de",
      "#mathematics-on:matrix.org"
    ],
    "rooms": [
      "#cinny:matrix.org",
      "#freesoftware:matrix.org",
      "#pcapdroid:matrix.org",
      "#gentoo:matrix.org",
      "#PrivSec.dev:arcticfoxes.net",
      "#disroot:aria-net.org"
    ],
    "servers": ["matrix.org", "mozilla.org", "unredacted.org"]
  },
  "hashRouter": {
    "enabled": false,
    "basename": "/"
-  }
+  },
  "gifApiKey": "AqqDuQwZNjYttz7Mn6ME4JH1bJIuZ5CO"
 }
@@ -0,0 +1,126 @@
 import { FlatCompat } from '@eslint/eslintrc';
 import js from '@eslint/js';
 import tsPlugin from '@typescript-eslint/eslint-plugin';
 import tsParser from '@typescript-eslint/parser';
 import reactPlugin from 'eslint-plugin-react';
 import reactHooksPlugin from 'eslint-plugin-react-hooks';
 import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
 import eslintConfigPrettier from 'eslint-config-prettier';
 import globals from 'globals';
 import path from 'path';
 import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: js.configs.recommended,
  allConfig: js.configs.all,
 });
 export default [
  { ignores: ['node_modules/**', 'dist/**', 'experiment/**'] },
  js.configs.recommended,
  tsPlugin.configs['flat/eslint-recommended'],
  ...tsPlugin.configs['flat/recommended'],
  reactPlugin.configs.flat.recommended,
  reactHooksPlugin.configs.flat['recommended'],
  // Register jsx-a11y plugin (rules selectively enabled below)
  { plugins: { 'jsx-a11y': jsxA11yPlugin } },
  // airbnb-base via FlatCompat (JS/import rules; no React plugin, no getFilename issue)
  ...compat.extends('airbnb-base'),
  eslintConfigPrettier,
  {
    languageOptions: {
      parser: tsParser,
      globals: {
        ...globals.browser,
        ...globals.es2021,
        JSX: 'readonly',
      },
      parserOptions: {
        ecmaFeatures: { jsx: true },
        ecmaVersion: 'latest',
        sourceType: 'module',
      },
    },
    settings: {
      react: {
        version: '18.2.0',
      },
    },
    rules: {
      'linebreak-style': 0,
      'no-unused-vars': 'off', // handled by @typescript-eslint/no-unused-vars
      'no-underscore-dangle': 0,
      'no-shadow': 'off',
      // Stylistic rules — off for this codebase
      'no-console': 'off',
      'no-continue': 'off',
      'no-nested-ternary': 'off',
      'no-plusplus': 'off',
      'no-param-reassign': 'off',
      'no-restricted-syntax': 'off',
      'no-restricted-globals': 'off',
      'no-constant-condition': 'off',
      'prefer-destructuring': 'off',
      'no-useless-assignment': 'off',
      'preserve-caught-error': 'off',
      'consistent-return': 'off',
      'no-use-before-define': 'off',
      'import/prefer-default-export': 'off',
      'import/extensions': 'off',
      'import/no-unresolved': 'off',
      'import/no-extraneous-dependencies': [
        'error',
        {
          devDependencies: true,
        },
      ],
      'react/no-unstable-nested-components': ['error', { allowAsProps: true }],
      'react/jsx-filename-extension': [
        'error',
        {
          extensions: ['.tsx', '.jsx'],
        },
      ],
      'react/display-name': 'off',
      'react/require-default-props': 'off',
      'react/jsx-props-no-spreading': 'off',
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'error',
      // React Compiler rules added in react-hooks v7 — disabled until React Compiler is adopted
      'react-hooks/react-compiler': 'off',
      'react-hooks/incompatible-library': 'off',
      'react-hooks/refs': 'off',
      'react-hooks/set-state-in-effect': 'off',
      'react-hooks/set-state-in-render': 'off',
      'react-hooks/immutability': 'off',
      'react-hooks/purity': 'off',
      'react-hooks/use-memo': 'off',
      '@typescript-eslint/no-unused-vars': [
        'error',
        { argsIgnorePattern: '^_', varsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' },
      ],
      '@typescript-eslint/no-shadow': 'error',
      '@typescript-eslint/no-explicit-any': 'warn',
      // jsx-a11y — media captions not required for this app
      'jsx-a11y/media-has-caption': 'off',
      'jsx-a11y/no-noninteractive-element-interactions': 'off',
      'jsx-a11y/alt-text': 'off',
    },
  },
  {
    files: ['**/*.ts', '**/*.tsx'],
    rules: {
      'no-undef': 'off',
    },
  },
 ];
@@ -1,36 +1,44 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <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" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Cinny</title>
+    <title>Lotus Chat</title>
-    <meta name="name" content="Cinny" />
+    <meta name="name" content="Lotus Chat" />
-    <meta name="author" content="Ajay Bura" />
+    <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"
    />
    <meta name="keywords" content="lotus chat, lotus guild, matrix, matrix client" />
-    <meta property="og:title" content="Cinny" />
+    <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://cinny.in" />
+    <meta property="og:title" content="Lotus Chat" />
-    <meta property="og:image" content="https://cinny.in/assets/favicon-48x48.png" />
+    <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="application-name" content="Lotus Chat" />
-    <meta name="apple-mobile-web-app-title" content="Cinny" />
+    <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",
+  "name": "lotus-chat",
-  "version": "4.11.0",
+  "version": "4.12.2-lotus",
-  "description": "Yet another matrix client",
+  "description": "Lotus Chat — Matrix client for Lotus Guild",
  "main": "index.js",
  "type": "module",
  "engines": {
@@ -11,103 +11,135 @@
    "start": "vite",
    "build": "vite build",
    "preview": "vite preview",
-    "lint": "yarn check:eslint && yarn check:prettier",
+    "lint": "npm run check:eslint && npm run check:prettier",
    "check:eslint": "eslint src/*",
    "check:prettier": "prettier --check .",
    "fix:prettier": "prettier --write .",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
    "prepare": "husky",
    "commit": "git-cz",
    "postinstall": "node scripts/patch-folds.mjs"
  },
  "lint-staged": {
    "*.{ts,tsx,js,jsx}": "eslint",
    "*": "prettier --ignore-unknown --write"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "keywords": [],
  "author": "Ajay Bura",
  "license": "AGPL-3.0-only",
  "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "1.1.6",
+    "@atlaskit/pragmatic-drag-and-drop": "1.8.1",
-    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.5",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
-    "@fontsource/inter": "4.5.14",
+    "@eslint/eslintrc": "3.3.5",
-    "@tanstack/react-query": "5.24.1",
+    "@eslint/js": "10.0.1",
-    "@tanstack/react-query-devtools": "5.24.1",
+    "@fontsource-variable/inter": "5.2.8",
-    "@tanstack/react-virtual": "3.2.0",
+    "@giphy/js-fetch-api": "5.8.0",
-    "@vanilla-extract/css": "1.9.3",
+    "@giphy/js-types": "5.1.0",
-    "@vanilla-extract/recipes": "0.3.0",
+    "@giphy/js-util": "5.2.0",
-    "@vanilla-extract/vite-plugin": "3.7.1",
+    "@giphy/react-components": "10.1.2",
    "@sentry/react": "10.53.1",
    "@tanstack/react-query": "5.100.13",
    "@tanstack/react-query-devtools": "5.100.13",
    "@tanstack/react-virtual": "3.13.25",
    "@types/dompurify": "3.2.0",
    "await-to-js": "3.0.0",
    "badwords-list": "2.0.1-4",
-    "blurhash": "2.0.4",
+    "blurhash": "2.0.5",
    "browser-encrypt-attachment": "0.3.0",
-    "chroma-js": "3.1.2",
+    "chroma-js": "3.2.0",
-    "classnames": "2.3.2",
+    "classnames": "2.5.1",
    "dateformat": "5.0.3",
-    "dayjs": "1.11.10",
+    "dayjs": "1.11.20",
-    "domhandler": "5.0.3",
+    "domhandler": "6.0.1",
-    "emojibase": "15.3.1",
+    "dompurify": "3.4.5",
-    "emojibase-data": "15.3.2",
+    "emojibase": "17.0.0",
    "emojibase-data": "17.0.0",
    "file-saver": "2.0.5",
-    "focus-trap-react": "10.0.2",
+    "focus-trap-react": "12.0.2",
    "folds": "2.6.2",
-    "html-dom-parser": "4.0.0",
+    "globals": "17.6.0",
-    "html-react-parser": "4.2.0",
+    "html-dom-parser": "7.1.0",
-    "i18next": "23.12.2",
+    "html-react-parser": "6.1.2",
-    "i18next-browser-languagedetector": "8.0.0",
+    "i18next": "26.2.0",
-    "i18next-http-backend": "2.5.2",
+    "i18next-browser-languagedetector": "8.2.1",
-    "immer": "9.0.16",
+    "i18next-http-backend": "4.0.0",
    "immer": "11.1.8",
    "is-hotkey": "0.2.0",
-    "jotai": "2.6.0",
+    "jotai": "2.20.0",
-    "linkify-react": "4.3.2",
+    "linkify-react": "4.3.3",
-    "linkifyjs": "4.3.2",
+    "linkifyjs": "4.3.3",
-    "matrix-js-sdk": "38.2.0",
+    "lodash": "4.18.1",
-    "matrix-widget-api": "1.13.0",
+    "matrix-js-sdk": "41.6.0-rc.0",
    "matrix-widget-api": "1.17.0",
    "millify": "6.1.0",
-    "pdfjs-dist": "4.2.67",
+    "pdfjs-dist": "5.7.284",
    "prismjs": "1.30.0",
-    "react": "18.2.0",
+    "react": "19.2.6",
-    "react-aria": "3.29.1",
+    "react-aria": "3.48.0",
-    "react-blurhash": "0.2.0",
+    "react-blurhash": "0.3.0",
-    "react-colorful": "5.6.1",
+    "react-colorful": "5.7.0",
-    "react-dom": "18.2.0",
+    "react-dom": "19.2.6",
-    "react-error-boundary": "4.0.13",
+    "react-error-boundary": "6.1.1",
-    "react-google-recaptcha": "2.1.0",
+    "react-google-recaptcha": "3.1.0",
-    "react-i18next": "15.0.0",
+    "react-i18next": "17.0.8",
-    "react-range": "1.8.14",
+    "react-range": "1.10.0",
-    "react-router-dom": "6.30.3",
+    "react-router-dom": "7.15.1",
-    "sanitize-html": "2.12.1",
+    "sanitize-html": "2.17.4",
-    "slate": "0.112.0",
+    "slate": "0.124.1",
-    "slate-dom": "0.112.2",
+    "slate-dom": "0.124.1",
-    "slate-history": "0.110.3",
+    "slate-history": "0.113.1",
-    "slate-react": "0.112.1",
+    "slate-react": "0.124.2",
-    "ua-parser-js": "1.0.35"
+    "styled-components": "6.4.2",
    "ua-parser-js": "2.0.10"
  },
  "devDependencies": {
-    "@element-hq/element-call-embedded": "0.16.3",
+    "@element-hq/element-call-embedded": "0.19.4",
-    "@esbuild-plugins/node-globals-polyfill": "0.2.3",
+    "@rollup/plugin-inject": "5.0.5",
-    "@rollup/plugin-inject": "5.0.3",
+    "@rollup/plugin-wasm": "6.2.2",
-    "@rollup/plugin-wasm": "6.1.1",
+    "@sentry/vite-plugin": "5.3.0",
-    "@types/chroma-js": "3.1.1",
+    "@types/chroma-js": "3.1.2",
-    "@types/file-saver": "2.0.5",
+    "@types/file-saver": "2.0.7",
    "@types/is-hotkey": "0.1.10",
-    "@types/node": "18.11.18",
+    "@types/node": "25.9.1",
-    "@types/prismjs": "1.26.0",
+    "@types/prismjs": "1.26.6",
-    "@types/react": "18.2.39",
+    "@types/react": "19.2.15",
-    "@types/react-dom": "18.2.17",
+    "@types/react-dom": "19.2.3",
-    "@types/react-google-recaptcha": "2.1.8",
+    "@types/react-google-recaptcha": "2.1.9",
-    "@types/sanitize-html": "2.9.0",
+    "@types/sanitize-html": "2.16.1",
-    "@types/ua-parser-js": "0.7.36",
+    "@types/ua-parser-js": "0.7.39",
-    "@typescript-eslint/eslint-plugin": "5.46.1",
+    "@typescript-eslint/eslint-plugin": "8.59.4",
-    "@typescript-eslint/parser": "5.46.1",
+    "@typescript-eslint/parser": "8.59.4",
-    "@vitejs/plugin-react": "4.2.0",
+    "@vanilla-extract/css": "1.20.1",
    "@vanilla-extract/recipes": "0.5.7",
    "@vanilla-extract/vite-plugin": "5.2.2",
    "@vitejs/plugin-react": "6.0.2",
    "buffer": "6.0.3",
-    "eslint": "8.29.0",
+    "cz-conventional-changelog": "3.3.0",
    "eslint": "9.39.4",
    "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "8.5.0",
+    "eslint-config-prettier": "10.1.8",
-    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-jsx-a11y": "6.6.1",
+    "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-react": "7.31.11",
+    "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-hooks": "7.1.1",
-    "prettier": "2.8.1",
+    "husky": "9.1.7",
-    "typescript": "4.9.4",
+    "lint-staged": "17.0.5",
-    "vite": "5.4.19",
+    "prettier": "3.8.3",
-    "vite-plugin-pwa": "0.20.5",
+    "typescript": "6.0.3",
-    "vite-plugin-static-copy": "1.0.4",
+    "vite": "8.0.14",
-    "vite-plugin-top-level-await": "1.4.4"
+    "vite-plugin-pwa": "1.3.0",
    "vite-plugin-static-copy": "4.1.0"
  },
  "overrides": {
    "@giphy/js-util": {
      "dompurify": ">=3.3.4"
    },
    "js-cookie": ">=3.0.6"
  }
 }
@@ -0,0 +1,16 @@
 {
  "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",
+  "name": "Lotus Chat",
-  "short_name": "Cinny",
+  "short_name": "Lotus Chat",
-  "description": "Yet another matrix client",
+  "description": "Lotus Chat \u2014 the Lotus Guild Matrix client",
  "dir": "auto",
  "lang": "en-US",
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "./",
-  "background_color": "#fff",
+  "background_color": "#0a0a0a",
-  "theme_color": "#fff",
+  "theme_color": "#980000",
  "icons": [
    {
      "src": "./public/android/android-chrome-36x36.png",
@@ -55,5 +55,20 @@
      "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">
+<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2707_1961)">
+  <g fill="#980000" fill-opacity="0.88">
-<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="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(0,9,9)"/>
-<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 d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(45,9,9)"/>
-<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="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(90,9,9)"/>
-<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"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(135,9,9)"/>
-</g>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(180,9,9)"/>
-<defs>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(225,9,9)"/>
-<clipPath id="clip0_2707_1961">
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(270,9,9)"/>
-<rect width="18" height="18" fill="white"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(315,9,9)"/>
-</clipPath>
+  </g>
-</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">
+<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2707_2015)">
+  <g fill="#980000" fill-opacity="0.88">
-<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="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(0,9,9)"/>
-<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 d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(45,9,9)"/>
-<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="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(90,9,9)"/>
-<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"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(135,9,9)"/>
-</g>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(180,9,9)"/>
-<defs>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(225,9,9)"/>
-<clipPath id="clip0_2707_2015">
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(270,9,9)"/>
-<rect width="18" height="18" fill="white"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(315,9,9)"/>
-</clipPath>
+  </g>
-</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 viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<svg version="1.1"
+  <g fill="#980000" fill-opacity="0.88">
-	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(0,9,9)"/>
-	 x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(45,9,9)"/>
-<defs>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(90,9,9)"/>
-</defs>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(135,9,9)"/>
-<g>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(180,9,9)"/>
-	<g>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(225,9,9)"/>
-		<circle fill="#FFFFFF" cx="9" cy="9" r="8.5"/>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(270,9,9)"/>
-	</g>
+  <path d="M9,9 Q6.4,4.8 9,1.2 Q11.6,4.8 9,9Z" transform="rotate(315,9,9)"/>
-	<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
+  <circle cx="9" cy="9" r="2.2" fill="#cc2000"/>
 			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>
 </g>
 </svg>
@@ -0,0 +1,26 @@
 import { readFileSync, writeFileSync } from 'fs';
 import { fileURLToPath } from 'url';
 import { join, dirname } from 'path';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const foldsPath = join(__dirname, '../node_modules/folds/dist/index.js');
 try {
  let content = readFileSync(foldsPath, 'utf8');
  // Defensive guard: if src is not a function, render null instead of crashing
  const original = 'children: src(filled)';
  const patched = 'children: typeof src === "function" ? src(filled) : null';
  if (content.includes(patched)) {
    console.log('folds patch already applied.');
  } else if (content.includes(original)) {
    content = content.replace(original, patched);
    writeFileSync(foldsPath, content, 'utf8');
    console.log('Applied defensive Icon src guard to folds.');
  } else {
    console.warn('Warning: folds Icon patch target not found - may need updating.');
  }
 } catch (e) {
  console.warn('Warning: Could not patch folds:', e.message);
 }
@@ -0,0 +1,48 @@
 import fs from 'fs';
 import path from 'path';
 import { execSync } from 'child_process';
 import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const version = process.argv[2];
 if (!version) {
  console.error('Version argument missing');
  process.exit(1);
 }
 const root = path.resolve(__dirname, '..');
 const newVersionTag = `v${version}`;
 // Update package.json + package-lock.json safely
 execSync(`npm version ${version} --no-git-tag-version`, {
  cwd: root,
  stdio: 'inherit',
 });
 console.log(`Updated package.json and package-lock.json → ${version}`);
 // Update UI version references
 const files = [
  'src/app/features/settings/about/About.tsx',
  'src/app/pages/auth/AuthFooter.tsx',
  'src/app/pages/client/WelcomePage.tsx',
 ];
 files.forEach((filePath) => {
  const absPath = path.join(root, filePath);
  if (!fs.existsSync(absPath)) {
    console.warn(`File not found: ${filePath}`);
    return;
  }
  const content = fs.readFileSync(absPath, 'utf8');
  const updated = content.replace(/v\d+\.\d+\.\d+/g, newVersionTag);
  fs.writeFileSync(absPath, updated);
  console.log(`Updated ${filePath} → ${newVersionTag}`);
 });
@@ -54,7 +54,7 @@ function AccountDataEdit({
  const { handleKeyDown, operations, getTarget } = useTextAreaCodeEditor(
    textAreaRef,
-    EDITOR_INTENT_SPACE_COUNT
+    EDITOR_INTENT_SPACE_COUNT,
  );
  const [submitState, submit] = useAsyncCallback<void, MatrixError, [string, object]>(submitChange);
@@ -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',
          }}
@@ -276,7 +278,7 @@ export function AccountDataEditor({
  const contentJSONStr = useMemo(
    () => JSON.stringify(data.content, null, EDITOR_INTENT_SPACE_COUNT),
-    [data.content]
+    [data.content],
  );
  return (
@@ -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>
@@ -45,11 +45,11 @@ export function AuthFlowsLoader({ fallback, error, children }: AuthFlowsLoaderPr
      };
      return authFlows;
-    }, [mx])
+    }, [mx]),
  );
  useEffect(() => {
-    load();
+    load().catch(() => {});
  }, [load]);
  if (state.status === AsyncStatus.Idle || state.status === AsyncStatus.Loading) {
@@ -0,0 +1,71 @@
 import React, { useId } from 'react';
 export function AuthSkeleton() {
  const id = useId().replace(/:/g, '');
  const shimmerKeyframes = `
    @keyframes shimmer-${id} {
      0%   { background-position: -400px 0; }
      100% { background-position: 400px 0; }
    }
  `;
  const shimmer = {
    background:
      'linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%)',
    backgroundSize: '800px 100%',
    animation: `shimmer-${id} 1.6s ease-in-out infinite`,
    borderRadius: '4px',
  } as React.CSSProperties;
  return (
    <>
      <style>{shimmerKeyframes}</style>
      <div
        style={
          {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            minHeight: '100dvh',
            padding: '16px',
            '--skeleton-base': 'color-mix(in srgb, currentColor 8%, transparent)',
            '--skeleton-shine': 'color-mix(in srgb, currentColor 15%, transparent)',
          } as React.CSSProperties
        }
      >
        {/* Card */}
        <div
          style={{
            width: '100%',
            maxWidth: '360px',
            display: 'flex',
            flexDirection: 'column',
            gap: '24px',
          }}
        >
          {/* Logo + app name */}
          <div
            style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '12px' }}
          >
            <div style={{ ...shimmer, width: '64px', height: '64px', borderRadius: '50%' }} />
            <div style={{ ...shimmer, width: '100px', height: '20px' }} />
          </div>
          {/* Server picker */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
            <div style={{ ...shimmer, width: '80px', height: '12px' }} />
            <div style={{ ...shimmer, width: '100%', height: '40px', borderRadius: '8px' }} />
          </div>
          {/* Form fields */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
            <div style={{ ...shimmer, width: '100%', height: '40px', borderRadius: '8px' }} />
            <div style={{ ...shimmer, width: '100%', height: '40px', borderRadius: '8px' }} />
            <div style={{ ...shimmer, width: '100%', height: '40px', borderRadius: '8px' }} />
          </div>
        </div>
      </div>
    </>
  );
 }
@@ -24,7 +24,7 @@ export function BackRouteHandler({ children }: BackRouteHandlerProps) {
          caseSensitive: true,
          end: false,
        },
-        location.pathname
+        location.pathname,
      )
    ) {
      navigate(getHomePath());
@@ -37,7 +37,7 @@ export function BackRouteHandler({ children }: BackRouteHandlerProps) {
          caseSensitive: true,
          end: false,
        },
-        location.pathname
+        location.pathname,
      )
    ) {
      navigate(getDirectPath());
@@ -49,7 +49,7 @@ export function BackRouteHandler({ children }: BackRouteHandlerProps) {
        caseSensitive: true,
        end: false,
      },
-      location.pathname
+      location.pathname,
    );
    const encodedSpaceIdOrAlias = spaceMatch?.params.spaceIdOrAlias;
    const decodedSpaceIdOrAlias =
@@ -66,7 +66,7 @@ export function BackRouteHandler({ children }: BackRouteHandlerProps) {
          caseSensitive: true,
          end: false,
        },
-        location.pathname
+        location.pathname,
      )
    ) {
      navigate(getExplorePath());
@@ -79,7 +79,7 @@ export function BackRouteHandler({ children }: BackRouteHandlerProps) {
          caseSensitive: true,
          end: false,
        },
-        location.pathname
+        location.pathname,
      )
    ) {
      navigate(getInboxPath());
@@ -157,7 +157,7 @@ export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
          setRestoreProgress(progress);
        },
      });
-    }, [crypto, setRestoreProgress])
+    }, [crypto, setRestoreProgress]),
  );
  const handleRestore = () => {
@@ -178,6 +178,7 @@ export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
          )}
          <IconButton
            aria-pressed={!!menuCords}
            aria-label="Backup options"
            size="300"
            variant="Surface"
            radii="300"
@@ -1,6 +1,30 @@
-import React, { ReactNode, useCallback, useRef } from 'react';
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { config } from 'folds';
+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,
@@ -8,11 +32,360 @@ import {
  useCallJoined,
  useCallThemeSync,
  useCallMemberSoundSync,
  useCallStart,
 } from '../hooks/useCallEmbed';
 import { callChatAtom, callEmbedAtom } from '../state/callEmbed';
-import { CallEmbed } from '../plugins/call';
+import { CallEmbed, useCallControlState } 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, getMxIdLocalPart } from '../utils/matrix';
 import { RoomAvatar, RoomIcon } from './room-avatar';
 import { useRoomNavigate } from '../hooks/useRoomNavigate';
 import { getChatBg } from '../features/lotus/chatBackground';
 import { useTheme, ThemeKind } from '../hooks/useTheme';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
 import { getStateEvent, getMemberDisplayName } from '../utils/room';
 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(
      (members) => {
        if (members.length === 0) {
          onIgnore();
        }
      },
      [onIgnore],
    ),
  );
  const playSound = useCallback(() => {
    const audioElement = audioRef.current;
    audioElement?.play().catch(() => undefined);
  }, []);
  useEffect(() => {
    const audioEl = audioRef.current;
    if (info.notificationType === 'ring') {
      playSound();
    }
    return () => {
      if (audioEl) {
        audioEl.pause();
        audioEl.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">
                      {info.intent === 'video' ? 'Incoming Video Call' : 'Incoming Voice 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={dm ? 'Critical' : 'Secondary'}
                    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);
@@ -23,7 +396,7 @@ function CallUtils({ embed }: { embed: CallEmbed }) {
    embed,
    useCallback(() => {
      setCallEmbed(undefined);
-    }, [setCallEmbed])
+    }, [setCallEmbed]),
  );
  return null;
@@ -34,7 +407,7 @@ type CallEmbedProviderProps = {
 };
 export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
  const callEmbed = useAtomValue(callEmbedAtom);
-  const callEmbedRef = useRef<HTMLDivElement>(null);
+  const callEmbedRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
  const joined = useCallJoined(callEmbed);
  const selectedRoom = useSelectedRoom();
@@ -42,13 +415,341 @@ 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 { screenshare: pipScreenshare } = useCallControlState(callEmbed?.control);
  // Sync pip mode into CallControl so it can adjust behavior accordingly
  useEffect(() => {
    if (!callEmbed) return;
    callEmbed.control.setPipMode(!!pipMode);
  }, [pipMode, callEmbed]);
  // When entering pip with screenshare active (or screenshare starts while in pip),
  // enable spotlight so the screenshare fills the pip window.
  // When screenshare ends, release the spotlight we auto-enabled.
  const pipAutoSpotlightRef = React.useRef(false);
  useEffect(() => {
    if (!pipMode || !callEmbed) return;
    if (pipScreenshare) {
      if (!callEmbed.control.spotlight) {
        callEmbed.control.toggleSpotlight();
        pipAutoSpotlightRef.current = true;
      }
    } else if (pipAutoSpotlightRef.current) {
      if (callEmbed.control.spotlight) callEmbed.control.toggleSpotlight();
      pipAutoSpotlightRef.current = false;
    }
  }, [pipMode, pipScreenshare, callEmbed]);
  const theme = useTheme();
  const isDark = theme.kind === ThemeKind.Dark;
  const [chatBackground] = useSetting(settingsAtom, 'chatBackground');
  const wallpaperStyle = React.useMemo(
    () => getChatBg(chatBackground, isDark),
    [chatBackground, isDark],
  );
  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 entering/exiting pip
  const prevPipModeRef = React.useRef(false);
  React.useEffect(() => {
    const el = callEmbedRef.current;
    if (!el) return;
    const wasInPip = prevPipModeRef.current;
    prevPipModeRef.current = !!pipMode;
    if (pipMode) {
      if (!wasInPip) {
        const saved = localStorage.getItem('pip-position');
        const savedPos = saved ? (JSON.parse(saved) as { left: number; top: number }) : null;
        el.style.right = 'auto';
        el.style.bottom = 'auto';
        if (savedPos) {
          el.style.left = `${Math.max(0, Math.min(savedPos.left, window.innerWidth - 280))}px`;
          el.style.top = `${Math.max(0, Math.min(savedPos.top, window.innerHeight - 158))}px`;
        } else {
          el.style.left = `${window.innerWidth - 280 - 16}px`;
          el.style.top = `${window.innerHeight - 158 - 72}px`;
        }
        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 {
      if (wasInPip) {
        // Exiting pip: clear all pip styles; syncCallEmbedPlacement will restore correct position
        el.style.top = '';
        el.style.left = '';
        el.style.bottom = '';
        el.style.right = '';
        el.style.width = '';
        el.style.height = '';
        el.style.borderRadius = '';
        el.style.overflow = '';
        el.style.zIndex = '';
        el.style.boxShadow = '';
        el.style.border = '';
      }
      // syncCallEmbedPlacement owns top/left/width/height; don't clear them on visibility changes
      el.style.visibility = callVisible ? '' : 'hidden';
    }
  }, [pipMode, callVisible]);
  React.useEffect(() => {
    if (!pipMode) return;
    const onPipWindowResize = (): void => {
      const el = callEmbedRef.current;
      if (!el) return;
      // Normalise bottom/right → top/left so clamp math works regardless of initial position.
      if (!el.style.left || el.style.left === 'auto') normaliseToTopLeft(el);
      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 handlePipDoubleClick = (e: React.MouseEvent) => {
    const el = callEmbedRef.current;
    if (!el) return;
    e.stopPropagation();
    const margin = 16;
    const w = el.offsetWidth;
    const h = el.offsetHeight;
    const elRect = el.getBoundingClientRect();
    const cx = elRect.left + w / 2;
    const cy = elRect.top + h / 2;
    const snapLeft = cx < window.innerWidth / 2 ? margin : window.innerWidth - w - margin;
    const snapTop = cy < window.innerHeight / 2 ? margin : window.innerHeight - h - margin;
    el.style.left = `${snapLeft}px`;
    el.style.top = `${snapTop}px`;
    el.style.right = 'auto';
    el.style.bottom = 'auto';
    el.style.transition = 'left 0.18s ease, top 0.18s ease';
    setTimeout(() => {
      if (el) el.style.transition = '';
    }, 200);
    localStorage.setItem('pip-position', JSON.stringify({ left: snapLeft, top: snapTop }));
  };
  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;
      const 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;
      if (el && pipDragRef.current?.dragged) {
        const savedRect = el.getBoundingClientRect();
        localStorage.setItem(
          'pip-position',
          JSON.stringify({ left: savedRect.left, top: savedRect.top }),
        );
      }
      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;
      if (el && pipDragRef.current?.dragged) {
        const savedRect = el.getBoundingClientRect();
        localStorage.setItem(
          'pip-position',
          JSON.stringify({ left: savedRect.left, top: savedRect.top }),
        );
      }
      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;
    const sy = e.clientY;
    const sw = el.offsetWidth;
    const sh = el.offsetHeight;
    const sl = parseFloat(el.style.left);
    const 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;
      const dy = ev.clientY - sy;
      let w = sw;
      let h = sh;
      let l = sl;
      let 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={{
@@ -58,9 +759,91 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
          left: 0,
          width: '100%',
          height: '50%',
          ...(callVisible && !pipMode ? wallpaperStyle : {}),
        }}
        ref={callEmbedRef}
-      />
+      >
        {pipMode && callEmbed && (
          <>
            <div
              role="button"
              tabIndex={0}
              aria-label="Return to call"
              onMouseDown={handlePipMouseDown}
              onTouchStart={handlePipTouchStart}
              onDoubleClick={handlePipDoubleClick}
              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 = [
                [3, 3],
                [3, 10],
                [10, 3],
              ].map(([a, b]) => ({
                position: 'absolute' as const,
                width: 5,
                height: 5,
                borderRadius: '50%',
                background: 'rgba(255,255,255,0.65)',
                boxShadow: '0 0 3px rgba(0,0,0,0.4)',
                [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: '24px',
                    height: '24px',
                    [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);
@@ -1,4 +1,4 @@
-import { ReactNode, RefObject, useCallback, useRef, useState } from 'react';
+import React, { ReactNode, RefObject, useCallback, useRef, useState } from 'react';
 import { useDebounce } from '../hooks/useDebounce';
 type ConfirmPasswordMatchProps = {
@@ -7,13 +7,13 @@ type ConfirmPasswordMatchProps = {
    match: boolean,
    doMatch: () => void,
    passRef: RefObject<HTMLInputElement>,
-    confPassRef: RefObject<HTMLInputElement>
+    confPassRef: RefObject<HTMLInputElement>,
  ) => ReactNode;
 };
 export function ConfirmPasswordMatch({ initialValue, children }: ConfirmPasswordMatchProps) {
  const [match, setMatch] = useState(initialValue);
-  const passRef = useRef<HTMLInputElement>(null);
+  const passRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
-  const confPassRef = useRef<HTMLInputElement>(null);
+  const confPassRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;
  const doMatch = useDebounce(
    useCallback(() => {
@@ -28,7 +28,7 @@ export function ConfirmPasswordMatch({ initialValue, children }: ConfirmPassword
    {
      wait: 500,
      immediate: false,
-    }
+    },
  );
  return children(match, doMatch, passRef, confPassRef);
@@ -137,7 +137,6 @@ function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
      >
        {sasData.sas.emoji?.map(([emoji, name], index) => (
          <Box
            // eslint-disable-next-line react/no-array-index-key
            key={`${emoji}${name}${index}`}
            direction="Column"
            gap="100"
@@ -259,9 +258,16 @@ 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>
@@ -310,9 +316,5 @@ export function ReceiveSelfDeviceVerification() {
  if (!request) return null;
  if (!request.isSelfVerification) {
    return null;
  }
  return <DeviceVerification request={request} onExit={handleExit} />;
 }
@@ -27,7 +27,7 @@ import { useAlive } from '../hooks/useAlive';
 import { UseStateProvider } from './UseStateProvider';
 type UIACallback<T> = (
-  authDict: AuthDict | null
+  authDict: AuthDict | null,
 ) => Promise<[IAuthData, undefined] | [undefined, T]>;
 type PerformAction<T> = (authDict: AuthDict | null) => Promise<T>;
@@ -42,7 +42,7 @@ function makeUIAAction<T>(
  authData: IAuthData,
  performAction: PerformAction<T>,
  resolve: (data: T) => void,
-  reject: (error?: any) => void
+  reject: (error?: any) => void,
 ): UIAAction<T> {
  const action: UIAAction<T> = {
    authData,
@@ -91,7 +91,7 @@ function SetupVerification({ onComplete }: SetupVerificationProps) {
        setNextAuthData(authData);
      }
    },
-    [uiaAction, alive]
+    [uiaAction, alive],
  );
  const resetUIA = useCallback(() => {
@@ -118,7 +118,7 @@ function SetupVerification({ onComplete }: SetupVerificationProps) {
                (err) => {
                  resetUIA();
                  reject(err);
-                }
+                },
              );
              if (alive()) {
                setUIAAction(action);
@@ -130,7 +130,7 @@ function SetupVerification({ onComplete }: SetupVerificationProps) {
            reject(error);
          });
      }),
-    [alive, resetUIA]
+    [alive, resetUIA],
  );
  const [setupState, setup] = useAsyncCallback<void, Error, [string | undefined]>(
@@ -159,8 +159,8 @@ function SetupVerification({ onComplete }: SetupVerificationProps) {
        onComplete(recoveryKeyData.encodedPrivateKey);
      },
-      [mx, onComplete, authUploadDeviceSigningKeys]
+      [mx, onComplete, authUploadDeviceSigningKeys],
-    )
+    ),
  );
  const loading = setupState.status === AsyncStatus.Loading;
@@ -299,9 +299,11 @@ 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>
@@ -314,7 +316,7 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
        </Box>
      </Dialog>
    );
-  }
+  },
 );
 type DeviceVerificationResetProps = {
  onCancel: () => void;
@@ -334,9 +336,11 @@ 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>
@@ -371,5 +375,5 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
        )}
      </Dialog>
    );
-  }
+  },
 );
@@ -0,0 +1,125 @@
 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;
      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' }}>
        <div style={{ width: '100%', borderRadius: lotusTerminal ? '4px' : '8px' }}>
          <SearchBar />
        </div>
      </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>
  );
 }
@@ -0,0 +1,45 @@
 import FocusTrap from 'focus-trap-react';
 import { as, Modal, Overlay, OverlayBackdrop, OverlayCenter } from 'folds';
 import React, { ReactNode } from 'react';
 import { ModalWide } from '../styles/Modal.css';
 import { stopPropagation } from '../utils/keyboard';
 export type RenderViewerProps = {
  src: string;
  alt: string;
  requestClose: () => void;
 };
 type ImageOverlayProps = RenderViewerProps & {
  viewer: boolean;
  renderViewer: (props: RenderViewerProps) => ReactNode;
 };
 export const ImageOverlay = as<'div', ImageOverlayProps>(
  ({ src, alt, viewer, requestClose, renderViewer, ...props }, ref) => (
    <Overlay {...props} ref={ref} open={viewer} backdrop={<OverlayBackdrop />}>
      <OverlayCenter>
        <FocusTrap
          focusTrapOptions={{
            initialFocus: false,
            onDeactivate: () => requestClose(),
            clickOutsideDeactivates: true,
            escapeDeactivates: stopPropagation,
          }}
        >
          <Modal
            className={ModalWide}
            size="500"
            onContextMenu={(evt: any) => evt.stopPropagation()}
          >
            {renderViewer({
              src,
              alt,
              requestClose,
            })}
          </Modal>
        </FocusTrap>
      </OverlayCenter>
    </Overlay>
  ),
 );
@@ -33,7 +33,7 @@ export const useJoinRuleIcons = (roomType?: string): JoinRuleIcons =>
      [JoinRule.Public]: getRoomIconSrc(Icons, roomType, JoinRule.Public),
      [JoinRule.Private]: getRoomIconSrc(Icons, roomType, JoinRule.Private),
    }),
-    [roomType]
+    [roomType],
  );
 type JoinRuleLabels = Record<ExtendedJoinRules, string>;
@@ -47,7 +47,7 @@ export const useRoomJoinRuleLabel = (): JoinRuleLabels =>
      [JoinRule.Public]: 'Public',
      [JoinRule.Private]: 'Invite Only',
    }),
-    []
+    [],
  );
 type JoinRulesSwitcherProps<T extends ExtendedJoinRules[]> = {
@@ -79,7 +79,7 @@ export function JoinRulesSwitcher<T extends ExtendedJoinRules[]>({
      setCords(undefined);
      onChange(selectedRule);
    },
-    [onChange]
+    [onChange],
  );
  return (
@@ -0,0 +1,118 @@
 import React, { useId } from 'react';
 const ROOM_ROWS = [
  { w: '160px', indent: false },
  { w: '120px', indent: true },
  { w: '140px', indent: true },
  { w: '130px', indent: true },
  { w: '150px', indent: false },
  { w: '110px', indent: true },
 ];
 export function LobbySkeleton() {
  const id = useId().replace(/:/g, '');
  const shimmerKeyframes = `
    @keyframes shimmer-${id} {
      0%   { background-position: -400px 0; }
      100% { background-position: 400px 0; }
    }
  `;
  const shimmer = {
    background:
      'linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%)',
    backgroundSize: '800px 100%',
    animation: `shimmer-${id} 1.6s ease-in-out infinite`,
    borderRadius: '4px',
  } as React.CSSProperties;
  return (
    <>
      <style>{shimmerKeyframes}</style>
      <div
        style={
          {
            display: 'flex',
            flexDirection: 'column',
            flexGrow: 1,
            height: '100%',
            overflow: 'hidden',
            '--skeleton-base': 'color-mix(in srgb, currentColor 8%, transparent)',
            '--skeleton-shine': 'color-mix(in srgb, currentColor 15%, transparent)',
          } as React.CSSProperties
        }
      >
        {/* Header — matches LobbyHeader (56px) */}
        <div
          style={{
            height: '56px',
            borderBottom: '1px solid color-mix(in srgb, currentColor 10%, transparent)',
            display: 'flex',
            alignItems: 'center',
            gap: '12px',
            padding: '0 16px',
            flexShrink: 0,
          }}
        >
          <div
            style={{
              ...shimmer,
              width: '32px',
              height: '32px',
              borderRadius: '50%',
              flexShrink: 0,
            }}
          />
          <div style={{ ...shimmer, width: '130px', height: '16px' }} />
          <div style={{ flex: 1 }} />
          <div style={{ ...shimmer, width: '24px', height: '24px', borderRadius: '4px' }} />
          <div style={{ ...shimmer, width: '24px', height: '24px', borderRadius: '4px' }} />
        </div>
        <div style={{ flex: 1, overflowY: 'hidden', display: 'flex', flexDirection: 'column' }}>
          {/* Hero — matches PageHero with large avatar + title + subtitle */}
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              padding: '32px 16px 24px',
              gap: '12px',
              flexShrink: 0,
            }}
          >
            <div style={{ ...shimmer, width: '72px', height: '72px', borderRadius: '50%' }} />
            <div style={{ ...shimmer, width: '180px', height: '20px' }} />
            <div style={{ ...shimmer, width: '240px', height: '13px' }} />
          </div>
          {/* Room list rows */}
          <div style={{ flex: 1, padding: '8px 0' }}>
            {ROOM_ROWS.map((row, i) => (
              <div
                key={i}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: '10px',
                  padding: `6px 16px 6px ${row.indent ? '36px' : '16px'}`,
                }}
              >
                <div
                  style={{
                    ...shimmer,
                    width: '18px',
                    height: '18px',
                    borderRadius: '4px',
                    flexShrink: 0,
                  }}
                />
                <div style={{ ...shimmer, width: row.w, height: '14px' }} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
 }
@@ -21,13 +21,13 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
    const verificationStatus = useDeviceVerificationStatus(
      mx.getCrypto(),
      mx.getSafeUserId(),
-      mx.getDeviceId() ?? undefined
+      mx.getDeviceId() ?? undefined,
    );
    const [logoutState, logout] = useAsyncCallback<void, Error, []>(
      useCallback(async () => {
        await logoutClient(mx);
-      }, [mx])
+      }, [mx]),
    );
    const ongoingLogout = logoutState.status === AsyncStatus.Loading;
@@ -43,7 +43,9 @@ 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">
@@ -85,5 +87,5 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
        </Box>
      </Dialog>
    );
-  }
+  },
 );
@@ -126,7 +126,7 @@ export function ManualVerificationTile({
  const [method, setMethod] = useState(
    hasPassphrase
      ? ManualVerificationMethod.RecoveryPassphrase
-      : ManualVerificationMethod.RecoveryKey
+      : ManualVerificationMethod.RecoveryKey,
  );
  const verifyAndRestoreBackup = useCallback(
@@ -143,11 +143,11 @@ export function ManualVerificationTile({
      await crypto.loadSessionBackupPrivateKeyFromSecretStorage();
    },
-    [mx, secretStorageKeyId]
+    [mx, secretStorageKeyId],
  );
  const [verifyState, handleDecodedRecoveryKey] = useAsyncCallback<void, Error, [Uint8Array]>(
-    verifyAndRestoreBackup
+    verifyAndRestoreBackup,
  );
  const verifying = verifyState.status === AsyncStatus.Loading;
@@ -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);
@@ -0,0 +1,35 @@
 import React from 'react';
 import { Icon, Icons, Text, Tooltip, TooltipProvider } from 'folds';
 import { useUserVerifiedStatus } from '../hooks/useUserVerifiedStatus';
 type MemberVerificationBadgeProps = {
  userId: string;
 };
 export function MemberVerificationBadge({ userId }: MemberVerificationBadgeProps) {
  const vs = useUserVerifiedStatus(userId);
  if (vs === 'unknown') return null;
  const color =
    vs === 'verified' ? 'var(--tc-positive-normal, #5effc4)' : 'var(--tc-warning-normal, #ffcc55)';
  const label = vs === 'verified' ? 'Identity verified' : 'Not verified';
  return (
    <TooltipProvider
      position="Top"
      tooltip={
        <Tooltip>
          <Text size="T200">{label}</Text>
        </Tooltip>
      }
    >
      {(ref) => (
        <span
          ref={ref}
          title={label}
          style={{ display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}
        >
          <Icon size="100" src={Icons.ShieldUser} style={{ color }} />
        </span>
      )}
    </TooltipProvider>
  );
 }
@@ -1,5 +1,3 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import React, { FormEventHandler, MouseEventHandler, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import {
@@ -43,7 +41,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
    const [pdfJSState, loadPdfJS] = usePdfJSLoader();
    const [docState, loadPdfDocument] = usePdfDocumentLoader(
      pdfJSState.status === AsyncStatus.Success ? pdfJSState.data : undefined,
-      src
+      src,
    );
    const isLoading =
      pdfJSState.status === AsyncStatus.Loading || docState.status === AsyncStatus.Loading;
@@ -108,7 +106,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>
@@ -257,5 +255,5 @@ export const PdfViewer = as<'div', PdfViewerProps>(
        )}
      </Box>
    );
-  }
+  },
 );
@@ -22,6 +22,7 @@ import {
  RenderBody,
  ThumbnailContent,
  UnsupportedContent,
  VerificationRequestContent,
  VideoContent,
 } from './message';
 import { UrlPreviewCard, UrlPreviewHolder } from './url-preview';
@@ -264,5 +265,9 @@ export function RenderMessageContent({
    return <MBadEncrypted />;
  }
  if (msgType === 'm.key.verification.request') {
    return <VerificationRequestContent />;
  }
  return <UnsupportedContent />;
 }
@@ -17,7 +17,7 @@ const useRoomNotificationModes = (): RoomNotificationMode[] =>
      RoomNotificationMode.SpecialMessages,
      RoomNotificationMode.Mute,
    ],
-    []
+    [],
  );
 const useRoomNotificationModeStr = (): Record<RoomNotificationMode, string> =>
@@ -28,7 +28,7 @@ const useRoomNotificationModeStr = (): Record<RoomNotificationMode, string> =>
      [RoomNotificationMode.SpecialMessages]: 'Mention & Keywords',
      [RoomNotificationMode.Mute]: 'Mute',
    }),
-    []
+    [],
  );
 type NotificationModeSwitcherProps = {
@@ -37,7 +37,7 @@ type NotificationModeSwitcherProps = {
  children: (
    handleOpen: MouseEventHandler<HTMLButtonElement>,
    opened: boolean,
-    changing: boolean
+    changing: boolean,
  ) => ReactNode;
 };
 export function RoomNotificationModeSwitcher({
@@ -0,0 +1,125 @@
 import React, { useId } from 'react';
 const MESSAGES = [
  { showAvatar: true, lines: [{ w: '55%' }, { w: '35%' }] },
  { showAvatar: false, lines: [{ w: '72%' }] },
  { showAvatar: false, lines: [{ w: '48%' }, { w: '60%' }] },
  { showAvatar: true, lines: [{ w: '80%' }] },
  { showAvatar: false, lines: [{ w: '40%' }] },
  { showAvatar: true, lines: [{ w: '65%' }, { w: '50%' }, { w: '30%' }] },
  { showAvatar: false, lines: [{ w: '58%' }] },
  { showAvatar: true, lines: [{ w: '45%' }] },
  { showAvatar: false, lines: [{ w: '70%' }, { w: '25%' }] },
 ];
 export function RoomSkeleton() {
  const id = useId().replace(/:/g, '');
  const shimmerKeyframes = `
    @keyframes shimmer-${id} {
      0%   { background-position: -400px 0; }
      100% { background-position: 400px 0; }
    }
  `;
  const shimmer = {
    background:
      'linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%)',
    backgroundSize: '800px 100%',
    animation: `shimmer-${id} 1.6s ease-in-out infinite`,
    borderRadius: '4px',
  } as React.CSSProperties;
  return (
    <>
      <style>{shimmerKeyframes}</style>
      <div
        style={
          {
            display: 'flex',
            flexDirection: 'column',
            flexGrow: 1,
            height: '100%',
            overflow: 'hidden',
            // CSS vars resolve against both light and dark themes automatically
            '--skeleton-base': 'color-mix(in srgb, currentColor 8%, transparent)',
            '--skeleton-shine': 'color-mix(in srgb, currentColor 15%, transparent)',
          } as React.CSSProperties
        }
      >
        {/* Header — matches PageHeader size="600" (56px) */}
        <div
          style={{
            height: '56px',
            borderBottom: '1px solid color-mix(in srgb, currentColor 10%, transparent)',
            display: 'flex',
            alignItems: 'center',
            gap: '12px',
            padding: '0 16px',
            flexShrink: 0,
          }}
        >
          {/* Avatar */}
          <div
            style={{
              ...shimmer,
              width: '32px',
              height: '32px',
              borderRadius: '50%',
              flexShrink: 0,
            }}
          />
          {/* Room name */}
          <div style={{ ...shimmer, width: '140px', height: '16px' }} />
          {/* Spacer */}
          <div style={{ flex: 1 }} />
          {/* Icon buttons */}
          <div style={{ ...shimmer, width: '24px', height: '24px', borderRadius: '4px' }} />
          <div style={{ ...shimmer, width: '24px', height: '24px', borderRadius: '4px' }} />
        </div>
        {/* Timeline */}
        <div style={{ flex: 1, overflowY: 'hidden', padding: '16px 0' }}>
          {MESSAGES.map((msg, i) => (
            <div
              key={i}
              style={{
                display: 'flex',
                gap: '12px',
                padding: '4px 16px',
                alignItems: 'flex-start',
                marginBottom: msg.showAvatar ? '8px' : '2px',
              }}
            >
              {/* Avatar — only shown on first message in a group */}
              <div style={{ width: '36px', flexShrink: 0 }}>
                {msg.showAvatar && (
                  <div style={{ ...shimmer, width: '36px', height: '36px', borderRadius: '50%' }} />
                )}
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', flex: 1 }}>
                {/* Username on first in group */}
                {msg.showAvatar && (
                  <div style={{ ...shimmer, width: '90px', height: '12px', marginBottom: '2px' }} />
                )}
                {msg.lines.map((line, j) => (
                  <div key={j} style={{ ...shimmer, width: line.w, height: '14px' }} />
                ))}
              </div>
            </div>
          ))}
        </div>
        {/* Input bar */}
        <div
          style={{
            borderTop: '1px solid color-mix(in srgb, currentColor 10%, transparent)',
            padding: '12px 16px',
            flexShrink: 0,
          }}
        >
          <div style={{ ...shimmer, width: '100%', height: '44px', borderRadius: '8px' }} />
        </div>
      </div>
    </>
  );
 }
@@ -36,7 +36,7 @@ export function SecretStorageRecoveryPassphrase({
          passphrase,
          salt,
          iterations,
-          bits
+          bits,
        );
        const match = await mx.secretStorage.checkKey(decodedRecoveryKey, keyContent as any);
@@ -47,8 +47,8 @@ export function SecretStorageRecoveryPassphrase({
        return decodedRecoveryKey;
      },
-      [mx, keyContent]
+      [mx, keyContent],
-    )
+    ),
  );
  const drivingKey = driveKeyState.status === AsyncStatus.Loading;
@@ -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"
@@ -139,8 +140,8 @@ export function SecretStorageRecoveryKey({
        return decodedRecoveryKey;
      },
-      [mx, keyContent]
+      [mx, keyContent],
-    )
+    ),
  );
  const drivingKey = driveKeyState.status === AsyncStatus.Loading;
@@ -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"
@@ -31,10 +31,14 @@ export function ServerConfigsLoader({ children }: ServerConfigsLoaderProps) {
      const authMetadata = promiseFulfilledResult(result[2]);
      let validatedAuthMetadata: ValidatedAuthMetadata | undefined;
-      try {
+      // Only validate if the server returned metadata — a rejected promise means no native
-        validatedAuthMetadata = validateAuthMetadata(authMetadata);
+      // Matrix OIDC (MSC3861/MAS), which is normal for servers using traditional SSO.
-      } catch (e) {
+      if (authMetadata !== undefined) {
-        console.error(e);
+        try {
          validatedAuthMetadata = validateAuthMetadata(authMetadata);
        } catch (e) {
          console.error(e);
        }
      }
      return {
@@ -42,7 +46,7 @@ export function ServerConfigsLoader({ children }: ServerConfigsLoaderProps) {
        mediaConfig,
        authMetadata: validatedAuthMetadata,
      };
-    }, [mx])
+    }, [mx]),
  );
  const configs: ServerConfigs =
@@ -21,7 +21,7 @@ export function SpaceChildDirectsProvider({
  const childDirects = useSpaceChildren(
    allRoomsAtom,
    spaceId,
-    useChildDirectScopeFactory(mx, mDirects, roomToParents)
+    useChildDirectScopeFactory(mx, mDirects, roomToParents),
  );
  return children(childDirects);
@@ -21,7 +21,7 @@ export function SpaceChildRoomsProvider({
  const childRooms = useSpaceChildren(
    allRoomsAtom,
    spaceId,
-    useChildRoomScopeFactory(mx, mDirects, roomToParents)
+    useChildRoomScopeFactory(mx, mDirects, roomToParents),
  );
  return children(childRooms);
@@ -15,14 +15,14 @@ export function SpecVersionsLoader({
  children,
 }: SpecVersionsLoaderProps) {
  const [state, load] = useAsyncCallback(
-    useCallback(() => specVersions(fetch, baseUrl), [baseUrl])
+    useCallback(() => specVersions(fetch, baseUrl), [baseUrl]),
  );
  const [ignoreError, setIgnoreError] = useState(false);
  const ignoreCallback = useCallback(() => setIgnoreError(true), []);
  useEffect(() => {
-    load();
+    load().catch(() => {});
  }, [load]);
  if (state.status === AsyncStatus.Idle || state.status === AsyncStatus.Loading) {
@@ -38,6 +38,6 @@ export function SpecVersionsLoader({
      ? state.data
      : {
          versions: [],
-        }
+        },
  );
 }
@@ -55,6 +55,7 @@ export function UIAFlowOverlay({
                <IconButton
                  ref={anchorRef}
                  variant="Critical"
                  aria-label="Cancel authentication"
                  size="300"
                  onClick={onCancel}
                  radii="Pill"
@@ -0,0 +1,306 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Box, Icon, IconButton, Icons, Text, config, toRem } from 'folds';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
 type RecorderState = 'idle' | 'recording' | 'preview';
 interface VoiceRecorderProps {
  onSend: (blob: Blob, mimeType: string, durationMs: number, waveform: number[]) => void;
  onError?: (err: string) => void;
 }
 function formatDuration(ms: number): string {
  const totalSec = Math.floor(ms / 1000);
  const m = Math.floor(totalSec / 60);
  const s = totalSec % 60;
  return `${m}:${s.toString().padStart(2, '0')}`;
 }
 function normalizeWaveform(samples: number[]): number[] {
  if (samples.length === 0) return Array(20).fill(0);
  const max = Math.max(...samples, 1);
  const count = Math.min(samples.length, 100);
  const step = samples.length / count;
  const result: number[] = [];
  for (let i = 0; i < count; i += 1) {
    const idx = Math.floor(i * step);
    result.push(Math.round((samples[idx] / max) * 1024));
  }
  return result;
 }
 const WAVEFORM_BARS = 40;
 export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
  const [state, setState] = useState<RecorderState>('idle');
  const [durationMs, setDurationMs] = useState(0);
  const [waveformBars, setWaveformBars] = useState<number[]>(Array(WAVEFORM_BARS).fill(0));
  const [previewBlob, setPreviewBlob] = useState<Blob | null>(null);
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
  const chunksRef = useRef<Blob[]>([]);
  const analyserRef = useRef<AnalyserNode | null>(null);
  const audioCtxRef = useRef<AudioContext | null>(null);
  const rawSamplesRef = useRef<number[]>([]);
  const startTimeRef = useRef<number>(0);
  const animFrameRef = useRef<number>(0);
  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
  const previewMimeRef = useRef('audio/ogg;codecs=opus');
  const previewDurationRef = useRef(0);
  const stopAll = useCallback(() => {
    if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
    if (timerRef.current) clearInterval(timerRef.current);
    if (audioCtxRef.current) {
      audioCtxRef.current.close();
      audioCtxRef.current = null;
    }
    analyserRef.current = null;
  }, []);
  useEffect(
    () => () => {
      stopAll();
      if (previewUrl) URL.revokeObjectURL(previewUrl);
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [],
  );
  const startRecording = useCallback(async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      const mimeType = MediaRecorder.isTypeSupported('audio/ogg;codecs=opus')
        ? 'audio/ogg;codecs=opus'
        : 'audio/webm;codecs=opus';
      previewMimeRef.current = mimeType;
      const mr = new MediaRecorder(stream, { mimeType });
      mediaRecorderRef.current = mr;
      chunksRef.current = [];
      rawSamplesRef.current = [];
      startTimeRef.current = Date.now();
      const audioCtx = new AudioContext();
      audioCtxRef.current = audioCtx;
      const source = audioCtx.createMediaStreamSource(stream);
      const analyser = audioCtx.createAnalyser();
      analyser.fftSize = 256;
      source.connect(analyser);
      analyserRef.current = analyser;
      const buf = new Uint8Array(analyser.frequencyBinCount);
      const tick = () => {
        if (!analyserRef.current) return;
        analyserRef.current.getByteFrequencyData(buf);
        const avg = buf.reduce((a, b) => a + b, 0) / buf.length;
        rawSamplesRef.current.push(avg);
        setWaveformBars((prev) => {
          const next = [...prev.slice(1), Math.round((avg / 255) * 100)];
          return next;
        });
        animFrameRef.current = requestAnimationFrame(tick);
      };
      animFrameRef.current = requestAnimationFrame(tick);
      timerRef.current = setInterval(() => {
        setDurationMs(Date.now() - startTimeRef.current);
      }, 100);
      mr.ondataavailable = (e) => {
        if (e.data.size > 0) chunksRef.current.push(e.data);
      };
      mr.onstop = () => {
        stream.getTracks().forEach((t) => t.stop());
        const blob = new Blob(chunksRef.current, { type: mimeType });
        previewDurationRef.current = Date.now() - startTimeRef.current;
        setPreviewBlob(blob);
        setPreviewUrl((prev) => {
          if (prev) URL.revokeObjectURL(prev);
          return URL.createObjectURL(blob);
        });
        setState('preview');
      };
      mr.start(250);
      setState('recording');
    } catch {
      onError?.('Microphone access denied');
    }
  }, [onError]);
  const stopRecording = useCallback(() => {
    stopAll();
    if (mediaRecorderRef.current?.state === 'recording') {
      mediaRecorderRef.current.stop();
    }
  }, [stopAll]);
  const cancelRecording = useCallback(() => {
    stopAll();
    const mr = mediaRecorderRef.current;
    if (mr?.state === 'recording') {
      mr.ondataavailable = null;
      mr.onstop = null;
      mr.stop();
    }
    setPreviewBlob(null);
    setPreviewUrl((prev) => {
      if (prev) URL.revokeObjectURL(prev);
      return null;
    });
    rawSamplesRef.current = [];
    setWaveformBars(Array(WAVEFORM_BARS).fill(0));
    setDurationMs(0);
    setState('idle');
  }, [stopAll]);
  const sendVoice = useCallback(() => {
    if (!previewBlob) return;
    const waveform = normalizeWaveform(rawSamplesRef.current);
    onSend(previewBlob, previewMimeRef.current, previewDurationRef.current, waveform);
    cancelRecording();
  }, [previewBlob, onSend, cancelRecording]);
  const barMax = Math.max(...waveformBars, 1);
  if (state === 'idle') {
    return (
      <IconButton
        onClick={startRecording}
        aria-label="Record voice message"
        variant="SurfaceVariant"
        size="300"
        radii="300"
        title="Record voice message"
      >
        <Icon src={Icons.Mic} size="100" />
      </IconButton>
    );
  }
  if (state === 'recording') {
    return (
      <Box
        data-voice-recorder="recording"
        alignItems="Center"
        gap="200"
        style={{
          background: 'var(--bg-surface-variant)',
          borderRadius: config.radii.R300,
          padding: `${toRem(4)} ${toRem(8)}`,
        }}
      >
        <Box
          data-voice-rec-dot
          style={{
            width: toRem(8),
            height: toRem(8),
            borderRadius: '50%',
            background: lotusTerminal ? '#FF6B00' : 'var(--tc-danger-normal)',
            flexShrink: 0,
            animation: 'pttLivePulse 900ms ease-in-out infinite',
          }}
        />
        <Text
          size="T200"
          style={{
            minWidth: toRem(32),
            fontVariantNumeric: 'tabular-nums',
            ...(lotusTerminal
              ? { fontFamily: 'JetBrains Mono, monospace', color: '#00FF88', fontWeight: 700 }
              : {}),
          }}
        >
          {formatDuration(durationMs)}
        </Text>
        <Box
          data-voice-waveform
          alignItems="Center"
          gap="100"
          style={{ height: toRem(20), overflow: 'hidden', flexShrink: 0 }}
        >
          {waveformBars.map((h, i) => (
            <div
              key={i}
              style={{
                width: toRem(2),
                height: toRem(2 + (h / barMax) * 16),
                borderRadius: toRem(1),
                background: lotusTerminal ? '#00FF88' : 'var(--tc-primary-normal)',
                flexShrink: 0,
              }}
            />
          ))}
        </Box>
        <IconButton
          onClick={stopRecording}
          aria-label="Stop recording"
          variant="Primary"
          fill="Soft"
          size="300"
          radii="300"
          title="Stop recording"
        >
          <Icon src={Icons.Pause} size="100" />
        </IconButton>
        <IconButton
          onClick={cancelRecording}
          aria-label="Cancel recording"
          variant="SurfaceVariant"
          size="300"
          radii="300"
          title="Cancel"
        >
          <Icon src={Icons.Cross} size="100" />
        </IconButton>
      </Box>
    );
  }
  return (
    <Box
      alignItems="Center"
      gap="200"
      style={{
        background: 'var(--bg-surface-variant)',
        borderRadius: config.radii.R300,
        padding: `${toRem(4)} ${toRem(8)}`,
      }}
    >
      {previewUrl && (
        <audio src={previewUrl} controls style={{ height: toRem(28), maxWidth: toRem(180) }} />
      )}
      <Text size="T200" style={{ fontVariantNumeric: 'tabular-nums', flexShrink: 0 }}>
        {formatDuration(previewDurationRef.current)}
      </Text>
      <IconButton
        onClick={sendVoice}
        aria-label="Send voice message"
        variant="Primary"
        fill="Soft"
        size="300"
        radii="300"
        title="Send voice message"
      >
        <Icon src={Icons.Send} size="100" />
      </IconButton>
      <IconButton
        onClick={cancelRecording}
        aria-label="Discard voice message"
        variant="SurfaceVariant"
        size="300"
        radii="300"
        title="Discard"
      >
        <Icon src={Icons.Delete} size="100" />
      </IconButton>
    </Box>
  );
 }
@@ -35,7 +35,7 @@ import { highlightText, makeHighlightRegex } from '../../plugins/react-custom-ht
 export const useAdditionalCreators = (defaultCreators?: string[]) => {
  const mx = useMatrixClient();
  const [additionalCreators, setAdditionalCreators] = useState<string[]>(
-    () => defaultCreators?.filter((id) => id !== mx.getSafeUserId()) ?? []
+    () => defaultCreators?.filter((id) => id !== mx.getSafeUserId()) ?? [],
  );
  const addAdditionalCreator = (userId: string) => {
@@ -90,12 +90,12 @@ export function AdditionalCreatorInput({
  const [validUserId, setValidUserId] = useState<string>();
  const filteredUsers = useMemo(
    () => directUsers.filter((userId) => !additionalCreators.includes(userId)),
-    [directUsers, additionalCreators]
+    [directUsers, additionalCreators],
  );
  const [result, search, resetSearch] = useAsyncSearch(
    filteredUsers,
    getUserIdString,
-    SEARCH_OPTIONS
+    SEARCH_OPTIONS,
  );
  const queryHighlighRegex = result?.query ? makeHighlightRegex([result.query]) : undefined;
@@ -42,9 +42,9 @@ export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) {
          throw e;
        }
      },
-      [mx]
+      [mx],
    ),
-    setAliasAvail
+    setAliasAvail,
  );
  const aliasAvailable: boolean | undefined =
    aliasAvail.status === AsyncStatus.Success ? aliasAvail.data : undefined;
@@ -15,7 +15,7 @@ import { CreateRoomAccess } from './types';
 export const createRoomCreationContent = (
  type: RoomType | undefined,
  allowFederation: boolean,
-  additionalCreators: string[] | undefined
+  additionalCreators: string[] | undefined,
 ): object => {
  const content: Record<string, any> = {};
  if (typeof type === 'string') {
@@ -34,7 +34,7 @@ export const createRoomCreationContent = (
 export const createRoomJoinRulesState = (
  access: CreateRoomAccess,
  parent: Room | undefined,
-  knock: boolean
+  knock: boolean,
 ) => {
  let content: RoomJoinRulesEventContent = {
    join_rule: knock ? JoinRule.Knock : JoinRule.Invite,
@@ -136,7 +136,7 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
    creation_content: createRoomCreationContent(
      data.type,
      data.allowFederation,
-      data.additionalCreators
+      data.additionalCreators,
    ),
    power_level_content_override:
      data.type === RoomType.Call ? createVoiceRoomPowerLevelsOverride() : undefined,
@@ -158,7 +158,7 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
        suggested: false,
        via: [getMxIdServer(mx.getUserId() ?? '') ?? ''],
      },
-      result.room_id
+      result.room_id,
    );
  }
@@ -11,5 +11,5 @@ export const CutoutCard = as<'div', { variant?: TContainerColor }>(
      {...props}
      ref={ref}
    />
-  )
+  ),
 );
@@ -23,7 +23,11 @@ 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 +46,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 +57,20 @@ 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>
                    </>
@@ -1,4 +1,3 @@
 /* eslint-disable no-param-reassign */
 import React, {
  ClipboardEventHandler,
  KeyboardEventHandler,
@@ -36,7 +35,7 @@ const withInline = (editor: Editor): Editor => {
  editor.isInline = (element) =>
    [BlockType.Mention, BlockType.Emoticon, BlockType.Link, BlockType.Command].includes(
-      element.type
+      element.type,
    ) || isInline(element);
  return editor;
@@ -88,11 +87,11 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
      onChange,
      onPaste,
    },
-    ref
+    ref,
  ) => {
    const renderElement = useCallback(
      (props: RenderElementProps) => <RenderElement {...props} />,
-      []
+      [],
    );
    const renderLeaf = useCallback((props: RenderLeafProps) => <RenderLeaf {...props} />, []);
@@ -103,7 +102,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
        const shortcutToggled = toggleKeyboardShortcut(editor, evt);
        if (shortcutToggled) evt.preventDefault();
      },
-      [editor, onKeyDown]
+      [editor, onKeyDown],
    );
    const renderPlaceholder = useCallback(
@@ -115,7 +114,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
          </Text>
        </span>
      ),
-      []
+      [],
    );
    return (
@@ -140,6 +139,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}
@@ -158,5 +159,5 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
        </Slate>
      </div>
    );
-  }
+  },
 );
@@ -54,8 +54,8 @@ function BtnTooltip({ text, shortCode }: { text: string; shortCode?: string }) {
  );
 }
-type MarkButtonProps = { format: MarkType; icon: IconSrc; tooltip: ReactNode };
+type MarkButtonProps = { format: MarkType; icon: IconSrc; tooltip: ReactNode; label?: string };
-export function MarkButton({ format, icon, tooltip }: MarkButtonProps) {
+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"
      >
@@ -347,6 +355,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"
--- a/Show More
+++ b/Show More
		`@@ -0,0 +1,2 @@`
							`VITE_SENTRY_DSN=https://264a5e95c5d31fe080a2e92fb008294d@o4511430568378368.ingest.us.sentry.io/4511430571982849`
							`VITE_APP_VERSION=lotus`
		`@@ -1,3 +0,0 @@`
			`# Reporting a Vulnerability`

			`If you've found a security vulnerability, please report it to cinnyapp@gmail.com`