Feat: Add builds procedures & UI (#193)

<!-- CURSOR_SUMMARY -->
> [!NOTE]
> Introduce template Builds tab with filtering and live status, backed
by new TRPC builds endpoints; add Turbopack fs stubs and update deps.
> 
> - **Frontend (Templates UI)**:
> - **Tabbed layout** under `templates` with `@list` and new `@builds`
routes (`layout.tsx`, `page.tsx`, defaults).
> - **Builds**: header filters (`status`, `Build ID/Template`), table
with infinite pagination and live status polling, empty/loader states
(`features/dashboard/templates/builds/*`).
> - **Layout/UX**: split dashboard layout into
`DefaultDashboardLayout`/`CustomDashboardLayout`; improved loader,
checkbox, dropdown, button sizing, table/label styles.
> - **Utilities**: add `formatDurationCompact`, `formatTimeAgoCompact`;
new `cn` util in `lib/utils/ui`.
>   - **URLs**: add `TEMPLATES_LIST` and `TEMPLATES_BUILDS`.
> - **Backend (TRPC + Repos)**:
>   - New `builds` router: `list`, `runningStatuses`, `getBuildStatus`.
> - Supabase repo for listing builds and running statuses with
status/DTO mappers (`models`, `repositories`).
>   - Telemetry: attach inferred `template_id`/`sandbox_id` span attrs.
>   - Remove legacy `teams` router from app router.
> - **Config/Build**:
> - Turbopack `resolveAlias` to stub Node `fs`/`fs/promises` for browser
(`stubs/fs.ts`, `stubs/fs-promises.ts`); include stubs in `tsconfig`.
> - **Tests/Scripts**:
>   - Add dev test `template-build.test.ts`; adjust dev test scripts.
> - **Dependencies**:
> - Bump `e2b` to `^2.7.0`, `@tanstack/react-virtual`, `tailwind-merge`;
lockfile updates.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
5b96dd9. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: ben-fornefeld

bun.lock

@@ -14,6 +14,16 @@ const config = {
     authInterrupts: true,
     clientSegmentCache: true,
   },
+  turbopack: {
+    resolveAlias: {
+      // Stub Node.js modules for browser builds
+      // e2b package bundles these packages. when dealing with browser chunks,
+      // we need to stub these packages for builds.
+      fs: { browser: './stubs/fs.ts' },
+      'node:fs': { browser: './stubs/fs.ts' },
+      'node:fs/promises': { browser: './stubs/fs-promises.ts' },
+    },
+  },
   logging: {
     fetches: {
       fullUrl: true,

next.config.mjs

@@ -28,7 +28,8 @@
     "scripts:create-migration": "bun scripts/create-migration.ts",
     "<<<<<<< Development": "",
     "shad": "bunx shadcn@canary",
-    "test:development:traffic": "vitest run src/__test__/development/traffic.test.ts",
+    "test:dev:traffic": "vitest run src/__test__/development/traffic.test.ts",
+    "test:dev:build": "vitest run src/__test__/development/template-build.test.ts",
     "clean": "rm -rf .next node_modules && bun install",
     "<<<<<<< Testing": "",
     "test:run": "bun scripts:check-all-env && vitest run",
@@ -81,7 +82,7 @@
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-query": "^5.90.7",
     "@tanstack/react-table": "^8.20.6",
-    "@tanstack/react-virtual": "^3.11.3",
+    "@tanstack/react-virtual": "^3.13.12",
     "@theguild/remark-mermaid": "^0.2.0",
     "@trpc/client": "^11.7.1",
     "@trpc/react-query": "^11.7.1",
@@ -102,7 +103,7 @@
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "deepmerge": "^4.3.1",
-    "e2b": "1.10.0",
+    "e2b": "^2.7.0",
     "echarts": "^6.0.0",
     "echarts-for-react": "^3.0.2",
     "fast-xml-parser": "^4.5.1",
@@ -140,7 +141,7 @@
     "styled-components": "^6.1.19",
     "superjson": "^2.2.5",
     "swr": "^2.3.4",
-    "tailwind-merge": "^3.3.1",
+    "tailwind-merge": "^3.4.0",
     "tw-animate-css": "^1.3.6",
     "usehooks-ts": "^3.1.0",
     "vaul": "^1.1.2",

package.json

@@ -0,0 +1,63 @@
+/**
+ * This test builds a basic sandbox template using the E2B SDK,
+ * useful for development and testing of template building features in the dashboard.
+ */
+
+import { Template } from 'e2b'
+import { describe, expect, it } from 'vitest'
+
+const l = console
+
+const { TEST_E2B_DOMAIN, TEST_E2B_API_KEY } = import.meta.env
+
+if (!TEST_E2B_DOMAIN || !TEST_E2B_API_KEY) {
+  throw new Error(
+    'Missing environment variables: TEST_E2B_DOMAIN and/or TEST_E2B_API_KEY'
+  )
+}
+
+const BUILD_TIMEOUT_MS = 5 * 60 * 1000
+
+describe('E2B Template build test', () => {
+  it(
+    'builds a basic template with Node.js',
+    { timeout: BUILD_TIMEOUT_MS },
+    async () => {
+      const templateName = `test-template-${Date.now()}`
+
+      l.info('test:starting_template_build', {
+        templateName,
+        startTime: new Date().toISOString(),
+      })
+
+      const template = Template()
+        .skipCache()
+        .fromNodeImage('lts')
+        .setWorkdir('/app')
+        .runCmd('echo "Hello from template build"')
+        .setStartCmd('node --version', 'node --version')
+
+      const buildInfo = await Template.build(template, {
+        alias: templateName,
+        apiKey: TEST_E2B_API_KEY,
+        domain: TEST_E2B_DOMAIN,
+        onBuildLogs: (log) => {
+          l.info('test:build_log', {
+            level: log.level,
+            message: log.message,
+          })
+        },
+      })
+
+      l.info('test:template_build_completed', {
+        templateId: buildInfo.templateId,
+        buildId: buildInfo.buildId,
+        alias: buildInfo.alias,
+        endTime: new Date().toISOString(),
+      })
+
+      expect(buildInfo.templateId).toBeDefined()
+      expect(buildInfo.buildId).toBeDefined()
+    }
+  )
+})

src/__test__/development/template-build.test.ts

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

src/app/dashboard/[teamIdOrSlug]/templates/(tabs)/@builds/default.tsx

@@ -0,0 +1,11 @@
+import BuildsHeader from '@/features/dashboard/templates/builds/header'
+import BuildsTable from '@/features/dashboard/templates/builds/table'
+
+export default function BuildsPage() {
+  return (
+    <div className="h-full min-h-0 flex-1 p-3 md:p-6 flex flex-col gap-3">
+      <BuildsHeader />
+      <BuildsTable />
+    </div>
+  )
+}

src/app/dashboard/[teamIdOrSlug]/templates/(tabs)/@builds/page.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

src/app/dashboard/[teamIdOrSlug]/templates/(tabs)/@list/default.tsx

@@ -0,0 +1,11 @@
+import LoadingLayout from '@/features/dashboard/loading-layout'
+import TemplatesTable from '@/features/dashboard/templates/list/table'
+import { Suspense } from 'react'
+
+export default async function ListPage() {
+  return (
+    <Suspense fallback={<LoadingLayout />}>
+      <TemplatesTable />
+    </Suspense>
+  )
+}

src/app/dashboard/[teamIdOrSlug]/templates/(tabs)/@list/page.tsx

@@ -0,0 +1,33 @@
+import { DashboardTab, DashboardTabs } from '@/ui/dashboard-tabs'
+import { BuildIcon, ListIcon } from '@/ui/primitives/icons'
+
+export default function TemplatesLayout({
+  list,
+  builds,
+}: LayoutProps<'/dashboard/[teamIdOrSlug]/templates'> & {
+  list: React.ReactNode
+  builds: React.ReactNode
+}) {
+  return (
+    <DashboardTabs
+      type="query"
+      layoutKey="tabs-indicator-templates"
+      className="pt-2 flex-1 md:pt-3"
+    >
+      <DashboardTab
+        id="list"
+        label="List"
+        icon={<ListIcon className="size-4" />}
+      >
+        {list}
+      </DashboardTab>
+      <DashboardTab
+        id="builds"
+        label="Builds"
+        icon={<BuildIcon className="size-4" />}
+      >
+        {builds}
+      </DashboardTab>
+    </DashboardTabs>
+  )
+}