diff --git a/ui/src/components/ConfirmDialog.tsx b/ui/src/components/ConfirmDialog.tsx
deleted file mode 100644
index 3a8ed9a5..00000000
--- a/ui/src/components/ConfirmDialog.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-
-interface ConfirmDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  title: string;
-  description?: string;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  destructive?: boolean;
-  onConfirm: () => void;
-  busy?: boolean;
-}
-
-export function ConfirmDialog({
-  open,
-  onOpenChange,
-  title,
-  description,
-  confirmLabel = "Confirm",
-  cancelLabel = "Cancel",
-  destructive,
-  onConfirm,
-  busy,
-}: ConfirmDialogProps) {
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-sm">
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          {description && <DialogDescription>{description}</DialogDescription>}
-        </DialogHeader>
-        <DialogFooter>
-          <Button variant="outline" size="sm" onClick={() => onOpenChange(false)} disabled={busy}>
-            {cancelLabel}
-          </Button>
-          <Button
-            variant={destructive ? "destructive" : "default"}
-            size="sm"
-            onClick={onConfirm}
-            disabled={busy}
-          >
-            {busy ? "Working…" : confirmLabel}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/ui/src/components/ScheduleEditor.test.ts b/ui/src/components/ScheduleEditor.test.ts
deleted file mode 100644
index e0f8853a..00000000
--- a/ui/src/components/ScheduleEditor.test.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-import { describe, expect, it } from "vitest";
-import {
-  describeSchedule,
-  getScheduleEditorPresetForTest,
-  hasSingleMinuteAcrossTimesForTest,
-  parseCronToPreset,
-  roundTripCronForTest,
-} from "./ScheduleEditor";
-
-describe("parseCronToPreset", () => {
-  describe("simple single-value crons map to presets", () => {
-    it("maps `* * * * *` to every_minute", () => {
-      expect(parseCronToPreset("* * * * *").preset).toBe("every_minute");
-    });
-
-    it("maps `0 * * * *` to every_hour", () => {
-      const parsed = parseCronToPreset("0 * * * *");
-      expect(parsed.preset).toBe("every_hour");
-      expect(parsed.minute).toBe("0");
-    });
-
-    it("maps `0 9 * * *` to every_day at 09:00", () => {
-      const parsed = parseCronToPreset("0 9 * * *");
-      expect(parsed.preset).toBe("every_day");
-      expect(parsed.hour).toBe("9");
-      expect(parsed.minute).toBe("0");
-    });
-
-    it("maps `0 9 * * 1-5` to weekdays", () => {
-      const parsed = parseCronToPreset("0 9 * * 1-5");
-      expect(parsed.preset).toBe("weekdays");
-      expect(parsed.hour).toBe("9");
-    });
-
-    it("maps `0 9 * * 1` to weekly on Monday", () => {
-      const parsed = parseCronToPreset("0 9 * * 1");
-      expect(parsed.preset).toBe("weekly");
-      expect(parsed.dayOfWeek).toBe("1");
-      expect(parsed.hour).toBe("9");
-    });
-
-    it("maps `0 9 1 * *` to monthly on the 1st", () => {
-      const parsed = parseCronToPreset("0 9 1 * *");
-      expect(parsed.preset).toBe("monthly");
-      expect(parsed.dayOfMonth).toBe("1");
-      expect(parsed.hour).toBe("9");
-    });
-  });
-
-  describe("complex crons round-trip via custom preset (regression: comma lists were silently coerced into every_day)", () => {
-    it("routes comma-separated hours to custom", () => {
-      // Regression: `0 9,13,17 * * *` used to be parsed as `every_day` with
-      // hour `"9,13,17"`, which the hour <Select> couldn't render. Saving the
-      // form then rebuilt the cron as `0 10 * * *`, silently collapsing three
-      // daily fires into one.
-      expect(parseCronToPreset("0 9,13,17 * * *").preset).toBe("custom");
-      expect(parseCronToPreset("0 10,16 * * *").preset).toBe("custom");
-    });
-
-    it("routes step expressions to custom", () => {
-      expect(parseCronToPreset("0 */4 * * *").preset).toBe("custom");
-      expect(parseCronToPreset("*/15 * * * *").preset).toBe("custom");
-      expect(parseCronToPreset("0 9-17/2 * * *").preset).toBe("custom");
-    });
-
-    it("routes range expressions (other than weekday 1-5) to custom", () => {
-      expect(parseCronToPreset("0 9-17 * * *").preset).toBe("custom");
-      expect(parseCronToPreset("15-45 * * * *").preset).toBe("custom");
-      expect(parseCronToPreset("0 9 1-15 * *").preset).toBe("custom");
-    });
-
-    it("routes comma-separated day-of-week to custom", () => {
-      expect(parseCronToPreset("0 9 * * 1,3,5").preset).toBe("custom");
-    });
-
-    it("routes hourly-on-weekdays schedules to custom to preserve the stored expression", () => {
-      expect(getScheduleEditorPresetForTest("5 * * * 1-5")).toBe("custom");
-      expect(roundTripCronForTest("5 * * * 1-5")).toBe("5 * * * 1-5");
-    });
-
-    it("routes non-wildcard month field to custom", () => {
-      // None of the presets encode a month, so even a single numeric month
-      // must fall through to custom to avoid being silently dropped.
-      expect(parseCronToPreset("0 9 1 1 *").preset).toBe("custom");
-    });
-
-    it("routes unknown tokens to custom", () => {
-      expect(parseCronToPreset("0 MON * * *").preset).toBe("custom");
-      expect(parseCronToPreset("@daily").preset).toBe("custom");
-    });
-
-    it("routes malformed crons to custom", () => {
-      expect(parseCronToPreset("not a cron").preset).toBe("custom");
-      expect(parseCronToPreset("0 9 *").preset).toBe("custom");
-    });
-  });
-});
-
-describe("describeSchedule", () => {
-  it("describes simple presets in plain English", () => {
-    expect(describeSchedule("0 9 * * *")).toContain("Every day");
-    expect(describeSchedule("0 9 * * 1-5")).toContain("weekday");
-    expect(describeSchedule("0 9 * * 1")).toContain("Monday");
-  });
-
-  it("describes multi-value hour lists (these previously collapsed silently)", () => {
-    // Regression guard. Pre-fix, these crons round-tripped to "Every day at …"
-    // with a silently-wrong single hour. Post-fix they rendered as the raw
-    // cron string. Now that the editor can represent multi-value hour lists
-    // first-class, describeSchedule unfolds them into a readable sentence.
-    expect(describeSchedule("0 9,13,17 * * *")).toBe("Every day at 09:00, 13:00 and 17:00");
-    expect(describeSchedule("0 10,16 * * *")).toBe("Every day at 10:00 and 16:00");
-  });
-
-  it("describes step expressions in plain English", () => {
-    expect(describeSchedule("0 */4 * * *")).toBe("Every 4 hours at :00");
-    expect(describeSchedule("*/15 * * * *")).toBe("Every 15 minutes");
-    expect(describeSchedule("*/15 9-17 * * 1-5")).toContain("between 09:00 and 17:00");
-  });
-
-  it("describes multi-day weekday selections", () => {
-    expect(describeSchedule("0 9 * * 1,3,5")).toBe("Every Mon, Wed, Fri at 09:00");
-  });
-
-  it("describes multi-date monthly selections with ordinals", () => {
-    expect(describeSchedule("0 9 1,15 * *")).toBe("On the 1st, 15th of the month at 09:00");
-  });
-
-  it("falls back to the raw cron string for expressions it can't confidently describe", () => {
-    // Named tokens and exotic forms still round-trip as the raw cron.
-    expect(describeSchedule("0 MON * * *")).toBe("0 MON * * *");
-    expect(describeSchedule("@daily")).toBe("@daily");
-    expect(describeSchedule("not a cron")).toBe("not a cron");
-  });
-
-  it("falls back to the default 10:00 preset for an empty cron", () => {
-    expect(describeSchedule("")).toBe("Every day at 10:00");
-  });
-});
-
-describe("getScheduleEditorPresetForTest", () => {
-  it("keeps malformed hour fields in custom mode instead of coercing them into daily", () => {
-    expect(getScheduleEditorPresetForTest("0 foo * * *")).toBe("custom");
-    expect(getScheduleEditorPresetForTest("0 9-foo * * *")).toBe("custom");
-  });
-
-  it("keeps multi-minute daily schedules in custom mode because one trigger cannot represent arbitrary time pairs", () => {
-    expect(getScheduleEditorPresetForTest("15,45 9,13 * * *")).toBe("custom");
-  });
-});
-
-describe("roundTripCronForTest", () => {
-  it("preserves weekday ranges instead of normalizing them to a comma list", () => {
-    expect(roundTripCronForTest("0 9 * * 1-5")).toBe("0 9 * * 1-5");
-  });
-});
-
-describe("hasSingleMinuteAcrossTimesForTest", () => {
-  it("accepts same-minute multi-time selections", () => {
-    expect(hasSingleMinuteAcrossTimesForTest(["09:00", "13:00", "17:00"])).toBe(true);
-  });
-
-  it("rejects mixed-minute selections that would expand into extra cron runs", () => {
-    expect(hasSingleMinuteAcrossTimesForTest(["09:15", "13:45"])).toBe(false);
-  });
-});
diff --git a/ui/src/components/ScheduleEditor.tsx b/ui/src/components/ScheduleEditor.tsx
index 70544247..e5a1bc63 100644
--- a/ui/src/components/ScheduleEditor.tsx
+++ b/ui/src/components/ScheduleEditor.tsx
@@ -2,91 +2,46 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Badge } from "@/components/ui/badge";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Separator } from "@/components/ui/separator";
-import { X } from "lucide-react";
+import { ChevronDown, ChevronRight } from "lucide-react";
 
-// ---------------------------------------------------------------------------
-// Public (stable) types & helpers
-// ---------------------------------------------------------------------------
+type SchedulePreset = "every_minute" | "every_hour" | "every_day" | "weekdays" | "weekly" | "monthly" | "custom";
 
