@agent-native/core 0.154.4 → 0.155.0

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

@@ -1,5 +1,6 @@
 import { useT } from "@agent-native/core/client/i18n";
 import type { AvailabilityConfig, DaySchedule } from "@shared/api";
+import { IconPlus, IconTrash } from "@tabler/icons-react";
 import { useState, useEffect } from "react";
 import { toast } from "sonner";
 
@@ -21,6 +22,14 @@ import {
   useUpdateAvailability,
 } from "@/hooks/use-availability";
 import { useDbStatus } from "@/hooks/use-db-status";
+import {
+  DEFAULT_TIME_SLOT,
+  addTimeSlot,
+  getEditableTimeSlots,
+  removeTimeSlot,
+  setDayEnabled,
+  updateTimeSlot,
+} from "@/lib/availability-schedule";
 import { copyTextToClipboard } from "@/lib/clipboard";
 
 type DayName = keyof AvailabilityConfig["weeklySchedule"];
@@ -37,7 +46,7 @@ const DAYS: { key: DayName }[] = [
 
 const DEFAULT_SCHEDULE: DaySchedule = {
   enabled: false,
-  slots: [{ start: "09:00", end: "17:00" }],
+  slots: [{ ...DEFAULT_TIME_SLOT }],
 };
 
 export default function AvailabilitySettings() {
@@ -93,17 +102,36 @@ export default function AvailabilitySettings() {
   function updateDay(day: DayName, updates: Partial<DaySchedule>) {
     setSchedule((prev) => ({
       ...prev,
-      [day]: { ...prev[day], ...updates },
+      [day]:
+        typeof updates.enabled === "boolean"
+          ? setDayEnabled(prev[day], updates.enabled)
+          : { ...prev[day], ...updates },
     }));
   }
 
-  function updateDaySlot(day: DayName, field: "start" | "end", value: string) {
+  function updateDaySlot(
+    day: DayName,
+    slotIndex: number,
+    field: "start" | "end",
+    value: string,
+  ) {
     setSchedule((prev) => ({
       ...prev,
-      [day]: {
-        ...prev[day],
-        slots: [{ ...prev[day].slots[0], [field]: value }],
-      },
+      [day]: updateTimeSlot(prev[day], slotIndex, field, value),
+    }));
+  }
+
+  function addDaySlot(day: DayName) {
+    setSchedule((prev) => ({
+      ...prev,
+      [day]: addTimeSlot(prev[day]),
+    }));
+  }
+
+  function removeDaySlot(day: DayName, slotIndex: number) {
+    setSchedule((prev) => ({
+      ...prev,
+      [day]: removeTimeSlot(prev[day], slotIndex),
     }));
   }
 
@@ -181,7 +209,7 @@ export default function AvailabilitySettings() {
           </div>
           {DAYS.map(({ key }) => {
             const day = schedule[key];
-            const slot = day.slots[0] ?? { start: "09:00", end: "17:00" };
+            const slots = getEditableTimeSlots(day);
             return (
               <div
                 key={key}
@@ -198,26 +226,60 @@ export default function AvailabilitySettings() {
                 </div>
 
                 {day.enabled ? (
-                  <div className="flex items-center gap-2">
-                    <Input
-                      type="time"
-                      value={slot.start}
-                      onChange={(e) =>
-                        updateDaySlot(key, "start", e.target.value)
-                      }
-                      className="w-28 sm:w-32"
-                    />
-                    <span className="text-muted-foreground">
-                      {t("bookingLinks.to")}
-                    </span>
-                    <Input
-                      type="time"
-                      value={slot.end}
-                      onChange={(e) =>
-                        updateDaySlot(key, "end", e.target.value)
-                      }
-                      className="w-28 sm:w-32"
-                    />
+                  <div className="min-w-0 flex-1 space-y-2">
+                    {slots.map((slot, slotIndex) => (
+                      <div
+                        key={`${key}-${slotIndex}`}
+                        className="flex flex-wrap items-center gap-2"
+                      >
+                        <Input
+                          type="time"
+                          value={slot.start}
+                          onChange={(e) =>
+                            updateDaySlot(
+                              key,
+                              slotIndex,
+                              "start",
+                              e.target.value,
+                            )
+                          }
+                          className="w-28 sm:w-32"
+                        />
+                        <span className="text-muted-foreground">
+                          {t("bookingLinks.to")}
+                        </span>
+                        <Input
+                          type="time"
+                          value={slot.end}
+                          onChange={(e) =>
+                            updateDaySlot(key, slotIndex, "end", e.target.value)
+                          }
+                          className="w-28 sm:w-32"
+                        />
+                        {slots.length > 1 && (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 px-2 text-muted-foreground hover:text-destructive"
+                            onClick={() => removeDaySlot(key, slotIndex)}
+                          >
+                            <IconTrash className="mr-1.5 h-3.5 w-3.5" />
+                            {t("eventForm.delete")}
+                          </Button>
+                        )}
+                      </div>
+                    ))}
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 px-2"
+                      onClick={() => addDaySlot(key)}
+                    >
+                      <IconPlus className="mr-1.5 h-3.5 w-3.5" />
+                      {t("bookingLinks.add")}
+                    </Button>
                   </div>
                 ) : (
                   <span className="text-sm text-muted-foreground">

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

@@ -14,6 +14,7 @@ import type {
   CustomField,
   DaySchedule,
 } from "@shared/api";
+import { getWeekdayOrder, getWeekStartsOn } from "@shared/calendar-week";
 import {
   IconBrandGoogle,
   IconBrandZoom,
@@ -113,7 +114,16 @@ import {
   OPTIMISTIC_PREFIX,
 } from "@/hooks/use-booking-links";
 import { useGoogleAuthStatus } from "@/hooks/use-google-auth";
+import { useSettings } from "@/hooks/use-settings";
 import { useZoomStatus, useConnectZoom } from "@/hooks/use-zoom-auth";
+import {
+  DEFAULT_TIME_SLOT,
+  addTimeSlot,
+  getEditableTimeSlots,
+  removeTimeSlot,
+  setDayEnabled,
+  updateTimeSlot,
+} from "@/lib/availability-schedule";
 import { copyTextToClipboard } from "@/lib/clipboard";
 import { cn } from "@/lib/utils";
 
@@ -175,7 +185,7 @@ const DAYS: { key: DayName }[] = [
 
 const DEFAULT_SCHEDULE: DaySchedule = {
   enabled: false,
-  slots: [{ start: "09:00", end: "17:00" }],
+  slots: [{ ...DEFAULT_TIME_SLOT }],
 };
 
 type Tab = "links" | "availability" | "bookings";
@@ -290,11 +300,12 @@ function formatAvailabilitySummary(
     dayLabel = enabledDays.map((d) => shortNames[d]).join(", ");
   }
 
-  // Find common time range
-  const slot = ws[enabledDays[0]].slots[0];
-  if (!slot) return dayLabel;
+  const slots = ws[enabledDays[0]].slots;
+  if (slots.length === 0) return dayLabel;
 
-  return `${dayLabel}, ${formatTime12(slot.start)} - ${formatTime12(slot.end)}`;
+  return `${dayLabel}, ${slots
+    .map((slot) => `${formatTime12(slot.start)} - ${formatTime12(slot.end)}`)
+    .join(", ")}`;
 }
 
 function BookingLinksListSkeleton() {
@@ -697,17 +708,36 @@ export default function BookingLinksPage({
   function updateDay(day: DayName, updates: Partial<DaySchedule>) {
     setSchedule((prev) => ({
       ...prev,
-      [day]: { ...prev[day], ...updates },
+      [day]:
+        typeof updates.enabled === "boolean"
+          ? setDayEnabled(prev[day], updates.enabled)
+          : { ...prev[day], ...updates },
     }));
   }
 
-  function updateDaySlot(day: DayName, field: "start" | "end", value: string) {
+  function updateDaySlot(
+    day: DayName,
+    slotIndex: number,
+    field: "start" | "end",
+    value: string,
+  ) {
     setSchedule((prev) => ({
       ...prev,
-      [day]: {
-        ...prev[day],
-        slots: [{ ...prev[day].slots[0], [field]: value }],
-      },
+      [day]: updateTimeSlot(prev[day], slotIndex, field, value),
+    }));
+  }
+
+  function addDaySlot(day: DayName) {
+    setSchedule((prev) => ({
+      ...prev,
+      [day]: addTimeSlot(prev[day]),
+    }));
+  }
+
+  function removeDaySlot(day: DayName, slotIndex: number) {
+    setSchedule((prev) => ({
+      ...prev,
+      [day]: removeTimeSlot(prev[day], slotIndex),
     }));
   }
 
@@ -1756,7 +1786,7 @@ export default function BookingLinksPage({
                 </div>
                 {DAYS.map(({ key }) => {
                   const day = schedule[key];
-                  const slot = day.slots[0] ?? { start: "09:00", end: "17:00" };
+                  const slots = getEditableTimeSlots(day);
                   const label = t(`bookingLinks.days.${key}`);
                   const short = t(`bookingLinks.days.${key}Short`);
                   return (
@@ -1778,26 +1808,65 @@ export default function BookingLinksPage({
                       </div>
 
                       {day.enabled ? (
-                        <div className="flex items-center gap-2">
-                          <Input
-                            type="time"
-                            value={slot.start}
-                            onChange={(e) =>
-                              updateDaySlot(key, "start", e.target.value)
-                            }
-                            className="w-28 sm:w-32"
-                          />
-                          <span className="text-muted-foreground">
-                            {t("bookingLinks.to")}
-                          </span>
-                          <Input
-                            type="time"
-                            value={slot.end}
-                            onChange={(e) =>
-                              updateDaySlot(key, "end", e.target.value)
-                            }
-                            className="w-28 sm:w-32"
-                          />
+                        <div className="min-w-0 flex-1 space-y-2">
+                          {slots.map((slot, slotIndex) => (
+                            <div
+                              key={`${key}-${slotIndex}`}
+                              className="flex flex-wrap items-center gap-2"
+                            >
+                              <Input
+                                type="time"
+                                value={slot.start}
+                                onChange={(e) =>
+                                  updateDaySlot(
+                                    key,
+                                    slotIndex,
+                                    "start",
+                                    e.target.value,
+                                  )
+                                }
+                                className="w-28 sm:w-32"
+                              />
+                              <span className="text-muted-foreground">
+                                {t("bookingLinks.to")}
+                              </span>
+                              <Input
+                                type="time"
+                                value={slot.end}
+                                onChange={(e) =>
+                                  updateDaySlot(
+                                    key,
+                                    slotIndex,
+                                    "end",
+                                    e.target.value,
+                                  )
+                                }
+                                className="w-28 sm:w-32"
+                              />
+                              {slots.length > 1 && (
+                                <Button
+                                  type="button"
+                                  variant="ghost"
+                                  size="sm"
+                                  className="h-8 px-2 text-muted-foreground hover:text-destructive"
+                                  onClick={() => removeDaySlot(key, slotIndex)}
+                                >
+                                  <IconTrash className="mr-1.5 h-3.5 w-3.5" />
+                                  {t("eventForm.delete")}
+                                </Button>
+                              )}
+                            </div>
+                          ))}
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 px-2"
+                            onClick={() => addDaySlot(key)}
+                          >
+                            <IconPlus className="mr-1.5 h-3.5 w-3.5" />
+                            {t("bookingLinks.add")}
+                          </Button>
                         </div>
                       ) : (
                         <span className="text-sm text-muted-foreground">
@@ -1971,6 +2040,8 @@ function BookingPreview({
   onCollapse?: () => void;
 }) {
   const t = useT();
+  const { data: settings } = useSettings();
+  const weekStartsOn = getWeekStartsOn(settings?.weekStart);
   const displayTitle = title.trim() || t("bookingLinks.untitledMeeting");
   const hasDurationChoice = durations.length > 1;
   const primaryDuration = durations[0] ?? 30;
@@ -2005,8 +2076,8 @@ function BookingPreview({
   // Calendar data for viewed month
   const monthStart = startOfMonth(viewMonth);
   const monthEnd = endOfMonth(viewMonth);
-  const calStart = startOfWeek(monthStart);
-  const calEnd = endOfWeek(monthEnd);
+  const calStart = startOfWeek(monthStart, { weekStartsOn });
+  const calEnd = endOfWeek(monthEnd, { weekStartsOn });
   const calDays = eachDayOfInterval({ start: calStart, end: calEnd });
 
   function isDayDisabled(day: Date) {
@@ -2027,28 +2098,28 @@ function BookingPreview({
     const dayName = DAY_MAP[getDay(selectedDate)];
     const daySchedule = availability.weeklySchedule[dayName];
     if (!daySchedule?.enabled) return [];
-    const slot = daySchedule.slots[0];
-    if (!slot) return [];
 
     const dur = selectedDuration ?? primaryDuration;
-    const [startH, startM] = slot.start.split(":").map(Number);
-    const [endH, endM] = slot.end.split(":").map(Number);
-    const startMin = startH * 60 + startM;
-    const endMin = endH * 60 + endM;
     const slots: string[] = [];
-    const firstStart =
-      Math.ceil(startMin / BOOKING_SLOT_STEP_MINUTES) *
-      BOOKING_SLOT_STEP_MINUTES;
-    for (
-      let m = firstStart;
-      m + dur <= endMin;
-      m += BOOKING_SLOT_STEP_MINUTES
-    ) {
-      const h = Math.floor(m / 60);
-      const mm = m % 60;
-      const ampm = h >= 12 ? "PM" : "AM";
-      const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
-      slots.push(`${h12}:${mm.toString().padStart(2, "0")} ${ampm}`);
+    for (const slot of daySchedule.slots) {
+      const [startH, startM] = slot.start.split(":").map(Number);
+      const [endH, endM] = slot.end.split(":").map(Number);
+      const startMin = startH * 60 + startM;
+      const endMin = endH * 60 + endM;
+      const firstStart =
+        Math.ceil(startMin / BOOKING_SLOT_STEP_MINUTES) *
+        BOOKING_SLOT_STEP_MINUTES;
+      for (
+        let m = firstStart;
+        m + dur <= endMin;
+        m += BOOKING_SLOT_STEP_MINUTES
+      ) {
+        const h = Math.floor(m / 60);
+        const mm = m % 60;
+        const ampm = h >= 12 ? "PM" : "AM";
+        const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
+        slots.push(`${h12}:${mm.toString().padStart(2, "0")} ${ampm}`);
+      }
     }
     return slots;
   }, [selectedDate, selectedDuration, primaryDuration, availability]);
@@ -2307,14 +2378,17 @@ function BookingPreview({
 
               {/* Weekday headers */}
               <div className="grid grid-cols-7 mb-0.5">
-                {WEEKDAY_HEADER_KEYS.map((dayKey) => (
-                  <div
-                    key={dayKey}
-                    className="py-0.5 text-center text-[10px] font-medium text-muted-foreground/60"
-                  >
-                    {t(`bookingLinks.days.${dayKey}`)}
-                  </div>
-                ))}
+                {getWeekdayOrder(weekStartsOn).map((day) => {
+                  const dayKey = WEEKDAY_HEADER_KEYS[day];
+                  return (
+                    <div
+                      key={dayKey}
+                      className="py-0.5 text-center text-[10px] font-medium text-muted-foreground/60"
+                    >
+                      {t(`bookingLinks.days.${dayKey}`)}
+                    </div>
+                  );
+                })}
               </div>
 
               {/* Days grid */}

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

@@ -5,6 +5,7 @@ import {
   StarfieldBackground,
 } from "@agent-native/core/client/ui";
 import type { Booking } from "@shared/api";
+import { getWeekStartsOn } from "@shared/calendar-week";
 import { IconAlertTriangle, IconCalendar } from "@tabler/icons-react";
 import {
   addMinutes,
@@ -432,6 +433,7 @@ export default function BookingPage() {
                     availabilityLoading={availableDatesLoading}
                     viewMonth={viewMonth}
                     onViewMonthChange={setViewMonth}
+                    weekStartsOn={getWeekStartsOn(settings?.weekStart)}
                   />
                 </div>
               )}

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

@@ -6,6 +6,7 @@ import type {
   CalendarEventDraft,
   UpdateEventScope,
 } from "@shared/api";
+import { getWeekStartsOn } from "@shared/calendar-week";
 import {
   IconCheck,
   IconChevronLeft,
@@ -89,8 +90,8 @@ import {
   buildEventTitleUpdate,
   dateTimeInTimezoneToIso,
   getEditableEventTitle,
-  getLocalTimezone,
   UNNAMED_EVENT_TITLE,
+  resolveEventTimezone,
 } from "@/lib/event-form-utils";
 import { buildDeleteEventMutationInput } from "@/lib/event-mutation-inputs";
 import { getLocationSuggestions } from "@/lib/location-suggestions";
@@ -373,6 +374,7 @@ export default function CalendarView() {
   const defaultAccountEmail = googleStatus.data?.accounts?.[0]?.email;
   const settingsQuery = useSettings();
   const { data: settings } = settingsQuery;
+  const weekStartsOn = getWeekStartsOn(settings?.weekStart);
   const { data: rawOverlayPeople } = useOverlayPeople();
   const overlayPeople = Array.isArray(rawOverlayPeople) ? rawOverlayPeople : [];
   const overlayEmails = useMemo(
@@ -398,14 +400,14 @@ export default function CalendarView() {
         const ms = startOfMonth(selectedDate);
         const me = endOfMonth(selectedDate);
         return {
-          from: startOfWeek(ms).toISOString(),
-          to: endOfWeek(me).toISOString(),
+          from: startOfWeek(ms, { weekStartsOn }).toISOString(),
+          to: endOfWeek(me, { weekStartsOn }).toISOString(),
         };
       }
       case "week": {
         return {
-          from: startOfWeek(selectedDate).toISOString(),
-          to: endOfWeek(selectedDate).toISOString(),
+          from: startOfWeek(selectedDate, { weekStartsOn }).toISOString(),
+          to: endOfWeek(selectedDate, { weekStartsOn }).toISOString(),
         };
       }
       case "day": {
@@ -416,7 +418,7 @@ export default function CalendarView() {
         return { from: dayStart.toISOString(), to: dayEnd.toISOString() };
       }
     }
-  }, [viewMode, selectedDate]);
+  }, [viewMode, selectedDate, weekStartsOn]);
 
   const {
     data: rawEventsData,
@@ -470,8 +472,8 @@ export default function CalendarView() {
           const next = addMonths(selectedDate, 1);
           const prev = subMonths(selectedDate, 1);
           return [next, prev].map((d) => ({
-            from: startOfWeek(startOfMonth(d)).toISOString(),
-            to: endOfWeek(endOfMonth(d)).toISOString(),
+            from: startOfWeek(startOfMonth(d), { weekStartsOn }).toISOString(),
+            to: endOfWeek(endOfMonth(d), { weekStartsOn }).toISOString(),
           }));
         }
         case "week": {
@@ -480,8 +482,8 @@ export default function CalendarView() {
           const next2 = addWeeks(selectedDate, 2);
           const prev = subWeeks(selectedDate, 1);
           return [next, next2, prev].map((d) => ({
-            from: startOfWeek(d).toISOString(),
-            to: endOfWeek(d).toISOString(),
+            from: startOfWeek(d, { weekStartsOn }).toISOString(),
+            to: endOfWeek(d, { weekStartsOn }).toISOString(),
           }));
         }
         case "day": {
@@ -500,7 +502,14 @@ export default function CalendarView() {
     for (const range of ranges) {
       void prefetchEvents(queryClient, range.from, range.to, overlayEmails);
     }
-  }, [isLoading, viewMode, selectedDate, overlayEmails, queryClient]);
+  }, [
+    isLoading,
+    viewMode,
+    selectedDate,
+    overlayEmails,
+    queryClient,
+    weekStartsOn,
+  ]);
 
   // Show the skeleton only when there is genuinely nothing to show for the
   // current date range — the first load, or navigating to a range we have not
@@ -675,7 +684,9 @@ export default function CalendarView() {
       }
 
       const location = draft.location ?? draft.workingLocationLabel ?? "";
-      const timezone = draft.startTimeZone ?? getLocalTimezone();
+      const timezone = resolveEventTimezone(
+        draft.startTimeZone ?? draft.endTimeZone,
+      );
       const semanticFullDay =
         eventType === "outOfOffice" &&
         draft.fullDay === true &&
@@ -1143,7 +1154,9 @@ export default function CalendarView() {
       if (newEnd.getTime() <= newStart.getTime()) return;
 
       if (calendarDraftIdFromEventId(eventId)) {
-        const timezone = settings?.timezone || getLocalTimezone();
+        const timezone = resolveEventTimezone(
+          event.startTimeZone ?? event.endTimeZone,
+        );
         updateDraftEvent(eventId, {
           start: newStart.toISOString(),
           end: newEnd.toISOString(),
@@ -1592,8 +1605,8 @@ export default function CalendarView() {
           ? format(selectedDate, "MMM yyyy")
           : format(selectedDate, "MMMM yyyy");
       case "week": {
-        const ws = startOfWeek(selectedDate);
-        const we = endOfWeek(selectedDate);
+        const ws = startOfWeek(selectedDate, { weekStartsOn });
+        const we = endOfWeek(selectedDate, { weekStartsOn });
         return isMobile
           ? `${format(ws, "MMM d")} – ${format(we, "d")}`
           : `${format(ws, "MMM d")} – ${format(we, "d, yyyy")}`;
@@ -1801,6 +1814,7 @@ export default function CalendarView() {
                 onDraftCreate={createDraftEvent}
                 onDraftDiscard={discardDraftEvent}
                 isLoading={eventsLoading}
+                weekStartsOn={weekStartsOn}
               />
             )}
             {viewMode === "week" && (
@@ -1819,6 +1833,7 @@ export default function CalendarView() {
                 onDraftCreate={createDraftEvent}
                 onDraftDiscard={discardDraftEvent}
                 isLoading={eventsLoading}
+                weekStartsOn={weekStartsOn}
               />
             )}
             {viewMode === "day" && (