toolroll 0.9.86 → 0.9.87

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

@@ -1,13 +1,23 @@
 import { type GalleryAnswers, type GalleryPreview, type GalleryTemplate, type GalleryTool } from "./flow-gallery.js";
 import { type FlowDefinition, type FlowStage } from "./flows.js";
-import { type Html } from "./html.js";
+import { type Html, type HtmlValue } from "./html.js";
 export declare const GALLERY_CSS: string;
 /** 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 declare function mainPath(definition: FlowDefinition): FlowStage[];
-/** 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 declare function stepStrip(definition: FlowDefinition): Html;
-/** The gallery: every template, grouped, each with one "Use this". `repo` carries a chosen project to the template's page. */
+/** One row of New flow: name · promise · one line · one outline action (the same shape for templates, kits, recipes and starters). */
+export declare function templateRow(options: {
+    name: string;
+    promise: string;
+    line?: HtmlValue;
+    action?: HtmlValue;
+    attrs?: Html;
+}): Html;
+/** The groups New flow filters by: the template groups, then kits, recipes and starter flows. */
+export declare const NEW_FLOW_GROUPS: ReadonlyArray<readonly [key: string, label: string]>;
+/** The templates as rows, grouped (or one group): each with one "Use this". `repo` carries a chosen project to the template's page. */
 export declare function galleryHtml(input: {
     repo: string | null;
     canUse: boolean;
@@ -15,8 +25,35 @@ export declare function galleryHtml(input: {
         id: string;
         state: "connected" | "open" | "taken";
     }[] | null;
+    group?: string;
+}): Html;
+/**
+ * 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 declare function newFlowHtml(input: {
+    repo: string | null;
+    projects: readonly {
+        path: string;
+        name: string;
+    }[];
+    canUse: boolean;
+    group: string;
+    connections: readonly {
+        id: string;
+        state: "connected" | "open" | "taken";
+    }[] | null;
+    ask: {
+        value: string;
+        error: string | null;
+    };
+    kits: Html;
+    recipes: Html;
+    starters: Html;
+    said: string | null;
+    problem: string | null;
 }): Html;
-/** 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 declare function galleryUseHtml(input: {
     template: GalleryTemplate;
     projects: readonly {

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-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-unattended-words.d.ts

@@ -1,6 +1,26 @@
 /** The words a "runs on its own" grant signs (flow-unattended.ts), kept free of server imports so the flow page's
  * signing form says each limit exactly as the signature will. */
 export declare const dollarWords: (micro: number) => string;
+/** The most runs a day a grant may allow. */
+export declare const UNATTENDED_MAX_RUNS = 50;
+/** The largest per-attempt budget a grant may name: $100. */
+export declare const UNATTENDED_MAX_BUDGET_MICROUSD = 100000000;
+/** A per-attempt budget as typed ("5", "$7.50", "" for no cap), the one way the server and the flow page read it. */
+export declare function unattendedBudgetOf(typed: string): {
+    ok: true;
+    value: number | null;
+} | {
+    ok: false;
+    message: string;
+};
+/** Runs a day as typed ("3", "" for no limit), the one way the server and the flow page read it. */
+export declare function unattendedRunsOf(typed: string): {
+    ok: true;
+    value: number | null;
+} | {
+    ok: false;
+    message: string;
+};
 /** "Oct 19": the end's day, where space is short (the exact time goes beside it, on hover). */
 export declare const untilDayWords: (iso: string) => string;
 /** "Oct 19, 14:05 UTC": the expiry as every surface says it. */

package/dist/flow-unattended-words.js

@@ -1,6 +1,30 @@
 /** The words a "runs on its own" grant signs (flow-unattended.ts), kept free of server imports so the flow page's
  * signing form says each limit exactly as the signature will. */
 export const dollarWords = (micro) => `$${(micro / 1_000_000).toFixed(2)}`;
+/** The most runs a day a grant may allow. */
+export const UNATTENDED_MAX_RUNS = 50;
+/** The largest per-attempt budget a grant may name: $100. */
+export const UNATTENDED_MAX_BUDGET_MICROUSD = 100_000_000;
+/** A per-attempt budget as typed ("5", "$7.50", "" for no cap), the one way the server and the flow page read it. */
+export function unattendedBudgetOf(typed) {
+    const text = typed.trim().replace(/^\$/, "");
+    if (text === "")
+        return { ok: true, value: null };
+    const value = Number(text);
+    if (!/^\d+(\.\d{1,2})?$/.test(text) || value <= 0 || Math.round(value * 1_000_000) > UNATTENDED_MAX_BUDGET_MICROUSD)
+        return { ok: false, message: `Give the budget in dollars, up to ${dollarWords(UNATTENDED_MAX_BUDGET_MICROUSD)}, or leave it empty.` };
+    return { ok: true, value: Math.round(value * 1_000_000) };
+}
+/** Runs a day as typed ("3", "" for no limit), the one way the server and the flow page read it. */
+export function unattendedRunsOf(typed) {
+    const text = typed.trim();
+    if (text === "")
+        return { ok: true, value: null };
+    const value = Number(text);
+    if (!/^\d+$/.test(text) || !Number.isInteger(value) || value < 1 || value > UNATTENDED_MAX_RUNS)
+        return { ok: false, message: `Give runs a day as 1 to ${UNATTENDED_MAX_RUNS}, or leave it empty.` };
+    return { ok: true, value };
+}
 /** "Oct 19": the end's day, where space is short (the exact time goes beside it, on hover). */
 export const untilDayWords = (iso) => new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" }).format(new Date(iso));
 /** "Oct 19, 14:05 UTC": the expiry as every surface says it. */

package/dist/flow-unattended.d.ts

@@ -8,10 +8,8 @@ export declare const FLOW_ACCEPTANCE: {
     report: AcceptanceCriterion[];
     task: AcceptanceCriterion[];
 };
-/** The most runs a day a grant may allow. */
-export declare const UNATTENDED_MAX_RUNS = 50;
-/** The largest per-attempt budget a grant may name: $100. */
-export declare const UNATTENDED_MAX_BUDGET_MICROUSD = 100000000;
+/** The limits a grant may name, and their one parser, live with its words (the flow page validates with them too). */
+export { UNATTENDED_MAX_BUDGET_MICROUSD, UNATTENDED_MAX_RUNS } from "./flow-unattended-words.js";
 /** The code a script schedule runs, as signed: the script's version and content digest, and for one that runs a project
  * file, that file's path and, sorted by path, the digest of its bytes and of every project file it statically imports. */
 export type SignedScript = {
@@ -77,7 +75,7 @@ export type UnattendedGrant = {
  * revision signed, and neither project protected. Shared by every dispatch belt. */
 export declare const grantStandsSql: (digest: string, now: string, repo: string) => string;
 /** Why a grant ended, as its row and ledger line say it. A renewal's ledger line is the new signature's. */
-export type UnattendedEnd = "expired" | "revoked" | "renewed" | "schedule changed" | "script changed" | "project protected" | "access changed";
+export type UnattendedEnd = "expired" | "revoked" | "renewed" | "flow changed" | "schedule changed" | "script changed" | "project protected" | "access changed";
 /**
  * The one road for what ends grants from outside this module (store.ts calls it): a flow's schedule added, paused,
  * resumed or removed; a project's approval rules protecting work; an account's access or standing changing. Every live
@@ -222,6 +220,12 @@ export type UnattendedView = {
         optional: string | null;
     }[];
     schedulesDigest: string;
+    /** No live grant, and the latest one was ended by a change (the flow, a script, a schedule, the project's rules or
+     * the signer's access) before it would have run out: why, and when, so the page says it no longer runs on its own. */
+    ended: {
+        why: string;
+        at: string;
+    } | null;
 };
 export declare function unattendedViewOf(store: Store, flow: FlowRow, viewer: {
     name: string;