@storyshelf/core 0.1.3 → 0.3.1

package/dist/pages/build-detail.mjs

@@ -3,11 +3,11 @@ import "node:url";
 import.meta.url;
 import { BuildModel } from "../models/build.mjs";
 import { ProjectModel } from "../models/project.mjs";
+import { SnapshotModel } from "../models/snapshot.mjs";
 import { getStore } from "../store.mjs";
 import { DocumentLayout } from "../ui/document.mjs";
-import { SnapshotModel } from "../models/snapshot.mjs";
 import { CommentModel } from "../models/comment.mjs";
-import { Badge, statusTone } from "../ui/components.mjs";
+import { Badge, statusTone } from "../ui/feedback.mjs";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
 //#region src/pages/build-detail.tsx
 /** Build overview page: snapshot grid, bulk actions, and build comments. */
@@ -81,7 +81,8 @@ async function renderBuildDetailPage(buildId) {
 							build.message ?? "No commit message",
 							" ",
 							build.authorName ? `· ${build.authorName}${build.authorEmail ? ` <${build.authorEmail}>` : ""}` : "",
-							" · ",
+							" ",
+							"· ",
 							new Date(build.createdAt).toLocaleString()
 						]
 					})] }), /* @__PURE__ */ jsxs("div", {
@@ -213,7 +214,11 @@ async function renderBuildDetailPage(buildId) {
 								style: "font-weight:650; font-size:.95rem; line-height:1.2;",
 								children: [snap.storyTitle, /* @__PURE__ */ jsxs("span", {
 									style: "color:var(--text-secondary); font-weight:400;",
-									children: [" / ", snap.storyName]
+									children: [
+										" ",
+										"/ ",
+										snap.storyName
+									]
 								})]
 							}),
 							/* @__PURE__ */ jsxs("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"build-detail.mjs","names":[],"sources":["../../src/pages/build-detail.tsx"],"sourcesContent":["import type { HtmlEscapedString } from \"hono/utils/html\";\n\nimport { BuildModel } from \"../models/build.ts\";\nimport { CommentModel } from \"../models/comment.ts\";\nimport { ProjectModel } from \"../models/project.ts\";\nimport { SnapshotModel } from \"../models/snapshot.ts\";\nimport { getStore } from \"../store.ts\";\nimport { DocumentLayout, type RenderedContent } from \"../ui/document.tsx\";\nimport { Badge, statusTone } from \"../ui/components.tsx\";\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 canReview = !getStore().authEnabled || Boolean(getStore().user);\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\n  return (\n    <DocumentLayout title={`Build ${build.gitBranch}`} nav={{ active: \"builds\", projectSlug: project.slug, projectName: project.name }}>\n      <div class=\"page-header\">\n        <nav class=\"breadcrumbs\" aria-label=\"Breadcrumb\">\n          <ol>\n            <li>\n              <a href=\"/projects\">Projects</a>\n            </li>\n            <li>\n              <a href={`/projects/${project.slug}/builds`}>{project.name}</a>\n            </li>\n            <li>\n              <span aria-current=\"page\">\n                {build.gitBranch} · {build.gitSha.slice(0, 7)}\n              </span>\n            </li>\n          </ol>\n        </nav>\n        <div class=\"page-header__row\">\n          <div>\n            <h1 class=\"page-header__title\">\n              {build.gitBranch} <span style=\"color:var(--text-secondary); font-weight:400;\">· {build.gitSha.slice(0, 7)}</span> <Badge tone={statusTone(build.status)}>{build.status}</Badge>\n            </h1>\n            <p class=\"page-header__desc\">\n              {build.message ?? \"No commit message\"} {build.authorName ? `· ${build.authorName}${build.authorEmail ? ` <${build.authorEmail}>` : \"\"}` : \"\"} · {new Date(build.createdAt).toLocaleString()}\n            </p>\n          </div>\n          <div class=\"page-header__actions\">\n            <a class=\"btn btn--primary\" href={`/projects/${project.slug}/builds/${build.id}/diff`}>\n              Review diffs\n            </a>\n            <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\">\n              <button class=\"btn btn--secondary\" type=\"submit\">\n                Retry capture\n              </button>\n            </form>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"grid grid--3\" style=\"margin-bottom:1rem;\">\n        <div class=\"card card--padded stat\">\n          <div class=\"stat__value\">{snapshots.length}</div>\n          <div class=\"stat__label\">Snapshots</div>\n        </div>\n        <div class=\"card card--padded stat\">\n          <div class=\"stat__value\" style=\"color: var(--status-new);\">\n            {build.changedCount}\n          </div>\n          <div class=\"stat__label\">Changed / new</div>\n        </div>\n        <div class=\"card card--padded stat\">\n          <div class=\"stat__value\" style=\"color: var(--status-approved);\">\n            {build.approvedCount}\n          </div>\n          <div class=\"stat__label\">Approved / unchanged</div>\n        </div>\n      </div>\n\n      {canReview && (build.status === \"reviewing\" || build.status === \"comparing\") ? (\n        <div class=\"card card--padded\" style=\"display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem;\">\n          <span class=\"field__hint\">Bulk actions:</span>\n          <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\">\n            <button class=\"btn btn--primary\" type=\"submit\">\n              Approve all\n            </button>\n          </form>\n          <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\">\n            <button class=\"btn btn--danger\" type=\"submit\">\n              Reject all\n            </button>\n          </form>\n          <span class=\"field__hint\">Or review individually in the diff view.</span>\n        </div>\n      ) : null}\n\n      {snapshots.length === 0 ? (\n        <div class=\"empty\">\n          <h2 class=\"empty__title\">No snapshots yet</h2>\n          <p class=\"empty__desc\">Capture is pending or failed. Try retrying capture.</p>\n        </div>\n      ) : (\n        <div class=\"snapshot-grid\">\n          {snapshots.map(\n            (snap): HtmlEscapedString | Promise<HtmlEscapedString> => (\n            <div key={snap.id} class=\"snapshot-card\">\n              <div class=\"snapshot-card__head\">\n                <Badge tone={statusTone(snap.status)}>{snap.status}</Badge>\n                <span class=\"snapshot-card__meta\">\n                  {snap.viewportName} · {snap.viewportWidth}×{snap.viewportHeight}\n                </span>\n              </div>\n              <div class=\"snapshot-card__body\">\n                <div style=\"font-weight:650; font-size:.95rem; line-height:1.2;\">\n                  {snap.storyTitle}\n                  <span style=\"color:var(--text-secondary); font-weight:400;\"> / {snap.storyName}</span>\n                </div>\n                <div class=\"field__hint\" style=\"font-size:.8rem;\">\n                  {snap.storyId}\n                  {snap.diffRatio !== null && snap.diffRatio !== undefined ? ` · diff ${(snap.diffRatio * 100).toFixed(2)}%` : \"\"}\n                  {snap.diffPixels === null ? \"\" : ` · ${snap.diffPixels} px`}\n                </div>\n                <div style=\"display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.2rem;\">\n                  <a class=\"btn btn--secondary\" href={`/projects/${project.slug}/builds/${build.id}/diff?snapshot=${snap.id}`}>\n                    Review\n                  </a>\n                  {canReview && (snap.status === \"new\" || snap.status === \"changed\") ? (\n                    <>\n                      <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\">\n                        <button class=\"btn btn--ghost\" type=\"submit\">\n                          Approve\n                        </button>\n                      </form>\n                      <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\">\n                        <button class=\"btn btn--ghost\" type=\"submit\">\n                          Reject\n                        </button>\n                      </form>\n                    </>\n                  ) : null}\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n\n      <div class=\"card card--padded\" style=\"margin-top:1rem;\">\n        <h2 style=\"margin:0 0 .5rem;\">Comments</h2>\n        {comments.length === 0 ? <p class=\"field__hint\">No comments. Add one in the diff review page for a specific snapshot.</p> : null}\n        <div style=\"display:grid; gap:.6rem;\">\n          {comments.map(\n            (comment): HtmlEscapedString | Promise<HtmlEscapedString> => (\n            <div key={comment.id} class=\"comment\">\n              <div class=\"comment__head\">\n                <strong>{comment.userId}</strong>\n                <span>· {new Date(comment.createdAt).toLocaleString()}</span>\n                {comment.snapshotId ? <Badge tone=\"neutral\">{snapshots.find((snapshot) => snapshot.id === comment.snapshotId)?.storyName ?? comment.snapshotId.slice(0, 6)}</Badge> : <Badge tone=\"neutral\">build</Badge>}\n                {comment.resolved ? <Badge tone=\"success\">resolved</Badge> : null}\n              </div>\n              <p class=\"comment__body\">{comment.body}</p>\n            </div>\n          ))}\n        </div>\n\n        <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\" style=\"margin-top:1rem; display:grid; gap:.5rem; max-width:640px;\">\n          <label class=\"field__label\" for=\"comment-body\">\n            Add build comment\n          </label>\n          <textarea class=\"field__input field__input--textarea\" id=\"comment-body\" name=\"body\" rows={3} required placeholder=\"Leave a comment on this build…\" />\n          <div>\n            <button class=\"btn btn--primary\" type=\"submit\">\n              Comment\n            </button>\n          </div>\n        </form>\n      </div>\n    </DocumentLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"build-detail.mjs","names":[],"sources":["../../src/pages/build-detail.tsx"],"sourcesContent":["import type { HtmlEscapedString } from \"hono/utils/html\";\nimport { BuildModel } from \"../models/build.ts\";\nimport { CommentModel } from \"../models/comment.ts\";\nimport { ProjectModel } from \"../models/project.ts\";\nimport { SnapshotModel } from \"../models/snapshot.ts\";\nimport { getStore } from \"../store.ts\";\nimport { Badge, statusTone } from \"../ui/components.tsx\";\nimport { DocumentLayout, type RenderedContent } from \"../ui/document.tsx\";\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 canReview = !getStore().authEnabled || Boolean(getStore().user);\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\n  return (\n    <DocumentLayout\n      title={`Build ${build.gitBranch}`}\n      nav={{ active: \"builds\", projectSlug: project.slug, projectName: project.name }}\n    >\n      <div class=\"page-header\">\n        <nav class=\"breadcrumbs\" aria-label=\"Breadcrumb\">\n          <ol>\n            <li>\n              <a href=\"/projects\">Projects</a>\n            </li>\n            <li>\n              <a href={`/projects/${project.slug}/builds`}>{project.name}</a>\n            </li>\n            <li>\n              <span aria-current=\"page\">\n                {build.gitBranch} · {build.gitSha.slice(0, 7)}\n              </span>\n            </li>\n          </ol>\n        </nav>\n        <div class=\"page-header__row\">\n          <div>\n            <h1 class=\"page-header__title\">\n              {build.gitBranch}{\" \"}\n              <span style=\"color:var(--text-secondary); font-weight:400;\">\n                · {build.gitSha.slice(0, 7)}\n              </span>{\" \"}\n              <Badge tone={statusTone(build.status)}>{build.status}</Badge>\n            </h1>\n            <p class=\"page-header__desc\">\n              {build.message ?? \"No commit message\"}{\" \"}\n              {build.authorName\n                ? `· ${build.authorName}${build.authorEmail ? ` <${build.authorEmail}>` : \"\"}`\n                : \"\"}{\" \"}\n              · {new Date(build.createdAt).toLocaleString()}\n            </p>\n          </div>\n          <div class=\"page-header__actions\">\n            <a class=\"btn btn--primary\" href={`/projects/${project.slug}/builds/${build.id}/diff`}>\n              Review diffs\n            </a>\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 class=\"btn btn--secondary\" type=\"submit\">\n                Retry capture\n              </button>\n            </form>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"grid grid--3\" style=\"margin-bottom:1rem;\">\n        <div class=\"card card--padded stat\">\n          <div class=\"stat__value\">{snapshots.length}</div>\n          <div class=\"stat__label\">Snapshots</div>\n        </div>\n        <div class=\"card card--padded stat\">\n          <div class=\"stat__value\" style=\"color: var(--status-new);\">\n            {build.changedCount}\n          </div>\n          <div class=\"stat__label\">Changed / new</div>\n        </div>\n        <div class=\"card card--padded stat\">\n          <div class=\"stat__value\" style=\"color: var(--status-approved);\">\n            {build.approvedCount}\n          </div>\n          <div class=\"stat__label\">Approved / unchanged</div>\n        </div>\n      </div>\n\n      {canReview && (build.status === \"reviewing\" || build.status === \"comparing\") ? (\n        <div\n          class=\"card card--padded\"\n          style=\"display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem;\"\n        >\n          <span class=\"field__hint\">Bulk actions:</span>\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          >\n            <button class=\"btn btn--primary\" 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          >\n            <button class=\"btn btn--danger\" type=\"submit\">\n              Reject all\n            </button>\n          </form>\n          <span class=\"field__hint\">Or review individually in the diff view.</span>\n        </div>\n      ) : null}\n\n      {snapshots.length === 0 ? (\n        <div class=\"empty\">\n          <h2 class=\"empty__title\">No snapshots yet</h2>\n          <p class=\"empty__desc\">Capture is pending or failed. Try retrying capture.</p>\n        </div>\n      ) : (\n        <div class=\"snapshot-grid\">\n          {snapshots.map((snap): HtmlEscapedString | Promise<HtmlEscapedString> => (\n            <div key={snap.id} class=\"snapshot-card\">\n              <div class=\"snapshot-card__head\">\n                <Badge tone={statusTone(snap.status)}>{snap.status}</Badge>\n                <span class=\"snapshot-card__meta\">\n                  {snap.viewportName} · {snap.viewportWidth}×{snap.viewportHeight}\n                </span>\n              </div>\n              <div class=\"snapshot-card__body\">\n                <div style=\"font-weight:650; font-size:.95rem; line-height:1.2;\">\n                  {snap.storyTitle}\n                  <span style=\"color:var(--text-secondary); font-weight:400;\">\n                    {\" \"}\n                    / {snap.storyName}\n                  </span>\n                </div>\n                <div class=\"field__hint\" style=\"font-size:.8rem;\">\n                  {snap.storyId}\n                  {snap.diffRatio !== null && snap.diffRatio !== undefined\n                    ? ` · diff ${(snap.diffRatio * 100).toFixed(2)}%`\n                    : \"\"}\n                  {snap.diffPixels === null ? \"\" : ` · ${snap.diffPixels} px`}\n                </div>\n                <div style=\"display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.2rem;\">\n                  <a\n                    class=\"btn btn--secondary\"\n                    href={`/projects/${project.slug}/builds/${build.id}/diff?snapshot=${snap.id}`}\n                  >\n                    Review\n                  </a>\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                      >\n                        <button class=\"btn btn--ghost\" 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                      >\n                        <button class=\"btn btn--ghost\" type=\"submit\">\n                          Reject\n                        </button>\n                      </form>\n                    </>\n                  ) : null}\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n\n      <div class=\"card card--padded\" style=\"margin-top:1rem;\">\n        <h2 style=\"margin:0 0 .5rem;\">Comments</h2>\n        {comments.length === 0 ? (\n          <p class=\"field__hint\">\n            No comments. Add one in the diff review page for a specific snapshot.\n          </p>\n        ) : null}\n        <div style=\"display:grid; gap:.6rem;\">\n          {comments.map((comment): HtmlEscapedString | Promise<HtmlEscapedString> => (\n            <div key={comment.id} class=\"comment\">\n              <div class=\"comment__head\">\n                <strong>{comment.userId}</strong>\n                <span>· {new Date(comment.createdAt).toLocaleString()}</span>\n                {comment.snapshotId ? (\n                  <Badge tone=\"neutral\">\n                    {snapshots.find((snapshot) => snapshot.id === comment.snapshotId)?.storyName ??\n                      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=\"comment__body\">{comment.body}</p>\n            </div>\n          ))}\n        </div>\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          style=\"margin-top:1rem; display:grid; gap:.5rem; max-width:640px;\"\n        >\n          <label class=\"field__label\" for=\"comment-body\">\n            Add build comment\n          </label>\n          <textarea\n            class=\"field__input field__input--textarea\"\n            id=\"comment-body\"\n            name=\"body\"\n            rows={3}\n            required\n            placeholder=\"Leave a comment on this build…\"\n          />\n          <div>\n            <button class=\"btn btn--primary\" type=\"submit\">\n              Comment\n            </button>\n          </div>\n        </form>\n      </div>\n    </DocumentLayout>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,113 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Badge } from "../ui/feedback.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;
+	return /* @__PURE__ */ jsxs("div", {
+		class: "comment",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				class: "comment__head",
+				children: [
+					/* @__PURE__ */ jsx("strong", { children: comment.userId }),
+					/* @__PURE__ */ jsxs("span", { children: ["· ", new Date(comment.createdAt).toLocaleString()] }),
+					comment.resolved ? /* @__PURE__ */ jsx(Badge, {
+						tone: "success",
+						children: "resolved"
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				class: "comment__body",
+				children: comment.body
+			}),
+			!comment.resolved && canReview ? /* @__PURE__ */ jsx("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`,
+				"hx-target": "body",
+				style: "margin-top:.5rem;",
+				children: /* @__PURE__ */ jsx("button", {
+					class: "btn btn--ghost",
+					type: "submit",
+					children: "Mark resolved"
+				})
+			}) : null
+		]
+	}, comment.id);
+}
+/** Reply form scoped to the selected snapshot. */
+function CommentForm(props) {
+	const { project, build, selectedId } = props;
+	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`,
+		"hx-target": "body",
+		style: "margin-top:1rem; display:grid; gap:.5rem;",
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: "snapshotId",
+				value: selectedId
+			}),
+			/* @__PURE__ */ jsx("label", {
+				class: "field__label",
+				for: "comment-body",
+				children: "Add comment"
+			}),
+			/* @__PURE__ */ jsx("textarea", {
+				class: "field__input field__input--textarea",
+				id: "comment-body",
+				name: "body",
+				rows: 3,
+				required: true,
+				placeholder: "Leave feedback on this snapshot…"
+			}),
+			/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("button", {
+				class: "btn btn--primary",
+				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);
+	return /* @__PURE__ */ jsxs("div", {
+		class: "card card--padded",
+		children: [
+			/* @__PURE__ */ jsx("h3", {
+				style: "margin:0 0 .5rem;",
+				children: "Comments"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: "display:grid; gap:.75rem;",
+				children: [visible.map((comment) => /* @__PURE__ */ jsx(CommentCard, {
+					project,
+					build,
+					comment,
+					canReview
+				}, comment.id)), visible.length === 0 ? /* @__PURE__ */ jsx("p", {
+					class: "field__hint",
+					children: "No comments on this snapshot."
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx(CommentForm, {
+				project,
+				build,
+				selectedId
+			})
+		]
+	});
+}
+//#endregion
+export { DiffComments };
+
+//# sourceMappingURL=build-diff-comments.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"build-diff-comments.mjs","names":[],"sources":["../../src/pages/build-diff-comments.tsx"],"sourcesContent":["import type { HtmlEscapedString } from \"hono/utils/html\";\nimport type { Build } from \"../schema/build.ts\";\nimport type { Comment } from \"../schema/comment.ts\";\nimport type { Project } from \"../schema/project.ts\";\nimport { Badge } from \"../ui/components.tsx\";\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=\"comment\">\n      <div class=\"comment__head\">\n        <strong>{comment.userId}</strong>\n        <span>· {new Date(comment.createdAt).toLocaleString()}</span>\n        {comment.resolved ? <Badge tone=\"success\">resolved</Badge> : null}\n      </div>\n      <p class=\"comment__body\">{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          style=\"margin-top:.5rem;\"\n        >\n          <button class=\"btn btn--ghost\" 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      style=\"margin-top:1rem; display:grid; gap:.5rem;\"\n    >\n      <input type=\"hidden\" name=\"snapshotId\" value={selectedId} />\n      <label class=\"field__label\" for=\"comment-body\">\n        Add comment\n      </label>\n      <textarea\n        class=\"field__input field__input--textarea\"\n        id=\"comment-body\"\n        name=\"body\"\n        rows={3}\n        required\n        placeholder=\"Leave feedback on this snapshot…\"\n      />\n      <div>\n        <button class=\"btn btn--primary\" type=\"submit\">\n          Comment\n        </button>\n      </div>\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    <div class=\"card card--padded\">\n      <h3 style=\"margin:0 0 .5rem;\">Comments</h3>\n      <div style=\"display:grid; gap:.75rem;\">\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 ? <p class=\"field__hint\">No comments on this snapshot.</p> : null}\n      </div>\n\n      <CommentForm project={project} build={build} selectedId={selectedId} />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAyBA,SAAS,YAAY,OAAyE;CAC5F,MAAM,EAAE,SAAS,OAAO,SAAS,cAAc;CAC/C,OACE,qBAAC,OAAD;EAAsB,OAAM;EAA5B,UAAA;GACE,qBAAC,OAAD;IAAK,OAAM;IAAX,UAAA;KACE,oBAAC,UAAD,EAAA,UAAS,QAAQ,OAAe,CAAA;KAChC,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,OAAM;IAAiB,UAAA,QAAQ;GAAQ,CAAA;GACzC,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,OAAM;IAEN,UAAA,oBAAC,UAAD;KAAQ,OAAM;KAAiB,MAAK;KAAS,UAAA;IAErC,CAAA;GACJ,CAAA,IACJ;EACD;CApBK,GAAA,QAAQ,EAoBb;AAET;;AASA,SAAS,YAAY,OAAyE;CAC5F,MAAM,EAAE,SAAS,OAAO,eAAe;CACvC,OACE,qBAAC,QAAD;EACE,QAAO;EACP,QAAQ,oBAAoB,QAAQ,KAAK,UAAU,MAAM,GAAG;EAC5D,WAAS,oBAAoB,QAAQ,KAAK,UAAU,MAAM,GAAG;EAC7D,aAAU;EACV,OAAM;EALR,UAAA;GAOE,oBAAC,SAAD;IAAO,MAAK;IAAS,MAAK;IAAa,OAAO;GAAa,CAAA;GAC3D,oBAAC,SAAD;IAAO,OAAM;IAAe,KAAI;IAAe,UAAA;GAExC,CAAA;GACP,oBAAC,YAAD;IACE,OAAM;IACN,IAAG;IACH,MAAK;IACL,MAAM;IACN,UAAA;IACA,aAAY;GACb,CAAA;GACD,oBAAC,OAAD,EAAA,UACE,oBAAC,UAAD;IAAQ,OAAM;IAAmB,MAAK;IAAS,UAAA;GAEvC,CAAA,EACL,CAAA;EACD;;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,OAAD;EAAK,OAAM;EAAX,UAAA;GACE,oBAAC,MAAD;IAAI,OAAM;IAAoB,UAAA;GAAY,CAAA;GAC1C,qBAAC,OAAD;IAAK,OAAM;IAAX,UAAA,CACG,QAAQ,KAAK,YACZ,oBAAC,aAAD;KAEW;KACF;KACE;KACE;IACZ,GALM,QAAQ,EAKd,CACF,GACA,QAAQ,WAAW,IAAI,oBAAC,KAAD;KAAG,OAAM;KAAc,UAAA;IAAgC,CAAA,IAAI,IAChF;;GAEL,oBAAC,aAAD;IAAsB;IAAgB;IAAmB;GAAa,CAAA;EACnE;;AAET"}

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

@@ -0,0 +1,163 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Badge, statusTone } from "../ui/feedback.mjs";
+import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
+//#region src/pages/build-diff-header.tsx
+/** Approve-all / reject-all bulk review actions. */
+function ReviewActions(props) {
+	const { project, build, pendingCount } = props;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__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",
+		children: /* @__PURE__ */ jsxs("button", {
+			class: "btn btn--primary",
+			type: "submit",
+			children: [
+				"Approve all (",
+				pendingCount,
+				")"
+			]
+		})
+	}), /* @__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",
+		children: /* @__PURE__ */ jsx("button", {
+			class: "btn btn--danger",
+			type: "submit",
+			children: "Reject all"
+		})
+	})] });
+}
+/** Snapshot/pending/approved counters. */
+function DiffStats(props) {
+	const { snapshots, pendingCount, approvedCount } = props;
+	return /* @__PURE__ */ jsx("div", {
+		class: "card card--padded",
+		style: "margin-bottom:1rem;",
+		children: /* @__PURE__ */ jsxs("div", {
+			class: "grid grid--3",
+			style: "text-align:center;",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					class: "stat",
+					children: [/* @__PURE__ */ jsx("div", {
+						class: "stat__value",
+						children: snapshots.length
+					}), /* @__PURE__ */ jsx("div", {
+						class: "stat__label",
+						children: "Snapshots"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					class: "stat",
+					children: [/* @__PURE__ */ jsx("div", {
+						class: "stat__value",
+						style: "color: var(--status-new);",
+						children: pendingCount
+					}), /* @__PURE__ */ jsx("div", {
+						class: "stat__label",
+						children: "Needs review"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					class: "stat",
+					children: [/* @__PURE__ */ jsx("div", {
+						class: "stat__value",
+						style: "color: var(--status-approved);",
+						children: approvedCount
+					}), /* @__PURE__ */ jsx("div", {
+						class: "stat__label",
+						children: "Approved"
+					})]
+				})
+			]
+		})
+	});
+}
+/** Projects → project → build breadcrumb trail. */
+function DiffBreadcrumbs(props) {
+	const { project, build } = props;
+	return /* @__PURE__ */ jsx("nav", {
+		class: "breadcrumbs",
+		"aria-label": "Breadcrumb",
+		children: /* @__PURE__ */ jsxs("ol", { children: [
+			/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+				href: "/projects",
+				children: "Projects"
+			}) }),
+			/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+				href: `/projects/${project.slug}/builds`,
+				children: project.name
+			}) }),
+			/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
+				href: `/projects/${project.slug}/builds/${build.id}`,
+				children: ["Build ", build.gitBranch]
+			}) }),
+			/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("span", {
+				"aria-current": "page",
+				children: "Review"
+			}) })
+		] })
+	});
+}
+/** Page header with breadcrumbs, review actions, and snapshot stats. */
+function DiffHeader(props) {
+	const { project, build, snapshots, pendingCount, canReview } = props;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		class: "page-header",
+		children: [/* @__PURE__ */ jsx(DiffBreadcrumbs, {
+			project,
+			build
+		}), /* @__PURE__ */ jsxs("div", {
+			class: "page-header__row",
+			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("h1", {
+				class: "page-header__title",
+				children: [
+					build.gitBranch,
+					" ",
+					/* @__PURE__ */ jsxs("span", {
+						style: "color:var(--text-secondary); font-weight:400;",
+						children: ["· ", build.gitSha.slice(0, 7)]
+					})
+				]
+			}), /* @__PURE__ */ jsxs("p", {
+				class: "page-header__desc",
+				children: [
+					build.message ?? "No message",
+					" ",
+					build.authorName ? `· ${build.authorName}` : "",
+					" ·",
+					" ",
+					/* @__PURE__ */ jsx(Badge, {
+						tone: statusTone(build.status),
+						children: build.status
+					})
+				]
+			})] }), /* @__PURE__ */ jsxs("div", {
+				class: "page-header__actions",
+				children: [/* @__PURE__ */ jsx("a", {
+					class: "btn btn--secondary",
+					href: `/projects/${project.slug}/builds/${build.id}`,
+					children: "Build overview"
+				}), canReview && pendingCount > 0 ? /* @__PURE__ */ jsx(ReviewActions, {
+					project,
+					build,
+					pendingCount
+				}) : null]
+			})]
+		})]
+	}), /* @__PURE__ */ jsx(DiffStats, {
+		snapshots,
+		pendingCount,
+		approvedCount: build.approvedCount
+	})] });
+}
+//#endregion
+export { DiffHeader };
+
+//# sourceMappingURL=build-diff-header.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"build-diff-header.mjs","names":[],"sources":["../../src/pages/build-diff-header.tsx"],"sourcesContent":["import type { HtmlEscapedString } from \"hono/utils/html\";\nimport type { Build } from \"../schema/build.ts\";\nimport type { Project } from \"../schema/project.ts\";\nimport type { Snapshot } from \"../schema/snapshot.ts\";\nimport { Badge, statusTone } from \"../ui/components.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Header + stats 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 ReviewActionsProps {\n  project: Project;\n  build: Build;\n  pendingCount: number;\n}\n\n/** Approve-all / reject-all bulk review actions. */\nfunction ReviewActions(props: ReviewActionsProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, pendingCount } = props;\n  return (\n    <>\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      >\n        <button class=\"btn btn--primary\" type=\"submit\">\n          Approve all ({pendingCount})\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      >\n        <button class=\"btn btn--danger\" type=\"submit\">\n          Reject all\n        </button>\n      </form>\n    </>\n  );\n}\n\ninterface DiffStatsProps {\n  snapshots: Snapshot[];\n  pendingCount: number;\n  approvedCount: number;\n}\n\n/** Snapshot/pending/approved counters. */\nfunction DiffStats(props: DiffStatsProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { snapshots, pendingCount, approvedCount } = props;\n  return (\n    <div class=\"card card--padded\" style=\"margin-bottom:1rem;\">\n      <div class=\"grid grid--3\" style=\"text-align:center;\">\n        <div class=\"stat\">\n          <div class=\"stat__value\">{snapshots.length}</div>\n          <div class=\"stat__label\">Snapshots</div>\n        </div>\n        <div class=\"stat\">\n          <div class=\"stat__value\" style=\"color: var(--status-new);\">\n            {pendingCount}\n          </div>\n          <div class=\"stat__label\">Needs review</div>\n        </div>\n        <div class=\"stat\">\n          <div class=\"stat__value\" style=\"color: var(--status-approved);\">\n            {approvedCount}\n          </div>\n          <div class=\"stat__label\">Approved</div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\ninterface DiffBreadcrumbsProps {\n  project: Project;\n  build: Build;\n}\n\n/** Projects → project → build breadcrumb trail. */\nfunction DiffBreadcrumbs(\n  props: DiffBreadcrumbsProps,\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build } = props;\n  return (\n    <nav class=\"breadcrumbs\" aria-label=\"Breadcrumb\">\n      <ol>\n        <li>\n          <a href=\"/projects\">Projects</a>\n        </li>\n        <li>\n          <a href={`/projects/${project.slug}/builds`}>{project.name}</a>\n        </li>\n        <li>\n          <a href={`/projects/${project.slug}/builds/${build.id}`}>Build {build.gitBranch}</a>\n        </li>\n        <li>\n          <span aria-current=\"page\">Review</span>\n        </li>\n      </ol>\n    </nav>\n  );\n}\n\n/** Page header with breadcrumbs, review actions, and snapshot stats. */\nexport function DiffHeader(props: DiffHeaderProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, snapshots, pendingCount, canReview } = props;\n  return (\n    <>\n      <div class=\"page-header\">\n        <DiffBreadcrumbs project={project} build={build} />\n        <div class=\"page-header__row\">\n          <div>\n            <h1 class=\"page-header__title\">\n              {build.gitBranch}{\" \"}\n              <span style=\"color:var(--text-secondary); font-weight:400;\">\n                · {build.gitSha.slice(0, 7)}\n              </span>\n            </h1>\n            <p class=\"page-header__desc\">\n              {build.message ?? \"No message\"} {build.authorName ? `· ${build.authorName}` : \"\"} ·{\" \"}\n              <Badge tone={statusTone(build.status)}>{build.status}</Badge>\n            </p>\n          </div>\n          <div class=\"page-header__actions\">\n            <a class=\"btn btn--secondary\" href={`/projects/${project.slug}/builds/${build.id}`}>\n              Build overview\n            </a>\n            {canReview && pendingCount > 0 ? (\n              <ReviewActions project={project} build={build} pendingCount={pendingCount} />\n            ) : null}\n          </div>\n        </div>\n      </div>\n      <DiffStats\n        snapshots={snapshots}\n        pendingCount={pendingCount}\n        approvedCount={build.approvedCount}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;;;AAwBA,SAAS,cAAc,OAA2E;CAChG,MAAM,EAAE,SAAS,OAAO,iBAAiB;CACzC,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EACE,QAAO;EACP,QAAQ,oBAAoB,QAAQ,KAAK,UAAU,MAAM,GAAG;EAC5D,WAAS,oBAAoB,QAAQ,KAAK,UAAU,MAAM,GAAG;EAC7D,aAAU;EAEV,UAAA,qBAAC,UAAD;GAAQ,OAAM;GAAmB,MAAK;GAAtC,UAAA;IAA+C;IAC/B;IAAa;GACrB;;CACJ,CAAA,GACN,oBAAC,QAAD;EACE,QAAO;EACP,QAAQ,oBAAoB,QAAQ,KAAK,UAAU,MAAM,GAAG;EAC5D,WAAS,oBAAoB,QAAQ,KAAK,UAAU,MAAM,GAAG;EAC7D,aAAU;EAEV,UAAA,oBAAC,UAAD;GAAQ,OAAM;GAAkB,MAAK;GAAS,UAAA;EAEtC,CAAA;CACJ,CAAA,CACN,EAAA,CAAA;AAEN;;AASA,SAAS,UAAU,OAAuE;CACxF,MAAM,EAAE,WAAW,cAAc,kBAAkB;CACnD,OACE,oBAAC,OAAD;EAAK,OAAM;EAAoB,OAAM;EACnC,UAAA,qBAAC,OAAD;GAAK,OAAM;GAAe,OAAM;GAAhC,UAAA;IACE,qBAAC,OAAD;KAAK,OAAM;KAAX,UAAA,CACE,oBAAC,OAAD;MAAK,OAAM;MAAe,UAAA,UAAU;KAAY,CAAA,GAChD,oBAAC,OAAD;MAAK,OAAM;MAAc,UAAA;KAAc,CAAA,CACpC;;IACL,qBAAC,OAAD;KAAK,OAAM;KAAX,UAAA,CACE,oBAAC,OAAD;MAAK,OAAM;MAAc,OAAM;MAC5B,UAAA;KACE,CAAA,GACL,oBAAC,OAAD;MAAK,OAAM;MAAc,UAAA;KAAiB,CAAA,CACvC;;IACL,qBAAC,OAAD;KAAK,OAAM;KAAX,UAAA,CACE,oBAAC,OAAD;MAAK,OAAM;MAAc,OAAM;MAC5B,UAAA;KACE,CAAA,GACL,oBAAC,OAAD;MAAK,OAAM;MAAc,UAAA;KAAa,CAAA,CACnC;;GACF;;CACF,CAAA;AAET;;AAQA,SAAS,gBACP,OACgD;CAChD,MAAM,EAAE,SAAS,UAAU;CAC3B,OACE,oBAAC,OAAD;EAAK,OAAM;EAAc,cAAW;EAClC,UAAA,qBAAC,MAAD,EAAA,UAAA;GACE,oBAAC,MAAD,EAAA,UACE,oBAAC,KAAD;IAAG,MAAK;IAAY,UAAA;GAAW,CAAA,EAC7B,CAAA;GACJ,oBAAC,MAAD,EAAA,UACE,oBAAC,KAAD;IAAG,MAAM,aAAa,QAAQ,KAAK;IAAW,UAAA,QAAQ;GAAQ,CAAA,EAC5D,CAAA;GACJ,oBAAC,MAAD,EAAA,UACE,qBAAC,KAAD;IAAG,MAAM,aAAa,QAAQ,KAAK,UAAU,MAAM;IAAnD,UAAA,CAAyD,UAAO,MAAM,SAAa;GACjF,CAAA,EAAA,CAAA;GACJ,oBAAC,MAAD,EAAA,UACE,oBAAC,QAAD;IAAM,gBAAa;IAAO,UAAA;GAAY,CAAA,EACpC,CAAA;EACF,EAAA,CAAA;CACD,CAAA;AAET;;AAGA,SAAgB,WAAW,OAAwE;CACjG,MAAM,EAAE,SAAS,OAAO,WAAW,cAAc,cAAc;CAC/D,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;EAAK,OAAM;EAAX,UAAA,CACE,oBAAC,iBAAD;GAA0B;GAAgB;EAAQ,CAAA,GAClD,qBAAC,OAAD;GAAK,OAAM;GAAX,UAAA,CACE,qBAAC,OAAD,EAAA,UAAA,CACE,qBAAC,MAAD;IAAI,OAAM;IAAV,UAAA;KACG,MAAM;KAAW;KAClB,qBAAC,QAAD;MAAM,OAAM;MAAZ,UAAA,CAA4D,MACvD,MAAM,OAAO,MAAM,GAAG,CAAC,CACtB;;IACJ;GACJ,CAAA,GAAA,qBAAC,KAAD;IAAG,OAAM;IAAT,UAAA;KACG,MAAM,WAAW;KAAa;KAAE,MAAM,aAAa,KAAK,MAAM,eAAe;KAAG;KAAG;KACpF,oBAAC,OAAD;MAAO,MAAM,WAAW,MAAM,MAAM;MAAI,UAAA,MAAM;KAAc,CAAA;IAC3D;GACA,CAAA,CAAA,EAAA,CAAA,GACL,qBAAC,OAAD;IAAK,OAAM;IAAX,UAAA,CACE,oBAAC,KAAD;KAAG,OAAM;KAAqB,MAAM,aAAa,QAAQ,KAAK,UAAU,MAAM;KAAM,UAAA;IAEjF,CAAA,GACF,aAAa,eAAe,IAC3B,oBAAC,eAAD;KAAwB;KAAgB;KAAqB;IAAe,CAAA,IAC1E,IACD;GACF,CAAA,CAAA;EACF,CAAA,CAAA;CACL,CAAA,GAAA,oBAAC,WAAD;EACa;EACG;EACd,eAAe,MAAM;CACtB,CAAA,CACD,EAAA,CAAA;AAEN"}

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

@@ -0,0 +1,66 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Badge, statusTone } from "../ui/feedback.mjs";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+//#region src/pages/build-diff-nav.tsx
+/** Left-rail snapshot list with per-story status and diff ratios. */
+function DiffNav(props) {
+	const { project, build, snapshots, selectedId } = props;
+	return /* @__PURE__ */ jsx("div", {
+		style: "flex: 0 0 320px; max-width: 36%; min-width: 260px;",
+		children: /* @__PURE__ */ jsxs("div", {
+			class: "card",
+			children: [/* @__PURE__ */ jsxs("div", {
+				style: "padding:.6rem .75rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;",
+				children: [/* @__PURE__ */ jsx("strong", { children: "Snapshots" }), /* @__PURE__ */ jsxs("span", {
+					class: "field__hint",
+					children: [snapshots.length, " total"]
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				"data-diff-nav": true,
+				"data-current": selectedId,
+				style: "max-height: 70vh; overflow:auto;",
+				children: snapshots.map((snap) => /* @__PURE__ */ jsxs("a", {
+					href: `/projects/${project.slug}/builds/${build.id}/diff?snapshot=${snap.id}`,
+					"data-snapshot-link": true,
+					"data-snapshot-id": snap.id,
+					class: `snapshot-nav ${selectedId === snap.id ? "snapshot-nav--active" : ""}`,
+					style: `display:flex; flex-direction:column; gap:.2rem; padding:.6rem .75rem; border-bottom:1px solid var(--border); text-decoration:none; color:inherit; background:${selectedId === snap.id ? "var(--surface-muted)" : "transparent"};`,
+					"hx-get": `/projects/${project.slug}/builds/${build.id}/diff?snapshot=${snap.id}`,
+					"hx-target": "body",
+					"hx-push-url": "true",
+					children: [/* @__PURE__ */ jsxs("span", {
+						style: "display:flex; gap:.4rem; align-items:center; flex-wrap:wrap;",
+						children: [/* @__PURE__ */ jsx(Badge, {
+							tone: statusTone(snap.status),
+							children: snap.status
+						}), /* @__PURE__ */ jsxs("span", {
+							style: "font-weight:600; font-size:.9rem;",
+							children: [
+								snap.storyTitle,
+								" / ",
+								snap.storyName
+							]
+						})]
+					}), /* @__PURE__ */ jsxs("span", {
+						class: "field__hint",
+						style: "font-size:.8rem;",
+						children: [
+							snap.viewportName,
+							" · ",
+							snap.viewportWidth,
+							"×",
+							snap.viewportHeight,
+							snap.diffRatio !== null && snap.diffRatio !== void 0 ? ` · ${(snap.diffRatio * 100).toFixed(2)}%` : ""
+						]
+					})]
+				}, snap.id))
+			})]
+		})
+	});
+}
+//#endregion
+export { DiffNav };
+
+//# sourceMappingURL=build-diff-nav.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"build-diff-nav.mjs","names":[],"sources":["../../src/pages/build-diff-nav.tsx"],"sourcesContent":["import type { HtmlEscapedString } from \"hono/utils/html\";\nimport type { Build } from \"../schema/build.ts\";\nimport type { Project } from \"../schema/project.ts\";\nimport type { Snapshot } from \"../schema/snapshot.ts\";\nimport { Badge, statusTone } from \"../ui/components.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Snapshot navigator props for the diff review page. */\nexport interface DiffNavProps {\n  project: Project;\n  build: Build;\n  snapshots: Snapshot[];\n  selectedId?: string;\n}\n\n/** Left-rail snapshot list with per-story status and diff ratios. */\nexport function DiffNav(props: DiffNavProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, snapshots, selectedId } = props;\n  return (\n    <div style=\"flex: 0 0 320px; max-width: 36%; min-width: 260px;\">\n      <div class=\"card\">\n        <div style=\"padding:.6rem .75rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;\">\n          <strong>Snapshots</strong>\n          <span class=\"field__hint\">{snapshots.length} total</span>\n        </div>\n        <div data-diff-nav data-current={selectedId} style=\"max-height: 70vh; overflow:auto;\">\n          {snapshots.map((snap): HtmlEscapedString | Promise<HtmlEscapedString> => (\n            <a\n              key={snap.id}\n              href={`/projects/${project.slug}/builds/${build.id}/diff?snapshot=${snap.id}`}\n              data-snapshot-link\n              data-snapshot-id={snap.id}\n              class={`snapshot-nav ${selectedId === snap.id ? \"snapshot-nav--active\" : \"\"}`}\n              style={`display:flex; flex-direction:column; gap:.2rem; padding:.6rem .75rem; border-bottom:1px solid var(--border); text-decoration:none; color:inherit; background:${selectedId === snap.id ? \"var(--surface-muted)\" : \"transparent\"};`}\n              hx-get={`/projects/${project.slug}/builds/${build.id}/diff?snapshot=${snap.id}`}\n              hx-target=\"body\"\n              hx-push-url=\"true\"\n            >\n              <span style=\"display:flex; gap:.4rem; align-items:center; flex-wrap:wrap;\">\n                <Badge tone={statusTone(snap.status)}>{snap.status}</Badge>\n                <span style=\"font-weight:600; font-size:.9rem;\">\n                  {snap.storyTitle} / {snap.storyName}\n                </span>\n              </span>\n              <span class=\"field__hint\" style=\"font-size:.8rem;\">\n                {snap.viewportName} · {snap.viewportWidth}×{snap.viewportHeight}\n                {snap.diffRatio !== null && snap.diffRatio !== undefined\n                  ? ` · ${(snap.diffRatio * 100).toFixed(2)}%`\n                  : \"\"}\n              </span>\n            </a>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAiBA,SAAgB,QAAQ,OAAqE;CAC3F,MAAM,EAAE,SAAS,OAAO,WAAW,eAAe;CAClD,OACE,oBAAC,OAAD;EAAK,OAAM;EACT,UAAA,qBAAC,OAAD;GAAK,OAAM;GAAX,UAAA,CACE,qBAAC,OAAD;IAAK,OAAM;IAAX,UAAA,CACE,oBAAC,UAAD,EAAA,UAAQ,YAAiB,CAAA,GACzB,qBAAC,QAAD;KAAM,OAAM;KAAZ,UAAA,CAA2B,UAAU,QAAO,QAAY;IACrD,CAAA,CAAA;GACL,CAAA,GAAA,oBAAC,OAAD;IAAK,iBAAA;IAAc,gBAAc;IAAY,OAAM;IAChD,UAAA,UAAU,KAAK,SACd,qBAAC,KAAD;KAEE,MAAM,aAAa,QAAQ,KAAK,UAAU,MAAM,GAAG,iBAAiB,KAAK;KACzE,sBAAA;KACA,oBAAkB,KAAK;KACvB,OAAO,gBAAgB,eAAe,KAAK,KAAK,yBAAyB;KACzE,OAAO,gKAAgK,eAAe,KAAK,KAAK,yBAAyB,cAAc;KACvO,UAAQ,aAAa,QAAQ,KAAK,UAAU,MAAM,GAAG,iBAAiB,KAAK;KAC3E,aAAU;KACV,eAAY;KATd,UAAA,CAWE,qBAAC,QAAD;MAAM,OAAM;MAAZ,UAAA,CACE,oBAAC,OAAD;OAAO,MAAM,WAAW,KAAK,MAAM;OAAI,UAAA,KAAK;MAAc,CAAA,GAC1D,qBAAC,QAAD;OAAM,OAAM;OAAZ,UAAA;QACG,KAAK;QAAW;QAAI,KAAK;OACtB;MACF,CAAA,CAAA;KACN,CAAA,GAAA,qBAAC,QAAD;MAAM,OAAM;MAAc,OAAM;MAAhC,UAAA;OACG,KAAK;OAAa;OAAI,KAAK;OAAc;OAAE,KAAK;OAChD,KAAK,cAAc,QAAQ,KAAK,cAAc,KAAA,IAC3C,OAAO,KAAK,YAAY,IAAA,CAAK,QAAQ,CAAC,EAAE,KACxC;MACA;KACL,CAAA,CAAA;IAtBI,GAAA,KAAK,EAsBT,CACJ;GACE,CAAA,CACF;;CACF,CAAA;AAET"}