mockpit 1.2.0 → 2.0.0

package/dist/server/app.js

@@ -5,27 +5,31 @@ import { streamSSE } from "hono/streaming";
 import { ICON_SIZES, ICON_SVG, themeColor, webManifest } from "./appIcon.js";
 import { ICON_PNG_BASE64 } from "./appIconPng.js";
 import { decodeBase64 } from "./base64.js";
-import { mockDetailView, mockSummaryView, sessionRowView, surfaceRef } from "./apiViews.js";
+import { mockDetailView, treeNodeView, mockSummaryView, placeOf, sessionRowView, surfaceRef, } from "./apiViews.js";
 import { askNudges } from "./askNudges.js";
 import { EventBus } from "./events.js";
 import { GUIDE_TOPICS, isGuideTopic, renderBriefGuide, unknownTopicMessage, } from "./designGuide.js";
 import { buildFeedbackBatches } from "./feedbackBatch.js";
+import { guidanceSections, MAX_RULES_CHARS, parseRulesFile, RULES_SETTING, USER_RULES_SETTING, } from "./guidance.js";
 import { HANDOFF_NOTE, handoffReady, supersedes } from "./handoff.js";
 import { bundledIconSets, expandIcons, iconCount, isIconName, mayHaveIcons, parseIconSet, resolverFor, } from "./icons.js";
 import { checkProjectKit, KIT_IDS, kitSummaries } from "./kits.js";
+import { chosenFills, decisionsFor, settledValues } from "./decisions.js";
+import { composeFills, slotsInSurfaces, spliceFills } from "./fills.js";
 import { checkKnobs, checkKnobValues, discreteChoices } from "./knobs.js";
 import { diffParts, partsInSurfaces, spliceParts } from "./parts.js";
 import { postToMarkdown } from "./postMarkdown.js";
 import { addHook, addSubscription, isPushSubscription, listHooks, notify, removeHook, vapidKeys, } from "./push.js";
-import { expandSlots, parseSlotTags } from "./slots.js";
+import { embedsKey, expandHtml, hasEmbedTags, parseEmbedTags, } from "./embeds.js";
 import { registerMcp } from "./mcpHttp.js";
 import { createRunFlow, DEFAULT_RUN_LIMITS } from "./run.js";
 import { logMiddleware, writeLog } from "./eventLog.js";
 import { RUN_API } from "./runApi.js";
-import { escapeHtml, renderHtmlPage, renderMermaidPage, renderSandboxedPart, STATIC_ASSET_PREFIX, staticAsset, } from "./surfacePage.js";
+import { escapeHtml, renderHtmlPage, renderMermaidPage, knobAttributes, renderSandboxedPart, STATIC_ASSET_PREFIX, staticAsset, } from "./surfacePage.js";
 import { DEFAULT_MODE, DEFAULT_THEME_ID, isMode, themeById } from "./themes.js";
-import { builtinAsk, DEFAULT_PROJECT, DEFAULT_VARIANT, htmlSurface, isSandboxedSurfaceKind, ATTACHABLE_IMAGE_TYPES, MAX_ASK_IMAGES, MAX_ASSET_BYTES, newId, openCount, OTHER_ID, REACTIONS, projectFromCwd, reservedAgent, slugify, surfacesByteLength, } from "./types.js";
+import { askAnswered, builtinAsk, builtinAskIds, DEFAULT_PROJECT, DEFAULT_VARIANT, htmlSurface, isSandboxedSurfaceKind, ATTACHABLE_IMAGE_TYPES, MAX_ASK_IMAGES, MAX_ASSET_BYTES, inUseVersion, isLive, isMockKind, momentOf, NORMAL_SITUATION, optionState, newId, openAsks, openCount, OTHER_ID, REACTIONS, projectFromCwd, AREA_ORDER_SETTING, stripNul, postAtVersion, versionAt, variantStatus, reservedAgent, sameScreen, situationKey, slugify, surfacesByteLength, } from "./types.js";
 import { coerceSurfaces, validateSurfaces, } from "./postSurfaces.js";
+import { isViewerRequest } from "./viewerRequest.js";
 const MAX_SURFACE_BYTES = 2 * 1024 * 1024;
 // A held long-poll (watch, the viewer) re-arms rather than pinning a socket
 // for good; proxies and serverless hosts drop longer requests anyway.
@@ -165,11 +169,34 @@ const fail = (status, error, extra = {}) => ({
     status,
     body: { error, ...extra },
 });
+const MAX_NOTE = 400;
+const MAX_SOURCE = 1024;
+const MAX_WIDTHS = 4;
+const MIN_WIDTH = 280;
+const MAX_WIDTH = 2560;
 const str = (v, max) => typeof v === "string" && v.trim() ? v.trim().slice(0, max) : undefined;
 const MAX_LABEL = 120;
+const MAX_AREAS = 50;
+const MAX_FLOWS = 50;
+const MAX_FLOW_STEPS = 100;
 const MAX_ASKS = 20;
 const MAX_OPTIONS = 20;
 const MAX_DRAFT_COMMENTS = 50;
