@symerian/symi 3.4.30 → 3.4.31

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

@@ -1,560 +0,0 @@
-// ── 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

@@ -1,29 +0,0 @@
-// ── 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;