♿️(frontend) improve aria-label with accessible emoji description

replace raw emoji with descriptive label to enhance screen reader support

.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,7 +8,60 @@ and this project adheres to
 
 ## [Unreleased]
 
-### Added 
+### 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
+
+### Fixed
+
+- 🔒(backend) prevent automatic upgrade setuptools
+- ♿(frontend) improve contrast for selected options #863
+- ♿️(frontend) announce copy state in invite dialog #877
+
+## [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
+- ✨(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
 
 - ✨(backend) enable user creation via email for external integrations
 - ✨(summary) add Langfuse observability for LLM API calls
@@ -20,6 +73,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 && \

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:

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
 

docs/installation/kubernetes.md

@@ -277,7 +277,6 @@ These are the environmental options available on meet backend.
 | FRONTEND_CUSTOM_CSS_URL                         | URL of an additional CSS file to load in the frontend app. If set, a `<link>` tag with this URL as href is added to the `<head>` of the frontend app         |                                                                                                                                                               |
 | FRONTEND_ANALYTICS                              | Analytics information                                                                                                                                        | {}                                                                                                                                                            |
 | FRONTEND_SUPPORT                                | Crisp frontend support configuration, also you can pass help articles, with `help_article_transcript`, `help_article_recording`, `help_article_more_tools`   | {}                                                                                                                                                            |
-| FRONTEND_TRANSCRIPT                             | Frontend transcription configuration, you can pass a beta form, with `form_beta_users`                                                                       | {}                                                                                                                                                            |
 | FRONTEND_MANIFEST_LINK                          | Link to the "Learn more" button on the homepage                                                                                                              | {}                                                                                                                                                            |
 | FRONTEND_SILENCE_LIVEKIT_DEBUG                  | Silence LiveKit debug logs                                                                                                                                   | false                                                                                                                                                         |
 | FRONTEND_IS_SILENT_LOGIN_ENABLED                | Enable silent login feature                                                                                                                                  | true                                                                                                                                                          |

env.d/development/common.dist

@@ -63,7 +63,7 @@ RECORDING_STORAGE_EVENT_ENABLE=True
 RECORDING_STORAGE_EVENT_TOKEN=password
 SUMMARY_SERVICE_ENDPOINT=http://app-summary-dev:8000/api/v1/tasks/
 SUMMARY_SERVICE_API_TOKEN=password
-SCREEN_RECORDING_BASE_URL=http://localhost:3000/recordings
+RECORDING_DOWNLOAD_BASE_URL=http://localhost:3000/recording
 
 # Telephony
 ROOM_TELEPHONY_ENABLED=True

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
 

src/agents/Dockerfile

@@ -1,5 +1,11 @@
 FROM python:3.13-slim AS base
 
+# Install system dependencies required by LiveKit
+RUN apt-get update && apt-get install -y \
+    libglib2.0-0 \
+    libgobject-2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
 FROM base AS builder
 
 WORKDIR /builder

src/agents/multi-user-transcriber.py

@@ -5,6 +5,7 @@ import logging
 import os
 
 from dotenv import load_dotenv
+from lasuite.plugins import kyutai
 from livekit import api, rtc
 from livekit.agents import (
     Agent,
@@ -13,14 +14,15 @@ from livekit.agents import (
     JobContext,
     JobProcess,
     JobRequest,
-    RoomInputOptions,
     RoomIO,
-    RoomOutputOptions,
     WorkerOptions,
     WorkerPermissions,
     cli,
     utils,
 )
+from livekit.agents import (
+    room_io as lk_room_io,
+)
 from livekit.plugins import deepgram, silero
 
 load_dotenv()
@@ -28,60 +30,26 @@ load_dotenv()
 logger = logging.getLogger("transcriber")
 
 TRANSCRIBER_AGENT_NAME = os.getenv("TRANSCRIBER_AGENT_NAME", "multi-user-transcriber")
-
-# Default Deepgram STT configuration
-DEEPGRAM_STT_DEFAULTS = {
-    "model": "nova-3",
-    "language": "multi",
-}
-
-# Supported parameters for LiveKit's deepgram.STT() in streaming mode
-# Note: Not all Deepgram API parameters are supported by the LiveKit plugin
-# detect_language is NOT supported for real-time streaming
-# Use language="multi" instead for automatic multilingual support
-DEEPGRAM_STT_SUPPORTED_PARAMS = {
-    "model",
-    "language",
-}
+STT_PROVIDER = os.getenv("STT_PROVIDER", "deepgram")
+ENABLE_SILERO_VAD = os.getenv("ENABLE_SILERO_VAD", "true").lower() == "true"
 
 
-def _build_deepgram_stt_kwargs():
-    """Build Deepgram STT kwargs from DEEPGRAM_STT_* environment variables.
+def create_stt_provider():
+    """Create STT provider based on environment configuration."""
+    if STT_PROVIDER == "deepgram":
+        # Note: Not all Deepgram API parameters are supported by the LiveKit plugin
+        # detect_language is NOT supported for real-time streaming
+        # Use language="multi" instead for automatic multilingual support
+        _stt_instance = deepgram.STT(
+            model=os.getenv("DEEPGRAM_STT_MODEL", "nova-3"),
+            language=os.getenv("DEEPGRAM_STT_LANGUAGE", "multi"),
+        )
+    elif STT_PROVIDER == "kyutai":
+        _stt_instance = kyutai.STT(base_url=os.getenv("KYUTAI_STT_BASE_URL"))
+    else:
+        raise ValueError(f"Unknown STT_PROVIDER: {STT_PROVIDER}")
 
-    Only parameters supported by LiveKit's deepgram.STT() are included.
-    Unsupported parameters are logged as warnings.
-    """
-    stt_kwargs = DEEPGRAM_STT_DEFAULTS.copy()
-
-    # Scan environment variables for DEEPGRAM_STT_* pattern
-    for key, value in os.environ.items():
-        if key.startswith("DEEPGRAM_STT_"):
-            # Extract parameter name and convert to lowercase
-            param_name = key.replace("DEEPGRAM_STT_", "", 1).lower()
-
-            # Check if parameter is supported by LiveKit plugin
-            if param_name not in DEEPGRAM_STT_SUPPORTED_PARAMS:
-                supported = ", ".join(sorted(DEEPGRAM_STT_SUPPORTED_PARAMS))
-                logger.warning(
-                    f"Ignoring unsupported Deepgram STT parameter: {param_name}. "
-                    f"Supported parameters: {supported}"
-                )
-                continue
-
-            # Parse value type
-            value_lower = value.lower()
-            if value_lower in ("true", "false"):
-                # Boolean values
-                stt_kwargs[param_name] = value_lower == "true"
-            elif value.isdigit():
-                # Integer values
-                stt_kwargs[param_name] = int(value)
-            else:
-                # String values
-                stt_kwargs[param_name] = value
-
-    logger.info(f"Deepgram STT configuration: {stt_kwargs}")
-    return stt_kwargs
+    return _stt_instance
 
 
 class Transcriber(Agent):
@@ -89,12 +57,11 @@ class Transcriber(Agent):
 
     def __init__(self, *, participant_identity: str):
         """Init transcription agent."""
-        # Build STT configuration from environment variables
-        stt_kwargs = _build_deepgram_stt_kwargs()
+        stt = create_stt_provider()
 
         super().__init__(
             instructions="not-needed",
-            stt=deepgram.STT(**stt_kwargs),
+            stt=stt,
         )
         self.participant_identity = participant_identity
 
@@ -156,19 +123,14 @@ 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,
             participant=participant,
-            input_options=RoomInputOptions(
-                text_enabled=False,
-            ),
-            output_options=RoomOutputOptions(
-                transcription_enabled=True,
-                audio_enabled=False,
+            options=lk_room_io.RoomOptions(
+                text_input=False, audio_output=False, text_output=True
             ),
         )
         await room_io.start()
@@ -231,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,12 +1,13 @@
 
 [project]
 name = "agents"
-version = "1.0.1"
+version = "1.3.0"
 requires-python = ">=3.12"
 dependencies = [
-    "livekit-agents==1.2.18",
-    "livekit-plugins-deepgram==1.2.18",
-    "livekit-plugins-silero==1.2.18",
+    "livekit-agents==1.3.10",
+    "livekit-plugins-deepgram==1.3.10",
+    "livekit-plugins-silero==1.3.10",
+    "livekit-plugins-kyutai-lasuite==0.0.6",
     "python-dotenv==1.2.1"
 ]
 

src/backend/core/api/serializers.py

@@ -181,6 +181,7 @@ class RecordingSerializer(serializers.ModelSerializer):
             "updated_at",
             "status",
             "mode",
+            "options",
             "key",
             "is_expired",
             "expired_at",
@@ -212,6 +213,11 @@ class StartRecordingSerializer(BaseValidationOnlySerializer):
             "screen_recording or transcript.",
         },
     )
+    options = serializers.JSONField(
+        required=False,
+        allow_null=True,
+        default=dict,
+    )
 
 
 class RequestEntrySerializer(BaseValidationOnlySerializer):

src/backend/core/api/viewsets.py

@@ -308,10 +308,13 @@ class RoomViewSet(
             )
 
         mode = serializer.validated_data["mode"]
+        options = serializer.validated_data["options"]
         room = self.get_object()
 
         # May raise exception if an active or initiated recording already exist for the room
-        recording = models.Recording.objects.create(room=room, mode=mode)
+        recording = models.Recording.objects.create(
+            room=room, mode=mode, options=options
+        )
 
         models.RecordingAccess.objects.create(
             user=self.request.user, role=models.RoleChoices.OWNER, recording=recording

src/backend/core/migrations/0016_recording_options.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.2.9 on 2025-12-29 15:30
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0015_application_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='recording',
+            name='options',
+            field=models.JSONField(blank=True, default=dict, help_text='Recording options', verbose_name='Recording options'),
+        ),
+    ]

src/backend/core/models.py

@@ -577,6 +577,12 @@ class Recording(BaseModel):
         verbose_name=_("Recording mode"),
         help_text=_("Defines the mode of recording being called."),
     )
+    options = models.JSONField(
+        blank=True,
+        default=dict,
+        verbose_name=_("Recording options"),
+        help_text=_("Recording options"),
+    )
 
     class Meta:
         db_table = "meet_recording"

src/backend/core/recording/event/notification.py

@@ -16,6 +16,23 @@ from core import models
 logger = logging.getLogger(__name__)
 
 
+def get_recording_download_base_url() -> str:
+    """Get the recording download base URL with backward compatibility."""
+    new_setting = settings.RECORDING_DOWNLOAD_BASE_URL
+    old_setting = settings.SCREEN_RECORDING_BASE_URL
+
+    if old_setting:
+        logger.warning(
+            "SCREEN_RECORDING_BASE_URL is deprecated and will be removed in a future version. "
+            "Please use RECORDING_DOWNLOAD_BASE_URL instead."
+        )
+
+    if new_setting:
+        return new_setting
+
+    return old_setting
+
+
 class NotificationService:
     """Service for processing recordings and notifying external services."""
 
@@ -26,7 +43,12 @@ class NotificationService:
             return self._notify_summary_service(recording)
 
         if recording.mode == models.RecordingModeChoices.SCREEN_RECORDING:
-            return self._notify_user_by_email(recording)
+            summary_success = True
+            if recording.options.get("transcribe", False):
+                summary_success = self._notify_summary_service(recording)
+
+            email_success = self._notify_user_by_email(recording)
+            return email_success and summary_success
 
         logger.error(
             "Unknown recording mode %s for recording %s",
@@ -64,7 +86,7 @@ class NotificationService:
             "domain": settings.EMAIL_DOMAIN,
             "room_name": recording.room.name,
             "recording_expiration_days": settings.RECORDING_EXPIRATION_DAYS,
-            "link": f"{settings.SCREEN_RECORDING_BASE_URL}/{recording.id}",
+            "link": f"{get_recording_download_base_url()}/{recording.id}",
         }
 
         has_failures = False
@@ -137,12 +159,14 @@ class NotificationService:
             "email": owner_access.user.email,
             "sub": owner_access.user.sub,
             "room": recording.room.name,
+            "language": recording.options.get("language"),
             "recording_date": recording.created_at.astimezone(
                 owner_access.user.timezone
             ).strftime("%Y-%m-%d"),
             "recording_time": recording.created_at.astimezone(
                 owner_access.user.timezone
             ).strftime("%H:%M"),
