toolroll 0.9.86 → 0.9.88

package/dist/flow-unattended.js

@@ -31,7 +31,7 @@ import { lstat, readFile, realpath, stat } from "node:fs/promises";
 import { createRequire } from "node:module";
 import { dirname, isAbsolute, join, relative, resolve } from "node:path";
 import { isProtectedWork } from "./approval-policy.js";
-import { dollarWords as dollars, scheduleWords, UNATTENDED_RULE_WORDS, unattendedCoverWords, unattendedEndWords, unattendedHeadWords, unattendedLimitWords, untilWords } from "./flow-unattended-words.js";
+import { dollarWords as dollars, scheduleWords, unattendedBudgetOf, unattendedRunsOf, UNATTENDED_RULE_WORDS, unattendedCoverWords, unattendedEndWords, unattendedHeadWords, unattendedLimitWords, untilWords } from "./flow-unattended-words.js";
 import { MODE_MAX_DAYS } from "./modes.js";
 import { accountReachesSql } from "./project-access.js";
 import { canonicalJson } from "./canonical-json.js";
@@ -70,10 +70,8 @@ export const FLOW_ACCEPTANCE = {
     report: [{ id: "c1", statement: "The report answers the request, citing where in the repository each point comes from", how: null, evidence: ["manual-review"] }],
     task: [{ id: "c1", statement: "The requested change is made and the project's existing checks still pass", how: null, evidence: ["manual-review"] }],
 };
