toolroll 0.9.30 → 0.9.31

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.9.31 — 2026-10-04
+
+- **Flow templates for your integrations.** Nine new templates put connected
+  tools to work: UI inspiration (Mobbin), Metrics digest and Fix the biggest
+  drop-off (PostHog), Outage to cause (Better Stack), Figma frame to pull
+  request, Worker errors to fix (Cloudflare), Failed deploy to fix (Vercel),
+  Linear issues to PRs, and Support to bug fix (Intercom). Error to fix now
+  reads stack traces through Sentry. Each card shows its tool's logo and
+  whether it's connected; one that isn't offers Connect first. Research steps
+  only read, and nothing merges.
+- **Templates show their steps.** The unlabeled boxes on each template are
+  now a named step strip, like "Find the drop-off → You choose → Build the fix
+  → Pull request → Sent to you", with your steps marked.
+
 ## 0.9.30 — 2026-10-04
 
 - **Long tasks can be planned.** 0.9.28 let task goals run to 8,000

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

@@ -1,17 +1,19 @@
-/**
- * The flow gallery in the console (Flows → New and Settings → Flows): cards grouped by what they're for, each with
- * its promise, a small drawing of its zones, 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.
- */
-import { type GalleryAnswers, type GalleryPreview, type GalleryTemplate } from "./flow-gallery.js";
-import { type FlowDefinition } from "./flows.js";
+import { type GalleryAnswers, type GalleryPreview, type GalleryTemplate, type GalleryTool } from "./flow-gallery.js";
+import { type FlowDefinition, type FlowStage } from "./flows.js";
 export declare const GALLERY_CSS: string;
-/** A small drawing of a flow's zones where they sit on its canvas, with its paths; a person's decisions stand out. */
-export declare function zonesDiagram(definition: FlowDefinition, label: string): 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. */
+export declare function stepStrip(definition: FlowDefinition): string;
 /** The gallery: every template, grouped, 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;
+    connections?: readonly {
+        id: string;
+        state: "connected" | "open" | "taken";
+    }[] | null;
 }): string;
 /** A template's page: its questions, then what it will do and never do, then Create. */
 export declare function galleryUseHtml(input: {
@@ -27,4 +29,7 @@ export declare function galleryUseHtml(input: {
     problem: string | null;
     csrf: string;
     diagram: FlowDefinition | null;
+    /** The template's tools in this project; `said` is how the last Connect went. */
+    tools?: readonly GalleryTool[];
+    said?: string | null;
 }): string;

package/dist/flow-gallery-ui.js

@@ -1,22 +1,30 @@
 /**
  * The flow gallery in the console (Flows → New and Settings → Flows): cards grouped by what they're for, each with
- * its promise, a small drawing of its zones, what it needs and "Use this". A template's page asks only what it
+ * 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.
+ * A template's tools show their marks and whether the project has them; one it lacks offers Connect first.
  */
-import { BLANK, GALLERY, GALLERY_GROUPS, galleryDiagram, OUTDATED_COMMANDS, SEND_RESULT } from "./flow-gallery.js";
+import { brandMarkHtml } from "./brand-mark.js";
+import { BLANK, GALLERY, GALLERY_GROUPS, galleryDiagram, galleryToolsOf, OUTDATED_COMMANDS, SEND_RESULT, sendsAlready } from "./flow-gallery.js";
 import { choiceTargets } from "./flows.js";
 const e = (value) => String(value ?? "").replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 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}` +
-    `.gallery-zones{display:block;width:100%;height:56px;border-radius:8px;background:var(--so-raised)}.gallery-zones rect{fill:var(--so-paper);stroke:var(--so-input-line);stroke-width:1.5}` +
-    `.gallery-zones rect[data-person="true"]{fill:var(--so-signal-soft,var(--so-raised));stroke:var(--so-ink)}.gallery-zones line{stroke:var(--so-input-line);stroke-width:1.5}` +
+    // 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}` +
-    `.gallery-use{max-width:720px;min-width:0}.gallery-use .gallery-zones{height:88px;margin:4px 0 12px}.gallery-use form{display:grid;gap:12px;margin:0}.gallery-use label{display:grid;gap:4px;font-weight:500}` +
+    // 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}` +
@@ -24,33 +32,47 @@ export const GALLERY_CSS = `.gallery{max-width:1120px;min-width:0}.gallery h2{ma
     `.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]{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 .gallery-card a.button-link{min-height:44px;align-self:stretch;justify-content:center}` +
+    `.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}}`;
-/** A small drawing of a flow's zones where they sit on its canvas, with its paths; a person's decisions stand out. */
-export function zonesDiagram(definition, label) {
-    const zones = definition.stages.map(one => one.zone);
-    const minX = Math.min(...zones.map(one => one.x)), minY = Math.min(...zones.map(one => one.y));
-    const maxX = Math.max(...zones.map(one => one.x + one.w)), maxY = Math.max(...zones.map(one => one.y + one.h));
-    const pad = 40;
-    const box = `${minX - pad} ${minY - pad} ${maxX - minX + pad * 2} ${maxY - minY + pad * 2}`;
-    const centre = (id) => { const at = definition.stages.find(one => one.id === id)?.zone; return at === undefined ? null : { x: at.x + at.w / 2, y: at.y + at.h / 2 }; };
-    const lines = definition.stages.flatMap(stage => [stage.next, ...(stage.sort?.answers.map(one => one.to) ?? []), ...(stage.routes?.map(one => one.to) ?? []), ...choiceTargets(stage)].map(to => {
-        const from = centre(stage.id), end = centre(to);
-        return from === null || end === null ? "" : `<line x1="${from.x}" y1="${from.y}" x2="${end.x}" y2="${end.y}" vector-effect="non-scaling-stroke"/>`;
-    })).join("");
-    const rects = definition.stages.map(one => `<rect x="${one.zone.x}" y="${one.zone.y}" width="${one.zone.w}" height="${one.zone.h}" rx="36" data-person="${one.kind === "approval" || one.kind === "choose"}" vector-effect="non-scaling-stroke"/>`).join("");
-    return `<svg class="gallery-zones" viewBox="${box}" preserveAspectRatio="xMidYMid meet" role="img" aria-label="${e(label)}">${lines}${rects}</svg>`;
+/** 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) {
+    const byId = new Map(definition.stages.map(one => [one.id, one]));
+    const path = [];
+    for (let at = byId.get(definition.start); at !== undefined && at.kind !== "done" && !path.includes(at);) {
+        path.push(at);
+        const ways = [...(at.sort?.answers.map(one => one.to) ?? []), ...choiceTargets(at), at.next, ...(at.routes?.map(one => one.to) ?? [])].map(id => id === null ? undefined : byId.get(id));
+        if (at.kind === "check")
+            ways.push(at.onFail === null ? undefined : byId.get(at.onFail));
+        at = at.kind === "check" ? ways.find(one => one !== undefined && one.kind !== "done") : ways.find(one => one !== undefined);
+    }
+    return path;
 }
-const needsList = (template) => template.needs.length === 0 ? `<ul class="gallery-needs"><li>Nothing to connect</li></ul>`
+/** 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. */
+export function stepStrip(definition) {
+    return `<ol class="gallery-steps" aria-label="Steps">${mainPath(definition).map((one, i) => {
+        const name = e(stepName(one));
+        return `<li>${i === 0 ? "" : `<span aria-hidden="true">→</span>`}${one.kind === "choose" || one.kind === "approval" ? `<b data-person>${name}</b>` : name}</li>`;
+    }).join("")}</ol>`;
+}
+const needsList = (template) => template.needs.length === 0 ? (template.tools ?? []).length > 0 ? "" : `<ul class="gallery-needs"><li>Nothing to connect</li></ul>`
     : `<ul class="gallery-needs" aria-label="Needs">${template.needs.map(one => `<li>${e(one)}</li>`).join("")}</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 ? "" : `<span class="integration-state integration-state--${STATE[tool.state][0]}"><i aria-hidden="true"></i>${STATE[tool.state][1]}</span>`;
