Fix: minified react error on inspect routing

next.config.mjs

@@ -8,11 +8,11 @@ const config = {
   experimental: {
     useCache: true,
     turbopackFileSystemCacheForDev: true,
-    clientSegmentCache: true,
     serverActions: {
       bodySizeLimit: '5mb',
     },
     authInterrupts: true,
+    clientSegmentCache: true,
   },
   logging: {
     fetches: {
@@ -31,17 +31,17 @@ const config = {
           value: 'SAMEORIGIN',
         },
       ],
-    }, 
+    },
   ],
   rewrites: async () => ({
     beforeFiles: [
       {
-        source: "/ph-proxy/static/:path*",
-        destination: "https://us-assets.i.posthog.com/static/:path*",
+        source: '/ph-proxy/static/:path*',
+        destination: 'https://us-assets.i.posthog.com/static/:path*',
       },
       {
-        source: "/ph-proxy/:path*",
-        destination: "https://us.i.posthog.com/:path*",
+        source: '/ph-proxy/:path*',
+        destination: 'https://us.i.posthog.com/:path*',
       },
 
       // Asset rewrites for Mintlify
@@ -51,7 +51,7 @@ const config = {
       },
       {
         source: '/_mintlify/:path*',
-        destination: `https://${DOCUMENTATION_DOMAIN}/_mintlify/:path*`, 
+        destination: `https://${DOCUMENTATION_DOMAIN}/_mintlify/:path*`,
       },
     ],
   }),

src/app/dashboard/[teamIdOrSlug]/sandboxes/[sandboxId]/inspect/page.tsx

@@ -1,10 +1,6 @@
 import { COOKIE_KEYS } from '@/configs/cookies'
-import { SandboxInspectProvider } from '@/features/dashboard/sandbox/inspect/context'
-import SandboxInspectFilesystem from '@/features/dashboard/sandbox/inspect/filesystem'
-import SandboxInspectViewer from '@/features/dashboard/sandbox/inspect/viewer'
-import { cn } from '@/lib/utils'
+import SandboxInspectView from '@/features/dashboard/sandbox/inspect/view'
 import { getSandboxRoot } from '@/server/sandboxes/get-sandbox-root'
-import ClientOnly from '@/ui/client-only'
 import { cookies } from 'next/headers'
 
 const DEFAULT_ROOT_PATH = '/home/user'
@@ -28,19 +24,9 @@ export default async function SandboxInspectPage({
   })
 
   return (
-    <SandboxInspectProvider
+    <SandboxInspectView
       rootPath={rootPath}
       seedEntries={res?.data?.entries ?? []}
-    >
-      <ClientOnly
-        className={cn(
-          'flex flex-1 gap-4 overflow-hidden p-3 md:p-6',
-          'max-md:sticky max-md:top-0 max-md:min-h-[calc(100vh-var(--protected-navbar-height))]'
-        )}
-      >
-        <SandboxInspectFilesystem rootPath={rootPath} />
-        <SandboxInspectViewer />
-      </ClientOnly>
-    </SandboxInspectProvider>
+    />
   )
 }

src/features/dashboard/sandbox/header/metadata.tsx

@@ -2,7 +2,6 @@
 
 import { JsonPopover } from '@/ui/json-popover'
 import { Badge } from '@/ui/primitives/badge'
-import { Button } from '@/ui/primitives/button'
 import { Braces, CircleSlash } from 'lucide-react'
 import { useSandboxContext } from '../context'
 
@@ -18,15 +17,16 @@ export default function Metadata() {
   }
 
   return (
-    <JsonPopover json={sandboxInfo.metadata}>
-      <Button
-        variant="accent"
-        size="sm"
-        className="h-5 font-sans prose-label-highlight"
-      >
-        <Braces className="size-3.5" />
-        Metadata
-      </Button>
+    <JsonPopover
+      json={sandboxInfo.metadata}
+      buttonProps={{
+        variant: 'accent',
+        size: 'sm',
+        className: 'h-5 font-sans prose-label-highlight',
+      }}
+    >
+      <Braces className="size-3.5" />
+      Metadata
     </JsonPopover>
   )
 }

src/features/dashboard/sandbox/header/resource-usage-client.tsx

