bmad-elsabro 1.0.0

package/renderer/components/MigrationWizard.tsx

@@ -0,0 +1,896 @@
+/**
+ * MigrationWizard Component
+ *
+ * Multi-step wizard for migrating legacy BMAD projects to the new Electron app format.
+ * Inspired by the interactive wizard pattern from tools/cli/lib/prompts.js,
+ * translated into a visual React component.
+ *
+ * Features:
+ * - Step-by-step migration flow with visual progress
+ * - Automatic legacy project detection
+ * - Backup creation before migration
+ * - Real-time migration progress tracking
+ * - Detailed migration reports
+ * - Rollback capability
+ * - Dark/light theme support
+ * - Keyboard navigation (Next: Enter, Back: Escape)
+ *
+ * Steps:
+ * 1. Select legacy project directory
+ * 2. Review detected legacy content
+ * 3. Configure migration options
+ * 4. Execute migration with progress tracking
+ * 5. Review migration results
+ *
+ * @module renderer/components/MigrationWizard
+ */
+
+import React, { useState, useCallback, useEffect } from 'react';
+
+/**
+ * Wizard step configuration
+ */
+interface WizardStep {
+  id: string;
+  title: string;
+  description: string;
+  completed: boolean;
+}
+
+/**
+ * Migration wizard props
+ */
+interface MigrationWizardProps {
+  /**
+   * Whether the wizard is open
+   */
+  isOpen: boolean;
+
+  /**
+   * Callback when wizard is closed
+   */
+  onClose: () => void;
+
+  /**
+   * Callback when migration is completed successfully
+   */
+  onComplete?: (result: MigrationResult) => void;
+}
+
+/**
+ * Legacy project info (from legacy-migrator.ts)
+ */
+interface LegacyProjectInfo {
+  isLegacy: boolean;
+  version?: string;
+  projectPath: string;
+  directories: {
+    agents?: string;
+    workflows?: string;
+    config?: string;
+    steps?: string;
+  };
+  counts: {
+    agents: number;
+    workflows: number;
+    steps: number;
+    hasConfig: boolean;
+  };
+  issues: string[];
+}
+
+/**
+ * Migration step (from legacy-migrator.ts)
+ */
+interface MigrationStep {
+  id: string;
+  name: string;
+  description: string;
+  status: 'pending' | 'running' | 'completed' | 'failed' | 'skipped';
+  progress: number;
+  error?: string;
+}
+
+/**
+ * Migration result (from legacy-migrator.ts)
+ */
+interface MigrationResult {
+  success: boolean;
+  steps: MigrationStep[];
+  migrated: {
+    agents: number;
+    workflows: number;
+    config: boolean;
+  };
+  backupPath?: string;
+  error?: string;
+  completedAt: string;
+}
+
+/**
+ * MigrationWizard Component
+ *
+ * Guides users through migrating legacy BMAD projects to the new format.
+ */
+export const MigrationWizard: React.FC<MigrationWizardProps> = ({
+  isOpen,
+  onClose,
+  onComplete,
+}) => {
+  // Wizard state
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+  const [projectPath, setProjectPath] = useState('');
+  const [legacyInfo, setLegacyInfo] = useState<LegacyProjectInfo | null>(null);
+  const [isDetecting, setIsDetecting] = useState(false);
+  const [createBackup, setCreateBackup] = useState(true);
+  const [preserveOriginal, setPreserveOriginal] = useState(true);
+  const [skipSteps, setSkipSteps] = useState<string[]>([]);
+  const [migrationSteps, setMigrationSteps] = useState<MigrationStep[]>([]);
+  const [isMigrating, setIsMigrating] = useState(false);
+  const [migrationResult, setMigrationResult] = useState<MigrationResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  // Wizard steps definition
+  const wizardSteps: WizardStep[] = [
+    {
+      id: 'select-project',
+      title: 'Select Legacy Project',
+      description: 'Choose the directory containing your legacy BMAD project',
+      completed: currentStepIndex > 0,
+    },
+    {
+      id: 'review-detection',
+      title: 'Review Project',
+      description: 'Review what we found in your legacy project',
+      completed: currentStepIndex > 1,
+    },
+    {
+      id: 'configure',
+      title: 'Configure Migration',
+      description: 'Choose migration options and preferences',
+      completed: currentStepIndex > 2,
+    },
+    {
+      id: 'migrate',
+      title: 'Migrate Project',
+      description: 'Execute the migration process',
+      completed: currentStepIndex > 3,
+    },
+    {
+      id: 'results',
+      title: 'Migration Complete',
+      description: 'Review migration results and next steps',
+      completed: currentStepIndex > 4,
+    },
+  ];
+
+  const currentStep = wizardSteps[currentStepIndex];
+
+  /**
+   * Handle project path selection
+   */
+  const handleSelectDirectory = useCallback(async () => {
+    // TODO: Integrate with Electron's file dialog via IPC
+    // For now, using mock data for demonstration
+    const mockPath = '/path/to/legacy/project';
+    setProjectPath(mockPath);
+
+    // Auto-detect after selection
+    if (mockPath) {
+      await detectLegacyProject(mockPath);
+    }
+  }, []);
+
+  /**
+   * Detect legacy project at the given path
+   */
+  const detectLegacyProject = useCallback(async (path: string) => {
+    setIsDetecting(true);
+    setError(null);
+
+    try {
+      // TODO: Call Electron IPC to detect legacy project
+      // const result = await window.electron.legacyMigrator.detect(path);
+
+      // Mock detection result for demonstration
+      const mockInfo: LegacyProjectInfo = {
+        isLegacy: true,
+        version: '1.x',
+        projectPath: path,
+        directories: {
+          agents: `${path}/.bmad/agents`,
+          workflows: `${path}/.bmad/workflows`,
+          config: `${path}/.bmad`,
+        },
+        counts: {
+          agents: 8,
+          workflows: 12,
+          steps: 45,
+          hasConfig: true,
+        },
+        issues: [],
+      };
+
+      setLegacyInfo(mockInfo);
+
+      if (!mockInfo.isLegacy) {
+        setError('No legacy BMAD project detected at this location');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to detect legacy project');
+    } finally {
+      setIsDetecting(false);
+    }
+  }, []);
+
+  /**
+   * Start migration process
+   */
+  const startMigration = useCallback(async () => {
+    if (!legacyInfo) return;
+
+    setIsMigrating(true);
+    setError(null);
+    setMigrationSteps([]);
+
+    try {
+      // TODO: Call Electron IPC to start migration
+      // Set up event listeners for progress updates
+      // window.electron.legacyMigrator.on('step-start', handleStepStart);
+      // window.electron.legacyMigrator.on('step-progress', handleStepProgress);
+      // window.electron.legacyMigrator.on('step-complete', handleStepComplete);
+
+      // const result = await window.electron.legacyMigrator.migrate({
+      //   sourcePath: projectPath,
+      //   createBackup,
+      //   preserveOriginal,
+      //   skipSteps,
+      // });
+
+      // Mock migration result for demonstration
+      const mockResult: MigrationResult = {
+        success: true,
+        steps: [
+          {
+            id: 'detect',
+            name: 'Detect Legacy Project',
+            description: 'Scanning project for legacy structure',
+            status: 'completed',
+            progress: 100,
+          },
+          {
+            id: 'backup',
+            name: 'Create Backup',
+            description: 'Backing up original project',
+            status: 'completed',
+            progress: 100,
+          },
+          {
+            id: 'agents',
+            name: 'Migrate Agents',
+            description: 'Migrating 8 agent files',
+            status: 'completed',
+            progress: 100,
+          },
+          {
+            id: 'workflows',
+            name: 'Migrate Workflows',
+            description: 'Migrating 12 workflow files',
+            status: 'completed',
+            progress: 100,
+          },
+          {
+            id: 'config',
+            name: 'Migrate Configuration',
+            description: 'Migrating project configuration',
+            status: 'completed',
+            progress: 100,
+          },
+          {
+            id: 'finalize',
+            name: 'Finalize Migration',
+            description: 'Completing migration and cleanup',
+            status: 'completed',
+            progress: 100,
+          },
+        ],
+        migrated: {
+          agents: 8,
+          workflows: 12,
+          config: true,
+        },
+        backupPath: '/path/to/backup',
+        completedAt: new Date().toISOString(),
+      };
+
+      // Simulate progressive updates
+      for (let i = 0; i < mockResult.steps.length; i++) {
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        setMigrationSteps(mockResult.steps.slice(0, i + 1));
+      }
+
+      setMigrationResult(mockResult);
+      onComplete?.(mockResult);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Migration failed');
+      setMigrationResult({
+        success: false,
+        steps: migrationSteps,
+        migrated: { agents: 0, workflows: 0, config: false },
+        error: err instanceof Error ? err.message : 'Unknown error',
+        completedAt: new Date().toISOString(),
+      });
+    } finally {
+      setIsMigrating(false);
+    }
+  }, [legacyInfo, projectPath, createBackup, preserveOriginal, skipSteps, migrationSteps, onComplete]);
+
+  /**
+   * Navigate to next step
+   */
+  const handleNext = useCallback(() => {
+    if (currentStepIndex === 0 && !legacyInfo?.isLegacy) {
+      setError('Please select a valid legacy project first');
+      return;
+    }
+
+    if (currentStepIndex === 2) {
+      // Move to migration step and start migration
+      setCurrentStepIndex(3);
+      setTimeout(() => startMigration(), 100);
+    } else if (currentStepIndex < wizardSteps.length - 1) {
+      setCurrentStepIndex(currentStepIndex + 1);
+      setError(null);
+    }
+  }, [currentStepIndex, legacyInfo, wizardSteps.length, startMigration]);
+
+  /**
+   * Navigate to previous step
+   */
+  const handleBack = useCallback(() => {
+    if (currentStepIndex > 0 && !isMigrating) {
+      setCurrentStepIndex(currentStepIndex - 1);
+      setError(null);
+    }
+  }, [currentStepIndex, isMigrating]);
+
+  /**
+   * Close wizard and reset state
+   */
+  const handleClose = useCallback(() => {
+    if (!isMigrating) {
+      setCurrentStepIndex(0);
+      setProjectPath('');
+      setLegacyInfo(null);
+      setMigrationSteps([]);
+      setMigrationResult(null);
+      setError(null);
+      onClose();
+    }
+  }, [isMigrating, onClose]);
+
+  /**
+   * Keyboard navigation
+   */
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Enter' && !isMigrating) {
+        handleNext();
+      } else if (e.key === 'Escape' && !isMigrating) {
+        if (currentStepIndex === 0) {
+          handleClose();
+        } else {
+          handleBack();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, isMigrating, currentStepIndex, handleNext, handleBack, handleClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+      <div className="w-full max-w-4xl max-h-[90vh] overflow-y-auto bg-white dark:bg-gray-800 rounded-lg shadow-2xl">
+        {/* Header */}
+        <div className="sticky top-0 z-10 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
+                🔄 Legacy Project Migration
+              </h2>
+              <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                Step {currentStepIndex + 1} of {wizardSteps.length}: {currentStep.title}
+              </p>
+            </div>
+            {!isMigrating && (
+              <button
+                onClick={handleClose}
+                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
+                aria-label="Close wizard"
+              >
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            )}
+          </div>
+
+          {/* Progress bar */}
+          <div className="mt-4">
+            <div className="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400 mb-2">
+              {wizardSteps.map((step, index) => (
+                <div
+                  key={step.id}
+                  className={`flex items-center ${
+                    index <= currentStepIndex
+                      ? 'text-blue-600 dark:text-blue-400 font-medium'
+                      : ''
+                  }`}
+                >
+                  <span className={`${index <= currentStepIndex ? 'opacity-100' : 'opacity-50'}`}>
+                    {step.id === 'select-project' && '📁'}
+                    {step.id === 'review-detection' && '🔍'}
+                    {step.id === 'configure' && '⚙️'}
+                    {step.id === 'migrate' && '⚡'}
+                    {step.id === 'results' && '✅'}
+                  </span>
+                </div>
+              ))}
+            </div>
+            <div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+              <div
+                className="h-full bg-gradient-to-r from-blue-500 to-blue-600 transition-all duration-300 ease-out"
+                style={{ width: `${((currentStepIndex + 1) / wizardSteps.length) * 100}%` }}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="px-6 py-6">
+          {/* Error message */}
+          {error && (
+            <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+              <div className="flex items-start gap-3">
+                <span className="text-2xl">⚠️</span>
+                <div className="flex-1">
+                  <h4 className="text-sm font-semibold text-red-800 dark:text-red-200">Error</h4>
+                  <p className="text-sm text-red-700 dark:text-red-300 mt-1">{error}</p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Step 1: Select Project */}
+          {currentStepIndex === 0 && (
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                  {currentStep.title}
+                </h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  {currentStep.description}
+                </p>
+              </div>
+
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    Project Directory
+                  </label>
+                  <div className="flex gap-3">
+                    <input
+                      type="text"
+                      value={projectPath}
+                      onChange={(e) => setProjectPath(e.target.value)}
+                      placeholder="/path/to/legacy/project"
+                      className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    />
+                    <button
+                      onClick={handleSelectDirectory}
+                      className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                    >
+                      Browse...
+                    </button>
+                  </div>
+                </div>
+
+                {projectPath && (
+                  <button
+                    onClick={() => detectLegacyProject(projectPath)}
+                    disabled={isDetecting}
+                    className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                  >
+                    {isDetecting ? 'Detecting...' : 'Detect Legacy Project'}
+                  </button>
+                )}
+
+                {legacyInfo && !legacyInfo.isLegacy && (
+                  <div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
+                    <p className="text-sm text-yellow-800 dark:text-yellow-200">
+                      ⚠️ No legacy BMAD project detected at this location. Please select a different directory.
+                    </p>
+                  </div>
+                )}
+
+                {legacyInfo && legacyInfo.isLegacy && (
+                  <div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
+                    <p className="text-sm text-green-800 dark:text-green-200">
+                      ✅ Legacy BMAD project detected! Click "Next" to review.
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Step 2: Review Detection */}
+          {currentStepIndex === 1 && legacyInfo && (
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                  {currentStep.title}
+                </h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  {currentStep.description}
+                </p>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                  <div className="flex items-center gap-2 mb-2">
+                    <span className="text-2xl">👥</span>
+                    <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Agents</span>
+                  </div>
+                  <p className="text-3xl font-bold text-gray-900 dark:text-white">{legacyInfo.counts.agents}</p>
+                  <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">agent files found</p>
+                </div>
+
+                <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                  <div className="flex items-center gap-2 mb-2">
+                    <span className="text-2xl">🔄</span>
+                    <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Workflows</span>
+                  </div>
+                  <p className="text-3xl font-bold text-gray-900 dark:text-white">{legacyInfo.counts.workflows}</p>
+                  <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">workflow files found</p>
+                </div>
+
+                <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                  <div className="flex items-center gap-2 mb-2">
+                    <span className="text-2xl">📋</span>
+                    <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Steps</span>
+                  </div>
+                  <p className="text-3xl font-bold text-gray-900 dark:text-white">{legacyInfo.counts.steps}</p>
+                  <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">step definitions found</p>
+                </div>
+
+                <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                  <div className="flex items-center gap-2 mb-2">
+                    <span className="text-2xl">⚙️</span>
+                    <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Configuration</span>
+                  </div>
+                  <p className="text-3xl font-bold text-gray-900 dark:text-white">
+                    {legacyInfo.counts.hasConfig ? '✅' : '❌'}
+                  </p>
+                  <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                    {legacyInfo.counts.hasConfig ? 'config file found' : 'no config file'}
+                  </p>
+                </div>
+              </div>
+
+              {legacyInfo.version && (
+                <div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+                  <p className="text-sm text-blue-800 dark:text-blue-200">
+                    📦 Detected version: <span className="font-mono font-semibold">{legacyInfo.version}</span>
+                  </p>
+                </div>
+              )}
+
+              {legacyInfo.issues.length > 0 && (
+                <div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
+                  <h4 className="text-sm font-semibold text-yellow-800 dark:text-yellow-200 mb-2">⚠️ Issues Detected</h4>
+                  <ul className="list-disc list-inside space-y-1">
+                    {legacyInfo.issues.map((issue, index) => (
+                      <li key={index} className="text-sm text-yellow-700 dark:text-yellow-300">
+                        {issue}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Step 3: Configure Migration */}
+          {currentStepIndex === 2 && (
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                  {currentStep.title}
+                </h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  {currentStep.description}
+                </p>
+              </div>
+
+              <div className="space-y-4">
+                <label className="flex items-center gap-3 p-4 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
+                  <input
+                    type="checkbox"
+                    checked={createBackup}
+                    onChange={(e) => setCreateBackup(e.target.checked)}
+                    className="w-5 h-5 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
+                  />
+                  <div>
+                    <span className="text-sm font-medium text-gray-900 dark:text-white">
+                      Create backup before migration
+                    </span>
+                    <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                      Recommended: Creates a full backup of your project before making any changes
+                    </p>
+                  </div>
+                </label>
+
+                <label className="flex items-center gap-3 p-4 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
+                  <input
+                    type="checkbox"
+                    checked={preserveOriginal}
+                    onChange={(e) => setPreserveOriginal(e.target.checked)}
+                    className="w-5 h-5 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
+                  />
+                  <div>
+                    <span className="text-sm font-medium text-gray-900 dark:text-white">
+                      Preserve original files
+                    </span>
+                    <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                      Keep original files in place and create copies in the new location
+                    </p>
+                  </div>
+                </label>
+
+                <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
+                  <h4 className="text-sm font-medium text-gray-900 dark:text-white mb-3">
+                    Skip Migration Steps (Optional)
+                  </h4>
+                  <div className="space-y-2">
+                    {['agents', 'workflows', 'config'].map((step) => (
+                      <label
+                        key={step}
+                        className="flex items-center gap-3 cursor-pointer"
+                      >
+                        <input
+                          type="checkbox"
+                          checked={skipSteps.includes(step)}
+                          onChange={(e) => {
+                            if (e.target.checked) {
+                              setSkipSteps([...skipSteps, step]);
+                            } else {
+                              setSkipSteps(skipSteps.filter((s) => s !== step));
+                            }
+                          }}
+                          className="w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
+                        />
+                        <span className="text-sm text-gray-700 dark:text-gray-300 capitalize">
+                          Skip {step}
+                        </span>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              <div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+                <p className="text-sm text-blue-800 dark:text-blue-200">
+                  💡 <strong>Tip:</strong> We recommend creating a backup and preserving original files for your first migration.
+                  You can always clean up the originals later once you've verified everything works correctly.
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Step 4: Execute Migration */}
+          {currentStepIndex === 3 && (
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                  {currentStep.title}
+                </h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  {currentStep.description}
+                </p>
+              </div>
+
+              {migrationSteps.length === 0 && isMigrating && (
+                <div className="flex flex-col items-center justify-center py-12">
+                  <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-blue-600 mb-4"></div>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">Initializing migration...</p>
+                </div>
+              )}
+
+              {migrationSteps.length > 0 && (
+                <div className="space-y-3">
+                  {migrationSteps.map((step) => (
+                    <div
+                      key={step.id}
+                      className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg"
+                    >
+                      <div className="flex items-center justify-between mb-2">
+                        <div className="flex items-center gap-3">
+                          <span className="text-2xl">
+                            {step.status === 'completed' && '✅'}
+                            {step.status === 'running' && '⚡'}
+                            {step.status === 'failed' && '❌'}
+                            {step.status === 'pending' && '⏳'}
+                            {step.status === 'skipped' && '⏭️'}
+                          </span>
+                          <div>
+                            <h4 className="text-sm font-medium text-gray-900 dark:text-white">
+                              {step.name}
+                            </h4>
+                            <p className="text-xs text-gray-600 dark:text-gray-400">
+                              {step.description}
+                            </p>
+                          </div>
+                        </div>
+                        <span className="text-sm font-mono text-gray-600 dark:text-gray-400">
+                          {step.progress}%
+                        </span>
+                      </div>
+                      {step.status === 'running' && (
+                        <div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                          <div
+                            className="h-full bg-blue-600 transition-all duration-300"
+                            style={{ width: `${step.progress}%` }}
+                          />
+                        </div>
+                      )}
+                      {step.error && (
+                        <p className="text-xs text-red-600 dark:text-red-400 mt-2">
+                          Error: {step.error}
+                        </p>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Step 5: Results */}
+          {currentStepIndex === 4 && migrationResult && (
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                  {currentStep.title}
+                </h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  {currentStep.description}
+                </p>
+              </div>
+
+              {migrationResult.success ? (
+                <div className="p-6 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg text-center">
+                  <span className="text-6xl mb-4 block">🎉</span>
+                  <h4 className="text-xl font-bold text-green-800 dark:text-green-200 mb-2">
+                    Migration Completed Successfully!
+                  </h4>
+                  <p className="text-sm text-green-700 dark:text-green-300">
+                    Your legacy project has been migrated to the new BMAD Studio format.
+                  </p>
+                </div>
+              ) : (
+                <div className="p-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-center">
+                  <span className="text-6xl mb-4 block">😞</span>
+                  <h4 className="text-xl font-bold text-red-800 dark:text-red-200 mb-2">
+                    Migration Failed
+                  </h4>
+                  <p className="text-sm text-red-700 dark:text-red-300">
+                    {migrationResult.error || 'An unknown error occurred during migration'}
+                  </p>
+                </div>
+              )}
+
+              <div className="grid grid-cols-3 gap-4">
+                <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
+                  <p className="text-3xl font-bold text-gray-900 dark:text-white">
+                    {migrationResult.migrated.agents}
+                  </p>
+                  <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">Agents Migrated</p>
+                </div>
+                <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
+                  <p className="text-3xl font-bold text-gray-900 dark:text-white">
+                    {migrationResult.migrated.workflows}
+                  </p>
+                  <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">Workflows Migrated</p>
+                </div>
+                <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
+                  <p className="text-3xl font-bold text-gray-900 dark:text-white">
+                    {migrationResult.migrated.config ? '✅' : '❌'}
+                  </p>
+                  <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">Config Migrated</p>
+                </div>
+              </div>
+
+              {migrationResult.backupPath && (
+                <div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+                  <h4 className="text-sm font-semibold text-blue-800 dark:text-blue-200 mb-2">
+                    💾 Backup Location
+                  </h4>
+                  <p className="text-sm text-blue-700 dark:text-blue-300 font-mono break-all">
+                    {migrationResult.backupPath}
+                  </p>
+                </div>
+              )}
+
+              <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
+                  📋 Next Steps
+                </h4>
+                <ol className="list-decimal list-inside space-y-2 text-sm text-gray-700 dark:text-gray-300">
+                  <li>Review your migrated agents in the Agents section</li>
+                  <li>Check your workflows in the Workflow Editor</li>
+                  <li>Verify your configuration in Settings</li>
+                  <li>Run a test workflow to ensure everything works</li>
+                  <li>If satisfied, you can safely remove the backup</li>
+                </ol>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="sticky bottom-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-6 py-4">
+          <div className="flex items-center justify-between">
+            <button
+              onClick={handleBack}
+              disabled={currentStepIndex === 0 || isMigrating}
+              className="px-6 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              ← Back
+            </button>
+
+            <div className="flex items-center gap-3">
+              {currentStepIndex === 4 ? (
+                <button
+                  onClick={handleClose}
+                  className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                >
+                  Done
+                </button>
+              ) : (
+                <button
+                  onClick={handleNext}
+                  disabled={
+                    isMigrating ||
+                    (currentStepIndex === 0 && !legacyInfo?.isLegacy) ||
+                    (currentStepIndex === 3 && migrationSteps.length === 0)
+                  }
+                  className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                >
+                  {currentStepIndex === 2 ? 'Start Migration' : 'Next →'}
+                </button>
+              )}
+            </div>
+          </div>
+
+          <p className="text-xs text-gray-500 dark:text-gray-400 text-center mt-3">
+            Press <kbd className="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-xs">Enter</kbd> to continue or{' '}
+            <kbd className="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-xs">Esc</kbd> to go back
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MigrationWizard;