Skip to content

fix(onboarding): hide API key placeholder while loading - #2877

Open
WcaleNieWolny wants to merge 6 commits into
mainfrom
wolny/onboarding-apikey-loading
Open

fix(onboarding): hide API key placeholder while loading#2877
WcaleNieWolny wants to merge 6 commits into
mainfrom
wolny/onboarding-apikey-loading

Conversation

@WcaleNieWolny

@WcaleNieWolny WcaleNieWolny commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

Summary

  • replace the temporary API key placeholder with the existing Capgo spinner and concise loading copy
  • prevent CLI command copying until the API key is ready and use native DaisyUI buttons once ready
  • keep builder command display consistent with copied output by passing its API key only through the -a flag

Test plan

  1. Start app onboarding and continue to a CLI setup screen while API key creation is pending.
  2. Confirm the command card shows the spinner and Creating your secure API key… instead of an APIKEY placeholder.
  3. Confirm the pending card cannot be focused or copied.
  4. After key creation completes, confirm the CLI command and copy button appear and copying returns the displayed command.
  5. Select Builder setup and confirm the displayed command contains the API key only once, after the -a flag.

Automated verification:

  • bun lint:backend
  • bun lint
  • bun typecheck
  • bun test:unit (189 files, 1,366 tests)
  • bun run build

Screenshots

Not attached because this is a short-lived transition state. The repository Visual diff check and focused onboarding loading-state regression test validate the frontend change.

Checklist

  • My code follows the code style of this project and passes bun run lint:backend and bun run lint.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • My change has adequate E2E test coverage.
  • I have tested my code and provided reproduction steps above.

Summary by CodeRabbit

  • New Features

    • Resumed onboarding now loads without waiting for API key creation.
    • Command panels show a clear loading state while the API key is being prepared.
    • Copy actions remain unavailable until the API key is ready.
    • Ready-to-use commands are presented as interactive buttons.
  • Bug Fixes

    • Prevented incomplete or placeholder API keys from appearing in onboarding commands.
    • Ensured builder commands include only the required API key option.

@coderabbitai

coderabbitai Bot commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Warning

Review limit reached

You’ve reached a temporary PR review limit under our Fair Usage Limits Policy.

Your recent review volume is higher than typical usage, so adaptive limits are currently applied.

Next review available in: 40 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: ef577c66-1c13-4613-8c88-20baf543d48d

📥 Commits

Reviewing files that changed from the base of the PR and between 25cb64d and 24a89e3.

📒 Files selected for processing (3)
  • docs/superpowers/plans/2026-08-06-nonblocking-resume-apikey.md
  • src/components/dashboard/AppOnboardingFlow.vue
  • tests/app-onboarding-apikey-loading.unit.test.ts
📝 Walkthrough

Walkthrough

The onboarding flow no longer displays [APIKEY] while an API key is unavailable. Resumed apps load before asynchronous key provisioning starts. Command panels show a loading state, prevent copying, and render commands after key creation.

Changes

Onboarding API key loading

Layer / File(s) Summary
Nonblocking resume and API key flow
src/components/dashboard/AppOnboardingFlow.vue, tests/app-onboarding-apikey-loading.unit.test.ts, docs/superpowers/specs/..., docs/superpowers/plans/...
Resume loading completes before ensureApiKey() starts without awaiting. Tests and design documentation cover the initialization order and error handling.
Command readiness and copy behavior
src/components/dashboard/AppOnboardingFlow.vue
CLI commands omit placeholder API keys. Builder arguments include the API-key flag only when a key exists. Copy actions stop when no key exists.
Onboarding command panel states
src/components/dashboard/AppOnboardingFlow.vue, messages/en.json, tests/app-onboarding-apikey-loading.unit.test.ts
Details, setup, and install panels show localized loading feedback until the key is ready. Tests cover loading states, native buttons, and command arguments.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

  • Cap-go/capgo.app#2854: Both PRs modify onboarding loading behavior in AppOnboardingFlow.vue, but this PR covers API key provisioning.
  • Cap-go/capgo.app#2856: Both PRs modify AppOnboardingFlow.vue, but this PR covers API key loading rather than dashboard navigation.

Suggested labels: codex

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description check ✅ Passed The description includes the required summary, test plan, screenshots note, and checklist, with clear validation steps and results.
Title check ✅ Passed The title clearly and concisely describes the primary onboarding change: hiding the API key placeholder during loading.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot added the codex label Aug 6, 2026
@codspeed-hq

codspeed-hq Bot commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

