OpenNoodl/dev-docs/tasks/phase-2/TASK-004-runtime-migration-system/CHECKLIST.md

React 19 Migration System - Implementation Checklist

Session 1: Foundation + Detection

• Create migration types file (models/migration/types.ts)
• Create ProjectScanner.ts (detection logic with 5-tier checks)
• Update ProjectModel with migration fields (deferred - not needed for initial wizard)
• Create MigrationSession.ts (state machine)
• Test scanner against example project (requires editor build)
• Create CHANGELOG.md tracking file
• Create index.ts module exports

Session 2: Wizard UI (Basic Flow)

• MigrationWizard.tsx container
• WizardProgress.tsx component
• ConfirmStep.tsx component
• ScanningStep.tsx component
• ReportStep.tsx component
• CompleteStep.tsx component
• FailedStep.tsx component
• SCSS module files (MigrationWizard, WizardProgress, ConfirmStep, ScanningStep, ReportStep, CompleteStep, FailedStep)
• MigrationExecutor.ts (project copy + basic fixes) - deferred to Session 4
• DialogLayerModel integration for showing wizard (completed in Session 3)

Session 3: Projects View Integration

• DialogLayerModel.showDialog() generic method
• LocalProjectsModel runtime detection with cache
• Update projectsview.html template with legacy badges
• Add CSS styles for legacy project indicators
• Update projectsview.ts to detect and show legacy badges
• Add "Migrate Project" button to project cards
• Add "Open Read-Only" button to project cards
• onMigrateProjectClicked handler (opens MigrationWizard)
• onOpenReadOnlyClicked handler (opens project normally)
• Create EditorBanner.tsx for read-only mode warning - deferred to Post-Migration UX
• Wire auto-detect on existing project open - deferred to Post-Migration UX

Session 4: AI Migration + Polish

• claudeClient.ts (Anthropic API integration)
• keyStorage.ts (encrypted API key storage)
• AIConfigPanel.tsx (API key + budget UI)
• BudgetController.ts (spending limits)
• BudgetApprovalDialog.tsx
• Integration into wizard flow
• MigratingStep.tsx with AI progress
• Post-migration component status badges
• MigrationNotesPanel.tsx

Post-Migration UX

• Component panel status indicators
• Migration notes display
• Dismiss functionality
• Project Info panel migration section
• Component filter by migration status

Polish Items

• New project dialog React 19 notice
• Welcome dialog for version updates
• Documentation links throughout UI
• Migration log viewer