camox 0.58.1 → 0.60.2

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

@@ -14,9 +14,9 @@ import { MessageScroller, MessageScrollerButton, MessageScrollerContent, Message
 * A thread's messages, and the agent's squareling, which always lives in it. An empty thread has
 * it greet the editor; when the first message arrives, it moves to the end of the thread, and
 * stays there after each message. While a run is going or a message is still `sending` (on its
-* way to the thread, which hasn't accepted it yet), its face says whether the agent thinks or
-* acts (uses its tools, or builds its code). While the end of a turn builds the agent's code, or
-* the agent fixes a build error, it says so in words too. Each editor's message shows its
+* way to the thread, which hasn't accepted it yet), its face and a line beside it say what the
+* agent does, never how: thinking, looking around, making changes, building, fixing the build,
+* or starting a draft. Each editor's message shows its
 * sender's avatar, without their name. A Live turn handed off to a draft ends on the draft's
 * card, which `onOpenDraft` opens.
 */
@@ -154,69 +154,145 @@ function useSquarelingMorph(empty) {
 	return node;
 }
 /**
-* The squareling at the end of the thread: idle between turns, at work during one. Shown in the
-* last message, not after it: the scroller only brings a message the editor just sent into view
-* when it's appended last, and it arrives while the agent is already working.
+* The squareling at the end of the thread: idle between turns, at work during one, saying what
+* the agent does. Shown in the last message, not after it: the scroller only brings a message the
+* editor just sent into view when it's appended last, and it arrives while the agent is already
+* working.
 */
 function AgentPresence(t0) {
-	const $ = c(13);
+	const $ = c(8);
 	const { view: t1, working, squareling } = t0;
-	const { status, usingTools } = t1;
-	let t2;
-	if ($[0] !== status || $[1] !== usingTools || $[2] !== working) {
-		t2 = working ? squarelingStatus(status, usingTools) : "idle";
-		$[0] = status;
-		$[1] = usingTools;
-		$[2] = working;
-		$[3] = t2;
-	} else t2 = $[3];
+	const { activity } = t1;
+	const shown = useSteadyActivity(working ? activity ?? "thinking" : void 0);
+	const t2 = shown ? SQUARELING_STATUSES[shown] : "idle";
 	let t3;
-	if ($[4] !== squareling || $[5] !== t2) {
+	if ($[0] !== squareling || $[1] !== t2) {
 		t3 = /* @__PURE__ */ jsx(Squareling, {
 			ref: squareling,
 			status: t2,
 			className: "size-6"
 		});
-		$[4] = squareling;
-		$[5] = t2;
-		$[6] = t3;
-	} else t3 = $[6];
+		$[0] = squareling;
+		$[1] = t2;
+		$[2] = t3;
+	} else t3 = $[2];
 	let t4;
-	if ($[7] !== status || $[8] !== working) {
-		t4 = working && (status ? /* @__PURE__ */ jsx("span", {
+	if ($[3] !== shown) {
+		t4 = shown && /* @__PURE__ */ jsx("span", {
 			className: "shimmer",
-			children: STATUS_LINES[status]
-		}) : /* @__PURE__ */ jsx("span", {
-			className: "sr-only",
-			children: "Working…"
-		}));
-		$[7] = status;
-		$[8] = working;
-		$[9] = t4;
-	} else t4 = $[9];
+			children: ACTIVITY_LINES[shown]
+		});
+		$[3] = shown;
+		$[4] = t4;
+	} else t4 = $[4];
 	let t5;
-	if ($[10] !== t3 || $[11] !== t4) {
+	if ($[5] !== t3 || $[6] !== t4) {
 		t5 = /* @__PURE__ */ jsxs("div", {
 			role: "status",
 			className: "text-muted-foreground flex items-center gap-2 text-sm",
 			children: [t3, t4]
 		});
-		$[10] = t3;
-		$[11] = t4;
-		$[12] = t5;
-	} else t5 = $[12];
+		$[5] = t3;
+		$[6] = t4;
+		$[7] = t5;
+	} else t5 = $[7];
 	return t5;
 }
-function squarelingStatus(status, usingTools) {
-	if (status === "fixing") return "fixing";
-	return status === "building" || usingTools ? "acting" : "thinking";
+/**
+* How long a line saying what the agent does stays at least, in ms, so editors have time to read
+* it: a round of tool calls can take far less.
+*/
+const ACTIVITY_MIN_DURATION = 2e3;
+/**
+* How long the agent must keep doing something before a line says so, in ms: thinking briefly
+* between two rounds of tool calls never shows.
+*/
+const ACTIVITY_SETTLE_DURATION = 800;
+/**
+* `activity` as a line shows it, steadied: a new activity shows once it lasted
+* `ACTIVITY_SETTLE_DURATION` and the line before held for `ACTIVITY_MIN_DURATION`, so a brief
+* one never shows. Only the line lags: a turn that starts or ends shows at once.
+*/
+function useSteadyActivity(activity) {
+	const $ = c(10);
+	let t0;
+	if ($[0] !== activity) {
+		t0 = { activity };
+		$[0] = activity;
+		$[1] = t0;
+	} else t0 = $[1];
+	const [latest, setLatest] = React.useState(t0);
+	const [lasted, setLasted] = React.useState();
+	let t1;
+	if ($[2] !== activity) {
+		t1 = { activity };
+		$[2] = activity;
+		$[3] = t1;
+	} else t1 = $[3];
+	const [held, setHeld] = React.useState(t1);
+	const [settled, setSettled] = React.useState();
+	let t2;
+	let t3;
+	if ($[4] !== latest) {
+		t2 = () => {
+			const timer = setTimeout(() => setLasted(latest), 800);
+			return () => clearTimeout(timer);
+		};
+		t3 = [latest];
+		$[4] = latest;
+		$[5] = t2;
+		$[6] = t3;
+	} else {
+		t2 = $[5];
+		t3 = $[6];
+	}
+	React.useEffect(t2, t3);
+	let t4;
+	let t5;
+	if ($[7] !== held) {
+		t4 = () => {
+			const timer_0 = setTimeout(() => setSettled(held), ACTIVITY_MIN_DURATION);
+			return () => clearTimeout(timer_0);
+		};
+		t5 = [held];
+		$[7] = held;
+		$[8] = t4;
+		$[9] = t5;
+	} else {
+		t4 = $[8];
+		t5 = $[9];
+	}
+	React.useEffect(t4, t5);
+	if (activity !== latest.activity) setLatest({ activity });
+	else if (activity !== held.activity) {
+		if (!activity || !held.activity || lasted === latest && settled === held) setHeld({ activity });
+	}
+	return activity && (held.activity ?? activity);
 }
-const STATUS_LINES = {
+const SQUARELING_STATUSES = {
+	thinking: "thinking",
+	exploring: "exploring",
+	changing: "changing",
+	building: "building",
+	fixing: "fixing",
+	startingDraft: "changing"
+};
+const ACTIVITY_LINES = {
+	thinking: "Thinking…",
+	exploring: "Looking around…",
+	changing: "Making changes…",
 	building: "Building…",
-	fixing: "Fixing a build error…"
+	fixing: "Fixing the build…",
+	startingDraft: "Starting a draft…"
+};
+/** How a member's pushed code built, as the thread says it. */
+const PUSH_OUTCOMES = {
+	built: "Built, and in the preview.",
+	typeErrors: "Built, with type errors that block publishing.",
+	notPreviewed: "Built, but the preview can’t show it."
 };
 function ThreadMessageRow(t0) {
-	const $ = c(17);
+	const $ = c(36);
 	const { message, onOpenDraft } = t0;
 	if (message.from === "draft") {
 		let t1;
@@ -253,17 +329,87 @@ function ThreadMessageRow(t0) {
 		} else t1 = $[6];
 		return t1;
 	}
+	if (message.from === "push") {
+		const commits = message.subjects.length;
+		let t1;
+		if ($[7] !== message.sender) {
+			t1 = /* @__PURE__ */ jsx(MessageAvatar, { children: /* @__PURE__ */ jsx(SenderAvatar, { sender: message.sender }) });
+			$[7] = message.sender;
+			$[8] = t1;
+		} else t1 = $[8];
+		const t2 = `${message.sender.name} pushed ${commits} ${commits === 1 ? "commit" : "commits"}`;
+		let t3;
+		if ($[9] !== t2) {
+			t3 = /* @__PURE__ */ jsx(MessageHeader, {
+				className: "text-muted-foreground text-xs",
+				children: t2
+			});
+			$[9] = t2;
+			$[10] = t3;
+		} else t3 = $[10];
+		let t4;
+		if ($[11] !== message.subjects) {
+			t4 = message.subjects.map(_temp);
+			$[11] = message.subjects;
+			$[12] = t4;
+		} else t4 = $[12];
+		let t5;
+		if ($[13] !== t4) {
+			t5 = /* @__PURE__ */ jsx("ul", {
+				className: "flex flex-col gap-0.5",
+				children: t4
+			});
+			$[13] = t4;
+			$[14] = t5;
+		} else t5 = $[14];
+		const t6 = PUSH_OUTCOMES[message.outcome];
+		let t7;
+		if ($[15] !== t6) {
+			t7 = /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs",
+				children: t6
+			});
+			$[15] = t6;
+			$[16] = t7;
+		} else t7 = $[16];
+		let t8;
+		if ($[17] !== t5 || $[18] !== t7) {
+			t8 = /* @__PURE__ */ jsxs("div", {
+				"data-thread-push": true,
+				className: DRAFT_CARD_CLASSES,
+				children: [t5, t7]
+			});
+			$[17] = t5;
+			$[18] = t7;
+			$[19] = t8;
+		} else t8 = $[19];
+		let t9;
+		if ($[20] !== t3 || $[21] !== t8) {
+			t9 = /* @__PURE__ */ jsxs(MessageContent, { children: [t3, t8] });
+			$[20] = t3;
+			$[21] = t8;
+			$[22] = t9;
+		} else t9 = $[22];
+		let t10;
+		if ($[23] !== t1 || $[24] !== t9) {
+			t10 = /* @__PURE__ */ jsxs(Message, { children: [t1, t9] });
+			$[23] = t1;
+			$[24] = t9;
+			$[25] = t10;
+		} else t10 = $[25];
+		return t10;
+	}
 	if (message.from === "camox") {
 		let t1;
-		if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
 			t1 = /* @__PURE__ */ jsx(MessageHeader, {
 				className: "text-muted-foreground text-xs",
 				children: "Camox"
 			});
-			$[7] = t1;
-		} else t1 = $[7];
+			$[26] = t1;
+		} else t1 = $[26];
 		let t2;
-		if ($[8] !== message.text) {
+		if ($[27] !== message.text) {
 			t2 = /* @__PURE__ */ jsx(Message, { children: /* @__PURE__ */ jsxs(MessageContent, { children: [t1, /* @__PURE__ */ jsx(Bubble, {
 				variant: "muted",
 				className: "max-w-full",
@@ -272,19 +418,19 @@ function ThreadMessageRow(t0) {
 					children: message.text
 				})
 			})] }) });
-			$[8] = message.text;
-			$[9] = t2;
-		} else t2 = $[9];
+			$[27] = message.text;
+			$[28] = t2;
+		} else t2 = $[28];
 		return t2;
 	}
 	let t1;
