feat(09-02): rebuild StepIndicator with MD3 circles and connectors

- Replace text breadcrumbs with numbered circles + connector lines
- Completed steps show checkmark, are clickable buttons with label text
- Active step highlighted with border-primary and bg-primary/10
- Future steps muted with border-outline and text-on-surface-container/40
- Connector lines filled bg-primary for completed, bg-outline for future
- All inline style={{}} props removed, no hardcoded color values
- handleStepClick logic preserved: SET_REMOTE_PARAMS({}) before SET_STEP(0)
- All 5 WIZD-03 tests pass without modification

src/components/wizard/StepIndicator.tsx

@@ -1,6 +1,7 @@
 // src/components/wizard/StepIndicator.tsx
-// Breadcrumb navigation — 1.Backend > 2.Remote Config > 3.Deployment > 4.Review
+// MD3 visual step indicator — numbered circles with connector lines.
-// Completed steps are clickable. Clicking step 0 also clears remote.params (SET_REMOTE_PARAMS({})).
+// Completed steps show checkmark and are clickable buttons.
+// Clicking step 0 dispatches SET_REMOTE_PARAMS({}) then SET_STEP(0) to reset remote params.
 // CRITICAL: never dispatches RESET — deployment options must be preserved on back navigation.
 
 import { useWizard } from '../../store/context';
@@ -22,33 +23,55 @@ export function StepIndicator() {
 
   return (
     <nav aria-label="Wizard steps">
+      <ol className="flex items-center w-full">
         {STEP_LABELS.map((label, i) => {
           const isCompleted = i < currentStep;
           const isActive = i === currentStep;
 
           return (
-          <span key={i}>
+            <li key={i} className="flex items-center flex-1 last:flex-none">
-            {i > 0 && <span aria-hidden="true"> › </span>}
+              {/* Step circle + label */}
+              <div className="flex flex-col items-center shrink-0">
                 {isCompleted ? (
                   <button
                     type="button"
                     onClick={() => handleStepClick(i)}
-                style={{ fontWeight: 'normal' }}
+                    aria-label={`Go to step ${i + 1}: ${label}`}
+                    className="flex flex-col items-center gap-1 group focus-visible:outline-none"
                   >
-                ✓ {i + 1}. {label}
+                    <span className="w-8 h-8 rounded-full bg-primary text-on-primary flex items-center justify-center text-sm font-medium group-focus-visible:ring-2 group-focus-visible:ring-primary/50">
+                      &#10003;
+                    </span>
+                    <span className="text-xs text-primary">{label}</span>
                   </button>
                 ) : isActive ? (
-              <span style={{ fontWeight: 'bold' }}>
+                  <div className="flex flex-col items-center gap-1">
-                {i + 1}. {label}
+                    <span className="w-8 h-8 rounded-full border-2 border-primary bg-primary/10 text-primary font-bold flex items-center justify-center text-sm">
+                      {i + 1}
                     </span>
+                    <span className="text-xs text-primary font-semibold">{label}</span>
+                  </div>
                 ) : (
-              <span style={{ color: '#999' }}>
+                  <div className="flex flex-col items-center gap-1">
-                {i + 1}. {label}
+                    <span className="w-8 h-8 rounded-full border-2 border-outline text-on-surface-container/40 flex items-center justify-center text-sm">
+                      {i + 1}
                     </span>
+                    <span className="text-xs text-on-surface-container/40">{label}</span>
+                  </div>
                 )}
-          </span>
+              </div>
+
+              {/* Connector line between steps */}
+              {i < STEP_LABELS.length - 1 && (
+                <div
+                  aria-hidden="true"
+                  className={`flex-1 h-0.5 mx-2 mb-4 ${isCompleted ? 'bg-primary' : 'bg-outline'}`}
+                />
+              )}
+            </li>
           );
         })}
+      </ol>
     </nav>
   );
 }