@agent-native/dispatch 0.32.0 → 0.33.0-nightly-20260831223557

package/src/components/automation-create-dialog.tsx

@@ -0,0 +1,759 @@
+import {
+  DEFAULT_AUTOMATION_SCHEDULE_DRAFT,
+  AUTOMATION_WEEKDAYS,
+  automationScheduleToCron,
+  formatAutomationTime,
+  type AutomationScheduleDraft,
+  type AutomationSchedulePreset,
+  type AutomationScheduleUnit,
+} from "@agent-native/core/client/agent-page/automation-schedule";
+import {
+  TimezoneSelect,
+  browserTimezone,
+} from "@agent-native/core/client/agent-page/timezone-select";
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  IconBolt,
+  IconCalendarEvent,
+  IconClock,
+  IconCode,
+  IconLoader2,
+} from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+
+import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
+import { Input } from "./ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
+import { Textarea } from "./ui/textarea";
+
+type TriggerType = "schedule" | "event" | "webhook";
+
+interface AutomationEvent {
+  name: string;
+  description?: string;
+}
+
+interface CreateAutomationInput {
+  operation: "create";
+  name: string;
+  scope: "personal" | "organization";
+  triggerType: TriggerType;
+  body: string;
+  schedule?: string;
+  timezone?: string;
+  event?: string;
+}
+
+interface CreateAutomationResult {
+  created: true;
+  name: string;
+  triggerType: TriggerType;
+  webhookPath: string | null;
+}
+
+const PRESETS: {
+  value: AutomationSchedulePreset;
+  labelKey: string;
+  detailKey: string;
+  label: string;
+  detail: string;
+  draft: Partial<AutomationScheduleDraft>;
+}[] = [
+  {
+    value: "hourly",
+    labelKey: "jobs.schedulePreset.hourly",
+    detailKey: "jobs.schedulePreset.hourlyDetail",
+    label: "Every hour",
+    detail: "At the top of the hour",
+    draft: { preset: "hourly" },
+  },
+  {
+    value: "daily-midnight",
+    labelKey: "jobs.schedulePreset.dailyMidnight",
+    detailKey: "jobs.schedulePreset.dailyMidnightDetail",
+    label: "Every day at midnight",
+    detail: "12:00 AM",
+    draft: { preset: "daily-midnight" },
+  },
+  {
+    value: "daily-noon",
+    labelKey: "jobs.schedulePreset.dailyNoon",
+    detailKey: "jobs.schedulePreset.dailyNoonDetail",
+    label: "Every day at noon",
+    detail: "12:00 PM",
+    draft: { preset: "daily-noon" },
+  },
+  {
+    value: "weekdays",
+    labelKey: "jobs.schedulePreset.weekdays",
+    detailKey: "jobs.schedulePreset.weekdaysDetail",
+    label: "Every weekday",
+    detail: "Monday to Friday at 9:00 AM",
+    draft: { preset: "weekdays", time: "09:00" },
+  },
+  {
+    value: "weekly",
+    labelKey: "jobs.schedulePreset.weekly",
+    detailKey: "jobs.schedulePreset.weeklyDetail",
+    label: "Every week",
+    detail: "Sunday at 9:00 AM",
+    draft: { preset: "weekly", weekday: 0, time: "09:00" },
+  },
+];
+
+function presetClass(selected: boolean): string {
+  return (
+    "rounded-lg border px-3 py-2 text-left transition-colors " +
+    (selected
+      ? "border-primary bg-primary/5 text-foreground"
+      : "border-border/70 bg-background hover:bg-muted/50")
+  );
+}
+
+function scheduleIsValid(value: string): boolean {
+  return value.trim().split(/\s+/).length === 5;
+}
+
+function ScheduleFields({
+  draft,
+  saving,
+  onChange,
+}: {
+  draft: AutomationScheduleDraft;
+  saving: boolean;
+  onChange: (patch: Partial<AutomationScheduleDraft>) => void;
+}) {
+  const t = useT();
+  const customMinute = Number(draft.time.split(":")[1] ?? 0);
+  return (
+    <div className="space-y-3 rounded-lg border border-border/70 bg-muted/20 p-3">
+      <div className="grid gap-3 sm:grid-cols-[1fr_1fr]">
+        <label className="space-y-1.5 text-xs text-muted-foreground">
+          <span>{t("jobs.repeatEvery", { defaultValue: "Repeat every" })}</span>
+          <Input
+            type="number"
+            min={1}
+            max={31}
+            value={draft.interval}
+            disabled={saving}
+            onChange={(event) =>
+              onChange({
+                interval: Math.min(
+                  draft.unit === "day" ? 1 : 31,
+                  Math.max(1, Number(event.target.value) || 1),
+                ),
+              })
+            }
+            className="h-9 bg-background text-sm"
+          />
+        </label>
+        <label className="space-y-1.5 text-xs text-muted-foreground">
+          <span>{t("jobs.scheduleUnit", { defaultValue: "Unit" })}</span>
+          <Select
+            value={draft.unit}
+            disabled={saving}
+            onValueChange={(value) =>
+              onChange({
+                unit: value as AutomationScheduleUnit,
+                ...(value === "day" ? { interval: 1 } : {}),
+              })
+            }
+          >
+            <SelectTrigger className="h-9 bg-background text-sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="hour">
+                {t("jobs.hours", { defaultValue: "hour(s)" })}
+              </SelectItem>
+              <SelectItem value="day">
+                {t("jobs.day", { defaultValue: "day" })}
+              </SelectItem>
+              <SelectItem value="week">
+                {t("jobs.weeks", { defaultValue: "week(s)" })}
+              </SelectItem>
+              <SelectItem value="month">
+                {t("jobs.months", { defaultValue: "month(s)" })}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </label>
+      </div>
+
+      {draft.unit === "hour" ? (
+        <label className="block space-y-1.5 text-xs text-muted-foreground">
+          <span>{t("jobs.atMinute", { defaultValue: "At minute" })}</span>
+          <Input
+            type="number"
+            min={0}
+            max={59}
+            value={customMinute}
+            disabled={saving}
+            onChange={(event) =>
+              onChange({
+                time:
+                  "00:" +
+                  String(
+                    Math.min(59, Math.max(0, Number(event.target.value) || 0)),
+                  ).padStart(2, "0"),
+              })
+            }
+            className="h-9 bg-background text-sm"
+          />
+        </label>
+      ) : null}
+
+      {draft.unit === "week" ? (
+        <label className="block space-y-1.5 text-xs text-muted-foreground">
+          <span>{t("jobs.onDay", { defaultValue: "On" })}</span>
+          <Select
+            value={String(draft.weekday)}
+            disabled={saving}
+            onValueChange={(value) => onChange({ weekday: Number(value) })}
+          >
+            <SelectTrigger className="h-9 bg-background text-sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {AUTOMATION_WEEKDAYS.map((day) => (
+                <SelectItem key={day.value} value={String(day.value)}>
+                  {day.short}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </label>
+      ) : null}
+
+      {draft.unit === "month" ? (
+        <label className="block space-y-1.5 text-xs text-muted-foreground">
+          <span>{t("jobs.dayOfMonth", { defaultValue: "Day of month" })}</span>
+          <Input
+            type="number"
+            min={1}
+            max={31}
+            value={draft.monthDay}
+            disabled={saving}
+            onChange={(event) =>
+              onChange({
+                monthDay: Math.min(
+                  31,
+                  Math.max(1, Number(event.target.value) || 1),
+                ),
+              })
+            }
+            className="h-9 bg-background text-sm"
+          />
+        </label>
+      ) : null}
+
+      {draft.unit !== "hour" ? (
+        <label className="block space-y-1.5 text-xs text-muted-foreground">
+          <span>{t("jobs.atTime", { defaultValue: "At" })}</span>
+          <Input
+            type="time"
+            value={draft.time}
+            disabled={saving}
+            onChange={(event) => onChange({ time: event.target.value })}
+            className="h-9 bg-background text-sm"
+          />
+        </label>
+      ) : null}
+    </div>
+  );
+}
+
+function ScheduleBuilder({
+  saving,
+  timezone,
+  onTimezoneChange,
+  onChange,
+}: {
+  saving: boolean;
+  timezone: string;
+  onTimezoneChange: (value: string) => void;
+  onChange: (value: string) => void;
+}) {
+  const t = useT();
+  const [draft, setDraft] = useState<AutomationScheduleDraft>(
+    DEFAULT_AUTOMATION_SCHEDULE_DRAFT,
+  );
+  const [advanced, setAdvanced] = useState(false);
+  const [advancedValue, setAdvancedValue] = useState("0 * * * *");
+  const friendly = automationScheduleToCron(draft);
+  const activeSchedule = advanced
+    ? advancedValue.trim()
+    : (friendly.schedule ?? "");
+  const valid =
+    scheduleIsValid(activeSchedule) && (!friendly.error || advanced);
+
+  useEffect(() => {
+    onChange(valid ? activeSchedule : "");
+  }, [activeSchedule, onChange, valid]);
+
+  function choosePreset(
+    value: AutomationSchedulePreset,
+    presetDraft: Partial<AutomationScheduleDraft>,
+  ) {
+    setDraft((current) => ({ ...current, ...presetDraft, preset: value }));
+    setAdvanced(false);
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="space-y-2">
+        <div className="text-xs font-medium text-foreground">
+          {t("jobs.repeat", { defaultValue: "Repeat" })}
+        </div>
+        <div className="grid gap-2 sm:grid-cols-2">
+          {PRESETS.map((preset) => (
+            <button
+              key={preset.value}
+              type="button"
+              aria-pressed={!advanced && draft.preset === preset.value}
+              disabled={saving}
+              className={presetClass(
+                !advanced && draft.preset === preset.value,
+              )}
+              onClick={() => choosePreset(preset.value, preset.draft)}
+            >
+              <span className="block text-sm font-medium">
+                {t(preset.labelKey, { defaultValue: preset.label })}
+              </span>
+              <span className="mt-0.5 block text-xs text-muted-foreground">
+                {t(preset.detailKey, { defaultValue: preset.detail })}
+              </span>
+            </button>
+          ))}
+          <button
+            type="button"
+            aria-pressed={!advanced && draft.preset === "custom"}
+            disabled={saving}
+            className={presetClass(!advanced && draft.preset === "custom")}
+            onClick={() =>
+              choosePreset("custom", {
+                preset: "custom",
+                unit: draft.unit || "day",
+              })
+            }
+          >
+            <span className="block text-sm font-medium">
+              {t("jobs.schedulePreset.custom", { defaultValue: "Custom" })}
+            </span>
+            <span className="mt-0.5 block text-xs text-muted-foreground">
+              {t("jobs.schedulePreset.customDetail", {
+                defaultValue: "Set your own repeat pattern",
+              })}
+            </span>
+          </button>
+        </div>
+      </div>
+
+      {!advanced && draft.preset === "custom" ? (
+        <ScheduleFields
+          draft={draft}
+          saving={saving}
+          onChange={(patch) =>
+            setDraft((current) => ({ ...current, ...patch }))
+          }
+        />
+      ) : null}
+
+      {!advanced && friendly.schedule ? (
+        <p className="text-xs text-muted-foreground">
+          {t("jobs.schedulePreview", {
+            defaultValue: "Runs {{time}}.",
+            time:
+              draft.preset === "hourly"
+                ? t("jobs.schedulePreview.hourly", {
+                    defaultValue: "at the start of every hour",
+                  })
+                : draft.preset === "daily-midnight"
+                  ? t("jobs.schedulePreview.dailyMidnight", {
+                      defaultValue: "every day at midnight",
+                    })
+                  : draft.preset === "daily-noon"
+                    ? t("jobs.schedulePreview.dailyNoon", {
+                        defaultValue: "every day at noon",
+                      })
+                    : t("jobs.schedulePreview.atTime", {
+                        defaultValue: "at {{time}}",
+                        time: formatAutomationTime(draft.time),
+                      }),
+          })}
+        </p>
+      ) : null}
+      {!advanced && friendly.error ? (
+        <p className="text-xs text-destructive">
+          {friendly.error === "daily-interval"
+            ? t("jobs.dailyIntervalAdvanced", {
+                defaultValue:
+                  "Every few days needs the Advanced cron editor below.",
+              })
+            : t("jobs.weeklyIntervalAdvanced", {
+                defaultValue:
+                  "Custom weekly intervals beyond one week are available under Advanced.",
+              })}
+        </p>
+      ) : null}
+
+      <div>
+        <label className="text-xs font-medium text-foreground">
+          {t("jobs.timezone", { defaultValue: "Timezone" })}
+        </label>
+        <div className="mt-1">
+          <TimezoneSelect
+            value={timezone}
+            disabled={saving}
+            onChange={onTimezoneChange}
+            suggested={[browserTimezone()]}
+          />
+        </div>
+      </div>
+
+      <details
+        className="group rounded-lg border border-border/70 bg-muted/20"
+        open={advanced}
+        onToggle={(event) => {
+          const next = event.currentTarget.open;
+          if (next && !advanced && friendly.schedule) {
+            setAdvancedValue(friendly.schedule);
+          }
+          setAdvanced(next);
+        }}
+      >
+        <summary className="flex cursor-pointer list-none items-center gap-2 px-3 py-2.5 text-xs font-medium text-foreground [&::-webkit-details-marker]:hidden">
+          <IconCode className="size-4 text-muted-foreground" />
+          {t("jobs.advancedSchedule", {
+            defaultValue: "Advanced - cron expression",
+          })}
+          <span className="ms-auto text-muted-foreground group-open:hidden">
+            {t("jobs.show", { defaultValue: "Show" })}
+          </span>
+          <span className="ms-auto hidden text-muted-foreground group-open:inline">
+            {t("jobs.hide", { defaultValue: "Hide" })}
+          </span>
+        </summary>
+        <div className="border-t border-border/60 px-3 pb-3 pt-2.5">
+          <Input
+            className="font-mono text-sm"
+            value={advancedValue}
+            spellCheck={false}
+            autoComplete="off"
+            disabled={saving}
+            onFocus={() => setAdvanced(true)}
+            onChange={(event) => {
+              setAdvanced(true);
+              setAdvancedValue(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>
+      </details>
+
+      {activeSchedule && !valid ? (
+        <p className="text-xs text-destructive">
+          {t("jobs.cronFieldCount", {
+            defaultValue: "A cron expression needs exactly 5 fields.",
+          })}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+function EventFields({
+  open,
+  event,
+  onChange,
+}: {
+  open: boolean;
+  event: string;
+  onChange: (value: string) => void;
+}) {
+  const t = useT();
+  const eventsQuery = useActionQuery<AutomationEvent[]>(
+    "list-automation-events",
+    {},
+    { enabled: open, staleTime: 60_000 },
+  );
+
+  return (
+    <>
+      <label className="space-y-1.5 text-xs text-muted-foreground">
+        <span>{t("jobs.startWhen", { defaultValue: "Start when" })}</span>
+        <Select value={event} onValueChange={onChange}>
+          <SelectTrigger>
+            <SelectValue
+              placeholder={
+                eventsQuery.isLoading
+                  ? t("jobs.loadingEventTypes", {
+                      defaultValue: "Loading event types...",
+                    })
+                  : t("jobs.chooseAppEvent", {
+                      defaultValue: "Choose an app event",
+                    })
+              }
+            />
+          </SelectTrigger>
+          <SelectContent>
+            {(eventsQuery.data ?? []).map((item) => (
+              <SelectItem key={item.name} value={item.name}>
+                {item.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </label>
+      {eventsQuery.data?.find((item) => item.name === event)?.description ? (
+        <p className="mt-2 text-xs text-muted-foreground">
+          {eventsQuery.data.find((item) => item.name === event)?.description}
+        </p>
+      ) : null}
+      {eventsQuery.error ? (
+        <p className="mt-2 text-xs text-destructive">
+          {t("jobs.loadEventTypesError", {
+            defaultValue: "Could not load event types.",
+          })}
+        </p>
+      ) : null}
+    </>
+  );
+}
+
+export interface AutomationCreateDialogProps {
+  open: boolean;
+  initialScope?: "personal" | "organization";
+  onOpenChange: (open: boolean) => void;
+  onCreated: (result: CreateAutomationResult) => void;
+}
+
+export function AutomationCreateDialog({
+  open,
+  initialScope = "personal",
+  onOpenChange,
+  onCreated,
+}: AutomationCreateDialogProps) {
+  const t = useT();
+  const [name, setName] = useState("");
+  const [scope, setScope] = useState<"personal" | "organization">(initialScope);
+  const [triggerType, setTriggerType] = useState<TriggerType>("schedule");
+  const [schedule, setSchedule] = useState("0 * * * *");
+  const [timezone, setTimezone] = useState(browserTimezone());
+  const [event, setEvent] = useState("");
+  const [body, setBody] = useState("");
+  const create = useActionMutation<
+    CreateAutomationResult,
+    CreateAutomationInput
+  >("manage-automation", {
+    onSuccess: onCreated,
+  });
+
+  const resetCreate = create.reset;
+
+  useEffect(() => {
+    if (!open) return;
+    setName("");
+    setScope(initialScope);
+    setTriggerType("schedule");
+    setSchedule("0 * * * *");
+    setTimezone(browserTimezone());
+    setEvent("");
+    setBody("");
+    resetCreate();
+  }, [initialScope, open, resetCreate]);
+
+  const canSubmit =
+    name.trim().length > 0 &&
+    body.trim().length > 0 &&
+    (triggerType !== "event" || event.length > 0) &&
+    (triggerType !== "schedule" || scheduleIsValid(schedule));
+
+  function submit() {
+    if (!canSubmit) return;
+    create.mutate({
+      operation: "create",
+      name: name.trim(),
+      scope,
+      triggerType,
+      body: body.trim(),
+      ...(triggerType === "schedule"
+        ? { schedule, timezone }
+        : triggerType === "event"
+          ? { event }
+          : {}),
+    });
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>
+            {t("jobs.newAutomation", { defaultValue: "New automation" })}
+          </DialogTitle>
+          <DialogDescription>
+            {t("jobs.createAutomationDescription", {
+              defaultValue:
+                "Choose what starts it, then describe the work in plain language.",
+            })}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="grid gap-3 sm:grid-cols-[1fr_12rem]">
+            <label className="space-y-1.5 text-xs text-muted-foreground">
+              <span>{t("jobs.name", { defaultValue: "Name" })}</span>
+              <Input
+                value={name}
+                disabled={create.isPending}
+                placeholder={t("jobs.automationNamePlaceholder", {
+                  defaultValue: "morning-digest",
+                })}
+                onChange={(event) => setName(event.target.value)}
+              />
+            </label>
+            <label className="space-y-1.5 text-xs text-muted-foreground">
+              <span>{t("jobs.scope", { defaultValue: "Scope" })}</span>
+              <Select
+                value={scope}
+                disabled={create.isPending}
+                onValueChange={(value) =>
+                  setScope(value as "personal" | "organization")
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="personal">
+                    {t("jobs.personal", { defaultValue: "Personal" })}
+                  </SelectItem>
+                  <SelectItem value="organization">
+                    {t("jobs.organization", { defaultValue: "Organization" })}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </label>
+          </div>
+
+          <Tabs
+            value={triggerType}
+            onValueChange={(value) => setTriggerType(value as TriggerType)}
+          >
+            <TabsList className="grid h-auto w-full grid-cols-3">
+              <TabsTrigger value="schedule" className="gap-2 py-2 text-xs">
+                <IconClock className="size-3.5" />
+                {t("jobs.schedule", { defaultValue: "Schedule" })}
+              </TabsTrigger>
+              <TabsTrigger value="webhook" className="gap-2 py-2 text-xs">
+                <IconBolt className="size-3.5" />
+                {t("jobs.webhook", { defaultValue: "Webhook" })}
+              </TabsTrigger>
+              <TabsTrigger value="event" className="gap-2 py-2 text-xs">
+                <IconCalendarEvent className="size-3.5" />
+                {t("jobs.appEvent", { defaultValue: "App event" })}
+              </TabsTrigger>
+            </TabsList>
+            <TabsContent value="schedule" className="mt-3">
+              <ScheduleBuilder
+                key={open ? "schedule-open" : "schedule-closed"}
+                saving={create.isPending}
+                timezone={timezone}
+                onTimezoneChange={setTimezone}
+                onChange={setSchedule}
+              />
+            </TabsContent>
+            <TabsContent value="webhook" className="mt-3">
+              <div className="rounded-lg border border-primary/20 bg-primary/5 p-3">
+                <div className="flex items-start gap-2">
+                  <IconBolt className="mt-0.5 size-4 shrink-0 text-primary" />
+                  <div>
+                    <p className="text-sm font-medium text-foreground">
+                      {t("jobs.webhookTriggerDescription", {
+                        defaultValue: "Run when a service sends an HTTP POST",
+                      })}
+                    </p>
+                    <p className="mt-1 text-xs leading-5 text-muted-foreground">
+                      {t("jobs.webhookSetupDescription", {
+                        defaultValue:
+                          "After you save, Dispatch gives you a private URL to paste into GitHub, Stripe, or another webhook provider.",
+                      })}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+            <TabsContent value="event" className="mt-3">
+              <EventFields open={open} event={event} onChange={setEvent} />
+            </TabsContent>
+          </Tabs>
+
+          <label className="space-y-1.5 text-xs text-muted-foreground">
+            <span>
+              {t("jobs.whatShouldItDo", { defaultValue: "What should it do?" })}
+            </span>
+            <Textarea
+              value={body}
+              disabled={create.isPending}
+              placeholder={t("jobs.automationBodyPlaceholder", {
+                defaultValue:
+                  "Review new support requests and summarize anything urgent in a shared note.",
+              })}
+              rows={5}
+              onChange={(event) => setBody(event.target.value)}
+            />
+          </label>
+
+          {create.error ? (
+            <p className="text-xs text-destructive">{create.error.message}</p>
+          ) : null}
+        </div>
+
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="outline"
+            disabled={create.isPending}
+            onClick={() => onOpenChange(false)}
+          >
+            {t("jobs.cancel", { defaultValue: "Cancel" })}
+          </Button>
+          <Button
+            type="button"
+            disabled={!canSubmit || create.isPending}
+            onClick={submit}
+          >
+            {create.isPending ? (
+              <IconLoader2 className="size-4 animate-spin" />
+            ) : null}
+            {t("jobs.createAutomation", { defaultValue: "Create automation" })}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}