@agent-native/core 0.134.1 → 0.135.1

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

@@ -0,0 +1,208 @@
+import { IconAlertTriangle, IconLoader2 } from "@tabler/icons-react";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../components/ui/dialog.js";
+import { useT } from "../i18n.js";
+import { useAutomationRuns, type JobsScope } from "./use-jobs.js";
+
+export interface AutomationDetailsField {
+  label: string;
+  value: string;
+  mono?: boolean;
+}
+
+export interface AutomationDetailsDialogProps {
+  open: boolean;
+  name: string;
+  triggerSummary: string;
+  fields: AutomationDetailsField[];
+  condition: string | null;
+  instructions: string;
+  mcpTools: string[];
+  lastError: string | null;
+  scope: JobsScope;
+  formatTimestamp: (value: number) => string;
+  onClose: () => void;
+}
+
+function RunStatusDot({ status }: { status: string }) {
+  const tone =
+    status === "success"
+      ? "bg-emerald-500"
+      : status === "error"
+        ? "bg-destructive"
+        : // An interrupted run never reported an outcome, so it reads as
+          // unknown rather than as still making progress.
+          status === "interrupted"
+          ? "bg-muted-foreground"
+          : "bg-amber-500";
+  return <span className={`size-1.5 shrink-0 rounded-full ${tone}`} />;
+}
+
+export function AutomationDetailsDialog({
+  open,
+  name,
+  triggerSummary,
+  fields,
+  condition,
+  instructions,
+  mcpTools,
+  lastError,
+  scope,
+  formatTimestamp,
+  onClose,
+}: AutomationDetailsDialogProps) {
+  const t = useT();
+  const runsQuery = useAutomationRuns(scope, open ? name : null, open);
+  const runs = runsQuery.data ?? [];
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) onClose();
+      }}
+    >
+      <DialogContent className="max-h-[85vh] max-w-2xl overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{name.replace(/-/g, " ")}</DialogTitle>
+          <DialogDescription>{triggerSummary}</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {lastError ? (
+            <div className="flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/5 p-2.5">
+              <IconAlertTriangle className="mt-0.5 size-4 shrink-0 text-destructive" />
+              <div className="min-w-0">
+                <p className="text-xs font-medium text-destructive">
+                  {t("jobs.blockedTitle", {
+                    defaultValue: "This automation is not running",
+                  })}
+                </p>
+                <p className="mt-0.5 break-words text-xs text-muted-foreground">
+                  {lastError}
+                </p>
+              </div>
+            </div>
+          ) : null}
+
+          <dl className="grid grid-cols-2 gap-x-4 gap-y-2">
+            {fields.map((field) => (
+              <div key={field.label} className="min-w-0">
+                <dt className="text-[11px] uppercase tracking-wide text-muted-foreground/70">
+                  {field.label}
+                </dt>
+                <dd
+                  className={`mt-0.5 break-words text-sm ${
+                    field.mono ? "font-mono text-xs" : ""
+                  }`}
+                >
+                  {field.value}
+                </dd>
+              </div>
+            ))}
+          </dl>
+
+          {condition ? (
+            <div>
+              <p className="text-xs font-medium text-foreground">
+                {t("jobs.condition", { defaultValue: "Condition" })}
+              </p>
+              <p className="mt-1 text-sm text-muted-foreground">{condition}</p>
+            </div>
+          ) : null}
+
+          <div>
+            <p className="text-xs font-medium text-foreground">
+              {t("jobs.instructions", { defaultValue: "Instructions" })}
+            </p>
+            <p className="mt-1 max-h-56 overflow-y-auto whitespace-pre-wrap rounded-md bg-muted/50 p-2.5 text-sm text-muted-foreground">
+              {instructions}
+            </p>
+          </div>
+
+          {mcpTools.length > 0 ? (
+            <div>
+              <p className="text-xs font-medium text-foreground">
+                {t("jobs.mcpTools", { defaultValue: "Connected MCP tools" })}
+              </p>
+              <div className="mt-1 flex flex-wrap gap-1.5">
+                {mcpTools.map((toolName) => (
+                  <code
+                    key={toolName}
+                    className="rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground"
+                  >
+                    {toolName}
+                  </code>
+                ))}
+              </div>
+            </div>
+          ) : null}
+
+          <div>
+            <p className="text-xs font-medium text-foreground">
+              {t("jobs.pastRuns", { defaultValue: "Past runs" })}
+            </p>
+            {runsQuery.isLoading ? (
+              <div
+                className="mt-2 flex items-center gap-2 text-xs text-muted-foreground"
+                aria-busy="true"
+              >
+                <IconLoader2 className="size-3.5 animate-spin" />
+                {t("jobs.loading", { defaultValue: "Loading…" })}
+              </div>
+            ) : runsQuery.error ? (
+              <p className="mt-1 text-xs text-destructive">
+                {t("jobs.runsLoadError", {
+                  defaultValue: "Could not load run history.",
+                })}
+              </p>
+            ) : runs.length === 0 ? (
+              <p className="mt-1 text-xs text-muted-foreground">
+                {t("jobs.noRuns", {
+                  defaultValue:
+                    "This automation has not executed yet. Only real executions are recorded here.",
+                })}
+              </p>
+            ) : (
+              <ul className="mt-2 divide-y divide-border/60 border-y border-border/60">
+                {runs.map((run) => (
+                  <li
+                    key={run.id}
+                    className="flex items-center gap-2 py-1.5 text-xs"
+                  >
+                    <RunStatusDot status={run.status} />
+                    <span className="shrink-0 text-muted-foreground">
+                      {formatTimestamp(run.startedAt)}
+                    </span>
+                    <span className="shrink-0 font-medium">{run.status}</span>
+                    {run.error ? (
+                      <span
+                        className="min-w-0 flex-1 truncate text-muted-foreground"
+                        title={run.error}
+                      >
+                        {run.error}
+                      </span>
+                    ) : (
+                      <span className="min-w-0 flex-1" />
+                    )}
+                    {run.finishedAt ? (
+                      <span className="shrink-0 tabular-nums text-muted-foreground">
+                        {Math.round((run.finishedAt - run.startedAt) / 1000)}s
+                      </span>
+                    ) : null}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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>
+  );
+}