🩹(backend) identify externally provisioned users to PostHog

In the external API, applications authenticate with a client_id/secret and can provision users with only an email. In that flow, users are not identified to PostHog, so the user DB id alone is not enough to identify them in analytics afterwards. The issue does not exist in the public API, where users are authenticated and therefore already identified. Inspired by @flochehab's approach in summary.
2026-07-27 12:19:10 +00:00 · 2026-07-10 00:07:36 +02:00
51 changed files with 328 additions and 1772 deletions
@@ -8,35 +8,14 @@ and this project adheres to

 ## [Unreleased]

-### Added
-
- ✨(backend) allow searching the recording admin table by owner email
- ✨(frontend) add participant color gradient when camera is off #1490
- ✨(all) allow forcing SSO display name for authenticated users
- ➕(frontend) install vite-plugin-static-copy for MediaPipe WASM assets
-
 ### Changed

 - 🗑️(settings) deprecate SUMMARY_SERVICE_VERSION=1
 - ⬆️(mail) update mjml to v5 and @html-to/text-cli
- 🚸(frontend) initialize the join input name with the persisted full name
- ♻️(frontend) refactor background processors to use the new API
- ♻️(frontend) inline model weights to avoid loading them from remote
- ♻️(frontend) inline MediaPipe WASM modules to avoid loading from remote
- ⬆️(frontend) upgrade posthog-js from 1.387.0 to 1.391.2
- ⬆️(frontend) upgrade react-stately from 3.47.0 to 3.48.0
- ⬆️(frontend) upgrade react-aria from 3.49.0 to 3.50.0
- ⬆️(frontend) upgrade react-aria-components from 1.18.0 to 1.19.0

 ### Fixed

 - 🩹(backend) identify externally provisioned users to PostHog
- 🐛(backend) fix info panel crash for unregistered rooms
- ♿️(frontend) focus side panel container on open #1452
-
-### Added
-
- ✨(frontend) add screen share zoom controls #1498

 ## [1.23.0] - 2026-07-08

@@ -80,7 +59,6 @@ and this project adheres to
 - ✨(backend) add fallback to save recordings without S3/MinIO webhooks
 - 🩹(frontend) enable screen share button in PiP #1458
 - 🐛(backend) support unencoded S3 notification object keys #1455
- ✨(frontend) prioritize screen share in picture-in-picture layout #1467

 ### Changed

@@ -37,7 +37,7 @@ RUN --mount=type=cache,target=/root/.cache/uv \
  uv sync --locked --no-dev

 # ---- mails ----
-FROM node:22 AS mail-builder
+FROM node:20 AS mail-builder

 COPY ./src/mail /mail/app

@@ -402,14 +402,7 @@ class RecordingAdmin(admin.ModelAdmin):
    """Recording admin interface declaration."""

    inlines = (RecordingAccessInline,)
-    search_fields = [
-        "status",
-        "=id",
-        "worker_id",
-        "room__slug",
-        "=room__id",
-        "accesses__user__email",
-    ]
+    search_fields = ["status", "=id", "worker_id", "room__slug", "=room__id"]
    list_display = (
        "id",
        "status",
@@ -68,9 +68,6 @@ def get_frontend_configuration(request):
            "enable_firefox_proxy_workaround": settings.LIVEKIT_ENABLE_FIREFOX_PROXY_WORKAROUND,
            "default_sources": settings.LIVEKIT_DEFAULT_SOURCES,
        },
-        "authenticated_users_can_edit_display_name": (
-            settings.AUTHENTICATED_PARTICIPANTS_CAN_EDIT_DISPLAY_NAME
-        ),
    }
    frontend_configuration.update(settings.FRONTEND_CONFIGURATION)
    return Response(frontend_configuration)
@@ -92,7 +92,6 @@ from core.services.subtitle import SubtitleException, SubtitleService
 from core.tasks.file import process_file_deletion

 from ..authentication.livekit import LiveKitTokenAuthentication
-from ..models import RoomAccessLevel
 from . import permissions, serializers, throttling
 from .feature_flag import FeatureFlag

@@ -268,9 +267,6 @@ class RoomViewSet(
            username = request.query_params.get("username", None)
            data = {
                "id": None,
-                "slug": slug,
-                "is_administrable": False,
-                "access_level": RoomAccessLevel.PUBLIC,
                "livekit": {
                    "url": settings.LIVEKIT_CONFIGURATION["url"],
                    "room": slug,
@@ -130,9 +130,6 @@ def test_api_rooms_retrieve_anonymous_unregistered_allowed(mock_token):
    assert response.status_code == 200
    assert response.json() == {
        "id": None,
-        "slug": "unregistered-room",
-        "access_level": "public",
-        "is_administrable": False,
        "livekit": {
            "url": "test_url_value",
            "room": "unregistered-room",
@@ -165,9 +162,6 @@ def test_api_rooms_retrieve_anonymous_unregistered_allowed_not_normalized(mock_t
    assert response.status_code == 200
    assert response.json() == {
        "id": None,
-        "slug": "reunion",
-        "access_level": "public",
-        "is_administrable": False,
        "livekit": {
            "url": "test_url_value",
            "room": "reunion",
@@ -2,109 +2,13 @@
 Test utils functions
 """

-# pylint: disable=W0621
 import json
 from unittest import mock

-from django.conf import settings
-from django.contrib.auth.models import AnonymousUser
-
-import jwt
 import pytest
 from livekit.api import TwirpError

-from core.factories import UserFactory
-from core.utils import (
-    NotificationError,
-    create_livekit_client,
-    generate_token,
-    notify_participants,
-)
-
-pytestmark = pytest.mark.django_db
-
-
-def decode_token(token: str) -> dict:
-    """Decode a LiveKit JWT access token for inspection."""
-    return jwt.decode(
-        token,
-        settings.LIVEKIT_CONFIGURATION["api_secret"],
-        algorithms=["HS256"],
-    )
-
-
-def test_generate_token_authenticated_uses_full_name():
-    """The token's display name should default to the user's full name."""
-    user = UserFactory(full_name="Jane Doe")
-
-    token = generate_token(room="my-room", user=user)
-
-    claims = decode_token(token)
-    assert claims["name"] == "Jane Doe"
-    assert claims["sub"] == str(user.sub)
-
-
-def test_generate_token_authenticated_fallback_user_representation():
-    """
-    When the user has no full name, the token's display name should fall back
-    to the user's string representation.
-    """
-    user = UserFactory(full_name=None)
-
-    token = generate_token(room="my-room", user=user)
-
-    claims = decode_token(token)
-    assert claims["name"] == str(user)
-
-
-def test_generate_token_explicit_username_overrides_default():
-    """An explicitly provided username should take precedence over the full name."""
-    user = UserFactory(full_name="Jane Doe")
-
-    token = generate_token(room="my-room", user=user, username="Custom Name")
-
-    claims = decode_token(token)
-    assert claims["name"] == "Custom Name"
-
-
-def test_authenticated_username_ignored_when_editing_disabled(settings):
-    """With editing disabled, an authenticated user's username is ignored."""
-    settings.AUTHENTICATED_PARTICIPANTS_CAN_EDIT_DISPLAY_NAME = False
-    user = UserFactory(full_name="Jane Doe")
-    token = generate_token(room="my-room", user=user, username="Custom Name")
-    claims = decode_token(token)
-    assert claims["name"] == "Jane Doe"
-
-
-def test_authenticated_default_name_unaffected_when_editing_disabled(settings):
-    """Disabling editing doesn't disturb the default full-name path."""
-    settings.AUTHENTICATED_PARTICIPANTS_CAN_EDIT_DISPLAY_NAME = False
-    user = UserFactory(full_name="Jane Doe")
-    token = generate_token(room="my-room", user=user)
-    claims = decode_token(token)
-    assert claims["name"] == "Jane Doe"
-
-
-def test_anonymous_uses_username_when_provided():
-    """An anonymous user's provided username is used as the display name."""
-    token = generate_token(room="my-room", user=AnonymousUser(), username="Guest42")
-    claims = decode_token(token)
-    assert claims["name"] == "Guest42"
-
-
-def test_anonymous_username_used_even_when_editing_disabled(settings):
-    """The setting governs authenticated users only; anonymous can still set a name."""
-    settings.AUTHENTICATED_PARTICIPANTS_CAN_EDIT_DISPLAY_NAME = False
-    token = generate_token(room="my-room", user=AnonymousUser(), username="Guest42")
-    claims = decode_token(token)
-    assert claims["name"] == "Guest42"
-
-
-def test_anonymous_falls_back_to_anonymous_label():
-    """With no username, an anonymous user is labelled 'Anonymous'."""
-    token = generate_token(room="my-room", user=AnonymousUser())
-    claims = decode_token(token)
-    assert claims["name"] == "Anonymous"
+from core.utils import NotificationError, create_livekit_client, notify_participants


@mock.patch("asyncio.get_running_loop")
@@ -109,16 +109,11 @@ def generate_token(
        default_username = "Anonymous"
    else:
        identity = str(user.sub)
-        default_username = user.full_name or str(user)
+        default_username = str(user)

    if color is None:
        color = generate_color(identity)

-    can_edit = (
-        settings.AUTHENTICATED_PARTICIPANTS_CAN_EDIT_DISPLAY_NAME or user.is_anonymous
-    )
-    display_name = (username or default_username) if can_edit else default_username
-
    token = (
        AccessToken(
            api_key=settings.LIVEKIT_CONFIGURATION["api_key"],
@@ -126,7 +121,7 @@ def generate_token(
        )
        .with_grants(video_grants)
        .with_identity(identity)
-        .with_name(display_name)
+        .with_name(username or default_username)
        .with_attributes(
            {"color": color, "room_admin": "true" if is_admin_or_owner else "false"}
        )
@@ -671,11 +671,6 @@ class Base(Configuration):
        environ_name="PARTICIPANT_FORBIDDEN_PERMISSION_FIELDS",
        environ_prefix=None,
    )
-    AUTHENTICATED_PARTICIPANTS_CAN_EDIT_DISPLAY_NAME = values.BooleanValue(
-        True,
-        environ_name="AUTHENTICATED_PARTICIPANTS_CAN_EDIT_DISPLAY_NAME",
-        environ_prefix=None,
-    )

    # Recording settings
    RECORDING_ENABLE = values.BooleanValue(
@@ -15,7 +15,6 @@
        "@livekit/components-react": "2.9.21",
        "@livekit/components-styles": "1.2.0",
        "@livekit/track-processors": "0.7.2",
-        "@mediapipe/tasks-vision": "0.10.14",
        "@pandacss/preset-panda": "1.11.3",
        "@react-types/overlays": "3.10.0",
        "@remixicon/react": "4.9.0",
@@ -30,13 +29,13 @@
        "i18next-parser": "9.4.0",
        "i18next-resources-to-backend": "1.2.1",
        "livekit-client": "2.19.2",
-        "posthog-js": "1.391.2",
+        "posthog-js": "1.387.0",
        "react": "18.3.1",
-        "react-aria": "3.50.0",
-        "react-aria-components": "1.19.0",
+        "react-aria": "3.49.0",
+        "react-aria-components": "1.18.0",
        "react-dom": "18.3.1",
        "react-i18next": "17.0.8",
-        "react-stately": "3.48.0",
+        "react-stately": "3.47.0",
        "use-sound": "5.0.0",
        "valtio": "2.3.2",
        "wouter": "3.10.0"
@@ -64,7 +63,6 @@
        "typescript": "6.0.3",
        "typescript-eslint": "8.60.1",
        "vite": "8.0.14",
-        "vite-plugin-static-copy": "4.1.1",
        "vite-plugin-svgr": "5.2.0"
      }
    },
@@ -112,62 +110,6 @@
        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
      }
    },
-    "node_modules/@adobe/react-spectrum/node_modules/react-aria": {
-      "version": "3.49.0",
-      "resolved": "https://registry.npmjs.org/react-aria/-/react-aria-3.49.0.tgz",
-      "integrity": "sha512-4+oK9FwJQWYhyA5zLfj/feOGY0zZbkE1muoF4gyxMroHVypjcYaRSTlJwvxph2zIlxt757KX6xIK2wJ5Aw1Kog==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@internationalized/date": "^3.12.2",
-        "@internationalized/number": "^3.6.7",
-        "@internationalized/string": "^3.2.9",
-        "@react-types/shared": "^3.35.0",
-        "@swc/helpers": "^0.5.0",
-        "aria-hidden": "^1.2.3",
-        "clsx": "^2.0.0",
-        "react-stately": "3.47.0",
-        "use-sync-external-store": "^1.6.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
-        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
-      }
-    },
-    "node_modules/@adobe/react-spectrum/node_modules/react-aria-components": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/react-aria-components/-/react-aria-components-1.18.0.tgz",
-      "integrity": "sha512-FhRQjuDkH4WhgFv+O2sYTzK3JzdZTGpBeaqfRlfTo+DcSZzD8elJEkytHe7SDpcexVKeire8NVd7OruZHfCVoA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@internationalized/date": "^3.12.2",
-        "@react-types/shared": "^3.35.0",
-        "@swc/helpers": "^0.5.0",
-        "client-only": "^0.0.1",
-        "react-aria": "3.49.0",
-        "react-stately": "3.47.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
-        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
-      }
-    },
-    "node_modules/@adobe/react-spectrum/node_modules/react-stately": {
-      "version": "3.47.0",
-      "resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.47.0.tgz",
-      "integrity": "sha512-H3ar+SOWP920EbVg7qWfP3fZjZiwhlEJAEJQqjt+w8oKijCwFgr0+R4941PIHscOXRNRvEOjvWilitImC0DdBg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@internationalized/date": "^3.12.2",
-        "@internationalized/number": "^3.6.7",
-        "@internationalized/string": "^3.2.9",
-        "@react-types/shared": "^3.35.0",
-        "@swc/helpers": "^0.5.0",
-        "use-sync-external-store": "^1.6.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
-      }
-    },
    "node_modules/@babel/code-frame": {
      "version": "7.29.0",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
@@ -1810,9 +1752,9 @@
      }
    },
    "node_modules/@react-types/shared": {
-      "version": "3.36.0",
-      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.36.0.tgz",
-      "integrity": "sha512-DkP/H0C2YjjS7gZWKNqOmU8a16qHPjQNdzMwmTq9SzplM6Iw0kVMTZ0OIoe6FOgGqa+FwMsE2QbPjh/n3g/jXQ==",
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.35.0.tgz",
+      "integrity": "sha512-iNWvuzEwANttpQpdlu8nPBtdHb0mcCMj1ZTH//iRB5E/14IAnyRlR25rxH7pNLyzHINsPGEKnWvpwDMCT6vziQ==",
      "license": "Apache-2.0",
      "peerDependencies": {
        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
@@ -3250,19 +3192,6 @@
        "node": ">=6.0.0"
      }
    },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
    "node_modules/bl": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/bl/-/bl-5.1.0.tgz",
@@ -7165,19 +7094,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/is-boolean-object": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
@@ -8759,19 +8675,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/p-map": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.5.tgz",
-      "integrity": "sha512-e8vJF4XdVkzqqSHguEMz41mQO1wKwxKm5ENrUJQUu9kLDCtn83cxbyHZcszr4QC5zEA7WffRRC4gsTecC7J9oA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
    "node_modules/package-manager-detector": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.6.0.tgz",
@@ -9130,19 +9033,19 @@
      "license": "MIT"
    },
    "node_modules/posthog-js": {
-      "version": "1.391.2",
-      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.391.2.tgz",
-      "integrity": "sha512-q0DZN6ljchSnAFJIXf+sQFTPlsLjTlRa+TvrL+QRb6413BGtib/MNiQy1bnwLKt8KR+f6xJYvkqdLyty9s4Aww==",
+      "version": "1.387.0",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.387.0.tgz",
+      "integrity": "sha512-Pv1jUMySMN62zoAxdJBJPV8n62lkHdjuWhpeU7izczc5Dqbx3hhqO2hkrNTI8Yx1ezmWk2qUHZs03FuOBubdFQ==",
      "license": "SEE LICENSE IN LICENSE",
      "dependencies": {
-        "@posthog/core": "^1.35.3",
-        "@posthog/types": "^1.390.2",
+        "@posthog/core": "^1.33.0",
+        "@posthog/types": "^1.387.0",
        "core-js": "^3.38.1",
        "dompurify": "^3.3.2",
        "fflate": "^0.4.8",
-        "preact": "^10.29.2",
+        "preact": "^10.28.2",
        "query-selector-shadow-dom": "^1.0.1",
-        "web-vitals": "^5.3.0"
+        "web-vitals": "^5.1.0"
      }
    },
    "node_modules/powershell-utils": {
@@ -9159,21 +9062,13 @@
      }
    },
    "node_modules/preact": {
-      "version": "10.29.7",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.29.7.tgz",
-      "integrity": "sha512-DCHYrK/B10yUD3ZjLfhZ3WIE/9Vf9VFUODcRE2dRomTYDpJk6z6L9wecSfhfE6M9ZTHUdyQkoC46arIDhEV84Q==",
+      "version": "10.28.3",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.28.3.tgz",
+      "integrity": "sha512-tCmoRkPQLpBeWzpmbhryairGnhW9tKV6c6gr/w+RhoRoKEJwsjzipwp//1oCpGPOchvSLaAPlpcJi9MwMmoPyA==",
      "license": "MIT",
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/preact"
-      },
-      "peerDependencies": {
-        "preact-render-to-string": ">=5"
-      },
-      "peerDependenciesMeta": {
-        "preact-render-to-string": {
-          "optional": true
-        }
      }
    },
    "node_modules/prelude-ls": {
@@ -9380,19 +9275,19 @@
      }
    },
    "node_modules/react-aria": {
-      "version": "3.50.0",
-      "resolved": "https://registry.npmjs.org/react-aria/-/react-aria-3.50.0.tgz",
-      "integrity": "sha512-S0Os6QZk33fzUAKu1QLT9afoUaCBt1ZNdoiq0n2YMVgKIdNIQS8zxiZ8O9hYE6QyDkHKjD6q39LQZ+qaSAIgjw==",
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/react-aria/-/react-aria-3.49.0.tgz",
+      "integrity": "sha512-4+oK9FwJQWYhyA5zLfj/feOGY0zZbkE1muoF4gyxMroHVypjcYaRSTlJwvxph2zIlxt757KX6xIK2wJ5Aw1Kog==",
      "license": "Apache-2.0",
      "dependencies": {
        "@internationalized/date": "^3.12.2",
        "@internationalized/number": "^3.6.7",
        "@internationalized/string": "^3.2.9",
-        "@react-types/shared": "^3.36.0",
+        "@react-types/shared": "^3.35.0",
        "@swc/helpers": "^0.5.0",
        "aria-hidden": "^1.2.3",
        "clsx": "^2.0.0",
-        "react-stately": "3.48.0",
+        "react-stately": "3.47.0",
        "use-sync-external-store": "^1.6.0"
      },
      "peerDependencies": {
@@ -9401,17 +9296,17 @@
      }
    },
    "node_modules/react-aria-components": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/react-aria-components/-/react-aria-components-1.19.0.tgz",
