♻️(frontend) inline MediaPipe WASM modules to avoid loading from remote

Copy the MediaPipe WASM modules into the frontend build output and
serve them locally, instead of loading them from the Google CDN at
runtime.

Mediapipe was a transitive dependency, add it explicitly.

Requested by some members of the community.
It closes #1168

CHANGELOG.md

@@ -8,14 +8,26 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Added
+
+- ✨(backend) allow searching the recording admin table by owner email
+- ✨(frontend) add participant color gradient when camera is off #1490
+- ✨(all) allow forcing SSO display name for authenticated users
+- ➕(frontend) install vite-plugin-static-copy for MediaPipe WASM assets
+
 ### Changed
 
 - 🗑️(settings) deprecate SUMMARY_SERVICE_VERSION=1
 - ⬆️(mail) update mjml to v5 and @html-to/text-cli
+- 🚸(frontend) initialize the join input name with the persisted full name
+- ♻️(frontend) refactor background processors to use the new API
+- ♻️(frontend) inline model weights to avoid loading them from remote
+- ♻️(frontend) inline MediaPipe WASM modules to avoid loading from remote
 
 ### Fixed
 
 - 🩹(backend) identify externally provisioned users to PostHog
+- 🐛(backend) fix info panel crash for unregistered rooms
 
 ## [1.23.0] - 2026-07-08
 
@@ -59,6 +71,7 @@ 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
 

src/backend/core/admin.py

@@ -402,7 +402,14 @@ class RecordingAdmin(admin.ModelAdmin):
     """Recording admin interface declaration."""
 
     inlines = (RecordingAccessInline,)
-    search_fields = ["status", "=id", "worker_id", "room__slug", "=room__id"]
+    search_fields = [
+        "status",
+        "=id",
+        "worker_id",
+        "room__slug",
+        "=room__id",
+        "accesses__user__email",
+    ]
     list_display = (
         "id",
         "status",

src/backend/core/api/__init__.py

@@ -68,6 +68,9 @@ 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)

src/backend/core/api/viewsets.py

@@ -92,6 +92,7 @@ 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
 
@@ -267,6 +268,9 @@ 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,

src/backend/core/tests/rooms/test_api_rooms_retrieve.py

@@ -130,6 +130,9 @@ 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",
@@ -162,6 +165,9 @@ 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",

src/backend/core/tests/test_utils.py

@@ -2,13 +2,109 @@
 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.utils import NotificationError, create_livekit_client, notify_participants
+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"
 
 
 @mock.patch("asyncio.get_running_loop")

src/backend/core/utils.py

@@ -109,11 +109,16 @@ def generate_token(
         default_username = "Anonymous"
     else:
         identity = str(user.sub)
-        default_username = str(user)
+        default_username = user.full_name or 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"],
@@ -121,7 +126,7 @@ def generate_token(
         )
         .with_grants(video_grants)
         .with_identity(identity)
-        .with_name(username or default_username)
+        .with_name(display_name)
         .with_attributes(
             {"color": color, "room_admin": "true" if is_admin_or_owner else "false"}
         )

src/backend/meet/settings.py

@@ -671,6 +671,11 @@ 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(

src/frontend/package-lock.json

@@ -15,6 +15,7 @@
         "@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",
@@ -63,6 +64,7 @@
         "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"
       }
     },
@@ -3192,6 +3194,19 @@
         "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",
@@ -7094,6 +7109,19 @@
         "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",
@@ -8675,6 +8703,19 @@
         "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",
@@ -11137,6 +11178,80 @@
         }
       }
     },
+    "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",

src/frontend/package.json

@@ -17,11 +17,12 @@
   "dependencies": {
     "@fontsource-variable/atkinson-hyperlegible-next": "5.2.6",
     "@fontsource-variable/lexend": "5.2.11",
-    "@libreaudio/la-call": "0.1.4",
     "@fontsource/opendyslexic": "5.2.5",
+    "@libreaudio/la-call": "0.1.4",
     "@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",
@@ -70,6 +71,7 @@
     "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"
   }
 }

