camox 0.54.0 → 0.56.0

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

@@ -1,6 +1,7 @@
 import { Squareling } from "./Squareling.js";
 import { ThreadMarkdown } from "./ThreadMarkdown.js";
 import { c } from "react/compiler-runtime";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar, AvatarFallback, AvatarImage } from "@camox/ui/avatar";
 import { Bubble, BubbleContent } from "@camox/ui/bubble";
@@ -9,38 +10,42 @@ import { MessageScroller, MessageScrollerButton, MessageScrollerContent, Message
 
 //#region src/features/studio/components/ThreadMessages.tsx
 /**
-* A thread's messages, and the agent's squareling at work 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 sender's
-* avatar, without their name. A fresh Live thread links to the draft the editor's previous one
-* continued in (`continuedIn`).
+* 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
+* sender's avatar, without their name.
 */
 function ThreadMessages(t0) {
-	const $ = c(20);
-	const { view, sending: t1, continuedIn } = t0;
+	const $ = c(19);
+	const { view, sending: t1 } = t0;
 	const sending = t1 === void 0 ? false : t1;
 	const working = view.running || sending;
-	if (view.messages.length === 0 && !working) {
+	const empty = view.messages.length === 0 && !working;
+	const squareling = useSquarelingMorph(empty);
+	if (empty) {
 		let t2;
-		if ($[0] !== continuedIn) {
-			t2 = continuedIn && /* @__PURE__ */ jsx(ContinuedIn, { link: continuedIn });
-			$[0] = continuedIn;
+		if ($[0] !== squareling) {
+			t2 = /* @__PURE__ */ jsx(Squareling, {
+				ref: squareling,
+				status: "idle",
+				className: "size-10"
+			});
+			$[0] = squareling;
 			$[1] = t2;
 		} else t2 = $[1];
 		let t3;
 		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-			t3 = /* @__PURE__ */ jsx("p", {
-				"data-thread-empty": true,
-				className: "text-muted-foreground flex min-h-0 flex-1 items-center justify-center p-4 text-center text-sm",
-				children: "Ask Camox about your website’s content."
-			});
+			t3 = /* @__PURE__ */ jsx("p", { children: "How can I help?" });
 			$[2] = t3;
 		} else t3 = $[2];
 		let t4;
 		if ($[3] !== t2) {
 			t4 = /* @__PURE__ */ jsxs("div", {
-				className: "flex min-h-0 flex-1 flex-col",
+				"data-thread-empty": true,
+				className: "text-muted-foreground flex min-h-0 flex-1 flex-col items-center justify-center gap-3 p-4 text-center text-sm",
 				children: [t2, t3]
 			});
 			$[3] = t2;
@@ -49,108 +54,151 @@ function ThreadMessages(t0) {
 		return t4;
 	}
 	let t2;
-	if ($[5] !== continuedIn) {
-		t2 = continuedIn && /* @__PURE__ */ jsx(ContinuedIn, { link: continuedIn });
-		$[5] = continuedIn;
-		$[6] = t2;
-	} else t2 = $[6];
-	let t3;
-	if ($[7] !== view || $[8] !== working) {
-		t3 = view.messages.map((message, index) => /* @__PURE__ */ jsxs(MessageScrollerItem, {
+	if ($[5] !== squareling || $[6] !== view || $[7] !== working) {
+		t2 = view.messages.map((message, index) => /* @__PURE__ */ jsxs(MessageScrollerItem, {
 			messageId: message.id,
 			scrollAnchor: message.from === "editor",
 			className: "flex flex-col gap-4",
-			children: [/* @__PURE__ */ jsx(ThreadMessageRow, { message }), working && index === view.messages.length - 1 && /* @__PURE__ */ jsx(Working, { view })]
+			children: [/* @__PURE__ */ jsx(ThreadMessageRow, { message }), index === view.messages.length - 1 && /* @__PURE__ */ jsx(AgentPresence, {
+				view,
+				working,
+				squareling
+			})]
 		}, message.id));
-		$[7] = view;
-		$[8] = working;
-		$[9] = t3;
-	} else t3 = $[9];
-	let t4;
-	if ($[10] !== view || $[11] !== working) {
-		t4 = working && view.messages.length === 0 && /* @__PURE__ */ jsx(Working, { view });
+		$[5] = squareling;
+		$[6] = view;
+		$[7] = working;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== squareling || $[10] !== view || $[11] !== working) {
+		t3 = view.messages.length === 0 && /* @__PURE__ */ jsx(AgentPresence, {
+			view,
+			working,
+			squareling
+		});
+		$[9] = squareling;
 		$[10] = view;
 		$[11] = working;
-		$[12] = t4;
-	} else t4 = $[12];
-	let t5;
-	if ($[13] !== t2 || $[14] !== t3 || $[15] !== t4) {
-		t5 = /* @__PURE__ */ jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs(MessageScrollerContent, {
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== t2 || $[14] !== t3) {
+		t4 = /* @__PURE__ */ jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs(MessageScrollerContent, {
 			className: "flex flex-col gap-4 px-2 py-3",
-			children: [
-				t2,
-				t3,
-				t4
-			]
+			children: [t2, t3]
 		}) });
 		$[13] = t2;
 		$[14] = t3;
 		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(MessageScrollerButton, {});
 		$[16] = t5;
 	} else t5 = $[16];
 	let t6;
-	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ jsx(MessageScrollerButton, {});
-		$[17] = t6;
-	} else t6 = $[17];
-	let t7;
-	if ($[18] !== t5) {
-		t7 = /* @__PURE__ */ jsx(MessageScrollerProvider, { children: /* @__PURE__ */ jsxs(MessageScroller, {
+	if ($[17] !== t4) {
+		t6 = /* @__PURE__ */ jsx(MessageScrollerProvider, { children: /* @__PURE__ */ jsxs(MessageScroller, {
 			className: "min-h-0 flex-1",
-			children: [t5, t6]
+			children: [t4, t5]
 		}) });
-		$[18] = t5;
-		$[19] = t7;
-	} else t7 = $[19];
-	return t7;
+		$[17] = t4;
+		$[18] = t6;
+	} else t6 = $[18];
+	return t6;
 }
+/** How long the greeting's squareling takes to reach the end of the thread, in ms. */
+const MORPH_DURATION = 350;
+/** A strong ease-in-out, for moving across the screen. */
+const MORPH_EASING = "cubic-bezier(0.77, 0, 0.175, 1)";
 /**
-* 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.
+* Moves the squareling from where the greeting showed it to the end of the thread, as the first
+* message arrives, so it reads as the same one. Without motion for editors who reduce it.
 */
-function Working(t0) {
-	const $ = c(10);
-	const { view: t1 } = t0;
+function useSquarelingMorph(empty) {
+	const $ = c(2);
+	const node = React.useRef(null);
+	const greeting = React.useRef(null);
+	let t0;
+	if ($[0] !== empty) {
+		t0 = () => {
+			const element = node.current;
+			if (!element) return;
+			if (empty) {
+				greeting.current = element.getBoundingClientRect();
+				return;
+			}
+			const from = greeting.current;
+			greeting.current = null;
+			if (!from || matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+			const to = element.getBoundingClientRect();
+			if (to.width === 0) return;
+			const dx = from.left + from.width / 2 - (to.left + to.width / 2);
+			const dy = from.top + from.height / 2 - (to.top + to.height / 2);
+			element.animate([{ transform: `translate(${dx}px, ${dy}px) scale(${from.width / to.width})` }, { transform: "none" }], {
+				duration: MORPH_DURATION,
+				easing: MORPH_EASING
+			});
+		};
+		$[0] = empty;
+		$[1] = t0;
+	} else t0 = $[1];
+	React.useLayoutEffect(t0);
+	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.
+*/
+function AgentPresence(t0) {
+	const $ = c(13);
+	const { view: t1, working, squareling } = t0;
 	const { status, usingTools } = t1;
 	let t2;
-	if ($[0] !== status || $[1] !== usingTools) {
-		t2 = squarelingStatus(status, usingTools);
+	if ($[0] !== status || $[1] !== usingTools || $[2] !== working) {
+		t2 = working ? squarelingStatus(status, usingTools) : "idle";
 		$[0] = status;
 		$[1] = usingTools;
-		$[2] = t2;
-	} else t2 = $[2];
+		$[2] = working;
+		$[3] = t2;
+	} else t2 = $[3];
 	let t3;
-	if ($[3] !== t2) {
+	if ($[4] !== squareling || $[5] !== t2) {
 		t3 = /* @__PURE__ */ jsx(Squareling, {
+			ref: squareling,
 			status: t2,
 			className: "size-6"
 		});
-		$[3] = t2;
-		$[4] = t3;
-	} else t3 = $[4];
+		$[4] = squareling;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
 	let t4;
-	if ($[5] !== status) {
-		t4 = status ? /* @__PURE__ */ jsx("span", {
+	if ($[7] !== status || $[8] !== working) {
+		t4 = working && (status ? /* @__PURE__ */ jsx("span", {
 			className: "shimmer",
 			children: STATUS_LINES[status]
 		}) : /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "Working…"
-		});
-		$[5] = status;
-		$[6] = t4;
-	} else t4 = $[6];
+		}));
+		$[7] = status;
+		$[8] = working;
+		$[9] = t4;
+	} else t4 = $[9];
 	let t5;
-	if ($[7] !== t3 || $[8] !== t4) {
+	if ($[10] !== t3 || $[11] !== t4) {
 		t5 = /* @__PURE__ */ jsxs("div", {
 			role: "status",
 			className: "text-muted-foreground flex items-center gap-2 text-sm",
 			children: [t3, t4]
 		});
-		$[7] = t3;
-		$[8] = t4;
-		$[9] = t5;
-	} else t5 = $[9];
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
 	return t5;
 }
 function squarelingStatus(status, usingTools) {
@@ -242,31 +290,6 @@ function ThreadMessageRow(t0) {
 	} else t3 = $[13];
 	return t3;
 }
-function ContinuedIn(t0) {
-	const $ = c(4);
-	const { link } = t0;
-	let t1;
-	if ($[0] !== link.href || $[1] !== link.label || $[2] !== link.onOpen) {
-		t1 = /* @__PURE__ */ jsxs("p", {
-			className: "text-muted-foreground px-2 pt-3 text-center text-sm",
-			children: [
-				"Continued in",
-				" ",
-				/* @__PURE__ */ jsx("a", {
-					href: link.href,
-					onClick: link.onOpen,
-					className: "text-foreground underline",
-					children: link.label
-				})
-			]
-		});
-		$[0] = link.href;
-		$[1] = link.label;
-		$[2] = link.onOpen;
-		$[3] = t1;
-	} else t1 = $[3];
-	return t1;
-}
 const initials = (name) => name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);
 function SenderAvatar(t0) {
 	const $ = c(10);

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

@@ -0,0 +1,52 @@
+import { cn } from "../../../lib/utils.js";
+import { BOTTOM_CARD_EDGES, CARD_BODY_EDGES } from "../../preview/components/SidebarStack.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/features/studio/components/WorkersWidget.tsx
+/** The Agent Sidebar's Workers widget, over the Chat widget. A placeholder for now. */
+function WorkersWidget(t0) {
+	const $ = c(6);
+	const { className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = cn("flex flex-col", className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	let t3;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("header", {
+			className: cn("bg-background flex h-11 min-w-0 shrink-0 items-center justify-center px-3", BOTTOM_CARD_EDGES),
+			children: /* @__PURE__ */ jsx("h2", {
+				className: "truncate text-sm font-medium",
+				children: "Workers"
+			})
+		});
+		t3 = /* @__PURE__ */ jsx("div", {
+			className: cn("bg-background text-muted-foreground flex min-h-0 flex-1 items-center justify-center p-4 text-sm", CARD_BODY_EDGES),
+			children: "No workers yet"
+		});
+		$[2] = t2;
+		$[3] = t3;
+	} else {
+		t2 = $[2];
+		t3 = $[3];
+	}
+	let t4;
+	if ($[4] !== t1) {
+		t4 = /* @__PURE__ */ jsxs("section", {
+			"aria-label": "Workers",
+			"data-workers-widget": true,
+			className: t1,
+			children: [t2, t3]
+		});
+		$[4] = t1;
+		$[5] = t4;
+	} else t4 = $[5];
+	return t4;
+}
+
+//#endregion
+export { WorkersWidget };

package/dist/features/studio/studioStore.js

@@ -9,7 +9,7 @@ const studioStore = createStore({
 			open: false,
 			startRenaming: false
 		},
-		isDiscardDraftDialogOpen: false,
+		isDeleteDraftDialogOpen: false,
 		localeDialog: null,
 		websiteLocation: null
 	},
@@ -64,16 +64,16 @@ const studioStore = createStore({
 				}
 			};
 		},
-		openDiscardDraftDialog: (context) => {
+		openDeleteDraftDialog: (context) => {
 			return {
 				...context,
-				isDiscardDraftDialogOpen: true
+				isDeleteDraftDialogOpen: true
 			};
 		},
-		closeDiscardDraftDialog: (context) => {
+		closeDeleteDraftDialog: (context) => {
 			return {
 				...context,
-				isDiscardDraftDialogOpen: false
+				isDeleteDraftDialogOpen: false
 			};
 		},
 		openLocaleDialog: (context, event) => {

package/dist/lib/queries.js

@@ -43,7 +43,7 @@ const projectMutations = {
 };
 const draftMutations = {
 	publish: () => getOrpc().drafts.publish.mutationOptions(),
-	discard: () => getOrpc().drafts.discard.mutationOptions(),
+	delete: () => getOrpc().drafts.delete.mutationOptions(),
 	/** Requests the draft's overview again right away, once it failed. */
 	retryOverview: () => getOrpc().drafts.retryOverview.mutationOptions(),
 	/** Drops the draft's copy of an entity it conflicts on, to use Live's version instead. */

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.54.0";
+var version = "0.56.0";
 
 //#endregion
 export { version };