toolroll 0.9.85 → 0.9.87

package/dist/flow-gallery-ui.js

@@ -1,40 +1,30 @@
 /**
- * The flow gallery in the console (Flows → New and Settings → Flows): cards grouped by what they're for, each with
- * its promise, its steps in order, what it needs and "Use this". A template's page asks only what it
- * needs, previews in plain words what it will do and never do, and creates it — the same answers it previewed.
+ * New flow (Flows → New): describe it to the lead, or start from a template. Templates are rows grouped by what
+ * they're for, each with its promise, its steps in order, what it needs and one "Use this"; the starter kits ("With
+ * an agent"), the recipes ("One-time work") and the starter flows join them as groups. A template's page asks only
+ * what it needs, previews in plain words what it will do and never do, and creates it: the same answers it previewed.
  * A template's tools show their marks and whether the project has them; one it lacks offers Connect first.
  */
 import { brandMarkHtml } from "./brand-mark.js";
 import { BLANK, GALLERY, GALLERY_GROUPS, galleryAdmitsAnyone, galleryDiagram, galleryToolsOf, OUTDATED_COMMANDS, SEND_RESULT, sendsAlready } from "./flow-gallery.js";
 import { choiceTargets } from "./flows.js";
 import { html, joinHtml, postForm, reauth } from "./html.js";
