Fix browser UI validation regressions

Author: KSemenenko

AGENTS.md

@@ -310,6 +310,7 @@ Repo-specific design rules:
 - Teleprompter speed styling MUST produce a visible but tasteful letter-spacing or kerning change: slower text opens up slightly and faster text tightens slightly, not a no-op.
 - Teleprompter reader word styling MUST mirror TPS/editor inline semantics: explicit inline TPS tags control per-word emphasis and color, while section or block emotion sets card context and must not recolor every reader word.
 - Teleprompter underline or highlight treatments that span a phrase or block MUST render as one continuous block-level treatment; separate per-word underlines inside the same phrase are forbidden.
+- Teleprompter read-state styling MUST mute phrase-level underline or highlight accents once the emphasized text has been read; bright lingering underline accents on already-read text are forbidden.
 - Teleprompter reader text MUST appear on the focal guide immediately when a word or block becomes active; visible post-appearance drift or settling onto the guide is forbidden.
 - Teleprompter route styles MUST be present on the first paint; a flash of unstyled or late-styled reader UI during route entry is a regression.
 - Teleprompter block transitions MUST stay visually consistent: outgoing cards move upward and incoming cards rise from below in the same direction every time; alternating up/down travel is forbidden, and extra settling, bounce, or intermediate card states are forbidden.

src/PrompterOne.Shared/AppShell/Services/AppBootstrapper.cs

@@ -71,8 +71,15 @@ public async Task EnsureReadyAsync(CancellationToken cancellationToken = default
             var mediaScene = await _settingsStore.LoadAsync<MediaSceneState>(BrowserAppSettingsKeys.SceneSettings, cancellationToken);
             if (mediaScene is not null)
             {
+                var (normalizedMediaScene, mediaSceneChanged) = NormalizeMediaScene(mediaScene);
+                if (mediaSceneChanged)
+                {
+                    _logger.LogInformation("Normalizing media scene labels from browser storage.");
+                    await _settingsStore.SaveAsync(BrowserAppSettingsKeys.SceneSettings, normalizedMediaScene, cancellationToken);
+                }
+
                 _logger.LogInformation("Restoring media scene from browser storage.");
-                _mediaSceneService.ApplyState(mediaScene);
+                _mediaSceneService.ApplyState(normalizedMediaScene);
             }
 
             _initialized = true;
@@ -107,4 +114,67 @@ private static int NormalizeLearnWordsPerMinute(int wordsPerMinute, bool migrate
 
         return wordsPerMinute;
     }
+
+    private static (MediaSceneState State, bool Changed) NormalizeMediaScene(MediaSceneState state)
+    {
+        var changed = false;
+        var normalizedCameras = state.Cameras
+            .Select(camera =>
+            {
+                var normalizedLabel = MediaDeviceLabelSanitizer.Sanitize(camera.Label);
+                if (string.Equals(normalizedLabel, camera.Label, StringComparison.Ordinal))
+                {
+                    return camera;
+                }
+
+                changed = true;
+                return camera with { Label = normalizedLabel };
+            })
+            .ToList();
+
+        var normalizedPrimaryMicrophoneLabel = NormalizeOptionalLabel(state.PrimaryMicrophoneLabel, ref changed);
+        var normalizedAudioInputs = state.AudioBus.Inputs
+            .Select(input =>
+            {
+                var normalizedLabel = MediaDeviceLabelSanitizer.Sanitize(input.Label);
+                if (string.Equals(normalizedLabel, input.Label, StringComparison.Ordinal))
+                {
+                    return input;
+                }
+
+                changed = true;
+                return input with { Label = normalizedLabel };
+            })
+            .ToList();
+
+        if (!changed)
+        {
+            return (state, false);
+        }
+
+        return (
+            state with
+            {
+                Cameras = normalizedCameras,
+                PrimaryMicrophoneLabel = normalizedPrimaryMicrophoneLabel,
+                AudioBus = state.AudioBus with { Inputs = normalizedAudioInputs }
+            },
+            true);
+    }
+
+    private static string? NormalizeOptionalLabel(string? value, ref bool changed)
+    {
+        if (value is null)
+        {
+            return null;
+        }
+
+        var normalized = MediaDeviceLabelSanitizer.Sanitize(value);
+        if (!string.Equals(normalized, value, StringComparison.Ordinal))
+        {
+            changed = true;
+        }
+
+        return normalized;
+    }
 }

