Conversation
…ltip On the /new-project onboarding "Select apps" step, hovering an app no longer shows the stage (Alpha/Beta) badge in the tooltip. The "Required" badge is preserved. The dashboard/app-square, app-store, and cmdk surfaces are unchanged.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📝 WalkthroughWalkthroughAdds an optional back handler to onboarding pages, removes alpha/beta stage badges from app cards, wraps the onboarding page client in Suspense and defers project status map updates via a React transition, introduces a framework-aware "Copy prompt" control, and adds a new CopyPromptButton component. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
There was a problem hiding this comment.
Pull request overview
Removes Alpha/Beta stage badges from the onboarding “Select apps” tooltip on /new-project, while keeping the “Required” badge intact. This aligns onboarding UI with intended information hierarchy without changing stage badge behavior elsewhere.
Changes:
- Removed the
appStageBadgeColorhelper and the conditional stage badge rendering withinOnboardingAppCard’s tooltip. - Preserved the “Required” badge in the tooltip for required apps.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
Greptile SummaryThis PR batches six onboarding UI fixes: removes Alpha/Beta stage badges from the onboarding app-card tooltip, eliminates the full-page Suspense flash by adding a local boundary and wrapping the status state update in Confidence Score: 5/5Safe to merge — only UI-layer changes with no data-model or security impact. All findings are P2 style suggestions. The Suspense/useTransition pattern is used correctly, the hardcoded install commands carry no injection risk, and the disabled-while-saving guard matches existing patterns in the wizard. copy-button.tsx — minor convention mismatch (manual try/catch vs runAsynchronouslyWithAlert) Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[PageClient export] --> B["<Suspense fallback=Spinner>"]
B --> C[PageClientInner]
C -->|"startStatusTransition(setProjectStatuses)"| D[React Transition]
D --> E{Suspends?}
E -->|Yes| F[Show local Spinner fallback]
E -->|No| G[Commit new step UI]
C -->|"refreshOwnedProjects()"| H[Cache refresh]
H --> E
subgraph OnboardingWizard
I[handleBack = useMemo] -->|currentTimelineIndex <= 0| J[undefined — no back arrow]
I -->|currentTimelineIndex > 0| K["() => handleTimelineStepClick(prevStep)"]
K --> L[OnboardingPage onBack prop]
L --> M[Back arrow button rendered]
end
subgraph EmailThemeStep
N[Continue clicked] --> O["saving = true"]
O --> P["disabled={saving} on theme cards"]
P --> Q[Cards dimmed + cursor-not-allowed]
end
Prompt To Fix All With AIThis is a comment left during a code review.
Path: apps/dashboard/src/components/ui/copy-button.tsx
Line: 49-57
Comment:
**Async onClick uses manual try/catch instead of `runAsynchronouslyWithAlert`**
The repo convention is to use `runAsynchronouslyWithAlert` from `@stackframe/stack-shared/dist/utils/promises` for async button-click handlers rather than manual try/catch blocks. The clipboard write and toasts for success/failure can be kept, but the outer error boundary should use the shared utility. Note that the existing `CopyButton` above follows the same pattern — both could be aligned at the same time.
**Rule Used:** Use `runAsynchronouslyWithAlert` from `@stackframe... ([source](https://app.greptile.com/review/custom-context?memory=5e671275-7493-402a-93a8-969537ec4d63))
**Learned From**
[stack-auth/stack-auth#943](https://github.com/stack-auth/stack-auth/pull/943)
How can I resolve this? If you propose a fix, please make it concise.Reviews (2): Last reviewed commit: "fix(dashboard): disable email theme card..." | Re-trigger Greptile |
…-advance setSelectedProjectStatus was awaiting refreshOwnedProjects() after each PATCH to onboarding_status, which invalidated the cache that PageClient itself subscribes to via useOwnedProjects(). That caused the whole wizard subtree to suspend and the layout-level loading.tsx fallback to take over — looking like a full browser reload to the user when moving from auth → email theme. Local projectStatuses state is already updated before the refresh, so the UI already has the new onboarding status. Drop the refresh.
… wizard Moving between onboarding steps briefly blanked the entire page: any cache refresh triggered inside the wizard (project.useConfig, useOwnedProjects, useEmailThemes, ...) would suspend, bubble past PageClient, and trigger the outside-dashboard route-segment loading.tsx fallback -- which replaces the whole content area with the site-wide loading indicator. Felt like a full reload. Contain it locally: - Wrap PageClient's body in a <Suspense> boundary so any suspension shows a small spinner inside the wizard frame instead of bubbling to loading.tsx. - Mark setProjectStatuses with useTransition so React keeps the current step rendered until the next step is ready to commit. Restores the refreshOwnedProjects() call that was removed in the prior attempt; the real fix is structural, not a single-line removal.
The before/after PNGs in pr_screenshots/ are now hosted on a gist referenced from the PR body. Nothing in the stack-auth codebase should carry PR-demo assets.
Previously the only way to go back a step in the new-project onboarding was to click one of the tiny completed-step dots at the bottom -- not obvious. Add a muted left-arrow button immediately left of the timeline dots that advances back one step. Absolute-positioned so the dots stay centered, and hidden on the first step.
…lassmorphism The email-theme step and the config-choice buttons used translucent / backdrop-blur-xl backgrounds while auth and payments used solid cards (bg-white/90 in light mode, bg-white/[0.06] in dark). Steps felt visually inconsistent across the flow. Replace the glassmorphic styling on the email theme cards and the Create New / Link Existing selection buttons with the same solid-card palette the other steps already use. Drop the `glassmorphic` prop on the in-step DesignAlerts so they match too.
One-click AI handoff on the setup page. The button copies a prompt to the clipboard instructing the user's AI agent to run the framework- specific install command and register the Stack Auth MCP server (stack-auth, transport http, https://mcp.stack-auth.com/) if the install didn't do it automatically. The prompt is framework-aware — it picks the right command (Next.js, React, JavaScript, or Python) from the currently-selected framework.
…ving
The email theme selection cards were missing the `disabled={saving}`
flag that the other onboarding steps (config choice, apps selection,
auth setup) already apply. After clicking Continue, while the save was
in flight and the step transition was still pending (we keep the
previous step visible during the transition to avoid a blank flash),
users could keep clicking different themes. Pick another theme and the
save would commit the selection that was active at click time, not the
one the user ended up on.
Now the cards respect the same saving state as every other step —
opacity drops, cursor turns not-allowed, and the onClick is no-op'd.
aadesh18
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (2)
apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/components.tsx (1)
96-107: Avoid hover-enter animation on the new back button.The new back button currently animates on hover-enter via
transition-colors. Please switch to exit-only hover transitions to match dashboard interaction rules.Suggested tweak
- className="absolute right-full mr-3 inline-flex h-5 w-5 items-center justify-center rounded-full text-foreground/40 transition-colors hover:text-foreground/80 disabled:cursor-not-allowed disabled:opacity-40" + className="absolute right-full mr-3 inline-flex h-5 w-5 items-center justify-center rounded-full text-foreground/40 transition-colors hover:transition-none hover:text-foreground/80 disabled:cursor-not-allowed disabled:opacity-40"As per coding guidelines: “AVOID hover-enter transitions; use only hover-exit transitions. For example,
transition-colors hover:transition-none.”🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/app/`(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/components.tsx around lines 96 - 107, The back button currently uses an enter hover transition via "transition-colors"; update the button's class usage for the element that checks props.onBack so it uses exit-only hover transitions by adding hover:transition-none (i.e., change the class list for the button rendered when props.onBack != null to use "transition-colors hover:transition-none" instead of just "transition-colors"), ensuring the disabled classes (disabled:cursor-not-allowed disabled:opacity-40) and icon (ArrowLeftIcon) remain unchanged.apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/setup-page.tsx (1)
28-33: PreferMapover object record for framework command lookup.Line 28-33 uses a record-style object for keyed lookup; please switch this to an ES6
Mapto match repository conventions.As per coding guidelines, "Use ES6 maps instead of records wherever you can".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/app/`(main)/(protected)/projects/[projectId]/(overview)/setup-page.tsx around lines 28 - 33, Replace the record-style constant INSTALL_COMMAND_BY_FRAMEWORK with an ES6 Map instance (e.g., new Map([...])) so lookups follow repo conventions; update its declaration from a plain object to a Map of string-to-string and remove the "as const" usage, then update any code that reads it (calls to INSTALL_COMMAND_BY_FRAMEWORK['nextjs']) to use INSTALL_COMMAND_BY_FRAMEWORK.get('nextjs') and handle possible undefined results accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@apps/dashboard/src/app/`(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/components.tsx:
- Around line 96-107: The back button currently uses an enter hover transition
via "transition-colors"; update the button's class usage for the element that
checks props.onBack so it uses exit-only hover transitions by adding
hover:transition-none (i.e., change the class list for the button rendered when
props.onBack != null to use "transition-colors hover:transition-none" instead of
just "transition-colors"), ensuring the disabled classes
(disabled:cursor-not-allowed disabled:opacity-40) and icon (ArrowLeftIcon)
remain unchanged.
In
`@apps/dashboard/src/app/`(main)/(protected)/projects/[projectId]/(overview)/setup-page.tsx:
- Around line 28-33: Replace the record-style constant
INSTALL_COMMAND_BY_FRAMEWORK with an ES6 Map instance (e.g., new Map([...])) so
lookups follow repo conventions; update its declaration from a plain object to a
Map of string-to-string and remove the "as const" usage, then update any code
that reads it (calls to INSTALL_COMMAND_BY_FRAMEWORK['nextjs']) to use
INSTALL_COMMAND_BY_FRAMEWORK.get('nextjs') and handle possible undefined results
accordingly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 6ff8aacd-5382-4bc7-b370-ca8cdff17e36
📒 Files selected for processing (5)
apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/components.tsxapps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/content.tsxapps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/project-onboarding-wizard.tsxapps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/setup-page.tsxapps/dashboard/src/components/ui/copy-button.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/content.tsx
BilalG1
approved these changes
Apr 28, 2026
Contributor
|
Promptless prepared a documentation update related to this change. Triggered by PR #1377 Adds a changelog entry for the new "Copy prompt" button on the project setup page. This feature helps users hand off Stack Auth setup to AI agents by copying a framework-aware prompt that instructs the agent to run the install command and verify MCP server configuration. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Rolling PR for dashboard UI bug fixes. Each fix is appended to the Fix log below with before/after screenshots. This PR stays open until we batch-merge or split.
Fix log
1. Hide Alpha/Beta stage badges in onboarding "Select apps" tooltip
Bug: On the new-project onboarding, hovering an app card showed an "Alpha" or "Beta" stage badge next to the app name in the tooltip. These shouldn't be surfaced on the onboarding step.
Fix: Removed the stage badge from the onboarding app-card tooltip only. The "Required" badge is preserved, and stage badges on other surfaces (app management, app store, command palette) are unchanged.
Before / After — Beta (Payments)
Before / After — Alpha (Onboarding)
2. Eliminate full-page flash when advancing onboarding steps
Bug: Moving between onboarding steps (e.g. Configure authentication → Select email theme) briefly blanked out the entire page — only the navbar remained visible for roughly two seconds — before the next step rendered. It felt like a complete browser reload.
Fix: Contained the suspension inside the wizard. A local Suspense boundary around the onboarding page means that when any data cache refresh fires during the step advance, the suspension no longer bubbles up to the site-wide loading indicator. The step-advance state update is also marked as a React transition, so the current step stays rendered until the next step is ready to commit. Net effect: the previous step is visible throughout the save, then the next step swaps in without a blank frame.
Before — full blank flash mid-transition
After — previous step stays visible, no blank frame
3. Add a subtle back arrow to the onboarding timeline
Bug: The only way to return to a previous step in the new-project onboarding was to click one of the tiny completed-step dots at the bottom of the page — not discoverable, and easy to miss.
Fix: Added a small muted left-arrow next to the timeline dots. Clicking it advances back one step. It's absolute-positioned so the dots stay perfectly centered, and it hides itself on the first step (where there's nothing to go back to).
Before / After — Select apps step
4. Unify onboarding step styling — cards everywhere, no glassmorphism
Bug: Step-to-step styling in the onboarding was inconsistent. The Config and Email-theme steps used a glassmorphic surround (
backdrop-blur, translucent whites) while the other steps used solid cards. Advancing from auth to email made it look like the visual language had changed mid-flow.Fix: Dropped the glassmorphic variants from the onboarding wizard. The config-choice option cards, the email-theme container, and the
ModeNotImplementedCardsurround all now use the same solid card treatment (bg-white/90light,bg-white/[0.06]dark, with subtle ring). One consistent surface across every step.Before / After — Config choice step
Before / After — Email theme step
5. Add "Copy prompt" button on the project setup page
Bug: The post-project-creation setup page surfaces a terminal command for every framework (Next.js, React, JS, Python), but there was no one-click handoff for users who drive their setup through an AI agent. Users had to manually copy the command, figure out whether the Stack Auth MCP server got registered, and add it themselves if not.
Fix: Added a compact ✦ Copy prompt button at the top-right above the steps list. Clicking it copies a framework-aware prompt to the clipboard — the prompt tells the user's AI agent to run the install command for the currently-selected framework, then verify the Stack Auth MCP server (
stack-auth, transporthttp,https://mcp.stack-auth.com/) is registered in its client config and add it manually if the install didn't.Before / After — Project setup page
6. Disable email theme cards while the onboarding step is saving
Bug: On the "Select an email theme" step, the theme cards stayed clickable after clicking Continue. Because we keep the previous step visible during the step-advance transition (fix #2), users could click through to a different theme mid-save — the server would then commit whatever selection was active at click time, not the one on screen when Continue was pressed.
Fix: Added
disabled={saving}to the email theme buttons, matching the same pattern the config-choice, apps-selection, and auth-setup steps already follow. Addeddisabled:cursor-not-allowed disabled:opacity-60so users get a clear visual signal that the cards are locked while the save is in flight.Test plan
opacity-60,cursor-not-allowed) for the duration of the save and don't respond to clicks. Once the next step renders they stop being visible anyway.Summary by CodeRabbit
New Features
UI/UX Improvements