toolroll 0.9.54 → 0.9.55

package/dist/server-telemetry.d.ts

@@ -2,9 +2,10 @@ import type { BudgetLimit } from './request-budget.js';
 import type { IncomingMessage, ServerResponse } from 'node:http';
 export declare const TELEMETRY_WINDOW_MS = 300000;
 export declare const LATENCY_BUCKETS: number[];
-export declare const ROUTE_FAMILIES: readonly ['cli', 'mcp', 'team', 'team-stream', 'chat', 'chat-stream', 'flows', 'flow-stream', 'tasks', 'results', 'decisions', 'sessions', 'settings', 'projects', 'assets', 'auth', 'metrics', 'health', 'console', 'other'];
+export declare const ROUTE_FAMILIES: readonly ['cli', 'mcp', 'team', 'live', 'chat', 'flows', 'tasks', 'results', 'decisions', 'sessions', 'settings', 'projects', 'assets', 'auth', 'metrics', 'health', 'console', 'other'];
 export type RouteFamily = typeof ROUTE_FAMILIES[number];
-export type StreamFamily = 'team-stream' | 'chat-stream' | 'flow-stream' | 'other';
+/** Every page's live updates are one stream (GET /live). */
+export type StreamFamily = 'live' | 'other';
 export declare const STREAM_FAMILIES: readonly StreamFamily[];
 export declare const QUEUE_BUCKETS: number[];
 /** Only literals from the allowlist can become labels, including for unknown or malformed paths. */
