mockpit 2.0.0 → 3.1.0

package/dist/server/embeds.js

@@ -1,5 +1,5 @@
 // Composition: `<mockpit-embed slug="…" variant="…" version="…">` tags in any
-// mock's html are expanded server-side by inlining the referenced variant
+// design's html are expanded server-side by inlining the referenced variant
 // version's first html surface body, recursively, so a component can be built
 // from components. A tag without `version` follows the version in use when the
 // variant it resolves to is accepted, else its latest; one without `variant`
@@ -47,7 +47,19 @@ export function parseEmbedTags(html) {
     return tags;
 }
 export const hasEmbedTags = (html) => /<mockpit-embed\b/i.test(html);
-// The html with every reference to mock `from` pointed at `to`: the slug of
+// Whether a post's first html surface embeds anything, cached per surfaces array
+// (a stored post never mutates it): a design's view asks on every read.
+const embedsBySurfaces = new WeakMap();
+export function firstHtmlEmbeds(surfaces) {
+    const hit = embedsBySurfaces.get(surfaces);
+    if (hit !== undefined)
+        return hit;
+    const html = surfaces.find((x) => x.kind === "html");
+    const found = !!html && html.kind === "html" && hasEmbedTags(html.html);
+    embedsBySurfaces.set(surfaces, found);
+    return found;
+}
+// The html with every reference to design `from` pointed at `to`: the slug of
 // each embed tag naming it, and each data-goto naming it ("from" or
 // "from:<state>"). What a slug rename writes into every stored version, so
 // each version still renders the same component it did.
@@ -64,12 +76,12 @@ export function renameSlugRefs(html, from, to) {
     })
         .replace(/(\sdata-goto\s*=\s*)(?:"([^"]*)"|'([^']*)')/gi, (m, key, dq, sq) => {
         const value = dq ?? sq ?? "";
-        // "next" and "prev" are directions, never a mock.
+        // "next" and "prev" are directions, never a design.
         if (value === "next" || value === "prev")
             return m;
         const colon = value.indexOf(":");
-        const mock = (colon < 0 ? value : value.slice(0, colon)).trim();
-        if (mock !== from)
+        const design = (colon < 0 ? value : value.slice(0, colon)).trim();
+        if (design !== from)
             return m;
         const q = dq === undefined ? "'" : '"';
         return `${key}${q}${to}${colon < 0 ? "" : value.slice(colon)}${q}`;
@@ -77,7 +89,7 @@ export function renameSlugRefs(html, from, to) {
 }
 const escapeAttr = (s) => s.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
 // Replace each tag with its resolved body, expanding that body's own tags in
-// turn. `stack` is the chain of slugs being expanded (the root mock's first),
+// turn. `stack` is the chain of slugs being expanded (the root design's first),
 // so a component that reaches back up renders a marked placeholder instead of
 // recursing. An unresolvable embed renders as an empty marked-up placeholder
 // rather than vanishing, so a broken reference is visible in review instead of
@@ -130,6 +142,19 @@ export async function expandHtml(html, resolve, stack) {
     const out = html.replace(EMBED_TAG, (raw) => bodies[i++] ?? raw);
     return { html: out, used, stamps, cycle };
 }
+const STYLE_BLOCK = /<style\b[^>]*>[\s\S]*?<\/style\s*>/gi;
+// Components built on one kit each carry its stylesheet. A repeat would re-declare
+// the kit's rules after what an earlier component set over them and undo it, so
+// only the first copy stays.
+export function dropRepeatedStyles(html) {
+    const seen = new Set();
+    return html.replace(STYLE_BLOCK, (block) => {
+        if (seen.has(block))
+            return "";
+        seen.add(block);
+        return block;
+    });
+}
 // A short, stable key for what a document's embeds resolved to: part of the
 // render cache key and of the frame URL, so a component's new version reloads
 // every page that shows it and a stale document is never served as current.

package/dist/server/eventLog.d.ts

