camox 0.56.0 → 0.58.0

package/dist/features/runtime/runtime.js

@@ -3,7 +3,7 @@ import { createRequestContext } from "../../core/requestContext.js";
 import { buildClearServerAuthCookieHeader, getServerAuthCookieHeader } from "../../lib/server-auth-cookie.js";
 import { UNNAMED_DEFAULT_LOCALE, localizedPath, parseLocalePath } from "../../lib/locale-path.js";
 import { draftNamedBy } from "../../lib/draft-scope.js";
-import { RUNTIME_ROUTE_PATHS, matchRuntimeOwnedRoute } from "./runtimeRoutes.js";
+import { ARTIFACTS_PATH_PREFIX, RUNTIME_ROUTE_PATHS, matchRuntimeOwnedRoute } from "./runtimeRoutes.js";
 import { reads } from "../../lib/studio-reads.js";
 import { asCollectionItem, recordMarkdownTemplate, recordPageValues } from "../../core/recordItem.js";
 import { PLATFORM_SCRIPT } from "../../lib/platform.js";
@@ -17,7 +17,8 @@ import { assetPrefix } from "./assetPrefix.js";
 import { documentGoogleFonts } from "../og/documentFonts.js";
 import { alternatesByPage, findAlternates, hreflangLinks } from "./alternates.js";
 import { configuredProviders, renderAnalyticsScripts } from "./analytics.js";
-import { omitArtifactSources } from "./artifactSources.js";
+import { createArtifactDocumentResponse, readArtifactShell } from "./artifactDocuments.js";
+import { omitArtifactSources, referenceArtifactSources } from "./artifactSources.js";
 import { readBreadcrumb } from "./breadcrumbs.js";
 import { RouteDiscoveryError, listLivePages } from "./livePages.js";
 import { formatLlmsTxt } from "./llmsTxt.js";
@@ -519,8 +520,9 @@ function preparePreviewDocument(input, options, document) {
 	input.previewDocument = `<!doctype html><html${siteHead.htmlAttrs}><head><base href="${escapeXml(href)}">${siteHead.headTags}</head><body${siteHead.bodyAttrs}>${siteHead.bodyTagsOpen}<div id="root" data-camox-preview-root></div>${siteHead.bodyTags}</body></html>`;
 }
 /**
-* The render input a page's HTML embeds for hydration. Visitors load public pages, whose HTML
-* already holds each rendered artifact source in its frame, so their copy leaves those out.
+* The render input a page's HTML embeds for hydration. Outside the studio, a page whose HTML
+* inlines its artifacts (in dev mode) already holds each rendered source in its frame, so their
+* copy leaves those out. Public pages load artifacts by URL and hold no source at all.
 */
 function hydrationInputFor(input, html) {
 	if (input.presentation === "studio") return input;
@@ -529,6 +531,21 @@ function hydrationInputFor(input, html) {
 		dehydratedState: omitArtifactSources(input.dehydratedState, html)
 	};
 }
+/**
+* The render input with its artifacts loaded by URL, where a visitor reads Live: each artifact
+* source becomes a reference to the document the website serves, so neither the page's HTML nor
+* its data carries a source, and the client renders the frames the server did. The studio, drafts
+* and dev mode keep inlined sources, so an agent's change shows at once.
+*/
+async function withArtifactsByUrl(input, options) {
+	if (input.presentation !== "public" || input.draftId || options.developmentDraft) return input;
+	const shell = await readArtifactShell(options);
+	const artifactsPath = `${input.runtimeBasePath}${ARTIFACTS_PATH_PREFIX}${shell.hash}/`;
+	return {
+		...input,
+		dehydratedState: referenceArtifactSources(input.dehydratedState, artifactsPath)
+	};
+}
 function renderStudioThemeScript(enabled) {
 	return enabled ? `<script data-camox-studio>${STUDIO_THEME_SCRIPT}${PLATFORM_SCRIPT}<\/script>` : "";
 }
@@ -841,7 +858,7 @@ async function createPageHtmlResponse({ options, pathname, located, request, pag
 			studio,
 			draftId: result.draftId
 		}, result.data.page.project);
