toolroll 0.9.86 → 0.9.88

package/dist/policy-ui.d.ts

@@ -7,7 +7,8 @@
 import { type Html } from "./html.js";
 import type { LedgerEntry } from "./action-ledger.js";
 import { type SavedPolicy } from "./policy.js";
-export declare const POLICY_CSS: string;
+/** The old look; the page is built from the kit now. Kept for chrome.ts, which still concatenates it. */
+export declare const POLICY_CSS = "";
 export type PolicyView = {
     policy: SavedPolicy;
     history: LedgerEntry[];
@@ -15,7 +16,7 @@ export type PolicyView = {
     /** The project tools here, as a hint for the tools list. */
     toolNames: string[];
 };
-export declare function policyHtml(view: PolicyView, notice: {
+export declare function policyHtml(view: PolicyView, outcome: {
     said?: string | null;
     problem?: string | null;
 }): Html;

package/dist/policy-ui.js

@@ -4,33 +4,39 @@
  * action ledger. Anyone signed in reads it; an instance operator changes it
  * with their password.
  */
-import { html, postForm, reauth } from "./html.js";
+import { html, joinHtml } from "./html.js";
 import { whenUtc } from "./when-html.js";
 import { LEVEL_HINTS, LEVEL_NAMES, PERMISSION_LEVELS, POLICY_PROVIDERS, PROVIDER_NAMES, policyParts } from "./policy.js";
-export const POLICY_CSS = `.policy{max-width:720px;min-width:0}.policy dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin:12px 0 0;font-size:.875rem}` +
-    `.policy dt{color:var(--muted-foreground)}.policy dd{margin:0;overflow-wrap:anywhere}.policy fieldset{border:0;padding:0;margin:20px 0 0;min-width:0}` +
-    `.policy legend{font-weight:600;font-size:.875rem;margin-bottom:8px}.policy legend{padding:0}.policy .providers{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:0 16px}.policy .providers label{display:flex;gap:8px;align-items:center;min-height:44px;margin:0;padding:0;font-weight:400}` +
-    `.policy .choice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;margin:0 0 10px;font-weight:400}.policy .choice input{margin:.2rem 0 0}` +
-    `.policy .choice strong{display:block;font-size:.875rem;font-weight:500}.policy .choice small,.policy .hint{display:block;color:var(--muted-foreground);font-size:.8125rem;margin-top:2px}` +
-    `.policy textarea{width:100%;min-height:72px;font-family:var(--font-mono);font-size:.8125rem;box-sizing:border-box}.policy .step-up{margin-top:18px}.policy button[type=submit]{margin-top:14px}` +
-    `.policy details{margin-top:28px}.policy summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;font-size:.875rem}` +
-    `.policy ol{list-style:none;padding:0;margin:0}.policy li{padding:10px 0;border-bottom:1px solid var(--border);font-size:.8125rem;overflow-wrap:anywhere}.policy li .what{display:block;font-size:.875rem}`;
-/** A ledger entry as one line of history: when, who, what, before → after. */
+import { disclose, facts, formRow, infoLine, note, notice, radios, settingsRecord, settingsSection, textarea } from "./server/kit.js";
+import { kitSectionForm } from "./settings-kit.js";
+/** The old look; the page is built from the kit now. Kept for chrome.ts, which still concatenates it. */
+export const POLICY_CSS = "";
+/** A ledger entry as one record of history: what, before → after; who; when. */
 function historyItem(entry) {
     const what = entry.action.replace(/^organisation policy: /, "");
     const [before, after] = (entry.detail ?? "").split(" → ");
-    return html `<li><span class="what">${what.charAt(0).toUpperCase() + what.slice(1)}: ${before ?? ""} → <strong>${after ?? ""}</strong></span><span class="meta">${entry.actor} · ${whenUtc(entry.at)}</span></li>`;
+    return settingsRecord({ title: html `${what.charAt(0).toUpperCase() + what.slice(1)}: ${before ?? ""} → <b>${after ?? ""}</b>`, sub: entry.actor, when: whenUtc(entry.at) });
 }
-export function policyHtml(view, notice) {
-    const note = notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : notice.said ? html `<p role="status">${notice.said}</p>` : "";
+export function policyHtml(view, outcome) {
+    const answer = outcome.problem ? notice(outcome.problem) : outcome.said ? infoLine(outcome.said) : "";
     const parts = policyParts(view.policy);
-    const changed = view.policy.updatedBy === null ? "" : html `<p class="meta">Changed by ${view.policy.updatedBy} on ${(view.policy.updatedAt ?? "").slice(0, 10)}.</p>`;
-    const current = html `<dl><dt>Providers</dt><dd>${parts.providers === "any" ? "Any" : parts.providers}</dd><dt>Models</dt><dd>${parts.models === "any" ? "Any" : parts.models}</dd><dt>Tools</dt><dd>${parts.tools === "any" ? "Any" : parts.tools}</dd><dt>Ceiling</dt><dd>${parts.ceiling}</dd></dl>${changed}`;
-    const history = view.history.length === 0 ? "" : html `<details><summary>History (${view.history.length})</summary><ol>${view.history.map(historyItem)}</ol></details>`;
-    if (!view.canChange)
-        return html `<section class="policy">${note}${current}<p class="meta">An instance operator sets the policy.</p>${history}</section>`;
-    const providers = POLICY_PROVIDERS.map(one => html `<label><input type="checkbox" name="provider" value="${one}"${view.policy.providers === null || view.policy.providers.includes(one) ? html ` checked` : ""}> ${PROVIDER_NAMES[one]}</label>`);
-    const levels = [...PERMISSION_LEVELS].reverse().map(level => html `<label class="choice"><input type="radio" name="ceiling" value="${level}"${view.policy.ceiling === level ? html ` checked` : ""}><span><strong>${LEVEL_NAMES[level]}</strong><small>${LEVEL_HINTS[level]}</small></span></label>`);
+    const changed = view.policy.updatedBy === null ? "" : ` · changed by ${view.policy.updatedBy} on ${(view.policy.updatedAt ?? "").slice(0, 10)}`;
+    const history = view.history.length === 0 ? "" : settingsSection({ id: "policy-history", title: "History",
+        body: disclose(`${view.history.length} ${view.history.length === 1 ? "change" : "changes"}`, joinHtml(view.history.map(historyItem))) });
+    if (!view.canChange) {
+        return joinHtml([answer, settingsSection({ id: "policy", title: "Organisation policy", state: changed, lead: "What every task may use, in every project.",
+                body: joinHtml([facts([["Providers", parts.providers === "any" ? "Any" : parts.providers], ["Models", parts.models === "any" ? "Any" : parts.models],
+                        ["Tools", parts.tools === "any" ? "Any" : parts.tools], ["Ceiling", parts.ceiling]]), note("An instance operator sets the policy.")]) }), history]);
+    }
+    const providers = html `<div class="k-checks" role="group" aria-label="Providers">${POLICY_PROVIDERS.map(one => html `<label for="policy-provider-${one}"><input type="checkbox" id="policy-provider-${one}" name="provider" value="${one}"${view.policy.providers === null || view.policy.providers.includes(one) ? html ` checked` : ""}> ${PROVIDER_NAMES[one]}</label>`)}</div>`;
     const toolHint = view.toolNames.length === 0 ? "" : ` Tools here: ${view.toolNames.slice(0, 12).join(", ")}${view.toolNames.length > 12 ? "…" : ""}.`;
-    return html `<section class="policy">${note}${changed}${postForm("/settings/policy", html `<fieldset><legend>Providers</legend><div class="providers">${providers}</div></fieldset><fieldset><legend><label for="policy-models">Models</label></legend><textarea id="policy-models" name="models" spellcheck="false" placeholder="Any model" aria-describedby="policy-models-hint">${(view.policy.models ?? []).join("\n")}</textarea><span class="hint" id="policy-models-hint">One per line; end with * to allow a family. Blank allows any.</span></fieldset><fieldset><legend><label for="policy-tools">Project tools</label></legend><textarea id="policy-tools" name="tools" spellcheck="false" placeholder="Any tool" aria-describedby="policy-tools-hint">${(view.policy.tools ?? []).join("\n")}</textarea><span class="hint" id="policy-tools-hint">One per line. Blank allows any.${toolHint}</span></fieldset><fieldset><legend>Permission ceiling</legend>${levels}</fieldset><div class="step-up">${reauth(html `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label>`)}</div><button type="submit">Save policy</button>`)}${history}</section>`;
+    return joinHtml([answer, settingsSection({ id: "policy", title: "Organisation policy", state: changed, lead: "What every task may use, in every project.",
+            body: kitSectionForm({ proof: "policy", action: "/settings/policy", id: "policy-form", gate: true, save: { label: "Save policy" }, confirm: "Change the policy",
+                body: joinHtml([
+                    formRow("Providers", "Work runs only on the ticked ones. All of them allows any.", providers, "wide"),
+                    formRow("Models", "One per line; end with * to allow a family. Blank allows any.", textarea({ id: "policy-models", name: "models", value: (view.policy.models ?? []).join("\n"), rows: 3, attrs: { spellcheck: "false", placeholder: "Any model", "aria-label": "Models" } }), "top"),
+                    formRow("Project tools", `One per line. Blank allows any.${toolHint}`, textarea({ id: "policy-tools", name: "tools", value: (view.policy.tools ?? []).join("\n"), rows: 3, attrs: { spellcheck: "false", placeholder: "Any tool", "aria-label": "Project tools" } }), "top"),
+                    formRow("Permission ceiling", "The most any task may be allowed to do.", radios({ name: "ceiling", legend: "Permission ceiling", current: view.policy.ceiling,
+                        items: [...PERMISSION_LEVELS].reverse().map(level => ({ value: level, label: LEVEL_NAMES[level], text: LEVEL_HINTS[level] })) }), "wide"),
+                ]) }) }), history]);
 }

package/dist/policy.d.ts

@@ -87,3 +87,6 @@ export declare function checkPolicy(input: {
     ok: false;
     problem: string;
 };
+/** The providers ticked on the policy form: every provider the policy knows ticked (and nothing unknown) means "any"
+ * (null), so a provider added later is allowed too; anything else is the list as ticked, for checkPolicy to check. */
+export declare function chosenProviders(chosen: readonly string[]): string[] | null;

package/dist/policy.js

@@ -224,7 +224,7 @@ export function checkPolicy(input) {
     if (input.providers !== null) {
         const unknown = input.providers.filter(one => policyProvider(one.toLowerCase()) === null);
         if (unknown.length > 0)
-            return { ok: false, problem: `${unknown.join(", ")} isn't a provider here. Choose from Claude, Codex, Gemini and OpenRouter.` };
+            return { ok: false, problem: `${unknown.join(", ")} isn't a provider here. Choose from ${providerChoices()}.` };
         providers = POLICY_PROVIDERS.filter(one => input.providers.some(given => policyProvider(given.toLowerCase()) === one));
         if (providers.length === 0)
             return { ok: false, problem: "Allow at least one provider, or allow any." };
@@ -248,3 +248,16 @@ export function checkPolicy(input) {
         return { ok: false, problem: tools.problem };
     return { ok: true, policy: { providers, models, tools, ceiling: input.ceiling } };
 }
+/** Every provider the policy knows, in plain names: "Claude, Codex, … and Goose". */
+function providerChoices() {
+    const names = POLICY_PROVIDERS.map(one => PROVIDER_NAMES[one]);
+    return `${names.slice(0, -1).join(", ")} and ${names[names.length - 1]}`;
+}
+/** The providers ticked on the policy form: every provider the policy knows ticked (and nothing unknown) means "any"
+ * (null), so a provider added later is allowed too; anything else is the list as ticked, for checkPolicy to check. */
+export function chosenProviders(chosen) {
+    const known = new Set(chosen.map(one => policyProvider(one.toLowerCase())));
+    if (known.has(null))
+        return [...chosen];
+    return POLICY_PROVIDERS.every(one => known.has(one)) ? null : [...chosen];
+}

package/dist/project-delete-ui.d.ts

@@ -4,6 +4,7 @@ import type { WritesMode } from "./writes-mode.js";
 import { type CheckAccess } from "./check-access.js";
 import { type Html } from "./html.js";
 import { type ProjectHoldings } from "./project-delete.js";
+/** Check access: a wider level's warning shows only under the option chosen. Everything else on the page is kit markup. */
 export declare const PROJECT_DELETE_CSS: string;
 export type ProjectSettingsView = {
     remoteUrl?: string | null;
@@ -68,8 +69,9 @@ export type ProjectSettingsView = {
         signInsUnavailable?: string | null;
     };
 };
-/** The project's page: its path, what Toolroll holds for it, and (for an instance operator) Delete project. */
-export declare function projectSettingsHtml(view: ProjectSettingsView, notice: {
+/** The project's page: its name and path, what Toolroll holds for it, its build settings, and (for an instance operator)
+ * Remove and Delete. */
+export declare function projectSettingsHtml(view: ProjectSettingsView, said: {
     said?: string | null;
     problem?: string | null;
 }): Html;

package/dist/project-delete-ui.js

@@ -6,55 +6,34 @@
  */
 import { sandboxRuntimeWords } from "./sandbox-runtime.js";
 import { CHECK_ACCESS_WARNINGS, signInHostsMissing } from "./check-access.js";
-import { html, postForm, reauth } from "./html.js";
+import { html, joinHtml, postForm } from "./html.js";
 import { holdingsWords } from "./project-delete.js";
-export const PROJECT_DELETE_CSS = `.project-settings,.project-delete{max-width:720px;min-width:0}.project-settings .path,.project-delete .path{font-family:var(--font-mono);font-size:.8125rem;overflow-wrap:anywhere;word-break:break-all}` +
-    `.project-settings details.danger-zone{margin-top:24px;border:1px solid var(--border);border-radius:10px;padding:0 14px}.project-settings details.danger-zone summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:500;color:var(--danger)}` +
-    `.project-settings details.danger-zone[open]{padding-bottom:14px}.project-settings form,.project-delete form{display:grid;gap:12px;margin-top:12px}.project-settings label,.project-delete label{display:grid;gap:4px;font-size:.8125rem;font-weight:500}` +
-    `.project-settings input,.project-delete input{max-width:100%;min-height:36px}.project-delete .removes{margin:12px 0;padding-left:20px}.project-delete .removes li{margin:2px 0}` +
-    `.project-delete .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.project-delete button.danger,.project-settings button.danger{background:var(--danger);color:#fff;border-color:var(--danger);white-space:nowrap}` +
-    `.project-settings button,.project-delete button{justify-self:start;min-height:36px;white-space:nowrap}.project-delete .actions a{min-height:36px;display:inline-flex;align-items:center}` +
-    `.project-settings .builds-at-once{margin-top:20px}.project-settings .builds-at-once h2{font-size:1rem;margin:0 0 4px}.project-settings .builds-at-once form{margin-top:4px;gap:4px}` +
-    `.project-settings .builds-at-once .builds-row{display:flex;gap:8px;align-items:stretch}.project-settings .builds-at-once input{width:5.5rem;min-height:44px;margin:0;box-sizing:border-box}.project-settings .builds-at-once button{min-height:44px;margin:0}` +
-    `.project-settings .builds-at-once .meta{margin:0}.project-settings form.remove-project{margin-top:20px;gap:4px}.project-settings form.remove-project button{min-height:44px}.project-settings form.remove-project .meta{margin:0}` +
-    `.project-settings .build-access{margin-top:20px;min-width:0;overflow-wrap:anywhere}.project-settings .build-access h2{font:var(--so-typography-title-sm);margin:0 0 4px}.project-settings .build-access p{margin:0}` +
-    `.project-settings .build-access .tool-name{font:var(--so-typography-mono)}.project-settings .build-access details{margin:4px 0 0}.project-settings .build-access summary{min-height:44px;display:inline-flex;align-items:center;cursor:pointer;color:var(--so-muted);font:var(--so-typography-label)}` +
-    `.project-settings .build-access ul{margin:0 0 4px;padding-left:20px;font:var(--so-typography-body);color:var(--so-ink)}.project-settings .build-access li{margin:2px 0}.project-settings .build-access li .meta{color:var(--so-muted)}` +
-    `.project-settings .build-access a.manage-tools{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:4px;padding:0 14px;white-space:nowrap;background:var(--so-paper);color:var(--so-ink);border:1px solid var(--so-input-line);border-radius:var(--so-radius-md);font:var(--so-typography-label);text-decoration:none}` +
-    // A radio or checkbox choice sits beside its words, at its natural size, not as a full-width grid row.
-    `.project-settings .build-access label.check{display:flex;align-items:center;gap:8px;min-height:44px;font:var(--so-typography-body);font-weight:500}` +
-    `.project-settings .build-access label.check input{width:auto;min-height:0;margin:0;flex:none}.project-settings .build-access form .meta{margin:-8px 0 0 26px}` +
-    // Check access: a warning shows only under the option chosen; the folds draw the console's own chevron (as a diff's).
-    `.project-settings .check-access-setting .option .warning{display:none;color:var(--so-ink)}.project-settings .check-access-setting .option:has(input:checked) .warning{display:block}` +
-    `.project-settings .check-access-setting form{margin-top:0;gap:10px}.project-settings .check-access-setting .option{display:grid;gap:2px}` +
-    `.project-settings .check-access-setting .option .meta{margin:0 0 0 26px}.project-settings .check-access-setting label.check{min-height:36px}` +
-    `.project-settings .check-access-setting details > summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:40px;padding:0}` +
-    `.project-settings .check-access-setting details > summary::-webkit-details-marker{display:none}.project-settings .check-access-setting details > summary::marker{content:""}` +
-    `.project-settings .check-access-setting details > summary::before{content:"";flex:none;width:.35rem;height:.35rem;border-right:1.5px solid var(--so-muted);border-bottom:1.5px solid var(--so-muted);transform:rotate(-45deg);transition:transform .15s ease}` +
-    `.project-settings .check-access-setting details[open] > summary::before{transform:rotate(45deg) translateY(-.1rem)}` +
-    // Show hosts: a quiet fold in the line, not a card.
-    `.project-settings .check-access-setting details.hosts{border:0;background:none;padding:0;margin:0}.project-settings .check-access-setting details.hosts > summary{min-height:32px;font-size:.8125rem}` +
-    `.project-settings .check-access-setting details.hosts .tool-name{margin:0 0 4px;font-size:.75rem}` +
-    `.project-settings .check-access-setting button.primary{background:var(--so-signal);color:var(--so-on-signal);border-color:var(--so-signal)}` +
-    `.project-settings .build-access a.manage-tools:hover{background:var(--so-raised)}.project-settings .build-access a.manage-tools:focus-visible,.project-settings .build-access summary:focus-visible{outline:2px solid var(--so-ink);outline-offset:2px}`;
-/** Where builds may write, said plainly; an approver changes it with their password. */
+import { acts, btn, codeLine, disclose, formRow, infoLine, input, note, notice, radios, settingsSection, switchInput, textarea } from "./server/kit.js";
+import { kitSectionForm } from "./settings-kit.js";
+/** Check access: a wider level's warning shows only under the option chosen. Everything else on the page is kit markup. */
+export const PROJECT_DELETE_CSS = ".k-opt [data-check-access-warning]{display:none;color:var(--so-ink)}.k-opt:has(input:checked) [data-check-access-warning]{display:block}" +
+    ".k-opt:has(input:disabled){cursor:default;opacity:.6}";
+const mono = (text) => html `<span class="k-mono">${text}</span>`;
+const list = (items) => html `<ul class="k-note">${items.map(one => html `<li>${one}</li>`)}</ul>`;
+const SCOPED = "Tasks scoped from now on use this; tasks already approved keep what they were approved with.";
+const APPROVER_CHANGES = note("An approver for this project can change this.");
+/** Where builds may write, said plainly; an approver changes it with their password (always typed: it widens). */
 function writesHtml(view) {
     const writes = view.writes;
     if (writes === undefined)
         return "";
     const said = writes.setting === "workspace"
-        ? html `<p>Builds write <strong>only their own checkout</strong>, its caches and its temp folder. Your shell profile, login items, agent settings and the repository's Git config and hooks stay as they are.</p>`
-        : html `<p>Builds may write <strong>anywhere</strong> outside Toolroll's own folders, your credentials and other projects.</p>`;
-    if (!writes.canChange)
-        return html `<section class="build-access writes-setting" id="writes" aria-labelledby="writes-title"><h2 id="writes-title">Where builds write</h2>${said}<p class="meta">An approver for this project can change this.</p></section>`;
-    const option = (value, label, detail) => html `<label class="check"><input type="radio" name="writes" value="${value}"${writes.setting === value ? html ` checked` : ""}> ${label}</label><p class="meta">${detail}</p>`;
-    const form = postForm("/settings/project/writes", html `
-    ${option("workspace", "Only their workspace (recommended)", "The checkout and its Git data, the project's own package caches, the build's temp folder, and what its agent needs to keep its session.")}
-    ${option("anywhere", "Anywhere outside Toolroll's fenced folders", "For a project whose tools must write elsewhere in your home folder or the shared temp folder. Credentials, Toolroll's own folders and other projects stay fenced.")}
-    <p class="meta">Tasks scoped from now on use this; tasks already approved keep what they were approved with.</p>
-    ${reauth(html `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label>`)}
-    <button type="submit">Save</button>`, { hidden: { repo: view.repo } });
-    return html `<section class="build-access writes-setting" id="writes" aria-labelledby="writes-title"><h2 id="writes-title">Where builds write</h2>${said}<details><summary>Change</summary>${form}</details></section>`;
+        ? "Builds write only their own checkout, its caches and its temp folder. Your shell profile, login items, agent settings and the repository's Git config and hooks stay as they are."
+        : "Builds may write anywhere outside Toolroll's own folders, your credentials and other projects.";
+    return settingsSection({ id: "writes", title: "Where builds write", state: writes.setting === "workspace" ? " · Only their workspace" : " · Anywhere", lead: said,
+        body: !writes.canChange ? APPROVER_CHANGES : disclose("Change", kitSectionForm({ proof: "project-writes", action: "/settings/project/writes", id: "writes-form", gate: true, hidden: { repo: view.repo },
+            body: joinHtml([
+                formRow("Builds may write", null, radios({ name: "writes", legend: "Where builds write", current: writes.setting, items: [
+                        { value: "workspace", label: "Only their workspace (recommended)", text: "The checkout and its Git data, the project's own package caches, the build's temp folder, and what its agent needs to keep its session." },
+                        { value: "anywhere", label: "Anywhere outside Toolroll's fenced folders", text: "For a project whose tools must write elsewhere in your home folder or the shared temp folder. Credentials, Toolroll's own folders and other projects stay fenced." }
+                    ] }), "wide"),
+                note(SCOPED),
+            ]) })) });
 }
 /** Home folder (project-sandbox.ts): what builds and checks can read there, said once; the paths they can't, and the
  * advanced list (macOS services), changed under Change with the approver's password. */
@@ -64,24 +43,20 @@ function sandboxHtml(view) {
         return "";
     const { readDeny, machLookup } = sandbox.setting;
     const said = readDeny.length === 0
-        ? html `<p>Builds and checks can read your home folder, as in Anthropic's sandbox runtime. Toolroll's own folders stay out of reach; other tasks' work is read, never written.</p>`
-        : html `<p>Builds and checks can read your home folder except <strong>${readDeny.length === 1 ? readDeny[0] : `${readDeny.length} paths`}</strong>.</p>`;
-    const extra = machLookup.length === 0 ? "" : html `<p class="meta">${machLookup.length} macOS ${machLookup.length === 1 ? "service" : "services"} allowed</p>`;
-    // The engine, named where the sandbox is set (sandbox-runtime.ts).
-    const engine = html `<p class="meta" data-sandbox-engine>Builds, checks and flows run in ${sandboxRuntimeWords()}.</p>`;
-    const head = html `<h2 id="sandbox-title">Home folder</h2>${said}${extra}${engine}`;
-    if (!sandbox.canChange)
-        return html `<section class="build-access sandbox-setting" id="sandbox" aria-labelledby="sandbox-title">${head}<p class="meta">An approver for this project can change this.</p></section>`;
-    const form = postForm("/settings/project/sandbox", html `
-    <label>Paths builds can't read<textarea name="read-deny" rows="4" placeholder="~/.ssh&#10;~/.aws">${readDeny.join("\n")}</textarea></label>
-    <p class="meta">One per line: <code>~/…</code> or a full path.</p>
-    <details><summary>Advanced</summary>
-      <label>macOS services builds may also use<textarea name="mach" rows="2">${machLookup.join("\n")}</textarea></label>
-    </details>
-    <p class="meta">Tasks scoped from now on use this; tasks already approved keep what they were approved with.</p>
-    ${reauth(html `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label>`)}
-    <button type="submit">Save</button>`, { hidden: { repo: view.repo } });
-    return html `<section class="build-access sandbox-setting" id="sandbox" aria-labelledby="sandbox-title">${head}<details><summary>Change</summary>${form}</details></section>`;
+        ? "Builds and checks can read your home folder, as in Anthropic's sandbox runtime. Toolroll's own folders stay out of reach; other tasks' work is read, never written."
+        : `Builds and checks can read your home folder except ${readDeny.length === 1 ? readDeny[0] : `${readDeny.length} paths`}.`;
+    const head = joinHtml([
+        machLookup.length === 0 ? "" : note(`${machLookup.length} macOS ${machLookup.length === 1 ? "service" : "services"} allowed`),
+        // The engine, named where the sandbox is set (sandbox-runtime.ts).
+        html `<p class="k-note" data-sandbox-engine>Builds, checks and flows run in ${sandboxRuntimeWords()}.</p>`,
+    ]);
+    return settingsSection({ id: "sandbox", title: "Home folder", lead: said,
+        body: joinHtml([head, !sandbox.canChange ? APPROVER_CHANGES : disclose("Change", kitSectionForm({ proof: "project-sandbox", action: "/settings/project/sandbox", id: "sandbox-form", gate: true, hidden: { repo: view.repo },
+                body: joinHtml([
+                    formRow("Paths builds can't read", "One per line: ~/… or a full path.", textarea({ id: "sandbox-read-deny", name: "read-deny", value: readDeny.join("\n"), rows: 4, attrs: { placeholder: "~/.ssh\n~/.aws", "aria-label": "Paths builds can't read" } }), "top"),
+                    disclose("Advanced", formRow("macOS services builds may also use", null, textarea({ id: "sandbox-mach", name: "mach", value: machLookup.join("\n"), rows: 2, attrs: { "aria-label": "macOS services builds may also use" } }), "top")),
+                    note(SCOPED),
+                ]) }))]) });
 }
 /** Check access (check-access.ts): how far the project's checks reach, said once. Collapsed: the level, what it means
  * when it isn't the default, and who changed it. Inside Change: a line per level, and each wider level's warning under it
@@ -99,32 +74,41 @@ function checkAccessHtml(view) {
     const meaning = { sandboxed: null, "sign-ins": "Checks can read your Claude, Codex and GitHub sign-ins.", unsandboxed: "Checks run with your full access to this machine and to Toolroll." };
     // The sign-ins never widen the network: how many hosts they'd still need, and where to add them (a change of its own).
     const missing = setting === "sign-ins" && network !== null ? signInHostsMissing(network) : [];
-    const hosts = missing.length === 0 ? "" : html `<p class="meta" data-sign-in-hosts>${missing.length} sign-in ${missing.length === 1 ? "host isn't" : "hosts aren't"} allowed yet · <a href="#network">Add them</a></p><details class="hosts"><summary>Show hosts</summary><p class="tool-name">${missing.join(", ")}</p></details>`;
-    const changed = access.changed === null ? "" : html `<p class="meta">Changed by ${access.changed.by}, ${new Date(access.changed.at).toLocaleDateString("en-GB", { day: "numeric", month: "short", timeZone: "UTC" })}</p>`;
-    // Said before anything else: on a machine with no OS sandbox, every level runs without one.
-    const unconfined = access.unconfinedHere === true ? html `<p class="meta warning-line" data-unconfined-here>This machine can't sandbox checks, so they run without a sandbox whatever is chosen here.</p>` : "";
-    const runsSandboxed = setting !== saved && access.unconfinedHere !== true ? html `<p class="meta warning-line" data-sign-ins-unavailable>Saved with model and GitHub sign-ins, but checks run sandboxed: sign-ins can't be shared with checks safely yet.</p>` : "";
+    const hosts = missing.length === 0 ? "" : joinHtml([
+        html `<p class="k-note" data-sign-in-hosts>${missing.length} sign-in ${missing.length === 1 ? "host isn't" : "hosts aren't"} allowed yet · <a class="k-link" href="#network">Add them</a></p>`,
+        disclose("Show hosts", html `<p class="k-note k-mono">${missing.join(", ")}</p>`),
+    ]);
+    const changed = access.changed === null ? "" : note(`Changed by ${access.changed.by}, ${new Date(access.changed.at).toLocaleDateString("en-GB", { day: "numeric", month: "short", timeZone: "UTC" })}`);
     // No OS sandbox here, and unconfined running allowed: checks run without a sandbox whatever is saved, and that is
     // what the page says first (never "sandboxed"); the saved level is named under it.
-    const head = access.unconfinedHere === true
-        ? html `<h2 id="check-access-title">Check access</h2><p><strong>${names.unsandboxed}</strong></p>${saved === "unsandboxed" ? "" : html `<p class="meta" data-saved-level>Saved as ${names[saved]}.</p>`}${unconfined}${changed}`
-        : html `<h2 id="check-access-title">Check access</h2><p><strong>${names[setting]}</strong></p>${meaning[setting] === null ? "" : html `<p class="meta">${meaning[setting]}</p>`}${runsSandboxed}${hosts}${changed}`;
+    const unconfinedHere = access.unconfinedHere === true;
+    const shown = unconfinedHere ? "unsandboxed" : setting;
+    const head = unconfinedHere
+        ? joinHtml([saved === "unsandboxed" ? "" : html `<p class="k-note" data-saved-level>Saved as ${names[saved]}.</p>`,
+            html `<p class="k-note" data-unconfined-here>This machine can't sandbox checks, so they run without a sandbox whatever is chosen here.</p>`, changed])
+        : joinHtml([setting !== saved ? html `<p class="k-note" data-sign-ins-unavailable>Saved with model and GitHub sign-ins, but checks run sandboxed: sign-ins can't be shared with checks safely yet.</p>` : "", hosts, changed]);
+    const section = (body) => settingsSection({ id: "check-access", title: "Check access", state: ` · ${names[shown]}`,
+        lead: unconfinedHere ? undefined : meaning[setting] ?? undefined, body });
     if (!access.canNarrow && !access.canWiden)
-        return html `<section class="build-access check-access-setting" id="check-access" aria-labelledby="check-access-title">${head}</section>`;
+        return section(head);
     const option = (value, detail, warning) => {
         const allowed = (value === setting || access.canWiden || value === "sandboxed") && !(value === "sign-ins" && unavailable !== null);
-        return html `<div class="option"><label class="check"><input type="radio" name="level" value="${value}"${setting === value ? html ` checked` : ""}${allowed ? "" : html ` disabled`}> ${names[value]}</label><p class="meta">${detail}</p>${warning === null ? "" : html `<p class="meta warning" data-check-access-warning="${value}">${warning}</p>`}</div>`;
+        return html `<label class="k-opt"><input type="radio" name="level" value="${value}"${setting === value ? html ` checked` : ""}${allowed ? "" : html ` disabled`}><span><b>${names[value]}</b><span>${detail}</span>\
+${warning === null ? "" : html `<span data-check-access-warning="${value}">${warning}</span>`}</span></label>`;
     };
     const open = network?.mode === "open";
-    const form = postForm("/settings/project/check-access", html `
-    ${option("sandboxed", "Reads your home folder, as in Anthropic's sandbox runtime, except the folders this project hides (Home folder, above). Never Toolroll's folders or other tasks' work.", null)}
-    ${unavailable !== null ? option("sign-ins", unavailable, null) : option("sign-ins", `Also reads the files your Claude, Codex and GitHub sign-ins are kept in, on this project's network (${open ? "any host" : network === null || network.hosts.length === 0 ? "registries only" : `registries and ${network.hosts.length} ${network.hosts.length === 1 ? "host" : "hosts"}`}).`, CHECK_ACCESS_WARNINGS["sign-ins"])}
-    ${option("unsandboxed", "For projects whose checks create sandboxes themselves, such as Toolroll's own.", CHECK_ACCESS_WARNINGS.unsandboxed)}
-    ${open && unavailable === null ? html `<label class="check"><input type="checkbox" name="confirm-open" value="yes"> The network is open: with sign-ins, checks could send them to any host</label>` : ""}
-    ${reauth(html `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label>`)}
-    <button type="submit" class="primary">Save</button>
-    <p class="meta">${access.canWiden ? "" : "Only an instance operator can widen this. "}Flow script steps always run sandboxed. Tasks already approved keep their level.</p>`, { hidden: { repo: view.repo } });
-    return html `<section class="build-access check-access-setting" id="check-access" aria-labelledby="check-access-title">${head}<details class="change"><summary>Change</summary>${form}</details></section>`;
+    const choices = html `<fieldset class="k-radios"><legend class="k-sr">Check access</legend>\
+${option("sandboxed", "Reads your home folder, as in Anthropic's sandbox runtime, except the folders this project hides (Home folder, above). Never Toolroll's folders or other tasks' work.", null)}\
+${unavailable !== null ? option("sign-ins", unavailable, null) : option("sign-ins", `Also reads the files your Claude, Codex and GitHub sign-ins are kept in, on this project's network (${open ? "any host" : network === null || network.hosts.length === 0 ? "registries only" : `registries and ${network.hosts.length} ${network.hosts.length === 1 ? "host" : "hosts"}`}).`, CHECK_ACCESS_WARNINGS["sign-ins"])}\
+${option("unsandboxed", "For projects whose checks create sandboxes themselves, such as Toolroll's own.", CHECK_ACCESS_WARNINGS.unsandboxed)}</fieldset>`;
+    const confirmOpen = open && unavailable === null
+        ? html `<label class="k-opt"><input type="checkbox" name="confirm-open" value="yes"><span><b>The network is open</b><span>With sign-ins, checks could send them to any host.</span></span></label>`
+        : "";
+    // A form that offers a wider level asks for an instance operator's password, typed now (the server decides).
+    const form = kitSectionForm({ proof: access.canWiden ? "project-check-access-widen" : "project-check-access", action: "/settings/project/check-access", id: "check-access-form", gate: true, hidden: { repo: view.repo },
+        body: joinHtml([formRow("How far checks reach", null, choices, "wide"), confirmOpen,
+            note(`${access.canWiden ? "" : "Only an instance operator can widen this. "}Flow script steps always run sandboxed. Tasks already approved keep their level.`)]) });
+    return section(joinHtml([head, disclose("Change", form)]));
 }
 /** Network: what the project's builds may reach, said plainly; an approver changes it with their password. */
 function networkHtml(view) {
@@ -133,22 +117,20 @@ function networkHtml(view) {
         return "";
     const { setting } = network;
     const reach = setting.mode === "open"
-        ? html `<p>Builds may reach <strong>any host</strong>.</p>`
-        : html `<p>Builds reach their agent's provider and the package registries this project uses${setting.hosts.length === 0 ? "" : html `, and <span class="tool-name">${setting.hosts.join(", ")}</span>`}. Everything else is refused.</p>`;
+        ? html `Builds may reach any host.`
+        : html `Builds reach their agent's provider and the package registries this project uses${setting.hosts.length === 0 ? "" : html `, and ${mono(setting.hosts.join(", "))}`}. Everything else is refused.`;
     const local = setting.loopback === "any"
-        ? html `<p>On a Mac, builds may reach <strong>this Mac's local services</strong>: test servers, and anything else listening here.</p>`
-        : html `<p>On a Mac, builds reach no local services. A project whose tests start a local server needs them on.</p>`;
-    if (!network.canChange)
-        return html `<section class="build-access network-setting" id="network" aria-labelledby="network-title"><h2 id="network-title">Network</h2>${reach}${local}<p class="meta">An approver for this project can change this.</p></section>`;
-    const form = postForm("/settings/project/network", html `
-    <label class="check"><input type="checkbox" name="local" value="any"${setting.loopback === "any" ? html ` checked` : ""}> Builds may reach this Mac's local services</label>
-    <p class="meta">Local test servers work, and so does anything else listening on this Mac (a local database, a dev proxy). Linux builds always have local services of their own.</p>
-    <label>Other hosts builds may reach<textarea name="hosts" rows="3" autocomplete="off" autocapitalize="off" spellcheck="false" placeholder="api.stripe.com&#10;*.example.com">${setting.hosts.join("\n")}</textarea></label>
-    <label class="check"><input type="checkbox" name="mode" value="open"${setting.mode === "open" ? html ` checked` : ""}> Open: builds may reach any host</label>
-    <p class="meta">Tasks scoped from now on use this; tasks already approved keep the network they were approved with.</p>
-    ${reauth(html `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label>`)}
-    <button type="submit">Save</button>`, { hidden: { repo: view.repo } });
-    return html `<section class="build-access network-setting" id="network" aria-labelledby="network-title"><h2 id="network-title">Network</h2>${reach}${local}<details><summary>Change</summary>${form}</details></section>`;
+        ? note("On a Mac, builds may reach this Mac's local services: test servers, and anything else listening here.")
+        : note("On a Mac, builds reach no local services. A project whose tests start a local server needs them on.");
+    return settingsSection({ id: "network", title: "Network", state: setting.mode === "open" ? " · Open" : "", lead: reach,
+        body: joinHtml([local, !network.canChange ? APPROVER_CHANGES : disclose("Change", kitSectionForm({ proof: "project-network", action: "/settings/project/network", id: "network-form", gate: true, hidden: { repo: view.repo },
+                body: joinHtml([
+                    formRow("This Mac's local services", "Local test servers work, and so does anything else listening on this Mac (a local database, a dev proxy). Linux builds always have local services of their own.", switchInput({ id: "network-local", name: "local", label: "Allowed", on: setting.loopback === "any", attrs: { value: "any", "aria-label": "Builds may reach this Mac's local services" } }), "inline"),
+                    formRow("Other hosts builds may reach", "One per line.", textarea({ id: "network-hosts", name: "hosts", value: setting.hosts.join("\n"), rows: 3,
+                        attrs: { autocomplete: "off", autocapitalize: "off", spellcheck: "false", placeholder: "api.stripe.com\n*.example.com", "aria-label": "Other hosts builds may reach" } }), "top"),
+                    formRow("Open", "Builds may reach any host.", switchInput({ id: "network-open", name: "mode", label: "Open", on: setting.mode === "open", attrs: { value: "open", "aria-label": "Open: builds may reach any host" } }), "inline"),
+                    note("Tasks scoped from now on use this; tasks already approved keep the network they were approved with."),
+                ]) }))]) });
 }
 /** Live view: hidden by default; showing commands takes the password, hiding them is one step. */
 function liveViewHtml(view) {
@@ -156,63 +138,79 @@ function liveViewHtml(view) {
     if (live === undefined)
         return "";
     const said = live.commands
-        ? html `<p>Commands and their output show in the live view of this project's agents. Secrets are hidden where they're recognised, which isn't guaranteed.</p>`
-        : html `<p>Commands are hidden in the live view. You see which files an agent reads and edits, but not the commands it runs or their output.</p>`;
-    const change = !live.canChange ? html `<p class="meta">An approver for this project can change this.</p>`
+        ? "Commands and their output show in the live view of this project's agents. Secrets are hidden where they're recognised, which isn't guaranteed."
+        : "Commands are hidden in the live view. You see which files an agent reads and edits, but not the commands it runs or their output.";
+    const change = !live.canChange ? APPROVER_CHANGES
         : live.commands
-            ? postForm("/settings/project/live-view", html `<button type="submit">Hide commands</button><p class="meta">From the next run.</p>`, { hidden: { repo: view.repo, act: "off" } })
-            : postForm("/settings/project/live-view", html `<p class="meta">Output can include secrets the filter misses. Turn this on only where you're happy for anyone who can see this project to read it. From the next run.</p>${reauth(html `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label>`)}<button type="submit">Show commands</button>`, { hidden: { repo: view.repo, act: "on", nonce: live.nonce ?? "" } });
-    return html `<section class="build-access live-view" aria-labelledby="live-view-title" data-live-view-setting="${live.commands ? "commands" : "base"}"><h2 id="live-view-title">Live view</h2>${said}${change}</section>`;
+            ? postForm("/settings/project/live-view", joinHtml([note("From the next run."), acts(btn("Hide commands", { sm: true, type: "submit" }))]), { hidden: { repo: view.repo, act: "off" } })
+            : kitSectionForm({ proof: "project-live-view", action: "/settings/project/live-view", id: "live-view-form", hidden: { repo: view.repo, act: "on", nonce: live.nonce ?? "" },
+                save: { label: "Show commands", variant: "outline" }, confirm: "Show this project's commands in the live view",
+                body: note("Output can include secrets the filter misses. Turn this on only where you're happy for anyone who can see this project to read it. From the next run.") });
+    return settingsSection({ id: "live-view", title: "Live view", state: html `<span data-live-view-setting="${live.commands ? "commands" : "base"}"> · ${live.commands ? "Commands shown" : "Commands hidden"}</span>`,
+        lead: said, body: change });
 }
 /** Build access: one sentence for what a build gets, the detail on demand, and the way to change it. */
 function accessHtml(view) {
     const access = view.access;
     if (access === undefined)
         return "";
-    const manage = html `<a class="manage-tools" href="/settings/tools?repo=${encodeURIComponent(view.repo)}">Manage tools</a>`;
+    const manage = acts(btn("Manage tools", { sm: true, href: `/settings/tools?repo=${encodeURIComponent(view.repo)}` }));
     const always = [
         "Your other projects, keys and sign-in files are out of reach.",
         "Your own Claude and Codex hooks, plugins and MCP servers don't load.",
         "Builds sign in with your existing Claude or Codex login.",
     ];
     if ("problem" in access) {
-        return html `<section class="build-access" aria-labelledby="build-access-title"><h2 id="build-access-title">Build access</h2><p class="problem" role="alert">${access.problem}</p><details><summary>Details</summary><ul>${always.map(one => html `<li>${one}</li>`)}</ul></details>${manage}</section>`;
+        return settingsSection({ id: "build-access", title: "Build access", body: joinHtml([notice(access.problem), disclose("Details", list(always)), manage]) });
     }
     const loading = access.tools.filter(one => one.loads);
-    const names = loading.map((one, at) => html `${at === 0 ? "" : ", "}<span class="tool-name">${one.name}</span>`);
+    const names = loading.map((one, at) => html `${at === 0 ? "" : ", "}${mono(one.name)}`);
     const outcome = loading.length === 0
-        ? html `<p>Builds work in their task's folder, with no extra tools.</p>`
-        : html `<p>Builds work in their task's folder, with ${loading.length === 1 ? "one tool" : `${loading.length} tools`}: ${names}.</p>`;
-    const tools = access.tools.map(one => html `<li><span class="tool-name">${one.name}</span> <span class="meta">· ${one.words}</span></li>`);
-    return html `<section class="build-access" aria-labelledby="build-access-title"><h2 id="build-access-title">Build access</h2>${outcome}<details><summary>Details</summary><ul>${always.map(one => html `<li>${one}</li>`)}${tools}</ul></details>${manage}</section>`;
+        ? html `Builds work in their task's folder, with no extra tools.`
+        : html `Builds work in their task's folder, with ${loading.length === 1 ? "one tool" : `${loading.length} tools`}: ${names}.`;
+    const tools = access.tools.map(one => html `${mono(one.name)} · ${one.words}`);
+    return settingsSection({ id: "build-access", title: "Build access", lead: outcome, body: joinHtml([disclose("Details", list([...always, ...tools])), manage]) });
 }
 /** Builds at once: one number, one Save. The worker's cap is said only when it lowers the number. */
 function buildsHtml(view) {
     const b = view.builds;
     if (b === undefined)
         return "";
-    const capped = b.capacity !== null && b.capacity < b.setting ? ` Its worker runs ${b.capacity} at once, so ${b.capacity} for now.` : "";
+    const capped = b.capacity !== null && b.capacity < b.setting ? ` Its builder runs ${b.capacity} at once, so ${b.capacity} for now.` : "";
     const now = `${b.building} building now.${capped}`;
     if (!b.canChange)
-        return html `<section class="builds-at-once"><h2>Builds at once</h2><p>Up to ${b.setting}. ${now}</p></section>`;
-    return html `<section class="builds-at-once"><h2>Builds at once</h2>${postForm("/settings/project/concurrency", html `<div class="builds-row"><input type="number" name="concurrency" min="1" max="64" step="1" inputmode="numeric" value="${b.setting}" aria-label="Builds at once" aria-describedby="builds-now"><button type="submit">Save</button></div><p class="meta" id="builds-now">${now}</p>`, { hidden: { repo: view.repo } })}</section>`;
+        return settingsSection({ id: "builds-at-once", title: "Builds at once", state: ` · Up to ${b.setting}`, body: note(now) });
+    return settingsSection({ id: "builds-at-once", title: "Builds at once",
+        body: postForm("/settings/project/concurrency", formRow("Builds at once", now, html `${input({ id: "builds-at-once-n", name: "concurrency", type: "number", value: String(b.setting),
+            attrs: { min: 1, max: 64, step: 1, inputmode: "numeric", "aria-label": "Builds at once" } })}${btn("Save", { sm: true, type: "submit" })}`, "inline"), { hidden: { repo: view.repo } }) });
 }
-const note = (notice) => notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : notice.said ? html `<p role="status">${notice.said}</p>` : "";
-/** The project's page: its path, what Toolroll holds for it, and (for an instance operator) Delete project. */
-export function projectSettingsHtml(view, notice) {
-    const held = html `<p>Toolroll holds ${holdingsWords(view.holdings)} for <strong>${view.name}</strong>.</p>`;
-    const remote = html `<section class="build-access recorded-remote" aria-labelledby="recorded-remote-title"><h2 id="recorded-remote-title">Recorded remote</h2>${view.remoteUrl
-        ? html `<p class="path">${view.remoteUrl}</p>`
-        : html `<p>No remote recorded. Landed work waits for your review.</p>`}<details><summary>Change remote</summary><p>An owner or instance operator can run:</p><p class="path">toolroll repos add &lt;project&gt; --remote &lt;url&gt;</p></details></section>`;
-    const head = html `${note(notice)}<p class="path">${view.repo}</p>${held}${remote}${buildsHtml(view)}${accessHtml(view)}${networkHtml(view)}${writesHtml(view)}${sandboxHtml(view)}${checkAccessHtml(view)}${liveViewHtml(view)}`;
+/** The project's page: its name and path, what Toolroll holds for it, its build settings, and (for an instance operator)
+ * Remove and Delete. */
+export function projectSettingsHtml(view, said) {
+    const answer = said.problem ? notice(said.problem) : said.said ? infoLine(said.said) : "";
+    const project = settingsSection({ id: "project", title: view.name, lead: mono(view.repo),
+        body: joinHtml([
+            note(`Toolroll holds ${holdingsWords(view.holdings)} for this project.`),
+            formRow("Recorded remote", view.remoteUrl ? null : "None. Landed work waits for your review.", view.remoteUrl ? mono(view.remoteUrl) : html ``, view.remoteUrl ? "wide" : "inline"),
+            disclose("Change remote", joinHtml([note("An owner or instance operator can run:"), codeLine("toolroll repos add <project> --remote <url>")])),
+        ]) });
+    const settings = joinHtml([buildsHtml(view), accessHtml(view), networkHtml(view), writesHtml(view), sandboxHtml(view), checkAccessHtml(view), liveViewHtml(view)]);
     if (!view.canDelete)
-        return html `<section class="project-settings">${head}<p class="meta">An instance operator can delete a project.</p></section>`;
-    const body = view.running.length > 0
-        ? html `<p class="problem">Its work is running: ${view.running.join(", ")}. Stop it before deleting the project.</p>`
-        : html `<p>Removes everything Toolroll holds for ${view.name}. The repository and its own branches stay. There's no undo.</p>${postForm("/settings/project/delete", html `<label><span>Type <strong>${view.name}</strong> to continue</span><input name="name" autocomplete="off" autocapitalize="off" spellcheck="false" required></label><button type="submit">Continue</button>`, { hidden: { repo: view.repo } })}`;
+        return joinHtml([answer, project, settings, note("An instance operator can remove or delete a project.")]);
+    const deleteBody = view.running.length > 0
+        ? notice(`Its work is running: ${view.running.join(", ")}. Stop it before deleting the project.`)
+        : joinHtml([note(`Removes everything Toolroll holds for ${view.name}. The repository and its own branches stay. There's no undo.`),
+            postForm("/settings/project/delete", joinHtml([
+                formRow(`Type ${view.name} to continue`, null, input({ id: "delete-name", name: "name", attrs: { autocomplete: "off", autocapitalize: "off", spellcheck: "false", required: true, "aria-label": `Type ${view.name} to continue` } })),
+                acts(btn("Continue", { sm: true, type: "submit", variant: "danger" })),
+            ]), { hidden: { repo: view.repo } })]);
     // Removing is the reversible step: off the lists and the builder, everything kept.
-    const remove = postForm("/projects/remove", html `<button type="submit">Remove from Toolroll</button><p class="meta">Its tasks and results stay saved. Add it again to bring it back.</p>`, { attrs: { class: "remove-project" }, hidden: { repo: view.repo } });
-    return html `<section class="project-settings">${head}${remove}<details class="danger-zone"${notice.problem ? html ` open` : ""}><summary>Delete project</summary>${body}</details></section>`;
+    const leave = settingsSection({ id: "remove", title: "Remove or delete",
+        body: joinHtml([
+            formRow("Remove from Toolroll", "Its tasks and results stay saved. Add it again to bring it back.", postForm("/projects/remove", btn("Remove from Toolroll", { sm: true, type: "submit" }), { hidden: { repo: view.repo } }), "inline"),
+            disclose("Delete project", deleteBody, Boolean(said.problem)),
+        ]) });
+    return joinHtml([answer, project, settings, leave]);
 }
 /** The second step: exactly what goes, and the password. */
 export function projectDeleteConfirmHtml(view, problem) {
@@ -226,5 +224,16 @@ export function projectDeleteConfirmHtml(view, problem) {
         ...(h.subagents > 0 ? [count(h.subagents, "subagent")] : []),
         "Its budgets, settings and knowledge",
     ];
-    return html `<section class="project-delete">${problem === null ? "" : html `<p class="problem" role="alert">${problem}</p>`}<p>This removes:</p><ul class="removes">${items.map(one => html `<li>${one}</li>`)}</ul><p>The repository at <span class="path">${view.repo}</span> and its own branches stay. The ledger keeps its history. There's no undo.</p>${postForm("/settings/project/delete", html `${reauth(html `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password"></label>`)}<div class="actions"><button type="submit" class="danger">Delete project</button><a href="/settings/project?repo=${encodeURIComponent(view.repo)}">Cancel</a></div>`, { hidden: { repo: view.repo, name: view.name, step: "delete" } })}</section>`;
+    return joinHtml([
+        problem === null ? "" : notice(problem),
+        settingsSection({ id: "delete", title: "This removes",
+            body: joinHtml([
+                list(items),
+                note(html `The repository at ${mono(view.repo)} and its own branches stay. The ledger keeps its history. There's no undo.`),
+                // The answer is a page of its own (this page again with a refusal, or the project page), so it posts as a navigation.
+                kitSectionForm({ proof: "project-delete", action: "/settings/project/delete", id: "delete-form", native: true, hidden: { repo: view.repo, name: view.name, step: "delete" },
+                    save: { label: "Delete project", variant: "danger" }, confirm: `Delete ${view.name}`,
+                    body: acts(btn("Cancel", { sm: true, variant: "ghost", href: `/settings/project?repo=${encodeURIComponent(view.repo)}` })) }),
+            ]) }),
+    ]);
 }