@storyshelf/app 0.6.2 → 0.7.0

package/dist/pages/projects.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"projects.mjs","names":[],"sources":["../../src/pages/projects.tsx"],"sourcesContent":["import { BuildModel, ProjectModel, SnapshotModel } from \"@storyshelf/core/models\";\nimport type { Project } from \"@storyshelf/core/schema\";\nimport { createUrlBuilder } from \"@storyshelf/core/urls\";\nimport { getStore } from \"../store.ts\";\nimport {\n  Button,\n  Card,\n  CodeBlock,\n  EmptyState,\n  FilterInput,\n  HStack,\n  Meta,\n  PageHeader,\n  VStack,\n} from \"../ui/components.tsx\";\nimport { css } from \"../ui/css.ts\";\nimport { DocumentLayout, type RenderedContent } from \"../ui/document.tsx\";\nimport { ProjectCard, type ProjectSummary } from \"./projects-card.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\nconst projectGrid = css`\n  /* project-grid */\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));\n  gap: var(--space-4);\n`;\n\nconst setupSummary = css`\n  /* setup-summary */\n  cursor: pointer;\n  font-weight: 650;\n  font-size: var(--text-lg);\n  letter-spacing: -0.01em;\n`;\n\n/** Latest build, a few previews, and the review backlog for one project. */\nasync function summarize(project: Project): Promise<ProjectSummary> {\n  const { db } = getStore();\n  const [latest] = await new BuildModel(db).list(project.id);\n  if (!latest) {\n    return { project, latest: null, previews: [], pending: 0 };\n  }\n  const snapshots = await new SnapshotModel(db).listByBuild(latest.id);\n  const pending = snapshots.filter((snap) => snap.status === \"new\" || snap.status === \"changed\");\n  const preferred = pending.length > 0 ? pending : snapshots;\n  return { project, latest, previews: preferred.slice(0, 3), pending: pending.length };\n}\n\n/** Copy-ready steps to get a first build uploaded. */\nfunction SetupGuide({ open }: { open: boolean }): ReturnType<typeof Card> {\n  return (\n    <Card>\n      <details open={open}>\n        <summary class={setupSummary}>Set up your first upload</summary>\n        <VStack>\n          <Meta>1. Create a project (writes .storybook/storyshelf.json for later runs).</Meta>\n          <CodeBlock code='npx storyshelf create --url http://localhost:3000 --name \"My Storybook\" --token $STORYSHELF_ADMIN_TOKEN' />\n          <Meta>\n            2. Generate a token in <strong>Settings → Tokens</strong> and set it in CI.\n          </Meta>\n          <CodeBlock code=\"export STORYSHELF_TOKEN=<your token>\" />\n          <Meta>3. Upload your built Storybook.</Meta>\n          <CodeBlock code=\"npx storyshelf upload\" />\n        </VStack>\n      </details>\n    </Card>\n  );\n}\n\n/** Projects overview: searchable project cards with review state, plus setup help. */\nexport async function renderProjectsPage(): Promise<RenderedContent> {\n  const { db, user, config } = getStore();\n  const urls = createUrlBuilder(\"/\", config.publishedBaseDomain);\n  const projects = await new ProjectModel(db).list();\n  const summaries = await Promise.all(projects.map((project) => summarize(project)));\n  const canCreate = !user || user.role === \"admin\" || user.role === \"member\";\n  const newProject = canCreate ? (\n    <Button variant=\"primary\" icon=\"plus\" href={urls.projectsNew()}>\n      New project\n    </Button>\n  ) : null;\n\n  return (\n    <DocumentLayout title=\"Projects\" nav={{ active: \"projects\" }}>\n      <PageHeader\n        title=\"Projects\"\n        description=\"Each project is one Storybook. Create a project, then upload builds from CI.\"\n        actions={newProject}\n      />\n      <VStack gap=\"lg\">\n        {projects.length > 1 ? (\n          <HStack>\n            <FilterInput label=\"Filter projects\" placeholder=\"Filter projects…\" />\n          </HStack>\n        ) : null}\n        {projects.length === 0 ? (\n          <EmptyState\n            title=\"No projects yet\"\n            description=\"Create your first project to start visual testing. Projects are free and unlimited.\"\n            action={newProject}\n          />\n        ) : (\n          <div class={projectGrid} data-filter-scope>\n            {summaries.map((summary) => (\n              <ProjectCard\n                key={summary.project.id}\n                summary={summary}\n                urls={{\n                  library: urls.library(summary.project.slug),\n                  settings: urls.settings(summary.project.slug),\n                  storybook: urls.short(summary.project.slug),\n                  review: summary.latest\n                    ? urls.buildDiff(summary.project.slug, summary.latest.id)\n                    : urls.library(summary.project.slug),\n                }}\n              />\n            ))}\n            <div data-filter-empty hidden>\n              <Meta center>No projects match your filter.</Meta>\n            </div>\n          </div>\n        )}\n        <SetupGuide open={projects.length === 0} />\n      </VStack>\n    </DocumentLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"projects.mjs","names":[],"sources":["../../src/pages/projects.tsx"],"sourcesContent":["import { BuildModel, ProjectModel, SnapshotModel } from \"@storyshelf/core/models\";\nimport type { Project } from \"@storyshelf/core/schema\";\nimport { createUrlBuilder } from \"@storyshelf/core/urls\";\nimport { loadHealthBadge } from \"../insights/health-panel.ts\";\nimport { getStore } from \"../store.ts\";\nimport {\n  Button,\n  Card,\n  CodeBlock,\n  EmptyState,\n  FilterInput,\n  HStack,\n  Meta,\n  PageHeader,\n  VStack,\n} from \"../ui/components.tsx\";\nimport { css } from \"../ui/css.ts\";\nimport { DocumentLayout, type RenderedContent } from \"../ui/document.tsx\";\nimport { ProjectCard, type ProjectSummary } from \"./projects-card.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\nconst projectGrid = css`\n  /* project-grid */\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));\n  gap: var(--space-4);\n`;\n\nconst setupSummary = css`\n  /* setup-summary */\n  cursor: pointer;\n  font-weight: 650;\n  font-size: var(--text-lg);\n  letter-spacing: -0.01em;\n`;\n\n/** Latest build, a few previews, and the review backlog for one project. */\nasync function summarize(project: Project): Promise<ProjectSummary> {\n  const { db } = getStore();\n  const [latest] = await new BuildModel(db).list(project.id);\n  const health = await loadHealthBadge(project);\n  if (!latest) {\n    return { project, latest: null, previews: [], pending: 0, health };\n  }\n  const snapshots = await new SnapshotModel(db).listByBuild(latest.id);\n  const pending = snapshots.filter((snap) => snap.status === \"new\" || snap.status === \"changed\");\n  const preferred = pending.length > 0 ? pending : snapshots;\n  return { project, latest, previews: preferred.slice(0, 3), pending: pending.length, health };\n}\n\n/** Copy-ready steps to get a first build uploaded. */\nfunction SetupGuide({ open }: { open: boolean }): ReturnType<typeof Card> {\n  return (\n    <Card>\n      <details open={open}>\n        <summary class={setupSummary}>Set up your first upload</summary>\n        <VStack>\n          <Meta>1. Create a project (writes .storybook/storyshelf.json for later runs).</Meta>\n          <CodeBlock code='npx storyshelf create --url http://localhost:3000 --name \"My Storybook\" --token $STORYSHELF_ADMIN_TOKEN' />\n          <Meta>\n            2. Generate a token in <strong>Settings → Tokens</strong> and set it in CI.\n          </Meta>\n          <CodeBlock code=\"export STORYSHELF_TOKEN=<your token>\" />\n          <Meta>3. Upload your built Storybook.</Meta>\n          <CodeBlock code=\"npx storyshelf upload\" />\n        </VStack>\n      </details>\n    </Card>\n  );\n}\n\n/** Projects overview: searchable project cards with review state, plus setup help. */\nexport async function renderProjectsPage(): Promise<RenderedContent> {\n  const { db, user, config } = getStore();\n  const urls = createUrlBuilder(\"/\", config.publishedBaseDomain);\n  const projects = await new ProjectModel(db).list();\n  const summaries = await Promise.all(projects.map((project) => summarize(project)));\n  const canCreate = !user || user.role === \"admin\" || user.role === \"member\";\n  const newProject = canCreate ? (\n    <Button variant=\"primary\" icon=\"plus\" href={urls.projectsNew()}>\n      New project\n    </Button>\n  ) : null;\n\n  return (\n    <DocumentLayout title=\"Projects\" nav={{ active: \"projects\" }}>\n      <PageHeader\n        title=\"Projects\"\n        description=\"Each project is one Storybook. Create a project, then upload builds from CI.\"\n        actions={newProject}\n      />\n      <VStack gap=\"lg\">\n        {projects.length > 1 ? (\n          <HStack>\n            <FilterInput label=\"Filter projects\" placeholder=\"Filter projects…\" />\n          </HStack>\n        ) : null}\n        {projects.length === 0 ? (\n          <EmptyState\n            title=\"No projects yet\"\n            description=\"Create your first project to start visual testing. Projects are free and unlimited.\"\n            action={newProject}\n          />\n        ) : (\n          <div class={projectGrid} data-filter-scope>\n            {summaries.map((summary) => (\n              <ProjectCard\n                key={summary.project.id}\n                summary={summary}\n                urls={{\n                  library: urls.library(summary.project.slug),\n                  settings: urls.settings(summary.project.slug),\n                  storybook: urls.short(summary.project.slug),\n                  review: summary.latest\n                    ? urls.buildDiff(summary.project.slug, summary.latest.id)\n                    : urls.library(summary.project.slug),\n                }}\n              />\n            ))}\n            <div data-filter-empty hidden>\n              <Meta center>No projects match your filter.</Meta>\n            </div>\n          </div>\n        )}\n        <SetupGuide open={projects.length === 0} />\n      </VStack>\n    </DocumentLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/pages/review-changeset.mjs

@@ -0,0 +1,116 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { getStore } from "../store.mjs";
+import { Button } from "../ui/buttons.mjs";
+import { Badge, EmptyState, Meta } from "../ui/feedback.mjs";
+import { Card, SectionTitle } from "../ui/layout.mjs";
+import { HStack, VStack } from "../ui/stacks.mjs";
+import { Table } from "../ui/table.mjs";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+import { createUrlBuilder } from "@storyshelf/core/urls";
+//#region src/pages/review-changeset.tsx
+/** What the build changed in the Storybook catalog, against its baseline build. */
+function ChangesetCard(props) {
+	const { data } = props;
+	const { baseline, changeset } = data.changeset;
+	const total = changeset.added.length + changeset.changed.length + changeset.removed.length;
+	return /* @__PURE__ */ jsxs(Card, { children: [
+		/* @__PURE__ */ jsx(SectionTitle, { children: "Changes in this build" }),
+		/* @__PURE__ */ jsxs(Meta, { children: [
+			baseline ? `Compared with the accepted build ${baseline.gitSha.slice(0, 7)} on ${baseline.gitBranch}.` : "No accepted build to compare with: every component counts as new.",
+			" ",
+			"A changed component has different stories, not necessarily a different look."
+		] }),
+		total === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+			title: "No component changes",
+			description: `${changeset.unchanged} components are the same as in the baseline.`
+		}) : /* @__PURE__ */ jsx(ChangesetTable, { data })
+	] });
+}
+function ChangesetTable(props) {
+	const { data } = props;
+	const { changeset } = data.changeset;
+	return /* @__PURE__ */ jsxs(VStack, { children: [/* @__PURE__ */ jsxs(HStack, { children: [
+		/* @__PURE__ */ jsxs(Badge, {
+			tone: "success",
+			children: [changeset.added.length, " added"]
+		}),
+		/* @__PURE__ */ jsxs(Badge, {
+			tone: "warning",
+			children: [changeset.changed.length, " changed"]
+		}),
+		/* @__PURE__ */ jsxs(Badge, {
+			tone: "danger",
+			children: [changeset.removed.length, " removed"]
+		}),
+		/* @__PURE__ */ jsxs(Meta, {
+			as: "span",
+			children: [changeset.unchanged, " unchanged"]
+		})
+	] }), /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsxs("table", { children: [
+		/* @__PURE__ */ jsx("caption", {
+			class: "visually-hidden",
+			children: "Components that changed in this build"
+		}),
+		/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+			/* @__PURE__ */ jsx("th", { children: "Component" }),
+			/* @__PURE__ */ jsx("th", { children: "Change" }),
+			/* @__PURE__ */ jsx("th", { children: "Stories" }),
+			/* @__PURE__ */ jsx("th", { children: /* @__PURE__ */ jsx("span", {
+				class: "visually-hidden",
+				children: "Links"
+			}) })
+		] }) }),
+		/* @__PURE__ */ jsxs("tbody", { children: [
+			rows(data, "added", changeset.added),
+			rows(data, "changed", changeset.changed),
+			rows(data, "removed", changeset.removed)
+		] })
+	] }) })] });
+}
+function rows(data, kind, items) {
+	return items.map((item) => /* @__PURE__ */ jsx(ChangeRow, {
+		data,
+		kind,
+		item
+	}, `${kind}:${item.importPath}:${item.title}`));
+}
+const KIND_TONE = {
+	added: "success",
+	changed: "warning",
+	removed: "danger"
+};
+function ChangeRow(props) {
+	const { data, kind, item } = props;
+	const { project, build } = data;
+	const urls = createUrlBuilder("/", getStore().config.publishedBaseDomain);
+	const story = data.firstStory.get(item.importPath);
+	return /* @__PURE__ */ jsxs("tr", { children: [
+		/* @__PURE__ */ jsxs("td", { children: [/* @__PURE__ */ jsx("strong", { children: item.title }), /* @__PURE__ */ jsx(Meta, {
+			as: "div",
+			mono: true,
+			children: item.importPath
+		})] }),
+		/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(Badge, {
+			tone: KIND_TONE[kind],
+			children: kind
+		}) }),
+		/* @__PURE__ */ jsx("td", { children: item.previousStoryCount !== void 0 && item.previousStoryCount !== item.storyCount ? `${item.previousStoryCount} → ${item.storyCount}` : item.storyCount }),
+		/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs(HStack, { children: [kind !== "removed" && story ? /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "sm",
+			href: `${urls.storybookBuild(project.slug, build.id)}/?path=/story/${encodeURIComponent(story)}`,
+			children: "Story"
+		}) : null, item.importPath ? /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "sm",
+			href: urls.component(project.slug, item.importPath),
+			children: "Component"
+		}) : null] }) })
+	] });
+}
+//#endregion
+export { ChangesetCard };
+
+//# sourceMappingURL=review-changeset.mjs.map

