Add sandbox terminal tab

Author: matthewlouisbrockman

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/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/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>
+  )
+}