toolroll 0.9.85 → 0.9.87

package/dist/ledger-view.js

@@ -1,57 +1,60 @@
 import { projectName } from "./project.js";
 import { exactWhenHtml } from "./when-html.js";
-import { html, postForm, styleElement } from "./html.js";
+import { html, postForm } from "./html.js";
+import { acts, btn, disclose, empty, infoLine, note, notice, pageHeader, select } from "./server/kit.js";
 /** The ledger's kinds of event, as the filter names them. */
 const EVENT_KINDS = [["work", "Work"], ["request", "Requests"], ["access", "Access"], ["sign-in", "Sign-ins"], ["policy", "Policy changes"]];
 function chainHtml(chain) {
     const status = chain.ok
-        ? html `<p class="ledger-chain ok" data-ledger-chain="ok"><strong>Chain verified</strong> · ${chain.entries} entries through #${chain.through ?? 0} · head <code>${chain.head.slice(0, 16)}…</code>${chain.checkedAt === null ? "" : ` · checked in full ${chain.checkedAt.slice(11, 16)} UTC`}</p>`
-        : html `<p class="ledger-chain problem" role="alert" data-ledger-chain="broken"><strong>Chain broken</strong> · ${chain.problem?.what ?? "the chain doesn't verify"}</p>`;
-    const latest = chain.latest === null ? "" : html `<p class="meta ledger-checkpoint">Latest checkpoint (${chain.latest.at.slice(0, 16).replace("T", " ")} UTC), copy it somewhere outside this machine: <code class="ledger-checkpoint-value">${chain.latest.through}:${chain.latest.hash}</code></p>`;
-    const make = chain.csrf === null ? "" : postForm("/ledger/checkpoint", html `<button type="submit">Make a checkpoint</button>`, { attrs: { class: "ledger-checkpoint-form" } });
+        ? infoLine(html `<span data-ledger-chain="ok">Chain verified · ${chain.entries} entries through #${chain.through ?? 0} · head <span class="k-mono">${chain.head.slice(0, 16)}…</span>${chain.checkedAt === null ? "" : ` · checked in full ${chain.checkedAt.slice(11, 16)} UTC`}</span>`)
+        : notice(html `<span data-ledger-chain="broken">Chain broken: ${chain.problem?.what ?? "the chain doesn't verify"}</span>`);
+    const latest = chain.latest === null ? "" : note(html `Latest checkpoint (${chain.latest.at.slice(0, 16).replace("T", " ")} UTC). Copy it somewhere outside this machine: <span class="k-mono h-select">${chain.latest.through}:${chain.latest.hash}</span>`);
+    const make = chain.csrf === null ? "" : postForm("/ledger/checkpoint", btn("Make a checkpoint", { sm: true, type: "submit", attrs: { "data-k-busy": "Making…" } }), { attrs: { class: "h-inline" } });
     const start = new Date(Date.parse(`${chain.today}T00:00:00Z`) - 29 * 86_400_000).toISOString().slice(0, 10);
-    const exportForm = html `<details class="ledger-filter-panel"><summary>Audit export</summary><form method="get" action="/ledger/export" class="ledger-filters ledger-export" aria-label="Audit export"><label>From<input type="date" name="from" value="${start}" required></label><label>To<input type="date" name="to" value="${chain.today}" required></label><button type="submit">Download</button></form><p class="meta">Every entry in the range with its seal, and an evidence pack for each task it names. JSON.</p></details>`;
-    return html `<section class="ledger-chain-panel" aria-label="Ledger integrity">${status}${latest}${make}${exportForm}</section>`;
+    const exportForm = disclose("Audit export", html `<form method="get" action="/ledger/export" class="h-filters h-export" aria-label="Audit export">\
+<div class="k-field"><label class="k-label" for="ledger-from">From</label><input class="k-input" id="ledger-from" type="date" name="from" value="${start}" required></div>\
+<div class="k-field"><label class="k-label" for="ledger-to">To</label><input class="k-input" id="ledger-to" type="date" name="to" value="${chain.today}" required></div>\
+<div class="k-acts">${btn("Download", { sm: true, type: "submit" })}</div></form>${note("Every entry in the range with its seal, and a full record for each task it names. JSON.")}`);
+    return html `<section class="h-chain" aria-label="Audit log integrity">${status}${latest}${make}${exportForm}</section>`;
 }