src/PrompterOne.Shared/GoLive/Components/GoLiveCameraPreviewCard.razor

@@ -1,4 +1,5 @@
 @namespace PrompterOne.Shared.Components.GoLive
+@using PrompterOne.Shared.Services
 
 <section id="@UiDomIds.GoLive.PreviewCard"
          class="gl-preview-section"
@@ -14,7 +15,7 @@
                 <div class="gl-preview-overlay">
                     <div class="gl-preview-caption">
                         <span class="gl-preview-label">@Title</span>
-                        <strong data-testid="@UiTestIds.GoLive.PreviewSourceLabel">@Camera?.Label</strong>
+                        <strong data-testid="@UiTestIds.GoLive.PreviewSourceLabel">@CameraLabel</strong>
                     </div>
                 </div>
             </OverlayContent>
@@ -53,6 +54,7 @@
     [Parameter] public string Title { get; set; } = DefaultTitle;
 
     private bool HasCamera => Camera is not null;
+    private string CameraLabel => Camera is null ? string.Empty : MediaDeviceLabelSanitizer.Sanitize(Camera.Label);
 
     private string PreviewIndicatorState => ShowLiveDot
         ? LiveState

src/PrompterOne.Shared/GoLive/Components/GoLiveDestinationSourcePicker.razor

@@ -1,4 +1,5 @@
 @namespace PrompterOne.Shared.Components.GoLive
+@using PrompterOne.Shared.Services
 
 <section class="live-destination-sources" data-testid="@UiTestIds.GoLive.ProviderSourcePicker(TargetId)">
     <div class="live-destination-sources-header">
@@ -26,7 +27,7 @@
                         class="live-destination-source-chip @(isSelected ? ChipEnabledCssClass : null)"
                         data-testid="@UiTestIds.GoLive.ProviderSourceToggle(TargetId, source.SourceId)"
                         @onclick="() => ToggleSource.InvokeAsync(source.SourceId)">
-                    <span class="live-destination-source-name">@source.Label</span>
+                    <span class="live-destination-source-name">@FormatSourceLabel(source)</span>
                     <span class="live-destination-source-state">@(isSelected ? SelectedLabel : AvailableLabel)</span>
                 </button>
             }
@@ -57,6 +58,7 @@
     private int SelectedCount => SelectedSourceIdSet.Count;
 
     private HashSet<string> SelectedSourceIdSet => SelectedSourceIds.ToHashSet(StringComparer.Ordinal);
+    private static string FormatSourceLabel(SceneCameraSource source) => MediaDeviceLabelSanitizer.Sanitize(source.Label);
 
     private string SourceSummary =>
         SelectedCount switch

src/PrompterOne.Shared/GoLive/Components/GoLiveSourcesCard.razor

@@ -1,4 +1,5 @@
 @namespace PrompterOne.Shared.Components.GoLive
+@using PrompterOne.Shared.Services
 
 <section class="gl-sources-panel">
     <div class="gl-sources-header">
@@ -50,7 +51,7 @@
 
                         <div class="gl-cam-meta">
                             <div class="gl-cam-top">
-                                <span class="gl-cam-name">@source.Label</span>
+                                <span class="gl-cam-name">@FormatSourceLabel(source)</span>
                                 <span class="gl-cam-hw">@GetSourceStatus(source)</span>
                             </div>
                         </div>
@@ -85,7 +86,7 @@
 
     <div class="gl-mic-card">
         <span class="section-label">@MicrophoneTitle</span>
-        <strong>@MicrophoneName</strong>
+        <strong>@DisplayMicrophoneName</strong>
         <span>@MicrophoneRouteLabel</span>
     </div>
 </section>
