@scenar/cli 0.1.19 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scenar/cli",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "Scenar CLI — validate scenarios, generate narration, and render videos.",
   "license": "Apache-2.0",
   "type": "module",
@@ -27,9 +27,13 @@
   "main": "./src/index.js",
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@scenar/core": "0.1.19",
-    "@scenar/preview": "0.1.19",
-    "@scenar/sdk": "0.1.19",
+    "@bufbuild/protobuf": "^2.2.2",
+    "@connectrpc/connect": "^2.0.0",
+    "@connectrpc/connect-node": "^2.0.0",
+    "@scenar/core": "0.1.20",
+    "@scenar/preview": "0.1.20",
+    "@scenar/sdk": "0.1.20",
+    "@scenar/stubs": "0.1.20",
     "commander": "^13.0.0",
     "yaml": "^2.7.0"
   },
@@ -38,7 +42,9 @@
     "edge-tts-universal": ">=1.0.0",
     "remotion": "4.0.448",
     "@remotion/renderer": "4.0.448",
-    "@remotion/bundler": "4.0.448"
+    "@remotion/bundler": "4.0.448",
+    "vite": ">=6.0.0",
+    "@vitejs/plugin-react": ">=4.3.0"
   },
   "peerDependenciesMeta": {
     "echogarden": {
@@ -55,6 +61,12 @@
     },
     "@remotion/bundler": {
       "optional": true
+    },
+    "vite": {
+      "optional": true
+    },
+    "@vitejs/plugin-react": {
+      "optional": true
     }
   }
 }

package/src/__tests__/deploy-command.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { createProgram } from "../index.js";
+
+describe("scenar deploy", () => {
+  let stderrOutput: string;
+
+  beforeEach(() => {
+    stderrOutput = "";
+    vi.spyOn(process.stderr, "write").mockImplementation((chunk) => {
+      stderrOutput += String(chunk);
+      return true;
+    });
+    process.exitCode = undefined;
+  });
+
+  it("registers the deploy command", () => {
+    const program = createProgram();
+    const cmd = program.commands.find((c) => c.name() === "deploy");
+    expect(cmd).toBeDefined();
+    expect(cmd!.description()).toContain("embed URL");
+  });
+
+  it("accepts a bundle directory argument and exposes its options", () => {
+    const program = createProgram();
+    const cmd = program.commands.find((c) => c.name() === "deploy");
+    expect(cmd!.registeredArguments[0]!.name()).toBe("bundleDir");
+    const opts = cmd!.options.map((o) => o.long);
+    expect(opts).toContain("--backend");
+    expect(opts).toContain("--org");
+    expect(opts).toContain("--slug");
+    expect(opts).toContain("--name");
+  });
+
+  it("fails clearly when the bundle directory does not exist", async () => {
+    const program = createProgram();
+    program.exitOverride();
+    try {
+      await program.parseAsync(["node", "scenar", "deploy", "/tmp/__no_bundle__", "--org", "acme"]);
+    } catch {
+      // exitOverride
+    }
+    expect(process.exitCode).toBe(1);
+    expect(stderrOutput).toContain("Error");
+  });
+});

package/src/__tests__/deploy-flow.test.ts