-/** The most runs a day a grant may allow. */
-export const UNATTENDED_MAX_RUNS = 50;
-/** The largest per-attempt budget a grant may name: $100. */
-export const UNATTENDED_MAX_BUDGET_MICROUSD = 100_000_000;
+/** The limits a grant may name, and their one parser, live with its words (the flow page validates with them too). */
+export { UNATTENDED_MAX_BUDGET_MICROUSD, UNATTENDED_MAX_RUNS } from "./flow-unattended-words.js";
 export const unattendedTermsJson = (terms) => canonicalJson(terms);
 /** sha256 over a domain-separated canonical encoding, 32 hex like the mode digest. */
 export function unattendedDigestOf(terms) {
@@ -213,10 +211,11 @@ function closeGrant(store, row, by, reason, now) {
 export function endUnattendedGrants(store, filter, by, reason, now) {
     const rows = "flow" in filter ? store.handle.prepare("SELECT * FROM flow_unattended_grant WHERE flow = ? AND revoked_at IS NULL").all(filter.flow)
         : "signer" in filter ? store.handle.prepare("SELECT * FROM flow_unattended_grant WHERE signed_by = ? AND revoked_at IS NULL").all(filter.signer)
-            // A script saved or removed: the grants in its project that signed a schedule running it (an unreadable one too, to be safe).
+            // A script saved or removed: the grants in its project that signed a schedule running it, or whose flow has a step
+            // that runs it (pre-authorized work would run the new code unseen); an unreadable one too, to be safe.
             : "script" in filter ? store.handle.prepare("SELECT * FROM flow_unattended_grant WHERE repo = ? AND revoked_at IS NULL").all(filter.script.repo).filter(row => {
                 const terms = unattendedTermsFromJson(String(row["terms_json"]));
-                return terms === null || terms.triggers.some(one => one.script?.name === filter.script.name);
+                return terms === null || terms.triggers.some(one => one.script?.name === filter.script.name) || flowStepRunsScript(store, Number(row["flow"]), filter.script.name);
             })
                 // A project's rules reach the flows in it and the flows whose build zones work in it.
                 : store.handle.prepare(`SELECT ug.* FROM flow_unattended_grant ug JOIN flow f ON f.id = ug.flow WHERE ug.revoked_at IS NULL
@@ -605,22 +604,13 @@ export function parseUnattendedAsk(input) {
     const days = Number(text(input.days));
     if (!Number.isInteger(days) || days < 1 || days > MODE_MAX_DAYS)
         return { ok: false, message: `Choose 1 to ${MODE_MAX_DAYS} days: it always ends.` };
-    const budgetText = text(input.budget).replace(/^\$/, "");
-    let budgetMicrousd = null;
-    if (budgetText !== "") {
-        const value = Number(budgetText);
-        if (!/^\d+(\.\d{1,2})?$/.test(budgetText) || value <= 0 || Math.round(value * 1_000_000) > UNATTENDED_MAX_BUDGET_MICROUSD)
-            return { ok: false, message: `Give the budget in dollars, up to ${dollars(UNATTENDED_MAX_BUDGET_MICROUSD)}, or leave it empty.` };
-        budgetMicrousd = Math.round(value * 1_000_000);
-    }
-    const runsText = text(input.runs);
-    let dailyRunCap = null;
-    if (runsText !== "") {
-        const value = Number(runsText);
-        if (!Number.isInteger(value) || value < 1 || value > UNATTENDED_MAX_RUNS)
-            return { ok: false, message: `Give runs a day as 1 to ${UNATTENDED_MAX_RUNS}, or leave it empty.` };
-        dailyRunCap = value;
-    }
+    const budget = unattendedBudgetOf(text(input.budget));
+    if (!budget.ok)
+        return budget;
+    const runs = unattendedRunsOf(text(input.runs));
+    if (!runs.ok)
+        return runs;
+    const budgetMicrousd = budget.value, dailyRunCap = runs.value;
     const includeText = Array.isArray(input.include) ? input.include.map(text).join(",") : text(input.include);
     const include = includeText === "" ? [] : includeText.split(/[\s,]+/).filter(one => one !== "").map(Number);
     if (include.some(id => !Number.isSafeInteger(id) || id < 1))
@@ -772,5 +762,37 @@ export function unattendedViewOf(store, flow, viewer, now) {
         terms: { head: unattendedHeadWords(viewer.name, FLOW_ACCEPTANCE), rules: [...UNATTENDED_RULE_WORDS] },
         schedules: candidates.map(one => ({ id: one.id, words: one.words, optional: one.optional })),
         schedulesDigest: candidatesDigestOf(candidates),
+        ended: live === null ? unattendedEndedOf(store, flow.id, now) : null,
     };
 }
+/** Why the flow's latest grant ended early, in words, when a change ended it while it would still have run. */
+const ENDED_WORDS = {
+    "flow changed": "the flow changed", "script changed": "a script it runs changed", "schedule changed": "a schedule changed",
+    "project protected": "the project's approval rules changed", "access changed": "its signer's access changed",
+};
+function unattendedEndedOf(store, flowId, now) {
+    const row = store.handle.prepare("SELECT revoked_at, revoke_reason, absolute_expiry FROM flow_unattended_grant WHERE flow = ? ORDER BY id DESC LIMIT 1").get(flowId);
+    if (row === undefined || row["revoked_at"] == null)
+        return null;
+    const why = ENDED_WORDS[String(row["revoke_reason"])];
+    return why === undefined || Date.parse(String(row["absolute_expiry"])) <= now.getTime() ? null : { why, at: String(row["revoked_at"]) };
+}
+/** Whether one of the flow's "Run a script" steps runs this script. A drawing that isn't readable and well formed counts,
+ * to be safe. */
+function flowStepRunsScript(store, flowId, name) {
+    const flow = store.getFlow(flowId);
+    if (flow === null)
+        return false;
+    let drawn;
+    try {
+        drawn = JSON.parse(flow.definitionJson);
+    }
+    catch {
+        return true;
+    }
+    // Anything but a well-formed drawing (an object whose stages are a list of objects) fails closed: the grant ends.
+    const stages = drawn !== null && typeof drawn === "object" && !Array.isArray(drawn) ? drawn.stages : undefined;
+    if (!Array.isArray(stages) || !stages.every(stage => stage !== null && typeof stage === "object" && !Array.isArray(stage)))
+        return true;
+    return stages.some(stage => stage.kind === "check" && stage.script === name);
+}

package/dist/flows-cli.js

@@ -364,8 +364,10 @@ export async function runFlowsCommand(positional, flags, context) {
             return refuse(project, 'unknown-script', `There's no script called ${name} in ${projectName(project)}.`);
         if (script.held === null)
             return ok({ applied: false, repo: project, said: `${script.name} already runs.` }, [`${script.name} already runs.`]);
-        store.approveFlowScript(project, script.name);
-        record(project, 'accepted', `script ${script.name} approved`);
+        // Bound to the version just read: a script swapped under the same name meanwhile is refused, never approved unseen.
+        if (store.approveFlowScript(project, script.name, { version: script.version, digest: script.digest }) !== 'approved')
+            return refuse(project, 'changed', `${script.name} changed while this ran. Read it again (toolroll flows show), then approve it. Nothing was approved.`);
+        record(project, 'accepted', `script ${script.name} v${script.version} approved`);
         settle(project);
         return ok({ applied: true, repo: project, said: `Approved ${script.name}. Zones that run it go on.` }, [`Approved ${script.name}. Zones that run it go on.`]);
     }
@@ -631,6 +633,8 @@ function describeFlow(store, flow, now) {
         }),
         cards: store.flowCards(flow.id, true).slice(0, 10).map(card => cardOf(definition, card)),
         unattended: unattendedJson(store, flow, now),
+        // The latest grant a change ended early (the flow, a script, a schedule): why and when, as the flow page says it.
+        ...(() => { const ended = unattendedViewOf(store, flow, { name: flow.owner, approver: true }, now).ended; return ended === null ? {} : { unattendedEnded: ended }; })(),
         // Browser use, only for a flow with a zone that starts one: the same status line the flow page shows.
         ...(() => { const view = browserViewOf(store, flow); return view === null ? {} : { browser: { status: view.status, words: view.words, signedBy: view.signedBy, signedAt: view.signedAt } }; })(),
     };
@@ -647,7 +651,7 @@ function showLines(flow) {
     return [
         `#${flow.id} ${flow.name} · ${flow.project} · owner ${flow.owner}`,
         flow.unattended === null
-            ? `Runs on its own: no · turn on: toolroll flows unattended ${flow.id} on --days N`
+            ? `Runs on its own: no${'unattendedEnded' in flow && flow.unattendedEnded !== undefined ? ` (it ended ${untilWords(flow.unattendedEnded.at)}: ${flow.unattendedEnded.why})` : ''} · turn on: toolroll flows unattended ${flow.id} on --days N`
             : `Runs on its own until ${untilWords(flow.unattended.until)} · revoke: toolroll flows unattended ${flow.id} off`,
         ...(flow.unattended === null ? [] : [`  Covers: ${flow.unattended.covers.join('; ')}`]),
         ...(flow.browser === undefined ? [] : [`${flow.browser.words} · ${flow.browser.status === 'allowed' ? `turn off: toolroll flows browser ${flow.id} off` : `allow: toolroll flows browser ${flow.id} on`}`]),

package/dist/flows-ui.d.ts

@@ -2,12 +2,18 @@ import type { BrowserFlowView } from "./browser-workspace.js";
 import type { FlowRow, Store } from "./store.js";
 import { type FlowFile, type FlowImportPlan } from "./flow-share.js";
 import { type Html } from "./html.js";
-export declare const FLOWS_CSS = ".flows{max-width:880px;min-width:0}.flows .card{padding:16px 18px;margin:12px 0}.flows .flow-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}.flows .flow-row h2{font-size:1.05rem;margin:0}.flows .flow-counts{font-size:.85rem;color:var(--so-muted)}.flows form{display:grid;gap:10px;margin:0}.flows label{display:grid;gap:6px}.flows input,.flows select{box-sizing:border-box;width:100%;max-width:100%}.flows button{justify-self:start;min-height:44px}.flows .flow-fallback ol{padding-left:20px}.flows summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}.flows .flow-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0}.flows .flow-import{margin-top:18px;padding-top:14px;border-top:1px solid var(--so-line)}.flows .flow-import h3{font-size:.95rem;margin:0}.flows .flow-terms{list-style:none;padding:0;margin:8px 0 16px;display:grid;gap:10px}.flows .flow-terms li{white-space:pre-line;overflow-wrap:anywhere}.flows .flow-terms pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8rem;margin:6px 0 0}.flows .flow-import-preview h2{font-size:1rem;margin:20px 0 4px}.flows .flow-untrusted{font-weight:600}.flows button.primary{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}.flows fieldset{border:0;padding:0;margin:0;display:grid;gap:10px;min-width:0}.flows legend{font-weight:600;padding:0;margin-bottom:6px}.flows textarea[hidden]{display:none}.flows button.secondary{background:transparent;color:var(--foreground);border:1px solid var(--border)}@media(max-width:600px){.flows input,.flows select{font-size:16px}}@media(max-width:760px){.flows .card{padding:10px 12px;margin:8px 0;position:relative}.flows .flow-row{row-gap:2px}.flows .flow-row h2 a::after{content:\"\";position:absolute;inset:0;border-radius:inherit}.flows .flow-counts{line-height:1.35}}";
-/** The flows a person can open, with how many cards wait in each, and the new-flow form. */
-export declare function flowsListHtml(store: Store, flows: readonly FlowRow[], projects: readonly string[], canCreate: boolean, problem: string | null): Html;
-/** Reads the chosen flow file into the form (the server reads it again, whole, before anything is made). */
-export declare const FLOW_IMPORT_SCRIPT = "(function(){var form=document.querySelector('[data-flow-import]');if(!form)return;var input=form.querySelector('[data-flow-file]'),text=form.querySelector('[data-flow-document]'),note=form.querySelector('[data-flow-file-note]'),address=form.querySelector('[name=url]');function say(words){note.textContent=words;note.hidden=words==='';}var reading=null;input.addEventListener('change',function(){text.value='';say('');var file=input.files&&input.files[0];if(!file){reading=null;return;}if(file.size>262144){say('That file is too big: a flow file is at most 256 KB.');input.value='';reading=null;return;}reading=file.text().then(function(value){text.value=value;});});form.addEventListener('submit',function(event){if(reading!==null&&text.value===''){event.preventDefault();reading.then(function(){form.requestSubmit();});return;}if(text.value===''&&address.value.trim()===''){event.preventDefault();say('Choose a flow file or give its address.');}});})();";
-/** An import's preview: the plan in plain words, what it asks for, and one Import button after the terms. */
+/** The flow page's fallback rules, plus the Flows list and the import preview (kit pieces; only layout here). */
+export declare const FLOWS_CSS: string;
+/**
+ * Flows: the top bar (a project filter, More, New flow), then each flow as a quiet row under Needs you, Running,
+ * Turned on and Paused. Words come only from what the store knows now: cards waiting on a decision, cards in
+ * progress, and the triggers (on, paused, when they last looked and what they found).
+ */
+export declare function flowsListHtml(store: Store, flows: readonly FlowRow[], projects: readonly string[], canCreate: boolean, problem: string | null, filter?: string | null, now?: Date): Html;
+/** Reads the chosen flow file into the form (the server reads it again, whole, before anything is made), and sends a
+ * filter select's form when it changes. */
+export declare const FLOW_IMPORT_SCRIPT = "(function(){document.querySelectorAll('select[data-k-autosubmit]').forEach(function(s){s.addEventListener('change',function(){if(s.form)s.form.requestSubmit();});});var form=document.querySelector('[data-flow-import]');if(!form)return;var input=form.querySelector('[data-flow-file]'),text=form.querySelector('[data-flow-document]'),note=form.querySelector('[data-flow-file-note]'),named=form.querySelector('[data-flow-file-name]'),address=form.querySelector('[name=url]');function say(words){note.textContent=words;note.hidden=words==='';}var reading=null;input.addEventListener('change',function(){text.value='';say('');var file=input.files&&input.files[0];if(named)named.textContent=file?file.name:'No file chosen';if(!file){reading=null;return;}if(file.size>262144){say('That file is too big: a flow file is at most 256 KB.');input.value='';if(named)named.textContent='No file chosen';reading=null;return;}reading=file.text().then(function(value){text.value=value;});});form.addEventListener('submit',function(event){if(reading!==null&&text.value===''){event.preventDefault();reading.then(function(){form.requestSubmit();});return;}if(text.value===''&&address.value.trim()===''){event.preventDefault();say('Choose a flow file or give its address.');}});})();";
+/** An import's preview, a reading page: the plan in plain words, what it asks for, and one Import button after the terms. */
 export declare function flowImportHtml(input: {
     plan: FlowImportPlan | null;
     file: FlowFile;

package/dist/flows-ui.js

@@ -27,6 +27,8 @@ import { unattendedViewOf } from "./flow-unattended.js";
 import { browserViewOf } from "./flow-browser.js";
 import { readFlowSecrets } from "./flow-secrets.js";
 import { html, joinHtml, postForm } from "./html.js";
+import { acts, btn, chip, count, disclose, doc, docHeader, dock, empty, field, group, infoLine, input as input_, note, notice, overlay, overlayTrigger, pageHeader, phoneHeader, row, segLinks, select, status } from "./server/kit.js";
+import { agoWords } from "./lead-voice.js";
 const projectName = (repo) => repo.split(/[\\/]/).filter(Boolean).pop() ?? repo;
 /** v126: what happens to deliveries turned away (refused with 503), as far as each sender is known to say: nothing
  * here claims a loss that a sender's own retries may still make good. */
@@ -62,40 +64,149 @@ function hookView(trigger, config, dir) {
     return { ready, needsSecret: sender === "sentry" || sender === "vercel", sender, makesSecret: sender === "standard" || sender === "github-style", warning, readerNote: [readerNote, repeats].filter(one => one !== null).join(" ") || null, dropped,
         scope: sender === "sentry" || sender === "vercel" ? { project: config.project ?? null, team: config.team ?? null } : null };
 }
-export const FLOWS_CSS = `.flows{max-width:880px;min-width:0}.flows .card{padding:16px 18px;margin:12px 0}.flows .flow-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}.flows .flow-row h2{font-size:1.05rem;margin:0}.flows .flow-counts{font-size:.85rem;color:var(--so-muted)}.flows form{display:grid;gap:10px;margin:0}.flows label{display:grid;gap:6px}.flows input,.flows select{box-sizing:border-box;width:100%;max-width:100%}.flows button{justify-self:start;min-height:44px}.flows .flow-fallback ol{padding-left:20px}.flows summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}.flows .flow-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0}.flows .flow-import{margin-top:18px;padding-top:14px;border-top:1px solid var(--so-line)}.flows .flow-import h3{font-size:.95rem;margin:0}.flows .flow-terms{list-style:none;padding:0;margin:8px 0 16px;display:grid;gap:10px}.flows .flow-terms li{white-space:pre-line;overflow-wrap:anywhere}.flows .flow-terms pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8rem;margin:6px 0 0}.flows .flow-import-preview h2{font-size:1rem;margin:20px 0 4px}.flows .flow-untrusted{font-weight:600}.flows button.primary{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}.flows fieldset{border:0;padding:0;margin:0;display:grid;gap:10px;min-width:0}.flows legend{font-weight:600;padding:0;margin-bottom:6px}.flows textarea[hidden]{display:none}.flows button.secondary{background:transparent;color:var(--foreground);border:1px solid var(--border)}@media(max-width:600px){.flows input,.flows select{font-size:16px}}@media(max-width:760px){.flows .card{padding:10px 12px;margin:8px 0;position:relative}.flows .flow-row{row-gap:2px}.flows .flow-row h2 a::after{content:"";position:absolute;inset:0;border-radius:inherit}.flows .flow-counts{line-height:1.35}}`;
-/** The flows a person can open, with how many cards wait in each, and the new-flow form. */
-export function flowsListHtml(store, flows, projects, canCreate, problem) {
-    const rows = flows.map(flow => {
-        const cards = store.flowCards(flow.id, false);
-        const definition = flowDefinitionOf(flow);
-        const waiting = cards.filter(card => ["approval", "choose"].includes(definition?.stages.find(one => one.id === card.stage)?.kind ?? "")).length;
-        const buttons = store.flowTriggers(flow.id).filter(one => one.state === "active").flatMap(one => { const config = triggerConfigOf(one); return config?.kind === "button" ? [{ id: one.id, label: config.label }] : []; });
-        const trouble = troubleWords(flowInsights(store, flow, new Date(), 7)) ?? nightlyHealthOf(store, flow);
-        return html `<article class="card"><div class="flow-row"><h2><a href="/flows/${flow.id}">${flow.name}</a></h2><span class="flow-counts">${projectName(flow.repo)} · ${cards.length} card${cards.length === 1 ? "" : "s"} in progress${waiting > 0 ? ` · ${waiting} waiting for a decision` : ""}${trouble === null ? "" : ` · ${trouble}`}</span></div>${buttons.length > 0 && html `<p class="flow-buttons">${joinHtml(buttons.map(one => html `<a class="button-link" href="/flows/${flow.id}?start=${one.id}">${one.label}</a>`), " ")}</p>`}</article>`;
+/** The flow page's fallback rules, plus the Flows list and the import preview (kit pieces; only layout here). */
+export const FLOWS_CSS = `.flows{max-width:880px;min-width:0}.flows .card{padding:16px 18px;margin:12px 0}.flows form{display:grid;gap:10px;margin:0}.flows label{display:grid;gap:6px}.flows input,.flows select{box-sizing:border-box;width:100%;max-width:100%}.flows button{justify-self:start;min-height:44px}.flows .flow-fallback ol{padding-left:20px}.flows summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}.flows button.primary{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}.flows fieldset{border:0;padding:0;margin:0;display:grid;gap:10px;min-width:0}.flows legend{font-weight:600;padding:0;margin-bottom:6px}.flows textarea[hidden]{display:none}.flows button.secondary{background:transparent;color:var(--foreground);border:1px solid var(--border)}@media(max-width:600px){.flows input,.flows select{font-size:16px}}@media(max-width:760px){.flows .card{padding:10px 12px;margin:8px 0;position:relative}}` +
+    // The list: the phone's project bar under the phone header; notices and the example in the page's gutter.
+    `.fl-pbar{display:flex;gap:8px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--so-line)}.fl-pbar form{flex:1;display:flex;gap:8px;margin:0;min-width:0}.fl-pbar .k-selw{flex:1;min-width:0}` +
+    `.fl-say{padding:12px 24px 0}.fl-try{display:grid;gap:10px;justify-items:start;padding:0 24px 24px}.fl-try form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}` +
+    // The import drawer: the file chooser is a labelled outline button over the native input.
+    `.fl-imp{display:grid;gap:18px;margin:0}.fl-file{display:flex;align-items:center;gap:10px;min-width:0}.fl-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0}.fl-file label{cursor:pointer}.fl-file label:focus-within{outline:2px solid var(--so-ring);outline-offset:2px}.fl-file .k-note{min-width:0;overflow-wrap:anywhere}` +
+    `.fl-imp textarea[hidden]{display:none}.fl-terms{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:13px;line-height:1.5}.fl-terms li{white-space:pre-line;overflow-wrap:anywhere}` +
+    `.fl-terms pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0 0}.fl-pv-form{display:grid;gap:16px;margin:0}.fl-pv-form fieldset{border:0;padding:0;margin:0;display:grid;gap:14px;min-width:0}.fl-pv-form legend{font:600 13px/1.3 var(--so-font-sans);padding:0;margin-bottom:10px}` +
+    `@media(max-width:760px){.fl-say{padding:12px 16px 0}.fl-try{padding:0 16px 24px}.fl-file label{min-height:44px}}`;
+/** "in 12 min", "in 5 h", "in 3 days": when a trigger next looks. */
+function nextWords(at, now) {
+    const minutes = Math.max(0, Math.round((Date.parse(at) - now.getTime()) / 60_000));
+    if (!Number.isFinite(minutes) || minutes < 1)
+        return "now";
+    if (minutes < 60)
+        return `in ${minutes} min`;
+    const hours = Math.round(minutes / 60);
+    return hours < 24 ? `in ${hours} h` : `in ${Math.round(hours / 24)} day${Math.round(hours / 24) === 1 ? "" : "s"}`;
+}
+/** What starts a flow, in a few words: its active triggers, else the paused ones, else that cards are added by hand. */
+function triggerWords(store, triggers) {
+    const shown = triggers.filter(one => one.state === "active");
+    const pick = shown.length > 0 ? shown : triggers.filter(one => one.state === "paused");
+    const words = pick.flatMap(one => {
+        const config = triggerConfigOf(one);
+        if (config === null)
+            return [];
+        return [config.kind === "button" ? `When someone presses ${config.label}` : triggerHeadline(config, store).name];
     });
-    const projectField = projects.length === 1 ? html `<input type="hidden" name="repo" value="${projects[0]}">` : html `<label>Project<select name="repo">${projects.map(repo => html `<option value="${repo}">${projectName(repo)}</option>`)}</select></label>`;
-    // A flow file (flow-share.ts): chosen here or fetched from a gist, previewed in plain words before anything is made.
-    const importForm = postForm("/flows/import", html `<h3>Or import a flow file</h3>${projectField}<label>File<input type="file" accept=".json,application/json" data-flow-file></label><textarea name="document" hidden data-flow-document></textarea><label>Or its address<input name="url" type="url" inputmode="url" placeholder="https://gist.github.com/…"></label><p class="problem" role="alert" data-flow-file-note hidden></p><button>Preview import</button>`, { attrs: { class: "flow-import", "data-flow-import": true } });
-    // A new flow starts from the gallery (Flows → New): templates grouped by what they're for.
-    const create = canCreate && projects.length > 0 && html `<p class="flow-buttons"><a class="button-link" href="/flows/new">New flow</a></p>${importForm}`;
-    // No flows yet: one click makes a working example with a sample question in it.
-    const example = flows.length === 0 && canCreate && projects.length > 0
-        ? postForm("/flows/example", html `<h2>See a flow work</h2><p class="meta">Claude drafts a reply to a sample customer question; you approve it here or in your chat app.</p>${projectField}<button>Try an example</button>`, { attrs: { class: "card flow-example" } })
-        : null;
-    const intro = html `<p class="meta">A flow is your process drawn as zones. Cards move through them: agents do the work, people approve, and the team hears about it.</p>${canCreate && projects.length > 0 && html `<p class="flow-chat">Describe how work should move and your lead drafts the flow for you to confirm, or start from a template. <a href="/chat?draft=${encodeURIComponent("Make a flow for ")}">Describe it in chat</a></p>`}<p class="flow-chat">subagents can decide and handle cards for you, within rules you write. <a href="/settings/lead/subagents">Subagents</a> · or set one up with its flow in one click: <a href="/kits">Starter kits</a></p>`;
-    return html `<section class="flows">${problem !== null && html `<p class="problem" role="alert">${problem}</p>`}${intro}${create}${rows.length > 0 ? rows : example ?? html `<p class="meta">No flows yet.</p>`}</section>`;
+    if (words.length === 0)
+        return "Cards added by hand";
+    return words.length === 1 ? words[0] : `${words[0]} and ${words.length - 1} more`;
+}
+const FLOW_LIST_GROUPS = [["needs", "Needs you"], ["running", "Running"], ["on", "Turned on"], ["paused", "Paused"]];
+/** One flow as a quiet row: what the store knows now (cards waiting on a decision, cards in progress, its triggers). */
+function flowListRow(store, flow, now, options) {
+    const cards = store.flowCards(flow.id, false);
+    const definition = flowDefinitionOf(flow);
+    const kindOf = (card) => definition?.stages.find(one => one.id === card.stage)?.kind ?? "";
+    const waiting = cards.filter(card => ["approval", "choose"].includes(kindOf(card)));
+    const triggers = store.flowTriggers(flow.id).filter(one => one.state !== "removed");
+    const active = triggers.filter(one => one.state === "active");
+    const button = active.flatMap(one => { const config = triggerConfigOf(one); return config?.kind === "button" ? [{ id: one.id, label: config.label }] : []; })[0];
+    const trouble = troubleWords(flowInsights(store, flow, now, 7)) ?? nightlyHealthOf(store, flow);
+    const starts = triggerWords(store, triggers);
+    const next = active.map(one => one.nextAt).filter((one) => one !== null).sort()[0];
+    const meta = html `${options.showProject ? html `<span>${projectName(flow.repo)}</span>` : ""}${next !== undefined && active.length > 0 && waiting.length === 0 ? html `<span class="k-num">Next ${nextWords(next, now)}</span>` : ""}`;
+    const start = button !== undefined && options.canAct ? btn(button.label, { sm: true, href: `/flows/${flow.id}?start=${button.id}` }) : html ``;
+    const plural = (n, one) => `${n} ${one}${n === 1 ? "" : "s"}`;
+    const tail = trouble === null ? "" : ` · ${trouble}`;
+    if (waiting.length > 0) {
+        const first = waiting[0];
+        const ask = kindOf(first) === "choose" ? chip("Choose", "ask") : chip("Approve", "ask");
+        const said = waiting.length === 1 ? `${first.title} waits for your decision` : `${plural(waiting.length, "card")} wait for your decision`;
+        return { group: "needs", row: row({ href: `/flows/${flow.id}`, chip: ask, title: flow.name, desc: `${starts} · ${said}${tail}`, meta, wait: true,
+                action: btn("Review", { sm: true, href: `/flows/${flow.id}?card=${first.id}`, attrs: { "aria-label": `Review ${first.title}` } }), attrs: { "data-flow": flow.id } }) };
+    }
+    if (cards.length > 0) {
+        return { group: "running", row: row({ href: `/flows/${flow.id}`, chip: status("running"), title: flow.name, desc: `${starts} · ${plural(cards.length, "card")} in progress${tail}`, meta, action: start, attrs: { "data-flow": flow.id } }) };
+    }
+    if (active.length > 0) {
+        const failing = active.find(one => one.failures > 0);
+        const last = active.filter(one => one.lastAt !== null).sort((a, b) => (b.lastAt ?? "").localeCompare(a.lastAt ?? ""))[0];
+        const chipNow = failing !== undefined || trouble !== null ? status("failed") : last === undefined ? chip("Not run yet", "", { dot: false }) : status("finished");
+        const lastWords = failing !== undefined ? `last check failed ${agoWords(failing.lastAt ?? failing.updatedAt, now)}${failing.lastOutcome ? `: ${failing.lastOutcome}` : ""}`
+            : last === undefined ? "not run yet" : `last ran ${agoWords(last.lastAt, now)}${last.lastOutcome ? `: ${last.lastOutcome}` : ""}`;
+        return { group: "on", row: row({ href: `/flows/${flow.id}`, chip: chipNow, title: flow.name, desc: `${starts} · ${lastWords}${tail}`, meta, action: start, attrs: { "data-flow": flow.id } }) };
+    }
+    const paused = triggers.length > 0;
+    return { group: "paused", row: row({ href: `/flows/${flow.id}`, chip: chip(paused ? "Paused" : "Off", "", { dot: false }), title: flow.name,
+            desc: paused ? `${starts} · paused${tail}` : `${starts} · nothing starts it on its own${tail}`, meta, attrs: { "data-flow": flow.id } }) };
+}
+/** The project field of a list form: a select when there's a choice. */
+const projectSelect = (id, projects, current) => projects.length === 1
+    ? html `<input type="hidden" name="repo" value="${projects[0]}">`
+    : field({ id, label: "Project", control: select({ id, name: "repo", items: projects.map(repo => [repo, projectName(repo)]), current: current ?? projects[0], wide: true }) });
+/** The import form: a flow file chosen here or fetched from a gist, previewed in plain words before anything is made. */
+function importFormHtml(projects, current) {
+    return postForm("/flows/import", html `${note("A flow file from another Toolroll, a teammate or a gist. Nothing runs until you import it, and any script it brings waits for your approval.")}\
+${projectSelect("fl-imp-project", projects, current)}\
+<div class="k-field"><span class="k-label">File</span><div class="fl-file"><label class="k-btn k-btn-outline k-btn-sm"><input type="file" accept=".json,application/json" data-flow-file><span class="k-face">Choose a file</span></label><span class="k-note" data-flow-file-name>No file chosen</span></div></div>\
+<textarea name="document" hidden data-flow-document></textarea>\
+${field({ id: "fl-imp-url", label: "Or its address", control: input_({ id: "fl-imp-url", name: "url", type: "url", attrs: { inputmode: "url", placeholder: "https://gist.github.com/…" } }) })}\
+<p class="k-notice" role="alert" data-flow-file-note hidden></p>${acts(btn("Preview import", { type: "submit" }))}`, { attrs: { class: "fl-imp", "data-flow-import": true } });
+}
+/**
+ * Flows: the top bar (a project filter, More, New flow), then each flow as a quiet row under Needs you, Running,
+ * Turned on and Paused. Words come only from what the store knows now: cards waiting on a decision, cards in
+ * progress, and the triggers (on, paused, when they last looked and what they found).
+ */
+export function flowsListHtml(store, flows, projects, canCreate, problem, filter = null, now = new Date()) {
+    const scope = filter !== null && projects.includes(filter) ? filter : null;
+    const shown = scope === null ? flows : flows.filter(one => one.repo === scope);
+    const making = canCreate && projects.length > 0;
+    const href = (repo) => repo === null ? "/flows" : `/flows?project=${encodeURIComponent(repo)}`;
+    const seg = projects.length > 1 ? segLinks("Project", scope ?? "all", [{ key: "all", label: "All", href: "/flows" }, ...projects.map(repo => ({ key: repo, label: projectName(repo), href: href(repo) }))]) : html ``;
+    const more = (id, phone) => overlayTrigger("More", "fl-more", { variant: phone ? "outline" : "ghost", sm: !phone, iconOnly: "more", ...(id === "" ? {} : { attrs: { id } }) });
+    const create = making ? btn("New flow", { variant: "primary", sm: true, lead: "plus", href: "/flows/new" }) : html ``;
+    const header = pageHeader("Flows", { right: html `${seg}${more("", false)}${create}` });
+    // On a phone the filter is a select (the form posts nothing: it's an address), beside More.
+    const phoneBar = html `<div class="fl-pbar k-phone-only">${projects.length > 1 ? html `<form method="get" action="/flows">${select({ name: "project", label: "Project", items: [["", "All projects"], ...projects.map(repo => [repo, projectName(repo)])], current: scope ?? "", wide: true, attrs: { "data-k-autosubmit": "" } })}<noscript>${btn("Show", { sm: true, type: "submit" })}</noscript></form>` : html `<span class="k-grow"></span>`}${more("", true)}</div>`;
+    const menu = overlay({ id: "fl-more", kind: "menu", title: "More", body: html `${making ? html `<button type="button" data-k-open="fl-import" aria-haspopup="dialog" aria-controls="fl-import">Import a flow file…</button>` : ""}<a href="/flows/new?group=kits">Starter kits</a><a href="/settings/lead/subagents">Subagents</a>` });
+    const importDrawer = making ? overlay({ id: "fl-import", kind: "drawer", title: "Import a flow file", body: importFormHtml(projects, scope) }) : html ``;
+    const say = problem !== null ? html `<div class="fl-say">${notice(problem)}</div>` : html ``;
+    let body;
+    if (flows.length === 0) {
+        const example = making ? html `<div class="fl-try">${postForm("/flows/example", html `<span class="k-note">Or see one work: Claude drafts a reply to a sample customer question for you to approve.</span>${projects.length === 1 ? html `<input type="hidden" name="repo" value="${projects[0]}">` : select({ name: "repo", label: "Project", items: projects.map(repo => [repo, projectName(repo)]), sm: true })}${btn("Try an example", { sm: true, type: "submit" })}`)}</div>` : html ``;
+        const words = { title: "No flows yet.", text: "A flow repeats work for you: run your tests every night, turn labelled issues into pull requests, draft replies to support mail." };
+        body = html `${empty(making ? { ...words, action: acts(btn("Browse templates", { sm: true, href: "/flows/new" }), overlayTrigger("Import a flow file", "fl-import", { variant: "ghost", sm: true })) } : words)}${example}`;
+    }
+    else if (shown.length === 0) {
+        body = empty({ title: `No flows in ${projectName(scope)}.`, action: btn("Show all projects", { variant: "ghost", sm: true, href: "/flows" }) });
+    }
+    else {
+        const rows = shown.map(flow => flowListRow(store, flow, now, { canAct: canCreate, showProject: scope === null && projects.length > 1 }));
+        body = html `<div class="fl-rows" aria-label="Flows">${FLOW_LIST_GROUPS.map(([key, label]) => {
+            const mine = rows.filter(one => one.group === key);
+            return mine.length === 0 ? "" : html `${group(label, count(mine.length))}${mine.map(one => one.row)}`;
+        })}</div>`;
+    }
+    return html `<div class="fl-page" data-kit-page>${header}${phoneBar}${say}${body}${menu}${importDrawer}${making ? dock(btn("New flow", { variant: "primary", lead: "plus", href: "/flows/new" })) : ""}</div>`;
 }
-/** Reads the chosen flow file into the form (the server reads it again, whole, before anything is made). */
-export const FLOW_IMPORT_SCRIPT = `(function(){var form=document.querySelector('[data-flow-import]');if(!form)return;var input=form.querySelector('[data-flow-file]'),text=form.querySelector('[data-flow-document]'),note=form.querySelector('[data-flow-file-note]'),address=form.querySelector('[name=url]');function say(words){note.textContent=words;note.hidden=words==='';}var reading=null;input.addEventListener('change',function(){text.value='';say('');var file=input.files&&input.files[0];if(!file){reading=null;return;}if(file.size>${FLOW_FILE_MAX_BYTES}){say('That file is too big: a flow file is at most ${FLOW_FILE_MAX_BYTES / 1024} KB.');input.value='';reading=null;return;}reading=file.text().then(function(value){text.value=value;});});form.addEventListener('submit',function(event){if(reading!==null&&text.value===''){event.preventDefault();reading.then(function(){form.requestSubmit();});return;}if(text.value===''&&address.value.trim()===''){event.preventDefault();say('Choose a flow file or give its address.');}});})();`;
-/** An import's preview: the plan in plain words, what it asks for, and one Import button after the terms. */
+/** Reads the chosen flow file into the form (the server reads it again, whole, before anything is made), and sends a
+ * filter select's form when it changes. */
+export const FLOW_IMPORT_SCRIPT = `(function(){document.querySelectorAll('select[data-k-autosubmit]').forEach(function(s){s.addEventListener('change',function(){if(s.form)s.form.requestSubmit();});});var form=document.querySelector('[data-flow-import]');if(!form)return;var input=form.querySelector('[data-flow-file]'),text=form.querySelector('[data-flow-document]'),note=form.querySelector('[data-flow-file-note]'),named=form.querySelector('[data-flow-file-name]'),address=form.querySelector('[name=url]');function say(words){note.textContent=words;note.hidden=words==='';}var reading=null;input.addEventListener('change',function(){text.value='';say('');var file=input.files&&input.files[0];if(named)named.textContent=file?file.name:'No file chosen';if(!file){reading=null;return;}if(file.size>${FLOW_FILE_MAX_BYTES}){say('That file is too big: a flow file is at most ${FLOW_FILE_MAX_BYTES / 1024} KB.');input.value='';if(named)named.textContent='No file chosen';reading=null;return;}reading=file.text().then(function(value){text.value=value;});});form.addEventListener('submit',function(event){if(reading!==null&&text.value===''){event.preventDefault();reading.then(function(){form.requestSubmit();});return;}if(text.value===''&&address.value.trim()===''){event.preventDefault();say('Choose a flow file or give its address.');}});})();`;
+/** An import's preview, a reading page: the plan in plain words, what it asks for, and one Import button after the terms. */
 export function flowImportHtml(input) {
     const { plan, file } = input;
-    const fields = file.parameters.map(one => html `<label><span>${one.about}${one.optional === true && html ` <span class="meta">(optional)</span>`}</span><input name="param.${one.id}" value="${input.values[one.id] ?? plan?.values[one.id] ?? one.default ?? ""}" maxlength="200" autocomplete="off"></label>`);
-    const list = (items) => items.length === 0 ? "" : html `<ul class="flow-terms">${items.map(term => html `<li>${term}</li>`)}</ul>`;
+    const fields = file.parameters.map((one, index) => field({ id: `fl-param-${index}`, label: one.optional === true ? `${one.about} (optional)` : one.about,
+        control: input_({ id: `fl-param-${index}`, name: `param.${one.id}`, value: input.values[one.id] ?? plan?.values[one.id] ?? one.default ?? "", attrs: { maxlength: 200, autocomplete: "off" } }) }));
+    const list = (items) => items.length === 0 ? "" : html `<ul class="fl-terms">${items.map(term => html `<li>${term}</li>`)}</ul>`;
+    const section = (title, body) => html `<section class="k-sec"><h3>${title}</h3>${body}</section>`;
     // The steps, what they mean, the triggers and the scripts; each script's code one tap away, as on the Scripts panel.
-    const terms = plan === null ? "" : html `${plan.parts.about !== null && html `<p>${plan.parts.about}</p>`}<p class="flow-untrusted">Its instructions come from the file, not from you: read what each step is asked before you import.</p>${list(plan.parts.steps)}${plan.parts.triggers.length > 0 && html `<h2>Triggers</h2>${list(plan.parts.triggers)}`}${plan.parts.scripts.length + plan.parts.kept.length > 0 && html `<h2>Scripts</h2><ul class="flow-terms">${plan.scripts.add.map((one, index) => html `<li>${plan.parts.scripts[index]}${one.body !== undefined && html `<details><summary>Show the script</summary><pre>${one.body}</pre></details>`}</li>`)}${plan.parts.kept.map(one => html `<li>${one}</li>`)}</ul>`}<h2>Good to know</h2>${list([...plan.parts.notes, ...(plan.parts.needs === null ? [] : [plan.parts.needs])])}`;
-    const form = postForm("/flows/import", html `<textarea name="document" hidden>${input.document}</textarea>${fields.length > 0 && html `<fieldset class="flow-import-fields"><legend>Fill in</legend>${fields}</fieldset>`}<p class="flow-buttons">${plan !== null && html `<button name="confirm" value="yes" class="primary">Import flow</button>`}${fields.length > 0 && html `<button name="confirm" value="" class="${plan === null ? "" : "secondary"}">Update preview</button>`}<a href="/flows">Cancel</a></p>`, { attrs: { class: "card" }, hidden: { repo: input.repo, previewed: input.previewed } });
-    return html `<section class="flows flow-import-preview">${input.problem !== null && html `<p class="problem" role="alert">${input.problem}</p>`}<p class="meta">Into ${projectName(input.repo)}. Nothing is made until you import it.</p>${terms}${form}</section>`;
+    const terms = plan === null ? "" : html `${plan.parts.about !== null && html `<p class="k-note">${plan.parts.about}</p>`}\
+${section("Steps", html `${infoLine("Its instructions come from the file, not from you: read what each step is asked before you import.")}${list(plan.parts.steps)}`)}\
+${plan.parts.triggers.length > 0 && section("Triggers", list(plan.parts.triggers))}\
+${plan.parts.scripts.length + plan.parts.kept.length > 0 && section("Scripts", html `<ul class="fl-terms">${plan.scripts.add.map((one, index) => html `<li>${plan.parts.scripts[index]}${one.body !== undefined && disclose("Show the script", html `<pre class="k-mono">${one.body}</pre>`)}</li>`)}${plan.parts.kept.map(one => html `<li>${one}</li>`)}</ul>`)}\
+${section("Good to know", list([...plan.parts.notes, ...(plan.parts.needs === null ? [] : [plan.parts.needs])]))}`;
+    const importButton = plan !== null ? btn("Import flow", { variant: "primary", type: "submit", docked: true, attrs: { name: "confirm", value: "yes" } }) : html ``;
+    const form = postForm("/flows/import", html `<textarea name="document" hidden>${input.document}</textarea>${fields.length > 0 && html `<fieldset><legend>Fill in</legend>${fields}</fieldset>`}\
+${acts(importButton, fields.length > 0 ? btn(plan === null ? "Preview" : "Update preview", { variant: plan === null ? "primary" : "outline", type: "submit", attrs: { name: "confirm", value: "" } }) : "", btn("Cancel", { variant: "ghost", href: "/flows" }))}`, { attrs: { class: "fl-pv-form", id: "fl-pv-form" }, hidden: { repo: input.repo, previewed: input.previewed } });
+    return html `<div class="fl-page" data-kit-page>${phoneHeader(`Import ${file.name}`, { back: "/flows" })}${doc(docHeader({ title: `Import ${file.name}`, back: ["/flows", "Flows"], meta: `Into ${projectName(input.repo)}. Nothing is made until you import it.`, same: true }), input.problem !== null ? notice(input.problem) : "", terms, form)}${plan !== null ? dock(btn("Import flow", { variant: "primary", type: "submit", attrs: { form: "fl-pv-form", name: "confirm", value: "yes" } })) : ""}</div>`;
 }
 const historyText = (event, title, sorts = new Set()) => {
     const who = event.actor === "flow" ? "" : ` by ${event.actor}`;
@@ -260,7 +371,7 @@ export function flowView(store, flow, viewer, selectedCard, setup = { dir: null,
         requestSecrets: flowSecretNames(setup.dir, flow.repo),
         tools: projectToolsOf(store, flow.repo).map(tool => ({ name: tool.name, about: tool.spec.about, functions: tool.lastTest?.ok === true ? tool.lastTest.tools : [],
             ready: toolStanding(tool, secretsSetFor(flow.repo, tool.spec, setup.toolHome)).ready })),
-        scripts: store.flowScripts(flow.repo).map(script => ({ name: script.name, about: script.about, body: script.body, timeoutMinutes: script.timeoutMinutes, version: script.version, savedBy: script.savedBy, savedAt: script.savedAt,
+        scripts: store.flowScripts(flow.repo).map(script => ({ name: script.name, about: script.about, body: script.body, timeoutMinutes: script.timeoutMinutes, version: script.version, digest: script.digest, savedBy: script.savedBy, savedAt: script.savedAt,
             language: script.language, file: script.file, held: script.held !== null,
             usedHere: stages.filter(stage => stage.kind === "check" && stage.script === script.name).map(stage => stage.title) })),
         start: definition?.start ?? stages[0]?.id ?? "",

package/dist/integrations-ui.d.ts

@@ -1,13 +1,15 @@
 /**
- * Settings → Integrations: which integrations work. One row each: its name
+ * Settings → Integrations: which integrations work. One record each: its name
  * and state, the account it's connected as, when it last worked and last
  * failed, what uses it, and one action. The list comes from saved checks; a
- * render never waits on one (see integrations.ts).
+ * render never waits on one (see integrations.ts). Built from the revamp kit;
+ * the Settings frame adds the title.
  */
 import { type Html } from "./html.js";
 import { type Integration, type SecretsKept } from "./integrations.js";
-export declare const INTEGRATIONS_CSS: string;
-export declare function integrationsHtml(list: readonly Integration[], csrf: string, notice: {
+/** The page is kit pieces now; nothing of the old look is left. Kept as an export for the shared stylesheet. */
+export declare const INTEGRATIONS_CSS = "";
+export declare function integrationsHtml(list: readonly Integration[], csrf: string, said: {
     said?: string | null;
     problem?: string | null;
     checking?: boolean;

package/dist/integrations-ui.js

@@ -1,46 +1,35 @@
 /**
- * Settings → Integrations: which integrations work. One row each: its name
+ * Settings → Integrations: which integrations work. One record each: its name
  * and state, the account it's connected as, when it last worked and last
  * failed, what uses it, and one action. The list comes from saved checks; a
- * render never waits on one (see integrations.ts).
+ * render never waits on one (see integrations.ts). Built from the revamp kit;
+ * the Settings frame adds the title.
  */
 import { html, joinHtml, postForm } from "./html.js";
 import { STATE_WORDS, secretsNote } from "./integrations.js";
 import { whenUtc } from "./when-html.js";
 import { brandMarkHtml } from "./brand-mark.js";
+import { btn, chip, disclose, infoLine, note, notice, settingsRecord, settingsSection } from "./server/kit.js";
 const when = (at) => whenUtc(at);
-export const INTEGRATIONS_CSS = `.integrations{max-width:760px;min-width:0}.integrations h2{margin:24px 0 6px;font-size:.9375rem}` +
-    `.integrations .integration{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:start;padding:12px 0;border-top:1px solid var(--so-line);min-width:0}` +
-    `.integrations .integration>:not(.integration-action),.integrations .integration-body>*{grid-column:1}.integrations .integration-body{display:contents}.integrations .integration:first-of-type{border-top:0}.integrations .integration-head{margin:0;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;min-width:0}` +
-    `.integrations .integration .integration-body>*{margin-left:calc(var(--brand-mark) + 10px)}.integrations .integration-head strong{overflow-wrap:anywhere}.integrations .integration p{margin:2px 0 0;min-width:0;overflow-wrap:anywhere}` +
-    `.integrations .integration-action{grid-column:2;grid-row:1 / span 3;align-self:center;margin:0}.integrations .integration-action button,.integrations .integration-action .button-link{min-height:44px;white-space:nowrap}` +
-    `.integrations .integration .integration-action button{width:auto}.integrations .integration .integration-action a.integration-quiet,.integrations .integration .integration-action button.integration-quiet{background:var(--so-paper);color:var(--so-ink);border:1px solid var(--so-input-line)}` +
-    `.integrations .integration-fix{color:var(--so-danger)}.integrations code{overflow-wrap:anywhere}.integrations details{margin-top:4px;font-size:.8125rem}.integrations summary{cursor:pointer;padding:4px 0}` +
-    `.integration-state{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:500;padding:0 8px;border-radius:5px;line-height:20px;white-space:nowrap}` +
-    `.integration-state i{width:6px;height:6px;border-radius:50%;background:currentColor}` +
-    `.integration-state--connected{color:var(--so-success);background:var(--so-success-soft)}.integration-state--broken{color:var(--so-danger);background:var(--so-danger-soft)}` +
-    `.integration-state--not-set-up,.integration-state--checking{color:var(--so-muted);background:var(--so-neutral-soft)}` +
-    // A phone: the action sits at the right of the name line, and the facts under it run on as one line.
-    `@media (max-width:760px){.integrations h2{margin:16px 0 0}.integrations .integration{gap:0 12px;padding:6px 0 8px}.integrations .integration-head{min-height:44px}` +
-    `.integrations .integration-action{grid-row:1;align-self:center}.integrations .integration-body{display:block;grid-column:1 / -1;line-height:1.35;padding-left:calc(var(--brand-mark) + 10px)}.integrations .integration .integration-body>*{margin-left:0}` +
-    `.integrations .integration-body>p{margin:0}.integrations .integration-body>p.meta{display:inline}.integrations .integration-body>p.meta+p.meta::before{content:" · "}` +
-    `.integrations .integration-body>:not(.meta){margin-top:4px}.integrations .integration-body>:not(.meta)+p.meta{display:block;margin-top:2px}.integrations details{margin-top:2px}}`;
+/** The page is kit pieces now; nothing of the old look is left. Kept as an export for the shared stylesheet. */
+export const INTEGRATIONS_CSS = "";
 const GROUPS = [
     ["chat", "Chat"], ["code", "Code and issues"], ["mail", "Email"], ["tools", "MCP tools"], ["monitoring", "Monitoring"], ["agents", "Agents"],
 ];
 function action(one, csrf) {
     const a = one.action;
+    // One harmless read-only check of this integration, now (the handler sends nothing).
     if (a.kind === "test") {
-        return csrf === "" ? "" : postForm("/settings/integrations/test", html `<button type="submit">Send test</button>`, { attrs: { class: "integration-action" }, hidden: { key: one.key } });
+        return csrf === "" ? "" : postForm("/settings/integrations/test", btn("Check connection", { sm: true, type: "submit" }), { hidden: { key: one.key } });
     }
     // A project's youiyoux requests: one switch for that project.
     if (a.kind === "switch") {
-        return csrf === "" ? "" : postForm("/settings/integrations/youiyoux", html `<button type="submit"${a.on ? "" : html ` class="integration-quiet"`}>${a.label}</button>`, { attrs: { class: "integration-action" }, hidden: { repo: a.repo, on: a.on ? "1" : "0" } });
+        return csrf === "" ? "" : postForm("/settings/integrations/youiyoux", btn(a.label, { sm: true, type: "submit" }), { hidden: { repo: a.repo, on: a.on ? "1" : "0" } });
     }
     // A command is run where Toolroll runs; a page is linked. Fix and Set up both say which.
-    // Fix is the one filled action on the page; Set up stays quiet so a list of unused services doesn't shout.
+    // Fix is the louder of the two; Set up stays quiet so a list of unused services doesn't shout.
     if (a.href !== null)
-        return html `<p class="integration-action"><a class="button-link${a.kind === "setup" ? " integration-quiet" : ""}" href="${a.href}">${a.label}</a></p>`;
+        return btn(a.label, { sm: true, href: a.href, variant: a.kind === "setup" ? "ghost" : "outline" });
     return "";
 }
 /** Which mark a row shows: email is Gmail's only when the account is a Gmail address; a custom tool is a letter. */
@@ -49,33 +38,38 @@ function markFor(one) {
         return null;
     return one.key === "email" && /@(gmail|googlemail)\.com$/i.test(one.account ?? "") ? "gmail" : one.key;
 }
+/** Its state as one of the kit's status chips: working, broken, not set up, or still being checked. */
+function stateChip(one) {
+    if (!one.checked && one.state === "connected")
+        return chip("Checking", "live");
+    return chip(STATE_WORDS[one.state], one.state === "connected" ? "done" : one.state === "broken" ? "failed" : "");
+}
 function row(one, csrf) {
-    const badge = !one.checked && one.state === "connected"
-        ? html `<span class="integration-state integration-state--checking"><i aria-hidden="true"></i>Checking</span>`
-        : html `<span class="integration-state integration-state--${one.state}"><i aria-hidden="true"></i>${STATE_WORDS[one.state]}</span>`;
     const facts = [one.account, one.detail, one.credentials].filter(Boolean).join(" · ");
     const command = one.action.kind === "setup" || one.action.kind === "fix" ? one.action.command : null;
     const words = one.action.kind === "fix" || one.action.kind === "switch" ? one.action.words : null;
-    const fix = words !== null ? html `<p class="integration-fix" role="status">${words}</p>` : "";
-    const run = command === null || (one.action.kind === "fix" && one.action.words.includes(command)) ? "" : html `<p class="meta">Run <code>${command}</code> on the computer running Toolroll.</p>`;
+    const fix = words !== null ? notice(words) : "";
+    const run = command === null || (one.action.kind === "fix" && one.action.words.includes(command)) ? "" : note(html `Run <code class="k-mono">${command}</code> on the computer running Toolroll.`);
     const seen = [one.lastSuccessAt === null ? null : html `Last success ${when(one.lastSuccessAt)}`, one.usedBy.length === 0 ? null : html `Used by ${one.usedBy.join(", ")}`].filter(Boolean);
-    const history = one.state === "not-set-up" || seen.length === 0 ? "" : html `<p class="meta">${joinHtml(seen, " · ")}</p>`;
+    const history = one.state === "not-set-up" || seen.length === 0 ? "" : note(joinHtml(seen, " · "));
     const lastError = one.lastError === null || one.state === "not-set-up" ? "" : one.state === "broken" && words === one.lastError
-        ? html `<p class="meta">Failed ${when(one.lastErrorAt ?? "")}</p>`
-        : html `<details><summary>Last error ${one.lastErrorAt === null ? "" : when(one.lastErrorAt)}</summary><p class="meta">${one.lastError}</p></details>`;
-    return html `<div class="integration" data-integration="${one.key}" data-state="${one.state}"><p class="integration-head">${brandMarkHtml(markFor(one), one.name, one.state === "connected")}<strong>${one.name}</strong> ${badge}</p>${action(one, csrf)}<div class="integration-body">${facts === "" ? "" : html `<p class="meta">${facts}</p>`}${fix}${run}${history}${lastError}</div></div>`;
+        ? note(html `Failed ${when(one.lastErrorAt ?? "")}`)
+        : disclose(`Last error${one.lastErrorAt === null ? "" : ` ${one.lastErrorAt.slice(0, 16).replace("T", " ")} UTC`}`, note(one.lastError));
+    const more = joinHtml([fix, run, history, lastError]);
+    return settingsRecord({ title: html `${brandMarkHtml(markFor(one), one.name, one.state === "connected")}<span>${one.name}</span> ${stateChip(one)}`,
+        sub: facts, action: action(one, csrf), attrs: { "data-integration": one.key, "data-state": one.state }, more });
 }
-export function integrationsHtml(list, csrf, notice) {
-    const note = notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : notice.said ? html `<p role="status">${notice.said}</p>` : "";
+export function integrationsHtml(list, csrf, said) {
+    const answer = said.problem ? notice(said.problem) : said.said ? infoLine(said.said) : "";
     const broken = list.filter(one => one.state === "broken").length;
-    const summary = broken > 0 ? html `<p><strong>${broken} need${broken === 1 ? "s" : ""} fixing.</strong></p>`
-        : notice.checking || list.some(one => !one.checked) ? html `<p class="meta" role="status">Checking in the background. Refresh in a few seconds.</p>` : "";
+    const summary = broken > 0 ? html `<p class="k-note"><b>${broken} need${broken === 1 ? "s" : ""} fixing.</b></p>`
+        : said.checking || list.some(one => !one.checked) ? html `<p class="k-note" role="status">Checking in the background. Refresh in a few seconds.</p>` : "";
+    // No keychain here, or Toolroll's folder for secrets can't be used: said once, plainly.
+    const kept = secretsNote(list, said.secrets);
+    const secrets = kept === null ? "" : kept.problem ? notice(kept.words) : html `<p class="k-note" role="note">${kept.words}</p>`;
     const sections = GROUPS.map(([group, title]) => {
         const rows = list.filter(one => one.group === group);
-        return rows.length === 0 ? "" : html `<h2>${title}</h2>${rows.map(one => row(one, csrf))}`;
+        return rows.length === 0 ? "" : settingsSection({ id: `integrations-${group}`, title, body: joinHtml(rows.map(one => row(one, csrf))) });
     });
-    // No keychain here, or Toolroll's folder for secrets can't be used: said once, plainly.
-    const said = secretsNote(list, notice.secrets);
-    const kept = said === null ? "" : said.problem ? html `<p class="problem integration-secrets" role="alert">${said.words}</p>` : html `<p class="meta integration-secrets" role="note">${said.words}</p>`;
-    return html `<section class="integrations">${note}${summary}${kept}${sections}</section>`;
+    return joinHtml([answer, summary, secrets, ...sections]);
 }

package/dist/integrations.d.ts

@@ -13,7 +13,7 @@ export type IntegrationAction = ({
     label: "Set up";
 } & IntegrationPlace) | {
     kind: "test";
-    label: "Send test";
+    label: "Check connection";
 } | ({
     kind: "fix";
     label: "Fix";
@@ -124,7 +124,7 @@ export declare function renderIntegrations(list: readonly Integration[], secrets
 export type IntegrationMonitor = {
     /** The list now, from the last answers saved. It only reads: a page calls it on every render (docs/plans/get-side-effects.md). */
     list(): Integration[];
-    /** Check now and wait (Send test, Check now, or the first answer in a test). */
+    /** Check now and wait (Check connection, Check now, or the first answer in a test). */
     check(keys?: readonly string[]): Promise<Integration[]>;
     /** The background pass: start a check when the last one is older than the cache. Never called from a page. */
     refreshIfDue(): void;