-/**
- * Limited preset set kept for backwards compatibility. `parseCronToPreset` and
- * the `describeSchedule` fallback rely on this set. Any cron that can't be
- * expressed with a single hour / minute / day-of-week / day-of-month routes
- * to "custom" from this parser so old callers never see a lossy preset.
- */
-export type SchedulePreset =
-  | "every_minute"
-  | "every_hour"
-  | "every_day"
-  | "weekdays"
-  | "weekly"
-  | "monthly"
-  | "custom";
-
-const DAY_NAMES_SHORT = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-const DAY_NAMES_LONG = [
-  "Sunday",
-  "Monday",
-  "Tuesday",
-  "Wednesday",
-  "Thursday",
-  "Friday",
-  "Saturday",
+const PRESETS: { value: SchedulePreset; label: string }[] = [
+  { value: "every_minute", label: "Every minute" },
+  { value: "every_hour", label: "Every hour" },
+  { value: "every_day", label: "Every day" },
+  { value: "weekdays", label: "Weekdays" },
+  { value: "weekly", label: "Weekly" },
+  { value: "monthly", label: "Monthly" },
+  { value: "custom", label: "Custom (cron)" },
 ];
 
-function pad(n: number): string {
-  return String(n).padStart(2, "0");
-}
+const HOURS = Array.from({ length: 24 }, (_, i) => ({
+  value: String(i),
+  label: i === 0 ? "12 AM" : i < 12 ? `${i} AM` : i === 12 ? "12 PM" : `${i - 12} PM`,
+}));
 
-function ordinalSuffix(n: number): string {
-  const s = ["th", "st", "nd", "rd"];
-  const v = n % 100;
-  return s[(v - 20) % 10] || s[v] || s[0];
-}
+const MINUTES = Array.from({ length: 12 }, (_, i) => ({
+  value: String(i * 5),
+  label: String(i * 5).padStart(2, "0"),
+}));
 
-function ordinal(n: number): string {
-  return `${n}${ordinalSuffix(n)}`;
-}
+const DAYS_OF_WEEK = [
+  { value: "1", label: "Mon" },
+  { value: "2", label: "Tue" },
+  { value: "3", label: "Wed" },
+  { value: "4", label: "Thu" },
+  { value: "5", label: "Fri" },
+  { value: "6", label: "Sat" },
+  { value: "0", label: "Sun" },
+];
 
-function isSimpleCronField(field: string): boolean {
-  return field === "*" || /^\d+$/.test(field);
-}
+const DAYS_OF_MONTH = Array.from({ length: 31 }, (_, i) => ({
+  value: String(i + 1),
+  label: String(i + 1),
+}));
 
-function parseTimeParts(time: string): { hour: number; minute: number } | null {
-  const match = time.match(/^(\d{2}):(\d{2})$/);
-  if (!match) return null;
-  const hour = Number(match[1]);
-  const minute = Number(match[2]);
-  if (!Number.isInteger(hour) || !Number.isInteger(minute) || hour < 0 || hour > 23 || minute < 0 || minute > 59) {
-    return null;
-  }
-  return { hour, minute };
-}
-
-function hasSingleMinuteAcrossTimes(times: string[]): boolean {
-  const parsed = times.map(parseTimeParts);
-  if (parsed.some((value) => value == null)) return false;
-  const minutes = new Set(parsed.map((value) => value!.minute));
-  return minutes.size <= 1;
-}
-
-// ---------------------------------------------------------------------------
-// Back-compat parser (kept so tests and any external callers continue to work)
-// ---------------------------------------------------------------------------
-
-/**
- * Parse a cron into one of the *limited* presets (original behaviour).
- * Complex expressions (comma lists, ranges, steps, named tokens) all map to
- * "custom" so the caller can safely round-trip the raw string without losing
- * multi-value information. Don't change these semantics without updating the
- * ScheduleEditor tests — they intentionally guard against silent collapse of
- * multi-value crons like `0 9,13,17 * * *`.
- */
-export function parseCronToPreset(cron: string): {
+function parseCronToPreset(cron: string): {
   preset: SchedulePreset;
   hour: string;
   minute: string;
@@ -104,537 +59,92 @@ export function parseCronToPreset(cron: string): {
     return { preset: "custom", ...defaults };
   }
 
-  const [min, hr, dom, month, dow] = parts;
-  const dowIsWeekdayRange = dow === "1-5";
-  const allFieldsSimple =
-    isSimpleCronField(min) &&
-    isSimpleCronField(hr) &&
-    isSimpleCronField(dom) &&
-    isSimpleCronField(month) &&
-    (isSimpleCronField(dow) || dowIsWeekdayRange);
-  if (!allFieldsSimple) {
-    return { preset: "custom", ...defaults };
-  }
-  if (month !== "*") {
-    return { preset: "custom", ...defaults };
-  }
+  const [min, hr, dom, , dow] = parts;
 
+  // Every minute: "* * * * *"
   if (min === "*" && hr === "*" && dom === "*" && dow === "*") {
     return { preset: "every_minute", ...defaults };
   }
+
+  // Every hour: "0 * * * *"
   if (hr === "*" && dom === "*" && dow === "*") {
     return { preset: "every_hour", ...defaults, minute: min === "*" ? "0" : min };
   }
+
+  // Every day: "M H * * *"
   if (dom === "*" && dow === "*" && hr !== "*") {
     return { preset: "every_day", ...defaults, hour: hr, minute: min === "*" ? "0" : min };
   }
+
+  // Weekdays: "M H * * 1-5"
   if (dom === "*" && dow === "1-5" && hr !== "*") {
     return { preset: "weekdays", ...defaults, hour: hr, minute: min === "*" ? "0" : min };
   }
+
+  // Weekly: "M H * * D" (single day)
   if (dom === "*" && /^\d$/.test(dow) && hr !== "*") {
-    return {
-      preset: "weekly",
-      ...defaults,
-      hour: hr,
-      minute: min === "*" ? "0" : min,
-      dayOfWeek: dow,
-    };
+    return { preset: "weekly", ...defaults, hour: hr, minute: min === "*" ? "0" : min, dayOfWeek: dow };
   }
+
+  // Monthly: "M H D * *"
   if (/^\d{1,2}$/.test(dom) && dow === "*" && hr !== "*") {
-    return {
-      preset: "monthly",
-      ...defaults,
-      hour: hr,
-      minute: min === "*" ? "0" : min,
-      dayOfMonth: dom,
-    };
+    return { preset: "monthly", ...defaults, hour: hr, minute: min === "*" ? "0" : min, dayOfMonth: dom };
   }
+
   return { preset: "custom", ...defaults };
 }
 
-// ---------------------------------------------------------------------------
-// Richer internal parser that can handle multi-value fields
-// ---------------------------------------------------------------------------
-
-type EditorPreset =
-  | "every_minute"
-  | "every_n_minutes"
-  | "hourly"
-  | "every_n_hours"
-  | "daily"
-  | "weekdays"
-  | "monthly"
-  | "custom";
-
-interface EditorState {
-  preset: EditorPreset;
-  n: number; // every_n_minutes, every_n_hours
-  windowEnabled: boolean;
-  windowStart: number;
-  windowEnd: number;
-  weekdaysOnly: boolean;
-  minutePast: number; // hourly, every_n_hours
-  times: string[]; // "HH:mm" strings, for daily / weekdays / monthly
-  days: number[]; // 0-6, for weekdays preset
-  domDays: number[]; // 1-31, for monthly
-  custom: string;
-}
-
-const DEFAULT_STATE: EditorState = {
-  preset: "daily",
-  n: 15,
-  windowEnabled: false,
-  windowStart: 9,
-  windowEnd: 17,
-  weekdaysOnly: false,
-  minutePast: 0,
-  times: ["09:00"],
-  days: [1, 2, 3, 4, 5],
-  domDays: [1],
-  custom: "0 10 * * *",
-};
-
-function parseCronField(field: string, min: number, max: number): number[] {
-  if (field === "*") {
-    return Array.from({ length: max - min + 1 }, (_, i) => i + min);
-  }
-  const parts = field.split(",");
-  const out = new Set<number>();
-  for (const p of parts) {
-    if (!p) {
-      throw new Error("Invalid cron field");
-    }
-    const stepMatch = p.match(/^(.+)\/(\d+)$/);
-    let base = p;
-    let step = 1;
-    if (stepMatch) {
-      base = stepMatch[1];
-      step = parseInt(stepMatch[2], 10);
-      if (!Number.isInteger(step) || step <= 0) {
-        throw new Error("Invalid cron step");
-      }
-    }
-    if (base === "*") {
-      for (let i = min; i <= max; i += step) out.add(i);
-    } else if (base.includes("-")) {
-      if (!/^\d+-\d+$/.test(base)) {
-        throw new Error("Invalid cron range");
-      }
-      const [a, b] = base.split("-").map(Number);
-      if (a > b) {
-        throw new Error("Invalid cron range");
-      }
-      for (let i = a; i <= b; i += step) out.add(i);
-    } else {
-      if (!/^\d+$/.test(base)) {
-        throw new Error("Invalid cron value");
-      }
-      const n = parseInt(base, 10);
-      out.add(n);
-    }
-  }
-  for (const value of out) {
-    if (value < min || value > max) {
-      throw new Error("Cron value out of range");
-    }
-  }
-  const sorted = [...out].sort((a, b) => a - b);
-  if (sorted.length === 0) {
-    throw new Error("Invalid cron field");
-  }
-  return sorted;
-}
-
-function timesFromFields(minuteField: string, hourField: string): string[] | null {
-  const minutes = parseCronField(minuteField, 0, 59);
-  const hours = parseCronField(hourField, 0, 23);
-  if (minutes.length > 1) {
-    return null;
-  }
-  const out: string[] = [];
-  for (const h of hours) for (const mi of minutes) out.push(`${pad(h)}:${pad(mi)}`);
-  return out.length > 0 && out.length <= 24 ? out : null;
-}
-
-function parseCronToEditorState(cron: string): EditorState {
-  if (!cron || !cron.trim()) return { ...DEFAULT_STATE };
-
-  const fields = cron.trim().split(/\s+/);
-  if (fields.length !== 5) return { ...DEFAULT_STATE, preset: "custom", custom: cron };
-  const [m, h, dom, mon, dow] = fields;
-
-  // validate each field is parseable
-  try {
-    parseCronField(m, 0, 59);
-    parseCronField(h, 0, 23);
-    parseCronField(dom, 1, 31);
-    parseCronField(mon, 1, 12);
-    parseCronField(dow.replace(/7/g, "0"), 0, 6);
-  } catch {
-    return { ...DEFAULT_STATE, preset: "custom", custom: cron };
-  }
-
-  // non-wildcard month → custom
-  if (mon !== "*") return { ...DEFAULT_STATE, preset: "custom", custom: cron };
-
-  // every minute
-  if (cron.trim() === "* * * * *") return { ...DEFAULT_STATE, preset: "every_minute" };
-
-  // every N minutes (optionally windowed / weekdays-only)
-  const minuteStep = m.match(/^\*\/(\d+)$/);
-  const hourRange = h.match(/^(\d+)-(\d+)$/);
-  if (minuteStep && dom === "*") {
-    const n = parseInt(minuteStep[1], 10);
-    const state = { ...DEFAULT_STATE, preset: "every_n_minutes" as EditorPreset, n };
-    if (h !== "*") {
-      if (hourRange) {
-        state.windowEnabled = true;
-        state.windowStart = +hourRange[1];
-        state.windowEnd = +hourRange[2];
-      } else {
-        // unsupported hour field for this preset → custom
-        return { ...DEFAULT_STATE, preset: "custom", custom: cron };
-      }
-    }
-    if (dow === "1-5") state.weekdaysOnly = true;
-    else if (dow !== "*") return { ...DEFAULT_STATE, preset: "custom", custom: cron };
-    return state;
-  }
-
-  // hourly: single minute, hour=*
-  if (/^\d+$/.test(m) && h === "*" && dom === "*" && dow === "*") {
-    return { ...DEFAULT_STATE, preset: "hourly", minutePast: parseInt(m, 10) };
-  }
-  if (/^\d+$/.test(m) && h === "*" && dom === "*" && dow !== "*") {
-    return { ...DEFAULT_STATE, preset: "custom", custom: cron };
-  }
-
-  // every N hours
-  const hourStep = h.match(/^\*\/(\d+)$/);
-  if (/^\d+$/.test(m) && hourStep && dom === "*") {
-    const state = {
-      ...DEFAULT_STATE,
-      preset: "every_n_hours" as EditorPreset,
-      n: parseInt(hourStep[1], 10),
-      minutePast: parseInt(m, 10),
-    };
-    if (dow === "1-5") state.weekdaysOnly = true;
-    else if (dow !== "*") return { ...DEFAULT_STATE, preset: "custom", custom: cron };
-    return state;
-  }
-
-  // monthly: specific dom (may be multi), dow = *
-  if (dom !== "*" && dow === "*") {
-    const domDays = parseCronField(dom, 1, 31);
-    const times = timesFromFields(m, h);
-    if (!times) return { ...DEFAULT_STATE, preset: "custom", custom: cron };
-    if (domDays.length === 0) return { ...DEFAULT_STATE, preset: "custom", custom: cron };
-    return {
-      ...DEFAULT_STATE,
-      preset: "monthly",
-      domDays,
-      times,
-    };
-  }
-
-  // weekdays (any subset of days)
-  if (dom === "*" && dow !== "*") {
-    const days = parseCronField(dow.replace(/7/g, "0"), 0, 6);
-    const times = timesFromFields(m, h);
-    if (!times) return { ...DEFAULT_STATE, preset: "custom", custom: cron };
-    if (days.length === 0) return { ...DEFAULT_STATE, preset: "custom", custom: cron };
-    return {
-      ...DEFAULT_STATE,
-      preset: "weekdays",
-      days,
-      times,
-    };
-  }
-
-  // daily (any time(s))
-  if (dom === "*" && dow === "*") {
-    const times = timesFromFields(m, h);
-    if (!times) return { ...DEFAULT_STATE, preset: "custom", custom: cron };
-    return {
-      ...DEFAULT_STATE,
-      preset: "daily",
-      times,
-    };
-  }
-
-  return { ...DEFAULT_STATE, preset: "custom", custom: cron };
-}
-
-function buildCronFromState(s: EditorState): string {
-  const fmt = (arr: number[] | string): string => {
-    if (typeof arr === "string") return arr;
-    if (arr.length === 0) return "*";
-    return arr.join(",");
-  };
-  const isWeekdayRangeSelection = (days: number[]): boolean =>
-    days.length === 5 && days.every((day, index) => day === index + 1);
-  switch (s.preset) {
+function buildCron(preset: SchedulePreset, hour: string, minute: string, dayOfWeek: string, dayOfMonth: string): string {
+  switch (preset) {
     case "every_minute":
       return "* * * * *";
-    case "every_n_minutes": {
-      const hourField = s.windowEnabled ? `${s.windowStart}-${s.windowEnd}` : "*";
-      const dowField = s.weekdaysOnly ? "1-5" : "*";
-      return `*/${s.n} ${hourField} * * ${dowField}`;
-    }
-    case "hourly":
-      return `${s.minutePast} * * * *`;
-    case "every_n_hours": {
-      const dowField = s.weekdaysOnly ? "1-5" : "*";
-      return `${s.minutePast} */${s.n} * * ${dowField}`;
-    }
-    case "daily": {
-      const parsedTimes = s.times.map(parseTimeParts).filter((value): value is NonNullable<typeof value> => value != null);
-      const minute = parsedTimes[0]?.minute ?? 0;
-      const hours = [...new Set(parsedTimes.map((time) => time.hour))].sort((a, b) => a - b);
-      return `${minute} ${fmt(hours)} * * *`;
-    }
-    case "weekdays": {
-      const parsedTimes = s.times.map(parseTimeParts).filter((value): value is NonNullable<typeof value> => value != null);
-      const minute = parsedTimes[0]?.minute ?? 0;
-      const hours = [...new Set(parsedTimes.map((time) => time.hour))].sort((a, b) => a - b);
-      const days = s.days.length === 0
-        ? "*"
-        : isWeekdayRangeSelection(s.days)
-          ? "1-5"
-          : s.days.slice().sort((a, b) => a - b).join(",");
-      return `${minute} ${fmt(hours)} * * ${days}`;
-    }
-    case "monthly": {
-      const parsedTimes = s.times.map(parseTimeParts).filter((value): value is NonNullable<typeof value> => value != null);
-      const minute = parsedTimes[0]?.minute ?? 0;
-      const hours = [...new Set(parsedTimes.map((time) => time.hour))].sort((a, b) => a - b);
-      const doms = s.domDays.length === 0 ? [1] : s.domDays.slice().sort((a, b) => a - b);
-      return `${minute} ${fmt(hours)} ${fmt(doms)} * *`;
-    }
+    case "every_hour":
+      return `${minute} * * * *`;
+    case "every_day":
+      return `${minute} ${hour} * * *`;
+    case "weekdays":
+      return `${minute} ${hour} * * 1-5`;
+    case "weekly":
+      return `${minute} ${hour} * * ${dayOfWeek}`;
+    case "monthly":
+      return `${minute} ${hour} ${dayOfMonth} * *`;
     case "custom":
-      return s.custom;
+      return "";
   }
 }
 
-// ---------------------------------------------------------------------------
-// Rich describer that handles multi-value fields
-// ---------------------------------------------------------------------------
+function describeSchedule(cron: string): string {
+  const { preset, hour, minute, dayOfWeek, dayOfMonth } = parseCronToPreset(cron);
+  const hourLabel = HOURS.find((h) => h.value === hour)?.label ?? `${hour}`;
+  const timeStr = `${hourLabel.replace(/ (AM|PM)$/, "")}:${minute.padStart(2, "0")} ${hourLabel.match(/(AM|PM)$/)?.[0] ?? ""}`;
 
-/**
- * Produce a human-readable description of a cron expression. Handles
- * multi-value time and day fields (e.g. `0 9,13,17 * * 1-5` becomes
- * "Every weekday at 09:00, 13:00 and 17:00"). Falls back to the raw cron
- * expression when it can't confidently describe the schedule.
- */
-export function describeSchedule(cron: string): string {
-  if (!cron || !cron.trim()) return "Every day at 10:00";
-  const fields = cron.trim().split(/\s+/);
-  if (fields.length !== 5) return cron;
-  const [m, h, dom, mon, dow] = fields;
-
-  let minutes: number[], hours: number[], daysOfWeek: number[], daysOfMonth: number[];
-  try {
-    minutes = parseCronField(m, 0, 59);
-    hours = parseCronField(h, 0, 23);
-    daysOfMonth = parseCronField(dom, 1, 31);
-    parseCronField(mon, 1, 12);
-    daysOfWeek = parseCronField(dow.replace(/7/g, "0"), 0, 6);
-  } catch {
-    return cron;
+  switch (preset) {
+    case "every_minute":
+      return "Every minute";
+    case "every_hour":
+      return `Every hour at :${minute.padStart(2, "0")}`;
+    case "every_day":
+      return `Every day at ${timeStr}`;
+    case "weekdays":
+      return `Weekdays at ${timeStr}`;
+    case "weekly": {
+      const day = DAYS_OF_WEEK.find((d) => d.value === dayOfWeek)?.label ?? dayOfWeek;
+      return `Every ${day} at ${timeStr}`;
+    }
+    case "monthly":
+      return `Monthly on the ${dayOfMonth}${ordinalSuffix(Number(dayOfMonth))} at ${timeStr}`;
+    case "custom":
+      return cron || "No schedule set";
   }
-  if (mon !== "*") return cron;
-
-  if (minutes.length === 60 && hours.length === 24) return "Every minute";
-
-  const minStep = m.match(/^\*\/(\d+)$/);
-  if (minStep && h === "*" && dom === "*" && dow === "*") {
-    return `Every ${minStep[1]} minutes`;
-  }
-  if (minStep && h === "*" && dom === "*" && dow === "1-5") {
-    return `Every ${minStep[1]} minutes, weekdays`;
-  }
-  const hourRange = h.match(/^(\d+)-(\d+)$/);
-  if (minStep && hourRange && dom === "*") {
-    const dayPart = dow === "1-5" ? "weekdays" : dow === "*" ? "every day" : "selected days";
-    return `Every ${minStep[1]} minutes between ${pad(+hourRange[1])}:00 and ${pad(+hourRange[2])}:00, ${dayPart}`;
-  }
-  if (minutes.length === 1 && h === "*" && dom === "*" && dow === "*") {
-    return `Every hour at :${pad(minutes[0])}`;
-  }
-  const hourStep = h.match(/^\*\/(\d+)$/);
-  if (minutes.length === 1 && hourStep && dom === "*") {
-    const dayPart = dow === "1-5" ? ", weekdays" : "";
-    return `Every ${hourStep[1]} hours at :${pad(minutes[0])}${dayPart}`;
-  }
-
-  // day phrase
-  let dayPart = "";
-  if (dom === "*" && dow === "*") dayPart = "every day";
-  else if (dom === "*" && dow === "1-5") dayPart = "every weekday";
-  else if (dom === "*" && (dow === "0,6" || dow === "6,0")) dayPart = "every weekend";
-  else if (dom === "*") {
-    if (daysOfWeek.length === 1) dayPart = `every ${DAY_NAMES_LONG[daysOfWeek[0]]}`;
-    else dayPart = `every ${daysOfWeek.map((d) => DAY_NAMES_SHORT[d]).join(", ")}`;
-  } else if (dow === "*") {
-    if (daysOfMonth.length === 1) dayPart = `on the ${ordinal(daysOfMonth[0])} of the month`;
-    else dayPart = `on the ${daysOfMonth.map(ordinal).join(", ")} of the month`;
-  } else {
-    return cron;
-  }
-
-  // time phrase
-  const timeStrs: string[] = [];
-  for (const hh of hours) for (const mi of minutes) timeStrs.push(`${pad(hh)}:${pad(mi)}`);
-  let timePart = "";
-  if (timeStrs.length === 1) timePart = `at ${timeStrs[0]}`;
-  else if (timeStrs.length <= 4) {
-    timePart = `at ${timeStrs.slice(0, -1).join(", ")} and ${timeStrs[timeStrs.length - 1]}`;
-  } else timePart = `${timeStrs.length} times per day`;
-
-  const sentence = `${dayPart} ${timePart}`.replace(/\s+/g, " ").trim();
-  return sentence.charAt(0).toUpperCase() + sentence.slice(1);
 }
 
-// ---------------------------------------------------------------------------
-// Sub-components
-// ---------------------------------------------------------------------------
-
-const PRESET_OPTIONS: { value: EditorPreset; label: string }[] = [
-  { value: "every_minute", label: "Every minute" },
-  { value: "every_n_minutes", label: "Every N minutes" },
-  { value: "hourly", label: "Hourly" },
-  { value: "every_n_hours", label: "Every N hours" },
-  { value: "daily", label: "Daily — at one or more times" },
-  { value: "weekdays", label: "On selected days of the week" },
-  { value: "monthly", label: "Monthly — on selected dates" },
-  { value: "custom", label: "Custom (cron expression)" },
-];
-
-function TimeList({
-  times,
-  onChange,
-}: {
-  times: string[];
-  onChange: (next: string[]) => void;
-}) {
-  return (
-    <div className="space-y-2">
-      {times.map((t, i) => (
-        <div key={i} className="flex items-center gap-2">
-          <Input
-            type="time"
-            value={t}
-            className="font-mono w-32"
-            onChange={(e) => {
-              const next = times.slice();
-              const value = e.target.value || "00:00";
-              next[i] = value;
-              if (next.length > 1) {
-                const parsed = parseTimeParts(value);
-                if (parsed) {
-                  for (let idx = 0; idx < next.length; idx += 1) {
-                    const current = parseTimeParts(next[idx] ?? "");
-                    const hour = idx === i ? parsed.hour : (current?.hour ?? 0);
-                    next[idx] = `${pad(hour)}:${pad(parsed.minute)}`;
-                  }
-                }
-              }
-              onChange(next);
-            }}
-          />
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            disabled={times.length <= 1}
-            onClick={() => {
-              const next = times.filter((_, idx) => idx !== i);
-              onChange(next);
-            }}
-          >
-            <X className="h-3.5 w-3.5" />
-          </Button>
-        </div>
-      ))}
-      <Button
-        type="button"
-        variant="outline"
-        size="sm"
-        onClick={() => onChange([...times, "12:00"])}
-      >
-        + Add time
-      </Button>
-    </div>
-  );
+function ordinalSuffix(n: number): string {
+  const s = ["th", "st", "nd", "rd"];
+  const v = n % 100;
+  return s[(v - 20) % 10] || s[v] || s[0];
 }
 
-function DayOfWeekPicker({
-  days,
-  onChange,
-}: {
-  days: number[];
-  onChange: (next: number[]) => void;
-}) {
-  const letters = ["S", "M", "T", "W", "T", "F", "S"];
-  return (
-    <div className="flex gap-1.5 flex-wrap">
-      {letters.map((l, i) => {
-        const active = days.includes(i);
-        return (
-          <Button
-            key={i}
-            type="button"
-            variant={active ? "default" : "outline"}
-            size="sm"
-            className="h-9 w-9 p-0"
-            title={DAY_NAMES_LONG[i]}
-            onClick={() => {
-              const next = active ? days.filter((d) => d !== i) : [...days, i].sort((a, b) => a - b);
-              onChange(next.length === 0 ? [i] : next);
-            }}
-          >
-            {l}
-          </Button>
-        );
-      })}
-    </div>
-  );
-}
-
-function DayOfMonthPicker({
-  domDays,
-  onChange,
-}: {
-  domDays: number[];
-  onChange: (next: number[]) => void;
-}) {
-  return (
-    <div className="grid grid-cols-7 sm:grid-cols-10 gap-1.5">
-      {Array.from({ length: 31 }, (_, i) => i + 1).map((d) => {
-        const active = domDays.includes(d);
-        return (
-          <Button
-            key={d}
-            type="button"
-            variant={active ? "default" : "outline"}
-            size="sm"
-            className="h-8 px-0 text-xs"
-            onClick={() => {
-              const next = active ? domDays.filter((x) => x !== d) : [...domDays, d].sort((a, b) => a - b);
-              onChange(next.length === 0 ? [d] : next);
-            }}
-          >
-            {d}
-          </Button>
-        );
-      })}
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// ScheduleEditor component (rich)
-// ---------------------------------------------------------------------------
+export { describeSchedule };
 
 export function ScheduleEditor({
   value,
@@ -643,247 +153,68 @@ export function ScheduleEditor({
   value: string;
   onChange: (cron: string) => void;
 }) {
-  const [state, setState] = useState<EditorState>(() => parseCronToEditorState(value));
+  const parsed = useMemo(() => parseCronToPreset(value), [value]);
+  const [preset, setPreset] = useState<SchedulePreset>(parsed.preset);
+  const [hour, setHour] = useState(parsed.hour);
+  const [minute, setMinute] = useState(parsed.minute);
+  const [dayOfWeek, setDayOfWeek] = useState(parsed.dayOfWeek);
+  const [dayOfMonth, setDayOfMonth] = useState(parsed.dayOfMonth);
+  const [customCron, setCustomCron] = useState(preset === "custom" ? value : "");
 
-  // Sync when external value changes and isn't the same cron we just emitted.
+  // Sync from external value changes
   useEffect(() => {
-    const currentCron = buildCronFromState(state);
-    if (currentCron !== value) {
-      setState(parseCronToEditorState(value));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const p = parseCronToPreset(value);
+    setPreset(p.preset);
+    setHour(p.hour);
+    setMinute(p.minute);
+    setDayOfWeek(p.dayOfWeek);
+    setDayOfMonth(p.dayOfMonth);
+    if (p.preset === "custom") setCustomCron(value);
   }, [value]);
 
-  const emitState = useCallback(
-    (next: EditorState) => {
-      setState(next);
-      onChange(buildCronFromState(next));
+  const emitChange = useCallback(
+    (p: SchedulePreset, h: string, m: string, dow: string, dom: string, custom: string) => {
+      if (p === "custom") {
+        onChange(custom);
+      } else {
+        onChange(buildCron(p, h, m, dow, dom));
+      }
     },
     [onChange],
   );
 
-  const update = useCallback(
-    <K extends keyof EditorState>(patch: Pick<EditorState, K> | Partial<EditorState>) => {
-      emitState({ ...state, ...patch });
-    },
-    [emitState, state],
-  );
-
-  const { preset } = state;
+  const handlePresetChange = (newPreset: SchedulePreset) => {
+    setPreset(newPreset);
+    if (newPreset === "custom") {
+      setCustomCron(value);
+    } else {
+      emitChange(newPreset, hour, minute, dayOfWeek, dayOfMonth, customCron);
+    }
+  };
 
   return (
-    <div className="space-y-4">
-      {/* Preset */}
-      <div className="space-y-1.5">
-        <Label className="text-xs">Schedule</Label>
-        <Select value={preset} onValueChange={(p) => emitState(changePreset(state, p as EditorPreset))}>
-          <SelectTrigger className="w-full">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {PRESET_OPTIONS.map((p) => (
-              <SelectItem key={p.value} value={p.value}>
-                {p.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
+    <div className="space-y-3">
+      <Select value={preset} onValueChange={(v) => handlePresetChange(v as SchedulePreset)}>
+        <SelectTrigger className="w-full">
+          <SelectValue placeholder="Choose frequency..." />
+        </SelectTrigger>
+        <SelectContent>
+          {PRESETS.map((p) => (
+            <SelectItem key={p.value} value={p.value}>
+              {p.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
 
-      {preset === "every_minute" && (
-        <p className="text-xs text-muted-foreground">
-          No options — runs every minute, around the clock.
-        </p>
-      )}
-
-      {preset === "every_n_minutes" && (
-        <div className="space-y-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs">Run every</Label>
-            <div className="flex items-center gap-2">
-              <Input
-                type="number"
-                min={1}
-                max={59}
-                className="w-24 font-mono"
-                value={state.n}
-                onChange={(e) => update({ n: clamp(+e.target.value || 1, 1, 59) })}
-              />
-              <span className="text-sm text-muted-foreground">minutes</span>
-            </div>
-            <div className="flex flex-wrap gap-1.5 pt-1">
-              {[1, 5, 10, 15, 20, 30].map((v) => (
-                <Badge
-                  key={v}
-                  variant="outline"
-                  className="cursor-pointer hover:bg-accent"
-                  onClick={() => update({ n: v })}
-                >
-                  {v}
-                </Badge>
-              ))}
-            </div>
-          </div>
-          <WindowAndWeekdaysToggles state={state} update={update} />
-        </div>
-      )}
-
-      {preset === "hourly" && (
+      {preset === "custom" ? (
         <div className="space-y-1.5">
-          <Label className="text-xs">Minute past the hour</Label>
           <Input
-            type="number"
-            min={0}
-            max={59}
-            className="w-24 font-mono"
-            value={state.minutePast}
-            onChange={(e) => update({ minutePast: clamp(+e.target.value || 0, 0, 59) })}
-          />
-          <p className="text-xs text-muted-foreground">
-            Runs once an hour at <span className="font-mono">:{pad(state.minutePast)}</span>
-          </p>
-        </div>
-      )}
-
-      {preset === "every_n_hours" && (
-        <div className="space-y-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs">Run every</Label>
-            <div className="flex items-center gap-2">
-              <Input
-                type="number"
-                min={1}
-                max={23}
-                className="w-24 font-mono"
-                value={state.n}
-                onChange={(e) => update({ n: clamp(+e.target.value || 1, 1, 23) })}
-              />
-              <span className="text-sm text-muted-foreground">hours</span>
-            </div>
-            <div className="flex flex-wrap gap-1.5 pt-1">
-              {[1, 2, 3, 4, 6, 8, 12].map((v) => (
-                <Badge
-                  key={v}
-                  variant="outline"
-                  className="cursor-pointer hover:bg-accent"
-                  onClick={() => update({ n: v })}
-                >
-                  {v}
-                </Badge>
-              ))}
-            </div>
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs">Minute past the hour</Label>
-            <Input
-              type="number"
-              min={0}
-              max={59}
-              className="w-24 font-mono"
-              value={state.minutePast}
-              onChange={(e) => update({ minutePast: clamp(+e.target.value || 0, 0, 59) })}
-            />
-          </div>
-          <WeekdaysOnlyToggle state={state} update={update} />
-        </div>
-      )}
-
-      {preset === "daily" && (
-        <div className="space-y-1.5">
-          <Label className="text-xs">Times of day</Label>
-          <TimeList times={state.times} onChange={(times) => update({ times })} />
-          {state.times.length > 1 && (
-            <p className="text-xs text-muted-foreground">
-              All times in one schedule share the same minute. Changing one minute updates them all.
-            </p>
-          )}
-        </div>
-      )}
-
-      {preset === "weekdays" && (
-        <div className="space-y-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs">Days of the week</Label>
-            <DayOfWeekPicker days={state.days} onChange={(days) => update({ days })} />
-            <div className="flex flex-wrap gap-1.5 pt-1">
-              {(
-                [
-                  ["Weekdays", [1, 2, 3, 4, 5]],
-                  ["Weekends", [0, 6]],
-                  ["All days", [0, 1, 2, 3, 4, 5, 6]],
-                  ["Mon · Wed · Fri", [1, 3, 5]],
-                  ["Tue · Thu", [2, 4]],
-                ] as const
-              ).map(([label, days]) => (
-                <Badge
-                  key={label}
-                  variant="outline"
-                  className="cursor-pointer hover:bg-accent"
-                  onClick={() => update({ days: [...days] })}
-                >
-                  {label}
-                </Badge>
-              ))}
-            </div>
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs">Times of day</Label>
-            <TimeList times={state.times} onChange={(times) => update({ times })} />
-            {state.times.length > 1 && (
-              <p className="text-xs text-muted-foreground">
-                All times in one schedule share the same minute. Changing one minute updates them all.
-              </p>
-            )}
-          </div>
-        </div>
-      )}
-
-      {preset === "monthly" && (
-        <div className="space-y-4">
-          <div className="space-y-1.5">
-            <Label className="text-xs">Days of the month</Label>
-            <DayOfMonthPicker domDays={state.domDays} onChange={(domDays) => update({ domDays })} />
-            <div className="flex flex-wrap gap-1.5 pt-1">
-              {(
-                [
-                  ["1st only", [1]],
-                  ["15th only", [15]],
-                  ["1st & 15th", [1, 15]],
-                  ["Last day (28th)", [28]],
-                ] as const
-              ).map(([label, days]) => (
-                <Badge
-                  key={label}
-                  variant="outline"
-                  className="cursor-pointer hover:bg-accent"
-                  onClick={() => update({ domDays: [...days] })}
-                >
-                  {label}
-                </Badge>
-              ))}
-            </div>
-            <p className="text-xs text-muted-foreground">
-              Days 29–31 are skipped in months that don't have them.
-            </p>
-          </div>
-          <div className="space-y-1.5">
-            <Label className="text-xs">Times of day</Label>
-            <TimeList times={state.times} onChange={(times) => update({ times })} />
-            {state.times.length > 1 && (
-              <p className="text-xs text-muted-foreground">
-                All times in one schedule share the same minute. Changing one minute updates them all.
-              </p>
-            )}
-          </div>
-        </div>
-      )}
-
-      {preset === "custom" && (
-        <div className="space-y-1.5">
-          <Label className="text-xs">Cron expression</Label>
-          <Input
-            value={state.custom}
-            onChange={(e) => update({ custom: e.target.value })}
+            value={customCron}
+            onChange={(e) => {
+              setCustomCron(e.target.value);
+              emitChange("custom", hour, minute, dayOfWeek, dayOfMonth, e.target.value);
+            }}
             placeholder="0 10 * * *"
             className="font-mono text-sm"
           />
@@ -891,150 +222,123 @@ export function ScheduleEditor({
             Five fields: minute hour day-of-month month day-of-week
           </p>
         </div>
-      )}
+      ) : (
+        <div className="flex flex-wrap items-center gap-2">
+          {preset !== "every_minute" && preset !== "every_hour" && (
+            <>
+              <span className="text-sm text-muted-foreground">at</span>
+              <Select
+                value={hour}
+                onValueChange={(h) => {
+                  setHour(h);
+                  emitChange(preset, h, minute, dayOfWeek, dayOfMonth, customCron);
+                }}
+              >
+                <SelectTrigger className="w-[120px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {HOURS.map((h) => (
+                    <SelectItem key={h.value} value={h.value}>
+                      {h.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <span className="text-sm text-muted-foreground">:</span>
+              <Select
+                value={minute}
+                onValueChange={(m) => {
+                  setMinute(m);
+                  emitChange(preset, hour, m, dayOfWeek, dayOfMonth, customCron);
+                }}
+              >
+                <SelectTrigger className="w-[80px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {MINUTES.map((m) => (
+                    <SelectItem key={m.value} value={m.value}>
+                      {m.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </>
+          )}
 
-      <Separator />
+          {preset === "every_hour" && (
+            <>
+              <span className="text-sm text-muted-foreground">at minute</span>
+              <Select
+                value={minute}
+                onValueChange={(m) => {
+                  setMinute(m);
+                  emitChange(preset, hour, m, dayOfWeek, dayOfMonth, customCron);
+                }}
+              >
+                <SelectTrigger className="w-[80px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {MINUTES.map((m) => (
+                    <SelectItem key={m.value} value={m.value}>
+                      :{m.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </>
+          )}
 
-      <div className="flex items-start justify-between gap-3 flex-wrap">
-        <div className="text-xs">
-          <span className="text-muted-foreground">Summary — </span>
-          <span className="font-medium">{describeSchedule(buildCronFromState(state))}</span>
+          {preset === "weekly" && (
+            <>
+              <span className="text-sm text-muted-foreground">on</span>
+              <div className="flex gap-1">
+                {DAYS_OF_WEEK.map((d) => (
+                  <Button
+                    key={d.value}
+                    type="button"
+                    variant={dayOfWeek === d.value ? "default" : "outline"}
+                    size="sm"
+                    className="h-7 px-2 text-xs"
+                    onClick={() => {
+                      setDayOfWeek(d.value);
+                      emitChange(preset, hour, minute, d.value, dayOfMonth, customCron);
+                    }}
+                  >
+                    {d.label}
+                  </Button>
+                ))}
+              </div>
+            </>
+          )}
+
+          {preset === "monthly" && (
+            <>
+              <span className="text-sm text-muted-foreground">on day</span>
+              <Select
+                value={dayOfMonth}
+                onValueChange={(dom) => {
+                  setDayOfMonth(dom);
+                  emitChange(preset, hour, minute, dayOfWeek, dom, customCron);
+                }}
+              >
+                <SelectTrigger className="w-[80px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {DAYS_OF_MONTH.map((d) => (
+                    <SelectItem key={d.value} value={d.value}>
+                      {d.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </>
+          )}
         </div>
-        <code className="text-xs font-mono text-muted-foreground">
-          {buildCronFromState(state)}
-        </code>
-      </div>
+      )}
     </div>
   );
 }
-
-function WindowAndWeekdaysToggles({
-  state,
-  update,
-}: {
-  state: EditorState;
-  update: (patch: Partial<EditorState>) => void;
-}) {
-  return (
-    <>
-      <div className="space-y-2">
-        <label className="flex items-center gap-2 cursor-pointer text-sm">
-          <Checkbox
-            checked={state.windowEnabled}
-            onCheckedChange={(checked) => update({ windowEnabled: checked === true })}
-          />
-          <span>Only between certain hours</span>
-        </label>
-        {state.windowEnabled && (
-          <div className="flex items-center gap-2 pl-6 flex-wrap">
-            <Select
-              value={String(state.windowStart)}
-              onValueChange={(v) => {
-                const windowStart = Number(v);
-                update({
-                  windowStart,
-                  windowEnd: Math.max(state.windowEnd, windowStart),
-                });
-              }}
-            >
-              <SelectTrigger className="w-28">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {Array.from({ length: 24 }, (_, i) => (
-                  <SelectItem key={i} value={String(i)}>
-                    {pad(i)}:00
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <span className="text-xs text-muted-foreground">to</span>
-            <Select
-              value={String(state.windowEnd)}
-              onValueChange={(v) => update({ windowEnd: Math.max(Number(v), state.windowStart) })}
-            >
-              <SelectTrigger className="w-28">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {Array.from({ length: 24 }, (_, i) => (
-                  <SelectItem key={i} value={String(i)} disabled={i < state.windowStart}>
-                    {pad(i)}:00
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-        )}
-      </div>
-      <WeekdaysOnlyToggle state={state} update={update} />
-    </>
-  );
-}
-
-function WeekdaysOnlyToggle({
-  state,
-  update,
-}: {
-  state: EditorState;
-  update: (patch: Partial<EditorState>) => void;
-}) {
-  return (
-    <label className="flex items-center gap-2 cursor-pointer text-sm">
-      <Checkbox
-        checked={state.weekdaysOnly}
-        onCheckedChange={(checked) => update({ weekdaysOnly: checked === true })}
-      />
-      <span>Weekdays only (Mon–Fri)</span>
-    </label>
-  );
-}
-
-function changePreset(state: EditorState, next: EditorPreset): EditorState {
-  // Reset ambiguous sub-state when switching presets so we don't carry
-  // over a stale weekdaysOnly / windowEnabled from a sibling preset.
-  switch (next) {
-    case "every_minute":
-      return { ...state, preset: next };
-    case "every_n_minutes":
-      return { ...state, preset: next, n: 15, windowEnabled: false, weekdaysOnly: false };
-    case "hourly":
-      return { ...state, preset: next };
-    case "every_n_hours":
-      return { ...state, preset: next, n: 2, weekdaysOnly: false };
-    case "daily":
-      return { ...state, preset: next, times: state.times.length ? state.times : ["09:00"] };
-    case "weekdays":
-      return {
-        ...state,
-        preset: next,
-        days: state.days.length ? state.days : [1, 2, 3, 4, 5],
-        times: state.times.length ? state.times : ["09:00"],
-      };
-    case "monthly":
-      return {
-        ...state,
-        preset: next,
-        domDays: state.domDays.length ? state.domDays : [1],
-        times: state.times.length ? state.times : ["09:00"],
-      };
-    case "custom":
-      return { ...state, preset: next, custom: state.custom || buildCronFromState(state) };
-  }
-}
-
-function clamp(v: number, lo: number, hi: number): number {
-  return Math.min(Math.max(v, lo), hi);
-}
-
-export function getScheduleEditorPresetForTest(cron: string): EditorPreset {
-  return parseCronToEditorState(cron).preset;
-}
-
-export function hasSingleMinuteAcrossTimesForTest(times: string[]): boolean {
-  return hasSingleMinuteAcrossTimes(times);
-}
-
-export function roundTripCronForTest(cron: string): string {
-  return buildCronFromState(parseCronToEditorState(cron));
-}
diff --git a/ui/src/components/TriggerDialog.tsx b/ui/src/components/TriggerDialog.tsx
deleted file mode 100644
index e9490a5b..00000000
--- a/ui/src/components/TriggerDialog.tsx
+++ /dev/null
@@ -1,268 +0,0 @@
-import { useEffect, useState } from "react";
-import type { RoutineTrigger } from "@paperclipai/shared";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { ToggleSwitch } from "@/components/ui/toggle-switch";
-import { ScheduleEditor } from "./ScheduleEditor";
-
-const triggerKinds = ["schedule", "webhook"] as const;
-const signingModes = ["bearer", "hmac_sha256", "github_hmac", "none"] as const;
-const SIGNING_MODES_WITHOUT_REPLAY_WINDOW = new Set<string>(["github_hmac", "none"]);
-const signingModeDescriptions: Record<string, string> = {
-  bearer: "Expect a shared bearer token in the Authorization header.",
-  hmac_sha256: "Expect an HMAC SHA-256 signature over the request using the shared secret.",
-  github_hmac: "Accept GitHub-style X-Hub-Signature-256 header (HMAC over raw body, no timestamp).",
-  none: "No authentication — the webhook URL itself acts as a shared secret.",
-};
-
-type TriggerKind = (typeof triggerKinds)[number];
-
-export interface TriggerDialogState {
-  label: string;
-  kind: TriggerKind;
-  cronExpression: string;
-  signingMode: string;
-  replayWindowSec: string;
-  enabled: boolean;
-}
-
-interface TriggerDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  /** When editing an existing trigger, pass it here. Null for create. */
-  trigger: RoutineTrigger | null;
-  /** Timezone to use when creating a new schedule trigger (the detail page uses the browser's zone). */
-  fallbackTimezone: string;
-  /** Called when the user submits. For updates `id` is non-null. */
-  onSubmit: (payload: {
-    id: string | null;
-    kind: TriggerKind;
-    // For create: full body. For update: partial patch ready to send.
-    body: Record<string, unknown>;
-  }) => void;
-  submitting?: boolean;
-}
-
-const BLANK: TriggerDialogState = {
-  label: "",
-  kind: "schedule",
-  cronExpression: "0 9 * * 1-5",
-  signingMode: "bearer",
-  replayWindowSec: "300",
-  enabled: true,
-};
-
-function draftFromTrigger(trigger: RoutineTrigger | null): TriggerDialogState {
-  if (!trigger) return { ...BLANK };
-  return {
-    label: trigger.label ?? "",
-    kind: (trigger.kind as TriggerKind) ?? "schedule",
-    cronExpression: trigger.cronExpression ?? "0 9 * * 1-5",
-    signingMode: trigger.signingMode ?? "bearer",
-    replayWindowSec: String(trigger.replayWindowSec ?? 300),
-    enabled: trigger.enabled,
-  };
-}
-
-function parseReplayWindowSec(raw: string): number {
-  const parsed = Number(raw);
-  if (!Number.isFinite(parsed) || parsed < 1) return 300;
-  return Math.trunc(parsed);
-}
-
-export function TriggerDialog({
-  open,
-  onOpenChange,
-  trigger,
-  fallbackTimezone,
-  onSubmit,
-  submitting,
-}: TriggerDialogProps) {
-  const isEdit = !!trigger;
-  const [draft, setDraft] = useState<TriggerDialogState>(() => draftFromTrigger(trigger));
-
-  // Reset the draft whenever the dialog opens with a different trigger.
-  useEffect(() => {
-    if (open) setDraft(draftFromTrigger(trigger));
-  }, [open, trigger]);
-
-  const handleSubmit = () => {
-    const labelTrimmed = draft.label.trim();
-
-    if (isEdit && trigger) {
-      // Build a PATCH body. Match the fields the backend accepts on
-      // PATCH /routine-triggers/:id (see updateRoutineTriggerSchema).
-      const patch: Record<string, unknown> = {
-        label: labelTrimmed || null,
-        enabled: draft.enabled,
-      };
-      if (trigger.kind === "schedule") {
-        patch.cronExpression = draft.cronExpression.trim();
-        patch.timezone = trigger.timezone ?? fallbackTimezone;
-      }
-      if (trigger.kind === "webhook") {
-        patch.signingMode = draft.signingMode;
-        patch.replayWindowSec = parseReplayWindowSec(draft.replayWindowSec);
-      }
-      onSubmit({ id: trigger.id, kind: trigger.kind as TriggerKind, body: patch });
-      return;
-    }
-
-    // Create body: match POST /routines/:id/triggers (createRoutineTriggerSchema).
-    const body: Record<string, unknown> = {
-      kind: draft.kind,
-      label: labelTrimmed || draft.kind,
-    };
-    if (draft.kind === "schedule") {
-      body.cronExpression = draft.cronExpression.trim();
-      body.timezone = fallbackTimezone;
-    }
-    if (draft.kind === "webhook") {
-      body.signingMode = draft.signingMode;
-      body.replayWindowSec = parseReplayWindowSec(draft.replayWindowSec);
-    }
-    onSubmit({ id: null, kind: draft.kind, body });
-  };
-
-  const showWebhookFields = draft.kind === "webhook";
-  const showScheduleFields = draft.kind === "schedule";
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
-        <DialogHeader>
-          <DialogTitle>{isEdit ? "Edit trigger" : "Add trigger"}</DialogTitle>
-          <DialogDescription>
-            Configure when and how this routine fires.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-5 pt-1">
-          <div className="space-y-1.5">
-            <Label htmlFor="trigger-label" className="text-xs">Label</Label>
-            <Input
-              id="trigger-label"
-              placeholder="e.g. Morning digest"
-              value={draft.label}
-              onChange={(e) => setDraft((d) => ({ ...d, label: e.target.value }))}
-            />
-            <p className="text-xs text-muted-foreground">
-              Optional — shown in the trigger list.
-            </p>
-          </div>
-
-          <div className="space-y-1.5">
-            <Label className="text-xs">Kind</Label>
-            <Select
-              value={draft.kind}
-              onValueChange={(kind) => setDraft((d) => ({ ...d, kind: kind as TriggerKind }))}
-              disabled={isEdit}
-            >
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {triggerKinds.map((kind) => (
-                  <SelectItem
-                    key={kind}
-                    value={kind}
-                    disabled={!isEdit && kind === "webhook"}
-                  >
-                    {kind}
-                    {!isEdit && kind === "webhook" ? " — COMING SOON" : ""}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            {isEdit && (
-              <p className="text-xs text-muted-foreground">
-                Kind can't be changed after creation.
-              </p>
-            )}
-          </div>
-
-          {showScheduleFields && (
-            <ScheduleEditor
-              value={draft.cronExpression}
-              onChange={(cronExpression) => setDraft((d) => ({ ...d, cronExpression }))}
-            />
-          )}
-
-          {showWebhookFields && (
-            <div className="grid gap-3 md:grid-cols-2">
-              <div className="space-y-1.5">
-                <Label className="text-xs">Signing mode</Label>
-                <Select
-                  value={draft.signingMode}
-                  onValueChange={(signingMode) => setDraft((d) => ({ ...d, signingMode }))}
-                >
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {signingModes.map((mode) => (
-                      <SelectItem key={mode} value={mode}>
-                        {mode}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                <p className="text-xs text-muted-foreground">
-                  {signingModeDescriptions[draft.signingMode]}
-                </p>
-              </div>
-              {!SIGNING_MODES_WITHOUT_REPLAY_WINDOW.has(draft.signingMode) && (
-                <div className="space-y-1.5">
-                  <Label className="text-xs">Replay window (seconds)</Label>
-                  <Input
-                    type="number"
-                    min={1}
-                    step={1}
-                    value={draft.replayWindowSec}
-                    onChange={(e) =>
-                      setDraft((d) => ({ ...d, replayWindowSec: e.target.value }))
-                    }
-                  />
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-
-        <DialogFooter className="mt-6">
-          {isEdit && (
-            <label className="flex items-center gap-2 cursor-pointer text-sm mr-auto">
-              <ToggleSwitch
-                checked={draft.enabled}
-                onCheckedChange={(enabled) => setDraft((d) => ({ ...d, enabled }))}
-              />
-              <span>{draft.enabled ? "Enabled" : "Paused"}</span>
-            </label>
-          )}
-          <Button variant="outline" size="sm" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button size="sm" onClick={handleSubmit} disabled={submitting}>
-            {submitting ? "Saving…" : isEdit ? "Save changes" : "Add trigger"}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/ui/src/components/TriggerListCard.tsx b/ui/src/components/TriggerListCard.tsx
deleted file mode 100644
index 6ca4b0ed..00000000
--- a/ui/src/components/TriggerListCard.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { Clock3, Pencil, RefreshCw, Trash2, Webhook, Zap } from "lucide-react";
-import type { RoutineTrigger } from "@paperclipai/shared";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { ToggleSwitch } from "@/components/ui/toggle-switch";
-import { describeSchedule } from "./ScheduleEditor";
-import { timeAgo } from "../lib/timeAgo";
-
-interface TriggerListCardProps {
-  trigger: RoutineTrigger;
-  onEdit: () => void;
-  onDelete: () => void;
-  onToggleEnabled: (enabled: boolean) => void;
-  onRotateSecret?: () => void;
-  togglePending?: boolean;
-}
-
-export function TriggerListCard({
-  trigger,
-  onEdit,
-  onDelete,
-  onToggleEnabled,
-  onRotateSecret,
-  togglePending,
-}: TriggerListCardProps) {
-  const isSchedule = trigger.kind === "schedule";
-  const isWebhook = trigger.kind === "webhook";
-  const Icon = isSchedule ? Clock3 : isWebhook ? Webhook : Zap;
-
-  const summary = isSchedule && trigger.cronExpression
-    ? describeSchedule(trigger.cronExpression)
-    : isWebhook
-      ? `Webhook${trigger.publicId ? ` · ${trigger.publicId}` : ""}`
-      : "API trigger";
-
-  const nextRun = isSchedule && trigger.enabled && trigger.nextRunAt
-    ? new Date(trigger.nextRunAt).toLocaleString(undefined, {
-      weekday: "short",
-      day: "numeric",
-      month: "short",
-      hour: "2-digit",
-      minute: "2-digit",
-    })
-    : trigger.enabled ? "—" : "Disabled";
-
-  const lastFired = trigger.lastFiredAt ? timeAgo(trigger.lastFiredAt) : "Never";
-
-  const resultIsError = typeof trigger.lastResult === "string" && /error|fail/i.test(trigger.lastResult);
-
-  return (
-    <div
-      className={`rounded-lg border border-border p-3 transition-colors ${trigger.enabled ? "bg-card" : "bg-muted/40"}`}
-    >
-      <div className="flex items-center gap-2 min-w-0">
-        <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
-          <Icon className="h-3.5 w-3.5" />
-        </div>
-        <span className={`text-sm font-medium truncate flex-1 min-w-0 ${trigger.enabled ? "" : "text-muted-foreground"}`}>
-          {trigger.label || (isSchedule ? "Schedule" : isWebhook ? "Webhook" : "Trigger")}
-        </span>
-        <ToggleSwitch
-          checked={trigger.enabled}
-          onCheckedChange={onToggleEnabled}
-          disabled={togglePending}
-          aria-label={trigger.enabled ? "Disable trigger" : "Enable trigger"}
-        />
-      </div>
-
-      <div className="flex items-center gap-1.5 flex-wrap mt-2">
-        <Badge variant="outline" className="text-[11px]">
-          {trigger.kind}
-        </Badge>
-        {!trigger.enabled && (
-          <Badge variant="secondary" className="text-[11px] text-muted-foreground">
-            paused
-          </Badge>
-        )}
-      </div>
-
-      <div className="mt-2 text-sm break-words">{summary}</div>
-      {isSchedule && trigger.cronExpression && (
-        <div className="text-xs text-muted-foreground mt-1 font-mono break-all">
-          {trigger.cronExpression}
-          {trigger.timezone ? ` · ${trigger.timezone}` : ""}
-        </div>
-      )}
-
-      <dl className="mt-3 space-y-2 text-xs">
-        <div className="flex flex-col gap-0.5 min-w-0">
-          <dt className="text-muted-foreground">Next run</dt>
-          <dd className="break-words">{nextRun}</dd>
-        </div>
-        <div className="flex flex-col gap-0.5 min-w-0">
-          <dt className="text-muted-foreground">Last fired</dt>
-          <dd className="break-words">{lastFired}</dd>
-        </div>
-        <div className="flex flex-col gap-0.5 min-w-0">
-          <dt className="text-muted-foreground">Last result</dt>
-          <dd className="min-w-0">
-            {trigger.lastResult ? (
-              <span
-                className={`inline-block rounded px-1.5 py-0.5 text-[11px] break-words ${
-                  resultIsError
-                    ? "bg-destructive/15 text-destructive"
-                    : "bg-secondary text-secondary-foreground"
-                }`}
-                title={trigger.lastResult}
-              >
-                {trigger.lastResult}
-              </span>
-            ) : (
-              <span className="text-muted-foreground">—</span>
-            )}
-          </dd>
-        </div>
-      </dl>
-
-      <div className="mt-3 flex items-center justify-end gap-1 border-t border-border pt-2">
-        {isWebhook && onRotateSecret && (
-          <Button variant="ghost" size="xs" onClick={onRotateSecret} title="Rotate secret">
-            <RefreshCw className="h-3.5 w-3.5" />
-          </Button>
-        )}
-        <Button variant="ghost" size="xs" onClick={onEdit} title="Edit">
-          <Pencil className="h-3.5 w-3.5" />
-        </Button>
-        <Button
-          variant="ghost"
-          size="xs"
-          onClick={onDelete}
-          title="Delete"
-          className="text-muted-foreground hover:text-destructive"
-        >
-          <Trash2 className="h-3.5 w-3.5" />
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/ui/src/pages/RoutineDetail.tsx b/ui/src/pages/RoutineDetail.tsx
index 076bf518..a8a0e9d0 100644
--- a/ui/src/pages/RoutineDetail.tsx
+++ b/ui/src/pages/RoutineDetail.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Link, useLocation, useNavigate, useParams } from "@/lib/router";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
@@ -9,16 +9,15 @@ import {
   Copy,
   History as HistoryIcon,
   Play,
-  Plus,
+  RefreshCw,
   Repeat,
   Save,
-  SlidersHorizontal,
+  Trash2,
+  Webhook,
+  Zap,
 } from "lucide-react";
 import { ApiError } from "../api/client";
 import { routinesApi, type RoutineTriggerResponse, type RotateRoutineTriggerResponse, type RestoreRoutineRevisionResponse } from "../api/routines";
-import { TriggerListCard } from "../components/TriggerListCard";
-import { TriggerDialog } from "../components/TriggerDialog";
-import { ConfirmDialog } from "../components/ConfirmDialog";
 import {
   RoutineHistoryTab,
   type RoutineHistoryDirtyFieldDescriptor,
@@ -30,10 +29,9 @@ import { projectsApi } from "../api/projects";
 import { accessApi } from "../api/access";
 import { useCompany } from "../context/CompanyContext";
 import { useBreadcrumbs } from "../context/BreadcrumbContext";
-import { usePanel } from "../context/PanelContext";
 import { useToastActions } from "../context/ToastContext";
-import { cn } from "../lib/utils";
 import { queryKeys } from "../lib/queryKeys";
+import { buildRoutineTriggerPatch } from "../lib/routine-trigger-patch";
 import { buildMarkdownMentionOptions } from "../lib/company-members";
 import { timeAgo } from "../lib/timeAgo";
 import { ToggleSwitch } from "@/components/ui/toggle-switch";
@@ -47,6 +45,7 @@ import {
   type RoutineRunDialogSubmitData,
 } from "../components/RoutineRunVariablesDialog";
 import { RoutineVariablesEditor, RoutineVariablesHint } from "../components/RoutineVariablesEditor";
+import { ScheduleEditor, describeSchedule } from "../components/ScheduleEditor";
 import { RunButton } from "../components/AgentActionButtons";
 import { getRecentAssigneeIds, sortAgentsByRecency, trackRecentAssignee } from "../lib/recent-assignees";
 import { getRecentProjectIds, trackRecentProject } from "../lib/recent-projects";
@@ -68,6 +67,8 @@ import type { RoutineDetail as RoutineDetailType, RoutineTrigger, RoutineVariabl
 
 const concurrencyPolicies = ["coalesce_if_active", "always_enqueue", "skip_if_active"];
 const catchUpPolicies = ["skip_missed", "enqueue_missed_with_cap"];
+const triggerKinds = ["schedule", "webhook"];
+const signingModes = ["bearer", "hmac_sha256", "github_hmac", "none"];
 const routineTabs = ["triggers", "runs", "activity", "history"] as const;
 const concurrencyPolicyDescriptions: Record<string, string> = {
   coalesce_if_active: "Keep one follow-up run queued while an active run is still working.",
@@ -78,6 +79,13 @@ const catchUpPolicyDescriptions: Record<string, string> = {
   skip_missed: "Ignore schedule windows that were missed while the routine or scheduler was paused.",
   enqueue_missed_with_cap: "Catch up missed schedule windows in capped batches after recovery.",
 };
+const signingModeDescriptions: Record<string, string> = {
+  bearer: "Expect a shared bearer token in the Authorization header.",
+  hmac_sha256: "Expect an HMAC SHA-256 signature over the request using the shared secret.",
+  github_hmac: "Accept GitHub-style X-Hub-Signature-256 header (HMAC over raw body, no timestamp).",
+  none: "No authentication — the webhook URL itself acts as a shared secret.",
+};
+const SIGNING_MODES_WITHOUT_REPLAY_WINDOW = new Set(["github_hmac", "none"]);
 
 type RoutineTab = (typeof routineTabs)[number];
 
@@ -142,6 +150,128 @@ function buildRoutineMutationPayload(input: {
   };
 }
 
+function TriggerEditor({
+  trigger,
+  onSave,
+  onRotate,
+  onDelete,
+}: {
+  trigger: RoutineTrigger;
+  onSave: (id: string, patch: Record<string, unknown>) => void;
+  onRotate: (id: string) => void;
+  onDelete: (id: string) => void;
+}) {
+  const [draft, setDraft] = useState({
+    label: trigger.label ?? "",
+    cronExpression: trigger.cronExpression ?? "",
+    signingMode: trigger.signingMode ?? "bearer",
+    replayWindowSec: String(trigger.replayWindowSec ?? 300),
+  });
+
+  useEffect(() => {
+    setDraft({
+      label: trigger.label ?? "",
+      cronExpression: trigger.cronExpression ?? "",
+      signingMode: trigger.signingMode ?? "bearer",
+      replayWindowSec: String(trigger.replayWindowSec ?? 300),
+    });
+  }, [trigger]);
+
+  return (
+    <div className="rounded-lg border border-border p-4 space-y-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 text-sm font-medium">
+          {trigger.kind === "schedule" ? <Clock3 className="h-3.5 w-3.5" /> : trigger.kind === "webhook" ? <Webhook className="h-3.5 w-3.5" /> : <Zap className="h-3.5 w-3.5" />}
+          {trigger.label ?? trigger.kind}
+        </div>
+        <span className="text-xs text-muted-foreground">
+          {trigger.kind === "schedule" && trigger.nextRunAt
+            ? `Next: ${new Date(trigger.nextRunAt).toLocaleString()}`
+            : trigger.kind === "webhook"
+              ? "Webhook"
+              : "API"}
+        </span>
+      </div>
+
+      <div className="grid gap-3 md:grid-cols-2">
+        <div className="space-y-1.5">
+          <Label className="text-xs">Label</Label>
+          <Input
+            value={draft.label}
+            onChange={(event) => setDraft((current) => ({ ...current, label: event.target.value }))}
+          />
+        </div>
+        {trigger.kind === "schedule" && (
+          <div className="md:col-span-2 space-y-1.5">
+            <Label className="text-xs">Schedule</Label>
+            <ScheduleEditor
+              value={draft.cronExpression}
+              onChange={(cronExpression) => setDraft((current) => ({ ...current, cronExpression }))}
+            />
+          </div>
+        )}
+        {trigger.kind === "webhook" && (
+          <>
+            <div className="space-y-1.5">
+              <Label className="text-xs">Signing mode</Label>
+              <Select
+                value={draft.signingMode}
+                onValueChange={(signingMode) => setDraft((current) => ({ ...current, signingMode }))}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {signingModes.map((mode) => (
+                    <SelectItem key={mode} value={mode}>{mode}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {!SIGNING_MODES_WITHOUT_REPLAY_WINDOW.has(draft.signingMode) && (
+              <div className="space-y-1.5">
+                <Label className="text-xs">Replay window (seconds)</Label>
+                <Input
+                  value={draft.replayWindowSec}
+                  onChange={(event) => setDraft((current) => ({ ...current, replayWindowSec: event.target.value }))}
+                />
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2">
+        {trigger.lastResult && <span className="text-xs text-muted-foreground">Last: {trigger.lastResult}</span>}
+        <div className="ml-auto flex items-center gap-2">
+          {trigger.kind === "webhook" && (
+            <Button variant="outline" size="sm" onClick={() => onRotate(trigger.id)}>
+              <RefreshCw className="mr-1.5 h-3.5 w-3.5" />
+              Rotate secret
+            </Button>
+          )}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onSave(trigger.id, buildRoutineTriggerPatch(trigger, draft, getLocalTimezone()))}
+          >
+            <Save className="mr-1.5 h-3.5 w-3.5" />
+            Save trigger
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-muted-foreground hover:text-destructive"
+            onClick={() => onDelete(trigger.id)}
+          >
+            <Trash2 className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function RoutineDetail() {
   const { routineId } = useParams<{ routineId: string }>();
   const { selectedCompanyId } = useCompany();
@@ -150,7 +280,6 @@ export function RoutineDetail() {
   const navigate = useNavigate();
   const location = useLocation();
   const { pushToast } = useToastActions();
-  const { openPanel, closePanel, panelVisible, setPanelVisible } = usePanel();
   const hydratedRoutineIdRef = useRef<string | null>(null);
   const titleInputRef = useRef<HTMLTextAreaElement | null>(null);
   const descriptionEditorRef = useRef<MarkdownEditorRef>(null);
@@ -160,10 +289,12 @@ export function RoutineDetail() {
   const [advancedOpen, setAdvancedOpen] = useState(false);
   const [saveConflict, setSaveConflict] = useState(false);
   const [runVariablesOpen, setRunVariablesOpen] = useState(false);
-  const [triggerDialogOpen, setTriggerDialogOpen] = useState(false);
-  const [editingTrigger, setEditingTrigger] = useState<RoutineTrigger | null>(null);
-  const [triggerPendingDelete, setTriggerPendingDelete] = useState<RoutineTrigger | null>(null);
-  const [togglingTriggerId, setTogglingTriggerId] = useState<string | null>(null);
+  const [newTrigger, setNewTrigger] = useState({
+    kind: "schedule",
+    cronExpression: "0 10 * * *",
+    signingMode: "bearer",
+    replayWindowSec: "300",
+  });
   const [editDraft, setEditDraft] = useState<{
     title: string;
     description: string;
@@ -310,7 +441,7 @@ export function RoutineDetail() {
     }
   };
 
-  const setActiveTab = useCallback((value: string) => {
+  const setActiveTab = (value: string) => {
     if (!routineId || !isRoutineTab(value)) return;
     const params = new URLSearchParams(location.search);
     if (value === "triggers") {
@@ -326,7 +457,7 @@ export function RoutineDetail() {
       },
       { replace: true },
     );
-  }, [location.pathname, location.search, navigate, routineId]);
+  };
 
   const saveRoutine = useMutation({
     mutationFn: () => {
@@ -363,11 +494,6 @@ export function RoutineDetail() {
       });
     },
   });
-  const saveRoutineRef = useRef(saveRoutine);
-
-  useEffect(() => {
-    saveRoutineRef.current = saveRoutine;
-  }, [saveRoutine]);
 
   const runRoutine = useMutation({
     mutationFn: (data?: RoutineRunDialogSubmitData) =>
@@ -426,23 +552,24 @@ export function RoutineDetail() {
   });
 
   const createTrigger = useMutation({
-    mutationFn: async (body: Record<string, unknown>): Promise<RoutineTriggerResponse> => {
-      // Auto-label when the caller didn't provide one (e.g. dialog left the
-      // Label field blank). Keeps the existing "schedule-2"-style numbering
-      // behaviour so existing routines keep unique-ish labels.
-      const kind = String(body.kind ?? "schedule");
-      const trimmedLabel = typeof body.label === "string" ? body.label.trim() : "";
-      let finalLabel: string;
-      if (trimmedLabel.length > 0 && trimmedLabel !== kind) {
-        finalLabel = trimmedLabel;
-      } else {
-        const existingOfKind = (routine?.triggers ?? []).filter((t) => t.kind === kind).length;
-        finalLabel = existingOfKind > 0 ? `${kind}-${existingOfKind + 1}` : kind;
-      }
-      return routinesApi.createTrigger(routineId!, { ...body, label: finalLabel });
+    mutationFn: async (): Promise<RoutineTriggerResponse> => {
+      const existingOfKind = (routine?.triggers ?? []).filter((t) => t.kind === newTrigger.kind).length;
+      const autoLabel = existingOfKind > 0 ? `${newTrigger.kind}-${existingOfKind + 1}` : newTrigger.kind;
+      return routinesApi.createTrigger(routineId!, {
+        kind: newTrigger.kind,
+        label: autoLabel,
+        ...(newTrigger.kind === "schedule"
+          ? { cronExpression: newTrigger.cronExpression.trim(), timezone: getLocalTimezone() }
+          : {}),
+        ...(newTrigger.kind === "webhook"
+          ? {
+            signingMode: newTrigger.signingMode,
+            replayWindowSec: Number(newTrigger.replayWindowSec || "300"),
+          }
+          : {}),
+      });
     },
     onSuccess: async (result) => {
-      setTriggerDialogOpen(false);
       if (result.secretMaterial) {
         setSecretMessage({
           title: "Webhook trigger created",
@@ -478,10 +605,9 @@ export function RoutineDetail() {
     onSuccess: async () => {
       pushToast({
         title: "Trigger saved",
+        body: "The routine cadence update was saved.",
         tone: "success",
       });
-      setTriggerDialogOpen(false);
-      setEditingTrigger(null);
       await Promise.all([
         queryClient.invalidateQueries({ queryKey: queryKeys.routines.detail(routineId!) }),
         queryClient.invalidateQueries({ queryKey: queryKeys.routines.list(selectedCompanyId!) }),
@@ -495,9 +621,6 @@ export function RoutineDetail() {
         tone: "error",
       });
     },
-    onSettled: () => {
-      setTogglingTriggerId(null);
-    },
   });
 
   const deleteTrigger = useMutation({
@@ -507,7 +630,6 @@ export function RoutineDetail() {
         title: "Trigger deleted",
         tone: "success",
       });
-      setTriggerPendingDelete(null);
       await Promise.all([
         queryClient.invalidateQueries({ queryKey: queryKeys.routines.detail(routineId!) }),
         queryClient.invalidateQueries({ queryKey: queryKeys.routines.list(selectedCompanyId!) }),
@@ -588,237 +710,6 @@ export function RoutineDetail() {
   const currentAssignee = editDraft.assigneeAgentId ? agentById.get(editDraft.assigneeAgentId) ?? null : null;
   const currentProject = editDraft.projectId ? projectById.get(editDraft.projectId) ?? null : null;
 
-  const activityTabsPanel = useMemo(() => {
-    if (!routine) return null;
-    return (
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-3">
-        <TabsList variant="line" className="w-full justify-start gap-1">
-          <TabsTrigger value="triggers" className="gap-1.5">
-            <Clock3 className="h-3.5 w-3.5" />
-            Triggers
-          </TabsTrigger>
-          <TabsTrigger value="runs" className="gap-1.5">
-            <Play className="h-3.5 w-3.5" />
-            Runs
-            {hasLiveRun && <span className="h-2 w-2 rounded-full bg-blue-500 animate-pulse" />}
-          </TabsTrigger>
-          <TabsTrigger value="activity" className="gap-1.5">
-            <ActivityIcon className="h-3.5 w-3.5" />
-            Activity
-          </TabsTrigger>
-          <TabsTrigger value="history" className="gap-1.5">
-            <HistoryIcon className="h-3.5 w-3.5" />
-            History
-          </TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="triggers" className="space-y-4">
-          <Button
-            size="sm"
-            className="w-full"
-            onClick={() => {
-              setEditingTrigger(null);
-              setTriggerDialogOpen(true);
-            }}
-          >
-            <Plus className="h-3.5 w-3.5 mr-1.5" />
-            Add trigger
-          </Button>
-
-          {routine.triggers.length === 0 ? (
-            <div className="rounded-lg border border-dashed border-border bg-muted/30 p-8 text-center">
-              <p className="text-sm font-medium">No triggers yet</p>
-              <p className="text-xs text-muted-foreground mt-1 mb-4">
-                Triggers fire this routine on a schedule or via webhook.
-              </p>
-              <Button
-                size="sm"
-                onClick={() => {
-                  setEditingTrigger(null);
-                  setTriggerDialogOpen(true);
-                }}
-              >
-                <Plus className="h-3.5 w-3.5 mr-1.5" />
-                Add your first trigger
-              </Button>
-            </div>
-          ) : (
-            <div className="space-y-3">
-              {routine.triggers.map((trigger) => (
-                <TriggerListCard
-                  key={trigger.id}
-                  trigger={trigger}
-                  onEdit={() => {
-                    setEditingTrigger(trigger);
-                    setTriggerDialogOpen(true);
-                  }}
-                  onDelete={() => setTriggerPendingDelete(trigger)}
-                  onToggleEnabled={(enabled) => {
-                    setTogglingTriggerId(trigger.id);
-                    updateTrigger.mutate({ id: trigger.id, patch: { enabled } });
-                  }}
-                  onRotateSecret={
-                    trigger.kind === "webhook"
-                      ? () => rotateTrigger.mutate(trigger.id)
-                      : undefined
-                  }
-                  togglePending={togglingTriggerId === trigger.id}
-                />
-              ))}
-            </div>
-          )}
-        </TabsContent>
-
-        <TabsContent value="runs" className="space-y-4">
-          {hasLiveRun && activeIssueId && routine && (
-            <LiveRunWidget issueId={activeIssueId} companyId={routine.companyId} />
-          )}
-          {(routineRuns ?? []).length === 0 ? (
-            <p className="text-xs text-muted-foreground">No runs yet.</p>
-          ) : (
-            <div className="border border-border rounded-lg divide-y divide-border">
-              {(routineRuns ?? []).map((run) => (
-                <div key={run.id} className="flex flex-col gap-1.5 px-3 py-2 text-sm min-w-0">
-                  <div className="flex items-center gap-1.5 flex-wrap">
-                    <Badge variant="outline" className="text-[11px]">{run.source}</Badge>
-                    <Badge variant={run.status === "failed" ? "destructive" : "secondary"} className="text-[11px]">
-                      {run.status.replaceAll("_", " ")}
-                    </Badge>
-                  </div>
-                  {(run.trigger || run.linkedIssue) && (
-                    <div className="flex items-center gap-1.5 flex-wrap text-xs min-w-0">
-                      {run.trigger && (
-                        <span className="text-muted-foreground truncate">{run.trigger.label ?? run.trigger.kind}</span>
-                      )}
-                      {run.linkedIssue && (
-                        <Link to={`/issues/${run.linkedIssue.identifier ?? run.linkedIssue.id}`} className="text-muted-foreground hover:underline truncate">
-                          {run.linkedIssue.identifier ?? run.linkedIssue.id.slice(0, 8)}
-                        </Link>
-                      )}
-                    </div>
-                  )}
-                  <span className="text-[11px] text-muted-foreground">{timeAgo(run.triggeredAt)}</span>
-                </div>
-              ))}
-            </div>
-          )}
-        </TabsContent>
-
-        <TabsContent value="activity">
-          {(activity ?? []).length === 0 ? (
-            <p className="text-xs text-muted-foreground">No activity yet.</p>
-          ) : (
-            <div className="border border-border rounded-lg divide-y divide-border">
-              {(activity ?? []).map((event) => (
-                <div key={event.id} className="flex flex-col gap-1 px-3 py-2 text-xs min-w-0">
-                  <span className="font-medium text-foreground/90">{event.action.replaceAll(".", " ")}</span>
-                  {event.details && Object.keys(event.details).length > 0 && (
-                    <div className="text-muted-foreground break-words">
-                      {Object.entries(event.details).slice(0, 3).map(([key, value], i) => (
-                        <span key={key}>
-                          {i > 0 && <span className="mx-1 text-border">·</span>}
-                          <span className="text-muted-foreground/70">{key.replaceAll("_", " ")}:</span>{" "}
-                          {formatActivityDetailValue(value)}
-                        </span>
-                      ))}
-                    </div>
-                  )}
-                  <span className="text-muted-foreground/60">{timeAgo(event.createdAt)}</span>
-                </div>
-              ))}
-            </div>
-          )}
-        </TabsContent>
-
-        <TabsContent value="history">
-          <RoutineHistoryTab
-            routine={routine}
-            isEditDirty={isEditDirty}
-            dirtyFields={dirtyFields}
-            onDiscardEdits={() => {
-              if (routineDefaults) setEditDraft(routineDefaults);
-            }}
-            onSaveEdits={() => {
-              const currentSave = saveRoutineRef.current;
-              if (!currentSave.isPending && editDraft.title.trim()) {
-                currentSave.mutate();
-              }
-            }}
-            agents={agentById}
-            projects={projectById}
-            onRestoreSecretMaterials={(response: RestoreRoutineRevisionResponse) => {
-              if (response.secretMaterials.length > 0) {
-                setSecretMessage({
-                  title: response.secretMaterials.length === 1
-                    ? "Webhook trigger restored"
-                    : `${response.secretMaterials.length} webhook triggers restored`,
-                  entries: response.secretMaterials.map((recreated) => ({
-                    webhookUrl: recreated.webhookUrl,
-                    webhookSecret: recreated.webhookSecret,
-                  })),
-                });
-              }
-            }}
-            onRestored={(response: RestoreRoutineRevisionResponse) => {
-              setSaveConflict(false);
-              queryClient.setQueryData<RoutineDetailType | undefined>(
-                queryKeys.routines.detail(routineId!),
-                (prev) =>
-                  prev
-                    ? {
-                        ...prev,
-                        ...response.routine,
-                        latestRevisionId: response.revision.id,
-                        latestRevisionNumber: response.revision.revisionNumber,
-                      }
-                    : prev,
-              );
-              setEditDraft({
-                title: response.routine.title,
-                description: response.routine.description ?? "",
-                projectId: response.routine.projectId ?? "",
-                assigneeAgentId: response.routine.assigneeAgentId ?? "",
-                priority: response.routine.priority,
-                concurrencyPolicy: response.routine.concurrencyPolicy,
-                catchUpPolicy: response.routine.catchUpPolicy,
-                variables: response.routine.variables,
-              });
-              hydratedRoutineIdRef.current = response.routine.id;
-            }}
-          />
-        </TabsContent>
-      </Tabs>
-    );
-  }, [
-    activeIssueId,
-    activeTab,
-    activity,
-    agentById,
-    dirtyFields,
-    editDraft.title,
-    hasLiveRun,
-    isEditDirty,
-    projectById,
-    queryClient,
-    rotateTrigger.mutate,
-    routine,
-    routineDefaults,
-    routineRuns,
-    routineId,
-    setActiveTab,
-    togglingTriggerId,
-    updateTrigger.mutate,
-  ]);
-
-  useEffect(() => {
-    if (!activityTabsPanel) {
-      closePanel();
-      return;
-    }
-    openPanel(activityTabsPanel);
-    return () => closePanel();
-  }, [activityTabsPanel, closePanel, openPanel]);
-
   if (!selectedCompanyId) {
     return <EmptyState icon={Repeat} message="Select a company to view routines." />;
   }
@@ -920,18 +811,6 @@ export function RoutineDetail() {
           <span className={`min-w-[3.75rem] text-sm font-medium ${automationLabelClassName}`}>
             {automationLabel}
           </span>
-          <Button
-            variant="ghost"
-            size="icon-xs"
-            className={cn(
-              "hidden md:inline-flex shrink-0 transition-opacity duration-200",
-              panelVisible ? "opacity-0 pointer-events-none w-0 overflow-hidden" : "opacity-100",
-            )}
-            onClick={() => setPanelVisible(true)}
-            title="Show triggers, runs and activity"
-          >
-            <SlidersHorizontal className="h-4 w-4" />
-          </Button>
         </div>
       </div>
 
@@ -1185,12 +1064,225 @@ export function RoutineDetail() {
         </Button>
       </div>
 
-      <Separator className="md:hidden" />
+      <Separator />
 
-      {/* Tabs (mobile only — desktop renders in the right properties panel) */}
-      <div className="md:hidden">
-        {activityTabsPanel}
-      </div>
+      {/* Tabs */}
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-3">
+        <TabsList variant="line" className="w-full justify-start gap-1">
+          <TabsTrigger value="triggers" className="gap-1.5">
+            <Clock3 className="h-3.5 w-3.5" />
+            Triggers
+          </TabsTrigger>
+          <TabsTrigger value="runs" className="gap-1.5">
+            <Play className="h-3.5 w-3.5" />
+            Runs
+            {hasLiveRun && <span className="h-2 w-2 rounded-full bg-blue-500 animate-pulse" />}
+          </TabsTrigger>
+<TabsTrigger value="activity" className="gap-1.5">
+            <ActivityIcon className="h-3.5 w-3.5" />
+            Activity
+          </TabsTrigger>
+          <TabsTrigger value="history" className="gap-1.5">
+            <HistoryIcon className="h-3.5 w-3.5" />
+            History
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="triggers" className="space-y-4">
+          {/* Add trigger form */}
+          <div className="rounded-lg border border-border p-4 space-y-3">
+            <p className="text-sm font-medium">Add trigger</p>
+            <div className="grid gap-3 md:grid-cols-2">
+              <div className="space-y-1.5">
+                <Label className="text-xs">Kind</Label>
+                <Select value={newTrigger.kind} onValueChange={(kind) => setNewTrigger((current) => ({ ...current, kind }))}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {triggerKinds.map((kind) => (
+                      <SelectItem key={kind} value={kind} disabled={kind === "webhook"}>
+                        {kind}{kind === "webhook" ? " — COMING SOON" : ""}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              {newTrigger.kind === "schedule" && (
+                <div className="md:col-span-2 space-y-1.5">
+                  <Label className="text-xs">Schedule</Label>
+                  <ScheduleEditor
+                    value={newTrigger.cronExpression}
+                    onChange={(cronExpression) => setNewTrigger((current) => ({ ...current, cronExpression }))}
+                  />
+                </div>
+              )}
+              {newTrigger.kind === "webhook" && (
+                <>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs">Signing mode</Label>
+                    <Select value={newTrigger.signingMode} onValueChange={(signingMode) => setNewTrigger((current) => ({ ...current, signingMode }))}>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {signingModes.map((mode) => (
+                          <SelectItem key={mode} value={mode}>{mode}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <p className="text-xs text-muted-foreground">{signingModeDescriptions[newTrigger.signingMode]}</p>
+                  </div>
+                  {!SIGNING_MODES_WITHOUT_REPLAY_WINDOW.has(newTrigger.signingMode) && (
+                    <div className="space-y-1.5">
+                      <Label className="text-xs">Replay window (seconds)</Label>
+                      <Input value={newTrigger.replayWindowSec} onChange={(event) => setNewTrigger((current) => ({ ...current, replayWindowSec: event.target.value }))} />
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+            <div className="flex items-center justify-end">
+              <Button size="sm" onClick={() => createTrigger.mutate()} disabled={createTrigger.isPending}>
+                {createTrigger.isPending ? "Adding..." : "Add trigger"}
+              </Button>
+            </div>
+          </div>
+
+          {/* Existing triggers */}
+          {routine.triggers.length === 0 ? (
+            <p className="text-xs text-muted-foreground">No triggers configured yet.</p>
+          ) : (
+            <div className="space-y-3">
+              {routine.triggers.map((trigger) => (
+                <TriggerEditor
+                  key={trigger.id}
+                  trigger={trigger}
+                  onSave={(id, patch) => updateTrigger.mutate({ id, patch })}
+                  onRotate={(id) => rotateTrigger.mutate(id)}
+                  onDelete={(id) => deleteTrigger.mutate(id)}
+                />
+              ))}
+            </div>
+          )}
+        </TabsContent>
+
+        <TabsContent value="runs" className="space-y-4">
+          {hasLiveRun && activeIssueId && routine && (
+            <LiveRunWidget issueId={activeIssueId} companyId={routine.companyId} />
+          )}
+          {(routineRuns ?? []).length === 0 ? (
+            <p className="text-xs text-muted-foreground">No runs yet.</p>
+          ) : (
+            <div className="border border-border rounded-lg divide-y divide-border">
+              {(routineRuns ?? []).map((run) => (
+                <div key={run.id} className="flex items-center justify-between px-3 py-2 text-sm">
+                  <div className="flex items-center gap-2 min-w-0">
+                    <Badge variant="outline" className="shrink-0">{run.source}</Badge>
+                    <Badge variant={run.status === "failed" ? "destructive" : "secondary"} className="shrink-0">
+                      {run.status.replaceAll("_", " ")}
+                    </Badge>
+                    {run.trigger && (
+                      <span className="text-muted-foreground truncate">{run.trigger.label ?? run.trigger.kind}</span>
+                    )}
+                    {run.linkedIssue && (
+                      <Link to={`/issues/${run.linkedIssue.identifier ?? run.linkedIssue.id}`} className="text-muted-foreground hover:underline truncate">
+                        {run.linkedIssue.identifier ?? run.linkedIssue.id.slice(0, 8)}
+                      </Link>
+                    )}
+                  </div>
+                  <span className="text-xs text-muted-foreground shrink-0 ml-2">{timeAgo(run.triggeredAt)}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </TabsContent>
+
+        <TabsContent value="activity">
+          {(activity ?? []).length === 0 ? (
+            <p className="text-xs text-muted-foreground">No activity yet.</p>
+          ) : (
+            <div className="border border-border rounded-lg divide-y divide-border">
+              {(activity ?? []).map((event) => (
+                <div key={event.id} className="flex items-center justify-between px-3 py-2 text-xs gap-4">
+                  <div className="flex items-center gap-2 min-w-0">
+                    <span className="font-medium text-foreground/90 shrink-0">{event.action.replaceAll(".", " ")}</span>
+                    {event.details && Object.keys(event.details).length > 0 && (
+                      <span className="text-muted-foreground truncate">
+                        {Object.entries(event.details).slice(0, 3).map(([key, value], i) => (
+                          <span key={key}>
+                            {i > 0 && <span className="mx-1 text-border">·</span>}
+                            <span className="text-muted-foreground/70">{key.replaceAll("_", " ")}:</span>{" "}
+                            {formatActivityDetailValue(value)}
+                          </span>
+                        ))}
+                      </span>
+                    )}
+                  </div>
+                  <span className="text-muted-foreground/60 shrink-0">{timeAgo(event.createdAt)}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </TabsContent>
+
+        <TabsContent value="history">
+          <RoutineHistoryTab
+            routine={routine}
+            isEditDirty={isEditDirty}
+            dirtyFields={dirtyFields}
+            onDiscardEdits={() => {
+              if (routineDefaults) setEditDraft(routineDefaults);
+            }}
+            onSaveEdits={() => {
+              if (!saveRoutine.isPending && editDraft.title.trim()) {
+                saveRoutine.mutate();
+              }
+            }}
+            agents={agentById}
+            projects={projectById}
+            onRestoreSecretMaterials={(response: RestoreRoutineRevisionResponse) => {
+              if (response.secretMaterials.length > 0) {
+                setSecretMessage({
+                  title: response.secretMaterials.length === 1
+                    ? "Webhook trigger restored"
+                    : `${response.secretMaterials.length} webhook triggers restored`,
+                  entries: response.secretMaterials.map((recreated) => ({
+                    webhookUrl: recreated.webhookUrl,
+                    webhookSecret: recreated.webhookSecret,
+                  })),
+                });
+              }
+            }}
+            onRestored={(response: RestoreRoutineRevisionResponse) => {
+              setSaveConflict(false);
+              queryClient.setQueryData<RoutineDetailType | undefined>(
+                queryKeys.routines.detail(routineId!),
+                (prev) =>
+                  prev
+                    ? {
+                        ...prev,
+                        ...response.routine,
+                        latestRevisionId: response.revision.id,
+                        latestRevisionNumber: response.revision.revisionNumber,
+                      }
+                    : prev,
+              );
+              setEditDraft({
+                title: response.routine.title,
+                description: response.routine.description ?? "",
+                projectId: response.routine.projectId ?? "",
+                assigneeAgentId: response.routine.assigneeAgentId ?? "",
+                priority: response.routine.priority,
+                concurrencyPolicy: response.routine.concurrencyPolicy,
+                catchUpPolicy: response.routine.catchUpPolicy,
+                variables: response.routine.variables,
+              });
+              hydratedRoutineIdRef.current = response.routine.id;
+            }}
+          />
+        </TabsContent>
+      </Tabs>
 
       <RoutineRunVariablesDialog
         open={runVariablesOpen}
@@ -1205,43 +1297,6 @@ export function RoutineDetail() {
         isPending={runRoutine.isPending}
         onSubmit={(data) => runRoutine.mutate(data)}
       />
-
-      <TriggerDialog
-        open={triggerDialogOpen}
-        onOpenChange={(next) => {
-          setTriggerDialogOpen(next);
-          if (!next) setEditingTrigger(null);
-        }}
-        trigger={editingTrigger}
-        fallbackTimezone={getLocalTimezone()}
-        submitting={createTrigger.isPending || updateTrigger.isPending}
-        onSubmit={({ id, body }) => {
-          if (id) {
-            updateTrigger.mutate({ id, patch: body });
-          } else {
-            createTrigger.mutate(body);
-          }
-        }}
-      />
-
-      <ConfirmDialog
-        open={!!triggerPendingDelete}
-        onOpenChange={(next) => {
-          if (!next) setTriggerPendingDelete(null);
-        }}
-        title="Delete trigger?"
-        description={
-          triggerPendingDelete
-            ? `"${triggerPendingDelete.label ?? triggerPendingDelete.kind}" will be removed. This can't be undone.`
-            : undefined
-        }
-        confirmLabel="Delete"
-        destructive
-        busy={deleteTrigger.isPending}
-        onConfirm={() => {
-          if (triggerPendingDelete) deleteTrigger.mutate(triggerPendingDelete.id);
-        }}
-      />
     </div>
   );
 }