-		const pageRenderInput = {
+		const pageRenderInput = await withArtifactsByUrl({
 			alternates,
 			project,
 			presentation: studio ? "studio" : "public",
@@ -860,7 +877,7 @@ async function createPageHtmlResponse({ options, pathname, located, request, pag
 			runtimeBasePath: normalizeRuntimeBasePath(options.runtimeBasePath),
 			locale: located.locale,
 			locales: located.locales
-		};
+		}, options);
 		preparePreviewDocument(pageRenderInput, options, document);
 		const appHtml = await options.renderPage(pageRenderInput);
 		const renderedHead = renderHead(studio ? {} : document, createPageHeadInput(head), studio ? void 0 : options.stylesheetUrl, studio ? options.studioStylesheetUrl : void 0, studio ? void 0 : located.locale);
@@ -1170,7 +1187,7 @@ async function createDerivedResponse(options, pathname, located, request, { data
 			studio,
 			draftId: read.draftId
 		}, shared.project);
-		const input = {
+		const input = await withArtifactsByUrl({
 			alternates,
 			project,
 			presentation: studio ? "studio" : "public",
@@ -1199,7 +1216,7 @@ async function createDerivedResponse(options, pathname, located, request, { data
 				result: serializedResult,
 				layout: shared.layout
 			}
-		};
+		}, options);
 		const document = await options.getDocument?.() ?? {};
 		preparePreviewDocument(input, options, document);
 		if (dataOnly) return Response.json(input, { headers: {
@@ -1350,7 +1367,7 @@ async function createPageDataResponse({ options, pathname, located, request, pag
 			localeReads: localeReads(result.draftId)
 		});
 		const dehydratedState = dehydrate(queryClient);
-		const input = {
+		const navigationInput = await withArtifactsByUrl({
 			alternates,
 			apiUrl: options.apiUrl,
 			authenticationUrl: options.authenticationUrl ?? "",
@@ -1368,9 +1385,9 @@ async function createPageDataResponse({ options, pathname, located, request, pag
 			loaderData: result.data,
 			head,
 			dehydratedState
-		};
-		preparePreviewDocument(input, options, await options.getDocument?.() ?? {});
-		return Response.json(input, { headers });
+		}, options);
+		preparePreviewDocument(navigationInput, options, await options.getDocument?.() ?? {});
+		return Response.json(navigationInput, { headers });
 	} catch (error) {
 		if (isNotFoundError(error)) {
 			const derived = await createDerivedResponse(options, pathname, located, request, { dataOnly: true });
@@ -1397,6 +1414,7 @@ async function handleCamoxRequest(request, options = {}) {
 			layouts: camoxApp.getLayouts().map((layout) => layout._internal.id)
 		});
 	}
+	if (match.kind === "artifact") return createArtifactDocumentResponse(pathname, options);
 	if (match.kind === "og") return createOgResponse(request, options);
 	if (match.kind === "renderer") return createRendererDocumentResponse(options);
 	if (match.kind === "logo") return createProjectLogoResponse(request, options);

package/dist/features/runtime/runtimeRoutes.d.ts

@@ -1,9 +1,10 @@
 //#region src/features/runtime/runtimeRoutes.d.ts
 /**
- * The URLs the runtime answers that aren't pages or the Studio. Worker request filtering, runtime
- * route matching and client navigation all read this list, so a new one can't be forgotten in any
- * of them. Prefix rules stay with their readers: the Worker also answers every `/camox/` Studio
- * path, and client navigation also skips any other `/_camox/` path.
+ * The URLs the runtime answers that aren't pages or the Studio, besides artifact documents
+ * (`ARTIFACTS_PATH_PREFIX`). Worker request filtering, runtime route matching and client
+ * navigation all match them through `matchRuntimeOwnedRoute`, so a new one can't be forgotten in
+ * any of them. Other prefix rules stay with their readers: the Worker also answers every
+ * `/camox/` Studio path, and client navigation also skips any other `/_camox/` path.
  * No imports: client navigation ships this module in the browser bundle.
  */
 export declare const RUNTIME_ROUTE_PATHS: {
@@ -18,5 +19,5 @@ export declare const RUNTIME_ROUTE_PATHS: {
   readonly sitemap: "/sitemap.xml";
   readonly "llms-txt": "/llms.txt";
 };
-export type RuntimeOwnedRouteKind = keyof typeof RUNTIME_ROUTE_PATHS;
+export type RuntimeOwnedRouteKind = keyof typeof RUNTIME_ROUTE_PATHS | "artifact";
 //#endregion

package/dist/features/runtime/runtimeRoutes.js

@@ -1,9 +1,10 @@
 //#region src/features/runtime/runtimeRoutes.ts
 /**
-* The URLs the runtime answers that aren't pages or the Studio. Worker request filtering, runtime
-* route matching and client navigation all read this list, so a new one can't be forgotten in any
-* of them. Prefix rules stay with their readers: the Worker also answers every `/camox/` Studio
-* path, and client navigation also skips any other `/_camox/` path.
+* The URLs the runtime answers that aren't pages or the Studio, besides artifact documents
+* (`ARTIFACTS_PATH_PREFIX`). Worker request filtering, runtime route matching and client
+* navigation all match them through `matchRuntimeOwnedRoute`, so a new one can't be forgotten in
+* any of them. Other prefix rules stay with their readers: the Worker also answers every
+* `/camox/` Studio path, and client navigation also skips any other `/_camox/` path.
 * No imports: client navigation ships this module in the browser bundle.
 */
 const RUNTIME_ROUTE_PATHS = {
@@ -18,11 +19,17 @@ const RUNTIME_ROUTE_PATHS = {
 	sitemap: "/sitemap.xml",
 	"llms-txt": "/llms.txt"
 };
+/**
+* Where public pages load artifacts from: `<prefix><shellHash>/<sourceHash>`. Each document is
+* cached by its own URL, never as a page.
+*/
+const ARTIFACTS_PATH_PREFIX = "/_camox/artifacts/";
 /** Which runtime-owned route a path inside the runtime (base path removed) is, if any. */
 function matchRuntimeOwnedRoute(pathname) {
 	for (const [kind, path] of Object.entries(RUNTIME_ROUTE_PATHS)) if (pathname === path) return kind;
+	if (pathname.startsWith("/_camox/artifacts/")) return "artifact";
 	return null;
 }
 
 //#endregion
-export { RUNTIME_ROUTE_PATHS, matchRuntimeOwnedRoute };
+export { ARTIFACTS_PATH_PREFIX, RUNTIME_ROUTE_PATHS, matchRuntimeOwnedRoute };

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

@@ -1,14 +1,14 @@
 import { cn } from "../../../lib/utils.js";
 import { SIDEBAR_GUTTER } from "../../preview/components/SidebarStack.js";
 import { ChatWidget } from "./ChatWidget.js";
-import { WorkersWidget } from "./WorkersWidget.js";
+import { Patrol } from "./Patrol.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/features/studio/components/AgentSidebar.tsx
 /**
-* The sidebar on the Canvas's right side, where editors work with Camox's agent: the Workers
-* widget over the Chat widget, which gets the larger share of the height. Laid over the Canvas,
+* The sidebar on the Canvas's right side, where editors work with Camox's agent: the Patrol
+* over the Chat widget, which gets the larger share of the height. Laid over the Canvas,
 * as the Content Sidebar is over its left: only the cards have a background, and the Canvas shows
 * around them. Elsewhere in the studio it is only hidden, so the chat keeps its thread and the
 * Preview and Studio pages follow the editor's runs too.
@@ -24,7 +24,7 @@ function AgentSidebar(t0) {
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = cn("absolute inset-y-0 right-0 z-10 flex flex-col gap-2 py-2 max-md:hidden", SIDEBAR_GUTTER);
 		t3 = { width: 265 };
-		t4 = /* @__PURE__ */ jsx(WorkersWidget, { className: "min-h-0 flex-[3_1_0]" });
+		t4 = /* @__PURE__ */ jsx(Patrol, { className: "min-h-0 flex-[3_1_0]" });
 		t5 = /* @__PURE__ */ jsx(ChatWidget, { className: "min-h-0 flex-[7_1_0]" });
 		$[0] = t2;
 		$[1] = t3;

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

@@ -1,5 +1,6 @@
 import { AuthContext } from "../../../lib/auth.js";
 import { useCurrentDraftId, useDraftScope } from "../../../lib/draft-scope.js";
+import { useNavigate } from "../../navigation/navigation.js";
 import { reads, useReadQuery } from "../../../lib/studio-reads.js";
 import { cn } from "../../../lib/utils.js";
 import { BOTTOM_CARD_EDGES, CARD_BODY_EDGES } from "../../preview/components/SidebarStack.js";
@@ -17,7 +18,8 @@ import { EMPTY_THREAD_VIEW } from "@camox/api-contract/threads";
 * The Agent Sidebar's Chat widget, where an editor works with Camox's agent in a thread. Elsewhere in the
 * studio it is only hidden: the studio keeps following the editor's runs there. It follows
 * where the studio is: the editor's own Live thread on Live, and the draft's thread in a draft.
-* When the Live thread starts a draft, the studio enters it with the thread.
+* When the agent on Live hands the editor's request off to a draft, the studio that asked enters
+* it, if it still shows Live; the card the Live turn ends on opens it too.
 */
 function ChatWidget(t0) {
 	const $ = c(6);
@@ -62,7 +64,7 @@ function ChatWidget(t0) {
 	return t4;
 }
 function CurrentThread() {
-	const $ = c(15);
+	const $ = c(14);
 	const { apiUrl, projectUuid } = React.useContext(AuthContext);
 	let t0;
 	if ($[0] !== projectUuid) {
@@ -73,125 +75,105 @@ function CurrentThread() {
 	const { data: project } = useReadQuery(t0);
 	const draftId = useCurrentDraftId();
 	const draftScope = useDraftScope();
-	const [carried, setCarried] = React.useState();
+	const navigate = useNavigate();
 	let t1;
 	if ($[2] !== draftScope) {
-		t1 = (started, thread) => {
-			if (draftScope.current() !== null) return;
-			const { startedDraft: _, continuedIn: __, ...state } = thread.state;
-			setCarried({
-				draftId: started,
-				thread: {
-					...thread,
-					state
-				}
-			});
-			draftScope.enterStarted(started);
-		};
+		t1 = (started) => draftScope.enterStarted(started);
 		$[2] = draftScope;
 		$[3] = t1;
 	} else t1 = $[3];
 	const enterDraft = t1;
 	let t2;
-	let t3;
-	if ($[4] !== draftScope) {
-		t2 = () => draftScope.subscribe((t4) => {
-			const { move } = t4;
-			if (move !== "started") setCarried(void 0);
+	if ($[4] !== navigate) {
+		t2 = (next) => void navigate({
+			to: window.location.href,
+			draft: next
 		});
-		t3 = [draftScope];
-		$[4] = draftScope;
+		$[4] = navigate;
 		$[5] = t2;
-		$[6] = t3;
-	} else {
-		t2 = $[5];
-		t3 = $[6];
-	}
-	React.useEffect(t2, t3);
+	} else t2 = $[5];
+	const openDraft = t2;
 	if (!project) {
-		let t4;
-		if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-			t4 = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ThreadMessages, { view: EMPTY_THREAD_VIEW }), /* @__PURE__ */ jsx(ThreadComposer, { disabled: true })] });
-			$[7] = t4;
-		} else t4 = $[7];
-		return t4;
+		let t3;
+		if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+			t3 = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ThreadMessages, { view: EMPTY_THREAD_VIEW }), /* @__PURE__ */ jsx(ThreadComposer, { disabled: true })] });
+			$[6] = t3;
+		} else t3 = $[6];
+		return t3;
 	}
-	const t4 = `${project.id}:${draftId ?? "live"}`;
-	const t5 = carried?.draftId === draftId ? carried.thread : void 0;
-	let t6;
-	if ($[8] !== apiUrl || $[9] !== draftId || $[10] !== enterDraft || $[11] !== project.id || $[12] !== t4 || $[13] !== t5) {
-		t6 = /* @__PURE__ */ jsx(Thread, {
+	const t3 = `${project.id}:${draftId ?? "live"}`;
+	let t4;
+	if ($[7] !== apiUrl || $[8] !== draftId || $[9] !== enterDraft || $[10] !== openDraft || $[11] !== project.id || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Thread, {
 			apiUrl,
 			projectId: project.id,
 			draftId,
-			carried: t5,
-			onEnterDraft: enterDraft
-		}, t4);
-		$[8] = apiUrl;
-		$[9] = draftId;
-		$[10] = enterDraft;
+			onEnterDraft: enterDraft,
+			onOpenDraft: openDraft
+		}, t3);
+		$[7] = apiUrl;
+		$[8] = draftId;
+		$[9] = enterDraft;
+		$[10] = openDraft;
 		$[11] = project.id;
-		$[12] = t4;
-		$[13] = t5;
-		$[14] = t6;
-	} else t6 = $[14];
-	return t6;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
 }
 function Thread(t0) {
 	const $ = c(26);
-	const { apiUrl, projectId, draftId, carried, onEnterDraft } = t0;
+	const { apiUrl, projectId, draftId, onEnterDraft, onOpenDraft } = t0;
 	let t1;
-	if ($[0] !== carried || $[1] !== onEnterDraft) {
-		t1 = {
-			carried,
-			onEnterDraft
-		};
-		$[0] = carried;
-		$[1] = onEnterDraft;
-		$[2] = t1;
-	} else t1 = $[2];
+	if ($[0] !== onEnterDraft) {
+		t1 = { onEnterDraft };
+		$[0] = onEnterDraft;
+		$[1] = t1;
+	} else t1 = $[1];
 	const { view, sending, send, stop, error, touched } = useThread(apiUrl, projectId, draftId, t1);
 	const follow = React.use(FollowAgentContext);
 	let t2;
-	if ($[3] !== follow) {
+	if ($[2] !== follow) {
 		t2 = (batch) => follow?.receive(batch);
-		$[3] = follow;
-		$[4] = t2;
-	} else t2 = $[4];
+		$[2] = follow;
+		$[3] = t2;
+	} else t2 = $[3];
 	const followTouched = React.useEffectEvent(t2);
 	let t3;
-	if ($[5] !== followTouched || $[6] !== touched) {
+	if ($[4] !== followTouched || $[5] !== touched) {
 		t3 = () => {
 			if (touched) followTouched(touched.batch);
 		};
-		$[5] = followTouched;
-		$[6] = touched;
-		$[7] = t3;
-	} else t3 = $[7];
+		$[4] = followTouched;
+		$[5] = touched;
+		$[6] = t3;
+	} else t3 = $[6];
 	let t4;
-	if ($[8] !== touched) {
+	if ($[7] !== touched) {
 		t4 = [touched];
-		$[8] = touched;
-		$[9] = t4;
-	} else t4 = $[9];
+		$[7] = touched;
+		$[8] = t4;
+	} else t4 = $[8];
 	React.useEffect(t3, t4);
 	let t5;
-	if ($[10] !== follow || $[11] !== send) {
+	if ($[9] !== follow || $[10] !== send) {
 		t5 = (text) => {
 			follow?.resume();
 			send(text);
 		};
-		$[10] = follow;
-		$[11] = send;
-		$[12] = t5;
-	} else t5 = $[12];
+		$[9] = follow;
+		$[10] = send;
+		$[11] = t5;
+	} else t5 = $[11];
 	const sendFollowing = t5;
 	let t6;
-	if ($[13] !== sending || $[14] !== view) {
+	if ($[12] !== onOpenDraft || $[13] !== sending || $[14] !== view) {
 		t6 = /* @__PURE__ */ jsx(ThreadMessages, {
 			view,
-			sending
+			sending,
+			onOpenDraft
 		});
+		$[12] = onOpenDraft;
 		$[13] = sending;
 		$[14] = view;
 		$[15] = t6;