[Pages] Add live scaffold status and HTML plan to create-site - #118
Conversation
Priyanshu Agrawal (priyanshu92)
commented
Apr 22, 2026
- New protocol file public/scaffold-status.json polled by the scaffold loader in all four frameworks (React, Vue, Angular, Astro). Lets the agent narrate what it is actually doing in place of the hardcoded "Installing dependencies..." cycle.
- Dismissible "waiting for your input" toast at top-right of the loader, raised before every AskUserQuestion call so a terminal prompt is not missed when the browser loader is full-screen. Dismissal is per-prompt.
- Phase 4 plan approval now renders an HTML implementation plan to docs/create-site-plan.html via the new render-createsite-plan.js script and opens it in the default browser, matching the pattern used by integrate-backend, add-server-logic, and add-cloud-flow.
- Added node:test coverage for the renderer: data file + data-inline modes, missing-keys, overwrite refusal, bad-JSON handling.
- SKILL.md restructured: Live Preview Status Protocol section, Phase 2.1 seed, per-step narration in Phase 5.2, new 4.1-4.7 sub-steps around plan rendering and approval.
- New protocol file public/scaffold-status.json polled by the scaffold loader in all four frameworks (React, Vue, Angular, Astro). Lets the agent narrate what it is actually doing in place of the hardcoded "Installing dependencies..." cycle. - Dismissible "waiting for your input" toast at top-right of the loader, raised before every AskUserQuestion call so a terminal prompt is not missed when the browser loader is full-screen. Dismissal is per-prompt. - Phase 4 plan approval now renders an HTML implementation plan to docs/create-site-plan.html via the new render-createsite-plan.js script and opens it in the default browser, matching the pattern used by integrate-backend, add-server-logic, and add-cloud-flow. - Added node:test coverage for the renderer: data file + data-inline modes, missing-keys, overwrite refusal, bad-JSON handling. - SKILL.md restructured: Live Preview Status Protocol section, Phase 2.1 seed, per-step narration in Phase 5.2, new 4.1-4.7 sub-steps around plan rendering and approval. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Adds a “live scaffold status” protocol to the /create-site scaffold loader (across React/Vue/Angular/Astro) and introduces an HTML implementation plan renderer for Phase 4 so plan approval happens in a browsable document (similar to other Power Pages skills).
Changes:
- Add polling of
public/scaffold-status.jsonto override loader status text and show a dismissible “waiting for your input” banner. - Add
render-createsite-plan.jsplusnode:testcoverage to rendercreate-site-plan.htmlinto<PROJECT_ROOT>/docs/*.html. - Restructure
create-site/SKILL.mdto document the status protocol and the new Phase 4 HTML plan flow.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| plugins/power-pages/skills/create-site/assets/vue/src/pages/Home.vue | Adds scaffold-status polling + input banner UI to Vue loader. |
| plugins/power-pages/skills/create-site/assets/react/src/pages/Home.tsx | Adds scaffold-status polling + input banner UI to React loader. |
| plugins/power-pages/skills/create-site/assets/angular/src/app/pages/home.component.ts | Adds scaffold-status polling + input banner UI to Angular loader. |
| plugins/power-pages/skills/create-site/assets/astro/src/pages/index.astro | Adds scaffold-status polling + input banner UI to Astro loader. |
| plugins/power-pages/skills/create-site/assets/create-site-plan.html | New HTML template for create-site implementation plan rendering. |
| plugins/power-pages/scripts/render-createsite-plan.js | New Node renderer script wired to shared render-template helper. |
| plugins/power-pages/scripts/tests/render-createsite-plan.test.js | New node:test coverage for renderer (inline/file, missing keys, overwrite, bad JSON). |
| plugins/power-pages/skills/create-site/SKILL.md | Documents status protocol + new Phase 4 HTML plan rendering/opening/approval steps. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- SKILL.md Phase 4.4: fix shell mismatch (Start-Process is PowerShell, not Bash). Split the list into Bash (macOS/Linux) and PowerShell (Windows). Addresses Copilot review comment. - create-site-plan.html: move __SUMMARY__ out of raw-HTML injection into a <script type="text/plain"> rawtext container, then copy into .summary-box via textContent at runtime. Prevents stray &, <, > characters in the summary from breaking the markup. Addresses Copilot review comment. - Scaffold loaders (React/Vue/Angular/Astro): fix progress-bar label getting stuck at "Initializing..." once a live message arrived. Moved the phase-label cycling above the liveOverride early-return so it runs independently of the live status message. - Added cache-busting query string to scaffold-status.json fetch as a defensive measure against any intermediary caching. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The spinner area above the progress bar is decorative and keeps cycling the hardcoded "Setting up your workspace..." style phrases. The label *under* the progress bar now reflects the live `message` written to public/scaffold-status.json. - pollStatus() calls updatePhaseLabel(data.message) instead of renderStatusMessage(data.message). - showStatus() inverted: always renders the decorative spinner message, but only updates the phase label when no live override. - When live override clears (no message, or fetch fails), phase label is immediately restored to the current cycling position instead of staying stuck on the last message. - SKILL.md protocol description updated to reflect the new slot. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…tion - create-site-plan.html: moved every __*_DATA__ placeholder into its own <script id="..." type="application/json"> container and read them at runtime via JSON.parse. Inert MIME type keeps data out of the script execution context. - scripts/lib/render-template.js: JSON-serialized values now escape "<" as "<" so a literal "</script>" inside any string cannot close the containing <script> tag. JSON.parse decodes back transparently at runtime. Benefits every plan template that uses this helper. - Regression test in render-createsite-plan.test.js feeds "</script><script>window.__pwned=1;</script>" into PAGES_DATA and asserts the rendered HTML contains no unescaped </script> after the injection point. All 129 plugin tests still pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Keep create-site terminal input banner visible until awaitingInput is cleared - Preserve visible banner state across transient scaffold status fetch failures - Launch Playwright MCP with fullscreen browser config instead of a fixed small viewport - Add coverage for banner consistency and Playwright MCP launch args Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 13 out of 13 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Addressed review comments: - Safely render create-site SUMMARY through JSON-derived template data so </script> cannot break the plan HTML. - Correct the render-template comment to document \u003c escaping. - Clarify scaffold-status.json message updates the progress-bar label while the spinner keeps its built-in cycle. Also keeps the create-site plan logo aligned with the shared Power Pages icon used by other plans. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 13 out of 13 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Restore the close button for create-site scaffold input banners across React, Vue, Angular, and Astro loaders. - Track dismissed prompts so closing the banner hides only the current prompt - Reset dismissal when awaitingInput clears so later prompts show again - Update scaffold loader coverage to require dismissible persistent banners Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Addressed review comments: - Change the create-site plan render command fence from powershell to bash. - Replace the PowerShell-only Start-Process browser-opening example with shell-neutral guidance. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 13 out of 13 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Addressed review comments: - Add user-facing invalid JSON handling for render-createsite-plan --data files. - Escape create-site plan string placeholders used in HTML text contexts. - Align new tests with node:assert/strict and node:* import conventions. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>