|
| 1 | +# Go Live New Design Parity Plan |
| 2 | + |
| 3 | +## Goal |
| 4 | + |
| 5 | +Bring the routed `Go Live` screen in `src/PrompterOne.Shared` into exact structural and visual parity with `new-design/golive.html`, with special attention to: |
| 6 | + |
| 7 | +- top bar layout and Go Live action placement |
| 8 | +- panel widths and overall studio grid proportions |
| 9 | +- canvas/program monitor sizing |
| 10 | +- right sidebar sizing and composition |
| 11 | +- preserving the existing live-session/runtime behavior while fixing the presentation layer |
| 12 | +- keeping stable `data-testid` contracts and adding coverage for the corrected layout |
| 13 | + |
| 14 | +## Scope |
| 15 | + |
| 16 | +### In Scope |
| 17 | + |
| 18 | +- compare `new-design/golive.html` and `new-design/styles-golive.css` against the routed Blazor `Go Live` surface |
| 19 | +- refactor `GoLivePage` markup and its feature components to match the `gl-*` studio layout from the design reference |
| 20 | +- port or adapt CSS so the runtime page uses the same sizing, spacing, and placement rules as the design |
| 21 | +- preserve current live controls, room flow, source switching, and destination toggles while moving them into the design-faithful structure |
| 22 | +- update `Go Live` docs if the runtime structure description changes materially |
| 23 | +- add or update bUnit and Playwright tests that prove the corrected layout and interaction landmarks |
| 24 | + |
| 25 | +### Out of Scope |
| 26 | + |
| 27 | +- changing streaming providers, browser media composition, or live output runtime behavior unless a layout fix requires a minimal contract adjustment |
| 28 | +- redesigning the `new-design` reference itself |
| 29 | +- adding new `Go Live` product features unrelated to parity with `new-design/golive.html` |
| 30 | + |
| 31 | +## Constraints And Risks |
| 32 | + |
| 33 | +- `new-design/golive.html` is the visual source of truth; approximation is not acceptable. |
| 34 | +- Current `Go Live` runtime behavior already works through existing services; avoid dragging logic into layout components. |
| 35 | +- `data-testid` selectors used by browser tests must remain stable or be updated through shared constants in the same task. |
| 36 | +- The browser suite is the primary acceptance gate and must not run concurrently with another `dotnet build` or `dotnet test`. |
| 37 | +- The current page is split across several components; parity may require moving markup between `GoLivePage` and child components without breaking state flow. |
| 38 | +- The existing feature CSS may conflict with imported `gl-*` layout rules; resolve conflicts explicitly instead of layering ad-hoc overrides. |
| 39 | + |
| 40 | +## Testing Methodology |
| 41 | + |
| 42 | +- First establish a real repo baseline with the required full build and full test suite. |
| 43 | +- Use bUnit to verify structural landmarks and design-faithful layout containers/classes on the routed `Go Live` page. |
| 44 | +- Use Playwright to verify the real browser `Go Live` screen renders the corrected studio shell, panel visibility behavior, and key layout landmarks. |
| 45 | +- Keep assertions tied to stable `data-testid` contracts plus specific design classes where layout fidelity matters. |
| 46 | +- Capture browser screenshot artifacts under `output/playwright/` for the updated major `Go Live` scenario. |
| 47 | +- Finish with the required repo-wide build, test, coverage, and format commands. |
| 48 | + |
| 49 | +## Ordered Implementation Plan |
| 50 | + |
| 51 | +- [x] Step 1. Record the baseline and failure inventory. |
| 52 | + What: run the required repo-wide `build` and `test` commands before changing code. |
| 53 | + Where: solution root. |
| 54 | + Verify: record pass/fail status in this plan; if anything already fails, list each failing test below with symptom, suspected root cause, and fix status before touching production code. |
| 55 | + |
| 56 | +- [x] Step 2. Map the exact design/runtime mismatch. |
| 57 | + What: compare `new-design/golive.html` and `new-design/styles-golive.css` against `src/PrompterOne.Shared/GoLive/Pages/GoLivePage.razor` and feature components/CSS to identify which runtime sections must move to the `gl-*` structure. |
| 58 | + Where: `new-design/`, `src/PrompterOne.Shared/GoLive/Pages/`, `src/PrompterOne.Shared/GoLive/Components/`. |
| 59 | + Verify: capture the target container mapping and the specific layout defects being fixed, then implement against that map instead of patching isolated sizes. |
| 60 | + |
| 61 | +- [x] Step 3. Rebuild the routed `Go Live` page shell on top of the design structure. |
| 62 | + What: update the page-level Razor markup so the top bar, left sources panel, center canvas/program area, scenes/controls bars, and right sidebar match the `gl-*` studio hierarchy and placement from `new-design/golive.html`. |
| 63 | + Where: `src/PrompterOne.Shared/GoLive/Pages/GoLivePage.razor`. |
| 64 | + Verify: bUnit render shows the expected major design landmarks and panel containers; existing live controls still bind to the same actions/state. |
| 65 | + |
| 66 | +- [x] Step 4. Align child components with the design composition. |
| 67 | + What: reshape `GoLiveSourcesCard`, `GoLiveProgramFeedCard`, `GoLiveSceneControls`, `GoLiveCameraPreviewCard`, and `GoLiveStudioSidebar` so their markup fits the design shell without oversized cards or misplaced controls. |
| 68 | + Where: `src/PrompterOne.Shared/GoLive/Components/`. |
| 69 | + Verify: the components render inside the new shell with correct labels, controls, and `data-testid` landmarks preserved or intentionally updated through shared constants. |
| 70 | + |
| 71 | +- [x] Step 5. Port or replace CSS to match the design proportions. |
| 72 | + What: replace the current `go-live-*` layout sizing with design-faithful `gl-*` rules or equivalent adapted CSS, including top bar sizing, three-column grid widths, canvas monitor height, sidebar sizing, and full-program/hide-panel behavior. |
| 73 | + Where: `src/PrompterOne.Shared/GoLive/Pages/GoLivePage.razor.css` and affected component CSS files. |
| 74 | + Verify: the routed page uses the same spatial model as `new-design`; panel collapse states still work and do not distort the program monitor. |
| 75 | + |
| 76 | +- [x] Step 6. Add structural regression coverage in bUnit. |
| 77 | + What: update or add component tests that assert the `Go Live` page renders the design-faithful top bar, studio grid, canvas section, scenes/controls bars, and right rail landmarks. |
| 78 | + Where: `tests/PrompterOne.App.Tests/GoLive/`. |
| 79 | + Verify: focused `PrompterOne.App.Tests` runs green and new assertions fail on the old layout. |
| 80 | + |
| 81 | +- [x] Step 7. Add browser parity coverage and artifact capture. |
| 82 | + What: update or add Playwright coverage that opens `Go Live`, verifies the corrected shell in a real browser, toggles panel visibility, and captures a screenshot artifact for the corrected page. |
| 83 | + Where: `tests/PrompterOne.App.UITests/GoLive/`. |
| 84 | + Verify: focused UI tests pass, screenshot artifacts are written under `output/playwright/`, and the major layout regressions are covered through stable selectors/contracts. |
| 85 | + |
| 86 | +- [x] Step 8. Update durable docs for the corrected studio surface. |
| 87 | + What: refresh feature documentation if the runtime layout description or diagrams need to reflect the design-faithful shell. |
| 88 | + Where: `docs/Features/GoLiveRuntime.md` and related docs only if needed. |
| 89 | + Verify: docs remain accurate, non-duplicative, and diagrams still render. |
| 90 | + |
| 91 | +- [x] Step 9. Run final validation and close the task. |
| 92 | + What: run focused tests first, then required repo-wide validation commands. |
| 93 | + Where: solution root. |
| 94 | + Verify: all commands pass and each checklist item in this plan is complete. |
| 95 | + |
| 96 | +## Baseline Failure Inventory |
| 97 | + |
| 98 | +- [x] Baseline build status recorded |
| 99 | +- [x] Baseline full test status recorded |
| 100 | + |
| 101 | +Baseline results: |
| 102 | + |
| 103 | +- `dotnet build /Users/ksemenenko/Developer/PrompterOne/PrompterOne.slnx -warnaserror` passed with `0` warnings and `0` errors. |
| 104 | +- `dotnet test /Users/ksemenenko/Developer/PrompterOne/PrompterOne.slnx` passed. |
| 105 | + Details: |
| 106 | + `PrompterOne.Core.Tests`: `36` passed. |
| 107 | + `PrompterOne.App.Tests`: `103` passed. |
| 108 | + `PrompterOne.App.UITests`: `84` passed. |
| 109 | + |
| 110 | +Pre-existing failing tests: |
| 111 | + |
| 112 | +- None. Baseline is clean. |
| 113 | + |
| 114 | +## Final Validation Skills And Commands |
| 115 | + |
| 116 | +1. `dotnet-blazor` |
| 117 | + Action: verify the routed Blazor page structure and component ownership stay inside `PrompterOne.Shared` and align with the design reference. |
| 118 | + Outcome required: the final `Go Live` screen uses a coherent Blazor-owned layout rather than ad-hoc CSS patches. |
| 119 | + |
| 120 | +2. `mcaf-testing` |
| 121 | + Action: verify that new or updated automated tests cover the corrected user-visible behavior. |
| 122 | + Outcome required: bUnit and Playwright regressions prove the page structure and browser-visible parity. |
| 123 | + |
| 124 | +3. `dotnet build /Users/ksemenenko/Developer/PrompterOne/PrompterOne.slnx -warnaserror` |
| 125 | + Reason: required repo build gate. |
| 126 | + |
| 127 | +4. `dotnet test /Users/ksemenenko/Developer/PrompterOne/PrompterOne.slnx` |
| 128 | + Reason: required repo full test gate. |
| 129 | + |
| 130 | +5. `dotnet test /Users/ksemenenko/Developer/PrompterOne/PrompterOne.slnx --collect:"XPlat Code Coverage"` |
| 131 | + Reason: required coverage gate and regression gap check. |
| 132 | + |
| 133 | +6. `dotnet format /Users/ksemenenko/Developer/PrompterOne/PrompterOne.slnx` |
| 134 | + Reason: required formatting/analyzer gate. |
| 135 | + |
| 136 | +## Final Validation Results |
| 137 | + |
| 138 | +- Focused `dotnet build /Users/ksemenenko/Developer/PrompterOne/PrompterOne.slnx -warnaserror` passed after the Go Live rewrite. |
| 139 | +- Focused `dotnet test /Users/ksemenenko/Developer/PrompterOne/tests/PrompterOne.App.Tests/PrompterOne.App.Tests.csproj` passed. |
| 140 | +- Focused `dotnet test /Users/ksemenenko/Developer/PrompterOne/tests/PrompterOne.App.UITests/PrompterOne.App.UITests.csproj --no-build` passed, including the new layout parity browser scenario and screenshot artifact capture. |
| 141 | +- Required `dotnet test /Users/ksemenenko/Developer/PrompterOne/PrompterOne.slnx` passed. |
| 142 | +- Required `dotnet test /Users/ksemenenko/Developer/PrompterOne/PrompterOne.slnx --collect:"XPlat Code Coverage"` passed and produced coverage attachments for all three test projects. |
| 143 | +- Required `dotnet format /Users/ksemenenko/Developer/PrompterOne/PrompterOne.slnx` exited successfully and reported the existing `Unable to fix IDE0060. No associated code fix found.` message only. |
0 commit comments