+// A title that names a step of the agent's process instead of what the mock
+// is: it reads as noise on Home, where titles are seen out of context.
+const PROCESS_TITLE = /^\s*(round\s*\d+|flow\s*\d+\s*[·:\-–—]|v\d+\b|prototype\b)/i;
+// Once, on a variant's first version: a canvas page runs live in every
+// overview card, and a browser holds only about 16 WebGL contexts.
+const posterNudges = (surfaces) => surfaces.some((s) => s.kind === "html" && !s.poster && /<canvas[\s>]/i.test(s.html))
+    ? [
+        "this page draws on a <canvas> and has no poster, so Studio and Home run it live; send a still of it as poster (upload the image, or CLI --poster shot.png) with each version",
+    ]
+    : [];
+const titleNudges = (title) => title && PROCESS_TITLE.test(title)
+    ? [
+        `title "${title}" names your process; title the mock by what it is ("Hold menu"), as states are named by what the user sees`,
+    ]
+    : [];
 const APP_FILES = new Set([
     "/manifest.webmanifest",
     "/icon.svg",
@@ -177,7 +204,7 @@ const APP_FILES = new Set([
     ...ICON_SIZES.map((s) => `/icon-${s}.png`),
 ]);
 const titleFromSlug = (slug) => slug.replace(/-/g, " ").replace(/^./, (ch) => ch.toUpperCase());
-export function createApp({ store, viewerHtml, setupText, topics = {}, authenticate, authToken, basePath, publicRead, screenshots, version, upgradeCommand, fetchLatestRelease, onEvent, maxHoldConnections = DEFAULT_MAX_HOLD_CONNECTIONS, executor, runLimits, log, }) {
+export function createApp({ store, viewerHtml, setupText, topics = {}, packs = {}, userRules, authenticate, authToken, basePath, publicRead, screenshots, version, upgradeCommand, renderRev, fetchLatestRelease, onEvent, maxHoldConnections = DEFAULT_MAX_HOLD_CONNECTIONS, executor, runLimits, log, }) {
     const app = new Hono();
     // The scripts topic carries the run API from runApi.ts, its one source.
     if (topics.scripts)
@@ -195,7 +222,7 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
     // warm entry, it can never be served to the wrong caller (renderKey includes it).
     let lastOrigin = null;
     app.use("*", (c, next) => {
-        lastOrigin = new URL(c.req.url).origin;
+        lastOrigin = requestOrigin(c.req.raw);
         c.header("Referrer-Policy", "no-referrer");
         return next();
     });
@@ -285,7 +312,8 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
     function surfaceDocHeaders(c, immutable) {
         c.header("X-Content-Type-Options", "nosniff");
         c.header("Content-Security-Policy", "sandbox allow-scripts");
-        c.header("Cache-Control", immutable ? "public, max-age=31536000, immutable" : "private, no-cache");
+        const current = !renderRev || c.req.query("r") === renderRev;
+        c.header("Cache-Control", immutable && current ? "public, max-age=31536000, immutable" : "private, no-cache");
     }
     function renderCacheHit(key) {
         const hit = renderCache.get(key);
@@ -329,6 +357,19 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         return withLeading.slice(0, end);
     };
     const requestBasePath = (request) => normalizeBasePath(typeof basePath === "function" ? basePath(request) : basePath);
+    // Behind a TLS-terminating proxy (tailscale serve, a tunnel) the request
+    // reaches us as http while the browser is on https. A surface bakes this
+    // origin into its script URLs and CSP, and an http script inside an https
+    // page is blocked as mixed content: the frame then never runs its bridge, so
+    // live knobs and part reports silently stop. Trusting the header is safe
+    // here: it only shapes the caller's own response.
+    const requestOrigin = (request) => {
+        const url = new URL(request.url);
+        const proto = request.headers.get("x-forwarded-proto")?.split(",")[0]?.trim();
+        if (proto === "https" || proto === "http")
+            url.protocol = `${proto}:`;
+        return url.origin;
+    };
     // Cached, fail-silent update lookup: being offline or rate-limited must
     // cost nothing but the absence of the notice. Failures are cached too, so
     // a dead network doesn't retry on every viewer load.
@@ -511,13 +552,42 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
     async function briefFor(project) {
         try {
             const name = project ?? (await store.listProjects())[0]?.name ?? DEFAULT_PROJECT;
-            return renderBriefGuide(await designFor(name));
+            return renderBriefGuide(await designFor(name), await guidanceFor(name));
         }
         catch (err) {
             console.warn("[mockpit] project design unavailable for the brief", err);
             return renderBriefGuide(null);
         }
     }
+    // The user's file wins over the stored copy when the host can read it: the
+    // copy exists for hosts that can't.
+    async function userRulesText() {
+        const file = userRules ? await userRules().catch(() => null) : null;
+        return file ?? (await store.getSetting(USER_RULES_SETTING));
+    }
+    async function guidanceFor(project) {
+        return guidanceSections({
+            packs,
+            user: await userRulesText(),
+            project: await store.getSetting(`${RULES_SETTING}:${project}`),
+        });
+    }
+    // A rules file as sent by `mockpit rules`: stored whole, "" clears it. The
+    // answer says what the brief will make of it, so a mistyped pack name shows
+    // at once rather than as a quietly missing layer.
+    async function saveRules(key, body) {
+        if (!body || typeof body !== "object" || typeof body.text !== "string") {
+            return fail(400, 'provide "text", the rules file ("" clears it)');
+        }
+        const text = stripNul(body.text).trim();
+        if (text.length > MAX_RULES_CHARS) {
+            return fail(400, `a rules file is at most ${MAX_RULES_CHARS} characters`);
+        }
+        await store.setSetting(key, text);
+        const parsed = parseRulesFile(text);
+        const unknown = parsed.packs.filter((p) => !(p in packs));
+        return ok({ packs: parsed.packs, unknown, rules: parsed.body.length > 0, cleared: !text });
+    }
     // Push + webhooks. Detached on purpose: a dead push endpoint must never fail
     // (or slow) the write that triggered it.
     function fireNotify(payload) {
@@ -588,7 +658,7 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
                 variants: posts.map(variantLabel),
             });
         }
-        const live = candidates.filter((p) => p.status !== "archived");
+        const live = candidates.filter((p) => isLive(p.status));
         if (live.length === 1 && !variant)
             return live[0];
         return fail(400, `${mock.slug} has several variants; pass ${variant ? "state" : "variant"}`, {
@@ -675,6 +745,45 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         code: failure.code,
         issues: failure.issues,
     });
+    // A poster is a still of the html beside it. Carried over unchanged onto
+    // changed html (a parts or fills splice, a fork with edits) it would show an
+    // old page, so it goes unless the write brings one; `poster` names the still
+    // of the page this write produces.
+    async function withPoster(surfaces, before, poster) {
+        const given = poster === undefined ? undefined : str(poster, MAX_LABEL);
+        if (poster !== undefined && !given) {
+            return fail(400, '"poster" must be the asset id of an uploaded image');
+        }
+        const pagesBefore = (before ?? []).filter((s) => s.kind === "html");
+        let ordinal = 0;
+        const out = surfaces.map((s) => {
+            if (s.kind !== "html")
+                return s;
+            const old = (s.id !== undefined && pagesBefore.find((b) => b.id === s.id)) || pagesBefore[ordinal];
+            let next = s;
+            if (s.poster && old?.kind === "html" && old.html !== s.html && old.poster === s.poster) {
+                const { poster: _stale, ...rest } = s;
+                next = rest;
+            }
+            if (ordinal === 0 && given)
+                next = { ...next, poster: given };
+            ordinal++;
+            return next;
+        });
+        if (given && ordinal === 0)
+            return fail(400, '"poster" needs an html surface to be the still of');
+        for (const s of out) {
+            if (s.kind !== "html" || !s.poster)
+                continue;
+            const asset = await store.getAsset(s.poster);
+            if (!asset)
+                return fail(404, `poster "${s.poster}" is not an uploaded asset; upload the image first`);
+            if (!asset.contentType.startsWith("image/")) {
+                return fail(400, `poster "${s.poster}" is ${asset.contentType}, not an image`);
+            }
+        }
+        return out;
+    }
     function checkSurfaces(surfaces) {
         if (surfaces.length === 0)
             return fail(400, "a variant needs at least one surface");
@@ -683,57 +792,138 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         }
         return null;
     }
-    // A page's slot list, with each missing version pinned to the referenced
-    // component's current one (snapshot semantics).
-    async function pageSlots(project, surfaces) {
-        const html = surfaces.find((s) => s.kind === "html");
-        if (!html || html.kind !== "html")
-            return [];
-        const slots = [];
-        for (const tag of parseSlotTags(html.html)) {
-            let version = tag.version;
-            if (version == null)
-                version = (await slotTarget(project, tag.slug, tag.variant))?.version ?? null;
-            if (version != null)
-                slots.push({ slug: tag.slug, variant: tag.variant, version });
-        }
-        return slots;
-    }
-    // A slot names a component mock by slug; it renders that mock's first state.
-    async function slotTarget(project, slug, variant) {
+    // The component post an embed shows: the named variant of its first state,
+    // else the accepted one there, else "default", else the first live one.
+    async function embedTarget(project, slug, variant) {
         const mock = await store.findMock(project, slug);
         if (!mock)
             return null;
-        return store.findPost(mock.id, mock.states[0] ?? null, variant);
-    }
-    // Inline each `<mockpit-slot>` with the referenced variant version's first
-    // html surface body. The stored `slots` list (resolved at publish) wins over
-    // a bare tag, so a page keeps rendering the versions it was composed from.
-    async function expandPageHtml(project, post, html) {
-        const pinned = new Map(post.slots.map((s) => [`${s.slug}::${s.variant}`, s.version]));
-        const bodies = new Map();
-        for (const tag of parseSlotTags(html)) {
-            const key = `${tag.slug}::${tag.variant}`;
-            const version = tag.version ?? pinned.get(key) ?? null;
-            const cacheKey = `${key}::${version}`;
-            if (bodies.has(cacheKey))
+        const state = mock.states[0] ?? null;
+        if (variant)
+            return store.findPost(mock.id, state, variant);
+        const inState = (await store.listPosts({ mockId: mock.id })).filter((p) => p.state === state);
+        return (inState.find((p) => p.status === "accepted") ??
+            inState.find((p) => p.variant === DEFAULT_VARIANT && isLive(p.status)) ??
+            inState.find((p) => isLive(p.status)) ??
+            inState[0] ??
+            null);
+    }
+    // Resolves tags to bodies: the tag's version if it pins one, else a peek
+    // (`overrides`, slug → version) the viewer asked for, else the latest. The
+    // body shows the component as decided: its slots composed to the fills its
+    // settled values chose, its other settled values on the wrapper.
+    function embedResolver(project, overrides = {}) {
+        return async (tag) => {
+            const post = await embedTarget(project, tag.slug, tag.variant);
+            if (!post)
+                return null;
+            const version = tag.version ?? overrides[tag.slug] ?? inUseVersion(post);
+            const surfaces = version === post.version
+                ? post.surfaces
+                : post.history.find((h) => h.version === version)?.surfaces;
+            const body = surfaces?.find((x) => x.kind === "html");
+            if (!surfaces || !body || body.kind !== "html")
+                return null;
+            const mock = await store.getMock(post.mock);
+            const settled = mock
+                ? settledValues(await replyPayloads(mock.id), mock, await store.listPosts({ mockId: mock.id }))
+                : {};
+            const slots = slotsInSurfaces(surfaces);
+            const fills = new Set(slots.map((sl) => sl.part));
+            const rest = Object.fromEntries(Object.entries(settled).filter(([p]) => !fills.has(p)));
+            return {
+                variant: post.variant,
+                version,
+                html: slots.length ? composeFills(body.html, chosenFills(slots, settled)) : body.html,
+                attrs: knobAttributes(rest).attrs,
+                ...(Object.keys(settled).length ? { stamp: JSON.stringify(settled) } : {}),
+            };
+        };
+    }
+    // A surface's html with its embeds expanded, and what they resolved to.
+    async function composedHtml(project, slug, html, overrides) {
+        if (!hasEmbedTags(html))
+            return { html, used: [], stamps: [], cycle: null };
+        return expandHtml(html, embedResolver(project, overrides), [slug]);
+    }
+    // The component versions a publish renders with, recorded on the version;
+    // an embed chain that loops back to this mock is refused.
+    async function publishEmbeds(project, slug, surfaces) {
+        const html = surfaces.find((x) => x.kind === "html");
+        if (!html || html.kind !== "html")
+            return [];
+        const { used, cycle } = await composedHtml(project, slug, html.html);
+        if (cycle) {
+            return fail(400, `embeds loop back on themselves: ${cycle.join(" → ")}`, { cycle });
+        }
+        return used;
+    }
+    // Being embedded is what makes a mock a component, so a sketch another mock
+    // embeds becomes one; a declared page stays a page.
+    async function promoteEmbedded(project, embeds) {
+        for (const slug of new Set(embeds.map((e) => e.slug))) {
+            const m = await store.findMock(project, slug);
+            if (m?.kind !== "sketch")
                 continue;
-            const target = await slotTarget(project, tag.slug, tag.variant);
-            if (!target) {
-                bodies.set(cacheKey, null);
+            const updated = await store.updateMock(m.id, { kind: "component" });
+            if (updated)
+                bus.broadcast({ type: "mock-updated", id: updated.id, project });
+        }
+    }
+    // What the variants of a mock show through their embeds now: per post, the
+    // resolved list (nested included) with each component's versions, and the
+    // key that changes when any of them does.
+    async function embedViews(mock, posts) {
+        const out = new Map();
+        for (const post of posts) {
+            const html = post.surfaces.find((x) => x.kind === "html");
+            if (!html || html.kind !== "html" || !hasEmbedTags(html.html))
                 continue;
+            const composed = await composedHtml(mock.project, mock.slug, html.html);
+            const { used } = composed;
+            const list = [];
+            for (const e of used) {
+                const target = await embedTarget(mock.project, e.slug, e.variant);
+                const versions = target
+                    ? [target.version, ...target.history.map((h) => h.version)].sort((a, b) => b - a)
+                    : [e.version];
+                list.push({ ...e, latest: target?.version ?? e.version, versions });
             }
-            const surfaces = version == null || version === target.version
-                ? target.surfaces
-                : (target.history.find((h) => h.version === version)?.surfaces ?? null);
-            const body = surfaces?.find((s) => s.kind === "html");
-            bodies.set(cacheKey, body && body.kind === "html" ? body.html : null);
+            out.set(post.id, { key: embedsKey(composed), list });
         }
-        return expandSlots(html, ({ slug, variant, version }) => {
-            const key = `${slug}::${variant}`;
-            const pinnedVersion = version ?? pinned.get(key) ?? null;
-            return bodies.get(`${key}::${pinnedVersion}`) ?? null;
-        });
+        return out;
+    }
+    // The mocks whose html embeds this slug, directly or through other
+    // components: they render differently once it changes.
+    async function embeddersOf(project, slug) {
+        const mocks = await store.listMocks(project);
+        const tagsOf = new Map();
+        for (const m of mocks) {
+            const slugs = new Set();
+            for (const p of await store.listPosts({ mockId: m.id })) {
+                for (const x of p.surfaces) {
+                    if (x.kind === "html")
+                        for (const t of parseEmbedTags(x.html))
+                            slugs.add(t.slug);
+                }
+            }
+            tagsOf.set(m.id, slugs);
+        }
+        const reached = new Set([slug]);
+        const out = [];
+        for (let grew = true; grew;) {
+            grew = false;
+            for (const m of mocks) {
+                if (reached.has(m.slug))
+                    continue;
+                if ([...(tagsOf.get(m.id) ?? [])].some((s) => reached.has(s))) {
+                    reached.add(m.slug);
+                    out.push(m);
+                    grew = true;
+                }
+            }
+        }
+        return out;
     }
     // Knobs with a handful of discrete choices are usually decisions dressed as
     // controls: the user can't compare options they only see one at a time.
@@ -752,7 +942,7 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
     // chat instead. The nudge carries a ready ask: mock-wide when every state has
     // the same variant names, else for this state.
     function unboundVariants(mock, posts, state) {
-        const live = (s) => posts.filter((p) => p.state === s && p.status !== "archived").map((p) => p.variant);
+        const live = (s) => posts.filter((p) => p.state === s && isLive(p.status)).map((p) => p.variant);
         const names = live(state);
         if (names.length < 2)
             return null;
@@ -770,7 +960,7 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         const states = mock.states.length ? mock.states : [null];
         const wide = states.every((s) => key(live(s)) === key(names));
         // An ask that already picks between some of these variants is the question:
-        // a second, generic "Which one?" would make the user choose the look twice.
+        // a second, generic "Which variant?" would make the user choose twice.
         // A mock-wide one only fits while every state has the same variants; else a
         // variant only some states have would leave the others no real choice.
         const existing = mock.asks.find((a) => applies(a) && a.options.some((o) => o.variant) && (a.scope === "state" || wide));
@@ -794,7 +984,7 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
                 ],
             };
             return {
-                nudge: `${where}: bind ${missing.map((m) => `"${m}"`).join(", ")} to your existing ask "${existing.id}": call ask with suggestedAsk. Never ask in chat.`,
+                nudge: `${where}: bind ${missing.map((m) => `"${m}"`).join(", ")} to your existing question "${existing.id}": call ask with suggestedAsk. Never ask in chat.`,
                 ask,
             };
         }
@@ -802,15 +992,15 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         // Not the built-in's reserved id: a stored ask under it would collide with the
         // built-in the viewer synthesizes once a new variant goes unbound. Nor any id
         // already taken, which sending this would silently replace.
-        const base = wide ? "look" : `look-${slugify(state ?? "")}`;
+        const base = wide ? "choice" : `choice-${slugify(state ?? "")}`;
         let id = base;
         for (let n = 2; mock.asks.some((a) => a.id === id); n++)
             id = `${base}-${n}`;
         const ask = wide
-            ? { id, text: "Which one?", scope: "mock", options }
-            : { id, text: "Which one?", scope: "state", state, options };
+            ? { id, text: "Which variant?", scope: "mock", options }
+            : { id, text: "Which variant?", scope: "state", state, options };
         return {
-            nudge: `${where} has ${names.length} variants and no ask binds them: call ask with suggestedAsk. Never ask in chat.`,
+            nudge: `${where} has ${names.length} variants and no question binds them: call ask with suggestedAsk. Never ask in chat.`,
             ask,
         };
     }
@@ -821,7 +1011,27 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         const posts = await store.listPosts({ mockId: mock.id });
         const detail = mockDetailView(mock, posts);
         const unbound = unboundVariants(mock, posts, post.state);
-        const nudges = [...(extra.nudges ?? []), ...(unbound ? [unbound.nudge] : [])];
+        // A part with fills that no ask sets is a decision nobody was asked; hand over the ask.
+        const slots = slotsInSurfaces(post.surfaces);
+        const setPaths = new Set(mock.asks.flatMap((a) => a.options.flatMap((o) => Object.keys(o.set ?? {}))));
+        const slotAsks = slots
+            .filter((sl) => !setPaths.has(sl.part))
+            .map((sl) => ({
+            id: sl.part,
+            text: `Which ${sl.label ?? sl.part}?`,
+            scope: "part",
+            part: sl.part,
+            options: sl.fills.map((f) => ({ label: f.label ?? f.name, set: { [sl.part]: f.name } })),
+        }));
+        const nudges = [
+            ...(extra.nudges ?? []),
+            ...(unbound ? [unbound.nudge] : []),
+            ...(slotAsks.length
+                ? [
+                    `${slotAsks.map((a) => `part "${a.part}"`).join(", ")} ${slotAsks.length === 1 ? "has" : "have"} fills and no question sets ${slotAsks.length === 1 ? "it" : "them"}: send suggestedFillAsks with ask (reword the text in the user's terms)`,
+                ]
+                : []),
+        ];
         let partChanges;
         if (extra.previous) {
             partChanges = diffParts(partsInSurfaces(extra.previous), partsInSurfaces(post.surfaces));
@@ -835,6 +1045,7 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
                 slug: mock.slug,
                 title: mock.title,
                 kind: mock.kind,
+                ...placeOf(mock),
                 states: mock.states,
             },
             post: {
@@ -842,19 +1053,22 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
                 state: post.state,
                 variant: post.variant,
                 version: post.version,
-                status: post.status,
+                status: variantStatus(post.status),
                 surfaces: post.surfaces.map(surfaceRef),
             },
             sessionId: post.sessionId,
             url: mockUrl(ctx.base, mock, post),
             parts: detail.parts,
+            ...(slots.length ? { fills: slots } : {}),
             ...(extra.applied ? { applied: extra.applied } : {}),
             ...(partChanges && (partChanges.vanished.length || partChanges.renamed.length)
                 ? { partChanges }
                 : {}),
             ...(nudges.length ? { nudges } : {}),
             ...(unbound ? { suggestedAsk: unbound.ask } : {}),
+            ...(slotAsks.length ? { suggestedFillAsks: slotAsks } : {}),
             ...(warnings.length ? { warnings } : {}),
+            ...(extra.flow ? { flow: extra.flow } : {}),
             feedback,
         }, extra.status ?? 200);
     }
@@ -868,26 +1082,46 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
             by,
         });
         warmPost(post, mock);
+        void announceEmbedders(mock).catch((err) => console.warn("[mockpit] embedders", err));
+    }
+    // A component's new version changes every mock that shows it: their views
+    // carry a new embeds key, so open viewers refetch and reload those frames.
+    async function announceEmbedders(mock) {
+        for (const m of await embeddersOf(mock.project, mock.slug)) {
+            bus.broadcast({ type: "mock-updated", id: m.id, project: m.project });
+        }
     }
     // The one write: publish one variant of one state of a mock. An existing
     // (mock, state, variant) becomes a new version; anything else is created.
