@agent-native/core 0.176.1 → 0.176.2-nightly-20260831184159

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

@@ -91,7 +91,7 @@ export function TimePickerPopover({
           variant="ghost"
           size="sm"
           className={cn(
-            "h-auto rounded px-1.5 py-0.5 text-base font-normal text-foreground hover:bg-muted",
+            "h-auto rounded px-1.5 py-0.5 text-[13px] leading-[18px] font-normal text-foreground hover:bg-muted",
             className,
           )}
           aria-label={label}
@@ -168,7 +168,7 @@ export function DatePickerPopover({
           variant="ghost"
           size="sm"
           className={cn(
-            "h-auto rounded px-1.5 py-0.5 text-base font-normal text-foreground hover:bg-muted",
+            "h-auto rounded px-1.5 py-0.5 text-[13px] leading-[18px] font-normal text-foreground hover:bg-muted",
             className,
           )}
           aria-label={label}
@@ -222,7 +222,7 @@ export function TimezonePickerPopover({
           className={cn(
             compact
               ? "size-7 rounded-full p-0 text-muted-foreground hover:bg-muted hover:text-foreground"
-              : "h-auto justify-start rounded px-1.5 py-0.5 text-sm font-normal text-muted-foreground hover:bg-muted hover:text-foreground",
+              : "h-auto justify-start rounded px-1.5 py-0.5 text-[13px] leading-[18px] font-normal text-muted-foreground hover:bg-muted hover:text-foreground",
           )}
           aria-label={label}
           title={compact ? label : undefined}
@@ -259,12 +259,15 @@ export function RepeatPicker({
   recurrence,
   onChange,
   onCustomChange,
+  compact = false,
 }: {
   preset: RecurrencePreset;
   referenceDate: string;
   recurrence?: string[];
   onChange: (preset: RecurrencePreset) => void;
   onCustomChange?: (draft: CustomRecurrenceDraft) => void;
+  /** Inline on the date line, the way Notion stacks repeat next to the timezone. */
+  compact?: boolean;
 }) {
   const t = useT();
   const [open, setOpen] = useState(false);
@@ -338,10 +341,15 @@ export function RepeatPicker({
           type="button"
           variant="ghost"
           size="sm"
-          className="h-auto w-full justify-start rounded-md px-1.5 py-1 text-sm font-normal text-muted-foreground hover:bg-muted hover:text-foreground"
+          className={cn(
+            "h-auto font-normal text-muted-foreground hover:bg-muted hover:text-foreground",
+            compact
+              ? "rounded px-1.5 py-0.5 text-[13px] leading-[18px]"
+              : "w-full justify-start rounded-md px-1.5 py-1 text-[13px] leading-[18px]",
+          )}
           aria-label={t("eventForm.repeat")}
         >
-          <IconRefresh className="mr-2 size-4 shrink-0" />
+          {!compact && <IconRefresh className="mr-2 size-4 shrink-0" />}
           {triggerLabel}
         </Button>
       </PopoverTrigger>

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

@@ -1,5 +1,6 @@
 import { useT } from "@agent-native/core/client/i18n";
 import type { CalendarEvent } from "@shared/api";
+import { isCalendarEventOrganizer } from "@shared/event-permissions";
 import {
   IconAlertTriangleFilled,
   IconBuilding,
@@ -42,6 +43,7 @@ import {
   getDateKeyInTimezone,
   getEventDateKey,
   getEventSegmentForCalendarDay,
+  isAllDayCalendarEvent,
 } from "@/lib/calendar-timezone";
 import { getEventDisplayColor, allOtherDeclined } from "@/lib/event-colors";
 import {
@@ -272,6 +274,7 @@ const WeekEventCard = memo(function WeekEventCard({
   onPopoverOpenChange,
 }: WeekEventCardProps) {
   const t = useT();
+  const canManipulate = canDrag && isCalendarEventOrganizer(event);
   const workingLocationLabels = createWorkingLocationDisplayLabels(t);
   const title = getWorkingLocationChipLabel(event, workingLocationLabels);
   const ariaTitle = getWorkingLocationTitle(event, workingLocationLabels);
@@ -355,7 +358,7 @@ const WeekEventCard = memo(function WeekEventCard({
         isDeclined && "saturate-[0.3]",
         isBeingDragged && isDragging && "shadow-lg z-[100]",
         isBeingDragged && isDragging && "ring-2 ring-primary/40",
-        canDrag && segmentStartsHere && "cursor-grab",
+        canManipulate && segmentStartsHere && "cursor-grab",
         isBeingDragged && isDragging && "cursor-grabbing",
         event.ownerColor && "pr-4",
       )}
@@ -460,7 +463,7 @@ const WeekEventCard = memo(function WeekEventCard({
         </>
       )}
       {/* Top resize handle */}
-      {canDrag && isStart && (
+      {canManipulate && isStart && (
         <div
           data-resize-handle="true"
           onPointerDown={(e) => {
@@ -472,7 +475,7 @@ const WeekEventCard = memo(function WeekEventCard({
         />
       )}
       {/* Bottom resize handle — only on single-day segments; multi-day end segments need segment-aware drag math */}
-      {canDrag && isEnd && isStart && (
+      {canManipulate && isEnd && isStart && (
         <div
           data-resize-handle="true"
           onPointerDown={(e) => {
@@ -633,7 +636,8 @@ export const WeekView = memo(function WeekView({
   const allDayEvents = useMemo(
     () =>
       events.filter(
-        (event) => event.allDay || isFullDayOutOfOfficeEvent(event),
+        (event) =>
+          isAllDayCalendarEvent(event) || isFullDayOutOfOfficeEvent(event),
       ),
     [events],
   );
@@ -642,7 +646,7 @@ export const WeekView = memo(function WeekView({
     () =>
       events.filter(
         (event) =>
-          !event.allDay &&
+          !isAllDayCalendarEvent(event) &&
           isOutOfOfficeEvent(event) &&
           !isFullDayOutOfOfficeEvent(event),
       ),
@@ -650,7 +654,10 @@ export const WeekView = memo(function WeekView({
   );
 
   const timedEvents = useMemo(
-    () => events.filter((event) => !event.allDay && !isOutOfOfficeEvent(event)),
+    () =>
+      events.filter(
+        (event) => !isAllDayCalendarEvent(event) && !isOutOfOfficeEvent(event),
+      ),
     [events],
   );
 
@@ -866,6 +873,7 @@ export const WeekView = memo(function WeekView({
       isStart: boolean,
       dayIndex: number,
     ) => {
+      if (!isCalendarEventOrganizer(event)) return;
       focusedEventIdRef.current = event.id;
       setFocusedEventId(event.id);
       setFocusedEvent(event);
@@ -882,16 +890,20 @@ export const WeekView = memo(function WeekView({
 
   const handleResizeTopPointerDown = useCallback(
     (e: React.PointerEvent, eventId: string, dayIndex: number) => {
+      const event = events.find((candidate) => candidate.id === eventId);
+      if (!event || !isCalendarEventOrganizer(event)) return;
       startDrag(e, eventId, "resize-top", dayIndex);
     },
-    [startDrag],
+    [events, startDrag],
   );
 
   const handleResizeBottomPointerDown = useCallback(
     (e: React.PointerEvent, eventId: string, dayIndex: number) => {
+      const event = events.find((candidate) => candidate.id === eventId);
+      if (!event || !isCalendarEventOrganizer(event)) return;
       startDrag(e, eventId, "resize", dayIndex);
     },
-    [startDrag],
+    [events, startDrag],
   );
 
   // Drag-to-create: pointer-down-drag-up on empty grid background
@@ -1405,7 +1417,7 @@ export const WeekView = memo(function WeekView({
                         label={t("eventForm.outOfOffice")}
                         markerIndex={markerIndex}
                         compactMarker
-                        canDrag={canDrag}
+                        canDrag={canDrag && isCalendarEventOrganizer(event)}
                         isBeingDragged={isBeingDragged}
                         isDragging={isDragging}
                         isDragTargetDay={overrides?.dayIndex === dayIndex}

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

@@ -1,10 +1,9 @@
-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";
+import { AgentNativeIcon, FeedbackButton } from "@agent-native/core/client/ui";
 import { SidebarFooterActions } from "@agent-native/toolkit/app-shell";
 import { getWeekdayOrder, getWeekStartsOn } from "@shared/calendar-week";
 import {
@@ -91,7 +90,7 @@ import { cn } from "@/lib/utils";
 import { useCalendarContext } from "./AppLayout";
 
 const navItems = [
-  { path: "/", labelKey: "navigation.calendar", icon: IconCalendar },
+  { path: "/home", labelKey: "navigation.calendar", icon: IconCalendar },
   {
     path: "/booking-links",
     labelKey: "navigation.bookingLinks",
@@ -205,12 +204,14 @@ function MiniCalendar({
   const { data: settings } = useSettings();
   const weekStartsOn = getWeekStartsOn(settings?.weekStart);
 
-  // Sync viewMonth when selectedDate changes to a different month
+  // Sync viewMonth when selectedDate changes without undoing explicit month navigation.
   useEffect(() => {
-    if (!isSameMonth(viewMonth, selectedDate)) {
-      setViewMonth(startOfMonth(selectedDate));
-    }
-  }, [selectedDate, viewMonth]);
+    setViewMonth((currentMonth) =>
+      isSameMonth(currentMonth, selectedDate)
+        ? currentMonth
+        : startOfMonth(selectedDate),
+    );
+  }, [selectedDate]);
 
   const days = useMemo(() => {
     const monthStart = startOfMonth(viewMonth);
@@ -682,8 +683,8 @@ export function Sidebar({
 
   function handleMiniCalendarDateSelect(date: Date) {
     setSelectedDate(date);
-    if (location.pathname !== "/") {
-      void navigate("/");
+    if (location.pathname !== "/home") {
+      void navigate("/home");
     }
     onClose();
   }
@@ -766,7 +767,7 @@ export function Sidebar({
           )}
         >
           <Link
-            to="/"
+            to="/home"
             onClick={(event) => {
               onClose();
               if (
@@ -783,7 +784,7 @@ export function Sidebar({
               onCollapsedChange(!collapsed);
             }}
             className={cn(
-              "flex items-center gap-2 rounded outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "flex items-center gap-2 rounded text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring",
               collapsed ? "size-8 justify-center" : "flex-1",
             )}
             aria-label={
@@ -797,21 +798,9 @@ export function Sidebar({
             }
             data-sidebar-brand-toggle
           >
-            <img
-              src={appPath("/agent-native-icon-light.svg")}
-              alt=""
+            <AgentNativeIcon
               aria-hidden="true"
-              width={28}
-              height={16}
-              className="block h-4 w-7 shrink-0 object-contain object-center dark:hidden"
-            />
-            <img
-              src={appPath("/agent-native-icon-dark.svg")}
-              alt=""
-              aria-hidden="true"
-              width={28}
-              height={16}
-              className="hidden h-4 w-7 shrink-0 object-contain object-center dark:block"
+              className="h-3.5 w-6 shrink-0 text-foreground"
             />
             {!collapsed && (
               <span className="text-base font-semibold tracking-tight">
@@ -1154,7 +1143,7 @@ export function Sidebar({
             "shrink-0",
             collapsed
               ? "flex flex-col items-center gap-1 px-1 py-2"
-              : "space-y-0.5 p-2.5",
+              : "space-y-0.5 px-2.5 pt-2.5",
           )}
         >
           {bottomNavItems.map((item) => {
@@ -1190,15 +1179,15 @@ export function Sidebar({
         </nav>
 
         {!collapsed ? (
-          <div className="shrink-0">
-            <div className="px-3 py-2">
-              <OrgSwitcher reserveSpace />
+          <>
+            <div className="px-3 py-2 empty:hidden">
+              <OrgSwitcher />
             </div>
 
-            <div className="flex items-center gap-1 px-1.5 py-1.5">
+            <div className="px-3 py-2 empty:hidden">
               <DevDatabaseLink />
             </div>
-          </div>
+          </>
         ) : null}
         <SidebarFooterActions
           collapsed={collapsed}

package/corpus/templates/calendar/app/global.css

@@ -36,9 +36,13 @@
   --sidebar-accent-foreground: 0 0% 15%;
   --sidebar-border: 0 0% 90%;
   --sidebar-ring: 0 0% 40%;
+  --conference: 212 70% 48%;
+  --conference-foreground: 0 0% 100%;
 }
 
 .dark {
+  --conference: 210 64% 53%;
+  --conference-foreground: 0 0% 100%;
   --background: 0 0% 13%;
   --foreground: 0 0% 90%;
   --card: 0 0% 15%;
@@ -143,3 +147,10 @@
 ::-webkit-scrollbar-thumb:hover {
   background: hsl(var(--muted-foreground) / 0.4);
 }
+
+/* Exposes the conference accent to Tailwind utilities the same way
+   `agent-native.css` exposes the shared shadcn tokens. */
+@theme inline {
+  --color-conference: hsl(var(--conference));
+  --color-conference-foreground: hsl(var(--conference-foreground));
+}

package/corpus/templates/calendar/app/hooks/use-meeting-start-notifications.ts

@@ -11,6 +11,16 @@ function supportsNotifications() {
   return typeof window !== "undefined" && "Notification" in window;
 }
 
+export function getMeetingStartNotificationPermission(): NotificationPermission | null {
+  return supportsNotifications() ? Notification.permission : null;
+}
+
+export async function requestMeetingStartNotificationPermission(): Promise<NotificationPermission | null> {
+  const permission = getMeetingStartNotificationPermission();
+  if (permission !== "default") return permission;
+  return Notification.requestPermission();
+}
+
 function loadSentKeys(): string[] {
   try {
     const raw = window.localStorage.getItem(STORAGE_KEY);

package/corpus/templates/calendar/app/hooks/use-navigation-state.ts

@@ -103,7 +103,7 @@ export function useNavigationState() {
     getNavigationState: ({ pathname }) => {
       const state: NavigationState = { view: "calendar" };
 
-      if (pathname === "/" || pathname === "") {
+      if (pathname === "/home" || pathname === "") {
         state.view = "calendar";
       } else if (pathname.startsWith("/availability")) {
         state.view = "availability";
@@ -141,7 +141,7 @@ export function useNavigationState() {
       return state;
     },
     getCommandPath: (cmd) => {
-      let path = "/";
+      let path = "/home";
       if (cmd.view === "availability") {
         path = "/availability";
       } else if (cmd.view === "booking-links") {
@@ -156,7 +156,7 @@ export function useNavigationState() {
           ? `/extensions/${encodeURIComponent(cmd.extensionId)}`
           : "/extensions";
       } else {
-        path = "/";
+        path = "/home";
       }
       return path;
     },

package/corpus/templates/calendar/app/i18n-data.ts

@@ -247,6 +247,13 @@ const enUS = {
     appearance: "Appearance",
     appearanceDescription:
       "Pick a color theme for your workspace. Or just ask the agent.",
+    desktopNotifications: "Desktop notifications",
+    desktopNotificationsDescription:
+      "Show a system notification shortly before meetings while Calendar is open.",
+    enableDesktopNotifications: "Enable notifications",
+    desktopNotificationsEnabled: "Enabled",
+    desktopNotificationsBlocked:
+      "Notifications are blocked. Allow them in your browser settings, then try again.",
     connectGoogleCalendar: "Connect Google Calendar",
     connectGoogleDescription:
       "Sync your events and manage everything in one place.",
@@ -9818,6 +9825,108 @@ const translatedCalendarAvailabilityFix = {
   },
 } satisfies Partial<Record<LocaleCode, PartialMessages>>;
 
+const translatedCalendarNotificationSettings = {
+  "zh-CN": {
+    settings: {
+      desktopNotifications: "桌面通知",
+      desktopNotificationsDescription:
+        "Calendar 打开时，在会议开始前显示系统通知。",
+      enableDesktopNotifications: "启用通知",
+      desktopNotificationsEnabled: "已启用",
+      desktopNotificationsBlocked:
+        "通知已被阻止。请在浏览器设置中允许通知，然后重试。",
+    },
+  },
+  "es-ES": {
+    settings: {
+      desktopNotifications: "Notificaciones de escritorio",
+      desktopNotificationsDescription:
+        "Muestra una notificación del sistema poco antes de las reuniones mientras Calendar está abierto.",
+      enableDesktopNotifications: "Activar notificaciones",
+      desktopNotificationsEnabled: "Activadas",
+      desktopNotificationsBlocked:
+        "Las notificaciones están bloqueadas. Permítelas en la configuración del navegador y vuelve a intentarlo.",
+    },
+  },
+  "fr-FR": {
+    settings: {
+      desktopNotifications: "Notifications de bureau",
+      desktopNotificationsDescription:
+        "Affichez une notification système peu avant les réunions lorsque Calendar est ouvert.",
+      enableDesktopNotifications: "Activer les notifications",
+      desktopNotificationsEnabled: "Activées",
+      desktopNotificationsBlocked:
+        "Les notifications sont bloquées. Autorisez-les dans les paramètres du navigateur, puis réessayez.",
+    },
+  },
+  "de-DE": {
+    settings: {
+      desktopNotifications: "Desktop-Benachrichtigungen",
+      desktopNotificationsDescription:
+        "Zeige kurz vor Meetings eine Systembenachrichtigung an, solange Calendar geöffnet ist.",
+      enableDesktopNotifications: "Benachrichtigungen aktivieren",
+      desktopNotificationsEnabled: "Aktiviert",
+      desktopNotificationsBlocked:
+        "Benachrichtigungen sind blockiert. Erlaube sie in den Browsereinstellungen und versuche es erneut.",
+    },
+  },
+  "ja-JP": {
+    settings: {
+      desktopNotifications: "デスクトップ通知",
+      desktopNotificationsDescription:
+        "Calendar を開いている間、会議の少し前にシステム通知を表示します。",
+      enableDesktopNotifications: "通知を有効にする",
+      desktopNotificationsEnabled: "有効",
+      desktopNotificationsBlocked:
+        "通知がブロックされています。ブラウザの設定で通知を許可してから、もう一度お試しください。",
+    },
+  },
+  "ko-KR": {
+    settings: {
+      desktopNotifications: "데스크톱 알림",
+      desktopNotificationsDescription:
+        "Calendar이(가) 열려 있는 동안 회의 전에 시스템 알림을 표시합니다.",
+      enableDesktopNotifications: "알림 사용",
+      desktopNotificationsEnabled: "사용 중",
+      desktopNotificationsBlocked:
+        "알림이 차단되어 있습니다. 브라우저 설정에서 알림을 허용한 후 다시 시도하세요.",
+    },
+  },
+  "pt-BR": {
+    settings: {
+      desktopNotifications: "Notificações da área de trabalho",
+      desktopNotificationsDescription:
+        "Mostre uma notificação do sistema pouco antes das reuniões enquanto o Calendar estiver aberto.",
+      enableDesktopNotifications: "Ativar notificações",
+      desktopNotificationsEnabled: "Ativadas",
+      desktopNotificationsBlocked:
+        "As notificações estão bloqueadas. Permita-as nas configurações do navegador e tente novamente.",
+    },
+  },
+  "hi-IN": {
+    settings: {
+      desktopNotifications: "डेस्कटॉप सूचनाएं",
+      desktopNotificationsDescription:
+        "Calendar खुला होने पर मीटिंग से कुछ समय पहले सिस्टम सूचना दिखाएं।",
+      enableDesktopNotifications: "सूचनाएं सक्षम करें",
+      desktopNotificationsEnabled: "सक्षम",
+      desktopNotificationsBlocked:
+        "सूचनाएं ब्लॉक हैं। ब्राउज़र सेटिंग में इन्हें अनुमति दें और फिर कोशिश करें।",
+    },
+  },
+  "ar-SA": {
+    settings: {
+      desktopNotifications: "إشعارات سطح المكتب",
+      desktopNotificationsDescription:
+        "اعرض إشعارًا من النظام قبل الاجتماعات بقليل أثناء فتح Calendar.",
+      enableDesktopNotifications: "تفعيل الإشعارات",
+      desktopNotificationsEnabled: "مفعّلة",
+      desktopNotificationsBlocked:
+        "الإشعارات محظورة. اسمح بها في إعدادات المتصفح ثم حاول مرة أخرى.",
+    },
+  },
+} satisfies Partial<Record<LocaleCode, PartialMessages>>;
+
 function applyTranslatedCalendarOverrides(
   translationSet: Partial<Record<LocaleCode, PartialMessages>>,
 ) {
@@ -9869,3 +9978,4 @@ applyTranslatedCalendarOverrides(translatedCalendarRemainingRaw);
 applyTranslatedCalendarOverrides(translatedCalendarRawBurnDown);
 applyTranslatedCalendarOverrides(translatedCalendarExactCleanup);
 applyTranslatedCalendarOverrides(translatedCalendarAvailabilityFix);
+applyTranslatedCalendarOverrides(translatedCalendarNotificationSettings);

package/corpus/templates/calendar/app/lib/calendar-timezone.ts

@@ -47,6 +47,15 @@ export function normalizeTimezone(timezone?: string): string {
   return isCalendarTimezone(timezone) ? timezone : getBrowserTimezone();
 }
 
+export function isAllDayCalendarEvent(
+  event: Pick<CalendarEvent, "allDay" | "start" | "end">,
+): boolean {
+  return (
+    event.allDay ||
+    (DATE_ONLY_PATTERN.test(event.start) && DATE_ONLY_PATTERN.test(event.end))
+  );
+}
+
 /** Date carriers are kept at local noon so browser DST never changes their date. */
 export function dateKeyToDate(date: string): Date {
   const [year, month, day] = date.split("-").map(Number);
@@ -205,7 +214,7 @@ function eventDateRange(
   event: Pick<CalendarEvent, "start" | "end" | "allDay">,
   timezone: string,
 ) {
-  if (event.allDay) {
+  if (isAllDayCalendarEvent(event)) {
     const startDate = dateOnlyPart(event.start);
     const endDate =
       dateOnlyPart(event.end) ??
@@ -234,7 +243,7 @@ export function moveEventToCalendarDate(
   const sourceStartDate = getEventDateKey(event, timezone);
   if (!sourceStartDate) return null;
 
-  if (event.allDay) {
+  if (isAllDayCalendarEvent(event)) {
     const sourceEndDate =
       dateOnlyPart(event.end) ?? addCalendarDays(sourceStartDate, 1);
     const spanDays = Math.max(
@@ -285,7 +294,7 @@ export function eventOverlapsCalendarDay(
 ): boolean {
   const normalizedTimezone = normalizeTimezone(timezone);
   const dayBounds = getCalendarDayBounds(day, normalizedTimezone);
-  if (event.allDay) {
+  if (isAllDayCalendarEvent(event)) {
     const range = eventDateRange(event, normalizedTimezone);
     const dayDate = dayBounds.date;
     return Boolean(

package/corpus/templates/calendar/app/lib/event-popover-style.ts

@@ -0,0 +1,43 @@
+// Shared chrome for the two event popovers (detail and create). Both are meant
+// to read as the same surface, and they drifted apart the last time each file
+// carried its own copy of these values.
+//
+// The geometry is measured from Notion Calendar's event popover: a 284px shell,
+// a single 13px/18px type scale for every row, 30px rows, and a 16px icon /
+// 42px text column (16px inset + 18px icon + 8px gap). The one deliberate
+// difference is color — these use our own tokens so light mode and theming come
+// from the same place as the rest of the app.
+
+/** Popover shell: translucent, blurred, and the source of the 13px type scale. */
+export const eventPopoverShell =
+  "flex max-h-[var(--radix-popover-content-available-height)] flex-col overflow-hidden rounded-xl border-border/60 bg-popover/85 p-0 text-[13px] leading-[18px] shadow-[0_24px_48px_-8px_rgb(0_0_0/0.22),0_4px_12px_-1px_rgb(0_0_0/0.12)] backdrop-blur-md backdrop-saturate-150";
+
+/** 284px, but never wider than the viewport on small screens. */
+export const eventPopoverWidth = "w-[min(284px,calc(100vw-2rem))]";
+
+/** 44px header. Right padding is tighter than left to sit under the icon buttons. */
+export const eventPopoverHeader =
+  "flex h-11 shrink-0 items-center justify-between border-b border-border/60 pl-4 pr-2.5";
+
+export const eventPopoverHeaderTitle =
+  "text-[13px] font-medium text-foreground";
+
+/** Header icon buttons — 30px hit target around a 16px icon. */
+export const eventPopoverHeaderButton =
+  "size-[30px] rounded-md text-muted-foreground hover:text-foreground";
+
+/** Full-bleed 1px rule between sections, matching Notion's edge-to-edge divider. */
+export const eventPopoverDivider = "my-2 border-t border-border/60";
+
+/** A 30px row: 16px inset, 18px icon, 8px gap, 13px text. */
+export const eventPopoverRow = "flex items-start gap-2 px-4 py-1.5";
+
+/** Row leading icon. Thin stroke keeps Tabler from reading heavier than Notion's. */
+export const eventPopoverRowIcon = "size-[18px] shrink-0 text-muted-foreground";
+
+/** Placeholder rows ("Add location", "Conferencing") sit a step further back. */
+export const eventPopoverGhostText = "text-muted-foreground/60";
+
+/** Full-width primary action (Join Zoom / Join Meet). */
+export const eventPopoverPrimaryAction =
+  "flex h-[30px] w-full items-center justify-center rounded-md px-2 text-[13px] font-medium";

package/corpus/templates/calendar/app/lib/mcp-embed.ts

@@ -15,6 +15,12 @@
  */
 export function isMcpEmbedSurface(): boolean {
   if (typeof window === "undefined") return false;
-  const value = new URLSearchParams(window.location.search).get("embedded");
-  return value === "1" || value === "true";
+  const params = new URLSearchParams(window.location.search);
+  const value = params.get("embedded");
+  const chatFirst = params.get("chatFirst");
+  return (
+    (value === "1" || value === "true") &&
+    chatFirst !== "1" &&
+    chatFirst !== "true"
+  );
 }

package/corpus/templates/calendar/app/lib/utils.ts

@@ -7,6 +7,8 @@ export function isMacPlatform(): boolean {
   );
 }
 
+// macOS spells this modifier with the glyph, not the word — "Cmd J" next to a
+// key chip reads as two words rather than a shortcut.
 export function shortcutModifierLabel(): string {
-  return isMacPlatform() ? "Cmd" : "Ctrl";
+  return isMacPlatform() ? "\u2318" : "Ctrl";
 }

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

@@ -1,5 +1,6 @@
 import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
 import {
+  DefaultSpinner,
   OpenSourceBadge,
   PoweredByBadge,
   StarfieldBackground,
@@ -27,7 +28,6 @@ import { DatePicker } from "@/components/booking/DatePicker";
 import { TimeSlotPicker } from "@/components/booking/TimeSlotPicker";
 import { ThemeToggle } from "@/components/ThemeToggle";
 import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/spinner";
 import {
   useAvailableDays,
   useAvailableSlots,
@@ -266,13 +266,7 @@ export default function BookingPage() {
     availabilityLoading ||
     isRedirecting
   ) {
-    return (
-      <BookingPageShell>
-        <div className="mx-auto mt-[7.5vh] flex w-full max-w-lg justify-center">
-          <Spinner className="size-8 text-foreground" />
-        </div>
-      </BookingPageShell>
-    );
+    return <DefaultSpinner />;
   }
 
   if ((bookingLinkError || !bookingLink) && !isLegacyBookingPage) {