@symerian/symi 3.5.0 → 3.5.2

package/dist/control-ui/js/render.test.js

@@ -0,0 +1,112 @@
+/**
+ * Tests for render.js security and correctness
+ * Run with: node glass-ui/js/render.test.js
+ */
+
+// Mock minimal browser environment
+const escHtml = (s) =>
+  String(s ?? "")
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+
+// Test cases for XSS prevention
+// Key insight: we check that < and > are escaped, which neutralizes ALL HTML injection
+const xssTestCases = [
+  {
+    name: "Script tag in inline code - angle brackets escaped",
+    input: '<script>alert("XSS")</script>',
+    mustNotContain: "<script>", // Raw < must be escaped
+    mustContain: "&lt;script&gt;",
+  },
+  {
+    name: "Image tag XSS - angle brackets escaped",
+    input: '<img src=x onerror="alert(1)">',
+    mustNotContain: "<img", // Raw < must be escaped
+    mustContain: "&lt;img",
+  },
+  {
+    name: "Quotes escaped to prevent attribute injection",
+    input: '" onclick="alert(1)"',
+    mustNotContain: null, // All content is safe inside escaped code
+    mustContain: "&quot;", // Double quotes must be escaped
+  },
+  {
+    name: "HTML entities double-escaped",
+    input: "&amp; &lt; &gt;",
+    mustContain: "&amp;amp;",
+  },
+  {
+    name: "Single quotes escaped",
+    input: "it's a test",
+    mustContain: "&#39;",
+  },
+  {
+    name: "Normal code unchanged semantically",
+    input: "const x = 1;",
+    mustContain: "const x = 1;",
+  },
+  {
+    name: "SVG XSS vector blocked",
+    input: '<svg onload="alert(1)">',
+    mustNotContain: "<svg",
+    mustContain: "&lt;svg",
+  },
+  {
+    name: "Nested script blocked",
+    input: "<<script>script>alert(1)<</script>/script>",
+    mustNotContain: "<script",
+    mustContain: "&lt;",
+  },
+];
+
+// Simulate renderer.codespan behavior (fixed version)
+function renderCodespan(text) {
+  return `<code class="inline-code">${escHtml(text)}</code>`;
+}
+
+// Run tests
+console.log("Glass UI render.js Security Tests\n" + "=".repeat(40) + "\n");
+
+let passed = 0;
+let failed = 0;
+
+for (const tc of xssTestCases) {
+  const result = renderCodespan(tc.input);
+  let testPassed = true;
+  const errors = [];
+
+  if (tc.mustNotContain && result.includes(tc.mustNotContain)) {
+    testPassed = false;
+    errors.push(`Should NOT contain: "${tc.mustNotContain}"`);
+  }
+
+  if (tc.mustContain && !result.includes(tc.mustContain)) {
+    testPassed = false;
+    errors.push(`Should contain: "${tc.mustContain}"`);
+  }
+
+  if (testPassed) {
+    console.log(`✓ ${tc.name}`);
+    passed++;
+  } else {
+    console.log(`✗ ${tc.name}`);
+    console.log(`  Input:  ${tc.input}`);
+    console.log(`  Output: ${result}`);
+    errors.forEach((e) => console.log(`  Error:  ${e}`));
+    failed++;
+  }
+}
+
+console.log("\n" + "=".repeat(40));
+console.log(`Results: ${passed} passed, ${failed} failed`);
+
+if (failed > 0) {
+  console.log("\n❌ XSS vulnerability detected!");
+  process.exit(1);
+} else {
+  console.log("\n✅ All XSS tests passed - inline code is properly escaped");
+  process.exit(0);
+}

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

