toolroll 0.9.54 → 0.9.55

package/dist/policy-ui.js

@@ -1,6 +1,12 @@
+/**
+ * Settings → Policy (sprint 8): the organisation policy — allowed providers,
+ * models and tools, and the permission ceiling — and its history from the
+ * action ledger. Anyone signed in reads it; an instance operator changes it
+ * with their password.
+ */
+import { html, postForm } from "./html.js";
 import { whenUtc } from "./when-html.js";
 import { LEVEL_HINTS, LEVEL_NAMES, PERMISSION_LEVELS, POLICY_PROVIDERS, PROVIDER_NAMES, policyParts } from "./policy.js";
-const e = (value) => String(value ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 export const POLICY_CSS = `.policy{max-width:720px;min-width:0}.policy dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin:12px 0 0;font-size:.875rem}` +
     `.policy dt{color:var(--muted-foreground)}.policy dd{margin:0;overflow-wrap:anywhere}.policy fieldset{border:0;padding:0;margin:20px 0 0;min-width:0}` +
     `.policy legend{font-weight:600;font-size:.875rem;margin-bottom:8px}.policy legend{padding:0}.policy .providers{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:0 16px}.policy .providers label{display:flex;gap:8px;align-items:center;min-height:44px;margin:0;padding:0;font-weight:400}` +
@@ -13,30 +19,18 @@ export const POLICY_CSS = `.policy{max-width:720px;min-width:0}.policy dl{displa
 function historyItem(entry) {
     const what = entry.action.replace(/^organisation policy: /, "");
     const [before, after] = (entry.detail ?? "").split(" → ");
-    return `<li><span class="what">${e(what.charAt(0).toUpperCase() + what.slice(1))}: ${e(before ?? "")} → <strong>${e(after ?? "")}</strong></span>` +
-        `<span class="meta">${e(entry.actor)} · ${whenUtc(entry.at)}</span></li>`;
+    return html `<li><span class="what">${what.charAt(0).toUpperCase() + what.slice(1)}: ${before ?? ""} → <strong>${after ?? ""}</strong></span><span class="meta">${entry.actor} · ${whenUtc(entry.at)}</span></li>`;
 }
-export function policyHtml(view, csrf, notice) {
-    const note = notice.problem ? `<p class="problem" role="alert">${e(notice.problem)}</p>` : notice.said ? `<p role="status">${e(notice.said)}</p>` : "";
+export function policyHtml(view, notice) {
+    const note = notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : notice.said ? html `<p role="status">${notice.said}</p>` : "";
     const parts = policyParts(view.policy);
-    const changed = view.policy.updatedBy === null ? "" : `<p class="meta">Changed by ${e(view.policy.updatedBy)} on ${e((view.policy.updatedAt ?? "").slice(0, 10))}.</p>`;
-    const current = `<dl><dt>Providers</dt><dd>${e(parts.providers === "any" ? "Any" : parts.providers)}</dd><dt>Models</dt><dd>${e(parts.models === "any" ? "Any" : parts.models)}</dd>` +
-        `<dt>Tools</dt><dd>${e(parts.tools === "any" ? "Any" : parts.tools)}</dd><dt>Ceiling</dt><dd>${e(parts.ceiling)}</dd></dl>${changed}`;
-    const history = view.history.length === 0 ? "" : `<details><summary>History (${view.history.length})</summary><ol>${view.history.map(historyItem).join("")}</ol></details>`;
+    const changed = view.policy.updatedBy === null ? "" : html `<p class="meta">Changed by ${view.policy.updatedBy} on ${(view.policy.updatedAt ?? "").slice(0, 10)}.</p>`;
+    const current = html `<dl><dt>Providers</dt><dd>${parts.providers === "any" ? "Any" : parts.providers}</dd><dt>Models</dt><dd>${parts.models === "any" ? "Any" : parts.models}</dd><dt>Tools</dt><dd>${parts.tools === "any" ? "Any" : parts.tools}</dd><dt>Ceiling</dt><dd>${parts.ceiling}</dd></dl>${changed}`;
+    const history = view.history.length === 0 ? "" : html `<details><summary>History (${view.history.length})</summary><ol>${view.history.map(historyItem)}</ol></details>`;
     if (!view.canChange)
-        return `<section class="policy">${note}${current}<p class="meta">An instance operator sets the policy.</p>${history}</section>`;
-    const providers = POLICY_PROVIDERS.map(one => `<label><input type="checkbox" name="provider" value="${one}"${view.policy.providers === null || view.policy.providers.includes(one) ? " checked" : ""}> ${PROVIDER_NAMES[one]}</label>`).join("");
-    const levels = [...PERMISSION_LEVELS].reverse().map(level => `<label class="choice"><input type="radio" name="ceiling" value="${level}"${view.policy.ceiling === level ? " checked" : ""}>` +
-        `<span><strong>${LEVEL_NAMES[level]}</strong><small>${e(LEVEL_HINTS[level])}</small></span></label>`).join("");
+        return html `<section class="policy">${note}${current}<p class="meta">An instance operator sets the policy.</p>${history}</section>`;
+    const providers = POLICY_PROVIDERS.map(one => html `<label><input type="checkbox" name="provider" value="${one}"${view.policy.providers === null || view.policy.providers.includes(one) ? html ` checked` : ""}> ${PROVIDER_NAMES[one]}</label>`);
+    const levels = [...PERMISSION_LEVELS].reverse().map(level => html `<label class="choice"><input type="radio" name="ceiling" value="${level}"${view.policy.ceiling === level ? html ` checked` : ""}><span><strong>${LEVEL_NAMES[level]}</strong><small>${LEVEL_HINTS[level]}</small></span></label>`);
     const toolHint = view.toolNames.length === 0 ? "" : ` Tools here: ${view.toolNames.slice(0, 12).join(", ")}${view.toolNames.length > 12 ? "…" : ""}.`;
-    return `<section class="policy">${note}${changed}` +
-        `<form method="post" action="/settings/policy"><input type="hidden" name="csrf" value="${e(csrf)}">` +
-        `<fieldset><legend>Providers</legend><div class="providers">${providers}</div></fieldset>` +
-        `<fieldset><legend><label for="policy-models">Models</label></legend><textarea id="policy-models" name="models" spellcheck="false" placeholder="Any model" aria-describedby="policy-models-hint">${e((view.policy.models ?? []).join("\n"))}</textarea>` +
-        `<span class="hint" id="policy-models-hint">One per line; end with * to allow a family. Blank allows any.</span></fieldset>` +
-        `<fieldset><legend><label for="policy-tools">Project tools</label></legend><textarea id="policy-tools" name="tools" spellcheck="false" placeholder="Any tool" aria-describedby="policy-tools-hint">${e((view.policy.tools ?? []).join("\n"))}</textarea>` +
-        `<span class="hint" id="policy-tools-hint">One per line. Blank allows any.${e(toolHint)}</span></fieldset>` +
-        `<fieldset><legend>Permission ceiling</legend>${levels}</fieldset>` +
-        `<div class="step-up"><label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label></div>` +
-        `<button type="submit">Save policy</button></form>${history}</section>`;
+    return html `<section class="policy">${note}${changed}${postForm("/settings/policy", html `<fieldset><legend>Providers</legend><div class="providers">${providers}</div></fieldset><fieldset><legend><label for="policy-models">Models</label></legend><textarea id="policy-models" name="models" spellcheck="false" placeholder="Any model" aria-describedby="policy-models-hint">${(view.policy.models ?? []).join("\n")}</textarea><span class="hint" id="policy-models-hint">One per line; end with * to allow a family. Blank allows any.</span></fieldset><fieldset><legend><label for="policy-tools">Project tools</label></legend><textarea id="policy-tools" name="tools" spellcheck="false" placeholder="Any tool" aria-describedby="policy-tools-hint">${(view.policy.tools ?? []).join("\n")}</textarea><span class="hint" id="policy-tools-hint">One per line. Blank allows any.${toolHint}</span></fieldset><fieldset><legend>Permission ceiling</legend>${levels}</fieldset><div class="step-up"><label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label></div><button type="submit">Save policy</button>`)}${history}</section>`;
 }

package/dist/project-delete-ui.d.ts

@@ -4,6 +4,7 @@
  * then read exactly what goes and confirm with their password (or a fresh
  * sign-in with the identity provider). The repository itself stays.
  */
+import { type Html } from "./html.js";
 import { type ProjectHoldings } from "./project-delete.js";
 export declare const PROJECT_DELETE_CSS: string;
 export type ProjectSettingsView = {
@@ -21,9 +22,9 @@ export type ProjectSettingsView = {
     };
 };
 /** The project's page: its path, what Toolroll holds for it, and (for an instance operator) Delete project. */
-export declare function projectSettingsHtml(view: ProjectSettingsView, csrf: string, notice: {
+export declare function projectSettingsHtml(view: ProjectSettingsView, notice: {
     said?: string | null;
     problem?: string | null;
-}): string;
+}): Html;
 /** The second step: exactly what goes, and the password. */
-export declare function projectDeleteConfirmHtml(view: ProjectSettingsView, csrf: string, problem: string | null): string;
+export declare function projectDeleteConfirmHtml(view: ProjectSettingsView, problem: string | null): Html;

package/dist/project-delete-ui.js

@@ -4,8 +4,8 @@
  * then read exactly what goes and confirm with their password (or a fresh
  * sign-in with the identity provider). The repository itself stays.
  */
+import { html, postForm } from "./html.js";
 import { holdingsWords } from "./project-delete.js";
-const e = (value) => String(value ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 export const PROJECT_DELETE_CSS = `.project-settings,.project-delete{max-width:720px;min-width:0}.project-settings .path,.project-delete .path{font-family:var(--font-mono);font-size:.8125rem;overflow-wrap:anywhere;word-break:break-all}` +
     `.project-settings details.danger-zone{margin-top:24px;border:1px solid var(--border);border-radius:10px;padding:0 14px}.project-settings details.danger-zone summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:500;color:var(--danger)}` +
     `.project-settings details.danger-zone[open]{padding-bottom:14px}.project-settings form,.project-delete form{display:grid;gap:12px;margin-top:12px}.project-settings label,.project-delete label{display:grid;gap:4px;font-size:.8125rem;font-weight:500}` +
@@ -16,39 +16,32 @@ export const PROJECT_DELETE_CSS = `.project-settings,.project-delete{max-width:7
     `.project-settings .builds-at-once .builds-row{display:flex;gap:8px;align-items:stretch}.project-settings .builds-at-once input{width:5.5rem;min-height:44px;margin:0;box-sizing:border-box}.project-settings .builds-at-once button{min-height:44px;margin:0}` +
     `.project-settings .builds-at-once .meta{margin:0}.project-settings form.remove-project{margin-top:20px;gap:4px}.project-settings form.remove-project button{min-height:44px}.project-settings form.remove-project .meta{margin:0}`;
 /** Builds at once: one number, one Save. The worker's cap is said only when it lowers the number. */
-function buildsHtml(view, csrf) {
+function buildsHtml(view) {
     const b = view.builds;
     if (b === undefined)
         return "";
     const capped = b.capacity !== null && b.capacity < b.setting ? ` Its worker runs ${b.capacity} at once, so ${b.capacity} for now.` : "";
     const now = `${b.building} building now.${capped}`;
     if (!b.canChange)
-        return `<section class="builds-at-once"><h2>Builds at once</h2><p>Up to ${b.setting}. ${e(now)}</p></section>`;
-    return `<section class="builds-at-once"><h2>Builds at once</h2><form method="post" action="/settings/project/concurrency">` +
-        `<input type="hidden" name="csrf" value="${e(csrf)}"><input type="hidden" name="repo" value="${e(view.repo)}">` +
-        `<div class="builds-row"><input type="number" name="concurrency" min="1" max="64" step="1" inputmode="numeric" value="${b.setting}" aria-label="Builds at once" aria-describedby="builds-now"><button type="submit">Save</button></div>` +
-        `<p class="meta" id="builds-now">${e(now)}</p></form></section>`;
+        return html `<section class="builds-at-once"><h2>Builds at once</h2><p>Up to ${b.setting}. ${now}</p></section>`;
+    return html `<section class="builds-at-once"><h2>Builds at once</h2>${postForm("/settings/project/concurrency", html `<div class="builds-row"><input type="number" name="concurrency" min="1" max="64" step="1" inputmode="numeric" value="${b.setting}" aria-label="Builds at once" aria-describedby="builds-now"><button type="submit">Save</button></div><p class="meta" id="builds-now">${now}</p>`, { hidden: { repo: view.repo } })}</section>`;
 }
-const note = (notice) => notice.problem ? `<p class="problem" role="alert">${e(notice.problem)}</p>` : notice.said ? `<p role="status">${e(notice.said)}</p>` : "";
+const note = (notice) => notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : notice.said ? html `<p role="status">${notice.said}</p>` : "";
 /** The project's page: its path, what Toolroll holds for it, and (for an instance operator) Delete project. */
-export function projectSettingsHtml(view, csrf, notice) {
-    const held = `<p>Toolroll holds ${e(holdingsWords(view.holdings))} for <strong>${e(view.name)}</strong>.</p>`;
-    const head = `<section class="project-settings">${note(notice)}<p class="path">${e(view.repo)}</p>${held}${buildsHtml(view, csrf)}`;
+export function projectSettingsHtml(view, notice) {
+    const held = html `<p>Toolroll holds ${holdingsWords(view.holdings)} for <strong>${view.name}</strong>.</p>`;
+    const head = html `${note(notice)}<p class="path">${view.repo}</p>${held}${buildsHtml(view)}`;
     if (!view.canDelete)
-        return `${head}<p class="meta">An instance operator can delete a project.</p></section>`;
+        return html `<section class="project-settings">${head}<p class="meta">An instance operator can delete a project.</p></section>`;
     const body = view.running.length > 0
-        ? `<p class="problem">Its work is running: ${e(view.running.join(", "))}. Stop it before deleting the project.</p>`
-        : `<p>Removes everything Toolroll holds for ${e(view.name)}. The repository and its own branches stay. There's no undo.</p>` +
-            `<form method="post" action="/settings/project/delete"><input type="hidden" name="csrf" value="${e(csrf)}"><input type="hidden" name="repo" value="${e(view.repo)}">` +
-            `<label><span>Type <strong>${e(view.name)}</strong> to continue</span><input name="name" autocomplete="off" autocapitalize="off" spellcheck="false" required></label>` +
-            `<button type="submit">Continue</button></form>`;
+        ? html `<p class="problem">Its work is running: ${view.running.join(", ")}. Stop it before deleting the project.</p>`
+        : html `<p>Removes everything Toolroll holds for ${view.name}. The repository and its own branches stay. There's no undo.</p>${postForm("/settings/project/delete", html `<label><span>Type <strong>${view.name}</strong> to continue</span><input name="name" autocomplete="off" autocapitalize="off" spellcheck="false" required></label><button type="submit">Continue</button>`, { hidden: { repo: view.repo } })}`;
     // Removing is the reversible step: off the lists and the builder, everything kept.
-    const remove = `<form class="remove-project" method="post" action="/projects/remove"><input type="hidden" name="csrf" value="${e(csrf)}"><input type="hidden" name="repo" value="${e(view.repo)}">` +
-        `<button type="submit">Remove from Toolroll</button><p class="meta">Its tasks and results stay saved. Add it again to bring it back.</p></form>`;
-    return `${head}${remove}<details class="danger-zone"${notice.problem ? " open" : ""}><summary>Delete project</summary>${body}</details></section>`;
+    const remove = postForm("/projects/remove", html `<button type="submit">Remove from Toolroll</button><p class="meta">Its tasks and results stay saved. Add it again to bring it back.</p>`, { attrs: { class: "remove-project" }, hidden: { repo: view.repo } });
+    return html `<section class="project-settings">${head}${remove}<details class="danger-zone"${notice.problem ? html ` open` : ""}><summary>Delete project</summary>${body}</details></section>`;
 }
 /** The second step: exactly what goes, and the password. */
-export function projectDeleteConfirmHtml(view, csrf, problem) {
+export function projectDeleteConfirmHtml(view, problem) {
     const h = view.holdings;
     const count = (n, one, many = `${one}s`) => `${n} ${n === 1 ? one : many}`;
     const items = [
@@ -59,10 +52,5 @@ export function projectDeleteConfirmHtml(view, csrf, problem) {
         ...(h.teammates > 0 ? [count(h.teammates, "teammate")] : []),
         "Its budgets, settings and knowledge",
     ];
-    return `<section class="project-delete">${problem === null ? "" : `<p class="problem" role="alert">${e(problem)}</p>`}` +
-        `<p>This removes:</p><ul class="removes">${items.map(one => `<li>${e(one)}</li>`).join("")}</ul>` +
-        `<p>The repository at <span class="path">${e(view.repo)}</span> and its own branches stay. The ledger keeps its history. There's no undo.</p>` +
-        `<form method="post" action="/settings/project/delete"><input type="hidden" name="csrf" value="${e(csrf)}"><input type="hidden" name="repo" value="${e(view.repo)}"><input type="hidden" name="name" value="${e(view.name)}"><input type="hidden" name="step" value="delete">` +
-        `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password"></label>` +
-        `<div class="actions"><button type="submit" class="danger">Delete project</button><a href="/settings/project?repo=${e(encodeURIComponent(view.repo))}">Cancel</a></div></form></section>`;
+    return html `<section class="project-delete">${problem === null ? "" : html `<p class="problem" role="alert">${problem}</p>`}<p>This removes:</p><ul class="removes">${items.map(one => html `<li>${one}</li>`)}</ul><p>The repository at <span class="path">${view.repo}</span> and its own branches stay. The ledger keeps its history. There's no undo.</p>${postForm("/settings/project/delete", html `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password"></label><div class="actions"><button type="submit" class="danger">Delete project</button><a href="/settings/project?repo=${encodeURIComponent(view.repo)}">Cancel</a></div>`, { hidden: { repo: view.repo, name: view.name, step: "delete" } })}</section>`;
 }

package/dist/pull-request-ui.d.ts

@@ -1,6 +1,7 @@
 /** Settings → Projects → Pull requests: one project's pull-request setup, in plain words. Off shows what setup
  * found (or what to fix) and one Turn on; on shows where pull requests go and how they merge. Every change takes
  * the password; turning on restates the exact repository and branch that were checked. */
+import { type Html } from "./html.js";
 import type { Publishing, PublishingPlan } from "./pull-request-flow.js";
 export type PullRequestSettingsView = {
     repo: string;
@@ -19,5 +20,5 @@ export type PullRequestSettingsView = {
     said: string | null;
     problem: string | null;
 };
-export declare function pullRequestSettingsHtml(view: PullRequestSettingsView): string;
+export declare function pullRequestSettingsHtml(view: PullRequestSettingsView): Html;
 export declare const PULL_REQUEST_SETTINGS_CSS = "\n  .pr-settings { display: grid; gap: .6rem; max-width: 40rem; }\n  .pr-settings p, .pr-settings h2 { margin: 0; }\n  .pr-settings label { display: grid; gap: .25rem; }\n  .pr-settings label input[type=password], .pr-settings select { min-height: 44px; box-sizing: border-box; width: 100%; }\n  .pr-settings .pr-check { display: flex; align-items: center; gap: .5rem; min-height: 44px; }\n  .pr-settings button { min-height: 44px; justify-self: start; }\n  .pr-terms { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }\n  @media (max-width: 480px) { .pr-settings button { justify-self: stretch; } }\n";

package/dist/pull-request-ui.js

@@ -1,47 +1,32 @@
-const escape = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+/** Settings → Projects → Pull requests: one project's pull-request setup, in plain words. Off shows what setup
+ * found (or what to fix) and one Turn on; on shows where pull requests go and how they merge. Every change takes
+ * the password; turning on restates the exact repository and branch that were checked. */
+import { html, postForm } from "./html.js";
 const METHOD_WORDS = { squash: "Squash and merge", merge: "Merge commit", rebase: "Rebase and merge" };
 export function pullRequestSettingsHtml(view) {
-    const hidden = (act) => `<input type="hidden" name="csrf" value="${escape(view.csrf)}"><input type="hidden" name="repo" value="${escape(view.repo)}"><input type="hidden" name="act" value="${act}">`;
-    const password = `<label>Password<input type="password" name="password" autocomplete="current-password" required></label>`;
+    const post = (act, body, hidden = {}) => postForm("/settings/pull-requests", body, { attrs: { class: "card pr-settings" }, hidden: { repo: view.repo, act, ...hidden } });
+    const password = html `<label>Password<input type="password" name="password" autocomplete="current-password" required></label>`;
     const notes = [
-        view.said === null ? "" : `<p class="notice" role="status">${escape(view.said)}</p>`,
-        view.problem === null ? "" : `<p class="problem" role="alert">${escape(view.problem)}</p>`,
-    ].join("");
-    const head = `<p class="meta">${escape(view.name)} · <span class="mono">${escape(view.repo)}</span></p>${notes}`;
+        view.said === null ? "" : html `<p class="notice" role="status">${view.said}</p>`,
+        view.problem === null ? "" : html `<p class="problem" role="alert">${view.problem}</p>`,
+    ];
+    const head = html `<p class="meta">${view.name} · <span class="mono">${view.repo}</span></p>${notes}`;
     const publishing = view.publishing;
     if (publishing.on) {
-        const status = `<section class="card pr-settings"><p><strong>On</strong> · <span class="mono">${escape(publishing.githubRepo)}</span> into <span class="mono">${escape(publishing.base)}</span></p>` +
-            `<p class="meta">${publishing.legacy ? "Every finished build opens a pull request (set up with publish grant)." : "Complete offers “Complete and open a pull request”."} Set up by ${escape(publishing.grantedBy)}.</p></section>`;
+        const status = html `<section class="card pr-settings"><p><strong>On</strong> · <span class="mono">${publishing.githubRepo}</span> into <span class="mono">${publishing.base}</span></p><p class="meta">${publishing.legacy ? "Every finished build opens a pull request (set up with publish grant)." : "Complete offers “Complete and open a pull request”."} Set up by ${publishing.grantedBy}.</p></section>`;
         if (!view.canChange)
-            return head + status;
-        const methods = ["squash", "merge", "rebase"].map(method => `<option value="${method}"${publishing.mergeMethod === method ? " selected" : ""}>${METHOD_WORDS[method]}${method === "squash" ? " (default)" : ""}</option>`).join("");
-        return head + status +
-            `<form method="post" action="/settings/pull-requests" class="card pr-settings">${hidden("settings")}` +
-            `<h2>Merging</h2>` +
-            `<label>Merge method<select name="method">${methods}</select></label>` +
-            `<label class="row pr-check"><input type="checkbox" name="when-green" value="1"${publishing.mergeWhenGreen ? " checked" : ""}> Merge when checks pass</label>` +
-            `<p class="meta">Off by default. When on, a pull request merges by itself once its checks pass on the completed commit. Branches are deleted after merging.</p>` +
-            `${password}<button type="submit">Save</button></form>` +
-            `<details class="settings-more"><summary>Turn off pull requests</summary>` +
-            `<form method="post" action="/settings/pull-requests" class="card pr-settings">${hidden("off")}` +
-            `<p class="meta">Nothing more is pushed. Open pull requests stay on GitHub.</p>${password}<button type="submit" class="danger">Turn off</button></form></details>`;
+            return html `${head}${status}`;
+        const methods = ["squash", "merge", "rebase"].map(method => html `<option value="${method}"${publishing.mergeMethod === method ? html ` selected` : ""}>${METHOD_WORDS[method]}${method === "squash" ? " (default)" : ""}</option>`);
+        return html `${head}${status}${post("settings", html `<h2>Merging</h2><label>Merge method<select name="method">${methods}</select></label><label class="row pr-check"><input type="checkbox" name="when-green" value="1"${publishing.mergeWhenGreen ? html ` checked` : ""}> Merge when checks pass</label><p class="meta">Off by default. When on, a pull request merges by itself once its checks pass on the completed commit. Branches are deleted after merging.</p>${password}<button type="submit">Save</button>`)}<details class="settings-more"><summary>Turn off pull requests</summary>${post("off", html `<p class="meta">Nothing more is pushed. Open pull requests stay on GitHub.</p>${password}<button type="submit" class="danger">Turn off</button>`)}</details>`;
     }
     const check = view.check;
     if (check === null)
-        return head + `<section class="card pr-settings"><p><strong>Off</strong></p><p class="meta">An approver can turn on pull requests.</p></section>`;
+        return html `${head}<section class="card pr-settings"><p><strong>Off</strong></p><p class="meta">An approver can turn on pull requests.</p></section>`;
     if (!check.ok) {
-        return head + `<section class="card pr-settings"><p><strong>Can’t turn on yet</strong></p><p>${escape(check.message)}</p>` +
-            `<p><a class="button-link" href="/settings/pull-requests?repo=${encodeURIComponent(view.repo)}">Check again</a></p></section>`;
+        return html `${head}<section class="card pr-settings"><p><strong>Can’t turn on yet</strong></p><p>${check.message}</p><p><a class="button-link" href="/settings/pull-requests?repo=${encodeURIComponent(view.repo)}">Check again</a></p></section>`;
     }
     const plan = check.plan;
-    return head +
-        `<form method="post" action="/settings/pull-requests" class="card pr-settings">${hidden("on")}` +
-        `<input type="hidden" name="github" value="${escape(plan.githubRepo)}"><input type="hidden" name="base" value="${escape(plan.base)}">` +
-        `<p><strong>Ready to turn on</strong></p>` +
-        `<ul class="pr-terms"><li>Pull requests open on <span class="mono">${escape(plan.githubRepo)}</span> into <span class="mono">${escape(plan.base)}</span>${plan.account === null ? "" : `, as ${escape(plan.account)}`}.</li>` +
-        `<li>Complete offers “Complete and open a pull request”, from the exact completed commit. A flow's Pull request zone can open one too.</li>` +
-        `<li>Merging squashes and deletes the branch. A person merges with their password; a flow merges only when its zone says so, after a person approved the card.</li></ul>` +
-        `${password}<button type="submit">Turn on pull requests</button></form>`;
+    return html `${head}${post("on", html `<p><strong>Ready to turn on</strong></p><ul class="pr-terms"><li>Pull requests open on <span class="mono">${plan.githubRepo}</span> into <span class="mono">${plan.base}</span>${plan.account === null ? "" : `, as ${plan.account}`}.</li><li>Complete offers “Complete and open a pull request”, from the exact completed commit. A flow's Pull request zone can open one too.</li><li>Merging squashes and deletes the branch. A person merges with their password; a flow merges only when its zone says so, after a person approved the card.</li></ul>${password}<button type="submit">Turn on pull requests</button>`, { github: plan.githubRepo, base: plan.base })}`;
 }
 export const PULL_REQUEST_SETTINGS_CSS = `
   .pr-settings { display: grid; gap: .6rem; max-width: 40rem; }

package/dist/recipe-ui.d.ts

@@ -1,18 +1,19 @@
 import { type Recipe, type RecipeDocument, type WorkflowPreview } from "./recipes.js";
+import { type Html } from "./html.js";
 export declare function recipeFromForm(body: URLSearchParams): RecipeDocument;
-export declare function recipeLibraryHtml(starters: Recipe[], saved: Recipe[], project: string | null, csrf: string, revision: number, recent: {
+export declare function recipeLibraryHtml(starters: Recipe[], saved: Recipe[], project: string | null, revision: number, recent: {
     name: string;
     href: string;
     state: string;
-}[]): string;
-export declare function recipeEditorHtml(recipe: Recipe, repo: string, csrf: string, revision: number, problem?: string | null, values?: URLSearchParams, creator?: boolean): string;
-export declare function workflowPreviewHtml(preview: WorkflowPreview, csrf: string, revision: number, now: Date, readiness: {
+}[]): Html;
+export declare function recipeEditorHtml(recipe: Recipe, repo: string, revision: number, problem?: string | null, values?: URLSearchParams, creator?: boolean): Html;
+export declare function workflowPreviewHtml(preview: WorkflowPreview, revision: number, now: Date, readiness: {
     title: string;
     detail: string;
     href?: string;
-}[], auto: boolean): string;
-export declare function recipeDefinitionPreviewHtml(preview: WorkflowPreview, csrf: string, revision: number): string;
-export declare function recipeRunHtml(recipe: Recipe, repo: string, csrf: string, revision: number, problem?: string | null, values?: URLSearchParams, saved?: boolean): string;
+}[], auto: boolean): Html;
+export declare function recipeDefinitionPreviewHtml(preview: WorkflowPreview, revision: number): Html;
+export declare function recipeRunHtml(recipe: Recipe, repo: string, revision: number, problem?: string | null, values?: URLSearchParams, saved?: boolean): Html;
 export declare function recipeAnswersFromForm(body: URLSearchParams): Map<string, string>;
 export declare function recipeScript(): string;
 export declare const RECIPE_CSS = "\n.recipe-heading { margin: .5rem 0 1.75rem; max-width: 46rem; }\n.recipe-heading h1 { font-size: clamp(1.65rem,3vw,2.5rem); letter-spacing:-.035em; margin:.35rem 0 .6rem; }\n.recipe-kicker { font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted-foreground); }\n.recipe-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin:1rem 0 2rem; }\n.recipe-card { border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; background:var(--card); display:flex; flex-direction:column; gap:.5rem; }\n.recipe-card h3 { font-size:1.05rem; margin:0; letter-spacing:-.015em; }\n.recipe-card p { color:var(--muted-foreground); margin:.2rem 0; font-size:.85rem; line-height:1.5; }\n.recipe-card-link { margin-top:auto; padding-top:.75rem; display:flex; justify-content:space-between; }\n.recipe-editor { max-width:52rem; }.recipe-editor h2 { margin-top:0; }\n.recipe-criterion { border:1px solid var(--border); border-radius:calc(var(--radius) - 3px); padding:.8rem; margin:.8rem 0; }\n.recipe-evidence { display:flex; flex-wrap:wrap; gap:.5rem 1rem; }.recipe-evidence label { display:flex; align-items:center; gap:.4rem; font-size:.8rem; }.recipe-evidence input { width:auto; margin:0; }\n.recipe-options { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }\n.recipe-preview-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(16rem,1fr); gap:1rem; }\n.recipe-steps { padding-left:1.4rem; }.recipe-steps li { padding:.4rem 0 .6rem .3rem; }.recipe-steps p { margin:.3rem 0 0; font-size:.85rem; color:var(--muted-foreground); }\n.recipe-launch { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }.recipe-launch form { margin:0 0 .6rem; }\n.recipe-history a { display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--border); }.recipe-history span { color:var(--muted-foreground); }\n.recipe-error { border-color:var(--destructive); }\n.recipe-card[hidden] { display:none; }.recipe-search { max-width:28rem; }.recipe-question { border:1px solid var(--border); border-radius:calc(var(--radius) - 3px); margin:1rem 0; padding:.8rem; min-width:0; }.recipe-run { max-width:42rem; }.recipe-run button { margin-top:1rem; }\n@media(max-width:1000px){.recipe-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }}\n@media(max-width:760px){.recipe-grid,.recipe-options,.recipe-preview-grid,.recipe-launch { grid-template-columns:1fr; }.recipe-heading { margin-bottom:1rem; }.recipe-history a { flex-direction:column; gap:.2rem; }}\n";

package/dist/recipe-ui.js

@@ -2,8 +2,8 @@ import { TASK_TEXT_LIMITS } from "./task-text.js";
 import { composerSchedule, scheduleEditorHtml, scheduleEditorScript } from "./task-composer.js";
 import { parseRecipe, workflowSteps, recipeScheduleWords, RecipeError, RECIPE_INPUT_LIMIT } from "./recipes.js";
 import { ACCEPTANCE_LIMITS } from "./scope.js";
-const e = (text) => text.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
-const hidden = (name, value) => `<input type="hidden" name="${e(name)}" value="${e(value)}">`;
+import { html, joinHtml, postForm, replaceMarkup } from "./html.js";
+const hidden = (name, value) => html `<input type="hidden" name="${name}" value="${value}">`;
 const evidence = [["check", "Passing tests or commands"], ["changed-path", "Changed files"], ["screenshot", "Screenshot"], ["manual-review", "Reviewer assessment"]];
 export function recipeFromForm(body) {
     for (const name of ["name", "description", "goal", "not", "touches", "planning", "deliverable", "cadence", "repeat", "time", "timezone", "weekday", "interval", "interval-unit", "ceiling", "source", "sourceRevision", "projectRevision", "repo", "preview", "purpose", "sourceFormat"]) {
@@ -53,63 +53,70 @@ export function recipeFromForm(body) {
     return parseRecipe({ format: "standing-orders-recipe", version: inputs.length ? 2 : 1, ...(inputs.length ? { inputs } : {}), name: body.get("name") ?? "", description: body.get("description") ?? "", goal: body.get("goal") ?? "", outOfScope: body.get("not") || null,
         touches: (body.get("touches") ?? "").split(/[\n,]/).map(one => one.trim()).filter(Boolean), acceptance, planning: body.get("planning") ?? "auto", deliverable: body.get("deliverable") ?? "branch", schedule: schedule.schedule, costCeilingUsd: ceiling === "" ? null : Number(ceiling) });
 }
-export function recipeLibraryHtml(starters, saved, project, csrf, revision, recent) {
-    const cards = (recipes, reusable = false) => `<div class="recipe-grid"${reusable ? ' data-saved-recipes' : ''}>${recipes.map(recipe => `<article class="recipe-card" data-recipe-card data-recipe-search="${e(recipe.document.name + " " + recipe.document.description)}"><p class="recipe-kicker">${recipe.document.deliverable === "report" ? "Report" : recipe.document.schedule === null ? "One-time work" : "Recurring care"}${recipe.document.version === 2 ? ` · ${recipe.document.inputs.length} question${recipe.document.inputs.length === 1 ? "" : "s"}` : ""}</p><h3>${e(recipe.document.name)}</h3><p>${e(recipe.document.description)}</p><a class="recipe-card-link" href="/recipes/${reusable ? "run" : "start"}?recipe=${e(recipe.id)}&revision=${recipe.revision}">${reusable ? "Use recipe" : "Customize recipe"} <span aria-hidden="true">→</span></a>${reusable ? `<a class="meta" href="/recipes/start?recipe=${e(recipe.id)}&revision=${recipe.revision}">Edit a copy</a>` : ""}</article>`).join("")}</div>`;
-    const savedSection = `<h2>Your project’s recipes</h2>${saved.length >= 100 ? `<p class="meta">Showing 100 recipes, with recently used recipes first.</p>` : ""}${saved.length ? `<p class="hint">Your usual work, ready to go. Recently used recipes come first.</p><label class="recipe-search">Find a recipe<input type="search" data-recipe-search-input placeholder="Search your recipes…"></label>${cards(saved, true)}<p data-recipe-empty hidden>No recipes match. Try another search.</p>` : `<p class="hint">Save work you do often. Teammates with project access can use the same recipe.</p>`}`;
-    return `<div class="recipe-heading"><p class="recipe-kicker">Workflows</p><h1>Good work, on repeat.</h1><p class="hint">Save the work you do often. Answer what changes this time. Kick it off.</p><p><a href="/recipes/new" class="new-task">Create a recipe</a> <a href="/flows">Manage scheduled work →</a></p></div>` +
-        (project === null ? `<div class="card"><strong>Choose a project to get started.</strong><p>Browse recipes now; <a href="/projects">open a project</a> to customize, save, or run one.</p></div>` : "") +
-        (saved.length ? savedSection : "") + `<h2>Start here</h2>${cards(starters)}` + (saved.length ? "" : savedSection) +
-        (recent.length ? `<h2>Recent workflows</h2><div class="card recipe-history">${recent.map(one => `<a href="${e(one.href)}"><strong>${e(one.name)}</strong><span>${e(one.state)} →</span></a>`).join("")}</div>` : "") +
-        (project === null ? "" : `<details class="card"><summary>Import a shared recipe</summary><p class="hint">Paste exported recipe JSON. You’ll review it in this project before creating any work.</p><form method="post" action="/recipes/import">${hidden("csrf", csrf)}${hidden("repo", project)}${hidden("projectRevision", String(revision))}<label>Recipe JSON<textarea name="document" rows="7" required maxlength="32768" spellcheck="false"></textarea></label><button type="submit">Review imported recipe</button></form></details>`);
+export function recipeLibraryHtml(starters, saved, project, revision, recent) {
+    const cards = (recipes, reusable = false) => html `<div class="recipe-grid"${reusable && html ` data-saved-recipes`}>${recipes.map(recipe => html `<article class="recipe-card" data-recipe-card data-recipe-search="${recipe.document.name + " " + recipe.document.description}"><p class="recipe-kicker">${recipe.document.deliverable === "report" ? "Report" : recipe.document.schedule === null ? "One-time work" : "Recurring care"}${recipe.document.version === 2 ? ` · ${recipe.document.inputs.length} question${recipe.document.inputs.length === 1 ? "" : "s"}` : ""}</p><h3>${recipe.document.name}</h3><p>${recipe.document.description}</p><a class="recipe-card-link" href="/recipes/${reusable ? "run" : "start"}?recipe=${recipe.id}&revision=${recipe.revision}">${reusable ? "Use recipe" : "Customize recipe"} <span aria-hidden="true">→</span></a>${reusable && html `<a class="meta" href="/recipes/start?recipe=${recipe.id}&revision=${recipe.revision}">Edit a copy</a>`}</article>`)}</div>`;
+    const savedSection = html `<h2>Your project’s recipes</h2>${saved.length >= 100 && html `<p class="meta">Showing 100 recipes, with recently used recipes first.</p>`}${saved.length ? html `<p class="hint">Your usual work, ready to go. Recently used recipes come first.</p><label class="recipe-search">Find a recipe<input type="search" data-recipe-search-input placeholder="Search your recipes…"></label>${cards(saved, true)}<p data-recipe-empty hidden>No recipes match. Try another search.</p>` : html `<p class="hint">Save work you do often. Teammates with project access can use the same recipe.</p>`}`;
+    return html `<div class="recipe-heading"><p class="recipe-kicker">Workflows</p><h1>Good work, on repeat.</h1><p class="hint">Save the work you do often. Answer what changes this time. Kick it off.</p><p><a href="/recipes/new" class="new-task">Create a recipe</a> <a href="/flows">Manage scheduled work →</a></p></div>${project === null && html `<div class="card"><strong>Choose a project to get started.</strong><p>Browse recipes now; <a href="/projects">open a project</a> to customize, save, or run one.</p></div>`}${saved.length > 0 && savedSection}<h2>Start here</h2>${cards(starters)}${saved.length === 0 && savedSection}${recent.length > 0 && html `<h2>Recent workflows</h2><div class="card recipe-history">${recent.map(one => html `<a href="${one.href}"><strong>${one.name}</strong><span>${one.state} →</span></a>`)}</div>`}${project !== null && html `<details class="card"><summary>Import a shared recipe</summary><p class="hint">Paste exported recipe JSON. You’ll review it in this project before creating any work.</p>${postForm("/recipes/import", html `<label>Recipe JSON<textarea name="document" rows="7" required maxlength="32768" spellcheck="false"></textarea></label><button type="submit">Review imported recipe</button>`, { projectRevision: String(revision), hidden: { repo: project } })}</details>`}`;
 }
 function criterionHtml(index, criterion, values) {
     const prefix = `criterion-${index}-`;
     const value = (name, fallback) => values?.get(prefix + name) ?? fallback;
     const selected = values ? values.getAll(prefix + "evidence") : criterion?.evidence ?? ["check"];
-    return `<fieldset class="recipe-criterion"><legend>${criterion || index === 0 ? `Success check ${index + 1}` : "Additional success check (optional)"}</legend>${hidden(prefix + "id", value("id", criterion?.id ?? `c${index + 1}`))}<label>What should be true?<textarea name="${prefix}statement" rows="2" maxlength="300">${e(value("statement", criterion?.statement ?? ""))}</textarea></label><div class="recipe-evidence">${evidence.map(([id, label]) => `<label><input type="checkbox" name="${prefix}evidence" value="${id}"${selected.includes(id) ? " checked" : ""}>${label}</label>`).join("")}</div><label>How to check it <span class="meta">optional; command or review instructions</span><input type="text" name="${prefix}how" value="${e(value("how", criterion?.how ?? ""))}" maxlength="500"></label></fieldset>`;
+    return html `<fieldset class="recipe-criterion"><legend>${criterion || index === 0 ? `Success check ${index + 1}` : "Additional success check (optional)"}</legend>${hidden(prefix + "id", value("id", criterion?.id ?? `c${index + 1}`))}<label>What should be true?<textarea name="${prefix}statement" rows="2" maxlength="300">${value("statement", criterion?.statement ?? "")}</textarea></label><div class="recipe-evidence">${evidence.map(([id, label]) => html `<label><input type="checkbox" name="${prefix}evidence" value="${id}"${selected.includes(id) && html ` checked`}>${label}</label>`)}</div><label>How to check it <span class="meta">optional; command or review instructions</span><input type="text" name="${prefix}how" value="${value("how", criterion?.how ?? "")}" maxlength="500"></label></fieldset>`;
 }
-export function recipeEditorHtml(recipe, repo, csrf, revision, problem = null, values, creator = false) {
+/** The blank success check the page's script copies, its numbers left for the script to fill in. */
+const criterionTemplate = () => replaceMarkup(criterionHtml(11), /criterion-11-|value="c12"/g, match => match === "criterion-11-" ? html `criterion-INDEX-` : html `value="cNEXT"`);
+export function recipeEditorHtml(recipe, repo, revision, problem = null, values, creator = false) {
     const d = recipe.document;
     const value = (name, fallback) => values?.get(name) ?? fallback;
     const cadence = value("cadence", d.schedule === null ? "once" : "repeat");
     const planning = value("planning", d.planning), deliverable = value("deliverable", d.deliverable);
     const count = values ? Math.min(ACCEPTANCE_LIMITS.criteria, Math.max(d.acceptance.length + 1, ...[...values.keys()].map(key => Number(/^criterion-(\d+)-statement$/.exec(key)?.[1] ?? -1) + 1))) : Math.min(ACCEPTANCE_LIMITS.criteria, d.acceptance.length + 1);
-    return `<a href="/recipes" class="meta">← All recipes</a><div class="recipe-heading"><p class="recipe-kicker">${creator ? "1 · Describe → 2 · Preview → 3 · Save" : "1 · Choose → 2 · Customize → 3 · Preview"}</p><h1>${creator ? "Create a reusable recipe" : "Make this workflow yours"}</h1><p class="hint">${e(repo.split(/[\\/]/).pop() || repo)} · Choose the outcome, boundaries, and proof you want back.</p></div>` +
-        (problem === null ? "" : `<p role="alert" class="card recipe-error">${e(problem)}</p>`) +
-        `<form method="post" action="/recipes/preview" class="recipe-editor">${hidden("csrf", csrf)}${hidden("repo", repo)}${hidden("projectRevision", String(revision))}${hidden("source", recipe.id)}${hidden("sourceRevision", String(recipe.revision))}${hidden("sourceFormat", value("sourceFormat", String(d.version)))}` +
-        `<section class="card"><h2>The outcome</h2><label>${creator ? "Recipe name" : "Workflow name"}<input type="text" name="name" value="${e(value("name", d.name))}" maxlength="200" required></label><label>Short description<input type="text" name="description" value="${e(value("description", d.description))}" maxlength="400"></label><label>What should the agent do?<textarea name="goal" rows="5" maxlength="${TASK_TEXT_LIMITS.text}" required>${e(value("goal", d.goal))}</textarea></label><label>What should it leave alone?<textarea name="not" rows="3" maxlength="${TASK_TEXT_LIMITS.text}">${e(value("not", d.outOfScope ?? ""))}</textarea></label><label>Allowed files or folders <span class="meta">optional; one per line</span><textarea name="touches" rows="2" placeholder="src/&#10;tests/">${e(value("touches", d.touches.join("\n")))}</textarea></label><p class="meta">Blank allows work across this project. Add paths to keep the workflow focused.</p></section>` +
-        recipeQuestionsHtml(d, values) +
-        `<section class="card"><h2>What does success look like?</h2><p class="hint">Give each outcome the evidence you want to see. The workflow checks these before calling the work done.</p><div data-recipe-criteria>${Array.from({ length: count }, (_, i) => criterionHtml(i, d.acceptance[i], values)).join("")}</div><button type="button" data-add-criterion hidden>Add another success check</button><template data-criterion-template>${criterionHtml(11).replaceAll("criterion-11-", "criterion-INDEX-").replaceAll('value="c12"', 'value="cNEXT"')}</template></section>` +
-        `<section class="card"><h2>How it should run</h2><div class="recipe-options"><label>Result<select name="deliverable"><option value="branch"${deliverable === "branch" ? " selected" : ""}>Code change with evidence</option><option value="report"${deliverable === "report" ? " selected" : ""}>Report without code changes</option></select></label><label>Planning<select name="planning">${[["auto", "Plan when helpful"], ["required", "Always plan first"], ["skip", "Use this scope directly"]].map(([id, label]) => `<option value="${id}"${planning === id ? " selected" : ""}>${label}</option>`).join("")}</select></label></div><p class="meta">Report work investigates directly. Repeating work files the same scope each time; plan-first workflows run once.</p><label>Frequency<select name="cadence" data-recipe-cadence><option value="once"${cadence === "once" ? " selected" : ""}>Run once</option><option value="repeat"${cadence === "repeat" ? " selected" : ""}>Repeat on a schedule</option></select></label><div data-recipe-recurring>${scheduleEditorHtml(d.schedule, values)}<label>Weekly spending limit <span class="meta">optional, USD</span><input type="number" name="ceiling" min="0.01" step="0.01" value="${e(value("ceiling", d.costCeilingUsd === null ? "" : String(d.costCeilingUsd)))}"></label><p class="meta">One at a time. A spending limit needs an agent that reports dollar costs.</p></div></section>` +
-        `<div class="sticky-actions"><button type="submit" name="purpose" value="${creator ? "recipe" : "workflow"}">${creator ? "Preview recipe →" : "Preview workflow →"}</button>${creator ? "" : `<button type="submit" name="purpose" value="recipe" class="quiet">Preview recipe to save</button>`}<p class="meta">${creator ? "Save the instructions once. You can use the recipe whenever this work comes up." : "Previewing runs no agents. You’ll see the approval and scheduling steps next."}</p></div></form>`;
+    const outcome = html `<section class="card"><h2>The outcome</h2><label>${creator ? "Recipe name" : "Workflow name"}<input type="text" name="name" value="${value("name", d.name)}" maxlength="200" required></label><label>Short description<input type="text" name="description" value="${value("description", d.description)}" maxlength="400"></label><label>What should the agent do?<textarea name="goal" rows="5" maxlength="${TASK_TEXT_LIMITS.text}" required>${value("goal", d.goal)}</textarea></label><label>What should it leave alone?<textarea name="not" rows="3" maxlength="${TASK_TEXT_LIMITS.text}">${value("not", d.outOfScope ?? "")}</textarea></label><label>Allowed files or folders <span class="meta">optional; one per line</span><textarea name="touches" rows="2" placeholder="src/&#10;tests/">${value("touches", d.touches.join("\n"))}</textarea></label><p class="meta">Blank allows work across this project. Add paths to keep the workflow focused.</p></section>`;
+    const success = html `<section class="card"><h2>What does success look like?</h2><p class="hint">Give each outcome the evidence you want to see. The workflow checks these before calling the work done.</p><div data-recipe-criteria>${Array.from({ length: count }, (_, i) => criterionHtml(i, d.acceptance[i], values))}</div><button type="button" data-add-criterion hidden>Add another success check</button><template data-criterion-template>${criterionTemplate()}</template></section>`;
+    const running = html `<section class="card"><h2>How it should run</h2><div class="recipe-options"><label>Result<select name="deliverable"><option value="branch"${deliverable === "branch" && html ` selected`}>Code change with evidence</option><option value="report"${deliverable === "report" && html ` selected`}>Report without code changes</option></select></label><label>Planning<select name="planning">${[["auto", "Plan when helpful"], ["required", "Always plan first"], ["skip", "Use this scope directly"]].map(([id, label]) => html `<option value="${id}"${planning === id && html ` selected`}>${label}</option>`)}</select></label></div><p class="meta">Report work investigates directly. Repeating work files the same scope each time; plan-first workflows run once.</p><label>Frequency<select name="cadence" data-recipe-cadence><option value="once"${cadence === "once" && html ` selected`}>Run once</option><option value="repeat"${cadence === "repeat" && html ` selected`}>Repeat on a schedule</option></select></label><div data-recipe-recurring>${scheduleEditorHtml(d.schedule, values)}<label>Weekly spending limit <span class="meta">optional, USD</span><input type="number" name="ceiling" min="0.01" step="0.01" value="${value("ceiling", d.costCeilingUsd === null ? "" : String(d.costCeilingUsd))}"></label><p class="meta">One instance at a time. A spending limit requires an agent that reports dollar costs; approval checks this.</p></div></section>`;
+    const actions = html `<div class="sticky-actions"><button type="submit" name="purpose" value="${creator ? "recipe" : "workflow"}">${creator ? "Preview recipe →" : "Preview workflow →"}</button>${!creator && html `<button type="submit" name="purpose" value="recipe" class="quiet">Preview recipe to save</button>`}<p class="meta">${creator ? "Save the instructions once. You can use the recipe whenever this work comes up." : "Previewing runs no agents. You’ll see the approval and scheduling steps next."}</p></div>`;
+    return html `<a href="/recipes" class="meta">← All recipes</a><div class="recipe-heading"><p class="recipe-kicker">${creator ? "1 · Describe → 2 · Preview → 3 · Save" : "1 · Choose → 2 · Customize → 3 · Preview"}</p><h1>${creator ? "Create a reusable recipe" : "Make this workflow yours"}</h1><p class="hint">${repo.split(/[\\/]/).pop() || repo} · Choose the outcome, boundaries, and proof you want back.</p></div>${problem !== null && html `<p role="alert" class="card recipe-error">${problem}</p>`}${postForm("/recipes/preview", html `${outcome}${recipeQuestionsHtml(d, values)}${success}${running}${actions}`, { attrs: { class: "recipe-editor" }, projectRevision: String(revision), hidden: { repo, source: recipe.id, sourceRevision: String(recipe.revision), sourceFormat: value("sourceFormat", String(d.version)) } })}`;
 }
-export function workflowPreviewHtml(preview, csrf, revision, now, readiness, auto) {
+/** What a success check's evidence is called, for a reader. */
+const evidenceWords = (kinds) => joinHtml(kinds.map(kind => evidence.find(([id]) => id === kind)?.[1] ?? kind), " · ");
+export function workflowPreviewHtml(preview, revision, now, readiness, auto) {
     const d = preview.document;
-    const common = hidden("csrf", csrf) + hidden("repo", preview.repo) + hidden("projectRevision", String(revision)) + hidden("preview", preview.token);
+    const common = { projectRevision: String(revision), hidden: { repo: preview.repo, preview: preview.token } };
     const target = preview.taskId === null ? preview.flowId === null ? null : `/flows/${preview.flowId}` : `/t/${encodeURIComponent(preview.taskId)}`;
-    return `<a href="/recipes/edit?preview=${preview.token}" class="meta">← Edit this workflow</a><div class="recipe-heading"><p class="recipe-kicker">3 · Preview</p><h1>${e(d.name)}</h1><p class="hint">${e(d.description)}</p></div>` +
-        `<div class="recipe-preview-grid"><div><section class="card"><h2>What will happen</h2><ol class="recipe-steps">${workflowSteps(d).map(step => `<li><strong>${e(step.title)}</strong><p>${e(step.detail)}</p></li>`).join("")}</ol></section><section class="card"><h2>The agreed work</h2><p class="recap">${e(d.goal)}</p><h3>Leave alone</h3><p class="recap">${e(d.outOfScope ?? "No additional exclusions.")}</p><h3>Allowed paths</h3><p>${d.touches.length ? d.touches.map(e).join(", ") : "This project"}</p><h3>Success checks</h3><ul>${d.acceptance.map(c => `<li><strong>${e(c.statement)}</strong><p class="meta">${c.evidence.map(kind => e(evidence.find(([id]) => id === kind)?.[1] ?? kind)).join(" · ")}${c.how ? ` · ${e(c.how)}` : ""}</p></li>`).join("")}</ul></section></div>` +
-        `<aside><section class="card"><h2>Before it starts</h2>${readiness.map(one => `<p><strong>${e(one.title)}</strong><br><span class="meta">${e(one.detail)}${one.href ? ` <a href="${e(one.href)}">Open settings →</a>` : ""}</span></p>`).join("")}<p class="meta">These checks describe current setup. Agent availability and approval are checked again when work starts.</p></section><section class="card"><h2>Schedule & control</h2><p>${e(recipeScheduleWords(d, now))}</p><p>${d.costCeilingUsd === null ? "Uses existing project and agent budget controls." : `Up to $${d.costCeilingUsd.toFixed(2)} per rolling seven days.`}</p><p>${d.schedule !== null ? "It becomes a flow you can pause or resume any time." : auto ? "Your signed project policy will be evaluated when you create this workflow." : "Review and approve on the task page. You can stop or resume there."}</p></section></aside></div>` +
-        `<div class="card recipe-launch"><div>${target ? `<a class="new-task" href="${target}">Open created workflow →</a>` : `<form method="post" action="/recipes/launch">${common}<button type="submit">${d.schedule !== null ? "Create scheduled workflow" : auto ? "Create workflow" : "Create task for approval"}</button></form>`}<p class="meta">${d.schedule !== null ? "Nothing repeats until you turn the schedule on." : "A matching signed policy may start work automatically."} Creating this workflow twice returns the same work.</p></div><div>${preview.savedId ? `<a href="/recipes/start?recipe=${preview.savedId}&revision=${preview.savedRevision}">Recipe saved · reuse it →</a>` : `<form method="post" action="/recipes/save">${common}<button type="submit" class="quiet">Save as a project recipe</button></form>`}<a href="/recipes/export?preview=${preview.token}">Export recipe JSON</a><p class="meta">Save or export without running anything. Sharing includes the work definition, never project access or approvals.</p></div></div>`;
+    const agreed = html `<section class="card"><h2>The agreed work</h2><p class="recap">${d.goal}</p><h3>Leave alone</h3><p class="recap">${d.outOfScope ?? "No additional exclusions."}</p><h3>Allowed paths</h3><p>${d.touches.length ? joinHtml(d.touches, ", ") : "This project"}</p><h3>Success checks</h3><ul>${d.acceptance.map(c => html `<li><strong>${c.statement}</strong><p class="meta">${evidenceWords(c.evidence)}${c.how ? ` · ${c.how}` : ""}</p></li>`)}</ul></section>`;
+    const before = html `<aside><section class="card"><h2>Before it starts</h2>${readiness.map(one => html `<p><strong>${one.title}</strong><br><span class="meta">${one.detail}${one.href && html ` <a href="${one.href}">Open settings →</a>`}</span></p>`)}<p class="meta">These checks describe current setup. Agent availability and approval are checked again when work starts.</p></section><section class="card"><h2>Schedule & control</h2><p>${recipeScheduleWords(d, now)}</p><p>${d.costCeilingUsd === null ? "Uses existing project and agent budget controls." : `Up to $${d.costCeilingUsd.toFixed(2)} per rolling seven days.`}</p><p>${d.schedule !== null ? "Approve the routine once on the next screen. Pause it any time from scheduled work." : auto ? "Your signed project policy will be evaluated when you create this workflow." : "Review and approve on the task page. You can stop or resume there."}</p></section></aside>`;
+    const launch = html `<div class="card recipe-launch"><div>${target ? html `<a class="new-task" href="${target}">Open created workflow →</a>` : postForm("/recipes/launch", html `<button type="submit">${d.schedule !== null ? "Create scheduled workflow" : auto ? "Create workflow" : "Create task for approval"}</button>`, common)}<p class="meta">${d.schedule !== null ? "Nothing repeats until you turn the schedule on." : "A matching signed policy may start work automatically."} Creating this workflow twice returns the same work.</p></div><div>${preview.savedId ? html `<a href="/recipes/start?recipe=${preview.savedId}&revision=${preview.savedRevision}">Recipe saved · reuse it →</a>` : postForm("/recipes/save", html `<button type="submit" class="quiet">Save as a project recipe</button>`, common)}<a href="/recipes/export?preview=${preview.token}">Export recipe JSON</a><p class="meta">Save or export without running anything. Sharing includes the work definition, never project access or approvals.</p></div></div>`;
+    return html `<a href="/recipes/edit?preview=${preview.token}" class="meta">← Edit this workflow</a><div class="recipe-heading"><p class="recipe-kicker">3 · Preview</p><h1>${d.name}</h1><p class="hint">${d.description}</p></div><div class="recipe-preview-grid"><div><section class="card"><h2>What will happen</h2><ol class="recipe-steps">${workflowSteps(d).map(step => html `<li><strong>${step.title}</strong><p>${step.detail}</p></li>`)}</ol></section>${agreed}</div>${before}</div>${launch}`;
 }
 function inputHtml(index, input, values) {
     const value = (field, fallback) => values?.get(`input-${index}-${field}`) ?? fallback;
-    return `<fieldset class="recipe-question"><legend>Question ${index + 1}</legend><div class="recipe-options"><label>Short key<input type="text" name="input-${index}-key" value="${e(value("key", input?.key ?? ""))}" maxlength="32" placeholder="module" pattern="[a-z][a-z0-9_]{0,31}"></label><label>What should we ask?<input type="text" name="input-${index}-label" value="${e(value("label", input?.label ?? ""))}" maxlength="80" placeholder="Which module should we work on?"></label></div><label>Default answer <span class="meta">optional</span><input type="text" name="input-${index}-default" value="${e(value("default", input?.defaultValue ?? ""))}" maxlength="500"></label><p class="meta">Use <code data-question-token>{{${e(value("key", input?.key ?? "module")) || "module"}}}</code> in your instructions or a success check. Clear this row and its placeholders to remove the question.</p><button type="button" data-insert-question hidden>Insert into instructions</button></fieldset>`;
+    return html `<fieldset class="recipe-question"><legend>Question ${index + 1}</legend><div class="recipe-options"><label>Short key<input type="text" name="input-${index}-key" value="${value("key", input?.key ?? "")}" maxlength="32" placeholder="module" pattern="[a-z][a-z0-9_]{0,31}"></label><label>What should we ask?<input type="text" name="input-${index}-label" value="${value("label", input?.label ?? "")}" maxlength="80" placeholder="Which module should we work on?"></label></div><label>Default answer <span class="meta">optional</span><input type="text" name="input-${index}-default" value="${value("default", input?.defaultValue ?? "")}" maxlength="500"></label><p class="meta">Use <code data-question-token>{{${value("key", input?.key ?? "module") || "module"}}}</code> in your instructions or a success check. Clear this row and its placeholders to remove the question.</p><button type="button" data-insert-question hidden>Insert into instructions</button></fieldset>`;
 }
+/** The blank question the page's script copies, its numbers left for the script to fill in (the first "Question 8" only, as before). */
+const questionTemplate = () => {
+    let numbered = false;
+    return replaceMarkup(inputHtml(7), /input-7-|Question 8/g, match => match === "input-7-" ? html `input-INDEX-` : numbered ? null : (numbered = true, html `Question NEXT`));
+};
 function recipeQuestionsHtml(document, values) {
     const inputs = document.version === 2 ? document.inputs : [];
     const submitted = values ? [...values.keys()].filter(key => /^input-[0-7]-/.test(key)).map(key => Number(key.split("-")[1]) + 1) : [];
     const count = Math.min(RECIPE_INPUT_LIMIT, Math.max(1, inputs.length, ...submitted));
-    return `<details class="card"${inputs.length || submitted.some(i => values?.get(`input-${i - 1}-key`)) ? " open" : ""}><summary>Ask something each time <span class="meta">optional</span></summary><p class="hint">For example: “Test {{module}} and cover {{scenario}}.” Add a question for each placeholder. People answer these when they use the recipe; the saved instructions stay the same.</p><p class="meta">Use answers in the name, instructions, exclusions, or success checks. Keep allowed paths and check commands fixed. Don’t ask for passwords or keys.</p><div data-recipe-questions>${Array.from({ length: count }, (_, i) => inputHtml(i, inputs[i], values)).join("")}</div><button type="button" data-add-question hidden>Add a question</button><template data-question-template>${inputHtml(7).replaceAll("input-7-", "input-INDEX-").replace("Question 8", "Question NEXT")}</template></details>`;
+    return html `<details class="card"${(inputs.length > 0 || submitted.some(i => values?.get(`input-${i - 1}-key`))) && html ` open`}><summary>Ask something each time <span class="meta">optional</span></summary><p class="hint">For example: “Test {{module}} and cover {{scenario}}.” Add a question for each placeholder. People answer these when they use the recipe; the saved instructions stay the same.</p><p class="meta">Use answers in the name, instructions, exclusions, or success checks. Keep allowed paths and check commands fixed. Don’t ask for passwords or keys.</p><div data-recipe-questions>${Array.from({ length: count }, (_, i) => inputHtml(i, inputs[i], values))}</div><button type="button" data-add-question hidden>Add a question</button><template data-question-template>${questionTemplate()}</template></details>`;
 }
-export function recipeDefinitionPreviewHtml(preview, csrf, revision) {
+export function recipeDefinitionPreviewHtml(preview, revision) {
     const d = preview.document;
     const inputs = d.version === 2 ? d.inputs : [];
-    return `<a class="meta" href="/recipes/edit?preview=${preview.token}&purpose=recipe">← Edit recipe</a><div class="recipe-heading"><p class="recipe-kicker">2 · Preview your recipe</p><h1>${e(d.name)}</h1><p class="hint">${e(d.description || "A reusable starting point for work you do often.")}</p></div><section class="card"><h2>When someone uses this recipe</h2>${inputs.length ? `<ol>${inputs.map(input => `<li><strong>${e(input.label)}</strong><p class="meta">{{${e(input.key)}}}${input.defaultValue ? ` · Default: ${e(input.defaultValue)}` : " · Answer required each time"}</p></li>`).join("")}</ol>` : `<p>No questions to answer. The saved scope is ready to preview and use.</p>`}<p>Each use previews the exact work before creating it. The project’s approval and recovery settings still apply.</p></section><section class="card"><h2>Saved instructions</h2><p class="recap">${e(d.goal)}</p><h3>Leave alone</h3><p class="recap">${e(d.outOfScope ?? "No additional exclusions.")}</p><h3>Allowed paths</h3><p>${d.touches.map(e).join(", ") || "This project"}</p><h3>Success checks</h3><ul>${d.acceptance.map(one => `<li>${e(one.statement)}<p class="meta">${one.evidence.map(kind => e(evidence.find(([id]) => id === kind)?.[1] ?? kind)).join(" · ")}${one.how ? ` · ${e(one.how)}` : ""}</p></li>`).join("")}</ul><p class="meta">${d.deliverable === "report" ? "Report" : "Code change"} · ${d.schedule === null ? "Run once" : e(d.schedule)} · ${d.planning === "required" ? "Plan first" : d.planning === "auto" ? "Plan when helpful" : "Use the approved scope directly"}${d.costCeilingUsd === null ? "" : ` · $${d.costCeilingUsd} weekly limit`}</p></section><section class="card recipe-launch"><div>${preview.savedId ? `<a class="new-task" href="/recipes/run?recipe=${preview.savedId}&revision=${preview.savedRevision}">Use recipe →</a>` : `<form method="post" action="/recipes/save">${hidden("csrf", csrf)}${hidden("repo", preview.repo)}${hidden("projectRevision", String(revision))}${hidden("preview", preview.token)}${hidden("next", "use")}<button type="submit">Save recipe</button></form>`}<p class="meta">Saving creates no work. Everyone with project access can reuse this copy.</p></div><a href="/recipes/export?preview=${preview.token}">Export recipe JSON</a></section>`;
+    const uses = html `<section class="card"><h2>When someone uses this recipe</h2>${inputs.length ? html `<ol>${inputs.map(input => html `<li><strong>${input.label}</strong><p class="meta">{{${input.key}}}${input.defaultValue ? ` · Default: ${input.defaultValue}` : " · Answer required each time"}</p></li>`)}</ol>` : html `<p>No questions to answer. The saved scope is ready to preview and use.</p>`}<p>Each use previews the exact work before creating it. The project’s approval and recovery settings still apply.</p></section>`;
+    const instructions = html `<section class="card"><h2>Saved instructions</h2><p class="recap">${d.goal}</p><h3>Leave alone</h3><p class="recap">${d.outOfScope ?? "No additional exclusions."}</p><h3>Allowed paths</h3><p>${d.touches.length ? joinHtml(d.touches, ", ") : "This project"}</p><h3>Success checks</h3><ul>${d.acceptance.map(one => html `<li>${one.statement}<p class="meta">${evidenceWords(one.evidence)}${one.how ? ` · ${one.how}` : ""}</p></li>`)}</ul><p class="meta">${d.deliverable === "report" ? "Report" : "Code change"} · ${d.schedule === null ? "Run once" : d.schedule} · ${d.planning === "required" ? "Plan first" : d.planning === "auto" ? "Plan when helpful" : "Use the approved scope directly"}${d.costCeilingUsd === null ? "" : ` · $${d.costCeilingUsd} weekly limit`}</p></section>`;
+    const save = preview.savedId ? html `<a class="new-task" href="/recipes/run?recipe=${preview.savedId}&revision=${preview.savedRevision}">Use recipe →</a>`
+        : postForm("/recipes/save", html `<button type="submit">Save recipe</button>`, { projectRevision: String(revision), hidden: { repo: preview.repo, preview: preview.token, next: "use" } });
+    return html `<a class="meta" href="/recipes/edit?preview=${preview.token}&purpose=recipe">← Edit recipe</a><div class="recipe-heading"><p class="recipe-kicker">2 · Preview your recipe</p><h1>${d.name}</h1><p class="hint">${d.description || "A reusable starting point for work you do often."}</p></div>${uses}${instructions}<section class="card recipe-launch"><div>${save}<p class="meta">Saving creates no work. Everyone with project access can reuse this copy.</p></div><a href="/recipes/export?preview=${preview.token}">Export recipe JSON</a></section>`;
 }
-export function recipeRunHtml(recipe, repo, csrf, revision, problem = null, values, saved = false) {
+export function recipeRunHtml(recipe, repo, revision, problem = null, values, saved = false) {
     const d = recipe.document, inputs = d.version === 2 ? d.inputs : [];
-    return `<a class="meta" href="/recipes">← Your recipes</a><div class="recipe-heading"><p class="recipe-kicker">${saved ? "Recipe saved · ready when you are" : "Use a recipe"}</p><h1>${e(d.name)}</h1><p class="hint">${e(d.description || "Your saved instructions, ready to use again.")}</p></div>${problem ? `<p role="alert" class="card recipe-error">${e(problem)}</p>` : ""}<form class="recipe-run card" method="post" action="/recipes/prepare">${hidden("csrf", csrf)}${hidden("repo", repo)}${hidden("projectRevision", String(revision))}${hidden("recipe", recipe.id)}${hidden("recipeRevision", String(recipe.revision))}<h2>${inputs.length ? "What changes this time?" : "Ready to go"}</h2>${inputs.map(input => `<label>${e(input.label)}<textarea name="answer-${e(input.key)}" rows="2" maxlength="500" required>${e(values?.get(`answer-${input.key}`) ?? input.defaultValue ?? "")}</textarea></label>`).join("")}${inputs.length ? "" : `<p>No setup to repeat. Preview the saved scope and create the work.</p>`}<p class="meta">${d.schedule === null ? "Creates one task each time you use this recipe." : "Creates a new scheduled flow with these answers fixed for every run. Manage existing schedules from Flows."}</p><button type="submit">Preview this run →</button><p class="meta">Previewing starts no agents. Existing project approvals apply when you create work.</p></form><details class="card"><summary>Saved instructions and boundaries</summary><p class="recap">${e(d.goal)}</p><p class="recap">Leave alone: ${e(d.outOfScope ?? "No additional exclusions.")}</p><p>Allowed paths: ${d.touches.map(e).join(", ") || "This project"}</p><ul>${d.acceptance.map(one => `<li>${e(one.statement)}</li>`).join("")}</ul><a href="/recipes/start?recipe=${e(recipe.id)}&revision=${recipe.revision}">Edit a copy of this recipe →</a></details>`;
+    const run = postForm("/recipes/prepare", html `<h2>${inputs.length ? "What changes this time?" : "Ready to go"}</h2>${inputs.map(input => html `<label>${input.label}<textarea name="answer-${input.key}" rows="2" maxlength="500" required>${values?.get(`answer-${input.key}`) ?? input.defaultValue ?? ""}</textarea></label>`)}${inputs.length === 0 && html `<p>No setup to repeat. Preview the saved scope and create the work.</p>`}<p class="meta">${d.schedule === null ? "Creates one task each time you use this recipe." : "Creates a new schedule with these answers fixed for every firing. Manage an existing schedule from Routines."}</p><button type="submit">Preview this run →</button><p class="meta">Previewing starts no agents. Existing project approvals apply when you create work.</p>`, { attrs: { class: "recipe-run card" }, projectRevision: String(revision), hidden: { repo, recipe: recipe.id, recipeRevision: String(recipe.revision) } });
+    return html `<a class="meta" href="/recipes">← Your recipes</a><div class="recipe-heading"><p class="recipe-kicker">${saved ? "Recipe saved · ready when you are" : "Use a recipe"}</p><h1>${d.name}</h1><p class="hint">${d.description || "Your saved instructions, ready to use again."}</p></div>${problem && html `<p role="alert" class="card recipe-error">${problem}</p>`}${run}<details class="card"><summary>Saved instructions and boundaries</summary><p class="recap">${d.goal}</p><p class="recap">Leave alone: ${d.outOfScope ?? "No additional exclusions."}</p><p>Allowed paths: ${d.touches.length ? joinHtml(d.touches, ", ") : "This project"}</p><ul>${d.acceptance.map(one => html `<li>${one.statement}</li>`)}</ul><a href="/recipes/start?recipe=${recipe.id}&revision=${recipe.revision}">Edit a copy of this recipe →</a></details>`;
 }
 export function recipeAnswersFromForm(body) {
     const answers = new Map();