@agent-native/core 0.68.1 → 0.68.3

package/corpus/core/src/vite/client.ts

@@ -1320,6 +1320,87 @@ function ssrStubPlugin(packages: string[]): Plugin | null {
   if (!packages.length) return null;
   const stubbed = new Set(packages);
   const STUB_ID = "\0agent-native-ssr-stub";
+  const namedExports = [
+    "ActionBarPrimitive",
+    "AllSelection",
+    "Array",
+    "AssistantRuntimeProvider",
+    "Awareness",
+    "BranchPickerPrimitive",
+    "BubbleMenu",
+    "CodeBlockLowlight",
+    "Collaboration",
+    "CollaborationCaret",
+    "ComposerPrimitive",
+    "CompositeAttachmentAdapter",
+    "DOMParser",
+    "Decoration",
+    "DecorationSet",
+    "Editor",
+    "EditorContent",
+    "Extension",
+    "FitAddon",
+    "Fragment",
+    "Image",
+    "Link",
+    "Map",
+    "Markdown",
+    "Mark",
+    "MessagePrimitive",
+    "Node",
+    "NodeSelection",
+    "NodeViewContent",
+    "NodeViewWrapper",
+    "Placeholder",
+    "Plugin",
+    "PluginKey",
+    "ReactNodeViewRenderer",
+    "Selection",
+    "SimpleImageAttachmentAdapter",
+    "SimpleTextAttachmentAdapter",
+    "StarterKit",
+    "Table",
+    "TableCell",
+    "TableHeader",
+    "TableRow",
+    "TaskItem",
+    "TaskList",
+    "Terminal",
+    "TextSelection",
+    "ThreadPrimitive",
+    "WebLinksAddon",
+    "captureException",
+    "common",
+    "createLowlight",
+    "defaultUrlTransform",
+    "extensions",
+    "findTable",
+    "format",
+    "Doc",
+    "getHTMLFromFragment",
+    "getIsolationScope",
+    "init",
+    "isChangeOrigin",
+    "mergeAttributes",
+    "renderToString",
+    "applyUpdate",
+    "encodeStateVector",
+    "encodeStateAsUpdate",
+    "mergeUpdates",
+    "useAui",
+    "useComposer",
+    "useComposerRuntime",
+    "useCurrentEditor",
+    "useEditor",
+    "useLocalRuntime",
+    "useMessagePartText",
+    "useMessageRuntime",
+    "useThread",
+    "useThreadRuntime",
+    "withScope",
+    "XmlFragment",
+    "XmlText",
+  ];
   return {
     name: "agent-native-ssr-stub-heavy-libs",
     enforce: "pre",
@@ -1345,7 +1426,8 @@ function ssrStubPlugin(packages: string[]): Plugin | null {
         "return new Proxy(() => {}, handler); " +
         "} };" +
         "const stub = new Proxy(() => {}, handler);" +
-        "export default stub;"
+        "export default stub;" +
+        namedExports.map((name) => `export const ${name} = stub;`).join("")
       );
     },
   };

package/corpus/templates/analytics/app/routes/$.tsx

@@ -0,0 +1,9 @@
+import NotFound from "@/pages/NotFound";
+
+export function meta() {
+  return [{ title: "Not Found - Analytics" }];
+}
+
+export default function CatchAllRoute() {
+  return <NotFound />;
+}

package/corpus/templates/calendar/app/components/calendar/DayView.tsx

