refactor: pause sandbox via SDK in tRPC mutation instead of REST action

Author: huv1k

src/core/server/actions/sandbox-actions.ts

@@ -59,59 +59,3 @@ export const killSandboxAction = authActionClient
       return returnServerError('Failed to kill sandbox')
     }
   })
-
-const PauseSandboxSchema = z.object({
-  teamSlug: TeamSlugSchema,
-  sandboxId: z.string().min(1, 'Sandbox ID is required'),
-})
-
-export const pauseSandboxAction = authActionClient
-  .schema(PauseSandboxSchema)
-  .metadata({ actionName: 'pauseSandbox' })
-  .use(withTeamSlugResolution)
-  .action(async ({ parsedInput, ctx }) => {
-    const { sandboxId } = parsedInput
-    const { session, teamId } = ctx
-
-    const res = await infra.POST('/sandboxes/{sandboxID}/pause', {
-      headers: {
-        ...authHeaders(session.access_token, teamId),
-      },
-      params: {
-        path: {
-          sandboxID: sandboxId,
-        },
-      },
-      body: {
-        memory: true,
-      },
-    })
-
-    if (res.error) {
-      const status = res.response.status
-
-      l.error(
-        {
-          key: 'pause_sandbox_action:infra_error',
-          error: res.error,
-          user_id: session.user.id,
-          team_id: teamId,
-          sandbox_id: sandboxId,
-          context: {
-            status,
-          },
-        },
-        `Failed to pause sandbox: ${res.error.message}`
-      )
-
-      if (status === 404) {
-        return returnServerError('Sandbox not found')
-      }
-
-      if (status === 409) {
-        return returnServerError('Sandbox is not running')
-      }
-
-      return returnServerError('Failed to pause sandbox')
-    }
-  })

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

@@ -366,6 +366,51 @@ export const sandboxRouter = createTRPCRouter({
       }
     }),
 
+  // Explicit, user-triggered pause of a running sandbox. Uses the SDK's
+  // control-plane pause (which snapshots and pauses) server-side so the
+  // account token never reaches the browser.
+  pause: protectedTeamProcedure
+    .input(
+      z.object({
+        sandboxId: SandboxIdSchema,
+        requestTimeoutMs: z.number().int().positive().optional(),
+      })
+    )
+    .mutation(async ({ ctx, input }) => {
+      const { sandboxId, requestTimeoutMs } = input
+      const { session, teamId } = ctx
+
+      const connectionOpts = {
+        apiUrl: process.env.NEXT_PUBLIC_INFRA_API_URL,
+        domain: process.env.NEXT_PUBLIC_E2B_DOMAIN,
+        sandboxUrl: process.env.NEXT_PUBLIC_E2B_SANDBOX_URL,
+        headers: authHeaders(session.access_token, teamId),
+      }
+
+      try {
+        // Returns false when the sandbox was already paused, which we treat
+        // as success since the desired end state is reached.
+        await Sandbox.pause(sandboxId, {
+          ...connectionOpts,
+          ...(requestTimeoutMs ? { requestTimeoutMs } : {}),
+        })
+      } catch (error) {
+        if (error instanceof TimeoutError) {
+          throw new TRPCError({
+            code: 'TIMEOUT',
+            message: 'Timed out pausing sandbox',
+            cause: error,
+          })
+        }
+
+        throw new TRPCError({
+          code: 'INTERNAL_SERVER_ERROR',
+          message: 'Failed to pause sandbox',
+          cause: error,
+        })
+      }
+    }),
+
   killTerminalPty: protectedTeamProcedure
     .input(
       z.object({

src/features/dashboard/sandbox/header/pause-button.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import { useAction } from 'next-safe-action/hooks'
+import { useMutation } from '@tanstack/react-query'
 import { useState } from 'react'
 import { toast } from 'sonner'
-import { pauseSandboxAction } from '@/core/server/actions/sandbox-actions'
+import { useTRPC } from '@/trpc/client'
 import { AlertPopover } from '@/ui/alert-popover'
 import { Button } from '@/ui/primitives/button'
 import { PausedIcon } from '@/ui/primitives/icons'
@@ -18,26 +18,27 @@ export default function PauseButton({ className }: PauseButtonProps) {
   const [open, setOpen] = useState(false)
   const { sandboxInfo, refetchSandboxInfo } = useSandboxContext()
   const { team } = useDashboard()
+  const trpc = useTRPC()
 
   const canPause = sandboxInfo?.state === 'running'
 
-  const { execute, isExecuting } = useAction(pauseSandboxAction, {
-    onSuccess: async () => {
-      toast.success('Sandbox paused successfully')
-      setOpen(false)
-      refetchSandboxInfo()
-    },
-    onError: ({ error }) => {
-      toast.error(
-        error.serverError || 'Failed to pause sandbox. Please try again.'
-      )
-    },
-  })
+  const { mutate: pause, isPending } = useMutation(
+    trpc.sandbox.pause.mutationOptions({
+      onSuccess: async () => {
+        toast.success('Sandbox paused successfully')
+        setOpen(false)
+        refetchSandboxInfo()
+      },
+      onError: () => {
+        toast.error('Failed to pause sandbox. Please try again.')
+      },
+    })
+  )
 
   const handlePause = () => {
     if (!canPause || !sandboxInfo?.sandboxID) return
 
-    execute({ teamSlug: team.slug, sandboxId: sandboxInfo.sandboxID })
+    pause({ teamSlug: team.slug, sandboxId: sandboxInfo.sandboxID })
   }
 
   if (!canPause) return null
@@ -56,8 +57,8 @@ export default function PauseButton({ className }: PauseButtonProps) {
         </Button>
       }
       confirmProps={{
-        disabled: isExecuting,
-        loading: isExecuting ? 'Pausing...' : undefined,
+        disabled: isPending,
+        loading: isPending ? 'Pausing...' : undefined,
       }}
       onConfirm={handlePause}
       onCancel={() => setOpen(false)}