@agent-native/core 0.169.1 → 0.170.0

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

@@ -4,6 +4,7 @@ import {
   oauthRedirectUri,
 } from "@agent-native/core/client/host";
 import { useT } from "@agent-native/core/client/i18n";
+import { startWorkspaceProviderOAuth } from "@agent-native/core/client/integrations";
 import {
   IconCalendarCheck,
   IconX,
@@ -72,6 +73,15 @@ const STATUS_POLL_INTERVAL_MS = 2000;
 // permanently stuck and stall the interval forever.
 const STATUS_POLL_ABORT_MS = Math.max(10_000, STATUS_POLL_INTERVAL_MS * 4);
 
+function startManagedGoogleOAuth(): void {
+  const returnPath = `${window.location.pathname}${window.location.search}`;
+  startWorkspaceProviderOAuth("google_calendar", {
+    appId: "calendar",
+    returnPath,
+    scope: "user",
+  });
+}
+
 interface GoogleConnectBannerProps {
   variant?: "banner" | "hero";
 }
@@ -93,6 +103,7 @@ export function GoogleConnectBanner({
 
   const accounts = googleStatus.data?.accounts ?? [];
   const hasAccounts = accounts.length > 0;
+  const googleConfigured = googleStatus.data?.configured === true;
   const canOfferOAuthSetup = useMemo(() => shouldOfferGoogleOAuthSetup(), []);
 
   const isBuilderFrame = useMemo(() => isInBuilderFrame(), []);
@@ -297,15 +308,17 @@ export function GoogleConnectBanner({
   }, [wantAddAccount, addAccountUrl.data, isBuilderFrame]);
 
   function handleConnect() {
+    if (!googleConfigured && !canOfferOAuthSetup) return;
     setDesktopAuthIssue(null);
     if (isDesktopGoogleAuth) {
       startDesktopGoogleAuth({ previousAccountCount: accounts.length });
       return;
     }
-    setWantAuthUrl(true);
+    startManagedGoogleOAuth();
   }
 
   function handleAddAccount() {
+    if (!googleConfigured && !canOfferOAuthSetup) return;
     if (isDesktopGoogleAuth) {
       startDesktopGoogleAuth({
         addAccount: true,
@@ -313,7 +326,7 @@ export function GoogleConnectBanner({
       });
       return;
     }
-    setWantAddAccount(true);
+    startManagedGoogleOAuth();
   }
 
   async function handleJsonUpload(file: File) {
@@ -371,6 +384,15 @@ export function GoogleConnectBanner({
   }
 
   if (dismissed) return null;
+  if (!googleStatus.data && !canOfferOAuthSetup && !googleStatus.isError)
+    return null;
+  if (
+    !googleConfigured &&
+    !canOfferOAuthSetup &&
+    !hasAccounts &&
+    !googleStatus.isError
+  )
+    return null;
 
   if (variant === "hero") {
     return (
@@ -384,25 +406,35 @@ export function GoogleConnectBanner({
         <p className="mt-2 max-w-xs text-[13px] text-muted-foreground leading-relaxed">
           {t("googleConnect.syncEventsDescription")}
         </p>
-        <Button
-          size="sm"
-          className="mt-6 gap-2 px-4 h-8 text-[13px] font-medium"
-          onClick={handleConnect}
-          disabled={
-            authUrl.isLoading ||
-            authUrl.isFetching ||
-            isGoogleDesktopAuthPending
-          }
-        >
-          <GoogleIcon className="h-3.5 w-3.5" />
-          {authUrl.isLoading
-            ? t("common.connecting")
-            : hasAccounts
-              ? t("googleConnect.addAccount")
-              : allConfigured
-                ? t("googleConnect.connectGoogle")
+        {googleStatus.isError ? (
+          <Button
+            size="sm"
+            variant="outline"
+            className="mt-6 gap-2 px-4 h-8 text-[13px] font-medium"
+            onClick={() => void googleStatus.refetch()}
+            disabled={googleStatus.isFetching}
+          >
+            {t("common.retry")}
+          </Button>
+        ) : googleConfigured || canOfferOAuthSetup ? (
+          <Button
+            size="sm"
+            className="mt-6 gap-2 px-4 h-8 text-[13px] font-medium"
+            onClick={handleConnect}
+            disabled={
+              authUrl.isLoading ||
+              authUrl.isFetching ||
+              isGoogleDesktopAuthPending
+            }
+          >
+            <GoogleIcon className="h-3.5 w-3.5" />
+            {authUrl.isLoading
+              ? t("common.connecting")
+              : hasAccounts
+                ? t("googleConnect.addAccount")
                 : t("googleConnect.connectGoogle")}
-        </Button>
+          </Button>
+        ) : null}
 
         <GoogleAuthIssuePanel
           issue={desktopAuthIssue}
@@ -419,12 +451,14 @@ export function GoogleConnectBanner({
                 className="group flex items-center gap-1.5 text-xs text-muted-foreground"
               >
                 <span>{account.email}</span>
-                <button
-                  onClick={() => disconnectGoogle.mutate(account.email)}
-                  className="opacity-0 group-hover:opacity-100 transition-opacity text-foreground/25 hover:text-foreground/50"
-                >
-                  <IconX className="h-3 w-3" />
-                </button>
+                {!account.shared && (
+                  <button
+                    onClick={() => disconnectGoogle.mutate(account.email)}
+                    className="opacity-0 group-hover:opacity-100 transition-opacity text-foreground/25 hover:text-foreground/50"
+                  >
+                    <IconX className="h-3 w-3" />
+                  </button>
+                )}
               </div>
             ))}
           </div>
@@ -464,25 +498,29 @@ export function GoogleConnectBanner({
                 className="group flex items-center gap-1.5 text-xs text-foreground/60"
               >
                 <span className="truncate">{account.email}</span>
-                <button
-                  onClick={() => disconnectGoogle.mutate(account.email)}
-                  className="opacity-0 group-hover:opacity-100 transition-opacity text-foreground/30 hover:text-foreground/60"
-                >
-                  <IconX className="h-3 w-3" />
-                </button>
+                {!account.shared && (
+                  <button
+                    onClick={() => disconnectGoogle.mutate(account.email)}
+                    className="opacity-0 group-hover:opacity-100 transition-opacity text-foreground/30 hover:text-foreground/60"
+                  >
+                    <IconX className="h-3 w-3" />
+                  </button>
+                )}
               </div>
             ))}
-            <button
-              onClick={handleAddAccount}
-              disabled={
-                addAccountUrl.isLoading ||
-                addAccountUrl.isFetching ||
-                isGoogleDesktopAuthPending
-              }
-              className="text-xs text-foreground/40 hover:text-foreground/60 transition-colors whitespace-nowrap"
-            >
-              {t("googleConnect.addAccountWithPlus")}
-            </button>
+            {(googleConfigured || canOfferOAuthSetup) && (
+              <button
+                onClick={handleAddAccount}
+                disabled={
+                  addAccountUrl.isLoading ||
+                  addAccountUrl.isFetching ||
+                  isGoogleDesktopAuthPending
+                }
+                className="text-xs text-foreground/40 hover:text-foreground/60 transition-colors whitespace-nowrap"
+              >
+                {t("googleConnect.addAccountWithPlus")}
+              </button>
+            )}
           </div>
           <Button
             variant="ghost"
@@ -499,6 +537,17 @@ export function GoogleConnectBanner({
           onDismiss={() => setDesktopAuthIssue(null)}
           className="mx-4 mb-3"
         />
+        {googleStatus.isError && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="mx-4 mb-2"
+            onClick={() => void googleStatus.refetch()}
+            disabled={googleStatus.isFetching}
+          >
+            {t("common.retry")}
+          </Button>
+        )}
       </div>
     );
   }
@@ -522,7 +571,17 @@ export function GoogleConnectBanner({
         </div>
 
         <div className="flex items-center gap-1.5 shrink-0">
-          {showWizard && !allConfigured && canOfferOAuthSetup ? (
+          {googleStatus.isError ? (
+            <Button
+              size="sm"
+              variant="outline"
+              className="gap-1.5 text-xs h-7 font-medium"
+              onClick={() => void googleStatus.refetch()}
+              disabled={googleStatus.isFetching}
+            >
+              {t("common.retry")}
+            </Button>
+          ) : showWizard && !allConfigured && canOfferOAuthSetup ? (
             <Button
               size="sm"
               variant="outline"

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

@@ -168,32 +168,36 @@ export function OutOfOfficeEvent({
             />
             {!compactMarker && <span className="truncate">{title}</span>}
           </span>
+          {/* Resize handles must be children of the trigger button, not
+              siblings — the day column's create-event guard only checks
+              `closest("button")`, so a sibling here would let clicks near
+              the marker fall through to "create event at this hour". */}
+          {canManipulate && (
+            <div
+              data-resize-handle="true"
+              data-out-of-office-resize="top"
+              onPointerDown={(pointerEvent) => {
+                pointerEvent.stopPropagation();
+                onResizeTopPointerDown?.(pointerEvent);
+              }}
+              className="pointer-events-auto absolute right-1 top-0 z-40 h-1.5 w-5 cursor-n-resize"
+              style={{ touchAction: "none" }}
+            />
+          )}
+          {canManipulate && endsOnDay && (
+            <div
+              data-resize-handle="true"
+              data-out-of-office-resize="bottom"
+              onPointerDown={(pointerEvent) => {
+                pointerEvent.stopPropagation();
+                onResizeBottomPointerDown?.(pointerEvent);
+              }}
+              className="pointer-events-auto absolute bottom-0 right-1 z-40 h-1.5 w-5 cursor-s-resize"
+              style={{ touchAction: "none" }}
+            />
+          )}
         </button>
       </EventDetailPopover>
-      {canManipulate && (
-        <div
-          data-resize-handle="true"
-          data-out-of-office-resize="top"
-          onPointerDown={(pointerEvent) => {
-            pointerEvent.stopPropagation();
-            onResizeTopPointerDown?.(pointerEvent);
-          }}
-          className="pointer-events-auto absolute right-1 z-40 h-1.5 w-5 cursor-n-resize"
-          style={{ top: `${top}px`, touchAction: "none" }}
-        />
-      )}
-      {canManipulate && endsOnDay && (
-        <div
-          data-resize-handle="true"
-          data-out-of-office-resize="bottom"
-          onPointerDown={(pointerEvent) => {
-            pointerEvent.stopPropagation();
-            onResizeBottomPointerDown?.(pointerEvent);
-          }}
-          className="pointer-events-auto absolute right-1 z-40 h-1.5 w-5 cursor-s-resize"
-          style={{ top: `${top + height - 6}px`, touchAction: "none" }}
-        />
-      )}
     </>
   );
 }

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

@@ -29,6 +29,7 @@ import { useHiddenCalendars } from "@/hooks/use-hidden-calendars";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { useNavigationState } from "@/hooks/use-navigation-state";
 import { prefetchPeopleContacts } from "@/hooks/use-people";
+import { shouldOfferGoogleOAuthSetup } from "@/lib/google-oauth-setup";
 
 import { Sidebar } from "./Sidebar";
 
@@ -228,6 +229,10 @@ export function AppLayout({ children }: AppLayoutProps) {
   const queryClient = useQueryClient();
   const googleStatus = useGoogleAuthStatus();
   const hasAccounts = (googleStatus.data?.accounts?.length ?? 0) > 0;
+  const canOfferGoogleOAuthSetup = useMemo(
+    () => shouldOfferGoogleOAuthSetup(),
+    [],
+  );
   const isSettingsPage =
     location.pathname === "/settings" ||
     location.pathname.startsWith("/settings/");
@@ -437,11 +442,13 @@ export function AppLayout({ children }: AppLayoutProps) {
 
                   {/* Show the full-page Google prompt only on the calendar view. */}
                   {!googleStatus.isLoading &&
-                  !googleStatus.isError &&
                   !hasAccounts &&
                   !eventDraft &&
                   isCalendarPage &&
-                  !isSettingsPage ? (
+                  !isSettingsPage &&
+                  (googleStatus.data?.configured === true ||
+                    canOfferGoogleOAuthSetup ||
+                    googleStatus.isError) ? (
                     <main className="agent-native-app-main flex-1 overflow-y-auto">
                       <GoogleConnectBanner variant="hero" />
                     </main>

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

@@ -1,6 +1,7 @@
 import { appPath } from "@agent-native/core/client/api-path";
 import { DevDatabaseLink } from "@agent-native/core/client/db-admin";
 import { useT } from "@agent-native/core/client/i18n";
+import { startWorkspaceProviderOAuth } from "@agent-native/core/client/integrations";
 import { openCommandMenu } from "@agent-native/core/client/navigation";
 import { OrgSwitcher } from "@agent-native/core/client/org";
 import { FeedbackButton } from "@agent-native/core/client/ui";
@@ -69,8 +70,6 @@ import {
 } from "@/hooks/use-external-calendars";
 import {
   useGoogleAuthStatus,
-  useGoogleAuthUrl,
-  useGoogleAddAccountUrl,
   useGoogleDesktopAuth,
 } from "@/hooks/use-google-auth";
 import {
@@ -86,6 +85,7 @@ import {
   type CalendarColorMode,
 } from "@/lib/calendar-view-preferences";
 import { EVENT_CATEGORY_COLORS } from "@/lib/event-colors";
+import { shouldOfferGoogleOAuthSetup } from "@/lib/google-oauth-setup";
 import { cn } from "@/lib/utils";
 
 import { useCalendarContext } from "./AppLayout";
@@ -324,8 +324,6 @@ function MiniCalendar({
 
 function GoogleConnectSidebarButton() {
   const t = useT();
-  const [wantAuthUrl, setWantAuthUrl] = useState(false);
-  const authUrl = useGoogleAuthUrl(wantAuthUrl);
   const {
     isDesktopGoogleAuth,
     isGoogleDesktopAuthPending,
@@ -336,24 +334,17 @@ function GoogleConnectSidebarButton() {
     onSuccess: () => window.location.reload(),
   });
 
-  useEffect(() => {
-    if (!wantAuthUrl || !authUrl.data?.url) return;
-    setWantAuthUrl(false);
-    window.open(authUrl.data.url, "_blank");
-  }, [wantAuthUrl, authUrl.data]);
-
-  useEffect(() => {
-    if (!authUrl.error) return;
-    toast.error(authUrl.error.message);
-    setWantAuthUrl(false);
-  }, [authUrl.error]);
-
   function handleConnect() {
     if (isDesktopGoogleAuth) {
       startDesktopGoogleAuth({ previousAccountCount: 0 });
       return;
     }
-    setWantAuthUrl(true);
+    const returnPath = `${window.location.pathname}${window.location.search}`;
+    startWorkspaceProviderOAuth("google_calendar", {
+      appId: "calendar",
+      returnPath,
+      scope: "user",
+    });
   }
 
   return (
@@ -369,14 +360,12 @@ function GoogleConnectSidebarButton() {
           size="sm"
           className="w-full gap-1.5 text-xs font-semibold"
           onClick={handleConnect}
-          disabled={
-            authUrl.isLoading ||
-            authUrl.isFetching ||
-            isGoogleDesktopAuthPending
-          }
+          disabled={isGoogleDesktopAuthPending}
         >
           <IconExternalLink className="h-3 w-3" />
-          {authUrl.isLoading ? t("common.connecting") : t("common.connect")}
+          {isGoogleDesktopAuthPending
+            ? t("common.connecting")
+            : t("common.connect")}
         </Button>
       </div>
     </div>
@@ -434,9 +423,11 @@ function ColorPickerPopover({
 
 function GoogleAccountsSection({
   accounts,
+  canAddAccount,
   onClose,
 }: {
   accounts: Array<{ email: string }>;
+  canAddAccount: boolean;
   onClose: () => void;
 }) {
   const t = useT();
@@ -450,8 +441,6 @@ function GoogleAccountsSection({
     () => accounts.map((account) => account.email),
     [accounts],
   );
-  const [wantAddAccount, setWantAddAccount] = useState(false);
-  const addAccountUrl = useGoogleAddAccountUrl(wantAddAccount);
   const {
     isDesktopGoogleAuth,
     isGoogleDesktopAuthPending,
@@ -462,18 +451,6 @@ function GoogleAccountsSection({
     onSuccess: () => window.location.reload(),
   });
 
-  useEffect(() => {
-    if (!wantAddAccount || !addAccountUrl.data?.url) return;
-    window.open(addAccountUrl.data.url, "_blank");
-    setWantAddAccount(false);
-  }, [wantAddAccount, addAccountUrl.data]);
-
-  useEffect(() => {
-    if (!addAccountUrl.error) return;
-    toast.error(addAccountUrl.error.message);
-    setWantAddAccount(false);
-  }, [addAccountUrl.error]);
-
   function handleAddAccount() {
     if (isDesktopGoogleAuth) {
       startDesktopGoogleAuth({
@@ -482,7 +459,12 @@ function GoogleAccountsSection({
       });
       return;
     }
-    setWantAddAccount(true);
+    const returnPath = `${window.location.pathname}${window.location.search}`;
+    startWorkspaceProviderOAuth("google_calendar", {
+      appId: "calendar",
+      returnPath,
+      scope: "user",
+    });
   }
 
   function accountColorMode(email: string): CalendarColorMode {
@@ -528,23 +510,21 @@ function GoogleAccountsSection({
               {t("sidebar.googleCalendarSettings")}
             </TooltipContent>
           </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
-                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" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>{t("sidebar.addGoogleAccount")}</TooltipContent>
-          </Tooltip>
+          {canAddAccount && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={handleAddAccount}
+                  disabled={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" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>{t("sidebar.addGoogleAccount")}</TooltipContent>
+            </Tooltip>
+          )}
         </div>
       </div>
 
@@ -681,6 +661,10 @@ export function Sidebar({
   const removeExternal = useRemoveExternalCalendar();
   const updateExternalColor = useUpdateExternalCalendarColor();
   const isConnected = googleStatus.data?.connected ?? false;
+  const canOfferGoogleOAuthSetup = useMemo(
+    () => shouldOfferGoogleOAuthSetup(),
+    [],
+  );
   const [peopleGroupOpen, setPeopleGroupOpen] = useState(
     () => overlayPeople.length <= 2, // i18n-ignore scanner false positive
   );
@@ -903,14 +887,19 @@ export function Sidebar({
               </nav>
 
               {/* Google status / connect CTA */}
-              {!googleStatus.isLoading && !isConnected && (
-                <GoogleConnectSidebarButton />
-              )}
+              {!googleStatus.isLoading &&
+                !isConnected &&
+                (googleStatus.data?.configured === true ||
+                  canOfferGoogleOAuthSetup) && <GoogleConnectSidebarButton />}
 
               {isConnected &&
                 (googleStatus.data?.accounts?.length ?? 0) > 0 && (
                   <GoogleAccountsSection
                     accounts={googleStatus.data!.accounts!}
+                    canAddAccount={
+                      googleStatus.data?.configured === true ||
+                      canOfferGoogleOAuthSetup
+                    }
                     onClose={onClose}
                   />
                 )}

package/corpus/templates/calendar/app/hooks/use-booking-links.ts

@@ -115,7 +115,11 @@ export function useUpdateBookingLink() {
   >("update-booking-link", {
     onSuccess: (updated) => {
       queryClient.setQueryData<BookingLink[]>(LIST_KEY, (current = []) =>
-        current.map((link) => (link.id === updated.id ? updated : link)),
+        current.map((link) =>
+          link.id === updated.id
+            ? { ...updated, accessRole: updated.accessRole ?? link.accessRole }
+            : link,
+        ),
       );
       queryClient.invalidateQueries({
         queryKey: LIST_KEY,

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

@@ -71,38 +71,64 @@ export function computeTimedEventLayout(
     return a.inputOrder - b.inputOrder;
   });
 
-  // Put overlapping events into the first layer that is free at their start.
-  // Reusing finished layers keeps chained overlaps from creating empty gaps.
-  const overlapLayers: EventEntry[][] = [];
-  const eventColumns = new Map<CalendarEvent, number>();
+  // Split the sorted events into connected overlap groups: a run of events
+  // where each overlaps the running span of the group before it. Interval
+  // graphs make this sweep exact — two events end up in the same component
+  // iff a chain of pairwise overlaps connects them — so an isolated event
+  // later in the day never inherits column math from an unrelated overlap
+  // earlier in the day.
+  const groups: EventEntry[][] = [];
+  let groupMaxEnd = -Infinity;
 
   for (const entry of sorted) {
-    let column = overlapLayers.findIndex((layerEntries) =>
-      layerEntries.every((placed) => !overlaps(placed.bounds, entry.bounds)),
-    );
-
-    if (column === -1) {
-      column = overlapLayers.length;
-      overlapLayers.push([]);
+    if (groups.length === 0 || entry.bounds.start >= groupMaxEnd) {
+      groups.push([]);
+      groupMaxEnd = -Infinity;
     }
-
-    overlapLayers[column].push(entry);
-    eventColumns.set(entry.event, column);
+    groups[groups.length - 1].push(entry);
+    groupMaxEnd = Math.max(groupMaxEnd, entry.bounds.end);
   }
 
-  const totalCols = overlapLayers.length;
-
-  for (const [stackOrder, entry] of sorted.entries()) {
-    const col = eventColumns.get(entry.event)!;
+  let stackOrder = 0;
+  for (const group of groups) {
+    // Put overlapping events into the first layer that is free at their
+    // start. Reusing finished layers keeps chained overlaps from creating
+    // empty gaps.
+    const overlapLayers: EventEntry[][] = [];
+    const eventColumns = new Map<CalendarEvent, number>();
+
+    for (const entry of group) {
+      let column = overlapLayers.findIndex((layerEntries) =>
+        layerEntries.every((placed) => !overlaps(placed.bounds, entry.bounds)),
+      );
+
+      if (column === -1) {
+        column = overlapLayers.length;
+        overlapLayers.push([]);
+      }
+
+      overlapLayers[column].push(entry);
+      eventColumns.set(entry.event, column);
+    }
 
-    result.set(entry.event.id, {
-      left: 0,
-      width: 100,
-      indent: col * OVERLAP_INDENT_PX,
-      col,
-      totalCols,
-      stackOrder,
-    });
+    const totalCols = overlapLayers.length;
+    // Give every overlap column a proportional slice of the day column so an
+    // event's right edge stays visible instead of being covered by whichever
+    // card renders on top of it.
+    const width = 100 / totalCols;
+
+    for (const entry of group) {
+      const col = eventColumns.get(entry.event)!;
+
+      result.set(entry.event.id, {
+        left: col * width,
+        width,
+        indent: col * OVERLAP_INDENT_PX,
+        col,
+        totalCols,
+        stackOrder: stackOrder++,
+      });
+    }
   }
 
   return result;