toolroll 0.9.54 → 0.9.55

package/dist/html.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Server HTML, escaped by construction.
+ *
+ * - `Html` is markup this module made. Nothing else can make one: the class
+ *   is private and branded, so a string never passes for markup.
+ * - `html` is the only way to write markup. Its literal text is the
+ *   author's; every interpolated value is text and is escaped, unless it is
+ *   already `Html`. Arrays render in order; null, undefined and booleans
+ *   render nothing, so `${cond && html`…`}` reads naturally.
+ * - `postForm` is the only way to write a POST form. It adds the request's
+ *   CSRF field itself, so a form cannot forget it.
+ * - Page sinks (the shell, `respond` for text/html, the workspace's page
+ *   snapshot) take `Html` and turn it into bytes with `htmlString`.
+ *
+ * The script, style and JSON constructors exist for the page shell: their
+ * sources are code, and each refuses content that could close its element.
+ *
+ * This module has no server dependencies (the browser bundle shares time
+ * helpers that use it); the server's request context supplies the CSRF token.
+ */
+declare const MADE_HERE: unique symbol;
+/** Markup this module made. Only this module holds the token its constructor asks for. */
+export declare class Html {
+    #private;
+    constructor(token: typeof MADE_HERE, markup: string);
+    /** The bytes, for a sink. */
+    static markupOf(fragment: Html): string;
+    toString(): string;
+    toJSON(): string;
+}
+export type HtmlValue = Html | string | number | bigint | boolean | null | undefined | readonly HtmlValue[];
+export declare const isHtml: (value: unknown) => value is Html;
+/** The markup of an `Html` value, for a sink that writes bytes. */
+export declare function htmlString(fragment: Html): string;
+/** Markup with every interpolation escaped as text, except values that are already `Html`. */
+export declare function html(strings: TemplateStringsArray, ...values: readonly HtmlValue[]): Html;
+/** Parts in order, with an optional separator between them. */
+export declare function joinHtml(parts: Iterable<HtmlValue>, separator?: HtmlValue): Html;
+/** Plain text, escaped (for a sink that takes Html when the content is only words). */
+export declare const textHtml: (text: string) => Html;
+export type AttributeValue = string | number | boolean | null | undefined;
+/** Attributes as `name="value"` pairs: true is a bare attribute; false, null and undefined are left out. */
+export declare function attributes(values: Readonly<Record<string, AttributeValue>>): Html;
+export type PostFormOptions = {
+    /** Attributes on the form element (class, id, aria-label, data-…). */
+    attrs?: Readonly<Record<string, AttributeValue>>;
+    /** Hidden fields, after the CSRF field (null and undefined are left out). */
+    hidden?: Readonly<Record<string, string | number | null | undefined>>;
+    /** The open project's revision this page was rendered under: a stale tab's post is refused. */
+    projectRevision?: number | string | null;
+    /** Where the action returns afterwards (a same-site path). */
+    returnTo?: string | null;
+    /** Forms before a session exists (sign-in, sign-up, a join link) have no CSRF field. */
+    signedOut?: true;
+};
+/** The server's request context supplies the request's CSRF token (server/request-context.ts). */
+export declare function provideFormToken(source: () => string | undefined): void;
+/**
+ * A POST form: the action, the request's one CSRF field, the optional
+ * project revision and return fields, other hidden fields, then the body.
+ * Outside a console request there is no CSRF to give, so it refuses.
+ */
+export declare function postForm(action: string, body: HtmlValue, options?: PostFormOptions): Html;
+/**
+ * Markup edited after rendering: each match of `pattern` in the page is replaced by markup the replacer builds
+ * (with html`…`), or kept as it was (null), so nothing unescaped can enter. For whole-page passes (a sign-in that
+ * stands in for passwords, the browser shell's insertions).
+ */
+export declare function replaceMarkup(page: Html, pattern: RegExp, replace: (match: string, ...groups: string[]) => Html | null): Html;
+/** An inline script whose source is code. Its text may not close the element or open a comment. */
+export declare function scriptElement(source: string, attrs?: Readonly<Record<string, AttributeValue>>): Html;
+/** A style element whose rules are code. */
+export declare function styleElement(css: string, attrs?: Readonly<Record<string, AttributeValue>>): Html;
+/** Inert JSON for a page script to read: no character of it can end the element. */
+export declare function jsonScript(value: unknown, attrs?: Readonly<Record<string, AttributeValue>>): Html;
+export {};

package/dist/html.js