@@ -54,7 +55,7 @@ export type HealthSnapshot = {
 export declare class ServerTelemetry {
     readonly clock: () => number;
     readonly requests: TimingHistogram;
-    readonly routes: Map<"assets" | "auth" | "chat" | "chat-stream" | "cli" | "console" | "decisions" | "flow-stream" | "flows" | "health" | "mcp" | "metrics" | "other" | "projects" | "results" | "sessions" | "settings" | "tasks" | "team" | "team-stream", TimingHistogram>;
+    readonly routes: Map<"assets" | "auth" | "chat" | "cli" | "console" | "decisions" | "flows" | "health" | "live" | "mcp" | "metrics" | "other" | "projects" | "results" | "sessions" | "settings" | "tasks" | "team", TimingHistogram>;
     readonly eventLoop: TimingHistogram;
     readonly writeWait: TimingHistogram;
     readonly writeHold: TimingHistogram;

package/dist/server-telemetry.js

@@ -5,8 +5,8 @@ const SLICE_MS = 10_000;
 /** monitorEventLoopDelay samples by sleeping this long, so every raw sample includes it. */
 const EVENT_LOOP_RESOLUTION_MS = 20;
 export const LATENCY_BUCKETS = [0.0001, 0.00025, 0.0005, 0.001, 0.0025, 0.005, 0.01, 0.015, 0.025, 0.05, 0.1, 0.25, 0.5, 1, 2.5, 5, 10, 15, 30, 60];
-export const ROUTE_FAMILIES = ['cli', 'mcp', 'team', 'team-stream', 'chat', 'chat-stream', 'flows', 'flow-stream', 'tasks', 'results', 'decisions', 'sessions', 'settings', 'projects', 'assets', 'auth', 'metrics', 'health', 'console', 'other'];
-export const STREAM_FAMILIES = ['team-stream', 'chat-stream', 'flow-stream', 'other'];
+export const ROUTE_FAMILIES = ['cli', 'mcp', 'team', 'live', 'chat', 'flows', 'tasks', 'results', 'decisions', 'sessions', 'settings', 'projects', 'assets', 'auth', 'metrics', 'health', 'console', 'other'];
+export const STREAM_FAMILIES = ['live', 'other'];
 export const QUEUE_BUCKETS = [0, 1024, 4096, 16384, 65536, 262144, 1048576];
 /** Only literals from the allowlist can become labels, including for unknown or malformed paths. */
 export function routeFamily(raw) {
@@ -21,14 +21,10 @@ export function routeFamily(raw) {
         return 'cli';
     if (path === '/mcp' || path.startsWith('/mcp/'))
         return 'mcp';
-    if (path === '/api/team/events')
-        return 'team-stream';
+    if (path === '/live')
+        return 'live';
     if (path === '/api/team')
         return 'team';
-    if (path === '/chat/stream')
-        return 'chat-stream';
-    if (/^\/flows\/[^/]+\/live$/.test(path))
-        return 'flow-stream';
     if (path === '/metrics')
         return 'metrics';
     if (path === '/health')

package/dist/skills-ui.d.ts

@@ -1,3 +1,4 @@
+import { type Html } from "./html.js";
 import type { SkillsSnapshot, SkillsView, skillTestResult } from "./project-skills.js";
 export declare const SKILLS_CSS = ".skills{max-width:780px;min-width:0;overflow-wrap:anywhere}.skills h2{font-size:1.1rem}.skills .card{padding:18px;margin:14px 0;min-width:0}.skills form,.skills label{display:grid;gap:10px}.skills input,.skills textarea,.skills select{box-sizing:border-box;width:100%;max-width:100%;min-width:0}.skills textarea{resize:vertical;min-height:130px}.skills button{justify-self:start;white-space:nowrap;min-height:44px}.skills summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.skills pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto;font-size:.9rem}.skills .skill-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.skills .skill-heading h2{margin:0}.skills .skill-state{font-size:.85rem;flex-shrink:0}.skills .skill-source{font-size:.85rem}.skills .skill-controls{display:flex;gap:12px;flex-wrap:wrap}.skills .skill-controls form{margin:0}.skills details details{margin-top:10px}.skills [hidden]{display:none!important}.skills .skill-files{max-height:200px;overflow:auto}.skills .problem{padding:12px}@media(max-width:600px){.skills input,.skills textarea,.skills select{font-size:16px}.skills .card{padding:14px}.skills .skill-heading{align-items:flex-start}}";
 export declare function skillsHtml(view: SkillsView, csrf: string, canManage: boolean, options?: {
@@ -5,7 +6,7 @@ export declare function skillsHtml(view: SkillsView, csrf: string, canManage: bo
     error?: string;
     draft?: Record<string, string>;
     agent?: string;
-}): string;
-export declare function skillsSnapshotHtml(snapshot: SkillsSnapshot | null): string;
+}): Html;
+export declare function skillsSnapshotHtml(snapshot: SkillsSnapshot | null): Html | "";
 export declare function skillsScript(): string;
-export declare function skillTestFeedbackHtml(test: NonNullable<ReturnType<typeof skillTestResult>>, csrf: string, canManage: boolean, error?: string, draft?: string): string;
+export declare function skillTestFeedbackHtml(test: NonNullable<ReturnType<typeof skillTestResult>>, csrf: string, canManage: boolean, error?: string, draft?: string): Html;

package/dist/skills-ui.js

@@ -1,28 +1,26 @@
 import { randomUUID } from "node:crypto";
 import { whenUtc } from "./when-html.js";
-const e = (value) => String(value ?? "").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("");
+import { html, joinHtml, postForm } from "./html.js";
+// Hidden fields as they always were: a missing value is an empty field.
+const fields = (data) => Object.fromEntries(Object.entries(data).map(([k, v]) => [k, String(v ?? "")]));
 export const SKILLS_CSS = `.skills{max-width:780px;min-width:0;overflow-wrap:anywhere}.skills h2{font-size:1.1rem}.skills .card{padding:18px;margin:14px 0;min-width:0}.skills form,.skills label{display:grid;gap:10px}.skills input,.skills textarea,.skills select{box-sizing:border-box;width:100%;max-width:100%;min-width:0}.skills textarea{resize:vertical;min-height:130px}.skills button{justify-self:start;white-space:nowrap;min-height:44px}.skills summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.skills pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto;font-size:.9rem}.skills .skill-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.skills .skill-heading h2{margin:0}.skills .skill-state{font-size:.85rem;flex-shrink:0}.skills .skill-source{font-size:.85rem}.skills .skill-controls{display:flex;gap:12px;flex-wrap:wrap}.skills .skill-controls form{margin:0}.skills details details{margin-top:10px}.skills [hidden]{display:none!important}.skills .skill-files{max-height:200px;overflow:auto}.skills .problem{padding:12px}@media(max-width:600px){.skills input,.skills textarea,.skills select{font-size:16px}.skills .card{padding:14px}.skills .skill-heading{align-items:flex-start}}`;
 function source(skill) {
-    return `<p class="skill-source">${e(skill.source)} · ${skill.sha.slice(0, 10)}</p><p>${skill.files.length} files · ${Math.ceil(skill.files.reduce((n, f) => n + Buffer.from(f.base64, "base64").length, 0) / 1024)} KB</p><pre>${e(Buffer.from(skill.files.find((f) => f.path === "SKILL.md").base64, "base64").toString("utf8"))}</pre><details><summary>Package files</summary><ul class="skill-files">${skill.files.map((f) => `<li>${e(f.path)}</li>`).join("")}</ul></details>`;
+    return html `<p class="skill-source">${skill.source} · ${skill.sha.slice(0, 10)}</p><p>${skill.files.length} files · ${Math.ceil(skill.files.reduce((n, f) => n + Buffer.from(f.base64, "base64").length, 0) / 1024)} KB</p><pre>${Buffer.from(skill.files.find((f) => f.path === "SKILL.md").base64, "base64").toString("utf8")}</pre><details><summary>Package files</summary><ul class="skill-files">${skill.files.map((f) => html `<li>${f.path}</li>`)}</ul></details>`;
 }
 export function skillsHtml(view, csrf, canManage, options = {}) {
     const manage = canManage && !!csrf, base = {
-        csrf,
         repo: view.repo,
         identity: view.identity,
         revision: view.revision,
     };
-    const form = (action, contents, extra = {}) => `<form method="post" action="/settings/skills/change">${hidden({ ...base, action, ...extra })}${contents}</form>`;
+    const form = (action, contents, extra = {}) => postForm("/settings/skills/change", contents, { hidden: fields({ ...base, action, ...extra }) });
     const active = Object.values(view.selection).filter((c) => c.enabled).length;
     const renderSkill = (skill) => {
         const enabled = view.selection[skill.name]?.sha === skill.sha &&
             view.selection[skill.name]?.enabled === true;
         const replaced = view.selection[skill.name]?.enabled &&
             view.selection[skill.name]?.sha !== skill.sha;
-        return `<article class="card" id="skill-${skill.sha}"><div class="skill-heading"><h2>${e(skill.name)}</h2><span class="skill-state">${enabled ? "Enabled" : "In library"}</span></div><p>${e(skill.description)}</p>${skill.requirements ? `<p><strong>Requires:</strong> ${e(skill.requirements)} <span class="meta">Availability is checked when the agent tests or uses it.</span></p>` : ""}${skill.warnings.map((w) => `<p class="meta">${e(w)}</p>`).join("")}<details${options.focus === skill.sha ? " open" : ""}><summary>Review skill</summary>${source(skill)}${manage ? form(enabled ? "disable" : "enable", `${replaced ? "<p>Replaces the enabled version of this skill for new tasks.</p>" : ""}<button>${enabled ? "Disable skill" : "Enable skill"}</button>`, { sha: skill.sha }) : ""}</details>${manage ? `<details${options.draft?.["sha"] === skill.sha ? " open" : ""}><summary>Test skill</summary>${form("test", `<p>${e(options.agent ?? "Uses this project’s configured report agent")}. Runs a read-only sample through the normal task and approval flow.</p><label>Sample request<textarea name="sample" required maxlength="800" placeholder="Review this project’s home page and suggest three clearer button labels.">${e(options.draft?.["sha"] === skill.sha ? (options.draft?.["sample"] ?? "") : "")}</textarea></label><p class="meta">The report shows what worked and what needs tools or permission. Enabled status alone does not prove use.</p><button>Create test</button>`, { sha: skill.sha, nonce: randomUUID() })}</details>` : ""}</article>`;
+        return html `<article class="card" id="skill-${skill.sha}"><div class="skill-heading"><h2>${skill.name}</h2><span class="skill-state">${enabled ? "Enabled" : "In library"}</span></div><p>${skill.description}</p>${skill.requirements ? html `<p><strong>Requires:</strong> ${skill.requirements} <span class="meta">Availability is checked when the agent tests or uses it.</span></p>` : ""}${skill.warnings.map((w) => html `<p class="meta">${w}</p>`)}<details${options.focus === skill.sha ? html ` open` : ""}><summary>Review skill</summary>${source(skill)}${manage ? form(enabled ? "disable" : "enable", html `${replaced ? html `<p>Replaces the enabled version of this skill for new tasks.</p>` : ""}<button>${enabled ? "Disable skill" : "Enable skill"}</button>`, { sha: skill.sha }) : ""}</details>${manage ? html `<details${options.draft?.["sha"] === skill.sha ? html ` open` : ""}><summary>Test skill</summary>${form("test", html `<p>${options.agent ?? "Uses this project’s configured report agent"}. Runs a read-only sample through the normal task and approval flow.</p><label>Sample request<textarea name="sample" required maxlength="800" placeholder="Review this project’s home page and suggest three clearer button labels.">${options.draft?.["sha"] === skill.sha ? (options.draft?.["sample"] ?? "") : ""}</textarea></label><p class="meta">The report shows what worked and what needs tools or permission. Enabled status alone does not prove use.</p><button>Create test</button>`, { sha: skill.sha, nonce: randomUUID() })}</details>` : ""}</article>`;
     };
     const names = [...new Set(view.library.map((s) => s.name))];
     const cards = names
@@ -31,29 +29,28 @@ export function skillsHtml(view, csrf, canManage, options = {}) {
             versions.find((s) => s.sha === view.selection[name]?.sha) ??
             versions.at(-1);
         const older = versions.filter((s) => s !== primary);
-        return `<div data-skill-group data-skill-query="${e(name + " " + primary.description)}">${renderSkill(primary)}${older.length ? `<details><summary>Other versions (${older.length})</summary>${older.map(renderSkill).join("")}</details>` : ""}</div>`;
-    })
-        .join("");
+        return html `<div data-skill-group data-skill-query="${name + " " + primary.description}">${renderSkill(primary)}${older.length ? html `<details><summary>Other versions (${older.length})</summary>${older.map(renderSkill)}</details>` : ""}</div>`;
+    });
     const search = names.length > 5
-        ? '<label>Search library<input type="search" data-skill-search placeholder="Name or description"></label><p data-skill-no-matches hidden>No matching skills.</p>'
+        ? html `<label>Search library<input type="search" data-skill-search placeholder="Name or description"></label><p data-skill-no-matches hidden>No matching skills.</p>`
         : "";
     const d = options.draft ?? {};
     const add = manage
-        ? `<details class="card"${options.error && options.draft?.["method"] ? " open" : ""}><summary>Add skill</summary><form method="post" action="/settings/skills/import" data-skill-import>${hidden(base)}<label>Add from<select name="method" data-skill-method><option value="paste"${d["method"] === "paste" ? " selected" : ""}>Paste SKILL.md</option><option value="github"${d["method"] === "github" ? " selected" : ""}>GitHub folder</option><option value="folder"${d["method"] === "folder" ? " selected" : ""}>Local folder</option></select></label><div data-skill-input="paste"><label>SKILL.md<textarea name="content" rows="8" maxlength="24576" placeholder="---&#10;name: design-review&#10;description: Review interface copy and layout.&#10;---&#10;Write your instructions here.">${e(d["content"])}</textarea></label></div><div data-skill-input="github"><label>Public GitHub folder<input name="url" type="url" value="${e(d["url"])}" placeholder="https://github.com/owner/repo/tree/main/skills/review"></label></div><div data-skill-input="folder"><label>Skill folder<input type="file" webkitdirectory multiple data-skill-folder></label><input type="hidden" name="files" value=""><p class="meta">Choose the folder containing SKILL.md. Up to 64 files, 1 MB total.</p><noscript>Folder uploads require JavaScript. You can paste SKILL.md or use a GitHub folder.</noscript></div><p class="meta">Added to your library first. Review its source and requirements before enabling it.</p><p data-skill-error role="alert" hidden></p><button>Add to library</button></form></details>`
+        ? html `<details class="card"${options.error && options.draft?.["method"] ? html ` open` : ""}><summary>Add skill</summary>${postForm("/settings/skills/import", html `<label>Add from<select name="method" data-skill-method><option value="paste"${d["method"] === "paste" ? html ` selected` : ""}>Paste SKILL.md</option><option value="github"${d["method"] === "github" ? html ` selected` : ""}>GitHub folder</option><option value="folder"${d["method"] === "folder" ? html ` selected` : ""}>Local folder</option></select></label><div data-skill-input="paste"><label>SKILL.md<textarea name="content" rows="8" maxlength="24576" placeholder="---&#10;name: design-review&#10;description: Review interface copy and layout.&#10;---&#10;Write your instructions here.">${d["content"]}</textarea></label></div><div data-skill-input="github"><label>Public GitHub folder<input name="url" type="url" value="${d["url"]}" placeholder="https://github.com/owner/repo/tree/main/skills/review"></label></div><div data-skill-input="folder"><label>Skill folder<input type="file" webkitdirectory multiple data-skill-folder></label><input type="hidden" name="files" value=""><p class="meta">Choose the folder containing SKILL.md. Up to 64 files, 1 MB total.</p><noscript>Folder uploads require JavaScript. You can paste SKILL.md or use a GitHub folder.</noscript></div><p class="meta">Added to your library first. Review its source and requirements before enabling it.</p><p data-skill-error role="alert" hidden></p><button>Add to library</button>`, { attrs: { "data-skill-import": true }, hidden: fields(base) })}</details>`
         : "";
     const history = view.history.length
-        ? `<details><summary>Change history</summary>${view.history.map((h) => `<div class="card"><p>Selection ${h.revision} · ${e(h.actor)} · ${whenUtc(h.at)}</p><ul>${h.enabled.length ? h.enabled.map((s) => `<li>${e(s.name)} · ${e(s.version)}</li>`).join("") : "<li>No skills enabled</li>"}</ul>${manage && h.revision !== view.revision ? form("restore", "<button>Restore selection</button>", { restore: h.revision }) : '<span class="meta">Current selection</span>'}</div>`).join("")}</details>`
+        ? html `<details><summary>Change history</summary>${view.history.map((h) => html `<div class="card"><p>Selection ${h.revision} · ${h.actor} · ${whenUtc(h.at)}</p><ul>${h.enabled.length ? h.enabled.map((s) => html `<li>${s.name} · ${s.version}</li>`) : html `<li>No skills enabled</li>`}</ul>${manage && h.revision !== view.revision ? form("restore", html `<button>Restore selection</button>`, { restore: h.revision }) : html `<span class="meta">Current selection</span>`}</div>`)}</details>`
         : "";
-    return `<section class="skills">${options.error ? `<p class="problem" role="alert">${e(options.error)}</p>` : ""}<p>${active ? `${active} skill${active === 1 ? "" : "s"} enabled for new tasks.` : "No skills enabled for this project."} Active tasks keep their saved versions.</p>${add}${search}${cards || "<p>Your library is empty. Add a skill to review and enable it here.</p>"}${history}</section>`;
+    return html `<section class="skills">${options.error ? html `<p class="problem" role="alert">${options.error}</p>` : ""}<p>${active ? `${active} skill${active === 1 ? "" : "s"} enabled for new tasks.` : "No skills enabled for this project."} Active tasks keep their saved versions.</p>${add}${search}${cards.length ? cards : html `<p>Your library is empty. Add a skill to review and enable it here.</p>`}${history}</section>`;
 }
 export function skillsSnapshotHtml(snapshot) {
     if (!snapshot || !snapshot.packages.length)
         return "";
-    return `<details class="skills"><summary>Skills supplied (${snapshot.packages.length})</summary><p class="meta">Exact versions supplied to this run. This does not confirm the agent read or applied them.</p>${snapshot.packages.map((s) => `<details><summary>${e(s.name)} · ${s.sha.slice(0, 10)}</summary>${source(s)}</details>`).join("")}</details>`;
+    return html `<details class="skills"><summary>Skills supplied (${snapshot.packages.length})</summary><p class="meta">Exact versions supplied to this run. This does not confirm the agent read or applied them.</p>${snapshot.packages.map((s) => html `<details><summary>${s.name} · ${s.sha.slice(0, 10)}</summary>${source(s)}</details>`)}</details>`;
 }
 export function skillsScript() {
     return `(()=>{const search=document.querySelector('[data-skill-search]');if(search)search.addEventListener('input',()=>{let found=0;document.querySelectorAll('[data-skill-group]').forEach(el=>{el.hidden=!el.dataset.skillQuery.toLowerCase().includes(search.value.trim().toLowerCase());if(!el.hidden)found++;});document.querySelector('[data-skill-no-matches]').hidden=found>0;});const form=document.querySelector('[data-skill-import]');if(!form)return;const method=form.querySelector('[data-skill-method]'),error=form.querySelector('[data-skill-error]');function sync(){form.querySelectorAll('[data-skill-input]').forEach(el=>{el.hidden=el.dataset.skillInput!==method.value;el.querySelectorAll('input,textarea').forEach(i=>i.disabled=el.hidden);});}method.addEventListener('change',sync);sync();form.addEventListener('submit',async event=>{if(method.value!=='folder')return;if(form.dataset.prepared==='yes'){delete form.dataset.prepared;return;}event.preventDefault();error.hidden=true;const button=form.querySelector('button');button.disabled=true;try{const files=Array.from(form.querySelector('[data-skill-folder]').files);if(!files.length||files.length>64||files.reduce((n,f)=>n+f.size,0)>1048576||files.some(f=>f.size>262144))throw Error('Choose one skill folder with up to 64 files and 1 MB total.');const packed=[];for(const file of files){const parts=file.webkitRelativePath.split('/');parts.shift();const data=new Uint8Array(await file.arrayBuffer());let binary='';for(const byte of data)binary+=String.fromCharCode(byte);packed.push({path:parts.join('/'),base64:btoa(binary)});}form.querySelector('[name=files]').value=JSON.stringify(packed);form.dataset.prepared='yes';button.disabled=false;form.requestSubmit();}catch(e){error.textContent=e.message||'The folder could not be read. Select it again.';error.hidden=false;button.disabled=false;}});})();`;
 }
 export function skillTestFeedbackHtml(test, csrf, canManage, error = "", draft = "") {
-    return `<section class="skills" id="skill-test-feedback"><h2>Improve this test</h2>${test.sourceRun ? `<p>Revises test run #${test.sourceRun}.</p>` : ""}${test.feedback ? `<details><summary>Feedback for this test</summary><p>${e(test.feedback)}</p></details>` : ""}${test.revisions.length ? `<p>${test.revisions.map((id, i) => `<a href="/t/${encodeURIComponent(id)}">Test revision ${i + 1}</a>`).join(" · ")}</p>` : ""}${error ? `<p role="alert">${e(error)}</p>` : ""}${canManage && csrf ? `<form method="post" action="/settings/skills/revise">${hidden({ csrf, repo: test.repo, run: test.run, nonce: randomUUID() })}<label>What should change?<textarea name="feedback" required maxlength="500" rows="3" placeholder="Try a clearer action label and explain why it fits the user’s goal.">${e(draft)}</textarea></label><p class="meta">Creates another report task with this skill version and your feedback. Review its scope before it runs.</p><button>Create revision</button></form>` : ""}</section>`;
+    return html `<section class="skills" id="skill-test-feedback"><h2>Improve this test</h2>${test.sourceRun ? html `<p>Revises test run #${test.sourceRun}.</p>` : ""}${test.feedback ? html `<details><summary>Feedback for this test</summary><p>${test.feedback}</p></details>` : ""}${test.revisions.length ? html `<p>${joinHtml(test.revisions.map((id, i) => html `<a href="/t/${encodeURIComponent(id)}">Test revision ${i + 1}</a>`), " · ")}</p>` : ""}${error ? html `<p role="alert">${error}</p>` : ""}${canManage && csrf ? postForm("/settings/skills/revise", html `<label>What should change?<textarea name="feedback" required maxlength="500" rows="3" placeholder="Try a clearer action label and explain why it fits the user’s goal.">${draft}</textarea></label><p class="meta">Creates another report task with this skill version and your feedback. Review its scope before it runs.</p><button>Create revision</button>`, { hidden: fields({ repo: test.repo, run: test.run, nonce: randomUUID() }) }) : ""}</section>`;
 }