@@ -0,0 +1,125 @@
+import { describe, it, expect, vi } from "vitest";
+import {
+  runDeployFlow,
+  toDeclaredFiles,
+  localViewUrl,
+  type DeployFlowDeps,
+  type UploadTarget,
+} from "../deploy/deploy-flow.js";
+import type { PackManifest } from "../pack/pack-manifest.js";
+
+const MANIFEST: PackManifest = {
+  schemaVersion: 1,
+  scenarioId: "welcome-tour",
+  files: [
+    { path: "index.html", sha256: "a".repeat(64), sizeBytes: 397, contentType: "text/html" },
+    { path: "assets/app.js", sha256: "b".repeat(64), sizeBytes: 356965, contentType: "text/javascript" },
+    { path: "scenario.json", sha256: "c".repeat(64), sizeBytes: 91, contentType: "application/json" },
+  ],
+};
+
+describe("toDeclaredFiles", () => {
+  it("maps manifest files to declared files with bigint sizes and lowercase-hex sha256", () => {
+    const declared = toDeclaredFiles(MANIFEST);
+    expect(declared).toHaveLength(3);
+    expect(declared[0]).toEqual({
+      relativePath: "index.html",
+      sha256: "a".repeat(64),
+      sizeBytes: 397n,
+      contentType: "text/html",
+    });
+    expect(typeof declared[1]!.sizeBytes).toBe("bigint");
+    expect(declared[1]!.sizeBytes).toBe(356965n);
+  });
+});
+
+describe("runDeployFlow", () => {
+  it("ensures the scenario before creating the session, then uploads then completes", async () => {
+    const calls: string[] = [];
+    const targets: UploadTarget[] = [
+      {
+        relativePath: "index.html",
+        presignedPutUrl: "https://store/idx",
+        requiredHeaders: { "Content-Type": "text/html", "x-amz-checksum-sha256": "AAAA" },
+      },
+      {
+        relativePath: "assets/app.js",
+        presignedPutUrl: "https://store/js",
+        requiredHeaders: { "Content-Type": "text/javascript", "x-amz-checksum-sha256": "BBBB" },
+      },
+    ];
+
+    const uploaded: Array<{ target: UploadTarget; bytes: number }> = [];
+
+    const deps: DeployFlowDeps = {
+      applyScenario: vi.fn(async (input) => {
+        calls.push("apply");
+        expect(input).toEqual({ org: "acme", slug: "welcome-tour", name: "Welcome" });
+        return "scn_123";
+      }),
+      createSession: vi.fn(async (scenarioId, files) => {
+        calls.push("create");
+        expect(scenarioId).toBe("scn_123");
+        expect(files).toHaveLength(3);
+        return { deployId: "dep_456", uploadTargets: targets };
+      }),
+      readBundleFile: vi.fn(async (rel) => new Uint8Array(rel.length)),
+      uploadFile: vi.fn(async (target, bytes) => {
+        calls.push(`upload:${target.relativePath}`);
+        uploaded.push({ target, bytes: bytes.byteLength });
+      }),
+      completeSession: vi.fn(async (deployId) => {
+        calls.push("complete");
+        expect(deployId).toBe("dep_456");
+        return "https://d-dep_456.localhost:8787/";
+      }),
+      log: () => {},
+    };
+
+    const result = await runDeployFlow(deps, {
+      manifest: MANIFEST,
+      org: "acme",
+      slug: "welcome-tour",
+      name: "Welcome",
+    });
+
+    expect(result).toEqual({ deployId: "dep_456", embedUrl: "https://d-dep_456.localhost:8787/" });
+    // Ordering: ensure -> create -> upload each (in target order) -> complete.
+    expect(calls).toEqual(["apply", "create", "upload:index.html", "upload:assets/app.js", "complete"]);
+    // Required headers are passed through verbatim to each upload.
+    expect(uploaded[0]!.target.requiredHeaders).toEqual(targets[0]!.requiredHeaders);
+    expect(uploaded[1]!.target.requiredHeaders).toEqual(targets[1]!.requiredHeaders);
+  });
+
+  it("propagates a missing-embed-url failure from completion", async () => {
+    const deps: DeployFlowDeps = {
+      applyScenario: async () => "scn_1",
+      createSession: async () => ({ deployId: "dep_1", uploadTargets: [] }),
+      readBundleFile: async () => new Uint8Array(),
+      uploadFile: async () => {},
+      completeSession: async () => {
+        throw new Error("deploy completed but returned no embed_url");
+      },
+      log: () => {},
+    };
+
+    await expect(
+      runDeployFlow(deps, { manifest: MANIFEST, org: "acme", slug: "welcome-tour", name: "x" }),
+    ).rejects.toThrow(/embed_url/);
+  });
+});
+
+describe("localViewUrl", () => {
+  it("downgrades https to http for *.localhost hosts (wrangler dev serves http)", () => {
+    expect(localViewUrl("https://d-abc.localhost:8787/")).toBe("http://d-abc.localhost:8787/");
+    expect(localViewUrl("https://localhost:8787/")).toBe("http://localhost:8787/");
+  });
+
+  it("leaves production https URLs untouched", () => {
+    expect(localViewUrl("https://d-abc.scenar.ai/")).toBe("https://d-abc.scenar.ai/");
+  });
+
+  it("returns non-URL input unchanged", () => {
+    expect(localViewUrl("not a url")).toBe("not a url");
+  });
+});

package/src/__tests__/deploy-upload.test.ts

