feat: Implement image carousel functionality with metadata handling and UI enhancements

feat: Implement confirmation dialog for room sharing in ShareRoomPicker

fix: Improve server input synchronization and blur handling in ServerPicker

feat: Integrate UnifiedPush for background sync in Android, including pusher management

refactor: Streamline Android share handling and file upload processes

fix: Update notification handling to use Capacitor's local notifications API

.github/FUNDING.yml

@@ -1,3 +0,0 @@
-github: ajbura
-liberapay: ajbura
-open_collective: cinny

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -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.

.github/ISSUE_TEMPLATE/config.yml

@@ -1,4 +0,0 @@
-contact_links:
-  - name: 💬 Matrix Chat
-    url: https://matrix.to/#/#cinny:matrix.org
-    about: Ask questions and talk to other Cinny users and the maintainers

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -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.

.github/PULL_REQUEST_TEMPLATE.md

@@ -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

.github/SECURITY.md

@@ -1,3 +0,0 @@
-# Reporting a Vulnerability
-
-**If you've found a security vulnerability, please report it to cinnyapp@gmail.com**

.github/dependabot.yml

@@ -1,30 +0,0 @@
-# Docs: <https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/customizing-dependency-updates>
-
-version: 2
-updates:
-#   - package-ecosystem: npm
-#     directory: /
-#     schedule:
-#       interval: weekly
-#       day: "tuesday"
-#       time: "01:00"
-#       timezone: "Asia/Kolkata"
-#     open-pull-requests-limit: 15
-
-  - package-ecosystem: github-actions
-    directory: /
-    schedule:
-      interval: weekly
-      day: "tuesday"
-      time: "01:00"
-      timezone: "Asia/Kolkata"
-    open-pull-requests-limit: 5
-
-  - package-ecosystem: docker
-    directory: /
-    schedule:
-      interval: weekly
-      day: "tuesday"
-      time: "01:00"
-      timezone: "Asia/Kolkata"
-    open-pull-requests-limit: 5

.github/renovate.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["config:recommended", ":dependencyDashboardApproval"],
-  "labels": ["Dependencies"],
-  "packageRules": [
-    {
-      "matchUpdateTypes": ["lockFileMaintenance"]
-    }
-  ],
-  "lockFileMaintenance": {
-    "enabled": true
-  },
-  "dependencyDashboard": true
-}

.github/workflows/build-pull-request.yml

@@ -1,40 +0,0 @@
-name: Build pull request
-
-on:
-  pull_request:
-    types: ['opened', 'synchronize']
-
-jobs:
-  build-pull-request:
-    name: Build pull request
-    runs-on: ubuntu-latest
-    env:
-      PR_NUMBER: ${{github.event.number}}
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4.2.0
-      - name: Setup node
-        uses: actions/setup-node@v4.4.0
-        with:
-          node-version: 20.12.2
-          cache: 'npm'
-      - name: Install dependencies
-        run: npm ci
-      - name: Build app
-        env:
-          NODE_OPTIONS: '--max_old_space_size=4096'
-        run: npm run build
-      - name: Upload artifact
-        uses: actions/upload-artifact@v4.6.2
-        with:
-          name: preview
-          path: dist
-          retention-days: 1
-      - name: Save pr number
-        run: echo ${PR_NUMBER} > ./pr.txt
-      - name: Upload pr number
-        uses: actions/upload-artifact@v4.6.2
-        with:
-          name: pr
-          path: ./pr.txt
-          retention-days: 1

.github/workflows/cla.yml

@@ -1,36 +0,0 @@
-name: 'CLA Assistant'
-on:
-  issue_comment:
-    types: [created]
-  pull_request_target:
-    types: [opened, closed, synchronize]
-
-jobs:
-  CLAssistant:
-    runs-on: ubuntu-latest
-    steps:
-      - name: 'CLA Assistant'
-        if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
-        # Beta Release
-        uses: cla-assistant/github-action@v2.6.1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          # the below token should have repo scope and must be manually added by you in the repository's secret
-          PERSONAL_ACCESS_TOKEN: ${{ secrets.CLA_PAT }}
-        with:
-          path-to-signatures: 'signatures.json'
-          path-to-document: 'https://github.com/cinnyapp/cla/blob/main/cla.md' # e.g. a CLA or a DCO document
-          # branch should not be protected
-          branch: 'main'
-          allowlist: ajbura,bot*
-
-          #below are the optional inputs - If the optional inputs are not given, then default values will be taken
-          remote-organization-name: cinnyapp
-          remote-repository-name: cla
-          #create-file-commit-message: 'For example: Creating file for storing CLA Signatures'
-          #signed-commit-message: 'For example: $contributorName has signed the CLA in #$pullRequestNo'
-          #custom-notsigned-prcomment: 'pull request comment with Introductory message to ask new contributors to sign'
-          #custom-pr-sign-comment: 'The signature to be committed in order to sign the CLA'
-          #custom-allsigned-prcomment: 'pull request comment when all contributors has signed, defaults to **CLA Assistant Lite bot** All Contributors have signed the CLA.'
-          #lock-pullrequest-aftermerge: false - if you don't want this bot to automatically lock the pull request after merging (default - true)
-          #use-dco-flag: true - If you are using DCO instead of CLA

.github/workflows/deploy-pull-request.yml

@@ -1,56 +0,0 @@
-name: Deploy PR to Netlify
-
-on:
-  workflow_run:
-      workflows: ["Build pull request"]
-      types: [completed]
-
-jobs:
-  deploy-pull-request:
-    name: Deploy pull request
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      pull-requests: write
-    if: ${{ github.event.workflow_run.conclusion == 'success' }}
-    steps:
-      - name: Download pr number
-        uses: dawidd6/action-download-artifact@ac66b43f0e6a346234dd65d4d0c8fbb31cb316e5
-        with:
-          workflow: ${{ github.event.workflow.id }}
-          run_id: ${{ github.event.workflow_run.id }}
-          name: pr
-      - name: Output pr number
-        id: pr
-        run: echo "id=$(<pr.txt)" >> $GITHUB_OUTPUT
-      - name: Download artifact
-        uses: dawidd6/action-download-artifact@ac66b43f0e6a346234dd65d4d0c8fbb31cb316e5
-        with:
-          workflow: ${{ github.event.workflow.id }}
-          run_id: ${{ github.event.workflow_run.id }}
-          name: preview
-          path: dist
-      - name: Deploy to Netlify
-        id: netlify
-        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
-        with:
-          publish-dir: dist
-          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_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_PR_CINNY }}
-        timeout-minutes: 1
-      - name: Comment preview on PR
-        uses: thollander/actions-comment-pull-request@fabd468d3a1a0b97feee5f6b9e499eab0dd903f6
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          pr_number: ${{ steps.pr.outputs.id }}
-          comment_tag: ${{ steps.pr.outputs.id }}
-          message: |
-              Preview: ${{ steps.netlify.outputs.deploy-url }}
-              ⚠️ Exercise caution. Use test accounts. ⚠️

.github/workflows/docker-pr.yml

@@ -1,19 +0,0 @@
-name: 'Docker check'
-
-on:
-  pull_request:
-    paths:
-      - 'Dockerfile'
-      - '.github/workflows/docker-pr.yml'
-
-jobs:
-  docker-build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4.2.0
-      - name: Build Docker image
-        uses: docker/build-push-action@v6.18.0
-        with:
-          context: .
-          push: false

.github/workflows/lockfile.yml

@@ -1,26 +0,0 @@
-name: NPM Lockfile Changes
-
-on:
-  pull_request:
-    paths:
-      - 'package-lock.json'
-
-jobs:
-  lockfile_changes:
-    runs-on: ubuntu-latest
-    # Permission overwrite is required for Dependabot PRs, see "Common issues" below.
-    permissions:
-      contents: read
-      pull-requests: write
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4.2.0
-      - name: NPM Lockfile Changes
-        uses: codepunkt/npm-lockfile-changes@b40543471c36394409466fdb277a73a0856d7891
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          # Optional inputs, can be deleted safely if you are happy with default values.
-          collapsibleThreshold: 25
-          failOnDowngrade: false
-          path: package-lock.json
-          updateComment: true

.github/workflows/netlify-dev.yml

@@ -1,39 +0,0 @@
-name: Deploy to Netlify (dev)
-
-on:
-  push:
-    branches:
-      - dev
-
-jobs:
-  deploy-to-netlify:
-    name: Deploy to Netlify
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4.2.0
-      - name: Setup node
-        uses: actions/setup-node@v4.4.0
-        with:
-          node-version: 20.12.2
-          cache: 'npm'
-      - name: Install dependencies
-        run: npm ci
-      - name: Build app
-        env:
-          NODE_OPTIONS: '--max_old_space_size=4096'
-        run: npm run build
-      - name: Deploy to Netlify
-        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
-        with:
-          publish-dir: dist
-          deploy-message: 'Dev deploy ${{ github.sha }}'
-          enable-commit-comment: false
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          production-deploy: true
-          github-deployment-environment: nightly
-          github-deployment-description: 'Nightly deployment on each commit to dev branch'
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_DEV }}
-        timeout-minutes: 1

.github/workflows/prod-deploy.yml

@@ -1,99 +0,0 @@
-name: Production deploy
-
-on:
-  release:
-    types: [published]
-
-jobs:
-  deploy-and-tarball:
-    name: Netlify deploy and tarball
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4.2.0
-      - name: Setup node
-        uses: actions/setup-node@v4.4.0
-        with:
-          node-version: 20.12.2
-          cache: 'npm'
-      - name: Install dependencies
-        run: npm ci
-      - name: Build app
-        env:
-          NODE_OPTIONS: '--max_old_space_size=4096'
-        run: npm run build
-      - name: Deploy to Netlify
-        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
-        with:
-          publish-dir: dist
-          deploy-message: 'Prod deploy ${{ github.ref_name }}'
-          enable-commit-comment: false
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          production-deploy: true
-          github-deployment-environment: stable
-          github-deployment-description: 'Stable deployment on each release'
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_APP }}
-        timeout-minutes: 1
-      - name: Get version from tag
-        id: vars
-        run: echo "tag=${GITHUB_REF#refs/*/}" >> $GITHUB_OUTPUT
-      - name: Create tar.gz
-        run: tar -czvf cinny-${{ steps.vars.outputs.tag }}.tar.gz dist
-      - name: Sign tar.gz
-        run: |
-          echo '${{ secrets.GNUPG_KEY }}' | gpg --batch --import
-          # Sadly a few lines in the private key match a few lines in the public key,
-          # As a result just --export --armor gives us a few lines replaced with ***
-          # making it useless for importing the signing key. Instead, we dump it as
-          # non-armored and hex-encode it so that its printable.
-          echo "PGP Signing key, in raw PGP format in hex. Import with cat ... | xxd -r -p - | gpg --import"
-          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
-        with:
-          files: |
-            cinny-${{ steps.vars.outputs.tag }}.tar.gz
-            cinny-${{ steps.vars.outputs.tag }}.tar.gz.asc
-
-  publish-image:
-    name: Push Docker image to Docker Hub, ghcr
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4.2.0
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3.6.0
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.11.1
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3.5.0
-        with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-      - name: Login to the Container registry
-        uses: docker/login-action@v3.5.0
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@v5.8.0
-        with:
-          images: |
-            ${{ secrets.DOCKER_USERNAME }}/cinny
-            ghcr.io/${{ github.repository }}
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v6.18.0
-        with:
-          context: .
-          platforms: linux/amd64,linux/arm64
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}

CONTRIBUTING.md

