@agent-native/core 0.68.1 → 0.68.2

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

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({