-	if ($[10] !== message.sender) {
+	if ($[29] !== message.sender) {
 		t1 = /* @__PURE__ */ jsx(MessageAvatar, { children: /* @__PURE__ */ jsx(SenderAvatar, { sender: message.sender }) });
-		$[10] = message.sender;
-		$[11] = t1;
-	} else t1 = $[11];
+		$[29] = message.sender;
+		$[30] = t1;
+	} else t1 = $[30];
 	let t2;
-	if ($[12] !== message.text) {
+	if ($[31] !== message.text) {
 		t2 = /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx(Bubble, {
 			align: "end",
 			variant: "muted",
@@ -294,21 +440,27 @@ function ThreadMessageRow(t0) {
 				children: message.text
 			})
 		}) });
-		$[12] = message.text;
-		$[13] = t2;
-	} else t2 = $[13];
+		$[31] = message.text;
+		$[32] = t2;
+	} else t2 = $[32];
 	let t3;
-	if ($[14] !== t1 || $[15] !== t2) {
+	if ($[33] !== t1 || $[34] !== t2) {
 		t3 = /* @__PURE__ */ jsxs(Message, {
 			align: "end",
 			children: [t1, t2]
 		});
-		$[14] = t1;
-		$[15] = t2;
-		$[16] = t3;
-	} else t3 = $[16];
+		$[33] = t1;
+		$[34] = t2;
+		$[35] = t3;
+	} else t3 = $[35];
 	return t3;
 }
