Merge branch 'main' of https://github.com/objectstack-ai/spec

Author: hotlong

apps/console/src/App.tsx

@@ -5,11 +5,12 @@ import { SiteHeader } from "@/components/site-header"
 import { SidebarProvider } from "@/components/ui/sidebar"
 import { ObjectDataTable } from './components/ObjectDataTable';
 import { ObjectDataForm } from './components/ObjectDataForm';
+import { PackageManager } from './components/PackageManager';
 import { Toaster } from "@/components/ui/toaster"
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
 import { Database, Layers, Sparkles, Zap } from 'lucide-react';
 import { getApiBaseUrl, config } from './lib/config';
-import { appPackages, type AppPackage } from './mocks/browser';
+import type { AppPackage } from './mocks/browser';
 
 function DashboardWelcome() {
   return (
@@ -119,13 +120,15 @@ function DashboardWelcome() {
 
 export default function App() {
   const [client, setClient] = useState<ObjectStackClient | null>(null);
+  const [apps, setApps] = useState<AppPackage[]>([]);
+  const [selectedApp, setSelectedApp] = useState<AppPackage | null>(null);
   const [selectedObject, setSelectedObject] = useState<string | null>(null);
+  const [selectedView, setSelectedView] = useState<'dashboard' | 'packages' | 'object'>('dashboard');
   const [editingRecord, setEditingRecord] = useState<any>(null);
   const [showForm, setShowForm] = useState(false);
-  const [selectedApp, setSelectedApp] = useState<AppPackage>(appPackages[0]);
 
+  // 1. Create client
   useEffect(() => {
-    // Use the configured API base URL based on runtime mode (MSW or Server)
     const baseUrl = getApiBaseUrl();
     console.log(`[App] Connecting to API: ${baseUrl} (mode: ${config.mode})`);
 
@@ -135,6 +138,32 @@ export default function App() {
     setClient(newClient);
   }, []);
 
+  // 2. Fetch app list from the server API (not hardcoded)
+  useEffect(() => {
+    if (!client) return;
+    let mounted = true;
+
+    async function loadApps() {
+      try {
+        // Spec: GET /api/v1/meta/apps → GetMetaItemsResponse = { type: 'apps', items: AppSchema[] }
+        const result: any = await client!.meta.getItems('apps');
+        const items: AppPackage[] = result?.items || result?.value || (Array.isArray(result) ? result : []);
+        
+        console.log('[App] Fetched apps from API:', items.map((a: any) => a.label || a.name));
+        
+        if (mounted && items.length > 0) {
+          setApps(items);
+          setSelectedApp(items[0]);
+        }
+      } catch (err) {
+        console.error('[App] Failed to fetch apps from API:', err);
+      }
+    }
+
+    loadApps();
+    return () => { mounted = false; };
+  }, [client]);
+
   function handleEdit(record: any) {
     setEditingRecord(record);
     setShowForm(true);
@@ -157,6 +186,24 @@ export default function App() {
   function handleSelectApp(app: AppPackage) {
     setSelectedApp(app);
     setSelectedObject(null);
+    setSelectedView('dashboard');
+    setShowForm(false);
+    setEditingRecord(null);
+  }
+
+  function handleSelectObject(name: string) {
+    if (name) {
+      setSelectedObject(name);
+      setSelectedView('object');
+    } else {
+      setSelectedObject(null);
+      setSelectedView('dashboard');
+    }
+  }
+
+  function handleSelectView(view: 'dashboard' | 'packages') {
+    setSelectedView(view);
+    setSelectedObject(null);
     setShowForm(false);
     setEditingRecord(null);
   }
@@ -166,15 +213,17 @@ export default function App() {
       <AppSidebar 
         client={client} 
         selectedObject={selectedObject} 
-        onSelectObject={(name) => setSelectedObject(name || null)}
-        apps={appPackages}
+        onSelectObject={handleSelectObject}
+        apps={apps}
         selectedApp={selectedApp}
         onSelectApp={handleSelectApp}
+        onSelectView={handleSelectView}
+        selectedView={selectedView}
       />
       <main className="flex min-w-0 flex-1 flex-col bg-background">
-        <SiteHeader selectedObject={selectedObject} appLabel={selectedApp?.label} />
+        <SiteHeader selectedObject={selectedObject} appLabel={selectedApp?.label || selectedApp?.name} />
         <div className="flex flex-1 flex-col overflow-hidden">
-          {selectedObject ? (
+          {selectedView === 'object' && selectedObject ? (
             <div className="flex flex-1 flex-col gap-4 p-4">
               {client && (
                 <ObjectDataTable 
@@ -184,6 +233,8 @@ export default function App() {
                 />
               )}
             </div>
+          ) : selectedView === 'packages' ? (
+            client && <PackageManager client={client} />
           ) : (
             <DashboardWelcome />
           )}

apps/console/src/components/MetadataExplorer.tsx

@@ -22,12 +22,12 @@ export function MetadataExplorer({ client, selectedObject, onSelectObject }: Met
                 // Use plural 'objects' to ensure HttpDispatcher treats it as a list request
                 // Singular 'object' is interpreted as getObject('object')
                 const result: any = await client.meta.getItems('objects');
-                // Support Standard Envelope { success, data } or direct array
+                // Spec: GetMetaItemsResponse = { type, items: any[] }
                 let items = [];
-                if (Array.isArray(result)) {
+                if (result && Array.isArray(result.items)) {
+                    items = result.items;
+                } else if (Array.isArray(result)) {
                     items = result;
-                } else if (result && result.success && Array.isArray(result.data)) {
-                    items = result.data;
                 } else if (result && Array.isArray(result.value)) {
                     items = result.value;
                 }

apps/console/src/components/ObjectDataForm.tsx

@@ -32,7 +32,8 @@ export function ObjectDataForm({ client, objectApiName, record, onSuccess, onCan
             try {
                 const found: any = await client.meta.getItem('object', objectApiName);
                 if (mounted && found) {
-                    const resolved = found.data || found;
+                    // Spec: GetMetaItemResponse = { type, name, item }
+                    const resolved = found.item || found;
                     setDef(resolved);
                     if (record) {
                         setFormData({ ...record });

apps/console/src/components/ObjectDataTable.tsx

@@ -94,7 +94,8 @@ export function ObjectDataTable({ client, objectApiName, onEdit }: ObjectDataTab
             try {
                 const found: any = await client.meta.getItem('object', objectApiName);
                 if (mounted && found) {
-                    const def = found.data || found;
+                    // Spec: GetMetaItemResponse = { type, name, item }
+                    const def = found.item || found;
                     setDef(def);
                 }
             } catch (err) {
@@ -121,17 +122,11 @@ export function ObjectDataTable({ client, objectApiName, onEdit }: ObjectDataTab
                 });
 
                 if (mounted) {
-                    if (result && Array.isArray(result.value)) {
-                        setRecords(result.value);
-                        if (typeof result.count === 'number') setTotal(result.count);
-                    } else if (result && result.success && Array.isArray(result.data)) {
-                        setRecords(result.data);
-                        if (result.meta && typeof result.meta.count === 'number') setTotal(result.meta.count);
-                    } else if (Array.isArray(result)) {
-                        setRecords(result);
-                    } else if (result && typeof result === 'object' && result?.data && Array.isArray(result.data)) {
-                        setRecords(result.data);
-                    }
+                    // Spec: FindDataResponse = { object, records, total?, hasMore? }
+                    const records = result?.records || result?.value || (Array.isArray(result) ? result : []);
+                    setRecords(records);
+                    if (typeof result?.total === 'number') setTotal(result.total);
+                    else if (typeof result?.count === 'number') setTotal(result.count);
                 }
             } catch (err) {
                 console.error('Failed to load data', err);
@@ -153,9 +148,9 @@ export function ObjectDataTable({ client, objectApiName, onEdit }: ObjectDataTab
                     skip: (page - 1) * pageSize
                 }
             });
-            if (result && (result.value || Array.isArray(result))) {
-                setRecords(result.value || result);
-            }
+            // Spec: FindDataResponse = { object, records, total? }
+            const records = result?.records || result?.value || (Array.isArray(result) ? result : []);
+            setRecords(records);
         } catch (err) {
             alert('Failed to delete: ' + err);
         }
@@ -171,14 +166,11 @@ export function ObjectDataTable({ client, objectApiName, onEdit }: ObjectDataTab
                     count: true
                 }
             });
-            if (result && Array.isArray(result.value)) {
-                setRecords(result.value);
-                if (typeof result.count === 'number') setTotal(result.count);
-            } else if (result && result.success && Array.isArray(result.data)) {
-                setRecords(result.data);
-            } else if (Array.isArray(result)) {
-                setRecords(result);
-            }
+            // Spec: FindDataResponse = { object, records, total? }
+            const records = result?.records || result?.value || (Array.isArray(result) ? result : []);
+            setRecords(records);
+            if (typeof result?.total === 'number') setTotal(result.total);
+            else if (typeof result?.count === 'number') setTotal(result.count);
         } catch (err) {
             console.error('Failed to refresh', err);
         } finally {