package/dist/pages/review-changeset.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"review-changeset.mjs","names":[],"sources":["../../src/pages/review-changeset.tsx"],"sourcesContent":["/** The changeset card (ADR 0013, decision 8): components the build added, removed or changed. */\nimport type { ChangesetComponent } from \"@storyshelf/core/models\";\nimport { createUrlBuilder } from \"@storyshelf/core/urls\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport type { ReviewSectionData } from \"../routers/review-section.handlers.ts\";\nimport { getStore } from \"../store.ts\";\nimport {\n  Badge,\n  Button,\n  Card,\n  EmptyState,\n  HStack,\n  Meta,\n  SectionTitle,\n  Table,\n  VStack,\n} from \"../ui/components.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\ntype Rendered = HtmlEscapedString | Promise<HtmlEscapedString>;\n\ntype Kind = \"added\" | \"changed\" | \"removed\";\n\n/** What the build changed in the Storybook catalog, against its baseline build. */\nexport function ChangesetCard(props: { data: ReviewSectionData }): Rendered {\n  const { data } = props;\n  const { baseline, changeset } = data.changeset;\n  const total = changeset.added.length + changeset.changed.length + changeset.removed.length;\n  return (\n    <Card>\n      <SectionTitle>Changes in this build</SectionTitle>\n      <Meta>\n        {baseline\n          ? `Compared with the accepted build ${baseline.gitSha.slice(0, 7)} on ${baseline.gitBranch}.`\n          : \"No accepted build to compare with: every component counts as new.\"}{\" \"}\n        A changed component has different stories, not necessarily a different look.\n      </Meta>\n      {total === 0 ? (\n        <EmptyState\n          title=\"No component changes\"\n          description={`${changeset.unchanged} components are the same as in the baseline.`}\n        />\n      ) : (\n        <ChangesetTable data={data} />\n      )}\n    </Card>\n  );\n}\n\nfunction ChangesetTable(props: { data: ReviewSectionData }): Rendered {\n  const { data } = props;\n  const { changeset } = data.changeset;\n  return (\n    <VStack>\n      <HStack>\n        <Badge tone=\"success\">{changeset.added.length} added</Badge>\n        <Badge tone=\"warning\">{changeset.changed.length} changed</Badge>\n        <Badge tone=\"danger\">{changeset.removed.length} removed</Badge>\n        <Meta as=\"span\">{changeset.unchanged} unchanged</Meta>\n      </HStack>\n      <Table>\n        <table>\n          <caption class=\"visually-hidden\">Components that changed in this build</caption>\n          <thead>\n            <tr>\n              <th>Component</th>\n              <th>Change</th>\n              <th>Stories</th>\n              <th>\n                <span class=\"visually-hidden\">Links</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            {rows(data, \"added\", changeset.added)}\n            {rows(data, \"changed\", changeset.changed)}\n            {rows(data, \"removed\", changeset.removed)}\n          </tbody>\n        </table>\n      </Table>\n    </VStack>\n  );\n}\n\nfunction rows(\n  data: ReviewSectionData,\n  kind: Kind,\n  items: readonly (ChangesetComponent & { previousStoryCount?: number })[],\n): Rendered[] {\n  return items.map((item): Rendered => (\n    <ChangeRow\n      key={`${kind}:${item.importPath}:${item.title}`}\n      data={data}\n      kind={kind}\n      item={item}\n    />\n  ));\n}\n\nconst KIND_TONE = { added: \"success\", changed: \"warning\", removed: \"danger\" } as const;\n\nfunction ChangeRow(props: {\n  data: ReviewSectionData;\n  kind: Kind;\n  item: ChangesetComponent & { previousStoryCount?: number };\n}): Rendered {\n  const { data, kind, item } = props;\n  const { project, build } = data;\n  const urls = createUrlBuilder(\"/\", getStore().config.publishedBaseDomain);\n  const story = data.firstStory.get(item.importPath);\n  return (\n    <tr>\n      <td>\n        <strong>{item.title}</strong>\n        <Meta as=\"div\" mono>\n          {item.importPath}\n        </Meta>\n      </td>\n      <td>\n        <Badge tone={KIND_TONE[kind]}>{kind}</Badge>\n      </td>\n      <td>\n        {item.previousStoryCount !== undefined && item.previousStoryCount !== item.storyCount\n          ? `${item.previousStoryCount} → ${item.storyCount}`\n          : item.storyCount}\n      </td>\n      <td>\n        <HStack>\n          {kind !== \"removed\" && story ? (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              href={`${urls.storybookBuild(project.slug, build.id)}/?path=/story/${encodeURIComponent(story)}`}\n            >\n              Story\n            </Button>\n          ) : null}\n          {item.importPath ? (\n            <Button variant=\"ghost\" size=\"sm\" href={urls.component(project.slug, item.importPath)}>\n              Component\n            </Button>\n          ) : null}\n        </HStack>\n      </td>\n    </tr>\n  );\n}\n"],"mappings":"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"}

