feat(code): public web interstitial for canvas share links (#66153)

Author: raquelmsmith

frontend/src/scenes/appScenes.ts

@@ -130,6 +130,7 @@ export const appScenes: Record<Scene | string, () => any> = {
     [Scene.Transformations]: () => import('./data-pipelines/TransformationsScene'),
     [Scene.EventFiltering]: () => import('./data-pipelines/event-filtering/EventFilterScene'),
     [Scene.Unsubscribe]: () => import('./Unsubscribe/Unsubscribe'),
+    [Scene.CodeCanvasLink]: () => import('./code-canvas/CodeCanvasLink'),
     [Scene.VercelConnect]: () => import('./authentication/vercel/VercelConnect'),
     [Scene.VercelLinkError]: () => import('./authentication/vercel/VercelLinkError'),
     [Scene.AgenticAccountMismatch]: () => import('./authentication/account/AgenticAccountMismatch'),

frontend/src/scenes/code-canvas/CodeCanvasLink.tsx

@@ -0,0 +1,81 @@
+import { useEffect } from 'react'
+
+import { IconLaptop } from '@posthog/icons'
+
+import { BridgePage } from 'lib/components/BridgePage/BridgePage'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { SceneExport } from 'scenes/sceneTypes'
+
+export interface CodeCanvasLinkProps {
+    channelId: string
+    dashboardId: string
+}
+
+export const scene: SceneExport<CodeCanvasLinkProps> = {
+    component: CodeCanvasLink,
+    paramsToProps: ({ params: { channelId, dashboardId } }) => ({
+        channelId: channelId ?? '',
+        dashboardId: dashboardId ?? '',
+    }),
+}
+
+// The desktop app registers a different custom scheme per build: production
+// installs use `posthog-code://`, local dev builds use `posthog-code-dev://`.
+// A dev frontend (./bin/start) is exactly when you're testing against a dev
+// desktop build, so target that scheme there. Build-time constant, so it never
+// flips after mount and double-fires.
+const DESKTOP_SCHEME = process.env.NODE_ENV === 'development' ? 'posthog-code-dev' : 'posthog-code'
+
+function canvasDeepLink(channelId: string, dashboardId: string): string {
+    return `${DESKTOP_SCHEME}://canvas/${encodeURIComponent(channelId)}/${encodeURIComponent(dashboardId)}`
+}
+
+/**
+ * Public, unauthenticated bridge for desktop-app "canvas" share links
+ * (`/code/canvas/<channelId>/<dashboardId>`). On mount it deep-links into the desktop
+ * app via the `posthog-code(-dev)://` custom scheme; for visitors without the app it
+ * shows an explanation, a manual "open" button (in case the browser blocks the
+ * auto-redirect), and a download link. The canvas itself only exists in the desktop
+ * app, so nothing is rendered here beyond this interstitial.
+ */
+export function CodeCanvasLink({ channelId, dashboardId }: CodeCanvasLinkProps): JSX.Element {
+    // Null when a param is missing (a partial URL or params not yet resolved) —
+    // firing with an empty id would send a malformed `<scheme>://canvas//`.
+    const deepLink = channelId && dashboardId ? canvasDeepLink(channelId, dashboardId) : null
+
+    useEffect(() => {
+        if (deepLink) {
+            window.location.href = deepLink
+        }
+    }, [deepLink])
+
+    return (
+        <BridgePage view="code-canvas-link">
+            <div className="flex flex-col items-center gap-4 text-center max-w-lg mx-auto">
+                <IconLaptop className="text-5xl shrink-0" />
+                <h2 className="text-xl font-semibold m-0">Opening in PostHog Code…</h2>
+                <p className="text-muted mb-0">
+                    Canvases live in the PostHog Code desktop app. If it's installed, it should open automatically. If
+                    it didn't, use the button below — or download the app.
+                </p>
+                <div className="flex flex-col items-center gap-2">
+                    {deepLink && (
+                        <LemonButton
+                            type="primary"
+                            onClick={() => {
+                                window.location.href = deepLink
+                            }}
+                        >
+                            Open in PostHog Code
+                        </LemonButton>
+                    )}
+                    <LemonButton type="secondary" to="https://posthog.com/code" targetBlank>
+                        Download PostHog Code
+                    </LemonButton>
+                </div>
+            </div>
+        </BridgePage>
+    )
+}
+
+export default CodeCanvasLink

frontend/src/scenes/sceneTypes.ts

@@ -168,6 +168,7 @@ export enum Scene {
     Transformations = 'Transformations',
     EventFiltering = 'EventFiltering',
     Unsubscribe = 'Unsubscribe',
+    CodeCanvasLink = 'CodeCanvasLink',
     UserInterview = 'UserInterview',
     UserInterviewResponse = 'UserInterviewResponse',
     UserInterviews = 'UserInterviews',

frontend/src/scenes/scenes.ts

@@ -581,6 +581,7 @@ export const sceneConfigurations: Record<Scene | string, SceneConfig> = {
         iconType: 'data_pipeline',
     },
     [Scene.Unsubscribe]: { allowUnauthenticated: true, layout: 'app-raw' },
+    [Scene.CodeCanvasLink]: { allowUnauthenticated: true, layout: 'app-raw' },
     [Scene.VerifyEmail]: { allowUnauthenticated: true, layout: 'plain' },
     [Scene.WebAnalyticsPageReports]: {
         projectBased: true,
@@ -905,6 +906,7 @@ export const routes: Record<string, [Scene | string, string]> = {
     [urls.vercelLinkError()]: [Scene.VercelLinkError, 'vercelLinkError'],
     [urls.agenticAccountMismatch()]: [Scene.AgenticAccountMismatch, 'agenticAccountMismatch'],
     [urls.unsubscribe()]: [Scene.Unsubscribe, 'unsubscribe'],
+    [urls.codeCanvasLink(':channelId', ':dashboardId')]: [Scene.CodeCanvasLink, 'codeCanvasLink'],
     [urls.integrationsRedirect(':kind')]: [Scene.IntegrationsRedirect, 'integrationsRedirect'],
     [urls.integration(':slug')]: [Scene.IntegrationsLanding, 'integrationsLanding'],
     [urls.stripeConfirmInstall()]: [Scene.StripeConfirmInstall, 'stripeConfirmInstall'],

frontend/src/scenes/urls.ts

@@ -231,6 +231,7 @@ export const urls = {
     queryPerformance: (): string => '/instance/query_performance',
     materializedColumns: (): string => '/data-management/materialized-columns',
     unsubscribe: (): string => '/unsubscribe',
+    codeCanvasLink: (channelId: string, dashboardId: string): string => `/code/canvas/${channelId}/${dashboardId}`,
     integration: (slug: string): string => `/integrations/${slug}`,
     integrationsRedirect: (kind: string): string => `/integrations/${kind}/callback`,
     stripeConfirmInstall: (): string => '/integrations/stripe/confirm-install',

posthog/urls.py

@@ -548,6 +548,8 @@ def delete_events(request):
     "organization/confirm-creation",
     "login",
     "unsubscribe",
+    # Public bridge for desktop-app canvas share links — deep-links into PostHog Code.
+    r"code/canvas/[^/]+/[^/]+",
     "verify_email",
     r"agentic/account-mismatch",
     # OAuth redirect target when logging the local frontend into a remote cloud region;