feat: Enhance AppSwitcher to utilize remote app data and improve app registry handling

Author: hotlong

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

@@ -18,7 +18,9 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from '@/components/ui/sidebar';
-import { mockApps } from '@/lib/app-registry';
+import { useAppList } from '@/hooks/use-metadata';
+import { consoleApp, mockApps, toRegistryEntry } from '@/lib/app-registry';
+import type { AppRegistryEntry } from '@/lib/app-registry';
 
 interface AppSwitcherProps {
   /** "sidebar" = full sidebar header style, "topbar" = compact button for top bar */
@@ -29,29 +31,37 @@ function useAppSwitcherState() {
   const navigate = useNavigate();
   const { pathname } = useLocation();
   const [query, setQuery] = useState('');
+  const { data: remoteApps } = useAppList();
+
+  // Build the app list: Console (always) + remote apps converted to registry entries.
+  // Falls back to mockApps when the server is unreachable (useAppList returns mockAppDefinitions).
+  const apps: AppRegistryEntry[] = useMemo(() => {
+    if (!remoteApps || remoteApps.length === 0) return mockApps;
+    return [consoleApp, ...remoteApps.map(toRegistryEntry)];
+  }, [remoteApps]);
 
   const normalizedQuery = query.trim().toLowerCase();
 
   const activeApp = useMemo(() => {
     if (pathname.startsWith('/apps/')) {
       const [, , appId] = pathname.split('/');
-      return mockApps.find((app) => app.id === appId);
+      return apps.find((app) => app.id === appId);
     }
     if (pathname.startsWith('/settings')) {
-      return mockApps.find((app) => app.id === 'console');
+      return apps.find((app) => app.id === 'console');
     }
-    return mockApps.find((app) => app.id === 'console');
-  }, [pathname]);
+    return apps.find((app) => app.id === 'console');
+  }, [pathname, apps]);
 
   const displayName = activeApp?.name ?? 'Console';
 
   const filteredApps = useMemo(() => {
-    if (!normalizedQuery) return mockApps;
-    return mockApps.filter((app) => {
+    if (!normalizedQuery) return apps;
+    return apps.filter((app) => {
       const haystack = `${app.name} ${app.description}`.toLowerCase();
       return haystack.includes(normalizedQuery);
     });
-  }, [normalizedQuery]);
+  }, [normalizedQuery, apps]);
 
   const pinnedApps = filteredApps.filter((app) => app.pinned);
   const systemApps = filteredApps.filter(
@@ -87,7 +97,7 @@ function AppDropdownBody({
   customApps,
   filteredApps,
 }: ReturnType<typeof useAppSwitcherState>) {
-  const renderAppItem = (app: (typeof mockApps)[number]) => (
+  const renderAppItem = (app: AppRegistryEntry) => (
     <DropdownMenuItem
       key={app.id}
       className="flex items-start gap-2"

apps/web/src/lib/app-registry.ts

@@ -1,3 +1,5 @@
+import type { AppDefinition } from '@/types/metadata';
+
 export type AppRegistryEntry = {
   id: string;
   name: string;
@@ -8,16 +10,39 @@ export type AppRegistryEntry = {
   pinned?: boolean;
 };
 
+/**
+ * Convert an AppDefinition (from remote metadata API) to an AppRegistryEntry
+ * used by the AppSwitcher UI.
+ */
+export function toRegistryEntry(app: AppDefinition): AppRegistryEntry {
+  return {
+    id: app.name,
+    name: app.label || app.name,
+    description: app.description || '',
+    href: `/apps/${app.name}`,
+    category: 'business',
+    status: app.active !== false ? 'active' : 'paused',
+  };
+}
+
+/**
+ * Static Console entry — always present regardless of remote data.
+ */
+export const consoleApp: AppRegistryEntry = {
+  id: 'console',
+  name: 'Console',
+  description: 'System administration and settings.',
+  href: '/settings',
+  category: 'system',
+  status: 'active',
+  pinned: true,
+};
+
+/**
+ * Fallback mock apps used when the server is unreachable.
+ */
 export const mockApps: AppRegistryEntry[] = [
-  {
-    id: 'console',
-    name: 'Console',
-    description: 'System administration and settings.',
-    href: '/settings',
-    category: 'system',
-    status: 'active',
-    pinned: true,
-  },
+  consoleApp,
   {
     id: 'crm',
     name: 'CRM',

objectstack.config.ts

@@ -1,10 +1,14 @@
 /**
  * ObjectStack Configuration
- * 
+ *
  * Configuration file for @objectstack/cli serve command.
  * This defines the kernel configuration, plugins, and metadata sources.
  */
 
+import { defineStack } from '@objectstack/spec';
+import { AppPlugin, DriverPlugin } from '@objectstack/runtime';
+import { ObjectQLPlugin } from '@objectstack/objectql';
+import { InMemoryDriver } from '@objectstack/driver-memory';
 import { AuditLogPlugin } from '@objectos/audit';
 import { BetterAuthPlugin } from '@objectos/auth';
 import { AutomationPlugin } from '@objectos/automation';
@@ -19,7 +23,20 @@ import { StoragePlugin } from '@objectos/storage';
 import { WorkflowPlugin } from '@objectos/workflow';
 import { resolve } from 'path';
 
-export default {
+// ─── Example App Bundles ─────────────────────────────────────────
+import CrmApp from './examples/crm/objectstack.config';
+import TodoApp from './examples/todo/objectstack.config';
+
+export default defineStack({
+  manifest: {
+    id: 'com.objectos.platform',
+    name: 'ObjectOS',
+    namespace: 'objectos',
+    version: '0.1.0',
+    type: 'app',
+    description: 'ObjectOS Business Operating System',
+  },
+
   /**
    * Metadata sources
    * Define where to load object schemas, permissions, workflows, etc.
@@ -33,20 +50,18 @@ export default {
     ]
   },
 
-  /**
-   * Objects configuration
-   * Can define objects inline or reference external files
-   */
-  objects: {},
-
   /**
    * Plugins to check/load
    * These are initialized in order during kernel bootstrap
    */
   plugins: [
+    // ObjectQL Engine & Driver
+    new ObjectQLPlugin(),
+    new DriverPlugin(new InMemoryDriver()),
+
     // Foundation
     new MetricsPlugin(),
-    new CachePlugin(), 
+    new CachePlugin(),
     new StoragePlugin(),
 
     // Core
@@ -58,11 +73,15 @@ export default {
     new WorkflowPlugin(),
     new AutomationPlugin(),
     new JobsPlugin(),
-    
+
     // Services
     new NotificationPlugin(),
     new I18nPlugin(),
     // createRealtimePlugin(),
+
+    // Example Apps
+    new AppPlugin(CrmApp),
+    new AppPlugin(TodoApp),
   ],
 
   /**
@@ -93,4 +112,4 @@ export default {
       level: process.env.LOG_LEVEL || 'info',
     }
   }
-};
+} as any);