fix(web): add close icon for slow request toast

[kendalled]

What Changed

• Added an opt-in toast close affordance via showCloseButton in toast data.
• Updated the toast renderer to display a subtle top-right x close control when showCloseButton is enabled. This is in line with the styling of the buttons in the settings menu to stay in theme. Design taken from "refresh provider" button to maintain consistency.
• Enabled showCloseButton for the Some requests are slow warning toast in SlowRpcAckToastCoordinator.

Why

The slow-requests toast is pinned (timeout: 0) and was only dismissible via swipe/drag, which is not discoverable on desktop and feels touch-centric. Many users would probably think it's stuck and struggle to dismiss it (including me).
Adding an explicit close control makes dismissal obvious and reliable without changing the underlying slow-request detection behavior.

UI Changes

Before:

• Some requests are slow toast had no visible dismiss control.

Screenshot:

After:

• Some requests are slow toast includes a subtle top-right x close control.

Screenshot:

Interaction video:

• Shows clicking the x to dismiss the toast.

Video:

Screen.Recording.2026-04-15.at.5.42.37.PM.mov

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Note

Low Risk
UI-only change to toast rendering and metadata; minimal risk beyond minor layout/styling regressions for toasts that opt into the new close button.

Overview
Adds an opt-in showCloseButton flag to toast data and updates both stacked and anchored toast renderers to display a top-right X dismiss control (with padding adjustments) when enabled.

Enables this flag for the persistent (timeout 0) “Some requests are slow” warning in SlowRpcAckToastCoordinator, making it explicitly dismissible on desktop.

^{Reviewed by Cursor Bugbot for commit 17d9bd1. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add close button to slow request toast

• Adds an XIcon close button to toasts that set data.showCloseButton: true in toast.tsx, wiring it to toastManager.close(toast.id) for both Toasts and AnchoredToasts components.
• Sets showCloseButton: true on the slow-ack warning toast in WebSocketConnectionSurface.tsx.
• Adds pr-8 right padding to toast content when the close button is present to prevent text overlap.

📊 Macroscope summarized 17d9bd1. 2 files reviewed, 1 issue evaluated, 0 issues filtered, 1 comment posted

🗂️ Filtered Issues

[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: dbe1a95c-ff4e-4e24-a23d-ce4f03e5ed37

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

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[kendalled]

Thank you for all of your work on T3 code so far @t3dotgg and @juliusmarminge !! I just wanted to contribute because this has really been bugging me personally and I bet it has bothered or confused others too. Thanks!

[macroscopeapp]

🟢 Low ui/toast.tsx:429

When tooltipStyle and showCloseButton are both true, the close button overlaps Toast.Title because the tooltip branch lacks the pr-8 padding present in the non-tooltip branch. Add right padding to the tooltip Toast.Content when showCloseButton is enabled.

                  {tooltipStyle ? (
-                    <Toast.Content className="pointer-events-auto px-2 py-1">
+                    <Toast.Content
+                      className={cn(
+                        "pointer-events-auto px-2 py-1",
+                        toast.data?.showCloseButton ? "pr-8" : null,
+                      )}
+                    >
                       <Toast.Title data-slot="toast-title" />
                     </Toast.Content>
                   ) : (

🤖 Copy this AI Prompt to have your agent fix this:

In file apps/web/src/components/ui/toast.tsx around lines 429-432:

When `tooltipStyle` and `showCloseButton` are both `true`, the close button overlaps `Toast.Title` because the tooltip branch lacks the `pr-8` padding present in the non-tooltip branch. Add right padding to the tooltip `Toast.Content` when `showCloseButton` is enabled.

Evidence trail:
apps/web/src/components/ui/toast.tsx lines 417-437 at REVIEWED_COMMIT:
- Lines 417-427: Close button rendered when `toast.data?.showCloseButton` is true, positioned `absolute top-2 right-2 z-10`
- Lines 429-431: Tooltip branch has `className="pointer-events-auto px-2 py-1"` with no conditional padding for close button
- Lines 432-437: Non-tooltip branch has `toast.data?.showCloseButton ? "pr-8" : null` conditional padding

[cursor]

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

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 17d9bd1. Configure here.}

[cursor]

Close button leaves stale ref, preventing toast re-show

Medium Severity

When the user clicks the close button, toastManager.close(toast.id) dismisses the toast, but toastIdRef.current in SlowRpcAckToastCoordinator is never cleared. On subsequent slowRequests changes, the coordinator takes the toastManager.update(toastIdRef.current, ...) branch, which silently no-ops on a closed toast. The slow-request warning never reappears until requests drop to zero and rise again — effectively suppressing the notification permanently after one dismissal.

Additional Locations (1)

• apps/web/src/components/ui/toast.tsx#L306-L318

 

^{Reviewed by Cursor Bugbot for commit 17d9bd1. Configure here.}

[kendalled]

#2023 seems like a more efficient fix, Apologies for not seeing it!

I started working on this the second that was opened yesterday. I am usually very careful with PR's and contributions but it's just weird timing.

Thank you and sorry to bother. Happy this is getting addressed.

[macroscopeapp]

Approvability

Verdict: Needs human review

Review comments identify a logic bug: dismissing the toast leaves a stale ref that prevents the slow-request notification from reappearing on subsequent events. This behavioral issue should be addressed before merging.

^{You can customize Macroscope's approvability policy. Learn more.}