feat: Refactor app handling to fetch apps dynamically from API and update metadata structure

Author: hotlong

apps/console/src/App.tsx

@@ -9,7 +9,7 @@ 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 +119,14 @@ 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 [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 +136,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);
@@ -167,12 +194,12 @@ export default function App() {
         client={client} 
         selectedObject={selectedObject} 
         onSelectObject={(name) => setSelectedObject(name || null)}
-        apps={appPackages}
+        apps={apps}
         selectedApp={selectedApp}
         onSelectApp={handleSelectApp}
       />
       <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 ? (
             <div className="flex flex-1 flex-col gap-4 p-4">

apps/console/src/components/app-sidebar.tsx

@@ -87,7 +87,7 @@ function getTypeIcon(type: string): LucideIcon {
 }
 
 /** Types that are internal / should be hidden from the sidebar */
-const HIDDEN_TYPES = new Set(['plugin', 'plugins', 'kind', 'app']);
+const HIDDEN_TYPES = new Set(['plugin', 'plugins', 'kind', 'app', 'apps']);
 
 interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
   client: ObjectStackClient | null;
@@ -177,10 +177,10 @@ export function AppSidebar({ client, selectedObject, onSelectObject, apps, selec
               </div>
               <div className="flex flex-1 flex-col gap-0.5 leading-none overflow-hidden">
                 <span className="truncate font-semibold text-sm">
-                  {selectedApp ? selectedApp.label : 'ObjectStack'}
+                  {selectedApp ? (selectedApp.label || selectedApp.name) : 'ObjectStack'}
                 </span>
                 <span className="truncate text-xs text-muted-foreground">
-                  {selectedApp ? selectedApp.description : 'Select an app'}
+                  {selectedApp ? (selectedApp.description || 'No description') : 'Loading apps...'}
                 </span>
               </div>
               <ChevronsUpDown className="ml-auto h-4 w-4 shrink-0 text-muted-foreground" />
@@ -193,20 +193,20 @@ export function AppSidebar({ client, selectedObject, onSelectObject, apps, selec
               const Icon = app.icon ? (APP_ICONS[app.icon] || Package) : Package;
               return (
                 <DropdownMenuItem
-                  key={app.id}
+                  key={app.name}
                   onClick={() => onSelectApp(app)}
                   className="gap-2 py-2"
                 >
                   <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-primary/10 text-primary">
                     <Icon className="h-3.5 w-3.5" />
                   </div>
                   <div className="flex flex-1 flex-col leading-tight">
-                    <span className="text-sm font-medium">{app.label}</span>
+                    <span className="text-sm font-medium">{app.label || app.name}</span>
                     {app.description && (
                       <span className="text-xs text-muted-foreground">{app.description}</span>
                     )}
                   </div>
-                  {selectedApp?.id === app.id && (
+                  {selectedApp?.name === app.name && (
                     <Check className="h-4 w-4 text-primary" />
                   )}
                 </DropdownMenuItem>

apps/console/src/mocks/browser.ts

@@ -3,7 +3,10 @@
  * 
  * This creates a complete ObjectStack environment in the browser using the In-Memory Driver
  * and the MSW Plugin which automatically exposes the API.
- * Supports multiple app packages (app-todo, app-crm, etc.)
+ * 
+ * NOTE: The console does NOT hardcode a list of app packages. The app list is
+ * fetched dynamically from the server API via `GET /api/v1/meta/apps`.
+ * The imports here are only used to boot the in-browser kernel (MSW mode).
  */
 import { ObjectKernel } from '@objectstack/runtime';
 import todoConfig from '@example/app-todo/objectstack.config';
@@ -12,50 +15,48 @@ import { createKernel } from './createKernel';
 
 let kernel: ObjectKernel | null = null;
 
-/** All available app packages */
+/**
+ * AppPackage — derived from the `apps` metadata type (AppSchema in spec).
+ * All fields come from the server API, NOT from frontend config.
+ */
 export interface AppPackage {
-  id: string;
+  /** Machine name (snake_case), e.g. 'crm_enterprise' */
   name: string;
+  /** Display label, e.g. 'Enterprise CRM' */
   label: string;
+  /** Description */
   description?: string;
+  /** Icon name (Lucide) */
   icon?: string;
-  config: any;
+  /** Navigation tree */
+  navigation?: any[];
+  /** Branding */
+  branding?: any;
+  /** Whether app is active */
+  active?: boolean;
 }
 
 function resolveConfig(raw: any) {
   return (raw as any).default || raw;
 }
 
-export const appPackages: AppPackage[] = [
-  {
-    id: 'com.example.todo',
-    name: 'todo_app',
-    label: 'Todo App',
-    description: 'A simple Todo example',
-    icon: 'check-square',
-    config: resolveConfig(todoConfig),
-  },
-  {
-    id: 'com.example.crm',
-    name: 'crm_app',
-    label: 'Enterprise CRM',
-    description: 'Comprehensive enterprise CRM',
-    icon: 'briefcase',
-    config: resolveConfig(crmConfig),
-  },
+/**
+ * App configs used ONLY for kernel bootstrapping in MSW (browser) mode.
+ * The UI never reads this directly — it discovers apps via the meta API.
+ */
+const bootConfigs = [
+  resolveConfig(todoConfig),
+  resolveConfig(crmConfig),
 ];
 
 export async function startMockServer() {
   if (kernel) return;
 
   console.log('[MSW] Starting ObjectStack Runtime (Browser Mode)...');
-  console.log('[MSW] Loading apps:', appPackages.map(a => a.label));
-
-  const appConfigs = appPackages.map(a => a.config);
 
   // Use shared factory with multi-app support
   kernel = await createKernel({
-    appConfigs,
+    appConfigs: bootConfigs,
     enableBrowser: true
   });