toolroll 0.9.86 → 0.9.88

package/dist/chat-settings-page.d.ts

@@ -7,17 +7,37 @@ export type ChatSettingsOptions = {
     now?: Date;
     who?: string;
 };
-/** What differs between the Slack and Discord settings pages; everything else is one page. */
+/** What differs between the Slack, Discord and Teams settings pages; everything else is one page. */
 export type ChatSettingsPage = {
-    provider: "slack" | "discord";
+    provider: "slack" | "discord" | "teams";
     label: string;
     credentials: ChatIdentity | null;
-    /** How to create the app, shown before it is connected. */
-    setup: Html;
-    /** The connect form's fields around the password. */
-    connect: (password: Html) => Html;
-    /** The "Access and setup" paragraphs. */
-    access: Html;
+    /** One sentence on what connecting gives, shown before it is connected. */
+    intro: string;
+    /** How to create the app, as list items, shown before it is connected. */
+    steps: Html;
+    /** The connect form's own fields (the password is the kit's). */
+    fields: Html;
+    /** One line under the connect fields. */
+    fieldsNote: string;
+    /** Where the pairing message is sent ("in a direct message to your Toolroll Slack app"). */
+    pairWhere: string;
+    /** What to try once paired. */
+    tryLine: Html;
+    /** Lines shown with the connection (the Teams messaging endpoint). */
+    connection?: Html;
+    /** The status words while connected and while waiting. */
+    liveWords?: readonly [on: string, off: string];
+    /** The "Access and setup" paragraphs, if any. */
+    access?: Html;
 };
-/** Settings → Slack or Discord: connect the app once, then each teammate pairs their own account. */
+/** A secret the connect form posts (an app or bot token, a client secret): masked, never given a value, kept out of
+ * password managers. */
+export declare function chatSecretRow(options: {
+    id: string;
+    name: string;
+    label: string;
+    placeholder?: string;
+}): Html;
+/** Settings → Slack, Discord or Teams: connect the app once, then each teammate pairs their own account. */
 export declare function chatSettingsHtml(store: Store, dir: string, options: ChatSettingsOptions, page: ChatSettingsPage): Html;

package/dist/chat-settings-page.js

@@ -1,41 +1,72 @@
+import { settingsSubPage } from "./settings-groups-ui.js";
 import { loadPrimary } from "./webhooks.js";
-import { html, postForm } from "./html.js";
+import { html, joinHtml } from "./html.js";
 import { ChatState } from "./chat-delivery-state.js";