-    // Exactly one body: `html`, the full ordered `surfaces` list, or `parts`
-    // spliced into the variant's latest (or `from`) version.
+    // Exactly one body: `html`, the full ordered `surfaces` list, or `parts` or
+    // `fills` spliced into the variant's latest (or `from`) version.
     async function publishFlow(body, ctx) {
         if (!body || typeof body !== "object")
             return fail(400, "invalid JSON body");
         const slugIn = str(body.mock, MAX_TITLE);
         if (!slugIn)
             return fail(400, 'provide "mock": the mock slug, e.g. "writer"');
-        const given = ["html", "surfaces", "parts"].filter((k) => body[k] !== undefined);
-        if (given.length === 0)
-            return fail(400, 'provide "html", "surfaces" or "parts"');
+        const given = ["html", "surfaces", "parts", "fills"].filter((k) => body[k] !== undefined);
+        const forkIn = forkArg(body.fork);
+        if (isResult(forkIn))
+            return forkIn;
+        const flowIn = flowArg(body);
+        if (isResult(flowIn))
+            return flowIn;
+        // `flow` alone places an existing screen in a flow without a new version.
+        const flowOnly = given.length === 0 && !forkIn && !!flowIn;
+        if (given.length === 0 && !forkIn && !flowIn) {
+            return fail(400, 'provide "html", "surfaces", "parts" or "fills" (or "fork" alone)');
+        }
         if (given.length > 1) {
-            return fail(400, `pass one of "html", "surfaces" or "parts", not ${given.join(" and ")}`);
+            return fail(400, `pass one of "html", "surfaces", "parts" or "fills", not ${given.join(" and ")}`);
         }
-        const partEdits = partEditsArg(body);
+        const partEdits = editsArg(body, "parts");
         if (isResult(partEdits))
             return partEdits;
+        const fillEdits = editsArg(body, "fills");
+        if (isResult(fillEdits))
+            return fillEdits;
         const knobs = checkKnobs(body.knobs);
         if (!knobs.ok)
             return fail(400, knobs.error);
@@ -896,12 +1130,22 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
             return fail(400, variantKnobs.error);
         const stateIn = stateArg(body.state);
         const variantIn = str(body.variant, MAX_LABEL);
-        const kind = body.kind === "page" || body.kind === "component" ? body.kind : undefined;
+        const kind = isMockKind(body.kind) ? body.kind : undefined;
         const title = str(body.title, MAX_TITLE);
         const fromN = Number(body.from);
         const from = Number.isInteger(fromN) && fromN > 0 ? fromN : undefined;
         const prompt = str(body.prompt, MAX_COMMENT_TEXT);
         const author = str(body.author, MAX_TITLE);
+        const note = body.note === undefined ? undefined : (str(body.note, MAX_NOTE) ?? "");
+        const widths = widthsArg(body.widths);
+        if (isResult(widths))
+            return widths;
+        const area = labelArg(body, "area", MAX_LABEL);
+        if (isResult(area))
+            return area;
+        const source = labelArg(body, "source", MAX_SOURCE);
+        if (isResult(source))
+            return source;
         // An existing mock is addressable by id before a session exists.
         let mock = null;
         if (typeof body.mock === "string")
@@ -933,16 +1177,44 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
             }
             state = stateIn;
         }
+        const situationIn = str(body.situation, MAX_LABEL);
+        // A situation is another render of one state ("Couldn't save"); "Normal"
+        // names the state's own render.
+        let situation;
+        if (situationIn && situationIn.toLowerCase() !== NORMAL_SITUATION.toLowerCase()) {
+            if (state === null) {
+                return fail(400, '"situation" needs "state": the state it is another render of');
+            }
+            if (!mock || !mock.states.includes(state)) {
+                return fail(404, `${slug} has no state "${state}" yet: publish its normal render first, then its situations`, mock ? { states: mock.states } : {});
+            }
+            const moment = momentOf(mock.situations, state);
+            // The key feedback names it by, passed back with its own situation.
+            if (moment !== state && moment !== null && situationKey(moment, situationIn) === state) {
+                state = moment;
+            }
+            else if (moment !== state) {
+                return fail(400, `"${state}" is a situation; give "situation" the state it belongs to`);
+            }
+            const key = situationKey(state, situationIn);
+            if (mock.states.includes(key) && !(mock.situations[state] ?? []).includes(situationIn)) {
+                return fail(409, `${slug} already has a state named "${key}"; name the situation otherwise`);
+            }
+            situation = { of: state, name: situationIn };
+            state = key;
+        }
         const inState = posts.filter((p) => p.state === state);
         let variant = variantIn;
         if (!variant) {
-            const live = inState.filter((p) => p.status !== "archived");
+            const live = inState.filter((p) => isLive(p.status));
             if (inState.length === 0)
                 variant = DEFAULT_VARIANT;
             else if (inState.length === 1)
                 variant = inState[0].variant;
             else if (live.length === 1)
                 variant = live[0].variant;
+            else if (flowOnly)
+                variant = (live[0] ?? inState[0]).variant;
             else {
                 return fail(400, `${slug} has several variants; pass variant`, {
                     variants: inState.map(variantLabel),
@@ -953,9 +1225,54 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         const missing = () => fail(404, `${slug} has no variant "${variant}"${state === null ? "" : ` in "${state}"`}`, {
             variants: posts.map(variantLabel),
         });
+        // A flow steps through states; a situation's step is its state's.
+        const screen = { mock: slug, state: situation ? situation.of : state };
+        if (flowIn) {
+            const full = await flowFull(project, flowIn.name, screen, flowIn.step);
+            if (full)
+                return full;
+        }
+        if (flowOnly) {
+            if (!mock || inState.length === 0) {
+                return fail(404, `${slug} has no ${state === null ? "design" : `state "${state}"`} yet: publish it with "flow" to place it`);
+            }
+            if (!target)
+                return missing();
+            const flow = await placeFlow(project, flowIn.name, screen, flowIn.step);
+            bus.broadcast({ type: "mock-updated", id: mock.id, project });
+            return writeResult(mock, target, ctx, { writer: session, flow });
+        }
+        // A fork starts a new variant from a sibling's version: that version's
+        // surfaces are what `parts`, `fills` and kept surface ids refer to.
+        let fork = null;
+        if (forkIn) {
+            if (target) {
+                return fail(409, `${variant} already exists; fork names a new variant to start`);
+            }
+            const source = inState.find((p) => p.variant === forkIn.variant);
+            if (!source) {
+                return fail(404, `no variant "${forkIn.variant}" to fork in this state`, {
+                    variants: inState.map(variantLabel),
+                });
+            }
+            const version = forkIn.version ?? source.version;
+            const surfacesAt = version === source.version
+                ? source.surfaces
+                : source.history.find((h) => h.version === version)?.surfaces;
+            if (!surfacesAt)
+                return fail(404, `${source.variant} has no version ${version}`);
+            fork = {
+                ref: { variant: source.variant, version },
+                surfaces: surfacesAt,
+                ...(source.knobs ? { knobs: source.knobs } : {}),
+                ...(source.note ? { note: source.note } : {}),
+            };
+        }
         // What `parts` and kept surface ids refer to: the variant's current
         // version, or the one `from` names.
         const base = () => {
+            if (fork)
+                return fork.surfaces;
             if (!target)
                 return missing();
             if (from === undefined || from === target.version)
@@ -965,11 +1282,16 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         };
         let surfaces;
         let applied;
-        if (partEdits) {
+        if (fork && given.length === 0) {
+            surfaces = fork.surfaces;
+        }
+        else if (partEdits || fillEdits) {
             const current = base();
             if (isResult(current))
                 return current;
-            const result = spliceParts(current, partEdits);
+            const result = partEdits
+                ? spliceParts(current, partEdits)
+                : spliceFills(current, fillEdits);
             if (!result.ok)
                 return fail(400, result.error);
             surfaces = result.surfaces;
@@ -981,10 +1303,23 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
                 return parsed;
             surfaces = parsed;
         }
+        const before = base();
+        const postered = await withPoster(surfaces, isResult(before) ? null : before, body.poster);
+        if (isResult(postered))
+            return postered;
+        surfaces = postered;
         const bad = checkSurfaces(surfaces);
         if (bad)
             return bad;
-        const nudges = knobNudges({ ...knobs.value, ...variantKnobs.value });
+        const nudges = [
+            ...knobNudges({ ...knobs.value, ...variantKnobs.value }),
+            ...titleNudges(title),
+            ...(target ? [] : posterNudges(surfaces)),
+        ];
+        const embeds = await publishEmbeds(project, slug, surfaces);
+        if (isResult(embeds))
+            return embeds;
+        await promoteEmbedded(project, embeds);
         if (!target) {
             // A new variant: carried by the session the agent is writing from.
             if (!session) {
@@ -1001,14 +1336,16 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
                     project,
                     slug,
                     title: title ?? titleFromSlug(slug),
-                    kind: kind ?? "component",
+                    kind: kind ?? "sketch",
+                    ...(area === undefined ? {} : { area }),
+                    ...(source === undefined ? {} : { source }),
                     states: state === null ? [] : [state],
                     knobs: knobs.value,
+                    ...(widths ? { widths } : {}),
                     sessionId: session.id,
                 });
                 bus.broadcast({ type: "mock-created", id: mock.id, project });
             }
-            const slots = mock.kind === "page" || kind === "page" ? await pageSlots(project, surfaces) : [];
             const created = await store.createPost({
                 sessionId: session.id,
                 mock: mock.id,
@@ -1016,38 +1353,65 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
                 variant,
                 title: title ?? mock.title,
                 surfaces,
-                ...(Object.keys(variantKnobs.value).length ? { knobs: variantKnobs.value } : {}),
-                slots,
+                ...(Object.keys(variantKnobs.value).length
+                    ? { knobs: variantKnobs.value }
+                    : fork?.knobs
+                        ? { knobs: fork.knobs }
+                        : {}),
+                ...(note ? { note } : note === undefined && fork?.note ? { note: fork.note } : {}),
+                embeds,
+                ...(fork ? { forkedFrom: fork.ref } : {}),
                 from,
                 prompt,
                 author,
             });
             if (!created)
                 return fail(404, "session not found");
-            mock = await updateMockAfterWrite(mock, { state, kind, title, knobs: knobs.value, session });
+            mock = await updateMockAfterWrite(mock, {
+                state,
+                situation,
+                kind,
+                title,
+                knobs: knobs.value,
+                widths,
+                area,
+                source,
+                session,
+            });
+            const flow = flowIn ? await placeFlow(project, flowIn.name, screen, flowIn.step) : undefined;
             announcePost(mock, created, true);
             if (prompt && ctx.request)
                 notifyPublish(mock, created, prompt, ctx);
-            return writeResult(mock, created, ctx, { nudges, status: 201 });
+            return writeResult(mock, created, ctx, { nudges, status: 201, flow });
         }
         if (!mock)
             return missing();
         // A new version is written by whoever writes it; without an explicit
         // session the variant's own session carries it.
         session ??= await store.getSession(target.sessionId);
-        const slots = mock.kind === "page" ? await pageSlots(project, surfaces) : undefined;
         const updated = await store.updatePost(target.id, {
             surfaces,
             title,
             ...(body.variantKnobs !== undefined ? { knobs: variantKnobs.value } : {}),
-            slots,
+            ...(note !== undefined ? { note } : {}),
+            embeds,
             from,
             prompt,
             author,
         });
         if (!updated)
             return fail(404, "variant not found");
-        mock = await updateMockAfterWrite(mock, { state, kind, knobs: knobs.value, session });
+        const flow = flowIn ? await placeFlow(project, flowIn.name, screen, flowIn.step) : undefined;
+        mock = await updateMockAfterWrite(mock, {
+            state,
+            situation,
+            kind,
+            knobs: knobs.value,
+            widths,
+            area,
+            source,
+            session,
+        });
         announcePost(mock, updated, false);
         if (prompt && ctx.request)
             notifyPublish(mock, updated, prompt, ctx);
@@ -1056,35 +1420,165 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
             applied,
             nudges,
             writer: session,
+            flow,
         });
     }
