@agent-native/core 0.134.1 → 0.135.0

package/src/client/agent-page/AutomationScheduleDialog.tsx

@@ -0,0 +1,180 @@
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Input } from "@agent-native/toolkit/ui/input";
+import { IconLoader2 } from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../components/ui/dialog.js";
+import { useT } from "../i18n.js";
+import { TimezoneSelect, browserTimezone } from "./TimezoneSelect.js";
+
+const PRESETS: { label: string; cron: string }[] = [
+  { label: "Every hour", cron: "0 * * * *" },
+  { label: "Every day at 8:00", cron: "0 8 * * *" },
+  { label: "Every weekday at 9:00", cron: "0 9 * * 1-5" },
+  { label: "Every Monday at 8:00", cron: "0 8 * * 1" },
+];
+
+const CRON_FIELD_COUNT = 5;
+
+function looksLikeCron(value: string): boolean {
+  return value.trim().split(/\s+/).length === CRON_FIELD_COUNT;
+}
+
+export interface AutomationScheduleDialogProps {
+  open: boolean;
+  name: string;
+  schedule: string;
+  timezone: string | null;
+  saving: boolean;
+  error?: string | null;
+  onCancel: () => void;
+  onSave: (next: { schedule: string; timezone: string }) => void;
+}
+
+export function AutomationScheduleDialog({
+  open,
+  name,
+  schedule,
+  timezone,
+  saving,
+  error,
+  onCancel,
+  onSave,
+}: AutomationScheduleDialogProps) {
+  const t = useT();
+  const [value, setValue] = useState(schedule);
+  const [zone, setZone] = useState(timezone || browserTimezone());
+
+  useEffect(() => {
+    if (!open) return;
+    setValue(schedule);
+    setZone(timezone || browserTimezone());
+  }, [open, schedule, timezone]);
+
+  const trimmed = value.trim();
+  const valid = looksLikeCron(trimmed);
+  const changed =
+    trimmed !== schedule.trim() || zone !== (timezone || browserTimezone());
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next && !saving) onCancel();
+      }}
+    >
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {t("jobs.editScheduleTitle", {
+              defaultValue: "Edit schedule — {{name}}",
+              name: name.replace(/-/g, " "),
+            })}
+          </DialogTitle>
+          <DialogDescription>
+            {t("jobs.editScheduleDescription", {
+              defaultValue:
+                "The clock time below is read in the timezone you pick, so 8:00 means 8:00 there.",
+            })}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3">
+          <div>
+            <label
+              className="text-xs font-medium text-foreground"
+              htmlFor="automation-schedule"
+            >
+              {t("jobs.cronExpression", { defaultValue: "Cron expression" })}
+            </label>
+            <Input
+              id="automation-schedule"
+              className="mt-1 font-mono text-sm"
+              value={value}
+              spellCheck={false}
+              autoComplete="off"
+              disabled={saving}
+              onChange={(event) => setValue(event.target.value)}
+            />
+            <p className="mt-1 text-[11px] text-muted-foreground">
+              {t("jobs.cronFormatHint", {
+                defaultValue: "minute hour day-of-month month day-of-week",
+              })}
+            </p>
+          </div>
+
+          <div className="flex flex-wrap gap-1.5">
+            {PRESETS.map((preset) => (
+              <Button
+                key={preset.cron}
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-7 cursor-pointer text-[11px]"
+                disabled={saving}
+                onClick={() => setValue(preset.cron)}
+              >
+                {preset.label}
+              </Button>
+            ))}
+          </div>
+
+          <div>
+            <label
+              className="text-xs font-medium text-foreground"
+              htmlFor="automation-timezone"
+            >
+              {t("jobs.timezone", { defaultValue: "Timezone" })}
+            </label>
+            <div className="mt-1">
+              <TimezoneSelect
+                id="automation-timezone"
+                value={zone}
+                disabled={saving}
+                onChange={setZone}
+                suggested={[browserTimezone()]}
+              />
+            </div>
+          </div>
+
+          {trimmed && !valid ? (
+            <p className="text-xs text-destructive">
+              {t("jobs.cronFieldCount", {
+                defaultValue: "A cron expression needs exactly 5 fields.",
+              })}
+            </p>
+          ) : null}
+          {error ? <p className="text-xs text-destructive">{error}</p> : null}
+        </div>
+
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="outline"
+            className="cursor-pointer"
+            disabled={saving}
+            onClick={onCancel}
+          >
+            {t("jobs.cancel", { defaultValue: "Cancel" })}
+          </Button>
+          <Button
+            type="button"
+            className="cursor-pointer"
+            disabled={saving || !valid || !changed}
+            onClick={() => onSave({ schedule: trimmed, timezone: zone })}
+          >
+            {saving ? <IconLoader2 className="size-4 animate-spin" /> : null}
+            {t("jobs.saveSchedule", { defaultValue: "Save schedule" })}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,241 @@
+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 { IconCheck, IconChevronDown } from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+
+const SYSTEM_VALUE = "system";
+
+/** The browser's IANA zone, or UTC when the runtime cannot report one. */
+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") : [];
+  // Older runtimes omit supportedValuesOf; the browser zone plus UTC still
+  // covers the common case rather than leaving an empty, unusable menu.
+  const base = zones.length ? zones : [browserTimezone()];
+  return [...new Set(["UTC", ...base])];
+}
+
+interface ZoneOption {
+  zone: string;
+  /** Minutes east of GMT, used to order the list the way a map reads. */
+  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 ?? "";
+
+  // `longOffset` collapses to a bare "GMT" at zero rather than "GMT+00:00".
+  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;
+  /** Zones to surface above the full list, e.g. the currently stored one. */
+  suggested?: string[];
+  /**
+   * Label for a leading `system` choice. Settings offer it so the preference
+   * stays revertible; a schedule must name a concrete zone and omits it.
+   */
+  systemLabel?: string;
+  id?: string;
+}
+
+export function TimezoneSelect({
+  value,
+  disabled,
+  onChange,
+  suggested = [],
+  systemLabel,
+  id,
+}: TimezoneSelectProps) {
+  const [open, setOpen] = useState(false);
+  const detected = browserTimezone();
+
+  // 418 zones each need their own formatter, so only pay for that once the
+  // list is actually on screen. Reopening re-reads the clock.
+  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}
+        // Searched text: place and offset both need to match what users type.
+        // The key is folded in because the detected zone is listed twice, and
+        // cmdk treats two items with the same value as the same item.
+        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}
+          // Matches the text inputs it sits beside, not a button.
+          className="flex h-10 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"
+        >
+          <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
+          // cmdk's default scorer matches loose subsequences, so "Perth" would
+          // otherwise surface most of the list.
+          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/client/agent-page/use-jobs.ts

