toolroll 0.9.54 → 0.9.55

package/dist/mcp-oauth.js

@@ -4,6 +4,8 @@ import { hashSecret, mintApiToken } from "./api-tokens.js";
 import { limitWords } from "./request-budget.js";
 import { sourceKey } from "./source-key.js";
 import { PKCE_CHALLENGE, readOAuthRegistration, readOAuthTokenRequest } from "./contracts/mcp-oauth.js";
+import { html, htmlString, joinHtml, postForm, styleElement } from "./html.js";
+import { withFormToken } from "./server/request-context.js";
 /** How long each piece lives. A code is spent at once; a grant ends after 30 days and the person consents again. */
 export const OAUTH_TIMES = { requestMs: 10 * 60_000, codeMs: 60_000, accessSeconds: 3600, grantDays: 30 };
 /** The most sign-ins waiting at once, and registered clients kept. */
@@ -33,7 +35,6 @@ export function oauthTokenAllowed(store, tokenId, path, now) {
 export const oauthProjects = (store, tokenId) => store.oauthGrant(tokenId)?.projects ?? null;
 const sha256 = (text) => createHash("sha256").update(text, "utf8").digest("hex");
 const same = (a, b) => { const x = Buffer.from(a), y = Buffer.from(b); return x.length === y.length && timingSafeEqual(x, y); };
-const escape = (text) => text.replace(/[&<>"']/g, one => `&#${one.charCodeAt(0)};`);
 const clean = (text) => text.replace(/[\u0000-\u001f\u007f-\u009f\u200b-\u200f\u202a-\u202e\u2066-\u2069]+/g, " ").replace(/\s+/g, " ").trim();
 /**
  * A redirect a client may register: https anywhere, or http on 127.0.0.1 / [::1] (RFC 8252 §7.3), with no
@@ -80,10 +81,10 @@ export function createOAuthHttp(options) {
     };
     const oauthError = (response, status, error, description) => json(response, status, { error, error_description: description });
     /** A page of this sign-in: script-free, never framed, posting only to this console. */
-    const page = (response, status, html) => {
+    const page = (response, status, document) => {
         response.writeHead(status, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store", "referrer-policy": "no-referrer", "x-content-type-options": "nosniff", "x-frame-options": "DENY",
             "content-security-policy": "default-src 'none'; style-src 'unsafe-inline'; form-action 'self'; frame-ancestors 'none'; base-uri 'none'" });
-        response.end(html);
+        response.end(htmlString(document));
     };
     /**
      * On to an address by a page that moves on by itself, never a redirect: a redirect answering a form is held to
@@ -93,9 +94,9 @@ export function createOAuthHttp(options) {
     const moveOn = (response, to, words) => {
         response.writeHead(200, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store", "referrer-policy": "no-referrer", "x-content-type-options": "nosniff", "x-frame-options": "DENY",
             "content-security-policy": "default-src 'none'; style-src 'unsafe-inline'; frame-ancestors 'none'; base-uri 'none'; form-action 'none'" });
-        response.end(`<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="refresh" content="0;url=${escape(to)}"><title>Toolroll</title>${STYLE}<main><p>${escape(words)} <a href="${escape(to)}">Continue</a></p></main></html>`);
+        response.end(htmlString(html `<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="refresh" content="0;url=${to}"><title>Toolroll</title>${STYLE}<main><p>${words} <a href="${to}">Continue</a></p></main></html>`));
     };
-    const problemPage = (response, status, title, said) => page(response, status, shell(title, `<h1>${escape(title)}</h1><p>${escape(said)}</p>`));
+    const problemPage = (response, status, title, said) => page(response, status, shell(title, html `<h1>${title}</h1><p>${said}</p>`));
     /** Back to the client with an answer: the code, or an error, and its state; `iss` names this console (RFC 9207). */
     const backToClient = (response, origin, redirectUri, state, answer, words) => {
         const to = new URL(redirectUri);
@@ -234,34 +235,34 @@ export function createOAuthHttp(options) {
         const title = "Connect to Toolroll";
         const projectList = projects.length === 0 ? "" : projects.map(path => {
             const name = path.split("/").filter(part => part !== "").pop() ?? path;
-            return `<label class="pick"><input type="checkbox" name="project" value="${escape(path)}"${checked.has(path) ? " checked" : ""}><span><b>${escape(name)}</b><small>${escape(path)}</small></span></label>`;
-        }).join("");
+            return html `<label class="pick"><input type="checkbox" name="project" value="${path}"${checked.has(path) ? " checked" : ""}><span><b>${name}</b><small>${path}</small></span></label>`;
+        });
         const step = session.sso?.fresh === true
-            ? `<p class="meta">Confirmed with ${escape(session.sso.label)}.</p><input type="hidden" name="password" value="">`
-            : `<label class="field">Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label>${session.sso === null ? "" : `<p class="meta"><a href="/login/sso?reauth=1&amp;return=${escape(encodeURIComponent(`/oauth/authorize?request=${id}`))}">Confirm with ${escape(session.sso.label)}</a> instead.</p>`}`;
-        const body = [
-            `<h1>${escape(title)}</h1>`,
-            `<p class="client"><b>${escape(client.name)}</b> <span class="tag">unverified</span> <span class="meta">returns to ${escape(host)}</span></p>`,
-            problem === null ? "" : `<div class="problem" role="alert">${escape(problem)}</div>`,
+            ? html `<p class="meta">Confirmed with ${session.sso.label}.</p><input type="hidden" name="password" value="">`
+            : html `<label class="field">Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label>${session.sso === null ? "" : html `<p class="meta"><a href="/login/sso?reauth=1&amp;return=${encodeURIComponent(`/oauth/authorize?request=${id}`)}">Confirm with ${session.sso.label}</a> instead.</p>`}`;
+        // The consent form carries the console session's own CSRF token (checked against session.csrf on the post).
+        const consentForm = (body) => withFormToken(session.csrf, () => postForm("/oauth/authorize", body, { hidden: { request: id } }));
+        const body = joinHtml([
+            html `<h1>${title}</h1>`,
+            html `<p class="client"><b>${client.name}</b> <span class="tag">unverified</span> <span class="meta">returns to ${host}</span></p>`,
+            problem === null ? "" : html `<div class="problem" role="alert">${problem}</div>`,
             projects.length === 0
-                ? `<p>You don't have access to any projects. Ask your Toolroll administrator to add you to one.</p>`
-                    + `<form method="post" action="/oauth/authorize"><input type="hidden" name="request" value="${escape(id)}"><input type="hidden" name="csrf" value="${escape(session.csrf)}"><button name="decision" value="deny" class="secondary">Cancel</button></form>`
-                : [
-                    `<p>Connects as ${escape(session.name)} in your selected projects. It can't approve work or change people or policy.</p>`,
-                    `<form method="post" action="/oauth/authorize">`,
-                    `<input type="hidden" name="request" value="${escape(id)}"><input type="hidden" name="csrf" value="${escape(session.csrf)}">`,
-                    `<fieldset><legend>Access</legend>`,
-                    `<label class="pick"><input type="radio" name="access" value="read"${access === "read" ? " checked" : ""}><span><b>Read</b><small>See tasks, results and status.</small></span></label>`,
-                    mayAct ? `<label class="pick"><input type="radio" name="access" value="act"${access === "act" ? " checked" : ""}><span><b>Act</b><small>Also file tasks under your name.</small></span></label>` : "",
-                    `</fieldset>`,
-                    `<fieldset><legend>Projects</legend>${projectList}</fieldset>`,
-                    `<p class="meta">Access lasts up to 30 days. Revoke it anytime in Settings → Sessions &amp; tokens.</p>`,
-                    step,
-                    `<div class="actions"><button name="decision" value="allow">Allow access</button><button name="decision" value="deny" class="secondary" formnovalidate>Cancel</button></div>`,
-                    `</form>`,
-                ].join(""),
-            `<details><summary>Client details</summary><p class="meta">Client ID <code>${escape(client.id)}</code><br>Returns to <code>${escape(one.redirectUri)}</code><br>Toolroll doesn't know who made this client; its name is what it says about itself.</p></details>`,
-        ].join("");
+                ? html `<p>You don't have access to any projects. Ask your Toolroll administrator to add you to one.</p>${consentForm(html `<button name="decision" value="deny" class="secondary">Cancel</button>`)}`
+                : joinHtml([
+                    html `<p>Connects as ${session.name} in your selected projects. It can't approve work or change people or policy.</p>`,
+                    consentForm(joinHtml([
+                        html `<fieldset><legend>Access</legend>`,
+                        html `<label class="pick"><input type="radio" name="access" value="read"${access === "read" ? " checked" : ""}><span><b>Read</b><small>See tasks, results and status.</small></span></label>`,
+                        mayAct ? html `<label class="pick"><input type="radio" name="access" value="act"${access === "act" ? " checked" : ""}><span><b>Act</b><small>Also file tasks under your name.</small></span></label>` : "",
+                        html `</fieldset>`,
+                        html `<fieldset><legend>Projects</legend>${projectList}</fieldset>`,
+                        html `<p class="meta">Access lasts up to 30 days. Revoke it anytime in Settings → Sessions &amp; tokens.</p>`,
+                        step,
+                        html `<div class="actions"><button name="decision" value="allow">Allow access</button><button name="decision" value="deny" class="secondary" formnovalidate>Cancel</button></div>`,
+                    ])),
+                ]),
+            html `<details><summary>Client details</summary><p class="meta">Client ID <code>${client.id}</code><br>Returns to <code>${one.redirectUri}</code><br>Toolroll doesn't know who made this client; its name is what it says about itself.</p></details>`,
+        ]);
         return shell(title, body);
     };
     async function authorizeConsent(request, response, url, origin) {
@@ -449,8 +450,7 @@ export function createOAuthHttp(options) {
     };
 }
 /** The sign-in's pages stand alone: no stylesheet, script or font loads here, so the palette rides inline. */
-const STYLE = [
-    `<style>`,
+const STYLE = styleElement([
     `:root{color-scheme:light dark;--ground:#efefef;--paper:#fff;--ink:#171717;--muted:#666;--line:#e6e6e6;--soft:#f2f2f2;--accent:#171717;--on-accent:#fff;--problem:#b42318}`,
     `@media (prefers-color-scheme:dark){:root{--ground:#0b0b0b;--paper:#161616;--ink:#ededed;--muted:#a1a1a1;--line:#262626;--soft:#1f1f1f;--accent:#ededed;--on-accent:#0b0b0b;--problem:#ff8a80}}`,
     `*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--ground);color:var(--ink);font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}`,
@@ -467,6 +467,5 @@ const STYLE = [
     `.problem{border:1px solid var(--problem);color:var(--problem);border-radius:8px;padding:10px 12px;margin-bottom:14px}a{color:inherit;text-underline-offset:3px}`,
     `details{border-top:1px solid var(--line)}summary{cursor:pointer;color:var(--muted);font-size:13px;min-height:44px;padding:12px 0}code{font:12.5px/1.5 ui-monospace,"SF Mono",Menlo,monospace;background:var(--soft);border-radius:5px;padding:1px 5px;overflow-wrap:anywhere}`,
     `@media (max-width:480px){main{padding:20px}.field input{font-size:16px}.actions button{flex:1 1 auto}}`,
-    `</style>`,
-].join("");
-const shell = (title, body) => `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="color-scheme" content="light dark"><title>${escape(title)}</title>${STYLE}</head><body><main>${body}</main></body></html>`;
+].join(""));
+const shell = (title, body) => html `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="color-scheme" content="light dark"><title>${title}</title>${STYLE}</head><body><main>${body}</main></body></html>`;

package/dist/models-ui.d.ts

@@ -1,5 +1,6 @@
 /** Settings → Models: the CLIs on this computer, the default agent for each
  * role picked from live lists, and the models that just arrived. */
+import { type Html } from "./html.js";
 import type { ModelOption, RuntimeState, SeenModel, WatchState } from "./model-catalog.js";
 export declare const MODELS_CSS = ".models{max-width:780px;min-width:0;overflow-wrap:anywhere}.models .card{padding:16px 20px;margin:12px 0;min-width:0}.models h2{margin:24px 0 8px}.models form{margin:0}.models label{display:grid;gap:6px}.models select,.models input[type=search]{box-sizing:border-box;width:100%;max-width:100%;min-width:0}.models button,.models summary,.models .button-link{min-height:44px}.models button{white-space:nowrap}.models summary{padding:12px 0;cursor:pointer}.models .tool{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.models .role{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.models .role-row{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.models .role-row select{flex:1 1 240px;width:auto;min-width:0}.models .role-name{font-weight:600}.models .new{font-weight:600}.models ul{padding-left:20px}.models .meta{font-size:.86rem}@media(max-width:600px){.models .card{padding:14px}}";
 export type RoleView = {
@@ -29,6 +30,6 @@ export type ModelsView = {
     said: string | null;
     problem: string | null;
 };
-export declare function modelsHtml(view: ModelsView): string;
+export declare function modelsHtml(view: ModelsView): Html;
 /** Filters one long picker as you type; the saved choice always stays listed. */
 export declare function modelsScript(): string;

package/dist/models-ui.js

@@ -1,60 +1,50 @@
+/** Settings → Models: the CLIs on this computer, the default agent for each
+ * role picked from live lists, and the models that just arrived. */
+import { html, postForm } from "./html.js";
 import { priceWords } from "./model-catalog.js";
 import { whenUtc } from "./when-html.js";
-const e = (s) => String(s ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
-const hidden = (data) => Object.entries(data).map(([k, v]) => `<input type="hidden" name="${e(k)}" value="${e(v)}">`).join("");
 const when = (iso) => iso === null ? "never" : whenUtc(iso);
 export const MODELS_CSS = `.models{max-width:780px;min-width:0;overflow-wrap:anywhere}.models .card{padding:16px 20px;margin:12px 0;min-width:0}.models h2{margin:24px 0 8px}.models form{margin:0}.models label{display:grid;gap:6px}.models select,.models input[type=search]{box-sizing:border-box;width:100%;max-width:100%;min-width:0}.models button,.models summary,.models .button-link{min-height:44px}.models button{white-space:nowrap}.models summary{padding:12px 0;cursor:pointer}.models .tool{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.models .role{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.models .role-row{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.models .role-row select{flex:1 1 240px;width:auto;min-width:0}.models .role-name{font-weight:600}.models .new{font-weight:600}.models ul{padding-left:20px}.models .meta{font-size:.86rem}@media(max-width:600px){.models .card{padding:14px}}`;
-function toolRow(one, manage, csrf) {
+function toolRow(one, manage) {
     const state = one.installed === null ? "Version unknown"
-        : one.behind ? `${e(one.installed)} · <strong>${e(one.latest)} available</strong>`
-            : `${e(one.installed)} · Up to date`;
+        : one.behind ? html `${one.installed} · <strong>${one.latest} available</strong>`
+            : `${one.installed} · Up to date`;
     const action = manage && one.behind && one.updateCommand !== null
-        ? `<form method="post" action="/settings/models/update">${hidden({ csrf, tool: one.tool })}<button type="submit">Update ${e(one.name)}</button></form>`
-        : one.behind ? `<span class="meta">Update it the way you installed it</span>` : "";
-    return `<div class="card tool"><span><strong>${e(one.name)}</strong> ${state}${one.problem === null ? "" : `<br><span class="meta">${e(one.problem)}</span>`}</span>${action}</div>`;
+        ? postForm("/settings/models/update", html `<button type="submit">Update ${one.name}</button>`, { hidden: { tool: one.tool } })
+        : one.behind ? html `<span class="meta">Update it the way you installed it</span>` : "";
+    return html `<div class="card tool"><span><strong>${one.name}</strong> ${state}${one.problem === null ? "" : html `<br><span class="meta">${one.problem}</span>`}</span>${action}</div>`;
 }
-function roleForm(role, manage, csrf) {
+function roleForm(role, manage) {
     if (!manage)
-        return `<div class="card role"><strong>${e(role.label)}</strong><span>${e(role.words)}</span></div>`;
+        return html `<div class="card role"><strong>${role.label}</strong><span>${role.words}</span></div>`;
     const known = role.groups.some(group => group.options.some(option => `${group.provider}|${option.value}` === role.current));
-    const saved = !known && role.current !== "inherit" && role.current !== "" ? `<option value="${e(role.current)}" selected>${e(role.words)} · current</option>` : "";
-    const groups = role.groups.map(group => `<optgroup label="${e(group.label)}">${group.options.map(option => {
+    const saved = !known && role.current !== "inherit" && role.current !== "" ? html `<option value="${role.current}" selected>${role.words} · current</option>` : "";
+    const groups = role.groups.map(group => html `<optgroup label="${group.label}">${group.options.map(option => {
         const value = `${group.provider}|${option.value}`;
-        return `<option value="${e(value)}"${value === role.current ? " selected" : ""}>${e(option.label)}</option>`;
-    }).join("")}</optgroup>`).join("");
-    const inherit = role.inherit ? `<option value="inherit"${role.current === "inherit" ? " selected" : ""}>Same as the builder</option>` : "";
+        return html `<option value="${value}"${value === role.current ? html ` selected` : ""}>${option.label}</option>`;
+    })}</optgroup>`);
+    const inherit = role.inherit ? html `<option value="inherit"${role.current === "inherit" ? html ` selected` : ""}>Same as the builder</option>` : "";
     const long = role.groups.reduce((sum, group) => sum + group.options.length, 0) > 40;
     const count = role.groups.reduce((sum, group) => sum + group.options.length, 0);
     const id = `role-${role.phase}`;
-    return `<form method="post" action="/settings/models/agent" class="card role">${hidden({ csrf, phase: role.phase })}` +
-        `<label class="role-name" for="${id}">${e(role.label)}</label>` +
-        (long ? `<input type="search" data-model-filter hidden aria-label="Search ${e(role.label.toLowerCase())} models" placeholder="Search ${count} models" autocomplete="off">` : "") +
-        `<div class="role-row"><select id="${id}" name="agent">${inherit}${saved}${groups}</select><button type="submit" class="secondary">Save</button></div></form>`;
+    return postForm("/settings/models/agent", html `<label class="role-name" for="${id}">${role.label}</label>${long ? html `<input type="search" data-model-filter hidden aria-label="Search ${role.label.toLowerCase()} models" placeholder="Search ${count} models" autocomplete="off">` : ""}<div class="role-row"><select id="${id}" name="agent">${inherit}${saved}${groups}</select><button type="submit" class="secondary">Save</button></div>`, { attrs: { class: "card role" }, hidden: { phase: role.phase } });
 }
 export function modelsHtml(view) {
     const manage = view.canManage && view.csrf !== "";
-    const status = view.said === null ? "" : `<p role="status">${e(view.said)}</p>`;
-    const problem = view.problem === null ? "" : `<p class="problem" role="alert">${e(view.problem)}</p>`;
+    const status = view.said === null ? "" : html `<p role="status">${view.said}</p>`;
+    const problem = view.problem === null ? "" : html `<p class="problem" role="alert">${view.problem}</p>`;
     const tools = view.runtimes.length === 0
-        ? `<p class="meta">No Claude, Codex or Gemini CLI found on this computer yet.</p>`
-        : view.runtimes.map(one => toolRow(one, manage, view.csrf)).join("");
+        ? html `<p class="meta">No Claude, Codex or Gemini CLI found on this computer yet.</p>`
+        : view.runtimes.map(one => toolRow(one, manage));
     const check = manage
-        ? `<form method="post" action="/settings/models/check" class="inline">${hidden({ csrf: view.csrf })}<button type="submit" class="secondary">Check now</button></form>`
+        ? postForm("/settings/models/check", html `<button type="submit" class="secondary">Check now</button>`, { attrs: { class: "inline" } })
         : "";
     const fresh = view.fresh.length === 0 ? "" :
-        `<h2>New models</h2><ul>${view.fresh.map(model => `<li><span class="new">${e(model.name)}</span> <span class="meta">${e(priceWords(model))}${model.releasedAt === null ? "" : ` · released ${e(model.releasedAt.slice(0, 10))}`}</span></li>`).join("")}</ul>`;
+        html `<h2>New models</h2><ul>${view.fresh.map(model => html `<li><span class="new">${model.name}</span> <span class="meta">${priceWords(model)}${model.releasedAt === null ? "" : ` · released ${model.releasedAt.slice(0, 10)}`}</span></li>`)}</ul>`;
     const watch = manage
-        ? `<details><summary>Automatic checks · ${view.watch.enabled ? "On" : "Off"}</summary><form method="post" action="/settings/models/watch">${hidden({ csrf: view.csrf, enabled: view.watch.enabled ? "0" : "1" })}` +
-            `<p>Check every 6 hours and send a message when a new model or CLI update appears. It uses public lists and sends nothing about you or your projects.</p>` +
-            `<button type="submit" class="secondary">${view.watch.enabled ? "Turn off" : "Turn on"}</button></form></details>`
+        ? html `<details><summary>Automatic checks · ${view.watch.enabled ? "On" : "Off"}</summary>${postForm("/settings/models/watch", html `<p>Check every 6 hours and send a message when a new model or CLI update appears. It uses public lists and sends nothing about you or your projects.</p><button type="submit" class="secondary">${view.watch.enabled ? "Turn off" : "Turn on"}</button>`, { hidden: { enabled: view.watch.enabled ? "0" : "1" } })}</details>`
         : "";
-    return `<section class="models">${status}${problem}` +
-        `<h2>AI tools</h2>${tools}<p class="meta">Checked ${when(view.watch.checkedAt)} ${check}</p>` +
-        fresh +
-        `<h2>Default agents</h2><p class="meta">New tasks use these. Approved tasks keep the agents they were approved with.</p>` +
-        view.roles.map(role => roleForm(role, manage, view.csrf)).join("") +
-        (view.chat === null ? "" : `<h2>Chat</h2><p>${e(view.chat.words)} · <a href="/settings/lead">Change</a></p>`) +
-        watch + `</section>`;
+    return html `<section class="models">${status}${problem}<h2>AI tools</h2>${tools}<p class="meta">Checked ${when(view.watch.checkedAt)} ${check}</p>${fresh}<h2>Default agents</h2><p class="meta">New tasks use these. Approved tasks keep the agents they were approved with.</p>${view.roles.map(role => roleForm(role, manage))}${view.chat === null ? "" : html `<h2>Chat</h2><p>${view.chat.words} · <a href="/settings/lead">Change</a></p>`}${watch}</section>`;
 }
 /** Filters one long picker as you type; the saved choice always stays listed. */
 export function modelsScript() {

package/dist/monitoring-ui.d.ts

@@ -3,6 +3,7 @@
  * the company's tools. One form, the status of each destination beside it,
  * and how Prometheus reads `/metrics`. The signing secret is shown once.
  */
+import { type Html } from "./html.js";
 import type { MonitoringStatus } from "./store.js";
 import type { MonitoringSettings } from "./monitoring-settings.js";
 export declare const MONITORING_CSS: string;
@@ -12,9 +13,9 @@ export type MonitoringView = {
     head: number;
     origin: string | null;
 };
-export declare function monitoringHtml(view: MonitoringView, csrf: string, notice: {
+export declare function monitoringHtml(view: MonitoringView, notice: {
     said?: string | null;
     problem?: string | null;
-}): string;
+}): Html;
 /** The webhook's signing secret, once: a focused page with no script. */
-export declare function signingSecretHtml(url: string, secret: string): string;
+export declare function signingSecretHtml(url: string, secret: string): Html;

package/dist/monitoring-ui.js

@@ -1,6 +1,11 @@
+/**
+ * Settings → Monitoring (v104): an instance operator points Toolroll at
+ * the company's tools. One form, the status of each destination beside it,
+ * and how Prometheus reads `/metrics`. The signing secret is shown once.
+ */
+import { html, postForm } from "./html.js";
 import { targetOf } from "./monitoring.js";
 import { whenUtc } from "./when-html.js";
-const e = (value) => String(value ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 const when = (at) => whenUtc(at);
 export const MONITORING_CSS = `.monitoring{max-width:720px;min-width:0}.monitoring fieldset{border:0;padding:0;margin:20px 0 0;min-width:0}` +
     `.monitoring legend{font-weight:600;font-size:.9375rem;margin-bottom:6px}.monitoring label{display:grid;gap:4px;margin:10px 0 0;font-size:.875rem}` +
@@ -15,38 +20,20 @@ function statusLine(view, sink, address) {
     // A status for another address (it just changed) says nothing about this one yet.
     const one = view.status.find(row => row.sink === sink && row.target === targetOf(address));
     if (one === undefined || (one.lastOkAt === null && one.lastError === null))
-        return `<p class="status meta" data-monitoring="${sink}" data-state="starting">Starting: the first delivery goes out within a few seconds.</p>`;
+        return html `<p class="status meta" data-monitoring="${sink}" data-state="starting">Starting: the first delivery goes out within a few seconds.</p>`;
     if (one.failures > 0 && one.lastError !== null) {
-        return `<p class="status problem" role="alert" data-monitoring="${sink}" data-state="failing">Failing: ${e(one.lastError)}${one.nextTryAt === null ? "" : ` · trying again ${when(one.nextTryAt)}`}</p>`;
+        return html `<p class="status problem" role="alert" data-monitoring="${sink}" data-state="failing">Failing: ${one.lastError}${one.nextTryAt === null ? "" : html ` · trying again ${when(one.nextTryAt)}`}</p>`;
     }
     const behind = Math.max(0, view.head - one.through);
-    return `<p class="status meta" data-monitoring="${sink}" data-state="ok">${sink === "traces" ? "Sending" : `Sent through entry #${one.through}`}${one.lastOkAt === null ? "" : ` · last ${when(one.lastOkAt)}`}${behind > 0 && sink !== "traces" ? ` · ${behind} to go` : ""}</p>`;
+    return html `<p class="status meta" data-monitoring="${sink}" data-state="ok">${sink === "traces" ? "Sending" : `Sent through entry #${one.through}`}${one.lastOkAt === null ? "" : html ` · last ${when(one.lastOkAt)}`}${behind > 0 && sink !== "traces" ? ` · ${behind} to go` : ""}</p>`;
 }
-export function monitoringHtml(view, csrf, notice) {
+export function monitoringHtml(view, notice) {
     const s = view.settings;
-    const note = notice.problem ? `<p class="problem" role="alert">${e(notice.problem)}</p>` : notice.said ? `<p role="status">${e(notice.said)}</p>` : "";
+    const note = notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : notice.said ? html `<p role="status">${notice.said}</p>` : "";
     const metrics = view.origin === null ? "/metrics" : `${view.origin}/metrics`;
-    return `<section class="monitoring">${note}` +
-        `<form method="post" action="/settings/monitoring"><input type="hidden" name="csrf" value="${e(csrf)}">` +
-        `<fieldset><legend>Audit stream</legend><p class="meta">Every ledger entry with its seal, as it happens, to your log system.</p>` +
-        `<label>Webhook<input type="url" name="webhook" value="${e(s.webhook?.url ?? "")}" placeholder="https://logs.example.com/standing-orders" spellcheck="false"></label>` +
-        statusLine(view, "webhook", s.webhook?.url ?? null) +
-        (s.webhook === null ? "" : `<label class="choice"><input type="checkbox" name="rotate" value="1"> Make a new signing secret</label>`) +
-        `<label>Folder (JSON Lines, a file per day)<input type="text" name="folder" value="${e(s.folder?.path ?? "")}" placeholder="/var/log/standing-orders" spellcheck="false"></label>` +
-        statusLine(view, "folder", s.folder?.path ?? null) + `</fieldset>` +
-        `<fieldset><legend>Traces</legend><p class="meta">Each run as an OpenTelemetry span: timings, model, tokens and cost. Never a prompt or code.</p>` +
-        `<label>Collector (OTLP over HTTP)<input type="url" name="traces" value="${e(s.traces?.endpoint ?? "")}" placeholder="https://otel.example.com:4318" spellcheck="false"></label>` +
-        statusLine(view, "traces", s.traces?.endpoint ?? null) +
-        `<label>Header name (optional)<input type="text" name="header-name" value="${e(s.traces?.header?.name ?? "")}" placeholder="x-honeycomb-team" spellcheck="false"></label>` +
-        `<label>Header value<input type="password" name="header-value" autocomplete="off" placeholder="${s.traces?.header ? "Saved; leave blank to keep" : "API key"}"></label></fieldset>` +
-        `<div class="step-up"><label>Your Toolroll password<input type="password" name="password" autocomplete="current-password"></label></div>` +
-        `<button type="submit">Save</button></form>` +
-        `<fieldset><legend>Metrics</legend><p class="meta">Prometheus reads <code>${e(metrics)}</code> with an instance operator's API token (<a href="/settings/sessions">Sessions &amp; tokens</a>).</p>` +
-        `<details><summary>Example</summary><pre>curl -H "Authorization: Bearer so_…" ${e(metrics)}</pre></details></fieldset></section>`;
+    return html `<section class="monitoring">${note}${postForm("/settings/monitoring", html `<fieldset><legend>Audit stream</legend><p class="meta">Every ledger entry with its seal, as it happens, to your log system.</p><label>Webhook<input type="url" name="webhook" value="${s.webhook?.url ?? ""}" placeholder="https://logs.example.com/standing-orders" spellcheck="false"></label>${statusLine(view, "webhook", s.webhook?.url ?? null)}${s.webhook === null ? "" : html `<label class="choice"><input type="checkbox" name="rotate" value="1"> Make a new signing secret</label>`}<label>Folder (JSON Lines, a file per day)<input type="text" name="folder" value="${s.folder?.path ?? ""}" placeholder="/var/log/standing-orders" spellcheck="false"></label>${statusLine(view, "folder", s.folder?.path ?? null)}</fieldset><fieldset><legend>Traces</legend><p class="meta">Each run as an OpenTelemetry span: timings, model, tokens and cost. Never a prompt or code.</p><label>Collector (OTLP over HTTP)<input type="url" name="traces" value="${s.traces?.endpoint ?? ""}" placeholder="https://otel.example.com:4318" spellcheck="false"></label>${statusLine(view, "traces", s.traces?.endpoint ?? null)}<label>Header name (optional)<input type="text" name="header-name" value="${s.traces?.header?.name ?? ""}" placeholder="x-honeycomb-team" spellcheck="false"></label><label>Header value<input type="password" name="header-value" autocomplete="off" placeholder="${s.traces?.header ? "Saved; leave blank to keep" : "API key"}"></label></fieldset><div class="step-up"><label>Your Toolroll password<input type="password" name="password" autocomplete="current-password"></label></div><button type="submit">Save</button>`)}<fieldset><legend>Metrics</legend><p class="meta">Prometheus reads <code>${metrics}</code> with an instance operator's API token (<a href="/settings/sessions">Sessions &amp; tokens</a>).</p><details><summary>Example</summary><pre>curl -H "Authorization: Bearer so_…" ${metrics}</pre></details></fieldset></section>`;
 }
 /** The webhook's signing secret, once: a focused page with no script. */
 export function signingSecretHtml(url, secret) {
-    return `<h1>Signing secret</h1><div class="card"><p>Give this to the receiver at <span class="mono">${e(url)}</span>. It's shown once.</p><p class="mono secret-value">${e(secret)}</p>` +
-        `<p class="meta">Each request carries <code>x-standing-orders-signature: t=&lt;time&gt;,v1=&lt;HMAC-SHA256 of "time.body"&gt;</code>. Check it, and that the time is recent.</p></div>` +
-        `<p class="meta"><a href="/settings/monitoring">Back to Monitoring</a></p>`;
+    return html `<h1>Signing secret</h1><div class="card"><p>Give this to the receiver at <span class="mono">${url}</span>. It's shown once.</p><p class="mono secret-value">${secret}</p><p class="meta">Each request carries <code>x-standing-orders-signature: t=&lt;time&gt;,v1=&lt;HMAC-SHA256 of "time.body"&gt;</code>. Check it, and that the time is recent.</p></div><p class="meta"><a href="/settings/monitoring">Back to Monitoring</a></p>`;
 }

package/dist/openrouter-models.d.ts

@@ -1,3 +1,4 @@
+import { type Html } from "./html.js";
 export type OpenRouterModel = {
     id: string;
     name: string;
@@ -25,6 +26,6 @@ export declare function fetchOpenRouterModels(key: string | null, fetcher?: type
 /** One bounded cache per console. A changed/removed key cannot reuse another account's list. */
 export declare function openRouterModelsCache(fetcher?: typeof fetch): (key: string | null, refresh?: boolean) => Promise<OpenRouterModels>;
 export declare function modelDollars(amount: number | null): string;
-export declare function openRouterPicker(catalog: OpenRouterModels, selected: string | null, refreshUrl: string): string;
+export declare function openRouterPicker(catalog: OpenRouterModels, selected: string | null, refreshUrl: string): Html;
 /** Only filters already-rendered options; credentials never enter this script. */
 export declare function openRouterPickerScript(): string;

package/dist/openrouter-models.js

@@ -1,5 +1,6 @@
 /** Live discovery for the UI. Prices are USD, separate from rounded budget pins. */
 import { createHash } from "node:crypto";
+import { html } from "./html.js";
 import { readCappedBody } from "./converse.js";
 import { validModelId } from "./provider.js";
 const record = (value) => value !== null && typeof value === "object" && !Array.isArray(value) ? value : {};
@@ -76,7 +77,6 @@ export function openRouterModelsCache(fetcher = fetch) {
         return value;
     };
 }
-const escape = (s) => s.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
 export function modelDollars(amount) {
     if (amount === null)
         return "Not reported";
@@ -96,14 +96,10 @@ function details(model) {
 export function openRouterPicker(catalog, selected, refreshUrl) {
     const rows = catalog.ok ? catalog.models : [];
     const current = rows.find(row => row.id === selected);
-    const manual = selected && !current ? `<option selected value="${escape(selected)}" data-detail="This saved model is not in the loaded catalog. Availability and pricing are unverified.">${escape(selected)} · Saved choice</option>` : "";
-    return `<div data-openrouter-picker><p class="meta">${catalog.ok
-        ? `${rows.length} text models · ${catalog.source === "account" ? "Filtered for your OpenRouter account" : "Public catalog · Connect a key to check your account"} · Updated ${escape(catalog.checkedAt.slice(11, 16))} UTC`
-        : escape(catalog.problem)} <a href="${escape(refreshUrl)}">Refresh models</a></p>` +
-        `<label data-model-search hidden>Search models<input type="search" placeholder="Search by name or provider" autocomplete="off"></label>` +
-        `<label>Model<select name="model" aria-describedby="openrouter-price"><option value="__custom__"${selected === null ? " selected" : ""}>Choose a model</option>${manual}${rows.map(row => `<option value="${escape(row.id)}" data-detail="${escape(details(row))}"${row.id === selected ? " selected" : ""}>${escape(row.name)} · ${modelDollars(row.input)} in / ${modelDollars(row.output)} out per 1M</option>`).join("")}</select></label>` +
-        `<p id="openrouter-price" class="meta" aria-live="polite">${current ? escape(details(current)) : selected ? "This saved model is not in the loaded catalog. Availability and pricing are unverified." : "Choose a model to see its token prices and context size."}</p>` +
-        `<p data-model-count class="meta" aria-live="polite"></p><p class="meta"><a href="https://openrouter.ai/models" target="_blank" rel="noreferrer">Compare models on OpenRouter ↗</a> · Prices in USD; catalog browsing uses no model tokens.</p></div>`;
+    const manual = selected && !current ? html `<option selected value="${selected}" data-detail="This saved model is not in the loaded catalog. Availability and pricing are unverified.">${selected} · Saved choice</option>` : "";
+    return html `<div data-openrouter-picker><p class="meta">${catalog.ok
+        ? `${rows.length} text models · ${catalog.source === "account" ? "Filtered for your OpenRouter account" : "Public catalog · Connect a key to check your account"} · Updated ${catalog.checkedAt.slice(11, 16)} UTC`
+        : catalog.problem} <a href="${refreshUrl}">Refresh models</a></p><label data-model-search hidden>Search models<input type="search" placeholder="Search by name or provider" autocomplete="off"></label><label>Model<select name="model" aria-describedby="openrouter-price"><option value="__custom__"${selected === null ? html ` selected` : ""}>Choose a model</option>${manual}${rows.map(row => html `<option value="${row.id}" data-detail="${details(row)}"${row.id === selected ? html ` selected` : ""}>${row.name} · ${modelDollars(row.input)} in / ${modelDollars(row.output)} out per 1M</option>`)}</select></label><p id="openrouter-price" class="meta" aria-live="polite">${current ? details(current) : selected ? "This saved model is not in the loaded catalog. Availability and pricing are unverified." : "Choose a model to see its token prices and context size."}</p><p data-model-count class="meta" aria-live="polite"></p><p class="meta"><a href="https://openrouter.ai/models" target="_blank" rel="noreferrer">Compare models on OpenRouter ↗</a> · Prices in USD; catalog browsing uses no model tokens.</p></div>`;
 }
 /** Only filters already-rendered options; credentials never enter this script. */
 export function openRouterPickerScript() {

package/dist/operate.js

@@ -370,7 +370,7 @@ External trackers — build what a tracker nominates, under local approvals
 
   toolroll claim <id> --runner <name> [--ttl <seconds>]
   toolroll heartbeat <lease>         still working; extends the lease
-  toolroll release <lease>           done with it; fenced if superseded
+  toolroll worker release <lease>    done with it; fenced if superseded
   toolroll reap                      release every lease that ran out
 
   toolroll tick --runner <name> --token <t> --repo <path>
@@ -1143,8 +1143,10 @@ async function dispatch(command, positional, flags, context) {
             return claimCommand(positional, flags, context);
         case "heartbeat":
             return leaseCommand("heartbeat", positional, flags, context);
-        case "release":
-            return leaseCommand("release", positional, flags, context);
+        case "worker":
+            if (positional[0] === "release")
+                return leaseCommand("release", positional.slice(1), flags, context);
+            return fail(context.write, context.json, "worker", "usage", "`toolroll worker release <lease>` returns a lease.", EXIT.usage);
         case "reap":
             return reapCommand(context);
         case "runner":
@@ -1476,18 +1478,20 @@ function claimCommand(positional, flags, context) {
  */
 function leaseCommand(command, positional, flags, context) {
     const { store, write, json, now } = context;
+    // `release` answers as the worker verb it now is (the bare `toolroll release <lease>` form is deprecated).
+    const name = command === "release" ? "worker release" : command;
     const lease = positional[0];
     if (lease === undefined)
-        return fail(write, json, command, "usage", `which lease? \`toolroll ${command} <lease>\``, EXIT.usage);
+        return fail(write, json, name, "usage", `which lease? \`toolroll ${name} <lease>\``, EXIT.usage);
     const ttl = readTtl(flags);
     if (ttl === null)
-        return fail(write, json, command, "usage", "--ttl takes whole seconds", EXIT.usage);
+        return fail(write, json, name, "usage", "--ttl takes whole seconds", EXIT.usage);
     const result = command === "heartbeat" ? heartbeat(store, lease, now, ttl) : release(store, lease, now);
     if (!result.ok) {
         const message = result.reason === "fenced"
             ? "superseded — another runner holds this task now; stop rather than retry"
             : "no such lease";
-        return fail(write, json, command, result.reason, message, EXIT.refused);
+        return fail(write, json, name, result.reason, message, EXIT.refused);
     }
     if (command === "release") {
         const task = store.getTask(String(refExternalId(store, result.claim.taskRef)));
@@ -1496,7 +1500,7 @@ function leaseCommand(command, positional, flags, context) {
         if (task !== null && task.state === "running")
             store.setTaskState(task.id, "queued", now);
     }
-    return succeed(write, json, command, { lease: result.claim }, () => [
+    return succeed(write, json, name, { lease: result.claim }, () => [
         command === "heartbeat"
             ? `Still yours until ${result.claim.expiresAt}.`
             : `Released ${result.claim.leaseId}.`,

package/dist/people-audit-ui.d.ts

@@ -1,5 +1,6 @@
 import { type AuditAction } from "./remote-audit.js";
 import type { ApiTokenRow } from "./store.js";
+import { type Html } from "./html.js";
 export declare const PEOPLE_AUDIT_CSS: string;
 export type PersonAuditView = {
     name: string;
@@ -11,4 +12,4 @@ export type PersonAuditView = {
     now: Date;
 };
 export declare const personHref: (name: string, more?: Record<string, string>) => string;
-export declare function personAuditHtml(view: PersonAuditView): string;
+export declare function personAuditHtml(view: PersonAuditView): Html;

package/dist/people-audit-ui.js

@@ -5,7 +5,7 @@
  */
 import { basename } from "node:path";
 import { tokenStatus } from "./remote-audit.js";
-const e = (value) => String(value ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+import { html } from "./html.js";
 const stamp = (value) => `${value.slice(0, 16).replace("T", " ")} UTC`;
 export const PEOPLE_AUDIT_CSS = `.person-audit{max-width:820px;min-width:0;overflow-wrap:anywhere}.person-audit h2{font-size:1.05rem;margin:1.25rem 0 8px}` +
     `.person-audit .rows{display:grid;border:1px solid var(--so-line);border-radius:10px;overflow:hidden}.person-audit .row-item{padding:10px 14px;border-bottom:1px solid var(--so-line);min-width:0}` +
@@ -17,22 +17,22 @@ export const PEOPLE_AUDIT_CSS = `.person-audit{max-width:820px;min-width:0;overf
     `@media(max-width:600px){.person-audit .row-item a{min-height:44px}}`;
 export const personHref = (name, more = {}) => `/people?${new URLSearchParams({ person: name, ...more }).toString()}`;
 export function personAuditHtml(view) {
-    const tokens = view.tokens.length === 0 ? `<p class="meta">No API tokens.</p>` : `<div class="rows">${view.tokens.map(one => {
+    const tokens = view.tokens.length === 0 ? html `<p class="meta">No API tokens.</p>` : html `<div class="rows">${view.tokens.map(one => {
         const status = tokenStatus(one, view.now);
-        return `<div class="row-item" data-token-name="${e(one.name)}"><p><a href="${e(personHref(view.name, { "token-name": one.name }))}">${e(one.name)}</a></p>` +
-            `<p class="meta">${status === "active" ? "Active" : status === "expired" ? "Expired" : "Revoked"} · ${one.access === "act" ? "Can act" : "Read only"} · ` +
-            `last used ${one.lastUsedAt === null ? "never" : e(stamp(one.lastUsedAt))}</p></div>`;
-    }).join("")}</div>`;
-    const filtered = view.token === null ? "" : `<p class="meta">With ${e(view.token)}</p><p><a href="${e(personHref(view.name))}">All tokens</a></p>`;
-    const actions = view.actions.length === 0 ? `<p class="meta">No remote actions${view.token === null ? "" : " with this token"}.</p>` : `<div class="rows">${view.actions.map(actionHtml).join("")}</div>`;
-    const older = view.nextCursor === null ? "" : `<p><a href="${e(personHref(view.name, { ...(view.token === null ? {} : { "token-name": view.token }), before: view.nextCursor }))}">Older actions</a></p>`;
-    return `<p><a href="/people">People</a></p><h1>${e(view.name)}</h1><section class="person-audit"><h2>API tokens</h2>${tokens}` +
-        `<h2>Remote activity</h2>${filtered}${actions}${older}</section>`;
+        return html `<div class="row-item" data-token-name="${one.name}"><p><a href="${personHref(view.name, { "token-name": one.name })}">${one.name}</a></p>\
+<p class="meta">${status === "active" ? "Active" : status === "expired" ? "Expired" : "Revoked"} · ${one.access === "act" ? "Can act" : "Read only"} · \
+last used ${one.lastUsedAt === null ? "never" : stamp(one.lastUsedAt)}</p></div>`;
+    })}</div>`;
+    const filtered = view.token === null ? "" : html `<p class="meta">With ${view.token}</p><p><a href="${personHref(view.name)}">All tokens</a></p>`;
+    const actions = view.actions.length === 0 ? html `<p class="meta">No remote actions${view.token === null ? "" : " with this token"}.</p>` : html `<div class="rows">${view.actions.map(actionHtml)}</div>`;
+    const older = view.nextCursor === null ? "" : html `<p><a href="${personHref(view.name, { ...(view.token === null ? {} : { "token-name": view.token }), before: view.nextCursor })}">Older actions</a></p>`;
+    return html `<p><a href="/people">People</a></p><h1>${view.name}</h1><section class="person-audit"><h2>API tokens</h2>${tokens}\
+<h2>Remote activity</h2>${filtered}${actions}${older}</section>`;
 }
 function actionHtml(action) {
     const label = action.outcome === "ok" ? "OK" : action.outcome === "refused" ? "Refused" : "Error";
     const detail = [stamp(action.at), action.token ?? "unknown token", action.source === "mcp" ? "Agent (MCP)" : "CLI",
         ...(action.repo === null ? [] : [basename(action.repo)]), ...(action.reason === null ? [] : [action.reason])];
-    return `<div class="row-item" data-action="${action.id}"><p><span class="outcome outcome-${action.outcome}">${label}</span>${e(action.name)}` +
-        `${action.taskId === null ? "" : ` · <a href="/t/${encodeURIComponent(action.taskId)}">${e(action.taskId)}</a>`}</p><p class="meta">${detail.map(e).join(" · ")}</p></div>`;
+    return html `<div class="row-item" data-action="${action.id}"><p><span class="outcome outcome-${action.outcome}">${label}</span>${action.name}\
+${action.taskId === null ? "" : html ` · <a href="/t/${encodeURIComponent(action.taskId)}">${action.taskId}</a>`}</p><p class="meta">${detail.join(" · ")}</p></div>`;
 }

package/dist/policy-ui.d.ts

@@ -4,6 +4,7 @@
  * action ledger. Anyone signed in reads it; an instance operator changes it
  * with their password.
  */
+import { type Html } from "./html.js";
 import type { LedgerEntry } from "./action-ledger.js";
 import { type SavedPolicy } from "./policy.js";
 export declare const POLICY_CSS: string;
@@ -14,7 +15,7 @@ export type PolicyView = {
     /** The project tools here, as a hint for the tools list. */
     toolNames: string[];
 };
-export declare function policyHtml(view: PolicyView, csrf: string, notice: {
+export declare function policyHtml(view: PolicyView, notice: {
     said?: string | null;
     problem?: string | null;
-}): string;
+}): Html;