♻️(frontend) decouple pip state and simplify pip options

Prevent PiP actions from affecting main panel state and reduce PiP-only noise.

.github/workflows/docker-hub.yml

@@ -147,6 +147,14 @@ jobs:
         with:
           username: ${{ secrets.DOCKER_HUB_USER }}
           password: ${{ secrets.DOCKER_HUB_PASSWORD }}
+      -
+        name: Run trivy scan
+        uses: numerique-gouv/action-trivy-cache@main
+        continue-on-error: true
+        with:
+          docker-build-args: '-f src/summary/Dockerfile --target production'
+          docker-image-name: '${{ env.DOCKER_CONTAINER_REGISTRY_HOSTNAME }}/${{ env.DOCKER_CONTAINER_REGISTRY_NAMESPACE }}/meet-summary:${{ github.sha }}'
+          docker-context: './src/summary'
       -
         name: Build and push
         uses: docker/build-push-action@v6
@@ -178,6 +186,14 @@ jobs:
         with:
           username: ${{ secrets.DOCKER_HUB_USER }}
           password: ${{ secrets.DOCKER_HUB_PASSWORD }}
+      -
+        name: Run trivy scan
+        uses: numerique-gouv/action-trivy-cache@main
+        continue-on-error: true
+        with:
+          docker-build-args: '-f src/agents/Dockerfile --target production'
+          docker-image-name: '${{ env.DOCKER_CONTAINER_REGISTRY_HOSTNAME }}/${{ env.DOCKER_CONTAINER_REGISTRY_NAMESPACE }}/meet-agents:${{ github.sha }}'
+          docker-context: './src/agents'
       -
         name: Build and push
         uses: docker/build-push-action@v6

CHANGELOG.md

@@ -8,19 +8,105 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Added
+
+- ✨(backend) monitor throttling rate failure through sentry #964
+- 🚀(paas) add PaaS deployment scripts, tested on Scalingo #957
+- ✨(feat) Introduce Picture-in-Picture (PiP) #890
+
+
+### Changed
+
+- ♿️(frontend) improve spinner reduced‑motion fallback #931
+- ♿️(frontend) fix form labels and autocomplete wiring #932
+- 🥅(summary) catch file-related exceptions when handling recording #944
+- 📝(frontend) update legal terms #956
+- ⚡️(backend) enhance django admin's loading performance #954
+- 🌐(frontend) add missing DE translation for accessibility settings
+
+### Fixed
+
+- 🔐(backend) enforce object-level permission checks on room endpoint #959
+- 🔒️(backend) add application validation when consuming external JWT #963
+
+## [1.5.0] - 2026-01-28
+
+### Changed
+
+- ♿️(frontend) adjust visual-only tooltip a11y labels #910
+- ♿️(frontend) sr pin/unpin announcements with dedicated messages #898
+- ♿(frontend) adjust sr announcements for idle disconnect timer #908
+- ♿️(frontend) add global screen reader announcer#922
+
+### Fixed
+
+- 🔒️(frontend) fix an XSS vulnerability on the recording page #911
+
+## [1.4.0] - 2026-01-25
+
+### Added
+
+- ✨(frontend) add configurable redirect for unauthenticated users #904
+
+### Changed
+
+- ♿️(frontend) add accessible back button in side panel #881
+- ♿️(frontend) improve participants toggle a11y label #880
+- ♿️(frontend) make carousel image decorative #871
+- ♿️(frontend) reactions are now vocalized and configurable #849
+- ♿️(frontend) improve background effect announcements #879
+
+### Fixed
+
+- 🔒(backend) prevent automatic upgrade setuptools
+- ♿(frontend) improve contrast for selected options #863
+- ♿️(frontend) announce copy state in invite dialog #877
+- 📝(frontend) align close dialog label in rooms locale #878
+- 🩹(backend) use case-insensitive email matching in the external api #887
+- 🐛(frontend) ensure transcript segments are sorted by their timestamp #899
+- 🐛(frontend) scope scrollbar gutter override to video rooms #882
+
+## [1.3.0] - 2026-01-13
+
+### Added
+
+- ✨(summary) add dutch and german languages
+- 🔧(agents) make Silero VAD optional
+- 🚸(frontend) explain to a user they were ejected
+
+### Changed
+
+- 📈(frontend) track new recording's modes
+- ♿️(frontend) improve accessibility of the background and effects menu
+- ♿️(frontend) improve SR and focus for transcript and recording #810
+- 💄(frontend) adjust spacing in the recording side panels
+- 🚸(frontend) remove the default comma delimiter in humanized durations
+
+### Fixed
+
+- 🐛(frontend) remove unexpected F2 tooltip when clicking video screen
+- 🩹(frontend) icon font loading to avoid text/icon flickering
+
+## [1.2.0] - 2026-01-05
+
+### Added
+
 - ✨(agent) support Kyutai client for subtitle
-- ✨(frontend) remove the beta badge
 - ✨(all) support starting transcription and recording simultaneously
 - ✨(backend) persist options on a recording
 - ✨(all) support choosing the transcription language
 - ✨(summary) add a download link to the audio/video file
 - ✨(frontend) allow unprivileged users to request a recording
+
+### Changed
+
+- 🚸(frontend) remove the beta badge
 - ♻️(summary) extract file handling in a robust service
 - ♻️(all) manage recording state on the backend side
 
 ## [1.1.0] - 2025-12-22
 
-### Added 
+### Added
 
 - ✨(backend) enable user creation via email for external integrations
 - ✨(summary) add Langfuse observability for LLM API calls
@@ -32,6 +118,6 @@ and this project adheres to
 - ♿(frontend) improve accessibility:
 - ♿️(frontend) hover controls, focus, SR #803
 - ♿️(frontend) change ptt keybinding from space to v #813
-- ♿(frontend) indicate external link opens in new window on feedback #816 
+- ♿(frontend) indicate external link opens in new window on feedback #816
 - ♿(frontend) fix heading level in modal to maintain semantic hierarchy #815
 - ♿️(frontend) Improve focus management when opening and closing chat #807

Dockerfile

@@ -4,7 +4,7 @@
 FROM python:3.13.5-alpine3.21 AS base
 
 # Upgrade pip to its latest release to speed up dependencies installation
-RUN python -m pip install --upgrade pip setuptools
+RUN python -m pip install --upgrade pip
 
 # Upgrade system packages to install security updates
 RUN apk update && \

Procfile

@@ -0,0 +1,2 @@
+web: bin/buildpack_start.sh
+postdeploy: python manage.py migrate

README.md

@@ -50,6 +50,9 @@ La Suite Meet is fully self-hostable and released under the MIT License, ensurin
 
 We’re continuously adding new features to enhance your experience, with the latest updates coming soon!
 
