[comp] Production Deploy

apps/app/src/actions/trigger/heal-access-token.ts

@@ -0,0 +1,44 @@
+'use server';
+
+import { auth } from '@trigger.dev/sdk/v3';
+import { cookies } from 'next/headers';
+
+// Server action that can set cookies (called from client components or forms)
+export async function healAndSetAccessToken(triggerJobId: string): Promise<string | null> {
+  try {
+    const cookieStore = await cookies();
+
+    const token = await auth.createPublicToken({
+      scopes: {
+        read: {
+          runs: [triggerJobId],
+        },
+      },
+    });
+
+    cookieStore.set('publicAccessToken', token);
+
+    return token;
+  } catch (error) {
+    console.error('Failed to heal and set access token:', error);
+    return null;
+  }
+}
+
+// Helper function for server components (doesn't set cookies)
+export async function createAccessToken(triggerJobId: string): Promise<string | null> {
+  try {
+    const token = await auth.createPublicToken({
+      scopes: {
+        read: {
+          runs: [triggerJobId],
+        },
+      },
+    });
+
+    return token;
+  } catch (error) {
+    console.error('Failed to create access token:', error);
+    return null;
+  }
+}

apps/app/src/app/(app)/[orgId]/components/OnboardingTracker.tsx

@@ -32,22 +32,17 @@ const getFriendlyStatusName = (status: string): string => {
     .replace(/\b\w/g, (char) => char.toUpperCase());
 };
 