+    // `flow` names a flow; `step` is the 1-based place of this screen in it
+    // (moving it if it is there already), 0 takes the screen out, and without
+    // `step` a screen not yet in the flow joins at its end.
+    function flowArg(body) {
+        const stepIn = body.step;
+        if (body.flow === undefined || body.flow === null) {
+            return stepIn === undefined || stepIn === null
+                ? undefined
+                : fail(400, '"step" needs "flow": the flow\'s name, e.g. "Morning"');
+        }
+        const name = str(body.flow, MAX_LABEL);
+        if (!name)
+            return fail(400, '"flow" must be the flow\'s name, e.g. "Morning"');
+        if (stepIn === undefined || stepIn === null)
+            return { name };
+        const step = Number(stepIn);
+        if (!Number.isInteger(step) || step < 0) {
+            return fail(400, '"step" must be the 1-based place in the flow, or 0 to take it out');
+        }
+        return { name, step };
+    }
+    // Checked before anything is written, so a full flow leaves no new version behind.
+    async function flowFull(project, name, screen, step) {
+        if (step === 0)
+            return null;
+        const flows = await store.listFlows(project);
+        const flow = flows.find((f) => f.name === name);
+        if (!flow && flows.length >= MAX_FLOWS) {
+            return fail(400, `${project} already has ${MAX_FLOWS} flows; reuse one`);
+        }
+        if (flow &&
+            flow.steps.length >= MAX_FLOW_STEPS &&
+            !flow.steps.some((x) => sameScreen(x, screen))) {
+            return fail(400, `flow "${name}" already has ${MAX_FLOW_STEPS} steps`);
+        }
+        return null;
+    }
+    async function placeFlow(project, name, screen, step) {
+        let at = step;
+        if (at === undefined) {
+            const flow = (await store.listFlows(project)).find((f) => f.name === name);
+            const i = flow ? flow.steps.findIndex((x) => sameScreen(x, screen)) : -1;
+            at = i >= 0 ? i + 1 : MAX_FLOW_STEPS + 1;
+        }
+        const flow = await store.placeFlowStep(project, name, screen, at);
+        return { name, steps: flow?.steps ?? [] };
+    }
+    // The project's flows as `read` returns them: only steps whose screen exists.
+    async function flowsView(project, mocks) {
+        const bySlug = new Map(mocks.map((m) => [m.slug, m]));
+        const exists = (x) => {
+            const m = bySlug.get(x.mock);
+            return !!m && (x.state === null ? m.states.length === 0 : m.states.includes(x.state));
+        };
+        return (await store.listFlows(project))
+            .map((f) => ({ name: f.name, steps: f.steps.filter(exists) }))
+            .filter((f) => f.steps.length > 0);
+    }
+    // `fork`: "variant" or "variant@N", the sibling version a new variant starts
+    // from.
+    function forkArg(v) {
+        if (v === undefined || v === null || v === "")
+            return undefined;
+        const bad = '"fork" must be "<variant>" or "<variant>@<version>", e.g. "quiet@2"';
+        if (typeof v !== "string")
+            return fail(400, bad);
+        const m = /^(.+?)(?:@(\d+))?$/.exec(v.trim());
+        const variant = m && str(m[1], MAX_LABEL);
+        if (!variant)
+            return fail(400, bad);
+        const version = m[2] === undefined ? undefined : Number(m[2]);
+        if (version !== undefined && version < 1)
+            return fail(400, bad);
+        return version === undefined ? { variant } : { variant, version };
+    }
+    // An optional free-text field of the mock (`area`, `source`): absent keeps
+    // it, "" or null clears it.
+    function labelArg(body, key, max) {
+        const v = body?.[key];
+        if (v === undefined)
+            return undefined;
+        if (v === null)
+            return null;
+        if (typeof v !== "string")
+            return fail(400, `"${key}" must be a string; "" clears it`);
+        return str(v, max) ?? null;
+    }
+    // `widths`: the device widths the mock is judged at, in the agent's order;
+    // [] hands the choice back to the viewer.
+    function widthsArg(v) {
+        if (v === undefined)
+            return undefined;
+        const bad = `"widths" must be up to ${MAX_WIDTHS} integer px widths between ${MIN_WIDTH} and ${MAX_WIDTH}, e.g. [390, 1280]`;
+        if (!Array.isArray(v) || v.length > MAX_WIDTHS)
+            return fail(400, bad);
+        const out = [];
+        for (const w of v) {
+            if (!Number.isInteger(w) || w < MIN_WIDTH || w > MAX_WIDTH)
+                return fail(400, bad);
+            if (!out.includes(w))
+                out.push(w);
+        }
+        return out;
+    }
     // `parts`: new outer html per part ("name" or "name#key"), spliced into the
     // variant's html so a tweak costs the tweak rather than the whole document.
-    function partEditsArg(body) {
-        if (body?.parts === undefined)
+    // `fills`: the same per slot alternative ("part#fill"), replaced or added.
+    function editsArg(body, key) {
+        if (body?.[key] === undefined)
             return undefined;
-        const parts = body.parts;
-        if (!parts || typeof parts !== "object" || Array.isArray(parts)) {
-            return fail(400, '"parts" must be an object: { "<part name>": "<html for that part>" }');
+        const edits = body[key];
+        const shape = key === "parts"
+            ? '{ "<part name>": "<html for that part>" }'
+            : '{ "<part>#<fill>": "<html for that fill>" }';
+        if (!edits || typeof edits !== "object" || Array.isArray(edits)) {
+            return fail(400, `"${key}" must be an object: ${shape}`);
         }
-        const entries = Object.entries(parts);
+        const entries = Object.entries(edits);
         if (entries.length === 0)
-            return fail(400, '"parts" is empty; name at least one part');
+            return fail(400, `"${key}" is empty; name at least one ${key.slice(0, -1)}`);
         if (entries.some(([, html]) => typeof html !== "string")) {
-            return fail(400, 'each "parts" value must be the html string for that part');
+            return fail(400, `each "${key}" value must be the html string for that ${key.slice(0, -1)}`);
         }
-        return parts;
+        return edits;
     }
     // A write may add a state, retitle the mock, declare knobs, and makes its
     // session the one a reply is delivered to.
     async function updateMockAfterWrite(mock, w) {
-        const states = w.state !== null && !mock.states.includes(w.state) ? [...mock.states, w.state] : undefined;
+        let states;
+        let situations;
+        if (w.state !== null && !mock.states.includes(w.state)) {
+            if (w.situation) {
+                // After its state and that state's other situations, so the order of
+                // states reads moment by moment.
+                const { of, name } = w.situation;
+                const own = mock.situations[of] ?? [];
+                const last = [of, ...own.map((n) => situationKey(of, n))]
+                    .map((st) => mock.states.indexOf(st))
+                    .reduce((a, b) => Math.max(a, b), -1);
+                states = [...mock.states.slice(0, last + 1), w.state, ...mock.states.slice(last + 1)];
+                situations = { ...mock.situations, [of]: [...own, name] };
+            }
+            else {
+                states = [...mock.states, w.state];
+            }
+        }
         const knobs = Object.keys(w.knobs).length ? { ...mock.knobs, ...w.knobs } : undefined;
         const updated = await store.updateMock(mock.id, {
             ...(states ? { states } : {}),
+            ...(situations ? { situations } : {}),
             ...(w.kind ? { kind: w.kind } : {}),
             ...(w.title ? { title: w.title } : {}),
             ...(knobs ? { knobs } : {}),
+            ...(w.widths ? { widths: w.widths } : {}),
+            ...(w.area === undefined ? {} : { area: w.area }),
+            ...(w.source === undefined ? {} : { source: w.source }),
             ...(w.session ? { sessionId: w.session.id } : {}),
         });
         if (!updated)
@@ -1115,17 +1609,62 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         }
         const open = rows.reduce((n, r) => n + r.open, 0);
         return ok({
-            ...(project ? { project } : {}),
+            ...(project ? { project, flows: await flowsView(project, mocks) } : {}),
             mocks: rows,
             open,
             openMocks: rows.filter((r) => r.open > 0).length,
             pending,
         });
     }
-    // The tuned values of the mock's latest reply: what the user last sent.
-    async function lastTuned(mockId) {
-        const replies = (await store.listComments({ mockId })).filter((c) => c.kind === "reply");
-        return replies[replies.length - 1]?.payload?.tuned ?? {};
+    // The project as a tree: every mock with its variants per state (status,
+    // lineage, what its embeds resolve to) and the components it embeds and is
+    // embedded in, and the declared flows. What the viewer's Home and an agent's
+    // `read --tree` lay out.
+    async function treeFlow(query) {
+        const project = str(query.project, MAX_TITLE);
+        if (!project)
+            return fail(400, 'provide "project"');
+        const mocks = await store.listMocks(project);
+        const nodes = [];
+        const pending = [];
+        for (const m of mocks) {
+            const posts = await store.listPosts({ mockId: m.id });
+            const views = await embedViews(m, posts);
+            const embeds = new Set();
+            for (const p of posts) {
+                if (!isLive(p.status))
+                    continue;
+                for (const x of p.surfaces) {
+                    if (x.kind === "html")
+                        for (const t of parseEmbedTags(x.html))
+                            embeds.add(t.slug);
+                }
+            }
+            nodes.push(treeNodeView(m, posts, {
+                settled: settledValues(await replyPayloads(m.id), m, posts),
+                embeds: [...embeds],
+                embedViews: views,
+            }));
+            pending.push(pendingOf(m, posts));
+        }
+        const bySlug = new Map(nodes.map((n) => [n.slug, n]));
+        for (const n of nodes) {
+            n.embeds = n.embeds.filter((s) => bySlug.has(s));
+            for (const s of n.embeds)
+                bySlug.get(s).embeddedIn.push(n.slug);
+        }
+        return ok({
+            project,
+            tree: nodes,
+            flows: await flowsView(project, mocks),
+            areaOrder: await areaOrderOf(project),
+            pending,
+        });
+    }
+    async function replyPayloads(mockId) {
+        return (await store.listComments({ mockId }))
+            .filter((c) => c.kind === "reply" && c.payload && !c.payload.edited)
+            .map((c) => c.payload);
     }
     async function getMockFlow(ref, query) {
         const mock = await resolveMock(ref, query.project, query.session);
@@ -1136,7 +1675,8 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
             ...mockDetailView(mock, posts, {
                 body: query.body,
                 history: query.history,
-                tuned: await lastTuned(mock.id),
+                settled: settledValues(await replyPayloads(mock.id), mock, posts),
+                embeds: await embedViews(mock, posts),
             }),
             pending: pendingOf(mock, posts),
         });
@@ -1151,31 +1691,45 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         const states = (mock.states.length ? mock.states : [null]).filter((s) => wantedState === undefined || s === wantedState);
         if (states.length === 0)
             return fail(404, `${mock.slug} has no state "${wantedState}"`);
+        const replies = await replyPayloads(mock.id);
+        const lastReply = replies[replies.length - 1] ?? null;
+        const settled = settledValues(replies, mock, posts);
         const entries = [];
         for (const state of states) {
             const inState = posts.filter((p) => p.state === state);
-            const post = (wantedVariant && inState.find((p) => p.variant === wantedVariant)) ||
+            const found = (wantedVariant && inState.find((p) => p.variant === wantedVariant)) ||
                 inState.find((p) => p.status === "accepted") ||
                 inState.find((p) => p.status === "open") ||
                 inState[0];
-            if (!post)
+            if (!found)
                 continue;
-            if (wantedVariant && post.variant !== wantedVariant)
+            if (wantedVariant && found.variant !== wantedVariant)
                 continue;
+            const post = postAtVersion(found, inUseVersion(found)) ?? found;
             const html = post.surfaces.find((s) => s.kind === "html");
+            // With fills, the state as decided: only the chosen fills, by every
+            // value sent so far (defaults before any reply). The authored markup with
+            // every fill stays available as `allFills`.
+            const slots = slotsInSurfaces(post.surfaces);
+            const raw = html && html.kind === "html" ? html.html : "";
+            const composed = slots.length ? composeFills(raw, chosenFills(slots, settled)) : raw;
             entries.push({
                 state,
                 variant: post.variant,
                 postId: post.id,
                 version: post.version,
-                status: post.status,
-                html: html && html.kind === "html" ? html.html : "",
+                // The agent's newer versions wait until the user puts one in use.
+                ...(found.version !== post.version ? { latest: found.version } : {}),
+                status: variantStatus(post.status),
+                html: composed,
+                ...(slots.length ? { allFills: raw } : {}),
                 markdown: postToMarkdown(post, {
                     postUrl: `${ctx.base}/s/${post.id}`,
                     assetBase: ctx.base,
                 }),
                 history: [
-                    ...[...post.history]
+                    ...[...found.history]
+                        .filter((h) => !(found.hiddenVersions ?? []).includes(h.version))
                         .sort((a, b) => a.version - b.version)
                         .map((h) => ({
                         version: h.version,
@@ -1184,10 +1738,10 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
                         prompt: h.prompt ?? "",
                     })),
                     {
-                        version: post.version,
-                        at: post.updatedAt,
-                        from: post.from ?? null,
-                        prompt: post.prompt ?? "",
+                        version: found.version,
+                        at: found.updatedAt,
+                        from: found.from ?? null,
+                        prompt: found.prompt ?? "",
                     },
                 ],
                 screenshotUrl: screenshots ? `${ctx.base}/s/${post.id}.png?v=${post.version}` : null,
@@ -1198,7 +1752,7 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
                 variants: posts.map(variantLabel),
             });
         }
-        const replies = (await store.listComments({ mockId: mock.id })).filter((c) => c.kind === "reply");
+        const decisions = lastReply ? decisionsFor(mock, posts, lastReply) : null;
         return ok({
             project: mock.project,
             mock: mock.slug,
@@ -1206,7 +1760,9 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
             kind: mock.kind,
             states: entries,
             knobs: mock.knobs,
-            reply: replies[replies.length - 1]?.payload ?? null,
+            settled,
+            reply: lastReply,
+            ...(decisions ? { decisions } : {}),
         });
     }
     // --- asks ---
@@ -1239,6 +1795,10 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         const options = [];
         // Seeded with the viewer's write-in, so a label "Other" slugs to "other-2".
         const optionIds = new Set([OTHER_ID]);
+        // The agent's own pick, shown as a quiet mark on its option: one per ask.
+        const picks = raw.options.filter((o) => o && typeof o === "object" && o.recommended === true).length;
+        if (picks > 1)
+            return `ask "${text}" recommends ${picks} options; recommend one`;
         for (const o of raw.options) {
             const opt = typeof o === "string" ? { label: o } : o;
             const label = str(opt?.label, 200);
@@ -1262,12 +1822,32 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
                     return checked.error;
                 set = checked.value;
             }
-            options.push({ id, label, ...(variant ? { variant } : {}), ...(set ? { set } : {}) });
+            const pick = opt.recommended === true ? { recommended: true } : {};
+            if (opt.version !== undefined) {
+                const pinned = versionOption(opt.version, label, variant, { scope, state }, mock, posts);
+                if (typeof pinned === "string")
+                    return pinned;
+                options.push({ id, label, ...pinned, ...(set ? { set } : {}), ...pick });
+                continue;
+            }
+            options.push({
+                id,
+                label,
+                ...(variant ? { variant } : {}),
+                ...(set ? { set } : {}),
+                ...pick,
+            });
         }
         let id = slugify(str(raw.id, 64) ?? text).slice(0, 40);
         if (!str(raw.id, 64))
             for (let n = 2; taken.has(id); n++)
                 id = `${slugify(text).slice(0, 36)}-${n}`;
+        const after = raw.after === undefined ? undefined : str(raw.after, 64);
+        if (raw.after !== undefined) {
+            if (!after || after === id || !taken.has(after)) {
+                return `ask "${text}": after must name an earlier ask's id (asked before it or earlier in this call)`;
+            }
+        }
         return {
             id,
             text,
@@ -1276,9 +1856,49 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
             ...(part ? { part } : {}),
             options,
             ...(raw.multi === true ? { multi: true } : {}),
+            ...(after ? { after } : {}),
             at: new Date().toISOString(),
         };
     }
