Phase 2 — Code Migration

Phase 2 migrates your React/JSS components from the source XP codebase to a SitecoreAI SXA Headless app using Content SDK 2.0. Components are migrated one at a time, in priority order, with each one verified live in a sandbox before moving to the next.

Duration: Hours — iterative, one component at a time | Orchestrator: Code Migration Orchestrator

Requires: code-discovery-report from Phase 1 | Sandbox mode: Mock (no live SitecoreAI connection needed)

How Code Migration works

Styles first, then components. Before any component is migrated, global styles are migrated as a batch. This gives the sandbox a working visual foundation so components render correctly from the first one.

Home page first, then outward. Components are migrated in page-aware priority order — home page components first, then expanding to other pages. The home page is the highest-impact, most visible surface. You get a recognizable, testable result immediately rather than starting with obscure components that are hard to verify.

One component at a time. Each component is migrated individually. After each one, the agent opens the sandbox dev server URL so you can see it rendered live before approving. This means:

You catch problems at the unit level, not after 50 components
The app is always in a working, buildable state
If something breaks, you know exactly which component caused it
You can rollback to the previous checkpoint instantly

Mock mode. The sandbox dev server renders components using static layout snapshots captured from your XP instance — not from a live SitecoreAI connection. This means Phase 2 and Phase 3 can run in parallel: code migration doesn't wait for content to be pushed to SitecoreAI.

Before you start

Phase 1 — Discovery is complete
code-discovery-report artifact exists in your workspace
Your project is open in Kajoo Agentic

How to run Code Migration

Open your project in Kajoo Agentic and start a new chat session (or continue an existing one)
Type "Start code migration" to invoke the Code Migration Orchestrator
The agent loads the code-discovery-report and presents the component list and migration order
Confirm to begin — styles are migrated first as a batch
For each component:
- The agent migrates the component and commits a checkpoint to the target repo
- Review the rendered output in the sandbox dev server URL
- Choose your next action (see below)
Continue until all components are migrated or you choose to stop

📘
You can run Phase 3 — Content Migration in a separate chat session within the same project at the same time. Code and content migration operate on independent systems and don't interfere with each other.

What you'll decide

After each component is migrated:

Action	What it does
Continue	Accept the migration and move to the next component
Redo	Re-migrate this component — optionally with adjusted instructions
Skip	Leave this component for later and move to the next
Stop	Pause the session — progress is saved, resume anytime

If a component fails to render or causes a build error:

Action	What it does
Rollback	Restores both the code and migration state to the last checkpoint — the previous component's commit
Redo with adjustments	Re-attempt with additional instructions or context
Skip	Mark as skipped and continue

Checkpoints and rollback

Every component migration creates a checkpoint — a git commit plus a state snapshot — before any changes are made. If something goes wrong:

Rollback restores both the code (git) and the migration state in one operation
You always return to a known-good state
Checkpoints are cumulative — you can roll back multiple steps if needed

Checkpoints are committed to your target repository throughout the migration. When you're satisfied with the full result, the final state is your migrated codebase.

Resuming Code Migration

Code Migration is fully resumable. Progress is tracked in the migration-state artifact, which records completed, pending, and skipped components per page.

To resume: open a new chat session in your project and type "Resume code migration". The agent reads migration-state and picks up from the next pending component.

You can resume across sessions, days, or team members — the state artifact is the source of truth.

What Code Migration produces

Artifact	What it contains
`migration-state`	Per-page tracking of completed, pending, and skipped components. Includes checkpoint references for rollback.

Migrated component code is committed to your target repository throughout the process. Each commit is labelled with the component name.

Troubleshooting

Issue	Fix
"Component migration failed"	Review the browser console on the sandbox URL. Use Redo with adjusted instructions or Skip to continue
"Cannot resume"	`migration-state` artifact is missing or corrupted. Safe to restart — the orchestrator will reconcile completed work against the target repo
Build error after migration	Use Rollback to return to the last checkpoint, then retry with adjusted instructions
Sandbox URL not loading	Call `dev-server-start` to restart the sandbox dev server

What's next

Once all components are migrated (or you're ready to proceed with skipped components handled later):


Content migration running in parallel?	Wait for Phase 3 to complete before starting Phase 4
Starting content migration now?	Go to Phase 3 — Content Migration
Both phases complete?	Continue to Phase 4 — SXA Conversion