feat: Add multi-app support with CRM and Todo app integration in console

Author: hotlong

apps/console/package.json

@@ -14,6 +14,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@example/app-crm": "workspace:*",
     "@example/app-todo": "workspace:*",
     "@objectstack/client": "workspace:*",
     "@objectstack/client-react": "workspace:*",

apps/console/src/App.tsx

@@ -9,6 +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';
 
 function DashboardWelcome() {
   return (
@@ -121,6 +122,7 @@ export default function App() {
   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]);
 
   useEffect(() => {
     // Use the configured API base URL based on runtime mode (MSW or Server)
@@ -152,15 +154,25 @@ export default function App() {
     setEditingRecord(null);
   }
 
+  function handleSelectApp(app: AppPackage) {
+    setSelectedApp(app);
+    setSelectedObject(null);
+    setShowForm(false);
+    setEditingRecord(null);
+  }
+
   return (
     <SidebarProvider>
       <AppSidebar 
         client={client} 
         selectedObject={selectedObject} 
-        onSelectObject={(name) => setSelectedObject(name || null)} 
+        onSelectObject={(name) => setSelectedObject(name || null)}
+        apps={appPackages}
+        selectedApp={selectedApp}
+        onSelectApp={handleSelectApp}
       />
       <main className="flex flex-1 flex-col bg-background">
-        <SiteHeader selectedObject={selectedObject} />
+        <SiteHeader selectedObject={selectedObject} appLabel={selectedApp?.label} />
         <div className="flex flex-1 flex-col">
           {selectedObject ? (
             <div className="flex flex-1 flex-col gap-4 p-4">

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

@@ -7,9 +7,13 @@ import {
   LogOut,
   Sparkles,
   Search,
+  Check,
+  Briefcase,
+  CheckSquare,
 } from "lucide-react"
 import { useState, useEffect } from "react"
 import { ObjectStackClient } from '@objectstack/client';
+import type { AppPackage } from "@/mocks/browser";
 
 import {
   Sidebar,
@@ -38,13 +42,21 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 
+const APP_ICONS: Record<string, React.ElementType> = {
+  'check-square': CheckSquare,
+  'briefcase': Briefcase,
+};
+
 interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
   client: ObjectStackClient | null;
   selectedObject: string | null;
   onSelectObject: (name: string) => void;
+  apps: AppPackage[];
+  selectedApp: AppPackage | null;
+  onSelectApp: (app: AppPackage) => void;
 }
 
-export function AppSidebar({ client, selectedObject, onSelectObject, ...props }: AppSidebarProps) {
+export function AppSidebar({ client, selectedObject, onSelectObject, apps, selectedApp, onSelectApp, ...props }: AppSidebarProps) {
   const [objects, setObjects] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
@@ -73,24 +85,72 @@ export function AppSidebar({ client, selectedObject, onSelectObject, ...props }:
     loadObjects();
   }, [client]);
 
-  const filteredObjects = objects.filter(obj =>
+  // Filter objects by selected app's registered objects
+  const appObjectNames = selectedApp
+    ? (selectedApp.config.objects || []).map((o: any) => o.name)
+    : [];
+
+  const appObjects = selectedApp
+    ? objects.filter(obj => appObjectNames.includes(obj.name))
+    : objects;
+
+  const filteredObjects = appObjects.filter(obj =>
     !searchQuery || 
     obj.label?.toLowerCase().includes(searchQuery.toLowerCase()) ||
     obj.name?.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  const AppIcon = selectedApp?.icon ? (APP_ICONS[selectedApp.icon] || Sparkles) : Sparkles;
+
   return (
     <Sidebar {...props}>
       <SidebarHeader className="border-b">
-        <div className="flex items-center gap-2 px-2 py-1.5">
-          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-            <Sparkles className="h-4 w-4" />
-          </div>
-          <div className="flex flex-col gap-0.5 leading-none">
-            <span className="font-semibold text-sm">ObjectStack</span>
-            <span className="text-xs text-muted-foreground">Platform Console</span>
-          </div>
-        </div>
+        {/* App Switcher */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-sidebar-accent transition-colors">
+              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                <AppIcon className="h-4 w-4" />
+              </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'}
+                </span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {selectedApp ? selectedApp.description : 'Select an app'}
+                </span>
+              </div>
+              <ChevronsUpDown className="ml-auto h-4 w-4 shrink-0 text-muted-foreground" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-[--radix-dropdown-menu-trigger-width] min-w-64" align="start" sideOffset={4}>
+            <DropdownMenuLabel>Applications</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {apps.map((app) => {
+              const Icon = app.icon ? (APP_ICONS[app.icon] || Package) : Package;
+              return (
+                <DropdownMenuItem
+                  key={app.id}
+                  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>
+                    {app.description && (
+                      <span className="text-xs text-muted-foreground">{app.description}</span>
+                    )}
+                  </div>
+                  {selectedApp?.id === app.id && (
+                    <Check className="h-4 w-4 text-primary" />
+                  )}
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
       </SidebarHeader>
 
       <SidebarContent>

apps/console/src/components/site-header.tsx

@@ -12,9 +12,10 @@ import { ThemeToggle } from "@/components/theme-toggle"
 
 interface SiteHeaderProps {
   selectedObject: string | null;
+  appLabel?: string;
 }
 
-export function SiteHeader({ selectedObject }: SiteHeaderProps) {
+export function SiteHeader({ selectedObject, appLabel }: SiteHeaderProps) {
   return (
     <header className="flex h-16 shrink-0 items-center justify-between gap-2 border-b px-4">
       <div className="flex items-center gap-2">
@@ -24,7 +25,7 @@ export function SiteHeader({ selectedObject }: SiteHeaderProps) {
           <BreadcrumbList>
             <BreadcrumbItem className="hidden md:block">
               <BreadcrumbLink href="#">
-                ObjectStack
+                {appLabel || 'ObjectStack'}
               </BreadcrumbLink>
             </BreadcrumbItem>
             <BreadcrumbSeparator className="hidden md:block" />

apps/console/src/mocks/browser.ts

@@ -3,25 +3,59 @@
  * 
  * 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.)
  */
 import { ObjectKernel } from '@objectstack/runtime';
 import todoConfig from '@example/app-todo/objectstack.config';
+import crmConfig from '@example/app-crm/objectstack.config';
 import { createKernel } from './createKernel';
 
 let kernel: ObjectKernel | null = null;
 
+/** All available app packages */
+export interface AppPackage {
+  id: string;
+  name: string;
+  label: string;
+  description?: string;
+  icon?: string;
+  config: any;
+}
+
+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),
+  },
+];
+
 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);
 
-  // Handle CommonJS/ESM interop for config loading
-  const appConfig = (todoConfig as any).default || todoConfig;
-  console.log('[MSW] Loaded Config:', appConfig);
-  
-  // Use shared factory
+  // Use shared factory with multi-app support
   kernel = await createKernel({
-    appConfig,
+    appConfigs,
     enableBrowser: true
   });
 

apps/console/src/mocks/createKernel.ts

@@ -4,15 +4,20 @@ import { InMemoryDriver } from '@objectstack/driver-memory';
 import { MSWPlugin } from '@objectstack/plugin-msw';
 
 export interface KernelOptions {
-    appConfig: any;
+    appConfigs?: any[];      // Multiple app configs
+    appConfig?: any;         // Legacy single app config (backward compat)
     enableBrowser?: boolean; // Default true (for browser usage), set false for tests
 }
 
 export async function createKernel(options: KernelOptions) {
-    const { appConfig, enableBrowser = true } = options;
+    const { enableBrowser = true } = options;
+    
+    // Support both single and multi-app modes
+    const allConfigs = options.appConfigs 
+        || (options.appConfig ? [options.appConfig] : []);
 
     console.log('[KernelFactory] Creating ObjectStack Kernel...');
-    console.log('[KernelFactory] App Config:', appConfig);
+    console.log('[KernelFactory] App Configs:', allConfigs.length);
 
     const driver = new InMemoryDriver();
     const kernel = new ObjectKernel();
@@ -23,8 +28,11 @@ export async function createKernel(options: KernelOptions) {
     // Register the driver
     await kernel.use(new DriverPlugin(driver, 'memory'));
 
-    // Load app config as a plugin (which handles Seeding)
-    await kernel.use(new AppPlugin(appConfig));
+    // Load all app configs as plugins (handles object registration & seeding)
+    for (const appConfig of allConfigs) {
+        console.log('[KernelFactory] Loading app:', appConfig.manifest?.id || appConfig.name || 'unknown');
+        await kernel.use(new AppPlugin(appConfig));
+    }
 
     // MSW Plugin
     await kernel.use(new MSWPlugin({
@@ -222,29 +230,27 @@ export async function createKernel(options: KernelOptions) {
     // FORCE SYNC SEED: Guarantees data availability for both Browser and Tests
     const ql = (kernel as any).context?.getService('objectql');
     if (ql) {
-        // Initial check
-        let tasks = await ql.find('todo_task');
-        
-        // If AppPlugin's async seeding hasn't finished or failed, do it manually now.
-        if (!tasks || tasks.length === 0) {
-            console.warn('[KernelFactory] Seeding check failed. Executing IMMEDIATE Manual Seeding...');
-            
+        // Seed data for all app configs
+        for (const appConfig of allConfigs) {
             const manifestData = appConfig.data || (appConfig.manifest && appConfig.manifest.data);
             if (manifestData && Array.isArray(manifestData)) {
                 for (const dataset of manifestData) {
-                    if (dataset.records) {
+                    if (!dataset.records || !dataset.object) continue;
+                    
+                    // Check if data already seeded
+                    let existing = await ql.find(dataset.object);
+                    if (existing && (existing as any).value) existing = (existing as any).value;
+                    
+                    if (!existing || existing.length === 0) {
                         console.log(`[KernelFactory] Manual Seeding ${dataset.records.length} records for ${dataset.object}`);
                         for (const record of dataset.records) {
                             await ql.insert(dataset.object, record);
                         }
+                    } else {
+                        console.log(`[KernelFactory] Data verified present for ${dataset.object}: ${existing.length} records.`);
                     }
                 }
             }
-            // Verify
-            tasks = await ql.find('todo_task');
-            console.log(`[KernelFactory] Manual Seeding Complete. Count in DB: ${tasks?.length}`);
-        } else {
-             console.log(`[KernelFactory] Data verified present: ${tasks?.length} records.`);
         }
     }