@aria-framework/ai 0.14.2 → 0.15.0

package/views/ai/lmx-stack.ejs

@@ -0,0 +1,264 @@
+<%# 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}
+      _edit    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 _edit = (typeof canEdit === "undefined") ? ... : _edit`
+  // 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' };
+  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 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 %>">
+  <%# 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="badge text-bg-light border">lmx</span>
+        <span class="badge <%= pillCls %>"><%= 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">
+          <% 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="badge text-bg-secondary">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">Check</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>Check</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>
+      </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>
+            <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>
+              <% } 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><% } %>
+              <% } %>
+              <% if (!Number(a.row.enabled)) { %><span class="badge text-bg-secondary">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.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>
+            <% } %>
+            <%# 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">
+            <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>Also on this stack — not in use</span>
+        <span><%= 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="badge <%= e.state === 'healthy' ? 'text-bg-success' : 'text-bg-warning' %>"><%= e.state || 'unknown' %></span>
+              <span class="badge text-bg-light border"><%= 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 ── %>
+    <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>
+
+    <% 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>