@@ -0,0 +1,173 @@
+/**
+ * Server HTML, escaped by construction.
+ *
+ * - `Html` is markup this module made. Nothing else can make one: the class
+ *   is private and branded, so a string never passes for markup.
+ * - `html` is the only way to write markup. Its literal text is the
+ *   author's; every interpolated value is text and is escaped, unless it is
+ *   already `Html`. Arrays render in order; null, undefined and booleans
+ *   render nothing, so `${cond && html`…`}` reads naturally.
+ * - `postForm` is the only way to write a POST form. It adds the request's
+ *   CSRF field itself, so a form cannot forget it.
+ * - Page sinks (the shell, `respond` for text/html, the workspace's page
+ *   snapshot) take `Html` and turn it into bytes with `htmlString`.
+ *
+ * The script, style and JSON constructors exist for the page shell: their
+ * sources are code, and each refuses content that could close its element.
+ *
+ * This module has no server dependencies (the browser bundle shares time
+ * helpers that use it); the server's request context supplies the CSRF token.
+ */
+const MADE_HERE = Symbol("html");
+/** Markup this module made. Only this module holds the token its constructor asks for. */
+export class Html {
+    #markup;
+    constructor(token, markup) {
+        if (token !== MADE_HERE)
+            throw new TypeError("Html is made by html`…`");
+        this.#markup = markup;
+    }
+    /** The bytes, for a sink. */
+    static markupOf(fragment) { return fragment.#markup; }
+    // Coercing markup to a string (`${fragment}` in a plain template, `+`, join) would lose the brand and
+    // be escaped again downstream. Under test that is an error; a running server keeps serving the markup.
+    toString() {
+        if (STRICT)
+            throw new Error("Html coerced to a string: interpolate it with html`…` or hand it to a sink");
+        return this.#markup;
+    }
+    toJSON() {
+        if (STRICT)
+            throw new Error("Html serialized as JSON: convert it with htmlString() first");
+        return this.#markup;
+    }
+}
+// Under test, a coercion is an error to fix; a running server keeps serving the markup.
+const STRICT = typeof process !== "undefined" && process.env["VITEST"] !== undefined;
+const make = (markup) => new Html(MADE_HERE, markup);
+export const isHtml = (value) => value instanceof Html;
+/** The markup of an `Html` value, for a sink that writes bytes. */
+export function htmlString(fragment) {
+    if (!(fragment instanceof Html))
+        throw new TypeError("htmlString needs Html");
+    return Html.markupOf(fragment);
+}
+const ENTITIES = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
+const escapeText = (text) => text.replace(/[&<>"']/g, char => ENTITIES[char]);
+function render(value) {
+    if (value === null || value === undefined || typeof value === "boolean")
+        return "";
+    if (value instanceof Html)
+        return Html.markupOf(value);
+    if (Array.isArray(value))
+        return value.map(render).join("");
+    if (typeof value === "string")
+        return escapeText(value);
+    if (typeof value === "number" || typeof value === "bigint")
+        return String(value);
+    throw new TypeError(`html: cannot interpolate ${typeof value}`);
+}
+// A template's literal text is checked once per call site: POST forms and CSRF fields come only from postForm.
+const checked = new WeakSet();
+const POST_FORM = /<form\b[^>]*\bmethod\s*=\s*["']?post\b/i;
+const CSRF_FIELD = /\bname\s*=\s*["']?csrf\b/i;
+function checkLiteral(strings) {
+    if (checked.has(strings))
+        return;
+    const text = strings.join("\u0000");
+    if (POST_FORM.test(text))
+        throw new Error("html: write POST forms with postForm, which adds the CSRF field");
+    if (CSRF_FIELD.test(text))
+        throw new Error("html: postForm adds the CSRF field; don't write one");
+    checked.add(strings);
+}
+/** Markup with every interpolation escaped as text, except values that are already `Html`. */
+export function html(strings, ...values) {
+    checkLiteral(strings);
+    let out = strings[0];
+    for (let index = 0; index < values.length; index++)
+        out += render(values[index]) + strings[index + 1];
+    return make(out);
+}
+/** Parts in order, with an optional separator between them. */
+export function joinHtml(parts, separator = "") {
+    const between = render(separator);
+    return make([...parts].map(render).join(between));
+}
+/** Plain text, escaped (for a sink that takes Html when the content is only words). */
+export const textHtml = (text) => make(escapeText(text));
+/** Attributes as `name="value"` pairs: true is a bare attribute; false, null and undefined are left out. */
+export function attributes(values) {
+    let out = "";
+    for (const [name, value] of Object.entries(values)) {
+        if (!/^[a-z][a-z0-9-]*$/.test(name))
+            throw new Error(`attributes: bad name ${name}`);
+        if (value === false || value === null || value === undefined)
+            continue;
+        out += value === true ? ` ${name}` : ` ${name}="${escapeText(String(value))}"`;
+    }
+    return make(out);
+}
+let formToken = () => undefined;
+/** The server's request context supplies the request's CSRF token (server/request-context.ts). */
+export function provideFormToken(source) { formToken = source; }
+/**
+ * A POST form: the action, the request's one CSRF field, the optional
+ * project revision and return fields, other hidden fields, then the body.
+ * Outside a console request there is no CSRF to give, so it refuses.
+ */
+export function postForm(action, body, options = {}) {
+    let csrf = null;
+    if (options.signedOut !== true) {
+        const token = formToken();
+        if (token === undefined)
+            throw new Error(`postForm(${action}) outside a console request`);
+        csrf = token;
+    }
+    const hidden = [];
+    if (csrf !== null)
+        hidden.push(["csrf", csrf]);
+    if (options.projectRevision !== undefined && options.projectRevision !== null)
+        hidden.push(["projectRevision", options.projectRevision]);
+    if (options.returnTo !== undefined && options.returnTo !== null)
+        hidden.push(["return", options.returnTo]);
+    for (const [name, value] of Object.entries(options.hidden ?? {})) {
+        if (name === "csrf")
+            throw new Error("postForm adds the CSRF field itself");
+        if (value !== null && value !== undefined)
+            hidden.push([name, value]);
+    }
+    const fields = hidden.map(([name, value]) => `<input type="hidden" name="${escapeText(name)}" value="${escapeText(String(value))}">`).join("");
+    return make(`<form method="post" action="${escapeText(action)}"${htmlString(attributes(options.attrs ?? {}))}>${fields}${render(body)}</form>`);
+}
+/**
+ * Markup edited after rendering: each match of `pattern` in the page is replaced by markup the replacer builds
+ * (with html`…`), or kept as it was (null), so nothing unescaped can enter. For whole-page passes (a sign-in that
+ * stands in for passwords, the browser shell's insertions).
+ */
+export function replaceMarkup(page, pattern, replace) {
+    const groups = new RegExp(`${pattern.source}|`).exec("").length - 1;
+    return make(htmlString(page).replace(pattern, (match, ...rest) => {
+        const replaced = replace(match, ...rest.slice(0, groups).map(one => typeof one === "string" ? one : ""));
+        return replaced === null ? match : htmlString(replaced);
+    }));
+}
+// ---- the page shell's own elements ---------------------------------------------------------------------------
+/** An inline script whose source is code. Its text may not close the element or open a comment. */
+export function scriptElement(source, attrs = {}) {
+    if (/<\/script|<!--/i.test(source))
+        throw new Error("scriptElement: the source would end its element");
+    return make(`<script${htmlString(attributes(attrs))}>${source}</script>`);
+}
+/** A style element whose rules are code. */
+export function styleElement(css, attrs = {}) {
+    if (/<\/style/i.test(css))
+        throw new Error("styleElement: the rules would end their element");
+    return make(`<style${htmlString(attributes(attrs))}>${css}</style>`);
+}
+/** Inert JSON for a page script to read: no character of it can end the element. */
+export function jsonScript(value, attrs = {}) {
+    // An escaped "<" can neither close the element nor open a comment; the line separators keep it valid script.
+    const json = JSON.stringify(value).replace(/[<\u2028\u2029]/g, char => `\\u${char.charCodeAt(0).toString(16).padStart(4, "0")}`);
+    return make(`<script type="application/json"${htmlString(attributes(attrs))}>${json}</script>`);
+}

package/dist/integrations-ui.d.ts

@@ -4,10 +4,11 @@
  * failed, what uses it, and one action. The list comes from saved checks; a
  * render never waits on one (see integrations.ts).
  */
+import { type Html } from "./html.js";
 import { type Integration } from "./integrations.js";
 export declare const INTEGRATIONS_CSS: string;
 export declare function integrationsHtml(list: readonly Integration[], csrf: string, notice: {
     said?: string | null;
     problem?: string | null;
     checking?: boolean;
-}): string;
+}): Html;

package/dist/integrations-ui.js

@@ -4,10 +4,10 @@
  * failed, what uses it, and one action. The list comes from saved checks; a
  * render never waits on one (see integrations.ts).
  */
+import { html, joinHtml, postForm } from "./html.js";
 import { STATE_WORDS } from "./integrations.js";
 import { whenUtc } from "./when-html.js";
 import { brandMarkHtml } from "./brand-mark.js";
-const e = (value) => String(value ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 const when = (at) => whenUtc(at);
 export const INTEGRATIONS_CSS = `.integrations{max-width:760px;min-width:0}.integrations h2{margin:24px 0 6px;font-size:.9375rem}` +
     `.integrations .integration{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:start;padding:12px 0;border-top:1px solid var(--so-line);min-width:0}` +
@@ -31,13 +31,12 @@ const GROUPS = [
 function action(one, csrf) {
     const a = one.action;
     if (a.kind === "test") {
-        return csrf === "" ? "" : `<form method="post" action="/settings/integrations/test" class="integration-action"><input type="hidden" name="csrf" value="${e(csrf)}">` +
-            `<input type="hidden" name="key" value="${e(one.key)}"><button type="submit">Send test</button></form>`;
+        return csrf === "" ? "" : postForm("/settings/integrations/test", html `<button type="submit">Send test</button>`, { attrs: { class: "integration-action" }, hidden: { key: one.key } });
     }
     // A command is run where Toolroll runs; a page is linked. Fix and Set up both say which.
     // Fix is the one filled action on the page; Set up stays quiet so a list of unused services doesn't shout.
     if (a.href !== null)
-        return `<p class="integration-action"><a class="button-link${a.kind === "setup" ? " integration-quiet" : ""}" href="${e(a.href)}">${a.label}</a></p>`;
+        return html `<p class="integration-action"><a class="button-link${a.kind === "setup" ? " integration-quiet" : ""}" href="${a.href}">${a.label}</a></p>`;
     return "";
 }
 /** Which mark a row shows: email is Gmail's only when the account is a Gmail address; a custom tool is a letter. */
@@ -48,30 +47,27 @@ function markFor(one) {
 }
 function row(one, csrf) {
     const badge = !one.checked && one.state === "connected"
-        ? `<span class="integration-state integration-state--checking"><i aria-hidden="true"></i>Checking</span>`
-        : `<span class="integration-state integration-state--${one.state}"><i aria-hidden="true"></i>${STATE_WORDS[one.state]}</span>`;
-    const facts = [one.account, one.detail].filter(Boolean).map(e).join(" · ");
+        ? html `<span class="integration-state integration-state--checking"><i aria-hidden="true"></i>Checking</span>`
+        : html `<span class="integration-state integration-state--${one.state}"><i aria-hidden="true"></i>${STATE_WORDS[one.state]}</span>`;
+    const facts = [one.account, one.detail].filter(Boolean).join(" · ");
     const command = one.action.kind !== "test" ? one.action.command : null;
-    const fix = one.action.kind === "fix" ? `<p class="integration-fix" role="status">${e(one.action.words)}</p>` : "";
-    const run = command === null || (one.action.kind === "fix" && one.action.words.includes(command)) ? "" : `<p class="meta">Run <code>${e(command)}</code> on the computer running Toolroll.</p>`;
-    const seen = [one.lastSuccessAt === null ? null : `Last success ${when(one.lastSuccessAt)}`, one.usedBy.length === 0 ? null : `Used by ${e(one.usedBy.join(", "))}`].filter(Boolean);
-    const history = one.state === "not-set-up" || seen.length === 0 ? "" : `<p class="meta">${seen.join(" · ")}</p>`;
+    const fix = one.action.kind === "fix" ? html `<p class="integration-fix" role="status">${one.action.words}</p>` : "";
+    const run = command === null || (one.action.kind === "fix" && one.action.words.includes(command)) ? "" : html `<p class="meta">Run <code>${command}</code> on the computer running Toolroll.</p>`;
+    const seen = [one.lastSuccessAt === null ? null : html `Last success ${when(one.lastSuccessAt)}`, one.usedBy.length === 0 ? null : html `Used by ${one.usedBy.join(", ")}`].filter(Boolean);
+    const history = one.state === "not-set-up" || seen.length === 0 ? "" : html `<p class="meta">${joinHtml(seen, " · ")}</p>`;
     const lastError = one.lastError === null || one.state === "not-set-up" ? "" : one.state === "broken" && one.action.kind === "fix" && one.action.words === one.lastError
-        ? `<p class="meta">Failed ${when(one.lastErrorAt ?? "")}</p>`
-        : `<details><summary>Last error ${one.lastErrorAt === null ? "" : when(one.lastErrorAt)}</summary><p class="meta">${e(one.lastError)}</p></details>`;
-    return `<div class="integration" data-integration="${e(one.key)}" data-state="${one.state}">` +
-        `<p class="integration-head">${brandMarkHtml(markFor(one), one.name, one.state === "connected")}<strong>${e(one.name)}</strong> ${badge}</p>` +
-        action(one, csrf) +
-        `<div class="integration-body">${facts === "" ? "" : `<p class="meta">${facts}</p>`}${fix}${run}${history}${lastError}</div></div>`;
+        ? html `<p class="meta">Failed ${when(one.lastErrorAt ?? "")}</p>`
+        : html `<details><summary>Last error ${one.lastErrorAt === null ? "" : when(one.lastErrorAt)}</summary><p class="meta">${one.lastError}</p></details>`;
+    return html `<div class="integration" data-integration="${one.key}" data-state="${one.state}"><p class="integration-head">${brandMarkHtml(markFor(one), one.name, one.state === "connected")}<strong>${one.name}</strong> ${badge}</p>${action(one, csrf)}<div class="integration-body">${facts === "" ? "" : html `<p class="meta">${facts}</p>`}${fix}${run}${history}${lastError}</div></div>`;
 }
 export function integrationsHtml(list, 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 note = notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : notice.said ? html `<p role="status">${notice.said}</p>` : "";
     const broken = list.filter(one => one.state === "broken").length;
-    const summary = broken > 0 ? `<p><strong>${broken} need${broken === 1 ? "s" : ""} fixing.</strong></p>`
-        : notice.checking || list.some(one => !one.checked) ? `<p class="meta" role="status">Checking in the background. Refresh in a few seconds.</p>` : "";
+    const summary = broken > 0 ? html `<p><strong>${broken} need${broken === 1 ? "s" : ""} fixing.</strong></p>`
+        : notice.checking || list.some(one => !one.checked) ? html `<p class="meta" role="status">Checking in the background. Refresh in a few seconds.</p>` : "";
     const sections = GROUPS.map(([group, title]) => {
         const rows = list.filter(one => one.group === group);
-        return rows.length === 0 ? "" : `<h2>${title}</h2>${rows.map(one => row(one, csrf)).join("")}`;
-    }).join("");
-    return `<section class="integrations">${note}${summary}${sections}</section>`;
+        return rows.length === 0 ? "" : html `<h2>${title}</h2>${rows.map(one => row(one, csrf))}`;
+    });
+    return html `<section class="integrations">${note}${summary}${sections}</section>`;
 }

package/dist/kits-ui.d.ts

@@ -5,13 +5,14 @@
  */
 import type { Store } from "./store.js";
 import { type Kit } from "./kits.js";
+import { type Html } from "./html.js";
 export declare const KITS_CSS: string;
 /** The gallery: every kit, set up in a project with one button (or opened, when it's already there). */
-export declare function kitsGalleryHtml(store: Store, projects: readonly string[], projectName: (repo: string) => string, csrf: string, canSetUp: boolean, notice: {
+export declare function kitsGalleryHtml(store: Store, projects: readonly string[], projectName: (repo: string) => string, canSetUp: boolean, notice: {
     problem?: string | null;
-}): string;
+}): Html;
 /** A kit's own page: what's set up, and the next step on each line. */
-export declare function kitPageHtml(store: Store, kit: Kit, repo: string, dir: string | null, csrf: string, canSetUp: boolean, notice: {
+export declare function kitPageHtml(store: Store, kit: Kit, repo: string, dir: string | null, canSetUp: boolean, notice: {
     said?: string | null;
     problem?: string | null;
-}): string;
+}): Html;

package/dist/kits-ui.js

@@ -1,9 +1,8 @@
 import { kitChecklist, kitInstalled, KITS } from "./kits.js";
 import { TEAMMATE_TEMPLATES } from "./teammates.js";
-const e = (text) => text.replace(/[&<>"']/g, one => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[one]);
-const hidden = (csrf) => `<input type="hidden" name="csrf" value="${e(csrf)}">`;
-const CHECK = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>`;
-const RING = `<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8"/></svg>`;
+import { html, postForm } from "./html.js";
+const CHECK = html `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>`;
+const RING = html `<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8"/></svg>`;
 export const KITS_CSS = `.kits{max-width:960px;min-width:0}.kits-lede{color:var(--so-muted);margin:.25rem 0 1.5rem;max-width:40rem}.kit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}` +
     `.kit{display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--so-line);border-radius:12px;background:var(--so-paper)}.kit h2{font-size:1.1rem;margin:0}.kit p{margin:0}.kit .kit-promise{line-height:1.5}` +
     `.kit .kit-gets{font-size:.85rem;color:var(--so-muted);line-height:1.5}.kit form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-top:auto;padding-top:6px}.kit form label{display:grid;gap:4px;font-size:.85rem;flex:1 1 140px}` +
@@ -15,32 +14,31 @@ export const KITS_CSS = `.kits{max-width:960px;min-width:0}.kits-lede{color:var(
     `@media(max-width:600px){.kit-steps li{flex-wrap:wrap}.kit-steps .kit-step-said{flex-basis:calc(100% - 40px)}.kit form select{font-size:16px}}`;
 const teammateWords = (kit) => { const template = TEAMMATE_TEMPLATES.find(one => one.id === kit.teammate.template); return template === undefined ? kit.teammate.handle : template.label.toLowerCase(); };
 /** The gallery: every kit, set up in a project with one button (or opened, when it's already there). */
-export function kitsGalleryHtml(store, projects, projectName, csrf, canSetUp, notice) {
+export function kitsGalleryHtml(store, projects, projectName, canSetUp, notice) {
     const cards = KITS.map(kit => {
         const here = projects.filter(repo => kitInstalled(store, kit, repo) !== null);
         const open = projects.length === 1 && here.length === 1;
         const name = kit.teammate.handle.charAt(0).toUpperCase() + kit.teammate.handle.slice(1);
         const gets = `${name} (${teammateWords(kit)}) · the ${kit.flowName} flow${kit.tools.length === 0 ? "" : ` · works with ${kit.tools.map(one => one.label).join(" and ")}`}`;
-        const action = open ? `<a class="kit-open" href="/kits/${kit.id}?repo=${encodeURIComponent(projects[0])}">Open ${e(kit.name)} →</a>`
+        const action = open ? html `<a class="kit-open" href="/kits/${kit.id}?repo=${encodeURIComponent(projects[0])}">Open ${kit.name} →</a>`
             : !canSetUp || projects.length === 0 ? ""
-                : `<form method="post" action="/kits/${kit.id}/setup">${hidden(csrf)}${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))}${here.includes(repo) ? " (set up)" : ""}</option>`).join("")}</select></label>`}<button>Set it up</button></form>`;
-        return `<article class="kit" data-kit="${kit.id}"><h2>${e(kit.name)}</h2><p class="kit-promise">${e(kit.promise)}</p><p class="kit-gets">${e(gets)}</p>${action}</article>`;
-    }).join("");
-    return `<section class="kits">${notice.problem ? `<p class="problem" role="alert">${e(notice.problem)}</p>` : ""}<p class="kits-lede">A working setup in one click: an AI teammate, the flow it works, and what to connect next. Nothing goes out without you approving it.</p><div class="kit-grid">${cards}</div></section>`;
+                : postForm(`/kits/${kit.id}/setup`, html `${projects.length === 1 ? ""
+                    : html `<label>Project<select name="repo">${projects.map(repo => html `<option value="${repo}">${projectName(repo)}${here.includes(repo) ? " (set up)" : ""}</option>`)}</select></label>`}<button>Set it up</button>`, { hidden: { repo: projects.length === 1 ? projects[0] : null } });
+        return html `<article class="kit" data-kit="${kit.id}"><h2>${kit.name}</h2><p class="kit-promise">${kit.promise}</p><p class="kit-gets">${gets}</p>${action}</article>`;
+    });
+    return html `<section class="kits">${notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : ""}<p class="kits-lede">A working setup in one click: an AI teammate, the flow it works, and what to connect next. Nothing goes out without you approving it.</p><div class="kit-grid">${cards}</div></section>`;
 }
 /** A kit's own page: what's set up, and the next step on each line. */
-export function kitPageHtml(store, kit, repo, dir, csrf, canSetUp, notice) {
+export function kitPageHtml(store, kit, repo, dir, canSetUp, notice) {
     const steps = kitChecklist(store, kit, repo, dir);
     const set = kitInstalled(store, kit, repo);
     const rows = steps.map(step => {
-        const go = step.done ? (step.href === null ? "" : `<a class="kit-step-go" href="${e(step.href)}">Open</a>`)
+        const go = step.done ? (step.href === null ? "" : html `<a class="kit-step-go" href="${step.href}">Open</a>`)
             : step.action === "sample" || step.action === "github"
-                ? (canSetUp ? `<form method="post" action="/kits/${kit.id}/${step.action}">${hidden(csrf)}<input type="hidden" name="repo" value="${e(repo)}"><button${step.action === "sample" ? "" : ' class="secondary"'}>${step.action === "sample" ? "Try it" : "Bring them in"}</button></form>` : "")
-                : step.href === null ? "" : `<a class="kit-step-go" href="${e(step.href)}">${step.action === "connect" ? "Connect" : "Set up"}</a>`;
-        return `<li data-step="${e(step.id)}" data-done="${step.done}">${step.done ? CHECK : RING}<span class="kit-step-said">${e(step.said)}</span>${go}</li>`;
-    }).join("");
-    const setUp = set === null && canSetUp ? `<form method="post" action="/kits/${kit.id}/setup">${hidden(csrf)}<input type="hidden" name="repo" value="${e(repo)}"><button>Set up ${e(kit.name)}</button></form>` : "";
-    return `<section class="kits">${notice.problem ? `<p class="problem" role="alert">${e(notice.problem)}</p>` : ""}${notice.said ? `<p class="said" role="status">${e(notice.said)}</p>` : ""}` +
-        `<p class="kits-lede">${e(kit.promise)}</p>${setUp}${rows === "" ? "" : `<ol class="kit-steps">${rows}</ol>`}<p class="meta"><a href="/kits">All starter kits</a></p></section>`;
+                ? (canSetUp ? postForm(`/kits/${kit.id}/${step.action}`, html `<button${step.action === "sample" ? "" : html ` class="secondary"`}>${step.action === "sample" ? "Try it" : "Bring them in"}</button>`, { hidden: { repo } }) : "")
+                : step.href === null ? "" : html `<a class="kit-step-go" href="${step.href}">${step.action === "connect" ? "Connect" : "Set up"}</a>`;
+        return html `<li data-step="${step.id}" data-done="${String(step.done)}">${step.done ? CHECK : RING}<span class="kit-step-said">${step.said}</span>${go}</li>`;
+    });
+    const setUp = set === null && canSetUp ? postForm(`/kits/${kit.id}/setup`, html `<button>Set up ${kit.name}</button>`, { hidden: { repo } }) : "";
+    return html `<section class="kits">${notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : ""}${notice.said ? html `<p class="said" role="status">${notice.said}</p>` : ""}<p class="kits-lede">${kit.promise}</p>${setUp}${rows.length === 0 ? "" : html `<ol class="kit-steps">${rows}</ol>`}<p class="meta"><a href="/kits">All starter kits</a></p></section>`;
 }

package/dist/knowledge-ui.d.ts

@@ -1,14 +1,15 @@
 import { type KnowledgeDraft, type KnowledgeSelection, type KnowledgeView } from './project-knowledge.js';
+import { type Html } from './html.js';
 export declare const KNOWLEDGE_CSS = ".knowledge{max-width:780px;min-width:0;overflow-wrap:anywhere}.knowledge .card{padding:20px;min-width:0;margin:16px 0}.knowledge h2{margin:0 0 12px}.knowledge form{display:grid;gap:12px;margin:0}.knowledge label{display:grid;gap:6px}.knowledge textarea,.knowledge input,.knowledge select{box-sizing:border-box;width:100%;min-width:0;max-width:100%}.knowledge textarea{resize:vertical;min-height:110px}.knowledge button,.knowledge summary,.knowledge .button-link{min-height:44px}.knowledge button{justify-self:start;white-space:nowrap}.knowledge summary{padding:12px 0;cursor:pointer}.knowledge pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit}.knowledge .knowledge-actions{display:flex;gap:12px;flex-wrap:wrap}.knowledge .meta{font-size:.86rem}.knowledge .knowledge-source{display:block}.knowledge details+details{border-top:1px solid var(--so-line)}.memory-stats{display:flex;flex-wrap:wrap;gap:.4rem}.memory-stats span{padding:.15rem .55rem;border-radius:.375rem;background:var(--so-neutral-soft);color:var(--so-neutral-ink)}@media(max-width:600px){.knowledge .card{padding:16px}.knowledge h2{font-size:1.1rem}}";
-export declare function knowledgeHtml(view: KnowledgeView, csrf: string, canManage: boolean, draft?: KnowledgeDraft, error?: string): string;
-export declare function knowledgeContextHtml(snapshot: KnowledgeSelection | null): string;
+export declare function knowledgeHtml(view: KnowledgeView, csrf: string, canManage: boolean, draft?: KnowledgeDraft, error?: string): Html;
+export declare function knowledgeContextHtml(snapshot: KnowledgeSelection | null): Html | '';
 import type { Decision, MemoryHit } from './project-memory.js';
 export declare const MEMORY_INTRO = "What the lead and crew read before they work. Every change keeps its history.";
 export declare function decisionsHtml(repo: string, decisions: Decision[], csrf: string, canManage: boolean, draft?: {
     claim?: string;
     why?: string;
-}, error?: string): string;
-export declare function memorySearchHtml(repo: string, query: string, hits: MemoryHit[] | null): string;
+}, error?: string): Html;
+export declare function memorySearchHtml(repo: string, query: string, hits: MemoryHit[] | null): Html;
 import type { MemoryProposal } from './memory-pass.js';
 export declare function proposalsHtml(repo: string, proposals: MemoryProposal[], status: {
     surface: string;
@@ -21,4 +22,4 @@ export declare function proposalsHtml(repo: string, proposals: MemoryProposal[],
     };
     openGaps: number;
     pending: number;
-} | null, csrf: string, canManage: boolean): string;
+} | null, csrf: string, canManage: boolean): Html;

package/dist/knowledge-ui.js

@@ -1,47 +1,48 @@
 import { STALE_KNOWLEDGE } from './project-knowledge.js';
-const e = (s) => String(s ?? '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
-const fields = (data) => Object.entries(data).map(([k, v]) => `<input type="hidden" name="${e(k)}" value="${e(v)}">`).join('');
+import { html, postForm } from './html.js';
+// Hidden fields as they always were: a missing value is an empty field.
+const fields = (data) => Object.fromEntries(Object.entries(data).map(([k, v]) => [k, String(v ?? '')]));
 export const KNOWLEDGE_CSS = `.knowledge{max-width:780px;min-width:0;overflow-wrap:anywhere}.knowledge .card{padding:20px;min-width:0;margin:16px 0}.knowledge h2{margin:0 0 12px}.knowledge form{display:grid;gap:12px;margin:0}.knowledge label{display:grid;gap:6px}.knowledge textarea,.knowledge input,.knowledge select{box-sizing:border-box;width:100%;min-width:0;max-width:100%}.knowledge textarea{resize:vertical;min-height:110px}.knowledge button,.knowledge summary,.knowledge .button-link{min-height:44px}.knowledge button{justify-self:start;white-space:nowrap}.knowledge summary{padding:12px 0;cursor:pointer}.knowledge pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit}.knowledge .knowledge-actions{display:flex;gap:12px;flex-wrap:wrap}.knowledge .meta{font-size:.86rem}.knowledge .knowledge-source{display:block}.knowledge details+details{border-top:1px solid var(--so-line)}.memory-stats{display:flex;flex-wrap:wrap;gap:.4rem}.memory-stats span{padding:.15rem .55rem;border-radius:.375rem;background:var(--so-neutral-soft);color:var(--so-neutral-ink)}@media(max-width:600px){.knowledge .card{padding:16px}.knowledge h2{font-size:1.1rem}}`;
 export function knowledgeHtml(view, csrf, canManage, draft, error) {
     const manage = canManage && !!csrf;
-    const base = { csrf, repo: view.repo, identity: view.identity, revision: view.revision };
-    const form = (action, body, extra = {}) => `<form method="post" action="/settings/knowledge/change">${fields({ ...base, action, ...extra })}${body}</form>`;
-    const referenceFields = (d) => `<label>Name<input name="title" maxlength="120" value="${e(d.title)}" required></label><label>Reference text<textarea name="content" rows="5" maxlength="12000">${e(d.content)}</textarea></label><details${d.path ? ' open' : ''}><summary>Use a project document</summary><label>Committed .md or .txt path<input name="path" value="${e(d.path)}" placeholder="docs/design-guide.md"></label><p class="meta">Uses the committed file instead of the text above. Save again to refresh it.</p></details><button type="submit">Save reference</button>`;
-    const refs = view.knowledge.references.map(ref => `<details class="card"${draft?.id === ref.id ? ' open' : ''}><summary><strong>${e(ref.title)}</strong></summary>${ref.path ? `<span class="meta knowledge-source">${e(ref.path)} · ${e(ref.sourceRevision?.slice(0, 7))}</span>` : ''}<pre>${e(ref.content)}</pre>${manage ? `<details${draft?.id === ref.id ? ' open' : ''}><summary>Edit reference</summary>${form('save', referenceFields(draft?.id === ref.id ? draft : { title: ref.title, content: ref.path ? '' : ref.content, path: ref.path ?? '' }), { id: ref.id })}<details><summary>Remove reference</summary>${form('remove', '<p>Remove from future tasks. Previous run context stays available.</p><button>Remove reference</button>', { id: ref.id })}</details></details>` : ''}</details>`).join('');
-    const history = view.history.map(h => `<li><a class="button-link" href="/settings/knowledge?repo=${encodeURIComponent(view.repo)}&version=${h.revision}">Version ${h.revision}</a> · ${e(h.actor)} · ${e(h.at.slice(0, 16).replace('T', ' '))} UTC</li>`).join('');
+    const base = { repo: view.repo, identity: view.identity, revision: view.revision };
+    const form = (action, body, extra = {}) => postForm('/settings/knowledge/change', body, { hidden: fields({ ...base, action, ...extra }) });
+    const referenceFields = (d) => html `<label>Name<input name="title" maxlength="120" value="${d.title}" required></label><label>Reference text<textarea name="content" rows="5" maxlength="12000">${d.content}</textarea></label><details${d.path ? html ` open` : ''}><summary>Use a project document</summary><label>Committed .md or .txt path<input name="path" value="${d.path}" placeholder="docs/design-guide.md"></label><p class="meta">Uses the committed file instead of the text above. Save again to refresh it.</p></details><button type="submit">Save reference</button>`;
+    const refs = view.knowledge.references.map(ref => html `<details class="card"${draft?.id === ref.id ? html ` open` : ''}><summary><strong>${ref.title}</strong></summary>${ref.path ? html `<span class="meta knowledge-source">${ref.path} · ${ref.sourceRevision?.slice(0, 7)}</span>` : ''}<pre>${ref.content}</pre>${manage ? html `<details${draft?.id === ref.id ? html ` open` : ''}><summary>Edit reference</summary>${form('save', referenceFields(draft?.id === ref.id ? draft : { title: ref.title, content: ref.path ? '' : ref.content, path: ref.path ?? '' }), { id: ref.id })}<details><summary>Remove reference</summary>${form('remove', html `<p>Remove from future tasks. Previous run context stays available.</p><button>Remove reference</button>`, { id: ref.id })}</details></details>` : ''}</details>`);
+    const history = view.history.map(h => html `<li><a class="button-link" href="/settings/knowledge?repo=${encodeURIComponent(view.repo)}&version=${h.revision}">Version ${h.revision}</a> · ${h.actor} · ${h.at.slice(0, 16).replace('T', ' ')} UTC</li>`);
     if (view.stale) {
         // One notice, the saved knowledge on demand, one approver action. Editing waits until it is applied.
         const saved = view.stale.knowledge;
-        const review = `<details><summary>Review saved knowledge</summary><pre class="knowledge-instructions">${e(saved.instructions || 'No project instructions.')}</pre>${saved.references.map(ref => `<details><summary>${e(ref.title)}</summary><pre>${e(ref.content)}</pre></details>`).join('')}</details>`;
-        return `<section class="knowledge knowledge-library">${error ? `<p class="problem" role="alert">${e(error)}</p>` : ''}<section class="card knowledge-stale"><p role="status">${e(STALE_KNOWLEDGE)}.</p>${review}${manage ? form('apply', '<button>Apply saved knowledge</button>') : ''}</section></section>`;
+        const review = html `<details><summary>Review saved knowledge</summary><pre class="knowledge-instructions">${saved.instructions || 'No project instructions.'}</pre>${saved.references.map(ref => html `<details><summary>${ref.title}</summary><pre>${ref.content}</pre></details>`)}</details>`;
+        return html `<section class="knowledge knowledge-library">${error ? html `<p class="problem" role="alert">${error}</p>` : ''}<section class="card knowledge-stale"><p role="status">${STALE_KNOWLEDGE}.</p>${review}${manage ? form('apply', html `<button>Apply saved knowledge</button>`) : ''}</section></section>`;
     }
-    const instructions = `<pre class="knowledge-instructions">${e(view.knowledge.instructions || 'No project instructions yet.')}</pre>`;
-    const editor = manage ? `<details class="knowledge-editor"${draft?.instructions !== undefined ? ' open' : ''}><summary>${view.knowledge.instructions ? 'Edit instructions' : 'Add instructions'}</summary>${form('instructions', `<textarea aria-label="Project instructions" name="instructions" rows="5" maxlength="4000" placeholder="Goals, preferences, and what good work looks like…">${e(draft?.instructions ?? view.knowledge.instructions)}</textarea><button>Save instructions</button>`)}</details>` : '';
-    return `<section class="knowledge knowledge-library">${error ? `<p class="problem" role="alert">${e(error)}</p>` : ''}<section class="knowledge-intro"><h2>Instructions</h2>${instructions}${editor}</section><section><h2>References</h2>${refs || '<p class="meta">Add a spec, design guide, or useful project document.</p>'}${manage ? `<details class="card"${draft?.title && !draft.id ? ' open' : ''}><summary>Add reference</summary>${form('save', referenceFields(draft?.id ? {} : draft ?? {}))}</details>` : ''}</section>${history ? `<details><summary>Change history</summary><ol>${history}</ol></details>` : ''}</section>`;
+    const instructions = html `<pre class="knowledge-instructions">${view.knowledge.instructions || 'No project instructions yet.'}</pre>`;
+    const editor = manage ? html `<details class="knowledge-editor"${draft?.instructions !== undefined ? html ` open` : ''}><summary>${view.knowledge.instructions ? 'Edit instructions' : 'Add instructions'}</summary>${form('instructions', html `<textarea aria-label="Project instructions" name="instructions" rows="5" maxlength="4000" placeholder="Goals, preferences, and what good work looks like…">${draft?.instructions ?? view.knowledge.instructions}</textarea><button>Save instructions</button>`)}</details>` : '';
+    return html `<section class="knowledge knowledge-library">${error ? html `<p class="problem" role="alert">${error}</p>` : ''}<section class="knowledge-intro"><h2>Instructions</h2>${instructions}${editor}</section><section><h2>References</h2>${refs.length ? refs : html `<p class="meta">Add a spec, design guide, or useful project document.</p>`}${manage ? html `<details class="card"${draft?.title && !draft.id ? html ` open` : ''}><summary>Add reference</summary>${form('save', referenceFields(draft?.id ? {} : draft ?? {}))}</details>` : ''}</section>${history.length ? html `<details><summary>Change history</summary><ol>${history}</ol></details>` : ''}</section>`;
 }
 export function knowledgeContextHtml(snapshot) {
     if (!snapshot)
         return '';
-    return `<details class="knowledge result-knowledge"><summary>Context used</summary><p class="meta">Project knowledge · version ${snapshot.revision}${snapshot.inheritedFrom === null ? '' : ` · from run #${snapshot.inheritedFrom}`}</p>${snapshot.instructions ? `<details><summary>Instructions</summary><pre>${e(snapshot.instructions)}</pre></details>` : '<p>No project instructions were supplied.</p>'}${snapshot.references.map(r => `<details><summary>${e(r.title)}</summary>${r.path ? `<p class="meta">${e(r.path)} · ${e(r.sourceRevision)}</p>` : ''}<pre>${e(r.content)}</pre></details>`).join('')}${snapshot.omitted.length ? `<details><summary>Not included (${snapshot.omitted.length})</summary><ul>${snapshot.omitted.map(r => `<li>${e(r.title)} — ${e(r.reason)}</li>`).join('')}</ul></details>` : ''}</details>`;
+    return html `<details class="knowledge result-knowledge"><summary>Context used</summary><p class="meta">Project knowledge · version ${snapshot.revision}${snapshot.inheritedFrom === null ? '' : ` · from run #${snapshot.inheritedFrom}`}</p>${snapshot.instructions ? html `<details><summary>Instructions</summary><pre>${snapshot.instructions}</pre></details>` : html `<p>No project instructions were supplied.</p>`}${snapshot.references.map(r => html `<details><summary>${r.title}</summary>${r.path ? html `<p class="meta">${r.path} · ${r.sourceRevision}</p>` : ''}<pre>${r.content}</pre></details>`)}${snapshot.omitted.length ? html `<details><summary>Not included (${snapshot.omitted.length})</summary><ul>${snapshot.omitted.map(r => html `<li>${r.title} — ${r.reason}</li>`)}</ul></details>` : ''}</details>`;
 }
 export const MEMORY_INTRO = 'What the lead and crew read before they work. Every change keeps its history.';
 export function decisionsHtml(repo, decisions, csrf, canManage, draft, error) {
     const manage = canManage && !!csrf;
-    const base = { csrf, repo };
-    const form = (action, body, extra = {}) => `<form method="post" action="/settings/knowledge/decision">${fields({ ...base, action, ...extra })}${body}</form>`;
-    const rows = decisions.map(d => `<details class="card decision" id="decision-${d.id}"><summary><strong>${e(d.claim)}</strong> <span class="meta">#${d.id} · ${e(d.decidedBy)} · ${e(d.decidedAt.slice(0, 10))}</span></summary><p>${e(d.why)}</p><p class="meta">${e(d.sourceKind)}${d.sourceRef ? ` · ${e(d.sourceRef)}` : ''}${d.supersedes === null ? '' : ` · replaces #${d.supersedes}`}</p>${manage ? form('retire', `<label>Why it no longer holds<input name="reason" maxlength="500" required></label><button type="submit">Retire</button>`, { decision: d.id }) : ''}</details>`).join('');
-    const add = manage ? `<details class="knowledge-editor"${draft?.claim !== undefined ? ' open' : ''}><summary>Record a decision</summary>${form('record', `<label>The choice, in one sentence<input name="claim" maxlength="240" value="${e(draft?.claim)}" required></label><label>Why<textarea name="why" rows="3" maxlength="2000" required>${e(draft?.why)}</textarea></label><button type="submit">Record</button>`)}</details>` : '';
-    return `<section class="knowledge"><h2>Decisions</h2>${error ? `<p class="problem" role="alert">${e(error)}</p>` : ''}${rows || '<p class="meta">No decisions yet. The lead suggests one when a conversation settles a choice.</p>'}${add}</section>`;
+    const base = { repo };
+    const form = (action, body, extra = {}) => postForm('/settings/knowledge/decision', body, { hidden: fields({ ...base, action, ...extra }) });
+    const rows = decisions.map(d => html `<details class="card decision" id="decision-${d.id}"><summary><strong>${d.claim}</strong> <span class="meta">#${d.id} · ${d.decidedBy} · ${d.decidedAt.slice(0, 10)}</span></summary><p>${d.why}</p><p class="meta">${d.sourceKind}${d.sourceRef ? ` · ${d.sourceRef}` : ''}${d.supersedes === null ? '' : ` · replaces #${d.supersedes}`}</p>${manage ? form('retire', html `<label>Why it no longer holds<input name="reason" maxlength="500" required></label><button type="submit">Retire</button>`, { decision: d.id }) : ''}</details>`);
+    const add = manage ? html `<details class="knowledge-editor"${draft?.claim !== undefined ? html ` open` : ''}><summary>Record a decision</summary>${form('record', html `<label>The choice, in one sentence<input name="claim" maxlength="240" value="${draft?.claim}" required></label><label>Why<textarea name="why" rows="3" maxlength="2000" required>${draft?.why}</textarea></label><button type="submit">Record</button>`)}</details>` : '';
+    return html `<section class="knowledge"><h2>Decisions</h2>${error ? html `<p class="problem" role="alert">${error}</p>` : ''}${rows.length ? rows : html `<p class="meta">No decisions yet. The lead suggests one when a conversation settles a choice.</p>`}${add}</section>`;
 }
 export function memorySearchHtml(repo, query, hits) {
-    const kind = (h) => h.kind === 'decision' ? `<a href="#decision-${e(h.ref)}">decision #${e(h.ref)}</a>` : h.kind === 'conversation' ? 'conversation' : h.kind;
-    const results = hits === null ? '' : hits.length === 0 ? '<p class="meta">Nothing in project memory matches.</p>' : `<ul class="memory-hits">${hits.map(h => `<li><strong>${kind(h)}</strong> · ${e(h.title)}<br><span class="meta">${e(h.snippet)}</span></li>`).join('')}</ul>`;
-    return `<section class="knowledge memory-search"><form method="get" action="/settings/knowledge"><input type="hidden" name="repo" value="${e(repo)}"><label>Search project memory<input name="memory" value="${e(query)}" maxlength="300" placeholder="Search decisions, references, lessons…" type="search" autocomplete="off"></label><button type="submit">Search</button></form>${results}</section>`;
+    const kind = (h) => h.kind === 'decision' ? html `<a href="#decision-${h.ref}">decision #${h.ref}</a>` : h.kind === 'conversation' ? 'conversation' : h.kind;
+    const results = hits === null ? '' : hits.length === 0 ? html `<p class="meta">Nothing in project memory matches.</p>` : html `<ul class="memory-hits">${hits.map(h => html `<li><strong>${kind(h)}</strong> · ${h.title}<br><span class="meta">${h.snippet}</span></li>`)}</ul>`;
+    return html `<section class="knowledge memory-search"><form method="get" action="/settings/knowledge"><input type="hidden" name="repo" value="${repo}"><label>Search project memory<input name="memory" value="${query}" maxlength="300" placeholder="Search decisions, references, lessons…" type="search" autocomplete="off"></label><button type="submit">Search</button></form>${results}</section>`;
 }
 export function proposalsHtml(repo, proposals, status, csrf, canManage) {
     const manage = canManage && !!csrf;
-    const line = status === null ? '' : `<p class="meta memory-stats"><span>${status.sessions.analyzed}/${status.sessions.total} sessions read${status.sessions.failed ? ` · ${status.sessions.failed} failed` : ''}</span><span>${status.openGaps} open gap${status.openGaps === 1 ? '' : 's'}</span><span>Instructions ${status.instructionBytes}/${status.budgetBytes} bytes</span></p>` +
-        `<details class="settings-more"><summary>Read new sessions</summary><p class="meta">Run <code>toolroll memory propose --repo ${e(repo)}</code> on this computer.</p></details>`;
-    const cards = proposals.map(p => `<details class="card proposal" open><summary><strong>${e(p.title)}</strong> <span class="meta">#${p.id} · ${e(p.kind)} · ${p.sessions} sessions</span></summary><p>${e(p.rationale)}</p>${p.beforeText ? `<pre class="knowledge-instructions">- ${e(p.beforeText)}</pre>` : ''}${p.afterText ? `<pre class="knowledge-instructions">+ ${e(p.afterText)}</pre>` : ''}<ul class="memory-evidence">${p.evidence.map(ev => `<li>“${e(ev.quote.slice(0, 200))}” <span class="meta">${e(ev.session.split(':')[0] ?? '')}</span></li>`).join('')}</ul>${manage ? `<form method="post" action="/settings/knowledge/proposal" class="inline">${fields({ csrf, repo, proposal: p.id, decision: 'accept' })}<button type="submit">Accept</button></form> <form method="post" action="/settings/knowledge/proposal" class="inline">${fields({ csrf, repo, proposal: p.id, decision: 'reject' })}<button type="submit">Reject</button></form>` : ''}</details>`).join('');
-    return `<section class="knowledge"><h2>Proposed from sessions</h2>${line}${cards || '<p class="meta">Nothing to review. Suggestions appear when the same mistake shows up in two sessions.</p>'}</section>`;
+    const line = status === null ? '' : html `<p class="meta memory-stats"><span>${status.sessions.analyzed}/${status.sessions.total} sessions read${status.sessions.failed ? ` · ${status.sessions.failed} failed` : ''}</span><span>${status.openGaps} open gap${status.openGaps === 1 ? '' : 's'}</span><span>Instructions ${status.instructionBytes}/${status.budgetBytes} bytes</span></p><details class="settings-more"><summary>Read new sessions</summary><p class="meta">Run <code>toolroll memory propose --repo ${repo}</code> on this computer.</p></details>`;
+    const decide = (p, decision, label) => postForm('/settings/knowledge/proposal', html `<button type="submit">${label}</button>`, { attrs: { class: 'inline' }, hidden: fields({ repo, proposal: p.id, decision }) });
+    const cards = proposals.map(p => html `<details class="card proposal" open><summary><strong>${p.title}</strong> <span class="meta">#${p.id} · ${p.kind} · ${p.sessions} sessions</span></summary><p>${p.rationale}</p>${p.beforeText ? html `<pre class="knowledge-instructions">- ${p.beforeText}</pre>` : ''}${p.afterText ? html `<pre class="knowledge-instructions">+ ${p.afterText}</pre>` : ''}<ul class="memory-evidence">${p.evidence.map(ev => html `<li>“${ev.quote.slice(0, 200)}” <span class="meta">${ev.session.split(':')[0] ?? ''}</span></li>`)}</ul>${manage ? html `${decide(p, 'accept', 'Accept')} ${decide(p, 'reject', 'Reject')}` : ''}</details>`);
+    return html `<section class="knowledge"><h2>Proposed from sessions</h2>${line}${cards.length ? cards : html `<p class="meta">Nothing to review. Suggestions appear when the same mistake shows up in two sessions.</p>`}</section>`;
 }