toolroll 0.9.85 → 0.9.87

package/dist/server/render-settings.js

@@ -1,148 +1,133 @@
 /** Settings pages: the settings home, lead, capabilities and their cards. */
-import { ACCENT_PRESETS, DEFAULT_ACCENT } from "../accent-colors.js";
-import {} from "../brand-icons.js";
-import { brandIconHtml } from "../brand-mark.js";
-import {} from "../browser-workspace.js";
-import { connectionWords } from "../control-ui.js";
 import { isSubscriptionChatProvider, PRICED_MODELS } from "../converse.js";
-import { digestTimes } from "../digest-times.js";
 import { describeCapability } from "../gaps.js";
 import { ABOUT_YOU_LINE_MAX, ABOUT_YOU_MAX_LINES } from "../lead-about.js";
 import { LEAD_NAME_MAX, LEAD_PERSONA_MAX } from "../lead-identity.js";
 import { projectName } from "../project.js";
-import {} from "../provider-connection.js";
-import {} from "../provider.js";
-import { qualityModeTitle } from "../quality.js";
 import { latestVersionNow } from "../releases.js";
-import { RESULT_SHOT_CHOICES } from "../result-shots.js";
 import { isAlive as runnerAlive } from "../runner.js";
-import {} from "../scope.js";
-import { ASSISTANTS } from "../setup-guide.js";
 import {} from "../store.js";
-import { redactToken, TOKEN_ENV } from "../telegram.js";
-import { requestContext } from "./request-context.js";
-import { chatMoney, screen, strokeIcon, when, whenTime } from "./chrome.js";
+import {} from "../telegram.js";
+import { chatMoney, screen, when } from "./chrome.js";
 import { taskHref } from "./http.js";
