Address terminal PR review

Author: matthewlouisbrockman

src/app/dashboard/[teamSlug]/sandboxes/[sandboxId]/terminal/layout.tsx

@@ -2,9 +2,9 @@
 
 import LoadingLayout from '@/features/dashboard/loading-layout'
 import SandboxInspectFilesystemHeader from '@/features/dashboard/sandbox/inspect/filesystem-header'
+import { DashboardPanelFrame } 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'
@@ -28,7 +28,7 @@ export default function SandboxInspectFilesystem({
   return (
     <div className="h-full flex-1 flex flex-col gap-1 overflow-hidden">
       <StoppedBanner rootNodeCount={children.length} />
-      <SandboxInspectFrame
+      <DashboardPanelFrame
         initial={{
           flex: 1,
         }}
@@ -49,7 +49,7 @@ export default function SandboxInspectFilesystem({
             </ScrollArea>
           )}
         </div>
-      </SandboxInspectFrame>
+      </DashboardPanelFrame>
     </div>
   )
 }

src/app/dashboard/terminal/layout.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 { DashboardPanelFrame } 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'
@@ -81,7 +81,7 @@ function SandboxInspectViewerContent({
   }
 
   return (
-    <SandboxInspectFrame
+    <DashboardPanelFrame
       classNames={{
         frame: 'max-md:max-w-full max-md:border-none max-h-full',
         header: 'max-md:bg-transparent max-md:h-9 max-md:border-none',
@@ -125,7 +125,7 @@ function SandboxInspectViewerContent({
       ) : (
         <UnreadableContent state={state} onDownload={download} />
       )}
-    </SandboxInspectFrame>
+    </DashboardPanelFrame>
   )
 }
 

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { notFound, usePathname } from 'next/navigation'
+import { notFound } from 'next/navigation'
 import { PROTECTED_URLS } from '@/configs/urls'
 import { useRouteParams } from '@/lib/hooks/use-route-params'
 import { DashboardTabsList } from '@/ui/dashboard-tabs'
@@ -26,26 +26,18 @@ export default function SandboxLayout({
 }: SandboxLayoutProps) {
   const { teamSlug, sandboxId } =
     useRouteParams<'/dashboard/[teamSlug]/sandboxes/[sandboxId]'>()
-  const pathname = usePathname()
 
   const { sandboxInfo, isSandboxInfoLoading, isSandboxNotFound } =
     useSandboxContext()
-  const isTerminalTab =
-    pathname === PROTECTED_URLS.SANDBOX_TERMINAL(teamSlug, sandboxId)
 
-  const isSandboxUnavailable =
-    isSandboxNotFound || (!sandboxInfo && !isSandboxInfoLoading)
-
-  if (isSandboxUnavailable && !isTerminalTab) {
+  if (isSandboxNotFound) {
     throw notFound()
   }
 
-  if (isSandboxUnavailable) {
-    return (
-      <div className="flex h-full min-h-0 flex-1 flex-col max-md:overflow-y-auto">
-        {children}
-      </div>
-    )
+  if (!sandboxInfo) {
+    if (!isSandboxInfoLoading) {
+      throw notFound()
+    }
   }
 
   return (

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

@@ -1,20 +1,7 @@
 'use client'
 
-import Link from 'next/link'
-import { PROTECTED_URLS } from '@/configs/urls'
 import { useDashboard } from '@/features/dashboard/context'
 import DashboardTerminal from '@/features/dashboard/terminal/dashboard-terminal'
-import { useRouteParams } from '@/lib/hooks/use-route-params'
-import { Button } from '@/ui/primitives/button'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-} from '@/ui/primitives/card'
-import { ArrowLeftIcon, SandboxIcon } from '@/ui/primitives/icons'
-import { useSandboxContext } from '../context'
 
 interface SandboxTerminalViewProps {
   sandboxId: string
@@ -24,17 +11,6 @@ export default function SandboxTerminalView({
   sandboxId,
 }: SandboxTerminalViewProps) {
   const { team } = useDashboard()
-  const { teamSlug } =
-    useRouteParams<'/dashboard/[teamSlug]/sandboxes/[sandboxId]'>()
-  const { sandboxInfo, isSandboxInfoLoading, isSandboxNotFound } =
-    useSandboxContext()
-
-  const isSandboxUnavailable =
-    isSandboxNotFound || (!sandboxInfo && !isSandboxInfoLoading)
-
-  if (isSandboxUnavailable) {
-    return <SandboxTerminalUnavailable teamSlug={teamSlug} />
-  }
 
   return (
     <div className="flex min-h-0 flex-1 overflow-hidden p-3 md:p-6">
@@ -47,39 +23,3 @@ export default function SandboxTerminalView({
     </div>
   )
 }
-
-function SandboxTerminalUnavailable({ teamSlug }: { teamSlug: string }) {
-  return (
-    <div className="flex min-h-0 flex-1 items-center justify-center p-3 md:p-6">
-      <Card className="w-full max-w-md border border-stroke bg-bg-1/40 backdrop-blur-lg">
-        <CardHeader className="text-center">
-          <span className="prose-value-big">Sandbox unavailable</span>
-          <CardDescription>
-            Sandbox not found or you do not have access to it.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="text-center text-fg-secondary">
-          <p>
-            It may have been killed, removed, or created under another team.
-          </p>
-        </CardContent>
-        <CardFooter className="flex flex-col gap-1">
-          <Button variant="secondary" asChild className="w-full">
-            <Link href={PROTECTED_URLS.SANDBOXES_LIST(teamSlug)}>
-              <SandboxIcon />
-              Sandboxes
-            </Link>
-          </Button>
-          <Button
-            variant="secondary"
-            onClick={() => window.history.back()}
-            className="w-full"
-          >
-            <ArrowLeftIcon />
-            Go Back
-          </Button>
-        </CardFooter>
-      </Card>
-    </div>
-  )
-}

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

@@ -1,5 +1,6 @@
 'use client'
 
+import '@xterm/xterm/css/xterm.css'
 import { Terminal as XTerm } from '@xterm/xterm'
 import { type CommandHandle, type Sandbox, TimeoutError } from 'e2b'
 import { useCallback, useEffect, useRef, useState } from 'react'
@@ -223,9 +224,7 @@ export default function DashboardTerminal({
           template: nextTemplate,
         })
 
-        if (!isCurrentStart()) {
-          throw new Error('Terminal start was cancelled.')
-        }
+        if (!isCurrentStart()) return null
 
         appendOutput(`Sandbox ${sandbox.sandboxId} is running.\r\n`)
         appendOutput('Opening PTY...\r\n')
@@ -247,13 +246,17 @@ export default function DashboardTerminal({
       const canRetryAttach = Boolean(options.sandboxId)
 
       try {
+        type AttachResult = NonNullable<
+          Awaited<ReturnType<typeof openSandboxAndPty>>
+        >
         let attachAttempt = 0
-        let sandbox: Awaited<ReturnType<typeof openSandboxAndPty>>['sandbox']
-        let pty: Awaited<ReturnType<typeof openSandboxAndPty>>['pty']
+        let sandbox: AttachResult['sandbox']
+        let pty: AttachResult['pty']
 
         while (true) {
           try {
             const result = await openSandboxAndPty()
+            if (!result) return
             sandbox = result.sandbox
             pty = result.pty
             break

src/features/dashboard/sandbox/layout.tsx

@@ -89,7 +89,12 @@ export default function TerminalPanel({
   )
 
   return (
-    <DashboardPanelFrame header={header}>
+    <DashboardPanelFrame
+      classNames={{
+        frame: 'bg-bg-1',
+      }}
+      header={header}
+    >
       <div
         ref={terminalContainerRef}
         role="application"