+    // A version option names one visible version of one variant in the ask's
+    // state (`optionState`); the variant may be left out when that state has
+    // only one, or one accepted.
+    function versionOption(raw, label, variant, ask, mock, posts) {
+        const version = Number(raw);
+        if (!Number.isInteger(version) || version < 1) {
+            return `option "${label}": version must be a positive integer`;
+        }
+        if (ask.scope === "part") {
+            return `option "${label}" names a version, which puts it in use: ask with scope "state" or "mock", not "part"`;
+        }
+        if (ask.state === undefined && mock.states.length > 1) {
+            return `option "${label}" names a version: give the ask a state (${mock.slug} has ${mock.states.map((x) => `"${x}"`).join(", ")})`;
+        }
+        const state = optionState(ask, mock);
+        const inState = posts.filter((p) => p.state === state);
+        const accepted = inState.filter((p) => p.status === "accepted");
+        const post = variant
+            ? inState.find((p) => p.variant === variant)
+            : inState.length === 1
+                ? inState[0]
+                : accepted.length === 1
+                    ? accepted[0]
+                    : undefined;
+        const where = state === null ? mock.slug : `"${state}"`;
+        if (!post) {
+            return variant
+                ? `option "${label}" names variant "${variant}", which ${where} does not have`
+                : `option "${label}" names version ${version} but ${where} has several variants (${inState.map((p) => p.variant).join(", ")}): name one`;
+        }
+        const hidden = new Set(post.hiddenVersions ?? []);
+        const visible = [post.version, ...post.history.map((h) => h.version)]
+            .filter((v) => !hidden.has(v))
+            .sort((a, b) => a - b);
+        if (!visible.includes(version)) {
+            return `option "${label}" names ${post.variant} v${version}${hidden.has(version) ? ", which is hidden" : ""}; ${post.variant} has ${visible.map((v) => `v${v}`).join(", ")}`;
+        }
+        return { variant: post.variant, version };
+    }
     // Ask the user structured questions. An ask whose id matches an existing one
     // replaces it (and reopens it); anything else is appended.
     async function askFlow(ref, body, ctx) {
@@ -1297,11 +1917,18 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         const asks = [...mock.asks];
         const taken = new Set(asks.map((a) => a.id));
         const added = [];
+        const skipped = [];
         for (const entry of raw) {
             const ask = sanitizeAsk(entry, mock, posts, taken);
             if (typeof ask === "string")
                 return fail(400, ask);
             const at = asks.findIndex((a) => a.id === ask.id);
+            // The user closed this one as not worth answering; asking it again is
+            // exactly the noise they closed away. Only their Reopen revives it.
+            if (at >= 0 && asks[at].dismissed) {
+                skipped.push(ask.id);
+                continue;
+            }
             if (at >= 0)
                 asks[at] = ask;
             else
@@ -1309,11 +1936,31 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
             taken.add(ask.id);
             added.push(ask);
         }
+        const skippedNudges = skipped.map((id) => `ask "${id}": the user dismissed it when they closed ${mock.slug}; not asked again. Don't re-ask it.`);
+        if (!added.length) {
+            return ok({
+                mock: mock.slug,
+                mockId: mock.id,
+                project: mock.project,
+                asks: [],
+                skipped,
+                open: openCount(mock, posts),
+                url: mockUrl(ctx.base, mock),
+                nudges: skippedNudges,
+                feedback: mock.sessionId ? await collectFeedback(mock.sessionId, ctx.base) : [],
+            });
+        }
         let sessionId = mock.sessionId;
         if (typeof body.session === "string" && (await store.getSession(body.session))) {
             sessionId = body.session;
         }
-        const updated = await store.updateMock(mock.id, { asks, sessionId });
+        // A new question on a closed mock brings it back to the open list, or it
+        // would wait where the user no longer looks.
+        const updated = await store.updateMock(mock.id, {
+            asks,
+            sessionId,
+            ...(mock.closedAt ? { closedAt: null } : {}),
+        });
         if (!updated)
             return fail(404, "mock not found");
         mock = updated;
@@ -1341,12 +1988,13 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
             url: mockUrl(ctx.base, mock),
         });
         const feedback = session ? await collectFeedback(session.id, ctx.base) : [];
-        const nudges = askNudges(added, mock.asks);
+        const nudges = [...skippedNudges, ...askNudges(added, mock.asks)];
         return ok({
             mock: mock.slug,
             mockId: mock.id,
             project: mock.project,
             asks: added,
+            ...(skipped.length ? { skipped } : {}),
             open: openCount(mock, posts),
             url: mockUrl(ctx.base, mock),
             ...(nudges.length ? { nudges } : {}),
@@ -1367,15 +2015,33 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
             if (reaction !== undefined && !REACTIONS.includes(reaction))
                 return `reaction must be one of ${REACTIONS.join(", ")}`;
             const text = str(c?.text, MAX_COMMENT_TEXT);
-            if (!text && !reaction)
+            const borrowIn = c?.borrow;
+            if (!text && !reaction && !borrowIn)
                 return "every comment needs text";
             const state = stateArg(c.state) ?? null;
             if (state !== null && !mock.states.includes(state))
                 return `${mock.slug} has no state "${state}"`;
             const part = str(c.part, 200) ?? null;
             const variant = str(c.variant, 200);
-            if (variant && !posts.some((p) => p.variant === variant && p.state === state))
+            const post = variant ? posts.find((p) => p.variant === variant && p.state === state) : null;
+            if (variant && !post)
                 return `${mock.slug} has no variant "${variant}"${state ? ` in "${state}"` : ""}`;
+            const version = c.version;
+            if (version !== undefined &&
+                (!post || !Number.isInteger(version) || version < 1 || version > post.version))
+                return `${mock.slug} has no version ${String(version)}${variant ? ` of "${variant}"` : ""}`;
+            let borrow;
+            if (borrowIn !== undefined) {
+                const from = str(borrowIn?.from, 240);
+                const at = from ? /^(.+)@(\d+)$/.exec(from) : null;
+                const source = at && posts.find((p) => p.variant === at[1] && p.state === state);
+                if (!at || !source || Number(at[2]) < 1 || Number(at[2]) > source.version)
+                    return `borrow.from must be variant@version of "${mock.slug}"${state ? ` in "${state}"` : ""}`;
+                if (!post || version === undefined)
+                    return "a borrow names the version it goes into";
+                const borrowed = str(borrowIn?.part, 200);
+                borrow = { from: at[0], ...(borrowed ? { part: borrowed } : {}) };
+            }
             const a = c.anchor && typeof c.anchor === "object" ? c.anchor : null;
             const anchor = a ? sanitizePartAnchor(a) : undefined;
             const next = {
@@ -1385,13 +2051,16 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
                 ...(anchor ? { anchor } : {}),
                 ...(reaction ? { reaction: reaction } : {}),
                 ...(variant ? { variant } : {}),
+                ...(version !== undefined ? { version: version } : {}),
+                ...(borrow ? { borrow } : {}),
             };
             // One reaction per target: a later tap on the same part replaces the earlier one.
             if (reaction) {
                 const same = out.findIndex((o) => o.reaction &&
                     o.part === part &&
                     o.state === state &&
-                    (o.variant ?? null) === (variant ?? null));
+                    (o.variant ?? null) === (variant ?? null) &&
+                    (o.version ?? null) === (version ?? null));
                 if (same >= 0)
                     out.splice(same, 1);
             }
@@ -1498,18 +2167,18 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         }
         return out;
     }