-const LEDGER_CSS = `
-.ledger-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.ledger-heading h1{margin:0}.ledger-caption{margin:8px 0 12px}
-.ledger-filter-panel{margin-bottom:12px}.ledger-filter-panel summary{font-size:13px;padding:6px 0;cursor:pointer}.ledger-filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto auto;gap:8px;align-items:end;margin:0 0 12px}.ledger-filters label{display:grid;gap:3px;min-width:0;font-size:12px}.ledger-filters input,.ledger-filters select{width:100%;min-width:0;box-sizing:border-box;margin:0;padding:6px 8px;font-size:13px}.ledger-filters button{padding:7px 12px}.ledger-filters>a{padding:8px 0;font-size:13px}
-.ledger-detail{display:block;color:var(--muted-foreground);font-size:12px}.ledger-list{border:1px solid var(--border);border-radius:8px;overflow:hidden}.ledger-event{display:grid;grid-template-columns:140px minmax(90px,1fr) minmax(160px,2fr) minmax(100px,1fr) minmax(100px,1fr);gap:8px;align-items:baseline;padding:7px 10px;border-bottom:1px solid var(--border);font-size:13px;line-height:1.4;overflow-wrap:anywhere}.ledger-event:last-child{border-bottom:0}.ledger-event .actor{color:inherit;font-weight:600;text-decoration:none}.ledger-time,.ledger-place,.ledger-result small{font-size:11px;color:var(--muted-foreground)}.ledger-time time{font-variant-numeric:tabular-nums}.ledger-place a{display:block}.ledger-result small{display:block}.ledger-labels{font-size:11px;color:var(--muted-foreground);font-weight:600}.ledger-empty{padding:12px}
-@media(max-width:1000px){.ledger-filters{grid-template-columns:repeat(3,minmax(0,1fr)) auto}.ledger-event{grid-template-columns:122px minmax(80px,1fr) minmax(130px,2fr) minmax(85px,1fr)}.ledger-place{grid-column:2/4}.ledger-result{grid-column:4;grid-row:1/3}.ledger-labels{display:none}}
-@media(max-width:600px){.ledger-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.ledger-event{grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:8px 10px}.ledger-actor{grid-column:1;grid-row:1}.ledger-action{grid-column:1;grid-row:2}.ledger-result{grid-column:2;grid-row:1/3;text-align:right}.ledger-time{grid-column:1;grid-row:3}.ledger-place{grid-column:2;grid-row:3;text-align:right}.ledger-place a{display:inline}.ledger-heading>a{font-size:13px}}
-.ledger-chain-panel{margin:0 0 12px}.ledger-chain{margin:0 0 4px;font-size:13px}.ledger-chain.ok strong{color:var(--success)}.ledger-checkpoint code{overflow-wrap:anywhere;user-select:all}.ledger-checkpoint-form{margin:6px 0 0}.ledger-export{grid-template-columns:repeat(2,minmax(0,180px)) auto;margin-bottom:4px}
-`;
+/** The audit log (`/ledger`): what people and tokens did, newest first, as quiet timed rows, with the filters, the CSV
+ * and the sealed export. A kit list page: the top bar, then rows between hairlines. */
 export function ledgerBody(rows, projects, params, chain) {
-    const selected = (key, value) => params.get(key) === value ? html ` selected` : "";
     const more = rows.length > 50;
     const shown = rows.slice(0, 50);
-    const fresh = new URLSearchParams();
+    const kept = new URLSearchParams();
     for (const key of ["project", "actor", "source", "outcome", "task"]) {
         const value = params.get(key);
         if (value)
-            fresh.set(key, value);
+            kept.set(key, value);
     }
-    const next = new URLSearchParams(fresh);
+    const next = new URLSearchParams(kept);
     if (shown.length)
         next.set("before", String(shown.at(-1).id));
-    const csv = new URLSearchParams(fresh);
+    const csv = new URLSearchParams(kept);
     csv.set("format", "csv");
-    return html `${styleElement(LEDGER_CSS)}<div class="ledger-heading"><h1>Action ledger</h1><a href="/ledger?${csv.toString()}" download>Export CSV</a></div>${chain === undefined ? "" : chainHtml(chain)}
-<p class="meta ledger-caption">${shown.length} actions on this page · CSV includes all matching actions · Times in UTC</p>
-<details class="ledger-filter-panel"><summary>Filters · ${fresh.size === 0 ? "all actions" : `${fresh.size} active`}</summary>
-<form method="get" action="/ledger" class="ledger-filters" aria-label="Filter action ledger">
-<label>Project<select name="project"><option value="">All accessible projects</option>${projects.map(repo => html `<option value="${repo}"${selected("project", repo)}>${projectName(repo)}</option>`)}</select></label>
-<label>Person or worker<input type="text" name="actor" value="${params.get("actor") ?? ""}" placeholder="Any actor"></label>
-<label>Events<select name="source"><option value="">All events</option>${EVENT_KINDS.map(([value, label]) => html `<option value="${value}"${selected("source", value)}>${label}</option>`)}</select></label>
-<label>Outcome<input type="text" name="outcome" value="${params.get("outcome") ?? ""}" placeholder="Any outcome"></label>
-<label>Task<input type="text" name="task" value="${params.get("task") ?? ""}" placeholder="Any task"></label>
-<button type="submit">Filter</button><a href="/ledger">Clear</a></form></details>
-<div class="ledger-list" aria-label="Action history"><div class="ledger-event ledger-labels" aria-hidden="true"><span>Time</span><span>Actor</span><span>Action</span><span>Project / work</span><span>Outcome / event</span></div>${shown.length === 0 ? html `<p class="ledger-empty">No actions match these filters yet.</p>` : shown.map(row => {
-        const subject = row.runId !== null ? html `<a href="/r/${row.runId}">Run #${row.runId}</a>` : row.taskId !== null ? html `<a href="/t/${encodeURIComponent(row.taskId)}">${row.taskId}</a>` : "";
-        const byActor = new URLSearchParams(fresh);
-        byActor.set("actor", row.actor);
-        return html `<article class="ledger-event" data-ledger-id="${row.id}"><div class="ledger-time">${exactWhenHtml(row.at)}</div><div class="ledger-actor"><a class="actor" href="/ledger?${byActor.toString()}" title="Filter by this actor">${row.actor}</a></div><div class="ledger-action">${row.action}${row.detail === null ? "" : html `<small class="ledger-detail">${row.detail}</small>`}</div><div class="ledger-place">${row.repo === null ? "Instance" : projectName(row.repo)} ${subject}</div><div class="ledger-result">${row.outcome}<small>${row.source}</small></div></article>`;
-    })}</div>
-<p class="row"><a href="/ledger?${fresh.toString()}">Newest actions</a>${more ? html `<a rel="next" href="/ledger?${next.toString()}">Older actions</a>` : ""}</p>
-<p class="meta">Accepted requests record acceptance; worker events record results. History starts from this upgrade. Review evidence is on each task or run.</p>`;
+    const text = (id, label, name, placeholder) => html `<div class="k-field"><label class="k-label" for="${id}">${label}</label><input class="k-input" id="${id}" type="text" name="${name}" value="${params.get(name) ?? ""}" placeholder="${placeholder}"></div>`;
+    const filters = disclose(`Filters · ${kept.size === 0 ? "all actions" : `${kept.size} active`}`, html `<form method="get" action="/ledger" class="h-filters" aria-label="Filter the audit log">\
+<div class="k-field"><label class="k-label" for="ledger-project">Project</label>${select({ id: "ledger-project", name: "project", wide: true, current: params.get("project") ?? "", items: [["", "All your projects"], ...projects.map(repo => [repo, projectName(repo)])] })}</div>\
+${text("ledger-actor", "Person or worker", "actor", "Anyone")}\
+<div class="k-field"><label class="k-label" for="ledger-source">Events</label>${select({ id: "ledger-source", name: "source", wide: true, current: params.get("source") ?? "", items: [["", "All events"], ...EVENT_KINDS] })}</div>\
+${text("ledger-outcome", "Outcome", "outcome", "Any outcome")}${text("ledger-task", "Task", "task", "Any task")}\
+<div class="k-acts">${btn("Filter", { sm: true, type: "submit" })}${btn("Clear", { sm: true, variant: "ghost", href: "/ledger" })}</div></form>`, kept.size > 0);
+    const list = shown.length === 0
+        ? empty({ title: kept.size === 0 ? "Nothing yet." : "No actions match these filters.", text: kept.size === 0 ? "Approvals, invites, tokens and sign-ins appear here." : "Clear the filters to see every action." })
+        : html `<div class="h-audit-list" aria-label="Action history">${shown.map(row => {
+            const subject = row.runId !== null ? html `<a class="k-link" href="/r/${row.runId}">Run #${row.runId}</a>` : row.taskId !== null ? html `<a class="k-link k-mono" href="/t/${encodeURIComponent(row.taskId)}">${row.taskId}</a>` : "";
+            const byActor = new URLSearchParams(kept);
+            byActor.set("actor", row.actor);
+            return html `<article class="h-audit" data-ledger-id="${row.id}"><span class="h-audit-time k-num">${exactWhenHtml(row.at)}</span>\
+<span class="h-audit-what"><a class="h-actor" href="/ledger?${byActor.toString()}" title="Only this actor's actions">${row.actor}</a> ${row.action}${row.detail === null ? "" : html `<span class="h-audit-detail">${row.detail}</span>`}</span>\
+<span class="h-audit-place">${row.repo === null ? "Instance" : projectName(row.repo)} ${subject}</span><span class="h-audit-out">${row.outcome} · ${row.source}</span></article>`;
+        })}</div>`;
+    const paging = kept.has("before") || params.has("before") || more
+        ? acts(params.has("before") ? btn("Newest actions", { sm: true, variant: "ghost", href: `/ledger?${kept.toString()}` }) : "", more ? btn("Older actions", { sm: true, variant: "ghost", href: `/ledger?${next.toString()}`, attrs: { rel: "next" } }) : "")
+        : "";
+    return html `<div class="h-page h-ledger" data-kit-page>${pageHeader("Audit log", {
+        ctx: "What people and tokens did, newest first. Times in UTC.",
+        right: btn("Export CSV", { sm: true, variant: "ghost", href: `/ledger?${csv.toString()}`, attrs: { download: true } }),
+    })}<div class="h-tools-row">${chain === undefined ? "" : chainHtml(chain)}${filters}</div>${list}<div class="h-foot-row">${paging}${note("Accepted requests record acceptance; worker events record results. History starts from the upgrade that added it. Review evidence is on each task or run. The CSV holds every matching action.")}</div></div>`;
 }

package/dist/models-ui.d.ts

@@ -1,8 +1,11 @@
-/** Settings → Models: the CLIs on this computer, the default agent for each
- * role picked from live lists, and the models that just arrived. */
+/** Settings → Models, in the kit's Settings frame (a sub-page of "Agents and models"): what is in use and the one
+ * choice (a preset, previewed before it applies), then the model for each role behind a disclosure, the CLIs on
+ * this computer and the models that just arrived. Saving is an instance operator's step-up. */
 import { type Html } from "./html.js";
+import { type ApprovalFacts } from "./design/kit.js";
 import type { ModelOption, RuntimeState, SeenModel, WatchState } from "./model-catalog.js";
-export declare const MODELS_CSS = ".models{max-width:780px;min-width:0;overflow-wrap:anywhere}.models .card{padding:16px 20px;margin:12px 0;min-width:0}.models h2{margin:24px 0 8px}.models form{margin:0}.models label{display:grid;gap:6px}.models select,.models input[type=search]{box-sizing:border-box;width:100%;max-width:100%;min-width:0}.models button,.models summary,.models .button-link{min-height:44px}.models button{white-space:nowrap}.models summary{padding:12px 0;cursor:pointer}.models .tool{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.models .role{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.models .role-row{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.models .role-row select{flex:1 1 240px;width:auto;min-width:0}.models .role-name{font-weight:600}.models .new{font-weight:600}.models ul{padding-left:20px}.models .meta{font-size:.86rem}.models .role-read{display:grid;gap:2px;padding:8px 0}.models .editor{display:grid;gap:14px}.models .editor .role select{width:100%}.models .tiers{border-top:1px solid var(--so-line)}.models .tiers .role{margin:0 0 14px}.models .mono{font-family:var(--font-mono,ui-monospace,monospace);font-size:.84rem}.models .preset{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.models .preset p{margin:4px 0 0}.models .preset>div{flex:1 1 280px;min-width:0}.models .button-link{display:inline-flex;align-items:center;padding:0 14px;border:1px solid var(--so-input-line);border-radius:8px;text-decoration:none;color:var(--so-ink);font-weight:600}.models table{width:100%;border-collapse:collapse}.models th,.models td{text-align:left;vertical-align:top;padding:8px 6px;border-bottom:1px solid var(--so-line)}.models .diff th{width:38%;font-weight:600}.models .diff ul{margin:4px 0 0}.models .preview{border-color:var(--so-input-line)}.models .preview form{display:grid;gap:10px;margin-top:12px}.models .preview .cancel{justify-self:start;display:inline-flex;align-items:center;min-height:44px}.models .sizing dt{font-weight:600;margin-top:8px}.models .sizing dd{margin:2px 0 0}.models .editor label:has(input[type=password]){margin-top:4px}@media(max-width:600px){.models .card{padding:14px}.models .diff th,.models .diff td{display:block;width:auto;border:0;padding:4px 0}.models .diff tr{display:block;border-bottom:1px solid var(--so-line);padding:6px 0}.models .recent td{display:block;border:0;padding:2px 0}.models .recent tr{display:block;border-bottom:1px solid var(--so-line);padding:6px 0}.models .recent thead{display:none}}";
+/** The page's own layout on the kit: one-column preset cards, the role pickers in the form rows' control column. */
+export declare const MODELS_CSS: string;
 /** One row of the editor: a role at the scope being edited. */
 export type RoleView = {
     /** The slot's form field (model-choices.ts slotKey). */
@@ -93,6 +96,8 @@ export type ModelsView = {
         taskId: string;
         title: string;
     }[];
+    /** What this request's approval shows (approvalFactsNow): a step-up asks for the password unless Passwordless is on. */
+    facts?: ApprovalFacts;
 };
 export declare function modelsHtml(view: ModelsView): Html;
 /** Filters one long picker as you type; the saved choice always stays listed. */

package/dist/models-ui.js

@@ -1,22 +1,40 @@
-/** Settings → Models: the CLIs on this computer, the default agent for each
- * role picked from live lists, and the models that just arrived. */
-import { html, postForm, reauth } from "./html.js";
+/** Settings → Models, in the kit's Settings frame (a sub-page of "Agents and models"): what is in use and the one
+ * choice (a preset, previewed before it applies), then the model for each role behind a disclosure, the CLIs on
+ * this computer and the models that just arrived. Saving is an instance operator's step-up. */
+import { html, postForm } from "./html.js";
+import { approvalAsk, termsOf } from "./design/kit.js";
+import { acts, btn, chip, disclose, dock, facts as factList, field, formRow, group, input, note, notice, radios, settingsShell } from "./server/kit.js";
 import { priceWords } from "./model-catalog.js";
 import { whenUtc } from "./when-html.js";
 const when = (iso) => iso === null ? "never" : whenUtc(iso);
-export const MODELS_CSS = `.models{max-width:780px;min-width:0;overflow-wrap:anywhere}.models .card{padding:16px 20px;margin:12px 0;min-width:0}.models h2{margin:24px 0 8px}.models form{margin:0}.models label{display:grid;gap:6px}.models select,.models input[type=search]{box-sizing:border-box;width:100%;max-width:100%;min-width:0}.models button,.models summary,.models .button-link{min-height:44px}.models button{white-space:nowrap}.models summary{padding:12px 0;cursor:pointer}.models .tool{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.models .role{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.models .role-row{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.models .role-row select{flex:1 1 240px;width:auto;min-width:0}.models .role-name{font-weight:600}.models .new{font-weight:600}.models ul{padding-left:20px}.models .meta{font-size:.86rem}.models .role-read{display:grid;gap:2px;padding:8px 0}.models .editor{display:grid;gap:14px}.models .editor .role select{width:100%}.models .tiers{border-top:1px solid var(--so-line)}.models .tiers .role{margin:0 0 14px}.models .mono{font-family:var(--font-mono,ui-monospace,monospace);font-size:.84rem}.models .preset{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.models .preset p{margin:4px 0 0}.models .preset>div{flex:1 1 280px;min-width:0}.models .button-link{display:inline-flex;align-items:center;padding:0 14px;border:1px solid var(--so-input-line);border-radius:8px;text-decoration:none;color:var(--so-ink);font-weight:600}.models table{width:100%;border-collapse:collapse}.models th,.models td{text-align:left;vertical-align:top;padding:8px 6px;border-bottom:1px solid var(--so-line)}.models .diff th{width:38%;font-weight:600}.models .diff ul{margin:4px 0 0}.models .preview{border-color:var(--so-input-line)}.models .preview form{display:grid;gap:10px;margin-top:12px}.models .preview .cancel{justify-self:start;display:inline-flex;align-items:center;min-height:44px}.models .sizing dt{font-weight:600;margin-top:8px}.models .sizing dd{margin:2px 0 0}.models .editor label:has(input[type=password]){margin-top:4px}@media(max-width:600px){.models .card{padding:14px}.models .diff th,.models .diff td{display:block;width:auto;border:0;padding:4px 0}.models .diff tr{display:block;border-bottom:1px solid var(--so-line);padding:6px 0}.models .recent td{display:block;border:0;padding:2px 0}.models .recent tr{display:block;border-bottom:1px solid var(--so-line);padding:6px 0}.models .recent thead{display:none}}`;
+/** The page's own layout on the kit: one-column preset cards, the role pickers in the form rows' control column. */
+export const MODELS_CSS = `.models{display:grid;gap:24px;min-width:0;overflow-wrap:anywhere}.models .k-radios{grid-template-columns:minmax(0,1fr);padding-top:12px}` +
+    `.models .k-secthead small{font-weight:400;color:var(--so-muted);font-size:12.5px}.models-presets{display:grid;gap:12px}.models-scope{display:flex;gap:8px;width:100%;max-width:300px;margin:0}.models-scope .k-selw{flex:1;min-width:0}.k-frow-c .models-scope .k-selw{max-width:none}.models-presets .k-acts{padding-top:4px}` +
+    `.models .role{display:grid;gap:6px;width:100%;max-width:300px;min-width:0}.models .role .k-input{max-width:none}.models-editor{display:grid;gap:12px;padding-top:4px}` +
+    `.models-editor > .k-field{max-width:300px}.models .k-grp{padding:16px 0 0}.models .k-disclose[open]>summary{margin-bottom:8px}.models-diff dd .k-mono{overflow-wrap:anywhere}` +
+    `.models-sizing{display:grid;gap:8px;padding-top:4px}.models-sizing p{margin:0;max-width:66ch}` +
+    `@media(max-width:760px){.models .role,.models-scope{max-width:none}.models-editor > .k-field{max-width:none}.models .k-btn.k-btn-primary.k-docked{display:none}}`;
+const sec = (id, title, state, body) => html `<section class="k-sec" aria-labelledby="models-${id}"><div class="k-secthead"><h3 id="models-${id}">${title}${state ? html ` <small>· ${state}</small>` : ""}</h3></div>${body}</section>`;
+const back = (view) => `/settings/models${view.scope.value === "installation" ? "" : `?scope=${encodeURIComponent(view.scope.value)}`}`;
+const scopeQuery = (view) => view.scope.value === "installation" ? "" : `&scope=${encodeURIComponent(view.scope.value)}`;
+const factsOf = (view) => view.facts ?? { passwordless: false, remembered: false };
+/** The step-up's password, only when the rules ask for it (never under Passwordless). Named `password`, as the
+ * model posts read it; the server proves it again in the write. */
+function password(view, id) {
+    return approvalAsk("step-up", factsOf(view)) === "password"
+        ? field({ id, label: "Your password", control: input({ id, name: "password", type: "password", attrs: { autocomplete: "current-password", required: true } }) })
+        : "";
+}
 function toolRow(one, manage) {
-    const state = one.installed === null ? "Version unknown"
-        : one.behind ? html `${one.installed} · <strong>${one.latest} available</strong>`
-            : `${one.installed} · Up to date`;
+    const state = one.installed === null ? "Version unknown" : one.behind ? `${one.installed} · ${one.latest} available` : `${one.installed} · up to date`;
     const action = manage && one.behind && one.updateCommand !== null
-        ? postForm("/settings/models/update", html `<button type="submit">Update ${one.name}</button>`, { hidden: { tool: one.tool } })
-        : one.behind ? html `<span class="meta">Update it the way you installed it</span>` : "";
-    return html `<div class="card tool"><span><strong>${one.name}</strong> ${state}${one.problem === null ? "" : html `<br><span class="meta">${one.problem}</span>`}</span>${action}</div>`;
+        ? postForm("/settings/models/update", btn(`Update ${one.name}`, { sm: true, type: "submit" }), { hidden: { tool: one.tool } })
+        : one.behind ? html `<span class="k-note">Update it the way you installed it</span>` : html ``;
+    return formRow(one.name, one.problem === null ? state : `${state} · ${one.problem}`, action, "inline");
 }
-function roleForm(role, manage) {
+function roleRow(role, manage) {
     if (!manage)
-        return html `<div class="role-read"><span class="role-name">${role.label}</span><span>${role.words}</span></div>`;
+        return formRow(role.label, null, html `<span>${role.words}</span>`);
     const known = role.groups.some(group => group.options.some(option => `${group.provider}|${option.value}` === role.current));
     const saved = !known && role.current !== "" ? html `<option value="${role.current}" selected>${role.words} · current</option>` : "";
     const groups = role.groups.map(group => html `<optgroup label="${group.label}">${group.options.map(option => {
@@ -26,24 +44,23 @@ function roleForm(role, manage) {
     const unset = html `<option value="clear"${role.current === "" ? html ` selected` : ""}>${role.unset}</option>`;
     const count = role.groups.reduce((sum, group) => sum + group.options.length, 0);
     const id = `role-${role.key}`;
-    return html `<div class="role"><label class="role-name" for="${id}">${role.label}</label>${count > 40 ? html `<input type="search" data-model-filter hidden aria-label="Search ${role.label.toLowerCase()} models" placeholder="Search ${count} models" autocomplete="off">` : ""}<select id="${id}" name="${role.key}">${unset}${saved}${groups}</select>${role.current === "" ? html `<span class="meta">${role.words}</span>` : ""}</div>`;
+    const control = html `<span class="role">${count > 40 ? html `<input class="k-input" type="search" data-model-filter hidden aria-label="Search ${role.label.toLowerCase()} models" placeholder="Search ${count} models" autocomplete="off">` : ""}\
+<span class="k-selw wide"><select class="k-sel" id="${id}" name="${role.key}" aria-label="${role.label}">${unset}${saved}${groups}</select></span></span>`;
+    return formRow(role.label, role.current === "" ? role.words : null, control);
 }
 export function modelsHtml(view) {
     const manage = view.canManage && view.csrf !== "";
-    const status = view.said === null ? "" : html `<p role="status">${view.said}</p>`;
-    const problem = view.problem === null ? "" : html `<p class="problem" role="alert">${view.problem}</p>`;
-    const tools = view.runtimes.length === 0
-        ? html `<p class="meta">No Claude, Codex or Gemini CLI found on this computer yet.</p>`
-        : view.runtimes.map(one => toolRow(one, manage));
-    const check = manage
-        ? postForm("/settings/models/check", html `<button type="submit" class="secondary">Check now</button>`, { attrs: { class: "inline" } })
-        : "";
-    const fresh = view.fresh.length === 0 ? "" :
-        html `<h2>New models</h2><ul>${view.fresh.map(model => html `<li><span class="new">${model.name}</span> <span class="meta">${priceWords(model)}${model.releasedAt === null ? "" : ` · released ${model.releasedAt.slice(0, 10)}`}</span></li>`)}</ul>`;
-    const watch = manage
-        ? html `<details><summary>Automatic checks · ${view.watch.enabled ? "On" : "Off"}</summary>${postForm("/settings/models/watch", html `<p>Check every 6 hours and send a message when a new model or CLI update appears. It uses public lists and sends nothing about you or your projects.</p><button type="submit" class="secondary">${view.watch.enabled ? "Turn off" : "Turn on"}</button>`, { hidden: { enabled: view.watch.enabled ? "0" : "1" } })}</details>`
-        : "";
-    return html `<section class="models">${status}${problem}${previewCard(view, manage)}${editorSection(view, manage)}${presetsSection(view, manage)}${sizingSection(view)}${recentSection(view)}<h2>AI tools</h2>${tools}<p class="meta">Checked ${when(view.watch.checkedAt)} ${check}</p>${fresh}${view.chat === null ? "" : html `<h2>Chat</h2><p>${view.chat.words} · <a href="/settings/lead">Change</a></p>`}${watch}</section>`;
+    const outcome = view.problem !== null ? notice(view.problem) : view.said !== null ? html `<p class="k-note" role="status">${view.said}</p>` : "";
+    const preview = previewSection(view, manage);
+    const previewing = manage && view.preview !== null && view.preview.rows.length > 0;
+    const tools = view.runtimes.length === 0 ? note("No Claude, Codex or Gemini CLI found on this computer yet.") : view.runtimes.map(one => toolRow(one, manage));
+    const checks = manage ? html `${formRow("Check for new versions", `Checked ${when(view.watch.checkedAt)}.`, postForm("/settings/models/check", btn("Check now", { sm: true, type: "submit" })), "inline")}\
+${formRow("Automatic checks", `${view.watch.enabled ? "On" : "Off"}. Every 6 hours, with a message when a new model or CLI update appears. Uses public lists and sends nothing about you or your projects.`, postForm("/settings/models/watch", btn(view.watch.enabled ? "Turn off" : "Turn on", { sm: true, type: "submit" }), { hidden: { enabled: view.watch.enabled ? "0" : "1" } }), "inline")}`
+        : note(`Checked ${when(view.watch.checkedAt)}.`);
+    const fresh = view.fresh.length === 0 ? "" : sec("new", "New models", "", view.fresh.map(model => formRow(model.name, `${priceWords(model)}${model.releasedAt === null ? "" : ` · released ${model.releasedAt.slice(0, 10)}`}`, chip("New", "", { dot: false }), "inline")));
+    const chat = view.chat === null ? "" : formRow("Chat", view.chat.words, btn("Change", { sm: true, variant: "ghost", href: "/settings/lead" }), "inline");
+    const body = html `<div class="models">${outcome}${preview}${choiceSection(view, manage, previewing)}${recentSection(view)}${sec("tools", "AI tools on this computer", "", html `${tools}${checks}`)}${fresh}${chat}</div>`;
+    return settingsShell({ group: "agents", sub: true, title: "Models", lead: "Which model plans, builds and reviews each task. Changes apply to tasks filed from now on.", body });
 }
 /** Filters one long picker as you type; the saved choice always stays listed. */
 export function modelsScript() {
@@ -56,47 +73,53 @@ export function modelsScript() {
       select.value=chosen;});
   })})();`;
 }
-const scopeQuery = (view) => view.scope.value === "installation" ? "" : `&scope=${encodeURIComponent(view.scope.value)}`;
-const password = () => reauth(html `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password"></label>`);
-/** The roles at the scope being edited: one form, one save, one password. Sizes and tiers sit behind a disclosure. */
-function editorSection(view, manage) {
-    const scopes = view.scope.options.length < 2 ? "" : html `<form method="get" action="/settings/models" class="models-scope"><label for="models-scope">Settings for</label><div class="role-row"><select id="models-scope" name="scope">${view.scope.options.map(one => html `<option value="${one.value}"${one.value === view.scope.value ? html ` selected` : ""}>${one.label}</option>`)}</select><button type="submit" class="secondary">Show</button></div></form>`;
+/** What is in use and the one choice (a preset, previewed before it applies); the model for each role behind a
+ * disclosure, saved with one step-up; how tasks are sized, on demand. */
+function choiceSection(view, manage, previewing) {
+    const inUse = view.inUse === null ? "a custom set" : view.inUse;
+    const scopes = view.scope.options.length < 2 ? "" : formRow("Settings for", "A project can follow these or choose its own.", html `<form method="get" action="/settings/models" class="models-scope">\
+<span class="k-selw wide"><select class="k-sel" id="models-scope" name="scope" aria-label="Settings for">${view.scope.options.map(one => html `<option value="${one.value}"${one.value === view.scope.value ? html ` selected` : ""}>${one.label}</option>`)}</select></span>${btn("Show", { sm: true, type: "submit" })}</form>`);
+    const unresolved = view.unresolved === null ? "" : notice(`New tasks can't be filed here yet: ${view.unresolved}`);
+    const current = view.preview?.hidden["preset"] ?? view.presets.find(one => one.inUse)?.name ?? "";
+    const presetItems = view.presets.map(one => ({ value: one.name, label: one.label, text: `${one.words}${one.recommended ? " Recommended." : ""}${one.inUse ? " In use." : ""}` }));
+    const presets = manage
+        ? html `<form method="get" action="/settings/models" class="models-presets" id="models-preset">${view.scope.value === "installation" ? "" : html `<input type="hidden" name="scope" value="${view.scope.value}">`}\
+${radios({ name: "preset", legend: "Preset", current, items: presetItems })}${acts(btn("Review changes", { variant: previewing ? "outline" : "primary", type: "submit", docked: !previewing }))}</form>`
+        : factList(view.presets.map(one => [one.label, `${one.words}${one.inUse ? " In use." : ""}`]));
+    const newer = view.newer.length === 0 ? "" : html `${group("Newer models")}${view.newer.map(one => formRow(one.name, `Newer than ${one.from}, used by ${one.roles}.`, manage ? btn("Switch to it", { sm: true, href: `/settings/models?switch=${encodeURIComponent(one.from)}&to=${encodeURIComponent(one.to)}${scopeQuery(view)}` }) : html ``, "inline"))}`;
     const main = view.roles.filter(role => !role.tier), tiers = view.roles.filter(role => role.tier);
-    const inUse = html `<p class="meta">In use: ${view.inUse === null ? "a custom set" : view.inUse}${view.scope.value === "installation" ? "" : html ` · ${view.scope.label}`}</p>`;
-    const unresolved = view.unresolved === null ? "" : html `<p class="problem" role="alert">New tasks can't be filed here yet: ${view.unresolved}</p>`;
-    const rows = html `${main.map(role => roleForm(role, manage))}<details class="tiers"${manage ? "" : html ` open`}><summary>By task size</summary>${tiers.map(role => roleForm(role, manage))}</details>`;
-    const body = manage
-        ? postForm("/settings/models/agent", html `${rows}${password()}<button type="submit">Save</button>`, { attrs: { class: "card editor" }, hidden: { scope: view.scope.value, digest: view.scope.digest } })
-        : html `<div class="card editor">${rows}</div>`;
-    return html `<h2>Models for new tasks</h2>${scopes}${inUse}${unresolved}${body}<p class="meta">Changes apply to tasks filed from now on. Approved and waiting tasks keep the models they were filed with.</p>`;
+    const rows = html `${main.map(role => roleRow(role, manage))}${tiers.length === 0 ? "" : html `${group("By task size")}${tiers.map(role => roleRow(role, manage))}`}`;
+    const editor = manage
+        ? postForm("/settings/models/agent", html `${rows}${note(`Approved and waiting tasks keep the models they were filed with. ${termsOf("step-up", factsOf(view))}`)}${password(view, "models-agent-pw")}${acts(btn("Save models", { type: "submit" }))}`, { attrs: { class: "models-editor" }, hidden: { scope: view.scope.value, digest: view.scope.digest } })
+        : html `<div class="models-editor">${rows}</div>`;
+    const docked = !manage || previewing ? "" : dock(btn("Review changes", { variant: "primary", type: "submit", attrs: { form: "models-preset" } }));
+    return html `${sec("choice", "Models for new tasks", `in use: ${inUse}${view.scope.value === "installation" ? "" : ` · ${view.scope.label}`}`, html `${scopes}${unresolved}${presets}${newer}`)}\
+${disclose("Model for each role", editor)}${sizingSection(view)}${docked}`;
 }
-/** A preset or a switch shows exactly what it changes, and applies only with a second, password-checked submit. */
-function previewCard(view, manage) {
+/** A preset or a switch shows exactly what it changes, and applies only with a second, step-up submit. */
+function previewSection(view, manage) {
     const preview = view.preview;
     if (preview === null || !manage)
-        return html ``;
-    const back = `/settings/models${view.scope.value === "installation" ? "" : `?scope=${encodeURIComponent(view.scope.value)}`}`;
+        return "";
     if (preview.rows.length === 0)
-        return html `<div class="card preview" role="status"><h2>${preview.title}</h2><p>Already in use. Nothing would change.</p><a class="button-link" href="${back}">Back</a></div>`;
-    const rows = preview.rows.map(row => html `<tr><th scope="row">${row.role}</th><td><span class="mono">${row.before}</span> → <span class="mono">${row.after}</span>${row.notes.length === 0 ? "" : html `<ul class="meta">${row.notes.map(note => html `<li>${note}</li>`)}</ul>`}</td></tr>`);
-    return html `<div class="card preview"><h2>${preview.title}</h2><p>Review what changes for tasks filed from now on.</p><table class="diff"><tbody>${rows}</tbody></table>${postForm("/settings/models/apply", html `${password()}<button type="submit" class="primary">Apply ${preview.rows.length} change${preview.rows.length === 1 ? "" : "s"}</button><a class="cancel" href="${back}">Cancel</a>`, { hidden: preview.hidden })}</div>`;
-}
-function presetsSection(view, manage) {
-    const presets = view.presets.map(one => html `<div class="card preset"><div><strong>${one.label}</strong>${one.recommended ? html ` <span class="meta">Default</span>` : ""}<p>${one.words}</p></div>${one.inUse ? html `<span class="meta">In use</span>` : manage ? html `<a class="button-link" href="/settings/models?preset=${one.name}${scopeQuery(view)}">Review changes</a>` : ""}</div>`);
-    const newer = view.newer.length === 0 ? "" : html `<h2>Newer models</h2>${view.newer.map(one => html `<div class="card preset"><div><strong>${one.name}</strong><p>Newer than <span class="mono">${one.from}</span>, used by ${one.roles}.</p></div>${manage ? html `<a class="button-link" href="/settings/models?switch=${encodeURIComponent(one.from)}&to=${encodeURIComponent(one.to)}${scopeQuery(view)}">Switch to it</a>` : ""}</div>`)}`;
-    return html `<h2>Presets</h2>${presets}${newer}`;
+        return sec("preview", preview.title, "", html `<p class="k-note" role="status">Already in use. Nothing would change.</p>${acts(btn("Back", { sm: true, href: back(view) }))}`);
+    const rows = factList(preview.rows.map(row => [row.role, html `<span class="k-mono">${row.before}</span> → <span class="k-mono">${row.after}</span>${row.notes.length === 0 ? "" : html `<br><span class="k-note">${row.notes.join(" ")}</span>`}`]));
+    const label = `Apply ${preview.rows.length} change${preview.rows.length === 1 ? "" : "s"}`;
+    const form = postForm("/settings/models/apply", html `${note(`Tasks filed from now on use these. ${termsOf("step-up", factsOf(view))}`)}${password(view, "models-apply-pw")}${acts(btn(label, { variant: "primary", type: "submit", docked: true }), btn("Cancel", { variant: "ghost", href: back(view) }))}`, { hidden: preview.hidden, attrs: { id: "models-apply", class: "models-editor" } });
+    return html `<div class="models-diff">${sec("preview", preview.title, "", html `${rows}${form}`)}</div>${dock(btn(label, { variant: "primary", type: "submit", attrs: { form: "models-apply" } }))}`;
 }
-/** How a task's size is decided, in plain words, and what routing does at filing. */
+/** How a task's size is decided, in plain words, and what routing does at filing; on demand. */
 function sizingSection(view) {
-    return html `<h2>How tasks are sized</h2><div class="card sizing"><p>Each task is sized once, when it is filed. ${view.sizing.classifier} If it doesn't answer within 5 seconds, the size comes from the description.</p><dl>
-<dt>Small</dt><dd>${view.sizing.small}. Built by the builder for small tasks, with no plan.</dd>
-<dt>Routine</dt><dd>${view.sizing.routine}. Planned and built by the planner and builder for routine tasks.</dd>
-<dt>Large or risky</dt><dd>Large: ${view.sizing.large}. Risky: ${view.sizing.risky} Planned and built by the large or risky models.</dd></dl>
-<details><summary>More about routing</summary><p>${view.routing}</p><p>Changing a model never re-sizes or re-routes a task that was already filed. One exception: an older build review saved without its own route uses the reviewer set here now.</p></details></div>${view.waiting.length === 0 ? "" : html `<details class="waiting"><summary>${view.waiting.length} plan${view.waiting.length === 1 ? "" : "s"} waiting for approval</summary><p class="meta">They keep the models they were filed with.</p><ul>${view.waiting.map(one => html `<li><a href="/t/${encodeURIComponent(one.taskId)}">${one.title}</a></li>`)}</ul></details>`}`;
+    const waiting = view.waiting.length === 0 ? "" : html `<p>${view.waiting.length} plan${view.waiting.length === 1 ? "" : "s"} waiting for approval keep the models they were filed with: ${view.waiting.map((one, index) => html `${index === 0 ? "" : ", "}<a class="k-link" href="/t/${encodeURIComponent(one.taskId)}">${one.title}</a>`)}.</p>`;
+    return disclose("How tasks are sized", html `<div class="models-sizing"><p>Each task is sized once, when it is filed. ${view.sizing.classifier} If it doesn't answer within 5 seconds, the size comes from the description.</p>${factList([
+        ["Small", `${view.sizing.small}. Built by the builder for small tasks, with no plan.`],
+        ["Routine", `${view.sizing.routine}. Planned and built by the planner and builder for routine tasks.`],
+        ["Large or risky", `Large: ${view.sizing.large}. Risky: ${view.sizing.risky} Planned and built by the large or risky models.`],
+    ])}<p>${view.routing}</p><p>Changing a model never re-sizes or re-routes a task that was already filed. One exception: an older build review saved without its own route uses the reviewer set here now.</p>${waiting}</div>`);
 }
 /** The model each recent run was set to, next to the model its provider reported. */
 function recentSection(view) {
     if (view.recent.length === 0)
-        return html ``;
-    return html `<h2>Recent work</h2><table class="recent"><thead><tr><th scope="col">Task</th><th scope="col">Chosen → ran on</th></tr></thead><tbody>${view.recent.map(one => html `<tr><td><a href="/t/${encodeURIComponent(one.taskId)}">${one.taskId}</a> <span class="meta">${one.role}</span></td><td><span class="mono">${one.chosen}</span> → <span class="mono">${one.ranOn}</span></td></tr>`)}</tbody></table>`;
+        return "";
+    return sec("recent", "Recent work", "", view.recent.map(one => formRow(one.role, `Chosen ${one.chosen} → ran on ${one.ranOn}`, html `<a class="k-link k-mono" href="/t/${encodeURIComponent(one.taskId)}">${one.taskId}</a>`, "inline")));
 }

package/dist/monitoring-ui.d.ts

@@ -2,18 +2,20 @@
  * Settings → Monitoring (v104): an instance operator points Toolroll at
  * the company's tools. One form, the status of each destination beside it,
  * and how Prometheus reads `/metrics`. The signing secret is shown once.
+ * Built from the revamp kit; the Settings frame adds the title.
  */
 import { type Html } from "./html.js";
 import type { MonitoringStatus } from "./store.js";
 import type { MonitoringSettings } from "./monitoring-settings.js";
-export declare const MONITORING_CSS: string;
+/** The page is kit pieces now; nothing of the old look is left. Kept as an export for the shared stylesheet. */
+export declare const MONITORING_CSS = "";
 export type MonitoringView = {
     settings: MonitoringSettings;
     status: MonitoringStatus[];
     head: number;
     origin: string | null;
 };
-export declare function monitoringHtml(view: MonitoringView, notice: {
+export declare function monitoringHtml(view: MonitoringView, said: {
     said?: string | null;
     problem?: string | null;
 }): Html;

package/dist/monitoring-ui.js

@@ -2,16 +2,16 @@
  * Settings → Monitoring (v104): an instance operator points Toolroll at
  * the company's tools. One form, the status of each destination beside it,
  * and how Prometheus reads `/metrics`. The signing secret is shown once.
+ * Built from the revamp kit; the Settings frame adds the title.
  */
-import { html, postForm, reauth } from "./html.js";
+import { html, joinHtml } from "./html.js";
 import { targetOf } from "./monitoring.js";
 import { whenUtc } from "./when-html.js";
+import { codeLine, disclose, doc, docHeader, formRow, icon, infoLine, input, note, notice, settingsSection, switchInput } from "./server/kit.js";
+import { kitSectionForm, SECRET_OPT_OUTS } from "./settings-kit.js";
 const when = (at) => whenUtc(at);
-export const MONITORING_CSS = `.monitoring{max-width:720px;min-width:0}.monitoring fieldset{border:0;padding:0;margin:20px 0 0;min-width:0}` +
-    `.monitoring legend{font-weight:600;font-size:.9375rem;margin-bottom:6px}.monitoring label{display:grid;gap:4px;margin:10px 0 0;font-size:.875rem}` +
-    `.monitoring input[type=text],.monitoring input[type=url],.monitoring input[type=password]{width:100%;box-sizing:border-box}.monitoring .choice{display:flex;gap:8px;align-items:center}` +
-    `.monitoring .status{margin:4px 0 0;font-size:.8125rem}.monitoring .status.problem{color:var(--danger)}.monitoring .step-up{margin-top:18px}.monitoring button[type=submit]{margin-top:14px}` +
-    `.monitoring pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.75rem}.monitoring details{margin-top:6px}`;
+/** The page is kit pieces now; nothing of the old look is left. Kept as an export for the shared stylesheet. */
+export const MONITORING_CSS = "";
 /** How a destination is doing, in one line. */
 function statusLine(view, sink, address) {
     // An empty field already says it's off.
@@ -20,20 +20,51 @@ function statusLine(view, sink, address) {
     // A status for another address (it just changed) says nothing about this one yet.
     const one = view.status.find(row => row.sink === sink && row.target === targetOf(address));
     if (one === undefined || (one.lastOkAt === null && one.lastError === null))
-        return html `<p class="status meta" data-monitoring="${sink}" data-state="starting">Starting: the first delivery goes out within a few seconds.</p>`;
+        return html `<p class="k-note" data-monitoring="${sink}" data-state="starting">Starting: the first delivery goes out within a few seconds.</p>`;
     if (one.failures > 0 && one.lastError !== null) {
-        return html `<p class="status problem" role="alert" data-monitoring="${sink}" data-state="failing">Failing: ${one.lastError}${one.nextTryAt === null ? "" : html ` · trying again ${when(one.nextTryAt)}`}</p>`;
+        return html `<p class="k-notice" role="alert" data-monitoring="${sink}" data-state="failing">${icon("alert", true)}<span>Failing: ${one.lastError}${one.nextTryAt === null ? "" : html ` · trying again ${when(one.nextTryAt)}`}</span></p>`;
     }
     const behind = Math.max(0, view.head - one.through);
-    return html `<p class="status meta" data-monitoring="${sink}" data-state="ok">${sink === "traces" ? "Sending" : `Sent through entry #${one.through}`}${one.lastOkAt === null ? "" : html ` · last ${when(one.lastOkAt)}`}${behind > 0 && sink !== "traces" ? ` · ${behind} to go` : ""}</p>`;
+    return html `<p class="k-note" data-monitoring="${sink}" data-state="ok">${sink === "traces" ? "Sending" : `Sent through entry #${one.through}`}${one.lastOkAt === null ? "" : html ` · last ${when(one.lastOkAt)}`}${behind > 0 && sink !== "traces" ? ` · ${behind} to go` : ""}</p>`;
 }
-export function monitoringHtml(view, notice) {
+export function monitoringHtml(view, said) {
     const s = view.settings;
-    const note = notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : notice.said ? html `<p role="status">${notice.said}</p>` : "";
     const metrics = view.origin === null ? "/metrics" : `${view.origin}/metrics`;
-    return html `<section class="monitoring">${note}${postForm("/settings/monitoring", html `<fieldset><legend>Audit stream</legend><p class="meta">Every ledger entry with its seal, as it happens, to your log system.</p><label>Webhook<input type="url" name="webhook" value="${s.webhook?.url ?? ""}" placeholder="https://logs.example.com/standing-orders" spellcheck="false"></label>${statusLine(view, "webhook", s.webhook?.url ?? null)}${s.webhook === null ? "" : html `<label class="choice"><input type="checkbox" name="rotate" value="1"> Make a new signing secret</label>`}<label>Folder (JSON Lines, a file per day)<input type="text" name="folder" value="${s.folder?.path ?? ""}" placeholder="/var/log/standing-orders" spellcheck="false"></label>${statusLine(view, "folder", s.folder?.path ?? null)}</fieldset><fieldset><legend>Traces</legend><p class="meta">Each run as an OpenTelemetry span: timings, model, tokens and cost. Never a prompt or code.</p><label>Collector (OTLP over HTTP)<input type="url" name="traces" value="${s.traces?.endpoint ?? ""}" placeholder="https://otel.example.com:4318" spellcheck="false"></label>${statusLine(view, "traces", s.traces?.endpoint ?? null)}<label>Header name (optional)<input type="text" name="header-name" value="${s.traces?.header?.name ?? ""}" placeholder="x-honeycomb-team" spellcheck="false"></label><label>Header value<input type="password" name="header-value" autocomplete="off" placeholder="${s.traces?.header ? "Saved; leave blank to keep" : "API key"}"></label></fieldset><div class="step-up">${reauth(html `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password"></label>`)}</div><button type="submit">Save</button>`)}<fieldset><legend>Metrics</legend><p class="meta">Prometheus reads <code>${metrics}</code> with an instance operator's API token (<a href="/settings/sessions">Sessions &amp; tokens</a>).</p><details><summary>Example</summary><pre>curl -H "Authorization: Bearer so_…" ${metrics}</pre></details></fieldset></section>`;
+    const audit = settingsSection({ id: "audit-stream", title: "Audit stream", lead: "Every ledger entry with its seal, as it happens, to your log system.",
+        body: joinHtml([
+            formRow("Webhook", "Blank: off.", input({ id: "monitoring-webhook", name: "webhook", type: "url", value: s.webhook?.url ?? "",
+                attrs: { placeholder: "https://logs.example.com/standing-orders", spellcheck: "false", "aria-label": "Webhook" } })),
+            statusLine(view, "webhook", s.webhook?.url ?? null),
+            s.webhook === null ? "" : formRow("Signing secret", "Make a new one. It is shown once, after Save.", switchInput({ id: "monitoring-rotate", name: "rotate", label: "Make a new signing secret", on: false, attrs: { value: "1" } }), "inline"),
+            formRow("Folder", "JSON Lines, a file per day. Blank: off.", input({ id: "monitoring-folder", name: "folder", value: s.folder?.path ?? "",
+                attrs: { placeholder: "/var/log/standing-orders", spellcheck: "false", "aria-label": "Folder" } })),
+            statusLine(view, "folder", s.folder?.path ?? null),
+        ]) });
+    const traces = settingsSection({ id: "traces", title: "Traces", lead: "Each run as an OpenTelemetry span: timings, model, tokens and cost. Never a prompt or code.",
+        body: joinHtml([
+            formRow("Collector", "OTLP over HTTP. Blank: off.", input({ id: "monitoring-traces", name: "traces", type: "url", value: s.traces?.endpoint ?? "",
+                attrs: { placeholder: "https://otel.example.com:4318", spellcheck: "false", "aria-label": "Collector" } })),
+            statusLine(view, "traces", s.traces?.endpoint ?? null),
+            formRow("Header name", "Optional.", input({ id: "monitoring-header-name", name: "header-name", value: s.traces?.header?.name ?? "",
+                attrs: { placeholder: "x-honeycomb-team", spellcheck: "false", "aria-label": "Header name" } })),
+            formRow("Header value", s.traces?.header ? "Saved. Leave blank to keep it." : null, input({ id: "monitoring-header-value", name: "header-value", type: "password",
+                attrs: { autocomplete: "off", spellcheck: "false", autocapitalize: "none", "data-so-secret": true, ...SECRET_OPT_OUTS, placeholder: s.traces?.header ? "Saved; leave blank to keep" : "API key", "aria-label": "Header value" } })),
+        ]) });
+    const metricsSection = settingsSection({ id: "metrics", title: "Metrics",
+        lead: html `Prometheus reads <code class="k-mono">${metrics}</code> with an instance operator's API token (<a class="k-link" href="/settings/sessions">Sessions and tokens</a>).`,
+        body: disclose("Example", codeLine(`curl -H "Authorization: Bearer so_…" ${metrics}`)) });
+    return joinHtml([
+        said.problem ? notice(said.problem) : said.said ? infoLine(said.said) : "",
+        // A new signing secret answers with a page of its own (shown once): post as a navigation.
+        kitSectionForm({ proof: "monitoring", action: "/settings/monitoring", id: "monitoring-form", gate: true, native: true, body: joinHtml([audit, traces]) }),
+        metricsSection,
+    ]);
 }
 /** The webhook's signing secret, once: a focused page with no script. */
 export function signingSecretHtml(url, secret) {
-    return html `<h1>Signing secret</h1><div class="card"><p>Give this to the receiver at <span class="mono">${url}</span>. It's shown once.</p><p class="mono secret-value">${secret}</p><p class="meta">Each request carries <code>x-standing-orders-signature: t=&lt;time&gt;,v1=&lt;HMAC-SHA256 of "time.body"&gt;</code>. Check it, and that the time is recent.</p></div><p class="meta"><a href="/settings/monitoring">Back to Monitoring</a></p>`;
+    return doc(docHeader({ title: "Signing secret", back: ["/settings/monitoring", "Monitoring"] }), settingsSection({ id: "signing-secret", title: "Shown once", lead: html `Give this to the receiver at <span class="k-mono">${url}</span>. It isn't shown again.`,
+        body: joinHtml([
+            html `<p class="k-secret-val">${secret}</p>`,
+            note(html `Each request carries <code class="k-mono">x-standing-orders-signature: t=&lt;time&gt;,v1=&lt;HMAC-SHA256 of "time.body"&gt;</code>. Check it, and that the time is recent.`),
+        ]) }));
 }

package/dist/needs-you.d.ts

@@ -45,7 +45,7 @@ export declare const ASKS: readonly Ask[];
 export declare const ASK_LABEL: Readonly<Record<Ask, string>>;
 /** A waiting row's chip: the specific thing asked, never its group's own word (no "Decide" chip under Decide).
  * Null: the group heading and the row's sentence already say it, so the row wears no chip. */
-export type AskChip = "Plan" | "Result" | "Mismatch" | "Plan changed" | "Failed" | "Builder offline";
+export type AskChip = "Plan" | "Result" | "Mismatch" | "Plan changed" | "Failed" | "Builder offline" | "Question" | "On hold" | "Stopped" | "Sign in";
 /** `mismatch`: the saved report doesn't match its changes; `planChanged`: the plan changed after it was built. */
 export declare function askChipOf(read: {
     headline: string;

package/dist/needs-you.js

@@ -66,6 +66,14 @@ export function askChipOf(read) {
         return "Plan";
     if (read.need === "start-builder" || read.need === "connect-builder")
         return "Builder offline";
+    if (read.need === "answer" || read.need === "questions")
+        return "Question";
+    if (read.need === "hold")
+        return "On hold";
+    if (read.need === "vanished" || read.need === "confirm-stopped" || read.need === "check-stopped")
+        return "Stopped";
+    if (read.need === "sign-in")
+        return "Sign in";
     return null;
 }
 export function resultHoldUpSentence(facts) {

package/dist/operate-remote-arguments.js

@@ -19,6 +19,7 @@ export const REMOTE_ARGUMENTS = new Map([
     ['task add', args('title*', 'key report checks', { id: 'refused', replaces: 'task' })],
     ['task ask', args('id:task', 'person why')],
     ['task checks', args('task:task', 'level')],
+    ['task ship', args('task:task')],
     ['task add-tests', args('task:task')],
     ['task list', args('', 'state view limit cursor')],
     ['task show', args('id:task')],

package/dist/operate-remote.js

@@ -37,7 +37,7 @@ const references = { kind: "references" }, listing = { kind: "listing" };
 export const REMOTE_SCOPES = new Map([
     ["status", listing], ["integrations", installation], ["ready", listing], ["grants", installation], ["sync", installation],
     ["gaps", repo], ["task add", repo],
-    ...["ask", "checks", "add-tests", "show", "wait", "complete", "revise", "state", "block", "unblock", "next", "steer", "pause", "continue", "assign", "scope", "plan", "hold",
+    ...["ask", "checks", "ship", "add-tests", "show", "wait", "complete", "revise", "state", "block", "unblock", "next", "steer", "pause", "continue", "assign", "scope", "plan", "hold",
         "unhold", "require", "requeue", "review", "repair", "route", "reopen", "stop", "resume"].map(action => [`task ${action}`, references]),
     ["check-progress", references],
     ["task list", listing],

package/dist/operate.d.ts

@@ -115,7 +115,7 @@ type Args = {
  * exports are behavior, not commentary — and the declared command guide
  * (surface.ts) is tested for exact equality against them.
  */
-export declare const TASK_ACTIONS: readonly ["add", "list", "show", "wait", "state", "block", "unblock", "next", "steer", "pause", "continue", "assign", "reopen", "scope", "approve", "hold", "unhold", "require", "requeue", "regate", "plan", "review", "accept", "repair", "route", "stop", "resume", "complete", "revise", "merge", "ask", "checks", "add-tests"];
+export declare const TASK_ACTIONS: readonly ["add", "list", "show", "wait", "state", "block", "unblock", "next", "steer", "pause", "continue", "assign", "reopen", "scope", "approve", "hold", "unhold", "require", "requeue", "regate", "plan", "review", "accept", "repair", "route", "stop", "resume", "complete", "revise", "merge", "ask", "checks", "add-tests", "archive", "restore", "tidy", "ship"];
 export declare const PUBLISH_ACTIONS: readonly ["setup", "grant", "revoke", "status", "unblock", "rearm", "merge", "refire"];
 export declare const CONFIG_ACTIONS: readonly ["show", "set", "clear"];
 export declare const APPROVER_ACTIONS: readonly ["list", "add"];