feat(cli): animate the "Next steps" header with a mauve reflex sweep#322
Merged
Conversation
🦋 Changeset detectedLatest commit: 9d98b89 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds a new gradient module that renders a per-character “shine” effect and an async animateHeader function gated on TTY/color environment. spinner.outro is made async and awaits animateHeader for array-style next-steps; deploy, auth login, and link commands are updated to use/await the animated header, and deploy’s copy is split into header and body helpers. Tests and a changeset entry are included. Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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 `@packages/cli-core/src/lib/gradient.ts`:
- Around line 58-61: The space branch in the gradient rendering (the if (ch ===
" ") block that appends to out) currently appends the space while the previous
foreground color is still active, causing spaces to inherit color; modify this
branch in the function containing variables ch and out so it resets or clears
the current foreground color (use whatever foreground-reset sequence or helper
your codebase uses) before appending the space and then continue without
reapplying the color—i.e., emit a foreground-reset, append the space to out, and
return.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 8fc59a77-9a4f-4bc5-b961-bccde7575d95
📒 Files selected for processing (8)
.changeset/next-steps-gradient-animation.mdpackages/cli-core/src/commands/auth/login.tspackages/cli-core/src/commands/deploy/copy.tspackages/cli-core/src/commands/deploy/index.tspackages/cli-core/src/commands/link/index.tspackages/cli-core/src/lib/gradient.test.tspackages/cli-core/src/lib/gradient.tspackages/cli-core/src/lib/spinner.ts
Render the "Next steps" header in a dusty mauve and sweep a white reflex highlight across it once after `clerk deploy`, `clerk link`, and `clerk auth login`, then settle on the flat color. The animation only runs on an interactive color TTY; piped output, CI, and NO_COLOR fall back to plain styling. A process exit guard restores the cursor if Ctrl-C lands mid-sweep, and FORCE_COLOR is parsed so 0/false/"" don't override NO_COLOR.
…eText Spaces were inheriting the previous character's foreground color because the space branch appended the character while the ANSI color escape was still active. Now resets to the default foreground color (\x1b[39m) before the space is output, and also awaits outro() in withGutter since outro is now async. Addresses CodeRabbit review comment on PR #322.
rafa-thayto
force-pushed
the
feat/next-steps-gradient-animation
branch
from
120c8bc to
01cf139
Compare
There was a problem hiding this comment.
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 `@packages/cli-core/src/lib/gradient.ts`:
- Around line 113-139: The animateHeader function is writing directly via log.ui
(in the initial fallback path and inside the animation loop) which can conflict
with callers that provide a custom UI writer; update AnimateHeaderOptions to
accept a ui writer (e.g., ui: (s: string) => void) and replace all direct log.ui
calls in animateHeader with that ui writer (use the provided ui for the
non-interactive/fallback branch, each frame write, and the final line including
the newline). Keep existing option defaults (frames, intervalMs) and ensure the
string payloads (including the \r\x1b[K sequences and newline) are passed
unchanged to the supplied ui function.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: e867f4e1-7b4a-42e3-acb0-b5f096a75477
📒 Files selected for processing (8)
.changeset/next-steps-gradient-animation.mdpackages/cli-core/src/commands/auth/login.tspackages/cli-core/src/commands/deploy/copy.tspackages/cli-core/src/commands/deploy/index.tspackages/cli-core/src/commands/link/index.tspackages/cli-core/src/lib/gradient.test.tspackages/cli-core/src/lib/gradient.tspackages/cli-core/src/lib/spinner.ts
✅ Files skipped from review due to trivial changes (1)
- .changeset/next-steps-gradient-animation.md
🚧 Files skipped from review as they are similar to previous changes (5)
- packages/cli-core/src/commands/auth/login.ts
- packages/cli-core/src/commands/link/index.ts
- packages/cli-core/src/commands/deploy/copy.ts
- packages/cli-core/src/lib/gradient.test.ts
- packages/cli-core/src/commands/deploy/index.ts
Add a `write` option to `AnimateHeaderOptions` (defaults to `log.ui`) so callers can direct header output to the same stream as the surrounding UI. Pass `writeUi` from `spinner.ts` so the "Next steps" header lands on the active UI output stream instead of bypassing it via `log.ui` directly. Fix the spinner test to properly await the now-async `outro` call inside the stderr capture helper.
dmoerner
approved these changes
Jun 11, 2026
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
2 participants
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
Gives the
Next stepsheader a subtle one-shot animation, inspired by Claude Code's animated keywords.#bd84b0) and sweeps a white reflex highlight across it once (~450ms), then settles on the flat color.Next stepsheader:clerk auth login,clerk link, and theclerk deploywizard (viaoutro(string[])andfinishDeploy).printNextSteps(bare→lines, no header) are unchanged.New
lib/gradient.tscarries the color math (hslToRgb,rgbTo256), theshineTextrenderer (flat base + moving reflex), andanimateHeader(the one-shot sweep).outrobecomesasyncso callersawaitthe sweep before the steps print and before the post-action update notification fires.Behavior & safety
NO_COLORget the plainfallbackstyling with no cursor control or carriage returns, so logs stay clean. Agents never see it (isHuman()gate upstream).COLORTERM.process.on("exit")listener re-shows the cursor if Ctrl-C lands mid-sweep (the SIGINT handler'sprocess.exitskips thefinally).FORCE_COLORparsed correctly so0/false/""don't overrideNO_COLOR.Test plan
bun run typecheck,bun run lint,bun run format:check— all clean.bun teston touched files:gradient(24),spinner(1),deploy/index(58),deploy/copy(13),link(55),auth/login(17) — all pass.gradient.test.tscovers the color math, flat-vs-reflex rendering, the empty/whitespace guard, the non-interactive fallback, cursor hide/restore balance, and the fullNO_COLOR×FORCE_COLORgating matrix.process.exit.A multi-agent audit confirmed which next-steps surfaces are animated vs not, and an adversarial bug hunt surfaced the cursor-restore and
FORCE_COLORissues that are fixed here.