-/** Settings → Slack or Discord: connect the app once, then each teammate pairs their own account. */
+import { acts, btn, chip, codeLine, disclose, formRow, infoLine, input, note, notice, settingsSection } from "./server/kit.js";
+import { kitSectionForm, SECRET_OPT_OUTS } from "./settings-kit.js";
+/** A secret the connect form posts (an app or bot token, a client secret): masked, never given a value, kept out of
+ * password managers. */
+export function chatSecretRow(options) {
+    return formRow(options.label, null, input({ id: options.id, name: options.name, type: "password",
+        attrs: { autocomplete: "off", spellcheck: "false", "data-so-secret": true, ...SECRET_OPT_OUTS, required: true, placeholder: options.placeholder, "aria-label": options.label } }));
+}
+/** Settings → Slack, Discord or Teams: connect the app once, then each teammate pairs their own account. */
 export function chatSettingsHtml(store, dir, options, page) {
     const { provider, label, credentials } = page, state = new ChatState(store, provider), bindings = credentials ? state.bindings(credentials.installation).filter(one => state.live(one)) : [], binding = options.who === undefined ? null : bindings.find(one => one.approver === options.who) ?? null, others = bindings.length - (binding === null ? 0 : 1);
     const runtime = credentials ? state.runtime(credentials.installation) : null;
-    const now = options.now ?? new Date(), live = runtime &&
+    const now = options.now ?? new Date(), live = runtime !== null &&
         runtime.leaseUntil !== null &&
         runtime.leaseUntil > now.toISOString() &&
         runtime.connected;
-    const password = html `<label>Your Toolroll password<input style="min-height:44px" type="password" name="password" autocomplete="current-password" required></label>`;
-    const post = (action, content) => postForm(`/settings/${provider}/${action}`, content, { attrs: { class: "card" } });
-    const parts = [];
+    const route = (action) => `/settings/${provider}/${action}`;
+    const problem = options.problem ? notice(options.problem) : "";
+    const access = page.access === undefined ? "" : disclose("Access and setup", page.access);
+    const sections = [];
     if (!credentials) {
-        parts.push(html `<p>Manage projects and review results in a private ${label} conversation.</p>`, page.setup, post("connect", page.connect(password)));
+        sections.push(settingsSection({ id: "setup", title: `1. Create the ${label} app`, body: page.steps }), settingsSection({ id: "connect", title: `2. Connect ${label}`,
+            body: kitSectionForm({ proof: `${provider}-open`, action: route("connect"), id: "connect-form", save: { label: `Connect ${label}` },
+                confirm: `Connect ${label}`, body: joinHtml([page.fields, note(page.fieldsNote)]) }) }), settingsSection({ id: "pair", title: "3. Pair your account", body: note(`Once ${label} is connected, pair your own account here.`) }));
+        return settingsSubPage("alerts", label, joinHtml([problem, ...sections, access]), { lead: page.intro });
+    }
+    const [onWords, offWords] = page.liveWords ?? ["Connected", "Waiting for connection"];
+    sections.push(settingsSection({ id: "connection", title: credentials.workspace, state: html ` ${chip(live ? onWords : offWords, live ? "done" : "")}`,
+        body: joinHtml([
+            page.connection ?? "",
+            runtime?.problem ? notice(String(runtime.problem)) : "",
+            !live && !runtime?.problem ? note(`Keep Toolroll's builder running to receive ${label} messages.`) : "",
+            disclose("Connection settings", kitSectionForm({ proof: `${provider}-close`, action: route("disconnect"), id: "disconnect-form",
+                save: { label: `Disconnect ${label}`, variant: "danger" }, confirm: `Disconnect ${label}`, body: html `` })),
+        ]) }));
+    const teammates = others ? `${others} teammate${others === 1 ? " is" : "s are"}` : "";
+    if (options.code) {
+        // The code shows once, on this page only: selectable text, never in a link or an address.
+        sections.push(settingsSection({ id: "pair", title: "Pair your account", state: " · Code ready",
+            lead: `Send this ${page.pairWhere}. It expires in 10 minutes.`,
+            body: joinHtml([codeLine(`pair ${options.code}`), note("Once you've sent it, this page says your account is paired."),
+                acts(btn("Check connection", { sm: true, href: `/settings/${provider}` }))]) }));
+    }
+    else if (binding && state.live(binding)) {
+        const { pending, dropped: failed } = state.partCounts(binding.id);
+        sections.push(settingsSection({ id: "pair", title: "Your account", state: " · Paired",
+            lead: `Your ${label} account is paired.${teammates ? ` ${teammates} paired too.` : ""}`,
+            body: joinHtml([
+                pending ? infoLine(`${pending} ${pending === 1 ? "reply is" : "replies are"} waiting to send.`) : "",
+                failed ? notice(`${failed} ${failed === 1 ? "reply" : "replies"} could not be delivered. Open the saved chat to recover them.`) : "",
+                note(page.tryLine),
+                acts(btn("Open saved chat", { sm: true, href: "/chat" })),
+                loadPrimary(process.env, dir) === provider
+                    ? formRow("Task updates", null, html `<span>Sent here</span>`, "inline")
+                    : kitSectionForm({ proof: `${provider}-alerts`, action: route("alerts"), id: "alerts-form", save: { label: "Send task updates here", variant: "outline" },
+                        body: note(`Task updates aren't sent to ${label} now.`) }),
+                kitSectionForm({ proof: `${provider}-close`, action: route("unpair"), id: "unpair-form", save: { label: "Unpair my account", variant: "danger" },
+                    confirm: `Unpair your ${label} account`, body: note("Unpairing ends every open button in your chat. Teammates are unaffected.") }),
+            ]) }));
     }
     else {
-        parts.push(html `<p><strong>${credentials.workspace}</strong> · ${live ? "Connected" : "Waiting for connection"}</p>`);
-        if (runtime?.problem)
-            parts.push(html `<p role="status">${String(runtime.problem)}</p>`);
-        if (!live && !runtime?.problem)
-            parts.push(html `<p>Keep the Toolroll worker running to receive ${label} messages.</p>`);
-        if (options.code) {
-            parts.push(html `<h2>Pair your account</h2><p>Send this in a direct message to your Toolroll ${label} app. It expires in 10 minutes.</p>`, html `<label>Pairing message<input type="text" readonly value="pair ${options.code}" autocomplete="off" style="width:100%;max-width:100%;font-size:14px;min-height:44px"></label>`, html `<a class="button-link" style="min-height:44px;white-space:nowrap" href="/settings/${provider}">Check connection</a>`);
-        }
-        else if (binding && state.live(binding)) {
-            const { pending, dropped: failed } = state.partCounts(binding.id);
-            parts.push(html `<p>Your ${label} account is paired.${others ? ` ${others} teammate${others === 1 ? " is" : "s are"} paired too.` : ""}${pending ? ` ${pending} replies waiting to send.` : ""}${failed ? ` ${failed} replies could not be delivered. Open the saved chat to recover them.` : ""}</p>`, html `<p>Try “What needs my attention?” or “Show the evidence for the latest result.”</p>`, html `<p><a href="/chat">Open saved chat</a></p>`, loadPrimary(process.env, dir) === provider
-                ? html `<p>Task updates are sent here.</p>`
-                : post("alerts", html `<button type="submit">Send task updates here</button>`));
-        }
-        else {
-            parts.push(post("pair", html `<h2>Pair your account</h2><p>Your paired ${label} account can read your connected projects and confirm proposed changes. Password approvals still open in Toolroll.${others ? ` ${others} teammate${others === 1 ? " is" : "s are"} already paired.` : ""}</p>${password}<button type="submit">Create pairing code</button>`));
-        }
-        if (binding && state.live(binding) && !options.code)
-            parts.push(post("unpair", html `${password}<p class="meta">Unpairing ends every open button in your chat. Teammates are unaffected.</p><button type="submit">Unpair my account</button>`));
-        parts.push(html `<details><summary>Connection settings</summary>${post("disconnect", html `${password}<button type="submit">Disconnect ${label}</button>`)}</details>`);
+        sections.push(settingsSection({ id: "pair", title: "Pair your account", state: " · Not paired",
+            lead: `Your paired ${label} account can read your connected projects and confirm proposed changes. Password approvals still open in Toolroll.${teammates ? ` ${teammates} already paired.` : ""}`,
+            body: kitSectionForm({ proof: `${provider}-open`, action: route("pair"), id: "pair-form", native: true, save: { label: "Create pairing code" },
+                confirm: `Pair your ${label} account`, body: note("You get a one-time message to send to the app.") }) }));
     }
-    return html `<section style="max-width:42rem;overflow-wrap:anywhere"><p><a href="/settings">Settings</a></p><h1>${label}</h1>${options.problem ? html `<p class="problem" role="alert">${options.problem}</p>` : ""}${parts}<details><summary>Access and setup</summary>${page.access}</details></section>`;
+    return settingsSubPage("alerts", label, joinHtml([problem, ...sections, access]));
 }

package/dist/check-levels-ui.d.ts

@@ -28,4 +28,5 @@ export type CheckSettingsView = {
     problem: string | null;
 };
 export declare function checkSettingsHtml(view: CheckSettingsView): Html;