@@ -262,7 +262,17 @@ export function DayView({
                   onDraftDiscard={onDraftDiscard}
                 >
                   <button
-                    className="flex w-full items-center gap-1.5 rounded-md px-3 py-1.5 text-left text-sm font-medium text-foreground transition-all hover:brightness-110"
+                    className={cn(
+                      "relative flex w-full items-center gap-1.5 rounded-md px-3 py-1.5 text-left text-sm font-medium text-foreground transition-all hover:brightness-110",
+                      event.ownerColor && "pr-5",
+                    )}
+                    aria-label={
+                      event.ownerName || event.overlayEmail
+                        ? `${event.title}, ${
+                            event.ownerName || event.overlayEmail
+                          }'s calendar`
+                        : event.title
+                    }
                     style={
                       color
                         ? {
@@ -283,6 +293,13 @@ export function DayView({
                     )}
                     <EventStatusIcon event={event} className="shrink-0" />
                     <span className="truncate">{event.title}</span>
+                    {event.ownerColor && (
+                      <span
+                        aria-hidden="true"
+                        className="absolute right-2 top-1/2 size-1.5 -translate-y-1/2 rounded-full ring-1 ring-background/70"
+                        style={{ backgroundColor: event.ownerColor }}
+                      />
+                    )}
                   </button>
                 </EventDetailPopover>
               );
@@ -458,7 +475,15 @@ export function DayView({
                     isBeingDragged && isDragging && "ring-2 ring-primary/40",
                     canDrag && isStart && "cursor-grab",
                     isBeingDragged && isDragging && "cursor-grabbing",
+                    event.ownerColor && "pr-4",
                   )}
+                  aria-label={
+                    event.ownerName || event.overlayEmail
+                      ? `${event.title}, ${
+                          event.ownerName || event.overlayEmail
+                        }'s calendar`
+                      : event.title
+                  }
                   style={{
                     ...posStyle,
                     left: `${li.left}px`,
@@ -483,6 +508,13 @@ export function DayView({
                     opacity: isBeingDragged && isDragging ? 0.9 : undefined,
                   }}
                 >
+                  {event.ownerColor && (
+                    <span
+                      aria-hidden="true"
+                      className="absolute right-1.5 top-1.5 size-1.5 rounded-full ring-1 ring-background/70"
+                      style={{ backgroundColor: event.ownerColor }}
+                    />
+                  )}
                   {durationMin <= 30 ? (
                     <div className="flex items-baseline gap-1.5 truncate">
                       {allOthersOut && (

package/corpus/templates/calendar/app/components/calendar/EventAttendeesSection.tsx

@@ -16,6 +16,7 @@ import { useAttendeePhotos } from "@/hooks/use-attendee-photos";
 import { useRsvpEvent } from "@/hooks/use-events";
 import { cn } from "@/lib/utils";
 import {
+  canInlineRsvp,
   getRsvpStatusLabel,
   RsvpStatusIcon,
   type RsvpStatus,
@@ -406,6 +407,7 @@ export function EventAttendeesSection({
     | "id"
     | "accountEmail"
     | "attendees"
+    | "overlayEmail"
     | "responseStatus"
     | "source"
     | "recurringEventId"
@@ -423,8 +425,14 @@ export function EventAttendeesSection({
   const { data: photos } = useAttendeePhotos(emails);
 
   const sorted = useMemo(() => sortAttendees(attendees), [attendees]);
-  const selfAttendee = sorted.find((attendee) => attendee.self);
-  const others = sorted.filter((attendee) => !attendee.self);
+  const canRsvpInline = canInlineRsvp(event);
+  const selfAttendee = canRsvpInline
+    ? sorted.find((attendee) => attendee.self)
+    : undefined;
+  const others =
+    canRsvpInline && selfAttendee
+      ? sorted.filter((attendee) => !attendee.self)
+      : sorted;
 
   useEffect(() => {
     setSelfStatus(event.responseStatus || "needsAction");
@@ -505,7 +513,7 @@ export function EventAttendeesSection({
                   attendee={selfAttendee}
                   event={event}
                   photoUrl={photos?.[selfAttendee.email.toLowerCase()]}
-                  inlineRsvp={event.source === "google"}
+                  inlineRsvp={canRsvpInline}
                   currentStatus={selfStatus}
                   currentNote={selfNote}
                   onResponseChange={handleSelfResponseChange}

package/corpus/templates/calendar/app/components/calendar/EventCard.tsx

@@ -30,6 +30,7 @@ export function EventCard({
   colorPreferences,
 }: EventCardProps) {
   const accentColor = getEventDisplayColor(event, colorPreferences);
+  const ownerLabel = event.ownerName || event.overlayEmail;
 
   const handleDragStart = (e: React.DragEvent) => {
     e.dataTransfer.setData("text/plain", event.id);
@@ -47,10 +48,14 @@ export function EventCard({
         onDragStart={canDrag ? handleDragStart : undefined}
         onDragEnd={canDrag ? onDragEnd : undefined}
         className={cn(
-          "flex w-full items-center gap-1.5 rounded px-1.5 py-0.5 text-left text-xs text-foreground transition-all hover:brightness-110",
+          "relative flex w-full items-center gap-1.5 rounded px-1.5 py-0.5 text-left text-xs text-foreground transition-all hover:brightness-110",
           canDrag && "cursor-grab active:cursor-grabbing",
           dimmed && "opacity-40",
+          event.ownerColor && "pr-3.5",
         )}
+        aria-label={
+          ownerLabel ? `${event.title}, ${ownerLabel}'s calendar` : event.title
+        }
         style={{
           backgroundColor: `${accentColor}25`,
         }}
@@ -68,6 +73,13 @@ export function EventCard({
         )}
         <EventStatusIcon event={event} />
         <span className="truncate font-medium">{event.title}</span>
+        {event.ownerColor && (
+          <span
+            aria-hidden="true"
+            className="absolute right-1 top-1/2 size-1.5 -translate-y-1/2 rounded-full ring-1 ring-background/70"
+            style={{ backgroundColor: event.ownerColor }}
+          />
+        )}
       </button>
     );
   }
@@ -79,10 +91,14 @@ export function EventCard({
       onDragStart={canDrag ? handleDragStart : undefined}
       onDragEnd={canDrag ? onDragEnd : undefined}
       className={cn(
-        "flex w-full flex-col gap-0.5 rounded-md px-2 py-1.5 text-left text-xs text-foreground transition-all hover:brightness-110",
+        "relative flex w-full flex-col gap-0.5 rounded-md px-2 py-1.5 text-left text-xs text-foreground transition-all hover:brightness-110",
         canDrag && "cursor-grab active:cursor-grabbing",
         dimmed && "opacity-40",
+        event.ownerColor && "pr-4",
       )}
+      aria-label={
+        ownerLabel ? `${event.title}, ${ownerLabel}'s calendar` : event.title
+      }
       style={{
         backgroundColor: `${accentColor}25`,
         borderLeft: `2px solid ${accentColor}`,
@@ -106,6 +122,13 @@ export function EventCard({
           })}
         </span>
       )}
+      {event.ownerColor && (
+        <span
+          aria-hidden="true"
+          className="absolute right-1.5 top-1.5 size-1.5 rounded-full ring-1 ring-background/70"
+          style={{ backgroundColor: event.ownerColor }}
+        />
+      )}
     </button>
   );
 }

package/corpus/templates/calendar/app/components/calendar/EventDetailPanel.tsx

@@ -101,6 +101,7 @@ export function EventDetailPanel({
   const isOverlay = !!event?.overlayEmail;
   const lastSavedDescriptionRef = useRef(event?.description || "");
   const meetingLink = event ? extractMeetingLink(event) : null;
+  const ownerLabel = event?.ownerName || event?.overlayEmail;
 
   // Reset editing state when event changes
   useEffect(() => {
@@ -310,6 +311,17 @@ export function EventDetailPanel({
                   </div>
                 )}
 
+                {event.overlayEmail && ownerLabel && (
+                  <div className="flex items-center gap-2.5 text-sm text-muted-foreground">
+                    <span
+                      aria-hidden="true"
+                      className="ml-0.5 size-2 shrink-0 rounded-full ring-1 ring-border"
+                      style={{ backgroundColor: event.ownerColor }}
+                    />
+                    <span>Viewing {ownerLabel}'s calendar</span>
+                  </div>
+                )}
+
                 {meetingLink ? (
                   <a
                     href={safeUrl(meetingLink)}

package/corpus/templates/calendar/app/components/calendar/EventDetailPopover.tsx

@@ -395,6 +395,7 @@ export function EventDetailPopover({
     "meet" | "zoom" | null
   >(null);
   const isOverlay = !!event.overlayEmail;
+  const ownerLabel = event.ownerName || event.overlayEmail;
 
   const updateEvent = useUpdateEvent();
   const masterEventId =
@@ -2086,9 +2087,13 @@ Write a short, useful meeting description. If I ask you to apply it, update this
               <>
                 <div className="mx-4 my-2 border-t border-border/50" />
                 <div className="flex items-center gap-3 px-4 py-1.5">
-                  <IconUser className="h-4 w-4 shrink-0 text-muted-foreground" />
+                  <span
+                    aria-hidden="true"
+                    className="ml-1 size-2 shrink-0 rounded-full ring-1 ring-border"
+                    style={{ backgroundColor: event.ownerColor }}
+                  />
                   <span className="text-sm text-muted-foreground">
-                    {event.overlayEmail}
+                    Viewing {ownerLabel}'s calendar
                   </span>
                 </div>
               </>

package/corpus/templates/calendar/app/components/calendar/GoogleConnectBanner.tsx

@@ -21,7 +21,9 @@ import {
   useGoogleAuthStatus,
   useGoogleAuthUrl,
   useGoogleAddAccountUrl,
+  useGoogleDesktopAuth,
   useDisconnectGoogle,
+  type DesktopAuthIssue,
 } from "@/hooks/use-google-auth";
 
 interface EnvKeyStatus {
@@ -66,15 +68,6 @@ interface GoogleConnectBannerProps {
   variant?: "banner" | "hero";
 }
 
-interface DesktopAuthIssue {
-  error?: string;
-  message?: string;
-  code?: string;
-  accountId?: string;
-  existingOwner?: string;
-  attemptedOwner?: string;
-}
-
 export function GoogleConnectBanner({
   variant = "banner",
 }: GoogleConnectBannerProps) {
@@ -93,76 +86,23 @@ export function GoogleConnectBanner({
   const hasAccounts = accounts.length > 0;
 
   const isBuilderFrame = useMemo(() => isInBuilderFrame(), []);
-  const useDesktopAuth = useMemo(
-    () => /AgentNativeDesktop/i.test(navigator.userAgent) && !isBuilderFrame,
-    [isBuilderFrame],
-  );
-  const desktopPollRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const authPollRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const addAccountPollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const {
+    isDesktopGoogleAuth,
+    isGoogleDesktopAuthPending,
+    startDesktopGoogleAuth,
+  } = useGoogleDesktopAuth({
+    onError: setDesktopAuthIssue,
+    onSuccess: () => window.location.reload(),
+  });
   useEffect(() => {
     return () => {
-      if (desktopPollRef.current) clearInterval(desktopPollRef.current);
       if (authPollRef.current) clearInterval(authPollRef.current);
       if (addAccountPollRef.current) clearInterval(addAccountPollRef.current);
     };
   }, []);
 
-  function signInViaDesktopBrowser(addAccount = false) {
-    setDesktopAuthIssue(null);
-    const flowId =
-      crypto.randomUUID?.() ||
-      Math.random().toString(36).slice(2) + Date.now().toString(36);
-    const origin = window.location.origin;
-    const endpoint = addAccount
-      ? "/_agent-native/google/add-account/auth-url"
-      : "/_agent-native/google/auth-url";
-    const redirectUri = encodeURIComponent(
-      oauthRedirectUri("/_agent-native/google/callback"),
-    );
-    window.open(
-      `${origin}${agentNativePath(endpoint)}?redirect_uri=${redirectUri}&desktop=1&flow_id=${flowId}&redirect=1`,
-      "_blank",
-    );
-    const start = Date.now();
-    if (desktopPollRef.current) clearInterval(desktopPollRef.current);
-    desktopPollRef.current = setInterval(async () => {
-      try {
-        const res = await fetch(
-          agentNativePath(
-            `/_agent-native/auth/desktop-exchange?flow_id=${flowId}`,
-          ),
-        );
-        const data = await res.json();
-        if (data?.error) {
-          clearInterval(desktopPollRef.current!);
-          desktopPollRef.current = null;
-          setDesktopAuthIssue(data);
-        } else if (data?.token) {
-          clearInterval(desktopPollRef.current!);
-          desktopPollRef.current = null;
-          await fetch(
-            agentNativePath(
-              `/_agent-native/auth/session?_session=${data.token}`,
-            ),
-            {
-              credentials: "include",
-            },
-          );
-          window.location.reload();
-        } else if (Date.now() - start > 120_000) {
-          clearInterval(desktopPollRef.current!);
-          desktopPollRef.current = null;
-        }
-      } catch {
-        if (Date.now() - start > 120_000) {
-          clearInterval(desktopPollRef.current!);
-          desktopPollRef.current = null;
-        }
-      }
-    }, 1500);
-  }
-
   // Wizard state
   const [currentStep, setCurrentStep] = useState(0);
   const [saving, setSaving] = useState(false);
@@ -293,16 +233,19 @@ export function GoogleConnectBanner({
 
   function handleConnect() {
     setDesktopAuthIssue(null);
-    if (useDesktopAuth) {
-      signInViaDesktopBrowser();
+    if (isDesktopGoogleAuth) {
+      startDesktopGoogleAuth({ previousAccountCount: accounts.length });
       return;
     }
     setWantAuthUrl(true);
   }
 
   function handleAddAccount() {
-    if (useDesktopAuth) {
-      signInViaDesktopBrowser(true);
+    if (isDesktopGoogleAuth) {
+      startDesktopGoogleAuth({
+        addAccount: true,
+        previousAccountCount: accounts.length,
+      });
       return;
     }
     setWantAddAccount(true);
@@ -377,7 +320,11 @@ export function GoogleConnectBanner({
           size="sm"
           className="mt-6 gap-2 px-4 h-8 text-[13px] font-medium"
           onClick={handleConnect}
-          disabled={authUrl.isLoading || authUrl.isFetching}
+          disabled={
+            authUrl.isLoading ||
+            authUrl.isFetching ||
+            isGoogleDesktopAuthPending
+          }
         >
           <GoogleIcon className="h-3.5 w-3.5" />
           {authUrl.isLoading
@@ -458,7 +405,11 @@ export function GoogleConnectBanner({
             ))}
             <button
               onClick={handleAddAccount}
-              disabled={addAccountUrl.isLoading || addAccountUrl.isFetching}
+              disabled={
+                addAccountUrl.isLoading ||
+                addAccountUrl.isFetching ||
+                isGoogleDesktopAuthPending
+              }
               className="text-xs text-foreground/40 hover:text-foreground/60 transition-colors whitespace-nowrap"
             >
               + Add account
@@ -515,7 +466,11 @@ export function GoogleConnectBanner({
               size="sm"
               className="gap-1.5 text-xs h-7 font-medium bg-white text-black hover:bg-white/90"
               onClick={handleConnect}
-              disabled={authUrl.isLoading || authUrl.isFetching}
+              disabled={
+                authUrl.isLoading ||
+                authUrl.isFetching ||
+                isGoogleDesktopAuthPending
+              }
             >
               <GoogleIcon className="h-3 w-3" />
               {authUrl.isLoading ? "Connecting..." : "Sign in with Google"}
@@ -526,7 +481,11 @@ export function GoogleConnectBanner({
               variant="outline"
               className="gap-1.5 text-xs h-7 font-medium"
               onClick={handleConnect}
-              disabled={authUrl.isLoading || authUrl.isFetching}
+              disabled={
+                authUrl.isLoading ||
+                authUrl.isFetching ||
+                isGoogleDesktopAuthPending
+              }
             >
               {authUrl.isLoading ? "..." : "Connect Google"}
             </Button>

package/corpus/templates/calendar/app/components/calendar/WeekView.tsx

@@ -592,7 +592,17 @@ export function WeekView({
                     onDraftDiscard={onDraftDiscard}
                   >
                     <button
-                      className="absolute flex items-center gap-1 truncate rounded px-1.5 text-left text-[11px] font-medium text-foreground transition-opacity hover:opacity-80"
+                      className={cn(
+                        "absolute flex items-center gap-1 truncate rounded px-1.5 text-left text-[11px] font-medium text-foreground transition-opacity hover:opacity-80",
+                        event.ownerColor && "pr-3.5",
+                      )}
+                      aria-label={
+                        event.ownerName || event.overlayEmail
+                          ? `${event.title}, ${
+                              event.ownerName || event.overlayEmail
+                            }'s calendar`
+                          : event.title
+                      }
                       style={{
                         top: `${rowIdx * allDayRowHeight + 4}px`,
                         left: `${leftPct}%`,
@@ -613,6 +623,13 @@ export function WeekView({
                       )}
                       <EventStatusIcon event={event} className="shrink-0" />
                       <span className="truncate">{event.title}</span>
+                      {event.ownerColor && (
+                        <span
+                          aria-hidden="true"
+                          className="absolute right-1 top-1/2 size-1.5 -translate-y-1/2 rounded-full ring-1 ring-background/70"
+                          style={{ backgroundColor: event.ownerColor }}
+                        />
+                      )}
                     </button>
                   </EventDetailPopover>
                 );
@@ -864,7 +881,15 @@ export function WeekView({
                             "ring-2 ring-primary/40",
                           canDrag && segmentStartsHere && "cursor-grab",
                           isBeingDragged && isDragging && "cursor-grabbing",
+                          event.ownerColor && "pr-4",
                         )}
+                        aria-label={
+                          event.ownerName || event.overlayEmail
+                            ? `${event.title}, ${
+                                event.ownerName || event.overlayEmail
+                              }'s calendar`
+                            : event.title
+                        }
                         style={{
                           ...style,
                           left: `${li.left}px`,
@@ -894,6 +919,13 @@ export function WeekView({
                             isBeingDragged && isDragging ? 0.9 : undefined,
                         }}
                       >
+                        {event.ownerColor && (
+                          <span
+                            aria-hidden="true"
+                            className="absolute right-1.5 top-1.5 size-1.5 rounded-full ring-1 ring-background/70"
+                            style={{ backgroundColor: event.ownerColor }}
+                          />
+                        )}
                         {durationMin <= 30 ? (
                           <div className="flex items-baseline gap-1 truncate">
                             {allOthersOut && (

package/corpus/templates/calendar/app/components/layout/Sidebar.tsx

@@ -46,6 +46,7 @@ import {
   useGoogleAuthStatus,
   useGoogleAuthUrl,
   useGoogleAddAccountUrl,
+  useGoogleDesktopAuth,
 } from "@/hooks/use-google-auth";
 import {
   appPath,
@@ -305,6 +306,13 @@ function MiniCalendar({
 function GoogleConnectSidebarButton() {
   const [wantAuthUrl, setWantAuthUrl] = useState(false);
   const authUrl = useGoogleAuthUrl(wantAuthUrl);
+  const {
+    isDesktopGoogleAuth,
+    isGoogleDesktopAuthPending,
+    startDesktopGoogleAuth,
+  } = useGoogleDesktopAuth({
+    onSuccess: () => window.location.reload(),
+  });
 
   useEffect(() => {
     if (!wantAuthUrl || !authUrl.data?.url) return;
@@ -312,6 +320,14 @@ function GoogleConnectSidebarButton() {
     window.open(authUrl.data.url, "_blank");
   }, [wantAuthUrl, authUrl.data]);
 
+  function handleConnect() {
+    if (isDesktopGoogleAuth) {
+      startDesktopGoogleAuth({ previousAccountCount: 0 });
+      return;
+    }
+    setWantAuthUrl(true);
+  }
+
   return (
     <div className="border-t border-border p-3">
       <div className="rounded-lg bg-primary/10 p-3">
@@ -324,8 +340,12 @@ function GoogleConnectSidebarButton() {
         <Button
           size="sm"
           className="w-full gap-1.5 text-xs font-semibold"
-          onClick={() => setWantAuthUrl(true)}
-          disabled={authUrl.isLoading || authUrl.isFetching}
+          onClick={handleConnect}
+          disabled={
+            authUrl.isLoading ||
+            authUrl.isFetching ||
+            isGoogleDesktopAuthPending
+          }
         >
           <IconExternalLink className="h-3 w-3" />
           {authUrl.isLoading ? "Connecting..." : "Connect"}
@@ -398,6 +418,13 @@ function GoogleAccountsSection({
   } = useViewPreferences();
   const [wantAddAccount, setWantAddAccount] = useState(false);
   const addAccountUrl = useGoogleAddAccountUrl(wantAddAccount);
+  const {
+    isDesktopGoogleAuth,
+    isGoogleDesktopAuthPending,
+    startDesktopGoogleAuth,
+  } = useGoogleDesktopAuth({
+    onSuccess: () => window.location.reload(),
+  });
 
   useEffect(() => {
     if (!wantAddAccount || !addAccountUrl.data?.url) return;
@@ -405,6 +432,17 @@ function GoogleAccountsSection({
     setWantAddAccount(false);
   }, [wantAddAccount, addAccountUrl.data]);
 
+  function handleAddAccount() {
+    if (isDesktopGoogleAuth) {
+      startDesktopGoogleAuth({
+        addAccount: true,
+        previousAccountCount: accounts.length,
+      });
+      return;
+    }
+    setWantAddAccount(true);
+  }
+
   function handlePickColor(color: string) {
     updateViewPreferences({ colorMode: "single", singleColor: color });
   }
@@ -438,7 +476,12 @@ function GoogleAccountsSection({
             <TooltipTrigger asChild>
               <button
                 type="button"
-                onClick={() => setWantAddAccount(true)}
+                onClick={handleAddAccount}
+                disabled={
+                  addAccountUrl.isLoading ||
+                  addAccountUrl.isFetching ||
+                  isGoogleDesktopAuthPending
+                }
                 className="flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground"
               >
                 <IconPlus className="h-3.5 w-3.5" />