fix: onboarding progress bar hardcoded to step 1 only

[Tilakraj1491]

🚀 Program

GSSoC

📝 Description

The onboarding progress bar in client/src/pages/Onboarding.jsx was hardcoded
to always highlight only the first step ("Record") using index === 0. Steps
"Clone" and "Call" remained grey permanently regardless of the user's actual
progress.

The fix derives the active step from already-existing state:

• recording === null → step 0 (only "Record" highlighted)
• recording is set → step 1 ("Record" + "Clone" highlighted)
• successProfile is set → step 2 (all 3 bars highlighted).

No new state or props were added. The change touches a single condition
in the progress bar map inside Onboarding.jsx.

🔗 Related Issue

Closes #64

🔄 Type of Change

• 🐛 Bug fix

🧪 How to Test

1. Open http://localhost:5173 in Chrome or Edge.
2. Navigate to the Onboarding tab.
3. Observe only the first progress bar ("Record") is coral on arrival.
4. Click Start recording, speak, then click Stop recording.
5. Observe the second bar ("Clone") is now also coral.
6. Enter a voice name and click Clone voice.
7. Once cloning succeeds, observe all three bars are coral.

📸 Screenshots (if applicable)

✅ Checklist

• I am contributing under GSSoC, NSOC, SSOC, or ELUSOC
• My code follows the project's existing style
• I have tested my changes in a browser
• I have linked the related issue above
• My PR title follows Conventional Commits format (e.g. fix: onboarding progress bar hardcoded to step 1 only)

Summary by CodeRabbit

• Bug Fixes
  • Onboarding shows the correct step label (e.g., "Step 2 of 3"), updates the step counter consistently, and highlights all completed steps in the progress bar for clearer progress tracking.
• Chores
  • Updated example environment template placeholder for the external API key.

[vercel]

@Tilakraj1491 is attempting to deploy a commit to the itzzavdhesh's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

The Onboarding component now computes a currentStep from successProfile and recording, uses it to render "Step {currentStep + 1} of 3", and highlights all progress steps whose index is <= currentStep instead of only the first step.

Changes

Onboarding Progress Tracking

Layer / File(s)	Summary
Progress state computation and UI rendering client/src/pages/Onboarding.jsx	Computes currentStep from successProfile and recording, updates the step counter text to currentStep + 1, and changes progress indicator condition to index <= currentStep so completed steps are highlighted.

Environment example update

Layer / File(s)	Summary
Update ELEVENLABS_API_KEY placeholder .env.example	Replaces the ELEVENLABS_API_KEY example value with a new placeholder string (includes a leading space).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related issues

• Issue #64: Directly addresses the same progress-bar bug by replacing hardcoded index === 0 logic with currentStep-based step highlighting.
• Issue #63: Both changes update the Onboarding component to compute progress from recording and successProfile state instead of hardcoded first-step highlighting.

Poem

🐰 I hopped through steps one, two, and three,
I counted each beat from record to clone,
No longer stuck on the first, I see,
Little lights glow where progress has grown,
A joyful hop — my change is shown.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The .env.example modification updating ELEVENLABS_API_KEY placeholder is unrelated to the progress bar fix objective and appears to be out-of-scope change.	Remove the unrelated .env.example change; if needed, address it in a separate PR focused on environment configuration updates.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and accurately describes the main change: fixing the hardcoded progress bar that was only highlighting step 1, which aligns with the primary objective of the PR.
Linked Issues check	✅ Passed	The PR successfully addresses all coding requirements from issue #64: removes hardcoded index===0 condition, derives active step from existing state (recording and successProfile), limits changes to progress grid in Onboarding.jsx, and implements correct three-step highlighting logic.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@client/src/pages/Onboarding.jsx`:
- Line 14: The step label is hardcoded ("Step 1 of 3") and can get out of sync
with the derived state variable currentStep; update the label to reuse
currentStep (e.g., render currentStep + 1) so it always matches the highlighted
bars. Locate the currentStep constant and replace the hardcoded label text with
a computed string that uses currentStep (and the total steps constant if
present) so the UI shows the correct "Step X of Y" dynamically.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 20ded4ea-5ad4-4c42-b34e-0827dd46b8ee

📥 Commits

Reviewing files that changed from the base of the PR and between 36602b5 and b28b2dd.

📒 Files selected for processing (1)

• client/src/pages/Onboarding.jsx

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
voice-forge-client	Ready	Preview, Comment	Jun 2, 2026 5:32pm

[github-actions]

DCO Sign-off Verified

Hi @Tilakraj1491, all commits currently include a valid Signed-off-by: line.

Your DCO check is clear. Maintainers will continue with the normal PR review flow.

VoiceForge automation

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.env.example:
- Line 2: Remove the unintended leading space after the equals sign for the
ELEVENLABS_API_KEY example value: edit the .env.example entry for the
ELEVENLABS_API_KEY variable so the value starts immediately after '=' (no
prefixed whitespace) to prevent accidental copying of a space into real env
files.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 279f89b3-564a-4970-9e65-896a57cd70c9

📥 Commits

Reviewing files that changed from the base of the PR and between 09b0dfd and 495fd21.

📒 Files selected for processing (1)

• .env.example

[github-actions]

PR Format Check Passed

Hi @Tilakraj1491, thank you for opening this PR.

Your PR has passed the automated structure checks and entered the maintainer review queue.

Check	Status
Program template	Passed
Closing issue	#64
Issue assignment	PR author matches linked issue assignee
Title format	Conventional Commits title detected
PR details	Description has enough review context
Change size	8 lines changed across 2 file(s)

This does not mean the PR is approved yet. A maintainer will still review scope, code quality, tests, and merge readiness.

VoiceForge automation

[coderabbitai]

♻️ Duplicate comments (1)

.env.example (1)

2-2: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Remove the leading space after = to prevent authentication failures.

The placeholder value has a leading space after the equals sign. Users copying this format may inadvertently include the space when pasting their actual API key, breaking ElevenLabs authentication.

🔧 Proposed fix

-ELEVENLABS_API_KEY= paste_your_api_key_here
+ELEVENLABS_API_KEY=paste_your_api_key_here

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.env.example at line 2, The ELEVENLABS_API_KEY entry in .env.example
currently has a leading space after the equals sign which can cause pasted API
keys to include that space and break authentication; edit the ELEVENLABS_API_KEY
line to remove the space so it reads ELEVENLABS_API_KEY=<your_api_key_here>
(update the placeholder text if desired) to ensure keys copy/paste correctly.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Duplicate comments:
In @.env.example:
- Line 2: The ELEVENLABS_API_KEY entry in .env.example currently has a leading
space after the equals sign which can cause pasted API keys to include that
space and break authentication; edit the ELEVENLABS_API_KEY line to remove the
space so it reads ELEVENLABS_API_KEY=<your_api_key_here> (update the placeholder
text if desired) to ensure keys copy/paste correctly.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 64de446e-7aac-4356-bbb1-f843cdd81aa0

📥 Commits

Reviewing files that changed from the base of the PR and between 495fd21 and bb6a7a4.

📒 Files selected for processing (1)

• .env.example

[github-actions]

PR Merged

Hi @Tilakraj1491, thank you for your contribution to VoiceForge.

This pull request has been merged successfully and marked as complete.

Item	Status
PR	#65 merged
Linked issue(s)	#64
Completion labels	merged, pr-merged, completed

Maintainers may still do final cleanup, release notes, or follow-up tracking after merge.

VoiceForge automation