palmier 0.6.0 → 0.6.2

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

@@ -0,0 +1,580 @@
+import { 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";
+
+
+const DAYS_OF_WEEK = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+
+type Schedule = "once" | "hourly" | "daily" | "weekly" | "monthly";
+
+interface TriggerRow {
+  schedule: Schedule;
+  time: string;
+  dayOfWeek: string;
+  dayOfMonth: string;
+  onceDate: string;
+  onceTime: string;
+}
+
+function newRow(schedule: Schedule = "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 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) };
+  }
+  return cronToRow(t.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 rowToTrigger(row: TriggerRow): Trigger | null {
+  if (row.schedule === "once") {
+    return row.onceDate ? { type: "once", value: `${row.onceDate}T${row.onceTime}` } : null;
+  }
+  return { type: "cron", value: rowToCron(row) };
+}
+
+interface TaskFormProps {
+  initial?: Task;
+  agents: AgentInfo[];
+  hostPlatform?: string;
+  onSaved(task: Task): void;
+  onRun(taskId: string, runId?: string): void;
+  onCancel(): void;
+}
+
+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);
+    if (lastAgent && agentKeys.includes(lastAgent)) return lastAgent;
+    return agents[0]?.key ?? "";
+  };
+
+  // Editable prompt
+  const [userPrompt, setUserPrompt] = useState(initial?.user_prompt ?? "");
+  const [agent, setAgent] = useState(initial?.agent ?? defaultAgent());
+
+  // Plan state — for existing tasks only
+  const [body] = useState(initial?.body ?? "");
+
+  // Track whether prompt or agent diverged from the saved values (for existing tasks)
+  const promptChanged = !!initial && userPrompt !== (initial.user_prompt ?? "");
+  const agentChanged = !!initial && agent !== (initial.agent ?? "");
+  const planInvalidated = promptChanged || agentChanged;
+
+  // Show plan link for existing tasks that have a plan or permissions and haven't been modified
+  const hasPlan = !!initial && (!!body || !!initial.permissions?.length) && !planInvalidated;
+
+  // 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 [triggerRows, setTriggerRows] = useState<TriggerRow[]>(
+    () => (initial?.triggers ?? []).map(triggerToRow)
+  );
+  const [triggersEnabled, setTriggersEnabled] = useState(
+    initial?.triggers_enabled ?? false
+  );
+  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 [savingAction, setSavingAction] = useState<"save" | "run" | null>(null);
+  const saving = savingAction !== null;
+
+  // Command-triggered mode
+  const [commandEnabled, setCommandEnabled] = useState(!!initial?.command);
+  const [command, setCommand] = useState(initial?.command ?? "");
+  const commandInputRef = useRef<HTMLInputElement>(null);
+
+  const isEdit = !!initial;
+  const isDirty = !isEdit
+    || userPrompt !== (initial?.user_prompt ?? "")
+    || agent !== (initial?.agent ?? "")
+    || triggersEnabled !== (initial?.triggers_enabled ?? true)
+    || 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())
+  );
+  const canSave = isDirty && !!userPrompt.trim() && !hasInvalidTrigger && (!commandEnabled || !!command.trim());
+
+  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;
+    });
+  }
+
+  function addRow() {
+    setTriggerRows((prev) => [...prev, newRow(prev.length > 0 ? prev[prev.length - 1].schedule : undefined)]);
+  }
+
+  function collectTriggers(): Trigger[] {
+    return triggerRows.flatMap((row) => {
+      const t = rowToTrigger(row);
+      return t ? [t] : [];
+    });
+  }
+
+  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?"
+    );
+  }
+
+  async function handleSave() {
+    setSavingAction("save");
+    setError(null);
+    try {
+      const method = isEdit ? "task.update" : "task.create";
+      const payload: Record<string, unknown> = {
+        user_prompt: userPrompt,
+        agent,
+        triggers: collectTriggers(),
+        triggers_enabled: triggersEnabled,
+        requires_confirmation: requiresConfirmation,
+        yolo_mode: yoloMode,
+        foreground_mode: foregroundMode,
+        command: commandEnabled ? command : "",
+      };
+      if (isEdit) {
+        payload.id = initial!.id;
+      }
+      // Plan generation happens server-side, allow up to 130s
+      const result = await request<Task & { error?: string }>(method, payload, { timeout: 130000 });
+      if (result.error) {
+        setError(result.error);
+        return null;
+      }
+      if (!isEdit) {
+        localStorage.setItem("palmier:lastAgent", agent);
+      }
+      onSaved(result);
+      return result;
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      return null;
+    } finally {
+      setSavingAction(null);
+    }
+  }
+
+  async function handleRunOneoff() {
+    setSavingAction("run");
+    setError(null);
+    try {
+      const payload: Record<string, unknown> = {
+        user_prompt: userPrompt,
+        agent,
+        requires_confirmation: requiresConfirmation,
+        yolo_mode: yoloMode,
+        foreground_mode: foregroundMode,
+        command: commandEnabled ? command : "",
+      };
+      const result = await request<{ ok?: boolean; task_id?: string; run_id?: string; error?: string }>("task.run_oneoff", payload);
+      if (result.error) {
+        setError(result.error);
+        return;
+      }
+      localStorage.setItem("palmier:lastAgent", agent);
+      onRun(result.task_id!, result.run_id);
+      onCancel();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSavingAction(null);
+    }
+  }
+
+
+  return (
+    <div className="task-form-overlay">
+      <div className="task-form">
+        {planDialogOpen ? (
+          <PlanDialog
+            body={body}
+            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={commandEnabled
+            ? "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">
+          {hasPlan && (
+            <button
+              className="btn btn-link"
+              onClick={() => setPlanDialogOpen(true)}
+            >
+              Execution Plan
+            </button>
+          )}
+          <div className="agent-picker-section-inline" style={{ marginLeft: "auto" }}>
+            <span className="agent-picker-label">Run with</span>
+            <select
+              className="form-select form-select-sm"
+              value={agent}
+              onChange={(e) => setAgent(e.target.value)}
+            >
+              {agents.map((a) => (
+                <option key={a.key} value={a.key}>{a.label}</option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        <div className="toggles-group">
+        <div className={`command-section${commandEnabled ? " command-section-active" : ""}`}>
+          <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);
+              }}
+              disabled={saving}
+            />
+            Reactive
+          </label>
+          {commandEnabled && (
+            <>
+              <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>
+
+        {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}
+            />
+            Add schedules
+          </label>
+          <div className={`triggers-section-body${triggersEnabled ? "" : " disabled"}`}>
+            {triggerRows.map((row, i) => (
+              <div key={i} className="trigger-row-card">
+                <div className="trigger-row-content">
+                  <div className="trigger-row-top">
+                    <select
+                      className="form-select"
+                      value={row.schedule}
+                      disabled={!triggersEnabled}
+                      onChange={(e) => updateRow(i, { schedule: 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>
+                    {row.schedule === "daily" && (
+                      <input
+                        className="form-input"
+                        type="time"
+                        value={row.time}
+                        disabled={!triggersEnabled}
+                        onChange={(e) => updateRow(i, { time: e.target.value })}
+                      />
+                    )}
+                    {row.schedule === "weekly" && (
+                      <>
+                        <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>
+                  {row.schedule === "monthly" && (
+                    <div className="trigger-details">
+                      <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>
+                      <input
+                        className="form-input"
+                        type="time"
+                        value={row.time}
+                        disabled={!triggersEnabled}
+                        onChange={(e) => updateRow(i, { time: e.target.value })}
+                      />
+                    </div>
+                  )}
+                  {row.schedule === "once" && (
+                    <div className="trigger-details">
+                      <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>
+                  )}
+                </div>
+                <button
+                  className="trigger-remove-btn"
+                  onClick={() => removeRow(i)}
+                  disabled={!triggersEnabled}
+                  title="Remove trigger"
+                >
+                  &times;
+                </button>
+              </div>
+            ))}
+            {triggerRows.length > 0 && (
+              <button className="trigger-add-btn" onClick={addRow} disabled={!triggersEnabled}>
+                + Add Schedule
+              </button>
+            )}
+          </div>
+        </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>
+          );
+        })()}
+
+        <div className="form-actions">
+          {(() => {
+            const hasSchedule = triggerRows.length > 0;
+            const canRun = !!userPrompt.trim() && (!commandEnabled || !!command.trim());
+            if (!isEdit) {
+              if (hasSchedule) {
+                // New task with schedule: "Schedule" only
+                return (
+                  <button
+                    className="btn btn-primary"
+                    onClick={() => confirmYolo() && handleSave()}
+                    disabled={!canSave || saving}
+                  >
+                    {savingAction === "save" && <span className="btn-spinner" />}
+                    Schedule
+                  </button>
+                );
+              }
+              // New task, no schedule: "Run" (primary) + "Save"
+              return (<>
+                <button
+                  className="btn btn-primary"
+                  onClick={() => confirmYolo() && handleRunOneoff()}
+                  disabled={!canRun || saving}
+                >
+                  {savingAction === "run" && <span className="btn-spinner" />}
+                  Run
+                </button>
+                <button
+                  className="btn btn-secondary"
+                  onClick={() => confirmYolo() && handleSave()}
+                  disabled={!canSave || saving}
+                >
+                  Save
+                </button>
+              </>);
+            }
+            if (isDirty) {
+              // Edit, changed: Save only
+              return (
+                <button
+                  className="btn btn-primary"
+                  onClick={() => confirmYolo() && handleSave()}
+                  disabled={!canSave || saving}
+                >
+                  {savingAction === "save" && <span className="btn-spinner" />}
+                  Save
+                </button>
+              );
+            }
+            // Edit, unchanged: disabled Save
+            return (
+              <button
+                className="btn btn-primary"
+                disabled
+              >
+                Save
+              </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>
+    </div>
+  );
+}