@agent-native/core 0.0.0-beta-20260819165421 → 0.0.0-beta-20260819172516

package/corpus/README.md

@@ -31,4 +31,4 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 
 ## Generated Counts
 
-- template files: 8446
+- template files: 8457

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

@@ -27,6 +27,7 @@ import {
   ReminderControls,
 } from "@/components/calendar/EventOptionControls";
 import { FindTimeTakeover } from "@/components/calendar/FindTimePanel";
+import { RepeatPicker } from "@/components/calendar/InlineEventPickers";
 import { TimezoneCombobox } from "@/components/TimezoneCombobox";
 import { Button } from "@/components/ui/button";
 import {
@@ -71,6 +72,7 @@ import { getGoogleEventColorHex } from "@/lib/event-colors";
 import { buildEventFormInitializationKey } from "@/lib/event-form-initialization";
 import {
   attachmentsToDrafts,
+  buildCustomRecurrenceRules,
   buildRecurrenceRules,
   buildReminderPayload,
   createAttachmentDraft,
@@ -78,9 +80,11 @@ import {
   dateTimeInTimezoneToIso,
   getEventEndValidationMessage,
   getRecurrencePreset,
+  parseCustomRecurrence,
   remindersToDraftState,
   resolveEventTimezone,
   type AttachmentDraft,
+  type CustomRecurrenceDraft,
   type RecurrencePreset,
   type ReminderDraft,
   type ReminderMode,
@@ -270,6 +274,10 @@ export function CreateEventPopover({
   const [visibility, setVisibility] = useState<Visibility>("default");
   const [recurrencePreset, setRecurrencePreset] =
     useState<RecurrencePreset>("none");
+  const [customRecurrence, setCustomRecurrence] =
+    useState<CustomRecurrenceDraft>(() =>
+      parseCustomRecurrence(undefined, defaultDateStr),
+    );
   const [timezone, setTimezone] = useState(defaultTimezone);
   const [colorId, setColorId] = useState<string | undefined>();
   const [reminderMode, setReminderMode] = useState<ReminderMode>("default");
@@ -377,6 +385,9 @@ export function CreateEventPopover({
       setAvailability(draft.transparency ?? "opaque");
       setVisibility(draft.visibility ?? "default");
       setRecurrencePreset(getRecurrencePreset(draft.recurrence));
+      setCustomRecurrence(
+        parseCustomRecurrence(draft.recurrence, draft.start || nextDate),
+      );
       setTimezone(draftTimezone);
       setColorId(draft.colorId);
       setReminderMode(reminderState.mode);
@@ -416,6 +427,7 @@ export function CreateEventPopover({
     setAvailability("opaque");
     setVisibility("default");
     setRecurrencePreset("none");
+    setCustomRecurrence(parseCustomRecurrence(undefined, nextDate));
     setTimezone(defaultTimezone);
     setColorId(undefined);
     setReminderMode("default");
@@ -478,11 +490,14 @@ export function CreateEventPopover({
         : dateTimeInTimezoneToIso(endDate, endTime, eventTimezone);
     const attachmentResult = validateAttachmentDrafts(attachments);
     const reminderPatch = buildReminderPayload(reminderMode, reminders);
-    const recurrence = buildRecurrenceRules(
-      recurrencePreset,
-      effectiveAllDay ? date : startValue,
-      eventTimezone,
-    );
+    const recurrence =
+      recurrencePreset === "custom"
+        ? buildCustomRecurrenceRules(customRecurrence)
+        : buildRecurrenceRules(
+            recurrencePreset,
+            effectiveAllDay ? date : startValue,
+            eventTimezone,
+          );
     const nextDraft: CalendarEventDraft = {
       id: draftId,
       createdAt: draft?.createdAt,
@@ -569,6 +584,7 @@ export function CreateEventPopover({
     availability,
     visibility,
     recurrencePreset,
+    customRecurrence,
     eventTimezone,
     colorId,
     reminderMode,
@@ -767,11 +783,14 @@ export function CreateEventPopover({
       ...trailingAttendees,
     ]);
     const reminderPatch = buildReminderPayload(reminderMode, reminders);
-    const recurrence = buildRecurrenceRules(
-      recurrencePreset,
-      effectiveAllDay ? date : startValue,
-      eventTimezone,
-    );
+    const recurrence =
+      recurrencePreset === "custom"
+        ? buildCustomRecurrenceRules(customRecurrence)
+        : buildRecurrenceRules(
+            recurrencePreset,
+            effectiveAllDay ? date : startValue,
+            eventTimezone,
+          );
     const statusPatch =
       eventType === "default"
         ? {}
@@ -1435,44 +1454,14 @@ export function CreateEventPopover({
                   <Label htmlFor="event-recurrence" className="text-xs">
                     {t("eventForm.repeats")}
                   </Label>
-                  <Select
-                    value={recurrencePreset}
-                    onValueChange={(value) =>
-                      setRecurrencePreset(value as RecurrencePreset)
+                  <RepeatPicker
+                    preset={recurrencePreset}
+                    referenceDate={
+                      effectiveAllDay ? date : currentStartISO || date
                     }
-                  >
-                    <SelectTrigger
-                      id="event-recurrence"
-                      className="h-8 text-sm"
-                    >
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="none">
-                        {t("eventForm.doesNotRepeat")}
-                      </SelectItem>
-                      <SelectItem value="daily">
-                        {t("eventForm.daily")}
-                      </SelectItem>
-                      <SelectItem value="weekdays">
-                        {t("eventForm.everyWeekday")}
-                      </SelectItem>
-                      <SelectItem value="weekly">
-                        {t("eventForm.weekly")}
-                      </SelectItem>
-                      <SelectItem value="monthly">
-                        {t("eventForm.monthly")}
-                      </SelectItem>
-                      <SelectItem value="yearly">
-                        {t("eventForm.yearly")}
-                      </SelectItem>
-                      {recurrencePreset === "custom" && (
-                        <SelectItem value="custom" disabled>
-                          {t("eventForm.customSchedule")}
-                        </SelectItem>
-                      )}
-                    </SelectContent>
-                  </Select>
+                    onChange={setRecurrencePreset}
+                    onCustomChange={setCustomRecurrence}
+                  />
                 </div>
 
                 {(!allDay || isOutOfOffice) && (

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

@@ -441,6 +441,7 @@ const DayEventCard = memo(function DayEventCard({
       onDelete={onDeleteEvent}
       isDraft={isDraft}
       defaultOpen={defaultOpen}
+      popoverSide="bottom"
       onTitleSave={onQuickEditSave}
       onDismissNew={onQuickEditCancel}
       onDraftUpdate={onDraftUpdate}
@@ -810,6 +811,7 @@ export const DayView = memo(function DayView({
                       onDelete={onDeleteEvent}
                       isDraft={draftEventIds.includes(event.id)}
                       defaultOpen={quickEditEventId === event.id}
+                      popoverSide="bottom"
                       onTitleSave={onQuickEditSave}
                       onDismissNew={onQuickEditCancel}
                       onDraftUpdate={onDraftUpdate}
@@ -887,6 +889,7 @@ export const DayView = memo(function DayView({
                       onDelete={onDeleteEvent}
                       isDraft={draftEventIds.includes(event.id)}
                       defaultOpen={quickEditEventId === event.id}
+                      popoverSide="bottom"
                       onTitleSave={onQuickEditSave}
                       onDismissNew={onQuickEditCancel}
                       onDraftUpdate={onDraftUpdate}

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

@@ -82,6 +82,7 @@ import {
 } from "@/lib/calendar-timezone";
 import {
   attachmentsToDrafts,
+  buildCustomRecurrenceRules,
   buildRecurrenceRules,
   buildReminderPayload,
   dateTimeInTimezoneToIso,
@@ -90,6 +91,7 @@ import {
   getEventEndValidationMessage,
   getLocalTimezone,
   getRecurrencePreset,
+  type CustomRecurrenceDraft,
   remindersToDraftState,
   resolveTimeEditScope,
   type AttachmentDraft,
@@ -468,6 +470,8 @@ interface EventDetailPopoverProps {
   onDismissNew?: (eventId: string, accountEmail?: string) => void;
   /** Called after the popover's visible open state changes through its normal lifecycle. */
   onOpenChange?: (open: boolean) => void;
+  /** Prefer a placement that keeps Day-view detail controls inside the grid. */
+  popoverSide?: "top" | "right" | "bottom" | "left";
   onDraftUpdate?: (
     eventId: string,
     updates: Partial<CalendarEvent> & {
@@ -500,6 +504,7 @@ export function EventDetailPopover({
   onDraftUpdate,
   onDraftCreate,
   onDraftDiscard,
+  popoverSide,
 }: EventDetailPopoverProps) {
   const t = useT();
   const workingLocationLabels = createWorkingLocationDisplayLabels(t);
@@ -1307,6 +1312,16 @@ export function EventDetailPopover({
     ],
   );
 
+  const handleSaveCustomRecurrence = useCallback(
+    (draft: CustomRecurrenceDraft) => {
+      saveField({
+        recurrence: buildCustomRecurrenceRules(draft),
+        scope: isRecurringEvent ? "all" : "single",
+      });
+    },
+    [isRecurringEvent, saveField],
+  );
+
   const handleAddAttendee = useCallback(
     (attendee: AttendeeRecipient) => {
       const email = attendee.email.trim().toLowerCase();
@@ -1521,7 +1536,7 @@ export function EventDetailPopover({
       </PopoverTrigger>
       <PopoverContent
         align={isMobile ? "center" : "start"}
-        side={isMobile ? "bottom" : "right"}
+        side={isMobile ? "bottom" : (popoverSide ?? "right")}
         sideOffset={isMobile ? 6 : 8}
         collisionPadding={12}
         className="flex max-h-[var(--radix-popover-content-available-height)] w-[min(420px,calc(100vw-2rem))] flex-col overflow-hidden p-0"
@@ -1790,7 +1805,9 @@ export function EventDetailPopover({
                 <RepeatPicker
                   preset={getRecurrencePreset(recurrenceRules)}
                   referenceDate={event.start}
+                  recurrence={recurrenceRules}
                   onChange={handleSaveRecurrence}
+                  onCustomChange={handleSaveCustomRecurrence}
                 />
               )}
 

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

@@ -16,9 +16,18 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import {
   formatTimezoneLabel,
+  parseCustomRecurrence,
   type RecurrencePreset,
+  type CustomRecurrenceDraft,
 } from "@/lib/event-form-utils";
 import { cn } from "@/lib/utils";
 
@@ -247,14 +256,22 @@ export function TimezonePickerPopover({
 export function RepeatPicker({
   preset,
   referenceDate,
+  recurrence,
   onChange,
+  onCustomChange,
 }: {
   preset: RecurrencePreset;
   referenceDate: string;
+  recurrence?: string[];
   onChange: (preset: RecurrencePreset) => void;
+  onCustomChange?: (draft: CustomRecurrenceDraft) => void;
 }) {
   const t = useT();
   const [open, setOpen] = useState(false);
+  const [customOpen, setCustomOpen] = useState(false);
+  const [customDraft, setCustomDraft] = useState(() =>
+    parseCustomRecurrence(recurrence, referenceDate),
+  );
   const reference = new Date(referenceDate);
   const weekday = Number.isNaN(reference.getTime())
     ? ""
@@ -297,11 +314,7 @@ export function RepeatPicker({
         ? t("eventForm.onDate", { date: format(reference, "MMM d") })
         : undefined,
     },
-    {
-      value: "custom",
-      label: t("eventForm.customSchedule"),
-      disabled: true,
-    },
+    { value: "custom", label: t("eventForm.customSchedule") },
   ];
 
   const selectedOption = options.find((option) => option.value === preset);
@@ -309,7 +322,17 @@ export function RepeatPicker({
     preset === "none" ? t("eventForm.repeat") : selectedOption?.label;
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover
+      open={open}
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen);
+        if (nextOpen && preset === "custom") {
+          setCustomDraft(parseCustomRecurrence(recurrence, referenceDate));
+          setCustomOpen(true);
+        }
+        if (!nextOpen) setCustomOpen(false);
+      }}
+    >
       <PopoverTrigger asChild>
         <Button
           type="button"
@@ -325,42 +348,237 @@ export function RepeatPicker({
       <PopoverContent
         align="start"
         sideOffset={6}
-        className="w-64 p-1"
+        className={cn(
+          "p-1",
+          customOpen ? "w-[min(22rem,calc(100vw-2rem))]" : "w-64",
+        )}
         data-time-picker-popover
       >
-        {options.map((option) => {
-          const selected = option.value === preset;
-          return (
-            <button
-              key={option.value}
-              type="button"
-              disabled={option.disabled}
-              className={cn(
-                "flex w-full items-center justify-between rounded-md px-2.5 py-2 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground",
-                selected && "bg-accent text-accent-foreground",
-                option.disabled &&
-                  "cursor-not-allowed opacity-50 hover:bg-transparent",
-              )}
-              onClick={() => {
-                if (option.disabled) return;
-                onChange(option.value);
-                setOpen(false);
-              }}
-            >
-              <span>{option.label}</span>
-              <span className="ml-3 flex items-center gap-2 text-muted-foreground">
-                {option.meta}
-                <span
-                  aria-hidden="true"
-                  className="flex size-3.5 shrink-0 items-center justify-center"
-                >
-                  {selected && <IconCheck className="size-3.5" />}
+        {customOpen ? (
+          <CustomRecurrenceEditor
+            draft={customDraft}
+            onChange={setCustomDraft}
+            onCancel={() => {
+              setCustomOpen(false);
+              setOpen(false);
+            }}
+            onSave={() => {
+              onCustomChange?.(customDraft);
+              onChange("custom");
+              setCustomOpen(false);
+              setOpen(false);
+            }}
+          />
+        ) : (
+          options.map((option) => {
+            const selected = option.value === preset;
+            return (
+              <button
+                key={option.value}
+                type="button"
+                className={cn(
+                  "flex w-full items-center justify-between rounded-md px-2.5 py-2 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground",
+                  selected && "bg-accent text-accent-foreground",
+                )}
+                onClick={() => {
+                  if (option.value === "custom") {
+                    setCustomDraft(
+                      parseCustomRecurrence(recurrence, referenceDate),
+                    );
+                    setCustomOpen(true);
+                    return;
+                  }
+                  onChange(option.value);
+                  setOpen(false);
+                }}
+              >
+                <span>{option.label}</span>
+                <span className="ml-3 flex items-center gap-2 text-muted-foreground">
+                  {option.meta}
+                  <span
+                    aria-hidden="true"
+                    className="flex size-3.5 shrink-0 items-center justify-center"
+                  >
+                    {selected && <IconCheck className="size-3.5" />}
+                  </span>
                 </span>
-              </span>
-            </button>
-          );
-        })}
+              </button>
+            );
+          })
+        )}
       </PopoverContent>
     </Popover>
   );
 }
+
+const CUSTOM_WEEKDAYS = [
+  ["SU", "S"],
+  ["MO", "M"],
+  ["TU", "T"],
+  ["WE", "W"],
+  ["TH", "T"],
+  ["FR", "F"],
+  ["SA", "S"],
+] as const;
+
+function CustomRecurrenceEditor({
+  draft,
+  onChange,
+  onCancel,
+  onSave,
+}: {
+  draft: CustomRecurrenceDraft;
+  onChange: (draft: CustomRecurrenceDraft) => void;
+  onCancel: () => void;
+  onSave: () => void;
+}) {
+  const t = useT();
+  const update = (changes: Partial<CustomRecurrenceDraft>) =>
+    onChange({ ...draft, ...changes });
+  const toggleDay = (day: string) => {
+    const days = draft.days.includes(day)
+      ? draft.days.filter((value) => value !== day)
+      : [...draft.days, day];
+    update({ days });
+  };
+
+  return (
+    <div className="max-h-[min(32rem,var(--radix-popover-content-available-height))] overflow-y-auto p-3">
+      <div className="mb-3 text-base font-semibold text-foreground">
+        {t("eventForm.customRecurrenceTitle")}
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-muted-foreground">
+          {t("eventForm.repeatEvery")}
+        </span>
+        <Input
+          type="number"
+          min={1}
+          max={999}
+          value={draft.interval}
+          onChange={(event) =>
+            update({ interval: Math.max(1, Number(event.target.value) || 1) })
+          }
+          className="h-9 w-16 text-center"
+          aria-label={t("eventForm.repeatEvery")}
+        />
+        <Select
+          value={draft.unit}
+          onValueChange={(unit) =>
+            update({
+              unit: unit as CustomRecurrenceDraft["unit"],
+              days: unit === "week" ? draft.days : [],
+            })
+          }
+        >
+          <SelectTrigger className="h-9 flex-1">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="day">{t("eventForm.day")}</SelectItem>
+            <SelectItem value="week">{t("eventForm.week")}</SelectItem>
+            <SelectItem value="month">{t("eventForm.month")}</SelectItem>
+            <SelectItem value="year">{t("eventForm.year")}</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {draft.unit === "week" && (
+        <div className="mt-4">
+          <div className="mb-2 text-sm text-muted-foreground">
+            {t("eventForm.repeatOn")}
+          </div>
+          <div className="flex justify-between gap-1">
+            {CUSTOM_WEEKDAYS.map(([value, label]) => {
+              const selected = draft.days.includes(value);
+              return (
+                <Button
+                  key={value}
+                  type="button"
+                  variant={selected ? "default" : "secondary"}
+                  size="icon"
+                  className="size-8 rounded-full text-xs"
+                  aria-pressed={selected}
+                  onClick={() => toggleDay(value)}
+                >
+                  {label}
+                </Button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      <fieldset className="mt-5 space-y-2">
+        <legend className="mb-2 text-sm text-muted-foreground">
+          {t("eventForm.ends")}
+        </legend>
+        <label className="flex items-center gap-2 text-sm text-foreground">
+          <input
+            type="radio"
+            name="custom-recurrence-end"
+            checked={draft.endMode === "never"}
+            onChange={() => update({ endMode: "never" })}
+          />
+          {t("eventForm.never")}
+        </label>
+        <label className="flex items-center gap-2 text-sm text-foreground">
+          <input
+            type="radio"
+            name="custom-recurrence-end"
+            checked={draft.endMode === "date"}
+            onChange={() => update({ endMode: "date" })}
+          />
+          <span>{t("eventForm.on")}</span>
+          <Input
+            type="date"
+            value={draft.endDate}
+            onChange={(event) =>
+              update({ endMode: "date", endDate: event.target.value })
+            }
+            className="h-8 min-w-0 flex-1"
+          />
+        </label>
+        <label className="flex items-center gap-2 text-sm text-foreground">
+          <input
+            type="radio"
+            name="custom-recurrence-end"
+            checked={draft.endMode === "count"}
+            onChange={() => update({ endMode: "count" })}
+          />
+          <span>{t("eventForm.after")}</span>
+          <Input
+            type="number"
+            min={1}
+            max={999}
+            value={draft.count}
+            onChange={(event) =>
+              update({
+                endMode: "count",
+                count: Math.max(1, Number(event.target.value) || 1),
+              })
+            }
+            className="h-8 w-20"
+          />
+          <span className="text-muted-foreground">
+            {t("eventForm.occurrences")}
+          </span>
+        </label>
+      </fieldset>
+
+      <div className="mt-5 flex justify-end gap-2 border-t border-border pt-3">
+        <Button type="button" variant="ghost" size="sm" onClick={onCancel}>
+          {t("eventForm.cancel")}
+        </Button>
+        <Button
+          type="button"
+          size="sm"
+          disabled={draft.unit === "week" && draft.days.length === 0}
+          onClick={onSave}
+        >
+          {t("eventForm.save")}
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -45,6 +45,25 @@ const DESKTOP_AUTH_POLL_ABORT_MS = Math.max(
   DESKTOP_AUTH_POLL_INTERVAL_MS * 4,
 );
 
+function newDesktopOAuthVerifier(): string | null {
+  const cryptoApi = globalThis.crypto;
+  const randomUuid = cryptoApi?.randomUUID;
+  if (typeof randomUuid === "function") {
+    return `${randomUuid.call(cryptoApi)}${randomUuid.call(cryptoApi)}`;
+  }
+  if (typeof cryptoApi?.getRandomValues === "function") {
+    const bytes = new Uint8Array(32);
+    cryptoApi.getRandomValues(bytes);
+    let binary = "";
+    for (const byte of bytes) binary += String.fromCharCode(byte);
+    return btoa(binary)
+      .replace(/\+/g, "-")
+      .replace(/\//g, "_")
+      .replace(/=+$/, "");
+  }
+  return null;
+}
+
 function bodyError(
   body: any,
   raw: string | undefined,
@@ -229,6 +248,15 @@ export function useGoogleDesktopAuth(options: DesktopAuthOptions = {}) {
       const flowId =
         globalThis.crypto?.randomUUID?.() ||
         Math.random().toString(36).slice(2) + Date.now().toString(36);
+      const verifier = newDesktopOAuthVerifier();
+      if (!verifier) {
+        setIsPending(false);
+        onError?.({
+          code: "desktop_auth_start_failed",
+          message: "Secure OAuth verifier generation is unavailable.",
+        });
+        return true;
+      }
       const redirectUri = oauthRedirectUri("/_agent-native/google/callback");
       const params = new URLSearchParams({
         redirect_uri: redirectUri,
@@ -285,7 +313,13 @@ export function useGoogleDesktopAuth(options: DesktopAuthOptions = {}) {
             : "/_agent-native/google/auth-url";
           const { url } = await fetchJson<{ url: string }>(
             agentNativePath(`${path}?${params.toString()}`),
-            { credentials: "include" },
+            {
+              method: "POST",
+              credentials: "include",
+              headers: {
+                "X-Agent-Native-Desktop-Verifier": verifier,
+              },
+            },
           );
           openAuthUrl(url);
         } catch (err) {
@@ -305,9 +339,15 @@ export function useGoogleDesktopAuth(options: DesktopAuthOptions = {}) {
           try {
             const exchangeRes = await fetch(
               agentNativePath(
-                `/_agent-native/auth/desktop-exchange?flow_id=${flowId}`,
+                `/_agent-native/auth/desktop-exchange?flow_id=${encodeURIComponent(flowId)}`,
               ),
-              { credentials: "include", signal: controller.signal },
+              {
+                credentials: "include",
+                headers: {
+                  "X-Agent-Native-Desktop-Verifier": verifier,
+                },
+                signal: controller.signal,
+              },
             );
             const exchange = await exchangeRes.json();
             if (exchange?.error) {