feat: add Timestamp and Toggle components; implement TreeIcon and EditorActions components

- Introduced Timestamp component for displaying formatted dates and relative time.
- Added Toggle component for switch-like functionality with customizable sizes.
- Implemented TreeIcon component for rendering tree icons using Phosphor icons.
- Created EditorActions component for explain and improve actions with icons.
- Developed FileTabs component for managing open files with close functionality.
- Added LazyInlineMonacoEditor and LazyMonacoEditor for lazy loading Monaco editor.
- Implemented NavigationItem for navigation with badges and icons.
- Created PageHeaderContent for displaying page headers with icons and descriptions.
- Added JSON configuration files for various UI components and layouts.
- Enhanced data binding with new computed data source hook.
- Updated component registry and types for new components.
- Configured Vite for improved hot module replacement experience.

e2e/codeforge.spec.ts

@@ -8,7 +8,10 @@ test.describe('CodeForge - Core Functionality', () => {
   })
 
   test('should load the application successfully', async ({ page }) => {
-    await expect(page.locator('body')).toBeVisible()
+    // Check root has children (content rendered)
+    await page.waitForSelector('#root > *', { timeout: 10000 })
+    const root = page.locator('#root')
+    await expect(root).toHaveCount(1)
   })
 
   test('should display main navigation', async ({ page }) => {
@@ -50,8 +53,8 @@ test.describe('CodeForge - Responsive Design', () => {
     await page.setViewportSize({ width: 375, height: 667 })
     await page.goto('/', { waitUntil: 'domcontentloaded', timeout: 10000 })
     await page.waitForLoadState('networkidle', { timeout: 5000 })
-    
-    await expect(page.locator('body')).toBeVisible()
+
+    await page.waitForSelector('#root > *', { timeout: 10000 })
   })
 
   test('should work on tablet viewport', async ({ page }) => {
@@ -59,7 +62,7 @@ test.describe('CodeForge - Responsive Design', () => {
     await page.setViewportSize({ width: 768, height: 1024 })
     await page.goto('/', { waitUntil: 'domcontentloaded', timeout: 10000 })
     await page.waitForLoadState('networkidle', { timeout: 5000 })
-    
-    await expect(page.locator('body')).toBeVisible()
+
+    await page.waitForSelector('#root > *', { timeout: 10000 })
   })
 })

e2e/debug.spec.ts

@@ -0,0 +1,42 @@
+import { test, expect } from '@playwright/test'
+
+test('debug page load', async ({ page }) => {
+  const errors: string[] = []
+  const pageErrors: Error[] = []
+
+  page.on('console', (msg) => {
+    if (msg.type() === 'error') {
+      errors.push(msg.text())
+    }
+  })
+
+  page.on('pageerror', (error) => {
+    pageErrors.push(error)
+  })
+
+  await page.goto('/', { waitUntil: 'networkidle', timeout: 15000 })
+
+  // Wait a bit
+  await page.waitForTimeout(2000)
+
+  // Get page content
+  const html = await page.content()
+  const rootHTML = await page.locator('#root').innerHTML().catch(() => 'ERROR GETTING ROOT')
+
+  console.log('=== PAGE ERRORS ===')
+  pageErrors.forEach(err => console.log(err.message))
+
+  console.log('\n=== CONSOLE ERRORS ===')
+  errors.forEach(err => console.log(err))
+
+  console.log('\n=== ROOT CONTENT ===')
+  console.log(rootHTML.substring(0, 500))
+
+  console.log('\n=== ROOT VISIBLE ===')
+  const rootVisible = await page.locator('#root').isVisible().catch(() => false)
+  console.log('Root visible:', rootVisible)
+
+  console.log('\n=== ROOT HAS CHILDREN ===')
+  const childCount = await page.locator('#root > *').count()
+  console.log('Child count:', childCount)
+})

e2e/smoke.spec.ts

@@ -4,8 +4,12 @@ test.describe('CodeForge - Smoke Tests', () => {
   test('app loads successfully', async ({ page }) => {
     test.setTimeout(20000)
     await page.goto('/', { waitUntil: 'networkidle', timeout: 15000 })
-    
-    await expect(page.locator('body')).toBeVisible({ timeout: 5000 })
+
+    // Check that the app has rendered content (more reliable than checking visibility)
+    const root = page.locator('#root')
+    await expect(root).toHaveCount(1, { timeout: 5000 })
+    // Wait for any content to be rendered
+    await page.waitForSelector('#root > *', { timeout: 10000 })
   })
 
   test('can navigate to dashboard tab', async ({ page }) => {