@agent-native/core 0.154.5 → 0.157.0

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

@@ -844,10 +844,11 @@ const enUS = {
     checking: "Checking",
     checkingUpload: "Checking upload",
     clearAll: "Clear all",
+    clearAllWithCount: "Clear all candidates ({{count}})",
     clearCandidates: "Clear candidates",
     clearCandidatesTitle: "Clear {{count}} candidates?",
     clearCandidatesDescription:
-      "Clears the live stage and deletes unsaved draft candidates.",
+      "Clears the live stage and deletes every unsaved draft candidate. Saved library assets stay untouched.",
     clearGeneratedCandidatesTitle: "Clear generated candidates?",
     clearGeneratedCandidatesDescription:
       "This removes every unsaved candidate from the thread and deletes the generated asset rows behind them. Saved library assets are not touched.",
@@ -986,6 +987,7 @@ const enUS = {
     open: "Open",
     openAssets: "Open Assets",
     openChat: "Open chat",
+    hideDetails: "Hide details",
     openDetails: "Open details",
     preparing: "Preparing...",
     previousImage: "Previous image",
@@ -3728,7 +3730,9 @@ export const messagesByLocale = {
       checkingUpload: "正在检查上传",
       clear: "清除",
       clearAll: "全部清除",
+      clearAllWithCount: "清除所有候选项（{{count}}）",
       clearCandidates: "清除候选项",
+      hideDetails: "隐藏详情",
       clearCandidatesDescription: "清除实时阶段并删除未保存的草稿候选项。",
       clearCandidatesTitle: "清除 {{count}} 个候选项？",
       clearGeneratedCandidatesDescription:
@@ -4552,7 +4556,9 @@ export const messagesByLocale = {
       checkingImageLibraries: "Comprobando bibliotecas de imágenes...",
       checkingUpload: "Comprobando carga",
       clearAll: "Borrar todo",
+      clearAllWithCount: "Borrar todos los candidatos ({{count}})",
       clearCandidates: "Limpiar candidatos",
+      hideDetails: "Ocultar detalles",
       clearCandidatesDescription:
         "Limpia la etapa en vivo y elimina los candidatos de borrador no guardados.",
       clearGeneratedCandidatesDescription:
@@ -5026,7 +5032,9 @@ export const messagesByLocale = {
       checkingImageLibraries: "Vérification des bibliothèques d'images...",
       checkingUpload: "Vérification du téléchargement",
       clearAll: "Tout effacer",
+      clearAllWithCount: "Effacer tous les candidats ({{count}})",
       clearCandidates: "Effacer les candidats",
+      hideDetails: "Masquer les détails",
       clearCandidatesDescription:
         "Efface l'étape en direct et supprime les candidats de brouillon non enregistrés.",
       clearGeneratedCandidatesDescription:
@@ -5479,7 +5487,9 @@ export const messagesByLocale = {
       checkingImageLibraries: "Bildbibliotheken werden geprüft...",
       checkingUpload: "Upload wird überprüft",
       clearAll: "Alles löschen",
+      clearAllWithCount: "Alle Kandidaten löschen ({{count}})",
       clearCandidates: "Kandidaten löschen",
+      hideDetails: "Details ausblenden",
       clearCandidatesDescription:
         "Löscht die Live-Phase und entfernt nicht gespeicherte Entwurfskandidaten.",
       clearGeneratedCandidatesDescription:
@@ -5837,7 +5847,9 @@ export const messagesByLocale = {
       checkingImageLibraries: "画像ライブラリを確認中...",
       checkingUpload: "アップロードを確認しています",
       clearAll: "すべてクリア",
+      clearAllWithCount: "候補をすべてクリア（{{count}}）",
       clearCandidates: "候補をクリアする",
+      hideDetails: "詳細を非表示",
       clearCandidatesDescription:
         "ライブ ステージをクリアし、保存されていないドラフト候補を削除します。",
       clearGeneratedCandidatesDescription:
@@ -6186,7 +6198,9 @@ export const messagesByLocale = {
       checkingImageLibraries: "이미지 라이브러리 확인 중...",
       checkingUpload: "업로드 확인 중",
       clearAll: "모두 지우기",
+      clearAllWithCount: "후보 모두 지우기({{count}})",
       clearCandidates: "후보 제거",
+      hideDetails: "세부정보 숨기기",
       clearCandidatesDescription:
         "라이브 단계를 지우고 저장되지 않은 초안 후보를 삭제합니다.",
       clearGeneratedCandidatesDescription:
@@ -6534,7 +6548,9 @@ export const messagesByLocale = {
       checkingImageLibraries: "Verificando bibliotecas de imagens...",
       checkingUpload: "Verificando upload",
       clearAll: "Limpar tudo",
+      clearAllWithCount: "Limpar todos os candidatos ({{count}})",
       clearCandidates: "Limpar candidatos",
+      hideDetails: "Ocultar detalhes",
       clearCandidatesDescription:
         "Limpa o estágio ao vivo e exclui candidatos de rascunho não salvos.",
       clearGeneratedCandidatesDescription:
@@ -6985,7 +7001,9 @@ export const messagesByLocale = {
       checkingImageLibraries: "Image libraries जांची जा रही हैं...",
       checkingUpload: "अपलोड की जाँच की जा रही है",
       clearAll: "सभी साफ करें",
+      clearAllWithCount: "सभी उम्मीदवार साफ करें ({{count}})",
       clearCandidates: "उम्मीदवारों को साफ करें",
+      hideDetails: "विवरण छिपाएं",
       clearCandidatesDescription:
         "लाइव चरण को साफ करता है और अ सहेजे गए ड्राफ्ट उम्मीदवारों को हटाता है।",
       clearGeneratedCandidatesDescription:
@@ -7331,7 +7349,9 @@ export const messagesByLocale = {
       checkingImageLibraries: "جارٍ فحص مكتبات الصور...",
       checkingUpload: "التحقق من التحميل",
       clearAll: "مسح الكل",
+      clearAllWithCount: "مسح كل المرشحين ({{count}})",
       clearCandidates: "امسح المرشحين",
+      hideDetails: "إخفاء التفاصيل",
       clearCandidatesDescription:
         "مسح مرحلة المرشح وحذف المرشحين الذين تم إنشاؤهم غير المحفوظة. أصول المكتبة المحفوظة تبقى دون تغيير.",
       clearGeneratedCandidatesDescription:

package/corpus/templates/assets/app/routes/brand-kits.$id.tsx

@@ -4533,7 +4533,9 @@ function LiveCandidatesActions({
   const hasFailed = failedCount > 0;
   const isClearing = dismissSlots.isPending || deleteAssets.isPending;
   const actionLabel =
-    pending === "failed" ? t("library.dismissFailed") : t("library.clearAll");
+    pending === "failed"
+      ? t("library.dismissFailed")
+      : t("library.clearAllWithCount", { count: totalCount });
   const busyLabel =
     pending === "failed" ? t("library.dismissing") : t("library.clearing");
 
@@ -4645,26 +4647,28 @@ function LiveCandidatesActions({
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
-          <DropdownMenuItem
-            disabled={!hasFailed || isClearing}
-            onSelect={(event) => {
-              event.preventDefault();
-              setPending("failed");
-            }}
-          >
-            <IconTrash className="mr-2 h-4 w-4 shrink-0" />
-            {t("library.dismissFailedWithCount", { count: failedCount })}
-          </DropdownMenuItem>
+          {hasFailed ? (
+            <DropdownMenuItem
+              disabled={isClearing}
+              onSelect={(event) => {
+                event.preventDefault();
+                setPending("failed");
+              }}
+            >
+              <IconTrash className="mr-2 h-4 w-4 shrink-0" />
+              {t("library.dismissFailedWithCount", { count: failedCount })}
+            </DropdownMenuItem>
+          ) : null}
           <DropdownMenuItem
             className="text-destructive focus:bg-destructive/10 focus:text-destructive"
-            disabled={isClearing}
+            disabled={isClearing || totalCount === 0}
             onSelect={(event) => {
               event.preventDefault();
               setPending("all");
             }}
           >
             <IconTrash className="mr-2 h-4 w-4 shrink-0" />
-            {t("library.clearAll")}
+            {t("library.clearAllWithCount", { count: totalCount })}
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>

package/corpus/templates/calendar/AGENTS.md

@@ -24,6 +24,8 @@ Detailed event, availability, booking, storage, and UI rules live in
 - Never hardcode API keys, tokens, webhook URLs, signing secrets, private Builder/internal data, customer data, or credential-looking literals. Use secrets/OAuth/runtime configuration and obvious placeholders in examples.
 - Use actions for events, availability, booking links, settings, navigation,
   Google Calendar connection, and sharing. Do not bypass app access checks.
+- The `get-settings` and `update-settings` actions expose the General week-start
+  setting as `weekStart`: `sunday` or `monday`.
 - Use `connect-google-calendar` when the user asks to connect or reconnect
   Google Calendar. Return its link to the user; do not `fetch`
   `/_agent-native/google/auth-url` from the agent backend because that route

package/corpus/templates/calendar/DEVELOPING.md

@@ -99,10 +99,10 @@ Structured data lives in SQL. Use `@agent-native/core/db/schema` helpers for sch
 
 Configuration lives in the SQL `settings` table, accessed via the settings API:
 
-| Key                     | Contents                                     |
-| ----------------------- | -------------------------------------------- |
-| `calendar-settings`     | App settings (timezone, booking page config) |
-| `calendar-availability` | Availability schedule configuration          |
+| Key                     | Contents                                                 |
+| ----------------------- | -------------------------------------------------------- |
+| `calendar-settings`     | App settings (timezone, week start, booking page config) |
+| `calendar-availability` | Availability schedule configuration                      |
 
 ### OAuth Tokens (via `@agent-native/core/oauth-tokens`)
 

package/corpus/templates/calendar/actions/get-settings.ts

@@ -3,14 +3,7 @@ import { getRequestUserEmail } from "@agent-native/core/server";
 import { getUserSetting } from "@agent-native/core/settings";
 import { z } from "zod";
 
-import type { Settings } from "../shared/api.js";
-
-const DEFAULT_SETTINGS: Settings = {
-  timezone: "America/New_York",
-  bookingPageTitle: "Book a Meeting",
-  bookingPageDescription: "Select a time that works for you.",
-  defaultEventDuration: 30,
-};
+import { normalizeCalendarSettings } from "../shared/settings.js";
 
 export default defineAction({
   description: "Get calendar settings",
@@ -19,8 +12,8 @@ export default defineAction({
   run: async () => {
     const email = getRequestUserEmail();
     if (!email) throw new Error("no authenticated user");
-    const settings =
-      (await getUserSetting(email, "calendar-settings")) || DEFAULT_SETTINGS;
-    return settings;
+    return normalizeCalendarSettings(
+      await getUserSetting(email, "calendar-settings"),
+    );
   },
 });

package/corpus/templates/calendar/actions/update-availability.ts

@@ -8,16 +8,27 @@ import {
   updateBookingUsername,
 } from "../server/handlers/booking-usernames.js";
 import type { AvailabilityConfig } from "../shared/api.js";
+import { availabilitySlotsOverlap } from "../shared/availability-schedule.js";
 
 const timeSlotSchema = z.object({
   start: z.string(),
   end: z.string(),
 });
 
-const dayScheduleSchema = z.object({
-  enabled: z.boolean(),
-  slots: z.array(timeSlotSchema),
-});
+const dayScheduleSchema = z
+  .object({
+    enabled: z.boolean(),
+    slots: z.array(timeSlotSchema),
+  })
+  .superRefine((day, ctx) => {
+    if (availabilitySlotsOverlap(day.slots)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["slots"],
+        message: "Availability windows must not overlap",
+      });
+    }
+  });
 
 const availabilitySchema = z.object({
   timezone: z.string(),

package/corpus/templates/calendar/actions/update-settings.ts

@@ -1,9 +1,13 @@
 import { defineAction } from "@agent-native/core";
 import { getRequestUserEmail } from "@agent-native/core/server";
-import { putUserSetting, putSetting } from "@agent-native/core/settings";
+import {
+  getUserSetting,
+  putUserSetting,
+  putSetting,
+} from "@agent-native/core/settings";
 import { z } from "zod";
 
-import type { Settings } from "../shared/api.js";
+import { normalizeCalendarSettings } from "../shared/settings.js";
 
 export default defineAction({
   description: "Update calendar settings",
@@ -20,12 +24,19 @@ export default defineAction({
       .positive()
       .optional()
       .describe("Default event duration in minutes"),
+    weekStart: z
+      .enum(["sunday", "monday"])
+      .optional()
+      .describe("First day shown in calendar weeks"),
   }),
   run: async (args) => {
     const email = getRequestUserEmail();
     if (!email) throw new Error("no authenticated user");
-    // The frontend sends the full settings object as the body
-    const settings = args as unknown as Settings;
+    const currentSettings = await getUserSetting(email, "calendar-settings");
+    const settings = normalizeCalendarSettings({
+      ...normalizeCalendarSettings(currentSettings),
+      ...args,
+    });
     const settingsRecord = settings as unknown as Record<string, unknown>;
     await putUserSetting(email, "calendar-settings", settingsRecord);
     await putSetting("calendar-settings", settingsRecord);

package/corpus/templates/calendar/app/components/booking/DatePicker.tsx

@@ -1,4 +1,5 @@
 import type { AvailabilityConfig } from "@shared/api";
+import { getWeekdayOrder } from "@shared/calendar-week";
 import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
 import {
   startOfMonth,
@@ -31,6 +32,7 @@ interface DatePickerProps {
   availabilityLoading?: boolean;
   viewMonth: Date;
   onViewMonthChange: (month: Date) => void;
+  weekStartsOn?: 0 | 1;
 }
 
 const WEEKDAY_HEADERS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
@@ -53,12 +55,16 @@ export function DatePicker({
   availabilityLoading = false,
   viewMonth,
   onViewMonthChange,
+  weekStartsOn = 0,
 }: DatePickerProps) {
   const monthStart = startOfMonth(viewMonth);
   const monthEnd = endOfMonth(viewMonth);
-  const calendarStart = startOfWeek(monthStart);
-  const calendarEnd = endOfWeek(monthEnd);
+  const calendarStart = startOfWeek(monthStart, { weekStartsOn });
+  const calendarEnd = endOfWeek(monthEnd, { weekStartsOn });
   const days = eachDayOfInterval({ start: calendarStart, end: calendarEnd });
+  const weekdayHeaders = getWeekdayOrder(weekStartsOn).map(
+    (day) => WEEKDAY_HEADERS[day],
+  );
   const availableDateSet = useMemo(
     () => new Set(availableDates),
     [availableDates],
@@ -103,7 +109,7 @@ export function DatePicker({
 
       {/* Weekday headers */}
       <div className="grid grid-cols-7 mb-1">
-        {WEEKDAY_HEADERS.map((d) => (
+        {weekdayHeaders.map((d) => (
           <div
             key={d}
             className="py-1 text-center text-xs font-medium text-muted-foreground"

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

@@ -76,8 +76,8 @@ import {
   createReminderDraft,
   dateTimeInTimezoneToIso,
   getEventEndValidationMessage,
-  getLocalTimezone,
   remindersToDraftState,
+  resolveEventTimezone,
   type AttachmentDraft,
   type ReminderDraft,
   type ReminderMode,
@@ -236,7 +236,7 @@ export function CreateEventPopover({
   const defaultDurationMinutes = Number.isFinite(rawDefaultDuration)
     ? Math.max(5, rawDefaultDuration)
     : 30;
-  const defaultTimezone = settings?.timezone || getLocalTimezone();
+  const defaultTimezone = settings?.timezone || resolveEventTimezone();
   const fallbackStart = "09:00";
   const fallbackEnd = addMinutesToTimeString(
     fallbackStart,
@@ -279,6 +279,7 @@ export function CreateEventPopover({
   const [findTimeOpen, setFindTimeOpen] = useState(false);
   const isOutOfOffice = eventType === "outOfOffice";
   const timedOnlyStatus = eventType === "focusTime";
+  const eventTimezone = resolveEventTimezone(timezone);
 
   const createEvent = useCreateEvent();
   const delEvent = useDeleteEvent();
@@ -308,8 +309,9 @@ export function CreateEventPopover({
     }
 
     const nextDate = format(defaultDate || new Date(), "yyyy-MM-dd");
-    const draftTimezone =
-      draft?.startTimeZone || draft?.endTimeZone || defaultTimezone;
+    const draftTimezone = resolveEventTimezone(
+      draft?.startTimeZone || draft?.endTimeZone || defaultTimezone,
+    );
     const initKey = buildEventFormInitializationKey({
       draftId: draft?.id,
       date: nextDate,
@@ -455,12 +457,12 @@ export function CreateEventPopover({
       ? date
       : effectiveAllDay
         ? new Date(`${date}T00:00:00`).toISOString()
-        : dateTimeInTimezoneToIso(date, startTime, timezone);
+        : dateTimeInTimezoneToIso(date, startTime, eventTimezone);
     const endValue = fullDayOutOfOffice
       ? endDate
       : effectiveAllDay
         ? allDayEnd.toISOString()
-        : dateTimeInTimezoneToIso(endDate, endTime, timezone);
+        : dateTimeInTimezoneToIso(endDate, endTime, eventTimezone);
     const attachmentResult = validateAttachmentDrafts(attachments);
     const reminderPatch = buildReminderPayload(reminderMode, reminders);
     const nextDraft: CalendarEventDraft = {
@@ -470,8 +472,8 @@ export function CreateEventPopover({
       description: isOutOfOffice ? "" : description,
       start: startValue,
       end: endValue,
-      startTimeZone: effectiveAllDay ? undefined : timezone,
-      endTimeZone: effectiveAllDay ? undefined : timezone,
+      startTimeZone: effectiveAllDay ? undefined : eventTimezone,
+      endTimeZone: effectiveAllDay ? undefined : eventTimezone,
       location: isOutOfOffice ? "" : location,
       allDay: effectiveAllDay,
       fullDay: fullDayOutOfOffice,
@@ -547,7 +549,7 @@ export function CreateEventPopover({
     declineMessage,
     availability,
     visibility,
-    timezone,
+    eventTimezone,
     colorId,
     reminderMode,
     reminders,
@@ -578,7 +580,7 @@ export function CreateEventPopover({
         time: allDay
           ? t("eventForm.allDay")
           : t("eventForm.ai.timeRange", { startTime, endTime }),
-        timezone,
+        timezone: eventTimezone,
         location: location || t("eventForm.ai.none"),
         attendees:
           attendees.map((attendee) => attendee.email).join(", ") ||
@@ -636,11 +638,11 @@ export function CreateEventPopover({
   const effectiveAllDay = allDay && !isOutOfOffice && !timedOnlyStatus;
   const currentStartISO =
     !effectiveAllDay && date && startTime
-      ? dateTimeInTimezoneToIso(date, startTime, timezone)
+      ? dateTimeInTimezoneToIso(date, startTime, eventTimezone)
       : undefined;
   const currentEndISO =
     !effectiveAllDay && endDate && endTime
-      ? dateTimeInTimezoneToIso(endDate, endTime, timezone)
+      ? dateTimeInTimezoneToIso(endDate, endTime, eventTimezone)
       : undefined;
   const findTimeDurationMinutes =
     currentStartISO && currentEndISO
@@ -654,8 +656,8 @@ export function CreateEventPopover({
       : defaultDurationMinutes;
 
   function handleSelectFindTimeSlot(slot: { start: string; end: string }) {
-    const startParts = dateTimePartsInTimezone(slot.start, timezone);
-    const endParts = dateTimePartsInTimezone(slot.end, timezone);
+    const startParts = dateTimePartsInTimezone(slot.start, eventTimezone);
+    const endParts = dateTimePartsInTimezone(slot.end, eventTimezone);
     if (!startParts || !endParts) return;
     setAllDay(false);
     setDate(startParts.date);
@@ -708,12 +710,12 @@ export function CreateEventPopover({
       ? date
       : effectiveAllDay
         ? new Date(`${date}T00:00:00`).toISOString()
-        : dateTimeInTimezoneToIso(date, startTime, timezone);
+        : dateTimeInTimezoneToIso(date, startTime, eventTimezone);
     const endValue = fullDayOutOfOffice
       ? endDate
       : effectiveAllDay
         ? allDayEnd.toISOString()
-        : dateTimeInTimezoneToIso(endDate, endTime, timezone);
+        : dateTimeInTimezoneToIso(endDate, endTime, eventTimezone);
 
     if (
       fullDayOutOfOffice
@@ -761,8 +763,8 @@ export function CreateEventPopover({
       description: isOutOfOffice ? "" : description,
       start: startValue,
       end: endValue,
-      startTimeZone: effectiveAllDay ? undefined : timezone,
-      endTimeZone: effectiveAllDay ? undefined : timezone,
+      startTimeZone: effectiveAllDay ? undefined : eventTimezone,
+      endTimeZone: effectiveAllDay ? undefined : eventTimezone,
       location: isOutOfOffice ? "" : location,
       accountEmail,
       allDay: effectiveAllDay,
@@ -1459,7 +1461,7 @@ export function CreateEventPopover({
               (draft ? t("eventForm.invite") : t("eventForm.newEventLower"))
             }
             date={date}
-            timezone={timezone}
+            timezone={eventTimezone}
             durationMinutes={findTimeDurationMinutes}
             attendees={attendees}
             accountEmail={accountEmail}

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

@@ -1441,7 +1441,7 @@ export function EventDetailPopover({
         side={isMobile ? "bottom" : "right"}
         sideOffset={isMobile ? 6 : 8}
         collisionPadding={12}
-        className="flex max-h-[90vh] w-[calc(100vw-2rem)] flex-col overflow-hidden p-0 sm:w-[420px]"
+        className="flex max-h-[var(--radix-popover-content-available-height)] w-[min(420px,calc(100vw-2rem))] flex-col overflow-hidden p-0"
         onClick={(e) => e.stopPropagation()}
         onOpenAutoFocus={(e) => {
           e.preventDefault();
@@ -1671,12 +1671,15 @@ export function EventDetailPopover({
                             />
                           </>
                         )}
+                        <span className="ml-auto">
+                          <TimezonePickerPopover
+                            compact
+                            value={editTimezone}
+                            label={t("eventForm.timezone")}
+                            onChange={handleInlineTimezoneChange}
+                          />
+                        </span>
                       </div>
-                      <TimezonePickerPopover
-                        value={editTimezone}
-                        label={t("eventForm.timezone")}
-                        onChange={handleInlineTimezoneChange}
-                      />
                     </>
                   )}
                 </div>

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

@@ -5,12 +5,14 @@ import type {
   FindTimeResult,
   FindTimeSlot,
 } from "@shared/api";
+import { getWeekStartsOn } from "@shared/calendar-week";
 import {
   IconAlertCircle,
   IconCalendarTime,
   IconChevronLeft,
   IconChevronRight,
   IconLoader2,
+  IconX,
   IconUsers,
 } from "@tabler/icons-react";
 import {
@@ -31,11 +33,13 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useSettings } from "@/hooks/use-settings";
 import { dateTimeInTimezoneToIso } from "@/lib/event-form-utils";
 import { cn } from "@/lib/utils";
 
@@ -188,6 +192,8 @@ export function FindTimePanel({
   isTakeover = false,
 }: FindTimePanelProps) {
   const t = useT();
+  const { data: settings } = useSettings();
+  const weekStartsOn = getWeekStartsOn(settings?.weekStart);
   const [anchorDate, setAnchorDate] = useState(() => parseDateOnly(date));
 
   useEffect(() => {
@@ -220,7 +226,10 @@ export function FindTimePanel({
     return () => window.removeEventListener("keydown", handleKeyDown, true);
   }, [isTakeover]);
 
-  const weekStart = useMemo(() => startOfWeek(anchorDate), [anchorDate]);
+  const weekStart = useMemo(
+    () => startOfWeek(anchorDate, { weekStartsOn }),
+    [anchorDate, weekStartsOn],
+  );
   const days = useMemo(
     () =>
       eachDayOfInterval({
@@ -663,9 +672,11 @@ export function FindTimeTakeover({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
         data-find-time-takeover
-        className="flex h-[100dvh] max-h-[100dvh] w-screen max-w-none translate-x-[-50%] translate-y-[-50%] flex-col gap-0 overflow-hidden border-0 p-0 shadow-xl sm:rounded-none"
+        hideClose
+        overlayClassName="z-[310]"
+        className="z-[320] flex h-[100dvh] max-h-[100dvh] w-screen max-w-none translate-x-[-50%] translate-y-[-50%] flex-col gap-0 overflow-hidden border-0 p-0 shadow-xl sm:rounded-none"
       >
-        <header className="flex h-14 shrink-0 items-center border-b border-border px-4 pr-12 md:px-6">
+        <header className="flex h-14 shrink-0 items-center border-b border-border px-4 md:px-6">
           <div className="min-w-0">
             <DialogTitle className="truncate text-base">
               {dialogTitle}
@@ -679,6 +690,17 @@ export function FindTimeTakeover({
               {subtitle || t("findTime.takeoverDescription")}
             </DialogDescription>
           </div>
+          <DialogClose asChild>
+            <button
+              type="button"
+              aria-label={t("eventDialog.close")}
+              title={t("eventDialog.close")}
+              className="ml-auto flex h-10 shrink-0 items-center gap-2 rounded-md px-3 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            >
+              <IconX className="h-4 w-4" />
+              <span>{t("eventDialog.close")}</span>
+            </button>
+          </DialogClose>
         </header>
         <div className="min-h-0 flex-1 overflow-auto p-4 md:p-6">
           <FindTimePanel

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

@@ -193,10 +193,12 @@ export function TimezonePickerPopover({
   value,
   onChange,
   label,
+  compact = false,
 }: {
   value: string;
   onChange: (value: string) => void;
   label: string;
+  compact?: boolean;
 }) {
   const t = useT();
   const [open, setOpen] = useState(false);
@@ -208,11 +210,16 @@ export function TimezonePickerPopover({
           type="button"
           variant="ghost"
           size="sm"
-          className="h-auto justify-start rounded px-1.5 py-0.5 text-sm font-normal text-muted-foreground hover:bg-muted hover:text-foreground"
+          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",
+          )}
           aria-label={label}
+          title={compact ? label : undefined}
         >
-          <IconWorld className="mr-2 size-4 shrink-0" />
-          {formatTimezoneLabel(value)}
+          <IconWorld className={cn("size-4 shrink-0", !compact && "mr-2")} />
+          {!compact && formatTimezoneLabel(value)}
         </Button>
       </PopoverTrigger>
       <PopoverContent

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

@@ -1,4 +1,5 @@
 import type { CalendarEvent } from "@shared/api";
+import { getWeekdayOrder } from "@shared/calendar-week";
 import {
   startOfMonth,
   endOfMonth,
@@ -49,6 +50,7 @@ interface MonthViewProps {
   ) => void;
   onDraftDiscard?: (eventId: string) => void;
   isLoading?: boolean;
+  weekStartsOn?: 0 | 1;
 }
 
 // Skeleton pill widths per day-of-week (Sun–Sat), empty = no skeletons
@@ -85,6 +87,7 @@ export const MonthView = memo(function MonthView({
   onDraftCreate,
   onDraftDiscard,
   isLoading = false,
+  weekStartsOn = 0,
 }: MonthViewProps) {
   const isMobile = useIsMobile();
   const { prefs } = useViewPreferences();
@@ -93,8 +96,8 @@ export const MonthView = memo(function MonthView({
 
   const monthStart = startOfMonth(selectedDate);
   const monthEnd = endOfMonth(selectedDate);
-  const calendarStart = startOfWeek(monthStart);
-  const calendarEnd = endOfWeek(monthEnd);
+  const calendarStart = startOfWeek(monthStart, { weekStartsOn });
+  const calendarEnd = endOfWeek(monthEnd, { weekStartsOn });
   const allDays = eachDayOfInterval({
     start: calendarStart,
     end: calendarEnd,
@@ -103,13 +106,10 @@ export const MonthView = memo(function MonthView({
     ? allDays.filter((d) => d.getDay() !== 0 && d.getDay() !== 6)
     : allDays;
   const colCount = prefs.hideWeekends ? 5 : 7;
-  const headers = prefs.hideWeekends
-    ? (isMobile ? WEEKDAY_HEADERS_SHORT : WEEKDAY_HEADERS).filter(
-        (_, i) => i !== 0 && i !== 6,
-      )
-    : isMobile
-      ? WEEKDAY_HEADERS_SHORT
-      : WEEKDAY_HEADERS;
+  const headerLabels = isMobile ? WEEKDAY_HEADERS_SHORT : WEEKDAY_HEADERS;
+  const headers = getWeekdayOrder(weekStartsOn)
+    .filter((day) => !prefs.hideWeekends || (day !== 0 && day !== 6))
+    .map((day) => headerLabels[day]);
 
   // Pre-group events by every day they overlap (not just their start day) so
   // multi-day events keep appearing as the grid moves past their start date.