@storyshelf/app 0.5.3

package/dist/pages/build-detail.mjs

@@ -0,0 +1,392 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { getStore } from "../store.mjs";
+import { Button } from "../ui/buttons.mjs";
+import { Badge, EmptyState, Meta, Stat, statusTone } from "../ui/feedback.mjs";
+import { TextareaField } from "../ui/forms.mjs";
+import { Card, PageHeader, SectionTitle } from "../ui/layout.mjs";
+import { HStack, VStack } from "../ui/stacks.mjs";
+import { Thumbnail } from "../ui/thumbnail.mjs";
+import { DocumentLayout } from "../ui/document.mjs";
+import { loadBaselineView } from "../routers/baseline-guard.mjs";
+import { reviewComment, reviewCommentBody, reviewCommentHead, snapshotCard, snapshotCardBody, snapshotCardHead, snapshotCardMeta, snapshotGrid } from "../ui/styles/review.mjs";
+import { StaleBaselineNotice } from "./build-diff-stale.mjs";
+import { BuildModel, CaptureAttemptModel, CaptureLogModel, CommentModel, ProjectModel, SnapshotModel } from "@storyshelf/core/models";
+import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
+import { createUrlBuilder } from "@storyshelf/core/urls";
+//#region src/pages/build-detail.tsx
+/** Map a capture log level to its badge tone. */
+function logTone(level) {
+	if (level === "error") return "danger";
+	if (level === "warn") return "warning";
+	if (level === "info") return "info";
+	return "neutral";
+}
+/** Build overview page: snapshot grid, bulk actions, and build comments. */
+async function renderBuildDetailPage(buildId) {
+	const { db } = getStore();
+	const build = await new BuildModel(db).get(buildId);
+	if (!build) return null;
+	const project = await new ProjectModel(db).get(build.projectId);
+	if (!project) return null;
+	const snapshots = await new SnapshotModel(db).listByBuild(build.id);
+	const comments = await new CommentModel(db).listByBuild(build.id);
+	const attempts = await new CaptureAttemptModel(db).listByBuild(build.id);
+	const logs = new CaptureLogModel(db);
+	const attemptLogs = /* @__PURE__ */ new Map();
+	for (const attempt of attempts) attemptLogs.set(attempt.id, await logs.listByAttempt(attempt.id));
+	const canReview = !getStore().authEnabled || Boolean(getStore().user);
+	const { drifted } = await loadBaselineView(project, build, snapshots);
+	const staleCount = Object.keys(drifted).length;
+	const urls = createUrlBuilder("/", getStore().config.publishedBaseDomain);
+	const grouped = /* @__PURE__ */ new Map();
+	for (const snap of snapshots) {
+		const key = snap.status;
+		const list = grouped.get(key) ?? [];
+		list.push(snap);
+		grouped.set(key, list);
+	}
+	const inheritedCount = snapshots.filter((snap) => snap.inherited).length;
+	const selective = build.affectedOnly && build.affectedImportPaths !== null;
+	return /* @__PURE__ */ jsxs(DocumentLayout, {
+		title: `Build ${build.gitBranch}`,
+		nav: {
+			active: "builds",
+			projectSlug: project.slug,
+			projectName: project.name,
+			trail: [{ label: `${build.gitBranch} · ${build.gitSha.slice(0, 7)}` }]
+		},
+		children: [
+			/* @__PURE__ */ jsx(PageHeader, {
+				title: /* @__PURE__ */ jsxs(Fragment, { children: [
+					build.gitBranch,
+					" ",
+					/* @__PURE__ */ jsxs(Meta, {
+						as: "span",
+						children: ["· ", build.gitSha.slice(0, 7)]
+					}),
+					" ",
+					/* @__PURE__ */ jsx(Badge, {
+						tone: statusTone(build.status),
+						children: build.status
+					}),
+					selective ? /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx(Badge, {
+						tone: "info",
+						children: "affected capture"
+					})] }) : null,
+					!build.affectedOnly ? /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx(Badge, {
+						tone: "neutral",
+						children: "full capture"
+					})] }) : null
+				] }),
+				description: /* @__PURE__ */ jsxs(Fragment, { children: [
+					build.message ?? "No message",
+					" ",
+					build.authorName ? `· ${build.authorName}${build.authorEmail ? ` <${build.authorEmail}>` : ""}` : "",
+					" ",
+					"· ",
+					new Date(build.createdAt).toLocaleString(),
+					selective ? /* @__PURE__ */ jsxs(Fragment, { children: [
+						" ",
+						"· ",
+						snapshots.length - inheritedCount,
+						" rendered, ",
+						inheritedCount,
+						" inherited"
+					] }) : null
+				] }),
+				actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(Button, {
+						variant: "primary",
+						href: urls.buildDiff(project.slug, build.id),
+						children: "Review diffs"
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						href: urls.short(build.id),
+						children: "View Storybook"
+					}),
+					/* @__PURE__ */ jsx("form", {
+						method: "post",
+						action: `/api/v1/projects/${project.slug}/builds/${build.id}/retry`,
+						"hx-post": `/api/v1/projects/${project.slug}/builds/${build.id}/retry`,
+						"hx-target": "body",
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "secondary",
+							type: "submit",
+							children: "Retry capture"
+						})
+					})
+				] })
+			}),
+			staleCount > 0 ? /* @__PURE__ */ jsx(StaleBaselineNotice, {
+				project,
+				build,
+				staleCount,
+				canReview
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				class: "mb-1",
+				children: /* @__PURE__ */ jsxs("div", {
+					class: "grid grid--3",
+					children: [
+						/* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(Stat, {
+							label: "Snapshots",
+							value: snapshots.length
+						}) }),
+						/* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(Stat, {
+							label: "Changed / new",
+							value: build.changedCount,
+							tone: "warning"
+						}) }),
+						/* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(Stat, {
+							label: "Approved / unchanged",
+							value: build.approvedCount,
+							tone: "success"
+						}) })
+					]
+				})
+			}),
+			attempts.length > 0 ? /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(SectionTitle, { children: "Capture attempts" }), attempts.map((attempt, index) => /* @__PURE__ */ jsxs("details", {
+				open: index === attempts.length - 1,
+				children: [
+					/* @__PURE__ */ jsxs("summary", { children: [
+						"Attempt ",
+						attempt.attemptNo,
+						" ",
+						/* @__PURE__ */ jsx(Badge, {
+							tone: statusTone(attempt.status),
+							children: attempt.status
+						}),
+						" ",
+						/* @__PURE__ */ jsxs(Meta, {
+							as: "span",
+							children: [
+								attempt.storyCount,
+								" stories",
+								attempt.reqId ? ` · ${attempt.reqId}` : ""
+							]
+						})
+					] }),
+					attempt.error ? /* @__PURE__ */ jsx(Meta, {
+						as: "pre",
+						children: attempt.error
+					}) : null,
+					/* @__PURE__ */ jsx("div", {
+						class: "mt-1",
+						children: /* @__PURE__ */ jsx(VStack, { children: (attemptLogs.get(attempt.id) ?? []).map((line) => /* @__PURE__ */ jsxs(HStack, {
+							align: "baseline",
+							wrap: false,
+							children: [
+								/* @__PURE__ */ jsx(Badge, {
+									tone: logTone(line.level),
+									children: line.level
+								}),
+								/* @__PURE__ */ jsx("span", { children: line.message }),
+								line.fields ? /* @__PURE__ */ jsx(Meta, {
+									as: "code",
+									children: line.fields
+								}) : null
+							]
+						}, line.id)) })
+					})
+				]
+			}, attempt.id))] }) : null,
+			canReview && (build.status === "reviewing" || build.status === "comparing") ? /* @__PURE__ */ jsx("div", {
+				class: "mb-1",
+				children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(HStack, { children: [
+					/* @__PURE__ */ jsx(Meta, {
+						as: "span",
+						children: "Bulk actions:"
+					}),
+					/* @__PURE__ */ jsx("form", {
+						method: "post",
+						action: `/api/v1/projects/${project.slug}/builds/${build.id}/approve-all`,
+						"hx-post": `/api/v1/projects/${project.slug}/builds/${build.id}/approve-all`,
+						"hx-target": "body",
+						"hx-confirm": "Approve all remaining changes?",
+						"data-toast": "Approved all remaining changes",
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "primary",
+							size: "sm",
+							type: "submit",
+							children: "Approve all"
+						})
+					}),
+					/* @__PURE__ */ jsx("form", {
+						method: "post",
+						action: `/api/v1/projects/${project.slug}/builds/${build.id}/reject-all`,
+						"hx-post": `/api/v1/projects/${project.slug}/builds/${build.id}/reject-all`,
+						"hx-target": "body",
+						"hx-confirm": "Reject all remaining changes?",
+						"data-toast": "Rejected all remaining changes",
+						"data-toast-tone": "warning",
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "danger",
+							size: "sm",
+							type: "submit",
+							children: "Reject all"
+						})
+					}),
+					/* @__PURE__ */ jsx(Meta, {
+						as: "span",
+						children: "Or review individually in the diff view."
+					})
+				] }) })
+			}) : null,
+			snapshots.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+				title: "No snapshots yet",
+				description: "Capture is pending or failed. Try retrying capture."
+			}) : /* @__PURE__ */ jsx("div", {
+				class: snapshotGrid,
+				children: snapshots.map((snap) => /* @__PURE__ */ jsxs("div", {
+					class: snapshotCard,
+					children: [/* @__PURE__ */ jsxs("div", {
+						class: snapshotCardHead,
+						children: [
+							/* @__PURE__ */ jsx(Badge, {
+								tone: statusTone(snap.status),
+								children: snap.status
+							}),
+							snap.inherited ? /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx(Badge, {
+								tone: "neutral",
+								children: "inherited"
+							})] }) : null,
+							/* @__PURE__ */ jsxs("span", {
+								class: snapshotCardMeta,
+								children: [
+									snap.viewportName,
+									" · ",
+									snap.viewportWidth,
+									"×",
+									snap.viewportHeight
+								]
+							})
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						class: snapshotCardBody,
+						children: [
+							/* @__PURE__ */ jsx("a", {
+								href: `${urls.buildDiff(project.slug, build.id)}?snapshot=${snap.id}`,
+								children: /* @__PURE__ */ jsx(Thumbnail, {
+									src: `/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${snap.id}/image`,
+									alt: `${snap.storyTitle} / ${snap.storyName}`
+								})
+							}),
+							/* @__PURE__ */ jsxs(SectionTitle, { children: [
+								snap.storyTitle,
+								" ",
+								/* @__PURE__ */ jsxs(Meta, {
+									as: "span",
+									children: ["/ ", snap.storyName]
+								})
+							] }),
+							/* @__PURE__ */ jsxs(Meta, {
+								as: "div",
+								children: [
+									snap.storyId,
+									snap.diffRatio !== null && snap.diffRatio !== void 0 ? ` · diff ${(snap.diffRatio * 100).toFixed(2)}%` : "",
+									snap.diffPixels === null || snap.diffPixels === void 0 ? "" : ` · ${snap.diffPixels} px`
+								]
+							}),
+							/* @__PURE__ */ jsxs(HStack, { children: [
+								/* @__PURE__ */ jsx(Button, {
+									variant: "secondary",
+									size: "sm",
+									href: `${urls.buildDiff(project.slug, build.id)}?snapshot=${snap.id}`,
+									children: "Review"
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									variant: "ghost",
+									size: "sm",
+									href: urls.short(build.id),
+									children: "View Storybook"
+								}),
+								canReview && (snap.status === "new" || snap.status === "changed") ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("form", {
+									method: "post",
+									action: `/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${snap.id}/approve`,
+									"hx-post": `/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${snap.id}/approve`,
+									"hx-target": "body",
+									"data-toast": `Approved ${snap.storyName}`,
+									children: /* @__PURE__ */ jsx(Button, {
+										variant: "ghost",
+										size: "sm",
+										type: "submit",
+										children: "Approve"
+									})
+								}), /* @__PURE__ */ jsx("form", {
+									method: "post",
+									action: `/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${snap.id}/reject`,
+									"hx-post": `/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${snap.id}/reject`,
+									"hx-target": "body",
+									"data-toast": `Rejected ${snap.storyName}`,
+									"data-toast-tone": "warning",
+									children: /* @__PURE__ */ jsx(Button, {
+										variant: "ghost",
+										size: "sm",
+										type: "submit",
+										children: "Reject"
+									})
+								})] }) : null
+							] })
+						]
+					})]
+				}, snap.id))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				class: "mt-1",
+				children: /* @__PURE__ */ jsxs(Card, { children: [
+					/* @__PURE__ */ jsx(SectionTitle, { children: "Comments" }),
+					comments.length === 0 ? /* @__PURE__ */ jsx(Meta, { children: "No comments. Add one in the diff review page for a specific snapshot." }) : null,
+					/* @__PURE__ */ jsx(VStack, { children: comments.map((comment) => /* @__PURE__ */ jsxs("div", {
+						class: reviewComment,
+						children: [/* @__PURE__ */ jsxs("div", {
+							class: reviewCommentHead,
+							children: [
+								/* @__PURE__ */ jsx("strong", { children: comment.userId ?? "anonymous" }),
+								/* @__PURE__ */ jsxs("span", { children: ["· ", new Date(comment.createdAt).toLocaleString()] }),
+								comment.snapshotId ? /* @__PURE__ */ jsx(Badge, {
+									tone: "neutral",
+									children: snapshots.find((snapshot) => snapshot.id === comment.snapshotId)?.storyName ?? comment.snapshotId.slice(0, 6)
+								}) : /* @__PURE__ */ jsx(Badge, {
+									tone: "neutral",
+									children: "build"
+								}),
+								comment.resolved ? /* @__PURE__ */ jsx(Badge, {
+									tone: "success",
+									children: "resolved"
+								}) : null
+							]
+						}), /* @__PURE__ */ jsx("p", {
+							class: reviewCommentBody,
+							children: comment.body
+						})]
+					}, comment.id)) }),
+					/* @__PURE__ */ jsx("form", {
+						method: "post",
+						action: `/api/v1/projects/${project.slug}/builds/${build.id}/comments`,
+						"hx-post": `/api/v1/projects/${project.slug}/builds/${build.id}/comments`,
+						"hx-target": "body",
+						class: "mt-1 max-w-prose",
+						children: /* @__PURE__ */ jsxs(VStack, { children: [/* @__PURE__ */ jsx(TextareaField, {
+							label: "Add build comment",
+							name: "body",
+							rows: 3,
+							required: true,
+							placeholder: "Leave a comment on this build…"
+						}), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
+							variant: "primary",
+							type: "submit",
+							children: "Comment"
+						}) })] })
+					})
+				] })
+			})
+		]
+	});
+}
+//#endregion
+export { renderBuildDetailPage };
+
+//# sourceMappingURL=build-detail.mjs.map