@@ -1,44 +0,0 @@
-# Contributing to Cinny
-
-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
-> - Mention the project at local meetups and tell your friends/colleagues
-> - [Donate to us](https://cinny.in/#sponsor)
-
-## Bug reports
-
-Bug reports and feature suggestions must use descriptive and concise titles and be submitted to [GitHub Issues](https://github.com/ajbura/cinny/issues). Please use the search function to make sure that you are not submitting duplicates, and that a similar report or request has not already been resolved or rejected.
-
-## 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.
-
-**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.
-
-**Please use clean, concise titles for your pull requests.** We use commit squashing, so the final commit in the dev branch will carry the title of the pull request. For easier sorting in changelog, start your pull request titles using one of the verbs "Add", "Change", "Remove", or "Fix" (present tense).
-
-Example:
-
-|Not ideal|Better|
-|---|----|
-|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.
-
-**The smaller the set of changes in the pull request is, the quicker it can be reviewed and merged.** Splitting tasks into multiple smaller pull requests is often preferable.
-
-Also, we use [ESLint](https://eslint.org/) for clean and stylistically consistent code syntax, so make sure your pull request follow it.
-
-**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)

capacitor.config.json

@@ -0,0 +1,12 @@
+{
+  "appId": "com.paarrot.app",
+  "appName": "Paarrot",
+  "webDir": "dist",
+  "bundledWebRuntime": false,
+  "plugins": {
+    "LocalNotifications": {
+      "smallIcon": "ic_stat_paarrot",
+      "iconColor": "#FF8A00"
+    }
+  }
+}

docs/API-QUICKSTART.md

@@ -0,0 +1,172 @@
+# Paarrot API Quick Start
+
+A local HTTP API server for controlling Paarrot from external devices like Stream Deck, scripts, and automation tools.
+
+## 🚀 Getting Started
+
+The API server starts automatically when you run Paarrot. It listens on `http://127.0.0.1:33384`.
+
+### Test the API
+
+**Option 1: Using Postman**
+
+Import the Postman collection for easy testing:
+1. Open Postman
+2. Click **Import** → **File**
+3. Select `paarrot-api.postman_collection.json`
+4. All endpoints will be ready to use!
+
+The collection is automatically updated on git push.
+
+**Option 2: Using the test script**
+```bash
+node test-api.js
+```
+
+**Option 3: Using curl**
+```bash
+./test-api.sh
+```
+
+**Option 4: Manual curl commands**
+```bash
+# Health check
+curl http://127.0.0.1:33384/health
+
+# Toggle mute
+curl -X POST http://127.0.0.1:33384/mute/toggle
+
+# Send message
+curl -X POST http://127.0.0.1:33384/message/current \
+  -H "Content-Type: application/json" \
+  -d '{"message": "Hello from API!"}'
+```
+
+## 📝 Quick Reference
+
+### Common Endpoints
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/health` | GET | Check if API is running |
+| `/status` | GET | Get app status (mute, deafen, etc.) |
+| `/mute/toggle` | POST | Toggle microphone mute |
+| `/deafen/toggle` | POST | Toggle deafen |
+| `/channels` | GET | Get list of rooms |
+| `/channel` | POST | Switch to a room |
+| `/message/current` | POST | Send message to current room |
+
+## 🎮 Stream Deck Integration
+
+1. Install the "API Ninja" or "HTTP Request" plugin
+2. Create buttons with these settings:
+
+**Mute Toggle Button:**
+- URL: `http://127.0.0.1:33384/mute/toggle`
+- Method: POST
+
+**Quick Message Button:**
+- URL: `http://127.0.0.1:33384/message/current`
+- Method: POST
+- Body: `{"message": "BRB!"}`
+
+## 🔧 Integration with Paarrot
+
+To enable full functionality, you need to implement the action handlers in the Cinny frontend:
+
+1. Import the API handler in your app initialization:
+```typescript
+import { initPaarrotAPI } from './app/paarrot-api';
+
+// After Matrix client is initialized
+initPaarrotAPI(matrixClient);
+```
+
+2. Implement the TODO items in `cinny/src/app/paarrot-api.ts`:
+   - Mute/unmute logic (WebRTC audio)
+   - Deafen logic (WebRTC audio output)
+   - Navigation to rooms (router integration)
+   - Get current room from URL/state
+
+## 📖 Full Documentation
+
+See [API.md](API.md) for complete API documentation including:
+- All available endpoints
+- Request/response formats
+- Error handling
+- Code examples in multiple languages
+- Detailed integration guide
+
+## 🛠️ Configuration
+
+Edit `electron/api-server.js` to customize:
+- Port number (default: 33384)
+- Timeout duration (default: 10s)
+- CORS settings
+
+## 🐛 Troubleshooting
+
+**API not responding:**
+1. Check if Paarrot is running
+2. Look for "Paarrot API server listening" in console logs
+3. Verify port 33384 is not in use: `lsof -i :33384`
+
+**Actions not working:**
+1. Check browser console for errors
+2. Ensure `initPaarrotAPI()` is called in your app
+3. Implement the TODO items in `paarrot-api.ts`
+
+**Port in use:**
+Edit `electron/api-server.js` and change the port number in the constructor.
+
+## 📦 Files
+
+- `electron/api-server.js` - API server implementation
+- `cinny/src/app/paarrot-api.ts` - Client-side handler (needs implementation)
+- `test-api.js` - Node.js test script
+- `test-api.sh` - Bash test script
+- `API.md` - Full documentation
+
+## 🔐 Security
+
+- API only listens on localhost (127.0.0.1)
+- Not accessible from network
+- No authentication required (local only)
+- CORS enabled for all origins (safe since localhost only)
+
+## 💡 Examples
+
+**Python Script:**
+```python
+import requests
+
+def toggle_mute():
+    r = requests.post('http://127.0.0.1:33384/mute/toggle')
+    print(r.json())
+
+toggle_mute()
+```
+
+**JavaScript:**
+```javascript
+async function sendQuickMessage(msg) {
+  const res = await fetch('http://127.0.0.1:33384/message/current', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ message: msg })
+  });
+  return res.json();
+}
+```
+
+## 🎯 Next Steps
+
+1. Run Paarrot: `npm run dev`
+2. Test the API: `node test-api.js`
+3. Integrate the handler: Import and call `initPaarrotAPI()`
+4. Implement the TODO items in `paarrot-api.ts`
+5. Create Stream Deck buttons or automation scripts!
+
+---
+
+For more details, see [API.md](API.md)

docs/API.md

@@ -0,0 +1,537 @@
+# Paarrot API Server Documentation
+
+The Paarrot API server provides a local HTTP API for controlling the Paarrot desktop app from external applications like Stream Deck, keyboard macros, scripts, and other automation tools.
+
+## Server Details
+
+- **Base URL**: `http://127.0.0.1:33384`
+- **Protocol**: HTTP
+- **Content-Type**: `application/json`
+- **CORS**: Enabled for all origins
+
+## Authentication
+
+Currently, no authentication is required. The API server only listens on localhost (127.0.0.1) for security.
+
+## API Endpoints
+
+### Health Check
+
+Check if the API server is running.
+
+**Endpoint**: `GET /health`
+
+**Response**:
+```json
+{
+  "status": "ok",
+  "app": "Paarrot API",
+  "version": "1.0.0"
+}
+```
+
+---
+
+### Get Status
+
+Get the current status of the app (mute, deafen, current room, etc.).
+
+**Endpoint**: `GET /status`
+
+**Response**:
+```json
+{
+  "success": true,
+  "data": {
+    "muted": false,
+    "deafened": false,
+    "currentRoom": "!abc123:matrix.org",
+    "connected": true
+  }
+}
+```
+
+---
+
+### Mute/Unmute
+
+Set the mute status.
+
+**Endpoint**: `POST /mute`
+
+**Request Body**:
+```json
+{
+  "muted": true
+}
+```
+
+**Response**:
+```json
+{
+  "success": true,
+  "data": {
+    "muted": true
+  }
+}
+```
+
+---
+
+### Toggle Mute
+
+Toggle the current mute status.
+
+**Endpoint**: `POST /mute/toggle`
+
+**Response**:
+```json
+{
+  "success": true,
+  "data": {
+    "muted": true
+  }
+}
+```
+
+---
+
+### Deafen/Undeafen
+
+Set the deafen status (deafening also mutes).
+
+**Endpoint**: `POST /deafen`
+
+**Request Body**:
+```json
+{
+  "deafened": true
+}
+```
+
+**Response**:
+```json
+{
+  "success": true,
+  "data": {
+    "deafened": true
+  }
+}
+```
+
+---
+
+### Toggle Deafen
+
+Toggle the current deafen status.
+
+**Endpoint**: `POST /deafen/toggle`
+
+**Response**:
+```json
+{
+  "success": true,
+  "data": {
+    "deafened": true
+  }
+}
+```
+
+---
+
+### Change Channel/Room
+
+Switch to a different Matrix room.
+
+**Endpoint**: `POST /channel`
+
+**Request Body**:
+```json
+{
+  "roomId": "!abc123:matrix.org"
+}
+```
+
+**Response**:
+```json
+{
+  "success": true,
+  "data": {
+    "roomId": "!abc123:matrix.org",
+    "roomName": "General"
+  }
+}
+```
+
+---
+
+### Get Channels/Rooms
+
+Get a list of available rooms/channels.
+
+**Endpoint**: `GET /channels`
+
+**Response**:
+```json
+{
+  "success": true,
+  "data": [
+    {
+      "roomId": "!abc123:matrix.org",
+      "name": "General",
+      "server": "matrix.org",
+      "isDirect": false,
+      "avatar": null
+    },
+    {
+      "roomId": "!def456:matrix.org",
+      "name": "Random",
+      "server": "matrix.org",
+      "isDirect": false,
+      "avatar": null
+    },
+    {
+      "roomId": "!xyz789:example.com",
+      "name": "General",
+      "server": "example.com",
+      "isDirect": false,
+      "avatar": null
+    }
+  ]
+}
+```
+
+**Note**: The `server` field helps distinguish between rooms with the same name on different servers.
+
+---
+
+### Send Message
+
+Send a message to a specific room.
+
+**Endpoint**: `POST /message`
+
+**Request Body**:
+```json
+{
+  "roomId": "!abc123:matrix.org",
+  "message": "Hello from the API!"
+}
+```
+
+**Response**:
+```json
+{
+  "success": true,
+  "data": {
+    "eventId": "$abc123",
+    "roomId": "!abc123:matrix.org"
+  }
+}
+```
+
+---
+
+### Send Message to Current Room
+
+Send a message to the currently active room.
+
+**Endpoint**: `POST /message/current`
+
+**Request Body**:
+```json
+{
+  "message": "Hello from the API!"
+}
+```
+
+**Response**:
+```json
+{
+  "success": true,
+  "data": {
+    "eventId": "$abc123",
+    "roomId": "!abc123:matrix.org"
+  }
+}
+```
+
+---
+
+### Get Current Room
+
+Get information about the currently active room.
+
+**Endpoint**: `GET /room/current`
+
+**Response**:
+```json
+{
+  "success": true,
+  "data": {
+    "roomId": "!abc123:matrix.org",
+    "name": "General",
+    "server": "matrix.org",
+    "avatar": "mxc://matrix.org/abc123",
+    "isDirect": false
+  }
+}
+```
+
+---
+
+## Error Responses
+
+All endpoints return error responses in the following format:
+
+```json
+{
+  "success": false,
+  "error": "Error message here"
+}
+```
+
+Common HTTP status codes:
+- `200 OK` - Request successful
+- `400 Bad Request` - Missing or invalid parameters
+- `404 Not Found` - Endpoint not found
+- `500 Internal Server Error` - Server error
+
+---
+
+## Example Usage
+
+### cURL
+
+```bash
+# Toggle mute
+curl -X POST http://127.0.0.1:33384/mute/toggle
+
+# Send message to current room
+curl -X POST http://127.0.0.1:33384/message/current \
+  -H "Content-Type: application/json" \
+  -d '{"message": "Hello!"}'
+
+# Change channel
+curl -X POST http://127.0.0.1:33384/channel \
+  -H "Content-Type: application/json" \
+  -d '{"roomId": "!abc123:matrix.org"}'
+```
+
+### JavaScript/Node.js
+
+```javascript
+const fetch = require('node-fetch');
+
+// Toggle mute
+async function toggleMute() {
+  const response = await fetch('http://127.0.0.1:33384/mute/toggle', {
+    method: 'POST'
+  });
+  const data = await response.json();
+  console.log('Muted:', data.data.muted);
+}
+
+// Send message
+async function sendMessage(roomId, message) {
+  const response = await fetch('http://127.0.0.1:33384/message', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({ roomId, message })
+  });
+  const data = await response.json();
+  console.log('Message sent:', data.data.eventId);
+}
+```
+
+### Python
+
+```python
+import requests
+
+# Toggle mute
+def toggle_mute():
+    response = requests.post('http://127.0.0.1:33384/mute/toggle')
+    data = response.json()
+    print('Muted:', data['data']['muted'])
+
+# Send message
+def send_message(room_id, message):
+    response = requests.post('http://127.0.0.1:33384/message', json={
+        'roomId': room_id,
+        'message': message
+    })
+    data = response.json()
+    print('Message sent:', data['data']['eventId'])
+```
+
+---
+
+## Stream Deck Integration
+
+To integrate with Stream Deck:
+
+1. Install the "API Ninja" or "HTTP Request" plugin for Stream Deck
+2. Create a button with the following configuration:
+   - **URL**: `http://127.0.0.1:33384/mute/toggle`
+   - **Method**: POST
+   - **Headers**: `Content-Type: application/json`
+
+Example configurations:
+
+**Mute Toggle Button**:
+- URL: `http://127.0.0.1:33384/mute/toggle`
+- Method: POST
+
+**Deafen Toggle Button**:
+- URL: `http://127.0.0.1:33384/deafen/toggle`
+- Method: POST
+
+**Send Quick Message**:
+- URL: `http://127.0.0.1:33384/message/current`
+- Method: POST
+- Body: `{"message": "BRB!"}`
+
+---
+
+## Client-Side Implementation
+
+To enable the API functionality in the Paarrot app, you need to implement the action handlers in your Matrix client code. The API server sends actions via IPC to the renderer process, which should handle them and respond.
+
+### Example Handler (TypeScript/React)
+
+Add this to your app initialization:
+
+```typescript
+// Listen for API actions from the Electron API server
+if (window.electron?.api?.onAction) {
+  window.electron.api.onAction(async (action:  {
+    action: string;
+    params: any;
+    responseChannel: string;
+  }) => {
+    try {
+      let result;
+      
+      switch (action.action) {
+        case 'toggle-mute':
+          // Toggle microphone mute
+          result = await toggleMicrophone();
+          break;
+          
+        case 'set-mute':
+          // Set microphone mute state
+          result = await setMicrophone(action.params.muted);
+          break;
+          
+        case 'toggle-deafen':
+          // Toggle deafen (mute speakers)
+          result = await toggleDeafen();
+          break;
+          
+        case 'set-deafen':
+          // Set deafen state
+          result = await setDeafen(action.params.deafened);
+          break;
+          
+        case 'change-channel':
+          // Navigate to a different room
+          result = await changeRoom(action.params.roomId);
+          break;
+          
+        case 'get-channels':
+          // Get list of rooms
+          result = await getRoomList();
+          break;
+          
+        case 'send-message':
+          // Send message to specific room
+          result = await sendMessage(action.params.roomId, action.params.message);
+          break;
+          
+        case 'send-message-current':
+          // Send message to current room
+          result = await sendMessageToCurrent(action.params.message);
+          break;
+          
+        case 'get-current-room':
+          // Get current room info
+          result = await getCurrentRoomInfo();
+          break;
+          
+        case 'get-status':
+          // Get current app status
+          result = await getAppStatus();
+          break;
+          
+        default:
+          throw new Error(`Unknown action: ${action.action}`);
+      }
+      
+      // Send success response back
+      window.electron.api.sendResponse(action.responseChannel, {
+        success: true,
+        data: result
+      });
+    } catch (error) {
+      // Send error response back
+      window.electron.api.sendResponse(action.responseChannel, {
+        success: false,
+        error: error.message
+      });
+    }
+  });
+}
+```
+
+---
+
+## Configuration
+
+The API server can be configured by modifying `electron/api-server.js`:
+
+- **Default Port**: 33384 (can be changed in the constructor)
+- **Bind Address**: 127.0.0.1 (localhost only for security)
+- **Timeout**: 10 seconds for actions
+
+---
+
+## Security Notes
+
+1. The API server only listens on localhost (127.0.0.1) and is not accessible from the network
+2. No authentication is implemented - anyone with local access can control the app
+3. Consider adding API key authentication if needed for your use case
+4. CORS is enabled for all origins since it's localhost only
+
+---
+
+## Troubleshooting
+
+**API server not starting**:
+- Check if port 33384 is already in use
+- Check console logs for errors
+- Verify Express is installed: `npm install express cors body-parser`
+
+**Actions not working**:
+- Ensure the client-side handler is implemented
+- Check browser console for errors
+- Verify the action names match between API server and client
+
+**Timeout errors**:
+- Actions must respond within 10 seconds
+- Check if the Matrix client is initialized
+- Verify the action handler is registered
+
+---
+
+## Future Enhancements
+
+Potential features to add:
+- WebSocket support for real-time events
+- Authentication with API keys
+- Voice channel controls (join/leave)
+- User status updates
+- Notification controls
+- Screen sharing controls

docs/PLUGINS.md

@@ -0,0 +1,157 @@
+# Paarrot Plugin System
+
+The Paarrot desktop client includes a powerful plugin system that allows you to extend and customize your Matrix experience.
+
+## What are Plugins?
+
+Plugins are small JavaScript modules that run inside Paarrot and can:
+- Add custom commands
+- Modify the UI
+- React to Matrix events
+- Add new settings sections
+- Enhance functionality
+
+## Installing Plugins
+
+### From the Plugin Marketplace
+
+1. Open **Settings** → **Plugins**
+2. Browse the **Marketplace** tab
+3. Click **Install** on any plugin you want to add
+4. The plugin will be downloaded and enabled automatically
+
+### Manual Installation
+
+1. Download a plugin ZIP file
+2. Extract it to your plugins directory:
+   - **Windows**: `%APPDATA%\paarrot\plugins\`
+   - **Linux**: `~/.config/Paarrot/plugins/`
+   - **macOS**: `~/Library/Application Support/Paarrot/plugins/`
+3. Restart Paarrot
+4. Enable the plugin in **Settings** → **Plugins** → **Installed**
+
+## Managing Plugins
+
+### Viewing Installed Plugins
+
+Go to **Settings** → **Plugins** → **Installed** to see all installed plugins.
+
+### Enabling/Disabling Plugins
+
+Click the toggle switch next to any plugin to enable or disable it. Disabled plugins won't run or use resources.
+
+### Uninstalling Plugins
+
+Click the **Uninstall** button next to any plugin to remove it completely.
+
+### Searching Plugins
+
+Use the search bar to filter plugins by name, description, author, or tags.
+
+## Plugin Security
+
+⚠️ **Important Security Information**
+
+Plugins run with access to your Matrix client and can:
+- Read your messages
+- Send messages on your behalf
+- Access your room list
+- Modify app behavior
+
+**Only install plugins from trusted sources!**
+
+### Safety Tips
+
+1. **Check the author**: Install plugins from known developers
+2. **Read reviews**: Look for community feedback
+3. **Review permissions**: Understand what the plugin can do
+4. **Keep updated**: Update plugins regularly for security fixes
+5. **Report issues**: If a plugin behaves suspiciously, report it immediately
+
+## Developing Plugins
+
+Want to create your own plugin? Check out the [Plugin API Reference](docs/PLUGIN_API.md).
+
+### Quick Start
+
+1. Create a plugin directory with:
+   - `index.js` - Your plugin code
+   - `plugin-metadata.json` - Plugin information
+
+2. Implement the plugin interface:
+```javascript
+module.exports = {
+  onLoad: async (context) => {
+    // Your plugin initialization
+    console.log('Plugin loaded!');
+  },
+  onUnload: async () => {
+    // Cleanup when disabled
+  }
+};
+```
+
+3. Test locally by copying to your plugins directory
+
+4. Publish to the [Plugin Directory](https://github.com/Paarrot/Plugin-Directory)
+
+## Plugin API
+
+Plugins have access to:
+- **Matrix Client**: Full matrix-js-sdk client instance
+- **React**: For building UI components
+- **Commands**: Register custom slash commands
+- **UI Buttons**: Inject buttons into 11 locations across the app (nav lists, toolbars, headers, sidebar)
+- **UI Renderers**: Custom message and content renderers
+- **Settings**: Add custom settings sections per plugin
+- **Themes**: Register custom themes that appear in the theme selector
+- **Matrix Events**: Hook into raw Matrix events
+- **Timers**: Background intervals and timeouts, auto-cleaned on unload
+- **Notifications**: System notifications
+
+See the [Plugin API Reference](docs/PLUGIN_API.md) and [Button Registration API](docs/PLUGIN_BUTTON_API.md) for complete documentation.
+
+## Example Plugins
+
+Check out the `example-plugin/` directory for a simple example, or the `plugins/example-showcase-plugin/` for a full demonstration of all 11 UI button locations.
+
+## Troubleshooting
+
+### Plugin Won't Load
+
+1. Check the browser console for errors (F12 → Console)
+2. Look for `[PluginLoader]` messages
+3. Verify `index.js` exists in the plugin directory
+4. Ensure `plugin-metadata.json` is valid JSON
+
+### Plugin Crashes
+
+1. Disable the plugin in Settings → Plugins
+2. Check console for error stack traces
+3. Report the issue to the plugin author
+4. Try reinstalling the plugin
+
+### Performance Issues
+
+If Paarrot becomes slow:
+1. Disable plugins one by one to identify the culprit
+2. Check for memory leaks in the console
+3. Contact the plugin author with details
+
+## Plugin Directory
+
+The official Paarrot Plugin Directory is maintained at:
+https://github.com/Paarrot/Plugin-Directory
+
+Submit your plugins there to make them available in the marketplace!
+
+## Support
+
+- **Plugin API Reference**: [docs/PLUGIN_API.md](docs/PLUGIN_API.md)
+- **Button API Reference**: [docs/PLUGIN_BUTTON_API.md](docs/PLUGIN_BUTTON_API.md)
+- **Issues**: https://github.com/Paarrot/cinny-desktop/issues
+- **Community**: Join our Matrix room for plugin development help
+
+## License
+
+Plugins are independent works and have their own licenses. Check each plugin's metadata for license information.

docs/PLUGIN_BUTTON_API.md

@@ -0,0 +1,432 @@
+# Plugin Button Registration API
+
+An easy way to register plugin buttons in various UI locations with positioning and grouping support.
+
+## Example Plugins
+
+- **[example-button-plugin/](example-button-plugin/)** - Simple examples showing basic usage patterns
+- **[example-showcase-plugin/](example-showcase-plugin/)** - Complete demonstration of ALL 11 locations ⭐
+
+## UI Locations
+
+Buttons render in two visual styles depending on location — **nav list rows** (icon + label, full width) or **icon buttons** (compact, toolbar/header style).
+
+### Nav List Rows
+
+These render as full-width list entries matching the style of built-in items like "Create Room" and "Message Search":
+
+| Location | Where it appears |
+|---|---|
+| `channel-list` | Space channel list, below Lobby and Message Search |
+| `home-section` | Home panel, inside the Rooms category above the room list |
+| `direct-messages` | Direct Messages panel, below "Create Chat" and above the CHATS dropdown |
+
+### Icon Buttons
+
+These render as compact icon buttons inline with other toolbar/header controls:
+
+| Location | Where it appears |
+|---|---|
+| `text-composer-toolbar` | Message composer toolbar (alongside emoji, sticker buttons) |
+| `composer-actions` | Left side of the composer, beside the `+` attach button |
+| `room-header` | Top room header bar, before the ⋮ menu button |
+| `room-menu` | Room ⋮ dropdown menu |
+| `message-actions` | Message hover action bar |
+| `user-menu` | Right-click popup on the user avatar |
+| `search-notification-section` | Notifications page header (right side) |
+| `sidebar-actions` | Left sidebar — appears in **two** places: above the Explore Servers icon, and above the Search icon in the sticky bottom section |
+
+> 💡 **Tip:** Install the [example-showcase-plugin](example-showcase-plugin/) to see exactly where each location appears in the UI!
+
+## Basic Usage
+
+### Simple Button
+
+```javascript
+module.exports = {
+  name: 'my-plugin',
+  version: '1.0.0',
+  
+  onLoad: (context) => {
+    context.ui.registerButton({
+      id: 'my-button',
+      location: 'text-composer-toolbar',
+      label: 'My Action',
+      icon: '🎨',
+      onClick: () => {
+        context.log('Button clicked!');
+      }
+    });
+  },
+  
+  onUnload: () => {
+    // Buttons are automatically cleaned up on plugin unload
+  }
+};
+```
+
+## Positioning
+
+### Before/After Positioning
+
+Place your button before or after existing buttons:
+
+```javascript
+context.ui.registerButton({
+  id: 'my-button',
+  location: 'text-composer-toolbar',
+  label: 'My Action',
+  icon: '✨',
+  position: {
+    before: 'emoji-picker-button', // Place before emoji picker
+    // OR
+    after: 'sticker-button' // Place after sticker button
+  }
+});
+```
+
+### Grouping Buttons
+
+Group related buttons together:
+
+```javascript
+context.ui.registerButton({
+  id: 'action-1',
+  location: 'text-composer-toolbar',
+  label: 'Action 1',
+  icon: '1️⃣',
+  position: {
+    group: 'my-plugin-tools',
+    order: 1 // Lower numbers appear first
+  }
+});
+
+context.ui.registerButton({
+  id: 'action-2',
+  location: 'text-composer-toolbar',
+  label: 'Action 2',
+  icon: '2️⃣',
+  position: {
+    group: 'my-plugin-tools',
+    order: 2
+  }
+});
+```
+
+### Combined Positioning and Grouping
+
+Place a group before/after other elements:
+
+```javascript
+context.ui.registerButton({
+  id: 'tool-1',
+  location: 'text-composer-toolbar',
+  label: 'Tool 1',
+  icon: '🔧',
+  position: {
+    group: 'my-tools',
+    after: 'emoji-picker-button',
+    order: 1
+  }
+});
+
+context.ui.registerButton({
+  id: 'tool-2',
+  location: 'text-composer-toolbar',
+  label: 'Tool 2',
+  icon: '🔨',
+  position: {
+    group: 'my-tools',
+    order: 2
+  }
+});
+```
+
+## Complete Example
+
+```javascript
+module.exports = {
+  name: 'custom-tools',
+  version: '1.0.0',
+  
+  onLoad: (context) => {
+    // Nav list row — appears below "Create Chat" in the DMs panel
+    context.ui.registerButton({
+      id: 'dm-favorites',
+      location: 'direct-messages',
+      label: 'Favourites',
+      icon: '⭐',
+      onClick: () => context.log('Favourites clicked!')
+    });
+
+    // Nav list row — appears in the space channel list
+    context.ui.registerButton({
+      id: 'quick-access',
+      location: 'channel-list',
+      label: 'Quick Access',
+      icon: '⚡',
+      onClick: () => context.log('Quick access clicked!')
+    });
+
+    // Icon button — appears in the message composer toolbar
+    context.ui.registerButton({
+      id: 'format-bold',
+      location: 'text-composer-toolbar',
+      label: 'Bold',
+      icon: '𝐁',
+      position: {
+        group: 'custom-formatting',
+        order: 1
+      },
+      onClick: () => context.log('Bold clicked!')
+    });
+
+    // Icon button — appears in the room header
+    context.ui.registerButton({
+      id: 'special-search',
+      location: 'room-header',
+      label: 'Special Search',
+      icon: '🔍',
+      position: { after: 'search-button' },
+      onClick: () => context.log('Special search clicked!')
+    });
+
+    // Sidebar icon — appears above Explore and above Search
+    context.ui.registerButton({
+      id: 'plugin-panel',
+      location: 'sidebar-actions',
+      label: 'Plugin Panel',
+      icon: '🧩',
+      onClick: () => context.log('Plugin panel clicked!')
+    });
+  },
+  
+  onUnload: () => {
+    // All registered buttons are automatically cleaned up
+  }
+};
+```
+
+## Unregistering Buttons
+
+Buttons are automatically unregistered when the plugin is unloaded. To manually unregister:
+
+```javascript
+context.ui.unregisterButton('my-button-id');
+```
+
+## TypeScript Types
+
+```typescript
+import type { UIButtonDefinition, UIButtonPosition, UILocation } from '@paarrot/plugin-manager';
+
+const button: UIButtonDefinition = {
+  id: 'my-button',
+  location: 'text-composer-toolbar',
+  label: 'My Action',
+  icon: '🎨',
+  position: {
+    group: 'my-tools',
+    after: 'emoji-picker',
+    order: 1
+  },
+  onClick: () => console.log('Clicked!')
+};
+```
+
+
+## Basic Usage
+
+### Simple Button
+
+```javascript
+module.exports = {
+  name: 'my-plugin',
+  version: '1.0.0',
+  
+  onLoad: (context) => {
+    context.ui.registerButton({
+      id: 'my-button',
+      location: 'text-composer-toolbar',
+      label: 'My Action',
+      icon: '🎨',
+      onClick: () => {
+        context.log('Button clicked!');
+      }
+    });
+  },
+  
+  onUnload: () => {
+    // Buttons are automatically cleaned up on plugin unload
+  }
+};
+```
+
+## Positioning
+
+### Before/After Positioning
+
+Place your button before or after existing buttons:
+
+```javascript
+context.ui.registerButton({
+  id: 'my-button',
+  location: 'text-composer-toolbar',
+  label: 'My Action',
+  icon: '✨',
+  position: {
+    before: 'emoji-picker-button', // Place before emoji picker
+    // OR
+    after: 'sticker-button' // Place after sticker button
+  }
+});
+```
+
+### Grouping Buttons
+
+Group related buttons together:
+
+```javascript
+context.ui.registerButton({
+  id: 'action-1',
+  location: 'text-composer-toolbar',
+  label: 'Action 1',
+  icon: '1️⃣',
+  position: {
+    group: 'my-plugin-tools',
+    order: 1 // Lower numbers appear first
+  }
+});
+
+context.ui.registerButton({
+  id: 'action-2',
+  location: 'text-composer-toolbar',
+  label: 'Action 2',
+  icon: '2️⃣',
+  position: {
+    group: 'my-plugin-tools',
+    order: 2
+  }
+});
+```
+
+### Combined Positioning and Grouping
+
+Place a group before/after other elements:
+
+```javascript
+context.ui.registerButton({
+  id: 'tool-1',
+  location: 'text-composer-toolbar',
+  label: 'Tool 1',
+  icon: '🔧',
+  position: {
+    group: 'my-tools',
+    after: 'emoji-picker-button',
+    order: 1
+  }
+});
+
+context.ui.registerButton({
+  id: 'tool-2',
+  location: 'text-composer-toolbar',
+  label: 'Tool 2',
+  icon: '🔨',
+  position: {
+    group: 'my-tools',
+    order: 2
+  }
+});
+```
+
+## Complete Example
+
+```javascript
+module.exports = {
+  name: 'custom-tools',
+  version: '1.0.0',
+  
+  onLoad: (context) => {
+    // Nav list row — appears below "Create Chat" in the DMs panel
+    context.ui.registerButton({
+      id: 'dm-favorites',
+      location: 'direct-messages',
+      label: 'Favourites',
+      icon: '⭐',
+      onClick: () => context.log('Favourites clicked!')
+    });
+
+    // Nav list row — appears in the space channel list
+    context.ui.registerButton({
+      id: 'quick-access',
+      location: 'channel-list',
+      label: 'Quick Access',
+      icon: '⚡',
+      onClick: () => context.log('Quick access clicked!')
+    });
+
+    // Icon button — appears in the message composer toolbar
+    context.ui.registerButton({
+      id: 'format-bold',
+      location: 'text-composer-toolbar',
+      label: 'Bold',
+      icon: '𝐁',
+      position: {
+        group: 'custom-formatting',
+        order: 1
+      },
+      onClick: () => context.log('Bold clicked!')
+    });
+
+    // Icon button — appears in the room header
+    context.ui.registerButton({
+      id: 'special-search',
+      location: 'room-header',
+      label: 'Special Search',
+      icon: '🔍',
+      position: { after: 'search-button' },
+      onClick: () => context.log('Special search clicked!')
+    });
+
+    // Sidebar icon — appears above Explore and above Search
+    context.ui.registerButton({
+      id: 'plugin-panel',
+      location: 'sidebar-actions',
+      label: 'Plugin Panel',
+      icon: '🧩',
+      onClick: () => context.log('Plugin panel clicked!')
+    });
+  },
+  
+  onUnload: () => {
+    // All registered buttons are automatically cleaned up
+  }
+};
+```
+
+## Unregistering Buttons
+
+Buttons are automatically unregistered when the plugin is unloaded. To manually unregister:
+
+```javascript
+context.ui.unregisterButton('my-button-id');
+```
+
+## TypeScript Types
+
+```typescript
+import type { UIButtonDefinition, UIButtonPosition, UILocation } from '@paarrot/plugin-manager';
+
+const button: UIButtonDefinition = {
+  id: 'my-button',
+  location: 'text-composer-toolbar',
+  label: 'My Action',
+  icon: '🎨',
+  position: {
+    group: 'my-tools',
+    after: 'emoji-picker',
+    order: 1
+  },
+  onClick: () => console.log('Clicked!')
+};
+```

docs/PLUGIN_SYSTEM_IMPLEMENTATION.md

@@ -0,0 +1,207 @@
+# Plugin System Wishlist - Implementation Summary
+
+All requested features have been implemented! 🎉
+
+## ✅ Implemented Features
+
+### 1. ✅ Enhanced Slash Commands
+- **Simple commands**: `ctx.commands.register({ name: "shrug", run: () => "¯\\_(ツ)_/¯" })`
+- **Commands with args**: `ctx.commands.register({ name: "echo", args: ["text"], run: ({ text }) => text })`
+- Automatic argument parsing
+- Execution API: `ctx.commands.execute(name, args)`
+
+### 2. ✅ Message Interceptors
+- **Before send**: `ctx.messages.onBeforeSend((msg) => { msg.content = "modified" })`
+- **On receive**: `ctx.messages.onReceive((msg) => { /* process */ })`
+- Full MessageContext with content, roomId, metadata
+- Async support for interceptors
+
+### 3. ✅ Custom Renderers & Button Registration
+- **Register renderer**: `ctx.ui.registerRenderer("message", (msg, defaultRenderer) => { /* render */ })`
+- **Unregister renderer**: `ctx.ui.unregisterRenderer("message")`
+- **Register button**: `ctx.ui.registerButton({ id, location, label, icon, onClick })`
+- **Unregister button**: `ctx.ui.unregisterButton(id)`
+- 11 UI locations across nav lists, toolbars, headers, sidebar, and menus
+- Nav list rows (icon + label) for `channel-list`, `home-section`, `direct-messages`
+- Icon buttons for all other locations
+- Positioning and grouping support (`before`, `after`, `group`, `order`)
+- Auto-cleanup on plugin unload
+- See [PLUGIN_BUTTON_API.md](PLUGIN_BUTTON_API.md) for full reference
+
+### 4. ✅ Settings UI Per Plugin
+- **Define schema**: `ctx.settings.define({ theme: { type: "select", options: [...] } })`
+- **Supported types**: string, number, boolean, select, color
+- **Get/Set**: `ctx.settings.get(key)` / `ctx.settings.set(key, value)`
+- Auto-persisted to localStorage
+- No JSON editing needed!
+
+### 5. ✅ Hot Reload
+- **API**: `pluginRegistry.reloadPlugin(pluginId, newPlugin, newContext)`
+- Auto-cleanup of old plugin resources
+- Maintains enabled/disabled state
+- Dev-friendly workflow
+
+### 6. ✅ Dependency System
+- **Declare**: `dependencies: { "paarrot.core-utils": "^1.0.0" }`
+- **Require**: `const utils = ctx.require("paarrot.utils")`
+- Error handling for missing dependencies
+- Plugin exports system
+
+### 7. ✅ Raw Matrix Events Hook
+- **Full SDK access**: `ctx.matrix.on("m.room.message", (ev) => { })`
+- **Any event type**: Room.timeline, sync, RoomState.events, etc.
+- Direct Matrix.js SDK integration
+- Power users will go nuts!
+
+### 8. ✅ Background Tasks / Intervals
+- **Interval**: `ctx.timers.setInterval(() => { /* cursed shit */ }, 10000)`
+- **Timeout**: `ctx.timers.setTimeout(() => { }, 5000)`
+- **Clear**: `ctx.timers.clearInterval(id)` / `ctx.timers.clearTimeout(id)`
+- Auto-cleanup on plugin unload
+- Perfect for bots, reminders, auto-cleanup
+
+### 9. ✅ Notifications API
+- **Simple**: `ctx.notify("Oi")`
+- **Advanced**: `ctx.notify({ title: "Oi", body: "New message from Steve", type: "info" })`
+- Action buttons support
+- Custom duration
+
+### 10. ✅ Plugin Logs Panel
+- **Logging**: `ctx.log()`, `ctx.warn()`, `ctx.error()`
+- Per-plugin log storage
+- Visible in `pluginRegistry.getLogs(pluginId)`
+- Cleared on plugin unload
+- Max 1000 logs retained
+
+## 🎯 Bonus Features
+
+- **Plugin exports**: Share functionality between plugins
+- **Automatic cleanup**: Timers, handlers, resources auto-cleaned on unload
+- **Error isolation**: Plugin errors don't crash the app
+- **Type safety**: Full TypeScript definitions
+- **Sandboxed execution**: Plugins run in controlled environment
+- **Rich context**: Full Matrix client, React, all APIs
+
+## 📁 Files Changed
+
+### Core System
+- [`PluginAPI.ts`](cinny/src/app/features/settings/plugins/PluginAPI.ts) - Enhanced with all APIs
+- [`PluginLoader.tsx`](cinny/src/app/features/settings/plugins/PluginLoader.tsx) - Complete rewrite with context creation
+- [`index.ts`](cinny/src/app/features/settings/plugins/index.ts) - Exports updated
+
+### Documentation
+- [`PLUGIN_DEVELOPMENT.md`](cinny/src/app/features/settings/plugins/PLUGIN_DEVELOPMENT.md) - Comprehensive guide
+- [`PLUGINS.md`](PLUGINS.md) - User guide
+- [`example-plugin/index.js`](example-plugin/index.js) - Full-featured example
+
+### Integration
+- [`ClientRoot.tsx`](cinny/src/app/pages/client/ClientRoot.tsx) - PluginLoader integrated
+- [`main.js`](electron/main.js) - IPC handler for reading plugin code
+- [`preload.js`](electron/preload.js) - readPluginCode API exposed
+- [`ext.d.ts`](cinny/src/ext.d.ts) - TypeScript definitions
+
+## 🚀 Usage Examples
+
+### Command with Args
+```javascript
+ctx.commands.register({
+  name: "echo",
+  args: ["text"],
+  run: ({ text }) => text
+});
+```
+
+### Message Interceptor
+```javascript
+ctx.messages.onBeforeSend((msg) => {
+  if (msg.content === "brb") {
+    msg.content = "be right back ya legend";
+  }
+});
+```
+
+### Custom Settings
+```javascript
+ctx.settings.define({
+  theme: { type: "select", options: ["dark", "light"] },
+  spamFilter: { type: "boolean", default: true }
+});
+```
+
+### Background Tasks
+```javascript
+ctx.timers.setInterval(() => {
+  // do cursed shit every 10s
+}, 10000);
+```
+
+### Raw Matrix Events
+```javascript
+ctx.matrix.on("m.room.message", (ev) => {
+  ctx.log('Message:', ev.getContent().body);
+});
+```
+
+### Plugin Dependencies
+```javascript
+const utils = ctx.require("paarrot.utils");
+utils.doSomething();
+```
+
+## 🎨 Plugin API Summary
+
+```typescript
+interface PluginContext {
+  pluginId: string;
+  matrixClient: MatrixClient;
+  React: typeof import('react');
+  
+  commands: {
+    register: (command: PluginCommand) => void;
+    unregister: (name: string) => void;
+    execute: (name: string, args: Record<string, any>) => Promise<string | void>;
+  };
+  
+  messages: {
+    onBeforeSend: (interceptor: MessageInterceptor) => void;
+    onReceive: (interceptor: MessageInterceptor) => void;
+  };
+  
+  ui: {
+    registerButton: (button: UIButtonDefinition) => void;
+    unregisterButton: (id: string) => void;
+    registerRenderer: (type: string, renderer: CustomRenderer) => void;
+    unregisterRenderer: (type: string) => void;
+  };
+  
+  settings: {
+    define: (schema: SettingsSchema) => void;
+    get: <T = any>(key: string) => T | undefined;
+    set: (key: string, value: any) => void;
+  };
+  
+  matrix: {
+    on: (eventType: string, handler: (event: MatrixEvent) => void) => void;
+    off: (eventType: string, handler: (event: MatrixEvent) => void) => void;
+  };
+  
+  timers: {
+    setInterval: (callback: () => void, ms: number) => number;
+    setTimeout: (callback: () => void, ms: number) => number;
+    clearInterval: (id: number) => void;
+    clearTimeout: (id: number) => void;
+  };
+  
+  notify: (options: NotificationOptions | string) => void;
+  log: (...args: any[]) => void;
+  warn: (...args: any[]) => void;
+  error: (...args: any[]) => void;
+  require: (pluginId: string) => any;
+}
+```
+
+## 🔥 The Result
+
+A **production-ready plugin system** that rivals Discord, VSCode, and other extensible apps. Plugin developers will have everything they need to build powerful extensions without fighting the framework.
+
+**No compromises. All features implemented. Ready to ship.**

index.html

@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <base href="./" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
     <title>Paarrot</title>
@@ -17,7 +18,7 @@
     />
 
     <meta property="og:title" content="Paarrot" />
-    <meta property="og:url" content="https://synbox.ruv.wtf:8418/litruv/cinny-desktop" />
+    <meta property="og:url" content="https://github.com/Paarrot/Paarrot-Desktop" />
     <meta property="og:image" content="./public/res/android/android-chrome-192x192.png" />
     <meta
       property="og:description"
@@ -85,7 +86,7 @@
       href="./public/res/apple/apple-touch-icon-180x180.png"
     />
   </head>
-  <body id="appBody">
+  <body id="appBody" style="background-color: #262626;">
     <script>
       window.global ||= window;
     </script>

package-lock.json

@@ -12,7 +12,10 @@
         "@atlaskit/pragmatic-drag-and-drop": "1.1.6",
         "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
         "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
+        "@capacitor/core": "8.3.4",
+        "@capacitor/local-notifications": "8.2.0",
         "@fontsource/inter": "4.5.14",
+        "@paarrot/plugin-manager": "git+http://synbox.ruv.wtf:8418/litruv/plugin-manager.git",
         "@tanstack/react-query": "5.24.1",
         "@tanstack/react-query-devtools": "5.24.1",
         "@tanstack/react-virtual": "3.2.0",
@@ -1668,6 +1671,24 @@
       "integrity": "sha512-wJ8ReQbHxsAfXhrf9ixl0aYbZorRuOWpBNzm8pL8ftmSxQx/wnJD5Eg861NwJU/czy2VXFIebCeZnZrI9rktIQ==",
       "license": "(Apache-2.0 AND BSD-3-Clause)"
     },
+    "node_modules/@capacitor/core": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.3.4.tgz",
+      "integrity": "sha512-CqRQCkb6HXxcx/N7s+hHTN6ef2CmamFiRMITwm4qB840ph56mS42bzUgn6tKCP+RZjdDweiRHj9ytDDeN6jFag==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@capacitor/local-notifications": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/local-notifications/-/local-notifications-8.2.0.tgz",
+      "integrity": "sha512-fvLY0w2w4MiX+DD4+Wv4DOwOLdzKZsMDwAcRv/Juudd+QbKbn69s6cM3xVqPwAiDqfnqsY4/S8xtQD6M73wY2A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@capacitor/core": ">=8.0.0"
+      }
+    },
     "node_modules/@emotion/hash": {
       "version": "0.9.2",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
@@ -2333,6 +2354,10 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@paarrot/plugin-manager": {
+      "version": "1.0.0",
+      "resolved": "git+http://synbox.ruv.wtf:8418/litruv/plugin-manager.git#6c389381df3966568a40c39d8661f9a4300f7819"
+    },
     "node_modules/@react-aria/breadcrumbs": {
       "version": "3.5.20",
       "resolved": "https://registry.npmjs.org/@react-aria/breadcrumbs/-/breadcrumbs-3.5.20.tgz",

package.json

@@ -23,7 +23,10 @@
     "@atlaskit/pragmatic-drag-and-drop": "1.1.6",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
+    "@capacitor/core": "8.3.4",
+    "@capacitor/local-notifications": "8.2.0",
     "@fontsource/inter": "4.5.14",
+    "@paarrot/plugin-manager": "git+http://synbox.ruv.wtf:8418/litruv/plugin-manager.git",
     "@tanstack/react-query": "5.24.1",
     "@tanstack/react-query-devtools": "5.24.1",
     "@tanstack/react-virtual": "3.2.0",

public/res/svg/notification.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.05922,0,0,1.05922,-0.562821,-0.480534)">
+        <g transform="matrix(1.6762,0,0,1.6762,-4.50707,-10.7901)">
+            <path d="M4.624,14.382C4.624,14.382 1.358,10.79 5.108,8.336C5.501,8.316 7.14,8.899 7.18,10.368C7.22,11.836 5.641,11.172 5.108,11.856C4.575,12.54 4.454,14.121 4.624,14.382Z"/>
+        </g>
+        <g transform="matrix(1.6762,0,0,1.6762,-4.50707,-10.7901)">
+            <path d="M5.08,13.547C5.08,13.547 7.28,14.842 7.291,10.74C7.592,10.971 8.588,12.107 7.713,13.777C6.838,15.446 5.392,14.322 5.08,13.547Z"/>
+        </g>
+        <g transform="matrix(1.6762,0,0,1.6762,-4.50707,-10.7901)">
+            <path d="M5.921,14.763C5.584,14.449 6.374,15.403 6.704,16.642C6.873,16.232 8.282,17.562 11.166,14.247C12.324,12.581 13.244,11.279 11.249,8.874C9.254,6.469 6.507,6.615 5.469,7.581C4.431,8.546 5.35,7.566 6.653,8.667C7.52,9.399 7.444,10.431 7.444,10.431C7.774,10.551 9.12,12.332 7.935,14.099C7.205,15.187 6.259,15.076 5.921,14.763Z"/>
+        </g>
+    </g>
+</svg>

src/app/components/AngleSelector.tsx

@@ -0,0 +1,189 @@
+import React, { useRef, useCallback, useState } from 'react';
+import { Box, Text, toRem, color } from 'folds';
+
+/**
+ * Props for the AngleSelector component
+ */
+export interface AngleSelectorProps {
+  /** Current angle in degrees (0-360) */
+  value: number;
+  /** Callback when angle changes */
+  onChange: (angle: number) => void;
+  /** Size of the selector in pixels */
+  size?: number;
+  /** Whether the component is disabled */
+  disabled?: boolean;
+}
+
+/**
+ * A circular angle selector similar to Photoshop's drop shadow angle control.
+ * Click or drag around the circle to set an angle in degrees.
+ */
+export function AngleSelector({
+  value,
+  onChange,
+  size = 80,
+  disabled = false,
+}: AngleSelectorProps): JSX.Element {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  /**
+   * Calculate angle from mouse/touch position relative to center
+   */
+  const calculateAngle = useCallback(
+    (clientX: number, clientY: number) => {
+      if (!containerRef.current) return value;
+
+      const rect = containerRef.current.getBoundingClientRect();
+      const centerX = rect.left + rect.width / 2;
+      const centerY = rect.top + rect.height / 2;
+
+      const deltaX = clientX - centerX;
+      const deltaY = clientY - centerY;
+
+      // Calculate angle in radians, then convert to degrees
+      // atan2 returns angle from -PI to PI, where 0 is pointing right
+      // We adjust so 0deg is pointing up (like CSS gradients)
+      let angle = Math.atan2(deltaX, -deltaY) * (180 / Math.PI);
+
+      // Normalize to 0-360 range
+      if (angle < 0) angle += 360;
+
+      return Math.round(angle);
+    },
+    [value]
+  );
+
+  /**
+   * Handle mouse/touch start
+   */
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (disabled) return;
+      e.preventDefault();
+      setIsDragging(true);
+      (e.target as HTMLElement).setPointerCapture(e.pointerId);
+      const newAngle = calculateAngle(e.clientX, e.clientY);
+      onChange(newAngle);
+    },
+    [disabled, calculateAngle, onChange]
+  );
+
+  /**
+   * Handle mouse/touch move
+   */
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (!isDragging || disabled) return;
+      const newAngle = calculateAngle(e.clientX, e.clientY);
+      onChange(newAngle);
+    },
+    [isDragging, disabled, calculateAngle, onChange]
+  );
+
+  /**
+   * Handle mouse/touch end
+   */
+  const handlePointerUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  // Calculate line endpoint position
+  const lineLength = (size / 2) - 8;
+  const radians = ((value - 90) * Math.PI) / 180;
+  const lineX = Math.cos(radians) * lineLength;
+  const lineY = Math.sin(radians) * lineLength;
+
+  return (
+    <Box direction="Column" gap="100" alignItems="Center">
+      <Box
+        ref={containerRef}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        onPointerLeave={handlePointerUp}
+        style={{
+          width: toRem(size),
+          height: toRem(size),
+          borderRadius: '50%',
+          border: `${toRem(2)} solid ${color.Surface.ContainerLine}`,
+          backgroundColor: color.Surface.Container,
+          position: 'relative',
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          opacity: disabled ? 0.5 : 1,
+          touchAction: 'none',
+          userSelect: 'none',
+        }}
+      >
+        {/* Center dot */}
+        <Box
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: toRem(6),
+            height: toRem(6),
+            borderRadius: '50%',
+            backgroundColor: color.Secondary.Main,
+          }}
+        />
+        {/* Direction line */}
+        <Box
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            width: toRem(2),
+            height: toRem(lineLength),
+            backgroundColor: color.Primary.Main,
+            transformOrigin: 'center top',
+            transform: `translate(-50%, 0) rotate(${value}deg)`,
+            borderRadius: toRem(1),
+          }}
+        />
+        {/* Angle indicator dot at end of line */}
+        <Box
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            width: toRem(10),
+            height: toRem(10),
+            borderRadius: '50%',
+            backgroundColor: color.Primary.Main,
+            transform: `translate(calc(-50% + ${lineX}px), calc(-50% + ${lineY}px))`,
+            boxShadow: `0 0 ${toRem(4)} ${color.Primary.Main}`,
+          }}
+        />
+        {/* Cardinal direction markers */}
+        {[0, 90, 180, 270].map((deg) => {
+          const markerRadians = ((deg - 90) * Math.PI) / 180;
+          const markerDist = (size / 2) - 3;
+          const markerX = Math.cos(markerRadians) * markerDist;
+          const markerY = Math.sin(markerRadians) * markerDist;
+          return (
+            <Box
+              key={deg}
+              style={{
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                width: toRem(4),
+                height: toRem(4),
+                borderRadius: '50%',
+                backgroundColor: color.Surface.OnContainer,
+                opacity: 0.3,
+                transform: `translate(calc(-50% + ${markerX}px), calc(-50% + ${markerY}px))`,
+              }}
+            />
+          );
+        })}
+      </Box>
+      <Text size="T200">{value}°</Text>
+    </Box>
+  );
+}
+
+export default AngleSelector;

src/app/components/AnimatedOutlet.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
+
+/**
+ * Wrapper for Outlet that adds route-based animation
+ * Forces remount on route change by using location as key
+ */
+export function AnimatedOutlet() {
+  const location = useLocation();
+  
+  return (
+    <div
+      key={location.pathname}
+      data-route-transition="true"
+      style={{
+        flex: 1,
+        minWidth: 0,
+        minHeight: 0,
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <Outlet />
+    </div>
+  );
+}

src/app/components/Modal500.tsx

@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useCallback, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
-import { Modal, Overlay, OverlayBackdrop, OverlayCenter } from 'folds';
+import { Modal, Overlay, OverlayBackdrop, OverlayCenter, PopOutContainerProvider } from 'folds';
 import { stopPropagation } from '../utils/keyboard';
 
 type Modal500Props = {
@@ -8,23 +8,8 @@ type Modal500Props = {
   children: ReactNode;
 };
 export function Modal500({ requestClose, children }: Modal500Props) {
-  const handleClickOutside = (e: MouseEvent | TouchEvent | FocusEvent) => {
-    const target = e.target as HTMLElement;
-    
-    // Don't close if clicking on a popout menu, overlay, or other portaled content
-    // Check for common portal container elements and popout menus
-    if (
-      target.closest('[role="menu"]') ||
-      target.closest('[role="dialog"]') ||
-      target.closest('[data-floating-ui-portal]') ||
-      target.closest('.folds-overlay') ||
-      target.closest('.popout')
-    ) {
-      return false;
-    }
-    
-    return true;
-  };
+  const [modalEl, setModalEl] = useState<HTMLDivElement | null>(null);
+  const modalRef = useCallback((el: HTMLDivElement | null) => setModalEl(el), []);
 
   return (
     <Overlay open backdrop={<OverlayBackdrop />}>
@@ -32,13 +17,15 @@ export function Modal500({ requestClose, children }: Modal500Props) {
         <FocusTrap
           focusTrapOptions={{
             initialFocus: false,
-            clickOutsideDeactivates: handleClickOutside,
+            clickOutsideDeactivates: true,
             onDeactivate: requestClose,
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Modal size="500" variant="Background">
-            {children}
+          <Modal ref={modalRef} size="500" variant="Background">
+            <PopOutContainerProvider value={modalEl ?? undefined}>
+              {children}
+            </PopOutContainerProvider>
           </Modal>
         </FocusTrap>
       </OverlayCenter>

src/app/components/RenderMessageContent.tsx

@@ -23,15 +23,18 @@ import {
   ThumbnailContent,
   UnsupportedContent,
   VideoContent,
+  VideoFrameThumbnail,
 } from './message';
-import { UrlPreviewCard, UrlPreviewHolder, YouTubeEmbed, isYouTubeUrl } from './url-preview';
+import { UrlPreviewCard, UrlPreviewHolder, YouTubeEmbed, isYouTubeUrl, TikTokEmbed, isTikTokUrl, GiphyEmbed, isGiphyUrl } from './url-preview';
 import { Image, MediaControl, Video } from './media';
 import { ImageViewer } from './image-viewer';
+import { VideoViewer } from './video-viewer';
 import { PdfViewer } from './Pdf-viewer';
 import { TextViewer } from './text-viewer';
 import { testMatrixTo } from '../plugins/matrix-to';
 import { IImageContent } from '../../types/matrix/common';
 import { filterDisabledUrls } from '../hooks/useRoomEmbedFilters';
+import { pluginRegistry } from '../features/settings/plugins/PluginAPI';
 
 type RenderMessageContentProps = {
   displayName: string;
@@ -66,16 +69,26 @@ export function RenderMessageContent({
     filteredUrls = filterDisabledUrls(filteredUrls, disabledEmbedPatterns ?? []);
     if (filteredUrls.length === 0) return undefined;
 
-    // Separate YouTube URLs from other URLs
+    // Separate special URLs from generic ones
     const youtubeUrls = filteredUrls.filter(isYouTubeUrl);
-    const otherUrls = filteredUrls.filter((url) => !isYouTubeUrl(url));
+    const tiktokUrls = filteredUrls.filter(isTikTokUrl);
+    const giphyUrls = filteredUrls.filter(isGiphyUrl);
+    const otherUrls = filteredUrls.filter((url) => !isYouTubeUrl(url) && !isTikTokUrl(url) && !isGiphyUrl(url));
 
     return (
       <>
-        {/* Render YouTube embeds (ad-free via Piped) */}
+        {/* Render YouTube embeds (ad-free via yt-dlp) */}
         {youtubeUrls.map((url) => (
           <YouTubeEmbed key={url} url={url} />
         ))}
+        {/* Render TikTok embeds */}
+        {tiktokUrls.map((url) => (
+          <TikTokEmbed key={url} url={url} />
+        ))}
+        {/* Render Giphy embeds */}
+        {giphyUrls.map((url) => (
+          <GiphyEmbed key={url} url={url} />
+        ))}
         {/* Render standard URL previews for other links */}
         {otherUrls.length > 0 && (
           <UrlPreviewHolder>
@@ -146,6 +159,24 @@ export function RenderMessageContent({
     </>
   );
 
+  // Check for custom renderer from plugins BEFORE standard type handling
+  // so plugins can intercept any msgtype including custom ones.
+  const customRendererEarly = pluginRegistry.getRenderer('message');
+  if (customRendererEarly) {
+    try {
+      const messageDataEarly = {
+        msgtype: msgType,
+        ...getContent(),
+      };
+      const customContentEarly = customRendererEarly(messageDataEarly, () => null);
+      if (customContentEarly) {
+        return customContentEarly as React.ReactElement;
+      }
+    } catch (error) {
+      console.error('[RenderMessageContent] Custom renderer error (early):', error);
+    }
+  }
+
   if (msgType === MsgType.Text) {
     return (
       <MText
@@ -227,26 +258,46 @@ export function RenderMessageContent({
         <MVideo
           content={getContent()}
           renderAsFile={renderFile}
-          renderVideoContent={({ body, info, ...props }) => (
-            <VideoContent
-              body={body}
-              info={info}
-              {...props}
-              renderThumbnail={
-                mediaAutoLoad
-                  ? () => (
-                      <ThumbnailContent
-                        info={info}
-                        renderImage={(src) => (
-                          <Image alt={body} title={body} src={src} loading="lazy" />
-                        )}
-                      />
-                    )
-                  : undefined
-              }
-              renderVideo={(p) => <Video {...p} />}
-            />
-          )}
+          renderVideoContent={({ body, info, mimeType, url, encInfo, ...props }) => {
+            const hasValidThumbnail = 
+              (typeof info.thumbnail_file?.url === 'string' || typeof info.thumbnail_url === 'string') &&
+              typeof info.thumbnail_info?.mimetype === 'string';
+
+            return (
+              <VideoContent
+                body={body}
+                info={info}
+                mimeType={mimeType}
+                url={url}
+                encInfo={encInfo}
+                autoPlay={mediaAutoLoad}
+                {...props}
+                renderThumbnail={
+                  mediaAutoLoad
+                    ? () => hasValidThumbnail ? (
+                        <ThumbnailContent
+                          info={info}
+                          renderImage={(src) => (
+                            <Image alt={body} title={body} src={src} loading="lazy" />
+                          )}
+                        />
+                      ) : (
+                        <VideoFrameThumbnail
+                          mimeType={mimeType}
+                          url={url}
+                          encInfo={encInfo}
+                          renderImage={(src) => (
+                            <Image alt={body} title={body} src={src} loading="lazy" />
+                          )}
+                        />
+                      )
+                    : undefined
+                }
+                renderViewer={(p) => <VideoViewer {...p} />}
+                renderVideo={(p) => <Video {...p} />}
+              />
+            );
+          }}
           outlined={outlineAttachment}
         />
         {renderCaption()}
@@ -282,5 +333,36 @@ export function RenderMessageContent({
     return <MBadEncrypted />;
   }
 
+  // Check for custom renderer from plugins FIRST
+  const customRenderer = pluginRegistry.getRenderer('message');
+  console.log('[RenderMessageContent] customRenderer function:', typeof customRenderer);
+  if (customRenderer) {
+    try {
+      const messageData = {
+        msgtype: msgType,
+        ...getContent(),
+      };
+      console.log('[RenderMessageContent] Calling customRenderer with msgtype:', msgType);
+      console.log('[RenderMessageContent] messageData:', messageData);
+      const customContent = customRenderer(
+        messageData,
+        () => {
+          console.log('[RenderMessageContent] defaultRenderer called');
+          return null;
+        }
+      );
+      console.log('[RenderMessageContent] customRenderer returned:', customContent);
+      console.log('[RenderMessageContent] customContent type:', typeof customContent);
+      if (customContent) {
+        console.log('[RenderMessageContent] Returning custom content');
+        return customContent as React.ReactElement;
+      }
+    } catch (error) {
+      console.error('[RenderMessageContent] Custom renderer error:', error);
+    }
+  } else {
+    console.log('[RenderMessageContent] No custom renderer registered');
+  }
+
   return <UnsupportedContent />;
 }

src/app/components/RouteTransition.tsx

@@ -0,0 +1,104 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { css } from '@vanilla-extract/css';
+
+const transitionContainer = css({
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  overflow: 'hidden',
+});
+
+const transitionContent = css({
+  width: '100%',
+  height: '100%',
+});
+
+const animateIn = css({
+  animation: 'routeFadeSlideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
+  '@keyframes': {
+    routeFadeSlideIn: {
+      from: {
+        opacity: 0,
+        transform: 'translateX(12px)',
+      },
+      to: {
+        opacity: 1,
+        transform: 'translateX(0)',
+      },
+    },
+  },
+});
+
+const animateOut = css({
+  animation: 'routeFadeSlideOut 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards',
+  '@keyframes': {
+    routeFadeSlideOut: {
+      from: {
+        opacity: 1,
+        transform: 'translateX(0)',
+      },
+      to: {
+        opacity: 0,
+        transform: 'translateX(-12px)',
+      },
+    },
+  },
+});
+
+interface RouteTransitionProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Wraps content in a transition animation that triggers on route change
+ */
+export function RouteTransition({ children }: RouteTransitionProps) {
+  const location = useLocation();
+  const [displayLocation, setDisplayLocation] = useState(location);
+  const [transitionStage, setTransitionStage] = useState<'entering' | 'exiting' | 'idle'>('idle');
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+
+  useEffect(() => {
+    if (location.pathname !== displayLocation.pathname) {
+      // Start exit animation
+      setTransitionStage('exiting');
+
+      // Clear any existing timeout
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      // Wait for exit animation, then update location and enter
+      timeoutRef.current = setTimeout(() => {
+        setDisplayLocation(location);
+        setTransitionStage('entering');
+
+        // Reset to idle after enter animation
+        timeoutRef.current = setTimeout(() => {
+          setTransitionStage('idle');
+        }, 250);
+      }, 200);
+    }
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [location, displayLocation]);
+
+  const className = transitionStage === 'entering' 
+    ? `${transitionContent} ${animateIn}` 
+    : transitionStage === 'exiting'
+    ? `${transitionContent} ${animateOut}`
+    : transitionContent;
+
+  return (
+    <div className={transitionContainer}>
+      <div className={className} key={displayLocation.pathname}>
+        {children}
+      </div>
+    </div>
+  );
+}

src/app/components/ServerConfigsLoader.tsx

@@ -31,11 +31,12 @@ export function ServerConfigsLoader({ children }: ServerConfigsLoaderProps) {
       const authMetadata = promiseFulfilledResult(result[2]);
       let validatedAuthMetadata: ValidatedAuthMetadata | undefined;
 
-      try {
-        validatedAuthMetadata = validateAuthMetadata(authMetadata);
-      } catch (e) {
-        // Silently ignore OIDC configuration errors when server doesn't support it
-        // This is expected for most Matrix servers
+      if (authMetadata) {
+        try {
+          validatedAuthMetadata = validateAuthMetadata(authMetadata);
+        } catch (e) {
+          // Server returned auth metadata but it failed validation — ignore silently.
+        }
       }
 
       return {

src/app/components/account-switcher/AccountSwitcher.tsx

@@ -0,0 +1,244 @@
+import React, { useEffect, useState } from 'react';
+import { Avatar, Box, Icon, Icons, MenuItem, Text, config } from 'folds';
+import { useAtomValue } from 'jotai';
+import { sessionsAtom, Session } from '../../state/sessions';
+import { setLocalStorageItem } from '../../state/utils/atomWithLocalStorage';
+import { getMxIdServer, mxcUrlToHttp } from '../../utils/matrix';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useUserProfile } from '../../hooks/useUserProfile';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { UserAvatar } from '../user-avatar';
+
+type AccountSwitcherProps = {
+  currentUserId?: string;
+};
+
+/**
+ * Loads and displays an avatar for a session that is not the active client.
+ * Fetches the profile directly via the homeserver REST API using stored credentials.
+ */
+function OtherSessionAvatar({ session }: { session: Session }) {
+  const [src, setSrc] = useState<string | undefined>();
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const res = await fetch(
+          `${session.baseUrl}/_matrix/client/v3/profile/${encodeURIComponent(session.userId)}`,
+          { headers: { Authorization: `Bearer ${session.accessToken}` } }
+        );
+        if (!res.ok) return;
+        const data = await res.json();
+        if (data.avatar_url) {
+          const match = (data.avatar_url as string).match(/^mxc:\/\/([^/]+)\/(.+)$/);
+          if (match) {
+            setSrc(
+              `${session.baseUrl}/_matrix/media/v3/thumbnail/${match[1]}/${match[2]}?width=32&height=32&method=crop`
+            );
+          }
+        }
+      } catch {
+        // ignore — avatar just won't show
+      }
+    };
+    load();
+  }, [session.userId, session.baseUrl, session.accessToken]);
+
+  return (
+    <Avatar size="300" style={{ width: '1.75rem', height: '1.75rem', minWidth: '1.75rem' }}>
+      <UserAvatar
+        userId={session.userId}
+        src={src}
+        alt={session.userId}
+        renderFallback={() => <Icon size="100" src={Icons.User} filled />}
+      />
+    </Avatar>
+  );
+}
+
+const deleteAllMatrixDatabases = async (): Promise<void> => {
+  console.log('[AccountSwitcher] Deleting all Matrix IndexedDB databases...');
+  
+  // List of known Matrix database names/patterns to delete
+  const dbsToDelete = [
+    'matrix-js-sdk::matrix-sdk-crypto',  // Shared crypto store (causes conflicts)
+  ];
+  
+  // Try to get all databases if the API is available
+  try {
+    if ('databases' in indexedDB) {
+      const allDbs = await (indexedDB as any).databases();
+      const matrixDbs = allDbs
+        .map((db: any) => db.name)
+        .filter((name: string) => 
+          name && (
+            name.startsWith('matrix-js-sdk') || 
+            name.includes('@@') || 
+            name.startsWith('sync@@') || 
+            name.startsWith('crypto@@')
+          )
+        );
+      dbsToDelete.push(...matrixDbs);
+      console.log('[AccountSwitcher] Found Matrix databases:', matrixDbs);
+    }
+  } catch (e) {
+    console.warn('[AccountSwitcher] Could not enumerate databases:', e);
+  }
+  
+  // Delete each database with timeout
+  const deletePromises = dbsToDelete.map(async (dbName) => {
+    try {
+      const deletePromise = new Promise<void>((resolve, reject) => {
+        const request = indexedDB.deleteDatabase(dbName);
+        request.onsuccess = () => {
+          console.log(`[AccountSwitcher] ✅ Deleted database: ${dbName}`);
+          resolve();
+        };
+        request.onerror = () => {
+          console.warn(`[AccountSwitcher] ⚠️  Failed to delete: ${dbName}`, request.error);
+          resolve(); // Don't reject, just continue
+        };
+        request.onblocked = () => {
+          console.warn(`[AccountSwitcher] ⚠️  Delete blocked: ${dbName}`);
+          resolve(); // Don't reject, reload will handle it
+        };
+      });
+      
+      // Add 1-second timeout per database
+      const timeoutPromise = new Promise<void>((resolve) => {
+        setTimeout(() => {
+          console.warn(`[AccountSwitcher] ⏱️  Delete timeout: ${dbName}`);
+          resolve();
+        }, 1000);
+      });
+      
+      await Promise.race([deletePromise, timeoutPromise]);
+    } catch (error) {
+      console.warn(`[AccountSwitcher] Error deleting ${dbName}:`, error);
+    }
+  });
+  
+  await Promise.all(deletePromises);
+  console.log('[AccountSwitcher] ✅ Database cleanup complete');
+};
+
+export function AccountSwitcher({ currentUserId }: AccountSwitcherProps) {
+  const sessions = useAtomValue(sessionsAtom);
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const currentProfile = useUserProfile(currentUserId ?? '');
+  const currentAvatarUrl = currentProfile.avatarUrl
+    ? mxcUrlToHttp(mx, currentProfile.avatarUrl, useAuthentication, 32, 32, 'crop') ?? undefined
+    : undefined;
+  
+  const handleSwitchAccount = async (session: Session) => {
+    if (session.userId === currentUserId) return;
+    
+    console.log('[AccountSwitcher] Switching account from', currentUserId, 'to', session.userId);
+    
+    // Stop the current client before switching
+    if (mx) {
+      console.log('[AccountSwitcher] Stopping current Matrix client...');
+      try {
+        mx.stopClient();
+        console.log('[AccountSwitcher] Matrix client stopped');
+      } catch (error) {
+        console.error('[AccountSwitcher] Error stopping client:', error);
+      }
+    }
+    
+    // Set the new current session
+    setLocalStorageItem('currentSessionUserId', session.userId);
+    
+    // Delete all Matrix databases to prevent conflicts
+    await deleteAllMatrixDatabases();
+    
+    // Small delay to ensure cleanup is complete
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    // Reload the page to initialize the new session
+    console.log('[AccountSwitcher] Reloading page...');
+    window.location.reload();
+  };
+
+  // If no current user, don't show anything
+  if (!currentUserId) {
+    return null;
+  }
+
+  // Filter out other sessions (not current)
+  const otherSessions = sessions.filter(s => s.userId !== currentUserId);
+  const hasMultipleAccounts = sessions.length > 1;
+
+  return (
+    <Box direction="Column" gap="200">
+      <Text size="L400" style={{ paddingInline: config.space.S200, paddingBlock: config.space.S100 }}>
+        {hasMultipleAccounts ? 'Switch Account' : 'Accounts'}
+      </Text>
+      
+      {/* Show current account */}
+      {currentUserId && (
+        <MenuItem
+          key={currentUserId}
+          size="300"
+          radii="300"
+          variant="SurfaceVariant"
+          disabled
+          style={{ paddingInline: config.space.S200 }}
+          after={<Icon size="100" src={Icons.Check} filled />}
+        >
+          <Box gap="200" alignItems="Center">
+            <Avatar size="300" style={{ width: '1.75rem', height: '1.75rem', minWidth: '1.75rem' }}>
+              <UserAvatar
+                userId={currentUserId}
+                src={currentAvatarUrl}
+                alt={currentUserId}
+                renderFallback={() => <Icon size="100" src={Icons.User} filled />}
+              />
+            </Avatar>
+            <Box direction="Column" style={{ gap: '2px' }}>
+              <Text size="T300" truncate>
+                {currentUserId}
+              </Text>
+              {getMxIdServer(currentUserId) && (
+                <Text size="T200" priority="300" truncate>
+                  {getMxIdServer(currentUserId)}
+                </Text>
+              )}
+            </Box>
+          </Box>
+        </MenuItem>
+      )}
+      
+      {/* Show other accounts if any */}
+      {otherSessions.map((session) => {
+        const server = getMxIdServer(session.userId);
+        
+        return (
+          <MenuItem
+            key={session.userId}
+            size="300"
+            radii="300"
+            onClick={() => handleSwitchAccount(session)}
+            variant="Surface"
+            style={{ paddingInline: config.space.S200 }}
+          >
+            <Box gap="200" alignItems="Center">
+              <OtherSessionAvatar session={session} />
+              <Box direction="Column" style={{ gap: '2px' }}>
+                <Text size="T300" truncate>
+                  {session.userId}
+                </Text>
+                {server && (
+                  <Text size="T200" priority="300" truncate>
+                    {server}
+                  </Text>
+                )}
+              </Box>
+            </Box>
+          </MenuItem>
+        );
+      })}
+    </Box>
+  );
+}

src/app/components/account-switcher/index.ts

@@ -0,0 +1 @@
+export { AccountSwitcher } from './AccountSwitcher';

src/app/components/create-room/utils.ts

@@ -82,6 +82,16 @@ export const createRoomEncryptionState = () => ({
   },
 });
 
+export const createRoomPowerLevelsState = () => ({
+  type: StateEvent.RoomPowerLevels,
+  state_key: '',
+  content: {
+    events: {
+      'org.matrix.msc3401.call.member': 0,
+    },
+  },
+});
+
 export type CreateRoomData = {
   version: string;
   type?: RoomType;
@@ -98,6 +108,8 @@ export type CreateRoomData = {
 export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promise<string> => {
   const initialState: ICreateRoomStateEvent[] = [];
 
+  // initialState.push(createRoomPowerLevelsState()); // Removed: causes 403 when setting permissions before admin
+
   if (data.encryption) {
     initialState.push(createRoomEncryptionState());
   }

src/app/components/custom-status/CustomStatusDialog.tsx

@@ -0,0 +1,180 @@
+import React, { useState, useCallback, ChangeEventHandler } from 'react';
+import {
+  Box,
+  Button,
+  config,
+  Dialog,
+  Input,
+  Text,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useUserPresence } from '../../hooks/useUserPresence';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+
+/**
+ * Props for the CustomStatusDialog component
+ */
+export interface CustomStatusDialogProps {
+  /** Whether the dialog is currently open */
+  open: boolean;
+  /** Callback function invoked when the dialog should close */
+  onClose: () => void;
+}
+
+/**
+ * CustomStatusDialog Component
+ * 
+ * Provides a dialog interface for users to set or clear their custom status message.
+ * The status is stored in Matrix presence and will be visible to other users.
+ * 
+ * @param props - Component props
+ * @returns The custom status dialog component
+ */
+export function CustomStatusDialog({ open, onClose }: CustomStatusDialogProps) {
+  const mx = useMatrixClient();
+  const userId = mx.getUserId();
+  const presence = useUserPresence(userId ?? '');
+  
+  const [statusText, setStatusText] = useState(presence?.status || '');
+  
+  /**
+   * Handles input changes for the status text field
+   * @param evt - The change event from the input
+   */
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
+    setStatusText(evt.currentTarget.value);
+  };
+  
+  /**
+   * Async callback to save the status to Matrix presence
+   */
+  const [saveState, saveStatus] = useAsyncCallback(
+    useCallback(async () => {
+      await mx.setPresence({
+        presence: presence?.presence || 'online',
+        status_msg: statusText,
+      });
+      onClose();
+    }, [mx, presence?.presence, statusText, onClose])
+  );
+  
+  /**
+   * Async callback to clear the status from Matrix presence
+   */
+  const [clearState, clearStatus] = useAsyncCallback(
+    useCallback(async () => {
+      await mx.setPresence({
+        presence: presence?.presence || 'online',
+        status_msg: '',
+      });
+      setStatusText('');
+      onClose();
+    }, [mx, presence?.presence, onClose])
+  );
+  
+  /**
+   * Handles form submission to save the custom status
+   * @param evt - The form submit event
+   */
+  const handleSubmit = (evt: React.FormEvent) => {
+    evt.preventDefault();
+    saveStatus();
+  };
+  
+  /**
+   * Handles the clear status button click
+   */
+  const handleClear = () => {
+    clearStatus();
+  };
+
+  if (!open) return null;
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: onClose,
+            clickOutsideDeactivates: true,
+          }}
+        >
+          <Dialog>
+            <Box
+              as="form"
+              onSubmit={handleSubmit}
+              direction="Column"
+              gap="400"
+              style={{ padding: config.space.S400 }}
+            >
+              <Box direction="Column" gap="100">
+                <Text size="H4">Set Custom Status</Text>
+                <Text size="T300" priority="400">
+                  Your custom status will be visible to other users
+                </Text>
+              </Box>
+              
+              <Box direction="Column" gap="200">
+                <Input
+                  value={statusText}
+                  onChange={handleChange}
+                  placeholder="What's on your mind?"
+                  maxLength={100}
+                  autoFocus
+                  disabled={saveState.status === AsyncStatus.Loading || clearState.status === AsyncStatus.Loading}
+                />
+                {statusText.length > 0 && (
+                  <Text size="T200" priority="300">
+                    {statusText.length}/100 characters
+                  </Text>
+                )}
+              </Box>
+
+              {(saveState.status === AsyncStatus.Error || clearState.status === AsyncStatus.Error) && (
+                <Text size="T300" priority="400" style={{ color: 'var(--color-critical-main)' }}>
+                  Failed to update status. Please try again.
+                </Text>
+              )}
+
+              <Box direction="Row" gap="200" justifyContent="End">
+                <Button
+                  type="button"
+                  variant="Secondary"
+                  onClick={onClose}
+                  disabled={saveState.status === AsyncStatus.Loading || clearState.status === AsyncStatus.Loading}
+                >
+                  <Text size="B400">Cancel</Text>
+                </Button>
+                {presence?.status && (
+                  <Button
+                    type="button"
+                    variant="Critical"
+                    fill="None"
+                    onClick={handleClear}
+                    disabled={saveState.status === AsyncStatus.Loading || clearState.status === AsyncStatus.Loading}
+                  >
+                    <Text size="B400">Clear Status</Text>
+                  </Button>
+                )}
+                <Button
+                  type="submit"
+                  variant="Primary"
+                  disabled={saveState.status === AsyncStatus.Loading || clearState.status === AsyncStatus.Loading}
+                >
+                  <Text size="B400">
+                    {saveState.status === AsyncStatus.Loading ? 'Saving...' : 'Save'}
+                  </Text>
+                </Button>
+              </Box>
+            </Box>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}

src/app/components/custom-status/index.ts

@@ -0,0 +1 @@
+export { CustomStatusDialog, type CustomStatusDialogProps } from './CustomStatusDialog';

src/app/components/direct-list/DirectList.tsx

@@ -0,0 +1,317 @@
+import React, { MouseEventHandler, forwardRef, useMemo, useState } from 'react';
+import { useAtom, useAtomValue } from 'jotai';
+import {
+  Avatar,
+  Box,
+  Button,
+  Icon,
+  IconButton,
+  Icons,
+  Menu,
+  MenuItem,
+  PopOut,
+  RectCords,
+  Text,
+  config,
+  toRem,
+} from 'folds';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import FocusTrap from 'focus-trap-react';
+import { useNavigate } from 'react-router-dom';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { factoryRoomIdByActivity } from '../../utils/sort';
+import {
+  NavButton,
+  NavCategory,
+  NavCategoryHeader,
+  NavEmptyCenter,
+  NavEmptyLayout,
+  NavItem,
+  NavItemContent,
+} from '../nav';
+import { getDirectCreatePath, getDirectRoomPath } from '../../pages/pathUtils';
+import { getCanonicalAliasOrRoomId } from '../../utils/matrix';
+import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
+import { VirtualTile } from '../virtualizer';
+import { RoomNavCategoryButton, RoomNavItem } from '../../features/room-nav';
+import { makeNavCategoryId } from '../../state/closedNavCategories';
+import { roomToUnreadAtom } from '../../state/room/roomToUnread';
+import { useCategoryHandler } from '../../hooks/useCategoryHandler';
+import { useDirectRooms } from '../../pages/client/direct/useDirectRooms';
+import { useClosedNavCategoriesAtom } from '../../state/hooks/closedNavCategories';
+import { useRoomsUnread } from '../../state/hooks/unread';
+import { useMarkRoomsAsRead } from '../../hooks/useMarkAsRead';
+import { stopPropagation } from '../../utils/keyboard';
+import { PluginButtonSlot } from '../../features/settings/plugins/PluginButtonSlot';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
+import {
+  getRoomNotificationMode,
+  useRoomsNotificationPreferencesContext,
+} from '../../hooks/useRoomsNotificationPreferences';
+import { useDirectCreateSelected } from '../../hooks/router/useDirectSelected';
+import { useRoomListReorder, useListReorderAnimation } from '../../hooks/useRoomListReorder';
+
+/**
+ * Props for the DirectMenu component
+ */
+type DirectMenuProps = {
+  requestClose: () => void;
+};
+
+/**
+ * Menu component for Direct Messages category actions
+ */
+const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(({ requestClose }, ref) => {
+  const mx = useMatrixClient();
+  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+  const orphanRooms = useDirectRooms();
+  const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
+  const markRoomsAsRead = useMarkRoomsAsRead(mx);
+
+  const handleMarkAsRead = () => {
+    if (!unread) return;
+    markRoomsAsRead(orphanRooms, hideActivity);
+    requestClose();
+  };
+
+  return (
+    <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
+      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+        <MenuItem
+          onClick={handleMarkAsRead}
+          size="300"
+          after={<Icon size="100" src={Icons.CheckTwice} />}
+          radii="300"
+          aria-disabled={!unread}
+        >
+          <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+            Mark as Read
+          </Text>
+        </MenuItem>
+      </Box>
+    </Menu>
+  );
+});
+
+/**
+ * Props for the DirectListHeader component
+ */
+type DirectListHeaderProps = {
+  title?: string;
+};
+
+/**
+ * Header component for the Direct Messages list with menu
+ */
+export function DirectListHeader({ title = 'Direct Messages' }: DirectListHeaderProps) {
+  const [menuAnchor, setMenuAnchor] = useState<RectCords>();
+
+  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    const cords = evt.currentTarget.getBoundingClientRect();
+    setMenuAnchor((currentState) => {
+      if (currentState) return undefined;
+      return cords;
+    });
+  };
+
+  return (
+    <>
+      <Box alignItems="Center" grow="Yes" gap="300">
+        <Box grow="Yes">
+          <Text size="H4" truncate>
+            {title}
+          </Text>
+        </Box>
+        <Box gap="100" alignItems="Center">
+          <PluginButtonSlot location="direct-messages" />
+          <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
+            <Icon src={Icons.VerticalDots} size="200" />
+          </IconButton>
+        </Box>
+      </Box>
+      <PopOut
+        anchor={menuAnchor}
+        position="Bottom"
+        align="End"
+        offset={6}
+        content={
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              returnFocusOnDeactivate: false,
+              onDeactivate: () => setMenuAnchor(undefined),
+              clickOutsideDeactivates: true,
+              isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+              isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <DirectMenu requestClose={() => setMenuAnchor(undefined)} />
+          </FocusTrap>
+        }
+      />
+    </>
+  );
+}
+
+/**
+ * Empty state component when there are no direct messages
+ */
+export function DirectListEmpty() {
+  const navigate = useNavigate();
+
+  return (
+    <NavEmptyCenter>
+      <NavEmptyLayout
+        icon={<Icon size="600" src={Icons.Mention} />}
+        title={
+          <Text size="H5" align="Center">
+            No Direct Messages
+          </Text>
+        }
+        content={
+          <Text size="T300" align="Center">
+            You do not have any direct messages yet.
+          </Text>
+        }
+        options={
+          <Button variant="Secondary" size="300" onClick={() => navigate(getDirectCreatePath())}>
+            <Text size="B300" truncate>
+              Direct Message
+            </Text>
+          </Button>
+        }
+      />
+    </NavEmptyCenter>
+  );
+}
+
+const DEFAULT_CATEGORY_ID = makeNavCategoryId('direct', 'direct');
+
+/**
+ * Props for the DirectList component
+ */
+export type DirectListProps = {
+  scrollRef: React.RefObject<HTMLDivElement>;
+  showCreateButton?: boolean;
+  showCategoryHeader?: boolean;
+};
+
+/**
+ * Reusable component that renders the virtualized list of direct message rooms.
+ * Can be embedded in any PageNavContent context.
+ */
+export function DirectList({
+  scrollRef,
+  showCreateButton = true,
+  showCategoryHeader = true,
+}: DirectListProps) {
+  const mx = useMatrixClient();
+  const directs = useDirectRooms();
+  const notificationPreferences = useRoomsNotificationPreferencesContext();
+  const roomToUnread = useAtomValue(roomToUnreadAtom);
+  const navigate = useNavigate();
+  const createDirectSelected = useDirectCreateSelected();
+  const selectedRoomId = useSelectedRoom();
+  const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
+  
+  const reorderTrigger = useRoomListReorder(mx, directs);
+
+  const sortedDirects = useMemo(() => {
+    const items = Array.from(directs).sort(factoryRoomIdByActivity(mx));
+    if (closedCategories.has(DEFAULT_CATEGORY_ID)) {
+      return items.filter((rId) => roomToUnread.has(rId) || rId === selectedRoomId);
+    }
+    return items;
+  }, [mx, directs, closedCategories, roomToUnread, selectedRoomId, reorderTrigger]);
+
+  const animationRef = useListReorderAnimation(sortedDirects);
+
+  const virtualizer = useVirtualizer({
+    count: sortedDirects.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 38,
+    overscan: 10,
+  });
+
+  const handleCategoryClick = useCategoryHandler(setClosedCategories, (categoryId) =>
+    closedCategories.has(categoryId)
+  );
+
+  const noRoomToDisplay = directs.length === 0;
+
+  if (noRoomToDisplay) {
+    return <DirectListEmpty />;
+  }
+
+  return (
+    <Box direction="Column" gap="300">
+      {showCreateButton && (
+        <NavCategory>
+          <NavItem variant="Background" radii="400" aria-selected={createDirectSelected}>
+            <NavButton onClick={() => navigate(getDirectCreatePath())}>
+              <NavItemContent>
+                <Box as="span" grow="Yes" alignItems="Center" gap="200">
+                  <Avatar size="200" radii="400">
+                    <Icon src={Icons.Plus} size="100" />
+                  </Avatar>
+                  <Box as="span" grow="Yes">
+                    <Text as="span" size="Inherit" truncate>
+                      Create Chat
+                    </Text>
+                  </Box>
+                </Box>
+              </NavItemContent>
+            </NavButton>
+          </NavItem>
+        </NavCategory>
+      )}
+      <NavCategory>
+        {showCategoryHeader && (
+          <NavCategoryHeader>
+            <RoomNavCategoryButton
+              closed={closedCategories.has(DEFAULT_CATEGORY_ID)}
+              data-category-id={DEFAULT_CATEGORY_ID}
+              onClick={handleCategoryClick}
+            >
+              Chats
+            </RoomNavCategoryButton>
+          </NavCategoryHeader>
+        )}
+        <div
+          ref={animationRef}
+          style={{
+            position: 'relative',
+            height: virtualizer.getTotalSize(),
+          }}
+        >
+          {virtualizer.getVirtualItems().map((vItem) => {
+            const roomId = sortedDirects[vItem.index];
+            const room = mx.getRoom(roomId);
+            if (!room) return null;
+            const selected = selectedRoomId === roomId;
+
+            return (
+              <VirtualTile 
+                virtualItem={vItem} 
+                key={roomId} 
+                ref={virtualizer.measureElement}
+                data-room-id={roomId}
+              >
+                <RoomNavItem
+                  room={room}
+                  selected={selected}
+                  showAvatar
+                  direct
+                  linkPath={getDirectRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
+                  notificationMode={getRoomNotificationMode(notificationPreferences, room.roomId)}
+                />
+              </VirtualTile>
+            );
+          })}
+        </div>
+      </NavCategory>
+    </Box>
+  );
+}

src/app/components/direct-list/index.ts

@@ -0,0 +1,2 @@
+export { DirectList, DirectListHeader, DirectListEmpty } from './DirectList';
+export type { DirectListProps } from './DirectList';

src/app/components/editor/Editor.tsx

@@ -6,9 +6,11 @@ import React, {
   forwardRef,
   useCallback,
   useState,
+  useEffect,
+  useRef,
 } from 'react';
 import { Box, Scroll, Text } from 'folds';
-import { Descendant, Editor, createEditor } from 'slate';
+import { Descendant, Editor, createEditor, Transforms, Range, Element as SlateElement, Text as SlateText, Point } from 'slate';
 import {
   Slate,
   Editable,
@@ -23,6 +25,7 @@ import { RenderElement, RenderLeaf } from './Elements';
 import { CustomElement } from './slate';
 import * as css from './Editor.css';
 import { toggleKeyboardShortcut } from './keyboard';
+import { createCommandElement } from './utils';
 
 const initialValue: CustomElement[] = [
   {
@@ -52,8 +55,25 @@ const withVoid = (editor: Editor): Editor => {
   return editor;
 };
 
+type CommandValidatorFn = (commandName: string) => boolean;
+
+let commandValidator: CommandValidatorFn | null = null;
+
+export const setCommandValidator = (validator: CommandValidatorFn) => {
+  commandValidator = validator;
+};
+
+const withCommandAutoConvert = (editor: Editor): Editor => {
+  // Removed auto-conversion on space to prevent focus issues
+  // Commands are now highlighted visually via decorations
+  // and executed when Enter is pressed
+  return editor;
+};
+
 export const useEditor = (): Editor => {
-  const [editor] = useState(() => withInline(withVoid(withReact(withHistory(createEditor())))));
+  const [editor] = useState(() => 
+    withCommandAutoConvert(withInline(withVoid(withReact(withHistory(createEditor())))))
+  );
   return editor;
 };
 
@@ -97,6 +117,49 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
 
     const renderLeaf = useCallback((props: RenderLeafProps) => <RenderLeaf {...props} />, []);
 
+    const decorate = useCallback(([node, path]: [any, number[]]) => {
+      const ranges: any[] = [];
+      
+      // Only decorate text nodes in the first paragraph
+      if (
+        path.length === 2 &&
+        path[0] === 0 &&
+        path[1] === 0 &&
+        SlateText.isText(node)
+      ) {
+        const firstChild = editor.children[0];
+        
+        if (SlateElement.isElement(firstChild) && firstChild.type === BlockType.Paragraph) {
+          const [firstInline, secondInline] = firstChild.children;
+          
+          // Don't decorate if we already have a CommandElement
+          if (SlateElement.isElement(secondInline) && secondInline.type === BlockType.Command) {
+            return ranges;
+          }
+          
+          // Check if the text matches /command pattern
+          const text = node.text;
+          const match = text.match(/^(\s*\/\w+)/);
+          
+          if (match && commandValidator) {
+            const commandText = match[1].trim();
+            const commandName = commandText.substring(1);
+            
+            if (commandValidator(commandName)) {
+              // Create decoration for the command text
+              ranges.push({
+                anchor: { path, offset: 0 },
+                focus: { path, offset: match[1].length },
+                pendingCommand: true,
+              });
+            }
+          }
+        }
+      }
+      
+      return ranges;
+    }, [editor]);
+
     const handleKeydown: KeyboardEventHandler = useCallback(
       (evt) => {
         onKeyDown?.(evt);
@@ -106,6 +169,48 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
       [editor, onKeyDown]
     );
 
+    const handleBeforeInput = useCallback(
+      (event: Event) => {
+        const inputEvent = event as InputEvent;
+        
+        // Handle autocorrect replacement that causes text duplication
+        if (inputEvent.inputType === 'insertReplacementText' || 
+            inputEvent.inputType === 'insertFromComposition') {
+          const { selection } = editor;
+          if (!selection) return;
+
+          // Get the data being inserted
+          const data = inputEvent.data || inputEvent.dataTransfer?.getData('text/plain');
+          
+          if (data) {
+            event.preventDefault();
+            
+            // If there's selected text, delete it first
+            if (selection && !Range.isCollapsed(selection)) {
+              Transforms.delete(editor, { at: selection });
+            }
+            
+            // Insert the replacement text
+            editor.insertText(data);
+          }
+        }
+      },
+      [editor]
+    );
+
+    const editableRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      const editableElement = editableRef.current?.querySelector('[data-slate-editor="true"]');
+      if (!editableElement) return;
+
+      editableElement.addEventListener('beforeinput', handleBeforeInput, { capture: true });
+      
+      return () => {
+        editableElement.removeEventListener('beforeinput', handleBeforeInput, { capture: true });
+      };
+    }, [handleBeforeInput]);
+
     const renderPlaceholder = useCallback(
       ({ attributes, children }: RenderPlaceholderProps) => (
         <span {...attributes} className={css.EditorPlaceholderContainer}>
@@ -135,6 +240,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
               size="300"
               visibility="Hover"
               hideTrack
+              ref={editableRef}
             >
               <Editable
                 data-editable-name={editableName}
@@ -143,6 +249,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
                 renderPlaceholder={renderPlaceholder}
                 renderElement={renderElement}
                 renderLeaf={renderLeaf}
+                decorate={decorate}
                 onKeyDown={handleKeydown}
                 onKeyUp={onKeyUp}
                 onPaste={onPaste}

src/app/components/editor/Elements.tsx

@@ -269,6 +269,13 @@ export function RenderLeaf({ attributes, leaf, children }: RenderLeafProps) {
         {child}
       </span>
     );
+  if (leaf.pendingCommand)
+    child = (
+      <span className={css.Command({ active: true })} {...attributes}>
+        <InlineChromiumBugfix />
+        {child}
+      </span>
+    );
 
   if (child !== children) return child;
 

src/app/components/editor/index.ts

@@ -1,6 +1,6 @@
 export * from './autocomplete';
 export * from './utils';
-export * from './Editor';
+export { CustomEditor, useEditor, setCommandValidator } from './Editor';
 export * from './Elements';
 export * from './keyboard';
 export * from './output';

src/app/components/editor/slate.d.ts

@@ -18,6 +18,7 @@ export type FormattedText = Text & {
   strikeThrough?: boolean;
   code?: boolean;
   spoiler?: boolean;
+  pendingCommand?: boolean;
 };
 
 export type LinkElement = {

src/app/components/emoji-board/EmojiBoard.tsx

@@ -21,7 +21,7 @@ import { useEmojiGroupIcons } from './useEmojiGroupIcons';
 import { preventScrollWithArrowKey, stopPropagation } from '../../utils/keyboard';
 import { useRelevantImagePacks } from '../../hooks/useImagePacks';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useRecentEmoji } from '../../hooks/useRecentEmoji';
+import { useEmojiUsage } from '../../hooks/useEmojiUsage';
 import { isUserId, mxcUrlToHttp } from '../../utils/matrix';
 import { editableActiveElement, targetFromEvent } from '../../utils/dom';
 import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
@@ -53,6 +53,7 @@ import {
 import { EmojiBoardTab, EmojiType } from './types';
 import { VirtualTile } from '../virtualizer';
 
+const MOST_USED_GROUP_ID = 'most_used_group';
 const RECENT_GROUP_ID = 'recent_group';
 const SEARCH_GROUP_ID = 'search_group';
 
@@ -72,19 +73,29 @@ const useGroups = (
   imagePacks: ImagePack[]
 ): [EmojiGroupItem[], StickerGroupItem[]] => {
   const mx = useMatrixClient();
+  const { getTopEmojis } = useEmojiUsage();
 
-  const recentEmojis = useRecentEmoji(mx, 21);
   const labels = useEmojiGroupLabels();
 
   const emojiGroupItems = useMemo(() => {
     const g: EmojiGroupItem[] = [];
     if (tab !== EmojiBoardTab.Emoji) return g;
 
-    g.push({
-      id: RECENT_GROUP_ID,
-      name: 'Recent',
-      items: recentEmojis,
-    });
+    // Add most-used emojis
+    const topShortcodes = getTopEmojis(21);
+    if (topShortcodes.length > 0) {
+      const mostUsedEmojis = topShortcodes
+        .map((shortcode) => emojis.find((e) => e.shortcode === shortcode))
+        .filter((e): e is IEmoji => e !== undefined);
+      
+      if (mostUsedEmojis.length > 0) {
+        g.push({
+          id: MOST_USED_GROUP_ID,
+          name: 'Most Used',
+          items: mostUsedEmojis,
+        });
+      }
+    }
 
     imagePacks.forEach((pack) => {
       let label = pack.meta.name;
@@ -108,7 +119,7 @@ const useGroups = (
     });
 
     return g;
-  }, [mx, recentEmojis, labels, imagePacks, tab]);
+  }, [mx, labels, imagePacks, tab, getTopEmojis]);
 
   const stickerGroupItems = useMemo(() => {
     const g: StickerGroupItem[] = [];
@@ -187,10 +198,10 @@ function EmojiSidebar({ activeGroupAtom, packs, onScrollToGroup }: EmojiSidebarP
     <Sidebar>
       <SidebarStack>
         <GroupIcon
-          active={activeGroupId === RECENT_GROUP_ID}
-          id={RECENT_GROUP_ID}
-          label="Recent"
-          icon={Icons.RecentClock}
+          active={activeGroupId === MOST_USED_GROUP_ID}
+          id={MOST_USED_GROUP_ID}
+          label="Most Used"
+          icon={Icons.Heart}
           onClick={handleScrollToGroup}
         />
       </SidebarStack>
@@ -378,13 +389,30 @@ export function EmojiBoard({
   addToRecentEmoji = true,
 }: EmojiBoardProps) {
   const mx = useMatrixClient();
+  const { trackEmojiUsage, getMostUsedEmoji } = useEmojiUsage();
 
   const emojiTab = tab === EmojiBoardTab.Emoji;
   const usage = emojiTab ? ImageUsage.Emoticon : ImageUsage.Sticker;
 
+  // Get default emoji - use most used or fallback to slight_smile
+  const defaultPreview = useMemo((): PreviewData => {
+    if (!emojiTab) return undefined;
+    
+    const mostUsedShortcode = getMostUsedEmoji();
+    if (mostUsedShortcode) {
+      // Find emoji by shortcode
+      const emoji = emojis.find((e) => e.shortcode === mostUsedShortcode);
+      if (emoji) {
+        return { key: emoji.unicode, shortcode: emoji.shortcode };
+      }
+    }
+    // Fallback to default
+    return DefaultEmojiPreview;
+  }, [emojiTab, getMostUsedEmoji]);
+
   const previewAtom = useMemo(
-    () => createPreviewDataAtom(emojiTab ? DefaultEmojiPreview : undefined),
-    [emojiTab]
+    () => createPreviewDataAtom(defaultPreview),
+    [defaultPreview]
   );
   const activeGroupIdAtom = useMemo(() => atom<string | undefined>(undefined), []);
   const setActiveGroupId = useSetAtom(activeGroupIdAtom);
@@ -439,6 +467,10 @@ export function EmojiBoard({
       onEmojiSelect?.(emojiInfo.data, emojiInfo.shortcode);
       if (!evt.altKey && !evt.shiftKey && addToRecentEmoji) {
         addRecentEmoji(mx, emojiInfo.data);
+        // Track emoji usage for favorites
+        trackEmojiUsage(emojiInfo.shortcode).catch((err) => {
+          console.error('Failed to track emoji usage:', err);
+        });
       }
     }
     if (emojiInfo.type === EmojiType.CustomEmoji) {

src/app/components/image-viewer/ImageViewer.tsx

@@ -8,6 +8,7 @@ import { useZoom } from '../../hooks/useZoom';
 import { usePan } from '../../hooks/usePan';
 import { downloadMedia } from '../../utils/matrix';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { getCurrentAccessToken } from '../../utils/auth';
 
 export type ImageViewerProps = {
   alt: string;
@@ -22,8 +23,24 @@ export const ImageViewer = as<'div', ImageViewerProps>(
     const { pan, cursor, onMouseDown } = usePan(zoom !== 1);
 
     const handleDownload = async () => {
-      const fileContent = await downloadMedia(src, mx.getAccessToken());
-      FileSaver.saveAs(fileContent, alt);
+      try {
+        // Always use current session's token to avoid stale tokens during account switches
+        const fileContent = await downloadMedia(src, getCurrentAccessToken());
+        FileSaver.saveAs(fileContent, alt);
+      } catch (error) {
+        console.warn('[ImageViewer] Failed to download media:', error);
+        // Fallback: try to fetch via standard fetch as blob
+        try {
+          const response = await fetch(src);
+          if (response.ok) {
+            const blob = await response.blob();
+            FileSaver.saveAs(blob, alt);
+          }
+        } catch {
+          // If all else fails, open in new tab to let browser handle it
+          window.open(src, '_blank');
+        }
+      }
     };
 
     return (

src/app/components/media/Video.tsx

@@ -1,4 +1,5 @@
 import React, { VideoHTMLAttributes, forwardRef, useRef, useState, useEffect } from 'react';
+
 import classNames from 'classnames';
 import { Box, IconButton, Icon, Icons, Tooltip, TooltipProvider, Text } from 'folds';
 import * as css from './media.css';
@@ -6,16 +7,14 @@ import * as videoCss from './videoControls.css';
 
 type VideoProps = VideoHTMLAttributes<HTMLVideoElement> & {
   disableControls?: boolean;
+  onExpand?: () => void;
 };
 
 export const Video = forwardRef<HTMLVideoElement, VideoProps>(
-  ({ className, disableControls, ...props }, ref) => {
-    const containerRef = useRef<HTMLDivElement>(null);
+  ({ className, disableControls, onExpand, ...props }, ref) => {
     const videoRef = useRef<HTMLVideoElement>(null);
     const [showControls, setShowControls] = useState(false);
-    const [isFullscreen, setIsFullscreen] = useState(false);
 
-    // Combine refs
     useEffect(() => {
       if (typeof ref === 'function') {
         ref(videoRef.current);
@@ -24,98 +23,61 @@ export const Video = forwardRef<HTMLVideoElement, VideoProps>(
       }
     }, [ref]);
 
-    // Track fullscreen state
     useEffect(() => {
-      const handleFullscreenChange = () => {
-        setIsFullscreen(!!document.fullscreenElement);
+      if (!onExpand) return;
+      const video = videoRef.current;
+      if (!video) return;
+
+      const handleFullscreenRequest = (evt: Event) => {
+        evt.preventDefault();
+        evt.stopImmediatePropagation();
+        onExpand();
       };
 
-      document.addEventListener('fullscreenchange', handleFullscreenChange);
-      return () => document.removeEventListener('fullscreenchange', handleFullscreenChange);
-    }, []);
-
-    const handleFullscreen = async () => {
-      try {
-        if (!document.fullscreenElement && containerRef.current) {
-          await containerRef.current.requestFullscreen();
-        } else if (document.fullscreenElement) {
-          await document.exitFullscreen();
-        }
-      } catch (error) {
-        console.error('Error toggling fullscreen:', error);
-      }
-    };
-
-    const handlePopOut = () => {
-      const videoSrc = videoRef.current?.src;
-      const videoTitle = props.title || 'Video';
-      
-      if (videoSrc) {
-        const popoutWindow = window.open(
-          '',
-          '_blank',
-          'width=800,height=600,menubar=no,toolbar=no,location=no,status=no'
-        );
-        
-        if (popoutWindow) {
-          popoutWindow.document.write(`
-            <!DOCTYPE html>
-            <html>
-              <head>
-                <title>${videoTitle}</title>
-                <style>
-                  body {
-                    margin: 0;
-                    padding: 0;
-                    background: #000;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    height: 100vh;
-                  }
-                  video {
-                    max-width: 100%;
-                    max-height: 100%;
-                    width: 100%;
-                    height: 100%;
-                  }
-                </style>
-              </head>
-              <body>
-                <video controls autoplay src="${videoSrc}">
-                  Your browser does not support the video tag.
-                </video>
-              </body>
-            </html>
-          `);
-          popoutWindow.document.close();
-        }
-      }
-    };
+      video.addEventListener('webkitbeginfullscreen', handleFullscreenRequest);
+      return () => {
+        video.removeEventListener('webkitbeginfullscreen', handleFullscreenRequest);
+      };
+    }, [onExpand]);
 
     if (disableControls) {
       return (
         // eslint-disable-next-line jsx-a11y/media-has-caption
-        <video className={classNames(css.Video, className)} {...props} ref={videoRef} />
+        <video 
+          className={classNames(css.Video, className)} 
+          {...props} 
+          ref={videoRef} 
+          loop={props.autoPlay} 
+          muted={props.autoPlay} 
+          playsInline 
+        />
       );
     }
 
     return (
       <Box
-        ref={containerRef}
         className={videoCss.VideoContainer}
         onMouseEnter={() => setShowControls(true)}
         onMouseLeave={() => setShowControls(false)}
       >
         {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
-        <video className={classNames(css.Video, className)} {...props} ref={videoRef} />
+        <video 
+          className={classNames(css.Video, className)} 
+          {...props} 
+          ref={videoRef} 
+          loop={props.autoPlay} 
+          muted={props.autoPlay} 
+          playsInline
+          controlsList={onExpand ? 'nofullscreen' : undefined}
+          onDoubleClick={onExpand ? (e) => { e.stopPropagation(); onExpand(); } : undefined}
+        />
         
-        {showControls && (
-          <Box className={videoCss.VideoControlsOverlay} gap="200">
+        {onExpand && (
+          <Box className={classNames(videoCss.VideoControlsOverlay, !showControls && videoCss.VideoControlsOverlayHidden)} gap="200">
             <TooltipProvider
               tooltip={
                 <Tooltip variant="Secondary">
-                  <Text size="T200">{isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}</Text>
+                  <Text size="T200">Expand</Text>
                 </Tooltip>
               }
               position="Bottom"
@@ -127,36 +89,10 @@ export const Video = forwardRef<HTMLVideoElement, VideoProps>(
                   variant="Secondary"
                   size="300"
                   radii="300"
-                  onClick={handleFullscreen}
-                  aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
+                  onClick={onExpand}
+                  aria-label="Expand video"
                 >
-                  <Icon
-                    size="200"
-                    src={isFullscreen ? Icons.Minus : Icons.Plus}
-                  />
-                </IconButton>
-              )}
-            </TooltipProvider>
-
-            <TooltipProvider
-              tooltip={
-                <Tooltip variant="Secondary">
-                  <Text size="T200">Pop Out</Text>
-                </Tooltip>
-              }
-              position="Bottom"
-              align="Center"
-            >
-              {(triggerRef) => (
-                <IconButton
-                  ref={triggerRef}
-                  variant="Secondary"
-                  size="300"
-                  radii="300"
-                  onClick={handlePopOut}
-                  aria-label="Open in new window"
-                >
-                  <Icon size="200" src={Icons.External} />
+                  <Icon size="50" src={Icons.Plus} />
                 </IconButton>
               )}
             </TooltipProvider>

src/app/components/media/media.css.ts

@@ -1,20 +1,24 @@
 import { style } from '@vanilla-extract/css';
-import { DefaultReset } from 'folds';
+import { DefaultReset, toRem } from 'folds';
 
 export const Image = style([
   DefaultReset,
   {
-    objectFit: 'cover',
-    width: '100%',
-    height: '100%',
+    display: 'block',
+    maxWidth: '100%',
+    maxHeight: '100%',
+    borderRadius: 'inherit',
+    imageRendering: 'auto',
+    backfaceVisibility: 'hidden',
+    transform: 'translateZ(0)',
   },
 ]);
 
 export const Video = style([
   DefaultReset,
   {
-    objectFit: 'contain',
-    width: '100%',
-    height: '100%',
+    display: 'block',
+    maxWidth: '100%',
+    maxHeight: '100%',
   },
 ]);

src/app/components/media/videoControls.css.ts

@@ -24,5 +24,12 @@ export const VideoControlsOverlay = style([
     gap: config.space.S200,
     zIndex: 10,
     pointerEvents: 'auto',
+    opacity: 1,
+    transition: 'opacity 0.15s ease',
   },
 ]);
+
+export const VideoControlsOverlayHidden = style({
+  opacity: 0,
+  pointerEvents: 'none',
+});

src/app/components/message/FileHeader.tsx

@@ -12,6 +12,7 @@ import {
   downloadMedia,
   mxcUrlToHttp,
 } from '../../utils/matrix';
+import { getCurrentAccessToken } from '../../utils/auth';
 
 const badgeStyles = { maxWidth: toRem(100) };
 
@@ -28,7 +29,8 @@ export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDow
   const [downloadState, download] = useAsyncCallback(
     useCallback(async () => {
       const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
-      const accessToken = mx.getAccessToken();
+      // Always use current session's token to avoid stale tokens during account switches
+      const accessToken = getCurrentAccessToken();
       const fileContent = encInfo
         ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo), accessToken)
         : await downloadMedia(mediaUrl, accessToken);

src/app/components/message/MsgTypeRenderers.tsx

@@ -80,7 +80,10 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }:
   const { body, formatted_body: customBody } = content;
 
   if (typeof body !== 'string') return <BrokenContent />;
-  const trimmedBody = trimReplyFromBody(body);
+  const trimmedBody = trimReplyFromBody(body).trim();
+  const trimmedCustomBody = typeof customBody === 'string' 
+    ? customBody.trim().replace(/(<br\s*\/?>\s*)+$/gi, '') 
+    : undefined;
   const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
   const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
 
@@ -93,7 +96,7 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }:
       >
         {renderBody({
           body: trimmedBody,
-          customBody: typeof customBody === 'string' ? customBody : undefined,
+          customBody: trimmedCustomBody,
         })}
         {edited && <MessageEditedContent />}
       </MessageTextBody>
@@ -119,7 +122,10 @@ export function MEmote({
   const { body, formatted_body: customBody } = content;
 
   if (typeof body !== 'string') return <BrokenContent />;
-  const trimmedBody = trimReplyFromBody(body);
+  const trimmedBody = trimReplyFromBody(body).trim();
+  const trimmedCustomBody = typeof customBody === 'string' 
+    ? customBody.trim().replace(/(<br\s*\/?>\s*)+$/gi, '') 
+    : undefined;
   const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
   const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
 
@@ -133,7 +139,7 @@ export function MEmote({
         <b>{`${displayName} `}</b>
         {renderBody({
           body: trimmedBody,
-          customBody: typeof customBody === 'string' ? customBody : undefined,
+          customBody: trimmedCustomBody,
         })}
         {edited && <MessageEditedContent />}
       </MessageTextBody>
@@ -152,7 +158,10 @@ export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNot
   const { body, formatted_body: customBody } = content;
 
   if (typeof body !== 'string') return <BrokenContent />;
-  const trimmedBody = trimReplyFromBody(body);
+  const trimmedBody = trimReplyFromBody(body).trim();
+  const trimmedCustomBody = typeof customBody === 'string' 
+    ? customBody.trim().replace(/(<br\s*\/?>\s*)+$/gi, '') 
+    : undefined;
   const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
   const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
 
@@ -165,7 +174,7 @@ export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNot
       >
         {renderBody({
           body: trimmedBody,
-          customBody: typeof customBody === 'string' ? customBody : undefined,
+          customBody: trimmedCustomBody,
         })}
         {edited && <MessageEditedContent />}
       </MessageTextBody>
@@ -195,15 +204,10 @@ export function MImage({ content, renderImageContent, outlined }: MImageProps) {
   if (typeof mxcUrl !== 'string') {
     return <BrokenContent />;
   }
-  const height = scaleYDimension(imgInfo?.w || 400, 400, imgInfo?.h || 400);
 
   return (
-    <Attachment outlined={outlined}>
-      <AttachmentBox
-        style={{
-          height: toRem(height < 48 ? 48 : height),
-        }}
-      >
+    <Attachment outlined={outlined} transparent>
+      <AttachmentBox>
         {renderImageContent({
           body: content.body || 'Image',
           info: imgInfo,
@@ -245,12 +249,10 @@ export function MVideo({ content, renderAsFile, renderVideoContent, outlined }:
     return <BrokenContent />;
   }
 
-  const height = scaleYDimension(videoInfo.w || 400, 400, videoInfo.h || 400);
-
   const filename = content.filename ?? content.body ?? 'Video';
 
   return (
-    <Attachment outlined={outlined}>
+    <Attachment outlined={outlined} transparent>
       <AttachmentHeader>
         <FileHeader
           body={filename}
@@ -265,11 +267,7 @@ export function MVideo({ content, renderAsFile, renderVideoContent, outlined }:
           }
         />
       </AttachmentHeader>
-      <AttachmentBox
-        style={{
-          height: toRem(height < 48 ? 48 : height),
-        }}
-      >
+      <AttachmentBox>
         {renderVideoContent({
           body: content.body || 'Video',
           info: videoInfo,

src/app/components/message/Reply.css.ts

@@ -32,7 +32,9 @@ export const Reply = style({
 
 export const ReplyContent = style({
   opacity: config.opacity.P300,
-
+  overflow: 'clip',
+  overflowY: 'clip',
+  lineHeight: '1.5',
   selectors: {
     [`${Reply}:hover &`]: {
       opacity: config.opacity.P500,

src/app/components/message/Reply.tsx

@@ -58,6 +58,8 @@ type ReplyProps = {
   replyEventId: string;
   threadRootId?: string | undefined;
   onClick?: MouseEventHandler | undefined;
+  /** Called when the thread indicator badge is clicked. Receives the thread root event ID. */
+  onOpenThread?: (threadRootId: string) => void;
   getMemberPowerTag?: GetMemberPowerTag;
   accessibleTagColors?: Map<string, string>;
   legacyUsernameColor?: boolean;
@@ -71,6 +73,7 @@ export const Reply = as<'div', ReplyProps>(
       replyEventId,
       threadRootId,
       onClick,
+      onOpenThread,
       getMemberPowerTag,
       accessibleTagColors,
       legacyUsernameColor,
@@ -107,7 +110,11 @@ export const Reply = as<'div', ReplyProps>(
     return (
       <Box direction="Row" gap="200" alignItems="Center" {...props} ref={ref}>
         {threadRootId && (
-          <ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
+          <ThreadIndicator
+            as="button"
+            data-event-id={threadRootId}
+            onClick={onOpenThread ? () => onOpenThread(threadRootId) : onClick}
+          />
         )}
         <ReplyLayout
           as="button"

src/app/components/message/attachment/Attachment.css.ts

@@ -8,8 +8,7 @@ export const Attachment = recipe({
     color: color.SurfaceVariant.OnContainer,
     borderRadius: config.radii.R400,
     overflow: 'hidden',
-    maxWidth: '100%',
-    width: toRem(400),
+    maxWidth: toRem(400),
   },
   variants: {
     outlined: {
@@ -17,6 +16,11 @@ export const Attachment = recipe({
         boxShadow: `inset 0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.ContainerLine}`,
       },
     },
+    transparent: {
+      true: {
+        backgroundColor: 'transparent',
+      },
+    },
   },
 });
 
@@ -29,9 +33,8 @@ export const AttachmentHeader = style({
 export const AttachmentBox = style([
   DefaultReset,
   {
-    maxWidth: '100%',
-    maxHeight: toRem(600),
-    width: toRem(400),
+    maxWidth: toRem(400),
+    maxHeight: toRem(400),
     overflow: 'hidden',
   },
 ]);

src/app/components/message/attachment/Attachment.tsx

@@ -4,11 +4,11 @@ import classNames from 'classnames';
 import * as css from './Attachment.css';
 
 export const Attachment = as<'div', css.AttachmentVariants>(
-  ({ className, outlined, ...props }, ref) => (
+  ({ className, outlined, transparent, ...props }, ref) => (
     <Box
       display="InlineFlex"
       direction="Column"
-      className={classNames(css.Attachment({ outlined }), className)}
+      className={classNames(css.Attachment({ outlined, transparent }), className)}
       {...props}
       ref={ref}
     />

src/app/components/message/content/AudioContent.tsx

@@ -22,6 +22,7 @@ import {
   downloadMedia,
   mxcUrlToHttp,
 } from '../../../utils/matrix';
+import { getCurrentAccessToken } from '../../../utils/auth';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 
 const PLAY_TIME_THROTTLE_OPS = {
@@ -55,7 +56,8 @@ export function AudioContent({
   const [srcState, loadSrc] = useAsyncCallback(
     useCallback(async () => {
       const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
-      const accessToken = mx.getAccessToken();
+      // Always use current session's token to avoid stale tokens during account switches
+      const accessToken = getCurrentAccessToken();
       const fileContent = encInfo
         ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo), accessToken)
         : await downloadMedia(mediaUrl, accessToken);

src/app/components/message/content/FileContent.tsx

@@ -35,6 +35,7 @@ import {
   mxcUrlToHttp,
 } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { getCurrentAccessToken } from '../../../utils/auth';
 import { ModalWide } from '../../../styles/Modal.css';
 
 const renderErrorButton = (retry: () => void, text: string) => (
@@ -87,7 +88,8 @@ export function ReadTextFile({ body, mimeType, url, encInfo, renderViewer }: Rea
   const [textState, loadText] = useAsyncCallback(
     useCallback(async () => {
       const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
-      const accessToken = mx.getAccessToken();
+      // Always use current session's token to avoid stale tokens during account switches
+      const accessToken = getCurrentAccessToken();
       const fileContent = encInfo
         ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo), accessToken)
         : await downloadMedia(mediaUrl, accessToken);
@@ -178,7 +180,8 @@ export function ReadPdfFile({ body, mimeType, url, encInfo, renderViewer }: Read
   const [pdfState, loadPdf] = useAsyncCallback(
     useCallback(async () => {
       const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
-      const accessToken = mx.getAccessToken();
+      // Always use current session's token to avoid stale tokens during account switches
+      const accessToken = getCurrentAccessToken();
       const fileContent = encInfo
         ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo), accessToken)
         : await downloadMedia(mediaUrl, accessToken);
@@ -256,7 +259,8 @@ export function DownloadFile({ body, mimeType, url, info, encInfo }: DownloadFil
   const [downloadState, download] = useAsyncCallback(
     useCallback(async () => {
       const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
-      const accessToken = mx.getAccessToken();
+      // Always use current session's token to avoid stale tokens during account switches
+      const accessToken = getCurrentAccessToken();
       const fileContent = encInfo
         ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo), accessToken)
         : await downloadMedia(mediaUrl, accessToken);

src/app/components/message/content/ImageContent.tsx

@@ -31,24 +31,40 @@ import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../../util
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { ModalWide } from '../../../styles/Modal.css';
 import { validBlurHash } from '../../../utils/blurHash';
+import { getCurrentAccessToken } from '../../../utils/auth';
 
 /**
  * Fetches media with authentication headers and returns a blob URL.
  * This is needed because service workers don't work reliably in Tauri/WebKit.
+ * Falls back to unauthenticated request if authenticated request fails with 401.
+ * If all attempts fail, returns the original URL to let the browser try directly.
  */
 const fetchAuthenticatedMedia = async (
   url: string,
   accessToken: string | null
 ): Promise<string> => {
-  const response = await fetch(url, {
-    method: 'GET',
-    headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : undefined,
-  });
-  if (!response.ok) {
-    throw new Error(`Failed to fetch media: ${response.status}`);
+  try {
+    let response = await fetch(url, {
+      method: 'GET',
+      headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : undefined,
+    });
+    
+    // If we got a 401 and we tried with auth, fallback to unauthenticated request
+    if (!response.ok && response.status === 401 && accessToken) {
+      console.warn('[ImageContent] Auth failed (401), attempting unauthenticated fallback for:', url);
+      response = await fetch(url, { method: 'GET' });
+    }
+    
+    if (!response.ok) {
+      console.warn(`[ImageContent] Failed to fetch authenticated media (${response.status}), falling back to original URL`);
+      return url;
+    }
+    const blob = await response.blob();
+    return URL.createObjectURL(blob);
+  } catch (error) {
+    console.warn('[ImageContent] Error fetching authenticated media, falling back to original URL:', error);
+    return url;
   }
-  const blob = await response.blob();
-  return URL.createObjectURL(blob);
 };
 
 /**
@@ -114,7 +130,8 @@ export const ImageContent = as<'div', ImageContentProps>(
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
         const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
-        const accessToken = mx.getAccessToken();
+        // Always use current session's token to avoid stale tokens during account switches
+        const accessToken = getCurrentAccessToken();
         if (encInfo) {
           const fileContent = await downloadEncryptedMedia(
             mediaUrl,

src/app/components/message/content/ThumbnailContent.tsx

@@ -5,23 +5,39 @@ import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { decryptFile, downloadEncryptedMedia, isAuthenticatedMediaUrl, mxcUrlToHttp } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { FALLBACK_MIMETYPE } from '../../../utils/mimeTypes';
+import { getCurrentAccessToken } from '../../../utils/auth';
 
 /**
  * Fetches media with authentication headers and returns a blob URL.
+ * Falls back to unauthenticated request if authenticated request fails with 401.
+ * If all attempts fail, returns the original URL to let the browser try directly.
  */
 const fetchAuthenticatedMedia = async (
   url: string,
   accessToken: string | null
 ): Promise<string> => {
-  const response = await fetch(url, {
-    method: 'GET',
-    headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : undefined,
-  });
-  if (!response.ok) {
-    throw new Error(`Failed to fetch media: ${response.status}`);
+  try {
+    let response = await fetch(url, {
+      method: 'GET',
+      headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : undefined,
+    });
+    
+    // If we got a 401 and we tried with auth, fallback to unauthenticated request
+    if (!response.ok && response.status === 401 && accessToken) {
+      console.warn('[ThumbnailContent] Auth failed (401), attempting unauthenticated fallback for:', url);
+      response = await fetch(url, { method: 'GET' });
+    }
+    
+    if (!response.ok) {
+      console.warn(`[ThumbnailContent] Failed to fetch authenticated media (${response.status}), falling back to original URL`);
+      return url;
+    }
+    const blob = await response.blob();
+    return URL.createObjectURL(blob);
+  } catch (error) {
+    console.warn('[ThumbnailContent] Error fetching authenticated media, falling back to original URL:', error);
+    return url;
   }
-  const blob = await response.blob();
-  return URL.createObjectURL(blob);
 };
 
 export type ThumbnailContentProps = {
@@ -32,17 +48,18 @@ export function ThumbnailContent({ info, renderImage }: ThumbnailContentProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
 
+  // Check if we have valid thumbnail data
+  const thumbInfo = info.thumbnail_info;
+  const thumbMxcUrl = info.thumbnail_file?.url ?? info.thumbnail_url;
+  const hasValidThumbnail = typeof thumbMxcUrl === 'string' && typeof thumbInfo?.mimetype === 'string';
+
   const [thumbSrcState, loadThumbSrc] = useAsyncCallback(
     useCallback(async () => {
-      const thumbInfo = info.thumbnail_info;
-      const thumbMxcUrl = info.thumbnail_file?.url ?? info.thumbnail_url;
       const encInfo = info.thumbnail_file;
-      if (typeof thumbMxcUrl !== 'string' || typeof thumbInfo?.mimetype !== 'string') {
-        throw new Error('Failed to load thumbnail');
-      }
 
       const mediaUrl = mxcUrlToHttp(mx, thumbMxcUrl, useAuthentication) ?? thumbMxcUrl;
-      const accessToken = mx.getAccessToken();
+      // Always use current session's token to avoid stale tokens during account switches
+      const accessToken = getCurrentAccessToken();
       if (encInfo) {
         const fileContent = await downloadEncryptedMedia(
           mediaUrl,
@@ -58,12 +75,15 @@ export function ThumbnailContent({ info, renderImage }: ThumbnailContentProps) {
       }
 
       return mediaUrl;
-    }, [mx, info, useAuthentication])
+    }, [mx, thumbMxcUrl, thumbInfo, info.thumbnail_file, useAuthentication])
   );
 
   useEffect(() => {
-    loadThumbSrc();
-  }, [loadThumbSrc]);
+    // Only attempt to load thumbnail if we have valid data
+    if (hasValidThumbnail) {
+      loadThumbSrc();
+    }
+  }, [hasValidThumbnail, loadThumbSrc]);
 
   return thumbSrcState.status === AsyncStatus.Success ? renderImage(thumbSrcState.data) : null;
 }

src/app/components/message/content/VideoContent.tsx

@@ -6,6 +6,10 @@ import {
   Chip,
   Icon,
   Icons,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
   Spinner,
   Text,
   Tooltip,
@@ -14,6 +18,7 @@ import {
 } from 'folds';
 import classNames from 'classnames';
 import { BlurhashCanvas } from 'react-blurhash';
+import FocusTrap from 'focus-trap-react';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import {
   IThumbnailContent,
@@ -30,9 +35,17 @@ import {
   downloadMedia,
   mxcUrlToHttp,
 } from '../../../utils/matrix';
+import { getCurrentAccessToken } from '../../../utils/auth';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { validBlurHash } from '../../../utils/blurHash';
+import { ModalWide } from '../../../styles/Modal.css';
+import { stopPropagation } from '../../../utils/keyboard';
 
+type RenderViewerProps = {
+  src: string;
+  alt: string;
+  requestClose: () => void;
+};
 type RenderVideoProps = {
   title: string;
   src: string;
@@ -40,6 +53,7 @@ type RenderVideoProps = {
   onError: () => void;
   autoPlay: boolean;
   controls: boolean;
+  onExpand?: () => void;
 };
 type VideoContentProps = {
   body: string;
@@ -51,6 +65,7 @@ type VideoContentProps = {
   markedAsSpoiler?: boolean;
   spoilerReason?: string;
   renderThumbnail?: () => ReactNode;
+  renderViewer?: (props: RenderViewerProps) => ReactNode;
   renderVideo: (props: RenderVideoProps) => ReactNode;
 };
 export const VideoContent = as<'div', VideoContentProps>(
@@ -66,6 +81,7 @@ export const VideoContent = as<'div', VideoContentProps>(
       markedAsSpoiler,
       spoilerReason,
       renderThumbnail,
+      renderViewer,
       renderVideo,
       ...props
     },
@@ -77,12 +93,14 @@ export const VideoContent = as<'div', VideoContentProps>(
 
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);
+    const [viewer, setViewer] = useState(false);
     const [blurred, setBlurred] = useState(markedAsSpoiler ?? false);
 
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
         const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
-        const accessToken = mx.getAccessToken();
+        // Always use current session's token to avoid stale tokens during account switches
+        const accessToken = getCurrentAccessToken();
         const fileContent = encInfo
           ? await downloadEncryptedMedia(mediaUrl, (encBuf) =>
               decryptFile(encBuf, mimeType, encInfo), accessToken
@@ -111,6 +129,28 @@ export const VideoContent = as<'div', VideoContentProps>(
 
     return (
       <Box className={classNames(css.RelativeBase, className)} {...props} ref={ref}>
+        {renderViewer && srcState.status === AsyncStatus.Success && (
+          <Overlay open={viewer} backdrop={<OverlayBackdrop />}>
+            <OverlayCenter>
+              <FocusTrap
+                focusTrapOptions={{
+                  initialFocus: false,
+                  onDeactivate: () => setViewer(false),
+                  clickOutsideDeactivates: true,
+                  escapeDeactivates: stopPropagation,
+                }}
+              >
+                <Modal className={ModalWide} size="500">
+                  {renderViewer({
+                    src: srcState.data,
+                    alt: body,
+                    requestClose: () => setViewer(false),
+                  })}
+                </Modal>
+              </FocusTrap>
+            </OverlayCenter>
+          </Overlay>
+        )}
         {typeof blurHash === 'string' && !load && (
           <BlurhashCanvas
             style={{ width: '100%', height: '100%' }}
@@ -152,6 +192,7 @@ export const VideoContent = as<'div', VideoContentProps>(
               onError: handleError,
               autoPlay: true,
               controls: true,
+              onExpand: renderViewer ? () => setViewer(true) : undefined,
             })}
           </Box>
         )}

src/app/components/message/content/VideoFrameThumbnail.tsx

@@ -0,0 +1,132 @@
+import { ReactNode, useCallback, useEffect, useState } from 'react';
+import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { decryptFile, downloadEncryptedMedia, downloadMedia, mxcUrlToHttp } from '../../../utils/matrix';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { getCurrentAccessToken } from '../../../utils/auth';
+
+/**
+ * Extracts the first frame from a video file and renders it as a thumbnail.
+ * This is used as a fallback when no thumbnail metadata is provided. 
+ */
+export type VideoFrameThumbnailProps = {
+  mimeType: string;
+  url: string;
+  encInfo?: EncryptedAttachmentInfo;
+  renderImage: (src: string) => ReactNode;
+};
+
+export function VideoFrameThumbnail({
+  mimeType,
+  url,
+  encInfo,
+  renderImage,
+}: VideoFrameThumbnailProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const [thumbnailSrc, setThumbnailSrc] = useState<string | null>(null);
+
+  const [videoSrcState, loadVideoSrc] = useAsyncCallback(
+    useCallback(async () => {
+      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
+      const accessToken = getCurrentAccessToken();
+      
+      const fileContent = encInfo
+        ? await downloadEncryptedMedia(mediaUrl, (encBuf) =>
+            decryptFile(encBuf, mimeType, encInfo), accessToken
+          )
+        : await downloadMedia(mediaUrl, accessToken);
+      
+      return URL.createObjectURL(fileContent);
+    }, [mx, url, useAuthentication, mimeType, encInfo])
+  );
+
+  useEffect(() => {
+    loadVideoSrc();
+  }, [loadVideoSrc]);
+
+  useEffect(() => {
+    if (videoSrcState.status !== AsyncStatus.Success) return undefined;
+
+    const videoUrl = videoSrcState.status === AsyncStatus.Success ? videoSrcState.data : null;
+    if (!videoUrl) return undefined;
+
+    const video = document.createElement('video');
+    video.preload = 'metadata';
+    video.muted = true;
+    video.playsInline = true;
+    video.crossOrigin = 'anonymous';
+    video.src = videoUrl;
+
+    let isCleanedUp = false;
+    const handlers: {
+      loadedData?: () => void;
+      seeked?: () => void;
+      error?: () => void;
+    } = {};
+
+    const cleanup = () => {
+      if (isCleanedUp) return;
+      isCleanedUp = true;
+      
+      if (handlers.loadedData) video.removeEventListener('loadeddata', handlers.loadedData);
+      if (handlers.seeked) video.removeEventListener('seeked', handlers.seeked);
+      if (handlers.error) video.removeEventListener('error', handlers.error);
+      video.src = '';
+      video.load();
+    };
+
+    handlers.loadedData = () => {
+      try {
+        video.currentTime = Math.min(0.1, video.duration / 2);
+      } catch {
+        cleanup();
+      }
+    };
+
+    handlers.seeked = () => {
+      try {
+        const canvas = document.createElement('canvas');
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+          cleanup();
+          return;
+        }
+
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        
+        canvas.toBlob((blob) => {
+          if (blob) {
+            const thumbnailUrl = URL.createObjectURL(blob);
+            setThumbnailSrc(thumbnailUrl);
+          }
+          cleanup();
+        }, 'image/jpeg', 0.85);
+      } catch {
+        cleanup();
+      }
+    };
+
+    handlers.error = () => {
+      cleanup();
+    };
+
+    video.addEventListener('loadeddata', handlers.loadedData);
+    video.addEventListener('seeked', handlers.seeked);
+    video.addEventListener('error', handlers.error);
+
+    return () => {
+      cleanup();
+      if (thumbnailSrc) {
+        URL.revokeObjectURL(thumbnailSrc);
+      }
+      URL.revokeObjectURL(videoUrl);
+    };
+  }, [videoSrcState, thumbnailSrc]);
+
+  return thumbnailSrc ? renderImage(thumbnailSrc) : null;
+}

src/app/components/message/content/index.ts

@@ -1,6 +1,7 @@
 export * from './ThumbnailContent';
 export * from './ImageContent';
 export * from './VideoContent';
+export * from './VideoFrameThumbnail';
 export * from './AudioContent';
 export * from './FileContent';
 export * from './FallbackContent';

src/app/components/message/content/style.css.ts

@@ -5,19 +5,24 @@ export const RelativeBase = style([
   DefaultReset,
   {
     position: 'relative',
-    width: '100%',
-    height: '100%',
+    display: 'flex',
+    maxWidth: '100%',
+    maxHeight: '100%',
+    borderRadius: '7px',
+    overflow: 'hidden',
   },
 ]);
 
 export const AbsoluteContainer = style([
   DefaultReset,
   {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    maxWidth: '100%',
+    maxHeight: '100%',
+    borderRadius: 'inherit',
+    overflow: 'hidden',
   },
 ]);
 

src/app/components/message/layout/layout.css.ts

@@ -188,8 +188,10 @@ export const BubbleLeftArrow = style({
 
 export const Username = style({
   overflow: 'hidden',
+  overflowY: 'clip',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
+  lineHeight: '1.5',
   // Allow text selection while keeping button clickable
   userSelect: 'text',
   WebkitUserSelect: 'text',
@@ -210,6 +212,9 @@ export const UsernameBold = style({
 export const MessageTextBody = recipe({
   base: {
     wordBreak: 'break-word',
+    overflow: 'clip',
+    overflowY: 'clip',
+    lineHeight: '1.5',
   },
   variants: {
     preWrap: {

src/app/components/nav/NavItemContent.tsx

@@ -3,7 +3,7 @@ import { Text, as } from 'folds';
 import classNames from 'classnames';
 import * as css from './styles.css';
 
-export const NavItemContent = as<'p', ComponentProps<typeof Text>>(
+export const NavItemContent = as<'span', ComponentProps<typeof Text>>(
   ({ className, ...props }, ref) => (
     <Text className={classNames(css.NavItemContent, className)} size="T300" {...props} ref={ref} />
   )

src/app/components/nav/styles.css.ts

@@ -126,3 +126,7 @@ export const NavItemContent = style({
 export const NavItemOptions = style({
   paddingRight: config.space.S200,
 });
+
+export const ThreadItem = style({
+  minHeight: toRem(24),
+});

src/app/components/presence/Presence.tsx

@@ -62,14 +62,15 @@ export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
 type AvatarPresenceProps = {
   badge: ReactNode;
   variant?: ContainerColor;
+  badgeBackgroundColor?: string;
 };
 export const AvatarPresence = as<'div', AvatarPresenceProps>(
-  ({ as: AsAvatarPresence, badge, variant = 'Surface', children, ...props }, ref) => (
+  ({ as: AsAvatarPresence, badge, variant = 'Surface', badgeBackgroundColor, children, ...props }, ref) => (
     <Box as={AsAvatarPresence} className={css.AvatarPresence} {...props} ref={ref}>
       {badge && (
         <div
           className={css.AvatarPresenceBadge}
-          style={{ backgroundColor: color[variant].Container }}
+          style={{ backgroundColor: badgeBackgroundColor || color[variant].Container }}
         >
           {badge}
         </div>

src/app/components/title-bar/TitleBar.tsx

@@ -307,7 +307,6 @@ export function TitleBar({ mx, children }: TitleBarProps) {
       
       // Ignore if it's the currently active room
       if (room.roomId === roomId) {
-        console.log('[TitleBar] Skipping: active room');
         return;
       }
       

src/app/components/update-notification/UpdateNotification.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Box, IconButton, Spinner, Text, Menu, PopOut, Button, config } from 'folds';
+import { Box, Spinner, Text, Menu, PopOut, Button, config } from 'folds';
 import * as css from './UpdateNotification.css';
 
 interface UpdateInfo {

src/app/components/url-preview/GiphyEmbed.css.tsx

@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css';
+import { DefaultReset, toRem } from 'folds';
+
+export const GiphyEmbed = style([
+  DefaultReset,
+  {
+    width: toRem(480),
+    maxWidth: '100%',
+    display: 'block',
+  },
+]);
+
+export const GiphyVideo = style([
+  DefaultReset,
+  {
+    width: '100%',
+    height: 'auto',
+    border: 'none',
+    display: 'block',
+    backgroundColor: 'transparent',
+  },
+]);

src/app/components/url-preview/GiphyEmbed.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+import { as } from 'folds';
+import * as css from './GiphyEmbed.css';
+
+const GIPHY_URL_PATTERNS = [
+  /(?:https?:\/\/)?(?:www\.)?giphy\.com\/gifs\/(?:[\w-]+-)([a-zA-Z0-9]+)(?:\?|$)/,
+  /(?:https?:\/\/)?(?:www\.)?giphy\.com\/embed\/([a-zA-Z0-9]+)(?:\?|$)/,
+  /(?:https?:\/\/)?(?:media\.)?giphy\.com\/media\/([a-zA-Z0-9]+)/,
+];
+
+export function isGiphyUrl(url: string): boolean {
+  return GIPHY_URL_PATTERNS.some((pattern) => pattern.test(url));
+}
+
+export function extractGiphyId(url: string): string | null {
+  let gifId: string | null = null;
+  GIPHY_URL_PATTERNS.some((pattern) => {
+    const match = url.match(pattern);
+    if (match) {
+      const [, id] = match;
+      if (id) {
+        gifId = id;
+        return true;
+      }
+    }
+    return false;
+  });
+  return gifId;
+}
+
+type GiphyEmbedProps = {
+  url: string;
+};
+
+export const GiphyEmbed = as<'div', GiphyEmbedProps>(({ url, ...props }, ref) => {
+  const gifId = extractGiphyId(url);
+  const [mediaUrl, setMediaUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!gifId) return;
+
+    // Try to get the direct media URL from Giphy
+    // Format: https://i.giphy.com/media/{ID}/giphy.mp4 or giphy.gif
+    const mp4Url = `https://i.giphy.com/media/${gifId}/giphy.mp4`;
+    setMediaUrl(mp4Url);
+  }, [gifId]);
+
+  if (!gifId || !mediaUrl) {
+    return null;
+  }
+
+  return (
+    <div className={css.GiphyEmbed} {...props} ref={ref}>
+      <video
+        className={css.GiphyVideo}
+        src={mediaUrl}
+        autoPlay
+        loop
+        muted
+        playsInline
+      />
+    </div>
+  );
+});

