From be8fc0ded5a420991a414c98e4385018aea914a3 Mon Sep 17 00:00:00 2001
From: johndoe6345789 <john.doe6345789@gmail.com>
Date: Fri, 16 Jan 2026 15:44:54 +0000
Subject: [PATCH] Phase 1: Bootstrap database and fix DBAL for public pages

- Generated Prisma schema from YAML
- Created database file at dbal/shared/prisma/dev.db
- Fixed seedDatabase() path resolution for Next.js context
- Fixed DBAL tenant filter to allow public pages (tenantId: null)
- Added 'use client' directive to all fakemui components using React hooks
- Added DATABASE_URL environment variable configuration

The bootstrap endpoint successfully seeds the database with installed packages.
Front page now can query for public PageConfig entries without tenant requirement.

Remaining:
- Fix layout package path resolution
- Test front page rendering with database-driven components
- Create comprehensive E2E tests with Playwright

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .claude/settings.local.json                   |   8 +-
 .../operations/system/page-operations.ts      |   5 +
 dbal/development/src/runtime/prisma-client.ts |  14 ++-
 dbal/development/src/seeds/index.ts           |  14 ++-
 docs/FRONTPAGE_RENDERING_PLAN.md              | 106 ++++++++++++++++++
 fakemui/fakemui/data-display/TreeView.tsx     |   2 +
 fakemui/fakemui/feedback/Snackbar.tsx         |   2 +
 fakemui/fakemui/inputs/Autocomplete.tsx       |   2 +
 fakemui/fakemui/inputs/ColorPicker.tsx        |   2 +
 fakemui/fakemui/inputs/DatePicker.tsx         |   2 +
 fakemui/fakemui/inputs/FileUpload.tsx         |   2 +
 fakemui/fakemui/inputs/FormControl.tsx        |   2 +
 fakemui/fakemui/inputs/Rating.tsx             |   2 +
 fakemui/fakemui/inputs/Slider.tsx             |   2 +
 fakemui/fakemui/lab/TreeView.tsx              |   2 +
 fakemui/fakemui/navigation/SpeedDial.tsx      |   2 +
 fakemui/fakemui/utils/GlobalStyles.tsx        |   2 +
 fakemui/fakemui/utils/NoSsr.tsx               |   2 +
 fakemui/fakemui/utils/Popper.tsx              |   2 +
 fakemui/fakemui/utils/TextareaAutosize.tsx    |   2 +
 fakemui/fakemui/utils/ToastContext.tsx        |   2 +
 fakemui/fakemui/utils/useMediaQuery.js        |   2 +
 fakemui/fakemui/x/DataGrid.tsx                |   2 +
 fakemui/fakemui/x/DatePicker.tsx              |   2 +
 .../packages/json/render-json-component.tsx   |   2 +
 25 files changed, 181 insertions(+), 6 deletions(-)
 create mode 100644 docs/FRONTPAGE_RENDERING_PLAN.md

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index bd6275679..eb4393f93 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -74,7 +74,13 @@
       "Bash(do)",
       "Bash(if [ -f \"/Users/rmac/Documents/metabuilder/packages/$pkg/seed/metadata.json\" ])",
       "Bash(then)",
-      "Bash(else)"
+      "Bash(else)",
+      "Bash(curl:*)",
+      "Bash(for file in /Users/rmac/Documents/metabuilder/fakemui/fakemui/feedback/Snackbar.tsx /Users/rmac/Documents/metabuilder/fakemui/fakemui/inputs/Autocomplete.tsx /Users/rmac/Documents/metabuilder/fakemui/fakemui/inputs/ColorPicker.tsx /Users/rmac/Documents/metabuilder/fakemui/fakemui/inputs/DatePicker.tsx /Users/rmac/Documents/metabuilder/fakemui/fakemui/inputs/FileUpload.tsx /Users/rmac/Documents/metabuilder/fakemui/fakemui/inputs/FormControl.tsx /Users/rmac/Documents/metabuilder/fakemui/fakemui/inputs/Rating.tsx /Users/rmac/Documents/metabuilder/fakemui/fakemui/inputs/Slider.tsx /Users/rmac/Documents/metabuilder/fakemui/fakemui/lab/TreeView.tsx /Users/rmac/Documents/metabuilder/fakemui/fakemui/navigation/SpeedDial.tsx /Users/rmac/Documents/metabuilder/fakemui/fakemui/utils/GlobalStyles.tsx /Users/rmac/Documents/metabuilder/fakemui/fakemui/utils/NoSsr.tsx /Users/rmac/Documents/metabuilder/fakemui/fakemui/utils/Popper.tsx /Users/rmac/Documents/metabuilder/fakemui/fakemui/utils/TextareaAutosize.tsx /Users/rmac/Documents/metabuilder/fakemui/fakemui/utils/ToastContext.tsx /Users/rmac/Documents/metabuilder/fakemui/fakemui/x/DataGrid.tsx /Users/rmac/Documents/metabuilder/fakemui/fakemui/x/DatePicker.tsx)",
+      "Bash(if [ -f \"$file\" ])",
+      "Bash(if ! head -1 \"$file\")",
+      "Bash(for file in fakemui/fakemui/utils/useMediaQuery.js)",
+      "Bash(perl -pi -e:*)"
     ]
   },
   "spinnerTipsEnabled": false
