palmier 0.9.5 → 0.9.7

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

@@ -1,255 +0,0 @@
-import { useState, useRef, useEffect } from "react";
-import { createPortal } from "react-dom";
-import { useHostConnection } from "../contexts/HostConnectionContext";
-import { useFormatTime } 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, activeHost } = useHostConnection();
-  const formatTime = useFormatTime();
-  const timeZone = activeHost.timezone;
-  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 hasScheduleValues = (task.schedule_values?.length ?? 0) > 0;
-  const isEventSchedule = task.schedule_type === "on_new_notification" || task.schedule_type === "on_new_sms";
-  const scheduleActive = !!task.schedule_enabled && !!task.schedule_type && (hasScheduleValues || isEventSchedule);
-  const stateColor =
-    !scheduleActive
-      ? "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 classifyValue(scheduleType: "crons" | "specific_times", value: string): { kind: string; detail: string } {
-    if (scheduleType === "specific_times") {
-      const d = new Date(value);
-      const label = isNaN(d.getTime())
-        ? value
-        : `${d.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric", timeZone })} at ${d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit", timeZone })}`;
-      return { kind: "specific_times", detail: label };
-    }
-    const parts = value.split(" ");
-    if (parts.length !== 5) return { kind: "unknown", detail: value };
-    const [min, hour, dom, , dow] = parts;
-    const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-    if (hour === "*") return { kind: "hourly", detail: "" };
-    // Cron HH:MM is in the host's wall clock. Format directly — no Date
-    // conversion — to avoid implicit shifting through the viewer's local zone.
-    const h = Number(hour);
-    const m = Number(min);
-    const hour12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
-    const ampm = h >= 12 ? "PM" : "AM";
-    const time = `${hour12}:${String(m).padStart(2, "0")} ${ampm}`;
-    if (dow !== "*") return { kind: "weekly", detail: `${DAYS[Number(dow)] ?? dow} at ${time}` };
-    if (dom !== "*") return { kind: "monthly", detail: `day ${dom} at ${time}` };
-    return { kind: "daily", detail: time };
-  }
-
-  function formatSingleValue(scheduleType: "crons" | "specific_times", value: string): string {
-    const c = classifyValue(scheduleType, value);
-    if (c.kind === "hourly") return "Every hour";
-    if (c.kind === "specific_times") return `Once on ${c.detail}`;
-    return `${c.kind.charAt(0).toUpperCase() + c.kind.slice(1)}: ${c.detail}`;
-  }
-
-  function formatScheduleGrouped(
-    scheduleType: "crons" | "specific_times" | "on_new_notification" | "on_new_sms" | undefined,
-    values: string[] | undefined,
-  ): string {
-    if (!scheduleType) return "";
-    if (scheduleType === "on_new_notification") return "On new notification";
-    if (scheduleType === "on_new_sms") return "On new SMS";
-    if (!values || values.length === 0) return "";
-    if (values.length === 1) return formatSingleValue(scheduleType, values[0]);
-
-    const classified = values.map((v) => classifyValue(scheduleType, v));
-    const kinds = new Set(classified.map((c) => c.kind));
-
-    if (kinds.size === 1) {
-      const kind = classified[0].kind;
-      if (kind === "hourly") return "Every hour";
-      const details = classified.map((c) => c.detail);
-      return `${kind.charAt(0).toUpperCase() + kind.slice(1)}: ${details.join(", ")}`;
-    }
-
-    return values.map((v) => formatSingleValue(scheduleType, v)).join(", ");
-  }
-
-  const scheduleText = formatScheduleGrouped(task.schedule_type, task.schedule_values);
-
-  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={() => onViewRun(task.id, "latest")}>
-        <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.schedule_type && (hasScheduleValues || isEventSchedule) && (
-            <span className="task-card-triggers">
-              {task.schedule_enabled ? scheduleText : "Schedule 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,
-      )}
-    </>
-  );
-}