Skip to content

[Pages] Add live scaffold status and HTML plan to create-site - #118

Merged
Priyanshu Agrawal (priyanshu92) merged 10 commits into
mainfrom
users/priyanshuag/create-site-improvements
Apr 29, 2026
Merged

[Pages] Add live scaffold status and HTML plan to create-site#118
Priyanshu Agrawal (priyanshu92) merged 10 commits into
mainfrom
users/priyanshuag/create-site-improvements

Conversation

@priyanshu92

Copy link
Copy Markdown
Collaborator
  • 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>
Copilot AI review requested due to automatic review settings April 22, 2026 09:01

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

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.json to override loader status text and show a dismissible “waiting for your input” banner.
  • Add render-createsite-plan.js plus node:test coverage to render create-site-plan.html into <PROJECT_ROOT>/docs/*.html.
  • Restructure create-site/SKILL.md to 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.

Comment thread plugins/power-pages/skills/create-site/assets/astro/src/pages/index.astro Outdated
Comment thread plugins/power-pages/skills/create-site/SKILL.md Outdated
Comment thread plugins/power-pages/skills/create-site/assets/create-site-plan.html Outdated
Priyanshu Agrawal and others added 2 commits April 22, 2026 14:48
- 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>
Copilot AI review requested due to automatic review settings April 22, 2026 09:27

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

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.

Comment thread plugins/power-pages/skills/create-site/assets/create-site-plan.html
Priyanshu Agrawal and others added 2 commits April 22, 2026 15:20
…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>
Copilot AI review requested due to automatic review settings April 28, 2026 12:38

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

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.

Comment thread plugins/power-pages/scripts/tests/create-site-scaffold-loader.test.js Outdated
Comment thread plugins/power-pages/skills/create-site/assets/create-site-plan.html Outdated
Comment thread plugins/power-pages/scripts/lib/render-template.js Outdated
Comment thread plugins/power-pages/skills/create-site/SKILL.md Outdated
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>

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

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.

Comment thread plugins/power-pages/skills/create-site/SKILL.md Outdated
Comment thread plugins/power-pages/skills/create-site/SKILL.md Outdated
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>
Copilot AI review requested due to automatic review settings April 29, 2026 04:12

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

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.

Comment thread plugins/power-pages/scripts/render-createsite-plan.js Outdated
Comment thread plugins/power-pages/scripts/lib/render-template.js
Comment thread plugins/power-pages/scripts/tests/launch-playwright-mcp.test.js Outdated
Comment thread plugins/power-pages/scripts/tests/create-site-scaffold-loader.test.js Outdated
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>
@priyanshu92
Priyanshu Agrawal (priyanshu92) merged commit d0e8837 into main Apr 29, 2026
6 checks passed
@priyanshu92
Priyanshu Agrawal (priyanshu92) deleted the users/priyanshuag/create-site-improvements branch April 29, 2026 04:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants