toolroll 0.9.86 → 0.9.88

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", "archive", "restore", "tidy"];
+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"];

package/dist/operate.js

@@ -107,7 +107,8 @@ import { taskReviewBrief, renderReviewBrief } from "./task-review-brief.js";
 import { homedir, hostname } from "node:os";
 import { basename, dirname, isAbsolute, join, resolve } from "node:path";
 import { releaseStalledUpdate, waitingUpdate } from "./toolroll-update.js";
-import { openStore, openStoreNoMigrate, archiveTaskFamily, restoreTaskFamily, CONCURRENT_WRITER_WAIT_MS, isDatabaseBusy, databasePath, BUILT_IN, parseCapabilityKey, verifiedAuthor, isDigestTime, predecessorWatches, RESULT_SCREENSHOTS, lifecycleOf, reportLifecycle, beatLifecycle, } from "./store.js";
+import { dur } from "./design/kit.js";
+import { openStore, openStoreNoMigrate, archiveTaskFamily, restoreTaskFamily, shipChecksForTask, elapsedSeconds, CONCURRENT_WRITER_WAIT_MS, isDatabaseBusy, databasePath, BUILT_IN, parseCapabilityKey, verifiedAuthor, isDigestTime, predecessorWatches, RESULT_SCREENSHOTS, lifecycleOf, reportLifecycle, beatLifecycle, } from "./store.js";
 import { createHash, randomBytes, randomInt, randomUUID } from "node:crypto";
 import { claimInstance, clearInstance, openInstanceSocket } from "./console-instance.js";
 import { authorizePlanUnderMode } from "./plan-auto.js";
