@symerian/symi 3.5.0 → 3.5.2

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

@@ -0,0 +1,138 @@
+// ── Model Routing Toggle ─────────────────────────────────────────────
+// Spider dropdown (4 models) ↔ CoreWeave (Qwen vLLM) ↔ API (Anthropic).
+// The Spider dropdown is a single <select> that maps each option value
+// (the provider key) to a fully-qualified model id.
+
+(function () {
+  // Button keys → full model id
+  const BUTTON_MODELS = {
+    redsand: "qwen-cw/qwen35-35b-fp8",
+    coreweave2: "qwen-cw2/qwen36-35b-fp8",
+    api: "anthropic/claude-sonnet-4-6",
+  };
+
+  // Spider option values → full model id.  The option value is the
+  // provider key in symi.json; the model id includes the HuggingFace
+  // path after the provider prefix (parseModelRef splits on the first
+  // slash only, so slashes in the model id survive).
+  const SPIDER_MODELS = {
+    "spider-gemma4": "spider-gemma4/TrevorJS/gemma-4-31B-it-uncensored",
+    "spider-qwen35": "spider-qwen35/Qwen/Qwen3.5-35B-A3B-FP8",
+    "spider-qwen35-uncen":
+      "spider-qwen35-uncen/Li101/Qwen3.5-35B-A3B-Uncensored-Aggressive-safetensors",
+    "spider-qwen36": "spider-qwen36/Qwen/Qwen3.6-35B-A3B-FP8",
+  };
+
+  const buttons = document.querySelectorAll("#model-toggle .model-toggle-btn");
+  const spiderSelect = document.getElementById("model-toggle-spider");
+  const statusEl = document.getElementById("model-status");
+
+  if (!buttons.length && !spiderSelect) {
+    return;
+  }
+
+  let currentHash = null;
+
+  // Reverse lookups: model id → (button key | spider option value)
+  const idToButtonKey = {};
+  for (const [key, id] of Object.entries(BUTTON_MODELS)) {
+    idToButtonKey[id] = key;
+  }
+  const idToSpiderKey = {};
+  for (const [key, id] of Object.entries(SPIDER_MODELS)) {
+    idToSpiderKey[id] = key;
+  }
+
+  function setActive(primaryId) {
+    const buttonKey = idToButtonKey[primaryId];
+    buttons.forEach((btn) => {
+      btn.classList.toggle("active", btn.dataset.model === buttonKey);
+    });
+
+    const spiderKey = idToSpiderKey[primaryId];
+    if (spiderSelect) {
+      spiderSelect.classList.toggle("active", Boolean(spiderKey));
+      // Reset to the placeholder when the active model isn't a Spider one
+      spiderSelect.value = spiderKey ?? "";
+    }
+  }
+
+  async function init() {
+    try {
+      const cfg = await window.gateway.rpc("config.get", {});
+      currentHash = cfg.hash || null;
+      const primaryId = cfg.config?.agents?.defaults?.model?.primary || "";
+      setActive(primaryId);
+      window.activeModelId = primaryId;
+      statusEl.textContent = "";
+    } catch (err) {
+      console.warn("[models] init failed:", err.message);
+      statusEl.textContent = "error loading";
+    }
+  }
+
+  async function switchToModelId(newId) {
+    if (!newId) {
+      return;
+    }
+    setActive(newId);
+    window.activeModelId = newId;
+    statusEl.textContent = "switching…";
+
+    try {
+      const freshCfg = await window.gateway.rpc("config.get", {});
+      currentHash = freshCfg.hash;
+
+      await window.gateway.rpc("config.patch", {
+        baseHash: currentHash,
+        raw: JSON.stringify({
+          agents: { defaults: { model: { primary: newId } } },
+        }),
+      });
+
+      statusEl.textContent = "applied";
+      // Profile arrives via WebSocket "profile" event after reload
+    } catch (err) {
+      console.warn("[models] switch failed:", err.message);
+      statusEl.textContent = "switch failed";
+      setTimeout(init, 1500);
+    }
+  }
+
+  // Listen for profile broadcasts to update status text
+  window.addEventListener("symi:profile-changed", (e) => {
+    const profile = e.detail;
+    if (profile?.label) {
+      statusEl.textContent = profile.label;
+      // Clear after 3s
+      setTimeout(() => {
+        if (statusEl.textContent === profile.label) {
+          statusEl.textContent = "";
+        }
+      }, 3000);
+    }
+  });
+
+  buttons.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const id = BUTTON_MODELS[btn.dataset.model];
+      if (id) {
+        void switchToModelId(id);
+      }
+    });
+  });
+
+  if (spiderSelect) {
+    spiderSelect.addEventListener("change", () => {
+      const id = SPIDER_MODELS[spiderSelect.value];
+      if (id) {
+        void switchToModelId(id);
+      }
+    });
+  }
+
+  window.addEventListener("gateway:connected", () => init());
+  if (window.gateway && window.gateway.connected) {
+    void init();
+  }
+})();