@agent-native/core 0.68.0 → 0.68.2

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" />

package/corpus/templates/calendar/app/hooks/use-google-auth.ts

@@ -1,7 +1,36 @@
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { agentNativePath, oauthRedirectUri } from "@agent-native/core/client";
+import {
+  agentNativePath,
+  isInBuilderFrame,
+  oauthRedirectUri,
+} from "@agent-native/core/client";
 import type { GoogleAuthStatus } from "@shared/api";
-import { useEffect } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+export interface DesktopAuthIssue {
+  error?: string;
+  message?: string;
+  code?: string;
+  accountId?: string;
+  existingOwner?: string;
+  attemptedOwner?: string;
+}
+
+interface DesktopAuthResult {
+  token?: string;
+  email?: string;
+}
+
+interface DesktopAuthStartOptions {
+  addAccount?: boolean;
+  previousAccountCount?: number;
+}
+
+interface DesktopAuthOptions {
+  onError?: (issue: DesktopAuthIssue) => void;
+  onSuccess?: (result: DesktopAuthResult) => void | Promise<void>;
+  timeoutMs?: number;
+}
 
 function bodyError(
   body: any,
@@ -134,6 +163,178 @@ export function useGoogleAddAccountUrl(enabled = false) {
   return query;
 }
 
+export function useGoogleDesktopAuth(options: DesktopAuthOptions = {}) {
+  const { onError, onSuccess, timeoutMs = 120_000 } = options;
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const [isPending, setIsPending] = useState(false);
+  const isDesktopGoogleAuth = useMemo(() => {
+    if (typeof navigator === "undefined") return false;
+    return (
+      /AgentNativeDesktop/i.test(navigator.userAgent) && !isInBuilderFrame()
+    );
+  }, []);
+
+  const clearPoll = useCallback(() => {
+    if (pollRef.current) {
+      clearInterval(pollRef.current);
+      pollRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => clearPoll, [clearPoll]);
+
+  const startDesktopGoogleAuth = useCallback(
+    (startOptions: DesktopAuthStartOptions = {}) => {
+      if (!isDesktopGoogleAuth || typeof window === "undefined") return false;
+
+      clearPoll();
+      setIsPending(true);
+      const flowId =
+        globalThis.crypto?.randomUUID?.() ||
+        Math.random().toString(36).slice(2) + Date.now().toString(36);
+      const redirectUri = oauthRedirectUri("/_agent-native/google/callback");
+      const params = new URLSearchParams({
+        redirect_uri: redirectUri,
+        desktop: "1",
+        flow_id: flowId,
+      });
+      let popup: Window | null = null;
+      const reportError = (issue: DesktopAuthIssue) => {
+        clearPoll();
+        setIsPending(false);
+        onError?.(issue);
+      };
+      const openAuthUrl = (url: string) => {
+        if (popup && !popup.closed) {
+          popup.location.href = url;
+          return true;
+        }
+        popup = window.open(url, "_blank");
+        return !!popup;
+      };
+
+      const startedAt = Date.now();
+      const finish = async (result: DesktopAuthResult = {}) => {
+        clearPoll();
+        setIsPending(false);
+        await onSuccess?.(result);
+      };
+
+      if (startOptions.addAccount) {
+        popup = window.open("about:blank", "_blank");
+        void (async () => {
+          try {
+            const { url } = await fetchJson<{ url: string }>(
+              agentNativePath(
+                `/_agent-native/google/add-account/auth-url?${params.toString()}`,
+              ),
+              { credentials: "include" },
+            );
+            if (!openAuthUrl(url)) {
+              reportError({
+                code: "popup_blocked",
+                message:
+                  "Calendar could not open Google sign-in. Allow popups and try again.",
+              });
+            }
+          } catch (err) {
+            popup?.close();
+            reportError({
+              code: "desktop_auth_start_failed",
+              message:
+                err instanceof Error
+                  ? err.message
+                  : "Could not start Google sign-in.",
+            });
+          }
+        })();
+      } else {
+        params.set("redirect", "1");
+        const opened = openAuthUrl(
+          `${window.location.origin}${agentNativePath(
+            "/_agent-native/google/auth-url",
+          )}?${params.toString()}`,
+        );
+        if (!opened) {
+          reportError({
+            code: "popup_blocked",
+            message:
+              "Calendar could not open Google sign-in. Allow popups and try again.",
+          });
+          return true;
+        }
+      }
+
+      pollRef.current = setInterval(async () => {
+        try {
+          const exchangeRes = await fetch(
+            agentNativePath(
+              `/_agent-native/auth/desktop-exchange?flow_id=${flowId}`,
+            ),
+            { credentials: "include" },
+          );
+          const exchange = await exchangeRes.json();
+          if (exchange?.error) {
+            clearPoll();
+            setIsPending(false);
+            onError?.(exchange);
+            return;
+          }
+          if (exchange?.token) {
+            await fetch(
+              agentNativePath(
+                `/_agent-native/auth/session?_session=${exchange.token}`,
+              ),
+              { credentials: "include" },
+            );
+            await finish({ token: exchange.token, email: exchange.email });
+            return;
+          }
+        } catch {
+          // Keep polling; the status endpoint below may still observe success.
+        }
+
+        try {
+          const statusRes = await fetch(
+            agentNativePath("/_agent-native/google/status"),
+            { credentials: "include" },
+          );
+          if (statusRes.ok) {
+            const status = (await statusRes.json()) as GoogleAuthStatus;
+            const connected = startOptions.addAccount
+              ? (status.accounts?.length ?? 0) >
+                (startOptions.previousAccountCount ?? 0)
+              : status.connected;
+            if (connected) {
+              await finish();
+              return;
+            }
+          }
+        } catch {
+          // Keep polling until the timeout.
+        }
+
+        if (Date.now() - startedAt > timeoutMs) {
+          reportError({
+            code: "desktop_auth_timeout",
+            message:
+              "Google sign-in timed out. Finish sign-in in the browser or try again.",
+          });
+        }
+      }, 1500);
+
+      return true;
+    },
+    [clearPoll, isDesktopGoogleAuth, onError, onSuccess, timeoutMs],
+  );
+
+  return {
+    isDesktopGoogleAuth,
+    isGoogleDesktopAuthPending: isPending,
+    startDesktopGoogleAuth,
+  };
+}
+
 export function useDisconnectGoogle() {
   const queryClient = useQueryClient();
   return useMutation({

package/corpus/templates/calendar/app/lib/event-colors.ts

@@ -107,16 +107,13 @@ export function allOtherDeclined(event: CalendarEvent): boolean {
 
 /**
  * Returns a hex color for a calendar event based on its meeting type.
- * Respects user-set colors and overlay colors first.
+ * Respects user-set colors first.
  * For local (non-Google) events without a color, returns CSS var.
  */
 export function getEventAutoColor(event: CalendarEvent): string {
   // User/Google-set color takes priority
   if (event.color) return event.color;
 
-  // Overlay events keep their overlay-assigned color
-  if (event.overlayEmail) return EVENT_CATEGORY_COLORS.fallback;
-
   // Local events without a color use the theme primary
   if (event.source !== "google") return "hsl(var(--primary))";
 

package/corpus/templates/calendar/app/lib/rsvp-status.tsx

@@ -27,6 +27,12 @@ export function getRsvpStatusLabel(status?: string) {
   }
 }
 
+export function canInlineRsvp(
+  event: Pick<CalendarEvent, "source" | "overlayEmail">,
+): boolean {
+  return event.source === "google" && !event.overlayEmail;
+}
+
 export function RsvpStatusIcon({
   status,
   className,

package/corpus/templates/calendar/app/pages/CalendarView.tsx

@@ -462,16 +462,21 @@ export default function CalendarView() {
   // small non-blocking spinner instead of hiding everything behind a skeleton.
   const eventsRefreshing = isFetching && !eventsLoading;
 
-  // Apply overlay colors and filter hidden calendars
+  // Apply overlay ownership markers and filter hidden calendars
   const events = useMemo(() => {
-    const colorMap = new Map(overlayPeople.map((p) => [p.email, p.color]));
+    const ownerMap = new Map(overlayPeople.map((p) => [p.email, p]));
     const sourceEvents = draftEvent
       ? [...rawEvents.filter((e) => e.id !== draftEvent.id), draftEvent]
       : rawEvents;
     return sourceEvents
       .map((e) => {
-        if (e.overlayEmail && colorMap.has(e.overlayEmail)) {
-          return { ...e, color: colorMap.get(e.overlayEmail) };
+        if (e.overlayEmail && ownerMap.has(e.overlayEmail)) {
+          const owner = ownerMap.get(e.overlayEmail);
+          return {
+            ...e,
+            ownerColor: owner?.color,
+            ownerName: owner?.name,
+          };
         }
         const tempId = quickEditTempIds[e.id];
         return tempId && !e._tempId ? { ...e, _tempId: tempId } : e;

package/corpus/templates/calendar/app/pages/NotFound.tsx

@@ -10,7 +10,7 @@ export default function NotFound() {
   }, [location.pathname]);
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-background">
+    <div className="flex min-h-full w-full items-center justify-center bg-background px-4 py-12">
       <div className="text-center">
         <h1 className="text-6xl font-bold text-foreground/10 mb-2">404</h1>
         <p className="text-sm text-muted-foreground mb-6">

package/corpus/templates/calendar/app/pages/Settings.tsx

@@ -31,6 +31,7 @@ import {
 import {
   useGoogleAuthStatus,
   useGoogleAuthUrl,
+  useGoogleDesktopAuth,
   useDisconnectGoogle,
 } from "@/hooks/use-google-auth";
 import {
@@ -45,6 +46,15 @@ export default function Settings() {
   const updateSettings = useUpdateSettings();
   const googleStatus = useGoogleAuthStatus();
   const disconnectGoogle = useDisconnectGoogle();
+  const {
+    isDesktopGoogleAuth,
+    isGoogleDesktopAuthPending,
+    startDesktopGoogleAuth,
+  } = useGoogleDesktopAuth({
+    onError: (issue) =>
+      toast.error(issue.message || issue.error || "Google sign-in failed"),
+    onSuccess: () => window.location.reload(),
+  });
   const zoomStatus = useZoomStatus();
   const connectZoom = useConnectZoom();
   const disconnectZoom = useDisconnectZoom();
@@ -81,6 +91,12 @@ export default function Settings() {
   }
 
   function handleConnect() {
+    if (isDesktopGoogleAuth) {
+      startDesktopGoogleAuth({
+        previousAccountCount: googleStatus.data?.accounts?.length ?? 0,
+      });
+      return;
+    }
     setWantAuthUrl(true);
   }
 
@@ -179,7 +195,15 @@ export default function Settings() {
                 Disconnect
               </Button>
             ) : (
-              <Button size="sm" onClick={handleConnect}>
+              <Button
+                size="sm"
+                onClick={handleConnect}
+                disabled={
+                  authUrl.isLoading ||
+                  authUrl.isFetching ||
+                  isGoogleDesktopAuthPending
+                }
+              >
                 <IconExternalLink className="mr-1.5 h-3.5 w-3.5" />
                 Connect
               </Button>

package/corpus/templates/calendar/app/routes/_app.$.tsx

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