@aria-framework/ai 0.26.0 → 0.26.1

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.26.0",
+  "version": "0.26.1",
   "license": "UNLICENSED",
   "private": false,
   "publishConfig": {
@@ -47,7 +47,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/jobCard.js && node test/untrusted.js && node test/packaging.js && node test/views.js && node test/fenced.js && node test/polish.js && node test/reasoning.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/untrusted.js && node test/packaging.js && node test/views.js && node test/fenced.js && node test/polish.js && node test/reasoning.js && node test/usageOnFailure.js",
     "prepublishOnly": "node ../../test/packaging.js ai"
   },
   "devDependencies": {

package/providers/anthropic.js

@@ -97,6 +97,13 @@ async function complete(cfg, opts) {
     clearTimeout(timer);
   }
 
+  // A 200 WHOSE BODY IS `null` (0.26.1) is a typed failure, not a TypeError further down.
+  if (!payload || typeof payload !== 'object') {
+    throw new AiError('bad_response', `${label} answered with an empty body.`);
+  }
+  // Spent tokens ride on every later error so the client can meter a failed call (0.26.1).
+  const usage = normaliseUsage(payload.usage);
+
   // Difference 4: blocks, not a single string. Concatenated so a model that splits its answer over
   // two text blocks does not silently lose the second one.
   // Thinking arrives as its own block TYPE here rather than a field, so filtering to 'text' already
@@ -109,7 +116,7 @@ async function complete(cfg, opts) {
     const thought = (payload.content || []).some((b) => b && b.type === 'thinking');
     throw new AiError('bad_response', thought
       ? `${label} returned only its internal reasoning. Raise the reply limit and try again.`
-      : `${label} returned no text (stop reason: ${payload.stop_reason || 'none given'}).`);
+      : `${label} returned no text (stop reason: ${payload.stop_reason || 'none given'}).`, { usage });
   }
 
   let json = null;
@@ -121,10 +128,10 @@ async function complete(cfg, opts) {
       if (payload.stop_reason === 'max_tokens') {
         throw new AiError('bad_response',
           `${label} ran out of room mid-answer — the structured reply was cut off before it was ` +
-          'finished. A Regenerate usually succeeds.', { cause: err });
+          'finished. A Regenerate usually succeeds.', { cause: err, usage });
       }
       throw new AiError('bad_response',
-        `${label} was asked for structured output and returned text that will not parse.`, { cause: err });
+        `${label} was asked for structured output and returned text that will not parse.`, { cause: err, usage });
     }
   }
 
@@ -132,7 +139,7 @@ async function complete(cfg, opts) {
     text,
     json,
     model: payload.model || cfg.model,
-    usage: normaliseUsage(payload.usage),
+    usage,
     ms: Date.now() - started,
     finishReason: payload.stop_reason || null,
     truncated: payload.stop_reason === 'max_tokens',

package/providers/openai-compatible.js

@@ -133,7 +133,13 @@ async function complete(cfg, opts) {
   // completion" — which sent this investigation after a thinking-model theory that was not the
   // cause. Verified against the real server: the same request on /v1/chat/completions answers
   // normally.
-  if (payload && payload.error && !payload.choices) {
+  // A 200 WHOSE BODY IS `null` (0.26.1) — valid JSON, no object. It used to reach `payload.usage`
+  // below as a TypeError, which a router reads as an unknown fault.
+  if (!payload || typeof payload !== 'object') {
+    throw new AiError('bad_response', `${label} answered with an empty body.`);
+  }
+
+  if (payload.error && !payload.choices) {
     const said = typeof payload.error === 'string'
       ? payload.error
       : (payload.error.message || JSON.stringify(payload.error));
@@ -170,6 +176,10 @@ async function complete(cfg, opts) {
     throw emptyCompletion({ label, finishReason, reasoning, maxTokens: body.max_tokens, usage: payload.usage });
   }
 
+  // TOKENS WERE SPENT EVEN WHEN THE ANSWER IS UNUSABLE (0.26.1). Carried on every error raised after
+  // this point, normalised, so the client can meter a failed call — see index.js complete().
+  const usage = normaliseUsage(payload.usage);
+
   // With a schema the content is still a STRING containing JSON — the server constrains the shape,
   // it does not parse for you. Parsing here rather than at each call site means a malformed body is
   // one error type instead of a surprise in a page render.
@@ -188,10 +198,10 @@ async function complete(cfg, opts) {
         throw new AiError('bad_response',
           `${label} ran out of room mid-answer (${body.max_tokens} tokens) — the structured reply ` +
           'was cut off before it was finished. If this repeats, the schema may be letting the ' +
-          'model ramble; a Regenerate usually succeeds.', { cause: err });
+          'model ramble; a Regenerate usually succeeds.', { cause: err, usage });
       }
       throw new AiError('bad_response',
-        `${label} was asked for structured output and returned text that will not parse.`, { cause: err });
+        `${label} was asked for structured output and returned text that will not parse.`, { cause: err, usage });
     }
   }
 
@@ -199,7 +209,7 @@ async function complete(cfg, opts) {
     text,
     json,
     model: payload.model || cfg.model,
-    usage: normaliseUsage(payload.usage),
+    usage,
     ms: Date.now() - started,
     finishReason,
     // A caller that cares (the summary's coverage line) can tell a complete answer from a cut-off
@@ -236,8 +246,9 @@ function unclosedThinking(text) {
  * payload, so they are distinguished: the budget ran out, the budget went on thinking, or the server
  * genuinely said nothing.
  */
-function emptyCompletion({ label, finishReason, reasoning, maxTokens, usage }) {
-  const spent = (usage && usage.completion_tokens) || 0;
+function emptyCompletion({ label, finishReason, reasoning, maxTokens, usage: raw }) {
+  const spent = (raw && raw.completion_tokens) || 0;
+  const usage = normaliseUsage(raw);
   if (finishReason === 'length' || (reasoning && !spentLeftRoom(spent, maxTokens))) {
     return new AiError('bad_response',
       `${label} ran out of room before it answered — it used all ${maxTokens} reply tokens` +
@@ -253,7 +264,7 @@ function emptyCompletion({ label, finishReason, reasoning, maxTokens, usage }) {
   }
   return new AiError('bad_response',
     `${label} returned an empty completion (finish reason: ${finishReason || 'none given'}). ` +
-    'Check the model is fully loaded on the server.');
+    'Check the model is fully loaded on the server.', { usage });
 }
 
 /** Did the completion stop well short of the ceiling? Then the ceiling was not the problem. */

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>