src/frontend/src/api/useConfig.ts

@@ -58,6 +58,7 @@ 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> => {

src/frontend/src/features/home/components/CreateMeetingMenu.tsx

@@ -9,10 +9,11 @@ import { useState } from 'react'
 
 import { menuRecipe } from '@/primitives/menuRecipe'
 import { ApiRoom } from '@/features/rooms/api/ApiRoom'
-import { loadUserChoices } from '@livekit/components-core'
+import { useSnapshot } from 'valtio'
+import { userStore } from '@/stores/user'
 
 export const CreateMeetingMenu = () => {
-  const { username } = loadUserChoices()
+  const { username } = useSnapshot(userStore)
 
   const { t } = useTranslation('home')
   const { mutateAsync: createRoom } = useCreateRoom()

src/frontend/src/features/pip/components/layout/PipFocusLayout.tsx

@@ -26,6 +26,7 @@ export const PipFocusLayout = memo(
             <ParticipantTile
               key={getTrackKey(mainTrack)}
               trackRef={mainTrack}
+              disableTileControls
             />
           </MainSlot>
         )}
@@ -34,6 +35,7 @@ export const PipFocusLayout = memo(
             <ParticipantTile
               key={getTrackKey(thumbnailTrack)}
               trackRef={thumbnailTrack}
+              disableTileControls
             />
           </Thumbnail>
         )}
@@ -48,9 +50,10 @@ const FocusContainer = styled('div', {
     position: 'relative',
     width: '100%',
     height: '100%',
-    borderRadius: '4px',
+    borderRadius: '8px',
     overflow: 'hidden',
     backgroundColor: 'primaryDark.100',
+    boxSizing: 'border-box',
   },
 })
 
