feat(canvas): render authoritative cloud artifacts

Generated-By: PostHog Code
Task-Id: 3d87598e-5366-4937-8f6e-30808221241e

Author: k11kirky

packages/core/src/canvas/canvasBuildSchemas.test.ts

@@ -4,6 +4,7 @@ import {
   type CanvasBuildRecord,
   hasActiveCanvasBuild,
   latestFinishedCanvasBuild,
+  publishedCanvasBuild,
 } from "./canvasBuildSchemas";
 import { DashboardsService } from "./dashboardsService";
 import type { DesktopFsClient } from "./desktopFsClient";
@@ -17,6 +18,8 @@ function build(
     sourceVersionId: `sv-${id}`,
     buildStatus,
     diagnostics: [],
+    artifactUrl:
+      buildStatus === "ready" ? "https://usercontent.example/index.html" : null,
     pinned: false,
     createdAt: "2026-07-26T00:00:00Z",
     finishedAt:
@@ -61,6 +64,14 @@ describe("canvas build lifecycle", () => {
     expect(finished?.id).toBe("b1");
   });
 
+  it("selects only the ready build named by the published pointer", () => {
+    const ready = build("b0", "ready");
+    const value = lifecycle([build("b1", "failed"), ready]);
+    value.publishedBuildId = "b0";
+
+    expect(publishedCanvasBuild(value)).toBe(ready);
+  });
+
   it("maps the builds endpoint's snake_case body to the client shape", async () => {
     const fetchMock = vi.fn(
       async () =>
@@ -80,6 +91,7 @@ describe("canvas build lifecycle", () => {
                     message: "no lodash",
                   },
                 ],
+                artifact_url: null,
                 pinned: false,
                 created_at: "2026-07-26T00:00:00Z",
                 finished_at: "2026-07-26T00:01:00Z",

packages/core/src/canvas/canvasBuildSchemas.ts

@@ -12,12 +12,25 @@ export const canvasBuildRecordSchema = z.object({
   sourceVersionId: z.string(),
   buildStatus: canvasBuildStatusSchema,
   diagnostics: z.array(canvasDiagnosticSchema),
+  artifactUrl: z.string().url().nullable(),
   pinned: z.boolean(),
   createdAt: z.string(),
   finishedAt: z.string().nullable(),
 });
 export type CanvasBuildRecord = z.infer<typeof canvasBuildRecordSchema>;
 
+export function publishedCanvasBuild(
+  lifecycle: CanvasBuildLifecycle,
+): CanvasBuildRecord | null {
+  return (
+    lifecycle.builds.find(
+      (build) =>
+        build.id === lifecycle.publishedBuildId &&
+        build.buildStatus === "ready",
+    ) ?? null
+  );
+}
+
 export const canvasBuildLifecycleSchema = z.object({
   /** The live (last successful, still-eligible) build, null until one completes. */
   publishedBuildId: z.string().nullable(),

packages/core/src/canvas/dashboardsService.ts

@@ -357,6 +357,7 @@ export class DashboardsService {
         source_version_id: string;
         build_status: string;
         diagnostics?: unknown[];
+        artifact_url: string | null;
         pinned: boolean;
         created_at: string;
         finished_at: string | null;
@@ -370,6 +371,7 @@ export class DashboardsService {
         sourceVersionId: build.source_version_id,
         buildStatus: build.build_status,
         diagnostics: build.diagnostics ?? [],
+        artifactUrl: build.artifact_url,
         pinned: build.pinned,
         createdAt: build.created_at,
         finishedAt: build.finished_at,

packages/ui/src/features/canvas/freeform/BuiltCanvas.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { BuiltCanvas } from "./BuiltCanvas";
+
+describe("BuiltCanvas", () => {
+  it("loads an immutable artifact without granting origin or popup access", () => {
+    render(
+      <BuiltCanvas
+        artifactUrl="https://usercontent.example/build/index.html"
+        onDataRequest={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByTitle("Canvas")).toHaveAttribute(
+      "src",
+      "https://usercontent.example/build/index.html",
+    );
+    expect(screen.getByTitle("Canvas")).toHaveAttribute(
+      "sandbox",
+      "allow-scripts",
+    );
+    expect(screen.getByTitle("Canvas")).toHaveAttribute(
+      "referrerpolicy",
+      "no-referrer",
+    );
+  });
+});

packages/ui/src/features/canvas/freeform/BuiltCanvas.tsx

@@ -0,0 +1,109 @@
+import {
+  type CanvasNavIntent,
+  type CanvasToHostMessage,
+  canvasToHostMessageSchema,
+  type HostToCanvasMessage,
+} from "@posthog/core/canvas/freeformSchemas";
+import { isSafePostHogUrl } from "@posthog/shared";
+import { logger } from "@posthog/ui/shell/logger";
+import { openExternalUrl } from "@posthog/ui/shell/openExternal";
+import { useLayoutEffect, useRef } from "react";
+
+const log = logger.scope("built-canvas");
+const EXTERNAL_OPEN_MIN_INTERVAL_MS = 1_000;
+
+export interface BuiltCanvasProps {
+  artifactUrl: string;
+  onDataRequest: (method: string, payload: unknown) => Promise<unknown>;
+  onError?: (message: string, stack?: string) => void;
+  onRendered?: () => void;
+  onNavigate?: (intent: CanvasNavIntent) => void;
+}
+
+export function BuiltCanvas({
+  artifactUrl,
+  onDataRequest,
+  onError,
+  onRendered,
+  onNavigate,
+}: BuiltCanvasProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const lastExternalOpenRef = useRef(0);
+  const latest = useRef({ onDataRequest, onError, onRendered, onNavigate });
+  latest.current = { onDataRequest, onError, onRendered, onNavigate };
+
+  useLayoutEffect(() => {
+    const post = (message: HostToCanvasMessage) =>
+      iframeRef.current?.contentWindow?.postMessage(message, "*");
+
+    const route = async (message: CanvasToHostMessage) => {
+      switch (message.type) {
+        case "data-request":
+          try {
+            post({
+              channel: "posthog-canvas",
+              type: "data-response",
+              id: message.id,
+              ok: true,
+              result: await latest.current.onDataRequest(
+                message.method,
+                message.payload,
+              ),
+            });
+          } catch (error) {
+            post({
+              channel: "posthog-canvas",
+              type: "data-response",
+              id: message.id,
+              ok: false,
+              error: error instanceof Error ? error.message : String(error),
+            });
+          }
+          break;
+        case "error":
+          log.warn("Built canvas error", { message: message.message });
+          latest.current.onError?.(message.message, message.stack);
+          break;
+        case "rendered":
+          latest.current.onRendered?.();
+          break;
+        case "navigate":
+          latest.current.onNavigate?.(message.nav);
+          break;
+        case "open-external":
+          if (
+            isSafePostHogUrl(message.url) &&
+            document.activeElement === iframeRef.current &&
+            Date.now() - lastExternalOpenRef.current >=
+              EXTERNAL_OPEN_MIN_INTERVAL_MS
+          ) {
+            lastExternalOpenRef.current = Date.now();
+            openExternalUrl(message.url);
+          }
+          break;
+        case "ready":
+          break;
+      }
+    };
+
+    const onMessage = (event: MessageEvent) => {
+      if (event.source !== iframeRef.current?.contentWindow) return;
+      const parsed = canvasToHostMessageSchema.safeParse(event.data);
+      if (parsed.success) void route(parsed.data);
+    };
+
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, []);
+
+  return (
+    <iframe
+      ref={iframeRef}
+      title="Canvas"
+      sandbox="allow-scripts"
+      src={artifactUrl}
+      referrerPolicy="no-referrer"
+      className="h-full w-full border-0 bg-background"
+    />
+  );
+}

packages/ui/src/features/canvas/freeform/FreeformCanvasView.tsx

@@ -7,6 +7,7 @@ import {
   SpinnerGapIcon,
   WarningIcon,
 } from "@phosphor-icons/react";
+import { publishedCanvasBuild } from "@posthog/core/canvas/canvasBuildSchemas";
 import type { CanvasAnalyticsConfig } from "@posthog/core/canvas/freeformSchemas";
 import { useHostTRPC } from "@posthog/host-router/react";
 import {
@@ -22,6 +23,7 @@ import {
   isCanvasGenerating,
   isCanvasGenerationRunning,
 } from "@posthog/ui/features/canvas/freeform/canvasGenerationStatus";
+import { useCanvasBuilds } from "@posthog/ui/features/canvas/hooks/useCanvasBuilds";
 import { useChannels } from "@posthog/ui/features/canvas/hooks/useChannels";
 import { useCanvasChatPanelStore } from "@posthog/ui/features/canvas/stores/canvasChatPanelStore";
 import {
@@ -44,6 +46,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 import { AnimatePresence, motion } from "framer-motion";
 import { useCallback, useMemo, useRef, useState } from "react";
+import { BuiltCanvas } from "./BuiltCanvas";
 import { CanvasBuildStatus } from "./CanvasBuildStatus";
 import { CanvasFramePlaceholder } from "./CanvasFramePlaceholder";
 import { CanvasGenerateHero } from "./CanvasGenerateHero";
@@ -237,7 +240,11 @@ export function FreeformCanvasView({
   // Deriving from the record rather than waiting on the seed also means a seed
   // that never runs can't strand the canvas on a spinner.
   const renderCode = code || dashboard?.code || "";
-  const showCanvas = !!renderCode;
+  const { lifecycle } = useCanvasBuilds(dashboardId);
+  const artifactUrl = lifecycle
+    ? publishedCanvasBuild(lifecycle)?.artifactUrl
+    : null;
+  const showCanvas = !!artifactUrl || !!renderCode;
   // `isGenerating` keys off the effective task (the optimistic bridge right after
   // submit, then the polled record) and short-circuits on a terminal run — so a
   // failed/cancelled run can't strand the canvas body on the spinner.
@@ -377,15 +384,25 @@ export function FreeformCanvasView({
             // this placeholder just reserves the viewport box and owns scroll via
             // the host's overlay, so the canvas survives navigation without a reload.
             <Box className="h-full w-full">
-              <CanvasFramePlaceholder
-                dashboardId={dashboardId}
-                code={renderCode}
-                analytics={analytics}
-                onDataRequest={onDataRequest}
-                onError={onError}
-                onRendered={onRendered}
-                onNavigate={onNavigate}
-              />
+              {artifactUrl ? (
+                <BuiltCanvas
+                  artifactUrl={artifactUrl}
+                  onDataRequest={onDataRequest}
+                  onError={onError}
+                  onRendered={onRendered}
+                  onNavigate={onNavigate}
+                />
+              ) : (
+                <CanvasFramePlaceholder
+                  dashboardId={dashboardId}
+                  code={renderCode}
+                  analytics={analytics}
+                  onDataRequest={onDataRequest}
+                  onError={onError}
+                  onRendered={onRendered}
+                  onNavigate={onNavigate}
+                />
+              )}
             </Box>
           ) : (
             <ScrollArea className="h-full">