src/app/components/url-preview/TikTokEmbed.css.tsx

@@ -0,0 +1,116 @@
+import { style } from '@vanilla-extract/css';
+import { DefaultReset, color, config, toRem } from 'folds';
+
+export const TikTokEmbed = style([
+  DefaultReset,
+  {
+    width: toRem(360),
+    maxWidth: '100%',
+    backgroundColor: color.SurfaceVariant.Container,
+    border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+    borderRadius: config.radii.R300,
+    overflow: 'hidden',
+  },
+]);
+
+export const TikTokEmbedHeader = style([
+  DefaultReset,
+  {
+    padding: `${config.space.S200} ${config.space.S300}`,
+    backgroundColor: color.SurfaceVariant.ContainerActive,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: config.space.S200,
+  },
+]);
+
+export const TikTokEmbedInfo = style([
+  DefaultReset,
+  {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: config.space.S100,
+    flex: 1,
+    minWidth: 0,
+  },
+]);
+
+export const TikTokEmbedTitle = style({
+  color: color.Primary.Main,
+  textDecoration: 'none',
+  fontWeight: config.fontWeight.W500,
+  ':hover': {
+    textDecoration: 'underline',
+  },
+});
+
+export const TikTokEmbedAuthor = style({
+  color: color.SurfaceVariant.OnContainer,
+  textDecoration: 'none',
+  opacity: 0.8,
+  ':hover': {
+    textDecoration: 'underline',
+    opacity: 1,
+  },
+});
+
+export const TikTokEmbedLink = style({
+  color: color.Success.Main,
+  textDecoration: 'none',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  ':hover': {
+    textDecoration: 'underline',
+  },
+});
+
+export const TikTokThumbnailContainer = style([
+  DefaultReset,
+  {
+    position: 'relative',
+    width: '100%',
+    height: toRem(550),
+    backgroundColor: '#000',
+    display: 'block',
+  },
+]);
+
+export const TikTokThumbnailButton = style([
+  DefaultReset,
+  {
+    position: 'relative',
+    width: '100%',
+    height: toRem(550),
+    border: 'none',
+    padding: 0,
+    cursor: 'pointer',
+    backgroundColor: '#000',
+    display: 'block',
+    overflow: 'hidden',
+  },
+]);
+
+export const TikTokThumbnail = style([
+  DefaultReset,
+  {
+    width: '100%',
+    height: '100%',
+    display: 'block',
+    objectFit: 'cover',
+    objectPosition: 'center',
+  },
+]);
+
+export const TikTokEmbedContainer = style([
+  DefaultReset,
+  {
+    width: '100%',
+    height: toRem(550),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#000',
+  },
+]);