@@ -117,6 +118,8 @@
     [Parameter] public string Title { get; set; } = DefaultTitle;
     [Parameter] public EventCallback<string> ToggleSource { get; set; }
     [Parameter] public IReadOnlyList<GoLiveUtilitySourceViewModel> UtilitySources { get; set; } = [];
+    private string DisplayMicrophoneName => MediaDeviceLabelSanitizer.Sanitize(MicrophoneName);
+    private static string FormatSourceLabel(SceneCameraSource source) => MediaDeviceLabelSanitizer.Sanitize(source.Label);
 
     private bool IsActive(SceneCameraSource source) =>
         string.Equals(source.SourceId, ActiveSourceId, StringComparison.Ordinal);

src/PrompterOne.Shared/GoLive/Pages/GoLivePage.Session.cs

@@ -2,6 +2,7 @@
 using PrompterOne.Core.Models.Media;
 using PrompterOne.Core.Models.Workspace;
 using PrompterOne.Shared.GoLive.Models;
+using PrompterOne.Shared.Services;
 
 namespace PrompterOne.Shared.Pages;
 
@@ -21,7 +22,9 @@ public partial class GoLivePage
         _ => GoLiveText.Session.SessionIdleLabel
     };
 
-    private string ActiveSourceLabel => ActiveCamera?.Label ?? GoLiveText.Session.CameraFallbackLabel;
+    private string ActiveSourceLabel => ActiveCamera is null
+        ? GoLiveText.Session.CameraFallbackLabel
+        : MediaDeviceLabelSanitizer.Sanitize(ActiveCamera.Label);
 
     private bool CanControlProgram => SelectedCamera is not null;
 
@@ -58,7 +61,9 @@ public partial class GoLivePage
         _ => SessionBadgeIdleCssClass
     };
 
-    private string SelectedSourceLabel => SelectedCamera?.Label ?? GoLiveText.Session.CameraFallbackLabel;
+    private string SelectedSourceLabel => SelectedCamera is null
+        ? GoLiveText.Session.CameraFallbackLabel
+        : MediaDeviceLabelSanitizer.Sanitize(SelectedCamera.Label);
 
     private SceneCameraSource? SelectedCamera => ResolveSessionSource(GoLiveSession.State.SelectedSourceId) ?? ActiveCamera;
 

src/PrompterOne.Shared/GoLive/Pages/GoLivePage.StudioSurface.cs

@@ -2,6 +2,7 @@
 using PrompterOne.Core.Models.Media;
 using PrompterOne.Shared.Components.GoLive;
 using PrompterOne.Shared.GoLive.Models;
+using PrompterOne.Shared.Services;
 
 namespace PrompterOne.Shared.Pages;
 
@@ -186,8 +187,8 @@ private IReadOnlyList<GoLiveSceneChipViewModel> BuildSceneChips()
         var secondaryCamera = SceneCameras.Count > 1 ? SceneCameras[1] : null;
         var scenes = new List<GoLiveSceneChipViewModel>
         {
-            new(GoLiveText.Surface.PrimarySceneId, primaryCamera?.Label ?? GoLiveText.Session.CameraFallbackLabel, GoLiveSceneChipKind.Camera, primaryCamera?.SourceId),
-            new(GoLiveText.Surface.SecondarySceneId, secondaryCamera?.Label ?? GoLiveText.Surface.InterviewSceneFallback, GoLiveSceneChipKind.Split, secondaryCamera?.SourceId),
+            new(GoLiveText.Surface.PrimarySceneId, primaryCamera is null ? GoLiveText.Session.CameraFallbackLabel : MediaDeviceLabelSanitizer.Sanitize(primaryCamera.Label), GoLiveSceneChipKind.Camera, primaryCamera?.SourceId),
+            new(GoLiveText.Surface.SecondarySceneId, secondaryCamera is null ? GoLiveText.Surface.InterviewSceneFallback : MediaDeviceLabelSanitizer.Sanitize(secondaryCamera.Label), GoLiveSceneChipKind.Split, secondaryCamera?.SourceId),
             new(GoLiveText.Surface.SceneSlidesId, GoLiveText.Surface.SceneSlidesLabel, GoLiveSceneChipKind.Slides, null),
             new(GoLiveText.Surface.PictureInPictureSceneId, GoLiveText.Surface.PictureInPictureSceneLabel, GoLiveSceneChipKind.PictureInPicture, primaryCamera?.SourceId)
         };

