feat(cli-auth): polish paste-code page + CLI keybindings#4075
Merged
Conversation
Web `/cli/auth/code` page rewritten to match Claude Code's auth-code UI: single-line `w-fit` code box, ghost copy button that flips to "Copied!" on press, click-anywhere-on-box to copy, and selection happens on release (programmatic Range) so it stays as a ctrl+c fallback if clipboard write silently fails. CLI `LoginUI` now wires the standard terminal readline shortcuts in the paste-code prompt: option+backspace / ctrl+w delete the previous word, cmd+backspace / ctrl+u / ctrl+k clear the buffer. Plain backspace still deletes one char. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughRefactors the CLI auth code display to use a single copied state, unified copy/selection logic, and keyboard-accessible code area; separately adds input-edit keybindings (Ctrl+u/Ctrl+k clear, Meta+Backspace/Delete and Ctrl+w delete a trailing word) in the CLI login UI. ChangesCLI Auth Code Display Refactor
Login UI Keyboard Shortcuts
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 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. ✨ 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
Greptile Summary
Confidence Score: 3/5Mergeable but the optimistic "Copied!" feedback on clipboard failure is a present UX defect that could mislead users into not manually copying the auth code. One P1 finding (unconditional copied state set before clipboard attempt, misrepresenting failure) pulls the score below the P1 ceiling of 4. The P2 word-delete regex quirk is minor. No security or data-loss risk.
|
| Filename | Overview |
|---|---|
| apps/web/src/app/cli/auth/code/components/CliAuthCodeDisplay/CliAuthCodeDisplay.tsx | Rewrites the auth-code display UI: single-line code box with click-to-copy, ghost button, and programmatic selection fallback. setCopied(true) fires unconditionally before the clipboard write resolves, showing misleading "Copied!" feedback on silent failure. |
| packages/cli/src/commands/auth/login/LoginUI.tsx | Adds readline shortcuts (ctrl+u/k to clear, ctrl+w / option+backspace for word-delete). The word-delete regex eats the preceding space, diverging slightly from standard readline behavior. |
Sequence Diagram
sequenceDiagram
participant User
participant CodeBox as Code Box (div[role=button])
participant CopyBtn as Copy Button
participant handleCopy
participant Clipboard as navigator.clipboard
participant Selection as window.getSelection
User->>CodeBox: click
CodeBox->>handleCopy: onClick
handleCopy->>handleCopy: setCopied(true) ← immediate (unconditional)
handleCopy->>Clipboard: copyToClipboard(value)
alt write succeeds
Clipboard-->>handleCopy: true
else write fails silently
Clipboard-->>handleCopy: false
end
handleCopy->>Selection: selectCode() (Range fallback)
Note over handleCopy,Selection: "Copied!" shown regardless of outcome
User->>CopyBtn: click
CopyBtn->>handleCopy: onClick (same flow)
Prompt To Fix All With AI
Fix the following 2 code review issues. Work through them one at a time, proposing concise fixes.
---
### Issue 1 of 2
apps/web/src/app/cli/auth/code/components/CliAuthCodeDisplay/CliAuthCodeDisplay.tsx:61-67
**"Copied!" shown unconditionally before clipboard attempt**
`setCopied(true)` fires immediately — before `copyToClipboard` is even called — and regardless of whether the write succeeds. The previous code conditioned the flash on `if (ok) flash()`. When `navigator.clipboard.writeText` silently fails (e.g. no permission, non-secure context) the UI confidently declares "Copied!" while the clipboard is unchanged. The `selectCode()` fallback only helps users who notice the selection and know to press Ctrl+C, but the feedback actively misleads them into thinking no action is needed.
### Issue 2 of 2
packages/cli/src/commands/auth/login/LoginUI.tsx:60
**Word-delete regex swallows the preceding space**
`/\s*\S+\s*$/` removes any whitespace *before* the final word, not just trailing whitespace. For `"hello world"`, pressing `ctrl+w` yields `"hello"` instead of the standard readline result `"hello "` (the space belongs to the previous word boundary). In bash, `ctrl+w` (WERASE) and `option+backspace` (META-DEL) delete the word but preserve the space that preceded it. The regex should instead be `/ *\S+$/` (strip only the non-whitespace token plus any directly trailing spaces, leaving the preceding delimiter intact).
```suggestion
setValue((v) => v.replace(/ *\S+$/, ""));
```
Reviews (1): Last reviewed commit: "feat(cli-auth): polish paste-code page +..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Comment on lines
+61
to
67
| const handleCopy = async () => { | ||
| setCopied(true); | ||
| if (timerRef.current) clearTimeout(timerRef.current); | ||
| timerRef.current = setTimeout(() => setCopied(false), 2000); | ||
| }; | ||
| return [copied, flash] as const; | ||
| } | ||
|
|
||
| export function CliAuthCodeDisplay({ code, state }: CliAuthCodeDisplayProps) { | ||
| const value = `${code}#${state}`; | ||
| const [boxCopied, flashBox] = useCopiedFlag(); | ||
| const [buttonCopied, flashButton] = useCopiedFlag(); | ||
|
|
||
| const handleCopy = async (flash: () => void) => { | ||
| const ok = await copyToClipboard(value); | ||
| if (ok) flash(); | ||
| await copyToClipboard(value); | ||
| selectCode(); | ||
| }; |
Contributor
There was a problem hiding this comment.
setCopied(true) fires immediately — before copyToClipboard is even called — and regardless of whether the write succeeds. The previous code conditioned the flash on if (ok) flash(). When navigator.clipboard.writeText silently fails (e.g. no permission, non-secure context) the UI confidently declares "Copied!" while the clipboard is unchanged. The selectCode() fallback only helps users who notice the selection and know to press Ctrl+C, but the feedback actively misleads them into thinking no action is needed.
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/web/src/app/cli/auth/code/components/CliAuthCodeDisplay/CliAuthCodeDisplay.tsx
Line: 61-67
Comment:
**"Copied!" shown unconditionally before clipboard attempt**
`setCopied(true)` fires immediately — before `copyToClipboard` is even called — and regardless of whether the write succeeds. The previous code conditioned the flash on `if (ok) flash()`. When `navigator.clipboard.writeText` silently fails (e.g. no permission, non-secure context) the UI confidently declares "Copied!" while the clipboard is unchanged. The `selectCode()` fallback only helps users who notice the selection and know to press Ctrl+C, but the feedback actively misleads them into thinking no action is needed.
How can I resolve this? If you propose a fix, please make it concise.| (key.meta && (key.backspace || key.delete)) || | ||
| (key.ctrl && input === "w") | ||
| ) { | ||
| setValue((v) => v.replace(/\s*\S+\s*$/, "")); |
Contributor
There was a problem hiding this comment.
/\s*\S+\s*$/ removes any whitespace before the final word, not just trailing whitespace. For "hello world", pressing ctrl+w yields "hello" instead of the standard readline result "hello " (the space belongs to the previous word boundary). In bash, ctrl+w (WERASE) and option+backspace (META-DEL) delete the word but preserve the space that preceded it. The regex should instead be / *\S+$/ (strip only the non-whitespace token plus any directly trailing spaces, leaving the preceding delimiter intact).
Suggested change
| setValue((v) => v.replace(/\s*\S+\s*$/, "")); | |
| setValue((v) => v.replace(/ *\S+$/, "")); |
Prompt To Fix With AI
This is a comment left during a code review.
Path: packages/cli/src/commands/auth/login/LoginUI.tsx
Line: 60
Comment:
**Word-delete regex swallows the preceding space**
`/\s*\S+\s*$/` removes any whitespace *before* the final word, not just trailing whitespace. For `"hello world"`, pressing `ctrl+w` yields `"hello"` instead of the standard readline result `"hello "` (the space belongs to the previous word boundary). In bash, `ctrl+w` (WERASE) and `option+backspace` (META-DEL) delete the word but preserve the space that preceded it. The regex should instead be `/ *\S+$/` (strip only the non-whitespace token plus any directly trailing spaces, leaving the preceding delimiter intact).
```suggestion
setValue((v) => v.replace(/ *\S+$/, ""));
```
How can I resolve this? If you propose a fix, please make it concise.
Contributor
🚀 Preview Deployment🔗 Preview Links
Preview updates automatically with new commits |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/web/src/app/cli/auth/code/components/CliAuthCodeDisplay/CliAuthCodeDisplay.tsx (1)
80-86: 💤 Low value
onClickpasses asynchandleCopydirectly — inconsistent withonKeyDown.Line 80 assigns
handleCopy(anasyncfunction) directly toonClick, while line 84 explicitly usesvoid handleCopy(). Projects with@typescript-eslint/no-misused-promiseswill flag the direct assignment becauseMouseEventHandlerexpects() => void, not() => Promise<void>.🔧 Proposed fix
- onClick={handleCopy} + onClick={() => void handleCopy()}🤖 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 `@apps/web/src/app/cli/auth/code/components/CliAuthCodeDisplay/CliAuthCodeDisplay.tsx` around lines 80 - 86, The onClick currently passes the async function handleCopy directly (onClick={handleCopy}), which can trigger `@typescript-eslint/no-misused-promises`; change it to an inline void-invoking wrapper like onClick={() => { void handleCopy(); }} (similar to the onKeyDown usage) so the handler signature is () => void; update the CliAuthCodeDisplay JSX to replace the direct reference to handleCopy with the arrow wrapper to avoid returning a Promise from onClick.
🤖 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.
Nitpick comments:
In
`@apps/web/src/app/cli/auth/code/components/CliAuthCodeDisplay/CliAuthCodeDisplay.tsx`:
- Around line 80-86: The onClick currently passes the async function handleCopy
directly (onClick={handleCopy}), which can trigger
`@typescript-eslint/no-misused-promises`; change it to an inline void-invoking
wrapper like onClick={() => { void handleCopy(); }} (similar to the onKeyDown
usage) so the handler signature is () => void; update the CliAuthCodeDisplay JSX
to replace the direct reference to handleCopy with the arrow wrapper to avoid
returning a Promise from onClick.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: ff49a2c2-8df7-4265-ab9f-a57a0c54931c
📒 Files selected for processing (2)
apps/web/src/app/cli/auth/code/components/CliAuthCodeDisplay/CliAuthCodeDisplay.tsxpackages/cli/src/commands/auth/login/LoginUI.tsx
…separator - CliAuthCodeDisplay: re-condition the "Copied!" flash on a successful clipboard.writeText. selectCode() still runs unconditionally so users on contexts that block the clipboard API can ctrl+c the highlighted text. - LoginUI: word-delete regex now preserves the preceding separator space, matching readline WERASE / option+backspace behavior. "hello world" + ctrl+w now yields "hello " instead of "hello". Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
saddlepaddle
added a commit
that referenced
this pull request
May 5, 2026
Two CLI changes since v0.2.7, both fixing remote-auth UX: - `superset auth login` now races the loopback callback and the paste prompt in parallel, with an Ink UI for the paste path. Fixes login on remote machines where SSH_CONNECTION isn't set (tmux reattach, VS Code Remote, Codespaces, mosh). `c` copies the auth URL via OSC 52 with native `pbcopy`/`clip`/`wl-copy`/`xclip`/`xsel` fallback. Esc / Ctrl-C exit cleanly. (#4072) - Polished the `/cli/auth/code` web page to match Claude Code's paste-code UI (single-line code box, ghost copy button, click-to- copy with selection-on-release fallback). Wired standard readline shortcuts in the CLI paste prompt: option+backspace / ctrl+w delete the previous word; cmd+backspace / ctrl+u / ctrl+k clear the buffer. (#4075) Push cli-v0.2.8 after this lands to fire the release pipeline.
saddlepaddle
added a commit
that referenced
this pull request
May 6, 2026
* feat(cli-auth): polish paste-code page + CLI keybindings Web `/cli/auth/code` page rewritten to match Claude Code's auth-code UI: single-line `w-fit` code box, ghost copy button that flips to "Copied!" on press, click-anywhere-on-box to copy, and selection happens on release (programmatic Range) so it stays as a ctrl+c fallback if clipboard write silently fails. CLI `LoginUI` now wires the standard terminal readline shortcuts in the paste-code prompt: option+backspace / ctrl+w delete the previous word, cmd+backspace / ctrl+u / ctrl+k clear the buffer. Plain backspace still deletes one char. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(cli-auth): only flash "Copied!" on success, preserve word-delete separator - CliAuthCodeDisplay: re-condition the "Copied!" flash on a successful clipboard.writeText. selectCode() still runs unconditionally so users on contexts that block the clipboard API can ctrl+c the highlighted text. - LoginUI: word-delete regex now preserves the preceding separator space, matching readline WERASE / option+backspace behavior. "hello world" + ctrl+w now yields "hello " instead of "hello". Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
saddlepaddle
added a commit
that referenced
this pull request
May 6, 2026
Two CLI changes since v0.2.7, both fixing remote-auth UX: - `superset auth login` now races the loopback callback and the paste prompt in parallel, with an Ink UI for the paste path. Fixes login on remote machines where SSH_CONNECTION isn't set (tmux reattach, VS Code Remote, Codespaces, mosh). `c` copies the auth URL via OSC 52 with native `pbcopy`/`clip`/`wl-copy`/`xclip`/`xsel` fallback. Esc / Ctrl-C exit cleanly. (#4072) - Polished the `/cli/auth/code` web page to match Claude Code's paste-code UI (single-line code box, ghost copy button, click-to- copy with selection-on-release fallback). Wired standard readline shortcuts in the CLI paste prompt: option+backspace / ctrl+w delete the previous word; cmd+backspace / ctrl+u / ctrl+k clear the buffer. (#4075) Push cli-v0.2.8 after this lands to fire the release pipeline.
MocA-Love
added a commit
to MocA-Love/superset
that referenced
this pull request
May 29, 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
1 participant
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
/cli/auth/codepage to match Claude Code's auth-code UI: single-linew-fitcode box, ghost copy button that flips to "✓ Copied!" on press, click-anywhere-on-the-box to copy, and selection happens on release (programmaticRange) so it stays as a ctrl+c fallback ifclipboard.writeTextsilently fails.option+backspace/ctrl+wdelete the previous word,cmd+backspace/ctrl+u/ctrl+kclear the buffer. Plainbackspacestill deletes one char.No DB or schema changes. Prod
superset-clioauth_clientsrow is unaffected (verified).Test plan
superset auth loginagainst local dev: paste flow renders the new page, click on text or button copies, selection highlights on release.superset auth loginpaste prompt:option+backspacedeletes a word,ctrl+uclears the buffer.superset auth loginagainst prod still works (no redirect_uri changes).🤖 Generated with Claude Code
Summary by cubic
Polished the CLI auth paste-code flow. Rebuilt the web auth-code page to match Claude Code and added readline shortcuts in the CLI prompt; copy feedback is now accurate and word deletion matches readline.
New Features
Bug Fixes
Written for commit c3cb97d. Summary will update on new commits.
Summary by CodeRabbit
New Features
Refactor