@agent-native/toolkit 0.23.1 → 0.198.1

package/src/app/agent-page/TimezoneSelect.tsx

@@ -0,0 +1,230 @@
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@agent-native/toolkit/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@agent-native/toolkit/ui/popover";
+import { cn } from "@agent-native/toolkit/utils";
+import { IconCheck, IconChevronDown } from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+
+const SYSTEM_VALUE = "system";
+
+export function browserTimezone(): string {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+  } catch {
+    return "UTC";
+  }
+}
+
+function supportedTimezones(): string[] {
+  const supported = (
+    Intl as unknown as { supportedValuesOf?: (key: string) => string[] }
+  ).supportedValuesOf;
+  const zones = supported ? supported("timeZone") : [];
+  const base = zones.length ? zones : [browserTimezone()];
+  return [...new Set(["UTC", ...base])];
+}
+
+interface ZoneOption {
+  zone: string;
+  offsetMinutes: number;
+  offsetLabel: string;
+  timeLabel: string;
+  placeLabel: string;
+}
+
+function describeZone(zone: string, now: Date): ZoneOption | null {
+  let parts: Intl.DateTimeFormatPart[];
+  try {
+    parts = new Intl.DateTimeFormat("en-US", {
+      timeZone: zone,
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: true,
+      timeZoneName: "longOffset",
+    }).formatToParts(now);
+  } catch {
+    // A zone this runtime cannot resolve would otherwise throw during render.
+    return null;
+  }
+
+  const part = (type: Intl.DateTimeFormatPartTypes) =>
+    parts.find((p) => p.type === type)?.value ?? "";
+
+  const raw = part("timeZoneName");
+  const offsetLabel = raw === "GMT" ? "GMT+00:00" : raw;
+  const match = /^GMT([+-])(\d{2}):(\d{2})$/.exec(offsetLabel);
+  const offsetMinutes = match
+    ? (match[1] === "-" ? -1 : 1) * (Number(match[2]) * 60 + Number(match[3]))
+    : 0;
+
+  return {
+    zone,
+    offsetMinutes,
+    offsetLabel,
+    timeLabel: `${part("hour")}:${part("minute")}${part("dayPeriod").toLowerCase()}`,
+    placeLabel: zone.replace(/_/g, " "),
+  };
+}
+
+function zoneOptions(extra: string[], now: Date): ZoneOption[] {
+  const zones = [...new Set([...extra, ...supportedTimezones()])];
+  return zones
+    .map((zone) => describeZone(zone, now))
+    .filter((option): option is ZoneOption => option !== null)
+    .sort(
+      (a, b) =>
+        a.offsetMinutes - b.offsetMinutes ||
+        a.placeLabel.localeCompare(b.placeLabel),
+    );
+}
+
+export interface TimezoneSelectProps {
+  value: string;
+  disabled?: boolean;
+  onChange: (timezone: string) => void;
+  suggested?: string[];
+  systemLabel?: string;
+  id?: string;
+  /** The trigger's height: `sm` for a settings row, 32px. */
+  size?: "sm" | "default";
+}
+
+export function TimezoneSelect({
+  value,
+  disabled,
+  onChange,
+  suggested = [],
+  systemLabel,
+  id,
+  size = "default",
+}: TimezoneSelectProps) {
+  const [open, setOpen] = useState(false);
+  const detected = browserTimezone();
+
+  const options = useMemo(() => {
+    if (!open) return [];
+    const pinned = [...suggested, value].filter(
+      (zone) => zone && zone !== SYSTEM_VALUE,
+    );
+    return zoneOptions(pinned, new Date());
+  }, [open, suggested, value]);
+
+  const selected = useMemo(
+    () => (value === SYSTEM_VALUE ? null : describeZone(value, new Date())),
+    [value],
+  );
+
+  const triggerLabel =
+    value === SYSTEM_VALUE
+      ? (systemLabel ?? SYSTEM_VALUE)
+      : selected
+        ? `(${selected.offsetLabel}) ${selected.placeLabel}`
+        : value;
+
+  function choose(zone: string) {
+    setOpen(false);
+    if (zone !== value) onChange(zone);
+  }
+
+  function renderZone(option: ZoneOption, key: string) {
+    return (
+      <CommandItem
+        key={key}
+        value={`${option.placeLabel} ${option.offsetLabel} ${option.zone} ${key}`}
+        onSelect={() => choose(option.zone)}
+        className="gap-2"
+      >
+        <IconCheck
+          className={`size-4 shrink-0 ${
+            option.zone === value ? "opacity-100" : "opacity-0"
+          }`}
+        />
+        <span className="w-24 shrink-0 tabular-nums text-muted-foreground">
+          ({option.offsetLabel})
+        </span>
+        <span className="truncate">{option.placeLabel}</span>
+        <span className="ms-auto shrink-0 tabular-nums text-muted-foreground">
+          {option.timeLabel}
+        </span>
+      </CommandItem>
+    );
+  }
+
+  const detectedOption = options.find((option) => option.zone === detected);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          id={id}
+          type="button"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            "flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            size === "sm" ? "h-8" : "h-10",
+          )}
+        >
+          <span className="truncate">{triggerLabel}</span>
+          <IconChevronDown className="size-4 shrink-0 opacity-50" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="w-[--radix-popover-trigger-width] p-0"
+      >
+        <Command
+          filter={(itemValue, search) =>
+            itemValue.toLowerCase().includes(search.toLowerCase().trim())
+              ? 1
+              : 0
+          }
+        >
+          <CommandInput placeholder="Search a city or region…" />
+          <CommandList className="max-h-72">
+            <CommandEmpty>No matching timezone.</CommandEmpty>
+            {systemLabel || detectedOption ? (
+              <>
+                <CommandGroup>
+                  {systemLabel ? (
+                    <CommandItem
+                      value={`${systemLabel} follow browser automatic`}
+                      onSelect={() => choose(SYSTEM_VALUE)}
+                      className="gap-2"
+                    >
+                      <IconCheck
+                        className={`size-4 shrink-0 ${
+                          value === SYSTEM_VALUE ? "opacity-100" : "opacity-0"
+                        }`}
+                      />
+                      <span className="truncate">{systemLabel}</span>
+                    </CommandItem>
+                  ) : null}
+                  {detectedOption
+                    ? renderZone(detectedOption, "detected")
+                    : null}
+                </CommandGroup>
+                <CommandSeparator />
+              </>
+            ) : null}
+            <CommandGroup>
+              {options.map((option) => renderZone(option, option.zone))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/app/agent-page/automation-schedule.spec.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  DEFAULT_AUTOMATION_SCHEDULE_DRAFT,
+  automationScheduleDraftFromCron,
+  automationScheduleToCron,
+} from "./automation-schedule.js";
+
+describe("automation schedule builder", () => {
+  it("turns friendly cadence choices into cron", () => {
+    expect(
+      automationScheduleToCron({
+        ...DEFAULT_AUTOMATION_SCHEDULE_DRAFT,
+        preset: "daily-noon",
+      }),
+    ).toEqual({ schedule: "0 12 * * *" });
+    expect(
+      automationScheduleToCron({
+        ...DEFAULT_AUTOMATION_SCHEDULE_DRAFT,
+        preset: "custom",
+        unit: "month",
+        interval: 2,
+        monthDay: 15,
+        time: "08:30",
+      }),
+    ).toEqual({ schedule: "30 8 15 */2 *" });
+  });
+
+  it("round-trips supported cron patterns and leaves advanced patterns alone", () => {
+    const parsed = automationScheduleDraftFromCron("15 8 * * 0");
+    expect(parsed.recognized).toBe(true);
+    expect(parsed.draft).toMatchObject({
+      preset: "weekly",
+      time: "08:15",
+      weekday: 0,
+    });
+    expect(automationScheduleDraftFromCron("0 9 1 * 1").recognized).toBe(false);
+  });
+
+  it("canonicalizes Sunday aliases without shifting the selected day", () => {
+    const parsed = automationScheduleDraftFromCron("0 9 * * 7");
+    expect(parsed.draft).toMatchObject({ preset: "weekly", weekday: 0 });
+    expect(automationScheduleToCron(parsed.draft)).toEqual({
+      schedule: "0 9 * * 0",
+    });
+  });
+
+  it("keeps unsupported multi-week cadence explicit for Advanced", () => {
+    expect(
+      automationScheduleToCron({
+        ...DEFAULT_AUTOMATION_SCHEDULE_DRAFT,
+        preset: "custom",
+        unit: "week",
+        interval: 2,
+      }),
+    ).toEqual({ error: "weekly-interval" });
+  });
+
+  it("keeps elapsed-day cadence in Advanced instead of using month-reset cron steps", () => {
+    expect(
+      automationScheduleToCron({
+        ...DEFAULT_AUTOMATION_SCHEDULE_DRAFT,
+        preset: "custom",
+        unit: "day",
+        interval: 2,
+        time: "08:30",
+      }),
+    ).toEqual({ error: "daily-interval" });
+    expect(automationScheduleDraftFromCron("30 8 */2 * *").recognized).toBe(
+      false,
+    );
+  });
+});

