Product View: live embedded browser with a PostHog analytics overlay

apps/code/electron.vite.config.ts

@@ -180,11 +180,18 @@ export default defineConfig(({ mode }) => {
         emptyOutDir: false,
         sourcemap: true,
         rollupOptions: {
-          input: { preload: path.resolve(__dirname, "src/main/preload.ts") },
+          input: {
+            preload: path.resolve(__dirname, "src/main/preload.ts"),
+            // Injected into the Product View's embedded WebContentsView (the
+            // user's own site) — isolated-world inspector + overlay renderer.
+            productViewPreload: path.resolve(
+              __dirname,
+              "src/preload/product-view-preload.ts",
+            ),
+          },
           output: {
             format: "cjs",
-            inlineDynamicImports: true,
-            entryFileNames: "preload.js",
+            entryFileNames: "[name].js",
             chunkFileNames: "[name].js",
             assetFileNames: "[name].[ext]",
           },

apps/code/src/main/di/bindings.ts

@@ -119,6 +119,7 @@ import type { CRYPTO_SERVICE } from "@posthog/platform/crypto";
 import type { DEEP_LINK_SERVICE } from "@posthog/platform/deep-link";
 import type { DEV_HOST_ACTIONS_SERVICE } from "@posthog/platform/dev-host-actions";
 import type { DIALOG_SERVICE } from "@posthog/platform/dialog";
+import type { EMBEDDED_BROWSER } from "@posthog/platform/embedded-browser";
 import type { FILE_ICON_SERVICE } from "@posthog/platform/file-icon";
 import type { IMAGE_PROCESSOR_SERVICE } from "@posthog/platform/image-processor";
 import type { MAIN_WINDOW_SERVICE } from "@posthog/platform/main-window";
@@ -236,6 +237,7 @@ import type { ElectronContextMenu } from "../platform-adapters/electron-context-
 import type { ElectronCrypto } from "../platform-adapters/electron-crypto";
 import type { ElectronDevHostActions } from "../platform-adapters/electron-dev-host-actions";
 import type { ElectronDialog } from "../platform-adapters/electron-dialog";
+import type { ElectronEmbeddedBrowser } from "../platform-adapters/electron-embedded-browser";
 import type { ElectronFileIcon } from "../platform-adapters/electron-file-icon";
 import type { ElectronImageProcessor } from "../platform-adapters/electron-image-processor";
 import type { ElectronMainWindow } from "../platform-adapters/electron-main-window";
@@ -333,6 +335,7 @@ export interface MainBindings {
   [UPDATER_SERVICE]: ElectronUpdater;
   [NOTIFIER_SERVICE]: ElectronNotifier;
   [CONTEXT_MENU_SERVICE]: ElectronContextMenu;
+  [EMBEDDED_BROWSER]: ElectronEmbeddedBrowser;
   [BUNDLED_RESOURCES_SERVICE]: ElectronBundledResources;
   [IMAGE_PROCESSOR_SERVICE]: ElectronImageProcessor;
   [WORKSPACE_SETTINGS_SERVICE]: ElectronWorkspaceSettings;

apps/code/src/main/di/container.ts

@@ -79,6 +79,7 @@ import {
   type OAuthCallbackReceiver,
 } from "@posthog/core/oauth/identifiers";
 import { oauthModule } from "@posthog/core/oauth/oauth.module";
+import { productViewCoreModule } from "@posthog/core/product-view/product-view.module";
 import { PROVISIONING_SERVICE } from "@posthog/core/provisioning/identifiers";
 import { ProvisioningService } from "@posthog/core/provisioning/provisioning";
 import { SLEEP_SERVICE } from "@posthog/core/sleep/identifiers";
@@ -109,6 +110,7 @@ import { CRYPTO_SERVICE } from "@posthog/platform/crypto";
 import { DEEP_LINK_SERVICE } from "@posthog/platform/deep-link";
 import { DEV_HOST_ACTIONS_SERVICE } from "@posthog/platform/dev-host-actions";
 import { DIALOG_SERVICE } from "@posthog/platform/dialog";
+import { EMBEDDED_BROWSER } from "@posthog/platform/embedded-browser";
 import { FILE_ICON_SERVICE } from "@posthog/platform/file-icon";
 import { IMAGE_PROCESSOR_SERVICE } from "@posthog/platform/image-processor";
 import { MAIN_WINDOW_SERVICE } from "@posthog/platform/main-window";
@@ -197,6 +199,7 @@ import { POSTHOG_PLUGIN_SERVICE } from "@posthog/workspace-server/services/posth
 import { posthogPluginModule } from "@posthog/workspace-server/services/posthog-plugin/posthog-plugin.module";
 import { PROCESS_TRACKING_SERVICE } from "@posthog/workspace-server/services/process-tracking/identifiers";
 import { processTrackingModule } from "@posthog/workspace-server/services/process-tracking/process-tracking.module";
+import { productEnvironmentsModule } from "@posthog/workspace-server/services/product-view/product-view.module";
 import { releaseFeedModule } from "@posthog/workspace-server/services/release-feed/release-feed.module";
 import { SECURE_STORE_SERVICE } from "@posthog/workspace-server/services/secure-store/identifiers";
 import { shellModule } from "@posthog/workspace-server/services/shell/shell.module";
@@ -241,6 +244,7 @@ import { ElectronContextMenu } from "../platform-adapters/electron-context-menu"
 import { ElectronCrypto } from "../platform-adapters/electron-crypto";
 import { ElectronDevHostActions } from "../platform-adapters/electron-dev-host-actions";
 import { ElectronDialog } from "../platform-adapters/electron-dialog";
+import { ElectronEmbeddedBrowser } from "../platform-adapters/electron-embedded-browser";
 import { ElectronFileIcon } from "../platform-adapters/electron-file-icon";
 import { ElectronImageProcessor } from "../platform-adapters/electron-image-processor";
 import { ElectronMainWindow } from "../platform-adapters/electron-main-window";
@@ -357,6 +361,7 @@ container.bind(POWER_MANAGER_SERVICE).to(ElectronPowerManager);
 container.bind(UPDATER_SERVICE).to(ElectronUpdater);
 container.bind(NOTIFIER_SERVICE).to(ElectronNotifier);
 container.bind(CONTEXT_MENU_SERVICE).to(ElectronContextMenu);
+container.bind(EMBEDDED_BROWSER).to(ElectronEmbeddedBrowser);
 container.bind(BUNDLED_RESOURCES_SERVICE).to(ElectronBundledResources);
 container.bind(IMAGE_PROCESSOR_SERVICE).to(ElectronImageProcessor);
 container.bind(WORKSPACE_SETTINGS_SERVICE).to(ElectronWorkspaceSettings);
@@ -813,6 +818,12 @@ container.load(canvasCoreModule);
 // service in the main process; resolved by the host-router browserTabs router.
 container.load(browserTabsModule);
 
+// Product View: the embedded-browser orchestration service (core) and the
+// per-project product-environment registry (workspace-server sqlite), both
+// resolved by the host-router productView router.
+container.load(productViewCoreModule);
+container.load(productEnvironmentsModule);
+
 container.bind(MAIN_DEV_FLAGS_SERVICE).to(DevFlagsService);
 container.bind(MAIN_DEV_METRICS_SERVICE).to(DevMetricsService);
 container.bind(MAIN_DEV_NETWORK_SERVICE).to(DevNetworkService);