package/dist/pages/build-detail.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-detail.mjs","names":[],"sources":["../../src/pages/build-detail.tsx"],"sourcesContent":["import { BuildModel } from \"@storyshelf/core/models\";\nimport { CaptureAttemptModel } from \"@storyshelf/core/models\";\nimport { CaptureLogModel } from \"@storyshelf/core/models\";\nimport { CommentModel } from \"@storyshelf/core/models\";\nimport { ProjectModel } from \"@storyshelf/core/models\";\nimport { SnapshotModel } from \"@storyshelf/core/models\";\nimport { createUrlBuilder } from \"@storyshelf/core/urls\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { loadBaselineView } from \"../routers/baseline-guard.ts\";\nimport { getStore } from \"../store.ts\";\nimport {\n  Badge,\n  Button,\n  Card,\n  EmptyState,\n  HStack,\n  Meta,\n  PageHeader,\n  SectionTitle,\n  Stat,\n  TextareaField,\n  Thumbnail,\n  VStack,\n  statusTone,\n} from \"../ui/components.tsx\";\nimport { DocumentLayout, type RenderedContent } from \"../ui/document.tsx\";\nimport {\n  reviewComment,\n  reviewCommentBody,\n  reviewCommentHead,\n  snapshotCard,\n  snapshotCardBody,\n  snapshotCardHead,\n  snapshotCardMeta,\n  snapshotGrid,\n} from \"../ui/styles/review.ts\";\nimport { StaleBaselineNotice } from \"./build-diff-stale.tsx\";\n\n/** Map a capture log level to its badge tone. */\nfunction logTone(level: string): \"neutral\" | \"success\" | \"warning\" | \"danger\" | \"info\" {\n  if (level === \"error\") {\n    return \"danger\";\n  }\n  if (level === \"warn\") {\n    return \"warning\";\n  }\n  if (level === \"info\") {\n    return \"info\";\n  }\n  return \"neutral\";\n}\n/** Build overview page: snapshot grid, bulk actions, and build comments. */\nexport async function renderBuildDetailPage(buildId: string): Promise<RenderedContent | null> {\n  const { db } = getStore();\n  const build = await new BuildModel(db).get(buildId);\n  if (!build) {\n    return null;\n  }\n  const project = await new ProjectModel(db).get(build.projectId);\n  if (!project) {\n    return null;\n  }\n  const snapshots = await new SnapshotModel(db).listByBuild(build.id);\n  const comments = await new CommentModel(db).listByBuild(build.id);\n  const attempts = await new CaptureAttemptModel(db).listByBuild(build.id);\n  const logs = new CaptureLogModel(db);\n  const attemptLogs = new Map<string, Awaited<ReturnType<typeof logs.listByAttempt>>>();\n  /* oxlint-disable-next-line eslint/no-await-in-loop -- attempts are few; sequential reads keep code simple */\n  for (const attempt of attempts) {\n    attemptLogs.set(attempt.id, await logs.listByAttempt(attempt.id));\n  }\n  const canReview = !getStore().authEnabled || Boolean(getStore().user);\n  const { drifted } = await loadBaselineView(project, build, snapshots);\n  const staleCount = Object.keys(drifted).length;\n  const urls = createUrlBuilder(\"/\", getStore().config.publishedBaseDomain);\n\n  const grouped = new Map<string, typeof snapshots>();\n  for (const snap of snapshots) {\n    const key = snap.status;\n    const list = grouped.get(key) ?? [];\n    list.push(snap);\n    grouped.set(key, list);\n  }\n  const inheritedCount = snapshots.filter((snap) => snap.inherited).length;\n  const selective = build.affectedOnly && build.affectedImportPaths !== null;\n\n  return (\n    <DocumentLayout\n      title={`Build ${build.gitBranch}`}\n      nav={{\n        active: \"builds\",\n        projectSlug: project.slug,\n        projectName: project.name,\n        trail: [{ label: `${build.gitBranch} · ${build.gitSha.slice(0, 7)}` }],\n      }}\n    >\n      <PageHeader\n        title={\n          <>\n            {build.gitBranch} <Meta as=\"span\">· {build.gitSha.slice(0, 7)}</Meta>{\" \"}\n            <Badge tone={statusTone(build.status)}>{build.status}</Badge>\n            {selective ? (\n              <>\n                {\" \"}\n                <Badge tone=\"info\">affected capture</Badge>\n              </>\n            ) : null}\n            {!build.affectedOnly ? (\n              <>\n                {\" \"}\n                <Badge tone=\"neutral\">full capture</Badge>\n              </>\n            ) : null}\n          </>\n        }\n        description={\n          <>\n            {build.message ?? \"No message\"}{\" \"}\n            {build.authorName\n              ? `· ${build.authorName}${build.authorEmail ? ` <${build.authorEmail}>` : \"\"}`\n              : \"\"}{\" \"}\n            · {new Date(build.createdAt).toLocaleString()}\n            {selective ? (\n              <>\n                {\" \"}\n                · {snapshots.length - inheritedCount} rendered, {inheritedCount} inherited\n              </>\n            ) : null}\n          </>\n        }\n        actions={\n          <>\n            <Button variant=\"primary\" href={urls.buildDiff(project.slug, build.id)}>\n              Review diffs\n            </Button>\n            <Button variant=\"ghost\" href={urls.short(build.id)}>\n              View Storybook\n            </Button>\n            <form\n              method=\"post\"\n              action={`/api/v1/projects/${project.slug}/builds/${build.id}/retry`}\n              hx-post={`/api/v1/projects/${project.slug}/builds/${build.id}/retry`}\n              hx-target=\"body\"\n            >\n              <Button variant=\"secondary\" type=\"submit\">\n                Retry capture\n              </Button>\n            </form>\n          </>\n        }\n      />\n\n      {staleCount > 0 ? (\n        <StaleBaselineNotice\n          project={project}\n          build={build}\n          staleCount={staleCount}\n          canReview={canReview}\n        />\n      ) : null}\n\n      <div class=\"mb-1\">\n        <div class=\"grid grid--3\">\n          <Card>\n            <Stat label=\"Snapshots\" value={snapshots.length} />\n          </Card>\n          <Card>\n            <Stat label=\"Changed / new\" value={build.changedCount} tone=\"warning\" />\n          </Card>\n          <Card>\n            <Stat label=\"Approved / unchanged\" value={build.approvedCount} tone=\"success\" />\n          </Card>\n        </div>\n      </div>\n\n      {attempts.length > 0 ? (\n        <Card>\n          <SectionTitle>Capture attempts</SectionTitle>\n          {attempts.map((attempt, index): HtmlEscapedString | Promise<HtmlEscapedString> => (\n            <details key={attempt.id} open={index === attempts.length - 1}>\n              <summary>\n                Attempt {attempt.attemptNo}{\" \"}\n                <Badge tone={statusTone(attempt.status)}>{attempt.status}</Badge>{\" \"}\n                <Meta as=\"span\">\n                  {attempt.storyCount} stories\n                  {attempt.reqId ? ` · ${attempt.reqId}` : \"\"}\n                </Meta>\n              </summary>\n              {attempt.error ? <Meta as=\"pre\">{attempt.error}</Meta> : null}\n              <div class=\"mt-1\">\n                <VStack>\n                  {(attemptLogs.get(attempt.id) ?? []).map(\n                    (line): HtmlEscapedString | Promise<HtmlEscapedString> => (\n                      <HStack key={line.id} align=\"baseline\" wrap={false}>\n                        <Badge tone={logTone(line.level)}>{line.level}</Badge>\n                        <span>{line.message}</span>\n                        {line.fields ? <Meta as=\"code\">{line.fields}</Meta> : null}\n                      </HStack>\n                    ),\n                  )}\n                </VStack>\n              </div>\n            </details>\n          ))}\n        </Card>\n      ) : null}\n\n      {canReview && (build.status === \"reviewing\" || build.status === \"comparing\") ? (\n        <div class=\"mb-1\">\n          <Card>\n            <HStack>\n              <Meta as=\"span\">Bulk actions:</Meta>\n              <form\n                method=\"post\"\n                action={`/api/v1/projects/${project.slug}/builds/${build.id}/approve-all`}\n                hx-post={`/api/v1/projects/${project.slug}/builds/${build.id}/approve-all`}\n                hx-target=\"body\"\n                hx-confirm=\"Approve all remaining changes?\"\n                data-toast=\"Approved all remaining changes\"\n              >\n                <Button variant=\"primary\" size=\"sm\" type=\"submit\">\n                  Approve all\n                </Button>\n              </form>\n              <form\n                method=\"post\"\n                action={`/api/v1/projects/${project.slug}/builds/${build.id}/reject-all`}\n                hx-post={`/api/v1/projects/${project.slug}/builds/${build.id}/reject-all`}\n                hx-target=\"body\"\n                hx-confirm=\"Reject all remaining changes?\"\n                data-toast=\"Rejected all remaining changes\"\n                data-toast-tone=\"warning\"\n              >\n                <Button variant=\"danger\" size=\"sm\" type=\"submit\">\n                  Reject all\n                </Button>\n              </form>\n              <Meta as=\"span\">Or review individually in the diff view.</Meta>\n            </HStack>\n          </Card>\n        </div>\n      ) : null}\n\n      {snapshots.length === 0 ? (\n        <EmptyState\n          title=\"No snapshots yet\"\n          description=\"Capture is pending or failed. Try retrying capture.\"\n        />\n      ) : (\n        <div class={snapshotGrid}>\n          {snapshots.map((snap): HtmlEscapedString | Promise<HtmlEscapedString> => (\n            <div key={snap.id} class={snapshotCard}>\n              <div class={snapshotCardHead}>\n                <Badge tone={statusTone(snap.status)}>{snap.status}</Badge>\n                {snap.inherited ? (\n                  <>\n                    {\" \"}\n                    <Badge tone=\"neutral\">inherited</Badge>\n                  </>\n                ) : null}\n                <span class={snapshotCardMeta}>\n                  {snap.viewportName} · {snap.viewportWidth}×{snap.viewportHeight}\n                </span>\n              </div>\n              <div class={snapshotCardBody}>\n                <a href={`${urls.buildDiff(project.slug, build.id)}?snapshot=${snap.id}`}>\n                  <Thumbnail\n                    src={`/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${snap.id}/image`}\n                    alt={`${snap.storyTitle} / ${snap.storyName}`}\n                  />\n                </a>\n                <SectionTitle>\n                  {snap.storyTitle} <Meta as=\"span\">/ {snap.storyName}</Meta>\n                </SectionTitle>\n                <Meta as=\"div\">\n                  {snap.storyId}\n                  {snap.diffRatio !== null && snap.diffRatio !== undefined\n                    ? ` · diff ${(snap.diffRatio * 100).toFixed(2)}%`\n                    : \"\"}\n                  {snap.diffPixels === null || snap.diffPixels === undefined\n                    ? \"\"\n                    : ` · ${snap.diffPixels} px`}\n                </Meta>\n                <HStack>\n                  <Button\n                    variant=\"secondary\"\n                    size=\"sm\"\n                    href={`${urls.buildDiff(project.slug, build.id)}?snapshot=${snap.id}`}\n                  >\n                    Review\n                  </Button>\n                  <Button variant=\"ghost\" size=\"sm\" href={urls.short(build.id)}>\n                    View Storybook\n                  </Button>\n                  {canReview && (snap.status === \"new\" || snap.status === \"changed\") ? (\n                    <>\n                      <form\n                        method=\"post\"\n                        action={`/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${snap.id}/approve`}\n                        hx-post={`/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${snap.id}/approve`}\n                        hx-target=\"body\"\n                        data-toast={`Approved ${snap.storyName}`}\n                      >\n                        <Button variant=\"ghost\" size=\"sm\" type=\"submit\">\n                          Approve\n                        </Button>\n                      </form>\n                      <form\n                        method=\"post\"\n                        action={`/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${snap.id}/reject`}\n                        hx-post={`/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${snap.id}/reject`}\n                        hx-target=\"body\"\n                        data-toast={`Rejected ${snap.storyName}`}\n                        data-toast-tone=\"warning\"\n                      >\n                        <Button variant=\"ghost\" size=\"sm\" type=\"submit\">\n                          Reject\n                        </Button>\n                      </form>\n                    </>\n                  ) : null}\n                </HStack>\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n\n      <div class=\"mt-1\">\n        <Card>\n          <SectionTitle>Comments</SectionTitle>\n          {comments.length === 0 ? (\n            <Meta>No comments. Add one in the diff review page for a specific snapshot.</Meta>\n          ) : null}\n          <VStack>\n            {comments.map((comment): HtmlEscapedString | Promise<HtmlEscapedString> => (\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.snapshotId ? (\n                    <Badge tone=\"neutral\">\n                      {snapshots.find((snapshot) => snapshot.id === comment.snapshotId)\n                        ?.storyName ?? comment.snapshotId.slice(0, 6)}\n                    </Badge>\n                  ) : (\n                    <Badge tone=\"neutral\">build</Badge>\n                  )}\n                  {comment.resolved ? <Badge tone=\"success\">resolved</Badge> : null}\n                </div>\n                <p class={reviewCommentBody}>{comment.body}</p>\n              </div>\n            ))}\n          </VStack>\n\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 max-w-prose\"\n          >\n            <VStack>\n              <TextareaField\n                label=\"Add build comment\"\n                name=\"body\"\n                rows={3}\n                required\n                placeholder=\"Leave a comment on this build…\"\n              />\n              <div>\n                <Button variant=\"primary\" type=\"submit\">\n                  Comment\n                </Button>\n              </div>\n            </VStack>\n          </form>\n        </Card>\n      </div>\n    </DocumentLayout>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,162 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Button } from "../ui/buttons.mjs";
+import { Badge, statusTone } from "../ui/feedback.mjs";
+import { Kbd } from "../ui/kbd.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}`;
+}
+/** Approve (or "Approve anyway" when the 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" : ""}`;
+	return /* @__PURE__ */ jsx("form", {
+		method: "post",
+		action: url,
+		"hx-post": url,
+		"hx-target": "body",
+		"data-toast": `Approved ${selected.storyName}`,
+		children: drifted ? /* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			size: "sm",
+			type: "submit",
+			icon: "check",
+			title: "The baseline changed after this diff; replace it with this screenshot",
+			children: "Approve anyway"
+		}) : /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			size: "sm",
+			type: "submit",
+			icon: "check",
+			"data-approve": true,
+			title: "Approve (a)",
+			children: "Approve"
+		})
+	});
+}
+/** Approve/reject for a reviewable snapshot; both advance to the next open one. */
+function DecisionButtons(props) {
+	const { project, build, selected } = props;
+	const base = snapshotBase(project, build, selected);
+	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"
+			})
+		})]
+	});
+}
+function StepButton(props) {
+	const { target, project, build, direction } = props;
+	const label = direction === "prev" ? "Previous snapshot (k)" : "Next snapshot (j)";
+	const icon = direction === "prev" ? "chevron-left" : "chevron-right";
+	if (!target) return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "sm",
+		icon,
+		disabled: true,
+		"aria-label": label
+	});
+	const url = snapshotPageUrl(project, build, target.id);
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "sm",
+		icon,
+		href: url,
+		"aria-label": label,
+		title: label,
+		"hx-get": url,
+		"hx-target": "body",
+		"hx-push-url": "true",
+		...direction === "prev" ? { "data-snap-prev": true } : { "data-snap-next": true }
+	});
+}
+/** Previous/next stepping, position, shortcut hints, and the review decision. */
+function DiffActionBar(props) {
+	const { project, build, snapshots, selected, canReview, drifted } = props;
+	const around = neighbours(snapshots, selected.id);
+	const reviewable = selected.status === "new" || selected.status === "changed";
+	return /* @__PURE__ */ jsxs("div", {
+		class: actionBar,
+		role: "toolbar",
+		"aria-label": "Review actions",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				class: actionGroup,
+				children: [
+					/* @__PURE__ */ jsx(StepButton, {
+						target: around.prev,
+						project,
+						build,
+						direction: "prev"
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						class: actionPosition,
+						"aria-live": "polite",
+						children: [
+							around.position,
+							" / ",
+							around.total
+						]
+					}),
+					/* @__PURE__ */ jsx(StepButton, {
+						target: around.next,
+						project,
+						build,
+						direction: "next"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				class: actionHints,
+				children: [
+					/* @__PURE__ */ jsx(Kbd, { keys: ["j", "k"] }),
+					" navigate ",
+					/* @__PURE__ */ jsx(Kbd, { keys: "a" }),
+					" approve ",
+					/* @__PURE__ */ jsx(Kbd, { keys: "r" }),
+					" reject",
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						"data-shortcuts-open": true,
+						"aria-label": "Keyboard shortcuts (?)",
+						children: /* @__PURE__ */ jsx(Kbd, { keys: "?" })
+					})
+				]
+			}),
+			canReview && reviewable ? /* @__PURE__ */ jsx(DecisionButtons, {
+				project,
+				build,
+				selected,
+				drifted
+			}) : /* @__PURE__ */ jsx(Badge, {
+				tone: statusTone(selected.status),
+				icon: true,
+				children: selected.status
+			})
+		]
+	});
+}
+//#endregion
+export { DiffActionBar };
+
+//# sourceMappingURL=build-diff-actions.mjs.map

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

