Adds Terminal to Sandbox View

src/app/dashboard/[teamSlug]/sandboxes/[sandboxId]/terminal/error.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { DashboardRouteError } from '@/features/dashboard/shared/route-error'
+
+export default function SandboxTerminalPageError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return <DashboardRouteError error={error} reset={reset} />
+}

src/app/dashboard/[teamSlug]/sandboxes/[sandboxId]/terminal/loading.tsx

@@ -0,0 +1 @@
+export { default } from '@/features/dashboard/loading-layout'

src/app/dashboard/[teamSlug]/sandboxes/[sandboxId]/terminal/page.tsx

@@ -0,0 +1,5 @@
+import SandboxTerminalView from '@/features/dashboard/sandbox/terminal/view'
+
+export default function SandboxTerminalPage() {
+  return <SandboxTerminalView />
+}

src/app/dashboard/terminal/page.tsx

@@ -78,7 +78,15 @@ export default async function TerminalPage({
     : teamsResult.data.find((candidate) => candidate.id === resolvedTeam?.id)
 
   if (!team) {
-    return <TerminalUnavailable />
+    return (
+      <TerminalUnavailable
+        message={
+          terminalSandboxId
+            ? 'Sandbox not found or you do not have access to it.'
+            : undefined
+        }
+      />
+    )
   }
 
   const templateAvailable = terminalSandboxId
@@ -107,10 +115,13 @@ export default async function TerminalPage({
     <main className="h-dvh min-h-[360px] bg-bg p-3">
       <DashboardTerminal
         autoStart
-        initialCommand={command}
-        initialSandboxId={terminalSandboxId}
-        initialTemplate={terminalTemplate}
+        launchTarget={{
+          command,
+          sandboxId: terminalSandboxId,
+          template: terminalTemplate,
+        }}
         teamId={team.id}
+        teamSlug={team.slug}
       />
     </main>
   )

src/configs/urls.ts

@@ -35,6 +35,8 @@ export const PROTECTED_URLS = {
     `/dashboard/${teamSlug}/sandboxes/${sandboxId}/events`,
   SANDBOX_LOGS: (teamSlug: string, sandboxId: string) =>
     `/dashboard/${teamSlug}/sandboxes/${sandboxId}/logs`,
+  SANDBOX_TERMINAL: (teamSlug: string, sandboxId: string) =>
+    `/dashboard/${teamSlug}/sandboxes/${sandboxId}/terminal`,
   SANDBOX_FILESYSTEM: (teamSlug: string, sandboxId: string) =>
     `/dashboard/${teamSlug}/sandboxes/${sandboxId}/filesystem`,
 

src/core/server/api/routers/sandbox.ts

@@ -1,5 +1,7 @@
 import { millisecondsInDay } from 'date-fns/constants'
+import { Sandbox } from 'e2b'
 import { z } from 'zod'
+import { SUPABASE_AUTH_HEADERS } from '@/configs/api'
 import {
   deriveSandboxLifecycleFromEvents,
   mapApiSandboxRecordToModel,
@@ -205,4 +207,22 @@ export const sandboxRouter = createTRPCRouter({
     }),
 
   // MUTATIONS
+
+  killTerminalPty: protectedTeamProcedure
+    .input(
+      z.object({
+        sandboxId: SandboxIdSchema,
+        pid: z.number().int().positive(),
+      })
+    )
+    .mutation(async ({ ctx, input }) => {
+      const sandbox = await Sandbox.connect(input.sandboxId, {
+        domain: process.env.NEXT_PUBLIC_E2B_DOMAIN,
+        headers: {
+          ...SUPABASE_AUTH_HEADERS(ctx.session.access_token, ctx.teamId),
+        },
+      })
+
+      return sandbox.pty.kill(input.pid)
+    }),
 })

src/features/dashboard/sandbox/context.tsx

@@ -1,19 +1,41 @@
 'use client'
 
 import { useQuery } from '@tanstack/react-query'
+import Sandbox from 'e2b'
+import { useRouter } from 'next/navigation'
 import type { ReactNode } from 'react'
-import { createContext, useCallback, useContext, useMemo } from 'react'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { SUPABASE_AUTH_HEADERS } from '@/configs/api'
 import { SANDBOXES_METRICS_POLLING_MS } from '@/configs/intervals'
+import { AUTH_URLS } from '@/configs/urls'
 import type {
   SandboxDetailsModel,
   SandboxEventModel,
 } from '@/core/modules/sandboxes/models'
+import { l, serializeErrorForLog } from '@/core/shared/clients/logger/logger'
+import { supabase } from '@/core/shared/clients/supabase/client'
+import { useDashboard } from '@/features/dashboard/context'
 import { useAlignedRefetchInterval } from '@/lib/hooks/use-aligned-refetch-interval'
 import { useRouteParams } from '@/lib/hooks/use-route-params'
 import { isNotFoundError } from '@/lib/utils/trpc-errors'
 import { useTRPC } from '@/trpc/client'
 import { SANDBOX_LIFECYCLE_EVENT_KILLED } from './monitoring/utils/constants'
 
+const SANDBOX_RESUME_TIMEOUT_MS = 5 * 60 * 1000
+
+interface GetSandboxOptions {
+  requestTimeoutMs?: number
+  timeoutMs?: number
+}
+
 export interface SandboxLifecycleState {
   createdAt: string | null
   pausedAt: string | null
@@ -28,7 +50,10 @@ interface SandboxContextValue {
   isSandboxNotFound: boolean
 
   isSandboxInfoLoading: boolean
+  isSandboxResumePending: boolean
+  getSandbox: () => Promise<Sandbox>
   refetchSandboxInfo: () => Promise<void>
+  resumeSandbox: () => Promise<void>
 }
 
 const SandboxContext = createContext<SandboxContextValue | null>(null)
@@ -68,8 +93,15 @@ function buildSandboxLifecycle(
 }
 
 export function SandboxProvider({ children }: SandboxProviderProps) {
+  const router = useRouter()
+  const { team } = useDashboard()
   const { teamSlug, sandboxId } =
     useRouteParams<'/dashboard/[teamSlug]/sandboxes/[sandboxId]'>()
+  const [isSandboxResumePending, setIsSandboxResumePending] = useState(false)
+  const sandboxRef = useRef<Sandbox | null>(null)
+  const sandboxPromiseRef = useRef<Promise<Sandbox> | null>(null)
+  const sandboxConnectionKey = `${team.id}:${sandboxId}`
+  const sandboxConnectionKeyRef = useRef(sandboxConnectionKey)
 
   const trpc = useTRPC()
   const getAlignedRefetchInterval = useAlignedRefetchInterval({
@@ -114,11 +146,102 @@ export function SandboxProvider({ children }: SandboxProviderProps) {
     )
   )
 
+  const sandboxState = sandboxInfoData?.state
+
   const refetchSandboxInfo = useCallback(async () => {
     await refetch()
   }, [refetch])
 
-  const sandboxState = sandboxInfoData?.state
+  useEffect(() => {
+    sandboxConnectionKeyRef.current = sandboxConnectionKey
+    sandboxRef.current = null
+    sandboxPromiseRef.current = null
+  }, [sandboxConnectionKey])
+
+  useEffect(() => {
+    if (sandboxState === 'running') return
+
+    sandboxRef.current = null
+    sandboxPromiseRef.current = null
+  }, [sandboxState])
+
+  const connectSandbox = useCallback(
+    async (options: GetSandboxOptions = {}) => {
+      const { data } = await supabase.auth.getSession()
+
+      if (!data.session) {
+        router.replace(AUTH_URLS.SIGN_IN)
+        throw new Error('You need to sign in before connecting to sandbox.')
+      }
+
+      const connectionKey = sandboxConnectionKey
+
+      const sandbox = await Sandbox.connect(sandboxId, {
+        domain: process.env.NEXT_PUBLIC_E2B_DOMAIN,
+        timeoutMs: options.timeoutMs,
+        requestTimeoutMs: options.requestTimeoutMs,
+        headers: {
+          ...SUPABASE_AUTH_HEADERS(data.session.access_token, team.id),
+        },
+      })
+
+      if (sandboxConnectionKeyRef.current !== connectionKey) {
+        throw new Error('Sandbox connection was superseded.')
+      }
+
+      return sandbox
+    },
+    [router, sandboxConnectionKey, sandboxId, team.id]
+  )
+
+  const getSandbox = useCallback(async () => {
+    if (sandboxRef.current) {
+      return sandboxRef.current
+    }
+
+    if (!sandboxPromiseRef.current) {
+      sandboxPromiseRef.current = connectSandbox({
+        // Keep page-scoped connections from extending sandbox TTL via SDK default connect timeout.
+        timeoutMs: 1_000,
+      })
+        .then((sandbox) => {
+          sandboxRef.current = sandbox
+          return sandbox
+        })
+        .finally(() => {
+          sandboxPromiseRef.current = null
+        })
+    }
+
+    return sandboxPromiseRef.current
+  }, [connectSandbox])
+
+  const resumeSandbox = useCallback(async () => {
+    setIsSandboxResumePending(true)
+    try {
+      sandboxRef.current = null
+      sandboxPromiseRef.current = null
+
+      const sandbox = await connectSandbox({
+        timeoutMs: SANDBOX_RESUME_TIMEOUT_MS,
+      })
+      sandboxRef.current = sandbox
+
+      await refetch()
+    } catch (error) {
+      l.error(
+        {
+          key: 'sandbox_context:resume_failed',
+          error: serializeErrorForLog(error),
+          sandbox_id: sandboxId,
+        },
+        `${error instanceof Error ? error.message : 'Failed to resume sandbox'}`
+      )
+    } finally {
+      setIsSandboxResumePending(false)
+    }
+  }, [connectSandbox, refetch, sandboxId])
+
   const isRunning = sandboxState === 'running'
 
   const isSandboxNotFound =
@@ -138,7 +261,10 @@ export function SandboxProvider({ children }: SandboxProviderProps) {
         isRunning,
         isSandboxNotFound,
         isSandboxInfoLoading: isSandboxInfoPending,
+        isSandboxResumePending,
+        getSandbox,
         refetchSandboxInfo,
+        resumeSandbox,
       }}
     >
       {children}

src/features/dashboard/sandbox/inspect/context.tsx

@@ -1,7 +1,5 @@
 'use client'
 
-import Sandbox from 'e2b'
-import { useRouter } from 'next/navigation'
 import type { ReactNode } from 'react'
 import {
   createContext,
@@ -11,9 +9,6 @@ import {
   useMemo,
   useRef,
 } from 'react'
-import { SUPABASE_AUTH_HEADERS } from '@/configs/api'
-import { AUTH_URLS } from '@/configs/urls'
-import { supabase } from '@/core/shared/clients/supabase/client'
 import { useSandboxInspectAnalytics } from '@/lib/hooks/use-analytics'
 import { getParentPath, normalizePath } from '@/lib/utils/filesystem'
 import { useDashboard } from '../../context'
@@ -43,11 +38,11 @@ export default function SandboxInspectProvider({
   const { team } = useDashboard()
   const teamId = team.id
 
-  const { sandboxInfo, isRunning } = useSandboxContext()
+  const { getSandbox, sandboxInfo, isRunning } = useSandboxContext()
   const storeRef = useRef<FilesystemStore | null>(null)
   const sandboxManagerRef = useRef<SandboxManager | null>(null)
+  const connectGenerationRef = useRef(0)
 
-  const router = useRouter()
   const { trackInteraction } = useSandboxInspectAnalytics()
 
   // ---------- synchronous store initialisation ----------
@@ -66,6 +61,7 @@ export default function SandboxInspectProvider({
 
       // stop previous watcher (if any)
       if (sandboxManagerRef.current) {
+        connectGenerationRef.current += 1
         sandboxManagerRef.current.stopWatching()
         sandboxManagerRef.current = null
       }
@@ -175,41 +171,35 @@ export default function SandboxInspectProvider({
 
   const connectSandbox = useCallback(async () => {
     if (!storeRef.current || !sandboxInfo || !teamId) return
+    const generation = connectGenerationRef.current + 1
+    connectGenerationRef.current = generation
+    const store = storeRef.current
+    const sandboxId = sandboxInfo.sandboxID
 
     // (re)create the sandbox-manager when sandbox / team / root changes
     if (sandboxManagerRef.current) {
       sandboxManagerRef.current.stopWatching()
     }
 
-    const { data } = await supabase.auth.getSession()
+    const sandbox = await getSandbox()
 
-    if (!data || !data.session) {
-      router.replace(AUTH_URLS.SIGN_IN)
+    if (
+      connectGenerationRef.current !== generation ||
+      storeRef.current !== store ||
+      sandboxInfo.sandboxID !== sandboxId
+    ) {
       return
     }
 
-    const sandbox = await Sandbox.connect(sandboxInfo.sandboxID, {
-      domain: process.env.NEXT_PUBLIC_E2B_DOMAIN,
-      // Keep inspect connections from extending sandbox TTL via SDK default connect timeout.
-      timeoutMs: 1_000,
-      headers: {
-        ...SUPABASE_AUTH_HEADERS(data.session.access_token, teamId),
-      },
-    })
-
-    sandboxManagerRef.current = new SandboxManager(
-      storeRef.current,
-      sandbox,
-      rootPath
-    )
+    sandboxManagerRef.current = new SandboxManager(store, sandbox, rootPath)
     await sandboxManagerRef.current.loadDirectory(rootPath)
 
     trackInteraction('started_watching', {
       sandbox_id: sandboxInfo?.sandboxID,
       team_id: teamId,
       root_path: rootPath,
     })
-  }, [sandboxInfo, teamId, rootPath, trackInteraction, router])
+  }, [getSandbox, sandboxInfo, teamId, rootPath, trackInteraction])
 
   // handle sandbox connection / disconnection
   useEffect(() => {
@@ -220,7 +210,9 @@ export default function SandboxInspectProvider({
       return
     }
 
+    connectGenerationRef.current += 1
     sandboxManagerRef.current?.stopWatching()
+    sandboxManagerRef.current = null
 
     trackInteraction('stopped_watching', {
       sandbox_id: sandboxInfo?.sandboxID,