fix: prevent paused sandbox from auto-resuming via live inspect connections

Optimistically flip sandbox state to paused on pause so the terminal PTY and filesystem watcher tear down immediately instead of auto-resuming the sandbox with their envd traffic. Also show the paused empty-state for the filesystem instead of the stale cached tree.

Author: huv1k

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

@@ -1,13 +1,13 @@
 'use client'
 
-import { useMutation } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useState } from 'react'
 import { toast } from 'sonner'
+import { useRouteParams } from '@/lib/hooks/use-route-params'
 import { useTRPC } from '@/trpc/client'
 import { AlertPopover } from '@/ui/alert-popover'
 import { Button } from '@/ui/primitives/button'
 import { PausedIcon } from '@/ui/primitives/icons'
-import { useDashboard } from '../../context'
 import { useSandboxContext } from '../context'
 
 interface PauseButtonProps {
@@ -17,28 +17,45 @@ interface PauseButtonProps {
 export default function PauseButton({ className }: PauseButtonProps) {
   const [open, setOpen] = useState(false)
   const { sandboxInfo, refetchSandboxInfo } = useSandboxContext()
-  const { team } = useDashboard()
+  const { teamSlug, sandboxId } =
+    useRouteParams<'/dashboard/[teamSlug]/sandboxes/[sandboxId]'>()
   const trpc = useTRPC()
+  const queryClient = useQueryClient()
 
   const canPause = sandboxInfo?.state === 'running'
+  const detailsKey = trpc.sandbox.details.queryKey({ teamSlug, sandboxId })
 
   const { mutate: pause, isPending } = useMutation(
     trpc.sandbox.pause.mutationOptions({
+      // Optimistically mark the sandbox as paused so the live terminal/filesystem
+      // connections tear down immediately. Otherwise their envd traffic
+      // auto-resumes the sandbox while the pause snapshot is being created.
+      onMutate: async () => {
+        await queryClient.cancelQueries({ queryKey: detailsKey })
+        const previous = queryClient.getQueryData(detailsKey)
+        queryClient.setQueryData(detailsKey, (old) =>
+          old?.state === 'running' ? { ...old, state: 'paused' as const } : old
+        )
+        return { previous }
+      },
+      onError: (_error, _variables, context) => {
+        if (context?.previous !== undefined) {
+          queryClient.setQueryData(detailsKey, context.previous)
+        }
+        toast.error('Failed to pause sandbox. Please try again.')
+      },
       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
 
-    pause({ teamSlug: team.slug, sandboxId: sandboxInfo.sandboxID })
+    pause({ teamSlug, sandboxId: sandboxInfo.sandboxID })
   }
 
   if (!canPause) return null

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

@@ -30,7 +30,7 @@ export default function SandboxInspectFilesystem({
 
   return (
     <div className="h-full flex-1 flex flex-col gap-1 overflow-hidden">
-      <StoppedBanner rootNodeCount={children.length} />
+      {isRunning && <StoppedBanner rootNodeCount={children.length} />}
       <SandboxInspectFrame
         initial={{
           flex: 1,
@@ -41,7 +41,7 @@ export default function SandboxInspectFilesystem({
         <div className="h-full flex-1 overflow-hidden">
           {showRootLoading ? (
             <LoadingLayout />
-          ) : !children.length ? (
+          ) : !isRunning || !children.length ? (
             <SandboxInspectNotFound
               isResumePending={isSandboxResumePending}
               onResumeSandbox={() => void resumeSandbox()}