+### 🚀 Major roll out to all French public servants
+
+On the 25th of January 2026, David Amiel, France’s Minister for Civil Service and State Reform, announced the full deployment of Visio—the French government’s dedicated Meet platform—to all public servants. ([Source in French](https://www.latribune.fr/article/la-tribune-dimanche/politique/73157688099661/david-amiel-ministre-delegue-de-la-fonction-publique-nous-allons-sortir-de-la-dependance-aux-outils-americains))
 
 ## Table of Contents
 
@@ -86,7 +89,7 @@ We hope to see many more, here is an incomplete list of public La Suite Meet ins
 | [visio.numerique.gouv.fr](https://visio.numerique.gouv.fr/)   | DINUM    | French public agents working for the central administration and the extended public sphere. ProConnect is required to login in or sign up|
 | [visio.suite.anct.gouv.fr](https://visio.suite.anct.gouv.fr/) | ANCT    | French public agents working for the territorial administration and the extended public sphere. ProConnect is required to login in or sign up|
 | [visio.lasuite.coop](https://visio.lasuite.coop/)             | lasuite.coop    | Free and open demo to all. Content and accounts are reset after one month |
-| [meet.demo.mosacloud.eu](https://meet.demo.mosacloud.eu/)     | mosa.cloud    | Demo instance of mosa.cloud, a dutch company providing services around La Suite apps. |
+| [mosacloud.cloud](https://mosa.cloud/)                        | mosa.cloud    | Demo instance of mosa.cloud, a dutch company providing services around La Suite apps. |
 
 
 ## Contributing

bin/buildpack_postcompile.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+set -o errexit    # always exit on error
+set -o pipefail   # don't ignore exit codes when piping output
+
+echo "-----> Running post-compile script"
+
+# Cleanup
+rm -rf docker docs env.d gitlint

bin/buildpack_postfrontend.sh

@@ -0,0 +1,50 @@
+#!/bin/bash
+
+set -o errexit    # always exit on error
+set -o pipefail   # don't ignore exit codes when piping output
+
+echo "-----> Running post-frontend script"
+
+# Move the frontend build to the nginx root and clean up
+mkdir -p build/
+mv src/frontend/dist build/frontend-out
+
+ASSETS_DIR=build/frontend-out/assets
+if [ -n "$CUSTOM_LOGO_URL" ]; then
+    # Ensure https
+    [[ ! "$CUSTOM_LOGO_URL" =~ ^https:// ]] && echo "[custom-logo] ERROR: URL must use HTTPS" >&2 && exit 1
+
+    # Prevent SSRF
+    HOSTNAME=$(echo "$CUSTOM_LOGO_URL" | sed -E 's|^https://([^/:]+).*|\1|')
+    [[ "$HOSTNAME" =~ ^(localhost|127\.|10\.|172\.(1[6-9]|2[0-9]|3[01])\.|192\.168\.|0\.0\.0\.0|\[::1\]) ]] && echo "[custom-logo] ERROR: SSRF blocked: $HOSTNAME" >&2 && exit 1
+
+    LOGO_FILE="${ASSETS_DIR}/logo.svg"
+    TMP_FILE=$(mktemp "${LOGO_FILE}.XXXXXX.tmp")
+
+    # Actual download
+    echo "[custom-logo] INFO: Downloading custom logo from: $CUSTOM_LOGO_URL"
+    curl -fsSL --tlsv1.2 -o "$TMP_FILE" "$CUSTOM_LOGO_URL"
+
+    # Validate filesize
+    FILESIZE=$(stat -c%s "$TMP_FILE" 2>/dev/null || stat -f%z "$TMP_FILE")
+    [[ "$FILESIZE" -eq 0 ]] && echo "[custom-logo] ERROR: empty file" >&2 && exit 1
+    [[ "$FILESIZE" -gt 5242880 ]] && echo "[custom-logo] ERROR: file too large (${FILESIZE}B > 5MB)" >&2 && exit 1
+
+    # Validate file type
+    IS_SVG=false
+
+    HEADER=$(head -c 100 "$TMP_FILE" | tr -d '\0' | tr '[:upper:]' '[:lower:]')
+    [[ "$HEADER" =~ ^.*"<svg".*$ ]] && IS_SVG=true
+    [[ "$HEADER" =~ ^.*"<?xml".*"<svg".*$ ]] && IS_SVG=true
+
+    [[ "$IS_SVG" == false ]] && echo "[custom-logo] ERROR: not a valid SVG file" >&2 && exit 1
+
+    mv -f "$TMP_FILE" "$LOGO_FILE"
+    echo "[custom-logo] INFO: Custom logo downloaded successfuly"
+fi
+
+mv src/backend/* ./
+mv deploy/paas/* ./
+
+echo "3.13" > .python-version
+echo "." > requirements.txt

bin/buildpack_start.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# Start the Django backend server
+gunicorn -b 0.0.0.0:8000 meet.wsgi:application --log-file - &
+
+# Start the Nginx server
+bin/run &
+
+# if the current shell is killed, also terminate all its children     
+trap "pkill SIGTERM -P $$" SIGTERM
+
+# wait for a single child to finish,
+wait -n
+# then kill all the other tasks
+pkill -P $$

compose.yml

@@ -235,7 +235,7 @@ services:
       - livekit-egress
 
   livekit-egress:
-      image: livekit/egress
+      image: livekit/egress:v1.11.0
       environment:
         EGRESS_CONFIG_FILE: ./livekit-egress.yaml
       volumes:

deploy/paas/servers.conf.erb

@@ -0,0 +1,52 @@
+# ERB templated nginx configuration
+# see https://doc.scalingo.com/platform/deployment/buildpacks/nginx
+
+upstream backend_server {
+	server localhost:8000 fail_timeout=0;
+}
+
+server {
+  listen <%= ENV["PORT"] %>;
+  server_name _;
+  server_tokens off;
+
+  root /app/build/frontend-out;
+
+  # Django rest framework
+  location ^~ /api/ {
+      proxy_set_header X-Forwarded-Proto https;
+      proxy_set_header Host $http_host;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+
+      proxy_redirect off;
+      proxy_pass http://backend_server;
+  }
+
+  # Django admin
+  location ^~ /admin/ {
+      proxy_set_header X-Forwarded-Proto https;
+      proxy_set_header Host $http_host;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+
+      proxy_redirect off;
+      proxy_pass http://backend_server;
+  }
+
+  # Serve static files with caching
+  location ~* ^/assets/.*\.(css|js|json|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+      expires 30d;
+      add_header Cache-Control "public, max-age=2592000";
+  }
+
+  # Serve static files
+  location / {
+      try_files $uri $uri/ /index.html;
+      # Add no-cache headers
+      add_header Cache-Control "no-cache, no-store, must-revalidate";
+      add_header Pragma "no-cache";  # HTTP 1.0 header for backward compatibility
+      add_header Expires 0;
+  }
+
+  # Optionally, handle 404 errors by redirecting to index.html
+  error_page 404 =200 /index.html;
+}

docker/livekit/config/livekit-server.yaml

@@ -3,3 +3,8 @@ redis:
   address: redis:6379
 keys:
   devkey: secret
+
+webhook:
+  api_key: devkey
+  urls:
+      - http://app-dev:8000/api/v1.0/rooms/webhooks-livekit/

docs/examples/compose/compose.yaml

@@ -10,7 +10,7 @@ services:
     - env.d/postgresql
     - env.d/common
     volumes:
-    - ./data/databases/backend:/var/lib/postgresql/data/pgdata
+    - ./data/databases/backend:/var/lib/postgresql/data
 
   redis:
     image: redis:5

docs/examples/compose/keycloak/README.md

@@ -8,7 +8,7 @@
 ### Step 1: Prepare your working environment:
 
 ```bash
-mkdir keycloak/env.d && cd keycloak
+mkdir -p keycloak/env.d && cd keycloak
 curl -o compose.yaml https://raw.githubusercontent.com/suitenumerique/meet/refs/heads/main/docs/examples/compose/keycloak/compose.yaml
 curl -o env.d/kc_postgresql https://raw.githubusercontent.com/suitenumerique/meet/refs/heads/main/env.d/production.dist/kc_postgresql
 curl -o env.d/keycloak https://raw.githubusercontent.com/suitenumerique/meet/refs/heads/main/env.d/production.dist/keycloak
@@ -89,4 +89,4 @@ Your keycloak instance is now available on https://doc.yourdomain.tld
 #### Step 3: Get Client Credentials
 
 1. Go to the "Credentials" tab.
-2. Copy the client ID (`meet` in this example) and the client secret.
+2. Copy the client ID (`meet` in this example) and the client secret.

docs/installation/README.md

@@ -9,6 +9,10 @@ La Suite Meet maintainers use only the Kubernetes deployment method in productio
 We understand that not everyone has a Kubernetes cluster available, please follow the instructions provided [here](/docs/installation/compose.md) to set up a docker compose instance.
 We also provide [Docker images](https://hub.docker.com/u/lasuite?page=1&search=meet) that can be deployed using Compose.
 
+## Scalingo
+
+La Suite Meet can be deployed on Scalingo PaaS using the Suite Numérique buildpack. See the [Scalingo deployment guide](./scalingo.md) for detailed instructions.
+
 ## Other ways to install La Suite Meet
 Community members have contributed alternative ways to install La Suite Meet 🙏. While maintainers may not provide direct support, we help keep these instructions up to date, and you can reach out to contributors or the community for assistance.
 

docs/installation/compose.md

@@ -1,6 +1,6 @@
 # Installation with docker compose
 
-We provide a sample configuration for running Meet using Docker Compose. Please note that this configuration is experimental, and the official way to deploy Meet in production is to use [k8s](../installation/k8s.md)
+We provide a sample configuration for running Meet using Docker Compose. Please note that this configuration is experimental, and the official way to deploy Meet in production is to use [k8s](../installation/kubernetes.md).
 
 ## Requirements
 
@@ -47,7 +47,7 @@ curl -o default.conf.template https://raw.githubusercontent.com/suitenumerique/m
 
 ## Step 2: Configuration
 
-Meet configuration is achieved through environment variables. We provide a [detailed description of all variables](../env.md).
+Meet configuration is achieved through environment variables. We provide a [detailed description of all variables](../../src/helm/meet/README.md).
 
 In this example, we assume the following services:
 
@@ -129,7 +129,7 @@ The following ports will need to be opened:
 - 7881/tcp - WebRTC ICE over TCP
 - 7882/udp - for WebRTC multiplexing over UDP
 
-If you are using ufw, enter the follwoing:
+If you are using ufw, enter the following:
 ```
 ufw allow 80/tcp
 ufw allow 443/tcp
@@ -177,6 +177,15 @@ You will need to uncomment the environment and network sections in compose file
 #    external: true
 ```
 
+#### Caddy Reverse Proxy
+Expose the Frontend port to the host
+```yaml
+frontend:
+  …
+  ports:
+    - "8086:8086"
+```
+
 ## Step 5: Start Meet
 
 You are ready to start your Meet application !
@@ -198,7 +207,7 @@ Replace `<admin email>` with the email of your admin user and generate a secure
 
 Your Meet instance is now available on the domain you defined, https://meet.yourdomain.tld.
 
-THe admin interface is available on https://meet.yourdomain.tld/admin with the admin user you just created.
+The admin interface is available on https://meet.yourdomain.tld/admin with the admin user you just created.
 
 ## How to upgrade your Meet application
 

docs/installation/scalingo.md

@@ -0,0 +1,185 @@
+# Deployment on Scalingo
+
+This guide explains how to deploy La Suite Meet on [Scalingo](https://scalingo.com/) using the [Suite Numérique buildpack](https://github.com/suitenumerique/buildpack).
+
+## Overview
+
+Scalingo is a Platform-as-a-Service (PaaS) that simplifies application deployment. This setup uses a custom buildpack to handle both the frontend (Vite) and backend (Django) builds, serving them through Nginx.
+
+## Prerequisites
+
+- A Scalingo account
+- Scalingo CLI installed (optional but recommended)
+- A PostgreSQL database addon
+- A Redis addon (for caching and sessions)
+
+## Step 1: Create Your App
+
+Create a new app on Scalingo using `scalingo` cli or using the [Scalingo dashboard](https://dashboard.scalingo.com/).
+
+## Step 2: Provision Addons
+
+Add the required PostgreSQL and Redis services.
+
+This will set the following environment variables automatically:
+- `SCALINGO_POSTGRESQL_URL` - Database connection string
+- `SCALINGO_REDIS_URL` - Redis connection string
+
+## Step 3: Configure Environment Variables
+
+Set the following environment variables in your Scalingo app:
+
+### Buildpack Configuration
+
+```bash
+scalingo env-set BUILDBACK_URL="https://github.com/suitenumerique/buildpack#main"
+scalingo env-set LASUITE_APP_NAME="meet"
+scalingo env-set LASUITE_BACKEND_DIR="."
+scalingo env-set LASUITE_FRONTEND_DIR="src/frontend/"
+scalingo env-set LASUITE_NGINX_DIR="."
+scalingo env-set LASUITE_SCRIPT_POSTCOMPILE="bin/buildpack_postcompile.sh"
+scalingo env-set LASUITE_SCRIPT_POSTFRONTEND="bin/buildpack_postfrontend.sh"
+```
+
+### Database and Cache
+
+```bash
+scalingo env-set DATABASE_URL="\$SCALINGO_POSTGRESQL_URL"
+scalingo env-set REDIS_URL="\$SCALINGO_REDIS_URL"
+```
+
+### Django Settings
+
+```bash
+scalingo env-set DJANGO_SETTINGS_MODULE="meet.settings"
+scalingo env-set DJANGO_CONFIGURATION="Production"
+scalingo env-set DJANGO_SECRET_KEY="<generate-a-secure-secret-key>"
+scalingo env-set DJANGO_ALLOWED_HOSTS="my-meet-app.osc-fr1.scalingo.io"
+```
+
+### OIDC Authentication
+
+Configure your OIDC provider (e.g., Keycloak, Authentik):
+
+```bash
+scalingo env-set OIDC_OP_BASE_URL="https://auth.yourdomain.com/realms/meet"
+scalingo env-set OIDC_RP_CLIENT_ID="meet-client-id"
+scalingo env-set OIDC_RP_CLIENT_SECRET="<your-client-secret>"
+scalingo env-set OIDC_RP_SIGN_ALGO="RS256"
+```
+
+### LiveKit Configuration
+
+Meet requires a LiveKit server for video conferencing:
+
+```bash
+scalingo env-set LIVEKIT_API_URL="wss://livekit.yourdomain.com"
+scalingo env-set LIVEKIT_API_KEY="<your-livekit-api-key>"
+scalingo env-set LIVEKIT_API_SECRET="<your-livekit-api-secret>"
+```
+
+### Email Configuration (Optional)
+
+For email notifications see https://doc.scalingo.com/platform/app/sending-emails:
+
+```bash
+scalingo env-set DJANGO_EMAIL_HOST="smtp.example.org"
+scalingo env-set DJANGO_EMAIL_PORT="587"
+scalingo env-set DJANGO_EMAIL_HOST_USER="<smtp-user>"
+scalingo env-set DJANGO_EMAIL_HOST_PASSWORD="<smtp-password>"
+scalingo env-set DJANGO_EMAIL_USE_TLS="True"
+scalingo env-set DJANGO_EMAIL_FROM="meet@yourdomain.com"
+```
+
+## Step 4: Deploy
+
+Deploy your application:
+
+```bash
+git push scalingo main
+```
+
+The Procfile will automatically:
+1. Build the frontend (Vite)
+2. Build the backend (Django)
+3. Run the post-compile script (cleanup)
+4. Run the post-frontend script (move assets and prepare for deployment)
+5. Start Nginx and Gunicorn
+6. Run django migrations
+
+## Step 5: Create superuser
+
+After the first deployment, create an admin user:
+
+```bash
+scalingo run python manage.py createsuperuser
+```
+
+## Custom Domain (Optional)
+
+To use a custom domain:
+
+1. Add the domain in Scalingo dashboard
+2. Update `DJANGO_ALLOWED_HOSTS` with your custom domain
+3. Configure your DNS to point to Scalingo
+
+```bash
+scalingo domains-add meet.yourdomain.com
+scalingo env-set DJANGO_ALLOWED_HOSTS="meet.yourdomain.com,my-meet-app.osc-fr1.scalingo.io"
+```
+
+## Custom Logo (Optional)
+
+To use a custom logo, set the `CUSTOM_LOGO_URL` environment variable with an HTTPS URL pointing to an SVG item (max 5MB):
+
+```bash
+scalingo env-set CUSTOM_LOGO_URL="https://cdn.yourdomain.com/logo.svg"
+```
+
+## Troubleshooting
+
+### Check Logs
+
+```bash
+scalingo logs --tail
+```
+
+### Common Issues
+
+1. **Build fails**: Check that all required environment variables are set
+2. **Database connection error**: Verify `DATABASE_URL` is correctly set to `$SCALINGO_POSTGRESQL_URL`
+3. **Static files not served**: Ensure the buildpack post-frontend script ran successfully
+4. **OIDC errors**: Verify your OIDC provider configuration and callback URLs
+
+### Useful Commands
+
+```bash
+# Open a console
+scalingo run bash
+
+# Restart the app
+scalingo restart
+
+# Scale containers
+scalingo scale web:2
+
+# One-off command
+scalingo run python manage.py shell
+```
+
+## Architecture
+
+On Scalingo, the application runs as follows:
+
+1. **Build Phase**: The buildpack compiles both frontend and backend
+2. **Runtime**:
+   - Nginx serves static files and proxies to the backend
+   - Gunicorn runs the Django WSGI application
+   - Both processes are managed by the `bin/buildpack_start.sh` script
+
+## Additional Resources
+
+- [Scalingo Documentation](https://doc.scalingo.com/)
+- [Suite Numérique Buildpack](https://github.com/suitenumerique/buildpack)
+- [Meet Environment Variables](../../src/helm/meet/README.md)
+- [Django Configurations Documentation](https://django-configurations.readthedocs.io/)

env.d/development/summary.dist

@@ -1,7 +1,7 @@
 APP_NAME="meet-app-summary-dev"
 APP_API_TOKEN="password"
 
-AWS_STORAGE_BUCKET_NAME="meet-media-storage"
+AWS_STORAGE_BUCKET_NAME="http://meet-media-storage"
 AWS_S3_ENDPOINT_URL="minio:9000"
 AWS_S3_SECURE_ACCESS=false
 

env.d/production.dist/common

@@ -20,7 +20,7 @@ DJANGO_EMAIL_FROM=<your email address>
 #DJANGO_EMAIL_USE_SSL=true # A flag to enable or disable SSL for email sending.
 
 DJANGO_EMAIL_BRAND_NAME="La Suite Numérique" 
-DJANGO_EMAIL_LOGO_IMG="https://${meet_HOST}/assets/logo-suite-numerique.png"
+DJANGO_EMAIL_LOGO_IMG="https://${MEET_HOST}/assets/logo-suite-numerique.png"
 
 # Backend url
 MEET_BASE_URL="https://${MEET_HOST}"

src/agents/multi-user-transcriber.py

@@ -31,6 +31,7 @@ logger = logging.getLogger("transcriber")
 
 TRANSCRIBER_AGENT_NAME = os.getenv("TRANSCRIBER_AGENT_NAME", "multi-user-transcriber")
 STT_PROVIDER = os.getenv("STT_PROVIDER", "deepgram")
+ENABLE_SILERO_VAD = os.getenv("ENABLE_SILERO_VAD", "true").lower() == "true"
 
 
 def create_stt_provider():
@@ -122,9 +123,8 @@ class MultiUserTranscriber:
         if participant.identity in self._sessions:
             return self._sessions[participant.identity]
 
-        session = AgentSession(
-            vad=self.ctx.proc.userdata["vad"],
-        )
+        vad = self.ctx.proc.userdata.get("vad", None)
+        session = AgentSession(vad=vad)
         room_io = RoomIO(
             agent_session=session,
             room=self.ctx.room,
@@ -193,7 +193,8 @@ async def handle_transcriber_job_request(job_req: JobRequest) -> None:
 
 def prewarm(proc: JobProcess):
     """Preload voice activity detection model."""
-    proc.userdata["vad"] = silero.VAD.load()
+    if ENABLE_SILERO_VAD:
+        proc.userdata["vad"] = silero.VAD.load()
 
 
 if __name__ == "__main__":

src/agents/pyproject.toml

@@ -1,7 +1,7 @@
 
 [project]
 name = "agents"
-version = "1.1.0"
+version = "1.5.0"
 requires-python = ">=3.12"
 dependencies = [
     "livekit-agents==1.3.10",

src/backend/core/admin.py

@@ -115,6 +115,10 @@ class RoomAdmin(admin.ModelAdmin):
     list_filter = ["access_level", "created_at"]
     readonly_fields = ["id", "created_at", "updated_at"]
 
+    def get_queryset(self, request):
+        """Optimize queries by prefetching related access and user data to avoid N+1 queries."""
+        return super().get_queryset(request).prefetch_related("accesses__user")
+
     def get_owner(self, obj):
         """Return the owner of the room for display in the admin list."""
 
@@ -138,6 +142,7 @@ class RecordingAccessInline(admin.TabularInline):
 
     model = models.RecordingAccess
     extra = 0
+    autocomplete_fields = ["user"]
 
 
 @admin.action(description=_("Resend notification to external service"))
@@ -207,8 +212,18 @@ class RecordingAdmin(admin.ModelAdmin):
         "created_at",
         "worker_id",
     )
-    list_filter = ["status", "room", "created_at"]
-    readonly_fields = ["id", "created_at", "updated_at"]
+    list_filter = ["created_at"]
+    list_select_related = ("room",)
+    readonly_fields = (
+        "id",
+        "created_at",
+        "options",
+        "mode",
+        "room",
+        "status",
+        "updated_at",
+        "worker_id",
+    )
     actions = [resend_notification]
 
     def get_queryset(self, request):

src/backend/core/api/throttling.py

@@ -0,0 +1,26 @@
+"""Throttling modules for the API."""
+
+from lasuite.drf.throttling import MonitoredThrottleMixin
+from rest_framework.throttling import AnonRateThrottle
+from sentry_sdk import capture_message
+
+
+def sentry_monitoring_throttle_failure(message):
+    """Log when a failure occurs to detect rate limiting issues."""
+    capture_message(message, "warning")
+
+
+class MonitoredAnonRateThrottle(MonitoredThrottleMixin, AnonRateThrottle):
+    """Throttle for the monitored scoped rate throttle."""
+
+
+class RequestEntryAnonRateThrottle(MonitoredAnonRateThrottle):
+    """Throttle Anonymous user requesting room entry"""
+
+    scope = "request_entry"
+
+
+class CreationCallbackAnonRateThrottle(MonitoredAnonRateThrottle):
+    """Throttle Anonymous user requesting room generation callback"""
+
+    scope = "creation_callback"

src/backend/core/api/viewsets.py

@@ -10,7 +10,7 @@ from django.http import Http404
 from django.shortcuts import get_object_or_404
 from django.utils.text import slugify
 
-from rest_framework import decorators, mixins, pagination, throttling, viewsets
+from rest_framework import decorators, mixins, pagination, viewsets
 from rest_framework import (
     exceptions as drf_exceptions,
 )
@@ -58,7 +58,7 @@ from core.services.room_creation import RoomCreation
 from core.services.subtitle import SubtitleException, SubtitleService
 
 from ..authentication.livekit import LiveKitTokenAuthentication
-from . import permissions, serializers
+from . import permissions, serializers, throttling
 from .feature_flag import FeatureFlag
 
 # pylint: disable=too-many-ancestors
@@ -191,18 +191,6 @@ class UserViewSet(
         )
 
 
-class RequestEntryAnonRateThrottle(throttling.AnonRateThrottle):
-    """Throttle Anonymous user requesting room entry"""
-
-    scope = "request_entry"
-
-
-class CreationCallbackAnonRateThrottle(throttling.AnonRateThrottle):
-    """Throttle Anonymous user requesting room generation callback"""
-
-    scope = "creation_callback"
-
-
 class RoomViewSet(
     mixins.CreateModelMixin,
     mixins.DestroyModelMixin,
@@ -379,7 +367,7 @@ class RoomViewSet(
         methods=["post"],
         url_path="request-entry",
         permission_classes=[],
-        throttle_classes=[RequestEntryAnonRateThrottle],
+        throttle_classes=[throttling.RequestEntryAnonRateThrottle],
     )
     def request_entry(self, request, pk=None):  # pylint: disable=unused-argument
         """Request entry to a room"""
@@ -489,7 +477,7 @@ class RoomViewSet(
         methods=["post"],
         url_path="creation-callback",
         permission_classes=[],
-        throttle_classes=[CreationCallbackAnonRateThrottle],
+        throttle_classes=[throttling.CreationCallbackAnonRateThrottle],
     )
     def creation_callback(self, request):
         """Retrieve cached room data via an unauthenticated request with a unique ID.

src/backend/core/external_api/authentication.py

@@ -10,6 +10,8 @@ import jwt as pyJwt
 from lasuite.oidc_resource_server.backend import ResourceServerBackend as LaSuiteBackend
 from rest_framework import authentication, exceptions
 
+from core.models import Application
+
 User = get_user_model()
 logger = logging.getLogger(__name__)
 
@@ -94,6 +96,18 @@ class ApplicationJWTAuthentication(authentication.BaseAuthentication):
             logger.warning("Missing 'client_id' in JWT payload")
             raise exceptions.AuthenticationFailed("Invalid token claims.")
 
+        try:
+            application = Application.objects.get(client_id=client_id)
+        except Application.DoesNotExist as e:
+            logger.warning("Application not found: %s", client_id)
+            raise exceptions.AuthenticationFailed("Application not found.") from e
+
+        if not application.active:
+            logger.warning(
+                "Inactive application attempted authentication: %s", client_id
+            )
+            raise exceptions.AuthenticationFailed("Application is disabled.")
+
         if not is_delegated:
             logger.warning("Token is not marked as delegated")
             raise exceptions.AuthenticationFailed("Invalid token type.")

src/backend/core/external_api/permissions.py

@@ -33,12 +33,11 @@ class BaseScopePermission(permissions.BasePermission):
         Raises:
             PermissionDenied: If required scope is missing from token
         """
-        # Get the current action (e.g., 'list', 'create')
+        # Get the current action (e.g., 'list', 'create'), if None let DRF handle it
         action = getattr(view, "action", None)
         if not action:
-            raise exceptions.PermissionDenied(
-                "Insufficient permissions. Unknown action."
-            )
+            # DRF routers return a 405 for unsupported methods
+            return True
 
         required_scope = self.scope_map.get(action)
         if not required_scope:
@@ -57,9 +56,12 @@ class BaseScopePermission(permissions.BasePermission):
         if isinstance(token_scopes, str):
             token_scopes = token_scopes.split()
 
+        # Ensure scopes is a deduplicated list (preserving order) and lowercase all scopes
+        token_scopes = list(dict.fromkeys(scope.lower() for scope in token_scopes))
+
         if settings.OIDC_RS_SCOPES_PREFIX:
             token_scopes = [
-                scope.replace(f"{settings.OIDC_RS_SCOPES_PREFIX}:", "")
+                scope.removeprefix(f"{settings.OIDC_RS_SCOPES_PREFIX}:")
                 for scope in token_scopes
             ]
 
@@ -82,3 +84,23 @@ class HasRequiredRoomScope(BaseScopePermission):
         "partial_update": models.ApplicationScope.ROOMS_UPDATE,
         "destroy": models.ApplicationScope.ROOMS_DELETE,
     }
+
+
+class RoomPermissions(permissions.BasePermission):
+    """Permissions applying to the room API endpoint."""
+
+    def has_permission(self, request, view):
+        """Allow access only to authenticated users."""
+        return request.user.is_authenticated
+
+    def has_object_permission(self, request, view, obj):
+        """Enforce role-based access: read=any role, delete=owner, write=admin or owner."""
+        user = request.user
+
+        if request.method in permissions.SAFE_METHODS:
+            return obj.has_any_role(user)
+
+        if request.method == "DELETE":
+            return obj.is_owner(user)
+
+        return obj.is_administrator_or_owner(user)

src/backend/core/external_api/viewsets.py

@@ -5,7 +5,7 @@ from logging import getLogger
 
 from django.conf import settings
 from django.contrib.auth.hashers import check_password
-from django.core.exceptions import ValidationError
+from django.core.exceptions import SuspiciousOperation, ValidationError
 from django.core.validators import validate_email
 
 import jwt
@@ -28,7 +28,7 @@ from . import authentication, permissions, serializers
 logger = getLogger(__name__)
 
 
-class ApplicationViewSet(viewsets.GenericViewSet):
+class ApplicationViewSet(viewsets.ViewSet):
     """API endpoints for application authentication and token generation."""
 
     @decorators.action(
@@ -93,7 +93,7 @@ class ApplicationViewSet(viewsets.GenericViewSet):
             )
 
         try:
-            user = models.User.objects.get(email=email)
+            user = models.User.objects.get(email__iexact=email)
         except models.User.DoesNotExist as e:
             if (
                 settings.APPLICATION_ALLOW_USER_CREATION
@@ -123,6 +123,10 @@ class ApplicationViewSet(viewsets.GenericViewSet):
                 )
             else:
                 raise drf_exceptions.NotFound("User not found.") from e
+        except models.User.MultipleObjectsReturned as e:
+            raise SuspiciousOperation(
+                "Multiple user accounts share a common email."
+            ) from e
 
         now = datetime.now(timezone.utc)
         scope = " ".join(application.scopes or [])
@@ -178,7 +182,9 @@ class RoomViewSet(
         ResourceServerAuthentication,
     ]
     permission_classes = [
-        api.permissions.IsAuthenticated & permissions.HasRequiredRoomScope
+        api.permissions.IsAuthenticated
+        & permissions.HasRequiredRoomScope
+        & permissions.RoomPermissions
     ]
     queryset = models.Room.objects.all()
     serializer_class = serializers.RoomSerializer

src/backend/core/models.py

@@ -292,6 +292,10 @@ class Resource(BaseModel):
                 role = RoleChoices.MEMBER
         return role
 
+    def has_any_role(self, user):
+        """Check if a user has any role on the resource."""
+        return self.get_role(user) is not None
+
     def is_administrator_or_owner(self, user):
         """
         Check if a user is administrator or owner of the resource."""

src/backend/core/services/livekit_events.py

@@ -118,8 +118,10 @@ class LiveKitEventsService:
         except Exception as e:
             raise InvalidPayloadError("Invalid webhook payload") from e
 
-        if self._filter_regex and not self._filter_regex.search(data.room.name):
-            logger.info("Filtered webhook event for room '%s'", data.room.name)
+        room_name = data.room.name or data.egress_info.room_name
+
+        if self._filter_regex and not self._filter_regex.search(room_name):
+            logger.info("Filtered webhook event for room '%s'", room_name)
             return
 
         try:

src/backend/core/tests/recording/event/test_notification.py

@@ -102,6 +102,7 @@ def test_notify_user_by_email_success(mocked_current_site, settings):
     settings.EMAIL_SUPPORT_EMAIL = "support@acme.com"
     settings.EMAIL_LOGO_IMG = "https://acme.com/logo"
     settings.SCREEN_RECORDING_BASE_URL = "https://acme.com/recordings"
+    settings.RECORDING_DOWNLOAD_BASE_URL = None
     settings.EMAIL_FROM = "notifications@acme.com"
 
     recording = factories.RecordingFactory(room__name="Conference Room A")

src/backend/core/tests/test_external_api_rooms.py

@@ -2,21 +2,21 @@
 Tests for external API /room endpoint
 """
 
-# pylint: disable=W0621
+# pylint: disable=W0621,C0302
 
+import uuid
 from datetime import datetime, timedelta, timezone
+from unittest import mock
 
 from django.conf import settings
 
 import jwt
 import pytest
 import responses
+from lasuite.oidc_resource_server.authentication import ResourceServerAuthentication
 from rest_framework.test import APIClient
 
-from core.factories import (
-    RoomFactory,
-    UserFactory,
-)
+from core.factories import ApplicationFactory, RoomFactory, UserFactory
 from core.models import ApplicationScope, RoleChoices, Room, RoomAccessLevel, User
 
 pytestmark = pytest.mark.django_db
@@ -27,12 +27,14 @@ def generate_test_token(user, scopes):
     now = datetime.now(timezone.utc)
     scope_string = " ".join(scopes)
 
+    application = ApplicationFactory()
+
     payload = {
         "iss": settings.APPLICATION_JWT_ISSUER,
         "aud": settings.APPLICATION_JWT_AUDIENCE,
         "iat": now,
         "exp": now + timedelta(seconds=settings.APPLICATION_JWT_EXPIRATION_SECONDS),
-        "client_id": "test-client-id",
+        "client_id": str(application.client_id),
         "scope": scope_string,
         "user_id": str(user.id),
         "delegated": True,
@@ -53,6 +55,23 @@ def test_api_rooms_list_requires_authentication():
     assert response.status_code == 401
 
 
+def test_api_rooms_list_inactive_user(settings):
+    """List should return 401 if user is inactive."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+
+    user1 = UserFactory(is_active=False)
+    RoomFactory(users=[(user1, RoleChoices.OWNER)])
+
+    token = generate_test_token(user1, [ApplicationScope.ROOMS_LIST])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.get("/external-api/v1.0/rooms/")
+
+    assert response.status_code == 401
+    assert "user account is disabled" in str(response.data).lower()
+
+
 def test_api_rooms_list_with_valid_token(settings):
     """Listing rooms with valid token should succeed."""
 
@@ -73,6 +92,24 @@ def test_api_rooms_list_with_valid_token(settings):
     assert response.data["results"][0]["id"] == str(room.id)
 
 
+def test_api_rooms_list_with_no_rooms(settings):
+    """Listing rooms with a valid token returns an empty list when there are no rooms."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+
+    user = UserFactory()
+
+    # Generate valid token
+    token = generate_test_token(user, [ApplicationScope.ROOMS_LIST])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.get("/external-api/v1.0/rooms/")
+
+    assert response.status_code == 200
+    assert response.data["count"] == 0
+    assert response.data["results"] == []
+
+
 def test_api_rooms_list_with_expired_token(settings):
     """Listing rooms with expired token should return 401."""
     settings.APPLICATION_JWT_SECRET_KEY = "devKey"
@@ -92,8 +129,8 @@ def test_api_rooms_list_with_expired_token(settings):
 
 
 @responses.activate
-def test_api_rooms_list_with_invalid_token(settings):
-    """Listing rooms with invalid token should return 400."""
+def test_api_rooms_list_with_invalid_rs_token(settings):
+    """Listing rooms with invalid resource server token should return 400."""
 
     settings.OIDC_OP_INTROSPECTION_ENDPOINT = "https://oidc.example.com/introspect"
     settings.OIDC_OP_URL = "https://oidc.example.com"
@@ -130,7 +167,27 @@ def test_api_rooms_list_missing_scope(settings):
     response = client.get("/external-api/v1.0/rooms/")
 
     assert response.status_code == 403
-    assert "Insufficient permissions. Required scope: rooms:list" in str(response.data)
+    assert (
+        "insufficient permissions. required scope: rooms:list"
+        in str(response.data).lower()
+    )
+
+
+def test_api_rooms_list_no_scope(settings):
+    """Listing rooms without any scope should return 403."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+
+    user = UserFactory()
+
+    # Token without scope
+    token = generate_test_token(user, [])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.get("/external-api/v1.0/rooms/")
+
+    assert response.status_code == 403
+    assert "insufficient permissions." in str(response.data).lower()
 
 
 def test_api_rooms_list_filters_by_user(settings):
@@ -144,7 +201,9 @@ def test_api_rooms_list_filters_by_user(settings):
     room2 = RoomFactory(users=[(user2, RoleChoices.OWNER)])
     room3 = RoomFactory(users=[(user1, RoleChoices.MEMBER)])
 
-    token = generate_test_token(user1, [ApplicationScope.ROOMS_LIST])
+    token = generate_test_token(
+        user1, [ApplicationScope.ROOMS_LIST, ApplicationScope.ROOMS_CREATE]
+    )
 
     client = APIClient()
     client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
@@ -158,6 +217,84 @@ def test_api_rooms_list_filters_by_user(settings):
     assert str(room2.id) not in returned_ids
 
 
+def test_api_rooms_retrieve_requires_authentication(settings):
+    """Retrieving rooms without authentication should return 401."""
+
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+
+    user1 = UserFactory()
+    room1 = RoomFactory(users=[(user1, RoleChoices.OWNER)])
+
+    client = APIClient()
+    response = client.get(f"/external-api/v1.0/rooms/{room1.id}/")
+
+    assert response.status_code == 401
+
+
+def test_api_rooms_retrieve_inactive_user(settings):
+    """Retrieve should return 401 if user is inactive."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+
+    user1 = UserFactory(is_active=False)
+    room1 = RoomFactory(users=[(user1, RoleChoices.OWNER)])
+
+    token = generate_test_token(user1, [ApplicationScope.ROOMS_LIST])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.get(f"/external-api/v1.0/rooms/{room1.id}/")
+
+    assert response.status_code == 401
+    assert "user account is disabled" in str(response.data).lower()
+
+
+def test_api_rooms_retrieve_with_expired_token(settings):
+    """Retrieving rooms with expired token should return 401."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+    settings.APPLICATION_JWT_EXPIRATION_SECONDS = 0
+
+    user = UserFactory()
+    room = RoomFactory(users=[(user, RoleChoices.OWNER)])
+
+    # Generate expired token
+    token = generate_test_token(user, [ApplicationScope.ROOMS_CREATE])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.get(f"/external-api/v1.0/rooms/{room.id}/")
+
+    assert response.status_code == 401
+    assert "expired" in str(response.data).lower()
+
+
+@responses.activate
+def test_api_rooms_retrieve_with_invalid_rs_token(settings):
+    """Retrieving rooms with invalid resource server token should return 400."""
+
+    settings.OIDC_OP_INTROSPECTION_ENDPOINT = "https://oidc.example.com/introspect"
+    settings.OIDC_OP_URL = "https://oidc.example.com"
+
+    responses.add(
+        responses.POST,
+        "https://oidc.example.com/introspect",
+        json={
+            "iss": "https://oidc.example.com",
+            "active": False,
+        },
+    )
+
+    user = UserFactory()
+    room = RoomFactory(users=[(user, RoleChoices.OWNER)])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION="Bearer invalid-token-123")
+    response = client.get(f"/external-api/v1.0/rooms/{room.id}/")
+
+    # Return 400 instead of 401 because ResourceServerAuthentication raises
+    # SuspiciousOperation when the introspected user is not active
+    assert response.status_code == 400
+
+
 def test_api_rooms_retrieve_requires_scope(settings):
     """Retrieving a room requires ROOMS_RETRIEVE scope."""
     settings.APPLICATION_JWT_SECRET_KEY = "devKey"
@@ -178,6 +315,24 @@ def test_api_rooms_retrieve_requires_scope(settings):
     )
 
 
+def test_api_rooms_retrieve_no_scope(settings):
+    """Retrieving rooms without any scope should return 403."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+
+    user = UserFactory()
+
+    # Token without scope
+    token = generate_test_token(user, [])
+    room = RoomFactory(users=[(user, RoleChoices.OWNER)])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.get(f"/external-api/v1.0/rooms/{room.id}/")
+
+    assert response.status_code == 403
+    assert "insufficient permissions." in str(response.data).lower()
+
+
 def test_api_rooms_retrieve_success(settings):
     """Retrieving a room with correct scope should succeed."""
     settings.APPLICATION_JWT_SECRET_KEY = "devKey"
@@ -212,6 +367,132 @@ def test_api_rooms_retrieve_success(settings):
     }
 
 
+def test_api_rooms_retrieve_success_by_user(settings):
+    """Retrieve should only return rooms accessible to the authenticated user."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+
+    user1 = UserFactory()
+    user2 = UserFactory()
+
+    room1 = RoomFactory(users=[(user1, RoleChoices.OWNER)])
+    room2 = RoomFactory(users=[(user2, RoleChoices.OWNER)])
+    room3 = RoomFactory(users=[(user1, RoleChoices.MEMBER)])
+    room4 = RoomFactory(users=[(user1, RoleChoices.ADMIN)])
+
+    token = generate_test_token(
+        user1, [ApplicationScope.ROOMS_RETRIEVE, ApplicationScope.ROOMS_LIST]
+    )
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.get(f"/external-api/v1.0/rooms/{room2.id}/")
+
+    assert response.status_code == 403
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.get(f"/external-api/v1.0/rooms/{room1.id}/")
+
+    assert response.status_code == 200
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.get(f"/external-api/v1.0/rooms/{room3.id}/")
+
+    assert response.status_code == 200
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.get(f"/external-api/v1.0/rooms/{room4.id}/")
+
+    assert response.status_code == 200
+
+
+def test_api_rooms_retrieve_not_found(settings):
+    """Retrieving a non-existing room with correct scope should return a 404."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+
+    user = UserFactory()
+    token = generate_test_token(user, [ApplicationScope.ROOMS_RETRIEVE])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.get(f"/external-api/v1.0/rooms/{uuid.uuid4()}/")
+
+    assert response.status_code == 404
+    assert "no room matches the given query." in str(response.data).lower()
+
+
+def test_api_rooms_create_requires_authentication(settings):
+    """Creating rooms without authentication should return 401."""
+
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+
+    client = APIClient()
+    response = client.post("/external-api/v1.0/rooms/")
+
+    assert response.status_code == 401
+
+
+def test_api_rooms_create_with_expired_token(settings):
+    """Creating rooms with expired token should return 401."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+    settings.APPLICATION_JWT_EXPIRATION_SECONDS = 0
+
+    user = UserFactory()
+
+    # Generate expired token
+    token = generate_test_token(user, [ApplicationScope.ROOMS_CREATE])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.post("/external-api/v1.0/rooms/")
+
+    assert response.status_code == 401
+    assert "expired" in str(response.data).lower()
+
+
+@responses.activate
+def test_api_rooms_create_with_invalid_rs_token(settings):
+    """Creating rooms with invalid resource server token should return 400."""
+
+    settings.OIDC_OP_INTROSPECTION_ENDPOINT = "https://oidc.example.com/introspect"
+    settings.OIDC_OP_URL = "https://oidc.example.com"
+
+    responses.add(
+        responses.POST,
+        "https://oidc.example.com/introspect",
+        json={
+            "iss": "https://oidc.example.com",
+            "active": False,
+        },
+    )
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION="Bearer invalid-token-123")
+    response = client.post("/external-api/v1.0/rooms/")
+
+    # Return 400 instead of 401 because ResourceServerAuthentication raises
+    # SuspiciousOperation when the introspected user is not active
+    assert response.status_code == 400
+
+
+def test_api_rooms_create_inactive_user(settings):
+    """Create should return 401 if user is inactive."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+
+    user1 = UserFactory(is_active=False)
+
+    token = generate_test_token(user1, [ApplicationScope.ROOMS_CREATE])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.post("/external-api/v1.0/rooms/")
+
+    assert response.status_code == 401
+    assert "user account is disabled" in str(response.data).lower()
+
+
 def test_api_rooms_create_requires_scope(settings):
     """Creating a room requires ROOMS_CREATE scope."""
     settings.APPLICATION_JWT_SECRET_KEY = "devKey"
@@ -225,18 +506,38 @@ def test_api_rooms_create_requires_scope(settings):
     response = client.post("/external-api/v1.0/rooms/", {}, format="json")
 
     assert response.status_code == 403
-    assert "Insufficient permissions. Required scope: rooms:create" in str(
-        response.data
+    assert (
+        "insufficient permissions. required scope: rooms:create"
+        in str(response.data).lower()
     )
 
 
+def test_api_rooms_create_no_scope(settings):
+    """Creating rooms without any scope should return 403."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+
+    user = UserFactory()
+
+    # Token without scope
+    token = generate_test_token(user, [])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.post("/external-api/v1.0/rooms/")
+
+    assert response.status_code == 403
+    assert "insufficient permissions." in str(response.data).lower()
+
+
 def test_api_rooms_create_success(settings):
     """Creating a room with correct scope should succeed."""
     settings.APPLICATION_JWT_SECRET_KEY = "devKey"
 
     user = UserFactory()
 
-    token = generate_test_token(user, [ApplicationScope.ROOMS_CREATE])
+    token = generate_test_token(
+        user, [ApplicationScope.ROOMS_CREATE, ApplicationScope.ROOMS_LIST]
+    )
 
     client = APIClient()
     client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
@@ -245,6 +546,8 @@ def test_api_rooms_create_success(settings):
     assert response.status_code == 201
     assert "id" in response.data
     assert "slug" in response.data
+    assert "name" in response.data
+    assert response.data["name"] == response.data["slug"]
 
     # Verify room was created with user as owner
     room = Room.objects.get(id=response.data["id"])
@@ -252,6 +555,72 @@ def test_api_rooms_create_success(settings):
     assert room.access_level == "trusted"
 
 
+def test_api_rooms_create_readonly_enforcement(settings):
+    """Creating a room succeeds and any provided read-only fields are ignored."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+
+    user = UserFactory()
+
+    token = generate_test_token(user, [ApplicationScope.ROOMS_CREATE])
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.post(
+        "/external-api/v1.0/rooms/",
+        {
+            "id": "fake-id",
+            "slug": "fake-slug",
+            "name": "fake-name",
+            "access_level": "public",
+        },
+        format="json",
+    )
+
+    assert response.status_code == 201
+    assert "slug" in response.data
+    assert response.data["id"] != "fake-id"
+    assert "name" in response.data
+    assert response.data["slug"] != "fake-slug"
+    assert "id" in response.data
+    assert response.data["name"] != "fake-name"
+
+    # Verify room was created with user as owner
+    room = Room.objects.get(id=response.data["id"])
+    assert room.get_role(user) == RoleChoices.OWNER
+    assert room.access_level == "trusted"
+
+
+def test_api_rooms_unknown_actions(settings):
+    """Updating or deleting a room are not supported yet."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+
+    user = UserFactory()
+    room = RoomFactory(users=[(user, RoleChoices.OWNER)])
+
+    token = generate_test_token(
+        user,
+        [
+            ApplicationScope.ROOMS_RETRIEVE,
+            ApplicationScope.ROOMS_DELETE,
+            ApplicationScope.ROOMS_UPDATE,
+        ],
+    )
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.delete(f"/external-api/v1.0/rooms/{room.id}/")
+
+    assert response.status_code == 405
+    assert 'method "delete" not allowed.' in str(response.data).lower()
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.patch(f"/external-api/v1.0/rooms/{room.id}/")
+
+    assert response.status_code == 405
+    assert 'method "patch" not allowed.' in str(response.data).lower()
+
+
 def test_api_rooms_response_no_url(settings):
     """Response should not include url field when APPLICATION_BASE_URL is None."""
     settings.APPLICATION_JWT_SECRET_KEY = "devKey"
@@ -290,10 +659,43 @@ def test_api_rooms_response_no_telephony(settings):
     assert response.data["id"] == str(room.id)
 
 
+def test_api_rooms_token_scope_case_insensitive(settings):
+    """Token's scope should be case-insensitive."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+    user = UserFactory()
+    application = ApplicationFactory()
+
+    # Generate token with mixed-case scope "Rooms:List" to verify that scope
+    # validation is case-insensitive (should match "rooms:list")
+    now = datetime.now(timezone.utc)
+    payload = {
+        "iss": settings.APPLICATION_JWT_ISSUER,
+        "aud": settings.APPLICATION_JWT_AUDIENCE,
+        "iat": now,
+        "exp": now + timedelta(hours=1),
+        "client_id": str(application.client_id),
+        "scope": "Rooms:List",  # Mixed case - should be accepted as "rooms:list"
+        "user_id": str(user.id),
+        "delegated": True,
+    }
+    token = jwt.encode(
+        payload,
+        settings.APPLICATION_JWT_SECRET_KEY,
+        algorithm=settings.APPLICATION_JWT_ALG,
+    )
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.get("/external-api/v1.0/rooms/")
+
+    assert response.status_code == 200
+
+
 def test_api_rooms_token_without_delegated_flag(settings):
     """Token without delegated flag should be rejected."""
     settings.APPLICATION_JWT_SECRET_KEY = "devKey"
     user = UserFactory()
+    application = ApplicationFactory()
 
     # Generate token without delegated flag
     now = datetime.now(timezone.utc)
@@ -302,7 +704,7 @@ def test_api_rooms_token_without_delegated_flag(settings):
         "aud": settings.APPLICATION_JWT_AUDIENCE,
         "iat": now,
         "exp": now + timedelta(hours=1),
-        "client_id": "test-client",
+        "client_id": str(application.client_id),
         "scope": "rooms:list",
         "user_id": str(user.id),
         "delegated": False,  # Not delegated
@@ -318,7 +720,73 @@ def test_api_rooms_token_without_delegated_flag(settings):
     response = client.get("/external-api/v1.0/rooms/")
 
     assert response.status_code == 401
-    assert "Invalid token type." in str(response.data)
+    assert "invalid token type." in str(response.data).lower()
+
+
+@mock.patch.object(ResourceServerAuthentication, "authenticate", return_value=None)
+def test_api_rooms_token_invalid_signature(mock_rs_authenticate, settings):
+    """Token signed with an invalid key should defer to the next authentication."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+    user = UserFactory()
+    application = ApplicationFactory()
+
+    # Generate token without delegated flag
+    now = datetime.now(timezone.utc)
+    payload = {
+        "iss": settings.APPLICATION_JWT_ISSUER,
+        "aud": settings.APPLICATION_JWT_AUDIENCE,
+        "iat": now,
+        "exp": now + timedelta(hours=1),
+        "client_id": str(application.client_id),
+        "scope": "rooms:list",
+        "user_id": str(user.id),
+        "delegated": True,
+    }
+    token = jwt.encode(
+        payload,
+        "invalid-private-key",
+        algorithm=settings.APPLICATION_JWT_ALG,
+    )
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.get("/external-api/v1.0/rooms/")
+
+    mock_rs_authenticate.assert_called()
+    assert response.status_code == 401
+
+
+@mock.patch.object(ResourceServerAuthentication, "authenticate", return_value=None)
+def test_api_rooms_token_invalid_alg(mock_rs_authenticate, settings):
+    """Token signed with an invalid alg should defer to the next authentication."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+    settings.APPLICATION_JWT_ALG = "RS256"
+    user = UserFactory()
+
+    # Generate token without delegated flag
+    now = datetime.now(timezone.utc)
+    payload = {
+        "iss": settings.APPLICATION_JWT_ISSUER,
+        "aud": settings.APPLICATION_JWT_AUDIENCE,
+        "iat": now,
+        "exp": now + timedelta(hours=1),
+        "client_id": "test-client",
+        "scope": "rooms:list",
+        "user_id": str(user.id),
+        "delegated": True,
+    }
+    token = jwt.encode(
+        payload,
+        settings.APPLICATION_JWT_SECRET_KEY,
+        algorithm="HS256",  # different value
+    )
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.get("/external-api/v1.0/rooms/")
+
+    mock_rs_authenticate.assert_called()
+    assert response.status_code == 401
 
 
 def test_api_rooms_token_missing_client_id(settings):
@@ -348,7 +816,157 @@ def test_api_rooms_token_missing_client_id(settings):
     response = client.get("/external-api/v1.0/rooms/")
 
     assert response.status_code == 401
-    assert "Invalid token claims." in str(response.data)
+    assert "invalid token claims." in str(response.data).lower()
+
+
+def test_api_rooms_token_missing_user_id(settings):
+    """Token without user_id should be rejected."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+    application = ApplicationFactory()
+
+    now = datetime.now(timezone.utc)
+    payload = {
+        "iss": settings.APPLICATION_JWT_ISSUER,
+        "aud": settings.APPLICATION_JWT_AUDIENCE,
+        "iat": now,
+        "exp": now + timedelta(hours=1),
+        "client_id": str(application.client_id),
+        "scope": "rooms:list",
+        "delegated": True,
+        # Missing user_id
+    }
+    token = jwt.encode(
+        payload,
+        settings.APPLICATION_JWT_SECRET_KEY,
+        algorithm=settings.APPLICATION_JWT_ALG,
+    )
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.get("/external-api/v1.0/rooms/")
+
+    assert response.status_code == 401
+    assert "invalid token claims." in str(response.data).lower()
+
+
+def test_api_rooms_token_invalid_audience(settings):
+    """Token with an invalid audience should be rejected."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+    user = UserFactory()
+    application = ApplicationFactory()
+
+    now = datetime.now(timezone.utc)
+    payload = {
+        "iss": settings.APPLICATION_JWT_ISSUER,
+        "aud": "invalid-audience",
+        "iat": now,
+        "exp": now + timedelta(hours=1),
+        "client_id": str(application.client_id),
+        "user_id": str(user.id),
+        "scope": "rooms:list",
+        "delegated": True,
+    }
+    token = jwt.encode(
+        payload,
+        settings.APPLICATION_JWT_SECRET_KEY,
+        algorithm=settings.APPLICATION_JWT_ALG,
+    )
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.get("/external-api/v1.0/rooms/")
+
+    assert response.status_code == 401
+    assert "invalid token." in str(response.data).lower()
+
+
+def test_api_rooms_token_unknown_user(settings):
+    """Token for unknown user should be rejected."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+    application = ApplicationFactory()
+
+    now = datetime.now(timezone.utc)
+    payload = {
+        "iss": settings.APPLICATION_JWT_ISSUER,
+        "aud": settings.APPLICATION_JWT_AUDIENCE,
+        "iat": now,
+        "exp": now + timedelta(hours=1),
+        "client_id": str(application.client_id),
+        "user_id": str(uuid.uuid4()),
+        "scope": "rooms:list",
+        "delegated": True,
+    }
+    token = jwt.encode(
+        payload,
+        settings.APPLICATION_JWT_SECRET_KEY,
+        algorithm=settings.APPLICATION_JWT_ALG,
+    )
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.get("/external-api/v1.0/rooms/")
+
+    assert response.status_code == 401
+    assert "user not found." in str(response.data).lower()
+
+
+def test_api_rooms_token_unknown_application(settings):
+    """Token for unknown application should be rejected."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+
+    now = datetime.now(timezone.utc)
+    payload = {
+        "iss": settings.APPLICATION_JWT_ISSUER,
+        "aud": settings.APPLICATION_JWT_AUDIENCE,
+        "iat": now,
+        "exp": now + timedelta(hours=1),
+        "client_id": "unknown-client-id",
+        "user_id": str(uuid.uuid4()),
+        "scope": "rooms:list",
+        "delegated": True,
+    }
+    token = jwt.encode(
+        payload,
+        settings.APPLICATION_JWT_SECRET_KEY,
+        algorithm=settings.APPLICATION_JWT_ALG,
+    )
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.get("/external-api/v1.0/rooms/")
+
+    assert response.status_code == 401
+    assert "application not found." in str(response.data).lower()
+
+
+def test_api_rooms_token_inactive_application(settings):
+    """Token for inactive application should be rejected."""
+    settings.APPLICATION_JWT_SECRET_KEY = "devKey"
+    application = ApplicationFactory(active=False)
+
+    now = datetime.now(timezone.utc)
+    payload = {
+        "iss": settings.APPLICATION_JWT_ISSUER,
+        "aud": settings.APPLICATION_JWT_AUDIENCE,
+        "iat": now,
+        "exp": now + timedelta(hours=1),
+        "client_id": str(application.client_id),
+        "user_id": str(uuid.uuid4()),
+        "scope": "rooms:list",
+        "delegated": True,
+    }
+    token = jwt.encode(
+        payload,
+        settings.APPLICATION_JWT_SECRET_KEY,
+        algorithm=settings.APPLICATION_JWT_ALG,
+    )
+
+    client = APIClient()
+    client.credentials(HTTP_AUTHORIZATION=f"Bearer {token}")
+    response = client.get("/external-api/v1.0/rooms/")
+
+    assert response.status_code == 401
+    assert "application is disabled." in str(response.data).lower()
 
 
 @responses.activate
@@ -507,7 +1125,7 @@ def test_resource_server_authentication_successful(settings):
             "aud": "some_client_id",  # settings.OIDC_RS_CLIENT_ID
             "sub": "very-specific-sub",
             "client_id": "some_service_provider",
-            "scope": "openid lasuite_meet lasuite_meet:rooms:list",
+            "scope": "openid lasuite_meet lasuite_meet:rooms:list lasuite_meet:rooms:retrieve",
             "active": True,
         },
     )

src/backend/core/tests/test_external_api_token.py

@@ -22,7 +22,7 @@ pytestmark = pytest.mark.django_db
 def test_api_applications_generate_token_success(settings):
     """Valid credentials should return a JWT token."""
     settings.APPLICATION_JWT_SECRET_KEY = "devKey"
-    user = UserFactory(email="user@example.com")
+    UserFactory(email="User.Family@example.com")
     application = ApplicationFactory(
         active=True,
         scopes=[ApplicationScope.ROOMS_LIST, ApplicationScope.ROOMS_CREATE],
@@ -40,7 +40,7 @@ def test_api_applications_generate_token_success(settings):
             "client_id": application.client_id,
             "client_secret": plain_secret,
             "grant_type": "client_credentials",
-            "scope": user.email,
+            "scope": "user.family@example.com",
         },
         format="json",
     )

src/backend/meet/settings.py

@@ -18,6 +18,7 @@ from socket import gethostbyname, gethostname
 
 from django.utils.translation import gettext_lazy as _
 
+import dj_database_url
 import sentry_sdk
 from configurations import Configuration, values
 from lasuite.configuration.values import SecretFileValue
@@ -92,7 +93,11 @@ class Base(Configuration):
 
     # Database
     DATABASES = {
-        "default": {
+        "default": dj_database_url.config()
+        if values.DatabaseURLValue(
+            None, environ_name="DATABASE_URL", environ_prefix=None
+        )
+        else {
             "ENGINE": values.Value(
                 "django.db.backends.postgresql_psycopg2",
                 environ_name="DB_ENGINE",
@@ -292,6 +297,9 @@ class Base(Configuration):
             ),
         },
     }
+    MONITORED_THROTTLE_FAILURE_CALLBACK = (
+        "core.api.throttling.sentry_monitoring_throttle_failure"
+    )
 
     SPECTACULAR_SETTINGS = {
         "TITLE": "Meet API",
@@ -336,6 +344,9 @@ class Base(Configuration):
         "feedback": values.DictValue(
             {}, environ_name="FRONTEND_FEEDBACK", environ_prefix=None
         ),
+        "external_home_url": values.Value(
+            None, environ_name="FRONTEND_EXTERNAL_HOME_URL", environ_prefix=None
+        ),
         "use_french_gov_footer": values.BooleanValue(
             False, environ_name="FRONTEND_USE_FRENCH_GOV_FOOTER", environ_prefix=None
         ),

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "meet"
-version = "1.1.0"
+version = "1.5.0"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",
@@ -29,6 +29,7 @@ dependencies = [
     "Brotli==1.2.0",
     "brevo-python==1.2.0",
     "celery[redis]==5.5.3",
+    "dj-database-url==3.1.0",
     "django-configurations==2.5.1",
     "django-cors-headers==4.9.0",
     "django-countries==8.0.0",
@@ -38,7 +39,7 @@ dependencies = [
     "django-redis==6.0.0",
     "django-storages[s3]==1.14.6",
     "django-timezone-field>=5.1",
-    "django==5.2.9",
+    "django==5.2.11",
     "djangorestframework==3.16.1",
     "drf_spectacular==0.29.0",
     "dockerflow==2024.4.2",
@@ -56,7 +57,7 @@ dependencies = [
     "whitenoise==6.11.0",
     "mozilla-django-oidc==4.0.1",
     "livekit-api==1.0.7",
-    "aiohttp==3.13.2",
+    "aiohttp==3.13.3",
 ]
 
 [project.urls]

src/frontend/@types/react-aria-overlays.d.ts

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+
+declare module '@react-aria/overlays' {
+  export type PortalProviderContextValue = {
+    getContainer: () => HTMLElement | null;
+  };
+
+  export type PortalProviderProps = {
+    getContainer: () => HTMLElement | null;
+    children: React.ReactNode;
+  };
+
+  export function useUNSAFE_PortalContext(): PortalProviderContextValue;
+  export function UNSAFE_PortalProvider(
+    props: PortalProviderProps,
+  ): JSX.Element;
+}
+

src/frontend/index.html

@@ -6,6 +6,22 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="manifest" href="/site.webmanifest">
+    <!-- Font URLs are resolved and replaced by Vite during the build process. Font loading failures will not break the application. -->
+    <link
+      rel="preload"
+      as="font"
+      crossorigin="anonymous"
+      href="/node_modules/@fontsource/material-icons-outlined/files/material-icons-outlined-latin-400-normal.woff2"
+      type="font/woff2"
+    />
+    <!-- Font URLs are resolved and replaced by Vite during the build process. Font loading failures will not break the application. -->
+    <link
+      rel="preload"
+      as="font"
+      crossorigin="anonymous"
+      href="/node_modules/@fontsource-variable/material-symbols-outlined/files/material-symbols-outlined-latin-wght-normal.woff2"
+      type="font/woff2"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>%VITE_APP_TITLE%</title>
   </head>

src/frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "meet",
-  "version": "1.1.0",
+  "version": "1.5.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "meet",
-      "version": "1.1.0",
+      "version": "1.5.0",
       "dependencies": {
         "@fontsource-variable/material-symbols-outlined": "5.2.30",
         "@fontsource/material-icons-outlined": "5.2.6",

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "1.1.0",
+  "version": "1.5.0",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",

src/frontend/src/api/useConfig.ts

@@ -17,6 +17,7 @@ export interface ApiConfig {
   feedback: {
     url: string
   }
+  external_home_url?: string
   silence_livekit_debug_logs?: boolean
   is_silent_login_enabled?: boolean
   custom_css_url?: string

src/frontend/src/components/icons/BlurOnStrong.tsx

@@ -6,6 +6,7 @@ export const BlurOnStrong = () => {
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
     >
       <path
         fillRule="evenodd"

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

@@ -192,7 +192,7 @@ export const IntroSlider = () => {
         <SlideContainer>
           {SLIDES.map((slide, index) => (
             <Slide visible={index == slideIndex} key={index}>
-              <Image src={slide.src} alt={t(`${slide.key}.imgAlt`)} />
+              <Image src={slide.src} alt="" role="presentation" />
               <TextAnimation visible={index == slideIndex}>
                 <Heading>{t(`${slide.key}.title`)}</Heading>
                 <Body>{t(`${slide.key}.body`)}</Body>

src/frontend/src/features/home/routes/Home.tsx

@@ -11,7 +11,7 @@ import { RiAddLine, RiLink } from '@remixicon/react'
 import { LaterMeetingDialog } from '@/features/home/components/LaterMeetingDialog'
 import { IntroSlider } from '@/features/home/components/IntroSlider'
 import { MoreLink } from '@/features/home/components/MoreLink'
-import { ReactNode, useState } from 'react'
+import { ReactNode, useEffect, useState } from 'react'
 
 import { css } from '@/styled-system/css'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
@@ -19,6 +19,7 @@ import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePers
 import { useConfig } from '@/api/useConfig'
 import { LoginButton } from '@/components/LoginButton'
 import { ApiRoom } from '@/features/rooms/api/ApiRoom'
+import { LoadingScreen } from '@/components/LoadingScreen'
 
 const Columns = ({ children }: { children?: ReactNode }) => {
   return (
@@ -155,9 +156,34 @@ export const Home = () => {
 
   const { mutateAsync: createRoom } = useCreateRoom()
   const [laterRoom, setLaterRoom] = useState<null | ApiRoom>(null)
+  const [redirectFailed, setRedirectFailed] = useState(false)
 
   const { data } = useConfig()
 
+  useEffect(() => {
+    const checkSiteAndRedirect = async () => {
+      if (!data?.external_home_url) return
+      if (isLoggedIn === false) {
+        try {
+          await fetch(data.external_home_url, {
+            method: 'HEAD', // Use HEAD to avoid downloading the full page
+            mode: 'no-cors', // Needed for cross-origin requests
+          })
+          window.location.replace(data.external_home_url)
+        } catch (error) {
+          setRedirectFailed(true)
+          console.error('Site is not reachable:', error)
+        }
+      }
+    }
+
+    checkSiteAndRedirect()
+  }, [isLoggedIn, data])
+
+  if (data?.external_home_url && isLoggedIn == false && !redirectFailed) {
+    return <LoadingScreen header={false} footer={false} delay={0} />
+  }
+
   return (
     <UserAware>
       <Screen>

src/frontend/src/features/legalsTerms/TermsOfService.tsx

@@ -25,15 +25,27 @@ export const TermsOfServiceRoute = () => {
         {/* Article 2 */}
         <H lvl={2}>{t('articles.article2.title')}</H>
         <P>{t('articles.article2.content')}</P>
-        <P>{t('articles.article2.purposes')}</P>
+        {ensureArray(
+          t('articles.article2.paragraphs', {
+            returnObjects: true,
+          })
+        ).map((paragraph, index) => (
+          <P key={index}>{paragraph}</P>
+        ))}
 
         {/* Article 3 */}
         <H lvl={2}>{t('articles.article3.title')}</H>
-        <P>{t('articles.article3.definition')}</P>
+        {ensureArray(
+          t('articles.article3.paragraphs', {
+            returnObjects: true,
+          })
+        ).map((paragraph, index) => (
+          <P key={index}>{paragraph}</P>
+        ))}
 
         {/* Article 4 */}
         <H lvl={2}>{t('articles.article4.title')}</H>
-        <P>{t('articles.article4.content')}</P>
+        <P>{t('articles.article4.definition')}</P>
 
         {/* Article 5 */}
         <H lvl={2} margin={false}>
@@ -62,6 +74,7 @@ export const TermsOfServiceRoute = () => {
             __html: t('articles.article5.sections.section1.paragraph3'),
           }}
         ></P>
+        <P>{t('articles.article5.sections.section1.paragraph4')}</P>
 
         {/* Section 5.2 */}
         <H lvl={3} bold>
@@ -111,15 +124,12 @@ export const TermsOfServiceRoute = () => {
         ))}
 
         {/* Article 7 */}
-        <H lvl={2} margin={false}>
-          {t('articles.article7.title')}
-        </H>
+        <H lvl={2}>{t('articles.article7.title')}</H>
 
         {/* Section 7.1 */}
         <H lvl={3} bold>
           {t('articles.article7.sections.section1.title')}
         </H>
-        <P>{t('articles.article7.sections.section1.content')}</P>
         {ensureArray(
           t('articles.article7.sections.section1.paragraphs', {
             returnObjects: true,
@@ -132,16 +142,51 @@ export const TermsOfServiceRoute = () => {
         <H lvl={3} bold>
           {t('articles.article7.sections.section2.title')}
         </H>
+        {ensureArray(
+          t('articles.article7.sections.section2.paragraphs', {
+            returnObjects: true,
+          })
+        ).map((paragraph, index) => (
+          <P key={index}>{paragraph}</P>
+        ))}
+
+        {/* Section 7.3 */}
+        <H lvl={3} bold>
+          {t('articles.article7.sections.section3.title')}
+        </H>
+        {ensureArray(
+          t('articles.article7.sections.section3.paragraphs', {
+            returnObjects: true,
+          })
+        ).map((paragraph, index) => (
+          <P key={index}>{paragraph}</P>
+        ))}
+
+        {/* Section 7.4 */}
+        <H lvl={3} bold>
+          {t('articles.article7.sections.section4.title')}
+        </H>
+        {ensureArray(
+          t('articles.article7.sections.section4.paragraphs', {
+            returnObjects: true,
+          })
+        ).map((paragraph, index) => (
+          <P key={index}>{paragraph}</P>
+        ))}
+
+        {/* Section 7.5 */}
+        <H lvl={3} bold>
+          {t('articles.article7.sections.section5.title')}
+        </H>
         <P>
-          {t('articles.article7.sections.section2.content')
+          {t('articles.article7.sections.section5.content')
             .split('https://github.com/suitenumerique/meet')[0]
             .replace('https://github.com/suitenumerique/meet', '')}{' '}
           <A href="https://github.com/suitenumerique/meet" color="primary">
             https://github.com/suitenumerique/meet
           </A>
-          {'. '}
           {
-            t('articles.article7.sections.section2.content').split(
+            t('articles.article7.sections.section5.content').split(
               'https://github.com/suitenumerique/meet'
             )[1]
           }

src/frontend/src/features/notifications/components/ToastRecordingRequest.tsx

@@ -66,16 +66,22 @@ export function ToastRecordingRequest({
           name: participant?.name,
         })}
         {!options.isMenuOpen && (
-          <Button
-            size="sm"
-            variant="text"
+          <div
             className={css({
-              color: 'primary.300',
+              marginLeft: '0.5rem',
             })}
-            onPress={options.openMenu}
           >
-            {t('openMenu')}
-          </Button>
+            <Button
+              size="sm"
+              variant="text"
+              className={css({
+                color: 'primary.300',
+              })}
+              onPress={options.openMenu}
+            >
+              {t('openMenu')}
+            </Button>
+          </div>
         )}
       </HStack>
     </StyledToastContainer>

src/frontend/src/features/pip/components/DocumentPiPPortal.tsx

@@ -0,0 +1,193 @@
+import { type ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { useDocumentPiP } from '../hooks/useDocumentPiP'
+import { UNSAFE_PortalProvider } from '@react-aria/overlays'
+
+// Minimal base styles so the PiP window renders correctly on first paint.
+const ensureBaseStyles = (target: Document) => {
+  if (target.getElementById('pip-base-styles')) return
+  const style = target.createElement('style')
+  style.id = 'pip-base-styles'
+  style.textContent = `
+    html, body { margin: 0; padding: 0; height: 100%; background: #0b0f19; }
+    body { overflow: hidden; }
+    * { box-sizing: border-box; }
+  `
+  target.head.appendChild(style)
+}
+
+// Clone existing styles to keep the PiP window visually consistent.
+const copyStyles = (source: Document, target: Document) => {
+  if (target.getElementById('pip-style-clone')) return
+  const marker = target.createElement('meta')
+  marker.id = 'pip-style-clone'
+  target.head.appendChild(marker)
+
+  source.querySelectorAll('style, link[rel="stylesheet"]').forEach((node) => {
+    const cloned = node.cloneNode(true) as HTMLElement
+    target.head.appendChild(cloned)
+  })
+}
+
+const syncThemeAttribute = (source: Document, target: Document) => {
+  const theme = source.documentElement.getAttribute('data-lk-theme')
+  if (theme) {
+    target.documentElement.setAttribute('data-lk-theme', theme)
+  }
+}
+
+const cssVarNameCacheByElement = new WeakMap<HTMLElement, string[]>()
+const cssVarNameCacheByUri = new Map<string, string[]>()
+
+const syncCssVariables = (source: Document, target: Document) => {
+  const sourceView = source.defaultView
+  if (!sourceView) return
+
+  const getCachedVarNames = () => {
+    const docEl = source.documentElement
+    if (!docEl) return []
+
+    const cachedByElement = cssVarNameCacheByElement.get(docEl)
+    if (cachedByElement) return cachedByElement
+
+    const cachedByUri = source.baseURI
+      ? cssVarNameCacheByUri.get(source.baseURI)
+      : undefined
+    if (cachedByUri) return cachedByUri
+
+    const varNames = new Set<string>()
+    const collectVarsFrom = (element: HTMLElement | null) => {
+      if (!element) return
+      const styles = sourceView.getComputedStyle(element)
+      for (let i = 0; i < styles.length; i += 1) {
+        const property = styles[i]
+        if (property.startsWith('--')) {
+          varNames.add(property)
+        }
+      }
+    }
+
+    collectVarsFrom(source.documentElement)
+    collectVarsFrom(source.body)
+
+    const result = Array.from(varNames)
+    cssVarNameCacheByElement.set(docEl, result)
+    if (source.baseURI) {
+      cssVarNameCacheByUri.set(source.baseURI, result)
+    }
+    return result
+  }
+
+  const varNames = getCachedVarNames()
+  if (!varNames.length) return
+
+  const rootStyles = sourceView.getComputedStyle(source.documentElement)
+  const bodyStyles = source.body
+    ? sourceView.getComputedStyle(source.body)
+    : null
+
+  varNames.forEach((property) => {
+    const bodyValue = bodyStyles?.getPropertyValue(property)
+    const value = bodyValue || rootStyles.getPropertyValue(property)
+    if (value) {
+      target.documentElement.style.setProperty(property, value)
+    }
+  })
+}
+
+/**
+ * React Portal that renders children into a Document Picture-in-Picture window.
+ * Handles PiP window lifecycle, style injection, React root management, and uses UNSAFE_PortalProvider
+ * to ensure React Aria overlays render correctly within the PiP window.
+ * Creates a fresh React root on reopen to prevent black screen issues.
+ */
+export const DocumentPiPPortal = ({
+  isOpen,
+  width,
+  height,
+  children,
+  onClose,
+}: {
+  isOpen: boolean
+  width?: number
+  height?: number
+  children: React.ReactNode
+  onClose?: () => void
+}): ReactNode => {
+  const { openPiP, closePiP, pipWindow, isSupported } = useDocumentPiP({
+    width,
+    height,
+  })
+  const [container, setContainer] = useState<HTMLElement | null>(null)
+  const containerRef = useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    if (!isOpen) {
+      closePiP()
+      setContainer(null)
+      containerRef.current = null
+      return
+    }
+
+    if (!isSupported) return
+
+    let cancelled = false
+    openPiP().then((win) => {
+      if (!win || cancelled) return
+      const doc = win.document
+      ensureBaseStyles(doc)
+      copyStyles(document, doc)
+      syncThemeAttribute(document, doc)
+      syncCssVariables(document, doc)
+      const existingContainer = containerRef.current
+      if (!existingContainer || existingContainer.ownerDocument !== doc) {
+        const nextContainer = doc.createElement('div')
+        nextContainer.id = 'pip-root'
+        nextContainer.style.width = '100%'
+        nextContainer.style.height = '100%'
+        nextContainer.style.display = 'flex'
+        nextContainer.style.alignItems = 'stretch'
+        nextContainer.style.justifyContent = 'center'
+        doc.body.appendChild(nextContainer)
+        containerRef.current = nextContainer
+        setContainer(nextContainer)
+      } else {
+        setContainer(existingContainer)
+      }
+    })
+
+    return () => {
+      cancelled = true
+    }
+  }, [closePiP, isOpen, isSupported, openPiP])
+
+  useEffect(() => {
+    if (!pipWindow) return
+    const handleClose = () => {
+      // Reset container so reopening PiP mounts a fresh root.
+      containerRef.current = null
+      setContainer(null)
+      onClose?.()
+    }
+    pipWindow.addEventListener('pagehide', handleClose)
+    pipWindow.addEventListener('beforeunload', handleClose)
+    return () => {
+      pipWindow.removeEventListener('pagehide', handleClose)
+      pipWindow.removeEventListener('beforeunload', handleClose)
+    }
+  }, [onClose, pipWindow])
+
+  const portal = useMemo(() => {
+    if (!container) return null
+    return createPortal(
+      // "UNSAFE" because it bypasses react-aria's default portal container.
+      // We need it to target the PiP document; otherwise overlays render in the main window.
+      <UNSAFE_PortalProvider getContainer={() => container}>
+        {children}
+      </UNSAFE_PortalProvider>,
+      container
+    )
+  }, [children, container])
+
+  return portal as unknown as ReactNode
+}

src/frontend/src/features/pip/components/PipControlBar.tsx

@@ -0,0 +1,59 @@
+import { styled } from '@/styled-system/jsx'
+import { AudioDevicesControl } from '@/features/rooms/livekit/components/controls/Device/AudioDevicesControl'
+import { VideoDeviceControl } from '@/features/rooms/livekit/components/controls/Device/VideoDeviceControl'
+import { ScreenShareToggle } from '@/features/rooms/livekit/components/controls/ScreenShareToggle'
+import { LeaveButton } from '@/features/rooms/livekit/components/controls/LeaveButton'
+import { ReactionsToggle } from '@/features/rooms/livekit/components/controls/ReactionsToggle'
+import { SubtitlesToggle } from '@/features/rooms/livekit/components/controls/SubtitlesToggle'
+import { HandToggle } from '@/features/rooms/livekit/components/controls/HandToggle'
+import { OptionsButton } from '@/features/rooms/livekit/components/controls/Options/OptionsButton'
+import { StartMediaButton } from '@/features/rooms/livekit/components/controls/StartMediaButton'
+
+/**
+ * Compact control bar for the Picture-in-Picture window.
+ * Centralizes all PiP controls (devices, reactions, screen share, options, etc.) in one reusable component.
+ */
+export const PipControlBar = ({
+  showScreenShare,
+}: {
+  showScreenShare: boolean
+}) => (
+  <PipControls>
+    <PipControlsCenter>
+      <AudioDevicesControl hideMenu />
+      <VideoDeviceControl hideMenu />
+      <ReactionsToggle />
+      {showScreenShare && <ScreenShareToggle />}
+      <SubtitlesToggle />
+      <HandToggle />
+      <OptionsButton />
+      <LeaveButton />
+      <StartMediaButton />
+    </PipControlsCenter>
+  </PipControls>
+)
+
+const PipControls = styled('div', {
+  base: {
+    flex: '0 0 auto',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: '0.5rem',
+    padding: '0.5rem 0.75rem',
+    backgroundColor: 'primaryDark.50',
+    width: '100%',
+    position: 'relative',
+  },
+})
+
+const PipControlsCenter = styled('div', {
+  base: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: '0.4rem',
+    flex: '1 1 auto',
+  },
+})

src/frontend/src/features/pip/components/PipView.tsx

@@ -0,0 +1,110 @@
+import { styled } from '@/styled-system/jsx'
+import { supportsScreenSharing } from '@livekit/components-core'
+import {
+  isTrackReference,
+  TrackReferenceOrPlaceholder,
+} from '@livekit/components-core'
+import { useTracks } from '@livekit/components-react'
+import { Track } from 'livekit-client'
+import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
+import { GridLayout } from '@/features/rooms/livekit/components/layout/GridLayout'
+import { SidePanel } from '@/features/rooms/livekit/components/SidePanel'
+import { pipLayoutStore } from '../stores/pipLayoutStore'
+import { PipControlBar } from './PipControlBar'
+
+const pickTrackForPip = (
+  tracks: TrackReferenceOrPlaceholder[]
+): TrackReferenceOrPlaceholder | undefined => {
+  // Prefer screen share when present; otherwise fallback to first available track.
+  const screenShareTrack = tracks
+    .filter(isTrackReference)
+    .find((track) => track.publication.source === Track.Source.ScreenShare)
+
+  if (screenShareTrack) return screenShareTrack
+  return tracks[0]
+}
+
+/**
+ * Main view component for the Picture-in-Picture window.
+ * Handles track selection (prioritizes screen share), layout switching (grid for multiple participants),
+ * and renders the control bar and side panel within the PiP window.
+ */
+export const PipView = () => {
+  const tracks = useTracks(
+    [
+      { source: Track.Source.Camera, withPlaceholder: true },
+      { source: Track.Source.ScreenShare, withPlaceholder: false },
+    ],
+    { onlySubscribed: false }
+  )
+
+  const trackRef = pickTrackForPip(tracks)
+  const browserSupportsScreenSharing = supportsScreenSharing()
+  const hasMultipleTiles = tracks.length > 1
+
+  if (!trackRef && !hasMultipleTiles) return null
+
+  return (
+    <PipContainer>
+      {/* Keep stage height stable to avoid layout shifting on track changes. */}
+      <PipStage>
+        {hasMultipleTiles ? (
+          <PipGridWrapper>
+            <GridLayout tracks={tracks} style={{ height: '100%' }}>
+              <ParticipantTile disableMetadata />
+            </GridLayout>
+          </PipGridWrapper>
+        ) : (
+          <ParticipantTile trackRef={trackRef} disableMetadata />
+        )}
+      </PipStage>
+      {/* Compact control bar for PiP; extend here when adding more actions. */}
+      <PipControlBar showScreenShare={browserSupportsScreenSharing} />
+      {/* Side panel (effects, settings, etc.) opens within PiP window. */}
+      <SidePanel store={pipLayoutStore} />
+    </PipContainer>
+  )
+}
+
+const PipContainer = styled('div', {
+  base: {
+    width: '100%',
+    height: '100%',
+    display: 'grid',
+    gridTemplateRows: 'minmax(0, 1fr) auto',
+    backgroundColor: 'primaryDark.50',
+    '& .lk-participant-tile': {
+      height: '100%',
+    },
+    '& .lk-participant-media': {
+      height: '100%',
+    },
+    '& .lk-participant-media-video': {
+      height: '100%',
+      objectFit: 'cover',
+    },
+    '& .lk-grid-layout': {
+      height: '100%',
+      width: '100%',
+    },
+  },
+})
+
+const PipStage = styled('div', {
+  base: {
+    position: 'relative',
+    minHeight: 0,
+  },
+})
+
+const PipGridWrapper = styled('div', {
+  base: {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+  },
+})

src/frontend/src/features/pip/components/RoomPiP.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react'
+
+import { DocumentPiPPortal } from './DocumentPiPPortal'
+import { PipView } from './PipView'
+import { useRoomPiP } from '../hooks/useRoomPiP'
+
+/**
+ * Wrapper that mounts the PiP UI when room-level PiP state is enabled.
+ * Bridges Valtio-backed PiP state with DocumentPiPPortal and PipView rendering.
+ * PiP panel state is decoupled via explicit pipLayoutStore injection.
+ */
+export const RoomPiP = (): ReactNode => {
+  const { isOpen, close } = useRoomPiP()
+
+  const portal = DocumentPiPPortal({
+    isOpen,
+    onClose: close,
+    children: <PipView />,
+  })
+  return portal as ReactNode
+}

src/frontend/src/features/pip/components/controls/PipOptionsMenu.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect } from 'react'
+import { RiMoreFill } from '@remixicon/react'
+import { Box, Button } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { PipOptionsMenuItems } from './PipOptionsMenuItems'
+
+type PipOptionsMenuProps = {
+  wrapperRef: React.RefObject<HTMLDivElement>
+  isOpen: boolean
+  setIsOpen: (isOpen: boolean) => void
+  label: string
+}
+
+/**
+ * PiP-specific options menu with absolute positioning for correct alignment in PiP window.
+ * Renders locally (unlike standard Menu) and closes automatically on item click or outside click.
+ */
+export const PipOptionsMenu = ({
+  wrapperRef,
+  isOpen,
+  setIsOpen,
+  label,
+}: PipOptionsMenuProps) => {
+  // Close menu when a menu item action completes (e.g., transcription, effects, recording).
+  useEffect(() => {
+    if (!isOpen) return
+    const doc = wrapperRef.current?.ownerDocument ?? document
+
+    const handleMenuItemClick = (event: MouseEvent) => {
+      const target = event.target as HTMLElement | null
+      const wrapper = wrapperRef.current
+      if (!wrapper || !target) return
+
+      // Don't close if clicking the trigger button
+      if (wrapper.querySelector('button')?.contains(target)) return
+
+      // Close if clicking a menu item (action will have fired)
+      if (target.closest('[role="menuitem"]')) {
+        // Use requestAnimationFrame to ensure action completes first, without visible delay
+        requestAnimationFrame(() => {
+          setIsOpen(false)
+        })
+      }
+    }
+
+    doc.addEventListener('click', handleMenuItemClick, true)
+    return () => {
+      doc.removeEventListener('click', handleMenuItemClick, true)
+    }
+  }, [isOpen, setIsOpen, wrapperRef])
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={css({
+        position: 'relative',
+      })}
+    >
+      <Button
+        id="room-options-trigger"
+        square
+        variant="primaryDark"
+        aria-label={label}
+        tooltip={label}
+        onPress={() => setIsOpen(!isOpen)}
+      >
+        <RiMoreFill />
+      </Button>
+      {isOpen && (
+        <div
+          className={css({
+            position: 'absolute',
+            left: '50%',
+            bottom: 'calc(100% + 0.85rem)',
+            transform: 'translateX(-50%)',
+            zIndex: 10,
+          })}
+        >
+          <Box size="sm" type="popover" variant="dark">
+            <PipOptionsMenuItems />
+          </Box>
+        </div>
+      )}
+    </div>
+  )
+}

src/frontend/src/features/pip/components/controls/PipOptionsMenuItems.tsx

@@ -0,0 +1,32 @@
+import { Menu as RACMenu, MenuSection } from 'react-aria-components'
+import { Separator } from '@/primitives/Separator'
+import { SettingsMenuItem } from '@/features/rooms/livekit/components/controls/Options/SettingsMenuItem'
+import { FeedbackMenuItem } from '@/features/rooms/livekit/components/controls/Options/FeedbackMenuItem'
+import { EffectsMenuItem } from '@/features/rooms/livekit/components/controls/Options/EffectsMenuItem'
+import { SupportMenuItem } from '@/features/rooms/livekit/components/controls/Options/SupportMenuItem'
+import { PictureInPictureMenuItem } from '@/features/rooms/livekit/components/controls/Options/PictureInPictureMenuItem'
+import { pipLayoutStore } from '@/features/pip/stores/pipLayoutStore'
+
+/**
+ * PiP options menu items: excludes transcript, screen recording, and full screen
+ * (those features are not relevant in the PiP window context).
+ */
+export const PipOptionsMenuItems = () => (
+  <RACMenu
+    style={{
+      minWidth: '150px',
+      width: '300px',
+    }}
+  >
+    <MenuSection>
+      <PictureInPictureMenuItem />
+      <EffectsMenuItem store={pipLayoutStore} />
+    </MenuSection>
+    <Separator />
+    <MenuSection>
+      <SupportMenuItem />
+      <FeedbackMenuItem />
+      <SettingsMenuItem />
+    </MenuSection>
+  </RACMenu>
+)

src/frontend/src/features/pip/hooks/useDocumentPiP.ts

@@ -0,0 +1,96 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+type DocumentPictureInPicture = {
+  requestWindow: (options?: {
+    width?: number
+    height?: number
+  }) => Promise<Window>
+}
+
+type WindowWithDocumentPiP = Window & {
+  documentPictureInPicture?: DocumentPictureInPicture
+}
+
+export const useDocumentPiP = ({
+  width = 480,
+  height = 270,
+}: {
+  width?: number
+  height?: number
+} = {}) => {
+  const [pipWindow, setPipWindow] = useState<Window | null>(null)
+  const pipWindowRef = useRef<Window | null>(null)
+  const pendingPiPRef = useRef<Promise<Window | null> | null>(null)
+
+  const [isSupported] = useState(() => {
+    if (typeof window === 'undefined') return false
+    return 'documentPictureInPicture' in window
+  })
+
+  const openPiP = useCallback(async () => {
+    if (!isSupported) return null
+    const existingWindow = pipWindowRef.current
+    if (existingWindow && !existingWindow.closed) return existingWindow
+
+    if (pendingPiPRef.current) return pendingPiPRef.current
+
+    // Request a new PiP window from the browser API.
+    const pip = (window as WindowWithDocumentPiP).documentPictureInPicture
+    if (!pip) return null
+
+    const requestPromise = (async () => {
+      try {
+        const win = await pip.requestWindow({ width, height })
+        const currentWindow = pipWindowRef.current
+        if (currentWindow && !currentWindow.closed) return currentWindow
+        setPipWindow(win)
+        return win
+      } catch (error) {
+        // Avoid unhandled rejections if the user blocks or closes the request.
+        console.error('Failed to open Picture-in-Picture window', error)
+        return null
+      } finally {
+        pendingPiPRef.current = null
+      }
+    })()
+
+    pendingPiPRef.current = requestPromise
+    return requestPromise
+  }, [height, isSupported, width])
+
+  const closePiP = useCallback(() => {
+    if (!pipWindow) return
+    if (!pipWindow.closed) {
+      pipWindow.close()
+    }
+    setPipWindow(null)
+  }, [pipWindow])
+
+  useEffect(() => {
+    pipWindowRef.current = pipWindow
+  }, [pipWindow])
+
+  useEffect(() => {
+    if (!pipWindow) return
+
+    const handleClose = () => {
+      setPipWindow(null)
+    }
+
+    pipWindow.addEventListener('pagehide', handleClose)
+    pipWindow.addEventListener('beforeunload', handleClose)
+
+    return () => {
+      pipWindow.removeEventListener('pagehide', handleClose)
+      pipWindow.removeEventListener('beforeunload', handleClose)
+    }
+  }, [pipWindow])
+
+  return {
+    isSupported,
+    isOpen: !!pipWindow && !pipWindow.closed,
+    pipWindow,
+    openPiP,
+    closePiP,
+  }
+}

src/frontend/src/features/pip/hooks/useRoomPiP.tsx

@@ -0,0 +1,29 @@
+import { useCallback } from 'react'
+import { useSnapshot } from 'valtio'
+import { roomPiPStore } from '@/stores/roomPiP'
+
+export const useRoomPiP = () => {
+  const { isOpen } = useSnapshot(roomPiPStore)
+  const isSupported =
+    typeof window !== 'undefined' && 'documentPictureInPicture' in window
+
+  const open = useCallback(() => {
+    roomPiPStore.isOpen = true
+  }, [])
+
+  const close = useCallback(() => {
+    roomPiPStore.isOpen = false
+  }, [])
+
+  const toggle = useCallback(() => {
+    roomPiPStore.isOpen = !roomPiPStore.isOpen
+  }, [])
+
+  return {
+    isSupported,
+    isOpen,
+    open,
+    close,
+    toggle,
+  }
+}

src/frontend/src/features/pip/stores/pipLayoutStore.ts

@@ -0,0 +1,17 @@
+import { proxy } from 'valtio'
+import type { PanelId, SubPanelId } from '@/features/rooms/livekit/types/panel'
+
+type PipLayoutState = {
+  activePanelId: PanelId | null
+  activeSubPanelId: SubPanelId | null
+}
+
+/**
+ * Separate layout store for the PiP window.
+ * Decouples PiP side panel state from the main view so opening Chat/Info/etc.
+ * in PiP does not affect the main window and vice versa.
+ */
+export const pipLayoutStore = proxy<PipLayoutState>({
+  activePanelId: null,
+  activeSubPanelId: null,
+})

src/frontend/src/features/recording/components/ControlsButton.tsx

@@ -1,7 +1,7 @@
-import { css, cx } from '@/styled-system/css'
+import { css } from '@/styled-system/css'
 import { HStack } from '@/styled-system/jsx'
 import { Spinner } from '@/primitives/Spinner'
-import { Button, Text } from '@/primitives'
+import { Button, Icon, Text } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { RecordingStatuses } from '../hooks/useRecordingStatuses'
 import { ReactNode, useEffect, useRef, useState } from 'react'
@@ -42,6 +42,17 @@ export const ControlsButton = ({
 }: ControlsButtonProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: i18nKeyPrefix })
 
+  // Focus management: focus the primary action button when this side panel opens.
+  const primaryActionRef = useRef<HTMLButtonElement | null>(null)
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      if (primaryActionRef.current) {
+        primaryActionRef.current.focus({ preventScroll: true })
+      }
+    })
+  }, [])
+
   const room = useRoomContext()
   const isRoomConnected = room.state == ConnectionState.Connected
 
@@ -97,6 +108,7 @@ export const ControlsButton = ({
           fullWidth
           onPress={handle}
           isDisabled={isDisabled}
+          ref={primaryActionRef}
         >
           {t('button.stop')}
         </Button>
@@ -129,31 +141,23 @@ export const ControlsButton = ({
           })}
           onPress={() => openSidePanel()}
         >
-          <span
-            className={cx(
-              'material-icons',
-              css({
-                color: 'primary.500',
-                marginRight: '1rem',
-              })
-            )}
-          >
-            info
-          </span>
+          <Icon
+            className={css({
+              color: 'primary.500',
+              marginRight: '1rem',
+            })}
+            name="info"
+          />
           <Text variant={'smNote'}>
             {parseLineBreaks(t('button.anotherModeStarted'))}
           </Text>
-          <span
-            className={cx(
-              'material-icons',
-              css({
-                color: 'primary.500',
-                marginLeft: 'auto',
-              })
-            )}
-          >
-            chevron_right
-          </span>
+          <Icon
+            className={css({
+              color: 'primary.500',
+              marginLeft: 'auto',
+            })}
+            name="chevron_right"
+          />
         </RACButton>
       )}
       <Button
@@ -161,6 +165,8 @@ export const ControlsButton = ({
         fullWidth
         onPress={handle}
         isDisabled={isDisabled}
+        size="compact"
+        ref={primaryActionRef}
       >
         {t('button.start')}
       </Button>

src/frontend/src/features/recording/components/LoginPrompt.tsx

@@ -1,4 +1,4 @@
-import { H, Text } from '@/primitives'
+import { H, Text, Icon } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { LoginButton } from '@/components/LoginButton'
 import { HStack } from '@/styled-system/jsx'
@@ -24,9 +24,7 @@ export const LoginPrompt = ({ heading, body }: LoginPromptProps) => {
       })}
     >
       <HStack justify="start" alignItems="center" marginBottom="0.5rem">
-        <span className="material-symbols" aria-hidden={true}>
-          login
-        </span>
+        <Icon type="symbols" name="login" />
         <H lvl={3} margin={false} padding={false}>
           {heading}
         </H>

src/frontend/src/features/recording/components/RecordingStateToast.tsx

@@ -1,6 +1,6 @@
 import { css } from '@/styled-system/css'
 import { useTranslation } from 'react-i18next'
-import { useMemo } from 'react'
+import { useMemo, useRef, useEffect } from 'react'
 import { Text } from '@/primitives'
 import {
   RecordingMode,
@@ -13,6 +13,7 @@ import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 import { useRoomMetadata } from '../hooks/useRoomMetadata'
 import { RecordingStatusIcon } from './RecordingStatusIcon'
 import { useIsRecording } from '@livekit/components-react'
+import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
 
 export const RecordingStateToast = () => {
   const { t } = useTranslation('rooms', {
@@ -21,6 +22,9 @@ export const RecordingStateToast = () => {
 
   const { openTranscript, openScreenRecording } = useSidePanel()
 
+  const lastKeyRef = useRef('')
+  const announce = useScreenReaderAnnounce()
+
   const hasTranscriptAccess = useHasRecordingAccess(
     RecordingMode.Transcript,
     FeatureFlags.Transcript
@@ -67,6 +71,16 @@ export const RecordingStateToast = () => {
     return `${metadata.recording_mode}.${status}`
   }, [metadata, isStarted, isStarting, isRecording])
 
+  // Update screen reader message only when the key actually changes
+  // This prevents duplicate announcements caused by re-renders
+  useEffect(() => {
+    if (key && key !== lastKeyRef.current) {
+      lastKeyRef.current = key
+      const message = t(key)
+      announce(message)
+    }
+  }, [announce, key, t])
+
   if (!key) return null
 
   const hasScreenRecordingAccessAndActive =
@@ -74,61 +88,65 @@ export const RecordingStateToast = () => {
   const hasTranscriptAccessAndActive = isTranscriptActive && hasTranscriptAccess
 
   return (
-    <div
-      className={css({
-        display: 'flex',
-        position: 'fixed',
-        top: '10px',
-        left: '10px',
-        paddingY: '0.25rem',
-        paddingX: '0.75rem 0.75rem',
-        backgroundColor: 'danger.700',
-        borderColor: 'white',
-        border: '1px solid',
-        color: 'white',
-        borderRadius: '4px',
-        gap: '0.5rem',
-      })}
-    >
-      <RecordingStatusIcon
-        isStarted={isStarted}
-        isTranscriptActive={isTranscriptActive}
-      />
+    <>
+      {/* Visual banner (without aria-live to avoid duplicate announcements) */}
+      <div
+        className={css({
+          display: 'flex',
+          position: 'fixed',
+          top: '10px',
+          left: '10px',
+          paddingY: '0.25rem',
+          paddingX: '0.75rem 0.75rem',
+          backgroundColor: 'danger.700',
+          borderColor: 'white',
+          border: '1px solid',
+          color: 'white',
+          borderRadius: '4px',
+          gap: '0.5rem',
+        })}
+      >
+        <RecordingStatusIcon
+          isStarted={isStarted}
+          isTranscriptActive={isTranscriptActive}
+        />
 
-      {!hasScreenRecordingAccessAndActive && !hasTranscriptAccessAndActive && (
-        <Text
-          variant={'sm'}
-          className={css({
-            fontWeight: '500 !important',
-          })}
-        >
-          {t(key)}
-        </Text>
-      )}
-      {hasScreenRecordingAccessAndActive && (
-        <RACButton
-          onPress={openScreenRecording}
-          className={css({
-            textStyle: 'sm !important',
-            fontWeight: '500 !important',
-            cursor: 'pointer',
-          })}
-        >
-          {t(key)}
-        </RACButton>
-      )}
-      {hasTranscriptAccessAndActive && (
-        <RACButton
-          onPress={openTranscript}
-          className={css({
-            textStyle: 'sm !important',
-            fontWeight: '500 !important',
-            cursor: 'pointer',
-          })}
-        >
-          {t(key)}
-        </RACButton>
-      )}
-    </div>
+        {!hasScreenRecordingAccessAndActive &&
+          !hasTranscriptAccessAndActive && (
+            <Text
+              variant={'sm'}
+              className={css({
+                fontWeight: '500 !important',
+              })}
+            >
+              {t(key)}
+            </Text>
+          )}
+        {hasScreenRecordingAccessAndActive && (
+          <RACButton
+            onPress={openScreenRecording}
+            className={css({
+              textStyle: 'sm !important',
+              fontWeight: '500 !important',
+              cursor: 'pointer',
+            })}
+          >
+            {t(key)}
+          </RACButton>
+        )}
+        {hasTranscriptAccessAndActive && (
+          <RACButton
+            onPress={openTranscript}
+            className={css({
+              textStyle: 'sm !important',
+              fontWeight: '500 !important',
+              cursor: 'pointer',
+            })}
+          >
+            {t(key)}
+          </RACButton>
+        )}
+      </div>
+    </>
   )
 }

src/frontend/src/features/recording/components/RecordingStatusIcon.tsx

@@ -1,4 +1,5 @@
 import { Spinner } from '@/primitives/Spinner'
+import { Icon } from '@/primitives'
 
 interface RecordingStatusIconProps {
   isStarted: boolean
@@ -14,8 +15,8 @@ export const RecordingStatusIcon = ({
   }
 
   if (isTranscriptActive) {
-    return <span className="material-symbols">speech_to_text</span>
+    return <Icon type="symbols" name="speech_to_text" />
   }
 
-  return <span className="material-symbols">screen_record</span>
+  return <Icon type="symbols" name="screen_record" />
 }

src/frontend/src/features/recording/components/RequestRecording.tsx

@@ -1,4 +1,4 @@
-import { Button, H, Text } from '@/primitives'
+import { Button, Icon, H, Text } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { HStack } from '@/styled-system/jsx'
 import { useEffect, useRef, useState } from 'react'
@@ -59,7 +59,7 @@ export const RequestRecording = ({
       })}
     >
       <HStack justify="start" alignItems="center" marginBottom="0.5rem">
-        <span className="material-symbols">person_raised_hand</span>
+        <Icon type="symbols" name="person_raised_hand" />
         <H lvl={3} margin={false} padding={false}>
           {heading}
         </H>

src/frontend/src/features/recording/components/RowWrapper.tsx

@@ -1,5 +1,6 @@
 import { css } from '@/styled-system/css'
 import { ReactNode } from 'react'
+import { Icon } from '@/primitives'
 
 type RowPosition = 'first' | 'middle' | 'last' | 'single'
 
@@ -29,9 +30,10 @@ export const RowWrapper = ({
       className={css({
         width: '100%',
         background: 'gray.100',
-        padding: '8px',
+        paddingBlock: '0.5rem',
+        paddingInline: '0',
         display: 'flex',
-        marginTop: '4px',
+        marginTop: '0.25rem',
       })}
     >
       <div
@@ -40,17 +42,19 @@ export const RowWrapper = ({
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
+          paddingInline: '0.25rem',
         })}
       >
         {/*  fixme - doesn't handle properly material-symbols  */}
-        <span className="material-icons">{iconName}</span>
+        <Icon name={iconName} />
       </div>
       <div
         className={css({
-          flex: 5,
+          flex: 6,
           display: 'flex',
           alignItems: 'center',
           gap: '0.25rem',
+          paddingInlineEnd: '8px',
         })}
       >
         {children}

src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx

@@ -5,7 +5,6 @@ import { useRoomId } from '@/features/rooms/livekit/hooks/useRoomId'
 import { useRoomContext } from '@livekit/components-react'
 import {
   RecordingMode,
-  useHasFeatureWithoutAdminRights,
   useHumanizeRecordingMaxDuration,
   useRecordingStatuses,
 } from '@/features/recording'
@@ -19,7 +18,6 @@ import {
 } from '@/features/notifications'
 import posthog from 'posthog-js'
 import { useConfig } from '@/api/useConfig'
-import { FeatureFlags } from '@/features/analytics/enums'
 import { NoAccessView } from './NoAccessView'
 import { ControlsButton } from './ControlsButton'
 import { RowWrapper } from './RowWrapper'
@@ -28,6 +26,7 @@ import { Checkbox } from '@/primitives/Checkbox'
 import { useTranscriptionLanguage } from '@/features/settings'
 import { useMutateRecording } from '../hooks/useMutateRecording'
 import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
+import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner.ts'
 
 export const ScreenRecordingSidePanel = () => {
   const { data } = useConfig()
@@ -38,10 +37,7 @@ export const ScreenRecordingSidePanel = () => {
 
   const [includeTranscript, setIncludeTranscript] = useState(false)
 
-  const hasFeatureWithoutAdminRights = useHasFeatureWithoutAdminRights(
-    RecordingMode.ScreenRecording,
-    FeatureFlags.ScreenRecording
-  )
+  const isAdminOrOwner = useIsAdminOrOwner()
 
   const { notifyParticipants } = useNotifyParticipants()
   const { selectedLanguageKey, isLanguageSetToAuto } =
@@ -98,14 +94,17 @@ export const ScreenRecordingSidePanel = () => {
         await notifyParticipants({
           type: NotificationType.ScreenRecordingStarted,
         })
-        posthog.capture('screen-recording-started', {})
+        posthog.capture('screen-recording-started', {
+          includeTranscript: includeTranscript,
+          language: selectedLanguageKey,
+        })
       }
     } catch (error) {
       console.error('Failed to handle recording:', error)
     }
   }
 
-  if (hasFeatureWithoutAdminRights) {
+  if (!isAdminOrOwner) {
     return (
       <NoAccessView
         i18nKeyPrefix={keyPrefix}
@@ -146,7 +145,7 @@ export const ScreenRecordingSidePanel = () => {
           },
         })}
       />
-      <VStack gap={0} marginBottom={30}>
+      <VStack gap={0} marginBottom={15}>
         <H lvl={1} margin={'sm'} fullWidth>
           {t('heading')}
         </H>
@@ -163,7 +162,7 @@ export const ScreenRecordingSidePanel = () => {
           )}
         </Text>
       </VStack>
-      <VStack gap={0} marginBottom={40}>
+      <VStack gap={0} marginBottom={25}>
         <RowWrapper iconName="cloud_download" position="first">
           <Text variant="sm">{t('details.destination')}</Text>
         </RowWrapper>

src/frontend/src/features/recording/components/TranscriptSidePanel.tsx

@@ -117,7 +117,10 @@ export const TranscriptSidePanel = () => {
         await notifyParticipants({
           type: NotificationType.TranscriptionStarted,
         })
-        posthog.capture('transcript-started', {})
+        posthog.capture('transcript-started', {
+          includeScreenRecording: includeScreenRecording,
+          language: selectedLanguageKey,
+        })
       }
     } catch (error) {
       console.error('Failed to handle transcript:', error)
@@ -178,7 +181,7 @@ export const TranscriptSidePanel = () => {
           },
         })}
       />
-      <VStack gap={0} marginBottom={30}>
+      <VStack gap={0} marginBottom={15}>
         <H lvl={1} margin={'sm'}>
           {t('heading')}
         </H>
@@ -195,7 +198,7 @@ export const TranscriptSidePanel = () => {
           )}
         </Text>
       </VStack>
-      <VStack gap={0} marginBottom={40}>
+      <VStack gap={0} marginBottom={25}>
         <RowWrapper iconName="article" position="first">
           <Text variant="sm">
             {data?.transcription_destination ? (

src/frontend/src/features/recording/hooks/useHumanizeRecordingMaxDuration.ts

@@ -11,6 +11,7 @@ export const useHumanizeRecordingMaxDuration = () => {
 
     return humanizeDuration(data?.recording?.max_duration, {
       language: i18n.language,
+      delimiter: ' ',
     })
   }, [data])
 }

src/frontend/src/features/recording/routes/RecordingDownload.tsx

@@ -104,14 +104,12 @@ export const RecordingDownload = () => {
               {t('success.title')}
             </H>
             <Text centered margin="md" wrap={'balance'}>
-              <span
-                dangerouslySetInnerHTML={{
-                  __html: t('success.body', {
-                    room: data.room.name,
-                    created_at: formatDate(data.created_at, 'YYYY-MM-DD HH:mm'),
-                  }),
-                }}
-              />
+              <span>
+                {t('success.body', {
+                  room: data.room.name,
+                  created_at: formatDate(data.created_at, 'YYYY-MM-DD HH:mm'),
+                })}
+              </span>
               <span>
                 {configData?.recording?.expiration_days && (
                   <>

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

@@ -25,12 +25,12 @@ import { VideoConference } from '../livekit/prefabs/VideoConference'
 import { css } from '@/styled-system/css'
 import { BackgroundProcessorFactory } from '../livekit/components/blur'
 import { LocalUserChoices } from '@/stores/userChoices'
-import { navigateTo } from '@/navigation/navigateTo'
 import { MediaDeviceErrorAlert } from './MediaDeviceErrorAlert'
 import { usePostHog } from 'posthog-js/react'
 import { useConfig } from '@/api/useConfig'
 import { isFireFox } from '@/utils/livekit'
 import { useIsMobile } from '@/utils/useIsMobile'
+import { navigateTo } from '@/navigation/navigateTo'
 
 export const Conference = ({
   roomId,
@@ -228,10 +228,20 @@ export const Conference = ({
             posthog.captureException(e)
           }}
           onDisconnected={(e) => {
-            if (e == DisconnectReason.CLIENT_INITIATED) {
-              navigateTo('feedback', { duplicateIdentity: false })
-            } else if (e == DisconnectReason.DUPLICATE_IDENTITY) {
-              navigateTo('feedback', { duplicateIdentity: true })
+            switch (e) {
+              case DisconnectReason.CLIENT_INITIATED:
+                navigateTo('feedback')
+                return
+              case DisconnectReason.DUPLICATE_IDENTITY:
+              case DisconnectReason.PARTICIPANT_REMOVED:
+                navigateTo(
+                  'feedback',
+                  {},
+                  {
+                    state: { reason: e },
+                  }
+                )
+                return
             }
           }}
           onMediaDeviceFailure={(e, kind) => {

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

@@ -112,8 +112,8 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
                     square
                     size={'sm'}
                     onPress={copyRoomUrlToClipboard}
-                    aria-label={t('copyUrl')}
-                    tooltip={t('copyUrl')}
+                    aria-label={isRoomUrlCopied ? t('copied') : t('copyUrl')}
+                    tooltip={isRoomUrlCopied ? t('copied') : t('copyUrl')}
                   >
                     {isRoomUrlCopied ? (
                       <RiCheckLine aria-hidden="true" />
@@ -138,11 +138,12 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
                   {formatPinCode(roomData?.pin_code)}
                 </Text>
               </div>
+
               <Button
                 variant={isCopied ? 'success' : 'secondaryText'}
                 size="sm"
                 fullWidth
-                aria-label={t('copy')}
+                aria-label={isCopied ? t('copied') : t('copy')}
                 style={{
                   justifyContent: 'start',
                 }}
@@ -173,7 +174,7 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
             <Button
               variant={isCopied ? 'success' : 'tertiary'}
               fullWidth
-              aria-label={t('copy')}
+              aria-label={isCopied ? t('copied') : t('copy')}
               onPress={copyRoomToClipboard}
               data-attr="share-dialog-copy"
             >

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

@@ -446,16 +446,14 @@ export const Join = ({
                 type="text"
                 onChange={saveUsername}
                 label={t('usernameLabel')}
-                aria-label={t('usernameLabel')}
+                id="input-name"
                 defaultValue={username}
                 validate={(value) => !value && t('errors.usernameEmpty')}
                 wrapperProps={{
                   noMargin: true,
                   fullWidth: true,
                 }}
-                labelProps={{
-                  center: true,
-                }}
+                autoComplete="name"
                 maxLength={50}
               />
             </VStack>

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

@@ -1,21 +1,26 @@
-import { Button, Dialog, H, P } from '@/primitives'
+import { Button, Dialog, H, P, ScreenReaderAnnouncer } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { css } from '@/styled-system/css'
 import { useSnapshot } from 'valtio'
 import { connectionObserverStore } from '@/stores/connectionObserver'
 import { HStack } from '@/styled-system/jsx'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { navigateTo } from '@/navigation/navigateTo'
 import humanizeDuration from 'humanize-duration'
 import i18n from 'i18next'
+import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
 
 const IDLE_DISCONNECT_TIMEOUT_MS = 120000 // 2 minutes
+const COUNTDOWN_ANNOUNCEMENT_SECONDS = [90, 60, 30]
+const FINAL_COUNTDOWN_SECONDS = 10
 
 export const IsIdleDisconnectModal = () => {
   const connectionObserverSnap = useSnapshot(connectionObserverStore)
   const [timeRemaining, setTimeRemaining] = useState(IDLE_DISCONNECT_TIMEOUT_MS)
+  const lastAnnouncementRef = useRef<number | null>(null)
 
   const { t } = useTranslation('rooms', { keyPrefix: 'isIdleDisconnectModal' })
+  const announce = useScreenReaderAnnounce()
 
   useEffect(() => {
     if (connectionObserverSnap.isIdleDisconnectModalOpen) {
@@ -35,10 +40,42 @@ export const IsIdleDisconnectModal = () => {
     }
   }, [connectionObserverSnap.isIdleDisconnectModalOpen])
 
-  const minutes = Math.floor(timeRemaining / 1000 / 60)
-  const seconds = (timeRemaining / 1000) % 60
+  useEffect(() => {
+    if (!connectionObserverSnap.isIdleDisconnectModalOpen) {
+      lastAnnouncementRef.current = null
+    }
+  }, [connectionObserverSnap.isIdleDisconnectModalOpen])
+
+  const remainingSeconds = Math.floor(timeRemaining / 1000)
+  const minutes = Math.floor(remainingSeconds / 60)
+  const seconds = remainingSeconds % 60
   const formattedTime = `${minutes}:${seconds.toString().padStart(2, '0')}`
 
+  useEffect(() => {
+    if (!connectionObserverSnap.isIdleDisconnectModalOpen) return
+
+    const shouldAnnounce =
+      COUNTDOWN_ANNOUNCEMENT_SECONDS.includes(remainingSeconds) ||
+      remainingSeconds <= FINAL_COUNTDOWN_SECONDS
+
+    if (shouldAnnounce && remainingSeconds !== lastAnnouncementRef.current) {
+      lastAnnouncementRef.current = remainingSeconds
+      const message = t('countdownAnnouncement', {
+        duration: humanizeDuration(remainingSeconds * 1000, {
+          language: i18n.language,
+          round: false,
+          largest: 2,
+        }),
+      })
+      announce(message, 'assertive', 'idle')
+    }
+  }, [
+    announce,
+    connectionObserverSnap.isIdleDisconnectModalOpen,
+    remainingSeconds,
+    t,
+  ])
+
   return (
     <Dialog
       isOpen={connectionObserverSnap.isIdleDisconnectModalOpen}
@@ -52,6 +89,7 @@ export const IsIdleDisconnectModal = () => {
       {({ close }) => {
         return (
           <div>
+            <ScreenReaderAnnouncer channel="idle" />
             <div
               className={css({
                 height: '50px',
@@ -65,6 +103,7 @@ export const IsIdleDisconnectModal = () => {
                 color: 'blue.800',
                 margin: 'auto',
               })}
+              aria-hidden="true"
             >
               {formattedTime}
             </div>

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

@@ -117,7 +117,9 @@ export const ParticipantTile: (
     'aria-label': t('containerLabel', { name: participantName }),
     onFocus: (event: React.FocusEvent<HTMLDivElement>) => {
       elementProps.onFocus?.(event)
-      setHasKeyboardFocus(true)
+      const target = event.target as HTMLElement | null
+      const isFocusVisible = !!target?.matches?.(':focus-visible')
+      setHasKeyboardFocus(isFocusVisible)
     },
     onBlur: (event: React.FocusEvent<HTMLDivElement>) => {
       elementProps.onBlur?.(event)

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

@@ -5,6 +5,10 @@ import { css } from '@/styled-system/css'
 import { Participant } from 'livekit-client'
 import { useTranslation } from 'react-i18next'
 import { Reaction } from '@/features/rooms/livekit/components/controls/ReactionsToggle'
+import { getEmojiLabel } from '@/features/rooms/livekit/utils/reactionUtils'
+import { accessibilityStore } from '@/stores/accessibility'
+import { useSnapshot } from 'valtio'
+import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
 
 export const ANIMATION_DURATION = 3000
 export const ANIMATION_DISTANCE = 300
@@ -140,11 +144,41 @@ export function ReactionPortal({
   )
 }
 
-export const ReactionPortals = ({ reactions }: { reactions: Reaction[] }) =>
-  reactions.map((instance) => (
-    <ReactionPortal
-      key={instance.id}
-      emoji={instance.emoji}
-      participant={instance.participant}
-    />
-  ))
+export const ReactionPortals = ({ reactions }: { reactions: Reaction[] }) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
+  const { announceReactions } = useSnapshot(accessibilityStore)
+  const [lastAnnouncedId, setLastAnnouncedId] = useState<number | null>(null)
+  const announce = useScreenReaderAnnounce()
+
+  const latestReaction =
+    reactions.length > 0 ? reactions[reactions.length - 1] : undefined
+
+  useEffect(() => {
+    if (!announceReactions) {
+      return
+    }
+    if (!latestReaction) return
+    const isNewReaction = latestReaction.id !== lastAnnouncedId
+    if (!isNewReaction) return
+
+    const emojiLabel = getEmojiLabel(latestReaction.emoji, t)
+    const participantName = latestReaction.participant?.isLocal
+      ? t('you')
+      : latestReaction.participant?.name?.trim() ||
+        t('someone', { defaultValue: 'Someone' })
+    announce(t('announce', { name: participantName, emoji: emojiLabel }))
+    setLastAnnouncedId(latestReaction.id)
+  }, [announce, latestReaction, lastAnnouncedId, announceReactions, t])
+
+  return (
+    <>
+      {reactions.map((instance) => (
+        <ReactionPortal
+          key={instance.id}
+          emoji={instance.emoji}
+          participant={instance.participant}
+        />
+      ))}
+    </>
+  )
+}

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

@@ -1,4 +1,3 @@
-import { layoutStore } from '@/stores/layout'
 import { css } from '@/styled-system/css'
 import { Heading } from 'react-aria-components'
 import { text } from '@/primitives/Text'
@@ -6,34 +5,39 @@ import { Button, Div } from '@/primitives'
 import { RiArrowLeftLine, RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { ParticipantsList } from './controls/Participants/ParticipantsList'
-import { useSidePanel } from '../hooks/useSidePanel'
+import { type SidePanelStore, useSidePanel } from '../hooks/useSidePanel'
 import { ReactNode } from 'react'
 import { Chat } from '../prefabs/Chat'
 import { Effects } from './effects/Effects'
 import { Admin } from './Admin'
 import { Tools } from './Tools'
 import { Info } from './Info'
+import { HStack } from '@/styled-system/jsx'
 
 type StyledSidePanelProps = {
   title: string
+  ariaLabel: string
   children: ReactNode
   onClose: () => void
   isClosed: boolean
   closeButtonTooltip: string
   isSubmenu: boolean
   onBack: () => void
+  backButtonLabel: string
 }
 
 const StyledSidePanel = ({
   title,
+  ariaLabel,
   children,
   onClose,
   isClosed,
   closeButtonTooltip,
   isSubmenu = false,
   onBack,
+  backButtonLabel,
 }: StyledSidePanelProps) => (
-  <div
+  <aside
     className={css({
       borderWidth: '1px',
       borderStyle: 'solid',
@@ -58,32 +62,37 @@ const StyledSidePanel = ({
     style={{
       transform: isClosed ? 'translateX(calc(360px + 1.5rem))' : 'none',
     }}
+    aria-hidden={isClosed}
+    aria-label={ariaLabel}
   >
-    <Heading
-      slot="title"
-      level={1}
-      className={text({ variant: 'h2' })}
-      style={{
-        paddingLeft: '1.5rem',
-        paddingTop: '1rem',
-        display: isClosed ? 'none' : 'flex',
-        justifyContent: 'start',
-        alignItems: 'center',
-      }}
-    >
+    <HStack alignItems="center">
       {isSubmenu && (
         <Button
           variant="secondaryText"
-          size={'sm'}
+          size="sm"
           square
-          className={css({ marginRight: '0.5rem' })}
+          className={css({ marginRight: '0.5rem', marginLeft: '1rem' })}
+          aria-label={backButtonLabel}
           onPress={onBack}
         >
-          <RiArrowLeftLine size={20} />
+          <RiArrowLeftLine size={20} aria-hidden="true" />
         </Button>
       )}
-      {title}
-    </Heading>
+      <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',
+        }}
+      >
+        {title}
+      </Heading>
+    </HStack>
     <Div
       position="absolute"
       top="5"
@@ -104,7 +113,7 @@ const StyledSidePanel = ({
       </Button>
     </Div>
     {children}
-  </div>
+  </aside>
 )
 
 type PanelProps = {
@@ -125,8 +134,7 @@ const Panel = ({ isOpen, keepAlive = false, children }: PanelProps) => (
     {keepAlive || isOpen ? children : null}
   </div>
 )
-
-export const SidePanel = () => {
+export const SidePanel = ({ store }: { store?: SidePanelStore }) => {
   const {
     activePanelId,
     isParticipantsOpen,
@@ -138,22 +146,23 @@ export const SidePanel = () => {
     isInfoOpen,
     isSubPanelOpen,
     activeSubPanelId,
-  } = useSidePanel()
+    closePanel,
+    goBack,
+  } = useSidePanel(store)
   const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
 
   return (
     <StyledSidePanel
       title={t(`heading.${activeSubPanelId || activePanelId}`)}
-      onClose={() => {
-        layoutStore.activePanelId = null
-        layoutStore.activeSubPanelId = null
-      }}
+      ariaLabel={t('ariaLabel')}
+      onClose={closePanel}
       closeButtonTooltip={t('closeButton', {
         content: t(`content.${activeSubPanelId || activePanelId}`),
       })}
       isClosed={!isSidePanelOpen}
       isSubmenu={isSubPanelOpen}
-      onBack={() => (layoutStore.activeSubPanelId = null)}
+      backButtonLabel={t('backToTools')}
+      onBack={goBack}
     >
       <Panel isOpen={isParticipantsOpen}>
         <ParticipantsList />
@@ -164,7 +173,7 @@ export const SidePanel = () => {
       <Panel isOpen={isChatOpen} keepAlive={true}>
         <Chat />
       </Panel>
-      <Panel isOpen={isToolsOpen}>
+      <Panel isOpen={isToolsOpen} keepAlive={true}>
         <Tools />
       </Panel>
       <Panel isOpen={isAdminOpen}>

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

@@ -1,9 +1,10 @@
-import { A, Div, Text } from '@/primitives'
+import { A, Div, Icon, Text } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { Button as RACButton } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { ReactNode } from 'react'
 import { SubPanelId, useSidePanel } from '../hooks/useSidePanel'
+import { useRestoreFocus } from '@/hooks/useRestoreFocus'
 import {
   useIsRecordingModeEnabled,
   RecordingMode,
@@ -86,7 +87,7 @@ const ToolButton = ({
           alignItems: 'center',
         })}
       >
-        <span className="material-symbols">chevron_forward</span>
+        <Icon type="symbols" name="chevron_forward" />
       </div>
     </RACButton>
   )
@@ -94,10 +95,26 @@ const ToolButton = ({
 
 export const Tools = () => {
   const { data } = useConfig()
-  const { openTranscript, openScreenRecording, activeSubPanelId } =
+  const { openTranscript, openScreenRecording, activeSubPanelId, isToolsOpen } =
     useSidePanel()
   const { t } = useTranslation('rooms', { keyPrefix: 'moreTools' })
 
+  // Restore focus to the element that opened the Tools panel
+  // following the same pattern as Chat.
+  useRestoreFocus(isToolsOpen, {
+    // If the active element is a MenuItem (DIV) that will be unmounted when the menu closes,
+    // find the "more options" button ("Plus d'options") that opened the menu
+    resolveTrigger: (activeEl) => {
+      if (activeEl?.tagName === 'DIV') {
+        return document.querySelector<HTMLElement>('#room-options-trigger')
+      }
+      // For direct button clicks (e.g. "Plus d'outils"), use the active element as is
+      return activeEl
+    },
+    restoreFocusRaf: true,
+    preventScroll: true,
+  })
+
   const isTranscriptEnabled = useIsRecordingModeEnabled(
     RecordingMode.Transcript
   )
@@ -146,7 +163,7 @@ export const Tools = () => {
       </Text>
       {isTranscriptEnabled && (
         <ToolButton
-          icon={<span className="material-symbols">speech_to_text</span>}
+          icon={<Icon type="symbols" name="speech_to_text" />}
           title={t('tools.transcript.title')}
           description={t('tools.transcript.body')}
           onPress={() => openTranscript()}
@@ -154,7 +171,7 @@ export const Tools = () => {
       )}
       {isScreenRecordingEnabled && (
         <ToolButton
-          icon={<span className="material-symbols">mode_standby</span>}
+          icon={<Icon type="symbols" name="mode_standby" />}
           title={t('tools.screenRecording.title')}
           description={t('tools.screenRecording.body')}
           onPress={() => openScreenRecording()}

src/frontend/src/features/rooms/livekit/components/controls/Options/EffectsMenuItem.tsx

@@ -2,11 +2,11 @@ import { RiImageCircleAiFill } from '@remixicon/react'
 import { MenuItem } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { menuRecipe } from '@/primitives/menuRecipe'
-import { useSidePanel } from '../../../hooks/useSidePanel'
+import { type SidePanelStore, useSidePanel } from '../../../hooks/useSidePanel'
 
-export const EffectsMenuItem = () => {
+export const EffectsMenuItem = ({ store }: { store?: SidePanelStore }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-  const { toggleEffects } = useSidePanel()
+  const { toggleEffects } = useSidePanel(store)
 
   return (
     <MenuItem

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx

@@ -2,13 +2,32 @@ import { useTranslation } from 'react-i18next'
 import { RiMoreFill } from '@remixicon/react'
 import { Button, Menu } from '@/primitives'
 import { OptionsMenuItems } from './OptionsMenuItems'
+import { useOverlayPortalContainer } from '@/primitives/useOverlayPortalContainer'
+import { useRef, useState } from 'react'
+import { PipOptionsMenu } from '@/features/pip/components/controls/PipOptionsMenu'
 
 export const OptionsButton = () => {
   const { t } = useTranslation('rooms')
+  const portalContainer = useOverlayPortalContainer()
+  const isInPiP = portalContainer && portalContainer.ownerDocument !== document
+  const [isOpen, setIsOpen] = useState(false)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
+  if (isInPiP) {
+    return (
+      <PipOptionsMenu
+        wrapperRef={wrapperRef}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        label={t('options.buttonLabel')}
+      />
+    )
+  }
 
   return (
     <Menu variant="dark">
       <Button
+        id="room-options-trigger"
         square
         variant="primaryDark"
         aria-label={t('options.buttonLabel')}

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx

@@ -7,6 +7,7 @@ import { EffectsMenuItem } from './EffectsMenuItem'
 import { SupportMenuItem } from './SupportMenuItem'
 import { TranscriptMenuItem } from './TranscriptMenuItem'
 import { ScreenRecordingMenuItem } from './ScreenRecordingMenuItem'
+import { PictureInPictureMenuItem } from './PictureInPictureMenuItem'
 
 // @todo try refactoring it to use MenuList component
 export const OptionsMenuItems = () => {
@@ -21,6 +22,7 @@ export const OptionsMenuItems = () => {
         <TranscriptMenuItem />
         <ScreenRecordingMenuItem />
         <FullScreenMenuItem />
+        <PictureInPictureMenuItem />
         <EffectsMenuItem />
       </MenuSection>
       <Separator />

src/frontend/src/features/rooms/livekit/components/controls/Options/PictureInPictureMenuItem.tsx

@@ -0,0 +1,23 @@
+import { MenuItem } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { RiPictureInPicture2Line } from '@remixicon/react'
+import { menuRecipe } from '@/primitives/menuRecipe'
+import { useRoomPiP } from '@/features/pip/hooks/useRoomPiP'
+
+export const PictureInPictureMenuItem = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+  const { isSupported, isOpen, toggle } = useRoomPiP()
+
+  // Hide the entry when the browser doesn't support Document PiP.
+  if (!isSupported) return null
+
+  return (
+    <MenuItem
+      onAction={toggle}
+      className={menuRecipe({ icon: true, variant: 'dark' }).item}
+    >
+      <RiPictureInPicture2Line size={20} />
+      {isOpen ? t('pictureInPicture.exit') : t('pictureInPicture.enter')}
+    </MenuItem>
+  )
+}

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { RiGroupLine, RiInfinityLine } from '@remixicon/react'
 import { ToggleButton } from '@/primitives'
+import { VisualOnlyTooltip } from '@/primitives/VisualOnlyTooltip'
 import { css } from '@/styled-system/css'
 import { useParticipants } from '@livekit/components-react'
 import { useSidePanel } from '../../../hooks/useSidePanel'
@@ -19,6 +20,8 @@ export const ParticipantsToggle = ({
    */
   const participants = useParticipants()
   const numParticipants = participants?.length
+  const announcedCount =
+    numParticipants && numParticipants > 0 ? numParticipants : 1
 
   const { isParticipantsOpen, toggleParticipants } = useSidePanel()
 
@@ -31,21 +34,24 @@ export const ParticipantsToggle = ({
         display: 'inline-block',
       })}
     >
-      <ToggleButton
-        square
-        variant="primaryTextDark"
-        aria-label={t(tooltipLabel)}
-        tooltip={t(tooltipLabel)}
-        isSelected={isParticipantsOpen}
-        onPress={(e) => {
-          toggleParticipants()
-          onPress?.(e)
-        }}
-        data-attr={`controls-participants-${tooltipLabel}`}
-        {...props}
-      >
-        <RiGroupLine />
-      </ToggleButton>
+      <VisualOnlyTooltip tooltip={t(tooltipLabel)}>
+        <ToggleButton
+          square
+          variant="primaryTextDark"
+          aria-label={`${t(tooltipLabel)}. ${t('count', {
+            count: announcedCount,
+          })}.`}
+          isSelected={isParticipantsOpen}
+          onPress={(e) => {
+            toggleParticipants()
+            onPress?.(e)
+          }}
+          data-attr={`controls-participants-${tooltipLabel}`}
+          {...props}
+        >
+          <RiGroupLine />
+        </ToggleButton>
+      </VisualOnlyTooltip>
       <div
         className={css({
           position: 'absolute',

src/frontend/src/features/rooms/livekit/components/controls/ReactionsToggle.tsx

@@ -10,6 +10,7 @@ import {
   ANIMATION_DURATION,
   ReactionPortals,
 } from '@/features/rooms/livekit/components/ReactionPortal'
+import { getEmojiLabel } from '@/features/rooms/livekit/utils/reactionUtils'
 import { Toolbar as RACToolbar } from 'react-aria-components'
 import { Participant } from 'livekit-client'
 import useRateLimiter from '@/hooks/useRateLimiter'
@@ -145,7 +146,7 @@ export const ReactionsToggle = () => {
                 <Button
                   key={index}
                   onPress={() => debouncedSendReaction(emoji)}
-                  aria-label={t('send', { emoji })}
+                  aria-label={t('send', { emoji: getEmojiLabel(emoji, t) })}
                   variant="primaryTextDark"
                   size="sm"
                   square

src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx

@@ -9,15 +9,16 @@ import {
 } from '../blur'
 import { css } from '@/styled-system/css'
 import { H, P, Text, ToggleButton } from '@/primitives'
+import { VisualOnlyTooltip } from '@/primitives/VisualOnlyTooltip'
 import { styled } from '@/styled-system/jsx'
 import { BlurOn } from '@/components/icons/BlurOn'
 import { BlurOnStrong } from '@/components/icons/BlurOnStrong'
 import { useTrackToggle } from '@livekit/components-react'
 import { Loader } from '@/primitives/Loader'
 import { useSyncAfterDelay } from '@/hooks/useSyncAfterDelay'
-import { RiProhibited2Line } from '@remixicon/react'
 import { FunnyEffects } from './FunnyEffects'
 import { useHasFunnyEffectsAccess } from '../../hooks/useHasFunnyEffectsAccess'
+import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
 
 enum BlurRadius {
   NONE = 0,
@@ -50,11 +51,17 @@ export const EffectsConfiguration = ({
   layout = 'horizontal',
 }: EffectsConfigurationProps) => {
   const videoRef = useRef<HTMLVideoElement>(null)
+  const blurLightRef = useRef<HTMLButtonElement | null>(null)
   const { t } = useTranslation('rooms', { keyPrefix: 'effects' })
   const { toggle, enabled } = useTrackToggle({ source: Track.Source.Camera })
   const [processorPending, setProcessorPending] = useState(false)
   const processorPendingReveal = useSyncAfterDelay(processorPending)
   const hasFunnyEffectsAccess = useHasFunnyEffectsAccess()
+  const announce = useScreenReaderAnnounce()
+  const effectAnnouncementTimeout = useRef<ReturnType<
+    typeof setTimeout
+  > | null>(null)
+  const effectAnnouncementId = useRef(0)
 
   useEffect(() => {
     const videoElement = videoRef.current
@@ -69,16 +76,92 @@ export const EffectsConfiguration = ({
     }
   }, [videoTrack, videoTrack?.isMuted])
 
+  useEffect(() => {
+    if (!blurLightRef.current) return
+
+    const rafId = requestAnimationFrame(() => {
+      blurLightRef.current?.focus({ preventScroll: true })
+    })
+
+    return () => {
+      cancelAnimationFrame(rafId)
+    }
+  }, [])
+
+  useEffect(
+    () => () => {
+      if (effectAnnouncementTimeout.current) {
+        clearTimeout(effectAnnouncementTimeout.current)
+      }
+    },
+    []
+  )
+
+  const announceEffectStatusMessage = (message: string) => {
+    effectAnnouncementId.current += 1
+    const currentId = effectAnnouncementId.current
+
+    if (effectAnnouncementTimeout.current) {
+      clearTimeout(effectAnnouncementTimeout.current)
+    }
+
+    effectAnnouncementTimeout.current = setTimeout(() => {
+      if (currentId !== effectAnnouncementId.current) return
+      announce(message)
+    }, 80)
+  }
+
   const clearEffect = async () => {
     await videoTrack.stopProcessor()
     onSubmit?.(undefined)
   }
 
+  const getVirtualBackgroundName = (imagePath?: string) => {
+    if (!imagePath) return ''
+    const match = imagePath.match(/\/backgrounds\/(\d+)\.jpg$/)
+    if (!match) return ''
+    const index = Number(match[1]) - 1
+    if (Number.isNaN(index)) return ''
+    return t(`virtual.descriptions.${index}`)
+  }
+
+  const updateEffectStatusMessage = (
+    type: ProcessorType,
+    options: BackgroundOptions,
+    wasSelectedBeforeToggle: boolean
+  ) => {
+    if (wasSelectedBeforeToggle) {
+      announceEffectStatusMessage(t('blur.status.none'))
+      return
+    }
+
+    if (type === ProcessorType.BLUR) {
+      const message =
+        options.blurRadius === BlurRadius.LIGHT
+          ? t('blur.status.light')
+          : t('blur.status.strong')
+      announceEffectStatusMessage(message)
+      return
+    }
+
+    if (type === ProcessorType.VIRTUAL) {
+      const backgroundName = getVirtualBackgroundName(options.imagePath)
+      if (backgroundName) {
+        announceEffectStatusMessage(
+          `${t('virtual.selectedLabel')} ${backgroundName}`
+        )
+        return
+      }
+    }
+  }
+
   const toggleEffect = async (
     type: ProcessorType,
     options: BackgroundOptions
   ) => {
     setProcessorPending(true)
+    const wasSelectedBeforeToggle = isSelected(type, options)
+
     if (!videoTrack) {
       /**
        * Special case: if no video track is available, then we must pass directly the processor into the
@@ -104,7 +187,7 @@ export const EffectsConfiguration = ({
 
     const processor = getProcessor()
     try {
-      if (isSelected(type, options)) {
+      if (wasSelectedBeforeToggle) {
         // Stop processor.
         await clearEffect()
       } else if (
@@ -131,6 +214,8 @@ export const EffectsConfiguration = ({
         // We want to trigger onSubmit when options changes so the parent component is aware of it.
         onSubmit?.(processor)
       }
+
+      updateEffectStatusMessage(type, options, wasSelectedBeforeToggle)
     } catch (error) {
       console.error('Error applying effect:', error)
     } finally {
@@ -153,8 +238,28 @@ export const EffectsConfiguration = ({
     )
   }
 
-  const tooltipLabel = (type: ProcessorType, options: BackgroundOptions) => {
-    return t(`${type}.${isSelected(type, options) ? 'clear' : 'apply'}`)
+  const tooltipBlur = (type: ProcessorType, options: BackgroundOptions) => {
+    const strength =
+      options.blurRadius === BlurRadius.LIGHT ? 'light' : 'normal'
+    const action = isSelected(type, options) ? 'clear' : 'apply'
+
+    return t(`${type}.${strength}.${action}`)
+  }
+
+  const ariaLabelVirtualBackground = (
+    index: number,
+    imagePath: string
+  ): string => {
+    const isSelectedBackground = isSelected(ProcessorType.VIRTUAL, {
+      imagePath,
+    })
+    const prefix = isSelectedBackground ? 'selectedLabel' : 'apply'
+    const backgroundName = t(`virtual.descriptions.${index}`)
+    return `${t(`virtual.${prefix}`)} ${backgroundName}`
+  }
+
+  const tooltipVirtualBackground = (index: number): string => {
+    return t(`virtual.descriptions.${index}`)
   }
 
   return (
@@ -265,65 +370,57 @@ export const EffectsConfiguration = ({
               >
                 {t('blur.title')}
               </H>
-              <div
-                className={css({
-                  display: 'flex',
-                  gap: '1.25rem',
-                })}
-              >
-                <ToggleButton
-                  variant="bigSquare"
-                  aria-label={t('clear')}
-                  onPress={async () => {
-                    await clearEffect()
-                  }}
-                  isSelected={!getProcessor()}
-                  isDisabled={processorPendingReveal || isDisabled}
+              <div>
+                <div
+                  className={css({
+                    display: 'flex',
+                    gap: '1.25rem',
+                  })}
                 >
-                  <RiProhibited2Line />
-                </ToggleButton>
-                <ToggleButton
-                  variant="bigSquare"
-                  aria-label={tooltipLabel(ProcessorType.BLUR, {
-                    blurRadius: BlurRadius.LIGHT,
-                  })}
-                  tooltip={tooltipLabel(ProcessorType.BLUR, {
-                    blurRadius: BlurRadius.LIGHT,
-                  })}
-                  isDisabled={processorPendingReveal || isDisabled}
-                  onChange={async () =>
-                    await toggleEffect(ProcessorType.BLUR, {
+                  <ToggleButton
+                    ref={blurLightRef}
+                    variant="bigSquare"
+                    aria-label={tooltipBlur(ProcessorType.BLUR, {
                       blurRadius: BlurRadius.LIGHT,
-                    })
-                  }
-                  isSelected={isSelected(ProcessorType.BLUR, {
-                    blurRadius: BlurRadius.LIGHT,
-                  })}
-                  data-attr="toggle-blur-light"
-                >
-                  <BlurOn />
-                </ToggleButton>
-                <ToggleButton
-                  variant="bigSquare"
-                  aria-label={tooltipLabel(ProcessorType.BLUR, {
-                    blurRadius: BlurRadius.NORMAL,
-                  })}
-                  tooltip={tooltipLabel(ProcessorType.BLUR, {
-                    blurRadius: BlurRadius.NORMAL,
-                  })}
-                  isDisabled={processorPendingReveal || isDisabled}
-                  onChange={async () =>
-                    await toggleEffect(ProcessorType.BLUR, {
+                    })}
+                    tooltip={tooltipBlur(ProcessorType.BLUR, {
+                      blurRadius: BlurRadius.LIGHT,
+                    })}
+                    isDisabled={processorPendingReveal || isDisabled}
+                    onChange={async () =>
+                      await toggleEffect(ProcessorType.BLUR, {
+                        blurRadius: BlurRadius.LIGHT,
+                      })
+                    }
+                    isSelected={isSelected(ProcessorType.BLUR, {
+                      blurRadius: BlurRadius.LIGHT,
+                    })}
+                    data-attr="toggle-blur-light"
+                  >
+                    <BlurOn />
+                  </ToggleButton>
+                  <ToggleButton
+                    variant="bigSquare"
+                    aria-label={tooltipBlur(ProcessorType.BLUR, {
                       blurRadius: BlurRadius.NORMAL,
-                    })
-                  }
-                  isSelected={isSelected(ProcessorType.BLUR, {
-                    blurRadius: BlurRadius.NORMAL,
-                  })}
-                  data-attr="toggle-blur-normal"
-                >
-                  <BlurOnStrong />
-                </ToggleButton>
+                    })}
+                    tooltip={tooltipBlur(ProcessorType.BLUR, {
+                      blurRadius: BlurRadius.NORMAL,
+                    })}
+                    isDisabled={processorPendingReveal || isDisabled}
+                    onChange={async () =>
+                      await toggleEffect(ProcessorType.BLUR, {
+                        blurRadius: BlurRadius.NORMAL,
+                      })
+                    }
+                    isSelected={isSelected(ProcessorType.BLUR, {
+                      blurRadius: BlurRadius.NORMAL,
+                    })}
+                    data-attr="toggle-blur-normal"
+                  >
+                    <BlurOnStrong />
+                  </ToggleButton>
+                </div>
               </div>
               <div
                 className={css({
@@ -343,39 +440,37 @@ export const EffectsConfiguration = ({
                   className={css({
                     display: 'flex',
                     gap: '1.25rem',
+                    paddingBottom: '0.5rem',
                     flexWrap: 'wrap',
                   })}
                 >
                   {[...Array(8).keys()].map((i) => {
                     const imagePath = `/assets/backgrounds/${i + 1}.jpg`
                     const thumbnailPath = `/assets/backgrounds/thumbnails/${i + 1}.jpg`
+                    const tooltipText = tooltipVirtualBackground(i)
                     return (
-                      <ToggleButton
-                        key={i}
-                        variant="bigSquare"
-                        aria-label={tooltipLabel(ProcessorType.VIRTUAL, {
-                          imagePath,
-                        })}
-                        tooltip={tooltipLabel(ProcessorType.VIRTUAL, {
-                          imagePath,
-                        })}
-                        isDisabled={processorPendingReveal || isDisabled}
-                        onChange={async () =>
-                          await toggleEffect(ProcessorType.VIRTUAL, {
+                      <VisualOnlyTooltip key={i} tooltip={tooltipText}>
+                        <ToggleButton
+                          variant="bigSquare"
+                          aria-label={ariaLabelVirtualBackground(i, imagePath)}
+                          isDisabled={processorPendingReveal || isDisabled}
+                          onChange={async () =>
+                            await toggleEffect(ProcessorType.VIRTUAL, {
+                              imagePath,
+                            })
+                          }
+                          isSelected={isSelected(ProcessorType.VIRTUAL, {
                             imagePath,
-                          })
-                        }
-                        isSelected={isSelected(ProcessorType.VIRTUAL, {
-                          imagePath,
-                        })}
-                        className={css({
-                          bgSize: 'cover',
-                        })}
-                        style={{
-                          backgroundImage: `url(${thumbnailPath})`,
-                        }}
-                        data-attr={`toggle-virtual-${i}`}
-                      />
+                          })}
+                          className={css({
+                            bgSize: 'cover',
+                          })}
+                          style={{
+                            backgroundImage: `url(${thumbnailPath})`,
+                          }}
+                          data-attr={`toggle-virtual-${i}`}
+                        />
+                      </VisualOnlyTooltip>
                     )
                   })}
                 </div>

src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts

@@ -1,74 +1,77 @@
 import { useSnapshot } from 'valtio'
 import { layoutStore } from '@/stores/layout'
+import { PanelId, SubPanelId } from '../types/panel'
 
-export enum PanelId {
-  PARTICIPANTS = 'participants',
-  EFFECTS = 'effects',
-  CHAT = 'chat',
-  TOOLS = 'tools',
-  ADMIN = 'admin',
-  INFO = 'info',
+export { PanelId, SubPanelId }
+
+export type SidePanelStore = {
+  activePanelId: PanelId | null
+  activeSubPanelId: SubPanelId | null
 }
 
-export enum SubPanelId {
-  TRANSCRIPT = 'transcript',
-  SCREEN_RECORDING = 'screenRecording',
-}
-
-export const useSidePanel = () => {
-  const layoutSnap = useSnapshot(layoutStore)
+export const useSidePanel = (store: SidePanelStore = layoutStore) => {
+  const layoutSnap = useSnapshot(store)
   const activePanelId = layoutSnap.activePanelId
   const activeSubPanelId = layoutSnap.activeSubPanelId
 
-  const isParticipantsOpen = activePanelId == PanelId.PARTICIPANTS
-  const isEffectsOpen = activePanelId == PanelId.EFFECTS
-  const isChatOpen = activePanelId == PanelId.CHAT
-  const isToolsOpen = activePanelId == PanelId.TOOLS
-  const isAdminOpen = activePanelId == PanelId.ADMIN
-  const isInfoOpen = activePanelId == PanelId.INFO
-  const isTranscriptOpen = activeSubPanelId == SubPanelId.TRANSCRIPT
-  const isScreenRecordingOpen = activeSubPanelId == SubPanelId.SCREEN_RECORDING
+  const isParticipantsOpen = activePanelId === PanelId.PARTICIPANTS
+  const isEffectsOpen = activePanelId === PanelId.EFFECTS
+  const isChatOpen = activePanelId === PanelId.CHAT
+  const isToolsOpen = activePanelId === PanelId.TOOLS
+  const isAdminOpen = activePanelId === PanelId.ADMIN
+  const isInfoOpen = activePanelId === PanelId.INFO
+  const isTranscriptOpen = activeSubPanelId === SubPanelId.TRANSCRIPT
+  const isScreenRecordingOpen = activeSubPanelId === SubPanelId.SCREEN_RECORDING
   const isSidePanelOpen = !!activePanelId
   const isSubPanelOpen = !!activeSubPanelId
 
   const toggleAdmin = () => {
-    layoutStore.activePanelId = isAdminOpen ? null : PanelId.ADMIN
-    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
+    store.activePanelId = isAdminOpen ? null : PanelId.ADMIN
+    if (layoutSnap.activeSubPanelId) store.activeSubPanelId = null
   }
 
   const toggleParticipants = () => {
-    layoutStore.activePanelId = isParticipantsOpen ? null : PanelId.PARTICIPANTS
-    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
+    store.activePanelId = isParticipantsOpen ? null : PanelId.PARTICIPANTS
+    if (layoutSnap.activeSubPanelId) store.activeSubPanelId = null
   }
 
   const toggleChat = () => {
-    layoutStore.activePanelId = isChatOpen ? null : PanelId.CHAT
-    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
+    store.activePanelId = isChatOpen ? null : PanelId.CHAT
+    if (layoutSnap.activeSubPanelId) store.activeSubPanelId = null
   }
 
   const toggleEffects = () => {
-    layoutStore.activePanelId = isEffectsOpen ? null : PanelId.EFFECTS
-    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
+    store.activePanelId = isEffectsOpen ? null : PanelId.EFFECTS
+    if (layoutSnap.activeSubPanelId) store.activeSubPanelId = null
   }
 
   const toggleTools = () => {
-    layoutStore.activePanelId = isToolsOpen ? null : PanelId.TOOLS
-    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
+    store.activePanelId = isToolsOpen ? null : PanelId.TOOLS
+    if (layoutSnap.activeSubPanelId) store.activeSubPanelId = null
   }
 
   const toggleInfo = () => {
-    layoutStore.activePanelId = isInfoOpen ? null : PanelId.INFO
-    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
+    store.activePanelId = isInfoOpen ? null : PanelId.INFO
+    if (layoutSnap.activeSubPanelId) store.activeSubPanelId = null
   }
 
   const openTranscript = () => {
-    layoutStore.activeSubPanelId = SubPanelId.TRANSCRIPT
-    layoutStore.activePanelId = PanelId.TOOLS
+    store.activeSubPanelId = SubPanelId.TRANSCRIPT
+    store.activePanelId = PanelId.TOOLS
   }
 
   const openScreenRecording = () => {
-    layoutStore.activeSubPanelId = SubPanelId.SCREEN_RECORDING
-    layoutStore.activePanelId = PanelId.TOOLS
+    store.activeSubPanelId = SubPanelId.SCREEN_RECORDING
+    store.activePanelId = PanelId.TOOLS
+  }
+
+  const closePanel = () => {
+    store.activePanelId = null
+    store.activeSubPanelId = null
+  }
+
+  const goBack = () => {
+    store.activeSubPanelId = null
   }
 
   return {
@@ -82,6 +85,8 @@ export const useSidePanel = () => {
     toggleInfo,
     openTranscript,
     openScreenRecording,
+    closePanel,
+    goBack,
     isSubPanelOpen,
     isChatOpen,
     isParticipantsOpen,

src/frontend/src/features/rooms/livekit/prefabs/Chat.tsx

@@ -1,5 +1,5 @@
 import type { ChatMessage, ChatOptions } from '@livekit/components-core'
-import React, { useEffect } from 'react'
+import React from 'react'
 import {
   formatChatMessageLinks,
   useChat,
@@ -15,6 +15,7 @@ import { ChatEntry } from '../components/chat/Entry'
 import { useSidePanel } from '../hooks/useSidePanel'
 import { LocalParticipant, RemoteParticipant, RoomEvent } from 'livekit-client'
 import { css } from '@/styled-system/css'
+import { useRestoreFocus } from '@/hooks/useRestoreFocus'
 
 export interface ChatProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -38,33 +39,16 @@ export function Chat({ ...props }: ChatProps) {
 
   // Keep track of the element that opened the chat so we can restore focus
   // when the chat panel is closed.
-  const prevIsChatOpenRef = React.useRef(false)
-  const chatTriggerRef = React.useRef<HTMLElement | null>(null)
-
-  useEffect(() => {
-    const wasChatOpen = prevIsChatOpenRef.current
-    const isChatPanelOpen = isChatOpen
-
-    // Chat just opened
-    if (!wasChatOpen && isChatPanelOpen) {
-      chatTriggerRef.current = document.activeElement as HTMLElement | null
-      // Avoid layout "jump" during the side panel slide-in animation.
-      // Focusing can trigger scroll into view; preventScroll keeps the animation smooth.
+  useRestoreFocus(isChatOpen, {
+    // Avoid layout "jump" during the side panel slide-in animation.
+    // Focusing can trigger scroll into view; preventScroll keeps the animation smooth.
+    onOpened: () => {
       requestAnimationFrame(() => {
         inputRef.current?.focus({ preventScroll: true })
       })
-    }
-    // Chat just closed
-    if (wasChatOpen && !isChatPanelOpen) {
-      const trigger = chatTriggerRef.current
-      if (trigger && document.contains(trigger)) {
-        trigger.focus({ preventScroll: true })
-      }
-      chatTriggerRef.current = null
-    }
-
-    prevIsChatOpenRef.current = isChatPanelOpen
-  }, [isChatOpen])
+    },
+    preventScroll: true,
+  })
 
   // Use useParticipants hook to trigger a re-render when the participant list changes.
   const participants = useParticipants()

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx

@@ -73,6 +73,7 @@ export function MobileControlBar({
           />
           <HandToggle />
           <Button
+            id="room-options-trigger"
             square
             variant="primaryDark"
             aria-label={t('options.buttonLabel')}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx

@@ -37,6 +37,7 @@ export const LateralMenu = () => {
   return (
     <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
       <Button
+        id="controlbar-more-options-trigger"
         square
         variant="secondaryDark"
         aria-label={t('controls.moreOptions')}

src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx

@@ -5,9 +5,8 @@ import {
   isWeb,
   log,
 } from '@livekit/components-core'
-import { RoomEvent, Track } from 'livekit-client'
-import * as React from 'react'
-import { useState } from 'react'
+import { Participant, RoomEvent, Track } from 'livekit-client'
+import React, { useCallback, useRef, useState, useEffect } from 'react'
 import {
   ConnectionStateToast,
   FocusLayoutContainer,
@@ -16,7 +15,9 @@ import {
   usePinnedTracks,
   useTracks,
   useCreateLayoutContext,
+  useRoomContext,
 } from '@livekit/components-react'
+import { useTranslation } from 'react-i18next'
 
 import { ControlBar } from './ControlBar/ControlBar'
 import { styled } from '@/styled-system/jsx'
@@ -37,6 +38,15 @@ import { Subtitles } from '@/features/subtitle/component/Subtitles'
 import { CarouselLayout } from '../components/layout/CarouselLayout'
 import { GridLayout } from '../components/layout/GridLayout'
 import { IsIdleDisconnectModal } from '../components/IsIdleDisconnectModal'
+import { RoomPiP } from '@/features/pip/components/RoomPiP'
+import { useRoomPiP } from '@/features/pip/hooks/useRoomPiP'
+import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
+import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
+
+const SIDE_PANEL_WIDTH = '358px'
+const CONTROL_BAR_HEIGHT = '80px'
+const SIDE_PANEL_OFFSET = '16px'
+const SIDE_PANEL_GAP = '3rem'
 
 const LayoutWrapper = styled(
   'div',
@@ -89,7 +99,22 @@ export interface VideoConferenceProps
  */
 export function VideoConference({ ...props }: VideoConferenceProps) {
   const lastAutoFocusedScreenShareTrack =
-    React.useRef<TrackReferenceOrPlaceholder | null>(null)
+    useRef<TrackReferenceOrPlaceholder | null>(null)
+  const lastPinnedParticipantIdentityRef = useRef<string | null>(null)
+  const { t } = useTranslation('rooms', { keyPrefix: 'pinAnnouncements' })
+  const { t: tRooms } = useTranslation('rooms')
+  const room = useRoomContext()
+  const announce = useScreenReaderAnnounce()
+
+  const getAnnouncementName = useCallback(
+    (participant?: Participant | null) => {
+      if (!participant) return tRooms('participants.unknown')
+      return participant.isLocal
+        ? tRooms('participants.you')
+        : getParticipantName(participant)
+    },
+    [tRooms]
+  )
 
   useConnectionObserver()
   useVideoResolutionSubscription()
@@ -115,9 +140,62 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
     (track) => !isEqualTrackRef(track, focusTrack)
   )
 
+  // handle pin announcements
+
+  useEffect(() => {
+    const participant = focusTrack?.participant
+
+    // 1. unpin
+    if (!participant) {
+      if (!lastPinnedParticipantIdentityRef.current) return
+
+      const lastIdentity = lastPinnedParticipantIdentityRef.current
+      const lastParticipant =
+        room.localParticipant.identity === lastIdentity
+          ? room.localParticipant
+          : room.remoteParticipants.get(lastIdentity)
+      const announcementName = getAnnouncementName(lastParticipant)
+
+      announce(
+        lastParticipant?.isLocal
+          ? t('self.unpin')
+          : t('unpin', {
+              name: announcementName,
+            })
+      )
+
+      lastPinnedParticipantIdentityRef.current = null
+      return
+    }
+
+    // 2. same pin → do nothing
+    if (lastPinnedParticipantIdentityRef.current === participant.identity) {
+      return
+    }
+
+    // 3. new pin
+    const participantName = participant.isLocal
+      ? tRooms('participants.you')
+      : getParticipantName(participant)
+
+    lastPinnedParticipantIdentityRef.current = participant.identity
+
+    announce(
+      participant.isLocal ? t('self.pin') : t('pin', { name: participantName })
+    )
+  }, [
+    announce,
+    focusTrack,
+    getAnnouncementName,
+    room.localParticipant,
+    room.remoteParticipants,
+    t,
+    tRooms,
+  ])
+
   /* eslint-disable react-hooks/exhaustive-deps */
   // Code duplicated from LiveKit; this warning will be addressed in the refactoring.
-  React.useEffect(() => {
+  useEffect(() => {
     // If screen share tracks are published, and no pin is set explicitly, auto set the screen share.
     if (
       screenShareTracks.some((track) => track.publication.isSubscribed) &&
@@ -172,8 +250,16 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
 
   const { isSidePanelOpen } = useSidePanel()
   const { areSubtitlesOpen } = useSubtitles()
+  const { isOpen: isPiPOpen } = useRoomPiP()
+  const shouldRenderMainLayout = !isPiPOpen
 
   const [isShareErrorVisible, setIsShareErrorVisible] = useState(false)
+  const layoutInsetVars = {
+    '--lk-side-panel-width': SIDE_PANEL_WIDTH,
+    '--lk-controlbar-height': CONTROL_BAR_HEIGHT,
+    '--lk-side-panel-offset': SIDE_PANEL_OFFSET,
+    '--lk-side-panel-gap': SIDE_PANEL_GAP,
+  } as React.CSSProperties
 
   return (
     <div
@@ -188,75 +274,78 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
           value={layoutContext}
           // onPinChange={handleFocusStateChange}
         >
-          <ScreenShareErrorModal
-            isOpen={isShareErrorVisible}
-            onClose={() => setIsShareErrorVisible(false)}
-          />
-          <IsIdleDisconnectModal />
-          <div
-            // todo - extract these magic values into constant
-            style={{
-              position: 'absolute',
-              inset: isSidePanelOpen
-                ? `var(--lk-grid-gap) calc(358px + 3rem) calc(80px + var(--lk-grid-gap)) 16px`
-                : `var(--lk-grid-gap) var(--lk-grid-gap) calc(80px + var(--lk-grid-gap))`,
-              transition: 'inset .5s cubic-bezier(0.4,0,0.2,1) 5ms',
-              maxHeight: '100%',
-            }}
-          >
-            <LayoutWrapper areSubtitlesOpen={areSubtitlesOpen}>
-              <div
-                style={{
-                  display: 'flex',
-                  position: 'relative',
-                  width: '100%',
-                }}
-              >
-                {!focusTrack ? (
+            <ScreenShareErrorModal
+              isOpen={isShareErrorVisible}
+              onClose={() => setIsShareErrorVisible(false)}
+            />
+            <IsIdleDisconnectModal />
+            <div
+              style={{
+                position: 'absolute',
+                ...layoutInsetVars,
+                inset: isSidePanelOpen
+                  ? `var(--lk-grid-gap) calc(var(--lk-side-panel-width) + var(--lk-side-panel-gap)) calc(var(--lk-controlbar-height) + var(--lk-grid-gap)) var(--lk-side-panel-offset)`
+                  : `var(--lk-grid-gap) var(--lk-grid-gap) calc(var(--lk-controlbar-height) + var(--lk-grid-gap))`,
+                transition: 'inset .5s cubic-bezier(0.4,0,0.2,1) 5ms',
+                maxHeight: '100%',
+              }}
+            >
+              {shouldRenderMainLayout && (
+                <LayoutWrapper areSubtitlesOpen={areSubtitlesOpen}>
                   <div
-                    className="lk-grid-layout-wrapper"
-                    style={{ height: 'auto' }}
+                    style={{
+                      display: 'flex',
+                      position: 'relative',
+                      width: '100%',
+                    }}
                   >
-                    <GridLayout tracks={tracks} style={{ padding: 0 }}>
-                      <ParticipantTile />
-                    </GridLayout>
-                  </div>
-                ) : (
-                  <div
-                    className="lk-focus-layout-wrapper"
-                    style={{ height: 'auto' }}
-                  >
-                    <FocusLayoutContainer style={{ padding: 0 }}>
-                      <CarouselLayout
-                        tracks={carouselTracks}
-                        style={{
-                          minWidth: '200px',
-                        }}
+                    {!focusTrack ? (
+                      <div
+                        className="lk-grid-layout-wrapper"
+                        style={{ height: 'auto' }}
                       >
-                        <ParticipantTile />
-                      </CarouselLayout>
-                      {focusTrack && <FocusLayout trackRef={focusTrack} />}
-                    </FocusLayoutContainer>
+                        <GridLayout tracks={tracks} style={{ padding: 0 }}>
+                          <ParticipantTile />
+                        </GridLayout>
+                      </div>
+                    ) : (
+                      <div
+                        className="lk-focus-layout-wrapper"
+                        style={{ height: 'auto' }}
+                      >
+                        <FocusLayoutContainer style={{ padding: 0 }}>
+                          <CarouselLayout
+                            tracks={carouselTracks}
+                            style={{
+                              minWidth: '200px',
+                            }}
+                          >
+                            <ParticipantTile />
+                          </CarouselLayout>
+                          {focusTrack && <FocusLayout trackRef={focusTrack} />}
+                        </FocusLayoutContainer>
+                      </div>
+                    )}
                   </div>
-                )}
-              </div>
-            </LayoutWrapper>
-            <Subtitles />
-            <MainNotificationToast />
-          </div>
-          <ControlBar
-            onDeviceError={(e) => {
-              console.error(e)
-              if (
-                e.source == Track.Source.ScreenShare &&
-                e.error.toString() ==
-                  'NotAllowedError: Permission denied by system'
-              ) {
-                setIsShareErrorVisible(true)
-              }
-            }}
-          />
-          <SidePanel />
+                </LayoutWrapper>
+              )}
+              <Subtitles />
+              <MainNotificationToast />
+            </div>
+            <ControlBar
+              onDeviceError={(e) => {
+                console.error(e)
+                if (
+                  e.source == Track.Source.ScreenShare &&
+                  e.error.toString() ==
+                    'NotAllowedError: Permission denied by system'
+                ) {
+                  setIsShareErrorVisible(true)
+                }
+              }}
+            />
+            <SidePanel />
+            <RoomPiP />
         </LayoutContextProvider>
       )}
       <RoomAudioRenderer />

src/frontend/src/features/rooms/livekit/types/panel.ts

@@ -0,0 +1,17 @@
+/**
+ * Panel identifiers for the side panel (Info, Chat, Participants, etc.).
+ * Extracted to avoid circular dependencies between layout store and useSidePanel.
+ */
+export enum PanelId {
+  PARTICIPANTS = 'participants',
+  EFFECTS = 'effects',
+  CHAT = 'chat',
+  TOOLS = 'tools',
+  ADMIN = 'admin',
+  INFO = 'info',
+}
+
+export enum SubPanelId {
+  TRANSCRIPT = 'transcript',
+  SCREEN_RECORDING = 'screenRecording',
+}

src/frontend/src/features/rooms/livekit/utils/reactionUtils.ts

@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next'
+
+export const getEmojiLabel = (
+  emoji: string,
+  t: ReturnType<typeof useTranslation>['t']
+) => {
+  const emojiLabels: Record<string, string> = {
+    'thumbs-up': t('emojis.thumbs-up', { defaultValue: 'thumbs up' }),
+    'thumbs-down': t('emojis.thumbs-down', { defaultValue: 'thumbs down' }),
+    'clapping-hands': t('emojis.clapping-hands', {
+      defaultValue: 'clapping hands',
+    }),
+    'red-heart': t('emojis.red-heart', { defaultValue: 'red heart' }),
+    'face-with-tears-of-joy': t('emojis.face-with-tears-of-joy', {
+      defaultValue: 'face with tears of joy',
+    }),
+    'face-with-open-mouth': t('emojis.face-with-open-mouth', {
+      defaultValue: 'surprised face',
+    }),
+    'party-popper': t('emojis.party-popper', { defaultValue: 'party popper' }),
+    'folded-hands': t('emojis.folded-hands', { defaultValue: 'folded hands' }),
+  }
+  return emojiLabels[emoji] ?? emoji
+}

src/frontend/src/features/rooms/routes/Feedback.tsx

@@ -3,7 +3,9 @@ import { Button } from '@/primitives'
 import { Screen } from '@/layout/Screen'
 import { Center, HStack, styled, VStack } from '@/styled-system/jsx'
 import { Rating } from '@/features/rooms/components/Rating.tsx'
-import { useLocation, useSearchParams } from 'wouter'
+import { useLocation } from 'wouter'
+import { useMemo } from 'react'
+import { DisconnectReason } from 'livekit-client'
 
 // fixme - duplicated with home, refactor in a proper style
 const Heading = styled('h1', {
@@ -20,25 +22,40 @@ const Heading = styled('h1', {
   },
 })
 
+enum DisconnectReasonKey {
+  DuplicateIdentity = 'duplicateIdentity',
+  ParticipantRemoved = 'participantRemoved',
+}
+
 export const FeedbackRoute = () => {
   const { t } = useTranslation('rooms')
   const [, setLocation] = useLocation()
 
-  const [searchParams] = useSearchParams()
+  const reasonKey = useMemo(() => {
+    const state = window.history.state
+
+    if (!state?.reason) return
+    switch (state.reason) {
+      case DisconnectReason.DUPLICATE_IDENTITY:
+        return DisconnectReasonKey.DuplicateIdentity
+      case DisconnectReason.PARTICIPANT_REMOVED:
+        return DisconnectReasonKey.ParticipantRemoved
+    }
+  }, [])
+
+  const showBackButton = reasonKey !== DisconnectReasonKey.ParticipantRemoved
 
   return (
     <Screen layout="centered" footer={false}>
       <Center>
         <VStack>
-          <Heading>
-            {t(
-              `feedback.heading.${searchParams.get('duplicateIdentity') ? 'duplicateIdentity' : 'normal'}`
-            )}
-          </Heading>
+          <Heading>{t(`feedback.heading.${reasonKey || 'normal'}`)}</Heading>
           <HStack>
-            <Button variant="secondary" onPress={() => window.history.back()}>
-              {t('feedback.back')}
-            </Button>
+            {showBackButton && (
+              <Button variant="secondary" onPress={() => window.history.back()}>
+                {t('feedback.back')}
+              </Button>
+            )}
             <Button variant="primary" onPress={() => setLocation('/')}>
               {t('feedback.home')}
             </Button>

src/frontend/src/features/settings/components/SettingsDialogExtended.tsx

@@ -2,6 +2,7 @@ import { Dialog, type DialogProps } from '@/primitives'
 import { Tab, Tabs, TabList } from '@/primitives/Tabs.tsx'
 import { css } from '@/styled-system/css'
 import { text } from '@/primitives/Text.tsx'
+import { Icon } from '@/primitives/Icon'
 import { Heading } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import {
@@ -10,6 +11,7 @@ import {
   RiSettings3Line,
   RiSpeakerLine,
   RiVideoOnLine,
+  RiEyeLine,
 } from '@remixicon/react'
 import { AccountTab } from './tabs/AccountTab'
 import { NotificationsTab } from './tabs/NotificationsTab'
@@ -21,6 +23,7 @@ import { useRef } from 'react'
 import { useMediaQuery } from '@/features/rooms/livekit/hooks/useMediaQuery'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
 import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
+import AccessibilityTab from './tabs/AccessibilityTab'
 
 const tabsStyle = css({
   maxHeight: '40.625rem', // fixme size copied from meet settings modal
@@ -106,11 +109,16 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
             </Tab>
             {isAdminOrOwner && (
               <Tab icon highlight id={SettingsDialogExtendedKey.TRANSCRIPTION}>
-                <span className="material-symbols">speech_to_text</span>
+                <Icon type="symbols" name="speech_to_text" />
                 {isWideScreen &&
                   t(`tabs.${SettingsDialogExtendedKey.TRANSCRIPTION}`)}
               </Tab>
             )}
+            <Tab icon highlight id={SettingsDialogExtendedKey.ACCESSIBILITY}>
+              <RiEyeLine />
+              {isWideScreen &&
+                t(`tabs.${SettingsDialogExtendedKey.ACCESSIBILITY}`)}
+            </Tab>
           </TabList>
         </div>
         <div className={tabPanelContainerStyle}>
@@ -124,6 +132,7 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
           <NotificationsTab id={SettingsDialogExtendedKey.NOTIFICATIONS} />
           {/* Transcription tab won't be accessible if the tab is not active in the tab list */}
           <TranscriptionTab id={SettingsDialogExtendedKey.TRANSCRIPTION} />
+          <AccessibilityTab id={SettingsDialogExtendedKey.ACCESSIBILITY} />
         </div>
       </Tabs>
     </Dialog>

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

@@ -0,0 +1,40 @@
+import { Field, H } from '@/primitives'
+import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
+import { css } from '@/styled-system/css'
+import { useTranslation } from 'react-i18next'
+import { useSnapshot } from 'valtio'
+import { accessibilityStore } from '@/stores/accessibility'
+
+export type AccessibilityTabProps = Pick<TabPanelProps, 'id'>
+
+export const AccessibilityTab = ({ id }: AccessibilityTabProps) => {
+  const { t } = useTranslation('settings')
+  const snap = useSnapshot(accessibilityStore)
+
+  return (
+    <TabPanel padding={'md'} flex id={id}>
+      <H lvl={2}>{t('tabs.accessibility')}</H>
+      <ul
+        className={css({
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1rem',
+        })}
+      >
+        <li>
+          <Field
+            type="switch"
+            label={t('accessibility.announceReactions.label')}
+            isSelected={snap.announceReactions}
+            onChange={(value) => {
+              accessibilityStore.announceReactions = value
+            }}
+            wrapperProps={{ noMargin: true, fullWidth: true }}
+          />
+        </li>
+      </ul>
+    </TabPanel>
+  )
+}
+
+export default AccessibilityTab

src/frontend/src/features/settings/hook/useTranscriptionLanguage.ts

@@ -18,6 +18,14 @@ export const useTranscriptionLanguage = () => {
         key: RecordingLanguage.ENGLISH,
         label: t('language.options.english'),
       },
+      {
+        key: RecordingLanguage.GERMAN,
+        label: t('language.options.german'),
+      },
+      {
+        key: RecordingLanguage.DUTCH,
+        label: t('language.options.dutch'),
+      },
       {
         key: RecordingLanguage.AUTOMATIC,
         label: t('language.options.auto'),

src/frontend/src/features/settings/type.ts

@@ -5,4 +5,5 @@ export enum SettingsDialogExtendedKey {
   GENERAL = 'general',
   NOTIFICATIONS = 'notifications',
   TRANSCRIPTION = 'transcription',
+  ACCESSIBILITY = 'accessibility',
 }

src/frontend/src/features/subtitle/component/Subtitles.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useSubtitles } from '../hooks/useSubtitles'
 import { css, cva } from '@/styled-system/css'
 import { styled } from '@/styled-system/jsx'
@@ -13,101 +13,63 @@ export interface TranscriptionSegment {
   id: string
   text: string
   language: string
-  startTime: number
+  startTime?: number
   endTime: number
   final: boolean
   firstReceivedTime: number
   lastReceivedTime: number
 }
 
+export interface TranscriptionSegmentWithParticipant
+  extends TranscriptionSegment {
+  participant: Participant
+}
+
 export interface TranscriptionRow {
   id: string
   participant: Participant
   segments: TranscriptionSegment[]
-  startTime: number
+  startTime?: number
   lastUpdateTime: number
+  lastReceivedTime: number
 }
 
 const useTranscriptionState = () => {
-  const [transcriptionRows, setTranscriptionRows] = useState<
-    TranscriptionRow[]
+  const [transcriptionSegments, setTranscriptionSegments] = useState<
+    TranscriptionSegmentWithParticipant[]
   >([])
-  const [lastActiveParticipantIdentity, setLastActiveParticipantIdentity] =
-    useState<string | null>(null)
 
-  const updateTranscriptions = (
+  const updateTranscriptionSegments = (
     segments: TranscriptionSegment[],
     participant?: Participant
   ) => {
+    console.log(participant, segments)
+
     if (!participant || segments.length === 0) return
 
-    setTranscriptionRows((prevRows) => {
-      const updatedRows = [...prevRows]
-      const now = Date.now()
+    if (segments.length > 1) {
+      console.warn('Unexpected error more segments')
+      return
+    }
 
-      const shouldAppendToLastRow =
-        lastActiveParticipantIdentity === participant.identity &&
-        updatedRows.length > 0
+    const segment = segments[0]
 
-      if (shouldAppendToLastRow) {
-        const lastRowIndex = updatedRows.length - 1
-        const lastRow = updatedRows[lastRowIndex]
-
-        const existingSegmentIds = new Set(lastRow.segments.map((s) => s.id))
-        const newSegments = segments.filter(
-          (segment) => !existingSegmentIds.has(segment.id)
-        )
-        const updatedSegments = lastRow.segments.map((existing) => {
-          const update = segments.find((s) => s.id === existing.id)
-          return update && update.final ? update : existing
-        })
-
-        updatedRows[lastRowIndex] = {
-          ...lastRow,
-          segments: [...updatedSegments, ...newSegments],
-          lastUpdateTime: now,
-        }
-      } else {
-        const newRow: TranscriptionRow = {
-          id: `${participant.identity}-${now}`,
-          participant,
-          segments: [...segments],
-          startTime: Math.min(...segments.map((s) => s.startTime)),
-          lastUpdateTime: now,
-        }
-        updatedRows.push(newRow)
-      }
-
-      return updatedRows
-    })
-
-    setLastActiveParticipantIdentity(participant.identity)
-  }
-
-  const clearTranscriptions = () => {
-    setTranscriptionRows([])
-    setLastActiveParticipantIdentity(null)
-  }
-
-  const updateParticipant = (_name: string, participant: Participant) => {
-    setTranscriptionRows((prevRows) => {
-      return prevRows.map((row) => {
-        if (row.participant.identity === participant.identity) {
-          return {
-            ...row,
-            participant,
-          }
-        }
-        return row
-      })
+    setTranscriptionSegments((prevSegments) => {
+      const existingSegmentIds = new Set(prevSegments.map((s) => s.id))
+      if (existingSegmentIds.has(segment.id)) return prevSegments
+      return [
+        ...prevSegments,
+        {
+          participant: participant,
+          ...segment,
+        },
+      ]
     })
   }
 
   return {
-    transcriptionRows,
-    updateTranscriptions,
-    clearTranscriptions,
-    updateParticipant,
+    updateTranscriptionSegments,
+    transcriptionSegments,
   }
 }
 
@@ -192,24 +154,54 @@ const SubtitlesWrapper = styled(
 export const Subtitles = () => {
   const { areSubtitlesOpen } = useSubtitles()
   const room = useRoomContext()
-  const { transcriptionRows, updateTranscriptions, updateParticipant } =
+
+  const { transcriptionSegments, updateTranscriptionSegments } =
     useTranscriptionState()
 
   useEffect(() => {
     if (!room) return
-    room.on(RoomEvent.TranscriptionReceived, updateTranscriptions)
+    room.on(RoomEvent.TranscriptionReceived, updateTranscriptionSegments)
     return () => {
-      room.off(RoomEvent.TranscriptionReceived, updateTranscriptions)
+      room.off(RoomEvent.TranscriptionReceived, updateTranscriptionSegments)
     }
-  }, [room, updateTranscriptions])
+  }, [room, updateTranscriptionSegments])
 
-  useEffect(() => {
-    if (!room) return
-    room.on(RoomEvent.ParticipantNameChanged, updateParticipant)
-    return () => {
-      room.off(RoomEvent.ParticipantNameChanged, updateParticipant)
+  const transcriptionRows = useMemo(() => {
+    if (transcriptionSegments.length === 0) return []
+
+    const rows: TranscriptionRow[] = []
+    let currentRow: TranscriptionRow | null = null
+
+    for (const segment of transcriptionSegments) {
+      const shouldStartNewRow =
+        !currentRow ||
+        currentRow.participant.identity !== segment.participant.identity
+
+      if (shouldStartNewRow) {
+        currentRow = {
+          id: `${segment.participant.identity}-${segment.firstReceivedTime}`,
+          participant: segment.participant,
+          segments: [segment],
+          startTime: segment.startTime,
+          lastUpdateTime: segment.lastReceivedTime,
+          lastReceivedTime: segment.lastReceivedTime,
+        }
+        rows.push(currentRow)
+      } else if (currentRow) {
+        currentRow.segments.push(segment)
+        currentRow.lastUpdateTime = Math.max(
+          currentRow.lastUpdateTime,
+          segment.lastReceivedTime
+        )
+        currentRow.lastReceivedTime = Math.max(
+          currentRow.lastReceivedTime,
+          segment.lastReceivedTime
+        )
+      }
     }
-  }, [room, updateParticipant])
+
+    return rows
+  }, [transcriptionSegments])
 
   return (
     <SubtitlesWrapper areOpen={areSubtitlesOpen}>

src/frontend/src/features/subtitle/hooks/useSubtitles.tsx

@@ -2,10 +2,14 @@ import { useSnapshot } from 'valtio'
 import { layoutStore } from '@/stores/layout'
 import { useStartSubtitle } from '../api/startSubtitle'
 import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
+import { useRoomContext } from '@livekit/components-react'
+import { useEffect } from 'react'
+import { RoomEvent } from 'livekit-client'
 
 export const useSubtitles = () => {
   const layoutSnap = useSnapshot(layoutStore)
 
+  const room = useRoomContext()
   const apiRoomData = useRoomData()
   const { mutateAsync: startSubtitleRoom, isPending } = useStartSubtitle()
 
@@ -20,6 +24,18 @@ export const useSubtitles = () => {
     layoutStore.showSubtitles = !layoutSnap.showSubtitles
   }
 
+  useEffect(() => {
+    if (!room) return
+
+    const closeSubtitles = () => {
+      layoutStore.showSubtitles = false
+    }
+    room.on(RoomEvent.Disconnected, closeSubtitles)
+    return () => {
+      room.off(RoomEvent.Disconnected, closeSubtitles)
+    }
+  }, [room])
+
   return {
     areSubtitlesOpen: layoutSnap.showSubtitles,
     toggleSubtitles,

src/frontend/src/hooks/useRestoreFocus.ts

@@ -0,0 +1,61 @@
+import { useEffect, useRef } from 'react'
+
+export type RestoreFocusOptions = {
+  resolveTrigger?: (activeEl: HTMLElement | null) => HTMLElement | null
+  onOpened?: () => void
+  onClosed?: () => void
+  restoreFocusRaf?: boolean
+  preventScroll?: boolean
+}
+
+/**
+ * Capture the element that opened a panel/menu (on open transition) and restore focus to it
+ * when the panel/menu closes.
+ */
+export function useRestoreFocus(
+  isOpen: boolean,
+  options: RestoreFocusOptions = {}
+) {
+  const {
+    resolveTrigger,
+    onOpened,
+    onClosed,
+    restoreFocusRaf = false,
+    preventScroll = true,
+  } = options
+
+  const prevIsOpenRef = useRef(false)
+  const triggerRef = useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    const wasOpen = prevIsOpenRef.current
+
+    // Just opened
+    if (!wasOpen && isOpen) {
+      const activeEl = document.activeElement as HTMLElement | null
+      triggerRef.current = resolveTrigger ? resolveTrigger(activeEl) : activeEl
+      onOpened?.()
+    }
+
+    // Just closed
+    if (wasOpen && !isOpen) {
+      const trigger = triggerRef.current
+      if (trigger && document.contains(trigger)) {
+        const focus = () => trigger.focus({ preventScroll })
+        if (restoreFocusRaf) requestAnimationFrame(focus)
+        else focus()
+      }
+      triggerRef.current = null
+      onClosed?.()
+    }
+
+    prevIsOpenRef.current = isOpen
+  }, [
+    isOpen,
+    onClosed,
+    onOpened,
+    preventScroll,
+    resolveTrigger,
+    restoreFocusRaf,
+  ])
+}

src/frontend/src/hooks/useScreenReaderAnnounce.ts

@@ -0,0 +1,19 @@
+import { useCallback } from 'react'
+import {
+  announceToScreenReader,
+  type Politeness,
+  type ScreenReaderChannel,
+} from '@/stores/screenReaderAnnouncer'
+
+export const useScreenReaderAnnounce = () => {
+  return useCallback(
+    (
+      message: string,
+      politeness: Politeness = 'polite',
+      channel: ScreenReaderChannel = 'global'
+    ) => {
+      announceToScreenReader(message, politeness, channel)
+    },
+    []
+  )
+}

src/frontend/src/layout/Header.tsx

@@ -10,6 +10,7 @@ import { FeedbackBanner } from '@/components/FeedbackBanner'
 import { Menu } from '@/primitives/Menu'
 import { MenuList } from '@/primitives/MenuList'
 import { LoginButton } from '@/components/LoginButton'
+import { VisualOnlyTooltip } from '@/primitives/VisualOnlyTooltip'
 
 import { useLoginHint } from '@/hooks/useLoginHint'
 
@@ -90,6 +91,11 @@ export const Header = () => {
   const isTermsOfService = useMatchesRoute('termsOfService')
   const isRoom = useMatchesRoute('room')
   const { user, isLoggedIn, logout } = useUser()
+  const userLabel = user?.full_name || user?.email
+  const loggedInTooltip = t('loggedInUserTooltip')
+  const loggedInAriaLabel = userLabel
+    ? `${loggedInTooltip} ${userLabel}`
+    : loggedInTooltip
 
   return (
     <>
@@ -153,23 +159,24 @@ export const Header = () => {
                 )}
               {!!user && (
                 <Menu>
-                  <Button
-                    size="sm"
-                    variant="secondaryText"
-                    tooltip={t('loggedInUserTooltip')}
-                    tooltipType="delayed"
-                  >
-                    <span
-                      className={css({
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        maxWidth: '350px',
-                        display: { base: 'none', xsm: 'block' },
-                      })}
+                  <Button size="sm" variant="secondaryText">
+                    <VisualOnlyTooltip
+                      tooltip={loggedInTooltip}
+                      ariaLabel={loggedInAriaLabel}
+                      tooltipPosition="bottom"
                     >
-                      {user?.full_name || user?.email}
-                    </span>
+                      <span
+                        className={css({
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                          maxWidth: '350px',
+                          display: { base: 'none', xsm: 'block' },
+                        })}
+                      >
+                        {user?.full_name || user?.email}
+                      </span>
+                    </VisualOnlyTooltip>
                   </Button>
                   <MenuList
                     variant={'light'}

src/frontend/src/layout/Layout.tsx

@@ -4,6 +4,7 @@ import { Header } from './Header'
 import { layoutStore } from '@/stores/layout'
 import { useSnapshot } from 'valtio'
 import { Footer } from '@/layout/Footer'
+import { ScreenReaderAnnouncer } from '@/primitives'
 
 export type Layout = 'fullpage' | 'centered'
 
@@ -41,6 +42,7 @@ export const Layout = ({ children }: { children: ReactNode }) => {
             flexDirection: 'column',
           })}
         >
+          <ScreenReaderAnnouncer />
           {children}
         </main>
       </div>

src/frontend/src/locales/de/home.json

@@ -44,18 +44,15 @@
     },
     "slide1": {
       "title": "Wechseln Sie zur Einfachheit. Testen Sie uns jetzt!",
-      "body": "Entdecken Sie eine intuitive und zugängliche Lösung, entwickelt für alle Mitarbeitenden im öffentlichen Dienst, ihre Partner und viele weitere.",
-      "imgAlt": "Illustration einer benutzerfreundlichen und barrierefreien Kollaborationsplattform"
+      "body": "Entdecken Sie eine intuitive und zugängliche Lösung, entwickelt für alle Mitarbeitenden im öffentlichen Dienst, ihre Partner und viele weitere."
     },
     "slide2": {
       "title": "Gruppenanrufe ohne Einschränkungen",
-      "body": "Unbegrenzte Meeting-Dauer mit flüssiger, hochwertiger Kommunikation – unabhängig von der Gruppengröße.",
-      "imgAlt": "Bild eines virtuellen Meetings mit mehreren nahtlos zusammenarbeitenden Teilnehmenden"
+      "body": "Unbegrenzte Meeting-Dauer mit flüssiger, hochwertiger Kommunikation – unabhängig von der Gruppengröße."
     },
     "slide3": {
       "title": "Verwandeln Sie Ihre Meetings mit KI",
-      "body": "Erhalten Sie präzise und verwertbare Transkripte zur Steigerung Ihrer Produktivität. Funktion in der Beta – jetzt testen!",
-      "imgAlt": "Illustration KI-gestützter Notizen in einem virtuellen Meeting"
+      "body": "Erhalten Sie präzise und verwertbare Transkripte zur Steigerung Ihrer Produktivität. Funktion in der Beta – jetzt testen!"
     }
   }
 }

src/frontend/src/locales/de/recording.json

@@ -17,7 +17,7 @@
   },
   "success": {
     "title": "Ihre Aufzeichnung ist bereit!",
-    "body": "Aufzeichnung des Treffens <b>{{room}}</b> vom {{created_at}}.",
+    "body": "Aufzeichnung des Treffens {{room}} vom {{created_at}}.",
     "expiration": "Achtung, diese Aufzeichnung wird nach {{expiration_days}} Tag(en) gelöscht.",
     "button": "Herunterladen",
     "warning": {

src/frontend/src/locales/de/rooms.json

@@ -2,7 +2,8 @@
   "feedback": {
     "heading": {
       "normal": "Sie haben das Meeting verlassen",
-      "duplicateIdentity": "Sie haben dem Meeting von einem anderen Gerät aus beigetreten"
+      "duplicateIdentity": "Sie haben dem Meeting von einem anderen Gerät aus beigetreten",
+      "participantRemoved": "Sie wurden von einem Administrator aus dem Anruf entfernt"
     },
     "home": "Zur Startseite zurückkehren",
     "back": "Dem Meeting erneut beitreten"
@@ -85,6 +86,7 @@
     "heading": "Ihr Meeting ist bereit",
     "description": "Teilen Sie diesen Link mit Personen, die Sie zum Meeting einladen möchten.",
     "permissions": "Personen mit diesem Link benötigen keine Erlaubnis, um diesem Meeting beizutreten.",
+    "closeDialog": "Dialogfenster schließen",
     "phone": {
       "call": "Rufen Sie an:",
       "pinCode": "Code:"
@@ -154,7 +156,8 @@
     "body": "Du bist der einzige Teilnehmer. Dieses Gespräch endet in {{duration}}. Möchtest du das Gespräch fortsetzen?",
     "settings": "Um diese Nachricht nicht mehr zu sehen, gehe zu Einstellungen > Allgemein.",
     "stayButton": "Gespräch fortsetzen",
-    "leaveButton": "Jetzt verlassen"
+    "leaveButton": "Jetzt verlassen",
+    "countdownAnnouncement": "Das Gespräch endet in {{duration}}."
   },
   "controls": {
     "microphone": "Mikrofon",
@@ -191,7 +194,9 @@
     "leave": "Verlassen",
     "participants": {
       "open": "Alle ausblenden",
-      "closed": "Alle anzeigen"
+      "closed": "Alle anzeigen",
+      "count_one": "{{count}} Teilnehmer",
+      "count_other": "{{count}} Teilnehmer"
     },
     "tools": {
       "open": "Weitere Tools ausblenden",
@@ -205,7 +210,18 @@
     "reactions": {
       "button": "Reaktion senden",
       "send": "Reaktion {{emoji}} senden",
-      "you": "Sie"
+      "announce": "{{name}} : {{emoji}}",
+      "you": "Sie",
+      "emojis": {
+        "thumbs-up": "Daumen hoch",
+        "thumbs-down": "Daumen runter",
+        "clapping-hands": "Klatschende Hände",
+        "red-heart": "rotes Herz",
+        "face-with-tears-of-joy": "Gesicht mit Freudentränen",
+        "face-with-open-mouth": "überraschter Gesichtsausdruck",
+        "party-popper": "Party-Popper",
+        "folded-hands": "gefaltete Hände"
+      }
     }
   },
   "options": {
@@ -218,6 +234,10 @@
       "username": "Ihren Namen aktualisieren",
       "effects": "Effekte anwenden",
       "switchCamera": "Kamera wechseln",
+      "pictureInPicture": {
+        "enter": "Bild-im-Bild",
+        "exit": "Bild-im-Bild schließen"
+      },
       "fullscreen": {
         "enter": "Vollbild",
         "exit": "Vollbildmodus verlassen"
@@ -233,15 +253,34 @@
     "clear": "Effekt deaktivieren",
     "blur": {
       "title": "Hintergrundunschärfe",
-      "light": "Leichte Unschärfe",
-      "normal": "Unschärfe",
-      "apply": "Unschärfe aktivieren",
-      "clear": "Unschärfe deaktivieren"
+      "status": {
+        "none": "Hintergrund scharf.",
+        "light": "Hintergrund leicht verschwommen.",
+        "strong": "Hintergrund stark verschwommen."
+      },
+      "light": {
+        "apply": "Hintergrund leicht verwischen",
+        "clear": "Unschärfe deaktivieren"
+      },
+      "normal": {
+        "apply": "Hintergrund verwischen",
+        "clear": "Unschärfe deaktivieren"
+      }
     },
     "virtual": {
       "title": "Virtueller Hintergrund",
-      "apply": "Virtuellen Hintergrund aktivieren",
-      "clear": "Virtuellen Hintergrund deaktivieren"
+      "selectedLabel": "Hintergrund angewendet:",
+      "apply": "Ersetze deinen Hintergrund:",
+      "descriptions": {
+        "0": "Gerilltes Holzmöbel",
+        "1": "Besprechungsraum",
+        "2": "Loft mit schwarzer Glaswand",
+        "3": "Esszimmer",
+        "4": "Holzregale",
+        "5": "Holztreppe",
+        "6": "Graue Bibliothek",
+        "7": "Kaffeetheke"
+      }
     },
     "faceLandmarks": {
       "title": "Visuelle Effekte",
@@ -256,6 +295,8 @@
     }
   },
   "sidePanel": {
+    "ariaLabel": "Seitenleiste",
+    "backToTools": "Zurück zu den Meeting-Tools",
     "heading": {
       "participants": "Teilnehmer",
       "effects": "Effekte",
@@ -468,6 +509,7 @@
   "participants": {
     "subheading": "Im Raum",
     "you": "Du",
+    "unknown": "Unbekannter Teilnehmer",
     "host": "Host",
     "contributors": "Mitwirkende",
     "collapsable": {
@@ -515,6 +557,14 @@
       "ariaLabel": "Hefte {{name}} an"
     }
   },
+  "pinAnnouncements": {
+    "pin": "Das Video von {{name}} ist angeheftet.",
+    "unpin": "Das Video von {{name}} ist nicht mehr angeheftet.",
+    "self": {
+      "pin": "Dein Video ist angeheftet.",
+      "unpin": "Dein Video ist nicht mehr angeheftet."
+    }
+  },
   "recordingStateToast": {
     "transcript": {
       "started": "Transkription läuft",

src/frontend/src/locales/de/settings.json

@@ -75,6 +75,8 @@
       "options": {
         "french": "Französisch (fr)",
         "english": "Englisch (en)",
+        "dutch": "Niederländisch (nl)",
+        "german": "Deutsch (de)",
         "auto": "Automatisch"
       }
     }
@@ -106,12 +108,18 @@
     "label": "Sprache"
   },
   "settingsButtonLabel": "Einstellungen",
+  "accessibility": {
+    "announceReactions": {
+      "label": "Reaktionen vorlesen"
+    }
+  },
   "tabs": {
     "account": "Profil",
     "audio": "Audio",
     "video": "Video",
     "general": "Allgemein",
     "notifications": "Benachrichtigungen",
+    "accessibility": "Barrierefreiheit",
     "transcription": "Transkription"
   }
 }