-export declare const CHECK_SETTINGS_CSS = "\n  .check-settings { display: grid; gap: .6rem; max-width: 40rem; }\n  .check-settings p, .check-settings h2 { margin: 0; }\n  .check-settings h2 { font-size: 1rem; }\n  .check-settings fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: .25rem; }\n  .check-settings legend { font-weight: 600; margin-bottom: .25rem; }\n  .check-settings label { display: grid; gap: .25rem; }\n  .check-settings .check-choice { display: flex; align-items: flex-start; gap: .6rem; min-height: 44px; padding: .35rem 0; cursor: pointer; }\n  .check-settings .check-choice > span { display: grid; gap: .1rem; }\n  .check-settings .check-choice input { margin-top: .2rem; }\n  .check-settings input[type=password], .check-settings input[type=number], .check-settings textarea { min-height: 44px; box-sizing: border-box; width: 100%; }\n  .check-settings button { min-height: 44px; justify-self: start; }\n  .check-settings .check-command { overflow-wrap: anywhere; }\n  .check-terms { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }\n  @media (max-width: 480px) { .check-settings button { justify-self: stretch; } }\n  .follow-ups .follow-up-list { margin: .4rem 0; padding-left: 1.1rem; display: grid; gap: .25rem; }\n  .follow-ups .follow-up-acts, .follow-ups .follow-up-act { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; }\n  .follow-ups .follow-up-act { margin: 0; }\n  .follow-ups button { min-height: 44px; }\n  @media (max-width: 480px) { .follow-ups .follow-up-acts, .follow-ups .follow-up-act { display: grid; } .follow-ups .follow-up-act button { width: 100%; } }\n";
+/** The follow-up list's look (result-follow-ups.ts); the checks page itself is kit markup. */
+export declare const CHECK_SETTINGS_CSS = "\n  .follow-ups .follow-up-list { margin: .4rem 0; padding-left: 1.1rem; display: grid; gap: .25rem; }\n  .follow-ups .follow-up-acts, .follow-ups .follow-up-act { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; }\n  .follow-ups .follow-up-act { margin: 0; }\n  .follow-ups button { min-height: 44px; }\n  @media (max-width: 480px) { .follow-ups .follow-up-acts, .follow-ups .follow-up-act { display: grid; } .follow-ups .follow-up-act button { width: 100%; } }\n";

package/dist/check-levels-ui.js

@@ -2,72 +2,81 @@
  * words. One choice (Quick, Full, Off) and the quick command beside the full
  * one. Every change takes the password and lands in the ledger; approving a
  * command restates exactly what will run, unattended, before the yes. */
-import { html, postForm, reauth } from "./html.js";
+import { html, joinHtml } from "./html.js";
 import { CHECK_LEVELS, CHECK_LEVEL_HINTS, CHECK_LEVEL_WORDS } from "./check-levels.js";
 import { BATCH_HINT } from "./batch-policy.js";
