toolroll 0.9.54 → 0.9.55

package/dist/flow-gallery-ui.js

@@ -7,7 +7,7 @@
 import { brandMarkHtml } from "./brand-mark.js";
 import { BLANK, GALLERY, GALLERY_GROUPS, galleryDiagram, galleryToolsOf, OUTDATED_COMMANDS, SEND_RESULT, sendsAlready } from "./flow-gallery.js";
 import { choiceTargets } from "./flows.js";
-const e = (value) => String(value ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+import { html, joinHtml, postForm } from "./html.js";
 export const GALLERY_CSS = `.gallery{max-width:1120px;min-width:0}.gallery h2{margin:28px 0 10px;font-size:.9375rem}.gallery h2:first-of-type{margin-top:8px}` +
     `.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}` +
     `.gallery-card{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--so-line);border-radius:10px;background:var(--so-paper);min-width:0}` +
@@ -53,30 +53,28 @@ export function mainPath(definition) {
 const stepName = (stage) => stage.kind === "choose" ? "You choose" : stage.kind === "approval" ? "You approve" : stage.kind === "send" ? "Sent to you" : stage.title;
 /** A flow's steps in order, joined by arrows; a person's decisions carry the accent. */
 export function stepStrip(definition) {
-    return `<ol class="gallery-steps" aria-label="Steps">${mainPath(definition).map((one, i) => {
-        const name = e(stepName(one));
-        return `<li>${i === 0 ? "" : `<span aria-hidden="true">→</span>`}${one.kind === "choose" || one.kind === "approval" ? `<b data-person>${name}</b>` : name}</li>`;
-    }).join("")}</ol>`;
+    return html `<ol class="gallery-steps" aria-label="Steps">${mainPath(definition).map((one, i) => {
+        const name = stepName(one);
+        return html `<li>${i === 0 ? "" : html `<span aria-hidden="true">→</span>`}${one.kind === "choose" || one.kind === "approval" ? html `<b data-person>${name}</b>` : name}</li>`;
+    })}</ol>`;
 }
-const needsList = (template) => template.needs.length === 0 ? (template.tools ?? []).length > 0 ? "" : `<ul class="gallery-needs"><li>Nothing to connect</li></ul>`
-    : `<ul class="gallery-needs" aria-label="Needs">${template.needs.map(one => `<li>${e(one)}</li>`).join("")}</ul>`;
+const needsList = (template) => template.needs.length === 0 ? (template.tools ?? []).length > 0 ? "" : html `<ul class="gallery-needs"><li>Nothing to connect</li></ul>`
+    : html `<ul class="gallery-needs" aria-label="Needs">${template.needs.map(one => html `<li>${one}</li>`)}</ul>`;
 /** A tool's state in words, as Settings → Integrations badges it; nothing without a project. */
 const STATE = { connected: ["connected", "Connected"], open: ["not-set-up", "Not connected"], taken: ["not-set-up", "Added another way"] };
-const toolState = (tool) => tool.state === null ? "" : `<span class="integration-state integration-state--${STATE[tool.state][0]}"><i aria-hidden="true"></i>${STATE[tool.state][1]}</span>`;
+const toolState = (tool) => tool.state === null ? "" : html `<span class="integration-state integration-state--${STATE[tool.state][0]}"><i aria-hidden="true"></i>${STATE[tool.state][1]}</span>`;
 const toolMark = (tool) => brandMarkHtml(tool.id.replace(/-desktop$/, ""), tool.label, tool.state === "connected");
 const toolsList = (tools) => tools.length === 0 ? ""
-    : `<ul class="gallery-tools" aria-label="Tools">${tools.map(one => `<li data-tool="${e(one.id)}" data-state="${one.state ?? "unknown"}">${toolMark(one)}<strong>${e(one.label)}</strong>${toolState(one)}</li>`).join("")}</ul>`;
+    : html `<ul class="gallery-tools" aria-label="Tools">${tools.map(one => html `<li data-tool="${one.id}" data-state="${one.state ?? "unknown"}">${toolMark(one)}<strong>${one.label}</strong>${toolState(one)}</li>`)}</ul>`;
 /** The gallery: every template, grouped, each with one "Use this". `repo` carries a chosen project to the template's page. */
 export function galleryHtml(input) {
     const href = (id) => `/flows/new/${id}${input.repo === null ? "" : `?repo=${encodeURIComponent(input.repo)}`}`;
     const card = (template) => {
         const definition = galleryDiagram(template);
-        return `<article class="gallery-card" data-template="${e(template.id)}"><h3>${e(template.name)}</h3><p class="gallery-promise">${e(template.promise)}</p>` +
-            stepStrip(definition) + toolsList(galleryToolsOf(template, definition, input.repo === null ? null : input.connections ?? null)) + needsList(template) +
-            (input.canUse ? `<a class="button-link" href="${e(href(template.id))}" aria-label="Use ${e(template.name)}">Use this</a>` : "") + `</article>`;
+        return html `<article class="gallery-card" data-template="${template.id}"><h3>${template.name}</h3><p class="gallery-promise">${template.promise}</p>${stepStrip(definition)}${toolsList(galleryToolsOf(template, definition, input.repo === null ? null : input.connections ?? null))}${needsList(template)}${input.canUse && html `<a class="button-link" href="${href(template.id)}" aria-label="Use ${template.name}">Use this</a>`}</article>`;
     };
-    const groups = GALLERY_GROUPS.map(group => `<h2 id="gallery-${group.id}">${e(group.label)}</h2><div class="gallery-grid" data-group="${group.id}">${GALLERY.filter(one => one.group === group.id).map(card).join("")}</div>`).join("");
-    return `<section class="gallery">${groups}${input.canUse ? `<p class="gallery-blank meta"><a href="${e(href(BLANK.id))}">Start from a blank flow</a></p>` : `<p class="meta">An approver creates flows.</p>`}</section>`;
+    const groups = GALLERY_GROUPS.map(group => html `<h2 id="gallery-${group.id}">${group.label}</h2><div class="gallery-grid" data-group="${group.id}">${GALLERY.filter(one => one.group === group.id).map(card)}</div>`);
+    return html `<section class="gallery">${groups}${input.canUse ? html `<p class="gallery-blank meta"><a href="${href(BLANK.id)}">Start from a blank flow</a></p>` : html `<p class="meta">An approver creates flows.</p>`}</section>`;
 }
 /** A template's page: its questions, then what it will do and never do, then Create. */
 export function galleryUseHtml(input) {
@@ -86,43 +84,30 @@ export function galleryUseHtml(input) {
     const missing = tools.filter(one => one.state !== "connected" && one.state !== "taken");
     // Each tool with its state; one the project lacks offers its own Connect (the Tools page's, with the same password), and comes back here.
     const connect = (tool) => {
-        const head = `<p class="gallery-tool-head">${toolMark(tool)} <strong>${e(tool.label)}</strong> ${toolState(tool)}</p>`;
+        const head = html `<p class="gallery-tool-head">${toolMark(tool)} <strong>${tool.label}</strong> ${toolState(tool)}</p>`;
         // Added another way, it is there: nothing to connect.
         if (tool.state === "connected" || tool.state === "taken" || input.csrf === "")
-            return `<div class="gallery-connect" data-tool="${e(tool.id)}" data-state="${tool.state}">${head}</div>`;
+            return html `<div class="gallery-connect" data-tool="${tool.id}" data-state="${String(tool.state)}">${head}</div>`;
         const how = tool.id === "figma-desktop" ? "Open the Figma desktop app and turn on its Dev Mode MCP server in Preferences." : `You sign in on ${tool.label}, then come back here.`;
-        return `<div class="gallery-connect" data-tool="${e(tool.id)}" data-state="open">${head}<form method="post" action="/settings/tools/connect">` +
-            `<input type="hidden" name="csrf" value="${e(input.csrf)}"><input type="hidden" name="repo" value="${e(input.repo)}"><input type="hidden" name="shown" value="${e(input.repo)}"><input type="hidden" name="template" value="${e(template.id)}">` +
-            `<p class="meta">${e(how)}</p><label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label>` +
-            `<button name="service" value="${e(tool.id)}">Connect ${e(tool.label)}</button></form></div>`;
+        return html `<div class="gallery-connect" data-tool="${tool.id}" data-state="open">${head}${postForm("/settings/tools/connect", html `<p class="meta">${how}</p><label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label><button name="service" value="${tool.id}">Connect ${tool.label}</button>`, { hidden: { repo: input.repo, shown: input.repo, template: template.id } })}</div>`;
     };
-    const toolsBlock = tools.length === 0 ? "" : `<section class="gallery-tools-use" aria-label="Tools">${tools.map(connect).join("")}</section>`;
+    const toolsBlock = tools.length === 0 ? "" : html `<section class="gallery-tools-use" aria-label="Tools">${tools.map(connect)}</section>`;
     // Made without a tool, the preview names the zone that needs it.
-    const zones = (tool) => tool.zones.map(zone => `“${e(zone)}”`).join(" and ");
-    const needing = missing.filter(one => one.zones.length > 0).map(one => `<p class="meta" data-needs-tool="${e(one.id)}">${zones(one)} need${one.zones.length === 1 ? "s" : ""} ${e(one.label)}, which isn't connected.</p>`).join("") +
-        tools.filter(one => one.state === "taken" && one.zones.length > 0).map(one => `<p class="meta" data-tool-taken="${e(one.id)}">${zones(one)} use${one.zones.length === 1 ? "s" : ""} ${e(one.label)}, added another way.</p>`).join("");
+    const zones = (tool) => joinHtml(tool.zones.map(zone => html `“${zone}”`), " and ");
+    const needing = html `${missing.filter(one => one.zones.length > 0).map(one => html `<p class="meta" data-needs-tool="${one.id}">${zones(one)} need${one.zones.length === 1 ? "s" : ""} ${one.label}, which isn't connected.</p>`)}${tools.filter(one => one.state === "taken" && one.zones.length > 0).map(one => html `<p class="meta" data-tool-taken="${one.id}">${zones(one)} use${one.zones.length === 1 ? "s" : ""} ${one.label}, added another way.</p>`)}`;
     const field = (ask) => {
         const value = input.answers[ask.key] ?? ask.default;
-        const hint = ask.hint === undefined ? "" : ` <small>${e(ask.hint)}</small>`;
+        const hint = ask.hint === undefined ? "" : html ` <small>${ask.hint}</small>`;
         if (ask.key === "outdated")
-            return `<label>${e(ask.label)}<select name="outdated">${Object.entries(OUTDATED_COMMANDS).map(([id, one]) => `<option value="${id}"${id === value ? " selected" : ""}>${e(one.label)}</option>`).join("")}</select></label>`;
-        return `<label>${e(ask.label)}${hint}<input name="${ask.key}" value="${e(value)}" required maxlength="${ask.key === "command" ? 500 : ask.key === "team" ? 12 : 100}"${ask.key === "command" ? ' spellcheck="false" autocapitalize="off"' : ask.key === "team" ? ' spellcheck="false" autocapitalize="characters"' : ""}></label>`;
+            return html `<label>${ask.label}<select name="outdated">${Object.entries(OUTDATED_COMMANDS).map(([id, one]) => html `<option value="${id}"${id === value && html ` selected`}>${one.label}</option>`)}</select></label>`;
+        return html `<label>${ask.label}${hint}<input name="${ask.key}" value="${value}" required maxlength="${ask.key === "command" ? 500 : ask.key === "team" ? 12 : 100}"${ask.key === "command" ? html ` spellcheck="false" autocapitalize="off"` : ask.key === "team" ? html ` spellcheck="false" autocapitalize="characters"` : ""}></label>`;
     };
     const project = input.projects.length > 1
-        ? `<label>Project<select name="repo">${input.projects.map(one => `<option value="${e(one.path)}"${one.path === input.repo ? " selected" : ""}>${e(one.name)}</option>`).join("")}</select></label>`
-        : `<input type="hidden" name="repo" value="${e(input.repo)}">`;
-    const preview = input.preview === null ? "" : `<section class="gallery-preview" aria-labelledby="gallery-will">` +
-        `<h2 id="gallery-will">What it will do</h2><ul>${input.preview.built.does.map(one => `<li>${e(one)}</li>`).join("")}</ul>` +
-        `<p class="gallery-never">${e(input.preview.built.never)}</p>${needing}` +
-        (input.preview.startsFrom.length === 0 ? `<p class="meta">Cards start when you add them.</p>` : input.preview.startsFrom.map(one => `<p class="meta">Starts from: ${e(one)}</p>`).join("")) +
-        `<details><summary>Every step</summary><ol>${input.preview.steps.map(one => `<li>${e(one.replace(/^\d+\.\s/, ""))}</li>`).join("")}</ol></details></section>`;
-    return `<section class="gallery-use" data-gallery-template="${e(template.id)}">` +
-        (input.problem === null ? "" : `<p class="problem" role="alert">${e(input.problem)}</p>`) + (input.said ? `<p role="status">${e(input.said)}</p>` : "") +
-        `<p>${e(template.promise)}</p>${input.diagram === null ? "" : stepStrip(input.diagram)}${needsList(template)}${toolsBlock}` +
-        `<form method="post" action="/flows/new/${e(template.id)}" data-gallery-use><input type="hidden" name="csrf" value="${e(input.csrf)}">` +
-        `<input type="hidden" name="previewed" value="${e(input.preview?.digest ?? "")}">${project}${template.asks.map(field).join("")}` +
-        `<label>Name<input name="name" value="${e(input.name)}" maxlength="80"></label>` +
-        (sendsAlready(template) ? "" : `<label class="gallery-check"><input type="checkbox" name="${SEND_RESULT.key}" value="yes"${input.answers[SEND_RESULT.key] === "yes" ? " checked" : ""} data-send-result><span>${e(SEND_RESULT.title)}<small>When a card finishes, what was done comes to you in your chat apps.</small></span></label>`) + preview +
-        `<p class="gallery-actions">${input.preview === null ? "" : `<button type="submit" name="intent" value="create"${missing.length > 0 ? ' class="secondary" data-without-tools' : ""}>Create flow</button>`}<button type="submit" name="intent" value="preview" class="secondary">${input.preview === null ? "Preview" : "Update preview"}</button></p>` +
-        `</form><p class="meta"><a href="/flows/new">All templates</a></p></section>`;
+        ? html `<label>Project<select name="repo">${input.projects.map(one => html `<option value="${one.path}"${one.path === input.repo && html ` selected`}>${one.name}</option>`)}</select></label>`
+        : html `<input type="hidden" name="repo" value="${input.repo}">`;
+    const preview = input.preview === null ? "" : html `<section class="gallery-preview" aria-labelledby="gallery-will"><h2 id="gallery-will">What it will do</h2><ul>${input.preview.built.does.map(one => html `<li>${one}</li>`)}</ul><p class="gallery-never">${input.preview.built.never}</p>${needing}${input.preview.startsFrom.length === 0 ? html `<p class="meta">Cards start when you add them.</p>` : input.preview.startsFrom.map(one => html `<p class="meta">Starts from: ${one}</p>`)}<details><summary>Every step</summary><ol>${input.preview.steps.map(one => html `<li>${one.replace(/^\d+\.\s/, "")}</li>`)}</ol></details></section>`;
+    const sendResult = !sendsAlready(template) && html `<label class="gallery-check"><input type="checkbox" name="${SEND_RESULT.key}" value="yes"${input.answers[SEND_RESULT.key] === "yes" && html ` checked`} data-send-result><span>${SEND_RESULT.title}<small>When a card finishes, what was done comes to you in your chat apps.</small></span></label>`;
+    const actions = html `<p class="gallery-actions">${input.preview !== null && html `<button type="submit" name="intent" value="create"${missing.length > 0 && html ` class="secondary" data-without-tools`}>Create flow</button>`}<button type="submit" name="intent" value="preview" class="secondary">${input.preview === null ? "Preview" : "Update preview"}</button></p>`;
+    const form = postForm(`/flows/new/${template.id}`, html `${project}${template.asks.map(field)}<label>Name<input name="name" value="${input.name}" maxlength="80"></label>${sendResult}${preview}${actions}`, { attrs: { "data-gallery-use": true }, hidden: { previewed: input.preview?.digest ?? "" } });
+    return html `<section class="gallery-use" data-gallery-template="${template.id}">${input.problem !== null && html `<p class="problem" role="alert">${input.problem}</p>`}${input.said ? html `<p role="status">${input.said}</p>` : ""}<p>${template.promise}</p>${input.diagram !== null && stepStrip(input.diagram)}${needsList(template)}${toolsBlock}${form}<p class="meta"><a href="/flows/new">All templates</a></p></section>`;
 }

package/dist/flow-starters-ui.d.ts

@@ -4,6 +4,7 @@
  * that's on links to its flow; one that can't run here says why.
  */
 import type { StarterView } from "./flow-starters.js";
+import { type Html } from "./html.js";
 export declare const STARTERS_CSS: string;
 export declare function startersHtml(input: {
     repo: string;
@@ -17,4 +18,4 @@ export declare function startersHtml(input: {
     suggested: string | null;
     said: string | null;
     problem: string | null;
-}): string;
+}): Html;

package/dist/flow-starters-ui.js

@@ -1,4 +1,4 @@
-const e = (value) => String(value ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+import { html, postForm } from "./html.js";
 export const STARTERS_CSS = `.starters{max-width:760px;min-width:0}.starters h2{margin:24px 0 4px;font-size:.9375rem}` +
     `.starter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:start;padding:14px 0;border-top:1px solid var(--so-line);min-width:0}` +
     `.starter:first-of-type{border-top:0}.starter>:not(.starter-action){grid-column:1}.starter h3{margin:0;font-size:.9375rem;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}` +
@@ -13,23 +13,20 @@ export const STARTERS_CSS = `.starters{max-width:760px;min-width:0}.starters h2{
     `@media (max-width:560px){.starter{grid-template-columns:minmax(0,1fr)}.starter .starter-action{grid-column:1;grid-row:auto;margin-top:10px}` +
     `.starter .starter-action button,.starter .starter-action .button-link{width:100%;justify-content:center}.starters select{font-size:16px}}`;
 export function startersHtml(input) {
-    const note = input.problem ? `<p class="problem" role="alert">${e(input.problem)}</p>` : input.said ? `<p role="status">${e(input.said)}</p>` : "";
+    const note = input.problem ? html `<p class="problem" role="alert">${input.problem}</p>` : input.said ? html `<p role="status">${input.said}</p>` : "";
     const selector = input.projects.length > 1
-        ? `<form class="starters-project" method="get" action="/settings/flows"><label>Project<select name="repo">${input.projects.map(one => `<option value="${e(one.path)}"${one.path === input.repo ? " selected" : ""}>${e(one.name)}</option>`).join("")}</select></label><button>Show</button></form>` : "";
+        ? html `<form class="starters-project" method="get" action="/settings/flows"><label>Project<select name="repo">${input.projects.map(one => html `<option value="${one.path}"${one.path === input.repo && html ` selected`}>${one.name}</option>`)}</select></label><button>Show</button></form>` : "";
     // The one asked about ("Do this every time…") comes first, marked.
     const ordered = [...input.starters].sort((a, b) => Number(b.id === input.suggested) - Number(a.id === input.suggested));
     const rows = ordered.map(one => {
-        const action = one.on !== null ? `<p class="starter-action"><a class="button-link starter-open" href="/flows/${one.on.flow}">Open flow</a></p>`
+        const action = one.on !== null ? html `<p class="starter-action"><a class="button-link starter-open" href="/flows/${one.on.flow}">Open flow</a></p>`
             : one.blocked !== null || !input.canSwitch ? ""
-                : `<form method="post" action="/settings/flows/on" class="starter-action"><input type="hidden" name="csrf" value="${e(input.csrf)}"><input type="hidden" name="repo" value="${e(input.repo)}">` +
-                    `<input type="hidden" name="starter" value="${e(one.id)}"><button type="submit">Switch on</button></form>`;
-        return `<div class="starter" id="starter-${e(one.id)}" data-starter="${e(one.id)}" data-suggested="${one.id === input.suggested && one.on === null}">` +
-            `<h3>${e(one.name)}${one.on === null ? "" : ` <span class="starter-on"><i aria-hidden="true"></i>On</span>`}</h3>` +
-            `<p>${e(one.summary)}</p>` +
-            // What the yes agrees to, in full, before it; nothing to agree to once it's on or can't be.
-            (one.on === null && one.blocked === null ? `<ul>${one.does.map(line => `<li>${e(line)}</li>`).join("")}</ul><p class="starter-never">${e(one.never)}</p>` : "") +
-            (one.on === null && one.blocked !== null ? `<p class="starter-blocked">${e(one.blocked)}</p>` : "") + action + `</div>`;
-    }).join("");
-    const nobody = !input.canSwitch && input.starters.some(one => one.on === null) ? `<p class="meta">An approver switches these on.</p>` : "";
-    return `<section class="starters">${note}${selector}<h2>Starter flows</h2>${rows}${nobody}<p class="meta"><a href="/flows">All flows</a></p></section>`;
+                : postForm("/settings/flows/on", html `<button type="submit">Switch on</button>`, { attrs: { class: "starter-action" }, hidden: { repo: input.repo, starter: one.id } });
+        // What the yes agrees to, in full, before it; nothing to agree to once it's on or can't be.
+        const agrees = one.on === null && one.blocked === null && html `<ul>${one.does.map(line => html `<li>${line}</li>`)}</ul><p class="starter-never">${one.never}</p>`;
+        const head = html `<h3>${one.name}${one.on === null ? "" : html ` <span class="starter-on"><i aria-hidden="true"></i>On</span>`}</h3>`;
+        return html `<div class="starter" id="starter-${one.id}" data-starter="${one.id}" data-suggested="${String(one.id === input.suggested && one.on === null)}">${head}<p>${one.summary}</p>${agrees}${one.on === null && one.blocked !== null && html `<p class="starter-blocked">${one.blocked}</p>`}${action}</div>`;
+    });
+    const nobody = !input.canSwitch && input.starters.some(one => one.on === null) ? html `<p class="meta">An approver switches these on.</p>` : "";
+    return html `<section class="starters">${note}${selector}<h2>Starter flows</h2>${rows}${nobody}<p class="meta"><a href="/flows">All flows</a></p></section>`;
 }

package/dist/flow-triggers.d.ts

@@ -208,6 +208,7 @@ export declare const FORM_PATH = "/hooks/form/";
 /** Share a button as a secret link anyone can fill in, without signing in. The link is shown once; only its hash is kept. */
 export declare function shareFlowButton(store: Store, trigger: FlowTriggerRow, now: Date, dir: string | null): TriggerMade;
 export declare function stopSharingFlowButton(store: Store, trigger: FlowTriggerRow, now: Date): void;
+/** The page's bytes (the public route writes them itself, with its own headers). */
 export type FormAnswer = {
     status: number;
     html: string;

package/dist/flow-triggers.js

@@ -1,4 +1,5 @@
 import { adapterPolicy } from "./server/route-policy.js";
+import { html, htmlString, postForm, styleElement } from "./html.js";
 /**
  * Flow triggers (v82): what starts cards in a flow without someone adding
  * them by hand.
@@ -1107,11 +1108,7 @@ export function shareFlowButton(store, trigger, now, dir) {
 export function stopSharingFlowButton(store, trigger, now) {
     store.updateFlowTrigger(trigger.id, { hookHash: null }, now);
 }
-const esc = (value) => value.replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
-/** The public page: the button's name and its questions, nothing about the flow, the project or anyone in it. */
-function formHtml(label, body) {
-    return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex">
-<title>${esc(label)}</title><style>
+const FORM_CSS = `
 :root{color-scheme:light dark;--bg:#f7f7f5;--card:#fff;--text:#1c1d1b;--muted:#666a63;--line:#dcded8;--accent:#2d5a45}
 @media (prefers-color-scheme:dark){:root{--bg:#141614;--card:#1d201d;--text:#ecefe9;--muted:#9ea39a;--line:#343934;--accent:#8fd0ae}}
 *{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
@@ -1119,18 +1116,23 @@ main{max-width:560px;margin:0 auto;padding:40px 16px}h1{font-size:1.5rem;margin:
 label{display:grid;gap:6px;margin:0 0 16px;font-weight:600}input,textarea{font:inherit;color:inherit;background:transparent;border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
 textarea{min-height:96px;resize:vertical}button{font:inherit;font-weight:600;border:0;border-radius:10px;padding:12px 18px;min-height:44px;background:var(--accent);color:var(--bg);cursor:pointer}
 p{color:var(--muted)}.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}a{color:var(--accent)}
-</style></head><body><main><h1>${esc(label)}</h1><div class="card">${body}</div></main></body></html>`;
+`;
+/** The public page: the button's name and its questions, nothing about the flow, the project or anyone in it. */
+function formHtml(label, body) {
+    return htmlString(html `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex">
+<title>${label}</title>${styleElement(FORM_CSS)}</head><body><main><h1>${label}</h1><div class="card">${body}</div></main></body></html>`);
 }
 /** GET a shared form: its questions. */
 export function flowFormPage(store, token, now) {
     const trigger = /^[A-Za-z0-9_-]{20,64}$/.test(token) ? store.flowTriggerByHook(hookHash(token)) : null;
     const config = trigger === null ? null : triggerConfigOf(trigger);
     if (trigger === null || config?.kind !== "button")
-        return { status: 404, html: formHtml("Not found", "<p>This form isn't available. Ask whoever shared it for a new link.</p>") };
+        return { status: 404, html: formHtml("Not found", html `<p>This form isn't available. Ask whoever shared it for a new link.</p>`) };
     if (!adapterPolicy({ caller: "anonymous", capability: "none" }, undefined, source => source === "flow" && store.getFlow(trigger.flow) !== null).ok)
         return { status: 403, html: "" };
-    const fields = config.questions.map((question, index) => `<label>${esc(question)}${index === 0 ? `<input name="a${index}" required maxlength="200" autocomplete="off">` : `<textarea name="a${index}" maxlength="3000"></textarea>`}</label>`).join("");
-    return { status: 200, html: formHtml(config.label, `<form method="post">${fields}<div class="trap" aria-hidden="true"><label>Leave this empty<input name="website" tabindex="-1" autocomplete="off"></label></div><input type="hidden" name="t" value="${now.getTime()}"><button>Send</button></form>`) };
+    const fields = config.questions.map((question, index) => html `<label>${question}${index === 0 ? html `<input name="a${index}" required maxlength="200" autocomplete="off">` : html `<textarea name="a${index}" maxlength="3000"></textarea>`}</label>`);
+    // Signed out by nature: no session, so no CSRF; the trap, the shown time and the hourly limit guard it. It posts back to its own address.
+    return { status: 200, html: formHtml(config.label, postForm("", html `${fields}<div class="trap" aria-hidden="true"><label>Leave this empty<input name="website" tabindex="-1" autocomplete="off"></label></div><input type="hidden" name="t" value="${now.getTime()}"><button>Send</button>`, { signedOut: true })) };
 }
 /** POST a shared form: at most one card per submission, keys refused, a limit per hour, and quiet about what a bot did wrong. */
 export function receiveFlowForm(store, token, fields, now) {
@@ -1140,8 +1142,8 @@ export function receiveFlowForm(store, token, fields, now) {
         return flowFormPage(store, token, now);
     if (!adapterPolicy({ caller: "anonymous", capability: "none" }, undefined, source => source === "flow" && store.getFlow(trigger.flow) !== null).ok)
         return { status: 403, html: "" };
-    const again = `<p><a href="${esc(FORM_PATH + token)}">Send another</a></p>`;
-    const thanks = formHtml(config.label, `<p>Thanks — it's been sent.</p>${again}`);
+    const again = html `<p><a href="${FORM_PATH + token}">Send another</a></p>`;
+    const thanks = formHtml(config.label, html `<p>Thanks — it's been sent.</p>${again}`);
     // A filled trap, or a page posted faster than a person could, gets thanks and makes nothing.
     const form = readFormSubmission(fields, config.questions.length);
     const shown = Number(form.t);
@@ -1149,14 +1151,14 @@ export function receiveFlowForm(store, token, fields, now) {
         return { status: 200, html: thanks };
     const recent = store.handle.prepare("SELECT COUNT(*) AS n FROM flow_trigger_event WHERE trigger = ? AND key LIKE 'form:%' AND at > ?").get(trigger.id, new Date(now.getTime() - 3_600_000).toISOString());
     if (Number(recent?.["n"] ?? 0) >= FORM_CARDS_PER_HOUR)
-        return { status: 429, html: formHtml(config.label, `<p>Too many sent in the last hour. Try again later.</p>`) };
+        return { status: 429, html: formHtml(config.label, html `<p>Too many sent in the last hour. Try again later.</p>`) };
     const answers = form.answers.map((answer, index) => (answer ?? "").replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f]/g, "").trim().slice(0, index === 0 ? 200 : 3000));
     if (answers[0] === "")
-        return { status: 400, html: formHtml(config.label, `<p>Answer “${esc(config.questions[0])}” first.</p>${again}`) };
+        return { status: 400, html: formHtml(config.label, html `<p>Answer “${config.questions[0]}” first.</p>${again}`) };
     const details = config.questions.slice(1).map((question, index) => answers[index + 1] === "" ? null : `${question}\n${answers[index + 1]}`).filter(one => one !== null).join("\n\n");
     const made = makeCard(store, trigger, config, { key: `form:${now.toISOString()}:${randomUUID().slice(0, 8)}`, title: answers[0], description: `From the “${config.label}” form:\n\n${details}`.trim(), source: { kind: "form", label: `Form: ${config.label}`, url: null } }, "Form", now);
     if (made.made !== "added")
-        return { status: 400, html: formHtml(config.label, `<p>${made.note?.includes("key or password") ? "That looks like it holds a key or password. Take it out and send again." : "That couldn't be sent."}</p>${again}`) };
+        return { status: 400, html: formHtml(config.label, html `<p>${made.note?.includes("key or password") ? "That looks like it holds a key or password. Take it out and send again." : "That couldn't be sent."}</p>${again}`) };
     store.updateFlowTrigger(trigger.id, { lastAt: now.toISOString(), lastOutcome: "Someone sent the form." }, now);
     return { status: 200, html: thanks };
 }

package/dist/flows-ui.d.ts

@@ -3,9 +3,10 @@
 import type { BrowserFlowView } from "./browser-workspace.js";
 import type { FlowRow, Store } from "./store.js";
 import { type FlowFile, type FlowImportPlan } from "./flow-share.js";
+import { type Html } from "./html.js";
 export declare const FLOWS_CSS = ".flows{max-width:880px;min-width:0}.flows .card{padding:16px 18px;margin:12px 0}.flows .flow-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}.flows .flow-row h2{font-size:1.05rem;margin:0}.flows .flow-counts{font-size:.85rem;color:var(--so-muted)}.flows form{display:grid;gap:10px;margin:0}.flows label{display:grid;gap:6px}.flows input,.flows select{box-sizing:border-box;width:100%;max-width:100%}.flows button{justify-self:start;min-height:44px}.flows .flow-fallback ol{padding-left:20px}.flows summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}.flows .flow-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0}.flows .flow-import{margin-top:18px;padding-top:14px;border-top:1px solid var(--so-line)}.flows .flow-import h3{font-size:.95rem;margin:0}.flows .flow-terms{list-style:none;padding:0;margin:8px 0 16px;display:grid;gap:10px}.flows .flow-terms li{white-space:pre-line;overflow-wrap:anywhere}.flows .flow-terms pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8rem;margin:6px 0 0}.flows .flow-import-preview h2{font-size:1rem;margin:20px 0 4px}.flows .flow-untrusted{font-weight:600}.flows button.primary{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}.flows fieldset{border:0;padding:0;margin:0;display:grid;gap:10px;min-width:0}.flows legend{font-weight:600;padding:0;margin-bottom:6px}.flows textarea[hidden]{display:none}.flows button.secondary{background:transparent;color:var(--foreground);border:1px solid var(--border)}@media(max-width:600px){.flows input,.flows select{font-size:16px}}@media(max-width:760px){.flows .card{padding:10px 12px;margin:8px 0;position:relative}.flows .flow-row{row-gap:2px}.flows .flow-row h2 a::after{content:\"\";position:absolute;inset:0;border-radius:inherit}.flows .flow-counts{line-height:1.35}}";
 /** The flows a person can open, with how many cards wait in each, and the new-flow form. */
-export declare function flowsListHtml(store: Store, flows: readonly FlowRow[], projects: readonly string[], csrf: string, canCreate: boolean, problem: string | null): string;
+export declare function flowsListHtml(store: Store, flows: readonly FlowRow[], projects: readonly string[], canCreate: boolean, problem: string | null): Html;
 /** Reads the chosen flow file into the form (the server reads it again, whole, before anything is made). */
 export declare const FLOW_IMPORT_SCRIPT = "(function(){var form=document.querySelector('[data-flow-import]');if(!form)return;var input=form.querySelector('[data-flow-file]'),text=form.querySelector('[data-flow-document]'),note=form.querySelector('[data-flow-file-note]'),address=form.querySelector('[name=url]');function say(words){note.textContent=words;note.hidden=words==='';}var reading=null;input.addEventListener('change',function(){text.value='';say('');var file=input.files&&input.files[0];if(!file){reading=null;return;}if(file.size>262144){say('That file is too big: a flow file is at most 256 KB.');input.value='';reading=null;return;}reading=file.text().then(function(value){text.value=value;});});form.addEventListener('submit',function(event){if(reading!==null&&text.value===''){event.preventDefault();reading.then(function(){form.requestSubmit();});return;}if(text.value===''&&address.value.trim()===''){event.preventDefault();say('Choose a flow file or give its address.');}});})();";
 /** An import's preview: the plan in plain words, what it asks for, and one Import button after the terms. */
@@ -18,7 +19,7 @@ export declare function flowImportHtml(input: {
     values: Record<string, string>;
     previewed: string;
     problem: string | null;
-}): string;
+}): Html;
 /** One flow's canvas for one person. */
 export declare function flowView(store: Store, flow: FlowRow, viewer: {
     name: string;
@@ -31,4 +32,4 @@ export declare function flowView(store: Store, flow: FlowRow, viewer: {
     toolHome?: string;
 }): BrowserFlowView;
 /** The page the canvas replaces when scripts can't run: each zone and its cards, in order. */
-export declare function flowFallbackHtml(view: BrowserFlowView): string;
+export declare function flowFallbackHtml(view: BrowserFlowView): Html;

package/dist/flows-ui.js

@@ -17,53 +17,42 @@ import { callWords, receiptWords } from "./teammate-tools.js";
 import { undoFor } from "./teammate-week.js";
 import { flowCardTaskLine } from "./flow-card-task.js";
 import { readFlowSecrets } from "./flow-secrets.js";
-const e = (value) => String(value ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+import { html, joinHtml, postForm } from "./html.js";
 const projectName = (repo) => repo.split(/[\\/]/).filter(Boolean).pop() ?? repo;
 export const FLOWS_CSS = `.flows{max-width:880px;min-width:0}.flows .card{padding:16px 18px;margin:12px 0}.flows .flow-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}.flows .flow-row h2{font-size:1.05rem;margin:0}.flows .flow-counts{font-size:.85rem;color:var(--so-muted)}.flows form{display:grid;gap:10px;margin:0}.flows label{display:grid;gap:6px}.flows input,.flows select{box-sizing:border-box;width:100%;max-width:100%}.flows button{justify-self:start;min-height:44px}.flows .flow-fallback ol{padding-left:20px}.flows summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}.flows .flow-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0}.flows .flow-import{margin-top:18px;padding-top:14px;border-top:1px solid var(--so-line)}.flows .flow-import h3{font-size:.95rem;margin:0}.flows .flow-terms{list-style:none;padding:0;margin:8px 0 16px;display:grid;gap:10px}.flows .flow-terms li{white-space:pre-line;overflow-wrap:anywhere}.flows .flow-terms pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8rem;margin:6px 0 0}.flows .flow-import-preview h2{font-size:1rem;margin:20px 0 4px}.flows .flow-untrusted{font-weight:600}.flows button.primary{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}.flows fieldset{border:0;padding:0;margin:0;display:grid;gap:10px;min-width:0}.flows legend{font-weight:600;padding:0;margin-bottom:6px}.flows textarea[hidden]{display:none}.flows button.secondary{background:transparent;color:var(--foreground);border:1px solid var(--border)}@media(max-width:600px){.flows input,.flows select{font-size:16px}}@media(max-width:760px){.flows .card{padding:10px 12px;margin:8px 0;position:relative}.flows .flow-row{row-gap:2px}.flows .flow-row h2 a::after{content:"";position:absolute;inset:0;border-radius:inherit}.flows .flow-counts{line-height:1.35}}`;
 /** The flows a person can open, with how many cards wait in each, and the new-flow form. */
-export function flowsListHtml(store, flows, projects, csrf, canCreate, problem) {
+export function flowsListHtml(store, flows, projects, canCreate, problem) {
     const rows = flows.map(flow => {
         const cards = store.flowCards(flow.id, false);
         const definition = flowDefinitionOf(flow);
         const waiting = cards.filter(card => ["approval", "choose"].includes(definition?.stages.find(one => one.id === card.stage)?.kind ?? "")).length;
         const buttons = store.flowTriggers(flow.id).filter(one => one.state === "active").flatMap(one => { const config = triggerConfigOf(one); return config?.kind === "button" ? [{ id: one.id, label: config.label }] : []; });
         const trouble = troubleWords(flowInsights(store, flow, new Date(), 7));
-        return `<article class="card"><div class="flow-row"><h2><a href="/flows/${flow.id}">${e(flow.name)}</a></h2><span class="flow-counts">${e(projectName(flow.repo))} · ${cards.length} card${cards.length === 1 ? "" : "s"} in progress${waiting > 0 ? ` · ${waiting} waiting for a decision` : ""}${trouble === null ? "" : ` · ${e(trouble)}`}</span></div>` +
-            (buttons.length === 0 ? "" : `<p class="flow-buttons">${buttons.map(one => `<a class="button-link" href="/flows/${flow.id}?start=${one.id}">${e(one.label)}</a>`).join(" ")}</p>`) + `</article>`;
-    }).join("");
-    const projectField = projects.length === 1 ? `<input type="hidden" name="repo" value="${e(projects[0])}">` : `<label>Project<select name="repo">${projects.map(repo => `<option value="${e(repo)}">${e(projectName(repo))}</option>`).join("")}</select></label>`;
+        return html `<article class="card"><div class="flow-row"><h2><a href="/flows/${flow.id}">${flow.name}</a></h2><span class="flow-counts">${projectName(flow.repo)} · ${cards.length} card${cards.length === 1 ? "" : "s"} in progress${waiting > 0 ? ` · ${waiting} waiting for a decision` : ""}${trouble === null ? "" : ` · ${trouble}`}</span></div>${buttons.length > 0 && html `<p class="flow-buttons">${joinHtml(buttons.map(one => html `<a class="button-link" href="/flows/${flow.id}?start=${one.id}">${one.label}</a>`), " ")}</p>`}</article>`;
+    });
+    const projectField = projects.length === 1 ? html `<input type="hidden" name="repo" value="${projects[0]}">` : html `<label>Project<select name="repo">${projects.map(repo => html `<option value="${repo}">${projectName(repo)}</option>`)}</select></label>`;
     // A flow file (flow-share.ts): chosen here or fetched from a gist, previewed in plain words before anything is made.
-    const importForm = `<form method="post" action="/flows/import" class="flow-import" data-flow-import><input type="hidden" name="csrf" value="${e(csrf)}"><h3>Or import a flow file</h3>${projectField}<label>File<input type="file" accept=".json,application/json" data-flow-file></label><textarea name="document" hidden data-flow-document></textarea><label>Or its address<input name="url" type="url" inputmode="url" placeholder="https://gist.github.com/…"></label><p class="problem" role="alert" data-flow-file-note hidden></p><button>Preview import</button></form>`;
+    const importForm = postForm("/flows/import", html `<h3>Or import a flow file</h3>${projectField}<label>File<input type="file" accept=".json,application/json" data-flow-file></label><textarea name="document" hidden data-flow-document></textarea><label>Or its address<input name="url" type="url" inputmode="url" placeholder="https://gist.github.com/…"></label><p class="problem" role="alert" data-flow-file-note hidden></p><button>Preview import</button>`, { attrs: { class: "flow-import", "data-flow-import": true } });
     // A new flow starts from the gallery (Flows → New): templates grouped by what they're for.
-    const create = canCreate && projects.length > 0 ? `<p class="flow-buttons"><a class="button-link" href="/flows/new">New flow</a></p>${importForm}` : "";
+    const create = canCreate && projects.length > 0 && html `<p class="flow-buttons"><a class="button-link" href="/flows/new">New flow</a></p>${importForm}`;
     // No flows yet: one click makes a working example with a sample question in it.
     const example = flows.length === 0 && canCreate && projects.length > 0
-        ? `<form method="post" action="/flows/example" class="card flow-example"><input type="hidden" name="csrf" value="${e(csrf)}"><h2>See a flow work</h2><p class="meta">Claude drafts a reply to a sample customer question; you approve it here or in your chat app.</p>${projects.length === 1 ? `<input type="hidden" name="repo" value="${e(projects[0])}">` : `<label>Project<select name="repo">${projects.map(repo => `<option value="${e(repo)}">${e(projectName(repo))}</option>`).join("")}</select></label>`}<button>Try an example</button></form>`
-        : "";
-    const intro = `<p class="meta">A flow is your process drawn as zones. Cards move through them: agents do the work, people approve, and the team hears about it.</p>` +
-        (canCreate && projects.length > 0 ? `<p class="flow-chat">Describe how work should move and your lead drafts the flow for you to confirm, or start from a template. <a href="/chat?draft=${encodeURIComponent("Make a flow for ")}">Describe it in chat</a></p>` : "") +
-        `<p class="flow-chat">AI teammates can decide and handle cards for you, within rules you write. <a href="/teammates">Teammates</a> · or set one up with its flow in one click: <a href="/kits">Starter kits</a></p>`;
-    return `<section class="flows">${problem === null ? "" : `<p class="problem" role="alert">${e(problem)}</p>`}${intro}${create}${rows || example || '<p class="meta">No flows yet.</p>'}</section>`;
+        ? postForm("/flows/example", html `<h2>See a flow work</h2><p class="meta">Claude drafts a reply to a sample customer question; you approve it here or in your chat app.</p>${projectField}<button>Try an example</button>`, { attrs: { class: "card flow-example" } })
+        : null;
+    const intro = html `<p class="meta">A flow is your process drawn as zones. Cards move through them: agents do the work, people approve, and the team hears about it.</p>${canCreate && projects.length > 0 && html `<p class="flow-chat">Describe how work should move and your lead drafts the flow for you to confirm, or start from a template. <a href="/chat?draft=${encodeURIComponent("Make a flow for ")}">Describe it in chat</a></p>`}<p class="flow-chat">AI teammates can decide and handle cards for you, within rules you write. <a href="/teammates">Teammates</a> · or set one up with its flow in one click: <a href="/kits">Starter kits</a></p>`;
+    return html `<section class="flows">${problem !== null && html `<p class="problem" role="alert">${problem}</p>`}${intro}${create}${rows.length > 0 ? rows : example ?? html `<p class="meta">No flows yet.</p>`}</section>`;
 }
 /** Reads the chosen flow file into the form (the server reads it again, whole, before anything is made). */
 export const FLOW_IMPORT_SCRIPT = `(function(){var form=document.querySelector('[data-flow-import]');if(!form)return;var input=form.querySelector('[data-flow-file]'),text=form.querySelector('[data-flow-document]'),note=form.querySelector('[data-flow-file-note]'),address=form.querySelector('[name=url]');function say(words){note.textContent=words;note.hidden=words==='';}var reading=null;input.addEventListener('change',function(){text.value='';say('');var file=input.files&&input.files[0];if(!file){reading=null;return;}if(file.size>${FLOW_FILE_MAX_BYTES}){say('That file is too big: a flow file is at most ${FLOW_FILE_MAX_BYTES / 1024} KB.');input.value='';reading=null;return;}reading=file.text().then(function(value){text.value=value;});});form.addEventListener('submit',function(event){if(reading!==null&&text.value===''){event.preventDefault();reading.then(function(){form.requestSubmit();});return;}if(text.value===''&&address.value.trim()===''){event.preventDefault();say('Choose a flow file or give its address.');}});})();`;
 /** An import's preview: the plan in plain words, what it asks for, and one Import button after the terms. */
 export function flowImportHtml(input) {
     const { plan, file } = input;
-    const fields = file.parameters.map(one => `<label><span>${e(one.about)}${one.optional === true ? ' <span class="meta">(optional)</span>' : ""}</span><input name="param.${e(one.id)}" value="${e(input.values[one.id] ?? plan?.values[one.id] ?? one.default ?? "")}" maxlength="200" autocomplete="off"></label>`).join("");
-    const list = (items) => items.length === 0 ? "" : `<ul class="flow-terms">${items.map(term => `<li>${e(term)}</li>`).join("")}</ul>`;
+    const fields = file.parameters.map(one => html `<label><span>${one.about}${one.optional === true && html ` <span class="meta">(optional)</span>`}</span><input name="param.${one.id}" value="${input.values[one.id] ?? plan?.values[one.id] ?? one.default ?? ""}" maxlength="200" autocomplete="off"></label>`);
+    const list = (items) => items.length === 0 ? "" : html `<ul class="flow-terms">${items.map(term => html `<li>${term}</li>`)}</ul>`;
     // The steps, what they mean, the triggers and the scripts; each script's code one tap away, as on the Scripts panel.
-    const terms = plan === null ? "" : (plan.parts.about === null ? "" : `<p>${e(plan.parts.about)}</p>`) +
-        `<p class="flow-untrusted">Its instructions come from the file, not from you: read what each step is asked before you import.</p>` +
-        list(plan.parts.steps) +
-        (plan.parts.triggers.length === 0 ? "" : `<h2>Triggers</h2>${list(plan.parts.triggers)}`) +
-        (plan.parts.scripts.length + plan.parts.kept.length === 0 ? "" : `<h2>Scripts</h2><ul class="flow-terms">${plan.scripts.add.map((one, index) => `<li>${e(plan.parts.scripts[index])}${one.body === undefined ? "" : `<details><summary>Show the script</summary><pre>${e(one.body)}</pre></details>`}</li>`).join("")}${plan.parts.kept.map(one => `<li>${e(one)}</li>`).join("")}</ul>`) +
-        `<h2>Good to know</h2>${list([...plan.parts.notes, ...(plan.parts.needs === null ? [] : [plan.parts.needs])])}`;
-    return `<section class="flows flow-import-preview">${input.problem === null ? "" : `<p class="problem" role="alert">${e(input.problem)}</p>`}` +
-        `<p class="meta">Into ${e(projectName(input.repo))}. Nothing is made until you import it.</p>${terms}` +
-        `<form method="post" action="/flows/import" class="card"><input type="hidden" name="csrf" value="${e(input.csrf)}"><input type="hidden" name="repo" value="${e(input.repo)}"><input type="hidden" name="previewed" value="${e(input.previewed)}"><textarea name="document" hidden>${e(input.document)}</textarea>` +
-        (fields === "" ? "" : `<fieldset class="flow-import-fields"><legend>Fill in</legend>${fields}</fieldset>`) +
-        `<p class="flow-buttons">${plan === null ? "" : '<button name="confirm" value="yes" class="primary">Import flow</button>'}${fields === "" ? "" : `<button name="confirm" value="" class="${plan === null ? "" : "secondary"}">Update preview</button>`}<a href="/flows">Cancel</a></p></form></section>`;
+    const terms = plan === null ? "" : html `${plan.parts.about !== null && html `<p>${plan.parts.about}</p>`}<p class="flow-untrusted">Its instructions come from the file, not from you: read what each step is asked before you import.</p>${list(plan.parts.steps)}${plan.parts.triggers.length > 0 && html `<h2>Triggers</h2>${list(plan.parts.triggers)}`}${plan.parts.scripts.length + plan.parts.kept.length > 0 && html `<h2>Scripts</h2><ul class="flow-terms">${plan.scripts.add.map((one, index) => html `<li>${plan.parts.scripts[index]}${one.body !== undefined && html `<details><summary>Show the script</summary><pre>${one.body}</pre></details>`}</li>`)}${plan.parts.kept.map(one => html `<li>${one}</li>`)}</ul>`}<h2>Good to know</h2>${list([...plan.parts.notes, ...(plan.parts.needs === null ? [] : [plan.parts.needs])])}`;
+    const form = postForm("/flows/import", html `<textarea name="document" hidden>${input.document}</textarea>${fields.length > 0 && html `<fieldset class="flow-import-fields"><legend>Fill in</legend>${fields}</fieldset>`}<p class="flow-buttons">${plan !== null && html `<button name="confirm" value="yes" class="primary">Import flow</button>`}${fields.length > 0 && html `<button name="confirm" value="" class="${plan === null ? "" : "secondary"}">Update preview</button>`}<a href="/flows">Cancel</a></p>`, { attrs: { class: "card" }, hidden: { repo: input.repo, previewed: input.previewed } });
+    return html `<section class="flows flow-import-preview">${input.problem !== null && html `<p class="problem" role="alert">${input.problem}</p>`}<p class="meta">Into ${projectName(input.repo)}. Nothing is made until you import it.</p>${terms}${form}</section>`;
 }
 const historyText = (event, title, sorts = new Set()) => {
     const who = event.actor === "flow" ? "" : ` by ${event.actor}`;
@@ -230,8 +219,8 @@ export function flowView(store, flow, viewer, selectedCard, setup = { dir: null,
 }
 /** The page the canvas replaces when scripts can't run: each zone and its cards, in order. */
 export function flowFallbackHtml(view) {
-    return `<section class="flows flow-fallback"><p class="meta">${e(view.flow.project)}</p><ol>${view.stages.map(stage => {
+    return html `<section class="flows flow-fallback"><p class="meta">${view.flow.project}</p><ol>${view.stages.map(stage => {
         const cards = view.cards.filter(card => card.stage === stage.id && card.state === "active");
-        return `<li><strong>${e(stage.title)}</strong> · ${e(FLOW_KIND_WORDS[stage.kind].label)}${cards.length === 0 ? "" : `<ul>${cards.map(card => `<li>${e(card.title)}${card.waiting === null ? "" : ` — ${e(card.waiting)}`}</li>`).join("")}</ul>`}</li>`;
-    }).join("")}</ol></section>`;
+        return html `<li><strong>${stage.title}</strong> · ${FLOW_KIND_WORDS[stage.kind].label}${cards.length > 0 && html `<ul>${cards.map(card => html `<li>${card.title}${card.waiting !== null && ` — ${card.waiting}`}</li>`)}</ul>`}</li>`;
+    })}</ol></section>`;
 }

package/dist/flows.js

@@ -49,6 +49,7 @@
  */
 import { TEXT_LIMITS } from "./text-limits.js";
 import { createHash } from "node:crypto";
+import { projectName } from "./project.js";
 import { parseContract, readVersioned } from "./contracts/contract.js";
 import { stageReferenceProblems } from "./contracts/stage-output.js";
 import { CHOICES_MAX, CHOICES_MIN, FLOW_ALIASES, FLOW_COLORS, FLOW_DEFINITION_VERSION, FLOW_END, FLOW_MERGE_METHODS, FLOW_STAGE_KINDS, flowDefinitionSchema, flowStepsSchema, HEADERS_MAX, LONGEST_WAIT_MINUTES, savedFlowDefinitionSchema, SCRIPT_LANGUAGES, SCRIPT_NAME, sortKeyOf, SURE_AT_MAX, SURE_AT_MIN, ZONE_ID, } from "./contracts/flow.js";
@@ -869,7 +870,7 @@ export function flowTerms(definition, previous) {
         if (stage.kind === "task" && stage.planning !== "auto")
             lines.push(stage.planning === "required" ? "Plans first." : "Builds without a plan.");
         if (stage.kind === "task" && stage.repo !== undefined)
-            lines.push(`Builds in another project: ${stage.repo}`);
+            lines.push(`Builds in project: ${projectName(stage.repo)}`);
         if (stage.kind === "draft")
             lines.push(`Claude writes: ${plain(stage.instructions ?? "")}`, `Then → ${to(stage.next)}`);
         else if (stage.kind === "request" && stage.request !== undefined) {

package/dist/guides.js

@@ -65,7 +65,7 @@ ${AUTHORITY_LINE}
   terminal, answer from the \`console\` guide (\`skills get console\`):
   exact screens, exact verbs, and which acts are theirs alone.
 - Take work as a registered runner: \`claim <id> --runner <name> --token
-  <t>\` → \`heartbeat <lease>\` while working → \`release <lease>\`. A
+  <t>\` → \`heartbeat <lease>\` while working → \`worker release <lease>\`. A
   replayed claim (same \`--key\`) answers with \`replayed: true\` — do not
   repeat first-time side effects on it.
 - Respect refusals — each is an ANSWER, never an error to retry blindly:
@@ -189,7 +189,7 @@ registers it; the token is shown once). Work moves through leases:
   not repeat first-time side effects.
 - \`heartbeat <lease>\` while working — it extends the lease. A lease
   that runs out is reaped and the task returns to the queue.
-- \`release <lease>\` when done. If the answer is \`fenced\`, STOP: a newer
+- \`worker release <lease>\` when done. If the answer is \`fenced\`, STOP: a newer
   lease superseded yours and the work is no longer yours — do not write,
   commit, or report anything further for it.
 - \`reap\` releases every expired lease (safe to run any time).
@@ -416,7 +416,112 @@ and crew agent reads from it before working:
   and its date, and prefer the newest active decision.
 `,
 };
-export const GUIDES = [operating, runner, steering, externalWork, console_, knowledge];
+const release = {
+    name: "release",
+    title: "Releasing Toolroll itself",
+    oneLiner: "toolroll release <branch>: one command from a gated commit to npm and Homebrew; the owner's approval is the only human step",
+    content: `# Releasing Toolroll itself
+
+${AUTHORITY_LINE}
+
+\`toolroll release <branch> --repo <gate checkout>\` runs the whole release
+of a pushed branch. The owner approving the release scope is the only
+step that needs a person; the rest runs on its own, each waiting step
+with a time limit.
+
+## Before you start
+
+- The branch is pushed, with an open pull request into main.
+- package.json has the new version, and the lead wrote its CHANGELOG.md
+  entry (\`## <version>\`). No tag or npm package has that version yet.
+- \`gh\` is signed in, the console, worker and both CLI names
+  (\`toolroll\`, \`standing-orders\`) run one build, and the gate checkout
+  is a clone whose origin is the GitHub repository. Credentials are never
+  asked for in chat or written to the release journal.
+
+## What it does, in order
+
+1. **gate**: files task \`release-<version>-<sha7>\` pinned to the
+   branch's exact commit with \`--checks full\`, regardless of the project's default.
+2. **approval**: waits for the owner to approve that exact scope
+   (\`toolroll task approve <id> --digest <d>\`, or the console). A
+   mode, an AI teammate or the lead approving it stops the release: the
+   yes must come from an active account with the approver role. Its standing
+   is checked again before completion and deployment.
+3. **check**: requires a sealed, passing **Full** check on that commit.
+   Quick passes and Off checks are refused. Failures stay visible; nothing reruns them.
+4. **complete**: marks that exact result Complete.
+5. **quiet**: waits until nothing is building.
+6. **deploy**: the candidate's own deployment
+   (\`scripts/deploy-browser.mjs\` from the builder's checkout): drain,
+   backup, rehearsal, swap, health. The staging path is saved before it
+   starts, and the runtime its final JSON names is kept. It goes on only
+   when the console and worker run that runtime and it records the gated
+   commit; matching versions alone do not count.
+7. **link**: points \`toolroll\` and \`standing-orders\` at
+   \`<runtime>/bin.js\`, each link replaced whole. Where they pointed is
+   saved first; if either name doesn't answer as the new build, both go
+   back. It goes on only when the console, worker and both names run the
+   gated commit. A rerun relinks without deploying again.
+8. **ci**: waits for every pull-request check on the gated commit:
+   Ubuntu on Node 22 and 24, Linux and Windows containment. Pending,
+   missing, skipped, cancelled or failed never merges.
+9. **merge**: squash-merges with the head pinned to the gated commit,
+   once main has nothing the branch lacks, then deletes the remote branch
+   only if its head still matches. A resumed merge also finishes this cleanup.
+10. **tree**: main's merge commit must have exactly the gated tree, or
+   nothing is tagged.
+11. **tag**: pushes \`v<version>\` on that merge commit. In publish.yml,
+    macOS Node 22 and 24 must both pass before npm and GitHub publication.
+    macos.yml keeps the nightly matrix.
+12. **publish**: waits for npm, the GitHub release and the tag's macOS
+    and publish checks.
+13. **homebrew**: updates the tap's formula, waits for checks to register
+    and every registered check to pass, then merges. No checks means waiting,
+    within the Homebrew time limit; a failed or skipped check stops the release.
+
+## When it stops
+
+A time limit, a failure or Ctrl-C ends with the step and the reason,
+and the command to continue: the same \`toolroll release <branch> --repo
+<checkout>\`. Its journal (\`releases/<branch>.json\` in the state folder,
+private) records what each step was about to do before it does it, so a
+rerun finds the task, completion, merge, tag and tap change already made
+instead of making them twice.
+
+- \`drift\`: the branch or pull request moved after gating. Release the
+  new commit with \`--new\` (refused once merging began).
+- \`check-level\`: the result has no Full check. File the gate with Full
+  checks and obtain a passing result; Quick and Off cannot authorize a release.
+- \`check-failed\`: fix the branch and release the new commit with \`--new\`.
+- \`ci-failed\`: fix the failed GitHub check, then rerun. Nothing was merged.
+- \`publish-failed\` / \`homebrew-failed\`: fix the failed workflow before
+  resuming. A failed tag check cannot finish publication or update Homebrew.
+- \`base-moved\`: main gained a commit the branch doesn't have, so the
+  merge wouldn't be the checked tree. Nothing was merged: update the
+  branch and release it with \`--new\`.
+- \`tree-mismatch\`: main changed what was checked. Nothing was tagged;
+  the deployed build stays.
+- \`timeout\`: rerun to keep waiting; \`--limit <step>=<minutes>\`
+  changes one step's limit.
+- An interrupted deployment resumes with \`deploy-browser.mjs --stage <saved
+  path> --phase recover\` before any new attempt, including \`--new\`.
+  Failed recovery stops there; the original deployment journal remains available.
+- \`link\`: a CLI name didn't answer as the new build, so both were put
+  back. The service already runs the new build; fix the name and rerun.
+- \`gate-held\`: the deployment stopped before its swap but left new work
+  paused, and its journal can't say so by itself (typically killed while
+  preparing). \`toolroll release --release-gate <id>\` shows the proof that
+  the swap never began: the pause is that deployment's, its journal is
+  before the swap, the database schema, service definition and running
+  service are still the previous build's, and no deployment is running.
+  Add \`--yes\` to lift that one pause, then rerun the release. Missing or
+  contradicting evidence refuses and leaves the pause in place.
+
+A runner's lease is returned with \`toolroll worker release <lease>\`.
+`,
+};
+export const GUIDES = [operating, runner, steering, externalWork, console_, knowledge, release];
 export function guideNamed(name) {
     return GUIDES.find(one => one.name === name) ?? null;
 }