@aria-framework/ai 0.15.0 → 0.15.2

package/browser/ai-panels.js

@@ -1,113 +1,131 @@
-/**
- * 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;
+    }
+
+    // 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. The
+    // certificate is NOT one of them — it is public, and is prefilled below.
+    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'));
+    // THE CERTIFICATE COMES BACK. It is public — not encrypted at rest — and Edit opening onto an
+    // empty certificate box is indistinguishable from having none stored, which reads as "my save
+    // did not work". Reported as exactly that, and it was: the save handler had always intended to
+    // render it back, and never did.
+    set('ca_cert', src.getAttribute('data-lmx-cert'));
+    set('status_token', '');
+    set('engines_key', '');
+    // Blank means keep, so blank must not read as absent. The placeholder says what is actually
+    // held — and two fields both offering to keep "50 characters" is the cheapest possible way to
+    // notice that one value was pasted into both.
+    var held = function (name, len) {
+      var field = form.querySelector('[name="' + name + '"]');
+      if (!field) return;
+      field.placeholder = len
+        ? 'unchanged — ' + len + ' characters stored. Enter a value to replace it.'
+        : 'nothing stored — enter a value';
+    };
+    held('status_token', src.getAttribute('data-lmx-token-len'));
+    held('engines_key', src.getAttribute('data-lmx-key-len'));
+    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();
+  }
+})();

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.15.2",
   "license": "UNLICENSED",
   "private": false,
   "publishConfig": {

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,17 +44,47 @@
   };
   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)';
+
   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) || '' %>">
   <%# 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. %>
@@ -67,12 +97,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,7 +121,7 @@
         · 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>
@@ -99,7 +129,7 @@
       <span class="d-flex gap-2 align-items-center">
         <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>
         <a class="btn btn-sm btn-outline-secondary" href="<%= _anchor %>"
            data-lmx-edit="<%= inst.id %>">Edit</a>
@@ -130,37 +160,49 @@
         <%# 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
@@ -180,6 +222,14 @@
             <% } %>
           </div>
           <div class="d-flex gap-2">
+            <%# 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. %>
+            <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>
             <a class="btn btn-sm btn-outline-secondary" href="<%= _base %>?edit=<%= encodeURIComponent(a.row.id) %>">Settings</a>
           </div>
         </div>
@@ -189,8 +239,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 +248,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,18 +279,28 @@
       <% }); %>
     <% } %>
 
-    <%# ── 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>
+    <%# ── CREDENTIALS: what is set, never what it is ──
+        THE LENGTH IS SHOWN because it is the one property of a write-only secret that can be
+        checked by eye, and because two credentials of similar length in adjacent fields is how the
+        wrong one got pasted into both. Seeing "43 chars" beside a token you believe is 50 long is
+        the cheapest possible way to notice. It reveals nothing: a length is not a secret, and the
+        alternative was an operator with no way at all to tell two stored values apart. %>
+    <div class="px-3 py-2 bg-body-tertiary border-top small text-body-secondary d-flex justify-content-between align-items-center">
+      <span class="text-uppercase fw-semibold" style="letter-spacing:.08em">Credentials</span>
+      <% if (_edit) { %>
+        <a class="btn btn-sm btn-outline-secondary py-0" href="<%= _anchor %>" data-lmx-edit="<%= inst.id %>">Edit</a>
+      <% } %>
+    </div>
     <div class="p-3 border-top d-flex gap-2 flex-wrap">
-      <span class="badge text-bg-light border font-monospace">
+      <span class="badge border bg-body-secondary text-body-secondary font-monospace fw-normal">
         <span class="<%= inst.creds.statusToken ? 'text-success' : 'text-danger' %>"><%= inst.creds.statusToken ? '✔' : '✖' %></span>
-        status token
+        status token<% if (inst.creds.statusTokenLength) { %> · <%= inst.creds.statusTokenLength %> chars<% } %>
       </span>
-      <span class="badge text-bg-light border font-monospace">
+      <span class="badge border bg-body-secondary text-body-secondary font-monospace fw-normal">
         <span class="<%= inst.creds.enginesKey ? 'text-success' : 'text-danger' %>"><%= inst.creds.enginesKey ? '✔' : '✖' %></span>
-        engines key
+        engines key<% if (inst.creds.enginesKeyLength) { %> · <%= inst.creds.enginesKeyLength %> chars<% } %>
       </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">
+      <span class="badge border font-monospace fw-normal <%= (inst.pin.expired || !inst.pin.valid) ? _tone.bad : (inst.pin.expiringSoon ? _tone.warn : 'bg-body-secondary text-body-secondary') %>">
         <% 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<% } %><% } %>