Add metadata-driven ObjectGridTable and ObjectForm components with automatic field type recognition

.gitignore

@@ -5,6 +5,7 @@ dist
 
 .env
 .env.local
+*.db
 
 # VitePress cache
 docs/.vitepress/cache

CONTRIBUTING.md

@@ -189,9 +189,23 @@ pnpm run test
 ### Development Workflow
 
 ```bash
-# Start the development server (watches for changes)
+# Start the full stack development environment
+# - Server runs in watch mode on http://localhost:3000
+# - Web runs in build watch mode (changes auto-compile)
 pnpm run dev
 
+# Start only the server (without frontend build watch)
+pnpm run server
+
+# Start only the frontend build watch
+pnpm run web:watch
+
+# Build for production (compiles both server and web)
+pnpm run build
+
+# Run the production build (starts server serving built web assets)
+pnpm run start
+
 # Run tests in watch mode
 pnpm run test --watch
 

QUICK_REFERENCE.md

@@ -29,8 +29,9 @@ ObjectQL (Protocol) → ObjectOS (Runtime) → Your Application
 git clone https://github.com/objectql/objectos.git
 cd objectos
 pnpm install
-pnpm run build
-pnpm run dev
+pnpm run dev     # Start development (Server + Web Watch)
+pnpm run build   # Build for production
+pnpm run start   # Run production build
 ```
 
 ### Create Your First Object

apps/web/package.json

@@ -5,13 +5,15 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "build:watch": "vite build --watch",
     "build": "tsc -b && vite build",
     "test": "echo \"No tests specified\" && exit 0",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
     "@objectos/ui": "workspace:*",
+    "@objectql/types": "^1.4.0",
     "better-auth": "^1.4.10",
     "clsx": "^2.1.0",
     "lucide-react": "^0.344.0",

apps/web/src/components/dashboard/EnhancedObjectListView.tsx

@@ -0,0 +1,130 @@
+import { useState, useEffect, useCallback } from 'react';
+import { ObjectGridTable } from '@objectos/ui';
+import type { ObjectConfig } from '@objectql/types';
+
+/**
+ * Enhanced ObjectListView using ObjectGridTable
+ * This is an improved version that uses metadata-driven AG Grid table
+ */
+
+interface EnhancedObjectListViewProps {
+    objectName: string;
+    user: any;
+}
+
+export function EnhancedObjectListView({ objectName, user }: EnhancedObjectListViewProps) {
+    const [data, setData] = useState<any[]>([]);
+    const [objectConfig, setObjectConfig] = useState<ObjectConfig | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const getHeaders = useCallback(() => {
+        const headers: Record<string, string> = { 'Content-Type': 'application/json' };
+        // Use the actual user ID from props instead of hard-coded value
+        if (user?.id || user?._id) {
+            headers['x-user-id'] = user.id || user._id;
+        }
+        return headers;
+    }, [user]);
+
+    // Fetch object metadata
+    useEffect(() => {
+        if (!objectName) return;
+
+        fetch(`/api/metadata/object/${objectName}`, { headers: getHeaders() })
+            .then(async res => {
+                if (!res.ok) {
+                    throw new Error(await res.text() || res.statusText);
+                }
+                return res.json();
+            })
+            .then(config => {
+                setObjectConfig(config);
+            })
+            .catch(err => {
+                console.error('Failed to load object metadata:', err);
+                setError(err.message);
+            });
+    }, [objectName, getHeaders]);
+
+    // Fetch data
+    useEffect(() => {
+        if (!objectName) return;
+
+        setLoading(true);
+        setError(null);
+
+        fetch(`/api/data/${objectName}`, { headers: getHeaders() })
+            .then(async res => {
+                if (!res.ok) {
+                    const contentType = res.headers.get("content-type");
+                    if (contentType && contentType.indexOf("application/json") !== -1) {
+                        const json = await res.json();
+                        throw new Error(json.error || "Failed to load data");
+                    }
+                    throw new Error(await res.text() || res.statusText);
+                }
+                return res.json();
+            })
+            .then(result => {
+                const items = Array.isArray(result) ? result : (result.list || []);
+                setData(items);
+            })
+            .catch(err => {
+                console.error(err);
+                setError(err.message);
+                setData([]);
+            })
+            .finally(() => setLoading(false));
+    }, [objectName, getHeaders]);
+
+    const handleSelectionChanged = (selectedRows: any[]) => {
+        console.log('Selected rows:', selectedRows);
+        // You can add more selection handling logic here
+    };
+
+    if (error) {
+        return (
+            <div className="p-6">
+                <div className="mb-4 p-4 text-destructive bg-destructive/10 rounded-lg border border-destructive/20">
+                    {error}
+                </div>
+            </div>
+        );
+    }
+
+    if (!objectConfig) {
+        return (
+            <div className="flex items-center justify-center h-full">
+                <div className="text-muted-foreground">Loading object metadata...</div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col h-full bg-background p-6">
+            <div className="mb-4">
+                <h2 className="text-2xl font-bold">{objectConfig.label || objectName}</h2>
+                {objectConfig.description && (
+                    <p className="text-muted-foreground mt-1">{objectConfig.description}</p>
+                )}
+            </div>
+
+            {loading ? (
+                <div className="flex items-center justify-center flex-1">
+                    <div className="text-muted-foreground">Loading data...</div>
+                </div>
+            ) : (
+                <ObjectGridTable
+                    objectConfig={objectConfig}
+                    data={data}
+                    height="calc(100vh - 200px)"
+                    pagination={true}
+                    pageSize={20}
+                    rowSelection="multiple"
+                    onSelectionChanged={handleSelectionChanged}
+                />
+            )}
+        </div>
+    );
+}

docs/.vitepress/config.mts

@@ -22,11 +22,17 @@ export default defineConfig({
     sidebar: {
       // Sidebar for Guide section
       '/guide/': [
+        {
+          text: 'Architecture Overview',
+          items: [
+            { text: 'Architecture Diagram', link: '/guide/architecture' },
+            { text: 'Platform Components', link: '/guide/platform-components' }
+          ]
+        },
         {
           text: 'Getting Started',
           items: [
             { text: 'Introduction', link: '/guide/' },
-            { text: 'Architecture Overview', link: '/guide/architecture' },
             { text: 'Data Modeling', link: '/guide/data-modeling' },
             { text: 'Security Guide', link: '/guide/security-guide' }
           ]
@@ -38,6 +44,12 @@ export default defineConfig({
             { text: 'Writing Hooks', link: '/guide/logic-hooks' },
             { text: 'Custom Actions', link: '/guide/logic-actions' }
           ]
+        },
+        {
+          text: 'User Interface',
+          items: [
+            { text: 'UI Framework Overview', link: '/guide/ui-framework' }
+          ]
         }
       ],