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,11 @@
+import SandboxTerminalView from '@/features/dashboard/sandbox/terminal/view'
+
+export default async function SandboxTerminalPage({
+  params,
+}: {
+  params: Promise<{ teamSlug: string; sandboxId: string }>
+}) {
+  const { sandboxId } = await params
+
+  return <SandboxTerminalView sandboxId={sandboxId} />
+}

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

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/viewer.tsx

@@ -4,6 +4,7 @@ import { AnimatePresence } from 'motion/react'
 import { useEffect, useState } from 'react'
 import ShikiHighlighter, { type Language } from 'react-shiki'
 import { useShikiTheme } from '@/configs/shiki'
+import { SandboxInspectFrame } from '@/features/dashboard/shared'
 import { useIsMobile } from '@/lib/hooks/use-mobile'
 import { cn } from '@/lib/utils'
 import { Button } from '@/ui/primitives/button'
@@ -16,7 +17,6 @@ import {
   type UnreadableFileTypeContentState,
   type UnreadableTooLargeContentState,
 } from './filesystem/store'
-import SandboxInspectFrame from './frame'
 import { useContent } from './hooks/use-content'
 import { useFile } from './hooks/use-file'
 import { useErrorPaths, useSelectedPath } from './hooks/use-node'

src/features/dashboard/sandbox/layout.tsx

@@ -8,6 +8,7 @@ import {
   HistoryIcon,
   ListIcon,
   StorageIcon,
+  TerminalCustomIcon,
   TrendIcon,
 } from '@/ui/primitives/icons'
 import { useSandboxContext } from './context'
@@ -68,6 +69,12 @@ export default function SandboxLayout({
                 href: PROTECTED_URLS.SANDBOX_LOGS(teamSlug, sandboxId),
                 icon: <ListIcon className="size-4" />,
               },
+              {
+                id: 'terminal',
+                label: 'Terminal',
+                href: PROTECTED_URLS.SANDBOX_TERMINAL(teamSlug, sandboxId),
+                icon: <TerminalCustomIcon className="size-4" />,
+              },
               {
                 id: 'filesystem',
                 label: 'Filesystem',

src/features/dashboard/sandbox/terminal/view.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { useDashboard } from '@/features/dashboard/context'
+import DashboardTerminal from '@/features/dashboard/terminal/dashboard-terminal'
+
+interface SandboxTerminalViewProps {
+  sandboxId: string
+}
+
+export default function SandboxTerminalView({
+  sandboxId,
+}: SandboxTerminalViewProps) {
+  const { team } = useDashboard()
+
+  return (
+    <div className="flex min-h-0 flex-1 overflow-hidden p-3 md:p-6">
+      <DashboardTerminal
+        autoStart
+        initialSandboxId={sandboxId}
+        sandboxScoped
+        teamId={team.id}
+      />
+    </div>
+  )
+}

src/features/dashboard/shared/index.ts

@@ -1,2 +1,3 @@
 export { IdBadge } from './id-badge'
+export { SandboxInspectFrame } from './panel-frame'
 export { UserAvatar } from './user-avatar'

src/features/dashboard/sandbox/inspect/frame.tsx → src/features/dashboard/shared/panel-frame.tsx

@@ -12,7 +12,7 @@ type SandboxInspectFrameProps = React.ComponentProps<typeof motion.div> & {
   }
 }
 
-export default function SandboxInspectFrame({
+export function SandboxInspectFrame({
   className,
   classNames,
   children,

src/features/dashboard/terminal/attach-terminal.ts

@@ -0,0 +1,43 @@
+interface AttachTerminalWithRetryOptions<TResult> {
+  canRetry: boolean
+  isCurrent: () => boolean
+  isRetryableError: (error: unknown) => boolean
+  onRetry: (delayMs: number) => void
+  open: () => Promise<TResult | null>
+  retryDelaysMs: readonly number[]
+  waitForRetry: (delayMs: number) => Promise<void>
+}
+
+export async function attachTerminalWithRetry<TResult>({
+  canRetry,
+  isCurrent,
+  isRetryableError,
+  onRetry,
+  open,
+  retryDelaysMs,
+  waitForRetry,
+}: AttachTerminalWithRetryOptions<TResult>) {
+  let attachAttempt = 0
+
+  while (true) {
+    try {
+      return await open()
+    } catch (error) {
+      const retryDelay = retryDelaysMs[attachAttempt]
+      if (
+        !canRetry ||
+        !retryDelay ||
+        !isCurrent() ||
+        !isRetryableError(error)
+      ) {
+        throw error
+      }
+
+      attachAttempt += 1
+      onRetry(retryDelay)
+      await waitForRetry(retryDelay)
+
+      if (!isCurrent()) return null
+    }
+  }
+}

src/features/dashboard/terminal/constants.ts

@@ -5,3 +5,6 @@ export const DEFAULT_PANEL_HEIGHT = 260
 export const MAX_TERMINAL_TRANSCRIPT_CHARS = 200_000
 export const TERMINAL_SESSION_STORAGE_PREFIX = 'dashboard-terminal-session'
 export const DEFAULT_CWD = '/home/user'
+export const TERMINAL_AUTOSTART_DEBOUNCE_MS = 300
+export const TERMINAL_ATTACH_ATTEMPT_TIMEOUT_MS = 15_000
+export const TERMINAL_ATTACH_RETRY_DELAYS_MS = [1500, 3000, 5000] as const