camox 0.72.0 → 0.75.0

package/dist/features/studio/components/ReviewDraftDialog.js

@@ -0,0 +1,670 @@
+import { reads, useReadQuery } from "../../../lib/studio-reads.js";
+import { draftMutations } from "../../../lib/queries.js";
+import { studioStore } from "../studioStore.js";
+import { localeName } from "../localeOptions.js";
+import { fixMessage, whereSentence } from "../fixMessage.js";
+import { draftLabel, plural } from "../draftLabel.js";
+import { useLeaveDraft } from "../viewSwitch.js";
+import { useShowInCanvas } from "../showInCanvas.js";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { PUBLISH_BLOCKED_ERROR } from "@camox/api-contract/drafts";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMutation } from "@tanstack/react-query";
+import { Button } from "@camox/ui/button";
+import { OctagonX } from "lucide-react";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@camox/ui/dialog";
+import { toast } from "@camox/ui/toaster";
+import { Skeleton } from "@camox/ui/skeleton";
+import { Spinner } from "@camox/ui/spinner";
+
+//#region src/features/studio/components/ReviewDraftDialog.tsx
+/** Where a subject sits: its page or layout, or the files, which belong to neither. */
+function ownerName(owner, entity) {
+	if (!owner) return entity === "file" ? "Files" : "Elsewhere";
+	if (owner.kind === "layout") return `Layout ${owner.name}`;
+	if (owner.kind === "syncedBlock") return `Synced block ${owner.title}`;
+	if (owner.kind === "collection") return owner.title;
+	return owner.nickname || owner.path;
+}
+/**
+* Where to find a blocker. One with nowhere to find it, like the draft's code, names only
+* itself.
+*/
+function problemPlace(problem) {
+	if (!problem.owner && problem.entity !== "file") return null;
+	return ownerName(problem.owner, problem.entity);
+}
+/** Where in the Canvas a blocker is, or null when it sits on no page, like a definition. */
+function blockerTarget(problem) {
+	if (problem.owner?.kind !== "page") return null;
+	return {
+		pageId: problem.owner.id,
+		locale: problem.locale,
+		blockId: problem.blockId,
+		itemId: problem.entity === "repeatableItem" ? problem.id : null,
+		field: problem.blockId && problem.field ? {
+			name: problem.field,
+			kind: problem.fieldKind
+		} : null
+	};
+}
+const isImage = (problem) => problem.fieldKind === "Image" || problem.fieldKind === "ImageList";
+/** What a blocker's action does, named by the fix where it's obvious. */
+function blockerActionLabel(problem) {
+	switch (problem.code) {
+		case "emptyRequiredFile": return isImage(problem) ? "Choose an image" : "Choose a file";
+		case "missingFile":
+		case "unacceptedFileType": return isImage(problem) ? "Choose another image" : "Choose another file";
+		case "emptyRequiredReference": return "Choose a record";
+		case "danglingReference": return "Choose another record";
+		case "duplicatePath": return "Fix the path";
+		default: return "Show in Canvas";
+	}
+}
+/** Where a blocker is, in a sentence: "Hero on Home, in German, field “image”". */
+function blockerWhere(problem) {
+	const place = problemPlace(problem);
+	return whereSentence({
+		...problem,
+		label: place ? `${problem.label} on ${place}` : problem.label
+	});
+}
+/**
+* What Fix with agent sends to the draft's thread about blockers sharing a message: what's wrong
+* and each place it is, for Camox's agent to fix in the draft.
+*/
+function fixBlockersMessage(problems) {
+	const [first] = problems;
+	const places = first.entity === "code" ? [] : problems.map(blockerWhere);
+	return fixMessage({
+		from: "Publishing blocker",
+		what: first.message,
+		places
+	});
+}
+/** From how many blockers sharing a message they fold into one, naming each place. */
+const SHARED_MESSAGE_MIN = 3;
+const blockerKey = (problem) => `${problem.code}:${problem.id}:${problem.locale}:${problem.field}`;
+/**
+* One item per blocker, saying what's wrong and where, with Fix with agent, and for one on a page
+* an action showing it in the Canvas. Blockers sharing a message fold into one item naming each:
+* a value its definition no longer accepts can sit on dozens of pages.
+*/
+function Blockers(t0) {
+	const $ = c(3);
+	const { blockers, onShow } = t0;
+	if (blockers.length === 0) return null;
+	let t1;
+	if ($[0] !== blockers || $[1] !== onShow) {
+		const byMessage = /* @__PURE__ */ new Map();
+		for (const problem of blockers) byMessage.set(problem.message, [...byMessage.get(problem.message) ?? [], problem]);
+		const groups = [...byMessage.values()].flatMap(_temp2);
+		t1 = /* @__PURE__ */ jsx("ul", {
+			className: "flex flex-col gap-2",
+			children: groups.map((group) => {
+				const [first] = group;
+				const target = group.length === 1 ? blockerTarget(first) : null;
+				return /* @__PURE__ */ jsxs("li", {
+					className: "border-destructive/30 bg-destructive/5 flex items-start gap-2 rounded-lg border p-3",
+					"data-blocker": true,
+					children: [/* @__PURE__ */ jsx(OctagonX, { className: "text-destructive mt-0.5 size-4 shrink-0" }), /* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-1 flex-col gap-1",
+						children: [
+							/* @__PURE__ */ jsx("p", {
+								className: "text-sm font-medium",
+								"data-blocker-message": true,
+								children: first.message
+							}),
+							/* @__PURE__ */ jsx(BlockerPlaces, { problems: group }),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-wrap gap-2 pt-1",
+								children: [target && /* @__PURE__ */ jsx(Button, {
+									variant: "outline",
+									size: "sm",
+									onClick: () => onShow(target),
+									children: blockerActionLabel(first)
+								}), /* @__PURE__ */ jsx(Button, {
+									variant: "outline",
+									size: "sm",
+									onClick: () => studioStore.trigger.sendToAgent({ text: fixBlockersMessage(group) }),
+									children: "Fix with agent"
+								})]
+							})
+						]
+					})]
+				}, blockerKey(first));
+			})
+		});
+		$[0] = blockers;
+		$[1] = onShow;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+function _temp2(shared) {
+	return shared.length < SHARED_MESSAGE_MIN ? shared.map(_temp) : [shared];
+}
+function _temp(problem_0) {
+	return [problem_0];
+}
+/** Where a blocker is, or each place of blockers folded into one. */
+function BlockerPlaces(t0) {
+	const $ = c(9);
+	const { problems } = t0;
+	const label = _temp3;
+	if (problems.length === 1) {
+		let t1;
+		if ($[0] !== problems[0]) {
+			t1 = label(problems[0]);
+			$[0] = problems[0];
+			$[1] = t1;
+		} else t1 = $[1];
+		let t2;
+		if ($[2] !== t1) {
+			t2 = /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: t1
+			});
+			$[2] = t1;
+			$[3] = t2;
+		} else t2 = $[3];
+		return t2;
+	}
+	let t1;
+	if ($[4] !== problems) {
+		let t2;
+		if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = (problem_0) => /* @__PURE__ */ jsx("li", {
+				className: "bg-background rounded-md border px-1.5 py-0.5 text-xs",
+				children: label(problem_0)
+			}, blockerKey(problem_0));
+			$[6] = t2;
+		} else t2 = $[6];
+		t1 = problems.map(t2);
+		$[4] = problems;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[7] !== t1) {
+		t2 = /* @__PURE__ */ jsx("ul", {
+			className: "text-muted-foreground flex flex-wrap gap-1 pt-0.5",
+			children: t1
+		});
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
+}
+function _temp3(problem) {
+	const place = problemPlace(problem);
+	return place ? `${problem.label} · ${place}` : problem.label;
+}
+const PUBLISH_FAILED = "The publish couldn't finish on Camox's side, and Live is as it was. Try again.";
+/**
+* Whether a publish request failed on Camox's side rather than being refused: a server error,
+* or no answer at all. Either way the publish applied nothing.
+*/
+const failedOnCamoxSide = (error) => {
+	const status = error.status;
+	return typeof status !== "number" || status >= 500;
+};
+/**
+* Why the last publish with code stopped, when it isn't a blocker, which the review shows
+* instead.
+*/
+const PUBLISH_STOPPED = {
+	revisionChanged: "The draft's code changed while publishing, so the publish stopped and Live is as it was. Publish again.",
+	liveCodeMoved: "Live's code changed while publishing, and the draft took too long to take it in, so the publish stopped and Live is as it was. Try again.",
+	conflictsChanged: PUBLISH_FAILED,
+	failed: PUBLISH_FAILED
+};
+/**
+* The review's plain lines under the blockers: each language the publish holds off Live until
+* it's translated, and why the last publish stopped.
+*/
+function reviewLines(preview) {
+	const { code } = preview;
+	const held = preview.heldLocales.map((tag) => `${localeName(tag)} goes live once it's translated`);
+	const stopped = code?.publishAborted && !code.publishing ? code.publishAborted : null;
+	return [...held, ...stopped && PUBLISH_STOPPED[stopped] ? [PUBLISH_STOPPED[stopped]] : []];
+}
+/** What Publish sends: the revision a draft with code shows, which publishing ships. */
+const publishInput = (projectId, shown) => ({
+	projectId,
+	...shown.code?.revision && { revision: shown.code.revision }
+});
+/**
+* The draft's overview: the bullets AI wrote about its changes, in full, saying it's updating
+* while they describe an older version of the draft. While
+* it's first written, skeleton lines; once it failed, a Retry and a plain count of the changes,
+* so the draft can still be reviewed. Nothing for a draft that gets no overview, as a catch-up
+* draft.
+*/
+function DraftOverview(t0) {
+	const $ = c(35);
+	const { projectId, preview } = t0;
+	const { overview, changes } = preview;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			...draftMutations.retryOverview(),
+			onError: _temp4
+		};
+		$[0] = t1;
+	} else t1 = $[0];
+	const retry = useMutation(t1);
+	if (changes.length === 0) {
+		const t2 = preview.code ? "This draft changes the website's code." : "This draft has no changes.";
+		let t3;
+		if ($[1] !== t2) {
+			t3 = /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: t2
+			});
+			$[1] = t2;
+			$[2] = t3;
+		} else t3 = $[2];
+		return t3;
+	}
+	if (overview.status === "ready") {
+		let t2;
+		if ($[3] !== overview.bullets) {
+			t2 = overview.bullets.map(_temp5);
+			$[3] = overview.bullets;
+			$[4] = t2;
+		} else t2 = $[4];
+		let t3;
+		if ($[5] !== t2) {
+			t3 = /* @__PURE__ */ jsx("ul", {
+				className: "text-foreground/85 flex list-disc flex-col gap-1.5 pl-5 leading-relaxed",
+				children: t2
+			});
+			$[5] = t2;
+			$[6] = t3;
+		} else t3 = $[6];
+		let t4;
+		if ($[7] !== overview.stale) {
+			t4 = overview.stale && /* @__PURE__ */ jsxs("p", {
+				className: "text-muted-foreground flex items-center gap-1.5 text-xs",
+				children: [/* @__PURE__ */ jsx(Spinner, {
+					"aria-hidden": true,
+					className: "size-3"
+				}), "Updating…"]
+			});
+			$[7] = overview.stale;
+			$[8] = t4;
+		} else t4 = $[8];
+		let t5;
+		if ($[9] !== t3 || $[10] !== t4) {
+			t5 = /* @__PURE__ */ jsxs("div", {
+				"data-overview": true,
+				className: "flex flex-col gap-2",
+				children: [t3, t4]
+			});
+			$[9] = t3;
+			$[10] = t4;
+			$[11] = t5;
+		} else t5 = $[11];
+		return t5;
+	}
+	if (overview.status === "failed") {
+		let t2;
+		if ($[12] !== changes) {
+			t2 = new Set(changes.map(_temp6));
+			$[12] = changes;
+			$[13] = t2;
+		} else t2 = $[13];
+		const places = t2.size;
+		let t3;
+		if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+			t3 = /* @__PURE__ */ jsx("p", {
+				className: "text-sm font-medium",
+				children: "Couldn't summarize this draft"
+			});
+			$[14] = t3;
+		} else t3 = $[14];
+		let t4;
+		if ($[15] !== projectId || $[16] !== retry) {
+			t4 = () => retry.mutate({ projectId });
+			$[15] = projectId;
+			$[16] = retry;
+			$[17] = t4;
+		} else t4 = $[17];
+		let t5;
+		if ($[18] !== retry.isPending) {
+			t5 = retry.isPending ? /* @__PURE__ */ jsx(Spinner, {}) : null;
+			$[18] = retry.isPending;
+			$[19] = t5;
+		} else t5 = $[19];
+		let t6;
+		if ($[20] !== retry.isPending || $[21] !== t4 || $[22] !== t5) {
+			t6 = /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [t3, /* @__PURE__ */ jsxs(Button, {
+					variant: "outline",
+					size: "sm",
+					className: "ml-auto",
+					disabled: retry.isPending,
+					onClick: t4,
+					children: [t5, "Retry"]
+				})]
+			});
+			$[20] = retry.isPending;
+			$[21] = t4;
+			$[22] = t5;
+			$[23] = t6;
+		} else t6 = $[23];
+		let t7;
+		if ($[24] !== changes.length) {
+			t7 = plural(changes.length, "change");
+			$[24] = changes.length;
+			$[25] = t7;
+		} else t7 = $[25];
+		let t8;
+		if ($[26] !== places) {
+			t8 = plural(places, "place");
+			$[26] = places;
+			$[27] = t8;
+		} else t8 = $[27];
+		let t9;
+		if ($[28] !== t7 || $[29] !== t8) {
+			t9 = /* @__PURE__ */ jsxs("p", {
+				className: "text-muted-foreground text-sm",
+				children: [
+					t7,
+					" in ",
+					t8
+				]
+			});
+			$[28] = t7;
+			$[29] = t8;
+			$[30] = t9;
+		} else t9 = $[30];
+		let t10;
+		if ($[31] !== t6 || $[32] !== t9) {
+			t10 = /* @__PURE__ */ jsxs("div", {
+				"data-overview": true,
+				className: "flex flex-col gap-2",
+				children: [t6, t9]
+			});
+			$[31] = t6;
+			$[32] = t9;
+			$[33] = t10;
+		} else t10 = $[33];
+		return t10;
+	}
+	if (overview.status === "none") return null;
+	let t2;
+	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsxs("div", {
+			"data-overview": true,
+			className: "flex flex-col gap-2",
+			children: [
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-11/12" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4/5" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3" }),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-sm",
+					children: "Summarizing this draft…"
+				})
+			]
+		});
+		$[34] = t2;
+	} else t2 = $[34];
+	return t2;
+}
+function _temp6(change) {
+	return change.entity === "locale" ? "Languages" : ownerName(change.owner, change.entity);
+}
+function _temp5(bullet, index) {
+	return /* @__PURE__ */ jsx("li", { children: bullet }, index);
+}
+function _temp4(error) {
+	return toast.error(error.message || "Could not summarize the draft");
+}
+/**
+* Reviews a draft before publishing it whole (ADR 0009, ADR 0043). Publish is held only by
+* blockers or an empty draft, never by work Camox still runs. Once the draft ends, the studio
+* switches to Live.
+*/
+function ReviewDraftDialog(t0) {
+	const $ = c(60);
+	const { projectId, draftId, open, onOpenChange } = t0;
+	let t1;
+	if ($[0] !== draftId || $[1] !== projectId) {
+		t1 = reads.publishPreview({
+			projectId,
+			draftId
+		});
+		$[0] = draftId;
+		$[1] = projectId;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== open) {
+		t2 = { enabled: open };
+		$[3] = open;
+		$[4] = t2;
+	} else t2 = $[4];
+	const preview = useReadQuery(t1, t2);
+	let t3;
+	if ($[5] !== draftId || $[6] !== projectId) {
+		t3 = reads.draft({
+			projectId,
+			draftId
+		});
+		$[5] = draftId;
+		$[6] = projectId;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== open) {
+		t4 = { enabled: open };
+		$[8] = open;
+		$[9] = t4;
+	} else t4 = $[9];
+	const draft = useReadQuery(t3, t4);
+	const leaveDraft = useLeaveDraft();
+	const showInCanvas = useShowInCanvas();
+	const [failed, setFailed] = useState(false);
+	let t5;
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = draftMutations.publish();
+		t6 = () => setFailed(false);
+		$[10] = t5;
+		$[11] = t6;
+	} else {
+		t5 = $[10];
+		t6 = $[11];
+	}
+	let t7;
+	if ($[12] !== leaveDraft || $[13] !== onOpenChange || $[14] !== preview) {
+		t7 = (result) => {
+			if ("publishing" in result && result.publishing) {
+				preview.refetch();
+				return;
+			}
+			if (!result.empty) {
+				onOpenChange(false);
+				return leaveDraft(result.ended);
+			}
+			toast.info("This draft has no changes, so there is nothing to publish.");
+			preview.refetch();
+		};
+		$[12] = leaveDraft;
+		$[13] = onOpenChange;
+		$[14] = preview;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== preview) {
+		t8 = (error) => {
+			if (failedOnCamoxSide(error)) setFailed(true);
+			else if (error.code !== PUBLISH_BLOCKED_ERROR) toast.error(error.message);
+			preview.refetch();
+		};
+		$[16] = preview;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t7 || $[19] !== t8) {
+		t9 = {
+			...t5,
+			onMutate: t6,
+			onSuccess: t7,
+			onError: t8
+		};
+		$[18] = t7;
+		$[19] = t8;
+		$[20] = t9;
+	} else t9 = $[20];
+	const publish = useMutation(t9);
+	const data = preview.data;
+	const empty = !!data && data.changes.length === 0 && !data.code;
+	const publishing = publish.isPending || !!data?.code?.publishing;
+	let T0;
+	let T1;
+	let t10;
+	let t11;
+	let t12;
+	let t13;
+	let t14;
+	if ($[21] !== data || $[22] !== draft.data || $[23] !== failed || $[24] !== onOpenChange || $[25] !== open || $[26] !== projectId || $[27] !== showInCanvas) {
+		const lines = data ? reviewLines(data) : [];
+		if (failed && !lines.includes(PUBLISH_FAILED)) lines.push(PUBLISH_FAILED);
+		T1 = Dialog;
+		t13 = open;
+		t14 = onOpenChange;
+		T0 = DialogContent;
+		t10 = "flex max-h-[85vh] flex-col gap-4 sm:max-w-lg";
+		let t15;
+		if ($[35] !== draft.data) {
+			t15 = draft.data ? draftLabel(draft.data) : "Draft";
+			$[35] = draft.data;
+			$[36] = t15;
+		} else t15 = $[36];
+		if ($[37] !== t15) {
+			t11 = /* @__PURE__ */ jsx(DialogHeader, {
+				className: "pr-8",
+				children: /* @__PURE__ */ jsx(DialogTitle, {
+					className: "truncate text-base",
+					children: t15
+				})
+			});
+			$[37] = t15;
+			$[38] = t11;
+		} else t11 = $[38];
+		t12 = data ? /* @__PURE__ */ jsxs("div", {
+			className: "-mx-6 flex min-h-0 flex-col gap-4 overflow-y-auto px-6",
+			children: [
+				/* @__PURE__ */ jsx(DraftOverview, {
+					projectId,
+					preview: data
+				}),
+				/* @__PURE__ */ jsx(Blockers, {
+					blockers: data.blockers,
+					onShow: (target) => {
+						onOpenChange(false);
+						showInCanvas(target);
+					}
+				}),
+				lines.map(_temp7)
+			]
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center py-6",
+			children: /* @__PURE__ */ jsx(Spinner, { className: "text-muted-foreground" })
+		});
+		$[21] = data;
+		$[22] = draft.data;
+		$[23] = failed;
+		$[24] = onOpenChange;
+		$[25] = open;
+		$[26] = projectId;
+		$[27] = showInCanvas;
+		$[28] = T0;
+		$[29] = T1;
+		$[30] = t10;
+		$[31] = t11;
+		$[32] = t12;
+		$[33] = t13;
+		$[34] = t14;
+	} else {
+		T0 = $[28];
+		T1 = $[29];
+		t10 = $[30];
+		t11 = $[31];
+		t12 = $[32];
+		t13 = $[33];
+		t14 = $[34];
+	}
+	const t15 = !data || data.blockers.length > 0 || empty || publishing;
+	let t16;
+	if ($[39] !== data || $[40] !== projectId || $[41] !== publish) {
+		t16 = () => data && publish.mutate(publishInput(projectId, data));
+		$[39] = data;
+		$[40] = projectId;
+		$[41] = publish;
+		$[42] = t16;
+	} else t16 = $[42];
+	let t17;
+	if ($[43] !== publishing) {
+		t17 = publishing ? /* @__PURE__ */ jsx(Spinner, {}) : null;
+		$[43] = publishing;
+		$[44] = t17;
+	} else t17 = $[44];
+	let t18;
+	if ($[45] !== t15 || $[46] !== t16 || $[47] !== t17) {
+		t18 = /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsxs(Button, {
+			disabled: t15,
+			onClick: t16,
+			children: [t17, "Publish"]
+		}) });
+		$[45] = t15;
+		$[46] = t16;
+		$[47] = t17;
+		$[48] = t18;
+	} else t18 = $[48];
+	let t19;
+	if ($[49] !== T0 || $[50] !== t10 || $[51] !== t11 || $[52] !== t12 || $[53] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(T0, {
+			className: t10,
+			children: [
+				t11,
+				t12,
+				t18
+			]
+		});
+		$[49] = T0;
+		$[50] = t10;
+		$[51] = t11;
+		$[52] = t12;
+		$[53] = t18;
+		$[54] = t19;
+	} else t19 = $[54];
+	let t20;
+	if ($[55] !== T1 || $[56] !== t13 || $[57] !== t14 || $[58] !== t19) {
+		t20 = /* @__PURE__ */ jsx(T1, {
+			open: t13,
+			onOpenChange: t14,
+			children: t19
+		});
+		$[55] = T1;
+		$[56] = t13;
+		$[57] = t14;
+		$[58] = t19;
+		$[59] = t20;
+	} else t20 = $[59];
+	return t20;
+}
+function _temp7(line) {
+	return /* @__PURE__ */ jsx("p", {
+		className: "text-sm text-amber-700 dark:text-amber-400",
+		"data-review-line": true,
+		children: line
+	}, line);
+}
+
+//#endregion
+export { ReviewDraftDialog, fixBlockersMessage };