palmier 0.7.8 → 0.7.9

package/palmier-server/pwa/src/components/TaskForm.tsx

@@ -1,16 +1,24 @@
-import { useState, useCallback, useRef } from "react";
+import { useEffect, useState, useCallback, useRef } from "react";
 import { useHostConnection } from "../contexts/HostConnectionContext";
 import PlanDialog from "./PlanDialog";
 import { useBackClose } from "../hooks/useBackClose";
-import type { AgentInfo, Task, Trigger } from "../types";
+import type { AgentInfo, Task } from "../types";
+
+type ScheduleType = "crons" | "specific_times";
 
 
 const DAYS_OF_WEEK = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 
-type Schedule = "once" | "hourly" | "daily" | "weekly" | "monthly";
+type ScheduleSlot = "specific_times" | "hourly" | "daily" | "weekly" | "monthly";
+type ScheduleMode = "ondemand" | "command" | ScheduleSlot;
+
+const SCHEDULE_SLOTS: readonly ScheduleMode[] = ["specific_times", "hourly", "daily", "weekly", "monthly"];
+function isScheduleSlot(mode: ScheduleMode): mode is ScheduleSlot {
+  return (SCHEDULE_SLOTS as readonly string[]).includes(mode);
+}
 
 interface TriggerRow {
-  schedule: Schedule;
+  schedule: ScheduleSlot;
   time: string;
   dayOfWeek: string;
   dayOfMonth: string;
@@ -18,7 +26,7 @@ interface TriggerRow {
   onceTime: string;
 }
 
-function newRow(schedule: Schedule = "daily"): TriggerRow {
+function newRow(schedule: ScheduleSlot = "daily"): TriggerRow {
   return { schedule, time: "00:00", dayOfWeek: "1", dayOfMonth: "1", onceDate: "", onceTime: "00:00" };
 }
 
@@ -33,12 +41,12 @@ function cronToRow(cron: string): TriggerRow {
   return { ...newRow("daily"), time };
 }
 
-function triggerToRow(t: Trigger): TriggerRow {
-  if (t.type === "once") {
-    const [datePart, timePart] = t.value.split("T");
-    return { ...newRow("once"), onceDate: datePart ?? "", onceTime: (timePart ?? "09:00").slice(0, 5) };
+function valueToRow(scheduleType: ScheduleType, value: string): TriggerRow {
+  if (scheduleType === "specific_times") {
+    const [datePart, timePart] = value.split("T");
+    return { ...newRow("specific_times"), onceDate: datePart ?? "", onceTime: (timePart ?? "09:00").slice(0, 5) };
   }
-  return cronToRow(t.value);
+  return cronToRow(value);
 }
 
 function rowToCron(row: TriggerRow): string {
@@ -52,11 +60,23 @@ function rowToCron(row: TriggerRow): string {
   }
 }
 
-function rowToTrigger(row: TriggerRow): Trigger | null {
-  if (row.schedule === "once") {
-    return row.onceDate ? { type: "once", value: `${row.onceDate}T${row.onceTime}` } : null;
+function rowToValue(row: TriggerRow): string | null {
+  if (row.schedule === "specific_times") {
+    return row.onceDate ? `${row.onceDate}T${row.onceTime}` : null;
   }
-  return { type: "cron", value: rowToCron(row) };
+  return rowToCron(row);
+}
+
+function modeToScheduleType(mode: ScheduleSlot): ScheduleType {
+  return mode === "specific_times" ? "specific_times" : "crons";
+}
+
+function initialScheduleMode(initial?: Task): ScheduleMode {
+  if (initial?.command) return "command";
+  const type = initial?.schedule_type;
+  const first = initial?.schedule_values?.[0];
+  if (!type || !first) return "ondemand";
+  return valueToRow(type, first).schedule;
 }
 
 interface TaskFormProps {
@@ -64,13 +84,13 @@ interface TaskFormProps {
   agents: AgentInfo[];
   hostPlatform?: string;
   onSaved(task: Task): void;
+  onRun(taskId: string, runId?: string): void;
   onCancel(): void;
 }
 
-export default function TaskForm({ initial, agents, hostPlatform, onSaved, onCancel }: TaskFormProps) {
+export default function TaskForm({ initial, agents, hostPlatform, onSaved, onRun, onCancel }: TaskFormProps) {
   const { request } = useHostConnection();
 
-  // Default agent: last used from localStorage, or first available
   const defaultAgent = () => {
     const lastAgent = localStorage.getItem("palmier:lastAgent");
     const agentKeys = agents.map((a) => a.key);
@@ -78,92 +98,112 @@ export default function TaskForm({ initial, agents, hostPlatform, onSaved, onCan
     return agents[0]?.key ?? "";
   };
 
-  // Editable prompt
   const [userPrompt, setUserPrompt] = useState(initial?.user_prompt ?? "");
   const [agent, setAgent] = useState(initial?.agent ?? defaultAgent());
 
-  // Show permissions link for existing tasks that have granted permissions
   const hasPermissions = !!initial?.permissions?.length;
 
-  // Plan dialog (view-only for existing tasks)
   const [planDialogOpen, setPlanDialogOpen] = useState(false);
   const closePlanDialog = useCallback(() => setPlanDialogOpen(false), []);
   useBackClose(planDialogOpen, closePlanDialog);
   const [error, setError] = useState<string | null>(null);
 
-  // Form state
+  const [scheduleMode, setScheduleMode] = useState<ScheduleMode>(() => initialScheduleMode(initial));
   const [triggerRows, setTriggerRows] = useState<TriggerRow[]>(
-    () => (initial?.triggers ?? []).map(triggerToRow)
-  );
-  const [schedule, setSchedule] = useState<Schedule>(
-    () => (initial?.triggers ?? []).map(triggerToRow)[0]?.schedule ?? "daily"
-  );
-  const [triggersEnabled, setTriggersEnabled] = useState(
-    initial?.triggers_enabled ?? false
+    () => {
+      const type = initial?.schedule_type;
+      const values = initial?.schedule_values;
+      if (!type || !values) return [];
+      return values.map((v) => valueToRow(type, v));
+    }
   );
   const [requiresConfirmation, setRequiresConfirmation] = useState(
     initial?.requires_confirmation ?? false
   );
   const [yoloMode, setYoloMode] = useState(initial?.yolo_mode ?? false);
   const [foregroundMode, setForegroundMode] = useState(initial?.foreground_mode ?? false);
+  const [command, setCommand] = useState(initial?.command ?? "");
   const [saving, setSaving] = useState(false);
 
-  // Command-triggered mode
-  const [commandEnabled, setCommandEnabled] = useState(!!initial?.command);
-  const [command, setCommand] = useState(initial?.command ?? "");
   const commandInputRef = useRef<HTMLInputElement>(null);
 
+  const modeIsScheduled = isScheduleSlot(scheduleMode);
+  const modeIsCommand = scheduleMode === "command";
+
+  const selectedAgent = agents.find((a) => a.key === agent);
+  const agentSupportsYolo = !!selectedAgent?.supportsYolo;
+
+  // Force-disable yolo when the selected agent doesn't support it.
+  useEffect(() => {
+    if (!agentSupportsYolo && yoloMode) setYoloMode(false);
+  }, [agentSupportsYolo, yoloMode]);
+
   const isEdit = !!initial;
+  const initialMode = initialScheduleMode(initial);
   const isDirty = !isEdit
     || userPrompt !== (initial?.user_prompt ?? "")
     || agent !== (initial?.agent ?? "")
-    || triggersEnabled !== (initial?.triggers_enabled ?? true)
+    || scheduleMode !== initialMode
     || requiresConfirmation !== (initial?.requires_confirmation ?? false)
     || yoloMode !== (initial?.yolo_mode ?? false)
     || foregroundMode !== (initial?.foreground_mode ?? false)
-    || commandEnabled !== !!initial?.command
-    || (commandEnabled && command !== (initial?.command ?? ""))
-    || JSON.stringify(collectTriggers()) !== JSON.stringify(initial?.triggers ?? []);
-  const hasInvalidTrigger = triggersEnabled && triggerRows.some((r) =>
-    r.schedule === "once" && (!r.onceDate || new Date(`${r.onceDate}T${r.onceTime}`) <= new Date())
+    || (modeIsCommand && command !== (initial?.command ?? ""))
+    || (modeIsScheduled && (
+      JSON.stringify(collectScheduleValues()) !== JSON.stringify(initial?.schedule_values ?? [])
+      || modeToScheduleType(scheduleMode as ScheduleSlot) !== (initial?.schedule_type ?? undefined)
+    ));
+
+  const hasInvalidTrigger = modeIsScheduled && triggerRows.some((r) =>
+    r.schedule === "specific_times" && (!r.onceDate || new Date(`${r.onceDate}T${r.onceTime}`) <= new Date())
   );
-  const canSave = isDirty && !!userPrompt.trim() && !hasInvalidTrigger && (!commandEnabled || !!command.trim());
+  const canSave = isDirty
+    && !!userPrompt.trim()
+    && !hasInvalidTrigger
+    && (!modeIsCommand || !!command.trim())
+    && (!modeIsScheduled || triggerRows.length > 0);
 
   function updateRow(index: number, patch: Partial<TriggerRow>) {
     setTriggerRows((prev) => prev.map((r, i) => (i === index ? { ...r, ...patch } : r)));
   }
 
   function removeRow(index: number) {
-    setTriggerRows((prev) => {
-      const next = prev.filter((_, i) => i !== index);
-      if (next.length === 0) {
-        setTriggersEnabled(false);
-        setRequiresConfirmation(false);
-      }
-      return next;
-    });
+    setTriggerRows((prev) => prev.filter((_, i) => i !== index));
   }
 
   function addRow() {
-    setTriggerRows((prev) => [...prev, newRow(schedule)]);
+    if (!isScheduleSlot(scheduleMode)) return;
+    setTriggerRows((prev) => [...prev, newRow(scheduleMode)]);
   }
 
-  function changeSchedule(s: Schedule) {
-    setSchedule(s);
-    setTriggerRows([newRow(s)]);
+  function changeScheduleMode(next: ScheduleMode) {
+    setScheduleMode(next);
+    if (isScheduleSlot(next)) {
+      setTriggerRows([newRow(next)]);
+      if (next !== "specific_times" && next !== "hourly" && next !== "daily" && next !== "weekly" && next !== "monthly") {
+        // unreachable — appeases exhaustiveness
+      }
+    } else {
+      setTriggerRows([]);
+      setRequiresConfirmation(false);
+    }
+    if (next === "command") {
+      setTimeout(() => commandInputRef.current?.focus(), 0);
+    } else {
+      setCommand("");
+    }
   }
 
-  function collectTriggers(): Trigger[] {
+  function collectScheduleValues(): string[] {
     return triggerRows.flatMap((row) => {
-      const t = rowToTrigger(row);
-      return t ? [t] : [];
+      const v = rowToValue(row);
+      return v ? [v] : [];
     });
   }
 
   function confirmYolo(): boolean {
     if (!yoloMode) return true;
     return confirm(
-      "Yolo mode is enabled. The agent will auto-approve all tool calls — it can read, write, delete files, run arbitrary commands, and access the network without asking for permission.\n\nAre you sure you want to continue?"
+      "Yolo mode is enabled. The agent will auto-approve all tool calls \u2014 it can read, write, delete files, run arbitrary commands, and access the network without asking for permission.\n\nAre you sure you want to continue?"
     );
   }
 
@@ -171,47 +211,61 @@ export default function TaskForm({ initial, agents, hostPlatform, onSaved, onCan
     setSaving(true);
     setError(null);
     try {
-      const method = isEdit ? "task.update" : "task.create";
+      const scheduleValues = modeIsScheduled ? collectScheduleValues() : [];
+      const hasSchedule = scheduleValues.length > 0;
       const payload: Record<string, unknown> = {
         user_prompt: userPrompt,
         agent,
-        triggers: collectTriggers(),
-        triggers_enabled: triggersEnabled,
-        requires_confirmation: requiresConfirmation,
+        schedule_type: hasSchedule ? modeToScheduleType(scheduleMode as ScheduleSlot) : null,
+        schedule_values: hasSchedule ? scheduleValues : null,
+        schedule_enabled: hasSchedule,
+        requires_confirmation: hasSchedule ? requiresConfirmation : false,
         yolo_mode: yoloMode,
         foreground_mode: foregroundMode,
-        command: commandEnabled ? command : "",
+        command: modeIsCommand ? command : "",
       };
       if (isEdit) {
         payload.id = initial!.id;
       }
-      // Name generation happens server-side, allow up to 45s
+      const method = isEdit ? "task.update" : "task.create";
       const result = await request<Task & { error?: string }>(method, payload, { timeout: 45000 });
       if (result.error) {
         setError(result.error);
-        return null;
+        return;
       }
-      if (!isEdit) {
-        localStorage.setItem("palmier:lastAgent", agent);
+      if (!isEdit) localStorage.setItem("palmier:lastAgent", agent);
+
+      // Reactive on create: save the task, then start it and navigate to the run.
+      if (modeIsCommand && !isEdit) {
+        onSaved(result);
+        try {
+          const runResult = await request<{ run_id?: string; error?: string }>("task.run", { id: result.id });
+          if (runResult.run_id) onRun(result.id, runResult.run_id);
+          else if (!runResult.error) onRun(result.id);
+        } catch { /* task is saved; leave the user on the list if start fails */ }
+        return;
       }
+
       onSaved(result);
-      return result;
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
-      return null;
     } finally {
       setSaving(false);
     }
   }
 
+  const saveButtonLabel = (() => {
+    if (isEdit) return "Save";
+    if (modeIsCommand) return "Run";
+    if (modeIsScheduled) return "Schedule";
+    return "Save";
+  })();
 
   return (
     <div className="task-form-overlay">
       <div className="task-form">
         {planDialogOpen ? (
-          <PlanDialog
-            permissions={initial?.permissions}
-          />
+          <PlanDialog permissions={initial?.permissions} />
         ) : (<>
         <div className="task-form-header">
           <h2>{initial ? "Edit Task" : "New Task"}</h2>
@@ -224,7 +278,7 @@ export default function TaskForm({ initial, agents, hostPlatform, onSaved, onCan
           className="form-textarea"
           value={userPrompt}
           onChange={(e) => setUserPrompt(e.target.value)}
-          placeholder={commandEnabled
+          placeholder={modeIsCommand
             ? "If the input email contains an event, create a calendar entry for it."
             : "Research today's top AI news and write a summary."}
           rows={4}
@@ -232,45 +286,76 @@ export default function TaskForm({ initial, agents, hostPlatform, onSaved, onCan
         />
 
         <div className="plan-actions">
-          {hasPermissions && (
-            <button
-              className="btn btn-link"
-              onClick={() => setPlanDialogOpen(true)}
-            >
-              Granted Permissions
-            </button>
-          )}
-          <div className="agent-picker-section-inline" style={{ marginLeft: "auto" }}>
+          <div className="agent-picker-section-inline">
             <span className="agent-picker-label">Run with</span>
             <select
               className="form-select form-select-sm"
               value={agent}
               onChange={(e) => setAgent(e.target.value)}
+              disabled={saving}
             >
               {agents.map((a) => (
                 <option key={a.key} value={a.key}>{a.label}</option>
               ))}
             </select>
           </div>
+          {agentSupportsYolo && (
+            <label className="yolo-inline" style={{ marginLeft: "auto" }}>
+              <input
+                type="checkbox"
+                checked={yoloMode}
+                onChange={(e) => setYoloMode(e.target.checked)}
+                disabled={saving}
+              />
+              Yolo
+            </label>
+          )}
+          {agentSupportsYolo && yoloMode && (
+            <p className="yolo-warning">
+              The agent will auto-approve all tool calls without asking for permission.
+            </p>
+          )}
+          {hasPermissions && (
+            <div className="granted-permissions-row">
+              <button className="btn btn-link" onClick={() => setPlanDialogOpen(true)}>
+                Granted Permissions
+              </button>
+            </div>
+          )}
         </div>
 
         <div className="toggles-group">
-        <div className={`command-section${commandEnabled ? " command-section-active" : ""}`}>
+        {hostPlatform === "win32" && (
           <label className="toggle-label">
             <input
               type="checkbox"
-              checked={commandEnabled}
-              onChange={(e) => {
-                setCommandEnabled(e.target.checked);
-                if (!e.target.checked) setCommand("");
-                else setTimeout(() => commandInputRef.current?.focus(), 0);
-              }}
+              checked={foregroundMode}
+              onChange={(e) => setForegroundMode(e.target.checked)}
               disabled={saving}
             />
-            Reactive
+            Run in the foreground (host must login to Windows)
           </label>
-          {commandEnabled && (
-            <>
+        )}
+
+        <div className="schedule-section">
+          <h3 className="schedule-section-title">Schedule</h3>
+          <select
+            className="form-select"
+            value={scheduleMode}
+            onChange={(e) => changeScheduleMode(e.target.value as ScheduleMode)}
+            disabled={saving}
+          >
+            <option value="ondemand">On Demand</option>
+            <option value="specific_times">Specific Times</option>
+            <option value="hourly">Hourly</option>
+            <option value="daily">Daily</option>
+            <option value="weekly">Weekly</option>
+            <option value="monthly">Monthly</option>
+            <option value="command">Command-triggered</option>
+          </select>
+
+          {modeIsCommand && (
+            <div className="schedule-reactive">
               <p className="command-help-text">
                 Runs a command and invokes the task for each line of output.
                 Use &ldquo;the input&rdquo; in your task description to reference each line.
@@ -284,229 +369,125 @@ export default function TaskForm({ initial, agents, hostPlatform, onSaved, onCan
                 placeholder="gws gmail +watch --project my-project"
                 disabled={saving}
               />
-            </>
+            </div>
           )}
-        </div>
 
-        {hostPlatform === "win32" && (
-          <label className="toggle-label">
-            <input
-              type="checkbox"
-              checked={foregroundMode}
-              onChange={(e) => setForegroundMode(e.target.checked)}
-              disabled={saving}
-            />
-            Run in the foreground (host must login to Windows)
-          </label>
-        )}
-
-        <label className="toggle-label">
-          <input
-            type="checkbox"
-            checked={yoloMode}
-            onChange={(e) => setYoloMode(e.target.checked)}
-            disabled={saving}
-          />
-          Yolo mode
-        </label>
-        {yoloMode && (
-          <p className="command-help-text">
-            The agent will auto-approve all tool calls without asking for permission.
-          </p>
-        )}
-
-        <div className="triggers-section">
-          <label className="toggle-label">
-            <input
-              type="checkbox"
-              checked={triggersEnabled}
-              onChange={(e) => {
-                if (e.target.checked) {
-                  setTriggersEnabled(true);
-                  if (triggerRows.length === 0) addRow();
-                } else {
-                  setTriggersEnabled(false);
-                  setRequiresConfirmation(false);
-                  setTriggerRows((prev) => {
-                    const cleaned = prev.filter((r) => {
-                      if (r.schedule === "once") return r.onceDate && new Date(`${r.onceDate}T${r.onceTime}`) > new Date();
-                      return true;
-                    });
-                    // Remove single untouched default row so check/uncheck round-trips cleanly
-                    if (cleaned.length === 1 && cleaned[0].schedule === "daily" && cleaned[0].time === "00:00") return [];
-                    return cleaned;
-                  });
-                }
-              }}
-              disabled={saving}
-            />
-            Enable schedule
-          </label>
-          <div className={`triggers-section-body${triggersEnabled ? "" : " disabled"}`}>
-            {triggerRows.length > 0 && (
-              <select
-                className="form-select"
-                value={schedule}
-                disabled={!triggersEnabled}
-                onChange={(e) => changeSchedule(e.target.value as Schedule)}
-              >
-                <option value="once">Specific Time</option>
-                <option value="hourly">Hourly</option>
-                <option value="daily">Daily</option>
-                <option value="weekly">Weekly</option>
-                <option value="monthly">Monthly</option>
-              </select>
-            )}
-            {schedule !== "hourly" && triggerRows.map((row, i) => (
-              <div key={i} className="trigger-row-card">
-                <div className="trigger-row-content">
-                  {schedule === "daily" && (
-                    <input
-                      className="form-input"
-                      type="time"
-                      value={row.time}
-                      disabled={!triggersEnabled}
-                      onChange={(e) => updateRow(i, { time: e.target.value })}
-                    />
-                  )}
-                  {schedule === "weekly" && (
-                    <div className="trigger-row-top">
-                      <select
-                        className="form-select"
-                        value={row.dayOfWeek}
-                        disabled={!triggersEnabled}
-                        onChange={(e) => updateRow(i, { dayOfWeek: e.target.value })}
-                      >
-                        {DAYS_OF_WEEK.map((d, di) => (
-                          <option key={di} value={String(di)}>{d}</option>
-                        ))}
-                      </select>
-                      <input
-                        className="form-input"
-                        type="time"
-                        value={row.time}
-                        disabled={!triggersEnabled}
-                        onChange={(e) => updateRow(i, { time: e.target.value })}
-                      />
-                    </div>
-                  )}
-                  {schedule === "monthly" && (
-                    <div className="trigger-row-top">
-                      <select
-                        className="form-select"
-                        value={row.dayOfMonth}
-                        disabled={!triggersEnabled}
-                        onChange={(e) => updateRow(i, { dayOfMonth: e.target.value })}
-                      >
-                        {Array.from({ length: 28 }, (_, n) => n + 1).map((d) => (
-                          <option key={d} value={String(d)}>Day {d}</option>
-                        ))}
-                      </select>
+          {modeIsScheduled && scheduleMode !== "hourly" && (
+            <>
+              {triggerRows.map((row, i) => (
+                <div key={i} className="trigger-row-card">
+                  <div className="trigger-row-content">
+                    {scheduleMode === "daily" && (
                       <input
                         className="form-input"
                         type="time"
                         value={row.time}
-                        disabled={!triggersEnabled}
                         onChange={(e) => updateRow(i, { time: e.target.value })}
                       />
-                    </div>
-                  )}
-                  {schedule === "once" && (
-                    <div className="trigger-row-top">
-                      <input
-                        className="form-input"
-                        type="date"
-                        value={row.onceDate}
-                        min={new Date().toISOString().split("T")[0]}
-                        disabled={!triggersEnabled}
-                        onChange={(e) => updateRow(i, { onceDate: e.target.value })}
-                      />
-                      <input
-                        className="form-input"
-                        type="time"
-                        value={row.onceTime}
-                        min={row.onceDate === new Date().toISOString().split("T")[0]
-                          ? new Date().toTimeString().slice(0, 5)
-                          : undefined}
-                        disabled={!triggersEnabled}
-                        onChange={(e) => updateRow(i, { onceTime: e.target.value })}
-                      />
-                    </div>
+                    )}
+                    {scheduleMode === "weekly" && (
+                      <div className="trigger-row-top">
+                        <select
+                          className="form-select"
+                          value={row.dayOfWeek}
+                          onChange={(e) => updateRow(i, { dayOfWeek: e.target.value })}
+                        >
+                          {DAYS_OF_WEEK.map((d, di) => (
+                            <option key={di} value={String(di)}>{d}</option>
+                          ))}
+                        </select>
+                        <input
+                          className="form-input"
+                          type="time"
+                          value={row.time}
+                          onChange={(e) => updateRow(i, { time: e.target.value })}
+                        />
+                      </div>
+                    )}
+                    {scheduleMode === "monthly" && (
+                      <div className="trigger-row-top">
+                        <select
+                          className="form-select"
+                          value={row.dayOfMonth}
+                          onChange={(e) => updateRow(i, { dayOfMonth: e.target.value })}
+                        >
+                          {Array.from({ length: 28 }, (_, n) => n + 1).map((d) => (
+                            <option key={d} value={String(d)}>Day {d}</option>
+                          ))}
+                        </select>
+                        <input
+                          className="form-input"
+                          type="time"
+                          value={row.time}
+                          onChange={(e) => updateRow(i, { time: e.target.value })}
+                        />
+                      </div>
+                    )}
+                    {scheduleMode === "specific_times" && (
+                      <div className="trigger-row-top">
+                        <input
+                          className="form-input"
+                          type="date"
+                          value={row.onceDate}
+                          min={new Date().toISOString().split("T")[0]}
+                          onChange={(e) => updateRow(i, { onceDate: e.target.value })}
+                        />
+                        <input
+                          className="form-input"
+                          type="time"
+                          value={row.onceTime}
+                          min={row.onceDate === new Date().toISOString().split("T")[0]
+                            ? new Date().toTimeString().slice(0, 5)
+                            : undefined}
+                          onChange={(e) => updateRow(i, { onceTime: e.target.value })}
+                        />
+                      </div>
+                    )}
+                  </div>
+                  {triggerRows.length > 1 && (
+                    <button
+                      className="trigger-remove-btn"
+                      onClick={() => removeRow(i)}
+                      title="Remove trigger"
+                    >
+                      &times;
+                    </button>
                   )}
                 </div>
-                {triggerRows.length > 1 && (
-                  <button
-                    className="trigger-remove-btn"
-                    onClick={() => removeRow(i)}
-                    disabled={!triggersEnabled}
-                    title="Remove trigger"
-                  >
-                    &times;
-                  </button>
-                )}
-              </div>
-            ))}
-            {triggerRows.length > 0 && schedule !== "hourly" && (
-              <button className="trigger-add-btn" onClick={addRow} disabled={!triggersEnabled}>
+              ))}
+              <button className="trigger-add-btn" onClick={addRow}>
                 + Add
               </button>
-            )}
-          </div>
+            </>
+          )}
+
+          {modeIsScheduled && (
+            <label className="toggle-label">
+              <input
+                type="checkbox"
+                checked={requiresConfirmation}
+                onChange={(e) => setRequiresConfirmation(e.target.checked)}
+                disabled={saving}
+              />
+              Confirm before each run
+            </label>
+          )}
         </div>
-        {triggersEnabled && triggerRows.length > 0 && (
-          <label className="toggle-label">
-            <input
-              type="checkbox"
-              checked={requiresConfirmation}
-              onChange={(e) => setRequiresConfirmation(e.target.checked)}
-              disabled={saving}
-            />
-            Confirm before each run
-          </label>
-        )}
         </div>
 
-        {!yoloMode && (() => {
-          const selected = agents.find((a) => a.key === agent);
-          return selected?.supportsPermissions === false && (
-            <div className="form-warning">Palmier does not support runtime permission granting for {selected.label}. The task may fail if required permissions are not pre-configured.</div>
-          );
-        })()}
+        {!yoloMode && selectedAgent && !selectedAgent.supportsPermissions && (
+          <div className="form-warning">Palmier does not support runtime permission granting for {selectedAgent.label}. The task may fail if required permissions are not pre-configured.</div>
+        )}
 
         <div className="form-actions">
-          {(() => {
-            const hasSchedule = triggerRows.length > 0;
-            const label = hasSchedule ? "Schedule" : "Save";
-            if (!isEdit) {
-              return (
-                <button
-                  className="btn btn-primary"
-                  onClick={() => confirmYolo() && handleSave()}
-                  disabled={!canSave || saving}
-                >
-                  {saving && <span className="btn-spinner" />}
-                  {label}
-                </button>
-              );
-            }
-            if (isDirty) {
-              return (
-                <button
-                  className="btn btn-primary"
-                  onClick={() => confirmYolo() && handleSave()}
-                  disabled={!canSave || saving}
-                >
-                  {saving && <span className="btn-spinner" />}
-                  Save
-                </button>
-              );
-            }
-            return (
-              <button className="btn btn-primary" disabled>
-                Save
-              </button>
-            );
-          })()}
+          <button
+            className="btn btn-primary"
+            onClick={() => confirmYolo() && handleSave()}
+            disabled={!canSave || saving}
+          >
+            {saving && <span className="btn-spinner" />}
+            {saveButtonLabel}
+          </button>
           <button
             className="btn btn-secondary"
             onClick={() => {