palmier 0.6.0 → 0.6.2

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

@@ -0,0 +1,213 @@
+import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { useHostConnection } from "../contexts/HostConnectionContext";
+import { formatTime } from "../formatTime";
+import { getAgentLabel } from "../agentLabels";
+import type { Task, TaskStatus } from "../types";
+
+const isMobile = () => window.matchMedia("(max-width: 600px)").matches;
+
+interface TaskCardProps {
+  task: Task;
+  lastEvent?: TaskStatus;
+  onEdit(task: Task): void;
+  onDelete(taskId: string): void;
+  onViewRun(taskId: string, runId?: string): void;
+}
+
+export default function TaskCard({ task, lastEvent, onEdit, onDelete, onViewRun }: TaskCardProps) {
+  const { request } = useHostConnection();
+  const [aborting, setAborting] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const isRunning = lastEvent?.running_state === "started";
+  const stateColor =
+    !task.triggers_enabled || task.triggers.length === 0
+      ? "var(--color-text-secondary)"
+      : isRunning
+        ? "var(--color-success)"
+        : lastEvent?.running_state === "failed"
+          ? "var(--color-error)"
+          : "var(--color-success)";
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!menuOpen) return;
+    function handleClick(e: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setMenuOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [menuOpen]);
+
+  function openMenu() {
+    if (isMobile()) {
+      setSheetOpen(true);
+    } else {
+      setMenuOpen((v) => !v);
+    }
+  }
+
+  function closeMenu() {
+    setMenuOpen(false);
+    setSheetOpen(false);
+  }
+
+  async function handleAbort() {
+    closeMenu();
+    if (!confirm("Abort this task?")) return;
+    setAborting(true);
+    try {
+      await request("task.abort", { id: task.id });
+    } catch (err) {
+      console.error("Abort failed:", err);
+    } finally {
+      setAborting(false);
+    }
+  }
+
+  async function handleRunNow() {
+    closeMenu();
+    try {
+      const result = await request<{ ok?: boolean; task_id?: string; run_id?: string }>("task.run", { id: task.id });
+      onViewRun(task.id, result.run_id);
+    } catch (err) {
+      console.error("Run failed:", err);
+    }
+  }
+
+  async function handleDelete() {
+    closeMenu();
+    if (!confirm("Delete this task? Results and reports will be kept.")) return;
+    try {
+      await request("task.delete", { id: task.id });
+      onDelete(task.id);
+    } catch (err) {
+      console.error("Delete failed:", err);
+    }
+  }
+
+  const eventLabel: Record<string, string> = {
+    started: "Started",
+    finished: "Finished",
+    aborted: "Aborted",
+    failed: "Failed",
+  };
+
+
+  function formatTrigger(t: { type: string; value: string }): string {
+    if (t.type === "once") {
+      const d = new Date(t.value);
+      return isNaN(d.getTime()) ? t.value : `Once on ${d.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" })} at ${d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })}`;
+    }
+    const parts = t.value.split(" ");
+    if (parts.length !== 5) return t.value;
+    const [min, hour, dom, , dow] = parts;
+    const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    if (hour === "*") return "Every hour";
+    const d = new Date();
+    d.setHours(Number(hour), Number(min), 0, 0);
+    const time = d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
+    if (dow !== "*") return `Weekly on ${DAYS[Number(dow)] ?? dow} at ${time}`;
+    if (dom !== "*") return `Monthly on day ${dom} at ${time}`;
+    return `Daily at ${time}`;
+  }
+
+  const triggersText = task.triggers.map(formatTrigger).join(", ");
+
+  const actionItems = (
+    <>
+      <button onClick={() => { closeMenu(); onEdit(task); }}>
+        <span className="menu-icon">&#9998;</span>Edit
+      </button>
+      <button onClick={() => { closeMenu(); onViewRun(task.id); }}>
+        <span className="menu-icon">&#128196;</span>View All Runs
+      </button>
+      {isRunning ? (
+        <button className="menu-item-danger" onClick={handleAbort} disabled={aborting}>
+          <span className="menu-icon">&#9724;</span>Abort
+        </button>
+      ) : (
+        <>
+          <button onClick={handleRunNow}>
+            <span className="menu-icon">&#9654;</span>Run Now
+          </button>
+          <button className="menu-item-danger" onClick={handleDelete}>
+            <span className="menu-icon">&#128465;</span>Delete
+          </button>
+        </>
+      )}
+    </>
+  );
+
+  return (
+    <>
+      <div className="task-card" onClick={() => isRunning ? onViewRun(task.id, "latest") : onViewRun(task.id)}>
+        <div className="task-card-header">
+          <div className="task-card-title-row">
+            {isRunning ? (
+              <span className="status-spinner">
+                <span />
+              </span>
+            ) : (
+              <span
+                className="status-dot"
+                style={{ backgroundColor: stateColor }}
+              />
+            )}
+            <h3 className="task-card-name">{task.name || task.user_prompt}</h3>
+          </div>
+          <div className="task-card-actions" onClick={(e) => e.stopPropagation()}>
+            <div className="task-card-menu" ref={menuRef}>
+              <button
+                className="task-card-menu-btn"
+                onClick={openMenu}
+                aria-label="Task actions"
+              >
+                &#8942;
+              </button>
+              {menuOpen && (
+                <div className="task-card-menu-dropdown">
+                  {actionItems}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="task-card-meta">
+          {task.agent && (
+            <span className="task-card-agent">{getAgentLabel(task.agent)}</span>
+          )}
+          {lastEvent && eventLabel[lastEvent.running_state] && (
+            <span className="task-card-last-event">
+              {eventLabel[lastEvent.running_state]}
+              {" "}{formatTime(lastEvent.time_stamp)}
+            </span>
+          )}
+          {task.triggers.length > 0 && (
+            <span className="task-card-triggers">
+              {task.triggers_enabled ? triggersText : "Triggers disabled"}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {sheetOpen && createPortal(
+        <div className="bottom-sheet-overlay" onClick={() => setSheetOpen(false)}>
+          <div className="bottom-sheet" onClick={(e) => e.stopPropagation()}>
+            <div className="bottom-sheet-handle" />
+            <div className="bottom-sheet-title">{task.name || task.user_prompt}</div>
+            <div className="bottom-sheet-actions">
+              {actionItems}
+            </div>
+          </div>
+        </div>,
+        document.body,
+      )}
+    </>
+  );
+}