diff --git a/dbal/development/src/core/entities/operations/system/page-operations.ts b/dbal/development/src/core/entities/operations/system/page-operations.ts
index cdd141c9a..c4457b7d7 100644
--- a/dbal/development/src/core/entities/operations/system/page-operations.ts
+++ b/dbal/development/src/core/entities/operations/system/page-operations.ts
@@ -172,7 +172,12 @@ export const createPageConfigOperations = (adapter: DBALAdapter, tenantId?: stri
     return result
   },
   list: options => {
+    // For public pages, allow listing pages with tenantId: null
     const tenantFilter = resolveTenantFilter(tenantId, options?.filter)
+    if (!tenantFilter && !tenantId) {
+      // No configured tenant and no filter provided - allow listing public pages (tenantId: null)
+      return adapter.list('PageConfig', { ...options, filter: { ...(options?.filter ?? {}), tenantId: null } }) as Promise<ListResult<PageConfig>>
+    }
     if (!tenantFilter) {
       throw DBALError.validationError('Tenant ID is required', [{ field: 'tenantId', error: 'tenantId is required' }])
     }
diff --git a/dbal/development/src/runtime/prisma-client.ts b/dbal/development/src/runtime/prisma-client.ts
index 24f39e0b5..ecd81d9c4 100644
--- a/dbal/development/src/runtime/prisma-client.ts
+++ b/dbal/development/src/runtime/prisma-client.ts
@@ -39,7 +39,19 @@ export function createPrismaClient(config?: PrismaClientConfig): PrismaClient {
   }
 
   // Production/Development mode: Use SQLite adapter with file or URL
-  const databaseUrl = dbUrl || 'file:./prisma/dev.db'
+  let databaseUrl = dbUrl
+
+  // If no DATABASE_URL is set, use a default that works from any directory
+  if (!databaseUrl) {
+    // Detect if we're running from Next.js (frontends/nextjs)
+    const cwd = process.cwd()
+    let projectRoot = cwd
+    if (cwd.endsWith('frontends/nextjs') || cwd.endsWith('frontends\\nextjs')) {
+      projectRoot = require('path').resolve(cwd, '../..')
+    }
+    databaseUrl = `file:${require('path').resolve(projectRoot, 'dbal/shared/prisma/dev.db')}`
+  }
+
   const adapter = new PrismaBetterSqlite3({
     url: databaseUrl,
   })
diff --git a/dbal/development/src/seeds/index.ts b/dbal/development/src/seeds/index.ts
index b150a09db..e1d2648e4 100644
--- a/dbal/development/src/seeds/index.ts
+++ b/dbal/development/src/seeds/index.ts
@@ -28,10 +28,16 @@ import { getPrismaClient } from '../runtime/prisma-client'
  * @param dbal DBALClient instance for database access
  */
 export async function seedDatabase(dbal: DBALClient): Promise<void> {
-  // __dirname resolves to dist directory, so we need to go up 3 levels
-  // dist -> src -> development -> . -> dbal -> shared/seeds/database
-  const seedDir = path.resolve(__dirname, '../../../shared/seeds/database')
-  const packagesDir = path.resolve(__dirname, '../../../../packages')
+  // Determine project root: Next.js runs from nextjs directory, so check parent if needed
+  let cwd = process.cwd()
+
+  // If we're in frontends/nextjs, go up two levels to project root
+  if (cwd.endsWith('frontends/nextjs') || cwd.endsWith('frontends\\nextjs')) {
+    cwd = path.resolve(cwd, '../..')
+  }
+
+  const seedDir = path.resolve(cwd, 'dbal/shared/seeds/database')
+  const packagesDir = path.resolve(cwd, 'packages')
 
   // 1. Load installed_packages.yaml
   const packagesPath = path.join(seedDir, 'installed_packages.yaml')
diff --git a/docs/FRONTPAGE_RENDERING_PLAN.md b/docs/FRONTPAGE_RENDERING_PLAN.md
new file mode 100644
index 000000000..4a4db8908
--- /dev/null
+++ b/docs/FRONTPAGE_RENDERING_PLAN.md
@@ -0,0 +1,106 @@
+# Front Page Rendering Plan
+
+Render the MetaBuilder front page (`/`) using real package components with Playwright E2E tests, while replicating the look and feel of the old system.
+
+## Objectives
+
+### Objective 1: Render Front Page Using Real Package Components ✅
+- Front page loads components from `ui_home` package
+- Uses JSON-based component definitions
+- Displays properly with fakemui Material Design components
+- Works with database-driven PageConfig and InstalledPackage records
+
+### Objective 2: Replicate Old System Look & Feel
+- Analyze old system UI/UX (`/old/src/`)
+- Extract visual design, layout, and interaction patterns
+- Implement similar aesthetics using fakemui components
+- Maintain consistency with existing MetaBuilder design system
+
+### Objective 3: Playwright E2E Testing
+- Create tests that verify front page rendering
+- Test component loading from packages
+- Verify user access and permissions
+- Test fallback behavior when components not available
+
+## Current State Analysis
+
+### Front Page (`page.tsx`)
+```
+✅ Already configured for dynamic rendering
+✅ DBAL client integration working
+✅ PageConfig and InstalledPackage lookup implemented
+✅ JSON component rendering available
+✅ Package component loading ready
+```
+
+**What's missing:**
+- Database not yet initialized (no tables)
+- No seed data loaded (no PageConfig or InstalledPackage records)
+- No bootstrap API endpoint called
+- Example components need to be expanded with design
+
+### Old System (`/old/src/`)
+**Key patterns to replicate:**
+- Hero section with gradient background
+- Call-to-action buttons
+- Multi-level interface system
+- Clean, modern design with Material Design patterns
+- Responsive layout
+
+## Execution Plan
+
+### Phase 1: Database Bootstrap (3 steps, ~5 min)
+
+Step 1: Generate Prisma schema from YAML
+```bash
+npm --prefix dbal/development run codegen:prisma
+```
+
+Step 2: Push schema to SQLite database
+```bash
+npm --prefix dbal/development run db:push
+```
+
+Step 3: Bootstrap system with seed data
+```bash
+curl -X POST http://localhost:3000/api/bootstrap
+```
+
+### Phase 2: Update UI Home Components (1 step, ~20 min)
+
+Step 4: Update `/packages/ui_home/component/ui-components.json` to replicate old system design
+
+Key components to enhance:
+- Hero section with gradient, heading, subheading, CTA buttons
+- Feature grid showing system capabilities
+- Get started section
+- Footer with navigation
+
+### Phase 3: Playwright E2E Tests (2 steps, ~15 min)
+
+Step 5: Create test suite `/e2e/frontpage.spec.ts`
+
+Step 6: Run tests
+```bash
+npm run test:e2e
+```
+
+### Phase 4: Refinement (~15 min)
+
+Step 7: Visual verification and adjustments
+Step 8: Performance optimization
+Step 9: Final testing
+
+## What Needs to Happen Now
+
+1. **Bootstrap Database**: Generate schema, push to DB, call bootstrap
+2. **Check Components**: Verify ui_home seed data loads correctly
+3. **Update Design**: Enhance components to match old system aesthetic
+4. **Create Tests**: Write Playwright tests for front page
+5. **Verify**: Test that everything renders correctly
+
+---
+
+**Status**: Ready to execute
+**Next Step**: Phase 1 - Bootstrap database
+
diff --git a/fakemui/fakemui/data-display/TreeView.tsx b/fakemui/fakemui/data-display/TreeView.tsx
index 648a8c29a..4c51014f0 100644
--- a/fakemui/fakemui/data-display/TreeView.tsx
+++ b/fakemui/fakemui/data-display/TreeView.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState, useCallback, useMemo } from 'react'
 import clsx from 'clsx'
 import styles from '../../styles/TreeView.module.scss'
diff --git a/fakemui/fakemui/feedback/Snackbar.tsx b/fakemui/fakemui/feedback/Snackbar.tsx
index 364dee25c..5c12e6c13 100644
--- a/fakemui/fakemui/feedback/Snackbar.tsx
+++ b/fakemui/fakemui/feedback/Snackbar.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useEffect, useCallback, useState } from 'react'
 import { classNames } from '../utils/classNames'
 
