@storyshelf/app 0.6.2 → 0.7.0

package/dist/pages/build-diff-actions.mjs

@@ -4,24 +4,51 @@ import.meta.url;
 import { Button } from "../ui/buttons.mjs";
 import { Badge, statusTone } from "../ui/feedback.mjs";
 import { Kbd } from "../ui/kbd.mjs";
+import { groupOf, neighbours, snapshotPageUrl } from "./build-diff-model.mjs";
 import { actionBar, actionGroup, actionHints, actionPosition } from "../ui/styles/review-layout.mjs";
-import { neighbours, snapshotPageUrl } from "./build-diff-model.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
 //#region src/pages/build-diff-actions.tsx
-function snapshotBase(project, build, snapshot) {
-	return `/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${snapshot.id}`;
+function apiBase(project, build) {
+	return `/api/v1/projects/${project.slug}/builds/${build.id}`;
 }
-/** Approve (or "Approve anyway" when the baseline moved) as its own form. */
+const isOpenStatus = (snap) => snap.status === "new" || snap.status === "changed";
+function sharedTarget(base, group, open, name) {
+	return {
+		base: `${base}/stories/${encodeURIComponent(group.storyId)}/modes/${encodeURIComponent(group.modeKey)}`,
+		shared: true,
+		label: `${name} (${open.length} browsers)`
+	};
+}
+function decisionTarget(props) {
+	const { project, build, snapshots, selected, drifted } = props;
+	const group = groupOf(snapshots, selected.id);
+	const open = (group?.members ?? [selected]).filter((snap) => isOpenStatus(snap));
+	const [first] = open;
+	if (!first) return null;
+	const base = apiBase(project, build);
+	const drift = { drifted: open.some((snap) => drifted[snap.id] !== void 0) };
+	if (open.length > 1 && group) return {
+		...sharedTarget(base, group, open, selected.storyName),
+		...drift
+	};
+	return {
+		base: `${base}/snapshots/${first.id}`,
+		shared: false,
+		label: first.storyName,
+		...drift
+	};
+}
+/** Approve (or "Approve anyway" when a baseline moved) as its own form. */
 function ApproveForm(props) {
-	const { project, build, selected, drifted } = props;
-	const url = `${snapshotBase(project, build, selected)}/approve${drifted ? "?force=true" : ""}`;
+	const { target } = props;
+	const url = `${target.base}/approve${target.drifted ? "?force=true" : ""}`;
 	return /* @__PURE__ */ jsx("form", {
 		method: "post",
 		action: url,
 		"hx-post": url,
 		"hx-target": "body",
-		"data-toast": `Approved ${selected.storyName}`,
-		children: drifted ? /* @__PURE__ */ jsx(Button, {
+		"data-toast": `Approved ${target.label}`,
+		children: target.drifted ? /* @__PURE__ */ jsx(Button, {
 			variant: "secondary",
 			size: "sm",
 			type: "submit",
@@ -34,34 +61,61 @@ function ApproveForm(props) {
 			type: "submit",
 			icon: "check",
 			"data-approve": true,
-			title: "Approve (a)",
-			children: "Approve"
+			title: target.shared ? "Approve every browser (a)" : "Approve (a)",
+			children: target.shared ? "Approve all browsers" : "Approve"
 		})
 	});
 }
-/** Approve/reject for a reviewable snapshot; both advance to the next open one. */
-function DecisionButtons(props) {
+/** Per-snapshot escape hatch: approve only the browser being viewed. */
+function ApproveOnlyThisForm(props) {
 	const { project, build, selected } = props;
-	const base = snapshotBase(project, build, selected);
+	const url = `${apiBase(project, build)}/snapshots/${selected.id}/approve`;
+	return /* @__PURE__ */ jsx("form", {
+		method: "post",
+		action: url,
+		"hx-post": url,
+		"hx-target": "body",
+		"data-toast": `Approved ${selected.storyName} on ${selected.browser ?? "chromium"}`,
+		children: /* @__PURE__ */ jsxs(Button, {
+			variant: "ghost",
+			size: "sm",
+			type: "submit",
+			title: "Approve only this browser",
+			children: ["Only ", selected.browser ?? "chromium"]
+		})
+	});
+}
+/** Approve/reject for a reviewable story/mode; both advance to the next open one. */
+function DecisionButtons(props) {
+	const { project, build, selected, target } = props;
+	const selectedOpen = selected.status === "new" || selected.status === "changed";
 	return /* @__PURE__ */ jsxs("div", {
 		class: actionGroup,
-		children: [/* @__PURE__ */ jsx(ApproveForm, { ...props }), /* @__PURE__ */ jsx("form", {
-			method: "post",
-			action: `${base}/reject`,
-			"hx-post": `${base}/reject`,
-			"hx-target": "body",
-			"data-toast": `Rejected ${selected.storyName}`,
-			"data-toast-tone": "warning",
-			children: /* @__PURE__ */ jsx(Button, {
-				variant: "danger",
-				size: "sm",
-				type: "submit",
-				icon: "x",
-				"data-reject": true,
-				title: "Reject (r)",
-				children: "Reject"
+		children: [
+			/* @__PURE__ */ jsx(ApproveForm, { target }),
+			target.shared && selectedOpen ? /* @__PURE__ */ jsx(ApproveOnlyThisForm, {
+				project,
+				build,
+				selected
+			}) : null,
+			/* @__PURE__ */ jsx("form", {
+				method: "post",
+				action: `${target.base}/reject`,
+				"hx-post": `${target.base}/reject`,
+				"hx-target": "body",
+				"data-toast": `Rejected ${target.label}`,
+				"data-toast-tone": "warning",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "danger",
+					size: "sm",
+					type: "submit",
+					icon: "x",
+					"data-reject": true,
+					title: "Reject (r)",
+					children: "Reject"
+				})
 			})
-		})]
+		]
 	});
 }
 function StepButton(props) {
@@ -91,9 +145,9 @@ function StepButton(props) {
 }
 /** Previous/next stepping, position, shortcut hints, and the review decision. */
 function DiffActionBar(props) {
-	const { project, build, snapshots, selected, canReview, drifted } = props;
+	const { project, build, snapshots, selected, canReview } = props;
 	const around = neighbours(snapshots, selected.id);
-	const reviewable = selected.status === "new" || selected.status === "changed";
+	const target = decisionTarget(props);
 	return /* @__PURE__ */ jsxs("div", {
 		class: actionBar,
 		role: "toolbar",
@@ -143,11 +197,11 @@ function DiffActionBar(props) {
 					})
 				]
 			}),
-			canReview && reviewable ? /* @__PURE__ */ jsx(DecisionButtons, {
+			canReview && target ? /* @__PURE__ */ jsx(DecisionButtons, {
 				project,
 				build,
 				selected,
-				drifted
+				target
 			}) : /* @__PURE__ */ jsx(Badge, {
 				tone: statusTone(selected.status),
 				icon: true,

package/dist/pages/build-diff-actions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"build-diff-actions.mjs","names":[],"sources":["../../src/pages/build-diff-actions.tsx"],"sourcesContent":["import type { Build, Project, Snapshot } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Badge, Button, Kbd, statusTone } from \"../ui/components.tsx\";\nimport { actionBar, actionGroup, actionHints, actionPosition } from \"../ui/styles/review-layout.ts\";\nimport { neighbours, snapshotPageUrl } from \"./build-diff-model.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Sticky bottom bar props. */\nexport interface DiffActionBarProps {\n  project: Project;\n  build: Build;\n  snapshots: Snapshot[];\n  selected: Snapshot;\n  canReview: boolean;\n  drifted: boolean;\n}\n\nfunction snapshotBase(project: Project, build: Build, snapshot: Snapshot): string {\n  return `/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${snapshot.id}`;\n}\n\ntype DecisionProps = { project: Project; build: Build; selected: Snapshot; drifted: boolean };\n\n/** Approve (or \"Approve anyway\" when the baseline moved) as its own form. */\nfunction ApproveForm(props: DecisionProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selected, drifted } = props;\n  const url = `${snapshotBase(project, build, selected)}/approve${drifted ? \"?force=true\" : \"\"}`;\n  return (\n    <form\n      method=\"post\"\n      action={url}\n      hx-post={url}\n      hx-target=\"body\"\n      data-toast={`Approved ${selected.storyName}`}\n    >\n      {drifted ? (\n        <Button\n          variant=\"secondary\"\n          size=\"sm\"\n          type=\"submit\"\n          icon=\"check\"\n          title=\"The baseline changed after this diff; replace it with this screenshot\"\n        >\n          Approve anyway\n        </Button>\n      ) : (\n        <Button\n          variant=\"primary\"\n          size=\"sm\"\n          type=\"submit\"\n          icon=\"check\"\n          data-approve\n          title=\"Approve (a)\"\n        >\n          Approve\n        </Button>\n      )}\n    </form>\n  );\n}\n\n/** Approve/reject for a reviewable snapshot; both advance to the next open one. */\nfunction DecisionButtons(props: DecisionProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selected } = props;\n  const base = snapshotBase(project, build, selected);\n  return (\n    <div class={actionGroup}>\n      <ApproveForm {...props} />\n      <form\n        method=\"post\"\n        action={`${base}/reject`}\n        hx-post={`${base}/reject`}\n        hx-target=\"body\"\n        data-toast={`Rejected ${selected.storyName}`}\n        data-toast-tone=\"warning\"\n      >\n        <Button variant=\"danger\" size=\"sm\" type=\"submit\" icon=\"x\" data-reject title=\"Reject (r)\">\n          Reject\n        </Button>\n      </form>\n    </div>\n  );\n}\n\nfunction StepButton(props: {\n  target: Snapshot | null;\n  project: Project;\n  build: Build;\n  direction: \"prev\" | \"next\";\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { target, project, build, direction } = props;\n  const label = direction === \"prev\" ? \"Previous snapshot (k)\" : \"Next snapshot (j)\";\n  const icon = direction === \"prev\" ? \"chevron-left\" : \"chevron-right\";\n  if (!target) {\n    return <Button variant=\"ghost\" size=\"sm\" icon={icon} disabled aria-label={label} />;\n  }\n  const url = snapshotPageUrl(project, build, target.id);\n  const hook = direction === \"prev\" ? { \"data-snap-prev\": true } : { \"data-snap-next\": true };\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"sm\"\n      icon={icon}\n      href={url}\n      aria-label={label}\n      title={label}\n      hx-get={url}\n      hx-target=\"body\"\n      hx-push-url=\"true\"\n      {...hook}\n    />\n  );\n}\n\n/** Previous/next stepping, position, shortcut hints, and the review decision. */\nexport function DiffActionBar(\n  props: DiffActionBarProps,\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, snapshots, selected, canReview, drifted } = props;\n  const around = neighbours(snapshots, selected.id);\n  const reviewable = selected.status === \"new\" || selected.status === \"changed\";\n  return (\n    <div class={actionBar} role=\"toolbar\" aria-label=\"Review actions\">\n      <div class={actionGroup}>\n        <StepButton target={around.prev} project={project} build={build} direction=\"prev\" />\n        <span class={actionPosition} aria-live=\"polite\">\n          {around.position} / {around.total}\n        </span>\n        <StepButton target={around.next} project={project} build={build} direction=\"next\" />\n      </div>\n      <div class={actionHints}>\n        <Kbd keys={[\"j\", \"k\"]} /> navigate <Kbd keys=\"a\" /> approve <Kbd keys=\"r\" /> reject\n        <Button variant=\"ghost\" size=\"sm\" data-shortcuts-open aria-label=\"Keyboard shortcuts (?)\">\n          <Kbd keys=\"?\" />\n        </Button>\n      </div>\n      {canReview && reviewable ? (\n        <DecisionButtons project={project} build={build} selected={selected} drifted={drifted} />\n      ) : (\n        <Badge tone={statusTone(selected.status)} icon>\n          {selected.status}\n        </Badge>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"build-diff-actions.mjs","names":[],"sources":["../../src/pages/build-diff-actions.tsx"],"sourcesContent":["import type { Build, Project, Snapshot } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Badge, Button, Kbd, statusTone } from \"../ui/components.tsx\";\nimport { actionBar, actionGroup, actionHints, actionPosition } from \"../ui/styles/review-layout.ts\";\nimport { groupOf, neighbours, snapshotPageUrl, type SnapshotGroup } from \"./build-diff-model.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Sticky bottom bar props. */\nexport interface DiffActionBarProps {\n  project: Project;\n  build: Build;\n  snapshots: Snapshot[];\n  selected: Snapshot;\n  canReview: boolean;\n  /** Open snapshots whose baseline changed after their diff was computed. */\n  drifted: Record<string, \"stale\" | \"removed\">;\n}\n\n/** What one decision covers: a whole story/mode across browsers, or a single snapshot. */\ninterface DecisionTarget {\n  /** Endpoint prefix; `/approve` and `/reject` are appended. */\n  base: string;\n  /** True when the decision applies to every open browser of the story/mode. */\n  shared: boolean;\n  drifted: boolean;\n  label: string;\n}\n\nfunction apiBase(project: Project, build: Build): string {\n  return `/api/v1/projects/${project.slug}/builds/${build.id}`;\n}\n\nconst isOpenStatus = (snap: Snapshot): boolean =>\n  snap.status === \"new\" || snap.status === \"changed\";\n\nfunction sharedTarget(\n  base: string,\n  group: SnapshotGroup,\n  open: Snapshot[],\n  name: string,\n): Pick<DecisionTarget, \"base\" | \"shared\" | \"label\"> {\n  const story = encodeURIComponent(group.storyId);\n  const mode = encodeURIComponent(group.modeKey);\n  return {\n    base: `${base}/stories/${story}/modes/${mode}`,\n    shared: true,\n    label: `${name} (${open.length} browsers)`,\n  };\n}\n\nfunction decisionTarget(props: DiffActionBarProps): DecisionTarget | null {\n  const { project, build, snapshots, selected, drifted } = props;\n  const group = groupOf(snapshots, selected.id);\n  const open = (group?.members ?? [selected]).filter((snap) => isOpenStatus(snap));\n  const [first] = open;\n  if (!first) return null;\n  const base = apiBase(project, build);\n  const drift = { drifted: open.some((snap) => drifted[snap.id] !== undefined) };\n  if (open.length > 1 && group) {\n    return { ...sharedTarget(base, group, open, selected.storyName), ...drift };\n  }\n  return { base: `${base}/snapshots/${first.id}`, shared: false, label: first.storyName, ...drift };\n}\n\n/** Approve (or \"Approve anyway\" when a baseline moved) as its own form. */\nfunction ApproveForm(props: {\n  target: DecisionTarget;\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { target } = props;\n  const url = `${target.base}/approve${target.drifted ? \"?force=true\" : \"\"}`;\n  return (\n    <form\n      method=\"post\"\n      action={url}\n      hx-post={url}\n      hx-target=\"body\"\n      data-toast={`Approved ${target.label}`}\n    >\n      {target.drifted ? (\n        <Button\n          variant=\"secondary\"\n          size=\"sm\"\n          type=\"submit\"\n          icon=\"check\"\n          title=\"The baseline changed after this diff; replace it with this screenshot\"\n        >\n          Approve anyway\n        </Button>\n      ) : (\n        <Button\n          variant=\"primary\"\n          size=\"sm\"\n          type=\"submit\"\n          icon=\"check\"\n          data-approve\n          title={target.shared ? \"Approve every browser (a)\" : \"Approve (a)\"}\n        >\n          {target.shared ? \"Approve all browsers\" : \"Approve\"}\n        </Button>\n      )}\n    </form>\n  );\n}\n\n/** Per-snapshot escape hatch: approve only the browser being viewed. */\nfunction ApproveOnlyThisForm(props: {\n  project: Project;\n  build: Build;\n  selected: Snapshot;\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selected } = props;\n  const url = `${apiBase(project, build)}/snapshots/${selected.id}/approve`;\n  return (\n    <form\n      method=\"post\"\n      action={url}\n      hx-post={url}\n      hx-target=\"body\"\n      data-toast={`Approved ${selected.storyName} on ${selected.browser ?? \"chromium\"}`}\n    >\n      <Button variant=\"ghost\" size=\"sm\" type=\"submit\" title=\"Approve only this browser\">\n        Only {selected.browser ?? \"chromium\"}\n      </Button>\n    </form>\n  );\n}\n\n/** Approve/reject for a reviewable story/mode; both advance to the next open one. */\nfunction DecisionButtons(props: {\n  project: Project;\n  build: Build;\n  selected: Snapshot;\n  target: DecisionTarget;\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selected, target } = props;\n  const selectedOpen = selected.status === \"new\" || selected.status === \"changed\";\n  return (\n    <div class={actionGroup}>\n      <ApproveForm target={target} />\n      {target.shared && selectedOpen ? (\n        <ApproveOnlyThisForm project={project} build={build} selected={selected} />\n      ) : null}\n      <form\n        method=\"post\"\n        action={`${target.base}/reject`}\n        hx-post={`${target.base}/reject`}\n        hx-target=\"body\"\n        data-toast={`Rejected ${target.label}`}\n        data-toast-tone=\"warning\"\n      >\n        <Button variant=\"danger\" size=\"sm\" type=\"submit\" icon=\"x\" data-reject title=\"Reject (r)\">\n          Reject\n        </Button>\n      </form>\n    </div>\n  );\n}\n\nfunction StepButton(props: {\n  target: Snapshot | null;\n  project: Project;\n  build: Build;\n  direction: \"prev\" | \"next\";\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { target, project, build, direction } = props;\n  const label = direction === \"prev\" ? \"Previous snapshot (k)\" : \"Next snapshot (j)\";\n  const icon = direction === \"prev\" ? \"chevron-left\" : \"chevron-right\";\n  if (!target) {\n    return <Button variant=\"ghost\" size=\"sm\" icon={icon} disabled aria-label={label} />;\n  }\n  const url = snapshotPageUrl(project, build, target.id);\n  const hook = direction === \"prev\" ? { \"data-snap-prev\": true } : { \"data-snap-next\": true };\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"sm\"\n      icon={icon}\n      href={url}\n      aria-label={label}\n      title={label}\n      hx-get={url}\n      hx-target=\"body\"\n      hx-push-url=\"true\"\n      {...hook}\n    />\n  );\n}\n\n/** Previous/next stepping, position, shortcut hints, and the review decision. */\nexport function DiffActionBar(\n  props: DiffActionBarProps,\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, snapshots, selected, canReview } = props;\n  const around = neighbours(snapshots, selected.id);\n  const target = decisionTarget(props);\n  return (\n    <div class={actionBar} role=\"toolbar\" aria-label=\"Review actions\">\n      <div class={actionGroup}>\n        <StepButton target={around.prev} project={project} build={build} direction=\"prev\" />\n        <span class={actionPosition} aria-live=\"polite\">\n          {around.position} / {around.total}\n        </span>\n        <StepButton target={around.next} project={project} build={build} direction=\"next\" />\n      </div>\n      <div class={actionHints}>\n        <Kbd keys={[\"j\", \"k\"]} /> navigate <Kbd keys=\"a\" /> approve <Kbd keys=\"r\" /> reject\n        <Button variant=\"ghost\" size=\"sm\" data-shortcuts-open aria-label=\"Keyboard shortcuts (?)\">\n          <Kbd keys=\"?\" />\n        </Button>\n      </div>\n      {canReview && target ? (\n        <DecisionButtons project={project} build={build} selected={selected} target={target} />\n      ) : (\n        <Badge tone={statusTone(selected.status)} icon>\n          {selected.status}\n        </Badge>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/pages/build-diff-comments.mjs

@@ -6,12 +6,13 @@ import { Badge, Meta } from "../ui/feedback.mjs";
 import { TextareaField } from "../ui/forms.mjs";
 import { Card, SectionTitle } from "../ui/layout.mjs";
 import { VStack } from "../ui/stacks.mjs";
+import { csrfField } from "../ui/csrf-field.mjs";
 import { reviewComment, reviewCommentActions, reviewCommentBody, reviewCommentHead } from "../ui/styles/review.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
 //#region src/pages/build-diff-comments.tsx
 /** One comment with an optional resolve action. */
 function CommentCard(props) {
-	const { project, build, comment, canReview } = props;
+	const { project, build, comment, canReview, anchor } = props;
 	return /* @__PURE__ */ jsxs("div", {
 		class: reviewComment,
 		children: [
@@ -20,6 +21,7 @@ function CommentCard(props) {
 				children: [
 					/* @__PURE__ */ jsx("strong", { children: comment.userId ?? "anonymous" }),
 					/* @__PURE__ */ jsxs("span", { children: ["· ", new Date(comment.createdAt).toLocaleString()] }),
+					anchor ?? null,
 					comment.resolved ? /* @__PURE__ */ jsx(Badge, {
 						tone: "success",
 						children: "resolved"
@@ -30,18 +32,18 @@ function CommentCard(props) {
 				class: reviewCommentBody,
 				children: comment.body
 			}),
-			!comment.resolved && canReview ? /* @__PURE__ */ jsx("form", {
+			!comment.resolved && canReview ? /* @__PURE__ */ jsxs("form", {
 				method: "post",
-				action: `/api/v1/projects/${project.slug}/builds/${build.id}/comments/${comment.id}/resolve`,
-				"hx-post": `/api/v1/projects/${project.slug}/builds/${build.id}/comments/${comment.id}/resolve`,
+				action: `/projects/${project.slug}/builds/${build.id}/comments/${comment.id}/resolve`,
+				"hx-post": `/projects/${project.slug}/builds/${build.id}/comments/${comment.id}/resolve`,
 				"hx-target": "body",
 				class: reviewCommentActions,
-				children: /* @__PURE__ */ jsx(Button, {
+				children: [csrfField(), /* @__PURE__ */ jsx(Button, {
 					variant: "ghost",
 					size: "sm",
 					type: "submit",
 					children: "Mark resolved"
-				})
+				})]
 			}) : null
 		]
 	}, comment.id);
@@ -49,13 +51,13 @@ function CommentCard(props) {
 /** Reply form scoped to the selected snapshot. */
 function CommentForm(props) {
 	const { project, build, selectedId } = props;
-	return /* @__PURE__ */ jsx("form", {
+	return /* @__PURE__ */ jsxs("form", {
 		method: "post",
-		action: `/api/v1/projects/${project.slug}/builds/${build.id}/comments`,
-		"hx-post": `/api/v1/projects/${project.slug}/builds/${build.id}/comments`,
+		action: `/projects/${project.slug}/builds/${build.id}/comments`,
+		"hx-post": `/projects/${project.slug}/builds/${build.id}/comments`,
 		"hx-target": "body",
 		class: "mt-1",
-		children: /* @__PURE__ */ jsxs(VStack, { children: [
+		children: [csrfField(), /* @__PURE__ */ jsxs(VStack, { children: [
 			/* @__PURE__ */ jsx("input", {
 				type: "hidden",
 				name: "snapshotId",
@@ -73,13 +75,13 @@ function CommentForm(props) {
 				type: "submit",
 				children: "Comment"
 			}) })
-		] })
+		] })]
 	});
 }
 /** Threaded comments for the selected snapshot plus the reply form. */
 function DiffComments(props) {
-	const { project, build, selectedId, comments, canReview } = props;
-	const visible = comments.filter((c) => !c.snapshotId || c.snapshotId === selectedId);
+	const { project, build, selectedId, selectedStoryId, comments, canReview } = props;
+	const visible = comments.filter((c) => c.snapshotId ? c.snapshotId === selectedId : !c.storyId || c.storyId === selectedStoryId);
 	return /* @__PURE__ */ jsxs(Card, { children: [
 		/* @__PURE__ */ jsx(SectionTitle, {
 			level: 3,
@@ -99,6 +101,6 @@ function DiffComments(props) {
 	] });
 }
 //#endregion
-export { DiffComments };
+export { CommentCard, DiffComments };
 
 //# sourceMappingURL=build-diff-comments.mjs.map

package/dist/pages/build-diff-comments.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"build-diff-comments.mjs","names":[],"sources":["../../src/pages/build-diff-comments.tsx"],"sourcesContent":["import type { Build } from \"@storyshelf/core/schema\";\nimport type { Comment } from \"@storyshelf/core/schema\";\nimport type { Project } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport {\n  Badge,\n  Button,\n  Card,\n  Meta,\n  SectionTitle,\n  TextareaField,\n  VStack,\n} from \"../ui/components.tsx\";\nimport {\n  reviewComment,\n  reviewCommentActions,\n  reviewCommentBody,\n  reviewCommentHead,\n} from \"../ui/styles/review.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Snapshot comment thread props. */\nexport interface DiffCommentsProps {\n  project: Project;\n  build: Build;\n  selectedId: string;\n  comments: Comment[];\n  canReview: boolean;\n}\n\ninterface CommentCardProps {\n  project: Project;\n  build: Build;\n  comment: Comment;\n  canReview: boolean;\n}\n\n/** One comment with an optional resolve action. */\nfunction CommentCard(props: CommentCardProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, comment, canReview } = props;\n  return (\n    <div key={comment.id} class={reviewComment}>\n      <div class={reviewCommentHead}>\n        <strong>{comment.userId ?? \"anonymous\"}</strong>\n        <span>· {new Date(comment.createdAt).toLocaleString()}</span>\n        {comment.resolved ? <Badge tone=\"success\">resolved</Badge> : null}\n      </div>\n      <p class={reviewCommentBody}>{comment.body}</p>\n      {!comment.resolved && canReview ? (\n        <form\n          method=\"post\"\n          action={`/api/v1/projects/${project.slug}/builds/${build.id}/comments/${comment.id}/resolve`}\n          hx-post={`/api/v1/projects/${project.slug}/builds/${build.id}/comments/${comment.id}/resolve`}\n          hx-target=\"body\"\n          class={reviewCommentActions}\n        >\n          <Button variant=\"ghost\" size=\"sm\" type=\"submit\">\n            Mark resolved\n          </Button>\n        </form>\n      ) : null}\n    </div>\n  );\n}\n\ninterface CommentFormProps {\n  project: Project;\n  build: Build;\n  selectedId: string;\n}\n\n/** Reply form scoped to the selected snapshot. */\nfunction CommentForm(props: CommentFormProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selectedId } = props;\n  return (\n    <form\n      method=\"post\"\n      action={`/api/v1/projects/${project.slug}/builds/${build.id}/comments`}\n      hx-post={`/api/v1/projects/${project.slug}/builds/${build.id}/comments`}\n      hx-target=\"body\"\n      class=\"mt-1\"\n    >\n      <VStack>\n        <input type=\"hidden\" name=\"snapshotId\" value={selectedId} />\n        <TextareaField\n          label=\"Add comment\"\n          name=\"body\"\n          rows={3}\n          required\n          placeholder=\"Leave feedback on this snapshot…\"\n        />\n        <div>\n          <Button variant=\"primary\" type=\"submit\">\n            Comment\n          </Button>\n        </div>\n      </VStack>\n    </form>\n  );\n}\n\n/** Threaded comments for the selected snapshot plus the reply form. */\nexport function DiffComments(\n  props: DiffCommentsProps,\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selectedId, comments, canReview } = props;\n  const visible = comments.filter((c) => !c.snapshotId || c.snapshotId === selectedId);\n  return (\n    <Card>\n      <SectionTitle level={3}>Comments</SectionTitle>\n      <VStack>\n        {visible.map((comment): HtmlEscapedString | Promise<HtmlEscapedString> => (\n          <CommentCard\n            key={comment.id}\n            project={project}\n            build={build}\n            comment={comment}\n            canReview={canReview}\n          />\n        ))}\n        {visible.length === 0 ? <Meta>No comments on this snapshot.</Meta> : null}\n      </VStack>\n\n      <CommentForm project={project} build={build} selectedId={selectedId} />\n    </Card>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAuCA,SAAS,YAAY,OAAyE;CAC5F,MAAM,EAAE,SAAS,OAAO,SAAS,cAAc;CAC/C,OACE,qBAAC,OAAD;EAAsB,OAAO;EAA7B,UAAA;GACE,qBAAC,OAAD;IAAK,OAAO;IAAZ,UAAA;KACE,oBAAC,UAAD,EAAA,UAAS,QAAQ,UAAU,YAAoB,CAAA;KAC/C,qBAAC,QAAD,EAAA,UAAA,CAAM,MAAG,IAAI,KAAK,QAAQ,SAAS,CAAC,CAAC,eAAe,CAAQ,EAAA,CAAA;KAC3D,QAAQ,WAAW,oBAAC,OAAD;MAAO,MAAK;MAAU,UAAA;KAAe,CAAA,IAAI;IAC1D;;GACL,oBAAC,KAAD;IAAG,OAAO;IAAoB,UAAA,QAAQ;GAAQ,CAAA;GAC7C,CAAC,QAAQ,YAAY,YACpB,oBAAC,QAAD;IACE,QAAO;IACP,QAAQ,oBAAoB,QAAQ,KAAK,UAAU,MAAM,GAAG,YAAY,QAAQ,GAAG;IACnF,WAAS,oBAAoB,QAAQ,KAAK,UAAU,MAAM,GAAG,YAAY,QAAQ,GAAG;IACpF,aAAU;IACV,OAAO;IAEP,UAAA,oBAAC,QAAD;KAAQ,SAAQ;KAAQ,MAAK;KAAK,MAAK;KAAS,UAAA;IAExC,CAAA;GACJ,CAAA,IACJ;EACD;CApBK,GAAA,QAAQ,EAoBb;AAET;;AASA,SAAS,YAAY,OAAyE;CAC5F,MAAM,EAAE,SAAS,OAAO,eAAe;CACvC,OACE,oBAAC,QAAD;EACE,QAAO;EACP,QAAQ,oBAAoB,QAAQ,KAAK,UAAU,MAAM,GAAG;EAC5D,WAAS,oBAAoB,QAAQ,KAAK,UAAU,MAAM,GAAG;EAC7D,aAAU;EACV,OAAM;EAEN,UAAA,qBAAC,QAAD,EAAA,UAAA;GACE,oBAAC,SAAD;IAAO,MAAK;IAAS,MAAK;IAAa,OAAO;GAAa,CAAA;GAC3D,oBAAC,eAAD;IACE,OAAM;IACN,MAAK;IACL,MAAM;IACN,UAAA;IACA,aAAY;GACb,CAAA;GACD,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD;IAAQ,SAAQ;IAAU,MAAK;IAAS,UAAA;GAEhC,CAAA,EACL,CAAA;EACC,EAAA,CAAA;CACJ,CAAA;AAEV;;AAGA,SAAgB,aACd,OACgD;CAChD,MAAM,EAAE,SAAS,OAAO,YAAY,UAAU,cAAc;CAC5D,MAAM,UAAU,SAAS,QAAQ,MAAM,CAAC,EAAE,cAAc,EAAE,eAAe,UAAU;CACnF,OACE,qBAAC,MAAD,EAAA,UAAA;EACE,oBAAC,cAAD;GAAc,OAAO;GAAG,UAAA;EAAsB,CAAA;EAC9C,qBAAC,QAAD,EAAA,UAAA,CACG,QAAQ,KAAK,YACZ,oBAAC,aAAD;GAEW;GACF;GACE;GACE;EACZ,GALM,QAAQ,EAKd,CACF,GACA,QAAQ,WAAW,IAAI,oBAAC,MAAD,EAAA,UAAM,gCAAmC,CAAA,IAAI,IAC/D,EAAA,CAAA;EAER,oBAAC,aAAD;GAAsB;GAAgB;GAAmB;EAAa,CAAA;CAClE,EAAA,CAAA;AAEV"}
+{"version":3,"file":"build-diff-comments.mjs","names":[],"sources":["../../src/pages/build-diff-comments.tsx"],"sourcesContent":["import type { Build } from \"@storyshelf/core/schema\";\nimport type { Comment } from \"@storyshelf/core/schema\";\nimport type { Project } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport {\n  Badge,\n  Button,\n  Card,\n  Meta,\n  SectionTitle,\n  TextareaField,\n  VStack,\n} from \"../ui/components.tsx\";\nimport { csrfField } from \"../ui/csrf-field.tsx\";\nimport {\n  reviewComment,\n  reviewCommentActions,\n  reviewCommentBody,\n  reviewCommentHead,\n} from \"../ui/styles/review.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Snapshot comment thread props. */\nexport interface DiffCommentsProps {\n  project: Project;\n  build: Build;\n  selectedId: string;\n  /** Story of the selected snapshot: its story comments show here too (ADR 0013, decision 2). */\n  selectedStoryId?: string;\n  comments: Comment[];\n  canReview: boolean;\n}\n\n/** One comment's props: where it sits, and what its head shows beside the author. */\nexport interface CommentCardProps {\n  project: Project;\n  build: Build;\n  comment: Comment;\n  canReview: boolean;\n  /** What the comment is anchored to (a story badge), shown in its head. */\n  anchor?: unknown;\n}\n\n/** One comment with an optional resolve action. */\nexport function CommentCard(\n  props: CommentCardProps,\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, comment, canReview, anchor } = props;\n  return (\n    <div key={comment.id} class={reviewComment}>\n      <div class={reviewCommentHead}>\n        <strong>{comment.userId ?? \"anonymous\"}</strong>\n        <span>· {new Date(comment.createdAt).toLocaleString()}</span>\n        {anchor ?? null}\n        {comment.resolved ? <Badge tone=\"success\">resolved</Badge> : null}\n      </div>\n      <p class={reviewCommentBody}>{comment.body}</p>\n      {!comment.resolved && canReview ? (\n        <form\n          method=\"post\"\n          action={`/projects/${project.slug}/builds/${build.id}/comments/${comment.id}/resolve`}\n          hx-post={`/projects/${project.slug}/builds/${build.id}/comments/${comment.id}/resolve`}\n          hx-target=\"body\"\n          class={reviewCommentActions}\n        >\n          {csrfField()}\n          <Button variant=\"ghost\" size=\"sm\" type=\"submit\">\n            Mark resolved\n          </Button>\n        </form>\n      ) : null}\n    </div>\n  );\n}\n\ninterface CommentFormProps {\n  project: Project;\n  build: Build;\n  selectedId: string;\n}\n\n/** Reply form scoped to the selected snapshot. */\nfunction CommentForm(props: CommentFormProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selectedId } = props;\n  return (\n    <form\n      method=\"post\"\n      action={`/projects/${project.slug}/builds/${build.id}/comments`}\n      hx-post={`/projects/${project.slug}/builds/${build.id}/comments`}\n      hx-target=\"body\"\n      class=\"mt-1\"\n    >\n      {csrfField()}\n      <VStack>\n        <input type=\"hidden\" name=\"snapshotId\" value={selectedId} />\n        <TextareaField\n          label=\"Add comment\"\n          name=\"body\"\n          rows={3}\n          required\n          placeholder=\"Leave feedback on this snapshot…\"\n        />\n        <div>\n          <Button variant=\"primary\" type=\"submit\">\n            Comment\n          </Button>\n        </div>\n      </VStack>\n    </form>\n  );\n}\n\n/** Threaded comments for the selected snapshot plus the reply form. */\nexport function DiffComments(\n  props: DiffCommentsProps,\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selectedId, selectedStoryId, comments, canReview } = props;\n  const visible = comments.filter((c) =>\n    c.snapshotId ? c.snapshotId === selectedId : !c.storyId || c.storyId === selectedStoryId,\n  );\n  return (\n    <Card>\n      <SectionTitle level={3}>Comments</SectionTitle>\n      <VStack>\n        {visible.map((comment): HtmlEscapedString | Promise<HtmlEscapedString> => (\n          <CommentCard\n            key={comment.id}\n            project={project}\n            build={build}\n            comment={comment}\n            canReview={canReview}\n          />\n        ))}\n        {visible.length === 0 ? <Meta>No comments on this snapshot.</Meta> : null}\n      </VStack>\n\n      <CommentForm project={project} build={build} selectedId={selectedId} />\n    </Card>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA6CA,SAAgB,YACd,OACgD;CAChD,MAAM,EAAE,SAAS,OAAO,SAAS,WAAW,WAAW;CACvD,OACE,qBAAC,OAAD;EAAsB,OAAO;EAA7B,UAAA;GACE,qBAAC,OAAD;IAAK,OAAO;IAAZ,UAAA;KACE,oBAAC,UAAD,EAAA,UAAS,QAAQ,UAAU,YAAoB,CAAA;KAC/C,qBAAC,QAAD,EAAA,UAAA,CAAM,MAAG,IAAI,KAAK,QAAQ,SAAS,CAAC,CAAC,eAAe,CAAQ,EAAA,CAAA;KAC3D,UAAU;KACV,QAAQ,WAAW,oBAAC,OAAD;MAAO,MAAK;MAAU,UAAA;KAAe,CAAA,IAAI;IAC1D;;GACL,oBAAC,KAAD;IAAG,OAAO;IAAoB,UAAA,QAAQ;GAAQ,CAAA;GAC7C,CAAC,QAAQ,YAAY,YACpB,qBAAC,QAAD;IACE,QAAO;IACP,QAAQ,aAAa,QAAQ,KAAK,UAAU,MAAM,GAAG,YAAY,QAAQ,GAAG;IAC5E,WAAS,aAAa,QAAQ,KAAK,UAAU,MAAM,GAAG,YAAY,QAAQ,GAAG;IAC7E,aAAU;IACV,OAAO;IALT,UAAA,CAOG,UAAU,GACX,oBAAC,QAAD;KAAQ,SAAQ;KAAQ,MAAK;KAAK,MAAK;KAAS,UAAA;IAExC,CAAA,CACJ;GACJ,CAAA,IAAA;EACD;CAtBK,GAAA,QAAQ,EAsBb;AAET;;AASA,SAAS,YAAY,OAAyE;CAC5F,MAAM,EAAE,SAAS,OAAO,eAAe;CACvC,OACE,qBAAC,QAAD;EACE,QAAO;EACP,QAAQ,aAAa,QAAQ,KAAK,UAAU,MAAM,GAAG;EACrD,WAAS,aAAa,QAAQ,KAAK,UAAU,MAAM,GAAG;EACtD,aAAU;EACV,OAAM;EALR,UAAA,CAOG,UAAU,GACX,qBAAC,QAAD,EAAA,UAAA;GACE,oBAAC,SAAD;IAAO,MAAK;IAAS,MAAK;IAAa,OAAO;GAAa,CAAA;GAC3D,oBAAC,eAAD;IACE,OAAM;IACN,MAAK;IACL,MAAM;IACN,UAAA;IACA,aAAY;GACb,CAAA;GACD,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD;IAAQ,SAAQ;IAAU,MAAK;IAAS,UAAA;GAEhC,CAAA,EACL,CAAA;EACC,EAAA,CAAA,CACJ;;AAEV;;AAGA,SAAgB,aACd,OACgD;CAChD,MAAM,EAAE,SAAS,OAAO,YAAY,iBAAiB,UAAU,cAAc;CAC7E,MAAM,UAAU,SAAS,QAAQ,MAC/B,EAAE,aAAa,EAAE,eAAe,aAAa,CAAC,EAAE,WAAW,EAAE,YAAY,eAC3E;CACA,OACE,qBAAC,MAAD,EAAA,UAAA;EACE,oBAAC,cAAD;GAAc,OAAO;GAAG,UAAA;EAAsB,CAAA;EAC9C,qBAAC,QAAD,EAAA,UAAA,CACG,QAAQ,KAAK,YACZ,oBAAC,aAAD;GAEW;GACF;GACE;GACE;EACZ,GALM,QAAQ,EAKd,CACF,GACA,QAAQ,WAAW,IAAI,oBAAC,MAAD,EAAA,UAAM,gCAAmC,CAAA,IAAI,IAC/D,EAAA,CAAA;EAER,oBAAC,aAAD;GAAsB;GAAgB;GAAmB;EAAa,CAAA;CAClE,EAAA,CAAA;AAEV"}

package/dist/pages/build-diff-environment.mjs

@@ -0,0 +1,82 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Alert } from "../ui/feedback.mjs";
+import { StaleBaselineNotice } from "./build-diff-stale.mjs";
+import { environmentChangeOf, labelOf, summariseEnvironmentChanges } from "./environment-change.mjs";
+import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
+//#region src/pages/build-diff-environment.tsx
+/**
+* Build-level note: some snapshots were captured in a different environment than their baseline.
+* The default branch migrates them without a diff; a feature branch still diffs them (ADR 0005).
+*/
+function EnvironmentChangeNotice(props) {
+	const summary = summariseEnvironmentChanges(props.snapshots);
+	if (!summary) return null;
+	const { count, fields, browserVersion } = summary;
+	const what = `the ${fields.join(", ")} changed${browserVersion ? ` (${browserVersion.from} → ${browserVersion.to})` : ""}`;
+	return props.migrated ? /* @__PURE__ */ jsxs(Alert, {
+		tone: "info",
+		title: "Capture environment changed",
+		children: [
+			count,
+			" ",
+			count === 1 ? "snapshot was" : "snapshots were",
+			" accepted without a pixel diff because ",
+			what,
+			". The same code renders differently here, so a diff would only show the environment. The baselines were updated to match."
+		]
+	}) : /* @__PURE__ */ jsxs(Alert, {
+		tone: "info",
+		title: "Capture environment changed",
+		children: [
+			count,
+			" ",
+			count === 1 ? "snapshot was" : "snapshots were",
+			" compared against a baseline from a different capture environment: ",
+			what,
+			". A difference may come from the environment rather than the code; once the default branch captures in the new environment, a rebuild compares like with like."
+		]
+	});
+}
+/** Per-snapshot note shown above the viewer for a snapshot whose capture environment changed. */
+function EnvironmentChangeSnapshotNotice(props) {
+	const change = environmentChangeOf(props.snapshot);
+	if (!change) return null;
+	const what = change.changed.map((field) => labelOf(field)).join(", ");
+	return props.migrated ? /* @__PURE__ */ jsxs(Alert, {
+		tone: "info",
+		title: "No diff: capture environment changed",
+		children: [
+			"This snapshot was not compared pixel by pixel. What changed: ",
+			what,
+			"."
+		]
+	}) : /* @__PURE__ */ jsxs(Alert, {
+		tone: "info",
+		title: "Capture environment changed",
+		children: [
+			"The baseline was captured in a different environment (",
+			what,
+			"), so a difference may come from the environment rather than the code."
+		]
+	});
+}
+/** Build-level notices above the review grid: stale baselines and environment migrations. */
+function ReviewNotices(props) {
+	const { project, build, snapshots, drifted, canReview } = props;
+	const staleCount = Object.keys(drifted).length;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [staleCount > 0 ? /* @__PURE__ */ jsx(StaleBaselineNotice, {
+		project,
+		build,
+		staleCount,
+		canReview
+	}) : null, /* @__PURE__ */ jsx(EnvironmentChangeNotice, {
+		snapshots,
+		migrated: build.isDefault
+	})] });
+}
+//#endregion
+export { EnvironmentChangeNotice, EnvironmentChangeSnapshotNotice, ReviewNotices };
+
+//# sourceMappingURL=build-diff-environment.mjs.map

package/dist/pages/build-diff-environment.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-diff-environment.mjs","names":[],"sources":["../../src/pages/build-diff-environment.tsx"],"sourcesContent":["import type { Build, Project, Snapshot } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Alert } from \"../ui/components.tsx\";\nimport { StaleBaselineNotice } from \"./build-diff-stale.tsx\";\nimport { environmentChangeOf, labelOf, summariseEnvironmentChanges } from \"./environment-change.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/**\n * Build-level note: some snapshots were captured in a different environment than their baseline.\n * The default branch migrates them without a diff; a feature branch still diffs them (ADR 0005).\n */\nexport function EnvironmentChangeNotice(props: {\n  snapshots: readonly Snapshot[];\n  migrated: boolean;\n}): HtmlEscapedString | Promise<HtmlEscapedString> | null {\n  const summary = summariseEnvironmentChanges(props.snapshots);\n  if (!summary) {\n    return null;\n  }\n  const { count, fields, browserVersion } = summary;\n  const what = `the ${fields.join(\", \")} changed${\n    browserVersion ? ` (${browserVersion.from} → ${browserVersion.to})` : \"\"\n  }`;\n  return props.migrated ? (\n    <Alert tone=\"info\" title=\"Capture environment changed\">\n      {count} {count === 1 ? \"snapshot was\" : \"snapshots were\"} accepted without a pixel diff\n      because {what}. The same code renders differently here, so a diff would only show the\n      environment. The baselines were updated to match.\n    </Alert>\n  ) : (\n    <Alert tone=\"info\" title=\"Capture environment changed\">\n      {count} {count === 1 ? \"snapshot was\" : \"snapshots were\"} compared against a baseline from a\n      different capture environment: {what}. A difference may come from the environment rather than\n      the code; once the default branch captures in the new environment, a rebuild compares like\n      with like.\n    </Alert>\n  );\n}\n\n/** Per-snapshot note shown above the viewer for a snapshot whose capture environment changed. */\nexport function EnvironmentChangeSnapshotNotice(props: {\n  snapshot: Pick<Snapshot, \"envChange\">;\n  migrated: boolean;\n}): HtmlEscapedString | Promise<HtmlEscapedString> | null {\n  const change = environmentChangeOf(props.snapshot);\n  if (!change) {\n    return null;\n  }\n  const what = change.changed.map((field) => labelOf(field)).join(\", \");\n  return props.migrated ? (\n    <Alert tone=\"info\" title=\"No diff: capture environment changed\">\n      This snapshot was not compared pixel by pixel. What changed: {what}.\n    </Alert>\n  ) : (\n    <Alert tone=\"info\" title=\"Capture environment changed\">\n      The baseline was captured in a different environment ({what}), so a difference may come from\n      the environment rather than the code.\n    </Alert>\n  );\n}\n\n/** Build-level notices above the review grid: stale baselines and environment migrations. */\nexport function ReviewNotices(props: {\n  project: Project;\n  build: Build;\n  snapshots: readonly Snapshot[];\n  drifted: Record<string, unknown>;\n  canReview: boolean;\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, snapshots, drifted, canReview } = props;\n  const staleCount = Object.keys(drifted).length;\n  return (\n    <>\n      {staleCount > 0 ? (\n        <StaleBaselineNotice\n          project={project}\n          build={build}\n          staleCount={staleCount}\n          canReview={canReview}\n        />\n      ) : null}\n      <EnvironmentChangeNotice snapshots={snapshots} migrated={build.isDefault} />\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAYA,SAAgB,wBAAwB,OAGkB;CACxD,MAAM,UAAU,4BAA4B,MAAM,SAAS;CAC3D,IAAI,CAAC,SACH,OAAO;CAET,MAAM,EAAE,OAAO,QAAQ,mBAAmB;CAC1C,MAAM,OAAO,OAAO,OAAO,KAAK,IAAI,EAAE,UACpC,iBAAiB,KAAK,eAAe,KAAK,KAAK,eAAe,GAAG,KAAK;CAExE,OAAO,MAAM,WACX,qBAAC,OAAD;EAAO,MAAK;EAAO,OAAM;EAAzB,UAAA;GACG;GAAM;GAAE,UAAU,IAAI,iBAAiB;GAAiB;GAChD;GAAK;EAET;CAEP,CAAA,IAAA,qBAAC,OAAD;EAAO,MAAK;EAAO,OAAM;EAAzB,UAAA;GACG;GAAM;GAAE,UAAU,IAAI,iBAAiB;GAAiB;GACzB;GAAK;EAGhC;;AAEX;;AAGA,SAAgB,gCAAgC,OAGU;CACxD,MAAM,SAAS,oBAAoB,MAAM,QAAQ;CACjD,IAAI,CAAC,QACH,OAAO;CAET,MAAM,OAAO,OAAO,QAAQ,KAAK,UAAU,QAAQ,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI;CACpE,OAAO,MAAM,WACX,qBAAC,OAAD;EAAO,MAAK;EAAO,OAAM;EAAzB,UAAA;GAAgE;GACA;GAAK;EAC9D;CAEP,CAAA,IAAA,qBAAC,OAAD;EAAO,MAAK;EAAO,OAAM;EAAzB,UAAA;GAAuD;GACE;GAAK;EAEvD;;AAEX;;AAGA,SAAgB,cAAc,OAMqB;CACjD,MAAM,EAAE,SAAS,OAAO,WAAW,SAAS,cAAc;CAC1D,MAAM,aAAa,OAAO,KAAK,OAAO,CAAC,CAAC;CACxC,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,aAAa,IACZ,oBAAC,qBAAD;EACW;EACF;EACK;EACD;CACZ,CAAA,IACC,MACJ,oBAAC,yBAAD;EAAoC;EAAW,UAAU,MAAM;CAAY,CAAA,CAC3E,EAAA,CAAA;AAEN"}

package/dist/pages/build-diff-header.mjs

@@ -5,8 +5,9 @@ import { Button } from "../ui/buttons.mjs";
 import { Badge, Meta, statusTone } from "../ui/feedback.mjs";
 import { Avatar } from "../ui/avatar.mjs";
 import { Progress } from "../ui/progress.mjs";
-import { headerActions, headerMain, headerMeta, headerProgress, headerSide, headerTitle, reviewHeader } from "../ui/styles/review-layout.mjs";
+import { a11ySummaryOf, a11yUnavailableNote } from "./a11y-violations.mjs";
 import { reviewProgress } from "./build-diff-model.mjs";
+import { headerActions, headerMain, headerMeta, headerProgress, headerSide, headerTitle, reviewHeader } from "../ui/styles/review-layout.mjs";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
 //#region src/pages/build-diff-header.tsx
 /** Approve-all / reject-all bulk actions (each asks for confirmation). */
@@ -46,7 +47,8 @@ function BulkActions({ project, build, pendingCount }) {
 		})
 	})] });
 }
-function HeaderTitle({ build }) {
+function HeaderTitle({ build, snapshots }) {
+	const a11y = a11ySummaryOf(snapshots);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("h1", {
 		class: headerTitle,
 		children: [
@@ -70,7 +72,20 @@ function HeaderTitle({ build }) {
 				size: "sm"
 			}) : null,
 			build.authorName ? /* @__PURE__ */ jsx("span", { children: build.authorName }) : null,
-			/* @__PURE__ */ jsx("span", { children: build.message ?? "No message" })
+			/* @__PURE__ */ jsx("span", { children: build.message ?? "No message" }),
+			a11y.findings > 0 ? /* @__PURE__ */ jsxs(Badge, {
+				tone: "warning",
+				icon: true,
+				children: [
+					"a11y ",
+					a11y.findings,
+					" (does not block)"
+				]
+			}) : null,
+			a11y.unavailable > 0 ? /* @__PURE__ */ jsx(Badge, {
+				tone: "neutral",
+				children: a11yUnavailableNote(a11y.unavailable)
+			}) : null
 		]
 	})] });
 }
@@ -92,7 +107,10 @@ function DiffHeader(props) {
 		class: reviewHeader,
 		children: [/* @__PURE__ */ jsx("div", {
 			class: headerMain,
-			children: /* @__PURE__ */ jsx(HeaderTitle, { build })
+			children: /* @__PURE__ */ jsx(HeaderTitle, {
+				build,
+				snapshots
+			})
 		}), /* @__PURE__ */ jsxs("div", {
 			class: headerSide,
 			children: [/* @__PURE__ */ jsx(HeaderProgress, { snapshots }), /* @__PURE__ */ jsxs("div", {

package/dist/pages/build-diff-header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"build-diff-header.mjs","names":[],"sources":["../../src/pages/build-diff-header.tsx"],"sourcesContent":["import type { Build, Project, Snapshot } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Avatar, Badge, Button, Meta, Progress, statusTone } from \"../ui/components.tsx\";\nimport {\n  headerActions,\n  headerMain,\n  headerMeta,\n  headerProgress,\n  headerSide,\n  headerTitle,\n  reviewHeader,\n} from \"../ui/styles/review-layout.ts\";\nimport { reviewProgress } from \"./build-diff-model.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Header props for the diff review page. */\nexport interface DiffHeaderProps {\n  project: Project;\n  build: Build;\n  snapshots: Snapshot[];\n  pendingCount: number;\n  canReview: boolean;\n}\n\ninterface BulkProps {\n  project: Project;\n  build: Build;\n  pendingCount: number;\n}\n\n/** Approve-all / reject-all bulk actions (each asks for confirmation). */\nfunction BulkActions({\n  project,\n  build,\n  pendingCount,\n}: BulkProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const base = `/api/v1/projects/${project.slug}/builds/${build.id}`;\n  return (\n    <>\n      <form\n        method=\"post\"\n        action={`${base}/approve-all`}\n        hx-post={`${base}/approve-all`}\n        hx-target=\"body\"\n        hx-confirm={`Approve all ${pendingCount} remaining changes?`}\n        data-toast={`Approved ${pendingCount} ${pendingCount === 1 ? \"change\" : \"changes\"}`}\n      >\n        <Button variant=\"primary\" size=\"sm\" type=\"submit\" icon=\"check\">\n          Approve all ({pendingCount})\n        </Button>\n      </form>\n      <form\n        method=\"post\"\n        action={`${base}/reject-all`}\n        hx-post={`${base}/reject-all`}\n        hx-target=\"body\"\n        hx-confirm={`Reject all ${pendingCount} remaining changes?`}\n        data-toast={`Rejected ${pendingCount} ${pendingCount === 1 ? \"change\" : \"changes\"}`}\n        data-toast-tone=\"warning\"\n      >\n        <Button variant=\"secondary\" size=\"sm\" type=\"submit\">\n          Reject all\n        </Button>\n      </form>\n    </>\n  );\n}\n\nfunction HeaderTitle({ build }: { build: Build }): HtmlEscapedString | Promise<HtmlEscapedString> {\n  return (\n    <>\n      <h1 class={headerTitle}>\n        <span>{build.gitBranch}</span>\n        <Meta as=\"span\" mono>\n          {build.gitSha.slice(0, 7)}\n        </Meta>\n        <Badge tone={statusTone(build.status)} icon>\n          {build.status}\n        </Badge>\n      </h1>\n      <p class={headerMeta}>\n        {build.authorName ? <Avatar name={build.authorName} size=\"sm\" /> : null}\n        {build.authorName ? <span>{build.authorName}</span> : null}\n        <span>{build.message ?? \"No message\"}</span>\n      </p>\n    </>\n  );\n}\n\nfunction HeaderProgress({\n  snapshots,\n}: {\n  snapshots: Snapshot[];\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const progress = reviewProgress(snapshots);\n  return (\n    <div class={headerProgress}>\n      <span>\n        {progress.reviewable === 0\n          ? \"No changes to review\"\n          : `${progress.done} of ${progress.reviewable} reviewed`}\n      </span>\n      <Progress value={progress.done} max={progress.reviewable} label=\"Review progress\" />\n    </div>\n  );\n}\n\n/** Compact build summary with review progress and bulk actions. */\nexport function DiffHeader(props: DiffHeaderProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, snapshots, pendingCount, canReview } = props;\n  return (\n    <header class={reviewHeader}>\n      <div class={headerMain}>\n        <HeaderTitle build={build} />\n      </div>\n      <div class={headerSide}>\n        <HeaderProgress snapshots={snapshots} />\n        <div class={headerActions}>\n          <Button\n            variant=\"secondary\"\n            size=\"sm\"\n            href={`/projects/${project.slug}/builds/${build.id}`}\n          >\n            Build overview\n          </Button>\n          {canReview && pendingCount > 0 ? (\n            <BulkActions project={project} build={build} pendingCount={pendingCount} />\n          ) : null}\n        </div>\n      </div>\n    </header>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAgCA,SAAS,YAAY,EACnB,SACA,OACA,gBAC4D;CAC5D,MAAM,OAAO,oBAAoB,QAAQ,KAAK,UAAU,MAAM;CAC9D,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EACE,QAAO;EACP,QAAQ,GAAG,KAAK;EAChB,WAAS,GAAG,KAAK;EACjB,aAAU;EACV,cAAY,eAAe,aAAa;EACxC,cAAY,YAAY,aAAa,GAAG,iBAAiB,IAAI,WAAW;EAExE,UAAA,qBAAC,QAAD;GAAQ,SAAQ;GAAU,MAAK;GAAK,MAAK;GAAS,MAAK;GAAvD,UAAA;IAA+D;IAC/C;IAAa;GACrB;;CACJ,CAAA,GACN,oBAAC,QAAD;EACE,QAAO;EACP,QAAQ,GAAG,KAAK;EAChB,WAAS,GAAG,KAAK;EACjB,aAAU;EACV,cAAY,cAAc,aAAa;EACvC,cAAY,YAAY,aAAa,GAAG,iBAAiB,IAAI,WAAW;EACxE,mBAAgB;EAEhB,UAAA,oBAAC,QAAD;GAAQ,SAAQ;GAAY,MAAK;GAAK,MAAK;GAAS,UAAA;EAE5C,CAAA;CACJ,CAAA,CACN,EAAA,CAAA;AAEN;AAEA,SAAS,YAAY,EAAE,SAA2E;CAChG,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,MAAD;EAAI,OAAO;EAAX,UAAA;GACE,oBAAC,QAAD,EAAA,UAAO,MAAM,UAAgB,CAAA;GAC7B,oBAAC,MAAD;IAAM,IAAG;IAAO,MAAA;IACb,UAAA,MAAM,OAAO,MAAM,GAAG,CAAC;GACpB,CAAA;GACN,oBAAC,OAAD;IAAO,MAAM,WAAW,MAAM,MAAM;IAAG,MAAA;IACpC,UAAA,MAAM;GACF,CAAA;EACL;CACJ,CAAA,GAAA,qBAAC,KAAD;EAAG,OAAO;EAAV,UAAA;GACG,MAAM,aAAa,oBAAC,QAAD;IAAQ,MAAM,MAAM;IAAY,MAAK;GAAM,CAAA,IAAI;GAClE,MAAM,aAAa,oBAAC,QAAD,EAAA,UAAO,MAAM,WAAiB,CAAA,IAAI;GACtD,oBAAC,QAAD,EAAA,UAAO,MAAM,WAAW,aAAmB,CAAA;EAC1C;CACH,CAAA,CAAA,EAAA,CAAA;AAEN;AAEA,SAAS,eAAe,EACtB,aAGiD;CACjD,MAAM,WAAW,eAAe,SAAS;CACzC,OACE,qBAAC,OAAD;EAAK,OAAO;EAAZ,UAAA,CACE,oBAAC,QAAD,EAAA,UACG,SAAS,eAAe,IACrB,yBACA,GAAG,SAAS,KAAK,MAAM,SAAS,WAAW,WAC3C,CAAA,GACN,oBAAC,UAAD;GAAU,OAAO,SAAS;GAAM,KAAK,SAAS;GAAY,OAAM;EAAmB,CAAA,CAChF;;AAET;;AAGA,SAAgB,WAAW,OAAwE;CACjG,MAAM,EAAE,SAAS,OAAO,WAAW,cAAc,cAAc;CAC/D,OACE,qBAAC,UAAD;EAAQ,OAAO;EAAf,UAAA,CACE,oBAAC,OAAD;GAAK,OAAO;GACV,UAAA,oBAAC,aAAD,EAAoB,MAAQ,CAAA;EACzB,CAAA,GACL,qBAAC,OAAD;GAAK,OAAO;GAAZ,UAAA,CACE,oBAAC,gBAAD,EAA2B,UAAY,CAAA,GACvC,qBAAC,OAAD;IAAK,OAAO;IAAZ,UAAA,CACE,oBAAC,QAAD;KACE,SAAQ;KACR,MAAK;KACL,MAAM,aAAa,QAAQ,KAAK,UAAU,MAAM;KACjD,UAAA;IAEO,CAAA,GACP,aAAa,eAAe,IAC3B,oBAAC,aAAD;KAAsB;KAAgB;KAAqB;IAAe,CAAA,IACxE,IACD;GACF,CAAA,CAAA;EACC,CAAA,CAAA;;AAEZ"}
+{"version":3,"file":"build-diff-header.mjs","names":[],"sources":["../../src/pages/build-diff-header.tsx"],"sourcesContent":["import type { Build, Project, Snapshot } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Avatar, Badge, Button, Meta, Progress, statusTone } from \"../ui/components.tsx\";\nimport {\n  headerActions,\n  headerMain,\n  headerMeta,\n  headerProgress,\n  headerSide,\n  headerTitle,\n  reviewHeader,\n} from \"../ui/styles/review-layout.ts\";\nimport { a11ySummaryOf, a11yUnavailableNote } from \"./a11y-violations.tsx\";\nimport { reviewProgress } from \"./build-diff-model.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Header props for the diff review page. */\nexport interface DiffHeaderProps {\n  project: Project;\n  build: Build;\n  snapshots: Snapshot[];\n  pendingCount: number;\n  canReview: boolean;\n}\n\ninterface BulkProps {\n  project: Project;\n  build: Build;\n  pendingCount: number;\n}\n\n/** Approve-all / reject-all bulk actions (each asks for confirmation). */\nfunction BulkActions({\n  project,\n  build,\n  pendingCount,\n}: BulkProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const base = `/api/v1/projects/${project.slug}/builds/${build.id}`;\n  return (\n    <>\n      <form\n        method=\"post\"\n        action={`${base}/approve-all`}\n        hx-post={`${base}/approve-all`}\n        hx-target=\"body\"\n        hx-confirm={`Approve all ${pendingCount} remaining changes?`}\n        data-toast={`Approved ${pendingCount} ${pendingCount === 1 ? \"change\" : \"changes\"}`}\n      >\n        <Button variant=\"primary\" size=\"sm\" type=\"submit\" icon=\"check\">\n          Approve all ({pendingCount})\n        </Button>\n      </form>\n      <form\n        method=\"post\"\n        action={`${base}/reject-all`}\n        hx-post={`${base}/reject-all`}\n        hx-target=\"body\"\n        hx-confirm={`Reject all ${pendingCount} remaining changes?`}\n        data-toast={`Rejected ${pendingCount} ${pendingCount === 1 ? \"change\" : \"changes\"}`}\n        data-toast-tone=\"warning\"\n      >\n        <Button variant=\"secondary\" size=\"sm\" type=\"submit\">\n          Reject all\n        </Button>\n      </form>\n    </>\n  );\n}\n\nfunction HeaderTitle({\n  build,\n  snapshots,\n}: {\n  build: Build;\n  snapshots: Snapshot[];\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const a11y = a11ySummaryOf(snapshots);\n  return (\n    <>\n      <h1 class={headerTitle}>\n        <span>{build.gitBranch}</span>\n        <Meta as=\"span\" mono>\n          {build.gitSha.slice(0, 7)}\n        </Meta>\n        <Badge tone={statusTone(build.status)} icon>\n          {build.status}\n        </Badge>\n      </h1>\n      <p class={headerMeta}>\n        {build.authorName ? <Avatar name={build.authorName} size=\"sm\" /> : null}\n        {build.authorName ? <span>{build.authorName}</span> : null}\n        <span>{build.message ?? \"No message\"}</span>\n        {a11y.findings > 0 ? (\n          <Badge tone=\"warning\" icon>\n            a11y {a11y.findings} (does not block)\n          </Badge>\n        ) : null}\n        {a11y.unavailable > 0 ? (\n          <Badge tone=\"neutral\">{a11yUnavailableNote(a11y.unavailable)}</Badge>\n        ) : null}\n      </p>\n    </>\n  );\n}\n\nfunction HeaderProgress({\n  snapshots,\n}: {\n  snapshots: Snapshot[];\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const progress = reviewProgress(snapshots);\n  return (\n    <div class={headerProgress}>\n      <span>\n        {progress.reviewable === 0\n          ? \"No changes to review\"\n          : `${progress.done} of ${progress.reviewable} reviewed`}\n      </span>\n      <Progress value={progress.done} max={progress.reviewable} label=\"Review progress\" />\n    </div>\n  );\n}\n\n/** Compact build summary with review progress and bulk actions. */\nexport function DiffHeader(props: DiffHeaderProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, snapshots, pendingCount, canReview } = props;\n  return (\n    <header class={reviewHeader}>\n      <div class={headerMain}>\n        <HeaderTitle build={build} snapshots={snapshots} />\n      </div>\n      <div class={headerSide}>\n        <HeaderProgress snapshots={snapshots} />\n        <div class={headerActions}>\n          <Button\n            variant=\"secondary\"\n            size=\"sm\"\n            href={`/projects/${project.slug}/builds/${build.id}`}\n          >\n            Build overview\n          </Button>\n          {canReview && pendingCount > 0 ? (\n            <BulkActions project={project} build={build} pendingCount={pendingCount} />\n          ) : null}\n        </div>\n      </div>\n    </header>\n  );\n}\n"],"mappings":"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"}