package/dist/pages/review-comments.mjs

@@ -0,0 +1,103 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Button } from "../ui/buttons.mjs";
+import { Badge, Meta } from "../ui/feedback.mjs";
+import { TextareaField } from "../ui/forms.mjs";
+import { Card, SectionTitle } from "../ui/layout.mjs";
+import { VStack } from "../ui/stacks.mjs";
+import { csrfField } from "../ui/csrf-field.mjs";
+import { CommentCard } from "./build-diff-comments.mjs";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+//#region src/pages/review-comments.tsx
+/** Comments on the build as a whole and on its stories, with a form for a build comment. */
+function CommentsCard(props) {
+	const { data } = props;
+	const { project, build, comments, canComment } = data;
+	return /* @__PURE__ */ jsxs(Card, { children: [
+		/* @__PURE__ */ jsx(SectionTitle, { children: "Comments" }),
+		comments.length === 0 ? /* @__PURE__ */ jsxs(Meta, { children: [
+			"No comments yet.",
+			" ",
+			canComment ? "Comment on the build here, or on a story from its component page." : "Developers, approvers and admins can comment."
+		] }) : null,
+		/* @__PURE__ */ jsx(VStack, { children: comments.map((comment) => /* @__PURE__ */ jsx(CommentCard, {
+			project,
+			build,
+			comment,
+			canReview: canComment,
+			anchor: /* @__PURE__ */ jsx(Badge, {
+				tone: "neutral",
+				children: comment.storyId ? `story ${comment.storyId}` : "build"
+			})
+		}, comment.id)) }),
+		canComment ? /* @__PURE__ */ jsx(CommentForm, {
+			project,
+			build,
+			storyId: void 0
+		}) : null
+	] });
+}
+/** The comments of one story in the build a component page shows, with a form to add one. */
+function StoryComments(props) {
+	const { project, build, storyId, canComment } = props;
+	const comments = props.comments.filter((comment) => comment.storyId === storyId);
+	return /* @__PURE__ */ jsxs(Card, {
+		id: "story-comments",
+		children: [
+			/* @__PURE__ */ jsx(SectionTitle, { children: "Comments on this story" }),
+			/* @__PURE__ */ jsxs(Meta, { children: [
+				"On build ",
+				build.gitSha.slice(0, 7),
+				"."
+			] }),
+			comments.length === 0 ? /* @__PURE__ */ jsx(Meta, { children: "No comments on this story yet." }) : null,
+			/* @__PURE__ */ jsx(VStack, { children: comments.map((comment) => /* @__PURE__ */ jsx(CommentCard, {
+				project,
+				build,
+				comment,
+				canReview: canComment
+			}, comment.id)) }),
+			canComment ? /* @__PURE__ */ jsx(CommentForm, {
+				project,
+				build,
+				storyId
+			}) : null
+		]
+	});
+}
+function CommentForm(props) {
+	const { project, build, storyId } = props;
+	const url = `/projects/${project.slug}/builds/${build.id}/comments`;
+	return /* @__PURE__ */ jsxs("form", {
+		method: "post",
+		action: url,
+		"hx-post": url,
+		"hx-target": "body",
+		class: "mt-1 max-w-prose",
+		children: [csrfField(), /* @__PURE__ */ jsxs(VStack, { children: [
+			storyId ? /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: "storyId",
+				value: storyId
+			}) : null,
+			/* @__PURE__ */ jsx(TextareaField, {
+				label: storyId ? "Add story comment" : "Add build comment",
+				name: "body",
+				id: storyId ? "story-comment-body" : "build-comment-body",
+				rows: 3,
+				required: true,
+				placeholder: storyId ? "Leave a comment on this story…" : "Leave a comment on this build…"
+			}),
+			/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				type: "submit",
+				children: "Comment"
+			}) })
+		] })]
+	});
+}
+//#endregion
+export { CommentsCard, StoryComments };
+
+//# sourceMappingURL=review-comments.mjs.map

