Adds Terminal to Sandbox View

src/app/api/sandbox/terminal/pty/kill/route.ts

@@ -0,0 +1,51 @@
+import 'server-cli-only'
+
+import Sandbox from 'e2b'
+import { z } from 'zod'
+import { SUPABASE_AUTH_HEADERS } from '@/configs/api'
+import { auth } from '@/core/server/auth'
+import { l, serializeErrorForLog } from '@/core/shared/clients/logger/logger'
+
+const BodySchema = z.object({
+  pid: z.number().int().positive(),
+  sandboxId: z.string().min(1),
+  teamId: z.string().min(1),
+})
+
+export async function POST(request: Request) {
+  try {
+    const parsedBody = BodySchema.safeParse(await request.json())
+
+    if (!parsedBody.success) {
+      return Response.json({ error: 'Invalid request' }, { status: 400 })
+    }
+
+    const authContext = await auth.getAuthContext()
+
+    if (!authContext) {
+      return Response.json({ error: 'Unauthenticated' }, { status: 401 })
+    }
+
+    const { pid, sandboxId, teamId } = parsedBody.data
+    const sandbox = await Sandbox.connect(sandboxId, {
+      domain: process.env.NEXT_PUBLIC_E2B_DOMAIN,
+      headers: {
+        ...SUPABASE_AUTH_HEADERS(authContext.accessToken, teamId),
+      },
+    })
+
+    await sandbox.pty.kill(pid)
+
+    return Response.json({ ok: true })
+  } catch (error) {
+    l.error(
+      {
+        key: 'terminal_pty_kill_route:unexpected_error',
+        error: serializeErrorForLog(error),
+      },
+      `${error instanceof Error ? error.message : 'Failed to kill terminal PTY'}`
+    )
+
+    return Response.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}

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,9 +115,11 @@ 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}
       />
     </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/features/dashboard/sandbox/inspect/filesystem.tsx

@@ -2,9 +2,9 @@
 
 import LoadingLayout from '@/features/dashboard/loading-layout'
 import SandboxInspectFilesystemHeader from '@/features/dashboard/sandbox/inspect/filesystem-header'
+import { SandboxInspectFrame } from '@/features/dashboard/shared'
 import { ScrollArea } from '@/ui/primitives/scroll-area'
 import { useSandboxContext } from '../context'
-import SandboxInspectFrame from './frame'
 import { useDirectoryState } from './hooks/use-directory'
 import { useRootChildren } from './hooks/use-node'
 import SandboxInspectNode from './node'

src/features/dashboard/sandbox/inspect/not-found.tsx

@@ -1,32 +1,49 @@
 'use client'
 
+import Sandbox from 'e2b'
 import { useParams, useRouter } from 'next/navigation'
+import type { ReactNode } from 'react'
 import { useCallback, useEffect, useState, useTransition } from 'react'
-import { PROTECTED_URLS } from '@/configs/urls'
+import { SUPABASE_AUTH_HEADERS } from '@/configs/api'
+import { AUTH_URLS, PROTECTED_URLS } from '@/configs/urls'
 import { l, serializeErrorForLog } from '@/core/shared/clients/logger/logger'
-import { useSandboxInspectAnalytics } from '@/lib/hooks/use-analytics'
+import { supabase } from '@/core/shared/clients/supabase/client'
+import { useDashboard } from '@/features/dashboard/context'
 import { cn } from '@/lib/utils'
 import { Button } from '@/ui/primitives/button'
 import {
   ArrowLeftIcon,
   ArrowUpIcon,
   HomeIcon,
   RefreshIcon,
+  RunningIcon,
 } from '@/ui/primitives/icons'
 import { useSandboxContext } from '../context'
 import SandboxInspectEmptyFrame from './empty'
 
