@aria-framework/ai 0.26.1 → 0.27.0

package/views/ai/job-card.ejs

@@ -1,182 +1,182 @@
-<%# 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
-      spendDays  how many days `spend` covers, for the label beside it (default 14)
-      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;
-  // THE WINDOW THAT PRODUCED `spend`. Defaulted to what the label used to say as a literal, so a
-  // consumer that passes nothing renders exactly as it did before.
-  var _spendDays = (typeof spendDays !== 'undefined' && Number(spendDays) > 0) ? Number(spendDays) : 14;
-  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.
-
-            THE WINDOW IS PRINTED FROM THE SAME PLACE THE FIGURE COMES FROM. It used to be the
-            literal "14 days" here, while the figure beside it was aggregated by the consuming app
-            over a window only that app knew — two halves of one sentence in two repositories. A
-            consumer changing its window relabelled nothing, and every card then stated a period
-            its own number had never covered. Support101 hit exactly that on the other side of the
-            same screen, where a total labelled "14 days" came from an unwindowed query and ran
-            139,792 tokens adrift of the tab beside 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">· <%= _spendDays %> 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>
+<%# 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
+      spendDays  how many days `spend` covers, for the label beside it (default 14)
+      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;
+  // THE WINDOW THAT PRODUCED `spend`. Defaulted to what the label used to say as a literal, so a
+  // consumer that passes nothing renders exactly as it did before.
+  var _spendDays = (typeof spendDays !== 'undefined' && Number(spendDays) > 0) ? Number(spendDays) : 14;
+  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.
+
+            THE WINDOW IS PRINTED FROM THE SAME PLACE THE FIGURE COMES FROM. It used to be the
+            literal "14 days" here, while the figure beside it was aggregated by the consuming app
+            over a window only that app knew — two halves of one sentence in two repositories. A
+            consumer changing its window relabelled nothing, and every card then stated a period
+            its own number had never covered. Support101 hit exactly that on the other side of the
+            same screen, where a total labelled "14 days" came from an unwindowed query and ran
+            139,792 tokens adrift of the tab beside 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">· <%= _spendDays %> 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>