@agent-native/core 0.176.4 → 0.176.5-nightly-20260902205402

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

@@ -501,11 +501,17 @@ export function EventDetailPopover({
   const workingLocationLabels = createWorkingLocationDisplayLabels(t);
   const isMobile = useIsMobile();
   const eventTimezone = timezone || event.startTimeZone || getLocalTimezone();
+  const isReadOnlySource =
+    !!event.overlayEmail ||
+    event.calendarPrimary === false ||
+    event.calendarReadOnly === true;
   const [open, setOpen] = useState(defaultOpen);
   const [editingTitle, setEditingTitle] = useState(
-    defaultOpen ? getEditableEventTitle(event) : "",
+    defaultOpen && !isReadOnlySource ? getEditableEventTitle(event) : "",
+  );
+  const [isEditingTitle, setIsEditingTitle] = useState(
+    defaultOpen && !isReadOnlySource,
   );
-  const [isEditingTitle, setIsEditingTitle] = useState(defaultOpen);
   const isNewEventRef = useRef(defaultOpen);
   const titleInputRef = useRef<HTMLInputElement>(null);
   const popoverTokenRef = useRef<symbol | null>(null);
@@ -570,13 +576,13 @@ export function EventDetailPopover({
     string | null
   >(() => getStoredZoomAfterConnectEventId());
   const [showConferencingOptions, setShowConferencingOptions] = useState(false);
-  const isOverlay = !!event.overlayEmail;
+  const isOverlay = isReadOnlySource;
   const ownerLabel = event.ownerName || event.overlayEmail;
 
   const updateEvent = useUpdateEvent();
   const masterEventId =
     open && event.recurringEventId ? `google-${event.recurringEventId}` : "";
-  const masterEvent = useEvent(masterEventId);
+  const masterEvent = useEvent(masterEventId, event.calendarSourceKey);
   const recurrenceRules =
     event.recurrence && event.recurrence.length > 0
       ? event.recurrence
@@ -1810,7 +1816,7 @@ export function EventDetailPopover({
           <div ref={detailsScrollRef} className="flex-1 overflow-y-auto">
             <div className="px-2 py-2">
               {/* Title — always editable */}
-              {isEditingTitle && !isWorkingLocation ? (
+              {isEditingTitle && !isWorkingLocation && !isOverlay ? (
                 <input
                   ref={titleInputRef}
                   value={editingTitle}
@@ -2738,6 +2744,26 @@ export function EventDetailPopover({
               </>
             )}
 
+            {(event.calendarPrimary === false || event.calendarReadOnly) &&
+              event.calendarName &&
+              !event.overlayEmail && (
+                <>
+                  <div className={eventPopoverDivider} />
+                  <div className="flex items-center gap-2 px-4 py-1.5">
+                    <span
+                      aria-hidden="true"
+                      className="ml-1 size-2 shrink-0 rounded-full ring-1 ring-border"
+                      style={{ backgroundColor: event.color }}
+                    />
+                    <span className="truncate text-muted-foreground">
+                      {t("eventForm.viewingOwnerCalendar", {
+                        owner: `${event.calendarName} · ${event.accountEmail ?? "Google"}`,
+                      })}
+                    </span>
+                  </div>
+                </>
+              )}
+
             {/* Bottom padding */}
             <div className="h-3" />
           </div>

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

@@ -73,6 +73,7 @@ import {
   useGoogleAuthStatus,
   useGoogleDesktopAuth,
 } from "@/hooks/use-google-auth";
+import { useGoogleCalendars } from "@/hooks/use-google-calendars";
 import {
   useOverlayPeople,
   useRemoveOverlayPerson,
@@ -635,6 +636,106 @@ function GoogleAccountsSection({
   );
 }
 
+function SharedGoogleCalendarsGroup() {
+  const t = useT();
+  const { data: calendars, enabled } = useGoogleCalendars();
+  const {
+    prefs: { googleCalendarVisibility },
+    updateGoogleCalendarVisibility,
+  } = useViewPreferences();
+  const sharedCalendars = (calendars ?? []).filter(
+    (calendar) => !calendar.primary && calendar.accessRole !== "freeBusyReader",
+  );
+  const grouped = useMemo(() => {
+    const groups = new Map<string, typeof sharedCalendars>();
+    for (const calendar of sharedCalendars) {
+      const current = groups.get(calendar.accountEmail) ?? [];
+      current.push(calendar);
+      groups.set(calendar.accountEmail, current);
+    }
+    return Array.from(groups.entries());
+  }, [sharedCalendars]);
+
+  if (!enabled || grouped.length === 0) return null;
+
+  return (
+    <div className="space-y-1">
+      {grouped.map(([accountEmail, accountCalendars]) => (
+        <div key={accountEmail}>
+          <div className="px-3 py-1 text-[10px] font-medium text-muted-foreground/60">
+            {accountEmail}
+          </div>
+          <div className="space-y-0.5">
+            {accountCalendars.map((calendar) => {
+              const visible =
+                googleCalendarVisibility[calendar.sourceKey] ??
+                calendar.selected;
+              return (
+                <div
+                  key={calendar.sourceKey}
+                  className="group flex min-h-7 items-center gap-2 px-3 text-xs"
+                >
+                  <span
+                    aria-hidden="true"
+                    className={cn(
+                      "block size-2.5 shrink-0 rounded-full ring-1 ring-border",
+                      !visible && "opacity-40",
+                    )}
+                    style={{
+                      backgroundColor: calendar.color || CALENDAR_COLORS[6],
+                    }}
+                  />
+                  <span
+                    className={cn(
+                      "min-w-0 flex-1 truncate",
+                      visible
+                        ? "text-muted-foreground"
+                        : "text-muted-foreground/40",
+                    )}
+                  >
+                    {calendar.name}
+                  </span>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        onClick={() =>
+                          updateGoogleCalendarVisibility(
+                            calendar.sourceKey,
+                            !visible,
+                          )
+                        }
+                        className="flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground/60 opacity-0 hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100"
+                        aria-label={
+                          visible
+                            ? t("sidebar.hideCalendar")
+                            : t("sidebar.showCalendar")
+                        }
+                        aria-pressed={visible}
+                      >
+                        {visible ? (
+                          <IconEye className="size-3" />
+                        ) : (
+                          <IconEyeOff className="size-3" />
+                        )}
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      {visible
+                        ? t("sidebar.hideCalendar")
+                        : t("sidebar.showCalendar")}
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 export function Sidebar({
   open,
   onClose,
@@ -929,6 +1030,7 @@ export function Sidebar({
                     <IconPlus className="h-3.5 w-3.5" />
                   </button>
                 </div>
+                <SharedGoogleCalendarsGroup />
                 {(overlayPeople.length > 0 || externalCalendars.length > 0) && (
                   <div className="mt-1 space-y-1">
                     {overlayPeople.length > 0 && (

package/corpus/templates/calendar/app/hooks/use-events.ts

@@ -6,6 +6,7 @@ import {
 import type { CalendarEvent, UpdateEventScope } from "@shared/api";
 import {
   useQueryClient,
+  useQuery,
   keepPreviousData,
   type QueryKey,
 } from "@tanstack/react-query";
@@ -13,6 +14,10 @@ import { nanoid } from "nanoid";
 import { useMemo } from "react";
 
 import { dateTimeInTimezoneToIso } from "@/lib/event-form-utils";
+import {
+  isSharedCalendarDemo,
+  SHARED_CALENDAR_DEMO_EVENTS,
+} from "@/lib/shared-calendar-demo";
 import {
   buildWorkingLocationProperties,
   getWorkingLocationEditableLabel,
@@ -83,13 +88,17 @@ function buildEventsParams(
   from?: string,
   to?: string,
   overlayEmails?: string[],
-): Record<string, string> {
-  const params: Record<string, string> = {};
+  calendarSourceKeys?: string[],
+): Record<string, string | string[]> {
+  const params: Record<string, string | string[]> = {};
   if (from) params.from = from;
   if (to) params.to = to;
   if (overlayEmails && overlayEmails.length > 0) {
     params.overlayEmails = overlayEmails.join(",");
   }
+  if (calendarSourceKeys && calendarSourceKeys.length > 0) {
+    params.calendarSourceKeys = calendarSourceKeys;
+  }
   return params;
 }
 
@@ -103,8 +112,12 @@ function getListEventsParams(
   return params as Record<string, string>;
 }
 
-function getEventQueryKey(id: string) {
-  return ["action", "get-event", { id }] as const;
+function getEventQueryKey(id: string, calendarSourceKey?: string) {
+  return [
+    "action",
+    "get-event",
+    calendarSourceKey ? { id, calendarSourceKey } : { id },
+  ] as const;
 }
 
 export function getOptimisticTitleIsGenerated(
@@ -279,15 +292,31 @@ export function useEvents(
   from?: string,
   to?: string,
   overlayEmails?: string[],
+  calendarSourceKeys?: string[],
 ) {
-  const params = buildEventsParams(from, to, overlayEmails);
-
-  return useActionQuery<CalendarEvent[]>("list-events", params, {
+  const params = buildEventsParams(from, to, overlayEmails, calendarSourceKeys);
+  const demo = isSharedCalendarDemo();
+  const live = useActionQuery<CalendarEvent[]>("list-events", params, {
+    enabled: !demo,
     retry: false,
     staleTime: 30_000,
     gcTime: 30 * 60 * 1000,
     placeholderData: keepPreviousData,
   });
+  const fixture = useQuery({
+    queryKey: ["shared-calendar-demo-events", params],
+    queryFn: async () => {
+      const selected = new Set(calendarSourceKeys ?? []);
+      return SHARED_CALENDAR_DEMO_EVENTS.filter((event) => {
+        if (!event.calendarSourceKey) return true;
+        return selected.size === 0 || selected.has(event.calendarSourceKey);
+      });
+    },
+    enabled: demo,
+    staleTime: Infinity,
+  });
+
+  return demo ? fixture : live;
 }
 
 type OverlaySourceCoverage = {
@@ -351,8 +380,10 @@ export function prefetchEvents(
   from: string,
   to: string,
   overlayEmails?: string[],
+  calendarSourceKeys?: string[],
 ) {
-  const params = buildEventsParams(from, to, overlayEmails);
+  if (isSharedCalendarDemo()) return;
+  const params = buildEventsParams(from, to, overlayEmails, calendarSourceKeys);
   return queryClient.prefetchQuery({
     queryKey: ["action", "list-events", params],
     queryFn: () =>
@@ -362,8 +393,12 @@ export function prefetchEvents(
   });
 }
 
-export function useEvent(id: string) {
-  return useActionQuery<CalendarEvent>("get-event", { id }, { enabled: !!id });
+export function useEvent(id: string, calendarSourceKey?: string) {
+  return useActionQuery<CalendarEvent>(
+    "get-event",
+    calendarSourceKey ? { id, calendarSourceKey } : { id },
+    { enabled: !!id },
+  );
 }
 
 export function useCreateEvent() {

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

@@ -7,6 +7,11 @@ import type { GoogleAuthStatus } from "@shared/api";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
+import {
+  isSharedCalendarDemo,
+  SHARED_CALENDAR_DEMO_STATUS,
+} from "@/lib/shared-calendar-demo";
+
 export interface DesktopAuthIssue {
   error?: string;
   message?: string;
@@ -149,14 +154,16 @@ async function fetchJson<T>(input: string, init?: RequestInit): Promise<T> {
 }
 
 export function useGoogleAuthStatus() {
+  const demo = isSharedCalendarDemo();
   return useQuery<GoogleAuthStatus>({
     queryKey: ["google-status"],
     queryFn: async () => {
+      if (demo) return SHARED_CALENDAR_DEMO_STATUS;
       return fetchJson<GoogleAuthStatus>(
         agentNativePath("/_agent-native/google/status"),
       );
     },
-    staleTime: 30_000,
+    staleTime: demo ? Infinity : 30_000,
   });
 }
 

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

@@ -0,0 +1,41 @@
+import { useFeatureFlag } from "@agent-native/core/client/feature-flags";
+import { useActionQuery } from "@agent-native/core/client/hooks";
+import type { GoogleCalendarSource } from "@shared/api";
+import { SHARED_GOOGLE_CALENDARS } from "@shared/feature-flags";
+import { useQuery } from "@tanstack/react-query";
+
+import {
+  isSharedCalendarDemo,
+  SHARED_CALENDAR_DEMO_SOURCES,
+} from "@/lib/shared-calendar-demo";
+
+export function useGoogleCalendars() {
+  const demo = isSharedCalendarDemo();
+  const flagEnabled = useFeatureFlag(SHARED_GOOGLE_CALENDARS.key);
+  const enabled = demo || flagEnabled;
+  const live = useActionQuery<{
+    calendars: GoogleCalendarSource[];
+    errors: Array<{ email: string; error: string }>;
+  }>(
+    "list-google-calendars",
+    {},
+    {
+      enabled: enabled && !demo,
+      retry: false,
+      staleTime: 30_000,
+    },
+  );
+  const fixture = useQuery({
+    queryKey: ["shared-calendar-demo-sources"],
+    queryFn: async () => SHARED_CALENDAR_DEMO_SOURCES,
+    enabled: demo,
+    staleTime: Infinity,
+  });
+  return {
+    ...(demo ? fixture : live),
+    data: demo ? fixture.data : live.data?.calendars,
+    sourceErrors: demo ? [] : (live.data?.errors ?? []),
+    enabled,
+    demo,
+  };
+}

package/corpus/templates/calendar/app/hooks/use-view-preferences.ts

@@ -13,6 +13,7 @@ import {
   type CalendarColorMode,
   type CalendarViewPreferences,
 } from "@/lib/calendar-view-preferences";
+import { isSharedCalendarDemo } from "@/lib/shared-calendar-demo";
 
 export type ViewPreferences = CalendarViewPreferences;
 
@@ -129,6 +130,7 @@ async function readAppStatePreferences(): Promise<CalendarViewPreferences | null
 }
 
 export function useViewPreferences() {
+  const demo = isSharedCalendarDemo();
   const [prefs, setPrefs] = useState<ViewPreferences>(load);
   const accountColorRequestIds = useRef<Record<string, number>>({});
   const accountModeRequestIds = useRef<Record<string, number>>({});
@@ -150,6 +152,7 @@ export function useViewPreferences() {
   }, []);
 
   useEffect(() => {
+    if (demo) return;
     let cancelled = false;
     let timeout: number | undefined;
 
@@ -220,7 +223,7 @@ export function useViewPreferences() {
       document.removeEventListener("visibilitychange", handleVisibilityChange);
       if (timeout) window.clearTimeout(timeout);
     };
-  }, []);
+  }, [demo]);
 
   const update = useCallback((patch: Partial<ViewPreferences>) => {
     setPrefs((prev) => {
@@ -258,6 +261,8 @@ export function useViewPreferences() {
         return next;
       });
 
+      if (demo) return;
+
       callAction("update-calendar-visual-preferences", {
         accountEmail,
         accountColor,
@@ -333,7 +338,7 @@ export function useViewPreferences() {
           }
         });
     },
-    [],
+    [demo],
   );
 
   const updateAccountColorMode = useCallback(
@@ -356,6 +361,8 @@ export function useViewPreferences() {
         return next;
       });
 
+      if (demo) return;
+
       callAction("update-calendar-visual-preferences", {
         accountEmail,
         accountColorMode,
@@ -416,8 +423,53 @@ export function useViewPreferences() {
           }
         });
     },
-    [],
+    [demo],
+  );
+
+  const updateGoogleCalendarVisibility = useCallback(
+    (sourceKey: string, visible: boolean) => {
+      const rollbackPrefs = prefs;
+      const next = normalizeCalendarViewPreferences({
+        ...prefs,
+        googleCalendarVisibility: {
+          ...prefs.googleCalendarVisibility,
+          [sourceKey]: visible,
+        },
+      });
+      setPrefs(next);
+      save(next);
+      window.dispatchEvent(new Event(CALENDAR_VIEW_PREFERENCES_CHANGE_EVENT));
+
+      if (demo) return;
+
+      callAction("update-calendar-visual-preferences", {
+        googleCalendarSourceKey: sourceKey,
+        googleCalendarVisible: visible,
+      }).catch(() => {
+        setPrefs((current) => {
+          if (current.googleCalendarVisibility[sourceKey] !== visible) {
+            return current;
+          }
+          const next = normalizeCalendarViewPreferences({
+            ...current,
+            googleCalendarVisibility: rollbackPrefs.googleCalendarVisibility,
+          });
+          save(next);
+          window.dispatchEvent(
+            new Event(CALENDAR_VIEW_PREFERENCES_CHANGE_EVENT),
+          );
+          return next;
+        });
+      });
+    },
+    [demo, prefs],
   );
 
-  return { prefs, update, updateAccountColor, updateAccountColorMode };
+  return {
+    prefs,
+    update,
+    updateAccountColor,
+    updateAccountColorMode,
+    updateGoogleCalendarVisibility,
+  };
 }

package/corpus/templates/calendar/app/lib/shared-calendar-demo.ts

@@ -0,0 +1,187 @@
+import type {
+  CalendarEvent,
+  GoogleAuthStatus,
+  GoogleCalendarSource,
+} from "@shared/api";
+import { CALENDAR_COLORS } from "@shared/calendar-view-preferences";
+
+export function isSharedCalendarDemo(): boolean {
+  return (
+    import.meta.env.DEV &&
+    new URLSearchParams(window.location.search).get("calendarDemo") === "shared"
+  );
+}
+
+export const SHARED_CALENDAR_DEMO_STATUS: GoogleAuthStatus = {
+  connected: true,
+  configured: true,
+  accounts: [
+    { email: "alice@builder.io" },
+    { email: "emdistal@gmail.com" },
+    { email: "tempoimmaterial@gmail.com" },
+  ],
+};
+
+export const SHARED_CALENDAR_DEMO_SOURCES: GoogleCalendarSource[] = [
+  {
+    sourceKey: "demo:builder-primary",
+    accountEmail: "alice@builder.io",
+    calendarId: "alice@builder.io",
+    name: "Alice · Builder",
+    color: CALENDAR_COLORS[1],
+    selected: true,
+    primary: true,
+    accessRole: "owner",
+    readOnly: false,
+  },
+  {
+    sourceKey: "demo:personal-primary",
+    accountEmail: "emdistal@gmail.com",
+    calendarId: "emdistal@gmail.com",
+    name: "Alice Alexandra",
+    color: CALENDAR_COLORS[2],
+    selected: true,
+    primary: true,
+    accessRole: "owner",
+    readOnly: false,
+  },
+  {
+    sourceKey: "demo:friends",
+    accountEmail: "emdistal@gmail.com",
+    calendarId: "friends@example.com",
+    name: "Friends",
+    color: CALENDAR_COLORS[3],
+    selected: true,
+    primary: false,
+    accessRole: "reader",
+    readOnly: true,
+  },
+  {
+    sourceKey: "demo:tempo-primary",
+    accountEmail: "tempoimmaterial@gmail.com",
+    calendarId: "tempoimmaterial@gmail.com",
+    name: "Tempo Immaterial",
+    color: CALENDAR_COLORS[5],
+    selected: true,
+    primary: true,
+    accessRole: "owner",
+    readOnly: false,
+  },
+  {
+    sourceKey: "demo:studio",
+    accountEmail: "tempoimmaterial@gmail.com",
+    calendarId: "studio@example.com",
+    name: "Studio schedule",
+    color: CALENDAR_COLORS[4],
+    selected: false,
+    primary: false,
+    accessRole: "reader",
+    readOnly: true,
+  },
+];
+
+const now = "2026-09-01T12:00:00.000Z";
+
+export const SHARED_CALENDAR_DEMO_EVENTS: CalendarEvent[] = [
+  demoEvent({
+    id: "google-builder-enablement",
+    title: "GTM Enablement",
+    start: "2026-09-02T12:00:00-04:00",
+    end: "2026-09-02T13:00:00-04:00",
+    accountEmail: "alice@builder.io",
+    calendarId: "alice@builder.io",
+    calendarName: "Alice · Builder",
+    color: CALENDAR_COLORS[1],
+  }),
+  demoEvent({
+    id: "google-personal-dermatology",
+    title: "dermatology appt",
+    start: "2026-09-01T15:20:00-04:00",
+    end: "2026-09-01T16:20:00-04:00",
+    accountEmail: "emdistal@gmail.com",
+    calendarId: "emdistal@gmail.com",
+    calendarName: "Alice Alexandra",
+    color: CALENDAR_COLORS[2],
+  }),
+  demoEvent({
+    id: "google-friends-cottage",
+    title: "Magpie Cottage Sale",
+    start: "2026-09-05T10:00:00-04:00",
+    end: "2026-09-05T16:00:00-04:00",
+    accountEmail: "emdistal@gmail.com",
+    calendarId: "friends@example.com",
+    calendarName: "Friends",
+    calendarAccessRole: "reader",
+    calendarReadOnly: true,
+    color: CALENDAR_COLORS[3],
+  }),
+  demoEvent({
+    id: "google-friends-birthday",
+    title: "Matt’s 33⅓ Birthday",
+    start: "2026-09-04T18:00:00-04:00",
+    end: "2026-09-04T19:00:00-04:00",
+    accountEmail: "emdistal@gmail.com",
+    calendarId: "friends@example.com",
+    calendarName: "Friends",
+    calendarAccessRole: "reader",
+    calendarReadOnly: true,
+    color: CALENDAR_COLORS[3],
+  }),
+  demoEvent({
+    id: "google-personal-dinner",
+    title: "dinner with sarah",
+    start: "2026-09-03T17:30:00-04:00",
+    end: "2026-09-03T20:00:00-04:00",
+    accountEmail: "emdistal@gmail.com",
+    calendarId: "emdistal@gmail.com",
+    calendarName: "Alice Alexandra",
+    color: CALENDAR_COLORS[2],
+  }),
+  demoEvent({
+    id: "google-tempo-studio",
+    title: "Open studio",
+    start: "2026-09-03T14:00:00-04:00",
+    end: "2026-09-03T16:00:00-04:00",
+    accountEmail: "tempoimmaterial@gmail.com",
+    calendarId: "studio@example.com",
+    calendarName: "Studio schedule",
+    calendarAccessRole: "reader",
+    calendarReadOnly: true,
+    color: CALENDAR_COLORS[4],
+  }),
+];
+
+function demoEvent(
+  event: Pick<
+    CalendarEvent,
+    | "id"
+    | "title"
+    | "start"
+    | "end"
+    | "accountEmail"
+    | "calendarId"
+    | "calendarName"
+    | "calendarAccessRole"
+    | "calendarReadOnly"
+    | "color"
+  >,
+): CalendarEvent {
+  const source = SHARED_CALENDAR_DEMO_SOURCES.find(
+    (candidate) =>
+      candidate.accountEmail === event.accountEmail &&
+      candidate.calendarId === event.calendarId,
+  );
+  return {
+    ...event,
+    calendarSourceKey: source?.sourceKey ?? "",
+    calendarPrimary: source?.primary,
+    description: "",
+    location: "",
+    allDay: false,
+    source: "google",
+    googleEventId: event.id.replace(/^google-/, ""),
+    htmlLink: "https://calendar.google.com/calendar/u/0/r",
+    createdAt: now,
+    updatedAt: now,
+  };
+}