-    function sanitizeMix(raw, posts) {
+    function sanitizeBorrowed(raw, posts) {
         if (raw === undefined || raw === null)
             return {};
         if (typeof raw !== "object" || Array.isArray(raw))
-            return '"mix" must be an object';
+            return '"borrowed" must be an object';
         const variants = new Set(posts.map((p) => p.variant));
         const out = {};
         for (const [part, variant] of Object.entries(raw)) {
             if (!part || part.length > 200)
-                return "mix keys are part names";
+                return "borrowed keys are part names";
             if (typeof variant !== "string" || !variants.has(variant)) {
-                return `mix "${part}" names a variant that does not exist`;
+                return `borrowed "${part}" names a variant that does not exist`;
             }
             out[part] = variant;
         }
@@ -1522,9 +2191,9 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         const answers = sanitizeAnswers(pick("answers"), mock, posts);
         if (typeof answers === "string")
             return answers;
-        const mix = sanitizeMix(pick("mix"), posts);
-        if (typeof mix === "string")
-            return mix;
+        const borrowed = sanitizeBorrowed(pick("borrowed"), posts);
+        if (typeof borrowed === "string")
+            return borrowed;
         const tuned = checkKnobValues(pick("tuned"), mock, posts, "tuned");
         if (!tuned.ok)
             return tuned.error;
@@ -1559,7 +2228,7 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         return {
             version,
             answers,
-            mix,
+            borrowed,
             tuned: tuned.value,
             comments,
             others,
@@ -1604,33 +2273,44 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         bus.broadcast({ type: "draft-updated", mockId: mock.id });
         return ok({ draft: null });
     }
-    function sanitizeDecision(raw, mock, posts) {
+    function sanitizeVerdict(raw, mock, posts) {
         if (raw === undefined || raw === null)
             return undefined;
         const kind = raw.kind;
-        if (kind !== "accept" && kind !== "revise" && kind !== "drop") {
-            return 'decision.kind must be "accept", "revise" or "drop"';
-        }
+        if (kind !== "use" && kind !== "revise")
+            return 'verdict.kind must be "use" or "revise"';
         const chosen = chooseVariant(mock, posts, stateArg(raw.state), str(raw.variant, MAX_LABEL));
         if (isResult(chosen))
             return chosen.body.error;
         return { kind, state: chosen.state, variant: chosen.variant };
     }
-    // Which variants a reply accepts and archives. A variant-bound answer accepts
-    // the chosen variant(s) in every state the ask covers and archives their
-    // siblings there; a part-scoped pick is a mix, not a verdict. The built-in
-    // variant asks flip the same way, per state.
-    function replyFlips(mock, posts, answers, decision) {
-        const accept = new Set();
+    // Which variants a reply puts in use and archives. A variant-bound answer puts
+    // the chosen variant(s) in use in every state the ask covers and archives
+    // their siblings there; a part-scoped pick is a borrow, not a verdict. The
+    // built-in variant questions flip the same way, per state. Each variant is put
+    // in use at the version the reply was made on (`version`, a mock version), not
+    // whatever the agent published since — or, for a version option, at its version.
+    function replyFlips(mock, posts, answers, verdict, version) {
+        const accept = new Map();
         const archive = new Set();
-        const settle = (inState, chosen) => {
+        const settle = (inState, chosen, pins) => {
             if (!inState.some((p) => chosen.has(p.variant)))
                 return;
             for (const p of inState) {
-                if (chosen.has(p.variant))
-                    accept.add(p.id);
-                else if (p.status !== "archived")
-                    archive.add(p.id);
+                if (!chosen.has(p.variant)) {
+                    if (isLive(p.status))
+                        archive.add(p.id);
+                    continue;
+                }
+                const pin = pins?.get(p.variant);
+                // A version option outranks a looser pick of the same variant (the
+                // built-in Which variant?, or the agent's own variant question) in the
+                // same reply.
+                if (pin === undefined && accept.has(p.id))
+                    continue;
+                // A pinned version history retention has since dropped falls back to
+                // what the stage showed, rather than pinning one nothing can render.
+                accept.set(p.id, pin !== undefined && postAtVersion(p, pin) ? pin : versionAt(p, version));
             }
         };
         const builtins = Object.keys(answers)
@@ -1641,22 +2321,23 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
             if (answer === undefined || ask.scope === "part")
                 continue;
             const ids = Array.isArray(answer) ? answer : [answer];
-            const chosen = new Set(ask.options.filter((o) => ids.includes(o.id) && o.variant).map((o) => o.variant));
+            const picked = ask.options.filter((o) => ids.includes(o.id) && o.variant);
+            const pinned = picked.filter((o) => o.version !== undefined);
+            if (pinned.length) {
+                const state = optionState(ask, mock);
+                settle(posts.filter((p) => p.state === state), new Set(pinned.map((o) => o.variant)), new Map(pinned.map((o) => [o.variant, o.version])));
+            }
+            const chosen = new Set(picked.filter((o) => o.version === undefined).map((o) => o.variant));
             if (chosen.size === 0)
                 continue;
             const states = ask.scope === "state" ? [ask.state ?? null] : mock.states.length ? mock.states : [null];
             for (const state of states)
                 settle(posts.filter((p) => p.state === state), chosen);
         }
-        if (decision?.kind === "accept") {
-            settle(posts.filter((p) => p.state === decision.state), new Set([decision.variant]));
-        }
-        else if (decision?.kind === "drop") {
-            const post = posts.find((p) => p.state === decision.state && p.variant === decision.variant);
-            if (post)
-                archive.add(post.id);
+        if (verdict?.kind === "use") {
+            settle(posts.filter((p) => p.state === verdict.state), new Set([verdict.variant]));
         }
-        for (const id of accept)
+        for (const id of accept.keys())
             archive.delete(id);
         return { accept, archive };
     }
@@ -1669,6 +2350,7 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         if (answer === undefined && other === undefined && note === undefined)
             return a;
         const next = { ...a };
+        delete next.dismissed;
         if (answer !== undefined || other !== undefined) {
             delete next.answer;
             delete next.other;
@@ -1704,13 +2386,13 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         if (typeof draft === "string")
             return fail(400, draft);
         const text = str(body?.text, MAX_COMMENT_TEXT);
-        const decision = sanitizeDecision(body?.decision, mock, posts);
-        if (typeof decision === "string")
-            return fail(400, decision);
+        const verdict = sanitizeVerdict(body?.verdict, mock, posts);
+        if (typeof verdict === "string")
+            return fail(400, verdict);
         const empty = !text &&
-            !decision &&
+            !verdict &&
             !Object.keys(draft.answers).length &&
-            !Object.keys(draft.mix).length &&
+            !Object.keys(draft.borrowed).length &&
             !Object.keys(draft.tuned).length &&
             !draft.comments.length &&
             !Object.keys(draft.others ?? {}).length &&
@@ -1725,7 +2407,7 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
             mockId: mock.id,
             version: draft.version,
             answers: draft.answers,
-            mix: draft.mix,
+            borrowed: draft.borrowed,
             tuned: draft.tuned,
             comments: draft.comments,
             ...(Object.keys(draft.others ?? {}).length ? { others: draft.others } : {}),
@@ -1733,17 +2415,21 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
             ...(draft.otherImages ? { otherImages: draft.otherImages } : {}),
             ...(draft.noteImages ? { noteImages: draft.noteImages } : {}),
             ...(text ? { text } : {}),
-            ...(decision ? { decision } : {}),
         };
         const asks = mock.asks.map((a) => sentAsk(a, draft));
-        const flips = replyFlips(mock, posts, draft.answers, decision);
+        const flips = replyFlips(mock, posts, draft.answers, verdict, draft.version);
+        if (verdict) {
+            const target = posts.find((p) => p.state === verdict.state && p.variant === verdict.variant);
+            const pinned = verdict.kind === "use" && target ? flips.accept.get(target.id) : undefined;
+            payload.verdict = pinned === undefined ? verdict : { ...verdict, version: pinned };
+        }
         const comment = await store.commitReply({
             mockId: mock.id,
             sessionId,
             text: text ?? "",
             payload,
             asks,
-            accept: [...flips.accept],
+            accept: [...flips.accept].map(([id, version]) => ({ id, version })),
             archive: [...flips.archive],
         });
         if (!comment)
@@ -1751,6 +2437,7 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         announceComment(comment);
         bus.broadcast({ type: "mock-updated", id: mock.id, project: mock.project });
         bus.broadcast({ type: "draft-updated", mockId: mock.id });
+        void announceEmbedders(mock).catch((err) => console.warn("[mockpit] embedders", err));
         const after = await store.listPosts({ mockId: mock.id });
         for (const p of after) {
             if (flips.accept.has(p.id) || flips.archive.has(p.id)) {
@@ -1768,22 +2455,223 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
             event: "decision",
             project: mock.project,
             slug: mock.slug,
-            variant: decision?.variant ?? "",
+            variant: verdict?.variant ?? "",
             version: draft.version,
-            text: text || decision?.kind || "reply",
+            text: text || verdict?.kind || "reply",
             url: mockUrl(ctx.base, mock),
         });
         const [delivered] = await withDelivered([comment]);
         return ok({
             reply: delivered,
-            accepted: after
+            inUse: after
                 .filter((p) => flips.accept.has(p.id))
-                .map((p) => ({ state: p.state, variant: p.variant })),
+                .map((p) => ({ state: p.state, variant: p.variant, version: inUseVersion(p) })),
             archived: after
                 .filter((p) => flips.archive.has(p.id))
                 .map((p) => ({ state: p.state, variant: p.variant })),
         }, 201);
     }
+    // "Use this": the user puts one exact version of a variant in use. It
+    // archives the variant's live siblings in that state and reaches the agent
+    // once, as a reply carrying the verdict, through the same cursor as a Send;
+    // the user's unsent draft is left for their next Send.
+    async function useFlow(ref, body, ctx) {
+        if (!ctx.viewer)
+            return viewerOnly();
+        const mock = await resolveMock(ref);
+        if (isResult(mock))
+            return mock;
+        const posts = await store.listPosts({ mockId: mock.id });
+        const chosen = chooseVariant(mock, posts, stateArg(body?.state), str(body?.variant, MAX_LABEL));
+        if (isResult(chosen))
+            return chosen;
+        const version = Number(body?.version);
+        if (!Number.isInteger(version) || version < 1) {
+            return fail(400, '"version" must be a positive integer');
+        }
+        if (!postAtVersion(chosen, version)) {
+            return fail(404, `${chosen.variant} has no version ${version}`, {
+                versions: [chosen.version, ...chosen.history.map((h) => h.version)],
+            });
+        }
+        const inUse = { state: chosen.state, variant: chosen.variant, version };
+        if (chosen.status === "accepted" && chosen.acceptedVersion === version) {
+            return ok({ reply: null, inUse, archived: [] });
+        }
+        const latest = [...posts].sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))[0];
+        const sessionId = mock.sessionId ?? latest?.sessionId;
+        if (!sessionId)
+            return fail(409, `${mock.slug} has no agent session to reply to`);
+        const archive = posts.filter((p) => p.state === chosen.state && p.id !== chosen.id && isLive(p.status));
+        const comment = await store.commitReply({
+            mockId: mock.id,
+            sessionId,
+            text: "",
+            payload: {
+                mockId: mock.id,
+                version,
+                answers: {},
+                borrowed: {},
+                tuned: {},
+                comments: [],
+                verdict: { kind: "use", ...inUse },
+            },
+            asks: mock.asks,
+            accept: [{ id: chosen.id, version }],
+            archive: archive.map((p) => p.id),
+            keepDraft: true,
+        });
+        if (!comment)
+            return fail(409, `${mock.slug} has no agent session to reply to`);
+        announceComment(comment);
+        bus.broadcast({ type: "mock-updated", id: mock.id, project: mock.project });
+        void announceEmbedders(mock).catch((err) => console.warn("[mockpit] embedders", err));
+        for (const p of [chosen, ...archive]) {
+            bus.broadcast({
+                type: "post-updated",
+                id: p.id,
+                mockId: mock.id,
+                sessionId: p.sessionId,
+                version: p.version,
+                by: "user",
+            });
+        }
+        fireNotify({
+            event: "decision",
+            project: mock.project,
+            slug: mock.slug,
+            variant: chosen.variant,
+            version,
+            text: "use",
+            url: mockUrl(ctx.base, mock),
+        });
+        const [delivered] = await withDelivered([comment]);
+        return ok({
+            reply: delivered,
+            inUse,
+            archived: archive.map((p) => ({ state: p.state, variant: p.variant })),
+        }, 201);
+    }
+    // The user hides one version of a variant from the history, or brings it
+    // back. Hidden, never removed: replies and embeds may point at it, so it still
+    // renders by URL. The version in use can't be hidden, nor a state's last.
+    async function hideFlow(ref, body, ctx) {
+        if (!ctx.viewer)
+            return viewerOnly();
+        const mock = await resolveMock(ref);
+        if (isResult(mock))
+            return mock;
+        if (typeof body?.hidden !== "boolean")
+            return fail(400, '"hidden" must be true or false');
+        const posts = await store.listPosts({ mockId: mock.id });
+        const chosen = chooseVariant(mock, posts, stateArg(body?.state), str(body?.variant, MAX_LABEL));
+        if (isResult(chosen))
+            return chosen;
+        const version = Number(body?.version);
+        if (!Number.isInteger(version) || version < 1) {
+            return fail(400, '"version" must be a positive integer');
+        }
+        if (!postAtVersion(chosen, version)) {
+            return fail(404, `${chosen.variant} has no version ${version}`);
+        }
+        if (body.hidden) {
+            if (chosen.status === "accepted" && inUseVersion(chosen) === version) {
+                return fail(409, `v${version} of ${chosen.variant} is in use; use another version first`);
+            }
+            const visible = posts
+                .filter((p) => p.state === chosen.state)
+                .flatMap((p) => [p.version, ...p.history.map((h) => h.version)].map((v) => [p, v]))
+                .filter(([p, v]) => !(p.hiddenVersions ?? []).includes(v));
+            if (visible.length === 1 && visible[0][0].id === chosen.id && visible[0][1] === version) {
+                return fail(409, "the last visible version can't be hidden");
+            }
+        }
+        const updated = await store.setVersionHidden(chosen.id, version, body.hidden);
+        if (!updated)
+            return fail(404, "variant not found");
+        bus.broadcast({
+            type: "post-updated",
+            id: updated.id,
+            mockId: mock.id,
+            sessionId: updated.sessionId,
+            version: updated.version,
+            by: "user",
+        });
+        return ok({
+            state: updated.state,
+            variant: updated.variant,
+            version,
+            hidden: body.hidden,
+        });
+    }
+    // The user closes a mock from the project list: its open asks are dismissed
+    // unanswered, an unsent draft goes with them, and the agent hears it once,
+    // as a close through the same cursor as a Send.
+    async function closeFlow(ref, ctx) {
+        if (!ctx.viewer)
+            return viewerOnly();
+        const mock = await resolveMock(ref);
+        if (isResult(mock))
+            return mock;
+        const posts = await store.listPosts({ mockId: mock.id });
+        if (mock.closedAt)
+            return ok({ mock: mockSummaryView(mock, posts), dismissed: [] });
+        const dismissed = [...openAsks(mock).map((a) => a.id), ...builtinAskIds(mock, posts, mock.id)];
+        const asks = mock.asks.map((a) => (askAnswered(a) ? a : { ...a, dismissed: true }));
+        const at = new Date().toISOString();
+        const latest = [...posts].sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))[0];
+        const sessionId = mock.sessionId ?? latest?.sessionId;
+        const session = sessionId ? await store.getSession(sessionId) : null;
+        const comment = session
+            ? await store.commitReply({
+                mockId: mock.id,
+                sessionId: session.id,
+                text: "",
+                payload: {
+                    mockId: mock.id,
+                    version: Math.max(1, ...posts.map((p) => p.version)),
+                    answers: {},
+                    borrowed: {},
+                    tuned: {},
+                    comments: [],
+                    closed: { dismissed },
+                },
+                asks,
+                accept: [],
+                archive: [],
+                closedAt: at,
+            })
+            : null;
+        if (comment)
+            announceComment(comment);
+        else {
+            // No agent to tell: the mock still leaves the open list.
+            await store.updateMock(mock.id, { asks, closedAt: at });
+            await store.putDraft(mock.id, null);
+        }
+        bus.broadcast({ type: "mock-updated", id: mock.id, project: mock.project });
+        bus.broadcast({ type: "draft-updated", mockId: mock.id });
+        const after = (await store.getMock(mock.id)) ?? mock;
+        return ok({ mock: mockSummaryView(after, posts), dismissed });
+    }
+    // Back from Closed: the asks it dismissed are open again. The agent was
+    // told they were dismissed; answers given now reach it as a normal Send.
+    async function reopenFlow(ref, ctx) {
+        if (!ctx.viewer)
+            return viewerOnly();
+        const mock = await resolveMock(ref);
+        if (isResult(mock))
+            return mock;
+        const posts = await store.listPosts({ mockId: mock.id });
+        if (!mock.closedAt)
+            return ok({ mock: mockSummaryView(mock, posts) });
+        const asks = mock.asks.map(({ dismissed: _, ...a }) => a);
+        const updated = await store.updateMock(mock.id, { asks, closedAt: null });
+        if (!updated)
+            return fail(404, "mock not found");
+        bus.broadcast({ type: "mock-updated", id: mock.id, project: mock.project });
+        return ok({ mock: mockSummaryView(updated, posts) });
+    }
     async function restoreFlow(ref, body) {
         const mock = await resolveMock(ref, body?.project);
         if (isResult(mock))
@@ -1803,7 +2691,72 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
             version: updated.version,
             by: "user",
         });
-        return ok({ state: updated.state, variant: updated.variant, status: updated.status });
+        return ok({
+            state: updated.state,
+            variant: updated.variant,
+            status: variantStatus(updated.status),
+        });
+    }
+    // The user archives a variant they're done with, short of choosing another:
+    // Studio's × on its last version. Restore is the way back. The variant in
+    // use stays, because archiving it would leave the state with nothing chosen
+    // and no reply saying why.
+    async function archiveFlow(ref, body, ctx) {
+        if (!ctx.viewer)
+            return viewerOnly();
+        const mock = await resolveMock(ref);
+        if (isResult(mock))
+            return mock;
+        const posts = await store.listPosts({ mockId: mock.id });
+        const chosen = chooseVariant(mock, posts, stateArg(body?.state), str(body?.variant, MAX_LABEL));
+        if (isResult(chosen))
+            return chosen;
+        if (variantStatus(chosen.status) === "inUse")
+            return fail(409, `${chosen.variant} is in use`);
+        const updated = await store.setPostStatus(chosen.id, "archived");
+        if (!updated)
+            return fail(404, "variant not found");
+        bus.broadcast({
+            type: "post-updated",
+            id: updated.id,
+            mockId: mock.id,
+            sessionId: updated.sessionId,
+            version: updated.version,
+            by: "user",
+        });
+        return ok({
+            state: updated.state,
+            variant: updated.variant,
+            status: variantStatus(updated.status),
+        });
+    }
+    // The user stars (or unstars) a variant: a favourite to come back to, which
+    // decides nothing. Viewer-only; the agent reads it as `starred`.
+    async function starFlow(ref, body, ctx) {
+        if (!ctx.viewer)
+            return viewerOnly();
+        const mock = await resolveMock(ref);
+        if (isResult(mock))
+            return mock;
+        if (typeof body?.starred !== "boolean")
+            return fail(400, '"starred" must be true or false');
+        const posts = await store.listPosts({ mockId: mock.id });
+        const chosen = chooseVariant(mock, posts, stateArg(body?.state), str(body?.variant, MAX_LABEL));
+        if (isResult(chosen))
+            return chosen;
+        const updated = await store.setPostStarred(chosen.id, body.starred);
+        if (!updated)
+            return fail(404, "variant not found");
+        bus.broadcast({
+            type: "post-updated",
+            id: updated.id,
+            mockId: mock.id,
+            sessionId: updated.sessionId,
+            version: updated.version,
+            by: "user",
+        });
+        bus.broadcast({ type: "mock-updated", id: mock.id, project: mock.project });
+        return ok({ state: updated.state, variant: updated.variant, starred: !!updated.starred });
     }
     // D8 "restore as vN": the user brings an older version back as the newest
     // one. Distinct from restoreFlow, which un-archives a variant. Viewer-only
