feat(web): add copy-to-clipboard to CLI install CTA with success check icon #8411

roomote · 2025-09-30T10:01:23Z

Summary:

Adds Lucide Copy icon button to "or via CLI" section on homepage
Copies installation command to clipboard on click
Shows Check icon for 1s to confirm success
Adds timeout cleanup on unmount and aria-live="polite" for accessibility

Implementation:

apps/web-roo-code/src/components/homepage/install-section.tsx
- useState for "copied" state
- handleCopy() with navigator.clipboard and textarea fallback
- Timeout stored in ref and cleared on unmount
- Replaces hardcoded command usage with installCmd constant

Testing:

Lint, type-check, and full test suite pass locally

Acceptance criteria:

Clicking the Copy icon copies "code --install-extension RooVeterinaryInc.roo-cline" to clipboard
Icon switches to Check for ~1s then reverts
Works without errors in browsers where Clipboard API is unavailable (fallback)

Important

Adds copy-to-clipboard feature to CLI install section with success icon in install-section.tsx.

Feature:
- Adds copy-to-clipboard functionality to CLI install section in install-section.tsx.
- Displays a Check icon for 1s after copying to confirm success.
- Uses useState for "copied" state and useEffect for timeout cleanup.
Implementation:
- handleCopy() uses navigator.clipboard and a textarea fallback for copying.
- Timeout stored in timeoutRef and cleared on unmount.
- Replaces hardcoded command with installCmd constant.
Testing:
- Lint, type-check, and full test suite pass locally.
Acceptance Criteria:
- Clicking Copy icon copies command to clipboard and shows Check icon.
- Works without errors in browsers without Clipboard API support.

^{This description was created by}^{for f8d8120. You can customize this summary. It will automatically update as commits are pushed.}

ellipsis-dev · 2025-09-30T10:03:22Z

apps/web-roo-code/src/components/homepage/install-section.tsx

-											<div className="text-sm font-medium text-foreground">or via CLI</div>
+											<div className="flex items-center justify-between">
+												<div className="text-sm font-medium text-foreground">or via CLI</div>
+												<button


UI labels (aria-label, title, and sr-only text) are hardcoded in English. Consider using the project’s translation function (e.g. t('...')) to support internationalization.

^{This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.}

ellipsis-dev · 2025-09-30T10:03:22Z

apps/web-roo-code/src/components/homepage/install-section.tsx

+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(installCmd)
+			setCopied(true)


In handleCopy, the logic for setting the copied state and timeout is duplicated in both try and fallback blocks. Also, consider clearing any existing timeout before setting a new one to avoid potential overlaps on rapid clicks.

github-actions · 2025-09-30T10:03:37Z

🚀 Preview deployed!

Your changes have been deployed to Vercel:

Preview URL: https://roo-code-website-jh2lo7mnn-roo-code.vercel.app

This preview will be updated automatically when you push new commits to this PR.

brunobergher · 2025-09-30T10:13:48Z

@roomote-agent apply the PR feedback, and, additionally:

Move the copy icon to be inside the box where the command is, but to the right (basically same position, just below)
Make the "or via CLI" text centered again.

roomote · 2025-09-30T10:16:32Z

Acknowledged. I will apply the feedback:

Move the copy icon inside the command box, aligned to the right
Center the "or via CLI" text again

I will push updates to the feat/homepage-cli-copy-cta branch shortly.

roomote

Self-review protocol engaged: I argued with myself, lost, and the linter took notes.

roomote · 2025-09-30T10:17:17Z

apps/web-roo-code/src/components/homepage/install-section.tsx

+		try {
+			await navigator.clipboard.writeText(installCmd)
+			setCopied(true)
+			const id = setTimeout(() => setCopied(false), 1000)


[P2] Clear any existing timeout before scheduling a new one to avoid overlapping timers and stale state on rapid clicks.

roomote · 2025-09-30T10:17:17Z

apps/web-roo-code/src/components/homepage/install-section.tsx

+		} catch (_e) {
+			// Fallback for environments without Clipboard API support
+			const textarea = document.createElement("textarea")
+			textarea.value = installCmd


[P3] In fallback, set textarea to readonly and position it offscreen (fixed, left:-9999px) before appendChild to avoid layout shift and improve reliability.

roomote · 2025-09-30T10:17:18Z

apps/web-roo-code/src/components/homepage/install-section.tsx

+		}
+	}, [])
+
+	const handleCopy = async () => {


[P3] Optional: feature-detect isSecureContext and navigator.clipboard?.writeText before calling Clipboard API to avoid relying on exceptions for control flow.

roomote · 2025-09-30T10:17:18Z

apps/web-roo-code/src/components/homepage/install-section.tsx


 export function InstallSection({ downloads }: InstallSectionProps) {
+	const [copied, setCopied] = useState(false)
+	const installCmd = "code --install-extension RooVeterinaryInc.roo-cline"


[P3] Optional: extract installCmd to a shared constant (e.g., apps/web-roo-code/src/lib/constants.ts) to keep it DRY across the site.

roomote · 2025-09-30T10:17:18Z

apps/web-roo-code/src/components/homepage/install-section.tsx

+														<Copy className="h-4 w-4" />
+													)}
+													<span className="sr-only" aria-live="polite" role="status">
+														{copied ? "Copied" : "Copy"}


[P3] Optional a11y: use a more descriptive SR announcement like 'Copied to clipboard' rather than 'Copied'.

…aligned right

roomote · 2025-09-30T10:30:23Z

Update applied per feedback:

Moved the copy icon into the command box, aligned to the right (positioned absolutely in the code container with padding to avoid overlap)
Centered the "or via CLI" text in the header above the command box

Local checks: lint, type-check, and tests pass. CI checks are green. Please take another look.

roomote added 2 commits September 30, 2025 09:48

fix(web): satisfy lint for unused catch var in CLI copy CTA

df52350

chore(web): add timeout cleanup and aria-live for CLI copy CTA

a86125c

roomote bot requested review from cte, jr and mrubens as code owners September 30, 2025 10:01

github-project-automation bot added this to Roo Code Roadmap and Roo Code Roadmap Sep 30, 2025

github-project-automation bot moved this to New in Roo Code Roadmap Sep 30, 2025

github-project-automation bot moved this to Triage in Roo Code Roadmap Sep 30, 2025

dosubot bot added size:M This PR changes 30-99 lines, ignoring generated files. enhancement New feature or request labels Sep 30, 2025

ellipsis-dev bot reviewed Sep 30, 2025

View reviewed changes

hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Sep 30, 2025

roomote bot commented Sep 30, 2025

View reviewed changes

fix(web): center "or via CLI" and place copy icon inside command box …

f8d8120

…aligned right

brunobergher closed this Oct 1, 2025

github-project-automation bot moved this from Triage to Done in Roo Code Roadmap Oct 1, 2025

github-project-automation bot moved this from New to Done in Roo Code Roadmap Oct 1, 2025

feat(web): add copy-to-clipboard to CLI install CTA with success check icon #8411

feat(web): add copy-to-clipboard to CLI install CTA with success check icon #8411

Uh oh!

Conversation

roomote bot commented Sep 30, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ellipsis-dev bot Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 30, 2025

Uh oh!

brunobergher commented Sep 30, 2025

Uh oh!

roomote bot commented Sep 30, 2025

Uh oh!

roomote bot left a comment

Choose a reason for hiding this comment

Uh oh!

roomote bot Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot commented Sep 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

roomote bot commented Sep 30, 2025 •

edited by ellipsis-dev bot

Loading