@@ -7,7 +7,7 @@ export interface LogEntry {
     ms: number;
     session?: string;
     project?: string;
-    mock?: string;
+    design?: string;
     state?: string | null;
     variant?: string;
     version?: number;
@@ -21,7 +21,7 @@ export interface LogEntry {
 }
 export type LogSink = (entry: LogEntry) => void;
 export declare function clientOf(header: string | undefined, viewer: boolean, mcp: boolean): string;
-export declare function fromRequest(query: URLSearchParams, body: unknown, pathMock: string | undefined): Partial<LogEntry>;
+export declare function fromRequest(query: URLSearchParams, body: unknown, pathDesign: string | undefined): Partial<LogEntry>;
 export declare function fromResponse(body: unknown): Partial<LogEntry>;
 export declare function writeLog(sink: LogSink | undefined, entry: LogEntry): void;
 export declare function logMiddleware(sink: LogSink): MiddlewareHandler;

package/dist/server/eventLog.js

@@ -18,12 +18,12 @@ const isObj = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
 const text = (v) => typeof v === "string" && v ? v.slice(0, 200) : undefined;
 // What the request itself names, for calls whose response doesn't (errors,
 // feedback reads).
-export function fromRequest(query, body, pathMock) {
+export function fromRequest(query, body, pathDesign) {
     const b = isObj(body) ? body : {};
     return prune({
         session: text(query.get("session")) ?? text(b.session),
         project: text(query.get("project")) ?? text(b.project),
-        mock: pathMock ?? text(b.mock),
+        design: pathDesign ?? text(b.design),
         variant: text(b.variant),
         viewing: text(query.get("viewing")),
     });
@@ -32,7 +32,7 @@ export function fromRequest(query, body, pathMock) {
 export function fromResponse(body) {
     if (!isObj(body))
         return {};
-    const mock = isObj(body.mock) ? body.mock : undefined;
+    const design = isObj(body.design) ? body.design : undefined;
     const post = isObj(body.post) ? body.post : undefined;
     // POST /api/sessions answers with the bare session (201 new, 200 reclaimed by key).
     const session = typeof body.agentSeq === "number" ? body : undefined;
@@ -41,10 +41,10 @@ export function fromResponse(body) {
     return prune({
         session: text(body.sessionId) ?? text(post?.sessionId) ?? text(session?.id),
         key: text(session?.key),
-        project: text(mock?.project) ?? text(body.project) ?? text(session?.project),
-        mock: text(mock?.slug) ??
+        project: text(design?.project) ?? text(body.project) ?? text(session?.project),
+        design: text(design?.slug) ??
             text(body.slug) ??
-            (typeof body.mock === "string" ? text(body.mock) : undefined),
+            (typeof body.design === "string" ? text(body.design) : undefined),
         state: post ? (post.state ?? null) : undefined,
         variant: text(post?.variant),
         version: typeof post?.version === "number" ? post.version : undefined,
@@ -74,11 +74,11 @@ function deliveredSeqs(feedback) {
 function pendingLines(pending) {
     const rows = Array.isArray(pending) ? pending : isObj(pending) ? [pending] : [];
     return rows.flatMap((p) => {
-        if (!isObj(p) || typeof p.mock !== "string")
+        if (!isObj(p) || typeof p.design !== "string")
             return [];
         if (isObj(p.draft))
-            return [`${p.mock} ${p.draft.answered}/${p.draft.of} answered`];
-        return p.viewerOpen ? [`${p.mock} open`] : [];
+            return [`${p.design} ${p.draft.answered}/${p.draft.of} answered`];
+        return p.viewerOpen ? [`${p.design} open`] : [];
     });
 }
 function prune(entry) {
@@ -144,8 +144,8 @@ export function logMiddleware(sink) {
                 Object.assign(entry, fromMcpResult(resBody));
             }
             else {
-                const pathMock = /^\/api\/mocks\/([^/]+)/.exec(c.req.path)?.[1];
-                Object.assign(entry, fromRequest(url.searchParams, reqBody, pathMock));
+                const pathDesign = /^\/api\/designs\/([^/]+)/.exec(c.req.path)?.[1];
+                Object.assign(entry, fromRequest(url.searchParams, reqBody, pathDesign));
                 Object.assign(entry, fromResponse(resBody));
             }
             writeLog(sink, entry);

package/dist/server/events.d.ts

@@ -3,33 +3,33 @@ export type FeedEvent = {
     type: "session-created" | "session-updated" | "session-deleted";
     id: string;
 } | {
-    type: "mock-created" | "mock-updated";
+    type: "design-created" | "design-updated";
     id: string;
     project: string;
 } | {
-    type: "mock-deleted";
+    type: "design-deleted";
     id: string;
     project: string;
 } | {
     type: "draft-updated";
-    mockId: string;
+    designId: string;
 } | {
     type: "post-created" | "post-updated";
     id: string;
-    mockId: string;
+    designId: string;
     sessionId: string;
     version: number;
     by: "agent" | "user";
 } | {
     type: "post-deleted";
     id: string;
-    mockId: string;
+    designId: string;
     sessionId: string;
 } | {
     type: "comment-created";
     id: string;
     sessionId: string;
-    mockId: string | null;
+    designId: string | null;
     postId: string | null;
     seq: number;
 } | {
@@ -40,6 +40,15 @@ export type FeedEvent = {
     type: "comment-delivered";
     sessionId: string;
     seq: number;
+} | {
+    type: "agent-called";
+    sessionId: string;
+} | {
+    type: "system-changed";
+    project: string;
+    rev: number;
+    summary: string;
+    by: "user" | "agent";
 } | {
     type: "theme-changed";
     mode: Mode;

package/dist/server/feedbackBatch.d.ts

@@ -1,5 +1,6 @@
 import { type Decisions } from "./decisions.ts";
-import { type AskOption, type Comment, type CommentAnchor, type Mock, type MockEdit, OTHER_ID, type PartComment, type Post, type Reaction, type Reply, type Store } from "./types.ts";
+import { type StandingView } from "./standings.ts";
+import { type AskOption, type Comment, type CommentAnchor, type Design, type DesignEdit, OTHER_ID, type PartComment, type Post, type Reaction, type Reply, type Store } from "./types.ts";
 export interface VariantRef {
     state: string | null;
     variant: string;
@@ -27,14 +28,40 @@ export interface OtherChoice {
     other: true;
     images?: ImageRef[];
 }
-export interface AnsweredAsk {
+export interface AnsweredAsk extends StandingView {
     ask: string;
     text: string;
     chosen: (AskOption | OtherChoice)[];
+    comment?: string;
+    commentImages?: ImageRef[];
+}
+export interface MoreAnswers {
+    ask: string;
+    text: string;
+    existing: string[];
     note?: string;
-    noteImages?: ImageRef[];
+    like?: string;
+    kept?: string[];
+    hidden?: {
+        label: string;
+        why?: string;
+    }[];
+    answered: {
+        ask: string;
+        text: string;
+        chosen: string[];
+        comment?: string;
+    }[];
 }
-export interface FeedbackReply extends Omit<Reply, "others" | "notes" | "otherImages" | "noteImages"> {
+export interface UpdateRequest {
+    ask: string;
+    text: string;
+    kept: AskOption;
+    inUse: AskOption[];
+}
+export interface FeedbackReply extends Omit<Reply, "others" | "askComments" | "otherImages" | "askCommentImages" | "more" | "standings" | "update"> {
+    more?: MoreAnswers;
+    update?: UpdateRequest;
     seq: number;
     at: string;
     asks: AnsweredAsk[];
@@ -42,25 +69,24 @@ export interface FeedbackReply extends Omit<Reply, "others" | "notes" | "otherIm
     decisions?: Decisions;
 }
 export interface FeedbackBatch {
-    mockId: string | null;
+    designId: string | null;
     project: string | null;
-    mock: string | null;
+    design: string | null;
     title: string | null;
     reply: FeedbackReply | null;
     messages: FeedbackMessage[];
     inUse: InUseRef[];
     archived: VariantRef[];
     handoff?: string;
-    closed?: true;
-    dismissed?: {
-        ask: string;
-        text: string;
-    }[];
-    edited?: MockEdit;
+    edited?: DesignEdit;
+    system?: {
+        rev: number;
+        changes: string[];
+    };
 }
 export declare function reactionLine(c: PartComment & {
     reaction: Reaction;
 }): string;
-export declare function groupFeedback(comments: Comment[], mocks: Map<string, Mock>, posts: Map<string, Post[]>, base?: string): FeedbackBatch[];
+export declare function groupFeedback(comments: Comment[], designs: Map<string, Design>, posts: Map<string, Post[]>, base?: string): FeedbackBatch[];
 export declare function buildFeedbackBatches(store: Store, comments: Comment[], base: string): Promise<FeedbackBatch[]>;
 export declare function feedbackImages(batches: FeedbackBatch[]): ImageRef[];

package/dist/server/feedbackBatch.js

@@ -1,10 +1,60 @@
-// The agent-facing shape of feedback: one batch per mock, in delivery order.
+// The agent-facing shape of feedback: one batch per design, in delivery order.
 // The `feedback` verb, the watch long-poll and the write piggyback all return this,
-// so an agent reads one grouped object instead of re-deriving which mock a flat
+// so an agent reads one grouped object instead of re-deriving which design a flat
 // comment list belongs to. Runtime-agnostic (no node imports).
 import { decisionsFor } from "./decisions.js";
+import { ROUTED_NOTE } from "./handoff.js";
+import { standingOf, standingView } from "./standings.js";
 import { builtinAsk, inUseVersion, DEFAULT_VARIANT, OTHER_ID, } from "./types.js";
 const ref = (p) => ({ state: p.state, variant: p.variant });
+function moreAnswers(design, more, sent) {
+    const ask = design.asks.find((a) => a.id === more.ask);
+    if (!ask)
+        return undefined;
+    const st = sent ?? standingOf(design, ask.id);
+    const view = standingView(ask, st);
+    const like = more.like ? ask.options.find((o) => o.id === more.like)?.label : undefined;
+    const labels = (a) => {
+        const ids = a.answer === undefined ? [] : Array.isArray(a.answer) ? a.answer : [a.answer];
+        return [
+            ...ids.map((id) => a.options.find((o) => o.id === id)?.label ?? id),
+            ...(a.other === undefined ? [] : [a.other]),
+        ];
+    };
+    return {
+        ask: ask.id,
+        text: ask.text,
+        // Hidden ones are out: asked again, they'd only fold away.
+        existing: ask.options.filter((o) => !st.hidden.some((h) => h.id === o.id)).map((o) => o.label),
+        ...(more.note ? { note: more.note } : {}),
+        ...(like ? { like } : {}),
+        ...(view?.kept ? { kept: view.kept.map((k) => k.label) } : {}),
+        ...(view?.hidden
+            ? { hidden: view.hidden.map((h) => ({ label: h.label, ...(h.why ? { why: h.why } : {}) })) }
+            : {}),
+        answered: design.asks
+            .filter((a) => a.id !== ask.id && labels(a).length > 0)
+            .map((a) => ({
+            ask: a.id,
+            text: a.text,
+            chosen: labels(a),
+            ...(a.comment ? { comment: a.comment } : {}),
+        })),
+    };
+}
+function updateRequest(design, wanted) {
+    const ask = design.asks.find((a) => a.id === wanted.ask);
+    const kept = ask?.options.find((o) => o.id === wanted.option);
+    if (!ask || !kept)
+        return undefined;
+    const ids = ask.answer === undefined ? [] : [ask.answer].flat();
+    return {
+        ask: ask.id,
+        text: ask.text,
+        kept,
+        inUse: ask.options.filter((o) => ids.includes(o.id)),
+    };
+}
 const REACTION_LEAD = {
     up: "👍",
     down: "👎",
@@ -12,7 +62,7 @@ const REACTION_LEAD = {
 };
 // `👍 part "hero" (variant B, state Mobile)`, `👎 variant B`, `more like this: the page`.
 export function reactionLine(c) {
-    // A mock published without variant names has only "default": naming it is noise.
+    // A design published without variant names has only "default": naming it is noise.
     const named = c.variant && c.variant !== DEFAULT_VARIANT ? c.variant : null;
     // A version is written as agents write it, dark@2.
     const at = c.version ? `@${c.version}` : "";
@@ -31,21 +81,32 @@ export function reactionLine(c) {
     return `${REACTION_LEAD[c.reaction]} ${target}${tail}${note}`;
 }
 const isReaction = (c) => !!c.reaction;
-function answered(reply, mock, posts, base) {
+function answered(reply, design, posts, base) {
     const others = reply.others ?? {};
-    const notes = reply.notes ?? {};
+    const comments = reply.askComments ?? {};
     const refs = (ids) => (ids ?? []).map((id) => ({ id, url: `${base}/a/${encodeURIComponent(id)}` }));
+    const standings = reply.standings ?? {};
     const askIds = new Set([
         ...Object.keys(reply.answers),
         ...Object.keys(others),
-        ...Object.keys(notes),
+        ...Object.keys(comments),
+        // A question whose answers the user only kept or hid is still news: more answers
+        // should follow the kept ones and avoid the hidden.
+        ...Object.keys(standings).filter((id) => id !== reply.more?.ask),
     ]);
     const out = [];
     for (const askId of askIds) {
-        const ask = mock?.asks.find((a) => a.id === askId) ?? (mock && builtinAsk(mock, posts, askId));
+        const ask = design?.asks.find((a) => a.id === askId) ?? (design && builtinAsk(design, posts, askId));
         const answer = reply.answers[askId];
         const ids = answer === undefined ? [] : Array.isArray(answer) ? answer : [answer];
-        const chosen = ids.map((id) => ask?.options.find((o) => o.id === id) ?? { id, label: id });
+        const chosen = ids.map((id) => {
+            const option = ask?.options.find((o) => o.id === id);
+            if (!option)
+                return { id, label: id };
+            // What it brought isn't in any version yet: an agent folding it in needs it here.
+            const brought = design?.answerAdditions.find((a) => Object.entries(option.set ?? {}).some(([k, v]) => a.knob === k && a.value === v));
+            return brought ? { ...option, brought } : option;
+        });
         const otherImages = refs(reply.otherImages?.[askId]);
         if (others[askId] !== undefined)
             chosen.push({
@@ -54,38 +115,60 @@ function answered(reply, mock, posts, base) {
                 other: true,
                 ...(otherImages.length ? { images: otherImages } : {}),
             });
-        const noteImages = refs(reply.noteImages?.[askId]);
+        const commentImages = refs(reply.askCommentImages?.[askId]);
+        const st = standings[askId];
         out.push({
             ask: askId,
             text: ask?.text ?? "",
             chosen,
-            ...(notes[askId] !== undefined ? { note: notes[askId] } : {}),
-            ...(noteImages.length ? { noteImages } : {}),
+            ...(ask && st ? standingView({ ...ask, answer }, st) : {}),
+            ...(comments[askId] !== undefined ? { comment: comments[askId] } : {}),
+            ...(commentImages.length ? { commentImages } : {}),
         });
     }
     return out;
 }
 // Comments arrive in seq order; keep that order both between batches and inside
-// one. A mock gets a fresh batch whenever a second reply arrives for it, so a
+// one. A design gets a fresh batch whenever a second reply arrives for it, so a
 // batch carries at most one reply and nothing is merged away. A comment whose
-// mock is unknown still gets a batch — feedback is never dropped for want of
+// design is unknown still gets a batch — feedback is never dropped for want of
 // context. `base` (origin + base path) makes image URLs absolute.
-export function groupFeedback(comments, mocks, posts, base = "") {
+export function groupFeedback(comments, designs, posts, base = "") {
     const batches = [];
     const open = new Map();
     for (const c of comments) {
-        const key = c.mockId ?? "";
-        const mock = c.mockId ? mocks.get(c.mockId) : undefined;
-        const mockPosts = (c.mockId && posts.get(c.mockId)) || [];
+        // Stored from when a close wrote to this stream. Ending something tells the agent
+        // nothing, so one still ahead of the cursor stays unsaid.
+        if (c.kind === "reply" && c.payload?.archived)
+            continue;
+        // The user's hand on the system page: one project batch each, never merged.
+        const decided = c.kind === "reply" && !c.designId ? c.payload?.system : undefined;
+        if (decided) {
+            batches.push({
+                designId: null,
+                project: decided.project,
+                design: null,
+                title: null,
+                reply: null,
+                messages: [],
+                inUse: [],
+                archived: [],
+                system: { rev: decided.rev, changes: decided.changes },
+            });
+            continue;
+        }
+        const key = c.designId ?? "";
+        const design = c.designId ? designs.get(c.designId) : undefined;
+        const designPosts = (c.designId && posts.get(c.designId)) || [];
         let batch = open.get(key);
-        // An edit says where the mock is now, so it joins whatever batch is open.
+        // An edit says where the design is now, so it joins whatever batch is open.
         const edit = c.kind === "reply" ? c.payload?.edited : undefined;
-        if (!batch || (c.kind === "reply" && !edit && (batch.reply || batch.closed))) {
+        if (!batch || (c.kind === "reply" && !edit && batch.reply)) {
             batch = {
-                mockId: c.mockId,
-                project: mock?.project ?? null,
-                mock: mock?.slug ?? null,
-                title: mock?.title ?? null,
+                designId: c.designId,
+                project: design?.project ?? null,
+                design: design?.slug ?? null,
+                title: design?.title ?? null,
                 reply: null,
                 messages: [],
                 inUse: [],
@@ -98,36 +181,35 @@ export function groupFeedback(comments, mocks, posts, base = "") {
             batch.edited = { ...batch.edited, ...edit };
             continue;
         }
-        if (c.kind === "reply" && c.payload?.closed) {
-            batch.closed = true;
-            batch.dismissed = c.payload.closed.dismissed.map((id) => ({
-                ask: id,
-                text: (mock?.asks.find((a) => a.id === id) ?? (mock && builtinAsk(mock, mockPosts, id)))
-                    ?.text ?? "",
-            }));
-            continue;
-        }
         if (c.kind === "reply" && c.payload) {
-            const { others: _others, notes: _notes, otherImages: _otherImages, noteImages: _noteImages, ...payload } = c.payload;
+            const { others: _others, askComments: _askComments, otherImages: _otherImages, askCommentImages: _askCommentImages, routed, more: asked, standings: _standings, update: wanted, system: decidedHere, ...payload } = c.payload;
+            if (decidedHere)
+                batch.system = { rev: decidedHere.rev, changes: decidedHere.changes };
+            const more = asked && design ? moreAnswers(design, asked, c.payload.standings?.[asked.ask]) : undefined;
+            const update = wanted && design ? updateRequest(design, wanted) : undefined;
+            if (routed)
+                batch.handoff = ROUTED_NOTE;
             const reactions = (payload.comments ?? []).filter(isReaction).map(reactionLine);
             batch.reply = {
                 ...payload,
                 comments: (payload.comments ?? []).filter((x) => !x.reaction),
                 seq: c.seq,
                 at: c.createdAt,
-                asks: answered(c.payload, mock, mockPosts, base),
+                asks: answered(c.payload, design, designPosts, base),
                 ...(reactions.length ? { reactions } : {}),
+                ...(more ? { more } : {}),
+                ...(update ? { update } : {}),
             };
-            const decisions = mock ? decisionsFor(mock, mockPosts, c.payload) : null;
+            const decisions = design ? decisionsFor(design, designPosts, c.payload) : null;
             if (decisions)
                 batch.reply.decisions = decisions;
-            batch.inUse = mockPosts
+            batch.inUse = designPosts
                 .filter((p) => p.status === "accepted")
                 .map((p) => ({ ...ref(p), version: inUseVersion(p) }));
-            batch.archived = mockPosts.filter((p) => p.status === "archived").map(ref);
+            batch.archived = designPosts.filter((p) => p.status === "archived").map(ref);
             continue;
         }
-        const post = c.postId ? mockPosts.find((p) => p.id === c.postId) : undefined;
+        const post = c.postId ? designPosts.find((p) => p.id === c.postId) : undefined;
         batch.messages.push({
             seq: c.seq,
             text: c.text,
@@ -142,18 +224,18 @@ export function groupFeedback(comments, mocks, posts, base = "") {
     return batches;
 }
 export async function buildFeedbackBatches(store, comments, base) {
-    const mocks = new Map();
+    const designs = new Map();
     const posts = new Map();
     for (const c of comments) {
-        if (!c.mockId || mocks.has(c.mockId))
+        if (!c.designId || designs.has(c.designId))
             continue;
-        const mock = await store.getMock(c.mockId);
-        if (!mock)
+        const design = await store.getDesign(c.designId);
+        if (!design)
             continue;
-        mocks.set(c.mockId, mock);
-        posts.set(c.mockId, await store.listPosts({ mockId: c.mockId }));
+        designs.set(c.designId, design);
+        posts.set(c.designId, await store.listPosts({ designId: c.designId }));
     }
-    return groupFeedback(comments, mocks, posts, base);
+    return groupFeedback(comments, designs, posts, base);
 }
 // Every image a list of batches carries, in order — what the MCP tiers attach
 // as image content so the model sees what the user attached.
@@ -164,8 +246,8 @@ export function feedbackImages(batches) {
             for (const c of a.chosen)
                 if ("other" in c && c.images)
                     out.push(...c.images);
-            if (a.noteImages)
-                out.push(...a.noteImages);
+            if (a.commentImages)
+                out.push(...a.commentImages);
         }
     }
     return out;

package/dist/server/fills.d.ts

@@ -26,9 +26,13 @@ export interface FillScan {
 }
 export declare function scanFills(html: string): FillScan;
 export declare function slotKnobs(slots: SlotInfo[]): Knobs;
+export declare const cssString: (s: string) => string;
 export declare function slotCss(slots: SlotInfo[]): string;
 export declare function composeFills(html: string, chosen: Record<string, string>): string;
 export declare function slotsInSurfaces(surfaces: Surface[]): SlotInfo[];
+export declare const AS_IS_FILL = "as-is";
+export declare function partOccurrences(html: string, part: string): number;
+export declare function addFill(html: string, part: string, fill: string, markup: string): string;
 export type FillSplice = {
     ok: true;
     surfaces: Surface[];

package/dist/server/fills.js

@@ -165,7 +165,7 @@ export function slotKnobs(slots) {
     }
     return out;
 }
-const cssString = (s) => `"${s.replace(/[\\"]/g, (c) => `\\${c}`).replace(/[\n\r<>]/g, (c) => `\\${c.charCodeAt(0).toString(16)} `)}"`;
+export const cssString = (s) => `"${s.replace(/[\\"]/g, (c) => `\\${c}`).replace(/[\n\r<>]/g, (c) => `\\${c.charCodeAt(0).toString(16)} `)}"`;
 // Shows only the chosen fill of each slot, keyed on the `data-k-<part>`
 // attribute the knob runtime keeps on <html>. The chosen fill is never styled:
 // only the others are hidden, so a fill keeps whatever display the agent gave it.
@@ -254,6 +254,60 @@ function markFill(html, part, fill) {
     const at = m.index + m[0].indexOf("<") + 1 + m[1].length;
     return html.slice(0, at) + add + html.slice(at);
 }
+// The name a plain part's own markup goes by once an answer adds a fill to it.
+export const AS_IS_FILL = "as-is";
+// How many elements declare this part, fills counted once each. A fill can only be
+// added to a part that is one thing or already has fills.
+export function partOccurrences(html, part) {
+    if (scanAll(html).ranges.some((r) => r.part === part))
+        return 1;
+    let n = 0;
+    walkOpenTags(html, (attrs) => {
+        if (attrs["data-part"] === part)
+            n++;
+    });
+    return n;
+}
+function walkOpenTags(html, visit) {
+    TOKEN.lastIndex = 0;
+    let m;
+    while ((m = TOKEN.exec(html))) {
+        if (m[0].startsWith("<!--") || m[1])
+            continue;
+        const tag = m[2].toLowerCase();
+        const end = TOKEN.lastIndex;
+        visit(attributes(m[3] ?? ""), m.index + 1 + m[2].length);
+        TOKEN.lastIndex = end;
+        if (RAW.has(tag)) {
+            const endTag = new RegExp(`</${tag}\\s*>`, "gi");
+            endTag.lastIndex = end;
+            const e = endTag.exec(html);
+            TOKEN.lastIndex = e ? endTag.lastIndex : html.length;
+        }
+    }
+}
+// Adds a fill at render time, leaving the html as it was when it can't: a version
+// without this part has nothing to fill, and one with its own fill of this name
+// already says what that value means.
+export function addFill(html, part, fill, markup) {
+    const ranges = scanAll(html).ranges.filter((r) => r.part === part);
+    if (ranges.some((r) => r.fill === fill))
+        return html;
+    let base = html;
+    if (ranges.length === 0) {
+        const at = [];
+        walkOpenTags(html, (attrs, tagNameEnd) => {
+            if (attrs["data-part"] === part)
+                at.push(tagNameEnd);
+        });
+        if (at.length !== 1)
+            return html;
+        base = `${html.slice(0, at[0])} data-fill="${AS_IS_FILL}" data-fill-default${html.slice(at[0])}`;
+    }
+    const spliced = spliceFills([{ kind: "html", html: base }], { [`${part}#${fill}`]: markup });
+    const surface = spliced.ok ? spliced.surfaces[0] : undefined;
+    return surface?.kind === "html" ? surface.html : html;
+}
 // Replace one fill of a slot, or add it after the slot's last fill, keyed
 // "part#fill". Like spliceParts, every target is located in the original
 // markup and overlapping edits are refused.

package/dist/server/guidance.d.ts

@@ -1,4 +1,4 @@
-export declare const GUIDE_PACKS: readonly ["design-craft"];
+export declare const GUIDE_PACKS: readonly ["design-craft", "foundations"];
 export type GuidePack = (typeof GUIDE_PACKS)[number];
 export declare const RULES_SETTING = "rules";
 export declare const USER_RULES_SETTING = "userRules";