package/dist/pages/review-comments.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"review-comments.mjs","names":[],"sources":["../../src/pages/review-comments.tsx"],"sourcesContent":["/** Build and story comments (ADR 0013, decision 2): the build page card and the story thread. */\nimport type { Build, Comment, Project } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport type { ReviewSectionData } from \"../routers/review-section.handlers.ts\";\nimport {\n  Badge,\n  Button,\n  Card,\n  Meta,\n  SectionTitle,\n  TextareaField,\n  VStack,\n} from \"../ui/components.tsx\";\nimport { csrfField } from \"../ui/csrf-field.tsx\";\nimport { CommentCard } from \"./build-diff-comments.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\ntype Rendered = HtmlEscapedString | Promise<HtmlEscapedString>;\n\n/** Comments on the build as a whole and on its stories, with a form for a build comment. */\nexport function CommentsCard(props: { data: ReviewSectionData }): Rendered {\n  const { data } = props;\n  const { project, build, comments, canComment } = data;\n  return (\n    <Card>\n      <SectionTitle>Comments</SectionTitle>\n      {comments.length === 0 ? (\n        <Meta>\n          No comments yet.{\" \"}\n          {canComment\n            ? \"Comment on the build here, or on a story from its component page.\"\n            : \"Developers, approvers and admins can comment.\"}\n        </Meta>\n      ) : null}\n      <VStack>\n        {comments.map((comment): Rendered => (\n          <CommentCard\n            key={comment.id}\n            project={project}\n            build={build}\n            comment={comment}\n            canReview={canComment}\n            anchor={\n              <Badge tone=\"neutral\">{comment.storyId ? `story ${comment.storyId}` : \"build\"}</Badge>\n            }\n          />\n        ))}\n      </VStack>\n      {canComment ? <CommentForm project={project} build={build} storyId={undefined} /> : null}\n    </Card>\n  );\n}\n\n/** The comments of one story in the build a component page shows, with a form to add one. */\nexport function StoryComments(props: {\n  project: Project;\n  build: Build;\n  storyId: string;\n  comments: readonly Comment[];\n  canComment: boolean;\n}): Rendered {\n  const { project, build, storyId, canComment } = props;\n  const comments = props.comments.filter((comment) => comment.storyId === storyId);\n  return (\n    <Card id=\"story-comments\">\n      <SectionTitle>Comments on this story</SectionTitle>\n      <Meta>On build {build.gitSha.slice(0, 7)}.</Meta>\n      {comments.length === 0 ? <Meta>No comments on this story yet.</Meta> : null}\n      <VStack>\n        {comments.map((comment): Rendered => (\n          <CommentCard\n            key={comment.id}\n            project={project}\n            build={build}\n            comment={comment}\n            canReview={canComment}\n          />\n        ))}\n      </VStack>\n      {canComment ? <CommentForm project={project} build={build} storyId={storyId} /> : null}\n    </Card>\n  );\n}\n\nfunction CommentForm(props: {\n  project: Project;\n  build: Build;\n  storyId: string | undefined;\n}): Rendered {\n  const { project, build, storyId } = props;\n  const url = `/projects/${project.slug}/builds/${build.id}/comments`;\n  return (\n    <form method=\"post\" action={url} hx-post={url} hx-target=\"body\" class=\"mt-1 max-w-prose\">\n      {csrfField()}\n      <VStack>\n        {storyId ? <input type=\"hidden\" name=\"storyId\" value={storyId} /> : null}\n        <TextareaField\n          label={storyId ? \"Add story comment\" : \"Add build comment\"}\n          name=\"body\"\n          id={storyId ? \"story-comment-body\" : \"build-comment-body\"}\n          rows={3}\n          required\n          placeholder={\n            storyId ? \"Leave a comment on this story…\" : \"Leave a comment on this build…\"\n          }\n        />\n        <div>\n          <Button variant=\"primary\" type=\"submit\">\n            Comment\n          </Button>\n        </div>\n      </VStack>\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAqBA,SAAgB,aAAa,OAA8C;CACzE,MAAM,EAAE,SAAS;CACjB,MAAM,EAAE,SAAS,OAAO,UAAU,eAAe;CACjD,OACE,qBAAC,MAAD,EAAA,UAAA;EACE,oBAAC,cAAD,EAAA,UAAc,WAAsB,CAAA;EACnC,SAAS,WAAW,IACnB,qBAAC,MAAD,EAAA,UAAA;GAAM;GACa;GAChB,aACG,sEACA;EACA,EAAA,CAAA,IACJ;EACJ,oBAAC,QAAD,EAAA,UACG,SAAS,KAAK,YACb,oBAAC,aAAD;GAEW;GACF;GACE;GACT,WAAW;GACX,QACE,oBAAC,OAAD;IAAO,MAAK;IAAW,UAAA,QAAQ,UAAU,SAAS,QAAQ,YAAY;GAAe,CAAA;EAExF,GARM,QAAQ,EAQd,CACF,EACK,CAAA;EACP,aAAa,oBAAC,aAAD;GAAsB;GAAgB;GAAO,SAAS,KAAA;EAAY,CAAA,IAAI;CAChF,EAAA,CAAA;AAEV;;AAGA,SAAgB,cAAc,OAMjB;CACX,MAAM,EAAE,SAAS,OAAO,SAAS,eAAe;CAChD,MAAM,WAAW,MAAM,SAAS,QAAQ,YAAY,QAAQ,YAAY,OAAO;CAC/E,OACE,qBAAC,MAAD;EAAM,IAAG;EAAT,UAAA;GACE,oBAAC,cAAD,EAAA,UAAc,yBAAoC,CAAA;GAClD,qBAAC,MAAD,EAAA,UAAA;IAAM;IAAU,MAAM,OAAO,MAAM,GAAG,CAAC;IAAE;GAAO,EAAA,CAAA;GAC/C,SAAS,WAAW,IAAI,oBAAC,MAAD,EAAA,UAAM,iCAAoC,CAAA,IAAI;GACvE,oBAAC,QAAD,EAAA,UACG,SAAS,KAAK,YACb,oBAAC,aAAD;IAEW;IACF;IACE;IACT,WAAW;GACZ,GALM,QAAQ,EAKd,CACF,EACK,CAAA;GACP,aAAa,oBAAC,aAAD;IAAsB;IAAgB;IAAgB;GAAU,CAAA,IAAI;EAC9E;;AAEV;AAEA,SAAS,YAAY,OAIR;CACX,MAAM,EAAE,SAAS,OAAO,YAAY;CACpC,MAAM,MAAM,aAAa,QAAQ,KAAK,UAAU,MAAM,GAAG;CACzD,OACE,qBAAC,QAAD;EAAM,QAAO;EAAO,QAAQ;EAAK,WAAS;EAAK,aAAU;EAAO,OAAM;EAAtE,UAAA,CACG,UAAU,GACX,qBAAC,QAAD,EAAA,UAAA;GACG,UAAU,oBAAC,SAAD;IAAO,MAAK;IAAS,MAAK;IAAU,OAAO;GAAU,CAAA,IAAI;GACpE,oBAAC,eAAD;IACE,OAAO,UAAU,sBAAsB;IACvC,MAAK;IACL,IAAI,UAAU,uBAAuB;IACrC,MAAM;IACN,UAAA;IACA,aACE,UAAU,mCAAmC;GAEhD,CAAA;GACD,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD;IAAQ,SAAQ;IAAU,MAAK;IAAS,UAAA;GAEhC,CAAA,EACL,CAAA;EACC,EAAA,CAAA,CACJ;;AAEV"}

package/dist/pages/review-verdict.mjs