src/PrompterOne.Shared/GoLive/Pages/GoLivePage.razor.cs

@@ -43,7 +43,9 @@ public partial class GoLivePage : ComponentBase
         ?? SceneCameras.FirstOrDefault(camera => camera.Transform.Visible)
         ?? (SceneCameras.Count > 0 ? SceneCameras[0] : null);
 
-    private string PrimaryMicrophoneLabel => MediaSceneService.State.PrimaryMicrophoneLabel ?? GoLiveText.Audio.NoMicrophoneLabel;
+    private string PrimaryMicrophoneLabel => string.IsNullOrWhiteSpace(MediaSceneService.State.PrimaryMicrophoneLabel)
+        ? GoLiveText.Audio.NoMicrophoneLabel
+        : MediaDeviceLabelSanitizer.Sanitize(MediaSceneService.State.PrimaryMicrophoneLabel);
 
     private string BackRoute => Shell.GetGoLiveBackRoute();
 

src/PrompterOne.Shared/Media/Components/CameraPreviewTile.razor

@@ -1,10 +1,11 @@
 @namespace PrompterOne.Shared.Components
 @implements IAsyncDisposable
 @inject CameraPreviewInterop CameraPreviewInterop
+@using PrompterOne.Shared.Services
 
 <div class="camera-stage-tile" style="@TileStyle">
     <video id="@_elementId" class="camera-stage-video" autoplay playsinline muted></video>
-    <div class="camera-stage-label">@Camera.Label</div>
+    <div class="camera-stage-label">@CameraLabel</div>
 </div>
 
 @code {
@@ -13,6 +14,7 @@
 
     private string _elementId = $"camera-{Guid.NewGuid():N}";
     private string? _attachedDeviceId;
+    private string CameraLabel => MediaDeviceLabelSanitizer.Sanitize(Camera.Label);
 
     private string TileStyle
     {

src/PrompterOne.Shared/Media/Services/BrowserMediaDeviceService.cs

@@ -1,4 +1,3 @@
-using System.Text.RegularExpressions;
 using Microsoft.JSInterop;
 using PrompterOne.Core.Abstractions;
 using PrompterOne.Core.Models.Media;
@@ -17,7 +16,7 @@ public async Task<IReadOnlyList<MediaDeviceInfo>> GetDevicesAsync(CancellationTo
 
         return devices.Select(device => new MediaDeviceInfo(
             device.DeviceId,
-            SanitizeLabel(device.Label),
+            MediaDeviceLabelSanitizer.Sanitize(device.Label),
             device.Kind switch
             {
                 "videoinput" => MediaDeviceKind.Camera,
@@ -28,19 +27,5 @@ public async Task<IReadOnlyList<MediaDeviceInfo>> GetDevicesAsync(CancellationTo
             device.IsDefault)).ToList();
     }
 
-    private static string SanitizeLabel(string? rawLabel)
-    {
-        if (string.IsNullOrWhiteSpace(rawLabel))
-        {
-            return string.Empty;
-        }
-
-        var cleaned = VendorIdPattern().Replace(rawLabel, string.Empty).Trim();
-        return string.IsNullOrWhiteSpace(cleaned) ? string.Empty : cleaned;
-    }
-
-    [GeneratedRegex(@"\s*\([0-9a-fA-F]{4}:[0-9a-fA-F]{4}\)")]
-    private static partial Regex VendorIdPattern();
-
     private sealed record BrowserMediaDeviceDto(string DeviceId, string? Label, string Kind, bool IsDefault);
 }