♻️(frontend) wrap MuteEveryoneButton with AdminOrOwnerOnly

Avoids mounting the button's hooks and rendering its logic for users who are not admin or owner, which previously happened on every re-render of the parent.
2026-07-27 04:09:26 +00:00 · 2026-07-07 18:15:29 +02:00
74 changed files with 1333 additions and 3823 deletions
@@ -82,7 +82,7 @@ jobs:
      - name: Install Node.js
        uses: actions/setup-node@v6
        with:
-          node-version: "22"
+          node-version: "18"

      - name: Restore the mail templates
        uses: actions/cache@v5
@@ -10,38 +10,6 @@ and this project adheres to

 ### 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
-
-### Added
-
 - ✨(backend) extend analytics module to support feature flags
 - ✨(backend) implement feature flags in Posthog analytics backend
 - ✨(agents) report errors to Sentry for all LiveKit agents
@@ -55,12 +23,6 @@ and this project adheres to
 - ♻️(backend) refactor analytics backend from Protocol to abstract class
 - 🔥(summary) remove call to summary enabled feature flag
 - ♻️(frontend) wrap MuteEveryoneButton with AdminOrOwnerOnly
- ⬆️(frontend) upgrade livekit-client from 2.19.0 to 2.19.2
- ⬆️(frontend) upgrade posthog-js from 1.386.5 to 1.387.0
- ⬆️(frontend) upgrade @tanstack/react-query from 5.100.14 to 5.101.0
- ⬆️(frontend) update the frontend build image to Node 22
- 🔒️(frontend) update docker image to nginx-unprivileged:1.30.3-alpine3.23
- ✨(summary) more precise analytics events

 ### Fixed

@@ -80,7 +42,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

@@ -15,15 +15,3 @@ the following command inside your docker container:
 (Note : in your development environment, you can `make migrate`.)

 ## [Unreleased]
-
-## v1.23.0
-
-As part of the 1.23.0 release, the legacy `api/v1` implementation has been removed from the _experimental_ Summary service and Meet has been migrated to the new `api/v2`.
-
-**To avoid a breaking change, the Meet backend continues to use the Summary service's v1-compatible API format by default (`SUMMARY_SERVICE_VERSION` setting defaults to `1`).**
-
-If you are deploying both Meet and Summary from this repository, you must configure the Meet backend to use the v2 API by setting the following environment variable `SUMMARY_SERVICE_VERSION=2`.
-
-If you are upgrading only the Meet deployment while keeping an older Summary v1 compatible deployment, no action is required, as the v1-compatible API remains the default.
-
-Note that we plan on removing the legacy `v1` summary compatibility in a future major version. If you have your own implementation for the summary service, we recommend updating its API contract and setting `SUMMARY_SERVICE_VERSION=2`.
@@ -113,12 +113,6 @@ update_python_version "summary"
 # Update agents pyproject.toml
 update_python_version "agents"

-# Run uv lock in agents
-print_info "Running uv lock in agents..."
-cd "src/agents"
-uv lock
-cd -
-
 # Update CHANGELOG
 print_info "Updating CHANGELOG..."

@@ -1,5 +1,5 @@
 # ---- Front-end image ----
-FROM node:22-alpine AS frontend-deps
+FROM node:20-alpine AS frontend-deps

 WORKDIR /home/frontend/

@@ -54,7 +54,7 @@ RUN npx webpack --mode production


 # ---- Front-end image ----
-FROM nginxinc/nginx-unprivileged:1.30.3-alpine3.23 AS frontend-production
+FROM nginxinc/nginx-unprivileged:alpine3.23 AS frontend-production

 USER root

@@ -1,7 +1,7 @@

 [project]
 name = "agents"