@@ -0,0 +1,39 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { putFile } from "../deploy/upload.js";
+
+const realFetch = globalThis.fetch;
+
+afterEach(() => {
+  globalThis.fetch = realFetch;
+  vi.restoreAllMocks();
+});
+
+describe("putFile", () => {
+  it("PUTs the raw bytes and replays required headers verbatim", async () => {
+    const seen: { url?: string; init?: RequestInit } = {};
+    globalThis.fetch = vi.fn(async (url: any, init: any) => {
+      seen.url = String(url);
+      seen.init = init;
+      return new Response(null, { status: 200 });
+    }) as unknown as typeof fetch;
+
+    const bytes = new Uint8Array([1, 2, 3]);
+    const headers = { "Content-Type": "text/html", "x-amz-checksum-sha256": "AAAA" };
+    await putFile("https://store/key", headers, bytes);
+
+    expect(seen.url).toBe("https://store/key");
+    expect(seen.init!.method).toBe("PUT");
+    expect(seen.init!.headers).toEqual(headers);
+    expect(seen.init!.body).toBe(bytes);
+  });
+
+  it("throws with the status and body detail on a non-2xx response", async () => {
+    globalThis.fetch = vi.fn(async () =>
+      new Response("SignatureDoesNotMatch", { status: 403, statusText: "Forbidden" }),
+    ) as unknown as typeof fetch;
+
+    await expect(putFile("https://store/key", {}, new Uint8Array())).rejects.toThrow(
+      /upload failed \(403 Forbidden\): SignatureDoesNotMatch/,
+    );
+  });
+});

package/src/__tests__/embed-snippet.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect } from "vitest";
+import { buildEmbedSnippet } from "../deploy/embed-snippet.js";
+
+describe("buildEmbedSnippet", () => {
+  const embedUrl = "https://d-dep1.scenarusercontent.net/";
+
+  it("pins the responsive box to the canonical aspect ratio and max width", () => {
+    const snippet = buildEmbedSnippet({ embedUrl, viewport: { width: 896, height: 480 } });
+    expect(snippet).toContain("aspect-ratio:896/480");
+    expect(snippet).toContain("max-width:896px");
+    expect(snippet).toContain("width:100%");
+  });
+
+  it("embeds the URL as the iframe src and lazy-loads", () => {
+    const snippet = buildEmbedSnippet({ embedUrl, viewport: { width: 896, height: 480 } });
+    expect(snippet).toContain(`src="${embedUrl}"`);
+    expect(snippet).toContain('loading="lazy"');
+  });
+
+  it("delegates autoplay and fullscreen (the host half of the permission pair)", () => {
+    const snippet = buildEmbedSnippet({ embedUrl, viewport: { width: 896, height: 480 } });
+    expect(snippet).toContain('allow="autoplay; fullscreen"');
+    expect(snippet).toContain("allowfullscreen");
+  });
+
+  it("uses a default title and honors an explicit one", () => {
+    const def = buildEmbedSnippet({ embedUrl, viewport: { width: 896, height: 480 } });
+    expect(def).toContain('title="Scenar embed"');
+
+    const named = buildEmbedSnippet({
+      embedUrl,
+      viewport: { width: 896, height: 480 },
+      title: "Welcome tour",
+    });
+    expect(named).toContain('title="Welcome tour"');
+  });
+
+  it("escapes attribute-breaking characters in the URL and title", () => {
+    const snippet = buildEmbedSnippet({
+      embedUrl: 'https://x.test/?a=1&b="2"',
+      viewport: { width: 800, height: 600 },
+      title: '<script>"&',
+    });
+    expect(snippet).toContain("https://x.test/?a=1&amp;b=&quot;2&quot;");
+    expect(snippet).toContain('title="&lt;script&gt;&quot;&amp;"');
+    // No raw quote/angle bracket leaked into an attribute value.
+    expect(snippet).not.toContain('b="2"');
+    expect(snippet).not.toContain("<script>");
+  });
+
+  it("reflects different viewports in the aspect ratio", () => {
+    const snippet = buildEmbedSnippet({ embedUrl, viewport: { width: 1280, height: 720 } });
+    expect(snippet).toContain("aspect-ratio:1280/720");
+    expect(snippet).toContain("max-width:1280px");
+  });
+});

package/src/__tests__/pack-bundle-contract.test.ts