-export const GALLERY_CSS = `.gallery{max-width:1120px;min-width:0}.gallery h2{margin:28px 0 10px;font-size:.9375rem}.gallery h2:first-of-type{margin-top:8px}` +
-    `.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}` +
-    `.gallery-card{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--so-line);border-radius:10px;background:var(--so-paper);min-width:0}` +
-    `.gallery-card h3{margin:0;font-size:.9375rem}.gallery-card p{margin:0;overflow-wrap:anywhere}.gallery-card .gallery-promise{line-height:1.5;flex:1}` +
-    // A template's steps in order, joined by arrows; a person's own steps carry the attention chip.
-    `.gallery-steps{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;list-style:none;padding:0;margin:0;font-size:12px;font-weight:500;line-height:1.5;color:var(--so-ink)}` +
-    `.gallery-steps li{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere}.gallery-steps li>span[aria-hidden]{color:var(--so-muted)}` +
-    `.gallery-steps b{font-weight:500;font-size:11.5px;line-height:18px;padding:1px 6px;border-radius:5px;background:var(--so-signal-soft);color:var(--so-signal)}` +
-    `.gallery-needs{display:flex;flex-wrap:wrap;gap:4px;list-style:none;padding:0;margin:0}.gallery-needs li{font-size:11.5px;font-weight:500;line-height:18px;padding:1px 6px;border-radius:5px;background:var(--so-neutral-soft,var(--so-raised));color:var(--so-neutral-ink,var(--so-muted))}` +
-    // An outline action in a list (the Quiet List Rule), over the workspace's ink default for .button-link.
-    `.gallery .gallery-card a.button-link{align-self:flex-start;min-height:36px;background:var(--so-paper);color:var(--so-ink);border:1px solid var(--so-input-line)}` +
-    `.gallery-blank{margin-top:20px}` +
-    // A template's tools: the mark Settings → Integrations shows, its name and where the project stands.
-    `.gallery-tools{display:grid;gap:6px;list-style:none;padding:0;margin:0}.gallery-tools li{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}.gallery-tools li>span:not(.brand-mark){min-width:0;overflow-wrap:anywhere}` +
-    `.gallery-tools strong{font-weight:500;overflow-wrap:anywhere}.gallery-connect{display:grid;gap:10px;padding:12px 0;border-top:1px solid var(--so-line)}.gallery-connect:last-child{border-bottom:1px solid var(--so-line);margin-bottom:4px}` +
-    `.gallery-connect form{display:grid;gap:8px;margin:0}.gallery-connect p{margin:0;overflow-wrap:anywhere}.gallery-connect .gallery-tool-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.gallery-connect button{justify-self:start;min-height:36px;white-space:nowrap;background:var(--primary);color:var(--primary-foreground);border-color:var(--primary);font-weight:600}` +
-    `.gallery-use{max-width:720px;min-width:0}.gallery-use .gallery-steps{margin:4px 0 12px}.gallery-use form{display:grid;gap:12px;margin:0}.gallery-use label{display:grid;gap:4px;font-weight:500}` +
-    `.gallery-use label small{font-weight:400;color:var(--so-muted)}.gallery-use label.gallery-check{display:flex;align-items:flex-start;gap:8px;font-weight:500}.gallery-use label.gallery-check input{margin-top:3px;width:16px;height:16px;min-height:0;flex:none}.gallery-use label.gallery-check small{display:block}` +
-    `.gallery-use input:not([type=hidden]),.gallery-use select{box-sizing:border-box;width:100%;max-width:100%;min-height:32px;padding:0 10px;border:1px solid var(--so-input-line);border-radius:8px;background:var(--so-paper);color:var(--so-ink);font:inherit}` +
-    `.gallery-preview{display:grid;gap:8px;padding:16px;border:1px solid var(--so-line);border-radius:10px;background:var(--so-paper);min-width:0}.gallery-preview h2{margin:0;font-size:.9375rem}` +
-    `.gallery-preview ul{margin:0;padding-left:18px;line-height:1.55}.gallery-preview p{margin:0;overflow-wrap:anywhere}.gallery-preview .gallery-never{font-weight:600}` +
-    `.gallery-preview details ol{margin:6px 0 0;padding-left:20px;white-space:pre-line;font-size:.875rem;line-height:1.5;color:var(--so-muted)}.gallery-preview details li{margin:0 0 6px;overflow-wrap:anywhere}` +
-    `.gallery-preview summary{cursor:pointer;min-height:36px;display:flex;align-items:center;font-weight:500}` +
-    `.gallery-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0}.gallery-actions button{min-height:36px;white-space:nowrap}` +
-    `.gallery-use .gallery-actions button[value=create]:not(.secondary){background:var(--primary);color:var(--primary-foreground);border-color:var(--primary);font-weight:600}.gallery-heading{margin:36px 0 0;font-size:1.05rem}` +
-    `@media(max-width:760px){.gallery-grid{grid-template-columns:minmax(0,1fr)}.gallery-connect button{min-height:44px;justify-self:stretch}.gallery .gallery-card a.button-link{min-height:44px;align-self:stretch;justify-content:center}` +
-    `.gallery-use input:not([type=hidden]),.gallery-use select{font-size:16px;min-height:44px}.gallery-actions button{flex:1 1 auto;min-height:44px}}`;
+import { acts, btn, chip, composer, count, disclose, doc, docHeader, dock, field, group, infoLine, input as kInput, note, notice, phoneHeader, segLinks, select, sendButton } from "./server/kit.js";
+export const GALLERY_CSS = `.fl-new .k-sec{gap:12px}.fl-th{display:grid;justify-items:start;gap:10px}.fl-th .k-seg{flex-wrap:wrap}.fl-tsel{justify-self:stretch}.fl-tsel form{display:flex;gap:8px;margin:0}.fl-tsel .k-selw{flex:1}` +
+    `.fl-tlist{display:grid}.fl-tlist .k-grp{padding:0;margin-top:16px}.fl-tlist .k-grp:first-child{margin-top:0}` +
+    `.fl-trow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--so-line)}` +
+    `.fl-tmain{display:grid;gap:3px;min-width:0}.fl-tmain>b{font:500 13.5px/1.35 var(--so-font-sans);color:var(--so-ink)}.fl-tp{color:var(--so-muted);font-size:12.5px;line-height:1.45;overflow-wrap:anywhere}` +
+    `.fl-tline{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12px;margin-top:3px;color:var(--so-muted);min-width:0;overflow-wrap:anywhere}.fl-ta .k-btn{min-width:108px}.fl-ta form{margin:0}` +
+    // A template's steps in order, joined by arrows.
+    `.gallery-steps{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px;list-style:none;padding:0;margin:0;font-size:12px;line-height:1.5;color:var(--so-ink)}` +
+    `.gallery-steps li{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere}.gallery-steps li>span[aria-hidden]{color:var(--so-muted)}.gallery-steps b{font-weight:500}` +
+    `.gallery-tools{display:inline-flex;flex-wrap:wrap;gap:4px 10px;list-style:none;padding:0;margin:0}.gallery-tools li{display:inline-flex;align-items:center;gap:6px;min-width:0}` +
+    `.fl-blank{padding-top:4px}.fl-describe-note{margin-top:2px}` +
+    // A template's page: the tools to connect, the form, and what it will do.
+    `.fl-use form{display:grid;gap:18px;margin:0}.fl-tool{display:grid;gap:10px;padding:12px 0;border-top:1px solid var(--so-line)}.fl-tool:last-child{border-bottom:1px solid var(--so-line)}.fl-tool form{gap:10px}` +
+    `.fl-tool-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;font-size:13px;font-weight:500}.fl-check{display:flex;align-items:flex-start;gap:8px;font-size:13px;font-weight:500;cursor:pointer}.fl-check input{margin-top:3px;width:16px;height:16px;flex:none}.fl-check .k-note{display:block;font-weight:400}` +
+    `.fl-will{display:grid;gap:10px;padding:16px 0;border-top:1px solid var(--so-line);border-bottom:1px solid var(--so-line)}.fl-will ul{margin:0;padding-left:18px;font-size:13px;line-height:1.55}.fl-will ol{margin:6px 0 0;padding-left:20px;white-space:pre-line;font-size:12.5px;line-height:1.5;color:var(--so-muted)}.fl-will li{overflow-wrap:anywhere}.fl-never{margin:0;font-size:13px;font-weight:600}` +
+    `@media(max-width:760px){.fl-page .k-btn.k-docked,.fl-new .k-btn.k-docked,.fl-use .k-btn.k-docked,.fl-kit .k-btn.k-docked{display:none}.fl-trow{grid-template-columns:minmax(0,1fr);gap:10px;padding:14px 0}.fl-ta .k-btn{width:100%}.fl-ta:empty{display:none}.fl-check input{width:20px;height:20px}}`;
 /** A flow's main path, as a person reads it: from the start, each step's first way on (a sort's first answer, a choose's
  * first option that goes somewhere, else next; a check's failure when passing just ends), never back to a step shown. */
 export function mainPath(definition) {
@@ -51,32 +41,64 @@ export function mainPath(definition) {
 }
 /** A step's short name in the strip: a person's own steps from their side. */
 const stepName = (stage) => stage.kind === "choose" ? "You choose" : stage.kind === "approval" ? "You approve" : stage.kind === "send" ? "Sent to you" : stage.title;
-/** A flow's steps in order, joined by arrows; a person's decisions carry the accent. */
+/** A flow's steps in order, joined by arrows. */
 export function stepStrip(definition) {
     return html `<ol class="gallery-steps" aria-label="Steps">${mainPath(definition).map((one, i) => {
         const name = stepName(one);
-        return html `<li>${i === 0 ? "" : html `<span aria-hidden="true">→</span>`}${one.kind === "choose" || one.kind === "approval" ? html `<b data-person>${name}</b>` : name}</li>`;
+        return html `<li>${i === 0 ? "" : html `<span aria-hidden="true">→</span>`}${one.kind === "choose" || one.kind === "approval" ? html `<b>${name}</b>` : name}</li>`;
     })}</ol>`;
 }
-const needsList = (template) => template.needs.length === 0 ? (template.tools ?? []).length > 0 ? "" : html `<ul class="gallery-needs"><li>Nothing to connect</li></ul>`
-    : html `<ul class="gallery-needs" aria-label="Needs">${template.needs.map(one => html `<li>${one}</li>`)}</ul>`;
-/** A tool's state in words, as Settings → Integrations badges it; nothing without a project. */
-const STATE = { connected: ["connected", "Connected"], open: ["not-set-up", "Not connected"], taken: ["not-set-up", "Added another way"] };
-const toolState = (tool) => tool.state === null ? "" : html `<span class="integration-state integration-state--${STATE[tool.state][0]}"><i aria-hidden="true"></i>${STATE[tool.state][1]}</span>`;
+/** What a template needs, in words: its needs, else its tools, else nothing to connect. */
+const needsWords = (template) => template.needs.length > 0 ? `Needs ${template.needs.join(", ")}` : (template.tools ?? []).length > 0 ? "" : "Nothing to connect";
+/** A tool's state in words, as Settings → Integrations says it; nothing without a project. */
+const STATE = { connected: "Connected", open: "Not connected", taken: "Added another way" };
+const toolState = (tool) => tool.state === null ? "" : chip(STATE[tool.state], tool.state === "connected" ? "done" : "", { dot: tool.state === "connected" });
 const toolMark = (tool) => brandMarkHtml(tool.id.replace(/-desktop$/, ""), tool.label, tool.state === "connected");
 const toolsList = (tools) => tools.length === 0 ? ""
-    : html `<ul class="gallery-tools" aria-label="Tools">${tools.map(one => html `<li data-tool="${one.id}" data-state="${one.state ?? "unknown"}">${toolMark(one)}<strong>${one.label}</strong>${toolState(one)}</li>`)}</ul>`;
-/** The gallery: every template, grouped, each with one "Use this". `repo` carries a chosen project to the template's page. */
+    : html `<ul class="gallery-tools" aria-label="Tools">${tools.map(one => html `<li data-tool="${one.id}" data-state="${one.state ?? "unknown"}">${toolMark(one)}<span>${one.label}${one.state === "open" ? " (not connected)" : ""}</span></li>`)}</ul>`;
+/** One row of New flow: name · promise · one line · one outline action (the same shape for templates, kits, recipes and starters). */
+export function templateRow(options) {
+    return html `<div class="fl-trow"${options.attrs ?? ""}><div class="fl-tmain"><b>${options.name}</b><span class="fl-tp">${options.promise}</span>${options.line ? html `<span class="fl-tline">${options.line}</span>` : ""}</div><div class="fl-ta">${options.action ?? ""}</div></div>`;
+}
+/** The groups New flow filters by: the template groups, then kits, recipes and starter flows. */
+export const NEW_FLOW_GROUPS = [["all", "All"], ...GALLERY_GROUPS.map(one => [one.id, one.label]), ["kits", "With an agent"], ["recipes", "One-time work"], ["starters", "Starter flows"]];
+/** The templates as rows, grouped (or one group): each with one "Use this". `repo` carries a chosen project to the template's page. */
 export function galleryHtml(input) {
     const href = (id) => `/flows/new/${id}${input.repo === null ? "" : `?repo=${encodeURIComponent(input.repo)}`}`;
-    const card = (template) => {
+    const rowOf = (template) => {
         const definition = galleryDiagram(template);
-        return html `<article class="gallery-card" data-template="${template.id}"><h3>${template.name}</h3><p class="gallery-promise">${template.promise}</p>${stepStrip(definition)}${toolsList(galleryToolsOf(template, definition, input.repo === null ? null : input.connections ?? null))}${needsList(template)}${input.canUse && html `<a class="button-link" href="${href(template.id)}" aria-label="Use ${template.name}">Use this</a>`}</article>`;
+        const needs = needsWords(template);
+        return templateRow({ name: template.name, promise: template.promise, attrs: html ` data-template="${template.id}"`,
+            line: html `${stepStrip(definition)}${toolsList(galleryToolsOf(template, definition, input.repo === null ? null : input.connections ?? null))}${needs ? html `<span>· ${needs}</span>` : ""}`,
+            action: input.canUse ? btn("Use this", { sm: true, href: href(template.id), attrs: { "aria-label": `Use ${template.name}` } }) : "" });
     };
-    const groups = GALLERY_GROUPS.map(group => html `<h2 id="gallery-${group.id}">${group.label}</h2><div class="gallery-grid" data-group="${group.id}">${GALLERY.filter(one => one.group === group.id).map(card)}</div>`);
-    return html `<section class="gallery">${groups}${input.canUse ? html `<p class="gallery-blank meta"><a href="${href(BLANK.id)}">Start from a blank flow</a></p>` : html `<p class="meta">An approver creates flows.</p>`}</section>`;
+    const shown = GALLERY_GROUPS.filter(one => input.group === undefined || input.group === "all" || input.group === one.id);
+    return html `${shown.map(one => { const templates = GALLERY.filter(template => template.group === one.id); return html `${group(one.label, count(templates.length))}<div data-group="${one.id}">${templates.map(rowOf)}</div>`; })}`;
+}
+/**
+ * New flow: describe it (the shared composer; the words go to the lead as a chat draft, the project on its bar), then
+ * start from a template, filtered by group. Kits, recipes and starter flows arrive as their own rows.
+ */
+export function newFlowHtml(input) {
+    const groupKey = NEW_FLOW_GROUPS.some(([key]) => key === input.group) ? input.group : "all";
+    const keep = (key) => `/flows/new?${new URLSearchParams({ ...(key === "all" ? {} : { group: key }), ...(input.repo === null ? {} : { repo: input.repo }) }).toString()}`.replace(/\?$/, "");
+    const current = input.projects.find(one => one.path === input.repo)?.name ?? input.projects[0]?.name ?? "";
+    const describe = input.canUse ? html `<section class="k-sec" aria-labelledby="fl-dh"><h3 id="fl-dh">Describe what you want</h3>\
+<form method="get" action="/flows/new" id="fl-ask-form">${composer({ id: "fl-ask", name: "describe", label: "What should happen", rows: 3, value: input.ask.value, error: input.ask.error,
+        placeholder: "Every night, run npm run e2e. When it fails, find the cause, fix it and open a pull request.",
+        project: { current, items: input.projects.map(one => one.name), name: "project" }, send: sendButton({ label: "Draft the flow" }),
+        note: "Opens in chat: your lead drafts it for you to check. Nothing runs until you create it." })}</form></section>` : "";
+    const show = (key) => groupKey === "all" || groupKey === key;
+    const filter = html `<span class="k-desk-only">${segLinks("Templates", groupKey, NEW_FLOW_GROUPS.map(([key, label]) => ({ key, label, href: keep(key) })))}</span>\
+<span class="k-phone-only fl-tsel"><form method="get" action="/flows/new">${input.repo === null ? "" : html `<input type="hidden" name="repo" value="${input.repo}">`}${select({ name: "group", label: "Templates", items: NEW_FLOW_GROUPS, current: groupKey, wide: true, attrs: { "data-k-autosubmit": "" } })}<noscript>${btn("Show", { sm: true, type: "submit" })}</noscript></form></span>`;
+    const templates = GALLERY_GROUPS.some(one => show(one.id)) ? galleryHtml({ repo: input.repo, canUse: input.canUse, connections: input.connections, group: groupKey }) : "";
+    const blank = input.canUse && groupKey === "all" ? html `<p class="k-note fl-blank"><a href="/flows/new/${BLANK.id}${input.repo === null ? "" : `?repo=${encodeURIComponent(input.repo)}`}">Start from a blank flow</a></p>` : "";
+    const list = html `${templates}${show("kits") ? input.kits : ""}${show("recipes") ? input.recipes : ""}${show("starters") ? input.starters : ""}${blank}`;
+    const said = input.problem ? notice(input.problem) : input.said ? infoLine(input.said) : "";
+    return html `<div class="fl-new" data-kit-page>${phoneHeader("New flow", { back: "/flows" })}${doc(docHeader({ title: "New flow", back: ["/flows", "Flows"], meta: input.canUse ? "Describe it in a sentence, or start from a template." : "An approver creates flows.", same: true }), said, describe, html `<section class="k-sec" aria-labelledby="fl-th"><div class="fl-th"><h3 id="fl-th">Start from a template</h3>${filter}</div><div class="fl-tlist">${list}</div></section>`)}\
+${input.canUse ? dock(btn("Draft the flow", { variant: "primary", type: "submit", attrs: { form: "fl-ask-form" } })) : ""}</div>`;
 }
-/** A template's page: its questions, then what it will do and never do, then Create. */
+/** A template's page, a reading page: its steps and tools, its questions, what it will do and never do, then Create. */
 export function galleryUseHtml(input) {
     const { template } = input;
     const tools = input.tools ?? input.preview?.tools ?? [];
@@ -84,32 +106,42 @@ export function galleryUseHtml(input) {
     const missing = tools.filter(one => one.state !== "connected" && one.state !== "taken");
     // Each tool with its state; one the project lacks offers its own Connect (the Tools page's, with the same password), and comes back here.
     const connect = (tool) => {
-        const head = html `<p class="gallery-tool-head">${toolMark(tool)} <strong>${tool.label}</strong> ${toolState(tool)}</p>`;
+        const head = html `<p class="fl-tool-h">${toolMark(tool)} ${tool.label} ${toolState(tool)}</p>`;
         // Added another way, it is there: nothing to connect.
         if (tool.state === "connected" || tool.state === "taken" || input.csrf === "")
-            return html `<div class="gallery-connect" data-tool="${tool.id}" data-state="${String(tool.state)}">${head}</div>`;
+            return html `<div class="fl-tool" data-tool="${tool.id}" data-state="${String(tool.state)}">${head}</div>`;
         const how = tool.id === "figma-desktop" ? "Open the Figma desktop app and turn on its Dev Mode MCP server in Preferences." : `You sign in on ${tool.label}, then come back here.`;
-        return html `<div class="gallery-connect" data-tool="${tool.id}" data-state="open">${head}${postForm("/settings/tools/connect", html `<p class="meta">${how}</p>${reauth(html `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label>`)}<button name="service" value="${tool.id}">Connect ${tool.label}</button>`, { hidden: { repo: input.repo, shown: input.repo, template: template.id } })}</div>`;
+        const fieldId = `fl-connect-${tool.id}`;
+        return html `<div class="fl-tool" data-tool="${tool.id}" data-state="open">${head}${postForm("/settings/tools/connect", html `${note(how)}${reauth(field({ id: fieldId, label: "Your Toolroll password", control: kInput({ id: fieldId, name: "password", type: "password", attrs: { autocomplete: "current-password", required: true } }) }))}${acts(btn(`Connect ${tool.label}`, { type: "submit", attrs: { name: "service", value: tool.id } }))}`, { hidden: { repo: input.repo, shown: input.repo, template: template.id } })}</div>`;
     };
-    const toolsBlock = tools.length === 0 ? "" : html `<section class="gallery-tools-use" aria-label="Tools">${tools.map(connect)}</section>`;
+    const toolsBlock = tools.length === 0 ? "" : html `<section class="k-sec" aria-label="Tools"><h3>Tools</h3><div>${tools.map(connect)}</div></section>`;
     // Made without a tool, the preview names the zone that needs it.
     const zones = (tool) => joinHtml(tool.zones.map(zone => html `“${zone}”`), " and ");
-    const needing = html `${missing.filter(one => one.zones.length > 0).map(one => html `<p class="meta" data-needs-tool="${one.id}">${zones(one)} need${one.zones.length === 1 ? "s" : ""} ${one.label}, which isn't connected.</p>`)}${tools.filter(one => one.state === "taken" && one.zones.length > 0).map(one => html `<p class="meta" data-tool-taken="${one.id}">${zones(one)} use${one.zones.length === 1 ? "s" : ""} ${one.label}, added another way.</p>`)}`;
-    const field = (ask) => {
-        const value = input.answers[ask.key] ?? ask.default;
-        const hint = ask.hint === undefined ? "" : html ` <small>${ask.hint}</small>`;
-        if (ask.key === "outdated")
-            return html `<label>${ask.label}<select name="outdated">${Object.entries(OUTDATED_COMMANDS).map(([id, one]) => html `<option value="${id}"${id === value && html ` selected`}>${one.label}</option>`)}</select></label>`;
-        return html `<label>${ask.label}${hint}<input name="${ask.key}" value="${value}" required maxlength="${ask.key === "command" ? 500 : ask.key === "team" ? 12 : 100}"${ask.key === "command" ? html ` spellcheck="false" autocapitalize="off"` : ask.key === "team" ? html ` spellcheck="false" autocapitalize="characters"` : ""}></label>`;
+    const needing = html `${missing.filter(one => one.zones.length > 0).map(one => html `<p class="k-note" data-needs-tool="${one.id}">${zones(one)} need${one.zones.length === 1 ? "s" : ""} ${one.label}, which isn't connected.</p>`)}${tools.filter(one => one.state === "taken" && one.zones.length > 0).map(one => html `<p class="k-note" data-tool-taken="${one.id}">${zones(one)} use${one.zones.length === 1 ? "s" : ""} ${one.label}, added another way.</p>`)}`;
+    const ask = (one, index) => {
+        const value = input.answers[one.key] ?? one.default;
+        const id = `fl-ask-${index}`;
+        if (one.key === "outdated")
+            return field({ id, label: one.label, control: select({ id, name: "outdated", items: Object.entries(OUTDATED_COMMANDS).map(([key, command]) => [key, command.label]), current: value, wide: true }) });
+        return field({ id, label: one.label, ...(one.hint === undefined ? {} : { hint: one.hint }), control: kInput({ id, name: one.key, value, hint: one.hint !== undefined,
+                attrs: { required: true, maxlength: one.key === "command" ? 500 : one.key === "team" ? 12 : 100, ...(one.key === "command" ? { spellcheck: "false", autocapitalize: "off" } : one.key === "team" ? { spellcheck: "false", autocapitalize: "characters" } : {}) } }) });
     };
     const project = input.projects.length > 1
-        ? html `<label>Project<select name="repo">${input.projects.map(one => html `<option value="${one.path}"${one.path === input.repo && html ` selected`}>${one.name}</option>`)}</select></label>`
+        ? field({ id: "fl-use-project", label: "Project", control: select({ id: "fl-use-project", name: "repo", items: input.projects.map(one => [one.path, one.name]), current: input.repo, wide: true }) })
         : html `<input type="hidden" name="repo" value="${input.repo}">`;
-    const preview = input.preview === null ? "" : html `<section class="gallery-preview" aria-labelledby="gallery-will"><h2 id="gallery-will">What it will do</h2><ul>${input.preview.built.does.map(one => html `<li>${one}</li>`)}</ul><p class="gallery-never">${input.preview.built.never}</p>${needing}${input.preview.startsFrom.length === 0 ? html `<p class="meta">Cards start when you add them.</p>` : input.preview.startsFrom.map(one => html `<p class="meta">Starts from: ${one}</p>`)}<details><summary>Every step</summary><ol>${input.preview.steps.map(one => html `<li>${one.replace(/^\d+\.\s/, "")}</li>`)}</ol></details></section>`;
-    const sendResult = !sendsAlready(template) && html `<label class="gallery-check"><input type="checkbox" name="${SEND_RESULT.key}" value="yes"${input.answers[SEND_RESULT.key] === "yes" && html ` checked`} data-send-result><span>${SEND_RESULT.title}<small>When a card finishes, what was done comes to you in your chat apps.</small></span></label>`;
-    // A flow that brings in items from anyone takes the password to make (chat-management.md §0a.3).
-    const step = input.preview !== null && galleryAdmitsAnyone(template) ? reauth(html `<label>Your password <span class="meta">(it brings in items from anyone)</span><input type="password" name="password" autocomplete="current-password"></label>`) : "";
-    const actions = html `${step}<p class="gallery-actions">${input.preview !== null && html `<button type="submit" name="intent" value="create"${missing.length > 0 && html ` class="secondary" data-without-tools`}>Create flow</button>`}<button type="submit" name="intent" value="preview" class="secondary">${input.preview === null ? "Preview" : "Update preview"}</button></p>`;
-    const form = postForm(`/flows/new/${template.id}`, html `${project}${template.asks.map(field)}<label>Name<input name="name" value="${input.name}" maxlength="80"></label>${sendResult}${preview}${actions}`, { attrs: { "data-gallery-use": true }, hidden: { previewed: input.preview?.digest ?? "" } });
-    return html `<section class="gallery-use" data-gallery-template="${template.id}">${input.problem !== null && html `<p class="problem" role="alert">${input.problem}</p>`}${input.said ? html `<p role="status">${input.said}</p>` : ""}<p>${template.promise}</p>${input.diagram !== null && stepStrip(input.diagram)}${needsList(template)}${toolsBlock}${form}<p class="meta"><a href="/flows/new">All templates</a></p></section>`;
+    const preview = input.preview === null ? "" : html `<section class="k-sec fl-will" aria-labelledby="fl-will"><h3 id="fl-will">What it will do</h3><ul>${input.preview.built.does.map(one => html `<li>${one}</li>`)}</ul><p class="fl-never">${input.preview.built.never}</p>${needing}\
+${input.preview.startsFrom.length === 0 ? note("Cards start when you add them.") : input.preview.startsFrom.map(one => note(`Starts from: ${one}`))}${disclose("Every step", html `<ol>${input.preview.steps.map(one => html `<li>${one.replace(/^\d+\.\s/, "")}</li>`)}</ol>`)}</section>`;
+    const sendResult = !sendsAlready(template) && html `<label class="fl-check"><input type="checkbox" name="${SEND_RESULT.key}" value="yes"${input.answers[SEND_RESULT.key] === "yes" && html ` checked`} data-send-result><span>${SEND_RESULT.title}<span class="k-note">When a card finishes, what was done comes to you in your chat apps.</span></span></label>`;
+    // A flow that brings in items from anyone takes the password to make (chat-management.md §0a.3): a step-up, which Passwordless stands in for.
+    const anyone = input.preview !== null && galleryAdmitsAnyone(template);
+    const step = anyone ? reauth(field({ id: "fl-use-password", label: "Your password", hint: "It brings in items from anyone.", control: kInput({ id: "fl-use-password", name: "password", type: "password", hint: true, attrs: { autocomplete: "current-password" } }) })) : "";
+    const creates = input.preview !== null;
+    const createButton = (docked) => btn("Create flow", { variant: missing.length > 0 ? "outline" : "primary", type: "submit", ...(docked ? { docked: true } : {}),
+        attrs: { name: "intent", value: "create", ...(missing.length > 0 ? { "data-without-tools": "" } : {}) } });
+    const actions = html `${step}${acts(creates ? createButton(true) : "", btn(creates ? "Update preview" : "Preview", { variant: creates ? "outline" : "primary", type: "submit", attrs: { name: "intent", value: "preview" } }))}${creates ? note(anyone ? "Creating it asks for your password: it brings in items from anyone." : "Creating it needs no password.") : ""}`;
+    const form = postForm(`/flows/new/${template.id}`, html `${project}${template.asks.map(ask)}${field({ id: "fl-use-name", label: "Name", control: kInput({ id: "fl-use-name", name: "name", value: input.name, attrs: { maxlength: 80 } }) })}${sendResult}${preview}${actions}`, { attrs: { "data-gallery-use": true, id: "fl-use-form" }, hidden: { previewed: input.preview?.digest ?? "" } });
+    const needs = needsWords(template);
+    const steps = input.diagram === null && !needs ? "" : html `<section class="k-sec" aria-label="Steps">${input.diagram !== null && stepStrip(input.diagram)}${needs ? note(needs) : ""}</section>`;
+    return html `<div class="fl-use" data-kit-page data-gallery-template="${template.id}">${phoneHeader(template.name, { back: "/flows/new" })}${doc(docHeader({ title: template.name, back: ["/flows/new", "New flow"], meta: template.promise, same: true }), input.problem !== null ? notice(input.problem) : "", input.said ? infoLine(input.said) : "", steps, toolsBlock, form)}\
+${creates ? dock(btn("Create flow", { variant: "primary", type: "submit", attrs: { form: "fl-use-form", name: "intent", value: "create" } })) : dock(btn("Preview", { variant: "primary", type: "submit", attrs: { form: "fl-use-form", name: "intent", value: "preview" } }))}</div>`;
 }

package/dist/flow-live.js

@@ -16,6 +16,7 @@
  * can't keep one open falls back to reading every few seconds. With nothing
  * written, an open flow costs no reads; a 30-second check heals a miss.
  */
+import { browserViewOf } from "./flow-browser.js";
 import { createHash } from "node:crypto";
 import { createLiveRooms } from "./live-bus.js";
 // Statements belong to their database, without keeping closed Stores alive.
@@ -90,7 +91,14 @@ export function flowFingerprint(store, flow, now = new Date()) {
     // including a build in another project. The page read admits the viewer;
     // this stream only carries a hash. No evidence files or logs are read.
     const row = fingerprintStatement(store).get({ $flow: flow, $now: now.toISOString() });
-    return row === undefined ? null : createHash("sha256").update(Object.values(row).map(String).join("|")).digest("hex").slice(0, 16);
+    if (row === undefined)
+        return null;
+    // Browser use (flow-browser.ts): an approval, a revocation, a changed covered script or a signer who lost standing
+    // changes what the page says, so it is part of what open pages are nudged on.
+    const saved = store.getFlow(flow);
+    const browser = saved === null ? null : browserViewOf(store, saved);
+    const browserKey = browser === null ? "" : `${browser.status}:${browser.digest ?? ""}:${browser.signedAt ?? ""}:${browser.problem === null ? "" : "x"}`;
+    return createHash("sha256").update([...Object.values(row).map(String), browserKey].join("|")).digest("hex").slice(0, 16);
 }
 /** Rooms keyed by flow. With a bus, a write reaches every open page at once; without one, only the safety net. */
 export function createFlowRooms(fingerprint, options = {}) {

package/dist/flow-pull-request.js

@@ -19,6 +19,7 @@ import { adoptPublishedPullRequest } from "./publish.js";
 import { failingCheckOf, mergePullRequest, owePullRequest, pullRequestBlocker, pullRequestFollowOf } from "./pull-request-flow.js";
 import { requestResultChanges } from "./result-actions.js";
 import { revisionSourceOf } from "./result-review.js";
+import { cardTaskArchived } from "./task-archive.js";
 /** Whether a person approved this card at a "Person decides" zone since it was last built; their name when so.
  * The MOST RECENT decision governs (approval policy §1.7): it must be a person's recorded decision, after the card's
  * last build by the current definition AND after the exact build being merged finished (`builtAt`), so editing the
@@ -41,19 +42,23 @@ export function approvedSinceBuild(store, definition, card, builtAt = null) {
 /** One pass of a Pull request zone for one card. Returns whether it changed anything. */
 export async function pullRequestStep(store, flow, definition, stage, card, now, io) {
     const titleOf = (id) => definition.stages.find(one => one.id === id)?.title ?? "another zone";
-    const waiting = (said) => {
+    // Every write after GitHub answers re-proves, in its own transaction, that the card's work wasn't put away meanwhile
+    // (v145): a put away that committed first leaves the card where it is, saying nothing to anyone.
+    const unlessHeld = (write) => store.transact(() => cardTaskArchived(store, card.id) ? false : write());
+    const waiting = (said) => unlessHeld(() => {
         if (card.waiting === said)
             return false;
         store.updateFlowCard(card.id, { waiting: said }, now);
         return true;
-    };
-    const passed = (said, output) => {
+    });
+    const passed = (said, output) => unlessHeld(() => {
         store.updateFlowCard(card.id, { outputs: { ...card.outputs, [stage.id]: output }, waiting: null }, now);
         if (stage.next === null)
             return waiting(`${said} Move the card on when you're ready.`);
         return store.moveFlowCard(card.id, { to: stage.next, outcome: "ok", actor: "flow", historyNote: said, expectEntry: card.entry }, now);
-    };
-    const failed = (said, revision = null) => {
+    });
+    const failed = (said, revision = null) => unlessHeld(() => failedNow(said, revision));
+    const failedNow = (said, revision = null) => {
         store.updateFlowCard(card.id, { outputs: { ...card.outputs, [stage.id]: said } }, now);
         if (stage.onFail === null) {
             if (!waiting(`${said} Fix it, then move the card to try again.`))
@@ -68,13 +73,13 @@ export async function pullRequestStep(store, flow, definition, stage, card, now,
     };
     // Publishing that can't proceed is not the build's fault: rebuilding wouldn't change it, so the card waits here,
     // saying what to do, and the people on it hear once. It carries on by itself once the cause is fixed.
-    const stuck = (said) => {
+    const stuck = (said) => unlessHeld(() => {
         if (!waiting(said))
             return false;
         const people = card.owner === null ? cardFollowers(store, card) : [card.owner];
         notifyPeople(store, card, people, null, { key: `pr-stuck:${card.entry}`, subject: `${stage.title} is waiting on you for “${card.title}”`, attention: true, body: said }, now);
         return true;
-    };
+    });
     // With no failure path, a card that didn't pass waits for a person to move it (a move is a fresh visit).
     if (stage.onFail === null && card.waiting !== null && card.waiting.endsWith(" Fix it, then move the card to try again."))
         return false;
@@ -128,6 +133,9 @@ export async function pullRequestStep(store, flow, definition, stage, card, now,
         // Back to a Build zone: a revision of the same work, carrying the failure (fenced as untrusted CI output).
         let revision = null;
         const target = definition.stages.find(one => one.id === stage.onFail);
+        // No revision of work put away while GitHub answered (v145).
+        if (cardTaskArchived(store, card.id))
+            return false;
         if (target?.kind === "task" && io.evidenceRoot !== undefined) {
             const runTask = store.externalIdFor(store.getRun(runId)?.taskRef ?? -1);
             const revised = runTask === null ? null : requestResultChanges(store, io.evidenceRoot, {

package/dist/flow-share.js

@@ -54,6 +54,8 @@ function stepOf(stage, ask) {
             step["runIn"] = stage.runIn;
         if (stage.secrets !== undefined)
             step["secrets"] = stage.secrets;
+        if (stage.browser === true)
+            step["browser"] = true;
     }
     if (stage.routes !== undefined)
         step["routes"] = stage.routes.map(one => ({ answer: one.answer, goesTo: one.to }));
@@ -299,7 +301,7 @@ function stageInputOf(step, index, find) {
         ...(toOwner ? { toOwner: true } : { approver: anyone ? null : decider }),
         message: step["message"], close: step["close"], script: step["script"], runIn: step["runIn"],
         routes: list("routes")?.map((one, n) => ({ answer: one["answer"], to: find(one["goesTo"], `${at}.routes[${n}].goesTo`) })),
-        secrets: step["secrets"],
+        secrets: step["secrets"], browser: step["browser"],
         ...(kind === "sort" ? { sort: { question: step["question"], answers: (list("answers") ?? []).map((one, n) => ({ answer: one["answer"], means: one["means"], to: find(one["goesTo"], `${at}.answers[${n}].goesTo`) })),
                 sureAt: typeof sureAt === "number" && sureAt > 1 ? sureAt / 100 : sureAt, notes: list("alsoNote") ?? [] } } : {}),
         ...(kind === "request" ? { request: { method: step["method"], url: step["url"], headers: object("headers") ?? {}, body: step["body"] } } : {}),

package/dist/flow-starters-ui.d.ts

@@ -1,6 +1,6 @@
 /**
- * Settings → Flows: the starter flows for a project, each switched on with one yes. A row says what it's for,
- * what it will do and what it never does — the whole of what the yes agrees to — then one button. A starter
+ * Starter flows (New flow → Starter flows): a project's starter flows, each switched on with one yes. A row says what
+ * it's for, what it will do and what it never does (the whole of what the yes agrees to), then one button. A starter
  * that's on links to its flow; one that can't run here says why.
  */
 import type { StarterView } from "./flow-starters.js";
@@ -8,14 +8,8 @@ import { type Html } from "./html.js";
 export declare const STARTERS_CSS: string;
 export declare function startersHtml(input: {
     repo: string;
-    projects: readonly {
-        path: string;
-        name: string;
-    }[];
+    projectName: string;
     starters: readonly StarterView[];
-    csrf: string;
     canSwitch: boolean;
     suggested: string | null;
-    said: string | null;
-    problem: string | null;
 }): Html;

package/dist/flow-starters-ui.js

@@ -1,32 +1,21 @@
 import { html, postForm } from "./html.js";
-export const STARTERS_CSS = `.starters{max-width:760px;min-width:0}.starters h2{margin:24px 0 4px;font-size:.9375rem}` +
-    `.starter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:start;padding:14px 0;border-top:1px solid var(--so-line);min-width:0}` +
-    `.starter:first-of-type{border-top:0}.starter>:not(.starter-action){grid-column:1}.starter h3{margin:0;font-size:.9375rem;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}` +
-    `.starter p,.starter ul{margin:2px 0 0;min-width:0;overflow-wrap:anywhere}.starter ul{padding-left:18px;color:var(--so-muted);font-size:.875rem;line-height:1.5}` +
-    `.starter .starter-never{font-size:.875rem;font-weight:500}.starter-action{grid-column:2;grid-row:1 / span 4;align-self:center;margin:0}` +
-    `.starter-action button,.starter-action .button-link{min-height:44px;white-space:nowrap}.starter .starter-action button{width:auto}` +
-    `.starter .starter-action a.starter-open{background:var(--so-paper);color:var(--so-ink);border:1px solid var(--so-input-line)}` +
-    `.starter[data-suggested="true"]{margin:0 -12px;padding:14px 12px;border:1px solid var(--so-accent,var(--so-line));border-radius:10px}` +
-    `.starter-on{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:500;padding:0 8px;border-radius:5px;line-height:20px;color:var(--so-success);background:var(--so-success-soft)}` +
-    `.starter-on i{width:6px;height:6px;border-radius:50%;background:currentColor}.starters .starter-blocked{color:var(--so-muted);font-size:.875rem}` +
-    `.starters form.starters-project{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:0 0 8px}.starters form.starters-project label{display:grid;gap:4px}` +
-    `@media (max-width:560px){.starter{grid-template-columns:minmax(0,1fr)}.starter .starter-action{grid-column:1;grid-row:auto;margin-top:10px}` +
-    `.starter .starter-action button,.starter .starter-action .button-link{width:100%;justify-content:center}.starters select{font-size:16px}}`;
+import { templateRow } from "./flow-gallery-ui.js";
+import { btn, chip, group, note } from "./server/kit.js";
+export const STARTERS_CSS = `.fl-starter-does{margin:2px 0 0;padding-left:18px;font-size:12.5px;line-height:1.5;color:var(--so-muted)}.fl-starter-never{font-weight:500;color:var(--so-ink)}` +
+    `.fl-trow[data-suggested="true"]{border-left:2px solid var(--so-ink);padding-left:12px}`;
 export function startersHtml(input) {
-    const note = input.problem ? html `<p class="problem" role="alert">${input.problem}</p>` : input.said ? html `<p role="status">${input.said}</p>` : "";
-    const selector = input.projects.length > 1
-        ? html `<form class="starters-project" method="get" action="/settings/flows"><label>Project<select name="repo">${input.projects.map(one => html `<option value="${one.path}"${one.path === input.repo && html ` selected`}>${one.name}</option>`)}</select></label><button>Show</button></form>` : "";
     // The one asked about ("Do this every time…") comes first, marked.
     const ordered = [...input.starters].sort((a, b) => Number(b.id === input.suggested) - Number(a.id === input.suggested));
     const rows = ordered.map(one => {
-        const action = one.on !== null ? html `<p class="starter-action"><a class="button-link starter-open" href="/flows/${one.on.flow}">Open flow</a></p>`
+        const action = one.on !== null ? btn("Open flow", { sm: true, href: `/flows/${one.on.flow}` })
             : one.blocked !== null || !input.canSwitch ? ""
-                : postForm("/settings/flows/on", html `<button type="submit">Switch on</button>`, { attrs: { class: "starter-action" }, hidden: { repo: input.repo, starter: one.id } });
+                : postForm("/settings/flows/on", btn("Switch on", { sm: true, type: "submit", attrs: { "aria-label": `Switch on ${one.name}` } }), { hidden: { repo: input.repo, starter: one.id } });
         // What the yes agrees to, in full, before it; nothing to agree to once it's on or can't be.
-        const agrees = one.on === null && one.blocked === null && html `<ul>${one.does.map(line => html `<li>${line}</li>`)}</ul><p class="starter-never">${one.never}</p>`;
-        const head = html `<h3>${one.name}${one.on === null ? "" : html ` <span class="starter-on"><i aria-hidden="true"></i>On</span>`}</h3>`;
-        return html `<div class="starter" id="starter-${one.id}" data-starter="${one.id}" data-suggested="${String(one.id === input.suggested && one.on === null)}">${head}<p>${one.summary}</p>${agrees}${one.on === null && one.blocked !== null && html `<p class="starter-blocked">${one.blocked}</p>`}${action}</div>`;
+        const line = one.on !== null ? chip("On", "done")
+            : one.blocked !== null ? html `<span>${one.blocked}</span>`
+                : html `<span><ul class="fl-starter-does">${one.does.map(words => html `<li>${words}</li>`)}</ul><span class="fl-starter-never">${one.never}</span></span>`;
+        return templateRow({ name: one.name, promise: one.summary, line, action, attrs: html ` id="starter-${one.id}" data-starter="${one.id}" data-suggested="${String(one.id === input.suggested && one.on === null)}"` });
     });
-    const nobody = !input.canSwitch && input.starters.some(one => one.on === null) ? html `<p class="meta">An approver switches these on.</p>` : "";
-    return html `<section class="starters">${note}${selector}<h2>Starter flows</h2>${rows}${nobody}<p class="meta"><a href="/flows">All flows</a></p></section>`;
+    const nobody = !input.canSwitch && input.starters.some(one => one.on === null) ? note("An approver switches these on.") : "";
+    return html `${group(`Starter flows for ${input.projectName}`)}<div data-group="starters">${rows}</div>${nobody}`;
 }

package/dist/flow-steps.d.ts

@@ -1,7 +1,7 @@
 import type { Runner } from "./backend.js";
 import { type DraftRunner } from "./flow-draft.js";
 import { type MailSender, type ToolCaller } from "./flow-actions.js";
-import type { Store } from "./store.js";
+import type { FlowCardRow, FlowStepKind, Store } from "./store.js";
 import type { TurnRunner } from "./subagents.js";
 import type { ToolLister } from "./subagent-tools.js";
 export type StepIo = {
@@ -42,3 +42,11 @@ export type StepPass = {
 };
 /** Run every due check and update in one project, then move each card on. */
 export declare function runFlowSteps(store: Store, repo: string, now: Date, io: StepIo): Promise<StepPass>;
+/** Claim this card's visit to its step zone, only while the card is still there on that visit: a pass that read the card
+ * before another pass (or a person) moved it never runs the step for a visit that's over. */
+export declare function claimStep(store: Store, card: FlowCardRow, step: {
+    stage: string;
+    kind: FlowStepKind;
+    script: string | null;
+    scriptVersion: number | null;
+}, now: Date): boolean;

package/dist/flow-steps.js

@@ -36,7 +36,9 @@ import { claudeDraftRunner, DRAFT_CHARS, DRAFT_TIMEOUT, draftPrompt, wholeDraft
 import { overruns, passOn, TEXT_LIMITS, writeWithin } from "./text-limits.js";
 import { readFlowSecrets, sendingReady, runRequest, sendEmail, toolWaiting, useTool } from "./flow-actions.js";
 import { cleanFolder, flowLaunch, runCode } from "./flow-code.js";
+import { browserStanding } from "./flow-browser.js";
 import { readProviderKey } from "./keys.js";
+import { cardTaskArchived } from "./task-archive.js";
 import { replyInChannel } from "./chat-inbox.js";
 import { recordSent, threadOf } from "./flow-replies.js";
 import { ASKED, subagentReady, subagentTurn } from "./subagent-work.js";
@@ -70,6 +72,9 @@ export async function runFlowSteps(store, repo, now, io) {
         const stage = known.definition?.stages.find(one => one.id === card.stage);
         if (stage === undefined)
             continue;
+        // A card whose task is put away (v145) runs nothing — no step, subagent turn or pull request — until it's restored.
+        if (cardTaskArchived(store, card.id))
+            continue;
         // v92: a subagent's turn — a zone it handles, or a decision it staffs (a person decides when it's paused or gone).
         if (stage.kind === "subagent" || (stage.kind === "approval" && stage.subagent !== undefined)) {
             await subagentStep(store, known.flow, known.definition, stage, card, now, io, pass);
@@ -145,6 +150,14 @@ export async function runFlowSteps(store, repo, now, io) {
                 store.updateFlowCard(card.id, { waiting }, now);
             continue;
         }
+        // A script that starts a browser waits, saying so, until a person approves browser use for the flow (flow-browser.ts),
+        // rather than run and crash inside the sandbox; it runs on its own once approved.
+        const browser = stage.kind === "check" && stage.browser === true ? (script === null || known.definition === null ? { allowed: false, said: "This zone's script can't be read." } : browserStanding(store, known.flow.id, stage.id, { definition: known.definition, script })) : null;
+        if (browser !== null && !browser.allowed) {
+            if (card.waiting !== browser.said)
+                store.updateFlowCard(card.id, { waiting: browser.said }, now);
+            continue;
+        }
         if (!claimStep(store, card, { stage: stage.id, kind: stage.kind, script: script?.name ?? null, scriptVersion: script?.version ?? null }, now))
             continue;
         pass.ran++;
@@ -174,12 +187,21 @@ export async function runFlowSteps(store, repo, now, io) {
 }
 /** Claim this card's visit to its step zone, only while the card is still there on that visit: a pass that read the card
  * before another pass (or a person) moved it never runs the step for a visit that's over. */
-function claimStep(store, card, step, now) {
+export function claimStep(store, card, step, now) {
     return store.transact(() => {
         const fresh = store.getFlowCard(card.id);
         if (fresh === null || fresh.state !== "active" || fresh.entry !== card.entry || fresh.stage !== step.stage)
             return false;
-        return store.claimFlowStep({ card: card.id, entry: card.entry, ...step }, now);
+        // A card whose task is put away (v145) runs no step until the task is restored (both of its tasks, re-read here).
+        if (cardTaskArchived(store, card.id))
+            return false;
+        if (!store.claimFlowStep({ card: card.id, entry: card.entry, ...step }, now))
+            return false;
+        // The tasks this step was admitted for stay held while it runs, wherever the card moves meanwhile.
+        for (const task of [fresh.task, fresh.primaryTask])
+            if (task !== null)
+                store.handle.prepare("INSERT OR IGNORE INTO flow_step_task (card, entry, task_id) VALUES (?, ?, ?)").run(card.id, card.entry, task);
+        return true;
     });
 }
 /** One subagent turn, when one is due for this card: claimed like any step, retried on failure, and waiting while its question is open. */
@@ -361,16 +383,31 @@ async function runCheck(store, flow, stage, script, card, now, io) {
         if (added.code !== 0)
             return { state: "retry", said: `Couldn't make a copy of${where}: ${added.stderr.trim().split("\n")[0]?.slice(0, 160) ?? "git refused"}.` };
     }
-    const launch = flowLaunch(store, { repo: flow.repo, folder: path, scratch: io.scratch, copy, policy: store.flowFencePolicy(flow.id), ...(io.fenceAvailable === undefined ? {} : { available: io.fenceAvailable }), ...(io.home === undefined ? {} : { home: io.home }) });
+    // Browser use, proved at the moment of launch: a zone that says it starts a browser runs only with a person's standing
+    // approval (flow-browser.ts); then its script, and only its script, gets Chromium's one service.
+    const wantsBrowser = stage.browser === true;
+    // Read once: the drawing and the script this launch runs are the very objects the browser decision is about.
+    const running = flowDefinitionOf(flow);
+    const standing = !wantsBrowser ? null : running === null || running.stages.find(one => one.id === stage.id) === undefined || JSON.stringify(running.stages.find(one => one.id === stage.id)) !== JSON.stringify(stage)
+        ? { allowed: false, said: "This zone changed while it was starting, so it didn't run." } : browserStanding(store, flow.id, stage.id, { definition: running, script });
+    if (standing !== null && !standing.allowed) {
+        if (copy)
+            await io.git("git", ["-C", flow.repo, "worktree", "remove", "--force", path], { timeoutMs: 60_000 }).catch(() => undefined);
+        rmSync(path, { recursive: true, force: true });
+        return { state: "failed", said: standing.said };
+    }
+    const launch = flowLaunch(store, { repo: flow.repo, folder: path, scratch: io.scratch, copy, policy: store.flowFencePolicy(flow.id), ...(standing?.allowed === true ? { browser: true } : {}), ...(io.fenceAvailable === undefined ? {} : { available: io.fenceAvailable }), ...(io.home === undefined ? {} : { home: io.home }) });
     try {
         if (launch !== null && "problem" in launch)
             return { state: "failed", said: launch.problem };
+        // The project's setup never gets the browser rule: only the zone's script asked for it.
+        const setupFence = launch?.fence === undefined ? undefined : { ...launch.fence, fenceGrants: withoutBrowser(launch.fence.fenceGrants) };
         let log = "";
         const setup = copy ? store.liveWorktreeSetup(flow.repo) : null;
         if (setup !== null) {
             const shell = approvedCommandShell(setup.command);
             const prepared = await io.shell(shell.file, shell.args, { cwd: path, timeoutMs: setup.timeoutMs, envAllowlist: SETUP_ENV_ALLOWLIST, omitEnv: SETUP_ENV_DENYLIST, processGroup: true,
-                ...(launch === null ? {} : { env: launch.env, ...(launch.fence ?? {}) }) });
+                ...(launch === null ? {} : { env: launch.env, ...(setupFence ?? {}) }) });
             log += `$ ${setup.command}\n${prepared.stdout}${prepared.stderr}\n`;
             if (prepared.code !== 0)
                 return { state: "failed", said: `The project's setup failed before ${script.name} ran (exit ${prepared.code}).\n${tail(`${prepared.stdout}\n${prepared.stderr}`)}`, log, exitCode: prepared.code };
@@ -385,7 +422,15 @@ async function runCheck(store, flow, stage, script, card, now, io) {
             answers: (stage.routes ?? []).map(one => one.answer),
         };
         const env = { FLOW_NAME: flow.name, FLOW_CARD_ID: String(card.id), FLOW_CARD_TITLE: card.title, FLOW_COMMIT: commit ?? "", FLOW_SCRIPT: script.name, FLOW_PROJECT: flow.repo };
-        const ran = await runCode({ script, cwd: path, root: copy ? path : flow.repo, input, env, secrets, scratch: io.scratch, shell: io.shell, launch });
+        // Checked again right before the script: the flow or its script may have changed while the setup ran.
+        if (wantsBrowser) {
+            const still = running === null ? { allowed: false, said: "This flow's drawing can't be read." } : browserStanding(store, flow.id, stage.id, { definition: running, script });
+            if (!still.allowed)
+                return { state: "failed", said: still.said, log };
+        }
+        // And at every spawn attempt (a retry after a failed spawn too): revoked or changed meanwhile, nothing starts.
+        const stillApproved = !wantsBrowser || running === null ? undefined : () => browserStanding(store, flow.id, stage.id, { definition: running, script }).allowed;
+        const ran = await runCode({ script, cwd: path, root: copy ? path : flow.repo, input, env, secrets, scratch: io.scratch, shell: io.shell, launch, ...(stillApproved === undefined ? {} : { beforeSpawn: stillApproved }) });
         log += ran.log;
         const output = ran.output === "" ? undefined : ran.output;
         // Where it ran goes at the end of the first line: "run-tests failed (exit 1) on main."
@@ -407,6 +452,11 @@ async function runCheck(store, flow, stage, script, card, now, io) {
         rmSync(path, { recursive: true, force: true });
     }
 }
+/** A fence's grants without Chromium's service (a flow's setup, beside a script zone that has it). */
+function withoutBrowser(grants) {
+    const { browser: _scriptOnly, ...rest } = grants;
+    return rest;
+}
 /** An update: a comment on the issue the card came from, and closing it if the zone says so. */
 async function updateSource(store, stage, card, io, now) {
     const source = card.source;