-import { html, joinHtml, postForm, reauth } from "../html.js";
-import { permissionModeChoices, qualityModeChoices } from "./render-tasks.js";
+import { html, joinHtml, postForm } from "../html.js";
+import { acts, btn, chip, codeLine, disclose, facts, formRow, input, note, notice, select, settingsLink, settingsRecord, settingsSection, textarea } from "./kit.js";
+import { kitSectionForm, SECRET_OPT_OUTS } from "../settings-kit.js";
+import { settingsSubPage } from "../settings-groups-ui.js";
 /** Settings → Lead: one line for what runs the lead and one action; the full form, turning it off and stored keys under Advanced. */
 export function leadSettingsHtml(data) {
     const { config, facts } = data;
     const returnTo = "/settings/lead";
-    const summary = config === null
+    const runs = config === null
         ? data.signedIn !== null
-            ? html `<p>The lead is off.</p>${postForm("/settings/lead/on", html `<button type="submit">Use your ${data.signedIn} sign-in</button>`, { returnTo })}`
-            : html `<p>The lead is off. Sign in an agent on this computer to turn it on:</p><p><code>${data.command}</code></p>${postForm("/lead/check", html `<button type="submit" class="secondary">Check again</button>`, { returnTo })}`
+            ? settingsSection({ id: "lead-runs", title: "What runs the lead", lead: "The lead is off.",
+                body: postForm("/settings/lead/on", acts(btn(`Use your ${data.signedIn} sign-in`, { variant: "primary", type: "submit" })), { returnTo }) })
+            : settingsSection({ id: "lead-runs", title: "What runs the lead", lead: "The lead is off. Sign in an agent on this computer to turn it on:",
+                body: joinHtml([codeLine(data.command), postForm("/lead/check", acts(btn("Check again", { sm: true, type: "submit" })), { returnTo })]) })
         : data.words !== null
-            ? html `<p>The lead uses ${data.words}.</p><p class="meta">${config.model === "default" ? "Its default model" : `Model ${config.model}`} · up to ${config.dailyTurns} turns a day · no dollar spend. Every action it proposes waits for you to confirm it.</p>`
-            : html `<p>The lead uses the ${config.provider === "anthropic-api" ? "Anthropic" : "OpenRouter"} API with ${config.model}.</p><p class="meta">Up to ${chatMoney(config.weeklyCeilingMicrousd)} a week · up to ${config.dailyTurns} turns a day.</p>`;
-    const forget = facts.keyFacts.filter(one => one.state === "stored").map(one => postForm("/chat/config", html `${reauth(html `<input type="password" name="token" placeholder="your password" autocomplete="current-password" aria-label="Your password">`)}<button type="submit" class="secondary">Forget the stored ${one.provider} key</button>`, { attrs: { class: "inline" }, returnTo, hidden: { "forget-key": one.provider } }));
-    return joinHtml([
-        html `<p><a href="/settings">Settings</a></p><h1>Lead</h1>`,
-        data.said === null ? "" : html `<p class="problem" role="status">${data.said}</p>`,
-        html `<section class="card lead-settings" data-lead-settings>${summary}</section>`,
-        data.identity === undefined ? "" : postForm("/settings/lead/identity", html `\
-<label>Name your lead<input name="name" value="${data.identity.name}" maxlength="${LEAD_NAME_MAX}" autocomplete="off" required></label>\
-<label>Persona<textarea name="persona" rows="4" maxlength="${LEAD_PERSONA_MAX}">${data.identity.persona}</textarea></label>\
-<button type="submit">Save</button>${data.saved === true ? html ` <span class="meta" role="status">Saved.</span>` : ""}`, { attrs: { class: "card lead-identity", "data-lead-identity": true } }),
-        // What the lead knows about this person: lines they confirmed in chat or wrote here. Every project, every chat.
-        data.about === undefined ? "" : postForm("/settings/lead/about", html `\
-<label>What your lead knows about you<textarea name="about" rows="${Math.min(10, Math.max(4, data.about.length + 1))}" maxlength="${ABOUT_YOU_MAX_LINES * (ABOUT_YOU_LINE_MAX + 1)}" placeholder="Keep copy terse.&#10;I test changes myself.">${data.about.join("\n")}</textarea></label>\
-<p class="meta">One per line, up to ${ABOUT_YOU_MAX_LINES}.</p>\
-<button type="submit">Save</button>${data.aboutSaved === true ? html ` <span class="meta" role="status">Saved.</span>` : ""}`, { attrs: { class: "card lead-about", "data-lead-about": true } }),
-        // What the lead promised to follow up on; it reports each once, here in chat, and drops it after 7 days.
-        (data.promises ?? []).length === 0 ? "" : html `<section class="card lead-promises" data-lead-promises><h2>Promises</h2><ul class="lead-promise-list">${data.promises.map(one => html `<li data-promise="${one.id}"><p>${one.what}</p><p class="meta">${one.when.charAt(0).toUpperCase() + one.when.slice(1)} · <span class="nowrap">until ${new Date(one.until).toLocaleDateString("en-US", { month: "short", day: "numeric", timeZone: "UTC" })}</span></p>\
-${postForm("/settings/lead/promise/cancel", html `<button type="submit" class="secondary">Cancel</button>`, { attrs: { class: "inline" }, returnTo, hidden: { promise: one.id } })}</li>`)}</ul></section>`,
-        // D5: the lead's subagents, one line each; everything else about one is on its own page.
-        data.subagents === undefined ? "" : html `<section class="card lead-subagents" id="subagents" data-lead-subagents><h2>Subagents</h2>${data.subagents.length === 0 ? html `<p class="meta">None yet. Your lead can ask one for help once it's here.</p>`
-            : html `<ul class="lead-subagent-list">${data.subagents.map(one => html `<li data-subagent="${one.id}"><a href="/settings/lead/subagents/${one.id}">${one.label}</a><span class="meta">${one.project}${one.paused ? " · Paused" : ""}</span></li>`)}</ul>`}<p><a class="button-link" href="/settings/lead/subagents?add=1#add" data-add-subagent>Add subagent</a></p></section>`,
-        html `<details class="lead-advanced" data-lead-advanced><summary>Advanced</summary>`,
-        leadConfigForm(config, facts),
-        config === null ? "" : postForm("/chat/config", html `${reauth(html `<input type="password" name="token" placeholder="your password" autocomplete="current-password" aria-label="Your password">`)}<button type="submit" class="secondary">Turn the lead off</button>`, { attrs: { class: "inline" }, returnTo, hidden: { off: "1" } }),
-        forget,
-        html `</details>`,
-    ], "\n");
+            ? settingsSection({ id: "lead-runs", title: "What runs the lead", lead: `The lead uses ${data.words}.`,
+                body: note(`${config.model === "default" ? "Its default model" : `Model ${config.model}`} · up to ${config.dailyTurns} turns a day · no dollar spend. Every action it proposes waits for you to confirm it.`) })
+            : settingsSection({ id: "lead-runs", title: "What runs the lead", lead: `The lead uses the ${config.provider === "anthropic-api" ? "Anthropic" : "OpenRouter"} API with ${config.model}.`,
+                body: note(`Up to ${chatMoney(config.weeklyCeilingMicrousd)} a week · up to ${config.dailyTurns} turns a day.`) });
+    const savedLine = (shown) => shown ? html `<span class="k-ssave-said" role="status">Saved.</span>` : html ``;
+    const identity = data.identity === undefined ? "" : settingsSection({ id: "lead-identity", title: "Name and persona",
+        body: postForm("/settings/lead/identity", joinHtml([
+            formRow("Name your lead", null, input({ id: "lead-name", name: "name", value: data.identity.name, attrs: { maxlength: LEAD_NAME_MAX, autocomplete: "off", required: true, "aria-label": "Name your lead" } })),
+            formRow("Persona", "How it talks to you.", textarea({ id: "lead-persona", name: "persona", rows: 4, value: data.identity.persona, attrs: { maxlength: LEAD_PERSONA_MAX, "aria-label": "Persona" } }), "top"),
+            html `<div class="k-ssave">${savedLine(data.saved === true)}${btn("Save", { sm: true, type: "submit" })}</div>`,
+        ]), { attrs: { "data-lead-identity": true } }) });
+    // What the lead knows about this person: lines they confirmed in chat or wrote here. Every project, every chat.
+    const about = data.about === undefined ? "" : settingsSection({ id: "lead-about", title: "What your lead knows about you",
+        body: postForm("/settings/lead/about", joinHtml([
+            formRow("About you", `One per line, up to ${ABOUT_YOU_MAX_LINES}. Used in every project and every chat.`, textarea({ id: "lead-about-text", name: "about", rows: Math.min(10, Math.max(4, data.about.length + 1)), value: data.about.join("\n"),
+                attrs: { maxlength: ABOUT_YOU_MAX_LINES * (ABOUT_YOU_LINE_MAX + 1), placeholder: "Keep copy terse.\nI test changes myself.", "aria-label": "What your lead knows about you" } }), "top"),
+            html `<div class="k-ssave">${savedLine(data.aboutSaved === true)}${btn("Save", { sm: true, type: "submit" })}</div>`,
+        ]), { attrs: { "data-lead-about": true } }) });
+    // What the lead promised to follow up on; it reports each once, here in chat, and drops it after 7 days.
+    const promises = (data.promises ?? []).length === 0 ? "" : settingsSection({ id: "lead-promises", title: "Promises", lead: "What the lead said it would follow up on. Each is reported once, then dropped after 7 days.",
+        body: joinHtml(data.promises.map(one => settingsRecord({
+            title: one.what, sub: `${one.when.charAt(0).toUpperCase() + one.when.slice(1)} · until ${new Date(one.until).toLocaleDateString("en-US", { month: "short", day: "numeric", timeZone: "UTC" })}`,
+            action: postForm("/settings/lead/promise/cancel", btn("Cancel", { sm: true, type: "submit" }), { returnTo, hidden: { promise: one.id } }),
+            attrs: { "data-promise": one.id },
+        }))) });
+    // D5: the lead's subagents, one line each; everything else about one is on its own page.
+    const subagents = data.subagents === undefined ? "" : settingsSection({ id: "subagents", title: "Subagents",
+        right: btn("Add subagent", { sm: true, href: "/settings/lead/subagents?add=1#add", attrs: { "data-add-subagent": true } }),
+        body: data.subagents.length === 0 ? note("None yet. Your lead can ask one for help once it's here.")
+            : html `<div class="k-slinks">${data.subagents.map(one => settingsLink({ href: `/settings/lead/subagents/${one.id}`, title: one.label, status: `${one.project}${one.paused ? " · Paused" : ""}` }))}</div>` });
+    // The lead's own key: where each provider's key comes from (never the key), and Forget for a stored one.
+    const keys = settingsSection({ id: "lead-key", title: "The lead's own key",
+        lead: "A direct API key the lead uses instead of a membership. A pasted key is kept in a file only this account can read, never in the database, and never shown again. ANTHROPIC_API_KEY or OPENROUTER_API_KEY in the environment always wins.",
+        body: joinHtml(facts.keyFacts.map(one => settingsRecord({
+            title: one.provider,
+            sub: one.state === "none" ? "No key yet" : one.state === "environment" ? "From the environment" : `stored ${one.tail ?? ""}`.trim(),
+            action: one.state !== "stored" ? "" : kitSectionForm({ proof: "lead-config", action: "/chat/config", id: `lead-forget-${one.provider}`, hidden: { return: returnTo, "forget-key": one.provider },
+                save: { label: "Forget", variant: "danger" }, confirm: `Forget the lead's own ${one.provider} key`, body: html `` }),
+        }))) });
+    const off = config === null ? "" : settingsSection({ id: "lead-off", title: "Turn the lead off",
+        body: kitSectionForm({ proof: "lead-config", action: "/chat/config", id: "lead-off-form", hidden: { return: returnTo, off: "1" },
+            save: { label: "Turn the lead off", variant: "danger" }, confirm: "Turn the lead off", body: note("The lead stops answering until you turn it on again.") }) });
+    return settingsSubPage("agents", "Lead", joinHtml([
+        data.problem ? notice(data.problem.charAt(0).toUpperCase() + data.problem.slice(1)) : data.said === null ? "" : html `<p class="k-notice info" role="status">${data.said}</p>`,
+        runs, identity, about, promises, subagents,
+        disclose("Advanced", joinHtml([leadConfigForm(config, facts), keys, off])),
+    ], "\n"));
 }