@@ -58,6 +61,8 @@ const MainSlot = styled('div', {
   base: {
     width: '100%',
     height: '100%',
+    borderRadius: '8px',
+    overflow: 'hidden',
     '& .lk-participant-media-video': {
       objectFit: 'contain',
     },
@@ -67,13 +72,13 @@ const MainSlot = styled('div', {
 const Thumbnail = styled('div', {
   base: {
     position: 'absolute',
-    right: '1rem',
+    right: '1.25rem',
-    bottom: '1rem',
+    bottom: '1.25rem',
     width: '42%',
     maxWidth: '220px',
     minWidth: '140px',
     aspectRatio: '16 / 9',
-    borderRadius: '4px',
+    borderRadius: '8px',
     overflow: 'hidden',
     boxShadow: 'md',
     zIndex: 2,

src/frontend/src/features/pip/components/layout/PipGridLayout.tsx

@@ -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} />
+          <ParticipantTile trackRef={track} disableTileControls />
         </GridCell>
       ))}
     </GridContainer>
@@ -54,7 +54,8 @@ const GridContainer = styled('div', {
     width: '100%',
     height: '100%',
     display: 'grid',
-    gap: '0.25rem',
+    gap: '0.5rem',
+    boxSizing: 'border-box',
   },
 })
 
@@ -63,7 +64,7 @@ const GridCell = styled('div', {
     position: 'relative',
     minWidth: 0,
     minHeight: 0,
-    borderRadius: '4px',
+    borderRadius: '8px',
     overflow: 'hidden',
     backgroundColor: 'primaryDark.100',
     // Paint on own layer so FLIP transforms don't trigger layout thrash.

src/frontend/src/features/pip/components/layout/PipScreenShareLayout.tsx

@@ -0,0 +1,97 @@
+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',
+    },
+  },
+})

src/frontend/src/features/pip/components/layout/PipStage.tsx

@@ -1,10 +1,11 @@
-import { useMemo } from 'react'
+import React, { 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 {
@@ -13,9 +14,12 @@ import {
 } from '@livekit/components-core'
 
 /**
- * PipStage picks between two layouts based on track count:
+ * PipStage picks between three layouts:
- *   - Focus mode (≤ 2 tracks): one main track + one thumbnail overlay.
+ *   - Screen share mode (any screen share active):
- *   - Grid mode  (3+ tracks):  adaptive tiling.
+ *     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.
  */
 export const PipStage = () => {
   const tracks = useTracks(
@@ -41,51 +45,55 @@ export const PipStage = () => {
     [tracks]
   )
 
-  // Grid mode order: screen share leads, then cameras (already ordered by
+  // Cap camera tiles in screen-share mode. Called unconditionally for hook rules.
-  // active speaker via the `ActiveSpeakersChanged` update above).
+  const paginatedCameraTracks = usePagination(MAX_PIP_TILES - 1, cameraTracks)
-  const gridTracks = useMemo(
-    () =>
-      screenShareTrack ? [screenShareTrack, ...cameraTracks] : cameraTracks,
-    [screenShareTrack, cameraTracks]
-  )
 
-  // Cap the grid at MAX_PIP_TILES per page. `usePagination` keeps the visible
+  // Cap the grid at MAX_PIP_TILES per page for the non-screenshare grid mode.
-  // page visually stable (active/recent speakers stay put) via its internal
+  const pagination = usePagination(MAX_PIP_TILES, cameraTracks)
-  // `useVisualStableUpdate`. Called unconditionally to respect hook rules.
-  const pagination = usePagination(MAX_PIP_TILES, gridTracks)
 
   if (tracks.length === 0) return null
 
-  /**
+  // Screen share active
-   * The focus layout shows one main track with one thumbnail overlay,
+  if (screenShareTrack) {
-   * so it can only fit 2 tracks. Beyond that we switch to the grid.
+    // Solo presenter: screen share fills the area, camera as small thumbnail
-   */
+    if (cameraTracks.length <= 1) {
-  if (gridTracks.length > 2) {
+      return (
-    return (
-      <StageWrapper>
         <StageFrame>
-          <PipGridLayout tracks={pagination.tracks} />
+          <PipFocusLayout
+            mainTrack={screenShareTrack}
+            thumbnailTrack={cameraTracks[0]}
+          />
         </StageFrame>
-        <PipPagination
+      )
-          totalPageCount={pagination.totalPageCount}
+    }
-          currentPage={pagination.currentPage}
+    // Multiple cameras: camera row at top, screen share below
-          nextPage={pagination.nextPage}
+    return (
-          prevPage={pagination.prevPage}
+      <PaginatedStage pagination={paginatedCameraTracks}>
+        <PipScreenShareLayout
+          screenShareTrack={screenShareTrack}
+          cameraTracks={paginatedCameraTracks.tracks}
         />
-      </StageWrapper>
+      </PaginatedStage>
     )
   }
 
+  // 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
 
@@ -96,6 +104,31 @@ 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',

src/frontend/src/features/pip/components/layout/StageFrame.tsx

@@ -25,8 +25,8 @@ const Container = styled('div', {
     flex: 1,
     minWidth: 0,
     minHeight: 0,
-    marginLeft: '0.5rem',
+    padding: '0.5rem',
-    marginRight: '0.5rem',
+    boxSizing: 'border-box',
     borderRadius: '4px',
     overflow: 'hidden',
   },

src/frontend/src/features/rooms/api/ApiRoom.ts

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

src/frontend/src/features/rooms/components/Conference.tsx

@@ -36,6 +36,7 @@ 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,
@@ -53,6 +54,8 @@ export const Conference = ({
     userChoices: LocalUserChoices
   }
 
+  const { username } = useSnapshot(userStore)
+
   useEffect(() => {
     posthog.capture('visit-room', { slug: roomId })
   }, [roomId, posthog])
@@ -83,10 +86,10 @@ export const Conference = ({
     queryFn: () =>
       fetchRoom({
         roomId: roomId as string,
-        username: userConfig.username,
+        username: username,
       }).catch((error) => {
         if (error.statusCode == '404') {
-          createRoom({ slug: roomId, username: userConfig.username })
+          createRoom({ slug: roomId, username })
         }
       }),
     retry: false,

src/frontend/src/features/rooms/components/Join.tsx

@@ -42,14 +42,17 @@ 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)
 
@@ -114,6 +117,9 @@ export const Join = ({
 }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'join' })
 
+  const { data: configData } = useConfig()
+  const { isLoggedIn, user } = useUser()
+
   const {
     audioEnabled,
     videoEnabled,
@@ -121,9 +127,10 @@ export const Join = ({
     audioOutputDeviceId,
     videoDeviceId,
     processorConfig,
-    username,
   } = useSnapshot(userChoicesStore)
 
+  const { username } = useSnapshot(userStore)
+
   const initialUserChoices = useRef<LocalUserChoices | null>(null)
 
   if (initialUserChoices.current === null) {
@@ -134,7 +141,6 @@ export const Join = ({
       audioOutputDeviceId,
       videoDeviceId,
       processorConfig,
-      username,
     }
   }
 
@@ -448,20 +454,23 @@ export const Join = ({
               <H lvl={1} margin="sm" centered>
                 {t('heading')}
               </H>
-              <Field
+              {(!isLoggedIn ||
-                type="text"
+                configData?.authenticated_users_can_edit_display_name) && (
-                onChange={saveUsername}
+                <Field
-                label={t('usernameLabel')}
+                  type="text"
-                id="input-name"
+                  onChange={saveUsername}
-                defaultValue={username}
+                  label={t('usernameLabel')}
-                validate={(value) => !value && t('errors.usernameEmpty')}
+                  id="input-name"
-                wrapperProps={{
+                  defaultValue={username || user?.full_name}
-                  noMargin: true,
+                  validate={(value) => !value && t('errors.usernameEmpty')}
-                  fullWidth: true,
+                  wrapperProps={{
-                }}
+                    noMargin: true,
-                autoComplete="name"
+                    fullWidth: true,
-                maxLength={50}
+                  }}
-              />
+                  autoComplete="name"
+                  maxLength={50}
+                />
+              )}
             </VStack>
           </Form>
         )

src/frontend/src/features/rooms/livekit/components/ParticipantPlaceholder.tsx

@@ -2,6 +2,7 @@ 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'
@@ -10,7 +11,6 @@ const StyledParticipantPlaceHolder = styled('div', {
   base: {
     width: '100%',
     height: '100%',
-    backgroundColor: 'primaryDark.100',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
@@ -26,6 +26,10 @@ 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)
@@ -39,7 +43,13 @@ export const ParticipantPlaceholder = ({
   const initialSize = useMemo(() => Math.round(avatarSize * 0.3), [avatarSize])
 
   return (
-    <StyledParticipantPlaceHolder ref={placeholderEl}>
+    <StyledParticipantPlaceHolder
+      ref={placeholderEl}
+      style={{
+        backgroundColor: participantColor,
+        backgroundImage: backgroundGradient,
+      }}
+    >
       <div
         style={{
           borderRadius: '50%',

src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx

@@ -52,6 +52,7 @@ export function TrackRefContextIfNeeded(
 
 interface ParticipantTileExtendedProps extends ParticipantTileProps {
   disableMetadata?: boolean
+  disableTileControls?: boolean
 }
 
 export const ParticipantTile: (
@@ -66,6 +67,7 @@ export const ParticipantTile: (
     onParticipantClick,
     disableSpeakingIndicator,
     disableMetadata,
+    disableTileControls,
     ...htmlProps
   }: ParticipantTileExtendedProps,
   ref
@@ -231,7 +233,7 @@ export const ParticipantTile: (
               )}
             </>
           )}
-          {!disableMetadata && (
+          {!disableMetadata && !disableTileControls && (
             <ParticipantTileFocus
               trackRef={trackReference}
               hasKeyboardFocus={hasKeyboardFocus}

src/frontend/src/features/rooms/livekit/components/blur/BackgroundCustomProcessor.ts

@@ -13,8 +13,10 @@ import {
 } from './TimerWorker'
 import {
   BackgroundProcessorInterface,
+  SELFIE_SEGMENTER_MODEL_PATH,
   type ProcessorConfig,
   type ProcessorType,
+  MEDIAPIPE_PATH_WASM,
 } from '.'
 
 const PROCESSING_WIDTH = 256
@@ -153,13 +155,10 @@ export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
   }
 
   async initSegmenter() {
-    const vision = await FilesetResolver.forVisionTasks(
+    const vision = await FilesetResolver.forVisionTasks(MEDIAPIPE_PATH_WASM)
-      'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm'
-    )
     this.imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
       baseOptions: {
-        modelAssetPath:
+        modelAssetPath: SELFIE_SEGMENTER_MODEL_PATH,
-          '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',

src/frontend/src/features/rooms/livekit/components/blur/FaceLandmarksProcessor.ts

@@ -11,7 +11,11 @@ import {
   TIMEOUT_TICK,
   timerWorkerScript,
 } from './TimerWorker'
-import { ProcessorType } from '.'
+import {
+  FACE_LANDMARKS_MODEL_PATH,
+  ProcessorType,
+  MEDIAPIPE_PATH_WASM,
+} from '.'
 
 const PROCESSING_WIDTH = 256 * 3
 const PROCESSING_HEIGHT = 144 * 3
@@ -128,13 +132,10 @@ export class FaceLandmarksProcessor implements TrackProcessor<Track.Kind> {
   }
 
   async initFaceLandmarker() {
-    const vision = await FilesetResolver.forVisionTasks(
+    const vision = await FilesetResolver.forVisionTasks(MEDIAPIPE_PATH_WASM)
-      'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm'
-    )
     this.faceLandmarker = await FaceLandmarker.createFromOptions(vision, {
       baseOptions: {
-        modelAssetPath:
+        modelAssetPath: FACE_LANDMARKS_MODEL_PATH,
-          'https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/latest/face_landmarker.task',
         delegate: 'GPU',
       },
       runningMode: 'VIDEO',

src/frontend/src/features/rooms/livekit/components/blur/UnifiedBackgroundTrackProcessor.ts

@@ -1,13 +1,14 @@
 import type { ProcessorOptions, Track } from 'livekit-client'
 import {
-  BackgroundBlur,
   ProcessorWrapper,
-  VirtualBackground,
+  BackgroundProcessor,
 } from '@livekit/track-processors'
 import {
   type ProcessorConfig,
   BackgroundProcessorInterface,
   ProcessorType,
+  MEDIAPIPE_PATH_WASM,
+  SELFIE_SEGMENTER_MODEL_PATH,
 } from '.'
 
 export class UnifiedBackgroundTrackProcessor implements BackgroundProcessorInterface {
@@ -20,10 +21,24 @@ export class UnifiedBackgroundTrackProcessor implements BackgroundProcessorInter
 
     if (opts.type === 'virtual') {
       this.processorType = ProcessorType.VIRTUAL
-      this.processor = VirtualBackground(opts.imagePath)
+      this.processor = BackgroundProcessor({
+        mode: 'virtual-background',
+        imagePath: opts.imagePath,
+        assetPaths: {
+          tasksVisionFileSet: MEDIAPIPE_PATH_WASM,
+          modelAssetPath: SELFIE_SEGMENTER_MODEL_PATH,
+        },
+      })
     } else if (opts.type === 'blur') {
       this.processorType = ProcessorType.BLUR
-      this.processor = BackgroundBlur(opts.blurRadius)
+      this.processor = BackgroundProcessor({
+        mode: 'background-blur',
+        blurRadius: opts.blurRadius,
+        assetPaths: {
+          tasksVisionFileSet: MEDIAPIPE_PATH_WASM,
+          modelAssetPath: SELFIE_SEGMENTER_MODEL_PATH,
+        },
+      })
     } else {
       throw new Error(
         'Must provide either imagePath for virtual background or blurRadius for blur'

src/frontend/src/features/rooms/livekit/components/blur/index.ts

@@ -4,6 +4,14 @@ 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',

src/frontend/src/features/rooms/utils/getParticipantBackgroundGradient.ts

@@ -0,0 +1,12 @@
+/**
+ * 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%)`

src/frontend/src/features/settings/components/tabs/AccountTab.tsx

@@ -8,8 +8,9 @@ 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/userChoices'
+import { saveUsername } from '@/stores/user'
 import { logout } from '@/features/auth/utils/logout'
+import { useConfig } from '@/api/useConfig'
 
 export type AccountTabProps = Pick<DialogProps, 'onOpenChange'> &
   Pick<TabPanelProps, 'id'>
@@ -17,6 +18,7 @@ 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()
@@ -45,15 +47,17 @@ export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
   return (
     <TabPanel padding={'md'} flex id={id}>
       <H lvl={2}>{t('account.heading')}</H>
-      <Field
+      {(!isLoggedIn || data?.authenticated_users_can_edit_display_name) && (
-        type="text"
+        <Field
-        label={t('account.nameLabel')}
+          type="text"
-        value={name}
+          label={t('account.nameLabel')}
-        onChange={setName}
+          value={name}
-        validate={(value) => {
+          onChange={setName}
-          return !value ? <p>{t('account.nameError')}</p> : null
+          validate={(value) => {
-        }}
+            return !value ? <p>{t('account.nameError')}</p> : null
-      />
+          }}
+        />
+      )}
       <H lvl={2}>{t('account.authentication')}</H>
       {isLoggedIn ? (
         <>

src/frontend/src/stores/user.ts

@@ -0,0 +1,37 @@
+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
+}

src/frontend/src/stores/userChoices.ts

@@ -12,7 +12,7 @@ import { VideoQuality } from 'livekit-client'
 
 export type VideoResolution = 'h720' | 'h360' | 'h180'
 
-export type LocalUserChoices = LocalUserChoicesLK & {
+export type LocalUserChoices = Omit<LocalUserChoicesLK, 'username'> & {
   processorConfig?: ProcessorConfig
   noiseReductionEnabled?: boolean
   audioOutputDeviceId?: string
@@ -32,7 +32,13 @@ function getUserChoicesState(): LocalUserChoices {
 
 export const userChoicesStore = proxy<LocalUserChoices>(getUserChoicesState())
 subscribe(userChoicesStore, () => {
-  saveUserChoices(userChoicesStore, false)
+  // 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)
 })
 
 // we run some logic on store loading to check if the processor config is still valid
@@ -90,10 +96,6 @@ export const saveVideoSubscribeQuality = (quality: VideoQuality) => {
   userChoicesStore.videoSubscribeQuality = quality
 }
 
-export const saveUsername = (username: string) => {
-  userChoicesStore.username = username
-}
-
 export const saveNoiseReductionEnabled = (enabled: boolean) => {
   userChoicesStore.noiseReductionEnabled = enabled
 }

src/frontend/src/utils/storageKeys.tsx

@@ -4,5 +4,6 @@
 export const STORAGE_KEYS = {
   NOTIFICATIONS: 'app_notification_settings',
   USER_PREFERENCES: 'app_user_preferences',
+  USER: 'app_user',
   ACCESSIBILITY: 'app_accessibility_settings',
 } as const

src/frontend/vite.config.ts

@@ -2,6 +2,7 @@ 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 }) => {
@@ -11,18 +12,32 @@ export default defineConfig(({ mode }) => {
       react(),
       svgr({
         svgrOptions: {
-          replaceAttrValues: { '#000': 'currentColor', '#000000': 'currentColor', '#1f1f1f': 'currentColor' },
+          replaceAttrValues: {
+            '#000': 'currentColor',
+            '#000000': 'currentColor',
+            '#1f1f1f': 'currentColor',
+          },
         },
       }),
-      env.VITE_ANALYZE === 'true' && visualizer({
+      viteStaticCopy({
-        open: true,
+        targets: [
-        filename: 'rollup-plugin-visualizer/stats.html',
+          {
-        gzipSize: true,
+            src: 'node_modules/@mediapipe/tasks-vision/wasm/*',
-        brotliSize: true,
+            dest: 'assets/mediapipe/wasm',
+            rename: { stripBase: 4 },
+          },
+        ],
       }),
+      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',

src/helm/env.d/common.yaml.gotmpl

@@ -191,6 +191,8 @@ 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: