Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions AGENTS.md
Original file line number Diff line number Diff line change
Expand Up @@ -290,6 +290,7 @@ Repo-specific design rules:
- Treat every file under `new-design/` as a static design/prototype reference only. Production UI must be implemented as Blazor components in `src/PrompterLive.Shared`; do not ship raw `new-design` HTML as runtime UI.
- Do not re-invent the UI when the answer should be “port the markup and classes from `new-design`”.
- For parity tasks, port the full routed screen from its matching `new-design/*.html` reference, not just isolated high-signal blocks. Settings, Editor, Learn, Teleprompter, and Go Live must match the reference screen in layout and intended interaction while staying Blazor/C# owned.
- About content must stay factual and current: do not invent team members or contributor names; use Managed Code attribution and official company links only.
- Do not introduce a server host for the app runtime.
- Preserve stable `data-testid` selectors on core flows because the Playwright suite depends on them.
- Keep UI routes in shared route constants and keep `data-testid` names in shared UI contract constants.
Expand Down Expand Up @@ -320,6 +321,7 @@ Repo-specific design rules:
- Never introduce a non-SOLID design unless the exception is explicitly documented under `exception_policy`.
- Never force-push to `main`.
- Never approve or merge on behalf of a human maintainer.
- When the task explicitly needs delivery, the agent may commit, push to `main` or a feature branch, open a PR, and merge it after the required tests and validation commands pass.
Copy link

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new rule "the agent may ... push to main ... and merge it" conflicts with the preceding rule "Never approve or merge on behalf of a human maintainer." Please clarify the intent and remove or reword one of these so the guidance is internally consistent (and avoid encouraging direct pushes/merges to main if that’s not actually allowed).

Suggested change
- When the task explicitly needs delivery, the agent may commit, push to `main` or a feature branch, open a PR, and merge it after the required tests and validation commands pass.
- When the task explicitly needs delivery, the agent may commit, push to a feature branch, and open a PR after the required tests and validation commands pass; a human maintainer must perform final approval and merge.

Copilot uses AI. Check for mistakes.

### Boundaries

Expand Down Expand Up @@ -352,7 +354,9 @@ Ask first:
- brittle selectors without `data-testid`
- mixed-language root README or public entry docs; keep them English-only unless the user explicitly asks otherwise
- design drift from `new-design`
- made-up About/team content or stale attribution; About must point to real Managed Code ownership and official links
- any visible typing latency in the editor; plain input must feel immediate with no observable delay
- teleprompter controls that fade so much they become hard to see during real reading
- editor keystroke paths that persist, compile, or rebuild shared session state; keep plain typing in memory and move heavier local sync to debounce or autosave
- murky JavaScript or interop layers that keep product UI behavior in JS when Blazor can own it cleanly
- runtime dependencies fetched from random external sources instead of vendored release artifacts
Expand Down
154 changes: 154 additions & 0 deletions about-teleprompter-fidelity.plan.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
# About And Teleprompter Fidelity Plan

## Task Goal

Remove invented hardcoded About content, replace it with factual Managed Code attribution and official links, then bring the teleprompter reading experience in line with `new-design/teleprompter.html` and the TPS specification so playback is visually smooth, timing-aware, and fully covered by automated tests.

## Scope

### In Scope

- Update the Settings About section so it no longer shows invented people and instead shows factual Managed Code ownership plus official links, including GitHub.
- Tighten teleprompter rendering and playback so active reading does not visibly jump while words/cards advance.
- Make teleprompter controls materially more visible during use while staying aligned with the design direction.
- Extend teleprompter rendering to reflect the TPS cues already produced by the compiler, including color, emotion, highlight, pronunciation cues, and speed-sensitive visual spacing.
- Add or update bUnit and Playwright coverage for About and teleprompter fidelity, including at least one end-to-end teleprompter scenario.
- Run build and relevant verification, then format, commit, and push.

### Out Of Scope