-/** The lead's full settings (Settings → Lead → Advanced): provider, model, limits and a direct API key. */
+/** The lead's full settings (Settings → Lead → Advanced): provider, model, limits and the lead's own key. */
 export function leadConfigForm(current, data) {
     const anthropicModels = PRICED_MODELS.filter(one => !one.includes("/"));
     const openrouterModels = data.openrouterModels ?? PRICED_MODELS.filter(one => one.includes("/"));
     const currentSubscription = current !== null && isSubscriptionChatProvider(current.provider);
     const labels = new Map((data.liveModels ?? []).map(one => [one.value, one.label]));
     const models = [...new Set(["default", ...labels.keys(), ...anthropicModels, ...openrouterModels, ...(current === null ? [] : [current.model])])];
-    return joinHtml([
-        postForm("/chat/config", joinHtml([
-            "",
-            html `<label>Provider<select name="provider">`,
-            html `<option value="codex-subscription"${current?.provider === "codex-subscription" ? " selected" : ""}>Codex membership (logged-in CLI)</option>`,
-            html `<option value="claude-subscription"${current?.provider === "claude-subscription" ? " selected" : ""}>Anthropic membership (logged-in CLI)</option>`,
-            html `<option value="anthropic-api"${current?.provider === "anthropic-api" ? " selected" : ""}>anthropic-api (direct API)</option>`,
-            html `<option value="openrouter-api"${current?.provider === "openrouter-api" ? " selected" : ""}>openrouter-api (direct API)</option>`,
-            html `</select></label>`,
-            html `<label>Model <span class="meta">(use default for your membership's current model; direct API models need a pinned price)</span>\
-<input name="model" list="chat-models" value="${current?.model ?? "default"}"><datalist id="chat-models">\
-${models.map(model => html `<option value="${model}">${labels.get(model) ?? ""}</option>`)}</datalist></label>`,
-            data.openrouterModels === null
-                ? html `<p class="meta">With OPENROUTER_API_KEY in the serve environment, this list becomes OpenRouter's full live catalog — each model priced by the party that bills it</p>`
-                : html `<p class="meta">${data.openrouterModels.length} models live from OpenRouter's catalog; saving pins today's price — re-save to re-pin</p>`,
-            currentSubscription
-                ? html `<p class="meta"><strong>No dollar maximum.</strong> Membership chat uses the plan attached to the logged-in CLI; the conversation stays live until you end it, and the daily turn limit still applies.</p>`
-                : html `<label>Weekly ceiling <span class="meta">(direct API only; leave blank when choosing a membership)</span>\
-<input type="text" name="weekly-usd" inputmode="decimal" style="width:8rem" value="${current === null ? "" : (current.weeklyCeilingMicrousd / 1_000_000).toFixed(2)}"></label>`,
-            html `<label>Daily turns <span class="meta">(default 50)</span>\
-<input type="text" name="daily-turns" inputmode="numeric" style="width:8rem" value="${current === null ? "" : String(current.dailyTurns)}"></label>`,
-            currentSubscription
-                ? html `<p class="meta">Authenticate on this machine first with ${current?.provider === "codex-subscription" ? html `<span class="mono">codex login</span>` : html `the <span class="mono">claude</span> CLI`}. Toolroll reuses that cached login and never stores it.</p>`
-                : html `<label>API key <span class="meta">(${data.keyFacts
-                    .map(one => one.state === "none"
-                    ? `${one.provider}: none yet`
-                    : one.state === "environment"
-                        ? `${one.provider}: from the environment`
-                        : `${one.provider}: stored ${one.tail ?? ""}`)
-                    .join(" · ")})</span>\
-<input type="password" name="key" placeholder="direct API only — leave empty to keep" autocomplete="off"></label>`,
-            html `<label>Your password <span class="meta">(typed again to change the provider)</span>\
-${reauth(html `<input type="password" name="token" autocomplete="current-password">`)}</label>`,
-            html `<button type="submit">${current === null ? "turn chat on" : "save"}</button>`,
-            "",
-        ], "\n"), { attrs: { class: "card" }, returnTo: data.returnTo }),
+    const keyWords = data.keyFacts.map(one => one.state === "none" ? `${one.provider}: none yet` : one.state === "environment" ? `${one.provider}: from the environment` : `${one.provider}: stored ${one.tail ?? ""}`.trim()).join(" · ");
+    const body = joinHtml([
+        formRow("Provider", null, select({ id: "lead-provider", name: "provider", label: "Provider", ...(current === null ? {} : { current: current.provider }), items: [
+                ["codex-subscription", "Codex membership (signed-in CLI)"],
+                ["claude-subscription", "Anthropic membership (signed-in CLI)"],
+                ["anthropic-api", "Anthropic API (direct)"],
+                ["openrouter-api", "OpenRouter API (direct)"],
+            ] })),
+        formRow("Model", "Use default for your membership's current model. A direct API model needs a pinned price.", html `${input({ id: "lead-model", name: "model", value: current?.model ?? "default", attrs: { list: "chat-models", "aria-label": "Model" } })}<datalist id="chat-models">\
+${models.map(model => html `<option value="${model}">${labels.get(model) ?? ""}</option>`)}</datalist>`),
+        note(data.openrouterModels === null
+            ? "With OPENROUTER_API_KEY in the serve environment, this list becomes OpenRouter's full live catalog, each model priced by the party that bills it."
+            : `${data.openrouterModels.length} models live from OpenRouter's catalog. Saving pins today's price; save again to pin it again.`),
         currentSubscription
-            ? html `<p class="meta">The membership provider runs without repository tools in a temporary directory; Toolroll remains the only layer that can turn a proposed action into a confirmation card.</p>`
-            : html `<p class="meta">A pasted key is written once to a mode-0600 file beside the database — never INTO the database, never shown again beyond its last characters; an environment variable (\
-<span class="mono">ANTHROPIC_API_KEY</span> / <span class="mono">OPENROUTER_API_KEY</span>) always wins when set</p>`,
-    ], "\n");
+            ? note("No dollar maximum. Membership chat uses the plan of the signed-in CLI; the conversation stays live until you end it, and the daily turn limit still applies.")
+            : formRow("Weekly ceiling", "Direct API only, in dollars. Leave blank when choosing a membership.", input({ id: "lead-weekly", name: "weekly-usd", value: current === null ? "" : (current.weeklyCeilingMicrousd / 1_000_000).toFixed(2), attrs: { inputmode: "decimal", "aria-label": "Weekly ceiling" } })),
+        formRow("Daily turns", "50 when left blank.", input({ id: "lead-turns", name: "daily-turns", value: current === null ? "" : String(current.dailyTurns), attrs: { inputmode: "numeric", "aria-label": "Daily turns" } })),
+        currentSubscription
+            ? note(html `Sign in on this computer first with ${current?.provider === "codex-subscription" ? html `<span class="k-mono">codex login</span>` : html `the <span class="k-mono">claude</span> CLI`}. Toolroll reuses that sign-in and never stores it.`)
+            : formRow("The lead's own key", `Direct API only. Leave empty to keep the one you have. ${keyWords}.`, html `<input class="k-input" id="lead-own-key" type="password" name="key" autocomplete="off" spellcheck="false" autocapitalize="none" data-so-secret data-1p-ignore data-lpignore="${SECRET_OPT_OUTS["data-lpignore"]}" data-bwignore data-form-type="other" aria-label="The lead's own key" placeholder="Paste a key">`),
+    ]);
+    return settingsSection({ id: "lead-config", title: "Model and limits",
+        lead: currentSubscription
+            ? "The membership provider runs without repository tools, in a temporary directory. Only Toolroll can turn an action it proposes into a confirmation card."
+            : "Changing these always asks for your password, typed.",
+        body: kitSectionForm({ proof: "lead-config", action: "/chat/config", id: "lead-config-form", ...(current === null ? {} : { gate: true }), hidden: { return: data.returnTo },
+            save: { label: current === null ? "Turn the lead on" : "Save" }, confirm: current === null ? "Turn the lead on" : "Change the lead's model and limits", body }) });
 }
 export function capsPage(chrome, caps, gaps, repo, now) {
     if (caps === null) {
-        return screen("requirements", joinHtml([
-            html `<h1>Requirements</h1>`,
-            html `<p class="meta">Open a project to see its requirements — <a href="/projects">projects</a></p>`,
-        ], "\n"), { chrome });
+        return screen("requirements", settingsSubPage("approval", "Requirements", note(html `Open a project to see its requirements: <a class="k-link" href="/projects">Projects</a>.`)), { chrome });
     }
-    const list = caps.length === 0
-        ? html `<p>Nothing recorded.</p>`
-        : joinHtml(caps
-            .map(capability => html `<p class="row">${capability.kind}:${capability.name} — \
-${describeCapability(capability, now ?? new Date())}</p>`), "\n");
-    const blocked = gaps.length === 0
-        ? html `<p class="meta">No gaps — everything recorded is verified</p>`
-        : joinHtml(gaps
-            .map(gap => html `<div class="card"><p>${gap.key} — ${gap.state}</p>\
-<p class="meta">${gap.unblocks.length > 0
-            ? `fills → ${gap.unblocks.length} task(s) start: ${gap.unblocks.join(", ")}`
-            : gap.alsoBlocks.length > 0
-                ? `part of what holds: ${gap.alsoBlocks.join(", ")}`
-                : "nothing queued needs it yet"}</p>\
-<p class="meta">Verify: ${gap.verify}</p>\
-<p class="meta">${gap.instructions}</p></div>`), "\n");
-    return screen("requirements", joinHtml([
-        html `<h1>Requirements</h1>`,
-        html `<p class="hint">tools and credentials builds need — each is probed on the worker before any build spends money; values never leave your machine</p>`,
-        list,
-        html `<h2>Missing, ranked by what filling them frees</h2>`,
-        blocked,
-        html `<p class="meta">Read-only here: checks are shell commands you wrote, and a web button that runs shell would need its own security review</p>`,
-    ], "\n"), { chrome });
+    const recorded = settingsSection({ id: "recorded", title: "Recorded",
+        body: caps.length === 0 ? note("Nothing recorded.") : joinHtml(caps.map(capability => settingsRecord({
+            title: html `<span class="k-mono">${capability.kind}:${capability.name}</span>`, sub: describeCapability(capability, now ?? new Date()),
+        }))) });
+    const missing = settingsSection({ id: "missing", title: "Missing", lead: "Ranked by what filling them frees.",
+        body: gaps.length === 0 ? note("Nothing missing. Everything recorded is verified.") : joinHtml(gaps.map(gap => settingsRecord({
+            title: html `<span class="k-mono">${gap.key}</span>${chip(gap.state)}`,
+            sub: gap.unblocks.length > 0
+                ? `Filling it starts ${gap.unblocks.length} task${gap.unblocks.length === 1 ? "" : "s"}: ${gap.unblocks.join(", ")}`
+                : gap.alsoBlocks.length > 0 ? `Part of what holds ${gap.alsoBlocks.join(", ")}` : "Nothing queued needs it yet",
+            more: facts([["Check", codeLine(gap.verify)], ["How to fill it", gap.instructions]]),
+        }))) });
+    return screen("requirements", settingsSubPage("approval", "Requirements", joinHtml([
+        recorded, missing,
+        note("Read-only here: the checks are shell commands you wrote, and a web button that runs them would need its own security review."),
+    ], "\n"), { lead: "Tools and credentials builds need. Each is checked on the builder before any build spends money; values never leave your computer." }), { chrome });
 }
 /** Whether the bot's saved delivery state reports a problem (no new check runs). */
 export function telegramTrouble(store, bot) {
@@ -164,270 +149,6 @@ export function notificationProjects(store, account) {
         .map(one => ({ repo: one.path, name: one.name, muted: muted.has(one.path) }))
         .sort((a, b) => a.name.localeCompare(b.name));
 }
-export function settingsPage(chrome, existing, hasEnv, csrf, problem, messaging = null, push = null, providerKeys = null, digest = null, permissionDefault = null, qualityDefault = null, email = null, telegramDelivery = null, workers = null, updates = null, firstResult = null, chatNotices = null, telegramFailing = false, phone = null) {
-    const permissionCard = permissionDefault === null
-        ? ""
-        : joinHtml([
-            html `<h2>Unattended permissions</h2>`,
-            permissionDefault.canManage && csrf !== ""
-                ? postForm("/settings/permission-default", html `${permissionModeChoices("permission-mode", permissionDefault.mode)}${permissionDefault.mode === "bypassPermissions" ? "" : reauth(html `<label>Your password <span class="meta">(needed for Full access)</span><input type="password" name="password" autocomplete="current-password"></label>`)}<button type="submit">Save default</button>`, { attrs: { class: "card permission-policy" } })
-                : html `<div class="card"><p><strong>${permissionDefault.mode === "bypassPermissions" ? "Full access" : "Auto"}</strong></p><p class="meta">An approver can change this default</p></div>`,
-            permissionDefault.updatedAt === null
-                ? ""
-                : html `<p class="meta settings-changed">Changed ${whenTime(permissionDefault.updatedAt)}${permissionDefault.updatedBy === null ? "" : ` by ${permissionDefault.updatedBy}`}</p>`,
-        ], "\n");
-    const qualityCard = qualityDefault === null
-        ? ""
-        : joinHtml([
-            html `<h2>Quality mode</h2>`,
-            qualityDefault.canManage && csrf !== ""
-                ? postForm("/settings/quality-default", html `${qualityModeChoices("quality-mode", qualityDefault.mode)}<button type="submit">Save default</button>`, { attrs: { class: "card permission-policy", "data-autosave": true } })
-                : html `<div class="card"><p><strong>${qualityModeTitle(qualityDefault.mode)}</strong></p><p class="meta">An approver can change this default</p></div>`,
-            qualityDefault.updatedAt === null
-                ? ""
-                : html `<p class="meta settings-changed">Changed ${whenTime(qualityDefault.updatedAt)}${qualityDefault.updatedBy === null ? "" : ` by ${qualityDefault.updatedBy}`}</p>`,
-        ], "\n");
-    // Quiet chat: this person's own choice. The installation's Telegram cadence only bundles Every step updates.
-    const chatCard = chatNotices === null || csrf === ""
-        ? ""
-        : joinHtml([
-            html `<h3>Chat messages</h3>`,
-            postForm("/settings/notifications", joinHtml([
-                "",
-                html `<label><input type="radio" name="mode" value="quiet"${chatNotices.mode === "quiet" ? " checked" : ""}> Only when I'm needed <span class="meta">· one message per task, updated as it moves</span></label>`,
-                html `<label><input type="radio" name="mode" value="all"${chatNotices.mode === "all" ? " checked" : ""}> Every step <span class="meta">· a new message for each update</span></label>`,
-                html `<label>Evening digest<select name="digest">\
-${digestTimes(chatNotices.digestAt).map(([value, label]) => html `<option value="${value}"${value === (chatNotices.digestAt ?? "off") ? " selected" : ""}>${label}</option>`)}\
-</select></label>`,
-                html `<p class="meta">One message: what finished, what waits, what failed.</p>`,
-                html `<label>Screenshots with results<select name="screenshots">\
-${RESULT_SHOT_CHOICES.map(([value, label]) => html `<option value="${value}"${value === (chatNotices.screenshots ?? "off") ? " selected" : ""}>${label}</option>`)}\
-</select></label>`,
-                html `<button type="submit">Save</button>`,
-                "",
-            ], "\n"), { attrs: { class: "card", "data-autosave": true } }),
-            ...((chatNotices.projects ?? []).length === 0 ? [] : [
-                html `<h3>Projects</h3>`,
-                html `<ul class="card">${chatNotices.projects.map(one => html `<li>${postForm("/settings/notifications/mute", html `${one.name} <span class="meta">· ${one.muted ? "muted" : "pings on"}</span> <button type="submit">${one.muted ? "Unmute" : "Mute"}</button>`, { hidden: { repo: one.repo, pings: one.muted ? null : "on" } })}</li>`)}</ul>`,
-                html `<p class="meta">Muted projects still show in Tasks and the evening digest.</p>`,
-            ]),
-        ], "\n");
-    const digestCard = digest === null || csrf === "" || chatNotices?.mode === "quiet"
-        ? ""
-        : joinHtml([
-            html `<h3>Telegram digest</h3>`,
-            html `<p class="meta">Bundle routine updates. Anything that needs you still arrives at once.</p>`,
-            postForm("/settings/telegram-digest", joinHtml([
-                "",
-                html `<label>Send a digest<select name="every">\
-${[
-                    ["off", "Off: send each update"],
-                    ["30", "every 30 minutes"],
-                    ["60", "every hour"],
-                    ["240", "every 4 hours"],
-                    ["720", "every 12 hours"],
-                    ["1440", "once a day"],
-                ]
-                    .map(([value, label]) => {
-                    const selected = value === "off" ? digest.everyMs === null : digest.everyMs === Number(value) * 60_000;
-                    return html `<option value="${value}"${selected ? " selected" : ""}>${label}</option>`;
-                })}\
-</select></label>`,
-                html `<p class="meta">${digest.everyMs === null
-                    ? ""
-                    : `${digest.held} routine fact(s) held · next digest ${digest.lastSentAt === null ? "at the next bridge pass" : `no earlier than ${new Date(new Date(digest.lastSentAt).getTime() + digest.everyMs).toISOString()}`}`}</p>`,
-                html `<button type="submit">Save digest</button>`,
-                "",
-            ], "\n"), { attrs: { class: "card", "data-autosave": true } }),
-        ], "\n");
-    const keysCard = providerKeys === null || csrf === ""
-        ? ""
-        : joinHtml([
-            html `<h2 id="providers">AI providers</h2><p><a href="/control">Set up this project</a></p>`,
-            html `<p class="meta">Keys stay on this computer and are never shown again.</p>`,
-            html `<details class="settings-more"><summary>How keys are used</summary><p class="meta">A key is used only when that provider’s sign-in is set to API key. With a subscription sign-in the key is kept out of the agent, so your membership never turns into API billing. Keys are private files beside the database, never stored in it.</p></details>`,
-            ...providerKeys.map(one => {
-                // One status row per provider; the controls wait behind Manage.
-                const name = ASSISTANTS[one.provider]?.name ?? one.provider;
-                const status = one.connection !== undefined && one.connection.state === "connected"
-                    ? { tone: "ok", words: [connectionWords(one.connection), one.connection.plan].filter(Boolean).join(" · ") }
-                    : one.mode === "subscription"
-                        ? { tone: one.connection === undefined ? "neutral" : "warn", words: one.connection === undefined ? "Uses its own sign-in" : connectionWords(one.connection) }
-                        : one.connection?.state === "key-works" ? { tone: "ok", words: "API key works" } : one.connection?.state === "key-refused" ? { tone: "warn", words: "API key refused" }
-                            : one.set ? { tone: "ok", words: "API key saved" } : one.ambient ? { tone: "ok", words: "Key from this computer’s environment" } : { tone: "off", words: "Not set up" };
-                return joinHtml([
-                    html `<div class="provider-row" data-provider="${one.provider}">`,
-                    html `<p class="provider-head"><strong>${name}</strong> <span class="provider-status provider-status--${status.tone}"><i aria-hidden="true"></i>${status.words}</span></p>`,
-                    html `<details class="provider-manage"><summary>Manage</summary>`,
-                    postForm("/settings/provider-key", joinHtml([
-                        "",
-                        one.connection === undefined ? "" : html `<p class="provider-connection"><strong>${connectionWords(one.connection)}</strong> ${[one.connection.email, one.connection.plan, one.connection.method].filter(Boolean).join(" · ")} · <button type="submit" class="secondary" formaction="/settings/connection/check" formnovalidate>Check again</button></p>`,
-                        html `<p class="meta">${one.mode === "subscription" ? "Uses its own sign-in, so no API-key spend" : "Uses the API key"} · <span class="mono">${one.envName}</span> · ${one.set ? `key stored${one.updatedAt === null ? "" : ` ${one.updatedAt.slice(0, 10)}`}` : one.ambient ? "key in this server's environment" : "no key stored"}</p>`,
-                        one.subscriptionCapable
-                            ? html `<label>Sign-in<select name="auth-mode">\
-<option value="subscription"${one.mode === "subscription" ? " selected" : ""}>${name} subscription</option>\
-<option value="api-key"${one.mode === "api-key" ? " selected" : ""}>API key</option>\
-</select></label>`
-                            : "",
-                        html `<label>API key<input type="password" name="value" autocomplete="off" placeholder="${one.set ? "Paste to replace the stored key" : "Paste a key"}"></label>`,
-                        html `<button type="submit">Save ${name}</button>`,
-                        one.set
-                            ? html ` <details class="confirm-remove"><summary>Remove the stored key</summary><p class="meta">Runs that use this API key stop until you add one again.</p><button type="submit" formaction="/settings/provider-key-clear" class="danger">Remove key</button></details>`
-                            : "",
-                        "",
-                    ], "\n"), { attrs: { class: "card" }, hidden: { provider: one.provider } }),
-                    html `</details></div>`,
-                ], "\n");
-            }),
-        ], "\n");
-    const pushCard = push === null || csrf === ""
-        ? ""
-        : joinHtml([
-            html `<h3>This device</h3>`,
-            push.available
-                ? joinHtml([
-                    html `<p class="meta">A notification when something needs you. On iPhone, add this app to your Home Screen first.</p>`,
-                    postForm("/push/subscribe", joinHtml([
-                        "",
-                        html `<input type="hidden" name="endpoint" value=""><input type="hidden" name="p256dh" value=""><input type="hidden" name="auth" value="">`,
-                        html `${reauth(html `<label>Your password <input type="password" name="token" autocomplete="current-password"></label>`)}`,
-                        html `<button type="submit" id="push-enable">Get alerts on this device</button>`,
-                        html `<p class="meta" id="push-state"></p>`,
-                        "",
-                    ], "\n"), { attrs: { id: "push-form", class: "card" } }),
-                ], "\n")
-                : html `<p class="meta">Alerts need a secure (https) address for this app.</p>`,
-            ...push.devices
-                .filter(one => one.retiredAt === null || one.retiredReason === "gone")
-                .map(one => html `<p class="row">${one.uaWords} · since ${whenTime(one.createdAt)}\
-${one.retiredAt !== null ? html ` · <span class="meta">expired</span>` : one.consecutiveFailures >= 20 ? html ` · <span class="meta">failing</span>` : ""}\
-${one.retiredAt === null
-                ? html ` ${postForm("/push/remove", html `<button type="submit">Remove</button>`, { attrs: { class: "inline" }, hidden: { id: one.id } })}`
-                : ""}\
-</p>`),
-        ], "\n");
-    // The enrollment behavior rides the ONE composed script (arc 4, finding
-    // 18) — it fills the subscription fields the form posts; it never reads
-    // the password field beside them (the named functional exception).
-    const pushScript = push === null || !push.available || csrf === ""
-        ? null
-        : `(function(){` +
-            `if(!("serviceWorker" in navigator)||!("PushManager" in window))return;` +
-            `var link=document.createElement("link");link.rel="manifest";link.href="/manifest.webmanifest";document.head.appendChild(link);` +
-            `navigator.serviceWorker.register("/sw.js",{scope:"/"}).catch(function(){});` +
-            `var form=document.getElementById("push-form");if(!form)return;` +
-            `form.addEventListener("submit",function(event){` +
-            `if(form.dataset.ready==="1")return;` +
-            `event.preventDefault();var state=document.getElementById("push-state");` +
-            `Notification.requestPermission().then(function(granted){` +
-            `if(granted!=="granted"){if(state)state.textContent="notifications are blocked for this site in the browser settings";return;}` +
-            `return fetch("/push/key").then(function(r){return r.json();}).then(function(d){` +
-            `return navigator.serviceWorker.ready.then(function(reg){` +
-            `return reg.pushManager.subscribe({userVisibleOnly:true,applicationServerKey:Uint8Array.from(atob(d.key.replace(/-/g,"+").replace(/_/g,"/")),function(c){return c.charCodeAt(0);})});});` +
-            `}).then(function(sub){var raw=sub.toJSON();` +
-            `form.querySelector("[name=endpoint]").value=sub.endpoint;` +
-            `form.querySelector("[name=p256dh]").value=(raw.keys.p256dh||"").replace(/\\+/g,"-").replace(/\\//g,"_").replace(/=+$/,"");` +
-            `form.querySelector("[name=auth]").value=(raw.keys.auth||"").replace(/\\+/g,"-").replace(/\\//g,"_").replace(/=+$/,"");` +
-            `form.dataset.ready="1";form.submit();});` +
-            `}).catch(function(){if(state)state.textContent="could not subscribe — the browser said no";});});` +
-            `})();`;
-    const messagingCard = messaging === null || messaging.configured.length === 0
-        ? ""
-        : messaging.configured.length === 1 && !messaging.implicit
-            ? html `<h3>Alert service</h3><p class="provider-head"><strong>${messaging.configured[0]}</strong> <span class="provider-status provider-status--ok"><i aria-hidden="true"></i>Receiving alerts</span></p>`
-            : joinHtml([
-                html `<h3>Alert service</h3>`,
-                html `<p class="meta">Alerts go through one service, so you are never notified twice${messaging.implicit ? html ` · <strong>Several are connected and none was chosen. Pick one.</strong>` : ""}</p>`,
-                postForm("/settings/messaging", joinHtml([
-                    "",
-                    ...messaging.configured.map(channel => html `<label style="display:flex;gap:.5rem;align-items:center"><input type="radio" name="primary" value="${channel}"${channel === messaging.channel ? " checked" : ""}> ${channel}${channel === messaging.channel ? html ` <span class="meta">— receiving alerts now${messaging.implicit ? " (by default, not by choice)" : ""}</span>` : ""}${channel === "telegram" ? html ` <span class="meta">· can carry answer buttons and reply-notes</span>` : html ` <span class="meta">· messages with console links; acting stays here</span>`}</label>`),
-                    html `<button type="submit">Use this service</button>`,
-                    "",
-                ], "\n"), { attrs: { class: "card" } }),
-                html `<p class="meta">Telegram still accepts taps and replies when another service sends alerts.</p>`,
-            ], "\n");
-    const current = hasEnv
-        ? `set in the environment (${TOKEN_ENV}) — that takes precedence over anything saved here`
-        : existing === null
-            ? "not set"
-            : `saved: ${redactToken(existing.token)} (bot ${existing.botId})`;
-    const theme = requestContext.getStore()?.theme ?? "system";
-    const view = {
-        kind: "settings",
-        said: problem,
-        groups: settingsGroups(messaging, telegramFailing),
-        ...(messaging?.legacyWarning ? { legacyWebhookWarning: messaging.legacyWarning } : {}),
-        theme,
-        accent: requestContext.getStore()?.accent ?? DEFAULT_ACCENT,
-        accentPresets: ACCENT_PRESETS,
-        permission: permissionDefault === null ? null : { mode: permissionDefault.mode, canManage: permissionDefault.canManage && csrf !== "", changed: permissionDefault.updatedAt === null ? null : `Changed ${when(permissionDefault.updatedAt)}${permissionDefault.updatedBy === null ? "" : ` by ${permissionDefault.updatedBy}`}` },
-        quality: qualityDefault === null ? null : { mode: qualityDefault.mode, canManage: qualityDefault.canManage && csrf !== "", changed: qualityDefault.updatedAt === null ? null : `Changed ${when(qualityDefault.updatedAt)}${qualityDefault.updatedBy === null ? "" : ` by ${qualityDefault.updatedBy}`}` },
-        providers: providerKeys === null || csrf === "" ? null : providerKeys.map(one => {
-            const name = ASSISTANTS[one.provider]?.name ?? one.provider;
-            const status = one.connection !== undefined && one.connection.state === "connected"
-                ? { tone: "ok", words: [connectionWords(one.connection), one.connection.plan].filter(Boolean).join(" · ") }
-                : one.mode === "subscription"
-                    ? { tone: one.connection === undefined ? "neutral" : "warn", words: one.connection === undefined ? "Uses its own sign-in" : connectionWords(one.connection) }
-                    : one.connection?.state === "key-works" ? { tone: "ok", words: "API key works" } : one.connection?.state === "key-refused" ? { tone: "warn", words: "API key refused" }
-                        : one.set ? { tone: "ok", words: "API key saved" } : one.ambient ? { tone: "ok", words: "Key from this computer’s environment" } : { tone: "off", words: "Not set up" };
-            return {
-                provider: one.provider, name, tone: status.tone, words: status.words,
-                connection: one.connection === undefined ? null : { words: connectionWords(one.connection), facts: [one.connection.email, one.connection.plan, one.connection.method].filter(Boolean).join(" · "), checkAction: "/settings/connection/check" },
-                usage: `${one.mode === "subscription" ? "Uses its own sign-in, so no API-key spend" : "Uses the API key"} · ${one.set ? `key stored${one.updatedAt === null ? "" : ` ${one.updatedAt.slice(0, 10)}`}` : one.ambient ? "key in this server's environment" : "no key stored"}`,
-                envName: one.envName, subscriptionCapable: one.subscriptionCapable, mode: one.mode, set: one.set,
-            };
-        }),
-        services: messaging === null || messaging.configured.length === 0 ? null : { configured: messaging.configured, channel: messaging.channel, implicit: messaging.implicit },
-        push: push === null || csrf === "" ? null : { available: push.available, devices: push.devices.filter(one => one.retiredAt === null || one.retiredReason === "gone").map(one => ({ id: one.id, words: `${one.uaWords} · since ${when(one.createdAt)}`, state: one.retiredAt !== null ? "expired" : one.consecutiveFailures >= 20 ? "failing" : "ok", removable: one.retiredAt === null })) },
-        chat: chatNotices === null || csrf === "" ? null : chatNotices,
-        digest: digest === null || csrf === "" || chatNotices?.mode === "quiet" ? null : { every: digest.everyMs === null ? "off" : String(Math.round(digest.everyMs / 60_000)), held: digest.everyMs === null ? null : `${digest.held} routine fact(s) held` },
-        telegram: { state: hasEnv ? "from the environment" : existing === null ? "not set" : "saved", current, delivery: telegramDelivery },
-        email,
-        workers,
-        updates,
-        firstResult,
-        ...(phone === null ? {} : { phone }),
-    };
-    return screen("Settings", joinHtml([
-        html `<h1>Settings</h1>`,
-        messaging?.legacyWarning ? html `<p data-legacy-webhooks>Legacy webhooks are deprecated. Connect <a href="/settings/slack" style="display:inline-flex;min-height:44px;align-items:center">Slack</a> or <a href="/settings/discord" style="display:inline-flex;min-height:44px;align-items:center">Discord</a> in Chat settings.</p>` : "",
-        settingsTiles(view.groups),
-        phone === null ? "" : phoneSetupHtml(phone),
-        appearanceCard(csrf),
-        permissionCard,
-        qualityCard,
-        keysCard,
-        workersCard(workers),
-        updatesCard(updates),
-        firstResult === null ? "" : html `<p class="meta" data-first-result>${firstResult}</p>`,
-        pushCard === "" && messagingCard === "" && digestCard === "" && chatCard === "" ? "" : html `<h2>Notifications</h2>`,
-        chatCard,
-        messagingCard,
-        pushCard,
-        digestCard,
-        problem === null ? "" : html `<p class="problem" role="alert">${problem}</p>`,
-        html `<details class="settings-more" id="telegram-token"><summary>Telegram bot token <span class="meta">${hasEnv ? "from the environment" : existing === null ? "not set" : "saved"}</span></summary>`,
-        html `<p class="meta">Current: ${current}</p>`,
-        telegramDelivery === null ? "" : html `<p class="meta" data-telegram-delivery>${telegramDelivery}</p>`,
-        postForm("/settings/telegram-token", joinHtml([
-            "",
-            html `<label>Token from @BotFather<input type="password" name="token" autocomplete="off"></label>`,
-            html `<button type="submit">Save token</button>`,
-            "",
-        ], "\n")),
-        html `<p class="meta">Stored privately on this computer. Then pair your phone under <a href="/settings/telegram">Telegram</a>. In Telegram, send <code>/status</code>, <code>/task &lt;id&gt;</code> or <code>/help</code>; these use no AI model.</p>`,
-        html `</details>`,
-    ], "\n"), { chrome, workspace: { view }, functional: { script: SETTINGS_AUTOSAVE_SCRIPT + (pushScript ?? ""), ...(pushScript === null ? {} : { fetches: true }) } });
-}
-/** The phone setup for the server-rendered Settings page: the same choices as the React card. */
-export function phoneSetupHtml(phone) {
-    const [first, ...others] = phone.chatApps;
-    return html `<section class="card" id="phone" aria-labelledby="phone-card-title" data-phone-card><h2 id="phone-card-title">Use it from your phone</h2>\
-<p>${first === undefined ? "" : html `<a href="${first.href}">Pair ${first.label}</a>`}${others.length === 0 ? "" : html ` · or ${joinHtml(others.map(one => html `<a href="${one.href}">${one.label}</a>`), ", ")}`}</p>\
-<p class="meta" data-phone-tailnet>${phone.tailnet === null ? html `Or install <a href="https://tailscale.com/download">Tailscale</a> on this computer and your phone, then reload this page for the address.`
-        : phone.tailnet.restart === null ? html `Or on your phone open <code>${phone.tailnet.address}</code> and sign in.`
-            : html `Or start Toolroll with <code>${phone.tailnet.restart}</code>, then on your phone open <code>${phone.tailnet.address}</code> and sign in.`}</p></section>`;
-}
 /** Every worker that is not retired: its capacity, and the tasks it holds now. */
 export function settingsWorkers(store, now) {
     const claims = store.liveClaims(null, now);
@@ -449,39 +170,6 @@ export function settingsWorkers(store, now) {
         };
     });
 }
