feat(toast): port upstream close buttons (#2023)

apps/web/src/components/BranchToolbarBranchSelector.tsx

@@ -42,7 +42,7 @@ import {
   ComboboxStatus,
   ComboboxTrigger,
 } from "./ui/combobox";
-import { toastManager } from "./ui/toast";
+import { stackedThreadToast, toastManager } from "./ui/toast";
 
 interface BranchToolbarBranchSelectorProps {
   environmentId: EnvironmentId;
@@ -351,11 +351,13 @@ export function BranchToolbarBranchSelector({
         setThreadBranch(nextBranchName, selectionTarget.nextWorktreePath);
       } catch (error) {
         setOptimisticBranch(previousBranch);
-        toastManager.add({
-          type: "error",
-          title: "Failed to checkout branch.",
-          description: toBranchActionErrorMessage(error),
-        });
+        toastManager.add(
+          stackedThreadToast({
+            type: "error",
+            title: "Failed to checkout branch.",
+            description: toBranchActionErrorMessage(error),
+          }),
+        );
       }
     });
   };
@@ -381,11 +383,13 @@ export function BranchToolbarBranchSelector({
         setThreadBranch(createBranchResult.branch, activeWorktreePath);
       } catch (error) {
         setOptimisticBranch(previousBranch);
-        toastManager.add({
-          type: "error",
-          title: "Failed to create and checkout branch.",
-          description: toBranchActionErrorMessage(error),
-        });
+        toastManager.add(
+          stackedThreadToast({
+            type: "error",
+            title: "Failed to create and checkout branch.",
+            description: toBranchActionErrorMessage(error),
+          }),
+        );
       }
     });
   };

apps/web/src/components/ChatMarkdown.tsx

@@ -20,7 +20,7 @@ import { defaultUrlTransform } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { VscodeEntryIcon } from "./chat/VscodeEntryIcon";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
-import { toastManager } from "./ui/toast";
+import { stackedThreadToast, toastManager } from "./ui/toast";
 import { openInPreferredEditor } from "../editorPreferences";
 import { resolveDiffThemeName, type DiffThemeName } from "../lib/diffRendering";
 import { fnv1a32 } from "../lib/diffRendering";
@@ -351,21 +351,25 @@ const MarkdownFileLink = memo(function MarkdownFileLink({
     }
 
     void openInPreferredEditor(api, targetPath).catch((error) => {
-      toastManager.add({
-        type: "error",
-        title: "Unable to open file",
-        description: error instanceof Error ? error.message : "An error occurred.",
-      });
+      toastManager.add(
+        stackedThreadToast({
+          type: "error",
+          title: "Unable to open file",
+          description: error instanceof Error ? error.message : "An error occurred.",
+        }),
+      );
     });
   }, [targetPath]);
 
   const handleCopy = useCallback((value: string, title: string) => {
     if (typeof window === "undefined" || !navigator.clipboard?.writeText) {
-      toastManager.add({
-        type: "error",
-        title: `Failed to copy ${title.toLowerCase()}`,
-        description: "Clipboard API unavailable.",
-      });
+      toastManager.add(
+        stackedThreadToast({
+          type: "error",
+          title: `Failed to copy ${title.toLowerCase()}`,
+          description: "Clipboard API unavailable.",
+        }),
+      );
       return;
     }
 
@@ -378,11 +382,13 @@ const MarkdownFileLink = memo(function MarkdownFileLink({
         });
       },
       (error) => {
-        toastManager.add({
-          type: "error",
-          title: `Failed to copy ${title.toLowerCase()}`,
-          description: error instanceof Error ? error.message : "An error occurred.",
-        });
+        toastManager.add(
+          stackedThreadToast({
+            type: "error",
+            title: `Failed to copy ${title.toLowerCase()}`,
+            description: error instanceof Error ? error.message : "An error occurred.",
+          }),
+        );
       },
     );
   }, []);

apps/web/src/components/ChatView.tsx

@@ -40,7 +40,7 @@
 import { projectScriptCwd, projectScriptRuntimeEnv } from "@marcode/shared/projectScripts";
 import { truncate } from "@marcode/shared/String";
 import {
   memo,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -56,9 +56,9 @@
 import { useGitStatus } from "~/lib/gitStatusState";
 import { projectSearchEntriesQueryOptions } from "~/lib/projectReactQuery";
 import { usePrimaryEnvironmentId } from "../environments/primary";
 import { readEnvironmentApi } from "../environmentApi";
 import { getServerHttpOrigin, isElectron } from "../env";
 import { readLocalApi } from "../localApi";
 import { parseDiffRouteSearch, stripDiffSearchParams } from "../diffRouteSearch";
 import {
   clampCollapsedComposerCursor,
@@ -106,9 +106,9 @@
   useStore,
 } from "../store";
 import {
   createProjectSelectorByRef,
   createThreadSelectorByRef,
   createThreadSelectorAcrossEnvironments,
   useProjectById,
   useThreadById,
 } from "../storeSelectors";
@@ -156,7 +156,7 @@
 import { Separator } from "./ui/separator";
 import { cn, randomUUID } from "~/lib/utils";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
-import { toastManager } from "./ui/toast";
+import { stackedThreadToast, toastManager } from "./ui/toast";
 import { decodeProjectScriptKeybindingRule } from "~/lib/projectScriptKeybindings";
 import { type NewProjectScriptInput } from "./ProjectScriptsControl";
 import {
@@ -2345,11 +2345,13 @@
           title: `Deleted action "${deletedName ?? "Unknown"}"`,
         });
       } catch (error) {
-        toastManager.add({
-          type: "error",
-          title: "Could not delete action",
-          description: error instanceof Error ? error.message : "An unexpected error occurred.",
-        });
+        toastManager.add(
+          stackedThreadToast({
+            type: "error",
+            title: "Could not delete action",
+            description: error instanceof Error ? error.message : "An unexpected error occurred.",
+          }),
+        );
       }
     },
     [activeProject, persistProjectScripts],