+            "download_link": f"{get_recording_download_base_url()}/{recording.id}",
         }
 
         headers = {

src/backend/core/recording/services/recording_events.py

@@ -1,7 +1,11 @@
 """Recording-related LiveKit Events Service"""
 
+# pylint: disable=no-member
+
 from logging import getLogger
 
+from livekit import api
+
 from core import models, utils
 
 logger = getLogger(__name__)
@@ -14,6 +18,27 @@ class RecordingEventsError(Exception):
 class RecordingEventsService:
     """Handles recording-related Livekit webhook events."""
 
+    @staticmethod
+    def handle_update(recording, egress_status):
+        """Handle egress status updates and sync recording state to room metadata."""
+
+        room_name = str(recording.room.id)
+
+        status_mapping = {
+            api.EgressStatus.EGRESS_ACTIVE: "started",
+            api.EgressStatus.EGRESS_ENDING: "saving",
+            api.EgressStatus.EGRESS_ABORTED: "aborted",
+        }
+
+        recording_status = status_mapping.get(egress_status)
+        if recording_status:
+            try:
+                utils.update_room_metadata(
+                    room_name, {"recording_status": recording_status}
+                )
+            except utils.MetadataUpdateException as e:
+                logger.exception("Failed to update room's metadata: %s", e)
+
     @staticmethod
     def handle_limit_reached(recording):
         """Stop recording and notify participants when limit is reached."""

src/backend/core/recording/worker/mediator.py

@@ -2,6 +2,7 @@
 
 import logging
 
+from core import utils
 from core.models import Recording, RecordingStatusChoices
 
 from .exceptions import (
@@ -60,6 +61,15 @@ class WorkerServiceMediator:
         finally:
             recording.save()
 
+        mode = recording.options.get("original_mode", None) or recording.mode
+
+        try:
+            utils.update_room_metadata(
+                room_name, {"recording_mode": mode, "recording_status": "starting"}
+            )
+        except utils.MetadataUpdateException as e:
+            logger.exception("Failed to update room's metadata: %s", e)
+
         logger.info(
             "Worker started for room %s (worker ID: %s)",
             recording.room,

src/backend/core/services/livekit_events.py

@@ -11,7 +11,7 @@ from django.conf import settings
 
 from livekit import api
 
-from core import models
+from core import models, utils
 from core.recording.services.recording_events import (
     RecordingEventsError,
     RecordingEventsService,
@@ -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:
@@ -138,6 +140,20 @@ class LiveKitEventsService:
         # pylint: disable=not-callable
         handler(data)
 
+    def _handle_egress_updated(self, data):
+        """Handle 'egress_updated' event."""
+
+        egress_id = data.egress_info.egress_id
+        try:
+            recording = models.Recording.objects.get(worker_id=egress_id)
+        except models.Recording.DoesNotExist as err:
+            raise ActionFailedError(
+                f"Recording with worker ID {egress_id} does not exist"
+            ) from err
+
+        egress_status = data.egress_info.status
+        self.recording_events.handle_update(recording, egress_status)
+
     def _handle_egress_ended(self, data):
         """Handle 'egress_ended' event."""
 
@@ -150,6 +166,14 @@ class LiveKitEventsService:
                 f"Recording with worker ID {data.egress_info.egress_id} does not exist"
             ) from err
 
+        try:
+            room_name = str(recording.room.id)
+            utils.update_room_metadata(
+                room_name, {}, ["recording_mode", "recording_status"]
+            )
+        except utils.MetadataUpdateException as e:
+            logger.exception("Failed to update room's metadata: %s", e)
+
         if (
             data.egress_info.status == api.EgressStatus.EGRESS_LIMIT_REACHED
             and recording.status == models.RecordingStatusChoices.ACTIVE

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

@@ -60,6 +60,26 @@ def test_notify_external_services_screen_recording_mode(mock_notify_email):
     mock_notify_email.assert_called_once_with(recording)
 
 
+@mock.patch.object(NotificationService, "_notify_summary_service", return_value=True)
+@mock.patch.object(NotificationService, "_notify_user_by_email", return_value=True)
+def test_notify_external_services_screen_recording_mode_with_transcribe(
+    mock_notify_email, mock_notify_summary
+):
+    """Test notification routing for screen recording mode with transcribe option."""
+
+    service = NotificationService()
+
+    recording = factories.RecordingFactory(
+        mode=models.RecordingModeChoices.SCREEN_RECORDING, options={"transcribe": True}
+    )
+
+    result = service.notify_external_services(recording)
+
+    assert result is True
+    mock_notify_email.assert_called_once_with(recording)
+    mock_notify_summary.assert_called_once_with(recording)
+
+
 def test_notify_external_services_unknown_mode(caplog):
     """Test notification for unknown recording mode."""
     recording = factories.RecordingFactory()

src/backend/core/tests/recording/test_api_recordings_list.py

@@ -82,6 +82,7 @@ def test_api_recordings_list_authenticated_direct(role, settings):
         "key": recording.key,
         "created_at": recording.created_at.isoformat().replace("+00:00", "Z"),
         "mode": recording.mode,
+        "options": {},
         "room": {
             "access_level": str(room.access_level),
             "id": str(room.id),

src/backend/core/tests/recording/test_api_recordings_retrieve.py

@@ -95,6 +95,7 @@ def test_api_recording_retrieve_administrators(settings):
         "updated_at": recording.updated_at.isoformat().replace("+00:00", "Z"),
         "status": str(recording.status),
         "mode": str(recording.mode),
+        "options": {},
         "expired_at": None,
         "is_expired": False,
     }
@@ -130,6 +131,7 @@ def test_api_recording_retrieve_owners(settings):
         "updated_at": recording.updated_at.isoformat().replace("+00:00", "Z"),
         "status": str(recording.status),
         "mode": str(recording.mode),
+        "options": {},
         "expired_at": None,
         "is_expired": False,
     }
@@ -169,6 +171,7 @@ def test_api_recording_retrieve_compute_expiration_date_correctly(settings):
         "updated_at": "2023-01-15T12:00:00Z",
         "status": str(recording.status),
         "mode": str(recording.mode),
+        "options": {},
         "expired_at": "2023-01-16T12:00:00Z",
         "is_expired": False,  # Ensure the recording is still valid and hasn't expired
     }
@@ -209,6 +212,7 @@ def test_api_recording_retrieve_expired(settings):
         "updated_at": "2023-01-15T12:00:00Z",
         "status": str(recording.status),
         "mode": str(recording.mode),
+        "options": {},
         "expired_at": "2023-01-17T12:00:00Z",
         "is_expired": True,  # Ensure the recording has expired
     }

src/backend/core/tests/recording/worker/test_mediator.py

@@ -2,6 +2,7 @@
 
 # pylint: disable=redefined-outer-name,unused-argument
 
+from unittest import mock
 from unittest.mock import Mock
 
 import pytest
@@ -33,14 +34,18 @@ def mediator(mock_worker_service):
     return WorkerServiceMediator(mock_worker_service)
 
 
-def test_start_recording_success(mediator, mock_worker_service):
+@mock.patch("core.utils.update_room_metadata")
+def test_start_recording_success(
+    mock_update_room_metadata, mediator, mock_worker_service
+):
     """Test successful recording start"""
     # Setup
     worker_id = "test-worker-123"
     mock_worker_service.start.return_value = worker_id
 
     mock_recording = RecordingFactory(
-        status=RecordingStatusChoices.INITIATED, worker_id=None
+        status=RecordingStatusChoices.INITIATED,
+        worker_id=None,
     )
     mediator.start(mock_recording)
 
@@ -55,12 +60,18 @@ def test_start_recording_success(mediator, mock_worker_service):
     assert mock_recording.worker_id == worker_id
     assert mock_recording.status == RecordingStatusChoices.ACTIVE
 
+    mock_update_room_metadata.assert_called_once_with(
+        str(mock_recording.room.id),
+        {"recording_mode": mock_recording.mode, "recording_status": "starting"},
+    )
+
 
 @pytest.mark.parametrize(
     "error_class", [WorkerRequestError, WorkerConnectionError, WorkerResponseError]
 )
+@mock.patch("core.utils.update_room_metadata")
 def test_mediator_start_recording_worker_errors(
-    mediator, mock_worker_service, error_class
+    mock_update_room_metadata, mediator, mock_worker_service, error_class
 ):
     """Test handling of various worker errors during start"""
     # Setup
@@ -78,6 +89,8 @@ def test_mediator_start_recording_worker_errors(
     assert mock_recording.status == RecordingStatusChoices.FAILED_TO_START
     assert mock_recording.worker_id is None
 
+    mock_update_room_metadata.assert_not_called()
+
 
 @pytest.mark.parametrize(
     "status",
@@ -90,8 +103,9 @@ def test_mediator_start_recording_worker_errors(
         RecordingStatusChoices.ABORTED,
     ],
 )
+@mock.patch("core.utils.update_room_metadata")
 def test_mediator_start_recording_from_forbidden_status(
-    mediator, mock_worker_service, status
+    mock_update_room_metadata, mediator, mock_worker_service, status
 ):
     """Test handling of various worker errors during start"""
     # Setup
@@ -105,6 +119,8 @@ def test_mediator_start_recording_from_forbidden_status(
     mock_recording.refresh_from_db()
     assert mock_recording.status == status
 
+    mock_update_room_metadata.assert_not_called()
+
 
 def test_mediator_stop_recording_success(mediator, mock_worker_service):
     """Test successful recording stop"""

src/backend/core/tests/services/test_livekit_events.py

@@ -21,7 +21,7 @@ from core.services.livekit_events import (
 )
 from core.services.lobby import LobbyService
 from core.services.telephony import TelephonyException, TelephonyService
-from core.utils import NotificationError
+from core.utils import MetadataUpdateException, NotificationError
 
 pytestmark = pytest.mark.django_db
 
@@ -70,7 +70,10 @@ def test_initialization(
     ),
 )
 @mock.patch("core.utils.notify_participants")
-def test_handle_egress_ended_success(mock_notify, mode, notification_type, service):
+@mock.patch("core.utils.update_room_metadata")
+def test_handle_egress_ended_success(
+    mock_update_room_metadata, mock_notify, mode, notification_type, service
+):
     """Should successfully stop recording and notifies all participant."""
 
     recording = RecordingFactory(worker_id="worker-1", mode=mode, status="active")
@@ -83,13 +86,98 @@ def test_handle_egress_ended_success(mock_notify, mode, notification_type, servi
     mock_notify.assert_called_once_with(
         room_name=str(recording.room.id), notification_data={"type": notification_type}
     )
+    mock_update_room_metadata.assert_called_once_with(
+        str(recording.room.id), {}, ["recording_mode", "recording_status"]
+    )
 
     recording.refresh_from_db()
     assert recording.status == "stopped"
 
 
+@pytest.mark.parametrize(
+    ("egress_status", "status"),
+    (
+        (EgressStatus.EGRESS_ACTIVE, "started"),
+        (EgressStatus.EGRESS_ENDING, "saving"),
+        (EgressStatus.EGRESS_ABORTED, "aborted"),
+    ),
+)
+@mock.patch("core.utils.update_room_metadata")
+def test_handle_egress_updated_success(
+    mock_update_room_metadata, egress_status, status, service
+):
+    """Should successfully update room's metadata."""
+
+    recording = RecordingFactory(worker_id="worker-1", status="initiated")
+    mock_data = mock.MagicMock()
+    mock_data.egress_info.egress_id = recording.worker_id
+    mock_data.egress_info.status = egress_status
+
+    service._handle_egress_updated(mock_data)
+
+    mock_update_room_metadata.assert_called_once_with(
+        str(recording.room.id), {"recording_status": status}
+    )
+
+
+@pytest.mark.parametrize(
+    "egress_status",
+    (
+        EgressStatus.EGRESS_FAILED,
+        EgressStatus.EGRESS_LIMIT_REACHED,
+    ),
+)
+@mock.patch("core.utils.update_room_metadata")
+def test_handle_egress_updated_non_handled(
+    mock_update_room_metadata, egress_status, service
+):
+    """Should ignore certain egress status and don't trigger metadata updates."""
+
+    recording = RecordingFactory(worker_id="worker-1", status="initiated")
+    mock_data = mock.MagicMock()
+    mock_data.egress_info.egress_id = recording.worker_id
+    mock_data.egress_info.status = egress_status
+
+    service._handle_egress_updated(mock_data)
+
+    mock_update_room_metadata.assert_not_called()
+
+
+@pytest.mark.parametrize(
+    ("mode", "notification_type"),
+    (
+        ("screen_recording", "screenRecordingLimitReached"),
+        ("transcript", "transcriptionLimitReached"),
+    ),
+)
 @mock.patch("core.utils.notify_participants")
-def test_handle_egress_ended_notification_fails(mock_notify, service):
+@mock.patch("core.utils.update_room_metadata")
+def test_handle_egress_ended_metadata_update_fails(
+    mock_update_room_metadata, mock_notify, mode, notification_type, service
+):
+    """Should successfully stop recording when metadata's update fails."""
+
+    recording = RecordingFactory(worker_id="worker-1", mode=mode, status="active")
+    mock_data = mock.MagicMock()
+    mock_data.egress_info.egress_id = recording.worker_id
+    mock_data.egress_info.status = EgressStatus.EGRESS_LIMIT_REACHED
+
+    mock_update_room_metadata.side_effect = MetadataUpdateException("Error notifying")
+
+    service._handle_egress_ended(mock_data)
+
+    mock_notify.assert_called_once_with(
+        room_name=str(recording.room.id), notification_data={"type": notification_type}
+    )
+    recording.refresh_from_db()
+    assert recording.status == "stopped"
+
+
+@mock.patch("core.utils.notify_participants")
+@mock.patch("core.utils.update_room_metadata")
+def test_handle_egress_ended_notification_fails(
+    mock_update_room_metadata, mock_notify, service
+):
     """Should raise ActionFailedError when notification fails but still stop recording."""
 
     recording = RecordingFactory(worker_id="worker-1", status="active")
@@ -108,9 +196,16 @@ def test_handle_egress_ended_notification_fails(mock_notify, service):
     recording.refresh_from_db()
     assert recording.status == "stopped"
 
+    mock_update_room_metadata.assert_called_once_with(
+        str(recording.room.id), {}, ["recording_mode", "recording_status"]
+    )
+
 
 @mock.patch("core.utils.notify_participants")
-def test_handle_egress_ended_recording_not_found(mock_notify, service):
+@mock.patch("core.utils.update_room_metadata")
+def test_handle_egress_ended_recording_not_found(
+    mock_update_room_metadata, mock_notify, service
+):
     """Should raise ActionFailedError when recording doesn't exist."""
 
     recording = RecordingFactory(worker_id="worker-1", status="active")
@@ -124,13 +219,17 @@ def test_handle_egress_ended_recording_not_found(mock_notify, service):
         service._handle_egress_ended(mock_data)
 
     mock_notify.assert_not_called()
+    mock_update_room_metadata.assert_not_called()
 
     recording.refresh_from_db()
     assert recording.status == "active"
 
 
 @mock.patch("core.utils.notify_participants")
-def test_handle_egress_ended_recording_not_active(mock_notify, service):
+@mock.patch("core.utils.update_room_metadata")
+def test_handle_egress_ended_recording_not_active(
+    mock_update_room_metadata, mock_notify, service
+):
     """Should ignore non-active recordings."""
 
     recording = RecordingFactory(worker_id="worker-1", status="failed_to_stop")
@@ -141,13 +240,19 @@ def test_handle_egress_ended_recording_not_active(mock_notify, service):
     service._handle_egress_ended(mock_data)
 
     mock_notify.assert_not_called()
+    mock_update_room_metadata.assert_called_once_with(
+        str(recording.room.id), {}, ["recording_mode", "recording_status"]
+    )
 
     recording.refresh_from_db()
     assert recording.status == "failed_to_stop"
 
 
 @mock.patch("core.utils.notify_participants")
-def test_handle_egress_ended_recording_not_limit_reached(mock_notify, service):
+@mock.patch("core.utils.update_room_metadata")
+def test_handle_egress_ended_recording_not_limit_reached(
+    mock_update_room_metadata, mock_notify, service
+):
     """Should ignore egress non-limit-reached statuses."""
 
     recording = RecordingFactory(worker_id="worker-1", status="stopped")
@@ -158,6 +263,9 @@ def test_handle_egress_ended_recording_not_limit_reached(mock_notify, service):
     service._handle_egress_ended(mock_data)
 
     mock_notify.assert_not_called()
+    mock_update_room_metadata.assert_called_once_with(
+        str(recording.room.id), {}, ["recording_mode", "recording_status"]
+    )
     assert recording.status == "stopped"
 
 

src/backend/core/utils.py

@@ -25,6 +25,7 @@ from livekit.api import (  # pylint: disable=E0611
     LiveKitAPI,
     SendDataRequest,
     TwirpError,
+    UpdateRoomMetadataRequest,
     VideoGrants,
 )
 
@@ -244,6 +245,57 @@ async def notify_participants(room_name: str, notification_data: dict):
         await lkapi.aclose()
 
 
+class MetadataUpdateException(Exception):
+    """Room's metadata update fails."""
+
+
+@async_to_sync
+async def update_room_metadata(
+    room_name: str, metadata: dict, remove_keys: Optional[list[str]] = None
+):
+    """Update LiveKit room metadata by merging new values with existing metadata.
+
+    Args:
+        room_name: Name of the room to update
+        metadata: Dictionary of metadata key-values to add/update
+        remove_keys: Optional list of keys to remove from existing metadata.
+    """
+
+    lkapi = create_livekit_client()
+
+    try:
+        response = await lkapi.room.list_rooms(
+            ListRoomsRequest(
+                names=[room_name],
+            )
+        )
+
+        if not response.rooms:
+            return
+
+        room = response.rooms[0]
+
+        existing_metadata = json.loads(room.metadata) if room.metadata else {}
+
+        if remove_keys:
+            for key in remove_keys:
+                existing_metadata.pop(key, None)
+
+        updated_metadata = {**existing_metadata, **metadata}
+
+        await lkapi.room.update_room_metadata(
+            UpdateRoomMetadataRequest(
+                room=room_name, metadata=json.dumps(updated_metadata).encode("utf-8")
+            )
+        )
+    except TwirpError as e:
+        raise MetadataUpdateException(
+            f"Failed to update metadata for room {room_name}: {e}"
+        ) from e
+    finally:
+        await lkapi.aclose()
+
+
 ALPHANUMERIC_CHARSET = string.ascii_letters + string.digits
 
 

src/backend/locale/de_DE/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-12-17 15:12+0000\n"
+"POT-Creation-Date: 2025-12-29 15:15+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -315,92 +315,96 @@ msgstr "Aufzeichnungsmodus"
 msgid "Defines the mode of recording being called."
 msgstr "Definiert den aufgerufenen Aufzeichnungsmodus."
 
-#: core/models.py:584
+#: core/models.py:583 core/models.py:584
+msgid "Recording options"
+msgstr "Aufnahmeoptionen"
+
+#: core/models.py:590
 msgid "Recording"
 msgstr "Aufzeichnung"
 
-#: core/models.py:585
+#: core/models.py:591
 msgid "Recordings"
 msgstr "Aufzeichnungen"
 
-#: core/models.py:693
+#: core/models.py:699
 msgid "Recording/user relation"
 msgstr "Beziehung Aufzeichnung/Benutzer"
 
-#: core/models.py:694
+#: core/models.py:700
 msgid "Recording/user relations"
 msgstr "Beziehungen Aufzeichnung/Benutzer"
 
-#: core/models.py:700
+#: core/models.py:706
 msgid "This user is already in this recording."
 msgstr "Dieser Benutzer ist bereits Teil dieser Aufzeichnung."
 
-#: core/models.py:706
+#: core/models.py:712
 msgid "This team is already in this recording."
 msgstr "Dieses Team ist bereits Teil dieser Aufzeichnung."
 
-#: core/models.py:712
+#: core/models.py:718
 msgid "Either user or team must be set, not both."
 msgstr "Entweder Benutzer oder Team muss festgelegt werden, nicht beides."
 
-#: core/models.py:729
+#: core/models.py:735
 msgid "Create rooms"
 msgstr "Räume erstellen"
 
-#: core/models.py:730
+#: core/models.py:736
 msgid "List rooms"
 msgstr "Räume auflisten"
 
-#: core/models.py:731
+#: core/models.py:737
 msgid "Retrieve room details"
 msgstr "Raumdetails abrufen"
 
-#: core/models.py:732
+#: core/models.py:738
 msgid "Update rooms"
 msgstr "Räume aktualisieren"
 
-#: core/models.py:733
+#: core/models.py:739
 msgid "Delete rooms"
 msgstr "Räume löschen"
 
-#: core/models.py:746
+#: core/models.py:752
 msgid "Application name"
 msgstr "Anwendungsname"
 
-#: core/models.py:747
+#: core/models.py:753
 msgid "Descriptive name for this application."
 msgstr "Beschreibender Name für diese Anwendung."
 
-#: core/models.py:757
+#: core/models.py:763
 msgid "Hashed on Save. Copy it now if this is a new secret."
 msgstr ""
 "Beim Speichern gehasht. Jetzt kopieren, wenn dies ein neues Geheimnis ist."
 
-#: core/models.py:768
+#: core/models.py:774
 msgid "Application"
 msgstr "Anwendung"
 
-#: core/models.py:769
+#: core/models.py:775
 msgid "Applications"
 msgstr "Anwendungen"
 
-#: core/models.py:792
+#: core/models.py:798
 msgid "Enter a valid domain"
 msgstr "Geben Sie eine gültige Domain ein"
 
-#: core/models.py:795
+#: core/models.py:801
 msgid "Domain"
 msgstr "Domain"
 
-#: core/models.py:796
+#: core/models.py:802
 msgid "Email domain this application can act on behalf of."
 msgstr "E-Mail-Domain, im Namen der diese Anwendung handeln kann."
 
-#: core/models.py:808
+#: core/models.py:814
 msgid "Application domain"
 msgstr "Anwendungsdomain"
 
-#: core/models.py:809
+#: core/models.py:815
 msgid "Application domains"
 msgstr "Anwendungsdomains"
 

src/backend/locale/en_US/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-12-17 15:12+0000\n"
+"POT-Creation-Date: 2025-12-29 15:15+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -309,95 +309,99 @@ msgstr "Recording mode"
 msgid "Defines the mode of recording being called."
 msgstr "Defines the mode of recording being called."
 
-#: core/models.py:584
+#: core/models.py:583 core/models.py:584
+msgid "Recording options"
+msgstr "Recording options"
+
+#: core/models.py:590
 msgid "Recording"
 msgstr "Recording"
 
-#: core/models.py:585
+#: core/models.py:591
 msgid "Recordings"
 msgstr "Recordings"
 
-#: core/models.py:693
+#: core/models.py:699
 msgid "Recording/user relation"
 msgstr "Recording/user relation"
 
-#: core/models.py:694
+#: core/models.py:700
 msgid "Recording/user relations"
 msgstr "Recording/user relations"
 
-#: core/models.py:700
+#: core/models.py:706
 msgid "This user is already in this recording."
 msgstr "This user is already in this recording."
 
-#: core/models.py:706
+#: core/models.py:712
 msgid "This team is already in this recording."
 msgstr "This team is already in this recording."
 
-#: core/models.py:712
+#: core/models.py:718
 msgid "Either user or team must be set, not both."
 msgstr "Either user or team must be set, not both."
 
-#: core/models.py:729
+#: core/models.py:735
 #, fuzzy
 #| msgid "created on"
 msgid "Create rooms"
 msgstr "Create rooms"
 
-#: core/models.py:730
+#: core/models.py:736
 msgid "List rooms"
 msgstr "List rooms"
 
-#: core/models.py:731
+#: core/models.py:737
 msgid "Retrieve room details"
 msgstr "Retrieve room details"
 
-#: core/models.py:732
+#: core/models.py:738
 #, fuzzy
 #| msgid "updated on"
 msgid "Update rooms"
 msgstr "Update rooms"
 
-#: core/models.py:733
+#: core/models.py:739
 msgid "Delete rooms"
 msgstr "Delete rooms"
 
-#: core/models.py:746
+#: core/models.py:752
 msgid "Application name"
 msgstr "Application name"
 
-#: core/models.py:747
+#: core/models.py:753
 msgid "Descriptive name for this application."
 msgstr "Descriptive name for this application."
 
-#: core/models.py:757
+#: core/models.py:763
 msgid "Hashed on Save. Copy it now if this is a new secret."
 msgstr "Hashed on Save. Copy it now if this is a new secret."
 
-#: core/models.py:768
+#: core/models.py:774
 msgid "Application"
 msgstr "Application"
 
-#: core/models.py:769
+#: core/models.py:775
 msgid "Applications"
 msgstr "Applications"
 
-#: core/models.py:792
+#: core/models.py:798
 msgid "Enter a valid domain"
 msgstr "Enter a valid domain"
 
-#: core/models.py:795
+#: core/models.py:801
 msgid "Domain"
 msgstr "Domain"
 
-#: core/models.py:796
+#: core/models.py:802
 msgid "Email domain this application can act on behalf of."
 msgstr "Email domain this application can act on behalf of."
 
-#: core/models.py:808
+#: core/models.py:814
 msgid "Application domain"
 msgstr "Application domain"
 
-#: core/models.py:809
+#: core/models.py:815
 msgid "Application domains"
 msgstr "Application domains"
 

src/backend/locale/fr_FR/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-12-17 15:12+0000\n"
+"POT-Creation-Date: 2025-12-29 15:15+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: antoine.lebaud@mail.numerique.gouv.fr\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -315,93 +315,97 @@ msgstr "Mode d'enregistrement"
 msgid "Defines the mode of recording being called."
 msgstr "Définit le mode d'enregistrement appelé."
 
-#: core/models.py:584
+#: core/models.py:583 core/models.py:584
+msgid "Recording options"
+msgstr "Options d'enregistrement"
+
+#: core/models.py:590
 msgid "Recording"
 msgstr "Enregistrement"
 
-#: core/models.py:585
+#: core/models.py:591
 msgid "Recordings"
 msgstr "Enregistrements"
 
-#: core/models.py:693
+#: core/models.py:699
 msgid "Recording/user relation"
 msgstr "Relation enregistrement/utilisateur"
 
-#: core/models.py:694
+#: core/models.py:700
 msgid "Recording/user relations"
 msgstr "Relations enregistrement/utilisateur"
 
-#: core/models.py:700
+#: core/models.py:706
 msgid "This user is already in this recording."
 msgstr "Cet utilisateur est déjà dans cet enregistrement."
 
-#: core/models.py:706
+#: core/models.py:712
 msgid "This team is already in this recording."
 msgstr "Cette équipe est déjà dans cet enregistrement."
 
-#: core/models.py:712
+#: core/models.py:718
 msgid "Either user or team must be set, not both."
 msgstr "Soit l'utilisateur, soit l'équipe doit être défini, pas les deux."
 
-#: core/models.py:729
+#: core/models.py:735
 msgid "Create rooms"
 msgstr "Créer des salles"
 
-#: core/models.py:730
+#: core/models.py:736
 msgid "List rooms"
 msgstr "Lister les salles"
 
-#: core/models.py:731
+#: core/models.py:737
 msgid "Retrieve room details"
 msgstr "Afficher les détails d’une salle"
 
-#: core/models.py:732
+#: core/models.py:738
 msgid "Update rooms"
 msgstr "Mettre à jour les salles"
 
-#: core/models.py:733
+#: core/models.py:739
 msgid "Delete rooms"
 msgstr "Supprimer les salles"
 
-#: core/models.py:746
+#: core/models.py:752
 msgid "Application name"
 msgstr "Nom de l’application"
 
-#: core/models.py:747
+#: core/models.py:753
 msgid "Descriptive name for this application."
 msgstr "Nom descriptif de cette application."
 
-#: core/models.py:757
+#: core/models.py:763
 msgid "Hashed on Save. Copy it now if this is a new secret."
 msgstr ""
 "Haché lors de l’enregistrement. Copiez-le maintenant s’il s’agit d’un "
 "nouveau secret."
 
-#: core/models.py:768
+#: core/models.py:774
 msgid "Application"
 msgstr "Application"
 
-#: core/models.py:769
+#: core/models.py:775
 msgid "Applications"
 msgstr "Applications"
 
-#: core/models.py:792
+#: core/models.py:798
 msgid "Enter a valid domain"
 msgstr "Saisissez un domaine valide"
 
-#: core/models.py:795
+#: core/models.py:801
 msgid "Domain"
 msgstr "Domaine"
 
-#: core/models.py:796
+#: core/models.py:802
 msgid "Email domain this application can act on behalf of."
 msgstr "Domaine de messagerie au nom duquel cette application peut agir."
 
-#: core/models.py:808
+#: core/models.py:814
 msgid "Application domain"
 msgstr "Domaine d’application"
 
-#: core/models.py:809
+#: core/models.py:815
 msgid "Application domains"
 msgstr "Domaines d’application"
 

src/backend/locale/nl_NL/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-12-17 15:12+0000\n"
+"POT-Creation-Date: 2025-12-29 15:15+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -311,92 +311,96 @@ msgstr "Opnamemodus"
 msgid "Defines the mode of recording being called."
 msgstr "Definieert de modus van opname die wordt aangeroepen."
 
-#: core/models.py:584
+#: core/models.py:583 core/models.py:584
+msgid "Recording options"
+msgstr "Opnameopties"
+
+#: core/models.py:590
 msgid "Recording"
 msgstr "Opname"
 
-#: core/models.py:585
+#: core/models.py:591
 msgid "Recordings"
 msgstr "Opnames"
 
-#: core/models.py:693
+#: core/models.py:699
 msgid "Recording/user relation"
 msgstr "Opname/gebruiker-relatie"
 
-#: core/models.py:694
+#: core/models.py:700
 msgid "Recording/user relations"
 msgstr "Opname/gebruiker-relaties"
 
-#: core/models.py:700
+#: core/models.py:706
 msgid "This user is already in this recording."
 msgstr "Deze gebruiker is al in deze opname."
 
-#: core/models.py:706
+#: core/models.py:712
 msgid "This team is already in this recording."
 msgstr "Dit team is al in deze opname."
 
-#: core/models.py:712
+#: core/models.py:718
 msgid "Either user or team must be set, not both."
 msgstr "Ofwel gebruiker of team moet worden ingesteld, niet beide."
 
-#: core/models.py:729
+#: core/models.py:735
 msgid "Create rooms"
 msgstr "Ruimtes aanmaken"
 
-#: core/models.py:730
+#: core/models.py:736
 msgid "List rooms"
 msgstr "Ruimtes weergeven"
 
-#: core/models.py:731
+#: core/models.py:737
 msgid "Retrieve room details"
 msgstr "Details van een ruimte ophalen"
 
-#: core/models.py:732
+#: core/models.py:738
 msgid "Update rooms"
 msgstr "Ruimtes bijwerken"
 
-#: core/models.py:733
+#: core/models.py:739
 msgid "Delete rooms"
 msgstr "Ruimtes verwijderen"
 
-#: core/models.py:746
+#: core/models.py:752
 msgid "Application name"
 msgstr "Naam van de applicatie"
 
-#: core/models.py:747
+#: core/models.py:753
 msgid "Descriptive name for this application."
 msgstr "Beschrijvende naam voor deze applicatie."
 
-#: core/models.py:757
+#: core/models.py:763
 msgid "Hashed on Save. Copy it now if this is a new secret."
 msgstr ""
 "Wordt gehasht bij het opslaan. Kopieer het nu als dit een nieuw geheim is."
 
-#: core/models.py:768
+#: core/models.py:774
 msgid "Application"
 msgstr "Applicatie"
 
-#: core/models.py:769
+#: core/models.py:775
 msgid "Applications"
 msgstr "Applicaties"
 
-#: core/models.py:792
+#: core/models.py:798
 msgid "Enter a valid domain"
 msgstr "Voer een geldig domein in"
 
-#: core/models.py:795
+#: core/models.py:801
 msgid "Domain"
 msgstr "Domein"
 
-#: core/models.py:796
+#: core/models.py:802
 msgid "Email domain this application can act on behalf of."
 msgstr "E-maildomein namens welke deze applicatie kan handelen."
 
-#: core/models.py:808
+#: core/models.py:814
 msgid "Application domain"
 msgstr "Applicatiedomein"
 
-#: core/models.py:809
+#: core/models.py:815
 msgid "Application domains"
 msgstr "Applicatiedomeinen"
 

src/backend/meet/settings.py

@@ -342,12 +342,12 @@ class Base(Configuration):
         "use_proconnect_button": values.BooleanValue(
             False, environ_name="FRONTEND_USE_PROCONNECT_BUTTON", environ_prefix=None
         ),
-        "transcript": values.DictValue(
-            {}, environ_name="FRONTEND_TRANSCRIPT", environ_prefix=None
-        ),
         "manifest_link": values.Value(
             None, environ_name="FRONTEND_MANIFEST_LINK", environ_prefix=None
         ),
+        "transcription_destination": values.Value(
+            None, environ_name="FRONTEND_TRANSCRIPTION_DESTINATION", environ_prefix=None
+        ),
     }
 
     # Mail
@@ -634,6 +634,9 @@ class Base(Configuration):
     SCREEN_RECORDING_BASE_URL = values.Value(
         None, environ_name="SCREEN_RECORDING_BASE_URL", environ_prefix=None
     )
+    RECORDING_DOWNLOAD_BASE_URL = values.Value(
+        None, environ_name="RECORDING_DOWNLOAD_BASE_URL", environ_prefix=None
+    )
 
     # Marketing and communication settings
     SIGNUP_NEW_USER_TO_MARKETING_EMAIL = values.BooleanValue(

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "meet"
-version = "1.0.1"
+version = "1.3.0"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",
@@ -56,7 +56,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/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,13 +1,15 @@
 {
   "name": "meet",
-  "version": "1.0.1",
+  "version": "1.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "meet",
-      "version": "1.0.1",
+      "version": "1.3.0",
       "dependencies": {
+        "@fontsource-variable/material-symbols-outlined": "5.2.30",
+        "@fontsource/material-icons-outlined": "5.2.6",
         "@livekit/components-react": "2.9.13",
         "@livekit/components-styles": "1.1.6",
         "@livekit/track-processors": "0.6.1",
@@ -104,7 +106,6 @@
       "integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.27.1",
@@ -1019,6 +1020,24 @@
       "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
       "license": "MIT"
     },
+    "node_modules/@fontsource-variable/material-symbols-outlined": {
+      "version": "5.2.30",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/material-symbols-outlined/-/material-symbols-outlined-5.2.30.tgz",
+      "integrity": "sha512-BjSx7nqvISJs2Pjd8sBH583AnD4k6dD4Em7AVISoLXzbX3PIFWAE2GPm13LlCys8u8idkyUd62L8yn6ts6DdbA==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/material-icons-outlined": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/@fontsource/material-icons-outlined/-/material-icons-outlined-5.2.6.tgz",
+      "integrity": "sha512-99XKAkwnCg0s0/ywax+o3m01HSNM5gGzSBw+WnlWG2+WY3wOjcN+wXMfm4zP37Yme7Yze2DvKxF78tHWOrlwFw==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@formatjs/ecma402-abstract": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.4.tgz",
@@ -3870,7 +3889,6 @@
       "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.81.5.tgz",
       "integrity": "sha512-lOf2KqRRiYWpQT86eeeftAGnjuTR35myTP8MXyvHa81VlomoAWNEd8x5vkcAfQefu0qtYCvyqLropFZqgI2EQw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@tanstack/query-core": "5.81.5"
       },
@@ -3962,7 +3980,8 @@
       "version": "1.0.22",
       "resolved": "https://registry.npmjs.org/@types/dom-mediacapture-record/-/dom-mediacapture-record-1.0.22.tgz",
       "integrity": "sha512-mUMZLK3NvwRLcAAT9qmcK+9p7tpU2FHdDsntR3YI4+GY88XrgG4XiE7u1Q2LAN2/FZOz/tdMDC3GQCR4T8nFuw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/dom-mediacapture-transform": {
       "version": "0.1.11",
@@ -3978,7 +3997,8 @@
       "version": "0.1.15",
       "resolved": "https://registry.npmjs.org/@types/dom-webcodecs/-/dom-webcodecs-0.1.15.tgz",
       "integrity": "sha512-omOlCPvTWyPm4ZE5bZUhlSvnHM2ZWM2U+1cPiYFL/e8aV5O9MouELp+L4dMKNTON0nTeHqEg+KWDfFQMY5Wkaw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/estree": {
       "version": "1.0.8",
@@ -4005,7 +4025,6 @@
       "integrity": "sha512-B2egV9wALML1JCpv3VQoQ+yesQKAmNMBIAY7OteVrikcOcAkWm+dGL6qpeCktPjAv6N1JLnhbNiqS35UpFyBsQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -4023,7 +4042,6 @@
       "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -4090,7 +4108,6 @@
       "integrity": "sha512-3MyiDfrfLeK06bi/g9DqJxP5pV74LNv4rFTyvGDmT3x2p1yp1lOd+qYZfiRPIOf/oON+WRZR5wxxuF85qOar+w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.35.1",
         "@typescript-eslint/types": "8.35.1",
@@ -4382,7 +4399,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
       "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
       "dev": true,
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4797,7 +4813,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001646",
         "electron-to-chromium": "^1.5.4",
@@ -5607,7 +5622,6 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
       "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -6575,7 +6589,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.27.6"
       },
@@ -7460,7 +7473,6 @@
       "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.15.7.tgz",
       "integrity": "sha512-19m8Q1cvRl5PslRawDUgWXeP8vL8584tX8kiZEJaPZo83U/L6VPS/O7pP06phfJaBWeeV8sAOVtEPlQiZEHtpg==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@livekit/mutex": "1.1.1",
         "@livekit/protocol": "1.39.3",
@@ -8120,7 +8132,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -8234,7 +8245,6 @@
       "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -8388,7 +8398,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -8495,7 +8504,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -8745,6 +8753,7 @@
       "integrity": "sha512-GBg5pV8LHOTbeVmH2VHLEFR0mc2QpQMzAvcoxEGfPNWgWHc8UvKCyq7pqN1vA+fDZ+yXXbixeO0kB2pzVvFCBw==",
       "license": "MIT",
       "optional": true,
+      "peer": true,
       "dependencies": {
         "postcss": "^8.4.38"
       }
@@ -9248,7 +9257,6 @@
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -9367,8 +9375,7 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD",
-      "peer": true
+      "license": "0BSD"
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -9480,7 +9487,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9641,7 +9647,6 @@
       "resolved": "https://registry.npmjs.org/valtio/-/valtio-2.1.5.tgz",
       "integrity": "sha512-vsh1Ixu5mT0pJFZm+Jspvhga5GzHUTYv0/+Th203pLfh3/wbHwxhu/Z2OkZDXIgHfjnjBns7SN9HNcbDvPmaGw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "proxy-compare": "^3.0.1"
       },
@@ -9742,7 +9747,6 @@
       "integrity": "sha512-cJBdq0/u+8rgstg9t7UkBilf8ipLmeXJO30NxD5HAHOivnj10ocV8YtR/XBvd2wQpN3TmcaxNKaHX3tN7o5F5A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.6",
@@ -9877,7 +9881,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "1.0.1",
+  "version": "1.3.0",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",
@@ -13,6 +13,8 @@
     "check": "prettier --check ./src"
   },
   "dependencies": {
+    "@fontsource-variable/material-symbols-outlined": "5.2.30",
+    "@fontsource/material-icons-outlined": "5.2.6",
     "@livekit/components-react": "2.9.13",
     "@livekit/components-styles": "1.1.6",
     "@livekit/track-processors": "0.6.1",

src/frontend/src/api/useConfig.ts

@@ -17,9 +17,6 @@ export interface ApiConfig {
   feedback: {
     url: string
   }
-  transcript: {
-    form_beta_users: string
-  }
   silence_livekit_debug_logs?: boolean
   is_silent_login_enabled?: boolean
   custom_css_url?: string
@@ -47,6 +44,7 @@ export interface ApiConfig {
     enable_firefox_proxy_workaround: boolean
     default_sources: string[]
   }
+  transcription_destination?: string
 }
 
 const fetchConfig = (): Promise<ApiConfig> => {

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

@@ -1,10 +1,9 @@
 import { styled } from '@/styled-system/jsx'
 import { css } from '@/styled-system/css'
-import { Button, LinkButton } from '@/primitives'
+import { Button } from '@/primitives'
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useConfig } from '@/api/useConfig'
 
 const Heading = styled('h2', {
   base: {
@@ -165,14 +164,7 @@ export const IntroSlider = () => {
   const [slideIndex, setSlideIndex] = useState(0)
   const { t } = useTranslation('home', { keyPrefix: 'introSlider' })
 
-  const { data } = useConfig()
-
-  const filteredSlides = useMemo(
-    () => (data?.transcript?.form_beta_users ? SLIDES : SLIDES.slice(0, 2)),
-    [data]
-  )
-
-  const NUMBER_SLIDES = filteredSlides.length
+  const NUMBER_SLIDES = SLIDES.length
 
   return (
     <Container>
@@ -198,24 +190,12 @@ export const IntroSlider = () => {
           </ButtonVerticalCenter>
         </ButtonContainer>
         <SlideContainer>
-          {filteredSlides.map((slide, index) => (
+          {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>
-                {slide.isAvailableInBeta && (
-                  <LinkButton
-                    href={data?.transcript.form_beta_users}
-                    target="_blank"
-                    tooltip={t('beta.tooltip')}
-                    variant={'primary'}
-                    size={'sm'}
-                    style={{ marginTop: '1rem', width: 'fit-content' }}
-                  >
-                    {t('beta.text')}
-                  </LinkButton>
-                )}
               </TextAnimation>
             </Slide>
           ))}
@@ -241,7 +221,7 @@ export const IntroSlider = () => {
           display: { base: 'none', xsm: 'block' },
         })}
       >
-        {filteredSlides.map((_, index) => (
+        {SLIDES.map((_, index) => (
           <Dot key={index} selected={index == slideIndex} />
         ))}
       </div>

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

@@ -111,15 +111,13 @@ export const TermsOfServiceRoute = () => {
         ))}
 
         {/* Article 7 */}
-        <H lvl={2} margin={false}>
-          {t('articles.article7.title')}
-        </H>
+        <H lvl={2}>{t('articles.article7.title')}</H>
+        <P>{t('articles.article7.content')}</P>
 
         {/* 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 +130,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/MainNotificationToast.tsx

@@ -104,6 +104,16 @@ export const MainNotificationToast = () => {
             { timeout: NotificationDuration.ALERT }
           )
           break
+        case NotificationType.TranscriptionRequested:
+        case NotificationType.ScreenRecordingRequested:
+          toastQueue.add(
+            {
+              participant,
+              type: notification.type,
+            },
+            { timeout: NotificationDuration.RECORDING_REQUESTED }
+          )
+          break
         case NotificationType.PermissionsRemoved: {
           const removedSources = notification?.data?.removedSources
           if (!removedSources?.length) break

src/frontend/src/features/notifications/NotificationDuration.ts

@@ -13,4 +13,5 @@ export const NotificationDuration = {
   LOWER_HAND: ToastDuration.EXTRA_LONG,
   RECORDING_SAVING: ToastDuration.EXTRA_LONG,
   REACTION_RECEIVED: ToastDuration.SHORT,
+  RECORDING_REQUESTED: ToastDuration.LONG,
 } as const

src/frontend/src/features/notifications/NotificationType.ts

@@ -9,8 +9,10 @@ export enum NotificationType {
   TranscriptionStarted = 'transcriptionStarted',
   TranscriptionStopped = 'transcriptionStopped',
   TranscriptionLimitReached = 'transcriptionLimitReached',
+  TranscriptionRequested = 'transcriptionRequested',
   ScreenRecordingStarted = 'screenRecordingStarted',
   ScreenRecordingStopped = 'screenRecordingStopped',
+  ScreenRecordingRequested = 'screenRecordingRequested',
   ScreenRecordingLimitReached = 'screenRecordingLimitReached',
   RecordingSaving = 'recordingSaving',
   PermissionsRemoved = 'permissionsRemoved',

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

@@ -0,0 +1,89 @@
+import { useToast } from '@react-aria/toast'
+import { useMemo, useRef } from 'react'
+
+import { StyledToastContainer, ToastProps } from './Toast'
+import { HStack } from '@/styled-system/jsx'
+import { useTranslation } from 'react-i18next'
+import { NotificationType } from '../NotificationType'
+import { Button } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
+
+export function ToastRecordingRequest({
+  state,
+  ...props
+}: Readonly<ToastProps>) {
+  const { t } = useTranslation('notifications')
+  const ref = useRef(null)
+  const { toastProps, contentProps } = useToast(props, state, ref)
+  const participant = props.toast.content.participant
+  const type = props.toast.content.type
+
+  const {
+    isTranscriptOpen,
+    openTranscript,
+    isScreenRecordingOpen,
+    openScreenRecording,
+  } = useSidePanel()
+
+  const options = useMemo(() => {
+    switch (type) {
+      case NotificationType.TranscriptionRequested:
+        return {
+          key: 'transcript.requested',
+          isMenuOpen: isTranscriptOpen,
+          openMenu: openTranscript,
+        }
+      case NotificationType.ScreenRecordingRequested:
+        return {
+          key: 'screenRecording.requested',
+          isMenuOpen: isScreenRecordingOpen,
+          openMenu: openScreenRecording,
+        }
+      default:
+        return
+    }
+  }, [
+    type,
+    isTranscriptOpen,
+    isScreenRecordingOpen,
+    openTranscript,
+    openScreenRecording,
+  ])
+
+  if (!options) return
+
+  return (
+    <StyledToastContainer {...toastProps} ref={ref}>
+      <HStack
+        justify="center"
+        alignItems="center"
+        {...contentProps}
+        padding={14}
+        gap={0}
+      >
+        {t(options.key, {
+          name: participant?.name,
+        })}
+        {!options.isMenuOpen && (
+          <div
+            className={css({
+              marginLeft: '0.5rem',
+            })}
+          >
+            <Button
+              size="sm"
+              variant="text"
+              className={css({
+                color: 'primary.300',
+              })}
+              onPress={options.openMenu}
+            >
+              {t('openMenu')}
+            </Button>
+          </div>
+        )}
+      </HStack>
+    </StyledToastContainer>
+  )
+}

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

@@ -12,6 +12,7 @@ import { ToastLowerHand } from './ToastLowerHand'
 import { ToastAnyRecording } from './ToastAnyRecording'
 import { ToastRecordingSaving } from './ToastRecordingSaving'
 import { ToastPermissionsRemoved } from './ToastPermissionsRemoved'
+import { ToastRecordingRequest } from './ToastRecordingRequest'
 
 interface ToastRegionProps extends AriaToastRegionProps {
   state: ToastState<ToastData>
@@ -52,6 +53,12 @@ const renderToast = (
     case NotificationType.ScreenRecordingLimitReached:
       return <ToastAnyRecording key={toast.key} toast={toast} state={state} />
 
+    case NotificationType.TranscriptionRequested:
+    case NotificationType.ScreenRecordingRequested:
+      return (
+        <ToastRecordingRequest key={toast.key} toast={toast} state={state} />
+      )
+
     case NotificationType.RecordingSaving:
       return (
         <ToastRecordingSaving key={toast.key} toast={toast} state={state} />

src/frontend/src/features/recording/api/startRecording.ts

@@ -7,16 +7,19 @@ import { RecordingMode } from '../types'
 export interface StartRecordingParams {
   id: string
   mode?: RecordingMode
+  options?: Record<string, string | boolean>
 }
 
 const startRecording = ({
   id,
   mode = RecordingMode.Transcript,
+  options,
 }: StartRecordingParams): Promise<ApiRoom> => {
   return fetchApi(`rooms/${id}/start-recording/`, {
     method: 'POST',
     body: JSON.stringify({
       mode: mode,
+      options: options,
     }),
   })
 }

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

@@ -0,0 +1,175 @@
+import { css } from '@/styled-system/css'
+import { HStack } from '@/styled-system/jsx'
+import { Spinner } from '@/primitives/Spinner'
+import { Button, Icon, Text } from '@/primitives'
+import { useTranslation } from 'react-i18next'
+import { RecordingStatuses } from '../hooks/useRecordingStatuses'
+import { ReactNode, useEffect, useRef, useState } from 'react'
+import { useRoomContext } from '@livekit/components-react'
+import { ConnectionState } from 'livekit-client'
+import { Button as RACButton } from 'react-aria-components'
+import { parseLineBreaks } from '@/utils/parseLineBreaks'
+
+const Layout = ({ children }: { children: ReactNode }) => (
+  <div
+    className={css({
+      marginBottom: '80px',
+      width: '100%',
+    })}
+  >
+    {children}
+  </div>
+)
+
+interface ControlsButtonProps {
+  i18nKeyPrefix: string
+  statuses: RecordingStatuses
+  handle: () => void
+  isPendingToStart: boolean
+  isPendingToStop: boolean
+  openSidePanel: () => void
+}
+
+const MIN_SPINNER_DISPLAY_TIME = 2000
+
+export const ControlsButton = ({
+  i18nKeyPrefix,
+  statuses,
+  handle,
+  isPendingToStart,
+  isPendingToStop,
+  openSidePanel,
+}: 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
+
+  const [showSaving, setShowSaving] = useState(false)
+  const timeoutRef = useRef<NodeJS.Timeout>()
+
+  const isSaving = statuses.isSaving || isPendingToStop
+  const isDisabled = !isRoomConnected || statuses.isAnotherModeStarted
+
+  useEffect(() => {
+    if (isSaving) {
+      clearTimeout(timeoutRef.current)
+      setShowSaving(true)
+    } else if (showSaving) {
+      timeoutRef.current = setTimeout(() => {
+        setShowSaving(false)
+      }, MIN_SPINNER_DISPLAY_TIME)
+    }
+
+    return () => clearTimeout(timeoutRef.current)
+  }, [isSaving, showSaving])
+
+  // Saving state
+  if (showSaving) {
+    return (
+      <Layout>
+        <HStack width="100%" height="46px" justify="center">
+          <Spinner size={30} />
+          <Text variant="body">{t('button.saving')}</Text>
+        </HStack>
+      </Layout>
+    )
+  }
+
+  // Starting state
+  if (statuses.isStarting || isPendingToStart) {
+    return (
+      <Layout>
+        <HStack width="100%" height="46px" justify="center">
+          <Spinner size={30} />
+          {t('button.starting')}
+        </HStack>
+      </Layout>
+    )
+  }
+
+  // Active state (Stop button)
+  if (statuses.isStarted) {
+    return (
+      <Layout>
+        <Button
+          variant="tertiary"
+          fullWidth
+          onPress={handle}
+          isDisabled={isDisabled}
+          ref={primaryActionRef}
+        >
+          {t('button.stop')}
+        </Button>
+      </Layout>
+    )
+  }
+
+  // Inactive state (Start button)
+  return (
+    <Layout>
+      {statuses.isAnotherModeStarted && (
+        <RACButton
+          className={css({
+            backgroundColor: 'primary.50',
+            border: '1px solid',
+            borderColor: 'primary.200',
+            borderRadius: '6px',
+            padding: '0.75rem',
+            marginBottom: '0.75rem',
+            display: 'flex',
+            justifyContent: 'left',
+            textAlign: 'left',
+            alignItems: 'center',
+            width: '100%',
+            cursor: 'pointer',
+            _hover: {
+              backgroundColor: 'primary.100',
+              borderColor: 'primary.400',
+            },
+          })}
+          onPress={() => openSidePanel()}
+        >
+          <Icon
+            className={css({
+              color: 'primary.500',
+              marginRight: '1rem',
+            })}
+            name="info"
+          />
+          <Text variant={'smNote'}>
+            {parseLineBreaks(t('button.anotherModeStarted'))}
+          </Text>
+          <Icon
+            className={css({
+              color: 'primary.500',
+              marginLeft: 'auto',
+            })}
+            name="chevron_right"
+          />
+        </RACButton>
+      )}
+      <Button
+        variant={isDisabled ? 'primary' : 'tertiary'}
+        fullWidth
+        onPress={handle}
+        isDisabled={isDisabled}
+        size="compact"
+        ref={primaryActionRef}
+      >
+        {t('button.start')}
+      </Button>
+    </Layout>
+  )
+}

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

@@ -0,0 +1,29 @@
+import { Button, Dialog, P } from '@/primitives'
+import { useTranslation } from 'react-i18next'
+import { useSnapshot } from 'valtio'
+import { recordingStore } from '@/stores/recording'
+
+export const ErrorAlertDialog = () => {
+  const recordingSnap = useSnapshot(recordingStore)
+  const { t } = useTranslation('rooms', {
+    keyPrefix: 'errorRecordingAlertDialog',
+  })
+
+  return (
+    <Dialog
+      isOpen={!!recordingSnap.isErrorDialogOpen}
+      role="alertdialog"
+      title={t('title')}
+      aria-label={t('title')}
+    >
+      <P>{t(`body.${recordingSnap.isErrorDialogOpen}`)}</P>
+      <Button
+        variant="text"
+        size="sm"
+        onPress={() => (recordingStore.isErrorDialogOpen = '')}
+      >
+        {t('button')}
+      </Button>
+    </Dialog>
+  )
+}

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

@@ -1,35 +1,61 @@
 import { useTranslation } from 'react-i18next'
 import { Button, Dialog, P } from '@/primitives'
 import { HStack } from '@/styled-system/jsx'
-import { useConfig } from '@/api/useConfig'
-import humanizeDuration from 'humanize-duration'
+import { useHumanizeRecordingMaxDuration } from '@/features/recording'
+import { useEffect, useState } from 'react'
+import { NotificationType } from '@/features/notifications'
+import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
+import { RoomEvent } from 'livekit-client'
+import { decodeNotificationDataReceived } from '@/features/notifications/utils'
+import { useRoomContext } from '@livekit/components-react'
 
-export const LimitReachedAlertDialog = ({
-  isOpen,
-  onClose,
-}: {
-  isOpen: boolean
-  onClose: () => void
-}) => {
-  const { t, i18n } = useTranslation('rooms', {
+export const LimitReachedAlertDialog = () => {
+  const [isAlertOpen, setIsAlertOpen] = useState(false)
+
+  const { t } = useTranslation('rooms', {
     keyPrefix: 'recordingStateToast.limitReachedAlert',
   })
-  const { data } = useConfig()
+
+  const room = useRoomContext()
+  const isAdminOrOwner = useIsAdminOrOwner()
+  const maxDuration = useHumanizeRecordingMaxDuration()
+
+  useEffect(() => {
+    const handleDataReceived = (payload: Uint8Array) => {
+      if (!isAdminOrOwner) return
+
+      const notification = decodeNotificationDataReceived(payload)
+
+      if (
+        notification?.type === NotificationType.TranscriptionLimitReached ||
+        notification?.type === NotificationType.ScreenRecordingLimitReached
+      ) {
+        setIsAlertOpen(true)
+      }
+    }
+
+    room.on(RoomEvent.DataReceived, handleDataReceived)
+
+    return () => {
+      room.off(RoomEvent.DataReceived, handleDataReceived)
+    }
+  }, [room, isAdminOrOwner])
+
+  if (!isAdminOrOwner) return null
+
   return (
-    <Dialog isOpen={isOpen} role="alertdialog" title={t('title')}>
+    <Dialog isOpen={isAlertOpen} role="alertdialog" title={t('title')}>
       <P>
         {t('description', {
-          duration_message: data?.recording?.max_duration
+          duration_message: maxDuration
             ? t('durationMessage', {
-                duration: humanizeDuration(data?.recording?.max_duration, {
-                  language: i18n.language,
-                }),
+                duration: maxDuration,
               })
             : '',
         })}
       </P>
       <HStack gap={1}>
-        <Button variant="text" size="sm" onPress={onClose}>
+        <Button variant="text" size="sm" onPress={() => setIsAlertOpen(false)}>
           {t('button')}
         </Button>
       </HStack>

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

@@ -0,0 +1,44 @@
+import { H, Text, Icon } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { LoginButton } from '@/components/LoginButton'
+import { HStack } from '@/styled-system/jsx'
+
+interface LoginPromptProps {
+  heading: string
+  body: string
+}
+
+export const LoginPrompt = ({ heading, body }: LoginPromptProps) => {
+  return (
+    <div
+      className={css({
+        backgroundColor: 'primary.50',
+        borderRadius: '5px',
+        border: '1px solid',
+        borderColor: 'primary.200',
+        paddingY: '1rem',
+        paddingX: '1rem',
+        marginTop: '1rem',
+        display: 'flex',
+        flexDirection: 'column',
+      })}
+    >
+      <HStack justify="start" alignItems="center" marginBottom="0.5rem">
+        <Icon type="symbols" name="login" />
+        <H lvl={3} margin={false} padding={false}>
+          {heading}
+        </H>
+      </HStack>
+      <Text variant="smNote" wrap="pretty">
+        {body}
+      </Text>
+      <div
+        className={css({
+          marginTop: '1rem',
+        })}
+      >
+        <LoginButton proConnectHint={false} />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,109 @@
+import { A, Div, H, Text } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { useTranslation } from 'react-i18next'
+import { LoginPrompt } from './LoginPrompt'
+import { RequestRecording } from './RequestRecording'
+import { useUser } from '@/features/auth'
+import { HStack, VStack } from '@/styled-system/jsx'
+
+const Divider = ({ label }: { label: string }) => (
+  <HStack gap="1rem" alignItems="center" width="100%" marginY="1rem">
+    <div className={css({ flex: 1, height: '1px', bg: 'neutral.200' })} />
+    <Text variant="xsNote">{label}</Text>
+    <div className={css({ flex: 1, height: '1px', bg: 'neutral.200' })} />
+  </HStack>
+)
+
+interface NoAccessViewProps {
+  i18nKeyPrefix: string
+  i18nKey: string
+  helpArticle?: string
+  imagePath: string
+  handleRequest: () => Promise<void>
+  isActive: boolean
+}
+
+export const NoAccessView = ({
+  i18nKeyPrefix,
+  i18nKey,
+  helpArticle,
+  imagePath,
+  handleRequest,
+  isActive,
+}: NoAccessViewProps) => {
+  const { isLoggedIn } = useUser()
+  const { t } = useTranslation('rooms', { keyPrefix: i18nKeyPrefix })
+
+  return (
+    <Div
+      display="flex"
+      overflowY="scroll"
+      padding="0 1.5rem"
+      flexGrow={1}
+      flexDirection="column"
+      alignItems="center"
+    >
+      <img
+        src={imagePath}
+        alt=""
+        className={css({
+          minHeight: '250px',
+          height: '250px',
+          marginBottom: '1rem',
+          marginTop: '-16px',
+          '@media (max-height: 900px)': {
+            height: 'auto',
+            minHeight: 'auto',
+            maxHeight: '25%',
+            marginBottom: '0.75rem',
+          },
+          '@media (max-height: 770px)': {
+            display: 'none',
+          },
+        })}
+      />
+      <VStack gap={0} marginBottom={0}>
+        <H lvl={1} margin={'sm'} fullWidth centered>
+          {t(`${i18nKey}.heading`)}
+        </H>
+        <Text
+          variant="note"
+          centered
+          className={css({
+            textStyle: 'sm',
+            marginBottom: '2.5rem',
+            marginTop: '0.25rem',
+            '@media (max-height: 700px)': {
+              marginBottom: '1rem',
+            },
+          })}
+        >
+          {t(`${i18nKey}.body`)}
+          <br />
+          {helpArticle && (
+            <A href={helpArticle} target="_blank">
+              {t(`${i18nKey}.linkMore`)}
+            </A>
+          )}
+        </Text>
+      </VStack>
+      {!isLoggedIn && (
+        <LoginPrompt
+          heading={t(`${i18nKey}.login.heading`)}
+          body={t(`${i18nKey}.login.body`)}
+        />
+      )}
+      {!isLoggedIn && !isActive && (
+        <Divider label={t(`${i18nKey}.dividerLabel`)} />
+      )}
+      {!isActive && (
+        <RequestRecording
+          heading={t(`${i18nKey}.request.heading`)}
+          body={t(`${i18nKey}.request.body`)}
+          buttonLabel={t(`${i18nKey}.request.buttonLabel`)}
+          handleRequest={handleRequest}
+        />
+      )}
+    </Div>
+  )
+}

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

@@ -0,0 +1,13 @@
+import { LimitReachedAlertDialog } from './LimitReachedAlertDialog'
+import { RecordingStateToast } from './RecordingStateToast'
+import { ErrorAlertDialog } from './ErrorAlertDialog'
+
+export const RecordingProvider = () => {
+  return (
+    <>
+      <RecordingStateToast />
+      <LimitReachedAlertDialog />
+      <ErrorAlertDialog />
+    </>
+  )
+}

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

@@ -1,210 +1,167 @@
 import { css } from '@/styled-system/css'
 import { useTranslation } from 'react-i18next'
-import { useSnapshot } from 'valtio'
-import { useRoomContext } from '@livekit/components-react'
-import { Spinner } from '@/primitives/Spinner'
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo, useRef, useState, useEffect } from 'react'
 import { Text } from '@/primitives'
-import { RoomEvent } from 'livekit-client'
-import { decodeNotificationDataReceived } from '@/features/notifications/utils'
-import { NotificationType } from '@/features/notifications/NotificationType'
-import { RecordingStatus, recordingStore } from '@/stores/recording'
-import { RiRecordCircleLine } from '@remixicon/react'
 import {
   RecordingMode,
   useHasRecordingAccess,
-  useIsRecordingActive,
+  useRecordingStatuses,
 } from '@/features/recording'
 import { FeatureFlags } from '@/features/analytics/enums'
 import { Button as RACButton } from 'react-aria-components'
 import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
-import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
-import { LimitReachedAlertDialog } from './LimitReachedAlertDialog'
+import { useRoomMetadata } from '../hooks/useRoomMetadata'
+import { RecordingStatusIcon } from './RecordingStatusIcon'
+import { useIsRecording } from '@livekit/components-react'
 
 export const RecordingStateToast = () => {
   const { t } = useTranslation('rooms', {
     keyPrefix: 'recordingStateToast',
   })
-  const room = useRoomContext()
-  const isAdminOrOwner = useIsAdminOrOwner()
 
   const { openTranscript, openScreenRecording } = useSidePanel()
-  const [isAlertOpen, setIsAlertOpen] = useState(false)
 
-  const recordingSnap = useSnapshot(recordingStore)
+  const [srMessage, setSrMessage] = useState('')
+  const lastKeyRef = useRef('')
 
   const hasTranscriptAccess = useHasRecordingAccess(
     RecordingMode.Transcript,
     FeatureFlags.Transcript
   )
 
-  const isTranscriptActive = useIsRecordingActive(RecordingMode.Transcript)
-
   const hasScreenRecordingAccess = useHasRecordingAccess(
     RecordingMode.ScreenRecording,
     FeatureFlags.ScreenRecording
   )
 
-  const isScreenRecordingActive = useIsRecordingActive(
-    RecordingMode.ScreenRecording
-  )
+  const {
+    isStarted: isScreenRecordingStarted,
+    isStarting: isScreenRecordingStarting,
+    isActive: isScreenRecordingActive,
+  } = useRecordingStatuses(RecordingMode.ScreenRecording)
 
-  useEffect(() => {
-    if (room.isRecording && recordingSnap.status == RecordingStatus.STOPPED) {
-      recordingStore.status = RecordingStatus.ANY_STARTED
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [room.isRecording])
+  const {
+    isStarted: isTranscriptStarted,
+    isStarting: isTranscriptStarting,
+    isActive: isTranscriptActive,
+  } = useRecordingStatuses(RecordingMode.Transcript)
 
-  useEffect(() => {
-    const handleDataReceived = (payload: Uint8Array) => {
-      const notification = decodeNotificationDataReceived(payload)
+  const isStarted = isScreenRecordingStarted || isTranscriptStarted
+  const isStarting = isTranscriptStarting || isScreenRecordingStarting
 
-      if (!notification) return
-
-      switch (notification.type) {
-        case NotificationType.TranscriptionStarted:
-          recordingStore.status = RecordingStatus.TRANSCRIPT_STARTING
-          break
-        case NotificationType.TranscriptionStopped:
-          recordingStore.status = RecordingStatus.TRANSCRIPT_STOPPING
-          break
-        case NotificationType.TranscriptionLimitReached:
-          if (isAdminOrOwner) setIsAlertOpen(true)
-          recordingStore.status = RecordingStatus.TRANSCRIPT_STOPPING
-          break
-        case NotificationType.ScreenRecordingStarted:
-          recordingStore.status = RecordingStatus.SCREEN_RECORDING_STARTING
-          break
-        case NotificationType.ScreenRecordingStopped:
-          recordingStore.status = RecordingStatus.SCREEN_RECORDING_STOPPING
-          break
-        case NotificationType.ScreenRecordingLimitReached:
-          if (isAdminOrOwner) setIsAlertOpen(true)
-          recordingStore.status = RecordingStatus.SCREEN_RECORDING_STOPPING
-          break
-        default:
-          return
-      }
-    }
-
-    const handleRecordingStatusChanged = (status: boolean) => {
-      if (!status) {
-        recordingStore.status = RecordingStatus.STOPPED
-      } else if (recordingSnap.status == RecordingStatus.TRANSCRIPT_STARTING) {
-        recordingStore.status = RecordingStatus.TRANSCRIPT_STARTED
-      } else if (
-        recordingSnap.status == RecordingStatus.SCREEN_RECORDING_STARTING
-      ) {
-        recordingStore.status = RecordingStatus.SCREEN_RECORDING_STARTED
-      } else {
-        recordingStore.status = RecordingStatus.ANY_STARTED
-      }
-    }
-
-    room.on(RoomEvent.DataReceived, handleDataReceived)
-    room.on(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanged)
-
-    return () => {
-      room.off(RoomEvent.DataReceived, handleDataReceived)
-      room.off(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanged)
-    }
-  }, [room, recordingSnap, setIsAlertOpen, isAdminOrOwner])
+  const metadata = useRoomMetadata()
+  const isRecording = useIsRecording()
 
   const key = useMemo(() => {
-    switch (recordingSnap.status) {
-      case RecordingStatus.TRANSCRIPT_STARTED:
-        return 'transcript.started'
-      case RecordingStatus.TRANSCRIPT_STARTING:
-        return 'transcript.starting'
-      case RecordingStatus.SCREEN_RECORDING_STARTED:
-        return 'screenRecording.started'
-      case RecordingStatus.SCREEN_RECORDING_STARTING:
-        return 'screenRecording.starting'
-      case RecordingStatus.ANY_STARTED:
-        return 'any.started'
-      default:
-        return
+    if (!metadata?.recording_status || !metadata?.recording_mode) {
+      return undefined
     }
-  }, [recordingSnap])
 
-  if (!key)
-    return isAdminOrOwner ? (
-      <LimitReachedAlertDialog
-        isOpen={isAlertOpen}
-        onClose={() => setIsAlertOpen(false)}
-        aria-label="Recording limit exceeded"
-      />
-    ) : null
+    if (!isStarting && !isStarted) {
+      return undefined
+    }
 
-  const isStarted = key?.includes('started')
+    let status = metadata.recording_status
+
+    if (isStarted && !isRecording) {
+      status = 'starting'
+    }
+
+    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)
+      setSrMessage(message)
+
+      // Clear message after 3 seconds to prevent it from being announced again
+      const timer = setTimeout(() => {
+        setSrMessage('')
+      }, 3000)
+
+      return () => clearTimeout(timer)
+    }
+  }, [key, t])
+
+  if (!key) return null
 
   const hasScreenRecordingAccessAndActive =
     isScreenRecordingActive && hasScreenRecordingAccess
   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',
-      })}
-    >
-      {isStarted ? (
-        <RiRecordCircleLine
-          size={20}
-          className={css({
-            animation: 'pulse_background 1s infinite',
-          })}
+    <>
+      {/* Screen reader only message to announce state changes once */}
+      <div
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        {srMessage}
+      </div>
+      {/* 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}
         />
-      ) : (
-        <Spinner size={20} variant="dark" />
-      )}
 
-      {!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

@@ -0,0 +1,22 @@
+import { Spinner } from '@/primitives/Spinner'
+import { Icon } from '@/primitives'
+
+interface RecordingStatusIconProps {
+  isStarted: boolean
+  isTranscriptActive: boolean
+}
+
+export const RecordingStatusIcon = ({
+  isStarted,
+  isTranscriptActive,
+}: RecordingStatusIconProps) => {
+  if (!isStarted) {
+    return <Spinner size={20} variant="dark" />
+  }
+
+  if (isTranscriptActive) {
+    return <Icon type="symbols" name="speech_to_text" />
+  }
+
+  return <Icon type="symbols" name="screen_record" />
+}

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

@@ -0,0 +1,87 @@
+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'
+import { Spinner } from '@/primitives/Spinner.tsx'
+import { NotificationDuration } from '@/features/notifications/NotificationDuration'
+
+interface RequestRecordingProps {
+  heading: string
+  body: string
+  buttonLabel: string
+  handleRequest: () => Promise<void>
+}
+
+export const RequestRecording = ({
+  heading,
+  body,
+  buttonLabel,
+  handleRequest,
+}: RequestRecordingProps) => {
+  const [isDisabled, setIsDisabled] = useState(false)
+  const timeoutRef = useRef<NodeJS.Timeout>()
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [])
+
+  const onPress = async () => {
+    setIsDisabled(true)
+
+    try {
+      await handleRequest()
+    } catch {
+      setIsDisabled(false)
+      return
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      setIsDisabled(false)
+    }, NotificationDuration.RECORDING_REQUESTED)
+  }
+
+  return (
+    <div
+      className={css({
+        backgroundColor: 'neutral.50',
+        borderRadius: '5px',
+        border: '1px solid',
+        borderColor: 'neutral.200',
+        paddingY: '1rem',
+        paddingX: '1rem',
+        display: 'flex',
+        flexDirection: 'column',
+        marginBottom: '1.5rem',
+      })}
+    >
+      <HStack justify="start" alignItems="center" marginBottom="0.5rem">
+        <Icon type="symbols" name="person_raised_hand" />
+        <H lvl={3} margin={false} padding={false}>
+          {heading}
+        </H>
+      </HStack>
+      <Text variant="smNote" wrap="pretty">
+        {body}
+      </Text>
+      <div
+        className={css({
+          marginTop: '1rem',
+        })}
+      >
+        <Button
+          variant="tertiary"
+          fullWidth
+          onPress={onPress}
+          isDisabled={isDisabled}
+        >
+          {isDisabled && <Spinner size={24} />}
+          {buttonLabel}
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,64 @@
+import { css } from '@/styled-system/css'
+import { ReactNode } from 'react'
+import { Icon } from '@/primitives'
+
+type RowPosition = 'first' | 'middle' | 'last' | 'single'
+
+const BORDER_RADIUS_MAP: Record<RowPosition, string> = {
+  first: '4px 4px 0 0',
+  middle: '0',
+  last: '0 0 4px 4px',
+  single: '4px',
+} as const
+
+interface RowWrapperProps {
+  iconName: string
+  children: ReactNode
+  position?: RowPosition
+}
+
+export const RowWrapper = ({
+  iconName,
+  children,
+  position = 'middle',
+}: RowWrapperProps) => {
+  return (
+    <div
+      style={{
+        borderRadius: BORDER_RADIUS_MAP[position],
+      }}
+      className={css({
+        width: '100%',
+        background: 'gray.100',
+        paddingBlock: '0.5rem',
+        paddingInline: '0',
+        display: 'flex',
+        marginTop: '0.25rem',
+      })}
+    >
+      <div
+        className={css({
+          flex: 1,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingInline: '0.25rem',
+        })}
+      >
+        {/*  fixme - doesn't handle properly material-symbols  */}
+        <Icon name={iconName} />
+      </div>
+      <div
+        className={css({
+          flex: 6,
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.25rem',
+          paddingInlineEnd: '8px',
+        })}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}

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

@@ -1,18 +1,15 @@
-import { A, Button, Dialog, Div, H, P, Text } from '@/primitives'
+import { A, Div, H, Text } from '@/primitives'
 
 import { css } from '@/styled-system/css'
 import { useRoomId } from '@/features/rooms/livekit/hooks/useRoomId'
 import { useRoomContext } from '@livekit/components-react'
 import {
   RecordingMode,
-  useIsRecordingTransitioning,
-  useStartRecording,
-  useStopRecording,
+  useHumanizeRecordingMaxDuration,
+  useRecordingStatuses,
 } from '@/features/recording'
-import { useEffect, useMemo, useState } from 'react'
-import { ConnectionState, RoomEvent } from 'livekit-client'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { RecordingStatus, recordingStore } from '@/stores/recording'
 
 import {
   NotificationType,
@@ -20,59 +17,48 @@ import {
   useNotifyParticipants,
 } from '@/features/notifications'
 import posthog from 'posthog-js'
-import { useSnapshot } from 'valtio/index'
-import { Spinner } from '@/primitives/Spinner'
 import { useConfig } from '@/api/useConfig'
-import humanizeDuration from 'humanize-duration'
-import i18n from 'i18next'
+import { NoAccessView } from './NoAccessView'
+import { ControlsButton } from './ControlsButton'
+import { RowWrapper } from './RowWrapper'
+import { VStack } from '@/styled-system/jsx'
+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()
-  const [isLoading, setIsLoading] = useState(false)
-  const recordingSnap = useSnapshot(recordingStore)
-  const { t } = useTranslation('rooms', { keyPrefix: 'screenRecording' })
+  const recordingMaxDuration = useHumanizeRecordingMaxDuration()
 
-  const [isErrorDialogOpen, setIsErrorDialogOpen] = useState('')
+  const keyPrefix = 'screenRecording'
+  const { t } = useTranslation('rooms', { keyPrefix })
+
+  const [includeTranscript, setIncludeTranscript] = useState(false)
+
+  const isAdminOrOwner = useIsAdminOrOwner()
 
   const { notifyParticipants } = useNotifyParticipants()
+  const { selectedLanguageKey, isLanguageSetToAuto } =
+    useTranscriptionLanguage()
 
   const roomId = useRoomId()
 
-  const { mutateAsync: startRecordingRoom, isPending: isPendingToStart } =
-    useStartRecording({
-      onError: () => setIsErrorDialogOpen('start'),
-    })
-  const { mutateAsync: stopRecordingRoom, isPending: isPendingToStop } =
-    useStopRecording({
-      onError: () => setIsErrorDialogOpen('stop'),
-    })
+  const { startRecording, isPendingToStart, stopRecording, isPendingToStop } =
+    useMutateRecording()
 
-  const statuses = useMemo(() => {
-    return {
-      isAnotherModeStarted:
-        recordingSnap.status == RecordingStatus.TRANSCRIPT_STARTED,
-      isStarting:
-        recordingSnap.status == RecordingStatus.SCREEN_RECORDING_STARTING,
-      isStarted:
-        recordingSnap.status == RecordingStatus.SCREEN_RECORDING_STARTED,
-      isStopping:
-        recordingSnap.status == RecordingStatus.SCREEN_RECORDING_STOPPING,
-    }
-  }, [recordingSnap])
+  const statuses = useRecordingStatuses(RecordingMode.ScreenRecording)
 
   const room = useRoomContext()
-  const isRoomConnected = room.state == ConnectionState.Connected
-  const isRecordingTransitioning = useIsRecordingTransitioning()
+  const { openTranscript } = useSidePanel()
 
-  useEffect(() => {
-    const handleRecordingStatusChanged = () => {
-      setIsLoading(false)
-    }
-    room.on(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanged)
-    return () => {
-      room.off(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanged)
-    }
-  }, [room])
+  const handleRequestScreenRecording = async () => {
+    await notifyParticipants({
+      type: NotificationType.ScreenRecordingRequested,
+    })
+    posthog.capture('screen-recording-requested', {})
+  }
 
   const handleScreenRecording = async () => {
     if (!roomId) {
@@ -80,10 +66,10 @@ export const ScreenRecordingSidePanel = () => {
       return
     }
     try {
-      setIsLoading(true)
-      if (room.isRecording) {
-        await stopRecordingRoom({ id: roomId })
-        recordingStore.status = RecordingStatus.SCREEN_RECORDING_STOPPING
+      if (statuses.isStarted || statuses.isStarting) {
+        setIncludeTranscript(false)
+        await stopRecording({ id: roomId })
+
         await notifyParticipants({
           type: NotificationType.ScreenRecordingStopped,
         })
@@ -92,30 +78,44 @@ export const ScreenRecordingSidePanel = () => {
           room.localParticipant
         )
       } else {
-        await startRecordingRoom({
+        const recordingOptions = {
+          ...(!isLanguageSetToAuto && {
+            language: selectedLanguageKey,
+          }),
+          ...(includeTranscript && { transcribe: true }),
+        }
+
+        await startRecording({
           id: roomId,
           mode: RecordingMode.ScreenRecording,
+          options: recordingOptions,
         })
-        recordingStore.status = RecordingStatus.SCREEN_RECORDING_STARTING
+
         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 transcript:', error)
-      setIsLoading(false)
+      console.error('Failed to handle recording:', error)
     }
   }
 
-  const isDisabled = useMemo(
-    () =>
-      isLoading ||
-      isRecordingTransitioning ||
-      statuses.isAnotherModeStarted ||
-      !isRoomConnected,
-    [isLoading, isRecordingTransitioning, statuses, isRoomConnected]
-  )
+  if (!isAdminOrOwner) {
+    return (
+      <NoAccessView
+        i18nKeyPrefix={keyPrefix}
+        i18nKey="notAdminOrOwner"
+        helpArticle={data?.support?.help_article_recording}
+        imagePath="/assets/intro-slider/4.png"
+        handleRequest={handleRequestScreenRecording}
+        isActive={statuses.isActive}
+      />
+    )
+  }
 
   return (
     <Div
@@ -128,130 +128,74 @@ export const ScreenRecordingSidePanel = () => {
     >
       <img
         src="/assets/intro-slider/4.png"
-        alt={''}
+        alt=""
         className={css({
-          minHeight: '309px',
+          minHeight: '250px',
+          height: '250px',
           marginBottom: '1rem',
+          marginTop: '-16px',
+          '@media (max-height: 900px)': {
+            height: 'auto',
+            minHeight: 'auto',
+            maxHeight: '25%',
+            marginBottom: '0.75rem',
+          },
+          '@media (max-height: 770px)': {
+            display: 'none',
+          },
         })}
       />
-
-      {statuses.isStarted ? (
-        <>
-          <H lvl={3} margin={false}>
-            {t('stop.heading')}
-          </H>
-          <Text
-            variant="note"
-            wrap={'pretty'}
-            centered
-            className={css({
-              textStyle: 'sm',
-              marginBottom: '2.5rem',
-              marginTop: '0.25rem',
-            })}
-          >
-            {t('stop.body')}
-          </Text>
-          <Button
-            isDisabled={isDisabled}
-            onPress={() => handleScreenRecording()}
-            data-attr="stop-screen-recording"
-            size="sm"
-            variant="tertiary"
-          >
-            {t('stop.button')}
-          </Button>
-        </>
-      ) : (
-        <>
-          {statuses.isStopping || isPendingToStop ? (
-            <>
-              <H lvl={3} margin={false}>
-                {t('stopping.heading')}
-              </H>
-              <Text
-                variant="note"
-                wrap={'pretty'}
-                centered
-                className={css({
-                  textStyle: 'sm',
-                  maxWidth: '90%',
-                  marginBottom: '2.5rem',
-                  marginTop: '0.25rem',
-                })}
-              >
-                {t('stopping.body')}
-              </Text>
-              <Spinner />
-            </>
-          ) : (
-            <>
-              <H lvl={3} margin={false}>
-                {t('start.heading')}
-              </H>
-              <Text
-                variant="note"
-                wrap="balance"
-                centered
-                className={css({
-                  textStyle: 'sm',
-                  maxWidth: '90%',
-                  marginBottom: '2.5rem',
-                  marginTop: '0.25rem',
-                })}
-              >
-                {t('start.body', {
-                  duration_message: data?.recording?.max_duration
-                    ? t('durationMessage', {
-                        max_duration: humanizeDuration(
-                          data?.recording?.max_duration,
-                          {
-                            language: i18n.language,
-                          }
-                        ),
-                      })
-                    : '',
-                })}{' '}
-                {data?.support?.help_article_recording && (
-                  <A href={data.support.help_article_recording} target="_blank">
-                    {t('start.linkMore')}
-                  </A>
-                )}
-              </Text>
-              <Button
-                isDisabled={isDisabled}
-                onPress={() => handleScreenRecording()}
-                data-attr="start-screen-recording"
-                size="sm"
-                variant="tertiary"
-              >
-                {statuses.isStarting || isPendingToStart ? (
-                  <>
-                    <Spinner size={20} />
-                    {t('start.loading')}
-                  </>
-                ) : (
-                  t('start.button')
-                )}
-              </Button>
-            </>
+      <VStack gap={0} marginBottom={15}>
+        <H lvl={1} margin={'sm'} fullWidth>
+          {t('heading')}
+        </H>
+        <Text variant="body" fullWidth>
+          {recordingMaxDuration
+            ? t('body', {
+                max_duration: recordingMaxDuration,
+              })
+            : t('bodyWithoutMaxDuration')}{' '}
+          {data?.support?.help_article_recording && (
+            <A href={data.support.help_article_recording} target="_blank">
+              {t('linkMore')}
+            </A>
           )}
-        </>
-      )}
-      <Dialog
-        isOpen={!!isErrorDialogOpen}
-        role="alertdialog"
-        aria-label={t('alert.title')}
-      >
-        <P>{t(`alert.body.${isErrorDialogOpen}`)}</P>
-        <Button
-          variant="text"
-          size="sm"
-          onPress={() => setIsErrorDialogOpen('')}
+        </Text>
+      </VStack>
+      <VStack gap={0} marginBottom={25}>
+        <RowWrapper iconName="cloud_download" position="first">
+          <Text variant="sm">{t('details.destination')}</Text>
+        </RowWrapper>
+        <RowWrapper iconName="mail" position="last">
+          <Text variant="sm">{t('details.receiver')}</Text>
+        </RowWrapper>
+
+        <div className={css({ height: '15px' })} />
+
+        <div
+          className={css({
+            width: '100%',
+            marginLeft: '20px',
+          })}
         >
-          {t('alert.button')}
-        </Button>
-      </Dialog>
+          <Checkbox
+            size="sm"
+            isSelected={includeTranscript}
+            onChange={setIncludeTranscript}
+            isDisabled={statuses.isActive || isPendingToStart}
+          >
+            <Text variant="sm">{t('details.transcription')}</Text>
+          </Checkbox>
+        </div>
+      </VStack>
+      <ControlsButton
+        i18nKeyPrefix={keyPrefix}
+        handle={handleScreenRecording}
+        statuses={statuses}
+        isPendingToStart={isPendingToStart}
+        isPendingToStop={isPendingToStop}
+        openSidePanel={openTranscript}
+      />
     </Div>
   )
 }

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

@@ -1,4 +1,4 @@
-import { A, Button, Dialog, Div, H, LinkButton, P, Text } from '@/primitives'
+import { A, Button, Div, H, Text } from '@/primitives'
 
 import { css } from '@/styled-system/css'
 import { useRoomId } from '@/features/rooms/livekit/hooks/useRoomId'
@@ -6,15 +6,12 @@ import { useRoomContext } from '@livekit/components-react'
 import {
   RecordingMode,
   useHasRecordingAccess,
-  useIsRecordingTransitioning,
-  useStartRecording,
-  useStopRecording,
   useHasFeatureWithoutAdminRights,
+  useHumanizeRecordingMaxDuration,
+  useRecordingStatuses,
 } from '../index'
-import { useEffect, useMemo, useState } from 'react'
-import { ConnectionState, RoomEvent } from 'livekit-client'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { RecordingStatus, recordingStore } from '@/stores/recording'
 import { FeatureFlags } from '@/features/analytics/enums'
 import {
   NotificationType,
@@ -22,23 +19,35 @@ import {
   notifyRecordingSaveInProgress,
 } from '@/features/notifications'
 import posthog from 'posthog-js'
-import { useSnapshot } from 'valtio/index'
-import { Spinner } from '@/primitives/Spinner'
 import { useConfig } from '@/api/useConfig'
-import humanizeDuration from 'humanize-duration'
-import i18n from 'i18next'
+import { VStack } from '@/styled-system/jsx'
+import { Checkbox } from '@/primitives/Checkbox.tsx'
+
+import {
+  useSettingsDialog,
+  SettingsDialogExtendedKey,
+  useTranscriptionLanguage,
+} from '@/features/settings'
+import { NoAccessView } from './NoAccessView'
+import { ControlsButton } from './ControlsButton'
+import { RowWrapper } from './RowWrapper'
+import { useMutateRecording } from '../hooks/useMutateRecording'
+import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 
 export const TranscriptSidePanel = () => {
   const { data } = useConfig()
+  const recordingMaxDuration = useHumanizeRecordingMaxDuration()
 
-  const [isLoading, setIsLoading] = useState(false)
-  const { t } = useTranslation('rooms', { keyPrefix: 'transcript' })
+  const keyPrefix = 'transcript'
+  const { t } = useTranslation('rooms', { keyPrefix })
 
-  const [isErrorDialogOpen, setIsErrorDialogOpen] = useState('')
-
-  const recordingSnap = useSnapshot(recordingStore)
+  const [includeScreenRecording, setIncludeScreenRecording] = useState(false)
 
   const { notifyParticipants } = useNotifyParticipants()
+  const { selectedLanguageKey, selectedLanguageLabel, isLanguageSetToAuto } =
+    useTranscriptionLanguage()
+
+  const { openSettingsDialog } = useSettingsDialog()
 
   const hasTranscriptAccess = useHasRecordingAccess(
     RecordingMode.Transcript,
@@ -52,40 +61,20 @@ export const TranscriptSidePanel = () => {
 
   const roomId = useRoomId()
 
-  const { mutateAsync: startRecordingRoom, isPending: isPendingToStart } =
-    useStartRecording({
-      onError: () => setIsErrorDialogOpen('start'),
-    })
+  const { startRecording, isPendingToStart, stopRecording, isPendingToStop } =
+    useMutateRecording()
 
-  const { mutateAsync: stopRecordingRoom, isPending: isPendingToStop } =
-    useStopRecording({
-      onError: () => setIsErrorDialogOpen('stop'),
-    })
-
-  const statuses = useMemo(() => {
-    return {
-      isAnotherModeStarted:
-        recordingSnap.status == RecordingStatus.SCREEN_RECORDING_STARTED,
-      isStarting: recordingSnap.status == RecordingStatus.TRANSCRIPT_STARTING,
-      isStarted: recordingSnap.status == RecordingStatus.TRANSCRIPT_STARTED,
-      isStopping: recordingSnap.status == RecordingStatus.TRANSCRIPT_STOPPING,
-    }
-  }, [recordingSnap])
-
-  const isRecordingTransitioning = useIsRecordingTransitioning()
+  const statuses = useRecordingStatuses(RecordingMode.Transcript)
 
   const room = useRoomContext()
-  const isRoomConnected = room.state == ConnectionState.Connected
+  const { openScreenRecording } = useSidePanel()
 
-  useEffect(() => {
-    const handleRecordingStatusChanged = () => {
-      setIsLoading(false)
-    }
-    room.on(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanged)
-    return () => {
-      room.off(RoomEvent.RecordingStatusChanged, handleRecordingStatusChanged)
-    }
-  }, [room])
+  const handleRequestTranscription = async () => {
+    await notifyParticipants({
+      type: NotificationType.TranscriptionRequested,
+    })
+    posthog.capture('transcript-requested', {})
+  }
 
   const handleTranscript = async () => {
     if (!roomId) {
@@ -93,10 +82,10 @@ export const TranscriptSidePanel = () => {
       return
     }
     try {
-      setIsLoading(true)
-      if (room.isRecording) {
-        await stopRecordingRoom({ id: roomId })
-        recordingStore.status = RecordingStatus.TRANSCRIPT_STOPPING
+      if (statuses.isStarted || statuses.isStarting) {
+        await stopRecording({ id: roomId })
+        setIncludeScreenRecording(false)
+
         await notifyParticipants({
           type: NotificationType.TranscriptionStopped,
         })
@@ -105,27 +94,64 @@ export const TranscriptSidePanel = () => {
           room.localParticipant
         )
       } else {
-        await startRecordingRoom({ id: roomId, mode: RecordingMode.Transcript })
-        recordingStore.status = RecordingStatus.TRANSCRIPT_STARTING
+        const recordingMode = includeScreenRecording
+          ? RecordingMode.ScreenRecording
+          : RecordingMode.Transcript
+
+        const recordingOptions = {
+          ...(!isLanguageSetToAuto && {
+            language: selectedLanguageKey,
+          }),
+          ...(includeScreenRecording && {
+            transcribe: true,
+            original_mode: RecordingMode.Transcript,
+          }),
+        }
+
+        await startRecording({
+          id: roomId,
+          mode: recordingMode,
+          options: recordingOptions,
+        })
+
         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)
-      setIsLoading(false)
     }
   }
 
-  const isDisabled = useMemo(
-    () =>
-      isLoading ||
-      isRecordingTransitioning ||
-      statuses.isAnotherModeStarted ||
-      !isRoomConnected,
-    [isLoading, isRecordingTransitioning, statuses, isRoomConnected]
-  )
+  if (hasFeatureWithoutAdminRights) {
+    return (
+      <NoAccessView
+        i18nKeyPrefix={keyPrefix}
+        i18nKey="notAdminOrOwner"
+        helpArticle={data?.support?.help_article_transcript}
+        imagePath="/assets/intro-slider/3.png"
+        handleRequest={handleRequestTranscription}
+        isActive={statuses.isActive}
+      />
+    )
+  }
+
+  if (!hasTranscriptAccess) {
+    return (
+      <NoAccessView
+        i18nKeyPrefix={keyPrefix}
+        i18nKey="premium"
+        helpArticle={data?.support?.help_article_transcript}
+        imagePath="/assets/intro-slider/3.png"
+        handleRequest={handleRequestTranscription}
+        isActive={statuses.isActive}
+      />
+    )
+  }
 
   return (
     <Div
@@ -138,199 +164,101 @@ export const TranscriptSidePanel = () => {
     >
       <img
         src="/assets/intro-slider/3.png"
-        alt={''}
+        alt=""
         className={css({
-          minHeight: '309px',
+          minHeight: '250px',
+          height: '250px',
           marginBottom: '1rem',
+          marginTop: '-16px',
+          '@media (max-height: 900px)': {
+            height: 'auto',
+            minHeight: 'auto',
+            maxHeight: '25%',
+            marginBottom: '0.75rem',
+          },
+          '@media (max-height: 770px)': {
+            display: 'none',
+          },
         })}
       />
-      {!hasTranscriptAccess ? (
-        <>
-          {hasFeatureWithoutAdminRights ? (
-            <>
-              <Text>{t('notAdminOrOwner.heading')}</Text>
-              <Text
-                variant="note"
-                wrap="balance"
-                centered
-                className={css({
-                  textStyle: 'sm',
-                  marginBottom: '2.5rem',
-                  marginTop: '0.25rem',
-                })}
-              >
-                {t('notAdminOrOwner.body')}
-                <br />
-                {data?.support?.help_article_transcript && (
-                  <A
-                    href={data.support.help_article_transcript}
-                    target="_blank"
-                  >
-                    {t('notAdminOrOwner.linkMore')}
-                  </A>
-                )}
-              </Text>
-            </>
-          ) : (
-            <>
-              <Text>{t('beta.heading')}</Text>
-              <Text
-                variant="note"
-                wrap={'pretty'}
-                centered
-                className={css({
-                  textStyle: 'sm',
-                  marginBottom: '2.5rem',
-                  marginTop: '0.25rem',
-                })}
-              >
-                {t('beta.body')}{' '}
-                {data?.support?.help_article_transcript && (
-                  <A
-                    href={data.support.help_article_transcript}
-                    target="_blank"
-                  >
-                    {t('start.linkMore')}
-                  </A>
-                )}
-              </Text>
-              {data?.transcript.form_beta_users && (
-                <LinkButton
-                  size="sm"
-                  variant="tertiary"
-                  href={data?.transcript.form_beta_users}
+      <VStack gap={0} marginBottom={15}>
+        <H lvl={1} margin={'sm'}>
+          {t('heading')}
+        </H>
+        <Text variant="body" fullWidth>
+          {recordingMaxDuration
+            ? t('body', {
+                max_duration: recordingMaxDuration,
+              })
+            : t('bodyWithoutMaxDuration')}{' '}
+          {data?.support?.help_article_transcript && (
+            <A href={data.support.help_article_transcript} target="_blank">
+              {t('linkMore')}
+            </A>
+          )}
+        </Text>
+      </VStack>
+      <VStack gap={0} marginBottom={25}>
+        <RowWrapper iconName="article" position="first">
+          <Text variant="sm">
+            {data?.transcription_destination ? (
+              <>
+                {t('details.destination')}{' '}
+                <A
+                  href={data.transcription_destination}
                   target="_blank"
+                  rel="noopener noreferrer"
                 >
-                  {t('beta.button')}
-                </LinkButton>
-              )}
-            </>
-          )}
-        </>
-      ) : (
-        <>
-          {statuses.isStarted ? (
-            <>
-              <H lvl={3} margin={false}>
-                {t('stop.heading')}
-              </H>
-              <Text
-                variant="note"
-                wrap={'pretty'}
-                centered
-                className={css({
-                  textStyle: 'sm',
-                  marginBottom: '2.5rem',
-                  marginTop: '0.25rem',
-                })}
-              >
-                {t('stop.body')}
-              </Text>
-              <Button
-                isDisabled={isDisabled}
-                onPress={() => handleTranscript()}
-                data-attr="stop-transcript"
-                size="sm"
-                variant="tertiary"
-              >
-                {t('stop.button')}
-              </Button>
-            </>
-          ) : (
-            <>
-              {statuses.isStopping || isPendingToStop ? (
-                <>
-                  <H lvl={3} margin={false}>
-                    {t('stopping.heading')}
-                  </H>
-                  <Text
-                    variant="note"
-                    wrap={'pretty'}
-                    centered
-                    className={css({
-                      textStyle: 'sm',
-                      maxWidth: '90%',
-                      marginBottom: '2.5rem',
-                      marginTop: '0.25rem',
-                    })}
-                  >
-                    {t('stopping.body')}
-                  </Text>
-                  <Spinner />
-                </>
-              ) : (
-                <>
-                  <H lvl={3} margin={false}>
-                    {t('start.heading')}
-                  </H>
-                  <Text
-                    variant="note"
-                    wrap="balance"
-                    centered
-                    className={css({
-                      textStyle: 'sm',
-                      maxWidth: '90%',
-                      marginBottom: '2.5rem',
-                      marginTop: '0.25rem',
-                    })}
-                  >
-                    {t('start.body', {
-                      duration_message: data?.recording?.max_duration
-                        ? t('durationMessage', {
-                            max_duration: humanizeDuration(
-                              data?.recording?.max_duration,
-                              {
-                                language: i18n.language,
-                              }
-                            ),
-                          })
-                        : '',
-                    })}{' '}
-                    {data?.support?.help_article_transcript && (
-                      <A
-                        href={data.support.help_article_transcript}
-                        target="_blank"
-                      >
-                        {t('start.linkMore')}
-                      </A>
-                    )}
-                  </Text>
-                  <Button
-                    isDisabled={isDisabled}
-                    onPress={() => handleTranscript()}
-                    data-attr="start-transcript"
-                    size="sm"
-                    variant="tertiary"
-                  >
-                    {statuses.isStarting || isPendingToStart ? (
-                      <>
-                        <Spinner size={20} />
-                        {t('start.loading')}
-                      </>
-                    ) : (
-                      t('start.button')
-                    )}
-                  </Button>
-                </>
-              )}
-            </>
-          )}
-        </>
-      )}
-      <Dialog
-        isOpen={!!isErrorDialogOpen}
-        role="alertdialog"
-        aria-label={t('alert.title')}
-      >
-        <P>{t(`alert.body.${isErrorDialogOpen}`)}</P>
-        <Button
-          variant="text"
-          size="sm"
-          onPress={() => setIsErrorDialogOpen('')}
+                  {data.transcription_destination.replace('https://', '')}
+                </A>
+              </>
+            ) : (
+              t('details.destinationUnknown')
+            )}
+          </Text>
+        </RowWrapper>
+        <RowWrapper iconName="mail">
+          <Text variant="sm">{t('details.receiver')}</Text>
+        </RowWrapper>
+        <RowWrapper iconName="language" position="last">
+          <Text variant="sm">{t('details.language')}</Text>
+          <Text variant="sm">
+            <Button
+              variant="text"
+              size="xs"
+              onPress={() =>
+                openSettingsDialog(SettingsDialogExtendedKey.TRANSCRIPTION)
+              }
+            >
+              {selectedLanguageLabel}
+            </Button>
+          </Text>
+        </RowWrapper>
+        <div className={css({ height: '15px' })} />
+        <div
+          className={css({
+            width: '100%',
+            marginLeft: '20px',
+          })}
         >
-          {t('alert.button')}
-        </Button>
-      </Dialog>
+          <Checkbox
+            size="sm"
+            isSelected={includeScreenRecording}
+            onChange={setIncludeScreenRecording}
+            isDisabled={statuses.isActive || isPendingToStart}
+          >
+            <Text variant="sm">{t('details.recording')}</Text>
+          </Checkbox>
+        </div>
+      </VStack>
+      <ControlsButton
+        i18nKeyPrefix={keyPrefix}
+        handle={handleTranscript}
+        statuses={statuses}
+        isPendingToStart={isPendingToStart}
+        isPendingToStop={isPendingToStop}
+        openSidePanel={openScreenRecording}
+      />
     </Div>
   )
 }

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

@@ -0,0 +1,17 @@
+import { useMemo } from 'react'
+import humanizeDuration from 'humanize-duration'
+import i18n from 'i18next'
+import { useConfig } from '@/api/useConfig'
+
+export const useHumanizeRecordingMaxDuration = () => {
+  const { data } = useConfig()
+
+  return useMemo(() => {
+    if (!data?.recording?.max_duration) return
+
+    return humanizeDuration(data?.recording?.max_duration, {
+      language: i18n.language,
+      delimiter: ' ',
+    })
+  }, [data])
+}

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

@@ -1,22 +0,0 @@
-import { useSnapshot } from 'valtio'
-import { RecordingStatus, recordingStore } from '@/stores/recording'
-import { RecordingMode } from '@/features/recording'
-
-export const useIsRecordingActive = (mode: RecordingMode) => {
-  const recordingSnap = useSnapshot(recordingStore)
-
-  switch (mode) {
-    case RecordingMode.Transcript:
-      return [
-        RecordingStatus.TRANSCRIPT_STARTED,
-        RecordingStatus.TRANSCRIPT_STARTING,
-        RecordingStatus.TRANSCRIPT_STOPPING,
-      ].includes(recordingSnap.status)
-    case RecordingMode.ScreenRecording:
-      return [
-        RecordingStatus.SCREEN_RECORDING_STARTED,
-        RecordingStatus.SCREEN_RECORDING_STARTING,
-        RecordingStatus.SCREEN_RECORDING_STOPPING,
-      ].includes(recordingSnap.status)
-  }
-}

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

@@ -1,15 +0,0 @@
-import { useSnapshot } from 'valtio'
-import { RecordingStatus, recordingStore } from '@/stores/recording'
-
-export const useIsRecordingTransitioning = () => {
-  const recordingSnap = useSnapshot(recordingStore)
-
-  const transitionalStates = [
-    RecordingStatus.TRANSCRIPT_STARTING,
-    RecordingStatus.TRANSCRIPT_STOPPING,
-    RecordingStatus.SCREEN_RECORDING_STARTING,
-    RecordingStatus.SCREEN_RECORDING_STOPPING,
-  ]
-
-  return transitionalStates.includes(recordingSnap.status)
-}

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

@@ -0,0 +1,24 @@
+import { useStartRecording, useStopRecording } from '@/features/recording'
+import { recordingStore } from '@/stores/recording'
+
+export const useMutateRecording = () => {
+  const { mutateAsync: startRecording, isPending: isPendingToStart } =
+    useStartRecording({
+      onError: () => {
+        recordingStore.isErrorDialogOpen = 'start'
+      },
+    })
+  const { mutateAsync: stopRecording, isPending: isPendingToStop } =
+    useStopRecording({
+      onError: () => {
+        recordingStore.isErrorDialogOpen = 'stop'
+      },
+    })
+
+  return {
+    startRecording,
+    isPendingToStart,
+    stopRecording,
+    isPendingToStop,
+  }
+}

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

@@ -0,0 +1,62 @@
+import { RecordingMode } from '@/features/recording'
+import { useRoomMetadata } from './useRoomMetadata'
+import { useMemo } from 'react'
+import { useIsRecording } from '@livekit/components-react'
+
+export enum RecordingStatus {
+  Starting = 'starting',
+  Started = 'started',
+  Saving = 'saving',
+}
+
+const ACTIVE_STATUSES = [
+  RecordingStatus.Starting,
+  RecordingStatus.Started,
+  RecordingStatus.Saving,
+] as const
+
+export interface RecordingStatuses {
+  isAnotherModeStarted: boolean
+  isStarting: boolean
+  isStarted: boolean
+  isSaving: boolean
+  isActive: boolean
+}
+
+export const useRecordingStatuses = (
+  mode: RecordingMode
+): RecordingStatuses => {
+  const metadata = useRoomMetadata()
+  const isRecording = useIsRecording()
+
+  return useMemo(() => {
+    if (metadata && metadata?.recording_mode === mode) {
+      return {
+        isAnotherModeStarted: false,
+        isStarting:
+          metadata.recording_status === RecordingStatus.Starting ||
+          (metadata.recording_status === RecordingStatus.Started &&
+            !isRecording),
+        isStarted:
+          metadata.recording_status === RecordingStatus.Started && isRecording,
+        isSaving: metadata.recording_status === RecordingStatus.Saving,
+        isActive: ACTIVE_STATUSES.includes(
+          metadata.recording_status as RecordingStatus
+        ),
+      }
+    }
+
+    const isAnotherModeStarted =
+      !!metadata?.recording_mode &&
+      metadata?.recording_mode !== mode &&
+      ACTIVE_STATUSES.includes(metadata.recording_status as RecordingStatus)
+
+    return {
+      isAnotherModeStarted,
+      isStarting: false,
+      isStarted: false,
+      isSaving: false,
+      isActive: false,
+    }
+  }, [mode, metadata, isRecording])
+}

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

@@ -0,0 +1,18 @@
+import { useRoomInfo } from '@livekit/components-react'
+import { useMemo } from 'react'
+
+export const useRoomMetadata = () => {
+  const { metadata } = useRoomInfo()
+  return useMemo(() => {
+    if (metadata) {
+      try {
+        return JSON.parse(metadata)
+      } catch (error) {
+        console.error('Failed to parse room metadata:', error)
+        return undefined
+      }
+    } else {
+      return undefined
+    }
+  }, [metadata])
+}

src/frontend/src/features/recording/index.ts

@@ -1,9 +1,9 @@
 // hooks
 export { useIsRecordingModeEnabled } from './hooks/useIsRecordingModeEnabled'
-export { useIsRecordingTransitioning } from './hooks/useIsRecordingTransitioning'
 export { useHasRecordingAccess } from './hooks/useHasRecordingAccess'
-export { useIsRecordingActive } from './hooks/useIsRecordingActive'
 export { useHasFeatureWithoutAdminRights } from './hooks/useHasFeatureWithoutAdminRights'
+export { useHumanizeRecordingMaxDuration } from './hooks/useHumanizeRecordingMaxDuration'
+export { useRecordingStatuses } from './hooks/useRecordingStatuses'
 
 // api
 export { useStartRecording } from './api/startRecording'
@@ -11,7 +11,7 @@ export { useStopRecording } from './api/stopRecording'
 export { RecordingMode, RecordingStatus } from './types'
 
 // components
-export { RecordingStateToast } from './components/RecordingStateToast'
+export { RecordingProvider } from './components/RecordingProvider'
 export { TranscriptSidePanel } from './components/TranscriptSidePanel'
 export { ScreenRecordingSidePanel } from './components/ScreenRecordingSidePanel'
 

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/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,9 @@ 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'
 
 export const ANIMATION_DURATION = 3000
 export const ANIMATION_DISTANCE = 300
@@ -140,11 +143,53 @@ 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 [announcement, setAnnouncement] = useState<string | null>(null)
+  const [lastAnnouncedId, setLastAnnouncedId] = useState<number | null>(null)
+
+  const latestReaction =
+    reactions.length > 0 ? reactions[reactions.length - 1] : undefined
+
+  useEffect(() => {
+    if (!announceReactions) {
+      setAnnouncement(null)
+      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' })
+    setAnnouncement(t('announce', { name: participantName, emoji: emojiLabel }))
+    setLastAnnouncedId(latestReaction.id)
+
+    const timer = setTimeout(() => setAnnouncement(null), 1200)
+    return () => clearTimeout(timer)
+  }, [latestReaction, lastAnnouncedId, announceReactions, t])
+
+  return (
+    <>
+      {reactions.map((instance) => (
+        <ReactionPortal
+          key={instance.id}
+          emoji={instance.emoji}
+          participant={instance.participant}
+        />
+      ))}
+      <div
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        {announcement ?? ''}
+      </div>
+    </>
+  )
+}

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

@@ -13,27 +13,32 @@ 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 +63,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 +114,7 @@ const StyledSidePanel = ({
       </Button>
     </Div>
     {children}
-  </div>
+  </aside>
 )
 
 type PanelProps = {
@@ -125,7 +135,6 @@ const Panel = ({ isOpen, keepAlive = false, children }: PanelProps) => (
     {keepAlive || isOpen ? children : null}
   </div>
 )
-
 export const SidePanel = () => {
   const {
     activePanelId,
@@ -144,6 +153,7 @@ export const SidePanel = () => {
   return (
     <StyledSidePanel
       title={t(`heading.${activeSubPanelId || activePanelId}`)}
+      ariaLabel={t('ariaLabel')}
       onClose={() => {
         layoutStore.activePanelId = null
         layoutStore.activeSubPanelId = null
@@ -153,6 +163,7 @@ export const SidePanel = () => {
       })}
       isClosed={!isSidePanelOpen}
       isSubmenu={isSubPanelOpen}
+      backButtonLabel={t('backToTools')}
       onBack={() => (layoutStore.activeSubPanelId = null)}
     >
       <Panel isOpen={isParticipantsOpen}>
@@ -164,7 +175,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,19 +1,16 @@
-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 { RiFileTextFill, RiLiveFill } from '@remixicon/react'
 import { SubPanelId, useSidePanel } from '../hooks/useSidePanel'
+import { useRestoreFocus } from '@/hooks/useRestoreFocus'
 import {
   useIsRecordingModeEnabled,
   RecordingMode,
-  useHasRecordingAccess,
   TranscriptSidePanel,
   ScreenRecordingSidePanel,
-  useIsRecordingActive,
 } from '@/features/recording'
-import { FeatureFlags } from '@/features/analytics/enums'
 import { useConfig } from '@/api/useConfig'
 
 export interface ToolsButtonProps {
@@ -21,8 +18,6 @@ export interface ToolsButtonProps {
   title: string
   description: string
   onPress: () => void
-  isBetaFeature?: boolean
-  isActive?: boolean
 }
 
 const ToolButton = ({
@@ -30,8 +25,6 @@ const ToolButton = ({
   title,
   description,
   onPress,
-  isBetaFeature = false,
-  isActive = false,
 }: ToolsButtonProps) => {
   return (
     <RACButton
@@ -42,9 +35,9 @@ const ToolButton = ({
         justifyContent: 'start',
         paddingY: '0.5rem',
         paddingX: '0.75rem 1.5rem',
-        borderRadius: '5px',
-        gap: '1.25rem',
+        borderRadius: '30px',
         width: 'full',
+        backgroundColor: 'gray.50',
         textAlign: 'start',
         '&[data-hovered]': {
           backgroundColor: 'primary.50',
@@ -55,81 +48,78 @@ const ToolButton = ({
     >
       <div
         className={css({
-          height: '50px',
-          minWidth: '50px',
+          height: '40px',
+          minWidth: '40px',
           borderRadius: '25px',
-          backgroundColor: 'primary.800',
+          marginRight: '0.75rem',
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
           position: 'relative',
+          background: 'primary.800',
+          color: 'white',
         })}
       >
         {icon}
-        {isBetaFeature && (
-          <div
-            className={css({
-              position: 'absolute',
-              backgroundColor: 'primary.50',
-              color: 'primary.800',
-              fontSize: '12px',
-              fontWeight: 500,
-              borderRadius: '4px',
-              paddingX: '4px',
-              paddingBottom: '1px',
-              bottom: -8,
-              right: -8,
-            })}
-          >
-            BETA
-          </div>
-        )}
       </div>
       <div>
         <Text
           margin={false}
           as="h3"
-          className={css({ display: 'flex', gap: 0.25 })}
+          className={css({
+            display: 'flex',
+            gap: 0.25,
+            fontWeight: 'semibold',
+          })}
         >
           {title}
-          {isActive && (
-            <div
-              className={css({
-                backgroundColor: 'primary.500',
-                height: '10px',
-                width: '10px',
-                marginTop: '5px',
-                borderRadius: '100%',
-              })}
-            />
-          )}
         </Text>
         <Text as="p" variant="smNote" wrap="pretty">
           {description}
         </Text>
       </div>
+      <div
+        className={css({
+          marginLeft: 'auto',
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        })}
+      >
+        <Icon type="symbols" name="chevron_forward" />
+      </div>
     </RACButton>
   )
 }
 
 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
   )
 
-  const isTranscriptActive = useIsRecordingActive(RecordingMode.Transcript)
-
-  const hasScreenRecordingAccess = useHasRecordingAccess(
-    RecordingMode.ScreenRecording,
-    FeatureFlags.ScreenRecording
-  )
-
-  const isScreenRecordingActive = useIsRecordingActive(
+  const isScreenRecordingEnabled = useIsRecordingModeEnabled(
     RecordingMode.ScreenRecording
   )
 
@@ -150,6 +140,7 @@ export const Tools = () => {
       flexGrow={1}
       flexDirection="column"
       alignItems="start"
+      gap={0.5}
     >
       <Text
         variant="note"
@@ -157,8 +148,8 @@ export const Tools = () => {
         className={css({
           textStyle: 'sm',
           paddingX: '0.75rem',
+          marginBottom: '1rem',
         })}
-        margin="md"
       >
         {t('body')}{' '}
         {data?.support?.help_article_more_tools && (
@@ -172,22 +163,18 @@ export const Tools = () => {
       </Text>
       {isTranscriptEnabled && (
         <ToolButton
-          icon={<RiFileTextFill size={24} color="white" />}
+          icon={<Icon type="symbols" name="speech_to_text" />}
           title={t('tools.transcript.title')}
           description={t('tools.transcript.body')}
           onPress={() => openTranscript()}
-          isBetaFeature
-          isActive={isTranscriptActive}
         />
       )}
-      {hasScreenRecordingAccess && (
+      {isScreenRecordingEnabled && (
         <ToolButton
-          icon={<RiLiveFill size={24} color="white" />}
+          icon={<Icon type="symbols" name="mode_standby" />}
           title={t('tools.screenRecording.title')}
           description={t('tools.screenRecording.body')}
           onPress={() => openScreenRecording()}
-          isBetaFeature
-          isActive={isScreenRecordingActive}
         />
       )}
     </Div>

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

@@ -9,6 +9,7 @@ export const OptionsButton = () => {
   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/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,13 +9,13 @@ 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'
 
@@ -50,11 +50,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 [blurStatusMessage, setBlurStatusMessage] = useState('')
+  const blurAnnouncementTimeout = useRef<ReturnType<typeof setTimeout> | null>(
+    null
+  )
+  const blurAnnouncementId = useRef(0)
 
   useEffect(() => {
     const videoElement = videoRef.current
@@ -69,16 +75,78 @@ export const EffectsConfiguration = ({
     }
   }, [videoTrack, videoTrack?.isMuted])
 
+  useEffect(() => {
+    if (!blurLightRef.current) return
+
+    const rafId = requestAnimationFrame(() => {
+      blurLightRef.current?.focus({ preventScroll: true })
+    })
+
+    return () => {
+      cancelAnimationFrame(rafId)
+    }
+  }, [])
+
+  useEffect(
+    () => () => {
+      if (blurAnnouncementTimeout.current) {
+        clearTimeout(blurAnnouncementTimeout.current)
+      }
+    },
+    []
+  )
+
+  const announceBlurStatusMessage = (message: string) => {
+    blurAnnouncementId.current += 1
+    const currentId = blurAnnouncementId.current
+
+    if (blurAnnouncementTimeout.current) {
+      clearTimeout(blurAnnouncementTimeout.current)
+    }
+
+    // Clear the region first so screen readers drop queued announcements.
+    setBlurStatusMessage('')
+
+    blurAnnouncementTimeout.current = setTimeout(() => {
+      if (currentId !== blurAnnouncementId.current) return
+      setBlurStatusMessage(message)
+    }, 80)
+  }
+
   const clearEffect = async () => {
     await videoTrack.stopProcessor()
     onSubmit?.(undefined)
   }
 
+  const updateBlurStatusMessage = (
+    type: ProcessorType,
+    options: BackgroundOptions,
+    wasSelectedBeforeToggle: boolean
+  ) => {
+    if (type !== ProcessorType.BLUR) return
+
+    let message = ''
+
+    if (wasSelectedBeforeToggle) {
+      message = t('blur.status.none')
+    } else if (options.blurRadius === BlurRadius.LIGHT) {
+      message = t('blur.status.light')
+    } else if (options.blurRadius === BlurRadius.NORMAL) {
+      message = t('blur.status.strong')
+    }
+
+    if (message) {
+      announceBlurStatusMessage(message)
+    }
+  }
+
   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 +172,7 @@ export const EffectsConfiguration = ({
 
     const processor = getProcessor()
     try {
-      if (isSelected(type, options)) {
+      if (wasSelectedBeforeToggle) {
         // Stop processor.
         await clearEffect()
       } else if (
@@ -131,6 +199,8 @@ export const EffectsConfiguration = ({
         // We want to trigger onSubmit when options changes so the parent component is aware of it.
         onSubmit?.(processor)
       }
+
+      updateBlurStatusMessage(type, options, wasSelectedBeforeToggle)
     } catch (error) {
       console.error('Error applying effect:', error)
     } finally {
@@ -153,8 +223,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 +355,60 @@ 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 aria-live="polite" className="sr-only">
+                  {blurStatusMessage}
+                </div>
               </div>
               <div
                 className={css({
@@ -343,39 +428,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/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

@@ -26,7 +26,7 @@ import { FocusLayout } from '../components/FocusLayout'
 import { ParticipantTile } from '../components/ParticipantTile'
 import { SidePanel } from '../components/SidePanel'
 import { useSidePanel } from '../hooks/useSidePanel'
-import { RecordingStateToast } from '@/features/recording'
+import { RecordingProvider } from '@/features/recording'
 import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
 import { useConnectionObserver } from '../hooks/useConnectionObserver'
 import { useNoiseReduction } from '../hooks/useNoiseReduction'
@@ -261,7 +261,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
       )}
       <RoomAudioRenderer />
       <ConnectionStateToast />
-      <RecordingStateToast />
+      <RecordingProvider />
       <SettingsDialogProvider />
     </div>
   )

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,15 +11,19 @@ import {
   RiSettings3Line,
   RiSpeakerLine,
   RiVideoOnLine,
+  RiEyeLine,
 } from '@remixicon/react'
 import { AccountTab } from './tabs/AccountTab'
 import { NotificationsTab } from './tabs/NotificationsTab'
 import { GeneralTab } from './tabs/GeneralTab'
 import { AudioTab } from './tabs/AudioTab'
 import { VideoTab } from './tabs/VideoTab'
+import { TranscriptionTab } from './tabs/TranscriptionTab'
 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
@@ -58,6 +63,8 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
   const dialogEl = useRef<HTMLDivElement>(null)
   const isWideScreen = useMediaQuery('(min-width: 800px)') // fixme - hardcoded 50rem in pixel
 
+  const isAdminOrOwner = useIsAdminOrOwner()
+
   return (
     <Dialog innerRef={dialogEl} {...props} role="dialog" type="flex">
       <Tabs
@@ -100,6 +107,18 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
               {isWideScreen &&
                 t(`tabs.${SettingsDialogExtendedKey.NOTIFICATIONS}`)}
             </Tab>
+            {isAdminOrOwner && (
+              <Tab icon highlight id={SettingsDialogExtendedKey.TRANSCRIPTION}>
+                <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}>
@@ -111,6 +130,9 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
           <VideoTab id={SettingsDialogExtendedKey.VIDEO} />
           <GeneralTab id={SettingsDialogExtendedKey.GENERAL} />
           <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/components/tabs/TranscriptionTab.tsx

@@ -0,0 +1,30 @@
+import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
+import { Field, H } from '@/primitives'
+import { useTranslation } from 'react-i18next'
+import { RecordingLanguage, recordingStore } from '@/stores/recording'
+import { useSnapshot } from 'valtio'
+import { useTranscriptionLanguage } from '@/features/settings'
+
+export type TranscriptionTabProps = Pick<TabPanelProps, 'id'>
+
+export const TranscriptionTab = ({ id }: TranscriptionTabProps) => {
+  const { t } = useTranslation('settings', { keyPrefix: 'transcription' })
+  const recordingSnap = useSnapshot(recordingStore)
+
+  const { languageOptions } = useTranscriptionLanguage()
+
+  return (
+    <TabPanel padding={'md'} flex id={id}>
+      <H lvl={2}>{t('heading')}</H>
+      <Field
+        type="select"
+        label={t('language.label')}
+        items={languageOptions}
+        selectedKey={recordingSnap.language}
+        onSelectionChange={(lang) => {
+          recordingStore.language = lang as RecordingLanguage
+        }}
+      />
+    </TabPanel>
+  )
+}

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

@@ -0,0 +1,61 @@
+import { useMemo } from 'react'
+import { RecordingLanguage, recordingStore } from '@/stores/recording'
+import { useTranslation } from 'react-i18next'
+import { useSnapshot } from 'valtio/index'
+
+export const useTranscriptionLanguage = () => {
+  const { t } = useTranslation('settings', { keyPrefix: 'transcription' })
+
+  const recordingSnap = useSnapshot(recordingStore)
+
+  const languages = useMemo(
+    () => [
+      {
+        key: RecordingLanguage.FRENCH,
+        label: t('language.options.french'),
+      },
+      {
+        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'),
+      },
+    ],
+    [t]
+  )
+
+  const languageOptions = useMemo(() => {
+    return languages.map((i) => ({
+      key: i.key,
+      value: i.key,
+      label: i.label,
+    }))
+  }, [languages])
+
+  const { selectedLanguageKey, selectedLanguageLabel } = useMemo(() => {
+    const selectedLanguageLabel = languages.find(
+      (option) => option.key === recordingSnap.language
+    )?.label
+
+    const selectedLanguageKey = recordingSnap.language
+
+    return { selectedLanguageKey, selectedLanguageLabel }
+  }, [recordingSnap.language, languages])
+
+  return {
+    languageOptions,
+    selectedLanguageKey,
+    selectedLanguageLabel,
+    isLanguageSetToAuto: selectedLanguageKey === RecordingLanguage.AUTOMATIC,
+  }
+}

src/frontend/src/features/settings/index.ts

@@ -1,2 +1,7 @@
 export { SettingsButton } from './components/SettingsButton'
 export { SettingsDialog } from './components/SettingsDialog'
+
+export { useTranscriptionLanguage } from './hook/useTranscriptionLanguage'
+export { useSettingsDialog } from './hook/useSettingsDialog'
+
+export { SettingsDialogExtendedKey } from './type.ts'

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

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

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/layout/Header.tsx

@@ -13,29 +13,6 @@ import { LoginButton } from '@/components/LoginButton'
 
 import { useLoginHint } from '@/hooks/useLoginHint'
 
-const BetaBadge = () => (
-  <span
-    className={css({
-      content: '"Beta"',
-      display: 'block',
-      letterSpacing: '-0.02rem',
-      padding: '0 0.25rem',
-      backgroundColor: '#E8EDFF',
-      color: '#0063CB',
-      fontSize: '12px',
-      fontWeight: 500,
-      margin: '0 0 0.9375rem 0.3125rem',
-      lineHeight: '1rem',
-      borderRadius: '4px',
-      width: 'fit-content',
-      height: 'fit-content',
-      marginTop: { base: '10px', sm: '5px' },
-    })}
-  >
-    Beta
-  </span>
-)
-
 const Logo = () => (
   <img
     src="/assets/logo.svg"
@@ -158,7 +135,6 @@ export const Header = () => {
                 />
                 <HStack gap={0}>
                   <Logo />
-                  <BetaBadge />
                 </HStack>
               </Link>
             </Stack>

src/frontend/src/locales/de/global.json

@@ -6,7 +6,7 @@
     "heading": "Beim Laden der Seite ist ein Fehler aufgetreten"
   },
   "feedback": {
-    "context": "Produkt in Entwicklung — Ihr Feedback ist wichtig!",
+    "context": "Ihr Feedback prägt das Produkt!",
     "cta": "Teilen Sie uns Ihre Meinung mit - neues Fenster"
   },
   "forbidden": {

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/notifications.json

@@ -30,12 +30,14 @@
   "transcript": {
     "started": "{{name}} hat die Transkription des Treffens gestartet.",
     "stopped": "{{name}} hat die Transkription des Treffens gestoppt.",
-    "limitReached": "Die Transkription hat die maximal zulässige Dauer überschritten und wird automatisch gespeichert."
+    "limitReached": "Die Transkription hat die maximal zulässige Dauer überschritten und wird automatisch gespeichert.",
+    "requested": "{{name}} will die Transkription starten."
   },
   "screenRecording": {
     "started": "{{name}} hat die Aufzeichnung des Treffens gestartet.",
     "stopped": "{{name}} hat die Aufzeichnung des Treffens gestoppt.",
-    "limitReached": "Die Aufzeichnung hat die maximal zulässige Dauer überschritten und wird automatisch gespeichert."
+    "limitReached": "Die Aufzeichnung hat die maximal zulässige Dauer überschritten und wird automatisch gespeichert.",
+    "requested": "{{name}} will die Aufnahme starten."
   },
   "recordingSave": {
     "transcript": {
@@ -46,5 +48,6 @@
       "message": "Wir finalisieren Ihre Aufnahme! Sie erhalten eine E-Mail an <strong>{{email}}</strong>, sobald sie fertig ist.",
       "default": "Wir finalisieren Ihre Aufnahme! Sie erhalten eine E-Mail, sobald sie fertig ist."
     }
-  }
+  },
+  "openMenu": "Menü öffnen"
 }

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"
@@ -191,7 +192,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 +208,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": {
@@ -233,15 +247,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,12 +289,14 @@
     }
   },
   "sidePanel": {
+    "ariaLabel": "Seitenleiste",
+    "backToTools": "Zurück zu den Meeting-Tools",
     "heading": {
       "participants": "Teilnehmer",
       "effects": "Effekte",
       "chat": "Nachrichten im Chat",
-      "transcript": "Transkription",
-      "screenRecording": "Aufzeichnung",
+      "transcript": "Transkribieren",
+      "screenRecording": "Aufzeichnen",
       "admin": "Admin-Einstellungen",
       "tools": "Weitere Tools",
       "info": "Meeting-Informationen"
@@ -270,8 +305,8 @@
       "participants": "Teilnehmer",
       "effects": "Effekte",
       "chat": "Nachrichten",
-      "transcript": "Transkription",
-      "screenRecording": "Aufzeichnung",
+      "transcript": "transkribieren",
+      "screenRecording": "aufzeichnen",
       "admin": "Admin-Einstellungen",
       "tools": "Weitere Tools",
       "info": "Meeting-Informationen"
@@ -286,12 +321,12 @@
     "moreLink": "Mehr erfahren",
     "tools": {
       "transcript": {
-        "title": "Transkription",
-        "body": "Führen Sie ein schriftliches Protokoll Ihres Meetings."
+        "title": "Transkribieren",
+        "body": "Das Gespräch aufzeichnen."
       },
       "screenRecording": {
-        "title": "Aufzeichnung",
-        "body": "Zeichnen Sie Ihr Meeting auf, um es später erneut anzusehen."
+        "title": "Aufzeichnen",
+        "body": "Das Meeting aufzeichnen."
       }
     }
   },
@@ -310,74 +345,99 @@
     }
   },
   "transcript": {
-    "start": {
-      "heading": "Dieses Gespräch transkribieren",
-      "body": "Dieses Gespräch automatisch transkribieren {{duration_message}} und die Zusammenfassung in Docs erhalten.",
-      "button": "Transkription starten",
-      "loading": "Transkription wird gestartet",
-      "linkMore": "Mehr erfahren"
+    "heading": "Transkribieren Sie Ihr Meeting mit dem KI-Assistenten",
+    "body": "Transkribieren Sie bis zu {{max_duration}} Meetingdauer.",
+    "bodyWithoutMaxDuration": "Transkribieren Sie Ihr Meeting ohne Begrenzung.",
+    "details": {
+      "receiver": "Das Transkript wird an den Organisator und die Mitorganisatoren gesendet.",
+      "destination": "Ein neues Dokument wird erstellt auf",
+      "destinationUnknown": "Ein neues Dokument wird erstellt",
+      "language": "Meeting-Sprache:",
+      "recording": "Auch eine Aufzeichnung starten"
     },
+    "button": {
+      "start": "Meeting transkribieren starten",
+      "stop": "Meeting transkribieren beenden",
+      "saving": "Speichern…",
+      "starting": "Wird gestartet…",
+      "anotherModeStarted": "Eine Aufnahme läuft. <br/> Wechseln Sie das Menü und stoppen Sie sie."
+    },
+    "linkMore": "Mehr erfahren",
     "notAdminOrOwner": {
       "heading": "Zugriff eingeschränkt",
       "body": "Aus Sicherheitsgründen kann nur der Ersteller oder ein Administrator des Meetings eine Transkription (Beta) starten.",
-      "linkMore": "Mehr erfahren"
-    },
-    "stop": {
-      "heading": "Transkription läuft...",
-      "body": "Die Transkription deines Meetings läuft. Du erhältst das Ergebnis per E-Mail, sobald das Meeting beendet ist.",
-      "button": "Transkription stoppen"
-    },
-    "stopping": {
-      "heading": "Daten werden gespeichert…",
-      "body": "Sie können das Meeting verlassen, wenn Sie möchten; die Aufzeichnung wird automatisch beendet."
-    },
-    "beta": {
-      "heading": "Werde Beta-Tester",
-      "body": "Zeichne dein Meeting auf. Du erhältst eine Zusammenfassung per E-Mail nach dem Meeting.",
-      "button": "Anmelden"
-    },
-    "alert": {
-      "title": "Transkription fehlgeschlagen",
-      "body": {
-        "stop": "Die Transkription konnte nicht gestoppt werden. Bitte versuche es in einem Moment erneut.",
-        "start": "Die Transkription konnte nicht gestartet werden. Bitte versuche es in einem Moment erneut."
+      "linkMore": "Mehr erfahren",
+      "dividerLabel": "ODER",
+      "login": {
+        "heading": "Anmeldung erforderlich",
+        "body": "Nur der Ersteller des Meetings oder ein Administrator kann die Transkription starten. Melden Sie sich an, um Ihre Berechtigungen zu überprüfen."
       },
-      "button": "OK"
+      "request": {
+        "heading": "Anfrage an Moderator",
+        "body": "Der Moderator wird benachrichtigt und kann die Transkription starten.",
+        "buttonLabel": "Anfordern"
+      }
     },
-    "durationMessage": "(begrenzt auf {{max_duration}}) "
+    "premium": {
+      "heading": "Premium-Funktion",
+      "body": "Diese Funktion ist öffentlichen Bediensteten vorbehalten. Wenn Ihre E-Mail-Adresse nicht autorisiert ist, kontaktieren Sie bitte den Support, um Zugriff zu erhalten.",
+      "linkMore": "Mehr erfahren",
+      "dividerLabel": "ODER",
+      "login": {
+        "heading": "Anmeldung erforderlich",
+        "body": "Nur der Ersteller des Meetings oder ein Administrator kann die Transkription starten. Melden Sie sich an, um Ihre Berechtigungen zu überprüfen."
+      },
+      "request": {
+        "heading": "Anfrage an Moderator",
+        "body": "Der Moderator wird benachrichtigt und kann die Transkription starten.",
+        "buttonLabel": "Anfordern"
+      }
+    }
   },
   "screenRecording": {
-    "start": {
-      "heading": "Dieses Gespräch aufzeichnen",
-      "body": "Zeichne dieses Gespräch auf, um es später anzusehen {{duration_message}}. Du erhältst die Videoaufnahme per E-Mail.",
-      "button": "Aufzeichnung starten",
+    "heading": "Diesen Anruf für später aufzeichnen",
+    "body": "Zeichnen Sie bis zu {{max_duration}} des Meetings auf.",
+    "bodyWithoutMaxDuration": "Zeichnen Sie Ihr Meeting unbegrenzt auf.",
+    "linkMore": "Mehr erfahren",
+    "details": {
+      "receiver": "Die Aufzeichnung wird an den Organisator und die Mitorganisatoren gesendet.",
+      "destination": "Diese Aufzeichnung wird vorübergehend auf unseren Servern gespeichert",
       "loading": "Aufzeichnung wird gestartet",
-      "linkMore": "Mehr erfahren"
+      "linkMore": "Mehr erfahren",
+      "transcription": "Diese Aufzeichnung transkribieren"
+    },
+    "button": {
+      "start": "Meeting-Aufzeichnung starten",
+      "stop": "Meeting-Aufzeichnung beenden",
+      "saving": "Wird gespeichert…",
+      "starting": "Wird gestartet…",
+      "anotherModeStarted": "Eine Transkription läuft. <br/> Wechseln Sie das Menü und stoppen Sie sie."
     },
     "notAdminOrOwner": {
       "heading": "Zugriff eingeschränkt",
-      "body": "Aus Sicherheitsgründen kann nur der Ersteller oder ein Administrator des Meetings eine videoaufnahme (Beta) starten.",
-      "linkMore": "Mehr erfahren"
-    },
-    "stopping": {
-      "heading": "Daten werden gespeichert…",
-      "body": "Sie können das Meeting verlassen, wenn Sie möchten; die Aufzeichnung wird automatisch beendet."
-    },
-    "stop": {
-      "heading": "Aufzeichnung läuft…",
-      "body": "Du erhältst das Ergebnis per E-Mail, sobald die Aufzeichnung abgeschlossen ist.",
-      "button": "Aufzeichnung stoppen"
-    },
-    "alert": {
-      "title": "Aufzeichnung fehlgeschlagen",
-      "body": {
-        "stop": "Die Aufzeichnung konnte nicht gestoppt werden. Bitte versuche es in einem Moment erneut.",
-        "start": "Die Aufzeichnung konnte nicht gestartet werden. Bitte versuche es in einem Moment erneut."
+      "body": "Aus Sicherheitsgründen kann nur der Ersteller oder ein Administrator des Meetings eine Videoaufnahme (Beta) starten.",
+      "linkMore": "Mehr erfahren",
+      "dividerLabel": "ODER",
+      "login": {
+        "heading": "Anmeldung erforderlich",
+        "body": "Nur der Ersteller der Besprechung oder ein Administrator kann die Aufzeichnung starten. Melden Sie sich an, um Ihre Berechtigungen zu überprüfen."
       },
-      "button": "OK"
+      "request": {
+        "heading": "Aufnahme anfordern",
+        "body": "Der Moderator wird benachrichtigt und kann die Aufnahme für Sie starten.",
+        "buttonLabel": "Anfrage senden"
+      }
     },
     "durationMessage": "(begrenzt auf {{max_duration}})"
   },
+  "errorRecordingAlertDialog": {
+    "title": "Aufzeichnung fehlgeschlagen",
+    "body": {
+      "stop": "Die Aufzeichnung konnte nicht gestoppt werden. Bitte versuche es in einem Moment erneut.",
+      "start": "Die Aufzeichnung konnte nicht gestartet werden. Bitte versuche es in einem Moment erneut."
+    },
+    "button": "OK"
+  },
   "admin": {
     "description": "Diese Einstellungen für Organisatoren ermöglichen dir die Kontrolle über dein Meeting. Nur Organisatoren haben Zugriff auf diese Optionen.",
     "access": {
@@ -496,7 +556,7 @@
       "starting": "Transkription wird gestartet",
       "stopping": "Transkription wird gestoppt"
     },
-    "screenRecording": {
+    "screen_recording": {
       "started": "Aufzeichnung läuft",
       "starting": "Aufzeichnung wird gestartet",
       "stopping": "Aufzeichnung wird gestoppt"

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

@@ -68,6 +68,19 @@
     },
     "permissionsRequired": "Berechtigungen erforderlich"
   },
+  "transcription": {
+    "heading": "Transkription",
+    "language": {
+      "label": "Besprechungssprache",
+      "options": {
+        "french": "Französisch (fr)",
+        "english": "Englisch (en)",
+        "dutch": "Niederländisch (nl)",
+        "german": "Deutsch (de)",
+        "auto": "Automatisch"
+      }
+    }
+  },
   "notifications": {
     "heading": "Tonbenachrichtigungen",
     "label": "Tonbenachrichtigungen für",
@@ -100,6 +113,7 @@
     "audio": "Audio",
     "video": "Video",
     "general": "Allgemein",
-    "notifications": "Benachrichtigungen"
+    "notifications": "Benachrichtigungen",
+    "transcription": "Transkription"
   }
 }

src/frontend/src/locales/de/termsOfService.json

@@ -70,19 +70,42 @@
     },
     "article7": {
       "title": "7. Verpflichtungen und Verantwortlichkeiten von DINUM",
+      "content": "DINUM ist für die allgemeine Verwaltung des Dienstes verantwortlich. Sie stellt den Bediensteten alle erforderlichen Informationen zur Verfügung, um die Nutzung zu erleichtern. Sie bietet technische und funktionale Unterstützung, um den ordnungsgemäßen Betrieb des Dienstes sicherzustellen. Sie informiert die Nutzer auf jede zumutbare Weise über jede Schwierigkeit, die diesen ordnungsgemäßen Betrieb beeinträchtigen könnte.",
       "sections": {
         "section1": {
-          "title": "7.1. Sicherheit und Plattformzugang",
-          "content": "DINUM verpflichtet sich, Visio zu sichern, insbesondere durch alle notwendigen Maßnahmen zur Gewährleistung der Sicherheit und Vertraulichkeit der bereitgestellten Informationen.",
+          "title": "7.1. Verfügbarkeitsniveau",
           "paragraphs": [
-            "DINUM verpflichtet sich, die notwendigen und angemessenen Mittel bereitzustellen, um einen kontinuierlichen Zugang zu Visio zu gewährleisten.",
-            "DINUM behält sich das Recht vor, den Dienst aus Wartungsgründen oder aus anderen als notwendig erachteten Gründen ohne Vorankündigung zu ändern, zu modifizieren oder auszusetzen.",
-            "DINUM behält sich das Recht vor, ein Nutzerkonto des Dienstes zu sperren oder zu löschen, das gegen diese Nutzungsbedingungen verstoßen hat, unbeschadet etwaiger strafrechtlicher und zivilrechtlicher Maßnahmen, die gegen den Nutzer ergriffen werden könnten."
+            "Der Dienst ist 24/7 verfügbar, vorbehaltlich Wartungszeiten.",
+            "DINUM verfolgt ein jährliches Verfügbarkeitsziel von 99,5 % (ohne geplante Ausfälle). Bei einem Vorfall oder einer Wartung strebt sie eine Wiederherstellungszeit von 72 Stunden außerhalb der Geschäftszeiten an.",
+            "Im Rahmen der Wartung der Ausführungsumgebung des Dienstes behält sich DINUM das Recht vor, den Betrieb des Dienstes vorübergehend auszusetzen. Sie informiert die Nutzer mindestens 48 Stunden im Voraus. In dringenden Fällen kann diese Aussetzung ohne Vorankündigung erfolgen.",
+            "Diese außergewöhnlichen Stillstände können beispielsweise für Maßnahmen zur Datenverwaltung im Back Office, Produktionsbereitstellungen oder Architekturänderungen erforderlich sein.",
+            "Eine Nichtverfügbarkeit des Dienstes begründet keinerlei Anspruch auf Entschädigung."
           ]
         },
         "section2": {
-          "title": "7.2. Open Source und Lizenzen",
-          "content": "Der Quellcode von Visio ist frei und hier verfügbar: https://github.com/suitenumerique/meet\nDie von DINUM angebotenen Inhalte stehen unter einer Open License, mit Ausnahme von Logos sowie ikonografischen und fotografischen Darstellungen, die möglicherweise eigenen Lizenzen unterliegen."
+          "title": "7.2. Sicherheit des Dienstes",
+          "paragraphs": [
+            "DINUM ergreift alle erforderlichen Vorsichtsmaßnahmen, um die Sicherheit der Plattform und der im Rahmen des Dienstes eingesetzten Werkzeuge zu gewährleisten, insbesondere in Bezug auf den Zugang zum Dienst, die Verwaltung der Nutzerkonten und die Verarbeitung der erhobenen Daten."
+          ]
+        },
+        "section3": {
+          "title": "7.3. Support-Management",
+          "paragraphs": [
+            "DINUM leistet First-Level-Support für die Nutzer, ausschließlich zu den technischen Teilen des Dienstes.",
+            "Dieser Support ist über unser Online-Kontaktformular erreichbar.",
+            "Die angestrebte Antwortzeit auf Anfragen beträgt zwei Werktage ab Absenden; dieser Zeitraum kann je nach Komplexität und Anzahl der zu bearbeitenden Anfragen variieren."
+          ]
+        },
+        "section4": {
+          "title": "7.4. Kontrolle der Dienstenutzung",
+          "paragraphs": [
+            "DINUM behält sich das Recht vor, ein Agentenkonto zu sperren oder zu löschen, das gegen diese Nutzungsbedingungen verstoßen hat, unbeschadet etwaiger straf- und zivilrechtlicher Maßnahmen gegen den betreffenden Agenten.",
+            "Die Sperrung oder Aufhebung eines oder mehrerer Konten begründet keinen Anspruch auf irgendeine Entschädigung."
+          ]
+        },
+        "section5": {
+          "title": "7.5. Open Source und Lizenzen",
+          "content": "Der Quellcode des Dienstes ist frei und hier verfügbar: https://github.com/suitenumerique/meet. Die von DINUM angebotenen Inhalte stehen unter einer Open License, mit Ausnahme von Logos sowie ikonografischen und fotografischen Darstellungen, die möglicherweise eigenen Lizenzen unterliegen."
         }
       }
     },

src/frontend/src/locales/en/global.json

@@ -6,7 +6,7 @@
     "heading": "An error occurred while loading the page"
   },
   "feedback": {
-    "context": "Product under development — your input matters!",
+    "context": "Your feedback shapes the product!",
     "cta": "Share your feedback - new tab"
   },
   "forbidden": {