Skip to content

feat(page-builder): add AI draft/apply/revert preview flow#979

Open
nooblemon-eth wants to merge 2 commits intofeature/page-builder-fe-hardening-v2from
feature/page-builder-fe-premarket-v1
Open

feat(page-builder): add AI draft/apply/revert preview flow#979
nooblemon-eth wants to merge 2 commits intofeature/page-builder-fe-hardening-v2from
feature/page-builder-fe-premarket-v1

Conversation

@nooblemon-eth
Copy link
Copy Markdown
Contributor

Summary

  • Adds a draft/apply/revert UX flow so users can preview AI-generated page edits before committing them. AI mutations (AiCreatePageConfig, AiUpdatePageConfigSection, AiGeneratePageFromDescription) now snapshot Craft.js state, render the AI result as a read-only preview, and let the user apply or revert.
  • Auto-save and Craft.js editing are blocked during preview to prevent partial persistence.
  • Cancel during an in-flight mutation is safe — an abort guard prevents stale .then/.catch callbacks from transitioning state after revert.
  • The ai_page_edit tool handler in InputChat validates payload schema explicitly and logs warnings on every invalid path instead of silently no-oping.

Key changes

Area Files What
State store.ts 6 Jotai atoms + AIDraftPhase type + derived isAIDraftPreviewAtom
Hook hooks/useAIPageEdit.ts Orchestration: snapshot → mutation → preview → apply/revert, with cancelledRef abort guard
Bridge hooks/ai-page-edit-bridge.ts Module-level ref bridge (same pattern as use-safe-editor.ts)
Banner panels/AIDraftBanner.tsx Phase-aware banner: loading/previewing/error with contextual actions
Editor Editor.tsx Hook wiring, auto-save guard, actions.setOptions({ enabled }) toggle, banner render
Chat InputChat.tsx ai_page_edit tool handler with explicit schema guards + console.warn
Exports panels/index.ts Added AIDraftBanner

Test plan

  • yarn test __tests__/page-builder/ — 242/242 passed, 11 files, 0 regressions
  • yarn build — exit 0, no type errors
  • Manual: open page builder → trigger AI edit via chat → verify loading banner → verify preview state → apply → confirm auto-save fires
  • Manual: trigger AI edit → cancel during loading → confirm no error flash
  • Manual: trigger AI edit → revert → confirm original state restored

🤖 Generated with Claude Code

KC and others added 2 commits February 28, 2026 21:41
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Use prePageConfigRef (not pageConfigRef) in catch-path restoration
- Clear aiDraftErrorAtom at start of executeAIMutation
- Consolidate split ./store imports in Editor.tsx
- Extract warnPageEdit helper in InputChat ai_page_edit handler

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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.

1 participant