src/app/components/url-preview/TikTokEmbed.tsx

@@ -0,0 +1,245 @@
+import React, { MouseEvent, useEffect, useState } from 'react';
+import { Box, Spinner, Text, as } from 'folds';
+import * as css from './TikTokEmbed.css';
+import { openExternalUrl } from '../../utils/tauri';
+
+/**
+ * Regex patterns to match TikTok URLs
+ */
+const TIKTOK_URL_PATTERNS = [
+  // Standard tiktok.com/@username/video/VIDEO_ID
+  /(?:https?:\/\/)?(?:www\.)?tiktok\.com\/@[\w.-]+\/video\/(\d+)/i,
+  // Short vm.tiktok.com/VIDEO_CODE
+  /(?:https?:\/\/)?(?:www\.)?vm\.tiktok\.com\/([\w]+)/i,
+  // Short vt.tiktok.com/VIDEO_CODE
+  /(?:https?:\/\/)?(?:www\.)?vt\.tiktok\.com\/([\w]+)/i,
+  // Mobile m.tiktok.com
+  /(?:https?:\/\/)?(?:www\.)?m\.tiktok\.com\/v\/(\d+)/i,
+];
+
+/**
+ * TikTok oEmbed API base
+ */
+const TIKTOK_OEMBED_API = 'https://www.tiktok.com/oembed';
+
+/**
+ * Click handler for external links - uses Tauri shell on desktop/mobile
+ */
+const handleExternalLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {
+  const { href } = e.currentTarget;
+  if (href && (href.startsWith('http://') || href.startsWith('https://'))) {
+    e.preventDefault();
+    openExternalUrl(href);
+  }
+};
+
+/**
+ * Checks if a URL is a TikTok URL
+ * @param url The URL to check
+ * @returns True if the URL is a TikTok URL
+ */
+export function isTikTokUrl(url: string): boolean {
+  return TIKTOK_URL_PATTERNS.some((pattern) => pattern.test(url));
+}
+
+/**
+ * Fetches TikTok video metadata using oEmbed API
+ * @param url The TikTok video URL
+ * @returns Video metadata including title, author, and thumbnail
+ */
+async function fetchTikTokOEmbed(url: string): Promise<{
+  title: string;
+  authorName: string;
+  authorUrl: string;
+  thumbnailUrl: string;
+  embedHtml: string;
+} | null> {
+  try {
+    const oembedUrl = `${TIKTOK_OEMBED_API}?url=${encodeURIComponent(url)}`;
+    const response = await fetch(oembedUrl);
+    if (!response.ok) return null;
+    
+    const data = await response.json();
+    
+    return {
+      title: data.title || 'TikTok Video',
+      authorName: data.author_name || 'Unknown',
+      authorUrl: data.author_url || url,
+      thumbnailUrl: data.thumbnail_url || '',
+      embedHtml: data.html || '',
+    };
+  } catch {
+    return null;
+  }
+}
+
+type TikTokEmbedState = 
+  | { status: 'loading' }
+  | { status: 'loaded'; title: string; authorName: string; authorUrl: string; thumbnailUrl: string; embedHtml: string }
+  | { status: 'error' };
+
+type TikTokEmbedProps = {
+  /** The original TikTok URL */
+  url: string;
+};
+
+/**
+ * TikTok embed component that shows video preview with metadata
+ */
+export const TikTokEmbed = as<'div', TikTokEmbedProps>(({ url, ...props }, ref) => {
+  const [state, setState] = useState<TikTokEmbedState>({ status: 'loading' });
+  const [showEmbed, setShowEmbed] = useState(false);
+
+  // Fetch video info on mount
+  useEffect(() => {
+    let cancelled = false;
+
+    fetchTikTokOEmbed(url).then((info) => {
+      if (cancelled) return;
+      
+      if (info) {
+        setState({
+          status: 'loaded',
+          title: info.title,
+          authorName: info.authorName,
+          authorUrl: info.authorUrl,
+          thumbnailUrl: info.thumbnailUrl,
+          embedHtml: info.embedHtml,
+        });
+      } else {
+        setState({ status: 'error' });
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [url]);
+
+  // Loading state
+  if (state.status === 'loading') {
+    return (
+      <Box shrink="No" className={css.TikTokEmbed} direction="Column" {...props} ref={ref}>
+        <div className={css.TikTokEmbedHeader}>
+          <Text
+            as="a"
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            size="T200"
+            className={css.TikTokEmbedLink}
+            onClick={handleExternalLinkClick}
+            truncate
+          >
+            TikTok - Loading...
+          </Text>
+        </div>
+        <Box 
+          className={css.TikTokThumbnailContainer} 
+          alignItems="Center" 
+          justifyContent="Center"
+          style={{ background: '#000', display: 'flex' }}
+        >
+          <Spinner variant="Secondary" size="600" />
+        </Box>
+      </Box>
+    );
+  }
+
+  // Error state - show basic link
+  if (state.status === 'error') {
+    return (
+      <Box shrink="No" className={css.TikTokEmbed} direction="Column" {...props} ref={ref}>
+        <div className={css.TikTokEmbedHeader}>
+          <Text
+            as="a"
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            size="T200"
+            className={css.TikTokEmbedLink}
+            onClick={handleExternalLinkClick}
+            truncate
+          >
+            TikTok Video
+          </Text>
+        </div>
+      </Box>
+    );
+  }
+
+  // Loaded state - show thumbnail or embed
+  if (!showEmbed) {
+    return (
+      <Box shrink="No" className={css.TikTokEmbed} direction="Column" {...props} ref={ref}>
+        <div className={css.TikTokEmbedHeader}>
+          <div className={css.TikTokEmbedInfo}>
+            <Text
+              as="a"
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              size="T300"
+              className={css.TikTokEmbedTitle}
+              onClick={handleExternalLinkClick}
+              truncate
+            >
+              {state.title}
+            </Text>
+            <Text
+              as="a"
+              href={state.authorUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              size="T200"
+              className={css.TikTokEmbedAuthor}
+              onClick={handleExternalLinkClick}
+              truncate
+            >
+              {state.authorName}
+            </Text>
+          </div>
+        </div>
+        <button
+          type="button"
+          className={css.TikTokThumbnailButton}
+          onClick={() => setShowEmbed(true)}
+          aria-label="Load TikTok video"
+        >
+          {state.thumbnailUrl && (
+            <img 
+              src={state.thumbnailUrl} 
+              alt={state.title}
+              className={css.TikTokThumbnail}
+              crossOrigin="anonymous"
+            />
+          )}
+        </button>
+      </Box>
+    );
+  }
+
+  // Show embed (using dangerouslySetInnerHTML for TikTok's oEmbed HTML)
+  return (
+    <Box shrink="No" className={css.TikTokEmbed} direction="Column" {...props} ref={ref}>
+      <div className={css.TikTokEmbedHeader}>
+        <Text
+          as="a"
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          size="T200"
+          className={css.TikTokEmbedLink}
+          onClick={handleExternalLinkClick}
+          truncate
+        >
+          {state.title}
+        </Text>
+      </div>
+      <div 
+        className={css.TikTokEmbedContainer}
+        dangerouslySetInnerHTML={{ __html: state.embedHtml }}
+      />
+    </Box>
+  );
+});

src/app/components/url-preview/UrlPreviewCard.tsx

@@ -12,6 +12,7 @@ import * as css from './UrlPreviewCard.css';
 import { tryDecodeURIComponent } from '../../utils/dom';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useAuthenticatedMediaUrl } from '../../hooks/useAuthenticatedMediaUrl';
 import { openExternalUrl } from '../../utils/tauri';
 
 const linkStyles = { color: color.Success.Main };
@@ -27,6 +28,18 @@ const handleExternalLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {
   }
 };
 
+/**
+ * Preview image component with authentication support
+ */
+const AuthenticatedUrlPreviewImg = ({
+  src,
+  useAuthentication,
+  ...props
+}: React.ComponentProps<typeof UrlPreviewImg> & { useAuthentication: boolean }) => {
+  const authenticatedSrc = useAuthenticatedMediaUrl(src, useAuthentication);
+  return <UrlPreviewImg src={authenticatedSrc} {...props} />;
+};
+
 export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
   ({ url, ts, ...props }, ref) => {
     const mx = useMatrixClient();
@@ -36,10 +49,22 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
     );
 
     useEffect(() => {
-      loadPreview().catch(() => {
-        // Error is already handled by AsyncStatus.Error state
+      loadPreview().catch((error) => {
+        // Log preview errors for debugging - common causes:
+        // - 502/503: Matrix server's URL preview service is down/misconfigured
+        // - 404: URL preview endpoint not available on this server
+        // - Network errors: connectivity issues
+        if (error?.httpStatus === 502 || error?.httpStatus === 503) {
+          // Server's URL preview backend is down - this is a server-side issue
+          // eslint-disable-next-line no-console
+          console.warn('[UrlPreview] Server URL preview service unavailable (502/503):', url);
+        } else if (error?.httpStatus === 404) {
+          // Server doesn't support URL previews
+          // eslint-disable-next-line no-console
+          console.info('[UrlPreview] Server does not support URL previews:', url);
+        }
       });
-    }, [loadPreview]);
+    }, [loadPreview, url]);
 
     if (previewStatus.status === AsyncStatus.Error) return null;
 
@@ -57,8 +82,9 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
       return (
         <>
           {imgUrl && (
-            <UrlPreviewImg
+            <AuthenticatedUrlPreviewImg
               src={imgUrl}
+              useAuthentication={useAuthentication}
               alt={prev['og:title']}
               title={prev['og:title']}
               style={isSvg ? { padding: '10px' } : undefined}

src/app/components/url-preview/YouTubeEmbed.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, useCallback, useState } from 'react';
+import React, { MouseEvent, useCallback, useEffect, useState } from 'react';
 import { Box, Icon, Icons, Spinner, Text, as } from 'folds';
 import * as css from './YouTubeEmbed.css';
 import { getYouTubeStream, isYouTubeStreamingAvailable, openExternalUrl } from '../../utils/tauri';
@@ -21,8 +21,14 @@ const YOUTUBE_URL_PATTERNS = [
 
 /**
  * YouTube embed URL base - fallback when yt-dlp is not available
+ * Using youtube-nocookie.com to avoid Error 153 and embedding restrictions
  */
-const YOUTUBE_EMBED_BASE = 'https://www.youtube.com/embed';
+const YOUTUBE_EMBED_BASE = 'https://www.youtube-nocookie.com/embed';
+
+/**
+ * YouTube oEmbed API base - used to fetch video metadata
+ */
+const YOUTUBE_OEMBED_API = 'https://www.youtube.com/oembed';
 
 /**
  * Get YouTube thumbnail URL for a video
@@ -33,6 +39,23 @@ function getYouTubeThumbnailUrl(videoId: string): string {
   return `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
 }
 
+/**
+ * Fetch YouTube video title using oEmbed API
+ * @param url The YouTube video URL
+ * @returns The video title or null if fetch fails
+ */
+async function fetchYouTubeTitle(url: string): Promise<string | null> {
+  try {
+    const oembedUrl = `${YOUTUBE_OEMBED_API}?url=${encodeURIComponent(url)}&format=json`;
+    const response = await fetch(oembedUrl);
+    if (!response.ok) return null;
+    const data = await response.json();
+    return data.title || null;
+  } catch {
+    return null;
+  }
+}
+
 /**
  * Checks if a URL is a YouTube URL
  * @param url The URL to check
@@ -66,10 +89,15 @@ export function extractYouTubeVideoId(url: string): string | null {
 /**
  * Generates a YouTube embed URL for a video (fallback)
  * @param videoId The YouTube video ID
- * @returns The embed URL
+ * @returns The embed URL with parameters to avoid Error 153
  */
 export function getYouTubeEmbedUrl(videoId: string): string {
-  return `${YOUTUBE_EMBED_BASE}/${videoId}?autoplay=1`;
+  // Use youtube-nocookie.com and add parameters to help with embedding
+  // autoplay=1 - start playing when loaded
+  // rel=0 - only show related videos from same channel
+  // modestbranding=1 - minimize YouTube branding
+  // enablejsapi=1 - enable JavaScript API for better compatibility
+  return `${YOUTUBE_EMBED_BASE}/${videoId}?autoplay=1&rel=0&modestbranding=1&enablejsapi=1`;
 }
 
 /**
@@ -101,6 +129,22 @@ type YouTubeEmbedProps = {
 export const YouTubeEmbed = as<'div', YouTubeEmbedProps>(({ url, ...props }, ref) => {
   const videoId = extractYouTubeVideoId(url);
   const [playerState, setPlayerState] = useState<PlayerState>({ status: 'thumbnail' });
+  const [videoTitle, setVideoTitle] = useState<string | null>(null);
+
+  // Fetch video title on mount
+  useEffect(() => {
+    let cancelled = false;
+    
+    fetchYouTubeTitle(url).then((title) => {
+      if (!cancelled) {
+        setVideoTitle(title);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [url]);
 
   const handlePlay = useCallback(async () => {
     if (!isYouTubeStreamingAvailable()) {
@@ -141,11 +185,19 @@ export const YouTubeEmbed = as<'div', YouTubeEmbedProps>(({ url, ...props }, ref
     </div>
   );
 
+  // Determine what to show in the header based on video title availability
+  const getHeaderLabel = (suffix?: string) => {
+    if (videoTitle) {
+      return suffix ? `${videoTitle} ${suffix}` : videoTitle;
+    }
+    return suffix ? `YouTube ${suffix}` : 'YouTube';
+  };
+
   // Thumbnail preview - click to play
   if (playerState.status === 'thumbnail') {
     return (
       <Box shrink="No" className={css.YouTubeEmbed} direction="Column" {...props} ref={ref}>
-        {renderHeader('YouTube')}
+        {renderHeader(getHeaderLabel())}
         <button 
           type="button"
           className={css.YouTubeThumbnailButton}
@@ -169,7 +221,7 @@ export const YouTubeEmbed = as<'div', YouTubeEmbedProps>(({ url, ...props }, ref
   if (playerState.status === 'loading') {
     return (
       <Box shrink="No" className={css.YouTubeEmbed} direction="Column" {...props} ref={ref}>
-        {renderHeader('YouTube - Loading...')}
+        {renderHeader(getHeaderLabel('- Loading...'))}
         <Box 
           className={css.YouTubeEmbedIframe} 
           alignItems="Center" 
@@ -204,13 +256,14 @@ export const YouTubeEmbed = as<'div', YouTubeEmbedProps>(({ url, ...props }, ref
   const embedUrl = getYouTubeEmbedUrl(videoId);
   return (
     <Box shrink="No" className={css.YouTubeEmbed} direction="Column" {...props} ref={ref}>
-      {renderHeader('YouTube')}
+      {renderHeader(getHeaderLabel())}
       <iframe
         className={css.YouTubeEmbedIframe}
         src={embedUrl}
         title="YouTube video player"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
         allowFullScreen
+        referrerPolicy="strict-origin-when-cross-origin"
       />
     </Box>
   );

src/app/components/url-preview/index.ts

@@ -1,3 +1,5 @@
 export * from './UrlPreview';
 export * from './UrlPreviewCard';
 export * from './YouTubeEmbed';
+export * from './TikTokEmbed';
+export * from './GiphyEmbed';

src/app/components/user-profile/CreatorChip.tsx

@@ -1,4 +1,4 @@
-import { Chip, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
+import { Chip, color, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
 import React, { MouseEventHandler, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { isKeyHotkey } from 'is-hotkey';
@@ -14,8 +14,9 @@ import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
 import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
 import { SpaceSettingsPage } from '../../state/spaceSettings';
 import { RoomSettingsPage } from '../../state/roomSettings';
+import { getContrastingTextColor } from '../../utils/common';
 
-export function CreatorChip() {
+export function CreatorChip({ borderColor }: { borderColor?: string }) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const room = useRoom();
@@ -79,6 +80,7 @@ export function CreatorChip() {
     >
       <Chip
         variant="Success"
+        fill={borderColor ? 'Soft' : 'None'}
         outlined
         radii="Pill"
         before={
@@ -91,8 +93,14 @@ export function CreatorChip() {
         after={tagIconSrc ? <PowerIcon size="50" iconSrc={tagIconSrc} /> : undefined}
         onClick={open}
         aria-pressed={!!cords}
+        style={borderColor ? {
+          backgroundColor: borderColor,
+          border: 'none',
+          color: getContrastingTextColor(borderColor),
+          opacity: 1
+        } : { backgroundColor: color.Surface.Container, opacity: 1 }}
       >
-        <Text size="B300" truncate>
+        <Text size="B300" truncate style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
           {tag.name}
         </Text>
       </Chip>

src/app/components/user-profile/PowerChip.tsx

@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   Chip,
+  color,
   config,
   Dialog,
   Header,
@@ -43,6 +44,7 @@ import { getPowerTagIconSrc, useGetMemberPowerTag } from '../../hooks/useMemberP
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
+import { getContrastingTextColor } from '../../utils/common';
 
 type SelfDemoteAlertProps = {
   power: number;
@@ -144,7 +146,7 @@ function SharedPowerAlert({ power, onCancel, onChange }: SharedPowerAlertProps)
   );
 }
 
-export function PowerChip({ userId }: { userId: string }) {
+export function PowerChip({ userId, borderColor }: { userId: string; borderColor?: string }) {
   const mx = useMatrixClient();
   const room = useRoom();
   const space = useSpaceOptionally();
@@ -318,6 +320,7 @@ export function PowerChip({ userId }: { userId: string }) {
       >
         <Chip
           variant={error ? 'Critical' : 'SurfaceVariant'}
+          fill={borderColor ? 'Soft' : 'None'}
           radii="Pill"
           before={
             cords ? (
@@ -332,8 +335,14 @@ export function PowerChip({ userId }: { userId: string }) {
           after={tagIconSrc ? <PowerIcon size="50" iconSrc={tagIconSrc} /> : undefined}
           onClick={open}
           aria-pressed={!!cords}
+          style={borderColor ? {
+            backgroundColor: borderColor,
+            border: 'none',
+            color: getContrastingTextColor(borderColor),
+            opacity: 1
+          } : { backgroundColor: color.Surface.Container, opacity: 1 }}
         >
-          <Text size="B300" truncate>
+          <Text size="B300" truncate style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
             {tag.name}
           </Text>
         </Chip>

src/app/components/user-profile/UserChips.tsx

@@ -8,6 +8,7 @@ import {
   PopOut,
   Menu,
   MenuItem,
+  color,
   config,
   Text,
   Line,
@@ -42,8 +43,9 @@ import { useTimeoutToggle } from '../../hooks/useTimeoutToggle';
 import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
 import { CutoutCard } from '../cutout-card';
 import { SettingTile } from '../setting-tile';
+import { getContrastingTextColor } from '../../utils/common';
 
-export function ServerChip({ server }: { server: string }) {
+export function ServerChip({ server, borderColor }: { server: string; borderColor?: string }) {
   const mx = useMatrixClient();
   const myServer = getMxIdServer(mx.getSafeUserId());
   const navigate = useNavigate();
@@ -124,6 +126,7 @@ export function ServerChip({ server }: { server: string }) {
     >
       <Chip
         variant={myServer === server ? 'SurfaceVariant' : 'Warning'}
+        fill={borderColor ? 'Soft' : 'None'}
         radii="Pill"
         before={
           cords ? (
@@ -134,8 +137,14 @@ export function ServerChip({ server }: { server: string }) {
         }
         onClick={open}
         aria-pressed={!!cords}
+        style={borderColor ? {
+          backgroundColor: borderColor,
+          border: 'none',
+          color: getContrastingTextColor(borderColor),
+          opacity: 1
+        } : { backgroundColor: color.Surface.Container, opacity: 1 }}
       >
-        <Text size="B300" truncate>
+        <Text size="B300" truncate style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
           {server}
         </Text>
       </Chip>
@@ -143,7 +152,7 @@ export function ServerChip({ server }: { server: string }) {
   );
 }
 
-export function ShareChip({ userId }: { userId: string }) {
+export function ShareChip({ userId, borderColor }: { userId: string; borderColor?: string }) {
   const [cords, setCords] = useState<RectCords>();
 
   const [copied, setCopied] = useTimeoutToggle();
@@ -206,6 +215,7 @@ export function ShareChip({ userId }: { userId: string }) {
     >
       <Chip
         variant={copied ? 'Success' : 'SurfaceVariant'}
+        fill={borderColor ? 'Soft' : 'None'}
         radii="Pill"
         before={
           cords ? (
@@ -216,8 +226,14 @@ export function ShareChip({ userId }: { userId: string }) {
         }
         onClick={open}
         aria-pressed={!!cords}
+        style={borderColor ? {
+          backgroundColor: borderColor,
+          border: 'none',
+          color: getContrastingTextColor(borderColor),
+          opacity: 1
+        } : { backgroundColor: color.Surface.Container, opacity: 1 }}
       >
-        <Text size="B300" truncate>
+        <Text size="B300" truncate style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
           Share
         </Text>
       </Chip>
@@ -231,7 +247,7 @@ type MutualRoomsData = {
   directs: Room[];
 };
 
-export function MutualRoomsChip({ userId }: { userId: string }) {
+export function MutualRoomsChip({ userId, borderColor }: { userId: string; borderColor?: string }) {
   const mx = useMatrixClient();
   const mutualRoomSupported = useMutualRoomsSupport();
   const mutualRoomsState = useMutualRooms(userId);
@@ -402,6 +418,7 @@ export function MutualRoomsChip({ userId }: { userId: string }) {
     >
       <Chip
         variant="SurfaceVariant"
+        fill={borderColor ? 'Soft' : 'None'}
         radii="Pill"
         before={mutualRoomsState.status === AsyncStatus.Loading && <Spinner size="50" />}
         disabled={
@@ -409,8 +426,14 @@ export function MutualRoomsChip({ userId }: { userId: string }) {
         }
         onClick={open}
         aria-pressed={!!cords}
+        style={borderColor ? {
+          backgroundColor: borderColor,
+          border: 'none',
+          color: getContrastingTextColor(borderColor),
+          opacity: 1
+        } : { backgroundColor: color.Surface.Container, opacity: 1 }}
       >
-        <Text size="B300">
+        <Text size="B300" style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
           {mutualRoomsState.status === AsyncStatus.Success &&
             `${mutualRoomsState.data.length} Mutual Rooms`}
           {mutualRoomsState.status === AsyncStatus.Loading && 'Mutual Rooms'}
@@ -437,7 +460,7 @@ export function IgnoredUserAlert() {
   );
 }
 
-export function OptionsChip({ userId }: { userId: string }) {
+export function OptionsChip({ userId, borderColor }: { userId: string; borderColor?: string }) {
   const mx = useMatrixClient();
   const [cords, setCords] = useState<RectCords>();
 
@@ -503,11 +526,23 @@ export function OptionsChip({ userId }: { userId: string }) {
         </FocusTrap>
       }
     >
-      <Chip variant="SurfaceVariant" radii="Pill" onClick={open} aria-pressed={!!cords}>
+      <Chip 
+        variant="SurfaceVariant" 
+        fill={borderColor ? 'Soft' : 'None'}
+        radii="Pill" 
+        onClick={open} 
+        aria-pressed={!!cords}
+        style={borderColor ? {
+          backgroundColor: borderColor,
+          border: 'none',
+          color: getContrastingTextColor(borderColor),
+          opacity: 1
+        } : { backgroundColor: color.Surface.Container, opacity: 1 }}
+      >
         {ignoring ? (
           <Spinner variant="Secondary" size="50" />
         ) : (
-          <Icon size="50" src={Icons.HorizontalDots} />
+          <Icon size="50" src={Icons.HorizontalDots} style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined} />
         )}
       </Chip>
     </PopOut>

src/app/components/user-profile/UserHero.tsx

@@ -9,6 +9,7 @@ import {
   OverlayBackdrop,
   OverlayCenter,
   Text,
+  toRem,
 } from 'folds';
 import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
@@ -21,31 +22,53 @@ import { UserPresence } from '../../hooks/useUserPresence';
 import { AvatarPresence, PresenceBadge } from '../presence';
 import { ImageViewer } from '../image-viewer';
 import { stopPropagation } from '../../utils/keyboard';
+import { useOtherUserColor } from '../../hooks/useUserColor';
+import { useOtherUserBanner } from '../../hooks/useUserBanner';
+import { useOtherUserProfileStyle } from '../../hooks/useUserProfileStyle';
 
 type UserHeroProps = {
   userId: string;
   avatarUrl?: string;
+  avatarMxc?: string;
   presence?: UserPresence;
 };
-export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
+export function UserHero({ userId, avatarUrl, avatarMxc, presence }: UserHeroProps) {
   const [viewAvatar, setViewAvatar] = useState<string>();
+  const bannerUrl = useOtherUserBanner(userId, avatarMxc); // Now returns blob URL directly
+  const profileStyle = useOtherUserProfileStyle(userId, avatarMxc);
+
+  console.log('[UserHero]', {
+    userId,
+    avatarMxc,
+    bannerUrl,
+    profileStyle,
+  });
 
   return (
-    <Box direction="Column" className={css.UserHero}>
+    <Box
+      direction="Column"
+      className={css.UserHero}
+    >
       <div
         className={css.UserHeroCoverContainer}
         style={{
-          backgroundColor: colorMXID(userId),
-          filter: avatarUrl ? undefined : 'brightness(50%)',
+          backgroundColor: bannerUrl ? undefined : colorMXID(userId),
+          filter: bannerUrl || avatarUrl ? undefined : 'brightness(50%)',
         }}
       >
-        {avatarUrl && (
-          <img className={css.UserHeroCover} src={avatarUrl} alt={userId} draggable="false" />
+        {bannerUrl ? (
+          <img className={css.UserHeroBanner} src={bannerUrl} alt={userId} draggable="false" />
+        ) : (
+          avatarUrl && (
+            <img className={css.UserHeroCover} src={avatarUrl} alt={userId} draggable="false" />
+          )
         )}
       </div>
       <div className={css.UserHeroAvatarContainer}>
         <AvatarPresence
           className={css.UserAvatarContainer}
+          style={profileStyle.avatarBorderColor ? { backgroundColor: profileStyle.avatarBorderColor } : undefined}
+          badgeBackgroundColor={profileStyle.avatarBorderColor}
           badge={
             presence && <PresenceBadge presence={presence.presence} status={presence.status} />
           }
@@ -55,6 +78,14 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
             onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
             className={css.UserHeroAvatar}
             size="500"
+            style={{
+              width: toRem(72),
+              height: toRem(72),
+              ...(profileStyle.avatarBorderColor ? {
+                outline: `${toRem(4)} solid ${profileStyle.avatarBorderColor}`,
+                outlineOffset: toRem(-1),
+              } : {}),
+            }}
           >
             <UserAvatar
               className={css.UserHeroAvatarImg}
@@ -76,7 +107,7 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
                   escapeDeactivates: stopPropagation,
                 }}
               >
-                <Modal size="500" onContextMenu={(evt: any) => evt.stopPropagation()}>
+                <Modal size="500" onContextMenu={(evt: React.MouseEvent) => evt.stopPropagation()}>
                   <ImageViewer
                     src={viewAvatar}
                     alt={userId}
@@ -95,24 +126,39 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
 type UserHeroNameProps = {
   displayName?: string;
   userId: string;
+  avatarMxc?: string;
 };
-export function UserHeroName({ displayName, userId }: UserHeroNameProps) {
+export function UserHeroName({ displayName, userId, avatarMxc }: UserHeroNameProps) {
   const username = getMxIdLocalPart(userId);
+  const userColor = useOtherUserColor(userId, avatarMxc);
+
+  console.log('[UserHeroName]', {
+    userId,
+    avatarMxc,
+    userColor,
+    fallbackColor: colorMXID(userId),
+  });
 
   return (
-    <Box grow="Yes" direction="Column" gap="0">
+    <Box grow="Yes" direction="Column" gap="100">
       <Box alignItems="Baseline" gap="200" wrap="Wrap">
         <Text
           size="H4"
           className={classNames(BreakWord, LineClamp3)}
           title={displayName ?? username}
+          style={{ color: userColor || colorMXID(userId) }}
         >
           {displayName ?? username ?? userId}
         </Text>
       </Box>
       <Box alignItems="Center" gap="100" wrap="Wrap">
-        <Text size="T200" className={classNames(BreakWord, LineClamp3)} title={username}>
-          @{username}
+        <Text
+          size="T200"
+          className={BreakWord}
+          title={userId}
+          style={{ color: userColor || colorMXID(userId) }}
+        >
+          {userId}
         </Text>
       </Box>
     </Box>

src/app/components/user-profile/UserRoomProfile.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, config, Icon, Icons, Text } from 'folds';
+import { Box, Button, color, config, Icon, Icons, Text, toRem } from 'folds';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { UserHero, UserHeroName } from './UserHero';
@@ -9,6 +9,7 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { usePowerLevels } from '../../hooks/usePowerLevels';
 import { useRoom } from '../../hooks/useRoom';
 import { useUserPresence } from '../../hooks/useUserPresence';
+import { useOtherUserProfileStyle } from '../../hooks/useUserProfileStyle';
 import { IgnoredUserAlert, MutualRoomsChip, OptionsChip, ServerChip, ShareChip } from './UserChips';
 import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { PowerChip } from './PowerChip';
@@ -22,6 +23,11 @@ import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
 import { CreatorChip } from './CreatorChip';
 import { getDirectCreatePath, withSearchParam } from '../../pages/pathUtils';
 import { DirectCreateSearchParams } from '../../pages/paths';
+import { getContrastingTextColor, stripAlphaFromColor, getTextShadowColor } from '../../utils/common';
+import classNames from 'classnames';
+import { BreakWord, LineClamp3 } from '../../styles/Text.css';
+import colorMXID, { getColorMXIDValue } from '../../../util/colorMXID';
+import { useOtherUserColor } from '../../hooks/useUserColor';
 
 type UserRoomProfileProps = {
   userId: string;
@@ -58,6 +64,13 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
   const avatarUrl = (avatarMxc && mxcUrlToHttp(mx, avatarMxc, useAuthentication)) ?? undefined;
 
   const presence = useUserPresence(userId);
+  const profileStyle = useOtherUserProfileStyle(userId, avatarMxc);
+  const userColor = useOtherUserColor(userId, avatarMxc);
+
+  // Build gradient CSS if configured
+  const gradientStyle = profileStyle.gradient
+    ? `linear-gradient(${profileStyle.gradient.direction}, ${profileStyle.gradient.startColor}, ${profileStyle.gradient.stopColor})`
+    : undefined;
 
   const handleMessage = () => {
     closeUserRoomProfile();
@@ -67,40 +80,126 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
     navigate(withSearchParam(getDirectCreatePath(), directSearchParam));
   };
 
+  const hasBottomContent =
+    ignored ||
+    (!!member && membership === Membership.Ban) ||
+    (!!member && membership === Membership.Leave && !!member.events.member && member.events.member.getSender() !== userId) ||
+    (!!member && membership === Membership.Invite) ||
+    (canInvite && membership === Membership.Leave) ||
+    (canKickUser && membership === Membership.Join) ||
+    (canBanUser && membership !== Membership.Ban);
+
+  // Use userColor for text, or fall back to colorMXID
+  const profileColor = userColor ? userColor : getColorMXIDValue(userId);
+  const profileTextShadow = `0 1px 4px ${getTextShadowColor(profileColor)}`;
+  
+  // Use avatarBorderColor for pill background only if it has visible alpha (not fully transparent)
+  const hasVisibleBorder = profileStyle.avatarBorderColor && !profileStyle.avatarBorderColor.endsWith('00');
+  const pillBgColor = hasVisibleBorder ? stripAlphaFromColor(profileStyle.avatarBorderColor!) : undefined;
+
+  console.log('[UserRoomProfile]', {
+    userId,
+    avatarMxc,
+    userColor,
+    profileStyle,
+    profileColor,
+    profileTextShadow,
+    hasVisibleBorder,
+    pillBgColor,
+    fallbackColorMXID: getColorMXIDValue(userId),
+  });
+
   return (
     <Box direction="Column">
       <UserHero
         userId={userId}
         avatarUrl={avatarUrl}
+        avatarMxc={avatarMxc}
         presence={presence && presence.lastActiveTs !== 0 ? presence : undefined}
       />
-      <Box direction="Column" gap="500" style={{ padding: config.space.S400 }}>
-        <Box direction="Column" gap="400">
-          <Box gap="400" alignItems="Start">
-            <UserHeroName displayName={displayName} userId={userId} />
-            {userId !== myUserId && (
-              <Box shrink="No">
-                <Button
-                  size="300"
-                  variant="Primary"
-                  fill="Solid"
-                  radii="300"
-                  before={<Icon size="50" src={Icons.Message} filled />}
-                  onClick={handleMessage}
-                >
-                  <Text size="B300">Message</Text>
-                </Button>
-              </Box>
-            )}
-          </Box>
-          <Box alignItems="Center" gap="200" wrap="Wrap">
-            {server && <ServerChip server={server} />}
-            <ShareChip userId={userId} />
-            {creator ? <CreatorChip /> : <PowerChip userId={userId} />}
-            {userId !== myUserId && <MutualRoomsChip userId={userId} />}
-            {userId !== myUserId && <OptionsChip userId={userId} />}
+      <Box 
+        direction="Column" 
+        gap="200" 
+        alignItems="Center"
+        style={{ 
+          padding: config.space.S400, 
+          paddingTop: `calc(${config.space.S200} + ${toRem(36)})`,
+          marginTop: toRem(-36),
+          background: gradientStyle,
+          textAlign: 'center'
+        }}
+      >
+        {/* Display Name */}
+        <Text
+          size="H4"
+          className={classNames(BreakWord, LineClamp3)}
+          style={{ color: getMemberDisplayName(room, userId) !== userId ? profileColor : undefined, textShadow: profileTextShadow }}
+        >
+          {getMemberDisplayName(room, userId)}
+        </Text>
+        
+        {/* Username */}
+        <Text
+          size="T200"
+          className={BreakWord}
+          style={{ color: profileColor, textShadow: profileTextShadow }}
+        >
+          {userId}
+        </Text>
+        
+        {/* Status Pill */}
+        {presence?.status && (
+          <Box
+            style={{
+              backgroundColor: pillBgColor || color.Surface.Container,
+              border: pillBgColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
+              padding: `${toRem(6)} ${toRem(10)}`,
+              borderRadius: toRem(16),
+              maxWidth: toRem(250),
+            }}
+          >
+            <Text 
+              size="T300" 
+              className={BreakWord}
+              style={{
+                color: pillBgColor ? getContrastingTextColor(pillBgColor) : undefined
+              }}
+            >
+              {presence.status}
+            </Text>
           </Box>
+        )}
+        
+        {/* Chips Row */}
+        <Box alignItems="Center" gap="200" wrap="Wrap" justifyContent="Center">
+          {server && <ServerChip server={server} borderColor={pillBgColor} />}
+          <ShareChip userId={userId} borderColor={pillBgColor} />
+          {creator ? <CreatorChip borderColor={pillBgColor} /> : <PowerChip userId={userId} borderColor={pillBgColor} />}
         </Box>
+        
+        {/* Message Button */}
+        {userId !== myUserId && (
+          <Button
+            size="300"
+            variant="Primary"
+            fill="Solid"
+            radii="300"
+            before={<Icon size="50" src={Icons.Message} filled />}
+            onClick={handleMessage}
+          >
+            <Text size="B300">Message</Text>
+          </Button>
+        )}
+        
+        {/* Additional Chips if needed */}
+        {userId !== myUserId && (
+          <Box alignItems="Center" gap="200" wrap="Wrap" justifyContent="Center">
+            <MutualRoomsChip userId={userId} borderColor={pillBgColor} />
+            <OptionsChip userId={userId} borderColor={pillBgColor} />
+          </Box>
+        )}
+      </Box>
+      {hasBottomContent && <Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
         {ignored && <IgnoredUserAlert />}
         {member && membership === Membership.Ban && (
           <UserBanAlert
@@ -136,7 +235,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
           canKick={canKickUser && membership === Membership.Join}
           canBan={canBanUser && membership !== Membership.Ban}
         />
-      </Box>
+      </Box>}
     </Box>
   );
 }

src/app/components/user-profile/styles.css.ts

@@ -15,7 +15,8 @@ export const UserHero = style({
 });
 
 export const UserHeroCoverContainer = style({
-  height: toRem(96),
+  position: 'relative',
+  height: toRem(140),
   overflow: 'hidden',
 });
 export const UserHeroCover = style({
@@ -26,17 +27,32 @@ export const UserHeroCover = style({
   transform: 'scale(2)',
 });
 
+export const UserHeroBanner = style({
+  height: '100%',
+  width: '100%',
+  objectFit: 'cover',
+});
+
 export const UserHeroAvatarContainer = style({
   position: 'relative',
   height: toRem(29),
 });
 export const UserAvatarContainer = style({
   position: 'absolute',
-  left: config.space.S400,
+  left: '50%',
   top: 0,
-  transform: 'translateY(-50%)',
+  transform: 'translate(-50%, -50%)',
   backgroundColor: color.Surface.Container,
 });
+
+export const UserStatusBubble = style({
+  position: 'absolute',
+  left: '50%',
+  transform: 'translateX(-50%)',
+  bottom: toRem(-8),
+  zIndex: 2,
+});
+
 export const UserHeroAvatar = style({
   outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`,
   selectors: {

src/app/components/video-viewer/VideoViewer.css.ts

@@ -0,0 +1,40 @@
+import { style } from '@vanilla-extract/css';
+import { DefaultReset, color, config } from 'folds';
+
+export const VideoViewer = style([
+  DefaultReset,
+  {
+    height: '100%',
+  },
+]);
+
+export const VideoViewerHeader = style([
+  DefaultReset,
+  {
+    paddingLeft: config.space.S200,
+    paddingRight: config.space.S200,
+    borderBottomWidth: config.borderWidth.B300,
+    flexShrink: 0,
+    gap: config.space.S200,
+  },
+]);
+
+export const VideoViewerContent = style([
+  DefaultReset,
+  {
+    backgroundColor: color.Background.Container,
+    color: color.Background.OnContainer,
+    overflow: 'hidden',
+  },
+]);
+
+export const VideoViewerVideo = style([
+  DefaultReset,
+  {
+    width: '100%',
+    height: '100%',
+    maxWidth: '100%',
+    maxHeight: '100%',
+    backgroundColor: color.Surface.Container,
+  },
+]);

src/app/components/video-viewer/VideoViewer.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import FileSaver from 'file-saver';
+import classNames from 'classnames';
+import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds';
+import * as css from './VideoViewer.css';
+import { downloadMedia } from '../../utils/matrix';
+import { getCurrentAccessToken } from '../../utils/auth';
+
+export type VideoViewerProps = {
+  alt: string;
+  src: string;
+  requestClose: () => void;
+};
+
+export const VideoViewer = as<'div', VideoViewerProps>(
+  ({ className, alt, src, requestClose, ...props }, ref) => {    const handleDownload = async () => {
+      try {
+        const fileContent = await downloadMedia(src, getCurrentAccessToken());
+        FileSaver.saveAs(fileContent, alt);
+      } catch (error) {
+        console.warn('[VideoViewer] Failed to download media:', error);
+        try {
+          const response = await fetch(src);
+          if (response.ok) {
+            const blob = await response.blob();
+            FileSaver.saveAs(blob, alt);
+          }
+        } catch {
+          window.open(src, '_blank');
+        }
+      }
+    };
+
+    return (
+      <Box
+        className={classNames(css.VideoViewer, className)}
+        direction="Column"
+        {...props}
+        ref={ref}
+      >
+        <Header className={css.VideoViewerHeader} size="400">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <IconButton size="300" radii="300" onClick={requestClose}>
+              <Icon size="50" src={Icons.ArrowLeft} />
+            </IconButton>
+            <Text size="T300" truncate>
+              {alt}
+            </Text>
+          </Box>
+          <Box shrink="No" alignItems="Center" gap="200">
+            <Chip
+              variant="Primary"
+              onClick={handleDownload}
+              radii="300"
+              before={<Icon size="50" src={Icons.Download} />}
+            >
+              <Text size="B300">Download</Text>
+            </Chip>
+          </Box>
+        </Header>
+        <Box
+          grow="Yes"
+          className={css.VideoViewerContent}
+          justifyContent="Center"
+          alignItems="Center"
+        >
+          <video
+            className={css.VideoViewerVideo}
+            src={src}
+            title={alt}
+            controls
+            autoPlay
+          />
+        </Box>
+      </Box>
+    );
+  }
+);

src/app/components/video-viewer/index.ts

@@ -0,0 +1 @@
+export * from './VideoViewer';

src/app/features/ShareRoomPicker.tsx

@@ -0,0 +1,316 @@
+import { useAtomValue } from 'jotai';
+import React, { ChangeEventHandler, useCallback, useMemo, useRef, useState } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import FocusTrap from 'focus-trap-react';
+import {
+  Avatar,
+  Box,
+  Button,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Input,
+  MenuItem,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Scroll,
+  Text,
+  config,
+} from 'folds';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+import { useAllJoinedRoomsSet, useGetRoom } from '../hooks/useGetRoom';
+import { allRoomsAtom } from '../state/room-list/roomList';
+import { mDirectAtom } from '../state/mDirectList';
+import { useDirects, useRooms } from '../state/hooks/roomList';
+import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../utils/room';
+import { RoomAvatar, RoomIcon } from '../components/room-avatar';
+import { nameInitials } from '../utils/common';
+import { useMediaAuthentication } from '../hooks/useMediaAuthentication';
+import { factoryRoomIdByActivity } from '../utils/sort';
+import {
+  SearchItemStrGetter,
+  useAsyncSearch,
+  UseAsyncSearchOptions,
+} from '../hooks/useAsyncSearch';
+import { VirtualTile } from '../components/virtualizer';
+import { AndroidSharePayload } from '../utils/androidShare';
+import { stopPropagation } from '../utils/keyboard';
+
+const SEARCH_OPTS: UseAsyncSearchOptions = {
+  limit: 200,
+  matchOptions: {
+    contain: true,
+  },
+};
+
+type ShareRoomPickerProps = {
+  /** The pending share payload to display a preview of. */
+  share: AndroidSharePayload;
+  /** Called when the user picks a room. */
+  onPick: (roomId: string) => void;
+  /** Called when the user dismisses without picking. */
+  onDismiss: () => void;
+};
+
+/**
+ * Full-screen modal that lets the user pick a room to send
+ * an incoming Android share intent into.
+ */
+export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [confirmRoomId, setConfirmRoomId] = useState<string | null>(null);
+
+  const mDirects = useAtomValue(mDirectAtom);
+  const allRoomsSet = useAllJoinedRoomsSet();
+  const getRoom = useGetRoom(allRoomsSet);
+  const rooms = useRooms(mx, allRoomsAtom, mDirects);
+  const directs = useDirects(mx, allRoomsAtom, mDirects);
+
+  const allItems = useMemo(
+    () => [...rooms, ...directs].sort(factoryRoomIdByActivity(mx)),
+    [mx, rooms, directs]
+  );
+
+  const getRoomNameStr: SearchItemStrGetter<string> = useCallback(
+    (rId) => getRoom(rId)?.name ?? rId,
+    [getRoom]
+  );
+
+  const [searchResult, searchRoom, resetSearch] = useAsyncSearch(
+    allItems,
+    getRoomNameStr,
+    SEARCH_OPTS
+  );
+
+  const items = searchResult ? searchResult.items : allItems;
+
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 48,
+    overscan: 8,
+  });
+  const vItems = virtualizer.getVirtualItems();
+
+  const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
+    const value = evt.currentTarget.value.trim();
+    if (!value) {
+      resetSearch();
+      return;
+    }
+    searchRoom(value);
+  };
+
+  const handleRoomClick: React.MouseEventHandler<HTMLButtonElement> = (evt) => {
+    const roomId = evt.currentTarget.getAttribute('data-room-id');
+    if (roomId) {
+      setConfirmRoomId(roomId);
+    }
+  };
+
+  const handleConfirm = useCallback(() => {
+    if (confirmRoomId) {
+      onPick(confirmRoomId);
+    }
+  }, [confirmRoomId, onPick]);
+
+  const handleCancelConfirm = useCallback(() => {
+    setConfirmRoomId(null);
+  }, []);
+
+  const previewText = share.text?.slice(0, 80) ?? share.subject?.slice(0, 80);
+  const fileCount = share.files.length;
+
+  return (
+    <>
+      <Overlay open>
+      <FocusTrap
+        focusTrapOptions={{
+          initialFocus: false,
+          clickOutsideDeactivates: true,
+          onDeactivate: onDismiss,
+          escapeDeactivates: stopPropagation,
+        }}
+      >
+        <Box
+          grow="Yes"
+          direction="Column"
+          style={{
+            position: 'fixed',
+            inset: 0,
+            zIndex: 999,
+            backgroundColor: '#1a1d23',
+            paddingTop: '60px',
+          }}
+        >
+          <Header
+            size="500"
+            style={{ padding: config.space.S400 }}
+          >
+            <Box grow="Yes" direction="Column" gap="100" style={{ minWidth: 0, maxWidth: '80%' }}>
+              <Text size="H4">Share to Room</Text>
+              {(previewText || fileCount > 0) && (
+                <Text size="T200" priority="300" style={{ opacity: 0.7, wordBreak: 'break-word', whiteSpace: 'normal' }}>
+                  {previewText
+                    ? `"${previewText}${(share.text?.length ?? 0) > 80 ? '…' : ''}"`
+                    : `${fileCount} file${fileCount !== 1 ? 's' : ''}`}
+                </Text>
+              )}
+            </Box>
+            <Box shrink="No">
+              <IconButton size="300" radii="300" onClick={onDismiss}>
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Box>
+          </Header>
+
+          <Box
+            style={{
+              padding: config.space.S200,
+              paddingTop: config.space.S300,
+            }}
+          >
+            <Input
+              onChange={handleSearchChange}
+              before={<Icon size="200" src={Icons.Search} />}
+              placeholder="Search rooms…"
+              size="400"
+              variant="Background"
+              outlined
+              autoFocus
+              style={{ width: '100%' }}
+            />
+          </Box>
+
+          <Scroll ref={scrollRef} size="300" hideTrack style={{ flex: 1, minHeight: 0 }}>
+            <Box style={{ padding: config.space.S300 }} direction="Column">
+              {vItems.length === 0 && (
+                <Box
+                  style={{ padding: `${config.space.S700} 0` }}
+                  alignItems="Center"
+                  justifyContent="Center"
+                  direction="Column"
+                  gap="100"
+                >
+                  <Text size="H6" align="Center">
+                    {searchResult ? 'No Match Found' : 'No Rooms'}
+                  </Text>
+                  <Text size="T200" align="Center" priority="300">
+                    {searchResult
+                      ? `No rooms found for "${searchResult.query}".`
+                      : 'You have no rooms to share into.'}
+                  </Text>
+                </Box>
+              )}
+              <Box style={{ position: 'relative', height: virtualizer.getTotalSize() }}>
+                {vItems.map((vItem) => {
+                  const roomId = items[vItem.index];
+                  const room = getRoom(roomId);
+                  if (!room) return null;
+                  const isDm = mDirects.has(roomId);
+
+                  const avatarSrc = isDm
+                    ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
+                    : getRoomAvatarUrl(mx, room, 96, useAuthentication);
+
+                  return (
+                    <VirtualTile
+                      virtualItem={vItem}
+                      style={{ paddingBottom: config.space.S100 }}
+                      ref={virtualizer.measureElement}
+                      key={roomId}
+                    >
+                      <MenuItem
+                        data-room-id={roomId}
+                        onClick={handleRoomClick}
+                        variant="Surface"
+                        size="400"
+                        radii="400"
+                        before={
+                          <Avatar size="300" radii={isDm ? '400' : '300'}>
+                            {avatarSrc ? (
+                              <RoomAvatar
+                                roomId={roomId}
+                                src={avatarSrc}
+                                alt={room.name}
+                                renderFallback={() => (
+                                  <Text as="span" size="H6">
+                                    {nameInitials(room.name)}
+                                  </Text>
+                                )}
+                              />
+                            ) : (
+                              <RoomIcon room={room} size="200" filled />
+                            )}
+                          </Avatar>
+                        }
+                      >
+                        <Box grow="Yes" direction="Column">
+                          <Text size="B400" truncate>
+                            {room.name}
+                          </Text>
+                        </Box>
+                      </MenuItem>
+                    </VirtualTile>
+                  );
+                })}
+              </Box>
+            </Box>
+          </Scroll>
+        </Box>
+      </FocusTrap>
+    </Overlay>
+
+    {confirmRoomId && (() => {
+      const room = getRoom(confirmRoomId);
+      const roomName = room?.name ?? confirmRoomId;
+      const isDm = mDirects.has(confirmRoomId);
+      return (
+        <Overlay open backdrop={<OverlayBackdrop />}>
+          <OverlayCenter>
+            <FocusTrap
+              focusTrapOptions={{
+                initialFocus: false,
+                onDeactivate: handleCancelConfirm,
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              <Modal style={{ maxWidth: '280px' }}>
+                <Box direction="Column" gap="100" style={{ padding: config.space.S300 }}>
+                  <Box direction="Column" gap="100">
+                    <Text size="H4">Share to {isDm ? 'Person' : 'Room'}?</Text>
+                    <Text size="T300" priority="300">
+                      Send to <strong>{roomName}</strong>?
+                    </Text>
+                  </Box>
+                  <Box gap="200" justifyContent="End">
+                    <Button
+                      onClick={handleCancelConfirm}
+                      variant="Secondary"
+                      size="400"
+                    >
+                      <Text size="B400">Cancel</Text>
+                    </Button>
+                    <Button
+                      onClick={handleConfirm}
+                      variant="Primary"
+                      size="400"
+                    >
+                      <Text size="B400">Share</Text>
+                    </Button>
+                  </Box>
+                </Box>
+              </Modal>
+            </FocusTrap>
+          </OverlayCenter>
+        </Overlay>
+      );
+    })()}
+    </>
+  );
+}

src/app/features/call/CallProviderWrapper.tsx

@@ -2,7 +2,6 @@ import React, { ReactNode } from 'react';
 import { CallProvider, useCallService } from './useCall';
 import { CallOverlay } from './CallOverlay';
 import { IncomingCallNotification } from './IncomingCallNotification';
-import { useClientConfig } from '../../hooks/useClientConfig';
 
 interface CallProviderWrapperProps {
   children: ReactNode;
@@ -13,13 +12,7 @@ interface CallProviderWrapperProps {
  * Also renders the CallOverlay for active call controls and monitors incoming calls
  */
 export function CallProviderWrapper({ children }: CallProviderWrapperProps) {
-  const clientConfig = useClientConfig();
-  const livekitServiceUrl = clientConfig.calling?.livekitServiceUrl;
-
-  // eslint-disable-next-line no-console
-  console.log('CallProviderWrapper - config calling:', clientConfig.calling, 'livekitUrl:', livekitServiceUrl);
-
-  const callContextValue = useCallService({ livekitServiceUrl });
+  const callContextValue = useCallService();
 
   return (
     <CallProvider value={callContextValue}>

src/app/features/call/CallService.ts

@@ -22,7 +22,15 @@ import {
   LiveKitJWTResponse,
   CallMemberEventContent,
 } from './types';
-import { fetchLiveKitJWT, fetchWellKnownWithRTC, getLiveKitFocus, requestOpenIdToken } from './useRtcConfig';
+import { 
+  fetchLiveKitJWT, 
+  fetchWellKnownWithRTC, 
+  getLiveKitFocus, 
+  requestOpenIdToken,
+  fetchLiveKitJWTFromServers,
+  getLiveKitHomeserverPriority,
+} from './useRtcConfig';
+import { getActiveCallMembers } from './useRoomCallMembers';
 import { getAudioSettings, SCREEN_SHARE_RESOLUTIONS, SCREEN_SHARE_BITRATES } from '../settings/audio/Audio';
 import { getCallSounds, CallSoundType } from './CallSounds';
 
@@ -174,6 +182,25 @@ export class CallService {
   ): Promise<void> {
     const stateKey = this.config.userId;
 
+    // Check if user has permission to send this state event
+    const room = this.matrixClient.getRoom(roomId);
+    if (room) {
+      const powerLevelsEvent = room.currentState.getStateEvents('m.room.power_levels', '');
+      const powerLevelsContent = powerLevelsEvent?.getContent() || {};
+      
+      const myPower = powerLevelsContent.users?.[this.config.userId] ?? powerLevelsContent.users_default ?? 0;
+      const requiredPower = powerLevelsContent.events?.[CALL_MEMBER_EVENT_TYPE] ?? powerLevelsContent.state_default ?? 50;
+      
+      if (myPower < requiredPower) {
+        console.warn(
+          `Cannot send call member event: insufficient permissions. ` +
+          `User power level (${myPower}) < required power level (${requiredPower}). ` +
+          `Call will work locally but room members won't see your call status.`
+        );
+        return;
+      }
+    }
+
     if (active) {
       const content: CallMemberEventContent = {
         'm.calls': [
@@ -293,39 +320,59 @@ export class CallService {
     });
 
     try {
-      // Step 1: Get an OpenID token from the Matrix homeserver
-      const openIdToken = await requestOpenIdToken(
-        this.config.homeserverBaseUrl,
-        this.config.userId,
-        this.config.accessToken
-      );
-
-      // Step 2: Determine LiveKit service URL (check room-level config first)
-      let livekitServiceUrl = this.config.livekitServiceUrl;
-      
-      // Check if room has a custom LiveKit config
+      // Step 1: Get room and determine which homeservers to try
       const room = this.matrixClient.getRoom(roomId);
-      if (room) {
-        const livekitConfigEvent = room.currentState.getStateEvents('im.paarrot.room.livekit_config', '');
-        if (livekitConfigEvent) {
-          const roomLivekitUrl = livekitConfigEvent.getContent()?.service_url;
-          if (roomLivekitUrl) {
-            console.log('Using room-level LiveKit URL:', roomLivekitUrl);
-            livekitServiceUrl = roomLivekitUrl;
-          }
-        }
+      if (!room) {
+        throw new Error(`Room ${roomId} not found`);
       }
 
-      // Step 3: Exchange OpenID token for LiveKit JWT
-      console.log('Requesting LiveKit JWT for Matrix room:', roomId);
-      this.livekitJwt = await fetchLiveKitJWT(
-        livekitServiceUrl,
+      // Check if there's already an active call
+      const activeCallMembers = getActiveCallMembers(room);
+      const isJoiningExistingCall = activeCallMembers.length > 0;
+      
+      if (isJoiningExistingCall) {
+        console.log(`Joining existing call with ${activeCallMembers.length} participant(s)`);
+      } else {
+        console.log('Starting new call');
+      }
+
+      const homeserverPriority = getLiveKitHomeserverPriority(
+        room,
+        this.config.homeserverBaseUrl,
+        this.config.userId
+      );
+
+      console.log('Trying homeservers in order:', homeserverPriority);
+
+      // Step 2: Try fetching LiveKit JWT from homeservers in priority order
+      const result = await fetchLiveKitJWTFromServers(
+        homeserverPriority,
+        this.config.homeserverBaseUrl,
         roomId,
         this.config.userId,
         this.config.deviceId,
-        openIdToken
+        this.config.accessToken
       );
 
+      if (!result) {
+        throw new Error('Failed to get LiveKit JWT from any homeserver');
+      }
+
+      this.livekitJwt = result.jwt;
+      
+      // Track if using remote homeserver
+      const userHomeserverDomain = this.config.homeserverBaseUrl
+        .replace('https://', '')
+        .replace('http://', '');
+      const usedHomeserverDomain = result.homeserver
+        .replace('https://', '')
+        .replace('http://', '');
+      
+      if (usedHomeserverDomain !== userHomeserverDomain) {
+        this.activeCall!.livekitHomeserver = result.homeserver;
+        console.log(`Using remote homeserver for LiveKit: ${result.homeserver}`);
+      }
+
       console.log('Got LiveKit JWT, connecting to:', this.livekitJwt.url);
       console.log('LiveKit JWT response:', JSON.stringify(this.livekitJwt));
 
@@ -934,6 +981,22 @@ export class CallService {
     return this.livekitRoom;
   }
 
+  /**
+   * Checks if the current call is using a remote homeserver for LiveKit
+   * @returns true if using a different homeserver than the user's
+   */
+  isUsingRemoteHomeserver(): boolean {
+    return !!this.activeCall?.livekitHomeserver;
+  }
+
+  /**
+   * Gets the homeserver being used for LiveKit (if remote)
+   * @returns The remote homeserver URL, or undefined if using user's homeserver
+   */
+  getLiveKitHomeserver(): string | undefined {
+    return this.activeCall?.livekitHomeserver;
+  }
+
   /**
    * Starts screen sharing with configurable resolution and bitrate
    * @returns true if screen share started successfully

src/app/features/call/CallSounds.ts

@@ -1,11 +1,4 @@
 /* eslint-disable no-console */
-import MicMuteSound from '../../../../public/sound/Mic_Mute.ogg';
-import MicUnmuteSound from '../../../../public/sound/Mic_Unmuted.ogg';
-import SpeakersDeafenSound from '../../../../public/sound/Speakers_Deafen.ogg';
-import SpeakersUndeafenSound from '../../../../public/sound/Speakers_Undeafen.ogg';
-import CallJoinedSound from '../../../../public/sound/Call_Joined.ogg';
-import CallDepartSound from '../../../../public/sound/Call_Depart.ogg';
-import CallDialingSound from '../../../../public/sound/Call_Dialing.ogg';
 
 /**
  * Sound types that can be played during a call
@@ -20,19 +13,30 @@ export enum CallSoundType {
   CallDialing = 'call_dialing',
 }
 
-/**
- * Maps sound types to their audio sources
- */
-const SOUND_SOURCES: Record<CallSoundType, string> = {
-  [CallSoundType.MicMute]: MicMuteSound,
-  [CallSoundType.MicUnmute]: MicUnmuteSound,
-  [CallSoundType.Deafen]: SpeakersDeafenSound,
-  [CallSoundType.Undeafen]: SpeakersUndeafenSound,
-  [CallSoundType.CallJoined]: CallJoinedSound,
-  [CallSoundType.CallDepart]: CallDepartSound,
-  [CallSoundType.CallDialing]: CallDialingSound,
+const SOUND_FILES: Record<CallSoundType, string> = {
+  [CallSoundType.MicMute]: 'Mic_Mute.ogg',
+  [CallSoundType.MicUnmute]: 'Mic_Unmuted.ogg',
+  [CallSoundType.Deafen]: 'Speakers_Deafen.ogg',
+  [CallSoundType.Undeafen]: 'Speakers_Undeafen.ogg',
+  [CallSoundType.CallJoined]: 'Call_Joined.ogg',
+  [CallSoundType.CallDepart]: 'Call_Depart.ogg',
+  [CallSoundType.CallDialing]: 'Call_Dialing.ogg',
 };
 
+/**
+ * Resolves the base URL for sounds.
+ * In Electron production, sounds are in resources/sound/ as plain files.
+ * In dev or browser, sounds are served from public/sound/.
+ */
+async function resolveSoundBaseUrl(): Promise<string> {
+  const electronAudio = (window as any).electron?.audio;
+  if (electronAudio?.getSoundBaseUrl) {
+    const base: string | null = await electronAudio.getSoundBaseUrl();
+    if (base) return base;
+  }
+  return './sound';
+}
+
 /**
  * Manages call-related sound effects.
  * Handles playing local sounds and coordinating with remote participants.
@@ -45,15 +49,15 @@ export class CallSounds {
   private isDeafened = false;
 
   constructor() {
-    this.preloadSounds();
+    resolveSoundBaseUrl().then((base) => this.preloadSounds(base));
   }
 
   /**
    * Preloads all call sounds for instant playback
    */
-  private preloadSounds(): void {
-    Object.entries(SOUND_SOURCES).forEach(([type, src]) => {
-      const audio = new Audio(src);
+  private preloadSounds(base: string): void {
+    Object.entries(SOUND_FILES).forEach(([type, file]) => {
+      const audio = new Audio(`${base}/${file}`);
       audio.preload = 'auto';
       this.audioElements.set(type as CallSoundType, audio);
     });

src/app/features/call/IncomingCallNotification.tsx

@@ -102,6 +102,7 @@ export function IncomingCallNotification() {
   const { activeCall, startCall } = useCall();
   const [incomingCall, setIncomingCall] = useState<IncomingCall | null>(null);
   const [declinedRooms, setDeclinedRooms] = useState<Set<string>>(new Set());
+  const [seenCalls, setSeenCalls] = useState<Map<string, number>>(new Map());
 
   /**
    * Checks all rooms for incoming calls
@@ -118,15 +119,25 @@ export function IncomingCallNotification() {
 
     // Check all joined rooms for calls
     const rooms = mx.getRooms();
+    const now = Date.now();
+    const MAX_CALL_AGE = 10000; // 10 seconds
     
     // Find the first room with an incoming call
     const incomingRoom = rooms.find((room) => {
-      // Only monitor DMs and small groups
-      if (!isDirectOrSmallGroup(room)) return false;
+      // Only monitor 1-1 DMs (exactly 2 members)
+      if (room.getJoinedMemberCount() !== 2) return false;
       // Skip rooms we've declined
       if (declinedRooms.has(room.roomId)) return false;
-      const { members } = getOtherCallMembersWithTime(room, myUserId);
-      return members.length > 0;
+      const { members, earliestTime } = getOtherCallMembersWithTime(room, myUserId);
+      if (members.length === 0) return false;
+      
+      // Skip if we've already seen this exact call session
+      const lastSeenTime = seenCalls.get(room.roomId);
+      if (lastSeenTime && lastSeenTime === earliestTime) return false;
+      
+      // Only show if the call is fresh (less than 10 seconds old)
+      const callAge = now - earliestTime;
+      return callAge < MAX_CALL_AGE;
     });
 
     if (incomingRoom) {
@@ -140,28 +151,33 @@ export function IncomingCallNotification() {
     } else {
       setIncomingCall(null);
     }
-  }, [mx, activeCall, declinedRooms]);
+  }, [mx, activeCall, declinedRooms, seenCalls]);
 
   /**
    * Handles state events for call member changes
    */
   const handleStateEvent = useCallback((event: MatrixEvent) => {
     if (event.getType() === CALL_MEMBER_EVENT_TYPE) {
-      // Clear declined status if call ended in that room
+      // Clear declined status and seen calls if call ended in that room
       const roomId = event.getRoomId();
-      if (roomId && declinedRooms.has(roomId)) {
+      if (roomId) {
         const room = mx.getRoom(roomId);
         if (room) {
           const myUserId = mx.getUserId();
           if (myUserId) {
             const members = getOtherCallMembers(room, myUserId);
             if (members.length === 0) {
-              // Call ended, remove from declined
+              // Call ended, clear tracking
               setDeclinedRooms((prev) => {
                 const newSet = new Set(prev);
                 newSet.delete(roomId);
                 return newSet;
               });
+              setSeenCalls((prev) => {
+                const newMap = new Map(prev);
+                newMap.delete(roomId);
+                return newMap;
+              });
             }
           }
         }
@@ -183,9 +199,12 @@ export function IncomingCallNotification() {
   }, [mx, handleStateEvent, checkForIncomingCalls]);
 
   // Play/stop dialing sound based on incoming call state
-  // Only play sound if call started less than 15 seconds ago
+  // Mark call as seen when displayed
   useEffect(() => {
     if (incomingCall) {
+      // Mark this call as seen so we don't notify again
+      setSeenCalls((prev) => new Map(prev).set(incomingCall.roomId, incomingCall.startTime));
+      
       const callAge = Date.now() - incomingCall.startTime;
       const MAX_CALL_AGE_FOR_SOUND = 15000; // 15 seconds
       
@@ -212,6 +231,7 @@ export function IncomingCallNotification() {
     if (!incomingCall) return;
     
     getCallSounds().stopDialingLoop();
+    setSeenCalls((prev) => new Map(prev).set(incomingCall.roomId, incomingCall.startTime));
     try {
       await startCall(incomingCall.roomId, CallType.Voice);
     } catch (error) {
@@ -226,6 +246,7 @@ export function IncomingCallNotification() {
     if (!incomingCall) return;
     
     getCallSounds().stopDialingLoop();
+    setSeenCalls((prev) => new Map(prev).set(incomingCall.roomId, incomingCall.startTime));
     setDeclinedRooms((prev) => new Set(prev).add(incomingCall.roomId));
     setIncomingCall(null);
   }, [incomingCall]);
@@ -237,6 +258,7 @@ export function IncomingCallNotification() {
 
   const room = mx.getRoom(incomingCall.roomId);
   const firstCaller = incomingCall.callerIds[0];
+  const isGroupCall = room ? room.getJoinedMemberCount() > 2 : false;
   
   /**
    * Gets the display name for a user
@@ -287,10 +309,12 @@ export function IncomingCallNotification() {
                 </span>
               )}
             </Text>
-            <Text size="T200" className={css.RoomName}>
-              <Icon size="100" src={Icons.Phone} />
-              <span>Calling from {incomingCall.roomName}</span>
-            </Text>
+            {!isGroupCall && (
+              <Text size="T200" className={css.RoomName}>
+                <Icon size="100" src={Icons.Phone} />
+                <span>Calling from {incomingCall.roomName}</span>
+              </Text>
+            )}
           </Box>
         </div>
 

src/app/features/call/types.ts

@@ -119,6 +119,8 @@ export interface ActiveCall {
   isDeafened: boolean;
   isVideoEnabled: boolean;
   isScreenSharing: boolean;
+  /** The homeserver being used for LiveKit JWT (if different from user's homeserver) */
+  livekitHomeserver?: string;
 }
 
 /**
@@ -150,7 +152,8 @@ export interface CallEvent {
  * Call service configuration
  */
 export interface CallServiceConfig {
-  livekitServiceUrl: string;
+  /** @deprecated No longer used - JWT fetched dynamically from multiple homeservers */
+  livekitServiceUrl?: string;
   homeserverBaseUrl: string;
   accessToken: string;
   userId: string;

src/app/features/call/useCall.ts

@@ -2,7 +2,7 @@ import { createContext, useContext, useState, useCallback, useEffect, useMemo }
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { CallService } from './CallService';
 import { ActiveCall, CallEvent, CallEventType, CallState, CallType } from './types';
-import { fetchWellKnownWithRTC, getLiveKitFocus } from './useRtcConfig';
+import { fetchWellKnownWithRTC, getLiveKitFocus, getLiveKitHomeserverPriority } from './useRtcConfig';
 
 interface CallContextValue {
   callService: CallService | null;
@@ -55,24 +55,17 @@ export function useCall(): CallContextValue {
 
 export const CallProvider = CallContext.Provider;
 
-interface UseCallServiceOptions {
-  livekitServiceUrl?: string;
-}
-
 /**
  * Hook to initialize and manage the call service
  * Should be used at the app level to provide call context
- * @param options - Optional configuration including livekitServiceUrl from client config
  */
-export function useCallService(options?: UseCallServiceOptions): CallContextValue {
+export function useCallService(): CallContextValue {
   const mx = useMatrixClient();
   const [callService, setCallService] = useState<CallService | null>(null);
   const [activeCall, setActiveCall] = useState<ActiveCall | null>(null);
   const [callSupported, setCallSupported] = useState(false);
   const [callSupportLoading, setCallSupportLoading] = useState(true);
 
-  const configuredLivekitUrl = options?.livekitServiceUrl;
-
   useEffect(() => {
     let unsubscribe: (() => void) | undefined;
     let service: CallService | undefined;
@@ -89,35 +82,12 @@ export function useCallService(options?: UseCallServiceOptions): CallContextValu
       }
 
       try {
-        let livekitServiceUrl: string | undefined = configuredLivekitUrl;
-
-        // If no configured URL, try to get from well-known
-        if (!livekitServiceUrl) {
-          const wellKnown = await fetchWellKnownWithRTC(baseUrl);
-          // eslint-disable-next-line no-console
-          console.log('Call service init - well-known:', wellKnown);
-          const livekitFocus = getLiveKitFocus(wellKnown);
-          // eslint-disable-next-line no-console
-          console.log('Call service init - LiveKit focus:', livekitFocus);
-          livekitServiceUrl = livekitFocus?.livekit_service_url;
-        } else {
-          // eslint-disable-next-line no-console
-          console.log('Call service init - Using configured LiveKit URL:', livekitServiceUrl);
-        }
-
-        // If still no URL, log warning but allow service to initialize
-        // Individual rooms may have their own LiveKit configs
-        if (!livekitServiceUrl) {
-          // eslint-disable-next-line no-console
-          console.log('Call service init - No global LiveKit URL found');
-          console.log('Call service init - Will check for room-level configs when joining calls');
-          // Use a placeholder URL - room-level config will override this
-          livekitServiceUrl = 'https://placeholder.invalid/livekit';
-        }
+        // Initialize CallService without checking user's homeserver
+        // Call support will be determined per-room based on available homeservers
+        console.log('Call service init - Initializing (call support determined per-room)');
 
         service = new CallService(
           {
-            livekitServiceUrl,
             homeserverBaseUrl: baseUrl,
             accessToken,
             userId,
@@ -128,10 +98,10 @@ export function useCallService(options?: UseCallServiceOptions): CallContextValu
 
         setCallService(service);
         setGlobalCallService(service); // Make available globally for Paarrot API
-        setCallSupported(true);
+        setCallSupported(true); // Global flag - actual support checked per-room
         setCallSupportLoading(false);
         // eslint-disable-next-line no-console
-        console.log('Call service init - Success! Calls are supported');
+        console.log('Call service init - Success!');
 
         unsubscribe = service.on((event: CallEvent) => {
           // Update state for any event that might change the call state
@@ -173,7 +143,7 @@ export function useCallService(options?: UseCallServiceOptions): CallContextValu
       service?.dispose();
       setGlobalCallService(null); // Clear global reference
     };
-  }, [mx, configuredLivekitUrl]);
+  }, [mx]);
 
   const startCall = useCallback(
     async (roomId: string, callType: CallType) => {
@@ -261,10 +231,90 @@ export function useCallService(options?: UseCallServiceOptions): CallContextValu
  * Hook to check if a call is active in a specific room
  */
 export function useRoomCall(roomId: string) {
-  const { activeCall, startCall, endCall, callSupported, callSupportLoading } = useCall();
+  const { activeCall, startCall, endCall, callSupported: globalCallSupported, callSupportLoading: globalCallSupportLoading, callService } = useCall();
+  const mx = useMatrixClient();
+  const [roomCallSupported, setRoomCallSupported] = useState(false);
+  const [roomCallSupportLoading, setRoomCallSupportLoading] = useState(true);
+
+  // Check if calls are supported for this specific room by checking all priority homeservers
+  useEffect(() => {
+    const checkRoomCallSupport = async () => {
+      setRoomCallSupportLoading(true);
+      
+      const room = mx.getRoom(roomId);
+      if (!room) {
+        setRoomCallSupported(false);
+        setRoomCallSupportLoading(false);
+        return;
+      }
+
+      // Get homeserver priority list for this room
+      const homeserverPriority = getLiveKitHomeserverPriority(
+        room,
+        mx.getHomeserverUrl(),
+        mx.getSafeUserId()
+      );
+
+      console.log(`Checking call support for room ${roomId}, homeserver priority:`, homeserverPriority);
+
+      // Check each homeserver in priority order
+      for (const homeserver of homeserverPriority) {
+        try {
+          console.log(`Fetching well-known from ${homeserver}...`);
+          const wellKnown = await fetchWellKnownWithRTC(homeserver);
+          console.log(`Well-known response from ${homeserver}:`, wellKnown);
+          
+          const livekitFocus = getLiveKitFocus(wellKnown);
+          console.log(`LiveKit focus from ${homeserver}:`, livekitFocus);
+          
+          if (livekitFocus) {
+            console.log(`Call support found for room ${roomId} on homeserver: ${homeserver}`);
+            setRoomCallSupported(true);
+            setRoomCallSupportLoading(false);
+            return;
+          }
+        } catch (error) {
+          console.warn(`Failed to check call support on ${homeserver}:`, error);
+          // Continue to next homeserver
+        }
+      }
+
+      // No homeserver supports calls
+      console.log(`No call support found for room ${roomId}`);
+      setRoomCallSupported(false);
+      setRoomCallSupportLoading(false);
+    };
+
+    checkRoomCallSupport();
+  }, [roomId, mx]);
 
   const isInCall = activeCall?.roomId === roomId;
   const callState = isInCall ? activeCall.state : CallState.Idle;
+  const isUsingRemoteHomeserver = isInCall ? callService?.isUsingRemoteHomeserver() ?? false : false;
+
+  // Check if a remote homeserver WOULD be used (pre-call check)
+  const wouldUseRemoteHomeserver = useMemo(() => {
+    if (isInCall) return isUsingRemoteHomeserver;
+    
+    const room = mx.getRoom(roomId);
+    if (!room) return false;
+    
+    const homeserverPriority = getLiveKitHomeserverPriority(
+      room,
+      mx.getHomeserverUrl(),
+      mx.getSafeUserId()
+    );
+    
+    // Check if first priority is different from user's homeserver
+    const userHomeserverDomain = mx.getHomeserverUrl()
+      .replace('https://', '')
+      .replace('http://', '');
+    const firstPriorityDomain = homeserverPriority[0]
+      ?.replace('https://', '')
+      .replace('http://', '');
+    
+    return firstPriorityDomain !== userHomeserverDomain;
+  }, [isInCall, isUsingRemoteHomeserver, mx, roomId]);
 
   const startVoiceCall = useCallback(() => startCall(roomId, CallType.Voice), [roomId, startCall]);
   const startVideoCall = useCallback(() => startCall(roomId, CallType.Video), [roomId, startCall]);
@@ -273,10 +323,11 @@ export function useRoomCall(roomId: string) {
     isInCall,
     callState,
     activeCall: isInCall ? activeCall : null,
+    isUsingRemoteHomeserver: wouldUseRemoteHomeserver,
     startVoiceCall,
     startVideoCall,
     endCall,
-    callSupported,
-    callSupportLoading,
+    callSupported: roomCallSupported,
+    callSupportLoading: roomCallSupportLoading,
   };
 }

src/app/features/call/useRoomCallMembers.ts

@@ -19,7 +19,7 @@ export interface CallMember {
  * @param room - The Matrix room to check
  * @returns Array of active call members
  */
-function getActiveCallMembers(room: Room): CallMember[] {
+export function getActiveCallMembers(room: Room): CallMember[] {
   const members: CallMember[] = [];
   const now = Date.now();
 

src/app/features/call/useRtcConfig.ts

@@ -1,6 +1,109 @@
 import { useCallback } from 'react';
+import { Room } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { LiveKitFocus, LiveKitJWTResponse, OpenIdToken, WellKnownWithRTC } from './types';
+import { getMxIdServer } from '../../utils/matrix';
+import { guessDmRoomUserId } from '../../utils/matrix';
+import { getActiveCallMembers } from './useRoomCallMembers';
+
+/**
+ * Get room server from room ID (format: !roomid:server.com)
+ */
+function getRoomServer(roomId: string): string | undefined {
+  const server = getMxIdServer(roomId);
+  console.log(`[getRoomServer] Room ID: ${roomId} -> Server: ${server}`);
+  return server;
+}
+
+/**
+ * Determine which homeservers to try for LiveKit JWT, in priority order
+ * Prioritizes servers where active call members are located when joining existing calls
+ * @param room - Room to start/join call in
+ * @param userHomeserver - User's homeserver
+ * @param myUserId - Current user's Matrix ID
+ * @returns Array of homeserver base URLs to try in order
+ */
+export function getLiveKitHomeserverPriority(
+  room: Room,
+  userHomeserver: string,
+  myUserId: string
+): string[] {
+  const servers: string[] = [];
+  const memberCount = room.getMembers().length;
+  const isDM = memberCount <= 2;
+  
+  console.log(`[getLiveKitHomeserverPriority] Room: ${room.roomId}`);
+  console.log(`[getLiveKitHomeserverPriority] Member count: ${memberCount}, isDM: ${isDM}`);
+  console.log(`[getLiveKitHomeserverPriority] User homeserver: ${userHomeserver}`);
+  
+  // Check for active call members
+  const activeCallMembers = getActiveCallMembers(room);
+  const hasActiveCall = activeCallMembers.length > 0;
+
+  console.log(`[getLiveKitHomeserverPriority] Active call members: ${activeCallMembers.length}, hasActiveCall: ${hasActiveCall}`);
+
+  if (hasActiveCall) {
+    // Joining existing call - prioritize room's homeserver (where call is hosted)
+    const roomServer = getRoomServer(room.roomId);
+    console.log(`[getLiveKitHomeserverPriority] Room server (active call): ${roomServer}`);
+    if (roomServer) {
+      servers.push(`https://${roomServer}`);
+    }
+    
+    // Add user's homeserver as fallback
+    const userDomain = userHomeserver.replace('https://', '').replace('http://', '');
+    if (!roomServer || roomServer !== userDomain) {
+      servers.push(userHomeserver);
+    }
+    
+    // For DMs, also try other member's homeserver
+    if (isDM) {
+      const otherUserId = guessDmRoomUserId(room, myUserId);
+      if (otherUserId && otherUserId !== myUserId) {
+        const otherServer = getMxIdServer(otherUserId);
+        if (otherServer && otherServer !== userDomain && otherServer !== roomServer) {
+          servers.push(`https://${otherServer}`);
+        }
+      }
+    }
+  } else {
+    // Starting new call - use original priority logic
+    if (isDM) {
+      console.log(`[getLiveKitHomeserverPriority] DM path - user homeserver first`);
+      // For DMs: user's homeserver first, then other member's homeserver
+      servers.push(userHomeserver);
+      
+      const otherUserId = guessDmRoomUserId(room, myUserId);
+      console.log(`[getLiveKitHomeserverPriority] Other user ID: ${otherUserId}`);
+      if (otherUserId && otherUserId !== myUserId) {
+        const otherServer = getMxIdServer(otherUserId);
+        console.log(`[getLiveKitHomeserverPriority] Other user server: ${otherServer}`);
+        const userDomain = userHomeserver.replace('https://', '').replace('http://', '');
+        if (otherServer && otherServer !== userDomain) {
+          servers.push(`https://${otherServer}`);
+        }
+      }
+    } else {
+      console.log(`[getLiveKitHomeserverPriority] Channel path - room homeserver first`);
+      // For channels: room's homeserver first, then user's homeserver
+      const roomServer = getRoomServer(room.roomId);
+      console.log(`[getLiveKitHomeserverPriority] Room server from ID: ${roomServer}`);
+      if (roomServer) {
+        servers.push(`https://${roomServer}`);
+      }
+      
+      // Fallback to user's homeserver if different
+      const userDomain = userHomeserver.replace('https://', '').replace('http://', '');
+      console.log(`[getLiveKitHomeserverPriority] User domain: ${userDomain}, room server: ${roomServer}`);
+      if (!roomServer || roomServer !== userDomain) {
+        servers.push(userHomeserver);
+      }
+    }
+  }
+
+  console.log(`[getLiveKitHomeserverPriority] Final server list:`, servers);
+  return servers;
+}
 
 /**
  * Fetches the LiveKit focus configuration from well-known data
@@ -9,11 +112,16 @@ import { LiveKitFocus, LiveKitJWTResponse, OpenIdToken, WellKnownWithRTC } from
  */
 export function getLiveKitFocus(wellKnown: WellKnownWithRTC): LiveKitFocus | undefined {
   const rtcFoci = wellKnown['org.matrix.msc4143.rtc_foci'];
+  console.log(`[getLiveKitFocus] rtcFoci from well-known:`, rtcFoci);
+  
   if (!rtcFoci || !Array.isArray(rtcFoci)) {
+    console.log(`[getLiveKitFocus] No rtc_foci found or not an array`);
     return undefined;
   }
 
-  return rtcFoci.find((focus): focus is LiveKitFocus => focus.type === 'livekit');
+  const livekitFocus = rtcFoci.find((focus): focus is LiveKitFocus => focus.type === 'livekit');
+  console.log(`[getLiveKitFocus] Found LiveKit focus:`, livekitFocus);
+  return livekitFocus;
 }
 
 /**
@@ -22,14 +130,28 @@ export function getLiveKitFocus(wellKnown: WellKnownWithRTC): LiveKitFocus | und
  * @returns The well-known response with RTC configuration
  */
 export async function fetchWellKnownWithRTC(baseUrl: string): Promise<WellKnownWithRTC> {
-  const wellKnownUrl = `${baseUrl}/.well-known/matrix/client`;
+  // In development mode (localhost), use CORS proxy to avoid CORS issues
+  const isDev = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+  
+  let wellKnownUrl: string;
+  if (isDev) {
+    // Extract hostname from baseUrl for proxy
+    const hostname = baseUrl.replace('https://', '').replace('http://', '').replace(/\/$/, '');
+    wellKnownUrl = `/_matrix-cors-proxy/${hostname}/.well-known/matrix/client`;
+  } else {
+    wellKnownUrl = `${baseUrl}/.well-known/matrix/client`;
+  }
+
+  console.log(`[fetchWellKnownWithRTC] Fetching from: ${wellKnownUrl}`);
 
   const response = await fetch(wellKnownUrl);
   if (!response.ok) {
     throw new Error(`Failed to fetch well-known: ${response.status}`);
   }
 
-  return response.json();
+  const data = await response.json();
+  console.log(`[fetchWellKnownWithRTC] Response data:`, data);
+  return data;
 }
 
 /**
@@ -45,7 +167,16 @@ export async function requestOpenIdToken(
   userId: string,
   accessToken: string
 ): Promise<OpenIdToken> {
-  const url = `${homeserverBaseUrl}/_matrix/client/v3/user/${encodeURIComponent(userId)}/openid/request_token`;
+  // In development mode (localhost), use CORS proxy to avoid CORS issues
+  const isDev = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+  
+  let url: string;
+  if (isDev) {
+    const hostname = homeserverBaseUrl.replace('https://', '').replace('http://', '').replace(/\/$/, '');
+    url = `/_matrix-cors-proxy/${hostname}/_matrix/client/v3/user/${encodeURIComponent(userId)}/openid/request_token`;
+  } else {
+    url = `${homeserverBaseUrl}/_matrix/client/v3/user/${encodeURIComponent(userId)}/openid/request_token`;
+  }
 
   const response = await fetch(url, {
     method: 'POST',
@@ -66,7 +197,7 @@ export async function requestOpenIdToken(
 
 /**
  * Fetches a LiveKit JWT for joining a call using OpenID token authentication
- * @param livekitServiceUrl - The LiveKit service URL from well-known or config
+ * @param livekitServiceUrl - The LiveKit service URL from Matrix homeserver well-known
  * @param roomId - The Matrix room ID to join
  * @param userId - The Matrix user ID
  * @param deviceId - The Matrix device ID
@@ -88,7 +219,21 @@ export async function fetchLiveKitJWT(
   // to create the LiveKit room name.
   const slotId = 'm.call';
 
-  const response = await fetch(livekitServiceUrl, {
+  // In development mode (localhost), use CORS proxy to avoid CORS issues
+  const isDev = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+  
+  let url: string;
+  if (isDev) {
+    // Extract hostname and path from livekitServiceUrl
+    const urlObj = new URL(livekitServiceUrl);
+    const hostname = urlObj.hostname;
+    const pathname = urlObj.pathname;
+    url = `/_matrix-cors-proxy/${hostname}${pathname}`;
+  } else {
+    url = livekitServiceUrl;
+  }
+
+  const response = await fetch(url, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -113,6 +258,62 @@ export async function fetchLiveKitJWT(
   return response.json();
 }
 
+/**
+ * Try fetching LiveKit JWT from multiple homeservers in priority order
+ * @param homeservers - Array of homeserver base URLs to check for LiveKit config
+ * @param userHomeserver - The user's own homeserver URL (for OpenID token)
+ * @param roomId - The Matrix room ID
+ * @param userId - The Matrix user ID
+ * @param deviceId - The Matrix device ID
+ * @param accessToken - The Matrix access token
+ * @returns LiveKit JWT response and the homeserver that provided it, or null
+ */
+export async function fetchLiveKitJWTFromServers(
+  homeservers: string[],
+  userHomeserver: string,
+  roomId: string,
+  userId: string,
+  deviceId: string,
+  accessToken: string
+): Promise<{ jwt: LiveKitJWTResponse; homeserver: string } | null> {
+  for (const homeserver of homeservers) {
+    try {
+      console.log(`Trying LiveKit JWT from homeserver: ${homeserver}`);
+      
+      // Fetch well-known from this homeserver
+      const wellKnown = await fetchWellKnownWithRTC(homeserver);
+      const livekitFocus = getLiveKitFocus(wellKnown);
+      
+      if (!livekitFocus) {
+        console.log(`No LiveKit config on ${homeserver}, trying next...`);
+        continue;
+      }
+      
+      // Always get OpenID token from user's own homeserver
+      // (Can't use access token on remote homeserver)
+      const openIdToken = await requestOpenIdToken(userHomeserver, userId, accessToken);
+      
+      // Exchange for LiveKit JWT
+      const jwt = await fetchLiveKitJWT(
+        livekitFocus.livekit_service_url,
+        roomId,
+        userId,
+        deviceId,
+        openIdToken
+      );
+      
+      console.log(`Successfully got LiveKit JWT from ${homeserver}`);
+      return { jwt, homeserver };
+    } catch (error) {
+      console.warn(`Failed to get LiveKit JWT from ${homeserver}:`, error);
+      // Continue to next homeserver
+    }
+  }
+  
+  console.error('Failed to get LiveKit JWT from any homeserver');
+  return null;
+}
+
 /**
  * Hook to get RTC configuration functions
  * Provides utilities for fetching well-known data and LiveKit JWTs

src/app/features/common-settings/general/LivekitConfig.tsx

@@ -1,156 +0,0 @@
-import React, { FormEventHandler, useCallback, useState } from 'react';
-import {
-  Box,
-  Button,
-  color,
-  Input,
-  Spinner,
-  Text,
-} from 'folds';
-import { SequenceCard } from '../../../components/sequence-card';
-import { SequenceCardStyle } from '../../room-settings/styles.css';
-import { SettingTile } from '../../../components/setting-tile';
-import { useRoom } from '../../../hooks/useRoom';
-import { useStateEvent } from '../../../hooks/useStateEvent';
-import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { usePowerLevels } from '../../../hooks/usePowerLevels';
-import { useRoomCreators } from '../../../hooks/useRoomCreators';
-import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
-import { StateEvent } from '../../../../types/matrix/room';
-
-interface LivekitConfigContent {
-  service_url?: string;
-}
-
-/**
- * Room-specific LiveKit configuration component.
- * Allows room admins to override the LiveKit service URL for calls in this room.
- */
-export function LivekitConfig() {
-  const mx = useMatrixClient();
-  const room = useRoom();
-  const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
-  const permissions = useRoomPermissions(creators, powerLevels);
-
-  const stateEvent = useStateEvent(room, StateEvent.RoomLivekitConfig);
-  const currentConfig = stateEvent?.getContent<LivekitConfigContent>();
-  const currentUrl = currentConfig?.service_url || '';
-
-  const [urlValue, setUrlValue] = useState(currentUrl);
-  const [urlError, setUrlError] = useState<string>();
-
-  const [saveState, saveConfig] = useAsyncCallback(
-    useCallback(
-      async (serviceUrl: string) => {
-        const content: LivekitConfigContent = serviceUrl
-          ? { service_url: serviceUrl }
-          : {};
-
-        await mx.sendStateEvent(room.roomId, StateEvent.RoomLivekitConfig as any, content, '');
-      },
-      [mx, room]
-    )
-  );
-
-  const canEdit = permissions.stateEvent(StateEvent.RoomLivekitConfig, mx.getUserId()!);
-
-  const handleSave: FormEventHandler<HTMLFormElement> = async (evt) => {
-    evt.preventDefault();
-    const serviceUrl = urlValue.trim();
-
-    // Basic URL validation
-    if (serviceUrl && !serviceUrl.startsWith('http://') && !serviceUrl.startsWith('https://')) {
-      setUrlError('URL must start with http:// or https://');
-      return;
-    }
-
-    setUrlError(undefined);
-    await saveConfig(serviceUrl);
-  };
-
-  const handleClear = async () => {
-    setUrlValue('');
-    setUrlError(undefined);
-    await saveConfig('');
-  };
-
-  const hasChanges = urlValue !== currentUrl;
-  const isSaving = saveState.status === AsyncStatus.Loading;
-
-  return (
-    <SequenceCard
-      className={SequenceCardStyle}
-      variant="SurfaceVariant"
-      direction="Column"
-      gap="400"
-    >
-      <SettingTile
-        title="LiveKit Service URL"
-        description="Override the LiveKit JWT service endpoint for Matrix RTC calls in this room. Leave empty to use the server default or user preference."
-      />
-      <Box as="form" onSubmit={handleSave} direction="Column" gap="200" style={{ padding: '0 16px' }}>
-        <Input
-          value={urlValue}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            setUrlValue(e.target.value);
-            setUrlError(undefined);
-          }}
-          placeholder="https://example.com/livekit/jwt"
-          size="300"
-          variant="Secondary"
-          radii="300"
-          disabled={!canEdit || isSaving}
-          style={{ width: '100%' }}
-        />
-        {urlError && (
-          <Text size="T200" style={{ color: color.Critical.Main }}>
-            {urlError}
-          </Text>
-        )}
-        {saveState.status === AsyncStatus.Error && (
-          <Text size="T200" style={{ color: color.Critical.Main }}>
-            Failed to save: {saveState.error instanceof Error ? saveState.error.message : 'Unknown error'}
-          </Text>
-        )}
-        {saveState.status === AsyncStatus.Success && !hasChanges && (
-          <Text size="T200" style={{ color: color.Success.Main }}>
-            Configuration saved
-          </Text>
-        )}
-        <Box gap="200" alignItems="Center">
-          <Button
-            type="submit"
-            size="300"
-            variant="Primary"
-            fill="Solid"
-            radii="300"
-            disabled={!canEdit || isSaving || !hasChanges}
-            before={isSaving && <Spinner size="100" variant="Primary" fill="Solid" />}
-          >
-            <Text size="B300">Save</Text>
-          </Button>
-          {currentUrl && (
-            <Button
-              type="button"
-              size="300"
-              variant="Critical"
-              fill="None"
-              radii="300"
-              disabled={!canEdit || isSaving}
-              onClick={handleClear}
-            >
-              <Text size="B300">Clear</Text>
-            </Button>
-          )}
-          {!canEdit && (
-            <Text size="T200" priority="300">
-              You don't have permission to change this setting
-            </Text>
-          )}
-        </Box>
-      </Box>
-    </SequenceCard>
-  );
-}

src/app/features/common-settings/general/index.ts

@@ -1,5 +1,4 @@
 export * from './EmbedFilters';
-export * from './LivekitConfig';
 export * from './RoomAddress';
 export * from './RoomEncryption';
 export * from './RoomHistoryVisibility';

src/app/features/create-chat/CreateChat.tsx

@@ -9,7 +9,7 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { ErrorCode } from '../../cs-errorcode';
 import { millisecondsToMinutes } from '../../utils/common';
-import { createRoomEncryptionState } from '../../components/create-room';
+import { createRoomEncryptionState, createRoomPowerLevelsState } from '../../components/create-room';
 import { useAlive } from '../../hooks/useAlive';
 import { getDirectRoomPath } from '../../pages/pathUtils';
 
@@ -29,6 +29,7 @@ export function CreateChat({ defaultUserId }: CreateChatProps) {
       async (userId, encrypted) => {
         const initialState: ICreateRoomStateEvent[] = [];
 
+        initialState.push(createRoomPowerLevelsState());
         if (encrypted) initialState.push(createRoomEncryptionState());
 
         const result = await mx.createRoom({

src/app/features/create-room/CreateRoomModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import {
   Box,
   config,
@@ -14,6 +14,7 @@ import {
   Text,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
+import { useAtomValue } from 'jotai';
 import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
 import { SpaceProvider } from '../../hooks/useSpace';
 import { CreateRoomForm } from './CreateRoom';
@@ -23,17 +24,116 @@ import {
 } from '../../state/hooks/createRoomModal';
 import { CreateRoomModalState } from '../../state/createRoomModal';
 import { stopPropagation } from '../../utils/keyboard';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { StateEvent } from '../../../types/matrix/room';
+import { PaarrotSubRoomsContent } from '../../hooks/useRoomSubRooms';
+import { roomToParentsAtom } from '../../state/room/roomToParents';
+import { isSpace } from '../../utils/room';
 
 type CreateRoomModalProps = {
   state: CreateRoomModalState;
 };
 function CreateRoomModal({ state }: CreateRoomModalProps) {
-  const { spaceId } = state;
+  const { spaceId, parentSubRoomId } = state;
+  const mx = useMatrixClient();
   const closeDialog = useCloseCreateRoomModal();
+  const roomToParents = useAtomValue(roomToParentsAtom);
 
   const allJoinedRooms = useAllJoinedRoomsSet();
   const getRoom = useGetRoom(allJoinedRooms);
   const space = spaceId ? getRoom(spaceId) : undefined;
+  const parentRoom = parentSubRoomId ? getRoom(parentSubRoomId) : undefined;
+
+  const handleCreate = useCallback(
+    async (newRoomId: string) => {
+      // If creating a sub-room, add it to the parent's sub-rooms and set parent relationship
+      if (parentSubRoomId && parentRoom) {
+        try {
+          // Extract server from parent room ID for via servers
+          const serverName = parentSubRoomId.split(':')[1] || '';
+          const viaServers = serverName ? [serverName] : [];
+
+          // Set m.space.parent on the new room pointing to parent
+          await mx.sendStateEvent(
+            newRoomId,
+            StateEvent.SpaceParent,
+            {
+              canonical: true,
+              via: viaServers,
+            },
+            parentSubRoomId
+          );
+
+          // Set m.space.child on the parent room pointing to this sub-room
+          await mx.sendStateEvent(
+            parentSubRoomId,
+            StateEvent.SpaceChild,
+            { via: viaServers },
+            newRoomId
+          );
+
+          // Copy parent's join_rules to the sub-room
+          const parentJoinRulesEvent = parentRoom.currentState.getStateEvents(StateEvent.RoomJoinRules, '');
+          if (parentJoinRulesEvent) {
+            const joinRulesContent = parentJoinRulesEvent.getContent();
+            await mx.sendStateEvent(
+              newRoomId,
+              StateEvent.RoomJoinRules,
+              joinRulesContent,
+              ''
+            );
+          }
+
+          // Add new room to parent's sub-rooms list
+          const stateEvent = parentRoom.currentState.getStateEvents(StateEvent.PaarrotSubRooms, '');
+          const currentContent = stateEvent?.getContent() as PaarrotSubRoomsContent | undefined;
+          const currentChildren = currentContent?.children ?? [];
+          const newContent: PaarrotSubRoomsContent = {
+            children: [...currentChildren, newRoomId],
+          };
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          await mx.sendStateEvent(parentSubRoomId, StateEvent.PaarrotSubRooms as any, newContent, '');
+
+          // Also add sub-room to parent's space(s) for joining/permissions
+          // The UI will hide it from the top-level display and only show it nested
+          const parentSpaces = roomToParents.get(parentSubRoomId);
+          if (parentSpaces) {
+            const spaceIds = Array.from(parentSpaces);
+            await Promise.all(
+              spaceIds.map(async (parentSpaceId) => {
+                const parentSpaceRoom = mx.getRoom(parentSpaceId);
+                // Only add to actual spaces (not other sub-room parents)
+                if (parentSpaceRoom && isSpace(parentSpaceRoom)) {
+                  try {
+                    const spaceServerName = parentSpaceId.split(':')[1] || '';
+                    const spaceViaServers = spaceServerName ? [spaceServerName] : [];
+                    // Add as m.space.child to the space
+                    await mx.sendStateEvent(
+                      parentSpaceId,
+                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                      StateEvent.SpaceChild as any,
+                      { via: spaceViaServers },
+                      newRoomId
+                    );
+                  } catch (spaceError) {
+                    // eslint-disable-next-line no-console
+                    console.warn(`Failed to add sub-room to space ${parentSpaceId}:`, spaceError);
+                  }
+                }
+              })
+            );
+          }
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error('Failed to set up sub-room relationship:', error);
+        }
+      }
+      closeDialog();
+    },
+    [mx, parentSubRoomId, parentRoom, roomToParents, closeDialog]
+  );
+
+  const modalTitle = parentSubRoomId ? 'New Sub-Room' : 'New Room';
 
   return (
     <SpaceProvider value={space ?? null}>
@@ -57,7 +157,7 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
                   }}
                 >
                   <Box grow="Yes">
-                    <Text size="H4">New Room</Text>
+                    <Text size="H4">{modalTitle}</Text>
                   </Box>
                   <Box shrink="No">
                     <IconButton size="300" radii="300" onClick={closeDialog}>
@@ -74,7 +174,7 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
                     direction="Column"
                     gap="500"
                   >
-                    <CreateRoomForm space={space} onCreate={closeDialog} />
+                    <CreateRoomForm space={space} onCreate={handleCreate} />
                   </Box>
                 </Scroll>
               </Box>

src/app/features/lobby/SpaceHierarchy.tsx

@@ -18,6 +18,7 @@ import { RoomType, StateEvent } from '../../../types/matrix/room';
 import { SequenceCard } from '../../components/sequence-card';
 import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
 import { getRoomPermissionsAPI } from '../../hooks/useRoomPermissions';
+import { PaarrotSubRoomsContent } from '../../hooks/useRoomSubRooms';
 
 type SpaceHierarchyProps = {
   summary: IHierarchyRoom | undefined;
@@ -99,7 +100,36 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
       onSpacesFound(Array.from(subspaces.values()));
     }, [subspaces, onSpacesFound]);
 
-    let childItems = roomItems?.filter((i) => !subspaces.has(i.roomId));
+    // Build a global set of all sub-room IDs by checking ALL joined rooms
+    // This ensures sub-rooms are hidden even if their parent isn't in this space
+    const globalSubRoomIds = useMemo(() => {
+      const subRoomIds = new Set<string>();
+      mx.getRooms().forEach((room) => {
+        const subRoomsEvent = room.currentState.getStateEvents(StateEvent.PaarrotSubRooms, '');
+        const content = subRoomsEvent?.getContent<PaarrotSubRoomsContent>();
+        content?.children?.forEach((childId: string) => subRoomIds.add(childId));
+      });
+      return subRoomIds;
+    }, [mx, allJoinedRooms]);
+
+    // Build a map of parent room -> sub-room IDs for nested rendering (only for rooms in this space)
+    const subRoomsMap = useMemo(() => {
+      const parentToSubRooms = new Map<string, string[]>();
+      roomItems?.forEach((item) => {
+        const room = mx.getRoom(item.roomId);
+        if (room) {
+          const subRoomsEvent = room.currentState.getStateEvents(StateEvent.PaarrotSubRooms, '');
+          const content = subRoomsEvent?.getContent<PaarrotSubRoomsContent>();
+          const children = content?.children ?? [];
+          if (children.length > 0) {
+            parentToSubRooms.set(item.roomId, children);
+          }
+        }
+      });
+      return parentToSubRooms;
+    }, [mx, roomItems]);
+
+    let childItems = roomItems?.filter((i) => !subspaces.has(i.roomId) && !globalSubRoomIds.has(i.roomId));
     if (!spacePermissions?.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())) {
       // hide unknown rooms for normal user
       childItems = childItems?.filter((i) => {
@@ -166,40 +196,89 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
                 draggingItem?.roomId === roomItem.roomId &&
                 draggingItem.parentId === roomItem.parentId;
 
+              // Get sub-rooms for this room
+              const subRoomIds = subRoomsMap.get(roomItem.roomId) ?? [];
+
               return (
-                <RoomItemCard
-                  key={roomItem.roomId}
-                  item={roomItem}
-                  loading={fetching}
-                  error={error}
-                  summary={roomSummary}
-                  dm={mDirects.has(roomItem.roomId)}
-                  onOpen={onOpenRoom}
-                  getRoom={getRoom}
-                  canReorder={
-                    !!spacePermissions?.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId()) &&
-                    !disabledReorder
-                  }
-                  options={
-                    <HierarchyItemMenu
-                      item={roomItem}
-                      powerLevels={roomPowerLevels}
-                      joined={allJoinedRooms.has(roomItem.roomId)}
-                      canEditChild={
-                        !!spacePermissions?.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())
-                      }
-                    />
-                  }
-                  after={
-                    <AfterItemDropTarget
-                      item={roomItem}
-                      nextRoomId={nextRoomId}
-                      canDrop={canDrop}
-                    />
-                  }
-                  data-dragging={roomDragging}
-                  onDragging={onDragging}
-                />
+                <React.Fragment key={roomItem.roomId}>
+                  <RoomItemCard
+                    item={roomItem}
+                    loading={fetching}
+                    error={error}
+                    summary={roomSummary}
+                    dm={mDirects.has(roomItem.roomId)}
+                    onOpen={onOpenRoom}
+                    getRoom={getRoom}
+                    canReorder={
+                      !!spacePermissions?.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId()) &&
+                      !disabledReorder
+                    }
+                    options={
+                      <HierarchyItemMenu
+                        item={roomItem}
+                        powerLevels={roomPowerLevels}
+                        joined={allJoinedRooms.has(roomItem.roomId)}
+                        canEditChild={
+                          !!spacePermissions?.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())
+                        }
+                      />
+                    }
+                    after={
+                      <AfterItemDropTarget
+                        item={roomItem}
+                        nextRoomId={nextRoomId}
+                        canDrop={canDrop}
+                      />
+                    }
+                    data-dragging={roomDragging}
+                    onDragging={onDragging}
+                  />
+                  {/* Render sub-rooms nested under this room */}
+                  {subRoomIds.length > 0 && (
+                    <Box direction="Column" gap="100" style={{ marginLeft: config.space.S400 }}>
+                      {subRoomIds.map((subRoomId) => {
+                        const subRoom = mx.getRoom(subRoomId);
+                        const subRoomSummary = rooms.get(subRoomId);
+                        const subRoomPowerLevels = roomsPowerLevels.get(subRoomId) ?? {};
+                        const subRoomItem: HierarchyItemRoom = {
+                          roomId: subRoomId,
+                          parentId: roomItem.roomId,
+                          content: {},
+                        };
+                        const subRoomDragging =
+                          draggingItem?.roomId === subRoomId &&
+                          draggingItem.parentId === roomItem.roomId;
+
+                        // Skip sub-rooms the user hasn't joined yet if we have no summary
+                        if (!subRoom && !subRoomSummary) return null;
+
+                        return (
+                          <RoomItemCard
+                            key={subRoomId}
+                            item={subRoomItem}
+                            loading={fetching}
+                            error={error}
+                            summary={subRoomSummary}
+                            dm={mDirects.has(subRoomId)}
+                            onOpen={onOpenRoom}
+                            getRoom={getRoom}
+                            canReorder={false}
+                            options={
+                              <HierarchyItemMenu
+                                item={subRoomItem}
+                                powerLevels={subRoomPowerLevels}
+                                joined={allJoinedRooms.has(subRoomId)}
+                                canEditChild={false}
+                              />
+                            }
+                            data-dragging={subRoomDragging}
+                            onDragging={onDragging}
+                          />
+                        );
+                      })}
+                    </Box>
+                  )}
+                </React.Fragment>
               );
             })}
           </Box>