Merging this PR will not alter performance

✅ 43 untouched benchmarks
⏩ 2 skipped benchmarks1


Comparing wolny/onboarding-apikey-loading (24a89e3) with main (60a641e)

Open in CodSpeed

Footnotes

  1. 2 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 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 `@src/components/dashboard/AppOnboardingFlow.vue`:
- Around line 137-138: Keep the displayed command consistent with copyCliCommand
by ensuring builder setup commands pass the API key only through the -a flag in
the CLI argument construction and display logic around usesBuilderSetupCommand
and cliCommandArgs. Render the positional API key only for the i command, and
add an assertion covering the builder command display so it matches the copied
command.
- Around line 1251-1273: Replace the clickable command-panel divs in the API-key
branches of the onboarding flow with the appropriate DaisyUI d- interactive
primitive, removing the manual role, tabindex, and keyboard handlers while
preserving click-to-copy behavior and styling. Keep the loading branch as a
noninteractive status element, and apply the same change to the corresponding
panels near the other referenced sections.
🪄 Autofix

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: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: e912d911-7a3b-4606-a43d-5d795a7127d1

📥 Commits

Reviewing files that changed from the base of the PR and between 4e07d7d and e4de957.

📒 Files selected for processing (3)
  • messages/en.json
  • src/components/dashboard/AppOnboardingFlow.vue
  • tests/app-onboarding-apikey-loading.unit.test.ts
🔗 Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:

  • Cap-go/capacitor-updater (manual)

Comment thread src/components/dashboard/AppOnboardingFlow.vue
Comment thread src/components/dashboard/AppOnboardingFlow.vue Outdated

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All reported issues were addressed

Reply with feedback, questions, or to request a fix.

Re-trigger cubic

Comment thread tests/app-onboarding-apikey-loading.unit.test.ts Outdated

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All reported issues were addressed across 2 files (changes from recent commits).

Reply with feedback, questions, or to request a fix.

Re-trigger cubic

Comment thread src/components/dashboard/AppOnboardingFlow.vue Outdated
@WcaleNieWolny

Copy link
Copy Markdown
Contributor Author

Added 25cb64d to fix the full-page spinner reported for regular Create app flows. The resumed app now loads and renders before API-key provisioning starts; key creation continues asynchronously, with the CLI command card retaining its loading/copy-disabled state. Added a regression assertion and reran lint, backend lint, typecheck, 1,367 unit tests, and the production build.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 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 `@docs/superpowers/plans/2026-08-06-nonblocking-resume-apikey.md`:
- Line 13: Change the “Task 1: Make resume API-key provisioning nonblocking”
heading to a level-2 Markdown heading so the document’s heading hierarchy
follows MD001.

In `@src/components/dashboard/AppOnboardingFlow.vue`:
- Around line 882-889: Update
src/components/dashboard/AppOnboardingFlow.vue:882-889 and loadResumeApp so the
resume path never awaits ensureApiKey(); invoke it only through the existing
handled background call after app loading, preserving error logging and the
toast while ensuring setup resumes render immediately. Update
docs/superpowers/plans/2026-08-06-nonblocking-resume-apikey.md:21-29 to require
coverage for resumeStep.value === 'setup' with a pending API-key promise. Update
tests/app-onboarding-apikey-loading.unit.test.ts:19-25 to test the setup-resume
path or inspect loadResumeApp directly, since the current onMounted slice misses
the nested await.
🪄 Autofix

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: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 665b16d5-455d-4075-bfa0-e6d202ebc376

📥 Commits

Reviewing files that changed from the base of the PR and between e4de957 and 25cb64d.

📒 Files selected for processing (4)
  • docs/superpowers/plans/2026-08-06-nonblocking-resume-apikey.md
  • docs/superpowers/specs/2026-08-06-nonblocking-resume-apikey-design.md
  • src/components/dashboard/AppOnboardingFlow.vue
  • tests/app-onboarding-apikey-loading.unit.test.ts
🔗 Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:

  • Cap-go/capacitor-updater (manual)

Comment thread docs/superpowers/plans/2026-08-06-nonblocking-resume-apikey.md Outdated
Comment thread src/components/dashboard/AppOnboardingFlow.vue

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All reported issues were addressed across 4 files (changes from recent commits).

Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic

Comment thread docs/superpowers/plans/2026-08-06-nonblocking-resume-apikey.md Outdated
Comment thread tests/app-onboarding-apikey-loading.unit.test.ts Outdated
@sonarqubecloud

sonarqubecloud Bot commented Aug 6, 2026

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant