camox 0.53.1 → 0.54.0

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

@@ -1,3 +1,4 @@
+import { Squareling } from "./Squareling.js";
 import { ThreadMarkdown } from "./ThreadMarkdown.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -8,143 +9,161 @@ import { MessageScroller, MessageScrollerButton, MessageScrollerContent, Message
 
 //#region src/features/studio/components/ThreadMessages.tsx
 /**
-* A thread's messages, and "Working…" while a run is going or a message is still `sending`: on
-* its way to the thread, which hasn't accepted it yet. While the end of a turn builds the
-* agent's code, or the agent fixes a build error, it says so instead. A draft's thread is shared, so it shows
-* senders' names too (`showSenders`). 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 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`).
 */
 function ThreadMessages(t0) {
-	const $ = c(28);
-	const { view, sending: t1, showSenders: t2, continuedIn } = t0;
+	const $ = c(20);
+	const { view, sending: t1, continuedIn } = t0;
 	const sending = t1 === void 0 ? false : t1;
-	const showSenders = t2 === void 0 ? false : t2;
 	const working = view.running || sending;
 	if (view.messages.length === 0 && !working) {
-		let t3;
+		let t2;
 		if ($[0] !== continuedIn) {
-			t3 = continuedIn && /* @__PURE__ */ jsx(ContinuedIn, { link: continuedIn });
+			t2 = continuedIn && /* @__PURE__ */ jsx(ContinuedIn, { link: continuedIn });
 			$[0] = continuedIn;
-			$[1] = t3;
-		} else t3 = $[1];
-		let t4;
+			$[1] = t2;
+		} else t2 = $[1];
+		let t3;
 		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-			t4 = /* @__PURE__ */ jsx("p", {
+			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."
 			});
-			$[2] = t4;
-		} else t4 = $[2];
-		let t5;
-		if ($[3] !== t3) {
-			t5 = /* @__PURE__ */ jsxs("div", {
+			$[2] = t3;
+		} else t3 = $[2];
+		let t4;
+		if ($[3] !== t2) {
+			t4 = /* @__PURE__ */ jsxs("div", {
 				className: "flex min-h-0 flex-1 flex-col",
-				children: [t3, t4]
+				children: [t2, t3]
 			});
-			$[3] = t3;
-			$[4] = t5;
-		} else t5 = $[4];
-		return t5;
+			$[3] = t2;
+			$[4] = t4;
+		} else t4 = $[4];
+		return t4;
 	}
-	let t3;
+	let t2;
 	if ($[5] !== continuedIn) {
-		t3 = continuedIn && /* @__PURE__ */ jsx(ContinuedIn, { link: continuedIn });
+		t2 = continuedIn && /* @__PURE__ */ jsx(ContinuedIn, { link: continuedIn });
 		$[5] = continuedIn;
-		$[6] = t3;
-	} else t3 = $[6];
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== view || $[8] !== working) {
+		t3 = 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 })]
+		}, message.id));
+		$[7] = view;
+		$[8] = working;
+		$[9] = t3;
+	} else t3 = $[9];
 	let t4;
-	if ($[7] !== showSenders || $[8] !== view.messages || $[9] !== view.status || $[10] !== working) {
-		let t5;
-		if ($[12] !== showSenders || $[13] !== view.messages.length || $[14] !== view.status || $[15] !== working) {
-			t5 = (message, index) => /* @__PURE__ */ jsxs(MessageScrollerItem, {
-				messageId: message.id,
-				scrollAnchor: message.from === "editor",
-				className: "flex flex-col gap-4",
-				children: [/* @__PURE__ */ jsx(ThreadMessageRow, {
-					message,
-					showSender: showSenders
-				}), working && index === view.messages.length - 1 && /* @__PURE__ */ jsx(Working, { status: view.status })]
-			}, message.id);
-			$[12] = showSenders;
-			$[13] = view.messages.length;
-			$[14] = view.status;
-			$[15] = working;
-			$[16] = t5;
-		} else t5 = $[16];
-		t4 = view.messages.map(t5);
-		$[7] = showSenders;
-		$[8] = view.messages;
-		$[9] = view.status;
-		$[10] = working;
-		$[11] = t4;
-	} else t4 = $[11];
+	if ($[10] !== view || $[11] !== working) {
+		t4 = working && view.messages.length === 0 && /* @__PURE__ */ jsx(Working, { view });
+		$[10] = view;
+		$[11] = working;
+		$[12] = t4;
+	} else t4 = $[12];
 	let t5;
-	if ($[17] !== view.messages.length || $[18] !== view.status || $[19] !== working) {
-		t5 = working && view.messages.length === 0 && /* @__PURE__ */ jsx(Working, { status: view.status });
-		$[17] = view.messages.length;
-		$[18] = view.status;
-		$[19] = working;
-		$[20] = t5;
-	} else t5 = $[20];
-	let t6;
-	if ($[21] !== t3 || $[22] !== t4 || $[23] !== t5) {
-		t6 = /* @__PURE__ */ jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs(MessageScrollerContent, {
+	if ($[13] !== t2 || $[14] !== t3 || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs(MessageScrollerContent, {
 			className: "flex flex-col gap-4 px-2 py-3",
 			children: [
+				t2,
 				t3,
-				t4,
-				t5
+				t4
 			]
 		}) });
-		$[21] = t3;
-		$[22] = t4;
-		$[23] = t5;
-		$[24] = t6;
-	} else t6 = $[24];
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t4;
+		$[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 ($[25] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = /* @__PURE__ */ jsx(MessageScrollerButton, {});
-		$[25] = t7;
-	} else t7 = $[25];
-	let t8;
-	if ($[26] !== t6) {
-		t8 = /* @__PURE__ */ jsx(MessageScrollerProvider, { children: /* @__PURE__ */ jsxs(MessageScroller, {
+	if ($[18] !== t5) {
+		t7 = /* @__PURE__ */ jsx(MessageScrollerProvider, { children: /* @__PURE__ */ jsxs(MessageScroller, {
 			className: "min-h-0 flex-1",
-			children: [t6, t7]
+			children: [t5, t6]
 		}) });
-		$[26] = t6;
-		$[27] = t8;
-	} else t8 = $[27];
-	return t8;
+		$[18] = t5;
+		$[19] = t7;
+	} else t7 = $[19];
+	return t7;
 }
 /**
 * 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 Working(t0) {
-	const $ = c(2);
-	const { status } = t0;
-	const t1 = status ? STATUS_LINES[status] : "Working…";
+	const $ = c(10);
+	const { view: t1 } = t0;
+	const { status, usingTools } = t1;
 	let t2;
-	if ($[0] !== t1) {
-		t2 = /* @__PURE__ */ jsx("p", {
+	if ($[0] !== status || $[1] !== usingTools) {
+		t2 = squarelingStatus(status, usingTools);
+		$[0] = status;
+		$[1] = usingTools;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Squareling, {
+			status: t2,
+			className: "size-6"
+		});
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== status) {
+		t4 = 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];
+	let t5;
+	if ($[7] !== t3 || $[8] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
 			role: "status",
-			className: "shimmer text-muted-foreground text-sm",
-			children: t1
+			className: "text-muted-foreground flex items-center gap-2 text-sm",
+			children: [t3, t4]
 		});
-		$[0] = t1;
-		$[1] = t2;
-	} else t2 = $[1];
-	return t2;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
+}
+function squarelingStatus(status, usingTools) {
+	if (status === "fixing") return "fixing";
+	return status === "building" || usingTools ? "acting" : "thinking";
 }
 const STATUS_LINES = {
 	building: "Building…",
 	fixing: "Fixing a build error…"
 };
 function ThreadMessageRow(t0) {
-	const $ = c(20);
-	const { message, showSender } = t0;
+	const $ = c(14);
+	const { message } = t0;
 	if (message.from === "stopped" || message.from === "failed") {
 		const t1 = message.from === "stopped" ? `Stopped by ${message.sender.name}` : "Camox couldn’t finish this. Send your message again to retry.";
 		let t2;
@@ -198,18 +217,8 @@ function ThreadMessageRow(t0) {
 		$[8] = t1;
 	} else t1 = $[8];
 	let t2;
-	if ($[9] !== message.sender || $[10] !== showSender) {
-		t2 = showSender && /* @__PURE__ */ jsx(MessageHeader, {
-			className: "text-muted-foreground text-xs",
-			children: message.sender.name
-		});
-		$[9] = message.sender;
-		$[10] = showSender;
-		$[11] = t2;
-	} else t2 = $[11];
-	let t3;
-	if ($[12] !== message.text) {
-		t3 = /* @__PURE__ */ jsx(Bubble, {
+	if ($[9] !== message.text) {
+		t2 = /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx(Bubble, {
 			align: "end",
 			variant: "muted",
 			className: "max-w-full",
@@ -217,28 +226,21 @@ function ThreadMessageRow(t0) {
 				className: "whitespace-pre-wrap",
 				children: message.text
 			})
+		}) });
+		$[9] = message.text;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== t1 || $[12] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Message, {
+			align: "end",
+			children: [t1, t2]
 		});
-		$[12] = message.text;
+		$[11] = t1;
+		$[12] = t2;
 		$[13] = t3;
 	} else t3 = $[13];
-	let t4;
-	if ($[14] !== t2 || $[15] !== t3) {
-		t4 = /* @__PURE__ */ jsxs(MessageContent, { children: [t2, t3] });
-		$[14] = t2;
-		$[15] = t3;
-		$[16] = t4;
-	} else t4 = $[16];
-	let t5;
-	if ($[17] !== t1 || $[18] !== t4) {
-		t5 = /* @__PURE__ */ jsxs(Message, {
-			align: "end",
-			children: [t1, t4]
-		});
-		$[17] = t1;
-		$[18] = t4;
-		$[19] = t5;
-	} else t5 = $[19];
-	return t5;
+	return t3;
 }
 function ContinuedIn(t0) {
 	const $ = c(4);

package/dist/features/vite/bundlerLogs.js

@@ -10,6 +10,7 @@ function withoutExpectedCamoxLogs(onLog) {
 function isExpectedCamoxLog(log) {
 	if (log.code === "MODULE_LEVEL_DIRECTIVE") return log.message.includes("\"use client\"");
 	if (log.code === "INEFFECTIVE_DYNAMIC_IMPORT") return log.message.includes("virtual:camox/app");
+	if (log.code === "SOURCEMAP_BROKEN") return log.message.includes("(@tailwindcss/vite:");
 	return false;
 }
 

package/dist/features/vite/runtimeDev.js

@@ -30,6 +30,8 @@ const VIRTUAL_BLOCK_CHUNKS = "virtual:camox/block-chunks";
 const RESOLVED_VIRTUAL_BLOCK_CHUNKS = "\0" + VIRTUAL_BLOCK_CHUNKS;
 const VIRTUAL_APP_STYLESHEET_URL = "virtual:camox/app-stylesheet-url";
 const RESOLVED_VIRTUAL_APP_STYLESHEET_URL = "\0" + VIRTUAL_APP_STYLESHEET_URL;
+const VIRTUAL_APP_STYLESHEET = "virtual:camox/app-stylesheet";
+const RESOLVED_VIRTUAL_APP_STYLESHEET = "\0" + VIRTUAL_APP_STYLESHEET;
 const VIRTUAL_STUDIO_CSS = "virtual:camox-studio-css";
 const RESOLVED_VIRTUAL_STUDIO_CSS = "\0" + VIRTUAL_STUDIO_CSS;
 const VIRTUAL_OVERLAY_CSS = "virtual:camox-overlay-css";
@@ -197,6 +199,11 @@ function generateVirtualAppStylesheetUrl() {
 export default stylesheetUrl;
 `;
 }
+/** The app's compiled stylesheet as text, which page images render with. */
+function generateVirtualAppStylesheet() {
+	return `export { default } from "/src/styles.css?inline";
+`;
+}
 function generateVirtualCamoxServer(runtimeBasePath) {
 	return `import {
   handleCamoxRequest as handleRuntimeRequest,
@@ -227,6 +234,8 @@ const options = {
   developmentDraft: __CAMOX_DEVELOPMENT_DRAFT__,
   getCamoxApp: async () => camoxApp,
   getDocument: async () => camoxDocument,
+  // Loaded by the first page image, so the stylesheet stays out of the Worker's main chunk.
+  getImageStylesheet: () => import("virtual:camox/app-stylesheet").then((module) => module.default),
   projectUuid: __CAMOX_PROJECT_ID__,
   renderPage,
   renderStudio,
@@ -272,6 +281,7 @@ function resolveRuntimeDevId(id, importer) {
 	if (id === VIRTUAL_RENDERER_CLIENT) return RESOLVED_VIRTUAL_RENDERER_CLIENT;
 	if (id === VIRTUAL_RENDERER_CLIENT_URL) return RESOLVED_VIRTUAL_RENDERER_CLIENT_URL;
 	if (id === VIRTUAL_APP_STYLESHEET_URL) return RESOLVED_VIRTUAL_APP_STYLESHEET_URL;
+	if (id === VIRTUAL_APP_STYLESHEET) return RESOLVED_VIRTUAL_APP_STYLESHEET;
 	if (id === VIRTUAL_BLOCK_CHUNKS) return RESOLVED_VIRTUAL_BLOCK_CHUNKS;
 	if (id === VIRTUAL_STUDIO_CSS) return RESOLVED_VIRTUAL_STUDIO_CSS;
 	if (id === VIRTUAL_OVERLAY_CSS) return RESOLVED_VIRTUAL_OVERLAY_CSS;
@@ -291,6 +301,7 @@ function loadRuntimeDevModule(id, options = {}) {
 	if (id === RESOLVED_VIRTUAL_RENDERER_CLIENT) return generateVirtualRendererClient();
 	if (id === RESOLVED_VIRTUAL_RENDERER_CLIENT_URL) return generateVirtualRendererClientUrl();
 	if (id === RESOLVED_VIRTUAL_APP_STYLESHEET_URL) return generateVirtualAppStylesheetUrl();
+	if (id === RESOLVED_VIRTUAL_APP_STYLESHEET) return generateVirtualAppStylesheet();
 	if (id === RESOLVED_VIRTUAL_STUDIO_CSS) {
 		const cssUrl = `/@fs/${resolve(sdkRoot, "dist/studio.css").replaceAll("\\", "/").replace(/^\/+/, "")}`;
 		return `export default ${JSON.stringify(cssUrl)};`;

package/dist/features/vite/vite.js

@@ -123,7 +123,8 @@ const CAMOX_OPTIMIZED_DEPS = [
 	"camox > @shikijs/themes/github-dark-high-contrast",
 	"camox > @shikijs/themes/github-light",
 	"camox > @sinclair/typebox",
-	"camox > @takumi-rs/image-response",
+	"camox > takumi-js/helpers",
+	"camox > takumi-js/response",
 	"camox > @tanstack/react-form",
 	"camox > @tanstack/react-query",
 	"camox > @tanstack/react-router",
@@ -189,6 +190,7 @@ function camox(options) {
 	return {
 		name: "camox",
 		enforce: "pre",
+		sharedDuringBuild: true,
 		resolveId(id, importer) {
 			if (hostedProject) {
 				const forbidden = forbiddenImport(hostedProject, id, importer);

package/dist/package.js

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