-version = "1.23.0"
+version = "1.22.0"
 requires-python = ">=3.12"
 dependencies = [
    "livekit-agents==1.6.4",
@@ -9,7 +9,7 @@ resolution-markers = [

 [[package]]
 name = "agents"
-version = "1.23.0"
+version = "1.22.0"
 source = { virtual = "." }
 dependencies = [
    { name = "livekit-agents" },
@@ -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,
@@ -215,6 +215,5 @@ class RoomViewSet(
                "client_id": client_id,
                "external_api": True,
                "auth_method": auth_method,
-                "$set": {"email": self.request.user.email},
            },
        )
@@ -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"}
        )
@@ -13,7 +13,6 @@ https://docs.djangoproject.com/en/3.1/ref/settings/
 # pylint: disable=too-many-lines

 import json
-import warnings
 from os import path
 from socket import gethostbyname, gethostname

@@ -671,11 +670,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(
@@ -1134,20 +1128,6 @@ class Base(Configuration):
                "FILE_UPLOAD_TMP_PATH cannot be the same as FILE_UPLOAD_PATH"
            )

-        if (
-            cls.SUMMARY_SERVICE_VERSION == 1
-            and cls.SUMMARY_SERVICE_ENDPOINT is not None
-        ):
-            warnings.warn(
-                "SUMMARY_SERVICE_VERSION=1 is deprecated. "
-                "The legacy v1 API has been removed from the experimental "
-                "Summary service. Please update your Summary service deployment to "
-                "the v2 API and set SUMMARY_SERVICE_VERSION=2.",
-                # We use UserWarning to make sure it shows up in production deployment
-                UserWarning,
-                stacklevel=2,
-            )
-
        # The SENTRY_DSN setting should be available to activate sentry for an environment
        if cls.SENTRY_DSN is not None:
            sentry_sdk.init(
@@ -7,7 +7,7 @@ build-backend = "uv_build"

 [project]
 name = "meet"
-version = "1.23.0"
+version = "1.22.0"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
    "Development Status :: 5 - Production/Stable",
@@ -1187,7 +1187,7 @@ wheels = [

 [[package]]
 name = "meet"
-version = "1.23.0"
+version = "1.22.0"
 source = { editable = "." }
 dependencies = [
    { name = "aiohttp" },
@@ -1,4 +1,4 @@
-FROM node:22-alpine AS frontend-deps
+FROM node:20-alpine AS frontend-deps

 USER node

@@ -39,7 +39,7 @@ ENV VITE_API_BASE_URL=${VITE_API_BASE_URL}
 RUN npm run build

 # ---- Front-end image ----
-FROM nginxinc/nginx-unprivileged:1.30.3-alpine3.23 AS frontend-production
+FROM nginxinc/nginx-unprivileged:alpine3.23 AS frontend-production

 USER root

@@ -1,12 +1,12 @@
 {
  "name": "meet",
-  "version": "1.23.0",
+  "version": "1.22.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "meet",
-      "version": "1.23.0",
+      "version": "1.22.0",
      "dependencies": {
        "@fontsource-variable/atkinson-hyperlegible-next": "5.2.6",
        "@fontsource-variable/lexend": "5.2.11",
@@ -15,11 +15,10 @@
        "@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",
-        "@tanstack/react-query": "5.101.0",
+        "@tanstack/react-query": "5.100.14",
        "@timephy/rnnoise-wasm": "1.0.0",
        "crisp-sdk-web": "1.1.2",
        "derive-valtio": "0.2.0",
@@ -29,14 +28,14 @@
        "i18next-browser-languagedetector": "8.2.1",
        "i18next-parser": "9.4.0",
        "i18next-resources-to-backend": "1.2.1",
-        "livekit-client": "2.19.2",
-        "posthog-js": "1.391.2",
+        "livekit-client": "2.19.0",
+        "posthog-js": "1.386.5",
        "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"
@@ -2415,9 +2357,9 @@
      }
    },
    "node_modules/@tanstack/query-core": {
-      "version": "5.101.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.101.0.tgz",
-      "integrity": "sha512-cQetA74EB+seWySv1TTKr828TnP0u39m6LykwDXIo84SNortpDkp30TMEjkqtYCNP9c40uT/iwl6MLiufEt0Ow==",
+      "version": "5.100.14",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.100.14.tgz",
+      "integrity": "sha512-5X41dGpxgeaHISCRW2oYwcSycZeULZzAunaudXT9ov1KOTj9xwt0CH6hbwqP1/z74ZWF7rYFnDpyYH07XFcZew==",
      "license": "MIT",
      "funding": {
        "type": "github",
@@ -2436,12 +2378,12 @@
      }
    },
    "node_modules/@tanstack/react-query": {
-      "version": "5.101.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.101.0.tgz",
-      "integrity": "sha512-rLlJXSpkqfizLWgkR5+eLeIk0MvTx/meEIR7LRjxic+qxiQP8zVjq7BqQkiCMNLQBlLfuOLqqr6KO5GtrDlmSg==",
+      "version": "5.100.14",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.100.14.tgz",
+      "integrity": "sha512-oOr6aRdSFEwWhzxEkD/9ZcItM3+LjBSkeVmadWKwUssAHTsqd/7bOjWrX4AbvEkoEhgAxzN0Xk6H/aYzXiYBAw==",
      "license": "MIT",
      "dependencies": {
-        "@tanstack/query-core": "5.101.0"
+        "@tanstack/query-core": "5.100.14"
      },
      "funding": {
        "type": "github",
@@ -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",
@@ -8119,9 +8035,9 @@
      "license": "MIT"
    },
    "node_modules/livekit-client": {
-      "version": "2.19.2",
-      "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.19.2.tgz",
-      "integrity": "sha512-Kvk07QYDWRAbmYNLRll04ZIuxMQobW/oLPYnmR1kCy8GGHpU0gqyHf704Rz+29zfy8IJZRjKqeVbzGSKn9sumw==",
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.19.0.tgz",
+      "integrity": "sha512-aolY1XDAtx0nHKBNm29W9OhzBnSz1CP5kq3phvRhFfi1NbvMXs8tcACjAkZTnIKgihkp+BiJScZZ3tZv0Gz8sA==",
      "license": "Apache-2.0",
      "dependencies": {
        "@livekit/mutex": "1.1.1",
@@ -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.386.5",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.386.5.tgz",
+      "integrity": "sha512-ASejQQf5Xw0XolMwH/KCLZlZtoyLK6VsvORwGagAtfa8/ElIOF76BMQspkDsRTybEI+uzHqRDm2m/na1Dki2mA==",
      "license": "SEE LICENSE IN LICENSE",
      "dependencies": {
-        "@posthog/core": "^1.35.3",
-        "@posthog/types": "^1.390.2",
+        "@posthog/core": "^1.32.3",
+        "@posthog/types": "^1.386.3",
        "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": {
@@ -1,7 +1,7 @@
 {
  "name": "meet",
  "private": true,
-  "version": "1.23.0",
+  "version": "1.22.0",
  "type": "module",
  "scripts": {
    "dev": "panda codegen && vite",
@@ -17,16 +17,15 @@
  "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",
-    "@tanstack/react-query": "5.101.0",
+    "@tanstack/react-query": "5.100.14",
    "@timephy/rnnoise-wasm": "1.0.0",
    "crisp-sdk-web": "1.1.2",
    "derive-valtio": "0.2.0",
@@ -36,14 +35,14 @@
    "i18next-browser-languagedetector": "8.2.1",
    "i18next-parser": "9.4.0",
    "i18next-resources-to-backend": "1.2.1",
-    "livekit-client": "2.19.2",
-    "posthog-js": "1.391.2",
+    "livekit-client": "2.19.0",
+    "posthog-js": "1.386.5",
    "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:
@@ -6,4 +6,4 @@ DIR_MAILS="../backend/core/templates/mail/html/"
 if [ ! -d "${DIR_MAILS}" ]; then
  mkdir -p "${DIR_MAILS}";
 fi
-mjml mjml/*.mjml -o "${DIR_MAILS}" --config.allowIncludes true;
+mjml mjml/*.mjml -o "${DIR_MAILS}";
@@ -2,11 +2,6 @@
  <mj-include path="./partial/header.mjml" />

  <mj-body mj-class="bg--blue-100">
-    <!--
-      We load django tags here so they appear in the body of the HTML output.
-      This ensures html-to-text also includes them in the plain text template.
-    -->
-    <mj-raw>{% load i18n static extra_tags %}</mj-raw>
    <mj-wrapper css-class="wrapper" padding="0 40px 40px 40px">
      <mj-section css-class="wrapper-logo">
        <mj-column>
@@ -64,7 +59,7 @@
        </mj-column>
      </mj-section>
    </mj-wrapper>
-
-    <mj-include path="./partial/footer.mjml" />
  </mj-body>
+
+  <mj-include path="./partial/footer.mjml" />
 </mjml>
@@ -1,16 +1,21 @@
 <mj-head>
    <mj-title>{{ title }}</mj-title>
-    <mj-preview>{{ title }}</mj-preview>
-    <mj-font name="Roboto" href="https://fonts.bunny.net/css?family=roboto:400,700,900" />
+    <mj-preview>
+        <!--
+            We load django tags here, in this way there are put within the body in html output
+            so the html-to-text command includes it within its output
+        -->
+        {% load i18n static extra_tags %}
+        {{ title }}
+    </mj-preview>
    <mj-attributes>
+        <mj-font name="Roboto" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap" />
        <mj-all
                font-family="Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif"
                font-size="16px"
                line-height="1.5em"
                color="#3A3A3A"
        />
-        <mj-text font-family="Roboto, sans-serif" />
-        <mj-button font-family="Roboto, sans-serif" />
    </mj-attributes>
    <mj-style>
        /* Reset */
@@ -2,11 +2,6 @@
  <mj-include path="./partial/header.mjml" />

  <mj-body mj-class="bg--blue-100">
-    <!--
-      We load django tags here so they appear in the body of the HTML output.
-      This ensures html-to-text also includes them in the plain text template.
-    -->
-    <mj-raw>{% load i18n static extra_tags %}</mj-raw>
    <mj-wrapper css-class="wrapper" padding="5px 25px 0px 25px">
      <mj-section css-class="wrapper-logo">
        <mj-column>
@@ -1,11 +1,11 @@
 {
  "name": "mail_mjml",
-  "version": "1.23.0",
+  "version": "1.22.0",
  "description": "An util to generate html and text django's templates from mjml templates",
  "type": "module",
  "dependencies": {
-    "@html-to/text-cli": "0.6.0",
-    "mjml": "5.4.0"
+    "@html-to/text-cli": "0.5.4",
+    "mjml": "4.18.0"
  },
  "private": true,
  "scripts": {
@@ -1,12 +1,12 @@
 {
  "name": "sdk",
-  "version": "1.23.0",
+  "version": "1.22.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sdk",
-      "version": "1.23.0",
+      "version": "1.22.0",
      "license": "ISC",
      "workspaces": [
        "./library",
@@ -1,6 +1,6 @@
 {
  "name": "sdk",
-  "version": "1.23.0",
+  "version": "1.22.0",
  "author": "",
  "license": "ISC",
  "description": "",
@@ -1,7 +1,7 @@

 [project]
 name = "summary"
-version = "1.23.0"
+version = "1.22.0"
 dependencies = [
    "fastapi[standard]>=0.105.0",
    "uvicorn>=0.24.0",
@@ -59,16 +59,17 @@ async def create_transcribe_task_v2(
        ]
    )

-    properties = {}
-    if request.user_email:
-        properties["$set"] = {"email": request.user_email}
-
    # We track the request, this also properly initializes the user in the
    # analytics system, so that later feature flags work properly
    analytics.capture(
-        settings.posthog_transcript_request,
+        settings.posthog_event_request,
        request.user_sub,
-        properties=properties,
+        properties={
+            "kind": "transcribe",
+            "$set": {
+                "email": request.user_email,
+            },
+        },
    )

    return TranscribeWebhookPendingPayload(job_id=task.id).model_dump()
@@ -92,15 +93,15 @@ async def create_summarize_task_v2(

    # We track the request, this also properly initializes the user in the
    # analytics system, so that later feature flags work properly
-
-    properties = {}
-    if request.user_email:
-        properties["$set"] = {"email": request.user_email}
-
    analytics.capture(
-        settings.posthog_summary_request,
+        settings.posthog_event_request,
        request.user_sub,
-        properties=properties,
+        properties={
+            "kind": "summarize",
+            "$set": {
+                "email": request.user_email,
+            },
+        },
    )
    return SummarizeWebhookPendingPayload(job_id=task.id).model_dump()

@@ -11,7 +11,7 @@ from celery.utils.log import get_task_logger
 from posthog import Posthog

 from summary.core.config import get_settings
-from summary.core.models import SummarizeTaskJob, TranscribeTaskJob
+from summary.core.models import TranscribeTaskJob

 logger = get_task_logger(__name__)
 settings = get_settings()
@@ -109,15 +109,19 @@ class MetadataManager:
        """Check if task_id exists in tasks metadata cache."""
        return self._redis.exists(self._get_redis_key(task_id))

-    def create(self, task_id: str, task_payload: TranscribeTaskJob | SummarizeTaskJob):
+    def create(self, task_id: str, task_payload: TranscribeTaskJob):
        """Create initial metadata entry for a new task."""
        if self._is_disabled or self.has_task_id(task_id):
            return

        start_time = time.time()
+        parts = urlsplit(task_payload.cloud_storage_url)
+        clean_url = urlunsplit((parts.scheme, parts.netloc, parts.path, "", ""))
        initial_metadata = {
            "start_time": start_time,
+            "asr_model": settings.whisperx_asr_model,
            "retries": 0,
+            "filename": clean_url,
            "sub": task_payload.user_sub,
            # avoid None in redis, it shouldn't happen anyway in prod
            "email": task_payload.user_email or "",
@@ -125,15 +129,6 @@ class MetadataManager:
            "queuing_time": round(start_time - task_payload.received_at.timestamp(), 2),
        }

-        if isinstance(task_payload, TranscribeTaskJob):
-            parts = urlsplit(task_payload.cloud_storage_url)
-            clean_url = urlunsplit((parts.scheme, parts.netloc, parts.path, "", ""))
-            initial_metadata["source_url"] = clean_url
-            initial_metadata["asr_model"] = settings.whisperx_asr_model
-        elif isinstance(task_payload, SummarizeTaskJob):
-            initial_metadata["content_length"] = len(task_payload.content)
-            initial_metadata["llm_model"] = settings.llm_model
-
        self._save_metadata(task_id, initial_metadata)

    def retry(self, task_id):
@@ -542,28 +542,28 @@ def process_audio_transcribe_v2_task(
    call_webhook_v2_task.apply_async(
        args=[success_payload.model_dump(), payload.tenant_id]
    )
-    metadata_manager.capture(job_id, settings.posthog_transcript_success)
+    metadata_manager.capture(job_id, settings.posthog_event_success)

    return success_payload.model_dump()


@signals.task_prerun.connect(sender=process_audio_transcribe_v2_task)
-def task_started_transcript(task_id=None, task=None, args=None, **kwargs):
+def task_started(task_id=None, task=None, args=None, **kwargs):
    """Signal handler called before task execution begins."""
    if args:
        metadata_manager.create(task_id, TranscribeTaskJob.model_validate(args[0]))


@signals.task_retry.connect(sender=process_audio_transcribe_v2_task)
-def task_retry_handler_transcript(request=None, reason=None, einfo=None, **kwargs):
+def task_retry_handler(request=None, reason=None, einfo=None, **kwargs):
    """Signal handler called when task execution retries."""
    metadata_manager.retry(request.id)


@signals.task_failure.connect(sender=process_audio_transcribe_v2_task)
-def task_failure_handler_transcript(task_id, exception=None, **kwargs):
+def task_failure_handler(task_id, exception=None, **kwargs):
    """Signal handler called when task execution fails permanently."""
-    metadata_manager.capture(task_id, settings.posthog_transcript_failure)
+    metadata_manager.capture(task_id, settings.posthog_event_failure)


@signals.task_failure.connect(sender=process_audio_transcribe_v2_task)
@@ -648,30 +648,9 @@ def summarize_v2_task(
    call_webhook_v2_task.apply_async(
        args=[success_payload.model_dump(), payload.tenant_id]
    )
-    metadata_manager.capture(job_id, settings.posthog_summary_success)
-
    return success_payload.model_dump()


-@signals.task_prerun.connect(sender=summarize_v2_task)
-def task_started_summary(task_id=None, task=None, args=None, **kwargs):
-    """Signal handler called before task execution begins."""
-    if args:
-        metadata_manager.create(task_id, SummarizeTaskJob.model_validate(args[0]))
-
-
-@signals.task_retry.connect(sender=summarize_v2_task)
-def task_retry_handler_summary(request=None, reason=None, einfo=None, **kwargs):
-    """Signal handler called when task execution retries."""
-    metadata_manager.retry(request.id)
-
-
-@signals.task_failure.connect(sender=summarize_v2_task)
-def task_failure_handler_summary(task_id, exception=None, **kwargs):
-    """Signal handler called when task execution fails permanently."""
-    metadata_manager.capture(task_id, settings.posthog_summary_failure)
-
-
@signals.task_failure.connect(sender=summarize_v2_task)
 def handle_summarize_v2_failed(
    sender,
@@ -130,12 +130,9 @@ class Settings(BaseSettings):
    posthog_enabled: bool = False
    posthog_api_key: Optional[str] = None
    posthog_api_host: Optional[str] = "https://eu.i.posthog.com"
-    posthog_transcript_request: str = "transcript-request"
-    posthog_transcript_failure: str = "transcript-failure"
-    posthog_transcript_success: str = "transcript-success"
-    posthog_summary_request: str = "summary-request"
-    posthog_summary_failure: str = "summary-failure"
-    posthog_summary_success: str = "summary-success"
+    posthog_event_failure: str = "transcript-failure"
+    posthog_event_success: str = "transcript-success"
+    posthog_event_request: str = "transcript-request"

    # Langfuse (LLM Observability)
    langfuse_enabled: bool = False