@symerian/symi 3.5.11 → 3.5.12

package/dist/build-info.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.11",
-  "commit": "0b0214f0883885802eb1f14b3287222b044689f2",
-  "builtAt": "2026-05-06T02:28:12.827Z"
+  "version": "3.5.12",
+  "commit": "ba937470adc8cb729ea183e67afa9e9b23fa2245",
+  "builtAt": "2026-05-06T02:37:25.750Z"
 }

package/dist/canvas-host/a2ui/.bundle.hash

@@ -1 +1 @@
-1191210216ce547e23cadf39bf60dc8d937eb3b4357c931c6ab5afdad1515eef
+74ed545b32825cef7fb4fa2f000acd88a717aaea0e2acf93d7d7c1b8ed2be576

package/dist/control-ui/css/style.css

@@ -397,80 +397,57 @@ body {
   letter-spacing: 0.05em;
 }
 
-/* ── Model Toggle ─────────────────────────────────────────────────── */
-.model-toggle {
+/* ── Model Routing list ────────────────────────────────────────────── */
+.model-routing-list {
   display: flex;
-  gap: 6px;
-  margin-bottom: 6px;
-}
-.model-toggle-btn {
-  flex: 1;
-  padding: 8px 4px;
-  border: 1px solid var(--glass-border);
-  border-radius: 6px;
-  background: rgba(255, 255, 255, 0.03);
-  color: var(--text-dim);
-  font-family: var(--font-mono);
-  font-size: 10px;
-  letter-spacing: 0.04em;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  white-space: nowrap;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 8px;
 }
-.model-toggle-btn:hover {
-  border-color: var(--accent-cyan);
-  color: var(--text);
+.model-section {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
 }
-.model-toggle-btn.active {
-  background: rgba(0, 212, 255, 0.08);
-  border-color: var(--accent-cyan);
-  color: var(--accent-cyan);
-  box-shadow: 0 0 8px rgba(0, 212, 255, 0.12);
+.model-section-header {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  opacity: 0.6;
+  padding: 0 2px 2px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  margin-bottom: 2px;
 }
-.model-toggle-select {
-  flex: 1;
-  padding: 8px 22px 8px 8px;
+.model-item {
+  width: 100%;
+  display: block;
+  text-align: left;
+  padding: 6px 8px;
   border: 1px solid var(--glass-border);
-  border-radius: 6px;
+  border-radius: 5px;
   background: rgba(255, 255, 255, 0.03);
   color: var(--text-dim);
   font-family: var(--font-mono);
   font-size: 10px;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.03em;
+  line-height: 1.3;
   cursor: pointer;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-  appearance: none;
-  -webkit-appearance: none;
-  background-image:
-    linear-gradient(45deg, transparent 50%, currentColor 50%),
-    linear-gradient(135deg, currentColor 50%, transparent 50%);
-  background-position:
-    calc(100% - 10px) 50%,
-    calc(100% - 6px) 50%;
-  background-size:
-    4px 4px,
-    4px 4px;
-  background-repeat: no-repeat;
+  transition: all 0.15s ease;
+  white-space: normal;
+  word-break: break-word;
 }
-.model-toggle-select:hover {
+.model-item:hover {
   border-color: var(--accent-cyan);
   color: var(--text);
 }
-.model-toggle-select.active {
-  background-color: rgba(0, 212, 255, 0.08);
+.model-item.active {
+  background: rgba(0, 212, 255, 0.08);
   border-color: var(--accent-cyan);
   color: var(--accent-cyan);
   box-shadow: 0 0 8px rgba(0, 212, 255, 0.12);
 }
-.model-toggle-select:focus {
-  outline: none;
-  border-color: var(--accent-cyan);
-}
-.model-toggle-select option {
-  background: #0a0a0a;
-  color: var(--text);
-}
 .model-status {
   font-size: 10px;
   color: var(--text-dim);

package/dist/control-ui/index.html

@@ -120,21 +120,40 @@
 
       <div class="glass-panel" id="model-routing-panel">
         <div class="panel-label">MODEL ROUTING</div>
-        <div class="model-toggle" id="model-toggle">
-          <select class="model-toggle-select" id="model-toggle-spider" data-model="spider">
-            <option value="" disabled selected>Spider ▾</option>
-            <option value="spider-gemma4">Gemma 4 31B Uncensored</option>
-            <option value="spider-qwen35">Qwen 3.5 35B</option>
-            <option value="spider-qwen35-uncen">Qwen 3.5 Uncensored</option>
-            <option value="spider-qwen36">Qwen 3.6 35B</option>
-          </select>
-          <select class="model-toggle-select" id="model-toggle-coreweave" data-model="coreweave">
-            <option value="" disabled selected>CoreWeave ▾</option>
-            <option value="coreweave1">CoreWeave 1 (Qwen 3.5 35B)</option>
-            <option value="coreweave2">CoreWeave 2 (Qwen 3.6 35B)</option>
-            <option value="coreweave3">CoreWeave 3 (Qwen 3.6 27B)</option>
-          </select>
-          <button class="model-toggle-btn" data-model="api">API</button>
+        <div class="model-routing-list" id="model-toggle">
+          <div class="model-section">
+            <div class="model-section-header">SPIDER</div>
+            <button class="model-item" data-group="spider" data-value="spider-gemma4">
+              Gemma 4 31B Uncensored
+            </button>
+            <button class="model-item" data-group="spider" data-value="spider-qwen35">
+              Qwen 3.5 35B
+            </button>
+            <button class="model-item" data-group="spider" data-value="spider-qwen35-uncen">
+              Qwen 3.5 Uncensored
+            </button>
+            <button class="model-item" data-group="spider" data-value="spider-qwen36">
+              Qwen 3.6 35B
+            </button>
+          </div>
+          <div class="model-section">
+            <div class="model-section-header">COREWEAVE</div>
+            <button class="model-item" data-group="coreweave" data-value="coreweave1">
+              CoreWeave 1 (Qwen 3.5 35B)
+            </button>
+            <button class="model-item" data-group="coreweave" data-value="coreweave2">
+              CoreWeave 2 (Qwen 3.6 35B)
+            </button>
+            <button class="model-item" data-group="coreweave" data-value="coreweave3">
+              CoreWeave 3 (Qwen 3.6 27B)
+            </button>
+          </div>
+          <div class="model-section">
+            <div class="model-section-header">API</div>
+            <button class="model-item" data-group="api" data-value="api">
+              Anthropic Claude Sonnet 4.6
+            </button>
+          </div>
         </div>
         <div class="model-status" id="model-status">loading…</div>
       </div>

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

@@ -1,78 +1,51 @@
-// ── Model Routing Toggle ─────────────────────────────────────────────
-// Spider dropdown (4 models) ↔ CoreWeave dropdown (3 endpoints) ↔ API (Anthropic).
-// Each <select> maps an option value (the provider key) to a fully
-// qualified model id; clicking switches `agents.defaults.model.primary`
-// via config.patch.
+// ── Model Routing list ───────────────────────────────────────────────
+// Vertical sectioned list (SPIDER / COREWEAVE / API) — each .model-item
+// row is a click target that switches `agents.defaults.model.primary`
+// via config.patch. Replaced the side-by-side dropdowns + button design
+// in 3.5.12 because the three controls were forcing horizontal scroll
+// inside the panel; sectioned vertical layout has no width constraint
+// and lets long model names wrap naturally.
 
 (function () {
-  // Button keys → full model id (single-button surfaces)
-  const BUTTON_MODELS = {
-    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 = {
+  // data-value (per-item) → fully-qualified model id understood by the
+  // gateway (provider/model split on first "/"; later slashes survive
+  // and are part of the model id, e.g. for HuggingFace paths).
+  const MODEL_IDS = {
+    // SPIDER
     "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",
-  };
-
-  // CoreWeave option values → full model id.  Same shape as SPIDER_MODELS;
-  // each entry corresponds to a provider block in symi.json
-  // (qwen-cw / qwen-cw2 / qwen-cw3) all hosted at *.coreweave.app.
-  const COREWEAVE_MODELS = {
+    // COREWEAVE
     coreweave1: "qwen-cw/qwen35-35b-fp8",
     coreweave2: "qwen-cw2/qwen36-35b-fp8",
     coreweave3: "qwen-cw3/qwen36-27b-fp8",
+    // API
+    api: "anthropic/claude-sonnet-4-6",
   };
 
-  const buttons = document.querySelectorAll("#model-toggle .model-toggle-btn");
-  const spiderSelect = document.getElementById("model-toggle-spider");
-  const coreweaveSelect = document.getElementById("model-toggle-coreweave");
+  // Reverse: model id → data-value (for setActive lookup).
+  const idToValue = {};
+  for (const [value, id] of Object.entries(MODEL_IDS)) {
+    idToValue[id] = value;
+  }
+
+  const list = document.getElementById("model-toggle");
+  const items = list ? list.querySelectorAll(".model-item") : [];
   const statusEl = document.getElementById("model-status");
 
-  if (!buttons.length && !spiderSelect && !coreweaveSelect) {
+  if (!list || items.length === 0) {
     return;
   }
 
   let currentHash = null;
 
-  // Reverse lookups: model id → option value, per surface
-  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;
-  }
-  const idToCoreweaveKey = {};
-  for (const [key, id] of Object.entries(COREWEAVE_MODELS)) {
-    idToCoreweaveKey[id] = key;
-  }
-
   function setActive(primaryId) {
-    const buttonKey = idToButtonKey[primaryId];
-    buttons.forEach((btn) => {
-      btn.classList.toggle("active", btn.dataset.model === buttonKey);
+    const activeValue = idToValue[primaryId];
+    items.forEach((item) => {
+      item.classList.toggle("active", item.dataset.value === activeValue);
     });
-
-    const spiderKey = idToSpiderKey[primaryId];
-    if (spiderSelect) {
-      spiderSelect.classList.toggle("active", Boolean(spiderKey));
-      spiderSelect.value = spiderKey ?? "";
-    }
-
-    const coreweaveKey = idToCoreweaveKey[primaryId];
-    if (coreweaveSelect) {
-      coreweaveSelect.classList.toggle("active", Boolean(coreweaveKey));
-      coreweaveSelect.value = coreweaveKey ?? "";
-    }
   }
 
   async function init() {
@@ -131,33 +104,19 @@
     }
   });
 
-  buttons.forEach((btn) => {
-    btn.addEventListener("click", () => {
-      const id = BUTTON_MODELS[btn.dataset.model];
-      if (id) {
-        void switchToModelId(id);
-      }
-    });
+  // Single delegated click on the list → look up data-value → switch.
+  list.addEventListener("click", (e) => {
+    const item = e.target.closest(".model-item");
+    if (!item) {
+      return;
+    }
+    const value = item.dataset.value;
+    const id = MODEL_IDS[value];
+    if (id) {
+      void switchToModelId(id);
+    }
   });
 
-  if (spiderSelect) {
-    spiderSelect.addEventListener("change", () => {
-      const id = SPIDER_MODELS[spiderSelect.value];
-      if (id) {
-        void switchToModelId(id);
-      }
-    });
-  }
-
-  if (coreweaveSelect) {
-    coreweaveSelect.addEventListener("change", () => {
-      const id = COREWEAVE_MODELS[coreweaveSelect.value];
-      if (id) {
-        void switchToModelId(id);
-      }
-    });
-  }
-
   window.addEventListener("gateway:connected", () => init());
   if (window.gateway && window.gateway.connected) {
     void init();

package/dist/plugin-sdk/index.js

@@ -4,7 +4,7 @@ import path from "node:path";
 import fs, { constants, readFileSync } from "node:fs";
 import os from "node:os";
 import { Logger } from "tslog";
-import JSON5 from "json5";
+import json5 from "json5";
 import chalk, { Chalk } from "chalk";
 import fs$1, { mkdtemp, rm } from "node:fs/promises";
 import { z } from "zod";
@@ -294,7 +294,7 @@ function readLoggingConfig() {
 	try {
 		if (!fs.existsSync(configPath)) return;
 		const raw = fs.readFileSync(configPath, "utf-8");
-		const logging = JSON5.parse(raw)?.logging;
+		const logging = json5.parse(raw)?.logging;
 		if (!logging || typeof logging !== "object" || Array.isArray(logging)) return;
 		return logging;
 	} catch {
@@ -7392,7 +7392,7 @@ function safeRealpath(target) {
 }
 const defaultResolver = {
 	readFile: (p) => fs.readFileSync(p, "utf-8"),
-	parseJson: (raw) => JSON5.parse(raw)
+	parseJson: (raw) => json5.parse(raw)
 };
 /**
 * Resolves all $include directives in a parsed config object.
@@ -10623,7 +10623,7 @@ function resolveConfigPathForDeps(deps) {
 function normalizeDeps(overrides = {}) {
 	return {
 		fs: overrides.fs ?? fs,
-		json5: overrides.json5 ?? JSON5,
+		json5: overrides.json5 ?? json5,
 		env: overrides.env ?? process.env,
 		homedir: overrides.homedir ?? (() => resolveRequiredHomeDir(overrides.env ?? process.env, os.homedir)),
 		configPath: overrides.configPath ?? "",
@@ -10634,11 +10634,11 @@ function maybeLoadDotEnvForConfig(env) {
 	if (env !== process.env) return;
 	loadDotEnv({ quiet: true });
 }
-function parseConfigJson5(raw, json5 = JSON5) {
+function parseConfigJson5(raw, json5$1 = json5) {
 	try {
 		return {
 			ok: true,
-			parsed: json5.parse(raw)
+			parsed: json5$1.parse(raw)
 		};
 	} catch (err) {
 		return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symerian/symi",
-  "version": "3.5.11",
+  "version": "3.5.12",
   "description": "Multi-channel AI gateway with extensible messaging integrations",
   "keywords": [],
   "homepage": "https://github.com/jaysteelmind/symi#readme",