@@ -10,10 +10,12 @@ export interface RecurringJob {
   path: string;
   scope: "personal" | "organization";
   schedule: string;
+  timezone: string;
   scheduleDescription: string;
   instructions: string;
   enabled: boolean;
   lastRun: string | null;
+  lastCheck: string | null;
   lastStatus: string | null;
   lastError: string | null;
   nextRun: string | null;
@@ -30,11 +32,13 @@ export interface Automation {
   triggerType: "event" | "schedule";
   event: string | null;
   schedule: string | null;
+  timezone: string | null;
   scheduleDescription: string | null;
   condition: string | null;
   body: string;
   enabled: boolean;
   lastRun: string | null;
+  lastCheck: string | null;
   lastStatus: string | null;
   lastError: string | null;
   nextRun: string | null;
@@ -54,14 +58,23 @@ export type ManageJobInput = {
   name: string;
   scope: "personal" | "organization";
   enabled?: boolean;
+  schedule?: string;
+  timezone?: string;
 };
 
-export type ManageAutomationInput = {
-  operation: "update" | "delete";
-  name: string;
-  scope: "personal" | "organization";
-  enabled?: boolean;
-};
+export type ManageAutomationInput = ManageJobInput;
+
+export interface AutomationRun {
+  id: string;
+  automation: string;
+  scope: string | null;
+  runId: string | null;
+  threadId: string | null;
+  status: "running" | "success" | "error" | "interrupted";
+  startedAt: number;
+  finishedAt: number | null;
+  error: string | null;
+}
 
 function recurringParams(scope: JobsScope) {
   return { scope: scope === "org" ? "organization" : "personal" } as const;
@@ -105,8 +118,8 @@ export function useManageRecurringJob(scope: JobsScope) {
           return current.filter((job) => job.name !== variables.name);
         }
         return current.map((job) =>
-          job.name === variables.name && variables.enabled !== undefined
-            ? { ...job, enabled: variables.enabled }
+          job.name === variables.name
+            ? { ...job, ...optimisticPatch(variables) }
             : job,
         );
       });
@@ -141,8 +154,8 @@ export function useManageAutomation(scope: JobsScope) {
           );
         }
         return current.map((automation) =>
-          automation.name === variables.name && variables.enabled !== undefined
-            ? { ...automation, enabled: variables.enabled }
+          automation.name === variables.name
+            ? { ...automation, ...optimisticPatch(variables) }
             : automation,
         );
       });
@@ -156,3 +169,30 @@ export function useManageAutomation(scope: JobsScope) {
     },
   });
 }
+
+function optimisticPatch(variables: ManageJobInput) {
+  const patch: {
+    enabled?: boolean;
+    schedule?: string;
+    timezone?: string;
+  } = {};
+  if (variables.enabled !== undefined) patch.enabled = variables.enabled;
+  if (variables.schedule !== undefined) patch.schedule = variables.schedule;
+  if (variables.timezone !== undefined) patch.timezone = variables.timezone;
+  return patch;
+}
+
+export function useAutomationRuns(
+  scope: JobsScope,
+  name: string | null,
+  active: boolean,
+) {
+  const params = {
+    scope: scope === "org" ? "organization" : "personal",
+    name: name || "",
+  } as const;
+  return useActionQuery<AutomationRun[]>("list-automation-runs", params, {
+    staleTime: 5_000,
+    enabled: active && Boolean(name),
+  });
+}