@@ -0,0 +1,102 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Button } from "../ui/buttons.mjs";
+import { Badge, Meta, statusTone } from "../ui/feedback.mjs";
+import { TextareaField } from "../ui/forms.mjs";
+import { Card, SectionTitle } from "../ui/layout.mjs";
+import { HStack, VStack } from "../ui/stacks.mjs";
+import { RelativeTime } from "../ui/time.mjs";
+import { csrfField } from "../ui/csrf-field.mjs";
+import { BUILD_STATUSES } from "@storyshelf/core/types";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+//#region src/pages/review-verdict.tsx
+/** The verdict card of the build page: where the build stands, the verdicts, and the reviewer's controls. */
+/** Build-level verdicts: the approvals so far, each reviewer's latest verdict, and the controls. */
+function VerdictCard(props) {
+	const { data } = props;
+	return /* @__PURE__ */ jsxs(Card, { children: [
+		/* @__PURE__ */ jsxs(HStack, {
+			justify: "between",
+			children: [/* @__PURE__ */ jsx(SectionTitle, { children: "Review" }), /* @__PURE__ */ jsx(Badge, {
+				tone: statusTone(data.state.status),
+				children: standing(data)
+			})]
+		}),
+		/* @__PURE__ */ jsx(Meta, { children: summary(data) }),
+		/* @__PURE__ */ jsx(VStack, { children: data.state.latest.map((review) => /* @__PURE__ */ jsxs(HStack, {
+			align: "baseline",
+			wrap: false,
+			children: [
+				/* @__PURE__ */ jsx(Badge, {
+					tone: review.verdict === "approved" ? "success" : "danger",
+					children: review.verdict
+				}),
+				/* @__PURE__ */ jsx("strong", { children: review.userId ? data.names.get(review.userId) ?? review.userId : "anonymous" }),
+				/* @__PURE__ */ jsx(Meta, {
+					as: "span",
+					children: /* @__PURE__ */ jsx(RelativeTime, { value: review.createdAt })
+				}),
+				review.body ? /* @__PURE__ */ jsx("span", { children: review.body }) : null
+			]
+		}, review.id)) }),
+		/* @__PURE__ */ jsx(VerdictControls, { data })
+	] });
+}
+/**
+* The form for a reviewer once the build can take a verdict; while its Storybook is still
+* publishing a notice stands in (the server refuses a verdict until then, ADR 0013, decision 3).
+*/
+function VerdictControls(props) {
+	const { data } = props;
+	if (!data.canVerdict || data.build.status === "failed") return null;
+	if (data.publishing === "pending") return /* @__PURE__ */ jsx(Meta, { children: "Waiting for the Storybook to publish. You can give a verdict once it has." });
+	return data.publishing === "success" ? /* @__PURE__ */ jsx(VerdictForm, { data }) : null;
+}
+/** The reviewer's controls: an optional note and the two verdicts. */
+function VerdictForm(props) {
+	const { project, build } = props.data;
+	const url = `/projects/${project.slug}/builds/${build.id}/reviews`;
+	return /* @__PURE__ */ jsxs("form", {
+		method: "post",
+		action: url,
+		"hx-post": url,
+		"hx-target": "body",
+		class: "mt-1 max-w-prose",
+		children: [csrfField(), /* @__PURE__ */ jsxs(VStack, { children: [/* @__PURE__ */ jsx(TextareaField, {
+			label: "Note with your verdict (optional)",
+			name: "body",
+			id: "verdict-body",
+			rows: 2
+		}), /* @__PURE__ */ jsxs(HStack, { children: [/* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			type: "submit",
+			name: "verdict",
+			value: "approved",
+			children: "Approve build"
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "danger",
+			type: "submit",
+			name: "verdict",
+			value: "rejected",
+			children: "Reject build"
+		})] })] })]
+	});
+}
+/** The status badge text: the build's status, worded for review. */
+function standing(data) {
+	const { status } = data.state;
+	if (status === "pending") return "waiting for review";
+	return BUILD_STATUSES.includes(status) ? status : "unknown";
+}
+/** One line on what decides the build. */
+function summary(data) {
+	const { state, testing } = data;
+	if (testing) return "Screenshots decide this build; a verdict is a sign-off and does not change its status.";
+	const needed = `${state.approvalsRequired} ${state.approvalsRequired === 1 ? "approval" : "approvals"}`;
+	return `${state.approvals} of ${needed} given. Any rejection rejects the build. Open comments do not block a verdict.`;
+}
+//#endregion
+export { VerdictCard };
+
+//# sourceMappingURL=review-verdict.mjs.map

package/dist/pages/review-verdict.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"review-verdict.mjs","names":[],"sources":["../../src/pages/review-verdict.tsx"],"sourcesContent":["/** The verdict card of the build page: where the build stands, the verdicts, and the reviewer's controls. */\nimport { BUILD_STATUSES } from \"@storyshelf/core/types\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport type { ReviewSectionData } from \"../routers/review-section.handlers.ts\";\nimport {\n  Badge,\n  Button,\n  Card,\n  HStack,\n  Meta,\n  RelativeTime,\n  SectionTitle,\n  TextareaField,\n  VStack,\n  statusTone,\n} from \"../ui/components.tsx\";\nimport { csrfField } from \"../ui/csrf-field.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\ntype Rendered = HtmlEscapedString | Promise<HtmlEscapedString>;\n\n/** Build-level verdicts: the approvals so far, each reviewer's latest verdict, and the controls. */\nexport function VerdictCard(props: { data: ReviewSectionData }): Rendered {\n  const { data } = props;\n  return (\n    <Card>\n      <HStack justify=\"between\">\n        <SectionTitle>Review</SectionTitle>\n        <Badge tone={statusTone(data.state.status)}>{standing(data)}</Badge>\n      </HStack>\n      <Meta>{summary(data)}</Meta>\n      <VStack>\n        {data.state.latest.map((review): Rendered => (\n          <HStack key={review.id} align=\"baseline\" wrap={false}>\n            <Badge tone={review.verdict === \"approved\" ? \"success\" : \"danger\"}>\n              {review.verdict}\n            </Badge>\n            <strong>\n              {review.userId ? (data.names.get(review.userId) ?? review.userId) : \"anonymous\"}\n            </strong>\n            <Meta as=\"span\">\n              <RelativeTime value={review.createdAt} />\n            </Meta>\n            {review.body ? <span>{review.body}</span> : null}\n          </HStack>\n        ))}\n      </VStack>\n      <VerdictControls data={data} />\n    </Card>\n  );\n}\n\n/**\n * The form for a reviewer once the build can take a verdict; while its Storybook is still\n * publishing a notice stands in (the server refuses a verdict until then, ADR 0013, decision 3).\n */\nfunction VerdictControls(props: { data: ReviewSectionData }): Rendered | null {\n  const { data } = props;\n  if (!data.canVerdict || data.build.status === \"failed\") {\n    return null;\n  }\n  if (data.publishing === \"pending\") {\n    return <Meta>Waiting for the Storybook to publish. You can give a verdict once it has.</Meta>;\n  }\n  return data.publishing === \"success\" ? <VerdictForm data={data} /> : null;\n}\n\n/** The reviewer's controls: an optional note and the two verdicts. */\nfunction VerdictForm(props: { data: ReviewSectionData }): Rendered {\n  const { project, build } = props.data;\n  const url = `/projects/${project.slug}/builds/${build.id}/reviews`;\n  return (\n    <form method=\"post\" action={url} hx-post={url} hx-target=\"body\" class=\"mt-1 max-w-prose\">\n      {csrfField()}\n      <VStack>\n        <TextareaField\n          label=\"Note with your verdict (optional)\"\n          name=\"body\"\n          id=\"verdict-body\"\n          rows={2}\n        />\n        <HStack>\n          <Button variant=\"primary\" type=\"submit\" name=\"verdict\" value=\"approved\">\n            Approve build\n          </Button>\n          <Button variant=\"danger\" type=\"submit\" name=\"verdict\" value=\"rejected\">\n            Reject build\n          </Button>\n        </HStack>\n      </VStack>\n    </form>\n  );\n}\n\n/** The status badge text: the build's status, worded for review. */\nfunction standing(data: ReviewSectionData): string {\n  const { status } = data.state;\n  if (status === \"pending\") {\n    return \"waiting for review\";\n  }\n  return BUILD_STATUSES.includes(status) ? status : \"unknown\";\n}\n\n/** One line on what decides the build. */\nfunction summary(data: ReviewSectionData): string {\n  const { state, testing } = data;\n  if (testing) {\n    return \"Screenshots decide this build; a verdict is a sign-off and does not change its status.\";\n  }\n  const needed = `${state.approvalsRequired} ${state.approvalsRequired === 1 ? \"approval\" : \"approvals\"}`;\n  return `${state.approvals} of ${needed} given. Any rejection rejects the build. Open comments do not block a verdict.`;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,SAAgB,YAAY,OAA8C;CACxE,MAAM,EAAE,SAAS;CACjB,OACE,qBAAC,MAAD,EAAA,UAAA;EACE,qBAAC,QAAD;GAAQ,SAAQ;GAAhB,UAAA,CACE,oBAAC,cAAD,EAAA,UAAc,SAAoB,CAAA,GAClC,oBAAC,OAAD;IAAO,MAAM,WAAW,KAAK,MAAM,MAAM;IAAI,UAAA,SAAS,IAAI;GAAS,CAAA,CAC7D;;EACR,oBAAC,MAAD,EAAA,UAAO,QAAQ,IAAI,EAAQ,CAAA;EAC3B,oBAAC,QAAD,EAAA,UACG,KAAK,MAAM,OAAO,KAAK,WACtB,qBAAC,QAAD;GAAwB,OAAM;GAAW,MAAM;GAA/C,UAAA;IACE,oBAAC,OAAD;KAAO,MAAM,OAAO,YAAY,aAAa,YAAY;KACtD,UAAA,OAAO;IACH,CAAA;IACP,oBAAC,UAAD,EAAA,UACG,OAAO,SAAU,KAAK,MAAM,IAAI,OAAO,MAAM,KAAK,OAAO,SAAU,YAC9D,CAAA;IACR,oBAAC,MAAD;KAAM,IAAG;KACP,UAAA,oBAAC,cAAD,EAAc,OAAO,OAAO,UAAY,CAAA;IACpC,CAAA;IACL,OAAO,OAAO,oBAAC,QAAD,EAAA,UAAO,OAAO,KAAW,CAAA,IAAI;GACtC;EAXK,GAAA,OAAO,EAWZ,CACT,EACK,CAAA;EACR,oBAAC,iBAAD,EAAuB,KAAO,CAAA;CAC1B,EAAA,CAAA;AAEV;;;;;AAMA,SAAS,gBAAgB,OAAqD;CAC5E,MAAM,EAAE,SAAS;CACjB,IAAI,CAAC,KAAK,cAAc,KAAK,MAAM,WAAW,UAC5C,OAAO;CAET,IAAI,KAAK,eAAe,WACtB,OAAO,oBAAC,MAAD,EAAA,UAAM,4EAA+E,CAAA;CAE9F,OAAO,KAAK,eAAe,YAAY,oBAAC,aAAD,EAAmB,KAAO,CAAA,IAAI;AACvE;;AAGA,SAAS,YAAY,OAA8C;CACjE,MAAM,EAAE,SAAS,UAAU,MAAM;CACjC,MAAM,MAAM,aAAa,QAAQ,KAAK,UAAU,MAAM,GAAG;CACzD,OACE,qBAAC,QAAD;EAAM,QAAO;EAAO,QAAQ;EAAK,WAAS;EAAK,aAAU;EAAO,OAAM;EAAtE,UAAA,CACG,UAAU,GACX,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,eAAD;GACE,OAAM;GACN,MAAK;GACL,IAAG;GACH,MAAM;EACP,CAAA,GACD,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,QAAD;GAAQ,SAAQ;GAAU,MAAK;GAAS,MAAK;GAAU,OAAM;GAAW,UAAA;EAEhE,CAAA,GACR,oBAAC,QAAD;GAAQ,SAAQ;GAAS,MAAK;GAAS,MAAK;GAAU,OAAM;GAAW,UAAA;EAE/D,CAAA,CACF,EAAA,CAAA,CACF,EAAA,CAAA,CACJ;;AAEV;;AAGA,SAAS,SAAS,MAAiC;CACjD,MAAM,EAAE,WAAW,KAAK;CACxB,IAAI,WAAW,WACb,OAAO;CAET,OAAO,eAAe,SAAS,MAAM,IAAI,SAAS;AACpD;;AAGA,SAAS,QAAQ,MAAiC;CAChD,MAAM,EAAE,OAAO,YAAY;CAC3B,IAAI,SACF,OAAO;CAET,MAAM,SAAS,GAAG,MAAM,kBAAkB,GAAG,MAAM,sBAAsB,IAAI,aAAa;CAC1F,OAAO,GAAG,MAAM,UAAU,MAAM,OAAO;AACzC"}

package/dist/pages/settings-ai.mjs

@@ -0,0 +1,69 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Button } from "../ui/buttons.mjs";
+import { Alert, Meta } from "../ui/feedback.mjs";
+import { FormActions, SelectField } from "../ui/forms.mjs";
+import { Card, SectionTitle } from "../ui/layout.mjs";
+import { csrfField } from "../ui/csrf-field.mjs";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+//#region src/pages/settings-ai.tsx
+function ProfileForm(props) {
+	const { project, ai } = props;
+	return /* @__PURE__ */ jsxs("form", {
+		method: "post",
+		action: `/projects/${project.slug}/settings/ai`,
+		"hx-post": `/projects/${project.slug}/settings/ai`,
+		"hx-target": "body",
+		"hx-swap": "outerHTML",
+		children: [
+			csrfField(),
+			/* @__PURE__ */ jsx(SelectField, {
+				label: "AI profile",
+				name: "aiProfile",
+				value: project.aiProfile ?? "",
+				disabled: !ai.isSiteAdmin,
+				options: [{
+					value: "",
+					label: "Off (no data leaves the server)"
+				}, ...ai.profiles.map((name) => ({
+					value: name,
+					label: name === ai.defaultProfile ? `${name} (default)` : name
+				}))],
+				hint: "Only site admins can change this because it decides where project data is sent."
+			}),
+			ai.isSiteAdmin ? /* @__PURE__ */ jsx(FormActions, { children: /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				type: "submit",
+				icon: "check",
+				children: "Save changes"
+			}) }) : /* @__PURE__ */ jsx(Meta, { children: "You need site admin access to change the AI profile." })
+		]
+	});
+}
+/** AI settings tab: per-project profile gate (site admins choose; others read). */
+function renderSettingsAi(project, ai, formState) {
+	if (!ai?.available) return /* @__PURE__ */ jsx(Alert, {
+		tone: "info",
+		title: "AI is not configured",
+		children: "This server has no AI configured, so insights are unavailable."
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		class: "grid max-w-form",
+		children: [formState?.globalError ? /* @__PURE__ */ jsx(Alert, {
+			tone: "danger",
+			children: formState.globalError
+		}) : null, /* @__PURE__ */ jsxs(Card, { children: [
+			/* @__PURE__ */ jsx(SectionTitle, { children: "AI insights" }),
+			/* @__PURE__ */ jsx(Meta, { children: "Choosing a profile turns on AI triage for builds and a project health digest. The profile decides which models see this project's data (including screenshots when its model supports vision). Insights are advisory only: they never approve or reject anything." }),
+			/* @__PURE__ */ jsx(ProfileForm, {
+				project,
+				ai
+			})
+		] })]
+	});
+}
+//#endregion
+export { renderSettingsAi };
+
+//# sourceMappingURL=settings-ai.mjs.map

package/dist/pages/settings-ai.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-ai.mjs","names":[],"sources":["../../src/pages/settings-ai.tsx"],"sourcesContent":["import type { Project } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\nimport {\n  Alert,\n  Button,\n  Card,\n  FormActions,\n  Meta,\n  SectionTitle,\n  SelectField,\n} from \"../ui/components.tsx\";\nimport { csrfField } from \"../ui/csrf-field.tsx\";\n\n/** AI availability and profile choices passed to the settings tab. */\nexport interface SettingsAiData {\n  available: boolean;\n  profiles: string[];\n  defaultProfile: string;\n  isSiteAdmin: boolean;\n}\n\nfunction ProfileForm(props: {\n  project: Project;\n  ai: SettingsAiData;\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, ai } = props;\n  return (\n    <form\n      method=\"post\"\n      action={`/projects/${project.slug}/settings/ai`}\n      hx-post={`/projects/${project.slug}/settings/ai`}\n      hx-target=\"body\"\n      hx-swap=\"outerHTML\"\n    >\n      {csrfField()}\n      <SelectField\n        label=\"AI profile\"\n        name=\"aiProfile\"\n        value={project.aiProfile ?? \"\"}\n        disabled={!ai.isSiteAdmin}\n        options={[\n          { value: \"\", label: \"Off (no data leaves the server)\" },\n          ...ai.profiles.map((name) => ({\n            value: name,\n            label: name === ai.defaultProfile ? `${name} (default)` : name,\n          })),\n        ]}\n        hint=\"Only site admins can change this because it decides where project data is sent.\"\n      />\n      {ai.isSiteAdmin ? (\n        <FormActions>\n          <Button variant=\"primary\" type=\"submit\" icon=\"check\">\n            Save changes\n          </Button>\n        </FormActions>\n      ) : (\n        <Meta>You need site admin access to change the AI profile.</Meta>\n      )}\n    </form>\n  );\n}\n\n/** AI settings tab: per-project profile gate (site admins choose; others read). */\nexport function renderSettingsAi(\n  project: Project,\n  ai: SettingsAiData | undefined,\n  formState?: { globalError?: string },\n): unknown {\n  if (!ai?.available) {\n    return (\n      <Alert tone=\"info\" title=\"AI is not configured\">\n        This server has no AI configured, so insights are unavailable.\n      </Alert>\n    );\n  }\n  return (\n    <div class=\"grid max-w-form\">\n      {formState?.globalError ? <Alert tone=\"danger\">{formState.globalError}</Alert> : null}\n      <Card>\n        <SectionTitle>AI insights</SectionTitle>\n        <Meta>\n          Choosing a profile turns on AI triage for builds and a project health digest. The profile\n          decides which models see this project&apos;s data (including screenshots when its model\n          supports vision). Insights are advisory only: they never approve or reject anything.\n        </Meta>\n        <ProfileForm project={project} ai={ai} />\n      </Card>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAsBA,SAAS,YAAY,OAG8B;CACjD,MAAM,EAAE,SAAS,OAAO;CACxB,OACE,qBAAC,QAAD;EACE,QAAO;EACP,QAAQ,aAAa,QAAQ,KAAK;EAClC,WAAS,aAAa,QAAQ,KAAK;EACnC,aAAU;EACV,WAAQ;EALV,UAAA;GAOG,UAAU;GACX,oBAAC,aAAD;IACE,OAAM;IACN,MAAK;IACL,OAAO,QAAQ,aAAa;IAC5B,UAAU,CAAC,GAAG;IACd,SAAS,CACP;KAAE,OAAO;KAAI,OAAO;IAAkC,GACtD,GAAG,GAAG,SAAS,KAAK,UAAU;KAC5B,OAAO;KACP,OAAO,SAAS,GAAG,iBAAiB,GAAG,KAAK,cAAc;IAC5D,EAAE,CACJ;IACA,MAAK;GACN,CAAA;GACA,GAAG,cACF,oBAAC,aAAD,EAAA,UACE,oBAAC,QAAD;IAAQ,SAAQ;IAAU,MAAK;IAAS,MAAK;IAAQ,UAAA;GAE7C,CAAA,EACG,CAAA,IAEb,oBAAC,MAAD,EAAA,UAAM,uDAA0D,CAAA;EAE9D;;AAEV;;AAGA,SAAgB,iBACd,SACA,IACA,WACS;CACT,IAAI,CAAC,IAAI,WACP,OACE,oBAAC,OAAD;EAAO,MAAK;EAAO,OAAM;EAAuB,UAAA;CAEzC,CAAA;CAGX,OACE,qBAAC,OAAD;EAAK,OAAM;EAAX,UAAA,CACG,WAAW,cAAc,oBAAC,OAAD;GAAO,MAAK;GAAU,UAAA,UAAU;EAAmB,CAAA,IAAI,MACjF,qBAAC,MAAD,EAAA,UAAA;GACE,oBAAC,cAAD,EAAA,UAAc,cAAyB,CAAA;GACvC,oBAAC,MAAD,EAAA,UAAM,oQAIA,CAAA;GACN,oBAAC,aAAD;IAAsB;IAAa;GAAK,CAAA;EACpC,EAAA,CAAA,CACH;;AAET"}

package/dist/pages/settings-capture.mjs

@@ -0,0 +1,124 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Button } from "../ui/buttons.mjs";
+import { Alert, Meta } from "../ui/feedback.mjs";
+import { CheckField, Field, FormActions, SelectField, TextareaField } from "../ui/forms.mjs";
+import { Card, SectionTitle } from "../ui/layout.mjs";
+import { csrfField } from "../ui/csrf-field.mjs";
+import { targetChoices } from "./target-choices.mjs";
+import { MAX_STORYBOOK_URL_TTL, MIN_STORYBOOK_URL_TTL_OVERRIDE } from "@storyshelf/core/utils";
+import { MAX_BROWSERS, parseBrowsers, parseModesAllowlist } from "@storyshelf/core/capture";
+import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
+import { isCaptureTarget } from "@storyshelf/core/adapter/capture-runner";
+//#region src/pages/settings-capture.tsx
+/** Primary engine select plus one checkbox per additional engine. */
+function BrowserFields(props) {
+	const { primary, extras, disabled, targets } = props;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(SelectField, {
+			label: "Primary browser",
+			name: "browser",
+			value: primary,
+			disabled,
+			options: targets.choices,
+			hint: "Used for the published preview and to bootstrap other engines."
+		}),
+		targets.choices.map((engine) => /* @__PURE__ */ jsx(CheckField, {
+			label: `Also capture on ${engine.label}`,
+			name: `extra_${engine.value}`,
+			value: engine.value,
+			checked: extras.includes(engine.value) ? true : void 0,
+			disabled
+		}, engine.value)),
+		targets.unavailable.length > 0 ? /* @__PURE__ */ jsxs(Meta, { children: [
+			"Not selectable on this server: ",
+			targets.unavailable.join("; "),
+			"."
+		] }) : null
+	] });
+}
+/** One mode name per line; empty runs every declared mode. */
+function AllowlistField(props) {
+	return /* @__PURE__ */ jsx(TextareaField, {
+		label: "Mode allowlist",
+		name: "modesAllowlist",
+		rows: 4,
+		value: props.allowlist.join("\n"),
+		placeholder: "dark\nmobile",
+		hint: "One mode name per line. Empty runs every mode declared in your stories' parameters."
+	});
+}
+/** The project's override of the signed Storybook URL lifetime (ADR 0007, decision 5). */
+function UrlLifetimeField(props) {
+	const { project, disabled } = props;
+	return /* @__PURE__ */ jsx(Field, {
+		label: "Signed Storybook URL lifetime (seconds)",
+		name: "storybookUrlTtlSeconds",
+		type: "number",
+		step: "1",
+		min: String(MIN_STORYBOOK_URL_TTL_OVERRIDE),
+		max: String(MAX_STORYBOOK_URL_TTL),
+		value: project.storybookUrlTtlSeconds ? String(project.storybookUrlTtlSeconds) : "",
+		placeholder: "Derived from the stories",
+		disabled,
+		hint: `How long the URL given to a remote browser that cannot reach this server stays valid (${MIN_STORYBOOK_URL_TTL_OVERRIDE} to ${MAX_STORYBOOK_URL_TTL}; the floor is one slice of captures plus a grace, so a render never outlives its URL). Empty derives it from the build's size: at least 2 hours, at most 24.`
+	});
+}
+/** Capture settings tab: engines to capture on and the mode allowlist. */
+function renderSettingsCapture(project, isAdmin, formState, offered) {
+	const browsers = parseBrowsers(project.browsers) ?? [project.browser ?? "chromium"];
+	const [primary = "chromium", ...extras] = browsers;
+	const targets = targetChoices(offered, browsers.filter((entry) => isCaptureTarget(entry)));
+	const allowlist = parseModesAllowlist(project.modesAllowlist) ?? [];
+	const action = `/projects/${project.slug}/settings/capture`;
+	return /* @__PURE__ */ jsxs("div", {
+		class: "grid max-w-form",
+		children: [formState?.globalError ? /* @__PURE__ */ jsx(Alert, {
+			tone: "danger",
+			children: formState.globalError
+		}) : null, /* @__PURE__ */ jsxs(Card, { children: [
+			/* @__PURE__ */ jsx(SectionTitle, { children: "Browsers" }),
+			/* @__PURE__ */ jsxs(Meta, { children: [
+				"Every build is captured on each selected target, one after another, with a baseline per target. One approval covers a story and mode on all engines; use",
+				" ",
+				/* @__PURE__ */ jsx("em", { children: "Only this browser" }),
+				" in the review for an engine-specific decision. Up to",
+				" ",
+				MAX_BROWSERS,
+				" targets. A newly added target starts from its first build."
+			] }),
+			/* @__PURE__ */ jsxs("form", {
+				method: "post",
+				action,
+				"hx-post": action,
+				"hx-target": "body",
+				"hx-swap": "outerHTML",
+				children: [
+					csrfField(),
+					/* @__PURE__ */ jsx(BrowserFields, {
+						primary,
+						extras,
+						disabled: !isAdmin,
+						targets
+					}),
+					/* @__PURE__ */ jsx(AllowlistField, { allowlist }),
+					/* @__PURE__ */ jsx(UrlLifetimeField, {
+						project,
+						disabled: !isAdmin
+					}),
+					isAdmin ? /* @__PURE__ */ jsx(FormActions, { children: /* @__PURE__ */ jsx(Button, {
+						variant: "primary",
+						type: "submit",
+						icon: "check",
+						children: "Save changes"
+					}) }) : /* @__PURE__ */ jsx(Meta, { children: "You need admin access to edit settings." })
+				]
+			})
+		] })]
+	});
+}
+//#endregion
+export { renderSettingsCapture };
+
+//# sourceMappingURL=settings-capture.mjs.map

package/dist/pages/settings-capture.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-capture.mjs","names":[],"sources":["../../src/pages/settings-capture.tsx"],"sourcesContent":["import { isCaptureTarget, type RunnerTarget } from \"@storyshelf/core/adapter/capture-runner\";\nimport { MAX_BROWSERS, parseBrowsers, parseModesAllowlist } from \"@storyshelf/core/capture\";\nimport type { Project } from \"@storyshelf/core/schema\";\nimport { MAX_STORYBOOK_URL_TTL, MIN_STORYBOOK_URL_TTL_OVERRIDE } from \"@storyshelf/core/utils\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport {\n  Alert,\n  Button,\n  Card,\n  CheckField,\n  Field,\n  FormActions,\n  Meta,\n  SectionTitle,\n  SelectField,\n  TextareaField,\n} from \"../ui/components.tsx\";\nimport { csrfField } from \"../ui/csrf-field.tsx\";\nimport { targetChoices, type TargetChoices } from \"./target-choices.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Primary engine select plus one checkbox per additional engine. */\nfunction BrowserFields(props: {\n  primary: string;\n  extras: string[];\n  disabled: boolean;\n  targets: TargetChoices;\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { primary, extras, disabled, targets } = props;\n  return (\n    <>\n      <SelectField\n        label=\"Primary browser\"\n        name=\"browser\"\n        value={primary}\n        disabled={disabled}\n        options={targets.choices}\n        hint=\"Used for the published preview and to bootstrap other engines.\"\n      />\n      {targets.choices.map((engine) => (\n        <CheckField\n          key={engine.value}\n          label={`Also capture on ${engine.label}`}\n          name={`extra_${engine.value}`}\n          value={engine.value}\n          checked={extras.includes(engine.value) ? true : undefined}\n          disabled={disabled}\n        />\n      ))}\n      {targets.unavailable.length > 0 ? (\n        <Meta>Not selectable on this server: {targets.unavailable.join(\"; \")}.</Meta>\n      ) : null}\n    </>\n  );\n}\n\n/** One mode name per line; empty runs every declared mode. */\nfunction AllowlistField(props: {\n  allowlist: string[];\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  return (\n    <TextareaField\n      label=\"Mode allowlist\"\n      name=\"modesAllowlist\"\n      rows={4}\n      value={props.allowlist.join(\"\\n\")}\n      placeholder=\"dark&#10;mobile\"\n      hint=\"One mode name per line. Empty runs every mode declared in your stories' parameters.\"\n    />\n  );\n}\n\n/** The project's override of the signed Storybook URL lifetime (ADR 0007, decision 5). */\nfunction UrlLifetimeField(props: {\n  project: Project;\n  disabled: boolean;\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, disabled } = props;\n  return (\n    <Field\n      label=\"Signed Storybook URL lifetime (seconds)\"\n      name=\"storybookUrlTtlSeconds\"\n      type=\"number\"\n      step=\"1\"\n      min={String(MIN_STORYBOOK_URL_TTL_OVERRIDE)}\n      max={String(MAX_STORYBOOK_URL_TTL)}\n      value={project.storybookUrlTtlSeconds ? String(project.storybookUrlTtlSeconds) : \"\"}\n      placeholder=\"Derived from the stories\"\n      disabled={disabled}\n      hint={`How long the URL given to a remote browser that cannot reach this server stays valid (${MIN_STORYBOOK_URL_TTL_OVERRIDE} to ${MAX_STORYBOOK_URL_TTL}; the floor is one slice of captures plus a grace, so a render never outlives its URL). Empty derives it from the build's size: at least 2 hours, at most 24.`}\n    />\n  );\n}\n\n/** Capture settings tab: engines to capture on and the mode allowlist. */\nexport function renderSettingsCapture(\n  project: Project,\n  isAdmin: boolean,\n  formState?: { globalError?: string },\n  /** What the runner offers; omitted when it publishes no list. */\n  offered?: readonly RunnerTarget[],\n): unknown {\n  const browsers = parseBrowsers(project.browsers) ?? [project.browser ?? \"chromium\"];\n  const [primary = \"chromium\", ...extras] = browsers;\n  const targets = targetChoices(\n    offered,\n    browsers.filter((entry) => isCaptureTarget(entry)),\n  );\n  const allowlist = parseModesAllowlist(project.modesAllowlist) ?? [];\n  const action = `/projects/${project.slug}/settings/capture`;\n  return (\n    <div class=\"grid max-w-form\">\n      {formState?.globalError ? <Alert tone=\"danger\">{formState.globalError}</Alert> : null}\n      <Card>\n        <SectionTitle>Browsers</SectionTitle>\n        <Meta>\n          Every build is captured on each selected target, one after another, with a baseline per\n          target. One approval covers a story and mode on all engines; use{\" \"}\n          <em>Only this browser</em> in the review for an engine-specific decision. Up to{\" \"}\n          {MAX_BROWSERS} targets. A newly added target starts from its first build.\n        </Meta>\n        <form method=\"post\" action={action} hx-post={action} hx-target=\"body\" hx-swap=\"outerHTML\">\n          {csrfField()}\n          <BrowserFields primary={primary} extras={extras} disabled={!isAdmin} targets={targets} />\n          <AllowlistField allowlist={allowlist} />\n          <UrlLifetimeField project={project} disabled={!isAdmin} />\n          {isAdmin ? (\n            <FormActions>\n              <Button variant=\"primary\" type=\"submit\" icon=\"check\">\n                Save changes\n              </Button>\n            </FormActions>\n          ) : (\n            <Meta>You need admin access to edit settings.</Meta>\n          )}\n        </form>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,SAAS,cAAc,OAK4B;CACjD,MAAM,EAAE,SAAS,QAAQ,UAAU,YAAY;CAC/C,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,aAAD;GACE,OAAM;GACN,MAAK;GACL,OAAO;GACG;GACV,SAAS,QAAQ;GACjB,MAAK;EACN,CAAA;EACA,QAAQ,QAAQ,KAAK,WACpB,oBAAC,YAAD;GAEE,OAAO,mBAAmB,OAAO;GACjC,MAAM,SAAS,OAAO;GACtB,OAAO,OAAO;GACd,SAAS,OAAO,SAAS,OAAO,KAAK,IAAI,OAAO,KAAA;GACtC;EACX,GANM,OAAO,KAMb,CACF;EACA,QAAQ,YAAY,SAAS,IAC5B,qBAAC,MAAD,EAAA,UAAA;GAAM;GAAgC,QAAQ,YAAY,KAAK,IAAI;GAAE;EAAO,EAAA,CAAA,IAC1E;CACJ,EAAA,CAAA;AAEN;;AAGA,SAAS,eAAe,OAE2B;CACjD,OACE,oBAAC,eAAD;EACE,OAAM;EACN,MAAK;EACL,MAAM;EACN,OAAO,MAAM,UAAU,KAAK,IAAI;EAChC,aAAY;EACZ,MAAK;CACN,CAAA;AAEL;;AAGA,SAAS,iBAAiB,OAGyB;CACjD,MAAM,EAAE,SAAS,aAAa;CAC9B,OACE,oBAAC,OAAD;EACE,OAAM;EACN,MAAK;EACL,MAAK;EACL,MAAK;EACL,KAAK,OAAO,8BAA8B;EAC1C,KAAK,OAAO,qBAAqB;EACjC,OAAO,QAAQ,yBAAyB,OAAO,QAAQ,sBAAsB,IAAI;EACjF,aAAY;EACF;EACV,MAAM,yFAAyF,+BAA+B,MAAM,sBAAsB;CAC3J,CAAA;AAEL;;AAGA,SAAgB,sBACd,SACA,SACA,WAEA,SACS;CACT,MAAM,WAAW,cAAc,QAAQ,QAAQ,KAAK,CAAC,QAAQ,WAAW,UAAU;CAClF,MAAM,CAAC,UAAU,YAAY,GAAG,UAAU;CAC1C,MAAM,UAAU,cACd,SACA,SAAS,QAAQ,UAAU,gBAAgB,KAAK,CAAC,CACnD;CACA,MAAM,YAAY,oBAAoB,QAAQ,cAAc,KAAK,CAAC;CAClE,MAAM,SAAS,aAAa,QAAQ,KAAK;CACzC,OACE,qBAAC,OAAD;EAAK,OAAM;EAAX,UAAA,CACG,WAAW,cAAc,oBAAC,OAAD;GAAO,MAAK;GAAU,UAAA,UAAU;EAAmB,CAAA,IAAI,MACjF,qBAAC,MAAD,EAAA,UAAA;GACE,oBAAC,cAAD,EAAA,UAAc,WAAsB,CAAA;GACpC,qBAAC,MAAD,EAAA,UAAA;IAAM;IAE6D;IACjE,oBAAC,MAAD,EAAA,UAAI,oBAAqB,CAAA;IAAC;IAAsD;IAC/E;IAAa;GACV,EAAA,CAAA;GACN,qBAAC,QAAD;IAAM,QAAO;IAAe;IAAQ,WAAS;IAAQ,aAAU;IAAO,WAAQ;IAA9E,UAAA;KACG,UAAU;KACX,oBAAC,eAAD;MAAwB;MAAiB;MAAQ,UAAU,CAAC;MAAkB;KAAU,CAAA;KACxF,oBAAC,gBAAD,EAA2B,UAAY,CAAA;KACvC,oBAAC,kBAAD;MAA2B;MAAS,UAAU,CAAC;KAAU,CAAA;KACxD,UACC,oBAAC,aAAD,EAAA,UACE,oBAAC,QAAD;MAAQ,SAAQ;MAAU,MAAK;MAAS,MAAK;MAAQ,UAAA;KAE7C,CAAA,EACG,CAAA,IAEb,oBAAC,MAAD,EAAA,UAAM,0CAA6C,CAAA;IAEjD;;EACF,EAAA,CAAA,CACH;;AAET"}