package/dist/skills.d.ts

@@ -67,7 +67,7 @@ export declare function applyInstall(repo: string, writeContext: boolean): Insta
  * project setup flow.
  */
 export declare const CLAUDE_CODE_MANAGED_MARK = "<!-- standing-orders:claude-code-skill:v1 -->";
-export declare const CLAUDE_CODE_GUIDES: readonly ["console", "operating", "runner"];
+export declare const CLAUDE_CODE_GUIDES: readonly ["console", "operating", "runner", "release"];
 /** The thin user-level skill `toolroll onboard` writes (agent-onboard.ts). */
 export declare const OPERATOR_SKILL_MARK = "<!-- toolroll:operator-skill:v1";
 export type ClaudeCodeSkillFile = {

package/dist/skills.js

@@ -161,7 +161,7 @@ export function applyInstall(repo, writeContext) {
  * project setup flow.
  */
 export const CLAUDE_CODE_MANAGED_MARK = "<!-- standing-orders:claude-code-skill:v1 -->";
-export const CLAUDE_CODE_GUIDES = ["console", "operating", "runner"];
+export const CLAUDE_CODE_GUIDES = ["console", "operating", "runner", "release"];
 /** The thin user-level skill `toolroll onboard` writes (agent-onboard.ts). */
 export const OPERATOR_SKILL_MARK = "<!-- toolroll:operator-skill:v1";
 export function defaultClaudeCodeSkillDir(home = homedir()) {
@@ -213,6 +213,7 @@ Use the installed \`toolroll\` command. Its live help is authoritative.
 - [Console guide](console.md) — where a person can review and act.
 - [Operating guide](operating.md) — the command contract and safe workflow.
 - [Runner guide](runner.md) — claims, leases, heartbeats, and fencing.
+- [Release guide](release.md) — releasing Toolroll itself with \`toolroll release <branch>\`.
 `;
 }
 /** One linked file, generated from the guide embedded in this binary. */

package/dist/slack-settings.d.ts

@@ -1,7 +1,8 @@
 import type { Store } from "./store.js";
-export declare function slackSettingsHtml(store: Store, dir: string, csrf: string, options?: {
+import { type Html } from "./html.js";
+export declare function slackSettingsHtml(store: Store, dir: string, options?: {
     code?: string;
     problem?: string;
     now?: Date;
     who?: string;
-}): string;
+}): Html;

package/dist/slack-settings.js

@@ -1,66 +1,41 @@
 import { loadPrimary } from "./webhooks.js";
+import { html, postForm } from "./html.js";
 import { loadSlackCredentials } from "./slack-api.js";
 import { ChatState } from "./chat-delivery-state.js";
-const escape = (text) => text
-    .replaceAll("&", "&")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;")
-    .replaceAll('"', "&quot;")
-    .replaceAll("'", "&#39;");
-export function slackSettingsHtml(store, dir, csrf, options = {}) {
+export function slackSettingsHtml(store, dir, options = {}) {
     const credentials = loadSlackCredentials(dir), state = new ChatState(store, "slack"), bindings = credentials ? state.bindings(credentials.installation).filter(one => state.live(one)) : [], binding = options.who === undefined ? null : bindings.find(one => one.approver === options.who) ?? null, others = bindings.length - (binding === null ? 0 : 1);
     const runtime = credentials ? state.runtime(credentials.installation) : null;
     const now = options.now ?? new Date(), live = runtime &&
         runtime.leaseUntil !== null &&
         runtime.leaseUntil > now.toISOString() &&
         runtime.connected;
-    const hidden = `<input type="hidden" name="csrf" value="${escape(csrf)}">`;
-    const password = '<label>Your Toolroll password<input style="min-height:44px" type="password" name="password" autocomplete="current-password" required></label>';
-    const post = (action, content) => `<form method="post" action="/settings/slack/${action}" class="card">${hidden}${content}</form>`;
-    let content = "";
+    const password = html `<label>Your Toolroll password<input style="min-height:44px" type="password" name="password" autocomplete="current-password" required></label>`;
+    const post = (action, content) => postForm(`/settings/slack/${action}`, content, { attrs: { class: "card" } });
+    const parts = [];
     if (!credentials) {
-        content =
-            "<p>Manage projects and review results in a private Slack conversation.</p>" +
-                '<details open><summary>Create your Slack app</summary><ol><li>Download the <a href="/settings/slack/manifest">app manifest</a>, then <a href="https://api.slack.com/apps" target="_blank" rel="noopener noreferrer">create an app</a> in your workspace using that manifest.</li><li>Under Basic Information, create an app-level token with <code>connections:write</code>.</li><li>Under OAuth &amp; Permissions, install the app and copy its bot token.</li></ol></details>' +
-                post("connect", '<label>App token<input style="min-height:44px" type="password" name="app-token" autocomplete="off" placeholder="xapp-…" required></label><label>Bot token<input style="min-height:44px" type="password" name="bot-token" autocomplete="off" placeholder="xoxb-…" required></label>' +
-                    password +
-                    '<p class="meta">Tokens stay on this installation. Next, pair your own Slack account.</p><button type="submit">Connect Slack</button>');
+        parts.push(html `<p>Manage projects and review results in a private Slack conversation.</p>`, html `<details open><summary>Create your Slack app</summary><ol><li>Download the <a href="/settings/slack/manifest">app manifest</a>, then <a href="https://api.slack.com/apps" target="_blank" rel="noopener noreferrer">create an app</a> in your workspace using that manifest.</li><li>Under Basic Information, create an app-level token with <code>connections:write</code>.</li><li>Under OAuth &amp; Permissions, install the app and copy its bot token.</li></ol></details>`, post("connect", html `<label>App token<input style="min-height:44px" type="password" name="app-token" autocomplete="off" placeholder="xapp-…" required></label><label>Bot token<input style="min-height:44px" type="password" name="bot-token" autocomplete="off" placeholder="xoxb-…" required></label>${password}<p class="meta">Tokens stay on this installation. Next, pair your own Slack account.</p><button type="submit">Connect Slack</button>`));
     }
     else {
-        content = `<p><strong>${escape(credentials.workspace)}</strong> · ${live ? "Connected" : "Waiting for connection"}</p>`;
+        parts.push(html `<p><strong>${credentials.workspace}</strong> · ${live ? "Connected" : "Waiting for connection"}</p>`);
         if (runtime?.problem)
-            content += `<p role="status">${escape(String(runtime.problem))}</p>`;
+            parts.push(html `<p role="status">${String(runtime.problem)}</p>`);
         if (!live && !runtime?.problem)
-            content +=
-                "<p>Keep the Toolroll worker running to receive Slack messages.</p>";
+            parts.push(html `<p>Keep the Toolroll worker running to receive Slack messages.</p>`);
         if (options.code) {
-            content +=
-                "<h2>Pair your account</h2><p>Send this in a direct message to your Toolroll Slack app. It expires in 10 minutes.</p>" +
-                    `<label>Pairing message<input type="text" readonly value="pair ${escape(options.code)}" autocomplete="off" style="width:100%;max-width:100%;font-size:14px;min-height:44px"></label>` +
-                    '<a class="button-link" style="min-height:44px;white-space:nowrap" href="/settings/slack">Check connection</a>';
+            parts.push(html `<h2>Pair your account</h2><p>Send this in a direct message to your Toolroll Slack app. It expires in 10 minutes.</p>`, html `<label>Pairing message<input type="text" readonly value="pair ${options.code}" autocomplete="off" style="width:100%;max-width:100%;font-size:14px;min-height:44px"></label>`, html `<a class="button-link" style="min-height:44px;white-space:nowrap" href="/settings/slack">Check connection</a>`);
         }
         else if (binding && state.live(binding)) {
             const { pending, dropped: failed } = state.partCounts(binding.id);
-            content +=
-                `<p>Your Slack account is paired.${others ? ` ${others} teammate${others === 1 ? " is" : "s are"} paired too.` : ""}${pending ? ` ${pending} replies waiting to send.` : ""}${failed ? ` ${failed} replies could not be delivered. Open the saved chat to recover them.` : ""}</p>` +
-                    "<p>Try “What needs my attention?” or “Show the evidence for the latest result.”</p>" +
-                    '<p><a href="/chat">Open saved chat</a></p>' +
-                    (loadPrimary(process.env, dir) === "slack"
-                        ? "<p>Task updates are sent here.</p>"
-                        : post("alerts", '<button type="submit">Send task updates here</button>'));
+            parts.push(html `<p>Your Slack account is paired.${others ? ` ${others} teammate${others === 1 ? " is" : "s are"} paired too.` : ""}${pending ? ` ${pending} replies waiting to send.` : ""}${failed ? ` ${failed} replies could not be delivered. Open the saved chat to recover them.` : ""}</p>`, html `<p>Try “What needs my attention?” or “Show the evidence for the latest result.”</p>`, html `<p><a href="/chat">Open saved chat</a></p>`, loadPrimary(process.env, dir) === "slack"
+                ? html `<p>Task updates are sent here.</p>`
+                : post("alerts", html `<button type="submit">Send task updates here</button>`));
         }
         else {
-            content += post("pair", "<h2>Pair your account</h2><p>Your paired Slack account can read your connected projects and confirm proposed changes. Password approvals still open in Toolroll." +
-                (others ? ` ${others} teammate${others === 1 ? " is" : "s are"} already paired.` : "") + "</p>" +
-                password +
-                '<button type="submit">Create pairing code</button>');
+            parts.push(post("pair", html `<h2>Pair your account</h2><p>Your paired Slack account can read your connected projects and confirm proposed changes. Password approvals still open in Toolroll.${others ? ` ${others} teammate${others === 1 ? " is" : "s are"} already paired.` : ""}</p>${password}<button type="submit">Create pairing code</button>`));
         }
         if (binding && state.live(binding) && !options.code)
-            content += post("unpair", password + '<p class="meta">Unpairing ends every open button in your chat. Teammates are unaffected.</p><button type="submit">Unpair my account</button>');
-        content +=
-            "<details><summary>Connection settings</summary>" +
-                post("disconnect", password + '<button type="submit">Disconnect Slack</button>') +
-                "</details>";
+            parts.push(post("unpair", html `${password}<p class="meta">Unpairing ends every open button in your chat. Teammates are unaffected.</p><button type="submit">Unpair my account</button>`));
+        parts.push(html `<details><summary>Connection settings</summary>${post("disconnect", html `${password}<button type="submit">Disconnect Slack</button>`)}</details>`);
     }
-    return `<section style="max-width:42rem;overflow-wrap:anywhere"><p><a href="/settings">Settings</a></p><h1>Slack</h1>${options.problem ? `<p class="problem" role="alert">${escape(options.problem)}</p>` : ""}${content}<details><summary>Access and setup</summary><p>Private messages and threads use your Toolroll permissions. Shared channels are not supported. Secure review links use this installation’s configured HTTPS console address.</p><p>Socket Mode connects out to Slack. It does not need a public webhook or a Tailscale account.</p></details></section>`;
+    return html `<section style="max-width:42rem;overflow-wrap:anywhere"><p><a href="/settings">Settings</a></p><h1>Slack</h1>${options.problem ? html `<p class="problem" role="alert">${options.problem}</p>` : ""}${parts}<details><summary>Access and setup</summary><p>Private messages and threads use your Toolroll permissions. Shared channels are not supported. Secure review links use this installation’s configured HTTPS console address.</p><p>Socket Mode connects out to Slack. It does not need a public webhook or a Tailscale account.</p></details></section>`;
 }

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;