-      "integrity": "sha512-2smSS5nqJ8cGYMQezuUXveZm7eMyHCqTN6mDpylQBYLYbdF5dxCCuW1DHn1VKLe1DybSfPvX/cZtJlDmvFfn8A==",
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/react-aria-components/-/react-aria-components-1.18.0.tgz",
+      "integrity": "sha512-FhRQjuDkH4WhgFv+O2sYTzK3JzdZTGpBeaqfRlfTo+DcSZzD8elJEkytHe7SDpcexVKeire8NVd7OruZHfCVoA==",
      "license": "Apache-2.0",
      "dependencies": {
        "@internationalized/date": "^3.12.2",
-        "@react-types/shared": "^3.36.0",
+        "@react-types/shared": "^3.35.0",
        "@swc/helpers": "^0.5.0",
        "client-only": "^0.0.1",
-        "react-aria": "3.50.0",
-        "react-stately": "3.48.0"
+        "react-aria": "3.49.0",
+        "react-stately": "3.47.0"
      },
      "peerDependencies": {
        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
@@ -9465,15 +9360,15 @@
      "license": "MIT"
    },
    "node_modules/react-stately": {
-      "version": "3.48.0",
-      "resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.48.0.tgz",
-      "integrity": "sha512-ImicSAG+lTotAe5izcs1fz49Zk48w7pDusqYg04WaPhCoej8BJ24soMu3iLXIrsi273s4P1gZrYGrqReMfgEEA==",
+      "version": "3.47.0",
+      "resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.47.0.tgz",
+      "integrity": "sha512-H3ar+SOWP920EbVg7qWfP3fZjZiwhlEJAEJQqjt+w8oKijCwFgr0+R4941PIHscOXRNRvEOjvWilitImC0DdBg==",
      "license": "Apache-2.0",
      "dependencies": {
        "@internationalized/date": "^3.12.2",
        "@internationalized/number": "^3.6.7",
        "@internationalized/string": "^3.2.9",
-        "@react-types/shared": "^3.36.0",
+        "@react-types/shared": "^3.35.0",
        "@swc/helpers": "^0.5.0",
        "use-sync-external-store": "^1.6.0"
      },
@@ -11242,80 +11137,6 @@
        }
      }
    },
-    "node_modules/vite-plugin-static-copy": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-4.1.1.tgz",
-      "integrity": "sha512-GrlA8YklrAfSyxJ4M3fdQLOo9oNkp56IM9FYgX/WtEgeIFkPwhu4wzpufBCIuNKCa6Fn77FkRdYxkHqV0FwjAw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "chokidar": "^3.6.0",
-        "p-map": "^7.0.4",
-        "picocolors": "^1.1.1",
-        "tinyglobby": "^0.2.17"
-      },
-      "engines": {
-        "node": "^22.0.0 || >=24.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/sapphi-red"
-      },
-      "peerDependencies": {
-        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      }
-    },
-    "node_modules/vite-plugin-static-copy/node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/vite-plugin-static-copy/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/vite-plugin-static-copy/node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
    "node_modules/vite-plugin-svgr": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-5.2.0.tgz",
@@ -11649,9 +11470,9 @@
      }
    },
    "node_modules/web-vitals": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-5.3.0.tgz",
-      "integrity": "sha512-q6LWsLatGYZp5VGBIOvbTj6JBV2nOmC8KvWztXBmwJcfFAzhwKwbOxhUH306XY3CcaZDUlSmSuNPBsCn0bFu+g==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-5.1.0.tgz",
+      "integrity": "sha512-ArI3kx5jI0atlTtmV0fWU3fjpLmq/nD3Zr1iFFlJLaqa5wLBkUSzINwBPySCX/8jRyjlmy1Volw1kz1g9XE4Jg==",
      "license": "Apache-2.0"
    },
    "node_modules/webrtc-adapter": {
@@ -17,12 +17,11 @@
  "dependencies": {
    "@fontsource-variable/atkinson-hyperlegible-next": "5.2.6",
    "@fontsource-variable/lexend": "5.2.11",
-    "@fontsource/opendyslexic": "5.2.5",
    "@libreaudio/la-call": "0.1.4",
+    "@fontsource/opendyslexic": "5.2.5",
    "@livekit/components-react": "2.9.21",
    "@livekit/components-styles": "1.2.0",
    "@livekit/track-processors": "0.7.2",
-    "@mediapipe/tasks-vision": "0.10.14",
    "@pandacss/preset-panda": "1.11.3",
    "@react-types/overlays": "3.10.0",
    "@remixicon/react": "4.9.0",
@@ -37,13 +36,13 @@
    "i18next-parser": "9.4.0",
    "i18next-resources-to-backend": "1.2.1",
    "livekit-client": "2.19.2",
-    "posthog-js": "1.391.2",
+    "posthog-js": "1.387.0",
    "react": "18.3.1",
-    "react-aria": "3.50.0",
-    "react-aria-components": "1.19.0",
+    "react-aria": "3.49.0",
+    "react-aria-components": "1.18.0",
    "react-dom": "18.3.1",
    "react-i18next": "17.0.8",
-    "react-stately": "3.48.0",
+    "react-stately": "3.47.0",
    "use-sound": "5.0.0",
    "valtio": "2.3.2",
    "wouter": "3.10.0"
@@ -71,7 +70,6 @@
    "typescript": "6.0.3",
    "typescript-eslint": "8.60.1",
    "vite": "8.0.14",
-    "vite-plugin-static-copy": "4.1.1",
    "vite-plugin-svgr": "5.2.0"
  }
 }
@@ -58,7 +58,6 @@ export interface ApiConfig {
  transcription_destination?: string
  max_participants_for_sound: number
  auto_mute_on_join_threshold: number
-  authenticated_users_can_edit_display_name: boolean
 }

 const fetchConfig = (): Promise<ApiConfig> => {
@@ -9,11 +9,10 @@ import { useState } from 'react'

 import { menuRecipe } from '@/primitives/menuRecipe'
 import { ApiRoom } from '@/features/rooms/api/ApiRoom'
-import { useSnapshot } from 'valtio'
-import { userStore } from '@/stores/user'
+import { loadUserChoices } from '@livekit/components-core'

 export const CreateMeetingMenu = () => {
-  const { username } = useSnapshot(userStore)
+  const { username } = loadUserChoices()

  const { t } = useTranslation('home')
  const { mutateAsync: createRoom } = useCreateRoom()
@@ -26,7 +26,6 @@ export const PipFocusLayout = memo(
            <ParticipantTile
              key={getTrackKey(mainTrack)}
              trackRef={mainTrack}
-              disableTileControls
            />
          </MainSlot>
        )}
@@ -35,7 +34,6 @@ export const PipFocusLayout = memo(
            <ParticipantTile
              key={getTrackKey(thumbnailTrack)}
              trackRef={thumbnailTrack}
-              disableTileControls
            />
          </Thumbnail>
        )}
@@ -50,10 +48,9 @@ const FocusContainer = styled('div', {
    position: 'relative',
    width: '100%',
    height: '100%',
-    borderRadius: '8px',
+    borderRadius: '4px',
    overflow: 'hidden',
    backgroundColor: 'primaryDark.100',
-    boxSizing: 'border-box',
  },
 })

