From b70484423ebe3cba934a360850556dc96e2ed86c Mon Sep 17 00:00:00 2001
From: Kawa <us.fame.sq@gmail.com>
Date: Wed, 1 Apr 2026 09:19:06 +0200
Subject: [PATCH] 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 | 79 ++++++++++++++++---------
 1 file changed, 51 insertions(+), 28 deletions(-)

diff --git a/src/components/wizard/StepIndicator.tsx b/src/components/wizard/StepIndicator.tsx
index c5a3780..8ce91ed 100644
--- a/src/components/wizard/StepIndicator.tsx
+++ b/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
-// Completed steps are clickable. Clicking step 0 also clears remote.params (SET_REMOTE_PARAMS({})).
+// MD3 visual step indicator — numbered circles with connector lines.
+// 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">
-      {STEP_LABELS.map((label, i) => {
-        const isCompleted = i < currentStep;
-        const isActive = i === currentStep;
+      <ol className="flex items-center w-full">
+        {STEP_LABELS.map((label, i) => {
+          const isCompleted = i < currentStep;
+          const isActive = i === currentStep;
 
-        return (
-          <span key={i}>
-            {i > 0 && <span aria-hidden="true"> › </span>}
-            {isCompleted ? (
-              <button
-                type="button"
-                onClick={() => handleStepClick(i)}
-                style={{ fontWeight: 'normal' }}
-              >
-                ✓ {i + 1}. {label}
-              </button>
-            ) : isActive ? (
-              <span style={{ fontWeight: 'bold' }}>
-                {i + 1}. {label}
-              </span>
-            ) : (
-              <span style={{ color: '#999' }}>
-                {i + 1}. {label}
-              </span>
-            )}
-          </span>
-        );
-      })}
+          return (
+            <li key={i} className="flex items-center flex-1 last:flex-none">
+              {/* Step circle + label */}
+              <div className="flex flex-col items-center shrink-0">
+                {isCompleted ? (
+                  <button
+                    type="button"
+                    onClick={() => handleStepClick(i)}
+                    aria-label={`Go to step ${i + 1}: ${label}`}
+                    className="flex flex-col items-center gap-1 group focus-visible:outline-none"
+                  >
+                    <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 ? (
+                  <div className="flex flex-col items-center gap-1">
+                    <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>
+                ) : (
+                  <div className="flex flex-col items-center gap-1">
+                    <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>
+                )}
+              </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>
   );
 }