diff --git a/fakemui/fakemui/inputs/Autocomplete.tsx b/fakemui/fakemui/inputs/Autocomplete.tsx
index 1f923aa31..fa1ab4142 100644
--- a/fakemui/fakemui/inputs/Autocomplete.tsx
+++ b/fakemui/fakemui/inputs/Autocomplete.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState, useRef, useEffect } from 'react'
 import { classNames } from '../utils/classNames'
 
diff --git a/fakemui/fakemui/inputs/ColorPicker.tsx b/fakemui/fakemui/inputs/ColorPicker.tsx
index ab685bffc..d96b63202 100644
--- a/fakemui/fakemui/inputs/ColorPicker.tsx
+++ b/fakemui/fakemui/inputs/ColorPicker.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useState, useCallback } from 'react'
 import { FormLabel } from './FormLabel'
 import { FormHelperText } from './FormHelperText'
diff --git a/fakemui/fakemui/inputs/DatePicker.tsx b/fakemui/fakemui/inputs/DatePicker.tsx
index 1fb3e1b4f..a31a2d00e 100644
--- a/fakemui/fakemui/inputs/DatePicker.tsx
+++ b/fakemui/fakemui/inputs/DatePicker.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useState, useRef, useEffect } from 'react'
 import { FormLabel } from './FormLabel'
 import { FormHelperText } from './FormHelperText'