@@ -344,6 +345,7 @@ export const OPERATE_HELP = `toolroll — operating the queue
       [--anyway]                        merge without waiting for the full check
   toolroll task checks <id> [--level quick|full]
                                         run checks on the result's exact commit now
+  toolroll task ship <id>            its pull request's checks, each with its state and how long it took
   toolroll task add-tests <id>       file a small task to write tests for that change
   toolroll task revise <id> --feedback "requested change"
   toolroll assignment show <task>    root, current work and exact handoff
@@ -669,7 +671,7 @@ export const TASK_ACTIONS = [
     "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",
+    "checks", "add-tests", "archive", "restore", "tidy", "ship",
 ];
 export const PUBLISH_ACTIONS = ["setup", "grant", "revoke", "status", "unblock", "rearm", "merge", "refire"];
 export const CONFIG_ACTIONS = ["show", "set", "clear"];
@@ -8586,6 +8588,8 @@ function taskAction(action, rest, flags, context) {
             return addTask(rest, flags, context);
         case "checks":
             return runTaskChecks(rest, flags, context);
+        case "ship":
+            return taskShipCommand(rest, context);
         case "add-tests":
             return addTestsTask(rest, flags, context);
         case "list":
@@ -9017,9 +9021,9 @@ function listTasks(flags, context) {
     const limit = rawLimit === undefined ? 40 : Number(rawLimit);
     if (wanted !== undefined && !STATES.includes(wanted))
         return fail(write, json, 'task list', 'usage', `--state takes one of ${STATES.join(', ')}`, EXIT.usage);
-    if (rawView !== undefined && !['all', 'needs-you', 'running', 'completed', 'archived'].includes(rawView) ||
+    if (rawView !== undefined && !['all', 'needs-you', 'running', 'queued', 'completed', 'archived'].includes(rawView) ||
         !Number.isSafeInteger(limit) || limit < 1 || limit > 100) {
-        return fail(write, json, 'task list', 'usage', '--view takes all, needs-you, running, completed or archived; --limit takes 1–100', EXIT.usage);
+        return fail(write, json, 'task list', 'usage', '--view takes all, needs-you, running, queued, completed or archived; --limit takes 1–100', EXIT.usage);
     }
     // A remote person limited to some projects (remoteLensOf) pages and counts only theirs.
     const lens = context.principal?.lens ?? null;
@@ -12963,3 +12967,33 @@ function firstVisibleRepo(store, name, ids) {
     }
     return store.accountCanAccess(name, null) ? null : store.knownRepos().find(repo => store.accountCanAccess(name, repo)) ?? null;
 }
+/** The check states as `task ship` says them. */
+const SHIP_CHECK_WORDS = { queued: "queued", running: "running", passed: "passed", failed: "failed", skipped: "skipped", cancelled: "cancelled", neutral: "neutral" };
+/**
+ * `toolroll task ship <task>` (read-only) — the task's pull request checks as the plane last observed them for that
+ * head (store.ts ci_check, v146): each check's state and how long it took, the Ship view's own facts.
+ */
+function taskShipCommand(positional, context) {
+    const { store, write, json } = context;
+    const command = "task ship";
+    const id = positional[0];
+    if (id === undefined || positional.length > 1)
+        return fail(write, json, command, "usage", "`toolroll task ship <task>`", EXIT.usage);
+    const ref = store.lookupRef(id);
+    const lens = context.principal?.lens ?? null;
+    // A task outside the caller's projects is no task here, the same answer as one that doesn't exist.
+    if (ref === null || store.getTask(id) === null || (lens !== null && (ref.repo === null || !lens.includes(ref.repo))))
+        return fail(write, json, command, "unknown-task", `no task \`${id}\``, EXIT.refused);
+    const ship = shipChecksForTask(store, id);
+    if (ship === null)
+        return fail(write, json, command, "no-pull-request", `${id} has no pull request with observed checks yet`, EXIT.refused);
+    const now = (context.clock ?? (() => context.now))();
+    const checks = ship.checks.map(one => ({ ...one, seconds: elapsedSeconds(one.startedAt, one.completedAt, now) }));
+    const passed = checks.filter(one => one.state === "passed").length;
+    // The overall answer is the observation's own (the one merges read), never a sum of the rows.
+    const overall = ship.observed === "failing" ? "failing" : ship.observed === "passing" ? "passing" : ship.observed === "running" ? "running" : "not read";
+    return succeed(write, json, command, { task: id, pullRequest: ship.prNumber, githubRepo: ship.githubRepo, head: ship.headSha, observedAt: ship.observedAt, status: ship.observed, checks }, () => [
+        `Pull request #${ship.prNumber} (${ship.githubRepo}) at ${ship.headSha.slice(0, 7)}: checks ${overall} · ${passed} of ${checks.length} passed`,
+        ...checks.map(one => `  ${(one.workflow === null ? one.name : `${one.workflow} / ${one.name}`).padEnd(32)} ${(SHIP_CHECK_WORDS[one.state] ?? one.state).padEnd(9)} ${one.seconds === null ? "–" : dur(one.seconds)}`),
+    ]);
+}

package/dist/passwordless.d.ts

@@ -20,4 +20,4 @@ export declare const passwordlessOn: (store: Store) => boolean;
 export declare function setPasswordless(store: Store, on: boolean, by: string, now: Date): {
     changed: boolean;
 };
-export declare const PASSWORDLESS_TRADE = "Anyone holding a signed-in browser \u2014 an unlocked laptop, a phone, a stolen session \u2014 can then do everything you can without a second check. Signing in, session limits (12 hours idle, 7 days), signing out and ending sessions remain your protection. Creating or widening a way in (passwords, sign-in methods, API tokens, connected apps, people, workers, chat pairing, webhook secrets) still asks for your password.";
+export declare const PASSWORDLESS_TRADE = "Anyone holding a signed-in browser \u2014 an unlocked laptop, a phone, a stolen session \u2014 can then do everything you can without a second check. Signing in, session limits (12 hours idle, 7 days), signing out and ending sessions remain your protection. Creating or widening a way in (passwords, sign-in methods, API tokens, connected apps, people, workers, chat pairing, webhook secrets), or widening what a project's builds and checks reach (its network, where builds write, its home folder and its check access), still asks for your password.";

package/dist/passwordless.js

@@ -23,4 +23,4 @@ export function setPasswordless(store, on, by, now) {
     store.bumpWake();
     return { changed: true };
 }