@@ -3405,11 +3407,13 @@
           input.expiredTerminalContextCount,
           "omitted",
         );
-        toastManager.add({
-          type: "warning",
-          title: toastCopy.title,
-          description: toastCopy.description,
-        });
+        toastManager.add(
+          stackedThreadToast({
+            type: "warning",
+            title: toastCopy.title,
+            description: toastCopy.description,
+          }),
+        );
       }
       if (input.clearComposerDraft) {
         promptRef.current = "";
@@ -3669,11 +3673,13 @@
           expiredTerminalContextCount,
           "empty",
         );
-        toastManager.add({
-          type: "warning",
-          title: toastCopy.title,
-          description: toastCopy.description,
-        });
+        toastManager.add(
+          stackedThreadToast({
+            type: "warning",
+            title: toastCopy.title,
+            description: toastCopy.description,
+          }),
+        );
       }
       return;
     }
@@ -4078,12 +4084,16 @@
             threadId: nextThreadId,
           })
           .catch(() => undefined);
-        toastManager.add({
-          type: "error",
-          title: "Could not start implementation thread",
-          description:
-            err instanceof Error ? err.message : "An error occurred while creating the new thread.",
-        });
+        toastManager.add(
+          stackedThreadToast({
+            type: "error",
+            title: "Could not start implementation thread",
+            description:
+              err instanceof Error
+                ? err.message
+                : "An error occurred while creating the new thread.",
+          }),
+        );
       })
       .then(finish, finish);
   }, [

apps/web/src/components/CommandPalette.tsx

@@ -103,7 +103,7 @@ import {
 } from "./ui/command";
 import { Button } from "./ui/button";
 import { Kbd, KbdGroup } from "./ui/kbd";
-import { toastManager } from "./ui/toast";
+import { stackedThreadToast, toastManager } from "./ui/toast";
 import { ComposerHandleContext, useComposerHandleContext } from "../composerHandleContext";
 import type { ChatComposerHandle } from "./chat/ChatComposer";
 
@@ -616,11 +616,13 @@ function OpenCommandPaletteDialog() {
 
     const environmentId = defaultAddProjectEnvironmentId;
     if (!environmentId) {
-      toastManager.add({
-        type: "error",
-        title: "Unable to browse projects",
-        description: "No environment is available.",
-      });
+      toastManager.add(
+        stackedThreadToast({
+          type: "error",
+          title: "Unable to browse projects",
+          description: "No environment is available.",
+        }),
+      );
       return;
     }
 
@@ -810,20 +812,24 @@ function OpenCommandPaletteDialog() {
       if (!api) return;
 
       if (isUnsupportedWindowsProjectPath(rawCwd.trim(), browseEnvironmentPlatform)) {
-        toastManager.add({
-          type: "error",
-          title: "Failed to add project",
-          description: "Windows-style paths are only supported on Windows.",
-        });
+        toastManager.add(
+          stackedThreadToast({
+            type: "error",
+            title: "Failed to add project",
+            description: "Windows-style paths are only supported on Windows.",
+          }),
+        );
         return;
       }
 
       if (isExplicitRelativeProjectPath(rawCwd.trim()) && !currentProjectCwdForBrowse) {
-        toastManager.add({
-          type: "error",
-          title: "Failed to add project",
-          description: "Relative paths require an active project.",
-        });
+        toastManager.add(
+          stackedThreadToast({
+            type: "error",
+            title: "Failed to add project",
+            description: "Relative paths require an active project.",
+          }),
+        );
         return;
       }
 
@@ -876,11 +882,13 @@ function OpenCommandPaletteDialog() {
         }).catch(() => undefined);
         setOpen(false);
       } catch (error) {
-        toastManager.add({
-          type: "error",
-          title: "Failed to add project",
-          description: error instanceof Error ? error.message : "An error occurred.",
-        });
+        toastManager.add(
+          stackedThreadToast({
+            type: "error",
+            title: "Failed to add project",
+            description: error instanceof Error ? error.message : "An error occurred.",
+          }),
+        );
       }
     },
     [
@@ -1026,11 +1034,13 @@ function OpenCommandPaletteDialog() {
     }
 
     void item.run().catch((error: unknown) => {
-      toastManager.add({
-        type: "error",
-        title: "Unable to run command",
-        description: error instanceof Error ? error.message : "An unexpected error occurred.",
-      });
+      toastManager.add(
+        stackedThreadToast({
+          type: "error",
+          title: "Unable to run command",
+          description: error instanceof Error ? error.message : "An unexpected error occurred.",
+        }),
+      );
     });
   }
 

apps/web/src/components/GitActionsControl.browser.tsx

@@ -90,6 +90,7 @@ vi.mock("~/components/ui/toast", () => ({
     promise: toastPromiseSpy,
     update: toastUpdateSpy,
   },
+  stackedThreadToast: vi.fn((options: unknown) => options),
 }));
 
 vi.mock("~/editorPreferences", () => ({