+const toolMark = (tool) => brandMarkHtml(tool.id.replace(/-desktop$/, ""), tool.label, tool.state === "connected");
+const toolsList = (tools) => tools.length === 0 ? ""
+    : `<ul class="gallery-tools" aria-label="Tools">${tools.map(one => `<li data-tool="${e(one.id)}" data-state="${one.state ?? "unknown"}">${toolMark(one)}<strong>${e(one.label)}</strong>${toolState(one)}</li>`).join("")}</ul>`;
 /** The gallery: every template, grouped, 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 definition = galleryDiagram(template);
         return `<article class="gallery-card" data-template="${e(template.id)}"><h3>${e(template.name)}</h3><p class="gallery-promise">${e(template.promise)}</p>` +
-            zonesDiagram(definition, `Zones: ${definition.stages.map(one => one.title).join(", ")}`) + needsList(template) +
+            stepStrip(definition) + toolsList(galleryToolsOf(template, definition, input.repo === null ? null : input.connections ?? null)) + needsList(template) +
             (input.canUse ? `<a class="button-link" href="${e(href(template.id))}" aria-label="Use ${e(template.name)}">Use this</a>` : "") + `</article>`;
     };
     const groups = GALLERY_GROUPS.map(group => `<h2 id="gallery-${group.id}">${e(group.label)}</h2><div class="gallery-grid" data-group="${group.id}">${GALLERY.filter(one => one.group === group.id).map(card).join("")}</div>`).join("");
@@ -59,28 +81,48 @@ export function galleryHtml(input) {
 /** A template's page: its questions, then what it will do and never do, then Create. */
 export function galleryUseHtml(input) {
     const { template } = input;
+    const tools = input.tools ?? input.preview?.tools ?? [];
+    // A tool added another way is there: only one the project lacks is missing.
+    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 = `<p class="gallery-tool-head">${toolMark(tool)} <strong>${e(tool.label)}</strong> ${toolState(tool)}</p>`;
+        // Added another way, it is there: nothing to connect.
+        if (tool.state === "connected" || tool.state === "taken" || input.csrf === "")
+            return `<div class="gallery-connect" data-tool="${e(tool.id)}" data-state="${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 `<div class="gallery-connect" data-tool="${e(tool.id)}" data-state="open">${head}<form method="post" action="/settings/tools/connect">` +
+            `<input type="hidden" name="csrf" value="${e(input.csrf)}"><input type="hidden" name="repo" value="${e(input.repo)}"><input type="hidden" name="shown" value="${e(input.repo)}"><input type="hidden" name="template" value="${e(template.id)}">` +
+            `<p class="meta">${e(how)}</p><label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label>` +
+            `<button name="service" value="${e(tool.id)}">Connect ${e(tool.label)}</button></form></div>`;
+    };
+    const toolsBlock = tools.length === 0 ? "" : `<section class="gallery-tools-use" aria-label="Tools">${tools.map(connect).join("")}</section>`;
+    // Made without a tool, the preview names the zone that needs it.
+    const zones = (tool) => tool.zones.map(zone => `“${e(zone)}”`).join(" and ");
+    const needing = missing.filter(one => one.zones.length > 0).map(one => `<p class="meta" data-needs-tool="${e(one.id)}">${zones(one)} need${one.zones.length === 1 ? "s" : ""} ${e(one.label)}, which isn't connected.</p>`).join("") +
+        tools.filter(one => one.state === "taken" && one.zones.length > 0).map(one => `<p class="meta" data-tool-taken="${e(one.id)}">${zones(one)} use${one.zones.length === 1 ? "s" : ""} ${e(one.label)}, added another way.</p>`).join("");
     const field = (ask) => {
         const value = input.answers[ask.key] ?? ask.default;
         const hint = ask.hint === undefined ? "" : ` <small>${e(ask.hint)}</small>`;
         if (ask.key === "outdated")
             return `<label>${e(ask.label)}<select name="outdated">${Object.entries(OUTDATED_COMMANDS).map(([id, one]) => `<option value="${id}"${id === value ? " selected" : ""}>${e(one.label)}</option>`).join("")}</select></label>`;
-        return `<label>${e(ask.label)}${hint}<input name="${ask.key}" value="${e(value)}" required maxlength="${ask.key === "command" ? 500 : 100}"${ask.key === "command" ? ' spellcheck="false" autocapitalize="off"' : ""}></label>`;
+        return `<label>${e(ask.label)}${hint}<input name="${ask.key}" value="${e(value)}" required maxlength="${ask.key === "command" ? 500 : ask.key === "team" ? 12 : 100}"${ask.key === "command" ? ' spellcheck="false" autocapitalize="off"' : ask.key === "team" ? ' spellcheck="false" autocapitalize="characters"' : ""}></label>`;
     };
     const project = input.projects.length > 1
         ? `<label>Project<select name="repo">${input.projects.map(one => `<option value="${e(one.path)}"${one.path === input.repo ? " selected" : ""}>${e(one.name)}</option>`).join("")}</select></label>`
         : `<input type="hidden" name="repo" value="${e(input.repo)}">`;
     const preview = input.preview === null ? "" : `<section class="gallery-preview" aria-labelledby="gallery-will">` +
         `<h2 id="gallery-will">What it will do</h2><ul>${input.preview.built.does.map(one => `<li>${e(one)}</li>`).join("")}</ul>` +
-        `<p class="gallery-never">${e(input.preview.built.never)}</p>` +
+        `<p class="gallery-never">${e(input.preview.built.never)}</p>${needing}` +
         (input.preview.startsFrom.length === 0 ? `<p class="meta">Cards start when you add them.</p>` : input.preview.startsFrom.map(one => `<p class="meta">Starts from: ${e(one)}</p>`).join("")) +
         `<details><summary>Every step</summary><ol>${input.preview.steps.map(one => `<li>${e(one.replace(/^\d+\.\s/, ""))}</li>`).join("")}</ol></details></section>`;
     return `<section class="gallery-use" data-gallery-template="${e(template.id)}">` +
-        (input.problem === null ? "" : `<p class="problem" role="alert">${e(input.problem)}</p>`) +
-        `<p>${e(template.promise)}</p>${input.diagram === null ? "" : zonesDiagram(input.diagram, `Zones: ${input.diagram.stages.map(one => one.title).join(", ")}`)}${needsList(template)}` +
+        (input.problem === null ? "" : `<p class="problem" role="alert">${e(input.problem)}</p>`) + (input.said ? `<p role="status">${e(input.said)}</p>` : "") +
+        `<p>${e(template.promise)}</p>${input.diagram === null ? "" : stepStrip(input.diagram)}${needsList(template)}${toolsBlock}` +
         `<form method="post" action="/flows/new/${e(template.id)}" data-gallery-use><input type="hidden" name="csrf" value="${e(input.csrf)}">` +
         `<input type="hidden" name="previewed" value="${e(input.preview?.digest ?? "")}">${project}${template.asks.map(field).join("")}` +
         `<label>Name<input name="name" value="${e(input.name)}" maxlength="80"></label>` +
-        `<label class="gallery-check"><input type="checkbox" name="${SEND_RESULT.key}" value="yes"${input.answers[SEND_RESULT.key] === "yes" ? " checked" : ""} data-send-result><span>${e(SEND_RESULT.title)}<small>When a card finishes, what was done comes to you in your chat apps.</small></span></label>${preview}` +
-        `<p class="gallery-actions">${input.preview === null ? "" : `<button type="submit" name="intent" value="create">Create flow</button>`}<button type="submit" name="intent" value="preview" class="secondary">${input.preview === null ? "Preview" : "Update preview"}</button></p>` +
+        (sendsAlready(template) ? "" : `<label class="gallery-check"><input type="checkbox" name="${SEND_RESULT.key}" value="yes"${input.answers[SEND_RESULT.key] === "yes" ? " checked" : ""} data-send-result><span>${e(SEND_RESULT.title)}<small>When a card finishes, what was done comes to you in your chat apps.</small></span></label>`) + preview +
+        `<p class="gallery-actions">${input.preview === null ? "" : `<button type="submit" name="intent" value="create"${missing.length > 0 ? ' 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>` +
         `</form><p class="meta"><a href="/flows/new">All templates</a></p></section>`;
 }

package/dist/flow-gallery.d.ts

@@ -15,7 +15,7 @@ export declare const GALLERY_GROUPS: readonly [{
 }];
 export type GalleryGroup = (typeof GALLERY_GROUPS)[number]["id"];
 /** What a template may ask, besides the project. */
-export type AskKey = "label" | "branch" | "schedule" | "time" | "command" | "outdated";
+export type AskKey = "label" | "branch" | "schedule" | "time" | "command" | "outdated" | "team";
 export type GalleryAsk = {
     key: AskKey;
     default: string;
@@ -36,6 +36,8 @@ export type GalleryTemplate = {
     promise: string;
     /** What it needs to work, in a word or two each. */
     needs: string[];
+    /** The project tools it puts to work: one-click service ids (ONE_CLICK) or "figma-desktop". */
+    tools?: readonly string[];
     /** Watches a GitHub repository, so the project must be on GitHub. */
     github?: boolean;
     asks: GalleryAsk[];
@@ -55,10 +57,28 @@ export type GalleryTemplate = {
     does: string[];
     never: string;
 };
+/** The card's Linear issue key, read from its source as the Linear trigger stored it ("Linear ENG-123"); "none" skips the comment. */
+export declare const LINEAR_KEY = "key=\"$(sed -n 's/.*\"source\":{\"kind\":\"linear\",\"label\":\"Linear \\([A-Z][A-Z0-9]*-[0-9][0-9]*\\)\".*/\\1/p' | head -n 1)\"\nif [ -n \"$key\" ]; then echo \"$key\"; echo \"goto: Found\"; else echo none; echo \"goto: None\"; fi";
 export declare const GALLERY: readonly GalleryTemplate[];
 /** The blank flow, for starting from nothing. */
 export declare const BLANK: GalleryTemplate;
 export declare const galleryTemplateOf: (id: string) => GalleryTemplate | null;
+/** A tool a template uses: where the chosen project stands with it (null with no project), and the zones that use it. */
+export type GalleryTool = {
+    id: string;
+    label: string;
+    state: "connected" | "open" | "taken" | null;
+    zones: string[];
+};
+/** A tool's name ("Mobbin", "Figma (desktop app)"); null for an id that's neither a one-click service nor an app on this computer. */
+export declare const galleryToolLabel: (id: string) => string | null;
+/** The zones that use a tool: a tool step on it, or a research or build step that names it ("With Mobbin, …"). */
+export declare function zonesUsing(definition: FlowDefinition, id: string): string[];
+/** A template's tools, each with its state in a project's connections (connectionsOf), or none without a project. */
+export declare function galleryToolsOf(template: GalleryTemplate, definition: FlowDefinition, connections: readonly {
+    id: string;
+    state: "connected" | "open" | "taken";
+}[] | null): GalleryTool[];
 export type GalleryAnswers = Record<string, string>;
 /** Each question's default for a project: the branch pull requests go to, when that's set up. */
 export declare function galleryDefaults(store: Store, template: GalleryTemplate, repo: string | null): GalleryAnswers;
@@ -68,7 +88,10 @@ export declare const SEND_RESULT: {
     readonly title: "Send me the result";
     readonly does: "When a card finishes, sends you what was done (its summary, links and screenshots) in your chat apps.";
 };
-/** A flow with "Send me the result" before its end: every path into its main Done zone passes through it first. */
+/** A template that already sends its result to the person: it isn't offered "Send me the result" again. */
+export declare const sendsAlready: (template: GalleryTemplate) => boolean;
+/** A flow with "Send me the result" before its end: every path into its main Done zone passes through it first.
+ * A flow that already has a send zone is left as it is, so nobody gets the result twice. */
 export declare function withSendResult(definition: FlowDefinition): FlowDefinition;
 /** The answers, checked in plain words, with what they fill in. Throws. */
 export declare function checkAnswers(template: GalleryTemplate, given: GalleryAnswers): GalleryAnswers;
@@ -96,6 +119,7 @@ export type GalleryPreview = {
     built: GalleryBuilt;
     startsFrom: string[];
     steps: string[];
+    tools: GalleryTool[];
     digest: string;
 };
 /** What using a template will do, in words, before anything is made: its triggers checked as the flow will have them. Throws. */

package/dist/flow-gallery.js

@@ -9,8 +9,11 @@
  * shared flow file later. Every one is built only from existing zone and trigger kinds, and none merges:
  * a pull request it opens waits for a person.
  *
- * Every template can end with "Send me the result" (a "Send to me" zone before its end), off unless asked for
- * (`send-result: yes`): what the flow did reaches the person in their chat apps.
+ * A template that puts a connected tool to work names it (`tools`): a one-click service (ONE_CLICK) or the Figma
+ * desktop app. Its research steps read that tool and only read; a build gets the project's tools as any build does.
+ *
+ * Every template without its own send zone can end with "Send me the result" (a "Send to me" zone before its end),
+ * off unless asked for (`send-result: yes`): what the flow did reaches the person in their chat apps.
  */
 import { createHash } from "node:crypto";
 import { scanForSecrets } from "./evidence.js";
@@ -19,6 +22,7 @@ import { saveScript, validateScript } from "./flow-scripts.js";
 import { isToolrollRepo, planeReviewSteps } from "./flow-starters.js";
 import { addFlowTriggerTo, describeTrigger, githubRepoOf, scheduleFromWords, validateTriggerConfig } from "./flow-triggers.js";
 import { choiceTargets, clockTime, flowFromSteps, flowTerms, FLOW_TEMPLATES, ISSUE_LABEL } from "./flows.js";
+import { connectionsOf, localConnectOf, oneClickOf } from "./mcp-connect.js";
 import { publishingOf } from "./pull-request-flow.js";
 export const GALLERY_GROUPS = [
     { id: "ship", label: "Ship code" },
@@ -32,6 +36,9 @@ export const OUTDATED_COMMANDS = {
     pip: { label: "pip (pip list --outdated)", command: "out=\"$(python3 -m pip list --outdated 2>/dev/null | tail -n +3)\"\nif [ -n \"$out\" ]; then echo \"$out\"; exit 1; fi" },
     cargo: { label: "cargo (cargo outdated)", command: "cargo outdated --root-deps-only --exit-code 1" },
 };
+/** The card's Linear issue key, read from its source as the Linear trigger stored it ("Linear ENG-123"); "none" skips the comment. */
+export const LINEAR_KEY = `key="$(sed -n 's/.*"source":{"kind":"linear","label":"Linear \\([A-Z][A-Z0-9]*-[0-9][0-9]*\\)".*/\\1/p' | head -n 1)"
+if [ -n "$key" ]; then echo "$key"; echo "goto: Found"; else echo none; echo "goto: None"; fi`;
 const NEVER_MERGES = "Never merges. Each pull request waits for you.";
 const work = (text) => `${text}\n\nChanges asked for (if any): {{note}}`;
 const research = (text) => `${text}\n\nFeedback to address (if any): {{note}}`;
@@ -40,6 +47,11 @@ const pr = { id: "pull-request", title: "Pull request", kind: "pull-request" };
 const drawn = (id) => structuredClone(FLOW_TEMPLATES.find(one => one.id === id).definition);
 const about = (id) => FLOW_TEMPLATES.find(one => one.id === id).about;
 const SORTS = "OpenRouter (Jev sorts)";
+const WEEKLY = { key: "schedule", default: "monday 09:00", label: "When", hint: "Like “monday 09:00”." };
+const weekly = (title) => ({ kind: "schedule", schedule: "{{ask.schedule}}", title });
+const send = (title) => ({ id: "send", title, kind: "send" });
+/** A person's choice: build it, or end there. A reply goes to the build as its note. */
+const choose = (title, yes, build) => ({ id: "choose", title, kind: "choose", options: [{ label: yes, goesTo: build }, { label: "Ignore", goesTo: "end" }], ifReplied: build });
 export const GALLERY = [
     // ---------------------------------------------------------------- Ship code
     {
@@ -137,6 +149,50 @@ export const GALLERY = [
         id: "effort-routing", name: "Effort routing", group: "ship", promise: "Small changes go straight to a build; big ones get a plan and a person first.", needs: [SORTS], asks: [], definition: drawn("effort-routing"), triggers: [],
         does: [about("effort-routing")], never: "Never builds a big change before you approve its plan.",
     },
+    {
+        id: "ui-inspiration", name: "UI inspiration", group: "ship", tools: ["mobbin"],
+        promise: "Each week, three real app examples for one part of your UI, ready to build.",
+        needs: ["GitHub"], asks: [WEEKLY],
+        steps: [
+            { id: "find", title: "Find examples", kind: "report", instructions: research("Pick one surface of this project (a screen or a flow) that no recent commit or earlier inspiration covered.\n\nWith Mobbin, read only: find 3 real app examples for it. For each: the pattern, why it fits here, how it plugs into this code (files and components), and a Mobbin screenshot.") },
+            choose("Implement, remix or ignore?", "Implement", "build"),
+            { id: "build", title: "Build it", kind: "task", instructions: work("Build the chosen example from the report into this project with its own components. A note below is a remix: follow it.\n\nThe report:\n{{stage.find}}") },
+            pr,
+            send("Send the result"),
+        ],
+        triggers: [weekly("UI inspiration")],
+        does: ["Picks one part of your UI {{ask.schedule-words}} and finds 3 Mobbin examples for it, each with a screenshot.", "You choose Implement or Ignore, or reply with a remix note.", "What you choose is built as a task, under your usual approvals, and opens a pull request.", "The result is sent to you."],
+        never: NEVER_MERGES,
+    },
+    {
+        id: "figma-to-pr", name: "Figma frame to pull request", group: "ship", tools: ["figma-desktop"],
+        promise: "Paste a Figma frame link; get it built in your own components.",
+        needs: ["GitHub"], asks: [],
+        steps: [
+            { id: "build", title: "Build the frame", kind: "task", instructions: work("Build this Figma frame in the project's own components and styles: {{card.title}}\n\n{{card.description}}\n\nRead the frame with the Figma desktop app's tools (its code, screenshot and variables). Reuse existing components; add one only where none fits. Take screenshots before and after, on desktop and phone.") },
+            pr,
+            send("Send before and after"),
+        ],
+        triggers: [{ kind: "button", label: "Build a Figma frame", questions: ["Figma frame link", "Notes (optional)"] }],
+        does: ["Adds a “Build a Figma frame” button that asks for the frame link.", "Builds the frame in your components as a task, under your usual approvals, with desktop and phone screenshots.", "Opens a pull request and sends you before and after."],
+        never: NEVER_MERGES,
+    },
+    {
+        id: "linear-to-prs", name: "Linear issues to PRs", group: "ship", tools: ["linear"],
+        promise: "Labelled Linear issues are built, and the issue gets the pull request link.",
+        needs: ["GitHub", "A Linear API key"], asks: [{ key: "team", default: "ENG", label: "Linear team", hint: "Its short key, like ENG." }, { key: "label", default: ISSUE_LABEL, label: "Issue label" }],
+        // The issue's key comes from the card's source ("Linear ENG-123"), as the trigger stored it, never from a model.
+        scripts: [{ name: "linear-issue-key", about: "Prints the Linear issue the card came from, or none.", body: LINEAR_KEY, timeoutMinutes: 1 }],
+        steps: [
+            { id: "build", title: "Build it", kind: "task", instructions: work("Build this issue: {{card.title}}\n\n{{card.description}}") },
+            pr,
+            { id: "issue-key", title: "Find the issue key", kind: "check", script: "{{script.linear-issue-key}}", runIn: "folder", routes: [{ answer: "Found", goesTo: "comment" }, { answer: "None", goesTo: "Done" }] },
+            { id: "comment", title: "Comment on the issue", kind: "tool", server: "linear", tool: "create_comment", args: { issueId: "{{stage.issue-key}}", body: "A pull request is ready: {{stage.pull-request}}" } },
+        ],
+        triggers: [{ kind: "linear", team: "{{ask.team}}", label: "{{ask.label}}" }],
+        does: ["Watches {{ask.team}} issues labelled “{{ask.label}}” in Linear.", "Builds each one as a task, under your usual approvals, and opens a pull request.", "Comments the pull request link on the issue, through Linear."],
+        never: NEVER_MERGES,
+    },
     // ---------------------------------------------------------- Keep it healthy
     {
         id: "fix-ci", name: "Fix failing CI", group: "health",
@@ -211,7 +267,7 @@ export const GALLERY = [
         never: NEVER_MERGES,
     },
     {
-        id: "error-to-fix", name: "Error to fix", group: "health",
+        id: "error-to-fix", name: "Error to fix", group: "health", tools: ["sentry"],
         promise: "New errors from Sentry or any error tracker are sorted, researched and fixed.",
         needs: ["A webhook from Sentry or another tracker", SORTS], asks: [],
         steps: [
@@ -220,7 +276,7 @@ export const GALLERY = [
                     { answer: "Fix it", means: "It comes from our code and is new, frequent, or hurts people", goesTo: "find-cause" },
                     { answer: "Ignore", means: "Noise: bots, browser extensions, a third party's outage, or something known and expected", goesTo: "ignored" },
                 ], ifNotSure: "by-hand" },
-            { id: "find-cause", title: "Find the cause", kind: "report", instructions: research("An error came in: {{card.title}}\n\n{{card.description}}\n\nFind the cause in this code: cite the files and lines, say why it happens and what change fixes it.") },
+            { id: "find-cause", title: "Find the cause", kind: "report", instructions: research("An error came in: {{card.title}}\n\n{{card.description}}\n\nWith Sentry, read the issue's stack trace and latest events. Read only. Find the cause in this code: cite the files and lines, say why it happens and what change fixes it.") },
             { id: "fix", title: "Fix it", kind: "task", instructions: work("Fix this error, with a regression check where one fits: {{card.title}}\n\nThe report:\n{{stage.find-cause}}") },
             owner("review", "Review the fix"),
             { ...pr, next: "Done" },
@@ -233,6 +289,56 @@ export const GALLERY = [
             "Each kept error is researched, then fixed as a task, under your usual approvals.", "What you approve opens a pull request."],
         never: NEVER_MERGES,
     },
+    {
+        id: "outage-to-cause", name: "Outage to cause", group: "health", tools: ["betterstack"],
+        promise: "A Better Stack incident gets its likely cause, and a fix if you want one.",
+        needs: ["A webhook from Better Stack", "GitHub"], asks: [],
+        steps: [
+            { id: "find-cause", title: "Find the cause", kind: "report", instructions: research("A Better Stack incident: {{card.title}}\n\n{{card.description}}\n\nWith Better Stack, read the incident and its monitor's recent history. Read this project's commits and deploys from before it started. Read only. Say the likely cause, with times, and what change fixes it.") },
+            choose("Fix or ignore?", "Fix", "fix"),
+            { id: "fix", title: "Fix it", kind: "task", instructions: work("Fix the cause of this outage, with a regression check where one fits.\n\nThe report:\n{{stage.find-cause}}") },
+            pr,
+        ],
+        triggers: [{ kind: "webhook", title: "Incident", titleField: "data.attributes.name" }],
+        does: ["Adds a webhook. Once the flow is made, open its Triggers and choose New address, then paste that into Better Stack.", "Reads the incident, its monitor's history and your recent commits and deploys, and sends you the likely cause.", "You choose Fix or Ignore; a fix is built as a task, under your usual approvals, and opens a pull request."],
+        never: NEVER_MERGES,
+    },
+    {
+        id: "worker-errors", name: "Worker errors to fix", group: "health", tools: ["cloudflare"],
+        promise: "Each week, Cloudflare Workers and Pages errors worth fixing get a fix.",
+        needs: ["GitHub", SORTS], asks: [WEEKLY],
+        steps: [
+            { id: "read", title: "Read the errors", kind: "report", instructions: research("With Cloudflare, read this week's Workers and Pages errors and analytics. Read only. List each error with its count, its Worker or Pages project, and when it started. Say “No errors” if there are none.") },
+            { id: "worth-fixing", title: "Worth fixing?", kind: "sort", question: "Do these errors come from this project's code, often enough to fix now?",
+                answers: [
+                    { answer: "Fix it", means: "Errors from our own code that are new, frequent or hurt people", goesTo: "find-cause" },
+                    { answer: "Ignore", means: "No errors, or only noise: bots, a provider's outage, something known", goesTo: "ignored" },
+                ], ifNotSure: "find-cause" },
+            { id: "find-cause", title: "Find the cause", kind: "report", instructions: research("Errors worth fixing:\n{{stage.read}}\n\nWith Cloudflare, read the worst one's logs. Read only. Find the cause in this code, citing files and lines, and say what change fixes it.") },
+            choose("Fix or ignore?", "Fix", "fix"),
+            { id: "fix", title: "Fix it", kind: "task", instructions: work("Fix this error, with a regression check where one fits.\n\nThe report:\n{{stage.find-cause}}") },
+            { ...pr, next: "Done" },
+            { id: "done", title: "Done", kind: "done" },
+            { id: "ignored", title: "Ignored", kind: "done" },
+        ],
+        triggers: [weekly("Worker errors")],
+        does: ["Reads your Cloudflare Workers and Pages errors and analytics {{ask.schedule-words}}.", "Jev decides whether they're worth fixing; if so, finds the cause and sends you a report.", "You choose Fix or Ignore; a fix is built as a task, under your usual approvals, and opens a pull request."],
+        never: NEVER_MERGES,
+    },
+    {
+        id: "failed-deploy", name: "Failed deploy to fix", group: "health", tools: ["vercel"],
+        promise: "A failed Vercel deployment gets its cause found and a fix opened.",
+        needs: ["A webhook from Vercel", "GitHub"], asks: [],
+        steps: [
+            { id: "find-cause", title: "Find the cause", kind: "report", instructions: research("A Vercel deployment failed: {{card.title}}\n\n{{card.description}}\n\nWith Vercel, read the deployment's build log. Read only. Find the cause in this code, citing files and lines, and say what change fixes it.") },
+            { id: "fix", title: "Fix it", kind: "task", instructions: work("Fix this failed deployment without weakening any check.\n\nThe report:\n{{stage.find-cause}}") },
+            pr,
+            send("Send the fix"),
+        ],
+        triggers: [{ kind: "webhook", title: "Failed deployment", titleField: "payload.deployment.name" }],
+        does: ["Adds a webhook. Once the flow is made, open its Triggers and choose New address, then paste that into Vercel for failed deployments.", "Reads the build log and finds the cause.", "Builds a fix as a task, under your usual approvals, opens a pull request and sends it to you."],
+        never: NEVER_MERGES,
+    },
     // ---------------------------------------------------------- Hear from users
     {
         id: "feedback-to-feature", name: "Feedback to feature", group: "users",
@@ -265,6 +371,48 @@ export const GALLERY = [
         id: "triage", name: "Issue triage", group: "users", promise: "Jev sorts new issues into bugs, ideas and questions, and says how urgent each is.", needs: [SORTS], asks: [], definition: drawn("triage"), triggers: [],
         does: [about("triage")], never: "Never closes an issue or replies without your approval.",
     },
+    {
+        id: "metrics-digest", name: "Metrics digest", group: "users", tools: ["posthog"],
+        promise: "Each week, this week against last: signups, activation, retention and top events.",
+        needs: [], asks: [WEEKLY],
+        steps: [
+            { id: "read", title: "Read the numbers", kind: "report", instructions: research("With PostHog, compare this week with last week. Read only. Give signups, activation, retention and the top 10 events, each with its change. Name the biggest change and its likely cause (a release, a campaign, a broken step), citing this week's commits where they fit.") },
+            send("Send the digest"),
+        ],
+        triggers: [weekly("Metrics digest")],
+        does: ["Compares this week's PostHog numbers with last week's, {{ask.schedule-words}}.", "Names the biggest change and its likely cause.", "Sends you the digest."],
+        never: "Never changes PostHog or your code.",
+    },
+    {
+        id: "fix-drop-off", name: "Fix the biggest drop-off", group: "users", tools: ["posthog"],
+        promise: "Each week, the funnel step losing the most people gets a proposed fix.",
+        needs: ["GitHub"], asks: [WEEKLY],
+        steps: [
+            { id: "find", title: "Find the drop-off", kind: "report", instructions: research("With PostHog, find the funnel step that lost the most people this week. Read only. Give the funnel, the step, how many reached it and how many left. Propose one fix in this code, citing files.") },
+            choose("Implement or ignore?", "Implement", "build"),
+            { id: "build", title: "Build the fix", kind: "task", instructions: work("Build the proposed fix for this drop-off.\n\nThe report:\n{{stage.find}}") },
+            pr,
+            send("Send the result"),
+        ],
+        triggers: [weekly("Biggest drop-off")],
+        does: ["Finds the PostHog funnel step losing the most people {{ask.schedule-words}}, with the numbers and one proposed fix.", "You choose Implement or Ignore.", "A fix is built as a task, under your usual approvals, opens a pull request and is sent to you."],
+        never: NEVER_MERGES,
+    },
+    {
+        id: "support-to-fix", name: "Support to bug fix", group: "users", tools: ["intercom"],
+        promise: "Each week, the bugs your customers hit most, ranked, with a fix for the one you pick.",
+        needs: ["GitHub"], asks: [WEEKLY],
+        steps: [
+            { id: "group", title: "Rank the bugs", kind: "report", instructions: research("With Intercom, read this week's conversations. Read only. Group the bug reports by problem, rank them by how many people hit each, and number them, with a count and one example conversation each.") },
+            { id: "choose", title: "Which to fix?", kind: "choose", options: [{ label: "Fix the top one", goesTo: "fix" }, { label: "Ignore", goesTo: "end" }], ifReplied: "fix" },
+            { id: "fix", title: "Fix it", kind: "task", instructions: work("Fix the bug chosen from this ranking: the top one, unless the note names another by number. Add a regression check where one fits.\n\nThe ranking:\n{{stage.group}}") },
+            pr,
+            send("Send the result"),
+        ],
+        triggers: [weekly("Support bugs")],
+        does: ["Reads your Intercom conversations {{ask.schedule-words}} and ranks the bug reports by how many people hit each.", "You fix the top one, reply with the number of another, or ignore them.", "The fix is built as a task, under your usual approvals, opens a pull request and is sent to you."],
+        never: NEVER_MERGES,
+    },
     // ------------------------------------------------------------------ Operations
     ...[
         ["research", "Research a question, have a person check it, then share it.", [], "Never shares an answer you haven't checked."],
@@ -281,6 +429,20 @@ export const GALLERY = [
 /** The blank flow, for starting from nothing. */
 export const BLANK = { id: "blank", name: "Blank flow", group: "ops", promise: about("blank"), needs: [], asks: [], definition: drawn("blank"), triggers: [], does: [about("blank")], never: "Does nothing until you add zones." };
 export const galleryTemplateOf = (id) => id === BLANK.id ? BLANK : GALLERY.find(one => one.id === id) ?? null;
+/** A tool's name ("Mobbin", "Figma (desktop app)"); null for an id that's neither a one-click service nor an app on this computer. */
+export const galleryToolLabel = (id) => oneClickOf(id)?.label ?? localConnectOf(id)?.label ?? null;
+/** The zones that use a tool: a tool step on it, or a research or build step that names it ("With Mobbin, …"). */
+export function zonesUsing(definition, id) {
+    const label = galleryToolLabel(id);
+    if (label === null)
+        return [];
+    const word = new RegExp(`\\b${label.replace(/\s*\(.*\)$/, "").replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\b`);
+    return definition.stages.filter(one => one.tool?.server === id || ((one.kind === "report" || one.kind === "task") && word.test(one.instructions ?? ""))).map(one => one.title);
+}
+/** A template's tools, each with its state in a project's connections (connectionsOf), or none without a project. */
+export function galleryToolsOf(template, definition, connections) {
+    return (template.tools ?? []).map(id => ({ id, label: galleryToolLabel(id) ?? id, state: connections === null ? null : connections.find(one => one.id === id)?.state ?? "open", zones: zonesUsing(definition, id) }));
+}
 /** Each question's default for a project: the branch pull requests go to, when that's set up. */
 export function galleryDefaults(store, template, repo) {
     const publishing = repo === null ? { on: false } : publishingOf(store, repo);
@@ -296,12 +458,17 @@ const oneLine = (value, cap, what) => {
 };
 /** The optional last step every template offers, and the answer that turns it on. */
 export const SEND_RESULT = { key: "send-result", title: "Send me the result", does: "When a card finishes, sends you what was done (its summary, links and screenshots) in your chat apps." };
-/** A flow with "Send me the result" before its end: every path into its main Done zone passes through it first. */
+/** A template that already sends its result to the person: it isn't offered "Send me the result" again. */
+export const sendsAlready = (template) => galleryDiagram(template).stages.some(one => one.kind === "send");
+/** A flow with "Send me the result" before its end: every path into its main Done zone passes through it first.
+ * A flow that already has a send zone is left as it is, so nobody gets the result twice. */
 export function withSendResult(definition) {
+    if (definition.stages.some(one => one.kind === "send"))
+        return definition;
     // Its main end: Done, else an end that isn't a filtered-out one (drawn in rose), else any end.
     const ends = definition.stages.filter(one => one.kind === "done");
     const end = ends.find(one => one.id === "done") ?? ends.find(one => one.zone.color !== "rose") ?? ends[0];
-    if (end === undefined || definition.stages.some(one => one.kind === "send" && one.next === end.id))
+    if (end === undefined)
         return definition;
     let id = "send-result";
     for (let n = 2; definition.stages.some(one => one.id === id); n++)
@@ -352,6 +519,11 @@ export function checkAnswers(template, given) {
         }
         else if (ask.key === "command")
             answers["command"] = oneLine(value, 500, "test command");
+        else if (ask.key === "team") {
+            if (!/^[A-Za-z0-9]{1,12}$/.test(value))
+                throw new Error("Say the Linear team as its short key, like ENG.");
+            answers["team"] = value.toUpperCase();
+        }
         else if (ask.key === "outdated") {
             const manager = OUTDATED_COMMANDS[value];
             if (manager === undefined)
@@ -420,6 +592,9 @@ export function buildFromGallery(store, template, repo, given) {
     const github = githubRepoOf(repo);
     const drawn = template.definition !== undefined ? structuredClone(template.definition)
         : flowFromSteps(fill(template.ownSteps !== undefined && isToolrollRepo(repo) ? template.ownSteps : template.steps, answers, names, github), null);
+    // One that already sends doesn't take the answer, so it reads as it was asked.
+    if (drawn.stages.some(one => one.kind === "send"))
+        delete answers[SEND_RESULT.key];
     const sends = answers[SEND_RESULT.key] === "yes";
     const definition = sends ? withSendResult(drawn) : drawn;
     return { template, repo, answers, definition, triggers: fill(template.triggers, answers, names, github), scripts,
@@ -440,7 +615,7 @@ export function previewGallery(store, template, repo, given, actor, now) {
     const steps = flowTerms(built.definition, null);
     if (built.scripts.some(one => !one.existing))
         steps.push(...built.scripts.filter(one => !one.existing).map(one => `Adds the ${one.name} script to this project: ${one.body.split("\n")[0]}${one.body.includes("\n") ? " …" : ""}`));
-    return { built, startsFrom, steps, digest: galleryDigest(template.id, repo, built.answers) };
+    return { built, startsFrom, steps, tools: galleryToolsOf(template, built.definition, connectionsOf(store, repo)), digest: galleryDigest(template.id, repo, built.answers) };
 }
 /** What a preview showed: the template, the project and the answers. Creating checks the person saw these. */
 export function galleryDigest(id, repo, answers) {

package/dist/mcp-connect.d.ts

@@ -80,12 +80,13 @@ type Server = {
     scopes: string[];
     resource: string | null;
 };
-/** A sign-in on its way: what the callback needs to finish it (kept in the console's memory, 15 minutes). */
+/** A sign-in on its way: what the callback needs to finish it (kept in the console's memory, 15 minutes). `kit` or `template` is the page it returns to. */
 export type ConnectVisit = {
     service: string;
     repo: string;
     by: string;
     kit: string | null;
+    template: string | null;
     verifier: string;
     clientId: string;
     clientSecret: string | null;
@@ -107,6 +108,7 @@ export declare function startConnect(input: {
     by: string;
     origin: string;
     kit?: string | null;
+    template?: string | null;
 }, fetcher?: Fetch, now?: number): Promise<{
     ok: true;
     go: string;

package/dist/mcp-connect.js

@@ -30,10 +30,13 @@ import { envValue } from "./names.js";
 export const ONE_CLICK = [
     { id: "stripe", label: "Stripe", url: "https://mcp.stripe.com/", about: "Payments, customers, refunds and invoices." },
     { id: "notion", label: "Notion", url: "https://mcp.notion.com/mcp", about: "Pages and databases: search, read and write." },
-    { id: "linear", label: "Linear", url: "https://mcp.linear.app/mcp", about: "Issues, projects and comments." },
-    { id: "sentry", label: "Sentry", url: "https://mcp.sentry.dev/mcp", about: "Errors and issues, with their stack traces." },
+    { id: "linear", label: "Linear", url: "https://mcp.linear.app/mcp", about: "Issues, projects and comments.",
+        reads: ["issue", "project", "team", "comment", "label", "cycle", "document", "status", "statuses", "user"] },
+    { id: "sentry", label: "Sentry", url: "https://mcp.sentry.dev/mcp", about: "Errors and issues, with their stack traces.",
+        reads: ["organization", "project", "issue", "detail", "details", "event", "trace", "release", "tag", "attachment"] },
     { id: "atlassian", label: "Jira and Confluence", url: "https://mcp.atlassian.com/v1/mcp", about: "Jira issues and Confluence pages." },
-    { id: "intercom", label: "Intercom", url: "https://mcp.intercom.com/mcp", about: "Customer conversations and contacts." },
+    { id: "intercom", label: "Intercom", url: "https://mcp.intercom.com/mcp", about: "Customer conversations and contacts.",
+        reads: ["conversation", "contact"] },
     { id: "attio", label: "Attio", url: "https://mcp.attio.com/mcp", about: "Your CRM: people, companies, deals and notes." },
     { id: "zapier", label: "Zapier", url: "https://mcp.zapier.com/api/mcp/mcp", about: "Thousands of apps, through the actions you choose in Zapier." },
     { id: "square", label: "Square", url: "https://mcp.squareup.com/mcp", about: "Payments, orders, customers and catalog." },
@@ -42,8 +45,10 @@ export const ONE_CLICK = [
     { id: "webflow", label: "Webflow", url: "https://mcp.webflow.com/mcp", about: "Sites, pages and CMS items." },
     { id: "wix", label: "Wix", url: "https://mcp.wix.com/mcp", about: "Your Wix site, store and bookings." },
     { id: "canva", label: "Canva", url: "https://mcp.canva.com/mcp", about: "Designs: search, create and export." },
-    { id: "vercel", label: "Vercel", url: "https://mcp.vercel.com/", about: "Projects, deployments and logs." },
-    { id: "cloudflare", label: "Cloudflare", url: "https://mcp.cloudflare.com/mcp", about: "Workers, DNS and your Cloudflare account." },
+    { id: "vercel", label: "Vercel", url: "https://mcp.vercel.com/", about: "Projects, deployments and logs.",
+        reads: ["team", "project", "deployment", "build", "runtime", "log", "logs", "vercel", "documentation"] },
+    { id: "cloudflare", label: "Cloudflare", url: "https://mcp.cloudflare.com/mcp", about: "Workers, DNS and your Cloudflare account.",
+        reads: ["account", "worker", "workers", "observability", "analytics", "log", "logs", "page", "pages", "project", "deployment"] },
     // Mobbin's sign-in is its Supabase auth server, on another origin: its protected-resource metadata names it.
     { id: "mobbin", label: "Mobbin", url: "https://api.mobbin.com/mcp", about: "Real app screens and flows to learn from.",
         reads: ["screen", "flow", "app", "site", "element", "pattern", "ui", "ios", "android", "web"] },
@@ -237,7 +242,7 @@ export async function startConnect(input, fetcher = fetch, now = Date.now()) {
     go.searchParams.set("resource", resource);
     if (server.scopes.length > 0)
         go.searchParams.set("scope", server.scopes.join(" "));
-    return { ok: true, go: go.toString(), state, visit: { service: service.id, repo: input.repo, by: input.by, kit: input.kit ?? null, verifier, clientId, clientSecret, token: server.token, resource, redirect, expires: now + VISIT_MS } };
+    return { ok: true, go: go.toString(), state, visit: { service: service.id, repo: input.repo, by: input.by, kit: input.kit ?? null, template: input.template ?? null, verifier, clientId, clientSecret, token: server.token, resource, redirect, expires: now + VISIT_MS } };
 }
 /** The spec a connected service joins the project with: its MCP address, signed in with the token its sign-in gave. */
 export function connectedSpec(serviceId) {

package/dist/serve.js

@@ -34,7 +34,7 @@ import { CONNECT_CALLBACK, connectionsOf, finishConnect, localConnectOf, oneClic
 import { KITS_CSS, kitPageHtml, kitsGalleryHtml } from "./kits-ui.js";
 import { STARTERS_CSS, startersHtml } from "./flow-starters-ui.js";
 import { GALLERY_CSS, galleryHtml, galleryUseHtml } from "./flow-gallery-ui.js";
-import { galleryDefaults, galleryDiagram, galleryTemplateOf, previewGallery, useGalleryTemplate } from "./flow-gallery.js";
+import { galleryDefaults, galleryDiagram, galleryTemplateOf, galleryToolsOf, previewGallery, useGalleryTemplate } from "./flow-gallery.js";
 import { starterForWork, starterOf, startersFor, switchOnStarter } from "./flow-starters.js";
 import { createTeammateFrom, labelOf, nameOf, saveSoul, setTeammateState, teammateSettings, sendTeammateSummaries } from "./teammate-admin.js";
 import { editMemory, forgetMemory, tellTeammate } from "./teammate-memory.js";
@@ -1116,7 +1116,10 @@ export function createDecisionServer(options) {
             return done("/settings/tools", "problem", "That sign-in expired. Connect again.");
         const service = oneClickOf(visit.service);
         const kit = visit.kit === null ? null : kitOf(visit.kit);
-        const back = kit === null ? `/settings/tools?repo=${encodeURIComponent(visit.repo)}` : `/kits/${kit.id}?repo=${encodeURIComponent(visit.repo)}`;
+        // Started from a gallery template's page: back to it, for the same project.
+        const template = visit.template === null ? null : galleryTemplateOf(visit.template);
+        const back = template !== null ? `/flows/new/${template.id}?repo=${encodeURIComponent(visit.repo)}`
+            : kit === null ? `/settings/tools?repo=${encodeURIComponent(visit.repo)}` : `/kits/${kit.id}?repo=${encodeURIComponent(visit.repo)}`;
         const to = projectName(visit.repo);
         if (url.searchParams.has("error"))
             return done(back, "problem", url.searchParams.get("error") === "access_denied" ? `${service.label} wasn't connected to ${to}: access was declined.` : `${service.label} wasn't connected to ${to}.`);
@@ -1748,7 +1751,7 @@ export function createDecisionServer(options) {
     }
     // ---- reads ---------------------------------------------------------------
     /** A gallery template's page (Flows → New → Use this): its questions, the preview of these answers, and Create. */
-    function sendGalleryUse(response, who, template, projects, repo, given, name, notice) {
+    function sendGalleryUse(response, who, template, projects, repo, given, name, notice, said = null) {
         const answers = given ?? galleryDefaults(store, template, repo);
         let preview = null, problem = notice;
         try {
@@ -1757,8 +1760,9 @@ export function createDecisionServer(options) {
         catch (error) {
             problem = error instanceof Error ? error.message : "That can't be made here.";
         }
+        const diagram = preview?.built.definition ?? galleryDiagram(template);
         const html = galleryUseHtml({ template, projects: projects.map(path => ({ path, name: projectName(path) })), repo, answers, name, preview, problem,
-            csrf: who.via === "cookie" ? who.session.csrf : "", diagram: preview?.built.definition ?? galleryDiagram(template) });
+            csrf: who.via === "cookie" ? who.session.csrf : "", diagram, tools: preview?.tools ?? galleryToolsOf(template, diagram, connectionsOf(store, repo)), said });
         return sendScreen(response, problem !== null && preview === null && notice !== null ? 400 : 200, screen(template.name, `<p><a href="/flows/new">New flow</a></p><h1>${escape(template.name)}</h1>${html}`, { chrome: chromeFor(repo, "flows") }));
     }
     async function handleGet(url, who, request, response) {
@@ -3188,8 +3192,10 @@ export function createDecisionServer(options) {
         if (url.pathname === "/flows/new") {
             const projects = [...new Set([...(admissionList() ?? []), ...managedRepos(), ...store.knownRepos()])].filter(visible);
             const canUse = who.via === "cookie" && who.role === "approver" && projects.length > 0;
-            const repo = url.searchParams.get("repo");
-            return sendScreen(response, 200, screen("New flow", `<p><a href="/flows">Flows</a></p><h1>New flow</h1>${galleryHtml({ repo: repo !== null && projects.includes(repo) ? repo : null, canUse })}`, { chrome: chromeFor(project, "flows") }));
+            // The chosen project, else the one being looked at: its tools are what each card says is connected.
+            const asked = url.searchParams.get("repo");
+            const repo = asked !== null && projects.includes(asked) ? asked : project !== null && projects.includes(project) ? project : null;
+            return sendScreen(response, 200, screen("New flow", `<p><a href="/flows">Flows</a></p><h1>New flow</h1>${galleryHtml({ repo, canUse, connections: repo === null ? null : connectionsOf(store, repo) })}`, { chrome: chromeFor(repo ?? project, "flows") }));
         }
         const galleryRead = /^\/flows\/new\/([a-z-]{1,40})$/.exec(url.pathname);
         if (galleryRead !== null) {
@@ -3203,7 +3209,9 @@ export function createDecisionServer(options) {
                 return refuse(response, who, 409, "Add a project first.", "/projects");
             const asked = url.searchParams.get("repo");
             const repo = asked !== null && projects.includes(asked) ? asked : project !== null && projects.includes(project) ? project : projects[0];
-            return sendGalleryUse(response, who, template, projects, repo, null, template.name, null);
+            // Back from a Connect started on this page: how it went.
+            const problem = url.searchParams.get("problem"), said = url.searchParams.get("said");
+            return sendGalleryUse(response, who, template, projects, repo, null, template.name, problem === null ? null : problem.slice(0, 400), said === null ? null : said.slice(0, 400));
         }
         if (url.pathname === "/flows") {
             const projects = [...new Set([...(admissionList() ?? []), ...managedRepos(), ...store.knownRepos()])].filter(visible);
@@ -3969,7 +3977,7 @@ export function createDecisionServer(options) {
                 said: url.searchParams.get("said"), problem: url.searchParams.get("problem")
             }) +
                 // Every template, beside the starters: Use this opens its page for this project.
-                `<h2 class="gallery-heading">Templates</h2>${galleryHtml({ repo: chosen, canUse: who.via === "cookie" && who.role === "approver" && !store.isDemo() })}`;
+                `<h2 class="gallery-heading">Templates</h2>${galleryHtml({ repo: chosen, canUse: who.via === "cookie" && who.role === "approver" && !store.isDemo(), connections: connectionsOf(store, chosen) })}`;
             return sendScreen(response, 200, screen("Flows", `<p><a href="/settings">Settings</a></p><h1>Flows</h1>${content}`, { chrome: chromeFor(chosen || project, "settings") }));
         }
         // Settings → Integrations: which integrations work. The list is the last checks; a render never waits on one.
@@ -7737,10 +7745,14 @@ export function createDecisionServer(options) {
             const local = service === null && also === null ? localConnectOf(body.get("service") ?? "") : null;
             const chosen = service ?? local;
             const target = also === null ? repo : split > 0 ? also.slice(split + 1) : "";
-            const kit = kitOf(body.get("kit") ?? "")?.id ?? null;
+            // From a gallery template that uses this tool: it comes back to that template's page, for this project.
+            const gallery = also === null && chosen !== null ? galleryTemplateOf(body.get("template") ?? "") : null;
+            const template = gallery !== null && (gallery.tools ?? []).includes(chosen.id) ? gallery.id : null;
+            const kit = template === null ? kitOf(body.get("kit") ?? "")?.id ?? null : null;
             // A Connect that fails comes back to its own button, where the reason is said (no #fragment: one stops the alert's
             // autofocus); an "Also connect to" refusal goes back to the Connect card.
-            const back = (words, page = repo) => redirect(response, `/settings/tools?repo=${encodeURIComponent(page)}${kit === null ? "" : `&kit=${kit}`}${chosen === null || also !== null ? "" : `&connect=${chosen.id}`}&problem=${encodeURIComponent(words)}${also === null ? "" : "#connect"}`);
+            const back = (words, page = repo) => template !== null ? redirect(response, `/flows/new/${template}?repo=${encodeURIComponent(page)}&problem=${encodeURIComponent(words)}`)
+                : redirect(response, `/settings/tools?repo=${encodeURIComponent(page)}${kit === null ? "" : `&kit=${kit}`}${chosen === null || also !== null ? "" : `&connect=${chosen.id}`}&problem=${encodeURIComponent(words)}${also === null ? "" : "#connect"}`);
             // The page posts the project it showed; a post from a page showing another project is stale.
             const shown = body.get("shown") ?? "";
             if (shown !== repo)
@@ -7769,8 +7781,10 @@ export function createDecisionServer(options) {
                         return back(added.message);
                 }
                 const tested = await testToolOf(store, repo, local.id, clock(), { home: toolHome, omitEnv: ALL_CREDENTIAL_ENV });
+                const connected = `${local.label} is connected: ${tested?.tools.length ?? 0} action${tested?.tools.length === 1 ? "" : "s"}.`;
                 if (tested?.ok)
-                    return redirect(response, `/settings/tools?repo=${encodeURIComponent(repo)}${kit === null ? "" : `&kit=${kit}`}&said=${encodeURIComponent(`${local.label} is connected: ${tested.tools.length} action${tested.tools.length === 1 ? "" : "s"}.`)}#tool-${local.id}`);
+                    return redirect(response, template !== null ? `/flows/new/${template}?repo=${encodeURIComponent(repo)}&said=${encodeURIComponent(connected)}`
+                        : `/settings/tools?repo=${encodeURIComponent(repo)}${kit === null ? "" : `&kit=${kit}`}&said=${encodeURIComponent(connected)}#tool-${local.id}`);
                 if (had === undefined)
                     removeToolFrom(store, repo, local.id, who.name, clock(), toolHome);
                 return back(tested?.problem ?? `${local.label} didn't answer.`);
@@ -7780,7 +7794,7 @@ export function createDecisionServer(options) {
             const origin = consoleOrigin(request.headers.host);
             if (origin === null)
                 return back("Connect tools from this computer (localhost) or from your https address.");
-            const started = await startConnect({ service: service.id, repo: target, by: who.name, origin, kit: also === null ? kit : null }, options.connectFetch ?? fetch);
+            const started = await startConnect({ service: service.id, repo: target, by: who.name, origin, kit: also === null ? kit : null, template }, options.connectFetch ?? fetch);
             if (!started.ok)
                 return back(started.said);
             for (const [key, visit] of connectVisits)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toolroll",
-  "version": "0.9.30",
+  "version": "0.9.31",
   "description": "A control plane for unattended coding agents — queue tasks, walk away, come back to pull requests. Agents build in leased worktrees, never touch your default branch, and interrupt you only for decisions that need a human.",
   "directories": {
     "doc": "docs"