feat: add pause/resume buttons and unify kill confirm dialog

src/features/dashboard/sandbox/header/controls.tsx

@@ -1,8 +1,20 @@
+'use client'
+
+import { useSandboxContext } from '../context'
 import KillButton from './kill-button'
+import PauseButton from './pause-button'
+import ResumeButton from './resume-button'
 
 export default function SandboxDetailsControls() {
+  const { sandboxInfo } = useSandboxContext()
+
+  const isPaused = sandboxInfo?.state === 'paused'
+  const isRunning = sandboxInfo?.state === 'running'
+
   return (
     <div className="flex items-center gap-2 md:pb-2">
+      {isRunning && <PauseButton />}
+      {isPaused && <ResumeButton />}
       <KillButton />
     </div>
   )

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

@@ -0,0 +1,55 @@
+'use client'
+
+import { useAction } from 'next-safe-action/hooks'
+import { toast } from 'sonner'
+import { cn } from '@/lib/utils/ui'
+import { pauseSandboxAction } from '@/server/sandboxes/sandbox-actions'
+import { Button } from '@/ui/primitives/button'
+import { PausedIcon } from '@/ui/primitives/icons'
+import { useDashboard } from '../../context'
+import { useSandboxContext } from '../context'
+
+interface PauseButtonProps {
+  className?: string
+}
+
+export default function PauseButton({ className }: PauseButtonProps) {
+  const { sandboxInfo, refetchSandboxInfo } = useSandboxContext()
+  const { team } = useDashboard()
+  const canPause = sandboxInfo?.state === 'running'
+
+  const { execute, isExecuting } = useAction(pauseSandboxAction, {
+    onSuccess: async () => {
+      toast.success('Sandbox paused successfully')
+      refetchSandboxInfo()
+    },
+    onError: ({ error }) => {
+      toast.error(
+        error.serverError || 'Failed to pause sandbox. Please try again.'
+      )
+    },
+  })
+
+  const handlePause = () => {
+    if (!canPause || !sandboxInfo?.sandboxID) return
+
+    execute({
+      teamIdOrSlug: team.id,
+      sandboxId: sandboxInfo.sandboxID,
+    })
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="slate"
+      className={cn(className)}
+      disabled={!canPause || isExecuting}
+      onClick={handlePause}
+      loading={isExecuting}
+    >
+      <PausedIcon className="size-3.5" />
+      Pause
+    </Button>
+  )
+}

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

@@ -0,0 +1,56 @@
+'use client'
+
+import { useAction } from 'next-safe-action/hooks'
+import { toast } from 'sonner'
+import { cn } from '@/lib/utils/ui'
+import { resumeSandboxAction } from '@/server/sandboxes/sandbox-actions'
+import { Button } from '@/ui/primitives/button'
+import { PlayIcon } from '@/ui/primitives/icons'
+import { useDashboard } from '../../context'
+import { useSandboxContext } from '../context'
+
+interface ResumeButtonProps {
+  className?: string
+}
+
+export default function ResumeButton({ className }: ResumeButtonProps) {
+  const { sandboxInfo, refetchSandboxInfo } = useSandboxContext()
+  const { team } = useDashboard()
+  const canResume = sandboxInfo?.state === 'paused'
+
+  const { execute, isExecuting } = useAction(resumeSandboxAction, {
+    onSuccess: async () => {
+      toast.success('Sandbox resumed successfully')
+      refetchSandboxInfo()
+    },
+    onError: ({ error }) => {
+      toast.error(
+        error.serverError || 'Failed to resume sandbox. Please try again.'
+      )
+    },
+  })
+
+  const handleResume = () => {
+    if (!canResume || !sandboxInfo?.sandboxID) return
+
+    execute({
+      teamIdOrSlug: team.id,
+      sandboxId: sandboxInfo.sandboxID,
+      timeout: 60,
+    })
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="slate"
+      className={cn('text-accent-positive-highlight', className)}
+      disabled={!canResume || isExecuting}
+      onClick={handleResume}
+      loading={isExecuting}
+    >
+      <PlayIcon className="size-3.5" />
+      Resume
+    </Button>
+  )
+}

src/server/sandboxes/sandbox-actions.ts

@@ -59,6 +59,114 @@ export const killSandboxAction = authActionClient
     }
   })
 
+const PauseSandboxSchema = z.object({
+  teamIdOrSlug: TeamIdOrSlugSchema,
+  sandboxId: z.string().min(1, 'Sandbox ID is required'),
+})
+
+export const pauseSandboxAction = authActionClient
+  .schema(PauseSandboxSchema)
+  .metadata({ actionName: 'pauseSandbox' })
+  .use(withTeamIdResolution)
+  .action(async ({ parsedInput, ctx }) => {
+    const { sandboxId } = parsedInput
+    const { session, teamId } = ctx
+
+    const res = await infra.POST('/sandboxes/{sandboxID}/pause', {
+      headers: {
+        ...SUPABASE_AUTH_HEADERS(session.access_token, teamId),
+      },
+      params: {
+        path: {
+          sandboxID: sandboxId,
+        },
+      },
+    })
+
+    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 cannot be paused in its current state'
+        )
+      }
+
+      return returnServerError('Failed to pause sandbox')
+    }
+  })
+
+const ResumeSandboxSchema = z.object({
+  teamIdOrSlug: TeamIdOrSlugSchema,
+  sandboxId: z.string().min(1, 'Sandbox ID is required'),
+  timeout: z.number().int().positive().default(15),
+})
+
+export const resumeSandboxAction = authActionClient
+  .schema(ResumeSandboxSchema)
+  .metadata({ actionName: 'resumeSandbox' })
+  .use(withTeamIdResolution)
+  .action(async ({ parsedInput, ctx }) => {
+    const { sandboxId, timeout } = parsedInput
+    const { session, teamId } = ctx
+
+    const res = await infra.POST('/sandboxes/{sandboxID}/connect', {
+      headers: {
+        ...SUPABASE_AUTH_HEADERS(session.access_token, teamId),
+      },
+      params: {
+        path: {
+          sandboxID: sandboxId,
+        },
+      },
+      body: {
+        timeout,
+      },
+    })
+
+    if (res.error) {
+      const status = res.response.status
+
+      l.error(
+        {
+          key: 'resume_sandbox_action:infra_error',
+          error: res.error,
+          user_id: session.user.id,
+          team_id: teamId,
+          sandbox_id: sandboxId,
+          context: {
+            status,
+          },
+        },
+        `Failed to resume sandbox: ${res.error.message}`
+      )
+
+      if (status === 404) {
+        return returnServerError('Sandbox not found')
+      }
+
+      return returnServerError('Failed to resume sandbox')
+    }
+  })
+
 const RevalidateSandboxesSchema = z.object({
   teamIdOrSlug: TeamIdOrSlugSchema,
 })

src/ui/primitives/icons.tsx

@@ -1344,6 +1344,23 @@ export const PausedIcon = ({ className, ...props }: IconProps) => (
   </svg>
 )
 
+export const PlayIcon = ({ className, ...props }: IconProps) => (
+  <svg
+    className={cn(DEFAULT_CLASS_NAMES, className)}
+    fill="none"
+    viewBox="0 0 12 12"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M3 1.5L10 6L3 10.5V1.5Z"
+      stroke="currentColor"
+      strokeWidth="1.33333"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
 export const DotIcon = ({ className, ...props }: IconProps) => (
   <svg
     className={cn(DEFAULT_CLASS_NAMES, className)}