@aria-framework/ai 0.15.0 → 0.17.1

package/browser/ai-jobs.js

@@ -0,0 +1,227 @@
+/**
+ * Reordering the endpoints that serve one job.
+ *
+ * ── WHAT IS BEING EDITED ────────────────────────────────────────────────────────────────────────
+ * A path: `a → b → c`. The first endpoint that answers serves the job; the rest are its fallbacks,
+ * tried in order. So the ONLY thing that matters here is sequence, and the widget is a list you can
+ * move things up and down in — not a grid of checkboxes with a number beside each, which is what
+ * this replaced and which made you compute the order in your head before typing it in.
+ *
+ * ── TWO WAYS TO MOVE, ON PURPOSE ────────────────────────────────────────────────────────────────
+ * Drag for a mouse, and ↑/↓ buttons for everything else. The buttons are not a fallback for when
+ * drag fails; they are the accessible path and the precise one. Drag-only reordering is unusable
+ * from a keyboard and awkward on a trackpad for a list of three, which is the size this list
+ * actually is.
+ *
+ * ── THE ORDER IS RENUMBERED FROM THE DOM, ONCE, ON SUBMIT ───────────────────────────────────────
+ * Positions are typed into hidden fields because a form posts in DOCUMENT order and the handler
+ * reads `position_<id>` — a list that relied on serialisation order would be silently
+ * un-reorderable. Rather than keep those fields in step through every move, add and remove, they
+ * are rebuilt from the list itself at the moment of submitting. One place to be right, and it is
+ * the place where being wrong would matter.
+ *
+ * ── NOTHING CHOSEN IS A CONFIGURATION ───────────────────────────────────────────────────────────
+ * An empty path means "every enabled endpoint, in listed order", which is a working default and not
+ * a missing setting. The note saying so appears exactly when the list empties, because that is the
+ * moment somebody would otherwise think they had broken it.
+ */
+(function () {
+  'use strict';
+
+  function card(node) { return node.closest('[data-job]'); }
+  function listOf(c) { return c.querySelector('[data-job-list]'); }
+
+  /** One element, with its text set as TEXT. There is no path here that builds markup from a value. */
+  function el(tag, cls, text, attrs) {
+    var n = document.createElement(tag);
+    if (cls) n.className = cls;
+    if (text) n.textContent = text;
+    if (attrs) Object.keys(attrs).forEach(function (k) { n.setAttribute(k, attrs[k]); });
+    return n;
+  }
+
+  /** Renumber the visible ranks, and show the default note exactly when the path is empty. */
+  function refresh(c) {
+    var list = listOf(c);
+    if (!list) return;
+    var items = list.querySelectorAll('[data-job-item]');
+    for (var i = 0; i < items.length; i += 1) {
+      var rank = items[i].querySelector('[data-job-rank]');
+      if (rank) rank.textContent = String(i + 1);
+    }
+    var note = c.querySelector('[data-job-empty]');
+    if (note) note.hidden = items.length > 0;
+  }
+
+  function setMode(c, editing) {
+    var view = c.querySelector('[data-job-view]');
+    var form = c.querySelector('[data-job-edit]');
+    if (!view || !form) return;
+    view.hidden = editing;
+    form.hidden = !editing;
+    if (editing) {
+      refresh(c);
+      var first = form.querySelector('[data-job-up], [data-job-add], button[type="submit"]');
+      if (first) first.focus();
+    }
+  }
+
+  /** Put an endpoint back in the pool, in a stable place rather than wherever it was removed from. */
+  function toPool(c, id) {
+    var pool = c.querySelector('[data-job-pool]');
+    if (!pool) return;
+    var existing = pool.querySelector('[data-job-add="' + id + '"]');
+    if (existing) { existing.hidden = false; return; }
+    var b = document.createElement('button');
+    b.type = 'button';
+    b.className = 'btn btn-sm btn-outline-secondary font-monospace';
+    b.setAttribute('data-job-add', id);
+    b.textContent = '+ ' + id;
+    pool.appendChild(b);
+  }
+
+  document.addEventListener('click', function (ev) {
+    var open = ev.target.closest('[data-job-edit-open]');
+    if (open) { setMode(card(open), true); return; }
+
+    var cancel = ev.target.closest('[data-job-cancel]');
+    if (cancel) {
+      // A CANCEL THAT LEFT THE LIST REARRANGED would be a lie. Reloading is blunt but it is the
+      // only thing that is certainly correct, and this is not a hot path.
+      window.location.reload();
+      return;
+    }
+
+    var up = ev.target.closest('[data-job-up]');
+    var down = ev.target.closest('[data-job-down]');
+    if (up || down) {
+      var item = (up || down).closest('[data-job-item]');
+      var c = card(item);
+      if (up && item.previousElementSibling) {
+        item.parentNode.insertBefore(item, item.previousElementSibling);
+      } else if (down && item.nextElementSibling) {
+        item.parentNode.insertBefore(item.nextElementSibling, item);
+      }
+      refresh(c);
+      // KEEP THE FOCUS ON THE BUTTON THAT MOVED. Without this a keyboard user presses ↓, focus
+      // returns to the top of the document, and the list can only be reordered one step per visit.
+      (up || down).focus();
+      return;
+    }
+
+    var remove = ev.target.closest('[data-job-remove]');
+    if (remove) {
+      var row = remove.closest('[data-job-item]');
+      var c2 = card(row);
+      var id = row.getAttribute('data-job-item');
+      row.parentNode.removeChild(row);
+      toPool(c2, id);
+      refresh(c2);
+      return;
+    }
+
+    var add = ev.target.closest('[data-job-add]');
+    if (add) {
+      var c3 = card(add);
+      var list = listOf(c3);
+      if (!list) return;
+      var addId = add.getAttribute('data-job-add');
+      // BUILT AS NODES, never as a markup string. The id is a value an operator typed, and this is
+      // the one place on this screen it would be assembled into HTML — so it is not assembled into
+      // HTML at all. Every string here reaches the page through textContent.
+      var li = document.createElement('li');
+      li.className = 'd-flex align-items-center gap-2 border rounded px-2 py-2 mb-1 bg-body-tertiary';
+      li.setAttribute('draggable', 'true');
+      li.setAttribute('data-job-item', addId);
+
+      li.appendChild(el('span', 'text-body-tertiary', '⠿', { 'aria-hidden': 'true', style: 'cursor:grab' }));
+      li.appendChild(el('span',
+        'badge rounded-pill border bg-body-secondary text-body-secondary font-monospace fw-normal',
+        '', { 'data-job-rank': '' }));
+      li.appendChild(el('span', 'flex-grow-1 font-monospace small', addId));
+
+      var group = el('span', 'btn-group btn-group-sm', '', { role: 'group' });
+      [['data-job-up', '↑', 'Move ' + addId + ' earlier'],
+        ['data-job-down', '↓', 'Move ' + addId + ' later'],
+        ['data-job-remove', '✕', 'Remove ' + addId + ' from this job']].forEach(function (b) {
+        var btn = el('button', 'btn btn-outline-secondary', b[1], { type: 'button', 'aria-label': b[2] });
+        btn.setAttribute(b[0], '');
+        group.appendChild(btn);
+      });
+      li.appendChild(group);
+      // ADDED AT THE END, because a new fallback goes behind the ones already trusted. Adding at
+      // the front would silently repoint the job at a machine nobody asked to promote.
+      list.appendChild(li);
+      add.hidden = true;
+      refresh(c3);
+      return;
+    }
+  });
+
+  // ── drag, for a mouse ─────────────────────────────────────────────────────────────────────────
+  var dragging = null;
+
+  document.addEventListener('dragstart', function (ev) {
+    var item = ev.target.closest && ev.target.closest('[data-job-item]');
+    if (!item) return;
+    dragging = item;
+    item.style.opacity = '.5';
+    if (ev.dataTransfer) {
+      ev.dataTransfer.effectAllowed = 'move';
+      // Firefox will not start a drag at all without data set on the transfer.
+      try { ev.dataTransfer.setData('text/plain', item.getAttribute('data-job-item')); } catch (e) { /* older browsers */ }
+    }
+  });
+
+  document.addEventListener('dragend', function () {
+    if (!dragging) return;
+    dragging.style.opacity = '';
+    var c = card(dragging);
+    dragging = null;
+    if (c) refresh(c);
+  });
+
+  document.addEventListener('dragover', function (ev) {
+    if (!dragging) return;
+    var over = ev.target.closest && ev.target.closest('[data-job-item]');
+    if (!over || over === dragging) return;
+    // Only within the SAME job. Two jobs are two independent paths, and dragging between them would
+    // mean something nobody asked for.
+    if (card(over) !== card(dragging)) return;
+    ev.preventDefault();
+    var rect = over.getBoundingClientRect();
+    var after = (ev.clientY - rect.top) > rect.height / 2;
+    over.parentNode.insertBefore(dragging, after ? over.nextSibling : over);
+  });
+
+  document.addEventListener('drop', function (ev) { if (dragging) ev.preventDefault(); });
+
+  // ── submit: the DOM order becomes the posted order ────────────────────────────────────────────
+  document.addEventListener('submit', function (ev) {
+    var form = ev.target;
+    if (!form || !form.hasAttribute || !form.hasAttribute('data-job-edit')) return;
+    var c = card(form);
+    var list = listOf(c);
+    if (!list) return;
+
+    // Rebuild rather than reconcile: every previous field goes, and the list writes its own.
+    var old = form.querySelectorAll('[data-job-field]');
+    for (var i = 0; i < old.length; i += 1) old[i].parentNode.removeChild(old[i]);
+
+    var items = list.querySelectorAll('[data-job-item]');
+    for (var j = 0; j < items.length; j += 1) {
+      var id = items[j].getAttribute('data-job-item');
+      form.appendChild(hidden('endpoint', id));
+      form.appendChild(hidden('position_' + id, String(j)));
+    }
+  });
+
+  function hidden(name, value) {
+    var i = document.createElement('input');
+    i.type = 'hidden';
+    i.name = name;
+    i.value = value;
+    i.setAttribute('data-job-field', '');
+    return i;
+  }
+})();

