fixes

Author: KSemenenko

AGENTS.md

@@ -89,6 +89,7 @@ Rule format:
 - TPS cue semantics must be visually represented across both the editor and live reader surfaces: emotions, delivery, voice, pace, energy, pauses or breath marks, pronunciation, phonetics, stress, staccato, legato, emphasis, highlight, aside, rhetorical, building, sarcasm, loud, soft, whisper, and related cues need visible affordances that help the user read intent without inspecting raw TPS tags.
 - TPS cue rendering work must start from an explicit design note that maps each supported TPS style to its reader/editor visual treatment, animation, and test expectation before implementation, so the product does not grow one-off cue styling.
 - TPS visual cue work must include end-to-end browser coverage and public README screenshots or screenshot-backed examples so users can see that the editor and prompter render the supported cue taxonomy, not only parse it internally.
+- README TPS cue documentation must show a visual example for every supported cue family and tag treatment, using isolated plain-text reader examples where one word or phrase carries the cue so the visible effect is obvious.
 - User-facing file transfer actions in the shell should use `Import` and `Export` wording instead of `Open Script` and `Save File`, because the app also has its own internal script/workspace structure.
 - File workflows must stay local-first inside PrompterOne: scripts need in-app autosave and an internal change-history path in the browser environment, not only external disk import/export actions.
 - Hotkey work must target PrompterOne’s own browser surfaces and settings inventory only; do not design around OBS commands or claim OBS integration paths that the product does not have.

src/PrompterOne.Shared/wwwroot/design/modules/reader/20-controls.css

@@ -533,14 +533,16 @@
     border-radius: 50%;
     background: var(--gold-12);
 }
