@symerian/symi 3.5.12 → 3.5.13

package/dist/build-info.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.12",
-  "commit": "ba937470adc8cb729ea183e67afa9e9b23fa2245",
-  "builtAt": "2026-05-06T02:37:25.750Z"
+  "version": "3.5.13",
+  "commit": "33e6d6051e6f74ada770ca1941c409ce7ba65cd2",
+  "builtAt": "2026-05-06T02:46:17.820Z"
 }

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

@@ -1 +1 @@
-74ed545b32825cef7fb4fa2f000acd88a717aaea0e2acf93d7d7c1b8ed2be576
+b6b358862b350355c1027203e25ea1b0380203d1ceff6fb6a17ee5d3259e905e

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

@@ -397,57 +397,59 @@ body {
   letter-spacing: 0.05em;
 }
 
-/* ── Model Routing list ────────────────────────────────────────────── */
-.model-routing-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-bottom: 8px;
-}
-.model-section {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-.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-item {
+/* ── Model Routing select ──────────────────────────────────────────── */
+.model-routing-select {
   width: 100%;
   display: block;
-  text-align: left;
-  padding: 6px 8px;
+  padding: 8px 22px 8px 8px;
+  margin-bottom: 6px;
   border: 1px solid var(--glass-border);
-  border-radius: 5px;
+  border-radius: 6px;
   background: rgba(255, 255, 255, 0.03);
-  color: var(--text-dim);
+  color: var(--text);
   font-family: var(--font-mono);
   font-size: 10px;
-  letter-spacing: 0.03em;
-  line-height: 1.3;
+  letter-spacing: 0.04em;
   cursor: pointer;
-  transition: all 0.15s ease;
-  white-space: normal;
-  word-break: break-word;
+  transition: all 0.2s ease;
+  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;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
-.model-item:hover {
+.model-routing-select:hover {
   border-color: var(--accent-cyan);
   color: var(--text);
 }
-.model-item.active {
-  background: rgba(0, 212, 255, 0.08);
+.model-routing-select:focus {
+  outline: none;
   border-color: var(--accent-cyan);
-  color: var(--accent-cyan);
   box-shadow: 0 0 8px rgba(0, 212, 255, 0.12);
 }
+.model-routing-select option {
+  background: #0a0a0a;
+  color: var(--text);
+  padding: 4px 0;
+}
+.model-routing-select optgroup {
+  background: #0a0a0a;
+  color: var(--accent-cyan);
+  font-style: normal;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  font-size: 10px;
+}
 .model-status {
   font-size: 10px;
   color: var(--text-dim);

package/dist/control-ui/index.html

@@ -120,41 +120,23 @@
 
       <div class="glass-panel" id="model-routing-panel">
         <div class="panel-label">MODEL ROUTING</div>
-        <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>
+        <select class="model-routing-select" id="model-toggle">
+          <option value="" disabled selected>Select model…</option>
+          <optgroup label="SPIDER">
+            <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>
+          </optgroup>
+          <optgroup label="COREWEAVE">
+            <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>
+          </optgroup>
+          <optgroup label="API">
+            <option value="api">Anthropic Claude Sonnet 4.6</option>
+          </optgroup>
+        </select>
         <div class="model-status" id="model-status">loading…</div>
       </div>
 

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

@@ -1,15 +1,13 @@
-// ── 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.
+// ── Model Routing select ─────────────────────────────────────────────
+// Single <select> with three <optgroup>s (SPIDER / COREWEAVE / API).
+// Picking an option switches `agents.defaults.model.primary` via
+// config.patch. Compact one-row presentation — no horizontal scroll,
+// no vertical bloat from listing every option in the panel.
 
 (function () {
-  // 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).
+  // <option value> → 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",
@@ -25,27 +23,29 @@
     api: "anthropic/claude-sonnet-4-6",
   };
 
-  // Reverse: model id → data-value (for setActive lookup).
+  // Reverse: model id → option 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 select = document.getElementById("model-toggle");
   const statusEl = document.getElementById("model-status");
 
-  if (!list || items.length === 0) {
+  if (!select) {
     return;
   }
 
   let currentHash = null;
 
   function setActive(primaryId) {
-    const activeValue = idToValue[primaryId];
-    items.forEach((item) => {
-      item.classList.toggle("active", item.dataset.value === activeValue);
-    });
+    const value = idToValue[primaryId];
+    if (value) {
+      select.value = value;
+    } else {
+      // Unknown model id — leave the placeholder visible.
+      select.value = "";
+    }
   }
 
   async function init() {
@@ -104,14 +104,8 @@
     }
   });
 
-  // 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];
+  select.addEventListener("change", () => {
+    const id = MODEL_IDS[select.value];
     if (id) {
       void switchToModelId(id);
     }

package/package.json

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