-/** The page's workers section, for browsers without the app script. */
-export function workersCard(workers) {
-    if (workers === null)
-        return html ``;
-    return html `<section id="workers" aria-labelledby="workers-title"><h2 id="workers-title">Workers</h2>\
-${workers.length === 0
-        ? html `<p class="meta">No worker is connected. Run <code>toolroll up</code> on the computer with your projects.</p>`
-        : html `${workers.map(one => html `<div class="card" data-worker="${one.name}"><p class="row"><strong>${one.name}</strong> <span class="meta">${one.state}</span>\
-<span class="right">${one.busy} of ${one.capacity} running</span></p>\
-${one.running.length === 0
-            ? html `<p class="meta">Nothing running.</p>`
-            : html `<ul>${one.running.map(task => html `<li><a href="${task.href}">${task.title}</a>${task.project === null ? "" : html ` <span class="meta">${task.project}</span>`}</li>`)}</ul>`}\
-</div>`)}\
-<p class="meta">To change how many a worker runs at once: <code>toolroll runner capacity &lt;name&gt; &lt;n&gt;</code></p>`}\
-</section>`;
-}
-/** Settings → Updates, for browsers without the app script. */
-export function updatesCard(updates) {
-    if (updates === null)
-        return html ``;
-    const latest = updates.latest;
-    return html `<section id="updates" aria-labelledby="updates-title"><h2 id="updates-title">Updates</h2>\
-<p class="row">This version <span class="mono">${updates.current}</span> · ${!updates.check.on ? "Update checks are off" : latest === null ? "Not checked yet" : latest.newer ? html `Latest <span class="mono">${latest.version}</span>` : "Up to date"}</p>\
-${latest !== null && latest.newer
-        ? html `<p>Update with <code>${updates.updateCommand}</code> · <a href="${latest.url}">Release notes</a></p>\
-${latest.notes === "" ? "" : html `<details class="settings-more"><summary>What's new in ${latest.version}</summary><pre class="update-notes">${latest.notes}</pre></details>`}`
-        : ""}\
-${updates.check.canManage && !updates.check.byEnv
-        ? postForm("/settings/updates/checks", html `<button type="submit">${updates.check.on ? "Turn off daily check" : "Turn on daily check"}</button>`, { attrs: { class: "inline" }, hidden: { check: updates.check.on ? "off" : "on" } })
-        : updates.check.byEnv ? html `<p class="meta">Off by TOOLROLL_NO_UPDATE_CHECK.</p>` : ""}\
-${updates.workers.length === 0 ? "" : html `<ul>${updates.workers.map(one => html `<li data-worker-version="${one.name}">${one.name} <span class="mono">${one.version ?? "unknown"}</span>${one.older ? " · older" : ""}</li>`)}</ul>`}\
-</section>`;
-}
 /** Choices save the moment they change; without the script the Save
  * button stays and the form works the same. */
 export const SETTINGS_AUTOSAVE_SCRIPT = `(function(){document.querySelectorAll('form[data-autosave]').forEach(function(form){form.classList.add('js-autosave');form.addEventListener('change',function(ev){var t=ev.target;if(t&&(t.type==='radio'||t.tagName==='SELECT')){if(form.requestSubmit)form.requestSubmit();else form.submit();}});});})();`;
