@symerian/symi 3.5.20 → 3.5.21

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

@@ -1,11 +1,31 @@
-// ── Subagents Panel ─────────────────────────────────────────────────────────
-// Displays active subagents and allows spawning new ones via quick-deploy or custom.
+// ── Subagents (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 SUBAGENTS sticky panel: list
+// rendering, Quick Deploy preset buttons, staging chips, count badge,
+// custom spawn button. The sticky panel is gone; in-flight sub-agents
+// now surface in the AWAITING footer (glass-ui/js/symframe-awaiting.js).
+//
+// What survives here:
+//   - The subagent spawn modal (overlay + form + submit handler)
+//   - The fetchSubagents poll loop (30s interval + gateway:connected)
+//   - The agent preset data (AGENT_PRESETS) — kept as data for possible
+//     future Stage D re-exposure (preset picker in the spawn modal)
+//   - window.subagentsPanel exported API:
+//       refresh()           — force a fetch
+//       open()              — open the spawn modal (custom)
+//       getActive()         — current subagents snapshot
+//   - CustomEvent dispatch after each successful fetch so the AWAITING
+//     surface (and any future consumer) re-renders without polling
+//     a parallel copy of the same RPC.
 // ─────────────────────────────────────────────────────────────────────────────
 
 "use strict";
 
 (function () {
-  // ── Agent Presets ──────────────────────────────────────────────────────────
+  // Agent presets — kept as DATA only (Stage C dropped the quick-deploy
+  // UI; the spawn modal still defaults to custom). A future Stage D mode
+  // could surface these in a preset picker inside the modal.
   const AGENT_PRESETS = {
     research: {
       label: "Research Agent",
@@ -49,33 +69,15 @@
       model: "sonnet",
       thinking: "",
     },
-    test: {
-      label: "Test Agent",
-      taskTemplate: "Write tests for: ",
-      model: "sonnet",
-      thinking: "",
-    },
+    test: { label: "Test Agent", taskTemplate: "Write tests for: ", model: "sonnet", thinking: "" },
   };
 
-  // ── State ──────────────────────────────────────────────────────────────────
+  // ── 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 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
+  // ── Modal DOM refs (these elements live in their own overlay block
+  // further down in index.html and are untouched by Stage C). ──
   const modalOverlay = document.getElementById("subagent-modal-overlay");
   const modalClose = document.getElementById("subagent-modal-close");
   const modalCancel = document.getElementById("subagent-modal-cancel");
@@ -85,322 +87,57 @@
   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 ────────────────────────────────────────────────────────
+  // ── Fetch + notify ──
   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();
+        // Notify any subscriber (the AWAITING surface listens for this)
+        window.dispatchEvent(new CustomEvent("symi:subagents-updated", { detail: { subagents } }));
       }
     } 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 ─────────────────────────────────────────────────────────
+  // ── Modal ──
   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 || "";
-
+    if (!modalOverlay) {
+      return;
+    }
     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);
-
+    if (taskInput) {
+      taskInput.focus();
+    }
     document.addEventListener("keydown", onModalKey);
   }
 
   function closeModal() {
+    if (!modalOverlay) {
+      return;
+    }
     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;
+    if (taskInput) {
+      taskInput.value = "";
+    }
+    if (labelInput) {
+      labelInput.value = "";
+    }
+    if (modelSelect) {
+      modelSelect.value = "";
+    }
+    if (thinkingSelect) {
+      thinkingSelect.value = "";
+    }
   }
 
   function onModalKey(e) {
@@ -409,98 +146,53 @@
     }
   }
 
-  // ── Spawn/Save Subagent ────────────────────────────────────────────────────
-  async function spawnOrSaveSubagent() {
+  // ── Spawn (custom-only path; preset staging dropped in Stage C) ──
+  async function spawnFromModal() {
+    if (!taskInput) {
+      return;
+    }
     const task = taskInput.value.trim();
     if (!task) {
       taskInput.focus();
       return;
     }
+    const label = (labelInput?.value || "").trim() || "Custom Subagent";
+    const model = modelSelect?.value || undefined;
+    const thinking = thinkingSelect?.value || undefined;
 
-    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;
+    if (modalSubmit) {
+      modalSubmit.disabled = true;
     }
-
-    // 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,
+        sessionKey,
         deliver: false,
         lane: "subagent",
-        label: label,
-        model: model,
-        thinking: thinking,
+        label,
+        model,
+        thinking,
         timeout: 300,
       });
-
       closeModal();
       setTimeout(fetchSubagents, 500);
     } catch (err) {
-      console.error("[subagents] Spawn failed:", err);
+      console.error("[subagents] Failed to spawn:", 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
-      `;
+      if (modalSubmit) {
+        modalSubmit.disabled = false;
+      }
     }
   }
 
-  // ── Initialize ─────────────────────────────────────────────────────────────
+  // ── Init ──
   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);
@@ -509,7 +201,7 @@
       modalCancel.addEventListener("click", closeModal);
     }
     if (modalSubmit) {
-      modalSubmit.addEventListener("click", spawnOrSaveSubagent);
+      modalSubmit.addEventListener("click", spawnFromModal);
     }
     if (modalOverlay) {
       modalOverlay.addEventListener("click", (e) => {
@@ -518,42 +210,34 @@
         }
       });
     }
-
-    // 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();
+          void spawnFromModal();
         }
       });
     }
 
-    // Initial render of staging (empty)
-    renderStagingChips();
-
-    // Initial fetch
+    // Initial fetch + 5-sec polling cycle (matches pre-Stage-C cadence)
     void fetchSubagents();
-
-    // Poll every 5 seconds
     _pollInterval = setInterval(fetchSubagents, 5000);
 
-    // Also fetch on gateway connect
+    // Fetch on gateway connect / reconnect
     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
+  // Public API — kept stable across the Stage C refactor.
   window.subagentsPanel = {
     refresh: fetchSubagents,
     open: openModal,
-    addToStaging: addToStaging,
-    deployAll: deployAllStaged,
+    getActive: () => [...subagents],
+    presets: AGENT_PRESETS,
   };
 })();