@@ -0,0 +1,135 @@
+import { describe, it, expect } from "vitest";
+import {
+  ALLOWED_EXTENSIONS,
+  CONTENT_TYPE_BY_EXTENSION,
+  finalExtension,
+  validateRelativePath,
+  validateScenarioJson,
+  MAX_PATH_DEPTH,
+} from "../pack/bundle-contract.js";
+
+describe("bundle-contract: finalExtension", () => {
+  it("returns the lowercase final extension", () => {
+    expect(finalExtension("index.html")).toBe("html");
+    expect(finalExtension("assets/app-ABC123.JS")).toBe("js");
+    expect(finalExtension("a/b/c.min.css")).toBe("css");
+  });
+
+  it("returns empty string for dotfiles or no extension", () => {
+    expect(finalExtension("Makefile")).toBe("");
+    expect(finalExtension(".gitignore")).toBe("");
+    expect(finalExtension("dir/.keep")).toBe("");
+  });
+});
+
+describe("bundle-contract: validateRelativePath", () => {
+  it("accepts clean allowlisted paths", () => {
+    expect(validateRelativePath("index.html")).toBeNull();
+    expect(validateRelativePath("assets/index-abc.js")).toBeNull();
+    expect(validateRelativePath("assets/index-abc.css")).toBeNull();
+    expect(validateRelativePath("scenario.json")).toBeNull();
+    expect(validateRelativePath("narration/0.mp3")).toBeNull();
+  });
+
+  it("accepts raster images and modern fonts (the Vite asset case)", () => {
+    expect(validateRelativePath("assets/logo-abc.png")).toBeNull();
+    expect(validateRelativePath("assets/photo-abc.jpg")).toBeNull();
+    expect(validateRelativePath("assets/photo-abc.jpeg")).toBeNull();
+    expect(validateRelativePath("assets/anim-abc.gif")).toBeNull();
+    expect(validateRelativePath("assets/img-abc.webp")).toBeNull();
+    expect(validateRelativePath("assets/img-abc.avif")).toBeNull();
+    expect(validateRelativePath("assets/font-abc.woff2")).toBeNull();
+    expect(validateRelativePath("assets/font-abc.woff")).toBeNull();
+  });
+
+  it("normalizes the extension case before the allowlist check", () => {
+    expect(validateRelativePath("assets/LOGO-ABC.PNG")).toBeNull();
+  });
+
+  it("rejects disallowed extensions (svg active content, source maps, legacy fonts, binaries)", () => {
+    expect(validateRelativePath("assets/icon-abc.svg")).toMatch(/disallowed extension/);
+    expect(validateRelativePath("assets/app-abc.js.map")).toMatch(/disallowed extension/);
+    expect(validateRelativePath("assets/font-abc.ttf")).toMatch(/disallowed extension/);
+    expect(validateRelativePath("payload.exe")).toMatch(/disallowed extension/);
+  });
+
+  it("rejects unclean paths", () => {
+    expect(validateRelativePath("/index.html")).toMatch(/clean relative path/);
+    expect(validateRelativePath("a//b.js")).toMatch(/clean relative path/);
+  });
+
+  it("rejects traversal segments the charset regex would otherwise admit", () => {
+    expect(validateRelativePath("../escape.js")).toMatch(/segments/);
+    expect(validateRelativePath("a/../b.js")).toMatch(/segments/);
+    expect(validateRelativePath("./a.js")).toMatch(/segments/);
+  });
+
+  it("rejects dotfiles with no real extension", () => {
+    expect(validateRelativePath("a/b/.js")).toMatch(/disallowed extension/);
+  });
+
+  it("rejects paths deeper than the max depth", () => {
+    const deep = Array.from({ length: MAX_PATH_DEPTH + 1 }, (_, i) => `d${i}`).join("/") + ".js";
+    expect(validateRelativePath(deep)).toMatch(/exceeds the maximum depth/);
+  });
+});
+
+describe("bundle-contract: validateScenarioJson", () => {
+  it("accepts a valid object with a non-empty schemaVersion", () => {
+    expect(validateScenarioJson('{"schemaVersion":"1"}')).toBeNull();
+    expect(validateScenarioJson('{"schemaVersion":"1","id":"x"}')).toBeNull();
+  });
+
+  it("rejects non-objects", () => {
+    expect(validateScenarioJson("[]")).toMatch(/must be a JSON object/);
+    expect(validateScenarioJson('"x"')).toMatch(/must be a JSON object/);
+    expect(validateScenarioJson("null")).toMatch(/must be a JSON object/);
+  });
+
+  it("rejects invalid JSON", () => {
+    expect(validateScenarioJson("{not json}")).toMatch(/not valid JSON/);
+  });
+
+  it("requires a non-empty string schemaVersion", () => {
+    expect(validateScenarioJson("{}")).toMatch(/schemaVersion/);
+    expect(validateScenarioJson('{"schemaVersion":""}')).toMatch(/schemaVersion/);
+    expect(validateScenarioJson('{"schemaVersion":1}')).toMatch(/schemaVersion/);
+  });
+
+  it("rejects prototype-pollution keys", () => {
+    expect(validateScenarioJson('{"schemaVersion":"1","__proto__":{}}')).toMatch(/forbidden key/);
+    expect(validateScenarioJson('{"schemaVersion":"1","prototype":{}}')).toMatch(/forbidden key/);
+  });
+
+  it("rejects content over 1 MiB", () => {
+    const big = `{"schemaVersion":"1","pad":"${"x".repeat(1024 * 1024)}"}`;
+    expect(validateScenarioJson(big)).toMatch(/1 MiB/);
+  });
+});
+
+describe("bundle-contract: content types", () => {
+  it("maps every allowed extension to a type/subtype", () => {
+    for (const ext of ALLOWED_EXTENSIONS) {
+      const ct = CONTENT_TYPE_BY_EXTENSION[ext];
+      expect(ct).toMatch(/^[^\s/]+\/[^\s/]+$/);
+    }
+  });
+
+  it("maps each extension to its canonical MIME type (lockstep with the backend)", () => {
+    expect(CONTENT_TYPE_BY_EXTENSION).toEqual({
+      html: "text/html",
+      js: "text/javascript",
+      css: "text/css",
+      json: "application/json",
+      mp3: "audio/mpeg",
+      png: "image/png",
+      jpg: "image/jpeg",
+      jpeg: "image/jpeg",
+      gif: "image/gif",
+      webp: "image/webp",
+      avif: "image/avif",
+      woff2: "font/woff2",
+      woff: "font/woff",
+    });
+  });
+});

