diff --git a/ui/src/components/ConfirmDialog.tsx b/ui/src/components/ConfirmDialog.tsx
new file mode 100644
index 00000000..3a8ed9a5
--- /dev/null
+++ b/ui/src/components/ConfirmDialog.tsx
@@ -0,0 +1,57 @@
+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
new file mode 100644
index 00000000..e0f8853a
--- /dev/null
+++ b/ui/src/components/ScheduleEditor.test.ts
@@ -0,0 +1,166 @@
+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 e5a1bc63..70544247 100644
--- a/ui/src/components/ScheduleEditor.tsx
+++ b/ui/src/components/ScheduleEditor.tsx
@@ -2,46 +2,91 @@ 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 { ChevronDown, ChevronRight } from "lucide-react";
+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";
 
-type SchedulePreset = "every_minute" | "every_hour" | "every_day" | "weekdays" | "weekly" | "monthly" | "custom";
+// ---------------------------------------------------------------------------
+// Public (stable) types & helpers
+// ---------------------------------------------------------------------------
 
-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)" },
+/**
+ * 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 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 pad(n: number): string {
+  return String(n).padStart(2, "0");
+}
 
-const MINUTES = Array.from({ length: 12 }, (_, i) => ({
-  value: String(i * 5),
-  label: String(i * 5).padStart(2, "0"),
-}));
+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 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 ordinal(n: number): string {
+  return `${n}${ordinalSuffix(n)}`;
+}
 
-const DAYS_OF_MONTH = Array.from({ length: 31 }, (_, i) => ({
-  value: String(i + 1),
-  label: String(i + 1),
-}));
+function isSimpleCronField(field: string): boolean {
+  return field === "*" || /^\d+$/.test(field);
+}
 
-function parseCronToPreset(cron: string): {
+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): {
   preset: SchedulePreset;
   hour: string;
   minute: string;
@@ -59,92 +104,537 @@ function parseCronToPreset(cron: string): {
     return { preset: "custom", ...defaults };
   }
 
-  const [min, hr, dom, , dow] = parts;
+  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 };
+  }
 
-  // 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 };
 }
 
-function buildCron(preset: SchedulePreset, hour: string, minute: string, dayOfWeek: string, dayOfMonth: string): string {
-  switch (preset) {
+// ---------------------------------------------------------------------------
+// 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) {
     case "every_minute":
       return "* * * * *";
-    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 "";
-  }
-}
-
-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] ?? ""}`;
-
-  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 "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 "monthly":
-      return `Monthly on the ${dayOfMonth}${ordinalSuffix(Number(dayOfMonth))} at ${timeStr}`;
     case "custom":
-      return cron || "No schedule set";
+      return s.custom;
   }
 }
 
-function ordinalSuffix(n: number): string {
-  const s = ["th", "st", "nd", "rd"];
-  const v = n % 100;
-  return s[(v - 20) % 10] || s[v] || s[0];
+// ---------------------------------------------------------------------------
+// Rich describer that handles multi-value fields
+// ---------------------------------------------------------------------------
+
+/**
+ * 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;
+  }
+  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);
 }
 
-export { describeSchedule };
+// ---------------------------------------------------------------------------
+// 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 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 function ScheduleEditor({
   value,
@@ -153,68 +643,247 @@ export function ScheduleEditor({
   value: string;
   onChange: (cron: string) => void;
 }) {
-  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 : "");
+  const [state, setState] = useState<EditorState>(() => parseCronToEditorState(value));
 
-  // Sync from external value changes
+  // Sync when external value changes and isn't the same cron we just emitted.
   useEffect(() => {
-    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);
+    const currentCron = buildCronFromState(state);
+    if (currentCron !== value) {
+      setState(parseCronToEditorState(value));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
-  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));
-      }
+  const emitState = useCallback(
+    (next: EditorState) => {
+      setState(next);
+      onChange(buildCronFromState(next));
     },
     [onChange],
   );
 
-  const handlePresetChange = (newPreset: SchedulePreset) => {
-    setPreset(newPreset);
-    if (newPreset === "custom") {
-      setCustomCron(value);
-    } else {
-      emitChange(newPreset, hour, minute, dayOfWeek, dayOfMonth, customCron);
-    }
-  };
+  const update = useCallback(
+    <K extends keyof EditorState>(patch: Pick<EditorState, K> | Partial<EditorState>) => {
+      emitState({ ...state, ...patch });
+    },
+    [emitState, state],
+  );
+
+  const { preset } = state;
 
   return (
-    <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>
+    <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>
 
-      {preset === "custom" ? (
+      {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" && (
         <div className="space-y-1.5">
+          <Label className="text-xs">Minute past the hour</Label>
           <Input
-            value={customCron}
-            onChange={(e) => {
-              setCustomCron(e.target.value);
-              emitChange("custom", hour, minute, dayOfWeek, dayOfMonth, e.target.value);
-            }}
+            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 })}
             placeholder="0 10 * * *"
             className="font-mono text-sm"
           />
@@ -222,123 +891,150 @@ 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>
-            </>
-          )}
-
-          {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>
-            </>
-          )}
-
-          {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>
       )}
+
+      <Separator />
+
+      <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>
+        </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
new file mode 100644
index 00000000..e9490a5b
--- /dev/null
+++ b/ui/src/components/TriggerDialog.tsx
@@ -0,0 +1,268 @@
+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
new file mode 100644
index 00000000..6ca4b0ed
--- /dev/null
+++ b/ui/src/components/TriggerListCard.tsx
@@ -0,0 +1,139 @@
+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 a8a0e9d0..076bf518 100644
--- a/ui/src/pages/RoutineDetail.tsx
+++ b/ui/src/pages/RoutineDetail.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Link, useLocation, useNavigate, useParams } from "@/lib/router";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
@@ -9,15 +9,16 @@ import {
   Copy,
   History as HistoryIcon,
   Play,
-  RefreshCw,
+  Plus,
   Repeat,
   Save,
-  Trash2,
-  Webhook,
-  Zap,
+  SlidersHorizontal,
 } 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,
@@ -29,9 +30,10 @@ 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";
@@ -45,7 +47,6 @@ 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";
@@ -67,8 +68,6 @@ 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.",
@@ -79,13 +78,6 @@ 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];
 
@@ -150,128 +142,6 @@ 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();
@@ -280,6 +150,7 @@ 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);
@@ -289,12 +160,10 @@ export function RoutineDetail() {
   const [advancedOpen, setAdvancedOpen] = useState(false);
   const [saveConflict, setSaveConflict] = useState(false);
   const [runVariablesOpen, setRunVariablesOpen] = useState(false);
-  const [newTrigger, setNewTrigger] = useState({
-    kind: "schedule",
-    cronExpression: "0 10 * * *",
-    signingMode: "bearer",
-    replayWindowSec: "300",
-  });
+  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 [editDraft, setEditDraft] = useState<{
     title: string;
     description: string;
@@ -441,7 +310,7 @@ export function RoutineDetail() {
     }
   };
 
-  const setActiveTab = (value: string) => {
+  const setActiveTab = useCallback((value: string) => {
     if (!routineId || !isRoutineTab(value)) return;
     const params = new URLSearchParams(location.search);
     if (value === "triggers") {
@@ -457,7 +326,7 @@ export function RoutineDetail() {
       },
       { replace: true },
     );
-  };
+  }, [location.pathname, location.search, navigate, routineId]);
 
   const saveRoutine = useMutation({
     mutationFn: () => {
@@ -494,6 +363,11 @@ export function RoutineDetail() {
       });
     },
   });
+  const saveRoutineRef = useRef(saveRoutine);
+
+  useEffect(() => {
+    saveRoutineRef.current = saveRoutine;
+  }, [saveRoutine]);
 
   const runRoutine = useMutation({
     mutationFn: (data?: RoutineRunDialogSubmitData) =>
@@ -552,24 +426,23 @@ export function RoutineDetail() {
   });
 
   const createTrigger = useMutation({
-    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"),
-          }
-          : {}),
-      });
+    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 });
     },
     onSuccess: async (result) => {
+      setTriggerDialogOpen(false);
       if (result.secretMaterial) {
         setSecretMessage({
           title: "Webhook trigger created",
@@ -605,9 +478,10 @@ 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!) }),
@@ -621,6 +495,9 @@ export function RoutineDetail() {
         tone: "error",
       });
     },
+    onSettled: () => {
+      setTogglingTriggerId(null);
+    },
   });
 
   const deleteTrigger = useMutation({
@@ -630,6 +507,7 @@ 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!) }),
@@ -710,6 +588,237 @@ 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." />;
   }
@@ -811,6 +920,18 @@ 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>
 
@@ -1064,225 +1185,12 @@ export function RoutineDetail() {
         </Button>
       </div>
 
-      <Separator />
+      <Separator className="md:hidden" />
 
-      {/* 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>
+      {/* Tabs (mobile only — desktop renders in the right properties panel) */}
+      <div className="md:hidden">
+        {activityTabsPanel}
+      </div>
 
       <RoutineRunVariablesDialog
         open={runVariablesOpen}
@@ -1297,6 +1205,43 @@ 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>
   );
 }