+function _temp(subject, index) {
+	return /* @__PURE__ */ jsx("li", {
+		className: "font-mono text-xs",
+		children: subject
+	}, index);
+}
 const initials = (name) => name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);
 const DRAFT_CARD_CLASSES = "bg-muted/50 flex w-full flex-col items-start gap-0.5 rounded-lg border px-3 py-2 text-left text-sm";
 /**
@@ -424,4 +576,4 @@ function SenderAvatar(t0) {
 }
 
 //#endregion
-export { ThreadMessages };
+export { ACTIVITY_MIN_DURATION, ThreadMessages };

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

@@ -1,5 +1,5 @@
-import { useAuthContext, useAuthState } from "../../../lib/auth.js";
 import { useNavigate } from "../../navigation/navigation.js";
+import { useAuthContext, useAuthState } from "../../../lib/auth.js";
 import { useLocalePath, useLocalizedPath } from "../../../lib/view-locale.js";
 import { previewStore, selectIsCanvasShown } from "../../preview/previewStore.js";
 import { PlatformLabel } from "../../../components/PlatformLabel.js";
@@ -7,8 +7,8 @@ import { STUDIO_BASE_PATH } from "../routes.js";
 import { studioStore } from "../studioStore.js";
 import { useApplyTheme } from "../useTheme.js";
 import { c } from "react/compiler-runtime";
-import { useSelector } from "@xstate/store-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useSelector } from "@xstate/store-react";
 import { Button } from "@camox/ui/button";
 import { Check, Command, EyeOff, LogOut, Monitor, Moon, Settings, Sun, User } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarImage } from "@camox/ui/avatar";

package/dist/features/studio/draftLabel.js

@@ -5,10 +5,9 @@ const dayFormat = new Intl.DateTimeFormat(void 0, {
 });
 /**
 * A draft's name, or for an unnamed draft its creator and creation date formatted for the
-* viewer, e.g. "Rémi, Oct 13". A development draft is the development draft.
+* viewer, e.g. "Rémi, Oct 13".
 */
 function draftLabel(draft) {
-	if (draft.kind === "development") return "Development draft";
 	if (draft.name) return draft.name;
 	return `${draft.createdBy.name}, ${dayFormat.format(draft.createdAt)}`;
 }