package/src/__tests__/pack-command.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { createProgram } from "../index.js";
+
+describe("scenar pack", () => {
+  let stderrOutput: string;
+
+  beforeEach(() => {
+    stderrOutput = "";
+    vi.spyOn(process.stderr, "write").mockImplementation((chunk) => {
+      stderrOutput += String(chunk);
+      return true;
+    });
+    process.exitCode = undefined;
+  });
+
+  it("registers the pack command", () => {
+    const program = createProgram();
+    const cmd = program.commands.find((c) => c.name() === "pack");
+    expect(cmd).toBeDefined();
+    expect(cmd!.description()).toContain("hosted embed");
+  });
+
+  it("accepts a directory argument", () => {
+    const program = createProgram();
+    const cmd = program.commands.find((c) => c.name() === "pack");
+    expect(cmd!.registeredArguments).toHaveLength(1);
+    expect(cmd!.registeredArguments[0]!.name()).toBe("dir");
+  });
+
+  it("exposes its options", () => {
+    const program = createProgram();
+    const cmd = program.commands.find((c) => c.name() === "pack");
+    const opts = cmd!.options.map((o) => o.long);
+    expect(opts).toContain("--out");
+    expect(opts).toContain("--width");
+    expect(opts).toContain("--shell-height");
+    expect(opts).toContain("--keep-temp");
+  });
+
+  it("sets exit code 1 when given a nonexistent path", async () => {
+    const program = createProgram();
+    program.exitOverride();
+    try {
+      await program.parseAsync(["node", "scenar", "pack", "/tmp/__no_such_scenar_dir__"]);
+    } catch {
+      // commander throws under exitOverride
+    }
+    expect(process.exitCode).toBe(1);
+    expect(stderrOutput).toContain("Error");
+  });
+});

package/src/__tests__/pack-generate-embed-entry.test.ts

