fix: web build fix for agents server aggregator (#357)

Author: brandonkachen

.github/workflows/ci.yml

@@ -154,6 +154,8 @@ jobs:
             cd ${{ matrix.package }}
             if [ "${{ matrix.package }}" = ".agents" ]; then
               find __tests__ -name '*.test.ts' ! -name '*.integration.test.ts' 2>/dev/null | sort | xargs -I {} bun test {} || echo "No regular tests found in .agents"
+            elif [ "${{ matrix.package }}" = "web" ]; then
+              bun run test --runInBand
             else
               find src -name '*.test.ts' ! -name '*.integration.test.ts' | sort | xargs -I {} bun test {}
             fi
@@ -244,7 +246,4 @@ jobs:
               find src -name '*.integration.test.ts' | sort | xargs -I {} bun test {}
             fi
 
-      # - name: Open interactive debug shell
-      #   if: ${{ failure() }}
-      #   uses: mxschmitt/action-tmate@v3
-      #   timeout-minutes: 15 # optional guard
+  # E2E tests for web intentionally omitted for now.

web/README.md

@@ -76,5 +76,38 @@ The following scripts are available in the `package.json`:
 - `test:watch`: Run unit tests in watch mode
 - `e2e`: Run end-to-end tests
 - `e2e:ui`: Run end-to-end tests with UI
-- `postbuild`: Generate sitemap
 - `prepare`: Install Husky for managing Git hooks
+
+## SEO & SSR
+
+- Store SSR: `src/app/store/page.tsx` renders agents server-side using cached data (ISR `revalidate=600`).
+- Client fallback: `src/app/store/store-client.tsx` only fetches `/api/agents` if SSR data is empty.
+- Dynamic metadata:
+  - Store: `src/app/store/page.tsx`
+  - Publisher: `src/app/publishers/[id]/page.tsx`
+  - Agent detail: `src/app/publishers/[id]/agents/[agentId]/[version]/page.tsx`
+
+### Warm the Store cache
+
+The agents cache is automatically warmed to ensure SEO data is available immediately:
+
+1. **Build-time validation**: `scripts/prebuild-agents-cache.ts` runs after `next build` to validate the database connection and data pipeline
+2. **Health check warming** (Primary): `/api/healthz` endpoint warms the cache when Render performs health checks before routing traffic
+
+On Render, set the Health Check Path to `/api/healthz` in your service settings to ensure the cache is warm before traffic is routed to the app.
+
+### E2E tests for SSR and hydration
+
+- Hydration fallback: `src/__tests__/e2e/store-hydration.spec.ts` - Tests client-side data fetching when SSR data is empty
+- SSR HTML: `src/__tests__/e2e/store-ssr.spec.ts` - Tests server-side rendering with JavaScript disabled
+
+Both tests use Playwright's `page.route()` to mock API responses without polluting production code.
+
+Run locally:
+
+```
+cd web
+bun run e2e
+```
+
+<!-- Lighthouse CI workflow removed for now. Reintroduce later if needed. -->

web/jest.config.cjs

@@ -12,7 +12,14 @@ const config = {
     '^@/(.*)$': '<rootDir>/src/$1',
     '^common/(.*)$': '<rootDir>/../common/src/$1',
     '^@codebuff/internal/xml-parser$': '<rootDir>/src/test-stubs/xml-parser.ts',
+    '^react$': '<rootDir>/node_modules/react',
+    '^react-dom$': '<rootDir>/node_modules/react-dom',
   },
+  testPathIgnorePatterns: [
+    '<rootDir>/src/__tests__/e2e',
+    '<rootDir>/src/app/api/v1/.*/__tests__',
+    '<rootDir>/src/app/api/agents/publish/__tests__',
+  ],
 }
 
 module.exports = createJestConfig(config)

web/package.json

