toolroll 0.9.53 → 0.9.55

package/dist/slack.js

@@ -3,7 +3,7 @@ import { randomBytes } from "node:crypto";
 import { setTimeout as sleep } from "node:timers/promises";
 import { SocketModeClient, LogLevel } from "@slack/socket-mode";
 import { loadSlackCredentials, slackApi } from "./slack-api.js";
-import { SlackState } from "./slack-state.js";
+import { ChatState } from "./chat-delivery-state.js";
 import { receiveSlack, processSlackEvent, deliverSlackPart, planSlackNotifications, planSlackRooms, } from "./slack-chat.js";
 /** The bot and socket tokens must belong to the same app, including after reconnect. */
 export class ToolrollSlackSocket extends SocketModeClient {
@@ -29,7 +29,7 @@ export class ToolrollSlackSocket extends SocketModeClient {
     }
 }
 export async function followSlack(options) {
-    const owner = randomBytes(16).toString("hex"), state = new SlackState(options.store);
+    const owner = randomBytes(16).toString("hex"), state = new ChatState(options.store, "slack");
     const pause = async (ms) => {
         try {
             await sleep(ms, undefined, { signal: options.signal });
@@ -55,9 +55,7 @@ export async function followSlack(options) {
                 current.appToken === credentials.appToken &&
                 state.owns(credentials.installation, owner));
         };
-        const problem = (text) => state.db
-            .prepare("UPDATE slack_runtime SET problem=? WHERE installation=? AND owner=?")
-            .run(text, credentials.installation, owner);
+        const problem = (text) => state.setProblem(credentials.installation, owner, text);
         // SDK log output can include envelopes/tokens. Only fixed status phrases are saved.
         const client = new ToolrollSlackSocket({
             appToken: credentials.appToken,
@@ -93,9 +91,7 @@ export async function followSlack(options) {
         }, 10_000);
         client.on("connected", () => {
             connected = true;
-            state.db
-                .prepare("UPDATE slack_runtime SET connected=?,problem=NULL WHERE installation=? AND owner=?")
-                .run(new Date().toISOString(), credentials.installation, owner);
+            state.setConnected(credentials.installation, owner, new Date());
         });
         client.on("disconnected", () => {
             connected = false;
@@ -131,11 +127,7 @@ export async function followSlack(options) {
         try {
             await client.start();
             while (same()) {
-                const retry = state.db
-                    .prepare("SELECT retry_at FROM slack_runtime WHERE installation=?")
-                    .get(credentials.installation)?.retry_at;
-                if (!connected ||
-                    (typeof retry === "string" && retry > new Date().toISOString())) {
+                if (!connected || state.retryAt(credentials.installation) > new Date().toISOString()) {
                     await pause(1000);
                     continue;
                 }
@@ -158,9 +150,7 @@ export async function followSlack(options) {
             alive = false;
             options.signal.removeEventListener("abort", stop);
             await client.disconnect().catch(() => { });
-            state.db
-                .prepare("UPDATE slack_runtime SET owner=NULL,lease_until=NULL,connected=NULL WHERE installation=? AND owner=?")
-                .run(credentials.installation, owner);
+            state.stop(credentials.installation, owner);
         }
         await pause(5000);
     }

package/dist/spend-ui.d.ts

@@ -4,6 +4,7 @@
  * only) stop new work at 100 %. An instance operator's page; budgets change
  * with a step-up.
  */
+import { type Html } from "./html.js";
 import { type BudgetState, type SpendItem } from "./spend.js";
 export declare const SPEND_CSS: string;
 export type SpendView = {
@@ -23,6 +24,6 @@ export type SpendView = {
 export declare function spendHtml(view: SpendView, notice: {
     said?: string | null;
     problem?: string | null;
-}): string;
+}): Html;
 /** One row per piece of spend, for a spreadsheet. */
 export declare function spendCsv(items: readonly SpendItem[], teammateNames: Map<number, string>): string;

package/dist/spend-ui.js

@@ -4,8 +4,8 @@
  * only) stop new work at 100 %. An instance operator's page; budgets change
  * with a step-up.
  */
+import { html, postForm } from "./html.js";
 import { budgetLabel, usd } from "./spend.js";
-const e = (value) => String(value ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 const projectName = (repo) => repo.split("/").filter(Boolean).pop() ?? repo;
 export const SPEND_CSS = `.spend{max-width:960px;min-width:0}.spend-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}.spend-head h1{margin:0}` +
     `.spend-month{display:flex;gap:10px;align-items:baseline;font-size:.875rem}.spend-total{font-size:1.5rem;font-weight:600;margin:12px 0 2px;font-variant-numeric:tabular-nums}` +
@@ -35,10 +35,10 @@ function breakdown(items, keyOf, top = 12) {
 function table(title, rows, name) {
     if (rows.length === 0)
         return "";
-    return `<section><h2>${e(title)}</h2><table><tbody>${rows.map(row => `<tr><td>${e(name(row.key))}</td><td class="n">${row.count}</td><td class="n">${usd(row.microusd)}${row.unpriced > 0 ? ` <span class="meta">+${row.unpriced} unpriced</span>` : ""}</td></tr>`).join("")}</tbody></table></section>`;
+    return html `<section><h2>${title}</h2><table><tbody>${rows.map(row => html `<tr><td>${name(row.key)}</td><td class="n">${row.count}</td><td class="n">${usd(row.microusd)}${row.unpriced > 0 ? html ` <span class="meta">+${row.unpriced} unpriced</span>` : ""}</td></tr>`)}</tbody></table></section>`;
 }
 export function spendHtml(view, notice) {
-    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 total = view.items.reduce((sum, item) => sum + (item.microusd ?? 0), 0);
     const unpriced = view.items.filter(item => item.microusd === null && (item.tokensIn !== null || item.kind !== "run")).length;
     const counts = { run: view.items.filter(item => item.kind === "run").length, teammate: view.items.filter(item => item.kind === "teammate").length, chat: view.items.filter(item => item.kind === "chat").length, sort: view.items.filter(item => item.kind === "sort").length };
@@ -48,38 +48,15 @@ export function spendHtml(view, notice) {
         const width = Math.min(100, Math.max(0, budget.percent));
         const over = budget.spentMicrousd >= budget.limitMicrousd;
         const label = budgetLabel(budget, budget.scope === "teammate" ? nameOfTeammate(budget.key) : undefined).replace(/'s$/, "");
-        return `<div class="budget${over ? " over" : ""}" data-budget="${budget.id}"><span class="name">${e(label)}</span>` +
-            `<span class="figures">${usd(budget.spentMicrousd)} of ${usd(budget.limitMicrousd)} · ${budget.percent}%</span>` +
-            `<span class="bar" aria-hidden="true"><span style="width:${width}%"></span></span>` +
-            `<span class="meta">${over && budget.hardStop ? "Used up: new API work waits until next month or a higher budget." : budget.hardStop ? "Stops API work at 100%." : "Alerts only."}${budget.unpriced > 0 ? ` ${budget.unpriced} unpriced` : ""}</span>` +
-            `<details><summary>Change</summary><form method="post" action="/spend/budget" class="budget-form"><input type="hidden" name="csrf" value="${e(view.csrf)}"><input type="hidden" name="target" value="${e(`${budget.scope}:${budget.key}`)}">` +
-            `<label>Monthly limit (US dollars)<input type="number" name="usd" min="1" step="1" value="${Math.round(budget.limitMicrousd / 1_000_000)}" required></label>` +
-            `<label class="choice"><input type="checkbox" name="stop" value="1"${budget.hardStop ? " checked" : ""}> Stop new work at 100%</label>` +
-            `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password"></label>` +
-            `<button type="submit" name="action" value="save">Save</button> <button type="submit" name="action" value="remove">Remove</button></form></details></div>`;
-    }).join("");
+        return html `<div class="budget${over ? " over" : ""}" data-budget="${budget.id}"><span class="name">${label}</span><span class="figures">${usd(budget.spentMicrousd)} of ${usd(budget.limitMicrousd)} · ${budget.percent}%</span><span class="bar" aria-hidden="true"><span style="width:${width}%"></span></span><span class="meta">${over && budget.hardStop ? "Used up: new API work waits until next month or a higher budget." : budget.hardStop ? "Stops API work at 100%." : "Alerts only."}${budget.unpriced > 0 ? ` ${budget.unpriced} unpriced` : ""}</span><details><summary>Change</summary>${postForm("/spend/budget", html `<label>Monthly limit (US dollars)<input type="number" name="usd" min="1" step="1" value="${Math.round(budget.limitMicrousd / 1_000_000)}" required></label><label class="choice"><input type="checkbox" name="stop" value="1"${budget.hardStop ? html ` checked` : ""}> Stop new work at 100%</label><label>Your Toolroll password<input type="password" name="password" autocomplete="current-password"></label><button type="submit" name="action" value="save">Save</button> <button type="submit" name="action" value="remove">Remove</button>`, { attrs: { class: "budget-form" }, hidden: { target: `${budget.scope}:${budget.key}` } })}</details></div>`;
+    });
     const groups = ["Everything", "Projects", "People", "Teammates"];
     const options = groups.map(group => {
         const members = view.targets.filter(one => one.group === group);
-        return members.length === 0 ? "" : `<optgroup label="${group}">${members.map(one => `<option value="${e(one.value)}">${e(one.label)}</option>`).join("")}</optgroup>`;
-    }).join("");
-    const add = `<details${view.budgets.length === 0 ? " open" : ""}><summary>Add a budget</summary><form method="post" action="/spend/budget" class="budget-form"><input type="hidden" name="csrf" value="${e(view.csrf)}">` +
-        `<label>For<select name="target" required>${options}</select></label>` +
-        `<label>Monthly limit (US dollars)<input type="number" name="usd" min="1" step="1" required></label>` +
-        `<label class="choice"><input type="checkbox" name="stop" value="1" checked> Stop new work at 100%</label>` +
-        `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password"></label>` +
-        `<button type="submit" name="action" value="save">Add budget</button></form></details>`;
-    const csv = `/spend?month=${e(view.month)}&amp;format=csv`;
-    return `<article class="spend">` +
-        `<div class="spend-head"><h1>Spend</h1><p class="spend-month"><a href="/spend?month=${e(view.previous)}">← ${e(view.previous)}</a><strong>${e(view.month)}</strong>${view.next === null ? "" : `<a href="/spend?month=${e(view.next)}">${e(view.next)} →</a>`}<a href="${csv}" download>CSV</a></p></div>${note}` +
-        `<p class="spend-total" data-spend-total="${total}">${usd(total)}</p><p class="meta">${parts.join(" · ")}${unpriced > 0 ? ` · ${unpriced} unpriced (no reported cost or catalogue price)` : ""} · UTC month</p>` +
-        `<section><h2>Budgets</h2>${budgets === "" ? `<p class="meta">No budgets yet.</p>` : budgets}${add}</section>` +
-        `<div class="spend-grid">` +
-        table("By project", breakdown(view.items, item => item.project), projectName) +
-        table("By person", breakdown(view.items, item => item.person), key => key) +
-        table("By teammate", breakdown(view.items, item => item.teammate === null ? null : String(item.teammate)), nameOfTeammate) +
-        table("By model", breakdown(view.items, item => `${item.provider}${item.model === null ? "" : ` · ${item.model}`}`), key => key) +
-        `</div><p class="meta">Subscription work is $0; its limits are on Tasks. API work is what the provider reported, or its tokens at the prices in Settings → Models.</p></article>`;
+        return members.length === 0 ? "" : html `<optgroup label="${group}">${members.map(one => html `<option value="${one.value}">${one.label}</option>`)}</optgroup>`;
+    });
+    const add = html `<details${view.budgets.length === 0 ? html ` open` : ""}><summary>Add a budget</summary>${postForm("/spend/budget", html `<label>For<select name="target" required>${options}</select></label><label>Monthly limit (US dollars)<input type="number" name="usd" min="1" step="1" required></label><label class="choice"><input type="checkbox" name="stop" value="1" checked> Stop new work at 100%</label><label>Your Toolroll password<input type="password" name="password" autocomplete="current-password"></label><button type="submit" name="action" value="save">Add budget</button>`, { attrs: { class: "budget-form" } })}</details>`;
+    return html `<article class="spend"><div class="spend-head"><h1>Spend</h1><p class="spend-month"><a href="/spend?month=${view.previous}">← ${view.previous}</a><strong>${view.month}</strong>${view.next === null ? "" : html `<a href="/spend?month=${view.next}">${view.next} →</a>`}<a href="/spend?month=${view.month}&amp;format=csv" download>CSV</a></p></div>${note}<p class="spend-total" data-spend-total="${total}">${usd(total)}</p><p class="meta">${parts.join(" · ")}${unpriced > 0 ? ` · ${unpriced} unpriced (no reported cost or catalogue price)` : ""} · UTC month</p><section><h2>Budgets</h2>${budgets.length === 0 ? html `<p class="meta">No budgets yet.</p>` : budgets}${add}</section><div class="spend-grid">${table("By project", breakdown(view.items, item => item.project), projectName)}${table("By person", breakdown(view.items, item => item.person), key => key)}${table("By teammate", breakdown(view.items, item => item.teammate === null ? null : String(item.teammate)), nameOfTeammate)}${table("By model", breakdown(view.items, item => `${item.provider}${item.model === null ? "" : ` · ${item.model}`}`), key => key)}</div><p class="meta">Subscription work is $0; its limits are on Tasks. API work is what the provider reported, or its tokens at the prices in Settings → Models.</p></article>`;
 }
 /** One row per piece of spend, for a spreadsheet. */
 export function spendCsv(items, teammateNames) {

package/dist/sso-ui.d.ts

@@ -4,6 +4,7 @@
  * operator's page; changes take their password.
  */
 import type { OidcSettings } from "./oidc.js";
+import { type Html } from "./html.js";
 export declare const SSO_CSS: string;
 export type SsoSettingsView = {
     settings: OidcSettings | null;
@@ -16,7 +17,7 @@ export type SsoSettingsView = {
     /** Whether the person looking is linked to the provider already. */
     linked: boolean;
 };
-export declare function ssoSettingsHtml(view: SsoSettingsView, csrf: string, notice: {
+export declare function ssoSettingsHtml(view: SsoSettingsView, notice: {
     said?: string | null;
     problem?: string | null;
-}): string;
+}): Html;

package/dist/sso-ui.js

@@ -1,39 +1,38 @@
-const e = (value) => String(value ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+import { html, postForm } from "./html.js";
 export const SSO_CSS = `.sign-in{max-width:780px;min-width:0}.sign-in form{display:grid;gap:12px;margin:0}.sign-in label{display:grid;gap:6px}.sign-in input,.sign-in select{box-sizing:border-box;width:100%;max-width:100%;min-width:0}` +
     `.sign-in .card{padding:16px 18px;margin:12px 0}.sign-in .card h2{font-size:1.05rem;margin:0 0 6px}.sign-in .redirect code{user-select:all;overflow-wrap:anywhere}.sign-in button{justify-self:start;min-height:44px}` +
     `.sign-in .rules{display:grid;gap:8px}.sign-in .rule{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,2fr);gap:8px;align-items:start}.sign-in .rule select[multiple]{min-height:5.5rem}` +
     `.sign-in .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.sign-in fieldset{border:0;padding:0;margin:0;display:grid;gap:6px}.sign-in fieldset label{display:flex;gap:8px;align-items:center}.sign-in fieldset input{width:auto}` +
     `@media(max-width:600px){.sign-in .rule{grid-template-columns:1fr}.sign-in input,.sign-in select{font-size:16px}}`;
-const password = '<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label>';
+const password = html `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label>`;
 function ruleRow(index, rule, projects) {
     const chosen = rule === null ? [] : rule.projects === "all" ? ["all"] : rule.projects;
-    return `<div class="rule"><label>Group<input type="text" name="group-${index}" value="${e(rule?.group ?? "")}" placeholder="${index === 0 ? "for example: engineering" : ""}" autocomplete="off"></label>` +
-        `<label>Role<select name="role-${index}"><option value="operator"${rule?.role === "operator" ? " selected" : ""}>Operator</option><option value="viewer"${rule?.role === "viewer" ? " selected" : ""}>Viewer</option></select></label>` +
-        `<label>Projects<select name="projects-${index}" multiple><option value="all"${chosen.includes("all") ? " selected" : ""}>All projects</option>${projects.map(one => `<option value="${e(one.path)}"${chosen.includes(one.path) ? " selected" : ""}>${e(one.name)}</option>`).join("")}</select></label></div>`;
+    return html `<div class="rule"><label>Group<input type="text" name="group-${index}" value="${rule?.group ?? ""}" placeholder="${index === 0 ? "for example: engineering" : ""}" autocomplete="off"></label>\
+<label>Role<select name="role-${index}"><option value="operator"${rule?.role === "operator" ? " selected" : ""}>Operator</option><option value="viewer"${rule?.role === "viewer" ? " selected" : ""}>Viewer</option></select></label>\
+<label>Projects<select name="projects-${index}" multiple><option value="all"${chosen.includes("all") ? " selected" : ""}>All projects</option>${projects.map(one => html `<option value="${one.path}"${chosen.includes(one.path) ? " selected" : ""}>${one.name}</option>`)}</select></label></div>`;
 }
-export function ssoSettingsHtml(view, csrf, notice) {
+export function ssoSettingsHtml(view, notice) {
     const s = view.settings;
-    const hidden = (fields) => Object.entries(fields).map(([k, v]) => `<input type="hidden" name="${e(k)}" value="${e(v)}">`).join("");
-    const rows = [...(s?.rules ?? []), null, null].slice(0, Math.max(3, (s?.rules.length ?? 0) + 1)).map((rule, index) => ruleRow(index, rule, view.projects)).join("");
-    const note = notice.problem ? `<p class="problem" role="alert">${e(notice.problem)}</p>` : notice.said ? `<p role="status">${e(notice.said)}</p>` : "";
+    const rows = [...(s?.rules ?? []), null, null].slice(0, Math.max(3, (s?.rules.length ?? 0) + 1)).map((rule, index) => ruleRow(index, rule, view.projects));
+    const note = notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : notice.said ? html `<p role="status">${notice.said}</p>` : "";
     const redirect = view.redirect === null
-        ? `<p class="meta">Open this page from the address people use (your https address) to see the redirect address to register.</p>`
-        : `<p class="redirect">Register this redirect address with the provider: <code>${e(view.redirect)}</code></p>`;
-    const form = `<form method="post" action="/settings/sign-in">${hidden({ csrf, action: "save" })}` +
-        `<label>Provider address (issuer)<input type="url" name="issuer" value="${e(s?.issuer ?? "")}" placeholder="https://acme.okta.com/oauth2/default" required inputmode="url" autocomplete="off"></label>` +
-        `<label>Client ID<input type="text" name="client-id" value="${e(s?.clientId ?? "")}" required autocomplete="off"></label>` +
-        `<label>Client secret<input type="password" name="client-secret" autocomplete="off" placeholder="${s?.clientSecret ? "Saved. Leave blank to keep it" : "Leave blank for a public client"}"></label>` +
-        `<details><summary>More</summary><label>Button says “Sign in with …”<input type="text" name="label" value="${e(s?.label ?? "")}" placeholder="Okta"></label>` +
-        `<label>Scopes<input type="text" name="scopes" value="${e(s?.scopes ?? "openid email profile")}"></label><label>Groups claim<input type="text" name="groups-claim" value="${e(s?.groupsClaim ?? "groups")}"></label></details>` +
-        `<h2>Who may sign in</h2><p class="meta">A person's first matching group sets their role and projects, again at every sign-in. No match, no entry. Use * for everyone.</p><div class="rules">${rows}</div>` +
-        `<fieldset><legend>Passwords</legend><label><input type="radio" name="passwords" value="everyone"${s?.passwords !== "operators" ? " checked" : ""}> Everyone may still use a password</label>` +
-        `<label><input type="radio" name="passwords" value="operators"${s?.passwords === "operators" ? " checked" : ""}> Only instance operators (a way in if the provider is down)</label></fieldset>` +
-        `${password}<button>${s === null ? "Turn on sign-in with the provider" : "Save"}</button></form>`;
-    const test = s === null ? "" : `<form method="post" action="/settings/sign-in" class="row">${hidden({ csrf, action: "test" })}<button class="secondary">Check the provider</button></form>`;
+        ? html `<p class="meta">Open this page from the address people use (your https address) to see the redirect address to register.</p>`
+        : html `<p class="redirect">Register this redirect address with the provider: <code>${view.redirect}</code></p>`;
+    const form = postForm("/settings/sign-in", html `\
+<label>Provider address (issuer)<input type="url" name="issuer" value="${s?.issuer ?? ""}" placeholder="https://acme.okta.com/oauth2/default" required inputmode="url" autocomplete="off"></label>\
+<label>Client ID<input type="text" name="client-id" value="${s?.clientId ?? ""}" required autocomplete="off"></label>\
+<label>Client secret<input type="password" name="client-secret" autocomplete="off" placeholder="${s?.clientSecret ? "Saved. Leave blank to keep it" : "Leave blank for a public client"}"></label>\
+<details><summary>More</summary><label>Button says “Sign in with …”<input type="text" name="label" value="${s?.label ?? ""}" placeholder="Okta"></label>\
+<label>Scopes<input type="text" name="scopes" value="${s?.scopes ?? "openid email profile"}"></label><label>Groups claim<input type="text" name="groups-claim" value="${s?.groupsClaim ?? "groups"}"></label></details>\
+<h2>Who may sign in</h2><p class="meta">A person's first matching group sets their role and projects, again at every sign-in. No match, no entry. Use * for everyone.</p><div class="rules">${rows}</div>\
+<fieldset><legend>Passwords</legend><label><input type="radio" name="passwords" value="everyone"${s?.passwords !== "operators" ? " checked" : ""}> Everyone may still use a password</label>\
+<label><input type="radio" name="passwords" value="operators"${s?.passwords === "operators" ? " checked" : ""}> Only instance operators (a way in if the provider is down)</label></fieldset>\
+${password}<button>${s === null ? "Turn on sign-in with the provider" : "Save"}</button>`, { hidden: { action: "save" } });
+    const test = s === null ? "" : postForm("/settings/sign-in", html `<button class="secondary">Check the provider</button>`, { attrs: { class: "row" }, hidden: { action: "test" } });
     const link = s === null ? "" : view.linked
-        ? `<p class="meta">You sign in with ${e(s.label)}.</p>`
-        : `<section class="card"><h2>Your account</h2><p>Sign in with ${e(s.label)} as this account from now on.</p><p><a class="button-link" href="/login/sso?link=1">Link to ${e(s.label)}</a></p></section>`;
-    const off = s === null ? "" : `<details class="card"><summary>Turn off</summary><form method="post" action="/settings/sign-in">${hidden({ csrf, action: "remove" })}<p>People who signed in with ${e(s.label)} can't sign in until it's on again, unless they have a password.</p>${password}<button class="danger">Turn off sign-in with ${e(s.label)}</button></form></details>`;
-    return `<section class="sign-in">${note}<p>People sign in with your organisation's identity provider (Okta, Microsoft Entra, Google, anything that speaks OpenID Connect), and its groups decide what they may do.</p>` +
-        `${redirect}<section class="card">${form}</section>${test}${link}${off}</section>`;
+        ? html `<p class="meta">You sign in with ${s.label}.</p>`
+        : html `<section class="card"><h2>Your account</h2><p>Sign in with ${s.label} as this account from now on.</p><p><a class="button-link" href="/login/sso?link=1">Link to ${s.label}</a></p></section>`;
+    const off = s === null ? "" : html `<details class="card"><summary>Turn off</summary>${postForm("/settings/sign-in", html `<p>People who signed in with ${s.label} can't sign in until it's on again, unless they have a password.</p>${password}<button class="danger">Turn off sign-in with ${s.label}</button>`, { hidden: { action: "remove" } })}</details>`;
+    return html `<section class="sign-in">${note}<p>People sign in with your organisation's identity provider (Okta, Microsoft Entra, Google, anything that speaks OpenID Connect), and its groups decide what they may do.</p>\
+${redirect}<section class="card">${form}</section>${test}${link}${off}</section>`;
 }

package/dist/storage-ui.d.ts

@@ -1,3 +1,4 @@
+import { type Html } from "./html.js";
 import { type CheckoutPlan } from "./checkout-cleanup.js";
 import { type SweepRecord } from "./storage-sweep.js";
 export declare const STORAGE_CSS: string;
@@ -12,4 +13,4 @@ export type StorageView = {
 export declare function storageHtml(view: StorageView, notice: {
     said?: string | null;
     problem?: string | null;
-}): string;
+}): Html;

package/dist/storage-ui.js

@@ -6,10 +6,10 @@
  */
 import { homedir } from "node:os";
 import { basename } from "node:path";
+import { html, postForm } from "./html.js";
 import { previewDigest, whyWords } from "./checkout-cleanup.js";
 import { CLEANUP_CHOICES, bytesWords } from "./storage.js";
 import { sweepDetails, sweepWords } from "./storage-sweep.js";
-const e = (value) => String(value ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 const plural = (count, one, many = `${one}s`) => `${count} ${count === 1 ? one : many}`;
 export const STORAGE_CSS = `.storage{max-width:720px;min-width:0;overflow-wrap:anywhere}.storage h2{font-size:1.0625rem;margin:24px 0 4px}` +
     `.storage .storage-state{display:grid;gap:12px}.storage .storage-state h2{margin:0}.storage .storage-state p{margin:0}` +
@@ -45,49 +45,30 @@ function whenWords(at) {
 function sweepHtml(sweep) {
     const last = sweep.last;
     if (last === null)
-        return `<p class="meta" data-last-sweep="">${sweep.off ? "Automatic sweep is off." : "Toolroll sweeps leftovers once a day. It hasn't run yet."}</p>`;
-    const who = last.source === "manual" ? `Cleaned up by ${e(last.actor)}` : "Swept";
+        return html `<p class="meta" data-last-sweep="">${sweep.off ? "Automatic sweep is off." : html `Toolroll sweeps leftovers once a day. It hasn't run yet.`}</p>`;
+    const who = last.source === "manual" ? `Cleaned up by ${last.actor}` : "Swept";
     const details = sweepDetails(last.parts);
     const problem = last.parts.some(one => one.failed > 0 || one.problem !== undefined);
-    return `<div class="sweep" data-last-sweep="${e(last.at)}"><p${problem ? ' class="problem"' : ""}>${who} <time datetime="${e(last.at)}">${e(whenWords(last.at))}</time>. ${e(sweepWords(last.parts))}</p>` +
-        (details.length === 0 ? "" : `<details class="sweep-details"><summary>Details</summary><ul>${details.map(line => `<li>${e(homeAsTilde(line))}</li>`).join("")}</ul></details>`) + `</div>`;
+    return html `<div class="sweep" data-last-sweep="${last.at}"><p${problem ? html ` class="problem"` : ""}>${who} <time datetime="${last.at}">${whenWords(last.at)}</time>. ${sweepWords(last.parts)}</p>${details.length === 0 ? "" : html `<details class="sweep-details"><summary>Details</summary><ul>${details.map(line => html `<li>${homeAsTilde(line)}</li>`)}</ul></details>`}</div>`;
 }
-function item(one, csrf) {
+function item(one) {
     const discard = one.why === "has changes"
-        ? `<details class="discard"><summary>Discard</summary><form method="post" action="/settings/storage/discard"><input type="hidden" name="csrf" value="${e(csrf)}"><input type="hidden" name="path" value="${e(one.path)}">` +
-            `<p class="meta">Throws away this checkout and its uncommitted changes. Its branch stays.</p>` +
-            `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label><button type="submit" class="danger">Discard changes</button></form></details>`
+        ? html `<details class="discard"><summary>Discard</summary>${postForm("/settings/storage/discard", html `<p class="meta">Throws away this checkout and its uncommitted changes. Its branch stays.</p><label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label><button type="submit" class="danger">Discard changes</button>`, { hidden: { path: one.path } })}</details>`
         : "";
     // The task it was for, then where it is (the home folder as ~), then why it stays.
     const home = homedir();
     const where = home !== "" && one.path.startsWith(`${home}/`) ? `~${one.path.slice(home.length)}` : one.path;
-    return `<li data-checkout="${e(one.path)}"><span class="name">${e(one.taskId ?? basename(one.path))}</span><span class="size">${e(bytesWords(one.bytes))}</span>` +
-        `<span class="path">${e(where)}</span>` +
-        (one.why === null ? "" : `<span class="why">${e(whyWords(one)[0].toUpperCase() + whyWords(one).slice(1))}</span>`) + discard + `</li>`;
+    return html `<li data-checkout="${one.path}"><span class="name">${one.taskId ?? basename(one.path)}</span><span class="size">${bytesWords(one.bytes)}</span><span class="path">${where}</span>${one.why === null ? "" : html `<span class="why">${whyWords(one)[0].toUpperCase() + whyWords(one).slice(1)}</span>`}${discard}</li>`;
 }
 export function storageHtml(view, notice) {
-    const { plan, csrf } = view;
-    const note = notice.problem ? `<p class="problem" role="alert">${e(notice.problem)}</p>` : notice.said ? `<p role="status">${e(notice.said)}</p>` : "";
-    const hidden = `<input type="hidden" name="csrf" value="${e(csrf)}">`;
+    const { plan } = view;
+    const note = notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : notice.said ? html `<p role="status">${notice.said}</p>` : "";
     const facts = [plural(plan.count, "checkout"), `${plan.waitingReview} waiting for review`, `${plan.withChanges} kept for their changes`].join(" · ");
     const frees = plan.go.length === 0 ? "Nothing to clean up now." : `Cleaning up now frees about ${bytesWords(plan.freeBytes)}.`;
     const remove = plan.go.length === 0 ? "" :
-        `<form method="post" action="/settings/storage/clean" class="remove">${hidden}<input type="hidden" name="preview" value="${e(previewDigest(plan))}">` +
-            `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label>` +
-            `<button type="submit">Remove ${plural(plan.go.length, "checkout")}</button></form>`;
-    const preview = `<details class="clean-up" data-clean-up${notice.problem?.startsWith("Enter your Toolroll password to clean") ? " open" : ""}><summary>Clean up</summary><div class="preview">` +
-        (plan.go.length === 0 ? `<p>Nothing to remove now.</p>` :
-            `<h3>Removes ${plural(plan.go.length, "checkout")}, about ${e(bytesWords(plan.freeBytes))}</h3><p class="meta">Their branches stay, so nothing committed is lost.</p>` +
-                `<ul class="checkouts" data-goes>${plan.go.map(one => item(one, csrf)).join("")}</ul>`) +
-        (plan.stay.length === 0 ? "" : `<h3>Stays (${plan.stay.length})</h3><ul class="checkouts" data-stays>${plan.stay.map(one => item(one, csrf)).join("")}</ul>`) +
-        remove + `</div></details>`;
-    const options = CLEANUP_CHOICES.map(one => `<option value="${one.value}"${one.value === plan.cleanup ? " selected" : ""}>${e(one.label)}</option>`).join("");
-    return `<section class="storage">${note}` +
-        `<div class="card storage-state"><h2 data-checkout-bytes="${plan.totalBytes}">Checkouts use ${e(bytesWords(plan.totalBytes))}</h2><p class="meta">${e(facts)}</p>` +
-        `<p data-clean-bytes="${plan.freeBytes}">${e(frees)}</p>${view.sweep === undefined ? "" : sweepHtml(view.sweep)}${preview}</div>` +
-        `<h2>Automatic cleanup</h2>` +
-        `<form method="post" action="/settings/storage" class="setting">${hidden}` +
-        `<label>Remove a finished task's clean checkout<select name="cleanup">${options}</select></label>` +
-        `<p class="meta">Its branch always stays. Checkouts with changes, commits on no branch, in use, or waiting for review are kept.</p>` +
-        `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label><button type="submit">Save</button></form></section>`;
+        postForm("/settings/storage/clean", html `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label><button type="submit">Remove ${plural(plan.go.length, "checkout")}</button>`, { attrs: { class: "remove" }, hidden: { preview: previewDigest(plan) } });
+    const preview = html `<details class="clean-up" data-clean-up${notice.problem?.startsWith("Enter your Toolroll password to clean") ? html ` open` : ""}><summary>Clean up</summary><div class="preview">${plan.go.length === 0 ? html `<p>Nothing to remove now.</p>` :
+        html `<h3>Removes ${plural(plan.go.length, "checkout")}, about ${bytesWords(plan.freeBytes)}</h3><p class="meta">Their branches stay, so nothing committed is lost.</p><ul class="checkouts" data-goes>${plan.go.map(one => item(one))}</ul>`}${plan.stay.length === 0 ? "" : html `<h3>Stays (${plan.stay.length})</h3><ul class="checkouts" data-stays>${plan.stay.map(one => item(one))}</ul>`}${remove}</div></details>`;
+    const options = CLEANUP_CHOICES.map(one => html `<option value="${one.value}"${one.value === plan.cleanup ? html ` selected` : ""}>${one.label}</option>`);
+    return html `<section class="storage">${note}<div class="card storage-state"><h2 data-checkout-bytes="${plan.totalBytes}">Checkouts use ${bytesWords(plan.totalBytes)}</h2><p class="meta">${facts}</p><p data-clean-bytes="${plan.freeBytes}">${frees}</p>${view.sweep === undefined ? "" : sweepHtml(view.sweep)}${preview}</div><h2>Automatic cleanup</h2>${postForm("/settings/storage", html `<label>Remove a finished task's clean checkout<select name="cleanup">${options}</select></label><p class="meta">Its branch always stays. Checkouts with changes, commits on no branch, in use, or waiting for review are kept.</p><label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label><button type="submit">Save</button>`, { attrs: { class: "setting" } })}</section>`;
 }