@@ -0,0 +1,90 @@
+import { describe, it, expect } from "vitest";
+import {
+  generateEmbedEntry,
+  generateEmbedHtml,
+} from "../pack/generate-embed-entry.js";
+
+const BASE = {
+  scenarioDir: "/proj/scenarios/welcome-tour",
+  renderFilePath: "/proj/scenarios/welcome-tour/index.tsx",
+  scenarioId: "welcome-tour",
+  canonicalWidth: 896,
+  shellHeight: 480,
+} as const;
+
+describe("generateEmbedEntry", () => {
+  it("mounts ScenarioPlayer into #root with the renderStep contract", () => {
+    const src = generateEmbedEntry({ ...BASE, hasNarration: false, providersPath: null });
+    expect(src).toContain('import { createRoot } from "react-dom/client";');
+    expect(src).toContain('import { ScenarioPlayer, DemoViewport, SCENAR_CLASS } from "@scenar/react";');
+    expect(src).toContain('import { renderStep } from "/proj/scenarios/welcome-tour/index";');
+    expect(src).toContain("<ScenarioPlayer bundle={_bundle} embed>");
+    expect(src).toContain("renderStep(data, stepIndex)");
+    expect(src).toContain('getElementById("root")');
+  });
+
+  it("imports the @scenar/react theme + styles so the bundle is self-contained", () => {
+    const src = generateEmbedEntry({ ...BASE, hasNarration: false, providersPath: null });
+    expect(src).toContain('import "@scenar/react/theme.css";');
+    expect(src).toContain('import "@scenar/react/styles.css";');
+  });
+
+  it("scopes the tree with SCENAR_CLASS + DemoViewport sizing", () => {
+    const src = generateEmbedEntry({ ...BASE, hasNarration: false, providersPath: null });
+    expect(src).toContain("className={SCENAR_CLASS}");
+    expect(src).toContain("canonicalWidth={896}");
+    expect(src).toContain("shellHeight={480}");
+  });
+
+  it("fetches the narration manifest at runtime only when present", () => {
+    const without = generateEmbedEntry({ ...BASE, hasNarration: false, providersPath: null });
+    expect(without).toContain("narrationManifest: undefined,");
+    expect(without).not.toContain("useNarrationManifest");
+    expect(without).not.toContain("import _manifest");
+
+    const withNarration = generateEmbedEntry({ ...BASE, hasNarration: true, providersPath: null });
+    // Never inlines the manifest as a build-time JSON import.
+    expect(withNarration).not.toContain("import _manifest");
+    // Imports the hook and fetches the manifest from its own relative location,
+    // so clip src values resolve against ./narration/ at runtime.
+    expect(withNarration).toContain(
+      'import { ScenarioPlayer, DemoViewport, SCENAR_CLASS, useNarrationManifest } from "@scenar/react";',
+    );
+    expect(withNarration).toContain('const _resolveManifestUrl = () => "./narration/manifest.json";');
+    expect(withNarration).toContain(
+      'const _manifest = useNarrationManifest("welcome-tour", _resolveManifestUrl);',
+    );
+    expect(withNarration).toContain("narrationManifest: _manifest,");
+  });
+
+  it("wraps in PreviewProviders only when a providers file exists", () => {
+    const without = generateEmbedEntry({ ...BASE, hasNarration: false, providersPath: null });
+    expect(without).not.toContain("_Providers");
+
+    const withProviders = generateEmbedEntry({
+      ...BASE,
+      hasNarration: false,
+      providersPath: "/proj/.scenar/providers.tsx",
+    });
+    expect(withProviders).toContain(
+      'import { PreviewProviders as _Providers } from "/proj/.scenar/providers";',
+    );
+    expect(withProviders).toContain("<_Providers>");
+    expect(withProviders).toContain("</_Providers>");
+  });
+});
+
+describe("generateEmbedHtml", () => {
+  it("references the entry as an external module script (CSP-safe, no inline code)", () => {
+    const html = generateEmbedHtml("welcome-tour", "entry.tsx");
+    expect(html).toContain('<script type="module" src="./entry.tsx"></script>');
+    expect(html).toContain('<div id="root"></div>');
+    // No inline executable script body — only the external src reference.
+    expect(html).not.toMatch(/<script(?![^>]*\bsrc=)[^>]*>[^<]+<\/script>/);
+  });
+
+  it("escapes the title", () => {
+    const html = generateEmbedHtml("a<b>&c", "entry.tsx");
+    expect(html).toContain("<title>a&lt;b&gt;&amp;c</title>");
+  });
+});