From ac99649c4782873b994d22ff89f4e1c78a298df4 Mon Sep 17 00:00:00 2001
From: Daniel Han <danielhanchen@gmail.com>
Date: Sun, 15 Mar 2026 12:27:51 +0000
Subject: [PATCH] studio: toast UX -- 5s auto-dismiss with close button

- Default toast duration 5s (was infinite for loading toasts)
- Add closeButton to Sonner Toaster for manual dismiss via X
- Sonner pauses dismiss timer on hover automatically
---
 studio/frontend/src/components/ui/sonner.tsx                | 3 ++-
 .../src/features/chat/hooks/use-chat-model-runtime.ts       | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/studio/frontend/src/components/ui/sonner.tsx b/studio/frontend/src/components/ui/sonner.tsx
index a20f106d42..1dc2e1bd4c 100644
--- a/studio/frontend/src/components/ui/sonner.tsx
+++ b/studio/frontend/src/components/ui/sonner.tsx
@@ -19,7 +19,8 @@ const Toaster = ({ ...props }: ToasterProps) => {
     <Sonner
       theme={theme as ToasterProps["theme"]}
       className="toaster group"
-      duration={10000}
+      duration={5000}
+      closeButton={true}
       icons={{
         success: (
           <HugeiconsIcon
diff --git a/studio/frontend/src/features/chat/hooks/use-chat-model-runtime.ts b/studio/frontend/src/features/chat/hooks/use-chat-model-runtime.ts
index ebcbe8e966..36e0991732 100644
--- a/studio/frontend/src/features/chat/hooks/use-chat-model-runtime.ts
+++ b/studio/frontend/src/features/chat/hooks/use-chat-model-runtime.ts
@@ -304,7 +304,7 @@ export function useChatModelRuntime() {
           isDownloaded ? "Loading model…" : "Downloading model…",
           {
             description: loadingDescription,
-            duration: 10000,
+            duration: 5000,
             action: {
               label: "Cancel",
               onClick: () => {
@@ -346,7 +346,7 @@ export function useChatModelRuntime() {
                     {
                       id: toastId,
                       description: `${dlGb.toFixed(1)} / ${totalGb.toFixed(1)} GB`,
-                      duration: 10000,
+                      duration: 5000,
                       action: {
                         label: "Cancel",
                         onClick: () => {
@@ -368,7 +368,7 @@ export function useChatModelRuntime() {
                   toast.loading("Loading model…", {
                     id: toastId,
                     description: "Download complete. Starting inference server…",
-                    duration: 10000,
+                    duration: 5000,
                   });
                   if (progressInterval) clearInterval(progressInterval);
                 }