- Changing TPS parsing rules in `PrompterLive.Core` unless a concrete renderer gap requires a narrowly scoped compatibility fix.
- Redesigning routes or app shell behavior outside Settings/About and Teleprompter.
- Adding a backend or changing runtime hosting shape.

## Constraints And Risks

- `new-design/teleprompter.html` remains the visual reference; parity work should preserve its structure and interaction tone.
- Browser UI tests are the primary acceptance gate; teleprompter changes are not done until real-browser checks pass.
- The UI suite must run in a single `dotnet test` process and not overlap with other build/test commands.
- `About` must stay factual: no invented team members or stale attribution.
- Teleprompter smoothing must not create delayed input, unreadable word spacing, or layout churn from width-changing state changes.
- Files should stay within maintainability limits; if teleprompter logic needs more space, split it into focused partials/helpers instead of growing a large file further.

## Testing Methodology

- Use bUnit to verify About content contracts and teleprompter rendered markup/state mappings for TPS styling classes and metadata-driven output.
- Use Playwright UI tests to verify real browser playback, focal alignment, control visibility, timing continuity, and a full teleprompter scenario with screenshots under `output/playwright/`.
- Validate both static fidelity and dynamic behavior:
- About shows factual Managed Code attribution and official links.
- Teleprompter words preserve TPS-driven styling and pacing hints.
- Playback advances without vertical jump artifacts on active text.
- Card transitions stay smooth and time/progress continue advancing.
- Controls remain visibly usable against live camera/gradient backgrounds.
- Quality bar:
- No teleprompter regression in relevant bUnit coverage.
- Relevant Playwright teleprompter flows green.
- Repo build green under `-warnaserror`.

## Ordered Plan

- [x] Step 1. Establish baseline context and failures.
- Read the exact About and teleprompter implementation/test files that own this work.
- Run the relevant baseline commands in order:
- `dotnet build /Users/ksemenenko/Developer/PrompterLive/PrompterLive.slnx -warnaserror`
- `dotnet test /Users/ksemenenko/Developer/PrompterLive/tests/PrompterLive.App.Tests/PrompterLive.App.Tests.csproj`
- `dotnet test /Users/ksemenenko/Developer/PrompterLive/tests/PrompterLive.App.UITests/PrompterLive.App.UITests.csproj --no-build`
- Verification before moving on:
- Record every failing test and symptom below.
- Confirm whether teleprompter failures reproduce before code changes.

- [x] Step 2. Replace hardcoded About content with factual Managed Code metadata.
- Update `src/PrompterLive.Shared/Settings/Components/SettingsAboutSection.razor` and its code-behind to remove invented people and add factual company attribution plus official links, including GitHub.
- Keep the section visually aligned with Settings design patterns and preserve existing test ids or add stable new ones if needed.
- Verification before moving on:
- Add/update bUnit assertions in `tests/PrompterLive.App.Tests/Settings/SettingsInteractionTests.cs`.
- Confirm no stale invented names remain via targeted search.

- [x] Step 3. Expand teleprompter word rendering to honor TPS visual cues.
- Update teleprompter reader models/rendering so words expose the cues already emitted by `ScriptCompiler`, including stronger distinctions for emphasis/highlight, pronunciation/tooltips, emotion/color mappings, and speed-sensitive spacing.
- Keep speed-based letter spacing bounded so words never become mush or split into visually disconnected letters.
- Verification before moving on:
- Add/update bUnit tests under `tests/PrompterLive.App.Tests/Teleprompter/`.
- Use TPS-backed sample scripts to prove slow/fast/xslow/xfast, highlight, pronunciation, and emotion styling render as expected.

- [x] Step 4. Remove teleprompter playback jumpiness and align transitions with the design.
- Refine reader alignment/transition logic and any supporting browser interop so active-word tracking and card transitions stay smooth during playback.
- Match the intended movement profile from `new-design/teleprompter.html` while avoiding text jumps during per-word advancement.
- Verification before moving on:
- Add/update Playwright assertions for continuity and alignment.
- Capture a teleprompter scenario screenshot artifact under `output/playwright/`.