@@ -0,0 +1,461 @@
+// ── Scheduling Panel ─────────────────────────────────────────────────────────
+// Manages scheduled tasks using the cron.* RPC methods.
+// ─────────────────────────────────────────────────────────────────────────────
+
+"use strict";
+
+(function () {
+  // ── State ──────────────────────────────────────────────────────────────────
+  let schedules = [];
+  let selectedInterval = null;
+  let editingScheduleId = null;
+  let _pollInterval = null;
+
+  // ── DOM Elements ───────────────────────────────────────────────────────────
+  const _panel = document.getElementById("scheduling-panel");
+  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
+  const modalOverlay = document.getElementById("schedule-modal-overlay");
+  const modalClose = document.getElementById("schedule-modal-close");
+  const modalCancel = document.getElementById("schedule-modal-cancel");
+  const modalSubmit = document.getElementById("schedule-modal-submit");
+  const nameInput = document.getElementById("schedule-name");
+  const taskInput = document.getElementById("schedule-task");
+  const intervalBtns = document.querySelectorAll(".schedule-interval-btn");
+  const customOptions = document.getElementById("schedule-custom-options");
+  const intervalValueInput = document.getElementById("schedule-interval-value");
+  const intervalUnitSelect = document.getElementById("schedule-interval-unit");
+  const timeInput = document.getElementById("schedule-time");
+
+  // ── Interval Helpers ───────────────────────────────────────────────────────
+  // Convert UI interval to milliseconds
+  const UNIT_TO_MS = {
+    minutes: 60 * 1000,
+    hours: 60 * 60 * 1000,
+    days: 24 * 60 * 60 * 1000,
+    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 = "";
+      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;
+      }
+      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);
+    }
+  }
+
+  // ── 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", {
+          id: jobId,
+          patch: { enabled: newEnabled },
+        });
+      }
+
+      job.enabled = newEnabled;
+      render();
+    } catch (err) {
+      console.error("[scheduling] Toggle failed:", err);
+    }
+  }
+
+  // ── Fetch Schedules ────────────────────────────────────────────────────────
+  async function fetchSchedules() {
+    if (!window.gateway?.connected) {
+      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();
+    document.addEventListener("keydown", onModalKey);
+  }
+
+  function openModalForEdit(job) {
+    editingScheduleId = job.id;
+
+    nameInput.value = job.name || "";
+    taskInput.value = job.payload?.message || "";
+
+    // Determine interval type from schedule
+    const schedule = job.schedule;
+    if (schedule?.kind === "every") {
+      const ms = schedule.everyMs;
+      if (ms === UNIT_TO_MS.hours) {
+        selectInterval("hourly");
+      } else if (ms === UNIT_TO_MS.days) {
+        selectInterval("daily");
+      } else if (ms === UNIT_TO_MS.weeks) {
+        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";
+        } else if (ms % UNIT_TO_MS.days === 0) {
+          intervalValueInput.value = ms / UNIT_TO_MS.days;
+          intervalUnitSelect.value = "days";
+        } else if (ms % UNIT_TO_MS.hours === 0) {
+          intervalValueInput.value = ms / UNIT_TO_MS.hours;
+          intervalUnitSelect.value = "hours";
+        } else {
+          intervalValueInput.value = ms / UNIT_TO_MS.minutes;
+          intervalUnitSelect.value = "minutes";
+        }
+      }
+    } else {
+      selectInterval("custom");
+    }
+
+    modalOverlay.classList.add("open");
+    modalOverlay.setAttribute("aria-hidden", "false");
+    nameInput.focus();
+    document.addEventListener("keydown", onModalKey);
+  }
+
+  function closeModal() {
+    modalOverlay.classList.remove("open");
+    modalOverlay.setAttribute("aria-hidden", "true");
+    document.removeEventListener("keydown", onModalKey);
+    resetForm();
+    editingScheduleId = null;
+  }
+
+  function resetForm() {
+    nameInput.value = "";
+    taskInput.value = "";
+    intervalValueInput.value = "1";
+    intervalUnitSelect.value = "days";
+    timeInput.value = "09:00";
+    selectedInterval = null;
+    customOptions.style.display = "none";
+    intervalBtns.forEach((btn) => btn.classList.remove("selected"));
+  }
+
+  function onModalKey(e) {
+    if (e.key === "Escape") {
+      closeModal();
+    }
+  }
+
+  // ── 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";
+    }
+  }
+
+  // ── Save Schedule ──────────────────────────────────────────────────────────
+  async function saveSchedule() {
+    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;
+      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...
+    `;
+
+    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: {
+            name,
+            schedule: { kind: "every", everyMs },
+            payload: { kind: "agentTurn", message: task },
+          },
+        });
+      } else {
+        // Create new job
+        await window.gateway.rpc("cron.add", {
+          name,
+          enabled: true,
+          schedule: { kind: "every", everyMs },
+          sessionTarget: "isolated",
+          wakeMode: "now",
+          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
+      `;
+    }
+  }
+
+  // ── Initialize ─────────────────────────────────────────────────────────────
+  function init() {
+    // Add button
+    if (addBtn) {
+      addBtn.addEventListener("click", openModal);
+    }
+
+    // Modal controls
+    if (modalClose) {
+      modalClose.addEventListener("click", closeModal);
+    }
+    if (modalCancel) {
+      modalCancel.addEventListener("click", closeModal);
+    }
+    if (modalSubmit) {
+      modalSubmit.addEventListener("click", saveSchedule);
+    }
+    if (modalOverlay) {
+      modalOverlay.addEventListener("click", (e) => {
+        if (e.target === modalOverlay) {
+          closeModal();
+        }
+      });
+    }
+
+    // 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") {
+          void saveSchedule();
+        }
+      });
+    }
+
+    // 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
+  window.schedulingPanel = {
+    refresh: fetchSchedules,
+    open: openModal,
+  };
+})();