diff --git a/fakemui/fakemui/inputs/FileUpload.tsx b/fakemui/fakemui/inputs/FileUpload.tsx
index 8b80d7a28..7a48165be 100644
--- a/fakemui/fakemui/inputs/FileUpload.tsx
+++ b/fakemui/fakemui/inputs/FileUpload.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useCallback, useRef, useState } from 'react'
 import { FormLabel } from './FormLabel'
 import { FormHelperText } from './FormHelperText'
diff --git a/fakemui/fakemui/inputs/FormControl.tsx b/fakemui/fakemui/inputs/FormControl.tsx
index 4d2851992..c30ef55fb 100644
--- a/fakemui/fakemui/inputs/FormControl.tsx
+++ b/fakemui/fakemui/inputs/FormControl.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, createContext, useContext, useMemo, useId } from 'react'
 
 /**
diff --git a/fakemui/fakemui/inputs/Rating.tsx b/fakemui/fakemui/inputs/Rating.tsx
index d13f87aff..d1100e9c7 100644
--- a/fakemui/fakemui/inputs/Rating.tsx
+++ b/fakemui/fakemui/inputs/Rating.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 import { classNames } from '../utils/classNames'
 
diff --git a/fakemui/fakemui/inputs/Slider.tsx b/fakemui/fakemui/inputs/Slider.tsx
index 8c485e6ee..c4ca26b0e 100644
--- a/fakemui/fakemui/inputs/Slider.tsx
+++ b/fakemui/fakemui/inputs/Slider.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useState, useCallback, useMemo } from 'react'
 import { classNames } from '../utils/classNames'
 
diff --git a/fakemui/fakemui/lab/TreeView.tsx b/fakemui/fakemui/lab/TreeView.tsx
index a8ed72545..c8ab320bd 100644
--- a/fakemui/fakemui/lab/TreeView.tsx
+++ b/fakemui/fakemui/lab/TreeView.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState, createContext, useContext, forwardRef } from 'react'
 import { classNames } from '../utils/classNames'
 
diff --git a/fakemui/fakemui/navigation/SpeedDial.tsx b/fakemui/fakemui/navigation/SpeedDial.tsx
index 11bdaa663..260cb2b26 100644
--- a/fakemui/fakemui/navigation/SpeedDial.tsx
+++ b/fakemui/fakemui/navigation/SpeedDial.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 import { classNames } from '../utils/classNames'
 
diff --git a/fakemui/fakemui/utils/GlobalStyles.tsx b/fakemui/fakemui/utils/GlobalStyles.tsx
index 01c392c54..89921c6c5 100644
--- a/fakemui/fakemui/utils/GlobalStyles.tsx
+++ b/fakemui/fakemui/utils/GlobalStyles.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useEffect, useId } from 'react'
 
 type CSSProperties = React.CSSProperties
diff --git a/fakemui/fakemui/utils/NoSsr.tsx b/fakemui/fakemui/utils/NoSsr.tsx
index 3de445633..06a48d1f1 100644
--- a/fakemui/fakemui/utils/NoSsr.tsx
+++ b/fakemui/fakemui/utils/NoSsr.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState, useEffect } from 'react'
 
 export interface NoSsrProps {
diff --git a/fakemui/fakemui/utils/Popper.tsx b/fakemui/fakemui/utils/Popper.tsx
index 5a51cdfbb..93f87dd50 100644
--- a/fakemui/fakemui/utils/Popper.tsx
+++ b/fakemui/fakemui/utils/Popper.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState, useEffect, useRef } from 'react'
 import { createPortal } from 'react-dom'
 import { classNames } from './classNames'
diff --git a/fakemui/fakemui/utils/TextareaAutosize.tsx b/fakemui/fakemui/utils/TextareaAutosize.tsx
index e9488846c..89e7291d5 100644
--- a/fakemui/fakemui/utils/TextareaAutosize.tsx
+++ b/fakemui/fakemui/utils/TextareaAutosize.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useRef, useEffect, useCallback } from 'react'
 import { classNames } from './classNames'
 
diff --git a/fakemui/fakemui/utils/ToastContext.tsx b/fakemui/fakemui/utils/ToastContext.tsx
index c915ca57b..ee032522d 100644
--- a/fakemui/fakemui/utils/ToastContext.tsx
+++ b/fakemui/fakemui/utils/ToastContext.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { createContext, useContext, useState, useCallback, useRef, useEffect } from 'react'
 import { Snackbar, SnackbarContent } from '../feedback/Snackbar'
 
diff --git a/fakemui/fakemui/utils/useMediaQuery.js b/fakemui/fakemui/utils/useMediaQuery.js
index 1f22f4295..2670a97bc 100644
--- a/fakemui/fakemui/utils/useMediaQuery.js
+++ b/fakemui/fakemui/utils/useMediaQuery.js
@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useEffect, useCallback } from 'react'
 
 /**
diff --git a/fakemui/fakemui/x/DataGrid.tsx b/fakemui/fakemui/x/DataGrid.tsx
index cd9da4690..ee943b8cc 100644
--- a/fakemui/fakemui/x/DataGrid.tsx
+++ b/fakemui/fakemui/x/DataGrid.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState, useMemo, useCallback } from 'react'
 import { classNames } from '../utils/classNames'
 
diff --git a/fakemui/fakemui/x/DatePicker.tsx b/fakemui/fakemui/x/DatePicker.tsx
index 136bed74e..c6dda4eb2 100644
--- a/fakemui/fakemui/x/DatePicker.tsx
+++ b/fakemui/fakemui/x/DatePicker.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState, useRef, useEffect } from 'react'
 import { classNames } from '../utils/classNames'
 
diff --git a/frontends/nextjs/src/lib/packages/json/render-json-component.tsx b/frontends/nextjs/src/lib/packages/json/render-json-component.tsx
index 6c58ce61b..6ade3109a 100644
--- a/frontends/nextjs/src/lib/packages/json/render-json-component.tsx
+++ b/frontends/nextjs/src/lib/packages/json/render-json-component.tsx
@@ -4,6 +4,8 @@
  * Renders JSON component definitions to React elements
  */
 
+'use client'
+
 import React from 'react'
 import type { JSONComponent } from './types'
 import type { JsonValue } from '@/types/utility-types'