package/src/client/org/OrgSwitcher.tsx

@@ -83,6 +83,13 @@ export interface OrgSwitcherProps {
   settingsPath?: string | null;
   /** Path to navigate to when the user clicks "Profile". Defaults to the shared Account settings section. */
   profilePath?: string | null;
+  /**
+   * Path to the Manage agent page. Settings links here too, but the switcher
+   * is the only always-visible surface, so omitting it leaves Files,
+   * Instructions, Memory, Skills and Automations reachable only from Settings.
+   * Pass `null` for apps that do not mount the Agent page.
+   */
+  agentPath?: string | null;
 }
 
 function personalLabelFromEmail(email: string | null | undefined): string {
@@ -119,6 +126,7 @@ const COMPACT_SWITCHER_BUTTON_CLASS =
 
 const DEFAULT_ORGANIZATION_SETTINGS_PATH = "/settings#organization";
 const DEFAULT_PROFILE_PATH = "/settings#account";
+const DEFAULT_AGENT_PATH = "/agent";
 
 const APP_ICON_MAP: Record<string, typeof IconApps> = {
   Mail: IconMail,
@@ -311,6 +319,7 @@ export function OrgSwitcher({
   compact,
   settingsPath = DEFAULT_ORGANIZATION_SETTINGS_PATH,
   profilePath = DEFAULT_PROFILE_PATH,
+  agentPath = DEFAULT_AGENT_PATH,
 }: OrgSwitcherProps) {
   const { data: org, isLoading } = useOrg();
   const { session } = useSession();
@@ -607,6 +616,23 @@ export function OrgSwitcher({
                   </span>
                 </button>
               )}
+              {agentPath && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    setOpen(false);
+                    navigate(agentPath);
+                  }}
+                  className={`${ITEM_CLASS} cursor-pointer`}
+                >
+                  <IconBrain className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                  <span className="flex-1 text-start">
+                    {t("settings.manageAgentMenuItem", {
+                      defaultValue: "Manage agent",
+                    })}
+                  </span>
+                </button>
+              )}
               {inOrg && (
                 <button
                   type="button"

package/src/client/settings/AccountSettingsCard.tsx

@@ -13,6 +13,7 @@ import { useActionMutation, useActionQuery } from "../use-action.js";
 import { uploadAvatar, useAvatarUrl } from "../use-avatar.js";
 import { useSession } from "../use-session.js";
 import { cn } from "../utils.js";
+import { SchedulingTimezoneField } from "./SchedulingTimezoneField.js";
 
 function profileInitials(name: string): string {
   return (
@@ -157,38 +158,41 @@ export function AccountSettingsForm({
           description={t("settings.profileNameDescription")}
           disabled={!email || profileQuery.isLoading || updateProfile.isPending}
         />
-        <div className="flex items-center justify-between gap-3">
-          <div className="min-h-4 text-xs">
-            {updateProfile.isSuccess && (
-              <p className="text-green-600 dark:text-green-400">
-                {t("settings.profileSaved")}
-              </p>
-            )}
-            {updateProfile.error && (
-              <p className="text-destructive">
-                {t("settings.profileSaveError")}
-              </p>
-            )}
-          </div>
-          <ActionButton
-            type="button"
-            intent="primary"
-            emphasis="solid"
-            size="compact"
-            pending={updateProfile.isPending}
-            disabled={
-              !email ||
-              profileQuery.isLoading ||
-              updateProfile.isPending ||
-              !name.trim()
-            }
-            onPress={handleProfileSave}
-          >
-            {updateProfile.isPending
-              ? t("settings.profileSaving")
-              : t("settings.profileSave")}
-          </ActionButton>
+      </div>
+
+      <div className="border-t border-border/60 pt-3">
+        <SchedulingTimezoneField />
+      </div>
+
+      <div className="flex items-center justify-between gap-3 border-t border-border/60 pt-3">
+        <div className="min-h-4 text-xs">
+          {updateProfile.isSuccess && (
+            <p className="text-green-600 dark:text-green-400">
+              {t("settings.profileSaved")}
+            </p>
+          )}
+          {updateProfile.error && (
+            <p className="text-destructive">{t("settings.profileSaveError")}</p>
+          )}
         </div>
+        <ActionButton
+          type="button"
+          intent="primary"
+          emphasis="solid"
+          size="compact"
+          pending={updateProfile.isPending}
+          disabled={
+            !email ||
+            profileQuery.isLoading ||
+            updateProfile.isPending ||
+            !name.trim()
+          }
+          onPress={handleProfileSave}
+        >
+          {updateProfile.isPending
+            ? t("settings.profileSaving")
+            : t("settings.profileSave")}
+        </ActionButton>
       </div>
     </div>
   );