@@ -29,7 +29,7 @@ export const ResourceUsageClient = memo(
         return sandboxInfo?.memoryMB
       }
       return lastMetrics?.diskTotalGb
-    }, [props.type, sandboxInfo])
+    }, [props.type, sandboxInfo, lastMetrics])
 
     return (
       <ResourceUsage

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

@@ -1,3 +1,5 @@
+'use client'
+
 import { cn } from '@/lib/utils'
 import { DataTableRow } from '@/ui/data-table'
 import { AlertCircle, FolderClosed, FolderOpen } from 'lucide-react'

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

@@ -1,3 +1,5 @@
+'use client'
+
 import { cn } from '@/lib/utils'
 import { DataTableRow } from '@/ui/data-table'
 import { AlertCircle, FileIcon } from 'lucide-react'

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { cn } from '@/lib/utils'
-import { motion } from 'framer-motion'
+import { motion } from 'motion/react'
 import React from 'react'
 
 type SandboxInspectFrameProps = React.ComponentProps<typeof motion.div> & {

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

@@ -1,3 +1,5 @@
+'use client'
+
 import SandboxInspectDir from './dir'
 import SandboxInspectFile from './file'
 import { useFilesystemNode } from './hooks/use-node'

src/features/dashboard/sandbox/inspect/parent-dir-item.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { cn } from '@/lib/utils'
 import { DataTableRow } from '@/ui/data-table'
 import { FolderUp } from 'lucide-react'

src/features/dashboard/sandbox/inspect/stopped-banner.tsx

@@ -7,7 +7,7 @@ import {
   CardTitle,
   cardVariants,
 } from '@/ui/primitives/card'
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'motion/react'
 import { AlertTriangle } from 'lucide-react'
 import { useMemo } from 'react'
 import { useSandboxContext } from '../context'

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

@@ -0,0 +1,31 @@
+'use client'
+
+import { SandboxInspectProvider } from '@/features/dashboard/sandbox/inspect/context'
+import SandboxInspectFilesystem from '@/features/dashboard/sandbox/inspect/filesystem'
+import SandboxInspectViewer from '@/features/dashboard/sandbox/inspect/viewer'
+import { cn } from '@/lib/utils'
+import type { EntryInfo } from 'e2b'
+
+interface SandboxInspectViewProps {
+  rootPath: string
+  seedEntries: EntryInfo[]
+}
+
+export default function SandboxInspectView({
+  rootPath,
+  seedEntries,
+}: SandboxInspectViewProps) {
+  return (
+    <SandboxInspectProvider rootPath={rootPath} seedEntries={seedEntries}>
+      <div
+        className={cn(
+          'flex flex-1 gap-4 overflow-hidden p-3 md:p-6',
+          'max-md:sticky max-md:top-0 max-md:min-h-[calc(100vh-var(--protected-navbar-height))]'
+        )}
+      >
+        <SandboxInspectFilesystem rootPath={rootPath} />
+        <SandboxInspectViewer />
+      </div>
+    </SandboxInspectProvider>
+  )
+}

src/lib/clients/supabase/client.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { Database } from '@/types/database.types'
 import { createBrowserClient } from '@supabase/ssr'
 

src/ui/json-popover.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useShikiTheme } from '@/configs/shiki'
 import { cn } from '@/lib/utils'
 import {
@@ -13,10 +15,16 @@ import { ScrollArea, ScrollBar } from './primitives/scroll-area'
 interface JsonPopoverProps {
   json: unknown
   children: React.ReactNode
+  buttonProps?: React.ComponentPropsWithoutRef<typeof Button>
   className?: string
 }
 
-export function JsonPopover({ json, children, className }: JsonPopoverProps) {
+export function JsonPopover({
+  json,
+  children,
+  buttonProps,
+  className,
+}: JsonPopoverProps) {
   const [isOpen, setIsOpen] = useState(false)
 
   const shikiTheme = useShikiTheme()
@@ -41,6 +49,7 @@ export function JsonPopover({ json, children, className }: JsonPopoverProps) {
             e.preventDefault()
             setIsOpen(true)
           }}
+          {...buttonProps}
         >
           {children}
         </Button>