@@ -1853,6 +2806,216 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         bus.broadcast({ type: "mock-deleted", id: mock.id, project: mock.project });
         return ok({ ok: true });
     }
+    // A write's feedback for the session that made it, when it named one: an
+    // edit needs no session, so without one there is no cursor to read from.
+    const feedbackFor = async (session, base) => typeof session === "string" && session ? collectFeedback(session, base) : [];
+    // `edit`: a mock's own fields, without a new version. A new slug rewrites
+    // every reference to the old one in the project (store.renameMock), so pages
+    // keep showing it and flows keep walking it.
+    async function editMockFlow(ref, body, ctx) {
+        if (!body || typeof body !== "object")
+            return fail(400, "invalid JSON body");
+        const given = ["slug", "title", "kind", "area", "source"].filter((k) => body[k] !== undefined);
+        if (given.length === 0) {
+            return fail(400, 'provide one of "slug", "title", "kind", "area" or "source"');
+        }
+        const mock = await resolveMock(ref, body.project, body.session);
+        if (isResult(mock))
+            return mock;
+        const slugIn = body.slug === undefined ? undefined : str(body.slug, MAX_TITLE);
+        if (body.slug !== undefined && !slugIn)
+            return fail(400, '"slug" must name the mock, e.g. "onni"');
+        const slug = slugIn === undefined ? undefined : slugify(slugIn);
+        const title = str(body.title, MAX_TITLE);
+        if (body.title !== undefined && !title)
+            return fail(400, '"title" must be non-empty text');
+        if (body.kind !== undefined && !isMockKind(body.kind)) {
+            return fail(400, '"kind" must be page, component or sketch');
+        }
+        const kind = body.kind;
+        const area = labelArg(body, "area", MAX_LABEL);
+        if (isResult(area))
+            return area;
+        const source = labelArg(body, "source", MAX_SOURCE);
+        if (isResult(source))
+            return source;
+        const renaming = slug !== undefined && slug !== mock.slug;
+        if (renaming && (await store.findMock(mock.project, slug))) {
+            return fail(409, `${mock.project} already has a mock "${slug}"; pick another slug`);
+        }
+        // Being embedded is what makes a mock a component: a sketch that is still
+        // embedded would be promoted back on its embedder's next publish.
+        if (kind === "sketch" && mock.kind !== "sketch") {
+            const embedders = await embeddersOf(mock.project, mock.slug);
+            if (embedders.length) {
+                return fail(409, `${mock.slug} is embedded in ${embedders.map((m) => m.slug).join(", ")}; being embedded makes it a component. Take the embeds out first`, { embeddedIn: embedders.map((m) => m.slug) });
+            }
+        }
+        let next = mock;
+        // The rename goes first: it is the part that can still lose a race for the slug.
+        if (renaming) {
+            const renamed = await store.renameMock(mock.id, slug);
+            if (!renamed)
+                return fail(409, `${mock.project} already has a mock "${slug}"`);
+            next = renamed;
+            clearRenderCache();
+        }
+        if (title !== undefined || kind !== undefined || area !== undefined || source !== undefined) {
+            next =
+                (await store.updateMock(mock.id, {
+                    ...(title === undefined ? {} : { title }),
+                    ...(kind === undefined ? {} : { kind }),
+                    ...(area === undefined ? {} : { area }),
+                    ...(source === undefined ? {} : { source }),
+                })) ?? next;
+        }
+        bus.broadcast({ type: "mock-updated", id: next.id, project: next.project });
+        if (renaming)
+            await announceEmbedders(next);
+        if (ctx.viewer)
+            await tellAgentEdited(mock, next);
+        // Flows are declared apart from kind, so a page that stops being one stays
+        // in them until the agent takes it out.
+        const nudges = [...titleNudges(title)];
+        if (kind !== undefined && kind !== "page" && mock.kind === "page") {
+            for (const f of await store.listFlows(next.project)) {
+                if (!f.steps.some((x) => x.mock === next.slug))
+                    continue;
+                nudges.push(`${next.slug} is still a step of flow "${f.name}"; publish it with flow "${f.name}" and step 0 to take it out`);
+            }
+        }
+        return ok({
+            mock: {
+                id: next.id,
+                project: next.project,
+                slug: next.slug,
+                title: next.title,
+                kind: next.kind,
+                ...placeOf(next),
+                states: next.states,
+            },
+            ...(renaming ? { renamed: { from: mock.slug, to: next.slug } } : {}),
+            url: mockUrl(ctx.base, next),
+            ...(nudges.length ? { nudges } : {}),
+            feedback: await feedbackFor(body.session, ctx.base),
+        });
+    }
+    // The user moved a mock from Home (another kind or area): the agent hears it
+    // once, through the same cursor as a Send, on the session driving the mock.
+    // Nothing to tell when no agent has written it.
+    async function tellAgentEdited(before, after) {
+        const edited = {
+            ...(after.kind !== before.kind ? { kind: after.kind } : {}),
+            ...(after.area !== before.area ? { area: after.area } : {}),
+        };
+        if (Object.keys(edited).length === 0)
+            return;
+        const posts = await store.listPosts({ mockId: after.id });
+        const latest = [...posts].sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))[0];
+        const sessionId = after.sessionId ?? latest?.sessionId;
+        if (!sessionId)
+            return;
+        const comment = await store.commitReply({
+            mockId: after.id,
+            sessionId,
+            text: "",
+            payload: {
+                mockId: after.id,
+                version: Math.max(1, ...posts.map((p) => p.version)),
+                answers: {},
+                borrowed: {},
+                tuned: {},
+                comments: [],
+                edited,
+            },
+            asks: after.asks,
+            accept: [],
+            archive: [],
+            keepDraft: true,
+        });
+        if (comment)
+            announceComment(comment);
+    }
+    const areaOrderOf = async (project) => {
+        const raw = await store.getSetting(`${AREA_ORDER_SETTING}:${project}`);
+        if (!raw)
+            return [];
+        try {
+            const v = JSON.parse(raw);
+            return Array.isArray(v) ? v.filter((x) => typeof x === "string") : [];
+        }
+        catch {
+            return [];
+        }
+    };
+    // `areaOrder`: the areas in the order Home lists them; [] (or "") hands the
+    // order back to the alphabet.
+    function areaOrderArg(v) {
+        const list = typeof v === "string" ? v.split(",") : v;
+        if (!Array.isArray(list) || list.some((x) => typeof x !== "string")) {
+            return fail(400, '"areaOrder" must be a list of area names, e.g. ["Shell", "Food"]');
+        }
+        const names = [...new Set(list.map((x) => stripNul(x).trim()).filter(Boolean))];
+        if (names.length > MAX_AREAS)
+            return fail(400, `"areaOrder" takes at most ${MAX_AREAS} areas`);
+        if (names.some((x) => x.length > MAX_LABEL)) {
+            return fail(400, `an area name is at most ${MAX_LABEL} characters`);
+        }
+        return names;
+    }
+    // `edit` on a project: a new name for it, carrying its mocks, sessions,
+    // flows and settings (refused onto a project that already has mocks), and
+    // the order Home lists its areas in.
+    async function editProjectFlow(name, body, ctx) {
+        if (!body || typeof body !== "object")
+            return fail(400, "invalid JSON body");
+        const from = str(name, MAX_TITLE);
+        if (!from)
+            return fail(400, "provide the project to edit");
+        if (body.name === undefined && body.areaOrder === undefined) {
+            return fail(400, 'provide "name" (the project\'s new name) or "areaOrder"');
+        }
+        const to = body.name === undefined ? undefined : str(body.name, MAX_TITLE);
+        if (body.name !== undefined && !to)
+            return fail(400, '"name" must be the project\'s new name');
+        if (to === from)
+            return fail(400, `${from} already has that name`);
+        const order = body.areaOrder === undefined ? undefined : areaOrderArg(body.areaOrder);
+        if (isResult(order))
+            return order;
+        const mocks = await store.listMocks(from);
+        if (mocks.length === 0)
+            return fail(404, `no project "${from}" with mocks`);
+        if (to !== undefined) {
+            if (!(await store.renameProject(from, to))) {
+                return fail(409, `${to} already has mocks; pick another name`);
+            }
+            clearRenderCache();
+        }
+        const project = to ?? from;
+        if (order !== undefined) {
+            await store.setSetting(`${AREA_ORDER_SETTING}:${project}`, JSON.stringify(order));
+        }
+        for (const m of mocks)
+            bus.broadcast({ type: "mock-updated", id: m.id, project });
+        const named = new Set(mocks.flatMap((m) => (m.area ? [m.area] : [])));
+        const unnamed = (order ?? []).filter((a) => !named.has(a));
+        return ok({
+            project,
+            ...(to === undefined ? {} : { renamed: { from, to } }),
+            ...(order === undefined ? {} : { areaOrder: order }),
+            mocks: mocks.length,
+            url: `${ctx.base}/project/${encodeURIComponent(project)}`,
+            ...(unnamed.length
+                ? {
+                    nudges: [
+                        `no mock in ${project} has area ${unnamed.map((a) => `"${a}"`).join(", ")} yet; Home lists it once one does`,
+                    ],
+                }
+                : {}),
+            feedback: await feedbackFor(body.session, ctx.base),
+        });
+    }
     // --- comments ---
     function numberInRange(value, min, max) {
         const n = Number(value);
@@ -2178,6 +3341,8 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
     // tells the agent something ("2 of 3 answered", or nobody is looking).
     const pendingOf = (mock, posts) => ({
         mock: mock.slug,
+        // Closed by the user: nothing there is waiting on them, or on you.
+        ...(mock.closedAt ? { closed: true } : {}),
         viewerOpen: viewing.has(mock.id),
         draft: mock.draft
             ? {
@@ -2336,7 +3501,7 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         maxSize: MAX_ASSET_BYTES,
         onError: (c) => c.json({ error: `asset exceeds ${MAX_ASSET_BYTES} bytes` }, 413),
     });
-    const withOrigin = (text, c) => text.replaceAll(LOCAL_ORIGIN, new URL(c.req.url).origin);
+    const withOrigin = (text, c) => text.replaceAll(LOCAL_ORIGIN, requestOrigin(c.req.raw));
     const injectHead = (text, head) => {
         const headClose = text.lastIndexOf("</head>");
         return headClose >= 0
@@ -2365,6 +3530,7 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
                 ? `window.__MOCKPIT_PUBLIC_READ__=${JSON.stringify(publicRead)};`
                 : "",
             screenshots ? "window.__MOCKPIT_SCREENSHOTS__=true;" : "",
+            renderRev ? `window.__MOCKPIT_RENDER_REV__=${JSON.stringify(renderRev)};` : "",
         ].join("");
         return injectHead(text, `<script>${config}</script>`);
     };
@@ -2388,7 +3554,7 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
     // with every pixel-affecting input pinned in the image URL so the Worker can
     // cache it at the edge.
     const mockPreviewHead = (mock, post, request, mode, rendererGeneration) => {
-        const origin = new URL(request.url).origin;
+        const origin = requestOrigin(request);
         const publicBasePath = requestBasePath(request);
         const canonical = `${origin}${publicBasePath}/project/${encodeURIComponent(mock.project)}/${encodeURIComponent(mock.slug)}`;
         const imageUrl = new URL(`${origin}${publicBasePath}/s/${post.id}.png`);
@@ -2423,7 +3589,7 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         // sandboxed surface documents at /s/:id are *meant* to be framed and carry
         // their own `sandbox` CSP header instead, so they never pass through here.
         c.header("Content-Security-Policy", "frame-ancestors 'self'");
-        const html = withAppHead(c.req.raw, await workspaceMode())(withDocumentTitle(withViewerConfig(withOrigin(viewerHtml, { req: { url: c.req.url } }), c.req.raw, !!publicRead && !isAuthenticated(c), opts.title), opts.title));
+        const html = withAppHead(c.req.raw, await workspaceMode())(withDocumentTitle(withViewerConfig(withOrigin(viewerHtml, c), c.req.raw, !!publicRead && !isAuthenticated(c), opts.title), opts.title));
         if (!opts.preview)
             return html;
         const { mock, post } = opts.preview;
@@ -2467,7 +3633,7 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         if (!mock)
             return c.html(await configuredViewerHtml(c, { title: c.req.param("name") }));
         const posts = await store.listPosts({ mockId: mock.id });
-        const post = posts.find((p) => p.status !== "archived") ?? posts[0];
+        const post = posts.find((p) => isLive(p.status)) ?? posts[0];
         return c.html(await configuredViewerHtml(c, {
             title: mock.title,
             ...(post ? { preview: { mock, post } } : {}),
@@ -2475,10 +3641,10 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
     });
     // --- REST plumbing for the shared flows ---
     const flowCtx = (c, strict = true) => ({
-        base: `${new URL(c.req.url).origin}${requestBasePath(c.req.raw)}`,
-        // The browser sets Fetch Metadata on same-origin requests; only the trusted
-        // viewer may act as the user (drafts, replies, user-authored comments).
-        viewer: c.req.header("sec-fetch-site") === "same-origin",
+        base: `${requestOrigin(c.req.raw)}${requestBasePath(c.req.raw)}`,
+        // Only the trusted viewer may act as the user (drafts, replies,
+        // user-authored comments); server/viewerRequest.ts says how it is known.
+        viewer: isViewerRequest(c.req.raw),
         strict,
         request: c.req.raw,
         signal: c.req.raw.signal,
@@ -2488,6 +3654,17 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
     const flag = (c, key) => c.req.query(key) === "1";
     // --- sessions ---
     app.get("/api/sessions", async (c) => {
+        // A watcher started with every conversation finds that conversation's
+        // session without creating one, and never mistakes a sibling's in the same
+        // repo for its own.
+        const key = c.req.query("key");
+        if (key !== undefined) {
+            const session = key ? await store.getSessionByKey(key) : null;
+            if (!session)
+                return c.json([]);
+            const posts = await store.listPosts({ sessionId: session.id });
+            return c.json([sessionRowView(session, posts.length)]);
+        }
         const [sessions, counts] = await Promise.all([
             store.listSessions(),
             store.countPostsBySession(),
@@ -2573,12 +3750,27 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
             variant: c.req.query("variant"),
         }, flowCtx(c)));
     });
+    app.patch("/api/mocks/:id", async (c) => {
+        const body = await jsonBody(c);
+        // A slug names its project in the body or, as on the reads, in the query.
+        const project = c.req.query("project");
+        const withProject = body && typeof body === "object" && body.project === undefined && project
+            ? { ...body, project }
+            : body;
+        return send(c, await editMockFlow(c.req.param("id"), withProject, flowCtx(c)));
+    });
     app.delete("/api/mocks/:id", async (c) => send(c, await removeMockFlow(c.req.param("id"), { project: c.req.query("project") })));
     app.post("/api/mocks/:id/asks", async (c) => send(c, await askFlow(c.req.param("id"), await jsonBody(c), flowCtx(c))));
     app.get("/api/mocks/:id/draft", async (c) => send(c, await getDraftFlow(c.req.param("id"), flowCtx(c))));
     app.put("/api/mocks/:id/draft", async (c) => send(c, await putDraftFlow(c.req.param("id"), await jsonBody(c), flowCtx(c))));
     app.delete("/api/mocks/:id/draft", async (c) => send(c, await deleteDraftFlow(c.req.param("id"), flowCtx(c))));
     app.post("/api/mocks/:id/reply", async (c) => send(c, await replyFlow(c.req.param("id"), await jsonBody(c), flowCtx(c))));
+    app.post("/api/mocks/:id/use", async (c) => send(c, await useFlow(c.req.param("id"), await jsonBody(c), flowCtx(c))));
+    app.post("/api/mocks/:id/hide", async (c) => send(c, await hideFlow(c.req.param("id"), await jsonBody(c), flowCtx(c))));
+    app.post("/api/mocks/:id/close", async (c) => send(c, await closeFlow(c.req.param("id"), flowCtx(c))));
+    app.post("/api/mocks/:id/reopen", async (c) => send(c, await reopenFlow(c.req.param("id"), flowCtx(c))));
+    app.post("/api/mocks/:id/star", async (c) => send(c, await starFlow(c.req.param("id"), await jsonBody(c), flowCtx(c))));
+    app.post("/api/mocks/:id/archive", async (c) => send(c, await archiveFlow(c.req.param("id"), await jsonBody(c), flowCtx(c))));
     app.post("/api/mocks/:id/restore", async (c) => send(c, await restoreFlow(c.req.param("id"), await jsonBody(c))));
     app.post("/api/mocks/:id/variants/:postId/restore", async (c) => send(c, await restoreVersionFlow(c.req.param("id"), c.req.param("postId"), await jsonBody(c), flowCtx(c))));
     app.post("/api/mocks/:id/say", async (c) => send(c, await sayFlow(c.req.param("id"), await jsonBody(c), flowCtx(c))));
@@ -2708,7 +3900,15 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
     });
     // The project's design system, imported by `mockpit init` and injected into
     // every html surface of the project (see renderHtmlPage).
+    app.get("/api/projects/:name/tree", async (c) => send(c, await treeFlow({ project: c.req.param("name") })));
+    app.patch("/api/projects/:name", async (c) => send(c, await editProjectFlow(c.req.param("name"), await jsonBody(c), flowCtx(c))));
     app.get("/api/projects/:name/design", async (c) => c.json(await designFor(c.req.param("name"))));
+    // A project's rules file (.mockpit/rules.md, sent by `mockpit rules` and
+    // `mockpit init`) and the user's own (`mockpit rules --mine`).
+    app.get("/api/projects/:name/rules", async (c) => c.json({ text: (await store.getSetting(`${RULES_SETTING}:${c.req.param("name")}`)) ?? "" }));
+    app.put("/api/projects/:name/rules", async (c) => send(c, await saveRules(`${RULES_SETTING}:${c.req.param("name")}`, await jsonBody(c))));
+    app.get("/api/rules", async (c) => c.json({ text: (await userRulesText()) ?? "" }));
+    app.put("/api/rules", async (c) => send(c, await saveRules(USER_RULES_SETTING, await jsonBody(c))));
     app.put("/api/projects/:name/design", async (c) => {
         const body = await c.req.json().catch(() => null);
         if (!body || typeof body !== "object")
@@ -2986,7 +4186,7 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
     // agent publishing over one origin must never be served to a viewer on another.
     // `knobs` is the canonical (validated, path-sorted) JSON of `?k=`, so two
     // spellings of the same values share an entry.
-    const renderKey = (o) => `${o.postId}:${o.idx}:${o.version}:${o.mode ?? "os"}:${o.origin}:${o.knobs ?? ""}`;
+    const renderKey = (o) => `${o.postId}:${o.idx}:${o.version}:${o.mode ?? "os"}:${o.origin}:${o.knobs ?? ""}:${o.embeds ?? ""}`;
     // The document itself. Shared by the GET below and the publish-time pre-warm,
     // so both produce byte-identical output for one key.
     async function buildSurfaceDoc(args) {
@@ -2994,12 +4194,10 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         const theme = themeById(DEFAULT_THEME_ID);
         const themeId = theme.id;
         if (surface.kind === "html") {
-            // A page mock composes published components by reference; the tags
-            // are expanded here, server-side, so the whole page is still ONE
-            // sandboxed document rather than nested frames.
-            const html = args.mock?.kind === "page"
-                ? await expandPageHtml(args.mock.project, args.post, surface.html)
-                : surface.html;
+            // Embedded components are expanded server-side (the caller passes the
+            // expansion), so the whole page is still ONE sandboxed document rather
+            // than nested frames.
+            const html = args.composed ?? surface.html;
             return renderHtmlPage({
                 title: args.title,
                 html,
@@ -3026,9 +4224,9 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         // The runtime's module cache makes every later call cheap, so there's no memo
         // here to keep in sync. On the Worker the module is already inside the
         // deployed bundle — the import defers evaluating it, not fetching it — so this
-        // needs no network at runtime. test/workerIntegration covers that on real
-        // workerd, because a dynamic import resolving differently there is exactly the
-        // way this optimization could break in production and nowhere else.
+        // needs no network at runtime. Check it on real workerd (`npm run dev:cloud`):
+        // a dynamic import resolving differently there is exactly the way this
+        // optimization could break in production and nowhere else.
         const { renderCode, renderDiff, renderMarkdown, renderTerminal } = await import("./richRender.js");
         const rendered = surface.kind === "markdown"
             ? await renderMarkdown(surface, { theme: themeId, mode })
@@ -3062,8 +4260,18 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
                 if (!isSandboxedSurfaceKind(surface.kind))
                     continue;
                 warmed++;
+                const composed = surface.kind === "html" && hasEmbedTags(surface.html)
+                    ? await composedHtml(mock.project, mock.slug, surface.html)
+                    : null;
                 for (const mode of ["light", "dark"]) {
-                    const key = renderKey({ postId: post.id, idx, version: post.version, mode, origin });
+                    const key = renderKey({
+                        postId: post.id,
+                        idx,
+                        version: post.version,
+                        mode,
+                        origin,
+                        embeds: composed ? embedsKey(composed) : undefined,
+                    });
                     if (renderCache.has(key))
                         continue;
                     await cachedRender(key, () => buildSurfaceDoc({
@@ -3075,6 +4283,7 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
                         mode,
                         origin,
                         design,
+                        composed: composed?.html,
                     }));
                 }
             }
@@ -3088,7 +4297,11 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         const modeParam = c.req.query("mode");
         const mode = modeParam === "light" || modeParam === "dark" ? modeParam : undefined;
         const kParam = c.req.query("k");
-        const origin = new URL(c.req.url).origin;
+        // `e`: the embeds key the caller saw (cache identity); `embed`: a peek at
+        // older component versions, JSON {slug: version}.
+        const eParam = c.req.query("e");
+        const embedParam = c.req.query("embed");
+        const origin = requestOrigin(c.req.raw);
         // Cache-first. A hit needs nothing from the post row, and the row is the
         // expensive part of this route (surfaces + every retained version). Only a
         // version-pinned request can take this path: without `ver` the current
@@ -3096,13 +4309,16 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         // request never does: its values are checked against the mock's knobs,
         // which can change under a pinned version.
         const pinned = Number(ver);
-        if (Number.isInteger(pinned) && pinned > 0 && kParam === undefined) {
+        // A document with embeds is stored only under the key its resolved embeds
+        // give, so a hit here was rendered with exactly the `e` this URL names.
+        if (Number.isInteger(pinned) && pinned > 0 && kParam === undefined && !embedParam) {
             const hit = renderCacheHit(renderKey({
                 postId: c.req.param("id"),
                 idx: Number(surfaceParam),
                 version: pinned,
                 mode,
                 origin,
+                embeds: eParam,
             }));
             if (hit !== undefined) {
                 surfaceDocHeaders(c, true);
@@ -3158,16 +4374,59 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
                 knobsKey = JSON.stringify(knobs);
             }
         }
+        let composed = null;
+        if (surface.kind === "html" && hasEmbedTags(surface.html) && mock) {
+            let overrides;
+            if (embedParam !== undefined) {
+                let raw;
+                try {
+                    raw = JSON.parse(embedParam);
+                }
+                catch {
+                    raw = null;
+                }
+                const ok = raw !== null &&
+                    typeof raw === "object" &&
+                    !Array.isArray(raw) &&
+                    Object.values(raw).every((v) => Number.isInteger(v) && v > 0);
+                if (!ok || embedParam.length > MAX_KNOB_QUERY) {
+                    surfaceDocHeaders(c, false);
+                    return c.text("embed must be URL-encoded JSON of {slug: version}", 400);
+                }
+                overrides = raw;
+            }
+            composed = await composedHtml(mock.project, mock.slug, surface.html, overrides);
+        }
+        const eKey = composed ? embedsKey(composed) : undefined;
         // Every input is in the URL (the palette is fixed, the mode is a query
-        // param), so a version-pinned document never changes.
-        surfaceDocHeaders(c, ver != null);
+        // param), so a version-pinned document never changes, unless it follows a
+        // component's latest version and the URL does not name that state (`e`).
+        surfaceDocHeaders(c, ver != null && (eKey === undefined || eKey === eParam));
         // Cache the finished document under the same key the pre-warm uses; the
-        // resolved `version` makes it immutable, so a hit is always correct.
-        // A page's slots are pinned at publish, so they are a function of
-        // (id, version) too and need no separate key component.
-        const cacheKey = renderKey({ postId: post.id, idx, version, mode, origin, knobs: knobsKey });
+        // resolved `version` and embeds key make it immutable, so a hit is always
+        // correct.
+        const cacheKey = renderKey({
+            postId: post.id,
+            idx,
+            version,
+            mode,
+            origin,
+            knobs: knobsKey,
+            embeds: eKey,
+        });
         const design = mock ? await designFor(mock.project) : null;
-        const doc = await cachedRender(cacheKey, async () => buildSurfaceDoc({ post, mock, surface, title, version, mode, origin, design, knobs }));
+        const doc = await cachedRender(cacheKey, async () => buildSurfaceDoc({
+            post,
+            mock,
+            surface,
+            title,
+            version,
+            mode,
+            origin,
+            design,
+            knobs,
+            composed: composed?.html,
+        }));
         return c.html(doc);
     };
     app.get("/s/:id", renderPostPage);
@@ -3228,7 +4487,7 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
         const result = await uploadAsset(body);
         if ("error" in result)
             return c.json({ error: result.error }, result.status);
-        const origin = new URL(c.req.url).origin;
+        const origin = requestOrigin(c.req.raw);
         const publicBasePath = requestBasePath(c.req.raw);
         const assetPath = encodeURIComponent(result.asset.id);
         return c.json({ ...result.asset, url: `${origin}${publicBasePath}/a/${assetPath}` }, 201);
@@ -3382,11 +4641,14 @@ export function createApp({ store, viewerHtml, setupText, topics = {}, authentic
     const mcpFlows = {
         publish: (body, ctx) => publishFlow(body, ctx),
         list: (query) => listMocksFlow(query),
+        tree: (query) => treeFlow(query),
         get: (ref, query) => getMockFlow(ref, query),
         ask: (ref, body, ctx) => askFlow(ref, body, ctx),
         exportMock: (ref, query, ctx) => exportFlow(ref, query, ctx),
         say: (ref, body, ctx) => sayFlow(ref, body, ctx),
         feedback: (query, ctx) => feedbackFlow(query, ctx),
+        edit: (ref, body, ctx) => editMockFlow(ref, body, ctx),
+        editProject: (name, body, ctx) => editProjectFlow(name, body, ctx),
     };
     const guide = (project, topic) => topic ? (topics[topic] ?? "") : briefFor(project);
     // --- run: an agent script over the same flows (server/run.ts) ---