toolroll 0.9.85 → 0.9.87

package/dist/flows-ui.js

@@ -24,8 +24,11 @@ import { callWords, receiptWords } from "./subagent-tools.js";
 import { undoFor } from "./subagent-week.js";
 import { flowCardTaskLine } from "./flow-card-task.js";
 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. */
@@ -61,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}`;
@@ -114,6 +226,8 @@ const historyText = (event, title, sorts = new Set()) => {
 export function flowView(store, flow, viewer, selectedCard, setup = { dir: null, repos: [] }) {
     const definition = flowDefinitionOf(flow);
     const stages = definition?.stages ?? [];
+    const browserNow = browserViewOf(store, flow);
+    const browser = browserNow === null ? null : { ...browserNow, canApprove: viewer.approver && store.accountOf(viewer.name)?.projects === null };
     const title = (id) => stages.find(one => one.id === id)?.title ?? id;
     const sortZones = new Set(stages.filter(one => one.kind === "sort").map(one => one.id));
     const decisions = sortZones.size === 0 ? new Map() : store.flowSortDecisions(flow.id);
@@ -179,10 +293,15 @@ export function flowView(store, flow, viewer, selectedCard, setup = { dir: null,
             // After research: the same numbered items the message carried, each beside its screenshot.
             ...(content.items === undefined ? {} : { items: content.items.map((item, index) => ({ number: index + 1, title: item.title, lines: whyLines(item.why), source: item.source, url: item.url,
                     image: item.shot === null || content.shots === null ? null : { src: `/r/${content.shots.run}/evidence/${item.shot}`, caption: itemCaption(index + 1, item) } })) }) });
+        const browserWait = card.state === "active" && stage?.kind === "check" && stage.browser === true && browser !== null && browser.status !== "allowed"
+            && card.waiting !== null && card.waiting.startsWith(`${stage.title} starts a browser`);
         return {
             id: card.id, title: card.title, description: card.description, stage: card.stage, state: card.state,
             waiting: card.state === "active" && card.task !== null && (stage?.kind === "task" || stage?.kind === "report")
-                ? canReadTask ? flowCardTaskLine(store, card.task, taskRepo, now, secretsFor(taskRepo)) : "Task unavailable" : card.waiting,
+                ? canReadTask ? flowCardTaskLine(store, card.task, taskRepo, now, secretsFor(taskRepo)) : "Task unavailable"
+                // Waiting for browser use: the page offers Allow browser itself, so the command line the CLI shows is left off.
+                : browserWait ? card.waiting.replace(/ Approve it with: toolroll flows browser \d+ on$/, "") : card.waiting,
+            ...(browserWait ? { browserWait: true } : {}),
             task: task === null ? null : { id: task, href: `/t/${encodeURIComponent(task)}`,
                 // Its running attempt's composer, for an approver who may read the task (steer-controls.ts).
                 ...(() => {
@@ -252,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 ?? "",
@@ -262,6 +381,7 @@ export function flowView(store, flow, viewer, selectedCard, setup = { dir: null,
         live: flowFingerprint(store, flow.id),
         canEdit: viewer.approver,
         unattended: unattendedViewOf(store, flow, viewer, setup.now ?? now),
+        browser,
         approvers: store.listApprovers().map(one => one.name).filter(name => store.accountCanAccess(name, flow.repo)),
         projects: [flow.repo, ...setup.repos.filter(one => one !== flow.repo)].map(path => ({ path, name: projectName(path) })),
         kinds: FLOW_STAGE_KINDS.map(kind => ({ kind, label: FLOW_KIND_WORDS[kind].label, about: FLOW_KIND_WORDS[kind].about })),
@@ -271,7 +391,7 @@ export function flowView(store, flow, viewer, selectedCard, setup = { dir: null,
 /** The page the canvas replaces when scripts can't run: each zone and its cards, in order. */
 export function flowFallbackHtml(view) {
     const own = view.unattended.active;
-    return html `<section class="flows flow-fallback"><p class="meta">${view.flow.project}</p>${own !== null && html `<p data-flow-unattended>Runs on its own until ${own.untilWords}</p>`}<ol>${view.stages.map(stage => {
+    return html `<section class="flows flow-fallback"><p class="meta">${view.flow.project}</p>${own !== null && html `<p data-flow-unattended>Runs on its own until ${own.untilWords}</p>`}${view.browser !== null && html `<p data-flow-browser="${view.browser.status}">${view.browser.words}</p>`}<ol>${view.stages.map(stage => {
         const cards = view.cards.filter(card => card.stage === stage.id && card.state === "active");
         return html `<li><strong>${stage.title}</strong> · ${FLOW_KIND_WORDS[stage.kind].label}${cards.length > 0 && html `<ul>${cards.map(card => html `<li>${card.title}${card.waiting !== null && ` — ${card.waiting}`}</li>`)}</ul>`}</li>`;
     })}</ol></section>`;

package/dist/flows.js

@@ -224,7 +224,9 @@ function canonicalStage(input, index) {
         close: kind === "update" ? stage["close"] !== false : null,
         script: kind === "check" ? said(stage["script"]) : null,
         // Left out, a script runs where every script ran before v90: in a copy of the card's work.
-        ...(kind === "check" ? { ...(runIn === undefined ? {} : { runIn }), ...(routes === undefined ? {} : { routes }), ...(secrets === undefined ? {} : { secrets }) } : {}),
+        ...(kind === "check" ? { ...(runIn === undefined ? {} : { runIn }), ...(routes === undefined ? {} : { routes }), ...(secrets === undefined ? {} : { secrets }),
+            // v144: a script that starts a browser says so; false or none is a script that doesn't (and keeps its digest).
+            ...(!given(stage["browser"]) || stage["browser"] === false ? {} : { browser: stage["browser"] }) } : {}),
         sort: kind === "sort" ? canonicalSort(stage["sort"]) : null,
         ...(kind === "request" ? { request: { method, url: said(request["url"]), headers: Object.fromEntries(Object.entries(isRecord(request["headers"]) ? request["headers"] : {}).flatMap(([name, value]) => { const one = said(value); return one === null ? [] : [[name, one]]; })), body: method === "GET" || method === "DELETE" ? null : said(request["body"]) } } : {}),
         ...(kind === "email" ? { email: { to: said(email["to"]), subject: said(email["subject"]), body: said(email["body"]) } } : {}),
@@ -732,6 +734,7 @@ export function flowFromSteps(input, previous = null) {
                 ...(step.runIn !== undefined ? { runIn: step.runIn } : old?.runIn === undefined ? {} : { runIn: old.runIn }),
                 ...(step.routes !== undefined ? routesOf(step.routes) : old?.routes === undefined ? {} : { routes: old.routes }),
                 ...(step.secrets !== undefined ? step.secrets.length === 0 ? {} : { secrets: step.secrets } : old?.secrets === undefined ? {} : { secrets: old.secrets }),
+                ...((step.browser ?? old?.browser) === true ? { browser: true } : {}),
             } : {}),
             sort: kind === "sort" ? sortFromStep(step, old?.sort ?? null, find) : null,
             ...(kind === "request" ? { request: { method: step.method ?? old?.request?.method ?? "POST", url: step.url ?? old?.request?.url ?? "", headers: step.headers ?? old?.request?.headers ?? {}, body: step.body ?? old?.request?.body ?? null } } : {}),
@@ -912,7 +915,7 @@ export function flowTerms(definition, previous) {
             lines.push("Opens a pull request for the card's built result, then waits for CI.", `Checks pass → ${stage.merge === undefined ? to(stage.next) : `merges it (${stage.merge}) and deletes its branch, only when a person approved it${approval === undefined ? "" : ` at ${approval.title}`} since it was built. Then → ${to(stage.next)}`}`, `Checks fail → ${stage.onFail === null ? "waits there, naming the failing check." : `${to(stage.onFail)} The failing check is named on the card.`}`);
         }
         else if (stage.kind === "check")
-            lines.push(`Runs the project's script “${stage.script}” with no AI.`, `Passes → ${to(stage.next)}${stage.onFail === null ? " Fails → waits there." : ` Fails → ${to(stage.onFail)}`}`);
+            lines.push(`Runs the project's script “${stage.script}” with no AI.`, ...(stage.browser === true ? ["Starts a browser (Playwright's Chromium): it runs only once a person approves browser use for this flow."] : []), `Passes → ${to(stage.next)}${stage.onFail === null ? " Fails → waits there." : ` Fails → ${to(stage.onFail)}`}`);
         else if (stage.kind === "wait" && stage.wait !== undefined)
             lines.push(stage.wait.for === "hours" ? `Waits until it's between ${stage.wait.from} and ${stage.wait.to}${stage.wait.timeZone === undefined ? "" : ` (${stage.wait.timeZone})`}; cards that arrive then go straight on. Then → ${to(stage.next)}`
                 : stage.wait.for === "time" ? `Waits ${durationWords(stage.wait.minutes)}. Then → ${to(stage.next)}`

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;

package/dist/integrations.js

@@ -327,7 +327,7 @@ function targets(io) {
     const list = [];
     list.push({
         key: "telegram", group: "chat", name: "Telegram", configured: telegram !== null, account: null,
-        setup: place("/settings#telegram-token"), fix: place("/settings#telegram-token"), usedBy: chatUses("telegram"), activity: telegramActivity(store),
+        setup: place("/settings/alerts#telegram-token"), fix: place("/settings/alerts#telegram-token"), usedBy: chatUses("telegram"), activity: telegramActivity(store),
         probe: telegram === null ? null : check => probeTelegram(check, telegram.token),
     });
     list.push({
@@ -371,7 +371,7 @@ function targets(io) {
         : { okAt: str(mailWatch["updated_at"]), error: null, errorAt: null, failing: false };
     list.push({
         key: "email", group: "mail", name: "Email", configured: email !== null || google !== null, account: email?.from ?? google?.address ?? null,
-        setup: place("/settings#email"), fix: place("/settings#email"), usedBy: [...flowWords(emailUses)], activity: merge(triggerActivity(emailUses), watchActivity),
+        setup: place("/settings/alerts#email"), fix: place("/settings/alerts#email"), usedBy: [...flowWords(emailUses)], activity: merge(triggerActivity(emailUses), watchActivity),
         probe: email === null ? null : check => probeEmail(check, { host: email.host, port: email.port, secure: email.secure }, email.imap),
     });
     // Each project's MCP tools: the server starts and lists its tools.
@@ -432,7 +432,7 @@ function targets(io) {
     for (const provider of AGENTS) {
         list.push({
             key: `agent:${provider}`, group: "agents", name: providerName(provider), configured: true, account: null,
-            setup: place("/settings#providers"), fix: place("/settings#providers"), usedBy: ["Tasks"], activity: NO_ACTIVITY,
+            setup: place("/settings/agents#providers"), fix: place("/settings/agents#providers"), usedBy: ["Tasks"], activity: NO_ACTIVITY,
             probe: check => probeAgent(check, provider),
         });
     }
@@ -458,7 +458,7 @@ function combine(target, row) {
     if (failing !== null) {
         return { ...base, ...common, state: "broken", action: { kind: "fix", label: "Fix", words: scrubIntegrationText(failing ?? "The last check failed."), ...target.fix } };
     }
-    return { ...base, ...common, state: "connected", action: { kind: "test", label: "Send test" } };
+    return { ...base, ...common, state: "connected", action: { kind: "test", label: "Check connection" } };
 }
 /**
  * youiyoux change requests, one row per project that uses youiyoux (youiyoux-intake.ts): Connected with how many of

package/dist/kits-ui.d.ts

@@ -1,18 +1,16 @@
 /**
- * Starter kits pages: the gallery — each kit's promise, what it sets
- * up, one button — and a kit's own page: its checklist, with the next step on
- * each line (connect email, connect a tool, try a sample card).
+ * Starter kits: the "With an agent" rows of New flow (each kit's promise, what it sets up, one button to its page)
+ * and a kit's own page, a reading page: what it sets up, then its checklist with the next step on each line
+ * (connect email, connect a tool, try a sample card).
  */
 import type { Store } from "./store.js";
 import { type Kit } from "./kits.js";
 import { type Html } from "./html.js";
 export declare const KITS_CSS: string;
-/** The gallery: every kit, set up in a project with one button (or opened, when it's already there). */
-export declare function kitsGalleryHtml(store: Store, projects: readonly string[], projectName: (repo: string) => string, canSetUp: boolean, notice: {
-    problem?: string | null;
-}): Html;
-/** A kit's own page: what's set up, and the next step on each line. */
-export declare function kitPageHtml(store: Store, kit: Kit, repo: string, dir: string | null, canSetUp: boolean, notice: {
+/** "With an agent": every kit as a row; Set it up (or Open, once it's there) goes to the kit's page for `repo`. */
+export declare function kitRowsHtml(store: Store, repo: string | null): Html;
+/** A kit's own page: what it sets up, Set up (once), then the next step on each line. */
+export declare function kitPageHtml(store: Store, kit: Kit, repo: string, dir: string | null, canSetUp: boolean, notice_: {
     said?: string | null;
     problem?: string | null;
-}): Html;
+}, projectName?: (repo: string) => string): Html;