toolroll 0.9.54 → 0.9.56

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/invoke.js

@@ -353,7 +353,7 @@ export async function invokeAgent(store, runId, spec, invocation, options) {
     const evidence = spec.provider === "claude" ? claudeBillingFrom(billingSeen)
         // Codex signed in with ChatGPT is its plan, unless its plan is itself billed by use (seen by the console's probe).
         : codexLogin === "subscription" ? seenBilling(store.handle, "codex") ?? "subscription" : codexLogin;
-    // What this computer's Claude does with no key from us (teammates and drafts bill the same way): learnt only from a
+    // What this computer's Claude does with no key from us (subagents and drafts bill the same way): learnt only from a
     // run we gave no key that got as far as an answer.
     if (spec.provider === "claude" && managedKey === null && authMode === "subscription" && billingSeen.answered && evidence !== null) {
         store.recordProviderBilling("claude", evidence, new Date());

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 { SUBAGENT_TEMPLATES } from "./subagents.js";
+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}` +
@@ -13,34 +12,33 @@ export const KITS_CSS = `.kits{max-width:960px;min-width:0}.kits-lede{color:var(
     `.kit-steps .kit-step-said{flex:1;min-width:0}.kit-steps li[data-done="true"] .kit-step-said{color:var(--so-muted)}.kit-steps form{margin:0}.kit-steps button,.kit-steps .kit-step-go{min-height:40px;white-space:nowrap}` +
     `.kit-steps .kit-step-go{display:inline-flex;align-items:center;padding:0 12px;border:1px solid var(--so-line);border-radius:8px;text-decoration:none;font-size:.9rem}` +
     `@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(); };
+const subagentWords = (kit) => { const template = SUBAGENT_TEMPLATES.find(one => one.id === kit.subagent.template); return template === undefined ? kit.subagent.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 name = kit.subagent.handle.charAt(0).toUpperCase() + kit.subagent.handle.slice(1);
+        const gets = `${name} (${subagentWords(kit)}) · the ${kit.flowName} flow${kit.tools.length === 0 ? "" : ` · works with ${kit.tools.map(one => one.label).join(" and ")}`}`;
+        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: a subagent, 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/kits.d.ts

@@ -1,7 +1,7 @@
 import { type FlowStepInput } from "./flows.js";
-import type { FlowRow, Store, TeammateRow } from "./store.js";
-import { type ToolIo } from "./teammate-tools.js";
-/** A tool a kit's teammate works better with: the catalog entry that connects it, and why. */
+import type { FlowRow, Store, SubagentRow } from "./store.js";
+import { type ToolIo } from "./subagent-tools.js";
+/** A tool a kit's subagent works better with: the catalog entry that connects it, and why. */
 export type KitTool = {
     tool: string;
     label: string;
@@ -11,8 +11,8 @@ export type Kit = {
     id: string;
     name: string;
     promise: string;
-    /** The teammate it hires: a template, and the name it starts with. */
-    teammate: {
+    /** The subagent it hires: a template, and the name it starts with. */
+    subagent: {
         template: string;
         handle: string;
     };
@@ -38,23 +38,23 @@ type Done = {
     ok: true;
     said: string;
     flow: number;
-    teammate: number;
+    subagent: number;
 } | {
     ok: false;
     said: string;
 };
-/** A kit set up in a project: its flow (by name) and its teammate, when both are there. */
+/** A kit set up in a project: its flow (by name) and its subagent, when both are there. */
 export declare function kitInstalled(store: Store, kit: Kit, repo: string): {
     flow: FlowRow;
-    mate: TeammateRow;
+    mate: SubagentRow;
 } | null;
 /**
- * Set a kit up: its teammate (kept if one of that name is already there), its
- * flow, and its button triggers; then its teammate may use whichever of the
+ * Set a kit up: its subagent (kept if one of that name is already there), its
+ * flow, and its button triggers; then its subagent may use whichever of the
  * kit's tools the project already has (reading free, writing asking first).
  */
 export declare function setUpKit(store: Store, kit: Kit, repo: string, by: string, now: Date, dir: string | null, io?: ToolIo): Promise<Done>;
-/** The same, all at once (a chat confirmation can't wait on a tool): its teammate is given the kit's connected tools by the names their last test found, and each is listed properly on its first turn. */
+/** The same, all at once (a chat confirmation can't wait on a tool): its subagent is given the kit's connected tools by the names their last test found, and each is listed properly on its first turn. */
 export declare function setUpKitNow(store: Store, kit: Kit, repo: string, by: string, now: Date, dir: string | null, grantByName?: boolean): Done;
 /** One line of a kit's checklist: done, or the next step with where to take it. */
 export type KitStep = {
@@ -67,7 +67,7 @@ export type KitStep = {
 };
 /** What's set up and what's left, read fresh each time. */
 export declare function kitChecklist(store: Store, kit: Kit, repo: string, dir: string | null): KitStep[];
-/** A sample card in the kit's first zone, so its teammate starts on it at once. */
+/** A sample card in the kit's first zone, so its subagent starts on it at once. */
 export declare function addKitSample(store: Store, kit: Kit, repo: string, by: string, now: Date): {
     ok: true;
     href: string;

package/dist/kits.js

@@ -1,8 +1,8 @@
 /**
- * Starter kits: a working setup in one click — an AI teammate, the flow
+ * Starter kits: a working setup in one click — a subagent, the flow
  * it works, and the triggers that are safe to add straight away — plus a
  * checklist of what's left (connect email, connect a tool) and a sample card
- * that shows the teammate at work within seconds.
+ * that shows the subagent at work within seconds.
  *
  * A kit adds nothing a person couldn't add by hand, and nothing that acts
  * outside: replies go out only after you approve them, a code change is filed
@@ -16,17 +16,17 @@ import { googleConnected } from "./google-mail.js";
 import { readEmailSettings } from "./email-settings.js";
 import { mailboxReady } from "./mailbox.js";
 import { projectToolsOf } from "./project-tools.js";
-import { createTeammateFrom, nameOf } from "./teammate-admin.js";
-import { grantListed, grantTool } from "./teammate-tools.js";
-import { TEAMMATE_TEMPLATES } from "./teammates.js";
+import { createSubagentFrom, nameOf } from "./subagent-admin.js";
+import { grantListed, grantTool } from "./subagent-tools.js";
+import { SUBAGENT_TEMPLATES } from "./subagents.js";
 export const KITS = [
     {
         id: "support-desk", name: "Support desk",
         promise: "Maya answers customer emails, looks orders up and refunds within limits you set. You approve each reply before it goes out.",
-        teammate: { template: "support", handle: "maya" },
+        subagent: { template: "support", handle: "maya" },
         flowName: "Support desk",
         steps: [
-            { id: "answer", title: "Maya answers", kind: "teammate", teammate: "maya",
+            { id: "answer", title: "Maya answers", kind: "subagent", subagent: "maya",
                 instructions: "Read the customer's message. Look things up (and refund, within your rules) with your tools when it helps. Write the reply we'd send in \"text\". Pick Reply when it's ready for the customer, or Needs a person when your rules say to ask first or you can't help.",
                 routes: [{ answer: "Reply", goesTo: "You check the reply" }, { answer: "Needs a person", goesTo: "For you" }], ifFails: "For you" },
             { id: "check", title: "You check the reply", kind: "approval", decider: "owner", next: "Send it", ifFails: "Maya answers" },
@@ -44,10 +44,10 @@ export const KITS = [
     {
         id: "bug-triage", name: "Bug triage",
         promise: "Theo reads every new issue, says what it is and how urgent, answers questions, and turns real bugs into fixes you approve.",
-        teammate: { template: "triage", handle: "theo" },
+        subagent: { template: "triage", handle: "theo" },
         flowName: "Bug triage",
         steps: [
-            { id: "sort", title: "Theo sorts it", kind: "teammate", teammate: "theo",
+            { id: "sort", title: "Theo sorts it", kind: "subagent", subagent: "theo",
                 instructions: "Read the report. In \"text\", say in one or two sentences what it is and how urgent (for a bug, add what you'd check first; for a question, write the answer). Pick Bug for something broken in this project's code, Question for someone asking how something works, or Duplicate or noise for anything else, saying why.",
                 routes: [{ answer: "Bug", goesTo: "Fix it" }, { answer: "Question", goesTo: "Answered" }, { answer: "Duplicate or noise", goesTo: "Closed" }], ifFails: "For you" },
             { id: "fix", title: "Fix it", kind: "task", planning: "auto", instructions: "Fix the bug this card reports. Theo's notes on it: {{stage.sort}}", next: "You review the fix" },
@@ -67,10 +67,10 @@ export const KITS = [
     {
         id: "sales-follow-up", name: "Sales follow-up",
         promise: "Leo writes back to every new lead within minutes, you approve the email, and it waits for their answer, so no lead goes cold.",
-        teammate: { template: "sales", handle: "leo" },
+        subagent: { template: "sales", handle: "leo" },
         flowName: "Sales follow-up",
         steps: [
-            { id: "write", title: "Leo writes back", kind: "teammate", teammate: "leo",
+            { id: "write", title: "Leo writes back", kind: "subagent", subagent: "leo",
                 instructions: "Read the lead. In \"text\", write a short, friendly first reply that answers what they asked and suggests one clear next step. Pick Write back, or Not a fit (say why).",
                 routes: [{ answer: "Write back", goesTo: "You check it" }, { answer: "Not a fit", goesTo: "Not a fit" }], ifFails: "Not a fit" },
             { id: "check", title: "You check it", kind: "approval", decider: "owner", next: "Send it", ifFails: "Leo writes back" },
@@ -87,10 +87,10 @@ export const KITS = [
     {
         id: "ops-requests", name: "Ops requests",
         promise: "Ada approves routine requests under $200 without you and brings you everything else, so the team gets answers the same day.",
-        teammate: { template: "ops", handle: "ada" },
+        subagent: { template: "ops", handle: "ada" },
         flowName: "Ops requests",
         steps: [
-            { id: "decide", title: "Ada decides", kind: "approval", teammate: "ada", decider: "owner", next: "Tell the team", ifFails: "Needs more" },
+            { id: "decide", title: "Ada decides", kind: "approval", subagent: "ada", decider: "owner", next: "Tell the team", ifFails: "Needs more" },
             { id: "tell", title: "Tell the team", kind: "notify", message: "Approved: {{card.title}}", next: "Done" },
             { id: "more", title: "Needs more", kind: "inbox" },
             { id: "done", title: "Done", kind: "done" },
@@ -104,22 +104,22 @@ export const KITS = [
     },
 ];
 export const kitOf = (id) => KITS.find(one => one.id === id) ?? null;
-/** A kit set up in a project: its flow (by name) and its teammate, when both are there. */
+/** A kit set up in a project: its flow (by name) and its subagent, when both are there. */
 export function kitInstalled(store, kit, repo) {
-    const mate = store.teammateByHandle(repo, kit.teammate.handle);
+    const mate = store.subagentByHandle(repo, kit.subagent.handle);
     const flow = store.listFlows([repo]).find(one => one.name === kit.flowName && one.state === "active") ?? null;
     return mate === null || flow === null ? null : { flow, mate };
 }
 /**
- * Set a kit up: its teammate (kept if one of that name is already there), its
- * flow, and its button triggers; then its teammate may use whichever of the
+ * Set a kit up: its subagent (kept if one of that name is already there), its
+ * flow, and its button triggers; then its subagent may use whichever of the
  * kit's tools the project already has (reading free, writing asking first).
  */
 export async function setUpKit(store, kit, repo, by, now, dir, io = {}) {
     const made = setUpKitNow(store, kit, repo, by, now, dir);
     if (!made.ok || made.said.endsWith("already set up here."))
         return made;
-    const mate = store.getTeammate(made.teammate);
+    const mate = store.getSubagent(made.subagent);
     const present = new Set(projectToolsOf(store, repo).map(one => one.name));
     for (const tool of kit.tools.filter(one => present.has(one.tool))) {
         try {
@@ -129,20 +129,20 @@ export async function setUpKit(store, kit, repo, by, now, dir, io = {}) {
     }
     return made;
 }
-/** The same, all at once (a chat confirmation can't wait on a tool): its teammate is given the kit's connected tools by the names their last test found, and each is listed properly on its first turn. */
+/** The same, all at once (a chat confirmation can't wait on a tool): its subagent is given the kit's connected tools by the names their last test found, and each is listed properly on its first turn. */
 export function setUpKitNow(store, kit, repo, by, now, dir, grantByName = false) {
     const had = kitInstalled(store, kit, repo);
     if (had !== null)
-        return { ok: true, said: `${kit.name} is already set up here.`, flow: had.flow.id, teammate: had.mate.id };
-    let mate = store.teammateByHandle(repo, kit.teammate.handle);
+        return { ok: true, said: `${kit.name} is already set up here.`, flow: had.flow.id, subagent: had.mate.id };
+    let mate = store.subagentByHandle(repo, kit.subagent.handle);
     if (mate === null) {
-        const template = TEAMMATE_TEMPLATES.find(one => one.id === kit.teammate.template);
+        const template = SUBAGENT_TEMPLATES.find(one => one.id === kit.subagent.template);
         if (template === undefined)
-            return { ok: false, said: "That kit's teammate template is missing." };
-        const made = createTeammateFrom(store, { repo, template: template.id, by }, now);
+            return { ok: false, said: "That kit's subagent template is missing." };
+        const made = createSubagentFrom(store, { repo, template: template.id, by }, now);
         if (!made.ok)
             return { ok: false, said: made.said };
-        mate = store.getTeammate(made.id);
+        mate = store.getSubagent(made.id);
     }
     let definition;
     try {
@@ -158,7 +158,7 @@ export function setUpKitNow(store, kit, repo, by, now, dir, grantByName = false)
     if (grantByName)
         for (const tool of projectToolsOf(store, repo).filter(one => kit.tools.some(each => each.tool === one.name)))
             grantListed(store, mate, tool, null, by, now);
-    return { ok: true, said: `${kit.name} is ready: ${nameOf(mate)} works its ${kit.flowName} flow.`, flow: flowId, teammate: mate.id };
+    return { ok: true, said: `${kit.name} is ready: ${nameOf(mate)} works its ${kit.flowName} flow.`, flow: flowId, subagent: mate.id };
 }
 /** What's set up and what's left, read fresh each time. */
 export function kitChecklist(store, kit, repo, dir) {
@@ -167,7 +167,7 @@ export function kitChecklist(store, kit, repo, dir) {
         return [];
     const name = nameOf(set.mate);
     const steps = [
-        { id: "teammate", done: true, said: `${name} joined the team`, href: `/teammates/${set.mate.id}` },
+        { id: "subagent", done: true, said: `${name} joined the team`, href: `/settings/lead/subagents/${set.mate.id}` },
         { id: "flow", done: true, said: `The ${kit.flowName} flow is ready`, href: `/flows/${set.flow.id}` },
     ];
     if (kit.email === true) {
@@ -184,18 +184,18 @@ export function kitChecklist(store, kit, repo, dir) {
     const tools = projectToolsOf(store, repo);
     for (const tool of kit.tools) {
         const connected = tools.some(one => one.name === tool.tool);
-        const granted = store.teammateGrant(set.mate.id, tool.tool) !== null;
+        const granted = store.subagentGrant(set.mate.id, tool.tool) !== null;
         steps.push(connected && granted
-            ? { id: `tool-${tool.tool}`, done: true, said: `${name} can use ${tool.label}`, href: `/teammates/${set.mate.id}#tools` }
+            ? { id: `tool-${tool.tool}`, done: true, said: `${name} can use ${tool.label}`, href: `/settings/lead/subagents/${set.mate.id}#tools` }
             : connected
-                ? { id: `tool-${tool.tool}`, done: false, said: `Let ${name} use ${tool.label}, ${tool.why}`, href: `/teammates/${set.mate.id}#tools` }
+                ? { id: `tool-${tool.tool}`, done: false, said: `Let ${name} use ${tool.label}, ${tool.why}`, href: `/settings/lead/subagents/${set.mate.id}#tools` }
                 : { id: `tool-${tool.tool}`, done: false, said: `Connect ${tool.label}, ${tool.why}`, href: `/settings/tools?repo=${encodeURIComponent(repo)}&kit=${kit.id}&connect=${tool.tool}#connect`, action: "connect", tool: tool.tool });
     }
     const tried = store.flowCards(set.flow.id, true).length > 0;
     steps.push({ id: "sample", done: tried, said: tried ? `${name} has worked a card` : `See ${name} work a sample card`, href: tried ? `/flows/${set.flow.id}` : null, ...(tried ? {} : { action: "sample" }) });
     return steps;
 }
-/** A sample card in the kit's first zone, so its teammate starts on it at once. */
+/** A sample card in the kit's first zone, so its subagent starts on it at once. */
 export function addKitSample(store, kit, repo, by, now) {
     const set = kitInstalled(store, kit, repo);
     if (set === null)