@@ -501,82 +189,3 @@ export async function latestReleaseFor(latest) {
         latestSeen = { at: Date.now(), value };
     return value;
 }
-/** Settings destinations under short headings: an icon and a name each, and a chat app's logo and state. */
-export function settingsTiles(groups) {
-    return html `<nav class="settings-tiles" aria-label="Settings sections">${groups.map(group => html `<section aria-label="${group.title}"><h2>${group.title}</h2><div>${group.tiles.map(tile => html `<a href="${tile.href}">${tile.brand === undefined ? strokeIcon(SETTINGS_TILE_ICONS.get(tile.href) ?? html ``) : brandIconHtml(tile.brand)}<span>${tile.label}${tile.status === undefined ? "" :
-        html `<span class="provider-status provider-status--${tile.status.tone}"><i aria-hidden="true"></i>${tile.status.words}</span>`}</span></a>`)}</div></section>`)}</nav>`;
-}
-/** Each destination once, in order: a group's heading, then its [href, label, icon] tiles. */
-export const SETTINGS_GROUPS = [
-    ["Agents", [
-            ["/settings/lead", "Lead", html `<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M8 9h8M8 13h5"/>`],
-            ["/settings/models", "Models", html `<rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 2v2M15 2v2M9 20v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2"/>`],
-            ["/settings/spend", "Spend", html `<circle cx="12" cy="12" r="9"/><path d="M15 9.5c-.6-.9-1.7-1.5-3-1.5-1.7 0-3 .9-3 2s1.3 1.7 3 2 3 .9 3 2-1.3 2-3 2c-1.3 0-2.4-.6-3-1.5M12 6v2M12 16v2"/>`],
-            ["/settings/skills", "Skills", html `<path d="m12 3 1.9 5.8L20 10l-5 3.6L16.8 20 12 16.4 7.2 20 9 13.6 4 10l6.1-1.2z"/>`],
-            ["/settings/tools", "Tools", html `<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>`],
-            ["/settings/knowledge", "Knowledge", html `<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5z"/><path d="M4 19.5A2.5 2.5 0 0 0 6.5 22H20v-5"/>`],
-            ["/settings/learning", "Learning", html `<path d="M3 3v18h18"/><path d="m7 15 4-4 3 3 5-6"/>`],
-        ]],
-    ["Automation", [
-            ["/settings/flows", "Flows", html `<rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/><path d="M10 6.5h4a3 3 0 0 1 3 3V14"/>`],
-            ["/settings/integrations", "Integrations", html `<path d="M9 2v6M15 2v6"/><path d="M6 8h12v4a6 6 0 0 1-12 0z"/><path d="M12 18v4"/>`],
-        ]],
-    ["Chat apps", [
-            ["/settings/telegram", "Telegram", html ``],
-            ["/settings/slack", "Slack", html ``],
-            ["/settings/discord", "Discord", html ``],
-            ["/settings/teams", "Teams", html ``],
-        ]],
-    ["Access and rules", [
-            ["/settings/sign-in", "Sign-in", html `<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>`],
-            ["/settings/passwordless", "Passwordless", html `<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/>`],
-            ["/settings/sessions", "Sessions & tokens", html `<circle cx="7.5" cy="15.5" r="5.5"/><path d="m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3"/>`],
-            ["/settings/project", "Project", html `<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>`],
-            ["/settings/policy", "Policy", html `<path d="M9 12l2 2 4-4"/><rect x="4" y="3" width="16" height="18" rx="2"/>`],
-            ["/settings/approval", "Approval rules", html `<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/>`],
-        ]],
-    ["System", [
-            ["/settings/monitoring", "Monitoring", html `<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>`],
-            ["/settings/retention", "Retention", html `<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>`],
-            ["/settings/storage", "Storage", html `<path d="M22 12H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/><path d="M6 16h.01M10 16h.01"/>`],
-            ["/settings/updates", "Updates", html `<path d="M21 12a9 9 0 1 1-2.64-6.36"/><path d="M21 3v6h-6"/>`],
-            ["/settings/backups", "Backups", html `<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14c0 1.7 4 3 9 3s9-1.3 9-3V5"/><path d="M3 12c0 1.7 4 3 9 3s9-1.3 9-3"/>`],
-            ["/settings/data", "Data", html `<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/><path d="M12 15V3"/>`],
-        ]],
-];
-export const SETTINGS_TILE_ICONS = new Map(SETTINGS_GROUPS.flatMap(([, tiles]) => tiles.map(([href, , icon]) => [href, icon])));
-export const CHAT_APP_TILES = { "/settings/telegram": "telegram", "/settings/slack": "slack", "/settings/discord": "discord", "/settings/teams": "teams" };
-/**
- * The settings groups, with each chat app's state from what the server already holds: not set up,
- * connected, or getting alerts (only when that service was chosen, or is the only one).
- * A Telegram bot whose saved delivery state reports a problem says so instead. With no config folder
- * the state is unknown, so the tiles carry none.
- */
-export function settingsGroups(messaging, telegramFailing = false) {
-    return SETTINGS_GROUPS.map(([title, tiles]) => ({
-        title,
-        tiles: tiles.map(([href, label]) => {
-            const app = CHAT_APP_TILES[href];
-            if (app === undefined)
-                return { href, label };
-            if (messaging === null)
-                return { href, label, brand: app };
-            if (!messaging.configured.includes(app))
-                return { href, label, brand: app, status: { tone: "off", words: "Not set up" } };
-            if (app === "telegram" && telegramFailing)
-                return { href, label, brand: app, status: { tone: "warn", words: "Has a problem" } };
-            return { href, label, brand: app, status: { tone: "ok", words: messaging.channel === app && !messaging.implicit ? "Gets alerts" : "Connected" } };
-        }),
-    }));
-}
-/** Light, dark or the device's choice, one tap each. Per browser (a cookie). */
-export function appearanceCard(csrf) {
-    if (csrf === "")
-        return html ``;
-    const pinned = requestContext.getStore()?.theme ?? null;
-    const current = pinned ?? "system";
-    const option = (value, label) => html `<button type="submit" name="theme" value="${value}" class="theme-choice" aria-pressed="${String(current === value)}">${label}</button>`;
-    return html `<section class="appearance" aria-labelledby="appearance-title"><h2 id="appearance-title">Appearance</h2>\
-${postForm("/settings/appearance", html `${option("system", "Match device")}${option("light", "Light")}${option("dark", "Dark")}`, { attrs: { class: "theme-switch" } })}\
-<p class="meta">Saved in this browser.</p></section>`;
-}