feat: DeploymentProgress step indicator component

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/src/components/DeploymentProgress.tsx

@@ -0,0 +1,46 @@
+import styles from './DeploymentProgress.module.css';
+
+const STAGES = [
+  { key: 'PRE_FLIGHT', label: 'Pre-flight' },
+  { key: 'PULL_IMAGE', label: 'Pull' },
+  { key: 'CREATE_NETWORK', label: 'Network' },
+  { key: 'START_REPLICAS', label: 'Start' },
+  { key: 'HEALTH_CHECK', label: 'Health' },
+  { key: 'SWAP_TRAFFIC', label: 'Swap' },
+  { key: 'COMPLETE', label: 'Done' },
+];
+
+interface DeploymentProgressProps {
+  currentStage: string | null;
+  failed?: boolean;
+}
+
+export function DeploymentProgress({ currentStage, failed }: DeploymentProgressProps) {
+  if (!currentStage) return null;
+
+  const currentIndex = STAGES.findIndex((s) => s.key === currentStage);
+
+  return (
+    <div className={styles.container}>
+      {STAGES.map((stage, i) => {
+        const isCompleted = i < currentIndex;
+        const isActive = i === currentIndex && !failed;
+        const isFailed = i === currentIndex && failed;
+
+        return (
+          <div key={stage.key} className={styles.step}>
+            {i > 0 && (
+              <div className={`${styles.line} ${isCompleted || isActive || isFailed ? styles.lineCompleted : ''}`} />
+            )}
+            <div className={styles.stepColumn}>
+              <div className={`${styles.dot} ${isCompleted ? styles.dotCompleted : ''} ${isActive ? styles.dotActive : ''} ${isFailed ? styles.dotFailed : ''}`} />
+              <span className={`${styles.label} ${isActive ? styles.labelActive : ''} ${isFailed ? styles.labelFailed : ''}`}>
+                {stage.label}
+              </span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}