@@ -0,0 +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":";;;;;;;;;;AAkBA,SAAS,aAAa,SAAkB,OAAc,UAA4B;CAChF,OAAO,oBAAoB,QAAQ,KAAK,UAAU,MAAM,GAAG,aAAa,SAAS;AACnF;;AAKA,SAAS,YAAY,OAAsE;CACzF,MAAM,EAAE,SAAS,OAAO,UAAU,YAAY;CAC9C,MAAM,MAAM,GAAG,aAAa,SAAS,OAAO,QAAQ,EAAE,UAAU,UAAU,gBAAgB;CAC1F,OACE,oBAAC,QAAD;EACE,QAAO;EACP,QAAQ;EACR,WAAS;EACT,aAAU;EACV,cAAY,YAAY,SAAS;EAEhC,UAAA,UACC,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,MAAK;GACL,MAAK;GACL,OAAM;GACP,UAAA;EAEO,CAAA,IAER,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,MAAK;GACL,MAAK;GACL,gBAAA;GACA,OAAM;GACP,UAAA;EAEO,CAAA;CAEN,CAAA;AAEV;;AAGA,SAAS,gBAAgB,OAAsE;CAC7F,MAAM,EAAE,SAAS,OAAO,aAAa;CACrC,MAAM,OAAO,aAAa,SAAS,OAAO,QAAQ;CAClD,OACE,qBAAC,OAAD;EAAK,OAAO;EAAZ,UAAA,CACE,oBAAC,aAAD,EAAa,GAAI,MAAQ,CAAA,GACzB,oBAAC,QAAD;GACE,QAAO;GACP,QAAQ,GAAG,KAAK;GAChB,WAAS,GAAG,KAAK;GACjB,aAAU;GACV,cAAY,YAAY,SAAS;GACjC,mBAAgB;GAEhB,UAAA,oBAAC,QAAD;IAAQ,SAAQ;IAAS,MAAK;IAAK,MAAK;IAAS,MAAK;IAAI,eAAA;IAAY,OAAM;IAAa,UAAA;GAEjF,CAAA;EACJ,CAAA,CACH;;AAET;AAEA,SAAS,WAAW,OAK+B;CACjD,MAAM,EAAE,QAAQ,SAAS,OAAO,cAAc;CAC9C,MAAM,QAAQ,cAAc,SAAS,0BAA0B;CAC/D,MAAM,OAAO,cAAc,SAAS,iBAAiB;CACrD,IAAI,CAAC,QACH,OAAO,oBAAC,QAAD;EAAQ,SAAQ;EAAQ,MAAK;EAAW;EAAM,UAAA;EAAS,cAAY;CAAQ,CAAA;CAEpF,MAAM,MAAM,gBAAgB,SAAS,OAAO,OAAO,EAAE;CAErD,OACE,oBAAC,QAAD;EACE,SAAQ;EACR,MAAK;EACC;EACN,MAAM;EACN,cAAY;EACZ,OAAO;EACP,UAAQ;EACR,aAAU;EACV,eAAY;EACZ,GAZS,cAAc,SAAS,EAAE,kBAAkB,KAAK,IAAI,EAAE,kBAAkB,KAAK;CAavF,CAAA;AAEL;;AAGA,SAAgB,cACd,OACgD;CAChD,MAAM,EAAE,SAAS,OAAO,WAAW,UAAU,WAAW,YAAY;CACpE,MAAM,SAAS,WAAW,WAAW,SAAS,EAAE;CAChD,MAAM,aAAa,SAAS,WAAW,SAAS,SAAS,WAAW;CACpE,OACE,qBAAC,OAAD;EAAK,OAAO;EAAW,MAAK;EAAU,cAAW;EAAjD,UAAA;GACE,qBAAC,OAAD;IAAK,OAAO;IAAZ,UAAA;KACE,oBAAC,YAAD;MAAY,QAAQ,OAAO;MAAe;MAAgB;MAAO,WAAU;KAAQ,CAAA;KACnF,qBAAC,QAAD;MAAM,OAAO;MAAgB,aAAU;MAAvC,UAAA;OACG,OAAO;OAAS;OAAI,OAAO;MACxB;;KACN,oBAAC,YAAD;MAAY,QAAQ,OAAO;MAAe;MAAgB;MAAO,WAAU;KAAQ,CAAA;IAChF;;GACL,qBAAC,OAAD;IAAK,OAAO;IAAZ,UAAA;KACE,oBAAC,KAAD,EAAK,MAAM,CAAC,KAAK,GAAG,EAAI,CAAA;KAAC;KAAU,oBAAC,KAAD,EAAK,MAAK,IAAK,CAAA;KAAC;KAAS,oBAAC,KAAD,EAAK,MAAK,IAAK,CAAA;KAAC;KAC5E,oBAAC,QAAD;MAAQ,SAAQ;MAAQ,MAAK;MAAK,uBAAA;MAAoB,cAAW;MAC/D,UAAA,oBAAC,KAAD,EAAK,MAAK,IAAK,CAAA;KACT,CAAA;IACL;;GACJ,aAAa,aACZ,oBAAC,iBAAD;IAA0B;IAAgB;IAAiB;IAAmB;GAAU,CAAA,IAExF,oBAAC,OAAD;IAAO,MAAM,WAAW,SAAS,MAAM;IAAG,MAAA;IACvC,UAAA,SAAS;GACL,CAAA;EAEN;;AAET"}