@yemi33/minions 0.1.2389 → 0.1.2391

package/dashboard/js/settings.js

@@ -33,6 +33,38 @@ function _isCurrentModelLoad(scope, key, token) {
   return _modelLoadEpochs[scope][key] === token;
 }
 
+// Per-open dedup cache for /api/runtimes/<name>/models payloads.
+// initRuntimeFleetUI() fans out one model fetch per agent PLUS default + CC.
+// When the whole fleet shares a runtime (the common case) those are
+// byte-identical requests, and each one makes the server reloadConfig() from
+// disk + re-run model discovery. Collapsing them to one request per distinct
+// runtime per Settings open removes the N+2 → 1 duplicate round-trips (measured
+// 10 → 1 for an 8-agent single-runtime fleet). forceRefresh (the ↻ button)
+// bypasses the cache and repopulates it with the fresh list. Transient
+// failures are NOT cached so a blip can't poison every agent cell for the open.
+let _modelFetchCache = new Map();
+function _resetModelFetchCache() { _modelFetchCache = new Map(); }
+function _fetchRuntimeModelsPayload(runtimeName, forceRefresh) {
+  if (!runtimeName) return Promise.resolve({ models: null });
+  if (!forceRefresh) {
+    const cached = _modelFetchCache.get(runtimeName);
+    if (cached) return cached;
+  }
+  const suffix = forceRefresh ? '/models/refresh' : '/models';
+  const p = fetch('/api/runtimes/' + encodeURIComponent(runtimeName) + suffix, forceRefresh ? { method: 'POST' } : undefined)
+    .then(res => (res.ok ? res.json() : null))
+    .catch(() => null)
+    .then(payload => {
+      if (!payload || !Array.isArray(payload.models)) {
+        if (_modelFetchCache.get(runtimeName) === p) _modelFetchCache.delete(runtimeName);
+        return payload || { models: null };
+      }
+      return payload;
+    });
+  _modelFetchCache.set(runtimeName, p);
+  return p;
+}
+
 async function openSettings() {
   document.getElementById('modal-title').textContent = 'Settings';
   document.getElementById('modal-body').innerHTML = '<p style="color:var(--muted)">Loading...</p>';
@@ -719,8 +751,16 @@ async function openSettings() {
   // hides unmatched rows so operators can see results without tab-hopping.
   const searchInput = document.getElementById('settings-search');
   if (searchInput) {
+    // Debounce the filter: _applySettingsSearch runs several full-DOM
+    // querySelectorAll scans and reads textContent of every [data-search] row
+    // (a forced reflow). Firing that per-keystroke made typing janky on the
+    // large Settings DOM. The field itself stays instant; only the filter
+    // computation is coalesced to the last keystroke in a ~120ms window.
+    let _searchDebounce = null;
     searchInput.addEventListener('input', function() {
-      _applySettingsSearch(searchInput.value || '');
+      const val = searchInput.value || '';
+      if (_searchDebounce) clearTimeout(_searchDebounce);
+      _searchDebounce = setTimeout(function() { _applySettingsSearch(val); }, 120);
     });
   }
 
@@ -822,6 +862,9 @@ async function initRuntimeFleetUI(engineCfg, agentsCfg) {
   const ccCliSelect = document.getElementById('set-ccCli');
   if (!cliSelect || !ccCliSelect) return;
 
+  // Fresh cache per Settings open so a config change between opens is picked up.
+  _resetModelFetchCache();
+
   // Fetch the registry; render an empty fallback on failure so the rest of the
   // settings panel still works.
   let runtimes = [];
@@ -917,11 +960,7 @@ async function loadModelsForRuntime(runtimeName, inputId, currentValue, forceRef
     return;
   }
   let payload = { models: null };
-  try {
-    const suffix = forceRefresh ? '/models/refresh' : '/models';
-    const res = await fetch('/api/runtimes/' + encodeURIComponent(runtimeName) + suffix, forceRefresh ? { method: 'POST' } : undefined);
-    if (res.ok) payload = await res.json();
-  } catch { /* fall through to free-text */ }
+  payload = await _fetchRuntimeModelsPayload(runtimeName, forceRefresh);
 
   if (!_isCurrentModelLoad('runtime', inputId, token)) return;
   const models = Array.isArray(payload.models) ? payload.models : null;
@@ -962,10 +1001,7 @@ async function loadModelsForAgent(agentId, runtimeName, currentValue) {
     return;
   }
   let payload = { models: null };
-  try {
-    const res = await fetch('/api/runtimes/' + encodeURIComponent(runtimeName) + '/models');
-    if (res.ok) payload = await res.json();
-  } catch { /* fall through to free-text */ }
+  payload = await _fetchRuntimeModelsPayload(runtimeName, false);
 
   if (!_isCurrentModelLoad('agent', agentId, token)) return;
   const models = Array.isArray(payload.models) ? payload.models : null;
@@ -1445,3 +1481,33 @@ async function removeProject(name) {
 }
 
 window.MinionsSettings = { openSettings, saveSettings, addProject, removeProject, resetSettingsToDefaults, _selectSettingsTab, _applySettingsSearch };
+
+// ── Settings embed mode (Slim UX parity — W-mrkpke07000i8ed5) ───────────
+// The Slim UX Settings modal embeds this LITERAL classic Settings surface in
+// an iframe at /settings?embed=1 (chrome-off) so there is ONE settings UI, not
+// two (CLAUDE.md "Slim UX vs Classic UX — reuse, don't fork"; mirrors the
+// Queued-work/Plans/PRs cockpit tiles). Slim and classic are separate IIFE
+// bundles with no shared runtime scope, so slim can't call openSettings()
+// in-process — it iframes the real classic screen instead. On boot, when we
+// ARE the embedded /settings page, auto-open the modal and tag <html> so the
+// embed CSS renders the settings modal full-bleed inside the iframe. Only the
+// /settings path triggers this; every other embedded page (/work, /plans,
+// /prs) is untouched.
+(function bootSettingsEmbed() {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return;
+  try {
+    var isSettingsPath = window.location.pathname.replace(/\/+$/, '') === '/settings';
+    var isEmbed = /[?&]embed=1(?:&|$)/.test(window.location.search);
+    if (!isSettingsPath || !isEmbed) return;
+  } catch (e) { return; }
+  try { document.documentElement.classList.add('embed-settings'); } catch (e) { /* no DOM attr */ }
+  function openWhenReady() {
+    if (typeof openSettings === 'function') { openSettings(); return; }
+    setTimeout(openWhenReady, 30);   // wait for the settings module + deps to register
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() { setTimeout(openWhenReady, 0); });
+  } else {
+    setTimeout(openWhenReady, 0);
+  }
+})();

package/dashboard/slim/body.html

@@ -270,16 +270,19 @@
   </div>
 </div>
 
-<!-- Settings dialog (preserved from r2): lists experimental flags so the
-     user can flip 'slim-ux' off and revert to the original dashboard. -->
+<!-- Settings dialog — embeds the LITERAL classic dashboard Settings surface
+     in an iframe (/settings?embed=1) so slim shows the FULL settings (engine
+     toggles, runtime/model, projects, agents, routing, feature flags incl.
+     slim-ux) with zero forked rendering. See dashboard/slim/js/settings.js
+     (W-mrkpke07000i8ed5 / "reuse, don't fork"). -->
 <div class="modal-bg" id="slim-settings-modal">
   <div class="modal">
     <div class="modal-header">
-      <h3>Settings &middot; Experimental flags</h3>
+      <h3>Settings</h3>
       <button id="slim-settings-close" class="icon-btn" title="Close">&times;</button>
     </div>
     <div class="modal-body" id="slim-settings-body">
-      <p>Loading flags&hellip;</p>
+      <p>Loading settings&hellip;</p>
     </div>
   </div>
 </div>

package/dashboard/slim/js/settings.js

@@ -1,80 +1,39 @@
   // ── Settings dialog ────────────────────────────────────────────
-  async function openSlimSettings() {
+  // Reuses the LITERAL classic dashboard Settings surface instead of a
+  // slim-only feature-flag list, so there is ONE settings UI, not two
+  // (W-mrkpke07000i8ed5 / CLAUDE.md "Slim UX vs Classic UX — reuse, don't
+  // fork"; mirrors the Queued-work/Plans/PRs cockpit tiles). Slim and classic
+  // are two separate IIFE bundles with no shared runtime scope, so we can't
+  // call the classic openSettings() in-process; instead we embed the real
+  // classic /settings screen in an iframe with the chrome-off ?embed=1 mode.
+  // The iframed page IS the classic Settings modal — every engine toggle,
+  // runtime/model, projects, agents, routing, feature flags (incl. slim-ux) —
+  // backed by the same /api/settings + /api/features endpoints, with zero
+  // duplicated rendering logic. Classic is reachable at /settings even with
+  // slim-ux ON (only / is taken over). Built with createElement (no innerHTML)
+  // to satisfy the dashboard no-unsanitized lint gate.
+  function openSlimSettings() {
     var modal = document.getElementById('slim-settings-modal');
     var body = document.getElementById('slim-settings-body');
-    body.innerHTML = '<p>Loading flags&hellip;</p>';
+    if (!modal || !body) return;
+    body.textContent = '';
+    var frame = document.createElement('iframe');
+    frame.className = 'slim-settings-embed';
+    frame.src = '/settings?embed=1';
+    frame.title = 'Settings';
+    frame.addEventListener('load', function() {
+      var frameDocument = frame.contentDocument;
+      if (!frameDocument) return;
+      // Capture before the classic modal handler so only the parent modal closes.
+      frameDocument.addEventListener('keydown', function(ev) {
+        if (ev.key !== 'Escape' && ev.keyCode !== 27) return;
+        ev.preventDefault();
+        ev.stopImmediatePropagation();
+        closeSlimSettings();
+      }, true);
+    });
+    body.appendChild(frame);
     modal.classList.add('open');
-    try {
-      var res = await fetch('/api/features');
-      if (!res.ok) throw new Error('HTTP ' + res.status);
-      var data = await res.json();
-      var flags = (data && data.features) || [];
-
-      // Build the body as a document fragment so we avoid .innerHTML for
-      // the dynamic parts (SEC-03 ratchet — see DYNAMIC_INNERHTML_BASELINE
-      // in test/unit.test.js). Static intro paragraph uses innerHTML
-      // because it carries a <code> tag and is a pure string literal
-      // (exempted by _isStaticInnerHtmlRhs).
-      var intro = document.createElement('p');
-      intro.innerHTML = 'Toggle <code>slim-ux</code> off to return to the original dashboard. Advanced settings (agents, projects, runtime) live there for now.';
-      var frag = document.createDocumentFragment();
-      frag.appendChild(intro);
-
-      if (flags.length === 0) {
-        var none = document.createElement('p');
-        none.innerHTML = 'No experimental flags registered. Add entries to <code>engine/features.js</code>.';
-        frag.appendChild(none);
-      } else {
-        for (var i = 0; i < flags.length; i++) {
-          var f = flags[i];
-          var row = document.createElement('div');
-          row.className = 'flag-row';
-          var info = document.createElement('div');
-          var name = document.createElement('div');
-          name.className = 'flag-name';
-          name.textContent = f.id;
-          var desc = document.createElement('div');
-          desc.className = 'flag-desc';
-          desc.textContent = f.description || '';
-          info.appendChild(name);
-          info.appendChild(desc);
-          var lbl = document.createElement('label');
-          lbl.className = 'flag-toggle';
-          var input = document.createElement('input');
-          input.type = 'checkbox';
-          input.setAttribute('data-flag', f.id);
-          if (f.enabled) input.checked = true;
-          var stateSpan = document.createElement('span');
-          stateSpan.textContent = f.enabled ? 'On' : 'Off';
-          lbl.appendChild(input);
-          lbl.appendChild(stateSpan);
-          row.appendChild(info);
-          row.appendChild(lbl);
-          frag.appendChild(row);
-        }
-      }
-
-      // TEMP: deep-link to the full dashboard's settings page. The slim
-      // intentionally doesn't reimplement that whole UI — Carlos asked us
-      // to keep settings sprawl off the main slim view.
-      var link = document.createElement('a');
-      link.className = 'settings-link';
-      link.href = '/?fullDashboard=1';
-      link.title = 'Open the full dashboard’s settings page';
-      link.textContent = 'Advanced settings → full dashboard';
-      frag.appendChild(link);
-
-      body.replaceChildren(frag);
-      var inputs = body.querySelectorAll('input[type=checkbox][data-flag]');
-      for (var j = 0; j < inputs.length; j++) {
-        inputs[j].addEventListener('change', onFlagToggle);
-      }
-    } catch (e) {
-      var err = document.createElement('p');
-      err.style.color = 'var(--red)';
-      err.textContent = 'Failed to load flags: ' + (e && e.message ? e.message : 'unknown error');
-      body.replaceChildren(err);
-    }
   }
 
   function closeSlimSettings() {
@@ -99,7 +58,7 @@
   })();
 
   // POST a feature-flag toggle; throws on a non-2xx so callers can branch on
-  // failure. Shared by onFlagToggle() and the one-click returnToClassicDashboard().
+  // failure. Used by the one-click returnToClassicDashboard().
   async function postFeatureToggle(id, enabled) {
     var res = await fetch('/api/features/toggle', {
       method: 'POST',
@@ -223,24 +182,6 @@
     bindModalClose('slim-bug-modal', 'slim-bug-close');
   })();
 
-  async function onFlagToggle(ev) {
-    var input = ev.currentTarget;
-    var id = input.getAttribute('data-flag');
-    var enabled = input.checked;
-    var label = input.parentElement.querySelector('span');
-    if (label) label.textContent = enabled ? 'On' : 'Off';
-    try {
-      await postFeatureToggle(id, enabled);
-      if (id === 'slim-ux' && !enabled) {
-        location.reload();
-      }
-    } catch (e) {
-      input.checked = !enabled;
-      if (label) label.textContent = !enabled ? 'On' : 'Off';
-      alert('Toggle failed: ' + e.message);
-    }
-  }
-
   // ── Action prompt modal (TEMP: routes through chat) ──────────────
   // Each of the 4 action buttons opens this modal with prompt text
   // tailored to the concept. On submit we drop the user's text into the

package/dashboard/slim/styles.css

@@ -690,9 +690,16 @@
     #slim-tile-modal.tile-modal--work .modal-body,
     #slim-tile-modal.tile-modal--plans .modal-body,
     #slim-tile-modal.tile-modal--prs .modal-body { padding: 0; }
+    /* W-mrkpke07000i8ed5 — the Settings modal embeds the full classic Settings
+       screen (/settings?embed=1) in an iframe; widen the modal + drop the body
+       padding so the embedded settings surface (left rail + content) gets the
+       full width/height. Mirrors the Queued-work/Plans/PRs tile treatment. */
+    #slim-settings-modal .modal { width: 1180px; max-width: calc(100vw - 32px); }
+    #slim-settings-modal .modal-body { padding: 0; }
     .slim-work-embed,
     .slim-plans-embed,
-    .slim-prs-embed {
+    .slim-prs-embed,
+    .slim-settings-embed {
       display: block; width: 100%; height: calc(100vh - 160px); min-height: 360px;
       border: 0; background: var(--bg);
     }
@@ -1705,32 +1712,6 @@
     }
     .btn-primary:hover, .btn-secondary:hover { filter: brightness(1.1); }
 
-    .flag-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 10px 0;
-      border-bottom: 1px solid var(--border);
-    }
-    .flag-row:last-child { border-bottom: none; }
-    .flag-name { font-size: var(--text-lg); font-weight: 600; }
-    .flag-desc { font-size: var(--text-base); color: var(--muted); margin-top: 2px; }
-    .flag-toggle { display: flex; align-items: center; gap: 8px; font-size: var(--text-md); }
-    .flag-toggle input { cursor: pointer; }
-    .settings-link {
-      display: block;
-      margin-top: 14px;
-      padding: 10px 12px;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      color: var(--blue);
-      text-decoration: none;
-      font-size: var(--text-md);
-      text-align: center;
-    }
-    .settings-link:hover { filter: brightness(1.1); }
-
     .modal-textarea {
       width: 100%;
       min-height: 96px;

package/dashboard/styles.css

@@ -1645,3 +1645,18 @@
      base .page-layout flex row already gives .page-content full width plus a
      bounded height to scroll within. */
   html.embed .page-content { padding: 12px 16px; overflow-y: auto; }
+
+  /* W-mrkpke07000i8ed5 — settings-embed mode. The Slim UX Settings modal iframes
+     the classic Settings surface at /settings?embed=1; settings.js#bootSettingsEmbed
+     auto-opens the modal and tags <html class="embed-settings">. Render the
+     settings modal full-bleed inside the iframe (no dim backdrop, no rounded
+     card, fill the frame), hide the empty home page-content behind it, and hide
+     the modal close X — the parent slim modal owns closing. */
+  html.embed-settings .page-content { display: none !important; }
+  html.embed-settings #modal.modal-bg { background: var(--bg); }
+  html.embed-settings #modal .modal,
+  html.embed-settings #modal .modal.modal-wide {
+    width: 100%; max-width: none; height: 100%; max-height: none;
+    border: none; border-radius: 0;
+  }
+  html.embed-settings #modal .modal-close { display: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yemi33/minions",
-  "version": "0.1.2389",
+  "version": "0.1.2391",
   "description": "Multi-agent AI dev team that runs from ~/.minions/ — five autonomous agents share a single engine, dashboard, and knowledge base",
   "bin": {
     "minions": "bin/minions.js"