From b6e604cfbbcf0f1e4ce40290b23f3cda0b36296c Mon Sep 17 00:00:00 2001
From: AndyMik90 <andre@mikalsenutvikling.no>
Date: Mon, 15 Dec 2025 17:09:09 +0100
Subject: [PATCH] auto-claude: subtask-2-1 - Create WizardProgress component -
 step progress indicator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added WizardProgress.tsx component with numbered circles and connecting lines
- Supports completed, current, and upcoming step visual states
- Uses Check icon from lucide-react for completed steps
- Follows existing patterns from AppSettings.tsx and progress.tsx
- Exported WizardStep interface for use by other wizard components

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/onboarding/WizardProgress.tsx  | 73 +++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 auto-claude-ui/src/renderer/components/onboarding/WizardProgress.tsx

diff --git a/auto-claude-ui/src/renderer/components/onboarding/WizardProgress.tsx b/auto-claude-ui/src/renderer/components/onboarding/WizardProgress.tsx
new file mode 100644
index 00000000..290b2781
--- /dev/null
+++ b/auto-claude-ui/src/renderer/components/onboarding/WizardProgress.tsx
@@ -0,0 +1,73 @@
+import { Check } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+export interface WizardStep {
+  id: string;
+  label: string;
+  completed: boolean;
+}
+
+interface WizardProgressProps {
+  currentStep: number;
+  steps: WizardStep[];
+}
+
+/**
+ * Step progress indicator component for the onboarding wizard.
+ * Displays numbered circles connected by lines, with visual states
+ * for completed, current, and upcoming steps.
+ */
+export function WizardProgress({ currentStep, steps }: WizardProgressProps) {
+  return (
+    <div className="flex items-center justify-center">
+      {steps.map((step, index) => {
+        const isCompleted = step.completed;
+        const isCurrent = index === currentStep;
+        const isUpcoming = index > currentStep;
+
+        return (
+          <div key={step.id} className="flex items-center">
+            {/* Step indicator circle */}
+            <div className="flex flex-col items-center">
+              <div
+                className={cn(
+                  'flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-semibold transition-all duration-200',
+                  isCompleted && 'border-primary bg-primary text-primary-foreground',
+                  isCurrent && !isCompleted && 'border-primary bg-background text-primary',
+                  isUpcoming && 'border-muted-foreground/40 bg-background text-muted-foreground'
+                )}
+              >
+                {isCompleted ? (
+                  <Check className="h-5 w-5" />
+                ) : (
+                  <span>{index + 1}</span>
+                )}
+              </div>
+              {/* Step label below circle */}
+              <span
+                className={cn(
+                  'mt-2 text-xs font-medium text-center max-w-[80px] truncate',
+                  isCompleted && 'text-primary',
+                  isCurrent && !isCompleted && 'text-primary',
+                  isUpcoming && 'text-muted-foreground'
+                )}
+              >
+                {step.label}
+              </span>
+            </div>
+
+            {/* Connecting line (not after last step) */}
+            {index < steps.length - 1 && (
+              <div
+                className={cn(
+                  'mx-2 h-0.5 w-12 transition-colors duration-200',
+                  step.completed ? 'bg-primary' : 'bg-muted-foreground/40'
+                )}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}