package/browser/ai-panels.js

@@ -1,113 +1,138 @@
-/**
- * The fold on the Inference list, and prefilling the supervisor form from a panel.
- *
- * WHY ANYTHING FOLDS. A stable stack is four engines, three credentials, a certificate fingerprint
- * and a verification report — worth having, not worth reading every time you open this page to do
- * something else. Folded, a panel is one line that still carries the whole verdict: status, the
- * count of what depends on it, all three credentials and when it was last checked. Folding hides
- * detail; it must never hide the reason you would have opened it.
- *
- * A PANEL WITH A PROBLEM IGNORES WHAT YOU REMEMBERED. `data-panel-attention` is stamped by the
- * server on anything with a missing engine, an expiring certificate, a failed check or a nearly
- * spent cap. Those open and stay open. Attention beats tidiness — the alternative is a page that
- * quietly honours a fold you chose last week and hides the thing that broke yesterday.
- *
- * THE PREFERENCE IS PER BROWSER AND DISPOSABLE. It is a convenience about how a page looks to one
- * person, so localStorage is the right home and losing it costs nothing. Every access is guarded:
- * a browser set to block site data throws on read, and a settings page must not break because
- * somebody tightened their privacy settings.
- */
-(function () {
-  'use strict';
-
-  var KEY = 's101.ai.panels';
-
-  function readPrefs() {
-    try {
-      return JSON.parse(window.localStorage.getItem(KEY) || '{}') || {};
-    } catch (e) {
-      return {};
-    }
-  }
-
-  function writePref(id, open) {
-    try {
-      var prefs = readPrefs();
-      prefs[id] = !!open;
-      window.localStorage.setItem(KEY, JSON.stringify(prefs));
-    } catch (e) { /* private window, or site data blocked — the fold still works for this visit */ }
-  }
-
-  function bodyOf(panel) {
-    var btn = panel.querySelector('[data-panel-toggle]');
-    if (!btn) return null;
-    return document.getElementById(btn.getAttribute('aria-controls'));
-  }
-
-  function setOpen(panel, open, remember) {
-    var btn = panel.querySelector('[data-panel-toggle]');
-    var body = bodyOf(panel);
-    if (!btn || !body) return;
-    // `hidden`, not a style: the server renders the closed state the same way, so a panel does not
-    // flicker open on load before this script runs.
-    body.hidden = !open;
-    btn.setAttribute('aria-expanded', open ? 'true' : 'false');
-    panel.classList.toggle('panel-open', open);
-    if (remember) writePref(panel.getAttribute('data-panel'), open);
-  }
-
-  function restore() {
-    var prefs = readPrefs();
-    var panels = document.querySelectorAll('[data-panel]');
-    for (var i = 0; i < panels.length; i += 1) {
-      var panel = panels[i];
-      var id = panel.getAttribute('data-panel');
-      // The server already opened this one and means it. Do not consult the preference at all —
-      // reading it and then ignoring it is the same thing, but invites somebody to "fix" it later.
-      if (panel.hasAttribute('data-panel-attention')) {
-        setOpen(panel, true, false);
-        continue;
-      }
-      if (Object.prototype.hasOwnProperty.call(prefs, id)) setOpen(panel, !!prefs[id], false);
-    }
-  }
-
-  document.addEventListener('click', function (ev) {
-    var toggle = ev.target.closest('[data-panel-toggle]');
-    if (toggle) {
-      var panel = toggle.closest('[data-panel]');
-      if (!panel) return;
-      var body = bodyOf(panel);
-      setOpen(panel, !!(body && body.hidden), true);
-      return;
-    }
-
-    // EDIT PREFILLS FROM THE PANEL, so changing a stack is not retyping it.
-    //
-    // The two secrets stay BLANK on purpose. Blank means keep, which is the rule the handler
-    // already follows, and it is why correcting an address cannot cost you the credentials. There
-    // is no read-back to prefill them with in any case: they are write-only by design.
-    var edit = ev.target.closest('[data-lmx-edit]');
-    if (!edit) return;
-    var src = document.querySelector('[data-lmx-id="' + edit.getAttribute('data-lmx-edit') + '"]');
-    var form = document.querySelector('#lmx-new form');
-    if (!src || !form) return;
-    var set = function (name, value) {
-      var field = form.querySelector('[name="' + name + '"]');
-      if (field) field.value = value == null ? '' : value;
-    };
-    set('id', src.getAttribute('data-lmx-id'));
-    set('label', src.getAttribute('data-lmx-label'));
-    set('status_url', src.getAttribute('data-lmx-url'));
-    set('status_token', '');
-    set('engines_key', '');
-    var heading = document.querySelector('#lmx-new .card-title');
-    if (heading) heading.textContent = 'Change ' + (src.getAttribute('data-lmx-label') || src.getAttribute('data-lmx-id'));
-  });
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', restore);
-  } else {
-    restore();
-  }
-})();
+/**
+ * The fold on the Inference list, and prefilling the supervisor form from a panel.
+ *
+ * WHY ANYTHING FOLDS. A stable stack is four engines, three credentials, a certificate fingerprint
+ * and a verification report — worth having, not worth reading every time you open this page to do
+ * something else. Folded, a panel is one line that still carries the whole verdict: status, the
+ * count of what depends on it, all three credentials and when it was last checked. Folding hides
+ * detail; it must never hide the reason you would have opened it.
+ *
+ * A PANEL WITH A PROBLEM IGNORES WHAT YOU REMEMBERED. `data-panel-attention` is stamped by the
+ * server on anything with a missing engine, an expiring certificate, a failed check or a nearly
+ * spent cap. Those open and stay open. Attention beats tidiness — the alternative is a page that
+ * quietly honours a fold you chose last week and hides the thing that broke yesterday.
+ *
+ * THE PREFERENCE IS PER BROWSER AND DISPOSABLE. It is a convenience about how a page looks to one
+ * person, so localStorage is the right home and losing it costs nothing. Every access is guarded:
+ * a browser set to block site data throws on read, and a settings page must not break because
+ * somebody tightened their privacy settings.
+ */
+(function () {
+  'use strict';
+
+  var KEY = 's101.ai.panels';
+
+  function readPrefs() {
+    try {
+      return JSON.parse(window.localStorage.getItem(KEY) || '{}') || {};
+    } catch (e) {
+      return {};
+    }
+  }
+
+  function writePref(id, open) {
+    try {
+      var prefs = readPrefs();
+      prefs[id] = !!open;
+      window.localStorage.setItem(KEY, JSON.stringify(prefs));
+    } catch (e) { /* private window, or site data blocked — the fold still works for this visit */ }
+  }
+
+  function bodyOf(panel) {
+    var btn = panel.querySelector('[data-panel-toggle]');
+    if (!btn) return null;
+    return document.getElementById(btn.getAttribute('aria-controls'));
+  }
+
+  function setOpen(panel, open, remember) {
+    var btn = panel.querySelector('[data-panel-toggle]');
+    var body = bodyOf(panel);
+    if (!btn || !body) return;
+    // `hidden`, not a style: the server renders the closed state the same way, so a panel does not
+    // flicker open on load before this script runs.
+    body.hidden = !open;
+    btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+    panel.classList.toggle('panel-open', open);
+    if (remember) writePref(panel.getAttribute('data-panel'), open);
+  }
+
+  function restore() {
+    var prefs = readPrefs();
+    var panels = document.querySelectorAll('[data-panel]');
+    for (var i = 0; i < panels.length; i += 1) {
+      var panel = panels[i];
+      var id = panel.getAttribute('data-panel');
+      // The server already opened this one and means it. Do not consult the preference at all —
+      // reading it and then ignoring it is the same thing, but invites somebody to "fix" it later.
+      if (panel.hasAttribute('data-panel-attention')) {
+        setOpen(panel, true, false);
+        continue;
+      }
+      if (Object.prototype.hasOwnProperty.call(prefs, id)) setOpen(panel, !!prefs[id], false);
+    }
+  }
+
+  document.addEventListener('click', function (ev) {
+    var toggle = ev.target.closest('[data-panel-toggle]');
+    if (toggle) {
+      var panel = toggle.closest('[data-panel]');
+      if (!panel) return;
+      var body = bodyOf(panel);
+      setOpen(panel, !!(body && body.hidden), true);
+      return;
+    }
+
+    // ── EDITING A STACK HAPPENS IN THE PANEL ────────────────────────────────────────────────────
+    //
+    // It used to happen in a form at the foot of the page, and Edit scrolled you down to it — away
+    // from the stack you were reading, into a form that also served as "Add a supervisor" and said
+    // nothing about which stack it had been filled with. Nothing needs prefilling now: every panel
+    // renders its own form, from the server, with its own values already in it.
+    var open = ev.target.closest('[data-stack-edit-open]');
+    if (open) { stackMode(open.closest('[data-stack]'), true); return; }
+
+    var cancel = ev.target.closest('[data-stack-cancel]');
+    if (cancel) {
+      var panel2 = cancel.closest('[data-stack]');
+      // A NEW stack has no reading half to go back to, so cancelling it puts the blank panel away.
+      if (panel2 && panel2.hasAttribute('data-stack-new')) { panel2.hidden = true; return; }
+      // Otherwise reload rather than restore: a Cancel that left half-typed values behind, ready to
+      // be posted by the next Save, would be worse than the extra request.
+      window.location.reload();
+      return;
+    }
+
+    // "Add LMX" reveals the blank panel that is already on the page, at the top of the list.
+    var add = ev.target.closest('[data-stack-add]');
+    if (add) {
+      var blank = document.querySelector('[data-stack-new]');
+      if (!blank) return;
+      blank.hidden = false;
+      blank.scrollIntoView({ block: 'nearest' });
+      var id = blank.querySelector('[name="id"]');
+      if (id) id.focus();
+    }
+  });
+
+  /** Swap one stack panel between reading and editing. */
+  function stackMode(panel, editing) {
+    if (!panel) return;
+    var view = panel.querySelector('[data-stack-view]');
+    var form = panel.querySelector('[data-stack-edit]');
+    if (!view || !form) return;
+    view.hidden = editing;
+    form.hidden = !editing;
+    if (editing) {
+      // The id is readonly on an existing stack, so focus the first field somebody can actually
+      // change rather than one that will not accept a keystroke.
+      var first = form.querySelector('[name="label"]') || form.querySelector('[name="status_url"]');
+      if (first) first.focus();
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', restore);
+  } else {
+    restore();
+  }
+})();

package/lmxStatus.js

@@ -60,7 +60,12 @@ function describeEngine(e) {
   if (!e) return e;
   return Object.assign({}, e, {
     modelName: modelName(e.model),
-    reasoning: e.reasoning || reasoningLabel(e.model) || null
+    // ONLY FOR AN ENGINE THAT REASONS. The flag is matched on the model NAME, and an embedding
+    // model is very often the same family as a chat one — `Qwen3-Embedding-0.6B` matches every
+    // pattern `qwen3-35b-instruct` does. Labelling it made the panel promise a flag on a call that
+    // has no reasoning to configure and would never carry one, which is worse than saying nothing:
+    // the whole reason this line exists is that an operator cannot otherwise tell what gets sent.
+    reasoning: (e.role && e.role !== 'chat') ? null : (e.reasoning || reasoningLabel(e.model) || null)
   });
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aria-framework/ai",
   "description": "Aria App Framework \u2014 AI module. A dependency-injected model seam (createAiClient) over several providers (LM Studio / OpenAI-compatible / Anthropic), with a fact-preservation guard, generic Polish and Generate writing engines, and a browser polish widget. Prompts and config stay in the consuming app.",
-  "version": "0.15.0",
+  "version": "0.17.1",
   "license": "UNLICENSED",
   "private": false,
   "publishConfig": {
@@ -29,7 +29,8 @@
     "lmxVerify.js",
     "lmxStore.js",
     "lmxStatus.js",
-    "browser/ai-panels.js"
+    "browser/ai-panels.js",
+    "browser/ai-jobs.js"
   ],
   "peerDependencies": {
     "@aria-framework/db-worker": ">=0.7.0",
@@ -44,7 +45,7 @@
     }
   },
   "scripts": {
-    "test": "node test/smoke.js && node test/usageStore.js && node test/providerStore.js && node test/speedStore.js && node test/health.js && node test/listModels.js && node test/benchmark.js && node test/lmxDiscovery.js && node test/lmx.js && node test/lmxVerify.js && node test/lmxStore.js && node test/lmxStatus.js && node test/packaging.js && node test/views.js"
+    "test": "node test/smoke.js && node test/usageStore.js && node test/providerStore.js && node test/speedStore.js && node test/health.js && node test/listModels.js && node test/benchmark.js && node test/lmxDiscovery.js && node test/lmx.js && node test/lmxVerify.js && node test/lmxStore.js && node test/lmxStatus.js && node test/jobCard.js && node test/packaging.js && node test/views.js"
   },
   "devDependencies": {
     "undici": "^8.10.0",

package/views/ai/job-card.ejs

@@ -0,0 +1,170 @@
+<%# One job, and the path of endpoints that serves it.
+    ────────────────────────────────────────────────────────────────────────────────────────────
+    TWO MODES, NOT A FOLD. A stack panel folds because its detail is worth reading occasionally; a
+    job's detail is a thing you EDIT, and the editing controls are useless the other 99% of the
+    time. So the card reads as a sentence — this job, this path, this is what it is for — until
+    somebody says they want to change it.
+
+    THE PATH IS THE HEADLINE, because it is the only part that varies and the only part anybody
+    comes here to check. `a → b → c` is the whole configuration of a job in one line: the first
+    that answers serves, the rest are its fallbacks in order.
+
+    ORDER IS CARRIED IN TYPED POSITIONS, never in the order the browser serialises fields. A form
+    posts in document order, so a list that relied on that would be silently un-reorderable — and
+    the handler this posts to already reads `position_<id>` for exactly that reason. The list is
+    renumbered from its own DOM order on submit, so what you see is what is sent.
+
+    ASSIGNED IS NOT THE SAME AS RESOLVED. A job with no assignment is not unconfigured, it is
+    following the default — every enabled endpoint in listed order — and saying so stops somebody
+    "fixing" a job that is already doing the right thing. A job whose assigned endpoints are all
+    disabled resolves to nothing at all, which is a different and much worse state.
+
+    Locals:
+      job        { id, label, character, detail }
+      assigned   [endpointId] explicitly chosen for this job, in order (may be empty)
+      resolved   [endpointId] what would actually serve right now, in order
+      endpoints  [{ id, label, enabled }] every endpoint that exists
+      spend      { calls, total_tokens } | null
+      canEdit    render the edit affordance at all
+      csrfToken  () => token
+      basePath   where this app mounts its AI admin, e.g. '/admin/ai'
+%>
+<%
+  var _edit = (typeof canEdit !== 'undefined') && canEdit;
+  var _base = (typeof basePath !== 'undefined' && basePath) ? basePath : '/admin/ai';
+  var _csrf = (typeof csrfToken === 'function') ? csrfToken : function () { return ''; };
+  var _assigned = assigned || [];
+  var _resolved = resolved || [];
+  var _eps = endpoints || [];
+  var _spend = (typeof spend !== 'undefined') ? spend : null;
+  var _isDefault = !_assigned.length;
+  var _byId = {};
+  _eps.forEach(function (e) { _byId[e.id] = e; });
+  // The path being EDITED is the assignment, not the resolution: editing what is currently serving
+  // would silently drop a disabled endpoint from the assignment the moment anybody pressed Save.
+  var _path = _assigned.slice();
+  var _rest = _eps.filter(function (e) { return _path.indexOf(e.id) === -1; });
+%>
+<div class="border rounded mb-2" data-job="<%= job.id %>">
+
+  <%# ── READING MODE ────────────────────────────────────────────────────────────────────────── %>
+  <div class="p-3" data-job-view>
+    <%# THE ACTIONS STAY ON THE RIGHT, whatever the description does.
+        `flex-wrap` plus a growing child with no `min-width: 0` is the classic way to lose a
+        button: a flex item will not shrink below its content's intrinsic width, so a long
+        description keeps the text column at full width, the actions wrap onto a line of their own,
+        and `justify-content-between` then puts that lone item at the START — bottom LEFT, which is
+        precisely where the Edit button went.
+        `min-width: 0` lets the text column shrink so its own text wraps instead; `flex-shrink-0`
+        keeps the buttons their natural size; and with no wrapping there is no second line to fall
+        onto. %>
+    <div class="d-flex justify-content-between align-items-start gap-3">
+      <div class="flex-grow-1" style="min-width:0">
+        <div class="d-flex align-items-center gap-2 flex-wrap">
+          <strong><%= job.label %></strong>
+          <span class="badge border bg-body-tertiary text-body-secondary text-uppercase fw-semibold"><%= job.character %></span>
+          <% if (_isDefault) { %>
+            <span class="badge rounded-pill border bg-body-secondary text-body-secondary fw-semibold">default</span>
+          <% } %>
+        </div>
+        <%# THE PATH, directly under the name — the one line that says how this job is configured. %>
+        <div class="font-monospace small mt-1" style="word-break:break-all">
+          <% if (_resolved.length) { %>
+            <% _resolved.forEach(function (id, i) { %><% if (i) { %><span class="text-body-tertiary"> → </span><% } %><span class="<%= i ? 'text-body-secondary' : '' %>"><%= id %></span><% }) %>
+          <% } else { %>
+            <span class="text-danger">nothing available — every endpoint for this job is disabled or missing</span>
+          <% } %>
+        </div>
+        <div class="form-text mt-1 mb-0"><%= job.detail %></div>
+      </div>
+
+      <div class="text-end d-flex flex-column align-items-end gap-2 flex-shrink-0">
+        <%# WHAT THIS JOB COSTS, which is the number worth acting on: a job can be pointed at a
+            cheaper machine, run less often, or switched off. An endpoint total only says where the
+            money went, never what asked for it. %>
+        <% if (_spend && _spend.total_tokens) { %>
+          <div class="small text-body-secondary" style="font-variant-numeric: tabular-nums">
+            <%= Number(_spend.total_tokens).toLocaleString() %> tokens in <%= _spend.calls %> call<%= _spend.calls === 1 ? '' : 's' %>
+            <span class="text-body-tertiary">· 14 days</span>
+          </div>
+        <% } %>
+        <% if (_edit && _eps.length) { %>
+          <button type="button" class="btn btn-sm btn-outline-secondary" data-job-edit-open="<%= job.id %>">Edit</button>
+        <% } %>
+      </div>
+    </div>
+  </div>
+
+  <%# ── EDITING MODE ───────────────────────────────────────────────────────────────────────────
+      Rendered by the server and hidden, rather than built by script when Edit is pressed: the
+      whole list is here in the markup, so it works from a keyboard, survives a script that fails
+      to load badly enough to matter, and posts the same fields the handler has always read. %>
+  <% if (_edit && _eps.length) { %>
+    <form method="POST" action="<%= _base %>/routes/<%= encodeURIComponent(job.id) %>"
+          class="p-3 border-top" data-job-edit hidden>
+      <input type="hidden" name="_csrf" value="<%= _csrf() %>">
+
+      <div class="d-flex justify-content-between align-items-baseline mb-2">
+        <span class="small text-uppercase fw-semibold text-body-secondary" style="letter-spacing:.08em">
+          <%= job.label %> — the path, in order
+        </span>
+        <span class="small text-body-tertiary">first to answer serves</span>
+      </div>
+
+      <ol class="list-unstyled mb-2" data-job-list>
+        <% _path.forEach(function (id, i) { %>
+          <% var ep = _byId[id]; %>
+          <li class="d-flex align-items-center gap-2 border rounded px-2 py-2 mb-1 bg-body-tertiary"
+              draggable="true" data-job-item="<%= id %>">
+            <span class="text-body-tertiary" aria-hidden="true" style="cursor:grab">⠿</span>
+            <span class="badge rounded-pill border bg-body-secondary text-body-secondary font-monospace fw-normal"
+                  data-job-rank><%= i + 1 %></span>
+            <span class="flex-grow-1 font-monospace small">
+              <%= id %>
+              <% if (ep && ep.label && ep.label !== id) { %><span class="text-body-tertiary"> · <%= ep.label %></span><% } %>
+              <%# AN ENDPOINT IN THE PATH BUT DISABLED IS KEPT, and said out loud. Dropping it on
+                  save would quietly rewrite somebody's configuration because a machine happened to
+                  be switched off this afternoon. %>
+              <% if (ep && !ep.enabled) { %>
+                <span class="badge rounded-pill border bg-warning-subtle text-warning-emphasis border-warning-subtle ms-1">disabled — skipped while off</span>
+              <% } %>
+              <% if (!ep) { %>
+                <span class="badge rounded-pill border bg-danger-subtle text-danger-emphasis border-danger-subtle ms-1">no such endpoint</span>
+              <% } %>
+            </span>
+            <span class="btn-group btn-group-sm" role="group">
+              <button type="button" class="btn btn-outline-secondary" data-job-up
+                      aria-label="Move <%= id %> earlier">↑</button>
+              <button type="button" class="btn btn-outline-secondary" data-job-down
+                      aria-label="Move <%= id %> later">↓</button>
+              <button type="button" class="btn btn-outline-secondary" data-job-remove
+                      aria-label="Remove <%= id %> from this job">✕</button>
+            </span>
+          </li>
+        <% }) %>
+      </ol>
+
+      <p class="form-text mt-0" data-job-empty<% if (_path.length) { %> hidden<% } %>>
+        Nothing chosen, so this job uses <strong>every enabled endpoint</strong> in the order they
+        are listed above. That is a working configuration, not a missing one.
+      </p>
+
+      <% if (_rest.length) { %>
+        <div class="small text-uppercase fw-semibold text-body-secondary mt-3 mb-2" style="letter-spacing:.08em">Not in this job</div>
+        <div class="d-flex flex-wrap gap-2" data-job-pool>
+          <% _rest.forEach(function (e) { %>
+            <button type="button" class="btn btn-sm btn-outline-secondary font-monospace"
+                    data-job-add="<%= e.id %>"<% if (!e.enabled) { %> disabled title="This endpoint is switched off"<% } %>>
+              + <%= e.id %><% if (!e.enabled) { %> (disabled)<% } %>
+            </button>
+          <% }) %>
+        </div>
+      <% } %>
+
+      <div class="d-flex gap-2 mt-3">
+        <button type="submit" class="btn btn-sm btn-primary">Save</button>
+        <button type="button" class="btn btn-sm btn-outline-secondary" data-job-cancel>Cancel</button>
+      </div>
+    </form>
+  <% } %>
+</div>

package/views/ai/lmx-stack.ejs

@@ -18,7 +18,7 @@
     Locals:
       inst       a supervisor row, merged with lmxStatus.describeStack() and carrying
                  `report` (lmxVerify), `pin` (lmxVerify.readPin), `creds` {statusToken, enginesKey}
-      _edit    render the controls at all
+      canEdit    render the controls at all
       csrfToken  () => token, for the forms
       basePath   where this app mounts its AI admin, e.g. '/admin/ai'. NOT hardcoded: the routes
                  are the consumer's, and only the consumer knows where they live.
@@ -26,7 +26,7 @@
       routeLabel optional (id) => human name for a job; the id is used when absent
 %>
 <%
-  // DISTINCT NAMES, deliberately. `var _edit = (typeof canEdit === "undefined") ? ... : _edit`
+  // DISTINCT NAMES, deliberately. `var canEdit = (typeof canEdit === "undefined") ? ... : canEdit`
   // reads as a defaulting idiom and is not one: `var` hoists, so inside this template the name is
   // already declared and undefined when the typeof runs. The test is therefore always true, the
   // passed-in local is shadowed, and every consumer silently gets the default.
@@ -44,22 +44,60 @@
   };
   var _glyph = { pass: '✔', fail: '✖', warn: '⚠', skip: '—' };
   var _gcls = { pass: 'text-success', fail: 'text-danger', warn: 'text-warning', skip: 'text-body-tertiary' };
+  // ── TONE, NOT COLOUR ────────────────────────────────────────────────────────────────────────
+  // A TINT rather than a solid fill. A row can carry four state pills at once, and as saturated
+  // blocks they read as traffic lights — at which point nothing looks urgent because everything
+  // does. The `-subtle` pairs are Bootstrap's own and are defined for BOTH themes, so these stay
+  // legible on either ground; a hand-picked hex would be right on one and wrong on the other.
+  var _pill = 'badge rounded-pill border fw-semibold';
+  var _tone = {
+    ok: 'bg-success-subtle text-success-emphasis border-success-subtle',
+    warn: 'bg-warning-subtle text-warning-emphasis border-warning-subtle',
+    bad: 'bg-danger-subtle text-danger-emphasis border-danger-subtle',
+    mute: 'bg-body-secondary text-body-secondary border'
+  };
+  // The dot inherits the pill's colour, so state is one decision rather than two that can disagree.
+  var _dot = '<span class="d-inline-block rounded-circle align-middle" style="width:.4rem;height:.4rem;background:currentColor"></span>';
+  // A COUNT IS NOT A STATE, so it never wears a dot — the status pill beside it owns that job.
+  var _count = 'badge rounded-pill border bg-body-secondary text-body-secondary font-monospace fw-normal';
+  // What an engine IS, rather than how it is doing: quiet, uppercase, no colour of its own.
+  var _role = 'badge border bg-body-tertiary text-body-secondary text-uppercase fw-semibold';
+  // The rows for engines actually being relied on, tinted with the app's own brand so the half of
+  // the list that matters is visible before a word is read.
+  var _inUse = 'background: rgba(var(--bs-primary-rgb, 13,110,253), .06)';
+
+  // A BLANK PANEL FOR A STACK THAT DOES NOT EXIST YET. Adding and changing are the same form and
+  // the same act — the handler already treats an existing id as an update — so they are the same
+  // markup, and the only difference is that a new one has no reading half to return to.
+  var _isNew = !!inst.isNew;
   var r = inst.report;
   var _open = !!inst.attention;
   // NOT CHECKED is its own state, distinct from both answering and broken. A stack nobody has asked
   // since the last restart is not a stack in trouble, and colouring it as one would train an
   // operator to ignore the colour.
-  var pillCls = !r ? 'text-bg-secondary'
-    : (r.ok ? 'text-bg-success' : (r.level === 'bad' ? 'text-bg-danger' : 'text-bg-warning'));
+  var pillCls = !r ? _tone.mute
+    : (r.ok ? _tone.ok : (r.level === 'bad' ? _tone.bad : _tone.warn));
   var pillText = !r ? 'not checked' : (r.ok ? 'answering' : 'needs attention');
 %>
 <div class="card mb-3 <%= _open ? 'border-warning' : '' %>" data-panel="lmx-<%= inst.id %>"<% if (_open) { %> data-panel-attention<% } %>
-     data-lmx-id="<%= inst.id %>" data-lmx-label="<%= inst.label || inst.id %>" data-lmx-url="<%= inst.status_url %>">
+     data-lmx-id="<%= inst.id %>" data-lmx-label="<%= inst.label || inst.id %>" data-lmx-url="<%= inst.status_url %>"
+     <%# WHAT EDIT PREFILLS. The certificate IS carried, because it is public — it is not even
+         encrypted at rest — and an operator opening Edit to a blank certificate box has no way to
+         tell a stored one from none at all. The two tokens are carried only as LENGTHS, which is
+         the most that can be said about a write-only secret and, as it happens, exactly enough to
+         notice the same value pasted into both fields. %>
+     data-lmx-cert="<%= inst.caCert || '' %>"
+     data-lmx-token-len="<%= (inst.creds && inst.creds.statusTokenLength) || '' %>"
+     data-lmx-key-len="<%= (inst.creds && inst.creds.enginesKeyLength) || '' %>"
+     data-stack="<%= inst.id %>"<% if (_isNew) { %> data-stack-new hidden<% } %>>
+  <% if (!_isNew) { %>
+  <div data-stack-view>
   <%# THE TOGGLE AND THE ACTIONS ARE SIBLINGS, not nested. A <button> may not contain a link
       or another button — the markup parses unpredictably and the inner control stops being
       reachable by keyboard, which would put Check and Edit behind a mouse. %>
   <div class="d-flex gap-2 align-items-start p-3">
     <button type="button" class="btn text-start border-0 p-0 flex-grow-1 d-flex gap-2 align-items-start"
+            style="min-width:0"
             data-panel-toggle="lmx-<%= inst.id %>" aria-expanded="<%= _open ? 'true' : 'false' %>"
             aria-controls="body-lmx-<%= inst.id %>">
       <span class="panel-chev text-body-secondary" aria-hidden="true">&rsaquo;</span>
@@ -67,12 +105,12 @@
       <span class="d-flex align-items-center gap-2 flex-wrap">
         <strong><%= inst.label || inst.id %></strong>
         <code class="small"><%= inst.id %></code>
-        <span class="badge text-bg-light border">lmx</span>
-        <span class="badge <%= pillCls %>"><%= pillText %></span>
+        <span class="<%= _role %>">lmx</span>
+        <span class="<%= _pill %> <%= pillCls %>"><%- _dot %> <%= pillText %></span>
         <%# THE COUNT IS "WHAT AM I RELYING ON", not what exists. Active means added, enabled
             and healthy in the stack's own document — the number that was missing when a
             configured-but-broken engine looked exactly like a working one. %>
-        <span class="badge text-bg-light border font-monospace">
+        <span class="<%= _count %>">
           <% if (r && r.engines) { %>
             <%= inst.activeCount %> engine<%= inst.activeCount === 1 ? '' : 's' %> active · <%= inst.reportedCount %> reported<% if (inst.missingCount) { %> · <span class="text-danger"><%= inst.missingCount %> missing</span><% } %>
           <% } else if (r) { %>
@@ -91,18 +129,27 @@
         · key <%= inst.creds.enginesKey ? '✔' : '✖' %>
         · cert <% if (!inst.pin.present) { %>none<% } else if (!inst.pin.valid) { %><span class="text-danger">unreadable</span><% } else if (inst.pin.expired) { %><span class="text-danger">EXPIRED</span><% } else if (inst.pin.expiringSoon) { %><span class="text-warning"><%= inst.pin.expiresDays %>d left</span><% } else { %>✔<% } %>
         <% if (r) { %>· checked <%= _ago(r.at) %><% } %>
-        <% if (!inst.enabled) { %>· <span class="badge text-bg-secondary">disabled</span><% } %>
+        <% if (!inst.enabled) { %>· <span class="<%= _pill %> <%= _tone.mute %>">disabled</span><% } %>
       </span>
     </span>
     </button>
     <% if (_edit) { %>
-      <span class="d-flex gap-2 align-items-center">
+      <span class="d-flex gap-2 align-items-center flex-shrink-0">
         <form method="POST" action="<%= _base %>/lmx/<%= inst.id %>/check">
           <input type="hidden" name="_csrf" value="<%= _csrf() %>">
-          <button type="submit" class="btn btn-sm btn-outline-secondary">Check</button>
+          <button type="submit" class="btn btn-sm btn-outline-secondary">Refresh</button>
+        </form>
+        <%# EVERY ACTION FOR THIS STACK IN ONE PLACE. There used to be a second Refresh at the foot
+            of the panel, called "Check now" — the same POST to the same route, so not a second
+            control at all, just a second place to look for the first one. And Remove sat down there
+            alone, which put the most destructive action furthest from the thing it destroys. %>
+        <button type="button" class="btn btn-sm btn-outline-secondary"
+                data-stack-edit-open="<%= inst.id %>">Edit</button>
+        <form method="POST" action="<%= _base %>/lmx/<%= inst.id %>/delete"
+              data-confirm="Remove the &ldquo;<%= inst.label || inst.id %>&rdquo; supervisor?">
+          <input type="hidden" name="_csrf" value="<%= _csrf() %>">
+          <button type="submit" class="btn btn-sm btn-outline-danger">Remove</button>
         </form>
-        <a class="btn btn-sm btn-outline-secondary" href="<%= _anchor %>"
-           data-lmx-edit="<%= inst.id %>">Edit</a>
       </span>
     <% } %>
   </div>
@@ -130,43 +177,55 @@
         <%# NOT PROBED ON RENDER, deliberately: opening a settings page is not evidence that
             anything changed, and a sleeping machine would hold the whole page while it timed
             out. Check asks, when somebody wants to know. %>
-        Press <strong>Check</strong> to ask it now.
+        Press <strong>Refresh</strong> to ask it now.
       </div>
     <% } %>
 
     <%# ── ENGINES IN USE ── %>
     <% if (inst.added.length) { %>
       <div class="px-3 py-2 bg-body-tertiary d-flex justify-content-between small text-body-secondary">
-        <span>In use — <%= inst.added.length %></span>
-        <span>endpoint · jobs served</span>
+        <span class="text-uppercase fw-semibold" style="letter-spacing:.08em">In use — <%= inst.added.length %> engine<%= inst.added.length === 1 ? "" : "s" %></span>
+        <span class="text-uppercase fw-semibold" style="letter-spacing:.08em">endpoint · jobs served</span>
       </div>
       <% inst.added.forEach(function (a) { %>
-        <div class="d-flex justify-content-between align-items-start gap-3 border-top p-3 <%= a.missing ? 'bg-danger-subtle' : '' %>">
+        <div class="d-flex justify-content-between align-items-start gap-3 border-top p-3<% if (a.missing) { %> bg-danger-subtle<% } %>"<% if (!a.missing) { %> style="<%= _inUse %>"<% } %>>
           <div>
             <div class="d-flex align-items-center gap-2 flex-wrap">
               <strong><%= a.row.lmx_engine %></strong>
               <% if (a.missing) { %>
-                <span class="badge text-bg-danger">not reported</span>
+                <span class="<%= _pill %> <%= _tone.bad %>"><%- _dot %> not reported</span>
               <% } else if (a.engine) { %>
-                <span class="badge <%= a.engine.state === 'healthy' ? 'text-bg-success' : 'text-bg-warning' %>"><%= a.engine.state %></span>
-                <% if (a.engine.role) { %><span class="badge text-bg-light border"><%= a.engine.role %></span><% } %>
+                <span class="<%= _pill %> <%= a.engine.state === 'healthy' ? _tone.ok : _tone.warn %>"><%- _dot %> <%= a.engine.state %></span>
+                <% if (a.engine.role) { %><span class="<%= _role %>"><%= a.engine.role %></span><% } %>
               <% } %>
-              <% if (!Number(a.row.enabled)) { %><span class="badge text-bg-secondary">disabled</span><% } %>
+              <% if (!Number(a.row.enabled)) { %><span class="<%= _pill %> <%= _tone.mute %>">disabled</span><% } %>
             </div>
             <% if (a.engine) { %>
               <div class="small text-body-tertiary font-monospace mt-1">
-                <%= [a.engine.modelName || a.engine.model, a.engine.quantisation, a.engine.device,
+                <%= [a.engine.modelName || a.engine.model, a.engine.quantisation,
+                     a.engine.parameters ? (a.engine.parameters / 1e9).toFixed(1).replace(/\.0$/, '') + 'B' : null,
+                     a.engine.device,
+                     a.engine.deviceTotalMiB ? Math.round(a.engine.deviceTotalMiB / 1024) + ' GiB' : null,
                      a.engine.maxInputTokens ? Number(a.engine.maxInputTokens).toLocaleString() + ' tok/slot' : null,
                      a.engine.slots ? a.engine.slots + (a.engine.slots === 1 ? ' slot' : ' slots') : null,
                      a.engine.dimensions ? a.engine.dimensions + ' dims' : null]
                     .filter(Boolean).join(' · ') %>
               </div>
+              <%# WHICH FLAG THIS ENGINE GETS, on an engine already being relied on — not only on
+                  one somebody might add. Getting it wrong is silent: the model spends its whole
+                  budget thinking and returns nothing, with no error at all, and this row is the
+                  only place anybody would look to find out which flag is being sent. %>
+              <% if (a.engine.reasoning) { %>
+                <div class="small text-body-secondary mt-1">reasoning: <code><%= a.engine.reasoning %></code></div>
+              <% } else if (a.engine.role === 'chat') { %>
+                <div class="small text-warning mt-1">no known reasoning flag for this model family — neither will be sent</div>
+              <% } %>
             <% } %>
             <%# WHAT STILL POINTS AT IT. A missing engine whose jobs nobody has repointed is
                 an endpoint that will fail every call — the same silent-but-configured shape
                 as the credential problem, so it names the jobs rather than only itself. %>
             <div class="small mt-1 <%= a.missing ? 'text-danger fw-semibold' : 'text-body-secondary' %>">
-              <a href="<%= _base %>?edit=<%= encodeURIComponent(a.row.id) %>" class="text-decoration-none"><%= a.row.id %></a>
+              <span class="font-monospace"><%= a.row.id %></span>
               <% if (a.routes.length) { %>
                 · <%= a.routes.map(function (x) { return _label(x.id); }).join(', ') %>
               <% } else { %>
@@ -180,7 +239,36 @@
             <% } %>
           </div>
           <div class="d-flex gap-2">
-            <a class="btn btn-sm btn-outline-secondary" href="<%= _base %>?edit=<%= encodeURIComponent(a.row.id) %>">Settings</a>
+            <%# TEST THIS ENGINE, not whatever is currently serving. An engine you have adopted is an
+                endpoint like any other, and the reason to test one is precisely that it is NOT the
+                one answering right now — verifying a fallback before it is needed is the point of
+                having one.
+
+                THERE IS NO "SETTINGS" HERE, and that is deliberate. It used to link to the generic
+                endpoint form, which knows nothing about lmx: of the eight fields it offers, an
+                address and a model are DISCOVERED for these engines and a context size is
+                overridden by what the supervisor reports — so five of them do nothing, and two of
+                those look exactly like the settings that matter. A control that leads somewhere
+                describing a stored address, for a thing whose whole design is that it stores no
+                address, is worse than no control.
+
+                The genuinely per-engine settings — a token ceiling, a timeout, its own key — are
+                real and will come back as an inline form on this row, like everything else on this
+                screen. Until they do, an engine is removed and re-added rather than edited. %>
+            <form method="POST" action="<%= _base %>/<%= encodeURIComponent(a.row.id) %>/test">
+              <input type="hidden" name="_csrf" value="<%= _csrf() %>">
+              <button type="submit" class="btn btn-sm btn-outline-secondary">Test</button>
+            </form>
+            <%# REMOVE IS THE INVERSE OF ADD, and the panel has had Add since the beginning. Without
+                it an adopted engine could be created here and unmade nowhere: lmx rows are excluded
+                from the direct-endpoint list on purpose, so this panel is the only place they
+                appear at all. A missing engine's row even says "remove the endpoint" — and until
+                now offered nothing to press. %>
+            <form method="POST" action="<%= _base %>/<%= encodeURIComponent(a.row.id) %>/delete"
+                  data-confirm="Remove the &ldquo;<%= a.row.id %>&rdquo; endpoint?<% if (a.routes.length) { %> It still serves <%= a.routes.length %> job<%= a.routes.length === 1 ? '' : 's' %>, which will fall back to whatever else those jobs list.<% } %>">
+              <input type="hidden" name="_csrf" value="<%= _csrf() %>">
+              <button type="submit" class="btn btn-sm btn-outline-danger">Remove</button>
+            </form>
           </div>
         </div>
       <% }); %>
@@ -189,8 +277,8 @@
     <%# ── ENGINES AVAILABLE ── %>
     <% if (inst.available && inst.available.length) { %>
       <div class="px-3 py-2 bg-body-tertiary d-flex justify-content-between small text-body-secondary border-top">
-        <span>Also on this stack — not in use</span>
-        <span><%= inst.available.length %></span>
+        <span class="text-uppercase fw-semibold" style="letter-spacing:.08em">Also on this stack — not in use</span>
+        <span class="text-uppercase fw-semibold" style="letter-spacing:.08em"><%= inst.available.length %></span>
       </div>
       <% inst.available.forEach(function (e) { %>
         <div class="d-flex justify-content-between align-items-start gap-3 border-top p-3">
@@ -198,8 +286,8 @@
             <div class="d-flex align-items-center gap-2 flex-wrap">
               <strong><%= e.label || e.name %></strong>
               <code class="small"><%= e.name %></code>
-              <span class="badge <%= e.state === 'healthy' ? 'text-bg-success' : 'text-bg-warning' %>"><%= e.state || 'unknown' %></span>
-              <span class="badge text-bg-light border"><%= e.role || '?' %></span>
+              <span class="<%= _pill %> <%= e.state === 'healthy' ? _tone.ok : _tone.warn %>"><%- _dot %> <%= e.state || 'unknown' %></span>
+              <span class="<%= _role %>"><%= e.role || '?' %></span>
             </div>
             <div class="small text-body-tertiary font-monospace mt-1">
               <%= [e.modelName || e.model, e.quantisation, e.device,
@@ -229,36 +317,104 @@
       <% }); %>
     <% } %>
 
-    <%# ── CREDENTIALS: what is set, never what it is ── %>
-    <div class="px-3 py-2 bg-body-tertiary border-top small text-body-secondary">Credentials</div>
-    <div class="p-3 border-top d-flex gap-2 flex-wrap">
-      <span class="badge text-bg-light border font-monospace">
-        <span class="<%= inst.creds.statusToken ? 'text-success' : 'text-danger' %>"><%= inst.creds.statusToken ? '✔' : '✖' %></span>
-        status token
-      </span>
-      <span class="badge text-bg-light border font-monospace">
-        <span class="<%= inst.creds.enginesKey ? 'text-success' : 'text-danger' %>"><%= inst.creds.enginesKey ? '✔' : '✖' %></span>
-        engines key
-      </span>
-      <span class="badge <%= (inst.pin.expired || !inst.pin.valid) ? 'text-bg-danger' : (inst.pin.expiringSoon ? 'text-bg-warning' : 'text-bg-light border') %> font-monospace">
-        <% if (!inst.pin.present) { %>no certificate pinned
-        <% } else if (!inst.pin.valid) { %>certificate unreadable
-        <% } else { %>cert <%= inst.pin.fingerprint %> · expires <%= inst.pin.expires.toISOString().slice(0, 10) %><% if (inst.pin.expiringSoon) { %> · <%= inst.pin.expiresDays %>d left<% } %><% } %>
-      </span>
     </div>
+  </div>
+  <% } %>
 
-    <% if (_edit) { %>
-      <div class="p-3 border-top d-flex gap-2">
-        <form method="POST" action="<%= _base %>/lmx/<%= inst.id %>/check">
-          <input type="hidden" name="_csrf" value="<%= _csrf() %>">
-          <button type="submit" class="btn btn-sm btn-outline-secondary">Check now</button>
-        </form>
-        <form method="POST" action="<%= _base %>/lmx/<%= inst.id %>/delete"
-              data-confirm="Remove the &ldquo;<%= inst.label || inst.id %>&rdquo; supervisor?">
-          <input type="hidden" name="_csrf" value="<%= _csrf() %>">
-          <button type="submit" class="btn btn-sm btn-outline-danger">Remove</button>
-        </form>
+  <%# ── EDITING, IN PLACE ──────────────────────────────────────────────────────────────────────
+      NOT A FORM AT THE FOOT OF THE PAGE. It was one, and pressing Edit scrolled you away from the
+      stack you were looking at, down to a form that also served as "Add" — so the thing being
+      changed was off screen while you changed it, and nothing on it said which stack you were in.
+
+      Same two-mode shape as the job card: the panel becomes the form, Save posts, and the redirect
+      brings the panel back. %>
+  <% if (_edit) { %>
+    <form method="POST" action="<%= _base %>/lmx" class="p-3" data-stack-edit<% if (!_isNew) { %> hidden<% } %>>
+      <input type="hidden" name="_csrf" value="<%= _csrf() %>">
+
+      <div class="d-flex justify-content-between align-items-baseline mb-3">
+        <strong><%= _isNew ? 'Add a supervised stack' : 'Change ' + (inst.label || inst.id) %></strong>
+        <span class="small text-body-tertiary">blank secrets keep what is stored</span>
       </div>
-    <% } %>
-  </div>
+
+      <div class="row g-3">
+        <div class="col-md-4">
+          <label class="form-label" for="lmx-id-<%= inst.id %>">Instance</label>
+          <%# THE STACK'S OWN NAME, checked against what the status document reports — which is what
+              catches a URL pointed at the wrong deployment, since engine names collide across
+              stacks. Readonly once it exists: every engine row references it, and it is the value
+              the identity check compares against. %>
+          <input id="lmx-id-<%= inst.id %>" type="text" class="form-control font-monospace"
+                 name="id" value="<%= _isNew ? '' : inst.id %>" placeholder="vpc1-dev" required
+                 <% if (!_isNew) { %>readonly<% } %>>
+          <div class="form-text">
+            <% if (_isNew) { %>Exactly as the stack reports it. Checked on every poll.
+            <% } else { %>Fixed — engines reference it, and the identity check compares against it.<% } %>
+          </div>
+        </div>
+        <div class="col-md-8">
+          <label class="form-label" for="lmx-label-<%= inst.id %>">Name</label>
+          <input id="lmx-label-<%= inst.id %>" type="text" class="form-control" name="label"
+                 value="<%= _isNew ? '' : (inst.label || '') %>" placeholder="Dev stack">
+        </div>
+        <div class="col-12">
+          <label class="form-label" for="lmx-url-<%= inst.id %>">Status listener</label>
+          <input id="lmx-url-<%= inst.id %>" type="text" class="form-control font-monospace" name="status_url"
+                 value="<%= _isNew ? '' : (inst.status_url || '') %>"
+                 placeholder="https://vpc1.example.net:9443/status" required>
+          <div class="form-text">Not an engine address — this is only asked where the engines are.</div>
+        </div>
+
+        <%# THE LENGTHS ARE THE POINT. Both are write-only, so the only thing that can be said about
+            a stored secret is how long it is — and two fields offering to keep the same number of
+            characters is exactly how an engines key pasted into both of them became visible. %>
+        <div class="col-md-6">
+          <label class="form-label" for="lmx-token-<%= inst.id %>">Status token</label>
+          <input id="lmx-token-<%= inst.id %>" type="password" class="form-control" name="status_token"
+                 autocomplete="new-password"
+                 placeholder="<%= (inst.creds && inst.creds.statusTokenLength) ? 'unchanged — ' + inst.creds.statusTokenLength + ' characters stored' : 'nothing stored — enter a value' %>">
+          <div class="form-text">Reads the status document. Never sent to an engine.</div>
+        </div>
+        <div class="col-md-6">
+          <label class="form-label" for="lmx-key-<%= inst.id %>">Engines key</label>
+          <input id="lmx-key-<%= inst.id %>" type="password" class="form-control" name="engines_key"
+                 autocomplete="new-password"
+                 placeholder="<%= (inst.creds && inst.creds.enginesKeyLength) ? 'unchanged — ' + inst.creds.enginesKeyLength + ' characters stored' : 'nothing stored — enter a value' %>">
+          <div class="form-text">Used by every engine here unless one overrides it.</div>
+        </div>
+
+        <div class="col-12">
+          <label class="form-label" for="lmx-ca-<%= inst.id %>">Certificate to pin</label>
+          <%# PINNED, never "verification off". Turning verification off accepts any certificate from
+              anyone able to answer on that address, which is the whole attack pinning prevents. The
+              certificate is public, so unlike the tokens it is shown back. %>
+          <textarea id="lmx-ca-<%= inst.id %>" class="form-control font-monospace" name="ca_cert" rows="3"
+                    placeholder="-----BEGIN CERTIFICATE-----"><%= inst.caCert || '' %></textarea>
+          <div class="form-text">
+            The stack's own certificate. Leave blank if it uses one your system already trusts.
+            <% if (!_isNew && inst.pin && inst.pin.valid) { %>
+              Pinned now: <span class="font-monospace"><%= inst.pin.fingerprint %></span>,
+              expires <%= inst.pin.expires.toISOString().slice(0, 10) %>.
+            <% } %>
+          </div>
+        </div>
+
+        <div class="col-12">
+          <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" role="switch" name="enabled" value="1"
+                   id="lmx-enabled-<%= inst.id %>"<% if (_isNew || inst.enabled) { %> checked<% } %>>
+            <label class="form-check-label" for="lmx-enabled-<%= inst.id %>">Enabled</label>
+          </div>
+        </div>
+      </div>
+
+      <div class="d-flex gap-2 mt-3">
+        <button type="submit" class="btn btn-sm btn-primary"><%= _isNew ? 'Add stack' : 'Save' %></button>
+        <button type="button" class="btn btn-sm btn-outline-secondary" data-stack-cancel>Cancel</button>
+      </div>
+      <div class="form-text mt-2">
+        Every save is checked against the stack, and the per-check result appears on this panel.
+      </div>
+    </form>
+  <% } %>
 </div>