palmier 0.9.6 → 0.9.7

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

@@ -1,766 +0,0 @@
-import { useEffect, useState, useCallback, useRef } from "react";
-import { Capacitor } from "@capacitor/core";
-import { useHostConnection } from "../contexts/HostConnectionContext";
-import { useHostStore } from "../contexts/HostStoreContext";
-import { hostNowParts } from "../formatTime";
-import PermissionsDialog from "./PermissionsDialog";
-import { useBackClose } from "../hooks/useBackClose";
-import { Device } from "../native/Device";
-import type { AgentInfo, Task } from "../types";
-
-type ScheduleType = "crons" | "specific_times" | "on_new_notification" | "on_new_sms";
-type EventMode = "on_new_notification" | "on_new_sms";
-
-
-const DAYS_OF_WEEK = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-
-type ScheduleSlot = "specific_times" | "hourly" | "daily" | "weekly" | "monthly";
-type ScheduleMode = "ondemand" | "command" | EventMode | 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);
-}
-
-function isEventMode(mode: ScheduleMode): mode is EventMode {
-  return mode === "on_new_notification" || mode === "on_new_sms";
-}
-
-interface TriggerRow {
-  schedule: ScheduleSlot;
-  time: string;
-  dayOfWeek: string;
-  dayOfMonth: string;
-  onceDate: string;
-  onceTime: string;
-}
-
-function newRow(schedule: ScheduleSlot = "daily"): TriggerRow {
-  return { schedule, time: "00:00", dayOfWeek: "1", dayOfMonth: "1", onceDate: "", onceTime: "00:00" };
-}
-
-function cronToRow(cron: string): TriggerRow {
-  const parts = cron.split(" ");
-  if (parts.length !== 5) return newRow();
-  const [min, hour, dom, , dow] = parts;
-  if (hour === "*") return newRow("hourly");
-  const time = `${hour.padStart(2, "0")}:${min.padStart(2, "0")}`;
-  if (dow !== "*") return { ...newRow("weekly"), time, dayOfWeek: dow };
-  if (dom !== "*") return { ...newRow("monthly"), time, dayOfMonth: dom };
-  return { ...newRow("daily"), time };
-}
-
-function valueToRow(scheduleType: "crons" | "specific_times", 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(value);
-}
-
-function rowToCron(row: TriggerRow): string {
-  const [hh, mm] = row.time.split(":").map(Number);
-  switch (row.schedule) {
-    case "hourly":  return "0 * * * *";
-    case "daily":   return `${mm} ${hh} * * *`;
-    case "weekly":  return `${mm} ${hh} * * ${row.dayOfWeek}`;
-    case "monthly": return `${mm} ${hh} ${row.dayOfMonth} * *`;
-    default:        return "0 * * * *";
-  }
-}
-
-function rowToValue(row: TriggerRow): string | null {
-  if (row.schedule === "specific_times") {
-    return row.onceDate ? `${row.onceDate}T${row.onceTime}` : null;
-  }
-  return rowToCron(row);
-}
-
-function modeToScheduleType(mode: ScheduleSlot | EventMode): ScheduleType {
-  if (mode === "specific_times") return "specific_times";
-  if (mode === "on_new_notification") return "on_new_notification";
-  if (mode === "on_new_sms") return "on_new_sms";
-  return "crons";
-}
-
-function initialScheduleMode(initial?: Task): ScheduleMode {
-  if (!initial) return "daily";
-  if (initial.command) return "command";
-  const type = initial.schedule_type;
-  if (type === "on_new_notification" || type === "on_new_sms") return type;
-  if (type !== "crons" && type !== "specific_times") return "ondemand";
-  const first = initial.schedule_values?.[0];
-  if (!first) return "ondemand";
-  return valueToRow(type, first).schedule;
-}
-
-interface TaskFormProps {
-  initial?: Task;
-  agents: AgentInfo[];
-  hostPlatform?: string;
-  isNotificationListener: boolean;
-  onSaved(task: Task): void;
-  onRun(taskId: string, runId?: string): void;
-  onCancel(): void;
-}
-
-export default function TaskForm({ initial, agents, hostPlatform, isNotificationListener, onSaved, onRun, onCancel }: TaskFormProps) {
-  const { request, activeHost } = useHostConnection();
-  const { setHostLastAgent } = useHostStore();
-
-  const defaultAgent = () => {
-    const lastAgent = activeHost.lastAgent;
-    const agentKeys = agents.map((a) => a.key);
-    if (lastAgent && agentKeys.includes(lastAgent)) return lastAgent;
-    return agents[0]?.key ?? "";
-  };
-
-  const [userPrompt, setUserPrompt] = useState(initial?.user_prompt ?? "");
-  const [agent, setAgent] = useState(initial?.agent ?? defaultAgent());
-
-  const hasPermissions = !!initial?.permissions?.length;
-
-  const [planDialogOpen, setPlanDialogOpen] = useState(false);
-  const closePlanDialog = useCallback(() => setPlanDialogOpen(false), []);
-  useBackClose(planDialogOpen, closePlanDialog);
-  const [error, setError] = useState<string | null>(null);
-
-  const [scheduleMode, setScheduleMode] = useState<ScheduleMode>(() => initialScheduleMode(initial));
-  const [triggerRows, setTriggerRows] = useState<TriggerRow[]>(
-    () => {
-      const type = initial?.schedule_type;
-      const values = initial?.schedule_values;
-      if (values && (type === "crons" || type === "specific_times")) {
-        return values.map((v) => valueToRow(type, v));
-      }
-      const mode = initialScheduleMode(initial);
-      return isScheduleSlot(mode) ? [newRow(mode)] : [];
-    }
-  );
-  const [requiresConfirmation, setRequiresConfirmation] = useState(
-    initial?.requires_confirmation ?? false
-  );
-  const [scheduleEnabled, setScheduleEnabled] = useState(
-    initial?.schedule_type ? (initial.schedule_enabled ?? true) : true,
-  );
-  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);
-
-  // Single optional app filter for on_new_notification tasks. Empty = any app;
-  // non-empty = single packageName filter (stored as a one-entry schedule_values
-  // array on save). Datalist options come from the host-side app registry.
-  // No migration: pre-existing multi-app tasks truncate to the first entry on
-  // first edit.
-  const initialNotificationApp: string = (() => {
-    if (initial?.schedule_type === "on_new_notification" && initial.schedule_values && initial.schedule_values.length > 0) {
-      return initial.schedule_values[0];
-    }
-    return "";
-  })();
-  const [notificationApp, setNotificationApp] = useState<string>(initialNotificationApp);
-  const [knownApps, setKnownApps] = useState<Array<{ packageName: string; appName: string }>>([]);
-  const [knownAppsLoading, setKnownAppsLoading] = useState(false);
-  const [appFilterOpen, setAppFilterOpen] = useState(false);
-  const [appSearch, setAppSearch] = useState("");
-  const closeAppFilter = useCallback(() => setAppFilterOpen(false), []);
-  useBackClose(appFilterOpen, closeAppFilter);
-
-  // Only the notification-listening device can enumerate installed apps. On any
-  // other client we leave the list empty and fall back to a plain packageName
-  // input — the app registry we used to maintain on the host was inconsistent
-  // across devices, so we no longer cache it.
-  useEffect(() => {
-    if (scheduleMode !== "on_new_notification") return;
-    if (!isNotificationListener || !Capacitor.isNativePlatform() || !Device) return;
-    let cancelled = false;
-    setKnownAppsLoading(true);
-    Device.getInstalledApps()
-      .then(({ apps }) => {
-        if (cancelled) return;
-        const PALMIER_PACKAGE = "com.palmier.app";
-        const list = apps
-          .filter((a) => a.packageName !== PALMIER_PACKAGE)
-          .sort((a, b) => (a.appName || a.packageName).localeCompare(b.appName || b.packageName));
-        setKnownApps(list);
-      })
-      .catch(() => {})
-      .finally(() => { if (!cancelled) setKnownAppsLoading(false); });
-    return () => { cancelled = true; };
-  }, [scheduleMode, isNotificationListener]);
-
-  // Sender filter for on_new_sms tasks. Empty string = any sender; non-empty =
-  // whitelist a single sender (stored as a single-entry schedule_values array
-  // on save). Matching is normalized on the host — users don't need to worry
-  // about exact phone-number formatting.
-  const initialSmsSender: string = (() => {
-    if (initial?.schedule_type === "on_new_sms" && initial.schedule_values && initial.schedule_values.length > 0) {
-      return initial.schedule_values[0];
-    }
-    return "";
-  })();
-  const [smsSender, setSmsSender] = useState<string>(initialSmsSender);
-
-  const commandInputRef = useRef<HTMLInputElement>(null);
-
-  const modeIsScheduled = isScheduleSlot(scheduleMode);
-  const modeIsCommand = scheduleMode === "command";
-  const modeIsEvent = isEventMode(scheduleMode);
-
-  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 ?? "")
-    || scheduleMode !== initialMode
-    || requiresConfirmation !== (initial?.requires_confirmation ?? false)
-    || scheduleEnabled !== (initial?.schedule_type ? (initial.schedule_enabled ?? true) : true)
-    || yoloMode !== (initial?.yolo_mode ?? false)
-    || foregroundMode !== (initial?.foreground_mode ?? false)
-    || (modeIsCommand && command !== (initial?.command ?? ""))
-    || (modeIsScheduled && (
-      JSON.stringify(collectScheduleValues()) !== JSON.stringify(initial?.schedule_values ?? [])
-      || modeToScheduleType(scheduleMode as ScheduleSlot) !== (initial?.schedule_type ?? undefined)
-    ))
-    || (modeIsEvent && scheduleMode !== initial?.schedule_type)
-    || (scheduleMode === "on_new_notification" && notificationApp.trim() !== initialNotificationApp.trim())
-    || (scheduleMode === "on_new_sms" && smsSender.trim() !== initialSmsSender.trim());
-
-  const hostNow = hostNowParts(activeHost.timezone);
-  const hasInvalidTrigger = modeIsScheduled && triggerRows.some((r) =>
-    r.schedule === "specific_times" && (
-      !r.onceDate
-      || r.onceDate < hostNow.date
-      || (r.onceDate === hostNow.date && (r.onceTime ?? "") <= hostNow.time)
-    )
-  );
-  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) => prev.filter((_, i) => i !== index));
-  }
-
-  function addRow() {
-    if (!isScheduleSlot(scheduleMode)) return;
-    setTriggerRows((prev) => [...prev, prev.length > 0 ? { ...prev[prev.length - 1] } : newRow(scheduleMode)]);
-  }
-
-  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("");
-    }
-    if (next !== "on_new_notification") {
-      setNotificationApp(initialNotificationApp);
-    }
-    if (next !== "on_new_sms") {
-      setSmsSender(initialSmsSender);
-    }
-  }
-
-  function collectScheduleValues(): string[] {
-    return triggerRows.flatMap((row) => {
-      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 \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?"
-    );
-  }
-
-  async function handleSave() {
-    setSaving(true);
-    setError(null);
-    try {
-      const scheduleValues = modeIsScheduled
-        ? collectScheduleValues()
-        : scheduleMode === "on_new_notification" && notificationApp.trim()
-          ? [notificationApp.trim()]
-          : scheduleMode === "on_new_sms" && smsSender.trim()
-            ? [smsSender.trim()]
-            : [];
-      const scheduleType: ScheduleType | null = modeIsScheduled
-        ? modeToScheduleType(scheduleMode as ScheduleSlot)
-        : modeIsEvent
-          ? modeToScheduleType(scheduleMode as EventMode)
-          : null;
-      const payload: Record<string, unknown> = {
-        user_prompt: userPrompt,
-        agent,
-        schedule_type: scheduleType,
-        schedule_values: scheduleValues.length > 0 ? scheduleValues : null,
-        schedule_enabled: scheduleMode === "ondemand" ? true : scheduleEnabled,
-        requires_confirmation: modeIsScheduled ? requiresConfirmation : false,
-        yolo_mode: yoloMode,
-        foreground_mode: foregroundMode,
-        command: modeIsCommand ? command : "",
-      };
-      if (isEdit) {
-        payload.id = initial!.id;
-      }
-      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;
-      }
-      if (!isEdit) setHostLastAgent(activeHost.hostId, agent);
-
-      // Command-triggered on create: save the task, then start it and navigate
-      // to the run. Event-triggered tasks are started by the daemon in response
-      // to the next NATS event, so we just save.
-      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);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  const saveButtonLabel = (() => {
-    if (isEdit) return "Save";
-    if (modeIsCommand) return "Run";
-    if ((modeIsScheduled || modeIsEvent) && scheduleEnabled) return "Schedule";
-    return "Save";
-  })();
-
-  return (
-    <div className="task-form-overlay">
-      <div className="task-form">
-        {planDialogOpen ? (
-          <PermissionsDialog permissions={initial?.permissions} />
-        ) : (<>
-        <div className="task-form-header">
-          <h2>{initial ? "Edit Task" : "New Task"}</h2>
-        </div>
-
-        {error && <div className="form-error">{error}</div>}
-
-        <textarea
-          autoFocus={!initial}
-          className="form-textarea"
-          value={userPrompt}
-          onChange={(e) => setUserPrompt(e.target.value)}
-          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}
-          disabled={saving}
-        />
-
-        <div className="plan-actions">
-          <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="schedule-section">
-          <h3 className="schedule-section-title">
-            Schedule <span className="schedule-section-hint">based on host time</span>
-          </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="on_new_notification">On New Notification</option>
-            <option value="on_new_sms">On New SMS</option>
-            <option value="command">Command-triggered</option>
-          </select>
-
-          {modeIsEvent && (
-            <div className="schedule-reactive">
-              <p className="command-help-text">
-                {scheduleMode === "on_new_notification"
-                  ? "Runs each time a new push notification arrives on the paired Android device."
-                  : "Runs each time a new SMS arrives on the paired Android device."}
-                {" "}The triggering payload is spliced into your task prompt — reference it as &ldquo;the new {scheduleMode === "on_new_notification" ? "notification" : "SMS"}&rdquo;.
-              </p>
-              {scheduleMode === "on_new_notification" && (() => {
-                const selected = knownApps.find((a) => a.packageName === notificationApp);
-                const selectedLabel = selected?.appName || notificationApp;
-                return (
-                  <>
-                    {isNotificationListener ? (
-                      notificationApp.trim() ? (
-                        <div className="app-filter-selected">
-                          <span className="app-filter-selected-name">{selectedLabel}</span>
-                          {selected?.appName && <span className="app-filter-selected-pkg">{selected.packageName}</span>}
-                          <button
-                            type="button"
-                            className="app-filter-selected-clear"
-                            onClick={() => setNotificationApp("")}
-                            aria-label="Clear app filter"
-                            disabled={saving}
-                          >
-                            ✕
-                          </button>
-                        </div>
-                      ) : (
-                        <button
-                          type="button"
-                          className="btn btn-link app-filter-trigger"
-                          onClick={() => { setAppSearch(""); setAppFilterOpen(true); }}
-                          disabled={saving}
-                        >
-                          Select app
-                        </button>
-                      )
-                    ) : (
-                      <input
-                        className="form-input"
-                        type="text"
-                        value={notificationApp}
-                        onChange={(e) => setNotificationApp(e.target.value)}
-                        placeholder="App (optional), e.g. com.google.android.gm"
-                        disabled={saving}
-                      />
-                    )}
-                    <p className="command-help-text app-filter-help">
-                      {notificationApp.trim()
-                        ? `Only notifications from ${selectedLabel} will trigger this task.`
-                        : "Every notification from your device triggers this task."}
-                    </p>
-                  </>
-                );
-              })()}
-              {scheduleMode === "on_new_sms" && (
-                <>
-                  <input
-                    className="form-input"
-                    type="text"
-                    value={smsSender}
-                    onChange={(e) => setSmsSender(e.target.value)}
-                    placeholder="From (optional), e.g. +1 555-1234)"
-                    disabled={saving}
-                  />
-                  <p className="command-help-text app-filter-help">
-                    {smsSender.trim()
-                      ? `Only SMS from ${smsSender.trim()} will trigger this task. Formatting (spaces, dashes, parens) is ignored.`
-                      : "Every SMS that arrives on your device triggers this task."}
-                  </p>
-                </>
-              )}
-            </div>
-          )}
-
-          {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.
-              </p>
-              <input
-                ref={commandInputRef}
-                className="form-input form-input-mono"
-                type="text"
-                value={command}
-                onChange={(e) => setCommand(e.target.value)}
-                placeholder="gws gmail +watch --project my-project"
-                disabled={saving}
-              />
-            </div>
-          )}
-
-          {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}
-                        onChange={(e) => updateRow(i, { time: e.target.value })}
-                      />
-                    )}
-                    {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={hostNow.date}
-                          onChange={(e) => updateRow(i, { onceDate: e.target.value })}
-                        />
-                        <input
-                          className="form-input"
-                          type="time"
-                          value={row.onceTime}
-                          min={row.onceDate === hostNow.date ? hostNow.time : 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>
-              ))}
-              <button className="trigger-add-btn" onClick={addRow}>
-                + Add
-              </button>
-            </>
-          )}
-
-          {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>
-          )}
-          {modeIsScheduled && (
-            <label className="toggle-label">
-              <input
-                type="checkbox"
-                checked={requiresConfirmation}
-                onChange={(e) => setRequiresConfirmation(e.target.checked)}
-                disabled={saving}
-              />
-              Confirm before each run
-            </label>
-          )}
-          {scheduleMode !== "ondemand" && (
-            <label className="toggle-label">
-              <input
-                type="checkbox"
-                checked={scheduleEnabled}
-                onChange={(e) => setScheduleEnabled(e.target.checked)}
-                disabled={saving}
-              />
-              Enabled
-            </label>
-          )}
-        </div>
-        </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">
-          <button
-            className="btn btn-primary"
-            onClick={() => confirmYolo() && handleSave()}
-            disabled={!canSave || saving}
-          >
-            {saving && <span className="btn-spinner" />}
-            {saveButtonLabel}
-          </button>
-          <button
-            className="btn btn-secondary"
-            onClick={() => {
-              if (isDirty && userPrompt.trim() && !confirm("You have unsaved changes. Discard?")) return;
-              onCancel();
-            }}
-            style={{ marginLeft: "auto" }}
-          >
-            Cancel
-          </button>
-        </div>
-
-        </>)}
-      </div>
-      {appFilterOpen && (() => {
-        const q = appSearch.trim().toLowerCase();
-        const filtered = q
-          ? knownApps.filter((a) => a.packageName.toLowerCase().includes(q) || a.appName.toLowerCase().includes(q))
-          : knownApps;
-        return (
-          <div className="app-filter-overlay" onClick={closeAppFilter}>
-            <div className="app-filter-dialog" onClick={(e) => e.stopPropagation()}>
-              <div className="app-filter-header">
-                <h2>Select app</h2>
-                <button className="app-filter-close" onClick={closeAppFilter} aria-label="Close">
-                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                    <path d="M4 4L12 12M12 4L4 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-                  </svg>
-                </button>
-              </div>
-              <input
-                className="form-input app-filter-search"
-                type="text"
-                value={appSearch}
-                onChange={(e) => setAppSearch(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter" && appSearch.trim()) {
-                    setNotificationApp(appSearch.trim());
-                    closeAppFilter();
-                  }
-                }}
-                placeholder="Search or type a package name"
-                autoFocus
-              />
-              <ul className="app-filter-list">
-                {knownAppsLoading && knownApps.length === 0
-                  ? Array.from({ length: 6 }).map((_, i) => (
-                      <li key={`sk-${i}`} className="app-filter-row app-filter-skeleton">
-                        <div className="app-filter-skeleton-bar" />
-                      </li>
-                    ))
-                  : filtered.length === 0 && !appSearch.trim()
-                    ? <li className="app-filter-empty">No apps</li>
-                    : filtered.map((a) => (
-                        <li
-                          key={a.packageName}
-                          className="app-filter-row"
-                          onClick={() => { setNotificationApp(a.packageName); closeAppFilter(); }}
-                        >
-                          <div className="app-filter-row-labels">
-                            <div className="app-filter-row-name">{a.appName || a.packageName}</div>
-                            {a.appName && <div className="app-filter-row-pkg">{a.packageName}</div>}
-                          </div>
-                        </li>
-                      ))}
-                {appSearch.trim() && (
-                  <li
-                    className="app-filter-row"
-                    onClick={() => { setNotificationApp(appSearch.trim()); closeAppFilter(); }}
-                  >
-                    <div className="app-filter-row-labels">
-                      <div className="app-filter-row-name">{appSearch.trim()}</div>
-                    </div>
-                  </li>
-                )}
-              </ul>
-            </div>
-          </div>
-        );
-      })()}
-    </div>
-  );
-}