Auto-dismiss thread toasts after 10s of visible time

apps/web/src/components/GitActionsControl.tsx

@@ -312,7 +312,10 @@ export default function GitActionsControl({ api, gitCwd }: GitActionsControlProp
           title: resultToast.title,
           description: resultToast.description,
           timeout: 0,
-          data: threadToastData,
+          data: {
+            ...threadToastData,
+            dismissAfterVisibleMs: 10_000,
+          },
           ...(shouldOfferPushCta
             ? {
                 actionProps: {

apps/web/src/components/ui/toast.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Toast } from "@base-ui/react/toast";
+import { useEffect } from "react";
 import {
   CircleAlertIcon,
   CircleCheckIcon,
@@ -16,10 +17,13 @@ import { useStore } from "~/store";
 type ThreadToastData = {
   threadId?: string | null;
   tooltipStyle?: boolean;
+  dismissAfterVisibleMs?: number;
 };
 
 const toastManager = Toast.createToastManager<ThreadToastData>();
 const anchoredToastManager = Toast.createToastManager<ThreadToastData>();
+type ToastId = ReturnType<typeof toastManager.add>;
+const threadToastVisibleTimeoutRemainingMs = new Map<ToastId, number>();
 
 const TOAST_ICONS = {
   error: CircleAlertIcon,
@@ -50,6 +54,84 @@ function shouldRenderForActiveThread(
   return toastThreadId === activeThreadId;
 }
 
+function ThreadToastVisibleAutoDismiss({
+  toastId,
+  dismissAfterVisibleMs,
+}: {
+  toastId: ToastId;
+  dismissAfterVisibleMs: number | undefined;
+}) {
+  useEffect(() => {
+    if (!dismissAfterVisibleMs || dismissAfterVisibleMs <= 0) return;
+    if (typeof window === "undefined" || typeof document === "undefined") return;
+
+    let remainingMs = threadToastVisibleTimeoutRemainingMs.get(toastId) ?? dismissAfterVisibleMs;
+    let startedAtMs: number | null = null;
+    let timeoutId: number | null = null;
+    let closed = false;
+
+    const clearTimer = () => {
+      if (timeoutId === null) return;
+      window.clearTimeout(timeoutId);
+      timeoutId = null;
+    };
+
+    const closeToast = () => {
+      if (closed) return;
+      closed = true;
+      threadToastVisibleTimeoutRemainingMs.delete(toastId);
+      toastManager.close(toastId);
+    };
+
+    const pause = () => {
+      if (startedAtMs === null) return;
+      remainingMs = Math.max(0, remainingMs - (Date.now() - startedAtMs));
+      startedAtMs = null;
+      clearTimer();
+      threadToastVisibleTimeoutRemainingMs.set(toastId, remainingMs);
+    };
+
+    const start = () => {
+      if (closed || startedAtMs !== null) return;
+      if (remainingMs <= 0) {
+        closeToast();
+        return;
+      }
+      startedAtMs = Date.now();
+      clearTimer();
+      timeoutId = window.setTimeout(() => {
+        remainingMs = 0;
+        startedAtMs = null;
+        closeToast();
+      }, remainingMs);
+    };
+
+    const syncTimer = () => {
+      const shouldRun = document.visibilityState === "visible" && document.hasFocus();
+      if (shouldRun) {
+        start();
+        return;
+      }
+      pause();
+    };
+
+    syncTimer();
+    document.addEventListener("visibilitychange", syncTimer);
+    window.addEventListener("focus", syncTimer);
+    window.addEventListener("blur", syncTimer);
+
+    return () => {
+      document.removeEventListener("visibilitychange", syncTimer);
+      window.removeEventListener("focus", syncTimer);
+      window.removeEventListener("blur", syncTimer);
+      pause();
+      clearTimer();
+    };
+  }, [dismissAfterVisibleMs, toastId]);
+
+  return null;
+}
+
 function ToastProvider({ children, position = "top-right", ...props }: ToastProviderProps) {
   return (
     <Toast.Provider toastManager={toastManager} {...props}>
@@ -65,6 +147,15 @@ function Toasts({ position = "top-right" }: { position: ToastPosition }) {
   const activeThreadId = state.activeThreadId;
   const isTop = position.startsWith("top");
 
+  useEffect(() => {
+    const activeToastIds = new Set(toasts.map((toast) => toast.id));
+    for (const toastId of threadToastVisibleTimeoutRemainingMs.keys()) {
+      if (!activeToastIds.has(toastId)) {
+        threadToastVisibleTimeoutRemainingMs.delete(toastId);
+      }
+    }
+  }, [toasts]);
+
   return (
     <Toast.Portal data-slot="toast-portal">
       <Toast.Viewport
@@ -140,6 +231,10 @@ function Toasts({ position = "top-right" }: { position: ToastPosition }) {
                 }
                 toast={toast}
               >
+                <ThreadToastVisibleAutoDismiss
+                  dismissAfterVisibleMs={toast.data?.dismissAfterVisibleMs}
+                  toastId={toast.id}
+                />
                 <Toast.Content className="pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm transition-opacity duration-250 data-behind:not-data-expanded:pointer-events-none data-behind:opacity-0 data-expanded:opacity-100">
                   <div className="flex gap-2">
                     {Icon && (