toolroll 0.9.53 → 0.9.55

package/dist/control-ui.js

@@ -1,9 +1,7 @@
+/** Shared setup views over the existing project configuration and approval doors. */
+import { html, joinHtml, postForm } from "./html.js";
 import { ASSISTANTS } from "./setup-guide.js";
 import { openRouterPicker } from "./openrouter-models.js";
-const escape = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
-export function hiddenFields(values) {
-    return Object.entries(values).map(([name, value]) => `<input type="hidden" name="${escape(name)}" value="${escape(value)}">`).join("");
-}
 export function connectionWords(connection) {
     return {
         connected: "Connected", "signed-out": "Not signed in", "not-installed": "CLI not installed",
@@ -12,42 +10,19 @@ export function connectionWords(connection) {
 }
 export function connectionHtml(provider, connection, task = "") {
     const query = new URLSearchParams({ provider, ...(task ? { task } : {}) });
-    return `<div class="card assistant-account"><p><strong>${escape(ASSISTANTS[provider].name)} · ${connectionWords(connection)}</strong></p>` +
-        `<p class="meta">${[connection.email, connection.plan, connection.method].filter(Boolean).map(one => escape(one)).join(" · ")}</p>` +
-        `<p class="meta">Checked ${escape(new Date(connection.checkedAt).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", timeZoneName: "short" }))} on the computer running this console. Sign-in does not prove model access or remaining quota.</p>` +
-        `<a class="button-link" href="/control/connection?${escape(query.toString())}">${connection.state === "connected" ? "Manage connection" : "Connect account"}</a> · ` +
-        `<a href="/control?${escape(query.toString())}&amp;check-connection=1">Check again</a></div>`;
+    return html `<div class="card assistant-account"><p><strong>${ASSISTANTS[provider].name} · ${connectionWords(connection)}</strong></p><p class="meta">${[connection.email, connection.plan, connection.method].filter(Boolean).join(" · ")}</p><p class="meta">Checked ${new Date(connection.checkedAt).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", timeZoneName: "short" })} on the computer running this console. Sign-in does not prove model access or remaining quota.</p><a class="button-link" href="/control/connection?${query.toString()}">${connection.state === "connected" ? "Manage connection" : "Connect account"}</a> · <a href="/control?${query.toString()}&amp;check-connection=1">Check again</a></div>`;
 }
 export function controlSetupHtml(data) {
     const { provider, inputs, task = "" } = data;
     const query = new URLSearchParams({ provider, ...(task ? { task } : {}) });
     const model = data.catalog !== null
         ? openRouterPicker(data.catalog, inputs.model || null, `/control?${query}&refresh-models=1`)
-        : `<label>Model<input type="text" name="model" value="${escape(inputs.model)}" list="setup-models" required autocomplete="off" placeholder="Exact model id or supported alias"></label>` +
-            `<datalist id="setup-models">${data.models.map(one => `<option value="${escape(one.value)}">${escape(one.label)}</option>`).join("")}</datalist>`;
-    return `<h1>Project setup</h1><p>${escape(data.repo)}</p>` +
-        `<p class="meta">Choose the default builder for new tasks and the preparation command for this project.</p>` +
-        `<nav class="assistant-picker row" aria-label="Choose provider">${Object.keys(ASSISTANTS).map(id => `<a class="button-link" href="/control?${escape(new URLSearchParams({ provider: id, ...(task ? { task } : {}) }).toString())}"${id === provider ? ' aria-current="page"' : ""}>${ASSISTANTS[id].name}</a>`).join(" ")}</nav>` +
-        connectionHtml(provider, data.connection, task) +
-        `<form method="post" action="/control/setup-preview" class="card">${hiddenFields({ csrf: data.csrf, repo: data.repo, provider, task })}` + model +
-        `<details class="setup-advanced"><summary>Project preparation</summary>` +
-        (data.preparation === null ? "" : `<p class="meta">Suggested from ${escape(data.preparation.evidence)}: ${escape(data.preparation.label)} — <code>${escape(data.preparation.command)}</code>. Review before approving.</p>`) +
-        `<label>Preparation command<textarea name="command" rows="2" maxlength="2000">${escape(inputs.command)}</textarea></label>` +
-        `<label>Preparation timeout in seconds<input name="seconds" type="number" min="1" max="3600" value="${escape(inputs.seconds)}" required></label>` +
-        `<p class="meta">Preparation applies to subsequent runs, including already approved tasks. Saving setup does not execute it.</p></details>` +
-        `<button type="submit">Review project setup</button></form>` +
-        `<section class="card"><h2>Agent instructions</h2>` +
-        (data.instructions.message ? `<p>${escape(data.instructions.message)}</p>` : data.instructions.installed ? `<p>Toolroll instructions are installed.</p>` :
-            `<p>Give the agent the project's Toolroll handoff instructions.</p><form method="post" action="/control/instructions-preview">${hiddenFields({ csrf: data.csrf, repo: data.repo })}<button>Review instructions</button></form>`) +
-        `</section><p><a href="/fleet">Configure planning, repair, and review agents</a> · <a href="/tasks/new">Describe a task</a></p>`;
+        : html `<label>Model<input type="text" name="model" value="${inputs.model}" list="setup-models" required autocomplete="off" placeholder="Exact model id or supported alias"></label><datalist id="setup-models">${data.models.map(one => html `<option value="${one.value}">${one.label}</option>`)}</datalist>`;
+    return html `<h1>Project setup</h1><p>${data.repo}</p><p class="meta">Choose the default builder for new tasks and the preparation command for this project.</p><nav class="assistant-picker row" aria-label="Choose provider">${joinHtml(Object.keys(ASSISTANTS).map(id => html `<a class="button-link" href="/control?${new URLSearchParams({ provider: id, ...(task ? { task } : {}) }).toString()}"${id === provider ? html ` aria-current="page"` : ""}>${ASSISTANTS[id].name}</a>`), " ")}</nav>${connectionHtml(provider, data.connection, task)}${postForm("/control/setup-preview", html `${model}<details class="setup-advanced"><summary>Project preparation</summary>${data.preparation === null ? "" : html `<p class="meta">Suggested from ${data.preparation.evidence}: ${data.preparation.label} — <code>${data.preparation.command}</code>. Review before approving.</p>`}<label>Preparation command<textarea name="command" rows="2" maxlength="2000">${inputs.command}</textarea></label><label>Preparation timeout in seconds<input name="seconds" type="number" min="1" max="3600" value="${inputs.seconds}" required></label><p class="meta">Preparation applies to subsequent runs, including already approved tasks. Saving setup does not execute it.</p></details><button type="submit">Review project setup</button>`, { attrs: { class: "card" }, hidden: { repo: data.repo, provider, task } })}<section class="card"><h2>Agent instructions</h2>${data.instructions.message ? html `<p>${data.instructions.message}</p>` : data.instructions.installed ? html `<p>Toolroll instructions are installed.</p>` :
+        html `<p>Give the agent the project's Toolroll handoff instructions.</p>${postForm("/control/instructions-preview", html `<button>Review instructions</button>`, { hidden: { repo: data.repo } })}`}</section><p><a href="/fleet">Configure planning, repair, and review agents</a> · <a href="/tasks/new">Describe a task</a></p>`;
 }
+/** `fields` may still carry the session's csrf (a caller's habit): postForm writes the one CSRF field. */
 export function setupPreviewHtml(inputs, fields) {
-    return `<h1>Approve project setup</h1><div class="card"><p>${escape(fields.repo ?? "")}</p>` +
-        `<p><strong>Builder:</strong> ${escape(inputs.provider)} · ${escape(inputs.model)}</p>` +
-        `<p><strong>Preparation:</strong></p><pre class="recap">${escape(inputs.command || "No preparation command")}</pre>` +
-        `<p>Preparation timeout: ${escape(inputs.seconds)} seconds.</p>` +
-        `<p>The builder default applies to new tasks. Preparation applies to subsequent runs, including already approved tasks. Existing signed task settings and verification rules remain in force.</p>` +
-        `<form method="post" action="/control/setup-approve">${hiddenFields({ ...fields, ...inputs })}` +
-        `<label>Your password<input type="password" name="token" autocomplete="current-password" required></label>` +
-        `<button>Approve project setup</button></form></div>`;
+    const { csrf: _csrf, ...rest } = fields;
+    return html `<h1>Approve project setup</h1><div class="card"><p>${fields.repo ?? ""}</p><p><strong>Builder:</strong> ${inputs.provider} · ${inputs.model}</p><p><strong>Preparation:</strong></p><pre class="recap">${inputs.command || "No preparation command"}</pre><p>Preparation timeout: ${inputs.seconds} seconds.</p><p>The builder default applies to new tasks. Preparation applies to subsequent runs, including already approved tasks. Existing signed task settings and verification rules remain in force.</p>${postForm("/control/setup-approve", html `<label>Your password<input type="password" name="token" autocomplete="current-password" required></label><button>Approve project setup</button>`, { hidden: { ...rest, ...inputs } })}</div>`;
 }

package/dist/credentials-ui.d.ts

@@ -4,6 +4,7 @@
  * can see and end everyone's.
  */
 import type { ApiTokenRow, WebSessionRow } from "./store.js";
+import { type Html } from "./html.js";
 export declare const CREDENTIALS_CSS: string;
 /** "Chrome on macOS", from a user agent, for a person to recognise a session. */
 export declare function deviceWords(agent: string | null): string;
@@ -19,12 +20,12 @@ export type CredentialsView = {
     /** Request limits (request-budget-ui.ts): words for each token's line, and the operator's disclosure. */
     limits?: {
         note: (token: ApiTokenRow) => string;
-        section: string;
+        section: Html;
     };
 };
-export declare function credentialsHtml(view: CredentialsView, csrf: string, notice: {
+export declare function credentialsHtml(view: CredentialsView, notice: {
     said?: string | null;
     problem?: string | null;
-}): string;
+}): Html;
 /** The token, once: a focused page with no script. */
-export declare function tokenShownHtml(name: string, token: string, access: "read" | "act", expiresAt: string): string;
+export declare function tokenShownHtml(name: string, token: string, access: "read" | "act", expiresAt: string): Html;

package/dist/credentials-ui.js

@@ -1,6 +1,6 @@
 import { daysLeft, expiryNoticeDue, TOKEN_DAYS, tokenLive } from "./api-tokens.js";
 import { projectName } from "./project.js";
-const e = (value) => String(value ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+import { html, postForm } from "./html.js";
 export const CREDENTIALS_CSS = `.credentials{max-width:820px;min-width:0}.credentials .card{padding:14px 16px;margin:12px 0}.credentials h2{font-size:1.05rem;margin:0 0 8px}` +
     `.credentials .rows{display:grid;gap:0;border:1px solid var(--so-line);border-radius:10px;overflow:hidden}.credentials .row-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--so-line)}` +
     `.credentials .row-item:last-child{border-bottom:0}.credentials .row-item p{margin:0}.credentials .row-item .meta{font-size:.85rem}.credentials form{margin:0}.credentials button{min-height:40px;white-space:nowrap}` +
@@ -22,39 +22,38 @@ const when = (value, now) => {
     const minutes = Math.round((now - at) / 60_000);
     return minutes < 1 ? "just now" : minutes < 60 ? `${minutes} min ago` : minutes < 60 * 24 ? `${Math.round(minutes / 60)} h ago` : new Date(at).toISOString().slice(0, 10);
 };
-export function credentialsHtml(view, csrf, notice) {
-    const hidden = (fields) => Object.entries(fields).map(([k, v]) => `<input type="hidden" name="${e(k)}" value="${e(v)}">`).join("");
-    const post = (fields, label, style = "secondary") => `<form method="post" action="/settings/sessions">${hidden({ csrf, ...fields, ...(view.everyone ? { everyone: "1" } : {}) })}<button class="${style}">${label}</button></form>`;
-    const note = notice.problem ? `<p class="problem" role="alert">${e(notice.problem)}</p>` : notice.said ? `<p role="status">${e(notice.said)}</p>` : "";
-    const toggle = view.canSeeEveryone ? `<p class="meta"><a href="/settings/sessions${view.everyone ? "" : "?everyone=1"}">${view.everyone ? "Show only mine" : "Show everyone's"}</a></p>` : "";
-    const sessions = view.sessions.length === 0 ? `<p class="meta">No one else is signed in.</p>` : `<div class="rows">${view.sessions.map(one => `<div class="row-item" data-session="${e(one.idHash.slice(0, 12))}"><div><p>${view.everyone ? `<strong>${e(one.account)}</strong> · ` : ""}${e(deviceWords(one.agent))}${one.here ? `<span class="badge-here">This browser</span>` : ""}</p>` +
-        `<p class="meta">${one.ssoAt === null ? "Password" : "Identity provider"} · ${e(one.address ?? "unknown address")} · active ${e(when(one.lastSeen, view.now))} · signed in ${e(when(one.createdAt, view.now))}</p></div>` +
-        `${one.here ? "" : post({ action: "end-session", session: one.idHash }, "Sign out")}</div>`).join("")}</div>`;
+export function credentialsHtml(view, notice) {
+    const post = (fields, label, style = "secondary") => postForm("/settings/sessions", html `<button class="${style}">${label}</button>`, { hidden: { ...fields, ...(view.everyone ? { everyone: "1" } : {}) } });
+    const note = notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : notice.said ? html `<p role="status">${notice.said}</p>` : "";
+    const toggle = view.canSeeEveryone ? html `<p class="meta"><a href="/settings/sessions${view.everyone ? "" : "?everyone=1"}">${view.everyone ? "Show only mine" : "Show everyone's"}</a></p>` : "";
+    const sessions = view.sessions.length === 0 ? html `<p class="meta">No one else is signed in.</p>` : html `<div class="rows">${view.sessions.map(one => html `<div class="row-item" data-session="${one.idHash.slice(0, 12)}"><div><p>${view.everyone ? html `<strong>${one.account}</strong> · ` : ""}${deviceWords(one.agent)}${one.here ? html `<span class="badge-here">This browser</span>` : ""}</p>\
+<p class="meta">${one.ssoAt === null ? "Password" : "Identity provider"} · ${one.address ?? "unknown address"} · active ${when(one.lastSeen, view.now)} · signed in ${when(one.createdAt, view.now)}</p></div>\
+${one.here ? "" : post({ action: "end-session", session: one.idHash }, "Sign out")}</div>`)}</div>`;
     const others = view.sessions.filter(one => !one.here && one.account === view.who).length;
     const endOthers = others > 0 && !view.everyone ? post({ action: "end-others" }, `Sign out everywhere else (${others})`) : "";
     const live = view.tokens.filter(one => tokenLive(one, view.now));
     // v111: its projects, and one state: when it stops (soon, said once and marked) or, once replaced, when it ends.
     const ends = (one) => {
         if (one.replacedBy !== null && one.overlapUntil !== null)
-            return `<span class="soon">Replaced · stops ${e(one.overlapUntil.slice(11, 16))} UTC</span>`;
+            return html `<span class="soon">Replaced · stops ${one.overlapUntil.slice(11, 16)} UTC</span>`;
         if (expiryNoticeDue(one, view.now) === null)
-            return `Expires ${e(one.expiresAt.slice(0, 10))}`;
+            return html `Expires ${one.expiresAt.slice(0, 10)}`;
         const days = daysLeft(one.expiresAt, view.now);
-        return `<span class="soon">Expires ${days <= 1 ? "within a day" : `in ${days} days`}</span>`;
+        return html `<span class="soon">Expires ${days <= 1 ? "within a day" : `in ${days} days`}</span>`;
     };
-    const scope = (one) => one.projects === null ? "All projects" : one.projects.length === 0 ? "No projects" : one.projects.map(repo => e(projectName(repo))).join(", ");
-    const tokens = live.length === 0 ? `<p class="meta">No API tokens.</p>` : `<div class="rows">${live.map(one => `<div class="row-item" data-token="${e(one.id)}"><div><p>${view.everyone ? `<strong>${e(one.account)}</strong> · ` : ""}${e(one.name)} · ${one.access === "act" ? "Can act" : "Read only"}</p>` +
-        `<p class="meta">${scope(one)} · ${ends(one)} · last used ${e(when(one.lastUsedAt, view.now))}${view.limits === undefined ? "" : ` · ${e(view.limits.note(one))}`}</p></div>${post({ action: "revoke-token", token: one.id }, "Revoke")}</div>`).join("")}</div>`;
-    const create = `<details class="card"><summary>New API token</summary><form method="post" action="/settings/sessions" class="create">${hidden({ csrf, action: "create-token" })}` +
-        `<label>Name<input type="text" name="name" maxlength="60" required placeholder="for example: CI"></label>` +
-        `<label>It can<select name="access"><option value="read">Read (tasks, results, the ledger)</option><option value="act">Act as you (file and manage work; never approve)</option></select></label>` +
-        `<label>Expires in<select name="days">${TOKEN_DAYS.map(days => `<option value="${days}"${days === 90 ? " selected" : ""}>${days} days</option>`).join("")}</select></label>` +
-        `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label><button>Make the token</button></form></details>`;
-    return `<section class="credentials">${note}${toggle}<h2>Signed in</h2>${sessions}${endOthers}<h2 style="margin-top:1.5rem">API tokens</h2>` +
-        `<p class="meta">For scripts and CI: send <code>Authorization: Bearer &lt;token&gt;</code>. A token can't approve anything.</p>${tokens}${view.everyone ? "" : create}${view.limits?.section ?? ""}</section>`;
+    const scope = (one) => one.projects === null ? "All projects" : one.projects.length === 0 ? "No projects" : one.projects.map(repo => projectName(repo)).join(", ");
+    const tokens = live.length === 0 ? html `<p class="meta">No API tokens.</p>` : html `<div class="rows">${live.map(one => html `<div class="row-item" data-token="${one.id}"><div><p>${view.everyone ? html `<strong>${one.account}</strong> · ` : ""}${one.name} · ${one.access === "act" ? "Can act" : "Read only"}</p>\
+<p class="meta">${scope(one)} · ${ends(one)} · last used ${when(one.lastUsedAt, view.now)}${view.limits === undefined ? "" : ` · ${view.limits.note(one)}`}</p></div>${post({ action: "revoke-token", token: one.id }, "Revoke")}</div>`)}</div>`;
+    const create = html `<details class="card"><summary>New API token</summary>${postForm("/settings/sessions", html `\
+<label>Name<input type="text" name="name" maxlength="60" required placeholder="for example: CI"></label>\
+<label>It can<select name="access"><option value="read">Read (tasks, results, the ledger)</option><option value="act">Act as you (file and manage work; never approve)</option></select></label>\
+<label>Expires in<select name="days">${TOKEN_DAYS.map(days => html `<option value="${days}"${days === 90 ? " selected" : ""}>${days} days</option>`)}</select></label>\
+<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label><button>Make the token</button>`, { attrs: { class: "create" }, hidden: { action: "create-token" } })}</details>`;
+    return html `<section class="credentials">${note}${toggle}<h2>Signed in</h2>${sessions}${endOthers}<h2 style="margin-top:1.5rem">API tokens</h2>\
+<p class="meta">For scripts and CI: send <code>Authorization: Bearer &lt;token&gt;</code>. A token can't approve anything.</p>${tokens}${view.everyone ? "" : create}${view.limits?.section ?? ""}</section>`;
 }
 /** The token, once: a focused page with no script. */
 export function tokenShownHtml(name, token, access, expiresAt) {
-    return `<h1>${e(name)}</h1><div class="card"><p>Your API token, shown once. Only a hash is kept, so copy it now.</p><p class="mono secret-value">${e(token)}</p>` +
-        `<p class="meta">${access === "act" ? "It acts as you (never approves)" : "It reads"} until ${e(expiresAt.slice(0, 10))}. Revoke it any time on Sessions &amp; tokens.</p></div><p class="meta"><a href="/settings/sessions">Back to Sessions &amp; tokens</a></p>`;
+    return html `<h1>${name}</h1><div class="card"><p>Your API token, shown once. Only a hash is kept, so copy it now.</p><p class="mono secret-value">${token}</p>\
+<p class="meta">${access === "act" ? "It acts as you (never approves)" : "It reads"} until ${expiresAt.slice(0, 10)}. Revoke it any time on Sessions &amp; tokens.</p></div><p class="meta"><a href="/settings/sessions">Back to Sessions &amp; tokens</a></p>`;
 }

package/dist/demo-chat.d.ts

@@ -1,3 +1,4 @@
+import { type Html } from "./html.js";
 import type { DemoExchange } from "./demo.js";
 /** What a finished exchange's stored result holds, read back from its evidence. */
 export type DemoResultView = {
@@ -17,14 +18,13 @@ export type DemoResultView = {
     taskHref: string;
 };
 /** The conversation itself; the live script swaps this region in place. */
-export declare function demoThreadHtml(exchanges: readonly DemoExchange[], csrf: string, resultOf: (exchange: DemoExchange) => DemoResultView | null): string;
+export declare function demoThreadHtml(exchanges: readonly DemoExchange[], resultOf: (exchange: DemoExchange) => DemoResultView | null): Html;
 export declare function demoChatHtml(input: {
     exchanges: readonly DemoExchange[];
-    csrf: string;
     version: number;
     problem: string | null;
     resultOf: (exchange: DemoExchange) => DemoResultView | null;
-}): string;
+}): Html;
 /**
  * Keeps a running build live: polls while one is working and swaps the
  * thread in place, unless the visitor is typing inside it. Enter sends.

package/dist/demo-chat.js

@@ -4,48 +4,26 @@
  * running build's progress live; without it the page still works by reload.
  */
 import { START_COMMAND } from "./first-run.js";
+import { html, postForm } from "./html.js";
 import { headlineOf } from "./task-status.js";
 const SUGGESTIONS = ["Fix the flaky refund test", "Rewrite the empty Payouts page", "Put the new invoice view behind a flag"];
-const esc = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-const hidden = (csrf) => `<input type="hidden" name="csrf" value="${esc(csrf)}">`;
-function hint(csrf) {
-    return `<section class="demo-hint" aria-label="Get started">` +
-        `<p class="demo-hint-title">Ask for something, like “fix the flaky refund test”</p>` +
-        `<form method="post" action="/chat/demo/ask" class="demo-suggestions">${hidden(csrf)}` +
-        SUGGESTIONS.map(one => `<button type="submit" name="message" value="${esc(one)}">${esc(one)}</button>`).join("") +
-        `</form></section>`;
+function hint() {
+    return html `<section class="demo-hint" aria-label="Get started"><p class="demo-hint-title">Ask for something, like “fix the flaky refund test”</p>${postForm("/chat/demo/ask", SUGGESTIONS.map(one => html `<button type="submit" name="message" value="${one}">${one}</button>`), { attrs: { class: "demo-suggestions" } })}</section>`;
 }
-function planCard(exchange, csrf) {
+function planCard(exchange) {
     const plan = exchange.plan;
     const goal = exchange.note === null ? plan.goal : `${plan.goal} Also: ${exchange.note}`;
     const actions = exchange.state === "proposed"
-        ? `<div class="demo-actions">` +
-            `<form method="post" action="/chat/demo/${exchange.id}/approve" class="approve-form">${hidden(csrf)}<button type="submit">Approve</button></form>` +
-            `<details class="demo-more"><summary>Change it</summary>` +
-            `<form method="post" action="/chat/demo/${exchange.id}/change">${hidden(csrf)}` +
-            `<label for="demo-change-${exchange.id}">What should change?</label>` +
-            `<textarea id="demo-change-${exchange.id}" name="note" rows="2" maxlength="500" required></textarea>` +
-            `<button type="submit">Update plan</button></form></details></div>`
+        ? html `<div class="demo-actions">${postForm(`/chat/demo/${exchange.id}/approve`, html `<button type="submit">Approve</button>`, { attrs: { class: "approve-form" } })}<details class="demo-more"><summary>Change it</summary>${postForm(`/chat/demo/${exchange.id}/change`, html `<label for="demo-change-${exchange.id}">What should change?</label><textarea id="demo-change-${exchange.id}" name="note" rows="2" maxlength="500" required></textarea><button type="submit">Update plan</button>`)}</details></div>`
         : exchange.state === "replaced"
-            ? `<p class="meta">Replaced by the updated plan below.</p>`
-            : `<p class="meta">Approved.</p>`;
-    return `<section class="card demo-plan" aria-label="Plan">` +
-        `<p class="demo-kicker">Plan · ${esc(plan.project)}</p>` +
-        `<h2>${esc(plan.title)}</h2>` +
-        `<p>${esc(goal)}</p>` +
-        `<h3>Boundaries</h3><ul>${plan.boundaries.map(one => `<li>${esc(one)}</li>`).join("")}</ul>` +
-        `<h3>Checks</h3><ul>${plan.checks.map(one => `<li>${esc(one)}</li>`).join("")}</ul>` +
-        actions + `</section>`;
+            ? html `<p class="meta">Replaced by the updated plan below.</p>`
+            : html `<p class="meta">Approved.</p>`;
+    return html `<section class="card demo-plan" aria-label="Plan"><p class="demo-kicker">Plan · ${plan.project}</p><h2>${plan.title}</h2><p>${goal}</p><h3>Boundaries</h3><ul>${plan.boundaries.map(one => html `<li>${one}</li>`)}</ul><h3>Checks</h3><ul>${plan.checks.map(one => html `<li>${one}</li>`)}</ul>${actions}</section>`;
 }
 function buildCard(exchange) {
     const stages = [["planning", "Planning"], ["building", "Building"], ["checking", "Running checks"]];
     const at = stages.findIndex(([key]) => key === exchange.stage);
-    return `<section class="card demo-build" id="demo-${exchange.id}-work" aria-label="Build" aria-busy="true">` +
-        `<p class="demo-kicker">${esc(exchange.plan.project)}</p>` +
-        `<h2>${esc(stages[Math.max(0, at)][1])}…</h2>` +
-        `<ol class="demo-steps">${stages.map(([, label], index) => `<li class="${index < at ? "done" : index === at ? "now" : ""}"${index === at ? ` aria-current="step"` : ""}>${esc(label)}</li>`).join("")}</ol>` +
-        (exchange.progress === null ? "" : `<p class="meta demo-progress">${esc(exchange.progress)}</p>`) +
-        `</section>`;
+    return html `<section class="card demo-build" id="demo-${exchange.id}-work" aria-label="Build" aria-busy="true"><p class="demo-kicker">${exchange.plan.project}</p><h2>${stages[Math.max(0, at)][1]}…</h2><ol class="demo-steps">${stages.map(([, label], index) => html `<li class="${index < at ? "done" : index === at ? "now" : ""}"${index === at ? html ` aria-current="step"` : ""}>${label}</li>`)}</ol>${exchange.progress === null ? "" : html `<p class="meta demo-progress">${exchange.progress}</p>`}</section>`;
 }
 function diffHtml(diff) {
     return diff.replace(/\n$/, "").split("\n").map(line => {
@@ -53,71 +31,46 @@ function diffHtml(diff) {
             : line.startsWith("+++") || line.startsWith("---") ? "meta"
                 : line.startsWith("@@") ? "hunk"
                     : line.startsWith("+") ? "add" : line.startsWith("-") ? "del" : "ctx";
-        return `<span class="demo-diff-${kind}">${esc(line) || " "}</span>`;
-    }).join("");
+        return html `<span class="demo-diff-${kind}">${line || " "}</span>`;
+    });
 }
-function resultCard(exchange, csrf, result) {
+function resultCard(exchange, result) {
     if (result === null)
-        return `<section class="card demo-result"><p class="meta">This result's saved evidence is unavailable.</p></section>`;
+        return html `<section class="card demo-result"><p class="meta">This result's saved evidence is unavailable.</p></section>`;
     const passed = result.checks.status === "passed";
     // The shared headline (task-status.ts): the same words as every real task.
     const headline = headlineOf({ stage: exchange.state === "complete" ? "complete" : exchange.state === "sent-back" ? "building" : "finished",
         checks: { status: passed ? "passed" : "failed", exitCode: null, head: null } });
-    const status = `<span class="badge${headline === "Complete" ? " demo-complete" : headline === "Ready for review" ? " demo-ready" : ""}" data-headline="${headline}">${headline}</span>`;
-    const summary = `${result.files} file${result.files === 1 ? "" : "s"} changed · +${result.additions} −${result.deletions} · ` +
-        `<span class="${passed ? "demo-pass" : "demo-fail"}">${esc(result.checks.detail)}</span>`;
+    const status = html `<span class="badge${headline === "Complete" ? " demo-complete" : headline === "Ready for review" ? " demo-ready" : ""}" data-headline="${headline}">${headline}</span>`;
+    const summary = html `${result.files} file${result.files === 1 ? "" : "s"} changed · +${result.additions} −${result.deletions} · <span class="${passed ? "demo-pass" : "demo-fail"}">${result.checks.detail}</span>`;
     const actions = exchange.state === "ready"
-        ? `<div class="demo-actions">` +
-            `<form method="post" action="/chat/demo/${exchange.id}/complete">${hidden(csrf)}<button type="submit" class="demo-primary">Complete</button></form>` +
-            `<details class="demo-more"><summary>Request changes</summary>` +
-            `<form method="post" action="/chat/demo/${exchange.id}/revise">${hidden(csrf)}` +
-            `<label for="demo-revise-${exchange.id}">What should change?</label>` +
-            `<textarea id="demo-revise-${exchange.id}" name="note" rows="2" maxlength="500" required></textarea>` +
-            `<button type="submit">Send back</button></form></details></div>`
-        : `<p class="meta"><a href="${esc(result.taskHref)}">Open in Tasks</a></p>`;
-    return `<section class="card demo-result" id="demo-${exchange.id}-work" aria-label="Result">` +
-        `<p class="demo-state">${status}<span class="meta">${esc(exchange.plan.project)}</span></p>` +
-        `<h2>${esc(exchange.plan.title)}</h2>` +
-        `<p>${esc(exchange.plan.conclusion)}</p>` +
-        `<p class="meta">${summary}</p>` +
-        actions +
-        (result.diff === null ? "" : `<details class="demo-evidence"${exchange.state === "ready" ? " open" : ""}><summary>Changes</summary><pre class="demo-diff">${diffHtml(result.diff)}</pre></details>`) +
-        (result.checkLog === null ? "" : `<details class="demo-evidence"><summary>Check log</summary><pre class="demo-log">${esc(result.checkLog)}</pre></details>`) +
-        (result.screenshot === null ? "" : `<details class="demo-evidence"><summary>Screenshot</summary><figure><img src="${esc(result.screenshot.href)}" alt="${esc(result.screenshot.caption)}" width="960" height="600"><figcaption class="meta">${esc(result.screenshot.caption)}</figcaption></figure></details>`) +
-        `</section>`;
+        ? html `<div class="demo-actions">${postForm(`/chat/demo/${exchange.id}/complete`, html `<button type="submit" class="demo-primary">Complete</button>`)}<details class="demo-more"><summary>Request changes</summary>${postForm(`/chat/demo/${exchange.id}/revise`, html `<label for="demo-revise-${exchange.id}">What should change?</label><textarea id="demo-revise-${exchange.id}" name="note" rows="2" maxlength="500" required></textarea><button type="submit">Send back</button>`)}</details></div>`
+        : html `<p class="meta"><a href="${result.taskHref}">Open in Tasks</a></p>`;
+    return html `<section class="card demo-result" id="demo-${exchange.id}-work" aria-label="Result"><p class="demo-state">${status}<span class="meta">${exchange.plan.project}</span></p><h2>${exchange.plan.title}</h2><p>${exchange.plan.conclusion}</p><p class="meta">${summary}</p>${actions}${result.diff === null ? "" : html `<details class="demo-evidence"${exchange.state === "ready" ? html ` open` : ""}><summary>Changes</summary><pre class="demo-diff">${diffHtml(result.diff)}</pre></details>`}${result.checkLog === null ? "" : html `<details class="demo-evidence"><summary>Check log</summary><pre class="demo-log">${result.checkLog}</pre></details>`}${result.screenshot === null ? "" : html `<details class="demo-evidence"><summary>Screenshot</summary><figure><img src="${result.screenshot.href}" alt="${result.screenshot.caption}" width="960" height="600"><figcaption class="meta">${result.screenshot.caption}</figcaption></figure></details>`}</section>`;
 }
 /** The conversation itself; the live script swaps this region in place. */
-export function demoThreadHtml(exchanges, csrf, resultOf) {
+export function demoThreadHtml(exchanges, resultOf) {
     if (exchanges.length === 0)
-        return hint(csrf);
-    return exchanges.map(exchange => {
+        return hint();
+    return html `${exchanges.map(exchange => {
         const parts = [
-            `<div class="demo-said demo-you"><p>${esc(exchange.asked)}</p></div>`,
-            `<div class="demo-said demo-lead"><p class="demo-who">Lead</p><p>${esc(exchange.reply)}</p></div>`,
-            planCard(exchange, csrf),
+            html `<div class="demo-said demo-you"><p>${exchange.asked}</p></div>`,
+            html `<div class="demo-said demo-lead"><p class="demo-who">Lead</p><p>${exchange.reply}</p></div>`,
+            planCard(exchange),
         ];
         if (exchange.state === "working")
             parts.push(buildCard(exchange));
         if (exchange.state === "ready" || exchange.state === "complete" || exchange.state === "sent-back")
-            parts.push(resultCard(exchange, csrf, resultOf(exchange)));
+            parts.push(resultCard(exchange, resultOf(exchange)));
         if (exchange.state === "complete") {
-            parts.push(`<div class="demo-said demo-lead"><p class="demo-who">Lead</p><p>Done. That's the whole loop: ask, approve, Ready, Complete. Ask for something else whenever you like.</p></div>`, `<section class="card demo-handoff" data-demo-handoff aria-label="Your own project"><h2>Now try it on your own project</h2>` +
-                `<p>In your repository's folder, run:</p><pre class="demo-command"><code>${esc(START_COMMAND)}</code></pre>` +
-                `<p class="meta">It opens in your browser, already signed in.</p></section>`);
+            parts.push(html `<div class="demo-said demo-lead"><p class="demo-who">Lead</p><p>Done. That's the whole loop: ask, approve, Ready, Complete. Ask for something else whenever you like.</p></div>`, html `<section class="card demo-handoff" data-demo-handoff aria-label="Your own project"><h2>Now try it on your own project</h2><p>In your repository's folder, run:</p><pre class="demo-command"><code>${START_COMMAND}</code></pre><p class="meta">It opens in your browser, already signed in.</p></section>`);
         }
-        return `<article class="demo-turn" id="demo-${exchange.id}">${parts.join("")}</article>`;
-    }).join("");
+        return html `<article class="demo-turn" id="demo-${exchange.id}">${parts}</article>`;
+    })}`;
 }
 export function demoChatHtml(input) {
     const working = input.exchanges.some(one => one.state === "working");
-    return `<div class="demo-chat">` +
-        (input.problem === null ? "" : `<p class="problem" role="alert">${esc(input.problem)}</p>`) +
-        `<div id="demo-thread" class="demo-thread" aria-live="polite" data-version="${input.version}" data-working="${working ? "1" : "0"}">` +
-        demoThreadHtml(input.exchanges, input.csrf, input.resultOf) + `</div>` +
-        `<form method="post" action="/chat/demo/ask" class="demo-composer">${hidden(input.csrf)}` +
-        `<label for="demo-message" class="so-sr-only">Message the lead</label>` +
-        `<textarea id="demo-message" name="message" rows="2" maxlength="500" placeholder="Ask the lead for a change" required></textarea>` +
-        `<button type="submit" class="demo-primary">Send</button></form></div>`;
+    return html `<div class="demo-chat">${input.problem === null ? "" : html `<p class="problem" role="alert">${input.problem}</p>`}<div id="demo-thread" class="demo-thread" aria-live="polite" data-version="${input.version}" data-working="${working ? "1" : "0"}">${demoThreadHtml(input.exchanges, input.resultOf)}</div>${postForm("/chat/demo/ask", html `<label for="demo-message" class="so-sr-only">Message the lead</label><textarea id="demo-message" name="message" rows="2" maxlength="500" placeholder="Ask the lead for a change" required></textarea><button type="submit" class="demo-primary">Send</button>`, { attrs: { class: "demo-composer" } })}</div>`;
 }
 /**
  * Keeps a running build live: polls while one is working and swaps the

package/dist/discord-chat.js

@@ -190,17 +190,13 @@ export async function deliverDiscordPart(options) {
     if (!options.current() ||
         !state.owns(identity.installation, options.owner, now))
         return false;
-    const row = state
-        .prepare("SELECT p.* FROM chat_part p JOIN chat_event e ON e.id=p.event WHERE e.installation=? AND p.state='pending' AND (e.kind!='notice' OR ?=1) AND (p.next_at IS NULL OR p.next_at<=?) ORDER BY p.id LIMIT 1")
-        .get(identity.installation, options.canNotify?.() === false ? 0 : 1, now.toISOString());
+    const row = state.nextPart(identity.installation, options.canNotify?.() !== false, now);
     if (!row)
         return false;
     const event = state.event(row.event), binding = event.binding === null ? null : state.bindingById(event.binding);
     if (!binding ||
         new Date(row.created).getTime() + 86_400_000 < now.getTime()) {
-        state
-            .prepare("UPDATE chat_part SET state='dropped',problem='Delivery expired or access changed; open the saved chat' WHERE id=?")
-            .run(row.id);
+        state.dropPart(row.id, "Delivery expired or access changed; open the saved chat");
         return true;
     }
     try {
@@ -214,16 +210,16 @@ export async function deliverDiscordPart(options) {
             throw new DiscordError("Connected projects changed");
         let text = content.text, buttons = [], file;
         if (content.image && content.shot && resultShotsPruned(options.evidenceRoot, content.image.run)) {
-            state.prepare("UPDATE chat_part SET state='dropped',problem='Removed by retention' WHERE id=?").run(row.id);
+            state.dropPart(row.id, "Removed by retention");
             return true;
         }
         // A screenshot sent with a result replies to that result's message once it is placed, and waits until then.
-        const result = content.shot?.follows == null ? undefined : state.prepare("SELECT message,state,next_at FROM chat_part WHERE id=?").get(content.shot.follows);
-        if (result !== undefined && !discordId(result["message"]) && result["state"] === "pending") {
-            state.prepare("UPDATE chat_part SET next_at=? WHERE id=?").run(shotWaitsUntil(result["next_at"], now), row.id);
+        const result = content.shot?.follows == null ? null : state.part(content.shot.follows);
+        if (result !== null && !discordId(result.message) && result.state === "pending") {
+            state.holdPart(row.id, shotWaitsUntil(result.next_at, now));
             return true;
         }
-        const follows = result?.["message"];
+        const follows = result?.message;
         const thread = discordId(follows) ? String(follows) : event.thread;
         if (content.image) {
             const image = verifyResultImage(store, options.evidenceRoot, repos, content.image);
@@ -260,8 +256,7 @@ export async function deliverDiscordPart(options) {
                     preview.text.length <= 3400 &&
                     discordPlain(text).length <= 3900) {
                     buttons = state
-                        .prepare("SELECT token,phase FROM chat_action WHERE part=? AND consumed IS NULL AND expires>? ORDER BY rowid")
-                        .all(row.id, now.toISOString())
+                        .partTokens(row.id, now)
                         .map((action) => ({
                         type: 2,
                         style: action.phase === "yes" ? 4 : action.phase === "confirm" ? 1 : 2,
@@ -317,6 +312,10 @@ export async function deliverDiscordPart(options) {
                         custom_id: `so_${one.token}`,
                     }))
                     : []),
+                // A result's, plan's, failure's or pull request's own buttons (chat-decide.ts): its acts, then its links.
+                ...(content.decide?.rows.flat() ?? []).flatMap((one, index) => "token" in one
+                    ? [{ type: 2, style: index === 0 ? 1 : 2, label: one.label.slice(0, 80), custom_id: `so_${one.token}` }]
+                    : link(options.origin(), one.link)),
                 ...link(options.origin(), content.link),
                 ...(content.also ?? []).flatMap(one => link(options.origin(), one)),
             ];
@@ -355,13 +354,7 @@ export async function deliverDiscordPart(options) {
                     // Preserve the original remote attachment; never upload it again on an edit.
                     file = undefined;
                 }
-                state
-                    .prepare("UPDATE chat_part SET message=?,uploaded=? WHERE id=?")
-                    .run(target, content.image &&
-                    Array.isArray(found.attachments) &&
-                    found.attachments.length
-                    ? 1
-                    : 0, row.id);
+                state.setPartFile(row.id, null, Boolean(content.image && Array.isArray(found.attachments) && found.attachments.length), target);
             }
         }
         await channelAccess(shared, binding, session?.ceilingDigest);
@@ -396,17 +389,13 @@ export async function deliverDiscordPart(options) {
                     !answer.attachments.some((v) => object(v).filename === file.name &&
                         Number(object(v).size) === file.bytes.length))))
             throw new DiscordError("Discord did not confirm the message and file identity", 15_000, true);
-        state
-            .prepare("UPDATE chat_part SET state='sent',message=?,attempts=attempts+1,problem=NULL,next_at=NULL WHERE id=?")
-            .run(answer.id, row.id);
-        state
-            .prepare("UPDATE chat_runtime SET problem=NULL WHERE installation=? AND owner=?")
-            .run(identity.installation, options.owner);
+        state.partSent(row.id, String(answer.id), options.clock?.() ?? new Date());
+        state.setProblem(identity.installation, options.owner, null);
         return true;
     }
     catch (error) {
         if (error instanceof ChatDeliveryError && error.permanent) {
-            state.prepare("UPDATE chat_part SET state='dropped',next_at=NULL,problem=? WHERE id=?").run(error.message, row.id);
+            state.dropPart(row.id, error.message);
             return true;
         }
         // No permission to attach files here: one plain line instead of the result's screenshots.
@@ -420,18 +409,10 @@ export async function deliverDiscordPart(options) {
             : new DiscordError("Discord delivery is waiting to retry", 15_000, true);
         const until = new Date((options.clock?.() ?? new Date()).getTime() +
             Math.max(problem.retryMs, [5000, 15000, 60000, 300000][Math.min(row.attempts, 3)])).toISOString();
-        state
-            .prepare("UPDATE chat_part SET attempts=attempts+1,uncertain=uncertain+?,next_at=?,problem=? WHERE id=?")
-            .run(problem.uncertain ? 1 : 0, until, problem.message, row.id);
-        state
-            .prepare("UPDATE chat_runtime SET problem=? WHERE installation=? AND owner=?")
-            .run(problem.code === "ratelimited"
-            ? "Discord asked us to wait. Saved replies will retry."
-            : problem.message, identity.installation, options.owner);
+        state.partFailed(row.id, { problem: problem.message, until, uncertain: problem.uncertain });
+        state.setProblem(identity.installation, options.owner, problem.code === "ratelimited" ? "Discord asked us to wait. Saved replies will retry." : problem.message);
         if (problem.code === "ratelimited")
-            state
-                .prepare("UPDATE chat_runtime SET retry_at=? WHERE installation=?")
-                .run(until, identity.installation);
+            state.deferUntil(identity.installation, until);
         return true;
     }
 }

package/dist/discord-settings.d.ts

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