Address terminal review comments

Author: matthewlouisbrockman

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

@@ -1,38 +1 @@
-'use client'
-
-import { motion } from 'motion/react'
-import type React from 'react'
-import { cn } from '@/lib/utils'
-
-type SandboxInspectFrameProps = React.ComponentProps<typeof motion.div> & {
-  header: React.ReactNode
-  classNames?: {
-    frame?: string
-    header?: string
-  }
-}
-
-export default function SandboxInspectFrame({
-  className,
-  classNames,
-  children,
-  header,
-  ...props
-}: SandboxInspectFrameProps) {
-  return (
-    <motion.div
-      transition={{ duration: 0.25, ease: 'easeInOut' }}
-      className={cn(
-        'bg-bg flex h-full min-h-0 flex-1 flex-col overflow-hidden border',
-        classNames?.frame,
-        className
-      )}
-      {...props}
-    >
-      <div className={cn('h-10 w-full border-b', classNames?.header)}>
-        {header}
-      </div>
-      {children as React.ReactNode}
-    </motion.div>
-  )
-}
+export { DashboardPanelFrame as default } from '@/features/dashboard/shared'

src/features/dashboard/shared/index.ts

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

src/features/dashboard/shared/panel-frame.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { motion } from 'motion/react'
+import type React from 'react'
+import { cn } from '@/lib/utils'
+
+type DashboardPanelFrameProps = React.ComponentProps<typeof motion.div> & {
+  header: React.ReactNode
+  classNames?: {
+    frame?: string
+    header?: string
+  }
+}
+
+export function DashboardPanelFrame({
+  className,
+  classNames,
+  children,
+  header,
+  ...props
+}: DashboardPanelFrameProps) {
+  return (
+    <motion.div
+      transition={{ duration: 0.25, ease: 'easeInOut' }}
+      className={cn(
+        'bg-bg flex h-full min-h-0 flex-1 flex-col overflow-hidden border',
+        classNames?.frame,
+        className
+      )}
+      {...props}
+    >
+      <div className={cn('h-10 w-full border-b', classNames?.header)}>
+        {header}
+      </div>
+      {children as React.ReactNode}
+    </motion.div>
+  )
+}

src/features/dashboard/terminal/dashboard-terminal.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { Terminal as XTerm } from '@xterm/xterm'
-import Sandbox, { type CommandHandle, TimeoutError } from 'e2b'
+import { type CommandHandle, type Sandbox, TimeoutError } from 'e2b'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import {
   DEFAULT_COLS,
@@ -217,7 +217,7 @@ export default function DashboardTerminal({
           requestTimeoutMs: options.sandboxId
             ? TERMINAL_ATTACH_ATTEMPT_TIMEOUT_MS
             : undefined,
-          shouldStoreSession: isCurrentStart,
+          shouldStoreSession: () => !sandboxScoped && isCurrentStart(),
           sandboxId: options.sandboxId,
           teamId,
           template: nextTemplate,
@@ -336,6 +336,7 @@ export default function DashboardTerminal({
       disconnectTerminal,
       resizeTerminal,
       runCommand,
+      sandboxScoped,
       teamId,
       template,
       updateTerminalUrl,
@@ -541,6 +542,7 @@ export default function DashboardTerminal({
     <>
       <TerminalPanel
         sandboxId={activeSandboxId}
+        reconnectSandboxId={sandboxScoped ? initialSandboxId : activeSandboxId}
         status={status}
         template={template}
         restartAction={sandboxScoped ? 'reconnect' : 'new'}

src/features/dashboard/terminal/terminal-panel.tsx

@@ -1,5 +1,5 @@
 import type { RefObject } from 'react'
-import SandboxInspectFrame from '@/features/dashboard/sandbox/inspect/frame'
+import { DashboardPanelFrame } from '@/features/dashboard/shared'
 import { IconButton } from '@/ui/primitives/icon-button'
 import {
   CopyIcon,
@@ -13,6 +13,7 @@ interface TerminalPanelProps {
   status: TerminalStatus
   template: string
   restartAction?: 'new' | 'reconnect'
+  reconnectSandboxId?: string
   terminalContainerRef: RefObject<HTMLDivElement | null>
   onFocusTerminal: () => void
   onCopyTerminalText: () => void
@@ -24,6 +25,7 @@ export default function TerminalPanel({
   status,
   template,
   restartAction = 'new',
+  reconnectSandboxId,
   terminalContainerRef,
   onFocusTerminal,
   onCopyTerminalText,
@@ -33,6 +35,8 @@ export default function TerminalPanel({
   const restartLabel = isReconnectAction
     ? 'Reconnect terminal'
     : 'Start new terminal sandbox'
+  const isRestartDisabled =
+    status === 'starting' || (isReconnectAction && !reconnectSandboxId)
 
   const header = (
     <div className="flex h-full items-center justify-between px-3">
@@ -69,11 +73,11 @@ export default function TerminalPanel({
           className="size-7"
           aria-label={restartLabel}
           title={restartLabel}
-          disabled={status === 'starting'}
+          disabled={isRestartDisabled}
           onClick={() =>
             onStartTerminal(
-              isReconnectAction && sandboxId
-                ? { sandboxId }
+              isReconnectAction
+                ? { sandboxId: reconnectSandboxId }
                 : { forceNewSandbox: true }
             )
           }
@@ -85,14 +89,14 @@ export default function TerminalPanel({
   )
 
   return (
-    <SandboxInspectFrame header={header}>
+    <DashboardPanelFrame header={header}>
       <div
         ref={terminalContainerRef}
         role="application"
         aria-label="Terminal"
         className="min-h-0 flex-1 cursor-text overflow-hidden bg-black p-3"
         onMouseDown={onFocusTerminal}
       />
-    </SandboxInspectFrame>
+    </DashboardPanelFrame>
   )
 }