- [x] Step 5. Make teleprompter controls visibly usable.
- Update the relevant reader CSS modules so sliders, edge info, and control bar stay visible enough against the background instead of fading into near-invisibility.
- Keep the visual language aligned with the design reference while improving usability.
- Verification before moving on:
- Add/update browser checks that confirm control opacity/visibility at runtime.

- [x] Step 6. Add a full teleprompter browser scenario.
- Add or extend a real Playwright scenario that opens a TPS-backed teleprompter script, starts playback, verifies styling/timing/progress/controls, and saves screenshots.
- Verification before moving on:
- Scenario passes in the browser suite.
- Screenshot artifacts are written under `output/playwright/`.

- [x] Step 7. Run final validation and ship.
- Run the required verification in order:
- `dotnet build /Users/ksemenenko/Developer/PrompterLive/PrompterLive.slnx -warnaserror`
- `dotnet test /Users/ksemenenko/Developer/PrompterLive/tests/PrompterLive.App.Tests/PrompterLive.App.Tests.csproj`
- `dotnet test /Users/ksemenenko/Developer/PrompterLive/tests/PrompterLive.App.UITests/PrompterLive.App.UITests.csproj --no-build`
- `dotnet test /Users/ksemenenko/Developer/PrompterLive/PrompterLive.slnx`
- `dotnet format /Users/ksemenenko/Developer/PrompterLive/PrompterLive.slnx`
- If green, commit with a focused message and push the current branch.
- Verification before moving on:
- All planned checklist items are complete.
- Working tree is clean except for intentional artifacts, if any.

## Baseline Failures

- [x] No pre-existing baseline failures in the relevant build, bUnit, or UI suites.
- Build: `dotnet build /Users/ksemenenko/Developer/PrompterLive/PrompterLive.slnx -warnaserror` passed.
- bUnit: `dotnet test /Users/ksemenenko/Developer/PrompterLive/tests/PrompterLive.App.Tests/PrompterLive.App.Tests.csproj` passed with `94/94`.
- UI: `dotnet test /Users/ksemenenko/Developer/PrompterLive/tests/PrompterLive.App.UITests/PrompterLive.App.UITests.csproj --no-build` passed with `75/75`.
- Root-cause note: current repo baseline is green; this task will add targeted regression coverage for the requested About and teleprompter behavior.
- Fix status: no inherited failures to clear before implementation.

## Intended Fix Tracking

- [x] About invented team content removed and replaced with factual Managed Code attribution.
- [x] Teleprompter TPS styling parity expanded beyond the current reduced class mapping.
- [x] Teleprompter playback jumpiness eliminated or reduced to non-visible smooth motion.
- [x] Teleprompter controls made clearly visible during live use.
- [x] Full teleprompter browser scenario added or extended with screenshot artifacts.

## Final Validation Skills

- `dotnet`
- Reason: enforce repo-compatible build, test, and format commands for this Blazor/.NET solution.
- Expected outcome: green build/test/format evidence aligned with `AGENTS.md`.

- `playwright`
- Reason: validate teleprompter behavior in a real browser and capture screenshot artifacts for the changed flow.
- Expected outcome: passing teleprompter scenario coverage with browser-realistic evidence.

## Final Validation Results

- `dotnet build /Users/ksemenenko/Developer/PrompterLive/PrompterLive.slnx -warnaserror`
- Result: passed after implementation and again after formatting.
- `dotnet test /Users/ksemenenko/Developer/PrompterLive/tests/PrompterLive.Core.Tests/PrompterLive.Core.Tests.csproj`
- Result: passed with `34/34`.
- `dotnet test /Users/ksemenenko/Developer/PrompterLive/tests/PrompterLive.App.Tests/PrompterLive.App.Tests.csproj`
- Result: passed with `95/95`.
- `dotnet test /Users/ksemenenko/Developer/PrompterLive/tests/PrompterLive.App.UITests/PrompterLive.App.UITests.csproj --no-build`
- Result: passed with `76/76`.
- `dotnet test /Users/ksemenenko/Developer/PrompterLive/PrompterLive.slnx`
- Result: passed for the full solution.
- `dotnet test /Users/ksemenenko/Developer/PrompterLive/PrompterLive.slnx --collect:"XPlat Code Coverage"`
- Result: passed for the full solution with coverage artifacts emitted for Core, App, and UI suites.
- `dotnet format /Users/ksemenenko/Developer/PrompterLive/PrompterLive.slnx`
- Result: passed.

