Add copy action to error toast messages

[juliusmarminge]

Summary

• Added a copy button to error toasts so users can quickly copy the error description.
• Reused the existing clipboard hook and swapped the icon to a checkmark after a successful copy.
• Made toast descriptions selectable so error text is easier to inspect or copy manually.
• Applied the new copy affordance to both floating and anchored toast layouts.

Testing

• Not run (PR content only).

---

Note

Low Risk
Low risk UI-only change that reuses the existing clipboard hook; main risk is minor layout/interaction regressions in toast rendering.

Overview
Adds a CopyErrorButton to toast.tsx and renders it for error toasts when the description is a string, copying the description to the clipboard and swapping CopyIcon to CheckIcon on success.

Toast descriptions are now select-text to allow manual selection/copying, and the copy affordance is applied consistently to both the standard Toasts and AnchoredToasts layouts.

^{Written by Cursor Bugbot for commit 73688f6. This will update automatically on new commits. Configure here.}

Note

Add copy-to-clipboard button to error toast messages

Adds a CopyErrorButton component to error toasts in both Toasts and AnchoredToasts in toast.tsx. The button copies the error description to the clipboard and switches from a CopyIcon to a CheckIcon to confirm success. The description text also gains select-text to allow manual selection.

^{Macroscope summarized 73688f6.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 3ab39e7b-f77a-43b4-8183-c4da84723f1a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch t3code/copy-git-errors

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Inconsistent justify-between in anchored toast title row
  • Added the missing justify-between class to the anchored toast title row wrapper div to match the floating toast layout.

Or push these changes by commenting:

@cursor push 5b654fcb7a

Preview (5b654fcb7a)

diff --git a/apps/web/src/components/ui/toast.tsx b/apps/web/src/components/ui/toast.tsx
--- a/apps/web/src/components/ui/toast.tsx
+++ b/apps/web/src/components/ui/toast.tsx
@@ -400,7 +400,7 @@
                         )}
 
                         <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-                          <div className="flex items-center gap-1">
+                          <div className="flex items-center justify-between gap-1">
                             <Toast.Title
                               className="min-w-0 break-words font-medium"
                               data-slot="toast-title"

[cursor]

Inconsistent justify-between in anchored toast title row

Low Severity

The title-row wrapper in Toasts uses justify-between to push the CopyErrorButton to the far right, but the equivalent wrapper in AnchoredToasts omits it. This causes the copy button to render immediately adjacent to the title text in anchored toasts instead of being right-aligned, resulting in inconsistent placement between the two toast layouts.

Additional Locations (1)

• apps/web/src/components/ui/toast.tsx#L308-L309

 

[cursor]

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Missing type guard for toast description in anchored toast
  • Added typeof toast.description === "string" type guard to the anchored toast at line 408 to match the existing guard in the floating toast at line 314, preventing non-string values from being passed to CopyErrorButton.

Or push these changes by commenting:

@cursor push 30497a89f2

Preview (30497a89f2)

diff --git a/apps/web/src/components/ui/toast.tsx b/apps/web/src/components/ui/toast.tsx
--- a/apps/web/src/components/ui/toast.tsx
+++ b/apps/web/src/components/ui/toast.tsx
@@ -405,7 +405,7 @@
                               className="min-w-0 break-words font-medium"
                               data-slot="toast-title"
                             />
-                            {toast.type === "error" && toast.description && (
+                            {toast.type === "error" && typeof toast.description === "string" && (
                               <CopyErrorButton text={toast.description} />
                             )}
                           </div>

[juliusmarminge]

@cursor push 30497a8