Fix: minified react error on inspect routing (#191)

<!-- CURSOR_SUMMARY -->
> [!NOTE]
> Refactors the sandbox inspect route to a client-driven view, adds
client directives across inspect/UI modules, switches to motion/react,
and makes JsonPopover button customizable.
> 
> - **Inspect**:
> - **Client View Extraction**: Replaces page-level composition with
`SandboxInspectView` that wraps `SandboxInspectProvider`, `Filesystem`,
and `Viewer`.
> - **Client Components**: Adds `'use client'` to `dir.tsx`, `file.tsx`,
`node.tsx`, `parent-dir-item.tsx`, and the new `view.tsx`.
> - **Motion**: Switches imports to `motion/react` in `frame.tsx` and
`stopped-banner.tsx`.
> - **Header/UI**:
> - **JsonPopover**: Converted to client component and supports
`buttonProps` to customize trigger; `metadata.tsx` updated to use it
instead of a direct `Button`.
> - **Metrics**:
> - **Dependency Fix**: Includes `lastMetrics` in `total` `useMemo` deps
in `resource-usage-client.tsx`.
> - **Clients**:
> - Marks Supabase browser client (`src/lib/clients/supabase/client.ts`)
as a client module.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
b126ae2. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: ben-fornefeld

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'