-.rd-controls.rd-reading-active .rd-ctrl-play {
-    background: rgba(196,160,96,.09);
+.rd-controls.rd-reading-active .rd-ctrl-play,
+.rd-controls[data-active="true"] .rd-ctrl-play {
+    background: rgba(196,160,96,.08);
 }
 .rd-ctrl-play:hover {
     background: var(--gold-16);
 }
-.rd-controls.rd-reading-active .rd-ctrl-play:hover {
-    background: rgba(196,160,96,.10);
+.rd-controls.rd-reading-active .rd-ctrl-play:hover,
+.rd-controls[data-active="true"] .rd-ctrl-play:hover {
+    background: rgba(196,160,96,.09);
 }
 
 .rd-ctrl-label {

tests/PrompterOne.Web.UITests.Reader/Learn/LearnFidelityTests.cs

@@ -12,6 +12,7 @@ public sealed class LearnFidelityTests(StandaloneAppFixture fixture)
     private readonly record struct ContextGapMeasurement(double LeftGapPx, double RightGapPx);
     private readonly record struct ContextRailClipMeasurement(double LeftClipPx, double RightClipPx);
     private readonly record struct FocusWordSlackMeasurement(double SlackPx);
+    private readonly record struct OrpDeltaMeasurement(double DeltaPx);
     private readonly record struct VisibleContextWordGapMeasurement(double LeftWordGapPx, double RightWordGapPx);
 
     [Test]
@@ -25,16 +26,12 @@ public async Task LearnScreen_KeepsOrpLetterCenteredOnReferenceGuide()
             await Expect(page.GetByTestId(UiTestIds.Learn.Page))
                 .ToBeVisibleAsync(new() { Timeout = BrowserTestConstants.Timing.ExtendedVisibleTimeoutMs });
             await Expect(page.GetByTestId(UiTestIds.Learn.WordOrp)).ToBeVisibleAsync();
-            await WaitForLearnLayoutReadyAsync(page);
-
-            var initialDelta = await MeasureOrpDeltaAsync(page);
+            var initialDelta = (await WaitForLearnLayoutReadyAsync(page)).DeltaPx;
             await Assert.That(initialDelta).IsBetween(0, 6);
 
             await UiInteractionDriver.ClickAndContinueAsync(page.GetByTestId(UiTestIds.Learn.PlayToggle));
             await page.WaitForTimeoutAsync(BrowserTestConstants.Timing.LearnPlaybackDelayMs);
-            await WaitForLearnLayoutReadyAsync(page);
-
-            var playbackDelta = await MeasureOrpDeltaAsync(page);
+            var playbackDelta = (await WaitForLearnLayoutReadyAsync(page)).DeltaPx;
             await Assert.That(playbackDelta).IsBetween(0, 6);
         }
         finally
@@ -345,29 +342,6 @@ await StepUntilWordAsync(
         }
     }
 
-    private static Task<double> MeasureOrpDeltaAsync(Microsoft.Playwright.IPage page) =>
-        page.EvaluateAsync<double>(
-            """
-            ids => {
-                const line = document.querySelector(`[data-test="${ids.line}"]`);
-                const orp = document.querySelector(`[data-test="${ids.orp}"]`);
-                if (!line || !orp) {
-                    return 999;
-                }
-
-                const lineRect = line.getBoundingClientRect();
-                const orpRect = orp.getBoundingClientRect();
-                const lineCenter = lineRect.left + (lineRect.width / 2);
-                const orpCenter = orpRect.left + (orpRect.width / 2);
-                return Math.abs(lineCenter - orpCenter);
-            }
-            """,
-            new
-            {
-                line = UiTestIds.Learn.OrpLine,
-                orp = UiTestIds.Learn.WordOrp
-            });
-
     private static Task<int> CountContextWordsAsync(Microsoft.Playwright.IPage page, string contextTestId) =>
         page.EvaluateAsync<int>(
             """
@@ -411,8 +385,9 @@ private static async Task StepUntilWordAsync(Microsoft.Playwright.IPage page, st
         Assert.Fail("Unexpected execution path.");
     }
 
-    private static Task WaitForLearnLayoutReadyAsync(Microsoft.Playwright.IPage page) =>
-        page.WaitForFunctionAsync(
+    private static async Task<OrpDeltaMeasurement> WaitForLearnLayoutReadyAsync(Microsoft.Playwright.IPage page)
+    {
+        var handle = await page.WaitForFunctionAsync(
             """
             args => {
                 const display = document.querySelector(`[data-test="${args.displayTestId}"]`);
@@ -425,7 +400,9 @@ private static Task WaitForLearnLayoutReadyAsync(Microsoft.Playwright.IPage page
                 const lineRect = line.getBoundingClientRect();
                 const orpRect = orp.getBoundingClientRect();
                 const delta = Math.abs((lineRect.left + (lineRect.width / 2)) - (orpRect.left + (orpRect.width / 2)));
-                return delta <= args.maxOrpDeltaPx;
+                return delta <= args.maxOrpDeltaPx
+                    ? { DeltaPx: delta }
+                    : false;
             }
             """,
             new
@@ -438,6 +415,9 @@ private static Task WaitForLearnLayoutReadyAsync(Microsoft.Playwright.IPage page
                 orpTestId = UiTestIds.Learn.WordOrp
             });
 
+        return await handle.JsonValueAsync<OrpDeltaMeasurement>();
+    }
+
     private static async Task ExpectFocusWordAsync(Microsoft.Playwright.IPage page, string expectedWord)
     {
         await Expect(page.GetByTestId(UiTestIds.Learn.Word))

tests/PrompterOne.Web.UITests.Reader/Reader/ReaderPlaybackTimingTests.cs

@@ -52,7 +52,8 @@ await Expect(playToggle)
             await Assert.That(samples.Select(sample => sample.EffectiveWpm).ToArray()).IsEquivalentTo(TeleprompterEffectiveWpmSequence, CollectionOrdering.Matching);
 
             var timingTolerance = BrowserTestConstants.ReaderTiming.TeleprompterTimingToleranceMs
-                                  + BrowserTestConstants.ReaderTiming.CapturePollIntervalMs * 2;
+                                  + BrowserTestConstants.ReaderTiming.CapturePollIntervalMs
+                                  * BrowserTestConstants.ReaderTiming.CapturePollTimingSlackMultiplier;
 
             for (var sampleIndex = 1; sampleIndex < samples.Length; sampleIndex++)
             {
@@ -377,7 +378,8 @@ private static async Task AssertLearnTimingMatches(
                 : Math.Max(
                     BrowserTestConstants.ReaderTiming.LearnTimingToleranceMs,
                     (int)Math.Ceiling(expectedDelay * BrowserTestConstants.ReaderTiming.LearnTimingToleranceRatio))
-                  + BrowserTestConstants.ReaderTiming.CapturePollIntervalMs * 2;
+                  + BrowserTestConstants.ReaderTiming.CapturePollIntervalMs
+                  * BrowserTestConstants.ReaderTiming.CapturePollTimingSlackMultiplier;
 
             await Assert.That(previousSample.Word).IsEqualTo(expected.Word);
             if (sampleIndex == 1)

tests/PrompterOne.Web.UITests.Studio/GoLive/GoLiveShellSessionFlowTests.cs

@@ -328,6 +328,19 @@ await page.WaitForFunctionAsync(
                 BrowserTestConstants.GoLive.RuntimeSessionId,
                 new() { Timeout = BrowserTestConstants.Timing.ExtendedVisibleTimeoutMs });
 
+            var activeRuntimeState = await page.EvaluateAsync<JsonElement>(
+                BrowserTestConstants.GoLive.GetRuntimeStateScript,
+                BrowserTestConstants.GoLive.RuntimeSessionId);
+            var activeRecordingSizeBytes = activeRuntimeState
+                .GetProperty("recording")
+                .GetProperty("sizeBytes")
+                .GetInt64();
+
+            await page.WaitForFunctionAsync(
+                BrowserTestConstants.GoLive.RecordingRuntimePayloadGrowthScript,
+                new object[] { BrowserTestConstants.GoLive.RuntimeSessionId, activeRecordingSizeBytes },
+                new() { Timeout = BrowserTestConstants.Timing.ExtendedVisibleTimeoutMs });
+
             await UiInteractionDriver.ClickAndContinueAsync(
                 page.GetByTestId(UiTestIds.GoLive.StartRecording),
                 noWaitAfter: true);

tests/PrompterOne.Web.UITests/Support/BrowserTestConstants.ScreenFlows.cs

@@ -442,6 +442,7 @@ public static class TeleprompterFlow
     public static class ReaderTiming
     {
         public const int CapturePollIntervalMs = 20;
+        public const int CapturePollTimingSlackMultiplier = 3;
         public const int BoundaryTransitionSampleIndex = 4;
         public const int LearnTimingToleranceMs = 200;
         public const int LearnStartupTimingToleranceMs = 1800;