@@ -11,7 +11,7 @@
   },
   "scripts": {
     "dev": "next dev -p ${NEXT_PUBLIC_WEB_PORT:-3000}",
-    "build": "next build 2>&1 | sed '/Contentlayer esbuild warnings:/,/^]/d'",
+    "build": "next build 2>&1 | sed '/Contentlayer esbuild warnings:/,/^]/d' && bun run scripts/prebuild-agents-cache.ts",
     "start": "next start",
     "preview": "bun run build && bun run start",
     "contentlayer": "contentlayer build",

web/playwright.config.ts

@@ -1,5 +1,9 @@
 import { defineConfig, devices } from '@playwright/test'
 
+// Use the same port as the dev server, defaulting to 3000
+const PORT = process.env.NEXT_PUBLIC_WEB_PORT || '3000'
+const BASE_URL = `http://127.0.0.1:${PORT}`
+
 export default defineConfig({
   testDir: './src/__tests__/e2e',
   fullyParallel: true,
@@ -8,7 +12,7 @@ export default defineConfig({
   workers: process.env.CI ? 1 : undefined,
   reporter: 'html',
   use: {
-    baseURL: 'http://127.0.0.1:3001',
+    baseURL: BASE_URL,
     trace: 'on-first-retry',
   },
 
@@ -28,8 +32,8 @@ export default defineConfig({
   ],
 
   webServer: {
-    command: 'bun run dev',
-    url: 'http://127.0.0.1:3001',
+    command: `NEXT_PUBLIC_WEB_PORT=${PORT} bun run dev`,
+    url: BASE_URL,
     reuseExistingServer: !process.env.CI,
   },
 })

web/scripts/prebuild-agents-cache.ts

@@ -0,0 +1,32 @@
+/**
+ * Pre-build cache warming for agents data
+ * This runs during the build process to validate the database connection
+ * and ensure agents data can be fetched successfully.
+ *
+ * Note: This doesn't actually populate Next.js cache (which requires runtime context),
+ * but it validates the data fetching pipeline works before deployment.
+ */
+
+import { fetchAgentsWithMetrics } from '../src/server/agents-data'
+
+async function main() {
+  console.log('[Prebuild] Validating agents data pipeline...')
+
+  try {
+    const startTime = Date.now()
+    const agents = await fetchAgentsWithMetrics()
+    const duration = Date.now() - startTime
+
+    console.log(`[Prebuild] Successfully fetched ${agents.length} agents in ${duration}ms`)
+    console.log('[Prebuild] Data pipeline validated - ready for deployment')
+
+    process.exit(0)
+  } catch (error) {
+    console.error('[Prebuild] Failed to fetch agents data:', error)
+    // Don't fail the build - health check will warm cache at runtime
+    console.error('[Prebuild] WARNING: Data fetch failed, relying on runtime health check')
+    process.exit(0)
+  }
+}
+
+main()

web/src/__tests__/e2e/store-hydration.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test'
+
+test('store hydrates agents via client fetch when SSR is empty', async ({ page }) => {
+  const agents = [
+    {
+      id: 'base',
+      name: 'Base',
+      description: 'desc',
+      publisher: { id: 'codebuff', name: 'Codebuff', verified: true, avatar_url: null },
+      version: '1.2.3',
+      created_at: new Date().toISOString(),
+      weekly_spent: 10,
+      weekly_runs: 5,
+      usage_count: 50,
+      total_spent: 100,
+      avg_cost_per_invocation: 0.2,
+      unique_users: 3,
+      last_used: new Date().toISOString(),
+      version_stats: {},
+      tags: ['test'],
+    },
+  ]
+
+  // Intercept client-side fetch to /api/agents to return our fixture
+  await page.route('**/api/agents', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(agents),
+    })
+  })
+
+  await page.goto('/store')
+
+  // Expect the agent card to render after hydration by checking the copy button title
+  await expect(
+    page.getByTitle('Copy: codebuff --agent codebuff/base@1.2.3').first(),
+  ).toBeVisible()
+})

web/src/__tests__/e2e/store-ssr.spec.ts

@@ -0,0 +1,46 @@
+import { test, expect } from '@playwright/test'
+
+// Disable JS to validate pure SSR HTML
+test.use({ javaScriptEnabled: false })
+
+test('SSR HTML contains at least one agent card', async ({ page }) => {
+  const agents = [
+    {
+      id: 'base',
+      name: 'Base',
+      description: 'desc',
+      publisher: { id: 'codebuff', name: 'Codebuff', verified: true, avatar_url: null },
+      version: '1.2.3',
+      created_at: new Date().toISOString(),
+      weekly_spent: 10,
+      weekly_runs: 5,
+      usage_count: 50,
+      total_spent: 100,
+      avg_cost_per_invocation: 0.2,
+      unique_users: 3,
+      last_used: new Date().toISOString(),
+      version_stats: {},
+      tags: ['test'],
+    },
+  ]
+
+  // Mock the server-side API call that happens during SSR
+  // This intercepts the request before SSR completes
+  await page.route('**/api/agents', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(agents),
+    })
+  })
+
+  const response = await page.goto('/store', {
+    waitUntil: 'domcontentloaded',
+  })
+  expect(response).not.toBeNull()
+  const html = await response!.text()
+
+  // Validate SSR output contains agent content (publisher + id)
+  expect(html).toContain('@codebuff')
+  expect(html).toContain('>base<')
+})