## Notes

- `About` now uses only Managed Code and PrompterLive official links and removes invented roster content from both production UI and the design reference.
- Teleprompter playback now pre-centers upcoming content before card activation to avoid visible jump on live reading transitions.
- TPS shorthand inline speed tags like `[180WPM]...[/180WPM]` are now preserved by the compiler so reader timing matches TPS input.
- End-to-end browser evidence includes the teleprompter full-flow screenshots under `output/playwright/teleprompter-product-launch/`.
4 changes: 3 additions & 1 deletion docs/Features/AppVersioningAndGitHubPages.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ This flow keeps the version number automated:
- local builds default to `0.1.0`
- release builds derive `0.1.<run_number>` from the active release workflow run
- the About screen reads the compiled assembly metadata instead of hardcoded copy
- the About screen links only to official Managed Code and `managedcode/PrompterLive` resources; it must never invent a team roster

## Version And Deploy Flow

Expand Down Expand Up @@ -44,7 +45,7 @@ flowchart LR
- `PrompterLiveBuildNumber` comes from `GITHUB_RUN_NUMBER` when CI provides it, or falls back to `0` locally.
- `.github/workflows/deploy-github-pages.yml` resolves the release version from `VersionPrefix`, so the release tag and the compiled app version stay aligned.
- `Program.cs` creates `IAppVersionProvider` from the compiled `PrompterLive.App` assembly metadata.
- `SettingsAboutSection` renders that provider value in the About card subtitle.
- `SettingsAboutSection` renders that provider value in the About card subtitle and pairs it with official Managed Code, GitHub, releases, and issues links.

## GitHub Pages Rules

Expand All @@ -65,6 +66,7 @@ flowchart LR
- `.github/workflows/pr-validation.yml` runs `dotnet test tests/PrompterLive.App.Tests/PrompterLive.App.Tests.csproj --no-build`
- `.github/workflows/pr-validation.yml` runs `dotnet test tests/PrompterLive.App.UITests/PrompterLive.App.UITests.csproj --no-build`
- `dotnet test /Users/ksemenenko/Developer/PrompterLive/tests/PrompterLive.App.Tests/PrompterLive.App.Tests.csproj --filter "FullyQualifiedName~SettingsInteractionTests.AboutSection_RendersInjectedAppVersionMetadata"`
- `dotnet test /Users/ksemenenko/Developer/PrompterLive/tests/PrompterLive.App.Tests/PrompterLive.App.Tests.csproj --filter "FullyQualifiedName~SettingsInteractionTests.AboutSection_RendersInjectedAppVersionMetadata_AndOfficialManagedCodeLinks"`
- `dotnet test /Users/ksemenenko/Developer/PrompterLive/tests/PrompterLive.App.UITests/PrompterLive.App.UITests.csproj --filter "FullyQualifiedName~TeleprompterSettingsFlowTests.TeleprompterAndSettingsScreens_RespondToCoreControls"`
Comment on lines 68 to 70
Copy link

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doc adds another command that uses an absolute local filesystem path (/Users/...). For portability/reproducibility, prefer the repo-relative command form used elsewhere in this section (e.g., dotnet test tests/... --filter ...) so the instructions work on any machine/OS.