-export default function SandboxInspectNotFound() {
+const SANDBOX_RESUME_TIMEOUT_MS = 5 * 60 * 1000
+
+interface SandboxInspectNotFoundProps {
+  onResumeSandbox?: () => void
+  resource?: 'filesystem' | 'terminal'
+}
+
+export default function SandboxInspectNotFound({
+  onResumeSandbox,
+  resource = 'filesystem',
+}: SandboxInspectNotFoundProps) {
   const router = useRouter()
-  const { isRunning } = useSandboxContext()
+  const { team } = useDashboard()
+  const { isRunning, sandboxInfo, refetchSandboxInfo } = useSandboxContext()
 
   const { teamSlug } = useParams()
 
   const [pendingPath, setPendingPath] = useState<string | undefined>(undefined)
+  const [isResumePending, setIsResumePending] = useState(false)
   const [isPending, startTransition] = useTransition()
   const [isResetPending, resetTransition] = useTransition()
 
-  const save = async (newPath: string) => {
+  const save = useCallback(async (newPath: string) => {
     try {
       await fetch('/api/sandbox/inspect/root-path', {
         method: 'POST',
@@ -42,7 +59,7 @@ export default function SandboxInspectNotFound() {
         `${error instanceof Error ? error.message : 'Failed to save root path'}`
       )
     }
-  }
+  }, [])
 
   const setRootPath = useCallback(
     (newPath: string) => {
@@ -52,73 +69,143 @@ export default function SandboxInspectNotFound() {
         router.refresh()
       })
     },
-    [router, startTransition]
+    [router, save]
   )
 
+  const resumeSandbox = useCallback(async () => {
+    if (onResumeSandbox) {
+      onResumeSandbox()
+      return
+    }
+
+    if (!sandboxInfo) return
+
+    setIsResumePending(true)
+    try {
+      const { data } = await supabase.auth.getSession()
+
+      if (!data.session) {
+        router.replace(AUTH_URLS.SIGN_IN)
+        return
+      }
+
+      await Sandbox.connect(sandboxInfo.sandboxID, {
+        domain: process.env.NEXT_PUBLIC_E2B_DOMAIN,
+        timeoutMs: SANDBOX_RESUME_TIMEOUT_MS,
+        headers: {
+          ...SUPABASE_AUTH_HEADERS(data.session.access_token, team.id),
+        },
+      })
+
+      await refetchSandboxInfo()
+    } catch (error) {
+      l.error(
+        {
+          key: 'sandbox_inspect_not_found:resume_failed',
+          error: serializeErrorForLog(error),
+          sandbox_id: sandboxInfo.sandboxID,
+        },
+        `${error instanceof Error ? error.message : 'Failed to resume sandbox'}`
+      )
+    } finally {
+      setIsResumePending(false)
+    }
+  }, [onResumeSandbox, refetchSandboxInfo, router, sandboxInfo, team.id])
+
   useEffect(() => {
     if (!isPending) {
       setPendingPath(undefined)
     }
   }, [isPending])
 
+  const isPaused = sandboxInfo?.state === 'paused'
+  const resourceName = resource === 'terminal' ? 'terminal' : 'filesystem'
+
   const description = isRunning
     ? 'This directory appears to be empty or does not exist. You can reset to the default state, navigate to root, or refresh to try again.'
-    : 'It seems like the sandbox is not connected anymore. We cannot access the filesystem at this time.'
+    : isPaused
+      ? `Resume this sandbox to access the ${resourceName}.`
+      : `It seems like the sandbox is not connected anymore. We cannot access the ${resourceName} at this time.`
 
-  const actions = isRunning ? (
-    <>
-      <div className="flex w-full justify-between gap-4">
-        <Button
-          variant="secondary"
-          className="flex-1 gap-2"
-          onClick={() => setRootPath('')}
-          disabled={isPending && pendingPath === ''}
-        >
-          <HomeIcon className="text-fg-tertiary h-4 w-4" />
-          Reset
-        </Button>
+  let actions: ReactNode
+
+  if (isRunning) {
+    actions = (
+      <>
+        <div className="flex w-full justify-between gap-4">
+          <Button
+            variant="secondary"
+            className="flex-1 gap-2"
+            onClick={() => setRootPath('')}
+            disabled={isPending && pendingPath === ''}
+          >
+            <HomeIcon className="text-fg-tertiary h-4 w-4" />
+            Reset
+          </Button>
+          <Button
+            variant="secondary"
+            className="flex-1 gap-2"
+            onClick={() => setRootPath('/')}
+            disabled={isPending && pendingPath === '/'}
+          >
+            <ArrowUpIcon className="text-fg-tertiary h-4 w-4" />
+            To Root
+          </Button>
+        </div>
         <Button
           variant="secondary"
-          className="flex-1 gap-2"
-          onClick={() => setRootPath('/')}
-          disabled={isPending && pendingPath === '/'}
+          onClick={() =>
+            resetTransition(async () => {
+              router.refresh()
+            })
+          }
+          className="w-full gap-2"
+          disabled={isResetPending}
         >
-          <ArrowUpIcon className="text-fg-tertiary h-4 w-4" />
-          To Root
+          <RefreshIcon
+            className={cn('text-fg-tertiary h-4 w-4 transition-transform', {
+              'animate-spin': isResetPending,
+            })}
+          />
+          Refresh
         </Button>
-      </div>
+      </>
+    )
+  } else if (isPaused) {
+    actions = (
+      <Button
+        className="w-full gap-2"
+        onClick={resumeSandbox}
+        disabled={isResumePending}
+      >
+        <RunningIcon className="h-4 w-4" />
+        Resume sandbox
+      </Button>
+    )
+  } else {
+    actions = (
       <Button
         variant="secondary"
         onClick={() =>
-          resetTransition(async () => {
-            router.refresh()
-          })
+          router.push(PROTECTED_URLS.SANDBOXES(teamSlug as string))
         }
         className="w-full gap-2"
-        disabled={isResetPending}
       >
-        <RefreshIcon
-          className={cn('text-fg-tertiary h-4 w-4 transition-transform', {
-            'animate-spin': isResetPending,
-          })}
-        />
-        Refresh
+        <ArrowLeftIcon className="text-fg-tertiary h-4 w-4" />
+        Back to Sandboxes
       </Button>
-    </>
-  ) : (
-    <Button
-      variant="secondary"
-      onClick={() => router.push(PROTECTED_URLS.SANDBOXES(teamSlug as string))}
-      className="w-full gap-2"
-    >
-      <ArrowLeftIcon className="text-fg-tertiary h-4 w-4" />
-      Back to Sandboxes
-    </Button>
-  )
+    )
+  }
 
   return (
     <SandboxInspectEmptyFrame
-      title={isRunning ? 'Empty Directory' : 'Not Connected'}
+      title={
+        isRunning
+          ? 'Empty Directory'
+          : isPaused
+            ? 'Sandbox Paused'
+            : 'Not Connected'
+      }
       description={description}
       actions={actions}
     />