@aria-framework/ai 0.14.3 → 0.15.2

package/views/ai/lmx-stack.ejs

@@ -0,0 +1,324 @@
+<%# One supervised stack, as a folding panel.
+    ────────────────────────────────────────────────────────────────────────────────────────────
+    A STACK IS A CONTAINER, not an endpoint. Its address is discovered, its model is a fact the
+    supervisor reports, and unfolding it lists engines rather than settings. The header reads
+    identity, kind, status, and then A COUNT OF WHAT DEPENDS ON IT — because the question anybody
+    has before touching a machine is "if this goes away, what stops working?".
+
+    FOLDED IS THE DEFAULT ONCE STABLE, so the folded line has to carry the whole verdict: status,
+    counts, all three credentials, and when it was last checked. Folding may hide detail; it must
+    never hide the reason you would have opened it. The app this was written for previously showed
+    a card with name, id and URL — none of which change when you paste a token — so a save that
+    worked and one that was discarded were pixel-identical.
+
+    A PANEL WITH A PROBLEM IS OPEN IN THE SERVER'S HTML, never opened later by script. If attention
+    depended on JavaScript, the one state that must never be missed would be the state that
+    disappears when a script fails to load.
+
+    Locals:
+      inst       a supervisor row, merged with lmxStatus.describeStack() and carrying
+                 `report` (lmxVerify), `pin` (lmxVerify.readPin), `creds` {statusToken, enginesKey}
+      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.
+      newAnchor  where Edit sends somebody to change the stack, e.g. '#lmx-new'
+      routeLabel optional (id) => human name for a job; the id is used when absent
+%>
+<%
+  // 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.
+  var _edit = (typeof canEdit !== 'undefined') && canEdit;
+  var _base = (typeof basePath !== 'undefined' && basePath) ? basePath : '/admin/ai';
+  var _anchor = (typeof newAnchor !== 'undefined' && newAnchor) ? newAnchor : '#lmx-new';
+  var _label = (typeof routeLabel === 'function') ? routeLabel : function (x) { return x; };
+  var _csrf = (typeof csrfToken === 'function') ? csrfToken : function () { return ''; };
+  var _ago = function (iso) {
+    if (!iso) return null;
+    var secs = Math.max(0, Math.round((Date.now() - new Date(iso).getTime()) / 1000));
+    if (secs < 60) return secs + 's ago';
+    if (secs < 3600) return Math.round(secs / 60) + 'm ago';
+    return Math.round(secs / 3600) + 'h ago';
+  };
+  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 ? _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 %>"
+     <%# 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. %>
+  <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"
+            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>
+      <span class="flex-grow-1">
+      <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="<%= _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="<%= _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) { %>
+            <%# CHECKED, BUT THE LIST DID NOT ARRIVE. "not checked yet" here would be a lie
+                about something that just happened 0 seconds ago, and would send somebody to
+                press Check again rather than read the reason sitting directly below. %>
+            <%= inst.added.length %> added · engines could not be listed
+          <% } else { %>
+            <%= inst.added.length %> added · not checked yet
+          <% } %>
+        </span>
+      </span>
+      <span class="d-block small text-body-secondary font-monospace mt-1" style="word-break:break-all">
+        <%= inst.status_url %>
+        · token <%= inst.creds.statusToken ? '✔' : '✖' %>
+        · 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="<%= _pill %> <%= _tone.mute %>">disabled</span><% } %>
+      </span>
+    </span>
+    </button>
+    <% if (_edit) { %>
+      <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">Refresh</button>
+        </form>
+        <a class="btn btn-sm btn-outline-secondary" href="<%= _anchor %>"
+           data-lmx-edit="<%= inst.id %>">Edit</a>
+      </span>
+    <% } %>
+  </div>
+
+  <div id="body-lmx-<%= inst.id %>" class="border-top"<% if (!_open) { %> hidden<% } %>>
+
+    <%# THE LAST VERIFICATION, per check. Never a single line: "401" named neither of the two
+        credentials it could have been, which is exactly how an engines key pasted into the
+        status token's field stayed hidden. %>
+    <% if (r) { %>
+      <div class="p-3 border-bottom">
+        <div class="small text-uppercase fw-semibold text-body-secondary mb-2" style="letter-spacing:.08em">
+          Last checked <%= _ago(r.at) %>
+        </div>
+        <% r.checks.forEach(function (c) { %>
+          <div class="d-flex gap-2 small font-monospace">
+            <span class="<%= _gcls[c.status] || '' %>" style="width:1rem"><%= _glyph[c.status] || '' %></span>
+            <span class="<%= c.status === 'skip' ? 'text-body-tertiary' : '' %>"><%= c.text %></span>
+          </div>
+        <% }); %>
+      </div>
+    <% } else { %>
+      <div class="p-3 border-bottom small text-body-secondary">
+        This stack has not been checked since the last restart.
+        <%# 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>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 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<% 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="<%= _pill %> <%= _tone.bad %>"><%- _dot %> not reported</span>
+              <% } else if (a.engine) { %>
+                <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="<%= _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.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>
+              <% if (a.routes.length) { %>
+                · <%= a.routes.map(function (x) { return _label(x.id); }).join(', ') %>
+              <% } else { %>
+                · serves no jobs
+              <% } %>
+            </div>
+            <% if (a.missing) { %>
+              <div class="small text-danger mt-1">
+                The stack no longer lists this engine. Either point its jobs elsewhere, or remove the endpoint.
+              </div>
+            <% } %>
+          </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>
+      <% }); %>
+    <% } %>
+
+    <%# ── 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 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">
+          <div>
+            <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="<%= _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,
+                   e.maxInputTokens ? Number(e.maxInputTokens).toLocaleString() + ' tok/slot' : null,
+                   e.slots ? e.slots + (e.slots === 1 ? ' slot' : ' slots') : null,
+                   e.dimensions ? e.dimensions + ' dims' : null].filter(Boolean).join(' · ') %>
+            </div>
+            <%# WHICH REASONING FLAG THIS MODEL NEEDS. Getting it wrong is silent: the model
+                spends its whole budget thinking and returns nothing, with no error at all. %>
+            <% if (e.reasoning) { %>
+              <div class="small text-body-secondary mt-1">reasoning: <code><%= e.reasoning %></code></div>
+            <% } else if (e.role === 'chat') { %>
+              <div class="small text-warning mt-1">no known reasoning flag for this model family — neither will be sent</div>
+            <% } %>
+          </div>
+          <% if (_edit) { %>
+            <form method="POST" action="<%= _base %>/lmx/<%= inst.id %>/adopt">
+              <input type="hidden" name="_csrf" value="<%= _csrf() %>">
+              <input type="hidden" name="engine" value="<%= e.name %>">
+              <input type="hidden" name="label" value="<%= e.label || e.name %>">
+              <input type="hidden" name="role" value="<%= e.role || '' %>">
+              <input type="hidden" name="max_input_tokens" value="<%= e.maxInputTokens || '' %>">
+              <button type="submit" class="btn btn-sm btn-primary">Add</button>
+            </form>
+          <% } %>
+        </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 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<% if (inst.creds.statusTokenLength) { %> · <%= inst.creds.statusTokenLength %> chars<% } %>
+      </span>
+      <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<% if (inst.creds.enginesKeyLength) { %> · <%= inst.creds.enginesKeyLength %> chars<% } %>
+      </span>
+      <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<% } %><% } %>
+      </span>
+    </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>
+      </div>
+    <% } %>
+  </div>
+</div>