toolroll 0.9.86 → 0.9.87

package/dist/settings-kit.d.ts

@@ -86,6 +86,7 @@ export declare const typedOnly: (row: ProofRow) => boolean;
  * `data-so-typed`, so the identity-provider swap leaves it a real password field (keepTypedFields). Never a value. */
 export declare function proofField(row: ProofRow, options?: {
     label?: string;
+    optional?: boolean;
 }): Html;
 /**
  * The identity-provider swap (render-people.ts ssoStepUps) with typed-only proof fields kept: those handlers take only
@@ -116,12 +117,6 @@ export type StepUpForm = {
     /** What the dialog says the person is agreeing to (the action's own words by default). */
     confirm?: string;
 };
-/**
- * A section's form, posted to its existing route with its existing fields, and its sticky Save. When the row needs a
- * proof, the proof field sits in the form's own HTML — inline (as today, which is how it works without JavaScript) and
- * moved into a `<dialog>` inside the same form by settings-kit-script.ts, which opens it on submit, keeps the pressed
- * button, and posts nothing on Cancel. The server still proves everything.
- */
 export declare function stepUpForm(form: StepUpForm): Html;
 /** A section: a heading, a one-line state, a problem the handler sent back (role=alert), then its form. */
 export declare function kitSection(section: {
@@ -135,3 +130,44 @@ export declare function kitSection(section: {
 /** The kit's look: one 760px column, sections with no nested wells, the sticky Save, the dialog. The needs-you colour
  * falls back to the warning token until S5 lands `--so-needs-you`. */
 export declare const SETTINGS_KIT_CSS: string;
+export type SectionForm = {
+    /** The proof inventory row this form posts under. */
+    proof: string;
+    /** The exact route (one of the row's). */
+    action: string;
+    /** Unique on the page; the refusal slot is `<id>-err`. */
+    id: string;
+    /** The section's own fields. */
+    body: HtmlValue;
+    /** Hidden terms posted back unchanged (the shown project, a nonce, a digest…). */
+    hidden?: Readonly<Record<string, string | number | null | undefined>>;
+    /** The button: "Save" by default; a name=value it posts. */
+    save?: {
+        label?: string;
+        name?: string;
+        value?: string;
+        variant?: "primary" | "outline" | "danger";
+    };
+    /** A settings section: Save shows only once something in it changed, and saves only what changed with the rest. An
+     * act (Invite, Remove) leaves this off: its button always shows. */
+    gate?: boolean;
+    /** The proof is needed only when the form posts this value (the row's `when`): [field, value]. */
+    proofWhen?: readonly [field: string, value: string];
+    /** Post as a page navigation: the answer is a page of its own (a one-time secret, a review). */
+    native?: boolean;
+    /** The answer is a file the browser saves (implies native): the page stays, so the button never stays busy. */
+    download?: boolean;
+    /** What saying yes does, for the password popover (the row's own words by default). */
+    confirm?: string;
+    /** What the handler sent back for this section, in place: done, or refused (role=alert). */
+    said?: string | null;
+    problem?: string | null;
+};
+/**
+ * A settings section's form in the revamp kit's look, posted to its existing route with its existing fields and
+ * proof. Without the kit's script it is a plain form: the proof field (when the row asks for one) shows in place and
+ * Save posts. With it (src/browser/kit/behavior.ts, section forms): Save appears once something changed, the proof is
+ * asked in a password popover only when the rules need it, one validated snapshot is posted, a second press does
+ * nothing while one is pending, and a refusal shows next to Save with the edits kept. The server proves everything.
+ */
+export declare function kitSectionForm(form: SectionForm): Html;

package/dist/settings-kit.js

@@ -15,6 +15,7 @@
  */
 import { attributes, html, htmlString, joinHtml, postForm, reauth, replaceMarkup } from "./html.js";
 import { isSettingsFrame } from "./settings-kit-script.js";
+import { requestContext } from "./server/request-context.js";
 import { contractReads, PROOF_INVENTORY, proofRow } from "./settings-proofs.js";
 export { isSettingsFrame };
 const ENTITIES = { amp: "&", lt: "<", gt: ">", quot: '"', "#39": "'", "#x27": "'", nbsp: " " };
@@ -30,6 +31,17 @@ export function headingText(page) {
 export function settingsCrumbs(pathname, title, page) {
     if (!isSettingsFrame(pathname) || pathname === "/settings")
         return undefined;
+    // A page in the revamp kit's Settings frame (server/kit.ts settingsShell) names its own trail: Settings, its group, itself.
+    const kit = /<nav class="k-tb-ctx k-crumbs" aria-label="Breadcrumb">([\s\S]*?)<\/nav>/.exec(page);
+    if (kit !== null) {
+        const trail = [{ label: "Settings", href: "/settings" }];
+        for (const step of kit[1].matchAll(/<a href="([^"]*)">([\s\S]*?)<\/a>|<b aria-current="page">([\s\S]*?)<\/b>/g)) {
+            const label = (headingText(`<h1>${step[2] ?? step[3] ?? ""}</h1>`) ?? "").slice(0, 80);
+            if (label !== "")
+                trail.push({ label, href: step[1] ?? null });
+        }
+        return trail;
+    }
     const name = headingText(page) ?? (title.charAt(0).toUpperCase() + title.slice(1));
     return [{ label: "Settings", href: "/settings" }, { label: name, href: null }];
 }
@@ -96,7 +108,10 @@ export function proofField(row, options = {}) {
     const label = options.label ?? "Your Toolroll password";
     if (typedOnly(row))
         return html `<label>${label}<input type="password" name="${row.field}" data-so-typed autocomplete="current-password" required></label>`;
-    const field = html `<label>${label}<input type="password" name="${row.field}" autocomplete="current-password" required></label>`;
+    // A row that needs its proof only for some posts (its `when`) leaves the field optional: the handler decides.
+    const field = options.optional === true && row.when !== undefined
+        ? html `<label>${label}<input type="password" name="${row.field}" autocomplete="current-password"></label>`
+        : html `<label>${label}<input type="password" name="${row.field}" autocomplete="current-password" required></label>`;
     return row.proof === "step-up" ? reauth(field) : field;
 }
 const TYPED_FIELD = /<input type="password" name="([a-z-]+)" data-so-typed autocomplete="current-password" required>/g;
@@ -128,11 +143,11 @@ export function proofNote(row) {
  * moved into a `<dialog>` inside the same form by settings-kit-script.ts, which opens it on submit, keeps the pressed
  * button, and posts nothing on Cancel. The server still proves everything.
  */
-export function stepUpForm(form) {
-    const row = proofRow(form.proof);
-    if (!row.routes.includes(form.action))
-        throw new Error(`${row.id} doesn't post to ${form.action}`);
-    const hidden = form.hidden ?? {};
+/** The row for a form posting to `action` with these hidden terms; throws on a form the row doesn't describe. */
+function rowForForm(proof, action, hidden) {
+    const row = proofRow(proof);
+    if (!row.routes.includes(action))
+        throw new Error(`${row.id} doesn't post to ${action}`);
     for (const name of Object.keys(hidden))
         if (row.field === name || row.secrets.includes(name))
             throw new Error(`${row.id}: ${name} is never a hidden value`);
@@ -141,7 +156,12 @@ export function stepUpForm(form) {
         throw new Error(`${row.id} posts ${row.select.field}=${row.select.value}`);
     for (const other of variantsOf(row))
         if (other.select !== undefined && String(hidden[other.select.field] ?? "") === other.select.value)
-            throw new Error(`${form.action} with ${other.select.field}=${other.select.value} is ${other.id}, not ${row.id}`);
+            throw new Error(`${action} with ${other.select.field}=${other.select.value} is ${other.id}, not ${row.id}`);
+    return row;
+}
+export function stepUpForm(form) {
+    const hidden = form.hidden ?? {};
+    const row = rowForForm(form.proof, form.action, hidden);
     const proof = proofField(row);
     const asks = htmlString(proof) !== "";
     const note = proofNote(row);
@@ -184,3 +204,45 @@ export const SETTINGS_KIT_CSS = ":root{--so-settings-width:760px}" +
     ".kit-dialog::backdrop{background:rgb(0 0 0 / .35)}.kit-dialog h2{margin:0 0 6px;font-size:17px}.kit-dialog-slot .kit-proof{display:block}" +
     ".kit-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin:16px 0 0}" +
     "@media (max-width:900px){.kit-save-bar button,.kit-dialog-actions button,.kit-crumbs a{min-height:44px}.kit-crumbs a{display:inline-flex;align-items:center}}";
+/**
+ * A settings section's form in the revamp kit's look, posted to its existing route with its existing fields and
+ * proof. Without the kit's script it is a plain form: the proof field (when the row asks for one) shows in place and
+ * Save posts. With it (src/browser/kit/behavior.ts, section forms): Save appears once something changed, the proof is
+ * asked in a password popover only when the rules need it, one validated snapshot is posted, a second press does
+ * nothing while one is pending, and a refusal shows next to Save with the edits kept. The server proves everything.
+ */
+export function kitSectionForm(form) {
+    const hidden = form.hidden ?? {};
+    const row = rowForForm(form.proof, form.action, hidden);
+    if (form.proofWhen !== undefined && row.when === undefined)
+        throw new Error(`${row.id} always needs its proof`);
+    const proof = proofField(row, { label: "Your password", optional: form.proofWhen !== undefined });
+    const asks = htmlString(proof) !== "";
+    const save = form.save ?? {};
+    const button = html `<button${attributes({ type: "submit", class: `k-btn k-btn-${save.variant ?? "primary"} k-btn-sm`, name: save.name ?? null, value: save.value ?? null, "data-k-save": true })}><span class="k-face">${save.label ?? "Save"}</span></button>`;
+    const note = proofNote(row);
+    return postForm(form.action, joinHtml([
+        form.body,
+        asks ? html `<div class="k-sproof" data-k-proof>${proof}</div>` : "",
+        html `<div class="k-ssave"><span class="k-ssave-said" aria-live="polite">${form.said ?? ""}</span>${button}</div>`,
+        html `<div class="k-ssave-err" id="${form.id}-err">${form.problem ? html `<p class="k-notice" role="alert"><span>${form.problem}</span></p>`
+            : unconfirmedHere(form.id) ? html `<p class="k-notice info" role="status">Couldn’t confirm whether this saved. This page shows what is stored now; check it before saving again.</p>` : ""}</div>`,
+    ]), { hidden, attrs: {
+            id: form.id, class: "k-sform", "data-k-sform": row.id, "data-k-gate": form.gate === true ? true : null, "data-k-native": form.native === true || form.download === true ? true : null, "data-k-download": form.download === true ? true : null,
+            "data-k-proof-if": form.proofWhen === undefined ? null : `${form.proofWhen[0]}=${form.proofWhen[1]}`,
+            "data-k-confirm": form.confirm ?? row.action, "data-k-note": note,
+        } });
+}
+/** Whether this request is the page again after a save of form `id` couldn't be confirmed (section-forms.ts asks for it
+ * with ?unconfirmed=<id>). It only picks which of this page's own forms shows the fixed note; the value is never drawn. */
+function unconfirmedHere(id) {
+    const at = requestContext.getStore()?.returnTo;
+    if (at === undefined)
+        return false;
+    try {
+        return new URL(at, "http://toolroll.local").searchParams.get("unconfirmed") === id;
+    }
+    catch {
+        return false;
+    }
+}

package/dist/setup-guide.d.ts

@@ -15,10 +15,10 @@ export declare function detectPreparation(repo: string): {
 } | null;
 /** Browser installation may write only this known file inside its project. */
 export declare function previewProjectInstructions(repo: string): {
+    content?: never;
     ok: false;
     message: string;
     plan?: never;
-    content?: never;
     fingerprint?: never;
     installed?: never;
 } | {
@@ -30,10 +30,10 @@ export declare function previewProjectInstructions(repo: string): {
     installed: boolean;
 };
 export declare function addProjectInstructions(repo: string, fingerprint: string): {
+    content?: never;
     ok: false;
     message: string;
     plan?: never;
-    content?: never;
     fingerprint?: never;
     installed?: never;
 } | import("./skills.js").InstallResult;

package/dist/skills-ui.js

@@ -1,12 +1,22 @@
 import { randomUUID } from "node:crypto";
 import { whenUtc } from "./when-html.js";
 import { html, joinHtml, postForm } from "./html.js";
+import { acts, btn, chip, disclose, facts, formRow, input, note, notice, select, settingsRecord, settingsSection, textarea } from "./server/kit.js";
 // Hidden fields as they always were: a missing value is an empty field.
 const fields = (data) => Object.fromEntries(Object.entries(data).map(([k, v]) => [k, String(v ?? "")]));
 export const SKILLS_CSS = `.skills{max-width:780px;min-width:0;overflow-wrap:anywhere}.skills h2{font-size:1.1rem}.skills .card{padding:18px;margin:14px 0;min-width:0}.skills form,.skills label{display:grid;gap:10px}.skills input,.skills textarea,.skills select{box-sizing:border-box;width:100%;max-width:100%;min-width:0}.skills textarea{resize:vertical;min-height:130px}.skills button{justify-self:start;white-space:nowrap;min-height:44px}.skills summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.skills pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto;font-size:.9rem}.skills .skill-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.skills .skill-heading h2{margin:0}.skills .skill-state{font-size:.85rem;flex-shrink:0}.skills .skill-source{font-size:.85rem}.skills .skill-controls{display:flex;gap:12px;flex-wrap:wrap}.skills .skill-controls form{margin:0}.skills details details{margin-top:10px}.skills [hidden]{display:none!important}.skills .skill-files{max-height:200px;overflow:auto}.skills .problem{padding:12px}@media(max-width:600px){.skills input,.skills textarea,.skills select{font-size:16px}.skills .card{padding:14px}.skills .skill-heading{align-items:flex-start}}`;
 function source(skill) {
     return html `<p class="skill-source">${skill.source} · ${skill.sha.slice(0, 10)}</p><p>${skill.files.length} files · ${Math.ceil(skill.files.reduce((n, f) => n + Buffer.from(f.base64, "base64").length, 0) / 1024)} KB</p><pre>${Buffer.from(skill.files.find((f) => f.path === "SKILL.md").base64, "base64").toString("utf8")}</pre><details><summary>Package files</summary><ul class="skill-files">${skill.files.map((f) => html `<li>${f.path}</li>`)}</ul></details>`;
 }
+/** A skill's package as the settings page shows it: where it came from, its size, its SKILL.md, its files. */
+function sourceKit(skill) {
+    const kb = Math.ceil(skill.files.reduce((n, f) => n + Buffer.from(f.base64, "base64").length, 0) / 1024);
+    return joinHtml([
+        facts([["Source", html `${skill.source} · <span class="k-mono">${skill.sha.slice(0, 10)}</span>`], ["Size", `${skill.files.length} files · ${kb} KB`]]),
+        html `<pre class="k-scode">${Buffer.from(skill.files.find((f) => f.path === "SKILL.md").base64, "base64").toString("utf8")}</pre>`,
+        disclose("Package files", html `<ul class="k-note">${skill.files.map((f) => html `<li class="k-mono">${f.path}</li>`)}</ul>`),
+    ]);
+}
 export function skillsHtml(view, csrf, canManage, options = {}) {
     const manage = canManage && !!csrf, base = {
         repo: view.repo,
@@ -20,7 +30,27 @@ export function skillsHtml(view, csrf, canManage, options = {}) {
             view.selection[skill.name]?.enabled === true;
         const replaced = view.selection[skill.name]?.enabled &&
             view.selection[skill.name]?.sha !== skill.sha;
-        return html `<article class="card" id="skill-${skill.sha}"><div class="skill-heading"><h2>${skill.name}</h2><span class="skill-state">${enabled ? "Enabled" : "In library"}</span></div><p>${skill.description}</p>${skill.requirements ? html `<p><strong>Requires:</strong> ${skill.requirements} <span class="meta">Availability is checked when the agent tests or uses it.</span></p>` : ""}${skill.warnings.map((w) => html `<p class="meta">${w}</p>`)}<details${options.focus === skill.sha ? html ` open` : ""}><summary>Review skill</summary>${source(skill)}${manage ? form(enabled ? "disable" : "enable", html `${replaced ? html `<p>Replaces the enabled version of this skill for new tasks.</p>` : ""}<button>${enabled ? "Disable skill" : "Enable skill"}</button>`, { sha: skill.sha }) : ""}</details>${manage ? html `<details${options.draft?.["sha"] === skill.sha ? html ` open` : ""}><summary>Test skill</summary>${form("test", html `<p>${options.agent ?? "Uses this project’s configured report agent"}. Runs a read-only sample through the normal task and approval flow.</p><label>Sample request<textarea name="sample" required maxlength="800" placeholder="Review this project’s home page and suggest three clearer button labels.">${options.draft?.["sha"] === skill.sha ? (options.draft?.["sample"] ?? "") : ""}</textarea></label><p class="meta">The report shows what worked and what needs tools or permission. Enabled status alone does not prove use.</p><button>Create test</button>`, { sha: skill.sha, nonce: randomUUID() })}</details>` : ""}</article>`;
+        const toggle = manage ? form(enabled ? "disable" : "enable", joinHtml([
+            replaced ? note("Replaces the enabled version of this skill for new tasks.") : "",
+            acts(btn(enabled ? "Disable skill" : "Enable skill", { sm: true, type: "submit" })),
+        ]), { sha: skill.sha }) : "";
+        const testing = manage ? disclose("Test skill", form("test", joinHtml([
+            note(`${options.agent ?? "Uses this project’s configured report agent"}. Runs a read-only sample through the normal task and approval flow.`),
+            formRow("Sample request", "The report shows what worked and what needs tools or permission. Enabled status alone does not prove use.", textarea({ id: `skill-sample-${skill.sha.slice(0, 12)}`, name: "sample", rows: 3, value: options.draft?.["sha"] === skill.sha ? (options.draft?.["sample"] ?? "") : "",
+                attrs: { required: true, maxlength: 800, placeholder: "Review this project’s home page and suggest three clearer button labels.", "aria-label": "Sample request" } }), "top"),
+            acts(btn("Create test", { sm: true, type: "submit" })),
+        ]), { sha: skill.sha, nonce: randomUUID() }), options.draft?.["sha"] === skill.sha) : "";
+        return settingsRecord({
+            title: html `<span>${skill.name}</span>${chip(enabled ? "Enabled" : "In library", enabled ? "done" : "")}`,
+            sub: skill.description,
+            attrs: { id: `skill-${skill.sha}` },
+            more: joinHtml([
+                skill.requirements ? note(`Requires: ${skill.requirements}. Availability is checked when the agent tests or uses it.`) : "",
+                ...skill.warnings.map((w) => note(w)),
+                disclose("Review skill", joinHtml([sourceKit(skill), toggle]), options.focus === skill.sha),
+                testing,
+            ]),
+        });
     };
     const names = [...new Set(view.library.map((s) => s.name))];
     const cards = names
@@ -29,19 +59,41 @@ export function skillsHtml(view, csrf, canManage, options = {}) {
             versions.find((s) => s.sha === view.selection[name]?.sha) ??
             versions.at(-1);
         const older = versions.filter((s) => s !== primary);
-        return html `<div data-skill-group data-skill-query="${name + " " + primary.description}">${renderSkill(primary)}${older.length ? html `<details><summary>Other versions (${older.length})</summary>${older.map(renderSkill)}</details>` : ""}</div>`;
+        return html `<div data-skill-group data-skill-query="${name + " " + primary.description}">${renderSkill(primary)}${older.length ? disclose(`Other versions (${older.length})`, joinHtml(older.map(renderSkill))) : ""}</div>`;
     });
     const search = names.length > 5
-        ? html `<label>Search library<input type="search" data-skill-search placeholder="Name or description"></label><p data-skill-no-matches hidden>No matching skills.</p>`
+        ? html `${formRow("Search library", null, input({ id: "skill-search", name: "skill-search", type: "search", attrs: { "data-skill-search": true, placeholder: "Name or description", "aria-label": "Search library" } }), "wide")}<p class="k-note" data-skill-no-matches hidden>No matching skills.</p>`
         : "";
     const d = options.draft ?? {};
     const add = manage
-        ? html `<details class="card"${options.error && options.draft?.["method"] ? html ` open` : ""}><summary>Add skill</summary>${postForm("/settings/skills/import", html `<label>Add from<select name="method" data-skill-method><option value="paste"${d["method"] === "paste" ? html ` selected` : ""}>Paste SKILL.md</option><option value="github"${d["method"] === "github" ? html ` selected` : ""}>GitHub folder</option><option value="folder"${d["method"] === "folder" ? html ` selected` : ""}>Local folder</option></select></label><div data-skill-input="paste"><label>SKILL.md<textarea name="content" rows="8" maxlength="24576" placeholder="---&#10;name: design-review&#10;description: Review interface copy and layout.&#10;---&#10;Write your instructions here.">${d["content"]}</textarea></label></div><div data-skill-input="github"><label>Public GitHub folder<input name="url" type="url" value="${d["url"]}" placeholder="https://github.com/owner/repo/tree/main/skills/review"></label></div><div data-skill-input="folder"><label>Skill folder<input type="file" webkitdirectory multiple data-skill-folder></label><input type="hidden" name="files" value=""><p class="meta">Choose the folder containing SKILL.md. Up to 64 files, 1 MB total.</p><noscript>Folder uploads require JavaScript. You can paste SKILL.md or use a GitHub folder.</noscript></div><p class="meta">Added to your library first. Review its source and requirements before enabling it.</p><p data-skill-error role="alert" hidden></p><button>Add to library</button>`, { attrs: { "data-skill-import": true }, hidden: fields(base) })}</details>`
+        ? disclose("Add a skill", postForm("/settings/skills/import", joinHtml([
+            formRow("Add from", null, select({ id: "skill-method", name: "method", label: "Add from", current: d["method"] ?? "paste", attrs: { "data-skill-method": true },
+                items: [["paste", "Paste SKILL.md"], ["github", "GitHub folder"], ["folder", "Local folder"]] })),
+            html `<div data-skill-input="paste">${formRow("SKILL.md", null, textarea({ id: "skill-content", name: "content", rows: 8, value: d["content"] ?? "",
+                attrs: { maxlength: 24576, placeholder: "---\nname: design-review\ndescription: Review interface copy and layout.\n---\nWrite your instructions here.", "aria-label": "SKILL.md" } }), "top")}</div>`,
+            html `<div data-skill-input="github">${formRow("Public GitHub folder", null, input({ id: "skill-url", name: "url", type: "url", value: d["url"] ?? "",
+                attrs: { placeholder: "https://github.com/owner/repo/tree/main/skills/review", "aria-label": "Public GitHub folder" } }), "wide")}</div>`,
+            html `<div data-skill-input="folder">${formRow("Skill folder", "Choose the folder containing SKILL.md. Up to 64 files, 1 MB total.", html `<input class="k-input" id="skill-folder" type="file" webkitdirectory multiple data-skill-folder aria-label="Skill folder">`)}<input type="hidden" name="files" value="">\
+<noscript>${note("Folder uploads need JavaScript. You can paste SKILL.md or use a GitHub folder.")}</noscript></div>`,
+            note("Added to your library first. Review its source and requirements before enabling it."),
+            html `<p class="k-err" data-skill-error role="alert" hidden></p>`,
+            acts(btn("Add to library", { variant: "primary", type: "submit" })),
+        ]), { attrs: { "data-skill-import": true }, hidden: fields(base) }), Boolean(options.error && options.draft?.["method"]))
         : "";
     const history = view.history.length
-        ? html `<details><summary>Change history</summary>${view.history.map((h) => html `<div class="card"><p>Selection ${h.revision} · ${h.actor} · ${whenUtc(h.at)}</p><ul>${h.enabled.length ? h.enabled.map((s) => html `<li>${s.name} · ${s.version}</li>`) : html `<li>No skills enabled</li>`}</ul>${manage && h.revision !== view.revision ? form("restore", html `<button>Restore selection</button>`, { restore: h.revision }) : html `<span class="meta">Current selection</span>`}</div>`)}</details>`
+        ? disclose("Change history", joinHtml(view.history.map((h) => settingsRecord({
+            title: `Selection ${h.revision}`,
+            sub: h.enabled.length ? h.enabled.map((s) => `${s.name} · ${s.version}`).join(", ") : "No skills enabled",
+            when: html `${h.actor} · ${whenUtc(h.at)}`,
+            action: manage && h.revision !== view.revision ? form("restore", btn("Restore selection", { sm: true, type: "submit" }), { restore: h.revision }) : note("Current selection"),
+        }))))
         : "";
-    return html `<section class="skills">${options.error ? html `<p class="problem" role="alert">${options.error}</p>` : ""}<p>${active ? `${active} skill${active === 1 ? "" : "s"} enabled for new tasks.` : "No skills enabled for this project."} Active tasks keep their saved versions.</p>${add}${search}${cards.length ? cards : html `<p>Your library is empty. Add a skill to review and enable it here.</p>`}${history}</section>`;
+    const library = settingsSection({
+        id: "library", title: "Library",
+        lead: `${active ? `${active} skill${active === 1 ? "" : "s"} enabled for new tasks.` : "No skills enabled for this project."} Active tasks keep their saved versions.`,
+        body: joinHtml([add, search, cards.length ? joinHtml(cards) : note("Your library is empty. Add a skill to review and enable it here."), history]),
+    });
+    return joinHtml([options.error ? notice(options.error) : "", library]);
 }
 export function skillsSnapshotHtml(snapshot) {
     if (!snapshot || !snapshot.packages.length)
@@ -49,7 +101,7 @@ export function skillsSnapshotHtml(snapshot) {
     return html `<details class="skills"><summary>Skills supplied (${snapshot.packages.length})</summary><p class="meta">Exact versions supplied to this run. This does not confirm the agent read or applied them.</p>${snapshot.packages.map((s) => html `<details><summary>${s.name} · ${s.sha.slice(0, 10)}</summary>${source(s)}</details>`)}</details>`;
 }
 export function skillsScript() {
-    return `(()=>{const search=document.querySelector('[data-skill-search]');if(search)search.addEventListener('input',()=>{let found=0;document.querySelectorAll('[data-skill-group]').forEach(el=>{el.hidden=!el.dataset.skillQuery.toLowerCase().includes(search.value.trim().toLowerCase());if(!el.hidden)found++;});document.querySelector('[data-skill-no-matches]').hidden=found>0;});const form=document.querySelector('[data-skill-import]');if(!form)return;const method=form.querySelector('[data-skill-method]'),error=form.querySelector('[data-skill-error]');function sync(){form.querySelectorAll('[data-skill-input]').forEach(el=>{el.hidden=el.dataset.skillInput!==method.value;el.querySelectorAll('input,textarea').forEach(i=>i.disabled=el.hidden);});}method.addEventListener('change',sync);sync();form.addEventListener('submit',async event=>{if(method.value!=='folder')return;if(form.dataset.prepared==='yes'){delete form.dataset.prepared;return;}event.preventDefault();error.hidden=true;const button=form.querySelector('button');button.disabled=true;try{const files=Array.from(form.querySelector('[data-skill-folder]').files);if(!files.length||files.length>64||files.reduce((n,f)=>n+f.size,0)>1048576||files.some(f=>f.size>262144))throw Error('Choose one skill folder with up to 64 files and 1 MB total.');const packed=[];for(const file of files){const parts=file.webkitRelativePath.split('/');parts.shift();const data=new Uint8Array(await file.arrayBuffer());let binary='';for(const byte of data)binary+=String.fromCharCode(byte);packed.push({path:parts.join('/'),base64:btoa(binary)});}form.querySelector('[name=files]').value=JSON.stringify(packed);form.dataset.prepared='yes';button.disabled=false;form.requestSubmit();}catch(e){error.textContent=e.message||'The folder could not be read. Select it again.';error.hidden=false;button.disabled=false;}});})();`;
+    return `(()=>{const search=document.querySelector('[data-skill-search]');if(search)search.addEventListener('input',()=>{let found=0;document.querySelectorAll('[data-skill-group]').forEach(el=>{el.hidden=!el.dataset.skillQuery.toLowerCase().includes(search.value.trim().toLowerCase());if(!el.hidden)found++;});document.querySelector('[data-skill-no-matches]').hidden=found>0;});const form=document.querySelector('[data-skill-import]');if(!form)return;const method=form.querySelector('[data-skill-method]'),error=form.querySelector('[data-skill-error]');function sync(){form.querySelectorAll('[data-skill-input]').forEach(el=>{el.hidden=el.dataset.skillInput!==method.value;el.querySelectorAll('input,textarea').forEach(i=>i.disabled=el.hidden);});}method.addEventListener('change',sync);sync();form.addEventListener('submit',async event=>{if(method.value!=='folder')return;if(form.dataset.prepared==='yes'){delete form.dataset.prepared;return;}event.preventDefault();error.hidden=true;error.textContent='';const button=form.querySelector('button');button.disabled=true;try{const files=Array.from(form.querySelector('[data-skill-folder]').files);if(!files.length||files.length>64||files.reduce((n,f)=>n+f.size,0)>1048576||files.some(f=>f.size>262144))throw Error('Choose one skill folder with up to 64 files and 1 MB total.');const packed=[];for(const file of files){const parts=file.webkitRelativePath.split('/');parts.shift();const data=new Uint8Array(await file.arrayBuffer());let binary='';for(const byte of data)binary+=String.fromCharCode(byte);packed.push({path:parts.join('/'),base64:btoa(binary)});}form.querySelector('[name=files]').value=JSON.stringify(packed);form.dataset.prepared='yes';button.disabled=false;form.requestSubmit();}catch(e){error.textContent=e.message||'The folder could not be read. Select it again.';error.hidden=false;button.disabled=false;}});})();`;
 }
 export function skillTestFeedbackHtml(test, csrf, canManage, error = "", draft = "") {
     return html `<section class="skills" id="skill-test-feedback"><h2>Improve this test</h2>${test.sourceRun ? html `<p>Revises test run #${test.sourceRun}.</p>` : ""}${test.feedback ? html `<details><summary>Feedback for this test</summary><p>${test.feedback}</p></details>` : ""}${test.revisions.length ? html `<p>${joinHtml(test.revisions.map((id, i) => html `<a href="/t/${encodeURIComponent(id)}">Test revision ${i + 1}</a>`), " · ")}</p>` : ""}${error ? html `<p role="alert">${error}</p>` : ""}${canManage && csrf ? postForm("/settings/skills/revise", html `<label>What should change?<textarea name="feedback" required maxlength="500" rows="3" placeholder="Try a clearer action label and explain why it fits the user’s goal.">${draft}</textarea></label><p class="meta">Creates another report task with this skill version and your feedback. Review its scope before it runs.</p><button>Create revision</button>`, { hidden: fields({ repo: test.repo, run: test.run, nonce: randomUUID() }) }) : ""}</section>`;

package/dist/slack-settings.js

@@ -1,13 +1,20 @@
-import { html } from "./html.js";
+import { html, joinHtml } from "./html.js";
 import { loadSlackCredentials } from "./slack-api.js";
-import { chatSettingsHtml } from "./chat-settings-page.js";
+import { chatSecretRow, chatSettingsHtml } from "./chat-settings-page.js";
 export function slackSettingsHtml(store, dir, options = {}) {
     return chatSettingsHtml(store, dir, options, {
         provider: "slack",
         label: "Slack",
         credentials: loadSlackCredentials(dir),
-        setup: html `<details open><summary>Create your Slack app</summary><ol><li>Download the <a href="/settings/slack/manifest">app manifest</a>, then <a href="https://api.slack.com/apps" target="_blank" rel="noopener noreferrer">create an app</a> in your workspace using that manifest.</li><li>Under Basic Information, create an app-level token with <code>connections:write</code>.</li><li>Under OAuth &amp; Permissions, install the app and copy its bot token.</li></ol></details>`,
-        connect: password => html `<label>App token<input style="min-height:44px" type="password" name="app-token" autocomplete="off" placeholder="xapp-…" required></label><label>Bot token<input style="min-height:44px" type="password" name="bot-token" autocomplete="off" placeholder="xoxb-…" required></label>${password}<p class="meta">Tokens stay on this installation. Next, pair your own Slack account.</p><button type="submit">Connect Slack</button>`,
-        access: html `<p>Private messages and threads use your Toolroll permissions. Shared channels are not supported. Secure review links use this installation’s configured HTTPS console address.</p><p>Socket Mode connects out to Slack. It does not need a public webhook or a Tailscale account.</p>`,
+        intro: "Manage projects and review results in a private Slack conversation.",
+        steps: html `<ol class="k-note"><li>Download the <a class="k-link" href="/settings/slack/manifest">app manifest</a>, then <a class="k-link" href="https://api.slack.com/apps" target="_blank" rel="noopener noreferrer">create an app</a> in your workspace using that manifest.</li><li>Under Basic Information, create an app-level token with <code class="k-mono">connections:write</code>.</li><li>Under OAuth &amp; Permissions, install the app and copy its bot token.</li></ol>`,
+        fields: joinHtml([
+            chatSecretRow({ id: "slack-app-token", name: "app-token", label: "App token", placeholder: "xapp-…" }),
+            chatSecretRow({ id: "slack-bot-token", name: "bot-token", label: "Bot token", placeholder: "xoxb-…" }),
+        ]),
+        fieldsNote: "Tokens stay on this installation. Next, pair your own Slack account.",
+        pairWhere: "in a direct message to your Toolroll Slack app",
+        tryLine: html `Try “What needs my attention?” or “Show the evidence for the latest result.”`,
+        access: html `<p class="k-note">Private messages and threads use your Toolroll permissions. Shared channels are not supported. Secure review links use this installation’s configured HTTPS console address.</p><p class="k-note">Socket Mode connects out to Slack. It does not need a public webhook or a Tailscale account.</p>`,
     });
 }

package/dist/spend-ui.d.ts

@@ -1,50 +1,69 @@
 /**
- * The Spend page (docs/plans/spend-dashboard.md, slice 1): what agent work cost this month, with API dollars, plan
- * usage and unknown cost kept apart and never added together, broken down by project, model, role and person, the
- * runs that cost most, and what isn't recorded here. An instance operator's page. Monthly limits show read-only here
- * and change on Settings → Spend, with a step-up.
+ * The Spend page (docs/plans/spend-dashboard.md, slice 1), in the kit's Settings frame (group "spend"): the monthly
+ * limits first (the one that needs you on top), then what agent work cost in a month, with API dollars, plan usage
+ * and unknown cost kept apart and never added together, broken down by project and model (and, on demand, role,
+ * person and the costliest runs), the plan windows, and what isn't recorded here. An instance operator's page.
+ * A limit changes in place: Edit limit opens its form under the row (`?edit=<target>`), saved with a step-up.
  */
 import { type Html } from "./html.js";
+import { type ApprovalFacts } from "./design/kit.js";
 import { type BudgetState, type SpendItem } from "./spend.js";
 import type { SpendReport } from "./spend-report.js";
+import type { BrowserLimits } from "./browser-workspace.js";
+/** The page's own layout: the limit rows and meters, the summary figures and the quiet bars. Colour from tokens only. */
 export declare const SPEND_CSS: string;
 /** What this page doesn't record, in plain words (docs/plans/spend-dashboard.md §2.2). */
 export declare const NOT_COUNTED: readonly string[];
+/** A limit's row: a saved limit, or a target with none yet (Everything, a project) and what it spent so far. */
+export type LimitRowView = {
+    target: string;
+    label: string;
+    budget: BudgetState | null;
+    spentMicrousd: number;
+};
+/** The open limit form: whose, the draft the person typed, and a refusal next to the field or under the form. */
+export type LimitEdit = {
+    target: string;
+    usd?: string | null;
+    stop?: boolean | null;
+    fieldError?: string | null;
+    problem?: string | null;
+};
 export type SpendView = {
     month: string;
     previous: string;
     next: string | null;
     report: SpendReport;
-    /** This month's limits; null for a past month (a limit is this month's). */
+    /** This month's saved limits (what the budget gate counts today), whichever month is shown. */
     budgets: BudgetState[] | null;
-    /** The plan windows as their providers last reported them (limits-ui.ts), or nothing. */
-    windows: Html;
-    subagentNames: Map<number, string>;
-};
-/** Dollars for the page: a positive amount under a cent reads "<$0.01", never a false $0. */
-export declare const money: (microusd: number) => string;
-export declare function spendHtml(view: SpendView, notice: {
-    said?: string | null;
-    problem?: string | null;
-}): Html;
-export type SpendSettingsView = {
-    budgets: BudgetState[];
-    targets: {
+    /** Everything and each project with no limit yet, with what it spent this month. */
+    unlimited?: LimitRowView[];
+    /** People and subagents a limit can be added for (Add a limit). */
+    targets?: {
         value: string;
         label: string;
-        group: "Everything" | "Projects" | "People" | "Subagents";
+        group: "People" | "Subagents";
     }[];
+    /** The plan windows as their providers last reported them (limits-ui.ts limitsView), or nothing. */
+    windows: BrowserLimits | null;
     subagentNames: Map<number, string>;
-    /** Each role's model at the installation, in words. */
-    models: {
-        role: string;
-        model: string;
-    }[];
+    /** The limit form that is open, if any. */
+    edit?: LimitEdit | null;
+    /** What this request's approval shows (approvalFactsNow): a step-up asks for the password unless Passwordless is on. */
+    facts?: ApprovalFacts;
+    /** This month's name (YYYY-MM): the limits are this month's. */
+    current?: string;
 };
-/** Settings → Spend: the monthly limits editor (moved from the Spend page) and a summary of the models in use. */
-export declare function spendSettingsHtml(view: SpendSettingsView, notice: {
+/** Dollars for the page: a positive amount under a cent reads "<$0.01", never a false $0. */
+export declare const money: (microusd: number) => string;
+/** A limit Settings flags as Needs you: one that pauses work and is at or near its limit. */
+export declare const limitNeedsYou: (budget: BudgetState) => boolean;
+export declare function spendHtml(view: SpendView, said: {
     said?: string | null;
     problem?: string | null;
 }): Html;
+/** Checks the amount next to its field before any password is asked or the form leaves the page; the server checks
+ * it again. Remove skips it. */
+export declare function spendScript(): string;
 /** One row per piece of spend, for a spreadsheet (the command line's `spend --csv`). */
 export declare function spendCsv(items: readonly SpendItem[], subagentNames: Map<number, string>): string;