package/dist/features/studio/draftNotice.js

@@ -3,7 +3,6 @@
 function draftNoticeMessage(notice) {
 	switch (notice.reason) {
 		case "missing": return "This draft doesn't exist, so you're viewing Live.";
-		case "noDevelopmentDraft": return "Your development draft doesn't exist until the dev server syncs your definitions, so you're viewing Live.";
 		case "forbidden": return "You can't open this draft, so you're viewing Live.";
 		case "ended": return `${notice.endedBy.name} ${notice.outcome} this draft, so you're viewing Live.`;
 	}

package/dist/features/studio/editorWhereContext.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+//#region src/features/studio/editorWhereContext.ts
+/**
+* Where the editor is in the Website Section: the Page they look at, or the Canvas with no page
+* selected. Undefined elsewhere in the Studio. Their messages to the agent carry it as a hint.
+*/
+const EditorWhereContext = React.createContext(void 0);
+
+//#endregion
+export { EditorWhereContext };

package/dist/features/studio/showInCanvas.js

@@ -1,7 +1,7 @@
-import { useProjectUuid } from "../../lib/auth.js";
 import { localizedPath } from "../../lib/locale-path.js";
 import { useViewLocale } from "../../lib/view-locale-context.js";
 import { useLocation, useNavigate } from "../navigation/navigation.js";
+import { useProjectUuid } from "../../lib/auth.js";
 import { reads, useStudioCache } from "../../lib/studio-reads.js";
 import { previewStore, sameEditingOwner } from "../preview/previewStore.js";
 import { fieldTypesDictionary } from "../../core/lib/fieldTypes.js";

package/dist/features/studio/useEditorSelection.js

@@ -0,0 +1,135 @@
+import { placedRecords } from "../../lib/normalized-data.js";
+import { reads, useReadQuery } from "../../lib/studio-reads.js";
+import { useBlockDefinition, useCollectionDefinition } from "../../lib/studio-definitions.js";
+import { isBlockPlacement, previewStore, selectionBlockId, selectionForOwner, selectionItemId } from "../preview/previewStore.js";
+import { entityName } from "../preview/entityName.js";
+import { contentFieldSchema } from "../preview/components/contentFieldSchema.js";
+import { formatFieldName } from "../preview/components/ItemFieldsEditor.js";
+import { getSchemaForItem } from "../preview/components/SelectionEditor.js";
+import { c } from "react/compiler-runtime";
+import { useSelector } from "@xstate/store-react";
+
+//#region src/features/studio/useEditorSelection.ts
+/** The owner the page the editor looks at edits, as the editing frame names it. */
+function ownerOf(where) {
+	if (where?.on !== "page") return null;
+	if (where.layoutId != null) return {
+		kind: "layout",
+		layoutId: where.layoutId
+	};
+	if (where.pageId != null) return {
+		kind: "page",
+		pageId: where.pageId
+	};
+	return null;
+}
+/** The selection as the agent reads it, from the parts the studio loaded. */
+function editorSelectionOf({ selection, block, items, schema, records, recordSchema }) {
+	const fieldLabel = (fieldSchema, fieldName) => contentFieldSchema(fieldSchema, fieldName)?.title ?? formatFieldName(fieldName);
+	const path = [];
+	const blockId = selectionBlockId(selection) ?? void 0;
+	if (blockId) path.push(block?.title ?? "Block");
+	for (const item of items) path.push(entityName(item, "Item"));
+	const recordSelected = selection.type === "record" || selection.type === "record-field";
+	if (recordSelected) path.push(...records.length > 0 ? records.map((record) => record.title || "Record") : ["Record"]);
+	let fieldName;
+	if (selection.type === "block-field" || selection.type === "item-field") {
+		fieldName = selection.fieldName;
+		path.push(fieldLabel(schema, fieldName));
+	} else if (selection.type === "record-field") {
+		fieldName = selection.recordFieldName;
+		path.push(fieldLabel(recordSchema, fieldName));
+	}
+	const itemId = selectionItemId(selection) ?? void 0;
+	const recordId = recordSelected ? selection.nested?.recordId ?? selection.recordId : void 0;
+	return {
+		path,
+		...blockId ? { blockId } : {},
+		...itemId ? { itemId } : {},
+		...recordId ? { recordId } : {},
+		...fieldName ? { fieldName } : {}
+	};
+}
+/**
+* What the editor has selected on the page they look at, as the agent reads it, or undefined
+* with nothing selected there.
+*/
+function useEditorSelection(where) {
+	const $ = c(12);
+	let t0;
+	if ($[0] !== where) {
+		t0 = ownerOf(where);
+		$[0] = where;
+		$[1] = t0;
+	} else t0 = $[1];
+	const owner = t0;
+	let t1;
+	if ($[2] !== owner) {
+		t1 = (state) => selectionForOwner(state.context, owner);
+		$[2] = owner;
+		$[3] = t1;
+	} else t1 = $[3];
+	const selection = useSelector(previewStore, t1);
+	const blockId = selectionBlockId(selection);
+	const itemId = selectionItemId(selection);
+	const t2 = blockId != null;
+	let t3;
+	if ($[4] !== t2) {
+		t3 = { enabled: t2 };
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	const { data: bundle } = useReadQuery(reads.blockBundle(blockId), t3);
+	const blockDef = useBlockDefinition(bundle?.block.type);
+	bundle?.repeatableItems;
+	let t4;
+	if ($[6] !== bundle?.repeatableItems) {
+		t4 = bundle?.repeatableItems ?? [];
+		$[6] = bundle?.repeatableItems;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t4) {
+		t5 = new Map(t4.map(_temp));
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	const itemsMap = t5;
+	const items = [];
+	for (let item_0 = itemId ? itemsMap.get(itemId) : void 0; item_0;) {
+		items.unshift(item_0);
+		item_0 = item_0.parentItemId ? itemsMap.get(item_0.parentItemId) : void 0;
+	}
+	const schema = blockDef && itemId ? getSchemaForItem(blockDef.contentSchema, itemId, itemsMap) : blockDef?.contentSchema;
+	const records = [];
+	if ((selection?.type === "record" || selection?.type === "record-field") && isBlockPlacement(selection)) {
+		const placer = itemId ? items.at(-1) : bundle?.block;
+		let t6;
+		if ($[10] !== selection.recordId) {
+			t6 = (record) => record.id === selection.recordId;
+			$[10] = selection.recordId;
+			$[11] = t6;
+		} else t6 = $[11];
+		const outer = placedRecords(placer?.references, selection.fieldName).find(t6);
+		if (outer) records.push(outer);
+		const { nested } = selection;
+		const linked = nested && placedRecords(outer?.references, nested.fieldName).find((record_0) => record_0.id === nested.recordId);
+		if (linked) records.push(linked);
+	}
+	const recordSchema = useCollectionDefinition(records.at(-1)?.collectionId)?.contentSchema;
+	if (!selection) return;
+	return editorSelectionOf({
+		selection,
+		block: blockDef,
+		items,
+		schema,
+		records,
+		recordSchema
+	});
+}
+function _temp(item) {
+	return [item.id, item];
+}
+
+//#endregion
+export { editorSelectionOf, useEditorSelection };