import React from "react"; import * as Sentry from "@sentry/react"; import { HeadContent, Outlet, Scripts, createRootRoute, useLocation, useNavigate, } from "@tanstack/react-router"; import { AutumnProvider } from "autumn-js/react"; import posthog from "posthog-js"; import { PostHogProvider } from "posthog-js/react"; import type { FrontendErrorReporter } from "@executor-js/react/api/error-reporting"; import { ExecutorProvider } from "@executor-js/react/api/provider"; import { OrganizationProvider } from "@executor-js/react/api/organization-context"; import { Skeleton } from "@executor-js/react/components/skeleton"; import { Toaster } from "@executor-js/react/components/sonner"; import { ExecutorPluginsProvider } from "@executor-js/sdk/client"; import { plugins as clientPlugins } from "virtual:executor/plugins-client"; import { AuthProvider, useAuth } from "../web/auth"; import { SupportOptions } from "../web/components/support-options"; import { LoginPage } from "../web/pages/login"; import { Shell } from "../web/shell"; import appCss from "@executor-js/react/globals.css?url"; const ONBOARDING_PATHS = new Set(["/create-org", "/setup-mcp"]); if (typeof window !== "undefined" && import.meta.env.VITE_PUBLIC_SENTRY_DSN) { Sentry.init({ dsn: import.meta.env.VITE_PUBLIC_SENTRY_DSN, tunnel: "/api/sentry-tunnel", tracesSampleRate: 0, replaysSessionSampleRate: 0.1, replaysOnErrorSampleRate: 1.0, }); } if (typeof window !== "undefined" && import.meta.env.VITE_PUBLIC_POSTHOG_KEY) { const analyticsPath = (import.meta.env.VITE_PUBLIC_ANALYTICS_PATH ?? "a").replace( /^\/+|\/+$/g, "", ); posthog.init(import.meta.env.VITE_PUBLIC_POSTHOG_KEY, { api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST ?? `${window.location.origin}/api/${analyticsPath}`, ui_host: "https://us.posthog.com", defaults: "2025-05-24", person_profiles: "identified_only", disable_session_recording: false, session_recording: { maskAllInputs: true, maskTextSelector: "[data-ph-mask]", blockSelector: "[data-ph-block]", }, }); } const captureFrontendError: FrontendErrorReporter = (error, context) => { Sentry.captureException(error, (scope) => { scope.setTag("executor.ui.surface", context.surface); scope.setTag("executor.ui.action", context.action); scope.setTag("executor.ui.severity", context.severity ?? "error"); scope.setContext("executor.ui", { surface: context.surface, action: context.action, message: context.message, metadata: context.metadata, }); return scope; }); }; export const Route = createRootRoute({ head: () => ({ meta: [ { charSet: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1" }, { title: "Executor Cloud" }, ], links: [ { rel: "icon", type: "image/x-icon", href: "/favicon.ico" }, { rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32.png" }, { rel: "icon", type: "image/png", sizes: "192x192", href: "/favicon-192.png" }, { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" }, { rel: "preconnect", href: "https://fonts.googleapis.com" }, { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }, { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Instrument+Serif&family=JetBrains+Mono:wght@400;500&display=swap", }, { rel: "stylesheet", href: appCss }, ], }), component: RootComponent, shellComponent: RootDocument, }); function RootDocument({ children }: { children: React.ReactNode }) { return ( {children} ); } function RootComponent() { return ( ); } function ShellSkeleton() { return (
{/* Desktop sidebar skeleton */} {/* Main content skeleton */}
{/* Mobile top bar */}
{Array.from({ length: 6 }).map((_, i) => ( ))}
); } function ShellErrorFallback() { return (
!

Something went wrong

We've tracked it. Give refreshing a try, and get in touch if support is needed.

Get support

); } function AuthGate() { const auth = useAuth(); const location = useLocation(); const navigate = useNavigate(); const isOnboardingRoute = ONBOARDING_PATHS.has(location.pathname); const needsOrgRedirect = auth.status === "authenticated" && auth.organization == null && !isOnboardingRoute; React.useEffect(() => { if (needsOrgRedirect) { void navigate({ to: "/create-org", replace: true }); } }, [needsOrgRedirect, navigate]); if (auth.status === "loading") { return ; } if (auth.status === "unauthenticated") { return ; } if (isOnboardingRoute) { return ; } if (auth.organization == null) { return ; } return ( } showDialog={false}> }> ); }