@symerian/symi 3.5.20 → 3.5.21

package/dist/control-ui/js/scheduling.js

@@ -1,23 +1,34 @@
-// ── Scheduling Panel ─────────────────────────────────────────────────────────
-// Manages scheduled tasks using the cron.* RPC methods.
+// ── Scheduling (modal + RPC poller only) ────────────────────────────────────
+// Stage C of the Dynamic Glass Panel arc — see ~/Documents/dynamic-glass-panel.md.
+//
+// Before Stage C this file owned the SCHEDULING sticky panel: list
+// rendering, toggle controls, count badge, Add button. The sticky panel
+// is gone; scheduled jobs now surface in the AWAITING footer
+// (glass-ui/js/symframe-awaiting.js).
+//
+// What survives here:
+//   - The schedule create/edit modal (overlay + form + submit handler)
+//   - The fetchSchedules poll loop (30s + gateway:connected)
+//   - window.schedulingPanel exported API:
+//       refresh()            — force a fetch
+//       open()               — open the create modal
+//       openForEdit(job)     — open the modal pre-filled for a job
+//       getActive()          — current schedules snapshot
+//       toggle(jobId)        — enable/disable a job via cron.update
+//   - CustomEvent dispatch after each successful fetch so the AWAITING
+//     surface re-renders without polling a parallel copy of the same RPC.
 // ─────────────────────────────────────────────────────────────────────────────
 
 "use strict";
 
 (function () {
-  // ── State ──────────────────────────────────────────────────────────────────
+  // ── State ──
   let schedules = [];
   let selectedInterval = null;
   let editingScheduleId = null;
   let _pollInterval = null;
 
-  // ── DOM Elements ───────────────────────────────────────────────────────────
-  const list = document.getElementById("schedule-list");
-  const emptyState = document.getElementById("schedule-empty");
-  const countBadge = document.getElementById("schedule-count");
-  const addBtn = document.getElementById("schedule-add-btn");
-
-  // Modal elements
+  // ── Modal DOM refs (separate overlay block in index.html) ──
   const modalOverlay = document.getElementById("schedule-modal-overlay");
   const modalClose = document.getElementById("schedule-modal-close");
   const modalCancel = document.getElementById("schedule-modal-cancel");
@@ -30,8 +41,7 @@
   const intervalUnitSelect = document.getElementById("schedule-interval-unit");
   const timeInput = document.getElementById("schedule-time");
 
-  // ── Interval Helpers ───────────────────────────────────────────────────────
-  // Convert UI interval to milliseconds
+  // ── Interval helpers ──
   const UNIT_TO_MS = {
     minutes: 60 * 1000,
     hours: 60 * 60 * 1000,
@@ -39,145 +49,34 @@
     weeks: 7 * 24 * 60 * 60 * 1000,
   };
 
-  // Preset intervals
   const PRESETS = {
     hourly: { value: 1, unit: "hours" },
     daily: { value: 1, unit: "days" },
     weekly: { value: 1, unit: "weeks" },
   };
 
-  function formatInterval(job) {
-    const schedule = job.schedule;
-    if (!schedule) {
-      return "Custom";
-    }
-
-    if (schedule.kind === "every") {
-      const ms = schedule.everyMs;
-      if (ms >= UNIT_TO_MS.weeks) {
-        const weeks = Math.round(ms / UNIT_TO_MS.weeks);
-        return weeks === 1 ? "WEEK" : `${weeks}W`;
-      }
-      if (ms >= UNIT_TO_MS.days) {
-        const days = Math.round(ms / UNIT_TO_MS.days);
-        return days === 1 ? "DAY" : `${days}D`;
-      }
-      if (ms >= UNIT_TO_MS.hours) {
-        const hours = Math.round(ms / UNIT_TO_MS.hours);
-        return hours === 1 ? "HOUR" : `${hours}H`;
-      }
-      const mins = Math.round(ms / UNIT_TO_MS.minutes);
-      return mins === 1 ? "MIN" : `${mins}M`;
-    }
-
-    if (schedule.kind === "cron") {
-      return "CRON";
-    }
-
-    if (schedule.kind === "at") {
-      return "ONCE";
-    }
-
-    return "CUSTOM";
-  }
-
-  function formatNextRun(job) {
-    const nextRunAtMs = job.state?.nextRunAtMs;
-    if (!nextRunAtMs) {
-      return "Not scheduled";
-    }
-
-    const next = new Date(nextRunAtMs);
-    const now = new Date();
-    const diffMs = next - now;
-
-    if (diffMs < 0) {
-      return "Overdue";
-    }
-
-    const diffMins = Math.floor(diffMs / 60000);
-    const diffHours = Math.floor(diffMins / 60);
-    const diffDays = Math.floor(diffHours / 24);
-
-    if (diffMins < 60) {
-      return `in ${diffMins}m`;
-    }
-    if (diffHours < 24) {
-      return `in ${diffHours}h`;
-    }
-    if (diffDays === 1) {
-      return "Tomorrow";
-    }
-    if (diffDays < 7) {
-      return `in ${diffDays} days`;
-    }
-
-    return next.toLocaleDateString("en-US", { month: "short", day: "numeric" });
-  }
-
-  // ── Render Schedules ───────────────────────────────────────────────────────
-  function render() {
-    const activeCount = schedules.filter((s) => s.enabled).length;
-    countBadge.textContent = activeCount > 0 ? activeCount : "";
-
-    // Clear existing items (except empty state)
-    const items = list.querySelectorAll(".schedule-item");
-    items.forEach((item) => item.remove());
-
-    if (schedules.length === 0) {
-      emptyState.style.display = "";
+  // ── Fetch + notify ──
+  async function fetchSchedules() {
+    if (!window.gateway?.connected) {
       return;
     }
-
-    emptyState.style.display = "none";
-
-    // Sort: enabled first, then by nextRunAtMs
-    const sorted = [...schedules].toSorted((a, b) => {
-      if (a.enabled !== b.enabled) {
-        return b.enabled ? 1 : -1;
+    try {
+      const result = await window.gateway.rpc("cron.list", { includeDisabled: true });
+      if (result?.jobs) {
+        schedules = result.jobs;
+        window.dispatchEvent(new CustomEvent("symi:schedules-updated", { detail: { schedules } }));
       }
-      const aNext = a.state?.nextRunAtMs || 0;
-      const bNext = b.state?.nextRunAtMs || 0;
-      return aNext - bNext;
-    });
-
-    for (const job of sorted) {
-      const item = document.createElement("div");
-      item.className = "schedule-item";
-      item.setAttribute("data-active", job.enabled ? "true" : "false");
-      item.setAttribute("data-schedule-id", job.id || "");
-
-      item.innerHTML = `
-        <div class="schedule-toggle" title="${job.enabled ? "Disable" : "Enable"}"></div>
-        <div class="schedule-info">
-          <div class="schedule-name">${escHtml(job.name || "Unnamed")}</div>
-          <div class="schedule-next">Next: ${formatNextRun(job)}</div>
-        </div>
-        <div class="schedule-interval">${formatInterval(job)}</div>
-      `;
-
-      // Toggle click
-      const toggle = item.querySelector(".schedule-toggle");
-      toggle.addEventListener("click", (e) => {
-        e.stopPropagation();
-        void toggleSchedule(job.id);
-      });
-
-      // Item click to edit
-      item.addEventListener("click", () => openModalForEdit(job));
-      list.appendChild(item);
+    } catch (err) {
+      console.debug("[scheduling] Failed to fetch:", err.message);
     }
   }
 
-  // ── Toggle Schedule ────────────────────────────────────────────────────────
   async function toggleSchedule(jobId) {
     const job = schedules.find((s) => s.id === jobId);
     if (!job) {
       return;
     }
-
     const newEnabled = !job.enabled;
-
     try {
       if (window.gateway?.connected) {
         await window.gateway.rpc("cron.update", {
@@ -185,53 +84,36 @@
           patch: { enabled: newEnabled },
         });
       }
-
       job.enabled = newEnabled;
-      render();
+      window.dispatchEvent(new CustomEvent("symi:schedules-updated", { detail: { schedules } }));
     } catch (err) {
       console.error("[scheduling] Toggle failed:", err);
     }
   }
 
-  // ── Fetch Schedules ────────────────────────────────────────────────────────
-  async function fetchSchedules() {
-    if (!window.gateway?.connected) {
+  // ── Modal ──
+  function openModal() {
+    if (!modalOverlay) {
       return;
     }
-
-    try {
-      const result = await window.gateway.rpc("cron.list", {
-        includeDisabled: true,
-      });
-
-      if (result?.jobs) {
-        schedules = result.jobs;
-        render();
-      }
-    } catch (err) {
-      console.debug("[scheduling] Failed to fetch:", err.message);
-    }
-  }
-
-  // ── Modal Controls ─────────────────────────────────────────────────────────
-  function openModal() {
     editingScheduleId = null;
     selectedInterval = null;
     resetForm();
-
     modalOverlay.classList.add("open");
     modalOverlay.setAttribute("aria-hidden", "false");
-    nameInput.focus();
+    nameInput?.focus();
     document.addEventListener("keydown", onModalKey);
   }
 
   function openModalForEdit(job) {
+    if (!modalOverlay || !nameInput) {
+      return;
+    }
     editingScheduleId = job.id;
-
     nameInput.value = job.name || "";
-    taskInput.value = job.payload?.message || "";
-
-    // Determine interval type from schedule
+    if (taskInput) {
+      taskInput.value = job.payload?.message || "";
+    }
     const schedule = job.schedule;
     if (schedule?.kind === "every") {
       const ms = schedule.everyMs;
@@ -243,7 +125,6 @@
         selectInterval("weekly");
       } else {
         selectInterval("custom");
-        // Determine best unit
         if (ms % UNIT_TO_MS.weeks === 0) {
           intervalValueInput.value = ms / UNIT_TO_MS.weeks;
           intervalUnitSelect.value = "weeks";
@@ -261,7 +142,6 @@
     } else {
       selectInterval("custom");
     }
-
     modalOverlay.classList.add("open");
     modalOverlay.setAttribute("aria-hidden", "false");
     nameInput.focus();
@@ -269,6 +149,9 @@
   }
 
   function closeModal() {
+    if (!modalOverlay) {
+      return;
+    }
     modalOverlay.classList.remove("open");
     modalOverlay.setAttribute("aria-hidden", "true");
     document.removeEventListener("keydown", onModalKey);
@@ -277,13 +160,25 @@
   }
 
   function resetForm() {
-    nameInput.value = "";
-    taskInput.value = "";
-    intervalValueInput.value = "1";
-    intervalUnitSelect.value = "days";
-    timeInput.value = "09:00";
+    if (nameInput) {
+      nameInput.value = "";
+    }
+    if (taskInput) {
+      taskInput.value = "";
+    }
+    if (intervalValueInput) {
+      intervalValueInput.value = "1";
+    }
+    if (intervalUnitSelect) {
+      intervalUnitSelect.value = "days";
+    }
+    if (timeInput) {
+      timeInput.value = "09:00";
+    }
     selectedInterval = null;
-    customOptions.style.display = "none";
+    if (customOptions) {
+      customOptions.style.display = "none";
+    }
     intervalBtns.forEach((btn) => btn.classList.remove("selected"));
   }
 
@@ -293,68 +188,52 @@
     }
   }
 
-  // ── Interval Selection ─────────────────────────────────────────────────────
   function selectInterval(interval) {
     selectedInterval = interval;
-
     intervalBtns.forEach((btn) => {
       const btnInterval = btn.getAttribute("data-interval");
       btn.classList.toggle("selected", btnInterval === interval);
     });
-
-    if (interval === "custom") {
-      customOptions.style.display = "block";
-    } else {
-      customOptions.style.display = "none";
+    if (customOptions) {
+      customOptions.style.display = interval === "custom" ? "block" : "none";
     }
   }
 
-  // ── Save Schedule ──────────────────────────────────────────────────────────
+  // ── Save ──
   async function saveSchedule() {
+    if (!nameInput || !taskInput) {
+      return;
+    }
     const name = nameInput.value.trim();
     const task = taskInput.value.trim();
-
     if (!name) {
       nameInput.focus();
       return;
     }
-
     if (!task) {
       taskInput.focus();
       return;
     }
-
     if (!selectedInterval) {
-      // Default to daily if none selected
       selectInterval("daily");
     }
-
-    // Calculate everyMs based on interval selection
     let everyMs;
     if (selectedInterval === "custom") {
-      const value = parseInt(intervalValueInput.value) || 1;
-      const unit = intervalUnitSelect.value;
+      const value = parseInt(intervalValueInput?.value) || 1;
+      const unit = intervalUnitSelect?.value || "days";
       everyMs = value * UNIT_TO_MS[unit];
     } else {
       const preset = PRESETS[selectedInterval];
       everyMs = preset.value * UNIT_TO_MS[preset.unit];
     }
-
-    modalSubmit.disabled = true;
-    modalSubmit.innerHTML = `
-      <svg class="spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <circle cx="12" cy="12" r="10" stroke-dasharray="60" stroke-dashoffset="20"/>
-      </svg>
-      Saving...
-    `;
-
+    if (modalSubmit) {
+      modalSubmit.disabled = true;
+    }
     try {
       if (!window.gateway?.connected) {
         throw new Error("Gateway not connected");
       }
-
       if (editingScheduleId) {
-        // Update existing job
         await window.gateway.rpc("cron.update", {
           id: editingScheduleId,
           patch: {
@@ -364,7 +243,6 @@
           },
         });
       } else {
-        // Create new job
         await window.gateway.rpc("cron.add", {
           name,
           enabled: true,
@@ -374,32 +252,20 @@
           payload: { kind: "agentTurn", message: task },
         });
       }
-
       closeModal();
       setTimeout(fetchSchedules, 300);
     } catch (err) {
       console.error("[scheduling] Save failed:", err);
       alert("Failed to save schedule: " + (err.message || "Unknown error"));
     } finally {
-      modalSubmit.disabled = false;
-      modalSubmit.innerHTML = `
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <circle cx="12" cy="12" r="10"/>
-          <polyline points="12 6 12 12 16 14"/>
-        </svg>
-        Schedule
-      `;
+      if (modalSubmit) {
+        modalSubmit.disabled = false;
+      }
     }
   }
 
-  // ── Initialize ─────────────────────────────────────────────────────────────
+  // ── Init ──
   function init() {
-    // Add button
-    if (addBtn) {
-      addBtn.addEventListener("click", openModal);
-    }
-
-    // Modal controls
     if (modalClose) {
       modalClose.addEventListener("click", closeModal);
     }
@@ -416,16 +282,12 @@
         }
       });
     }
-
-    // Interval buttons
     intervalBtns.forEach((btn) => {
       btn.addEventListener("click", () => {
         const interval = btn.getAttribute("data-interval");
         selectInterval(interval);
       });
     });
-
-    // Submit on Enter in name field (with Ctrl/Cmd)
     if (nameInput) {
       nameInput.addEventListener("keydown", (e) => {
         if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
@@ -434,27 +296,26 @@
       });
     }
 
-    // Initial fetch
     void fetchSchedules();
-
-    // Poll every 30 seconds
     _pollInterval = setInterval(fetchSchedules, 30000);
-
-    // Also fetch on gateway connect
     window.addEventListener("gateway:connected", fetchSchedules);
     window.addEventListener("gateway:hello", fetchSchedules);
   }
 
-  // Start when DOM is ready
   if (document.readyState === "loading") {
     document.addEventListener("DOMContentLoaded", init);
   } else {
     init();
   }
 
-  // Expose for external use
+  // Public API — extended in Stage C with getActive() + openForEdit() +
+  // toggle() so the AWAITING surface can read state, edit jobs, and
+  // flip enabled flags without re-implementing the cron RPC layer.
   window.schedulingPanel = {
     refresh: fetchSchedules,
     open: openModal,
+    openForEdit: openModalForEdit,
+    getActive: () => [...schedules],
+    toggle: toggleSchedule,
   };
 })();