package/src/app/agent-page/automation-schedule.ts

@@ -0,0 +1,251 @@
+export type AutomationSchedulePreset =
+  | "hourly"
+  | "daily-midnight"
+  | "daily-noon"
+  | "weekdays"
+  | "weekly"
+  | "custom";
+
+export type AutomationScheduleUnit = "hour" | "day" | "week" | "month";
+
+export interface AutomationScheduleDraft {
+  preset: AutomationSchedulePreset;
+  time: string;
+  weekday: number;
+  interval: number;
+  unit: AutomationScheduleUnit;
+  monthDay: number;
+}
+
+export interface ParsedAutomationSchedule {
+  draft: AutomationScheduleDraft;
+  recognized: boolean;
+}
+
+export const AUTOMATION_WEEKDAYS = [
+  { value: 0, short: "Sun" },
+  { value: 1, short: "Mon" },
+  { value: 2, short: "Tue" },
+  { value: 3, short: "Wed" },
+  { value: 4, short: "Thu" },
+  { value: 5, short: "Fri" },
+  { value: 6, short: "Sat" },
+] as const;
+
+export const DEFAULT_AUTOMATION_SCHEDULE_DRAFT: AutomationScheduleDraft = {
+  preset: "hourly",
+  time: "09:00",
+  weekday: 0,
+  interval: 1,
+  unit: "day",
+  monthDay: 1,
+};
+
+function boundedInteger(value: number, minimum: number, maximum: number) {
+  return Math.min(maximum, Math.max(minimum, Math.round(value)));
+}
+
+function timeParts(value: string): { minute: number; hour: number } {
+  const match = /^(\d{2}):(\d{2})$/.exec(value);
+  if (!match) return { minute: 0, hour: 9 };
+  return {
+    hour: boundedInteger(Number(match[1]), 0, 23),
+    minute: boundedInteger(Number(match[2]), 0, 59),
+  };
+}
+
+function cronTime(value: string): string {
+  const { minute, hour } = timeParts(value);
+  return `${minute} ${hour}`;
+}
+
+function normalizeDraft(
+  draft: AutomationScheduleDraft,
+): AutomationScheduleDraft {
+  return {
+    ...draft,
+    time: /^\d{2}:\d{2}$/.test(draft.time) ? draft.time : "09:00",
+    weekday: boundedInteger(draft.weekday, 0, 6),
+    interval: boundedInteger(draft.interval, 1, 31),
+    monthDay: boundedInteger(draft.monthDay, 1, 31),
+  };
+}
+
+export function automationScheduleToCron(draft: AutomationScheduleDraft): {
+  schedule?: string;
+  error?: "daily-interval" | "weekly-interval";
+} {
+  const next = normalizeDraft(draft);
+  if (next.preset === "hourly") return { schedule: "0 * * * *" };
+
+  const time = cronTime(next.time);
+  if (next.preset === "daily-midnight") return { schedule: "0 0 * * *" };
+  if (next.preset === "daily-noon") return { schedule: "0 12 * * *" };
+  if (next.preset === "weekdays") return { schedule: `${time} * * 1-5` };
+  if (next.preset === "weekly") {
+    return { schedule: `${time} * * ${next.weekday}` };
+  }
+
+  if (next.unit === "hour") {
+    const hours = next.interval === 1 ? "*" : `*/${next.interval}`;
+    return {
+      schedule: `${timeParts(next.time).minute} ${hours} * * *`,
+    };
+  }
+  if (next.unit === "day") {
+    if (next.interval !== 1) return { error: "daily-interval" };
+    return { schedule: `${time} * * *` };
+  }
+  if (next.unit === "week") {
+    if (next.interval !== 1) return { error: "weekly-interval" };
+    return { schedule: `${time} * * ${next.weekday}` };
+  }
+  const months = next.interval === 1 ? "*" : `*/${next.interval}`;
+  return {
+    schedule: `${time} ${next.monthDay} ${months} *`,
+  };
+}
+
+function numeric(value: string): number | null {
+  return /^\d+$/.test(value) ? Number(value) : null;
+}
+
+function timeFromCron(minute: string, hour: string): string | null {
+  const parsedMinute = numeric(minute);
+  const parsedHour = numeric(hour);
+  if (
+    parsedMinute === null ||
+    parsedHour === null ||
+    parsedMinute > 59 ||
+    parsedHour > 23
+  ) {
+    return null;
+  }
+  return `${String(parsedHour).padStart(2, "0")}:${String(parsedMinute).padStart(2, "0")}`;
+}
+
+export function automationScheduleDraftFromCron(
+  value: string,
+): ParsedAutomationSchedule {
+  const fallback = { ...DEFAULT_AUTOMATION_SCHEDULE_DRAFT };
+  const parts = value.trim().split(/\s+/);
+  if (parts.length !== 5) return { draft: fallback, recognized: false };
+  if (value.trim() === "0 * * * *") {
+    return { draft: { ...fallback, preset: "hourly" }, recognized: true };
+  }
+
+  const [minute, hour, dayOfMonth, month, dayOfWeek] = parts;
+  const time = timeFromCron(minute, hour);
+  if (time && dayOfMonth === "*" && month === "*" && dayOfWeek === "*") {
+    const preset =
+      time === "00:00"
+        ? "daily-midnight"
+        : time === "12:00"
+          ? "daily-noon"
+          : "custom";
+    return {
+      draft: { ...fallback, preset, time, unit: "day" },
+      recognized: true,
+    };
+  }
+
+  if (time && dayOfMonth === "*" && month === "*" && dayOfWeek === "1-5") {
+    return {
+      draft: { ...fallback, preset: "weekdays", time },
+      recognized: true,
+    };
+  }
+
+  const weeklyDay = numeric(dayOfWeek);
+  if (
+    time &&
+    dayOfMonth === "*" &&
+    month === "*" &&
+    weeklyDay !== null &&
+    weeklyDay <= 7
+  ) {
+    return {
+      draft: {
+        ...fallback,
+        preset: "weekly",
+        time,
+        weekday: weeklyDay === 7 ? 0 : weeklyDay,
+      },
+      recognized: true,
+    };
+  }
+
+  const hourlyInterval = /^\*\/(\d+)$/.exec(hour);
+  const minuteValue = numeric(minute);
+  if (
+    minuteValue !== null &&
+    minuteValue <= 59 &&
+    dayOfMonth === "*" &&
+    month === "*" &&
+    dayOfWeek === "*" &&
+    hourlyInterval
+  ) {
+    return {
+      draft: {
+        ...fallback,
+        preset: "custom",
+        time: `00:${String(minuteValue).padStart(2, "0")}`,
+        unit: "hour",
+        interval: Number(hourlyInterval[1]),
+      },
+      recognized: true,
+    };
+  }
+
+  const dailyInterval = /^\*\/(\d+)$/.exec(dayOfMonth);
+  if (
+    time &&
+    month === "*" &&
+    dayOfWeek === "*" &&
+    dailyInterval &&
+    Number(dailyInterval[1]) === 1
+  ) {
+    return {
+      draft: {
+        ...fallback,
+        preset: "custom",
+        time,
+        unit: "day",
+        interval: Number(dailyInterval[1]),
+      },
+      recognized: true,
+    };
+  }
+
+  const day = numeric(dayOfMonth);
+  const monthInterval = /^\*\/(\d+)$/.exec(month);
+  if (
+    time &&
+    day !== null &&
+    day >= 1 &&
+    day <= 31 &&
+    monthInterval &&
+    dayOfWeek === "*"
+  ) {
+    return {
+      draft: {
+        ...fallback,
+        preset: "custom",
+        time,
+        unit: "month",
+        interval: Number(monthInterval[1]),
+        monthDay: day,
+      },
+      recognized: true,
+    };
+  }
+
+  return { draft: fallback, recognized: false };
+}
+
+export function formatAutomationTime(value: string): string {
+  const { hour, minute } = timeParts(value);
+  const period = hour >= 12 ? "PM" : "AM";
+  const displayHour = hour % 12 || 12;
+  return `${displayHour}:${String(minute).padStart(2, "0")} ${period}`;
+}