-export const PASSWORDLESS_TRADE = "Anyone holding a signed-in browser — an unlocked laptop, a phone, a stolen session — can then do everything you can without a second check. Signing in, session limits (12 hours idle, 7 days), signing out and ending sessions remain your protection. Creating or widening a way in (passwords, sign-in methods, API tokens, connected apps, people, workers, chat pairing, webhook secrets) still asks for your password.";
+export const PASSWORDLESS_TRADE = "Anyone holding a signed-in browser — an unlocked laptop, a phone, a stolen session — can then do everything you can without a second check. Signing in, session limits (12 hours idle, 7 days), signing out and ending sessions remain your protection. Creating or widening a way in (passwords, sign-in methods, API tokens, connected apps, people, workers, chat pairing, webhook secrets), or widening what a project's builds and checks reach (its network, where builds write, its home folder and its check access), still asks for your password.";

package/dist/people-audit-ui.d.ts

@@ -1,7 +1,8 @@
 import { type AuditAction } from "./remote-audit.js";
 import type { ApiTokenRow } from "./store.js";
 import { type Html } from "./html.js";
-export declare const PEOPLE_AUDIT_CSS: string;
+/** The old look; the page is built from the kit now. Kept for chrome.ts, which still concatenates it. */
+export declare const PEOPLE_AUDIT_CSS = "";
 export type PersonAuditView = {
     name: string;
     tokens: readonly ApiTokenRow[];

package/dist/people-audit-ui.js

@@ -3,36 +3,38 @@
  * (remote-audit.ts). A token's name filters the actions to it (`token-name`: a `token` query is always refused). Read-only: making, revoking and rotating tokens stay
  * in Settings → Sessions & tokens. Never a token's secret or a ledger line's raw detail.
  */
+import { settingsSubPage } from "./settings-groups-ui.js";
 import { basename } from "node:path";
 import { tokenStatus } from "./remote-audit.js";
-import { html } from "./html.js";
+import { html, joinHtml } from "./html.js";
+import { acts, btn, chip, note, settingsRecord, settingsSection } from "./server/kit.js";
 const stamp = (value) => `${value.slice(0, 16).replace("T", " ")} UTC`;
-export const PEOPLE_AUDIT_CSS = `.person-audit{max-width:820px;min-width:0;overflow-wrap:anywhere}.person-audit h2{font-size:1.05rem;margin:1.25rem 0 8px}` +
-    `.person-audit .rows{display:grid;border:1px solid var(--so-line);border-radius:10px;overflow:hidden}.person-audit .row-item{padding:10px 14px;border-bottom:1px solid var(--so-line);min-width:0}` +
-    `.person-audit .row-item:last-child{border-bottom:0}.person-audit .row-item p{margin:0}.person-audit .row-item .meta{font-size:.85rem}` +
-    `.person-audit a{display:inline-flex;align-items:center;min-height:44px}.person-audit .row-item a{min-height:32px}.person-audit a:focus-visible{outline:2px solid var(--so-accent);outline-offset:2px;border-radius:4px}` +
-    `.person-audit .outcome{display:inline-block;font-size:.8rem;font-weight:600;padding:1px 8px;border-radius:999px;margin-right:8px}` +
-    `.person-audit .outcome-ok{background:var(--so-success-soft);color:var(--so-success)}.person-audit .outcome-refused{background:var(--so-warning-soft);color:var(--so-ink)}` +
-    `.person-audit .outcome-error{background:var(--so-danger-soft);color:var(--so-danger)}` +
-    `@media(max-width:600px){.person-audit .row-item a{min-height:44px}}`;
+/** The old look; the page is built from the kit now. Kept for chrome.ts, which still concatenates it. */
+export const PEOPLE_AUDIT_CSS = "";
 export const personHref = (name, more = {}) => `/people?${new URLSearchParams({ person: name, ...more }).toString()}`;
 export function personAuditHtml(view) {
-    const tokens = view.tokens.length === 0 ? html `<p class="meta">No API tokens.</p>` : html `<div class="rows">${view.tokens.map(one => {
-        const status = tokenStatus(one, view.now);
-        return html `<div class="row-item" data-token-name="${one.name}"><p><a href="${personHref(view.name, { "token-name": one.name })}">${one.name}</a></p>\
-<p class="meta">${status === "active" ? "Active" : status === "expired" ? "Expired" : "Revoked"} · ${one.access === "act" ? "Can act" : "Read only"} · \
-last used ${one.lastUsedAt === null ? "never" : stamp(one.lastUsedAt)}</p></div>`;
-    })}</div>`;
-    const filtered = view.token === null ? "" : html `<p class="meta">With ${view.token}</p><p><a href="${personHref(view.name)}">All tokens</a></p>`;
-    const actions = view.actions.length === 0 ? html `<p class="meta">No remote actions${view.token === null ? "" : " with this token"}.</p>` : html `<div class="rows">${view.actions.map(actionHtml)}</div>`;
-    const older = view.nextCursor === null ? "" : html `<p><a href="${personHref(view.name, { ...(view.token === null ? {} : { "token-name": view.token }), before: view.nextCursor })}">Older actions</a></p>`;
-    return html `<p><a href="/people">People</a></p><h1>${view.name}</h1><section class="person-audit"><h2>API tokens</h2>${tokens}\
-<h2>Remote activity</h2>${filtered}${actions}${older}</section>`;
+    const tokens = settingsSection({ id: "person-tokens", title: "API tokens", lead: "Make, revoke and rotate tokens in Sessions and tokens.",
+        body: view.tokens.length === 0 ? note("No API tokens.") : joinHtml(view.tokens.map(one => {
+            const status = tokenStatus(one, view.now);
+            return settingsRecord({
+                title: html `<a class="k-link" href="${personHref(view.name, { "token-name": one.name })}">${one.name}</a>`,
+                sub: `${status === "active" ? "Active" : status === "expired" ? "Expired" : "Revoked"} · ${one.access === "act" ? "Can act" : "Read only"} · last used ${one.lastUsedAt === null ? "never" : stamp(one.lastUsedAt)}`,
+                attrs: { "data-token-name": one.name },
+            });
+        })) });
+    const filtered = view.token === null ? undefined : btn("All tokens", { sm: true, variant: "ghost", href: personHref(view.name) });
+    const older = view.nextCursor === null ? "" : acts(btn("Older actions", { sm: true, href: personHref(view.name, { ...(view.token === null ? {} : { "token-name": view.token }), before: view.nextCursor }) }));
+    const activity = settingsSection({ id: "person-activity", title: "Remote activity", ...(view.token === null ? {} : { state: ` · with ${view.token}` }), ...(filtered ? { right: filtered } : {}),
+        lead: "What this person did through the toolroll command and agents (MCP), newest first.",
+        body: joinHtml([view.actions.length === 0 ? note(`No remote actions${view.token === null ? "" : " with this token"}.`) : joinHtml(view.actions.map(actionHtml)), older]) });
+    return settingsSubPage("access", view.name, joinHtml([note(html `<a class="k-link" href="/people">All people</a>`), tokens, activity]));
 }
 function actionHtml(action) {
-    const label = action.outcome === "ok" ? "OK" : action.outcome === "refused" ? "Refused" : "Error";
+    const outcome = action.outcome === "ok" ? chip("OK", "done") : action.outcome === "refused" ? chip("Refused", "") : chip("Error", "failed");
     const detail = [stamp(action.at), action.token ?? "unknown token", action.source === "mcp" ? "Agent (MCP)" : "CLI",
         ...(action.repo === null ? [] : [basename(action.repo)]), ...(action.reason === null ? [] : [action.reason])];
-    return html `<div class="row-item" data-action="${action.id}"><p><span class="outcome outcome-${action.outcome}">${label}</span>${action.name}\
-${action.taskId === null ? "" : html ` · <a href="/t/${encodeURIComponent(action.taskId)}">${action.taskId}</a>`}</p><p class="meta">${detail.join(" · ")}</p></div>`;
+    return settingsRecord({
+        title: html `${outcome} ${action.name}${action.taskId === null ? "" : html ` · <a class="k-link" href="/t/${encodeURIComponent(action.taskId)}">${action.taskId}</a>`}`,
+        sub: detail.join(" · "), attrs: { "data-action": action.id },
+    });
 }