Suggested change
- `dotnet test /Users/ksemenenko/Developer/PrompterLive/tests/PrompterLive.App.Tests/PrompterLive.App.Tests.csproj --filter "FullyQualifiedName~SettingsInteractionTests.AboutSection_RendersInjectedAppVersionMetadata"`
- `dotnet test /Users/ksemenenko/Developer/PrompterLive/tests/PrompterLive.App.Tests/PrompterLive.App.Tests.csproj --filter "FullyQualifiedName~SettingsInteractionTests.AboutSection_RendersInjectedAppVersionMetadata_AndOfficialManagedCodeLinks"`
- `dotnet test /Users/ksemenenko/Developer/PrompterLive/tests/PrompterLive.App.UITests/PrompterLive.App.UITests.csproj --filter "FullyQualifiedName~TeleprompterSettingsFlowTests.TeleprompterAndSettingsScreens_RespondToCoreControls"`
- `dotnet test tests/PrompterLive.App.Tests/PrompterLive.App.Tests.csproj --filter "FullyQualifiedName~SettingsInteractionTests.AboutSection_RendersInjectedAppVersionMetadata"`
- `dotnet test tests/PrompterLive.App.Tests/PrompterLive.App.Tests.csproj --filter "FullyQualifiedName~SettingsInteractionTests.AboutSection_RendersInjectedAppVersionMetadata_AndOfficialManagedCodeLinks"`
- `dotnet test tests/PrompterLive.App.UITests/PrompterLive.App.UITests.csproj --filter "FullyQualifiedName~TeleprompterSettingsFlowTests.TeleprompterAndSettingsScreens_RespondToCoreControls"`

Copilot uses AI. Check for mistakes.
- `.github/workflows/deploy-github-pages.yml` publish step passes `-p:PrompterLiveBuildNumber=${{ github.run_number }}`
- `.github/workflows/deploy-github-pages.yml` publishes both the GitHub Release asset and the GitHub Pages artifact from the same release build output
9 changes: 9 additions & 0 deletions docs/Features/ReaderRuntime.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ The important contracts are:
- RSVP keeps a five-word context rail on each side, matching `new-design/app.js`.
- Teleprompter camera stays behind the text as one background layer.
- Teleprompter word groups stay short enough to avoid run-on lines.
- Teleprompter preserves TPS word presentation details such as pronunciation guides, inline colors, emotion styling, and speed-derived spacing/timing.
- Teleprompter pre-centers the next card before it slides in, so block transitions do not jump at the focal line.
- Teleprompter controls stay readable at rest; they must not fade until they become unusable.

## Flow

Expand Down Expand Up @@ -38,11 +41,17 @@ flowchart LR
- `teleprompter` selects one primary camera device for `#rd-camera`.
- `teleprompter` does not render overlay camera elements such as `#rd-camera-overlay-*`.
- `teleprompter` groups words by pauses, sentence endings, clause endings, and short phrase limits.
- `teleprompter` forwards TPS pronunciation metadata to word-level `title` / `data-pronunciation` attributes.
- `teleprompter` derives word-level pacing from the compiled TPS duration and carries effective WPM into the DOM for testable parity.
- `teleprompter` keeps TPS inline colors visible even when a phrase group is active or the active word is highlighted.

## Verification

- bUnit verifies teleprompter background-camera markup and readable phrase groups.
- bUnit verifies product-launch TPS modifiers survive into teleprompter word markup, timing, and pronunciation metadata.
- Core tests verify TPS scripts generate RSVP phrase groups.
- Core tests verify shorthand inline WPM scopes such as `[180WPM]...[/180WPM]` survive nested tags.
- Playwright verifies ORP centering and the `security-incident` phrase-aware flow in `learn`.
- Playwright verifies there is no teleprompter overlay camera box and that phrase groups do not overflow.
- Playwright verifies the teleprompter camera button attaches and detaches a real synthetic `MediaStream` on the background video layer.
- Playwright verifies the full `Product Launch` teleprompter scenario, including visible controls, TPS formatting parity, screenshot artifacts, and aligned post-transition playback.
Loading
Loading