toolroll 0.9.54 → 0.9.55

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.9.55 — 2026-10-09
+
+- **One door per route.** Every page's access comes from one table with one
+  handler each; pages escape automatically and forms carry CSRF protection.
+- **One live stream.** It re-checks your session and project access before
+  every update.
+- **One-command release.** `toolroll release <branch>` runs a whole release
+  after your scope approval and never merges on pending or failed CI.
+
 ## 0.9.54 — 2026-10-09
 
 - **One chat core.** Telegram, Slack, Discord and Teams now share one chat

package/README.md

@@ -477,7 +477,7 @@ toolroll task block api --on schema     # api waits for schema
 toolroll ready --json                   # what could be dispatched now
 toolroll claim schema --runner builder-1 --key dispatch-schema
 toolroll heartbeat <lease>              # still working
-toolroll release <lease>                # done holding it
+toolroll worker release <lease>         # done holding it
 ```
 
 Four properties make that loop safe to run unattended.
@@ -540,9 +540,10 @@ service unit never carries it. Cron remains first-class if you prefer it —
 cron's cadence, and a stray cron tick alongside a watch is safe (ordinary
 claims settle the race), it just is not needed.
 
-An honesty note for Windows: every pull request now type-checks, builds, and
-runs the native Task Scheduler/link tests plus the core dispatch contract on
-Windows with Node 22 and 24. Approved setup and verification commands use
+An honesty note for Windows: every pull request builds Toolroll on Windows
+with Node 22 and runs the native Job Object containment tests there; the full
+suite runs on Ubuntu (Node 22 and 24), and on macOS nightly and for every
+release. Approved setup and verification commands use
 Windows' native command shell. The scheduled-task definition follows the Task
 Scheduler XML schema and every `schtasks` interaction is covered by scripted
 tests. A physical Windows install has not yet been certified; the exact

package/dist/agent-onboard.js

@@ -86,14 +86,17 @@ export function skillFingerprint(content) {
 export const RELEASED_SKILLS = [
     "6ff9b4458f332636b6c5968c416bee4770564ef0190d62ec8640e84051fb7f60", // skills install --claude-code
     "3fb6741eec6d394a0a41604cae321da05d85c74f440424b740151c131f125742", // the operator skill
+    "448fc51dc200b4d46c53bf191fd7ecee7c4f7487413bf4dbfb1f984a3b401993", // skills install --claude-code, with the release guide
 ];
 const KNOWN_SKILLS = new Set([...RELEASED_SKILLS, ...[operatorSkillContent("0.0.0"), claudeCodeSkillContent()].map(skillFingerprint)]);
-/** SHA-256 of every guide copy (console.md, operating.md, runner.md) an earlier `skills install --claude-code` wrote
+/** SHA-256 of every guide copy (console.md, operating.md, runner.md, release.md) an earlier `skills install --claude-code` wrote
  * beside SKILL.md, and of this build's. Only an exact one of these is removed: an edited copy is the person's. */
 const RELEASED_GUIDES = [
     "a5aa20f93d803fd49bbac2908e46353a4f90c95c2bb57993ee724770c28adb0b", "65fc1774c4d6dd99e71a7cfb245a61148ac74889765477ddd5066703cd28f55c", "01604f373b92de737ae7f75804c7f7f09dd690ed96a3e676be75f71358819f23",
     "1e1ee5c46c84b65c931e86c005802478415ec026b6240367e7f12a8d66d608eb", "e5270e70eb09f202980a236a0ae36ac2e1c3df91840c24d40a6a8bd4c0d47fe8", "969dd5e97b63f27dc559889a551f4392bcf289f2b47ce802338868f06e05f1c9",
     "bea301cb7b7d7711afb165b72c355ff829e6341abb75c59431c4a0a7c129b6cd",
+    "4b087ed3fdb60b8b7c56a2312a990eab1a854078592e355d852f4a4c5b13c752", "ac61340c17d780994052cd8ed9a0541f1fa64b80f95fc7e915e6899baa163caa", "a11a8576cc17a9e40ecfbf01503979298a4b003a4badffbd1dbd455b0eafde64",
+    "37518ca87fdbb54ff649289ec1893232137fd30c9db6e29cd1fc4bc9ba5e2f1a",
 ];
 const guideHash = (content) => createHash("sha256").update(content).digest("hex");
 const KNOWN_GUIDES = new Set([...RELEASED_GUIDES, ...CLAUDE_CODE_GUIDES.map(name => guideHash(claudeCodeGuideContent(name)))]);

package/dist/approval-rules-ui.d.ts

@@ -4,6 +4,7 @@
  * the identity provider); everyone else reads them. Every change is in the
  * ledger, before → after.
  */
+import { type Html } from "./html.js";
 import type { ApprovalRules } from "./approval-policy.js";
 export declare const APPROVAL_RULES_CSS: string;
 export type ApprovalRulesView = {
@@ -19,7 +20,7 @@ export type ApprovalRulesView = {
 };
 /** The rules in plain words, for anyone who can see the project. */
 export declare function rulesSummary(rules: ApprovalRules): string;
-export declare function approvalRulesHtml(view: ApprovalRulesView, csrf: string, notice: {
+export declare function approvalRulesHtml(view: ApprovalRulesView, notice: {
     said?: string | null;
     problem?: string | null;
-}): string;
+}): Html;

package/dist/approval-rules-ui.js

@@ -1,4 +1,10 @@
-const e = (value) => String(value ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+/**
+ * Settings → Approval rules (v102): a project's separation of duties. An
+ * instance operator sets them (with their password, or a fresh sign-in with
+ * the identity provider); everyone else reads them. Every change is in the
+ * ledger, before → after.
+ */
+import { html, postForm } from "./html.js";
 export const APPROVAL_RULES_CSS = `.approval-rules{max-width:720px;min-width:0}.approval-rules fieldset{border:0;padding:0;margin:18px 0 0;min-width:0}` +
     `.approval-rules legend{font-weight:600;font-size:.875rem;margin-bottom:8px}.approval-rules .choice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;margin:0 0 10px;font-weight:400}` +
     `.approval-rules .choice input{margin:.2rem 0 0}.approval-rules .choice strong{display:block;font-size:.875rem;font-weight:500}.approval-rules .choice small{display:block;color:var(--muted-foreground);font-size:.8125rem;margin-top:2px}` +
@@ -15,25 +21,14 @@ export function rulesSummary(rules) {
         parts.push(`Work touching ${rules.protectedPaths.join(", ")} is protected: two people approve it, never an AI teammate or an operating mode.`);
     return parts.length === 0 ? "No approval rules: anyone who can approve on this project can approve its work, including their own." : parts.join(" ");
 }
-export function approvalRulesHtml(view, csrf, notice) {
-    const note = notice.problem ? `<p class="problem" role="alert">${e(notice.problem)}</p>` : notice.said ? `<p role="status">${e(notice.said)}</p>` : "";
-    const changed = view.rules.updatedBy === null ? "" : ` <span class="meta">Changed by ${e(view.rules.updatedBy)} on ${e((view.rules.updatedAt ?? "").slice(0, 10))}.</span>`;
-    const current = `<p class="current">${e(rulesSummary(view.rules))}${changed}</p>`;
+export function approvalRulesHtml(view, notice) {
+    const note = notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : notice.said ? html `<p role="status">${notice.said}</p>` : "";
+    const changed = view.rules.updatedBy === null ? "" : html ` <span class="meta">Changed by ${view.rules.updatedBy} on ${(view.rules.updatedAt ?? "").slice(0, 10)}.</span>`;
+    const current = html `<p class="current">${rulesSummary(view.rules)}${changed}</p>`;
     if (!view.canChange)
-        return `<section class="approval-rules">${note}${current}<p class="meta">An instance operator sets these.</p></section>`;
+        return html `<section class="approval-rules">${note}${current}<p class="meta">An instance operator sets these.</p></section>`;
     const protect = view.rules.protectProject ? "project" : view.rules.protectedPaths.length > 0 ? "paths" : "none";
-    const radio = (value, title, hint) => `<label class="choice"><input type="radio" name="protect" value="${value}"${protect === value ? " checked" : ""}><span><strong>${title}</strong><small>${hint}</small></span></label>`;
-    const few = view.approvers < 2 ? `<p class="meta">Only ${view.approvers === 1 ? "one person" : "no one"} can approve on this project, so protected work would wait for a second approver. Add one in People first.</p>` : "";
-    return `<section class="approval-rules">${note}${current}` +
-        `<form method="post" action="/settings/approval"><input type="hidden" name="csrf" value="${e(csrf)}"><input type="hidden" name="repo" value="${e(view.repo)}">` +
-        `<fieldset><legend>Who approves</legend><label class="choice"><input type="checkbox" name="not_requester" value="1"${view.rules.notRequester ? " checked" : ""}>` +
-        `<span><strong>Someone other than the requester</strong><small>The person who filed a task, or asked for a revision, can't approve it. Operating modes stop approving their signer's own filings here.</small></span></label></fieldset>` +
-        `<fieldset><legend>Protected work</legend>` +
-        radio("none", "Nothing protected", "One approval is enough.") +
-        radio("project", "The whole project", "Every task needs two different people to approve the same scope.") +
-        radio("paths", "Only these paths", "Tasks that touch them, or don't say what they touch, need two people.") +
-        `<div class="paths"><label>Protected paths, one per line<textarea name="paths" spellcheck="false" placeholder="infra/**&#10;migrations/**">${e(view.rules.protectedPaths.join("\n"))}</textarea></label></div>` +
-        few + `</fieldset>` +
-        `<div class="step-up"><label>Your Toolroll password<input type="password" name="password" autocomplete="current-password"></label></div>` +
-        `<button type="submit">Save rules</button></form></section>`;
+    const radio = (value, title, hint) => html `<label class="choice"><input type="radio" name="protect" value="${value}"${protect === value ? html ` checked` : ""}><span><strong>${title}</strong><small>${hint}</small></span></label>`;
+    const few = view.approvers < 2 ? html `<p class="meta">Only ${view.approvers === 1 ? "one person" : "no one"} can approve on this project, so protected work would wait for a second approver. Add one in People first.</p>` : "";
+    return html `<section class="approval-rules">${note}${current}${postForm("/settings/approval", html `<fieldset><legend>Who approves</legend><label class="choice"><input type="checkbox" name="not_requester" value="1"${view.rules.notRequester ? html ` checked` : ""}><span><strong>Someone other than the requester</strong><small>The person who filed a task, or asked for a revision, can't approve it. Operating modes stop approving their signer's own filings here.</small></span></label></fieldset><fieldset><legend>Protected work</legend>${radio("none", "Nothing protected", html `One approval is enough.`)}${radio("project", "The whole project", html `Every task needs two different people to approve the same scope.`)}${radio("paths", "Only these paths", html `Tasks that touch them, or don't say what they touch, need two people.`)}<div class="paths"><label>Protected paths, one per line<textarea name="paths" spellcheck="false" placeholder="infra/**&#10;migrations/**">${view.rules.protectedPaths.join("\n")}</textarea></label></div>${few}</fieldset><div class="step-up"><label>Your Toolroll password<input type="password" name="password" autocomplete="current-password"></label></div><button type="submit">Save rules</button>`, { hidden: { repo: view.repo } })}</section>`;
 }

package/dist/assignment-ui.d.ts

@@ -4,6 +4,7 @@ import type { AssignmentSnapshot } from './assignment.js';
 import type { DisplayStatus, StatusTone, WorkStatus } from './workspace-ui.js';
 import { type AssignmentStatusOptions, type AssignmentWorkStatus } from './assignment-presentation.js';
 import { type PullRequestFact, type TaskStatus } from './task-status.js';
+import { type Html } from './html.js';
 /** The existing verified receipt reader may discover damage after a verdict
  * was saved. Keep the limitation visible without inventing another work stage. */
 export declare function assignmentWithEvidence(assignment: AssignmentSnapshot, resultStatus: DisplayStatus | null, resultRunId?: number | null): AssignmentSnapshot;
@@ -19,7 +20,7 @@ export type AssignmentAttemptRow = {
 };
 /** Every version of the assignment, oldest first, as the card lists them. */
 export declare function assignmentAttemptsOf(assignment: AssignmentSnapshot): AssignmentAttemptRow[];
-export declare function assignmentAttemptsHtml(assignment: AssignmentSnapshot): string;
+export declare function assignmentAttemptsHtml(assignment: AssignmentSnapshot): Html;
 type AssignmentCardOptions = Omit<AssignmentStatusOptions, 'links'> & {
     hideAction?: boolean;
     problem?: boolean;
@@ -61,7 +62,7 @@ export declare function assignmentCardOf(assignment: AssignmentSnapshot, options
 export declare function assignmentSummaryHtml(assignment: AssignmentSnapshot, options?: AssignmentCardOptions & {
     compact?: boolean;
     sentence?: string | undefined;
-}): string;
+}): Html;
 /** Shared assignment layout; actions remain comfortable on touch screens. */
 export declare const ASSIGNMENT_CSS = ".assignment-summary{min-width:0;overflow-wrap:anywhere}.assignment-summary .assignment-state{font-weight:600;margin:0}.assignment-summary h2.assignment-state{font-size:1.125rem;color:var(--foreground)}.assignment-summary>.assignment-attempts,.assignment-summary>.assignment-notices{border:0;box-shadow:none;padding:0;margin:.25rem 0 0;background:transparent}.assignment-summary>.button-link{margin-top:.7rem;min-height:44px}.assignment-summary>.work-action{display:inline-flex;margin-inline-start:.6rem;min-height:44px;align-items:center}.assignment-detail{margin:.55rem 0}.assignment-attempts summary,.assignment-notices summary{min-height:44px;display:list-item;align-content:center;cursor:pointer}.assignment-notices summary{font-size:.8125rem;color:var(--foreground)}.assignment-notices p{margin:.25rem 0 .5rem}.assignment-attempts ol{padding-left:1.4rem}.assignment-attempts li{margin:.4rem 0}.assignment-attempts li a{display:inline-flex;align-items:center;min-height:44px;margin-right:.7rem}.assignment-attempts li p{margin:0 0 .4rem}";
 export {};

package/dist/assignment-ui.js

@@ -2,7 +2,7 @@ import { assignmentPresentationOf, shortenedMaterialReason } from './assignment-
 import { plainReasonWords } from './proof.js';
 import { chatResultHref } from './chat-controls.js';
 import { statusDetailsHtml, statusWhyHtml } from './task-status.js';
-const escape = (value) => value.replace(/[&<>"']/g, char => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[char]);
+import { html } from './html.js';
 /** The existing verified receipt reader may discover damage after a verdict
  * was saved. Keep the limitation visible without inventing another work stage. */
 export function assignmentWithEvidence(assignment, resultStatus, resultRunId = assignment.receipt?.runId ?? null) {
@@ -58,8 +58,8 @@ export function assignmentAttemptsOf(assignment) {
 }
 export function assignmentAttemptsHtml(assignment) {
     if (assignment.attempts.length === 0)
-        return '';
-    return `<details class="assignment-attempts"><summary>Attempts <span class="meta">${assignment.attempts.length}</span></summary><ol>` + assignmentAttemptsOf(assignment).map(attempt => `<li data-attempt-task="${escape(attempt.taskId)}" data-history-version="${escape(attempt.taskId)}"><a href="${escape(attempt.href)}">${escape(attempt.label)}</a>${attempt.runId === null ? '' : ` <a href="/r/${attempt.runId}">Run #${attempt.runId}</a>`}${attempt.detail === null ? '' : `<p class="meta">${escape(attempt.detail)}</p>`}</li>`).join('') + `</ol>${assignment.owner === null ? '' : `<p class="meta">Lead: ${escape(assignment.owner.label)}${assignment.owner.active ? '' : ' · access ended'}</p>`}<p class="work-meta work-id">Task <span class="mono">${escape(assignment.rootId)}</span></p></details>`;
+        return html ``;
+    return html `<details class="assignment-attempts"><summary>Attempts <span class="meta">${assignment.attempts.length}</span></summary><ol>${assignmentAttemptsOf(assignment).map(attempt => html `<li data-attempt-task="${attempt.taskId}" data-history-version="${attempt.taskId}"><a href="${attempt.href}">${attempt.label}</a>${attempt.runId === null ? '' : html ` <a href="/r/${attempt.runId}">Run #${attempt.runId}</a>`}${attempt.detail === null ? '' : html `<p class="meta">${attempt.detail}</p>`}</li>`)}</ol>${assignment.owner === null ? '' : html `<p class="meta">Lead: ${assignment.owner.label}${assignment.owner.active ? '' : ' · access ended'}</p>`}<p class="work-meta work-id">Task <span class="mono">${assignment.rootId}</span></p></details>`;
 }
 /** Only recognized storage limits and explicitly identified older records are
  * secondary. Unknown findings and damaged current material stay in view. */
@@ -100,14 +100,7 @@ export function assignmentCardOf(assignment, options = {}) {
 export function assignmentSummaryHtml(assignment, options = {}) {
     const card = assignmentCardOf(assignment, options);
     const tone = card.status.tone;
-    return `<section class="${options.compact ? 'assignment-summary' : 'card assignment-summary'}" aria-label="assignment progress" data-assignment="${escape(assignment.rootId)}" data-work-status="${card.token}" data-tone="${card.tone}" data-headline="${escape(card.status.headline)}" data-headline-tone="${tone}"${options.compact ? '' : ' data-task-status'}>` +
-        (options.compact ? `<span class="status-line" data-work-status="${card.token}" data-tone="${card.tone}"><i class="status-dot" aria-hidden="true"></i><span class="status-label">${card.label}</span></span>` : `<h2 class="assignment-state status-headline"><i aria-hidden="true"></i>${escape(card.label)}</h2>`) +
-        `<p class="meta assignment-detail status-sentence">${escape(options.sentence ?? card.status.sentence)}</p>` +
-        (card.action === null ? '' : `<a class="${options.compact ? 'work-action' : 'button-link'}" href="${escape(card.action.href)}"${card.action.openResult ? ' data-open-result' : ''}${options.compact ? '' : ' data-primary-action'}>${escape(card.action.label)}${options.compact ? ' →' : ''}</a>`) +
-        (options.compact ? '' : statusDetailsHtml(card.status)) +
-        statusWhyHtml(card.status, card.reasons, card.diagnostics) +
-        (card.notices === null ? '' : `<details class="assignment-notices"><summary>${card.notices.summary}</summary>${card.notices.lines.map(one => `<p class="meta">${escape(one)}</p>`).join('')}</details>`) +
-        assignmentAttemptsHtml(assignment) + `</section>`;
+    return html `<section class="${options.compact ? 'assignment-summary' : 'card assignment-summary'}" aria-label="assignment progress" data-assignment="${assignment.rootId}" data-work-status="${card.token}" data-tone="${card.tone}" data-headline="${card.status.headline}" data-headline-tone="${tone}"${options.compact ? '' : html ` data-task-status`}>${options.compact ? html `<span class="status-line" data-work-status="${card.token}" data-tone="${card.tone}"><i class="status-dot" aria-hidden="true"></i><span class="status-label">${card.label}</span></span>` : html `<h2 class="assignment-state status-headline"><i aria-hidden="true"></i>${card.label}</h2>`}<p class="meta assignment-detail status-sentence">${options.sentence ?? card.status.sentence}</p>${card.action === null ? '' : html `<a class="${options.compact ? 'work-action' : 'button-link'}" href="${card.action.href}"${card.action.openResult ? html ` data-open-result` : ''}${options.compact ? '' : html ` data-primary-action`}>${card.action.label}${options.compact ? ' →' : ''}</a>`}${options.compact ? '' : statusDetailsHtml(card.status)}${statusWhyHtml(card.status, card.reasons, card.diagnostics)}${card.notices === null ? '' : html `<details class="assignment-notices"><summary>${card.notices.summary}</summary>${card.notices.lines.map(one => html `<p class="meta">${one}</p>`)}</details>`}${assignmentAttemptsHtml(assignment)}</section>`;
 }
 /** Shared assignment layout; actions remain comfortable on touch screens. */
 export const ASSIGNMENT_CSS = `.assignment-summary{min-width:0;overflow-wrap:anywhere}.assignment-summary .assignment-state{font-weight:600;margin:0}.assignment-summary h2.assignment-state{font-size:1.125rem;color:var(--foreground)}.assignment-summary>.assignment-attempts,.assignment-summary>.assignment-notices{border:0;box-shadow:none;padding:0;margin:.25rem 0 0;background:transparent}.assignment-summary>.button-link{margin-top:.7rem;min-height:44px}.assignment-summary>.work-action{display:inline-flex;margin-inline-start:.6rem;min-height:44px;align-items:center}.assignment-detail{margin:.55rem 0}.assignment-attempts summary,.assignment-notices summary{min-height:44px;display:list-item;align-content:center;cursor:pointer}.assignment-notices summary{font-size:.8125rem;color:var(--foreground)}.assignment-notices p{margin:.25rem 0 .5rem}.assignment-attempts ol{padding-left:1.4rem}.assignment-attempts li{margin:.4rem 0}.assignment-attempts li a{display:inline-flex;align-items:center;min-height:44px;margin-right:.7rem}.assignment-attempts li p{margin:0 0 .4rem}`;

package/dist/backup-ui.d.ts

@@ -3,6 +3,7 @@
  * back up now, then the schedule. Past backups and how to restore sit in
  * disclosures.
  */
+import { type Html } from "./html.js";
 import type { BackupRun, BackupSettings } from "./store.js";
 /** The schedules on offer and the most copies kept. Here rather than in backup.ts so the page never loads `node:sqlite`. */
 export declare const BACKUP_EVERY_HOURS: readonly [1, 6, 12, 24];
@@ -19,4 +20,4 @@ export type BackupView = {
 export declare function backupHtml(view: BackupView, notice: {
     said?: string | null;
     problem?: string | null;
-}): string;
+}): Html;

package/dist/backup-ui.js

@@ -1,9 +1,14 @@
+/**
+ * Settings → Backups (sprint 8): how the last backup went and one button to
+ * back up now, then the schedule. Past backups and how to restore sit in
+ * disclosures.
+ */
+import { html, postForm } from "./html.js";
 import { bytesWords } from "./storage.js";
 import { whenUtc } from "./when-html.js";
 /** The schedules on offer and the most copies kept. Here rather than in backup.ts so the page never loads `node:sqlite`. */
 export const BACKUP_EVERY_HOURS = [1, 6, 12, 24];
 export const MAX_KEEP = 100;
-const e = (value) => String(value ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 const when = (at) => whenUtc(at);
 const whenWords = (at) => `${at.slice(0, 16).replace("T", " ")} UTC`;
 const everyWords = (hours) => hours === 1 ? "Every hour" : hours === 24 ? "Every day" : `Every ${hours} hours`;
@@ -26,36 +31,20 @@ function state(view) {
         : good === undefined ? "The first scheduled backup runs within a minute or two of the console starting."
             : `Next one about ${whenWords(new Date(Date.parse(good.startedAt) + view.settings.everyHours * 3_600_000).toISOString())}.`;
     if (last === undefined)
-        return `<h2>No backups yet</h2><p class="meta">${e(next)}</p>`;
+        return html `<h2>No backups yet</h2><p class="meta">${next}</p>`;
     if (last.ok === null)
-        return `<h2>Backing up</h2><p class="meta">Started ${when(last.startedAt)}.</p>`;
+        return html `<h2>Backing up</h2><p class="meta">Started ${when(last.startedAt)}.</p>`;
     if (last.ok === false) {
-        return `<h2 data-backup-state="failed">Last backup failed</h2><p class="problem" role="alert">${when(last.startedAt)}: ${e(last.error ?? "no reason was recorded")}</p>` +
-            `<p class="meta">${good === undefined ? "No backup has succeeded yet." : `Last good backup ${when(good.startedAt)}.`} ${e(next)}</p>`;
+        return html `<h2 data-backup-state="failed">Last backup failed</h2><p class="problem" role="alert">${when(last.startedAt)}: ${last.error ?? "no reason was recorded"}</p><p class="meta">${good === undefined ? "No backup has succeeded yet." : html `Last good backup ${when(good.startedAt)}.`} ${next}</p>`;
     }
-    return `<h2 data-backup-state="ok">Backed up ${when(last.startedAt)}</h2><p class="meta">${last.bytes === null ? "" : `${e(bytesWords(last.bytes))} · `}${e(next)}</p>`;
+    return html `<h2 data-backup-state="ok">Backed up ${when(last.startedAt)}</h2><p class="meta">${last.bytes === null ? "" : `${bytesWords(last.bytes)} · `}${next}</p>`;
 }
 export function backupHtml(view, notice) {
     const s = view.settings;
-    const note = notice.problem ? `<p class="problem" role="alert">${e(notice.problem)}</p>` : notice.said ? `<p role="status">${e(notice.said)}</p>` : "";
-    const csrf = `<input type="hidden" name="csrf" value="${e(view.csrf)}">`;
-    const choices = [`<option value="off"${s.enabled ? "" : " selected"}>Off</option>`,
-        ...BACKUP_EVERY_HOURS.map(hours => `<option value="${hours}"${s.enabled && s.everyHours === hours ? " selected" : ""}>${everyWords(hours)}</option>`)].join("");
-    const runs = view.runs.map(run => `<li data-backup-run="${run.id}"><span>${when(run.startedAt)}</span>` +
-        (run.ok === true ? `<span>Succeeded${run.bytes === null ? "" : ` · ${e(bytesWords(run.bytes))}`}</span>${run.file === null ? "" : `<span class="mono meta">${e(fileName(run.file))}</span>`}`
-            : run.ok === false ? `<span class="failed">Failed: ${e(run.error ?? "no reason recorded")}</span>` : `<span>Running</span>`) +
-        `<span class="meta">${run.trigger === "manual" ? "by hand" : "scheduled"}</span></li>`).join("");
-    return `<section class="backups">${note}` +
-        `<div class="card backup-state"><div>${state(view)}</div>` +
-        `<form method="post" action="/settings/backups/now">${csrf}<button type="submit">Back up now</button></form></div>` +
-        `<h2>Schedule</h2>` +
-        `<form method="post" action="/settings/backups">${csrf}<fieldset>` +
-        `<div class="pair"><label>Back up<select name="every">${choices}</select></label>` +
-        `<label>Keep the newest<input type="number" name="keep" min="1" max="${MAX_KEEP}" step="1" value="${s.keep}" required></label></div>` +
-        `<label>Folder<input type="text" name="folder" value="${e(s.folder ?? "")}" placeholder="${e(view.defaultFolder)}" spellcheck="false"></label>` +
-        `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password"></label>` +
-        `</fieldset><button type="submit">Save</button></form>` +
-        `<details><summary>Recent backups${view.runs.length === 0 ? "" : ` (${view.runs.length})`}</summary>${runs === "" ? `<p class="meta">None yet.</p>` : `<ol>${runs}</ol>`}<p class="meta">In <span class="mono">${e(view.folder)}</span>. Only the database is copied: provider keys and sign-in files stay out.</p></details>` +
-        `<details><summary>Restore a backup</summary><p>Stop Toolroll, then run:</p><pre><code>toolroll restore &lt;file&gt; --dry-run</code></pre>` +
-        `<p class="meta">The dry run checks the backup (its version and ledger chain) and changes nothing. Run it again without <code>--dry-run</code> to restore; the current database is kept as a copy first.</p></details></section>`;
+    const note = notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : notice.said ? html `<p role="status">${notice.said}</p>` : "";
+    const choices = [html `<option value="off"${s.enabled ? "" : html ` selected`}>Off</option>`,
+        ...BACKUP_EVERY_HOURS.map(hours => html `<option value="${hours}"${s.enabled && s.everyHours === hours ? html ` selected` : ""}>${everyWords(hours)}</option>`)];
+    const runs = view.runs.map(run => html `<li data-backup-run="${run.id}"><span>${when(run.startedAt)}</span>${run.ok === true ? html `<span>Succeeded${run.bytes === null ? "" : ` · ${bytesWords(run.bytes)}`}</span>${run.file === null ? "" : html `<span class="mono meta">${fileName(run.file)}</span>`}`
+        : run.ok === false ? html `<span class="failed">Failed: ${run.error ?? "no reason recorded"}</span>` : html `<span>Running</span>`}<span class="meta">${run.trigger === "manual" ? "by hand" : "scheduled"}</span></li>`);
+    return html `<section class="backups">${note}<div class="card backup-state"><div>${state(view)}</div>${postForm("/settings/backups/now", html `<button type="submit">Back up now</button>`)}</div><h2>Schedule</h2>${postForm("/settings/backups", html `<fieldset><div class="pair"><label>Back up<select name="every">${choices}</select></label><label>Keep the newest<input type="number" name="keep" min="1" max="${MAX_KEEP}" step="1" value="${s.keep}" required></label></div><label>Folder<input type="text" name="folder" value="${s.folder ?? ""}" placeholder="${view.defaultFolder}" spellcheck="false"></label><label>Your Toolroll password<input type="password" name="password" autocomplete="current-password"></label></fieldset><button type="submit">Save</button>`)}<details><summary>Recent backups${view.runs.length === 0 ? "" : ` (${view.runs.length})`}</summary>${runs.length === 0 ? html `<p class="meta">None yet.</p>` : html `<ol>${runs}</ol>`}<p class="meta">In <span class="mono">${view.folder}</span>. Only the database is copied: provider keys and sign-in files stay out.</p></details><details><summary>Restore a backup</summary><p>Stop Toolroll, then run:</p><pre><code>toolroll restore &lt;file&gt; --dry-run</code></pre><p class="meta">The dry run checks the backup (its version and ledger chain) and changes nothing. Run it again without <code>--dry-run</code> to restore; the current database is kept as a copy first.</p></details></section>`;
 }

package/dist/brand-mark.d.ts

@@ -7,6 +7,7 @@
  * brandIconHtml, or BrandIcon in React (browser/brand-mark.tsx).
  */
 import { type BrandIconId } from "./brand-icons.js";
+import { type Html } from "./html.js";
 /**
  * The icon for a service id, catalog tool name, chat app or integration key
  * ("telegram", "agent:codex", "mcp:<repo>:sentry"), or null for a letter.
@@ -15,12 +16,12 @@ export declare function brandIconFor(name: string): BrandIconId | null;
 /** The letter a mark without a logo shows. */
 export declare function brandLetter(label: string): string;
 /** The logo alone, decorative: an svg its surroundings size and colour. */
-export declare function brandIconHtml(id: BrandIconId): string;
+export declare function brandIconHtml(id: BrandIconId): Html;
 /**
  * The mark, decorative (the name always sits beside it). `name` null is a
  * letter whatever the label: a custom tool never borrows a logo by its name.
  */
-export declare function brandMarkHtml(name: string | null, label: string, connected: boolean): string;
+export declare function brandMarkHtml(name: string | null, label: string, connected: boolean): Html;
 /** Where the integration tiles (Settings → Tools) switch to their phone layout, and the mark with them. */
 export declare const TILE_PHONE = "@media(max-width:600px)";
 /** The mark's own sizes; `--brand-mark` is its side, for layouts that line up beside it. */

package/dist/brand-mark.js

@@ -7,6 +7,7 @@
  * brandIconHtml, or BrandIcon in React (browser/brand-mark.tsx).
  */
 import { BRAND_ICONS } from "./brand-icons.js";
+import { html } from "./html.js";
 /** Service ids, catalog tool names and integration keys that differ from their icon's id. */
 const ALIASES = {
     atlassian: "jira", "chrome-devtools": "chrome", codex: "openai", "microsoft-teams": "teams", "better-stack": "betterstack",
@@ -25,11 +26,10 @@ export function brandIconFor(name) {
 export function brandLetter(label) {
     return (label.trim().match(/[\p{L}\p{N}]/u)?.[0] ?? "?").toUpperCase();
 }
-const e = (value) => value.replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 /** The logo alone, decorative: an svg its surroundings size and colour. */
 export function brandIconHtml(id) {
     const icon = BRAND_ICONS[id];
-    return `<svg viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path fill="currentColor"${icon.evenodd ? ` fill-rule="evenodd"` : ""} d="${icon.path}"/></svg>`;
+    return html `<svg viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path fill="currentColor"${icon.evenodd && html ` fill-rule="evenodd"`} d="${icon.path}"/></svg>`;
 }
 /**
  * The mark, decorative (the name always sits beside it). `name` null is a
@@ -37,8 +37,8 @@ export function brandIconHtml(id) {
  */
 export function brandMarkHtml(name, label, connected) {
     const icon = name === null ? null : brandIconFor(name);
-    const inside = icon === null ? e(brandLetter(label)) : brandIconHtml(icon);
-    return `<span class="brand-mark" data-connected="${connected}"${icon === null ? " data-letter" : ""} aria-hidden="true">${inside}</span>`;
+    const inside = icon === null ? brandLetter(label) : brandIconHtml(icon);
+    return html `<span class="brand-mark" data-connected="${String(connected)}"${icon === null && html ` data-letter`} aria-hidden="true">${inside}</span>`;
 }
 /** Where the integration tiles (Settings → Tools) switch to their phone layout, and the mark with them. */
 export const TILE_PHONE = "@media(max-width:600px)";