Feature: Template build details page

next.config.mjs

@@ -12,7 +12,6 @@ const config = {
       bodySizeLimit: '5mb',
     },
     authInterrupts: true,
-    clientSegmentCache: true,
   },
   turbopack: {
     resolveAlias: {

package.json

@@ -81,6 +81,7 @@
     "@supabase/supabase-js": "^2.48.1",
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-query": "^5.90.7",
+    "@tanstack/react-query-devtools": "^5.91.1",
     "@tanstack/react-table": "^8.20.6",
     "@tanstack/react-virtual": "^3.13.12",
     "@theguild/remark-mermaid": "^0.2.0",

src/app/dashboard/[teamIdOrSlug]/layout.tsx

@@ -2,7 +2,7 @@ import { COOKIE_KEYS } from '@/configs/cookies'
 import { METADATA } from '@/configs/metadata'
 import { AUTH_URLS } from '@/configs/urls'
 import { DashboardContextProvider } from '@/features/dashboard/context'
-import DashboardLayoutView from '@/features/dashboard/layout/layout'
+import DashboardLayoutView from '@/features/dashboard/layouts/layout'
 import Sidebar from '@/features/dashboard/sidebar/sidebar'
 import { l } from '@/lib/clients/logger/logger'
 import { getSessionInsecure } from '@/server/auth/get-session'

src/app/dashboard/[teamIdOrSlug]/templates/[templateId]/builds/[buildId]/loading.tsx

@@ -0,0 +1 @@
+export { default } from '@/features/dashboard/loading-layout'

src/app/dashboard/[teamIdOrSlug]/templates/[templateId]/builds/[buildId]/page.tsx

@@ -0,0 +1,38 @@
+import BuildHeader from '@/features/dashboard/build/header'
+import Logs from '@/features/dashboard/build/logs'
+import { getQueryClient, HydrateClient, trpc } from '@/trpc/server'
+import { TRPCError } from '@trpc/server'
+import { notFound } from 'next/navigation'
+
+export default async function BuildPage({
+  params,
+}: PageProps<'/dashboard/[teamIdOrSlug]/templates/[templateId]/builds/[buildId]'>) {
+  const { teamIdOrSlug, templateId, buildId } = await params
+
+  const queryClient = getQueryClient()
+
+  try {
+    const data = await queryClient.fetchQuery(
+      trpc.builds.buildDetails.queryOptions({
+        teamIdOrSlug,
+        templateId,
+        buildId,
+      })
+    )
+
+    if (!data.hasRetainedLogs) throw notFound()
+  } catch (error) {
+    if (error instanceof TRPCError && error.code === 'NOT_FOUND') {
+      throw notFound()
+    }
+  }
+
+  return (
+    <HydrateClient>
+      <div className="h-full min-h-0 flex-1 p-3 md:p-6 flex flex-col gap-6">
+        <BuildHeader params={params} />
+        <Logs params={params} />
+      </div>
+    </HydrateClient>
+  )
+}

src/configs/layout.ts

@@ -12,62 +12,72 @@ export interface DashboardLayoutConfig {
   }
 }
 
-const DASHBOARD_LAYOUT_CONFIGS: Record<string, DashboardLayoutConfig> = {
+const DASHBOARD_LAYOUT_CONFIGS: Record<
+  string,
+  (pathname: string) => DashboardLayoutConfig
+> = {
   // base
-  '/dashboard/*/sandboxes': {
+  '/dashboard/*/sandboxes': () => ({
     title: 'Sandboxes',
     type: 'custom',
-  },
-  '/dashboard/*/sandboxes/**/*': {
+  }),
+  '/dashboard/*/sandboxes/**/*': () => ({
     title: 'Sandbox',
     type: 'custom',
-  },
-  '/dashboard/*/templates': {
+  }),
+  '/dashboard/*/templates': () => ({
     title: 'Templates',
     type: 'custom',
-  },
+  }),
+  '/dashboard/*/templates/*/builds/*': (pathname) => ({
+    title: `Templates / Build ${pathname.split('/').pop()}`,
+    type: 'custom',
+    custom: {
+      includeHeaderBottomStyles: true,
+    },
+  }),
 
   // integrations
-  '/dashboard/*/webhooks': {
+  '/dashboard/*/webhooks': () => ({
     title: 'Webhooks',
     type: 'default',
-  },
+  }),
 
   // team
-  '/dashboard/*/general': {
+  '/dashboard/*/general': () => ({
     title: 'General',
     type: 'default',
-  },
-  '/dashboard/*/keys': {
+  }),
+  '/dashboard/*/keys': () => ({
     title: 'API Keys',
     type: 'default',
-  },
-  '/dashboard/*/members': {
+  }),
+  '/dashboard/*/members': () => ({
     title: 'Members',
     type: 'default',
-  },
+  }),
 
   // billing
-  '/dashboard/*/usage': {
+  '/dashboard/*/usage': () => ({
     title: 'Usage',
     type: 'custom',
     custom: {
       includeHeaderBottomStyles: true,
     },
-  },
-  '/dashboard/*/budget': {
+  }),
+  '/dashboard/*/budget': () => ({
     title: 'Budget',
     type: 'default',
-  },
-  '/dashboard/*/billing': {
+  }),
+  '/dashboard/*/billing': () => ({
     title: 'Billing',
     type: 'default',
-  },
+  }),
 
-  '/dashboard/*/account': {
+  '/dashboard/*/account': () => ({
     title: 'Account',
     type: 'default',
-  },
+  }),
 }
 
 /**
@@ -79,7 +89,7 @@ export const getDashboardLayoutConfig = (
 ): DashboardLayoutConfig => {
   for (const [pattern, config] of Object.entries(DASHBOARD_LAYOUT_CONFIGS)) {
     if (micromatch.isMatch(pathname, pattern)) {
-      return config
+      return config(pathname)
     }
   }
 

src/configs/sidebar.ts

@@ -44,7 +44,7 @@ export const SIDEBAR_MAIN_LINKS: SidebarNavItem[] = [
     label: 'Templates',
     href: (args) => PROTECTED_URLS.TEMPLATES(args.teamIdOrSlug!),
     icon: Container,
-    activeMatch: `/dashboard/*/templates`,
+    activeMatch: `/dashboard/*/templates/**`,
   },
 
   // Integrations

src/configs/urls.ts

@@ -39,6 +39,8 @@ export const PROTECTED_URLS = {
     `/dashboard/${teamIdOrSlug}/templates?tab=list`,
   TEMPLATES_BUILDS: (teamIdOrSlug: string) =>
     `/dashboard/${teamIdOrSlug}/templates?tab=builds`,
+  TEMPLATE_BUILD: (teamIdOrSlug: string, templateId: string, buildId: string) =>
+    `/dashboard/${teamIdOrSlug}/templates/${templateId}/builds/${buildId}`,
 
   USAGE: (teamIdOrSlug: string) => `/dashboard/${teamIdOrSlug}/usage`,
   BILLING: (teamIdOrSlug: string) => `/dashboard/${teamIdOrSlug}/billing`,

src/features/dashboard/build/header-cells.tsx

@@ -0,0 +1,100 @@
+import { PROTECTED_URLS } from '@/configs/urls'
+import {
+  formatDurationCompact,
+  formatTimeAgoCompact,
+} from '@/lib/utils/formatting'
+import { cn } from '@/lib/utils/ui'
+import CopyButtonInline from '@/ui/copy-button-inline'
+import { Button } from '@/ui/primitives/button'
+import { ArrowUpRight } from 'lucide-react'
+import { useParams, useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { useTemplateTableStore } from '../templates/list/stores/table-store'
+
+export function Template({
+  template,
+  templateId,
+  className,
+}: {
+  template: string
+  templateId: string
+  className?: string
+}) {
+  const router = useRouter()
+  const { teamIdOrSlug } =
+    useParams<
+      Awaited<PageProps<'/dashboard/[teamIdOrSlug]/templates'>['params']>
+    >()
+
+  return (
+    <Button
+      variant="link"
+      className={cn(
+        'text-fg h-auto p-0 gap-1 font-sans prose-table normal-case max-w-full',
+        className
+      )}
+      onClick={(e) => {
+        e.stopPropagation()
+        e.preventDefault()
+
+        useTemplateTableStore.getState().setGlobalFilter(templateId)
+        router.push(PROTECTED_URLS.TEMPLATES_LIST(teamIdOrSlug))
+      }}
+    >
+      <p className="truncate">{template}</p>
+      <ArrowUpRight className="size-3 min-w-3" />
+    </Button>
+  )
+}
+
+export function RanFor({
+  startedAt,
+  finishedAt,
+  isBuilding,
+}: {
+  startedAt: number
+  finishedAt: number | null
+  isBuilding: boolean
+}) {
+  const [now, setNow] = useState(() => Date.now())
+
+  useEffect(() => {
+    if (!isBuilding) return
+
+    const interval = setInterval(() => {
+      setNow(Date.now())
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [isBuilding])
+
+  const duration = isBuilding
+    ? now - startedAt
+    : (finishedAt ?? now) - startedAt
+  const iso = finishedAt ? new Date(finishedAt).toISOString() : null
+
+  if (isBuilding || !iso) {
+    return (
+      <span className="whitespace-nowrap text-fg-tertiary">
+        {formatDurationCompact(duration)}
+      </span>
+    )
+  }
+
+  return (
+    <CopyButtonInline value={iso} className="whitespace-nowrap">
+      {formatDurationCompact(duration)}
+    </CopyButtonInline>
+  )
+}
+
+export function StartedAt({ timestamp }: { timestamp: number }) {
+  const iso = new Date(timestamp).toISOString()
+  const elapsed = Date.now() - timestamp
+
+  return (
+    <CopyButtonInline value={iso} className="whitespace-nowrap">
+      {formatTimeAgoCompact(elapsed)}
+    </CopyButtonInline>
+  )
+}