@symerian/symi 3.5.0 → 3.5.2

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

@@ -0,0 +1,560 @@
+// ── Subagents Panel ─────────────────────────────────────────────────────────
+// Displays active subagents and allows spawning new ones via quick-deploy or custom.
+// ─────────────────────────────────────────────────────────────────────────────
+
+"use strict";
+
+(function () {
+  // ── Agent Presets ──────────────────────────────────────────────────────────
+  const AGENT_PRESETS = {
+    research: {
+      label: "Research Agent",
+      taskTemplate: "Research and summarize: ",
+      model: "sonnet",
+      thinking: "",
+    },
+    review: {
+      label: "Code Review Agent",
+      taskTemplate: "Review this code and provide detailed feedback:\n",
+      model: "sonnet",
+      thinking: "",
+    },
+    writer: {
+      label: "Writer Agent",
+      taskTemplate: "Draft content for: ",
+      model: "sonnet",
+      thinking: "",
+    },
+    analyst: {
+      label: "Analyst Agent",
+      taskTemplate: "Analyze and report on: ",
+      model: "sonnet",
+      thinking: "",
+    },
+    planner: {
+      label: "Planner Agent",
+      taskTemplate: "Create an action plan for: ",
+      model: "sonnet",
+      thinking: "",
+    },
+    debug: {
+      label: "Debug Agent",
+      taskTemplate: "Debug and fix this issue:\n",
+      model: "sonnet",
+      thinking: "",
+    },
+    docs: {
+      label: "Documentation Agent",
+      taskTemplate: "Write documentation for: ",
+      model: "sonnet",
+      thinking: "",
+    },
+    test: {
+      label: "Test Agent",
+      taskTemplate: "Write tests for: ",
+      model: "sonnet",
+      thinking: "",
+    },
+  };
+
+  // ── State ──────────────────────────────────────────────────────────────────
+  let subagents = [];
+  let stagedAgents = []; // Array of { id, type, label, task, model, thinking }
+  let _pollInterval = null;
+  let editingAgentId = null; // Track which staged agent is being edited
+
+  // ── DOM Elements ───────────────────────────────────────────────────────────
+  const _panel = document.getElementById("subagents-panel");
+  const list = document.getElementById("subagents-list");
+  const emptyState = document.getElementById("subagents-empty");
+  const countBadge = document.getElementById("subagents-count");
+  const spawnBtn = document.getElementById("subagent-spawn-btn");
+
+  // Quick deploy elements
+  const quickDeployBtns = document.querySelectorAll(".quick-deploy-btn");
+  const _stagingBox = document.getElementById("staging-box");
+  const stagingChips = document.getElementById("staging-chips");
+  const stagingDeployBtn = document.getElementById("staging-deploy-btn");
+
+  // Modal elements
+  const modalOverlay = document.getElementById("subagent-modal-overlay");
+  const modalClose = document.getElementById("subagent-modal-close");
+  const modalCancel = document.getElementById("subagent-modal-cancel");
+  const modalSubmit = document.getElementById("subagent-modal-submit");
+  const taskInput = document.getElementById("subagent-task");
+  const labelInput = document.getElementById("subagent-label");
+  const modelSelect = document.getElementById("subagent-model");
+  const thinkingSelect = document.getElementById("subagent-thinking");
+
+  // ── Icons ──────────────────────────────────────────────────────────────────
+  const ICONS = {
+    running: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <circle cx="12" cy="12" r="3"/>
+      <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
+    </svg>`,
+    completed: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M20 6L9 17l-5-5"/>
+    </svg>`,
+    error: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <circle cx="12" cy="12" r="10"/>
+      <path d="M15 9l-6 6M9 9l6 6"/>
+    </svg>`,
+  };
+
+  // ── Staging Management ─────────────────────────────────────────────────────
+  function addToStaging(agentType) {
+    const preset = AGENT_PRESETS[agentType];
+    if (!preset) {
+      return;
+    }
+
+    const stagedAgent = {
+      id: crypto.randomUUID(),
+      type: agentType,
+      label: preset.label,
+      task: preset.taskTemplate,
+      model: preset.model,
+      thinking: preset.thinking,
+    };
+
+    stagedAgents.push(stagedAgent);
+    renderStagingChips();
+  }
+
+  function removeFromStaging(agentId) {
+    stagedAgents = stagedAgents.filter((a) => a.id !== agentId);
+    renderStagingChips();
+  }
+
+  function renderStagingChips() {
+    stagingChips.innerHTML = "";
+
+    if (stagedAgents.length === 0) {
+      stagingChips.innerHTML = '<span class="staging-empty">Select agents above</span>';
+      stagingDeployBtn.disabled = true;
+      return;
+    }
+
+    stagingDeployBtn.disabled = false;
+
+    for (const agent of stagedAgents) {
+      const chip = document.createElement("div");
+      chip.className = "staging-chip";
+      chip.setAttribute("data-agent-id", agent.id);
+
+      chip.innerHTML = `
+        <span class="staging-chip-name">${escHtml(agent.label.replace(" Agent", ""))}</span>
+        <span class="staging-chip-remove" title="Remove">×</span>
+      `;
+
+      // Click chip to edit
+      chip.addEventListener("click", (e) => {
+        if (e.target.classList.contains("staging-chip-remove")) {
+          e.stopPropagation();
+          removeFromStaging(agent.id);
+        } else {
+          openModalForEdit(agent);
+        }
+      });
+
+      stagingChips.appendChild(chip);
+    }
+  }
+
+  // ── Deploy Staged Agents ───────────────────────────────────────────────────
+  async function deployAllStaged() {
+    if (stagedAgents.length === 0) {
+      return;
+    }
+    if (!window.gateway?.connected) {
+      alert("Gateway not connected");
+      return;
+    }
+
+    stagingDeployBtn.disabled = true;
+    stagingDeployBtn.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>
+      Deploying...
+    `;
+
+    const toSpawn = [...stagedAgents];
+    let successCount = 0;
+
+    for (const agent of toSpawn) {
+      try {
+        const uuid = crypto.randomUUID();
+        const sessionKey = `agent:main:subagent:${uuid}`;
+
+        await window.gateway.rpc("agent", {
+          message: agent.task,
+          sessionKey: sessionKey,
+          deliver: false,
+          lane: "subagent",
+          label: agent.label,
+          model: agent.model || undefined,
+          thinking: agent.thinking || undefined,
+          timeout: 300,
+        });
+
+        successCount++;
+      } catch (err) {
+        console.error("[subagents] Failed to spawn:", agent.label, err);
+      }
+    }
+
+    // Clear staging
+    stagedAgents = [];
+    renderStagingChips();
+
+    // Reset button
+    stagingDeployBtn.innerHTML = `
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
+      </svg>
+      Deploy
+    `;
+
+    // Refresh subagents list
+    setTimeout(fetchSubagents, 500);
+
+    if (successCount < toSpawn.length) {
+      alert(`Deployed ${successCount} of ${toSpawn.length} agents. Check console for errors.`);
+    }
+  }
+
+  // ── Render Active Subagents ────────────────────────────────────────────────
+  function render() {
+    // Update count badge
+    const activeCount = subagents.filter((s) => s.status === "active" || !s.endedAt).length;
+    countBadge.textContent = activeCount > 0 ? activeCount : "";
+
+    // Clear existing items (except empty state)
+    const items = list.querySelectorAll(".subagent-item");
+    items.forEach((item) => item.remove());
+
+    if (subagents.length === 0) {
+      emptyState.style.display = "";
+      return;
+    }
+
+    emptyState.style.display = "none";
+
+    // Sort: running first, then by startedAt descending
+    const sorted = [...subagents].toSorted((a, b) => {
+      const aRunning = a.status === "active" || !a.endedAt;
+      const bRunning = b.status === "active" || !b.endedAt;
+      if (aRunning !== bRunning) {
+        return bRunning ? 1 : -1;
+      }
+      return (b.startedAt || 0) - (a.startedAt || 0);
+    });
+
+    // Only show top 5
+    const visible = sorted.slice(0, 5);
+
+    for (const sub of visible) {
+      const status = getStatus(sub);
+      const runtime = formatRuntime(sub);
+
+      const item = document.createElement("div");
+      item.className = "subagent-item";
+      item.setAttribute("data-status", status);
+      item.setAttribute("data-run-id", sub.runId || "");
+
+      item.innerHTML = `
+        <div class="subagent-icon">${ICONS[status] || ICONS.running}</div>
+        <div class="subagent-info">
+          <div class="subagent-label">${escHtml(sub.label || "Subagent")}</div>
+          <div class="subagent-task">${escHtml(truncate(sub.task || "", 40))}</div>
+        </div>
+        <div class="subagent-runtime">${runtime}</div>
+      `;
+
+      item.addEventListener("click", () => showSubagentDetails(sub));
+      list.appendChild(item);
+    }
+  }
+
+  function getStatus(sub) {
+    // Use status from backend if available
+    if (sub.status === "active") {
+      return "running";
+    }
+    if (sub.status === "completed") {
+      return "completed";
+    }
+    if (sub.status === "error" || sub.status === "timeout") {
+      return "error";
+    }
+    // Fallback for old format
+    if (!sub.endedAt) {
+      return "running";
+    }
+    if (sub.outcome?.status === "ok") {
+      return "completed";
+    }
+    return "error";
+  }
+
+  function formatRuntime(sub) {
+    const start = sub.startedAt;
+    const end = sub.endedAt || Date.now();
+    if (!start) {
+      return "--";
+    }
+
+    const seconds = Math.floor((end - start) / 1000);
+    if (seconds < 60) {
+      return `${seconds}s`;
+    }
+    const minutes = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    if (minutes < 60) {
+      return `${minutes}m${secs > 0 ? secs + "s" : ""}`;
+    }
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+    return `${hours}h${mins}m`;
+  }
+
+  function truncate(str, len) {
+    if (str.length <= len) {
+      return str;
+    }
+    return str.slice(0, len - 1) + "…";
+  }
+
+  // ── Fetch Subagents ────────────────────────────────────────────────────────
+  async function fetchSubagents() {
+    if (!window.gateway?.connected) {
+      return;
+    }
+
+    try {
+      const result = await window.gateway.rpc("subagents.list", {
+        sessionKey: window.SESSION_KEY || "agent:main:main",
+      });
+
+      if (result?.subagents) {
+        subagents = result.subagents;
+        render();
+      }
+    } catch (err) {
+      console.debug("[subagents] Failed to fetch:", err.message);
+    }
+  }
+
+  // ── Show Subagent Details ──────────────────────────────────────────────────
+  function showSubagentDetails(sub) {
+    const status = getStatus(sub);
+    const statusText =
+      status === "running" ? "Running" : status === "completed" ? "Completed" : "Failed";
+
+    const details = [
+      `Status: ${statusText}`,
+      `Task: ${sub.task || "N/A"}`,
+      `Label: ${sub.label || "N/A"}`,
+      `Model: ${sub.model || "Default"}`,
+      `Runtime: ${formatRuntime(sub)}`,
+      `Session: ${sub.childSessionKey || "N/A"}`,
+    ].join("\n");
+
+    console.log("[subagent]", details);
+  }
+
+  // ── Modal Controls ─────────────────────────────────────────────────────────
+  function openModal() {
+    editingAgentId = null;
+    modalOverlay.classList.add("open");
+    modalOverlay.setAttribute("aria-hidden", "false");
+    taskInput.focus();
+    document.addEventListener("keydown", onModalKey);
+  }
+
+  function openModalForEdit(stagedAgent) {
+    editingAgentId = stagedAgent.id;
+
+    // Pre-fill form with staged agent config
+    taskInput.value = stagedAgent.task;
+    labelInput.value = stagedAgent.label;
+    modelSelect.value = stagedAgent.model || "";
+    thinkingSelect.value = stagedAgent.thinking || "";
+
+    modalOverlay.classList.add("open");
+    modalOverlay.setAttribute("aria-hidden", "false");
+    taskInput.focus();
+
+    // Position cursor at end of task template
+    taskInput.setSelectionRange(taskInput.value.length, taskInput.value.length);
+
+    document.addEventListener("keydown", onModalKey);
+  }
+
+  function closeModal() {
+    modalOverlay.classList.remove("open");
+    modalOverlay.setAttribute("aria-hidden", "true");
+    document.removeEventListener("keydown", onModalKey);
+    // Reset form
+    taskInput.value = "";
+    labelInput.value = "";
+    modelSelect.value = "";
+    thinkingSelect.value = "";
+    editingAgentId = null;
+  }
+
+  function onModalKey(e) {
+    if (e.key === "Escape") {
+      closeModal();
+    }
+  }
+
+  // ── Spawn/Save Subagent ────────────────────────────────────────────────────
+  async function spawnOrSaveSubagent() {
+    const task = taskInput.value.trim();
+    if (!task) {
+      taskInput.focus();
+      return;
+    }
+
+    const label = labelInput.value.trim() || "Subagent";
+    const model = modelSelect.value || undefined;
+    const thinking = thinkingSelect.value || undefined;
+
+    // If editing a staged agent, update it instead of spawning
+    if (editingAgentId) {
+      const agent = stagedAgents.find((a) => a.id === editingAgentId);
+      if (agent) {
+        agent.task = task;
+        agent.label = label;
+        agent.model = model;
+        agent.thinking = thinking;
+        renderStagingChips();
+      }
+      closeModal();
+      return;
+    }
+
+    // Otherwise, spawn immediately (custom spawn)
+    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>
+      Spawning...
+    `;
+
+    try {
+      if (!window.gateway?.connected) {
+        throw new Error("Gateway not connected");
+      }
+
+      const uuid = crypto.randomUUID();
+      const sessionKey = `agent:main:subagent:${uuid}`;
+
+      await window.gateway.rpc("agent", {
+        message: task,
+        sessionKey: sessionKey,
+        deliver: false,
+        lane: "subagent",
+        label: label,
+        model: model,
+        thinking: thinking,
+        timeout: 300,
+      });
+
+      closeModal();
+      setTimeout(fetchSubagents, 500);
+    } catch (err) {
+      console.error("[subagents] Spawn failed:", err);
+      alert("Failed to spawn subagent: " + (err.message || "Unknown error"));
+    } finally {
+      modalSubmit.disabled = false;
+      modalSubmit.innerHTML = `
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
+        </svg>
+        Spawn
+      `;
+    }
+  }
+
+  // ── Initialize ─────────────────────────────────────────────────────────────
+  function init() {
+    // Quick deploy buttons
+    quickDeployBtns.forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const agentType = btn.getAttribute("data-agent");
+        if (agentType) {
+          addToStaging(agentType);
+        }
+      });
+    });
+
+    // Staging deploy button
+    if (stagingDeployBtn) {
+      stagingDeployBtn.addEventListener("click", deployAllStaged);
+    }
+
+    // Custom spawn button
+    if (spawnBtn) {
+      spawnBtn.addEventListener("click", openModal);
+    }
+
+    // Modal controls
+    if (modalClose) {
+      modalClose.addEventListener("click", closeModal);
+    }
+    if (modalCancel) {
+      modalCancel.addEventListener("click", closeModal);
+    }
+    if (modalSubmit) {
+      modalSubmit.addEventListener("click", spawnOrSaveSubagent);
+    }
+    if (modalOverlay) {
+      modalOverlay.addEventListener("click", (e) => {
+        if (e.target === modalOverlay) {
+          closeModal();
+        }
+      });
+    }
+
+    // Submit on Enter in task field (with Ctrl/Cmd)
+    if (taskInput) {
+      taskInput.addEventListener("keydown", (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+          void spawnOrSaveSubagent();
+        }
+      });
+    }
+
+    // Initial render of staging (empty)
+    renderStagingChips();
+
+    // Initial fetch
+    void fetchSubagents();
+
+    // Poll every 5 seconds
+    _pollInterval = setInterval(fetchSubagents, 5000);
+
+    // Also fetch on gateway connect
+    window.addEventListener("gateway:connected", fetchSubagents);
+    window.addEventListener("gateway:hello", fetchSubagents);
+  }
+
+  // Start when DOM is ready
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+
+  // Expose for external use
+  window.subagentsPanel = {
+    refresh: fetchSubagents,
+    open: openModal,
+    addToStaging: addToStaging,
+    deployAll: deployAllStaged,
+  };
+})();

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

@@ -0,0 +1,29 @@
+// ── Glass UI Shared Utilities ──────────────────────────────────────────
+// Single source of truth for common functions used across Glass UI modules.
+
+/**
+ * Escape HTML special characters to prevent XSS attacks.
+ * Handles null/undefined safely via nullish coalescing.
+ * @param {*} t - Value to escape (converted to string)
+ * @returns {string} HTML-safe string
+ */
+function escHtml(t) {
+  return String(t ?? "")
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+/**
+ * Escape a value for use in HTML attributes.
+ * Alias for escHtml since both require the same escaping.
+ */
+function escAttr(t) {
+  return escHtml(t);
+}
+
+// Expose globally for use by other Glass UI scripts
+window.escHtml = escHtml;
+window.escAttr = escAttr;