-export const OnboardingTracker = ({
-  onboarding,
-  publicAccessToken,
-}: {
-  onboarding: Onboarding;
-  publicAccessToken: string;
-}) => {
+export const OnboardingTracker = ({ onboarding }: { onboarding: Onboarding }) => {
   const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
   const triggerJobId = onboarding.triggerJobId;
 
+  // useRealtimeRun will automatically get the token from TriggerProvider context
   const { run, error } = useRealtimeRun(triggerJobId || '', {
-    accessToken: publicAccessToken,
+    enabled: !!triggerJobId,
   });
 
   useEffect(() => {
-    if (!triggerJobId || !publicAccessToken) return;
+    if (!triggerJobId) return;
 
     let interval: NodeJS.Timeout;
     if (run && IN_PROGRESS_STATUSES.includes(run.status)) {
@@ -58,9 +53,9 @@ export const OnboardingTracker = ({
       setCurrentMessageIndex(0); // Reset when not in progress
     }
     return () => clearInterval(interval);
-  }, [run, triggerJobId, publicAccessToken]);
+  }, [run, triggerJobId]);
 
-  if (!triggerJobId || !publicAccessToken) {
+  if (!triggerJobId) {
     return <div className="text-muted-foreground text-sm">Unable to load onboarding tracker.</div>;
   }
 

apps/app/src/app/(app)/[orgId]/layout.tsx

@@ -3,6 +3,7 @@ import { CheckoutCompleteDialog } from '@/components/dialogs/checkout-complete-d
 import { Header } from '@/components/header';
 import { AssistantSheet } from '@/components/sheets/assistant-sheet';
 import { Sidebar } from '@/components/sidebar';
+import { TriggerTokenProvider } from '@/components/trigger-token-provider';
 import { SidebarProvider } from '@/context/sidebar-context';
 import { auth } from '@/utils/auth';
 import { db } from '@db';
@@ -27,7 +28,7 @@ export default async function Layout({
 
   const cookieStore = await cookies();
   const isCollapsed = cookieStore.get('sidebar-collapsed')?.value === 'true';
-  const publicAccessToken = cookieStore.get('publicAccessToken')?.value;
+  let publicAccessToken = cookieStore.get('publicAccessToken')?.value || undefined;
 
   // Check if user has access to this organization
   const session = await auth.api.getSession({
@@ -75,24 +76,27 @@ export default async function Layout({
   const pixelsOffset = isOnboardingRunning ? navbarHeight + onboardingHeight : navbarHeight;
 
   return (
-    <SidebarProvider initialIsCollapsed={isCollapsed}>
-      <AnimatedLayout sidebar={<Sidebar organization={organization} />} isCollapsed={isCollapsed}>
-        {onboarding?.triggerJobId && (
-          <OnboardingTracker onboarding={onboarding} publicAccessToken={publicAccessToken ?? ''} />
-        )}
-        <Header />
-        <div
-          className="textured-background mx-auto px-4 py-4"
-          style={{ minHeight: `calc(100vh - ${pixelsOffset}px)` }}
-        >
-          {children}
-        </div>
-        <AssistantSheet />
-        <Suspense fallback={null}>
-          <CheckoutCompleteDialog orgId={organization.id} />
-        </Suspense>
-      </AnimatedLayout>
-      <HotKeys />
-    </SidebarProvider>
+    <TriggerTokenProvider
+      triggerJobId={onboarding?.triggerJobId || undefined}
+      initialToken={publicAccessToken || undefined}
+    >
+      <SidebarProvider initialIsCollapsed={isCollapsed}>
+        <AnimatedLayout sidebar={<Sidebar organization={organization} />} isCollapsed={isCollapsed}>
+          {onboarding?.triggerJobId && <OnboardingTracker onboarding={onboarding} />}
+          <Header />
+          <div
+            className="textured-background mx-auto px-4 py-4"
+            style={{ minHeight: `calc(100vh - ${pixelsOffset}px)` }}
+          >
+            {children}
+          </div>
+          <AssistantSheet />
+          <Suspense fallback={null}>
+            <CheckoutCompleteDialog orgId={organization.id} />
+          </Suspense>
+        </AnimatedLayout>
+        <HotKeys />
+      </SidebarProvider>
+    </TriggerTokenProvider>
   );
 }

apps/app/src/app/(app)/setup/go/[id]/page.tsx

@@ -1,5 +1,6 @@
 import { LogoSpinner } from '@/components/logo-spinner';
-import { TriggerProvider } from '@/components/trigger-provider';
+import { TriggerTokenProvider } from '@/components/trigger-token-provider';
+import { db } from '@db';
 import { cookies } from 'next/headers';
 import { OnboardingStatus } from './components/onboarding-status';
 
@@ -10,10 +11,35 @@ interface PageProps {
 export default async function RunPage({ params }: PageProps) {
   const { id } = await params;
   const cookieStore = await cookies();
-  const publicAccessToken = cookieStore.get('publicAccessToken');
+  const publicAccessToken = cookieStore.get('publicAccessToken')?.value || undefined;
+
+  const onboarding = await db.onboarding.findUnique({
+    where: {
+      organizationId: id,
+    },
+  });
+
+  const triggerJobId = onboarding?.triggerJobId;
+
+  if (!triggerJobId) {
+    return (
+      <div className="bg-background flex min-h-dvh items-center justify-center p-6 md:p-8">
+        <div className="bg-card relative w-full max-w-[440px] border p-8 shadow-lg">
+          <div className="flex flex-col justify-center space-y-4">
+            <div className="flex flex-col justify-center gap-2 text-center">
+              <h2 className="text-xl font-semibold tracking-tight">Onboarding Not Found</h2>
+              <p className="text-muted-foreground text-sm">
+                No onboarding process found for this organization.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   return (
-    <TriggerProvider accessToken={publicAccessToken?.value ?? ''}>
+    <TriggerTokenProvider triggerJobId={triggerJobId} initialToken={publicAccessToken}>
       <div className="bg-background flex min-h-dvh items-center justify-center p-6 md:p-8">
         <div className="bg-card relative w-full max-w-[440px] border p-8 shadow-lg">
           <div className="animate-in fade-in slide-in-from-bottom-4 flex flex-col justify-center space-y-4 duration-300">
@@ -32,6 +58,6 @@ export default async function RunPage({ params }: PageProps) {
           </div>
         </div>
       </div>
-    </TriggerProvider>
+    </TriggerTokenProvider>
   );
 }

apps/app/src/components/trigger-token-provider.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { healAndSetAccessToken } from '@/actions/trigger/heal-access-token';
+import { TriggerProvider } from '@/components/trigger-provider';
+import { useEffect, useState } from 'react';
+
+interface TriggerTokenProviderProps {
+  triggerJobId?: string;
+  initialToken?: string;
+  children: React.ReactNode;
+}
+
+export function TriggerTokenProvider({
+  triggerJobId,
+  initialToken,
+  children,
+}: TriggerTokenProviderProps) {
+  const [token, setToken] = useState<string | null>(initialToken || null);
+  const [isLoading, setIsLoading] = useState(!initialToken && !!triggerJobId);
+
+  useEffect(() => {
+    async function ensureToken() {
+      if (triggerJobId && !initialToken) {
+        try {
+          // This runs as a proper server action and can set cookies
+          const healedToken = await healAndSetAccessToken(triggerJobId);
+          setToken(healedToken);
+        } catch (error) {
+          console.error('Failed to heal token:', error);
+        } finally {
+          setIsLoading(false);
+        }
+      }
+    }
+
+    ensureToken();
+  }, [triggerJobId, initialToken]);
+
+  // If we need a token but don't have one yet, show loading
+  if (triggerJobId && isLoading) {
+    return (
+      <div className="flex items-center justify-center p-4">
+        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary"></div>
+        <span className="ml-2 text-sm text-muted-foreground">Connecting...</span>
+      </div>
+    );
+  }
+
+  // If we need a token but failed to get one, show error
+  if (triggerJobId && !token && !isLoading) {
+    return (
+      <div className="flex items-center justify-center p-4">
+        <span className="text-sm text-destructive">Failed to establish connection</span>
+      </div>
+    );
+  }
+
+  // If no trigger job needed, just render children
+  if (!triggerJobId) {
+    return <>{children}</>;
+  }
+
+  // Wrap everything in TriggerProvider with the token
+  return <TriggerProvider accessToken={token || ''}>{children}</TriggerProvider>;
+}