Refactor: Dashboard page layouts + Improve: Design coherence

bun.lock

@@ -54,6 +54,7 @@
         "geist": "^1.3.1",
         "immer": "^10.1.1",
         "lucide-react": "^0.525.0",
+        "micromatch": "^4.0.8",
         "motion": "^12.18.1",
         "nanoid": "^5.0.9",
         "next": "15.3.0-canary.23",

package.json

@@ -87,6 +87,7 @@
     "geist": "^1.3.1",
     "immer": "^10.1.1",
     "lucide-react": "^0.525.0",
+    "micromatch": "^4.0.8",
     "motion": "^12.18.1",
     "nanoid": "^5.0.9",
     "next": "15.3.0-canary.23",

src/__test__/README.md

@@ -51,7 +51,7 @@ To run development tests, you must create a `.env.test` file with the required e
 # .env.test
 TEST_E2B_DOMAIN=your-test-domain
 TEST_E2B_API_KEY=your-test-api-key
-TEST_METRICS_TEMPLATE=base  # optional, defaults to 'base'
+TEST_E2B_TEMPLATE=base  # optional, defaults to 'base'
 ```
 
 **Note:** Development tests interact with real E2B services and will create actual resources. Use with caution and ensure proper cleanup.

src/__test__/development/metrics.test.ts

@@ -14,9 +14,9 @@ if (!TEST_E2B_DOMAIN || !TEST_E2B_API_KEY) {
 const SPAWN_COUNT = 10 // total sandboxes to spawn
 const BATCH_SIZE = 2 // how many sandboxes to spawn concurrently
 
-const SBX_TIMEOUT_MS = 120_000
-const STRESS_TIMEOUT_MS = 120_000
-const TEMPLATE = process.env.TEST_METRICS_TEMPLATE ?? 'base'
+const SBX_TIMEOUT_MS = 40_000
+const STRESS_TIMEOUT_MS = 40_000
+const TEMPLATE = process.env.TEST_E2B_TEMPLATE ?? 'base'
 
 const MEMORY_MB = 1024 // allocate this much memory inside sandbox in MB
 const CPU_OPS = 100_000_000 // iterations of CPU intensive math

src/app/dashboard/[teamIdOrSlug]/billing/page.tsx

@@ -2,9 +2,15 @@ import { TIERS } from '@/configs/tiers'
 import CustomerPortalLink from '@/features/dashboard/billing/customer-portal-link'
 import BillingInvoicesTable from '@/features/dashboard/billing/invoices-table'
 import BillingTierCard from '@/features/dashboard/billing/tier-card'
-import DashboardPageLayout from '@/features/dashboard/page-layout'
 import { resolveTeamIdInServerComponent } from '@/lib/utils/server'
-import { CardDescription, CardTitle } from '@/ui/primitives/card'
+import Frame from '@/ui/frame'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/ui/primitives/card'
 import { Suspense } from 'react'
 
 export default async function BillingPage({
@@ -16,48 +22,52 @@ export default async function BillingPage({
   const teamId = await resolveTeamIdInServerComponent(teamIdOrSlug)
 
   return (
-    <DashboardPageLayout
-      title="Billing"
-      className="grid h-full w-full gap-4 self-start p-4 sm:gap-6 sm:p-6"
+    <Frame
+      classNames={{
+        wrapper: 'w-full max-md:p-0',
+        frame: 'max-md:border-none',
+      }}
     >
-      {/* Plan Section */}
-      <section className="col-span-1 grid gap-4 xl:col-span-12">
-        <div className="flex flex-col gap-1">
+      <Card className="w-full">
+        <CardHeader>
           <CardTitle>Plan</CardTitle>
           <CardDescription>
             Manage your current plan and subscription details.
           </CardDescription>
-        </div>
+        </CardHeader>
 
-        <Suspense fallback={null}>
-          <CustomerPortalLink className="bg-bg mt-2 w-fit" />
-        </Suspense>
+        <CardContent>
+          <Suspense fallback={null}>
+            <CustomerPortalLink className="bg-bg w-fit" />
+          </Suspense>
 
-        <div className="mt-3 flex flex-col gap-12 overflow-x-auto max-lg:mb-6 lg:flex-row">
-          {TIERS.map((tier) => (
-            <BillingTierCard
-              key={tier.id}
-              tier={tier}
-              isHighlighted={tier.id === 'pro_v1'}
-              className="min-w-[280px] shadow-xl lg:w-1/2 xl:min-w-0"
-            />
-          ))}
-        </div>
-      </section>
+          <div className="mt-3 flex flex-col gap-12 overflow-x-auto max-lg:mb-6 lg:flex-row">
+            {TIERS.map((tier) => (
+              <BillingTierCard
+                key={tier.id}
+                tier={tier}
+                isHighlighted={tier.id === 'pro_v1'}
+                className="min-w-[280px] shadow-xl lg:w-1/2 xl:min-w-0 flex-1"
+              />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
 
-      {/* Billing History Section */}
-      <section className="col-span-1 mt-8 grid gap-4 xl:col-span-12">
-        <div className="flex flex-col gap-1">
+      <Card className="w-full mt-6">
+        <CardHeader>
           <CardTitle>Billing History</CardTitle>
           <CardDescription>
             View your team's billing history and invoices.
           </CardDescription>
-        </div>
+        </CardHeader>
 
-        <div className="w-full overflow-x-auto">
-          <BillingInvoicesTable teamId={teamId} />
-        </div>
-      </section>
-    </DashboardPageLayout>
+        <CardContent>
+          <div className="w-full overflow-x-auto">
+            <BillingInvoicesTable teamId={teamId} />
+          </div>
+        </CardContent>
+      </Card>
+    </Frame>
   )
 }

src/app/dashboard/[teamIdOrSlug]/budget/page.tsx

@@ -1,7 +1,7 @@
 import CreditsCard from '@/features/dashboard/budget/credits-card'
 import UsageLimits from '@/features/dashboard/budget/usage-limits'
-import DashboardPageLayout from '@/features/dashboard/page-layout'
 import { resolveTeamIdInServerComponent } from '@/lib/utils/server'
+import Frame from '@/ui/frame'
 
 interface BudgetPageProps {
   params: Promise<{ teamIdOrSlug: string }>
@@ -12,9 +12,14 @@ export default async function BudgetPage({ params }: BudgetPageProps) {
   const teamId = await resolveTeamIdInServerComponent(teamIdOrSlug)
 
   return (
-    <DashboardPageLayout title="Budget" className="flex flex-col gap-4">
+    <Frame
+      classNames={{
+        frame: 'flex flex-col gap-4 max-md:border-none',
+        wrapper: 'w-full max-md:p-0',
+      }}
+    >
       <CreditsCard teamId={teamId} />
       <UsageLimits teamId={teamId} />
-    </DashboardPageLayout>
+    </Frame>
   )
 }

src/app/dashboard/[teamIdOrSlug]/keys/page.tsx

@@ -1,9 +1,15 @@
 import CreateApiKeyDialog from '@/features/dashboard/keys/create-api-key-dialog'
 import ApiKeysTable from '@/features/dashboard/keys/table'
-import DashboardPageLayout from '@/features/dashboard/page-layout'
 import { resolveTeamIdInServerComponent } from '@/lib/utils/server'
+import Frame from '@/ui/frame'
 import { Button } from '@/ui/primitives/button'
-import { CardDescription, CardTitle } from '@/ui/primitives/card'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/ui/primitives/card'
 import { Plus } from 'lucide-react'
 import { Suspense } from 'react'
 
@@ -18,11 +24,16 @@ export default async function KeysPage({ params }: KeysPageClientProps) {
   const teamId = await resolveTeamIdInServerComponent(teamIdOrSlug)
 
   return (
-    <DashboardPageLayout title="API Keys">
-      <div className="grid w-full gap-6 p-4 sm:gap-8 sm:p-6">
-        <section className="grid gap-4">
+    <Frame
+      classNames={{
+        wrapper: 'w-full max-md:p-0',
+        frame: 'max-md:border-none',
+      }}
+    >
+      <Card className="w-full">
+        <CardHeader>
           <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
-            <div className="flex flex-col gap-1">
+            <div className="flex flex-col gap-2">
               <CardTitle>Manage Team Keys</CardTitle>
               <CardDescription className="max-w-[400px]">
                 Organization keys are used to authenticate API requests from
@@ -32,18 +43,20 @@ export default async function KeysPage({ params }: KeysPageClientProps) {
 
             <Suspense fallback={null}>
               <CreateApiKeyDialog teamId={teamId}>
-                <Button className="w-full sm:w-auto">
+                <Button className="w-full sm:w-auto sm:self-start">
                   <Plus className="size-4" /> CREATE KEY
                 </Button>
               </CreateApiKeyDialog>
             </Suspense>
           </div>
+        </CardHeader>
 
-          <div className="-mx-4 w-full overflow-x-auto sm:mx-0">
+        <CardContent>
+          <div className="w-full overflow-x-auto">
             <ApiKeysTable teamId={teamId} className="min-w-[800px]" />
           </div>
-        </section>
-      </div>
-    </DashboardPageLayout>
+        </CardContent>
+      </Card>
+    </Frame>
   )
 }

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

@@ -42,7 +42,7 @@ export default async function SandboxInspectPage({
     >
       <ClientOnly
         className={cn(
-          'sticky top-0 flex flex-1 gap-4 overflow-hidden p-4 max-md:min-h-[calc(100vh-var(--protected-nav-height))]',
+          'sticky top-0 flex flex-1 gap-4 overflow-hidden p-6 max-md:min-h-[calc(100vh-var(--protected-nav-height))]',
           'md:relative md:!max-h-[100%]'
         )}
       >

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

@@ -1,5 +1,3 @@
-import LoadingLayout from '@/features/dashboard/loading-layout'
-import DashboardPageLayout from '@/features/dashboard/page-layout'
 import SandboxesTable from '@/features/dashboard/sandboxes/table'
 import { resolveTeamIdInServerComponent } from '@/lib/utils/server'
 import { getTeamSandboxes } from '@/server/sandboxes/get-team-sandboxes'
@@ -9,7 +7,6 @@ import {
   getTeamTemplates,
 } from '@/server/templates/get-team-templates'
 import ErrorBoundary from '@/ui/error'
-import { Suspense } from 'react'
 
 interface PageProps {
   params: Promise<{
@@ -20,13 +17,7 @@ interface PageProps {
 export default async function Page({ params }: PageProps) {
   const { teamIdOrSlug } = await params
 
-  return (
-    <DashboardPageLayout title="Sandboxes" fullscreen>
-      <Suspense fallback={<LoadingLayout />}>
-        <PageContent teamIdOrSlug={teamIdOrSlug} />
-      </Suspense>
-    </DashboardPageLayout>
-  )
+  return <PageContent teamIdOrSlug={teamIdOrSlug} />
 }
 
 interface PageContentProps {

src/app/dashboard/[teamIdOrSlug]/team/page.tsx

@@ -1,9 +1,9 @@
-import DashboardPageLayout from '@/features/dashboard/page-layout'
 import { InfoCard } from '@/features/dashboard/team/info-card'
 import { MemberCard } from '@/features/dashboard/team/member-card'
 import { NameCard } from '@/features/dashboard/team/name-card'
 import { ProfilePictureCard } from '@/features/dashboard/team/profile-picture-card'
 import { resolveTeamIdInServerComponent } from '@/lib/utils/server'
+import Frame from '@/ui/frame'
 import Scanline from '@/ui/scanline'
 import { Suspense } from 'react'
 
@@ -18,7 +18,12 @@ export default async function GeneralPage({ params }: GeneralPageProps) {
   const teamId = await resolveTeamIdInServerComponent(teamIdOrSlug)
 
   return (
-    <DashboardPageLayout title="Team">
+    <Frame
+      classNames={{
+        wrapper: 'w-full max-md:p-0',
+        frame: 'max-md:border-none',
+      }}
+    >
       <div className="grid w-full grid-cols-12">
         <Suspense>
           <>
@@ -37,6 +42,6 @@ export default async function GeneralPage({ params }: GeneralPageProps) {
           <MemberCard teamId={teamId} className="" />
         </section>
       </div>
-    </DashboardPageLayout>
+    </Frame>
   )
 }

src/app/dashboard/[teamIdOrSlug]/templates/loading.tsx

@@ -0,0 +1,5 @@
+import LoadingLayout from '@/features/dashboard/loading-layout'
+
+export default function Loading() {
+  return <LoadingLayout />
+}

src/app/dashboard/[teamIdOrSlug]/templates/page.tsx

@@ -1,13 +1,10 @@
-import DashboardPageLayout from '@/features/dashboard/page-layout'
 import TemplatesTable from '@/features/dashboard/templates/table'
 import { resolveTeamIdInServerComponent } from '@/lib/utils/server'
 import {
   getDefaultTemplates,
   getTeamTemplates,
 } from '@/server/templates/get-team-templates'
 import ErrorBoundary from '@/ui/error'
-import { Suspense } from 'react'
-import LoadingLayout from '../../loading'
 
 interface PageProps {
   params: Promise<{
@@ -18,13 +15,7 @@ interface PageProps {
 export default async function Page({ params }: PageProps) {
   const { teamIdOrSlug } = await params
 
-  return (
-    <DashboardPageLayout title="Templates" fullscreen>
-      <Suspense fallback={<LoadingLayout />}>
-        <PageContent teamIdOrSlug={teamIdOrSlug} />
-      </Suspense>
-    </DashboardPageLayout>
-  )
+  return <PageContent teamIdOrSlug={teamIdOrSlug} />
 }
 
 interface PageContentProps {

src/app/dashboard/[teamIdOrSlug]/usage/page.tsx

@@ -1,10 +1,10 @@
-import DashboardPageLayout from '@/features/dashboard/page-layout'
 import { CostCard } from '@/features/dashboard/usage/cost-card'
 import { RAMCard } from '@/features/dashboard/usage/ram-card'
 import { SandboxesCard } from '@/features/dashboard/usage/sandboxes-card'
 import { VCPUCard } from '@/features/dashboard/usage/vcpu-card'
 import { resolveTeamIdInServerComponent } from '@/lib/utils/server'
 import { CatchErrorBoundary } from '@/ui/error'
+import Frame from '@/ui/frame'
 
 export default async function UsagePage({
   params,
@@ -15,16 +15,19 @@ export default async function UsagePage({
   const teamId = await resolveTeamIdInServerComponent(teamIdOrSlug)
 
   return (
-    <DashboardPageLayout
-      title="Usage"
-      className="relative grid max-h-full w-full grid-cols-1 self-start lg:grid-cols-12"
+    <Frame
+      classNames={{
+        frame:
+          'relative grid max-h-full w-full grid-cols-1 self-start lg:grid-cols-12 max-md:border-none',
+        wrapper: 'w-full max-md:p-0',
+      }}
     >
       <SandboxesCard
         teamId={teamId}
         className="col-span-1 min-h-[360px] border-b lg:col-span-12"
       />
       <UsagePageContent teamId={teamId} />
-    </DashboardPageLayout>
+    </Frame>
   )
 }
 
@@ -43,11 +46,11 @@ function UsagePageContent({ teamId }: { teamId: string }) {
       />
       <VCPUCard
         teamId={teamId}
-        className="col-span-1 min-h-[320px] border-b lg:col-span-6 lg:border-r lg:border-b-0"
+        className="col-span-1 min-h-[360px] border-b lg:col-span-12 lg:border-r"
       />
       <RAMCard
         teamId={teamId}
-        className="col-span-1 min-h-[320px] border-b lg:col-span-6 lg:border-b-0"
+        className="col-span-1 min-h-[360px] border-b lg:col-span-12 lg:border-b-0"
       />
     </CatchErrorBoundary>
   )