+import { codeLine, disclose, formRow, infoLine, input, note, notice, radios, settingsSection, textarea } from "./server/kit.js";
+import { kitSectionForm } from "./settings-kit.js";
+const list = (items) => html `<ul class="k-note">${items.map(one => html `<li>${one}</li>`)}</ul>`;
 export function checkSettingsHtml(view) {
-    const post = (act, body, attrs) => postForm("/settings/checks", body, { attrs, hidden: { repo: view.repo, act } });
-    const password = html `${reauth(html `<label>Password<input type="password" name="password" autocomplete="current-password" required></label>`)}`;
-    const notes = [
-        view.said === null ? "" : html `<p class="notice" role="status">${view.said}</p>`,
-        view.problem === null ? "" : html `<p class="problem" role="alert">${view.problem}</p>`,
-    ];
-    const head = html `<p class="meta">${view.name} · <span class="mono">${view.repo}</span></p>${notes}`;
-    const command = (one) => html `<p class="mono check-command">${one.command}</p><p class="meta">Up to ${Math.round(one.timeoutMs / 1000)}s · approved by ${one.approvedBy}</p>`;
+    const form = (id, act, body, save, extra = {}) => kitSectionForm({ proof: "checks", action: "/settings/checks", id, hidden: { repo: view.repo, act, ...extra }, save, body });
+    const head = joinHtml([
+        view.problem === null ? "" : notice(view.problem),
+        view.said === null ? "" : infoLine(view.said),
+        note(html `${view.name} · <span class="k-mono">${view.repo}</span>`),
+    ]);
+    const command = (one) => joinHtml([codeLine(one.command), note(`Up to ${Math.round(one.timeoutMs / 1000)}s · approved by ${one.approvedBy}`)]);
     // Quick with no quick command runs the full check; say so where the choice is made.
     const fallsBack = view.level === "quick" && view.quick === null;
-    const current = html `<p><strong>${CHECK_LEVEL_WORDS[view.level]}</strong> · ${CHECK_LEVEL_HINTS[view.level]}</p>${fallsBack ? html `<p class="meta">No quick command yet, so builds run the full check.</p>` : ""}${view.level !== "full" && view.full !== null ? html `<p class="meta">The full check still runs when a pull request opens, and Merge waits for it.</p>` : ""}`;
-    if (!view.canChange) {
-        return html `${head}<section class="card check-settings">${current}</section>${batchHtml(view, null)}${reviewHtml(view, null)}<section class="card check-settings"><h2>Quick check</h2>${view.quick === null ? html `<p class="meta">None yet.</p>` : command(view.quick)}</section><section class="card check-settings"><h2>Full check</h2>${view.full === null ? html `<p class="meta">None yet.</p>` : command(view.full)}</section>`;
+    const levelNotes = joinHtml([
+        fallsBack ? note("No quick command yet, so builds run the full check.") : "",
+        view.level !== "full" && view.full !== null ? note("The full check still runs when a pull request opens, and Merge waits for it.") : "",
+    ]);
+    const level = settingsSection({ id: "check-level", title: "After each build", state: ` · ${CHECK_LEVEL_WORDS[view.level]}`, lead: CHECK_LEVEL_HINTS[view.level],
+        body: !view.canChange ? levelNotes : joinHtml([levelNotes, kitSectionForm({ proof: "checks", action: "/settings/checks", id: "check-level-form", gate: true,
+                hidden: { repo: view.repo, act: "level" }, confirm: "Change checks",
+                body: joinHtml([
+                    formRow("After each build", "A task can choose its own checks when it's filed. With Quick or Off, the full check runs when a pull request opens, and Merge waits for it unless you merge anyway.", radios({ name: "level", legend: "After each build", current: view.level, items: CHECK_LEVELS.map(one => ({ value: one, label: CHECK_LEVEL_WORDS[one], text: CHECK_LEVEL_HINTS[one] })) }), "wide"),
+                ]) })]) });
+    const commandForm = (id, value, submit) => form(id, "quick", joinHtml([
+        formRow("Command", null, textarea({ id: `${id}-command`, name: "command", value, rows: 2, attrs: { maxlength: 2000, spellcheck: "false", required: true, "aria-label": "Command" } }), "wide"),
+        formRow("Time limit", "Seconds, up to 3600.", input({ id: `${id}-timeout`, name: "timeout", type: "number", value: String(view.quick === null ? 180 : Math.round(view.quick.timeoutMs / 1000)),
+            attrs: { min: 1, max: 3600, required: true, "aria-label": "Time limit in seconds" } }), "inline"),
+        list(["Runs unattended right after every Quick build, in that build's checkout.", "Plain environment: no credentials.", "A failure shows on the result; nothing is blocked."]),
+    ]), { label: submit, variant: "outline" });
+    const quick = settingsSection({ id: "quick-check", title: "Quick check", state: view.quick === null ? " · None yet" : "",
+        lead: view.quick === null && view.canChange
+            ? view.suggestion === null ? "Typecheck and the tests near the change, ideally under 2 minutes." : "Suggested from the project's scripts. Edit it before approving."
+            : undefined,
+        body: view.quick === null
+            ? view.canChange ? commandForm("quick-form", view.suggestion ?? "", "Approve quick check") : ""
+            : joinHtml([command(view.quick), !view.canChange ? "" : joinHtml([
+                    disclose("Change quick check", commandForm("quick-change-form", view.quick.command, "Approve change")),
+                    disclose("Remove quick check", form("quick-clear-form", "quick-clear", note("Quick builds run the full check instead."), { label: "Remove", variant: "danger" })),
+                ])]) });
+    const full = settingsSection({ id: "full-check", title: "Full check", state: view.full === null ? " · None yet" : "",
+        body: view.full === null
+            ? joinHtml([note("Approve one from the command line:"), codeLine(`toolroll verify set --repo … --command "…"`)])
+            : command(view.full) });
+    return joinHtml([head, level, batchHtml(view), reviewHtml(view), quick, full]);
+    /** Batch checks: one state and one sentence; turning it on restates exactly what happens before the password. */
+    function batchHtml(view) {
+        const batch = view.batch;
+        if (batch === undefined)
+            return "";
+        const act = batch.on ? "Turn off" : "Turn on";
+        const terms = batch.on ? note("Each result runs its own full check again. Results already waiting are checked now.")
+            : list(["When results finish within 10 minutes of each other, they're merged in a temporary checkout and the full check runs once.",
+                "If it fails, the batch is split until the result that breaks it is found. Results that conflict are checked on their own.",
+                "Nothing is merged into a real branch. Each result still lands on its own."]);
+        return settingsSection({ id: "batch-checks", title: "Batch checks", state: html `<span data-batch-checks="${batch.on ? "on" : "off"}"> · ${batch.on ? "On" : "Off"}</span>`, lead: BATCH_HINT,
+            body: joinHtml([batch.on && view.level !== "full" ? note("Only Full checks are batched.") : "",
+                view.canChange ? disclose(act, form("batch-form", "batch", terms, { label: act, variant: "outline" }, { on: batch.on ? "0" : "1" })) : ""]) });
+    }
+    /** Automatic review: one state, one sentence, and its one change behind a disclosure (the password). */
+    function reviewHtml(view) {
+        const review = view.review;
+        if (review === undefined)
+            return "";
+        const state = review.on ? (review.source === "hands-off" ? "On while hands-off lasts" : "On") : "Off";
+        const act = review.on ? "Turn off" : "Turn on";
+        return settingsSection({ id: "automatic-review", title: "Automatic review", state: html `<span data-review-switch="${review.on ? "on" : "off"}"> · ${state}</span>`,
+            lead: "One read-only review after each build passes its checks. Only high findings send it back, once.",
+            body: view.canChange ? disclose(act, form("review-form", "review", html ``, { label: act, variant: "outline" }, { on: review.on ? "0" : "1" })) : "" });
     }
-    const choices = CHECK_LEVELS.map(level => html `<label class="check-choice"><input type="radio" name="level" value="${level}"${level === view.level ? html ` checked` : ""}><span><strong>${CHECK_LEVEL_WORDS[level]}</strong><span class="meta">${CHECK_LEVEL_HINTS[level]}</span></span></label>`);
-    const levelForm = post("level", html `<fieldset><legend>After each build</legend>${choices}</fieldset>${fallsBack ? html `<p class="meta">No quick command yet, so Quick runs the full check.</p>` : ""}<p class="meta">A task can choose its own checks when it's filed. With Quick or Off, the full check runs when a pull request opens, and Merge waits for it unless you merge anyway.</p>${password}<button type="submit">Save</button>`, { class: "card check-settings" });
-    const quickTerms = html `<ul class="check-terms"><li>Runs unattended right after every Quick build, in that build's checkout.</li><li>Plain environment: no credentials.</li><li>A failure shows on the result; nothing is blocked.</li></ul>`;
-    const quickForm = (value, submit) => post("quick", html `<label>Command<textarea name="command" rows="2" maxlength="2000" spellcheck="false" class="mono" required>${value}</textarea></label><label>Time limit (seconds)<input type="number" name="timeout" min="1" max="3600" value="${view.quick === null ? 180 : Math.round(view.quick.timeoutMs / 1000)}" required></label>${quickTerms}${password}<button type="submit">${submit}</button>`, { class: "check-settings" });
-    const quick = view.quick === null
-        ? html `<section class="card check-settings"><h2>Quick check</h2>${view.suggestion === null ? html `<p class="meta">Typecheck and the tests near the change, ideally under 2 minutes.</p>` : html `<p class="meta">Suggested from the project's scripts. Edit it before approving.</p>`}${quickForm(view.suggestion ?? "", "Approve quick check")}</section>`
-        : html `<section class="card check-settings"><h2>Quick check</h2>${command(view.quick)}<details class="settings-more"><summary>Change quick check</summary>${quickForm(view.quick.command, "Approve change")}</details><details class="settings-more"><summary>Remove quick check</summary>${post("quick-clear", html `<p class="meta">Quick builds run the full check instead.</p>${password}<button type="submit" class="danger">Remove</button>`, { class: "check-settings" })}</details></section>`;
-    const full = html `<details class="settings-more"><summary>Full check</summary><section class="card check-settings">${view.full === null ? html `<p class="meta">None yet. Approve one with <span class="mono">toolroll verify set --repo … --command "…"</span>.</p>` : command(view.full)}</section></details>`;
-    return html `${head}${levelForm}${batchHtml(view, password)}${reviewHtml(view, password)}${quick}${full}`;
-}
-/** Batch checks: one state and one sentence; turning it on restates exactly what happens, behind a disclosure with the password. */
-function batchHtml(view, password) {
-    const batch = view.batch;
-    if (batch === undefined)
-        return "";
-    const act = batch.on ? "Turn off" : "Turn on";
-    const terms = batch.on ? html `<p class="meta">Each result runs its own full check again. Results already waiting are checked now.</p>`
-        : html `<ul class="check-terms"><li>When results finish within 10 minutes of each other, they're merged in a temporary checkout and the full check runs once.</li><li>If it fails, the batch is split until the result that breaks it is found. Results that conflict are checked on their own.</li><li>Nothing is merged into a real branch. Each result still lands on its own.</li></ul>`;
-    const change = password === null ? ""
-        : html `<details class="settings-more"><summary>${act}</summary>${postForm("/settings/checks", html `${terms}${password}<button type="submit">${act}</button>`, { attrs: { class: "check-settings" }, hidden: { repo: view.repo, act: "batch", on: batch.on ? "0" : "1" } })}</details>`;
-    return html `<section class="card check-settings" data-batch-checks="${batch.on ? "on" : "off"}"><h2>Batch checks</h2><p><strong>${batch.on ? "On" : "Off"}</strong> · ${BATCH_HINT}</p>${batch.on && view.level !== "full" ? html `<p class="meta">Only Full checks are batched.</p>` : ""}${change}</section>`;
-}
-/** Automatic review: one state, one sentence, and its one change behind a disclosure (the password). */
-function reviewHtml(view, password) {
-    const review = view.review;
-    if (review === undefined)
-        return "";
-    const state = review.on ? (review.source === "hands-off" ? "On while hands-off lasts" : "On") : "Off";
-    const act = review.on ? "Turn off" : "Turn on";
-    const change = password === null ? ""
-        : html `<details class="settings-more"><summary>${act}</summary>${postForm("/settings/checks", html `${password}<button type="submit">${act}</button>`, { attrs: { class: "check-settings" }, hidden: { repo: view.repo, act: "review", on: review.on ? "0" : "1" } })}</details>`;
-    return html `<section class="card check-settings" data-review-switch="${review.on ? "on" : "off"}"><h2>Automatic review</h2><p><strong>${state}</strong> · One read-only review after each build passes its checks. Only high findings send it back, once.</p>${change}</section>`;
 }
+/** The follow-up list's look (result-follow-ups.ts); the checks page itself is kit markup. */
 export const CHECK_SETTINGS_CSS = `
-  .check-settings { display: grid; gap: .6rem; max-width: 40rem; }
-  .check-settings p, .check-settings h2 { margin: 0; }
-  .check-settings h2 { font-size: 1rem; }
-  .check-settings fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: .25rem; }
-  .check-settings legend { font-weight: 600; margin-bottom: .25rem; }
-  .check-settings label { display: grid; gap: .25rem; }
-  .check-settings .check-choice { display: flex; align-items: flex-start; gap: .6rem; min-height: 44px; padding: .35rem 0; cursor: pointer; }
-  .check-settings .check-choice > span { display: grid; gap: .1rem; }
-  .check-settings .check-choice input { margin-top: .2rem; }
-  .check-settings input[type=password], .check-settings input[type=number], .check-settings textarea { min-height: 44px; box-sizing: border-box; width: 100%; }
-  .check-settings button { min-height: 44px; justify-self: start; }
-  .check-settings .check-command { overflow-wrap: anywhere; }
-  .check-terms { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
-  @media (max-width: 480px) { .check-settings button { justify-self: stretch; } }
   .follow-ups .follow-up-list { margin: .4rem 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
   .follow-ups .follow-up-acts, .follow-ups .follow-up-act { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; }
   .follow-ups .follow-up-act { margin: 0; }

package/dist/contracts/cli.d.ts

@@ -513,6 +513,49 @@ export declare const COMMAND_OUTPUTS: {
         reason: z.ZodString;
         message: z.ZodOptional<z.ZodString>;
     }, z.core.$loose>], "ok">;
+    readonly "task ship": z.ZodDiscriminatedUnion<[z.ZodObject<{
+        envelopeVersion: z.ZodLiteral<1>;
+        ok: z.ZodLiteral<true>;
+        command: z.ZodLiteral<"task ship">;
+        task: z.ZodString;
+        pullRequest: z.ZodNumber;
+        githubRepo: z.ZodString;
+        head: z.ZodString;
+        observedAt: z.ZodString;
+        status: z.ZodEnum<{
+            failing: "failing";
+            none: "none";
+            passing: "passing";
+            running: "running";
+        }>;
+        checks: z.ZodArray<z.ZodObject<{
+            name: z.ZodString;
+            workflow: z.ZodNullable<z.ZodString>;
+            state: z.ZodEnum<{
+                cancelled: "cancelled";
+                failed: "failed";
+                neutral: "neutral";
+                passed: "passed";
+                queued: "queued";
+                running: "running";
+                skipped: "skipped";
+            }>;
+            startedAt: z.ZodNullable<z.ZodString>;
+            completedAt: z.ZodNullable<z.ZodString>;
+            url: z.ZodNullable<z.ZodString>;
+            kind: z.ZodEnum<{
+                run: "run";
+                status: "status";
+            }>;
+            seconds: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$loose>>;
+    }, z.core.$loose>, z.ZodObject<{
+        envelopeVersion: z.ZodLiteral<1>;
+        ok: z.ZodLiteral<false>;
+        command: z.ZodLiteral<"task ship">;
+        reason: z.ZodString;
+        message: z.ZodOptional<z.ZodString>;
+    }, z.core.$loose>], "ok">;
     readonly "task hold": z.ZodDiscriminatedUnion<[z.ZodObject<{
         envelopeVersion: z.ZodLiteral<1>;
         ok: z.ZodLiteral<true>;

package/dist/contracts/cli.js

@@ -176,6 +176,10 @@ export const COMMAND_OUTPUTS = {
     ]),
     "task list": taskListOutput,
     "task show": taskShowOutput,
+    // The task's pull request checks (store.ts ci_check, v146): each with its state and seconds (null: not started).
+    // `status` is the observation's own answer (the one merges read); the rows are each check's timing.
+    "task ship": answers("task ship", { task: str, pullRequest: int, githubRepo: str, head: str, observedAt: str, status: z.enum(["passing", "failing", "running", "none"]),
+        checks: rows({ name: str, workflow: nullable(str), state: z.enum(["queued", "running", "passed", "failed", "skipped", "cancelled", "neutral"]), startedAt: nullable(str), completedAt: nullable(str), url: nullable(str), kind: z.enum(["run", "status"]), seconds: nullable(int) }) }),
     "task hold": answers("task hold", { id: str, reason: str, until: nullable(str) }),
     "task unhold": answers("task unhold", { id: str }),
     "task wait": answers("task wait", { task: str, outcome: str }),

package/dist/contracts/console-api.d.ts

@@ -79,7 +79,7 @@ export declare const CONSOLE_FORMS: {
     readonly kit: FormContract<"password" | "repo">;
     readonly subagents: FormContract<"choice" | "dailyTurns" | "id" | "manager" | "model" | "name" | "note" | "op" | "password" | "repo" | "schedule" | "soul" | "state" | "template" | "text" | "tool" | `field.${string}` | `over.${string}` | `undo.${string}` | `use.${string}`>;
     readonly galleryUse: FormContract<string>;
-    readonly flows: FormContract<"about" | "address" | "answers" | "approve" | "body" | "budget" | "choice" | "confirm" | "days" | "decision" | "definition" | "description" | "digest" | "document" | "draft" | "entry" | "file" | "include" | "key" | "label" | "language" | "name" | "note" | "owner" | "password" | "previewed" | "project" | "remove" | "repo" | "revision" | "runs" | "schedules" | "secret" | "sender" | "stage" | "team" | "template" | "timeoutMinutes" | "title" | "trigger" | "url" | "value" | "watching" | `param.${string}`>;
+    readonly flows: FormContract<"about" | "address" | "answers" | "approve" | "body" | "budget" | "choice" | "confirm" | "days" | "decision" | "definition" | "description" | "digest" | "document" | "draft" | "entry" | "file" | "include" | "key" | "label" | "language" | "name" | "note" | "owner" | "password" | "previewed" | "project" | "remove" | "repo" | "revision" | "runs" | "schedules" | "secret" | "sender" | "stage" | "team" | "template" | "timeoutMinutes" | "title" | "trigger" | "url" | "value" | "version" | "watching" | `param.${string}`>;
     readonly spendBudget: FormContract<"action" | "password" | "stop" | "target" | "usd">;
     readonly projectConcurrency: FormContract<"concurrency" | "repo">;
     readonly projectLiveView: FormContract<"act" | "nonce" | "password" | "repo">;

package/dist/contracts/console-api.js

@@ -88,7 +88,7 @@ export const CONSOLE_FORMS = {
     kit: formContract("POST /kits/<kit>/<act>", ["repo", "password"]),
     subagents: formContract("POST /settings/lead/subagents/new, /settings/lead/subagents/<id>/<part>, /settings/lead/subagents/questions/<id>/answer", ["choice", "text", "repo", "template", "name", "soul", "op", "id", "schedule", "tool", "state", "note", "model", "dailyTurns", "manager", "password"], { prefixes: ["use.", "undo.", "field.", "over."] }),
     galleryUse: formContract("POST /flows/new/<template>", ["repo", "send-result", "name", "intent", "previewed", "password"], { dynamic: true }),
-    flows: formContract("POST /flows/new, /flows/example, /flows/import, /flows/<id>/<act>, /flows/<id>/cards/<card>/<act>, /flows/<id>/triggers/<trigger>/<act>", ["repo", "document", "url", "confirm", "previewed", "template", "name", "answers", "password", "secret", "sender", "project", "team", "trigger", "approve", "remove", "about", "body", "timeoutMinutes", "language", "file", "address", "key", "definition", "owner", "revision", "value", "title", "description", "stage", "decision", "note", "draft", "choice", "entry", "label", "watching", "days", "budget", "runs", "include", "schedules", "digest"], { prefixes: ["param."] }),
+    flows: formContract("POST /flows/new, /flows/example, /flows/import, /flows/<id>/<act>, /flows/<id>/cards/<card>/<act>, /flows/<id>/triggers/<trigger>/<act>", ["repo", "document", "url", "confirm", "previewed", "template", "name", "answers", "password", "secret", "sender", "project", "team", "trigger", "approve", "remove", "about", "body", "timeoutMinutes", "language", "file", "address", "key", "definition", "owner", "revision", "value", "title", "description", "stage", "decision", "note", "draft", "choice", "entry", "label", "watching", "days", "budget", "runs", "include", "schedules", "digest", "version"], { prefixes: ["param."] }),
     spendBudget: formContract("POST /spend/budget", ["password", "target", "action", "usd", "stop"]),
     projectConcurrency: formContract("POST /settings/project/concurrency", ["repo", "concurrency"]),
     projectLiveView: formContract("POST /settings/project/live-view", ["repo", "act", "password", "nonce"]),

package/dist/credentials-ui.d.ts

@@ -5,7 +5,9 @@
  */
 import type { ApiTokenRow, WebSessionRow } from "./store.js";
 import { type Html } from "./html.js";
-export declare const CREDENTIALS_CSS: string;
+/** The old card look; the page is built from the kit now (src/server/kit.ts), so nothing is left to style. Kept for
+ * chrome.ts, which still concatenates it. */
+export declare const CREDENTIALS_CSS = "";
 /** "Chrome on macOS", from a user agent, for a person to recognise a session. */
 export declare function deviceWords(agent: string | null): string;
 export type CredentialsView = {
@@ -23,9 +25,9 @@ export type CredentialsView = {
         section: Html;
     };
 };
-export declare function credentialsHtml(view: CredentialsView, notice: {
+export declare function credentialsHtml(view: CredentialsView, outcome: {
     said?: string | null;
     problem?: string | null;
 }): Html;
-/** The token, once: a focused page with no script. */
+/** The token, once, on a page with no script: selectable text, what it may do, and where to revoke it. */
 export declare function tokenShownHtml(name: string, token: string, access: "read" | "act", expiresAt: string): Html;

package/dist/credentials-ui.js

@@ -1,12 +1,12 @@
 import { daysLeft, expiryNoticeDue, TOKEN_DAYS, tokenLive } from "./api-tokens.js";
 import { projectName } from "./project.js";
-import { html, postForm } from "./html.js";
-export const CREDENTIALS_CSS = `.credentials{max-width:820px;min-width:0}.credentials .card{padding:14px 16px;margin:12px 0}.credentials h2{font-size:1.05rem;margin:0 0 8px}` +
-    `.credentials .rows{display:grid;gap:0;border:1px solid var(--so-line);border-radius:10px;overflow:hidden}.credentials .row-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--so-line)}` +
-    `.credentials .row-item:last-child{border-bottom:0}.credentials .row-item p{margin:0}.credentials .row-item .meta{font-size:.85rem}.credentials form{margin:0}.credentials button{min-height:40px;white-space:nowrap}` +
-    `.credentials .create{display:grid;gap:10px}.credentials .create label{display:grid;gap:6px}.credentials .create input,.credentials .create select{box-sizing:border-box;width:100%}.credentials .badge-here{font-size:.75rem;padding:1px 6px;border-radius:999px;background:var(--so-success-soft);color:var(--so-success);margin-left:6px}` +
-    `.credentials .row-item>div{min-width:0}.credentials .row-item p{overflow-wrap:anywhere}.credentials .soon{color:var(--so-warning,#9a6700);font-weight:600}` +
-    `@media(max-width:600px){.credentials .row-item{flex-wrap:wrap}.credentials .create input,.credentials .create select{font-size:16px}}`;
+import { html, joinHtml, postForm } from "./html.js";
+import { acts, btn, chip, disclose, formRow, infoLine, input, note, notice, select, settingsRecord, settingsSection } from "./server/kit.js";
+import { kitSectionForm } from "./settings-kit.js";
+import { settingsSubPage } from "./settings-groups-ui.js";
+/** The old card look; the page is built from the kit now (src/server/kit.ts), so nothing is left to style. Kept for
+ * chrome.ts, which still concatenates it. */
+export const CREDENTIALS_CSS = "";
 /** "Chrome on macOS", from a user agent, for a person to recognise a session. */
 export function deviceWords(agent) {
     if (agent === null || agent === "")
@@ -22,38 +22,65 @@ const when = (value, now) => {
     const minutes = Math.round((now - at) / 60_000);
     return minutes < 1 ? "just now" : minutes < 60 ? `${minutes} min ago` : minutes < 60 * 24 ? `${Math.round(minutes / 60)} h ago` : new Date(at).toISOString().slice(0, 10);
 };
-export function credentialsHtml(view, notice) {
-    const post = (fields, label, style = "secondary") => postForm("/settings/sessions", html `<button class="${style}">${label}</button>`, { hidden: { ...fields, ...(view.everyone ? { everyone: "1" } : {}) } });
-    const note = notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : notice.said ? html `<p role="status">${notice.said}</p>` : "";
-    const toggle = view.canSeeEveryone ? html `<p class="meta"><a href="/settings/sessions${view.everyone ? "" : "?everyone=1"}">${view.everyone ? "Show only mine" : "Show everyone's"}</a></p>` : "";
-    const sessions = view.sessions.length === 0 ? html `<p class="meta">No one else is signed in.</p>` : html `<div class="rows">${view.sessions.map(one => html `<div class="row-item" data-session="${one.idHash.slice(0, 12)}"><div><p>${view.everyone ? html `<strong>${one.account}</strong> · ` : ""}${deviceWords(one.agent)}${one.here ? html `<span class="badge-here">This browser</span>` : ""}</p>\
-<p class="meta">${one.ssoAt === null ? "Password" : "Identity provider"} · ${one.address ?? "unknown address"} · active ${when(one.lastSeen, view.now)} · signed in ${when(one.createdAt, view.now)}</p></div>\
-${one.here ? "" : post({ action: "end-session", session: one.idHash }, "Sign out")}</div>`)}</div>`;
+export function credentialsHtml(view, outcome) {
+    // An act on this page (sign out, revoke): one button, nothing to prove (the proof row covers only making a token).
+    const act = (fields, label, variant = "outline") => postForm("/settings/sessions", btn(label, { sm: true, type: "submit", variant }), { hidden: { ...fields, ...(view.everyone ? { everyone: "1" } : {}) } });
+    const answer = outcome.problem ? notice(outcome.problem) : outcome.said ? infoLine(outcome.said) : "";
+    const toggle = view.canSeeEveryone ? btn(view.everyone ? "Show only mine" : "Show everyone’s", { sm: true, variant: "ghost", href: `/settings/sessions${view.everyone ? "" : "?everyone=1"}` }) : undefined;
     const others = view.sessions.filter(one => !one.here && one.account === view.who).length;
-    const endOthers = others > 0 && !view.everyone ? post({ action: "end-others" }, `Sign out everywhere else (${others})`) : "";
+    const endOthers = others > 0 && !view.everyone ? acts(act({ action: "end-others" }, `Sign out everywhere else (${others})`)) : "";
+    const sessions = settingsSection({ id: "signed-in", title: "Signed in", ...(toggle ? { right: toggle } : {}),
+        body: joinHtml([
+            view.sessions.length === 0 ? note("No one else is signed in.") : joinHtml(view.sessions.map(one => settingsRecord({
+                title: html `${view.everyone ? html `<b>${one.account}</b> · ` : ""}${deviceWords(one.agent)}${one.here ? html ` ${chip("This browser", "")}` : ""}`,
+                sub: `${one.ssoAt === null ? "Password" : "Identity provider"} · ${one.address ?? "unknown address"} · signed in ${when(one.createdAt, view.now)}`,
+                when: `Active ${when(one.lastSeen, view.now)}`,
+                action: one.here ? "" : act({ action: "end-session", session: one.idHash }, "Sign out"),
+                attrs: { "data-session": one.idHash.slice(0, 12) },
+            }))),
+            endOthers,
+        ]) });
     const live = view.tokens.filter(one => tokenLive(one, view.now));
-    // v111: its projects, and one state: when it stops (soon, said once and marked) or, once replaced, when it ends.
+    // v111: its projects, and one state: when it stops (soon, said once) or, once replaced, when it ends.
     const ends = (one) => {
         if (one.replacedBy !== null && one.overlapUntil !== null)
-            return html `<span class="soon">Replaced · stops ${one.overlapUntil.slice(11, 16)} UTC</span>`;
+            return `Replaced · stops ${one.overlapUntil.slice(11, 16)} UTC`;
         if (expiryNoticeDue(one, view.now) === null)
-            return html `Expires ${one.expiresAt.slice(0, 10)}`;
+            return `Expires ${one.expiresAt.slice(0, 10)}`;
         const days = daysLeft(one.expiresAt, view.now);
-        return html `<span class="soon">Expires ${days <= 1 ? "within a day" : `in ${days} days`}</span>`;
+        return `Expires ${days <= 1 ? "within a day" : `in ${days} days`}`;
     };
     const scope = (one) => one.projects === null ? "All projects" : one.projects.length === 0 ? "No projects" : one.projects.map(repo => projectName(repo)).join(", ");
-    const tokens = live.length === 0 ? html `<p class="meta">No API tokens.</p>` : html `<div class="rows">${live.map(one => html `<div class="row-item" data-token="${one.id}"><div><p>${view.everyone ? html `<strong>${one.account}</strong> · ` : ""}${one.name} · ${one.access === "act" ? "Can act" : "Read only"}</p>\
-<p class="meta">${scope(one)} · ${ends(one)} · last used ${when(one.lastUsedAt, view.now)}${view.limits === undefined ? "" : ` · ${view.limits.note(one)}`}</p></div>${post({ action: "revoke-token", token: one.id }, "Revoke")}</div>`)}</div>`;
-    const create = html `<details class="card"><summary>New API token</summary>${postForm("/settings/sessions", html `\
-<label>Name<input type="text" name="name" maxlength="60" required placeholder="for example: CI"></label>\
-<label>It can<select name="access"><option value="read">Read (tasks, results, the ledger)</option><option value="act">Act as you (file and manage work; never approve)</option></select></label>\
-<label>Expires in<select name="days">${TOKEN_DAYS.map(days => html `<option value="${days}"${days === 90 ? " selected" : ""}>${days} days</option>`)}</select></label>\
-<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label><button>Make the token</button>`, { attrs: { class: "create" }, hidden: { action: "create-token" } })}</details>`;
-    return html `<section class="credentials">${note}${toggle}<h2>Signed in</h2>${sessions}${endOthers}<h2 style="margin-top:1.5rem">API tokens</h2>\
-<p class="meta">For scripts and CI: send <code>Authorization: Bearer &lt;token&gt;</code>. A token can't approve anything.</p>${tokens}${view.everyone ? "" : create}${view.limits?.section ?? ""}</section>`;
+    const create = disclose("New API token", kitSectionForm({ proof: "sessions-token", action: "/settings/sessions", id: "token-form", native: true, hidden: { action: "create-token" },
+        save: { label: "Make the token" }, confirm: "Make an API token",
+        body: joinHtml([
+            formRow("Name", "So you can tell it apart later.", input({ id: "token-name", name: "name", attrs: { maxlength: 60, required: true, placeholder: "for example: CI", autocomplete: "off" } })),
+            formRow("It can", null, select({ id: "token-access", name: "access", label: "It can", current: "read",
+                items: [["read", "Read (tasks, results, the ledger)"], ["act", "Act as you (file and manage work; never approve)"]] })),
+            formRow("Expires in", null, select({ id: "token-days", name: "days", label: "Expires in", current: "90", items: TOKEN_DAYS.map(days => [String(days), `${days} days`]) })),
+            note("Making a token is a new way in, so it always asks for your password. The token is shown once, on the next page."),
+        ]) }), live.length === 0);
+    const tokens = settingsSection({ id: "api-tokens", title: "API tokens",
+        lead: html `For scripts and CI: send <code class="k-mono">Authorization: Bearer &lt;token&gt;</code>. A token can’t approve anything.`,
+        body: joinHtml([
+            live.length === 0 ? note("No API tokens.") : joinHtml(live.map(one => settingsRecord({
+                title: html `${view.everyone ? html `<b>${one.account}</b> · ` : ""}${one.name}`,
+                sub: `${one.access === "act" ? "Can act" : "Read only"} · ${scope(one)} · ${ends(one)}${view.limits === undefined ? "" : ` · ${view.limits.note(one)}`}`,
+                when: `Last used ${when(one.lastUsedAt, view.now)}`,
+                action: act({ action: "revoke-token", token: one.id }, "Revoke", "danger"),
+                attrs: { "data-token": one.id },
+            }))),
+            view.everyone ? "" : create,
+        ]) });
+    return joinHtml([answer, sessions, tokens, view.limits?.section ?? ""]);
 }
-/** The token, once: a focused page with no script. */
+/** The token, once, on a page with no script: selectable text, what it may do, and where to revoke it. */
 export function tokenShownHtml(name, token, access, expiresAt) {
-    return html `<h1>${name}</h1><div class="card"><p>Your API token, shown once. Only a hash is kept, so copy it now.</p><p class="mono secret-value">${token}</p>\
-<p class="meta">${access === "act" ? "It acts as you (never approves)" : "It reads"} until ${expiresAt.slice(0, 10)}. Revoke it any time on Sessions &amp; tokens.</p></div><p class="meta"><a href="/settings/sessions">Back to Sessions &amp; tokens</a></p>`;
+    return settingsSubPage("access", "API token", settingsSection({ id: "token-shown", title: `${name} · shown once, so copy it now`,
+        lead: "Only a hash is kept, so this page is the only time you’ll see it.",
+        body: joinHtml([
+            html `<p class="k-secret-val">${token}</p>`,
+            note(`${access === "act" ? "It acts as you and never approves" : "It reads"} until ${expiresAt.slice(0, 10)}. Revoke it any time on Sessions and tokens.`),
+            acts(btn("Back to Sessions and tokens", { sm: true, href: "/settings/sessions" })),
+        ]) }));
 }