package/src/app/agent-page/index.ts

@@ -0,0 +1,3 @@
+export { AgentTabsPage } from "./AgentTabsPage.js";
+export type { AgentTabsPageProps } from "./AgentTabsPage.js";
+export type { AgentPageScope, AgentPageTabProps } from "./types.js";

package/src/app/agent-page/scheduled-trigger-state.ts

@@ -0,0 +1,19 @@
+import type { ScheduledTriggerStatus } from "@agent-native/core/jobs/actions/get-scheduled-trigger-status";
+
+export type { ScheduledTriggerStatus };
+
+export type ScheduledTriggerState =
+  | { kind: "loading" }
+  | { kind: "unknown"; error: Error | null }
+  | { kind: "resolved"; status: ScheduledTriggerStatus };
+
+export type ScheduleFiring = "fires" | "never" | "unknown";
+
+export function scheduleFiringFor(
+  state: ScheduledTriggerState,
+): ScheduleFiring {
+  if (state.kind === "resolved") {
+    return state.status.available ? "fires" : "never";
+  }
+  return state.kind === "unknown" ? "unknown" : "fires";
+}

package/src/app/agent-page/types.ts

@@ -0,0 +1,15 @@
+/**
+ * Shared contracts for the full-page Agent surface (`AgentTabsPage`).
+ *
+ * Ownership note for concurrent implementation work: the page shell and the
+ * Files/MCP/Connect tabs may ADD exports here; the Context and Jobs tab
+ * implementations consume these types but must not edit this file.
+ */
+
+/** Which configuration scope the page-level toggle is showing. */
+export type AgentPageScope = "user" | "org";
+
+export interface AgentPageTabProps {
+  scope: AgentPageScope;
+  canManageOrg?: boolean;
+}