@@ -61,8 +58,6 @@ const MainSlot = styled('div', {
  base: {
    width: '100%',
    height: '100%',
-    borderRadius: '8px',
-    overflow: 'hidden',
    '& .lk-participant-media-video': {
      objectFit: 'contain',
    },
@@ -72,13 +67,13 @@ const MainSlot = styled('div', {
 const Thumbnail = styled('div', {
  base: {
    position: 'absolute',
-    right: '1.25rem',
-    bottom: '1.25rem',
+    right: '1rem',
+    bottom: '1rem',
    width: '42%',
    maxWidth: '220px',
    minWidth: '140px',
    aspectRatio: '16 / 9',
-    borderRadius: '8px',
+    borderRadius: '4px',
    overflow: 'hidden',
    boxShadow: 'md',
    zIndex: 2,
@@ -41,7 +41,7 @@ export const PipGridLayout = memo(({ tracks }: PipGridLayoutProps) => {
    <GridContainer ref={containerRef} style={gridStyle}>
      {tracks.map((track, index) => (
        <GridCell key={getTrackKey(track)} style={placements[index]}>
-          <ParticipantTile trackRef={track} disableTileControls />
+          <ParticipantTile trackRef={track} />
        </GridCell>
      ))}
    </GridContainer>
@@ -54,8 +54,7 @@ const GridContainer = styled('div', {
    width: '100%',
    height: '100%',
    display: 'grid',
-    gap: '0.5rem',
-    boxSizing: 'border-box',
+    gap: '0.25rem',
  },
 })

@@ -64,7 +63,7 @@ const GridCell = styled('div', {
    position: 'relative',
    minWidth: 0,
    minHeight: 0,
-    borderRadius: '8px',
+    borderRadius: '4px',
    overflow: 'hidden',
    backgroundColor: 'primaryDark.100',
    // Paint on own layer so FLIP transforms don't trigger layout thrash.
@@ -1,97 +0,0 @@
-import { memo } from 'react'
-import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
-import { styled } from '@/styled-system/jsx'
-import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
-import { getTrackKey } from '../../utils/pipTrackSelection'
-
-type PipScreenShareLayoutProps = {
-  screenShareTrack: TrackReferenceOrPlaceholder
-  cameraTracks: TrackReferenceOrPlaceholder[]
-}
-
-/**
- * Layout when a screen share is active.
- * Camera tiles are shown as a compact row at the top; the screen share occupies
- * the remaining space below, much larger than the camera tiles.
- */
-export const PipScreenShareLayout = memo(
-  ({ screenShareTrack, cameraTracks }: PipScreenShareLayoutProps) => {
-    return (
-      <LayoutContainer>
-        {cameraTracks.length > 0 && (
-          <CameraTilesRow>
-            {cameraTracks.map((track) => (
-              <CameraTile key={getTrackKey(track)}>
-                <ParticipantTile trackRef={track} disableTileControls />
-              </CameraTile>
-            ))}
-          </CameraTilesRow>
-        )}
-        <ScreenShareSlot>
-          <ParticipantTile trackRef={screenShareTrack} disableTileControls />
-        </ScreenShareSlot>
-      </LayoutContainer>
-    )
-  }
-)
-PipScreenShareLayout.displayName = 'PipScreenShareLayout'
-
-const LayoutContainer = styled('div', {
-  base: {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '0.5rem',
-    boxSizing: 'border-box',
-    overflow: 'hidden',
-  },
-})
-
-const CameraTilesRow = styled('div', {
-  base: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    gap: '0.5rem',
-    flexShrink: 0,
-    height: '22%',
-    minHeight: '60px',
-    maxHeight: '120px',
-  },
-})
-
-const CameraTile = styled('div', {
-  base: {
-    position: 'relative',
-    flex: '0 1 auto',
-    height: '100%',
-    aspectRatio: '16 / 9',
-    minWidth: 0,
-    borderRadius: '8px',
-    overflow: 'hidden',
-    backgroundColor: 'primaryDark.100',
-    '& .lk-participant-tile': {
-      width: '100%',
-      height: '100%',
-    },
-  },
-})
-
-const ScreenShareSlot = styled('div', {
-  base: {
-    position: 'relative',
-    flex: 1,
-    minHeight: 0,
-    borderRadius: '8px',
-    overflow: 'hidden',
-    backgroundColor: 'primaryDark.100',
-    '& .lk-participant-tile': {
-      width: '100%',
-      height: '100%',
-    },
-    '& .lk-participant-media-video': {
-      objectFit: 'contain',
-    },
-  },
-})
@@ -1,11 +1,10 @@
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { usePagination, useTracks } from '@livekit/components-react'
 import { RoomEvent, Track } from 'livekit-client'
 import { styled } from '@/styled-system/jsx'
 import { PipFocusLayout } from './PipFocusLayout'
 import { PipGridLayout } from './PipGridLayout'
 import { PipPagination } from './PipPagination'
-import { PipScreenShareLayout } from './PipScreenShareLayout'
 import { StageFrame } from './StageFrame'
 import { MAX_PIP_TILES } from '../../utils/pipGrid'
 import {
@@ -14,12 +13,9 @@ import {
 } from '@livekit/components-core'

 /**
- * PipStage picks between three layouts:
- *   - Screen share mode (any screen share active):
- *     small camera tiles in a row at the top, large screen share below.
- *   - Grid mode  (3+ camera tracks, no screen share): adaptive tiling.
- *   - Focus mode (≤ 2 camera tracks, no screen share): one main track
- *     + one thumbnail overlay.
+ * PipStage picks between two layouts based on track count:
+ *   - Focus mode (≤ 2 tracks): one main track + one thumbnail overlay.
+ *   - Grid mode  (3+ tracks):  adaptive tiling.
 */
 export const PipStage = () => {
  const tracks = useTracks(
@@ -45,55 +41,51 @@ export const PipStage = () => {
    [tracks]
  )

-  // Cap camera tiles in screen-share mode. Called unconditionally for hook rules.
-  const paginatedCameraTracks = usePagination(MAX_PIP_TILES - 1, cameraTracks)
+  // Grid mode order: screen share leads, then cameras (already ordered by
+  // active speaker via the `ActiveSpeakersChanged` update above).
+  const gridTracks = useMemo(
+    () =>
+      screenShareTrack ? [screenShareTrack, ...cameraTracks] : cameraTracks,
+    [screenShareTrack, cameraTracks]
+  )

-  // Cap the grid at MAX_PIP_TILES per page for the non-screenshare grid mode.
-  const pagination = usePagination(MAX_PIP_TILES, cameraTracks)
+  // Cap the grid at MAX_PIP_TILES per page. `usePagination` keeps the visible
+  // page visually stable (active/recent speakers stay put) via its internal
+  // `useVisualStableUpdate`. Called unconditionally to respect hook rules.
+  const pagination = usePagination(MAX_PIP_TILES, gridTracks)

  if (tracks.length === 0) return null

-  // Screen share active
-  if (screenShareTrack) {
-    // Solo presenter: screen share fills the area, camera as small thumbnail
-    if (cameraTracks.length <= 1) {
-      return (
+  /**
+   * The focus layout shows one main track with one thumbnail overlay,
+   * so it can only fit 2 tracks. Beyond that we switch to the grid.
+   */
+  if (gridTracks.length > 2) {
+    return (
+      <StageWrapper>
        <StageFrame>
-          <PipFocusLayout
-            mainTrack={screenShareTrack}
-            thumbnailTrack={cameraTracks[0]}
-          />
+          <PipGridLayout tracks={pagination.tracks} />
        </StageFrame>
-      )
-    }
-    // Multiple cameras: camera row at top, screen share below
-    return (
-      <PaginatedStage pagination={paginatedCameraTracks}>
-        <PipScreenShareLayout
-          screenShareTrack={screenShareTrack}
-          cameraTracks={paginatedCameraTracks.tracks}
+        <PipPagination
+          totalPageCount={pagination.totalPageCount}
+          currentPage={pagination.currentPage}
+          nextPage={pagination.nextPage}
+          prevPage={pagination.prevPage}
        />
-      </PaginatedStage>
+      </StageWrapper>
    )
  }

-  // 3+ camera tracks → adaptive grid
-  if (cameraTracks.length > 2) {
-    return (
-      <PaginatedStage pagination={pagination}>
-        <PipGridLayout tracks={pagination.tracks} />
-      </PaginatedStage>
-    )
-  }
-
-  // ≤ 2 camera tracks → focus layout (main + optional thumbnail)
  const localCameraTrack = cameraTracks.find(
    (track) => track.participant?.isLocal
  )
+
  const remoteCameraTrack = cameraTracks.find(
    (track) => !track.participant?.isLocal
  )
-  const mainTrack = remoteCameraTrack ?? localCameraTrack
+
+  const mainTrack = screenShareTrack ?? remoteCameraTrack ?? localCameraTrack
+
  const thumbnailTrack =
    mainTrack === localCameraTrack ? undefined : localCameraTrack

@@ -104,31 +96,6 @@ export const PipStage = () => {
  )
 }

-type PaginationResult = {
-  totalPageCount: number
-  currentPage: number
-  nextPage: () => void
-  prevPage: () => void
-}
-
-const PaginatedStage = ({
-  pagination,
-  children,
-}: {
-  pagination: PaginationResult
-  children: React.ReactNode
-}) => (
-  <StageWrapper>
-    <StageFrame>{children}</StageFrame>
-    <PipPagination
-      totalPageCount={pagination.totalPageCount}
-      currentPage={pagination.currentPage}
-      nextPage={pagination.nextPage}
-      prevPage={pagination.prevPage}
-    />
-  </StageWrapper>
-)
-
 const StageWrapper = styled('div', {
  base: {
    display: 'flex',
@@ -25,8 +25,8 @@ const Container = styled('div', {
    flex: 1,
    minWidth: 0,
    minHeight: 0,
-    padding: '0.5rem',
-    boxSizing: 'border-box',
+    marginLeft: '0.5rem',
+    marginRight: '0.5rem',
    borderRadius: '4px',
    overflow: 'hidden',
  },
@@ -22,7 +22,7 @@ export type ApiRoom = {
  id: string
  name: string
  slug: string
-  pin_code?: string
+  pin_code: string
  is_administrable: boolean
  access_level: ApiAccessLevel
  livekit?: ApiLiveKit
@@ -36,7 +36,6 @@ import { PictureInPictureConference } from '@/features/pip/components/PictureInP
 import { notifyAutoMutedOnJoin } from '@/features/notifications/utils'
 import { useSnapshot } from 'valtio'
 import { userPreferencesStore } from '@/stores/userPreferences'
-import { userStore } from '@/stores/user'

 export const Conference = ({
  roomId,
@@ -54,8 +53,6 @@ export const Conference = ({
    userChoices: LocalUserChoices
  }

-  const { username } = useSnapshot(userStore)
-
  useEffect(() => {
    posthog.capture('visit-room', { slug: roomId })
  }, [roomId, posthog])
@@ -86,10 +83,10 @@ export const Conference = ({
    queryFn: () =>
      fetchRoom({
        roomId: roomId as string,
-        username: username,
+        username: userConfig.username,
      }).catch((error) => {
        if (error.statusCode == '404') {
-          createRoom({ slug: roomId, username })
+          createRoom({ slug: roomId, username: userConfig.username })
        }
      }),
    retry: false,
@@ -42,17 +42,14 @@ import {
  saveAudioInputDeviceId,
  saveAudioInputEnabled,
  saveAudioOutputDeviceId,
+  saveUsername,
  saveVideoInputDeviceId,
  saveVideoInputEnabled,
  userChoicesStore,
 } from '@/stores/userChoices'

-import { saveUsername, userStore } from '@/stores/user'
-
 import { useCannotUseDevice } from '../livekit/hooks/useCannotUseDevice'
 import { useSnapshot } from 'valtio'
-import { useUser } from '@/features/auth/api/useUser'
-import { useConfig } from '@/api/useConfig'

 const onError = (e: Error) => console.error('ERROR', e)

@@ -117,9 +114,6 @@ export const Join = ({
 }) => {
  const { t } = useTranslation('rooms', { keyPrefix: 'join' })

-  const { data: configData } = useConfig()
-  const { isLoggedIn, user } = useUser()
-
  const {
    audioEnabled,
    videoEnabled,
@@ -127,10 +121,9 @@ export const Join = ({
    audioOutputDeviceId,
    videoDeviceId,
    processorConfig,
+    username,
  } = useSnapshot(userChoicesStore)

-  const { username } = useSnapshot(userStore)
-
  const initialUserChoices = useRef<LocalUserChoices | null>(null)

  if (initialUserChoices.current === null) {
@@ -141,6 +134,7 @@ export const Join = ({
      audioOutputDeviceId,
      videoDeviceId,
      processorConfig,
+      username,
    }
  }

@@ -454,23 +448,20 @@ export const Join = ({
              <H lvl={1} margin="sm" centered>
                {t('heading')}
              </H>
-              {(!isLoggedIn ||
-                configData?.authenticated_users_can_edit_display_name) && (
-                <Field
-                  type="text"
-                  onChange={saveUsername}
-                  label={t('usernameLabel')}
-                  id="input-name"
-                  defaultValue={username || user?.full_name}
-                  validate={(value) => !value && t('errors.usernameEmpty')}
-                  wrapperProps={{
-                    noMargin: true,
-                    fullWidth: true,
-                  }}
-                  autoComplete="name"
-                  maxLength={50}
-                />
-              )}
+              <Field
+                type="text"
+                onChange={saveUsername}
+                label={t('usernameLabel')}
+                id="input-name"
+                defaultValue={username}
+                validate={(value) => !value && t('errors.usernameEmpty')}
+                wrapperProps={{
+                  noMargin: true,
+                  fullWidth: true,
+                }}
+                autoComplete="name"
+                maxLength={50}
+              />
            </VStack>
          </Form>
        )
@@ -2,7 +2,6 @@ import type { Participant } from 'livekit-client'
 import { styled } from '@/styled-system/jsx'
 import { Avatar } from '@/components/Avatar'
 import { useIsSpeaking } from '@livekit/components-react'
-import { getParticipantBackgroundGradient } from '@/features/rooms/utils/getParticipantBackgroundGradient'
 import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
 import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
 import { useMemo, useRef } from 'react'
@@ -11,6 +10,7 @@ const StyledParticipantPlaceHolder = styled('div', {
  base: {
    width: '100%',
    height: '100%',
+    backgroundColor: 'primaryDark.100',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
@@ -26,10 +26,6 @@ export const ParticipantPlaceholder = ({
 }: ParticipantPlaceholderProps) => {
  const isSpeaking = useIsSpeaking(participant)
  const participantColor = getParticipantColor(participant)
-  const backgroundGradient = useMemo(
-    () => getParticipantBackgroundGradient(participantColor),
-    [participantColor]
-  )

  const placeholderEl = useRef<HTMLDivElement>(null)
  const { width, height } = useSize(placeholderEl)
@@ -43,13 +39,7 @@ export const ParticipantPlaceholder = ({
  const initialSize = useMemo(() => Math.round(avatarSize * 0.3), [avatarSize])

  return (
-    <StyledParticipantPlaceHolder
-      ref={placeholderEl}
-      style={{
-        backgroundColor: participantColor,
-        backgroundImage: backgroundGradient,
-      }}
-    >
+    <StyledParticipantPlaceHolder ref={placeholderEl}>
      <div
        style={{
          borderRadius: '50%',
@@ -28,7 +28,6 @@ import { MutedMicIndicator } from './MutedMicIndicator'
 import { ParticipantPlaceholder } from './ParticipantPlaceholder'
 import { ParticipantTileFocus } from './ParticipantTileFocus'
 import { FullScreenShareWarning } from './FullScreenShareWarning'
-import { ScreenShareZoomableVideo } from './ScreenShareZoomableVideo'
 import { ParticipantName } from './ParticipantName'
 import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
 import { useTranslation } from 'react-i18next'
@@ -53,11 +52,8 @@ export function TrackRefContextIfNeeded(

 interface ParticipantTileExtendedProps extends ParticipantTileProps {
  disableMetadata?: boolean
-  disableTileControls?: boolean
 }

-const MOUSE_IDLE_TIME = 3000
-
 export const ParticipantTile: (
  props: ParticipantTileExtendedProps & React.RefAttributes<HTMLDivElement>
 ) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
@@ -70,7 +66,6 @@ export const ParticipantTile: (
    onParticipantClick,
    disableSpeakingIndicator,
    disableMetadata,
-    disableTileControls,
    ...htmlProps
  }: ParticipantTileExtendedProps,
  ref
@@ -112,43 +107,14 @@ export const ParticipantTile: (
  })

  const isScreenShare = trackReference.source != Track.Source.Camera
-  const isRemoteScreenShare =
-    isScreenShare && !trackReference.participant.isLocal
  const [hasKeyboardFocus, setHasKeyboardFocus] = React.useState(false)

-  // Hover + idle tracking for the focus overlay (pin, effects, mute buttons).
-  const [isTileHovered, setIsTileHovered] = React.useState(false)
-  const [isIdle, setIsIdle] = React.useState(false)
-  const idleTimerRef = React.useRef<number | null>(null)
-
-  const handleTileMouseMove = React.useCallback(() => {
-    if (idleTimerRef.current) window.clearTimeout(idleTimerRef.current)
-    idleTimerRef.current = window.setTimeout(
-      () => setIsIdle(true),
-      MOUSE_IDLE_TIME
-    )
-    setIsIdle(false)
-  }, [])
-
-  const isOverlayVisible = hasKeyboardFocus || (isTileHovered && !isIdle)
-
-  // tileRef: fullscreen target. setRefs merges it with the forwarded ref on the same node.
-  const tileRef = React.useRef<HTMLDivElement>(null)
-  const setRefs = React.useCallback(
-    (node: HTMLDivElement | null) => {
-      ;(tileRef as React.MutableRefObject<HTMLDivElement | null>).current = node
-      if (typeof ref === 'function') ref(node)
-      else if (ref)
-        (ref as React.MutableRefObject<HTMLDivElement | null>).current = node
-    },
-    [ref]
-  )
-
  const participantName = getParticipantName(trackReference.participant)
  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })

  const interactiveProps = {
    ...elementProps,
+    // Ensure the tile is focusable to expose contextual controls to keyboard users.
    tabIndex: 0,
    'aria-label': t('containerLabel', { name: participantName }),
    onFocus: (event: React.FocusEvent<HTMLDivElement>) => {
@@ -166,63 +132,30 @@ export const ParticipantTile: (
    },
  }

-  const isVideoTrack =
-    isTrackReference(trackReference) &&
-    (trackReference.publication?.kind === 'video' ||
-      trackReference.source === Track.Source.Camera ||
-      trackReference.source === Track.Source.ScreenShare)
-
-  let trackMedia: React.ReactNode = null
-  if (isVideoTrack) {
-    if (isRemoteScreenShare) {
-      trackMedia = (
-        <ScreenShareZoomableVideo
-          trackRef={trackReference}
-          tileRef={tileRef}
-          onSubscriptionStatusChanged={handleSubscribe}
-          manageSubscription={autoManageSubscription}
-        />
-      )
-    } else {
-      trackMedia = (
-        <VideoTrack
-          trackRef={trackReference}
-          onSubscriptionStatusChanged={handleSubscribe}
-          manageSubscription={autoManageSubscription}
-        />
-      )
-    }
-  } else if (isTrackReference(trackReference)) {
-    trackMedia = (
-      <AudioTrack
-        trackRef={trackReference}
-        onSubscriptionStatusChanged={handleSubscribe}
-      />
-    )
-  }
-
  return (
-    <div
-      ref={setRefs}
-      style={{ position: 'relative' }}
-      {...interactiveProps}
-      onMouseEnter={() => setIsTileHovered(true)}
-      onMouseLeave={() => {
-        setIsTileHovered(false)
-        setIsIdle(false)
-        if (idleTimerRef.current) {
-          window.clearTimeout(idleTimerRef.current)
-          idleTimerRef.current = null
-        }
-      }}
-      onMouseMove={handleTileMouseMove}
-    >
+    <div ref={ref} style={{ position: 'relative' }} {...interactiveProps}>
      <TrackRefContextIfNeeded trackRef={trackReference}>
        <ParticipantContextIfNeeded participant={trackReference.participant}>
          <FullScreenShareWarning trackReference={trackReference} />
          {children ?? (
            <>
-              {trackMedia}
+              {isTrackReference(trackReference) &&
+              (trackReference.publication?.kind === 'video' ||
+                trackReference.source === Track.Source.Camera ||
+                trackReference.source === Track.Source.ScreenShare) ? (
+                <VideoTrack
+                  trackRef={trackReference}
+                  onSubscriptionStatusChanged={handleSubscribe}
+                  manageSubscription={autoManageSubscription}
+                />
+              ) : (
+                isTrackReference(trackReference) && (
+                  <AudioTrack
+                    trackRef={trackReference}
+                    onSubscriptionStatusChanged={handleSubscribe}
+                  />
+                )
+              )}
              <div className="lk-participant-placeholder">
                <ParticipantPlaceholder
                  participant={trackReference.participant}
@@ -298,10 +231,10 @@ export const ParticipantTile: (
              )}
            </>
          )}
-          {!disableMetadata && !disableTileControls && (
+          {!disableMetadata && (
            <ParticipantTileFocus
              trackRef={trackReference}
-              isVisible={isOverlayVisible}
+              hasKeyboardFocus={hasKeyboardFocus}
            />
          )}
        </ParticipantContextIfNeeded>
@@ -2,6 +2,7 @@ import { css } from '@/styled-system/css'
 import { HStack } from '@/styled-system/jsx'
 import { Button } from '@/primitives'
 import {
+  RiFullscreenLine,
  RiImageCircleAiFill,
  RiMicLine,
  RiMicOffLine,
@@ -14,13 +15,41 @@ import {
 } from '@livekit/components-react'
 import { useTranslation } from 'react-i18next'
 import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useSidePanel } from '../hooks/useSidePanel'
+import { useFullScreen } from '../hooks/useFullScreen'
 import { type Participant, Track } from 'livekit-client'
 import { MuteAlertDialog } from './MuteAlertDialog'
 import { useMuteParticipant } from '@/features/rooms/api/muteParticipant'
 import { useCanMute } from '@/features/rooms/livekit/hooks/useCanMute'

+const ZoomButton = ({
+  trackRef,
+}: {
+  trackRef: TrackReferenceOrPlaceholder
+}) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
+  const { toggleFullScreen, isFullscreenAvailable } = useFullScreen({
+    trackRef,
+  })
+
+  if (!isFullscreenAvailable) {
+    return
+  }
+
+  return (
+    <Button
+      size="sm"
+      variant="primaryTextDark"
+      square
+      tooltip={t('fullScreen')}
+      onPress={() => toggleFullScreen()}
+    >
+      <RiFullscreenLine />
+    </Button>
+  )
+}
+
 const FocusButton = ({
  trackRef,
 }: {
@@ -98,17 +127,26 @@ const MuteButton = ({ participant }: { participant: Participant }) => {
  )
 }

+const MOUSE_IDLE_TIME = 3000
+
 export const ParticipantTileFocus = ({
  trackRef,
-  isVisible,
+  hasKeyboardFocus,
 }: {
  trackRef: TrackReferenceOrPlaceholder
-  isVisible: boolean
+  hasKeyboardFocus: boolean
 }) => {
+  const [hovered, setHovered] = useState(false)
  const [opacity, setOpacity] = useState(0)

+  const idleTimerRef = useRef<number | null>(null)
+  const [isIdleRef, setIsIdleRef] = useState(false)
+
+  const isVisible = hasKeyboardFocus || (hovered && !isIdleRef)
+
  useEffect(() => {
    if (isVisible) {
+      // Wait for next frame to ensure element is mounted
      requestAnimationFrame(() => {
        setOpacity(0.6)
      })
@@ -117,14 +155,24 @@ export const ParticipantTileFocus = ({
    }
  }, [isVisible])

+  const handleMouseMove = () => {
+    if (idleTimerRef.current) {
+      window.clearTimeout(idleTimerRef.current)
+    }
+    idleTimerRef.current = window.setTimeout(() => {
+      setIsIdleRef(true)
+    }, MOUSE_IDLE_TIME)
+    setIsIdleRef(false)
+  }
+
  const participant = trackRef.participant

  const isScreenShare = trackRef.source == Track.Source.ScreenShare
+  const isLocal = trackRef.participant.isLocal

  const canMute = useCanMute(participant)

  return (
-    // Pointer-events: none so this overlay doesn't block the zoom surface below.
    <div
      className={css({
        position: 'absolute',
@@ -135,9 +183,11 @@ export const ParticipantTileFocus = ({
        alignItems: 'center',
        width: '100%',
        height: '100%',
-        pointerEvents: 'none',
      })}
      aria-hidden={!isVisible}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onMouseMove={handleMouseMove}
    >
      {isVisible && (
        <div
@@ -147,7 +197,6 @@ export const ParticipantTileFocus = ({
            zIndex: 1,
            borderRadius: '0.25rem',
            display: 'flex',
-            pointerEvents: 'auto',
            _hover: {
              opacity: '0.95 !important',
            },
@@ -164,7 +213,7 @@ export const ParticipantTileFocus = ({
            })}
          >
            <FocusButton trackRef={trackRef} />
-            {!isScreenShare && (
+            {!isScreenShare ? (
              <>
                {participant.isLocal ? (
                  <EffectsButton />
@@ -172,6 +221,8 @@ export const ParticipantTileFocus = ({
                  canMute && <MuteButton participant={participant} />
                )}
              </>
+            ) : (
+              !isLocal && <ZoomButton trackRef={trackRef} />
            )}
          </HStack>
        </div>
@@ -1,26 +0,0 @@
-import { VideoTrack } from '@livekit/components-react'
-import { type TrackReference } from '@livekit/components-core'
-import { memo } from 'react'
-
-interface ScreenShareVideoTrackProps {
-  trackRef: TrackReference
-  onSubscriptionStatusChanged: (subscribed: boolean) => void
-  manageSubscription?: boolean
-}
-
-// Zoom/pan updates the wrapper transform only; skip VideoTrack re-renders.
-export const ScreenShareVideoTrack = memo(
-  ({
-    trackRef,
-    onSubscriptionStatusChanged,
-    manageSubscription,
-  }: ScreenShareVideoTrackProps) => (
-    <VideoTrack
-      trackRef={trackRef}
-      onSubscriptionStatusChanged={onSubscriptionStatusChanged}
-      manageSubscription={manageSubscription}
-    />
-  )
-)
-
-ScreenShareVideoTrack.displayName = 'ScreenShareVideoTrack'
@@ -1,203 +0,0 @@
-import { css } from '@/styled-system/css'
-import { HStack } from '@/styled-system/jsx'
-import { Button } from '@/primitives'
-import {
-  RiCollapseDiagonalLine,
-  RiExpandDiagonalLine,
-  RiFullscreenExitLine,
-  RiZoomInLine,
-  RiZoomOutLine,
-} from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
-import { isMacintosh } from '@/utils/livekit'
-import { srOnly } from '@/styles/a11y'
-
-interface ScreenShareZoomControlsProps {
-  containerRef: React.RefObject<HTMLDivElement | null>
-  isZoomed: boolean
-  zoomPercentage: number
-  canZoomIn: boolean
-  canZoomOut: boolean
-  onZoomIn: () => void
-  onZoomOut: () => void
-  onResetZoom: () => void
-}
-
-export const ScreenShareZoomControls = ({
-  containerRef,
-  isZoomed,
-  zoomPercentage,
-  canZoomIn,
-  canZoomOut,
-  onZoomIn,
-  onZoomOut,
-  onResetZoom,
-}: ScreenShareZoomControlsProps) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'screenShareZoom' })
-  const announce = useScreenReaderAnnounce()
-
-  const [isFullscreen, setIsFullscreen] = useState(false)
-  // Tracks whether this tile's container triggered fullscreen (vs another share's).
-  const wasThisTileFullscreen = useRef(false)
-  const [isFullscreenAvailable] = useState(
-    () => typeof document !== 'undefined' && document.fullscreenEnabled
-  )
-
-  // Covers Esc and browser UI exits, not just the toolbar button.
-  // Only this tile's instance announces to avoid duplicates with multiple shares.
-  useEffect(() => {
-    const onChange = () => {
-      const isThisTileFullscreen =
-        document.fullscreenElement === containerRef.current
-      setIsFullscreen(isThisTileFullscreen)
-
-      if (isThisTileFullscreen) {
-        wasThisTileFullscreen.current = true
-        announce(t('fullScreenEntered'), 'assertive')
-      } else if (wasThisTileFullscreen.current) {
-        wasThisTileFullscreen.current = false
-        announce(t('fullScreenExited'), 'assertive')
-      }
-    }
-    document.addEventListener('fullscreenchange', onChange)
-    return () => document.removeEventListener('fullscreenchange', onChange)
-  }, [announce, t, containerRef])
-
-  const toggleFullScreen = useCallback(async () => {
-    try {
-      if (document.fullscreenElement === containerRef.current) {
-        await document.exitFullscreen()
-      } else {
-        // Tile container so zoom controls stay visible in fullscreen.
-        await containerRef.current?.requestFullscreen()
-      }
-    } catch (error) {
-      console.error('Error toggling fullscreen:', error)
-    }
-  }, [containerRef])
-
-  const wheelShortcutVisual = isMacintosh() ? '⌘+scroll' : 'Ctrl+scroll'
-
-  return (
-    <div
-      className={css({
-        position: 'absolute',
-        bottom: '12px',
-        right: '12px',
-        zIndex: 2,
-        pointerEvents: 'auto',
-      })}
-    >
-      <HStack
-        gap={0}
-        role="toolbar"
-        aria-label={t('toolbarLabel')}
-        className={css({
-          backgroundColor: 'primaryDark.50',
-          borderRadius: '2rem',
-          padding: '0.5rem',
-          alignItems: 'center',
-          opacity: 0.7,
-          transition: 'opacity 200ms linear',
-          _hover: {
-            opacity: 0.95,
-          },
-        })}
-      >
-        <span className={srOnly}>
-          {t(isMacintosh() ? 'wheelShortcutHintMac' : 'wheelShortcutHint')}
-        </span>
-        {/* Animated wrapper: collapses to 0 when not zoomed. padding/margin
-            trick keeps overflow:hidden from clipping focus rings. */}
-        <div
-          className={css({
-            display: 'flex',
-            alignItems: 'center',
-            overflow: 'hidden',
-            transition: 'max-width 200ms ease-out, opacity 200ms ease-out',
-            padding: '3px',
-            margin: '-3px',
-          })}
-          style={{
-            maxWidth: isZoomed ? '12rem' : '0',
-            opacity: isZoomed ? 1 : 0,
-          }}
-          aria-hidden={!isZoomed}
-        >
-          <Button
-            size="sm"
-            variant="primaryTextDark"
-            square
-            tooltip={t('fitToWindow')}
-            aria-label={t('fitToWindow')}
-            isDisabled={!isZoomed}
-            onPress={onResetZoom}
-          >
-            <RiFullscreenExitLine size={20} />
-          </Button>
-          <Button
-            size="sm"
-            variant="primaryTextDark"
-            square
-            tooltip={t('zoomOutWithShortcut', {
-              shortcut: wheelShortcutVisual,
-            })}
-            aria-label={t('zoomOut')}
-            isDisabled={!isZoomed || !canZoomOut}
-            onPress={onZoomOut}
-          >
-            <RiZoomOutLine size={20} />
-          </Button>
-          {/* Visual only - zoom level is announced via useScreenReaderAnnounce. */}
-          <span
-            aria-hidden="true"
-            className={css({
-              color: 'white',
-              fontSize: '0.8125rem',
-              fontWeight: 500,
-              minWidth: '3.25rem',
-              textAlign: 'center',
-              userSelect: 'none',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              padding: '0 0.25rem',
-              whiteSpace: 'nowrap',
-            })}
-          >
-            {zoomPercentage} %
-          </span>
-        </div>
-        <Button
-          size="sm"
-          variant="primaryTextDark"
-          square
-          tooltip={t('zoomInWithShortcut', { shortcut: wheelShortcutVisual })}
-          aria-label={t('zoomIn')}
-          isDisabled={!canZoomIn}
-          onPress={onZoomIn}
-        >
-          <RiZoomInLine size={20} />
-        </Button>
-        {isFullscreenAvailable && (
-          <Button
-            size="sm"
-            variant="primaryTextDark"
-            square
-            tooltip={isFullscreen ? t('exitFullScreen') : t('fullScreen')}
-            aria-label={isFullscreen ? t('exitFullScreen') : t('fullScreen')}
-            onPress={toggleFullScreen}
-          >
-            {isFullscreen ? (
-              <RiCollapseDiagonalLine size={20} />
-            ) : (
-              <RiExpandDiagonalLine size={20} />
-            )}
-          </Button>
-        )}
-      </HStack>
-    </div>
-  )
-}
@@ -1,104 +0,0 @@
-import { css } from '@/styled-system/css'
-import { type TrackReference } from '@livekit/components-core'
-import { useEffect, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useScreenShareZoom } from '../hooks/useScreenShareZoom'
-import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
-import { ScreenShareZoomControls } from './ScreenShareZoomControls'
-import { ScreenShareVideoTrack } from './ScreenShareVideoTrack'
-
-interface ScreenShareZoomableVideoProps {
-  trackRef: TrackReference
-  tileRef: React.RefObject<HTMLDivElement | null>
-  onSubscriptionStatusChanged: (subscribed: boolean) => void
-  manageSubscription?: boolean
-}
-
-export const ScreenShareZoomableVideo = ({
-  trackRef,
-  tileRef,
-  onSubscriptionStatusChanged,
-  manageSubscription,
-}: ScreenShareZoomableVideoProps) => {
-  const zoom = useScreenShareZoom()
-  const { t } = useTranslation('rooms', { keyPrefix: 'screenShareZoom' })
-  const announce = useScreenReaderAnnounce()
-
-  // SR announcement: announce zoom level on change, with a one-time pan hint
-  // on the first zoom above 100 % per session.
-  const prevZoomRef = useRef(zoom.zoomPercentage)
-  const hasAnnouncedPanHint = useRef(false)
-  useEffect(() => {
-    if (prevZoomRef.current === zoom.zoomPercentage) return
-    const wasAtDefault = prevZoomRef.current <= 100
-    prevZoomRef.current = zoom.zoomPercentage
-
-    if (wasAtDefault && zoom.isZoomed && !hasAnnouncedPanHint.current) {
-      hasAnnouncedPanHint.current = true
-      announce(t('panHint', { level: zoom.zoomPercentage }), 'polite')
-    } else {
-      announce(t('currentZoomLevel', { level: zoom.zoomPercentage }), 'polite')
-    }
-
-    if (!zoom.isZoomed) hasAnnouncedPanHint.current = false
-  }, [zoom.zoomPercentage, zoom.isZoomed, announce, t])
-
-  // Attach keyboard listener on the tile container (has tabIndex=0).
-  useEffect(() => {
-    const el = tileRef.current
-    if (!el) return
-    el.addEventListener('keydown', zoom.handleKeyDown)
-    return () => el.removeEventListener('keydown', zoom.handleKeyDown)
-  }, [tileRef, zoom.handleKeyDown])
-
-  // Native wheel listener with { passive: false } so preventDefault works.
-  useEffect(() => {
-    const el = zoom.surfaceElRef.current
-    if (!el) return
-    el.addEventListener('wheel', zoom.handleWheel, { passive: false })
-    return () => el.removeEventListener('wheel', zoom.handleWheel)
-  }, [zoom.handleWheel, zoom.surfaceElRef])
-
-  return (
-    <>
-      <div
-        ref={zoom.surfaceElRef}
-        className={css({
-          width: '100%',
-          height: '100%',
-          overflow: 'hidden',
-          position: 'relative',
-          userSelect: 'none',
-          touchAction: 'none',
-        })}
-        {...zoom.moveProps}
-      >
-        <div
-          ref={zoom.transformElRef}
-          style={{
-            width: '100%',
-            height: '100%',
-            pointerEvents: 'none',
-            transformOrigin: 'center center',
-          }}
-        >
-          <ScreenShareVideoTrack
-            trackRef={trackRef}
-            onSubscriptionStatusChanged={onSubscriptionStatusChanged}
-            manageSubscription={manageSubscription}
-          />
-        </div>
-      </div>
-      <ScreenShareZoomControls
-        containerRef={tileRef}
-        isZoomed={zoom.isZoomed}
-        zoomPercentage={zoom.zoomPercentage}
-        canZoomIn={zoom.canZoomIn}
-        canZoomOut={zoom.canZoomOut}
-        onZoomIn={zoom.zoomIn}
-        onZoomOut={zoom.zoomOut}
-        onResetZoom={zoom.resetZoom}
-      />
-    </>
-  )
-}
@@ -6,8 +6,8 @@ import { Button, Div } from '@/primitives'
 import { RiArrowLeftLine, RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { ParticipantsList } from './controls/Participants/ParticipantsList'
-import { PanelId, useSidePanel } from '../hooks/useSidePanel'
-import React, { ReactNode, useCallback, useRef } from 'react'
+import { useSidePanel } from '../hooks/useSidePanel'
+import { ReactNode } from 'react'
 import { Chat } from '../prefabs/Chat'
 import { Effects } from './effects/Effects'
 import { Admin } from './Admin'
@@ -15,7 +15,6 @@ import { Tools } from './Tools'
 import { Info } from './Info'
 import { HStack } from '@/styled-system/jsx'
 import { useReactionsToolbar } from '@/features/reactions/hooks/useReactionsToolbar'
-import { useRestoreFocus } from '@/hooks/useRestoreFocus'

 type StyledSidePanelProps = {
  title: string
@@ -30,115 +29,103 @@ type StyledSidePanelProps = {
  isReactionToolbarOpen?: boolean
 }

-const StyledSidePanel = React.forwardRef<HTMLElement, StyledSidePanelProps>(
-  (
-    {
-      title,
-      ariaLabel,
-      children,
-      onClose,
-      isClosed,
-      isReactionToolbarOpen,
-      closeButtonTooltip,
-      isSubmenu = false,
-      onBack,
-      backButtonLabel,
-    },
-    ref
-  ) => (
-    <aside
-      ref={ref}
-      tabIndex={-1}
-      className={css({
-        borderWidth: '1px',
-        borderStyle: 'solid',
-        borderColor: 'box.border',
-        backgroundColor: 'box.bg',
-        color: 'box.text',
-        borderRadius: 8,
-        flex: 1,
-        position: 'absolute',
-        overflow: 'hidden',
-        display: 'flex',
-        flexDirection: 'column',
-        margin: 'var(--sizes-room-side-panel-margin)',
-        marginLeft: 0,
-        marginBottom: 0,
-        padding: 0,
-        gap: 0,
-        right: 0,
-        top: 0,
-        width: 'var(--sizes-room-side-panel)',
-        transition: '.5s cubic-bezier(.4,0,.2,1) 5ms',
-        '&:focus': {
-          outline: 'none',
-        },
-      })}
-      style={{
-        transform: isClosed
-          ? 'translateX(calc(var(--sizes-room-side-panel) + var(--sizes-room-side-panel-margin)))'
-          : 'none',
-        bottom: isReactionToolbarOpen
-          ? 'calc( var(--sizes-room-control-bar) + var(--sizes-room-reaction-toolbar-height) + calc(var(--lk-grid-gap) / 2))'
-          : 'var(--sizes-room-control-bar)',
-      }}
-      aria-hidden={isClosed}
-      aria-label={ariaLabel}
-    >
-      <HStack alignItems="center">
-        {isSubmenu && (
-          <Button
-            variant="secondaryText"
-            size="sm"
-            square
-            className={css({ marginRight: '0.5rem', marginLeft: '1rem' })}
-            aria-label={backButtonLabel}
-            onPress={onBack}
-          >
-            <RiArrowLeftLine size={20} aria-hidden="true" />
-          </Button>
-        )}
-        <Heading
-          slot="title"
-          level={1}
-          className={text({ variant: 'h2' })}
-          style={{
-            paddingLeft: isSubmenu ? 0 : '1.5rem',
-            paddingTop: '1rem',
-            display: isClosed ? 'none' : 'flex',
-            justifyContent: 'start',
-            alignItems: 'center',
-          }}
+const StyledSidePanel = ({
+  title,
+  ariaLabel,
+  children,
+  onClose,
+  isClosed,
+  isReactionToolbarOpen,
+  closeButtonTooltip,
+  isSubmenu = false,
+  onBack,
+  backButtonLabel,
+}: StyledSidePanelProps) => (
+  <aside
+    className={css({
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'box.border',
+      backgroundColor: 'box.bg',
+      color: 'box.text',
+      borderRadius: 8,
+      flex: 1,
+      position: 'absolute',
+      overflow: 'hidden',
+      display: 'flex',
+      flexDirection: 'column',
+      margin: 'var(--sizes-room-side-panel-margin)',
+      marginLeft: 0,
+      marginBottom: 0,
+      padding: 0,
+      gap: 0,
+      right: 0,
+      top: 0,
+      width: 'var(--sizes-room-side-panel)',
+      transition: '.5s cubic-bezier(.4,0,.2,1) 5ms',
+    })}
+    style={{
+      transform: isClosed
+        ? 'translateX(calc(var(--sizes-room-side-panel) + var(--sizes-room-side-panel-margin)))'
+        : 'none',
+      bottom: isReactionToolbarOpen
+        ? 'calc( var(--sizes-room-control-bar) + var(--sizes-room-reaction-toolbar-height) + calc(var(--lk-grid-gap) / 2))'
+        : 'var(--sizes-room-control-bar)',
+    }}
+    aria-hidden={isClosed}
+    aria-label={ariaLabel}
+  >
+    <HStack alignItems="center">
+      {isSubmenu && (
+        <Button
+          variant="secondaryText"
+          size="sm"
+          square
+          className={css({ marginRight: '0.5rem', marginLeft: '1rem' })}
+          aria-label={backButtonLabel}
+          onPress={onBack}
        >
-          {title}
-        </Heading>
-      </HStack>
-      <Div
-        position="absolute"
-        top="5"
-        right="5"
+          <RiArrowLeftLine size={20} aria-hidden="true" />
+        </Button>
+      )}
+      <Heading
+        slot="title"
+        level={1}
+        className={text({ variant: 'h2' })}
        style={{
-          display: isClosed ? 'none' : undefined,
+          paddingLeft: isSubmenu ? 0 : '1.5rem',
+          paddingTop: '1rem',
+          display: isClosed ? 'none' : 'flex',
+          justifyContent: 'start',
+          alignItems: 'center',
        }}
      >
-        <Button
-          invisible
-          variant="tertiaryText"
-          size="xs"
-          onPress={onClose}
-          aria-label={closeButtonTooltip}
-          tooltip={closeButtonTooltip}
-        >
-          <RiCloseLine />
-        </Button>
-      </Div>
-      {children}
-    </aside>
-  )
+        {title}
+      </Heading>
+    </HStack>
+    <Div
+      position="absolute"
+      top="5"
+      right="5"
+      style={{
+        display: isClosed ? 'none' : undefined,
+      }}
+    >
+      <Button
+        invisible
+        variant="tertiaryText"
+        size="xs"
+        onPress={onClose}
+        aria-label={closeButtonTooltip}
+        tooltip={closeButtonTooltip}
+      >
+        <RiCloseLine />
+      </Button>
+    </Div>
+    {children}
+  </aside>
 )

-StyledSidePanel.displayName = 'StyledSidePanel'
-
 type PanelProps = {
  isOpen: boolean
  children: React.ReactNode
@@ -175,28 +162,8 @@ export const SidePanel = () => {

  const { isOpen: isReactionToolbarOpen } = useReactionsToolbar()

-  const asideRef = useRef<HTMLElement>(null)
-
-  const focusAside = useCallback(() => {
-    requestAnimationFrame(() => {
-      asideRef.current?.focus({ preventScroll: true })
-    })
-  }, [])
-
-  const handlePanelOpened = useCallback(() => {
-    if (activePanelId === PanelId.CHAT) return
-    focusAside()
-  }, [activePanelId, focusAside])
-
-  useRestoreFocus(isSidePanelOpen, {
-    onOpened: handlePanelOpened,
-    preventScroll: true,
-    activeKey: activePanelId,
-  })
-
  return (
    <StyledSidePanel
-      ref={asideRef}
      title={title}
      ariaLabel={t('ariaLabel', { title })}
      onClose={() => {
@@ -95,13 +95,8 @@ const ToolButton = ({

 export const Tools = () => {
  const { data } = useConfig()
-  const {
-    openTranscript,
-    openScreenRecording,
-    activeSubPanelId,
-    isToolsOpen,
-    isSidePanelOpen,
-  } = useSidePanel()
+  const { openTranscript, openScreenRecording, activeSubPanelId, isToolsOpen } =
+    useSidePanel()
  const { t } = useTranslation('rooms', { keyPrefix: 'moreTools' })

  // Restore focus to the element that opened the Tools panel
@@ -118,7 +113,6 @@ export const Tools = () => {
    },
    restoreFocusRaf: true,
    preventScroll: true,
-    shouldRestoreOnClose: () => !isSidePanelOpen,
  })

  const isTranscriptEnabled = useIsRecordingModeEnabled(
@@ -13,10 +13,8 @@ import {
 } from './TimerWorker'
 import {
  BackgroundProcessorInterface,
-  SELFIE_SEGMENTER_MODEL_PATH,
  type ProcessorConfig,
  type ProcessorType,
-  MEDIAPIPE_PATH_WASM,
 } from '.'

 const PROCESSING_WIDTH = 256
@@ -155,10 +153,13 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
  }

  async initSegmenter() {
-    const vision = await FilesetResolver.forVisionTasks(MEDIAPIPE_PATH_WASM)
+    const vision = await FilesetResolver.forVisionTasks(
+      'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm'
+    )
    this.imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
      baseOptions: {
-        modelAssetPath: SELFIE_SEGMENTER_MODEL_PATH,
+        modelAssetPath:
+          'https://storage.googleapis.com/mediapipe-models/image_segmenter/selfie_segmenter_landscape/float16/latest/selfie_segmenter_landscape.tflite',
        delegate: 'CPU', // Use CPU for Firefox.
      },
      runningMode: 'VIDEO',
@@ -11,11 +11,7 @@ import {
  TIMEOUT_TICK,
  timerWorkerScript,
 } from './TimerWorker'
-import {
-  FACE_LANDMARKS_MODEL_PATH,
-  ProcessorType,
-  MEDIAPIPE_PATH_WASM,
-} from '.'
+import { ProcessorType } from '.'

 const PROCESSING_WIDTH = 256 * 3
 const PROCESSING_HEIGHT = 144 * 3
@@ -132,10 +128,13 @@ export class FaceLandmarksProcessor implements TrackProcessor<Track.Kind> {
  }

  async initFaceLandmarker() {
-    const vision = await FilesetResolver.forVisionTasks(MEDIAPIPE_PATH_WASM)
+    const vision = await FilesetResolver.forVisionTasks(
+      'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm'
+    )
    this.faceLandmarker = await FaceLandmarker.createFromOptions(vision, {
      baseOptions: {
-        modelAssetPath: FACE_LANDMARKS_MODEL_PATH,
+        modelAssetPath:
+          'https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/latest/face_landmarker.task',
        delegate: 'GPU',
      },
      runningMode: 'VIDEO',
@@ -1,14 +1,13 @@
 import type { ProcessorOptions, Track } from 'livekit-client'
 import {
+  BackgroundBlur,
  ProcessorWrapper,
-  BackgroundProcessor,
+  VirtualBackground,
 } from '@livekit/track-processors'
 import {
  type ProcessorConfig,
  BackgroundProcessorInterface,
  ProcessorType,
-  MEDIAPIPE_PATH_WASM,
-  SELFIE_SEGMENTER_MODEL_PATH,
 } from '.'

 export class UnifiedBackgroundTrackProcessor implements BackgroundProcessorInterface {
@@ -21,24 +20,10 @@ export class UnifiedBackgroundTrackProcessor implements BackgroundProcessorInter

    if (opts.type === 'virtual') {
      this.processorType = ProcessorType.VIRTUAL
-      this.processor = BackgroundProcessor({
-        mode: 'virtual-background',
-        imagePath: opts.imagePath,
-        assetPaths: {
-          tasksVisionFileSet: MEDIAPIPE_PATH_WASM,
-          modelAssetPath: SELFIE_SEGMENTER_MODEL_PATH,
-        },
-      })
+      this.processor = VirtualBackground(opts.imagePath)
    } else if (opts.type === 'blur') {
      this.processorType = ProcessorType.BLUR
-      this.processor = BackgroundProcessor({
-        mode: 'background-blur',
-        blurRadius: opts.blurRadius,
-        assetPaths: {
-          tasksVisionFileSet: MEDIAPIPE_PATH_WASM,
-          modelAssetPath: SELFIE_SEGMENTER_MODEL_PATH,
-        },
-      })
+      this.processor = BackgroundBlur(opts.blurRadius)
    } else {
      throw new Error(
        'Must provide either imagePath for virtual background or blurRadius for blur'
@@ -4,14 +4,6 @@ import { BackgroundCustomProcessor } from './BackgroundCustomProcessor'
 import { UnifiedBackgroundTrackProcessor } from './UnifiedBackgroundTrackProcessor'
 import { FaceLandmarksOptions } from './FaceLandmarksProcessor'

-export const SELFIE_SEGMENTER_MODEL_PATH =
-  '/assets/mediapipe/models/selfie_segmenter_landscape.tflite'
-
-export const FACE_LANDMARKS_MODEL_PATH =
-  '/assets/mediapipe/models/face_landmarker.task'
-
-export const MEDIAPIPE_PATH_WASM = '/assets/mediapipe/wasm'
-
 export enum ProcessorType {
  BLUR = 'blur',
  VIRTUAL = 'virtual',
@@ -1,4 +1,4 @@
-import { RiCollapseDiagonalLine, RiExpandDiagonalLine } from '@remixicon/react'
+import { RiFullscreenExitLine, RiFullscreenLine } from '@remixicon/react'
 import { MenuItem } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { menuRecipe } from '@/primitives/menuRecipe'
@@ -20,12 +20,12 @@ export const FullScreenMenuItem = () => {
    >
      {isCurrentlyFullscreen ? (
        <>
-          <RiCollapseDiagonalLine size={20} />
+          <RiFullscreenExitLine size={20} />
          {t('fullscreen.exit')}
        </>
      ) : (
        <>
-          <RiExpandDiagonalLine size={20} />
+          <RiFullscreenLine size={20} />
          {t('fullscreen.enter')}
        </>
      )}
@@ -1,260 +0,0 @@
-import { useCallback, useRef, useSyncExternalStore } from 'react'
-import { useMove } from 'react-aria'
-import type { MoveMoveEvent } from '@react-types/shared'
-import {
-  MIN_ZOOM,
-  PAN_STEP,
-  WHEEL_ZOOM_SPEED,
-  ZOOM_STEP,
-  type PanOffset,
-  type ZoomSnapshot,
-  buildZoomSnapshot,
-  clampPan,
-  clampZoom,
-  getCursorFromZoomState,
-  getCursorPercentsFromWheelEvent,
-  getPanDeltaPercentsFromMove,
-  getWheelPanOffset,
-  getZoomTransform,
-} from '../utils/screenShareZoom'
-
-/**
- * Manages zoom and pan state for a remote screen share.
- *
- * Performance: zoom/pan live in refs and are applied imperatively to the DOM
- * (via transformElRef / surfaceElRef) so the hot path (drag, wheel) never
- * triggers a React re-render. A useSyncExternalStore snapshot is flushed only
- * when the toolbar UI needs to update (zoom level change, drag end).
- *
- * Drag/touch panning is handled by react-aria's useMove (moveProps).
- * Ctrl/Cmd + wheel zoom is a native listener (must be non-passive to
- * preventDefault and block browser page zoom).
- * Arrow key panning and +/-/0 zoom are on a keydown listener attached to the
- * tile container (which has tabIndex=0 and focus).
- */
-export const useScreenShareZoom = () => {
-  const zoomRef = useRef(MIN_ZOOM)
-  const panRef = useRef<PanOffset>({ x: 0, y: 0 })
-  const draggingRef = useRef(false)
-
-  // The consumer binds these to the inner transform div and the outer drag surface.
-  const transformElRef = useRef<HTMLDivElement | null>(null)
-  const surfaceElRef = useRef<HTMLDivElement | null>(null)
-
-  // Snapshot store: subscribers are notified only on explicit flush() calls.
-  const snapshotRef = useRef<ZoomSnapshot>(
-    buildZoomSnapshot(MIN_ZOOM, { x: 0, y: 0 }, false)
-  )
-  const listenersRef = useRef(new Set<() => void>())
-
-  const subscribe = useCallback((cb: () => void) => {
-    listenersRef.current.add(cb)
-    return () => {
-      listenersRef.current.delete(cb)
-    }
-  }, [])
-
-  const getSnapshot = useCallback(() => snapshotRef.current, [])
-
-  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
-
-  const flush = useCallback(() => {
-    snapshotRef.current = buildZoomSnapshot(
-      zoomRef.current,
-      panRef.current,
-      draggingRef.current
-    )
-    listenersRef.current.forEach((cb) => cb())
-  }, [])
-
-  const applyTransform = useCallback((transition: boolean) => {
-    const el = transformElRef.current
-    if (!el) return
-    el.style.transform = getZoomTransform(zoomRef.current, panRef.current)
-    el.style.transition = transition ? 'transform 150ms ease-out' : 'none'
-  }, [])
-
-  const applyCursor = useCallback(() => {
-    const el = surfaceElRef.current
-    if (!el) return
-    el.style.cursor = getCursorFromZoomState(
-      zoomRef.current,
-      draggingRef.current
-    )
-  }, [])
-
-  const zoomIn = useCallback(() => {
-    const next = clampZoom(zoomRef.current + ZOOM_STEP)
-    zoomRef.current = next
-    panRef.current = clampPan(panRef.current, next)
-    applyTransform(true)
-    applyCursor()
-    flush()
-  }, [applyTransform, applyCursor, flush])
-
-  const zoomOut = useCallback(() => {
-    const next = clampZoom(zoomRef.current - ZOOM_STEP)
-    zoomRef.current = next
-    panRef.current =
-      next <= MIN_ZOOM ? { x: 0, y: 0 } : clampPan(panRef.current, next)
-    applyTransform(true)
-    applyCursor()
-    flush()
-  }, [applyTransform, applyCursor, flush])
-
-  const resetZoom = useCallback(() => {
-    zoomRef.current = MIN_ZOOM
-    panRef.current = { x: 0, y: 0 }
-    applyTransform(true)
-    applyCursor()
-    flush()
-  }, [applyTransform, applyCursor, flush])
-
-  // Must be attached with { passive: false } so preventDefault() blocks
-  // the browser's native Ctrl+scroll page zoom.
-  const handleWheel = useCallback(
-    (e: WheelEvent) => {
-      if (!e.ctrlKey && !e.metaKey) return
-
-      e.preventDefault()
-      e.stopPropagation()
-
-      const target = e.currentTarget as HTMLElement
-      const prev = zoomRef.current
-      const delta = -e.deltaY * WHEEL_ZOOM_SPEED
-      const next = clampZoom(prev + delta)
-
-      if (next <= MIN_ZOOM) {
-        zoomRef.current = MIN_ZOOM
-        panRef.current = { x: 0, y: 0 }
-      } else {
-        const { cursorXPercent, cursorYPercent } =
-          getCursorPercentsFromWheelEvent(e, target)
-        zoomRef.current = next
-        panRef.current = getWheelPanOffset({
-          pan: panRef.current,
-          prevZoom: prev,
-          nextZoom: next,
-          cursorXPercent,
-          cursorYPercent,
-        })
-      }
-
-      applyTransform(false)
-      applyCursor()
-      flush()
-    },
-    [applyTransform, applyCursor, flush]
-  )
-
-  // useMove handles mouse drag + touch pan. Keyboard arrows are not handled
-  // here because moveProps is on the zoom surface, while focus is on the tile
-  // container, see handleKeyDown below.
-  const { moveProps } = useMove({
-    onMoveStart() {
-      if (zoomRef.current <= MIN_ZOOM) return
-      draggingRef.current = true
-      applyCursor()
-      flush()
-    },
-    onMove(e: MoveMoveEvent) {
-      if (zoomRef.current <= MIN_ZOOM) return
-
-      const el = surfaceElRef.current
-      if (!el) return
-
-      const { deltaXPercent, deltaYPercent } = getPanDeltaPercentsFromMove(
-        e.deltaX,
-        e.deltaY,
-        el
-      )
-
-      panRef.current = clampPan(
-        {
-          x: panRef.current.x + deltaXPercent,
-          y: panRef.current.y + deltaYPercent,
-        },
-        zoomRef.current
-      )
-
-      applyTransform(false)
-      // Mouse drag: skip flush (imperative-only) to avoid re-renders per frame.
-      // Keyboard: flush so the toolbar reflects the updated position.
-      if (e.pointerType === 'keyboard') {
-        flush()
-      }
-    },
-    onMoveEnd() {
-      draggingRef.current = false
-      applyTransform(true)
-      applyCursor()
-      flush()
-    },
-  })
-
-  const panBy = useCallback(
-    (dx: number, dy: number) => {
-      panRef.current = clampPan(
-        { x: panRef.current.x + dx, y: panRef.current.y + dy },
-        zoomRef.current
-      )
-      applyTransform(true)
-      flush()
-    },
-    [applyTransform, flush]
-  )
-
-  // Attached to the tile container (not the zoom surface) where keyboard
-  // focus lives. Arrows pan, +/-/0 zoom.
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      const isZoomed = zoomRef.current > MIN_ZOOM
-      if (!isZoomed && e.key !== '+' && e.key !== '=') return
-
-      switch (e.key) {
-        case 'ArrowLeft':
-          e.preventDefault()
-          panBy(PAN_STEP, 0)
-          break
-        case 'ArrowRight':
-          e.preventDefault()
-          panBy(-PAN_STEP, 0)
-          break
-        case 'ArrowUp':
-          e.preventDefault()
-          panBy(0, PAN_STEP)
-          break
-        case 'ArrowDown':
-          e.preventDefault()
-          panBy(0, -PAN_STEP)
-          break
-        case '+':
-        case '=':
-          e.preventDefault()
-          zoomIn()
-          break
-        case '-':
-          e.preventDefault()
-          zoomOut()
-          break
-        case '0':
-          e.preventDefault()
-          resetZoom()
-          break
-      }
-    },
-    [panBy, zoomIn, zoomOut, resetZoom]
-  )
-
-  return {
-    ...snapshot,
-    transformElRef,
-    surfaceElRef,
-    moveProps,
-    zoomIn,
-    zoomOut,
-    resetZoom,
-    handleWheel,
-    handleKeyDown,
-  }
-}
@@ -37,7 +37,7 @@ export function Chat({ ...props }: ChatProps) {
  const room = useRoomContext()
  const { send, chatMessages, isSending } = useChat()

-  const { isChatOpen, isSidePanelOpen } = useSidePanel()
+  const { isChatOpen } = useSidePanel()
  const chatSnap = useSnapshot(chatStore)

  // Keep track of the element that opened the chat so we can restore focus
@@ -51,7 +51,6 @@ export function Chat({ ...props }: ChatProps) {
      })
    },
    preventScroll: true,
-    shouldRestoreOnClose: () => !isSidePanelOpen,
  })

  // Use useParticipants hook to trigger a re-render when the participant list changes.
@@ -1,115 +0,0 @@
-export const MIN_ZOOM = 1
-export const MAX_ZOOM = 4
-export const ZOOM_STEP = 0.1
-export const WHEEL_ZOOM_SPEED = 0.002
-export const WHEEL_ZOOM_FOCUS_BLEND = 0.3
-export const PAN_STEP = 5
-export const PAN_CLAMP_HALF = 50
-
-export interface PanOffset {
-  x: number
-  y: number
-}
-
-export interface ZoomSnapshot {
-  zoomLevel: number
-  zoomPercentage: number
-  panOffset: PanOffset
-  isZoomed: boolean
-  isDragging: boolean
-  canZoomIn: boolean
-  canZoomOut: boolean
-}
-
-export const clampZoom = (value: number) => {
-  return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, value))
-}
-
-// Restrict pan so the content edge never passes the viewport center.
-export const clampPan = (pan: PanOffset, zoom: number): PanOffset => {
-  const maxPan = ((zoom - 1) / zoom) * PAN_CLAMP_HALF
-  return {
-    x: Math.max(-maxPan, Math.min(maxPan, pan.x)),
-    y: Math.max(-maxPan, Math.min(maxPan, pan.y)),
-  }
-}
-
-export const buildZoomSnapshot = (
-  zoom: number,
-  pan: PanOffset,
-  dragging: boolean
-): ZoomSnapshot => {
-  return {
-    zoomLevel: zoom,
-    zoomPercentage: Math.round(zoom * 100),
-    panOffset: pan,
-    isZoomed: zoom > MIN_ZOOM,
-    isDragging: dragging,
-    canZoomIn: zoom < MAX_ZOOM,
-    canZoomOut: zoom > MIN_ZOOM,
-  }
-}
-
-export const getZoomTransform = (zoom: number, pan: PanOffset) => {
-  return `scale(${zoom}) translate(${pan.x}%, ${pan.y}%)`
-}
-
-export const getCursorFromZoomState = (zoom: number, dragging: boolean) => {
-  if (zoom <= MIN_ZOOM) return 'default'
-  return dragging ? 'grabbing' : 'grab'
-}
-
-// Blend the current pan toward the cursor position so the zoom "tracks" the pointer.
-export const getWheelPanOffset = ({
-  pan,
-  prevZoom,
-  nextZoom,
-  cursorXPercent,
-  cursorYPercent,
-}: {
-  pan: PanOffset
-  prevZoom: number
-  nextZoom: number
-  cursorXPercent: number
-  cursorYPercent: number
-}): PanOffset => {
-  const zoomRatio = nextZoom / prevZoom
-  return clampPan(
-    {
-      x:
-        pan.x +
-        (cursorXPercent - pan.x) * (1 - 1 / zoomRatio) * WHEEL_ZOOM_FOCUS_BLEND,
-      y:
-        pan.y +
-        (cursorYPercent - pan.y) * (1 - 1 / zoomRatio) * WHEEL_ZOOM_FOCUS_BLEND,
-    },
-    nextZoom
-  )
-}
-
-// Convert cursor pixel position to a % offset from the surface center.
-export const getCursorPercentsFromWheelEvent = (
-  e: WheelEvent,
-  target: HTMLElement
-) => {
-  const rect = target.getBoundingClientRect()
-  return {
-    cursorXPercent:
-      ((e.clientX - rect.left) / rect.width) * 100 - PAN_CLAMP_HALF,
-    cursorYPercent:
-      ((e.clientY - rect.top) / rect.height) * 100 - PAN_CLAMP_HALF,
-  }
-}
-
-// Convert useMove pixel deltas to % of the surface dimensions.
-export const getPanDeltaPercentsFromMove = (
-  deltaX: number,
-  deltaY: number,
-  surface: HTMLElement
-) => {
-  const rect = surface.getBoundingClientRect()
-  return {
-    deltaXPercent: (deltaX / rect.width) * 100,
-    deltaYPercent: (deltaY / rect.height) * 100,
-  }
-}
@@ -1,12 +0,0 @@
-/**
- * Builds a radial gradient from the participant's avatar color:
- * brighter in the center (where the avatar sits), darker at the edges.
- * Mixed in oklch so the color stays vivid as it darkens instead of greying out.
- */
-export const getParticipantBackgroundGradient = (color: string): string =>
-  `radial-gradient(circle at 50% 45%,
-    color-mix(in oklch, ${color} 82%, white) 0%,
-    color-mix(in oklch, ${color} 90%, white) 8%,
-    ${color} 35%,
-    color-mix(in oklch, ${color} 85%, black) 65%,
-    color-mix(in oklch, ${color} 65%, black) 100%)`
@@ -8,9 +8,8 @@ import { HStack } from '@/styled-system/jsx'
 import { useState } from 'react'
 import { LoginButton } from '@/components/LoginButton'
 import { useRenameParticipant } from '@/features/rooms/api/renameParticipant'
-import { saveUsername } from '@/stores/user'
+import { saveUsername } from '@/stores/userChoices'
 import { logout } from '@/features/auth/utils/logout'
-import { useConfig } from '@/api/useConfig'

 export type AccountTabProps = Pick<DialogProps, 'onOpenChange'> &
  Pick<TabPanelProps, 'id'>
@@ -18,7 +17,6 @@ export type AccountTabProps = Pick<DialogProps, 'onOpenChange'> &
 export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
  const { t } = useTranslation('settings')
  const room = useRoomContext()
-  const { data } = useConfig()
  const { user, isLoggedIn } = useUser()

  const { renameParticipant } = useRenameParticipant()
@@ -47,17 +45,15 @@ export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
  return (
    <TabPanel padding={'md'} flex id={id}>
      <H lvl={2}>{t('account.heading')}</H>
-      {(!isLoggedIn || data?.authenticated_users_can_edit_display_name) && (
-        <Field
-          type="text"
-          label={t('account.nameLabel')}
-          value={name}
-          onChange={setName}
-          validate={(value) => {
-            return !value ? <p>{t('account.nameError')}</p> : null
-          }}
-        />
-      )}
+      <Field
+        type="text"
+        label={t('account.nameLabel')}
+        value={name}
+        onChange={setName}
+        validate={(value) => {
+          return !value ? <p>{t('account.nameError')}</p> : null
+        }}
+      />
      <H lvl={2}>{t('account.authentication')}</H>
      {isLoggedIn ? (
        <>
@@ -6,10 +6,6 @@ export type RestoreFocusOptions = {
  onClosed?: () => void
  restoreFocusRaf?: boolean
  preventScroll?: boolean
-  /** When the panel stays open but its content changes, update the restore target. */
-  activeKey?: string | null
-  /** Return false to skip restoring focus on close (e.g. when switching to another panel). */
-  shouldRestoreOnClose?: () => boolean
 }

 /**
@@ -26,12 +22,9 @@ export function useRestoreFocus(
    onClosed,
    restoreFocusRaf = false,
    preventScroll = true,
-    activeKey,
-    shouldRestoreOnClose,
  } = options

  const prevIsOpenRef = useRef(false)
-  const prevActiveKeyRef = useRef(activeKey)
  const triggerRef = useRef<HTMLElement | null>(null)

  useEffect(() => {
@@ -44,41 +37,25 @@ export function useRestoreFocus(
      onOpened?.()
    }

-    // Panel switched while staying open
-    if (wasOpen && isOpen && activeKey !== prevActiveKeyRef.current) {
-      const activeEl = document.activeElement as HTMLElement | null
-      triggerRef.current = resolveTrigger ? resolveTrigger(activeEl) : activeEl
-      onOpened?.()
-    }
-
    // Just closed
    if (wasOpen && !isOpen) {
      const trigger = triggerRef.current
-      const shouldRestore =
-        (shouldRestoreOnClose?.() ?? true) &&
-        trigger &&
-        document.contains(trigger)
-
-      if (shouldRestore) {
+      if (trigger && document.contains(trigger)) {
        const focus = () => trigger.focus({ preventScroll })
        if (restoreFocusRaf) requestAnimationFrame(focus)
        else focus()
      }
-
      triggerRef.current = null
      onClosed?.()
    }

    prevIsOpenRef.current = isOpen
-    prevActiveKeyRef.current = activeKey
  }, [
    isOpen,
-    activeKey,
    onClosed,
    onOpened,
    preventScroll,
    resolveTrigger,
    restoreFocusRaf,
-    shouldRestoreOnClose,
  ])
 }
@@ -668,24 +668,6 @@
    "muteParticipant": "{{name}} stummschalten",
    "fullScreen": "Vollbild"
  },
-  "screenShareZoom": {
-    "toolbarLabel": "Zoom-Steuerung für Bildschirmfreigabe",
-    "zoomIn": "Vergrößern",
-    "zoomInWithShortcut": "Vergrößern ({{shortcut}})",
-    "zoomOut": "Verkleinern",
-    "zoomOutWithShortcut": "Verkleinern ({{shortcut}})",
-    "wheelShortcut": "Steuerung plus Mausrad",
-    "wheelShortcutMac": "Befehl plus Mausrad",
-    "wheelShortcutHint": "Tastenkürzel: Steuerung plus Mausrad zum Vergrößern oder Verkleinern.",
-    "wheelShortcutHintMac": "Tastenkürzel: Befehl plus Mausrad zum Vergrößern oder Verkleinern.",
-    "fitToWindow": "An Fenster anpassen",
-    "fullScreen": "Vollbild",
-    "exitFullScreen": "Vollbild beenden",
-    "currentZoomLevel": "Zoom {{level}} %",
-    "panHint": "Zoom {{level}} %. Mit der Maus ziehen oder Pfeiltasten zum Navigieren verwenden.",
-    "fullScreenEntered": "Vollbild aktiviert",
-    "fullScreenExited": "Vollbild deaktiviert"
-  },
  "shortcutsPanel": {
    "title": "Tastenkürzel",
    "categories": {
@@ -667,24 +667,6 @@
    "muteParticipant": "Mute {{name}}",
    "fullScreen": "Full screen"
  },
-  "screenShareZoom": {
-    "toolbarLabel": "Screen share zoom controls",
-    "zoomIn": "Zoom in",
-    "zoomInWithShortcut": "Zoom in ({{shortcut}})",
-    "zoomOut": "Zoom out",
-    "zoomOutWithShortcut": "Zoom out ({{shortcut}})",
-    "wheelShortcut": "Control plus scroll wheel",
-    "wheelShortcutMac": "Command plus scroll wheel",
-    "wheelShortcutHint": "Shortcut: Control plus scroll wheel to zoom in or out.",
-    "wheelShortcutHintMac": "Shortcut: Command plus scroll wheel to zoom in or out.",
-    "fitToWindow": "Fit to window",
-    "fullScreen": "Full screen",
-    "exitFullScreen": "Exit full screen",
-    "currentZoomLevel": "Zoom {{level}} %",
-    "panHint": "Zoom {{level}} %. Drag with mouse or use arrow keys to navigate.",
-    "fullScreenEntered": "Full screen enabled",
-    "fullScreenExited": "Full screen disabled"
-  },
  "shortcutsPanel": {
    "title": "Keyboard shortcuts",
    "categories": {
@@ -667,24 +667,6 @@
    "muteParticipant": "Couper le micro de {{name}}",
    "fullScreen": "Plein écran"
  },
-  "screenShareZoom": {
-    "toolbarLabel": "Contrôles de zoom du partage d'écran",
-    "zoomIn": "Zoomer",
-    "zoomInWithShortcut": "Zoomer ({{shortcut}})",
-    "zoomOut": "Dézoomer",
-    "zoomOutWithShortcut": "Dézoomer ({{shortcut}})",
-    "wheelShortcut": "Contrôle plus molette",
-    "wheelShortcutMac": "Commande plus molette",
-    "wheelShortcutHint": "Raccourci : Contrôle plus molette pour zoomer ou dézoomer.",
-    "wheelShortcutHintMac": "Raccourci : Commande plus molette pour zoomer ou dézoomer.",
-    "fitToWindow": "Ajuster à la fenêtre",
-    "fullScreen": "Plein écran",
-    "exitFullScreen": "Quitter le plein écran",
-    "currentZoomLevel": "Zoom {{level}} %",
-    "panHint": "Zoom {{level}} %. Glissez avec la souris ou utilisez les touches fléchées pour naviguer.",
-    "fullScreenEntered": "Plein écran activé",
-    "fullScreenExited": "Plein écran désactivé"
-  },
  "shortcutsPanel": {
    "title": "Raccourcis clavier",
    "categories": {
@@ -667,24 +667,6 @@
    "muteParticipant": "Demp {{name}}",
    "fullScreen": "Volledig scherm"
  },
-  "screenShareZoom": {
-    "toolbarLabel": "Zoombediening voor schermdeling",
-    "zoomIn": "Inzoomen",
-    "zoomInWithShortcut": "Inzoomen ({{shortcut}})",
-    "zoomOut": "Uitzoomen",
-    "zoomOutWithShortcut": "Uitzoomen ({{shortcut}})",
-    "wheelShortcut": "Control plus scrollwiel",
-    "wheelShortcutMac": "Command plus scrollwiel",
-    "wheelShortcutHint": "Sneltoets: Control plus scrollwiel om in of uit te zoomen.",
-    "wheelShortcutHintMac": "Sneltoets: Command plus scrollwiel om in of uit te zoomen.",
-    "fitToWindow": "Aanpassen aan venster",
-    "fullScreen": "Volledig scherm",
-    "exitFullScreen": "Volledig scherm verlaten",
-    "currentZoomLevel": "Zoom {{level}} %",
-    "panHint": "Zoom {{level}} %. Sleep met de muis of gebruik de pijltjestoetsen om te navigeren.",
-    "fullScreenEntered": "Volledig scherm ingeschakeld",
-    "fullScreenExited": "Volledig scherm uitgeschakeld"
-  },
  "shortcutsPanel": {
    "title": "Sneltoetsen",
    "categories": {
@@ -1,37 +0,0 @@
-import { proxy, subscribe } from 'valtio'
-import { STORAGE_KEYS } from '@/utils/storageKeys'
-
-type State = {
-  username: string
-}
-
-const DEFAULT_STATE = {
-  username: '',
-}
-
-function getUserState(): State {
-  try {
-    const stored = localStorage.getItem(STORAGE_KEYS.USER)
-    if (!stored) return DEFAULT_STATE
-    const parsed = JSON.parse(stored)
-    return {
-      ...parsed,
-    }
-  } catch (error: unknown) {
-    console.error(
-      '[UserPreferencesStore] Failed to parse stored settings:',
-      error
-    )
-    return DEFAULT_STATE
-  }
-}
-
-export const userStore = proxy<State>(getUserState())
-
-subscribe(userStore, () => {
-  localStorage.setItem(STORAGE_KEYS.USER, JSON.stringify(userStore))
-})
-
-export const saveUsername = (username: string) => {
-  userStore.username = username
-}
@@ -12,7 +12,7 @@ import { VideoQuality } from 'livekit-client'

 export type VideoResolution = 'h720' | 'h360' | 'h180'

-export type LocalUserChoices = Omit<LocalUserChoicesLK, 'username'> & {
+export type LocalUserChoices = LocalUserChoicesLK & {
  processorConfig?: ProcessorConfig
  noiseReductionEnabled?: boolean
  audioOutputDeviceId?: string
@@ -32,13 +32,7 @@ function getUserChoicesState(): LocalUserChoices {

 export const userChoicesStore = proxy<LocalUserChoices>(getUserChoicesState())
 subscribe(userChoicesStore, () => {
-  // TEMPORARY: cast needed because our store omits `username`, which we no
-  // longer persis in this store, while LiveKit's `saveUserChoices` still expects the full
-  // `LocalUserChoices` shape. `username` ends up `undefined` in the saved
-  // object, which `saveUserChoices` tolerates at runtime.
-  // We are migrating away from LiveKit's persistence logic to our own store
-  // handling for more control — this cast can be removed once that lands.
-  saveUserChoices(userChoicesStore as LocalUserChoicesLK, false)
+  saveUserChoices(userChoicesStore, false)
 })

 // we run some logic on store loading to check if the processor config is still valid
@@ -96,6 +90,10 @@ export const saveVideoSubscribeQuality = (quality: VideoQuality) => {
  userChoicesStore.videoSubscribeQuality = quality
 }

+export const saveUsername = (username: string) => {
+  userChoicesStore.username = username
+}
+
 export const saveNoiseReductionEnabled = (enabled: boolean) => {
  userChoicesStore.noiseReductionEnabled = enabled
 }
@@ -4,6 +4,5 @@
 export const STORAGE_KEYS = {
  NOTIFICATIONS: 'app_notification_settings',
  USER_PREFERENCES: 'app_user_preferences',
-  USER: 'app_user',
  ACCESSIBILITY: 'app_accessibility_settings',
 } as const
@@ -2,7 +2,6 @@ import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 import { visualizer } from 'rollup-plugin-visualizer'
 import svgr from 'vite-plugin-svgr'
-import { viteStaticCopy } from 'vite-plugin-static-copy'

 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
@@ -12,32 +11,18 @@ export default defineConfig(({ mode }) => {
      react(),
      svgr({
        svgrOptions: {
-          replaceAttrValues: {
-            '#000': 'currentColor',
-            '#000000': 'currentColor',
-            '#1f1f1f': 'currentColor',
-          },
+          replaceAttrValues: { '#000': 'currentColor', '#000000': 'currentColor', '#1f1f1f': 'currentColor' },
        },
      }),
-      viteStaticCopy({
-        targets: [
-          {
-            src: 'node_modules/@mediapipe/tasks-vision/wasm/*',
-            dest: 'assets/mediapipe/wasm',
-            rename: { stripBase: 4 },
-          },
-        ],
+      env.VITE_ANALYZE === 'true' && visualizer({
+        open: true,
+        filename: 'rollup-plugin-visualizer/stats.html',
+        gzipSize: true,
+        brotliSize: true,
      }),
-      env.VITE_ANALYZE === 'true' &&
-        visualizer({
-          open: true,
-          filename: 'rollup-plugin-visualizer/stats.html',
-          gzipSize: true,
-          brotliSize: true,
-        }),
    ],
    resolve: {
-      tsconfigPaths: true,
+      tsconfigPaths: true
    },
    build: {
      sourcemap: env.VITE_BUILD_SOURCEMAP === 'true',
@@ -191,8 +191,6 @@ backend:
    SUMMARY_SERVICE_API_TOKEN: password
    SUMMARY_SERVICE_WEBHOOK_API_TOKEN: webhook-password
    RECORDING_DOWNLOAD_BASE_URL: https://meet.127.0.0.1.nip.io/recording
-    OIDC_USERINFO_FULLNAME_FIELDS: first_name, last_name
-    OIDC_USERINFO_SHORTNAME_FIELD: first_name

  migrate:
    command: